/* ── Self-hosted fonts: no request ever leaves this server ──── */
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-300.woff2')format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-400.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-600.woff2')format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-400-italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-300.woff2')format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-400.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-500.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ── Design system (brief §3) ───────────────────────────────── */
:root{
  /* Clara, light. Swart, black. Dark-led: neutral black, cool plum. No metal: ivory and plum only.
     --bg/--surface/--text flip per band; the raw tokens never move. */
  --black:#0B0B0C; --black-2:#141417; --black-3:#1C1C20;
  --bone:#F1F0EC; --bone-2:#E6E4DE;
  --ink:#121212; --ink-70:#4C4C4C;
  --plum:#33212F; --plum-2:#412A3C;
  --accent:#B9A8B4; --accent-ink:#4E3A49;
  --rule:rgba(18,18,18,.14); --rule-dark:rgba(241,240,236,.14);
  --forest:#0B0B0C; --forest-2:#141417; /* legacy aliases */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px; --pad:clamp(20px,5vw,64px);
  /* Fixed, because the full-viewport hero subtracts it. Left to itself the
     header breathed between 68px and 75px as the wordmark's clamp moved,
     and the hero was that much too tall. */
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--black);color:var(--bone);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--bone);
  padding:12px 18px;z-index:999}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(34px,5.4vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(19px,2vw,24px)}
p{margin:0 0 1.1em;max-width:68ch}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-70)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:14px}

section{padding:clamp(60px,7.5vw,112px) max(var(--pad),(100% - var(--wrap))/2);
  background:var(--black);color:var(--bone)}
section>*{max-width:100%;margin-inline:0}
/* The closing call to action is the one deliberately centred block. */
.closing-band>*{margin-inline:auto}
/* Headings and the text under them already share one left edge: every direct
   child of a section is the same centred measure. Do not set margin-left here.
   A margin-left:0 overrides margin-inline:auto and drops the content out of
   the centred column, so it no longer lines up with the nav or the footer. */

/* The rhythm, applied automatically down every page. Dark is the default
   state; every third section lifts to light so the eye gets relief. */
main>section{background:var(--black);color:var(--bone)}
main>section:nth-of-type(3n+2){background:var(--black-2)}
main>section:nth-of-type(even){background:var(--black);color:var(--bone)}
main>section h1,
main>section h2,
main>section h3{color:var(--bone)}
main>section .lead,
main>section p{color:rgba(241,240,236,.76)}
main>section .eyebrow,
main>section .link-more,
main>section .lang-level,
main>section .step-n{color:var(--accent)}
main>section .door,
main>section .case-card,
main>section blockquote,
main>section .step-list li,
main>section .lang-list li,
main>section .tag-row li{background:var(--black-2);border-color:var(--rule-dark)}
main>section .case-card p,
main>section .step-d,
main>section .tick-list li,
main>section .lang-line,
main>section cite,
main>section .price-row p{color:rgba(241,240,236,.66)}
main>section .price-val{color:var(--accent)}
main>section .price-table,
main>section .price-row,
main>section .faq details,
main>section .case-head dd{border-color:var(--rule-dark)}
main>section .faq summary{color:var(--bone)}
main>section .btn-primary{background:var(--bone);color:var(--black);border-color:var(--bone)}
main>section .btn-primary:hover{background:transparent;color:var(--bone)}
main>section .btn-ghost{border-color:var(--bone);color:var(--bone)}
main>section .btn-ghost:hover{background:var(--bone);color:var(--black)}
main>section .badge{background:var(--plum);color:var(--bone)}
/* Light relief. Applied to chosen sections, never guessed at. */
main>section.band-light{background:var(--bone);color:var(--ink)}
main>section.band-light h1,main>section.band-light h2,main>section.band-light h3{color:var(--ink)}
main>section.band-light p,main>section.band-light .lead{color:var(--ink-70)}
main>section.band-light .eyebrow,main>section.band-light .link-more,
main>section.band-light .lang-level,main>section.band-light .step-n,
main>section.band-light .price-val{color:var(--accent-ink)}
main>section.band-light .door,main>section.band-light .case-card,
main>section.band-light blockquote,main>section.band-light .step-list li,
main>section.band-light .lang-list li,main>section.band-light .tag-row li{
  background:var(--bone-2);border-color:var(--rule)}
