/* =========================================================================
   NORTHLINE ROOFING - design system (MONOLOG register)
   Cool greige + near-black charcoal monochrome; type-led; the accent is rationed
   to interaction only. Type: Fraunces (display serif) + Hanken Grotesk (body).
   Motion is opt-in behind html.js[data-motion="on"]; base state is fully visible.
   ========================================================================= */

:root{
  --paper:#e4e1d7;         /* cool-neutral greige (light ground) */
  --paper-2:#dcd8cc;       /* slightly deeper */
  --surface:#d4cfc2;       /* cards / panels */
  --ink:#14120d;           /* near-black charcoal text */
  --ink-2:#26231c;
  --ink-dim:rgba(20,18,13,.74);
  --ink-mute:rgba(20,18,13,.62);
  --line:rgba(20,18,13,.17);
  --line-soft:rgba(20,18,13,.09);
  --accent:#a8482a;        /* one restrained clay ember, rationed to interaction */
  --accent-ink:#f1ece1;

  --night:#141109;         /* dark charcoal band */
  --night-2:#1e1a12;

  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-mono:"Space Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.2,.6,.2,1);
  --dur-sm:.35s; --dur-md:.6s; --dur-lg:1.1s;

  --container:min(92vw,1600px);
  --gutter:clamp(20px,4.5vw,72px);
}

