/* Steel Coating Solutions — site v2
   Brand: #2E2F5E navy + #C4D3E6 pale (canonical, CMYK-derived) + white.
   Heat #F4622E is NON-BRAND, semantic: appears only in fire-condition beats
   and as the interaction accent (focus, selection, CTA) — never decorative wash.
   Motion per eko-website-build/references/motion.md — tokens, ladder, fences. */

/* ---------- self-hosted fonts (latin subsets) ---------- */
@font-face{font-family:'Archivo';src:url('fonts/Archivo-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-var.woff2') format('woff2');
  font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --navy:#2E2F5E; --pale:#C4D3E6; --white:#FFFFFF;
  --deep:#1F2038; --navy-2:#23244A; --navy-lift:#3A3B72;
  --paper:#F5F6FA; --paper-2:#E6E8F2;
  --heat:#F4622E; --heat-dim:#B8431C;

  --line:rgba(196,211,230,.16);
  --line-strong:rgba(196,211,230,.30);
  --line-dark:rgba(46,47,94,.14);
  --t2:rgba(196,211,230,.72);          /* secondary on navy — tinted from hue, not grey */
  --t3:rgba(196,211,230,.55);
  --t2-dark:rgba(46,47,94,.74);

  --font-display:'Archivo',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* motion.md §3 easing tokens */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-entrance:cubic-bezier(0.16,1,0.3,1);
  --ease:cubic-bezier(.22,1,.36,1);

  --gut:clamp(1.25rem,5vw,4.5rem);
  --maxw:78rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--pale);
  font:400 clamp(1rem,.96rem + .2vw,1.09rem)/1.65 var(--font-body);
  font-variant-numeric:tabular-nums;overflow-x:hidden}

/* ---------- browser surfaces (craft-floor §2) ---------- */
::selection{background:var(--heat);color:#fff}
:focus-visible{outline:2px solid var(--heat);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--navy-lift) var(--deep);scrollbar-width:thin;caret-color:var(--heat);accent-color:var(--heat)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--navy-lift);border:3px solid var(--deep);border-radius:99px}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.9rem,1.4rem + 6.2vw,5.9rem);line-height:.94;font-weight:800}
h2{font-size:clamp(1.95rem,1.2rem + 3vw,3.4rem);line-height:1.03}
h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.65rem);line-height:1.15;letter-spacing:-.025em}
h4{font-size:1.02rem;line-height:1.3;letter-spacing:-.01em;font-weight:600}
p{margin:0 0 1.1em;max-width:68ch}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);line-height:1.55}
.dim{color:var(--t2)}
.mono{font-family:var(--font-mono)}
.measure{max-width:66ch}
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex-shrink:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--heat);color:#fff;padding:.75rem 1.25rem;z-index:999}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:60;background:rgba(31,32,56,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.masthead__in{max-width:var(--maxw);margin-inline:auto;padding:.65rem var(--gut);
  display:flex;align-items:center;gap:1.25rem;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.brand__panel{background:var(--navy);padding:.42rem .5rem;display:grid;place-items:center;border:1px solid var(--line-strong)}
.brand__panel svg{display:block;height:26px;width:auto}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.25;color:var(--white)}
.brand__name span{display:block;color:var(--pale);font-weight:500}
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.6rem);flex-wrap:wrap}
.nav a{font-size:.85rem;text-decoration:none;padding:.35rem 0;border-bottom:1px solid transparent;
  transition:border-color 150ms ease,color 150ms ease}   /* tens/day tier: near-imperceptible */
@media (hover:hover) and (pointer:fine){.nav a:hover{border-bottom-color:var(--heat);color:var(--white)}}
.nav a[aria-current="page"]{border-bottom-color:var(--pale);color:var(--white)}

/* ---------- buttons: press feedback per motion.md §4 ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-weight:600;font-size:.9rem;text-decoration:none;padding:.8rem 1.4rem;cursor:pointer;
  border:1px solid var(--pale);background:var(--pale);color:#16172B;
  transition:background 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#fff;border-color:#fff}}
.btn:active{transform:scale(.97)}
.btn--ghost{background:transparent;color:var(--pale);border-color:var(--line-strong)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:rgba(196,211,230,.07);border-color:var(--pale);color:var(--white)}}
.btn--sm{padding:.6rem 1.05rem;font-size:.82rem}

/* ---------- FRR rail — the signature, evolving with scroll ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:64px;z-index:50;pointer-events:none;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(46,47,94,.35),rgba(31,32,56,.6))}
@media (min-width:1180px){.rail{display:flex}}
.rail__track{position:relative;width:3px;height:56vh;background:rgba(196,211,230,.14)}
.rail__fill{position:absolute;left:0;bottom:0;width:100%;height:0;
  background:linear-gradient(180deg,#FFFFFF,var(--pale))}
.rail__val{font-family:var(--font-mono);font-size:.78rem;color:var(--white);margin-bottom:1rem}
.rail__lbl{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;
  writing-mode:vertical-rl;color:var(--t3);margin-top:1rem}

/* ---------- hero: THE authored moment (500–800ms, --ease-entrance) ----------
   @starting-style drives entry with zero JS — cannot hide content when JS fails. */
.hero{position:relative;min-height:min(92svh,58rem);display:flex;align-items:flex-end;
  padding:clamp(6rem,15vh,10rem) 0 clamp(2.5rem,6vh,4rem);overflow:hidden;isolation:isolate}
