/* ============================================================================
   Maa Vaishno Devi Holidays — bespoke demo
   Art direction: EDITORIAL LUXE (id: editorial-luxe) · light only
   A printed travel journal in HTML. Warm sage-cream paper, oversized Cormorant
   Garamond headlines, asymmetric editorial grid, hairline rules, drop-cap,
   numbered margin spine, one disciplined moss-green accent (from lime #63bf0f,
   desaturated to ink). ZERO photos — typographic / pattern plates throughout.
   ========================================================================== */

/* ---------- 1 · Tokens (hue locked to 135 — lime base, refined to moss) ----- */
:root{
  /* paper — warm sage cream, NEVER #fff */
  --paper:#f4f8f3;
  --paper-2:#edf2ea;     /* alternating band / figure bg */
  --paper-3:#e5ece3;     /* deepest inset */

  /* ink — near-black warmed to the hue (headlines + body) */
  --ink:#181e15;
  --ink-soft:#545a51;    /* captions, meta */
  --ink-dim:#828880;     /* faint numerals */

  /* the ONE accent — moss-green ink (base #63bf0f clamped C0.105 / L0.50) */
  --accent:#47702f;
  --accent-deep:#2c5410; /* links hover, rules-as-accent */
  --accent-soft:#e6f3e0; /* faint wash — used once */

  /* hairlines — the workhorse dividers */
  --hairline:#d3dad1;
  --hairline-2:#e1e6df;

  /* deep band (call-band) — ink field, paper text */
  --deep:#1d2519;
  --deep-2:#27311f;

  /* type */
  --f-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-text:"Libre Franklin", ui-sans-serif, system-ui, sans-serif;

  --t-display: clamp(2.8rem, 1.1rem + 7.6vw, 6.4rem);   /* hero */
  --t-h1:      clamp(2.7rem, 1.2rem + 6.6vw, 5.6rem);
  --t-h2:      clamp(2rem, 1.1rem + 3.3vw, 3.5rem);
  --t-h3:      clamp(1.35rem, 1.05rem + 1.1vw, 1.72rem);
  --t-lede:    clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  --t-body:    clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --t-cap:     0.86rem;
  --t-kicker:  0.74rem;

  /* rhythm — large & uneven on purpose */
  --sec-pad: clamp(76px, 9.5vw, 168px);
  --shell:   1240px;
  --gut:     clamp(20px, 5vw, 64px);
  --measure: 64ch;

  --shadow: 0 26px 64px -46px rgba(20,28,18,.34);
  --dur: .42s;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2 · Reset ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* clip (not hidden) so off-canvas mobile nav can't create horizontal scroll
     without making a scroll container that would break any sticky positioning */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
}
h1,h2,h3,p,figure,blockquote,dl,dd,ol,ul{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
em{ font-style:italic; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.visually-hidden,
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3 · Shell + rules ---------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.rule{ border:0; height:1px; background:var(--hairline); width:100%; }
.rule-draw{
  margin:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--ease);
}
.rule-draw.in{ transform:scaleX(1); }

/* ---------- 4 · Demo ribbon (invariant) ------------------------------------ */
.demo-ribbon{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-text);
  font-size:.78rem;
  line-height:1.45;
  letter-spacing:.01em;
}
.demo-ribbon p{
  max-width:var(--shell);
  margin-inline:auto;
  padding:9px var(--gut);
  text-align:center;
}
.demo-ribbon strong{ font-weight:600; letter-spacing:.04em; }
.demo-ribbon a{
  color:#bfe6a4;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:.5px;
}
.demo-ribbon a:hover{ color:#d9f3c8; }

/* ---------- 5 · Folio / running head --------------------------------------- */
.folio{
  border-bottom:1px solid var(--hairline-2);
  background:var(--paper);
}
.folio-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:8px;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.folio-c{ font-style:italic; text-transform:none; letter-spacing:.04em; font-family:var(--f-display); font-size:.86rem; color:var(--ink-soft); }
.folio-l{ font-weight:500; }

/* ---------- 6 · Masthead / nav --------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(9px);
  backdrop-filter:saturate(1.1) blur(9px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.masthead.scrolled{
  border-bottom-color:var(--hairline);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
}
.mast-row{
  display:flex; align-items:center; gap:1.4rem;
  min-height:70px;
}
.wordmark{ display:inline-flex; align-items:center; gap:.7rem; margin-right:auto; }
.wm-mark{ color:var(--accent); flex:none; }
.wm-text{ display:flex; flex-direction:column; line-height:1.05; }
.wm-name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.18rem;
  letter-spacing:.005em;
  color:var(--ink);
}
.wm-sub{
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim); margin-top:2px;
}

.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--ink-soft);
  position:relative;
  padding-block:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:var(--accent); transition:right .32s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }

/* ---------- 7 · Buttons ----------------------------------------------------- */
.btn{
  --b-pad:.62rem 1.05rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-text);
  font-size:.86rem; font-weight:500; letter-spacing:.01em;
  padding:var(--b-pad);
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  white-space:nowrap;
  min-height:44px;
}
.btn-lg{ --b-pad:.92rem 1.5rem; font-size:.95rem; min-height:52px; }
.wa-glyph{ display:inline-flex; flex:none; }

