/* Landing Creatives
   A studio index on a 12-column grid: soft paper, hairline borders instead of shadows,
   Satoshi throughout, and electric indigo only for actions and active states. See DESIGN.md. */
:root{
  /* Tokens: soft paper, hairlines, one electric indigo accent, Satoshi only */
  --bg:#fbfbfb;--paper-2:#f4f4f4;--surface:#ffffff;--fg:#000000;--ink-2:#262626;--muted:#5e5e5e;--line:#e4e4e4;--line-strong:#cfcfcf;
  --accent:#4b47ff;--accent-hover:#312de0;--accent-tint:#eae9fe;--accent-wash:#f2f1ff;--accent-ink:#4b47ff;
  --sans:"Satoshi",Arial,sans-serif;
  --gutter:24px;--r:12px;--r-btn:8px;--r-card:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:#b9bcae var(--bg);accent-color:var(--fg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;caret-color:var(--fg)}
::selection{background:var(--accent);color:#fff}
img{display:block;max-width:100%;height:auto}
/* Photos and video posters show a soft paper tone until they arrive, never a white hole */
main img,main video{background-color:var(--paper-2)}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:500;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
section[id]{scroll-margin-top:80px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 48px,1320px);margin-inline:auto}
.skip{position:absolute;left:16px;top:-64px;z-index:200;padding:10px 16px;background:var(--fg);color:var(--bg);text-decoration:none}
.skip:focus{top:16px}

/* Buttons: rectangular, label only */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:0;border-radius:var(--r-btn);background:var(--accent);color:#fff;font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn--sm{height:42px;padding:0 20px;font-size:14px}
.btn--block{width:100%}
/* Secondary: white with a blue outline, so the colour sets it apart from the grey outlined tags above it */
.btn--ghost{background:var(--surface);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn--light{background:#fff;color:var(--fg)}
.btn--accent{background:var(--accent);color:#fff}
@media (hover:hover){
  .btn:hover{background:var(--accent-hover)}
  .btn--ghost:hover{background:var(--accent-tint);color:var(--accent-hover);box-shadow:inset 0 0 0 1.5px var(--accent-hover)}
  .btn--light:hover{background:var(--accent-tint);color:var(--accent)}
  .btn--accent:hover{background:var(--accent-hover)}
}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);color:var(--fg);cursor:pointer}
.small-label{color:var(--muted);font-size:13px}

/* Top bar + nav */
/* Top banner: one still line that leads to the form, so it doesn't compete with the tools marquee below the hero */
.topbar{display:block;padding:9px 16px;background:var(--fg);color:var(--bg);font-size:14px;text-align:center;text-decoration:none}
.topbar strong{color:#b5b3ff;font-weight:500;transition:color .2s ease}
@media (hover:hover){.topbar:hover strong{color:#fff}}
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
.nav.is-stuck{box-shadow:0 10px 24px -20px rgba(27,37,34,.5)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
/* Layered mark: each square is the x-height, the stack runs from the top of the l down to the baseline, .3em from the name.
   Padding keeps a 44px tap target now that the mark is smaller; the negative margin keeps the layout */
.logo{display:inline-flex;align-items:baseline;gap:.3em;justify-self:start;padding:12px 0;margin:-12px 0;color:var(--fg);font:700 19px/1 var(--sans);letter-spacing:-.03em;text-decoration:none}
.logo svg{width:.744em;height:.744em;flex-shrink:0}
.nav-links{display:flex;gap:28px}
.nav-links a{position:relative;padding:6px 0;font-size:14px;font-weight:500;text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.nav-links a:hover::after{transform:scaleX(1)}}
.nav-end{display:flex;gap:8px;justify-self:end}
.burger{display:none}
/* The menu opens exactly over the header: same top edge (landing.js sets --nav-top, so the banner stays above it),
   same side margins as .wrap (16px under 640px) and the same 64px row, so the logo and the close button land where the logo and burger were */
.menu{--pad:24px;position:fixed;inset:var(--nav-top,0) 0 0;z-index:100;display:flex;flex-direction:column;padding:0 var(--pad) 28px;background:var(--bg);overflow-y:auto}
/* The header's hairline stays where it was: under the 64px row, edge to edge, same colour. The list has no line of its own above it */
.menu-top{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;height:65px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);border-bottom:1px solid var(--line)}
.menu ul{margin:0;padding:0;list-style:none}
/* The list starts right under the header line, so the first link sits the same distance from it as every other link from the line above it; the button keeps its distance */
.menu nav{margin-bottom:32px}
.menu nav a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font:500 34px/1.05 var(--sans);letter-spacing:-.035em;text-decoration:none}
.menu .btn{margin-top:auto}
/* Opening: the panel fades in over the header (the top row sits exactly where the header's row is, so it doesn't move),
   then the links rise one after another and the button last. It runs each time the menu is shown; closing is immediate */
@keyframes menu-fade{from{opacity:0}}
@keyframes menu-rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:no-preference){
  .menu{animation:menu-fade .18s ease-out}
  .menu nav li,.menu .btn{animation:menu-rise .34s cubic-bezier(.2,.7,.2,1) backwards}
  .menu nav li:nth-child(1){animation-delay:.03s}
  .menu nav li:nth-child(2){animation-delay:.07s}
  .menu nav li:nth-child(3){animation-delay:.11s}
  .menu nav li:nth-child(4){animation-delay:.15s}
  .menu .btn{animation-delay:.19s}
}

/* Hero: headline and action left, the three ways in stacked as photographs right */
.hero{padding:clamp(40px,5.5vw,80px) 0 clamp(64px,8vw,112px)}
.hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.hero-copy{grid-column:1/span 7;display:flex;flex-direction:column;align-items:flex-start;padding-right:clamp(24px,4.5vw,72px)}
.hero h1{font-size:clamp(44px,5.8vw,92px);font-weight:500;line-height:.98;letter-spacing:-.045em}
.lede{max-width:28em;margin:28px 0 36px;color:var(--ink-2);font-size:clamp(17px,1.35vw,20px);line-height:1.5}
/* The box is exactly as tall as the stacked photos (last one starts at 18% and is .56 × 5/4 of the width tall),
   so centring the row centres what you actually see */
.layers{grid-column:8/span 5;position:relative;aspect-ratio:82/70;margin:0;padding:0;list-style:none}
/* isolate: each card is its own stacking context so the z-indexes below hold even when the
   pointer-lean (motion-pages.js) puts a transform on the img — a transformed img would otherwise
   paint over the glow and make it vanish the moment the cursor moves */
.layer{position:absolute;width:56%;margin:0;isolation:isolate}
.layer img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-card)}
/* AI-brand ambient light: a diffused blue glow weighted to the bottom-right but spanning the whole card,
   so it still reads on the back cards whose bottom-right corner is covered by the card stacked over them.
   It's a real element (not a pseudo) so the pointer-lean in motion-pages.js moves it in step with the
   photo — otherwise the glow would stay put while the img slides out from under it.
   z-index keeps it above the img and below the span label. */
.layer-glow{position:absolute;inset:0;z-index:1;border-radius:var(--r-card);pointer-events:none;background:radial-gradient(115% 100% at 100% 100%,rgba(81,72,255,.38) 0%,rgba(81,72,255,.18) 40%,rgba(81,72,255,.07) 75%,rgba(81,72,255,0) 100%)}
.layer span{position:absolute;z-index:2;left:10px;top:10px;padding:8px 12px;border-radius:var(--r-btn);background:#fff;font:500 16px/1 var(--sans);letter-spacing:-.01em}
.layer:nth-child(1){left:0;top:0}
.layer:nth-child(2){left:22%;top:9%}
.layer:nth-child(3){left:44%;top:18%}
.layer:nth-child(3) span{background:var(--accent);color:#fff}
/* Hover: the photo under the pointer comes to the front and lifts, the others step back,
   and the indigo tag moves to the one you're on */
.layer{transition:transform .45s cubic-bezier(.32,.72,0,1),filter .3s ease}
.layer img{transition:box-shadow .45s ease}
.layer span{transition:background-color .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){
  .layers:hover .layer{filter:saturate(.75) brightness(.96)}
  .layers .layer:hover{z-index:5;filter:none;transform:translateY(-10px) scale(1.02)}
  .layers .layer:hover img{box-shadow:0 28px 48px -28px rgba(0,0,0,.45)}
  .layers:hover .layer span{background:#fff;color:var(--fg)}
  .layers .layer:hover span{background:var(--accent);color:#fff}
}
/* Mobile only (the stacked layout, <=899px): the cards take turns at the front on a timer.
   js/landing.js adds .lc-rotate and the is-front/is-mid/is-back slot classes, and sets the slot
   position as an inline transform per card, so only transform animates (never top/left).
   Each card keeps its nth-child home position; a card in its home slot has no transform. */
.layers.lc-rotate .layer{transition:transform .6s ease-out;cursor:pointer}
.layers.lc-rotate .layer.is-back{z-index:1}
.layers.lc-rotate .layer.is-mid{z-index:2}
.layers.lc-rotate .layer.is-front{z-index:3}
/* The front card carries the active tag (the blue tag Hire uses today); the rest stay white/black */
.layers.lc-rotate .layer span{background:#fff;color:var(--fg)}
/* overflow clips the bar to the tag's rounded corners, so it reads as the tag's bottom stroke */
.layers.lc-rotate .layer.is-front span{background:var(--accent);color:#fff;overflow:hidden}
/* Progress bar on the active tag only: a thin white stroke along the very bottom edge of the tag,
   full width and following its radius, filled left to right by landing.js (scaleX(0) -> scaleX(1)) */
.layers.lc-rotate .tag-bar{display:none}
.layers.lc-rotate .layer.is-front span .tag-bar{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:reduce){
  .layers.lc-rotate .layer{transition:none}
  .layers.lc-rotate .tag-bar{display:none}
}


/* Tool ticker */
.tools{border-block:1px solid var(--line);background:var(--surface)}
.tools-in{display:flex;align-items:center;gap:32px;padding:18px 0}
.tools-label{flex:none;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap}
.marquee{display:flex;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;flex:none;gap:36px;margin:0;padding:0 36px 0 0;list-style:none;animation:marquee 60s linear infinite}
.marquee-track li{font-size:16px;font-weight:500;white-space:nowrap}
.marquee-track li{display:inline-flex;align-items:center;gap:10px}
.marquee-track li::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}

/* Sections: heading left, aside right, hairline above */
.sec{padding:clamp(64px,7.5vw,112px) 0}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:24px;align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{grid-column:1/span 8;font-size:clamp(36px,4.4vw,64px);line-height:1}
@media (min-width:1000px){.sec-head h2 .nb{white-space:nowrap}}
.sec-aside{grid-column:9/span 4;align-self:end;display:flex;flex-direction:column;gap:24px;padding-bottom:6px}
.sec-aside .btn{align-self:flex-start}
.sec-aside p{max-width:28em;color:var(--ink-2);font-size:18px;line-height:1.5}
.sec-sub{grid-column:1/span 8;max-width:28em;margin-top:-4px;color:var(--ink-2);font-size:18px;line-height:1.5}
.sec-aside--span{grid-row:1/span 2}
.sec-aside .ind-more{margin-top:-12px;color:var(--muted)}
.sec-aside .ind-more .text-link{margin-left:6px}
.text-link{color:var(--accent);font-size:18px;font-weight:500;text-decoration:none}
@media (hover:hover){.text-link:hover{color:var(--accent-hover)}}
@media (min-width:900px){.sec-aside{align-items:flex-end;text-align:right}.sec-aside .btn{align-self:flex-end}}
.sec-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(32px,4vw,48px)}
.sec-foot-q{font:500 24px/1.15 var(--sans);letter-spacing:-.02em}

/* Carousels: full-bleed tracks that start on the grid */
.ctrl{display:flex;gap:8px}
.circ{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);color:var(--fg);cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}
.circ:disabled{opacity:.25;cursor:default}
@media (hover:hover){.circ:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}}
/* overflow-y:hidden: with only overflow-x set, the browser makes the track scroll vertically too,
   so a few pixels of reveal offset let it swallow the page's vertical scroll */
.track{display:flex;gap:var(--gutter);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,(100vw - 1320px)/2);padding-inline:max(24px,(100vw - 1320px)/2);scrollbar-width:none}
.track-wrap{position:relative}
.track-wrap::before,.track-wrap::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,160px);pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s ease}
.track-wrap::before{left:0;z-index:1;background:linear-gradient(to left,transparent,color-mix(in srgb,var(--bg) 55%,transparent));-webkit-mask-image:linear-gradient(to left,transparent,#000);mask-image:linear-gradient(to left,transparent,#000)}
.track-wrap::after{right:0;background:linear-gradient(to right,transparent,color-mix(in srgb,var(--bg) 55%,transparent));-webkit-mask-image:linear-gradient(to right,transparent,#000);mask-image:linear-gradient(to right,transparent,#000)}
.track-wrap:has(.at-start)::before{opacity:0}
.track-wrap:has(.at-end)::after{opacity:0}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline-offset:-2px}
.work{flex:0 0 clamp(260px,24vw,340px);margin:0;scroll-snap-align:start}
.work img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
@media (hover:hover){.work:hover img{transform:translateY(-6px);box-shadow:0 18px 30px -22px rgba(0,0,0,.45)}}
.work-media{position:relative}
.work video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);background:var(--paper-2);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
@media (hover:hover){.work:hover video{transform:translateY(-6px);box-shadow:0 18px 30px -22px rgba(0,0,0,.45)}}
a.work-by{align-self:flex-start;text-decoration:none}
@media (hover:hover){a.work-by:hover{color:var(--accent)}}
.work figcaption{display:flex;flex-direction:column;gap:6px;padding-top:14px;font:500 18px/1.3 var(--sans);letter-spacing:-.015em}
.work-meta{color:var(--muted);font:500 13px/1.3 var(--sans);letter-spacing:0}
.work-by{color:var(--muted);font:400 14px/1.3 var(--sans);letter-spacing:0}

/* Learn / Projects / Hire */
/* Services: three cards that pin below the nav and stack over each other as the page scrolls */
.svc-stack{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);margin:0;padding:0;list-style:none}
.svc{position:sticky;top:calc(96px + var(--i,0) * 18px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:stretch;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:0 -12px 28px -20px rgba(0,0,0,.18)}
.svc:nth-child(2){--i:1}
.svc:nth-child(3){--i:2}
.svc-body{grid-column:1/span 6;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:clamp(4px,1vw,16px)}
.svc-kind{color:var(--fg);font:500 clamp(40px,4.6vw,72px)/.95 var(--sans);letter-spacing:-.045em}
.svc-body h3{font-size:clamp(26px,2.4vw,36px)}
.svc-img{grid-column:7/span 6;width:100%;height:100%;min-height:360px;max-height:min(560px,calc(100svh - 200px));object-fit:cover;border-radius:var(--r)}
/* Learn photo frames the head near the top, so bias the cover crop upward */
#svc-learn .svc-img{object-position:50% 20%}
.list{width:100%;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.list li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line);font-size:16px}
.list li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:14px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat}
.tags-block{display:flex;flex-direction:column;gap:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);font-size:14px}

