/* ==========================================================================
   NipTuck Holidays — homepage draft
   Concept: THE NIPTUCK PASSPORT
   "The site is her passport — each destination is a stamp,
    each stage of the journey is a page."

   LOCKED RULES (see ANCHOR-BRIEF.md — do not regress):
   - Cerise #BA034B owns every header, CTA and closing section.
   - Destination colour is STAMP INK ONLY. Never a section fill.
   - The stamp is a logo device, not an illustration. Flat and graphic.
     No leather, no perforations, no distressed grunge, no clip-art.
   - Photography: women from behind, facing the destination.
     Never a face. Never a result. Never a before/after.
   - Warm bone is the light ground, never pure white.
   ========================================================================== */

:root{
  /* Brand — sampled from her real files, not invented */
  --cerise:        #BA034B;   /* original NipTuck banner bars */
  --cerise-dark:   #8E0139;
  --cerise-tint:   #F7E2EA;
  --cerise-light:  #FF5E92;   /* same family, for accents on the ink ground —
                                 #BA034B on near-black is only ~2.4:1 */
  --bone:          #F4EFE6;
  --bone-2:        #E9E0D2;
  --ink:           #17120F;
  --ink-2:         #443B34;
  --ink-3:         #6B5F55;
  --rule:          #D6C9B6;

  /* Destination stamp inks — one per passport stamp, never a fill.
     Two tones per destination: the true brand hue for DARK grounds, and a
     deepened tone for the bone panels, because her aqua #02D3EE only reaches
     ~1.5:1 on bone and the ring would simply vanish. The -ink tones are tuned
     to clear 4.5:1 on bone, because they carry small text (route codes,
     eyebrows, "Explore") — not just stamp graphics. Same colour family,
     legible in both places. */
  --phuket:        #02D3EE;   /* her aqua, from the original banner water */
  --phuket-ink:    #0A7587;
  --bangkok:       #E8AC3C;
  --bangkok-ink:   #8D630E;
  --turkey:        #FD5D01;   /* her poster orange */
  --turkey-ink:    #BD4303;
  --vietnam:       #2E9C81;
  --vietnam-ink:   #196553;
  --korea:         #4E7DF0;
  --korea-ink:     #1B4FD8;

  --maxw: 1360px;
  --gut: clamp(20px, 5vw, 72px);

  --ff-display: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    'Space Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--cerise); }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--ff-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- shared type ---------- */
.label{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.label--light{ color:rgba(255,255,255,.72); }
.display{
  font-family:var(--ff-display); text-transform:uppercase;
  line-height:.92; letter-spacing:-.015em; margin:0;
}
.h-sec{ font-size:clamp(2rem,5.2vw,3.9rem); }
.lede{ font-size:clamp(1.05rem,1.6vw,1.32rem); line-height:1.55; color:var(--ink-2); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
[id]{ scroll-margin-top:96px; }
.btn__short{ display:none; }

/* the heart-on-a-rule — her own divider, lifted from her banners */
.heartrule{ display:flex; align-items:center; gap:14px; }
.heartrule::before,.heartrule::after{
  content:""; height:1px; background:var(--rule); flex:1;
}
.heartrule svg{ width:15px; height:15px; flex:none; fill:var(--cerise); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-body); font-weight:700; font-size:14px;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:17px 30px; border:0; cursor:pointer;
  background:var(--cerise); color:#fff; transition:background .18s ease;
}
.btn:hover{ background:var(--cerise-dark); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--bone); }
.btn--onink{ background:#fff; color:var(--cerise); }
.btn--onink:hover{ background:var(--bone-2); }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--bone);
  border-bottom:1px solid var(--rule);
}
.hdr__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  height:80px; display:flex; align-items:center; gap:28px;
}
.hdr__logo img{ height:38px; width:auto; }
.nav{ display:flex; gap:26px; margin-left:auto; }
/* The About control is a <button>, so every nav rule has to name it too —
   these were element selectors and it silently matched none of them.
   Scoped to DIRECT children: `.nav a` also reached inside the dropdown panel
   and set the descriptions in uppercase. */
