/* ==========================================================================
   P&C Façade
   Built on the "Classical" design system: Cormorant Garamond over Lora,
   hairline rules, colour as stroke rather than fill, photographs matted
   in .plate. Section 1 is the vendored token sheet — do not hard-code a
   hex, a font or a px value the tokens already carry.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-text:#201f1d;
  --color-accent:#b68235;
  --color-divider:color-mix(in srgb,#201f1d 16%,transparent);

  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6; --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;

  --color-accent-100:#fff3e4; --color-accent-200:#ffe3bf; --color-accent-300:#facb8d;
  --color-accent-400:#e1ad66; --color-accent-500:#c28d41; --color-accent-600:#a06f24;
  --color-accent-700:#7d5411; --color-accent-800:#5a3b0a; --color-accent-900:#3a270d;

  --font-heading:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-heading-weight:600;
  --font-body:"Lora",Georgia,"Times New Roman",serif;

  --space-1:4.6px; --space-2:9.2px; --space-3:13.8px;
  --space-4:18.4px; --space-6:27.6px; --space-8:36.8px;

  --radius-sm:2px; --radius-md:4px; --radius-lg:7px;

  --shadow-sm:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);

  /* page frame */
  --measure:1140px;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--space-2);
}
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px} h4{font-size:20px}
p{margin:0 0 var(--space-3)}
img{display:block;max-width:100%}
figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
a{color:var(--color-accent-700);text-underline-offset:3px}
a:hover{color:var(--color-accent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:var(--color-accent-200)}
button,input,select,textarea{font:inherit;color:inherit}

.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--color-text);color:var(--color-bg);padding:var(--space-2) var(--space-4)}
.skip-link:focus{left:0}

.hr{height:1px;border:0;margin:var(--space-4) 0;background:var(--color-divider)}
.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--space-6)}

/* Numerals set tabular wherever they stand as figures, never in running prose. */
.tnum{font-feature-settings:'tnum'}

