/* ==========================================================================
   Trentino — design tokens
   Brand: graphite #121418 + signal blue #2F5BE0.
   The blue appears only where something is clickable or live; spending it on
   decoration is what would break this palette. Neutrals are cool and faintly
   blue rather than pure grey, so the accent belongs to the same family as
   the ground instead of sitting on top of it.
   ========================================================================== */

:root {
  /* Graphite — the ground. Cool and near-black, never pure grey. */
  --graphite-900: #0e1014;
  --graphite-800: #121418;
  --graphite-700: #1d2027;

  /* Signal — used only where something is clickable or live. Three values,
     by job: --signal for fills and graphics, --signal-ink for small text on
     light grounds, --signal-soft for anything on graphite. */
  --signal: #2f5be0;
  --signal-600: #244ac4;
  --signal-ink: #2a52cc;
  --signal-soft: #6e93ff;

  /* Light surfaces */
  --paper: #f6f7f9;
  --card: #ffffff;
  --line: #e4e7ec;
  --ink: #121418;
  --ink-muted: #5a6070;

  /* Dark surfaces */
  --d-ink: #ffffff;
  --d-muted: #9ba3b4;
  --d-line: rgba(255, 255, 255, 0.12);

  /* Type — one family plus a mono, rather than the four this carried before. */
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape */
  --r-slab: 30px;
  --r-card: 20px;
  --r-chip: 10px;
  --shadow-card: 0 1px 2px rgba(18, 20, 24, 0.04), 0 14px 34px rgba(18, 20, 24, 0.07);
  --shadow-float: 0 4px 10px rgba(18, 20, 24, 0.07), 0 30px 70px rgba(18, 20, 24, 0.20);

  /* Rhythm */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 30px);
  --section: clamp(54px, 7vw, 94px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0 0 0.45em;
}

h1 { font-size: clamp(2.7rem, 7vw, 4.9rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--signal-600); }

img, svg { max-width: 100%; }

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

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--graphite-800); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0; }
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section); }

/* A slab is a big rounded panel floating on the page ground, inset from the
   page edges — the page never uses edge-to-edge colour bands. */
.slab {
  position: relative;
  border-radius: var(--r-slab);
  background: var(--graphite-800);
  color: var(--d-ink);
  overflow: hidden;
}

/* Faint drafting-grid texture: this is a site about building sites. */
.slab::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  pointer-events: none;
}

.slab-inner { position: relative; padding: clamp(32px, 6vw, 76px); }

.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-ink);
}
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.on-dark .label, .slab .label { color: var(--signal-soft); }

.lede { font-size: clamp(1.03rem, 1.6vw, 1.2rem); color: var(--ink-muted); max-width: 58ch; }
.slab .lede, .on-dark .lede { color: var(--d-muted); }

.section-head { max-width: 660px; margin-bottom: clamp(30px, 5vw, 54px); }
.section-head h2 { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-600); border-color: var(--signal-600); color: #fff; }

.btn-light { background: #fff; border-color: #fff; color: var(--graphite-800); }
.btn-light:hover { background: #e8ebf1; border-color: #e8ebf1; color: var(--graphite-800); }

.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--graphite-800); color: var(--graphite-800); }
.slab .btn-outline, .on-dark .btn-outline { border-color: var(--d-line); color: #fff; }
.slab .btn-outline:hover, .on-dark .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.07); color: #fff; }

.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Header — a floating pill bar, not a full-width band
   -------------------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 60; padding-top: 14px; padding-bottom: 6px; }

.nav-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 18px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(150%) blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(18, 20, 24, 0.07);
}