.hero--short{min-height:min(62svh,40rem)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.55) contrast(1.06)}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(31,32,56,.72) 0%,rgba(46,47,94,.8) 45%,rgba(31,32,56,.96) 100%)}
.hero h1{color:var(--white);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--pale)}
.hero__sub{margin-top:clamp(1.25rem,3vh,2rem);max-width:52ch}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:clamp(1.75rem,4vh,2.5rem)}
.hero__meta{margin-top:clamp(2.25rem,5vh,3.5rem);padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;gap:clamp(1.25rem,4vw,3.25rem);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;color:var(--t2)}

/* entrance choreography — headline clip-reveals, support staggers 60ms */
.hero h1{clip-path:inset(0 0 0 0);
  transition:clip-path 700ms var(--ease-entrance)}
.hero .hs{opacity:1;transform:none;
  transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.hero .hs:nth-of-type(2){transition-delay:60ms}
.hero .hs:nth-of-type(3){transition-delay:120ms}
@starting-style{
  .hero h1{clip-path:inset(0 0 100% 0)}
  .hero .hs{opacity:0;transform:translateY(14px)}
}

/* ---------- sections ---------- */
.sec{padding:clamp(4rem,10vh,7.5rem) 0;position:relative}
.sec--paper{background:var(--paper);color:var(--navy)}
.sec--paper .dim{color:var(--t2-dark)}
.sec--paper h2,.sec--paper h3,.sec--paper h4{color:var(--navy)}
.sec--navy{background:var(--navy)}
.sec__head{max-width:60ch;margin-bottom:clamp(2.25rem,5.5vh,3.5rem)}
.sec__head h2{margin-bottom:1rem}

/* supporting scroll reveals: quiet, fast, clip-path vocabulary (motion.md §5).
   Hidden ONLY when .js present — nothing hidden at rest without JS. */
.js [data-reveal]{clip-path:inset(0 0 14% 0);opacity:.001;transform:translateY(14px);
  transition:clip-path 450ms var(--ease-out),opacity 450ms var(--ease-out),transform 450ms var(--ease-out)}
.js [data-reveal].in{clip-path:inset(0 0 0 0);opacity:1;transform:none}
.js [data-reveal][data-d="1"].in{transition-delay:60ms}
.js [data-reveal][data-d="2"].in{transition-delay:120ms}
.js [data-reveal][data-d="3"].in{transition-delay:180ms}

/* ---------- editorial rows (not a card grid) ---------- */
.row{display:grid;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(2rem,5vh,3.25rem) 0;
  border-top:1px solid var(--line);align-items:center}
@media (min-width:900px){.row{grid-template-columns:1.05fr 1fr}
  .row:nth-child(even) .row__media{order:-1}}
.row__media{position:relative;overflow:hidden;background:var(--navy-2);aspect-ratio:16/9}
.row__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7);
  transition:transform 700ms var(--ease-in-out)}
@media (hover:hover) and (pointer:fine){.row:hover .row__media img{transform:scale(1.04)}}
.row__body h3{margin-bottom:.85rem;color:var(--white)}
.sec--paper .row__body h3{color:var(--navy)}
.row__spec{margin-top:1.1rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;
  color:var(--t3);display:flex;gap:1.25rem;flex-wrap:wrap}
.row__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--pale);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:.15rem;
  transition:color 150ms ease,border-color 150ms ease}
@media (hover:hover) and (pointer:fine){.row__link:hover{color:var(--heat);border-color:var(--heat)}}

/* ---------- process rail (skeleton block) ---------- */
.prail{display:grid;gap:1.25rem;counter-reset:pr}
@media (min-width:860px){.prail{grid-template-columns:repeat(4,1fr)}}
.prail>div{border-top:2px solid var(--line-strong);padding-top:1rem;counter-increment:pr;position:relative}
.prail h4{color:var(--white);margin:.35rem 0 .5rem}
.sec--paper .prail h4{color:var(--navy)}
.prail>div::before{content:counter(pr,decimal-leading-zero);font-family:var(--font-mono);
  font-size:.75rem;color:var(--t3)}
.prail p{font-size:.9rem;color:var(--t2);margin:0}
.sec--paper .prail p{color:var(--t2-dark)}
/* rationale: the sequence IS the information here (application order) — numbered per craft-floor exception */

/* ---------- checklist columns ---------- */
.cols{display:grid;gap:2rem}
@media (min-width:860px){.cols{grid-template-columns:repeat(3,1fr)}}
.cols h4{margin-bottom:.9rem;display:flex;gap:.55rem;align-items:center}
.cols ul{list-style:none;padding:0;margin:0}
.cols li{padding:.55rem 0;border-top:1px solid var(--line);font-size:.92rem;display:flex;gap:.6rem;align-items:flex-start}
.sec--paper .cols li{border-top-color:var(--line-dark)}
.cols li svg{margin-top:.2rem;color:var(--heat)}

