/* ==========================================================================
   QTN FLY — Design 3
   Design system: SpaceX DESIGN.md (VoltAgent/awesome-design-md)
   Structure:     blueprint section 7 of "best principle.md"
   Every token below is transcribed from the DESIGN.md front-matter.
   The black/white-only rule is load-bearing. Do not add a brand accent.
   ========================================================================== */

/* Optional: drop D-DIN.woff2 / D-DIN-Bold.woff2 into assets/fonts/ and
   uncomment. Without them the spec fallback chain (Arial Narrow) runs, which
   keeps the condensed industrial cut. */
/*
@font-face{font-family:"D-DIN";src:url("../fonts/D-DIN.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"D-DIN-Bold";src:url("../fonts/D-DIN-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
*/

:root{
  /* colors — DESIGN.md front-matter, verbatim */
  --ink:#000000;
  --on-primary:#ffffff;
  --on-primary-mute:#f0f0fa;
  --canvas-night:#000000;
  --canvas-night-soft:#0a0a0a;
  --canvas-light:#ffffff;
  --canvas-cool:#f0f0fa;
  --hairline-on-dark:#3a3a3f;
  --hairline-on-light:#e0e0e8;
  --ink-mute:#5a5a5f;
  /* Accessible greys added after the UI/UX audit: --ink-dim keeps large
     numerals legible on black (4.5:1), --field-border gives form inputs the
     3:1 boundary WCAG 1.4.11 asks of controls on white. */
  --ink-dim:#75757c;
  --field-border:#8a8a92;
  --error:#b00020;

  /* typography */
  --font-display:"D-DIN-Bold","Arial Narrow",Arial,Verdana,sans-serif;
  --font-ui:"D-DIN",Arial,Verdana,sans-serif;
  --display-xxl:80px;
  --display-xl:60px;
  --display-lg:48px;

  /* rounded */
  --r-xs:4px; --r-sm:8px; --r-md:16px; --r-pill:32px; --r-full:9999px;

  /* spacing */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px;
  --s-lg:18px; --s-xl:24px; --s-xxl:32px; --s-huge:48px;

  --shell:1200px;
  --nav-h:74px;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
/* color-scheme is load-bearing, not decoration: without it Chrome's auto dark
   mode rewrites every declared colour — it turned the deliberately white
   contact band into #181a1b. Declaring the scheme opts the page out. */
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;background:var(--canvas-night);color:var(--on-primary);
  font-family:var(--font-ui);font-size:16px;font-weight:400;line-height:1.5;
  letter-spacing:.32px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
/* Kill the 300 ms double-tap delay on every control. */
a,button,summary,label,select{touch-action:manipulation}
p,li,dd,blockquote{text-wrap:pretty}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
table{border-collapse:collapse;width:100%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ------------------------------------------------------------- language --- */
/* Both languages ship in the HTML so the page is complete without JS and both
   are crawlable. One attribute on <html> decides which one paints. */
html[lang="fr"] [data-l="en"]{display:none}
html[lang="en"] [data-l="fr"]{display:none}

/* ---------------------------------------------------------------- a11y --- */
.skip{
  position:absolute;left:var(--s-md);top:-200px;z-index:200;
  background:var(--canvas-light);color:var(--ink);
  padding:var(--s-sm) var(--s-md);border-radius:var(--r-xs);
  font-family:var(--font-ui);font-size:13.008px;font-weight:700;line-height:.94;
  letter-spacing:1.17px;text-transform:uppercase;
}
.skip:focus{top:var(--s-md)}
:focus-visible{outline:2px solid var(--on-primary);outline-offset:3px}
.on-light :focus-visible{outline-color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- type --- */
.display{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  margin:0;text-wrap:balance;
}
.d-xxl{font-size:var(--display-xxl);line-height:.95;letter-spacing:1.6px}
.d-xl {font-size:var(--display-xl); line-height:1.2; letter-spacing:1.2px}
.d-lg {font-size:var(--display-lg); line-height:1.25;letter-spacing:.96px}
.d-sm {font-family:var(--font-display);font-weight:700;text-transform:uppercase;
       font-size:24px;line-height:1.25;letter-spacing:.8px;margin:0}

.eyebrow{
  font-size:12px;font-weight:400;line-height:2;letter-spacing:.96px;
  text-transform:uppercase;color:var(--on-primary-mute);margin:0 0 var(--s-md);
}
.lead{font-size:16px;line-height:1.7;letter-spacing:.32px;max-width:52ch;color:var(--on-primary-mute)}
.caption{font-size:13.008px;line-height:1.5;letter-spacing:0}
.micro{font-size:12px;line-height:2;letter-spacing:.96px;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- button --- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-sm);
  padding:var(--s-lg) var(--s-xl);
  border:1px solid var(--on-primary);border-radius:var(--r-pill);
  background:transparent;color:var(--on-primary);
  font-family:var(--font-ui);font-size:13.008px;font-weight:700;line-height:.94;
  letter-spacing:1.17px;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .15s ease;
  min-height:50px;
}
/* Hover styles only where a pointer can hover, so a tap on a phone does not
   leave a button stuck in its hover colour. Focus keeps the same look. */
.btn:focus-visible{background:var(--canvas-cool);color:var(--ink);border-color:var(--canvas-cool)}
@media (hover:hover){.btn:hover{background:var(--canvas-cool);color:var(--ink);border-color:var(--canvas-cool)}}
.btn:active,.qbar:active{transform:scale(.97)}
.btn[aria-busy="true"]{cursor:progress;opacity:.6}
.btn .chev{width:11px;height:11px;flex:none;transition:transform .28s ease}
.btn:hover .chev{transform:translateX(3px)}
.btn--light{border-color:var(--ink);color:var(--ink)}
.btn--light:focus-visible{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}
@media (hover:hover){.btn--light:hover{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}}
.btn--fill{background:var(--canvas-cool);color:var(--ink);border-color:var(--canvas-cool)}
.btn--fill:focus-visible{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}
@media (hover:hover){.btn--fill:hover{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}}

/* Secondary action is a link, never a second pill. DESIGN.md allows one ghost
   pill per band, and link-on-dark is the system own inline link. */
.tlink{
  display:inline-flex;align-items:center;gap:var(--s-xs);
  color:var(--on-primary);text-decoration:underline;text-underline-offset:5px;
  font-size:13.008px;font-weight:700;letter-spacing:1.17px;text-transform:uppercase;
  min-height:44px;
}
.tlink:hover{text-decoration-thickness:2px}
.tlink .chev{width:10px;height:10px;flex:none;transition:transform .28s ease}
.tlink:hover .chev{transform:translateX(3px)}
.tlink--light{color:var(--ink)}

/* ----------------------------------------------------------------- nav --- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:var(--s-xl);
  padding:var(--s-xl) var(--s-xxl);
  background:transparent;
  transition:background-color .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(0,0,0,.92);border-bottom-color:var(--hairline-on-dark)}
.nav__brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--on-primary);
}
/* The lockup is artwork, not type: both halves inherit currentColor and are
   sized by height. 30px is the floor for the emblem — its inner geometry
   closes up below roughly 28px. See ../../../logo.md. */
.nav__mark{height:30px;width:auto;flex:none}
.nav__word{height:15px;width:auto;flex:none}
.foot .nav__mark{height:34px}
.foot .nav__word{height:17px}
.nav__links{display:flex;align-items:center;gap:var(--s-xl);margin-left:auto}
.nav__links a{
  text-decoration:none;font-size:12px;line-height:2;letter-spacing:.96px;
  text-transform:uppercase;padding:6px 0;position:relative;color:var(--on-primary-mute);
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--on-primary)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
/* Scroll-spy (main.js) marks the section on screen, so the nav says where you are. */
.nav__links a[aria-current]{color:var(--on-primary)}
.nav__side{display:flex;align-items:center;gap:var(--s-md)}
.nav .btn{padding:12px 20px;min-height:44px;white-space:nowrap}
.nav__quote,.qbar{display:none}

.lang{display:flex;align-items:center;border:1px solid var(--hairline-on-dark);border-radius:var(--r-pill);overflow:hidden}
.lang button{
  background:transparent;border:0;cursor:pointer;
  padding:9px 13px;font-size:12px;font-weight:700;letter-spacing:.96px;
  text-transform:uppercase;color:var(--on-primary-mute);min-height:44px;
  transition:background-color .2s ease,color .2s ease;
}
.lang button[aria-pressed="true"]{background:var(--on-primary);color:var(--ink)}

.burger{display:none;position:relative;background:transparent;border:1px solid var(--hairline-on-dark);border-radius:var(--r-pill);width:46px;height:46px;cursor:pointer;padding:0;place-items:center}
/* Bars are pinned to the centre and offset by transform only, so the open
   state rotates all three about the same point and meets as a clean cross. */
.burger span{position:absolute;left:50%;top:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;background:var(--on-primary);transition:transform .28s ease,opacity .2s ease}
.burger span:nth-child(1){transform:translateY(-5.5px)}
.burger span:nth-child(3){transform:translateY(5.5px)}
.nav.is-open .burger span:nth-child(1){transform:rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:rotate(-45deg)}

/* ---------------------------------------------------------------- band --- */
/* Level 1 depth = photography. No shadows anywhere in this system. */
.band{position:relative;isolation:isolate;overflow:hidden}
.band--full{min-height:100svh;display:grid;align-items:end}
.band--tall{min-height:88svh;display:grid;align-items:center}
.band__media{position:absolute;inset:0;z-index:-1}
.band__media img{width:100%;height:100%;object-fit:cover}
/* Grain sits on the image layer, not on the canvas — it is part of the
   photograph, not a scrim. One 128px tile, repeated by the compositor. */
.band__media::after,.cert__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/grain.png") repeat 0 0;opacity:.55;
}
/* Footage is graded, not scrimmed: the filter darkens the picture itself so
   the headline reads, the way the design system asks. */
.band__media video,.cert__media video{width:100%;height:100%;object-fit:cover}
.band__media--grade video{filter:brightness(.5) saturate(.85) contrast(1.08)}
.hero .band__media--grade video{filter:brightness(.82) contrast(1.05)}
.band__credit{
  position:absolute;right:var(--s-xxl);bottom:26px;z-index:1;margin:0;
  font-size:12px;line-height:1.6;letter-spacing:.96px;text-transform:uppercase;
  color:rgba(240,240,250,.8);
}
.band__credit::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
.band__body{width:100%;max-width:var(--shell);margin-inline:auto;padding:var(--s-huge) var(--s-xxl) 96px}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s-xxl)}

