/* ==========================================================================
   MAZ Converts — Design System v3
   Built to the structure captured from the reference site (see REFERENCE-SPEC.md).

   THE THEME IN ONE SENTENCE:
   A four-tone palette in which ONE warm orange mid-tone does almost all the
   work — it is the button fill, the end-stop of the headline gradient, the
   eyebrow pill, the icon chip, the logo tint, and a section background.

   That single-colour discipline is the theme. Not an effect, not a motif —
   one distinctive colour applied to everything, with no exceptions.
   ========================================================================== */

:root {
  /* ---- THE FOUR TONES. Nothing else. ---- */
  --ink:    #181A1D;   /* text, dark sections, footer                       */
  --accent: #B4400F;   /* THE workhorse. White text on it = 5.71:1          */
  --pale:   #F0EAE4;   /* alternating section bg + headline gradient start  */
  --bg:     #FFFFFF;   /* primary page background                          */

  /* Derived — every one of these traces back to the four above */
  --surface: #FFFFFF;
  --bg-alt: var(--pale);
  --bg-alt-deep: #E7DFD7;
  --text: var(--ink);
  --text-muted: #5C5F64;
  --text-faint: #8A8D93;
  --border: rgba(24, 26, 29, 0.10);
  --border-strong: rgba(24, 26, 29, 0.16);

  --accent-on-ink: #E8703F;  /* accent legible on ink = 5.66:1 */
  --accent-hover: #9C3A15;
  --accent-dim: rgba(180, 64, 15, 0.09);
  --accent-border: rgba(180, 64, 15, 0.30);
  --accent-text: var(--accent);   /* 4.78:1 on pale, 5.71:1 on white */
  --accent-on-dark: var(--accent-on-ink);
  --on-accent: #FFFFFF;           /* buttons carry WHITE text, not ink */

  /* Photography */
  --photo-tint: var(--accent);
  --photo-tint-strength: 0.14;
  --photo-ratio: 3 / 2;

  /* Dark panels */
  --gradient-ink: var(--ink);
  --gradient-ink-2: #22252A;
  --on-gradient: #FFFFFF;
  --on-gradient-muted: #A8ACB2;
  --on-gradient-border: rgba(255, 255, 255, 0.12);
  --on-gradient-surface: rgba(255, 255, 255, 0.05);

  /* ---- Type: ONE geometric sans, two weights. No serif anywhere. ---- */
  --font-display: "General Sans", "Satoshi", -apple-system, "Segoe UI", sans-serif;
  --font-body: "General Sans", "Satoshi", -apple-system, "Segoe UI", sans-serif;
  --track-display: -0.03em;  /* tight negative tracking does the modern work */
  --track-ui: -0.02em;

  /* Layout */
  --container: 1280px;
  --container-narrow: 860px;
  --pad-inline: clamp(24px, 5vw, 64px);
  --section-pad: clamp(72px, 11vw, 140px);
  --section-pad-sm: clamp(48px, 6vw, 88px);

  /* Radius — soft. Large surfaces 24px, small 14px, buttons/tags match the
     search-bar frame in the hero (a subtle rounded rectangle, not a capsule). */
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 10px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* ---------- Typography ---------- */
/* Sentence case, medium weight, tight tracking. Never all-caps, never bold. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--ink);
}
h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.08; }
h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; }
h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
h4 { font-size: 18px; font-weight: 500; }

p { color: var(--text-muted); }
p.lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--text-muted); line-height: 1.65; letter-spacing: -0.011em; }
strong { color: var(--ink); font-weight: 500; }

/* Two-tone heading: half ink, half accent. Used for emphasis on key headlines. */
.h-accent { color: var(--accent); }
.section-ink .h-accent, .cta-band .h-accent,
.hero .h-accent, .page-hero .h-accent { color: var(--accent-on-ink); }

/* ---------- Eyebrow: a small label, not a pill.
   No background, no border, no dot-in-a-bubble — a short tick mark and
   letter-spaced text, the way Linear/Stripe/Vercel run section labels. Reads
   as editorial rather than "borrowed component." ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 16px; height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}
/* On dark panels the label just shifts to the on-ink accent tone */
.section-ink .eyebrow, .gradient-section .eyebrow, .hero .eyebrow,
.page-hero .eyebrow, .cta-band .eyebrow {
  color: var(--accent-on-dark);
}

/* ==========================================================================
   SIGNATURE — THE SEARCH FRAME
   A phrase in each headline sits inside a search field: hairline frame,
   magnifier glyph, soft field fill, and a caret at the end.

   Why this and not crop marks: crop marks are a designer's in-joke. A search
   field is what MAZ Converts actually sells — being found. The motif states
   the value proposition every time it appears, which is what makes it ours
   rather than borrowed.

   IMPORTANT: this element re-asserts its own -webkit-text-fill-color. Its
   parent h1 uses background-clip:text, and a positioned descendant breaks that
   clip — without the re-assert the text renders fully transparent.
   ========================================================================== */
/* Forces each headline line onto its own row at every width, so the two lines
   never reflow into each other. */
.h1-line { display: block; }

/* ---- Search-chip controls ----------------------------------------------
   The frame scales from the surrounding headline rather than using fixed
   desktop pixels. Its internal measurements then scale from its own text,
   keeping the same proportions on desktop, tablet, and mobile. */
.searchframe {
  --sf-text-size: clamp(16px, 0.75em, 46px);
  --sf-icon-size: 0.78em;
  --sf-pad-y: 0.18em;
  --sf-pad-x-l: 0.42em;
  --sf-pad-x-r: 0.48em;
  --sf-gap: 0.3em;
  --sf-radius: 0.25em;

  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  gap: var(--sf-gap);
  font-size: var(--sf-text-size);
  line-height: 1.05;
  white-space: nowrap;
  padding: var(--sf-pad-y) var(--sf-pad-x-r) var(--sf-pad-y) var(--sf-pad-x-l);
  border: 1px solid var(--sf-line, rgba(255, 255, 255, 0.30));
  border-radius: var(--sf-radius);
  background: var(--sf-fill, rgba(255, 255, 255, 0.06));
  /* re-assert — see note above */
  color: var(--sf-text, #FFFFFF);
  -webkit-text-fill-color: var(--sf-text, #FFFFFF);
  vertical-align: 0.02em;
  position: relative;
}

/* magnifier icon — sized from --sf-icon-size above, independent of the
   chip's text size. */
.searchframe::before {
  content: "";
  flex-shrink: 0;
  width: var(--sf-icon-size);
  height: var(--sf-icon-size);
  background: var(--sf-icon) center / contain no-repeat;
  opacity: 0.8;
  --sf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
}

/* caret sitting at the end of the field — blinks like a real text cursor */
.searchframe::after {
  content: "";
  flex-shrink: 0;
  width: 1.5px;
  height: 0.92em;
  margin-left: 0.12em;
  background: var(--accent-on-ink);
  border-radius: 1px;
  animation: caret-blink 1.06s steps(1) infinite;
}
@keyframes caret-blink {
  0%, 49%   { opacity: 0.9; }
  50%, 100% { opacity: 0; }
}

/* The cycling word reserves the width of the LONGEST word in its set (set in
   JS), so the headline never reflows as words change length. The caret is
   inline content inside this box and text is left-aligned, so the cursor still
   sits hard against the last character — the reserved space sits to its right. */
.type-word {
  display: inline-block;
  flex: 0 0 auto;
  text-align: left;
  white-space: pre;
}
.ml-\[5\.5px\] { margin-left: 5.5px; }

.type-prefix {
  flex: 0 0 auto;
  white-space: nowrap;
}
.type-prefix-mobile { display: none; }

/* When a field is doing the typing, the caret belongs to the word — not to the
   far right edge of the frame. Static frames elsewhere keep the frame caret. */
.searchframe:has(.type-word)::after { display: none; }

.type-word::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 0.9em;
  margin-left: 0.07em;
  vertical-align: -0.09em;
  background: var(--accent-on-ink);
  border-radius: 1px;
  animation: caret-blink 1.06s steps(1) infinite;
}
.section .type-word::after,
.section-tight-top .type-word::after,
.surface .type-word::after { background: var(--accent); }

/* Light-background variant */
.section .searchframe,
.section-tight-top .searchframe,
.surface .searchframe {
  --sf-line: rgba(24, 26, 29, 0.20);
  --sf-fill: rgba(24, 26, 29, 0.035);
  --sf-text: var(--ink);
}
.section .searchframe::before,
.section-tight-top .searchframe::before,
.surface .searchframe::before {
  --sf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181A1D' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
}
.section .searchframe::after,
.section-tight-top .searchframe::after,
.surface .searchframe::after { background: var(--accent); }

/* ---------- Gradient headline: pale → accent. Static. ---------- */
.hero h1, .page-hero h1 {
  background: linear-gradient(94deg, #FFFFFF 0%, var(--accent-on-ink) 165%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-center { text-align: center; }
.text-ink { color: var(--ink); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-inline); padding-right: var(--pad-inline); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--pad-inline); padding-right: var(--pad-inline); }

.section { padding: var(--section-pad) 0; position: relative; background: var(--bg); }
.section-sm { padding: var(--section-pad-sm) 0; position: relative; }
.section-tight-top { padding-top: var(--section-pad-sm); }

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* .surface = alternating blue-grey band (kept as "surface" for compatibility) */
.surface { background: var(--bg-alt); }
.bg-soft { background: var(--bg-alt); }
.bg-white { background: var(--bg); }
.section-ink { background: var(--gradient-ink); }

.border-top { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.reverse { grid-template-columns: 0.9fr 1.1fr; }
.split.reverse > *:first-child { order: 2; }

/* Homepage introduction: keep the portrait visually attached to the copy. */
.home-founder {
  grid-template-columns: minmax(0, 2fr) minmax(165px, 1fr);
  max-width: 1040px;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  text-align: left;
}
.home-founder h2 { font-size: clamp(27px, 3vw, 38px); margin-bottom: 18px; }
.home-founder-portrait {
  position: relative;
  width: 100%;
  max-width: 330px;
  justify-self: center;
  margin: 0;
}
.home-founder-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-alt);
  box-shadow: 0 16px 38px rgba(20,22,26,0.1);
  overflow: hidden;
}
.home-founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; border-radius: 15px; }
.home-founder-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border-radius: 15px;
  overflow: hidden;
}
.home-founder-caption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(12, 16, 20, .16));
  pointer-events: none;
}
.home-founder-badges {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  align-self: flex-start;
  width: min(84%, 230px);
  padding: 7px 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background: #1c283478;
  opacity: 1;
  box-shadow: 0 8px 24px rgba(11, 19, 29, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.home-founder-badge {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 0 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}
.home-founder-badge + .home-founder-badge { border-left: 1px solid rgba(255,255,255,.4); }
.home-founder-badge strong {
  color: #fff;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
}
.home-founder-badge strong.text-\[17px\] { font-size: 17px; }
.home-founder-badge--specialty strong { font-size: clamp(16px, 1.5vw, 20px); }

@media (min-width: 981px) {
  .home-founder-portrait {
    justify-self: start;
    margin-top: 42px;
  }
  .home-founder-photo {
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
  }
  .home-founder-photo img { border-radius: 18px; }
  .home-founder-caption { left: 0; right: 0; top: 0; bottom: 0; border-radius: 18px; padding: 18px; }
}

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > *:first-child { order: 0; }
  .split.home-founder { grid-template-columns: minmax(0, 2fr) minmax(165px, 1fr); }
  .home-founder-portrait { justify-self: center; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 581px) and (max-width: 800px) {
  .home-founder-caption { padding: 8px; }
  .home-founder-badges { width: 100%; }
  .home-founder-badge { padding-inline: 5px; font-size: 10px; }
  .home-founder-caption .home-founder-badge strong { font-size: clamp(11px, 1.8vw, 14px); }
}
/* The portrait reaches about 165px (half its 330px desktop width) here. */
@media (max-width: 580px) {
  .split.home-founder { grid-template-columns: minmax(0, 1fr); }
  .home-founder { gap: 28px; }
  .home-founder-portrait { order: -1; width: min(100%, 360px); justify-self: center; }
}

/* ==========================================================================
   SIGNATURE GRADIENT PANEL — the dark radial-glow treatment, reused everywhere
   ========================================================================== */
.gradient-section,
.gradient-panel,
.hero,
.page-hero,
.cta-band,
.section-ink {
  color: var(--on-gradient);
  position: relative;
}

/* Full-bleed sections (hero / page-hero / stat band): glow from top-center */
.gradient-section,
.hero,
.page-hero {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(226, 78, 40, 0.24), transparent 58%),
    radial-gradient(70% 60% at 92% 100%, rgba(226, 78, 40, 0.10), transparent 70%),
    linear-gradient(160deg, var(--gradient-ink-2), var(--gradient-ink) 65%);
}

/* A warm brand glow for the homepage's after-launch services only. */
.section-after-launch {
  background:
    radial-gradient(80% 65% at 78% 8%, rgba(226, 78, 40, 0.28), transparent 72%),
    radial-gradient(70% 50% at 0% 95%, rgba(226, 78, 40, 0.14), transparent 75%),
    linear-gradient(160deg, var(--gradient-ink-2), var(--gradient-ink) 70%);
}

/* Rounded "card" panels (final CTA, pricing highlight, etc.): glow from top-left */
.gradient-panel,
.cta-band {
  background:
    radial-gradient(90% 85% at 10% 0%, rgba(226, 78, 40, 0.26), transparent 60%),
    radial-gradient(55% 55% at 95% 100%, rgba(226, 78, 40, 0.08), transparent 70%),
    linear-gradient(160deg, var(--gradient-ink-2), var(--gradient-ink) 65%);
}
.gradient-section::after,
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 80%);
}