/* ---------- demo (fire-condition beat) ---------- */
.demo{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:960px){.demo{grid-template-columns:.85fr 1.15fr;align-items:center}}
.demo__fig{background:var(--deep);border:1px solid var(--line);padding:clamp(1.25rem,3vw,2rem)}
.demo__fig svg{width:100%;height:auto;display:block}
.seg{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.seg button{font-family:var(--font-mono);font-size:.85rem;background:transparent;color:var(--pale);
  border:1px solid var(--line-strong);padding:.65rem 1.05rem;cursor:pointer;
  transition:background 150ms ease,border-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.seg button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.seg button:hover{border-color:var(--pale);color:var(--white)}}
.seg button[aria-pressed="true"]{background:var(--pale);border-color:var(--pale);color:#16172B}
.demo__note{font-size:.85rem;color:var(--t2);max-width:52ch;margin-top:1.2rem}
#charRect{transition:x 300ms var(--ease-in-out),y 300ms var(--ease-in-out),
  width 300ms var(--ease-in-out),height 300ms var(--ease-in-out),
  stroke-width 300ms var(--ease-in-out),opacity 300ms var(--ease-in-out)}

/* ---------- proof ---------- */
.proof{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:880px){.proof{grid-template-columns:1fr 1fr;align-items:center}}
.proof__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.proof__img img{width:100%;height:100%;object-fit:cover}
.chk{list-style:none;padding:0;margin:1.5rem 0 0}
.chk li{padding:.85rem 0 .85rem 2rem;border-top:1px solid var(--line-dark);position:relative;max-width:56ch}
.sec--navy .chk li,.sec:not(.sec--paper) .chk li{border-top-color:var(--line)}
.chk li::before{content:"";position:absolute;left:.1rem;top:1.3rem;width:8px;height:8px;background:currentColor;transform:rotate(45deg);opacity:.7}

/* ---------- gallery ---------- */
.gal{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.gal figure{margin:0;overflow:hidden;background:var(--navy-2)}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(.7);
  transition:filter 450ms var(--ease-out),transform 700ms var(--ease-in-out)}
@media (hover:hover) and (pointer:fine){.gal figure:hover img{filter:saturate(1);transform:scale(1.03)}}
.gal figcaption{padding:.85rem 0 0;font-size:.83rem;color:var(--t2);line-height:1.45}
.gal--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}

/* ---------- flags (internal build notes) ---------- */
.flag{border:1px dashed var(--heat);background:rgba(244,98,46,.07);
  padding:1rem 1.15rem;margin:1.5rem 0;font-size:.85rem;max-width:66ch}
.flag strong{font-family:var(--font-display);color:var(--heat);display:block;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem}

.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem;margin-top:1.5rem}
.slot{border:1px dashed var(--line-strong);aspect-ratio:5/2;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.72rem;color:var(--t3);text-align:center;padding:.5rem}

.disclose{border-left:1px solid var(--heat);padding:.15rem 0 .15rem 1.25rem;
  max-width:62ch;font-size:.92rem;color:rgba(196,211,230,.85);margin-bottom:2.25rem}

/* ---------- CTA band ---------- */
.band{position:relative;padding:clamp(3.5rem,9vh,6rem) 0;border-top:1px solid var(--line);
  overflow:hidden;isolation:isolate;background:var(--navy)}
.band__bg{position:absolute;inset:0;z-index:-1}
.band__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.5)}
.band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,47,94,.94) 0%,rgba(46,47,94,.78) 55%,rgba(46,47,94,.55) 100%)}
.band h2{color:var(--white);max-width:20ch;margin-bottom:1.25rem}

/* ---------- footer ---------- */
.foot{background:var(--deep);border-top:1px solid var(--line);padding:clamp(3rem,7vh,4.5rem) 0 2rem}
.foot__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.foot h4{margin-bottom:.9rem;font-family:var(--font-display);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.55rem;font-size:.9rem}
.foot a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color 150ms ease,color 150ms ease}
@media (hover:hover) and (pointer:fine){.foot a:hover{border-bottom-color:var(--pale);color:var(--white)}}
.foot__base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;font-size:.8rem;color:var(--t3)}

/* ---------- quote page ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps>li{border-top:1px solid var(--line);padding:clamp(1.6rem,4vh,2.5rem) 0;display:grid;gap:1rem}
@media (min-width:820px){.steps>li{grid-template-columns:auto 1fr;gap:2.5rem}}
.steps__k{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--heat);white-space:nowrap;padding-top:.35rem}
.steps h3{color:var(--white);margin-bottom:.7rem}
.why{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--t2);max-width:62ch}
.why b{color:var(--pale);font-weight:600}

.ready{background:var(--navy-2);border:1px solid var(--line-strong);padding:clamp(1.5rem,4vw,2.5rem)}
.ready__list{list-style:none;padding:0;margin:0 0 1.6rem}
.ready__list li{border-bottom:1px solid var(--line)}
.ready__list label{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;cursor:pointer}
.ready__list input{margin:.25rem 0 0;width:1.1rem;height:1.1rem;flex-shrink:0}
.ready__list span{font-size:.95rem;line-height:1.5}
.ready__list small{display:block;color:var(--t3);font-size:.82rem;margin-top:.2rem}
.meter{height:6px;background:rgba(196,211,230,.16);position:relative;margin-bottom:1rem}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--heat);
  transition:width 250ms var(--ease-out)}
.ready__out{font-family:var(--font-mono);font-size:.85rem;color:var(--white)}
.ready__out b{color:var(--heat)}

.form{display:grid;gap:1.25rem}
@media (min-width:760px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field label{display:block;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2);margin-bottom:.5rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:var(--deep);color:var(--white);
  border:1px solid var(--line-strong);padding:.8rem .95rem;font:400 .95rem/1.5 var(--font-body);
  transition:border-color 150ms ease}
.field input::placeholder,.field textarea::placeholder{color:rgba(196,211,230,.48)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pale);outline:none}
.field textarea{min-height:7rem;resize:vertical}
.field .err{display:none;font-size:.8rem;color:var(--heat);margin-top:.4rem}
.field.is-bad input,.field.is-bad textarea{border-color:var(--heat)}
.field.is-bad .err{display:block}

.drop{border:1px dashed var(--line-strong);padding:clamp(1.75rem,5vw,3rem);text-align:center;
  transition:border-color 150ms ease,background 150ms ease}
.drop.is-over{border-color:var(--heat);background:rgba(244,98,46,.06)}
.drop p{margin:0 auto .35rem;max-width:44ch}
.drop small{color:var(--t2)}
.drop__list{list-style:none;padding:0;margin:1.25rem 0 0;text-align:left;font-family:var(--font-mono);font-size:.8rem}
.drop__list li{padding:.5rem 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem}

.gloss{border-top:1px solid var(--line)}
.gloss div{border-bottom:1px solid var(--line);padding:1.1rem 0;display:grid;gap:.35rem}
@media (min-width:760px){.gloss div{grid-template-columns:13rem 1fr;gap:2rem;align-items:baseline}}
.gloss dt{font-family:var(--font-display);font-weight:600;color:var(--white);font-size:.98rem}
.gloss dd{margin:0;font-size:.93rem;color:var(--t2);max-width:64ch}

.faq details{border-top:1px solid currentColor;padding:1.15rem 0;
  border-color:var(--line)}
.sec--paper .faq details{border-color:var(--line-dark)}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--heat);flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.9rem 0 0}

.pit{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));margin-top:2rem}
.pit>div{border-top:2px solid var(--heat);padding-top:1.1rem}
.pit p{font-size:.9rem;margin:0}
.sec--paper .pit p{color:var(--t2-dark)}

/* contact */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.contact-grid{grid-template-columns:1.2fr .8fr}}
.nap{list-style:none;padding:0;margin:0}
.nap li{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 0;border-top:1px solid var(--line);font-size:.95rem}
.nap svg{margin-top:.2rem;color:var(--heat)}