/* ── 3. Buttons and tags ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid transparent;
  padding:11px 20px;border-radius:var(--radius-md);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{color:var(--color-accent);border-color:var(--color-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}
.btn-primary:active{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.btn-secondary{border-color:var(--color-divider);color:var(--color-text)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent);color:var(--color-text)}
.btn-secondary:active{background:color-mix(in srgb,var(--color-text) 14%,transparent)}

.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:calc(var(--radius-md)*.75)}
.tag-outline{border:1px solid var(--color-accent);color:var(--color-accent)}

/* ── 4. Forms ──────────────────────────────────────────────────────────── */
.field>label{display:block;font-size:12px;margin-bottom:5px;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.input{
  width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;
  color:var(--color-text);caret-color:var(--color-accent);background:transparent;
  border:1px solid var(--color-divider);border-radius:var(--radius-md);
}
.input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea.input{min-height:90px;resize:vertical}
.field.is-invalid .input{border-color:#8c2f1d}
.form-note{font-size:13px;margin:0}
.form-note.is-ok{color:var(--color-accent-800)}
.form-note.is-err{color:#8c2f1d}

/* ── 5. Cards ──────────────────────────────────────────────────────────── */
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:transparent;border:1px solid var(--color-divider)}
.card-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.card-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:20px;line-height:1.2;margin:0}
.card-body{margin:0;font-size:14px;line-height:1.7;opacity:.8;flex:1}

/* ── 6. Plate — every content photograph goes through it ───────────────── */
/* Les photographies du site sont des prises de chantier, pas des images de
   catalogue : une seule étalonnage, assez légère pour qu'une tuile reste
   terre cuite et une ardoise reste noire, assez présente pour que la page
   ne devienne pas un album disparate. .shot, plus bas, reprend la même. */
.plate{
  filter:sepia(.10) saturate(.94) contrast(1.03);
  box-sizing:border-box;
  border:6px solid var(--color-surface);
  outline:1px solid var(--color-divider);
  position:relative;overflow:hidden;
}

/* ── 7. Header ─────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:20;background:var(--color-bg);border-bottom:1px solid var(--color-divider)}
.site-header__inner{max-width:var(--measure);margin:0 auto;padding:var(--space-3) var(--space-6);display:flex;align-items:baseline;gap:var(--space-6)}
.brand{
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:21px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);
  text-decoration:none;margin-right:auto;
}
.brand:hover{color:var(--color-text)}
.nav{display:flex;gap:var(--space-6);align-items:baseline}
.nav a{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--color-text);padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--color-accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--color-accent)}

.nav-toggle{display:none;align-self:center;width:38px;height:32px;padding:0;background:transparent;border:1px solid var(--color-divider);border-radius:var(--radius-md);cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1px;margin:3px auto;background:var(--color-text);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

/* ── 8. Editorial primitives ───────────────────────────────────────────── */
.kicker{
  font-family:var(--font-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-accent-700);margin:0 0 var(--space-4);font-feature-settings:'tnum';
}
.kicker--sm{font-size:11px;letter-spacing:.14em;margin-bottom:var(--space-2)}
.prose{font-size:17px;line-height:1.75;text-align:justify;hyphens:auto;text-wrap:pretty}
.prose--sm{font-size:15px;line-height:1.7}
.page-title{font-weight:400;font-size:54px;margin:0 0 var(--space-4)}
.sec-title{font-weight:400;font-size:34px;margin:0 0 var(--space-6)}
.rule-top{border-top:1px solid var(--color-divider);padding-top:var(--space-3)}

/* ── 9. Hero ───────────────────────────────────────────────────────────── */
.hero{
  max-width:var(--measure);margin:0 auto;
  padding:var(--space-8) var(--space-6) var(--space-6);
  display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-8);align-items:end;
}
.hero h1{font-weight:400;font-size:68px;line-height:1.02;margin:0 0 var(--space-4)}
.hero .prose{margin:0 0 var(--space-6);max-width:46ch}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* --------------------------------------------------------------------------
   A content plate is a scrolling background, not a photograph.
   .parallax__layer is overscanned top and bottom so it can slide inside the
   mat without ever exposing an edge; js/main.js translates it against the
   scroll. Swap --plate-image for a real photo and nothing else changes.
   -------------------------------------------------------------------------- */
/* The path lives here, in the stylesheet, because a url() inside a custom
   property resolves against the sheet that substitutes it — not the page. */
.plate--about{--plate-image:url("../assets/equipe.webp")}
.parallax{aspect-ratio:4/5}
.parallax__layer{
  /* top/bottom are set in js/main.js from the real travel distance;
     these are the no-script fallback. */
  position:absolute;top:0;left:0;right:0;bottom:0;
  background-image:var(--plate-image);
  background-size:cover;background-position:center;
  will-change:transform;
}

/* --------------------------------------------------------------------------
   9b. Séquence défilante — the home hero
   A run of numbered images in assets/frames/, one drawn per scroll position.
   The section is tall; the viewport inside it is sticky and one screen high,
   so the film holds still on screen while the page scrolls past it.

   Height is deliberately one screen until js/main.js has a frame on the
   canvas: it then sets --reel-span and the section grows into its scroll
   travel. No script, no frames, no network — the hero is simply a one-screen
   panel over the still image below, and nothing scrolls through nothing.
   -------------------------------------------------------------------------- */
.reel{
  --reel-fade:1;                       /* 1 at the top, 0 once the film runs */
  --reel-still:url("../assets/hero.webp");
  position:relative;
  height:calc(100vh + (var(--reel-span,0) * 100vh));
  height:calc(100svh + (var(--reel-span,0) * 100svh));
  background:var(--color-surface);
  border-bottom:1px solid var(--color-divider);
}
.reel__viewport{
  position:sticky;top:0;z-index:1;
  height:100vh;height:100svh;overflow:hidden;
  background-image:var(--reel-still);background-size:cover;background-position:center;
  filter:sepia(.10) saturate(.94) contrast(1.03);
}
.reel.is-live .reel__viewport{background-image:none}
.reel__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .6s ease;
}
.reel.is-live .reel__canvas{opacity:1}

