/* ============================================================
   BERNARDO HORTA - SHARED DESIGN SYSTEM
   One family: Orkney (all headings + text > 16px)
   Fallback: Inter → Helvetica → Arial
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face{font-family:"Orkney";src:url("fonts/orkney-light-webfont.woff") format("woff");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Orkney";src:url("fonts/orkney-regular-webfont.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Orkney";src:url("fonts/orkney-medium-webfont.woff") format("woff");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Orkney";src:url("fonts/orkney-bold-webfont.woff") format("woff");font-weight:700;font-style:normal;font-display:swap;}
/* Inter - fallback face (loads so the fallback is real) */
@font-face{font-family:"Inter";src:url("fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* Fraunces - classic serif italic, used only for highlight statements / pull-quotes */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;}

/* ---------- TOKENS ---------- */
:root{
  --ink:#0a0a0a;
  --paper:#fafafa;
  --paper-2:#ffffff;
  --paper-3:#ededed;
  --muted:#6f6d66;
  --muted-d:#9c9a92;
  --line:#e2e2e2;
  --line-d:#2b2b28;
  --accent:#00ff12;
  --accent-ink:#0a0a0a;
  --accent-deep:#0a7a1f; /* same hue as --accent, darkened for legible text on light backgrounds (--accent itself fails contrast there) */
  --error:#ff6b6b;

  /* one type family - Orkney, with the requested fallbacks */
  --font:"Orkney","Inter",Helvetica,Arial,sans-serif;
  --display:"Orkney","Inter",Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  --maxw:1240px;
  --maxw-read:760px;
  --gut:clamp(20px,5vw,64px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);

  --shadow-e:0 1px 2px rgba(10,10,10,.04),0 8px 24px -12px rgba(10,10,10,.14);
  --shadow-f:0 2px 6px rgba(10,10,10,.06),0 30px 60px -28px rgba(10,10,10,.28);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display);font-weight:700;line-height:1.04;color:var(--ink);}
/* defined type scale - even steps, 7px apart, h1 48px down to h6 14px.
   hero-style h1s (case-hero, homepage hero, cv name) opt out via their own selector's higher specificity. */
h1{font-size:48px;}
h2{font-size:41px;}
h3{font-size:34px;}
h4{font-size:27px;}
h5{font-size:20px;}
h6{font-size:14px;}
p{margin:0;}
::selection{background:var(--accent);color:var(--accent-ink);}

/* grain overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- UTILITIES ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.read{max-width:var(--maxw-read);}
.band-dark{background:var(--ink);color:var(--paper);}

.eyebrow{
  font-family:var(--font);font-weight:600;font-size:12px;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;
}
.eyebrow.on-dark{color:var(--muted-d);}

/* signature highlight: the marked phrase flips to classic serif italic and its
   green highlighter sweeps in once its nearest .reveal ancestor is in view. */
.mark{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.04em;
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent) 100%);
  background-repeat:no-repeat;background-position:0 62%;background-size:0 .82em;
  padding:0 .04em;transition:background-size .85s .2s var(--e-out);
}
.reveal.in .mark{background-size:100% .82em;}
@media (scripting:none){.mark{background-size:100% .82em;}}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:15px;
  padding:.95em 1.7em;border-radius:100px;
  transition:transform .4s var(--e-out),background .4s var(--e-out),color .4s var(--e-out),box-shadow .4s var(--e-out),border-color .4s var(--e-out);
}
.btn .arw{transition:transform .4s var(--e-out);}
.btn:hover .arw{transform:translate(3px,-3px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,255,18,.6);}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{transform:translateY(-2px);box-shadow:var(--shadow-e);}
.btn-ghost{border:1px solid var(--line-d);color:var(--paper);}
.btn-ghost:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px);}
.btn-ghost-l{border:1px solid var(--line);color:var(--ink);}
.btn-ghost-l:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- NAV ---------- */
header.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;border-bottom:1px solid transparent;
  transition:background .5s var(--e-out),box-shadow .5s var(--e-out),border-color .5s var(--e-out);
}
header.nav.scrolled{
  background:rgba(248,248,248,.82);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font);font-weight:700;font-size:1.05rem;color:var(--ink);transition:opacity .3s var(--e-out);}
