/* ==========================================================================
   Motion360 — Agency Design System
   Canonical tokens from Notion → "Motion360 — Logo & Brand Marks"
   Accent is RED (#FF2D3F). Electric blue is secondary. No orange.
   ========================================================================== */

:root {
  /* Ground & surfaces — dark graphite, not black.
     The logo is a true transparent PNG now, so the ground no longer has to
     match the logo's backdrop. Keep these in the graphite family. */
  --ground:      #15171b;
  --surface:     #1c1f24;
  --surface-2:   #23262c;
  --surface-3:   #2b2f36;
  --line:        #343941;
  --line-soft:   #262a30;

  /* Text */
  --text:        #f3f1ec;
  --muted:       #a8adb5;
  --faint:       #767c85;

  /* Accent — RED is primary */
  --red:         #ff2d3f;
  --red-hover:   #e01b2e;
  --red-glow:    rgba(255, 45, 63, .15);

  /* Secondary — electric blue: structure, labels, links. Never primary. */
  --blue:        #3ba8f0;
  --blue-deep:   #1c6ba8;

  /* Chrome */
  --chrome-a:    #dcdce4;
  --chrome-b:    #15151b;

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --maxw:        1140px;
  --maxw-narrow: 780px;
  --gutter:      22px;
  --radius:      5px;
  --radius-lg:   10px;

  --nav-h:       116px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 720px) { :root { --gutter: 40px; } }

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--red); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--red); color: #fff; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-weight: 700; font-size: clamp(2.3rem, 6.6vw, 4rem); line-height: 1.04; }
h2 { font-weight: 700; font-size: clamp(1.72rem, 4.4vw, 2.65rem); }
h3 { font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.32rem); letter-spacing: -.014em; }
h4 { font-weight: 600; font-size: 1rem; }

/* the signature move: italic accent word in red */
.accent { font-style: italic; color: var(--red); }
.chrome-360 { color: var(--red); font-weight: 700; }

p { margin: 0 0 1.1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--text); }
em { font-style: italic; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; max-width: 66ch; }
li { margin-bottom: .45em; }
li::marker { color: var(--blue-deep); }

code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--surface-2);
  padding: .14em .42em;
  border-radius: 3px;
  color: var(--blue);
}

.lede {
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  color: var(--muted);
  max-width: 58ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
  display: block;
}

.mono-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--maxw-narrow); }

section { padding-block: clamp(56px, 9vw, 104px); }
section.tight { padding-block: clamp(38px, 6vw, 64px); }

.band { background: var(--surface); border-block: 1px solid var(--line-soft); }

/* ---------- section divider ----------
   Two stacked sections each carry their own vertical padding, so the space
   between them is the sum of both and reads as a gap rather than a break.
   .rule-above draws a hairline across the shell and trims the top padding, so
   the join looks intentional instead of empty. */

.rule-above { padding-top: clamp(30px, 4.5vw, 52px); position: relative; }

.rule-above::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--line) 12%, var(--line) 88%, transparent);
}

.stack { display: flex; flex-direction: column; }
.stack-sm { gap: 10px; }
.stack-md { gap: 18px; }
.stack-lg { gap: 32px; }

.section-head { margin-bottom: clamp(30px, 5vw, 48px); max-width: 68ch; }
.section-head p { color: var(--muted); }

/* ---------- logo ---------- */

/* m360-logo.png / m360-mark.png carry a real alpha channel — no blend mode,
   no baked backdrop. They sit correctly on any surface in the palette. */

/* The NAV carries the mark only — the "Motion360" wordmark text was removed
   2026-09-13 so the emblem could be read at a glance. The brand name still
   reaches screen readers and crawlers via .visually-hidden text plus the
   link's aria-label, so nothing is lost to search.

   Served from m360-mark-176.webp / .png (20 KB / 44 KB). The old
   m360-mark.png is 688 KB and was being painted at 38px — it is still used
   by the preloader and the favicon, nowhere else. */

.brand { display: flex; align-items: center; gap: 14px; color: var(--text); }
.brand:hover { color: var(--text); }

/* The wordmark is ARTWORK, not type. Notion's Logo & Brand Marks page describes
   it as brushed chrome "Motion" with a glossy red "360" and a refresh-arrow
   motif — no font reproduces that, so it is cropped straight out of the master
   lockup (m360-logo.png, at the alpha gap around y=664) and served as an image.
   Do not substitute a typeface for it. */
.brand__wm {
  height: 52px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: height .28s var(--ease);
}
.topnav.is-stuck .brand__wm { height: 36px; }

@media (max-width: 939px) { .brand__wm { height: 38px; } }
@media (max-width: 560px) { .brand__wm { display: none; } }

body.has-hero .topnav:not(.is-stuck) .brand__wm {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6));
}

.brand picture { display: block; line-height: 0; }

/* 88px emblem inside a 116px bar. Scales down with the bar on small screens —
   a 116px sticky header would eat a third of a phone viewport. */
.brand__mark { height: 88px; width: auto; flex-shrink: 0; display: block;
  transition: height .28s var(--ease); }
.topnav.is-stuck .brand__mark { height: 60px; }

@media (max-width: 939px) {
  :root { --nav-h: 84px; }
  .brand__mark { height: 60px; }
}
@media (max-width: 420px) {
  :root { --nav-h: 74px; }
  .brand__mark { height: 50px; }
}

/* The footer keeps the wordmark — there is room for it there, and it is the
   last thing a visitor reads before leaving. */
.brand--foot .brand__mark { height: 52px; }