.section{padding-block:96px;background:var(--canvas-night-soft);border-top:1px solid var(--hairline-on-dark)}
.section--night{background:var(--canvas-night)}
.section__head{margin-bottom:var(--s-huge);max-width:var(--shell)}
.section__head .lead{margin-top:var(--s-xl)}
.section__sub{margin-top:var(--s-sm);font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute)}

/* ---------------------------------------------------------------- hero --- */
.hero .band__body{padding-bottom:120px}
.hero__h1{margin:0;font:inherit}
.hero__h1 > span{display:block}
.hero__title{max-width:16ch}
.hero__sub{margin-top:var(--s-xl);max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-xl);margin-top:var(--s-huge)}
.hero__note{margin-top:var(--s-md);font-size:12px;line-height:2;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute)}
.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-xs);
  font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute);
}
.hero__scroll i{display:block;width:1px;height:36px;background:linear-gradient(var(--on-primary),transparent);animation:drop 2.4s ease-in-out 4}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* --------------------------------------------------------- motion toggle --- */
/* Every looping background video can be paused (WCAG 2.2.2). One button per
   band, all bound to the same switch; main.js inserts them. */
.motion{
  position:absolute;left:var(--s-xxl);bottom:22px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.5);border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary);
  cursor:pointer;transition:background-color .2s ease,color .2s ease;
}
.motion:focus-visible{background:var(--on-primary);color:var(--ink)}
@media (hover:hover){.motion:hover{background:var(--on-primary);color:var(--ink)}}
.motion svg{width:10px;height:12px;flex:none}
.motion .i-play{display:none}
.motion[aria-pressed="true"] .i-play{display:block}
.motion[aria-pressed="true"] .i-pause{display:none}