/* ---------- reduced motion: fewer and gentler, not zero ---------- */
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .hs{transition:opacity 200ms ease;clip-path:none;transform:none}
  .js [data-reveal]{clip-path:none;transform:none;transition:opacity 200ms ease}
  .row__media img,.gal img{transition:none}
  .rail__fill{transition:none}
  html{scroll-behavior:auto}
}

@media (max-width:640px){
  .nav{gap:.7rem .95rem}
  .masthead__in{padding-block:.55rem}
}

/* ================= v2.1 — the committed layer ================= */

/* display type goes to the cap; the hero owns the viewport */
.hero--full h1{font-size:clamp(3.4rem,2rem + 9vw,9.2rem);line-height:.88;letter-spacing:-.045em;max-width:none}
.hero--full h1 .ln{display:block;overflow:hidden}
.hero--full h1 .ln span{display:block;transform:none;transition:transform 700ms var(--ease-entrance)}
.hero--full h1 .ln:nth-child(2) span{transition-delay:120ms}
.hero--full h1 em{color:var(--pale);font-style:normal;text-shadow:0 2px 24px rgba(16,19,31,.55)}
@starting-style{.hero--full h1 .ln span{transform:translateY(110%)}}

/* duotone system: navy at rest, heat on interaction */
.duo{position:relative;overflow:hidden;background:var(--navy-2)}
.duo img{width:100%;height:100%;object-fit:cover;display:block}
.duo .heat{position:absolute;inset:0;opacity:0;transition:opacity 500ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.duo:hover .heat,a:hover .duo .heat,.row:hover .duo .heat{opacity:1}}
.duo:focus-within .heat{opacity:1}

/* capability marquee — constant motion, linear (motion.md easing table) */
.marq{border-block:1px solid var(--line);overflow:hidden;padding:.9rem 0;background:var(--deep)}
.marq__track{display:flex;gap:3.5rem;width:max-content;animation:marq 28s linear infinite;
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.14em;color:var(--t2);white-space:nowrap}
.marq__track span{display:flex;align-items:center;gap:3.5rem}
.marq__track b{color:var(--t3);font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}
.marq:hover .marq__track{animation-play-state:paused}

/* THE authored scene: sticky heat ramp. Scroll drives 20→550°C and navy burns to ember. */
.burn{position:relative;height:320svh}
.burn__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  overflow:hidden;isolation:isolate;background:var(--deep)}
.burn__wash{position:absolute;inset:0;z-index:-1;opacity:0;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(244,98,46,.55), rgba(184,67,28,.22) 45%, transparent 70%),
    linear-gradient(180deg,#141222 0%, #2a1510 70%, #3a170c 100%)}
.burn__temp{font-family:var(--font-mono);font-weight:400;
  font-size:clamp(4.5rem,2rem + 16vw,15rem);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.burn__temp small{font-size:.28em;color:var(--t2);letter-spacing:.1em;vertical-align:.32em;margin-left:.15em}
.burn__cap{position:absolute;left:0;right:0;bottom:clamp(1.5rem,6vh,4rem);text-align:center;padding-inline:var(--gut)}
.burn__cap p{margin:0 auto;max-width:52ch;font-size:clamp(.98rem,.9rem+.4vw,1.15rem);color:var(--pale);
  opacity:0;transform:translateY(10px);transition:opacity 350ms var(--ease-out),transform 350ms var(--ease-out)}
.burn__cap p.on{opacity:1;transform:none}
.burn__mark{position:absolute;top:clamp(1.25rem,5vh,3rem);left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.3em;color:var(--t3)}
.burn__flash{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity 400ms var(--ease-out)}
.burn__flash.on{opacity:1}
.burn__flash span{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.6rem,1rem + 3.5vw,3.4rem);color:var(--heat)}

/* services — oversized editorial index, not polite rows */
.svc{border-top:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:1fr;gap:0;text-decoration:none;position:relative;
  padding:clamp(1.6rem,4vh,2.6rem) 0;border-bottom:1px solid var(--line);align-items:center}
@media (min-width:900px){.svc a{grid-template-columns:1.15fr .85fr;gap:3rem}}
.svc h3{font-size:clamp(1.9rem,1.1rem + 3.6vw,3.9rem);letter-spacing:-.04em;color:var(--pale);
  transition:color 200ms ease,transform 350ms var(--ease-out)}
.svc a .duo{aspect-ratio:16/9;max-height:15rem;opacity:.85;transition:opacity 350ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .svc a:hover h3{color:var(--white);transform:translateX(.35em)}
  .svc a:hover .duo{opacity:1}}
.svc__meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--t3);
  margin-top:.6rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.svc p{margin:.7rem 0 0;max-width:52ch;color:var(--t2);font-size:.95rem}

