/* Vsual Agency. Brand tokens: do not change without updating the brand system. */
@font-face{font-family:"Albert Sans";font-weight:300 700;font-style:normal;font-display:swap;src:url(../fonts/AlbertSans-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-weight:400 600;font-style:normal;font-display:swap;src:url(../fonts/SourceSans3-400-600.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400 500;font-style:normal;font-display:swap;src:url(../fonts/GeistMono-400-500.woff2) format("woff2")}

:root{
  /* Logo colours stay #121212, white and #de4029. Paper and stone are the warm neutrals. */
  --ink:#121212; --paper:#f4f2ee; --stone:#e6e3dd; --accent:#de4029;
  --bg:var(--ink); --fg:var(--paper);
  --mute:#a3a3a3; --mute-soft:#5c5854;
  --rule:rgba(244,242,238,.2); --rule-soft:rgba(18,18,18,.14);
  --head:"Albert Sans",system-ui,sans-serif;
  --body:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4.4vw,72px);
  --gap:clamp(20px,3vw,48px);
  --space:clamp(96px,14vw,224px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden}
body{margin:0;font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ink)}
.skip{position:absolute;left:var(--pad);top:-4rem;z-index:10;background:var(--paper);color:var(--ink);padding:.6rem 1rem;font:500 .8rem var(--mono)}
.skip:focus{top:1rem}

/* Shared type */
.mono{font:400 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.count{font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;color:var(--mute)}
h1,h2,h3{font-family:var(--head);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.75rem,6vw,5.375rem);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.05}
h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.2}
.link{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .25s,text-decoration-thickness .25s}
.link:hover,.link:focus-visible{text-decoration-color:currentColor;text-decoration-thickness:2px}
.wrap{padding-inline:var(--pad)}

/* Header. One row at every width: the wordmark and the nav share a centre line. */
.top{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;padding:clamp(14px,2vw,28px) var(--pad)}
.wordmark{display:flex;align-items:center;flex:none;width:4.85rem;line-height:0}
.wordmark img{width:100%;height:auto}
.top nav{margin-left:auto;min-width:0}
.top nav li{flex:none}
.top nav ul{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:.1rem .4rem}
.top nav a:not(.cta){font:400 .875rem/1.2 var(--body);letter-spacing:0;text-transform:none;display:inline-block;padding:.5rem 0;white-space:nowrap}
/* Red with either ink or paper text is under 4.5:1, so the resting button is ink on paper.
   Hover and focus invert to ink with a paper edge. The arrow stays red. */
.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;box-sizing:border-box;min-height:44px;padding:0 1.05rem;border:1px solid transparent;background:var(--paper);color:var(--ink);font:500 .875rem/1 var(--body);text-decoration:none;white-space:nowrap}
.cta-arrow{display:inline-block;color:var(--accent);transition:translate .2s ease}
.cta:hover,.cta:focus-visible,.cta:active{background:var(--ink);color:var(--paper);border-color:var(--paper)}
.cta:hover .cta-arrow,.cta:focus-visible .cta-arrow{translate:4px 0}
@media (max-width:539px){
  .cta{min-height:39px;padding:0 .7rem;gap:.3rem;font-size:.8125rem}
  .cta::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
@media (max-width:539px){
  .nav-approach{display:none}
}
@media (max-width:429px){
  .nav-services{display:none}
}
@media (max-width:374px){
  .wordmark{width:4.35rem}
  .top{gap:.45rem .7rem}
}
@media (min-width:480px){
  .wordmark{width:5.4rem}
  .top nav ul{gap:.2rem .9rem}
  .top nav a:not(.cta){font-size:.9375rem;padding:.6rem 0}
}
@media (min-width:768px){
  .wordmark{width:6rem}
  .top{gap:.75rem 1.25rem}
  .top nav ul{gap:.2rem 1.25rem}
  .top nav a:not(.cta){padding:.7rem 0}
}
@media (min-width:860px){.wordmark{width:7.5rem}}

/* Hero. Bottom space uses the same clamp as the other section breaks. */
.hero{padding:clamp(16px,2.4vw,40px) var(--pad) clamp(88px,8vw,120px)}
.hero h1{margin-top:clamp(20px,2.4vw,36px)}
.hero h1 span{display:block}
.hero-grid{display:grid;gap:var(--gap)}
.hero-copy{margin-top:clamp(24px,4vw,56px)}
.hero-copy p{max-width:36ch;font-size:clamp(1.125rem,1.4vw,1.375rem);line-height:1.5}
.hero-copy .mono{margin-top:2rem;max-width:none;font-size:.75rem;line-height:1.4}
.hero-reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.hero-reels .reel:last-child{margin-top:clamp(14px,2.2vw,36px)}
.hero-media{position:relative;overflow:hidden;aspect-ratio:9/16;background:var(--stone)}
.hero-shift{position:absolute;inset:0 0 auto 0;height:100%}
.hero-shift img,.hero-shift video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shift video{opacity:0;transition:opacity .6s}
.hero-shift video.is-playing{opacity:1}
.hero figcaption{margin-top:.9rem}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.14fr 1fr;align-items:stretch}
  .hero-text{display:flex;flex-direction:column}
  .hero-copy{margin-top:auto;padding-top:clamp(24px,4vw,56px)}
}