/* Logo lockup: the T monogram plus a lowercase Manrope wordmark, tightly
   tracked. Swap both for exported artwork when there is any — see README. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--graphite-800);
}
.on-dark .brand-word, .slab .brand-word { color: #fff; }

.brand-lockup { display: inline-flex; flex-direction: column; gap: 5px; }
.brand-tagline {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav-links { margin-left: auto; display: flex; gap: 26px; list-style: none; margin-block: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav-links a:hover { color: var(--signal-ink); }

.nav-bar .btn { padding: 11px 20px; font-size: 0.95rem; }

/* The hamburger only exists when JS is there to run it. */
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-bar { position: relative; flex-wrap: wrap; gap: 10px; align-items: center; }
  /* A pill that has wrapped to three rows renders as an ellipse — once the
     menu is open the bar has to become an ordinary rounded rectangle. */
  .nav-bar.is-open { border-radius: 24px; }
  /* With no JS the links are always shown, so the bar is never a pill. */
  html:not(.js) .nav-bar { border-radius: 24px; }

  /* The flex child here is the <nav> wrapper, not the list inside it. */
  .nav-bar > nav { order: 3; flex-basis: 100%; }
  .js .nav-bar > nav { display: none; }
  .js .nav-bar.is-open > nav { display: block; }
  .nav-bar .btn { padding: 10px 17px; font-size: 0.9rem; }

  /* Without JS the links simply stack under the bar: plain, but usable. */
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  .nav-links a { display: block; padding: 13px 8px; font-size: 1rem; text-align: left; }
  .nav-links a::after { display: none; }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
  }
  .js .nav-toggle span {
    position: relative;
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  .js .nav-toggle span::before,
  .js .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.22s ease;
  }
  .js .nav-toggle span::before { top: -5px; }
  .js .nav-toggle span::after { top: 5px; }

  .js .nav-bar.is-open .nav-toggle span { background: transparent; }
  .js .nav-bar.is-open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
  .js .nav-bar.is-open .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }


  .nav-bar > .btn { margin-left: auto; order: 1; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-top: 10px; }

.hero .slab { background: var(--graphite-900); }
.hero .slab::after {
  content: "";
  position: absolute;
  top: -28%;
  right: -12%;
  width: 62%;
  height: 120%;
  background: radial-gradient(circle at 50% 50%, rgba(47, 91, 224, 0.40), transparent 62%);
  pointer-events: none;
}

/* The slab leaves a deep footwell; the mockup below is pulled up into it so
   the browser window straddles the edge of the dark panel. */