.btn-wa{ background:var(--accent); color:#fbfdf9; }
.btn-wa:hover{ background:var(--accent-deep); transform:translateY(-1px); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--paper-2); }

.mast-cta{ --b-pad:.55rem .95rem; min-height:44px; }

/* on deep band */
.btn-outline-deep{ background:transparent; color:var(--paper); border-color:rgba(244,248,243,.32); }
.btn-outline-deep:hover{ border-color:var(--paper); background:rgba(244,248,243,.06); }

.nav-burger{
  display:none;
  width:44px; height:44px; flex:none;
  background:transparent; border:1px solid var(--hairline); border-radius:2px;
  cursor:pointer; position:relative;
}
.nav-burger span{
  position:absolute; left:11px; right:11px; height:1.4px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s ease;
}
.nav-burger span:nth-child(1){ top:17px; }
.nav-burger span:nth-child(2){ bottom:17px; }
.masthead.open .nav-burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.masthead.open .nav-burger span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* ---------- 8 · Headings / type primitives --------------------------------- */
.kicker{
  font-size:var(--t-kicker);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:0 0 1.1rem;
}
.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-h2);
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:balance;
  margin-bottom:1.1rem;
}
.lede{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-lede);
  line-height:1.4;
  color:var(--ink);
  max-width:var(--measure);
  text-wrap:pretty;
}
.body{
  font-size:var(--t-body);
  color:var(--ink-soft);
  text-wrap:pretty;
}
.measure{ max-width:var(--measure); }
.section-lede{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.12rem,1rem + .5vw,1.4rem);
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.42;
  margin-top:.2rem;
  text-wrap:pretty;
}

/* drop-cap on the opening lede */
.dropcap::first-letter{
  font-family:var(--f-display);
  font-weight:600;
  font-style:normal;
  float:left;
  font-size:4.6em;
  line-height:.74;
  padding:.06em .12em .02em 0;
  margin-top:.04em;
  color:var(--accent);
}

/* ---------- 9 · Section frame + editorial grid ----------------------------- */
.section{ padding-block:var(--sec-pad); }
.band{ background:var(--paper-2); }

/* asymmetric: a narrow margin spine (numerals/labels) + a wide main column */
.editorial{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.2rem);
}
@media(min-width:880px){
  .editorial{ grid-template-columns:13rem minmax(0,1fr); }
}
.margin-col{
  display:flex; flex-direction:column; gap:.4rem;
  padding-top:.55rem;
}
.sec-num{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.4rem,1.4rem+3vw,3.6rem);
  line-height:.9;
  color:var(--accent);
  letter-spacing:-.02em;
}
.sec-tag{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500;
  padding-top:.2rem;
}
@media(min-width:880px){
  .margin-col{ border-right:1px solid var(--hairline); padding-right:1.6rem; }
}

/* standfirst pull (inside about) */
.standfirst{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--hairline);
}
.standfirst blockquote{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.5rem,1.1rem+2vw,2.4rem);
  line-height:1.22;
  color:var(--ink);
  max-width:30ch;
  text-wrap:balance;
}