.brand__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  line-height: 1;
}
.brand__word .chrome-360 { font-size: 1em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .005em;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 0 var(--red-glow);
}
.btn--primary:hover {
  background: var(--red-hover);
  color: #fff;
  box-shadow: 0 8px 26px -8px var(--red-glow), 0 0 22px -4px var(--red-glow);
}

.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.arrow-link {
  font-family: var(--body);
  font-weight: 700;
  font-size: .92rem;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.arrow-link::after { content: "→"; transition: transform .18s var(--ease); }
.arrow-link:hover { color: var(--red); }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- header / nav ---------- */

/* The header is FIXED and starts transparent, so the homepage hero runs
   full-bleed underneath it. Past 90px of scroll, js/main.js adds .is-stuck and
   the bar fades in, shrinking 116px -> 84px with the mark 88px -> 60px. A 116px
   bar is a good first impression and too fat to follow someone down five
   sections, so it slims once it is doing a utility job.

   Pages with no hero (everything except the homepage) keep the solid bar from
   scroll zero and pad #main by the bar height, because there is nothing there
   for a transparent header to sit on.

   NO-JS: the bar renders solid immediately. Degrading to a solid nav is safe.
   Degrading to an invisible one is not. */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .28s var(--ease),
              border-color .28s var(--ease),
              box-shadow .28s var(--ease);
}

.topnav.is-stuck,
body:not(.has-hero) .topnav,
html:not(.js) .topnav {
  background: rgba(21, 23, 27, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}

/* Nothing above the fold on an interior page, so reserve the space. */
body:not(.has-hero) #main { padding-top: var(--nav-h); }
html:not(.js) body.has-hero #main { padding-top: 0; }

/* The links sit on photography before the bar appears, so give them a shadow
   to hold against a bright frame of the video. */
body.has-hero .topnav:not(.is-stuck) .navlinks a { text-shadow: 0 1px 10px rgba(0, 0, 0, .65); }
body.has-hero .topnav:not(.is-stuck) .brand__mark { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
body.has-hero .topnav:not(.is-stuck) .navtoggle { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .3); }

.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--nav-h);
  transition: min-height .28s var(--ease);
}

.topnav.is-stuck .topnav__inner { min-height: 84px; }

.navlinks { display: none; }

@media (min-width: 940px) {
  .navlinks { display: flex; align-items: center; gap: 30px; }
  .navlinks a {
    font-size: .93rem;
    font-weight: 600;
    color: var(--muted);
  }
  .navlinks a:hover { color: var(--text); }
  .navlinks a[aria-current="page"] { color: var(--red); }
  .navlinks .btn { font-size: .87rem; padding: 10px 18px; }
  .navlinks .btn:hover { color: #fff; }
  .navtoggle { display: none; }
}

.navtoggle {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  padding: 0;
}
.navtoggle span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: currentColor;
  transition: transform .2s var(--ease);
}
.navtoggle span::before { top: -5.5px; }
.navtoggle span::after  { top:  5.5px; }
.navtoggle[aria-expanded="true"] span { background: transparent; }
.navtoggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--ground);
  padding-block: 12px 22px;
}
.drawer.is-open { display: block; }
@media (min-width: 940px) { .drawer, .drawer.is-open { display: none; } }

.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-weight: 600;
}
.drawer nav a[aria-current="page"] { color: var(--red); }
.drawer .btn { margin-top: 18px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(48px, 9vw, 100px) clamp(50px, 8vw, 92px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -34% -22% auto -22%;
  height: 660px;
  background:
    radial-gradient(52% 50% at 26% 30%, rgba(59, 168, 240, .16), transparent 68%),
    radial-gradient(46% 46% at 78% 16%, rgba(255, 45, 63, .13), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(38px, 6vw, 56px); }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.06fr .94fr; align-items: center; }
}

.hero h1 { margin-bottom: 20px; max-width: 15ch; }
.hero .lede { margin-bottom: 30px; }

.hero__meta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}

/* hero logo centerpiece */
.hero__logo {
  width: min(340px, 78vw);
  margin-inline: auto;
}
@media (min-width: 960px) { .hero__logo { width: min(400px, 40vw); margin-inline: 0 auto; } }

.hero__logo-wrap { position: relative; display: grid; place-items: center; }
.hero__logo-wrap::before {
  content: "";
  position: absolute;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,168,240,.18), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
}

/* phone mock (used on case study + services) */

.phone {
  width: min(268px, 74vw);
  margin-inline: auto;
  aspect-ratio: 9 / 18.6;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 9px;
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.9);
  position: relative;
  transform: rotate(-2.5deg);
}

.phone__screen {
  width: 100%; height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ground);
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; border-radius: 3px;
  background: #0b0d10; z-index: 3;
}

.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- proof bar ---------- */

.proofbar {
  border-block: 1px solid var(--line-soft);
  background: var(--surface);
  padding-block: 22px;
}

.proofbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px 30px;
  justify-content: center;
}
@media (min-width: 800px) { .proofbar__inner { justify-content: space-between; } }

.proofbar__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  width: 100%;
  text-align: center;
}
@media (min-width: 800px) { .proofbar__label { width: auto; text-align: left; } }

.proofbar__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.85rem, 2vw, 1.02rem);
  letter-spacing: -.015em;
  color: var(--muted);
}
a.proofbar__name:hover { color: var(--text); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}

a.card:hover {
  border-color: var(--blue-deep);
  transform: translateY(-2px);
  background: var(--surface-2);
  color: var(--text);
}

.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.card h3 { margin-bottom: 0; color: var(--text); }

.card__price {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .09em;
  color: var(--red);
  text-transform: uppercase;
}

/* ---------- problem section — split layout ----------
   Headline holds the left column, the three problems stack as numbered rows
   on the right. Deliberately NOT three equal cards: equal boxes give the eye
   nothing to land on, and this is the section that has to stop the scroll.
   Collapses to one column under 880px, where the stacked rows are the point. */