.gradient-section h1, .gradient-section h2, .gradient-section h3, .gradient-section h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: var(--on-gradient); }

.gradient-section p, .hero p, .page-hero p, .cta-band p, .section-ink p,
.gradient-section .text-muted, .hero .text-muted, .page-hero .text-muted, .cta-band .text-muted, .section-ink .text-muted { color: var(--on-gradient-muted); }

.gradient-section strong, .hero strong, .page-hero strong, .cta-band strong, .section-ink strong { color: #fff; }

/* ==========================================================================
   INTERACTION ACCENTS
   Hover-triggered only. Nothing here loops on its own — ambient motion
   competes with the content and reads cheap.
   ========================================================================== */

/* ==========================================================================
   THE INDEX — the site's signature
   Every major section on every page is a numbered entry in one running index:
   a full-width hairline, an oversized numeral in the left margin, and the
   label and headline hung off a shared column.

   Why this and not an "effect": it's a LAYOUT, so it can't be sprinkled on or
   left off. Every section either belongs to the index or visibly doesn't. That
   is what makes it read as one publication rather than a stack of blocks.
   It prints in one ink, works identically on light and dark, and says
   "measured / indexed / precise" — which is what Signal actually means.
   ========================================================================== */
.index-head {
  border-top: 1px solid var(--border);
  padding-top: 30px;
  display: grid;
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
  /* column-gap only. A shorthand `gap` also applies as row-gap, and since each
     child lands on its own implicit row it was inflating the space between the
     eyebrow, headline and lead to ~48px each. */
  column-gap: clamp(20px, 4vw, 48px);
  row-gap: 0;
  margin-bottom: clamp(44px, 5vw, 64px);
  max-width: none;
}
.index-head::before {
  content: attr(data-index);
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.index-head > * { grid-column: 2; }
.index-head .lead { max-width: 60ch; }

/* On dark sections the rule and numeral switch to their on-ink values */
.section-ink .index-head,
.gradient-section .index-head,
.cta-band .index-head { border-top-color: var(--on-gradient-border); }
.section-ink .index-head::before,
.gradient-section .index-head::before,
.cta-band .index-head::before { color: var(--accent-on-dark); }

/* Centred variant: numeral sits above, still on the rule */
.index-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.index-head.center::before { grid-column: 1; margin-bottom: 18px; }
.index-head.center > * { grid-column: 1; }

@media (max-width: 640px) {
  .index-head { grid-template-columns: 1fr; row-gap: 12px; }
  .index-head::before { grid-column: 1; }
  .index-head > * { grid-column: 1; }
}

/* The same index number applied to repeating items (services, steps, tiers) */
.index-mark {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--accent); margin-bottom: 14px;
}
.index-mark::after { content: ""; flex: 1; height: 1px; background: var(--border); align-self: center; }
.section-ink .index-mark { color: var(--accent-on-dark); }
.section-ink .index-mark::after { background: var(--on-gradient-border); }

/* ==========================================================================
   PHOTOGRAPHY — one treatment, no exceptions
   Every photo on the site is wrapped in .photo and receives an identical
   grade + brand tint. This is what makes sourced stock read as one family
   instead of as assorted stock.
   ========================================================================== */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: var(--photo-ratio);
  background: var(--bg-alt-deep);
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.82) contrast(1.06);
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--photo-tint);
  mix-blend-mode: multiply;
  opacity: var(--photo-tint-strength);
  pointer-events: none;
}
/* Second ratio — the only other one allowed anywhere on the site */
.photo.is-tall { aspect-ratio: 4 / 5; }
.photo.is-wide { aspect-ratio: 16 / 9; }