main>section.band-light .case-card p,main>section.band-light .step-d,
main>section.band-light .tick-list li,main>section.band-light .lang-line,
main>section.band-light cite,main>section.band-light .price-row p{color:var(--ink-70)}
main>section.band-light .price-table,main>section.band-light .price-row,
main>section.band-light .faq details,main>section.band-light .case-head dd{border-color:var(--rule)}
main>section.band-light .faq summary{color:var(--ink)}
main>section.band-light .btn-primary{background:var(--ink);color:var(--bone);border-color:var(--ink)}
main>section.band-light .btn-primary:hover{background:transparent;color:var(--ink)}
main>section.band-light .btn-ghost{border-color:var(--ink);color:var(--ink)}
main>section.band-light .btn-ghost:hover{background:var(--ink);color:var(--bone)}
main>section.band-light .badge{background:var(--plum);color:var(--bone)}

/* Hero and the closing band keep their own treatment regardless of position. */
main>section.hero{background:var(--black);color:var(--bone)}
main>section.hero h1{color:var(--bone)}
main>section.hero .lead,main>section.hero p{color:rgba(241,240,236,.74)}
main>section.hero .eyebrow{color:var(--accent)}
main>section.closing-band{background:var(--black);color:var(--bone)}
main>section.proof{background:var(--black);color:var(--bone)}

/* Scroll reveal */
/* Reveal only hides content once JS has confirmed it can reveal it again.
   Without JS, or if anything fails, everything stays visible. */
.reveal{opacity:1;transform:none}
.js-reveal .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}.reveal-d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{display:inline-block;padding:14px 28px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.btn-primary{background:var(--forest);color:var(--bone);border-color:var(--forest)}
.btn-primary:hover{background:transparent;color:var(--forest)}
.btn-ghost{border-color:var(--forest);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--bone)}
.btn-light{background:var(--bone);color:var(--forest);border-color:var(--bone)}
.btn-light:hover{background:transparent;color:var(--bone)}
.link-more{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--accent-ink);text-decoration:none}
.link-more:hover{text-decoration:underline}

/* ── Header ──────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:var(--black);color:var(--bone);
  border-bottom:1px solid var(--rule-dark);padding-inline:var(--pad);
  height:var(--header-h)}
/* The wrap carries no inline padding of its own: the header supplies it, so
   the wordmark lands on the same left edge as every heading below it. */
.nav{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:20px;
  height:100%;padding:0}
.nav-logo{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);font-weight:600;
  text-decoration:none;color:var(--bone);white-space:nowrap;letter-spacing:.01em}
.nav-links{list-style:none;display:flex;gap:22px;margin:0 0 0 auto;padding:0}
.nav-links a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:rgba(241,240,236,.78);padding-bottom:3px;position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--bone)}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{width:100%}

.lang-switch{position:relative}
.lang-current{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,240,236,.78);padding:6px 2px}
.lang-current:hover{color:var(--bone)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:150px;background:var(--bone);
  border:1px solid var(--rule);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:120}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:block;padding:9px 16px;font-size:13px;color:var(--ink);text-decoration:none}
.lang-menu a:hover{background:var(--bone-2)}
.lang-menu a[aria-current=true]{color:var(--accent-ink);font-weight:500}

.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;
  cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:22px;height:1.5px;background:var(--bone)}

.mobile-nav{position:fixed;inset:0;z-index:200;background:var(--bone);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:80px var(--pad) 40px}
.mobile-nav[hidden]{display:none}
.mobile-nav a{font-family:var(--serif);font-size:clamp(26px,7vw,40px);
  text-decoration:none;color:var(--ink);padding:6px 0}
