/* Website Design Delhi Studio — "Loud and flat": Delhi shop-sign poster. Tokens first; everything below uses them. */
@font-face{font-family:"Big Shoulders";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bs-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bs-800-ext.woff2) format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ps-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ps-400-ext.woff2) format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ps-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ps-600-ext.woff2) format("woff2");unicode-range:U+20B9}

:root{
  --bg:#e2dccf;--surface:#d7d0c1;--ink:#2a1110;--muted:#6b524c;
  --accent:#4a6f84;--accent-ink:#fff;
  --red:#dc1928;--red-ink:#fff;--maroon:#952625;--maroon-ink:#fff;--mustard:#e0a912;--mustard-ink:#2a1110;--slate:#4a6f84;--slate-ink:#fff;
  --display:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --text:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.75rem,1.4rem + 5.4vw,6rem);
  --step-h3:clamp(40px,4.4vw,64px);
  --step-stmt:clamp(22px,2.5vw,36px);
  --m:clamp(20px,2.2vw,32px);
  --gap:clamp(96px,11vw,200px);
  --r:0px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
::selection{background:var(--mustard);color:var(--ink)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.88}
p{margin:0 0 1em}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--m);top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 18px;text-decoration:none;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}

/* fields */
.f-red{background:var(--red);color:var(--red-ink)}
.f-maroon{background:var(--maroon);color:var(--maroon-ink)}
.f-mustard{background:var(--mustard);color:var(--mustard-ink)}
.f-slate{background:var(--slate);color:var(--slate-ink)}
.f-bone{background:var(--bg);color:var(--ink)}
.f-surface{background:var(--surface);color:var(--ink)}
.f-ink{background:var(--ink);color:var(--bg)}

.wrap{padding-left:var(--m);padding-right:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m)}

/* buttons: one shape, square corners */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:0 28px;background:var(--accent);color:var(--accent-ink);font:600 1.0625rem/1 var(--text);text-decoration:none;border:0;border-radius:var(--r);cursor:pointer;transition:transform .25s var(--ease),background-color .25s}
.btn:hover{background:#3b5a6c;text-decoration:none}
.btn:active{transform:translateY(2px)}
.btn.ink{background:var(--ink);color:var(--bg)}
.btn.ink:hover{background:#000}
.btn.bone{background:var(--bg);color:var(--ink)}
.btn.bone:hover{background:#fff}

/* header */
.bar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--m);background:var(--red);color:#fff}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap}
.brand b{font:800 var(--step-stmt)/1 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.brand span{font:400 var(--step-small)/1 var(--text);opacity:.9}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font:600 var(--step-small)/1 var(--text);text-decoration:none;padding:8px 0;border-bottom:3px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current=page]{border-color:currentColor}
.nav .btn{min-height:44px;padding:0 18px;font-size:var(--step-small);border-bottom:0}
.menu{display:none;background:none;border:0;color:inherit;font:600 16px/1 var(--text);padding:10px 0;cursor:pointer}
@media (max-width:900px){
  .nav{display:none}
  .menu{display:block}
  .bar.open .nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--red);padding:8px var(--m) 24px}
  .bar.open .nav a{font:800 34px/1 var(--display);text-transform:uppercase;padding:12px 0;border:0}
  .bar.open .nav .btn{margin-top:12px;font:600 17px/1 var(--text);text-transform:none;min-height:56px}
}

/* masked lines (hero headline) */
.ln{display:block;overflow:hidden;padding-bottom:.02em}
.ln>span{display:block}