.nav > a,
.navgrp__btn{
  font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav > a:hover,
.navgrp__btn:hover{ border-bottom-color:var(--cerise); }
.hdr .btn{ padding:13px 22px; font-size:12px; }
.hdr__tel{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.hdr__tel b{ color:var(--cerise); }
.nav > a[aria-current="page"],
.navgrp__btn[aria-current="true"]{ border-bottom-color:var(--cerise); }
.burger{ display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu panel */
.navm{ position:sticky; top:80px; z-index:55; background:var(--bone); border-bottom:1px solid var(--rule); padding:8px var(--gut) 22px; }
.navm__list{ display:flex; flex-direction:column; }
.navm__list a{
  padding:15px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink);
  font-family:var(--ff-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.01em;
}
.navm__list a[aria-current="page"]{ color:var(--cerise); }
.navm__contact{ display:flex; flex-direction:column; gap:9px; padding-top:18px; }
.navm__contact a{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.06em;
  text-decoration:none; color:var(--ink-2);
}
body.is-navopen{ overflow:hidden; }
@media (min-width:861px){ .navm{ display:none; } }

/* ---------- the stamp — the brand device ---------- */
.stamp{ display:block; }
.stamp .ring{ fill:none; stroke-width:2.5; }
.stamp .ring-dot{ fill:none; stroke-width:5; stroke-dasharray:0.5 9; stroke-linecap:round; }
/* transform-box/origin must not fight the SVG transform attribute —
   Chrome treats it as a CSS property and re-centres it, throwing the plane
   outside the ring. */
.stamp .plane{ transform-box:view-box; transform-origin:0 0; }
.stamp .stamp-txt{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; fill:var(--ink);
}
.stamp .stamp-sub{
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; fill:var(--ink-3);
}

/* ---------- hero ---------- */
.hero{ background:var(--bone); }
.hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; }
.hero__img{ position:relative; min-height:640px; background:var(--ink); }
.hero__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
.hero__panel{
  background:var(--bone); padding:clamp(34px,4.4vw,68px);
  display:flex; flex-direction:column; justify-content:center; gap:26px;
}
.hero__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.hero__route{
  flex:1; display:flex; align-items:center; gap:14px; padding-top:4px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.hero__route i{ font-style:normal; color:var(--cerise); }
.hero h1{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(2.5rem,5.4vw,4.6rem); line-height:.9; letter-spacing:-.02em;
  margin:0; color:var(--cerise);
}
.hero h1 em{ font-style:normal; color:var(--ink); display:block; }
.hero__sub{ font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.55; color:var(--ink-2); max-width:46ch; margin:0; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
/* The stamp sits on the bone panel — paper, not photograph. Keeps it legible
   and matches the approved anchor artifact. */
.hero__panel{ position:relative; }
.hero__stamp{ flex:none; margin-top:-14px; }

/* The cerise five-column journey strip that used to live here was removed on
   13 Aug when the destinations carousel landed — two destination devices in one
   viewport. Its CSS outlived it by a day and is now gone too. */

/* ---------- generic section ---------- */
.sec{ padding:clamp(64px,8.5vw,132px) 0; }
.sec--bone2{ background:var(--bone-2); }
.sec--ink{ background:var(--ink); color:var(--bone); }
.sec--ink .lede{ color:rgba(244,239,230,.82); }
.sec--ink .label{ color:rgba(244,239,230,.6); }
.sec__head{ max-width:64ch; margin-bottom:clamp(34px,4vw,60px); }
.sec__head .label{ display:block; margin-bottom:16px; }

/* ---------- entry statement ---------- */
.entry__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start; }
.entry blockquote{
  margin:0; font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(1.6rem,2.9vw,2.5rem); line-height:1.02; letter-spacing:-.015em;
}
.entry blockquote em{ font-style:normal; color:var(--cerise); }
.entry p{ margin:0 0 18px; color:var(--ink-2); }
/* The standalone pull quote on /why-niptuck. `.entry blockquote` only reaches
   inside an .entry block; this one opens the page above the columns. */
.entry__q{
  margin:0 0 clamp(34px,4vw,54px); max-width:26ch;
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(1.5rem,2.7vw,2.35rem); line-height:1.02; letter-spacing:-.015em;
}
.entry__q em{ font-style:normal; color:var(--cerise); }
.entry .sig{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- destinations ---------- */
.dest{ border-top:1px solid var(--rule); }
.dest__row{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border-bottom:1px solid var(--rule);
}
.dest__row:nth-child(even) .dest__media{ order:2; }
.dest__media{ position:relative; min-height:440px; background:var(--ink); }
.dest__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Per-image framing. The wider the viewport, the more `cover` crops vertically,
   so anything with a tall subject needs its window pinned. Bangkok's finial was
   being sliced off at 1920. */
.dest__media--bkk img{ object-position:50% 12%; }
.dest__body{
  padding:clamp(30px,4vw,64px); display:flex; flex-direction:column;
  justify-content:center; gap:20px; background:var(--bone);
}
.dest__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.dest__name{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:.9; letter-spacing:-.02em;
  margin:0; color:var(--cerise);
}
.dest__stamp{ flex:none; margin-top:4px; }
.dest__meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.dest__ink{ width:11px; height:11px; flex:none; }
.dest__txt{ margin:0; color:var(--ink-2); max-width:44ch; }

/* Group tours hero. The flyer crop is a 628px square and the three faces sit
   high in it, so `cover` in a landscape slot must be pinned above centre or it
   cuts them at the chin. */
.dest__media--tour img{ object-position:50% 22%; }
/* Her sentence runs on; the emphasis carries the line that actually sells it,
   without touching a word of it. Cerise on bone — decision 13. */
.tour__lead{ font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.5; color:var(--ink); }
.tour__lead em{ font-style:normal; color:var(--cerise); }

/* ---------- route line (the homepage teaser: five stations, no content) ----
   Decision 30: the homepage names her five stages and links out; /how-it-works
   carries the paragraphs. The connecting rule is drawn on the <ol> itself and
   the numerals sit on top of it, so the line reads as one continuous route
   rather than five detached tiles. */
.rline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
}
/* The rule is the top border of each station, so five adjacent cells draw one
   unbroken line. An earlier version drew the line on the <ol> and masked it
   behind the numerals — but a flex child stretches to its column, so each
   numeral's background covered its whole cell and the "line" survived only in
   the gutters, as four stray dashes. */
.rline__st{
  position:relative; border-top:2px solid var(--ink); padding-top:22px;
  display:flex; flex-direction:column; gap:9px;
}
/* the station marker, sitting on the line */
.rline__st::before{
  content:""; position:absolute; top:-5px; left:0; width:8px; height:8px;
  background:var(--cerise);
}
.rline__st > *{ padding-right:26px; }
.rline__n{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:var(--cerise); }
.rline__t{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(.86rem,1.05vw,1.02rem); line-height:1.08; letter-spacing:-.01em;
}
@media (max-width:860px){
  .rline{ grid-template-columns:repeat(2,1fr); }
  .rline__st{ padding-top:18px; padding-bottom:22px; }
}
@media (max-width:460px){ .rline{ grid-template-columns:1fr; } }

/* ---------- proof chips (the trust band's evidence, reduced) ----------
   Six evidence cards became five chips. The bold term is the proof; the text
   after it says what it is. Detail lives on /why-niptuck. */
.chips{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:flex; align-items:baseline; gap:8px;
  border:1px solid var(--rule); padding:9px 14px;
  font-size:14px; color:var(--ink-2);
}
.chip b{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cerise);
}

/* ---------- route (the five stages, long form) ---------- */
.route{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:2px solid var(--ink); }
.route__step{ padding:30px 24px 8px; border-right:1px solid var(--rule); position:relative; }
.route__step:last-child{ border-right:0; }
.route__step::before{
  content:""; position:absolute; top:-8px; left:0; width:14px; height:14px;
  background:var(--cerise); border-radius:50%;
}
.route__n{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:var(--cerise); display:block; margin-bottom:12px; }
.route__t{ font-family:var(--ff-display); text-transform:uppercase; font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.02; margin:0 0 12px; }
.route__d{ font-size:14.5px; line-height:1.5; color:var(--ink-2); margin:0; }

/* ---------- escorted ---------- */
.esc__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4.5vw,72px); align-items:center; }
.esc__media{ position:relative; }
/* Square, like the destination cards, so the photography reads as one family
   across the page rather than this one being a different shape. */