.mobile-nav a:hover{color:var(--accent-ink)}
.mobile-close{position:absolute;top:18px;right:var(--pad);background:none;border:0;
  cursor:pointer;color:var(--ink);padding:8px}
.mobile-foot{margin-top:24px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-70)}

@media (max-width:900px){
  .nav-links{display:none}
  .menu-toggle{display:flex}
  .lang-switch{margin-left:auto}
  .lang-current span{display:none}
  .lang-current::before{content:attr(data-short)}
}

/* ── Hero: full-viewport video, words laid over it ───── */
/* The video is the point of this page, so it gets the whole first screen and
   the text sits on top of it rather than beside it. One consequence worth
   naming: because the section fills the viewport, the media box and the
   viewport are the same shape, which is what lets the poster and the video
   cut be chosen from the same number. See hero-media.njk. */
.hero{position:relative;overflow:hidden;padding:0;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:grid;grid-template-rows:1fr auto;align-items:end}
.hero>*{max-width:none}

/* The media fills the section and sits behind everything else. These undo the
   side-by-side geometry the shared .hero-media rules set up for inline use. */
.hero .hero-media{position:absolute;inset:0;z-index:0;
  margin:0;height:auto;max-height:none;align-self:auto}

/* Barely a scrim: a whisper at the very bottom edge, gone by halfway up.
   The contrast the text needs is carried around the letters themselves, not
   by darkening the picture. Nothing is needed at the top either, since the
   header is a solid bar in its own band rather than an overlay. */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,11,11,.46) 0%,
    rgba(11,11,11,.36) 18%,
    rgba(11,11,11,.24) 34%,
    rgba(11,11,11,.13) 50%,
    rgba(11,11,11,.05) 66%,
    rgba(11,11,11,0) 82%)}

/* The text keeps the same left edge as every other section on the site. */
.hero-inner{position:relative;z-index:3;grid-row:2;
  display:block;grid-template-columns:none;min-height:0;
  max-width:100%;margin-inline:0;
  padding:0 max(var(--pad),(100% - var(--wrap))/2)}
/* Wide enough that the heading sets in three lines and the two buttons stay
   on one row. At 34ch the heading ran to five lines and the buttons wrapped,
   which pushed the block past the bottom of the screen on a 700px-tall
   window. On phones the column is narrower than this anyway. */
.hero-text{padding-block:0 clamp(36px,6vh,76px);max-width:min(46ch,660px)}
/* The footage runs from a dark portrait to a bright kitchen, so the words
   have to survive a near-white frame without a panel behind them. Each layer
   has a job: the first sits tight on the letter edge and does the real
   legibility work, the second gives the glyph a body, the third lifts the
   line off a busy background. Measured across the full 18s loop rather than
   one frame, which is how an earlier, far heavier treatment got signed off
   on a frame that happened to be dark.

   Worth being straight about: WCAG's contrast maths reads a single flat
   background colour and gives shadows no credit at all, so the bright frames
   do not have a passing ratio on paper, whatever they look like. Keeping the
   type legible there without a wash is a deliberate trade. */
.hero-text .eyebrow{
  text-shadow:0 1px 2px rgba(11,11,11,.8),0 0 10px rgba(11,11,11,.6)}
/* Cormorant is a high-contrast serif whose hairlines are about a pixel wide.
   A tight dark halo bleeds straight across a stroke that thin and the letter
   reads grey, so the heading gets soft wide layers only. The separation it
   needs comes from the grade on the footage instead. */
.hero-text h1{
  text-shadow:0 1px 4px rgba(11,11,11,.55),0 3px 22px rgba(11,11,11,.5)}
.hero-text .lead{
  text-shadow:0 1px 2px rgba(11,11,11,.75),0 0 14px rgba(11,11,11,.55)}
/* The shared hero rule puts body copy at .74, which is comfortable over a
   flat black panel and too thin over footage that moves under it. */
main>section.hero .hero-text .lead{color:rgba(241,240,236,.94)}
/* Brightened as far as it goes while keeping the plum in it. At 11px this
   line needs 4.5:1 and reaches about 3.2 on the brightest frame of the loop;
   only setting it much larger, or darkening the footage past where it still
   looks like a photograph, would close that gap. */
