/* ═══════════════════════════════════════════
   GRR BASE / RESET / SHARED COMPONENTS
═══════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  min-height: 100dvh;
  font-family: var(--f-body);
  font-size: var(--t-base);
  color: var(--grr-text);
  background: var(--grr-bg);
  line-height: 1.75;
  overflow-x: hidden;
}

img,picture,video,canvas,svg { display:block; max-width:100%; height:auto; }
ul[role=list],ol[role=list] { list-style:none; }
input,button,textarea,select { font:inherit; color:inherit; }
h1,h2,h3,h4 { text-wrap:balance; line-height:1.15; }
p,li,figcaption { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; background:none; border:none; }

::selection { background:rgba(201,150,12,.2); }
:focus-visible { outline:2px solid var(--grr-gold); outline-offset:3px; border-radius:var(--r-sm); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Layout helpers ──────────────────────── */
.container {
  width:100%;
  max-width: var(--w-wide);
  margin-inline:auto;
  padding-inline: clamp(var(--s4), 4vw, var(--s12));
}

.container--narrow { max-width: var(--w-narrow); }
.container--default { max-width: var(--w-default); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border-width:0;
}

/* ── Buttons ──────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-body); font-size:var(--t-base); font-weight:600;
  letter-spacing:.02em; padding:.85rem 1.75rem;
  border-radius:var(--r-md); border:2px solid transparent;
  transition:all var(--ease); white-space:nowrap; cursor:pointer;
  text-align:center; justify-content:center;
  min-height:52px; /* minimum tap target height for elderly/mobile */
}
.btn--primary {
  background:var(--grr-gold); color:#111;
  border-color:var(--grr-gold);
}
.btn--primary:hover {
  background:var(--grr-gold-hi); border-color:var(--grr-gold-hi);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(201,150,12,.3);
}
.btn--ghost {
  background:transparent; color:var(--grr-text);
  border-color:rgba(255,255,255,.22);
}
.btn--ghost:hover { border-color:var(--grr-gold); color:var(--grr-gold); transform:translateY(-2px); }

.btn--lg { font-size:var(--t-lg); padding:1.1rem 2.25rem; min-height:58px; }
.btn--sm { font-size:var(--t-sm); padding:.65rem 1.25rem; min-height:44px; }
.btn--full { width:100%; }
.btn--primary:active, .btn--ghost:active { transform:translateY(0); }

/* ── Section headers ─────────────────────── */
.sec-header {
  text-align:center; max-width:660px;
  margin-inline:auto; margin-bottom:var(--s12);
}
.sec-eyebrow {
  display:block; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--grr-gold); margin-bottom:var(--s3);
}
.sec-header h2,.sec-header h1 {
  font-family:var(--f-display); font-size:var(--t-2xl);
  color:var(--grr-text); margin-bottom:var(--s4);
}
.sec-header p {
  font-size:var(--t-base); color:var(--grr-text-muted); line-height:1.75;
}

/* ── Cards ──────────────────────────────── */
.card {
  background:var(--grr-surface); border:1px solid var(--grr-border);
  border-radius:var(--r-lg); padding:var(--s8);
  transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  position:relative; overflow:hidden;
}
.card:hover {
  border-color:var(--grr-gold-border);
  transform:translateY(-3px); box-shadow:var(--sh-md);
}
.card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--grr-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--ease-slow);
}
.card:hover::after { transform:scaleX(1); }

/* ── Forms ──────────────────────────────── */
.form-group {
  display:flex; flex-direction:column; gap:var(--s2);
  margin-bottom:var(--s5);
}
.form-group label {
  font-size:var(--t-base); font-weight:600;
  color:var(--grr-text-muted); letter-spacing:.01em;
}
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--grr-surface-2); border:1px solid var(--grr-border);
  border-radius:var(--r-md); padding:.85rem 1.1rem;
  font-size:var(--t-base); color:var(--grr-text); width:100%;
  min-height:52px; /* accessible tap target */
  transition:border-color var(--ease), box-shadow var(--ease);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--grr-text-faint); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--grr-gold);
  box-shadow:0 0 0 3px rgba(201,150,12,.1);
}
.form-group textarea { resize:vertical; min-height:110px; }
/* Custom arrow styling — desktop only. On mobile, restore native picker so iOS/Android wheel opens on tap.
   Also force dark text color on mobile so options are legible in the native Android/iOS picker (which renders on a white/system background). */
.form-group select { appearance:none; -webkit-appearance:none; cursor:pointer; }
@media (max-width:768px) {
  .form-group select {
    appearance:auto;
    -webkit-appearance:auto;
    color:#111 !important;          /* readable in native white picker backdrop */
    background:#f5f5f5 !important;  /* light background so closed state is also legible */
    border-color:rgba(0,0,0,.2) !important;
  }
  .form-group select option { color:#111; background:#fff; }
}
.form-group .select-wrap { position:relative; }
.form-group .select-wrap svg {
  position:absolute; right:.9rem; top:50%;
  transform:translateY(-50%); pointer-events:none;
  color:var(--grr-text-faint);
}
@media (max-width:768px) {
  .form-group .select-wrap svg { display:none; }
}
.required-mark { color:var(--grr-gold); }

/* ── Fade-up scroll animations ───────────── */
.fade-up {
  opacity:0; transform:translateY(20px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── Horizontal rule ─────────────────────── */
.rule { border:none; border-top:1px solid var(--grr-border); margin-block:var(--s8); }