/* Services strip */

/* Work */
.work{padding:var(--space) var(--pad) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.tiles{display:grid;gap:clamp(56px,7vw,112px) var(--gap);margin-top:clamp(40px,6vw,96px)}
.tile a{display:block;text-decoration:none}
.tile figure{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--stone)}
.tile figure.screen img{width:122%;max-width:none;margin-left:-11%}
.tile figure.screen video{transform:scale(1.16)}
.plate{display:flex;flex-direction:column;justify-content:flex-end;gap:.55rem;padding:clamp(18px,2vw,32px);background:var(--stone);color:var(--ink)}
.plate-num{font:700 clamp(2.4rem,4vw,4.25rem)/.95 var(--head);letter-spacing:-.03em}
.plate-label{font:500 1rem/1.3 var(--head)}
.plate-note{color:var(--mute-soft);max-width:24ch}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.tile video.is-playing{opacity:1}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:scale .6s cubic-bezier(.22,.61,.36,1)}
.tile a:hover img,.tile a:focus-visible img{scale:1.035}
.tile-meta{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.25rem;align-items:baseline;margin-top:1.1rem}
.tile-meta .count{grid-row:1/4;padding-top:.5rem}
.tagline{color:var(--fg);font-size:1.0625rem;line-height:1.35;margin-block:.15rem .35rem}
.case-tagline{margin-top:.9rem;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.35}
.tile h3{line-height:1.2}
.tile h3 span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-color .25s,text-decoration-thickness .25s}
.tile a:hover h3 span,.tile a:focus-visible h3 span{text-decoration-color:currentColor;text-decoration-thickness:2px}
.work-bar{display:none}
/* Phones and small tablets: swipeable carousel */
@media (max-width:859px){
  .tiles{display:flex;gap:clamp(14px,3vw,24px);margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tiles::-webkit-scrollbar{display:none}
  .tile{flex:0 0 min(78%,420px);scroll-snap-align:start}
}
/* Desktop without motion: staggered grid */
@media (min-width:860px){
  .tiles{grid-template-columns:5fr 6fr}
  .tile:nth-child(even){margin-top:clamp(80px,12vw,200px)}
  .tile:nth-child(4n+3){padding-right:12%}
  .tile:nth-child(4n){padding-left:14%}
}
/* Desktop with motion: the section pins and the projects travel sideways (class set by main.js) */
html.work-pin .work{--th:calc(100vh - 21.5rem);margin-top:var(--space);padding-top:clamp(20px,2.4vw,36px);height:100vh;overflow:hidden;display:flex;flex-direction:column}
html.work-pin .tiles{display:flex;flex-wrap:nowrap;gap:var(--gap);margin-top:clamp(20px,2.4vw,36px);will-change:transform}
html.work-pin .tile,html.work-pin .tile:nth-child(n){flex:none;width:max(240px,calc(var(--th) * .8));margin-top:0;padding:0}
html.work-pin .tile picture img{width:112%;max-width:none;margin-left:-6%}
html.work-pin .tile figure.screen picture img{width:122%;margin-left:-11%}
html.work-pin .tile h3{font-size:clamp(1.25rem,1.6vw,1.5rem)}
html.work-pin .work-bar{display:block;margin-top:auto;margin-bottom:clamp(18px,2.2vw,30px);height:1px;background:var(--rule)}
html.work-pin .work-bar span{display:block;height:2px;margin-top:-1px;background:var(--paper);transform-origin:0 50%;transform:scaleX(0)}

/* Clients. Only logos that already exist as files. */
.clients{padding:clamp(56px,8vw,112px) var(--pad) 0;background:var(--paper);color:var(--ink)}
.clients h2,.clients .mono{font:400 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute-soft)}
/* Three then three, centred, below desktop. No rules between the marks.
   Heights equalise area (taller when the mark is squarer) and then shift for ink. */