main>section.hero .hero-text .eyebrow{color:#EFE6EC}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
main>section.hero .btn-ghost{background:rgba(11,11,11,.34);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
main>section.hero .btn-ghost:hover{background:var(--bone)}
/* Same problem, same scale: a hairline chevron over a pale frame. */
.hero-cue{filter:drop-shadow(0 1px 4px rgba(11,11,11,.8))}

/* Scroll cue: decorative and aria-hidden. A full-screen hero gives no edge to
   hint that the page continues, so this supplies one. */
.hero-cue{position:absolute;z-index:3;left:50%;bottom:14px;translate:-50% 0;
  width:26px;height:26px;opacity:.5;pointer-events:none;
  border-left:1.5px solid var(--bone);border-bottom:1.5px solid var(--bone);
  rotate:-45deg;animation:heroCue 2.4s ease-in-out infinite}
@keyframes heroCue{
  0%,100%{translate:-50% 0;opacity:.22}
  50%{translate:-50% 5px;opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .hero-cue{animation:none;opacity:.35}
}
/* Short windows: the cue would crowd the buttons, and the arrow matters less
   than the call to action. */
@media (max-height:620px){
  .hero-cue{display:none}
}
/* A phone on its side leaves about 320px under the header, which will not
   hold a three-line heading, a lead and two buttons. Tighten the heading and
   drop the lead: the intro section directly below says the same thing at
   more length, so nothing is lost. */
@media (orientation:landscape) and (max-height:460px){
  .hero-text h1{font-size:clamp(23px,4.2vw,32px)}
  .hero-text .lead{display:none}
  .hero-text{padding-block:0 18px}
  .hero-ctas{margin-top:16px}
}

/* ── Hero media: poster over video ──────────────────── */
/* The cuts are already framed for their shape, so the zoom and offset the
   still portrait needs would crop them wrongly. Reset both here. */
.hero-media--video{background:var(--black)}
.hero-media--video .hero-media__poster img,
.hero-media--video .hero-media__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  transform:none;max-width:none;
  /* The loop runs from a dark portrait to a bright kitchen worktop. Ungraded,
     the bright end leaves white text on a near-white wall. Applied to poster
     and video alike so the grade cannot change as one fades into the other. */
  filter:brightness(.58) contrast(1.06) saturate(1.06)}
.hero-media__poster{position:absolute;inset:0;z-index:1;
  opacity:1;transition:opacity .9s ease}
.hero-media__video{z-index:0}
/* Only once the video is genuinely playing — not merely loaded — does the
   poster go. A poster that fades on `canplay` reveals a frozen first frame. */
.hero-media--video.is-playing .hero-media__poster{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hero-media__poster{transition:none}
}

/* ── Intro: the paragraph the hero no longer carries ─── */
.intro{padding-block:clamp(56px,8vw,104px)}
.intro-lead{font-family:var(--serif);font-size:clamp(23px,2.5vw,33px);
  line-height:1.32;margin:0 0 22px;max-width:30ch}
.intro-body{font-size:clamp(16px,1.25vw,18px);line-height:1.68;
  max-width:62ch;margin:0}

/* ── Split feature: half the band is picture ────── */
/* A section, so it spans the full width and carries its own background. The
   padding every other section uses is dropped: here the two halves meet in
   the middle of the screen and the picture runs to the outer edge. */
.split-feature{padding:0;display:grid;align-items:stretch}
.split-feature__media{position:relative;overflow:hidden;background:var(--black-2)}
.split-feature__media>img,
.split-feature__media>video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center 28%}
/* The words keep the site's left edge, so the column still lines up with
   every heading above and below it rather than floating in its own half. */
.split-feature__body{display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(44px,6vw,88px);
  padding-left:max(var(--pad),(100vw - var(--wrap))/2);
  padding-right:clamp(24px,4vw,64px)}
.split-feature__body>:last-child{margin-bottom:0}
@media (min-width:861px){
  .split-feature{grid-template-columns:1fr 1fr;min-height:min(78vh,780px)}
}
/* Stacked on phones, picture first: a half-height photograph above the text
   reads as an opening image, which is what it is. */
@media (max-width:860px){
  .split-feature__media{order:-1;min-height:min(56vh,420px)}
  .split-feature__body{padding:clamp(32px,7vw,52px) var(--pad)}
}

/* ── B-roll banner ──────────────────────── */
/* Edge to edge and shallow. The frame is mostly sky above the horizon, so the
   crop is pulled down to keep the boats and the rocks in the strip. */
.banner-media{position:relative;overflow:hidden;margin:0;padding:0;
  background:var(--black);
  height:clamp(220px,34vw,420px)}
.banner-media>img,
.banner-media>video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center 62%}
/* The video fades in over the still once it is actually playing, the same way
   the hero does, so a slow connection shows a photograph rather than a gap. */