/* 3:2, not square. The band is now a teaser rather than a section of content,
   so the photo governs the row height and a square one made the band taller
   than everything it links to. The three faces sit mid-frame and survive the
   crop. */
.esc__media img{ width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; object-position:50% 32%; }
/* Empty-slot treatment. Still used where we owe her a photograph and have
   none; the group-tours slot was filled 13 Aug from her own Cosmetic Holidays
   flyer (her previous trading name), which carved out the "never a face"
   half of decision 9 for this one image. */
.esc__slot{
  height:clamp(320px,44vw,560px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  padding:32px; border:1px dashed rgba(244,239,230,.4);
}
.esc__slot .stamp-txt{ fill:var(--bone); }
.esc__slot .stamp-sub{ fill:rgba(244,239,230,.6); }
.esc__slot p{ margin:0; max-width:30ch; }
.esc__slot .slot-t{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.05rem; color:var(--bone); }
.esc__slot .slot-d{ font-size:14.5px; color:rgba(244,239,230,.7); }
.esc h2{ color:var(--bone); }
.esc__quote{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(1.4rem,2.5vw,2.1rem); line-height:1.04; margin:0 0 22px; color:var(--bone);
}
.esc__quote em{ font-style:normal; color:var(--cerise-light); }
.esc ul{ list-style:none; padding:0; margin:0 0 26px; }
.esc li{
  padding:13px 0; border-top:1px solid rgba(244,239,230,.18);
  display:flex; gap:14px; font-size:15.5px; color:rgba(244,239,230,.85);
}
.esc li b{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; color:var(--cerise-light); flex:none; padding-top:4px; }

/* ---------- evidence ---------- */
.ev__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.ev__card{ background:var(--bone); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:12px; }
.ev__card h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:1.05rem; margin:0; line-height:1.1; }
.ev__card p{ margin:0; font-size:15px; color:var(--ink-2); }
.ev__k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; color:var(--cerise); }
/* The honest-risk statement. Deliberately NOT a tinted callout box with a
   coloured side-tab — that reads as a generic UI alert and cheapens the most
   important paragraph on the page. Set as a printed disclosure instead:
   hairline above, mono label, plain text. Quiet and confident. */
.risk{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--rule);
  max-width:78ch; font-size:15.5px; color:var(--ink-2);
}
.risk .label{ display:block; margin-bottom:10px; }

/* ---------- enquiry ---------- */
.enq{ background:var(--cerise); color:#fff; }
.enq__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,80px); align-items:start; }
.enq h2{ color:#fff; }
.enq p{ color:rgba(255,255,255,.88); }
.enq__form{ display:grid; gap:16px; }
.enq__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.enq label{ display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:7px; }
.enq input,.enq select,.enq textarea{
  width:100%; font-family:var(--ff-body); font-size:16px; color:var(--ink);
  background:var(--bone); border:0; padding:14px 15px; border-radius:0;
}
.enq textarea{ min-height:104px; resize:vertical; }
.enq__note{ font-size:13px; color:rgba(255,255,255,.75); }

/* ---------- footer ---------- */
.ftr{ background:var(--ink); color:var(--bone); padding:clamp(48px,6vw,84px) 0 40px; }
.ftr__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(28px,4vw,60px); }
.ftr img{ height:44px; width:auto; margin-bottom:20px; }
.ftr__blurb{ color:rgba(244,239,230,.72); max-width:38ch; margin:0; }
.ftr h4{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,230,.6); margin:0 0 16px; font-weight:400; }
.ftr a{ color:var(--bone); text-decoration:none; display:block; padding:5px 0; font-size:15px; }
.ftr a:hover{ color:var(--cerise-light); }
.ftr__base{
  margin-top:clamp(34px,4vw,56px); padding-top:24px; border-top:1px solid rgba(244,239,230,.16);
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,230,.5);
}

