@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plain";src:url(fonts/plain-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plain";src:url(fonts/plain-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Martina Plantijn";src:url(fonts/martina-plantijn-light.woff2) format("woff2");font-weight:300;font-display:swap}

:root{
  --bg:#fff; --ink:#000;
  --ease:cubic-bezier(.215,.61,.355,1);      /* = gsap power3.out */
  --ease-io:cubic-bezier(.645,.045,.355,1);  /* = gsap power3.inOut */
  --edge:20px;                     /* distance to the screen edge */
  --card-h:clamp(220px, calc((100svh - 470px) * .9), 640px);   /* the works: the sides of the drum come toward you and grow, so the middle card is smaller */
  --gap:10px; --radius:10px; --r-big:12px;   /* media corners */
  --sans:"Plain","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Martina Plantijn","Times New Roman",Times,serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* first screen */
.hero{position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:560px;padding:0 0 40px}   /* the works start at the very top; 40 under the logos */
/* home: the nav stays out of the first screen; the pill nav takes over once scrolled */
:root:not(.scrolled) body:has(.ask-slot) .nav{opacity:0;pointer-events:none}
/* first screen is black; the page turns white once the second block comes in */
:root.dark{--bg:#000;--ink:#fff}
body{transition:background-color .8s ease,color .8s ease}
.logo img{transition:filter .8s ease}
:root.dark .logo img{filter:invert(1)}
/* from the second block on: a floating pill nav and a progressive blur along the bottom edge */
.pillnav{position:fixed;top:20px;left:50%;z-index:21;display:flex;align-items:center;padding:10px;border-radius:999px;
  background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 10px rgba(0,0,0,.2);
  transform:translate(-50%,-28px);filter:blur(8px);opacity:0;pointer-events:none;
  transition:transform .6s var(--ease) .12s,filter .6s ease .12s,opacity .5s ease .12s}
.pillnav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.24) 50%,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:root.scrolled .pillnav{transform:translate(-50%,0);filter:none;opacity:1;pointer-events:auto}
:root.scrolled.scroll-down .pillnav{transform:translate(-50%,-28px);filter:blur(8px);opacity:0;pointer-events:none}   /* scrolling down: out of the way; up: back */
.pillnav .of{display:block;line-height:0}
.pillnav .of img{display:block;height:12px;width:auto}
.pillnav .of img{transition:filter .8s ease}
:root.dark .pillnav .of img{filter:invert(1)}
.pillnav .sep{width:0.8px;height:14px;background:rgba(0,0,0,.1);margin:0 10px;transition:background-color .8s ease}
:root.dark .pillnav .sep{background:rgba(255,255,255,.16)}
.pillnav .links{display:flex;align-items:center;gap:20px}
.pillnav .links a{font-size:14px;line-height:1.1;letter-spacing:-0.01em;transition:opacity .2s}
.pillnav .links a:not(.contact):hover{opacity:.5}
.pillnav .links .contact{margin-left:0}
@media (prefers-reduced-motion:reduce){.nav,.pillnav{transition:opacity .3s}:root.scrolled .nav{transform:none;filter:none}.pillnav{filter:none;transform:translate(-50%,0)}}
@media (max-width:420px){.pillnav .links{gap:14px}}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--edge) var(--edge) 0;position:fixed;top:0;left:0;right:0;z-index:20;
  transition:transform .6s var(--ease),filter .6s ease,opacity .5s ease}
:root.scrolled .nav{transform:translateY(-28px);filter:blur(8px);opacity:0;pointer-events:none}
.logo{display:block;line-height:0}
.logo img{display:block;height:12px;width:auto}
.logo .sm{display:none}

/* "Work in progress" tag by the logo: the four squares take turns going dim, clockwise, for as long as the site is being built */
.wip{display:inline-flex;align-items:center;gap:6px;height:20px;margin:0 auto 0 10px;padding:0 7px;border-radius:5px;background:rgba(52,168,52,.14);color:#2f8f2f;
  font-family:var(--mono);font-size:10px;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background-color .8s ease,color .8s ease}
:root.dark .wip{background:rgba(96,212,96,.16);color:#6fd46f}
.wip i{display:grid;grid-template-columns:4px 4px;gap:1px}
.wip b{display:block;width:4px;height:4px;background:currentColor;animation:wip 2.4s steps(1) infinite}
.wip b:nth-child(2){animation-delay:.6s}.wip b:nth-child(4){animation-delay:1.2s}.wip b:nth-child(3){animation-delay:1.8s}   /* clockwise: TL, TR, BR, BL */
@keyframes wip{0%,25%{opacity:.3}25.01%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wip b{animation:none}}
@media (max-width:600px){.wip{margin-left:8px}}
.menu{display:flex;align-items:center;gap:20px}
.menu a{font-size:14px;line-height:1.1;letter-spacing:-0.01em;transition:opacity .2s}
.menu a:not(.contact):hover{opacity:.5}
.contact{position:relative;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 4px;border-radius:999px;background:var(--ink);color:var(--bg)}
.contact svg{width:14px;height:14px;flex:none}
.contact svg circle{fill:currentColor}
/* soft gradient glow around the pill */
.contact{box-shadow:0 0 0 0 transparent;transition:box-shadow .35s var(--ease),background-color .8s ease,color .8s ease}
/* the soft blue/peach glow the buttons get on hover and focus */
.contact:hover,.contact:focus-visible{box-shadow:-10px 0 18px -2px rgba(143,162,255,.55),10px 0 18px -2px rgba(255,181,154,.55),0 0 22px 0 rgba(214,162,255,.35)}
/* dots twinkle on hover, each on its own beat */
.contact:hover svg circle,.contact:focus-visible svg circle{animation:twinkle 1.1s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.15}}