/* ---------- 10 · Hero (split) ---------------------------------------------- */
.hero{ padding-top:clamp(48px,7vw,96px); padding-bottom:0; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.2rem,5vw,4rem);
  align-items:end;
  padding-bottom:clamp(40px,6vw,76px);
}
@media(min-width:940px){
  .hero-grid{ grid-template-columns:minmax(0,1.32fr) minmax(0,.85fr); }
}
.hero-title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-display);
  line-height:.98;
  letter-spacing:-.018em;
  color:var(--ink);
  text-wrap:balance;
  margin:0 0 1.5rem;
}
.hero-title em{ color:var(--accent); display:inline; }
.hl-em{ color:var(--ink-dim); font-style:normal; }
.hero-sub{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-lede);
  line-height:1.42;
  color:var(--ink-soft);
  max-width:54ch;
  margin:0 0 2rem;
  text-wrap:pretty;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* the typographic plate (right column — no photo) */
.hero-plate{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--hairline);
  border-radius:3px;
  overflow:hidden;
  min-height:clamp(360px,42vw,460px);
  display:flex;
}
.plate-pattern{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, color-mix(in srgb,var(--accent) 8%, transparent) 26px 27px),
    radial-gradient(120% 90% at 80% 110%, var(--accent-soft) 0%, transparent 60%);
  opacity:.5;
  pointer-events:none;
}
.plate-inner{
  position:relative;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  display:flex; flex-direction:column;
  width:100%;
}
.plate-arch{
  display:block;
  width:clamp(72px,9vw,96px);
  height:auto;
  color:var(--accent);
  margin-bottom:auto;
}
.plate-kicker{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); margin:1.4rem 0 .9rem; font-weight:500;
}
.plate-line{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.3rem,1rem+1.2vw,1.8rem);
  line-height:1.16;
  color:var(--ink);
  padding-block:.12rem;
}
.rule-plate{ background:var(--hairline); margin:1.3rem 0 1.1rem; }
.plate-stats{ display:flex; gap:2rem; flex-wrap:wrap; }
.plate-stats dt{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.5rem,1.2rem+1vw,2rem); line-height:1; color:var(--accent);
}
.plate-stats dd{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.35rem;
}

/* ---------- 11 · Services (editorial figure grid) -------------------------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:0;
  margin-top:clamp(2.4rem,5vw,4rem);
  border-top:1px solid var(--hairline);
}
@media(min-width:620px){ .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:980px){ .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.fig{ position:relative; }
.svc{
  padding:clamp(1.7rem,2.6vw,2.4rem) clamp(1.4rem,2.2vw,2rem) clamp(1.9rem,2.8vw,2.6rem);
  border-bottom:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column;
  transition:background .3s ease;
}
.svc:hover{ background:var(--paper-2); }
@media(min-width:620px){ .svc:nth-child(2n){ border-right:0; } }
@media(min-width:980px){
  .svc:nth-child(2n){ border-right:1px solid var(--hairline); }
  .svc:nth-child(3n){ border-right:0; }
}
.fig-no{
  position:absolute; top:clamp(1.4rem,2.2vw,1.9rem); right:clamp(1.3rem,2vw,1.8rem);
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:1rem; color:var(--ink-dim); letter-spacing:.02em;
}
.svc-plate{
  display:flex; align-items:center; justify-content:center;
  width:clamp(58px,7vw,74px); height:clamp(58px,7vw,74px);
  border:1px solid var(--hairline);
  border-radius:2px;
  color:var(--accent);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--accent) 7%, var(--paper)) 0%, var(--paper) 70%);
  margin-bottom:clamp(1.4rem,2.4vw,1.9rem);
  transition:color .3s ease, border-color .3s ease;
}
.svc:hover .svc-plate{ border-color:color-mix(in srgb,var(--accent) 40%, var(--hairline)); }
.svc-plate svg{ width:clamp(30px,3.6vw,36px); height:auto; }
.fig-title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.08;
  letter-spacing:-.008em;
  color:var(--ink);
  margin-bottom:.6rem;
}
.fig-cap{
  font-family:var(--f-display);
  font-size:1.04rem;
  line-height:1.4;
  color:var(--ink-soft);
  margin-bottom:1.3rem;
  text-wrap:pretty;
}
.fig-cap em{ font-style:italic; }
.fig-link{
  margin-top:auto;
  font-family:var(--f-text);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:3px;
  transition:background-size .3s var(--ease), color .2s ease;
  align-self:flex-start;
}
.fig-link:hover{ background-size:100% 1px; color:var(--accent-deep); }

/* ---------- 12 · Journey (itinerary spread) -------------------------------- */
.steps{
  list-style:none; padding:0;
  margin-top:clamp(2rem,4vw,3rem);
  counter-reset:step;
}
.jstep{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.4rem 2rem;
  padding-block:clamp(1.5rem,3vw,2.3rem);
  border-top:1px solid var(--hairline);
}
.jstep:last-child{ border-bottom:1px solid var(--hairline); }
@media(min-width:680px){
  .jstep{ grid-template-columns:9rem minmax(0,1fr); align-items:start; }
}
.jstep-day{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
  padding-top:.5rem;
  counter-increment:step;
}
.jstep-day::before{
  content:counter(step,decimal-leading-zero) "  ";
  font-family:var(--f-display); font-style:italic; text-transform:none;
  letter-spacing:0; color:var(--ink-dim); font-weight:500;
}
.jstep-title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.1;
  color:var(--ink);
  margin-bottom:.4rem;
  letter-spacing:-.006em;
}
.jstep-desc{ font-size:var(--t-body); color:var(--ink-soft); text-wrap:pretty; }

