@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:300; font-display:swap; src:url('assets/fonts/spectral-300-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('assets/fonts/spectral-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:300; font-display:swap; src:url('assets/fonts/spectral-300.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/spectral-500.woff2') format('woff2'); }

/* ——————————————————————————————————————————————
   Tvilum — corporate (B2B) design system
   Danish design · European production · Global scale.
   Industrial, precise, partner-grade. Extends the
   consumer prototype's tokens into a corporate register.
   —————————————————————————————————————————————— */

:root {
  --cream:#f5f1ea;
  --paper:#fdfcfa;
  --ink:#1b1813;
  --ink-soft:#5c564b;
  --ink-faint:#8a8377;
  --line:rgba(27,24,19,0.12);
  --line-strong:rgba(27,24,19,0.22);
  --walnut:#6e4f37;
  --brass:#a3814f;
  --oak:#e9dfce;
  --dark:#15120e;
  --dark-2:#1f1b15;
  --dark-soft:#cfc6b8;
  --dark-line:rgba(253,252,250,0.13);
  --max:1280px;
  --pad:clamp(20px,4vw,48px);
  --radius:2px;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Inter",-apple-system,"Helvetica Neue",sans-serif;
  font-size:16px; line-height:1.6; color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--oak); }
.serif { font-family:"Spectral",Georgia,serif; }

.wrap { max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ——— top ribbon ——— */
.ribbon {
  background:var(--ink); color:rgba(253,252,250,0.85);
  font-size:12px; letter-spacing:0.06em; text-align:center; padding:9px var(--pad);
}
.ribbon strong { color:#fff; font-weight:500; }
.ribbon .sep { color:var(--brass); padding:0 6px; }

/* ——— nav ——— */
.nav {
  position:sticky; top:0; z-index:60;
  background:rgba(245,241,234,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px; }
.wordmark {
  font-family:"Spectral",Georgia,serif; font-weight:500; font-size:27px;
  letter-spacing:0.01em; line-height:1; color:var(--ink); white-space:nowrap;
}
.wordmark .badge {
  font-family:"Inter",sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--brass);
  vertical-align:super; margin-left:7px;
}
.nav-links { display:flex; gap:30px; font-size:14px; font-weight:450; letter-spacing:0.01em; }
.nav-links a { position:relative; padding:4px 0; color:var(--ink-soft); transition:color 0.25s; white-space:nowrap; }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right 0.35s var(--ease); }
.nav-links a:hover { color:var(--ink); }
.nav-links a:hover::after { right:0; }
.nav-links a.active { color:var(--ink); }
.nav-links a.active::after { right:0; }
.nav-right { display:flex; align-items:center; gap:18px; }
.nav-ext { font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink-faint); transition:color 0.25s; white-space:nowrap; }
.nav-ext:hover { color:var(--ink); }
.nav .btn { padding:10px 20px; }

.btn {
  display:inline-flex; align-items:center; gap:10px; padding:13px 26px;
  font-size:14px; font-weight:500; letter-spacing:0.03em;
  border-radius:999px; border:1px solid var(--ink); transition:all 0.3s var(--ease); cursor:pointer;
  font-family:inherit;
}
.btn-solid { background:var(--ink); color:var(--cream); }
.btn-solid:hover { background:var(--walnut); border-color:var(--walnut); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--cream); }
.btn .arr { transition:transform 0.3s var(--ease); }
.btn:hover .arr { transform:translateX(4px); }

/* mobile nav toggle */
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:999px; background:transparent; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:16px; height:1.5px; background:var(--ink); transition:transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle span::before { position:absolute; transform:translateY(-5px); }
.nav-toggle span::after { position:absolute; transform:translateY(5px); }
.nav-toggle.open span { background:transparent; }
.nav-toggle.open span::before { transform:rotate(45deg); }
.nav-toggle.open span::after { transform:rotate(-45deg); }