/* Photographs are not a background for text on their own. */
.reel__scrim{
  position:absolute;inset:0;opacity:var(--reel-fade);
  background:linear-gradient(to top,
    color-mix(in srgb,var(--color-text) 80%,transparent) 0%,
    color-mix(in srgb,var(--color-text) 34%,transparent) 44%,
    transparent 74%);
}

.reel__copy{
  position:absolute;inset-inline:0;bottom:calc(var(--space-8) * 2);
  max-width:var(--measure);margin-inline:auto;padding-inline:var(--space-6);
  color:var(--color-neutral-100);
  opacity:var(--reel-fade);
  transform:translate3d(0,calc((1 - var(--reel-fade)) * -20px),0);
}
.reel__copy .kicker{color:var(--color-accent-300)}
.reel__copy h1{font-weight:400;font-size:clamp(40px,5.4vw,72px);line-height:1.02;margin:0 0 var(--space-4)}
.reel__copy .prose{margin:0 0 var(--space-6);max-width:46ch;opacity:.92}
.reel__copy .btn-primary{color:var(--color-accent-300);border-color:var(--color-accent-300)}
.reel__copy .btn-primary:hover{background:color-mix(in srgb,var(--color-accent-300) 18%,transparent);color:var(--color-accent-200)}
.reel__copy .btn-secondary{color:var(--color-neutral-100);border-color:color-mix(in srgb,var(--color-neutral-100) 45%,transparent)}
.reel__copy .btn-secondary:hover{background:color-mix(in srgb,var(--color-neutral-100) 14%,transparent);color:var(--color-neutral-100)}

/* Tells the visitor the film answers to the scrollbar. */
.reel__hint{
  position:absolute;right:var(--space-6);bottom:var(--space-6);margin:0;
  display:flex;align-items:center;gap:var(--space-2);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-neutral-100);opacity:calc(var(--reel-fade) * .8);
}
.reel__hint::after{
  content:"";width:34px;height:1px;background:currentColor;
  transform-origin:left center;animation:reel-hint 2.4s ease-in-out infinite;
}
@keyframes reel-hint{
  0%,100%{transform:scaleX(.35);opacity:.5}
  50%{transform:scaleX(1);opacity:1}
}

/* One line: the download while it lasts, then the position in the film. */
.reel__progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:color-mix(in srgb,var(--color-neutral-100) 20%,transparent);
}
.reel__bar{
  display:block;height:100%;background:var(--color-accent-300);
  transform:scaleX(0);transform-origin:left center;
}
.reel.is-loading .reel__bar{background:color-mix(in srgb,var(--color-neutral-100) 50%,transparent)}
.reel:not(.is-live) .reel__progress,
.reel.is-still .reel__progress,
.reel.is-still .reel__hint{display:none}

/* ── 10. Three-up service summary ──────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.trio h3{font-size:22px;margin:0 0 var(--space-2)}

/* ── 11. Before / after comparison ─────────────────────────────────────── */
.band{background:var(--color-surface);border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);margin-top:var(--space-8)}
.band__inner{max-width:var(--measure);margin:0 auto;padding:var(--space-8) var(--space-6)}
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.band__head h2{margin:0}
.link-caps{font-size:13px;letter-spacing:.08em;text-transform:uppercase}