/* ---------- 13 · Pull-quote (full bleed) ----------------------------------- */
.pullquote{
  background:var(--paper-2);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding-block:clamp(64px,9vw,140px);
}
.pullquote figure{ max-width:30ch; margin-inline:auto; text-align:left; }
@media(min-width:760px){ .pullquote figure{ max-width:24ch; } }
.pq-text{
  font-family:var(--f-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.9rem,1.1rem+4.2vw,4.2rem);
  line-height:1.08;
  letter-spacing:-.012em;
  color:var(--ink);
  position:relative;
  text-wrap:balance;
}
.pq-text::before{
  content:"\201C";
  position:absolute;
  left:-.05em; top:-.42em;
  font-size:1.4em;
  color:var(--accent);
  font-style:normal;
  line-height:1;
}
.pq-by{
  margin-top:1.6rem;
  font-family:var(--f-text);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
}
.pq-by span{ color:var(--ink-soft); }

/* ---------- 14 · Stats ------------------------------------------------------ */
.stats{ padding-block:clamp(56px,7vw,108px); }
.stats-row{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);
  text-align:center;
}
@media(min-width:680px){ .stats-row{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.stat{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.stat + .stat{ position:relative; }
@media(min-width:680px){
  .stat:not(:first-child)::before{
    content:""; position:absolute; left:0; top:14%; bottom:14%; width:1px;
    background:var(--hairline);
  }
}
.stat-n{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(3rem,1.8rem+4vw,5rem);
  line-height:.92;
  letter-spacing:-.02em;
  color:var(--ink);
}
.stat-plus{ color:var(--accent); }
.stat-l{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- 15 · Voices ----------------------------------------------------- */
.voices-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-top:clamp(2.2rem,4vw,3.4rem);
  border-top:1px solid var(--hairline);
}
@media(min-width:760px){ .voices-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.voice{
  padding:clamp(1.8rem,3vw,2.6rem) clamp(1.5rem,2.4vw,2.2rem);
  border-bottom:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:1rem;
}
@media(min-width:760px){ .voice:first-child{ border-right:1px solid var(--hairline); } }
.voice-stars{ color:var(--accent); font-size:.92rem; letter-spacing:.18em; }
.voice-text{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.25rem,1rem+1vw,1.6rem);
  line-height:1.3;
  color:var(--ink);
  text-wrap:pretty;
}
.voice-by{
  font-family:var(--f-text);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---------- 16 · Call band (deep ink field) -------------------------------- */
.callband{
  background:var(--deep);
  color:var(--paper);
  padding-block:clamp(72px,10vw,150px);
  position:relative;
  overflow:hidden;
}
.callband::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(191,230,164,.05) 46px 47px),
    radial-gradient(80% 120% at 50% -10%, rgba(71,112,47,.34) 0%, transparent 60%);
  pointer-events:none;
}
.callband-inner{ position:relative; text-align:center; }
.kicker-on-deep{ color:#bfe6a4; }
.callband-h{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-h2);
  line-height:1.04;
  letter-spacing:-.014em;
  color:var(--paper);
  text-wrap:balance;
  max-width:18ch;
  margin:0 auto 1.1rem;
}
.callband-sub{
  font-family:var(--f-display);
  font-weight:500;
  font-size:var(--t-lede);
  color:#cdd6c6;
  margin:0 auto 2rem;
  text-wrap:pretty;
}
.callband-cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* ---------- 17 · Colophon / contact ---------------------------------------- */
.contact-list{ margin-top:.4rem; }
.ci{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.2rem;
  padding-block:clamp(1.1rem,2vw,1.5rem);
  border-top:1px solid var(--hairline);
}
.ci:last-of-type{ border-bottom:1px solid var(--hairline); }
@media(min-width:560px){ .ci{ grid-template-columns:11rem minmax(0,1fr); gap:1.5rem; align-items:baseline; } }
.ci dt{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500; padding-top:.15rem;
}
.ci dd{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1rem+.7vw,1.5rem);
  line-height:1.35;
  color:var(--ink);
}
.ci dd a{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ease), color .2s ease;
  padding-bottom:2px;
}
.ci dd a:hover{ background-size:100% 1px; color:var(--accent-deep); }
.ci-sep{ color:var(--ink-dim); margin-inline:.5rem; }
.colophon-note{
  margin-top:clamp(1.6rem,3vw,2.2rem);
  font-family:var(--f-display);
  font-style:italic;
  font-size:var(--t-lede);
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ---------- 18 · Footer ----------------------------------------------------- */
.site-foot{
  background:var(--paper-2);
  border-top:1px solid var(--hairline);
  padding-block:clamp(2.6rem,5vw,4rem);
}
.foot-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.6rem;
}
@media(min-width:760px){
  .foot-row{ grid-template-columns:1fr auto; align-items:start; }
}
.foot-brand{ display:flex; flex-direction:column; gap:.3rem; }
.foot-name{
  font-family:var(--f-display); font-weight:600; font-size:1.3rem; color:var(--ink);
}
.foot-meta{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.01em; }
.foot-links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.foot-links a{
  font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.foot-links a:hover{ color:var(--ink); border-bottom-color:var(--hairline); }
.foot-fine{
  grid-column:1 / -1;
  margin-top:.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--hairline);
  font-size:.7rem; letter-spacing:.06em; color:var(--ink-dim);
}

