/* ===================================================================
   Mototour Ladakh — Editorial Luxe (light)
   A printed Himalayan riding journal rendered in HTML.
   Palette: warm cream paper, ink headlines, ONE disciplined teal accent
   (hue 180, derived in OKLCH from base #13a4a4 — clamped to a press ink).
   Type: Playfair Display (display) + Spectral (text)  [fontSeed 1]
   Motion: reveal-only + one hero parallax + drawing hairlines.
   =================================================================== */

/* ---- Self-hosted fonts ------------------------------------------- */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("vendor/fonts/playfair-display-600.woff2") format("woff2");}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("vendor/fonts/playfair-display-700.woff2") format("woff2");}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:800;font-display:swap;src:url("vendor/fonts/playfair-display-800.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("vendor/fonts/spectral-400.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url("vendor/fonts/spectral-400-italic.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url("vendor/fonts/spectral-500.woff2") format("woff2");}

/* ===================================================================
   Tokens
   =================================================================== */
:root{
  /* Paper & ink — all hue-locked to 180 (teal) */
  --paper:#eff4f3;        /* oklch(.975 .008 180) warm-cool cream, NOT #fff */
  --paper-2:#e6edeb;      /* oklch(.955 .010 180) band / figure bg          */
  --paper-3:#dde6e4;      /* faint deepest paper                            */
  --ink:#16201f;          /* oklch(.22 .02 180)  headlines + body           */
  --ink-soft:#566261;     /* oklch(.46 .015 180) captions, meta             */
  --ink-faint:#7f8a89;    /* lightest meta                                  */
  --accent:#2a7d7b;       /* base, chroma/L clamped — refined teal ink      */
  --accent-deep:#1c5755;  /* accent L-0.10 — hovers, accent rules           */
  --accent-wash:rgba(42,125,123,.08);
  --hairline:#cdd7d5;     /* oklch(.88 .012 180) 1px rules                   */
  --hairline-2:#dde5e3;   /* faintest divider                               */

  /* Dark surface (for white-on-dark logo, masthead band, colophon) */
  --ink-deep:#0e1a19;     /* near-black teal — the dark ground              */
  --ink-deep-2:#142523;
  --on-dark:#e7eeec;      /* text on dark                                   */
  --on-dark-soft:#9fb0ad;

  --shadow:0 24px 60px -44px rgba(14,26,25,.34); /* whisper only            */

  /* Type families */
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --text:"Spectral", Georgia, "Times New Roman", serif;

  /* Type scale — fluid, generous; this direction lives on scale contrast */
  --t-display: clamp(2.9rem, 1.1rem + 8vw, 6.6rem);   /* hero, lh .98       */
  --t-h1:      clamp(2.3rem, 1.2rem + 4.2vw, 4.3rem);
  --t-h2:      clamp(1.9rem, 1.1rem + 3.2vw, 3.5rem);
  --t-h3:      clamp(1.3rem, 1.05rem + 1.05vw, 1.75rem);
  --t-lede:    clamp(1.18rem, 1rem + 0.62vw, 1.5rem);  /* intro, serif      */
  --t-body:    clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --t-cap:     0.84rem;   /* figure captions, italic                        */
  --t-kicker:  0.74rem;   /* tracked uppercase labels                       */
  --t-folio:   0.68rem;   /* running head                                   */
  --t-num:     clamp(2.6rem, 1.4rem + 4vw, 4.6rem);    /* stats / margin no */

  --maxw:1300px;
  --measure:64ch;
  --sec-pad: clamp(80px, 10vw, 168px);
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ===================================================================
   Reset & base
   =================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth iframe{pointer-events:none;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.62;
  letter-spacing:.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.04;letter-spacing:-.02em;font-family:var(--serif);text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
::selection{background:var(--accent);color:var(--paper);}

.wrap{width:min(100% - var(--gutter)*2, var(--maxw));margin-inline:auto;}

/* a thin reading rule used throughout */
.hr{height:1px;background:var(--hairline);border:0;width:100%;}

/* kicker / eyebrow — the ONLY uppercase */
.kicker{
  font-family:var(--text);
  font-size:var(--t-kicker);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent-deep);
  display:inline-flex;align-items:center;gap:.7em;
}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7;}
.kicker.no-dash::before{display:none;}

/* margin numeral — the editorial spine */
.folio-num{
  font-family:var(--serif);font-weight:600;
  color:var(--accent);opacity:.5;
  font-size:clamp(1.1rem,.8rem+1vw,1.6rem);
  font-feature-settings:"lnum" 1;letter-spacing:0;
  line-height:1;
}

/* ===================================================================
   Skip link + demo banner
   =================================================================== */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0;}
.skip:focus{left:8px;top:8px;}

.demo-banner{
  background:var(--ink-deep);
  color:var(--on-dark);
  font-family:var(--text);
  font-size:.82rem;line-height:1.45;
  letter-spacing:.01em;
  text-align:center;
  padding:9px 16px;
  position:relative;z-index:60;
}
.demo-banner b{color:#fff;font-weight:500;}
.demo-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent);}
.demo-banner a:hover{color:var(--accent);}

