/* Tactile layer, loaded last on every page. Neumorphic surfaces in both themes (soft dual shadows, raised and pressed states), glass only where things float over content. `:root` prefixes lift these rules over the older cascade without !important. */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@property --q{syntax:'<number>';inherits:false;initial-value:0}
:root{--hi-edge:#ffffff12;--neu-sm:5px 5px 12px #050806d9,-4px -4px 11px #2a3a3166;--neu-in:inset 4px 4px 9px #050806e6,inset -4px -4px 9px #2a3a3152;--glass-bg:linear-gradient(135deg,#ffffff17,#ffffff05);--glass-edge:#ffffff1f}
:root:not([data-scheme=light]){--surface:#19221d;--raised:#1e2923;--shadow:10px 10px 26px #050806d9,-9px -9px 24px #2a3a3170;--inset:inset 1px 1px 0 #ffffff10,inset -1px -1px 0 #00000059}
:root[data-scheme=light]{--hi-edge:#ffffff;--neu-sm:5px 5px 12px #a5ada366,-5px -5px 12px #ffffffd9;--neu-in:inset 4px 4px 9px #b4bcb180,inset -4px -4px 9px #ffffffe6;--glass-bg:linear-gradient(135deg,#ffffffb3,#ffffff4d);--glass-edge:#ffffffb3}

/* Navigation: a glass bar floating over the page, the current tab a raised neumorphic key. */
:root header nav{background:var(--glass-bg),color-mix(in srgb,var(--surface) 64%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--glass-edge);box-shadow:var(--neu-sm),inset 0 1px 0 var(--glass-edge)}
:root header nav .nav-liquid,:root .case-page header nav a.active,:root .lab-page header nav a.active{background:var(--surface);border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--neu-sm),inset 1px 1px 0 var(--hi-edge)}
:root .case-page header nav a.active,:root .lab-page header nav a.active,:root header nav a.active{color:var(--accent);text-shadow:none}

/* Round keys: settings, carousel controls, social links. Pressed = sunk into the surface. */
:root .settings button,:root .roller-controls button,:root .social-links a{border-radius:50%;background:var(--surface);border:1px solid var(--glass-edge);color:var(--accent);box-shadow:var(--neu-sm),var(--inset);transform:none;transition:box-shadow .35s,color .35s}
:root .social-links a.npm-link{border-radius:22px}
:root .settings button:hover,:root .settings button:focus-visible,:root .roller-controls button:hover,:root .social-links a:hover{transform:none;color:var(--text);box-shadow:var(--neu-sm),var(--inset),0 0 18px var(--spill)}
:root .settings button:active,:root .settings button[aria-pressed=true],:root .roller-controls button:active,:root .roller-controls button[aria-pressed=true],:root .social-links a:active{box-shadow:var(--neu-in)}

/* The pause key carries the carousel timer: a ring of thirty ticks around it. */
:root .roller-controls{gap:20px}
:root #roll-pause{position:relative;overflow:visible}
#roll-pause:before,#roll-pause:after{content:'';position:absolute;border-radius:50%;pointer-events:none}
#roll-pause:before{inset:-10px;background:var(--muted);opacity:.32;-webkit-mask:repeating-conic-gradient(from -2deg,#000 0 4deg,#0000 4deg 12deg),radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 5px));-webkit-mask-composite:source-in;mask:repeating-conic-gradient(from -2deg,#000 0 4deg,#0000 4deg 12deg),radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 5px));mask-composite:intersect}
#roll-pause:after{inset:-10px;opacity:0;background:conic-gradient(color-mix(in srgb,var(--accent) 55%,transparent) 0deg,var(--accent) calc(var(--p)*360deg - 10deg),transparent calc(var(--p)*360deg - 10deg));-webkit-mask:repeating-conic-gradient(from -2deg,#000 0 4deg,#0000 4deg 12deg),radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 5px));-webkit-mask-composite:source-in;mask:repeating-conic-gradient(from -2deg,#000 0 4deg,#0000 4deg 12deg),radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 5px));mask-composite:intersect;filter:drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent));transition:opacity .3s}
#roll-pause.dwell:after{opacity:1;animation:dwell-hand var(--dwell,1740ms) steps(30,jump-end) forwards}
/* iOS time-lapse style: thirty ticks light one by one at a steady rate through the rest; the last lights as the card leaves, then the ring dims while it travels. */
#roll-pause.fade:after{--p:1;--q:1;opacity:0;transition:opacity .5s ease}
@keyframes dwell-hand{from{--p:0}to{--p:1}}
@keyframes dwell-tail{from{--q:0}to{--q:1}}

/* Journey milestones become dials: a raised knob with a pressed inner ring. */
:root .timeline .journey-icon{border-radius:50%;transform:none;background:var(--surface);border:0;box-shadow:var(--neu-sm),var(--inset)}
:root .timeline .journey-icon:after{content:'';position:absolute;inset:6px;border-radius:50%;box-shadow:var(--neu-in);pointer-events:none}
:root .journey-icon .glyph{transform:none}
:root .journey{display:flex;flex-direction:column}
:root .journey>.text-button{margin-top:auto}
@media(min-width:1000px){:root .journey .timeline{flex:1;display:flex;flex-direction:column}:root .journey .timeline li{flex:1 1 auto}}
/* One continuous rail: a pressed groove with a lit core that runs from dial to dial. */
:root .timeline li:after{width:6px;translate:-2.5px 0;bottom:-6px;border-radius:3px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 35%,transparent)) center/2px 100% no-repeat,var(--surface);box-shadow:var(--neu-in)}