.logo-row{
  --logo-caring-care:3.15rem;
  --logo-berkeley:2.05rem;
  --logo-drhair:1.9rem;
  --logo-eprescription:1.05rem;
  --logo-street-slice:3.75rem;
  --logo-riva:1.7rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem 1rem;align-items:center;justify-items:center;margin:1.5rem 0 0;padding:0;list-style:none
}
.logo-row li{display:flex;align-items:center;justify-content:center;min-width:0;border:0}
.logo-row [data-logo="caring-care"]{--logo-h:var(--logo-caring-care)}
.logo-row [data-logo="berkeley"]{--logo-h:var(--logo-berkeley)}
.logo-row [data-logo="drhair"]{--logo-h:var(--logo-drhair)}
.logo-row [data-logo="eprescription"]{--logo-h:var(--logo-eprescription)}
.logo-row [data-logo="street-slice"]{--logo-h:var(--logo-street-slice)}
.logo-row [data-logo="riva"]{--logo-h:var(--logo-riva)}
.logo-row picture{display:contents}
.logo-row a{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%;text-decoration:none}
.logo-row img{display:block;width:auto;height:var(--logo-h,2rem);max-width:100%;object-fit:contain;object-position:center;border:0;transition:opacity .2s}
.logo-row a:hover img,.logo-row a:focus-visible img{opacity:.62}
/* Wider phones and tablets still wrap 3 + 3, so the marks can grow together. */
@media (min-width:560px){
  .logo-row{
    --logo-caring-care:4.05rem;
    --logo-berkeley:2.6rem;
    --logo-drhair:2.4rem;
    --logo-eprescription:1.32rem;
    --logo-street-slice:4.75rem;
    --logo-riva:2.15rem
  }
}
@media (min-width:900px){
  .logo-row{
    --logo-caring-care:3.55rem;
    --logo-berkeley:2.2rem;
    --logo-drhair:2.05rem;
    --logo-eprescription:1.28rem;
    --logo-street-slice:4.35rem;
    --logo-riva:1.85rem;
    grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,2vw,40px)
  }
  .logo-row li{min-height:4.8rem}
}
/* Positioning */
.approach{padding:var(--space) var(--pad);display:grid;gap:var(--gap);background:var(--paper);color:var(--ink)}
.approach h2{margin-top:1.25rem;max-width:11ch}
.approach-body p{max-width:46ch;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5}
.approach-body p+p{margin-top:1.2em}
.principles{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule-soft)}
.principles li{display:grid;gap:.25rem 2rem;padding-block:1.25rem;border-bottom:1px solid var(--rule-soft)}
.principles strong{font:500 1.15rem/1.3 var(--head);letter-spacing:-.02em}
.principles span{color:var(--mute-soft)}
.approach .mono,.teams-link .mono{color:var(--mute-soft)}
@media (min-width:860px){
  .approach{grid-template-columns:repeat(12,1fr)}
  .approach-head{grid-column:1/7}
  .approach-body{grid-column:7/13;padding-top:2.6rem}
  .principles li{grid-template-columns:14rem 1fr}
}