/* Creatives */
.person{flex:0 0 clamp(270px,23vw,330px);padding:10px 10px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);scroll-snap-align:start;transition:border-color .2s ease}
.person>*:not(.person-photo){margin-inline:8px}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;margin-bottom:16px}
.person-photo{position:relative;margin-bottom:16px}
.person-photo img{margin-bottom:0}
.person h3{font-size:24px}
.person-meta{margin-top:4px;color:var(--muted);font-size:14px}
.bio{margin-top:12px;font-size:15px;line-height:1.55}
.person--link{display:block;color:inherit;text-decoration:none}
@media (hover:hover){.person--link:hover{border-color:var(--accent)}}

/* Industries: index list, image follows the hovered row */
/* Industries: oversized stacked titles; the hovered or chosen one swaps the photo and line beside them */
.ind-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.ind-media{grid-column:1/span 6;position:sticky;top:120px;display:grid}
.ind-media figure{position:relative;grid-area:1/1;margin:0;visibility:hidden}
.ind-media figure.is-active,.ind-media figure.was-active{visibility:visible}
.ind-media img{width:100%;aspect-ratio:16/12;object-fit:cover;border-radius:var(--r);clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path .8s cubic-bezier(.65,0,.35,1),transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ind-media figure.was-active img{clip-path:inset(0);transform:none}
.ind-media figure.is-active{z-index:2}
.ind-media figure.is-active img{clip-path:inset(0);transform:none}
/* The line sits inside the photo on a black gradient that rises from the bottom; it fades in once the wipe has revealed the photo */
.ind-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(72px,10vw,128px) clamp(24px,8vw,112px) clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px);border-radius:0 0 var(--r) var(--r);background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.52) 50%,rgba(0,0,0,0));color:#fff;font-size:clamp(16px,1.4vw,20px);line-height:1.4;letter-spacing:-.01em;text-wrap:balance;opacity:0;transition:opacity .25s ease}
.ind-media figure.is-active figcaption{opacity:1;transition:opacity .4s ease .45s}
.ind-list{grid-column:8/span 5;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(6px,.9vw,14px);margin:0;padding:0;list-style:none}
.ind-title{padding:0;border:0;background:none;color:#8f8f8f;font:500 clamp(36px,4.4vw,64px)/1.04 var(--sans);letter-spacing:-.045em;text-align:left;cursor:pointer;transition:color .3s ease}
.ind.is-active .ind-title{color:var(--fg)}
@media (hover:hover){.ind:not(.is-active) .ind-title:hover{color:#5e5e5e}}

/* Process: three columns between rules */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.steps li{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.step-num{margin-bottom:40px;font:500 clamp(56px,6vw,88px)/.85 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--accent)}
.steps h3{font-size:24px}
/* Steps (Home, Join, profile): the number on the left, title and line beside it */
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;row-gap:8px;align-content:start;align-items:start}
.steps li .step-num{grid-row:1/span 2;margin:0}
.steps h3{align-self:start;padding-top:6px}
.steps p{max-width:26em;color:var(--muted);font-size:15px}

/* Join: full-bleed photograph */
.join{position:relative;min-height:clamp(520px,58vw,760px);display:flex;align-items:flex-end;color:var(--bg);isolation:isolate}
.join img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.join::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.3) 55%,rgba(0,0,0,.04))}
.join-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;padding:clamp(40px,6vw,80px) 0}
.join h2 .nb{white-space:nowrap}
.join h2{grid-column:1/span 7;font-size:clamp(40px,5.4vw,84px);font-weight:500;line-height:.96;color:#fff}
.join-side{grid-column:9/span 4;display:flex;flex-direction:column;align-items:flex-start;gap:24px;font-size:18px;line-height:1.5}

/* Founder */
.founder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:end}
.founder-copy{grid-column:1/span 4;display:flex;flex-direction:column;gap:20px;padding-bottom:4px}
.founder-copy h2{font-size:clamp(32px,3.5vw,52px);line-height:1;white-space:nowrap}
.founder-copy>p{max-width:22em;color:var(--ink-2);font-size:18px;line-height:1.5}
.founder-copy .founder-by{display:flex;flex-direction:column;gap:2px;margin-top:clamp(8px,3vw,48px);color:var(--muted);font-size:15px}
.founder-quote{margin:0;padding:0}
.founder-quote p{max-width:20em;font:500 clamp(20px,1.7vw,24px)/1.3 var(--sans);letter-spacing:-.015em}
.founder-by strong{color:var(--fg);font-size:17px;font-weight:700}
.founder .video-frame{grid-column:6/span 7}
.video-frame{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:var(--r)}
.video-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.faq-head{grid-column:1/span 4;display:flex;flex-direction:column;gap:20px}
.faq-head h2{font-size:clamp(36px,4vw,56px)}
.faq-head p{max-width:24em;color:var(--muted);font-size:17px;line-height:1.55}
.faq-list{grid-column:6/span 7;display:flex;flex-direction:column;gap:8px}
.faq{padding:0 24px;border:1px solid var(--line);border-radius:var(--r-medium,12px);background:var(--surface);transition:border-color .2s ease}
.faq[open]{border-color:var(--accent)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:14px 0;font:500 19px/1.3 var(--sans);letter-spacing:-.015em;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq p{max-width:36em;padding:0 64px 26px 0;color:var(--muted);font-size:16px;line-height:1.65}
.faq-icon{position:relative;flex:none;width:28px;height:28px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:currentColor}
.faq-icon::after{transform:rotate(90deg)}
.faq[open] .faq-icon{transform:rotate(45deg)}
.faq[open] summary{color:var(--accent)}

/* Footer: ink block that closes the page */
.foot{margin-top:0;background:var(--fg);color:var(--bg);padding-top:clamp(56px,7vw,96px)}
.foot .small-label{color:#9a9a9a}
.foot-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px}
.foot-cta{grid-column:1/span 5;display:flex;flex-direction:column;gap:28px}
.foot-title{font:500 clamp(30px,3vw,40px)/1.18 var(--sans);letter-spacing:-.035em}
.foot-title span{display:block;color:var(--accent)}
.subscribe{display:flex;gap:6px;margin:0;padding:5px;border:1px solid #333;border-radius:var(--r-card)}
.subscribe:focus-within{border-color:var(--accent)}
.subscribe input[type=email]{flex:1 1 160px;width:0;min-width:0;height:42px;padding:0 12px;border:0;background:transparent;color:var(--bg);font:16px var(--sans);outline:none;caret-color:var(--accent)}
.subscribe input::placeholder{color:#9a9a9a;opacity:1}
.foot-note{margin-top:10px;color:#9a9a9a;font-size:14px}
.subscribe{flex-wrap:wrap}
.subscribe .field-error{flex-basis:100%;order:3;padding:2px 12px 6px;color:#ff9b8a}
.subscribe.has-error{border-color:#ff9b8a}
.foot-nav{grid-column:8/span 5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-nav nav{display:flex;flex-direction:column;gap:12px;font-size:15px}
.foot-nav .small-label{margin-bottom:4px}
.foot-nav a{text-decoration:none}
@media (hover:hover){.foot-nav a:hover{color:#b5b3ff}}
.foot :focus-visible{outline-color:#b5b3ff}
.bigmark{margin-top:clamp(56px,8vw,112px);padding-bottom:.04em;overflow:visible;font:700 min(13.3vw,192px)/1.12 var(--sans);letter-spacing:-.065em;white-space:nowrap;color:var(--bg)}
.foot-base{display:flex;justify-content:space-between;padding:20px 0 28px;margin-top:20px;border-top:1px solid #2a2a2a;color:#9a9a9a;font-size:14px}


/* Creative profile page: identity first, the work full width, then offers beside a sticky booking card */
.pf-head{padding:clamp(48px,6vw,88px) 0 clamp(8px,2vw,24px)}
.pf-head-in{display:flex;align-items:flex-end;gap:clamp(20px,3vw,40px)}
.pf-portrait{flex:none;display:grid;place-items:center;width:clamp(112px,13vw,176px);aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);color:var(--muted);font:500 clamp(28px,3vw,40px)/1 var(--sans);letter-spacing:-.04em}
.pf-portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.pf-id{display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-id h1{font-size:clamp(44px,5.4vw,84px);line-height:.95;letter-spacing:-.045em}
.pf-role{font-size:clamp(17px,1.3vw,19px);font-weight:500}
.pf-role span{color:var(--muted);font-weight:400}
.pf-lede{max-width:34em;color:var(--ink-2);font-size:clamp(17px,1.3vw,19px);line-height:1.5}
.pf-work-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.pf-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.pf-sec-head h2,.pf-sec>h2{font-size:clamp(30px,3vw,44px);line-height:1.02}
/* Work keeps each piece's own shape: one row height, width from the aspect ratio */
.pf-work{flex:0 0 auto;width:min-content}
.pf-work-media{position:relative;--wh:clamp(400px,36vw,520px)}
.pf-work .pf-work-media img,.pf-work .pf-work-media video{display:block;width:auto;max-width:none;height:var(--wh);aspect-ratio:var(--ar,4/5);object-fit:cover;border-radius:var(--r-card);background:var(--paper-2);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
@media (hover:hover){.pf-work:hover .pf-work-media img,.pf-work:hover .pf-work-media video{transform:translateY(-6px);box-shadow:0 18px 30px -22px rgba(0,0,0,.45)}}
.pf-sound{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-btn);background:rgba(255,255,255,.92);color:var(--fg);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.pf-sound svg{width:18px;height:18px}
.pf-sound .on,.pf-sound[aria-pressed="true"] .off{display:none}
.pf-sound[aria-pressed="true"] .on{display:inline}
.pf-sound[aria-pressed="true"]{background:var(--accent);color:#fff}

.pf-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;padding-bottom:clamp(72px,9vw,128px)}
.pf-main{grid-column:1/span 8;display:flex;flex-direction:column;gap:clamp(64px,7vw,96px);min-width:0}
.pf-sec{display:flex;flex-direction:column;gap:24px;scroll-margin-top:96px}
.pf-aside{grid-column:9/span 4;position:sticky;top:96px}
.pf-book{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.pf-avail{margin-bottom:8px}
.pf-avail-date{font:500 24px/1.2 var(--sans);letter-spacing:-.02em}
.pf-facts{display:flex;flex-direction:column;margin:12px 0 0}
.pf-facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.pf-facts div:last-child{border-bottom:0}
.pf-facts dt{color:var(--muted)}
.pf-facts dd{margin:0;font-weight:500;text-align:right}
/* Learn / Projects / Hire: one segmented control, rectangular like the buttons */
.pf-seg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border:1px solid var(--line);border-radius:calc(var(--r-btn) + 4px);background:var(--paper-2)}
.pf-seg button{height:40px;padding:0 20px;border:0;border-radius:var(--r-btn);background:transparent;color:var(--muted);font:500 15px/1 var(--sans);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.pf-seg [aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
@media (hover:hover){.pf-seg button:hover{color:var(--fg)}}
.pf-panel{display:flex;flex-direction:column;gap:20px}
.pf-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pf-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.pf-card h3{font-size:24px}
.pf-card>p{color:var(--ink-2);font-size:16px;line-height:1.55}
.pf-card .btn{margin-top:auto}
.pf-meta{color:var(--muted)!important;font-size:15px!important}
.pf-meta b{color:var(--fg);font-weight:500}
.pf-sub-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pf-sub-head h3,.pf-sub-title{font-size:24px}
.pf-sub-title{margin-top:20px}
.pf-bill{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:calc(var(--r-btn) + 3px);background:var(--paper-2)}
.pf-bill button{height:32px;padding:0 14px;border:0;border-radius:var(--r-btn);background:transparent;color:var(--muted);font:500 14px/1 var(--sans);cursor:pointer}
.pf-bill [aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.pf-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.pf-tier{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.pf-tier.is-pop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pf-tier-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.pf-tier h4{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em}
.pf-badge{padding:4px 8px;border-radius:6px;background:var(--accent-tint);color:var(--accent);font-size:13px;font-weight:500}
.pf-tier-line{color:var(--ink-2);font-size:15px;line-height:1.5}
.pf-price{font:500 22px/1.2 var(--sans);letter-spacing:-.02em}
.pf-price .pf-per{color:var(--muted);font-size:14px;font-weight:400;letter-spacing:0}
.pf-tier .list li{padding-block:10px;font-size:15px}
.pf-tier .list li::before{top:15px}
.pf-note{color:var(--muted);font-size:14px}
.pf-svcs{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pf-svc{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 32px;padding:18px 0;border-bottom:1px solid var(--line)}
.pf-svc h4{margin:0 0 4px;font-size:18px;font-weight:500;letter-spacing:-.015em}
.pf-svc div p{color:var(--muted);font-size:15px;line-height:1.5}
.pf-svc-price{font-weight:500;white-space:nowrap}
.pf-svc .text-link{font-size:16px}
.pf-hire{gap:24px}
.pf-hire h3{font-size:clamp(26px,2.4vw,34px)}
.pf-hire-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%}
.pf-hire-cols .small-label{margin-bottom:8px}
.pf-hire .btn{margin-top:0}
.pf-sessions{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.pf-sessions li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:16px 20px 16px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.pf-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--r);background:var(--accent-wash);color:var(--accent);line-height:1}
.pf-date span:first-child{font-size:22px;font-weight:700;letter-spacing:-.03em}
.pf-date span:last-child{margin-top:4px;font-size:12px;font-weight:500;text-transform:uppercase}
.pf-sessions h3{font-size:19px;line-height:1.25;letter-spacing:-.015em}
.pf-sessions li>div>p{margin-top:4px;color:var(--muted);font-size:15px}
.pf-session-cta{display:flex;align-items:center;gap:16px}
.pf-session-cta p{font-weight:500}
.pf-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pf-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.pf-row h3{padding-top:7px;font-size:16px;font-weight:500;letter-spacing:-.01em}
/* Tool tags carry the tool's mark, drawn in the text colour */
.tags--logos li{display:inline-flex;align-items:center;gap:8px}
.tags--logos li::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.tags--logos li[data-mono]::before{content:attr(data-mono);display:grid;place-items:center;border-radius:4px;-webkit-mask:none;mask:none;background:var(--fg);color:var(--surface);font-size:10px;font-weight:700;line-height:1}
.tags li.is-strong{border-color:var(--accent);background:var(--accent-tint);color:var(--accent);font-weight:500}
.pf-about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pf-about h3{margin-bottom:12px;font-size:20px;letter-spacing:-.02em}
.pf-about p{color:var(--ink-2);font-size:17px;line-height:1.6}
.pf-about p+p{margin-top:12px}
.pf-why{display:flex;flex-direction:column;gap:12px;margin:0;padding:24px;border-radius:var(--r-card);background:var(--accent-tint)}
.pf-why figcaption{color:var(--accent);font-size:14px;font-weight:500}
.pf-why blockquote{margin:0}
.pf-why p{font:500 19px/1.4 var(--sans);letter-spacing:-.015em;color:var(--fg)}
.pf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-steps .step-num{margin-bottom:20px;font-size:clamp(44px,4vw,64px)}
.pf-steps h3{font-size:20px}
.pf-faq{margin-top:16px}
.pf-bar{display:none}
@media (max-width:899px){
  .pf-layout{grid-template-columns:minmax(0,1fr)}
  .pf-main{grid-column:1}
  .pf-aside{display:none}
  .pf-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .pf-bar .pf-avail-date{font-size:17px}
  body:has(.pf-bar) .foot{padding-bottom:72px}
  .pf-tiers{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pf-head-in{flex-direction:column;align-items:flex-start}
  .pf-work-media{--wh:400px}
  .pf-offers,.pf-about,.pf-hire-cols,.pf-steps{grid-template-columns:minmax(0,1fr)}
  .pf-row{grid-template-columns:minmax(0,1fr)}
  .pf-row h3{padding-top:0}
  .pf-svc{grid-template-columns:minmax(0,1fr) auto}
  .pf-svc div{grid-column:1/-1}
  .pf-sessions li{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .pf-session-cta{grid-column:1/-1;justify-content:space-between}
  .pf-seg{align-self:stretch}
  .pf-seg button{flex:1;padding:0 8px}
}

/* Sub-pages (Join, Get started, Contact, legal): same grid, hairlines and indigo actions as the landing page */
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.sub-hero{padding:clamp(48px,6vw,96px) 0 clamp(32px,4vw,56px)}
.sub-hero h1{max-width:14em;font-size:clamp(44px,5.8vw,92px);line-height:.98;letter-spacing:-.045em}
.sub-hero .lede{margin:24px 0 0}
/* Join: industries as a slow photo band under the hero */
.ind-band{display:flex;flex-direction:column;gap:20px;padding:0 0 clamp(56px,7vw,96px)}
.ind-band h2{font-weight:500;letter-spacing:0}
.ind-marquee{position:relative;-webkit-mask-image:none;mask-image:none}
/* Soft blurred edges, the same treatment as the carousels on the home page */
.ind-marquee::before,.ind-marquee::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:clamp(48px,9vw,160px);pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ind-marquee::before{left:0;background:linear-gradient(to left,transparent,color-mix(in srgb,var(--bg) 55%,transparent));-webkit-mask-image:linear-gradient(to left,transparent,#000);mask-image:linear-gradient(to left,transparent,#000)}
.ind-marquee::after{right:0;background:linear-gradient(to right,transparent,color-mix(in srgb,var(--bg) 55%,transparent));-webkit-mask-image:linear-gradient(to right,transparent,#000);mask-image:linear-gradient(to right,transparent,#000)}
.ind-track{gap:var(--gutter);padding-right:var(--gutter);animation-duration:70s}
.ind-track li{position:relative;flex:none;width:clamp(200px,18vw,260px)}
.ind-track li::before{display:none}
.ind-track img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card)}
.ind-track span{position:absolute;left:10px;top:10px;padding:8px 12px;border-radius:var(--r-btn);background:#fff;font:500 15px/1 var(--sans);letter-spacing:-.01em}
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.who li{display:flex;flex-direction:column;gap:12px;padding:10px 10px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.who li>:not(img){margin-inline:14px}
.who img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:10px;margin-bottom:8px}
.who h3{font-size:22px;line-height:1.1}
.who p{color:var(--muted);font-size:15px;line-height:1.55}
#s-provide .pf-seg{margin-bottom:24px}
.join-panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:24px;align-items:stretch;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.join-panel-body{grid-column:1/span 6;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:clamp(4px,1vw,16px)}
.join-panel-body h3{font-size:clamp(28px,2.6vw,40px)}
.join-panel-img{grid-column:7/span 6;width:100%;height:100%;min-height:360px;max-height:520px;object-fit:cover;border-radius:var(--r)}
.form-sec{padding:0 0 clamp(72px,9vw,128px)}
#apply.form-sec{padding-top:clamp(64px,7.5vw,112px)}
.form-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:start}
.form-layout>:first-child{grid-column:1/span 4}
.form-layout>.o1-form{grid-column:6/span 7}
.form-intro{display:flex;flex-direction:column;gap:16px}
@media (min-width:900px){.form-intro{position:sticky;top:112px}}
.form-intro h2{font-size:clamp(36px,4vw,56px);line-height:1}
.form-intro p{color:var(--ink-2);font-size:18px}
.o1-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;font-weight:500}
.field--full{grid-column:1/-1}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);color:var(--fg);font:400 16px/1.4 var(--sans);transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{resize:vertical}
.field select{appearance:none;padding-right:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235e5e5e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.field input::placeholder,.field textarea::placeholder{color:#9a9a9a}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.field [aria-invalid="true"]{border-color:#c4331f}
.field [aria-invalid="true"]:focus{border-color:#c4331f;box-shadow:0 0 0 3px #fbe4e0}
/* Inline errors: one short line under the field or the group */
.field-error{display:block;color:#c4331f;font-size:13px;font-weight:500;line-height:1.4}
.check{flex-wrap:wrap}
.check .field-error{flex-basis:100%;padding-left:28px}
fieldset .field-error{margin-top:10px}
.has-error .chip span,.has-error .need>span::before{border-color:#c4331f}
.chips{min-width:0;margin:0;padding:0;border:0}
.chips legend{margin-bottom:10px;padding:0;font-size:14px;font-weight:500}
.chips>div{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);font-size:15px;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.chip input:checked+span{border-color:var(--accent);background:var(--accent-tint);color:var(--accent);font-weight:500}
.chip input:focus-visible+span{outline:2px solid var(--fg);outline-offset:2px}
@media (hover:hover){.chip:hover span{border-color:var(--fg)}}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
/* The label text takes the rest of the row and wraps inside it; with flex-wrap on .check (for the error line) a text wider than the row dropped under the box */
.check input+span{flex:1 1 0;min-width:0}
/* No link has an underline. In a sentence the colour and the heavier weight are what mark it */
.check a,.faq-head p a,.contact-list a.inline-link{color:var(--accent);font-weight:500}
@media (hover:hover){.check a:hover,.faq-head p a:hover,.contact-list a.inline-link:hover,.legal a:hover{color:var(--accent-hover)}}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:6px}
.form-msg{color:var(--accent);font-weight:500}
/* Sub-page header: the landing page's section head, title left and the line right */
.sub-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:20px;align-items:end}
.sub-head h1{grid-column:1/span 7;font-size:clamp(44px,5.8vw,92px);line-height:.98;letter-spacing:-.045em}
.sub-head .lede{grid-column:8/span 5;max-width:30em;margin:0;padding-bottom:8px;text-wrap:balance}
@media (min-width:900px){.sub-head .lede{justify-self:end;text-align:right}}

/* Contact: route list left, the form card right, as in Join's apply section */
.contact-list{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--line)}
.contact-list div{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list dt{color:var(--muted);font-size:14px}
.contact-list dd{margin:0;font-size:17px;line-height:1.5}
.contact-list a{color:var(--fg)}
@media (hover:hover){.contact-list a:hover{color:var(--accent)}}

/* Get started: one hairline card per question left, a sticky summary right, numbered like the process steps */
.gs-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:start}
.gs-aside{grid-column:9/span 4;grid-row:1;position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.gs-aside img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-card)}
.gs-main{grid-column:1/span 7;grid-row:1;min-width:0}
.gs-qs{display:flex;flex-direction:column}
.q{display:flex;flex-direction:column;gap:22px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
/* One card at a time; the script marks the current one */
.gs-qs>.q:not(.is-current){display:none}
.gs-qs.is-stepping>.q.is-current{animation:q-in .28s cubic-bezier(.32,.72,0,1)}
@keyframes q-in{from{opacity:0;transform:translateY(8px)}}
.q-title:focus{outline:none}
.q-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 12px;padding-top:4px}
/* Back stays left, the way forward sits on the right edge of the card */
.q-nav [data-next],.q .form-actions [data-send]{margin-left:auto}
.q-title{font-size:clamp(24px,2.2vw,32px);line-height:1.08}
/* Progress: "Step 2 of 3" over a thin bar at the top of the current card */
/* Auto-scroll stops the card just under the sticky nav, never behind it */
.gs-qs>.q,.fp-done{scroll-margin-top:96px}
.q-progress{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.q-progress-label{color:var(--muted);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.q-progress-bar{display:block;height:4px;border-radius:2px;background:var(--paper-2);overflow:hidden}
.q-progress-bar i{display:block;height:100%;border-radius:inherit;background:var(--fg);transform:scaleX(.333);transform-origin:left;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.q [data-intent-panel]{display:none;flex-direction:column;gap:22px}
.q-note{max-width:34em;color:var(--ink-2);font-size:16px;line-height:1.55}
.q-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* City and Country suggestions: a hairline list under the field */
.combo{position:relative}
.combo-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;max-height:272px;margin:0;padding:6px;overflow-y:auto;list-style:none;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:0 16px 32px -20px rgba(0,0,0,.35);transform-origin:top;animation:combo-in .15s ease-out}
@keyframes combo-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.combo-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-btn);font-size:15px;font-weight:400;cursor:pointer}
.combo-list li span{color:var(--muted);font-size:13px}
.combo-list .is-typed{color:var(--muted)}
.combo-list li:not(:only-child).is-typed{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 var(--r-btn) var(--r-btn)}
.combo-list [aria-selected="true"]{background:var(--accent-tint);color:var(--accent)}
.combo-list [aria-selected="true"] span{color:var(--accent)}
@media (hover:hover){.combo-list li:hover{background:var(--paper-2)}}
.q-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
/* What can we help with: a hairline list of choices, like the checklists on the landing page */
.needs{min-width:0;margin:0;padding:0;border:0}
.needs>div{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.need{position:relative;display:flex;border-bottom:1px solid var(--line);cursor:pointer}
.need input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.need>span{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;padding:16px 0 16px 34px;color:var(--muted);font-size:15px;line-height:1.5}
.need>span::before{content:"";position:absolute;left:0;top:20px;width:18px;height:18px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);transition:border-color .2s ease,border-width .2s ease}
.need strong{color:var(--fg);font-size:18px;font-weight:500;letter-spacing:-.015em;transition:color .2s ease}
.need input:checked+span::before{border:5px solid var(--accent)}
.need input:checked+span strong{color:var(--accent)}
.need input:focus-visible+span{outline:2px solid var(--fg);outline-offset:2px}
@media (hover:hover){.need:hover>span::before{border-color:var(--fg)}.need:hover strong{color:var(--accent)}}
.fp-title{font-size:20px;line-height:1.25;letter-spacing:-.015em}
.fp-summary{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--line)}
.fp-summary div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.fp-summary dt{color:var(--muted)}
.fp-summary dd{margin:0;font-weight:500;text-align:right}
.fp-done{gap:16px}
.fp-done h2{font-size:clamp(26px,2.4vw,34px);line-height:1.1;outline:none}
.fp-done>p{color:var(--ink-2);font-size:17px}
.fp-done h3{margin-top:12px;font-size:22px;letter-spacing:-.02em}
.fp-done .fp-sub{color:var(--muted);font-size:15px}
.fp-done .btn{align-self:flex-start}
.gs-cal{display:grid;place-items:center;height:240px;border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--paper-2);color:var(--muted);font-size:14px}

/* Legal: the title starts on the same column as the text, not over the contents list */
.legal-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:start}
.legal-head,.legal-layout>.legal{grid-column:5/span 8}
/* The contents list starts level with the title and stays beside the text */
.legal-sec{padding-top:clamp(48px,6vw,96px)}
.legal-head{grid-row:1;padding-bottom:clamp(0px,2vw,24px)}
.legal-layout>.legal{grid-row:2}
.legal-toc{grid-row:1/span 2;align-self:stretch}
.legal-toc>div{position:sticky;top:112px;display:flex;flex-direction:column;gap:12px}
.legal-head h1{max-width:14em;font-size:clamp(44px,5.8vw,92px);line-height:.98;letter-spacing:-.045em}
.legal-head .lede{margin:24px 0 0}
.legal-toc{grid-column:1/span 3}
.legal-toc ol{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.legal-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);font-size:14px;text-decoration:none;transition:color .2s ease,border-color .2s ease}
@media (hover:hover){.legal-toc a:hover{color:var(--fg);border-left-color:var(--fg)}}
.legal{max-width:720px}
.legal h2{margin:48px 0 12px;font-size:24px;line-height:1.2;letter-spacing:-.02em;scroll-margin-top:96px}
.legal p,.legal li{color:var(--ink-2);font-size:17px;line-height:1.65}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:20px}
.legal li+li{margin-top:6px}
.legal a{color:var(--accent);font-weight:500}
.legal-note{padding:16px 18px;border-radius:var(--r);background:var(--accent-tint);color:var(--accent)!important;font-size:15px!important}
@media (max-width:899px){
  .who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .join-panel{display:flex;flex-direction:column-reverse}
  .join-panel-img{min-height:0;max-height:none;aspect-ratio:4/3}
  .sub-head,.form-layout,.gs-form,.legal-layout{grid-template-columns:minmax(0,1fr)}
  .sub-head h1,.sub-head .lede,.form-layout>:first-child,.form-layout>.o1-form,.gs-main,.legal-head,.legal-layout>.legal{grid-column:1}
  /* The form comes first on small screens; the summary repeats what is already on screen, so it goes */
  .contact-layout>.o1-form{order:-1}
  .gs-aside{display:none}
  .legal-toc{display:none}
}
@media (max-width:640px){
  .who,.o1-form,.q-two,.q-fields{grid-template-columns:minmax(0,1fr)}
  .who img{aspect-ratio:16/10}
  #s-provide .pf-seg{display:flex}
  #s-provide .pf-seg button{flex:1;padding:0 8px}
}

/* Responsive */
@media (max-width:1100px){
  .nav-links{gap:18px}
}
@media (max-width:899px){
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex}
  .nav-in{grid-template-columns:1fr auto;height:64px}
  .hero-row,.sec-head,.panel,.ind-layout,.join-body,.founder,.faq-layout,.foot-main{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.layers,.sec-head h2,.sec-aside,.ind-list,.join h2,.join-side,.founder-copy,.founder .video-frame,.faq-head,.faq-list,.foot-cta,.foot-nav{grid-column:1/-1}
  .hero-copy{padding-right:0}
  .layers{width:min(100%,520px);margin-top:48px}
  .layer{width:56%}
  .layer:nth-child(2){left:22%}
  .layer:nth-child(3){left:44%}
  .sec-aside{padding-top:0}
  .sec-sub{grid-column:1/-1}
  .svc{position:static;display:flex;flex-direction:column-reverse;gap:24px}
  .svc-img{height:auto;min-height:0;max-height:none;aspect-ratio:4/3}
  .sec-aside--span{grid-row:auto}
  .ind-media{grid-column:1;position:static;margin-bottom:28px}
  .ind-list{grid-column:1;flex-direction:row;flex-wrap:wrap;gap:2px 16px}
  .ind-title{font-size:clamp(28px,8vw,40px)}
      .steps{grid-template-columns:minmax(0,1fr)}
  .step-num{margin-bottom:16px}
  .join-side{margin-top:24px}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .menu{--pad:16px}
  /* Tap targets: at least ~40px tall on phones */
  .ind-title{padding:5px 0}
  .foot-nav nav{gap:4px}
  .foot-nav a{padding:8px 0}
  a.work-by{padding:10px 0;margin:-10px 0}
  .sec{padding:56px 0}
  .sec-head{margin-bottom:28px}
  .hero{padding-top:32px}
  .track{scroll-padding-inline:16px;padding-inline:16px;gap:16px}
  .tools-in{flex-direction:column;align-items:flex-start;gap:12px}
  .marquee{width:100%}
  .layer span{padding:8px 10px;font-size:17px}
  .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq summary{font-size:20px}
  .join h2{font-size:clamp(32px,11vw,40px)}
    .faq p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .marquee-track{flex-wrap:wrap;row-gap:12px}
  .ind-marquee{overflow-x:auto}
  .ind-track{flex-wrap:nowrap}
  .marquee-track[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* Motion (shared/motion.js): hold the hero entrance hidden until GSAP takes over; a 3s fallback in the head reveals it regardless */
.motion-pending [data-split],.motion-pending [data-after],.motion-pending [data-enter]>*{visibility:hidden}

/* Layers logo motion.
   Opening: the first page of a visit builds the mark once (html.lc-first, set in <head>), then the name follows.
   Pointing: the squares step a little apart. Loading: brand-motion.js covers the page with the mark between pages, but only when a page is slow (400ms).
   Sending: forms.js shows the mark in the submit button. Reduced motion: none of it moves. */
@keyframes lc-in{from{opacity:0}to{opacity:1}}
@keyframes lc-step{from{opacity:0;translate:var(--from) var(--from)}to{opacity:1;translate:0 0}}
@keyframes lc-name{from{opacity:0;translate:-4px 0}to{opacity:1;translate:0 0}}
@keyframes lc-gather{0%,14%{translate:0 0}44%,58%{translate:var(--to) var(--to)}88%,100%{translate:0 0}}
@keyframes lc-cover-out{to{opacity:0}}
.logo rect,.lc-cover rect,.btn-mark rect{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  /* backwards only: once built, the squares go back to their own styles so the pointing movement still works */
  html.lc-first .nav .logo rect:nth-of-type(1){animation:lc-in .35s ease-out .15s backwards}
  html.lc-first .nav .logo rect:nth-of-type(2){--from:-25%;animation:lc-step .5s cubic-bezier(.2,.7,.2,1) .3s backwards}
  html.lc-first .nav .logo rect:nth-of-type(3){--from:-50%;animation:lc-step .5s cubic-bezier(.2,.7,.2,1) .45s backwards}
  html.lc-first .nav .logo span{animation:lc-name .5s cubic-bezier(.2,.7,.2,1) .8s backwards}
  .logo rect{transition:translate .35s cubic-bezier(.2,.7,.2,1)}
  .logo:is(:hover,:focus-visible) rect:nth-of-type(1){translate:-14% -14%}
  .logo:is(:hover,:focus-visible) rect:nth-of-type(3){translate:14% 14%}
  .lc-cover rect:nth-of-type(1),.btn.is-sending .btn-mark rect:nth-of-type(1){--to:25%;animation:lc-gather 1.6s cubic-bezier(.65,0,.35,1) infinite}
  .lc-cover rect:nth-of-type(3),.btn.is-sending .btn-mark rect:nth-of-type(3){--to:-25%;animation:lc-gather 1.6s cubic-bezier(.65,0,.35,1) infinite}
}
/* Leaving a page that is slow to answer: the paper colour covers it and the mark moves until the next page arrives */
.lc-cover{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--bg);opacity:0;transition:opacity .2s ease}
.lc-cover.on{opacity:1}
.lc-cover svg{width:56px;height:56px;overflow:visible}
/* Arriving after a slow load: the same cover is already in place before the page paints (brand-motion.js flags it only when
   the cover was shown), and fades away once the page is ready. lc-cover-out is the fallback if brand-motion.js never runs */
html.lc-arrive body::before{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='20' height='20' rx='1' fill='%23d6d6d6'/%3E%3Crect x='5' y='5' width='20' height='20' rx='1' fill='%238a8a8a'/%3E%3Crect x='10' y='10' width='20' height='20' rx='1' fill='%23000'/%3E%3C/svg%3E") center/56px 56px no-repeat;animation:lc-cover-out .35s ease 2.5s forwards}
html.lc-arrive.lc-arrived body::before{opacity:0;transition:opacity .35s ease}
/* Sending: the mark sits in the button next to "Sending" */
.btn .btn-mark{display:none;width:16px;height:16px;margin-right:10px;overflow:visible;flex-shrink:0}
.btn.is-sending{pointer-events:none}
.btn.is-sending .btn-mark{display:block}

/* Events (Home "Live with experts", the event page's "More upcoming events"): one card per session */
.ev-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.ev-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ev-card{display:flex;flex-direction:column;gap:16px;padding:10px 10px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.ev-media{position:relative}
.ev-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px}
.ev-tag{position:absolute;left:10px;top:10px;padding:7px 11px;border-radius:var(--r-btn);background:#fff;font:500 13px/1 var(--sans);letter-spacing:0}
.ev-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:0 8px}
.ev-when{color:var(--muted);font-size:14px}
.ev-body h3{font-size:22px;line-height:1.15;letter-spacing:-.025em}
.ev-host{font-size:15px}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.ev-foot p{color:var(--muted);font-size:14px}

/* Event page: facts strip under the title, then the session beside a sticky registration card */
.ev-hero{padding:clamp(48px,6vw,96px) 0 clamp(28px,3.5vw,48px)}
.ev-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ev-hero h1{max-width:14em;font-size:clamp(44px,5.8vw,92px);line-height:.98;letter-spacing:-.045em}
.ev-hero .lede{max-width:30em;margin:0}
.ev-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.ev-facts div{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border-left:1px solid var(--line)}
.ev-facts div:first-child{border-left:0}
.ev-facts dt{color:var(--muted);font-size:14px}
.ev-facts dd{margin:0;font:500 clamp(17px,1.5vw,20px)/1.25 var(--sans);letter-spacing:-.015em}
.ev-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px)}
.ev-main{grid-column:1/span 7;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px);min-width:0}
.ev-main section{display:flex;flex-direction:column;gap:20px}
.ev-main h2{font-size:clamp(28px,2.6vw,40px);line-height:1.02}
.ev-lead{color:var(--fg);font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.ev-main section>p:not(.ev-lead){color:var(--ink-2);font-size:17px;line-height:1.6}
.ev-aside{grid-column:9/span 4;position:sticky;top:96px;scroll-margin-top:96px}
.ev-form-head{display:flex;flex-direction:column;gap:6px}
.ev-form-head h2{font-size:26px;line-height:1.05}
.ev-form-head p{color:var(--muted);font-size:15px}
.ev-form .btn{width:100%}
.ev-host-card{display:grid;grid-template-columns:clamp(120px,14vw,176px) minmax(0,1fr);gap:24px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.ev-host-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.ev-host-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 12px 8px 0}
.ev-host-body h3{font-size:24px}
.ev-host-body p{color:var(--ink-2);font-size:16px;line-height:1.5}
.ev-host-body .ev-host-role{color:var(--muted);font-size:14px}
.ev-host-body .text-link{margin-top:6px;font-size:16px}
@media (max-width:899px){
  .ev-cards,.ev-cards--2{grid-template-columns:minmax(0,1fr)}
  .ev-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-facts div:nth-child(3){border-left:0}
  .ev-facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .ev-layout{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .ev-main,.ev-aside{grid-column:1}
  .ev-aside{position:static}
}
@media (max-width:640px){
  .ev-host-card{grid-template-columns:minmax(0,1fr)}
  .ev-host-body{padding:4px 8px 12px}
}

/* Profile: a small thumbnail beside each offer's title, and the top three strengths set apart from the rest of the list */
.pf-card-head{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pf-card-img{flex:none;width:72px;height:72px;object-fit:cover;border-radius:10px}
@media (max-width:640px){.pf-card-img{width:56px;height:56px}}
.tags--top li{padding:10px 16px;font-size:16px}
.pf-row:has(.tags--top) h3{padding-top:16px}
@media (max-width:640px){.pf-row:has(.tags--top) h3{padding-top:0}}