.brand:hover{opacity:.65;}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
.nav-links{display:flex;align-items:center;gap:2.4rem;}
.nav-links a{font-size:14px;font-weight:500;position:relative;padding:.35em 0;}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:.05em;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e-out);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left;}
.nav-cta{
  font-size:14px;font-weight:600;border:1px solid var(--ink);border-radius:100px;padding:.6em 1.25em;
  transition:background .35s var(--e-out),color .35s var(--e-out),transform .35s var(--e-out);
}
.nav-cta:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px);}
.nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;}
.burger span{width:22px;height:2px;background:var(--ink);transition:transform .35s var(--e-out),opacity .25s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.m-menu{
  position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;flex-direction:column;
  justify-content:center;gap:1rem;padding:var(--gut);transform:translateY(-100%);
  transition:transform .55s var(--e-out);
}
.m-menu.open{transform:translateY(0);}
.m-menu a{font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,3.4rem);line-height:1.05;}
.m-menu a .idx{font-weight:500;font-size:.7rem;color:var(--muted);vertical-align:super;margin-right:.6rem;}

/* ---------- MARQUEE ---------- */
.marquee{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);overflow:hidden;padding:1.15rem 0;background:var(--ink);}
.marquee .row{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:scrollx 34s linear infinite;}
.marquee .item{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,2vw,1.5rem);color:var(--paper);display:inline-flex;align-items:center;gap:3rem;}
.marquee .item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
@keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-d);padding-block:clamp(48px,6vw,72px);}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;}
.foot-brand-mark{font-family:var(--font);font-weight:700;font-size:1.15rem;color:var(--paper);}
.foot-brand p{color:var(--muted-d);font-size:14px;margin-top:1rem;max-width:26ch;}
.foot-cols{display:flex;gap:clamp(2.5rem,6vw,5rem);flex-wrap:wrap;}
.foot-col h3{font-size:12px;text-transform:uppercase;color:var(--muted-d);margin-bottom:1rem;font-weight:700;}
.foot-col a{display:block;font-size:15px;padding:.3em 0;color:var(--paper);position:relative;width:max-content;}
.foot-col a::after{content:"";position:absolute;left:0;bottom:.15em;height:1.5px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e-out);}
.foot-col a:hover::after{transform:scaleX(1);transform-origin:left;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,5rem);padding-top:1.6rem;border-top:1px solid var(--line-d);color:var(--muted-d);font-size:13px;}
.to-top{display:inline-flex;align-items:center;gap:.5em;color:var(--paper);font-size:13px;}
.to-top .arw{transition:transform .4s var(--e-out);}
.to-top:hover .arw{transform:translateY(-3px);}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-out),transform .9s var(--e-out);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .marquee .row,.hero-scroll .track::after{animation:none;}
}
/* if JS is unavailable, the IntersectionObserver in site.js never adds .in -
   don't let that hide content; show everything plainly instead */
@media (scripting:none){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- SHARED RESPONSIVE ---------- */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  .foot-top{gap:2.5rem;}
}

/* ============================================================
   CASE STUDY SYSTEM  (scoped to <body class="case">)
   Shared by every case-study page (dali, sector-sites, ...)
   ============================================================ */
