/* Layout: one wide reading column, a sticky section index on desktop, one Three.js moment in the hero. */
:root{
  --bg:#FFFFFF; --surface:#F5F6F8; --ink:#111418; --muted:#596170; --line:#E2E5EA;
  --accent:#1F4A8C; --accent-soft:#E5ECF6; --warm:#A86F2C; --warm-soft:#F4ECE0;
  --display:"Schibsted Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono:"Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step--1:.8125rem; --step0:1rem; --step1:1.1875rem; --step2:1.5rem; --step3:2.125rem; --step4:clamp(2.5rem, 5.4vw, 4.25rem);
  --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1216; --surface:#171B21; --ink:#E6E9EE; --muted:#98A2B3; --line:#2A303A;
  --accent:#8FB1E8; --accent-soft:#1A2638; --warm:#D9A866; --warm-soft:#2C241A; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0F1216; --surface:#171B21; --ink:#E6E9EE; --muted:#98A2B3; --line:#2A303A;
  --accent:#8FB1E8; --accent-soft:#1A2638; --warm:#D9A866; --warm-soft:#2C241A; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:var(--step0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
::selection{background:var(--accent); color:var(--bg)}

.wrap{max-width:1180px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px))}
@media (max-width:480px){ .wrap{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))} }

.node{font-family:var(--mono); font-size:var(--step--1); letter-spacing:.04em; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:22px; flex-wrap:wrap}
.mark{font-family:var(--display); font-weight:600; font-size:var(--step1); line-height:1.2; letter-spacing:-.01em; text-decoration:none; display:flex; flex-direction:column}
.mark-sub{font-family:var(--body); font-weight:400; font-size:var(--step--1); letter-spacing:.01em; color:var(--muted)}
.mark-short,.hero-id{display:none}
.hero-id{font-family:var(--display); font-weight:600; font-size:var(--step1); line-height:1.25; margin:0 0 14px; flex-direction:column}
.hero-id span{font-family:var(--body); font-weight:400; font-size:var(--step--1); color:var(--muted)}
@media (max-width:640px){
  .mark{flex-direction:row; align-items:baseline; flex-wrap:wrap; column-gap:10px}
  .top{gap:6px!important}
  .top nav{justify-content:space-between; gap:12px!important}
  .hero .lede{font-size:.9375rem; line-height:1.55; margin-bottom:26px}
}
.top nav{display:flex; gap:22px; flex-wrap:wrap}
.top nav a{font-size:var(--step--1); text-decoration:none; color:var(--muted); white-space:nowrap}
.top nav a.on{color:var(--ink)}
.top nav a:hover{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative; padding-block:72px 96px; border-bottom:1px solid var(--line)}
.hero-copy{position:relative; z-index:1; min-width:0; max-width:600px}
.hero-bg{position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw; z-index:0; pointer-events:none}
.hero-bg canvas{position:absolute; inset:0; width:100%!important; height:100%!important; display:block}
html,body{overflow-x:clip}
.hero h1{font-family:var(--display); font-weight:700; font-size:var(--step4); line-height:1.02; letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--accent)}
.lede{font-size:1.0625rem; color:var(--muted); max-width:36em; margin:0 0 30px; text-wrap:pretty}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 var(--step--1)/1 var(--body); padding:13px 18px; border-radius:var(--radius);
  text-decoration:none; border:1px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer; transition:transform .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}

.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
@keyframes rise{from{transform:translateY(14px); opacity:.0001} to{transform:none; opacity:1}}

/* ---------- Work ---------- */
.layout{display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; padding-block:64px 24px}
.index{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 24px); align-self:start}
.index ol{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px}
.index a{display:block; padding:6px 0; text-decoration:none; font-size:var(--step--1); color:var(--muted); border-left:2px solid transparent; padding-left:10px; transition:color .2s, border-color .2s}
.index a:hover,.index a.on{color:var(--ink); border-left-color:var(--accent)}

.section-head{display:flex; align-items:baseline; gap:14px; margin:0 0 20px}
.section-head h2{font-family:var(--body); font-weight:600; font-size:var(--step--1); line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0}
.intro{color:var(--muted); max-width:38em; margin:0 0 40px}