/* work strip */
.strip{flex:1;min-height:0;display:flex;align-items:flex-end;padding-bottom:0;overflow:hidden;align-items:center}
body:has(.ask-slot) .strip{flex:none;height:calc(var(--card-h) * 1.12);margin-top:16px}   /* home: the strip is just the bowed cards' height, at the very top; the statement takes the rest */
body:has(.ask-slot) .statement{margin-top:auto;padding-top:40px}   /* the works sit low in their room */
.strip{user-select:none;-webkit-user-select:none}
.track .card{cursor:grab;touch-action:pan-y}
.strip.dragging,.strip.dragging .card{cursor:grabbing}
.track{display:flex;gap:var(--gap);width:max-content;will-change:transform}
.card{position:relative;flex:none;margin:0;height:var(--card-h);width:calc(var(--card-h) * var(--r));border-radius:12px;overflow:hidden;background:#1a1a1a}    /* sharp corners: home gallery and the About photo strip */
.card img,.card video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.tag{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.85);color:#000;
  font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* statement */
/* the first screen: a line, the statement (first line dim), the Ask bar's slot, then the works */
.statement{flex:none;padding:0 var(--edge) 0;text-align:center}
.ask-slot{position:relative;height:78px;text-align:left;margin:32px auto 0;width:min(556px,max(36vw,480px),100vw - 16px)}   /* the bar's place in the hero; it is anchored to the slot's bottom so the chat opens upward */
.ask.is-docked{position:absolute;left:0;bottom:0;transform:none !important;width:100%;opacity:1 !important;pointer-events:auto !important;transition:none}
.statement .sub{margin:0 auto 0;max-width:560px;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:var(--ink)}
.statement .clients{margin:12px auto 0;width:min(556px,max(36vw,480px),100vw - 16px);gap:40px}
.statement .trusted{margin:32px 0 0;font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:#808080}   /* four logos at the bottom of the first screen, as wide as the Ask bar, 40 under it */
.statement .clients li{flex:1 1 0;min-width:0;height:28px;filter:opacity(.5)}
:root.dark .statement .clients li{filter:invert(1) brightness(.78)}   /* equal slots so a swap never shifts the row; grey on the slot, so the image's own blur/opacity animate cleanly */
/* each logo at its own height from the markup (optical sizing), scaled down together: 40% of the home size */
.statement .clients img{height:auto;width:auto;max-width:100%;transform:scale(.72);transform-origin:50% 50%}
/* per-logo balance: the thin wordmarks up, the heavy marks down, so they read at one weight */
.statement .clients img[src*="dorion"],.statement .clients img[src*="plus-render"]{transform:scale(.9)}
.statement .clients img[src*="ore.svg"]{transform:scale(.72)}
.statement .clients img[src*="ommi"],.statement .clients img[src*="financepay"],.statement .clients img[src*="zenedu"]{transform:scale(.8)}
.statement .clients img[src*="foxfour"],.statement .clients img[src*="bloxfi"]{transform:scale(.58)}
.statement h1{margin:0;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em}
.statement .dim{color:#808080}
/* the home nav: logo and menu gathered in the middle, as wide as the Ask bar */
body:has(.ask-slot) .nav{justify-content:center;gap:0}
body:has(.ask-slot) .nav .logo{margin-right:auto}
body:has(.ask-slot) .nav .logo,body:has(.ask-slot) .nav .menu{position:relative}
body:has(.ask-slot) .nav{padding-left:calc(50vw - min(556px,max(36vw,480px)) / 2);padding-right:calc(50vw - min(556px,max(36vw,480px)) / 2)}
body:has(.ask-slot) .nav .wip{display:none}
.statement h1 > span{display:block;white-space:nowrap}
.statement .serif{font-family:var(--serif);font-weight:300}
/* the trial cut of the serif has no apostrophe — a raised comma stands in */
.apos{display:inline-block;transform:translateY(-0.52em);margin:0 -0.02em}

/* intro: what we do + clients */
.intro{padding:96px var(--edge) 148px;text-align:center}   /* home: a manifesto line, then the studio in one paragraph */
.intro h2{display:block;margin:0 auto 24px;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em}
/* three facts under the line: the number big and light, the label small and grey — the About page's numbers, in a row */
.intro .facts{list-style:none;display:flex;justify-content:center;gap:0;margin:56px auto 0;padding:0;width:min(1000px,100vw - 2 * var(--edge))}
.intro .facts li{flex:1 1 0;padding:20px 0 0;border-top:1px solid var(--line);text-align:left}
.intro .facts li + li{margin-left:20px}
.intro .facts b{display:block;font-weight:300;font-size:36px;line-height:1.1;letter-spacing:-0.03em}
.intro .facts span{display:block;margin-top:8px;max-width:16em;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.intro > p{display:block;margin:24px auto 0 !important;max-width:560px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.intro .pill{display:none}
.intro p{margin:0 auto;max-width:700px;font-weight:300;font-size:20px;line-height:1.3;letter-spacing:-0.01em}
.pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 4px;border-radius:999px;background:var(--ink);color:var(--bg);
  font-size:14px;line-height:1.1;letter-spacing:-0.01em;box-shadow:0 0 0 0 transparent;transition:box-shadow .35s var(--ease),background-color .8s ease,color .8s ease}
.pill svg{width:14px;height:14px;flex:none}
.pill svg circle{fill:currentColor}
.pill:hover,.pill:focus-visible{box-shadow:-10px 0 18px -2px rgba(143,162,255,.55),10px 0 18px -2px rgba(255,181,154,.55),0 0 22px 0 rgba(214,162,255,.35)}
.pill:hover svg circle,.pill:focus-visible svg circle{animation:twinkle 1.1s ease-in-out infinite;animation-delay:var(--d)}
.intro .pill{margin-top:40px}
.clients{list-style:none;margin:148px 0 0;padding:0;display:flex;justify-content:space-between;align-items:center;gap:24px}
.clients li{flex:0 1 170px;min-width:0;height:40px;display:flex;align-items:center;justify-content:center}   /* fixed slot: swaps never move the row */
.clients img{display:block;width:auto;max-width:100%;object-fit:contain}   /* height comes from each logo's own attribute: optical sizing */
@media (max-width:760px){
  .intro{padding-bottom:96px}
  .intro p{font-size:20px}
  .clients{display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:32px;margin-top:96px;justify-items:stretch}
  .clients li{width:auto;height:30px;justify-content:center}.clients li:first-child,.clients li:nth-child(4){justify-content:flex-start}.clients li:nth-child(3),.clients li:nth-child(6){justify-content:flex-end}.clients img{zoom:.8}   /* justified: first flush left, last flush right */
}
/* selected work */
.work{border-top:1px solid var(--line);padding:20px var(--edge) 0}
/* block header: title (or lead) on the left, the block's one button on the right, both on the top line */
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.sec-head .pill{flex:none;margin:calc((28px * 1.1 - 22px) / 2) 0 0 !important}   /* centred on the title's first line (28/1.1 tall; pill 22) */
.work h2{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.rows{margin-top:40px;display:flex;flex-direction:column;gap:40px}
.row{display:grid;gap:20px;align-items:start}
.row.a{grid-template-columns:1fr 1fr 1fr;row-gap:60px}   /* home: six cases, three across */
.row.b{grid-template-columns:1fr 1fr 1fr}
.case{margin:0}
.case .media{aspect-ratio:var(--ar);border-radius:12px;overflow:hidden;background:#ececec}
.case .media img,.case .media video{display:block;width:100%;height:100%;object-fit:cover}
/* captions (cases, journal, team): title and line under it both 14 Regular, 1.3, −1% — the line in grey */
.case h3{margin:24px 0 0;font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-0.02em}
.case p{margin:8px 0 0;font-weight:400;font-size:14px;line-height:1.4;letter-spacing:-0.01em;color:#6b6b6b;max-width:30em}
.case .fact,.jcard time{display:inline-flex;align-items:center;height:20px;margin:12px 0 0;padding:0 7px;border-radius:5px;background:rgba(0,0,0,.06);color:var(--ink);font-weight:400;font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;transition:background-color .8s ease,color .8s ease}   /* the same tag as on an open article (.ptag) */
:root.dark .case .fact,:root.dark .jcard time{background:rgba(255,255,255,.12)}
.work > .pill{margin-top:40px}
@media (max-width:900px){.row.a,.row.b{grid-template-columns:1fr 1fr}.rows{gap:32px}.row{row-gap:32px}}
@media (max-width:600px){.row.a,.row.b{grid-template-columns:1fr}.work h2{font-size:20px}.case h3{font-size:20px}}

/* testimonials */
.voices{padding:248px var(--edge)}
.voice{width:min(594px,100%);margin:0 auto;padding-left:14px}
.quote{position:relative;margin:0;overflow:visible;font-family:var(--serif);font-weight:300;font-size:32px;line-height:1.2;letter-spacing:-0.01em}
.quote .oq{position:absolute;left:-0.42em}
.q2{display:inline-block;transform:translateY(-0.5em);letter-spacing:-0.06em;margin:0 0.02em}
.q2.open{transform:rotate(180deg)}
.quote .oq{top:0.02em}
.who{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.who-l{display:flex;align-items:center;min-width:0}
.ava{display:flex;align-items:center;flex:none}
.ava img{display:block;width:36px;height:36px;border-radius:10px;object-fit:cover;background:#ddd}
.ava span{width:22px;height:22px;margin-left:-6px;border-radius:7px;background:#808080;color:#fff;
  display:grid;place-items:center;font-size:11px;line-height:1;text-transform:uppercase}
.name{margin-left:12px;font-weight:400;font-size:14px;line-height:1.1;letter-spacing:-0.01em;color:#808080}
.arrows{display:flex;gap:6px;flex:none}
.arrows button{width:20px;height:20px;padding:0;border:0;background:none;color:var(--ink);opacity:.55;cursor:pointer;display:grid;place-items:center;transition:opacity .2s}
.arrows button:hover{opacity:1}
.arrows svg{width:12px;height:12px}
@media (max-width:600px){.voices{padding:160px var(--edge)}.quote{font-size:30px;line-height:1.15}.voice{padding-left:10px}}

/* services & sectors */
.services{border-top:1px solid var(--line);padding:20px var(--edge) 148px}
:root.dark .services{border-top-color:transparent}
.services .lead{margin:0;max-width:1060px;font-size:28px;line-height:1.15;letter-spacing:-0.01em}
/* five services in a row: picture, name, the first sentence of its summary */
.svc-cards{display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px;margin-top:40px}
.svc-card{display:block;color:inherit}
.svc-card .media{aspect-ratio:1248 / 1140;border-radius:12px;overflow:hidden;background:#ececec}
.svc-card .media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc-card:hover .media img{transform:scale(1.03)}
.svc-card h3{margin:20px 0 0;font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-0.01em}
.svc-card p{margin:8px 0 0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}

@media (max-width:900px){
  .services{padding-bottom:96px}
  .services .lead{font-size:20px}
  .svc-cards{grid-template-columns:1fr 1fr;row-gap:32px;margin-top:40px}
}

/* journal */
.journal{border-top:1px solid var(--line);padding:20px var(--edge) 148px}
:root.dark .journal{border-top-color:transparent}
.journal h2{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.journal .sub{margin:20px 0 0;max-width:360px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.jcards{margin-top:40px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px 20px}
.jcard{width:335px;margin:0}
.jcard .media{height:var(--h);border-radius:12px;overflow:hidden;background:#ececec}
.jcard .media img{display:block;width:100%;height:100%;object-fit:cover}
.jcard h3{margin:20px 0 0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.jcard p{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}

@media (max-width:760px){.jcard{width:100%}.jcard .media{height:auto;aspect-ratio:335/var(--hn)}.journal{padding-bottom:96px}
  .journal-page .jcards[data-swipe],.post-more .jcards[data-swipe],.jcards[data-swipe]{display:flex;flex-wrap:nowrap;gap:10px;margin:40px calc(-1 * var(--edge)) 0;padding:0 var(--edge);scroll-padding:0 var(--edge);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .jcards[data-swipe]::-webkit-scrollbar{display:none}
  .jcards[data-swipe] .jcard{flex:0 0 calc(100vw - 2 * var(--edge) - 32px);width:auto;scroll-snap-align:start}
  .jcards[data-swipe] .jcard .media{height:auto;aspect-ratio:4/3}}

/* contact: Chladni sand behind the form */
.contact-sec{position:relative;height:100vh;height:100svh;min-height:640px;background:#000;overflow:hidden;color:#000}
.contact-sec canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:blur(0.4px);touch-action:pan-y}
.cform{position:absolute;top:20px;left:20px;z-index:1;width:440px;max-width:calc(100% - 40px);padding:24px;border-radius:12px;background:#fff;
  display:flex;flex-direction:column;gap:20px}
.cform h2{margin:0;font-weight:400;font-size:28px;line-height:1.15;letter-spacing:-0.02em}
.cform .lead{margin:12px 0 0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.cform .fields{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cform input,.cform textarea{display:block;width:100%;border:0;border-radius:8px;background:rgba(0,0,0,.1);color:#000;font:inherit;
  font-size:14px;line-height:1.2;letter-spacing:-0.01em;height:44px;padding:0 18px;outline:none;transition:background .2s}
.cform input::placeholder,.cform textarea::placeholder{color:#808080;opacity:1}
.cform input:focus,.cform textarea:focus{background:rgba(0,0,0,.14)}
.cform input:focus-visible,.cform textarea:focus-visible{box-shadow:0 0 0 1.5px #000}
.cform input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #e6e6e6 inset;-webkit-text-fill-color:#000}
.cform textarea{height:104px;padding:13px 18px;resize:none;border-radius:8px}   
.cform .send{display:block;width:100%;height:44px;margin-top:6px;border:0;border-radius:999px;background:#181818;color:#fff;font:inherit;font-size:14px;line-height:1.1;letter-spacing:-0.01em;cursor:pointer;transition:opacity .2s,box-shadow .35s var(--ease)}
.cform .send:not([disabled]):hover,.cform .send:focus-visible{box-shadow:-10px 0 18px -2px rgba(143,162,255,.55),10px 0 18px -2px rgba(255,181,154,.55),0 0 22px 0 rgba(214,162,255,.35)}
.cform .send[disabled]{opacity:.35;cursor:default}
.cform .call{display:block;margin:0;text-align:center;font-size:14px;line-height:1.1;letter-spacing:-0.01em;transition:color .2s}
.cform .call:hover{color:#5a5a5a}
.cform .call .u{position:relative;text-decoration:underline dotted;text-underline-offset:3px}
/* tooltip under the card: glass plate that rises out of a blur */
.cform .tip{position:absolute;left:0;right:0;top:calc(100% + 10px);padding:10px;border-radius:8px;z-index:3;pointer-events:none;
  background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 10px rgba(0,0,0,.2);
  color:#fff;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;
  opacity:0;filter:blur(8px);transform:translateY(-6px);transition:opacity .35s ease,filter .45s var(--ease),transform .45s var(--ease)}
.cform .tip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.24) 50%,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cform .tip b{display:block;font-weight:400}
.cform:has(.u:hover) .tip,.cform:has(.call:focus-visible) .tip{opacity:1;filter:blur(0);transform:none}
.cform{overflow:visible}
.cform .done p{margin:10px 0 0;font-weight:400;font-size:14px;line-height:1.3;color:#808080}
.cform .again{margin-top:20px;padding:0;border:0;background:none;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
@media (max-width:600px){.contact-sec{height:auto;min-height:100svh;display:flex;align-items:flex-end;padding:20px 20px 96px}.cform{position:relative;top:auto;left:auto;width:100%;max-width:none}}

/* footer reveal: the page slides up off the footer, which waits underneath */
.page-body{position:relative;z-index:1;background:var(--bg);transition:background-color .8s ease}
.foot{position:sticky;bottom:0;z-index:0;background:var(--bg)}
.foot.static{position:relative}
/* rainbow line along the bottom edge of the footer, slowly flowing */
.foot{padding-bottom:calc(20px + 6px)}
.foot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;
  background:linear-gradient(90deg,#f26a3d,#ee5f7d,#d86be0,#b38cff,#e9c46a,#f26a3d);background-size:200% 100%;
  animation:rainbow 9s linear infinite}
@keyframes rainbow{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.foot::after{animation:none}}
/* phone navigation: full logo + a dot button that opens a full-screen menu */
.mbtn,.mclose{display:none;width:32px;height:32px;margin:-9px -9px -9px 0;padding:9px;border:0;background:none;color:var(--ink);cursor:pointer}
.mbtn svg,.mclose svg{display:block;width:14px;height:14px}
.mbtn circle,.mclose circle{fill:currentColor}
.pillnav .of .full{display:none}
.mnav{position:fixed;inset:0;z-index:40;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;
  padding:calc(var(--edge) + env(safe-area-inset-top,0px)) var(--edge) calc(var(--edge) + env(safe-area-inset-bottom,0px));overflow:auto}
.mnav[hidden]{display:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:22px}
.mnav-logo img{display:block;height:12px;width:auto}
:root.dark .mnav-logo img{filter:invert(1)}
.mnav .mclose{display:block}
.mnav-links{margin-top:64px;display:flex;flex-direction:column;gap:6px}
.mnav-links a{font-weight:300;font-size:40px;line-height:1.1;letter-spacing:-0.03em}
.mnav-social{margin-top:auto;padding-top:48px;display:flex;flex-wrap:wrap;gap:8px}
.mnav-social > a{font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.mnav-social > a{padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.06)}
:root.dark .mnav-social > a{background:rgba(255,255,255,.1)}
html.menu-open,html.menu-open body{overflow:hidden}
@media (max-width:640px){
  .nav .menu{display:none}
  .nav .mbtn{display:block}
  .logo .full{display:block!important}.logo .sm{display:none!important}
  .pillnav .links{display:none}
  .pillnav .sep{display:none}
  .pillnav .of{margin-right:16px}
  .pillnav .mbtn{display:block;margin:-9px -8px -9px 0}
  .pillnav .of .sm{display:none}.pillnav .of .full{display:block}
  .pillnav{padding:10px 14px}
}
/* footer */
.foot{padding:74px var(--edge) 20px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.foot-top{display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px;align-items:start}
.foot-top .lead{grid-column:1 / 4}
.foot-top h2{margin:0;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em}   /* same as the hero title */
.foot-top .pill{margin-top:40px}
.foot-links{grid-column:4 / 6;display:grid;grid-template-columns:200px 200px 1fr}
.foot-links dl{margin:0}
.foot-links dt{color:#808080}
.foot-links dd{margin:0}
.foot-links a{transition:opacity .2s}
.foot-links a:hover,.foot-bottom a:hover,.foot-legal a:hover{opacity:.5}
.foot-mid{margin-top:249px;display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px;align-items:end}
.foot-legal{grid-column:1 / 3;color:#808080;display:flex;flex-direction:column}
.foot-mark{grid-column:3 / 6;display:block;width:100%;height:auto}
.foot-bottom{margin-top:20px;display:flex;justify-content:space-between;align-items:baseline}
.foot-bottom .copy{color:#808080}
.foot-bottom .social{display:flex;gap:20px}
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr;row-gap:56px}.foot-top .lead,.foot-links{grid-column:1}
  .foot-links{grid-template-columns:1fr 1fr;row-gap:32px}
  .foot-top h2{font-size:40px}
  .foot-mid{margin-top:120px;grid-template-columns:1fr;row-gap:32px}.foot-legal,.foot-mark{grid-column:1}.foot-legal{order:2}
}

/* case chips: sit at the top of the picture, arrive one by one out of a blur on hover */
.case .media{position:relative}
.case .chips{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none;z-index:1}
.case .chips span{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.85);color:#000;font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;
  opacity:0;filter:blur(6px);transform:translateY(6px);transition:opacity .25s ease,filter .25s ease,transform .25s ease}
.case:hover .chips span{opacity:1;filter:blur(0);transform:none;transition:opacity .5s var(--ease),filter .6s var(--ease),transform .6s var(--ease)}
@media (hover:none){.case .chips span{opacity:1;filter:none;transform:none}}
.case:hover .chips span:nth-child(2){transition-delay:.07s}
.case:hover .chips span:nth-child(3){transition-delay:.14s}
.case:hover .chips span:nth-child(4){transition-delay:.21s}

/* reveal: GSAP brings these in (see the motion script); hidden until then so nothing flashes */
.js .reveal,.js .rise{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.js .reveal,.js .rise{opacity:1;visibility:visible}}
/* card hover: a gentle zoom of the picture inside its mask */
.case .media img,.case .media video,.jcard .media img{transition:transform .7s cubic-bezier(.16,1,.3,1)}   /* = gsap expo.out */
.case:hover .media img,.case:hover .media video,.jcard:hover .media img{transform:scale(1.07)}
@media (max-width:640px){
  :root{--card-h:clamp(180px, 30svh, 280px)}   /* a third smaller than before: the title sits above, the bar below */
  .hero{padding-bottom:110px}   /* phones: the works end above the Ask bar; nothing after them */
  .statement{order:-1;display:flex;flex-direction:column;padding:70px var(--edge) 24px;text-align:left;margin-top:0}   /* phones: left-aligned, the title first, the line under it */
  .statement .sub{order:1;margin:16px 0 0;max-width:none}
  .statement .trusted{display:none}
  .intro .facts{width:100%;flex-direction:column;gap:0}
  .intro .facts li + li{margin:16px 0 0}
  .intro h2{font-size:34px}
  .intro > p{margin-left:0}
  body:has(.ask-slot) .strip{flex:1;height:auto;margin-top:0;align-items:flex-end}
  :root:not(.scrolled) body:has(.ask-slot) .nav{opacity:1;pointer-events:auto}   /* phones keep the nav: there is no pill nav to take over */
  .hero{padding-top:42px}
  .statement h1{font-size:44px}
  .statement h1 > span{white-space:normal}   /* phones: the lines wrap */
  .statement .sub{margin-left:0;max-width:none}
  .statement .clients{display:none}
  .ask-slot{display:none}
  body:has(.ask-slot) .nav{padding:var(--edge) var(--edge) 0;justify-content:space-between}
  body:has(.ask-slot) .nav .logo{margin-right:0}
    .intro{padding:40px var(--edge) 96px;text-align:left}   /* the hero already leaves room under the works */
  .intro > p{margin:0}
  .clients{margin-top:72px}
  .work{padding-top:16px}
  .rows{margin-top:28px}
  .services{padding-top:16px}
  .journal{padding-top:16px}
  .foot{padding-top:56px}
}
a,button{-webkit-tap-highlight-color:transparent}
@media (max-width:420px){
  .menu{gap:14px}
}
@media (prefers-reduced-motion:reduce){.contact svg circle,.pill svg circle{animation:none!important}}
@media (max-width:640px){
  /* footer, phone order: title, button, links, wordmark, social, legal pages, copyright */
  .foot{display:flex;flex-direction:column}
  .foot-mid,.foot-bottom{display:contents}
  .foot-top{order:1}
  .foot-mark{order:2;margin-top:96px}
  .foot-bottom .social{order:3;margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
  .foot-bottom .social a{padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.06);font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
  .foot-legal{order:4;margin-top:28px}
  .foot-bottom .copy{order:5;margin-top:12px}
}

/* ===== work page ===== */
.page-head{padding:290px var(--edge) 0}   /* 42 nav + 248 */
.page-head h1{margin:0;max-width:none;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em}   /* same as the other big titles */
.filters{margin:74px var(--edge) 0;padding-bottom:20px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 28px}
.filters button{padding:0;border:0;background:none;font:inherit;font-size:14px;line-height:1.1;letter-spacing:-0.01em;color:#808080;cursor:pointer;transition:color .3s var(--ease)}
.filters button:hover,.filters button.on{color:var(--ink)}
.wgrid{padding:40px var(--edge) 148px;display:grid;grid-template-columns:repeat(3,1fr);gap:60px 20px;align-items:start}
/* dynamic grid: every card keeps its own proportion, cards in a row line up at the top */
.wgrid .case .media{aspect-ratio:var(--ar,453/340)}
.wlist{padding:0 var(--edge) 148px}   /* the grid above already leaves 148px */
.wlist h2{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.wlist .sub{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.wrows{margin-top:40px}
.wrow{display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px;align-items:baseline;padding:8px 0}
.wrow .n{grid-column:1 / 3;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.wrow .n a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.14em;transition:text-decoration-color .3s}.wrow .n a:hover{text-decoration-color:currentColor}
.wrow .k{grid-column:3 / 5;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.wrow .y{grid-column:5;justify-self:end;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.wlist .more{margin:24px 0 0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
@media (max-width:900px){.wgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .page-head{padding-top:112px}.page-head h1{font-size:38px}
  .filters{margin:64px 0 0;padding:0 var(--edge) 20px;flex-wrap:nowrap;gap:20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none;white-space:nowrap}
  .wgrid{grid-template-columns:1fr;gap:40px}
  .wgrid{padding-bottom:96px}
  .wlist{padding:0 var(--edge) 96px}
  .wrow{grid-template-columns:1fr auto;row-gap:2px}.wrow .n{grid-column:1}.wrow .y{grid-column:2;grid-row:1}.wrow .k{grid-column:1 / -1}
}

/* black footer (Work page) */
.foot.inverse{--bg:#000;--ink:#fff;background:#000;color:#fff}
.foot.inverse .foot-mark{filter:invert(1)}
@media (max-width:640px){.foot.inverse .foot-bottom .social a{background:rgba(255,255,255,.1)}}

/* page transitions are scripted (site.js): the pieces leave into a blur and the next page's pieces arrive out of one.
   Prefetch on hover (speculation rules in <head>) makes the new page ready before the click lands. */

/* split titles: words keep together, letters animate on their own */
.sw{display:inline-block;white-space:nowrap}
.sc{display:inline-block;will-change:opacity,filter}

/* preloader: the nine dots light up while the first screen loads */
.preload{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);color:var(--ink)}
.preload .pin{display:flex;align-items:center;gap:12px}
.preload svg{width:28px;height:28px}
.preload .pnum{min-width:3.2em;font-size:14px;line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.preload circle{fill:currentColor;opacity:.15}
.no-preload .preload{display:none}

/* ===== about page ===== */
:root{--line:rgba(0,0,0,.1)}
:root.dark,.foot.inverse{--line:rgba(255,255,255,.16)}   /* rules: 10% black on white, 16% white on black — 1px everywhere */
.about-head h1{max-width:none}
.sandfield{margin-top:74px;height:100vh;height:100svh;position:relative;background:#000;overflow:hidden}
.sandfield canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:blur(0.4px);touch-action:pan-y}   /* same grain as the contact block */
.about-intro{padding:148px var(--edge) 0}
.about-intro p{margin:0;max-width:700px;font-weight:300;font-size:20px;line-height:1.3;letter-spacing:-0.01em}
.about-intro p + p{margin-top:1.3em}
.about-strip{--card-h:clamp(320px,min(57.6vw,100svh - 200px),830px);margin-top:148px;flex:none;height:var(--card-h)}   /* twice the home gallery height */
.offers{margin-top:148px;border-top:1px solid var(--line);padding:0 var(--edge);display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px}
/* the side column runs the full height of the list: the title sticks 20px from the top, the preview 20px from the bottom */
.offers-side{grid-column:1 / 3;display:flex;flex-direction:column;align-self:stretch;padding:20px 0}
.offers-side > h2{position:sticky;top:20px}
.ospacer{flex:1;min-height:40px}
.opreview{position:sticky;bottom:20px}
.offers h2,.approach h2,.team h2{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.opreview{width:min(548px,100%);aspect-ratio:1248/1140;border-radius:12px;overflow:hidden;background:#1a1a1a}
.opreview img{display:block;width:100%;height:100%;object-fit:cover}
.offers-list{grid-column:4 / 6;padding:20px 0}
.ogroup + .ogroup{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}   /* same divider as Approach, 20px each side */
.olabel{margin:0 0 12px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.olabel a{color:inherit;transition:color .3s var(--ease)}.olabel a:hover{color:var(--ink)}
.offers-list ul{list-style:none;margin:0;padding:0}
.oitem{font-weight:400;font-size:28px;line-height:1.3;letter-spacing:-0.01em;color:#808080;transition:color .4s var(--ease)}
.oitem.on{color:var(--ink)}
.oitem a{color:inherit}.oitem a:hover{color:var(--ink)}
.approach{margin-top:148px;border-top:1px solid var(--line);padding:20px var(--edge) 0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px}
.approach h2{grid-column:1 / 3}
.alist{grid-column:4 / 6;list-style:none;margin:0;padding:0}
.alist li{padding:20px 0;border-top:1px solid var(--line);font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.alist li:first-child{border-top:0;padding-top:4px}
.team{margin-top:148px;border-top:1px solid var(--line);padding:20px var(--edge) 0}
.tgrid{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tcard{aspect-ratio:100/99;padding:20px;border-radius:var(--r-big);display:flex;flex-direction:column;justify-content:space-between;background:transparent;transition:background-color .35s var(--ease)}
.tcard:hover{background:rgba(0,0,0,.1)}
.tno{margin:0;align-self:flex-start;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:#fff;font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}   /* the same tag as under the cases */
.tname h3{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.tname p{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.network{margin-top:148px;padding:0 var(--edge)}
.network p{margin:0;max-width:622px;font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.about-work{margin-top:148px}
.about-work{padding-bottom:148px}
@media (max-width:900px){
  .offers,.approach{grid-template-columns:1fr}
  .offers-side{grid-column:1;padding:20px 0 0}
  .offers-side h2{position:static}.ospacer{display:none}
  .opreview{display:none}
  .offers-list,.alist,.approach h2{grid-column:1}
  .offers-list{padding-bottom:0}
  .alist{margin-top:24px}
  .tgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .about-head{padding-top:162px}
  .sandfield{margin-top:48px;height:100svh}
  .about-intro{padding-top:96px}
  .about-intro p{font-size:20px}
  .about-strip,.offers,.approach,.team,.about-work{margin-top:96px}
  .about-work{padding-bottom:96px}
  .oitem{font-size:20px}
  .tgrid{grid-template-columns:1fr 1fr;gap:8px}
  .tcard{aspect-ratio:100/85;padding:14px;background:rgba(0,0,0,.04)}
  .network p{font-size:20px}
}

/* offerings pinned on desktop: the block holds one screen while the scroll steps through the items */
.offers.pinned{height:100vh;height:100svh;overflow:hidden}
.offers.pinned .offers-side{height:100%;align-self:stretch}
.offers.pinned .offers-list{will-change:transform}

/* about: belief, outcomes, questions */
.belief{margin-top:148px;padding:0 var(--edge)}
.belief p{margin:0;max-width:980px;font-weight:300;font-size:36px;line-height:1.15;letter-spacing:-0.02em}
.offers-side .ohead{position:sticky;top:20px}
.offers-side .ohead h2{position:static}
.outcomes{list-style:none;margin:12px 0 0;padding:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.faq{margin-top:148px;border-top:1px solid var(--line);padding:20px var(--edge) 0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px}
.faq h2{grid-column:1 / 3;margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.flist{grid-column:4 / 6;list-style:none;margin:0;padding:0}
.flist li{padding:20px 0;border-top:1px solid var(--line)}
.flist li:first-child{border-top:0;padding-top:4px}
.flist h3{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em}
.flist p{margin:6px 0 0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080;max-width:46em}
@media (max-width:900px){.faq{grid-template-columns:1fr}.faq h2,.flist{grid-column:1}.flist{margin-top:24px}}
@media (max-width:640px){.belief,.faq{margin-top:96px}.belief p{font-size:26px}.offers-side .ohead{position:static}}

/* about offerings on phones (after mad.ac/approach): pinned and stepped like desktop — the list glides under the
   heading (which has no ground of its own), the first item is lit from the start, and the lit item's picture sits at the bottom right over the list */
@media (max-width:900px){
  .offers.pinned{position:relative;grid-template-rows:auto 1fr;align-content:start}
  .offers.pinned .offers-side{display:contents}
  .offers.pinned .ohead{position:relative;z-index:2;top:0;padding:64px 0 16px}   /* no ground: the grey list slides under the heading, as on mad.ac */
  .offers.pinned .offers-list{padding:4px 0 0;position:relative;z-index:1}
  .offers.pinned .opreview{display:block;position:absolute;z-index:3;right:var(--edge);bottom:20px;
    width:min(66%,360px);pointer-events:none}
}

/* about team on phones (after mad.ac): one card per screen, swiped sideways, dots under it */
.tdots{display:none}
@media (max-width:760px){
  .tdots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:20px;position:relative;z-index:16}
  .svc-cards + .tdots,.jcards + .tdots{margin-top:24px}

  .tdots button{width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(0,0,0,.2);cursor:pointer;
    transition:width .4s var(--ease),background-color .4s var(--ease)}
  .tdots button.on{width:32px;background:var(--ink)}
}
@media (max-width:640px){
  .tgrid{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:40px calc(-1 * var(--edge)) 0;padding:0 var(--edge);scroll-padding:0 var(--edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tgrid::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 calc(100vw - 2 * var(--edge));aspect-ratio:800/935;padding:20px;scroll-snap-align:start}
}

/* one H2 on phones (More work excepted): every section heading, the contact card and the footer line at 28 / 1.1 */
@media (max-width:640px){
  h2:not(.wlist h2):not(.cs-head h2){font-size:28px!important;line-height:1.1!important;font-weight:400!important;letter-spacing:-0.01em!important}
  /* More work stays a label, the same size as its subline, as on desktop */
}

/* testimonials on phones: dots instead of the arrows, like the team slider (light on the dark block) */
.vdots{display:none}
@media (max-width:640px){
  .voices .arrows{display:none}
  .vdots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;position:relative;z-index:16}
  .vdots button{width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.25);cursor:pointer;
    transition:width .4s var(--ease),background-color .4s var(--ease)}
  .vdots button.on{width:32px;background:#fff}
}

/* Get in touch card (after mad.ac): white, under the button that opened it; 328 wide, 20 inside */
.gcard{position:fixed;z-index:40;width:328px;max-width:calc(100vw - 24px);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.08);font-size:12px;line-height:1.3;letter-spacing:-0.01em;
  opacity:0;filter:blur(8px);transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .35s ease,filter .45s var(--ease),transform .45s var(--ease);outline:none}
.gcard.up{transform-origin:bottom right;transform:translateY(8px) scale(.98)}
.gcard.on{opacity:1;filter:none;transform:none}
.gcard.from-pill{transform-origin:top center}
.gcard a{color:inherit;text-decoration:none;transition:opacity .2s}
.gcard a:hover{opacity:.5}
.g-intro{margin:0;padding:20px 20px 0}
.g-dots{display:block;width:100%;height:250px;margin-top:20px;touch-action:pan-y;cursor:crosshair}
.g-info{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding:20px}
.g-col{display:flex;flex-direction:column;gap:10px}
.g-l,.g-v{display:block}
.g-l{color:#808080}
.g-foot{display:flex;justify-content:space-between;align-items:center;padding:20px;border-top:1px solid rgba(0,0,0,.1);color:#808080}
.g-legal{display:flex;gap:16px}
@media (max-width:640px){.gcard{width:auto;max-width:none;transform-origin:top center}.g-dots{height:220px}}
@media (prefers-reduced-motion:reduce){.gcard{filter:none;transform:none;transition:opacity .2s}}

/* Journal page: like Work without the filters — a rule, then the articles in four columns */
.journal-page{margin-top:74px;border-top:1px solid var(--line);padding:20px var(--edge) 148px}
.journal-page .jcards{margin-top:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px;align-items:start}
.journal-page .jcard{width:auto}
.journal-page .jcard .media{height:auto;aspect-ratio:335/var(--hn)}
@media (max-width:900px){.journal-page .jcards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.journal-page{margin-top:48px;padding-bottom:96px}}

/* Journal: warm magazine paper with a grain you feel more than see (≈4%). The grain rides on the page and the
   footer with a fixed attachment, so the two read as one sheet. Cards, the pill nav and form fields stay white. */
:root.paper{--bg:#F1EEE7;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");background:#F1EEE7}
:root.paper body,:root.paper .page-body,:root.paper .foot{background-color:var(--bg);background-image:var(--grain);background-attachment:fixed}
:root.paper .jcard .media{background:#E4E0D6}

/* in the Get in touch card, under the time: clip and record side by side, 10 apart, filling the column */
.gside{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-clipwrap{min-width:0}
.g-clip{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#1a1a1a}
.g-clip video{display:block;width:100%;height:100%;object-fit:cover}
.g-vinyl{aspect-ratio:1}
.g-vinyl .disc{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;
  background:var(--cover) center/cover no-repeat;animation:spin 1.8s linear infinite;animation-play-state:paused}
/* faint grooves over the art; the art carries its own spindle hole */
.g-vinyl .disc::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;
  -webkit-mask:radial-gradient(circle,transparent 16%,#000 16.5%);mask:radial-gradient(circle,transparent 16%,#000 16.5%)}
.g-vinyl.spin .disc{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.g-vinyl .disc{animation:none}}

/* phones: the Get in touch card sits in the menu under the links, in place of the social pills */
.g-play,.g-menu-end{display:none}
/* phones: the card's content sits in the menu itself, on the menu's ground, under a 10% rule (after mad.ac):
   intro · the O · time | clip | record with Play · rule · Book a free consultation · the social pills */
.mnav-social.has-card{display:flex;flex-wrap:wrap;gap:8px;padding-top:40px}
.gcard.in-menu{flex:0 0 100%;position:static;width:auto;max-width:none;opacity:1;filter:none;transform:none;transition:none;
  background:none;color:inherit;box-shadow:none;border-radius:0;overflow:visible;border-top:1px solid var(--line);
  font-size:14px;padding-top:20px;margin-bottom:12px}
.gcard.in-menu .g-intro{padding:0}
.gcard.in-menu .g-dots{margin:20px calc(-1 * var(--edge)) 0;width:calc(100% + 2 * var(--edge));height:260px}
.gcard.in-menu .g-info{padding:20px 0}
.gcard.in-menu .g-info .g-col:last-child{display:none}
.gcard.in-menu .g-info{grid-template-columns:1fr}
.gcard.in-menu .g-info .g-col:first-child{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:start}
.gcard.in-menu .gside{display:contents}
.gcard.in-menu .g-vinyl{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.gcard.in-menu .g-vinyl .disc{width:100%;height:auto;aspect-ratio:1}
.gcard.in-menu .g-clipwrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.gcard.in-menu .g-clipwrap .g-clip{width:100%}
/* round icon buttons under the clip and the record: play at rest, pause while it runs */
.gcard.in-menu .g-play{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid color-mix(in srgb,currentColor 20%,transparent);
  border-radius:50%;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-play svg{width:12px;height:12px;fill:currentColor}
.g-play .i-pause,.g-play.on .i-play{display:none}
.g-play.on .i-pause{display:inline}
.gcard.in-menu .g-menu-end{display:block;border-top:1px solid var(--line);padding-top:20px}
.gcard.in-menu .g-big{display:inline-block;font-weight:300;font-size:40px;line-height:1.1;letter-spacing:-0.03em;
  text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:.14em}   /* the rule colour: 10% on light, 16% on dark */
.gcard.in-menu .g-foot{display:none}

/* the floating pill, everywhere: full wordmark + a round button (6 / 10 / 6 around, 20 between) that opens the menu —
   on desktop the Get in touch card with the links on top, on phones the full-screen menu */
.pillnav{padding:6px 6px 6px 10px}
.pillnav .links,.pillnav .sep,.pillnav .of .sm{display:none}
.pillnav .of .full{display:block}
.pillnav .of{margin-right:20px}
.pillnav .mbtn{display:grid}
.pillnav .mbtn{place-items:center;width:32px;height:32px;margin:0;padding:0;border-radius:50%;background:#000;color:#fff;transition:background-color .8s ease,color .8s ease}
.pillnav .mbtn svg{width:14px;height:14px}
.pillnav .mbtn:hover svg circle,.pillnav .mbtn:focus-visible svg circle,.pillnav .mbtn[aria-expanded="true"] svg circle{animation:twinkle 1.1s ease-in-out infinite;animation-delay:var(--d)}
:root.dark .pillnav .mbtn{background:#fff;color:#000}
.pillnav .mbtn .d4{display:none}
/* phones keep the plain 4-dot menu icon, no round ground (same as the top bar) */
@media (max-width:640px){.pillnav{padding:10px 14px}.pillnav .of{margin-right:16px}
  .pillnav .mbtn,:root.dark .pillnav .mbtn{width:32px;height:32px;margin:-9px -8px -9px 0;padding:9px;border-radius:0;background:none;color:var(--ink)}
  .pillnav .mbtn .d9{display:none}.pillnav .mbtn .d4{display:block}}
/* the card's own menu, 14px, over a 10% rule; not in the phone menu, which has its links already */
.g-nav{display:flex;flex-direction:column;gap:4px;padding:20px;border-bottom:1px solid rgba(0,0,0,.1);font-size:14px;line-height:1.3}
.gcard.in-menu .g-nav{display:none}

/* Arsen's team card: a sand portrait under the text */
.tcard.has-sand{position:relative;overflow:hidden;cursor:crosshair}
.tcard .tsand{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-x pan-y}
.tcard.has-sand > :not(.tsand){position:relative;z-index:1}

/* team cards with a mouse: the talents tag shows on hover (it arrives out of a blur, like everything else) */
@media (hover:hover){
  .tcard .tno{opacity:0;filter:blur(4px);transform:translateY(4px);transition:opacity .35s ease,filter .45s var(--ease),transform .45s var(--ease)}
  .tcard:hover .tno{opacity:1;filter:none;transform:none}
}

/* the drum drawn by WebGL: one canvas over the strip; the DOM cards stay for layout and dragging, unseen */
.strip{position:relative}
.strip-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.strip.gl .track .card{opacity:0}

/* Journal article (after afternow.co/journal): two halves. The left one — back link, title, date, share — stays put
   while the article runs on the right (cover, lead, text); then more articles. Our type system throughout. */
.post{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:112px var(--edge) 0;align-items:start}
.post-left{align-self:stretch}
.post-stick{position:sticky;top:112px;min-height:calc(100vh - 132px);   /* sticks where it starts (112 down), share always 20 above the screen bottom */
  display:flex;flex-direction:column;justify-content:space-between;gap:74px}
.post-back{display:inline-block;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080;transition:color .2s}
.post-back:hover{color:var(--ink)}
.post-left h1{margin:20px 0 0;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em}
.post-sub{margin:20px 0 0;max-width:620px;font-weight:300;font-size:20px;line-height:1.3;letter-spacing:-0.01em}
.post-meta{margin:40px 0 0;display:flex;flex-wrap:wrap;gap:4px}
/* date and reading time as tags, like the chips on the cases */
.ptag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:rgba(0,0,0,.06);font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.post-cover{margin:0;border-radius:var(--r-big);overflow:hidden;background:#E4E0D6}
.post-cover img{display:block;width:100%;height:auto}
.post-body{max-width:720px;margin-top:40px;font-weight:300;font-size:18px;line-height:1.4;letter-spacing:-0.01em}   /* the article text style: 18 Light 1.4 (only here) */
.post-body > *{margin:0}
.post-body > * + *{margin-top:20px}
.post-body h2{margin-top:40px;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.post-body h2 + *{margin-top:20px}
.post-body strong{font-weight:400;color:var(--ink)}   /* Regular on Light, no marker */
.post-body a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .3s}
.post-body a:hover{text-decoration-color:currentColor}
.post-body ul{padding-left:1.1em}
.post-body li + li{margin-top:8px}
.post-share h3{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.ps-row{display:flex;gap:8px;margin-top:10px}
.ps{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink);cursor:pointer;transition:background-color .3s}
.ps:hover{background:rgba(0,0,0,.12)}
.ps svg{width:16px;height:16px}
.ps.done{background:var(--ink);color:var(--bg)}
.post-more{margin-top:148px;border-top:1px solid var(--line);padding:20px var(--edge) 148px}
.pm-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.post-more h2{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.post-more .jcards{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px;align-items:start}
.post-more .jcard{width:auto}
.post-more .jcard .media{height:auto}
.jlink{display:block;color:inherit}
.jlink:hover .media img{transform:scale(1.03)}
@media (max-width:900px){
  .post{grid-template-columns:1fr}
  .post-stick{position:static;min-height:0;gap:40px}
  .post-right{margin-top:48px}
  .post-more .jcards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .post-left h1{font-size:38px}
  .post-sub{font-size:20px}
  .post-body{margin-top:48px}
  .post-more{margin-top:96px;padding:20px var(--edge) 96px}
}

.ps{position:relative}
.ps-tip{position:absolute;left:50%;top:calc(100% + 8px);padding:2px 4px;border-radius:5px;background:rgba(0,0,0,.06);color:var(--ink);   /* a tag: like the chips on the cases */
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
  opacity:0;filter:blur(4px);transform:translate(-50%,-4px);transition:opacity .3s ease,filter .4s var(--ease),transform .4s var(--ease)}
.ps-tip.on{opacity:1;filter:none;transform:translate(-50%,0)}

/* pictures inside an article: the width of the text, rounded like the cover, a tag under each */
.post-body .post-fig{margin-top:40px}
.post-body .post-fig + p,.post-body .post-fig + .post-fig{margin-top:40px}
.post-fig img{display:block;width:100%;height:auto;border-radius:var(--r-big);background:#E4E0D6}
.post-fig figcaption{margin-top:12px}
.post-body ol{padding-left:1.2em}
.post-body .post-sign{margin-top:40px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}

.post-body a.post-apply{text-decoration:none;color:var(--bg)}   /* the article's link colour must not reach the pill */

/* article pages: no bottom blur — it would blur the sticky share row */

/* Case page (after mad.ac/work): the work runs full width down the page; a small panel stays bottom-left with the
   title, project info and a Description that opens on click; it steps aside when the next case comes up. */
.cs-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-media{padding:64px 10px 0;   /* 20 below the nav bar (it ends at ~44); 10 to the screen edges */
  display:flex;flex-direction:column;gap:10px}
.cs-row{display:grid;gap:10px}
.cs-2{grid-template-columns:1fr 1fr}
.cs-3{grid-template-columns:1fr 1fr 1fr}
.cs-m{margin:0;border-radius:var(--r-big);overflow:hidden;background:#ececec}
.cs-m img,.cs-m video{display:block;width:100%;height:auto}
.cs-empty{aspect-ratio:16/9}
.cs-2 .cs-empty{aspect-ratio:4/5}
.cs-next{margin-top:148px;border-top:1px solid var(--line);padding:20px var(--edge) 148px}
/* next project: tag, name, and a round button at the end of the row whose dots twinkle on hover */
.cs-next-link{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label label" "name btn";align-items:center;row-gap:10px}
.cs-next-label{grid-area:label;justify-self:start;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:rgba(0,0,0,.06);font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.cs-next-name{grid-area:name;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em}
.cs-next-btn{grid-area:btn;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg)}
.cs-next-btn svg{width:14px;height:14px;fill:currentColor}
.cs-next-link:hover .cs-next-btn svg circle,.cs-next-link:focus-visible .cs-next-btn svg circle{animation:twinkle 1.1s ease-in-out infinite;animation-delay:var(--d)}
.cs-panel{position:fixed;left:var(--edge);bottom:var(--edge);z-index:30;width:328px;max-width:calc(100vw - 2 * var(--edge));
  border-radius:12px;overflow:hidden;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.08);color:#000;font-size:12px;line-height:1.3;letter-spacing:-0.01em;
  transition:opacity .4s ease,transform .5s var(--ease),filter .5s var(--ease)}
.cs-panel.tuck{opacity:0;transform:translateY(calc(100% + var(--edge)));pointer-events:none}   /* scrolling down: slides out below the screen */
.cs-panel.away,.cs-panel.pre{opacity:0;filter:blur(6px);transform:translateY(12px);pointer-events:none}   /* pre: before it comes in and while the page leaves */
.cs-head{padding:20px;font-size:14px}
.cs-head h2{margin:0;font-weight:400;font-size:14px;line-height:1.3}
.cs-head p{margin:0;color:#808080}
.cs-info{margin:0;display:grid;gap:4px}
.cs-info div{display:flex;justify-content:space-between;gap:20px}
.cs-info dt{color:#808080}
.cs-info dd{margin:0;text-align:right}
.cs-acc-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 20px;border:0;border-top:1px solid rgba(0,0,0,.1);
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cs-pm{position:relative;width:10px;height:10px}
.cs-pm::before,.cs-pm::after{content:"";position:absolute;left:0;top:4.5px;width:10px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.cs-pm::after{transform:rotate(90deg)}
.cs-acc-btn[aria-expanded="true"] .cs-pm::before{transform:rotate(45deg)}
.cs-acc-btn[aria-expanded="true"] .cs-pm::after{transform:rotate(135deg)}
.cs-acc-body{max-height:0;overflow:hidden;padding:0 20px;opacity:0;
  transition:max-height .55s cubic-bezier(.4,0,.2,1),padding .55s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.cs-acc-body.open{padding:0 20px 16px;opacity:1;transition:max-height .55s cubic-bezier(.4,0,.2,1),padding .55s cubic-bezier(.4,0,.2,1),opacity .45s ease .1s}
.cs-acc-body.open.settled{overflow:auto}   /* the height itself is set from JS: to exactly its content (capped), so short and long panels open at the same pace */
.cs-acc-body p{margin:0 0 10px}
.cs-acc-body{color:#808080}
.cs-acc-body .cs-sub{margin-top:16px}
.cs-acc-body ul{margin:0 0 10px;padding-left:1.1em}
.cs-info dd{color:#000}
.cs-acc-body a{text-decoration:underline;text-decoration-color:rgba(0,0,0,.1);text-underline-offset:.2em}
.case-link{display:block;color:inherit}
@media (max-width:640px){
  .cs-2,.cs-3{grid-template-columns:1fr}
  .cs-panel{left:10px;right:10px;bottom:10px;width:auto;max-width:none}
  .cs-next{margin-top:96px;padding:20px var(--edge) 180px}
  .cs-next-name{font-size:38px}
}

/* legal pages: the article text style in the article column */
.legal{margin-top:74px;border-top:1px solid var(--line);padding:40px var(--edge) 148px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.legal .post-body{grid-column:2 / 5;margin-top:0}
@media (max-width:900px){.legal{grid-template-columns:1fr}.legal .post-body{grid-column:1}}
@media (max-width:640px){.legal{margin-top:48px;padding-bottom:96px}}

/* 404 */
.nf{min-height:70vh}
.nf-sub{margin:20px 0 0;max-width:620px;font-weight:300;font-size:20px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.nf .pill{margin-top:40px}
@media (max-width:640px){.nf-sub{font-size:20px}}

/* service and sector pages (tools/build-services.py): label in the first column, content in 2–4, like the legal pages */
.sv-crumb{margin:0 0 20px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080;display:flex;gap:8px}
.sv-crumb a{transition:color .3s var(--ease)}.sv-crumb a:hover{color:var(--ink)}
.sv{margin-top:74px;border-top:1px solid var(--line);padding:40px var(--edge) 0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px;row-gap:0;align-items:start}
.sv > h2{grid-column:1;margin:0 0 96px;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.sv-body{grid-column:2 / 5;margin:0 0 96px;padding:0}
.sv-lede{grid-column:2 / 5;margin-bottom:96px}
.sv-lede p{margin:0;font-weight:300;font-size:28px;line-height:1.25;letter-spacing:-0.01em}
.sv-list,.sv-links{list-style:none;font-size:28px;line-height:1.3;letter-spacing:-0.01em}
.sv-list li{color:var(--ink)}
.sv-links a{color:#808080;transition:color .3s var(--ease)}.sv-links a:hover{color:var(--ink)}
.sv-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sv-steps h3{margin:0 0 12px;font-weight:400;font-size:18px;line-height:1.2;letter-spacing:-0.01em}
.sv-steps p{margin:0;font-size:15px;line-height:1.35;color:#808080}
.sv-faq details{border-top:1px solid var(--line)}
.sv-faq details:last-child{border-bottom:1px solid var(--line)}
.sv-faq summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;position:relative;font-size:20px;line-height:1.3;letter-spacing:-0.01em}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:"+";position:absolute;right:0;top:18px;color:#808080;transition:transform .4s var(--ease)}
.sv-faq details[open] summary::after{transform:rotate(45deg)}
.sv-faq p{margin:0;padding:0 0 20px;max-width:640px;font-size:14px;line-height:1.4;color:#808080}
.sv-work{padding:0 0 0}
.sv-work .sec-head{padding:0 var(--edge);align-items:center}
.sv-work .sec-head .pill{margin-top:0 !important}
.sv-work > h2,.sv-work .sec-head h2{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.sv-work .wgrid{padding-top:20px;padding-bottom:96px}
.sv-end{margin-top:0}
.sv-end > :last-child{margin-bottom:148px}
@media (max-width:900px){
  .sv{grid-template-columns:1fr;margin-top:56px}
  .sv > h2{margin-bottom:16px}
  .sv-body,.sv-lede{grid-column:1;margin-bottom:64px}
  .sv-lede p{font-size:20px}
  .sv-list,.sv-links{font-size:20px}
  .sv-steps{grid-template-columns:1fr;gap:24px}
  .sv-faq summary{font-size:18px}
  .sv-end > :last-child{margin-bottom:96px}
}
/* service pages: numbered offerings */
.sv-offers{list-style:none}
.sv-offers li{display:grid;grid-template-columns:48px 1fr;column-gap:20px;padding:20px 0;border-top:1px solid var(--line);scroll-margin-top:160px}
.sv-offers li:last-child{border-bottom:1px solid var(--line)}
.sv-offers .sv-n{grid-row:1 / 3;font-weight:400;font-size:14px;line-height:1.9;color:#808080;font-variant-numeric:tabular-nums}
.sv-offers h3{margin:0;font-weight:400;font-size:28px;line-height:1.2;letter-spacing:-0.01em}
.sv-offers p{margin:8px 0 0;max-width:560px;font-size:14px;line-height:1.4;color:#808080}
.sv-offers li:target h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
/* services hub: one black card per pillar — 760px (about 80vh), 20px inside, radius 10 */
/* services hub: one service on screen at a time. The deck is N screens tall; the stage sticks for the ride and the
   slides crossfade through a blur as you scroll (site.js sets --p). Dots on the left say where you are. */
.page-head--center{text-align:center}
.page-head--center h1{margin:0 auto;max-width:1120px;text-wrap:balance}
/* services hub: one stage, the height of the first screen. The names in the first two columns (52px, like the page
   titles): the active one is ink, the rest grey; every four seconds the next one takes over. The picture in the third column, the offerings, the line and the button in the last two.
   The panels stack on one grid cell and crossfade: the leaving picture goes out of focus and grows, the next one
   arrives sharp from a little smaller; the rows come up one after another. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the picture sits exactly in the middle of the page (equal columns either side of it); the names and the rows start on its top edge */
.sv-stage{--art:min(556px,36vw);position:relative;min-height:100svh;padding:42px var(--edge) 0;display:grid;grid-template-columns:minmax(0,1fr) var(--art) minmax(0,1fr);column-gap:20px;align-items:start;align-content:center}   /* the group sits in the middle of the first screen */
/* the light behind the stage: the service's own picture, huge and out of focus, like light off a screen; it crossfades
   with the service and fades to nothing toward the top and the bottom of the block */
.sv-glow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(transparent,#000 22%,#000 72%,transparent);mask:linear-gradient(transparent,#000 22%,#000 72%,transparent)}
.sv-glow img{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%) scale(1.3);object-fit:cover;filter:blur(90px) saturate(1.3);opacity:0;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.sv-glow img.on{opacity:.32;transform:translate(-50%,-50%) scale(1.4)}
:root.dark .sv-glow img.on{opacity:.3}
@media (max-width:900px){.sv-glow{display:none}}
.sv-names{grid-column:1;list-style:none;margin:-8px 0 0;padding:0}   /* -8: the cap height sits on the picture's edge, not the line box */
.sv-name{display:block;margin:0;padding:0;border:0;background:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;
  font:inherit;font-weight:300;font-size:52px;line-height:1.1;letter-spacing:-0.03em;color:#c4c4c4;transition:color .5s var(--ease)}
.sv-name:focus-visible{outline:0;color:#8a8a8a}
/* hovering a name shows that service (as the offerings on About and the services on the home page); a click or a tap pins it */
.sv-name[aria-pressed="true"]{color:var(--ink);cursor:default}
:root.dark .sv-name{color:#4a4a4a}
.sv-view{grid-column:2 / 4;display:grid}
.sv-panel{grid-area:1 / 1;display:grid;grid-template-columns:var(--art) minmax(0,1fr);column-gap:20px;align-items:start;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.sv-panel.is-on{opacity:1;pointer-events:auto}
.sv-art{grid-column:1;aspect-ratio:1248 / 1140;border-radius:var(--r-big);overflow:hidden;background:#ececec}
.sv-art img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(.96);filter:blur(8px);transition:transform .8s var(--ease),filter .8s var(--ease)}
.sv-panel.is-on .sv-art img{transform:none;filter:none}
.sv-panel.is-off .sv-art img{transform:scale(1.06);filter:blur(10px)}
.sv-side{grid-column:2;padding-left:64px;margin-top:-5px}
.sv-pname{display:none}
.sv-side > *{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--j) * .07s)}
.sv-panel.is-on .sv-side > *{opacity:1;transform:none;transition-delay:calc(.15s + var(--j) * .07s)}
.sv-card-list{list-style:none;margin:0;padding:0;font-size:20px;line-height:1.4;letter-spacing:-0.01em;color:#808080}
.sv-card-list .sv-hn{margin-right:8px}
/* the paragraph: one sentence and Read more on its line; the rest unfolds on click */
.sv-card-sum{margin:20px 0 0;max-width:400px;font-weight:400;font-size:14px;line-height:1.4;letter-spacing:-0.01em;color:#808080}
.sv-rest{display:none}
.sv-panel.is-open .sv-rest{display:inline}
.sv-more{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;vertical-align:baseline;-webkit-tap-highlight-color:transparent}
.sv-more svg{width:14px;height:14px;flex:none;transform:rotate(90deg);transition:transform .3s}   /* the pill's dots, turned to point down */
.sv-more svg circle{fill:currentColor}
.sv-panel.is-open .sv-more svg{transform:rotate(-90deg)}
.sv-more-off,.sv-panel.is-open .sv-more-on{display:none}
.sv-panel.is-open .sv-more-off{display:inline}
.sv-card-btn{display:inline-flex;margin-top:40px}
@media (prefers-reduced-motion:reduce){
  .sv-panel,.sv-art img,.sv-side > *{transition:none}
}
@media (max-width:1100px){.sv-side{padding-left:40px}.sv-name{font-size:44px}.sv-stage{--art:min(480px,36vw)}}
@media (max-width:900px){
  .sv-offers li{grid-template-columns:32px 1fr;column-gap:12px}
  .sv-offers h3{font-size:20px}
  /* phones: no stage — the five services one under the other, each a plain block (name, picture, rows) */
  .sv-stage{min-height:0;padding:112px var(--edge) 0;grid-template-columns:1fr;align-content:start}
  .sv-names{display:none}
  .sv-view{grid-column:1;display:block}
  .sv-panel{display:block;opacity:1;pointer-events:auto;transition:none}
  .sv-panel + .sv-panel{margin-top:64px;padding-top:20px;border-top:1px solid var(--line)}
  .sv-panel .sv-art img{transform:none !important;filter:none !important;transition:none}
  .sv-pname{display:block;margin:0 0 20px;font-weight:300;font-size:38px;line-height:1.1;letter-spacing:-0.03em}
  .sv-art{width:100%;aspect-ratio:1}
  .sv-side{padding-left:0;margin:20px 0 0}
  .sv-side > *{opacity:1;transform:none;transition:none}
  .sv-card-list{font-size:16px}
  .sv-card-sum{max-width:none}
}

/* sectors list: label in column 1, a tight list in columns 4–5; hovering a row turns it black */
.sv-sec{margin-top:148px;border-top:1px solid var(--line);padding:40px var(--edge) 148px;display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px;align-items:start}
.sv-sec h2{grid-column:1 / 3;margin:0;font-weight:400;font-size:28px;line-height:1.2;letter-spacing:-0.01em}
.sv-sec ul{grid-column:4 / 6;list-style:none;margin:0;padding:0}
.sv-sec li a{display:inline-block;font-size:28px;line-height:1.3;letter-spacing:-0.01em;color:#808080;transition:color .3s var(--ease)}
.sv-sec li a:hover,.sv-sec li a:focus-visible{color:var(--ink)}
.sv-sec .sv-go{display:none}
@media (max-width:900px){
  .sv-sec{grid-template-columns:1fr;row-gap:24px;margin-top:96px;padding-bottom:96px}
  .sv-sec h2,.sv-sec ul{grid-column:1}
  .sv-sec h2{font-size:20px}
  .sv-sec li a{font-size:20px}
}

/* /sectors: the page is dark, the cards are white; the first sentence of the title is dimmed */
.page-head h1 .dim{color:#808080}
:root.dark .foot-mark{filter:invert(1)}
.sv-card--paper{background:#fff;color:#000}
.sv-card--paper .sv-art{background:#e9e9e9}
.sv-card--paper h2{border-bottom-color:rgba(0,0,0,.1)}
.sv-card--paper .sv-card-list li a{color:#808080;transition:color .3s var(--ease)}
.sv-card--paper .sv-card-list li a:hover,.sv-card--paper .sv-card-list li a:focus-visible{color:#000}
.sv-card--paper .sv-card-sum{color:#000}
.sv-card--paper .sv-card-btn{background:#000;color:#fff}
.sv-card--paper .sv-more{color:#000}
@media (max-width:760px){
  /* phones: the five services swipe sideways, one card per screen, like the team slider */
  .svc-cards{display:flex;gap:10px;margin:40px calc(-1 * var(--edge)) 0;padding:0 var(--edge);scroll-padding:0 var(--edge);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-cards::-webkit-scrollbar{display:none}
  .svc-card{flex:0 0 calc(100vw - 2 * var(--edge) - 32px);scroll-snap-align:start}
}
/* swipe tracks on phones: the finger inside a sideways slider still scrolls the page up and down (touch-action keeps both axes;
   no snap-stop so a vertical swipe is never captured) */
[data-swipe],[data-swipe]>*,[data-swipe] *{touch-action:pan-x pan-y}

@media (max-width:760px){.sec-head{flex-direction:column;align-items:flex-start;gap:20px}.sec-head .pill{margin:0}}

/* service page, in the site's own blocks: the lead is the home intro (paragraph, pill, clients); Selected work is the home
   block; How it goes and Why Ownform use the About "Approach" layout; What is included uses the About "What we do" layout;
   Questions uses the About FAQ layout and turns the page dark while in view (data-dark-band). */
/* the hero: the services stage zoomed in on one service */
.sv-hero2{--art:min(556px,36vw);position:relative;min-height:100svh;padding:42px var(--edge) 0;display:grid;grid-template-columns:minmax(0,1fr) var(--art) minmax(0,1fr);column-gap:20px;align-items:start;align-content:center}
.sv-hero-l{grid-column:1;margin-top:-8px}
.sv-hero-l h1{margin:0;font-weight:300;font-size:clamp(36px,3.6vw,52px);line-height:1.1;letter-spacing:-0.03em}
.sv-hero-p{margin:24px 0 0;max-width:34em;font-weight:300;font-size:20px;line-height:1.3;letter-spacing:-0.01em}
.sv-hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0}
.sv-hero-tags span{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:rgba(0,0,0,.06);font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
:root.dark .sv-hero-tags span{background:rgba(255,255,255,.12)}
.sv-hero-l .pill{margin-top:40px}
.sv-hero-m{grid-column:2;aspect-ratio:1248 / 1140;border-radius:var(--r-big);overflow:hidden;background:#ececec}
.sv-hero-m img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform,filter}
.sv-hero-r{grid-column:3;margin:-5px 0 0;padding-left:64px}
.sv-hero-r a{color:inherit;transition:color .3s var(--ease)}.sv-hero-r a:hover{color:var(--ink)}
.sv-lead--logos{padding-top:0}
.sv-lead--logos .clients{margin-top:0}
.sv-lead{padding:40px var(--edge) 0}
.sv-lead p{margin:0;max-width:700px;font-weight:300;font-size:20px;line-height:1.3;letter-spacing:-0.01em}
.sv-lead .pill{margin-top:40px}
.sv-lead .clients{margin-top:148px}
.sv-work2{margin-top:148px}
body:has(.sv-lead) .voices{padding:248px var(--edge)}
/* how it goes: the Approach grid — title in the first two columns, the steps in the last three, each with its weeks as a tag */
.sv-how{margin-top:0;border-top:1px solid var(--line);padding:20px var(--edge) 0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:20px}
.sv-how h2{grid-column:1 / 3;margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.sv-steps2{grid-column:3 / 6;list-style:none;margin:0;padding:0}
.sv-steps2 li{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start;padding:20px 0;border-top:1px solid var(--line)}
.sv-steps2 li:first-child{border-top:0;padding-top:4px}
.sv-when{grid-column:1 / 3;display:inline-flex;align-items:center;justify-self:start;height:20px;margin-bottom:12px;padding:0 7px;border-radius:5px;background:rgba(0,0,0,.06);font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
:root.dark .sv-when{background:rgba(255,255,255,.12)}
.sv-steps2 h3{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.sv-steps2 p{margin:0;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
/* what is included: the About block, the list in the last three columns since each item carries a line */
.sv-offers-sec{margin-top:148px}
.sv-offers-sec .offers-side{padding-bottom:0}
.sv-offers-sec .opreview{width:min(440px,100%)}
.sv-inc{grid-column:3 / 6;list-style:none;margin:0;padding:20px 0 0}
.sv-inc li{padding:20px 0;border-top:1px solid var(--line);scroll-margin-top:160px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}
.sv-inc li:first-child{border-top:0;padding-top:4px}
.sv-inc li:last-child{padding-bottom:0}
.sv-inc h3{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.sv-inc p{margin:0;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.sv-inc li:target h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.sv-why .alist li{opacity:1}
/* the other services: the home block, 148 above; the questions: the About FAQ, dark while in view */
.sv-related{margin-top:148px}
.sv-related .svc-cards{grid-template-columns:repeat(4,1fr)}
.sv-related .sec-head h2{margin:0;font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-0.01em}
.sv-faq2{padding-bottom:148px}
.sv-faq2 .flist{grid-column:3 / 6}
.sv-faq2 .flist h3{font-size:20px;line-height:1.2}
.sv-faq2 .flist p{margin-top:8px;max-width:40em}
@media (max-width:900px){
  .sv-hero2{min-height:0;padding:112px var(--edge) 0;grid-template-columns:1fr;row-gap:32px;align-content:start}
  .sv-hero-l{margin-top:0}.sv-hero-m{grid-column:1;width:100%;aspect-ratio:1}.sv-hero-r{grid-column:1;margin:0;padding-left:0;font-size:16px}
  .sv-hero2 .sv-glow{display:none}
  .sv-lead{padding-top:96px}.sv-lead .clients{margin-top:96px}.sv-lead--logos .clients{margin-top:0}
  .sv-work2{margin-top:96px}
  body:has(.sv-lead) .voices{padding:160px var(--edge)}
  .sv-how{grid-template-columns:1fr}.sv-how h2{grid-column:1}.sv-steps2{grid-column:1;margin-top:24px}
  .sv-steps2 li{grid-template-columns:1fr;row-gap:8px}.sv-steps2 h3{font-size:22px}
  .sv-offers-sec{margin-top:96px}.sv-offers-sec .offers-side{padding:20px 0 0}
  .sv-inc{grid-column:1;padding-top:24px}.sv-inc li{grid-template-columns:1fr;row-gap:8px}.sv-inc h3{font-size:22px}
  .sv-related{margin-top:96px}.sv-related .svc-cards{grid-template-columns:1fr 1fr}
  .sv-faq2{padding-bottom:96px}.sv-faq2 .flist{grid-column:1}
}
}

/* booking modal (Cal.com in an iframe): blurred backdrop, a dark panel with the site's corners; it arrives out of a blur */
.bk{position:fixed;inset:0;z-index:60;display:none}
.bk.is-open{display:block}
.bk-back{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .5s var(--ease)}
.bk-panel{position:absolute;left:50%;top:50%;width:min(1080px,100vw - 40px);height:min(660px,100svh - 40px);transform:translate(-50%,-50%) scale(.98);opacity:0;filter:blur(8px);
  display:flex;flex-direction:column;background:#111;color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:opacity .5s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
.bk.is-in .bk-back{opacity:1}
.bk.is-in .bk-panel{opacity:1;transform:translate(-50%,-50%);filter:none}
.bk-head{flex:none;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.bk-head p{margin:0;font-size:14px;line-height:1.3;letter-spacing:-0.01em;color:#808080}
.bk-close{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;font:inherit;font-size:14px;letter-spacing:-0.01em;color:#808080;cursor:pointer;transition:color .3s var(--ease)}
.bk-close:hover,.bk-close:focus-visible{color:#fff;outline:0}
.bk-body{flex:1;min-height:0;background:#111}
.bk-body iframe{display:block;width:100%;height:100%;border:0;background:#111}
@media (max-width:640px){
  .bk-panel{width:100vw;height:100svh;border-radius:0}
}

/* Ask: the assistant. A white bar 480 wide at the bottom of the screen with a soft animated rainbow stroke (faster while
   you type); a question opens the panel above it to 400 tall. Everything inside arrives out of a blur, like the rest
   of the site. */
.ask{position:fixed;left:50%;bottom:20px;z-index:30;width:min(556px,max(36vw,480px),100vw - 16px);   /* the width of the services picture */transform:translateX(-50%);display:flex;flex-direction:column;
  border-radius:12px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#000;box-shadow:0 4px 24px rgba(0,0,0,.18);   /* the contact card's glass */
  font-size:14px;line-height:1.3;letter-spacing:-0.01em;transition:transform .6s var(--ease),opacity .5s var(--ease)}
/* the stroke: a 4px ring; at rest a rainbow arc runs around it over a faint grey ring (the eye follows it); while you
   type the whole ring is the rainbow, running fast */
@property --ask-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.ask::before{content:"";position:absolute;inset:-4px;border-radius:16px;padding:4px;pointer-events:none;
  background:conic-gradient(from var(--ask-a),rgba(0,0,0,.08) 0 55%,#e9c46a 62%,#f26a3d 70%,#ee5f7d 78%,#d86be0 86%,#b38cff 94%,rgba(0,0,0,.08) 100%);
  animation:ask-run 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}   /* a ring: the inside stays white */
@keyframes ask-run{to{--ask-a:360deg}}
/* while you type: a small soft rainbow shadow around the bar, breathing (a ring outside the stroke, blurred) */
.ask::after{content:"";position:absolute;inset:-10px;border-radius:22px;padding:6px;z-index:-1;pointer-events:none;opacity:0;filter:blur(6px);
  background:linear-gradient(90deg,#f26a3d,#ee5f7d,#d86be0,#b38cff,#e9c46a,#f26a3d);background-size:200% 100%;animation:rainbow 6s linear infinite;transition:opacity .5s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ask.is-typing::after{animation:rainbow 6s linear infinite,ask-breathe 1.6s ease-in-out infinite}
@keyframes ask-breathe{0%,100%{opacity:.3}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.ask::before,.ask::after{animation:none}}
@media (prefers-reduced-motion:reduce){.ask::before{animation:none}}
:root.menu-open .ask,body:has(.gcard.on:not(.in-menu)) .ask,.ask.is-away{opacity:0;pointer-events:none;transform:translate(-50%,24px)}
:root.scroll-down .ask:not(.is-open):not(.is-focus){opacity:0;pointer-events:none;transform:translate(-50%,24px)}
.ask-bar{position:relative;display:flex;align-items:center;gap:12px;height:46px;padding:0 12px}   /* 12 around a 22px row */
.ask-o{flex:none;width:14px;height:14px;color:#000}
.ask-o svg{display:block;width:14px;height:14px}
.ask-o svg circle{fill:currentColor}
.ask.is-busy .ask-o svg circle{animation:twinkle 1.1s ease-in-out infinite;animation-delay:var(--d)}
.ask-field{position:relative;flex:1;min-width:0;height:22px;display:flex;align-items:center}
.ask-in{width:100%;height:22px;margin:0;padding:0;border:0;background:none;font:inherit;font-size:14px;line-height:22px;color:#000;outline:0}   /* 16px: iOS does not zoom */
.ask-ph{position:absolute;left:0;top:0;height:22px;line-height:22px;transform:none;font-size:14px;color:#808080;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis;transition:opacity .4s var(--ease),filter .4s var(--ease),transform .4s var(--ease)}
.ask-ph.is-out{opacity:0 !important;filter:blur(6px);transform:translateY(-6px)}
/* the button: 4px corners; on hover the rainbow falls from under it as a shadow */
.ask-go{position:relative;flex:none;border:0;background:#000;color:#fff;cursor:pointer;height:22px;padding:0 8px 0 4px;gap:4px;border-radius:999px;font-size:14px;line-height:1;box-shadow:none !important;outline:0}
.ask-go::after{content:"";position:absolute;inset:3px -2px -5px;border-radius:999px;z-index:-1;background:linear-gradient(90deg,#f26a3d,#ee5f7d,#d86be0,#b38cff,#e9c46a);filter:blur(8px);opacity:0;transform:translateY(0);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ask-go:hover::after,.ask-go:focus-visible::after{opacity:.8;transform:translateY(4px)}
.ask.is-busy .ask-go{opacity:.4;pointer-events:none}
/* the chips under the field: the site's tags (10px mono, 20 tall, 5px corners); the questions people start with */
.ask-chips{display:flex;gap:6px;padding:0 12px 12px}
.ask-chips button{flex:1 1 0;justify-content:center;display:inline-flex;align-items:center;height:20px;margin:0;padding:0 7px;border:0;border-radius:5px;background:rgba(0,0,0,.06);color:#000;
  font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.ask-chips button:hover,.ask-chips button:focus-visible{background:#000;color:#fff;outline:0}
/* a case preview under an answer: picture left, name and line right; the whole card is the link */
.ask-cases{display:flex;flex-direction:column;gap:6px;margin-top:10px;opacity:0;filter:blur(6px);transform:translateY(6px);transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)}
.ask-cases.is-in{opacity:1;filter:none;transform:none}
.ask-case{display:grid;grid-template-columns:72px 1fr;column-gap:12px;align-items:center;padding:6px;border-radius:8px;background:rgba(0,0,0,.06);color:#000;transition:background-color .3s var(--ease)}
.ask-case:hover{background:rgba(0,0,0,.1)}
.ask-case img{display:block;width:72px;aspect-ratio:3/2;object-fit:cover;border-radius:5px;background:#ddd}
.ask-case span{display:block;font-size:14px;line-height:1.3;color:#808080}
.ask-case b{display:block;font-weight:400;color:#000}
/* follow-ups under an answer: the same tags, the next things people ask */
.ask-next{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ask-next button{display:inline-flex;align-items:center;height:20px;margin:0;padding:0 7px;border:0;border-radius:5px;background:rgba(0,0,0,.06);color:#000;
  font-family:var(--mono);font-size:10px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.ask-next button:hover,.ask-next button:focus-visible{background:#000;color:#fff;outline:0}
/* the panel above the bar */
.ask-panel{display:flex;flex-direction:column;height:0;overflow:hidden;opacity:0;transition:height .45s var(--ease),opacity .35s var(--ease)}
.ask.is-open .ask-panel{height:318px;opacity:1;border-bottom:1px solid rgba(0,0,0,.1)}
.ask-head{flex:none;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;color:#808080;opacity:0;filter:blur(6px);transition:opacity .5s var(--ease) .1s,filter .5s var(--ease) .1s}
.ask.is-open .ask-head{opacity:1;filter:none}
.ask-head p{margin:0}
.ask-close{margin:0;padding:0;border:0;background:none;font:inherit;color:#000;cursor:pointer;transition:color .3s var(--ease)}
.ask-close:hover,.ask-back:hover{color:#808080}
.ask-msgs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:0 12px 12px;display:flex;flex-direction:column;gap:16px}
.ask-msgs > *{flex:none}
.ask-row{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:start;opacity:0;filter:blur(6px);transform:translateY(8px);transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)}
.ask-row.is-in{opacity:1;filter:none;transform:none}
.ask-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:rgba(0,0,0,.08);color:#000}
.ask-row--of .ask-av{background:#000;color:#fff}
.ask-who{margin:0 0 2px;color:#808080}
.ask-txt{color:#000;min-height:18px}
.ask-txt a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ask-row--of .ask-txt:empty::after{content:"…";color:#808080}
/* Cal.com inside the panel: the booker replaces the messages; Back returns to them */
.ask-cal{flex:1;min-height:0;display:none;background:#fff}
.ask-cal iframe{display:block;width:100%;height:100%;border:0}
.ask.is-cal .ask-cal{display:block}
.ask.is-cal .ask-msgs{display:none}
.ask.is-cal.is-open .ask-panel{height:min(560px,72vh)}
.ask-back{display:none;margin:0;padding:0;border:0;background:none;font:inherit;color:#000;cursor:pointer;transition:color .3s var(--ease)}
.ask.is-cal .ask-back{display:inline}
.ask-book{display:inline-flex;margin-top:8px;border:0;background:#000;color:#fff;cursor:pointer}
@media (max-width:640px){
  .ask{width:calc(100vw - 2 * var(--edge));bottom:20px}   /* the content column, 20 from the bottom like the pill nav */
  .ask-chips{overflow-x:auto;scrollbar-width:none;margin:0;padding:0 12px 12px}   /* scrolls inside the bar; the bar clips it */
  .ask-chips button{flex:none}
  .ask-chips::-webkit-scrollbar{display:none}
  .ask.is-open .ask-panel{height:min(382px,60vh)}   /* 20% taller than on desktop */
  .ask.is-cal.is-open .ask-panel{height:min(600px,78vh)}
  body:has(.ask-slot) .foot-bottom{padding-bottom:72px}   /* room under the footer for the bar */
}

/* corner smoothing (Apple's continuous corners, ~Figma 60%) on everything with a radius; pills and circles stay round.
   Browsers without corner-shape keep plain round corners. */
@supports (corner-shape: squircle){
  *,*::before,*::after{corner-shape:superellipse(1.6)}
  .pillnav,.pillnav::before,.pillnav::after,.contact,.contact::before,.contact::after,.tag,.tag::before,.tag::after,.pill,.pill::before,.pill::after,.cform .send,.cform .send::before,.cform .send::after,.mnav-social > a,.mnav-social > a::before,.mnav-social > a::after,.case .chips span,.case .chips span::before,.case .chips span::after,.foot-bottom .social a,.foot-bottom .social a::before,.foot-bottom .social a::after,.g-vinyl .disc,.g-vinyl .disc::before,.g-vinyl .disc::after,.g-play,.g-play::before,.g-play::after,.pillnav .mbtn,.pillnav .mbtn::before,.pillnav .mbtn::after,.ps,.ps::before,.ps::after,.cs-next-btn,.cs-next-btn::before,.cs-next-btn::after,.ask-go,.ask-go::before,.ask-go::after,.ask-av,.ask-av::before,.ask-av::after,.ava span,.ava span::before,.ava span::after,.tdots li,.tdots li::before,.tdots li::after,.sv-dots li,.sv-dots li::before,.sv-dots li::after,.fq-i,.fq-i::before,.fq-i::after,.wip b,.wip b::before,.wip b::after,.ask-o,.ask-o::before,.ask-o::after{corner-shape:round}   /* the pills and circles, with their pseudo-elements (the pill nav's gradient border) */
}