body.case{background:#fff;}
.case main{overflow:clip;}
.case header.nav.scrolled{background:rgba(255,255,255,.82);}

/* eyebrows read stronger on case-study pages */
.case .eyebrow{font-size:15px;font-weight:600;color:#4a4842;}
.case .eyebrow.on-dark{color:var(--muted-d);}
/* the "Case study" eyebrow sits below the back link, not beside it */
.case-hero .eyebrow{display:block;}

/* --- hero --- */
/* 76px = exact fixed-nav height; anything less hides the back link under the nav */
.case-hero{padding-top:76px;padding-bottom:0;}
.case-back{display:inline-flex;align-items:center;gap:.5em;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:2.2rem;transition:color .3s var(--e-out),gap .3s var(--e-out);}
.case-back:hover{color:var(--ink);gap:.8em;}
.case-back .arw{transition:transform .3s var(--e-out);}
.case-back:hover .arw{transform:translateX(-3px);}
.case-hero h1{font-size:clamp(2.38rem,8.4vw,5.95rem);line-height:.9;margin-bottom:1.2rem;}
.case-hero .lead{font-size:clamp(1.4rem,3.2vw,2.4rem);font-weight:500;line-height:1.16;max-width:26ch;}

/* meta bar */
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem;margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.8rem;border-top:1px solid var(--line);}
.case-meta dt{font-size:11.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.55rem;}
.case-meta dd{margin:0;font-size:1rem;font-weight:500;line-height:1.45;}

/* hero image - shown in full, never cropped */
.hero-shot{margin-top:clamp(2.4rem,5vw,4rem);}
.hero-shot img{max-width:100%;width:auto;height:auto;margin-inline:auto;border-radius:16px;}
/* wide in-flow figure: escapes the reading column and grows to the same
   1440px width as the case header band. Place it directly inside a section,
   NOT inside a .wrap. */
.figure--band{max-width:1440px;margin-inline:auto;padding-inline:var(--gut);}
/* 2x2 photo grid inside a wide band figure: two on top, two below, no gaps.
   Pair with .figure--band on the outer <figure> for the 1440px width. */
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-2x2 img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;display:block;}
@media(max-width:620px){.grid-2x2{grid-template-columns:1fr;gap:10px;}}

/* text + media side by side: prose on one side, a narrow figure (e.g. a
   phone video) on the other, top-aligned */
.solution-split{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:clamp(1.5rem,2.6vw,2.2rem);}
.solution-split .prose{padding-right:80px;}
.solution-split .figure{margin-top:0;width:320px;}
@media(max-width:900px){.solution-split{grid-template-columns:1fr;}.solution-split .prose{padding-right:0;}.solution-split .figure{width:320px;margin-inline:auto;}}
/* reversed: media first (left), prose second (right); swap side by
   reordering the markup, figure then prose, alongside this class */
.solution-split--rev{grid-template-columns:auto 1fr;}
.solution-split--rev .prose{padding-right:0;padding-left:80px;}
/* wider media column: prose loses its right padding and ~100px of width,
   the phone's column grows by that same amount, and the phone sits at the
   column's left edge (closer to the text) instead of centered in it */
.solution-split--lg-media{grid-template-columns:1fr 420px;}
.solution-split--lg-media .prose{padding-right:0;}
.solution-split--lg-media .figure{width:100%;}
.solution-split--lg-media .figure .device{margin-inline:0;}
.solution-split--lg-media .figure figcaption{max-width:320px;margin-inline:0;text-align:left;}
@media(max-width:900px){
  .solution-split--lg-media{grid-template-columns:1fr;}
  .solution-split--lg-media .figure{width:320px;margin-inline:auto;}
  .solution-split--lg-media .figure .device{margin-inline:auto;}
  .solution-split--lg-media .figure figcaption{margin-inline:auto;text-align:center;}
}
@media(max-width:900px){.solution-split--rev{grid-template-columns:1fr;}.solution-split--rev .prose{padding-left:0;}}
/* .case figure resets margins with higher specificity; re-assert centering */
.case .figure--band{margin-left:auto;margin-right:auto;}
/* flush section: zero vertical padding, and its figures carry zero vertical
   margins. Combine with .figure--band for edge-to-edge editorial image bands. */
.case .section--flush{padding-block:0;}
.case .section--flush .figure{margin-top:0;margin-bottom:0;}
/* case header image: dedicated band below the case-meta bar on every case study.
   The band spans the full body width; its content may grow up to 1440px. */
.case-header-img{max-width:1440px;margin-inline:auto;padding-inline:var(--gut);margin-top:clamp(2.4rem,5vw,4rem);margin-bottom:24px;}
.case-header-img img{max-width:100%;width:auto;height:auto;margin-inline:auto;border-radius:16px;display:block;}
.case-header-img .device--ipad{width:min(1440px,100%);}