/* ——— kicker / section head ——— */
.kicker {
  font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass); margin-bottom:24px;
}
section { padding:clamp(72px,9vw,128px) 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head h2 {
  font-family:"Spectral",Georgia,serif; font-weight:300;
  font-size:clamp(34px,3.4vw,52px); line-height:1.1; letter-spacing:-0.01em; max-width:24ch;
}
.sec-head .side { font-size:15px; color:var(--ink-soft); max-width:40ch; padding-bottom:6px; }

/* ——— hero (dark, factory-led) ——— */
.hero {
  position:relative; min-height:calc(100vh - 110px); display:flex; align-items:flex-end;
  color:var(--cream); overflow:hidden; border-bottom:1px solid var(--line);
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; animation:heroIn 2s var(--ease) both; }
.hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(75deg, rgba(13,11,8,0.92) 0%, rgba(13,11,8,0.7) 42%, rgba(13,11,8,0.25) 100%); }
@keyframes heroIn { from { transform:scale(1.07); } to { transform:scale(1); } }
.hero-inner { position:relative; z-index:1; padding:clamp(48px,8vw,120px) 0 clamp(52px,6vw,88px); width:100%; }
.hero .kicker { color:var(--brass); }
.hero h1 {
  font-family:"Spectral",Georgia,serif; font-weight:300;
  font-size:clamp(40px,5.2vw,78px); line-height:1.04; letter-spacing:-0.018em;
  max-width:16ch; margin-bottom:28px; color:#fff;
}
.hero h1 em { font-style:italic; color:var(--brass); }
.hero .lede { font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:rgba(253,252,250,0.82); max-width:56ch; margin-bottom:38px; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; }
.hero .btn-solid { background:var(--cream); color:var(--ink); border-color:var(--cream); }
.hero .btn-solid:hover { background:var(--brass); border-color:var(--brass); color:var(--ink); }
.hero .btn-ghost { background:transparent; color:var(--cream); border-color:rgba(253,252,250,0.5); }
.hero .btn-ghost:hover { background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ——— proof-point stat bar (the 5 hard proof points) ——— */
.proof { background:var(--dark-2); color:var(--cream); border-bottom:1px solid var(--line); }
.proof-inner { display:grid; grid-template-columns:repeat(5,1fr); }
.proof .pp {
  padding:clamp(30px,4vw,52px) 22px; text-align:center; border-left:1px solid var(--dark-line);
}
.proof .pp:first-child { border-left:none; }
.proof .pp .n {
  font-family:"Spectral",Georgia,serif; font-weight:300; color:#fff;
  font-size:clamp(34px,3.4vw,50px); line-height:1.05; letter-spacing:-0.01em;
}
.proof .pp .n .u { font-size:0.5em; color:var(--brass); margin-left:2px; letter-spacing:0; }
.proof .pp .l { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dark-soft); margin-top:12px; line-height:1.5; }