/* Caption sits on the signature rule */
.photo-caption {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}
.section-ink .photo-caption, .gradient-section .photo-caption { border-top-color: var(--on-gradient-border); color: var(--on-gradient-muted); }

/* Editorial photo grid used on "who we build for" style sections */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .photo-grid { grid-template-columns: 1fr; } }

/* Button sheen: light passing across the surface, on hover */
.btn { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s var(--ease-out-expo);
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* SIGNATURE — the glass panel. A near-transparent rounded window set on an
   ink backdrop: soft inner highlight along the top edge (like light catching
   a beveled pane), a wide diffuse shadow to lift it off the section behind
   it, and a blur so anything under it reads as glass, not a flat fill. This
   is the component to reach for whenever a section needs to feel premium. */
.gradient-panel {
  border: 1px solid var(--on-gradient-border);
  border-radius: 28px;
  padding: clamp(48px, 8vw, 96px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 90px rgba(0, 0, 0, 0.35);
}

/* Cards / surfaces sitting inside a gradient panel — same glass language,
   smaller scale. */
.gradient-section .card, .hero .card, .page-hero .card, .cta-band .card, .section-ink .card {
  background: var(--on-gradient-surface);
  border-color: var(--on-gradient-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gradient-section .card:hover, .hero .card:hover, .section-ink .card:hover { background: rgba(255,255,255,0.09); }

/* ---------- Concept scenarios, distinct from client testimonials ---------- */
.section-ink .concept-example {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 3px solid var(--accent-on-dark);
}
.concept-example-label {
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid var(--on-gradient-border);
  border-radius: 999px;
  color: var(--on-gradient);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.concept-example h3 { color: var(--on-gradient); font-size: 20px; }
.concept-example p { color: var(--on-gradient-muted); }
.concept-example .concept-example-focus {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--on-gradient-border);
  color: var(--on-gradient);
  font-size: 13px;
}

/* ---------- Service cards on ink ---------- */
.section-ink .service-card .service-index { color: var(--accent-on-dark); }
.section-ink .service-card .card-link { color: var(--on-gradient); }
.section-ink .service-card .card-link svg { color: var(--accent-on-dark); }
.section-ink .service-card:hover { border-top-color: var(--accent-on-dark); }

/* ---------- Buttons (color-changing on hover) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;          /* calm, not shouty — matches the reference */
  letter-spacing: var(--track-ui);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
  white-space: nowrap;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }

/* Light background default: dark button -> orange on hover */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: rgba(255, 255, 255, 0.20);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: 0 12px 28px rgba(226, 78, 40, 0.32);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--pale);
  border-color: var(--border-strong);
  color: var(--ink);
  transform: translateY(-2px);
}

/* On dark gradient sections: orange button -> white on hover; outline lightens */
.gradient-section .btn-primary, .hero .btn-primary, .page-hero .btn-primary, .cta-band .btn-primary, .section-ink .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: rgba(255, 255, 255, 0.20);
}
/* Hover deepens the orange rather than flipping to white. Going white threw
   away the brand colour at the exact moment of highest intent, which is what
   made the interaction feel cheap. */
.gradient-section .btn-primary:hover, .hero .btn-primary:hover, .page-hero .btn-primary:hover, .cta-band .btn-primary:hover, .section-ink .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  box-shadow: 0 14px 32px rgba(226, 78, 40, 0.34);
}
.gradient-section .btn-ghost, .hero .btn-ghost, .page-hero .btn-ghost, .cta-band .btn-ghost, .section-ink .btn-ghost {
  border-color: rgba(255,255,255,0.32);
  color: var(--on-gradient);
}
.gradient-section .btn-ghost:hover, .hero .btn-ghost:hover, .page-hero .btn-ghost:hover, .cta-band .btn-ghost:hover, .section-ink .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

/* Primary buttons now stay orange on hover everywhere, so the light sweep
   reads correctly against them without needing a dark variant. */

.btn-block { width: 100%; }
.btn-lg { padding: 18px 34px; font-size: 16px; }
.btn-sm { padding: 12px 20px; font-size: 14px; min-height: 40px; }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- Nav ---------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
  border-bottom: 1px solid transparent;
}
/* The nav scrolls away with the page (position:absolute), so it never sits over
   a light section. The old "turn white once scrolled" state therefore only ever
   produced a white flash on the first few pixels of scroll. Removed. */
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Every page opens on a dark gradient hero, so the nav defaults to light-on-dark.
   Once scrolled past the hero onto a white section, it flips to dark-on-light. */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: #fff; flex-shrink: 0; transition: color 0.4s ease;
}
.logo .logo-wordmark-img { height: clamp(15px, 4.5vw, 26px); width: auto; max-width: 42vw; object-fit: contain; flex-shrink: 1; display: block; }
.logo .logo-wordmark-img.footer-wordmark { height: clamp(13px, 3.8vw, 22px); max-width: 60vw; }

@media (max-width: 480px) {
  .logo .logo-wordmark-img { height: 17px; }
  .logo .logo-wordmark-img.footer-wordmark { height: 15px; }
}

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: rgba(245, 243, 239, 0.78);
  position: relative; padding: 6px 0; transition: color 0.3s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--accent); border-radius: 2px; transition: width 0.3s var(--ease-out-expo);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.is-active { color: #fff; }
.nav-links a.is-active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 20px; }