/* rail v2 — present, glowing tip */
.rail{width:72px}
.rail__track{width:4px}
.rail__fill::after{content:"";position:absolute;left:50%;top:0;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);background:#FFFFFF;box-shadow:0 2px 12px 2px rgba(196,211,230,.6)}
.rail__val{font-size:.95rem}
/* mobile signature: top heat bar */
.railbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.railbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pale),#FFFFFF)}
@media (min-width:1180px){.railbar{display:none}}

/* gallery inherits duotone */
.gal .duo img,.row__media img{filter:none}

@media (prefers-reduced-motion:reduce){
  .marq__track{animation:none}
  .hero--full h1 .ln span{transition:opacity 200ms ease}
  .burn{height:auto}
  .burn__stage{position:static;height:auto;padding:4rem 0}
  .burn__cap p{opacity:1;transform:none}
}

/* ================= v3 — photographic worlds, creative-per-block ================= */

.hero--cine .hero__bg img{filter:none;object-position:center 35%}
.hero__bg--open::after{background:linear-gradient(84deg,rgba(16,19,31,.9) 0%,rgba(16,19,31,.5) 38%,rgba(16,19,31,.08) 62%,rgba(16,19,31,.35) 100%)}
.btn--pale{background:var(--pale);border-color:var(--pale);color:#16172B}
@media (hover:hover) and (pointer:fine){.btn--pale:hover{background:#fff;border-color:#fff}}
.hero__strip{position:absolute;right:0;bottom:0;display:flex;z-index:3;
  background:rgba(16,19,31,.68);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.hero__strip div{padding:1.1rem 1.6rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.06em;color:var(--t2);border-right:1px solid var(--line)}
.hero__strip b{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:700;
  color:var(--white);letter-spacing:-.02em;margin-bottom:.15rem}
@media (max-width:720px){.hero__strip{position:static;width:100%;border-left:0}
  .hero__strip div{flex:1;padding:.9rem 1rem}}

/* dark photographic section */
.cin{position:relative;isolation:isolate;padding:clamp(4.5rem,11vh,8rem) 0;overflow:hidden}
.cin__bg{position:absolute;inset:0;z-index:-1}
.cin__bg img{width:100%;height:100%;object-fit:cover}
.cin__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(16,19,31,.94) 0%,rgba(16,19,31,.82) 45%,rgba(16,19,31,.55) 100%)}
.cin h2{color:var(--white)}
.cin__grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:960px){.cin__grid{grid-template-columns:1fr 1.05fr;align-items:center}}
.cin--tall .cin__bg::after{background:linear-gradient(180deg,rgba(16,19,31,.93) 0%,rgba(16,19,31,.82) 55%,rgba(16,19,31,.93) 100%)}

.pane{background:rgba(31,32,56,.72);backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:clamp(1.25rem,3vw,2rem)}
.crv{width:100%;height:auto;display:block}
.js .crv__line{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1400ms var(--ease-out) 200ms}
.js [data-reveal].in .crv__line{stroke-dashoffset:0}

.sec--deep{background:var(--deep)}

/* services panels — each a photographic world */
.panels{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:860px){.panels{grid-template-columns:1fr 1fr}}
.panel{position:relative;display:block;min-height:clamp(20rem,44vh,26rem);overflow:hidden;
  text-decoration:none;background:var(--deep)}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease-in-out),opacity 400ms var(--ease-out);opacity:.85}
.panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,31,.15) 0%,rgba(16,19,31,.42) 55%,rgba(16,19,31,.92) 100%)}
.panel__body{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(1.4rem,3.5vw,2.2rem)}
.panel__k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--pale)}
.panel h3{color:var(--white);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);margin:.5rem 0 .4rem;
  transition:transform 350ms var(--ease-out)}
.panel p{margin:0;color:var(--t2);font-size:.93rem;max-width:44ch}
@media (hover:hover) and (pointer:fine){
 .panel:hover img{transform:scale(1.05);opacity:1}
 .panel:hover h3{transform:translateX(.3em)}}

/* record card creative */
.reccard{margin:0;background:#fff;border:1px solid var(--line-dark);
  box-shadow:0 14px 34px -18px rgba(46,47,94,.35)}
.reccard__cap{display:flex;justify-content:space-between;padding:.8rem 1.1rem;
  background:var(--navy);color:var(--pale);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em}
.reccard table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.82rem;color:var(--navy)}
.reccard th{font-weight:400;text-align:left;font-size:.66rem;letter-spacing:.1em;color:var(--t2-dark);
  padding:.7rem 1.1rem .45rem;border-bottom:1px solid var(--line-dark)}