/* Dedicated teams */
.teams{padding:var(--space) var(--pad) 0}
.teams-head{display:grid;gap:var(--gap)}
.page-teams .teams{padding-top:clamp(32px,6vw,96px)}
.teams-title{font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.05;letter-spacing:-.03em;margin-top:1.25rem;max-width:16ch}
.teams-link{margin:0;padding:var(--space) var(--pad);display:grid;gap:var(--gap);background:var(--stone);color:var(--ink)}
.teams-link h2{margin-top:1.25rem;max-width:16ch}
.teams-link-body p{max-width:46ch;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5}
.teams-link-cta{display:inline-block;margin-top:clamp(24px,3vw,40px);font:500 clamp(1.25rem,1.6vw,1.5rem)/1.2 var(--head);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:.2em}
.teams-link-cta:hover,.teams-link-cta:focus-visible{text-decoration-thickness:2px}
.teams-link-cta span{display:inline-block;transition:translate .25s}
.teams-link-cta:hover span,.teams-link-cta:focus-visible span{translate:.25em 0}
@media (min-width:860px){
  .teams-link{grid-template-columns:repeat(12,1fr)}
  .teams-link>div:first-child{grid-column:1/7}
  .teams-link-body{grid-column:7/13;padding-top:2.6rem}
}
.teams-lead p{max-width:46ch;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5}
.teams-lead p+p{margin-top:1.2em}
.teams-block{margin-top:clamp(56px,8vw,128px)}
.teams-block>h2,.teams-block>h3{padding-bottom:1.25rem;border-bottom:1px solid var(--rule)}
.towers,.steps{margin:0;padding:0;list-style:none}
.towers li,.steps li{display:grid;grid-template-columns:3rem 1fr;gap:.35rem 0;padding-block:1.4rem;border-bottom:1px solid var(--rule);align-items:baseline;align-content:start}
.towers strong,.steps strong,.towers h3,.steps h3,.faq h3{font:500 clamp(1.25rem,1.6vw,1.5rem)/1.2 var(--head);letter-spacing:-.02em}
.towers li>span:last-child,.steps li>span:last-child{grid-column:2;color:var(--mute);max-width:60ch}
.teams-foot{margin-top:clamp(40px,5vw,72px);display:grid;gap:1.5rem}
.teams-cta{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5;max-width:46ch}
.teams-cta a{text-decoration-color:currentColor;text-decoration-thickness:1px}
@media (min-width:860px){
  .teams-head{grid-template-columns:repeat(12,1fr)}
  .teams-head>div:first-child{grid-column:1/7}
  .teams-lead{grid-column:7/13;padding-top:2.6rem}
    .towers{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .steps li{grid-template-columns:3rem 14rem 1fr}
  .steps li>span:last-child{grid-column:3}
}

/* Service pages (built by tools/build-services.py) */
.crumbs{margin-bottom:clamp(24px,3vw,40px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:.7rem}
.crumbs a{display:inline-block;padding:.4rem 0}
.crumbs [aria-current]{color:var(--fg)}
.proof,.faq{margin:0;padding:0;list-style:none}
.proof a{display:grid;gap:.4rem 2rem;padding-block:1.4rem;border-bottom:1px solid var(--rule);text-decoration:none}
.proof strong{font:500 clamp(1.25rem,1.6vw,1.5rem)/1.2 var(--head);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-color .25s,text-decoration-thickness .25s}
.proof a:hover strong,.proof a:focus-visible strong{text-decoration-color:currentColor;text-decoration-thickness:2px}
.proof a>span:not(.mono){color:var(--mute);max-width:60ch}
.faq li{display:grid;gap:.6rem 2rem;padding-block:1.5rem;border-bottom:1px solid var(--rule)}
.faq p{color:var(--mute);max-width:62ch}
.svc-nav{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;align-items:baseline;padding:1.25rem var(--pad);border-top:1px solid var(--rule)}
.svc-nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1.75rem;margin:0;padding:0;list-style:none}
.svc-nav a{display:inline-block;padding:.5rem 0}
.svc-nav ul a{color:var(--fg)}
.svc-nav [aria-current]{text-decoration-color:currentColor}
@media (min-width:860px){
  .proof a{grid-template-columns:18rem 1fr auto;align-items:baseline}
  .faq li{grid-template-columns:5fr 7fr}
}

/* Contact */
.contact{padding:var(--space) var(--pad)}
.contact h2{margin-top:1.25rem}
.email{display:inline-block;margin-top:clamp(28px,4vw,56px);color:var(--accent);font:700 clamp(1.75rem,3.4vw,3.25rem)/1.05 var(--head);letter-spacing:-.03em;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:.14em;overflow-wrap:anywhere}
.email:hover,.email:focus-visible{text-decoration-thickness:2px}
.contact .dm{margin-top:1.75rem;color:var(--mute)}
.contact .dm a{color:var(--fg)}

/* Footer */
.foot{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:flex-end;justify-content:space-between;padding:1.75rem var(--pad) 2.25rem;border-top:1px solid var(--rule)}
.foot-meta{display:grid;gap:.35rem}
.foot .place{text-transform:none;letter-spacing:.04em}
.foot ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot a{display:inline-block;padding:.6rem 0}
.foot .wordmark{width:96px}

/* Case study overlay */
dialog.case{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--fg);overflow-y:auto;overscroll-behavior:contain}
dialog.case::backdrop{background:var(--bg)}
.case-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad);background:var(--bg);border-bottom:1px solid var(--rule)}
.case-bar p{display:flex;gap:1.25rem;align-items:baseline}
.case-close{font:400 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 0}
.case-close::after{content:"";width:14px;height:14px;background:linear-gradient(var(--paper),var(--paper)) center/100% 1px no-repeat,linear-gradient(var(--paper),var(--paper)) center/1px 100% no-repeat;rotate:45deg}
.case-main{display:grid;gap:clamp(40px,5vw,80px) var(--gap);padding:clamp(36px,5vw,80px) var(--pad)}
.case-text h2{font-size:clamp(2rem,3.6vw,3.5rem)}
.case-facts{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;margin-top:1.75rem;align-items:baseline}
.case-facts dd{font-size:1rem}
.case-steps{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--rule)}
.case-steps section{padding-block:1.4rem;border-bottom:1px solid var(--rule);display:grid;gap:.5rem 1.5rem}
.case-steps h3{font:400 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:.35rem}
.case-steps p{max-width:52ch}
.case-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);align-content:start}
.case-media figure{background:var(--stone);overflow:hidden}
.case-media img{filter:saturate(.9) contrast(1.02)}
.case-media .screen{padding:clamp(12px,1.6vw,22px);background:var(--stone)}
.case-media .screen img{object-fit:contain;background:var(--paper)}
.case-media .wide{grid-column:1/-1;aspect-ratio:16/10}
.case-media .tall{aspect-ratio:4/5}
.case-media img{width:100%;height:100%;object-fit:cover}
.case-nav{display:flex;justify-content:space-between;gap:1.5rem;padding:1.5rem var(--pad) 2.5rem;border-top:1px solid var(--rule)}
.case-nav a{text-decoration:none;display:grid;gap:.3rem;padding:.4rem 0}
.case-nav a:last-child{text-align:right}
.case-nav strong{font:500 clamp(1.15rem,1.5vw,1.35rem)/1.2 var(--head);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .25s,text-decoration-thickness .25s}
.case-nav a:hover strong,.case-nav a:focus-visible strong{text-decoration-color:currentColor;text-decoration-thickness:2px}
@media (min-width:900px){
  .case-main{grid-template-columns:5fr 7fr}
  .case-text{position:sticky;top:6.5rem;align-self:start}
  .case-steps section{grid-template-columns:6.5rem 1fr}
}
/* Without JavaScript the overlays open through the URL fragment instead. */
html.no-js dialog.case:target{display:block;position:fixed;inset:0;z-index:50}