/* ---------- draft notes (removed before launch) ---------- */
.note{
  margin:20px 0 0; padding:15px 18px; background:#FFF8DC;
  border:1px dashed #B58A00; font-size:14px; line-height:1.5; color:#4A3B00;
}
.note b{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-bottom:6px; color:#8A6A00; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .strip__in{ grid-template-columns:repeat(5,1fr); }
  .strip__t{ font-size:13px; }
  .strip__d{ display:none; }
  .route{ grid-template-columns:repeat(2,1fr); }
  .route__step{ border-bottom:1px solid var(--rule); }
  .ev__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav,.hdr__tel{ display:none; }
  .burger{ display:block; order:3; margin-left:0; }
  .hdr__in{ gap:10px; }
  .hdr__logo{ margin-right:auto; }
  .hdr .btn{ order:2; padding:12px 16px; font-size:11px; letter-spacing:.06em; }
  .btn__long{ display:none; }
  .btn__short{ display:inline; }

  .hero__grid{ grid-template-columns:1fr; }
  .hero__stamp{ width:104px; height:104px; }
  .dest__stamp{ width:78px; height:78px; }
  .dest__top{ align-items:center; }
  .hero__img{ min-height:0; aspect-ratio:4/3.1; }
  .hero__panel{ padding:34px var(--gut) 42px; }

  .strip__in{ grid-template-columns:1fr; padding-block:8px; }
  .strip__item{ border-left:0; border-top:1px solid rgba(255,255,255,.24); padding:15px 0; flex-direction:row; align-items:baseline; gap:14px; }
  .strip__item:first-child{ border-top:0; }
  .strip__d{ display:block; font-size:13px; }
  .strip__t{ font-size:14px; min-width:104px; }
  /* route codes must never wrap mid-code (AU → HKT) */
  .strip__n{ white-space:nowrap; min-width:82px; }

  .entry__grid,.esc__grid,.enq__grid{ grid-template-columns:1fr; }
  .esc__media{ order:-1; }

  .dest__row,.dest__row:nth-child(even) .dest__media{ grid-template-columns:1fr; order:0; }
  .dest__row{ grid-template-columns:1fr; }
  .dest__media{ min-height:0; aspect-ratio:4/3; }

  .route{ grid-template-columns:1fr; }
  .route__step{ border-right:0; padding:26px 0 18px; }
  .route__step::before{ top:-8px; }

  .ev__grid{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr; }
  .enq__row{ grid-template-columns:1fr; }
}

@media (max-width:420px){
  body{ font-size:16px; }
  .hero h1{ font-size:2.1rem; }
  .hdr__in{ height:68px; gap:12px; }
  .hdr__logo img{ height:30px; }
  .hdr .btn{ padding:11px 15px; font-size:11px; letter-spacing:.06em; }
}

/* No scroll-reveal. It hid copy from anyone without JS, broke full-page
   capture, and the page doesn't need it — restraint rule: when torn, subtract. */

/* ==========================================================================
   Destinations page
   Two extensions of existing homepage components (flagged for Rob):
   1. .person  — .ev__card with a portrait above it, for named surgeons.
   2. .pull    — the .entry blockquote treatment, generalised so it can be
                 used outside the homepage entry section.
   No genuinely new patterns.
   ========================================================================== */

.destsec{ padding:0; border-top:1px solid var(--rule); }
.destsec__body{ padding:clamp(48px,6vw,88px) 0; }
.destsec:nth-of-type(even) .destsec__body{ background:var(--bone-2); }

.pull{
  margin:0; font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,2.15rem); line-height:1.04; letter-spacing:-.015em;
  color:var(--ink); max-width:22ch;
}
.pull--ink{ color:var(--bone); }
.pull cite{ display:block; margin-top:16px; font:400 12px/1.4 var(--ff-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-style:normal; }

.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,72px); align-items:start; }
.twocol p{ margin:0 0 16px; color:var(--ink-2); }
.twocol p:last-child{ margin-bottom:0; }

/* named surgeons — .ev__card plus a portrait */
.people{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:clamp(24px,3vw,40px); }
.person{ background:var(--bone); display:flex; flex-direction:column; }
.person img{ width:100%; aspect-ratio:1/1.12; object-fit:cover; }
.person__b{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:6px; }
.person__n{ font-family:var(--ff-display); text-transform:uppercase; font-size:.92rem; margin:0; line-height:1.15; }
.person__r{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }

/* an empty destination — honest slot, never stock filler */
.slot{
  border:1px dashed var(--rule); padding:clamp(30px,4vw,56px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
/* A slot sharing a section with other content, rather than holding a section
   on its own — it needs less air around it or it reads as its own beat. */
.slot--tight{ padding:clamp(24px,2.6vw,34px); }

@media (max-width:1080px){ .people{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){
  .twocol{ grid-template-columns:1fr; }
  .people{ grid-template-columns:repeat(2,1fr); }
  .pull{ max-width:none; }
}
@media (max-width:420px){ .people{ grid-template-columns:1fr; } }

/* clean break between the hero and the first destination —
   no double hairline, and real air */


@media (max-width:860px){
}

/* ==========================================================================
   Destination theming
   One page, one accent. --accent governs stamps, rules, eyebrows and route
   codes on a destination's own page. Cerise still owns the header, the CTA
   and the closing band, so locked decision 7 holds: a mark, not a mood.
   ========================================================================== */
:root{ --accent:var(--cerise); --accent-solid:var(--cerise); }
.theme-phuket { --accent:var(--phuket-ink);  --accent-solid:var(--phuket);  }
.theme-bangkok{ --accent:var(--bangkok-ink); --accent-solid:var(--bangkok); }
.theme-turkey { --accent:var(--turkey-ink);  --accent-solid:var(--turkey);  }
.theme-vietnam{ --accent:var(--vietnam-ink); --accent-solid:var(--vietnam); }
.theme-korea  { --accent:var(--korea-ink);   --accent-solid:var(--korea);   }

/* ==========================================================================
   The passport spread — /destinations
   Five square stamp-cards. The page IS the spread; there is no hero photo,
   because a hero above five photo cards makes the same argument twice.
   ========================================================================== */
.spread{ padding:clamp(40px,5vw,76px) 0 clamp(64px,8vw,120px); }
.spread__head{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,80px);
  align-items:end; margin-bottom:clamp(38px,5vw,66px);
}
.spread__head h1{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(2.3rem,5vw,4.2rem); line-height:.9; letter-spacing:-.02em;
  margin:0; color:var(--cerise);
}
.spread__head h1 em{ font-style:normal; color:var(--ink); display:block; }
.spread__head p{ margin:0; max-width:58ch; }

.cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,1.8vw,26px); }
.card{
  grid-column:span 2; display:flex; flex-direction:column;
  background:var(--bone); border:1px solid var(--rule); text-decoration:none;
  color:inherit; transition:border-color .2s ease, transform .2s ease;
}