/* Nav CTA button: orange-on-dark by default (matches hero buttons), flips to ink-on-white once scrolled */
.nav-actions .btn-primary { background: var(--accent); color: var(--on-accent); border-color: rgba(255,255,255,0.20); }
.nav-actions .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.nav-toggle {
  display: none;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.25s var(--ease-out-expo), opacity 0.25s ease;
}
.nav-toggle:hover {
  transform: translateY(-1px);
  opacity: 0.8;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.nav-toggle span {
  display: block;
  width: 29px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  position: relative;
  transition: transform 0.35s var(--ease-out-expo), background 0.25s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  right: 0;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: width 0.3s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), top 0.35s var(--ease-out-expo);
}
.nav-toggle span::before { top: -7px; width: 34px; }
.nav-toggle span::after { top: 7px; width: 25px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle {
  background: transparent;
}
body.nav-open .nav-toggle span::before { top: 0; width: 30px; transform: rotate(45deg); background: #fff; }
body.nav-open .nav-toggle span::after { top: 0; width: 30px; transform: rotate(-45deg); background: #fff; }
body.nav-open {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background-color: #161719;
  background-image:
    radial-gradient(90% 45% at 15% 0%, rgba(226,78,40,0.16), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 38%);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 112px var(--pad-inline) 28px;
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo), visibility 0.4s;
}
body.nav-open .mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu > a {
  display: block; font-family: var(--font-display); font-size: 34px; padding: 14px 0;
  border-bottom: 1px solid var(--on-gradient-border); color: var(--on-gradient);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.mobile-menu > a:nth-child(6),
.mobile-menu > a:nth-child(7) { display: none; }
body.nav-open .mobile-menu > a { opacity: 1; transform: translateY(0); }
body.nav-open .mobile-menu > a:nth-child(1) { transition-delay: 0.05s; }
body.nav-open .mobile-menu > a:nth-child(2) { transition-delay: 0.1s; }
body.nav-open .mobile-menu > a:nth-child(3) { transition-delay: 0.15s; }
body.nav-open .mobile-menu > a:nth-child(4) { transition-delay: 0.2s; }
body.nav-open .mobile-menu > a:nth-child(5) { transition-delay: 0.25s; }
body.nav-open .mobile-menu > a:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu .cta-row { margin-top: 32px; opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out-expo) 0.35s, transform 0.5s var(--ease-out-expo) 0.35s; }
body.nav-open .mobile-menu .cta-row { opacity: 1; transform: translateY(0); }
/* CTA button sits on the dark mobile-menu panel — needs the "on dark bg" treatment,
   not the default light-background dark-ink button style. */
.mobile-menu .cta-row .btn-primary { background: var(--accent); color: var(--on-accent); border-color: rgba(255,255,255,0.20); }
.mobile-menu .cta-row .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
}
/* .hero is display:flex, which makes this container a FLEX ITEM — so it was
   shrink-wrapping to its content (1188px) instead of taking the container's
   1280px. That left the hero inset 46px further than the nav on both sides.
   width:100% + the normal container max-width puts them back in alignment. */
.hero-inner { width: 100%; max-width: var(--container); }

/* minmax(0, …) keeps the split at the declared ratio. Plain `1.15fr 0.85fr`
   also factors in each item's intrinsic width, and adding size containment to
   the headline column changed that contribution — collapsing it 696px → 577px.
   1.08/0.92 holds the headline column at the same width as before while giving
   the reclaimed space to the form. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

/* The headline column is its own container, so the h1 is sized against the
   space it actually occupies rather than the viewport. Each line needs about
   15.2× the font-size in width, so 6.3cqi guarantees it fits on one line at
   any desktop width — previously it was overflowing by a single pixel and
   wrapping to four lines. */
.hero-grid > div:first-child { container-type: inline-size; }
/* Floor is 20px, not 28px: at phone widths a 28px floor overrode the container
   sizing and pushed the search frame onto its own row, away from "We Build". */
.hero h1 { margin-bottom: 32px; font-size: clamp(18px, 6.2cqi, 46px); line-height: 1.18; }

/* Guarantee exactly two lines wherever the hero is still two columns. */
@media (min-width: 981px) {
  .hero h1 .h1-line { white-space: nowrap; }
}
.hero .lead { max-width: 500px; margin-bottom: 36px; }
.hero-lead-mobile { display: none; }
.hero-trust-badges { display: none; }
.hero .cta-row .btn { padding: 14px 26px; font-size: 14.5px; }

.hero-form-col { position: relative; padding-top: 8px; }

/* White card sitting inside the dark hero needs its own text colors —
   override the ".hero h3 / .hero p" light-on-dark rules, which are more
   specific than a single class and would otherwise render white-on-white. */
.hero .hero-form-card,
.hero .hero-form-card h3,
.hero .hero-form-card p,
.hero .hero-form-card label { color: var(--ink); }
.hero .hero-form-card p.hero-form-sub { color: var(--text-muted); }
.hero .hero-form-card .form-field label { color: var(--text-muted); }

.hero-form-card {
  background: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.45);
}
.hero-form-title { margin-bottom: 4px; font-size: 21px; }
.hero-form-sub { font-size: 13.5px; margin-bottom: 20px; }
.hero-form-card .form-grid { margin-bottom: 0; gap: 14px; }
.hero-form-card .form-field { margin-bottom: 14px; gap: 6px; }
.hero-form-card .form-field input,
.hero-form-card .form-field select { padding: 11px 14px; font-size: 14px; }
.hero-form-card .form-field textarea { min-height: 76px; padding: 11px 14px; font-size: 14px; }
.hero-form-card .form-field label { font-size: 12px; }
.hero-form-card button[type="submit"] { min-height: 44px; padding: 13px 24px; font-size: 14.5px; }
.hero-form-card .form-micro { font-size: 11.5px; margin-top: 12px !important; }
.hero-form-card .form-success { padding: 20px 4px 4px; text-align: left; }
.hero-form-card .form-success svg { margin: 0 0 12px; width: 34px; height: 34px; }
.hero-form-card .form-success h3 { font-size: 18px; }
.hero-form-card .form-success p { font-size: 14px; }

/* Decorative rotating "start a project" seal, bycrawford-style */
/* Sits clear of the form card's top-left corner rather than being clipped by it */

@media (max-width: 980px) {
  .hero-form-col { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hero-form-col { padding-top: 0; }
  .hero-form-card { padding: 18px 20px; }
  .hero-form-card .hero-form-title { font-size: 19px; line-height: 1.2; }
  .hero-form-card .hero-form-sub { font-size: 12.5px; line-height: 1.35; margin-bottom: 12px; }
  .hero-form-card .form-grid { gap: 9px; }
  .hero-form-card .form-field { gap: 4px; margin-bottom: 0; }
  .hero-form-card .form-field label { font-size: 11.5px; }
  .hero-form-card .form-field input,
  .hero-form-card .form-field select { min-height: 44px; padding: 10px 12px; }
  .hero-form-card .form-field textarea { min-height: 64px; padding: 10px 12px; }
  #hero-inquiry-form .field-error:empty { display: none; }
  .hero-form-card button[type="submit"] { min-height: 44px; padding: 10px 16px; }
  .hero-form-card .form-micro { margin-top: 8px !important; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hero-form-card { padding-block: 14px; }
  .hero-form-card .hero-form-sub { margin-bottom: 8px; }
  .hero-form-card .form-grid { gap: 6px; }
  .hero-form-card .form-field textarea { min-height: 60px; }
  .hero-form-card .form-micro { display: none; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.page-hero { padding: 158px 0 76px; }
/* 780px was clipping two-line headlines (they need ~970px) and forcing them to
   wrap to four. Wider cap plus a size that fits inside it. */
.page-hero h1 { max-width: 1100px; font-size: clamp(32px, 5vw, 64px); }
.page-hero .web-design-headline .searchframe { --sf-text-size: clamp(16px, 3.6vw, 46px); }
.page-hero .article-search-headline .searchframe {
  --sf-text-size: clamp(24px, 3.6vw, 46px);
  white-space: normal;
}
.article-search-headline .searchframe > span { min-width: 0; }
@media (min-width: 981px) {
  .page-hero h1 .h1-line { white-space: nowrap; }
}
.page-hero .lead { max-width: 620px; margin-top: 22px; }

@media (max-width: 640px) {
  .hero { padding: 106px 0 52px; min-height: 0; }
  .page-hero { padding: 122px 0 46px; }

  .hero-lead-desktop { display: none; }
  .hero-lead-mobile { display: inline; }
  .hero .type-prefix-desktop { display: none; }
  .hero .type-prefix-mobile { display: inline; }

  .hero .cta-row {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .hero .cta-row .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 8px;
    font-size: 13px;
    white-space: nowrap;
    justify-content: center;
  }

  .hero-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100vw - 48px);
    gap: 8px;
    margin-top: 18px;
  }

  .hero-trust-badge {
    display: grid;
    justify-items: center;
    min-width: 0;
    color: rgba(255,255,255,0.82);
    text-align: center;
  }

  .trust-mark {
    display: grid;
    width: 22px;
    height: 22px;
    margin-bottom: 7px;
    place-items: center;
    border: 1px solid rgba(226,78,40,0.72);
    border-radius: 6px;
    background: rgba(226,78,40,0.08);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.025);
  }

  .trust-mark-reply { border-radius: 50%; }
  .trust-mark-terms { border-radius: 50%; }

  .hero-trust-badge strong {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.1;
  }

  .hero h1 {
    font-size: clamp(36px, 10vw, 42px);
    line-height: 1.08;
    margin-bottom: 28px;
  }

  /* Keep "We Build" and the frame as complete units. If they do not fit
     together, the compact frame moves to the next row instead of deforming. */
  .hero h1 .h1-line:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.22em;
    row-gap: 0.16em;
  }

  .hero h1 .h1-line:nth-child(2) {
    display: none;
  }

  /* The frame's full height tracks the mobile headline line box while its
     longest state ("Websites That Perform") remains on one line. */
  .hero .searchframe {
    --sf-text-size: 0.935em;
    --sf-icon-size: 0.52em;
    --sf-pad-y: 0.18em;
    --sf-gap: 0.06em;
    --sf-pad-x-l: 0.06em;
    --sf-pad-x-r: 0.08em;
    flex-wrap: nowrap;
    width: min(100%, 9.7em);
  }

  .hero .searchframe::before {
    display: block;
  }

}