.psplit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

@media (min-width: 880px) {
  .psplit { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; }
}

.psplit__head h2 {
  font-size: clamp(1.9rem, 3.8vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: -.018em;
  margin: 0 0 18px;
}

.psplit__lede {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 44ch;
  margin: 0;
}

.psplit__rule {
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  margin-top: 28px;
}

.psplit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.psplit__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.psplit__row:last-child { border-bottom: 1px solid var(--line); }

.psplit__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  padding-top: 7px;
}

.psplit__row h3 { font-size: clamp(1.18rem, 2.5vw, 1.45rem); margin: 0 0 8px; }
.psplit__row p  { color: var(--muted); font-size: 1rem; max-width: 52ch; margin: 0; }

@media (max-width: 560px) {
  .psplit__row { gap: 18px; padding: 26px 0; }
}

/* ==========================================================================
   WORK — alternating rows
   ==========================================================================
   One project per row, media and copy swapping sides. Replaced the three-up
   card grid 2026-09-13: three rows carry bigger screenshots and leave room for
   result numbers, which cards did not.

   The .shotframe is a CSS-drawn browser window that stands in until a real
   screenshot exists, so the section looks finished with zero images. Swap the
   whole .shotframe for an <img> when the capture lands — the markup carries a
   comment with the exact tag. */

.worklist { display: flex; flex-direction: column; }

.wrow {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(26px, 4vw, 40px) 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
}
.wrow:last-child { border-bottom: 1px solid var(--line-soft); }
.wrow:hover { color: var(--text); }

@media (min-width: 900px) {
  .wrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(38px, 5vw, 60px); }
  /* Media moves to column 2 on alternate rows. Explicit column assignment,
     not order: on a two-column grid `order` reflows the whole row on wrap. */
  .wrow--flip .wrow__media { grid-column: 2; grid-row: 1; }
  .wrow--flip .wrow__body  { grid-column: 1; grid-row: 1; }
}

.wrow__media img,
.wrow__media .shotframe {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease);
}
.wrow__media img { display: block; height: auto; border: 1px solid var(--line); }
.wrow:hover .wrow__media img,
.wrow:hover .wrow__media .shotframe { transform: translateY(-4px); }

.wrow__kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 9px;
}
.wrow h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 10px; }
.wrow p  { color: var(--muted); margin: 0 0 16px; max-width: 52ch; }

.wrow__stats { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.wrow__stats b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ---------- the stand-in browser window ---------- */

.shotframe {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ground);
  border: 1px solid var(--line);
  overflow: hidden;
}
.shotframe__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.shotframe__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); }
.shotframe__bar u {
  margin-left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  text-decoration: none;
  background: var(--ground);
  border-radius: 3px;
  padding: 2px 10px;
}
.shotframe__body {
  display: block;
  padding: 16px;
  height: calc(100% - 26px);
  background:
    radial-gradient(120% 90% at 18% 0%, hsl(var(--hue) 42% 26% / .5), transparent 62%),
    var(--ground);
}
.sf-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.sf-nav b { width: 34px; height: 10px; border-radius: 2px; background: hsl(var(--hue) 55% 60% / .9); }
.sf-nav s { width: 20px; height: 5px; border-radius: 2px; background: var(--surface-3); text-decoration: none; }
.sf-h  { display: block; width: 58%; height: 13px; border-radius: 3px; background: #e8eaee; margin-bottom: 9px; }
.sf-l  { display: block; width: 74%; height: 6px; border-radius: 3px; background: var(--surface-3); margin-bottom: 5px; }
.sf-l--sm { width: 48%; }
.sf-cta { display: block; width: 60px; height: 14px; border-radius: 3px;
          background: hsl(var(--hue) 60% 55%); margin-top: 14px; }
.sf-row { display: flex; gap: 8px; margin-top: 22px; }
.sf-row em { flex: 1; height: 34px; border-radius: 5px;
             background: var(--surface-2); border: 1px solid var(--line-soft); }

@media (max-width: 560px) {
  .shotframe__body { padding: 12px; }
  .sf-row { margin-top: 14px; }
  .sf-row em { height: 26px; }
}

/* ---------- before / after ---------- */

.ba { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 800px) { .ba { grid-template-columns: 1fr 1fr; gap: 20px; } }

.ba__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.ba__panel--after { border-color: var(--blue-deep); }

.ba__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ba__tag--before { color: var(--faint); }
.ba__tag--after  { color: var(--blue); }
.ba__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ba__shot {
  aspect-ratio: 16 / 11;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}
.ba__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.ba__caption {
  padding: 15px 16px 18px;
  font-size: .91rem;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
}

.slot {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  max-width: 32ch;
}

/* ---------- process ---------- */

.steps { display: grid; gap: 0; counter-reset: step; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding-block: 22px;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--blue-deep);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}

.step h3 { margin-bottom: 5px; }
.step p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

.step__time {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 7px;
  display: block;
}

/* ---------- service area ---------- */

.area { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .area { grid-template-columns: 1fr 1fr; gap: 52px; } }

.area__map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 24px;
}
.area__map svg { width: 100%; height: auto; }

.area__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.area__list li {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 10px;
  background: var(--surface-2);
}

/* ---------- pricing ---------- */

.pricing { display: grid; gap: 16px; }
@media (min-width: 940px) { .pricing { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tier--featured { border-color: var(--red); background: var(--surface-2); position: relative; }
.tier--featured::before {
  content: "Most chosen";
  position: absolute; top: 0; right: 20px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 4px 10px;
  border-radius: 2px;
}

.tier__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.02em;
}

.tier__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tier__price small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}