.card:hover,.card:focus-visible{ border-color:var(--ink); transform:translateY(-3px); }
.card:focus-visible{ outline:2px solid var(--cerise); outline-offset:3px; }
.card:nth-child(4){ grid-column:2 / span 2; }
.card:nth-child(5){ grid-column:4 / span 2; }
.card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ink); }
.card__media img{ width:100%; height:100%; object-fit:cover; }

.card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card__stamp{ flex:none; margin-top:-2px; }
.card__b{ padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:12px; flex:1; }
.card__name{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:.92; letter-spacing:-.015em;
  margin:0; color:var(--cerise);
}
.card__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.card__meta span:first-of-type{ color:var(--card-ink,var(--cerise)); }  /* route code */
.card__ink{ width:9px; height:9px; flex:none; }
.card__txt{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); flex:1; }
.card__go{
  font-family:var(--ff-body); font-weight:700; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cerise);
  display:inline-flex; align-items:center; gap:8px;
}
.card:hover .card__go span{ transform:translateX(4px); }
.card__go span{ transition:transform .2s ease; display:inline-block; }

/* ==========================================================================
   Stamp nav — the five destinations as passport stamps.
   Sticky under the header on destination child pages. Not on the spread,
   where the cards already are the navigation.
   ========================================================================== */
.stampnav{
  position:sticky; top:80px; z-index:50;
  background:var(--bone); border-bottom:1px solid var(--rule);
}
.stampnav__in{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:clamp(14px,2vw,30px); flex-wrap:wrap;
}
.stampnav a{
  --s:var(--cerise);
  width:64px; height:64px; flex:none; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  border:1.5px dashed var(--s); color:var(--s);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; transition:background .2s ease, color .2s ease;
}
.stampnav a:hover{ background:var(--s); color:var(--bone); border-style:solid; }
.stampnav a[aria-current="page"]{ background:var(--s); color:var(--bone); border-style:solid; }
.stampnav .s-phuket { --s:var(--phuket-ink); }
.stampnav .s-bangkok{ --s:var(--bangkok-ink); }
.stampnav .s-turkey { --s:var(--turkey-ink); }
.stampnav .s-vietnam{ --s:var(--vietnam-ink); }
.stampnav .s-korea  { --s:var(--korea-ink); }