/* The homepage follow-up headline is desktop copy, not mobile copy. */
@media (max-width: 767px) {
  .home-page .hero h1 .h1-line:nth-child(2) {
    display: none;
  }
}

/* ---------- Trust / logo marquee ---------- */
.logo-strip-wrap { padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); overflow: hidden; }
.logo-strip-label { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #b4400f; margin-bottom: 26px; text-align: center; }
.logo-strip-label.text-\[12px\] { font-size: 12px; }
.logo-strip-label.font-black { font-weight: 900; }
.logo-strip-label.text-\[\#b4400f\] { color: #b4400f; }
.logo-strip-label.border-t-\[\#b4400f\] { border-top-color: #b4400f; }
.logo-strip-label.border-r-\[\#b4400f\] { border-right-color: #b4400f; }
.logo-strip-label.border-b-\[\#b4400f\] { border-bottom-color: #b4400f; }
.logo-strip-label.border-l-\[\#b4400f\] { border-left-color: #b4400f; }

/* Legacy static strip (kept for pages that don't use the marquee) */
.logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 52px; }

.logo-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logo-marquee-row {
  display: flex;
  align-items: center;
  gap: 52px;
  width: max-content;
  will-change: transform;
}
.logo-marquee-row.row-left { animation: marquee-left 32s linear infinite; }
.logo-marquee-row.row-right { animation: marquee-right 32s linear infinite; margin-top: 24px; }
.logo-marquee-row:hover { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 26px)); }
}
@keyframes marquee-right {
  from { transform: translateX(calc(-50% - 26px)); }
  to { transform: translateX(0); }
}

.logo-mark-text {
  font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.01em;
  color: var(--text-faint); opacity: 0.75; transition: color 0.3s ease, opacity 0.3s ease;
  white-space: nowrap; flex-shrink: 0;
}
.logo-mark-text:hover { color: var(--accent-text); opacity: 1; }

/* ---------- Stat band (on gradient) ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat-item { text-align: left; }
.stat-num { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); color: #fff; margin-bottom: 6px; }
.stat-label { font-size: 13.5px; color: var(--on-gradient-muted); }
@media (max-width: 780px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: 0 24px 46px rgba(20, 22, 26, 0.10); }

.service-card { border-top: 3px solid transparent; }
.service-card:hover { border-top-color: var(--accent); }
.service-card .service-index { font-family: var(--font-display); font-size: 14px; color: var(--accent-text); margin-bottom: 20px; display: block; }
.service-card h3 { margin-bottom: 12px; }
.service-card p { font-size: 15px; margin-bottom: 20px; }
.service-card .card-link { font-size: 13px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.service-card .card-link svg { transition: transform 0.3s var(--ease-out-expo); color: var(--accent); }
.service-card:hover .card-link svg { transform: translateX(4px); }

.card-flagship {
  border-color: var(--accent-border);
  background: linear-gradient(160deg, rgba(226, 78, 40, 0.06), #fff 55%);
}

/* ---------- Stat / guarantee strip ---------- */
.strip { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.strip-item { max-width: 260px; }
.strip-item .strip-icon { color: var(--accent-text); margin-bottom: 14px; }
.section-ink .strip-item .strip-icon { color: var(--accent-on-dark); }
.strip-item h4 { margin-bottom: 8px; }
.strip-item p { font-size: 14px; }

/* ---------- Process steps ---------- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 36px 0; border-top: 1px solid var(--border); }
.steps > .step:last-child { border-bottom: 1px solid var(--border); }
.step-num { font-family: var(--font-display); font-size: 40px; color: var(--accent); opacity: 0.35; line-height: 1; }
.step h3 { margin-bottom: 10px; }
.step p { max-width: 560px; }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- Pricing (dark cards, bycrawford-style) ---------- */
.pricing-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--on-gradient-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px; display: flex; flex-direction: column; position: relative;
}
.pricing-card.is-featured {
  border-color: var(--accent);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(226, 78, 40, 0.18), transparent 62%),
    rgba(255,255,255,0.045);
  transform: scale(1.03);
}
.pricing-badge {
  position: absolute; top: -14px; left: 36px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 10px;
}
.pricing-card.is-premium {
  border-color: rgba(255,255,255,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.035);
}
.pricing-badge-premium {
  background: #8f8f8f; color: var(--on-gradient);
  border: 1px solid rgba(255,255,255,0.22);
}
.pricing-badge-premium[class~="bg-[#8f8f8f]"] { background: #8f8f8f; }
.pricing-tag {
  display: inline-flex; width: fit-content; align-items: center;
  padding: 8px 18px; border-radius: 10px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--on-gradient-border);
  font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 26px;
}
/* Default to ink. The white value below is scoped to the dark pricing cards —
   unscoped, it rendered the light "Ongoing Plans" prices white-on-cream. */
.pricing-amount { font-family: var(--font-display); font-size: 44px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.pricing-amount span { font-size: 16px; color: var(--text-muted); font-family: var(--font-body); font-weight: 500; }
.pricing-card .pricing-amount { color: #fff; }
.pricing-card .pricing-amount span { color: var(--on-gradient-muted); }
.pricing-desc { font-size: 14px; margin-bottom: 28px; min-height: 44px; color: var(--on-gradient-muted); }
.pricing-included-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-gradient-muted); margin-bottom: 16px; }
.pricing-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; flex-grow: 1; }
.pricing-features li { display: flex; gap: 12px; font-size: 14.5px; color: var(--on-gradient); align-items: flex-start; }
.pricing-check {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.pricing-check svg { width: 11px; height: 11px; color: var(--on-accent); }

/* All buttons are pills now; this class is a no-op kept for existing markup. */
.btn-pill { border-radius: var(--radius-pill); }

/* ---------- Concept / verified work badges ---------- */
.concept-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 8px 14px; border-radius: 8px; margin-bottom: 22px;
  background: rgba(255,255,255,0.05); border: 1px dashed var(--on-gradient-border);
  color: var(--on-gradient-muted);
}
.concept-badge svg { flex-shrink: 0; color: var(--accent-on-dark); }
.verified-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 8px 14px; border-radius: 8px; margin-bottom: 22px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--on-gradient-border);
  color: var(--on-gradient);
}
.verified-badge svg { flex-shrink: 0; color: var(--accent-on-dark); }
.case-card .case-concept-tag, .case-tag.is-concept {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 980px) { .pricing-card.is-featured { transform: none; } }