/* Below-fold reveals wait for motion. The hero is visible without it. */
html.anim [data-reveal]{opacity:0;visibility:hidden}
html.anim .hero-shift{height:114%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .tile a:hover img,.tile a:focus-visible img{scale:1}
  .cta:hover .cta-arrow,.cta:focus-visible .cta-arrow{translate:none}
  video[data-reel]{display:none}
}

/* Long-form case study / article pages (work/*) */
.article{padding:clamp(32px,6vw,96px) var(--pad) 0}
.article-head{max-width:62rem}
.article-head h1{font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.05;margin-top:1.25rem;max-width:18ch}
.article-standfirst{margin-top:clamp(20px,2.4vw,32px);max-width:46ch;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5}
.article-facts{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin-top:clamp(28px,3.5vw,48px);padding-top:1.25rem;border-top:1px solid var(--rule)}
.article-facts dd{margin-top:.35rem}
.article-stats{list-style:none;margin:clamp(48px,6vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--rule)}
.article-stats li{padding:clamp(20px,3vw,40px) clamp(8px,1.5vw,24px) clamp(20px,3vw,40px) 0;display:grid;gap:.6rem}
.article-stats li+li{padding-left:clamp(12px,2vw,32px);border-left:1px solid var(--rule)}
.article-stats strong{font:700 clamp(2rem,4vw,3.5rem)/1 var(--head);letter-spacing:-.03em}
.article-body{max-width:44rem;margin:clamp(48px,6vw,96px) auto 0;font-size:clamp(1.1rem,1.25vw,1.22rem);line-height:1.65}
.article-body>*+*{margin-top:1.1em}
.article-body h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.02em;margin-top:clamp(2.2em,4vw,2.8em)}
.article-body h2+*{margin-top:.9em}
.article-body ul,.article-body ol{padding-left:1.3em}
.article-body li+li{margin-top:.45em}
.article-body ul li::marker{color:var(--mute)}
.article-body strong{font-weight:600}
.article-body em{font-style:italic}
.article-tiers{border-top:1px solid var(--rule)}
.article-tiers div{display:grid;gap:.3rem 1.5rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
.article-tiers dt{font:500 1.15rem/1.3 var(--head);letter-spacing:-.02em}
.article-tiers dt .mono{margin-left:.5rem;color:var(--mute)}
.article-tiers dd{color:var(--mute)}
.article-steps{list-style:none;padding:0!important;counter-reset:step}
.article-steps li{counter-increment:step;position:relative;padding:1rem 0 1rem 3.2rem;border-top:1px solid var(--rule)}
.article-steps li:last-child{border-bottom:1px solid var(--rule)}
.article-steps li+li{margin-top:0}
.article-steps li::before{content:"(" counter(step,decimal-leading-zero) ")";position:absolute;left:0;top:1.3rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;color:var(--mute)}
.article-pull{margin:clamp(1.8em,3vw,2.4em) 0;padding:0 0 0 clamp(16px,2vw,28px);border-left:1px solid var(--paper)}
.article-pull p{font:500 clamp(1.35rem,2vw,1.75rem)/1.3 var(--head);letter-spacing:-.02em}
.article-figure{margin-block:clamp(2em,4vw,3em)!important;max-width:420px}
.article-figure picture{display:block;background:var(--stone);aspect-ratio:4/5;overflow:hidden;padding:clamp(12px,1.6vw,22px)}
.article-figure img{display:block;width:100%;height:100%;object-fit:cover}
.article-figure figcaption{margin-top:.8rem}
.article-lessons{list-style:none;padding:0!important;border-top:1px solid var(--rule)}
.article-lessons li{padding-block:1.2rem;border-bottom:1px solid var(--rule)}
.article-lessons li+li{margin-top:0}
.article-lessons .count{display:block;margin-bottom:.5rem}
.article-lessons strong{display:block;font:500 1.2rem/1.3 var(--head);letter-spacing:-.02em;margin-bottom:.35rem}
.article-close{font:500 clamp(1.35rem,2vw,1.75rem)/1.3 var(--head);letter-spacing:-.02em;margin-top:clamp(2em,4vw,2.6em)!important}
.article-sign{margin-top:2rem!important}
@media (min-width:860px){
  .article-tiers div{grid-template-columns:11rem 1fr}
  .article-figure{margin-left:-6rem!important}
}
@media (max-width:559px){
  .article-stats{grid-template-columns:1fr}
  .article-stats li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
}
.case-more{margin-top:1.75rem;font:500 clamp(1.05rem,1.4vw,1.2rem)/1.3 var(--head);letter-spacing:-.02em}
.case-more a{text-decoration-color:currentColor;text-decoration-thickness:1px}

/* Services: a typographic list. Images stay in the work. */
.svc{padding:var(--space) var(--pad);background:var(--paper);color:var(--ink)}
.svc .sec-head{border-bottom-color:var(--rule-soft)}
.svc .mono,.svc-list p{color:var(--mute-soft)}
.svc-list{list-style:none;margin:clamp(8px,2vw,20px) 0 0;padding:0}
.svc-list a{display:grid;grid-template-columns:3.4rem 1fr;gap:.15rem 1rem;align-items:baseline;padding-block:1.15rem;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.svc-list .count{grid-row:1/span 2;padding-top:.35rem;color:var(--mute-soft)}
.svc-list h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color .25s,text-decoration-thickness .25s}
.svc-list a:hover h3,.svc-list a:focus-visible h3{text-decoration-color:currentColor;text-decoration-thickness:2px}
.svc-list p{margin-top:.2rem;max-width:36ch;font-size:1.0625rem;line-height:1.45}
.svc-more{margin-top:clamp(28px,4vw,48px);font:500 clamp(1.25rem,1.6vw,1.5rem)/1.3 var(--head);letter-spacing:-.02em}
.svc-more a{text-decoration-thickness:1px;text-decoration-color:currentColor}
@media (min-width:860px){
  .svc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,88px)}
}

/* Case studies shown in full on the service pages, rather than linking back
   to the dialog on the home page. Same parts as the dialog, laid out inline. */
.case-inline{border-bottom:1px solid var(--rule)}
.case-inline .case-main{padding-inline:0}
.case-name{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.05}
.case-steps h4{font:400 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:.35rem}