/* --------------------------------------------------------------- proof --- */
.proof{background:var(--canvas-night);border-top:1px solid var(--hairline-on-dark);border-bottom:1px solid var(--hairline-on-dark)}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof__cell{padding:var(--s-xxl) var(--s-xl);border-left:1px solid var(--hairline-on-dark)}
.proof__cell:first-child{border-left:0}
.proof__val{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;letter-spacing:1px;text-transform:uppercase}
.proof__val small{font-size:15px;letter-spacing:.96px;color:var(--on-primary-mute)}
.proof__key{margin-top:var(--s-sm);font-size:12px;line-height:1.6;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute)}

/* ------------------------------------------------------------- compare --- */
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline-on-dark)}
.compare__col{border-left:1px solid var(--hairline-on-dark);display:flex;flex-direction:column}
.compare__col:first-child{border-left:0}
.compare__shot{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--hairline-on-dark);position:relative}
.compare__shot img,.compare__shot video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.compare__col:hover .compare__shot img,.compare__col:hover .compare__shot video{transform:scale(1.045)}
.compare__tag{position:absolute;left:var(--s-md);top:var(--s-md);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);padding:6px 14px;font-size:12px;letter-spacing:.96px;text-transform:uppercase}
.compare__hd{
  position:absolute;right:var(--s-md);bottom:var(--s-md);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.96px;text-transform:uppercase;cursor:pointer;
  transition:background-color .24s ease,color .24s ease;
}
.compare__hd:hover,.compare__hd:focus-visible{background:var(--on-primary);color:var(--ink)}
.compare__txt{padding:var(--s-xxl);display:flex;flex-direction:column;gap:var(--s-md);flex:1}
.compare__list{display:flex;flex-direction:column;gap:var(--s-sm);margin-top:var(--s-xs)}
.compare__list li{display:flex;gap:var(--s-sm);font-size:16px;line-height:1.5;color:var(--on-primary-mute)}
.compare__list li::before{content:"—";flex:none;color:var(--hairline-on-dark)}
.compare__when{margin-top:auto;padding-top:var(--s-xl);border-top:1px solid var(--hairline-on-dark);font-size:15px;line-height:1.5;letter-spacing:0;color:var(--on-primary-mute)}
.compare__when b{color:var(--on-primary);font-weight:700}