.case{border-top:1px solid var(--line); padding-block:40px 44px; scroll-margin-top:24px}
.case-meta{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline}
.case h3{font-family:var(--display); font-weight:600; font-size:var(--step3); line-height:1.1; letter-spacing:-.025em; margin:10px 0 6px; text-wrap:balance}
.case .summary{font-size:var(--step1); line-height:1.5; max-width:40em; margin:0 0 10px; text-wrap:pretty}
.points.two{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px}
.case .role{color:var(--muted); margin:0 0 26px; font-size:var(--step--1)}
.points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none}
.points li{min-width:0}
.points h4{font-family:var(--display); font-weight:600; font-size:1.0625rem; line-height:1.3; letter-spacing:-.005em; color:var(--ink); margin:0 0 6px}
.points p{margin:0; text-wrap:pretty}
.more-points{margin-top:22px}
.stats{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none}
.stats li{background:var(--warm-soft); border-radius:999px; padding:6px 13px; font-size:var(--step--1); font-variant-numeric:tabular-nums}
.stats strong{font-weight:600}
.case .more{display:inline-block; margin-top:18px; font-size:var(--step--1); color:var(--accent); text-underline-offset:3px}
.case .note{font-size:.78rem; color:var(--muted); margin:14px 0 0}


/* Scroll motion: elements are fully visible at rest; this only adds a short settle. */
.settle{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js .settle.pre{transform:translateY(18px)}

/* ---------- Experience ---------- */
.xp{padding-bottom:56px; scroll-margin-top:24px}
.xp-list{list-style:none; margin:24px 0 0; padding:0}
.xp-list li{display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; padding-block:20px; border-top:1px solid var(--line)}
.xp-list li:last-child{border-bottom:1px solid var(--line)}
.xp-list .when{padding-top:4px}
.xp-list h3{font-family:var(--display); font-weight:600; font-size:var(--step2); letter-spacing:-.015em; line-height:1.2; margin:0}
.xp-role{margin:2px 0 6px; font-weight:500}
.xp-list p:last-child{margin:0; color:var(--muted); max-width:40em}
.work-start{border-top:0; padding-top:8px; scroll-margin-top:24px}
@media (max-width:480px){ .xp-list li{grid-template-columns:1fr; gap:4px} }

.clients-sec{padding-block:0 56px; scroll-margin-top:24px}
.caps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 36px; margin:28px 0 0}
.caps li b{font-weight:500; color:var(--ink)}
.caps li{color:var(--muted)}
@media (max-width:960px){ .caps{grid-template-columns:repeat(2,minmax(0,1fr))} }
.caps > div{min-width:0; border-top:1px solid var(--line); padding-top:12px}
.caps dt{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:8px}
.caps dd{margin:0}
.caps ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
@media (max-width:480px){ .caps{grid-template-columns:1fr; gap:22px} }


/* ---------- Case study visuals ---------- */
.case-visual{margin:0 0 30px; min-width:0}
.case-visual img{display:block; width:100%; height:auto; max-width:100%; aspect-ratio:800/340;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); object-fit:cover}
.case-visual figcaption{margin-top:10px; font-size:var(--step--1); color:var(--muted); max-width:52em}
@media (max-width:480px){ .case-visual{margin-bottom:24px} }

/* ---------- 3D carousel for case-study screens ---------- */
.carousel{position:relative}
.car-stage{position:relative; aspect-ratio:16/9; max-width:100%; perspective:1600px; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(180deg, var(--warm-soft), transparent 85%); touch-action:pan-y; user-select:none}
.car-slide{position:absolute; left:50%; top:50%; width:58%; aspect-ratio:4/3; margin:0; cursor:pointer;
  transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease; will-change:transform}