@media (max-width:1080px){
  .spread__head{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card,.card:nth-child(4),.card:nth-child(5){ grid-column:span 1; }
}
@media (max-width:860px){
  .stampnav{ top:68px; }
  .stampnav__in{ padding:11px var(--gut); gap:12px; justify-content:space-between; }
  .stampnav a{ width:56px; height:56px; font-size:10px; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .card,.card:nth-child(4),.card:nth-child(5){ grid-column:span 1; }
}

/* A destination's own page — themed throughout in its stamp ink. */
.destsec--solo{ border-top:0; }
.destsec--solo .label,
.destsec--solo .ev__k,
.destsec--solo .dest__name,
.destsec--solo .route__n{ color:var(--accent); }
.destsec--solo .heartrule svg{ fill:var(--accent); }
.destsec--solo .risk{ border-top-color:var(--accent); }
.destsec--solo a:not(.btn):hover{ color:var(--accent); }

/* Motion is a courtesy, not a requirement. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .card:hover{ transform:none; }
  .card:hover .card__go span{ transform:none; }
}
.stampnav a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.jump a:focus-visible,.nav a:focus-visible,.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ==========================================================================
   Homepage destinations band — the single destination device on this page.
   A photo-led carousel: her banner imagery in a bold square plate, the stamp
   applied to it on a bone seal, and the five stamps below doing the work that
   dots would otherwise do badly.

   Layout note: on desktop this is two columns, and that is what makes the
   brief possible. "One large card with the next peeking" needs a narrow
   scrollport; a full-width one shows two and a half cards and reads as a grid.
   Putting the heading and controls in a left column narrows the scrollport,
   so the card can be a genuine 500px square and the section still comes in
   UNDER the height the old five-column text grid used.
   ========================================================================== */
.sec--band{ padding:clamp(56px,6.6vw,96px) 0; }
.band{
  display:grid; gap:clamp(26px,3.4vw,52px);
  grid-template-columns:minmax(300px,40%) 1fr;
  grid-template-rows:auto auto 1fr;
  grid-template-areas:
    "head   crsl"
    "stamps crsl"
    "ctl    crsl";
  align-items:start;
}
.band__head{ grid-area:head; }
.band__head .label{ display:block; margin-bottom:14px; }
/* min-width:0 is load-bearing: a grid item defaults to min-width:auto, so
   without it the scrollport stretches to the full track width, every card
   shows at once and nothing scrolls. */
.crsl{
  grid-area:crsl; position:relative; min-width:0;
  /* Card width drives card height: the photo is square, so this is the single
     dial that keeps the whole band inside its height budget. */
  --cw:clamp(280px,32vw,424px);
  --peek:170px;   /* how much of the next card shows */
}
.crsl__stamps{ grid-area:stamps; display:flex; flex-wrap:wrap; gap:12px; }
.band__ctl{
  grid-area:ctl; display:flex; align-items:center; gap:clamp(18px,2.4vw,34px);
  flex-wrap:wrap; margin-top:auto;
}
.band__ctl .morelink{ margin-top:0; }

/* ---------- the scrollport ---------- */
.crsl__vp{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  /* Cap the scrollport so the next card peeks by a consistent ~150px at every
     width instead of growing into a second full card on wide screens. */
  max-width:calc(var(--cw) + var(--peek));
}
.crsl__vp::-webkit-scrollbar{ display:none; }
.crsl__vp:focus-visible{ outline:2px solid var(--ink); outline-offset:8px; }
.crsl__track{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
}
.crsl__slide{ flex:0 0 var(--cw); scroll-snap-align:start; }
/* Trailing spacer. Without it the fifth card can never reach the leading edge —
   the scrollport simply runs out of content — so selecting the last stamp left
   the band showing card four with card five marked current. */
.crsl__track::after{ content:''; flex:0 0 calc(var(--peek) - 20px); }

/* ---------- the card ---------- */
.dcard{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ink); text-decoration:none; color:var(--bone);
}
/* The photograph is a clean square and nothing sits on top of it but the seal.
   Two overlaid-caption versions were built and thrown away first: a gradient's
   contrast depends on the image underneath (her five measured between 1.21:1
   and 4.17:1 on the route code), and a hard-edged band cut the subject of
   every photo in half. Caption below, image untouched. */
.dcard__media{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; }
.dcard__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.dcard:hover .dcard__img{ transform:scale(1.035); }

/* The seal: the stamp is applied TO the photograph, on its own paper.
   Locked decision 27 — ink straight onto a photograph disappears, twice proven. */
.dcard__seal{
  position:absolute; top:18px; right:18px; z-index:2;
  width:92px; height:92px; border-radius:50%;
  background:var(--bone); display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(23,18,15,.28);
}

/* Caption on solid ink — deterministic contrast whatever the photo, and a
   different object from the bone-bodied cards on /destinations. */
.dcard__b{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:clamp(18px,3.4%,24px) clamp(20px,4%,26px) clamp(20px,4%,26px);
  background:var(--ink);
}
.dcard__r{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--d);
}
.dcard__chip{ width:9px; height:9px; flex:none; }
.dcard__n{
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(1.45rem,2.4vw,2rem); line-height:.98; letter-spacing:-.015em;
}
.dcard__t{ font-size:14.5px; line-height:1.5; color:rgba(244,239,230,.9); }
.dcard__go{
  display:inline-flex; align-items:center; gap:9px; margin-top:4px;
  font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:4px; border-bottom:2px solid var(--d); color:var(--bone);
}
.dcard__go span{ transition:transform .2s ease; display:inline-block; }
.dcard:hover .dcard__go span{ transform:translateX(4px); }