/* ---------------------------------------------------------------- work --- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin-bottom:var(--s-xxl)}
.filters button{
  background:transparent;border:1px solid var(--hairline-on-dark);border-radius:var(--r-pill);
  padding:11px 20px;cursor:pointer;color:var(--on-primary-mute);min-height:44px;
  font-size:12px;font-weight:700;letter-spacing:.96px;text-transform:uppercase;
  transition:background-color .24s ease,color .24s ease,border-color .24s ease;
}
.filters button:hover{border-color:var(--on-primary);color:var(--on-primary)}
.filters button[aria-pressed="true"]{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)}

/* Tilted carousel, after vii120's CodePen "tilted carousel" (VYmmdMK), rebuilt
   without React/Motion. Each card sits in its own perspective and turns about
   its centre by its distance from the active card; the track slides so the
   active card is centred. Kept 16:9 instead of the pen's portrait 3:4.
   Without JS (.tilt lacks .is-on) the stage is a plain snap scroller. */
.tilt{--tw:clamp(280px,46vw,640px)}
.tilt__stage{
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:var(--s-xs) var(--s-xxl) var(--s-md);
}
.tilt__stage::-webkit-scrollbar{display:none}
.tilt__track{display:flex;gap:var(--s-md);width:max-content}
.work__item{flex:none;width:var(--tw);margin:0;scroll-snap-align:center}
.work__item[hidden]{display:none}
.work__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-sm);
  background:var(--canvas-night);outline:1px solid var(--hairline-on-dark);outline-offset:-1px}
.work__vid{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease}
.work__open{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--on-primary)}
.work__open:focus-visible{outline-offset:-4px}
.work__meta{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-top:var(--s-lg);text-align:center;pointer-events:none}
.work__meta .k{font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:rgba(240,240,250,.75);margin-bottom:2px}
.work__meta .t{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.8px;text-transform:uppercase}
.work__meta .c{font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute)}
.work__item .play{
  width:56px;height:56px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;
  opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s ease,background-color .3s ease;
}
.work__item .play svg{margin-left:3px}
.work__media:hover .play,.work__media:focus-within .play{opacity:1;transform:none}
.work__open:hover .play,.work__open:focus-visible .play{background:rgba(255,255,255,.14)}
@media (hover:none){.work__item .play{opacity:.85;transform:none;width:48px;height:48px}}
/* The card that opens the player says so without needing a hover. */
.tilt.is-on .work__item.is-active .play{opacity:.9;transform:none}

/* JS on: 3D mode. The stage bleeds to the viewport edges and fades them out;
   --rot, --sc and --fade are set per card by main.js. */