.car-slide img{display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:6px;
  border:1px solid var(--line); background:#fff; box-shadow:0 22px 40px -22px rgba(10,20,20,.45); pointer-events:none}
.car-slide.is-active{cursor:zoom-in}
.car-slide:focus-visible{outline:none}
.car-slide:focus-visible img{outline:2px solid var(--accent); outline-offset:3px}
.car-info{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-top:16px}
.car-text{min-width:0; max-width:46em}
.car-count{margin:0 0 4px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--muted); font-variant-numeric:tabular-nums}
.car-title{margin:0 0 4px; font-family:var(--display); font-weight:600; font-size:var(--step1); line-height:1.3}
.car-desc{margin:0; color:var(--muted); text-wrap:pretty}
.car-nav{display:flex; gap:8px; flex:none}
.car-btn{width:42px; height:42px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s}
.car-btn:hover{border-color:var(--ink)}
.car-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.lightbox{max-width:min(1200px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:var(--radius); background:var(--surface); color:var(--ink)}
.lightbox::backdrop{background:rgba(8,12,12,.72)}
.lightbox img{display:block; width:100%; height:auto; max-height:calc(100vh - 110px); object-fit:contain; background:#fff}
.lightbox-cap{margin:0; padding:12px 16px; font-size:var(--step--1); color:var(--muted)}
.lightbox-close{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:999px; border:0; background:var(--ink); color:var(--bg); font-size:20px; line-height:1; cursor:pointer}
@media (max-width:640px){
  .car-stage{aspect-ratio:5/4}
  .car-slide{width:74%}
  .car-info{flex-direction:column-reverse; gap:12px}
}
.carousel.wide .car-slide{width:66%; aspect-ratio:16/9}
.carousel.wide .car-stage{aspect-ratio:2/1}
@media (max-width:640px){ .carousel.wide .car-stage{aspect-ratio:8/5} .carousel.wide .car-slide{width:80%} }
@media (prefers-reduced-motion: reduce){ .car-slide{transition:none} }
/* ---------- Clients, approach, contact ---------- */
.block{border-top:1px solid var(--line); padding-block:56px}
.clients{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 32px; margin:28px 0 0}
.client-group{min-width:0}
.client-group summary{list-style:none; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; cursor:default}
.client-group summary::-webkit-details-marker{display:none}
.client-group .chev{display:none; width:16px; height:16px; flex:none; transition:transform .2s ease}
.client-group p{margin:0}
.toggle-all{display:none; margin-left:auto; align-self:center; background:none; border:0; padding:6px 0; font:500 var(--step--1)/1 var(--body); color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.client-group .count{display:none; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); letter-spacing:0; font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .clients{display:block; border-top:1px solid var(--line); margin-top:20px}
  .client-group{border-bottom:1px solid var(--line)}
  .client-group summary{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; padding-block:15px; cursor:pointer; color:var(--ink); font-size:.78rem}
  .client-group .chev{display:block; color:var(--muted)}
  .client-group[open] .chev{transform:rotate(180deg)}
  .client-group .count{display:inline-block}
  .toggle-all{display:inline-block}
  .client-group p{padding-bottom:16px}
}
@media (prefers-reduced-motion: reduce){ .client-group .chev{transition:none} }
.approach{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:28px}
.approach h3{font-family:var(--display); font-size:var(--step2); font-weight:600; letter-spacing:-.015em; line-height:1.2; margin:0 0 10px; text-wrap:balance}
.approach p{margin:0; color:var(--muted)}
.approach > div{min-width:0}

.contact{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:end}
.contact h2{font-family:var(--display); font-weight:700; font-size:var(--step4); letter-spacing:-.035em; line-height:1.02; margin:0 0 16px; text-wrap:balance}
.contact p{color:var(--muted); max-width:30em; margin:0}
.email{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.email code{font-family:var(--mono); font-size:var(--step1); user-select:all; word-break:break-all}
.status{font-family:var(--mono); font-size:.72rem; color:var(--accent); min-height:1.2em; text-align:right; width:100%}
footer{border-top:1px solid var(--line); padding-block:22px 40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:var(--step--1); color:var(--muted)}

/* ---------- Sticky top navigation on narrower screens (the side index is hidden there) ---------- */
@media (max-width:960px){
  html{scroll-padding-top:calc(var(--top-pin, 96px) + 8px)}
  body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:31; background:var(--bg)}
  .top{position:sticky; top:calc(env(safe-area-inset-top, 0px) - var(--top-hide, 0px)); z-index:30; background:var(--bg);
    margin-left:calc(-1 * max(24px, env(safe-area-inset-left, 0px))); margin-right:calc(-1 * max(24px, env(safe-area-inset-right, 0px)));
    padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px));
    padding-block:14px 0; flex-direction:column; align-items:stretch; gap:10px; border-bottom:1px solid var(--line)}
  .top nav{flex-wrap:nowrap; overflow-x:auto; gap:22px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding-block:8px 11px; border-bottom:2px solid transparent}
  .top nav a.on{border-bottom-color:var(--accent)}
}
@media (max-width:480px){
  .top{margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
}

/* ---------- Back to top ---------- */
.to-top{position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:20;
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font:500 var(--step--1)/1 var(--body); cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{border-color:var(--ink)}
.to-top svg{width:14px; height:14px}
@media (prefers-reduced-motion: reduce){ .to-top{transition:none} }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero{padding-block:32px 56px}
  .layout{grid-template-columns:1fr; gap:0; padding-top:48px}
  .index{display:none}
  .points,.points.two,.approach{grid-template-columns:1fr; gap:22px}
  .clients{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact{grid-template-columns:1fr; align-items:start}
  .email{justify-content:flex-start}.status{text-align:left}
}
@media (max-width:480px){
  .top nav{gap:16px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise{animation:none}
  .js .settle.pre{transform:none}
  .settle,.btn{transition:none}
}

/* video */
.vid{position:relative; border-radius:var(--radius); overflow:hidden; background:#12181E; border:1px solid var(--line)}
.case-visual .vid video{display:block; width:100%; height:auto; aspect-ratio:1280/974; cursor:pointer}
.vid-big{position:absolute; left:50%; top:calc(50% - 26px); transform:translate(-50%,-50%); width:76px; height:76px; border-radius:999px; border:0; background:rgba(18,24,30,.82); color:#fff; display:grid; place-items:center; cursor:pointer; transition:opacity .2s, transform .2s}
.vid-big svg{width:28px; height:28px; fill:currentColor; margin-left:4px}
.vid-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.vid.started .vid-big{opacity:0; pointer-events:none}
.vid-bar{display:flex; align-items:center; gap:6px; padding:8px 14px 8px 8px; background:#12181E; color:#fff}
.vid-ctl{width:36px; height:36px; flex:none; border-radius:999px; border:0; background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer}
.vid-ctl:hover{background:rgba(255,255,255,.12)}
.vid-ctl svg{width:16px; height:16px; fill:currentColor}
.vid-play .i-pause{display:none}
.vid.playing .vid-play .i-pause{display:inline}
.vid.playing .vid-play .i-play{display:none}
.vid-seek{flex:1; min-width:0; height:20px; margin:0 6px; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; --p:0%}
.vid-seek::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(to right,#fff var(--p),rgba(255,255,255,.28) var(--p))}
.vid-seek::-moz-range-track{height:4px; border-radius:2px; background:rgba(255,255,255,.28)}
.vid-seek::-moz-range-progress{height:4px; border-radius:2px; background:#fff}
.vid-seek::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:#fff; border:0}
.vid-seek::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:#fff; border:0}
.vid-time{flex:none; font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums}
.vid button:focus-visible, .vid-seek:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:480px){ .vid-time{display:none} .vid-big{width:60px; height:60px; top:calc(50% - 26px)} }

/* private theme toggle */
.theme-pin{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:90; display:flex; border:1px solid var(--line); border-radius:999px; background:var(--surface); box-shadow:0 4px 16px rgba(0,0,0,.12); overflow:hidden}
.theme-pin button{border:0; background:none; color:var(--ink); font:500 var(--step--1)/1 var(--body); padding:9px 12px; cursor:pointer}
.theme-pin .tp-clear{border-left:1px solid var(--line); color:var(--muted); padding:9px 11px}
.theme-pin button:hover{background:var(--accent-soft)}

.email .li{text-decoration:none}
footer a{color:var(--muted); text-underline-offset:3px}

/* ---------- AI in my process ---------- */
#ai{scroll-margin-top:24px}
#ai .intro{margin-bottom:28px}
.ai-points li{border-top:1px solid var(--line); padding-top:14px}
.ai-points .ai-n{display:block; margin-bottom:6px}
.ai-points a{color:var(--accent); text-underline-offset:3px}

/* ---------- Video chapters ---------- */
.vid-chapters{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.vid-chapters button{width:100%; height:100%; text-align:left; display:flex; gap:10px; align-items:baseline; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font:400 var(--step--1)/1.35 var(--body); cursor:pointer; transition:border-color .2s, background .2s}
.vid-chapters button:hover{border-color:var(--ink)}
.vid-chapters button.on{border-color:var(--accent); background:var(--accent-soft)}
.vid-chapters .node{flex:none}
.vid-chapters button.on .node{color:var(--accent)}
@media (max-width:960px){ .vid-chapters{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .vid-chapters{grid-template-columns:1fr; gap:6px} .vid-chapters button{padding:12px 14px} }

/* ---------- Carousels on phones: flat, full-width, native swipe ---------- */
.car-slide picture{display:block; width:100%; height:100%}
@media (max-width:640px){
  .carousel.flat .car-stage{--gut:24px; display:flex; gap:10px; aspect-ratio:auto; perspective:none; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x pan-y pinch-zoom;
    margin-inline:calc(-1 * var(--gut)); padding:4px var(--gut) 14px; scroll-padding-inline:var(--gut); border-radius:0; background:none}
  .carousel.flat .car-stage::-webkit-scrollbar{display:none}
  .carousel.flat .car-slide{position:relative; left:auto; top:auto; flex:0 0 calc(100% - 28px); width:auto; aspect-ratio:1/1; scroll-snap-align:start; transition:none; will-change:auto}
  .carousel.flat.wide .car-slide{aspect-ratio:16/9; width:auto}
  .carousel.flat .car-slide img{box-shadow:0 10px 22px -16px rgba(10,20,20,.45)}
  .carousel.flat .car-info{margin-top:6px}
}
@media (max-width:480px){ .carousel.flat .car-stage{--gut:16px} }

/* ---------- Lightbox: pan and zoom ---------- */
.lightbox[open]{display:flex; flex-direction:column}
.lb-pan{overflow:auto; flex:1; min-height:0; display:flex; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.lb-pan img{margin:auto; cursor:zoom-in}
.lightbox.zoomed .lb-pan img{width:auto; max-width:none; max-height:none; cursor:zoom-out}
.lb-hint{display:none; margin:0; padding:0 16px 14px; font-size:.72rem}
.lightbox.can-zoom .lb-hint{display:block}
.lightbox-close{z-index:2}
@media (max-width:640px){
  .lightbox{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; background:#0c1010; color:#e6eae8}
  .lightbox .lb-pan{background:#0c1010}
  .lightbox img{max-height:none}
  .lightbox-cap{color:#aab4b1; padding:12px 16px 6px}
  .lightbox-close{top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; width:40px; height:40px; background:#fff; color:#111}
}
.ai-site{margin:28px 0 0; color:var(--muted); max-width:44em}

/* Hero motion graphic is desktop and tablet only */
@media (max-width:640px){ .hero-bg{display:none} }

/* Lightbox paging */
.lb-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px 0 0}
.lb-foot .lightbox-cap{flex:1; min-width:0}
.lb-nav{display:flex; align-items:center; gap:8px; flex:none}
.lb-count{margin-right:6px}
.lightbox.single .lb-nav{display:none}
@media (max-width:640px){
  .lb-foot{flex-direction:column; align-items:stretch; gap:4px; padding:0 16px 10px 0}
  .lb-nav{justify-content:space-between; padding-left:16px}
  .lb-count{color:#aab4b1; margin-right:auto}
  .lightbox .car-btn{background:transparent; border-color:#3a4442; color:#e6eae8; width:44px; height:44px}
}
.car-btn:focus-visible,.lightbox-close:focus-visible{border-radius:999px}
.lb-hint-touch{display:none}
@media (hover:none){ .lb-hint-touch{display:inline} .lb-hint-mouse{display:none} }
/* Hero proof line */
.lede + .proof{margin-top:-18px}
.proof{font-size:var(--step--1); color:var(--muted); margin:0 0 30px; max-width:36em}
.proof a{color:var(--ink); text-underline-offset:3px}
/* Outcome-first case openers */
.case .outcome{font-size:var(--step1); line-height:1.5; max-width:40em; margin:0 0 8px; text-wrap:pretty}
.case .outcome + .summary{font-size:1rem; color:var(--muted)}
/* Clients and Capabilities after the work */
.work-start + .clients-sec{padding-top:56px}
/* Capabilities, collapsed by default */
.caps-wrap{margin-top:20px}
.caps-wrap summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; color:var(--muted)}
.caps-wrap summary::-webkit-details-marker{display:none}
.caps-wrap[open] summary{border-bottom-color:transparent}
.caps-more{display:inline-flex; align-items:center; gap:6px; flex:none; color:var(--accent); font-weight:500; font-size:var(--step--1)}
.caps-more .chev{width:16px; height:16px; transition:transform .2s ease}
.caps-wrap[open] .caps-more .chev{transform:rotate(180deg)}
.caps-wrap .caps{margin-top:8px}
@media (max-width:480px){ .caps-wrap summary > span:first-child{font-size:var(--step--1)} }
.caps-wrap .m-hide, .caps-wrap[open] .m-show{display:none}
.caps-wrap[open] .m-hide{display:inline}
/* Diagram slides keep their whole image */
.car-slide.fit img{object-fit:contain; object-position:center; background:#fafafa}

/* PA.gov walkthrough: 16:9 video with captions */
.case-visual .vid.wide video{aspect-ratio:16/9}
.case-video{margin-bottom:28px}
.vid-cc .cc-label{font:600 .68rem/1 var(--mono); letter-spacing:.04em; padding:3px 4px; border:1.5px solid currentColor; border-radius:3px; opacity:.55}
.vid-cc[aria-pressed="true"] .cc-label{opacity:1; background:#fff; color:#12181E; border-color:#fff}
.vid video::cue{font-family:var(--body); font-size:.95em; line-height:1.35; background:rgba(18,24,30,.82); color:#fff}
.vid.wide .vid-big{left:72%}
@media (max-width:480px){ .case-video .vid-chapters{grid-template-columns:repeat(2,minmax(0,1fr))} .case-video .vid-chapters button{padding:10px 12px; font-size:.875rem} }

/* Sound: mute button, with a volume slider that opens on hover or focus where a mouse is in use */
.vid-audio{display:flex; align-items:center; flex:none}
.vid-mute .i-x{display:none}
.vid.muted .vid-mute .i-x{display:inline}
.vid.muted .vid-mute .i-waves{display:none}
.vid-volume{width:0; opacity:0; margin:0; height:20px; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; --p:100%; transition:width .2s ease, opacity .2s ease, margin .2s ease}
.vid-audio:hover .vid-volume, .vid-audio:focus-within .vid-volume{width:72px; opacity:1; margin:0 8px 0 2px}
.vid-volume::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(to right,#fff var(--p),rgba(255,255,255,.28) var(--p))}
.vid-volume::-moz-range-track{height:4px; border-radius:2px; background:rgba(255,255,255,.28)}
.vid-volume::-moz-range-progress{height:4px; border-radius:2px; background:#fff}
.vid-volume::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; margin-top:-4px; border-radius:50%; background:#fff; border:0}
.vid-volume::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:0}
.vid-volume:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (hover:none){ .vid-volume{display:none} }
@media (prefers-reduced-motion: reduce){ .vid-volume{transition:none} }

/* Case media switch: one space, choose the walkthrough video or the screens */
.mswitch-tabs{display:inline-flex; gap:4px; padding:4px; margin:0 0 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.mswitch-tabs button{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; background:none; cursor:pointer; white-space:nowrap;
  font:500 var(--step--1)/1 var(--body); color:var(--muted); padding:9px 15px; border-radius:999px; transition:background .2s, color .2s}
.mswitch-tabs button:hover{color:var(--ink)}
.mswitch-tabs button[aria-selected="true"]{background:var(--ink); color:var(--bg)}
.mswitch-tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:999px}
.mswitch-n{font-variant-numeric:tabular-nums; opacity:.65; font-weight:400}
.mswitch .case-visual[hidden]{display:none}
@media (max-width:480px){
  .mswitch-tabs{display:grid; grid-template-columns:1fr 1fr; width:100%}
  .mswitch-tabs button{padding:10px 8px}
  .mswitch-n{display:none}
}
@media (prefers-reduced-motion: reduce){ .mswitch-tabs button{transition:none} }

/* ---------- Case study pages: one project, more room ---------- */
.cs-main{padding-block:40px 24px}
.case.cs{border-top:0; padding-block:0 32px}
.cs-back{display:inline-flex; align-items:center; gap:6px; text-decoration:none; margin:0 0 36px; transition:color .2s}
.cs-back:hover{color:var(--ink)}
.cs-back svg,.cs-next svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cs-title{font-family:var(--display); font-weight:700; font-size:var(--step4); line-height:1.02; letter-spacing:-.035em; margin:14px 0 18px; text-wrap:balance}
.case.cs .outcome{font-size:var(--step2); line-height:1.35; letter-spacing:-.01em; max-width:30em; margin:0 0 14px}
.case.cs .role{margin-bottom:48px}
.cs-media{margin-bottom:24px}
.cs-body{border-top:1px solid var(--line)}
.cs-sec{display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; padding-block:36px; border-bottom:1px solid var(--line)}
.cs-sec h2{font-family:var(--mono); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); margin:6px 0 0}
.cs-sec p{margin:0 0 1em; max-width:38em; font-size:1.0625rem; text-wrap:pretty}
.cs-sec p:last-child{margin-bottom:0}
.cs-list{list-style:none; margin:0; padding:0; max-width:38em}
.cs-list li{font-size:1.0625rem; padding:12px 0 12px 26px; position:relative; border-top:1px solid var(--line)}
.cs-list li:first-child{border-top:0; padding-top:0}
.cs-list li::before{content:""; position:absolute; left:0; top:calc(12px + .8em); width:12px; height:1.5px; background:var(--accent)}
.cs-list li:first-child::before{top:.8em}
.cs-next{display:flex; flex-direction:column; gap:6px; padding-top:48px}
.cs-next a{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; font-family:var(--display); font-weight:600; font-size:var(--step3); letter-spacing:-.02em; line-height:1.1; text-decoration:none}
.cs-next a:hover{color:var(--accent)}
.cs-next a svg{width:22px; height:22px; transition:transform .2s}
.cs-next a:hover svg{transform:translateX(4px)}
footer a{color:var(--muted); text-underline-offset:3px}
footer a:hover{color:var(--ink)}
@media (max-width:960px){ .cs-main{padding-top:32px} .cs-sec{grid-template-columns:1fr; gap:10px; padding-block:28px} }
@media (prefers-reduced-motion: reduce){ .cs-next a svg{transition:none} }

/* Homepage teaser that opens a case study page */
.case-teaser{display:block; position:relative; margin:0 0 26px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); text-decoration:none; color:inherit}
.case-teaser img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case-teaser:hover img{transform:scale(1.015)}
.case-teaser .tz-tag{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px; background:rgba(18,24,30,.82); color:#fff; font-size:var(--step--1)}
.case-teaser .tz-tag svg{width:12px; height:12px; fill:currentColor}
.case .read{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:600; font-size:var(--step--1); color:var(--accent); text-decoration:none}
.case .read svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.case .read:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){ .case-teaser img,.case .read svg{transition:none} }

/* Case study pages: the screens, laid out in full */
.cs-work{padding-block:36px 8px; border-bottom:1px solid var(--line)}
.cs-work-h{font-family:var(--mono); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); margin:6px 0 28px}
.cs-shot{margin:0 0 56px}
.cs-shot-img{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.cs-shot-img img{display:block; width:100%; height:auto}
.cs-shot figcaption{display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; margin-top:18px}
.cs-shot figcaption .node{padding-top:3px}
.cs-shot h3{font-family:var(--display); font-weight:600; font-size:var(--step1); line-height:1.3; margin:0 0 4px}
.cs-shot p{margin:0; color:var(--muted); max-width:38em; text-wrap:pretty}
@media (max-width:960px){ .cs-shot{margin-bottom:40px} .cs-shot figcaption{grid-template-columns:1fr; gap:4px} .cs-work{padding-top:28px} }
/* Hero as a single statement */
.hero .hero-copy{max-width:780px}
.hero .hero-copy h1.statement{font-size:clamp(1.75rem, 3vw, 2.5rem); line-height:1.2; letter-spacing:-.022em; font-weight:600; margin:0 0 16px; text-wrap:pretty}
.hero h1.statement + .proof{margin-top:0}
@media (max-width:640px){ .hero .hero-copy h1.statement{font-size:1.625rem; line-height:1.22; margin-bottom:12px} }
.case h3 + .case-teaser{margin-top:20px}
.case-link{color:inherit; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.16em; transition:color .2s, text-decoration-color .2s}
.case-link:hover,.case:has(.case-teaser:hover) .case-link{color:var(--accent); text-decoration-color:currentColor}
.case:has(.case-link:hover) .case-teaser img{transform:scale(1.015)}
@media (prefers-reduced-motion: reduce){ .case-link{transition:none} }
.case > h3:first-child{margin-top:0}
#work .case{border-top:0}

.cs .role{display:flex; flex-direction:column; gap:4px; max-width:40em}
.role-summary{color:var(--ink); font-size:1.0625rem; line-height:1.5; text-wrap:pretty}
.role-title{color:var(--muted); font-size:var(--step--1)}
.cs-sec .cs-sub{font-family:var(--display); font-weight:600; font-size:1.0625rem; line-height:1.3; letter-spacing:-.005em; color:var(--ink); margin:1.6em 0 6px}