/* ===================================================================
   Masthead / nav — a magazine running head over a hairline
   =================================================================== */
.masthead{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.masthead.scrolled{border-bottom-color:var(--hairline);background:color-mix(in srgb, var(--paper) 94%, transparent);}
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:68px;
}
.brand{display:flex;align-items:baseline;gap:.55em;line-height:1;}
.brand-word{font-family:var(--serif);font-weight:700;font-size:1.42rem;letter-spacing:-.02em;color:var(--ink);}
.brand-word .dot{color:var(--accent);}
.brand-sub{font-family:var(--text);font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft);white-space:nowrap;}

.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:var(--text);font-size:.93rem;letter-spacing:.01em;color:var(--ink);
  position:relative;padding:4px 0;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
}
.nav-links a:hover{background-size:100% 1px;color:var(--accent-deep);}

.nav-cta{
  font-family:var(--text);font-size:.9rem;font-weight:500;letter-spacing:.02em;
  color:var(--ink);border:1px solid var(--ink);
  padding:10px 18px;border-radius:0;
  display:inline-flex;align-items:center;gap:.5em;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav-cta:hover{background:var(--ink);color:var(--paper);}
.nav-cta svg{width:15px;height:15px;}

.nav-burger{display:none;width:46px;height:46px;border:1px solid var(--hairline);background:transparent;align-items:center;justify-content:center;border-radius:0;}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;width:20px;height:1.5px;background:var(--ink);transition:.3s var(--ease);}
.nav-burger span::before{transform:translateY(-6px);}
.nav-burger span::after{transform:translateY(4.5px);}
.masthead.nav-open .nav-burger span{background:transparent;}
.masthead.nav-open .nav-burger span::before{transform:translateY(0) rotate(45deg);}
.masthead.nav-open .nav-burger span::after{transform:translateY(-1.5px) rotate(-45deg);}

/* ===================================================================
   HERO — asymmetric: headline + lede left (wide), tall figure bleeds right
   =================================================================== */
.hero{position:relative;padding-top:clamp(34px,5vw,68px);padding-bottom:0;overflow:hidden;}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr);
  align-items:end;
  gap:clamp(24px,4vw,56px);
}
.hero-copy{padding-bottom:clamp(46px,6vw,96px);}
.hero-kicker{margin-bottom:clamp(22px,3vw,34px);}
.hero h1{
  font-family:var(--serif);
  font-weight:800;
  font-size:var(--t-display);
  line-height:.95;
  letter-spacing:-.022em;
  color:var(--ink);
  margin-bottom:clamp(22px,2.6vw,34px);
}
.hero h1 .em{font-style:italic;font-weight:700;color:var(--accent);}
.hero-lede{
  font-family:var(--text);
  font-size:var(--t-lede);
  line-height:1.5;
  color:var(--ink);
  max-width:46ch;
  margin-bottom:clamp(26px,3vw,40px);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* hero figure — tall portrait, bleeds off the right page edge */
.hero-figure{
  position:relative;
  align-self:stretch;
  min-height:clamp(380px,52vw,640px);
  margin-right:calc(var(--gutter) * -1);
  overflow:hidden;
}
.hero-media{
  position:absolute;inset:-6% -1% -6% 0;   /* extra height for parallax drift */
  width:auto;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(.9) contrast(.99) brightness(1.02);
}
/* near-invisible paper-tinted harmoniser */
.hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--accent);opacity:.05;mix-blend-mode:multiply;
}
/* a hairline frame on the inner (left) edge of the bleeding figure */
.hero-figure::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hairline);z-index:2;
}
.hero-figcap{
  position:absolute;left:14px;bottom:14px;z-index:3;
  font-family:var(--text);font-style:italic;font-size:var(--t-cap);
  color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55);
  letter-spacing:.01em;padding-right:14px;
}
/* hero footer: a thin standfirst row under the whole hero */
.hero-foot{
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:0;
}
.hero-foot .cell{
  padding:22px 22px 26px 0;
  border-right:1px solid var(--hairline-2);
}
.hero-foot .cell:last-child{border-right:0;}
.hero-foot .n{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,1rem+1.6vw,2.2rem);color:var(--ink);line-height:1;font-feature-settings:"lnum" 1;}
.hero-foot .l{display:block;margin-top:8px;font-family:var(--text);font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-soft);}