/* section scaffolding */
.case .section{padding-block:clamp(56px,8vw,104px);}
.case .section.tight{padding-block:clamp(40px,5vw,64px);}
.sec-head{margin-bottom:clamp(1.8rem,3.5vw,2.8rem);}
.sec-head .eyebrow{margin-bottom:1.2rem;}
.sec-head h2,.sec-title{font-size:41px;line-height:1.08;max-width:22ch;}
/* section kicker: uppercase label with an accent number, sits above the section h2 */
.kicker{display:flex;align-items:baseline;gap:.55em;font-family:var(--font);font-weight:700;font-size:15px;text-transform:uppercase;color:#4a4842;margin-bottom:1.1rem;}
.kicker.on-dark{color:var(--muted-d);}
.kicker-num{color:var(--accent-deep);font-weight:700;}
.kicker.on-dark .kicker-num{color:var(--accent);}
.case .prose{max-width:min(var(--maxw-read),72ch);}
.case .prose h2{margin-bottom:clamp(1.2rem,2.2vw,1.8rem);}
.case .prose p{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.7;color:#26241f;}
.case .prose p{margin-bottom:24px;}
.case .prose p:last-child{margin-bottom:0;}
.case .prose.muted p{color:var(--muted);}

/* ---- editorial highlight statements: geometric sans, with the highlighted phrase in classic serif italic ---- */
.statement{
  font-family:var(--font);font-style:normal;font-weight:700;
  font-size:clamp(2rem,4.9vw,3.5rem);line-height:1.14;max-width:24ch;
}
/* alignment variety */
.statement--center{margin-inline:auto;text-align:center;}
.statement--right{margin-left:auto;text-align:right;}

/* pull-quote: a centred moment with an oversized serif quotation mark */
.pullquote{padding-block:clamp(64px,9.5vw,128px);text-align:center;}
.pullquote p{
  font-family:var(--font);font-style:normal;font-weight:700;
  font-size:clamp(1.9rem,4.7vw,3.3rem);line-height:1.22;max-width:24ch;
  margin-inline:auto;position:relative;
}
.pullquote p::before{
  content:"\201C";display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(3.4rem,8vw,6rem);line-height:.7;color:var(--accent);
  margin:0 0 .1em;opacity:.95;
}
/* on dark bands the highlighter becomes a solid green block so text stays readable */
.band-dark .mark{color:var(--accent-ink);background-position:0 0;background-size:0 100%;padding:.05em .24em;border-radius:2px;transition:background-size .85s .2s var(--e-out);}
.band-dark .reveal.in .mark,.band-dark .reveal.in.mark{background-size:100% 100%;}

/* figures - natural ratios, no forced crop */
.case figure{margin:0;margin-bottom:24px;}
.figure{margin-top:clamp(2rem,4vw,3.4rem);}
.figure img{max-width:100%;width:auto;height:auto;display:block;margin-inline:auto;border-radius:14px;}
/* diagrams present clean and large - no card, border or shading */
.figure--diagram{background:transparent;border:none;border-radius:0;padding:0;}
.figure--diagram img{border-radius:8px;}
.figure figcaption{margin-top:1rem;font-size:15px;color:var(--muted);text-align:center;max-width:560px;margin-inline:auto;}
.figure--wide{width:min(100%,1160px);}
/* large, but stays within the content column (no viewport bleed) */
.figure--bleed{width:100%;}
.figure--bleed img{max-width:100%;width:auto;margin-inline:auto;}
.figure--portrait{display:flex;justify-content:center;}
.figure--portrait img{width:auto;max-width:min(360px,100%);border-radius:12px;}
/* flexible container: images can spill up to ~200px past the reading column for movement (viewport-safe) */
.case{--out:200px;}
/* kept within the main container - no spill past the body width */
.figure--out,.figure--out-l,.figure--out-r{width:100%;margin-inline:auto;margin-left:auto;margin-right:auto;}
/* .case figure{margin:0} (below) outranks the rule above on specificity;
   restate it here so figure--out* still centers inside .case pages */
.case .figure--out,.case .figure--out-l,.case .figure--out-r{margin-left:auto;margin-right:auto;}

/* video (Vimeo) - aspect ratio + max-width match the original embed exactly (no letterbox bars) */
.video-frame{position:relative;width:100%;margin-inline:auto;overflow:hidden;border-radius:14px;background:#000;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.c-flow .video-frame{margin-top:clamp(1.5rem,2.6vw,2.2rem);}

/* two-up */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.8rem);margin-top:clamp(2rem,4vw,3.4rem);align-items:center;}

/* key principles grid */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem) clamp(1.2rem,3vw,2.6rem);margin-top:clamp(2rem,4vw,3rem);}
.principle{padding-top:1.2rem;border-top:2px solid var(--ink);}
.principle .pn{font-weight:700;color:var(--accent-deep);font-size:.95rem;}
.principle p{margin-top:.85rem;font-size:1.06rem;line-height:1.42;font-weight:500;}
@media(max-width:820px){.principles{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.principles{grid-template-columns:1fr;}}

/* --- generated case-study flow --- */
.c-flow > * + *{margin-top:clamp(1.5rem,2.6vw,2.2rem);}
.c-flow > .figure{margin-top:0;}
.c-flow > * + .figure{margin-top:clamp(1.5rem,2.6vw,2.2rem);}
.c-flow .c-h3{margin-top:clamp(2rem,3.2vw,3rem);font-size:34px;line-height:1.12;}
.c-flow .c-h-sm{margin-top:calc(clamp(1.5rem,2.6vw,2.2rem) + 24px);font-size:24px;line-height:1.2;}
.statement--sm{font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.2;max-width:30ch;}
.statement--sm.statement--center{max-width:34ch;}
.duo .figure img{border-radius:12px;}
/* stats row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,3.5vw,2.8rem) clamp(1.6rem,3vw,3rem);border-top:1px solid var(--line);padding-top:clamp(1.6rem,3vw,2.2rem);}
.band-dark .stats{border-color:var(--line-d);}
.stat-n{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){.stats{grid-template-columns:1fr;}}
.band-dark .stat-n{color:#fff;}
.stat-k{margin-top:.55rem;font-size:15px;color:var(--muted);line-height:1.35;}
.band-dark .stat-k{color:var(--muted-d);}

/* --- process / feature steps --- */
.process{border-top:1px solid var(--line);}
.step{padding-block:clamp(48px,6vw,80px);border-bottom:1px solid var(--line);}
.step-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.6rem;}
.step-num{font-size:clamp(1rem,1.6vw,1.15rem);font-weight:700;color:var(--muted);flex:none;font-variant-numeric:tabular-nums;transform:translateY(-.15em);}
.step-head h3{font-size:34px;line-height:1.12;}
.step .prose{margin-left:0;}
.step-body .figure{margin-top:clamp(1.8rem,3.5vw,3rem);}
@media(min-width:820px){
  /* text runs two-up and compact so the media can be the protagonist below */
  .step .prose{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,3.2rem);}
  .step .prose p + p{margin-top:0;}
  /* split feature: text beside a smaller supporting shot */
  .step-body.split{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
  .step-body.split .prose{display:block;max-width:none;}
  .step-body.split .prose p + p{margin-top:1.3rem;}
  .step-body.split .figure{margin-top:0;}
}