.tilt.is-on .tilt__stage{
  overflow:hidden;scroll-snap-type:none;padding-inline:0;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
/* All cards share one grid cell, so the track takes the card height, and
   each slides out to its own --x from the centre. */
.tilt.is-on .tilt__track{display:grid;justify-items:center;width:auto;gap:0}
.tilt.is-on .work__item{
  grid-area:1/1;perspective:calc(var(--tw) * 3);
  transform:translate3d(var(--x,0),0,0);transition:transform .85s cubic-bezier(.3,1.18,.45,1);
}
.tilt.is-on .work__card{
  transform:rotateY(var(--rot,0deg)) scale(var(--sc,1));opacity:var(--fade,1);
  transition:transform 1s cubic-bezier(.3,1.1,.4,1),opacity .6s ease;
  will-change:transform;
}
.tilt.is-on .work__item:not(.is-active) .work__vid{filter:brightness(.55) saturate(.8)}
.tilt.is-on .work__item:not(.is-active) .play{opacity:0}
.tilt.is-on .work__item.is-active .work__media:hover .work__vid,
.tilt.is-on .work__item.is-active.is-playing .work__vid{transform:scale(1.04)}
.tilt.is-on .work__meta{opacity:0;filter:blur(4px);transition:opacity .5s ease,filter .5s ease}
.tilt.is-on .work__item.is-active .work__meta{opacity:1;filter:none}

.tilt__ctrl{display:none}
.tilt.is-on .tilt__ctrl{
  display:flex;align-items:center;gap:var(--s-xs);width:fit-content;
  margin:var(--s-xxl) auto 0;padding:3px;
  border:1px solid var(--hairline-on-dark);border-radius:var(--r-pill);
}
.tilt__arrow{
  width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;
  background:transparent;border:0;border-radius:var(--r-full);color:var(--on-primary);cursor:pointer;
  transition:background-color .2s ease,opacity .2s ease;
}
.tilt__arrow svg{width:12px;height:12px}
.tilt__arrow:hover{background:rgba(255,255,255,.1)}
.tilt__arrow:disabled{opacity:.3;cursor:default;background:transparent}
.tilt__dots{display:flex;align-items:center;padding-inline:var(--s-xs)}
/* The visible dot is 8px; the button around it keeps a usable target. */
.tilt__dot{display:grid;place-items:center;height:44px;padding:0 8px;background:transparent;border:0;cursor:pointer}
.tilt__dot::before{
  content:"";display:block;width:8px;height:8px;border-radius:var(--r-full);
  background:rgba(240,240,250,.45);transition:width .3s ease,background-color .3s ease;
}
.tilt__dot:hover::before{background:rgba(240,240,250,.6)}
.tilt__dot[aria-current="true"]::before{width:28px;background:var(--on-primary)}
.tilt__dot:focus-visible{outline-offset:-8px}
/* Small screens swap the dots for a plain counter: eight 24px targets plus
   two arrows do not fit 320px. */
.tilt__count{display:none;min-width:6ch;text-align:center;font-size:12px;font-weight:700;letter-spacing:.96px;color:var(--on-primary-mute)}
@media (max-width:479px){.tilt.is-on .tilt__dots{display:none}.tilt.is-on .tilt__count{display:block}}

@media (prefers-reduced-motion:reduce){
  .tilt.is-on .work__item,.tilt.is-on .work__card{transition-duration:.01s}
}

/* ------------------------------------------------------------ lightbox --- */
.lb{
  width:min(1280px,100vw - 32px);max-width:none;max-height:calc(100svh - 32px);
  padding:0;border:1px solid var(--hairline-on-dark);border-radius:var(--r-xs);
  background:var(--canvas-night);color:var(--on-primary);overflow:hidden;
}
.lb::backdrop{background:rgba(0,0,0,.9)}
.lb[open]{animation:lbIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes lbIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);
  padding:var(--s-sm) var(--s-sm) var(--s-sm) var(--s-xl);border-bottom:1px solid var(--hairline-on-dark)}
.lb__title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.8px;text-transform:uppercase}
.lb__close{display:grid;place-items:center;width:44px;height:44px;background:transparent;cursor:pointer;
  border:1px solid var(--hairline-on-dark);border-radius:var(--r-full);transition:background-color .2s ease,color .2s ease}
.lb__close:hover,.lb__close:focus-visible{background:var(--on-primary);color:var(--ink)}
.lb__video{width:100%;aspect-ratio:16/9;max-height:calc(100svh - 32px - 70px);background:#000;object-fit:contain}

/* ------------------------------------------------------------ packages --- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hairline-on-dark)}
.pkgs--2{grid-template-columns:repeat(2,1fr)}
.pkg{padding:var(--s-huge) var(--s-xxl);border-left:1px solid var(--hairline-on-dark);display:flex;flex-direction:column;gap:var(--s-xl)}
.pkg:first-child{border-left:0}
.pkg--flag{background:var(--canvas-night)}
.pkg__badge{align-self:flex-start;border:1px solid var(--on-primary);border-radius:var(--r-pill);padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.96px;text-transform:uppercase}
.pkg__price{font-variant-numeric:tabular-nums;font-family:var(--font-display);font-weight:700;font-size:var(--display-lg);line-height:1;letter-spacing:.96px}
.pkg__price sup{font-size:17px;vertical-align:super;letter-spacing:.96px}
.pkg__from{font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute);display:block;margin-bottom:var(--s-sm)}
.pkg__inc{display:flex;flex-direction:column;gap:var(--s-sm)}
.pkg__inc li{display:flex;gap:var(--s-sm);font-size:16px;line-height:1.5;color:var(--on-primary-mute)}
.pkg__inc li svg{width:12px;height:12px;flex:none;margin-top:6px;color:var(--on-primary)}
.pkg__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-md)}
.pkg__note{font-size:15px;line-height:1.5;letter-spacing:0;color:var(--on-primary-mute)}
.pkgs__after{display:flex;flex-wrap:wrap;gap:var(--s-xl);justify-content:space-between;align-items:center;
  border:1px solid var(--hairline-on-dark);border-top:0;padding:var(--s-xl) var(--s-xxl)}

/* ------------------------------------------------------------- process --- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hairline-on-dark)}
.step{padding:var(--s-huge) var(--s-xl);border-left:1px solid var(--hairline-on-dark);display:flex;flex-direction:column;gap:var(--s-md)}
.step:first-child{border-left:0}
.step__n{font-family:var(--font-display);font-weight:700;font-size:var(--display-lg);line-height:1;letter-spacing:.96px;color:var(--ink-dim)}
.step .caption{font-size:15px}
.step__d{margin-top:auto;padding-top:var(--s-md);font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute)}

/* ---------------------------------------------------------------- cert --- */
.cert{position:relative;isolation:isolate;border-top:1px solid var(--hairline-on-dark);overflow:hidden}
.cert__media{position:absolute;inset:0;z-index:-1}
.cert__media img{width:100%;height:100%;object-fit:cover}
.cert__media video{filter:brightness(.3) saturate(.5)}
.cert__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-huge);padding-block:96px}
.spec{border-top:1px solid var(--hairline-on-dark)}
.spec tr{border-bottom:1px solid var(--hairline-on-dark)}
.spec th,.spec td{padding:var(--s-md) 0;text-align:left;vertical-align:top}
.spec th{font-size:12px;font-weight:400;line-height:1.6;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute);width:44%;padding-right:var(--s-md)}
.spec td{font-size:16px;line-height:1.5}
.spec td b{font-family:var(--font-display);font-weight:700;letter-spacing:.8px}

