/* ==========================================================================
   BASE — reset, typography, layout primitives, page/reveal machinery.
   ========================================================================== */

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

body{
  font-family:'Inter', sans-serif;
  background:var(--sand);
  color:var(--tide);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* `clip`, not `hidden`. overflow-x:hidden makes the body a scroll container,
     which silently kills position:sticky for every descendant (the visa intro
     photo and the story-reader sidebar both just scrolled away). `clip` crops
     the same overflow without creating that scroll container. The `hidden`
     line stays first as a fallback for engines without `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:var(--display-weight);
  line-height:1.1;
  color:var(--marine);
  letter-spacing:var(--display-track);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.08em; text-transform:uppercase;
  font-size:.72rem; font-weight:600;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* padding-top/bottom only — never the shorthand, or it clobbers .wrap's
   side padding when both classes sit on the same element */
.block{ padding-top:104px; padding-bottom:104px; }
.block-sm{ padding-top:70px; padding-bottom:70px; }

.eyebrow{ color:var(--bay); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.eyebrow::before{
  content:''; width:var(--eyebrow-rule); height:2px; background:var(--amber);
  display:inline-block; transition:width var(--dur) var(--ease);
}

.section-head{ max-width:660px; margin-bottom:52px; }
.section-head h2{ font-size:var(--h2); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:1.02rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

/* ===================== PAGE ROUTER ===================== */
/* One .page per navigable page. The router shows exactly one at a time —
   on every tier. Basic simply has fewer of them, and folds About/Services/
   Reviews into #page-home as sections. */
.page{ display:none; }
.page.active{ display:block; }

/* The site header is fixed and the picker strip sits under it, so the first
   block of any non-hero page has to clear both by hand. The hero doesn't —
   it's full-bleed and deliberately runs underneath. */
.page-lead{ padding-top:calc(var(--header-h) + var(--pick-h) + 76px); }

/* Home slots that receive relocated sections (About on Lite/Basic, Contact on
   Lite). When the section graduates to its own page the slot is empty —
   collapse it so it doesn't leave a band of dead padding behind. */
#about-slot:empty, #contact-slot:empty{ display:none; }

/* ===================== REVEAL ===================== */
/* Every tier animates. The tokens decide how far and how long. */
/* The entrance is entirely token-driven: each tier dials in how far an element
   travels and how much it scales up. Lite resolves to a plain fade (shift 0 /
   scale 1); Plus and Premium travel further and settle slower, which reads as
   pronounced without needing a blur — that just made text look unrendered. */
.reveal{
  opacity:0;
  transform:translateY(var(--reveal-shift)) scale(var(--reveal-scale));
  transition:opacity var(--reveal-dur) var(--ease),
             transform var(--reveal-dur) var(--ease);
  will-change:transform, opacity;
}
.reveal.in-view{ opacity:1; transform:none; }

/* stagger children of a revealed grid */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(var(--reveal-shift)) scale(var(--reveal-scale));
  transition:opacity var(--reveal-dur) var(--ease),
             transform var(--reveal-dur) var(--ease);
}
.reveal-stagger.in-view > *{ opacity:1; transform:none; }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:calc(var(--reveal-stagger) * 0); }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:calc(var(--reveal-stagger) * 1); }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:calc(var(--reveal-stagger) * 2); }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:calc(var(--reveal-stagger) * 3); }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:calc(var(--reveal-stagger) * 4); }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:calc(var(--reveal-stagger) * 5); }
.reveal-stagger.in-view > *:nth-child(7){ transition-delay:calc(var(--reveal-stagger) * 6); }
.reveal-stagger.in-view > *:nth-child(8){ transition-delay:calc(var(--reveal-stagger) * 7); }

/* anchor scrolling inside a page clears every sticky/fixed strip above it */
[id^="sec-"]{ scroll-margin-top:calc(var(--bar-h) + var(--header-h) + var(--pick-h) + 20px); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; scroll-behavior:auto !important; }
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
}