/* home hero: narrow talk, wide headline */
.hero{position:relative;min-height:calc(100svh - 84px);padding-top:clamp(28px,4vh,56px);overflow:hidden}
.hero .grid{min-height:inherit;align-content:start}
.hero .talk{grid-column:1/5;padding-top:clamp(40px,18vh,200px)}
.hero .talk p{font:400 var(--step-lead)/1.35 var(--text);max-width:24ch;margin:0 0 28px}
.hero .talk .btn{background:var(--ink);color:#fff}
.hero .talk .btn:hover{background:#000}
.hero .talk small{display:block;margin-top:18px;font:400 var(--step-small)/1.4 var(--text);max-width:30ch}
.hero .wide{grid-column:5/13;display:flex;flex-direction:column}
.hero h1{font-size:clamp(96px,14.2vw,236px);line-height:.82;letter-spacing:-.01em;margin:0 0 clamp(80px,12vh,120px)}
.hero .shot{position:relative;margin:auto 0 0;align-self:stretch}
.hero .shot img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;transform:rotate(-2.2deg) translateY(14%);transform-origin:left bottom}
.hero .tag{position:absolute;left:0;top:0;transform:translateY(-55%) rotate(1.2deg);width:min(300px,70%);padding:18px 20px;background:var(--mustard);color:var(--ink);z-index:2}
.hero .tag b{display:block;font:800 var(--step-h3)/.9 var(--display)}
.hero .tag span{font:600 var(--step-small)/1.35 var(--text)}
@media (max-width:900px){
  .hero{min-height:0;padding-top:28px}
  .hero .grid{display:flex;flex-direction:column}
  .hero .wide{display:contents}
  .hero h1{order:1}.hero .talk{order:2}.hero .shot{order:3}
  .hero h1{font-size:22.5vw;line-height:.84;margin-bottom:22px}
  .hero .talk{padding-top:0}
  .hero .talk p{font-size:18px;max-width:none}
  .hero .talk .btn{width:100%}
  .hero .shot{margin:40px calc(var(--m) * -1) 0}
  .hero .shot img{transform:none;aspect-ratio:4/3}
  .hero .tag{position:static;width:auto;transform:none;margin:0 var(--m)}
  .hero .shot{display:flex;flex-direction:column-reverse}
  .hero .tag b{font-size:40px}
}

/* section heads */
.h2{font-size:var(--step-head);line-height:.88;margin:0 0 .45em}
.lead{font-size:var(--step-lead);line-height:1.35;max-width:34ch}
section{position:relative}
.pad{padding-top:var(--gap);padding-bottom:var(--gap)}

/* work: names as one paragraph */
.names{font:800 clamp(22px,2.5vw,36px)/1.14 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--muted);margin:0}
.names h2{display:inline;font-size:inherit;line-height:inherit;color:var(--ink)}
.names a{text-decoration:none;color:inherit;transition:color .2s}
.names a:hover,.names a:focus-visible{color:var(--ink)}
.names .fr{display:inline-block;width:1.5em;height:.82em;vertical-align:-.04em;margin:0 .12em;overflow:hidden;transition:transform .35s var(--ease);transform-origin:left center}
.names .fr img{width:100%;height:100%;object-fit:cover;object-position:top}
.names a:hover .fr,.names a:focus-visible .fr{transform:scale(1.6)}
.names .sep{color:var(--muted)}
.count{margin-top:28px;font-size:var(--step-body);color:var(--ink);max-width:70ch}
@media (max-width:700px){.names{font-size:min(6.2vw,24px);line-height:1.3}.names a{display:inline;padding:3px 0}.names .fr.late{display:none}}

/* statements: unequal panels */
.panels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0}
.panel{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:330px;padding:clamp(24px,3vw,44px);text-decoration:none;transition:filter .2s}
.panel:hover{filter:brightness(1.06)}
.panel h3{font-size:var(--step-h3);line-height:.88}
.panel p{margin:0;max-width:34ch;font-size:var(--step-body)}
.panel .pr{font:800 var(--step-stmt)/1 var(--display)}
.panel:nth-child(1){grid-column:1/8}.panel:nth-child(2){grid-column:8/13}
.panel:nth-child(3){grid-column:1/5}.panel:nth-child(4){grid-column:5/13}
.panel:nth-child(5){grid-column:1/7}.panel:nth-child(6){grid-column:7/13}
@media (max-width:800px){.panel{grid-column:1/-1!important;min-height:0}}