.ba{cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.ba__after,.ba__before{position:absolute;inset:0;background-size:cover;background-position:center}
.ba__before{clip-path:inset(0 var(--ba-inset,50%) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--ba-pct,50%);width:1px;background:var(--color-bg);pointer-events:none}
.ba__handle{
  position:absolute;top:50%;left:var(--ba-pct,50%);transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--color-bg);
  background:color-mix(in srgb,var(--color-neutral-900) 55%,transparent);
  display:flex;align-items:center;justify-content:center;gap:5px;
  color:var(--color-bg);font-size:13px;padding:0;cursor:ew-resize;
}
.ba__handle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.ba__tag{
  position:absolute;top:14px;pointer-events:none;
  font-family:ui-monospace,"Courier New",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-bg);
  background:color-mix(in srgb,var(--color-neutral-900) 55%,transparent);padding:2px 6px;
}
.ba__tag--avant{left:16px}
.ba__tag--apres{right:16px}
.ba-caption{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-3);font-size:14px}
.ba-caption>span:first-child{font-family:var(--font-heading);font-size:20px}
.ba-caption>span:last-child{opacity:.6;font-feature-settings:'tnum'}

/* ── 12. Process ───────────────────────────────────────────────────────── */
.process{max-width:var(--measure);margin:0 auto;padding:var(--space-8) var(--space-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.steps{display:grid;gap:var(--space-4)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:var(--space-4);border-top:1px solid var(--color-divider);padding-top:var(--space-3)}
.steps .num{font-family:var(--font-heading);font-size:22px;color:var(--color-accent-700);font-feature-settings:'tnum'}
.steps strong{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:19px;display:block;margin-bottom:3px}
.steps span span{font-size:15px;line-height:1.65;opacity:.85}

/* ── 13. Réalisations ──────────────────────────────────────────────────── */
.projects{display:grid;gap:var(--space-8)}
.project{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-6);align-items:start}
.project h2{font-size:26px;margin:0 0 var(--space-3)}

/* ── 14. Services ──────────────────────────────────────────────────────── */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
.service{border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.service h2{font-size:27px;margin:0 0 var(--space-3)}
.service__detail{font-size:13px;margin:0;opacity:.6}
.closer{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6)}
.closer p{font-family:var(--font-heading);font-size:26px;margin:0;max-width:34ch}

/* ── 15. Qui sommes-nous ───────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-8);align-items:start}
.about__text{font-size:16px;line-height:1.8;text-align:justify;hyphens:auto;max-width:62ch}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.fact__value{font-family:var(--font-heading);font-weight:400;font-size:44px;margin:0 0 var(--space-1);color:var(--color-accent-700);font-feature-settings:'tnum'}
.fact__label{font-size:14px;margin:0;opacity:.75}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}

/* ── 16. Contact ───────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-8);align-items:start}
.contact form{display:grid;gap:var(--space-4)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.submit-row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.aside-block{border-top:1px solid var(--color-divider);padding-top:var(--space-3);margin-bottom:var(--space-6)}
.aside-block:last-child{margin-bottom:0}
.aside-block p{margin:0 0 var(--space-1);font-size:15px;line-height:1.7;opacity:.85}
.aside-block .lead{font-size:18px;font-family:var(--font-heading);opacity:1}

/* ── 17. Footer ────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--color-divider);margin-top:var(--space-8)}
.site-footer__inner{
  max-width:var(--measure);margin:0 auto;padding:var(--space-6);
  display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:baseline;
  justify-content:space-between;font-size:13px;opacity:.75;
}
.site-footer__inner>span:first-child{font-family:var(--font-heading);letter-spacing:.06em;text-transform:uppercase}

/* ── 17b. Chantiers : fiche et galerie ─────────────────────────────────── */
/* Un chantier se lit en deux temps : une vue de tête assez grande pour qu'on
   voie le travail, puis une bande de vignettes qui raconte le déroulé. La
   visionneuse (js/main.js, section 6) n'est qu'un agrandissement : sans
   JavaScript, les vignettes restent des liens vers l'image pleine taille. */
.works{display:grid;gap:calc(var(--space-8) * 1.8)}
.work{scroll-margin-top:90px}
.work__head{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--space-6);align-items:start}
.work__text h2{font-size:28px;margin:0 0 var(--space-3)}
.work__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.work__lead{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* La vue de tête est elle aussi un lien vers sa version pleine taille : le
   lien doit remplir le passe-partout, sans quoi l'image flotte dedans. */
.plate>a{display:block;width:100%;height:100%;line-height:0}
[data-gallery] .plate>a{cursor:zoom-in}

.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2);margin-top:var(--space-4)}
.gallery a{display:block;border:0;padding:0;background:none;cursor:zoom-in;line-height:0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover}
.shot{filter:sepia(.10) saturate(.94) contrast(1.03);border:4px solid var(--color-surface);outline:1px solid var(--color-divider);box-sizing:border-box}
.gallery a:hover .shot,.gallery a:focus-visible .shot{outline-color:var(--color-accent)}