/* ===================================================================
   Buttons
   =================================================================== */
.btn{
  --bg:var(--ink);--fg:var(--paper);--bd:var(--ink);
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--text);font-weight:500;font-size:1rem;letter-spacing:.01em;
  padding:14px 24px;border:1px solid var(--bd);border-radius:0;
  background:var(--bg);color:var(--fg);
  transition:transform .3s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  position:relative;
}
.btn svg{width:17px;height:17px;flex:none;}
.btn-primary{--bg:var(--accent);--fg:#fff;--bd:var(--accent);}
.btn-primary:hover{--bg:var(--accent-deep);--bd:var(--accent-deep);transform:translateY(-2px);}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink);}
.btn-ghost:hover{--bg:var(--ink);--fg:var(--paper);transform:translateY(-2px);}
.btn-block{width:100%;justify-content:center;}

/* a quiet text link with animated underline */
.link-u{
  color:var(--accent-deep);font-family:var(--text);font-weight:500;
  display:inline-flex;align-items:center;gap:.45em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
}
.link-u:hover{background-size:0% 1px;}
.link-u svg{width:14px;height:14px;transition:transform .35s var(--ease);}
.link-u:hover svg{transform:translateX(3px);}

/* ===================================================================
   Section scaffold — numbered spine + running head
   =================================================================== */
.section{padding-block:var(--sec-pad);position:relative;}
.section.band{background:var(--paper-2);}
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,2vw,22px);
  margin-bottom:clamp(40px,5vw,72px);
  max-width:var(--measure);
}
.sec-head .row{display:flex;align-items:baseline;gap:18px;}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:var(--t-h2);color:var(--ink);}
.sec-head h2 .em{font-style:italic;color:var(--accent);}
.sec-head .standfirst{font-family:var(--text);font-size:var(--t-lede);color:var(--ink-soft);line-height:1.5;max-width:54ch;}

/* drop-cap lede */
.lede-drop{font-family:var(--text);font-size:var(--t-lede);line-height:1.56;color:var(--ink);max-width:var(--measure);}
.lede-drop::first-letter{
  font-family:var(--serif);font-weight:700;
  float:left;font-size:3.5em;line-height:.82;
  padding:.06em .12em 0 0;margin:.02em .04em 0 0;
  color:var(--accent);
}

/* ===================================================================
   Standfirst block (the opening "from the editor" lede after hero)
   =================================================================== */
.standfirst-sec{padding-block:clamp(56px,7vw,108px);}
.standfirst-grid{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(24px,5vw,72px);align-items:start;
}
.standfirst-grid .aside{
  font-family:var(--text);font-style:italic;color:var(--ink-soft);
  font-size:var(--t-cap);line-height:1.6;
  border-top:1px solid var(--hairline);padding-top:18px;
}
.standfirst-grid .aside .lbl{display:block;font-style:normal;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--accent-deep);margin-bottom:10px;}

/* ===================================================================
   EXPEDITIONS — figures in a uniform editorial grid (gridType: uniform)
   image → hairline → serif title → italic caption → editorial price
   =================================================================== */