/* ticket (pricing + live thing) */
.tk-wrap{display:flex;flex-direction:column;align-items:center;gap:40px}
.board{width:min(64vw,100%);background:var(--mustard);color:var(--ink);padding:22px clamp(18px,3vw,40px) 18px;text-align:center;position:relative}
.board .bn{display:block;font:800 var(--step-head)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;overflow-wrap:anywhere}
.board .bs{display:block;margin-top:10px;font:600 var(--step-small)/1.3 var(--text)}
.board::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:var(--maroon)}
.ticket{position:relative;width:min(64vw,100%);display:grid;grid-template-columns:7fr 3fr;background:var(--bg);color:var(--ink);--notch:var(--red)}
.ticket .main{padding:40px;display:flex;flex-direction:column;gap:22px}
.ticket .main h3{font-size:var(--step-h3);line-height:.88}
.ticket .fields{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:end}
.ticket label{display:flex;flex-direction:column;gap:6px;font:600 var(--step-small)/1.2 var(--text)}
.ticket input[type=text]{height:52px;min-width:min(320px,100%);padding:0 14px;border:0;background:var(--surface);color:var(--ink);font:400 17px/1 var(--text);border-radius:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:0 16px;border:0;background:var(--surface);color:var(--ink);font:600 var(--step-small)/1 var(--text);cursor:pointer;transition:background-color .2s,transform .2s}
.chips button:hover{background:#cbc2b0}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.ticket ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:var(--step-body)}
.ticket ul li{padding-left:18px;position:relative}.ticket ul li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--red)}
.ticket .stub{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:center;background:var(--surface);padding:40px 0 0}
.ticket .price{font:800 var(--step-head)/.9 var(--display);padding:0 12px}
.ticket .when{display:block;font:600 var(--step-small)/1.3 var(--text);margin-top:10px;padding:0 12px}
.ticket .stub .btn{min-height:56px;width:100%;margin-top:28px}
.ticket .n1,.ticket .n2{position:absolute;left:70%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--notch)}
.ticket .n1{top:-14px}.ticket .n2{bottom:-14px}
.ticket .perf{position:absolute;left:70%;top:24px;bottom:24px;width:0;margin-left:-3px;border-left:6px dotted var(--notch)}
.ticket .plain{font-size:var(--step-small);margin:0}
@media (max-width:860px){
  .board,.ticket{width:100%}
  .ticket{grid-template-columns:1fr}
  .ticket .main{padding:28px 22px}
  .ticket ul{grid-template-columns:1fr}
  .ticket{display:flex;flex-direction:column}
  .ticket .stub{display:contents}
  .ticket .stub>div{order:1;padding:28px 12px 0;background:var(--surface);text-align:center}
  .ticket .main{order:2}
  .ticket .stub .btn{order:3;margin-top:0}
  .ticket .n1,.ticket .n2{top:auto;left:auto;bottom:auto}
  .ticket .n1{left:-14px;top:calc(var(--cut,70%) - 14px);margin:0}
  .ticket .n2{right:-14px;top:calc(var(--cut,70%) - 14px);margin:0}
  .ticket .perf{display:none}
  .ticket .price{font-size:16vw}
}