.reccard td{padding:.65rem 1.1rem;border-bottom:1px solid rgba(46,47,94,.09)}
.reccard .rd{font-weight:400;font-size:1rem}
.reccard .ok{color:#2E7D46}
.reccard .ghost td{color:rgba(46,47,94,.32)}
.reccard__foot{font-size:.78rem;color:var(--t2-dark);padding:.8rem 1.1rem;margin:0;max-width:none}

.proofrow{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:940px){.proofrow{grid-template-columns:1.15fr .85fr;align-items:start}}
.proofshot{margin:0}
.proofshot img{width:100%;height:auto;display:block;border:1px solid var(--line-dark)}
.proofshot figcaption{font-size:.83rem;color:var(--t2-dark);padding-top:.7rem}
.loop{width:100%;height:auto;display:block}

.seg--ink button{color:var(--navy);border-color:rgba(46,47,94,.4)}
.seg--ink button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.seg--ink button:hover{border-color:var(--navy);color:var(--navy)}}
.demo__fig--ink{background:#fff;border-color:var(--line-dark)}

.slots--ink .slot{border-color:rgba(46,47,94,.35);color:var(--t2-dark)}

.gal--glass figure{background:rgba(31,32,56,.5);border:1px solid var(--line);padding-bottom:.9rem}
.gal--glass img{filter:none;aspect-ratio:16/11}
.gal--glass figcaption{padding:.85rem 1rem 0}

.band--cine .band__bg img{filter:none;object-position:center 28%}
.band--cine .band__bg::after{background:linear-gradient(90deg,rgba(16,19,31,.95) 0%,rgba(16,19,31,.8) 50%,rgba(16,19,31,.45) 100%)}

@media (prefers-reduced-motion:reduce){
  .js .crv__line{stroke-dashoffset:0;transition:none}
  .panel img{transition:none}
}

.sec--paper .btn{background:var(--navy);border-color:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.sec--paper .btn:hover{background:#3A3B72;border-color:#3A3B72}}
.hero--full h1{text-shadow:0 2px 28px rgba(16,19,31,.45)}

html{overflow-x:clip}
@media (max-width:640px){
  .hero--full h1{font-size:clamp(2.6rem,13vw,3.4rem)}
  .reccard table{font-size:.72rem}
  .reccard th,.reccard td{padding-inline:.6rem}
}

/* ================= v4 — detail density layer ================= */

/* floating artefact chips over the hero (real-format, honest content) */
.chips{position:absolute;z-index:3;right:clamp(1rem,4vw,4rem);top:clamp(6rem,16vh,9rem);
  display:flex;flex-direction:column;gap:.9rem;width:min(19rem,44vw)}
.chip{background:rgba(16,19,31,.78);backdrop-filter:blur(12px);border:1px solid var(--line);
  padding:.95rem 1.1rem;transform:none;opacity:1;
  transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.chip:nth-child(2){transition-delay:80ms;margin-right:1.6rem}
.chip:nth-child(3){transition-delay:160ms;margin-right:-.5rem}
@starting-style{.chip{opacity:0;transform:translateY(16px)}}
.chip__k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--t3);display:flex;justify-content:space-between}
.chip__v{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--white);letter-spacing:-.02em;margin-top:.25rem}
.chip__v small{font-size:.72rem;font-weight:400;color:var(--pale);letter-spacing:0}
.chip--ok .chip__v{color:#8FD6A8}
@media (max-width:840px){.chips{position:static;width:auto;flex-direction:row;flex-wrap:wrap;padding:1.25rem var(--gut) 0}
  .chip{flex:1 1 10rem;margin:0!important}}

/* spray-overspray section edges */
.edge{display:block;width:100%;height:56px;background:url('img/edge-spray-white.png') repeat-x bottom/auto 100%;
  transform:scaleY(-1);margin-bottom:-1px;pointer-events:none}
.edge--out{transform:none;margin-top:-1px;margin-bottom:0}
.edge--navy{background-image:url('img/edge-spray-navy.png')}

/* masking-tape kickers + taped photos */
.tapek{display:inline-block;position:relative;background:url('img/tape-a.png') center/100% 100% no-repeat;
  padding:.55rem 1.6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;
  color:#3B3C2F;transform:rotate(-1.2deg);margin-bottom:1.2rem}
.tapek--b{background-image:url('img/tape-b.png');transform:rotate(.9deg)}
.taped{position:relative;background:#fff;padding:.55rem .55rem 0;
  box-shadow:0 18px 34px -16px rgba(16,19,31,.55);transform:rotate(-1.3deg)}
.taped:nth-child(2){transform:rotate(1.1deg)}
.taped:nth-child(3){transform:rotate(-.6deg)}
.taped::before{content:"";position:absolute;top:-13px;left:50%;width:110px;height:30px;
  transform:translateX(-50%) rotate(-2deg);background:url('img/tape-a.png') center/100% 100% no-repeat;z-index:2}
.taped img{filter:none}
.taped figcaption{color:#3F415F;font-family:var(--font-mono);font-size:.72rem;padding:.7rem .35rem .8rem}
@media (hover:hover) and (pointer:fine){
 .taped{transition:transform 350ms var(--ease-out)}
 .taped:hover{transform:rotate(0) scale(1.02);z-index:3}}

/* why-grid icon cards (one card grid on the page, containers varied elsewhere) */
.why{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){.why{grid-template-columns:repeat(3,1fr)}}
.why>div{background:var(--navy-2);padding:1.5rem 1.4rem}
.why svg{width:1.6rem;height:1.6rem;color:var(--pale)}
.why h4{color:var(--white);margin:.8rem 0 .35rem}
.why p{margin:0;font-size:.88rem;color:var(--t2)}

/* capability stat band (facts, not invented counts) */
.statband{background:var(--pale);color:#16172B;padding:1.6rem 0}
.statband .wrap{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));align-items:center}
.statband b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.statband span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:#3F415F}

/* document stack creative */
.stack{position:relative;min-height:23rem}
.doc{position:absolute;background:#fff;border:1px solid var(--line-dark);
  box-shadow:0 22px 44px -20px rgba(46,47,94,.45);width:min(21rem,78%);
  transition:transform 400ms var(--ease-out)}
.doc--1{left:0;top:2.2rem;transform:rotate(-3deg)}
.doc--2{left:16%;top:.4rem;transform:rotate(1.6deg)}
.doc--3{left:31%;top:3rem;transform:rotate(-.8deg);z-index:2}
@media (hover:hover) and (pointer:fine){
 .stack:hover .doc--1{transform:rotate(-5deg) translateX(-1rem)}
 .stack:hover .doc--2{transform:rotate(3deg) translateY(-.6rem)}
 .stack:hover .doc--3{transform:rotate(0) translateY(-.3rem)}}
.doc__head{background:var(--navy);color:var(--pale);font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.14em;padding:.6rem .9rem;display:flex;justify-content:space-between}
.doc__body{padding:.9rem;font-family:var(--font-mono);font-size:.68rem;color:#3F415F;line-height:2}
.doc__body i{display:block;height:6px;background:rgba(46,47,94,.12);margin:.45rem 0;font-style:normal}
.doc__body i.w60{width:60%}.doc__body i.w80{width:80%}.doc__body i.w40{width:40%}
.scrollcue{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.3em;color:var(--t2)}
.scrollcue::after{content:"";display:block;width:1px;height:34px;margin:.5rem auto 0;
  background:linear-gradient(180deg,var(--pale),transparent)}
@media (prefers-reduced-motion:reduce){.chip{transition:opacity 200ms ease}}

/* ================= v4.1 — craft fixes ================= */

/* engineering drawing-sheet motif for light sections */
.sec--sheet{background-color:var(--paper);
  background-image:
    linear-gradient(rgba(46,47,94,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,47,94,.045) 1px,transparent 1px),
    linear-gradient(rgba(46,47,94,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,47,94,.08) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px}
/* faint grid on the deep why-section too */
.sec--grid{background-image:
    linear-gradient(rgba(196,211,230,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(196,211,230,.05) 1px,transparent 1px);
  background-size:32px 32px}

/* why cards v2 — drawing-annotated cells */
.why>div{position:relative;padding:1.9rem 1.5rem 1.6rem;overflow:hidden;
  transition:background 200ms ease}
.why>div::before{content:attr(data-n);position:absolute;right:.6rem;top:-.4rem;
  font-family:var(--font-display);font-weight:800;font-size:4.2rem;letter-spacing:-.05em;
  color:rgba(196,211,230,.07);pointer-events:none}
.why>div::after{content:"";position:absolute;left:.7rem;top:.7rem;width:14px;height:14px;
  border-left:1px solid rgba(196,211,230,.4);border-top:1px solid rgba(196,211,230,.4)}
.why .disc{width:3rem;height:3rem;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;background:rgba(196,211,230,.06);
  transition:background 200ms ease,border-color 200ms ease}
.why .disc svg{width:1.35rem;height:1.35rem;color:var(--pale)}
@media (hover:hover) and (pointer:fine){
  .why>div:hover{background:var(--navy-lift)}
  .why>div:hover .disc{background:var(--pale);border-color:var(--pale)}
  .why>div:hover .disc svg{color:var(--navy)}}

/* demo figure as drawing detail */
.demo__fig--ink{position:relative;padding:0;overflow:hidden}
.demo__fig--ink svg{display:block}
.sheetgrid{fill:none;stroke:rgba(46,47,94,.09);stroke-width:1}
.dim{stroke:#5A6B92;stroke-width:1}
.dimt{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:#5A6B92}
.tblock{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#2E2F5E}

/* process stations v2 */
.stations{counter-reset:st;display:grid;gap:2.2rem 1.25rem;position:relative;margin-top:1rem}
@media (min-width:820px){.stations{grid-template-columns:repeat(5,1fr)}
 .stations::before{content:"";position:absolute;top:1.55rem;left:2.5rem;right:2.5rem;height:2px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 78%,rgba(46,47,94,.25) 100%)}}
.station{counter-increment:st;position:relative;text-align:center}
.station i{position:relative;z-index:2;width:3.1rem;height:3.1rem;margin:0 auto;border-radius:50%;
  background:var(--paper);border:2px solid var(--navy);display:grid;place-items:center;font-style:normal}
.station i svg{width:1.2rem;height:1.2rem;color:var(--navy)}
.station--last i{background:var(--navy)}
.station--last i svg{color:var(--pale)}
.station i::after{content:counter(st,decimal-leading-zero);position:absolute;top:-0.55rem;right:-0.75rem;
  font-family:var(--font-mono);font-size:.62rem;background:var(--pale);color:#16172B;
  padding:.1rem .3rem;border:1px solid var(--navy)}
.station h4{color:var(--navy);font-size:.92rem;margin:.9rem 0 .3rem}
.station p{margin:0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--t2-dark)}
@media (max-width:819px){
 .stations{grid-template-columns:1fr;gap:0}
 .station{display:grid;grid-template-columns:3.1rem 1fr;gap:1.1rem;text-align:left;padding:.9rem 0;align-items:center}
 .station h4{margin:0 0 .2rem}
 .station+.station{border-top:1px dashed rgba(46,47,94,.2)}}

/* ================= v4.2 — review edits ================= */

/* hero: chips gone; keep it clean */
.hero--cine .hero__bg img{object-position:center 45%}

/* why section: plan-fragment background replaces gridlines */
.sec--plan{background-color:var(--deep);background-image:url('img/motif-plan.svg');
  background-repeat:no-repeat;background-position:right -8% center;background-size:min(78%,62rem)}
@media (max-width:900px){.sec--plan{background-size:130%;background-position:center 20%}}

/* services: dividers draw in on scroll */
.panels{gap:0;background:transparent;border-block:0;position:relative}
.panel{border:0}
.panels::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--line-strong);transform:scaleY(0);transform-origin:top;
  transition:transform 900ms var(--ease-in-out) 150ms;z-index:3}
.panels::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:var(--line-strong);transform:scaleX(0);transform-origin:left;
  transition:transform 900ms var(--ease-in-out) 350ms;z-index:3}
.panels.in::before{transform:scaleY(1)}
.panels.in::after{transform:scaleX(1)}
.panels .pnl-t,.panels .pnl-b{position:absolute;left:0;right:0;height:1px;background:var(--line-strong);
  transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-in-out);z-index:3}
.panels .pnl-t{top:0}.panels .pnl-b{bottom:0;transform-origin:right;transition-delay:500ms}
.panels.in .pnl-t,.panels.in .pnl-b{transform:scaleX(1)}
@media (max-width:859px){.panels::before{display:none}}

/* proof: photo rises beside the header */
.proofwrap{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}

.proofshot img{max-height:34rem;object-fit:cover;object-position:center 20%;width:100%}

/* paperwork: skyline silhouette fills the right half, same colour as the ink */
.docszone{position:relative;overflow:hidden}
.docszone::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:56%;aspect-ratio:784/892;max-height:118%;
  background:url('img/motif-skyline.png') right center/contain no-repeat;pointer-events:none}
.docszone>*{position:relative;z-index:2}
@media (max-width:900px){.docszone::after{width:90%;opacity:.6}}
@media (prefers-reduced-motion:reduce){
 .panels::before,.panels::after,.panels .pnl-t,.panels .pnl-b{transform:none;transition:none}}

/* ================= v4.3 — mobile doc stack + video hero ================= */
@media (max-width:700px){
  .stack{min-height:0;display:grid;gap:1rem}
  .doc{position:static;width:100%}
  .doc--1{transform:rotate(-1.2deg)}.doc--2{transform:rotate(.8deg)}.doc--3{transform:rotate(-.5deg)}
}

/* hero video: sits behind the photo, revealed only once it can play */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;display:none}
.hero--hasvid .hero__vid{display:block}
.hero--hasvid .hero__bg>picture,.hero--hasvid .hero__bg>img{display:none}
@media (prefers-reduced-motion:reduce){
  .hero__vid{display:none!important}
  .hero--hasvid .hero__bg>picture,.hero--hasvid .hero__bg>img{display:block!important}}

/* ================= v5 — video hero, floating masthead ================= */
.masthead{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;transition:background 300ms ease,border-color 300ms ease,backdrop-filter 300ms ease}
.masthead--solid{background:rgba(31,32,56,.9);border-bottom-color:var(--line);backdrop-filter:blur(14px)}
body{padding-top:0}
.hero--full{min-height:100svh}
.hero--cine .hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,31,.55) 0%,transparent 22%),
             linear-gradient(84deg,rgba(16,19,31,.88) 0%,rgba(16,19,31,.45) 40%,rgba(16,19,31,.05) 65%,rgba(16,19,31,.3) 100%)}