/* ——— position strip ——— */
.position { background:var(--cream); }
.position-inner { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.position h2 { font-family:"Spectral",Georgia,serif; font-weight:300; font-size:clamp(30px,3vw,46px); line-height:1.12; letter-spacing:-0.01em; }
.position h2 em { font-style:italic; color:var(--walnut); }
.position p { color:var(--ink-soft); font-size:16.5px; line-height:1.75; margin-bottom:18px; max-width:56ch; }
.position .lead-line { color:var(--ink); font-weight:450; }

/* ——— fact strip (light, generic) ——— */
.facts { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.facts-inner { display:grid; grid-template-columns:repeat(4,1fr); }
.facts .fact { padding:28px 24px; text-align:center; border-left:1px solid var(--line); }
.facts .fact:first-child { border-left:none; }
.facts .fact .n { font-family:"Spectral",Georgia,serif; font-weight:400; font-size:30px; line-height:1.15; }
.facts .fact .l { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

/* ——— pillars / nav cards (homepage section teasers) ——— */
.pillars { background:var(--paper); border-bottom:1px solid var(--line); }
.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar {
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--cream); overflow:hidden; transition:border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.pillar:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.pillar .ph { aspect-ratio:16/10; overflow:hidden; background:var(--oak); }
.pillar .ph img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.pillar:hover .ph img { transform:scale(1.05); }
.pillar .pb { padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.pillar .num { font-family:"Spectral",Georgia,serif; font-style:italic; font-size:14px; color:var(--brass); margin-bottom:12px; }
.pillar h3 { font-family:"Spectral",Georgia,serif; font-weight:500; font-size:22px; margin-bottom:10px; }
.pillar p { font-size:14.5px; color:var(--ink-soft); margin-bottom:18px; flex:1; }
.pillar .go { font-size:13px; font-weight:500; letter-spacing:0.04em; color:var(--walnut); border-bottom:1px solid transparent; align-self:flex-start; transition:border-color 0.25s; }
.pillar:hover .go { border-color:var(--walnut); }

/* ——— page head (inner pages) ——— */
.page-head { border-bottom:1px solid var(--line); padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px); background:var(--cream); }
.page-head .kicker { margin-bottom:22px; }
.page-head h1 {
  font-family:"Spectral",Georgia,serif; font-weight:300;
  font-size:clamp(38px,4.6vw,68px); line-height:1.05; letter-spacing:-0.018em; max-width:18ch; margin-bottom:24px;
}
.page-head h1 em { font-style:italic; color:var(--walnut); }
.page-head .intro { font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:var(--ink-soft); max-width:60ch; }

/* ——— split (image + copy) ——— */
.split { border-bottom:1px solid var(--line); }
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.split.flip .split-grid { direction:rtl; }
.split.flip .split-grid > * { direction:ltr; }
.split-copy h2 { font-family:"Spectral",Georgia,serif; font-weight:300; font-size:clamp(30px,3vw,46px); line-height:1.12; margin-bottom:22px; letter-spacing:-0.01em; }
.split-copy h2 em { font-style:italic; color:var(--walnut); }
.split-copy p { color:var(--ink-soft); margin-bottom:16px; max-width:54ch; }
.split-img { position:relative; }
.split-img > img { width:100%; aspect-ratio:4/3.2; object-fit:cover; border-radius:var(--radius); }
.split-img .cap { margin-top:12px; font-family:"Spectral",Georgia,serif; font-style:italic; font-size:13px; color:var(--ink-faint); }
.checklist { list-style:none; margin:26px 0 34px; border-top:1px solid var(--line); }
.checklist li { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
.checklist li::before { content:"—"; color:var(--brass); font-weight:600; }
.checklist li strong { color:var(--ink); font-weight:550; }

/* ——— capability grid ——— */
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cap {
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,2.4vw,34px);
  background:var(--paper); transition:border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cap:hover { border-color:var(--line-strong); background:var(--cream); }
.cap .num { font-family:"Spectral",Georgia,serif; font-style:italic; font-size:14px; color:var(--brass); display:block; margin-bottom:16px; }
.cap h3 { font-family:"Spectral",Georgia,serif; font-weight:500; font-size:21px; margin-bottom:10px; line-height:1.25; }
.cap p { font-size:14.5px; color:var(--ink-soft); line-height:1.7; }

/* ——— spec rows (technical setup list) ——— */
.specs { border-top:1px solid var(--line-strong); margin-top:clamp(40px,5vw,64px); }
.spec { display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:32px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.spec .st { font-family:"Spectral",Georgia,serif; font-size:22px; font-weight:500; }
.spec .sd { font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:64ch; }

/* ——— dark band ——— */
.dark { background:var(--dark); color:var(--cream); border-bottom:1px solid var(--dark-line); }
.dark .kicker { color:var(--brass); }
.dark .sec-head h2 { color:#fff; }
.dark .sec-head .side { color:var(--dark-soft); }

/* ——— production gallery (dark) ——— */
.craft-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.craft-cell { position:relative; overflow:hidden; border-radius:var(--radius); }
.craft-cell img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), opacity 0.6s; opacity:0.92; }
.craft-cell:hover img { transform:scale(1.04); opacity:1; }
.craft-cell figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; font-size:13px;
  letter-spacing:0.03em; color:rgba(253,252,250,0.92);
  background:linear-gradient(transparent, rgba(15,12,9,0.82));
}
.c-a { grid-column:span 7; aspect-ratio:16/10; }
.c-b { grid-column:span 5; aspect-ratio:auto; }
.c-c { grid-column:span 4; aspect-ratio:4/3.4; }
.c-d { grid-column:span 4; aspect-ratio:4/3.4; }
.c-e { grid-column:span 4; aspect-ratio:4/3.4; }

/* ——— process flow (partner model A→Z) ——— */
.flow { counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-strong); }
.flow .step { position:relative; padding:34px 28px 38px; border-left:1px solid var(--line); }
.flow .step:first-child { border-left:none; }
.flow .step .sn { font-family:"Spectral",Georgia,serif; font-style:italic; font-size:15px; color:var(--brass); margin-bottom:18px; display:block; }
.flow .step h3 { font-family:"Spectral",Georgia,serif; font-weight:500; font-size:21px; margin-bottom:10px; }
.flow .step p { font-size:14px; color:var(--ink-soft); line-height:1.65; }
.flow .step .arrow { position:absolute; top:40px; right:-9px; width:18px; height:18px; color:var(--brass); z-index:2; }

/* ——— integration row (under one roof) ——— */
.integration { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.integration .chip {
  font-family:"Spectral",Georgia,serif; font-size:18px; padding:14px 26px;
  border:1px solid var(--dark-line); border-radius:999px; color:var(--cream);
  display:inline-flex; align-items:center; gap:12px;
}
.integration .chip .d { width:6px; height:6px; border-radius:999px; background:var(--brass); }

/* ——— footprint ——— */
.footprint-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-strong); margin-top:clamp(36px,4vw,56px); }
.footprint-stats .fs { padding:34px 28px; border-left:1px solid var(--line); }
.footprint-stats .fs:first-child { border-left:none; }
.footprint-stats .fs .n { font-family:"Spectral",Georgia,serif; font-weight:300; font-size:clamp(40px,4vw,58px); line-height:1; }
.footprint-stats .fs .n .u { font-size:0.45em; color:var(--brass); }
.footprint-stats .fs h4 { font-size:15px; font-weight:600; letter-spacing:0.02em; margin:14px 0 8px; }
.footprint-stats .fs p { font-size:14px; color:var(--ink-soft); line-height:1.65; max-width:34ch; }

.regions { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:clamp(40px,5vw,64px); padding-top:clamp(34px,4vw,52px); border-top:1px solid var(--line); }
.region h4 { font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.region ul { list-style:none; }
.region li { font-size:15px; color:var(--ink-soft); padding:7px 0; border-bottom:1px solid var(--line); }

/* ——— certifications row ——— */
.certs { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:820px; margin:0 auto; }
.cert { font-family:"Spectral",Georgia,serif; font-size:18px; padding:14px 28px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); transition:all 0.3s var(--ease); }
.cert:hover { border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }

/* ——— CTA band (dark) ——— */
.cta { background:var(--dark); color:var(--cream); text-align:center; }
.cta h2 { font-family:"Spectral",Georgia,serif; font-weight:300; font-size:clamp(32px,3.6vw,56px); line-height:1.08; color:#fff; max-width:22ch; margin:0 auto 20px; letter-spacing:-0.01em; }
.cta p { color:rgba(253,252,250,0.7); max-width:54ch; margin:0 auto 36px; font-size:16px; }
.cta .row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta .btn-solid { background:var(--cream); color:var(--ink); border-color:var(--cream); }
.cta .btn-solid:hover { background:var(--brass); border-color:var(--brass); color:var(--ink); }
.cta .btn-ghost { color:var(--cream); border-color:rgba(253,252,250,0.5); }
.cta .btn-ghost:hover { background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ——— bridge band (link to consumer/PIM site) ——— */
.bridge { background:var(--oak); border-bottom:1px solid var(--line); }
.bridge-inner { display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,72px); }
.bridge h2 { font-family:"Spectral",Georgia,serif; font-weight:300; font-size:clamp(26px,2.6vw,40px); line-height:1.15; margin-bottom:14px; letter-spacing:-0.01em; }
.bridge p { color:var(--ink-soft); max-width:54ch; font-size:15px; }
.bridge .btn-solid { white-space:nowrap; }

/* ——— contact ——— */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:start; }
.contact-copy h2 { font-family:"Spectral",Georgia,serif; font-weight:300; font-size:clamp(28px,2.8vw,42px); line-height:1.12; margin-bottom:20px; }
.contact-copy p { color:var(--ink-soft); margin-bottom:18px; max-width:50ch; }
.contact-detail { margin-top:30px; border-top:1px solid var(--line); }
.contact-detail .row { display:grid; grid-template-columns:140px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }
.contact-detail .row .k { color:var(--ink-faint); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; }
.contact-detail .row a { color:var(--walnut); }
.form { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,3vw,40px); }
.form .field { margin-bottom:20px; }
.form label { display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.form input, .form select, .form textarea {
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--cream); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:13px 15px; transition:border-color 0.25s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--ink); }
.form textarea { resize:vertical; min-height:120px; }
.form .btn { width:100%; justify-content:center; margin-top:6px; }
.form .note { font-size:12.5px; color:var(--ink-faint); margin-top:14px; text-align:center; }