/* ---------- Portfolio ---------- */
.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(20,22,26,0.04);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.portfolio-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px rgba(20,22,26,0.14); }
.portfolio-media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--bg-alt); }
.portfolio-media img { width: 100%; height: 100%; object-fit: contain; }
.portfolio-tag {
  position: absolute; top: 16px; left: 16px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(20,22,26,0.72); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 10px;
}
.portfolio-body { padding: 26px 28px 28px; }
.portfolio-body .portfolio-client { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.portfolio-body h3 { margin-bottom: 8px; }
.portfolio-body p { font-size: 14.5px; }
.portfolio-note { font-size: 11px; color: var(--text-faint); margin-top: 14px; }

/* ---------- Case study carousel: large, legible previews with adjacent cards peeking ---------- */
.case-carousel-bleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.case-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--pad-inline);
  padding: 6px var(--pad-inline) 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.case-carousel::-webkit-scrollbar { display: none; }
.case-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* edge fades hint there's more to scroll — replaces visible arrows */
.case-carousel-bleed::before,
.case-carousel-bleed::after {
  content: ""; position: absolute; top: 0; bottom: 12px; width: 90px;
  pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.35s ease;
}
.case-carousel-bleed::before { left: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.case-carousel-bleed::after { right: 0; background: linear-gradient(to left, var(--bg) 0%, transparent 100%); }
.case-carousel-bleed.at-start::before { opacity: 0; }
.case-carousel-bleed.at-end::after { opacity: 0; }
@media (max-width: 640px) { .case-carousel-bleed::before, .case-carousel-bleed::after { width: 36px; } }

.case-carousel .case-card {
  flex: 0 0 auto;
  width: min(520px, calc((100vw - var(--pad-inline) - var(--pad-inline) - 24px) / 2));
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .case-carousel { gap: 14px; }
  .case-carousel .case-card { width: min(88vw, 420px); }
}

.case-card {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(20,22,26,0.07);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.4s ease;
}
.case-card:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(20,22,26,0.14); border-color: var(--border-strong); }

.case-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.case-title { margin: 0; font-size: clamp(21px, 2vw, 26px); line-height: 1.18; }
.case-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 20px 14px; }
.case-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-dim); border: 1px solid var(--accent-border);
  padding: 5px 9px; border-radius: 8px;
}
.case-arrow {
  position: relative; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.case-action-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.case-action-frame rect {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .55s var(--ease-out-expo);
}
.case-action-icon {
  position: relative; display: block; width: 16px; height: 16px;
  overflow: hidden;
}
.case-action-icon svg {
  position: absolute; inset: 0; width: 16px; height: 16px;
  transition: transform .45s var(--ease-out-expo);
}
.case-action-icon svg:last-child { transform: translate(-125%, 125%); }
.case-card:is(:hover, :focus-visible) .case-arrow {
  background: var(--accent-dim); color: var(--accent-text);
}
.case-card:is(:hover, :focus-visible) .case-action-frame rect { stroke-dashoffset: 0; }
.case-card:is(:hover, :focus-visible) .case-action-icon svg:first-child {
  transform: translate(125%, -125%);
}
.case-card:is(:hover, :focus-visible) .case-action-icon svg:last-child {
  transform: translate(0, 0);
}
.case-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .case-card, .case-arrow, .case-action-frame rect, .case-action-icon svg { transition: none; }
  .case-card:hover { transform: none; }
  .case-card:is(:hover, :focus-visible) .case-action-icon svg:first-child { transform: none; }
  .case-action-icon svg:last-child { display: none; }
}

.case-shot { background: #eff1f3; width: 100%; }
.case-shot img { width: 100%; height: auto; display: block; }
.case-card:hover .case-shot img { transform: none; }
@media (max-width: 640px) {
  .case-top { padding: 14px 16px 0; }
  .case-title { font-size: 21px; }
  .case-meta-line { padding: 8px 16px 12px; }
}

/* ---------- Work / capability tiles ---------- */
.work-tile {
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: #fff; padding: 32px; min-height: 220px; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,22,26,0.04);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}
.work-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 42px rgba(20,22,26,0.10); }
.work-tile .tag {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-dim); border: 1px solid var(--accent-border);
  padding: 6px 12px; border-radius: 10px; margin-bottom: auto;
}
.work-tile h3 { margin-top: 24px; margin-bottom: 8px; }
.work-tile p { font-size: 14px; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 4px; font-family: var(--font-body); font-weight: 700; font-size: 16.5px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon {
  flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: transform 0.35s var(--ease-out-expo), border-color 0.35s ease;
}
.faq-item .faq-icon::before, .faq-item .faq-icon::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.35s ease, opacity 0.35s ease; }
.faq-item .faq-icon::before { width: 10px; height: 1.5px; }
.faq-item .faq-icon::after { width: 1.5px; height: 10px; }
.faq-item[open] .faq-icon { transform: rotate(180deg); border-color: var(--accent); }
.faq-item[open] .faq-icon::after { opacity: 0; }
.faq-item .faq-body { padding: 0 4px 26px; max-width: 700px; color: var(--text-muted); font-size: 15px; }

/* FAQ inside the closing dark chapter — re-assert every colour explicitly.
   Ancestor "dark section" rules beat single-class rules on specificity, so
   anything not restated here silently renders dark-on-dark. */
.section-ink .faq-list { border-top-color: var(--on-gradient-border); }
.section-ink .faq-item { border-bottom-color: var(--on-gradient-border); }
.section-ink .faq-item summary { color: var(--on-gradient); }
.section-ink .faq-item .faq-icon { border-color: var(--on-gradient-border); }
.section-ink .faq-item .faq-icon::before,
.section-ink .faq-item .faq-icon::after { background: var(--on-gradient); }
.section-ink .faq-item[open] .faq-icon { border-color: var(--accent-on-dark); }
.section-ink .faq-item .faq-body { color: var(--on-gradient-muted); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.form-field .req { color: var(--accent-text); }
/* Fields are a tinted grey, not white. On a white card, white-on-white fields
   read as empty space rather than as inputs. */
.form-field input, .form-field select, .form-field textarea {
  background: #F2F3F5; border: 1px solid rgba(24, 26, 29, 0.09); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--ink); font-size: 15px; font-family: var(--font-body);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; width: 100%;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #8A8D93; }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; background: #FFFFFF; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim);
}
/* The enhanced hero subject menu is anchored to its own trigger, rather
   than relying on a browser-native popup whose offset varies by platform. */
#hero-inquiry-form .subject-picker { position: relative; width: 100%; }
#hero-inquiry-form .subject-picker select { display: none; }
#hero-inquiry-form .subject-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 14px; min-height: 44px; text-align: left;
  background: #F2F3F5; border: 1px solid rgba(24, 26, 29, 0.09);
  border-radius: var(--radius-sm); color: var(--ink); font: 14px var(--font-body);
  cursor: pointer;
}
#hero-inquiry-form .subject-trigger::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343A40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#hero-inquiry-form .subject-trigger:focus-visible,
#hero-inquiry-form .subject-trigger[aria-expanded="true"] {
  outline: none; background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
#hero-inquiry-form .has-error .subject-trigger { border-color: var(--accent-text); }
#hero-inquiry-form .subject-menu {
  position: absolute; top: calc(100% + 4px); left: 0; width: 100%;
  z-index: 10; margin: 0; padding: 5px; list-style: none;
  background: #fff; border: 1px solid rgba(24, 26, 29, 0.12);
  border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(20,22,26,.16);
  max-height: min(300px, 45vh); overflow-y: auto;
  animation: subject-open .15s ease-out;
}
#hero-inquiry-form .subject-menu[hidden] { display: none; }
#hero-inquiry-form .subject-menu li {
  padding: 10px 9px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
#hero-inquiry-form .subject-menu li:hover,
#hero-inquiry-form .subject-menu li.is-active {
  background: #F2F3F5;
}
@keyframes subject-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-faint); }
.form-micro { font-size: 12.5px; color: var(--text-faint); margin-top: -8px; margin-bottom: 24px; }
.field-error { font-size: 12.5px; color: var(--accent-text); min-height: 16px; display: block; margin-top: -4px; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--accent-text); }

.form-success { display: none; text-align: center; padding: 64px 24px; }
.form-success.is-visible { display: block; }
.form-success svg { color: var(--accent); margin: 0 auto 24px; }