.tier__time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--blue);
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: .93rem;
  color: var(--muted);
  flex: 1;
  max-width: none;
}
.tier ul li { margin: 0; padding-left: 22px; position: relative; }
.tier ul li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}

.addons { display: grid; gap: 16px; }
@media (min-width: 760px) { .addons { grid-template-columns: 1fr 1fr; } }

/* ---------- callout ---------- */

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.callout p { color: var(--muted); }
.callout .eyebrow { color: var(--red); }

.callout--blue { border-left-color: var(--blue); }
.callout--blue .eyebrow { color: var(--blue); }

/* ---------- forms ---------- */

.form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  width: 100%;
  transition: border-color .18s var(--ease);
  appearance: none;
}

.field textarea { min-height: 108px; resize: vertical; }

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(1em + 4px), calc(100% - 14px) calc(1em + 4px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  outline: none;
}

.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

.form__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__note { font-size: .85rem; color: var(--faint); margin: 0; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.contact-split { display: grid; gap: 38px; }
@media (min-width: 920px) { .contact-split { grid-template-columns: 1.05fr .95fr; gap: 60px; } }

.contact-direct { display: flex; flex-direction: column; gap: 20px; }

.contact-direct a.big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  letter-spacing: -.025em;
  color: var(--text);
  display: block;
  word-break: break-word;
}
.contact-direct a.big:hover { color: var(--red); }

/* ---------- case study ---------- */

.cs-hero { padding-block: clamp(40px, 7vw, 72px) clamp(28px, 5vw, 44px); }

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  padding-block: 20px;
  border-block: 1px solid var(--line-soft);
}
.cs-meta div { display: flex; flex-direction: column; gap: 3px; }
.cs-meta .v { font-size: .95rem; color: var(--text); font-weight: 600; }

.cs-block { margin-bottom: clamp(38px, 6vw, 58px); }
.cs-block:last-child { margin-bottom: 0; }

.results { display: grid; gap: 14px; }
@media (min-width: 720px) { .results { grid-template-columns: repeat(3, 1fr); } }

.result {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 22px;
}
.result .n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: -.035em;
  color: var(--red);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.result p { font-size: .89rem; color: var(--muted); margin: 0; }

.quote { border-left: 2px solid var(--red); padding: 4px 0 4px 24px; margin: 0; }
.quote p {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.08rem, 2.6vw, 1.38rem);
  letter-spacing: -.02em;
  line-height: 1.44;
  color: var(--text);
  margin-bottom: 14px;
}
.quote footer {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  border: 0; padding: 0; margin: 0;
}

/* work index cards */

.work-card { padding: 0; overflow: hidden; }
.work-card__shot {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 20px;
}
.work-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 9px; }

.badge {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--faint);
}
.badge--client { color: var(--blue); border-color: var(--blue-deep); }
.badge--concept { color: var(--muted); border-color: var(--line); }
.badge--own { color: var(--red); border-color: #6b1c24; }

/* ---------- /card page ---------- */

.cardpage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 44px;
}

.vcard {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.vcard__logo { width: 190px; margin-inline: auto; }

.vcard__photo {
  width: 104px; height: 104px;
  margin-inline: auto;
  border-radius: 50%;
  border: 2px solid var(--red);
  background: var(--surface-2);
  display: grid; place-items: center;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.04em;
  color: var(--faint);
}
.vcard__photo img { width: 100%; height: 100%; object-fit: cover; }

.vcard h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); margin-bottom: 6px; }

.vcard__role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}

.vcard__actions { display: flex; flex-direction: column; gap: 11px; }
.vcard p { margin-inline: auto; }

.vcard__divider {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.vcard__divider::before, .vcard__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---------- footer ---------- */

.sitefoot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 48px 32px;
}

.sitefoot__grid { display: grid; gap: 30px; margin-bottom: 34px; }
@media (min-width: 800px) { .sitefoot__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; } }

.sitefoot h4 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 15px;
}

.sitefoot nav { display: flex; flex-direction: column; gap: 9px; }
.sitefoot nav a, .sitefoot address a { color: var(--muted); font-size: .93rem; }
.sitefoot nav a:hover, .sitefoot address a:hover { color: var(--red); }
.sitefoot address {
  font-style: normal; display: flex; flex-direction: column;
  gap: 9px; font-size: .93rem; color: var(--muted);
}

.sitefoot__bar {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--faint);
}

.sitefoot .brand { margin-bottom: 14px; }
.sitefoot__blurb { font-size: .93rem; color: var(--muted); max-width: 34ch; }

/* ---------- final CTA ---------- */

.finalcta { background: var(--surface-2); border-top: 1px solid var(--line); }

/* ---------- reveal ---------- */

/* Fail-safe: content is visible by default. The hidden state is only applied
   once the inline head script confirms JS is running, so a JS failure can
   never leave the page blank. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: 14px; top: -60px;
  background: var(--red); color: #fff;
  padding: 10px 16px; border-radius: var(--radius);
  font-weight: 700; z-index: 100;
  transition: top .18s var(--ease);
}
.skiplink:focus { top: 14px; color: #fff; }

.text-center { text-align: center; }
.mt-lg { margin-top: 34px; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   PRELOADER — SVG stepped-edge morph
   Adapted from the reference build. Vanilla, no dependencies.
   ========================================================================== */

body.is-loading { overflow: hidden; }

#ld {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
}
#ld.is-done { display: none; }

#ld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Pure black. The clip has a near-black backdrop baked in, and screen blend
   only disappears completely against true black — on #0e1014 the compressed
   blacks in the video sit just above the ground and the rectangle shows. */
#ld path { fill: #000000; }