/* ——— footer ——— */
footer { background:var(--ink); color:rgba(253,252,250,0.75); }
.foot-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding:clamp(56px,7vw,88px) 0 48px; }
.foot-top .wordmark { color:var(--cream); font-size:32px; }
.foot-top .tagline { margin-top:16px; font-size:14px; max-width:32ch; line-height:1.7; }
.foot-col h5 { font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(253,252,250,0.45); margin-bottom:18px; font-weight:600; }
.foot-col a, .foot-col span.fitem { display:block; font-size:14.5px; padding:5px 0; color:rgba(253,252,250,0.75); transition:color 0.25s; }
.foot-col a:hover { color:#fff; }
.foot-bottom { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:22px 0 28px; border-top:1px solid var(--dark-line); font-size:12.5px; color:rgba(253,252,250,0.45); }

/* ——— reveal ——— */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:0.08s; }
.reveal.d2 { transition-delay:0.16s; }
.reveal.d3 { transition-delay:0.24s; }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-bg img { animation:none; }
  html { scroll-behavior:auto; }
}

/* ——— responsive ——— */
@media (max-width:1020px) {
  .nav-links, .nav-ext { display:none; }
  .nav-toggle { display:inline-flex; }
  .nav.open .nav-links {
    display:flex; flex-direction:column; gap:0; position:absolute; top:70px; left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--line); padding:8px var(--pad) 18px;
  }
  .nav.open .nav-links a { padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav.open .nav-links a::after { display:none; }
  .proof-inner { grid-template-columns:repeat(2,1fr); }
  .proof .pp { border-left:1px solid var(--dark-line); border-top:1px solid var(--dark-line); }
  .proof .pp:nth-child(odd) { border-left:none; }
  .proof .pp:nth-child(-n+2) { border-top:none; }
  .proof .pp:last-child { grid-column:1 / -1; }
  .position-inner, .split-grid, .contact-grid, .bridge-inner { grid-template-columns:1fr; }
  .split.flip .split-grid { direction:ltr; }
  .pillar-grid, .cap-grid { grid-template-columns:1fr 1fr; }
  .craft-grid { grid-template-columns:1fr 1fr; }
  .c-a,.c-b,.c-c,.c-d,.c-e { grid-column:span 1; aspect-ratio:4/3; }
  .c-a { grid-column:span 2; aspect-ratio:16/10; }
  .flow { grid-template-columns:1fr 1fr; }
  .flow .step:nth-child(3) { border-left:none; }
  .flow .step .arrow { display:none; }
  .footprint-stats, .regions, .facts-inner { grid-template-columns:1fr 1fr; }
  .footprint-stats .fs:nth-child(3) { grid-column:1 / -1; border-left:none; border-top:1px solid var(--line); }
  .foot-top { grid-template-columns:1fr 1fr; }
  .sec-head { flex-direction:column; align-items:flex-start; gap:14px; }
  .bridge-inner { flex-direction:column; align-items:flex-start; gap:24px; }
}
@media (max-width:600px) {
  .pillar-grid, .cap-grid, .flow, .regions, .footprint-stats, .facts-inner, .foot-top { grid-template-columns:1fr; }
  /* proof stays 2-col (from the 1020 rule) but tighter on phones */
  .proof .pp { padding:26px 14px; }
  .proof .pp .l { letter-spacing:0.06em; }
  /* flow stacks: top dividers read better than left ones */
  .flow .step { border-left:none; border-top:1px solid var(--line); padding:30px 0 34px; }
  .flow .step:first-child { border-top:none; padding-top:0; }
  .craft-grid { grid-template-columns:1fr; }
  .c-a { grid-column:span 1; }
  .spec { grid-template-columns:1fr; gap:8px; }
  .contact-detail .row { grid-template-columns:1fr; gap:4px; }
  /* hero: defined height + bottom-weighted overlay so copy stays legible over any image */
  .hero { min-height:80vh; }
  .hero-bg::after { background:linear-gradient(180deg, rgba(13,11,8,0.3) 0%, rgba(13,11,8,0.42) 38%, rgba(13,11,8,0.78) 68%, rgba(13,11,8,0.95) 100%); }
  .hero h1 { font-size:clamp(38px,9vw,56px); margin-bottom:22px; }
  .hero .lede { font-size:16px; margin-bottom:28px; }
  /* tidy the nav on phones */
  .nav-inner { gap:12px; }
  .wordmark { font-size:24px; }
  .nav .btn { padding:9px 15px; font-size:12.5px; }
  .bridge .btn-solid { white-space:normal; }
  .cta .row .btn, .hero-ctas .btn { width:auto; }
}
@media (max-width:380px) {
  /* hand the nav over to the hamburger entirely on the smallest phones */
  .nav-right .btn-solid { display:none; }
}