/* Dark charcoal band (inverted) */
.invert,.section--pine{
  --paper:#141109; --paper-2:#1d190f; --surface:#252017;
  --ink:#e9e5d9; --ink-dim:rgba(233,229,217,.74); --ink-mute:rgba(233,229,217,.58);
  --line:rgba(233,229,217,.18); --line-soft:rgba(233,229,217,.09);
  background:var(--paper); color:var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
html.js[data-motion="on"]{scroll-behavior:auto}   /* Lenis owns scrolling when active */
body{
  margin:0;background:var(--paper);color:var(--ink);font-optical-sizing:auto;
  font-family:var(--f-body);font-weight:400;line-height:1.55;
  font-size:clamp(15px,1.02vw,17px);letter-spacing:-.005em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img,svg,video{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:fixed;top:-100px;left:12px;z-index:300;background:var(--ink);color:var(--paper);
  padding:12px 18px;font:600 13px/1 var(--f-body);transition:top .2s}
.skip-link:focus{top:12px}

/* ---- Layout primitives ---- */
.container{width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* Density register (Ridge standing override, craft/spacing-grid.md 2.5): section padding is the
   first lever for packed-not-sparse. Ceiling tightened from 110px to the dense-register target. */
.section{padding:clamp(48px,6vw,84px) 0;position:relative}
.section--tight{padding:clamp(30px,3.6vw,54px) 0}
/* register-mark corner ticks (engineering-drawing craft, subtle) */
.section > .container{position:relative}
.section > .container::before,.section > .container::after{content:"";position:absolute;top:-18px;width:9px;height:9px;pointer-events:none;opacity:.42;
  background:linear-gradient(var(--ink),var(--ink)) center/9px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 9px no-repeat}
.section > .container::before{left:calc(var(--gutter) - 4px)}
.section > .container::after{right:calc(var(--gutter) - 4px)}
.rule{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid var(--line);
  font:600 clamp(10px,.72vw,12px)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.rule b,.rule span:first-child{color:var(--ink)}
.eyebrow{font:600 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.grid-split{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(28px,6vw,7vw);align-items:end}

/* ---- Type scale ---- */
.display{font-family:var(--f-body);font-weight:600;line-height:.93;letter-spacing:-.042em;
  font-size:clamp(54px,8.8vw,164px);margin:0;color:var(--ink)}
.display em,.serif{font-family:var(--f-serif);font-weight:400;font-style:italic;letter-spacing:-.015em}
.h2{font-family:var(--f-body);font-weight:600;line-height:.99;letter-spacing:-.035em;font-size:clamp(36px,5.2vw,84px);color:var(--ink)}
.h3{font-family:var(--f-body);font-weight:600;line-height:1.08;letter-spacing:-.02em;font-size:clamp(23px,2.5vw,38px)}
/* type-sizing.md P4: display:sub ratio should hold ~4-6x. Pagehead h1 (.display, 164px cap) against
   .lead was running ~7.1x (flagged, ENGINE-REVIEW P2); raised the ceiling here, not shrunk the headline,
   so the pairing reads as a confident two-tier statement rather than a caption under a giant title. */
.lead{font-size:clamp(18px,1.9vw,28px);line-height:1.45;color:var(--ink-dim);max-width:46ch;font-weight:400}
.body{color:var(--ink-dim);max-width:58ch}
.body p+p{margin-top:1em}
.meta{font:600 11px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.meta b{color:var(--ink)}
.num{font-family:var(--f-body);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* Contrast-frame declaratives (about.html, services.html): full sentences set in .h3, which carries
   display-tight (1.08) leading meant for short headings. type-sizing.md failure mode 4: sub-1.1 leading
   collapses once real prose wraps. Loosen leading only, keep the serif/size, reads as an editorial
   pull-quote instead of cramped body copy. */
.statement{line-height:1.35;letter-spacing:-.01em}

/* ---- Fraunces (display serif) on headline elements; tracking retuned for a serif ---- */
.display,.h2,.h3,.hero__title,.workcard__title,.accordion__btn .ttl,.stage h3,
.matcard h3,.values h3,.standard h4,.marquee__track,.menu-panel__nav a{font-family:var(--f-display)}
/* ---- Space Mono on numerals, counters, and checkable credential codes ---- */
.fraction,.num,.stage__n,.cs-metrics .num,.statband .num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.display{letter-spacing:-.018em;line-height:.96}
.display--xl{line-height:.92}
.h2{letter-spacing:-.014em;line-height:1.0}
.h3{letter-spacing:-.01em}
.hero__title{letter-spacing:-.014em;line-height:.94;font-weight:500}
.workcard__title{letter-spacing:-.008em;line-height:1.04}
.marquee__track{letter-spacing:-.01em}
.menu-panel__nav a{letter-spacing:-.01em}

/* ---- Buttons / links ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:15px 26px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:600 13px/1 var(--f-body);letter-spacing:.01em;overflow:hidden;
  transition:background var(--dur-sm) var(--ease-out),color var(--dur-sm),border-color var(--dur-sm),transform var(--dur-sm)}
.btn .arw{transition:transform var(--dur-sm) var(--ease-out)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn--lime{background:var(--ink);border-color:var(--ink);color:var(--paper)}   /* primary = ink pill */
.btn--lime:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ulink{display:inline-flex;align-items:center;gap:10px;padding-bottom:2px;
  font:600 13px/1 var(--f-body);border-bottom:1px solid var(--line);transition:border-color var(--dur-sm),color var(--dur-sm)}
.ulink .arw{transition:transform var(--dur-sm) var(--ease-out)}
.ulink:hover{border-color:var(--accent);color:var(--accent)}
.ulink:hover .arw{transform:translate(3px,-3px)}
.tag{display:inline-block;padding:6px 13px;border:1px solid var(--line);border-radius:999px;
  font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.sample{display:inline-block;font:600 .72em/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);border:1px solid var(--line);border-radius:4px;padding:2px 7px;vertical-align:middle}

/* ---- Concept tag + progress ---- */
.concept-tag{position:fixed;z-index:120;right:14px;bottom:14px;pointer-events:none;
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(228,225,215,.94);
  color:var(--ink-dim);font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  opacity:.94;transition:opacity var(--dur-sm)}
.concept-tag:hover{opacity:1}
.scroll-progress{position:fixed;z-index:115;top:0;left:0;width:100%;height:2px;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}

/* ---- Header ---- */
.site-header{position:fixed;z-index:110;top:0;left:0;width:100%;color:var(--ink);
  transition:background var(--dur-md),color var(--dur-md),border-color var(--dur-md),transform var(--dur-md) var(--ease)}
.site-header[data-solid="true"]{background:rgba(244,240,232,.92);border-bottom:1px solid var(--line)}
.site-header.is-hidden{transform:translateY(-102%)}
body.hero-dark .site-header[data-solid="false"]{color:#f6f2ea}
body.hero-dark .site-header[data-solid="false"]::before{content:"";position:absolute;inset:0 0 -30px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,11,8,.66),transparent)}
body.hero-dark .site-header[data-solid="false"] .btn--ghost{border-color:rgba(246,242,234,.55);color:#f6f2ea}
body.hero-dark .site-header[data-solid="false"] .btn--ghost:hover{background:#f6f2ea;color:var(--ink);border-color:#f6f2ea}
.site-header__inner{display:flex;align-items:center;gap:26px;padding:18px 0}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1}
.brand svg{width:30px;height:auto;flex:none}
.brand small{display:block;font:600 9px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.nav-desktop{display:flex;gap:28px;margin-left:6px}
.nav-desktop a{font:500 15px/1 var(--f-body);letter-spacing:-.01em;position:relative;padding:6px 0;opacity:.92}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-sm) var(--ease-out)}
.nav-desktop a:hover::after,.nav-desktop a[aria-current="page"]::after{transform:scaleX(1)}
.nav-desktop a[aria-current="page"]{opacity:1}
.site-header__actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.call-link{display:inline-flex;flex-direction:column;line-height:1.05;font-weight:600;font-size:15px}
.call-link .call-link__label{font:600 8px/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.call-link:hover{color:var(--accent)}
.site-header[data-solid="true"] .call-link:hover{color:var(--accent)}
.site-header .btn--ghost{border-color:var(--line);color:var(--ink)}
.site-header .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-btn{display:none;align-items:center;gap:9px;font:600 13px/1 var(--f-body);text-transform:uppercase;letter-spacing:.06em}
.menu-btn i{position:relative;width:22px;height:9px;flex:none}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform var(--dur-sm) var(--ease),top var(--dur-sm)}
.menu-btn i::before{top:0}.menu-btn i::after{top:7px}
.menu-btn[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}

/* ---- Mobile menu ---- */
.menu-panel{position:fixed;z-index:105;inset:0;background:var(--night);color:#f3ede0;
  padding:100px var(--gutter) 40px;display:flex;flex-direction:column;
  transform:translateY(-101%);transition:transform var(--dur-md) var(--ease);visibility:hidden}
.menu-panel.is-open{transform:translateY(0);visibility:visible}
.menu-panel__nav{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.menu-panel__nav a{font-family:var(--f-body);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(40px,11vw,76px);line-height:1.04;padding:6px 0;display:flex;align-items:baseline;gap:16px;transition:color var(--dur-sm)}
.menu-panel__nav a .mono{font-size:13px;opacity:.5;font-weight:500}
.menu-panel__nav a:hover,.menu-panel__nav a[aria-current="page"]{color:var(--accent)}
.menu-panel__foot{margin-top:32px;padding-top:18px;border-top:1px solid rgba(243,237,224,.16);
  display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center;
  font:600 11px/1.4 var(--f-body);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.menu-panel__foot .call-link{font-size:22px;font-weight:600;opacity:1}

/* ---- Hero (full-bleed photo) ---- */
/* hero.md structure spec: run 85-95vh with a deliberate peek at the next section's edge rather than a
   hard 100vh cutoff, so scrolling continues a thought already in motion. 92svh keeps the same composition. */
.hero{position:relative;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:#14110d;color:#f6f2ea;padding-bottom:clamp(24px,3.6vw,50px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,11,8,.74) 0%,rgba(14,11,8,.22) 19%,transparent 40%,rgba(14,11,8,.48) 72%,rgba(14,11,8,.93) 100%)}
.hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;
  background-image:url("assets/grain.svg");background-size:190px}
.hero__inner{position:relative;z-index:3;width:100%}
.hero__metabar{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;
  padding-bottom:16px;margin-bottom:clamp(16px,2.2vw,28px);border-bottom:1px solid rgba(246,242,234,.24);
  font:600 11px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:rgba(246,242,234,.74)}
.hero__metabar b{color:#fff}
.hero__metabar .spacer{flex:1}
.hero__metabar a{display:inline-flex;gap:8px;align-items:center;color:#fff;border-bottom:1px solid transparent;transition:border-color var(--dur-sm)}
.hero__metabar a:hover{border-color:#fff}
.hero__title{font-family:var(--f-body);font-weight:600;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(58px,11.6vw,200px);color:#fff}
.hero__title em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.hero__foot{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,56px);align-items:end;margin-top:clamp(20px,2.6vw,36px)}
.hero__sub{max-width:44ch;font-size:clamp(15px,1.2vw,19px);color:rgba(246,242,234,.82)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-self:end}
.hero .btn{background:#f6f2ea;border-color:#f6f2ea;color:var(--ink)}
.hero .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hero__scroll{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--f-body);letter-spacing:.02em;color:#f6f2ea;border-bottom:1px solid rgba(246,242,234,.5);padding-bottom:3px}
.hero__scroll:hover{border-color:#f6f2ea}

/* ---- Page head (inner pages, light) ---- */
.pagehead{padding:calc(120px + clamp(22px,4.6vw,52px)) 0 clamp(20px,2.6vw,36px);position:relative}
.pagehead .lead{margin-top:20px}
.pagehead h1{margin:16px 0 0}
.pagehead__k{color:var(--ink-mute)}

/* ---- Weather strip ---- */
.weatherstrip{display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  font:600 clamp(11px,1vw,15px)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.weatherstrip i{flex:1;height:1px;background:var(--line)}

/* ---- Work cards ---- */
.worklist{display:grid;gap:clamp(40px,6vw,90px);margin-top:clamp(30px,4vw,60px)}
.workrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:center}
.workrow:nth-child(even){direction:rtl}
.workrow:nth-child(even)>*{direction:ltr}
.workcard{display:block;transition:transform var(--dur-md) var(--ease)}
@media(hover:hover){.workcard:hover{transform:translateY(-5px)}}
.workcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface);border-radius:2px}
.workcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.workcard:hover .workcard__media img{transform:scale(1.045)}
.workcard__cap{margin-top:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.workcard__title{display:block;font-family:var(--f-body);font-weight:600;letter-spacing:-.03em;line-height:1.02;font-size:clamp(28px,3.4vw,52px)}
.workcard__taxon{display:block;margin-top:12px;font:600 11px/1.5 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.workcard .circle-arw{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  font-size:17px;flex:none;transition:background var(--dur-sm),color var(--dur-sm),border-color var(--dur-sm)}
.workcard:hover .circle-arw{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* work index grid */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 8px}
.filterbar button{padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  font:600 12px/1 var(--f-body);letter-spacing:.02em;color:var(--ink-dim);
  transition:border-color var(--dur-sm),color var(--dur-sm),background var(--dur-sm)}
.filterbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filterbar button:hover{color:var(--ink)}
.workgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px);margin-top:32px}
/* editorial work index: focal full-width card + staggered asymmetric grid + baseline wordmark */
.workindex{counter-reset:wk;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px) clamp(28px,4vw,56px);margin-top:clamp(34px,4vw,60px)}
.workindex .workcard[hidden]{display:none}
.workindex .workcard{grid-column:span 1}
.workindex .workcard--focal{grid-column:1 / -1}
.workindex .workcard--focal .workcard__media{aspect-ratio:16/8}
.workindex .workcard--focal .workcard__title{font-size:clamp(40px,6vw,96px)}
.workindex .workcard--drop{--drop-y:clamp(24px,5vw,80px)}
.work-baseline{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line);padding-top:24px}
.work-baseline__word{font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;line-height:.8;font-size:clamp(64px,15vw,260px);color:var(--ink)}
.work-baseline__meta{font:600 11px/1.6 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);text-align:right;flex:none}
/* editorial figure index on each work photo (MONOLOG-style) */
.workgrid,.worklist{counter-reset:wk}
.workcard{counter-increment:wk}
.workcard__media::before{content:counter(wk,decimal-leading-zero);position:absolute;z-index:2;top:15px;left:15px;
  background:rgba(20,16,10,.6);color:#fff;padding:6px 11px;border-radius:999px;
  font:600 11px/1 var(--f-body);letter-spacing:.08em}

/* ---- Featured band (full-bleed image, dark) ---- */
.feature{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--night);color:#fff}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.feature::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(20,16,10,.72))}
.feature__inner{position:relative;z-index:2;padding-block:clamp(36px,5vw,72px)}
.feature--crew::after{background:linear-gradient(180deg,rgba(20,16,10,.34) 0%,transparent 34%,rgba(20,16,10,.82))}
.feature__meta{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,58px);margin-top:clamp(26px,3vw,40px);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.feature__meta span{display:flex;flex-direction:column;gap:5px}
.feature__meta b{font:600 15px/1 var(--f-body);letter-spacing:-.01em;color:#fff}
.feature__meta i{font:400 12px/1 var(--f-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* ---- Photo row (3-up texture band) ---- */
.photorow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(30px,4vw,56px)}
.photorow figure{margin:0;position:relative;overflow:hidden}
.photorow figure::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.photorow img{width:100%;height:clamp(220px,26vw,360px);object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02);transition:transform var(--dur-md)}
@media(hover:hover){.photorow figure:hover img{transform:scale(1.03)}}
.photorow figcaption{margin-top:11px;display:flex;justify-content:space-between;gap:10px;
  font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.photorow figcaption b{color:var(--ink);font-weight:600}
@media(max-width:760px){.photorow{grid-template-columns:1fr 1fr}.photorow figure:last-child{grid-column:1/-1}
  .photorow img{height:clamp(200px,52vw,300px)}}

/* ---- Services / accordion ---- */
.cap-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,7vw);align-items:start;padding-top:clamp(30px,4vw,64px)}
.accordion{border-top:1px solid var(--line)}
.accordion__item{border-bottom:1px solid var(--line)}
.accordion__btn{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;padding:26px 0;text-align:left}
.accordion__btn .idx{font:600 12px/1 var(--f-body);letter-spacing:.06em;color:var(--ink-mute)}
.accordion__btn .ttl{font-family:var(--f-body);font-weight:600;letter-spacing:-.02em;font-size:clamp(21px,2.5vw,36px);line-height:1.05}
.accordion__btn .pm{width:22px;height:22px;position:relative;flex:none}
.accordion__btn .pm::before,.accordion__btn .pm::after{content:"";position:absolute;background:currentColor;transition:transform var(--dur-sm) var(--ease-out)}
.accordion__btn .pm::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.accordion__btn .pm::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%)}
.accordion__item[data-open="true"] .pm::after{transform:translateX(-50%) scaleY(0)}
.accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-md) var(--ease)}
.accordion__item[data-open="true"] .accordion__panel{grid-template-rows:1fr}
.accordion__panel>div{overflow:hidden;min-height:0;padding:0 0 0 62px;color:var(--ink-dim);max-width:60ch;display:grid;gap:14px}
.accordion__item[data-open="true"] .accordion__panel>div{padding-bottom:28px}
.accordion__panel .meta{color:var(--ink-mute)}

/* ---- Process ---- */
.fraction{position:sticky;top:104px;z-index:5;width:fit-content;margin-inline-start:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-family:var(--f-mono);font-weight:600;font-size:clamp(16px,1.8vw,22px);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fraction span{color:var(--ink-mute)}
.stage{display:grid;grid-template-columns:.42fr 1.2fr .82fr;gap:clamp(20px,3.4vw,52px);
  padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--line);align-items:start}
.stage:last-child{padding-bottom:clamp(70px,10vw,140px)}
.stage__n{font-family:var(--f-mono);font-weight:600;font-size:clamp(26px,3vw,42px);line-height:1;
  letter-spacing:-.01em;color:var(--line);font-variant-numeric:tabular-nums}
.stage__k{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.stage h3{margin:14px 0 12px}
.stage .body{max-width:54ch}
.stage__img{overflow:hidden;position:relative;align-self:start}
.stage__img img{width:100%;height:clamp(150px,15vw,214px);object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02);transition:transform var(--dur-md)}
.stage__img::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
@media(hover:hover){.stage:hover .stage__img img{transform:scale(1.03)}}
@media(max-width:860px){.stage__img img{height:clamp(180px,42vw,260px)}}

/* ---- Material cards ---- */
.matgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(30px,4vw,56px)}
.matcard__tex{aspect-ratio:4/5;overflow:hidden;background:var(--surface);border-radius:2px}
.matcard__tex img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.matcard:hover .matcard__tex img{transform:scale(1.04)}
.matcard .idx{display:block;margin:18px 0 8px;font:600 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.matcard h3{margin-bottom:10px}
.matcard p{color:var(--ink-dim);font-size:15px}

/* ---- Stat / credential / values / standard ---- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-top:2px}
.statband>div{border-top:2px solid var(--ink);padding-top:20px}
.statband .num{font-size:clamp(34px,4.6vw,64px);display:block;line-height:.9}
.statband small{display:block;margin-top:12px;font:600 11px/1.5 var(--f-body);letter-spacing:.06em;color:var(--ink-mute)}
/* honest-zero: the empty metrics as an authored statement, not blank dashes */
.honestzero{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,68px);align-items:start;margin-top:clamp(30px,4vw,52px)}
.honestzero__lead{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-start}
.honestzero__lead .num{font-family:var(--f-display);font-weight:500;font-size:clamp(76px,11vw,160px);line-height:.78;color:var(--ink);flex:none}
.honestzero__lead h3{margin-bottom:12px}
.honestzero__slots{border-top:1px solid var(--line)}
.honestzero__slots .slot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.honestzero__slots .slot__k{font:500 15px/1.3 var(--f-body);color:var(--ink)}
.honestzero__slots .slot__v{display:flex;gap:8px;align-items:center;white-space:nowrap;font:600 10px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

.cred{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:clamp(24px,3vw,40px);background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.cred button{background:var(--paper);padding:20px 22px;text-align:left;display:grid;gap:8px;transition:background var(--dur-sm)}
.cred button:hover{background:var(--surface)}
.cred .k{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.cred .v{font-family:var(--f-mono);font-weight:500;font-size:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:0;font-variant-numeric:tabular-nums}
.cred .badge{font:500 8px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);padding:3px 6px;border-radius:3px}
.cred .copy{font:500 10px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.cred button.copied .copy{color:var(--accent)}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(28px,4vw,52px)}
.values>div{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:12px;min-height:190px}
.values .k{font:600 12px/1 var(--f-body);letter-spacing:.06em;color:var(--ink-mute)}
.values p{color:var(--ink-dim);font-size:15px;margin-top:auto}

.standard{display:grid;gap:0;margin-top:clamp(24px,3vw,44px);border-top:1px solid var(--line)}
.standard>div{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}
.standard .n{font-family:var(--f-body);font-weight:600;color:var(--accent);font-size:15px}
.standard h4{font-family:var(--f-body);font-weight:600;letter-spacing:-.02em;font-size:21px}
.standard p{color:var(--ink-dim);font-size:15px;margin-top:6px;max-width:66ch}

/* ---- Contact / form / dialog ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,7vw);padding-top:clamp(28px,4vw,56px)}
.field{display:grid;gap:8px;margin-bottom:22px}
.field label{font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field textarea,.field select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:12px 0;color:var(--ink);border-radius:0;transition:border-color var(--dur-sm)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:2px}
.field textarea{resize:vertical;min-height:92px}
.form-note{font:500 13px/1.5 var(--f-body);color:var(--ink-mute);margin-top:8px}
.form-msg{color:var(--accent);font:600 14px/1.4 var(--f-body);margin-top:14px}
.urgent{border:1px solid var(--line);border-radius:4px;padding:clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;background:var(--paper-2)}
.urgent .u-k{font:600 11px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.urgent h3{margin-top:8px}
.dialog{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px}
.dialog.is-open{display:grid}
.dialog__scrim{position:absolute;inset:0;background:rgba(20,16,10,.5)}
.dialog__card{position:relative;z-index:1;width:min(480px,92vw);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:clamp(26px,4vw,40px);box-shadow:0 30px 80px rgba(20,16,10,.28)}
.dialog__close{position:absolute;top:16px;right:18px;font:600 12px/1 var(--f-body);color:var(--ink-mute)}

/* ---- Marquee ---- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:clamp(16px,2vw,26px) 0}
.marquee__track{display:flex;width:max-content;gap:.4em;font-family:var(--f-body);font-weight:600;
  font-size:clamp(40px,8vw,110px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.marquee__track em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}
.marquee__track span{padding-right:.4em}

/* ---- Image strip (auto-scrolling roof gallery) ---- */
.imagestrip{overflow:hidden;background:var(--paper-2);border-block:1px solid var(--line);
  padding:clamp(30px,4vw,58px) 0;position:relative;z-index:2}
.imagestrip__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:0 clamp(18px,5vw,64px);margin-bottom:clamp(20px,2.6vw,34px)}
.imagestrip__ey{font:600 11px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute)}
.imagestrip__count{font:400 12px/1 var(--f-serif);font-style:italic;color:var(--ink-mute)}
.imagestrip__view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.imagestrip__track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform}
html.js[data-motion="on"] .imagestrip__track{animation:imgscroll 66s linear infinite}
.imagestrip__track:hover,.imagestrip.is-off .imagestrip__track{animation-play-state:paused}
@keyframes imgscroll{to{transform:translateX(-50%)}}
.imagestrip figure{margin:0;flex:none;width:clamp(258px,25vw,412px);position:relative}
.imagestrip figure img{width:100%;height:clamp(190px,20vw,312px);object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02);transition:filter var(--dur-md),transform var(--dur-md)}
.imagestrip figure:hover img{filter:saturate(1.04) contrast(1.03);transform:scale(1.014)}
.imagestrip figcaption{margin-top:11px;display:flex;justify-content:space-between;gap:12px;
  font:600 10px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.imagestrip figcaption b{color:var(--ink);font-weight:600}
.imagestrip figure::before{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none;
  height:clamp(190px,20vw,312px)}
@media (max-width:640px){.imagestrip figure{width:74vw}}

/* ---- Footer (MONOLOG oversized-wordmark destination) ---- */
.site-footer{background:var(--night);color:#e9e5d9;padding:clamp(56px,6vw,96px) 0 34px;position:relative;z-index:3}
.footer-cta{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(28px,5vw,64px);align-items:end;padding-bottom:clamp(38px,5vw,66px);border-bottom:1px solid rgba(233,229,217,.16)}
.footer-wordmark{display:block;font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:.9;font-size:clamp(46px,8vw,138px);color:#fff;transition:color var(--dur-sm)}
.footer-wordmark em{font-style:italic;font-weight:400}
.footer-wordmark:hover{color:var(--accent)}
.footer-cta__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start;justify-self:end}
.footer-cta__side .btn--lime{background:#e9e5d9;border-color:#e9e5d9;color:var(--night)}
.footer-cta__side .btn--lime:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.footer-call{display:inline-flex;flex-direction:column;line-height:1.1;color:#fff;font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.4vw,32px)}
.footer-call__k{font:600 9px/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:rgba(233,229,217,.55);margin-bottom:6px}
.footer-call:hover{color:var(--accent)}
.footer-storm{font:500 13px/1.5 var(--f-body);color:rgba(233,229,217,.66);max-width:32ch}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;padding-top:clamp(34px,4vw,56px)}
.footer-grid .body{color:rgba(233,229,217,.66);max-width:34ch;margin-top:16px}
.footer-grid .brand{color:#fff}
.footcol h4{font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:rgba(233,229,217,.5);margin-bottom:16px}
.footcol a{display:block;padding:5px 0;color:rgba(233,229,217,.78);font-size:15px}
.footcol a:hover{color:#fff}
.footcol p{color:rgba(233,229,217,.7);font-size:14px;max-width:28ch}
.footer-cred{margin-top:clamp(28px,4vw,48px);padding-top:20px;border-top:1px solid rgba(233,229,217,.16);
  display:flex;flex-wrap:wrap;gap:12px 28px;font:600 11px/1.6 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:rgba(233,229,217,.55)}
.footer-cred .sample{color:rgba(233,229,217,.7);border-color:rgba(233,229,217,.24)}
.footer-bottom{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font:600 10px/1.6 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:rgba(233,229,217,.45)}
/* subtle site-wide film grain (MONOLOG texture) */
body::before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;background-image:url("assets/grain.svg");background-size:170px}

/* ---- Mobile action bar ---- */
.actionbar{position:fixed;z-index:118;left:0;right:0;bottom:0;display:none;background:rgba(244,240,232,.97);border-top:1px solid var(--line)}
.actionbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;font:600 13px/1 var(--f-body);letter-spacing:.01em}
.actionbar a+a{border-left:1px solid var(--line)}
.actionbar .call{color:var(--ink)}
.actionbar .book{background:var(--ink);color:var(--paper)}

/* ---- Case study ---- */
.cs-hero{position:relative;min-height:82svh;display:flex;align-items:flex-end;overflow:hidden;background:#14110d;color:#fff;padding-bottom:clamp(28px,4vw,52px)}
.cs-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cs-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,12,9,.5) 0%,transparent 32%,rgba(15,12,9,.36) 64%,rgba(15,12,9,.86) 100%)}
.cs-hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;background-image:url("assets/grain.svg");background-size:190px}
.cs-hero__inner{position:relative;z-index:3;padding-bottom:2px}
.cs-taxon{display:flex;flex-wrap:wrap;gap:10px 24px;font:600 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:20px}
.cs-taxon b{color:#fff}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.cs-metrics>div{border-top:2px solid var(--ink);padding-top:20px}
.cs-metrics .num{font-size:clamp(32px,4.4vw,58px);display:block;line-height:.9}
.cs-metrics small{display:block;margin-top:10px;font:600 11px/1.5 var(--f-body);letter-spacing:.06em;color:var(--ink-mute)}
.cs-body{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,5vw,70px)}
.cs-figure{margin:0}
.cs-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface);border-radius:2px}
.cs-figure figcaption{margin-top:12px;font:600 11px/1.5 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}