/* --- prev / next project navigation --- */
.pagenav{padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--line);background:var(--paper-3);}
/* docked: a compact 80px bar fixed to the viewport bottom, always visible, that
   grows into the full-size prev/next nav as its slot scrolls into view. */
.pagenav.is-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--pn-h,80px);overflow:hidden;
  display:flex;align-items:center;padding-block:0;box-shadow:0 -14px 34px -26px rgba(10,10,10,.35);}
.pagenav.is-dock .pagenav-inner{width:100%;}
/* title scales smoothly with the bar: ~20px condensed up to its full size (var set by JS) */
.pagenav.is-dock .t{font-size:var(--pn-t,20px);}
.pagenav.is-dock .pagenav-item{gap:.4rem;}
.pagenav-space{width:100%;}
.pagenav-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);}
.pagenav-item{display:flex;flex-direction:column;gap:.7rem;min-width:0;}
.pagenav-next{align-items:flex-end;text-align:right;}
.pagenav .k{font-size:12px;text-transform:uppercase;color:#5c5a53;display:inline-flex;align-items:center;gap:.5em;transition:color .4s var(--e-out);}
.pagenav .t{font-size:clamp(1.5rem,4vw,2.8rem);line-height:1.02;font-weight:700;color:var(--ink);
  background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 100%;background-size:0 3px;
  transition:background-size .5s var(--e-out),transform .5s var(--e-out);}
.pagenav-next .t{background-position:100% 100%;}
.pagenav .arw{display:inline-block;transition:transform .5s var(--e-out);}
.pagenav-item:hover .k{color:var(--ink);}
.pagenav-item:hover .t{background-size:100% 3px;}
.pagenav-prev:hover .t{transform:translateX(-6px);}
.pagenav-next:hover .t{transform:translateX(6px);}
.pagenav-prev:hover .arw{transform:translateX(-5px);}
.pagenav-next:hover .arw{transform:translateX(5px);}
.pagenav-item:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
@media(max-width:620px){.pagenav-inner{grid-template-columns:1fr;gap:2rem;}.pagenav-next{align-items:flex-start;text-align:left;}.pagenav-next .t{background-position:0 100%;}}

@media(max-width:820px){
  .case-meta{grid-template-columns:repeat(2,1fr);}
  .duo{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .case-meta{grid-template-columns:1fr 1fr;gap:1.3rem;}
  .hero-shot img{border-radius:12px;}
  .case-header-img img{border-radius:12px;}
}

/* ---------- Device mockups (v2) ----------
   Realistic iPad / iPhone frames with a screenshot inside.
   Compose classes on .device:
     type:        device--iphone | device--ipad
     orientation: device--portrait | device--landscape  (defaults: iphone portrait, ipad landscape)
     mode:        device--static (image pinned top-center, overflow hidden)
                  device--scroll (visitor scrolls the screen; default)
                  device--auto   (scrolls by itself with 3 pauses; site.js drives it,
                                  any interaction hands control to the visitor)
   Markup:
     <div class="device device--iphone device--auto">
       <span class="device-hw" aria-hidden="true"></span>
       <div class="device-screen" tabindex="0" role="region" aria-label="..."><img ...></div>
     </div>
   Side-by-side devices go in a .device-row. */
.device{position:relative;margin-inline:auto;
  background:linear-gradient(145deg,#3e3e44 0%,#1b1b1f 22%,#0e0e11 58%,#26262c 100%);
  border:1px solid #08080a;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset -1px -1px 1px rgba(0,0,0,.55),
    0 2px 6px rgba(10,10,10,.08),
    0 34px 70px -30px rgba(10,10,10,.38);
  transition:transform .5s var(--e-out);}
.device:hover{transform:translateY(-4px);}
/* soft contact shadow on the surface below */
.device::before{content:"";position:absolute;z-index:-1;left:7%;right:7%;bottom:-16px;height:24px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(10,10,10,.32),transparent 72%);
  filter:blur(7px);}
/* glass reflection sweeping across the screen */
.device::after{content:"";position:absolute;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.05) 16%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 82%,rgba(255,255,255,.04) 100%);}
.device-screen{position:relative;z-index:1;overflow-y:auto;height:100%;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 0 6px rgba(0,0,0,.35);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(10,10,10,.28) transparent;}
.device-screen::-webkit-scrollbar{width:5px;}
.device-screen::-webkit-scrollbar-thumb{background:rgba(10,10,10,.28);border-radius:100px;}
.device-screen::-webkit-scrollbar-track{background:transparent;}
.device-screen img{display:block;width:100%;height:auto;}
.device-screen:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
/* a dark filled dot for the cursor, standing in for a fingertip */
.device--scroll .device-screen,.device--auto .device-screen{cursor:pointer;}
.device--scroll.is-unlocked .device-screen,.device--auto.is-unlocked .device-screen{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='9' fill='%230a0a0a' fill-opacity='.78'/%3E%3C/svg%3E") 13 13,grab;}
.device-screen.is-dragging{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='11' fill='%230a0a0a' fill-opacity='.92'/%3E%3C/svg%3E") 13 13,grabbing;}
.device--scroll .device-screen img,.device--auto .device-screen img{-webkit-user-drag:none;user-select:none;}
.device-hw{position:absolute;z-index:4;pointer-events:none;}
/* "click to interact" hint: shows while a scrollable screen is still locked */
.device-tip{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) translateY(6px);
  pointer-events:none;opacity:0;white-space:nowrap;
  background:rgba(10,10,10,.88);color:var(--paper);font-size:13px;font-weight:600;
  padding:.6em 1.1em;border-radius:100px;box-shadow:0 0 20px rgba(10,10,10,.25);
  transition:opacity .3s var(--e-out),transform .3s var(--e-out);}
.device:hover .device-tip{opacity:1;transform:translate(-50%,-50%);}
.device.is-unlocked .device-tip{display:none;}
@media(prefers-reduced-motion:reduce){.device-tip{transition:none;}}

/* modes */
.device--static .device-screen{overflow:hidden;}
/* static screens: the shot always fits the screen WIDTH, pinned to the top;
   anything taller than the screen is clipped at the bottom, anything shorter
   leaves the screen background below */
.device--static .device-screen img{width:100%;height:auto;}
/* scroll + auto screens are virtually scrolled (transform-driven, hard-clamped
   at the edges): no native rubber-band, no unpainted white areas */
.device--scroll .device-screen,.device--auto .device-screen{overflow:hidden;}
.device--scroll .device-screen img,.device--auto .device-screen img{will-change:transform;}
.device--scroll.is-manual .device-screen,.device--auto.is-manual .device-screen{overflow-y:auto;}
.device--scroll.is-manual .device-screen img,.device--auto.is-manual .device-screen img{will-change:auto;}
@media(prefers-reduced-motion:reduce){
  .device{transition:none;}
  .device:hover{transform:none;}
  .device--scroll .device-screen,.device--auto .device-screen{overflow-y:auto;}
}

/* ----- iPhone ----- */
.device--iphone{width:min(320px,100%);padding:9px;border-radius:52px;}
.device--iphone::after{inset:9px;border-radius:43px;}
.device--iphone .device-screen{aspect-ratio:390/844;border-radius:43px;}
/* no camera pill on the iPhone frame (clean screen, by request) */
.device--iphone .device-hw{display:none;}
/* power (right) + volume (left) */
.device--iphone .device-btn-a,.device--iphone .device-btn-b{position:absolute;background:linear-gradient(90deg,#3a3a40,#1c1c20);border-radius:2px;}
.device--iphone .device-btn-a{right:-3px;top:21%;width:3px;height:62px;border-radius:0 2px 2px 0;}
.device--iphone .device-btn-b{left:-3px;top:18%;width:3px;height:88px;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#1c1c20,#3a3a40);}
/* iPhone landscape */
.device--iphone.device--landscape{width:min(620px,100%);}
.device--iphone.device--landscape .device-screen{aspect-ratio:844/390;}
.device--iphone.device--landscape .device-btn-a{right:auto;left:21%;top:-3px;width:62px;height:3px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#3a3a40,#1c1c20);}
.device--iphone.device--landscape .device-btn-b{left:auto;right:18%;top:auto;bottom:-3px;width:88px;height:3px;border-radius:0 0 2px 2px;
  background:linear-gradient(0deg,#3a3a40,#1c1c20);}

/* ----- iPad ----- */
.device--ipad{width:min(880px,100%);padding:15px;border-radius:34px;}
.device--ipad::after{inset:15px;border-radius:20px;}
.device--ipad .device-screen{aspect-ratio:4/3;border-radius:20px;}
/* front camera dot, centered on the "top" bezel (left edge in landscape) */
.device--ipad .device-hw{left:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;
  background:#1f2f3a;border-radius:50%;box-shadow:0 0 2px rgba(120,180,255,.4),inset 0 0 1px #000;}
.device--ipad .device-btn-a,.device--ipad .device-btn-b{position:absolute;background:linear-gradient(180deg,#3a3a40,#1c1c20);border-radius:2px;}
.device--ipad .device-btn-a{top:-3px;left:6%;width:52px;height:3px;border-radius:2px 2px 0 0;}
.device--ipad .device-btn-b{top:-3px;left:calc(6% + 64px);width:52px;height:3px;border-radius:2px 2px 0 0;}
/* iPad portrait */
.device--ipad.device--portrait{width:min(560px,100%);}
.device--ipad.device--portrait .device-screen{aspect-ratio:3/4;}
.device--ipad.device--portrait .device-hw{left:50%;top:5px;transform:translateX(-50%);}
.device--ipad.device--portrait .device-btn-a{left:auto;right:-3px;top:6%;width:3px;height:52px;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#3a3a40,#1c1c20);}
.device--ipad.device--portrait .device-btn-b{left:auto;right:-3px;top:calc(6% + 64px);width:3px;height:52px;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#3a3a40,#1c1c20);}

/* layout helpers */
.device-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(1.6rem,4vw,3.2rem);}
.figure--devices{max-width:100%;}
.figure--devices figcaption{text-align:center;}

/* ---------- Highlight rows ----------
   Alternating media/text blocks: image on one side, title + paragraph on the
   other; add .hl--flip to swap sides. Stacks to one column on small screens. */
.hl-list{display:flex;flex-direction:column;gap:clamp(3rem,6vw,5rem);}
.hl{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.hl-media{margin:0;}
.hl-media img{max-width:100%;width:auto;height:auto;border-radius:14px;margin-inline:auto;display:block;}
.hl-copy h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;margin-bottom:1rem;}
.hl-copy p{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:46ch;}
.hl--flip .hl-media{order:2;}
@media(max-width:900px){
  .hl{grid-template-columns:1fr;gap:1.6rem;}
  .hl--flip .hl-media{order:0;}
}

/* ---------- Case-study imagery: soft shadow, no displacement ----------
   Every image on a case page carries a centered soft glow (zero offset),
   including the device mockups, whose offset ambient + contact shadows are
   replaced here so nothing casts sideways or downward. */
/* shadows are OPT-IN: images carry no shadow by default; add .figure--shadow
   to the <figure> (works on .hl-media too) for the soft, non-displaced glow */
/* native video inside a figure (self-hosted, chrome-less) */
.case .figure video{width:100%;height:auto;display:block;}
.case .figure--shadow > img{
  box-shadow:0 0 6px rgba(10,10,10,.05),0 0 28px rgba(10,10,10,.14);
}
.case .device{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset -1px -1px 1px rgba(0,0,0,.55),
    0 0 8px rgba(10,10,10,.08),
    0 0 48px rgba(10,10,10,.20);
}
.case .device::before{display:none;}

/* case-study images: square corners (device mockups keep their rounded
   hardware screens; this applies to plain imagery only) */
.case .figure img,
.case .hl-media img,
.case .case-header-img img{border-radius:0;}

/* ---------- WIP corner ribbon ----------
   Diagonal flag pinned to the top-right corner, above the nav. On hover or
   keyboard focus it grows a touch and the full note slides in underneath. */
/* hidden for now: delete the next line to bring the flag back */
.wip{display:none;}
.wip{position:fixed;top:0;right:0;z-index:110;width:118px;height:118px;pointer-events:none;}
.wip-corner{position:absolute;inset:0;overflow:hidden;}
.wip-tag{
  position:absolute;top:24px;right:-46px;width:168px;padding:.42rem 0;
  display:block;text-align:center;pointer-events:auto;cursor:default;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.18em;
  transform:rotate(45deg);transform-origin:50% 50%;
  box-shadow:0 1px 2px rgba(10,10,10,.14),0 10px 22px -12px rgba(10,10,10,.45);
  transition:transform .45s var(--e-out);
}
.wip:hover .wip-tag,.wip:focus-within .wip-tag{transform:rotate(45deg) translateY(-2px) scale(1.08);}
.wip-tag:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.wip-msg{
  position:absolute;top:100%;right:14px;width:290px;max-width:calc(100vw - 28px);
  padding:.85rem 1rem;border-radius:10px;
  background:var(--ink);color:var(--paper);
  font-size:12.5px;line-height:1.55;text-align:left;
  box-shadow:0 2px 6px rgba(10,10,10,.10),0 24px 48px -20px rgba(10,10,10,.55);
  opacity:0;transform:translateY(-8px);
  transition:opacity .4s var(--e-out),transform .4s var(--e-out);
}
.wip:hover .wip-msg,.wip:focus-within .wip-msg{opacity:1;transform:translateY(0);}
/* the full-screen mobile menu owns the corner while it is open */
body:has(.m-menu.open) .wip{opacity:0;pointer-events:none;}
@media(max-width:900px){
  .wip{width:96px;height:96px;}
  .wip-tag{top:16px;right:-52px;width:152px;font-size:10.5px;letter-spacing:.16em;}
}
@media(prefers-reduced-motion:reduce){
  .wip-tag,.wip-msg{transition:none;}
  .wip:hover .wip-tag,.wip:focus-within .wip-tag{transform:rotate(45deg);}
}