.exp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(24px,3vw,46px);
  row-gap:clamp(48px,5vw,82px);
}
.figure{position:relative;display:flex;flex-direction:column;}
.figure-media{
  position:relative;overflow:hidden;background:var(--paper-3);
  aspect-ratio:4/5;border-radius:0;
}
.figure-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(.99) brightness(1.02);
  transition:transform 1.1s var(--ease);
}
.figure:hover .figure-media img{transform:scale(1.035);}
.figure-media::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:.05;mix-blend-mode:multiply;pointer-events:none;}
.figure-tag{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--text);font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:#fff;background:var(--accent-deep);
  padding:7px 12px;
}
.figure-num{
  position:absolute;top:12px;right:14px;z-index:2;
  font-family:var(--serif);font-weight:600;color:#fff;opacity:.92;
  font-size:1.05rem;text-shadow:0 1px 10px rgba(0,0,0,.5);font-feature-settings:"lnum" 1;
}
.figure-body{padding-top:18px;}
.figure-rule{height:1px;background:var(--ink);width:100%;transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease);}
.figure.in .figure-rule{transform:scaleX(1);}
.figure-kicker{margin-top:14px;font-family:var(--text);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);}
.figure h3{font-family:var(--serif);font-weight:700;font-size:var(--t-h3);color:var(--ink);margin-top:8px;line-height:1.12;}
.figure-desc{font-family:var(--text);font-size:.98rem;line-height:1.56;color:var(--ink-soft);margin-top:12px;max-width:42ch;}
.figure-meta{
  margin-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:1px solid var(--hairline);padding-top:14px;
}
.figure-price{display:flex;align-items:baseline;gap:.5em;}
.figure-price .from{font-family:var(--text);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);}
.figure-price .amt{font-family:var(--serif);font-weight:700;font-size:1.32rem;color:var(--ink);font-feature-settings:"lnum" 1;letter-spacing:0;}
.figure-go{
  font-family:var(--text);font-size:.86rem;color:var(--accent-deep);
  display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
}
.figure-go svg{width:13px;height:13px;transition:transform .35s var(--ease);}
.figure:hover .figure-go{background-size:100% 1px;}
.figure:hover .figure-go svg{transform:translateX(3px);}
a.figure-link{position:absolute;inset:0;z-index:1;}

/* ===================================================================
   DESTINATIONS — a horizontal index of place-figures with captions
   =================================================================== */
.dest-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.dest{position:relative;}
.dest-media{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--paper-3);}
.dest-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.99) brightness(1.02);transition:transform 1.1s var(--ease);}
.dest:hover .dest-media img{transform:scale(1.04);}
.dest-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,26,25,.5),transparent 46%);}
.dest-cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;}
.dest-cap .nm{font-family:var(--serif);font-weight:700;font-size:1.18rem;line-height:1.08;text-shadow:0 1px 14px rgba(0,0,0,.4);}
.dest-cap .sub{display:block;font-family:var(--text);font-style:italic;font-size:.8rem;margin-top:5px;opacity:.92;}

/* ===================================================================
   JOURNEY — an editorial itinerary spread (offset text + sticky figure)
   =================================================================== */
.journey-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}
.journey-media{position:sticky;top:96px;align-self:start;}
.journey-stage{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);border:1px solid var(--hairline);}
.journey-stage .jm{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);}
.journey-stage .jm.active{opacity:1;}
.journey-stage .jm img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.99) brightness(1.02);}
.journey-stage::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:.05;mix-blend-mode:multiply;pointer-events:none;}
.journey-meta{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--paper);padding:12px 18px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);max-width:78%;
}
.journey-meta .d{font-family:var(--text);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-deep);}
.journey-meta .t{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--ink);margin-top:3px;line-height:1.1;}

.jlist{display:flex;flex-direction:column;}
.jstep{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:22px 0;border-top:1px solid var(--hairline);
  opacity:.46;transition:opacity .5s var(--ease);
}
.jstep:first-child{border-top:0;}
.jstep.active{opacity:1;}
.jstep .day{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--accent);white-space:nowrap;padding-top:2px;font-feature-settings:"lnum" 1;min-width:64px;}
.jstep.active .day{color:var(--accent-deep);}
.jstep h3{font-family:var(--serif);font-weight:700;font-size:1.22rem;color:var(--ink);line-height:1.14;}
.jstep p{font-family:var(--text);font-size:.96rem;color:var(--ink-soft);line-height:1.55;margin-top:7px;max-width:46ch;}
.journey-head{margin-bottom:clamp(34px,4vw,56px);}

/* ===================================================================
   PULL-QUOTE — full-bleed editorial review on paper-2
   =================================================================== */
