/* Vsual Agency. Brand tokens: do not change without updating the brand system. */
@font-face{font-family:"Albert Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/AlbertSans-700.woff2) format("woff2")}
@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{
  --bg:#111111; --ink:#fcfcfc; --red:#de4029; --yellow:#ffe700;
  --mute:#a3a3a3; --rule:rgba(252,252,252,.18);
  --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(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden}
body{margin:0;font:400 1.125rem/1.55 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(--ink);outline-offset:4px}
::selection{background:var(--red);color:var(--ink)}
.skip{position:absolute;left:var(--pad);top:-4rem;z-index:10;background:var(--ink);color:var(--bg);padding:.6rem 1rem;font:500 .8rem var(--mono)}
.skip:focus{top:1rem}

/* Lenis (only active once the script has loaded) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* 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(--red)}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(2.5rem,6.4vw,6rem);line-height:.98}
.link{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.22em;transition:text-decoration-color .25s}
.link:hover,.link:focus-visible{text-decoration-color:var(--yellow)}
.wrap{padding-inline:var(--pad)}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,1.6vw,24px) var(--pad)}
.mark{display:block;width:44px}
.mark svg{width:100%;height:auto}
.top nav ul{display:flex;gap:clamp(18px,3vw,40px)}
.top nav a{font:400 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:inline-block;padding:.9rem 0}
@media (max-width:420px){.top nav ul{gap:12px}.top nav a{font-size:.6875rem;letter-spacing:.05em}}

/* Hero */
.hero{padding:clamp(16px,2.4vw,40px) var(--pad) 0}
.hero h1{font-size:clamp(2.7rem,14.6vw,15.5rem);line-height:.98;letter-spacing:-.05em;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:30ch;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.35}
.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:#1a1a1a}
.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 h1{font-size:clamp(3.7rem,8vw,9.8rem)}
  .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:#1a1a1a}
.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;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(--ink);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{font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.05}
.tile h3 span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color .25s}
.tile a:hover h3 span,.tile a:focus-visible h3 span{text-decoration-color:var(--yellow)}
.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 h3{font-size:clamp(1.4rem,2vw,1.9rem)}
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:3px;margin-top:-1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}

/* Testimonials */
.words{padding:var(--space) var(--pad) 0}
.quotes{display:grid;gap:clamp(40px,5vw,72px) var(--gap);margin-top:clamp(40px,5vw,72px)}
.quote blockquote{margin:0;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.45}
.quote blockquote p::before{content:"“"}
.quote blockquote p::after{content:"”"}
.quote figcaption{display:grid;gap:.3rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--rule)}
.quote strong{font:700 1.05rem/1.2 var(--head)}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}

/* Positioning */
.approach{padding:var(--space) var(--pad) 0;display:grid;gap:var(--gap)}
.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)}
.principles li{display:grid;gap:.25rem 2rem;padding-block:1.25rem;border-bottom:1px solid var(--rule)}
.principles strong{font:700 1.2rem/1.2 var(--head);letter-spacing:-.01em}
.principles span{color:var(--mute)}
@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.5rem,6.4vw,6rem);line-height:.98;margin-top:1.25rem;max-width:13ch}
.teams-link{margin:var(--space) var(--pad) 0;padding-block:clamp(40px,6vw,88px);border-block:1px solid var(--rule);display:grid;gap:var(--gap)}
.teams-link h2{margin-top:1.25rem;max-width:14ch;font-size:clamp(2.1rem,4.6vw,4.25rem)}
.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:700 clamp(1.3rem,2.2vw,2rem)/1.2 var(--head);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.08em;text-underline-offset:.2em}
.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:700 clamp(1.2rem,1.7vw,1.5rem)/1.2 var(--head);letter-spacing:-.01em}
.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:var(--yellow)}
@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(--ink)}
.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:700 clamp(1.3rem,2vw,1.8rem)/1.15 var(--head);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color .25s}
.proof a:hover strong,.proof a:focus-visible strong{text-decoration-color:var(--yellow)}
.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(--ink)}
.svc-nav [aria-current]{text-decoration-color:var(--yellow)}
@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);font:700 clamp(1.6rem,6.2vw,6rem)/1.05 var(--head);letter-spacing:-.04em;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.06em;text-underline-offset:.14em;overflow-wrap:anywhere}
.contact .dm{margin-top:1.75rem;color:var(--mute)}
.contact .dm a{color:var(--ink)}