.hero__vid{object-position:center center}

/* ================= v5.1 — logo, rail, QA layout ================= */

/* logo: bigger, no panel/border — sits on the surface, not pasted on */
.brand__panel{background:transparent;border:0;padding:0}
.brand__panel svg{height:44px}
.brand__name{font-size:.78rem;letter-spacing:.15em}
@media (max-width:640px){.brand__panel svg{height:36px}}

/* rail: readout stays legible over light sections too */
.rail{mix-blend-mode:normal}
.rail__val{color:var(--white);text-shadow:0 1px 10px rgba(16,19,31,.75)}
.rail__lbl{color:var(--t3);text-shadow:0 1px 8px rgba(16,19,31,.6)}
.rail--ink .rail__val{color:var(--navy);text-shadow:0 1px 10px rgba(255,255,255,.9)}
.rail--ink .rail__lbl{color:rgba(46,47,94,.6);text-shadow:0 1px 8px rgba(255,255,255,.85)}
.rail--ink .rail__track{background:rgba(46,47,94,.18)}
.rail--ink .rail__fill{background:linear-gradient(180deg,var(--navy),var(--navy-lift))}
.rail--ink .rail__fill::after{background:var(--navy);box-shadow:0 2px 12px 2px rgba(46,47,94,.35)}
.rail--ink{border-right-color:rgba(46,47,94,.14);
  background:linear-gradient(180deg,rgba(46,47,94,.04),rgba(46,47,94,.02))}
.railbar--ink i{background:linear-gradient(90deg,var(--navy-lift),var(--navy))}

/* QA: header full width, card + photo as one aligned row */
/* header + card in one column; photo top NEVER above the H2 */
.proofwrap{display:grid;gap:clamp(1.5rem,3.5vw,2.75rem);align-items:start}
@media (min-width:700px){.proofwrap{grid-template-columns:1.08fr .92fr}
 /* kicker height + its margin pushes the photo down so its top sits level with the H2 */
 .proofwrap .proofshot{margin-top:0}}
.proofwrap>*{min-width:0}
.proofcol{min-width:0}
.proofwrap .proofshot{margin:0}
.proofwrap .proofshot img{max-height:none;aspect-ratio:3/4;object-fit:cover;object-position:center 25%;width:100%}

/* photo sits in its own column but starts at the H2, not above it */
@media (min-width:700px){
  .proofwrap .proofshot{position:relative;top:var(--kickerOffset,0px)}
}