/* Mini inline form (used on dark gradient CTA) */
.mini-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 620px; margin: 0 auto; }
.mini-form input, .mini-form select {
  flex: 1 1 160px; background: rgba(255,255,255,0.08); border: 1.5px solid var(--on-gradient-border);
  border-radius: var(--radius-sm); padding: 15px 18px; color: #fff; font-size: 15px; font-family: var(--font-body);
}
.mini-form input::placeholder { color: var(--on-gradient-muted); }
.mini-form input:focus, .mini-form select:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.12); }
.mini-form select option { color: #14161A; }
.mini-form-note { font-size: 12.5px; color: var(--on-gradient-muted); margin-top: 14px; }

@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(56px, 8vw, 104px); text-align: center; }
.cta-band h2 { max-width: 720px; margin: 0 auto 20px; }
.cta-band p { max-width: 540px; margin: 0 auto 36px; }
.cta-band .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  padding: 80px 0 32px;
  background: var(--gradient-ink);
  background-image: radial-gradient(90% 60% at 15% 0%, rgba(226,78,40,0.14), transparent 65%);
  color: var(--on-gradient);
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
.footer-brand .logo { color: #fff; }
.footer-brand p { max-width: 280px; margin-top: 16px; font-size: 14px; color: var(--on-gradient-muted); }
.footer-col h4 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-gradient-muted); margin-bottom: 18px; font-family: var(--font-body); }
.footer-col a, .footer-col span { display: block; font-size: 14.5px; color: #DAD7D1; margin-bottom: 12px; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-col > span {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  max-width: 26ch;
  margin-top: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: #e2c2ac;
  transition: none;
}
.footer-col > span::before {
  content: "";
  width: 28px;
  height: 28px;
  background: url("img/studio-globe.svg") center / contain no-repeat;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  padding-top: 28px; border-top: 1px solid var(--on-gradient-border); font-size: 13px; color: var(--on-gradient-muted);
}
.footer-bottom a { color: var(--on-gradient-muted); }
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }

@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); border-top: 1px solid var(--border);
}
@media (max-width: 700px) {
  .mobile-cta { display: block; }
  /* Only reserve space when the sticky bar is actually on the page —
     contact.html has no .mobile-cta (the whole page is already the inquiry
     flow), so it shouldn't get a dead 76px gap at the bottom. */
  body:has(.mobile-cta) { padding-bottom: 76px; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 0.09s); }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border); border: none; margin: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.kicker-list { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.kicker-list li { font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.kicker-list li svg { color: var(--accent); flex-shrink: 0; }

.two-col-list { columns: 2; column-gap: 32px; }
.two-col-list li { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 640px) { .two-col-list { columns: 1; } }

/* Status pill — same pill language as the eyebrow, glass on dark */
.badge-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 500; letter-spacing: var(--track-ui);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 7px 16px 7px 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-on-ink); flex-shrink: 0; }

img.rounded { border-radius: var(--radius-lg); border: 1px solid var(--border); }

.visual-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3.4;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; position: relative; overflow: hidden;
}
.visual-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--border-strong) 1px, transparent 1px), linear-gradient(90deg, var(--border-strong) 1px, transparent 1px);
  background-size: 32px 32px; opacity: 0.5;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}
.visual-panel svg { position: relative; z-index: 1; }
.visual-caption { position: absolute; bottom: 24px; left: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); z-index: 1; }

.service-block { padding: 96px 0; }
.service-block + .service-block { border-top: 1px solid var(--border); }
/* Unified with the site-wide index numeral. This was 15px — the right idea at
   the wrong scale, which is why it never read as a system. */
.service-block .eyebrow-num {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}
.included-list { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 32px; }
.included-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; color: var(--ink); }
.included-list svg { flex-shrink: 0; margin-top: 3px; color: var(--accent-text); }
.section-ink .included-list li { color: var(--on-gradient); }
.section-ink .included-list svg { color: var(--accent-on-dark); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; z-index: 200; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   INLINE CONVERSION BAND
   A light-weight conversion point dropped between sections so a visitor who is
   convinced mid-page can act without scrolling to the footer. Deliberately
   quieter than the closing CTA band — it punctuates, it doesn't shout.
   ========================================================================== */
.cta-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding: 26px 32px;
  margin-top: clamp(44px, 5vw, 64px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--pale);
}
.cta-inline p {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: var(--track-ui);
  max-width: 46ch;
}
.cta-inline .cta-row { gap: 12px; flex-shrink: 0; }

/* On ink sections it becomes glass instead of pale */
.section-ink .cta-inline,
.gradient-section .cta-inline {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--on-gradient-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.section-ink .cta-inline p,
.gradient-section .cta-inline p { color: #FFFFFF; }

@media (max-width: 700px) {
  .cta-inline { flex-direction: column; align-items: flex-start; padding: 24px; }
  .cta-inline .cta-row { width: 100%; }
  .cta-inline .cta-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   ARTICLE / INSIGHTS
   Top-of-funnel content. Narrow measure, generous rhythm, and a persistent
   route back into the funnel at the end of every piece.
   ========================================================================== */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  font-size: 13.5px; color: var(--on-gradient-muted);
  letter-spacing: var(--track-ui); margin-top: 22px;
}
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.article-meta span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.6; margin-right: 10px;
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 33px); margin-top: 52px; }
.prose h3 { font-size: clamp(19px, 1.8vw, 22px); margin-top: 38px; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul { padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li + li { margin-top: 12px; }
.prose ul li::before {
  content: ""; position: absolute; left: 6px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.prose a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: 34px 0; padding: 22px 28px;
  border-left: 2px solid var(--accent);
  background: var(--pale); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote p { margin: 0; color: var(--ink); font-size: 18px; }

/* Article index cards */
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 780px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  display: flex; flex-direction: column;
  padding: 32px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s ease;
}
.article-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.article-card .tag {
  font-size: 12.5px; font-weight: 500; letter-spacing: var(--track-ui);
  color: var(--accent-text); margin-bottom: 14px;
}
.article-card h3 { margin-bottom: 12px; }
.article-card p { font-size: 15.5px; flex-grow: 1; }
.article-card .read { margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--ink); }
.article-card .read::after { content: " →"; color: var(--accent); }

/* ==========================================================================
   CASE STUDY PAGE
   Layout follows the reference portfolio structure: hero image, title/summary
   split, meta row, overview, two-up media, mobile split.
   ========================================================================== */
.back-link {
  display: block; margin-bottom: 20px;
  font-size: 14px; font-weight: 500; letter-spacing: var(--track-ui);
  color: var(--on-gradient-muted); transition: color 0.3s ease;
}
.back-link:hover { color: #FFFFFF; }

/* .eyebrow is an inline-flex pill; inside a centred band it must not become a
   block-level flex container or it stretches to the full column width. */
.cta-band .eyebrow,
.section-head.center .eyebrow,
.text-center > .eyebrow { display: inline-flex; }

.case-hero-shot { box-shadow: 0 32px 80px rgba(24,26,29,0.16); }
.photo.is-wide.case-hero-shot { aspect-ratio: auto; max-width: 1080px; margin-inline: auto; }
.photo.case-hero-shot img { height: auto; object-fit: contain; }

/* Client screenshots render true-colour. The site-wide orange tint and grade
   exist to unify sourced photography — applying them to a client's own work
   misrepresents their brand colours. */
.photo.is-raw img { filter: none; }
.photo.is-raw::after { display: none; }

/* Title left, summary right */
.case-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.case-split h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); }
.case-split .lead { margin: 0; }
@media (max-width: 860px) { .case-split { grid-template-columns: 1fr; } }