/* Case pages: the chapter marker is a raised key inside a pressed panel. */
:root .chapter-list:before{background:var(--surface);border-color:transparent;box-shadow:var(--neu-sm),inset 1px 1px 0 var(--hi-edge)}
:root:not([data-scheme=light]) .story-chapters{box-shadow:inset 4px 5px 14px #050806a6,inset -3px -3px 12px #2a3a3138}

/* How I work: one warm amber family (law of similarity) so the six steps read as one process. */
:root .home .story-stack{grid-template-rows:auto 1fr}
.process-bento{--pc:#e6b96c;--pc-soft:#e6b96c1c;--pc-line:#e6b96c38;--pc-tint:linear-gradient(150deg,#e6b96c14,#e6b96c03 62%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:inherit;align-content:stretch;min-width:0}
:root[data-scheme=light] .process-bento{--pc:#7b5416;--pc-soft:#b4843624;--pc-line:#b4843647;--pc-tint:linear-gradient(150deg,#c9973f1f,#c9973f08 62%)}
:root .process-bento .tile{background:var(--pc-tint),var(--surface);border-color:var(--pc-line);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;gap:10px}
:root .home .story-stack .process-bento .tile:hover,:root .home .story-stack .process-bento .tile:focus-within{box-shadow:var(--shadow),inset 0 1px 0 var(--pc-line),0 0 30px var(--pc-soft)}
.process-head,.process-kit{grid-column:1/-1}
.process-bento .eyebrow{color:var(--pc)}
.process-head h2{font-size:clamp(28px,2.5vw,38px);line-height:1.08;letter-spacing:-.01em;margin:6px 0 4px;text-wrap:balance}
.process-head p{color:var(--muted);font-size:15px;line-height:1.7;max-width:52ch}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.step-knob{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--neu-sm),var(--inset);color:var(--pc)}
.step-knob:after{content:'';position:absolute;inset:6px;border-radius:50%;box-shadow:var(--neu-in)}
.step-knob svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step-no{font-size:13px;letter-spacing:.14em;color:var(--pc);font-variant-numeric:tabular-nums}
.step h3{font-size:22px;letter-spacing:-.01em}
.step p{font-size:14px;line-height:1.65;color:var(--muted)}
.step .proof{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;letter-spacing:.02em;line-height:1.35;color:var(--pc);background:var(--pc-soft);border:1px solid var(--pc-line);transition:box-shadow .3s}
.step .proof:hover,.step .proof:focus-visible{box-shadow:var(--neu-in)}
.process-kit{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:10px 12px!important}
.process-kit .eyebrow{margin-right:6px}
.process-kit span:not(.eyebrow){padding:8px 14px;border-radius:999px;font-size:13px;letter-spacing:.03em;color:var(--text);background:var(--surface);box-shadow:var(--neu-sm),var(--inset)}

/* Outside work: its own section with room for the photos. */
.outside-work{grid-column:1/-1;margin-top:clamp(28px,5vw,80px);display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;grid-template-rows:repeat(2,clamp(260px,22vw,340px));gap:inherit;min-width:0}
.outside-intro{grid-row:1/3;padding:clamp(28px,2.6vw,44px);display:flex;flex-direction:column;gap:14px}
.outside-intro h2{font-size:clamp(30px,2.6vw,40px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.outside-intro p{font-size:15px;line-height:1.7;color:var(--muted)}
.passport{margin-top:auto;display:grid;gap:14px}
.passport-goal{font-size:15px;line-height:1.55}
.passport-goal b{color:var(--accent);font-weight:600}
.stamps{display:flex;flex-wrap:wrap;gap:10px}
.stamp{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--surface);box-shadow:var(--neu-sm),var(--inset);color:var(--accent)}
.stamp:before{content:'';position:absolute;inset:7px;border-radius:50%;border:1.5px dashed currentColor;opacity:.55}
.stamp b{font-size:13px;line-height:1.1;letter-spacing:.02em}
.stamp small{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.stamp.next{box-shadow:var(--neu-in);color:var(--muted)}
.stamp.next b{font-size:20px;font-weight:400}
.park-shot{position:relative;margin:0;overflow:hidden;border-radius:26px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.park-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.park-shot:hover img{transform:scale(1.04)}
.park-shot figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:6px 12px;border-radius:999px;font-size:12px;letter-spacing:.03em;color:#f7f4ea;background:linear-gradient(135deg,#ffffff2e,#ffffff0a),#0b141159;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid #ffffff38}
.shot-meadow{grid-row:1/3}
.shot-meadow img{object-position:45% 60%}.shot-sign img{object-position:50% 62%}.shot-river img{object-position:50% 70%}.shot-trail img{object-position:50% 50%}.shot-muir img{object-position:40% 45%}
@media(max-width:999.98px){.outside-work{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:clamp(210px,38vw,320px)}.outside-intro{grid-column:1/-1;grid-row:auto}.shot-meadow{grid-row:span 2}}
@media(max-width:700px){.process-bento{grid-template-columns:minmax(0,1fr)}.outside-work{gap:16px}.stamp{width:80px;height:80px}}
@media(prefers-reduced-motion:reduce){#roll-pause.dwell:after{animation:none;opacity:0}.park-shot img{transition:none}}

/* Carousel and Lab: project posters fill their frames. */
:root .roller-visual>img,:root .lab-visual>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Elsewhere: four icon keys, no labels needed. */
:root .social-tile{display:block;padding:clamp(14px,1.3vw,20px)}
:root .social-tile .social-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(12px,1.1vw,16px);height:100%;margin:0}
:root .social-tile .social-links a{width:auto;height:auto;min-width:0;min-height:72px;border-radius:22px;display:grid;place-items:center;color:var(--text)}
:root .social-tile .social-links a svg{width:34px;height:34px}
:root .social-tile .social-links a.brand-npm svg{width:52px;height:22px}
.brand-mark{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
:root .social-tile .brand-behance:hover{color:#1769ff}:root .social-tile .brand-linkedin:hover{color:#0a66c2}:root .social-tile .brand-github:hover{color:var(--accent)}

/* Award: the official winner logo and a turning sigil over the poster. */
.evidence-pair .proof-media{position:relative}
:root .evidence-pair .proof-media img.award-logo{position:absolute;left:12px;top:12px;width:clamp(58px,5vw,78px);height:auto;aspect-ratio:auto;object-fit:contain;border-radius:4px;box-shadow:0 8px 20px #0007;transform:none}
.award-sigil{position:absolute;right:10px;bottom:10px;width:clamp(78px,6.6vw,104px);height:auto;filter:drop-shadow(0 8px 18px #0008)}
.sigil-disc{fill:#0b141199;stroke:#ffffff55;stroke-width:1.2}
.sigil-core{fill:#e41e4d;stroke:#fff;stroke-width:1.5}
.award-sigil text{fill:#fff;font-family:Manrope,Arial,sans-serif;font-weight:700}
.sigil-year{font-size:15px;font-weight:800}.sigil-label{font-size:7.4px;letter-spacing:1.4px}
.sigil-spin{transform-box:view-box;transform-origin:60px 60px;animation:park-spin 40s linear infinite}
@supports (backdrop-filter:blur(1px)){.award-sigil{border-radius:50%;backdrop-filter:blur(10px)}}
.award-logo-inline{width:64px;height:auto;border-radius:4px;margin-bottom:6px;box-shadow:var(--neu-sm)}

/* Other explorations: Behance thumbnails that open in place. */
.behance-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 6px}
.behance-thumb{padding:0;border-radius:16px;overflow:hidden;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--glass-edge);box-shadow:var(--neu-sm),var(--inset);transition:box-shadow .3s,transform .3s}
.behance-thumbs{align-items:start}:root .behance-thumbs .behance-thumb img{display:block;width:100%;height:auto;aspect-ratio:404/316;object-fit:cover;object-position:top}
.behance-thumb span{display:block;padding:8px 10px 10px;font-size:12px;letter-spacing:.02em;line-height:1.3}
.behance-thumb:hover,.behance-thumb:focus-visible{transform:translateY(-2px);box-shadow:var(--neu-sm),var(--inset),0 0 18px var(--spill)}
.behance-thumb:active{transform:none;box-shadow:var(--neu-in)}
.lab-behance .text-link{color:var(--accent)}
dialog.behance-modal{width:min(1120px,calc(100vw - 32px));height:min(88vh,920px);max-width:none;max-height:none;padding:0;border:1px solid var(--glass-edge);border-radius:26px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
dialog.behance-modal[open]{display:flex;flex-direction:column;animation:modal-in .35s cubic-bezier(.2,.8,.2,1)}
dialog.behance-modal::backdrop{background:#050806b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.behance-bar{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 22px;border-bottom:1px solid var(--line)}
.behance-bar h2{flex:1;font-size:18px;letter-spacing:0}
.behance-open{font-size:13px;color:var(--accent);padding:8px 12px;border-radius:999px;box-shadow:var(--neu-sm),var(--inset)}
.behance-close{width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--text);box-shadow:var(--neu-sm),var(--inset)}
.behance-close:active{box-shadow:var(--neu-in)}
dialog.behance-modal iframe{flex:1;width:100%;border:0;background:#fff}
body:has(dialog[open]){overflow:hidden}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* Design philosophy: icons are raised keys inside pressed wells. */
:root .philosophy li{background:var(--surface);border-color:transparent;box-shadow:var(--neu-in)}
:root .philosophy svg{width:50px;height:50px;padding:13px;border-radius:50%;border:0;background:var(--surface);color:var(--accent);filter:none;box-shadow:var(--neu-sm),var(--inset)}
@media(max-width:700px){.behance-thumbs{gap:8px}.behance-thumb span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sigil-spin{animation:none}dialog.behance-modal[open]{animation:none}}

/* Arriving at About from another page: land just under the fixed nav, not 230px below it. */
:root #experience.about-me{scroll-margin-top:0}
/* Tall frames (phones) crop the One Li8 poster sideways: keep the logo, chips and install commands. */
:root .brand-oneli8 .roller-visual>img,:root .lab-oneli8 .lab-visual>img{object-position:14% 50%}

/* Elsewhere keys: a clear brand-coloured glow on hover and keyboard focus. */
:root .social-tile .social-links a{--brand:var(--accent)}
:root .social-tile .social-links a.brand-behance{--brand:#1769ff}:root .social-tile .social-links a.brand-linkedin{--brand:#0a66c2}:root .social-tile .social-links a.brand-npm{--brand:#e0463e}:root .social-tile .social-links a.brand-github{--brand:var(--accent)}
:root .social-tile .social-links a:hover,:root .social-tile .social-links a:focus-visible{color:var(--brand);box-shadow:var(--neu-sm),var(--inset),0 0 0 1px color-mix(in srgb,var(--brand) 50%,transparent),0 0 20px color-mix(in srgb,var(--brand) 55%,transparent),0 0 42px color-mix(in srgb,var(--brand) 28%,transparent)}

/* Below desktop the intro rises under the header like it does on desktop: its tall side holds only the AD mark, its short side lines up with the carousel (tablet) or sits under the sound and theme keys (phone). The slab notch is measured in app.js. */
@media(max-width:999.98px){.home .identity-name{display:none}.home header .identity{padding-left:26px}.home .home-grid>.intro{margin-top:-82px}}
@media(max-width:700px){.home header .identity{padding-left:25px}}

/* Below desktop: identity (tall side), nav and settings share one line at the top, the same way desktop does, on every page. */
@media(max-width:999.98px){
  :root .home header,:root .lab-page header,:root .case-page header{padding-top:22px}
  :root .home header nav,:root .lab-page header nav,:root .case-page header nav{top:16px;width:auto;max-width:calc(100% - 228px)}
  :root .home header nav a,:root .lab-page header nav a,:root .case-page header nav a{flex:1 1 auto;padding:10px 18px}
  :root .identity-name{display:none}
  :root .home .home-grid>.intro{margin-top:-92px}
}
@media(max-width:700px){:root .home header .identity{padding-left:16px}:root .home .home-grid>.intro{margin-top:-82px}}


/* The intro's tall side starts exactly where the nav starts, at every width. */
@media(min-width:1000px){:root .home .home-grid>.intro{margin-top:-72px}}
@media(max-width:999.98px){:root .home .home-grid>.intro{margin-top:-84px}}
@media(max-width:700px){:root .home .home-grid>.intro{margin-top:-74px}}

/* Evidence pills in How I work wrap inside their tiles instead of overflowing. */
:root .step .proof{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere}

/* Narrow phones: the nav pill becomes a menu key beside the sound and theme keys; it opens a glass panel. */
.nav-toggle{display:none}
.nav-links{display:contents}
@media(max-width:480px){
  :root header .settings{gap:6px;min-height:44px;align-items:center}
  :root header .settings button{width:38px;height:38px;padding:9px}
  :root :is(.home,.lab-page,.case-page) header nav{left:auto;right:108px;top:25px;transform:none;width:auto;max-width:none;padding:0;gap:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
  :root .case-page header nav{right:66px}
  :root header nav .nav-liquid{display:none}
  :root header nav .nav-toggle{display:grid;place-items:center;width:56px;height:38px;padding:0;border-radius:19px;background:var(--surface);border:1px solid var(--glass-edge);color:var(--accent);box-shadow:var(--neu-sm),var(--inset);transition:box-shadow .3s}
  :root header nav.open .nav-toggle{box-shadow:var(--neu-in)}
  .burger{position:relative;display:block;width:18px;height:12px}
  .burger i{position:absolute;left:0;right:0;height:1.8px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .25s}
  .burger i:nth-child(1){top:0}.burger i:nth-child(2){top:5.1px}.burger i:nth-child(3){bottom:0}
  nav.open .burger i:nth-child(1){transform:translateY(5.1px) rotate(45deg)}nav.open .burger i:nth-child(2){opacity:0}nav.open .burger i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}
  :root :is(.home,.lab-page,.case-page) header nav .nav-links{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:180px;flex-direction:column;gap:4px;padding:8px;border-radius:22px;background:var(--glass-bg),color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
  :root :is(.home,.lab-page,.case-page) header nav.open .nav-links{display:flex}
  :root :is(.home,.lab-page,.case-page) header nav .nav-links a{display:block;flex:none;padding:12px 16px;font-size:15px;letter-spacing:.03em;text-align:left;border-radius:14px}
  :root :is(.home,.lab-page,.case-page) header nav .nav-links a.active{background:var(--surface);box-shadow:var(--neu-sm),inset 1px 1px 0 var(--hi-edge);color:var(--accent)}
  :root .home .home-grid>.intro{margin-top:-65px}
  :root .home .home-grid>.intro h1{font-size:clamp(30px,9.4vw,38px)}
}
@media(prefers-reduced-motion:reduce){.burger i{transition:none}}

/* 481–999px: the nav pill is centred in the space between the tall side (or mark) and the keys, so both gaps match (--nav-shift is measured in JS). */
@media(min-width:481px) and (max-width:999.98px){
  :root :is(.home,.lab-page,.case-page) header nav{transform:translateX(calc(-50% + var(--nav-shift,0px)));max-width:var(--nav-max,calc(100% - 228px))}
  :root :is(.home,.lab-page,.case-page) header nav a{min-width:0}
}
@media(min-width:481px) and (max-width:620px){:root :is(.home,.lab-page,.case-page) header nav a{padding:10px 12px}}
@media(min-width:701px) and (max-width:999.98px){:root .home .home-grid>.intro h1{font-size:clamp(34px,4.6vw,44px)}}

/* Tablet: How I work and The journey each take the full width, so the bento's steps and evidence pills have room (no cramped 150px columns). */
@media(min-width:701px) and (max-width:999.98px){:root .home .story-stack,:root .home .journey-col{grid-column:1/-1}}
/* Narrow phones: the award and system proofs stack instead of squeezing into two thin columns. */
@media(max-width:480px){:root .evidence-pair{grid-template-columns:minmax(0,1fr);gap:28px}}

/* Below desktop: no extra band under the header line. The carousel and the intro's short side sit 16px under the nav, as on desktop; the tall side still starts at the nav top. */
@media(max-width:999.98px){:root .home .home-grid{margin-top:0}:root .home .home-grid>.intro{margin-top:-72px}}
@media(max-width:700px){:root .home .home-grid>.intro{margin-top:-62px}}
@media(max-width:480px){:root .home .home-grid>.intro{margin-top:-53px}}

/* Case studies (scrolling pane, ≥901px): the pane itself is invisible, with no border, fill or shadow. Only the chapter bento cards show. Padding is just enough that card borders and shadows aren't cropped; the thin scrollbar sits in its own gutter at the side. */
@media(min-width:901px){
  :root .case-page .story-chapters,:root:not([data-scheme=light]) .case-page .story-chapters,:root[data-scheme=light] .case-page .story-chapters{background:none;border-color:transparent;box-shadow:none;border-radius:0;padding:4px 10px 4px 4px;scroll-padding:4px;scrollbar-gutter:stable}
}
@supports selector(::-webkit-scrollbar){@media(min-width:901px){
  :root .case-page .story-chapters{scrollbar-width:auto;scrollbar-color:auto}
  .case-page .story-chapters::-webkit-scrollbar{width:6px}
  .case-page .story-chapters::-webkit-scrollbar-track{background:transparent;margin-block:12px}
  .case-page .story-chapters::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--case-accent) 70%,transparent);border-radius:6px}
}}

/* Outside work, 1000–1365px: the intro takes its own full-width row (text beside the passport) and the five photos share the row below, so nothing is cropped. */
@media(min-width:1000px) and (max-width:1365.98px){
  :root .outside-work{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto clamp(260px,24vw,330px)}
  :root .outside-intro{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:48px;row-gap:14px;align-items:start}
  :root .outside-intro>*{grid-column:1}
  :root .outside-intro .passport{grid-column:2;grid-row:1/span 5;margin-top:0;align-self:center}
  :root .outside-work .shot-meadow{grid-row:auto}
}

/* Nav tabs (481px and up): heavier labels, a slightly taller tab, and one green liquid marker on every page, moved by nav-liquid.js. */
@media(min-width:481px){
  :root :is(.home,.lab-page,.case-page) header nav a{font-weight:600;letter-spacing:.04em;padding-block:12px}
  :root :is(.home,.lab-page,.case-page) header nav a:not(.active){color:color-mix(in srgb,var(--text) 72%,transparent)}
  :root :is(.home,.lab-page,.case-page) header nav a:not(.active):hover{color:var(--text);background:none;box-shadow:none}
  :root :is(.home,.lab-page,.case-page) header nav a{position:relative;z-index:1}
  :root header nav .nav-liquid{position:absolute;z-index:0;left:0;top:6px;bottom:6px;box-sizing:border-box;border-radius:16px;transition:none;transform-origin:50% 50%;will-change:transform,width;contain:layout style;
    background:linear-gradient(135deg,#3a6150,#24453a);border:1px solid #8de0bd42;box-shadow:inset 0 1px 0 #d4ffe957,0 6px 16px #05080699,0 0 22px #16a36a30}
  :root :is(.home,.lab-page,.case-page) header nav a.active,:root :is(.home,.lab-page,.case-page) header nav a.active:hover{background:none;box-shadow:none;color:#b4f5d8;text-shadow:none}
  :root[data-scheme=light] header nav .nav-liquid{background:linear-gradient(135deg,#d3f1e2,#b6e3cd);border-color:#16a36a45;box-shadow:inset 0 1px 0 #ffffffd9,0 4px 12px #073f3526}
  :root[data-scheme=light] :is(.home,.lab-page,.case-page) header nav a.active{color:#073f35}
}

/* Between pages the page swaps instantly (no flash); the marker has already moved on the old page, so no snapshot morphs. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* About page: its own 12-column grid (not .lab-grid, whose heading rules would flatten these sections). */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,2.1vw,36px)}
.about-grid>*{grid-column:1/-1;min-width:0}
:root .about-grid>.about-hero{min-height:0;padding:clamp(28px,3.2vw,52px);gap:20px}
.about-hero p{max-width:68ch;font-size:clamp(16px,1.25vw,19px);line-height:1.75;color:var(--muted)}
.about-story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:inherit}
.about-story .story-head{grid-column:1/-1;padding:clamp(24px,2.4vw,36px)}
.about-story .story-head h2{font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin-top:10px;text-wrap:balance}
.story-chapter{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2vw,30px)}
.story-when{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.story-chapter h3{font-size:clamp(19px,1.5vw,23px);line-height:1.2}
.story-chapter p{font-size:15px;line-height:1.7;color:var(--muted)}
.about-drives .drives-quote{font-size:clamp(24px,2.2vw,34px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.about-reach{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:inherit;align-items:stretch}
.about-reach .social-tile{display:grid;place-items:center}
:root .about-page .outside-work{margin-top:0}
@media(max-width:999.98px){.about-story{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.about-story,.about-reach{grid-template-columns:minmax(0,1fr)}}

/* Worked with: official logos as single-colour marks tinted from the accent, each in a pressed well with its name. */
.clients{grid-column:1/-1;min-width:0}
.clients-tile{padding:clamp(24px,2.4vw,36px);display:grid;gap:clamp(18px,2vw,28px)}
.clients-head h2{font-size:clamp(26px,2.4vw,36px);line-height:1.12;margin-top:10px;text-wrap:balance}
.client-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.client-logos li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:clamp(120px,10vw,150px);padding:18px 14px;border-radius:20px;background:var(--surface);box-shadow:var(--neu-in,inset 3px 3px 8px #0006,inset -3px -3px 8px #ffffff0d)}
.client-logo{display:block;height:var(--h);width:calc(var(--h) * var(--r));max-width:100%;background:linear-gradient(135deg,#a9ecd0,#6fcaa3);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;opacity:.88;transition:opacity .3s,transform .3s}
.client-logos li:hover .client-logo{opacity:1;transform:translateY(-1px)}
.client-logos small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
[data-scheme=light] .client-logo{background:linear-gradient(135deg,#0f5b4a,#073f35);opacity:.9}
@media(max-width:700px){.client-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.client-logo{height:calc(var(--h) * .82);width:calc(var(--h) * .82 * var(--r))}}
/* About: the reused social tile and CTA drop their home-grid placement so they sit side by side. */
:root .about-reach>.social-tile,:root .about-reach>.contact{grid-column:auto;grid-row:auto;margin:0;min-height:0;width:auto;align-self:stretch}
:root .about-reach>.contact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
:root .about-reach .social-links{align-content:center;justify-content:center;grid-auto-rows:auto;height:auto}
:root .about-reach .social-links a{align-self:center;height:auto;aspect-ratio:1}
/* Nine logos: a clean 3 × 3 on desktop and tablet; two columns on phones with the last logo spanning the row. */
:root .client-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){:root .client-logos{grid-template-columns:repeat(2,minmax(0,1fr))}:root .client-logos li:last-child:nth-child(odd){grid-column:1/-1}}
/* Logo wall, compact: smaller marks in low wells, one row on desktop, heading and eyebrow on one line. */
:root .clients-tile{padding:clamp(20px,1.8vw,28px);gap:clamp(14px,1.4vw,20px)}
:root .clients-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
:root .clients-head h2{font-size:clamp(20px,1.6vw,26px);margin-top:0}
:root .client-logos{grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(8px,.9vw,14px)}
:root .client-logos li{min-height:0;height:clamp(78px,6.4vw,96px);padding:10px 8px;gap:8px;border-radius:16px}
:root .client-logo{height:calc(var(--h) * .5);width:calc(var(--h) * .5 * var(--r))}
:root .client-logos small{font-size:9.5px;letter-spacing:.08em;line-height:1.2}
@media(max-width:1199.98px){:root .client-logos{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:700px){:root .client-logos{grid-template-columns:repeat(3,minmax(0,1fr))}:root .client-logos li:last-child:nth-child(odd){grid-column:auto}:root .client-logo{height:calc(var(--h) * .44);width:calc(var(--h) * .44 * var(--r))}:root .client-logos li{height:84px}}

/* Sticky header: logo, nav and icons stay at the top on Home, Lab and About.
   A soft blurred scrim fades in once content scrolls under it. */
body.home>header,body.lab-page>header{position:sticky;top:0}
html:has(body.home),html:has(body.lab-page){overflow-x:clip}
body.home>header::before,body.lab-page>header::before{content:"";position:absolute;z-index:-1;top:0;bottom:-18px;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--bg) 88%,transparent) 55%,color-mix(in srgb,var(--bg) 0%,transparent));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
@supports (animation-timeline:scroll()){body.home>header::before,body.lab-page>header::before{opacity:0;animation:header-scrim linear both;animation-timeline:scroll(root);animation-range:0 90px}}
@keyframes header-scrim{to{opacity:1}}

/* Page cube (nav-cube.js). Faces sit below the sticky header; the void shows only while the camera pulls back. */
.cube-stage>*{position:fixed;inset:0;pointer-events:none;visibility:hidden}
.cube-stage .cube-face{opacity:0;will-change:transform;overflow:hidden}
.cube-stage .cube-face,.cube-stage .cube-plate{bottom:auto}
.cube-stage .cube-face iframe{display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:normal!important;will-change:transform}
/* While the cube turns, the header scrim follows the climb instead of the real scroll position. */
@supports (animation-timeline:scroll()){body.cube-turning.home>header::before,body.cube-turning.lab-page>header::before{animation:none;opacity:var(--cube-scrim,1)}}
.cube-stage.is-turning .cube-face{opacity:1}
.cube-stage.is-turning .cube-void{visibility:visible}
/* Shading per theme: dark neumorphism takes deep black falloff; light neumorphism uses the soft grey-green of its own shadows. */
:root{--cube-shade-tint:#000;--cube-shade-max:.62}
[data-scheme=light]{--cube-shade-tint:#6b786e;--cube-shade-max:.24}
.cube-void{background:radial-gradient(90% 80% at 50% 45%,color-mix(in srgb,var(--bg) 62%,#000),color-mix(in srgb,var(--bg) 22%,#000))}
[data-scheme=light] .cube-void{background:radial-gradient(90% 80% at 50% 45%,color-mix(in srgb,var(--bg) 92%,#a5ada3),color-mix(in srgb,var(--bg) 72%,#8e988f))}
.cube-stage>*,.cube-live{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cube-shade,.cube-live::after{position:absolute;inset:0;background:var(--cube-shade-tint);opacity:calc(var(--cube-shade,0) * var(--cube-shade-max));pointer-events:none}
/* The live face is clipped to its bento grid: ground behind the tiles, shade over them, both reaching up to tiles that rise above main. */
.cube-live::after{content:"";z-index:2147483000;inset:var(--cube-t,0px) var(--cube-r,0px) var(--cube-b,0px) var(--cube-l,0px);border-radius:var(--cube-radius,0px)}
.cube-stage .cube-face .cube-shade{will-change:transform}
body.cube-turning>footer{visibility:hidden}
.cube-live{will-change:transform}
body.cube-turning{cursor:progress}
/* Arriving from the nav, the header never moved: don't redraw the logo. */
html[data-arrived] .ad-halo,html[data-arrived] .ad-core path{animation:none}

/* Case studies: a quiet Back control at the top left, beside the logo. Same pressed-circle
   material as the theme button; the label hides on narrow screens. */
:root .case-page header{justify-content:flex-start}
:root .case-page header .settings{margin-left:auto}
.case-back{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;padding-right:4px;border-radius:999px;color:color-mix(in srgb,var(--text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:color .35s}
.case-back-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--glass-edge);color:var(--accent);box-shadow:var(--neu-sm),var(--inset);transition:box-shadow .35s,color .35s}
.case-back-icon svg{width:18px;height:18px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.case-back:hover,.case-back:focus-visible{color:var(--text)}
.case-back:hover .case-back-icon,.case-back:focus-visible .case-back-icon{color:var(--text);box-shadow:var(--neu-sm),var(--inset),0 0 18px var(--spill)}
.case-back:hover .case-back-icon svg,.case-back:focus-visible .case-back-icon svg{transform:translateX(-3px)}
.case-back:active .case-back-icon{box-shadow:var(--neu-in)}
.case-back:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.case-back-icon svg{transition:none}}
@media (max-width:700px){.case-back{gap:0;padding-right:0}.case-back-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Intro tile: a regular tile like its neighbours (Akshay: no complex shape). No reversed-L slab, no rise
   under the header, same surface, edge, shadow and radius as every other tile; headline sits at normal spacing. */
:root body.home .home-grid>.intro{margin-top:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow),var(--inset);overflow:hidden;min-height:0;padding:clamp(26px,2.6vw,38px)}
:root body.home .home-grid>.intro h1{margin-top:clamp(4px,1vw,14px)}
:root body.home .home-grid>.intro:is(:hover,:focus-within){box-shadow:var(--shadow),var(--inset)}

/* Light theme borders: the same quiet edge dark mode has (a faint line just off the surface), instead of a bright white rim. */
:root[data-scheme=light]{--line:#1f3a2e17}
:root[data-scheme=light] .home-grid>.project-roller{border-color:var(--line)}

/* One neumorphic material everywhere, taken from the journey dials (Akshay: tiles must match their treatment).
   Raised = the dial's recipe scaled up (tight shadow bottom-right, bright lift top-left, hairline inset); pressed = --neu-in.
   Tiles, How I work, chips and Lab slots all use it; accents stay as colour only, never as a separate material. */
:root{--neu-lg:10px 10px 24px #050806d9,-8px -8px 22px #2a3a3166;--shadow:var(--neu-lg)}
:root[data-scheme=light]{--neu-lg:10px 10px 24px #a5ada366,-10px -10px 24px #ffffffd9;--shadow:var(--neu-lg)}
:root .process-bento .tile{background:var(--surface);border-color:var(--line)}
:root .home .story-stack .process-bento .tile:is(:hover,:focus-within){box-shadow:var(--shadow),var(--inset),0 0 30px var(--spill)}
:root .step .proof{background:var(--surface);border-color:transparent;box-shadow:var(--neu-sm),var(--inset)}
:root .step .proof:is(:hover,:focus-visible){box-shadow:var(--neu-in)}
:root .lab-grid .lab-slot{background:var(--surface);border:1px solid transparent;box-shadow:var(--neu-in)}
/* Edges like the journey dials: no drawn border line on cards or raised controls in the grid; the edge is made
   by light and shadow alone (top-left lift, bottom-right shadow, 1px inset highlight). Width stays, so nothing shifts. */
:root main :is(.tile,.card),:root body.home .home-grid>.intro{border-color:transparent}
:root main :is(.social-links a,.behance-thumb,.roller-controls button){border-color:transparent}

/* PREVIEW (branch preview/glass-neumorphism): glass + neumorphism in one material. Same raised/pressed shadow depths,
   but the surfaces are translucent frosted glass; the photo behind shows through a lighter wash. */
html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d8f;--inset:inset 1px 1px 0 #ffffff26,inset -1px -1px 0 #0000004d}
html:root[data-material=glass][data-scheme=light]{--surface:#eef0e9a3;--inset:inset 1px 1px 0 #ffffffeb,inset -1px -1px 0 #aab8b038}
html:root[data-material=glass] .mountain-bg{background:linear-gradient(#121916b8,#121916e0),url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass][data-scheme=light] .mountain-bg{background:linear-gradient(#e6e8e1b8,#e6e8e1dc),url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass] main :is(.tile,.card,.clients li,.about-me li,.step-knob,.journey-icon,.social-links a,.behance-thumb,.process-kit span,.step .proof){-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35)}
/* Preview, round 2: the first pass read as unchanged (the photo is blocked in previews and the glass was too dense).
   Much clearer glass, a lighter wash, and soft colour glows behind the grid so the frost has something to catch. */
html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d63}
html:root[data-material=glass][data-scheme=light]{--surface:#eef0e975}
html:root[data-material=glass] .mountain-bg{background:linear-gradient(#12191699,#121916d1),url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass][data-scheme=light] .mountain-bg{background:linear-gradient(#e6e8e194,#e6e8e1cc),url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass] .mountain-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(38% 42% at 18% 32%,#16a36a52,transparent 70%),radial-gradient(34% 38% at 84% 64%,#e6b96c38,transparent 70%),radial-gradient(40% 36% at 55% 96%,#2f8f9d3d,transparent 70%)}
html:root[data-material=glass][data-scheme=light] .mountain-bg::after{background:radial-gradient(38% 42% at 18% 32%,#16a36a3d,transparent 70%),radial-gradient(34% 38% at 84% 64%,#e6b96c47,transparent 70%),radial-gradient(40% 36% at 55% 96%,#2f8f9d33,transparent 70%)}
html:root[data-material=glass] main :is(.tile,.card,.clients li,.about-me li,.step-knob,.journey-icon,.social-links a,.behance-thumb,.process-kit span,.step .proof){-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}

/* Glass inside the glass (Akshay: icon rings and everything inside the bento must be glass too).
   Raised items: clear glass fill + light rim, same neumorphic lift. Pressed items: tinted glass wells with softer inset depth.
   One rule per element so existing hover/pressed states keep winning. */
html:root[data-material=glass]{--glass-fill:linear-gradient(145deg,#ffffff1c,#ffffff05 72%);--glass-well:#05080626;--glass-rim:inset 1px 1px 0 #ffffff30,inset -1px -1px 0 #00000040;--neu-in-glass:inset 3px 3px 8px #05080699,inset -3px -3px 8px #2a3a3147;--glass-blur:blur(14px) saturate(1.5)}
html:root[data-material=glass][data-scheme=light]{--glass-fill:linear-gradient(145deg,#ffffffb8,#ffffff47 72%);--glass-well:#dfe5d94d;--glass-rim:inset 1px 1px 0 #ffffff,inset -1px -1px 0 #aab8b033;--neu-in-glass:inset 3px 3px 8px #a5ada366,inset -3px -3px 8px #ffffffcc}
html:root[data-material=glass] main .timeline .journey-icon{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html:root[data-material=glass] main .timeline .journey-icon::after{box-shadow:var(--neu-in-glass);background:var(--glass-well)}
html:root[data-material=glass] main .step-knob{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html:root[data-material=glass] main .step-knob::after{box-shadow:var(--neu-in-glass);background:var(--glass-well)}
html:root[data-material=glass] main .timeline li::after{background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 35%,transparent)) center/2px 100% no-repeat,var(--glass-well);box-shadow:var(--neu-in-glass)}
html:root[data-material=glass] main .social-links a{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html:root[data-material=glass] main .behance-thumb{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim)}
html:root[data-material=glass] main .roller-controls button{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html:root[data-material=glass] main .process-kit span:not(.eyebrow){background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim)}
html:root[data-material=glass] main .step .proof{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim)}
html:root[data-material=glass] main .philosophy li>svg{background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim)}
html:root[data-material=glass] main .philosophy li{background:var(--glass-well);box-shadow:var(--neu-in-glass)}
html:root[data-material=glass] main .client-logos li{background:var(--glass-well);box-shadow:var(--neu-in-glass)}
html:root[data-material=glass] main .passport .stamp:not(.next){background:var(--glass-fill);box-shadow:var(--neu-sm),var(--glass-rim)}
html:root[data-material=glass] main .passport .stamp.next{background:var(--glass-well);box-shadow:var(--neu-in-glass)}
html:root[data-material=glass] main .project-roller,html:root[data-material=glass] main .contact{-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}

/* Glass cube: no backdrop behind the turning cube; the real background photo shows around and through it. */
html:root[data-material=glass] .cube-stage .cube-void{background:none}

/* Refinements (Akshay 2026-09-16): carved inner glass, more transparency within accessibility limits, glass cube slabs. */
html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d4d;--surface-frost:#19221dc2;--glass-fill:linear-gradient(145deg,#ffffff12,#ffffff00 62%);--glass-well:#05080614;--cube-pane:#0c120fa6;--cube-pane-rim:inset 1px 1px 0 #ffffff24,inset -1px -1px 0 #00000059,0 30px 80px #00000066}
html:root[data-material=glass][data-scheme=light]{--surface:#eef0e95c;--surface-frost:#eef0e9d1;--glass-fill:linear-gradient(145deg,#ffffff66,#ffffff00 62%);--glass-well:#a5ada31a;--cube-pane:#f4f6f14d;--cube-pane-rim:inset 1px 1px 0 #ffffffcc,inset -1px -1px 0 #aab8b04d,0 30px 80px #5a6a5e33}
html:root[data-material=glass] .mountain-bg{background:linear-gradient(#12191673,#121916b8),url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass][data-scheme=light] .mountain-bg{background:linear-gradient(#e6e8e166,#e6e8e1a8),url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass] main :is(.tile.tile,.card.card){-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}
/* Carved from the same slab: inner pieces never blur again on top of the tile; light and shadow alone shape them. */
html:root[data-material=glass] body main :is(.clients li,.about-me li,.step-knob,.journey-icon,.social-links a,.behance-thumb,.process-kit span,.step .proof,.roller-controls button,.philosophy li>svg,.passport .stamp){-webkit-backdrop-filter:none;backdrop-filter:none}
/* Glass cube: each face gets a glass slab behind its tiles (fades in mid-turn, gone at rest); tiles frost instead of sampling in 3D. */
.cube-live::before{content:"";position:absolute;inset:calc(var(--cube-t,0px) - 18px) calc(var(--cube-r,0px) - 18px) calc(var(--cube-b,0px) - 18px) calc(var(--cube-l,0px) - 18px);border-radius:calc(var(--cube-radius,0px) + 18px);background:var(--cube-pane);box-shadow:var(--cube-pane-rim);opacity:var(--cube-pane-o,0);z-index:-1;pointer-events:none}
.cube-stage .cube-face .cube-pane{position:absolute;background:var(--cube-pane);box-shadow:var(--cube-pane-rim);opacity:var(--cube-pane-o,0);pointer-events:none;will-change:transform}
html[data-material=glass] body.cube-turning main :is(.tile,.card){transition:background-color .2s ease}
html[data-material=glass] body.cube-frost main{--surface:var(--surface-frost)}
html[data-material=glass] body.cube-frost main :is(.tile,.card,.project-roller,.contact){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Landing from the cube: the frost melts back into clear glass. */
html[data-material=glass][data-arrived=nav] body main :is(.tile,.card){animation:frost-settle .55s ease-out}
@keyframes frost-settle{from{background-color:var(--surface-frost)}}
/* Accessibility: people who ask for less transparency or more contrast get solid tiles and a plain ground. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d;--surface-frost:#19221d;--glass-fill:none;--glass-well:#0508062e;--cube-pane:#0c120f}
  html:root[data-material=glass][data-scheme=light]{--surface:#eef0e9;--surface-frost:#eef0e9;--glass-fill:none;--glass-well:#dfe5d9;--cube-pane:#f4f6f1}
  html:root[data-material=glass] .mountain-bg,html:root[data-material=glass][data-scheme=light] .mountain-bg{background:var(--bg)}
  html:root[data-material=glass] .mountain-bg::after{display:none}
  html:root[data-material=glass] body main *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){html[data-material=glass][data-arrived=nav] body main :is(.tile,.card){animation:none}}
/* Readability over glass (WCAG AA): the photo stays clearer outside the tiles, but tile interiors keep enough body and
   muted text gains contrast, so small text holds 4.5:1 over the busiest parts of the photo. */
html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d73;--muted:#c3cec6}
html:root[data-material=glass][data-scheme=light]{--surface:#eef0e98c;--muted:#45524a}

/* Liquid-glass pass (Akshay: background fully visible, bento a bit transparent, aware of both, never overwhelming).
   The photo has no wash. Readability comes from the glass itself: a strong blur that also dims (dark) or lifts (light)
   what is behind the tile, a light tint, and a bright specular rim, rather than from hiding the photo. */
html:root[data-material=glass] .mountain-bg,html:root[data-material=glass][data-scheme=light] .mountain-bg{background:url('assets/backgrounds/mountain-bg.webp') center/cover}
html:root[data-material=glass] .mountain-bg::after{display:none}
html:root[data-material=glass]:not([data-scheme=light]){--surface:#141c1861;--surface-frost:#141c18c7;--inset:inset 1px 1px 0 #ffffff47,inset -1px -1px 0 #ffffff14;--liquid:blur(34px) saturate(1.7) brightness(.62)}
html:root[data-material=glass][data-scheme=light]{--surface:#f4f6f170;--surface-frost:#f4f6f1d6;--inset:inset 1px 1px 0 #ffffffe6,inset -1px -1px 0 #ffffff66;--liquid:blur(34px) saturate(1.5) brightness(1.18)}
html:root[data-material=glass] main :is(.tile.tile,.card.card),html:root[data-material=glass] main .project-roller,html:root[data-material=glass] main .contact{-webkit-backdrop-filter:var(--liquid);backdrop-filter:var(--liquid)}
/* The sticky header band stays legible over the full photo. */
/* (header band uses the regular scrim in Glass mode; the dimming backdrop greyed the header text) */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d;--surface-frost:#19221d}
  html:root[data-material=glass][data-scheme=light]{--surface:#eef0e9;--surface-frost:#eef0e9}
  html:root[data-material=glass] .mountain-bg,html:root[data-material=glass][data-scheme=light] .mountain-bg{background:var(--bg)}
  html:root[data-material=glass] body main *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Glass + neumorphism blend (Akshay: tiles a little more transparent yet readable; neumorphic shadows translucent too).
   Tiles carry less tint; the glass dims (dark) or lifts (light) the photo a little more to keep text readable.
   Every neumorphic shadow and lift is now translucent, so depth reads as light through glass rather than a solid slab. */
html:root[data-material=glass]:not([data-scheme=light]){
  --surface:#141c1847;--surface-frost:#141c18c2;--liquid:blur(38px) saturate(1.7) brightness(.55);
  --neu-lg:10px 10px 26px #0508066b,-8px -8px 22px #ffffff0f;--shadow:var(--neu-lg);
  --neu-sm:5px 5px 12px #05080661,-4px -4px 10px #ffffff0d;
  --neu-in:inset 4px 4px 9px #05080666,inset -4px -4px 9px #ffffff0f;
  --neu-in-glass:inset 3px 3px 8px #05080659,inset -3px -3px 8px #ffffff0f}
html:root[data-material=glass][data-scheme=light]{
  --surface:#f4f6f152;--surface-frost:#f4f6f1d1;--liquid:blur(38px) saturate(1.5) brightness(1.24);
  --neu-lg:10px 10px 26px #5a6a5e2e,-9px -9px 22px #ffffff73;--shadow:var(--neu-lg);
  --neu-sm:5px 5px 12px #5a6a5e29,-5px -5px 12px #ffffff66;
  --neu-in:inset 4px 4px 9px #5a6a5e33,inset -4px -4px 9px #ffffff80;
  --neu-in-glass:inset 3px 3px 8px #5a6a5e2e,inset -3px -3px 8px #ffffff80}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html:root[data-material=glass]:not([data-scheme=light]){--surface:#19221d;--surface-frost:#19221d}
  html:root[data-material=glass][data-scheme=light]{--surface:#eef0e9;--surface-frost:#eef0e9}
}
/* Dark mode keeps its original neumorphic shadows (Akshay: "Dark mode shadows looked good"); only light mode shadows are translucent. */
html:root[data-material=glass]:not([data-scheme=light]){
  --neu-lg:10px 10px 26px #050806d9,-9px -9px 24px #2a3a3170;--shadow:var(--neu-lg);
  --neu-sm:5px 5px 12px #050806d9,-4px -4px 11px #2a3a3166;
  --neu-in:inset 4px 4px 9px #050806e6,inset -4px -4px 9px #2a3a3152;
  --neu-in-glass:inset 3px 3px 8px #05080699,inset -3px -3px 8px #2a3a3147}
/* Light mode, rebalanced (Akshay: not glassy enough, and neumorphism got lost).
   Glass: much lighter tint and only a slight lift, so the photo reads through clearly instead of frosting white.
   Neumorphism: a real extruded pair again (a tinted green-grey shadow bottom-right, a bright lift top-left) plus crisp
   inner bevels, and deeper pressed wells, so the shapes rise and sink like soft plastic set inside clear glass. */
html:root[data-material=glass][data-scheme=light]{
  --surface:#f4f6f138;--surface-frost:#f4f6f1c7;--liquid:blur(30px) saturate(1.6) brightness(1.1);
  --inset:inset 1.5px 1.5px 0 #ffffffe6,inset -1.5px -1.5px 0 #28402d24;
  --neu-lg:14px 14px 30px #28402d4d,-10px -10px 26px #ffffffa6;--shadow:var(--neu-lg);
  --neu-sm:6px 6px 14px #28402d47,-5px -5px 12px #ffffff99;
  --neu-in:inset 4px 4px 10px #28402d42,inset -4px -4px 10px #ffffffb3;
  --neu-in-glass:inset 4px 4px 10px #28402d3d,inset -4px -4px 10px #ffffffa6;
  --glass-rim:inset 1.5px 1.5px 0 #ffffffe6,inset -1.5px -1.5px 0 #28402d1f}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){html:root[data-material=glass][data-scheme=light]{--surface:#eef0e9;--surface-frost:#eef0e9}}
/* Light mode shadows, softened (Akshay: the white lift isn't cool; lighter, more transparent shadows).
   Only a faint glassy highlight remains top-left; the green-grey depth is kept but more transparent. */
html:root[data-material=glass][data-scheme=light]{
  --neu-lg:12px 12px 28px #28402d2e,-8px -8px 22px #ffffff2e;--shadow:var(--neu-lg);
  --neu-sm:5px 5px 12px #28402d29,-4px -4px 10px #ffffff29;
  --neu-in:inset 3px 3px 9px #28402d29,inset -3px -3px 9px #ffffff38;
  --neu-in-glass:inset 3px 3px 9px #28402d24,inset -3px -3px 9px #ffffff33;
  --inset:inset 1px 1px 0 #ffffff99,inset -1px -1px 0 #28402d1a;
  --glass-rim:inset 1px 1px 0 #ffffff99,inset -1px -1px 0 #28402d14}

/* Light mode: light text on glass, like real glass over a photo (Akshay; Apple Liquid Glass).
   Inside the grid the glass carries a faint smoke tint and dims the photo slightly, so light text reads;
   the header, nav and page outside the tiles stay in the light theme. */
html:root[data-material=glass][data-scheme=light]{--liquid:blur(32px) saturate(1.5) brightness(.8)}
html:root[data-material=glass][data-scheme=light] main{--text:#f6f8f3;--muted:#dfe7e1;--accent:#9fe9c8;--pc:#f0c982;--pc-soft:#f0c9822e;--pc-line:#f0c98247;--line:#ffffff24;--surface:#16211b38;--surface-frost:#16211bb8;--glass-fill:linear-gradient(145deg,#ffffff22,#ffffff00 62%);--glass-well:#0508061f;color:var(--text)}
html:root[data-material=glass][data-scheme=light] main :is(.intro h1,.varah){color:var(--text)}
html:root[data-material=glass][data-scheme=light] main :is(.varah .eyebrow,.varah .description,.varah .project-footer){color:var(--muted)}
html:root[data-material=glass][data-scheme=light] main :is(h1 em,.intro h1 em,.contact h2 em,.lab-intro h1 em){background-image:linear-gradient(115deg,#c6a15b 10%,#fff6d7 42%,#c6a15b 70%)}
html:root[data-material=glass][data-scheme=light] main .philosophy svg{color:var(--accent)}
html:root[data-material=glass][data-scheme=light] main .client-logo{background:linear-gradient(135deg,#f1fff8,#9fe9c8)}
html:root[data-material=glass][data-scheme=light] main :is(.tile,.card,.contact){text-shadow:0 1px 2px #0000002e}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){html:root[data-material=glass][data-scheme=light] main{--surface:#1c2721;--surface-frost:#1c2721}}
/* Light mode refinement: a lighter smoke on the glass, and the inner dials keep their essence.
   Inside the grid the rings, knobs, chips and wells borrow dark mode's dial recipe (tight shadow + faint lift, rim,
   pressed inner ring), sized for the lighter glass, so they read as carved dials rather than faint smudges. */
html:root[data-material=glass][data-scheme=light]{--liquid:blur(32px) saturate(1.5) brightness(.9)}
html:root[data-material=glass][data-scheme=light] main{--surface:#1a261f1f;--surface-frost:#1a261fa3;
  --neu-sm:5px 5px 12px #0f1a1466,-4px -4px 10px #ffffff38;
  --neu-in-glass:inset 3px 3px 8px #0f1a145c,inset -3px -3px 8px #ffffff38;
  --neu-in:inset 4px 4px 9px #0f1a145c,inset -4px -4px 9px #ffffff38;
  --glass-rim:inset 1px 1px 0 #ffffff73,inset -1px -1px 0 #00000033;
  --glass-fill:linear-gradient(145deg,#ffffff30,#ffffff00 62%);--glass-well:#0508062b}
/* Fixes (Akshay 2026-09-16): How I work gold hidden in light mode; light glass washed out; dark cube faces near black.
   - How I work sets its own gold on .process-bento, so the light-text gold must be set there too.
   - Light glass: medium smoke with a little more dimming behind tiles, and a brighter rim so tile edges read.
   - Glass cube: much lighter frost and slab while turning, so the faces stay see-through in dark mode. */
html:root[data-material=glass][data-scheme=light] main .process-bento{--pc:#f3cf8c;--pc-soft:#f3cf8c2e;--pc-line:#f3cf8c52}
html:root[data-material=glass][data-scheme=light]{--liquid:blur(34px) saturate(1.4) brightness(.82)}
html:root[data-material=glass][data-scheme=light] main{--surface:#1a261f42;--surface-frost:#1a261f8c;--inset:inset 1px 1px 0 #ffffff8c,inset -1px -1px 0 #00000026}
html:root[data-material=glass]:not([data-scheme=light]){--surface-frost:#141c1880;--cube-pane:#0c120f47}
html:root[data-material=glass][data-scheme=light]{--cube-pane:#f4f6f133}


/* Three modes (Akshay 2026-09-16): Light Neumorphism, Dark Neumorphism and Glass Neumorphism. Every glass rule above is
   scoped to html[data-material=glass]; Light and Dark are the solid neumorphism from before glass. In the solid modes each
   turning cube face is a solid slab in the page colour. */
html:root[data-material=solid]{--cube-pane:var(--bg);--cube-pane-rim:none}
html:root[data-material=solid] .cube-live::before,html:root[data-material=solid] .cube-stage .cube-face .cube-pane{opacity:1}
/* Theme button shows the mode it switches to: Light -> moon (Dark), Dark -> droplet (Glass), Glass -> sun (Light). */
.glass-icon{display:none}
html[data-scheme=dark][data-material=solid] .sun-icon{display:none}
html[data-scheme=dark][data-material=solid] .glass-icon{display:block}
/* Glass mode header: the sky at the top of the photo is the brightest part, so the header band is a smoked glass scrim
   (always on) and the nav pill and header buttons carry a darker glass tint; header text keeps its contrast. */
html[data-material=glass] body:is(.home,.lab-page)>header::before{opacity:1!important;animation:none!important;background:linear-gradient(#0b110ec7 45%,#0b110e00);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
html[data-material=glass] header nav,html[data-material=glass] header .settings button{background:#101814b3!important}

/* Mode order is now Glass (default) -> Dark -> Light. The theme button shows the mode it switches to:
   Glass -> moon (Dark), Dark -> sun (Light), Light -> droplet (Glass). */
html[data-scheme=dark][data-material=solid] .sun-icon{display:block}
html[data-scheme=dark][data-material=solid] .glass-icon{display:none}
html[data-material=glass] .sun-icon{display:none}
html[data-material=glass] .moon-icon{display:block}
html[data-scheme=light] .moon-icon{display:none}
html[data-scheme=light] .glass-icon{display:block}

/* Glass header, smoothed: an eased scrim (many stops, no hard edge) whose blur fades out with it, and a clear
   glass nav pill and header buttons (light sheen over a thin smoke, rim light, soft shadow) instead of an opaque fill. */
html[data-material=glass] body:is(.home,.lab-page)>header::before{bottom:-48px;background:linear-gradient(#0b110e9e 0%,#0b110e8f 22%,#0b110e70 44%,#0b110e47 64%,#0b110e21 82%,#0b110e00 100%);-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
html[data-material=glass] header nav{background:linear-gradient(160deg,#ffffff1f,#ffffff08 45%,#0000000f),#0f171363!important;-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:0;box-shadow:inset 1px 1.5px 3px #ffffff29,inset -1.5px -2px 5px #0000003d,0 10px 30px #0508068c}
html[data-material=glass] header .settings button{background:linear-gradient(160deg,#ffffff1f,#ffffff08 50%,#0000000f),#0f171363!important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 1px 1.5px 3px #ffffff29,inset -1.5px -2px 5px #0000003d,0 8px 20px #05080680}

/* Glass neumorphism, softened into curved glass: every edge is a blurred bevel (light rolling over the top-left,
   shade under the bottom-right) instead of a 1px line, a gentle sheen gives the surface curvature, and the elevation
   is a wide, soft pair of shadows, so the tiles read as smooth elevated slabs made of glass. */
html:root[data-material=glass]:not([data-scheme=light]){
  --inset:inset 2px 2.5px 6px #ffffff1f,inset -3px -3.5px 10px #0000004d;
  --neu-lg:14px 16px 38px #050806b8,-9px -9px 28px #2a3a3152;--shadow:var(--neu-lg);
  --neu-sm:6px 7px 16px #050806a6,-4px -4px 12px #2a3a3142;
  --neu-in-glass:inset 4px 5px 11px #05080685,inset -4px -4px 10px #2a3a3138;
  --glass-rim:inset 1.5px 2px 4px #ffffff26,inset -2px -2.5px 6px #00000047;
  --glass-fill:radial-gradient(120% 120% at 25% 20%,#ffffff1c,#ffffff05 55%,#0000000d)}
html[data-material=glass] main :is(.tile,.card){background-image:linear-gradient(150deg,#ffffff17 0%,#ffffff05 40%,#00000012 100%)}

/* Glass cube, lighter: the incoming face's tiles stand in for the blurred, dimmed glass with a matching light tint
   (not a heavy frost), and the slab behind them is fainter, so the page we are heading to looks like itself. */
html:root[data-material=glass]:not([data-scheme=light]){--surface-frost:#141c1857;--cube-pane:#0c120f29}

/* Glass shadows (Akshay: treat the shadow as glass too, so the slab feels elevated like a gem).
   Elevation is layered like a real curved slab lifting off the page: a tight contact shadow, a mid penumbra and a wide
   soft falloff pulled in under the slab (negative spread), plus a faint green caustic where light passes through the glass,
   a soft lift of light on the top-left, and a glow inside the lower edge where the slab refracts. */
html:root[data-material=glass]:not([data-scheme=light]){
  --neu-lg:0 1px 2px #05080673,0 10px 20px -8px #050806a6,0 30px 60px -22px #050806d1,0 26px 54px -26px #8de0bd47,-10px -12px 32px -8px #ffffff0f;
  --shadow:var(--neu-lg);
  --neu-sm:0 1px 1.5px #05080673,0 6px 12px -4px #0508069e,0 14px 24px -12px #8de0bd38,-4px -5px 12px -4px #ffffff0f;
  --inset:inset 2px 2.5px 6px #ffffff1f,inset -3px -3.5px 10px #0000004d,inset 0 -14px 28px -18px #8de0bd29}
/* Glass header band: dense enough at the top that scrolled content never reads through the header, still easing out below. */
html[data-material=glass] body:is(.home,.lab-page)>header::before{background:linear-gradient(#0b110ee0 0%,#0b110ed6 38%,#0b110ea8 60%,#0b110e5c 80%,#0b110e1f 92%,#0b110e00 100%);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}

/* Glass neumorphism, made visible (Akshay: no shadow reads, it's all glass). Over a busy photo a soft dark shadow
   disappears, so the neumorphic cues move where they can be seen: a clearly offset dark drop shadow, a visible light
   lift on the top-left, and a pillowy convex surface inside the glass (broad inner highlight top-left, broad inner shade
   bottom-right, a curved sheen), so each tile reads as a soft raised slab made of glass. */
html:root[data-material=glass]:not([data-scheme=light]){
  --neu-lg:18px 22px 44px -6px #000000b8,6px 8px 14px -4px #0000008c,-14px -14px 34px -6px #cfeee01f,0 30px 60px -30px #8de0bd40;
  --shadow:var(--neu-lg);
  --inset:inset 7px 8px 18px -6px #ffffff2e,inset -10px -12px 24px -8px #00000073,inset 1px 1px 0 #ffffff26;
  --neu-sm:8px 10px 20px -4px #000000a6,-6px -6px 14px -4px #cfeee01a,0 12px 22px -12px #8de0bd33;
  --glass-rim:inset 3px 4px 8px -3px #ffffff33,inset -4px -5px 10px -4px #00000066;
  --neu-in-glass:inset 6px 7px 14px -4px #000000a6,inset -5px -5px 12px -4px #cfeee01f}
html[data-material=glass] main :is(.tile,.card){background-image:radial-gradient(130% 95% at 18% 0%,#ffffff21,#ffffff00 58%),linear-gradient(160deg,#ffffff00 45%,#00000029 100%)}

/* ===== Glass neumorphism, rebuilt on neumorphism's structure (Akshay 2026-09-16) =====
   Neumorphism: element and ground are one material; one light source; two OUTER shadows cast onto that ground
   (dark bottom-right, light top-left, both near the ground's own tone); no borders; flat face; pressed = the pair inset.
   In glass the ground must be glass too, or outer shadows fall on a busy photo and vanish. So:
   1. main is one frosted glass sheet (tint + blur + dimming) that calms the photo into an even ground;
   2. tiles are the same glass as that sheet (no tint or blur of their own), extruded from it;
   3. tiles cast the classic outer pair onto the sheet; inner dials use the same pair small; wells take it inset. */
html[data-material=glass] body>main{background:#0e151166;-webkit-backdrop-filter:blur(30px) saturate(1.45) brightness(.62);backdrop-filter:blur(30px) saturate(1.45) brightness(.62);border-radius:48px;padding-top:30px;padding-bottom:30px}
html[data-material=glass] body main{--surface:#ffffff00}
html[data-material=glass] body main :is(.tile,.card,.project-roller,.contact){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-image:none}
html:root[data-material=glass]:not([data-scheme=light]){
  --neu-lg:12px 12px 26px #0000008c,-11px -11px 26px #d6f5e814;--shadow:var(--neu-lg);
  --inset:0 0 0 #0000;
  --neu-sm:6px 6px 13px #00000080,-5px -5px 12px #d6f5e812;
  --neu-in:inset 5px 5px 11px #00000080,inset -5px -5px 11px #d6f5e812;
  --neu-in-glass:inset 5px 5px 11px #00000080,inset -5px -5px 11px #d6f5e812;
  --glass-rim:0 0 0 #0000;--glass-fill:none;--glass-well:#0000}
/* The cube turns the sheet too: while turning it drops the live blur (a 3D backdrop sample ghosts) for a matching frost. */
html[data-material=glass] body.cube-frost>main{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0e1511b8}
/* Brand glyphs that cut their letters out with the surface colour keep a solid surface behind them. */
html[data-material=glass] body main .brand-linkedin{--surface:#0e1511}

/* Clear glass ground (Akshay 2026-09-16): the sheet under the grid is transparent, not frosted, so the photo stays sharp;
   only the tiles are lightly frosted glass, still casting the outer neumorphic pair onto the clear ground. */
html[data-material=glass] body>main{background:#0e15111f;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-material=glass] body>main .tile{background-color:#0e151159!important;-webkit-backdrop-filter:blur(7px) saturate(1.2)!important;backdrop-filter:blur(7px) saturate(1.2)!important}
html[data-material=glass] body.cube-frost>main{background:#0e15111f}
html[data-material=glass] body.cube-frost>main .tile{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:#0e15119e!important}

/* Layers (Akshay 2026-09-16): scenery → one clear glass slab (static, edge to edge, no rounded frame) → bento cube.
   The slab never turns; only the cube does, and the cube stays as transparent mid-turn as at rest (no pane, no extra tint). */
html:root[data-material=glass] .mountain-bg::after{display:block;content:"";position:absolute;inset:0;background:#0e15111f;pointer-events:none}
html[data-material=glass] body>main,html[data-material=glass] body.cube-frost>main{background:none;border-radius:0}
html[data-material=glass] body.cube-frost>main .tile{background-color:#0e151159!important}
html[data-material=glass] .cube-live::before,html[data-material=glass] .cube-stage .cube-face .cube-pane{display:none}
html[data-material=glass] .cube-stage .cube-face .cube-shade,html[data-material=glass] .cube-live::after{display:none}

/* Home, wide screens: The Journey sits on the left and the proof/process column on the right (Akshay 2026-09-16). */
@media(min-width:1000px){:root .home .home-grid>.journey-col{grid-column:1/7;grid-row:5}:root .home .home-grid>.story-stack{grid-column:7/13;grid-row:5}}
/* Cube faces stay drawn for the whole turn; the face's page and plates join its 3D plane so their backs are culled. */
.cube-stage .cube-face{overflow:visible;transform-style:preserve-3d}
.cube-stage .cube-face>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* All modes: "I have worked with" logos are etched into the tile itself (glass slab or neumorphic surface) (Akshay 2026-09-16) — no wells around them,
   no caption chips. The logo is painted as a background image with filters (not a CSS mask, which could drop out
   while scrolling over the blurred glass): frosted white fill, a dark lip on the upper-left of the cut and a light one below. */
html:root[data-material] body main .client-logos li{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:6px 4px;height:clamp(64px,5.2vw,80px)}
html:root[data-material] body main .client-logos small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:root[data-material] body main .client-logo{-webkit-mask:none;mask:none;background:var(--logo) center/contain no-repeat;height:calc(var(--h) * .56);width:calc(var(--h) * .56 * var(--r));opacity:1;
  filter:brightness(0) invert(1) opacity(.6) drop-shadow(-1px -1px 0 #00000073) drop-shadow(1px 1px 0 #ffffff2e)}
html:root[data-material] body main .client-logos li:hover .client-logo{filter:brightness(0) invert(1) opacity(.78) drop-shadow(-1px -1px 0 #00000073) drop-shadow(1px 1px 0 #ffffff2e);transform:none}
/* Light surfaces: the cut reads darker than the surface, lit from the upper left. */
html:root[data-scheme=light] body main .client-logo{filter:brightness(0) opacity(.5) drop-shadow(-1px -1px 0 #00000026) drop-shadow(1px 1px 0 #ffffffd9)}
html:root[data-scheme=light] body main .client-logos li:hover .client-logo{filter:brightness(0) opacity(.72) drop-shadow(-1px -1px 0 #00000026) drop-shadow(1px 1px 0 #ffffffd9)}

/* One header on every page (Akshay 2026-09-16): Home's identity used to sit indented (left over from the notched intro slab)
   and dropped its subtitle between 1000 and 1120px, so the logo and nav moved when the page changed. Home now matches Lab and About. */
:root body.home>header .identity{padding-left:0}
@media(min-width:1000px){:root body.home .identity-name span{display:block}}

/* After the cube lands, focus moves to the new page's content for screen readers; the content area itself draws no focus ring. */
body>main[tabindex="-1"]:focus,body>main[tabindex="-1"]:focus-visible{outline:none}

/* Phones (touch screens under 700px wide, or under 500px tall in landscape): no live backdrop blur. iPads and desktops keep full glass. Each blurred surface costs graphics memory, and with the tiles, header
   and nav all blurring over a fixed photo, iPhone Safari ran out and restarted the tab while scrolling (Akshay 2026-09-16).
   Glass keeps its look with denser tints instead; the ambient aurora (hidden under the background anyway) is not drawn. */
@media (hover:none) and (pointer:coarse) and (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html:root:root:root:root:root:root body *,html:root:root:root:root:root:root body *::before,html:root:root:root:root:root:root body *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html:root body .ambient-world{display:none!important}
  html:root:root:root:root:root:root[data-material=glass] body>main .tile{background-color:#0e1511a6!important}
  html:root[data-material=glass] body header nav{background:linear-gradient(160deg,#ffffff1f,#ffffff08 50%,#0000000f),#0f1713d9!important}
  html:root[data-material=glass] body:is(.home,.lab-page,.case-page)>header::before{background:linear-gradient(#0b110ef2 0%,#0b110eeb 40%,#0b110eb8 62%,#0b110e66 80%,#0b110e24 92%,#0b110e00 100%)}
}

/* Client logos, all browsers: the etched look is baked into the images (assets/logos/etched, rendered from the same
   recolour + two edge shadows), so the logo is a plain picture. Safari drops CSS-filtered and masked elements while
   scrolling, which made the logos vanish there (Akshay 2026-09-16). Strength is plain opacity, which Safari keeps. */
html:root[data-material] body main .client-logo{-webkit-mask:none;mask:none;filter:none;background:var(--etched-dark) center/contain no-repeat;opacity:.66;transition:opacity .2s}
html:root[data-material] body main .client-logos li:hover .client-logo{filter:none;opacity:.78}
html:root[data-scheme=light] body main .client-logo{filter:none;background-image:var(--etched-light);opacity:.56}
html:root[data-scheme=light] body main .client-logos li:hover .client-logo{filter:none;opacity:.72}

/* Glass: Selected Work and The Journey are fully transparent slabs (no tint of their own), so their text sits straight on the
   photo. A soft two-layer text shadow lifts it off bright mist without reading as a glow (Akshay 2026-09-17). */
html:root[data-material=glass] body main :is(.project-roller .roller-top,.project-roller .roller-bottom,.journey){text-shadow:0 1px 1px #000000d9,0 1px 6px #000000a6,0 0 18px #00000080}
html:root[data-material=glass] body main :is(.project-roller .roller-top,.project-roller .roller-bottom,.journey) :is(.eyebrow,.roller-count,span,p,small){color:#e4ece6}
html:root[data-material=glass] body main .roller-card{text-shadow:none}

/* CTA that opens an outside tool: the tool's mark leads, a view glyph closes the label, so the button says
   both where it goes and what happens there. Same button, tighter gap than the site's roomy CTA (Akshay 2026-09-26). */
.primary.cta-tool{gap:12px;padding-left:20px;padding-right:20px}
.primary.cta-tool .cta-brand{width:13px;height:20px;flex:0 0 auto;color:currentColor;opacity:.95}
.primary.cta-tool:hover .cta-brand,.primary.cta-tool:focus-visible .cta-brand{opacity:1}
.primary.cta-tool .cta-view{--icon-box:18;width:18px;height:18px;flex:0 0 auto;color:currentColor;filter:none;margin:0}

/* ===== Iconography: one system (Akshay 2026-09-26) =====
   Every icon is drawn in a 24-unit box with round ends. The stroke is declared once and scaled against the
   rendered size, so a 32px icon is not heavier than a 16px one — the old set ran 1.5–1.6 units at sizes from
   13px to 39px, which made the same line read anywhere from 0.8px to 2.5px. Sizes now come from one scale:
   14 · 16 · 18 · 20 · 24 · 28 · 32. */
:root{--icon-weight:1.55}
:root .glyph,:root .ico{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
  stroke-width:calc(var(--icon-weight) * 24 / var(--icon-box,24))}
:root .glyph{--icon-box:24;width:24px;height:24px}
:root .ico{--icon-box:20;width:20px;height:20px}
/* Home and shared */
:root .roller-controls .glyph{--icon-box:18;width:18px;height:18px}
:root .journey-icon .glyph{--icon-box:20;width:20px;height:20px}
:root .skill-symbol .glyph{--icon-box:32;width:32px;height:32px}
:root .proof-icon .glyph{--icon-box:32;width:32px;height:32px}
:root .craft-grid .glyph{--icon-box:32;width:32px;height:32px}
:root .control-icon{--icon-box:20;width:20px;height:20px}
/* Case studies */
:root .story-chapter>.eyebrow .ico,:root .story-chapter .shot figcaption .ico{--icon-box:18;width:18px;height:18px}
:root .brief-head .ico{--icon-box:24;width:24px;height:24px;padding:8px;box-sizing:content-box}
:root .scorecard.petals h4 .ico,:root .petal h4 .ico{--icon-box:18;width:18px;height:18px;padding:9px;box-sizing:content-box}
:root .flow-steps .ico{--icon-box:28;width:28px;height:28px}
:root .conf-chip .ico{--icon-box:14;width:14px;height:14px}
:root .outcome-badges .ico{--icon-box:16;width:16px;height:16px}
:root .iteration-table strong .ico{--icon-box:20;width:20px;height:20px}
:root .compare-decision .ico{--icon-box:20;width:20px;height:20px}
/* The accent glow belongs to feature-sized icons; at label sizes it only smudges the line. */
:root .glyph{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 34%,transparent))}
:root :is(.roller-controls,.journey-icon,.nav-links,.settings,.conf-chip,.outcome-badges,.cta-tool) .glyph,
:root .control-icon{filter:none}
.constraints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 8px}
.constraint{min-width:0;display:grid;gap:10px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--inset)}
:root .constraint .ico{--icon-box:24;width:24px;height:24px;padding:8px;box-sizing:content-box;border-radius:12px;color:var(--case-accent);border:1px solid color-mix(in srgb,var(--case-accent) 35%,transparent);background:color-mix(in srgb,var(--case-accent) 12%,transparent)}
.constraint b{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.005em}
.constraint span{font-size:13.5px;line-height:1.7;color:var(--muted)}
.constraint.lead{grid-column:1/-1;padding:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--case-accent) 11%,transparent),transparent 62%),var(--surface)}
.constraint.lead b{font-size:21px;line-height:1.25}
.constraint.lead span{font-size:15px;line-height:1.75;max-width:78ch}
.case-quote{margin:24px 0;padding:22px 24px;display:grid;gap:12px;border:1px solid var(--line);border-radius:18px;background:var(--raised)}
.story-chapter .case-quote p{margin:0;font-size:19px;line-height:1.55;letter-spacing:-.005em;max-width:62ch;color:var(--text)}
.case-quote cite{font-style:normal;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@container (max-width:1000px){.constraints{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.constraints{grid-template-columns:minmax(0,1fr)}.constraint.lead b{font-size:19px}.story-chapter .case-quote p{font-size:17px}}
.case-dna{--case-accent:#4fc3f0}
[data-scheme=light] .case-dna{--case-accent:#0074ad}
.case-dna .case-cover{background:#081119}
[data-scheme=light] .case-dna .case-cover{background:#eef3f6}
.case-fullname{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.dna-logo-figure{padding:38px 28px;text-align:center}
.dna-logo-figure img{max-width:420px;width:100%;height:auto;margin:0 auto;display:block}
.token-strip{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin:26px 0}
.token-group{min-width:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--inset)}
.token-group>small{display:block;font-size:11px;letter-spacing:.11em;color:var(--muted);margin-bottom:14px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches span{display:grid;gap:7px;justify-items:center;font-size:11px;letter-spacing:.03em;color:var(--muted)}
.swatches i{display:block;width:44px;height:44px;border-radius:12px;background:var(--sw);border:1px solid #ffffff1f}
.type-scale{display:grid;gap:9px}
.type-scale b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.type-scale span{font-size:17px;font-weight:600;line-height:1.2}
.type-scale em{font-style:normal;font-size:14px;line-height:1.55;color:var(--muted)}
.type-scale .tk{font-size:11px;letter-spacing:.08em;color:var(--case-accent)}
.tab-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}
.tab-level{min-width:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--inset)}
.tab-level>small{display:block;font-size:11px;letter-spacing:.11em;color:var(--case-accent);margin-bottom:14px}
.story-chapter .tab-level p{font-size:13px;line-height:1.65;color:var(--muted);margin:14px 0 0;max-width:none}
.tab-level .tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tab-level .tabs span{font-size:12px;line-height:1;padding:9px 12px;border-radius:8px;color:var(--muted);border:1px solid transparent;white-space:nowrap}
.tab-level .tabs span.on{color:var(--text);border-color:var(--line);background:var(--raised)}
.tab-level .tabs.pill span{border-radius:999px;border:1px solid var(--line)}
.tab-level .tabs.pill span.on{color:#fff;background:var(--case-accent);border-color:transparent}
[data-scheme=light] .tab-level .tabs.pill span.on{color:#fff}
.tab-level .tabs.underline span{padding:8px 2px;margin-right:14px;border-radius:0;border:0;border-bottom:2px solid transparent}
.tab-level .tabs.underline span.on{background:none;border-bottom-color:var(--case-accent);color:var(--text)}
.mini-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0}
.story-chapter .mini-figs figure{margin:0}
@media(max-width:820px){.token-strip,.tab-levels,.mini-figs{grid-template-columns:minmax(0,1fr)}}

.surfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
.surface-card{min-width:0;display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--inset)}
.surface-card>small{font-size:11px;letter-spacing:.11em;color:var(--case-accent)}
.surface-card b{font-size:15.5px;font-weight:600;line-height:1.3}
.surface-card span{font-size:13.5px;line-height:1.7;color:var(--muted)}
@media(max-width:820px){.surfaces{grid-template-columns:minmax(0,1fr)}}
.lab-project.lab-enterprise .lab-visual{background:#081119}
[data-scheme=light] .lab-project.lab-enterprise .lab-visual{background:#081119}

.faultlines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}
.faultline{min-width:0;display:grid;align-content:start;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--inset);overflow:hidden}
.story-chapter .faultline h3{margin:0;padding:18px 20px;font-size:17px;line-height:1.3;letter-spacing:-.01em;border-bottom:1px solid var(--line)}
.fl-row{padding:14px 20px 16px;border-bottom:1px solid var(--line)}
.fl-row:last-child{border-bottom:0}
.fl-row small{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
.story-chapter .fl-row p{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:none}
.fl-problem small{color:#f08497}
.fl-impact small{color:#e8b45c}
.fl-opp small{color:var(--case-accent)}
[data-scheme=light] .fl-problem small{color:#b3203c}
[data-scheme=light] .fl-impact small{color:#8a5a06}
@media(max-width:820px){.faultlines{grid-template-columns:minmax(0,1fr)}}
/* A 16-chapter rail does not fit the dial, so this one scrolls instead of squeezing. Type is
   deliberately NOT restated here: the dial must read identically on every case page, and
   reading-room.css already shrinks it for short viewports, for all of them at once. */
.case-dna .chapter-list{overflow-y:auto;scrollbar-width:none}
.case-dna .chapter-list::-webkit-scrollbar{width:0}
.case-dna .story-layout aside a{flex:0 0 auto;max-height:none;min-height:0}

.case-cover figcaption .cover-brand{display:block;margin-bottom:10px}
.cover-brand img{height:26px;width:auto;display:block}
.cover-brand .att-white{display:none}
html[data-scheme=dark] .cover-brand .att-colour{display:none}
html[data-scheme=dark] .cover-brand .att-white{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.chips span{font-size:12.5px;line-height:1;letter-spacing:.01em;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.decision .chips{margin:10px 0 0}
/* auto-fit with a 0 min never wraps: at phone width the tracks squeezed to ~54px and the
   text spilled. A real min lets the row break, and it outranks story.css's container
   query on specificity either way. */
.flow-steps.compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.story-chapter .flow-steps.compact li span{font-size:13px;line-height:1.55}
.sev{display:inline-flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;font-size:13px}
.sev i{position:relative;display:block;width:56px;height:7px;border-radius:4px;background:color-mix(in srgb,var(--line) 85%,transparent);overflow:hidden}
.sev i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) / 4 * 100%);border-radius:4px;background:var(--case-accent)}
.sev.crit i::after{background:#e2637a}
.sev.mod i::after{background:#e8b45c}
.lessons .fl-row{padding:14px 20px 18px}
.lessons .fl-row small{display:none}

.audit-table table{table-layout:fixed;width:100%}
.audit-table th:nth-child(1),.audit-table td:nth-child(1){width:31%}
.audit-table th:nth-child(2),.audit-table td:nth-child(2){width:132px}
.audit-table td{vertical-align:middle}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:11.5px;line-height:1;letter-spacing:.01em;padding:7px 10px;border-radius:8px;background:color-mix(in srgb,var(--case-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--case-accent) 26%,transparent);color:var(--text);white-space:nowrap}
@media(max-width:820px){.audit-table th:nth-child(1),.audit-table td:nth-child(1){width:auto}.tags span{white-space:normal}}

.audit-table th{text-align:left}
.audit-table td:nth-child(2){white-space:nowrap}
/* reference structure: short headline left, quiet narrative right, annotated shots */
.sec-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:44px;align-items:start;margin:0 0 6px}
.story-chapter .sec-head h2{margin:0 0 6px}
.sec-note{display:grid;gap:13px;padding-top:10px}
.story-chapter .sec-note p{margin:0;font-size:14px;line-height:1.78;letter-spacing:.008em;color:var(--muted);max-width:48ch}
.story-chapter .sec-note p.lead-note{color:var(--text);font-size:15px}
.annotated{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;align-items:start;margin:26px 0}
.ann-rail{display:grid;gap:20px;padding-top:6px}
.ann{border-left:2px solid color-mix(in srgb,var(--case-accent) 45%,transparent);padding-left:13px}
.ann b{display:block;font-size:13px;font-weight:600;line-height:1.3;margin-bottom:5px;color:var(--text)}
.story-chapter .ann p{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted);max-width:none}
.story-chapter .annotated figure{margin:0}
.turn{margin:30px 0 4px;padding:30px 0 0;border-top:1px solid var(--line)}
.story-chapter .turn p{font-size:clamp(21px,2.1vw,27px);line-height:1.32;letter-spacing:-.015em;color:var(--text);max-width:22ch}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:16px}.annotated{grid-template-columns:1fr}.ann-rail{gap:14px}}
.org{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:26px 0}
.org-node{min-width:0;display:grid;gap:7px;align-content:start;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--inset)}
.org-node.me{background:linear-gradient(160deg,color-mix(in srgb,var(--case-accent) 13%,transparent),transparent 62%),var(--surface)}
.org-node small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent)}
.org-node b{font-size:14.5px;font-weight:600;line-height:1.3}
.org-node span{font-size:12.5px;line-height:1.6;color:var(--muted)}
.impact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0}
.impact-col{min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--inset)}
.impact-col>small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent);margin-bottom:12px}
.impact-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.impact-col li{font-size:13px;line-height:1.55;color:var(--muted);padding-left:14px;position:relative}
.impact-col li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--case-accent)}
@media(max-width:1000px){.org{grid-template-columns:repeat(2,minmax(0,1fr))}.impact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.org,.impact{grid-template-columns:minmax(0,1fr)}}
.brand-enterprise,.brand-enterprise .roller-visual{background:#081119}
.brand-enterprise .roller-copy{background:#081119;color:#eef6fb}
.brand-enterprise .roller-copy>span{color:#4fc3f0}
.brand-enterprise .roller-copy p{color:#a9bfcd}
/* SAGE card takes the illustration's own ground, so the image has no edge */
.brand-sage,.brand-sage .roller-visual{background:#281f1b}
.brand-sage .roller-copy{background:#281f1b;color:#f4efe9}
.brand-sage .roller-copy>span{color:#e0b487}
.brand-sage .roller-copy p{color:#c3b4a7}
.lab-sage .lab-visual{background:#281f1b}
.case-wwnn{--case-accent:#f0a24b}
[data-scheme=light] .case-wwnn{--case-accent:#b8641a}
.case-wwnn .case-cover{background:#1e1510}
[data-scheme=light] .case-wwnn .case-cover{background:#f3ece4}
.brand-wwnn,.brand-wwnn .roller-visual{background:#1e1510}
.brand-wwnn .roller-copy{background:#1e1510;color:#f6efe7}
.brand-wwnn .roller-copy>span{color:#f0a24b}
.brand-wwnn .roller-copy p{color:#c9b6a4}
.lab-wwnn .lab-visual{background:#1e1510}

/* SDG Mandala case study */
The artifact is the argument, so each stage figure is shown large and captioned with what that layer adds. */
.case-sdg{--case-accent:#f0a24b}
[data-scheme=light] .case-sdg{--case-accent:#a05a11}
.story-chapter .stage{margin:26px 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.story-chapter .stage img{display:block;width:100%;height:auto}
.story-chapter .stage figcaption{padding:13px 18px;font-size:13px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line)}
.story-chapter .stage[data-stage] figcaption:first-letter{color:var(--case-accent)}
.scroll-table{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.scroll-table table{border-collapse:collapse;width:100%;min-width:540px;font-size:14px}
.scroll-table caption{caption-side:bottom;padding:12px 16px;font-size:12px;line-height:1.7;color:var(--muted);text-align:left}
.scroll-table th,.scroll-table td{padding:11px 16px;border-bottom:1px solid var(--line);text-align:left}
.scroll-table thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.scroll-table td+td,.scroll-table th+th{text-align:right;font-variant-numeric:tabular-nums}
.scroll-table tbody tr:last-child td{border-bottom:0}
.story-chapter .stage img{max-height:min(68vh,620px);object-fit:contain;background:#0d1a26}
.goal-list{list-style:none;margin:22px 0;padding:0;display:grid;gap:10px}
.goal-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline;
  padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.goal-list b{font-size:13px;letter-spacing:.06em;color:var(--case-accent);font-variant-numeric:tabular-nums}
.goal-list span{font-size:16px;line-height:1.35}
.goal-list small{grid-column:2;font-size:13.5px;line-height:1.65;color:var(--muted)}
.goal-list li{grid-template-columns:minmax(0,1fr)}
.goal-list small{grid-column:1}
.case-sdg .case-hero h1{font-size:clamp(30px,3.4vw,46px);line-height:1.12;max-width:20ch}
.sdg-brand{display:flex;align-items:center;gap:26px;flex-wrap:wrap;width:fit-content;max-width:100%;margin:24px 0;padding:20px 26px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.story-chapter figure.sdg-brand img{width:104px;height:104px;flex:0 0 auto}
.story-chapter figure.sdg-brand img.sdg-brand-logo{width:auto;height:54px;max-width:100%}
.sdg-brand .logo-white{display:none}
html[data-scheme=dark] .sdg-brand .logo-colour{display:none}
html[data-scheme=dark] .sdg-brand .logo-white{display:block}
.sdg-brand figcaption{flex:1 1 220px;font-size:13px;line-height:1.7;color:var(--muted)}
.goal-list li{grid-template-columns:auto auto minmax(0,1fr)}
.goal-list .goal-icon{width:44px;height:44px;border-radius:8px;grid-row:span 2}
.goal-list small{grid-column:3}
.story-chapter .stage.sdg-goal9{display:flex;align-items:center;gap:20px;padding:20px;border-radius:18px}
.story-chapter figure.stage.sdg-goal9 img{width:96px;height:96px;max-height:none;background:none;flex:0 0 auto}
.story-chapter .stage.sdg-goal9 figcaption{border:0;padding:0;flex:1 1 200px}
.goal-list li{grid-template-columns:auto minmax(0,1fr);gap:2px 12px}
.goal-list .goal-icon{grid-row:span 2;align-self:center}
.goal-list b{grid-column:2;align-self:end}
.goal-list span{grid-column:2;align-self:start}
.goal-list small{grid-column:1/-1;margin-top:4px}
/* Lab: the page reads as one story — statement tiles carry it, the work sits between them. */
.lab-full{grid-column:span 12}
/* A statement tile is type, not chrome: it keeps the tile's material but drops its box. */
.lab-say{grid-column:1/-1;display:grid;align-content:center;gap:14px;padding:clamp(30px,3.6vw,54px) clamp(24px,3vw,46px)}
.lab-say .eyebrow{font-size:11.5px;letter-spacing:.16em}
.lab-main .lab-say h2{margin:0;display:block;font-size:clamp(30px,4vw,54px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance;max-width:19ch}
.lab-main .lab-say p{margin:0;max-width:56ch;font-size:clamp(15px,1.25vw,17px);line-height:1.7;color:var(--muted)}
.lab-main .lab-say em{font-style:italic;color:var(--text)}
/* the attribution line under a statement, quieter than the statement itself */
.lab-main .lab-say .say-credit{max-width:none;font-size:13px;letter-spacing:.06em;color:var(--muted);opacity:.85}
.lab-next{align-content:start}
.lab-main .lab-next h2{font-size:clamp(25px,2.4vw,32px);max-width:16ch}
.lab-sdg .lab-visual{background:#09243d}
/* Designed for Tomorrow has no case page yet, so the tile carries no anchor and lays
   itself out the way .lab-grid>.tile>a lays out the others. */
.lab-dft{display:flex;flex-direction:column;gap:12px}
.lab-dft .lab-visual{background:#090c11}
.lab-sailing .lab-visual{background:#0d2a4d}
/* The award seal sits on the cover rather than above the copy, so the tile leads with the work. */
:root .lab-visual>img.award-seal{position:absolute;right:14px;bottom:14px;width:clamp(58px,6vw,74px);height:auto;object-fit:contain;filter:drop-shadow(0 6px 18px #00000059)}
.lab-award{position:relative;border-color:color-mix(in srgb,#e9b949 28%,var(--line))}
.lab-award::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,#e9b949 18%,transparent),transparent 54%)}
.lab-award .award-logo-inline{width:96px}
/* Behance: the story sits in type on the left, the covers form their own bento on the right. */
.lab-behance{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,44px);align-items:center}
.lab-behance .behance-lede{display:grid;gap:12px;align-content:center}
.lab-main .lab-behance h2{margin:0;display:block;font-size:clamp(26px,2.7vw,36px);line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.lab-main .lab-behance p{margin:0;max-width:44ch;font-size:15px;line-height:1.75}
.lab-behance .behance-more{font-size:14px}
.lab-behance .behance-thumbs{margin:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:14px;align-items:stretch}
/* Every cover fills its cell so the bento reads as one block, not three floating images. */
.lab-behance .behance-thumb{display:grid;grid-template-rows:1fr auto}
.lab-behance .behance-thumb.bt-lead{grid-column:span 2;grid-row:span 2}
:root .lab-behance .behance-thumb img{height:100%;aspect-ratio:auto;object-position:center}
/* Between 1000 and ~1400px the lead cell is a little taller than its cover, so it crops
   sideways. Anchor left: the MetaGlam title sits at that edge, the model at the other. */
:root .lab-behance .behance-thumb.bt-lead img{object-position:left center}
@media(max-width:1000px){.lab-full{grid-column:1/-1}
  .lab-behance{grid-template-columns:minmax(0,1fr);gap:22px}
  .lab-behance .behance-thumbs{grid-auto-rows:auto}
  .lab-behance .behance-thumb.bt-lead{grid-row:span 1}
  :root .lab-behance .behance-thumb img{height:auto;aspect-ratio:404/316}}
/* lab.css sizes the second project by position (:nth-of-type), which breaks once the
   order changes — so spans are set by the project's own class instead. */
.lab-grid>.lab-intro{grid-column:1/-1}
.lab-grid>.lab-project.lab-enterprise{grid-column:span 7}
.lab-grid>.lab-project.lab-sage{grid-column:span 5}
.lab-grid>.lab-project.lab-wwnn{grid-column:span 12}
.lab-grid>.lab-project.lab-oneli8{grid-column:span 7}
.lab-grid>.lab-project.lab-varah{grid-column:span 7}
.lab-grid>.lab-project.lab-dft{grid-column:span 7}
.lab-grid>.lab-project.lab-sdg{grid-column:span 5}
.lab-grid>.lab-project.lab-sailing{grid-column:span 5}
.lab-grid>.lab-card{grid-column:span 4}
.lab-grid>.lab-card.lab-narrow{grid-column:span 5}
.lab-grid>.lab-card.lab-narrow>a{justify-content:center;gap:14px}
.lab-main .lab-card.lab-narrow h2{font-size:clamp(26px,2.6vw,35px);line-height:1.08;letter-spacing:-.026em}
.lab-main .lab-card.lab-narrow p{font-size:15px;line-height:1.75}
.lab-grid>.lab-behance{grid-column:1/-1}
.lab-grid>.lab-say.lab-half{grid-column:span 6}
@media(max-width:1000px){.lab-grid>*{grid-column:1/-1!important}}
@media(max-width:700px){.lab-main .lab-say h2{max-width:none}.lab-behance .behance-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-behance .behance-thumb.bt-lead{grid-column:1/-1}}