/* Sommaire des chantiers, en tête de page */
.index-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-8);padding:var(--space-3) 0;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.index-links a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--color-text);border-bottom:1px solid transparent}
.index-links a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}

/* ── 17c. Visionneuse ──────────────────────────────────────────────────── */
/* Ajoutée au document par le script, jamais présente dans le HTML : une
   visionneuse vide dans la page serait un piège pour les lecteurs d'écran. */
.lightbox{
  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-3);
  padding:var(--space-6);
  background:color-mix(in srgb,var(--color-neutral-900) 92%,transparent);
}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain}
.lightbox__cap{margin:0;color:var(--color-neutral-200);font-size:14px;text-align:center;max-width:70ch}
.lightbox__count{font-feature-settings:'tnum';opacity:.6;margin-left:var(--space-2)}
.lightbox button{
  position:absolute;background:transparent;border:1px solid color-mix(in srgb,var(--color-neutral-100) 40%,transparent);
  color:var(--color-neutral-100);width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
}
.lightbox button:hover{background:color-mix(in srgb,var(--color-neutral-100) 16%,transparent)}
.lightbox__prev{left:var(--space-4)}
.lightbox__next{right:var(--space-4)}
.lightbox__close{top:var(--space-4);right:var(--space-4)}
body.is-locked{overflow:hidden}

/* ── 18. Motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .parallax__layer{transform:none !important}
  /* js/main.js already leaves --reel-span unset here, so the hero stays one
     screen tall and holds the first frame. Only the hint still moves. */
  .reel__hint::after{animation:none;transform:scaleX(1)}
}

/* ── 19. Responsive ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--space-6);align-items:start}
  .hero h1{font-size:clamp(38px,8vw,56px)}
  .reel__copy{bottom:calc(var(--space-8) * 1.4)}
  .reel__copy h1{font-size:clamp(34px,8vw,54px)}
  .reel__hint{display:none}
  .parallax{aspect-ratio:3/2}
  .trio{grid-template-columns:1fr;gap:var(--space-4)}
  .process,.about,.contact{grid-template-columns:1fr;gap:var(--space-6)}
  .project{grid-template-columns:1fr}
  .work__head{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .services{grid-template-columns:1fr;gap:var(--space-6)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:1fr}
  .page-title{font-size:clamp(34px,7vw,46px)}
  .sec-title{font-size:28px}
  .closer{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
}

@media (max-width:700px){
  .site-header__inner{flex-wrap:wrap;align-items:center}
  .nav-toggle{display:block}
  .nav{
    display:none;flex-basis:100%;flex-direction:column;gap:0;
    padding-top:var(--space-2);
  }
  .nav.is-open{display:flex}
  .nav a{padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);font-size:14px}
  .nav a[aria-current="page"]{color:var(--color-accent)}
  .band__head{flex-direction:column;gap:var(--space-2)}
  .pair{grid-template-columns:1fr}
  .prose{text-align:left;hyphens:none}
  .about__text{text-align:left;hyphens:none}
  .site-footer__inner{flex-direction:column;gap:var(--space-2)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .lightbox{padding:var(--space-3)}
  .lightbox__prev{left:var(--space-2)}
  .lightbox__next{right:var(--space-2)}
}

@media (max-width:440px){
  .facts{grid-template-columns:1fr}
  .hero__actions .btn{flex:1 1 100%}
}