/* Homepage in the pilot system, 2026-09-19. Tokens only: from Services down the page is night. */
/* hero: the same light headline as every other page; the typed word is the cobalt accent */
.hero .hm-chip{position:relative;z-index:2;margin-bottom:22px}
.hero__h1{font-family:'General Sans',system-ui;font-weight:400;letter-spacing:-.03em;line-height:1.02}
.hero__h1 em{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* section heads replace the old peak headings */
.fit .bx-head,.svc .bx-head,.faq .bx-head,.revs .bx-head{text-align:center}
.faq__grid{display:block}
.faq__list{max-width:780px;margin-inline:auto}
/* pricing: build + retainer as one conversation, like the pricing page */
.hm-combo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;max-width:820px;margin:0 auto}
.hm-combo > div:not(.hm-combo__plus){display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-align:center;background:var(--pv-card);border:1px solid var(--stroke)}
.hm-combo__art{position:relative;display:block;height:220px;overflow:hidden;background:#071033}
.hm-combo__in{padding:22px 26px 26px}
.hm-combo h3{margin:4px 0 8px;font-family:'General Sans',system-ui;font-weight:500;font-size:22px;color:var(--ink-1)}
.hm-combo__k{margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.hm-combo__p{margin:0;font-size:28px;font-weight:400;color:var(--ink-1)}
.hm-combo__p small{font-size:15px;color:var(--ink-3)}
.hm-combo__plus{font-size:28px;color:var(--ink-3)}
.hm-center{justify-content:center}
/* close: the light headline */
.final__h{font-family:'General Sans',system-ui;font-weight:400;letter-spacing:-.03em}
.final__h em{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;color:var(--accent)}
.final__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:720px){
  .hero__in{text-align:center}
  .hero__h1{margin-inline:auto}
  .hero__ctas{justify-content:center}
  .hm-combo{grid-template-columns:1fr}
}
.room .svc__more,.proof .wk__all,.proof > .wrap > a.ilink:last-child{display:table;margin-inline:auto}
@media (max-width:720px){.hero__live{left:0;right:0;text-align:center}}
.revs .bx-head + .revs__track{margin-top:0}
/* v6 · reviews: a continuous carousel, edge to edge, fading at both sides */
.revs.is-auto .revs__track{overflow-x:hidden;scroll-snap-type:none;scroll-behavior:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.revs.is-auto .rev{scroll-snap-align:none;width:min(460px,82vw)}

/* ── Who it's for as art cards, 2026-09-27 ───────────────────────────────────────
   Two cards, same build as the service cards below: the art panel plays a
   brand moment (kplayer.js paints its ground), the body stays on tokens because
   this section rides the day-to-night scroll flip. */
.fit__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1240px;margin:0 auto}
.fit__card{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--pv-card);border:1px solid var(--stroke)}
.fit__card--primary{border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.fit__art{position:relative;display:block;height:clamp(250px,25vw,330px);overflow:hidden;background:#0B1437}
.fit__inner{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center;padding:26px clamp(20px,2.4vw,34px) 28px}
.fit__card .fit__body{margin:0 auto 18px;max-width:46ch}
.fit__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:auto}
@media (max-width:760px){
  .fit__cards{grid-template-columns:1fr;gap:14px}
  .fit__art{height:220px}
  .fit__inner{padding:20px 18px 22px}
  .fit__links{flex-direction:column;gap:12px}
}

/* ── Services as art cards, 2026-09-27 ────────────────────────────────────────
   Each card plays its service's brand moment (kplayer.js draws it into .svc__art
   and paints that moment's own ground). Seven cards in three columns: Web
   Design and Social each span two: 2+1, then three, then 1+2. Phones: one swipeable row, so the
   set costs one card's height instead of seven. */
.room .svc__grid{display:block}
.svc__cards{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc__cell:first-child,.svc__cell:last-child{grid-column:span 2}
.svc__card{display:flex;flex-direction:column;height:100%;border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--pv-card);border:1px solid var(--stroke);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.svc__card:hover,.svc__card:focus-visible{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 44px color-mix(in srgb,var(--accent) 20%,transparent)}
.svc__card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.svc__art{position:relative;display:block;height:clamp(250px,26vw,340px);overflow:hidden;background:#0B1437}
.svc__body{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center;padding:24px 26px 26px}
html body .room .svc__card .svc__t{font-family:'General Sans',system-ui;font-weight:500;font-size:clamp(20px,1.6vw,24px);letter-spacing:-.015em;line-height:1.2;color:var(--ink-1)}
html body .room .svc__card .svc__d{display:block;max-width:44ch;margin:10px auto 18px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.svc__go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--accent)}
.svc__card:hover .svc__t,.svc__card:focus-visible .svc__t{color:var(--accent)}
@media (max-width:1000px){
  .svc__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__cell:first-child{grid-column:1 / -1}
  .svc__cell:last-child{grid-column:auto}
}
@media (max-width:760px){
  .svc__cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc__cards::-webkit-scrollbar{display:none}
  .svc__cell,.svc__cell:first-child{flex:0 0 min(82%,340px);scroll-snap-align:center}
  .svc__art{height:auto;aspect-ratio:1/1}
  .svc__body{padding:20px 20px 22px}
}
@media (prefers-reduced-motion:reduce){.svc__card{transition:none}.svc__card:hover{transform:none}}

/* the close: the face moment above the headline, where the watermark K used to sit */
.final__face{position:relative;display:block;width:min(560px,100%);height:clamp(220px,26vw,320px);margin:0 auto 8px}
@media (max-width:720px){.final__face{height:210px}}