.banner-media>video{opacity:0;transition:opacity .8s ease}
.banner-media.is-playing>video{opacity:1}
@media (prefers-reduced-motion:reduce){
  .banner-media>video{transition:none}
}

/* ── Journal list ─────────────────────── */
.journal-list ol{list-style:none;margin:0;padding:0}
.journal-list li{border-top:1px solid var(--rule-dark);padding:clamp(20px,2.6vw,30px) 0}
.journal-list li:last-of-type{border-bottom:1px solid var(--rule-dark)}
.journal-list a{text-decoration:none;display:block}
.journal-list h2{font-size:clamp(21px,2.1vw,28px);margin:0 0 7px}
.journal-list a:hover h2{color:var(--accent)}
.journal-list p{margin:0;max-width:66ch}
.journal-date{margin-top:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,240,236,.5)}

/* ── Proof strip ─────────────────────────────────────────────── */
.proof{background:var(--forest);color:var(--bone);padding-block:clamp(28px,4vw,44px)}
.proof ul{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;
  gap:clamp(28px,7vw,90px);flex-wrap:wrap;text-align:center}
.proof-n{display:block;font-family:var(--serif);font-size:clamp(34px,4.4vw,52px);
  color:var(--accent);line-height:1}
.proof-l{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,240,236,.7);margin-top:6px}

/* ── Cards ───────────────────────────────────────────────────── */
.door-grid,.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:34px}
@media (max-width:860px){.door-grid,.card-grid{grid-template-columns:1fr}}
.door{display:block;background:var(--bone-2);padding:30px 26px;text-decoration:none;
  border-top:2px solid transparent;transition:border-color .3s,transform .3s}
.door:hover{border-top-color:var(--accent);transform:translateY(-3px)}
.case-card{display:block;text-decoration:none;background:var(--bone-2);
  border-top:2px solid transparent;transition:border-color .3s,transform .3s}
.case-card:hover{border-top-color:var(--accent);transform:translateY(-3px)}
.case-card img{aspect-ratio:16/10;object-fit:cover}
.case-card h3,.case-card .cs-title{margin:18px 22px 4px;font-size:clamp(19px,2vw,24px)}
.case-card p{margin:0 22px 22px;font-size:14px;color:var(--ink-70)}

/* ── Quotes ──────────────────────────────────────────────────── */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:30px}
@media (max-width:760px){.quote-grid{grid-template-columns:1fr}}
blockquote{margin:0;background:var(--bone-2);padding:26px 24px;border-left:2px solid var(--plum)}
blockquote p{font-family:var(--serif);font-size:19px;font-style:italic;margin-bottom:12px}
cite{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70)}

/* ── Bands ───────────────────────────────────────────────────── */
.closing-band{background:var(--forest);color:var(--bone);text-align:center}
.closing-text{font-family:var(--serif);font-size:clamp(24px,3.4vw,40px);
  margin:0 auto 26px;max-width:22ch}

/* ── Lists, prices, steps ────────────────────────────────────── */
.step-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:2px}
.step-list li{background:var(--bone-2);padding:22px 26px;display:grid;
  grid-template-columns:40px 1fr;gap:14px;align-items:start}