.pullquote{background:var(--paper-2);padding-block:clamp(72px,9vw,150px);position:relative;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.pullquote .inner{max-width:24ch;margin-inline:auto;text-align:center;position:relative;}
.pullquote .mark{
  font-family:var(--serif);font-weight:800;color:var(--accent);
  font-size:clamp(5rem,3rem+9vw,11rem);line-height:.6;
  display:block;height:.42em;opacity:.85;
}
.pullquote q{
  display:block;quotes:none;
  font-family:var(--serif);font-weight:600;font-style:italic;
  font-size:clamp(1.5rem,1rem+2.6vw,2.8rem);
  line-height:1.24;letter-spacing:-.01em;color:var(--ink);
  text-wrap:balance;
}
.pullquote q::before,.pullquote q::after{content:"";}
.pullquote .attr{
  margin-top:clamp(26px,3vw,40px);
  font-family:var(--text);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:.8em;
}
.pullquote .attr::before{content:"";width:30px;height:1px;background:var(--accent);}
.pullquote .stars{color:var(--accent);letter-spacing:.18em;font-size:.8rem;margin-bottom:22px;display:block;}

/* ===================================================================
   WHY — the operator's principles, set as a numbered editorial list
   =================================================================== */
.why-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(36px,5vw,90px);row-gap:0;
}
.why-item{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:clamp(26px,3vw,38px) 0;
  border-top:1px solid var(--hairline);
}
.why-item .wn{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--accent);opacity:.65;line-height:1;font-feature-settings:"lnum" 1;}
.why-item h3{font-family:var(--serif);font-weight:700;font-size:1.32rem;color:var(--ink);line-height:1.16;}
.why-item p{font-family:var(--text);font-size:1rem;color:var(--ink-soft);line-height:1.58;margin-top:11px;max-width:44ch;}

/* ===================================================================
   GALLERY — a wide editorial strip (masonry-ish, varied heights)
   =================================================================== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);}
.gframe{position:relative;overflow:hidden;background:var(--paper-3);}
.gframe img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.99) brightness(1.02);transition:transform 1.1s var(--ease);}
.gframe:hover img{transform:scale(1.045);}
.gframe::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:.04;mix-blend-mode:multiply;}
.gframe.tall{grid-row:span 2;}
.gframe.wide{grid-column:span 2;}
.gallery-cap{font-family:var(--text);font-style:italic;font-size:var(--t-cap);color:var(--ink-soft);margin-top:18px;text-align:center;}

/* ===================================================================
   TRUST — small-caps statistics, no cards
   =================================================================== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.trust .stat{padding:clamp(30px,4vw,52px) clamp(16px,2vw,28px);border-right:1px solid var(--hairline);text-align:left;}
.trust .stat:last-child{border-right:0;}
.trust .stat .n{font-family:var(--serif);font-weight:700;font-size:var(--t-num);color:var(--ink);line-height:.92;letter-spacing:-.02em;font-feature-settings:"lnum" 1;}
.trust .stat .l{display:block;margin-top:14px;font-family:var(--text);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);}

/* ===================================================================
   CONTACT colophon — dark band (also hosts the white logo)
   =================================================================== */
.colophon{background:var(--ink-deep);color:var(--on-dark);padding-block:clamp(72px,8vw,128px);}
.colophon a{color:var(--on-dark);}
.colophon-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:start;}
.colophon .kicker{color:var(--accent);}
.colophon h2{font-family:var(--serif);font-weight:700;font-size:var(--t-h2);color:#fff;margin-top:22px;line-height:1.04;}
.colophon h2 .em{font-style:italic;color:var(--accent);}
.colophon .lede{font-family:var(--text);font-size:var(--t-lede);color:var(--on-dark-soft);line-height:1.55;margin-top:22px;max-width:46ch;}
.colophon-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.colophon .btn-ghost{--fg:#fff;--bd:rgba(231,238,236,.4);}
.colophon .btn-ghost:hover{--bg:#fff;--fg:var(--ink-deep);--bd:#fff;}

.contact-list{display:flex;flex-direction:column;gap:0;}
.contact-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 0;border-top:1px solid rgba(231,238,236,.14);}
.contact-row:first-child{border-top:0;padding-top:0;}
.contact-row .ico{width:20px;height:20px;color:var(--accent);margin-top:2px;flex:none;}
.contact-row .ico svg{width:100%;height:100%;}
.contact-row .k{font-family:var(--text);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--on-dark-soft);}
.contact-row .v{font-family:var(--text);font-size:1.02rem;color:#fff;line-height:1.45;margin-top:4px;}
.contact-row a.v{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .4s var(--ease);display:inline;}
.contact-row a.v:hover{background-size:100% 1px;color:var(--accent);}

/* footer base */
.footer{background:var(--ink-deep-2);color:var(--on-dark-soft);padding-block:38px;border-top:1px solid rgba(231,238,236,.1);}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.footer-logo{display:flex;align-items:center;gap:14px;}
.footer-logo img{height:34px;width:auto;opacity:.95;}
.footer-mark{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:#fff;letter-spacing:-.01em;}
.footer-mark .dot{color:var(--accent);}
.footer-meta{font-family:var(--text);font-size:.8rem;line-height:1.5;text-align:right;}
.footer-meta a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(42,125,123,.6);}
.footer-meta a:hover{color:var(--accent);}

/* ===================================================================
   Reveal animation (reveal-only motion signature)
   =================================================================== */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .56s var(--ease), transform .56s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-hero-el]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-hero-el].in{opacity:1;transform:none;}