/* how it works: one verb at a time */
.verbs{position:relative}
.vp{position:relative;height:100svh;overflow:hidden;color:#fff}
.vp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp::before{content:"";position:absolute;inset:0;background:rgba(20,8,8,.46);z-index:1}
.vp .vw{position:sticky;top:50%;transform:translateY(-50%);z-index:2;text-align:center}
.vp .vw h3{font-size:clamp(110px,22vw,360px);line-height:.8;color:#fff}
.vp-unused p{position:absolute;left:var(--m);bottom:var(--m);z-index:3;max-width:42ch;margin:0;padding:18px 20px;background:rgba(20,8,8,.72);font-size:18px;line-height:1.45}
.verbs-h{position:absolute;top:0;left:0}
@media (max-width:700px){.vp .vw h3{font-size:26vw}.vp-unused p{left:16px;right:16px;bottom:16px;font-size:16px}}

/* list: giant word + filled bar rows */
.listcol{max-width:640px;margin:0 auto;container-type:inline-size}
.giant{font-size:39cqw;line-height:.8;margin:0 0 20px;letter-spacing:-.01em}
.bars{display:flex;flex-direction:column;gap:6px}
.bars details{background:var(--surface)}
.bars summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 18px;font:600 var(--step-body)/1.2 var(--text);cursor:pointer;list-style:none}
.bars summary::-webkit-details-marker{display:none}
.bars summary::after{content:"+";font:800 26px/1 var(--display);transition:transform .25s var(--ease)}
.bars details[open] summary::after{transform:rotate(45deg)}
.bars .bd{padding:0 20px 22px;font-size:var(--step-body)}
.bars .bd p{margin:0 0 12px}
.bars .bd ul{list-style:none;margin:0;padding:0}
.bars .bd li{display:flex;justify-content:space-between;gap:16px;padding:7px 0}
.bars .bd li span{color:var(--muted);text-align:right}

/* about: two columns, highlighted words */
.story{columns:2;column-gap:32px;font-size:var(--step-lead);line-height:1.3;color:var(--ink);text-align:justify;hyphens:auto;margin:0}
.story b{color:var(--ink);font-weight:600}
.hl{padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink)}
.hl.m{background:var(--mustard)}.hl.s{background:#9fc0d1}.hl.r{background:#f2a3a3}.hl.b{background:#c9bfa9}
.story a.hl{background:var(--red);color:#fff;text-decoration:none;display:inline}
.story a.hl:hover{background:var(--maroon)}
@media (max-width:760px){.story{columns:1;text-align:left;font-size:20px;line-height:1.25}.story a.hl{display:block;margin-top:24px;padding:12px}}

/* photo strip (about/home) */
.photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--m);align-items:end}
.photos figure{margin:0}
.photos figcaption{font-size:var(--step-small);margin-top:10px;color:var(--ink)}
.photos .p1{grid-column:1/6}.photos .p2{grid-column:6/10;transform:rotate(1.5deg)}.photos .p3{grid-column:10/13;transform:rotate(-2deg)}
.photos img{width:100%;object-fit:cover}
@media (max-width:760px){.photos figure{grid-column:1/-1!important;transform:none!important}}

