/* ============================================================
   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:hover .row{animation-play-state:paused;}
.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 --- */
.case-hero{padding-top:clamp(96px,12vh,110px);padding-bottom:clamp(30px,4vw,52px);}
.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;}

/* 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 p{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.7;color:#26241f;}
.case .prose p + p{margin-top:1.3rem;}
.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;}
.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:13px;color:var(--muted);display:flex;align-items:center;max-width:520px;}
.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;}

/* 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 .c-h3{margin-top:clamp(2rem,3.2vw,3rem);font-size:34px;line-height:1.12;}
.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:13px;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;}
}

/* ---------- Device mockups ----------
   Reusable frames simulating an iPad (landscape) and an iPhone (portrait).
   The screen scrolls, so full-page captures are fully browsable, never cropped.
   Usage:
     <div class="device device--iphone"><div class="device-screen" tabindex="0" role="region" aria-label="...">
       <img src="..." alt="..."></div></div>
   Group side-by-side devices in a .device-row. */
.device{position:relative;margin-inline:auto;background:#101013;border:1px solid #2c2c31;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--shadow-f);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out);}
.device:hover{transform:translateY(-4px);}
.device-screen{position:relative;overflow-y:auto;background:#fff;height:100%;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  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;}
/* iPhone, portrait */
.device--iphone{width:min(320px,100%);padding:9px;border-radius:52px;}
.device--iphone .device-screen{aspect-ratio:390/844;border-radius:43px;}
.device--iphone::after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:33%;max-width:106px;height:24px;background:#101013;border-radius:100px;z-index:2;pointer-events:none;}
.device--iphone::before{content:"";position:absolute;right:-3px;top:20%;width:3px;height:60px;
  background:#2c2c31;border-radius:0 2px 2px 0;}
/* iPad, landscape */
.device--ipad{width:min(880px,100%);padding:15px;border-radius:34px;}
.device--ipad .device-screen{aspect-ratio:4/3;border-radius:20px;}
.device--ipad::before{content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);
  width:3px;height:54px;background:#2c2c31;border-radius:2px 0 0 2px;}
/* 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;}
@media(prefers-reduced-motion:reduce){.device{transition:none;}.device:hover{transform:none;}}