.hero-inner {
  position: relative;
  padding: clamp(34px, 6vw, 74px) clamp(24px, 6vw, 76px) clamp(130px, 17vw, 210px);
}
.hero h1 { margin: 18px 0 22px; color: #fff; max-width: 15ch; }
.hero h1 .accent { color: var(--signal-soft); }
.hero .lede { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-visual {
  position: relative;
  z-index: 2;
  margin-top: clamp(-190px, -15vw, -110px);
  padding-inline: clamp(12px, 4vw, 56px);
}

.mockup {
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  max-width: 940px;
  margin-inline: auto;
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #eaecf0;
  border-bottom: 1px solid #dfe2e8;
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: #c4c9d2; flex: none; }
.mockup-url {
  margin-left: 10px;
  flex: 1;
  max-width: 320px;
  padding: 5px 12px;
  background: #fff;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #767d8c;
}

.mockup img { display: block; width: 100%; height: auto; }

.mockup-caption {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Fact strip
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.facts > div { background: var(--paper); padding: 24px 22px; }
.facts dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--signal-ink); }
.facts dd { margin: 8px 0 0; font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }


/* --------------------------------------------------------------------------
   Hero price line + the foundation offer
   -------------------------------------------------------------------------- */

.hero-price { margin: 22px 0 0; color: var(--d-muted); font-size: 0.97rem; }
.hero-price strong { color: #fff; font-weight: 700; }

.promo {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(26px, 4vw, 40px);
  background: var(--graphite-800);
  color: var(--d-ink);
  border-radius: var(--r-slab);
}
@media (max-width: 860px) { .promo { grid-template-columns: 1fr; } }

.promo-copy h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 12px 0 12px; }
.promo-copy .lede { color: var(--d-muted); font-size: 1rem; }

/* The action panel is the only place on the page that inverts to a light card
   on a dark slab — it should read as the one thing to act on. */
.promo-act {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: 22px;
  text-align: center;
}
.promo-price {
  display: block;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.promo-price s, .tier-price s {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
  text-decoration-thickness: 1.5px;
  margin-right: 0.1em;
}
.tier-price s { display: inline-block; margin-left: 0.15em; margin-right: 0; }
.promo-terms {
  display: block;
  margin: 12px 0 18px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.7;
}
.promo-fine { margin: 12px 0 0; font-size: 0.8rem; color: var(--ink-muted); }


/* --------------------------------------------------------------------------
   Estimator
   Every figure it shows also appears in the pricing section — it maps answers
   onto published tiers rather than inventing numbers.
   -------------------------------------------------------------------------- */

/* Interactive, so it only exists when there is JS to run it. Without it the
   pricing table sits immediately above, which answers the same question. */
.est-section { display: none; }
.js .est-section { display: block; }

.est {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  padding: clamp(26px, 4vw, 40px);
  background: var(--graphite-800);
  border-radius: var(--r-slab);
  color: var(--d-ink);
}
@media (max-width: 860px) { .est { grid-template-columns: 1fr; } }

.est fieldset { border: 0; margin: 0 0 24px; padding: 0; }
.est fieldset:last-of-type { margin-bottom: 0; }
.est legend {
  padding: 0 0 11px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.est-opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* The input stays in the accessibility tree and drives the visible chip. */
.est-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-opts span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  font-size: 0.93rem;
  color: var(--d-ink);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.est-opts label:hover span { border-color: rgba(255, 255, 255, 0.35); }
.est-opts input:checked + span { background: var(--signal); border-color: var(--signal); color: #fff; }
.est-opts input:focus-visible + span { outline: 3px solid var(--signal-soft); outline-offset: 3px; }

.est-out {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: 26px 24px;
  position: sticky;
  top: 118px;
}
@media (max-width: 860px) { .est-out { position: static; } }

.est-tier {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-ink);
}
.est-price {
  display: block;
  margin: 10px 0 6px;
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.est-time { display: block; font-size: 0.92rem; color: var(--ink-muted); }
.est-note {
  margin: 16px 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.est-fine { margin: 12px 0 0; font-size: 0.8rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Work
   -------------------------------------------------------------------------- */

.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(298px, 1fr)); gap: 18px; }

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.work-shot { background: #eaecf0; border-bottom: 1px solid var(--line); }
.work-chrome { display: flex; align-items: center; gap: 7px; padding: 10px 13px; }
.work-dot { width: 8px; height: 8px; border-radius: 50%; background: #c4c9d2; flex: none; }
.work-url {
  margin-left: 8px;
  padding: 4px 11px;
  background: #fff;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: #767d8c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-shot img { display: block; width: 100%; height: auto; }

.work-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.work-price {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.work-body h3 { color: var(--graphite-800); margin: 0; }
.work-body p { color: var(--ink-muted); font-size: 0.96rem; margin: 0; }

.work-tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--signal-ink);
}

.work-stack { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
.work-stack span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.work-link { font-weight: 600; font-size: 0.94rem; text-decoration: none; align-self: flex-start; }
.work-link:hover { text-decoration: underline; }
.work-link::after { content: " \2197"; }

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

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(30px, 5vw, 54px); }
.pricing-head .section-head { margin-bottom: 0; }
.pricing-head .note { font-family: var(--mono); font-size: 0.74rem; line-height: 1.7; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); max-width: 24ch; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 18px; align-items: stretch; }

.tier {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.tier-dark { background: var(--graphite-800); border-color: var(--graphite-800); color: var(--d-ink); box-shadow: var(--shadow-card); }

.tier-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tier h3 { margin: 0; color: var(--graphite-800); }
.tier-dark h3 { color: #fff; }

.tier-mark {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  white-space: nowrap;
}

.tier-note { margin: 10px 0 22px; color: var(--ink-muted); font-size: 0.95rem; }
.tier-dark .tier-note { color: var(--d-muted); }

.tier-price {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tier-price + .tier-terms {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tier-dark .tier-terms { color: var(--d-muted); }

.tier ul {
  list-style: none;
  margin: 24px 0 26px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  font-size: 0.96rem;
}
.tier-dark ul { border-top-color: var(--d-line); }
.tier ul li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start; }
.tier ul li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--signal);
  transform: rotate(45deg);
}
.tier-dark ul li::before { background: var(--signal-soft); }

/* "Everything in X" is not a feature — it is a pointer to the tier below. */
.tier ul li.carried { color: var(--ink-muted); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tier ul li.carried::before { background: var(--line); }
.tier-dark ul li.carried { color: var(--d-muted); }
.tier-dark ul li.carried::before { background: var(--d-line); }

.tier .btn { margin-top: auto; }

.pricing-foot { margin-top: 24px; font-size: 0.93rem; color: var(--ink-muted); max-width: 80ch; }

/* --------------------------------------------------------------------------
   Speed proof — measured, not claimed
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.proof > div { background: var(--card); padding: 22px 20px; }
.proof-n {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.proof-l {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.proof-note { grid-column: 1 / -1; background: var(--card); margin: 0; padding: 18px 20px 20px; font-size: 0.88rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Case study page
   -------------------------------------------------------------------------- */

.case-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 14px 0 18px; max-width: 18ch; }
.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 30px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.case-facts dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.case-facts dd { margin: 6px 0 0; font-weight: 600; font-size: 0.97rem; }
.case-shot { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.case-body { max-width: 68ch; }
.case-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 48px; }
.case-body h2:first-child { margin-top: 0; }
.case-body h3 { margin-top: 34px; }
.case-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
/* Not a grid: these items hold a <b> plus a text node, and grid would make
   those two separate items — the sentence would drop onto the next row and
   wrap inside the 16px marker column, one word per line. The marker is
   positioned instead, so the text flows as one paragraph. */
.case-list li { position: relative; padding-left: 27px; color: var(--ink-muted); }
.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--signal);
  transform: rotate(45deg);
}
.case-list b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Testimonials — hidden until there are real ones (see README)
   -------------------------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.quote {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.quote blockquote { margin: 0 0 16px; font-size: 1.04rem; line-height: 1.55; color: var(--ink); }
.quote figcaption {
  margin-top: auto;
  padding-top: 4px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Process — a real sequence, so it is numbered and tracked
   -------------------------------------------------------------------------- */

.track { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }

.track li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(16px, 4vw, 48px);
  padding: 28px 0;
  border-top: 1px solid var(--d-line);
}
.track li:last-child { border-bottom: 1px solid var(--d-line); }

.track li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--signal-soft);
  padding-top: 5px;
}
.track h3 { color: #fff; margin-bottom: 6px; }
.track p { color: var(--d-muted); margin: 0; max-width: 62ch; }

@media (max-width: 620px) {
  .track li { grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   Ownership — bento grid
   -------------------------------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.bento .cell {
  grid-column: span 2;
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.bento .cell h3 { color: var(--graphite-800); margin-bottom: 8px; }
.bento .cell p { color: var(--ink-muted); font-size: 0.96rem; margin: 0; }

/* The free-bug-fix promise is the strongest thing on the page, so it gets
   the wide cell and the only filled background in the grid. */
.bento .cell-wide { grid-column: span 3; }
.bento .cell-accent {
  grid-column: span 3;
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.bento .cell-accent h3 { color: #fff; }
.bento .cell-accent p { color: rgba(255, 255, 255, 0.86); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .cell, .bento .cell-wide, .bento .cell-accent { grid-column: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.faq-grid .section-head { position: sticky; top: 110px; margin-bottom: 0; }

@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .section-head { position: static; }
}

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  color: var(--graphite-800);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background:
    linear-gradient(var(--signal), var(--signal)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 1.5px 10px no-repeat;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  border-color: var(--signal);
}
.faq details p { margin: 0 0 22px; padding-right: 46px; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 60px); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-direct { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--d-line); display: grid; gap: 16px; }
.contact-direct dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--d-muted); }
.contact-direct dd { margin: 5px 0 0; font-size: 1.05rem; font-weight: 600; }
.contact-direct a { color: var(--signal-soft); }
.contact-direct a:hover { color: #fff; }

.form-card { background: #fff; color: var(--ink); border-radius: var(--r-card); padding: clamp(22px, 4vw, 32px); }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 7px; font-size: 0.86rem; font-weight: 600; color: var(--graphite-800); }
.field .hint { font-weight: 400; color: var(--ink-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: #fbfcfd;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.field textarea { min-height: 124px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--signal);
  outline: 2px solid rgba(47, 91, 224, 0.18);
  background: #fff;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.form-hp { position: absolute; left: -9999px; }
.form-fine { margin: 13px 0 0; font-size: 0.84rem; color: var(--ink-muted); }

.form-sent h3 { color: var(--graphite-800); font-size: 1.45rem; }
.form-sent p { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Sticky action bar — phones only
   A visitor two-thirds down a long page should not have to scroll anywhere to
   act. Hidden on desktop, where the nav CTA is always in view anyway.
   -------------------------------------------------------------------------- */

.action-bar { display: none; }

@media (max-width: 880px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    gap: 9px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .action-bar .btn { flex: 1; padding: 13px 14px; font-size: 0.95rem; }
  /* Keep the footer clear of the bar. */
  body { padding-bottom: 74px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { padding: 34px 0 44px; }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.footer-bar a { color: var(--ink-muted); }
.footer-bar a:hover { color: var(--signal-ink); }


/* --------------------------------------------------------------------------
   Motion
   Everything here is gated on the `.js` class, set inline in the head, so the
   page renders fully visible when JS is off. The reduced-motion block at the
   bottom of this file turns all of it off.
   -------------------------------------------------------------------------- */

/* Reveal on scroll. Opacity + transform only, so it stays on the compositor. */
.js [data-reveal],
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in,
.js [data-stagger] > *.is-in { opacity: 1; transform: none; will-change: auto; }

/* Hero entrance: the same idea, but time-based rather than scroll-based. */
.js .hero [data-enter] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--enter-delay, 0ms),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--enter-delay, 0ms);
}
.js.is-loaded .hero [data-enter] { opacity: 1; transform: none; }

.js .hero [data-enter="1"] { --enter-delay: 40ms; }
.js .hero [data-enter="2"] { --enter-delay: 140ms; }
.js .hero [data-enter="3"] { --enter-delay: 240ms; }
.js .hero [data-enter="4"] { --enter-delay: 330ms; }
.js .hero [data-enter="5"] { --enter-delay: 420ms; }
.js .hero [data-enter="6"] { --enter-delay: 510ms; }

/* The hero screenshot also scales up slightly as it arrives. */
.js .hero [data-enter="6"] { transform: translateY(34px) scale(0.985); }
.js.is-loaded .hero [data-enter="6"] { transform: none; }

/* Reading progress, pinned under the nav pill. */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}


/* --- 3. Word-by-word headings ------------------------------------------- */
/* Each word sits in a masked wrapper and rises out of it. The padding/margin
   pair keeps descenders (g, y, p) from being clipped by that mask. */
.js .split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.js .split .w-i {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) var(--wd, 0ms);
}
.js .split.is-in .w-i { transform: none; }
/* The hero headline waits for the eyebrow above it. */
.js .hero h1 .w-i { transition-delay: calc(var(--wd, 0ms) + 130ms); }

/* --- 4. Work screenshots uncovered by a wipe ----------------------------- */
.work-shot { position: relative; }
.js .work-card .work-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
  transform-origin: 100% 50%;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.15s;
}
.js .work-card.is-in .work-shot::after { transform: scaleX(0); }
.js .work-card .work-shot img { transform: scale(1.08); transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .work-card.is-in .work-shot img { transform: none; }
/* Beat the .is-in rule above, or the hover zoom would never apply. */
.js .work-card.is-in:hover .work-shot img { transform: scale(1.035); }

/* --- 5. Pinned process column ------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}
.process-grid .section-head {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 120px);
  margin-bottom: 0;
}
/* The track now sits in a narrower column, so the number gutter that suited
   full width leaves the numbers stranded from their headings. */
.process-grid .track li { grid-template-columns: 38px minmax(0, 1fr); gap: 20px; }

@media (max-width: 880px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-grid .section-head { position: static; }
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.marquee-band {
  background: var(--graphite-800);
  color: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  padding-block: 15px;
}

.marquee { display: flex; width: max-content; animation: marquee-slide 42s linear infinite; }
.marquee:hover, .marquee:focus-within { animation-play-state: paused; }

.marquee ul {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.marquee li::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--signal-soft);
  transform: rotate(45deg);
}

@keyframes marquee-slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Hover
   -------------------------------------------------------------------------- */

.work-card { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease; }
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.work-shot { overflow: hidden; }
.work-shot img { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.work-card:hover .work-shot img { transform: scale(1.035); }

.tier { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.bento .cell { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.bento .cell:hover { transform: translateY(-3px); }

/* Nav links get an underline that grows from the left. */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

/* FAQ answers slide rather than snap. */
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.faq details[open] p { animation: faq-open 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* --------------------------------------------------------------------------
   Thank-you page
   -------------------------------------------------------------------------- */

.centred { display: grid; place-items: center; text-align: center; padding: clamp(60px, 12vw, 130px) 0; }
.centred .inner { max-width: 560px; }
.centred h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); color: #fff; }
.centred p { color: var(--d-muted); }

/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .work-card:hover, .tier:hover, .bento .cell:hover { transform: none; }
  .work-card:hover .work-shot img { transform: none; }
  /* Nothing stays hidden waiting on a scroll that will not be animated. */
  .js [data-reveal], .js [data-stagger] > *, .js .hero [data-enter] { opacity: 1 !important; transform: none !important; }
  .marquee { animation: none; }
  .js .split .w-i { transform: none !important; }
  .js .split .w { overflow: visible; }
  .js .work-card .work-shot::after { display: none; }
  .js .work-card .work-shot img { transform: none !important; }
  .marquee-band { overflow-x: auto; }
}