/* --------------------------------------------------------- testimonials --- */
/* Card grid rather than the old three-up rule-divided block, so the list can
   grow past three without the layout deciding how many there are. */
.section__head--mid{text-align:center;display:flex;flex-direction:column;align-items:center}
.fb__lead{margin-inline:auto}
/* The notice is a claim about the content's truthfulness, so it is styled to
   be read, not skipped: boxed, full contrast, never a muted footnote. */
.fb__notice{
  margin:var(--s-xl) auto 0;max-width:60ch;text-align:left;
  border:1px solid var(--on-primary);border-radius:var(--r-xs);
  padding:var(--s-sm) var(--s-md);
  font-size:13.008px;line-height:1.5;letter-spacing:0;
}
.fb__notice b{font-family:var(--font-display);letter-spacing:.8px;text-transform:uppercase}

.fb{position:relative}
.fb__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-md);margin:0}
/* Clamp height only once JS can offer the way out of it. */
.fb.is-clamped .fb__grid{max-height:720px;overflow:hidden}

.fb__card{
  display:flex;flex-direction:column;gap:var(--s-md);
  padding:var(--s-xl);
  border:1px solid var(--hairline-on-dark);border-radius:var(--r-xs);
  background:var(--canvas-night-soft);
}
.fb__who{display:flex;align-items:center;gap:var(--s-sm)}
/* Monogram instead of a photograph: the people are invented, so a portrait
   would dress fiction up as a record. Initials say "placeholder" honestly. */
.fb__avatar{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--hairline-on-dark);border-radius:var(--r-full);
  font-family:var(--font-display);font-size:14px;letter-spacing:.8px;
  color:var(--on-primary-mute);
}
.fb__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.fb__id b{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:.8px;color:var(--on-primary);
}
.fb__role{font-size:13.008px;line-height:1.4;letter-spacing:0;color:var(--on-primary-mute)}
.fb__card blockquote{margin:0;font-size:16px;line-height:1.7;letter-spacing:.32px}

/* Fade + button sit over the clipped edge, matching the source component.
   Being positioned is what puts them above the static cards — no z-index, and
   emphatically not a negative one, which would drop the fade behind the very
   cards it is meant to dim. The layer is click-through except the button. */
.fb__more{position:absolute;inset:auto 0 0 0;display:grid;place-items:center;padding-top:96px;pointer-events:none}
.fb__more .btn{pointer-events:auto}
.fb.is-clamped .fb__more::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--canvas-night),transparent);
}
.fb:not(.is-clamped) .fb__more{position:static;padding-top:var(--s-xl)}

/* ----------------------------------------------------------------- faq --- */
.faq{border-top:1px solid var(--hairline-on-dark);max-width:920px}
.faq details{border-bottom:1px solid var(--hairline-on-dark)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s-xl) 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-xl);
  font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.35;
  letter-spacing:.4px;min-height:56px;transition:color .2s ease;
}
/* Questions are full sentences: set in sentence case, because long runs of
   capitals read markedly slower. The display face keeps them on-brand. */
@media (hover:hover){
  .faq summary:hover{color:var(--on-primary-mute)}
  .faq details:not([open]) summary:hover::after{transform:rotate(45deg) translate(2px,2px)}
}
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;
    transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:13px;height:13px;margin-top:6px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .a{padding:0 0 var(--s-xl);max-width:72ch;color:var(--on-primary-mute);line-height:1.7}