/* ---------- pagination: the five stamps, same grammar as the jump nav ---------- */
.crsl__stamp{
  --s:var(--cerise);
  width:64px; height:64px; flex:none; border-radius:50%; padding:0;
  background:none; cursor:pointer;
  border:1.5px dashed var(--s); color:var(--s);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.crsl__stamp:hover{ background:var(--s); color:var(--bone); border-style:solid; }
.crsl__stamp[aria-current="true"]{ background:var(--s); color:var(--bone); border-style:solid; }
.crsl__stamp:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.crsl__stamp.s-phuket { --s:var(--phuket-ink); }
.crsl__stamp.s-bangkok{ --s:var(--bangkok-ink); }
.crsl__stamp.s-turkey { --s:var(--turkey-ink); }
.crsl__stamp.s-vietnam{ --s:var(--vietnam-ink); }
.crsl__stamp.s-korea  { --s:var(--korea-ink); }

/* ---------- arrows ---------- */
.crsl__arws{ display:flex; gap:10px; }
.crsl__arw{
  width:46px; height:46px; border-radius:50%; padding:0; cursor:pointer;
  background:none; border:1.5px solid var(--ink); color:var(--ink);
  display:grid; place-items:center;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.crsl__arw svg{ width:20px; height:20px; }
.crsl__arw:hover:not(:disabled){ background:var(--ink); color:var(--bone); }
.crsl__arw:disabled{ opacity:.3; cursor:default; }
.crsl__arw:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.morelink{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(26px,3vw,38px);
  font-family:var(--ff-body); font-weight:700; font-size:13.5px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--cerise); padding-bottom:5px; border-bottom:2px solid var(--cerise);
}
.morelink span{ transition:transform .2s ease; display:inline-block; }
.morelink:hover span{ transform:translateX(4px); }
.morelink:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
/* On the ink ground, cerise drops to ~2.4:1 — decision 13 puts the light tone
   there instead. */
.morelink--onink{ color:var(--cerise-light); border-bottom-color:var(--cerise-light); }
.morelink--onink:focus-visible{ outline-color:var(--bone); }

/* Tablet: the two-column layout is kept a long way down, because stacking a
   photo card this size blows the height budget at 768-900. Only the stamps
   need to come in. */
@media (max-width:1024px){
  /* Give the photo more of the row as the screen narrows — the heading column
     no longer needs to hold a full-size stamp row. */
  /* Give the photo more of the row as the screen narrows, and drop the stamp
     row underneath the whole band — five stamps do not fit across a heading
     column this narrow and wrap into a 4+1 rag that reads as a mistake. */
  .band{
    grid-template-columns:minmax(250px,32%) 1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
      "head   crsl"
      "ctl    crsl"
      "stamps stamps";
  }
  .crsl{ --cw:clamp(280px,38vw,400px); }
  .crsl__stamps{ gap:9px; margin-top:clamp(4px,1.4vw,14px); }
  .crsl__stamp{ width:54px; height:54px; font-size:10px; }
}

/* ---------- stacked: a natural swipe strip ---------- */
@media (max-width:720px){
  .band{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"head" "crsl" "stamps" "ctl";
    gap:clamp(22px,4vw,30px);
  }
  /* Bleed the scrollport to the screen edge so the next card genuinely peeks
     rather than being clipped flush against the gutter. */
  .crsl__vp{
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline-start:var(--gut);
  }
  /* Card ~78% of the strip so the next one always peeks by roughly a fifth.
     The scrollport is capped so that at tablet widths the "peek" stays a peek
     instead of growing into a second full card. */
  .crsl{ --cw:min(78vw,400px); --peek:90px; }
  .crsl__vp{ max-width:calc(var(--cw) + var(--peek)); }
  .dcard__seal{ width:72px; height:72px; top:13px; right:13px; }
  .dcard__seal .stamp{ width:60px; height:60px; }
  .crsl__stamp{ width:56px; height:56px; font-size:10px; }
  .crsl__stamps{ gap:10px; justify-content:space-between; }
  .crsl__arws{ display:none; }   /* the thumb is the control here */
  .band__ctl{ margin-top:4px; }
}

/* Smallest phones: five stamps have to stay on one row, or the pagination
   breaks into a 4+1 rag that reads as a mistake. */
@media (max-width:365px){
  .crsl__stamps{ gap:8px; }
  .crsl__stamp{ width:48px; height:48px; font-size:8px; letter-spacing:.02em; }
}

@media (prefers-reduced-motion:reduce){
  .crsl__vp{ scroll-behavior:auto; }
  .dcard:hover .dcard__img{ transform:none; }
  .morelink:hover span,.dcard:hover .dcard__go span{ transform:none; }
}

/* ==========================================================================
   Procedures — an index of what she can arrange, not a clinical reference.
   Every description on this page is a placeholder by design; see the comment
   at the top of src/pages/procedures.html before adding copy here.
   ========================================================================== */
.proc__intro{ padding-bottom:clamp(30px,3.4vw,44px); }
.proc__intro .sec__head{ margin-bottom:clamp(26px,3vw,40px); }
.proc__intro h1 em{ font-style:normal; color:var(--cerise); }

/* Category jump — the same circular-stamp grammar is already spoken for by
   destinations, so this stays a plain typographic index on purpose. */
.proc__jump{ display:flex; flex-wrap:wrap; gap:10px; }
.proc__jump a{
  display:inline-flex; align-items:baseline; gap:9px;
  padding:11px 18px; border:1px solid var(--rule); text-decoration:none;
  font-weight:700; font-size:13.5px; letter-spacing:.02em; color:var(--ink);
  transition:background .2s ease, border-color .2s ease;
}
.proc__jump a span{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; color:var(--cerise);
}
.proc__jump a:hover{ background:var(--bone-2); border-color:var(--ink-3); }
.proc__jump a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.proc{ padding:clamp(44px,5vw,72px) 0; border-top:1px solid var(--rule); }
.proc__head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(20px,2.4vw,30px); }
.proc__t{ font-size:clamp(1.5rem,3.2vw,2.4rem); margin:0; }

.proc__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.proc__card{
  background:var(--bone); padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column; gap:10px; min-height:118px;
}
.proc__card h3{
  font-family:var(--ff-display); text-transform:uppercase; margin:0;
  font-size:1rem; line-height:1.12; letter-spacing:-.005em;
}

/* Awaiting-copy marker. Deliberately ugly and deliberately greppable — see the
   pre-launch check in CONTINUE-HERE, which searches dist/ for the placeholder
   phrases. (Careful: don't quote those phrases in comments, or this stylesheet
   trips the check itself.) */
.await{
  margin-top:20px; padding:16px 20px; font-size:14.5px; line-height:1.55;
  color:var(--ink-2); border-left:3px dashed var(--cerise); background:var(--bone-2);
}
.await b{
  display:block; margin-bottom:6px; font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cerise);
}
.proc__empty{
  padding:clamp(28px,3.4vw,44px); text-align:center;
  border:1px dashed var(--rule); background:var(--bone-2);
}
.proc__empty .slot-t{
  margin:0 0 8px; font-family:var(--ff-display); text-transform:uppercase;
  font-size:1.05rem; color:var(--ink);
}
.proc__empty .slot-d{ margin:0 auto; max-width:56ch; font-size:14.5px; color:var(--ink-2); }