/* Client / Sector / Scope / Duration */
.case-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.case-meta > div { display: flex; flex-direction: column; gap: 7px; }
.case-meta-label {
  font-size: 12.5px; font-weight: 500; letter-spacing: var(--track-ui);
  color: var(--accent-text);
}
.case-meta-value { font-size: 15.5px; color: var(--ink); letter-spacing: var(--track-ui); }
@media (max-width: 780px) { .case-meta { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .case-meta { grid-template-columns: 1fr; } }

/* Two-up media */
.case-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (max-width: 860px) { .case-duo { grid-template-columns: 1fr; } }

/* Mobile showcase split */
.case-mobile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.case-phone { max-width: 340px; margin-left: auto; }
@media (max-width: 860px) {
  .case-mobile { grid-template-columns: 1fr; }
  .case-phone { margin: 0 auto; }
}

/* ---------- Limited launch landing page ---------- */
.launch-page .hero {
  min-height: 0;
  padding-bottom: clamp(72px, 8vw, 112px);
}
.launch-page .hero h1 {
  font-size: clamp(28px, 5.8cqi, 50px);
}
.launch-page .hero h1 .h1-line {
  display: block;
  white-space: normal;
}
.launch-page .hero .lead { max-width: 58ch; }

.launch-price-callout {
  display: inline-block;
  max-width: 100%;
  padding: 18px 24px;
  margin: 0 0 28px;
  border: 1px solid var(--on-gradient-border);
  border-radius: var(--radius-lg);
  background: var(--on-gradient-surface);
}
.launch-price-badge {
  margin-bottom: 8px;
  color: var(--accent-on-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.launch-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.launch-price-old { color: var(--on-gradient-muted); font-size: 24px; text-decoration: line-through; }
.launch-price-new {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(45px, 5vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
}
.launch-price-note { color: var(--on-gradient-muted); font-size: 13px; line-height: 1.35; }
.launch-trust-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.launch-trust-line svg { flex: none; margin-top: 2px; color: var(--accent-text); }

.pain-card {
  height: 100%;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pain-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--accent-dim);
  color: var(--accent-text);
}

.compare-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.compare-table { width: 100%; min-width: 790px; border-collapse: collapse; background: var(--surface); text-align: left; }
.compare-table th,
.compare-table td { padding: 18px 16px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 14px; line-height: 1.45; }
.compare-table thead th { background: var(--ink); color: #fff; font-size: 12px; letter-spacing: 0.02em; }
.compare-table tbody th { width: 25%; font-weight: 600; color: var(--ink); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .is-us { background: var(--accent-dim); }
.compare-table thead .is-us { background: var(--accent); color: #fff; }
.compare-check { color: var(--accent-text); font-weight: 700; }
.compare-x { color: var(--text-faint); }

.maintenance-callout {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.maintenance-callout-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--accent-dim);
  color: var(--accent-text);
}
.maintenance-callout-eyebrow {
  margin-bottom: 12px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.maintenance-callout-body h3 { margin-bottom: 10px; }
.maintenance-callout-body p { max-width: 52ch; }
.maintenance-callout-price { display: flex; flex-direction: column; align-items: flex-start; }
.maintenance-callout-old { color: var(--text-muted); text-decoration: line-through; }
.maintenance-callout-new { color: var(--ink); font-size: 42px; font-weight: 700; line-height: 1.2; }

@media (max-width: 700px) {
  .launch-page .hero { padding-top: 128px; }
  .launch-price-callout { width: 100%; }
  .maintenance-callout { grid-template-columns: 1fr; }
  .compare-wrap { overflow: visible; border: 0; border-radius: 0; }
  .compare-table, .compare-table tbody, .compare-table tbody tr,
  .compare-table tbody th, .compare-table tbody td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .compare-table { background: transparent; }
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .compare-table tbody {
    display: grid;
    gap: 16px;
  }
  .compare-table tbody tr {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(20,22,26,.05);
  }
  .compare-table tbody th {
    padding: 16px 18px;
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
  }
  .compare-table tbody td {
    padding: 13px 18px;
    overflow-wrap: anywhere;
    font-size: 13px;
  }
  .compare-table tbody td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .compare-table tbody td:nth-of-type(1)::before { content: "DIY / Template Builder"; }
  .compare-table tbody td:nth-of-type(2)::before { content: "Freelancer or Agency"; }
  .compare-table tbody td:nth-of-type(3)::before { content: "MAZ Converts"; color: var(--accent-text); }
  .compare-table tbody td.is-us { border-bottom: 0; }
}

/* Fixed announcement strip above the scrolling navigation */
.offer-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 11px max(var(--pad-inline), calc((100vw - 1280px) / 2));
  background: #a5241d;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.offer-panel-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.offer-card-promo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: #a5241d;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}
.offer-card-promo strong { font-size: 16px; color: #fff; }
.offer-card-promo strong s { opacity: .75; font-size: 12px; font-weight: 500; margin-left: 5px; }
.offer-card-promo span { color: #fff3ed; }
.offer-card-promo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.offer-strike { font-size: .48em; opacity: .65; vertical-align: baseline; font-family: var(--font-body); font-weight: 500; }
.offer-service-line { color: var(--on-gradient); font-size: 13px; font-weight: 600; line-height: 1.5; margin: 0 0 18px; }
.offer-hero-secondary { color: var(--on-gradient); font-size: 15px; margin: 12px 0 0; }
.offer-hero-secondary s { opacity: .7; }
.offer-hero-secondary strong { color: #fff; font-size: 18px; }
#offer-compare { scroll-margin-top: 90px; }
.offer-panel-copy strong { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
.offer-panel-copy .text-\[15px\] { font-size: 15px; }
.offer-old-price { color: #ffe6db; font-weight: 500; }
.offer-panel-copy > span { color: #fff3ed; font-size: 12px; line-height: 1.3; }
.offer-panel-action { display: flex; align-items: center; gap: 20px; flex: none; }
.offer-countdown { display: flex; gap: 8px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-countdown > span { display: inline-flex; align-items: baseline; gap: 2px; }
.offer-countdown b { font-size: 16px; font-weight: 600; line-height: 1; }
.offer-countdown small { color: #ffe6db; font-size: 11px; }
.offer-link { color: #fff; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.offer-link:hover { color: #fff; }
.offer-inline-timer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 9px;
  background: #a5241d;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.offer-inline-timer .offer-countdown { gap: 6px; }
.offer-inline-timer .offer-countdown b { font-size: 14px; }
.offer-timer-prices { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.offer-timer-prices s { color: #ffe6db; font-weight: 500; }
.offer-timer-prices strong { color: #fff; font-size: 14px; font-weight: 700; }
.offer-inline-timer .offer-timer-spots { color: #ffe6db; font-size: 11px; }
.launch-price-callout .offer-inline-timer { margin-top: 16px; }
.pricing-card .offer-inline-timer { margin: 8px 0 18px; }
.maintenance-callout-price .offer-inline-timer { max-width: 230px; }
.cta-inline .offer-inline-timer { margin-top: 0; }
.cta-band .offer-inline-timer { margin: 4px 0 20px; }
body[data-offer-state="active"] .nav { top: var(--offer-panel-height, 0px); }
body[data-offer-state="active"] .mobile-menu { padding-top: calc(112px + var(--offer-panel-height, 0px)); }
body[data-offer-state="active"] .hero { padding-top: var(--offer-hero-padding, 225px); }
body[data-offer-state="active"] .page-hero { padding-top: var(--offer-hero-padding, 225px); }
.offer-contact-note { padding: 14px; margin-bottom: 20px; border-radius: 12px; background: var(--accent-dim); color: var(--ink); font-size: 14px; }
.offer-expired { display: none; padding-top: 180px; min-height: 65vh; }
body[data-offer-state="closed"].launch-page main > :not(.offer-expired) { display: none; }
body[data-offer-state="closed"] .offer-expired { display: block; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .offer-panel { flex-wrap: wrap; gap: 6px 16px; padding-block: 10px; }
  .offer-panel-copy { flex-basis: 100%; }
  body[data-offer-state="active"] .hero,
  body[data-offer-state="active"] .page-hero { padding-top: var(--offer-hero-padding, 225px); }
}
@media (max-width: 380px) {
  .offer-panel-action { gap: 12px; }
  .offer-countdown { gap: 5px; }
  .offer-countdown b { font-size: 14px; }
}