/* faq: tabbed index cards */
.cards-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.cards-faq .h2{grid-column:3/11}
.drawer{grid-column:3/11;display:flex;flex-direction:column}
.fc{position:relative;margin-top:-34px;padding-top:40px}
.fc:first-child{margin-top:0}
.fc .tab{position:absolute;top:0;left:min(calc(var(--i) * 150px),calc(100% - 200px));width:200px;height:40px;display:flex;align-items:center;padding:0 16px;font:600 var(--step-small)/1 var(--text);background:inherit}
.fc .card{padding:22px 26px 62px}
.fc:last-child .card{padding-bottom:28px}
.fc button{all:unset;display:block;width:100%;cursor:pointer;font:600 var(--step-lead)/1.3 var(--text)}
.fc button:focus-visible{outline:3px solid var(--mustard);outline-offset:4px}
.fc .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.fc .ans>div{overflow:hidden}
.fc .ans p{max-width:50ch;font-size:var(--step-body);margin:14px 0 0}
.fc.open .ans{grid-template-rows:1fr}
.fc.c0,.fc.c0 .tab{background:var(--red);color:#fff}
.fc.c1,.fc.c1 .tab{background:var(--slate);color:#fff}
.fc.c2,.fc.c2 .tab{background:var(--mustard);color:var(--ink)}
.fc.c3,.fc.c3 .tab{background:var(--maroon);color:#fff}
.no-js .fc .ans{grid-template-rows:1fr}
@media (max-width:760px){.cards-faq .h2,.drawer{grid-column:1/-1}.fc .tab{left:min(calc(var(--i) * 48px),calc(100% - 120px));width:120px;font-size:14px}.fc .card{padding:18px 18px 22px}.fc button{font-size:18px}}

/* coupon form */
.coupon{position:relative;display:grid;grid-template-columns:46fr 54fr;background:var(--red);color:#fff;border-radius:14px;margin:0 auto;max-width:1240px;--notch:var(--bg)}
.coupon .l{padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.coupon h2{font-size:var(--step-h3);line-height:.9}
.coupon .l p{margin:0;font-size:var(--step-body);max-width:36ch}
.coupon .l .meta{font-size:var(--step-small);line-height:1.6}
.coupon .l .meta a{color:#fff}
.coupon form{padding:48px;display:flex;flex-direction:column;gap:10px}
.coupon input,.coupon select{height:52px;width:100%;padding:0 14px;border:0;border-radius:0;background:#f06a73;color:#fff;font:400 16px/1 var(--text);appearance:none}
.coupon input::placeholder{color:#fff;opacity:.92}
.coupon select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");background-position:calc(100% - 18px) 50%;background-repeat:no-repeat;padding-right:44px}
.coupon select option{color:var(--ink)}
.coupon button[type=submit]{height:56px;border:0;background:var(--ink);color:#fff;font:600 17px/1 var(--text);cursor:pointer;margin-top:4px;transition:background-color .2s}
.coupon button[type=submit]:hover{background:#000}
.coupon .fine{font-size:var(--step-small);line-height:1.45;margin:6px 0 0;opacity:.95;max-width:62ch}
.coupon .n1,.coupon .n2{position:absolute;left:46%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--notch)}
.coupon .n1{top:-14px}.coupon .n2{bottom:-14px}
.coupon .perf{position:absolute;left:46%;top:26px;bottom:26px;width:0;margin-left:-3px;border-left:6px dotted var(--notch)}
@media (max-width:860px){.coupon{grid-template-columns:1fr;margin:0 -8px}.coupon .l,.coupon form{padding:28px 22px}.coupon .n1,.coupon .n2,.coupon .perf{display:none}.coupon form{padding-top:6px}}

/* footer: invitation, link columns, the name set full width */
.foot{position:relative;background:var(--red);color:#fff;padding-top:clamp(72px,9vw,128px);container-type:inline-size;overflow:hidden}
.foot a{color:#fff}
.fhead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m);row-gap:40px;align-items:end}
.foot .inv{grid-column:1/9}
.foot .inv h2{font-size:var(--step-head);line-height:.86;margin:0 0 24px}
.foot .inv p{margin:0 0 28px;max-width:46ch;font-size:var(--step-body)}
.foot .acts{display:flex;flex-wrap:wrap;gap:12px}
.foot .acts .btn.ink{color:#fff}
.foot .reach{grid-column:9/13;display:flex;flex-direction:column;gap:10px;font-size:var(--step-body)}
.foot .reach a{text-decoration:none;font-weight:600}
.foot .reach a:hover{text-decoration:underline}
.fcols{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;column-gap:var(--m);row-gap:40px;margin-top:clamp(64px,7vw,104px);padding-top:clamp(40px,4vw,56px);position:relative}
.fcols::before{content:"";position:absolute;top:0;left:var(--m);right:var(--m);height:6px;background:var(--maroon)}
.fcol h3{font-size:var(--step-stmt);line-height:1;margin:0 0 16px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 8px;font-size:var(--step-small);line-height:1.35}
.fcol a{text-decoration:none;opacity:.95}
.fcol a:hover{text-decoration:underline;opacity:1}
.fcol:nth-child(3) ul{columns:2;column-gap:var(--m)}
.foot .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(48px,5vw,72px);font-size:var(--step-small)}
.foot .legal a{text-decoration:none}.foot .legal a:hover{text-decoration:underline}
.foot .name{margin:clamp(16px,2vw,28px) 0 0;padding:0 var(--m);font:800 calc((100cqw - var(--m) * 2) / 5.02)/.8 var(--display);text-transform:uppercase;white-space:nowrap;letter-spacing:0;color:#fff;user-select:none;line-height:.92;padding-bottom:clamp(12px,1.6vw,24px)}
@media (max-width:900px){.foot .inv,.foot .reach{grid-column:1/-1}.fcols{grid-template-columns:1fr 1fr}.fcol:nth-child(3){grid-column:1/-1}}
@media (max-width:560px){.fcols{grid-template-columns:1fr}.fcol:nth-child(3) ul{columns:2}.foot .acts .btn{width:100%}}

/* inner pages */
.phero{padding-top:clamp(48px,8vh,96px);padding-bottom:clamp(56px,9vh,110px)}
.phero .grid{align-items:end;row-gap:28px}
.phero h1{grid-column:1/9;font-size:clamp(68px,9.6vw,168px);line-height:.84}
.phero .side{grid-column:9/13}
.phero .side p{font-size:var(--step-lead);line-height:1.4;margin:0 0 24px}
.phero .fig{display:inline-block;background:var(--mustard);color:var(--ink);padding:16px 20px;margin-bottom:24px;transform:rotate(-1.4deg)}
.phero .fig b{display:block;font:800 var(--step-h3)/.9 var(--display);text-transform:uppercase}
.phero .fig span{font:600 var(--step-small)/1.3 var(--text)}
.phero .btn{background:var(--ink);color:#fff}
@media (max-width:900px){.phero h1,.phero .side{grid-column:1/-1}.phero h1{font-size:15vw}.phero .side{display:flex;flex-direction:column}.phero .side p{order:1;font-size:var(--step-body)}.phero .side .btn{order:2;width:100%}.phero .fig{order:3;margin:28px 0 0;align-self:flex-start}}
.crumbs{padding:20px var(--m) 0;font-size:var(--step-small)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--ink)}

.body{padding-top:clamp(48px,6vw,96px);padding-bottom:var(--gap)}
.body .grid{align-items:start}
.prose{grid-column:1/8;max-width:68ch}
.aside{grid-column:9/13;position:sticky;top:24px;display:flex;flex-direction:column;gap:6px}
@media (max-width:900px){.prose,.aside{grid-column:1/-1}.aside{position:static;margin-top:48px}}
.prose h2{font-size:var(--step-h3);line-height:.88;margin:1.6em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--step-stmt);line-height:.9;margin:1.4em 0 .4em}
.prose p,.prose li{font-size:var(--step-body)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--red);font-weight:600}
.prose strong{font-weight:600}
.prose a{color:var(--ink);text-decoration-color:var(--red)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:var(--step-body);background:var(--surface)}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid #c3b9a4;vertical-align:top}
.prose th{font-weight:600;background:#cfc6b3}
.prose blockquote{margin:1.4em 0;padding:24px 26px;background:var(--mustard);color:var(--ink);font-size:var(--step-lead);line-height:1.4}
.prose blockquote p:last-child{margin:0}
.tablewrap{overflow-x:auto}
.box{padding:26px;background:var(--surface)}
.box h2{font-size:var(--step-stmt);line-height:.9;margin:0 0 14px}
.box p,.box li{font-size:var(--step-body)}
.box ul{list-style:none;padding:0;margin:0 0 18px}
.box li{padding:6px 0}
.box .big{font:800 var(--step-h3)/.9 var(--display);margin:0 0 8px}
.box .btn{width:100%}
.box.red{background:var(--red);color:#fff}
.box.red a:not(.btn){color:#fff}
.box nav a{display:block;padding:8px 0;font-weight:600;text-decoration:none}
.box nav a:hover{text-decoration:underline}

/* plain big list (related, journal, areas) */
.biglist{list-style:none;margin:0;padding:0}
.biglist li a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:18px 0;text-decoration:none;transition:color .2s,padding-left .3s var(--ease)}
.biglist li a b{font:800 var(--step-h3)/.92 var(--display);text-transform:uppercase}
.biglist li a span{font:400 var(--step-body)/1.4 var(--text);text-transform:none;max-width:38ch;text-align:right}
.biglist li a:hover{color:var(--red);padding-left:12px}
@media (max-width:760px){.biglist li a{flex-direction:column;gap:8px}.biglist li a span{text-align:left}}

/* places paragraph on zone pages */
.places{font:800 clamp(22px,2.4vw,36px)/1.15 var(--display);text-transform:uppercase;color:var(--muted);margin:0}
.places h2{display:inline;font-size:inherit;line-height:inherit;color:var(--ink)}

/* work rows */
.wk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m);align-items:center;padding:clamp(40px,6vw,88px) 0}
.wk .im{grid-column:1/8}
.wk .im img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;transform:rotate(-1.5deg)}
.wk .tx{grid-column:9/13}
.wk:nth-child(even) .im{grid-column:6/13;order:2;transform:none}
.wk:nth-child(even) .im img{transform:rotate(1.5deg)}
.wk:nth-child(even) .tx{grid-column:1/5;order:1}
.wk h2{font-size:var(--step-h3);line-height:.86;margin:0 0 16px}
.wk p{margin:0 0 14px}
.wk .where{font-weight:600}
@media (max-width:860px){.wk .im,.wk .tx,.wk:nth-child(even) .im,.wk:nth-child(even) .tx{grid-column:1/-1;order:0}.wk .tx{margin-top:28px}}

/* quote */
.quote{font:400 var(--step-lead)/1.35 var(--text);max-width:40ch;margin:0}
.quote+cite{display:block;margin-top:18px;font:600 var(--step-body)/1.3 var(--text);font-style:normal}

/* reveal (only when JS is running and motion is allowed) */
.js .rv{opacity:.2;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* barba wipe */
.wipe{position:fixed;inset:0;z-index:90;background:var(--red);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.wipe b{position:absolute;left:var(--m);bottom:var(--m);font:800 clamp(60px,12vw,200px)/.8 var(--display);text-transform:uppercase;color:#fff;opacity:0}

/* section head with a sentence beside it */
.sechead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--m);align-items:end}
.sechead .h2{grid-column:1/8;margin:0}
.sechead p{grid-column:9/13;margin:0;font-size:var(--step-body)}
@media (max-width:860px){.sechead .h2,.sechead p{grid-column:1/-1}.sechead p{margin-top:16px}}

/* how it works: one photograph bleeding off two edges, caption on a colour bar, four verb panels */
.bleed{position:relative;margin:0;overflow:hidden}
.bleed img{width:100%;height:min(78svh,760px);object-fit:cover;object-position:center 30%}
.capbar{position:absolute;left:var(--m);bottom:0;width:min(560px,calc(100% - var(--m) * 2));padding:28px 30px 30px}
.capbar h2{font-size:var(--step-h3);line-height:.88;margin:0 0 12px}
.capbar p{margin:0;font-size:var(--step-body)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{padding:clamp(28px,3vw,44px);min-height:clamp(320px,42svh,460px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.steps h3{font-size:var(--step-head);line-height:.8}
.steps p{margin:0;font-size:var(--step-body)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.capbar{position:static;width:auto}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{min-height:0}.steps h3{font-size:22vw}}
@media (max-width:700px){.places{font-size:min(6.2vw,24px);line-height:1.3}}

/* strip of real client sites */
.strip{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--m)}
.strip a{display:block;text-decoration:none}
.strip img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;transition:transform .35s var(--ease)}
.strip li:nth-child(odd) img{transform:rotate(-1.5deg)}.strip li:nth-child(even) img{transform:rotate(1.5deg)}
.strip a:hover img,.strip a:focus-visible img{transform:rotate(0) scale(1.03)}
.strip b{display:block;margin-top:18px;font:800 var(--step-stmt)/1 var(--display);text-transform:uppercase}
.strip span{display:block;margin-top:6px;font-size:var(--step-small)}
@media (max-width:900px){.strip{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.strip{grid-template-columns:1fr}}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--m)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}