.ld__inner {
  position: relative;
  text-align: center;
  color: #fff;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.ld__logo { width: min(230px, 56vw); }

/* Animated mark. The clip has a black backdrop baked in, and the loader ground
   is near-black, so screen blend melts it away. The still PNG underneath is the
   fallback for browsers that block autoplay or cannot decode the file. */
.ld__logo--video {
  width: min(420px, 84vw);
  height: auto;
  mix-blend-mode: screen;
  border-radius: 6px;
}
.ld__logo--still { display: none; }

/* if the clip fails to load, JS flips this class and the still takes over */
.ld--fallback .ld__logo--video { display: none; }
.ld--fallback .ld__logo--still { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ld__logo--video { display: none; }
  .ld__logo--still { display: block; }
}

.ld__word {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  opacity: .5;
}

.ld__pct {
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ld__pct small { font-size: .32em; vertical-align: super; opacity: .45; font-weight: 400; }

.ld__bar {
  width: min(200px, 48vw);
  height: 1px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.ld__bar i { display: block; height: 100%; width: 0; background: var(--red); }

/* ==========================================================================
   HERO — one headline, one form, one decorative video
   ==========================================================================
   Replaced the three-slide rotator on 2026-09-13. Three rotating H1s gave
   Google one ambiguous page; this gives it one clear one. The old slider is
   archived in archive/hero-slider.md, not deleted.

   The video is DECORATION. It carries no information, is aria-hidden, and is
   never the LCP element — the poster paints, the h1 paints, the video fades
   in afterwards. js/hero.js decides whether it loads at all. */

.hero {
  position: relative;
  overflow: hidden;
  background: #0d0f12;
  border-bottom: 1px solid var(--line);
  padding: clamp(44px, 6vw, 88px) 0 clamp(48px, 6vw, 92px);
}

/* Full screen from 960px up. Below that the hero stays auto-height on purpose:
   the form is roughly 500px tall, and forcing 100svh on a phone pushes the
   submit button off screen. The header is fixed, so pad for it either way. */
.hero {
  padding-top: calc(var(--nav-h) + 22px);
  display: flex;
  align-items: center;
}
.hero > .hero__grid, .hero .shell { width: 100%; }

@media (min-width: 960px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }
}

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
}

/* The video sits on top of the still and cross-fades in once it can play
   through, so a slow connection never sees an empty box. */
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero__media video.is-on { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Scrim C, 2026-09-13. Lifted ~20 points from the original so the code in the
     video actually reads. Measured at 11.9:1 on the headline and 9.5:1 on the
     body against requirements of 3:1 and 4.5:1 — this is the floor before white
     text starts to struggle on the brightest frames, not a comfortable middle.
     If the clip is ever swapped for a lighter one, re-measure before shipping. */
  background:
    linear-gradient(90deg,
      rgba(12,14,17,.74) 0%, rgba(12,14,17,.60) 40%,
      rgba(12,14,17,.30) 72%, rgba(12,14,17,.38) 100%),
    linear-gradient(180deg, rgba(12,14,17,.28), rgba(12,14,17,.52));
}

/* Under the split, the copy goes full width, so the wash goes uniform. */
@media (max-width: 959px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(12,14,17,.74), rgba(12,14,17,.92));
  }
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 420px); }
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  max-width: 18ch;
}
.hero .lede { color: #cfd3d9; font-size: 1.1rem; max-width: 52ch; margin: 0 0 26px; }

.herotrust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .92rem;
  color: #c2c7ce;
}
.herotrust li::before {
  content: "\2022";
  color: var(--red);
  font-weight: 700;
  margin-right: 8px;
}

/* ---------- the hero form ---------- */

.heroform {
  background: rgba(28, 31, 36, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  padding: 26px 24px 24px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .55);
}

.heroform h2 {
  font-family: var(--body);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.heroform__sub { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.heroform__fine { font-size: .78rem; color: var(--faint); margin: 12px 0 0; text-align: center; }

.hfield { margin-bottom: 12px; }
.hfield label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.hfield label .opt { text-transform: none; letter-spacing: 0; }

.hfield input,
.hfield select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 11px 13px;
  font-family: var(--body);
  font-size: .95rem;
}
.hfield input:focus,
.hfield select:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

.hrow { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 380px) { .hrow { grid-template-columns: 1fr; gap: 0; } }

/* ==========================================================================
   SERVICES — four-up
   ========================================================================== */

.grid-4 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.svc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
a.svc:hover {
  border-color: var(--blue-deep);
  transform: translateY(-2px);
  background: var(--surface-2);
  color: var(--text);
}

.svc__icon {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: var(--surface-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--blue);
  flex-shrink: 0;
}
.svc__icon svg { width: 20px; height: 20px; }

.svc h3 { margin-bottom: 0; }
.svc p { color: var(--muted); font-size: .94rem; margin-bottom: 0; }

.svc__soon {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid #6b1c24;
  border-radius: 2px;
  padding: 3px 8px;
}

/* ==========================================================================
   BRANDS STRIP
   ========================================================================== */

.brands {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .brands { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .brands { grid-template-columns: repeat(5, 1fr); } }

.brandcell {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 16px;
  text-align: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
a.brandcell:hover { border-color: var(--line); background: var(--surface-2); }

/* swap this <span> for <img src="img/logo-client.png" alt="Client"> when you get the file */
.brandcell__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.92rem, 2.2vw, 1.06rem);
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.15;
}
.brandcell__kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.brandcell img { max-height: 46px; width: auto; object-fit: contain; }


/* ==========================================================================
   TEXTURE — hex tessellation + grain

   The SVG is drawn at full-strength white. Visibility is controlled by the
   pseudo-element's own opacity, so --hex-strength is the single knob:
   raise it to make the pattern read, lower it to push it back.

   Both render as ::before / ::after overlays. They must NEVER set position or
   z-index on child elements — the hero's slides, wipe panels and controls are
   absolutely positioned and a blanket `.tessellate > *` rule collapses them.
   ========================================================================== */

:root {
  --hex-strength: .11;        /* bands and flat sections */
  --hex-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60.00' viewBox='0 0 34.64 60.00'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M0.00,-20.00 L17.32,-10.00 L17.32,10.00 L0.00,20.00 L-17.32,10.00 L-17.32,-10.00 Z'/%3E%3Cpath d='M34.64,-20.00 L51.96,-10.00 L51.96,10.00 L34.64,20.00 L17.32,10.00 L17.32,-10.00 Z'/%3E%3Cpath d='M0.00,40.00 L17.32,50.00 L17.32,70.00 L0.00,80.00 L-17.32,70.00 L-17.32,50.00 Z'/%3E%3Cpath d='M34.64,40.00 L51.96,50.00 L51.96,70.00 L34.64,80.00 L17.32,70.00 L17.32,50.00 Z'/%3E%3Cpath d='M17.32,10.00 L34.64,20.00 L34.64,40.00 L17.32,50.00 L-0.00,40.00 L0.00,20.00 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.tessellate { position: relative; }
.tessellate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--hex-strength);
  background-image: var(--hex-tile);
  background-size: 34.64px 60px;
  background-position: center top;
}

