*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
:root{
  --paper:#f1f2f2;--surface:#ffffff;--ink:#2d3142;--muted:#4f5d75;
  --hairline:rgba(45,49,66,0.15);--ph1:#dfe1e2;--ph2:#cfd2d3;--phtext:#5c6266;
  --accent:#045df2;
  --lumen:#3a7a5c;--lumen-soft:#e7f0ea;
  --cs2-navy:#26355f;--cs2-teal:#6d4a80;--cs2-cyan:#5fc6d9;--cs2-coral:#ec9b90;--cs2-panel:#eef3fb;
  --cs2-system:#593f62;--cs2-system-soft:#eeecef;
  --cs3-system:#4a5578;--cs3-system-soft:#ececf3;--cs3-amber:#b5651d;
  --sentinel-accent:#6366f1;--sentinel-accent-soft:#e7e8fc;
  --sentinel-bg:#f8f9fc;--sentinel-ink:#1c2333;--sentinel-panel:#eef0f5;--sentinel-panel-soft:#e2e5ee;--sentinel-line:rgba(28,35,51,0.12);--sentinel-dim:#5b6478;
  --sentinel-critical:#dc2626;--sentinel-high:#ea580c;--sentinel-medium:#ca8a04;--sentinel-low:#64748b;--sentinel-safe:#16a34a;
  --serif:'Newsreader',Georgia,serif;--sans:'Bricolage Grotesque',system-ui,sans-serif;
}
::selection{background:var(--accent);color:var(--paper)}
.skip-link:focus{top:16px !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes fadeUp{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){main{animation:none !important}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-track{will-change:transform}
.mq:hover .mq-track{animation-play-state:paused}
body{overflow-x:clip}
.ref-row{padding-top:clamp(48px,7vw,110px)}
.ref-card,.ref-caption{margin:0 auto;width:calc(100% - clamp(48px,22vw,360px))}
.ref-tag{position:absolute;box-sizing:border-box;display:flex;align-items:center;height:48px;font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.6vw,19px);color:#fff;background:#6fa98f;padding:12px 16px;border-radius:20px;white-space:nowrap;pointer-events:none;z-index:1;transition:top .5s cubic-bezier(.34,1.3,.5,1),left .5s cubic-bezier(.34,1.3,.5,1),right .5s cubic-bezier(.34,1.3,.5,1)}
.ref-tag:empty{display:none}
.ref-tag1{top:calc(27.6% - 24px);right:calc(18.5% - 41px);transform:rotate(10deg)}
.ref-tag2{top:calc(26.2% - 24px);left:calc(21.5% - 87px);transform:rotate(8deg)}
.ref-tag3{top:calc(31.2% - 24px);right:calc(15.33% - 58px);transform:rotate(23deg)}
.ref-tag4{top:calc(29% - 24px);left:calc(16.17% - 53px);transform:rotate(-18deg)}
.ref-row:hover .ref-tag1{top:14px;right:-70px}
.ref-row:hover .ref-tag2{top:17px;left:-158px}
.ref-row:hover .ref-tag3{top:82px;right:-126px}
.ref-row:hover .ref-tag4{top:111px;left:-96px}
.ref-window{left:25%;width:50%;top:12%;padding-top:var(--win-pad,33.33%);transition:left .55s cubic-bezier(.34,1.25,.45,1),width .55s cubic-bezier(.34,1.25,.45,1),top .55s cubic-bezier(.34,1.25,.45,1),padding-top .55s cubic-bezier(.34,1.25,.45,1);box-shadow:0 30px 60px -24px rgba(10,30,20,.35)}
.ref-row:hover .ref-window{left:6%;width:88%;top:-12%;padding-top:var(--win-pad-hover,58.66%)}
.ref-glass{height:70%;transition:height .55s cubic-bezier(.34,1.15,.45,1)}
.ref-row:hover .ref-glass{height:20%}
@media (prefers-reduced-motion:reduce){.ref-tag,.ref-window,.ref-glass{transition:none}}
/* .case-sidenav is fixed at left:max(20px, calc((100vw - 1180px)/2 - 172px)) — that
   formula only clears content once the viewport is wide enough for the calc term to
   beat the 20px floor (~1524px); below that it's pinned at 20px and would sit on top
   of section text at its full 152px/label width. Below 1524px it shows as a slim
   dot-only rail instead (labels kept in the a11y tree, just visually hidden) so it's
   still visible on standard laptop widths without overlapping content; below 860px
   (existing mobile reflow tier) it's hidden entirely as before. */
@media (max-width:860px){.case-sidenav{display:none !important}}
/* .pin callouts are positioned with hardcoded desktop pixel offsets against a mockup
   that reflows (not scales) below 900px — they drift off their labeled content once
   the container reflows, so hide them below that width rather than show misaligned pins. */
@media (max-width:900px){.pin{display:none !important}}
@media (min-width:861px) and (max-width:1524px){
  .case-sidenav{width:auto !important}
  .case-sidenav > div:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .case-sidenav button span:last-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr !important;gap:40px !important}.hero-grid .hero-avatar{justify-self:start}.about-grid{grid-template-columns:1fr !important;gap:44px !important}}
@media (max-width:900px){.steps-grid{grid-template-columns:1fr 1fr 1fr !important}.principles-grid{grid-template-columns:1fr !important}}
@media (max-width:680px){.work-grid{grid-template-columns:1fr !important}.principles-grid{grid-template-columns:1fr !important}.steps-grid{grid-template-columns:1fr 1fr !important}}
@media (max-width:1000px){.cs4{grid-template-columns:1fr 1fr !important}}
@media (max-width:760px){.cs2,.cs3,.cs-shots,.cs-diagram{grid-template-columns:1fr !important}.cs4{grid-template-columns:1fr 1fr !important}.cs-diagram{aspect-ratio:auto !important}.cs-shots>*{grid-column:auto !important}.nav-jump{display:none !important}.site-head{gap:14px !important}}
.impact-row{display:grid;grid-template-columns:150px 1fr 32px 1fr;align-items:center;gap:18px}
@media (max-width:900px){.impact-row{grid-template-columns:1fr;gap:10px}.impact-row .impact-arrow{transform:rotate(90deg);justify-self:start;margin-left:6px}}
@media (max-width:560px){.cs4{grid-template-columns:1fr !important}}
/* Fixed-column/1fr two-column rows (persona spotlight, component "why it matters" rows)
   don't have a class hook — body{overflow-x:clip} means their text silently truncates
   instead of scrolling at narrow widths, so target them directly by their inline style. */
@media (max-width:600px){
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 260px 1fr"]{
    grid-template-columns:1fr !important;
  }
}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none !important}.riso-bob{animation:none !important}}
@keyframes riso-bob{0%,100%{transform:translateY(0) rotate(-0.5deg)}50%{transform:translateY(-7px) rotate(0.5deg)}}
.riso-bob{animation:riso-bob 4.4s ease-in-out infinite;will-change:transform}

/* Homepage section ids need scroll-margin-top now that they can be jumped to from
   another page's header nav (e.g. sentinel.html -> index.html#work), not just scrolled
   to in-page — matches the 96px already used by case-study section ids. */
#work, #principles, #process, #about, #contact{scroll-margin-top:96px}