.faq .a a{color:var(--on-primary);text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------- contact --- */
/* Light canvas: the DESIGN.md shop surface, used here for the one screen that
   is a form rather than a photograph. */
/* The one light band: switch the scheme too, so native controls (the select
   popup, the textarea scrollbar) render light instead of dark-on-white. */
.on-light{color-scheme:light;background:var(--canvas-light);color:var(--ink)}
.on-light .eyebrow,.on-light .lead{color:var(--ink-mute)}
.contact__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-huge);padding-block:96px}
.form{display:grid;gap:var(--s-xl)}
.field{display:flex;flex-direction:column;gap:var(--s-xs)}
.field label{font-size:12px;line-height:2;letter-spacing:.96px;text-transform:uppercase;color:var(--ink-mute)}
.field label .req{color:var(--ink)}
.field input,.field select,.field textarea{
  background:var(--canvas-light);color:var(--ink);
  border:1px solid var(--field-border);border-radius:var(--r-xs);
  padding:var(--s-sm) var(--s-md);min-height:48px;width:100%;
  font-size:16px;line-height:1.5;letter-spacing:.32px;
  transition:border-color .2s ease;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--error);border-width:2px}
/* Errors carry text and a glyph, not colour alone; red is 7:1 on white. */
.field .err{font-size:14px;line-height:1.5;letter-spacing:0;color:var(--error);font-weight:700}
.field .err:empty{display:none}
.field .err::before{content:"\26A0\FE0E  "}
.field .hint{font-size:14px;line-height:1.5;letter-spacing:0;color:var(--ink-mute)}
.form__req{font-size:13px;line-height:1.5;color:var(--ink-mute)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-xl)}
.form__status{border:1px solid var(--ink);border-radius:var(--r-xs);padding:var(--s-md);font-size:13.008px;line-height:1.5}
.form__status[hidden]{display:none}
.contact__aside dl{display:grid;border-top:1px solid var(--hairline-on-light);margin-top:var(--s-xl)}
.contact__aside dt{font-size:12px;letter-spacing:.96px;text-transform:uppercase;color:var(--ink-mute);padding-top:var(--s-md)}
.contact__aside dd{margin:0;padding-bottom:var(--s-md);border-bottom:1px solid var(--hairline-on-light);
  font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.8px;text-transform:uppercase}
.contact__aside dd a{text-decoration:underline;text-underline-offset:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- foot --- */
.foot{background:var(--canvas-night);border-top:1px solid var(--hairline-on-dark);padding:var(--s-xxl) var(--s-xl)}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-huge);max-width:var(--shell);margin-inline:auto;padding-inline:var(--s-md)}
.foot h2,.foot h3{font-size:12px;line-height:2;letter-spacing:.96px;text-transform:uppercase;color:var(--on-primary-mute);font-weight:400;margin-bottom:var(--s-sm)}
.foot ul{display:flex;flex-direction:column;gap:var(--s-xs)}
.foot ul a{display:inline-block;padding-block:4px;font-size:14px;line-height:1.5;letter-spacing:0;text-decoration:none;color:var(--on-primary)}
.foot ul a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__legal{max-width:var(--shell);margin:var(--s-huge) auto 0;padding:var(--s-xl) var(--s-md) 0;border-top:1px solid var(--hairline-on-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-xl);justify-content:space-between;
  font-size:13.008px;line-height:1.5;color:var(--on-primary-mute)}

/* -------------------------------------------------------------- reveal --- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ============================================================ responsive === */
/* Display stair-steps 80 -> 60 -> 48 -> 40, per DESIGN.md. */
@media (max-width:1279px){
  :root{--shell:1040px}
}
@media (max-width:960px){
  :root{--display-xxl:60px;--display-xl:48px;--display-lg:36px}
  .nav{padding:var(--s-md) var(--s-xl)}
  .compare{grid-template-columns:1fr}
  .compare__col{border-left:0;border-top:1px solid var(--hairline-on-dark)}
  .compare__col:first-child{border-top:0}
  .pkgs,.quotes{grid-template-columns:1fr}
  .pkg,.quote{border-left:0;border-top:1px solid var(--hairline-on-dark)}
  .pkg:first-child,.quote:first-child{border-top:0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(odd){border-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--hairline-on-dark)}
  .cert__grid,.contact__grid{grid-template-columns:1fr;gap:var(--s-xxl);padding-block:72px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--s-xxl)}
  .proof__grid{grid-template-columns:1fr 1fr}
  .proof__cell:nth-child(odd){border-left:0}
  .proof__cell:nth-child(n+3){border-top:1px solid var(--hairline-on-dark)}
}
/* Nav collapses on its own schedule: the five items plus the CTA stop fitting
   around 900px, well before the type stair-steps. */