.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lift ONLY the content wrapper. Scoping to .shell leaves positioned
   descendants (slides, wipes, controls) alone. */
.tessellate > .shell,
.grain > .shell { position: relative; z-index: 1; }

/* The hero stays CLEAN — no hex. The photography carries it, and texture on
   top of a photo just reads as noise. The tessellation belongs to the flat
   sections below the fold, where it exists to stop large dead areas of colour
   looking lifeless. Do not reintroduce it here. */

.chrome-text {
  background: linear-gradient(180deg, #ffffff 0%, #e6e8ec 30%, #9aa0aa 55%, #f2f3f5 78%, #7d838d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .grain::after { display: none; }
}

/* ==========================================================================
   CAPABILITIES — six-up feature grid
   ========================================================================== */

.caps {
  display: grid;
  gap: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 48px);
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .caps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .caps { grid-template-columns: repeat(3, 1fr); } }

.cap {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cap__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--red);
  flex-shrink: 0;
}
.cap__icon svg { width: 34px; height: 34px; }

.cap h3 {
  font-family: var(--body);
  font-weight: 800;
  font-size: .96rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 6px 0 8px;
}
.cap p { font-size: .95rem; color: var(--muted); margin: 0; }

/* ---------- animated word rotator ---------- */

.rot {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.25em;
  text-align: left;
}
.rot__track {
  display: grid;
  grid-auto-rows: 1.25em;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.rot__word {
  font-weight: 800;
  color: var(--red);
  line-height: 1.25em;
  white-space: nowrap;
}

/* no JS: the track never moves, so the first word simply stands as static text */
@media (prefers-reduced-motion: reduce) {
  .rot__track { transition: none; }
}

/* ==========================================================================
   PROMO BANNER — full-bleed band, icon left / message right
   Deep red rather than the CTA red: a full-width wash of #ff2d3f would
   outshout every actual button on the page and the accent would stop
   meaning "click here".
   ========================================================================== */

.promo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #a81b28 0%, #8a1620 55%, #6f1119 100%);
  border-block: 1px solid #6f1119;
}
.promo--dark {
  background: linear-gradient(135deg, #23262c 0%, #1a1d23 55%, #15171b 100%);
  border-block-color: var(--line);
}

/* Hex texture belongs to a promo band with NO photograph. Both bands carry one
   now, so this is inert — kept because a future promo without a photo will want
   it. Stacking a tessellation on a photo makes both read as noise. */
.promo--dark:not(.promo--photo)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .1;
  background-image: var(--hex-tile);
  background-size: 34.64px 60px;
}

/* ---------- red promo band with a photograph behind it ----------
   The image is already greyscaled and contrast-graded in the file itself, so
   the browser paints no per-frame filter. The wash sits at .84 so the building
   still reads; anything heavier and there was no point shooting it. */

.promo__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.promo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

.promo__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Lightened 2026-09-13 to match the market band. Was .84/.86/.90 — the
     storefront was barely readable. The band is now a red-graded photograph
     rather than a red block with a photo hidden under it. */
  background:
    linear-gradient(135deg,
      rgba(168, 27, 40, .62) 0%,
      rgba(138, 22, 32, .68) 55%,
      rgba(111, 17, 25, .76) 100%);
}

/* ---------- dark promo with a photograph ----------
   The market band sits between "Where we work" and "Let's talk" as of
   2026-09-13. Its layout is the mirror of the red band — icon LEFT, copy RIGHT —
   so the wash is weighted to the RIGHT, not the left. Measured 7.7:1 on the
   headline and 8.2:1 on the body; light enough that the building reads, which
   was the point of using a photograph at all. */

.promo--dark.promo--photo .promo__wash {
  background:
    linear-gradient(90deg,
      rgba(13,15,18,.44) 0%, rgba(13,15,18,.38) 30%,
      rgba(13,15,18,.58) 62%, rgba(13,15,18,.68) 100%),
    linear-gradient(180deg, rgba(13,15,18,.18), rgba(13,15,18,.42));
}

@media (max-width: 859px) {
  .promo--dark.promo--photo .promo__wash {
    background: linear-gradient(180deg, rgba(13,15,18,.62), rgba(13,15,18,.80));
  }
}