.step-n{font-family:var(--serif);font-size:26px;color:var(--accent-ink);line-height:1}
.step-t{font-weight:500;display:block;margin-bottom:3px}
.step-d{color:var(--ink-70);font-size:15px}
.tick-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.tick-list li{padding-left:22px;position:relative;color:var(--ink-70)}
.tick-list li::before{content:'';position:absolute;left:0;top:11px;width:11px;height:1px;
  background:var(--accent)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:0;list-style:none}
.tag-row li{font-size:12px;letter-spacing:.08em;background:var(--bone-2);
  border:1px solid var(--rule);padding:7px 13px}
.price-table{margin-top:30px;border-top:1px solid var(--rule)}
.price-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--rule)}
.price-row h3{margin:0 0 3px;font-size:19px}
.price-row p{margin:0;font-size:14.5px;color:var(--ink-70)}
.price-val{font-family:var(--serif);font-size:21px;color:var(--forest);white-space:nowrap}
.price-note{margin-top:18px;font-size:14px;color:var(--ink-70);font-style:italic}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{margin-top:30px;max-width:860px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,2vw,23px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--accent-ink);font-size:20px}
.faq details[open] summary::after{content:'\2013'}
.faq details[open] summary{color:var(--accent-ink)}
.faq-a{padding:0 40px 22px 0;color:var(--ink-70)}

/* ── Languages page ──────────────────────────────────────────── */
.lang-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:2px}
.lang-list li{background:var(--bone-2);padding:22px 26px}
.lang-name{font-family:var(--serif);font-size:23px;display:block}
.lang-line{font-style:italic;color:var(--ink-70);display:block;margin:2px 0 4px}
.lang-level{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.review-full{margin-top:26px}
.review-full blockquote{border-left:2px solid var(--plum)}
.review-full details{margin-top:12px}
.review-full summary{cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink)}
.review-tr{margin-top:10px;color:var(--ink-70);font-size:15px}

/* ── Case study ──────────────────────────────────────────────── */
.case-head{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 30px;padding:0;list-style:none}
.case-head div{font-size:12px}
.case-head dt{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);font-size:10.5px}
.case-head dd{margin:3px 0 0;font-weight:500}
.badge{display:inline-block;background:var(--plum);color:var(--bone);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 11px}
.browser-frame{background:var(--forest-2);padding:10px 10px 0;margin-top:30px}
.browser-bar{display:flex;gap:6px;padding:0 0 10px}
.browser-bar span{width:9px;height:9px;border-radius:50%;background:rgba(241,240,236,.3)}
.browser-frame img,.browser-frame video{width:100%;display:block}

/* ── Contact form ────────────────────────────────────────────── */
.form{margin-top:30px;max-width:620px;display:grid;gap:18px}
.field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-70);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;
  padding:13px 14px;background:#fff;border:1px solid var(--rule);color:var(--ink);border-radius:0}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-70)}
.consent input{width:17px;height:17px;flex:none;margin-top:2px}
.form-status{font-size:15px;padding:12px 0}
.form-status[data-state=ok]{color:var(--forest)}
.form-status[data-state=err]{color:#8A2F2F}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer{background:var(--forest);color:var(--bone);padding:clamp(48px,6vw,72px) var(--pad) 0;
  text-align:center;overflow:hidden}
.footer-inner{max-width:var(--wrap);margin-inline:auto}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-bottom:26px}
.footer-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,240,236,.72);text-decoration:none}
.footer-links a:hover{color:var(--bone)}
.footer-tagline,.footer-location{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,240,236,.6);margin:0 0 6px;max-width:none}
.footer-legal{font-size:11px;letter-spacing:.1em;color:rgba(241,240,236,.6);
  margin:16px 0 0;max-width:none}
.footer-ip{font-size:11.5px;line-height:1.75;color:rgba(241,240,236,.42);
  max-width:72ch;margin:14px auto 0}