@media (max-width:1150px){
  .nav{gap:var(--s-md);padding-inline:var(--s-xl)}
  .nav__links{gap:var(--s-lg)}
}
@media (max-width:900px){
  :root{--nav-h:70px}
  /* Two up. The clamp grows with it, otherwise six cards in two columns get
     cut mid-card and the fade hides a card that was meant to be visible. */
  .fb__grid{grid-template-columns:repeat(2,1fr)}
  .fb.is-clamped .fb__grid{max-height:980px}
  .burger{display:grid}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;margin:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--canvas-night);border-bottom:1px solid var(--hairline-on-dark);
    padding:var(--s-md) var(--s-xl) var(--s-xxl);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
  }
  .nav.is-open{background:var(--canvas-night)}
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{width:100%;padding:var(--s-md) 0;font-size:15px;border-bottom:1px solid var(--hairline-on-dark)}
  .nav__links a::after{display:none}
  .nav__side{margin-left:auto}
  .nav .btn--nav{display:none}
  .nav__links a.nav__quote{
    display:flex;justify-content:center;width:100%;margin-top:var(--s-xl);
    padding:var(--s-lg) var(--s-xl);font-size:13.008px;border-bottom:1px solid var(--canvas-cool);
    color:var(--ink);
  }

  /* Sticky quote bar. Hidden (and out of the tab order) until JS turns it on
     past the hero; it steps aside while the contact band is on screen. */
  .qbar{
    position:fixed;left:var(--s-md);right:var(--s-md);z-index:90;
    bottom:calc(var(--s-md) + env(safe-area-inset-bottom,0px));
    display:flex;justify-content:center;align-items:center;gap:var(--s-sm);
    min-height:52px;padding:var(--s-md) var(--s-xl);
    background:var(--canvas-cool);color:var(--ink);
    border:1px solid var(--canvas-cool);border-radius:var(--r-pill);
    font-size:13.008px;font-weight:700;line-height:.94;letter-spacing:1.17px;
    text-transform:uppercase;text-decoration:none;
    visibility:hidden;opacity:0;transform:translateY(12px);
    transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
  }
  .qbar .chev{width:11px;height:11px;flex:none}
  .qbar.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}
  body:has(.nav.is-open) .qbar{visibility:hidden;opacity:0}
  /* Keyboard focus and anchor jumps stop short of the sticky bar (WCAG 2.4.11). */
  html{scroll-padding-bottom:88px}
}
@media (max-width:767px){
  :root{--display-xxl:48px;--display-xl:40px;--display-lg:32px;--nav-h:66px}
  .fb__grid{grid-template-columns:1fr}
  .fb.is-clamped .fb__grid{max-height:760px}
  .fb__notice{text-align:left}
  /* Art direction: on a tall narrow crop, favour the horizon rather than
     the empty upper sky. Mirrors the srcset crops DESIGN.md calls for. */
  .band__media img{object-position:50% 72%}
  .band__body{padding:var(--s-xxl) var(--s-xl) 88px}
  .band__credit{right:auto;left:var(--s-xl);bottom:var(--s-md)}
  .hero .band__credit{display:none}
  .motion{left:auto;right:var(--s-xl);bottom:var(--s-md)}
  .lb__bar{padding-left:var(--s-md)}
  .shell{padding-inline:var(--s-xl)}
  .section{padding-block:64px}
  .form__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:var(--s-xl)}
  .pkg,.quote,.step,.compare__txt{padding:var(--s-xxl) var(--s-xl)}
  .tilt{--tw:78vw}
  .tilt__stage{padding-inline:var(--s-xl)}
}
@media (max-width:599px){
  :root{--display-xxl:40px;--display-xl:34px;--display-lg:28px}
  .steps{grid-template-columns:1fr}
  .step{border-left:0;border-top:1px solid var(--hairline-on-dark)}
  .step:first-child{border-top:0}
  .proof__grid{grid-template-columns:1fr}
  .proof__cell{border-left:0;border-top:1px solid var(--hairline-on-dark)}
  .proof__cell:first-child{border-top:0}
  .proof__val{font-size:32px}
  .hero__cta{gap:var(--s-md)}
  .hero__cta .btn{width:100%;justify-content:center}
}
/* Small phones: the lockup, the FR/EN switch and the burger must share
   ~330px. Tighten spacing before shrinking the wordmark; the emblem keeps
   its 30px floor from ../logo.md. */
@media (max-width:400px){
  .nav{padding-inline:var(--s-md);gap:var(--s-sm)}
  .nav__brand{gap:8px}
  .nav__word{height:12px}
  .nav__side{gap:var(--s-xs)}
  .lang button{padding:9px 10px}
  .burger{width:44px;height:44px}
}

/* --------------------------------------------------------------- print --- */
@media print{
  .nav,.hero__scroll,.filters,.play,.band__credit,.compare__hd,.lb,.qbar,.motion,.tilt__ctrl{display:none !important}
  body{background:#fff;color:#000}
  .band,.section,.proof,.foot{background:#fff !important;color:#000 !important;min-height:0}
  .band__media,.cert__media{display:none}
}