.promo--dark.promo--photo h2 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.85); }
.promo--dark.promo--photo p  { color: #e2e5e9; text-shadow: 0 1px 14px rgba(0,0,0,.8); }

/* ---------- megaphone ----------
   Chosen over wi-fi arcs, a magnet and a funnel. Wi-fi reads as "internet
   connection" on a web agency's site; the funnel is marketer jargon. The
   megaphone is the one symbol a barber or a tax preparer names on sight.

   The two arcs pulse outward on a loop rather than firing once: this section is
   about the work that keeps running after launch, and a repeating signal says
   that. The horn itself never moves. */

.promo__megaphone { color: var(--red); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .8)); }
.promo__megaphone svg { overflow: visible; }

.mg-wave { opacity: .3; }

.js .promo__megaphone.reveal.is-in .mg-wave {
  animation: mg-signal 2.6s ease-in-out infinite;
}
.js .promo__megaphone.reveal.is-in .w1 { animation-delay: 0s; }
.js .promo__megaphone.reveal.is-in .w2 { animation-delay: .28s; }

@keyframes mg-signal {
  0%, 70%, 100% { opacity: .3; }
  22%           { opacity: 1; }
}

/* No JS, or reduced motion: both arcs simply sit at full strength. */
html:not(.js) .mg-wave { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mg-wave { opacity: 1; }
  .js .promo__megaphone.reveal.is-in .mg-wave { animation: none; }
}

/* The copy sits right of centre, so darken that side a little further. Keeps
   white text at a measured ratio without muddying the whole band. */
/* Copy sits right of centre on this band, so that side takes a little more. */
@media (min-width: 860px) {
  .promo--photo:not(.promo--dark) .promo__wash {
    background:
      linear-gradient(90deg, rgba(138, 22, 32, .06) 0%, rgba(111, 17, 25, .22) 62%, rgba(111, 17, 25, .28) 100%),
      linear-gradient(135deg, rgba(168, 27, 40, .62) 0%, rgba(138, 22, 32, .68) 55%, rgba(111, 17, 25, .76) 100%);
  }
}

/* On a phone the copy goes full width over the whole frame, so it needs more. */
@media (max-width: 859px) {
  .promo--photo:not(.promo--dark) .promo__wash {
    background: linear-gradient(135deg, rgba(168,27,40,.70) 0%, rgba(138,22,32,.76) 55%, rgba(111,17,25,.82) 100%);
  }
}

/* ---------- the rising-chart graphic ----------
   Replays EVERY time the band scrolls into view, not once per page load.
   js/main.js toggles .is-playing on enter and removes it on exit, so scrolling
   back up and down re-runs the draw. The shared .reveal observer cannot do this
   — it unobserves after the first hit, which is right for fading copy in and
   wrong for a graphic that is part of the pitch.

   After the draw finishes, the arrowhead keeps a slow pulse so the mark is
   never completely dead while you are looking at it. */

.promo__chart { width: clamp(160px, 30vw, 240px); }

.promo__chart .dash { stroke-dasharray: 260; stroke-dashoffset: 260; }
.promo__chart .gro  { transform-origin: center bottom; }

.js .promo__chart.is-playing .dash {
  animation: chart-draw 1.5s cubic-bezier(.22, .61, .36, 1) forwards;
}
.js .promo__chart.is-playing .gro {
  animation: chart-grow .9s cubic-bezier(.22, .61, .36, 1) backwards;
}
.js .promo__chart.is-playing .b1 { animation-delay: .05s; }
.js .promo__chart.is-playing .b2 { animation-delay: .17s; }
.js .promo__chart.is-playing .b3 { animation-delay: .29s; }
.js .promo__chart.is-playing .b4 { animation-delay: .41s; }

/* The breakout arrow keeps breathing once the line has landed. */
.js .promo__chart.is-playing .arrow {
  animation: chart-draw 1.5s cubic-bezier(.22, .61, .36, 1) forwards,
             chart-tip 2.4s ease-in-out 1.6s infinite;
}

/* No JS: show the finished chart, never a blank box. */
html:not(.js) .promo__chart .dash { stroke-dashoffset: 0; }

@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes chart-tip  { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .promo__chart .dash { stroke-dashoffset: 0; }
  .js .promo__chart.is-playing .dash,
  .js .promo__chart.is-playing .gro,
  .js .promo__chart.is-playing .arrow { animation: none; }
}

.promo__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
@media (min-width: 860px) {
  .promo__inner {
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }
}

.promo__art {
  width: clamp(120px, 26vw, 200px);
  color: #fff;
}
.promo--dark .promo__art { color: var(--red); }
.promo__art svg { width: 100%; height: auto; }

.promo h2 {
  color: #fff;
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.promo--dark h2 { color: var(--text); }

.promo p {
  color: rgba(255, 255, 255, .9);
  max-width: 62ch;
  margin: 0 0 26px;
}
.promo--dark p { color: var(--muted); }

.btn--onred {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: transparent;
}
.btn--onred:hover { background: #fff; color: #8a1620; border-color: #fff; }

/* ==========================================================================
   PLATFORMS STRIP
   ========================================================================== */

.platforms {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .platforms { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .platforms { grid-template-columns: repeat(6, 1fr); } }

.plat {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.plat:hover { border-color: var(--line); background: var(--surface-2); transform: translateY(-2px); }

.plat__glyph {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--muted);
}
.plat:hover .plat__glyph { color: var(--red); }
.plat__glyph svg { width: 28px; height: 28px; }

.plat__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: .88rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.plat__kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ==========================================================================
   SERVICE-AREA MAP
   Live Google embed layered over the stylized SVG. The SVG is the fallback:
   if the iframe is blocked (offline, strict CSP, preview sandbox) the visitor
   still sees a map rather than a white hole.
   ========================================================================== */

.mapframe {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 4 / 3.4;
}

.mapframe__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 18px;
  z-index: 0;
}

.mapframe__live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  background: transparent;
  /* Google's embed is a bright map. Knock it back so it sits in a dark page
     instead of glowing out of it — without going so far it stops reading
     as a real map. */
  filter: grayscale(.35) contrast(1.04) brightness(.82) saturate(.9);
}

.mapframe__note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 12px 0 0;
  text-align: center;
}