/* ---- Signature: the roof draws itself (scroll-scrubbed clay line) ---- */
.signature{overflow:hidden}
.signature__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.signature__stage{position:relative;margin-top:clamp(24px,3vw,44px)}
.roofdraw{width:100%;height:auto;display:block}
.roofdraw__seams path{stroke:var(--line);stroke-width:1.2;fill:none}
.roofdraw__line{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:square;stroke-linejoin:round}
.signature__title{position:absolute;left:0;bottom:6%;max-width:12ch;color:var(--ink);margin:0}
.signature__note{position:absolute;right:0;bottom:8%;max-width:26ch;text-align:right;color:var(--ink-dim);font-size:14px}
@media(max-width:700px){.signature__title{position:static;max-width:none;margin-top:18px}.signature__note{display:none}}

/* ---- Reveal / motion (opt-in) ---- */
/* --drop-y carries a permanent per-card stagger offset (see .workindex .workcard--drop) so it
   survives the reveal-in transition instead of being erased once .in-view wins on specificity. */
.reveal{opacity:1;transform:translateY(var(--drop-y,0px))}
html.js[data-motion="on"] .reveal{opacity:0;transform:translateY(calc(var(--drop-y,0px) + 24px));transition:opacity var(--dur-lg) var(--ease),transform var(--dur-lg) var(--ease)}
html.js[data-motion="on"] .reveal.in-view{opacity:1;transform:translateY(var(--drop-y,0px))}
html.js[data-motion="on"] .reveal[data-d="1"]{transition-delay:.08s}
html.js[data-motion="on"] .reveal[data-d="2"]{transition-delay:.16s}
html.js[data-motion="on"] .reveal[data-d="3"]{transition-delay:.24s}
/* clip-path image reveal (door-opening: wipe up while inner img settles from scale) */
.reveal-img{overflow:hidden}
.reveal-img>img{clip-path:none}
html.js[data-motion="on"] .reveal-img>img{clip-path:inset(0 0 101% 0);transform:scale(1.16);
  transition:clip-path 1.2s var(--ease),transform 1.9s var(--ease)}