/* ---------- 19 · Reveal motion --------------------------------------------- */
[data-reveal],[data-hero-el]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change:opacity, transform;
}
[data-reveal].in,[data-hero-el].in{
  opacity:1; transform:none;
}
/* rule-draw manages its own transform; don't let reveal fight it */
.rule-draw{ opacity:1; transform:scaleX(0); }

/* ---------- 20 · Responsive / mobile --------------------------------------- */
@media(max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto;
    width:min(82vw,340px);
    background:var(--paper);
    border-left:1px solid var(--hairline);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.4rem;
    padding:2rem var(--gut);
    transform:translateX(100%);
    transition:transform .42s var(--ease);
    box-shadow:var(--shadow);
    z-index:55;
  }
  .masthead.open .nav-links{ transform:translateX(0); }
  .nav-links a{
    font-family:var(--f-display);
    font-size:1.5rem;
    color:var(--ink);
    padding-block:.6rem;
    width:100%;
    border-bottom:1px solid var(--hairline-2);
  }
  .nav-links a::after{ display:none; }
  .mast-cta{ display:none; }
  .nav-burger{ display:block; }
  .folio-c{ display:none; }
}

@media(max-width:560px){
  .hero-cta .btn,
  .callband-cta .btn{ width:100%; }
  .hero-cta{ gap:.7rem; }
  .callband-cta{ gap:.7rem; }
  .folio-row{ font-size:.6rem; letter-spacing:.12em; }
  .demo-ribbon p{ font-size:.72rem; }
  .plate-stats{ gap:1.4rem; }
}

@media(max-width:380px){
  .folio-r{ display:none; }
  .wm-name{ font-size:1.04rem; }
}

/* ---------- 21 · Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  [data-reveal],[data-hero-el]{ opacity:1!important; transform:none!important; }
  .rule-draw{ transform:scaleX(1)!important; }
  .masthead{ backdrop-filter:none; background:var(--paper); border-bottom:1px solid var(--hairline); }
}

/* print — let the journal print clean */
@media print{
  .masthead,.nav-burger,.demo-ribbon,.callband{ display:none; }
  body{ background:#fff; }
}