.footer-maker{font-size:11px;letter-spacing:.1em;color:rgba(241,240,236,.5);
  margin:14px 0 0;max-width:none;font-style:italic}
.footer-wordmark{display:block;width:100%;height:auto;margin-top:22px}
.footer-wordmark text{font-family:var(--serif);font-size:108px;fill:#fff}

/* ── Language suggestion banner ──────────────────────────────── */
.lang-offer{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:300;
  max-width:min(560px,calc(100vw - 28px));display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:16px 20px;background:var(--forest);color:var(--bone);
  border:1px solid rgba(184,130,90,.4);box-shadow:0 16px 48px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility .35s}
.lang-offer.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.lang-offer p{margin:0;flex:1 1 240px;font-size:14px;max-width:none}
.lang-offer a,.lang-offer button{font:inherit;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer}
.lang-offer a{background:var(--bone);color:var(--forest);padding:10px 16px;text-decoration:none}
.lang-offer button{background:none;border:0;color:rgba(241,240,236,.6);padding:10px 4px}
.lang-offer button:hover{color:var(--bone)}

/* On-stage photo */
.stage-shot{max-width:460px;margin-top:22px;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}

/* Paired deep-dives (aviation, business) */
.deep{margin-top:28px;padding-top:26px;border-top:1px solid var(--rule-dark)}
.deep:first-of-type{border-top:0;padding-top:0}
main>section.band-light .deep{border-top-color:var(--rule)}
.deep h3{margin-bottom:.35em}

/* Full-bleed photographic band. The frame is wider than any phone photo, so
   the focal point is set per breakpoint rather than left to centre. */
.band-photo{margin:0;padding:0;background:var(--black)}
.band-photo img{width:100%;height:clamp(240px,38vw,420px);object-fit:cover;
  object-position:center 42%}
@media (max-width:860px){.band-photo img{height:min(46vh,340px);object-position:center 40%}}

/* Inset photograph, sitting between sections. These sources are about 1100px
   wide, so running them full-bleed would upscale them on a desktop screen:
   holding them to the wrap keeps every one at native resolution. Horizontal
   padding matches section so the edges line up with the text above. */
.figure-inset{margin:0;background:var(--black);
  padding:clamp(8px,1.5vw,20px) max(var(--pad),(100% - var(--wrap))/2)}
.figure-inset img{display:block;width:100%;max-width:var(--fig-max,1086px);
  height:auto;border-radius:2px}
.figure-inset--narrow{--fig-max:760px}
.figure-inset--square{--fig-max:560px}

/* Photograph beside prose. One column on phones; from 861px the image takes a
   fixed-range column so the text beside it keeps a readable measure. */
.media-split{display:grid;gap:clamp(24px,3.5vw,48px);align-items:start}
/* For a short statement beside a tall portrait, top-aligning strands the text
   at the top of a deep column: centre it so the whitespace reads as chosen. */
.media-split--centre{align-items:center}
.media-split>*{min-width:0}
.media-split img{display:block;width:100%;height:auto;border-radius:2px}
@media (min-width:861px){
  .media-split{grid-template-columns:minmax(0,1fr) minmax(240px,340px)}
  .media-split--image-first{grid-template-columns:minmax(240px,340px) minmax(0,1fr)}
}
/* Stacked, the portrait would otherwise run the full phone width and push the
   text far down the page. */
@media (max-width:860px){.media-split img{max-width:min(420px,100%)}}

/* Rights notice on an unused concept. Deliberately plain and prominent:
   it is a statement of ownership, not decoration. */
.rights-note{background:var(--plum);border:1px solid var(--plum-2);border-radius:2px;
  padding:clamp(20px,2.4vw,30px);max-width:72ch}
.rights-note p{margin:0;color:var(--bone);font-size:14.5px;line-height:1.75;max-width:none}

.case-next{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0}
/* Below 380px a two-column price row cannot hold a long label and a price on
   one line: stack them instead of letting the price leave the page. */
@media (max-width:380px){
  .price-row{grid-template-columns:1fr;gap:6px}
  .price-val{white-space:normal}
}