/* Footer */
.foot{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:space-between;padding:1.5rem var(--pad) 2rem;border-top:1px solid var(--rule)}
.foot ul{display:flex;gap:2rem}
.foot a{display:inline-block;padding:.6rem 0}
.foot .mark{width:30px}

/* 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(--ink);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(--ink),var(--ink)) center/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 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(2.4rem,5vw,4.75rem)}
.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:#1a1a1a;overflow:hidden}
.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:700 clamp(1.1rem,2vw,1.6rem)/1.1 var(--head);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.2em;transition:text-decoration-color .25s}
.case-nav a:hover strong,.case-nav a:focus-visible strong{text-decoration-color:var(--yellow)}
@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}

/* Motion. Elements are hidden only when the animation library is expected to load. */
html.anim [data-reveal]{opacity:0;visibility:hidden}
html.anim .hero h1,html.anim [data-hero]{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}
}

/* 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.4rem,5.6vw,5.25rem);line-height:1;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(1.9rem,5.4vw,5rem)/1 var(--head);letter-spacing:-.04em}
.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.8rem,3.4vw,2.75rem);line-height:1.08;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(--red)}
.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:700 1.2rem/1.3 var(--head);letter-spacing:-.02em}
.article-tiers dt .mono{margin-left:.5rem;color:var(--red)}
.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(--red)}
.article-pull{margin:clamp(1.8em,3vw,2.4em) 0;padding:0 0 0 clamp(16px,2vw,28px);border-left:3px solid var(--yellow)}
.article-pull p{font:700 clamp(1.4rem,2.4vw,2rem)/1.2 var(--head);letter-spacing:-.025em}
.article-figure{margin-block:clamp(2em,4vw,3em)!important;max-width:420px}
.article-figure picture{display:block;background:#1a1a1a;aspect-ratio:4/5;overflow:hidden}
.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:700 1.25rem/1.25 var(--head);letter-spacing:-.02em;margin-bottom:.35rem}
.article-close{font:700 clamp(1.4rem,2.4vw,2rem)/1.25 var(--head);letter-spacing:-.025em;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:700 clamp(1.1rem,1.6vw,1.35rem)/1.3 var(--head);letter-spacing:-.015em}
.case-more a{text-decoration-color:var(--yellow)}

/* Services grid (home). The services are the offer, so they get the same
   weight as the work: big image tiles straight after the hero. */
.svc{padding:var(--space) var(--pad) 0}
.svc-grid{list-style:none;margin:clamp(32px,4vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,4vw,56px) var(--gap)}
.svc-grid a{display:block;height:100%;text-decoration:none}
.svc-grid figure{aspect-ratio:4/5;overflow:hidden;background:#1a1a1a}
.svc-grid img{width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.22,.61,.36,1)}
.svc-grid a:hover img,.svc-grid a:focus-visible img{scale:1.035}
.svc-grid .count{display:block;margin-top:1.1rem}
.svc-grid h3{margin-top:.35rem;font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.05}
.svc-grid h3 span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.18em;transition:text-decoration-color .25s}
.svc-grid a:hover h3 span,.svc-grid a:focus-visible h3 span{text-decoration-color:var(--yellow)}
.svc-grid p{margin-top:.5rem;color:var(--mute);max-width:30ch;font-size:clamp(.95rem,1.1vw,1.1rem);line-height:1.4}
.svc-cta a{display:flex;flex-direction:column;justify-content:flex-end;gap:1rem;aspect-ratio:4/5;height:auto;padding:clamp(18px,2.2vw,32px);background:var(--red);color:var(--ink)}
.svc-cta p.mono{color:var(--ink);margin:0}
.svc-cta h3{margin:0;font-size:clamp(1.35rem,2.3vw,2.1rem)}
.svc-cta h3 span{display:inline-block;text-decoration:none;transition:translate .25s}
.svc-cta a:hover h3 span,.svc-cta a:focus-visible h3 span{translate:.25em 0}
@media (min-width:1100px){.svc-grid{grid-template-columns:repeat(4,1fr)}}

/* 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,4vw,3.75rem);line-height:1}
.case-steps h4{font:400 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:.35rem}