.hero-media{opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--ease), transform 1.4s var(--ease);}
.hero-media.in{opacity:1;transform:none;}

/* stagger helpers (down a figure column) */
[data-reveal][data-d="1"]{transition-delay:.07s;}
[data-reveal][data-d="2"]{transition-delay:.14s;}
[data-reveal][data-d="3"]{transition-delay:.21s;}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width:1080px){
  .exp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dest-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gallery{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;align-items:start;}
  .hero-copy{padding-bottom:30px;}
  .hero-figure{margin-right:calc(var(--gutter) * -1);margin-left:calc(var(--gutter) * -1);min-height:clamp(320px,72vw,460px);}
  .hero-figure::before{display:none;}
  .hero-media img{object-position:50% 38%;}
  .standfirst-grid{grid-template-columns:1fr;}
  .journey-grid{grid-template-columns:1fr;}
  .journey-media{position:relative;top:0;margin-bottom:34px;}
  .why-grid{grid-template-columns:1fr;}
  .colophon-grid{grid-template-columns:1fr;}
  .why-item:first-child{border-top:1px solid var(--hairline);}
}
@media (max-width:760px){
  .nav-links,.nav-cta{display:none;}
  .nav-burger{display:inline-flex;}
  .masthead .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
    padding:8px var(--gutter) 18px;
    display:none;
  }
  .masthead.nav-open .nav-links{display:flex;}
  .masthead .nav-links li{width:100%;}
  .masthead .nav-links a{display:block;width:100%;padding:14px 0;border-bottom:1px solid var(--hairline-2);font-size:1.05rem;}
  .masthead .nav-links li:last-child a{border-bottom:0;}
  .hero-foot{grid-template-columns:repeat(2,1fr);}
  .hero-foot .cell{padding:18px 14px 18px 0;}
  .hero-foot .cell:nth-child(2){border-right:0;}
  .hero-foot .cell:nth-child(1),.hero-foot .cell:nth-child(2){border-bottom:1px solid var(--hairline-2);}
  .trust{grid-template-columns:repeat(2,1fr);}
  .trust .stat:nth-child(2){border-right:0;}
  .trust .stat:nth-child(1),.trust .stat:nth-child(2){border-bottom:1px solid var(--hairline);}
  .footer-in{flex-direction:column;align-items:flex-start;gap:18px;}
  .footer-meta{text-align:left;}
}
@media (max-width:560px){
  .exp-grid{grid-template-columns:1fr;row-gap:46px;}
  .dest-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gframe.wide{grid-column:span 2;}
  .gframe.tall{grid-row:span 1;}
  .hero-actions .btn,.colophon-actions .btn,.hero-actions{width:100%;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .colophon-actions{flex-direction:column;align-items:stretch;}
  .colophon-actions .btn{width:100%;justify-content:center;}
  .figure-desc{max-width:none;}
  .sec-head .row{flex-direction:column;gap:10px;}
}
@media (max-width:380px){
  .dest-grid{grid-template-columns:1fr;}
  .trust{grid-template-columns:1fr;}
  .trust .stat{border-right:0;border-bottom:1px solid var(--hairline);}
  .trust .stat:last-child{border-bottom:0;}
  .hero-foot{grid-template-columns:1fr;}
  .hero-foot .cell{border-right:0;border-bottom:1px solid var(--hairline-2);padding:14px 0;}
  .hero-foot .cell:last-child{border-bottom:0;}
}

/* ===================================================================
   Reduced motion — show everything in its final, complete state
   =================================================================== */
@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],.hero-media{opacity:1 !important;transform:none !important;}
  .figure-rule{transform:scaleX(1) !important;}
  .jstep{opacity:1 !important;}
  .journey-stage .jm{opacity:0;}
  .journey-stage .jm.active,.journey-stage .jm:first-child{opacity:1;}
  .journey-media{position:relative !important;top:0 !important;}
}