html.js[data-motion="on"] .reveal-img.in-view>img{clip-path:inset(0 0 0 0);transform:scale(1)}
/* hero image: load settle (1.12 -> 1.04), then script.js scroll-scrubs the same element 1.04 -> 1
   as the hero clears the viewport (transform-only, ease:none while scrubbing, no fighting engines). */
.hero__media img{transform:none}
html[data-motion="on"] .hero__media img{transform:scale(1.12);transition:transform 2.2s var(--ease)}
html[data-motion="on"] .hero.is-in .hero__media img{transform:scale(1.04)}
/* case-study hero: same load-settle + scroll-scrub template as the homepage hero (hero.md: "use as the
   template for any future authored-photo hero"). Entering a case is a genuine threshold, per
   motion-engineering.md P1, so it earns the same weight, not a static frame. */
.cs-hero img{transform:none}
html[data-motion="on"] .cs-hero img{transform:scale(1.1);transition:transform 2.2s var(--ease)}
html[data-motion="on"] .cs-hero.is-in img{transform:scale(1.045)}
/* masked hero headline: lines rise from behind a mask (signature moment, CSS-auto so it never sticks) */
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.02em}
.hero__title .ln>span{display:block}
html[data-motion="on"] .hero__title .ln>span{transform:translateY(112%);animation:heroLine 1.2s var(--ease) .15s forwards}
html[data-motion="on"] .hero__title .ln:nth-child(2)>span{animation-delay:.29s}
@keyframes heroLine{from{transform:translateY(112%)}to{transform:translateY(0)}}
/* magnetic button */
.magnetic{will-change:transform}
@media (hover:hover) and (pointer:fine){html[data-motion="on"] .magnetic{transition:transform .5s var(--ease)}}
html[data-motion="on"] .marquee__track{animation:marquee 30s linear infinite}
.marquee.is-paused .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- Responsive ---- */
@media(max-width:1080px){
  .nav-desktop{display:none}
  .menu-btn{display:inline-flex}
  .call-link{display:none}
}
@media(max-width:860px){
  :root{--container:min(92vw,760px)}
  .grid-split,.cap-grid,.contact-grid,.cs-body{grid-template-columns:1fr;gap:32px}
  .workrow{grid-template-columns:1fr;direction:ltr;gap:18px}
  .workrow:nth-child(even){direction:ltr}
  .workgrid,.matgrid,.values,.workindex{grid-template-columns:1fr}
  .workindex .workcard--drop{--drop-y:0px}
  .work-baseline__word{font-size:26vw}
  .statband,.cs-metrics{grid-template-columns:repeat(2,1fr)}
  .hero__foot{grid-template-columns:1fr;gap:24px}
  .hero__cta{justify-self:start;flex-direction:row;flex-wrap:wrap;align-items:center}
  .footer-cta,.footer-grid,.honestzero{grid-template-columns:1fr;gap:28px}
  .footer-cta__side{justify-self:start;align-items:flex-start}
  .stage{grid-template-columns:1fr;gap:14px}
  .fraction{position:static;margin-bottom:12px;margin-inline-start:0;width:auto}
  .site-header__actions .btn--ghost{display:none}
  .actionbar{display:flex}
  body{padding-bottom:52px}
}
@media(max-width:520px){
  .statband,.cs-metrics,.matgrid{grid-template-columns:1fr}
  .concept-tag{font-size:10px;bottom:60px;right:10px}
  .accordion__panel>div{padding-left:0}
  .hero__metabar{font-size:10px;gap:8px 18px}
}
/* Reduced-motion path is QA-only, gated behind ?qwrm=1 (see each page's inline bootstrap script).
   OS-level prefers-reduced-motion is intentionally never queried: motion is forced on for every visitor. */
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html[data-motion="off"] .reveal{opacity:1!important;transform:none!important}
html[data-motion="off"] .hero__media img{transform:none!important}
html[data-motion="off"] .cs-hero img{transform:none!important}