/* createco.ca, after eidra.com's measured layout (replica/design/tokens.json). 30px gutter, full width. */
:root{--g:30px;--cream:#f5f2ec;--mute:#6f6f6f;--line:#d9d9d9}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:#000;font:400 16px/1.4 Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;width:100%}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:.95}
h1,.t122{font-size:9.25vw}.t73{font-size:5.1vw}
p{font-weight:700;font-size:15px;line-height:1.25;color:var(--mute)}
.ar{width:46px;height:32px;fill:none;stroke:currentColor;stroke-width:1.3}
.go{display:inline-block;margin-top:28px}
.up{opacity:0;transform:translateY(60px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}.up.in{opacity:1;transform:none}
/* header: white text that inverts over light areas, like the reference */
/* menu: solid white bar like before (Kay 2026-10-15) */
.hd{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 var(--g);color:#000;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font-weight:600;font-size:15px}
.hd .logo{font-weight:700;font-size:21px}.hd nav{display:flex;gap:14px}
/* hero */
.hero{position:relative;height:120vh;background:#000;color:#fff;overflow:hidden}
.hero img{position:sticky;top:0;height:100vh;object-fit:cover}
/* the shop photo is light with a calm wall at the top: headline sits up there in black (Kay 2026-10-15) */
.hero{background:#f3efe9;color:#111}
.hero h1{position:absolute;left:var(--g);top:84px}
/* services strip */
.s2{padding:240px 0 120px}.s2 h2{padding:0 var(--g);margin-bottom:96px}
.strip{overflow:hidden}.strip-track{display:flex;width:max-content;animation:slide 60s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.col{width:368px;flex:none;border-left:1px solid var(--line);padding:0 40px 0 18px;height:230px;display:flex;flex-direction:column;justify-content:space-between}
.col h3{font-size:2.55vw;font-size:clamp(26px,2.55vw,37px)}
@keyframes slide{to{transform:translateX(-50%)}}
.s2 .go{margin:56px var(--g) 0}
/* cream */
.cream{background:var(--cream);padding:80px var(--g);display:grid;grid-template-columns:1fr 1fr;min-height:840px}
.cream-l{display:flex;flex-direction:column;justify-content:space-between}
.cream-b p{max-width:300px}
.orbit{position:relative;align-self:center;aspect-ratio:1;max-width:640px;width:100%;justify-self:end}
.orbit svg{position:absolute;inset:0}
.orbit span{position:absolute;font-size:14px;color:var(--mute);font-weight:600;line-height:1.2}
.orbit b{display:block;color:#000;font-size:16px;margin-bottom:4px}
.o-c{left:50%;top:50%;transform:translate(-50%,-50%);color:#fff!important;font-weight:700!important}
.o-l{left:16%;top:46%}.o-r{left:68%;top:46%}
.o-t{left:50%;top:2.5%;transform:translateX(-50%);letter-spacing:.1em;font-size:11px!important}
.o-b{left:50%;bottom:2.5%;transform:translateX(-50%);letter-spacing:.1em;font-size:11px!important}
/* black band with two image cards */
.band{background:#000;display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.b-card{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--g)}
.b-card img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.b-card:hover img{transform:scale(1.03)}
.b-card>*:not(img){position:relative;z-index:1}
.b-card h3{font-size:clamp(34px,3.47vw,50px)}
/* statement + case cards */
.s5{padding:240px 0 160px}
.s5-h{padding:0 var(--g);display:grid;grid-template-columns:1fr;gap:56px;margin-bottom:96px}
.s5-b p{max-width:260px}
.cards{display:flex;gap:16px;padding:0 var(--g);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.card{position:relative;flex:none;width:28vw;min-width:300px;aspect-ratio:403/520;overflow:hidden;color:#fff;scroll-snap-align:start;background:#111;display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.card img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.card:hover img{transform:scale(1.04)}
.card>*:not(img){position:relative;z-index:1}
.card h3{font-size:clamp(28px,3.47vw,50px);line-height:.95}
.card .n{position:absolute;right:20px;bottom:24px;font-weight:600;font-size:14px}
.card.more{background:var(--cream);color:#000}
/* systems rows */
.s6{padding:120px var(--g) 160px}
.s6-h{display:grid;grid-template-columns:1fr 1fr;margin-bottom:64px}.s6-h p{max-width:300px}
.row{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-top:1px solid var(--line);padding:22px 0;min-height:130px}
.row:last-child{border-bottom:1px solid var(--line)}
.row span{font-weight:700;font-size:15px}
.row b{font-weight:300;font-size:clamp(40px,5.6vw,80px);letter-spacing:-.03em;line-height:1}
.row:hover b{font-weight:400}
/* CTA + footer */
.cta{background:#000;color:#fff;min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 var(--g)}
.ft{background:#000;color:#fff;padding:120px var(--g) 0;overflow:hidden}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr) 2fr;gap:24px}.ft p{color:#bdbdbd;font-size:14px;line-height:1.5}
.ft-c{margin-top:80px}
.ft-word{font-weight:700;font-size:21vw;letter-spacing:-.045em;line-height:.78;margin-top:40px;transform:translateY(10%)}
@media (max-width:820px){
  :root{--g:16px}
  h1,.t122{font-size:15vw}.t73{font-size:10vw}
  .hd nav a:nth-child(3){display:none}
  .cream,.band,.s6-h{grid-template-columns:1fr}.orbit{justify-self:center;margin-top:48px}
  .band .b-card{min-height:70vh}.col{width:260px}
  .card{width:78vw}.row{grid-template-columns:1fr}.ft-cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none}.strip-track{animation:none}}

/* cream band right side: steps list instead of a diagram (Kay 2026-10-15) */
.steps{list-style:none;align-self:end;border-top:1px solid #d9d4ca}
.steps li{display:flex;justify-content:space-between;align-items:baseline;padding:24px 0;border-bottom:1px solid #d9d4ca;color:var(--mute);font-weight:700;font-size:15px}
.steps b{color:#000;font-size:clamp(26px,2.55vw,37px);font-weight:700;letter-spacing:-.01em}

/* v5: our own take (Kay 2026-10-15 "don't copy it exactly"): Eidra's big type and bands, mixed with Create Co.'s own
   bento tiles (8px), pill buttons, the real logo with its sky-blue plus, and a light footer */
.hd .logo img{height:26px;width:auto}
.pill{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff!important;border-radius:999px;padding:10px 20px;font-weight:600;font-size:15px}
.pill.blue{background:#000;color:#000!important}
.hd .pill{padding:8px 16px}
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:minmax(220px,auto);gap:12px;padding:0 var(--g)}
.tile{background:#f4f4f5;border-radius:8px;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between}
.tile:first-child{grid-row:span 2;background:#eef3f6}
.tile .num{font-weight:700;font-size:14px;color:#888}
.tile h3{font-size:clamp(26px,2.55vw,37px);margin-top:auto;margin-bottom:12px}
.tile.dark{background:#000;color:#fff}.tile.dark p{color:#bdbdbd}.tile.dark .num{color:#000}
.b-card,.card{border-radius:8px}
.band{gap:12px;padding:12px var(--g);min-height:0}.band .b-card{min-height:86vh}
.cards{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.card{width:auto;min-width:0}
.s5-b .pill{margin-top:24px}
.row span{color:#888}
.cta{place-items:start;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:80vh;gap:48px}
.cta-b{display:flex;gap:24px;align-items:center}.cta .mail{color:#fff;font-weight:600;border-bottom:1px solid #fff;padding-bottom:3px}
.ft{background:#f4f4f5;color:#000;padding:72px var(--g) 56px}
.ft-cols{grid-template-columns:2fr 1.5fr 1fr 1fr;align-items:start}.ft p{color:var(--mute)}
.ft-logo{width:min(320px,100%)}
@media (max-width:820px){.bento{grid-template-columns:1fr}.tile:first-child{grid-row:auto}.cards{grid-template-columns:1fr}.hd nav a:not(.pill){display:none}.cta-b{flex-wrap:wrap}}
.tile.dark{grid-column:1/-1;min-height:170px}@media (max-width:820px){.tile.dark{grid-column:auto}}
/* menu: see-through at the very top, white bar once the page scrolls (Kay 2026-10-15) */
.hd{background:transparent;backdrop-filter:none;transition:background .3s}
.hd.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
/* menu line-up (Kay 2026-10-15): logo, links and button share one centre line */
.hd{align-items:center}
.hd .logo{display:flex;align-items:center;height:64px}
.hd nav{display:flex;align-items:center;gap:22px;height:64px}
.hd nav a{display:inline-flex;align-items:center;line-height:1}
.hd .pill{height:38px;padding:0 18px;line-height:1}
/* hero is exactly one screen: no beige strip left under the photo (Kay 2026-10-15) */
.hero{height:100vh;height:100svh;min-height:560px}
.hero img{position:absolute;inset:0;height:100%}
.s2{padding-top:120px}

/* v6: our own systems cards and CTA band (Kay 2026-10-15: keep the big headline and the service strip, make the rest ours) */
.sys{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sys-card{background:#f4f4f5;border-radius:8px;padding:22px 20px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.sys-card:hover{background:#ebebec}
.sys-card .num{font-weight:700;font-size:14px;color:#888}
.sys-card b{font-size:clamp(22px,1.9vw,28px);font-weight:700;letter-spacing:-.01em;line-height:1.05;margin-top:auto;margin-bottom:18px}
.pill.sm{align-self:flex-start;padding:7px 14px;font-size:13px}
.cta{background:#000;color:#000;min-height:0;padding:90px var(--g);flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px}
.cta .pill.blue{background:#000;color:#fff!important}
.cta .mail{color:#000;border-color:#000}
@media (max-width:820px){.sys{grid-template-columns:1fr 1fr}.cta{flex-direction:column;align-items:flex-start}}

/* no arrows on Create Co. (Kay 2026-10-15): pill buttons instead */
.pill.go{margin-top:28px}.s2 .pill.go{margin-left:var(--g)}
.pill.light{background:#fff;color:#000!important;align-self:flex-start}
/* small descriptions: regular weight, a touch larger, softer grey (Kay 2026-10-15: the reference's bold small text felt heavy) */
p{font-weight:400;font-size:16px;line-height:1.45;color:#666}
.steps li,.row span{font-weight:400}

/* services heading with its button on the same line, button at the right (Kay 2026-10-15) */
.s2-h{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--g);margin-bottom:96px}.s2-h h2{padding:0;margin:0}.s2{padding-bottom:140px}
@media (max-width:820px){.s2-h{flex-direction:column;align-items:flex-start;gap:20px}}

/* what each service includes, between the title and the line (Kay 2026-10-15) */
.col{height:300px}
.col ul{list-style:none;margin-top:22px;margin-bottom:auto}
.col li{font-size:15px;color:#222;padding:7px 0;border-bottom:1px solid #eee}
.col li:last-child{border-bottom:0}
.col p{margin-top:18px}

/* scroll-driven sideways strip: section pins, vertical scroll slides the columns (no auto animation) */
.strip-track{animation:none!important;transition:transform .08s linear}
.s2{position:relative;padding:0}
.s2-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.s2-h{margin-bottom:72px}
@media (max-width:820px){.s2{height:auto!important;padding:80px 0}.s2-pin{position:static;height:auto}.strip{overflow-x:auto}}

/* middle line in each column: one short sentence, no list (Kay 2026-10-15) */
.col .mid{display:block;margin:28px 0 auto;font-weight:300;font-size:clamp(19px,1.5vw,22px);line-height:1.3;color:#111;max-width:280px}

/* no blue (Kay 2026-10-15: dropping it from the logo too): CTA band in cream, black buttons */
.cta{background:var(--cream)}
/* no black frame behind the two photo cards (Kay 2026-10-15) */
.band{background:#fff}
/* light photos: titles in black, keep the café owner in frame */
.b-card{color:#000}.b-card h3{color:#111}
.b-card:last-child img{object-position:15% 50%}
/* titles sit under the photos, not on top of faces (Kay 2026-10-15) */
.band .b-card{padding:0;min-height:0;display:grid;grid-template-rows:auto auto;gap:18px;background:transparent}
.band .b-card img{position:static;height:auto;aspect-ratio:4/3;border-radius:8px}
.band .b-card h3{order:2}
.band .b-card .pill{order:3;background:#000;color:#fff!important;justify-self:start}
.band{padding:40px var(--g) 80px;gap:24px}
/* service middle line a bit heavier (Kay 2026-10-15) */
.col .mid{font-weight:500}
/* One studio: compact, title + text + button together on the left, steps aligned to the top on the right (Kay 2026-10-15) */
.cream{min-height:0;padding:120px var(--g);align-items:start;gap:64px;position:relative}
.cream-l{justify-content:flex-start;gap:36px}
.cream-b p{max-width:420px}
.cream .steps{align-self:start;margin-top:8px}
.steps li{padding:20px 0}

/* black statement band before One studio (Kay 2026-10-15) */
.q{background:#000;color:#fff;padding:180px var(--g);min-height:90vh;display:flex;align-items:center}
/* buttons sit in the empty space beside the big titles, not under them (Kay 2026-10-15) */
.band .b-card{grid-template-columns:1fr auto;align-items:end}
.band .b-card img{grid-column:1/-1}
.band .b-card .pill{justify-self:end;margin-bottom:6px}
.s5-h{grid-template-columns:1fr auto;align-items:end}
.s5-b{text-align:right}.s5-b p{margin-left:auto}
.s6-h{align-items:end}.s6-h>div{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.s6-h p{margin-left:auto}
/* work: note + button on their own line under the big title, at the right edge (Kay 2026-10-15) */
.s5-h{grid-template-columns:1fr;gap:28px}
.s5-b{justify-self:end;display:flex;align-items:center;gap:24px}.s5-b .pill{margin-top:0}
/* See all work: same row as the big title, bottom right (Kay 2026-10-15) */
.s5-h{grid-template-columns:1fr auto;align-items:end}.s5-b{margin-bottom:14px}
.s5-b{display:flex;flex-direction:column;align-items:flex-end;gap:16px}.s5-b p{font-weight:600;color:#222;margin:0}
/* sub lines under big titles: weight 600, dark (Kay 2026-10-15) */
.cream-b p,.s6-h p,.s5-b p{font-weight:600;color:#222}
.col{height:230px}.col p{font-weight:600;color:#222}

/* services: shorter columns, round arrow buttons on both sides show there is more (Kay 2026-10-15) */
.col{height:170px}
.strip{position:relative}
.snav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:#000;color:#fff;font:400 28px/1 Outfit,sans-serif;cursor:pointer;display:grid;place-items:center;padding-bottom:4px;transition:opacity .3s}
.snav.prev{left:var(--g)}.snav.next{right:var(--g)}
.snav.off{opacity:0;pointer-events:none}
@media (max-width:820px){.snav{display:none}}
/* services: See the work sits right beside the heading, not at the far edge (Kay 2026-10-15) */
.s2-h{justify-content:flex-start;gap:48px}.s2-h .pill{margin-bottom:10px}
/* black question band: less height (Kay 2026-10-15) */
.q{min-height:0;padding:120px var(--g)}
/* services: content starts near the top, not centred in the screen (Kay 2026-10-15) */
.s2-pin{justify-content:flex-start;padding-top:120px}

/* small label above each big heading (Kay 2026-10-15), copy via copywriting skill */
.eb{display:block;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.2;margin-bottom:22px;color:#777}
.q .eb,.cta .eb{color:#999}
/* menu after scroll: see-through frosted glass, not solid white (Kay 2026-10-15) */
.hd.scrolled{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
/* menu links closer together (Kay 2026-10-15) */
.hd nav{gap:14px}.hd nav .pill{margin-left:8px}
/* services: balanced, equal space above and below (Kay 2026-10-15) */
.s2-pin{justify-content:center;padding-top:64px}

/* small label sits tight on its heading (Kay 2026-10-15) */
.eb{margin-bottom:4px}
/* small label sits tight on its heading (Kay 2026-10-15) */
.eb{margin-bottom:4px}
/* services, clean: the line sits under its title, slightly larger; columns shorter so nothing looks empty (Kay 2026-10-15) */
.col{height:auto;padding-bottom:8px}
.col p{margin-top:14px;font-size:19px;font-weight:400;color:#444;line-height:1.4;max-width:280px}
.col{justify-content:flex-start}.col p{margin-top:14px!important}
.snav{box-shadow:0 0 0 8px #fff}

/* systems in the same column style as the services; only booking is live (Kay 2026-10-15) */
.sys{grid-template-columns:repeat(5,1fr);gap:0}
.scol{border-left:1px solid var(--line);padding:0 28px 8px 18px;display:flex;flex-direction:column;align-items:flex-start}
.scol .st{font-size:14px;font-weight:600;color:#000;margin-bottom:14px}
.scol.soon .st{color:#999}
.scol h3{font-size:clamp(22px,1.9vw,28px);line-height:1.1}
.scol p{margin-top:14px;font-size:17px;font-weight:400;color:#444;line-height:1.45}
.scol .pill{margin-top:22px}
@media (max-width:820px){.sys{grid-template-columns:1fr}.scol{border-left:0;border-top:1px solid var(--line);padding:22px 0}}
/* footer: small logo, not a giant one (Kay 2026-10-15) */
.ft-logo{width:140px}
/* See the work: right edge, vertically centred on the heading (Kay 2026-10-15) */
.s2-h{justify-content:space-between;align-items:center}.s2-h .pill{margin-bottom:0}
/* hero stays put; the page below slides up over it, and the headline drifts down as you scroll (Kay 2026-10-15) */
.hero{position:sticky;top:0;z-index:0}
.hero h1{will-change:transform}
.hero ~ section,.hero ~ footer{position:relative;z-index:1}
.hero ~ section:not(.cream):not(.q):not(.cta){background:#fff}
/* one photo per service, all in the same bright tone (Kay 2026-10-15) */
.col img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin:18px 0 0}
/* Branding / Web: full-bleed, joined to the cream section, titles inside the photos (Kay 2026-10-15) */
.band{padding:0;gap:0;background:#fff}
.band .b-card{position:relative;display:block;padding:0}
.band .b-card img{aspect-ratio:auto;height:92vh;width:100%;object-fit:cover;border-radius:0}
.band .b-card h3{position:absolute;left:var(--g);top:36px;color:#111}
.band .b-card .pill{position:absolute;left:var(--g);bottom:36px;margin:0}
@media (max-width:820px){.band .b-card img{height:70vh}}
/* scroll glides to the start of the next section and settles there (Kay 2026-10-15).
   proximity, not mandatory: the long sideways services section still scrolls freely */
html{scroll-snap-type:y proximity}
.hero ~ section,.hero ~ footer,.hero{scroll-snap-align:start}
.s2{scroll-snap-align:none}.s2 .s2-pin{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}
/* band titles sit at the top, just under the fixed menu (Kay 2026-10-15: low titles were hard to see) */
.band .b-card h3{top:100px;bottom:auto}
/* black question band: full screen (Kay 2026-10-15) */
.q{min-height:100vh;min-height:100svh;padding:0 var(--g);display:flex;flex-direction:column;justify-content:center}
.q{align-items:flex-start}.q h2{margin:0}
.band .b-card img{height:100vh;height:100svh}
/* four services fit the screen: a plain 4-column row, no sideways scroll or arrows (Kay 2026-10-15) */
.strip-track{display:grid;grid-template-columns:repeat(4,1fr);width:auto;padding:0 var(--g);transform:none!important}
.col{width:auto;padding:0 22px 8px}.col:first-child{border-left:0;padding-left:0}
.col h3{font-size:clamp(22px,2.1vw,30px);white-space:nowrap}
.snav{display:none!important}
@media (max-width:820px){.strip-track{grid-template-columns:1fr}.col{border-left:0;padding:0 0 28px}.col h3{white-space:normal}}
.strip-track{padding:0 8px}.col,.col:first-child{padding:0 22px 8px}
.strip-track{grid-template-columns:repeat(4,minmax(0,1fr))}.col h3{font-size:clamp(20px,1.9vw,27px)}
/* work cards: soft dark fade top and bottom so white text reads on light photos (2026-10-15) */
.card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0) 45%,rgba(0,0,0,0) 72%,rgba(0,0,0,.4))}
.card>*:not(img){z-index:2}
.card.more::before{display:none}
/* Branding / Web band: smaller photos, title and button above each photo, outside it (Kay 2026-10-15: photos too big, text on the photo hard to see) */
.band{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:120px var(--g);background:#fff;min-height:0}
.band .b-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:end;gap:22px 16px;padding:0}
.band .b-card h3{position:static;grid-column:1;grid-row:1;color:#111;text-align:left}
.band .b-card .pill{position:static;grid-column:2;grid-row:1;margin:0 0 6px;background:#000;color:#fff!important}
.band .b-card img{position:static;grid-column:1/-1;grid-row:2;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.b-card:first-child img{object-position:50% 40%}
@media (max-width:820px){.band{grid-template-columns:1fr;gap:56px;padding:80px var(--g)}.band .b-card img{height:auto}}
/* less empty space between the photo band and Our work (Kay 2026-10-15) */
.band{padding-bottom:0}.s5{padding-top:120px}
/* headings: questions = hero size, section intros = .t73 (Kay 2026-10-15). On phones let question text wrap on its own */
@media (max-width:820px){.t122 br{display:none}}
/* How we work: full screen like the question band, content centred (Kay 2026-10-15) */
.cream{min-height:100vh;min-height:100svh;align-content:center;align-items:center;padding-top:96px;padding-bottom:96px}
.cream .steps{align-self:center;margin-top:0}
/* menu has no Start a project button (Kay 2026-10-15), so phones show the text links instead */
@media (max-width:820px){.hd nav a:not(.pill){display:inline-block}}
@media (max-width:820px){.hd nav{gap:14px}.hd nav a{font-size:14px;margin:0}.hd .logo img{height:20px;width:auto}}
/* services read as steps, sketch to launch (Kay 2026-10-15): number + line over each column */
.col .stp{display:block;border-top:2px solid #111;padding-top:14px;margin-bottom:12px;font-size:15px;font-weight:600;color:#111;letter-spacing:.02em}
.strip-track .col{border-left:0}
@media (max-width:820px){.strip-track{grid-template-columns:1fr;gap:36px;padding:0 var(--g)}.col,.col:first-child{padding:0}.col h3{white-space:normal}.s2-h{padding:0 var(--g);align-items:flex-start}}
/* hero video: overhead laptop on a wood desk, white headline over a soft dark wash (Kay 2026-10-16) */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-v{background:#2b2116;color:#fff}
.hero-v::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 55%,rgba(0,0,0,.25));pointer-events:none}
.hero-v h1{z-index:1}
/* over the dark hero video the header is white until you scroll */
body:has(.hero-v) .hd:not(.scrolled){color:#fff}
body:has(.hero-v) .hd:not(.scrolled) .logo img{filter:invert(1)}
/* laptop video: the laptop fills the right half, so the headline stays in the left half, middle of the screen (Kay 2026-10-16) */
@media (min-width:821px){
.hero-v h1{max-width:48vw;top:50%;margin-top:-1.55em}
.hero-v::after{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.15) 55%,rgba(0,0,0,.1))}
}
/* "and" on its own line on desktop (Kay 2026-10-16); phones keep "Brands and" together */
.hero h1 br.hv{display:none}
@media (min-width:821px){.hero-v h1 br.hv{display:inline}.hero-v h1{margin-top:-2.05em}}
@media (min-width:821px){.hero-v h1{top:44%}}