.proc__cta h2 em{ font-style:normal; color:var(--cerise-light); }
.proc__cta .lede{ margin-bottom:28px; }

@media (max-width:1024px){ .proc__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .proc__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .proc__grid{ grid-template-columns:1fr; } }
.await--page{ margin-top:0; margin-bottom:clamp(24px,3vw,36px); max-width:72ch; }
.await--page em{ font-style:italic; }

/* ==========================================================================
   About dropdown. "About" is a grouping, not a page — there is nothing behind
   it, so the control is a <button>, never a link to nowhere.
   ========================================================================== */
.navgrp{ position:relative; }
/* Reset only the button chrome. NOT font — `font:inherit` here clobbered the
   shared nav type and rendered "About" in body text beside four uppercase
   siblings. */
.navgrp__btn{
  background:none; border:0; border-left:0; border-right:0; border-top:0;
  cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:7px;
}
.navgrp__c{ width:9px; height:6px; transition:transform .2s ease; }
.navgrp__btn[aria-expanded="true"] .navgrp__c{ transform:rotate(180deg); }
.navmenu{
  position:absolute; top:calc(100% + 14px); left:-22px; z-index:70;
  min-width:310px; padding:8px; background:var(--bone);
  border:1px solid var(--rule); box-shadow:0 18px 44px rgba(23,18,15,.14);
}
.navmenu[hidden]{ display:none; }
.navmenu__link{
  display:block; padding:13px 16px; text-decoration:none; color:var(--ink);
  transition:background .18s ease;
}
.navmenu__link:hover{ background:var(--bone-2); }
.navmenu__link:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.navmenu__link[aria-current="page"]{ background:var(--bone-2); }
.navmenu__t{
  display:block; font-family:var(--ff-display); text-transform:uppercase;
  font-size:.88rem; letter-spacing:-.005em; margin-bottom:3px;
}
.navmenu__d{ display:block; font-size:13px; line-height:1.45; color:var(--ink-3); }

.navm__grp{
  display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-top:6px;
}
.navm__sub{ padding-left:16px; }

/* ==========================================================================
   How it works — her five stages
   ========================================================================== */
.hiw__intro h1 em{ font-style:normal; color:var(--cerise); }
.hiw__step{
  display:grid; grid-template-columns:96px 1fr; gap:clamp(16px,3vw,44px);
  padding:clamp(30px,3.6vw,48px) 0; border-top:1px solid var(--rule);
}
.hiw__step:first-child{ border-top:0; padding-top:0; }
.hiw__n .ev__k{ font-size:15px; letter-spacing:.16em; }
.hiw__b h2{
  font-family:var(--ff-display); text-transform:uppercase; margin:0 0 14px;
  font-size:clamp(1.15rem,2vw,1.65rem); line-height:1.06; letter-spacing:-.01em;
}
.hiw__b p{ margin:0 0 14px; color:var(--ink-2); max-width:62ch; }
.hiw__b p:last-child{ margin-bottom:0; }
.hiw__price{
  font-family:var(--ff-display); font-size:1.9rem; line-height:1; margin:4px 0 0;
  color:var(--cerise);
}
/* Two-up evidence grid. This exists because the inline
   `style="grid-template-columns:repeat(2,1fr)"` it replaces beat the responsive
   rule at every width — inline styles outrank media queries — so the two cards
   stayed side by side at 390px in columns barely 20 characters wide. Stacks at
   860px, the same breakpoint .ev__grid itself uses. */
.ev__grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .ev__grid--2{ grid-template-columns:1fr; } }

.ev__grid--4{ grid-template-columns:repeat(4,1fr); }

/* Her tick lists, set as type rather than as her site's emoji. */
.ticks{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); }
.ticks li{ background:var(--bone); padding:20px 24px; font-size:15.5px;
  line-height:1.5; color:var(--ink-2); position:relative; padding-left:52px; }
.ticks li::before{
  content:''; position:absolute; left:24px; top:26px; width:12px; height:7px;
  border-left:2px solid var(--cerise); border-bottom:2px solid var(--cerise);
  transform:rotate(-45deg);
}
.rule{ border:0; border-top:1px solid var(--rule); margin:clamp(30px,3.6vw,48px) 0; }
.entry h3{ font-family:var(--ff-display); text-transform:uppercase;
  font-size:1rem; margin:26px 0 10px; }
.entry h3:first-child{ margin-top:0; }

@media (max-width:1024px){ .ev__grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .hiw__step{ grid-template-columns:1fr; gap:10px; }
  .ticks{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .ev__grid--4{ grid-template-columns:1fr; } }

/* A trailing card stretches to close the row. The grid draws its borders with
   a 1px background showing through the gaps, so an unfilled cell is not empty
   space — it renders as a solid block and reads as a missing card. */
.ev__grid--fill > :last-child:nth-child(3n+2){ grid-column:span 2; }
/* Breakpoints must match .ev__grid's own: 3 cols, then 2 at 1080, then 1 at
   860. Spanning 2 in a single-column grid would create an implicit column, so
   the span is dropped there rather than at some other width. */
@media (max-width:1080px){
  .ev__grid--fill > :last-child:nth-child(3n+2){ grid-column:auto; }
  .ev__grid--fill > :last-child:nth-child(odd){ grid-column:span 2; }
}
/* Must match the span rule's specificity or it silently loses and the grid
   grows an implicit second column on phones. */
@media (max-width:860px){
  .ev__grid--fill > :last-child:nth-child(odd),
  .ev__grid--fill > :last-child:nth-child(3n+2){ grid-column:auto; }
}