/* ==========================================================================
   MARQUEE — infinite logo carousel
   The track is duplicated in JS and translated exactly -50%, which is what
   makes the loop seamless. Hover pauses it so a visitor can actually read a
   name they recognise.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  /* fade the ends so items enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  animation: marquee-scroll var(--marquee-speed, 46s) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion, or no JS to duplicate the track: stop the animation and let
   it be a normal horizontal scroller. Still usable, never a jitter. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
}
.marquee:not([data-marquee-ready]) .marquee__track { animation: none; }

.marquee__item {
  flex: 0 0 auto;
  width: 190px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  min-height: 118px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
a.marquee__item:hover { border-color: var(--line); background: var(--surface-2); }

/* ---------- client logo strip ----------
   Five real client marks, no cards. Greyscaled and lifted to full colour on
   hover so five different brand palettes read as one set rather than five.

   Sources, so nobody re-derives them later:
   · Cooper      — cooper-full-white.svg, their own official white lockup
   · Bejulz      — official transparent PNG from their Shopify CDN
   · Waterfront  — official transparent PNG from /assets/logo.png
   · Mr. Taxes Pro — cropped from the v14 build header, inverted, 2x
   · Derayo      — cropped from the footer lockup, background keyed out by
                   luminance with colour un-premultiplied so the gold survives
   The last two are extractions. Replace them if the clients send originals. */

.clogos {
  display: grid;
  gap: 20px 14px;
  grid-template-columns: repeat(2, 1fr);
  align-items: end;
}
@media (min-width: 560px) { .clogos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .clogos { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

.clogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 18px 10px;
  color: var(--text);
  border-radius: var(--radius-lg);
  transition: transform .2s var(--ease);
}
a.clogo:hover { color: var(--text); transform: translateY(-2px); }

.clogo__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 100%;
}

/* Constrain on BOTH axes. These marks range from a tall square monogram to a
   very wide wordmark, so height alone would let the wide ones run into their
   neighbours. */
.clogo__img img {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(1.35) contrast(.95);
  opacity: .8;
  transition: filter .22s var(--ease), opacity .22s var(--ease);
}
.clogo:hover .clogo__img img { filter: none; opacity: 1; }

.clogo__name { font-weight: 700; font-size: .92rem; }

@media (max-width: 560px) {
  .clogo__img { height: 42px; }
  .clogo__img img { max-height: 42px; max-width: 112px; }
}

/* ---------- platform strip: real brand marks, no card ----------
   The marks are official SVGs (Simple Icons), inlined rather than loaded as
   files: all eight together are under 6 KB and cost zero extra requests, and
   inlining is what lets CSS colour them.

   Each cell carries its official brand colour on --brand. Squarespace is the
   one deviation: its official colour is #000000, which is invisible on this
   ground, so it renders white.

   Nominative use only. These say "we work in these platforms" — never imply
   partnership or certification unless Motion360 actually holds one. */

.marquee__item--plain {
  width: 150px;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 14px 10px;
  gap: 12px;
}
.marquee__item--plain:hover { background: transparent; border-color: transparent; }

.marquee__logo {
  display: block;
  width: 38px;
  height: 38px;
  color: var(--brand, var(--text));
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.marquee__logo svg { width: 100%; height: 100%; display: block; }

.marquee__item--plain:hover .marquee__logo {
  transform: scale(1.09);
  filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--brand) 45%, transparent));
}

.marquee__item--plain .marquee__word {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}

@media (max-width: 560px) {
  .marquee__item--plain { width: 124px; }
  .marquee__logo { width: 32px; height: 32px; }
}

/* CLIENT logo files only — scoped to img on purpose.
   This used to be a bare .marquee__logo rule, which meant its grayscale() also
   hit the inline platform SVGs further up the file and silently drained their
   brand colour. Computed fill still read green while the render was grey: the
   filter wins over the paint, and getComputedStyle does not show it. */
.marquee__logo img,
img.marquee__logo {
  max-height: 42px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  /* client logos arrive in every colour under the sun — this settles them into
     one strip without repainting anyone's brand */
  filter: grayscale(1) brightness(1.9) contrast(.9);
  opacity: .85;
  transition: filter .22s var(--ease), opacity .22s var(--ease);
}
a.marquee__item:hover .marquee__logo img,
a.marquee__item:hover img.marquee__logo { filter: none; opacity: 1; }

.marquee__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.15;
}
.marquee__kind {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.marquee__glyph { color: var(--muted); }
.marquee__glyph svg { width: 28px; height: 28px; }
a.marquee__item:hover .marquee__glyph { color: var(--red); }

/* ==========================================================================
   HERO CAPTURE BAR — one field, sits directly under the hero
   ========================================================================== */


/* ---------- price anchor line ---------- */

.priceline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.priceline__item {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.priceline__item b { color: var(--red); font-weight: 500; }

/* fix: desktop navtoggle */
@media (min-width: 940px) { .navtoggle { display: none !important; } }

/* fix: real screenshots fill the before/after frame */
.ba__shot:has(picture){padding:0;display:block;overflow:hidden}
.ba__shot picture{display:block;width:100%;height:100%}