/* ==========================================================================
   Promptu Consulting — static site
   Cloned from the Framer build (Think Forward template, Promptu brand)
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS — the single source of truth for the whole site.
   Every value below comes from the promptu-brand skill. Nothing outside this
   block should contain a raw hex code, a one-off font size, or a magic number.
   ========================================================================== */

:root {
  /* ---- Dark-first palette ---- */
  --bg:        #0D0D0C;   /* page */
  --bg-2:      #131312;   /* raised panel / tile shade A */
  --bg-3:      #1A1A18;   /* tile shade B */
  --bg-4:      #202020;   /* tile shade C */
  --line:      #262624;   /* hairlines on dark */
  --ink:       #F2F2F0;   /* text on dark */
  --muted:     #8C8C86;   /* secondary text on dark */

  /* Light sections, used as a hard cut against the dark */
  --light-bg:    #F2F2F0;
  --light-bg-2:  #FAFAF8;
  --light-bg-3:  #E9E9E6;
  --light-line:  #DEDEDA;
  --light-ink:   #0D0D0C;
  --light-muted: #6E6E68;

  /* ---- Accent: the reference's yellow, played as Promptu green ---- */
  --accent:       #52B788;   /* pops on dark — the primary accent */
  --accent-deep:  #2D6A4F;   /* accent on light backgrounds */
  --accent-dim:   #1B4332;

  /* ---- Type: condensed display, mono labels, neutral body ---- */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --text-hero:    clamp(3rem, 7.5vw, 7rem);
  --text-display: clamp(2.25rem, 5vw, 4.5rem);
  --text-stat:    clamp(2.5rem, 5vw, 4rem);
  --text-h3:      clamp(1.5rem, 2.4vw, 2.125rem);
  --text-lg:      1.125rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-mono:    0.6875rem;

  --leading-tight: 0.94;
  --leading-snug:  1.15;
  --leading-body:  1.6;

  /* ---- Space ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---- Shape: sharp, like the references ---- */
  --radius:    0px;
  --radius-sm: 0px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:      300ms;
  --dur-lg:   500ms;

  /* ---- Layout ---- */
  --max-w:       1280px;
  --pad-x:       var(--space-7);
  --section-gap: var(--space-10);

  /* ---- Compatibility aliases for sections not yet restyled ---- */
  --black:       var(--bg);
  --near-black:  var(--bg-2);
  --white:       var(--ink);
  --cream:       var(--bg);
  --cream-deep:  var(--bg-2);
  --card:        var(--bg-2);
  --surface:     var(--bg-2);
  --surface-2:   var(--bg-3);
  --border:      var(--line);
  --gray-1:      var(--bg-2);
  --gray-2:      var(--line);
  --gray-3:      var(--bg-4);
  --gray-4:      var(--muted);
  --gray-5:      var(--muted);
  --gray-6:      var(--muted);
  --green:       var(--accent);
  --green-light: var(--accent);
  --green-deep:  var(--accent-dim);
  --dark-bg:     var(--bg);
  --on-dark:     var(--ink);
  --on-dark-muted: var(--muted);
  --border-dark: var(--line);
  --font:        var(--font-body);
  --serif:       var(--font-display);
  --radius-lg:   var(--radius);
  --radius-pill: var(--radius);
  --ease:        var(--ease-out);
  --text-h1:     var(--text-display);
  --text-h2:     var(--text-display);
}


* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- Typography ---------- */

.display-hero {
  font-size: clamp(3.4rem, 15.5vw, 13.75rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  white-space: nowrap;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }

.h-section {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  letter-spacing: -0.04em;
  font-weight: 600;
  line-height: 1;
}

.h-card { font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.02em; }

.statement {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--gray-5);
}
.statement strong, .statement b { color: var(--black); font-weight: 600; }
.statement.on-dark { color: var(--gray-4); }
.statement.on-dark strong { color: var(--white); }

.body-lg { font-size: 1.125rem; color: var(--gray-5); }
.body-md { font-size: 1rem; color: var(--gray-5); }
.body-sm { font-size: 0.875rem; color: var(--gray-6); }
.body-xs { font-size: 0.8125rem; color: var(--gray-6); }

/* ---------- Label (squiggle + caps) ---------- */

.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.label .squiggle { color: var(--green); flex: none; }
.label.on-dark { color: var(--white); }
.label.on-dark .squiggle { color: var(--green-light); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;               /* comfortably over the 44px touch minimum */
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.btn:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Primary — one per screen */
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:active { background: var(--accent-deep); }

/* Secondary — visually subordinate */
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface); border-color: var(--muted); }
.btn-secondary:active { background: var(--surface-2); }

/* On dark surfaces, accent-light becomes primary (accent goes muddy) */
.on-dark .btn-primary, .btn-primary.on-dark { background: var(--accent-light); color: var(--dark-bg); }
.on-dark .btn-secondary, .btn-secondary.on-dark { color: var(--on-dark); border-color: var(--border-dark); }
.on-dark .btn-secondary:hover { background: var(--border-dark); }

.btn-lg { min-height: 56px; padding: 0 var(--space-6); font-size: var(--text-lg); }

/* Legacy button names, still used by pages awaiting their turn in the rework.
   Pointed at the new roles so nothing renders off-brand in the meantime. */
.btn-green { background: var(--accent); color: var(--bg); }
.btn-green:hover { background: var(--accent-deep); }
.btn-white { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn-white:hover { background: var(--surface); }
.btn-black { background: var(--ink); color: var(--bg); }
.btn-black:hover { background: var(--accent-deep); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.0625rem;
}
.link-arrow .arrow { color: var(--green); transition: transform 0.3s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- Navbar ---------- */

.navbar {
  position: relative;
  z-index: 50;
  padding: var(--space-5) 0;
  background: var(--bg);
  color: var(--ink);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
/* The lockup is the logo. Height is fixed; width follows its 4.51 ratio. */
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 24px; width: auto; }

.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* touch target */
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active { font-weight: 600; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a:focus-visible, .nav-logo:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.nav-cta { font-size: var(--text-sm); min-height: 44px; padding: 0 var(--space-4); }

/* Interior pages still carry .on-light / .on-dark; both resolve to the light
   navbar until those pages come up in the rework order. */
.navbar.on-light, .navbar.on-dark { background: var(--bg); color: var(--ink); }
.navbar.on-dark .nav-logo img { content: url("../assets/logos/promptu-lockup-black.png"); }

/* Hamburger + mobile drawer */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px; height: 40px;
  position: relative;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  margin: 5px auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links, .navbar .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .navbar.drawer-open { background: var(--black); color: var(--white); }
  .navbar.drawer-open .nav-drawer { display: flex; }
}

.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--black);
  color: var(--white);
  z-index: 55;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  gap: 8px;
}
.nav-drawer a {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 6px 0;
}
.nav-drawer a.active { color: var(--green-light); }
.nav-drawer .drawer-cta { margin-top: 28px; }

/* ---------- Sections ---------- */

.section { padding: var(--section-gap) 0 0; }
.section:last-of-type { padding-bottom: var(--section-gap); }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px 48px;
  margin-bottom: 64px;
}
.section-head .sub { max-width: 380px; padding-top: 18px; }

/* ---------- Hero (home) ----------
   Light by default. The photograph is a contained 16:9 figure rather than a
   full-bleed dark scrim, which keeps the dark budget for one content section
   plus the footer. */

.hero { background: var(--bg); color: var(--ink); padding-bottom: var(--space-9); }

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: 820px;
  padding-top: clamp(var(--space-7), 7vw, var(--space-9));
  padding-bottom: var(--space-8);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
}

.hero-sub {
  max-width: 62ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero-note {
  font-size: var(--text-sm);
  color: var(--muted);
}

/* height:auto is required — the width/height attributes on the <img> (which are
   there to reserve space and stop layout shift) otherwise force a fixed 900px. */
.hero-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-self: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Counters ---------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 72px;
}
.stat .num {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat .desc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray-6);
}
.stat .desc svg { color: var(--gray-4); flex: none; transition: color 0.3s ease, transform 0.3s var(--ease); }
.stat { transition: transform 0.3s var(--ease); }
.stat:hover { transform: translateY(-3px); }
.stat .num { transition: color 0.3s ease; }
.stat:hover .num { color: var(--green); }
.stat:hover .desc svg { color: var(--green); transform: scale(1.12); }

/* ---------- Cards ---------- */

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

.info-card {
  position: relative;
  overflow: hidden;
  background: var(--gray-1);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 100px;
  min-height: 340px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease, background-color 0.4s ease;
}
.info-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.22);
  background: #eef2ee;
}
.info-card:hover::before { transform: scaleX(1); }
.info-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.info-card .index { font-size: 0.75rem; font-weight: 600; color: var(--green); }
.info-card .icon { color: var(--green); transition: transform 0.35s var(--ease); }
.info-card:hover .icon { transform: scale(1.14) rotate(-4deg); }
.info-card .body { margin-top: auto; font-size: 0.9375rem; color: var(--gray-6); }

.cta-card {
  background: radial-gradient(120% 120% at 80% 100%, #2a2a2e 0%, var(--near-black) 55%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  min-height: 340px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}
.cta-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(82, 183, 136, 0.32), 0 0 0 1px rgba(82, 183, 136, 0.4) inset;
}
.cta-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.cta-card .squiggle { color: var(--gray-4); transition: color 0.35s ease, transform 0.35s var(--ease); }
.cta-card:hover .squiggle { color: var(--green-light); transform: rotate(8deg); }
.cta-card h3 { font-size: 1.55rem; }

/* ---------- Flex-reflow: hover "spotlight" row ---------- */
/* On hover, the focused item claims more space while siblings ease back — */
/* used sparingly on the two sections that benefit from a living grid. */
.flex-reflow { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.flex-reflow > * {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.5s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
}
@media (min-width: 901px) {
  .flex-reflow:hover > *:not(:hover) { flex-grow: 0.82; opacity: 0.7; }
  .flex-reflow > *:hover { flex-grow: 1.35; }
}
@media (max-width: 900px) {
  .flex-reflow { flex-direction: column; }
  .flex-reflow > * { flex: none; }
}

/* ---------- Grid-tilt: alternating rest-state rotation ---------- */
/* A quieter, print-collage-style break from the perfect grid. */
@media (min-width: 901px) {
  .grid-tilt .info-card { transition: transform 0.45s var(--ease), box-shadow 0.4s ease, background-color 0.4s ease; }
  .grid-tilt .info-card:nth-child(1) { transform: rotate(-1.1deg); }
  .grid-tilt .info-card:nth-child(2) { transform: rotate(0.9deg); }
  .grid-tilt .info-card:nth-child(3) { transform: rotate(-0.7deg); }
  .grid-tilt .info-card:nth-child(4) { transform: rotate(1deg); }
  .grid-tilt .info-card:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.02);
    box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.24);
    z-index: 2;
  }
}

/* Industry / founder cards */
.people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
@media (min-width: 901px) {
  .people-grid--stagger .person-card:nth-child(2n) { transform: translateY(32px); }
}
.person-card .photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 3.4;
  background: var(--gray-2);
}
.person-card .photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 0px var(--green-light);
  transition: box-shadow 0.4s ease;
  pointer-events: none;
}
.person-card:hover .photo::after { box-shadow: inset 0 0 0 3px var(--green-light); }
.person-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: transform 0.5s ease;
}
.person-card:hover .photo img { transform: scale(1.05); }
.person-card .tag {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(-6px) scale(0.8);
  transition: opacity 0.3s ease, transform 0.35s var(--ease);
}
.person-card:hover .tag { opacity: 1; transform: translateY(0) scale(1); }
.person-card h3 { font-size: 1.45rem; margin-top: 20px; }
.person-card .company {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 6px;
}
.person-card .role { font-size: 0.8125rem; color: var(--gray-5); margin-top: 4px; }

/* ---------- Process (dark) ---------- */

.process {
  background: var(--black);
  color: var(--white);
  padding: var(--section-gap) 0;
  margin-top: var(--section-gap);
}
.process-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 90px;
}
.process-head .h-section { flex: 1; text-align: center; }
.process-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.process-logo img { width: 18px; height: 18px; }

.phase { display: grid; grid-template-columns: 200px 1fr; gap: 24px 48px; }
.phase + .phase { margin-top: 8px; }
.phase-name {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.process-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.process-rows .process-row:last-child { border-bottom: none; }
.process-row .time { font-size: 1.35rem; font-weight: 600; color: var(--gray-4); letter-spacing: -0.01em; }
.process-row ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.process-row li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gray-4);
  font-size: 0.9375rem;
}
.process-row li .squiggle { color: var(--green-light); flex: none; margin-top: 5px; }

/* ---------- Testimonials ---------- */

.testimonials { text-align: center; }
.testi-slider { position: relative; max-width: 760px; margin: 48px auto 0; }
.testi-slide { display: none; }
.testi-slide.active { display: block; }
.testi-quote {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.testi-name { margin-top: 28px; font-weight: 600; font-size: 0.9375rem; }
.testi-role { color: var(--gray-5); font-size: 0.8125rem; margin-top: 2px; }
.testi-arrow {
  position: absolute;
  top: 40%;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-4);
  transition: color 0.2s ease;
  padding: 8px;
}
.testi-arrow { transition: color 0.25s ease, transform 0.25s var(--ease); }
.testi-arrow:hover { color: var(--green); transform: scale(1.15); }
.testi-prev { left: -84px; }
.testi-next { right: -84px; }

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

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price-card {
  background: var(--near-black);
  color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}
.price-card:hover {
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(82, 183, 136, 0.45) inset;
}
.price-card.featured { transform: translateY(-14px); }
@media (min-width: 901px) {
  .price-card:not(.featured):hover { transform: translateY(-8px); }
  .price-card.featured:hover { transform: translateY(-22px); }
}
.price-card .visual {
  background:
    radial-gradient(90% 120% at 85% 10%, #333338 0%, transparent 55%),
    radial-gradient(110% 130% at 10% 110%, #26262b 0%, var(--near-black) 60%);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.price-card .visual .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.price-card h3 { font-size: 1.7rem; letter-spacing: -0.02em; }
.price-card .stars { color: var(--green-light); letter-spacing: 2px; font-size: 0.85rem; }
.price-card .price { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
.price-card .features { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 22px; }
.price-card .desc { color: var(--gray-4); font-size: 0.9375rem; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--gray-3); }
.price-card li .squiggle { color: var(--green-light); flex: none; margin-top: 5px; }
.price-card .btn { width: 100%; }
.price-card .bottom-note { text-align: center; font-size: 0.8125rem; color: var(--gray-4); }

/* ---------- Tools strip ---------- */

.marquee {
  position: relative;
}
/* Static strip — scroll it by hand if it overflows. */
.marquee-track {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.marquee-set { display: contents; }
.marquee-dup { display: none; }

.tool-card {
  flex: none;
  width: 168px;
  background: var(--gray-1);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-weight: 600;
  color: #3f3f46;
  opacity: 0.85;
  font-size: 1.05rem;
  transition: opacity 0.25s ease, transform 0.35s var(--ease), box-shadow 0.35s ease, background-color 0.35s ease;
}
.tool-card:hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -18px rgba(45, 106, 79, 0.4);
  background: #eef2ee;
}
.tool-card.small-label { font-size: 0.8rem; }

@media (max-width: 900px) {
  .tool-card { width: 136px; font-size: 0.9375rem; }
  .marquee-track { animation-duration: 26s; }
}

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

.faq-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 64px;
}
.faq-list { border-top: 1px solid var(--gray-2); }
.faq-item { position: relative; border-bottom: 1px solid var(--gray-2); }
.faq-item::before {
  content: "";
  position: absolute; left: -4px; top: 0; bottom: 0; width: 3px;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.faq-item:hover::before, .faq-item.open::before { transform: scaleY(1); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--black);
  transition: color 0.25s ease;
}
.faq-item:hover .faq-q, .faq-item.open .faq-q { color: var(--green); }
.faq-q .faq-icon { flex: none; transition: transform 0.3s var(--ease), color 0.25s ease; color: var(--gray-5); }
.faq-item:hover .faq-icon, .faq-item.open .faq-icon { color: var(--green); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-a p { padding: 0 4px 24px; color: var(--gray-5); font-size: 0.9375rem; max-width: 640px; }

/* ---------- Page hero (interior pages) ---------- */

.page-hero { padding: 40px 0 90px; }
.page-hero .display-hero { width: 100%; }
.page-hero.fit .display-hero { font-size: clamp(3rem, 14.2vw, 12.4rem); }

/* ---------- Image feature (Why Promptu) ---------- */

.image-feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.image-feature img { width: 100%; height: min(64vh, 560px); object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 0.7s var(--ease); }
.image-feature:hover img { transform: scale(1.035); }
.image-feature .caption {
  position: absolute;
  top: 28px; left: 32px;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  max-width: 300px;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* Statement block with side label */
.statement-block {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
}
.statement-block .statement { max-width: 780px; }

/* ---------- Forms ---------- */

.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.book-left .statement { max-width: 480px; }
.book-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 72px;
  font-weight: 500;
}
.book-contact svg { color: var(--green); }

.form-field { margin-bottom: 28px; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--gray-3);
  background: transparent;
  padding: 10px 0 14px;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--black);
  border-radius: 0;
  appearance: none;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2371717a' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--gray-4); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green); }
.form-field textarea { min-height: 110px; resize: vertical; }
.form-submit { width: 100%; justify-content: center; position: relative; }
.form-note { margin-top: 14px; font-size: 0.8125rem; color: var(--gray-5); text-align: center; min-height: 1.2em; }

/* ---------- Legal / article ---------- */

.article { max-width: 720px; margin: 0 auto; padding-bottom: var(--section-gap); }
.article h2 { font-size: 2.2rem; margin-bottom: 20px; }
.article h3 { font-size: 1.6rem; margin: 44px 0 14px; }
.article p { color: var(--gray-5); margin-bottom: 14px; }
.article ul { color: var(--gray-5); padding-left: 22px; margin-bottom: 14px; }
.article li { margin-bottom: 8px; }

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

.footer {
  background: var(--black);
  color: var(--white);
  margin-top: var(--section-gap);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 8% 95%, rgba(27, 67, 50, 0.75) 0%, transparent 60%),
    radial-gradient(45% 60% at 92% 20%, rgba(27, 67, 50, 0.35) 0%, transparent 65%);
  pointer-events: none;
}
.footer > * { position: relative; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  font-size: 0.9375rem;
}
.footer-top .right { color: var(--gray-3); }
.footer-top .right b { color: var(--white); font-weight: 600; }
.footer-cta { text-align: center; padding: 90px 0 110px; }
.footer-cta h2 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.footer-cta p { margin: 22px auto 34px; color: var(--gray-3); max-width: 480px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0 34px;
  flex-wrap: wrap;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; }
.footer-nav a {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-3);
  transition: color 0.25s ease;
}
.footer-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--green-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.footer-nav a:hover, .footer-nav a.active { color: var(--white); }
.footer-nav a.active { color: var(--green-light); }
.footer-nav a:hover::after, .footer-nav a.active::after { transform: scaleX(1); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: var(--gray-4); transition: color 0.25s ease, transform 0.3s var(--ease); }
.footer-social a:hover { color: var(--green-light); transform: translateY(-2px) scale(1.08); }

/* ---------- Appear (no entrance animation) ---------- */
/* Superseded by the scroll-reveal block at the end of this sheet. */

.reveal { opacity: 1; transform: none; filter: none; }

/* ---------- 404 ---------- */

.page-404 { text-align: center; padding: 120px 24px 40px; }
.page-404 h1 { font-size: clamp(6rem, 22vw, 16rem); letter-spacing: -0.05em; line-height: 1; }
.page-404 p { color: var(--gray-5); margin-top: 16px; }
.page-404 a { font-weight: 600; color: var(--black); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 1240px) {
  .testi-prev { left: -24px; }
  .testi-next { right: -24px; }
}

@media (max-width: 900px) {
  :root { --pad-x: 24px; --section-gap: 96px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .section-head { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 40px; }
  .book-grid { grid-template-columns: 1fr; gap: 56px; }
  .phase { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: 1fr; gap: 12px; }
  .statement-block { grid-template-columns: 1fr; gap: 16px; }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-card { font-size: 0.85rem; }
  .display-hero, .hero-title { white-space: normal; }
}

@media (max-width: 600px) {
  :root { --pad-x: 16px; --section-gap: 80px; }
  .grid-4, .grid-3, .grid-2, .people-grid { grid-template-columns: 1fr; }
  .info-card, .cta-card { min-height: 0; gap: 48px; }
  .hero-bottom .container { flex-direction: column; gap: 6px; text-align: center; font-size: 0.9rem; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .testi-prev, .testi-next { display: none; }
}

/* ==========================================================================
   Editorial layer — serif accents, banded rows, centred statements
   ========================================================================== */

.navbar.on-light { background: var(--cream); }

/* Serif italic for the emphasised words inside a heading */
.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.005em;
}

.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gray-4); }

.editorial {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}
.editorial .display {
  margin-top: 22px;
  font-size: clamp(2.15rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.09;
}
.editorial .lede {
  margin: 26px auto 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  color: var(--gray-5);
}

/* Brand squiggle sitting under a word, as a hand-drawn underline */
.squig-word { position: relative; display: inline-block; white-space: nowrap; }
.squig-word > svg {
  position: absolute;
  left: -2%;
  bottom: -0.26em;
  width: 104%;
  height: auto;
  color: var(--green-light);
  pointer-events: none;
}

/* ---------- Banded service rows ---------- */

.svc-row {
  display: block;
  background: var(--cream);
  color: var(--black);
  border-top: 1px solid var(--gray-2);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.svc-list .svc-row:last-child { border-bottom: 1px solid var(--gray-2); }
.svc-row--dark {
  background: var(--near-black);
  color: var(--white);
  border-top-color: rgba(255, 255, 255, 0.09);
}
.svc-grid {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 30px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.svc-cat {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-5);
  transition: color 0.4s ease;
}
.svc-name {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.svc-name em { font-style: italic; }
.svc-desc {
  display: block;
  margin-top: 12px;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gray-5);
  transition: color 0.4s ease;
}
.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.svc-go .arrow { transition: transform 0.3s var(--ease); }

.svc-row--dark .svc-cat { color: var(--gray-4); }
.svc-row--dark .svc-desc { color: var(--gray-3); }

/* Hover inverts the row */
.svc-row:hover { background: var(--near-black); color: var(--white); }
.svc-row:hover .svc-cat { color: var(--gray-4); }
.svc-row:hover .svc-desc { color: var(--gray-3); }
.svc-row:hover .svc-go .arrow { transform: translateX(5px); }
.svc-row--dark:hover { background: var(--green-deep); }
.svc-row--dark:hover .svc-desc { color: rgba(255, 255, 255, 0.78); }

/* ---------- Pill CTA with circular arrow ---------- */

.btn-pill {
  background: var(--near-black);
  color: var(--white);
  padding: 7px 7px 7px 30px;
  gap: 20px;
  font-weight: 600;
}
.btn-pill .pill-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--near-black);
  font-size: 1.05rem;
  transition: transform 0.3s var(--ease), background-color 0.3s ease;
}
.btn-pill:hover { background: var(--green-deep); }
/* The arrow keeps the button's own colour on hover — no green plate */
.btn-pill:hover .pill-arrow { transform: translateX(3px); }

/* ---------- Testimonials: dark band, editorial quote ---------- */

.testi-band {
  background: var(--near-black);
  color: var(--white);
  padding: clamp(72px, 10vw, 118px) 0;
  margin-top: var(--section-gap);
}
.testi-band .testi-head { text-align: center; margin-bottom: clamp(40px, 6vw, 70px); }
.testi-band .testi-head .display {
  margin-top: 18px;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.testi-band .testi-slider { position: static; }
.testi-band .testi-slide { display: none; }
.testi-band .testi-slide.active {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.testi-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #2a332e;
  aspect-ratio: 4 / 5;
}
.testi-photo img { width: 100%; height: 100%; object-fit: cover; }
.testi-band .testi-quote {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--white);
}
.testi-band .testi-name { margin-top: 26px; font-size: 0.9375rem; font-weight: 600; }
.testi-band .testi-role { font-size: 0.875rem; color: var(--gray-4); }

.testi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(32px, 5vw, 56px);
}
.testi-count { font-size: 0.875rem; color: var(--gray-4); letter-spacing: 0.06em; }
.testi-nav { display: flex; gap: 12px; }
.testi-band .testi-arrow {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.testi-band .testi-arrow:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--near-black);
  transform: none;
}

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 34px; padding-bottom: 34px; }
  .svc-desc { max-width: none; }
  .testi-band .testi-slide.active { grid-template-columns: 1fr; }
  .testi-photo { max-width: 260px; aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   Tile materials — every card in a group gets a different surface
   Driven by :nth-child so it applies everywhere with no extra markup.
   ========================================================================== */

/* 1 — paper: white with a hairline */
.card-grid > .info-card:nth-child(4n + 1),
.flex-reflow > .info-card:nth-child(4n + 1) {
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--gray-2) inset;
  border-radius: 26px;
}
.card-grid > .info-card:nth-child(4n + 1):hover,
.flex-reflow > .info-card:nth-child(4n + 1):hover {
  background: #f7fbf8;
  box-shadow: 0 0 0 1px rgba(82, 183, 136, 0.5) inset, 0 22px 44px -24px rgba(27, 67, 50, 0.28);
}

/* 2 — tint: soft green wash, tight corners, accent runs down the left edge */
.card-grid > .info-card:nth-child(4n + 2),
.flex-reflow > .info-card:nth-child(4n + 2) {
  background: linear-gradient(158deg, rgba(82, 183, 136, 0.20) 0%, rgba(82, 183, 136, 0.05) 62%, rgba(255, 255, 255, 0.6) 100%);
  border-radius: 8px;
}
.card-grid > .info-card:nth-child(4n + 2):hover,
.flex-reflow > .info-card:nth-child(4n + 2):hover {
  background: linear-gradient(158deg, rgba(82, 183, 136, 0.34) 0%, rgba(82, 183, 136, 0.10) 62%, rgba(255, 255, 255, 0.6) 100%);
  box-shadow: 0 22px 44px -24px rgba(27, 67, 50, 0.3);
}
.card-grid > .info-card:nth-child(4n + 2)::before,
.flex-reflow > .info-card:nth-child(4n + 2)::before {
  top: 0; bottom: 0; left: 0; right: auto;
  width: 3px; height: auto;
  background: linear-gradient(180deg, var(--green), var(--green-light));
  transform: scaleY(0);
  transform-origin: top;
}
.card-grid > .info-card:nth-child(4n + 2):hover::before,
.flex-reflow > .info-card:nth-child(4n + 2):hover::before { transform: scaleY(1); }

/* 3 — outline: no fill at all, so the background reads straight through */
.card-grid > .info-card:nth-child(4n + 3),
.flex-reflow > .info-card:nth-child(4n + 3) {
  background: transparent;
  box-shadow: 0 0 0 1.5px var(--gray-3) inset;
  border-radius: 26px 8px 26px 8px;
}
.card-grid > .info-card:nth-child(4n + 3):hover,
.flex-reflow > .info-card:nth-child(4n + 3):hover {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1.5px var(--green) inset, 0 22px 44px -24px rgba(27, 67, 50, 0.26);
}

/* 4 — ink: inverted, the anchor of the group */
.card-grid > .info-card:nth-child(4n + 4),
.flex-reflow > .info-card:nth-child(4n + 4) {
  background: radial-gradient(130% 130% at 15% 0%, #26262b 0%, var(--near-black) 58%);
  color: var(--white);
  border-radius: 8px 26px 8px 26px;
}
.card-grid > .info-card:nth-child(4n + 4) .h-card { color: var(--white); }
.card-grid > .info-card:nth-child(4n + 4) .body,
.flex-reflow > .info-card:nth-child(4n + 4) .body { color: var(--gray-3); }
.card-grid > .info-card:nth-child(4n + 4) .index,
.card-grid > .info-card:nth-child(4n + 4) .icon { color: var(--green-light); }
.card-grid > .info-card:nth-child(4n + 4):hover,
.flex-reflow > .info-card:nth-child(4n + 4):hover {
  background: radial-gradient(130% 130% at 15% 0%, #2f2f36 0%, #101014 58%);
  box-shadow: 0 24px 48px -20px rgba(82, 183, 136, 0.34), 0 0 0 1px rgba(82, 183, 136, 0.42) inset;
}
.card-grid > .info-card:nth-child(4n + 4)::before,
.flex-reflow > .info-card:nth-child(4n + 4)::before {
  top: 0; bottom: 0; left: auto; right: 0;
  width: 3px; height: auto;
  transform: scaleY(0);
  transform-origin: bottom;
}
.card-grid > .info-card:nth-child(4n + 4):hover::before,
.flex-reflow > .info-card:nth-child(4n + 4):hover::before { transform: scaleY(1); }

/* ==========================================================================
   Accent system + tile mosaic
   The reference sites carry a single loud accent through three devices: a solid
   chip behind a small caps label, one line of the headline set entirely in the
   accent, and a mosaic of tiles in slightly different shades. Same devices
   here, in Promptu green, on tokens only.
   ========================================================================== */

/* ---------- Accent chip label ---------- */

.eyebrow--chip {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.on-dark .eyebrow--chip, .eyebrow--chip.on-dark {
  background: var(--accent-light);
  color: var(--dark-bg);
}

/* ---------- Working headline: Inter Bold, uppercase, one line in accent ----
   The references use a heavy condensed face here. The brand allows only two
   typefaces, so this is Inter 700 with tight tracking — the brand's own rule
   that a headline doing a job is Inter Bold, not the serif. */

.headline-work {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.headline-work .line { display: block; }
.headline-work .line--accent { color: var(--accent); }
.on-dark .headline-work .line--accent { color: var(--accent-light); }

/* ---------- Tile mosaic ----------
   gap:1px over a border-coloured background is what produces the shared
   hairline grid — the tiles sit on the border colour and the 1px gaps are
   the lines showing through, so no tile needs its own border. */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-3);
  background: var(--card);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

/* Deterministic shade scatter. The 3/5/7 cycles are coprime with the 6-column
   grid, so the shades never line up into stripes. */
.tile:nth-child(3n)     { background: var(--bg); }
.tile:nth-child(5n)     { background: var(--surface); }
.tile:nth-child(7n + 2) { background: var(--surface-2); }

/* Deliberate gaps in the mosaic, as in the reference */
.tile--empty { background: var(--surface); }
.tile--empty:nth-child(4n) { background: var(--surface-2); }

/* Green only on hover — the one accent moment the tiles get */
.tile:not(.tile--empty):hover {
  background: var(--card);
  color: var(--accent);
}

@media (max-width: 900px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .tile { font-size: var(--text-xs); aspect-ratio: 1 / 1; }
}

/* Section head that sits above a mosaic */
.tools-head { max-width: 700px; margin-bottom: var(--space-8); }
.tools-head .headline-work { margin-top: var(--space-4); }
.tools-head .lede {
  margin-top: var(--space-5);
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--muted);
}

/* ==========================================================================
   REFERENCE LAYER — dark-first, condensed display type, sharp corners.
   This block is authoritative: it comes last, so it overrides everything the
   older sections above still declare.
   ========================================================================== */

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: var(--leading-body);
}
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Display + mono type ---------- */

.display, .h-section, .h-card, .headline-work, .hero-title,
.display-hero, .footer-cta h2, .page-404 h1, .article h2, .article h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.display, .headline-work { font-size: var(--text-display); }
.h-card { font-size: var(--text-h3); }
.hero-title { font-size: var(--text-hero); }
.headline-work .line { display: block; }
.headline-work .line--accent, .display .accent, .accent { color: var(--accent); font-style: normal; font-family: inherit; font-size: inherit; }

/* Mono label — the reference's small caps tag */
.mono-label, .eyebrow, .svc-cat, .label, .testi-count, .phase-name, .process-row .time {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono-label { display: inline-flex; align-items: center; gap: var(--space-3); }
.mono-label .bar { width: 2px; height: 13px; background: var(--accent); flex: none; }
.mono-label .num, .eyebrow .num { color: var(--accent); }

.eyebrow--chip {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  letter-spacing: 0.14em;
}

/* Body copy: grey, with a white emphasis clause — straight from the reference */
.lede, .hero-sub, .body-md, .body-lg, .statement, .svc-desc, .faq-a p, .article p, .article ul {
  color: var(--muted);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  font-weight: 400;
}
.lede strong, .hero-sub strong, .statement strong, .statement b { color: var(--ink); font-weight: 500; }

/* ---------- Corner ticks ---------- */

.ticked { position: relative; }
.ticked::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 6px 6px no-repeat;
}

/* ---------- Nav ---------- */

.navbar, .navbar.on-light, .navbar.on-dark {
  background: transparent;
  color: var(--ink);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.navbar .container { max-width: var(--max-w); }
.nav-logo img { height: 20px; width: auto; filter: brightness(0) invert(1); }
.nav-links a, .nav-drawer a {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links a::after { background: var(--accent); bottom: 10px; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

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

.btn {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 52px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
}
.btn-primary, .btn-green, .btn-accent {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover, .btn-green:hover, .btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-secondary, .btn-white, .btn-black, .btn-pill {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover, .btn-white:hover, .btn-black:hover, .btn-pill:hover {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.btn-pill .pill-arrow { background: none; width: auto; height: auto; color: inherit; border-radius: 0; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-cta { min-height: 44px; padding: 0 var(--space-5); }

/* ---------- Hero: split, dark left / media right ---------- */

.hero { background: var(--bg); padding-bottom: 0; }
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-10) var(--space-8) var(--space-10) 0;
  max-width: 640px;
  margin-left: auto;
  width: 100%;
}
.hero-copy .hero-sub { max-width: 46ch; }
.hero-media { position: relative; overflow: hidden; border-left: 1px solid var(--line); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.1) brightness(0.85); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.hero-note { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.hero-shell { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x); }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-copy { padding: var(--space-8) var(--pad-x) var(--space-8) 0; max-width: none; }
  .hero-media { min-height: 320px; border-left: 0; border-top: 1px solid var(--line); }
  .hero-shell { padding-right: 0; }
}

/* ---------- Sections ---------- */

.section { padding: var(--section-gap) 0 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.editorial { text-align: left; margin: 0; max-width: 900px; }
.editorial .display { margin-top: var(--space-4); }
.editorial .lede { margin: var(--space-5) 0 0; max-width: 56ch; }

/* ---------- Stats ---------- */

/* No rules around the figures — the four stand on their own, held apart by
   space rather than by a grid. The dividers and the top rule are gone, and the
   gap they used to be doing the work of is now real spacing. */
.stats-row { margin-top: var(--space-8); gap: var(--space-7); }
.stat { padding: var(--space-2) 0; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-stat);
  line-height: 1;
  color: var(--ink);
}
.stat .desc {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: var(--space-3);
}
.stat .desc svg { color: var(--accent); }

/* ---------- Service rows (Three ways to start) ---------- */

.svc-row { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); }
.svc-row--dark { background: var(--bg-2); border-top-color: var(--line); }
.svc-list .svc-row:last-child { border-bottom: 1px solid var(--line); }
.svc-name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-h3);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.svc-name em { font-style: normal; color: var(--accent); }
.svc-desc { font-size: var(--text-base); }
.svc-go { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.14em; color: var(--accent); }
.svc-row:hover { background: var(--bg-2); color: var(--ink); }
.svc-row--dark:hover { background: var(--bg-3); }

/* ---------- Tile mosaic on dark ---------- */

.tile-grid { background: var(--line); border: 1px solid var(--line); border-radius: 0; }
.tile { background: var(--bg-2); color: var(--ink); font-family: var(--font-body); font-weight: 500; }
.tile:nth-child(3n)     { background: var(--bg); }
.tile:nth-child(5n)     { background: var(--bg-3); }
.tile:nth-child(7n + 2) { background: var(--bg-4); }
.tile--empty { background: var(--bg); }
.tile--empty:nth-child(4n) { background: var(--bg-2); }
.tile:not(.tile--empty):hover { background: var(--bg-4); color: var(--accent); }
.tools-head { max-width: 760px; }

/* ---------- Process / How it works ---------- */

.process { background: var(--bg-2); border-top: 1px solid var(--line); }
.process-row { border-top: 1px solid var(--line); }
.process-row .time { color: var(--accent); }
.process-row li, .phase li { color: var(--muted); }
.process-row li .squiggle, .phase li .squiggle { color: var(--accent); }

/* ---------- Testimonials ---------- */

.testi-band { background: var(--bg-2); color: var(--ink); margin-top: 0; border-top: 1px solid var(--line); }
.testi-band .testi-head { text-align: left; }
.testi-band .testi-quote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.45;
  color: var(--ink);
}
.testi-photo { border-radius: 0; background: var(--bg-3); }
.testi-band .testi-name { font-weight: 600; }
.testi-band .testi-role { color: var(--muted); }
.testi-band .testi-arrow { border-radius: 0; border-color: var(--line); color: var(--ink); }
.testi-band .testi-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

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

.price-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.price-card.featured { border-color: var(--accent); transform: none; }
.price-card .visual { background: var(--bg-3); border-radius: 0; }
.price-card h3 { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.price-card .price { font-family: var(--font-display); font-weight: 400; font-size: var(--text-stat); color: var(--ink); }
.price-card .desc, .price-card li { color: var(--muted); }
.price-card li .squiggle { color: var(--accent); }
.price-card .bottom-note { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.1em; color: var(--muted); }
.price-card:hover { border-color: var(--accent); box-shadow: none; transform: none; }

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

.faq-list, .faq-item { border-color: var(--line); }
.faq-q { color: var(--ink); font-weight: 500; font-size: var(--text-lg); }
.faq-item:hover .faq-q, .faq-item.open .faq-q { color: var(--accent); }
.faq-item::before { background: var(--accent); }
.faq-q .faq-icon { color: var(--muted); }

/* ---------- People / founders ---------- */

.person-card .photo { border-radius: 0; background: var(--bg-2); }
.person-card .photo::after { box-shadow: none; }
.person-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--text-h3); color: var(--ink); letter-spacing: 0.01em; }
.person-card .company { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.person-card .role { color: var(--muted); font-size: var(--text-sm); }
.person-card .tag { background: var(--accent); color: var(--bg); border-radius: 0; }

/* ---------- Cards on other pages ---------- */

.info-card, .cta-card {
  background: var(--bg-2) !important;
  color: var(--ink);
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.info-card:hover, .cta-card:hover {
  background: var(--bg-3) !important;
  border-color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important;
}
.info-card .index, .info-card .icon, .cta-card .squiggle { color: var(--accent); }
.info-card .body { color: var(--muted); }
.grid-tilt .info-card { transform: none !important; }

/* ---------- Forms ---------- */

.form-field label { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); }

/* ---------- Page heroes on interior pages ---------- */

.page-hero { padding: var(--space-9) 0 var(--space-8); border-bottom: 1px solid var(--line); }
.page-hero::before { display: none; }
.display-hero { font-size: var(--text-hero); white-space: normal; letter-spacing: 0.01em; }

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

.footer { background: var(--bg-2); color: var(--ink); margin-top: 0; border-top: 1px solid var(--line); }
.footer::before { display: none; }
.footer-top { border-bottom: 1px solid var(--line); }
.footer-top .right, .footer-nav a { color: var(--muted); }
.footer-nav a { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.14em; }
.footer-nav a:hover, .footer-nav a.active { color: var(--accent); }
.footer-nav a::after { background: var(--accent); }
.footer-cta { padding: var(--space-10) 0; }
.footer-cta h2 { font-size: var(--text-display); }
.footer-cta p { color: var(--muted); }
.footer-social a { color: var(--muted); }
.footer-social a:hover { color: var(--accent); transform: none; }

/* ---------- Misc cleanup ---------- */

.image-feature { border-radius: 0; }
.image-feature img { filter: grayscale(0.4) contrast(1.1) brightness(0.85); }
.statement-block { grid-template-columns: 180px 1fr; }
/* No side label — the statement runs full width and sits up close under the
   page title instead of floating in its own band. */
.statement-block--tight {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-6);
}
.statement-block--tight .statement { max-width: 60ch; }

/* Inner-page title cards all share one size — none of them outrun the others */
.page-hero.fit .display-hero { font-size: var(--text-hero); }
.article h2 { font-size: var(--text-display); }
.article h3 { font-size: var(--text-h3); }
.page-404 a { color: var(--accent); text-decoration-color: var(--accent); }
.squig-word > svg { color: var(--accent); }
.svc-grid { max-width: var(--max-w); }

/* Corner ticks on the bordered card groups, as in the reference */
.price-card, .info-card { position: relative; }
.price-card::after, .info-card::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background:
    linear-gradient(var(--muted), var(--muted)) top left / 5px 5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) top right / 5px 5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom left / 5px 5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom right / 5px 5px no-repeat;
  transition: background-color var(--dur) var(--ease-out);
}
.price-card:hover::after, .info-card:hover::after {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
}

/* ==========================================================================
   LIGHT DEFAULT + DARK EMPHASIS ZONES
   Every component in the layer above is written against --bg / --ink / --muted
   / --line / --accent. So rather than restyling components twice, this block
   flips those five variables: light values at :root, dark values re-scoped
   inside the sections chosen for emphasis. Each zone repaints itself.
   ========================================================================== */

:root {
  /* Light is now the default */
  --bg:     #F2F2F0;
  --bg-2:   #FAFAF8;   /* raised panel / tile shade A */
  --bg-3:   #E9E9E6;   /* tile shade B */
  --bg-4:   #E0E0DC;   /* tile shade C */
  --line:   #DCDCD8;
  --ink:    #0D0D0C;
  /* Darkened from #6E6E68 so muted text clears 4.5:1 on every light surface,
     including the darkest mosaic tile (#E0E0DC). */
  --muted:  #5F5F59;

  /* On light, the deep green is the accent — the bright one is far too pale */
  --accent: #2D6A4F;
}

/* ---- The dark emphasis zones ---- */
.hero,
.process,
.testi-band,
.svc-row--dark,
.footer {
  --bg:     #0D0D0C;
  --bg-2:   #131312;
  --bg-3:   #1A1A18;
  --bg-4:   #202020;
  --line:   #262624;
  --ink:    #F2F2F0;
  --muted:  #8C8C86;
  --accent: #52B788;   /* the bright green takes over on dark */

  background: var(--bg);
  color: var(--ink);
}

/* Body + light-section surfaces */
html, body { background: var(--bg); color: var(--ink); }

/* Dark zones need their own top edge, not the light hairline */
.process, .testi-band, .footer { border-top: 1px solid var(--line); }

/* ---- Logo: pick the asset that suits the zone, no filters ---- */
.nav-logo img { filter: none; }

/* ---- Light-section component corrections ---- */

.tile-grid { background: var(--line); border-color: var(--line); }
.tile { background: var(--bg-2); }
.tile:nth-child(3n)     { background: var(--bg); }
.tile:nth-child(5n)     { background: var(--bg-3); }
.tile:nth-child(7n + 2) { background: var(--bg-4); }
.tile--empty { background: var(--bg-3); }
.tile--empty:nth-child(4n) { background: var(--bg-4); }
.tile:not(.tile--empty):hover { background: var(--bg-2); color: var(--accent); }

.price-card, .info-card, .cta-card {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
.price-card .visual { background: var(--bg-3); }
.price-card.featured { border-color: var(--accent) !important; }
.info-card:hover, .cta-card:hover, .price-card:hover {
  background: var(--bg) !important;
  border-color: var(--accent) !important;
}

.svc-row { background: var(--bg); }
.svc-row:hover { background: var(--bg-3); }
.svc-row--dark:hover { background: var(--bg-2); }

.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--ink);
}

.person-card .photo, .testi-photo { background: var(--bg-3); }
.image-feature img, .hero-media img { filter: grayscale(0.35) contrast(1.06); }
.hero-media img { filter: grayscale(0.4) contrast(1.1) brightness(0.85); }

.stats-row, .stat { border-color: var(--line); }
.faq-list, .faq-item, .navbar { border-color: var(--line); }
.section { border-top-color: var(--line); }

/* ==========================================================================
   GUIDE PASS — wholistic changes
   ========================================================================== */

/* Oswald replaces Anton: same condensed grotesque character, noticeably more
   room between letters. Weight 600 + a touch of positive tracking to match the
   density Anton had while keeping the letters apart. */
.display, .h-section, .h-card, .headline-work, .hero-title, .display-hero,
.footer-cta h2, .page-404 h1, .article h2, .article h3,
.stat .num, .svc-name, .price-card .price, .person-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
}
.hero-title { letter-spacing: 0.028em; }

/* ---------- Sticky header ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transition: background-color var(--dur) var(--ease-out),
              padding var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
/* Once the page scrolls, tighten the bar and firm up its edge */
.navbar.is-stuck {
  padding: var(--space-3) 0;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom-color: var(--line);
}

/* ---------- Footer: hourglass gradient field (image3website) ----------
   The shape is the Promptu mark itself — the logo silhouette is used as an
   alpha mask over a green gradient, so the field reads as our hourglass
   (narrow waist, sand notches) rather than as two crossed triangles.
   Sized off the footer's own height so the whole mark stays in frame. */

.footer { position: relative; overflow: hidden; }
.footer::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(82, 183, 136, 0.26) 0%, transparent 64%),
    radial-gradient(90% 70% at 50% -10%, rgba(82, 183, 136, 0.10) 0%, transparent 60%);
}
.footer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Height-led so the silhouette is never cropped by a short footer */
  height: 92%;
  aspect-ratio: 1 / 1;
  max-width: 82vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Stronger than it was: at 0.07 through the waist the shape was there in the
     stylesheet but effectively invisible on the black. These values read the
     way image3website does — present, still clearly a backdrop. */
  background: linear-gradient(180deg,
              rgba(82, 183, 136, 0.30) 0%,
              rgba(82, 183, 136, 0.12) 44%,
              rgba(82, 183, 136, 0.12) 56%,
              rgba(82, 183, 136, 0.30) 100%);
  -webkit-mask-image: url("../assets/logos/promptu-mark-white.png");
          mask-image: url("../assets/logos/promptu-mark-white.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.footer > * { position: relative; z-index: 1; }

/* ---------- Home hero: full-bleed photo, translucent copy panel ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 92vh;
  /* The bar floats over the photo rather than sitting in the flow, so the hero
     reserves its height here. --nav-h is measured in js/main.js; the fallback
     covers the moment before the script runs. */
  padding-top: var(--nav-h, 92px);
  padding-bottom: 0;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg picture, .hero-bg img { display: block; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; filter: grayscale(0.28) contrast(1.06) brightness(0.72); }
/* Keeps the right side readable and grounds the panel on the left */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13,13,12,0.72) 0%, rgba(13,13,12,0.34) 48%, rgba(13,13,12,0.62) 100%),
    linear-gradient(180deg, rgba(13,13,12,0.55) 0%, transparent 26%, rgba(13,13,12,0.45) 100%);
}

/* The nav floats over the photo until it sticks.
   It is fixed rather than sticky, and lives outside the hero: a sticky bar can
   only stick inside its own parent, so while it sat in the hero it slid away
   the moment the hero scrolled past. Fixed keeps it present for the whole page
   and, being out of flow, it can tighten on scroll without nudging the page. */
.navbar--over {
  /* It sits over a dark photograph, so it carries the dark palette itself.
     It used to inherit this from the hero; once it moved outside the hero it
     fell back to the light one and the links went near-black on the picture —
     barely visible at rest and darker still on hover. No background here: the
     bar stays transparent until it sticks. */
  --bg:     #0D0D0C;   /* the CTA's label and the mobile drawer read off this */
  --bg-2:   #131312;
  --bg-3:   #1A1A18;
  --line:   #262624;
  --ink:    #F2F2F0;
  --muted:  #C9C9C4;   /* lifted from #8C8C86 — it has a photo to beat */
  --accent: #52B788;
  color: var(--ink);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.navbar--over.is-stuck {
  background: color-mix(in srgb, #0D0D0C 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}

.hero-shell {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-8) var(--pad-x);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 620px;
  padding: var(--space-8);
  background: rgba(13, 13, 12, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(242, 242, 240, 0.10);
}
.hero-copy .hero-sub { max-width: 44ch; }

@media (max-width: 900px) {
  .hero { min-height: 80vh; }
  .hero-shell { padding: var(--space-7) var(--pad-x); }
  .hero-copy { padding: var(--space-6); max-width: none; }
}

/* ---------- How it works: scroll-drawn timeline ---------- */

/* Two columns: Phase 1 draws first, then Phase 2 slides in to its right —
   so the whole process reads on one screen instead of a second page of scroll. */
.timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(48px, 7vw, 80px);
}
.tl-col { position: relative; }
/* Phase 2 waits offstage until Phase 1 has drawn */
.tl-col--2 {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out);
}
.tl-col--2.is-revealed { opacity: 1; transform: none; }

.tl-steps { position: relative; padding-left: 64px; }
.tl-rail {
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}
/* JS sets the height; this is the drawn portion */
.tl-fill {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent));
  transition: height 120ms linear;
}

.tl-phase {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-5);
  padding-left: 64px;
}

.tl-step { position: relative; padding-bottom: var(--space-8); }
.tl-step:last-child { padding-bottom: 0; }

.tl-dot {
  position: absolute;
  left: -56px;
  top: 6px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.tl-step.is-active .tl-dot {
  border-color: var(--accent);
  background: var(--accent);
  transform: scale(1.25);
}

.tl-body {
  opacity: 0.45;
  transform: translateY(8px);
  transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out);
}
.tl-step.is-active .tl-body { opacity: 1; transform: none; }

.tl-num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  color: var(--muted);
}
.tl-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: var(--text-h3);
  line-height: 1.05;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--ink);
}
.tl-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.tl-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.tl-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* Below the split breakpoint the two phases stack, and Phase 2 is always on */
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-8); }
  .tl-col--2 { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .tl-steps { padding-left: 40px; }
  .tl-phase { padding-left: 40px; }
  .tl-rail { left: 6px; }
  .tl-dot { left: -40px; width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-body { opacity: 1; transform: none; }
  .tl-fill { transition: none; }
  .tl-col--2 { opacity: 1; transform: none; transition: none; }
}

/* ---------- Three ways to start: exactly one dark row at a time ----------
   Default = the middle (Build) row is dark. On hover the hovered row takes the
   dark treatment and the default one drops back to light, so there is always
   exactly one black row and two white ones. */

.svc-list .svc-row {
  --bg: #F2F2F0; --bg-2: #FAFAF8; --bg-3: #E9E9E6; --bg-4: #E0E0DC;
  --line: #DCDCD8; --ink: #0D0D0C; --muted: #5F5F59; --accent: #2D6A4F;
  background: var(--bg);
  color: var(--ink);
  transition: background-color var(--dur-lg) var(--ease-out),
              color var(--dur-lg) var(--ease-out);
}
.svc-list .svc-row--dark,
.svc-list .svc-row:hover {
  --bg: #0D0D0C; --bg-2: #131312; --bg-3: #1A1A18; --bg-4: #202020;
  --line: #262624; --ink: #F2F2F0; --muted: #8C8C86; --accent: #52B788;
  background: var(--bg);
  color: var(--ink);
}
/* Something else is hovered — the default-dark row hands the treatment over */
.svc-list:hover .svc-row--dark:not(:hover) {
  --bg: #F2F2F0; --bg-2: #FAFAF8; --bg-3: #E9E9E6; --bg-4: #E0E0DC;
  --line: #DCDCD8; --ink: #0D0D0C; --muted: #5F5F59; --accent: #2D6A4F;
  background: var(--bg);
  color: var(--ink);
}
/* The legacy rules further up pin .svc-cat / .svc-desc to fixed grays
   (--gray-3 resolves to --bg-4, a background shade). That washes the Build
   Pack copy out to near-invisible whenever the row flips to light. Handing
   them back to --muted makes the text track whichever palette the row is
   currently wearing, in both states. */
.svc-list .svc-row .svc-cat,
.svc-list .svc-row .svc-desc,
.svc-list .svc-row--dark .svc-cat,
.svc-list .svc-row--dark .svc-desc,
.svc-list .svc-row:hover .svc-cat,
.svc-list .svc-row:hover .svc-desc,
.svc-list .svc-row--dark:hover .svc-desc {
  color: var(--muted);
}
.svc-list .svc-row .svc-name { color: var(--ink); }
.svc-list .svc-row .svc-go   { color: var(--accent); }

/* ---------- Who we work with: pairs swap as you scroll ----------
   The section is pinned while its pairs cycle, so scrolling drives the swap
   on the right without the rest of the page travelling underneath it. */

.industry-section { position: relative; border-top: 1px solid var(--line); }
.industry-runway { position: relative; height: 220vh; }
.industry-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-9) 0;
}
.industry-stack { position: relative; min-height: 460px; }
/* A vertical conveyor: the waiting pair sits below the frame, rides up into
   place, and the pair it replaces keeps travelling up and out of the way. */
.industry-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(75%);
  pointer-events: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.industry-pair.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Outgoing pair keeps climbing until it has cleared the frame entirely */
.industry-pair.is-past { opacity: 0; transform: translateY(-75%); }
/* The two cards in a pair arrive a beat apart so the slide reads as motion */
.industry-pair .person-card {
  transition: transform 700ms var(--ease-out);
}
.industry-pair .person-card:nth-child(2) { transition-delay: 90ms; }
.industry-pair:not(.is-active) .person-card:nth-child(2) { transform: translateY(18px); }

.industry-count {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  color: var(--muted);
}
.industry-count .industry-i { color: var(--accent); }

@media (max-width: 900px) {
  /* No pinning on small screens — the runway collapses and the pairs stack */
  .industry-runway { height: auto; }
  .industry-sticky { position: static; min-height: 0; display: block; padding: var(--section-gap) 0 0; }
  .industry-stack { min-height: 0; }
  .industry-pair { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: var(--space-6); }
  .industry-pair.is-past { transform: none; }
}
@media (max-width: 600px) {
  .industry-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .industry-pair { transition: none; }
}

/* ---------- Tools: filterable mosaic ---------- */

.tool-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-7) 0 var(--space-5);
}
.tool-filter {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.tool-filter:hover { color: var(--ink); border-color: var(--muted); }
.tool-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tool-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tile-grid--tools .tile {
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
/* Filtered-out tiles stay in place so the grid never reflows — they just recede */
.tile-grid--tools .tile.is-dimmed {
  opacity: 0.22;
  color: var(--muted);
}
.tile-grid--tools .tile.is-match { background: var(--bg-2); }
.tile-grid--tools .tile.is-match .tile-back {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* Proximity shading — JS feeds each tile a --prox from 0 to 1 based on how
   close the cursor is, and that drives a pool of light across the grid. */
.tile-grid--tools .tile { --prox: 0; position: relative; isolation: isolate; }
.tile-grid--tools .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  opacity: calc(var(--prox) * 0.16);
  transition: opacity 220ms linear;
}
.tile-grid--tools .tile.is-dimmed::after { opacity: 0; }

.tool-count {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-count .tool-shown { color: var(--accent); }

/* ---------- About: founders ---------- */

.founders-head { margin-bottom: var(--space-6); }
.founders-head .display { margin-top: var(--space-4); }
/* The story runs the full width of the container as even columns, rather than
   one narrow measure stacked down the left. */
.founders-story {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}
.founders-story p { color: var(--muted); font-size: var(--text-lg); line-height: var(--leading-body); }
@media (max-width: 900px) {
  .founders-story { grid-template-columns: 1fr; gap: var(--space-4); }
}
.founders-story strong { color: var(--ink); font-weight: 500; }

/* Held to a narrower measure and a squarer crop so both founders sit on
   screen together instead of running a full viewport each. */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 720px;
}
@media (max-width: 700px) {
  .founder-grid { max-width: none; }
}

/* Photo tile — hover (or keyboard focus) darkens it and lifts the bio in */
.founder-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  cursor: default;
}
.founder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lg) var(--ease-out), filter var(--dur-lg) var(--ease-out);
}
.founder-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,0) 30%, rgba(13,13,12,0.75) 100%);
  transition: background var(--dur-lg) var(--ease-out);
}
.founder-card:hover img, .founder-card:focus-visible img { transform: scale(1.04); filter: brightness(0.55); }
.founder-card:hover::after, .founder-card:focus-visible::after {
  background: linear-gradient(180deg, rgba(13,13,12,0.55) 0%, rgba(13,13,12,0.88) 100%);
}
.founder-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.founder-plate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--space-6);
  color: #F2F2F0;
}
.founder-plate h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: var(--text-h3);
  line-height: 1.05;
  color: #F2F2F0;
}
.founder-role {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #52B788;
  margin-top: var(--space-2);
}
/* Bio is collapsed until hover, then eases open */
.founder-bio {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(242, 242, 240, 0.86);
  font-size: var(--text-sm);
  line-height: 1.6;
  transition: max-height var(--dur-lg) var(--ease-out),
              opacity var(--dur-lg) var(--ease-out),
              margin-top var(--dur-lg) var(--ease-out);
}
.founder-card:hover .founder-bio, .founder-card:focus-visible .founder-bio {
  max-height: 22em;
  opacity: 1;
  margin-top: var(--space-4);
}

@media (max-width: 700px) {
  .founder-grid { grid-template-columns: 1fr; }
  /* No hover on touch — show the bio outright */
  .founder-bio { max-height: 22em; opacity: 1; margin-top: var(--space-4); }
  .founder-card::after { background: linear-gradient(180deg, rgba(13,13,12,0.35) 0%, rgba(13,13,12,0.88) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .founder-card img, .founder-bio, .founder-card::after { transition: none; }
}

/* ---------- Services: plans as an expanding menu ---------- */

.plan-menu {
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
/* Each row carries an accent bar on its left edge that grows in on hover and
   stays put while the row is open — the cue that ties the menu together. */
.plan {
  position: relative;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out);
}
.plan::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-lg) var(--ease-out);
}
.plan:hover::before, .plan.is-open::before { transform: scaleY(1); }
.plan:hover { background: var(--bg-2); }
.plan.is-open {
  background: linear-gradient(180deg, var(--bg-2) 0%, transparent 70%);
}

.plan-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  padding: clamp(28px, 3.4vw, 46px) var(--space-6);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: color var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
}
.plan-head:hover { color: var(--accent); padding-left: var(--space-7); }
.plan-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.plan-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The index reads as a big outlined figure rather than a small mono label */
.plan-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  transition: color var(--dur) var(--ease-out);
}
.plan:hover .plan-num, .plan.is-open .plan-num { color: var(--accent); }
.plan-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1;
}
/* The row used to end on a price. It now ends on who the plan is for —
   pricing lives one section down, on its own. */
.plan-who {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--muted);
  text-align: right;
  max-width: 30ch;
  justify-self: end;
}
.plan.is-open .plan-who, .plan:hover .plan-who { color: var(--ink); }
/* Plus sign that becomes a minus when open, ringed so it reads as a control */
.plan-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur-lg) var(--ease-out);
}
.plan:hover .plan-toggle { border-color: var(--accent); transform: rotate(90deg); }
.plan.is-open .plan-toggle { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.plan-toggle::before, .plan-toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.plan-toggle::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.plan-toggle::after  { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.plan.is-open .plan-toggle::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.plan-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-lg) var(--ease-out); }
.plan-body-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-6) var(--space-8);
  align-items: start;
  padding: 0 var(--space-6) var(--space-7);
}
.plan-blurb { color: var(--muted); font-size: var(--text-lg); line-height: var(--leading-body); }
.plan-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.plan-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.55;
}
.plan-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--accent);
}
.plan-body-inner .btn { grid-column: 1 / -1; justify-self: start; }

.plan-note {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.plan-note p { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
.plan-note strong { color: var(--ink); font-weight: 500; }
/* Given more presence — it is the one line that applies to every plan above */
.plan-note {
  grid-template-columns: 260px 1fr;
  gap: var(--space-6);
  padding: var(--space-7);
  border-left: 3px solid var(--accent);
}
.plan-note .eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  color: var(--accent);
}
.plan-note p { font-size: var(--text-lg); }

@media (max-width: 900px) {
  .plan-head { grid-template-columns: auto 1fr auto; gap: var(--space-3) var(--space-4); padding: var(--space-6) var(--space-5); }
  .plan-head:hover { padding-left: var(--space-5); }
  .plan-tag { display: none; }
  /* Narrow rows put the audience line under the plan name rather than beside it */
  .plan-who {
    grid-column: 2 / -1;
    text-align: left;
    justify-self: start;
    max-width: none;
    font-size: var(--text-sm);
  }
  .plan-toggle { width: 34px; height: 34px; }
  .plan-body-inner { grid-template-columns: 1fr; padding: 0 var(--space-5) var(--space-7); }
  .plan-note { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-body { transition: none; }
}

/* ---------- Case studies: rotating carousel with click-to-expand ---------- */

.cs-carousel { overflow: hidden; margin-top: clamp(40px, 6vw, 72px); }
.cs-track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--dur-lg) var(--ease-out);
  will-change: transform;
}
.cs-card {
  flex: 0 0 calc((100% - var(--space-5) * 2) / 3);
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur-lg) var(--ease-out);
}
.cs-card:hover { border-color: var(--accent); }
/* Opened card grows slightly, as asked */
.cs-card.is-open { transform: scale(1.02); border-color: var(--accent); background: var(--bg); z-index: 2; }

.cs-face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 232px;
  padding: var(--space-6);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.cs-face:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.cs-cat {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line);
  padding: var(--space-1) var(--space-3);
}
/* Company name stands in for a logo where no real mark exists yet */
.cs-logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.05;
  margin-top: auto;
}
.cs-project { color: var(--muted); font-size: var(--text-sm); }
.cs-cue {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}
.cs-card:hover .cs-cue, .cs-card.is-open .cs-cue { color: var(--accent); }

.cs-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-lg) var(--ease-out); }
.cs-body-inner { padding: 0 var(--space-6) var(--space-6); }
.cs-body-inner p { color: var(--muted); font-size: var(--text-sm); line-height: 1.65; }

.cs-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
}
.cs-count {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  color: var(--muted);
}
.cs-count .cs-i { color: var(--accent); }
.cs-nav { display: flex; gap: var(--space-3); }
.cs-arrow {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.cs-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.cs-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) { .cs-card { flex-basis: calc((100% - var(--space-5)) / 2); } }
@media (max-width: 600px) { .cs-card { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .cs-track, .cs-body, .cs-card { transition: none; }
}

/* ---------- Why Promptu: split cards (image9website) ----------
   A tinted side panel carrying the number and icon, with the copy in a lighter
   panel beside it — the two-tone sectioned card from the reference. */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: clamp(40px, 6vw, 72px);
}
.why-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.why-card:hover { border-color: var(--accent); }

.why-card-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
  border-right: 1px solid var(--line);
}
.why-num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  color: var(--accent);
}
.why-icon { color: var(--accent); }

.why-card-main { padding: var(--space-6); }
.why-card-main h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: var(--text-h3);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.why-card-main p { color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }

@media (max-width: 800px) { .why-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .why-card { grid-template-columns: 1fr; }
  .why-card-side { flex-direction: row; justify-content: flex-start; gap: var(--space-4); border-right: 0; border-bottom: 1px solid var(--line); }
}

/* The open card grew via scale(), which the carousel's overflow clipped at the
   edges. The height expansion already reads as "expands" — so emphasise with
   surface and border instead and drop the transform. */
.cs-card.is-open { transform: none; box-shadow: inset 0 0 0 1px var(--accent); }
.cs-carousel { padding: 2px 0; }

/* ==========================================================================
   CMS PASS — client logos, city slider, booking panel
   ========================================================================== */

/* ---------- Case studies: real client marks ----------
   Logos arrive as artwork on white, so each sits on its own light plate and
   is contained rather than cropped — every mark keeps its own proportions. */
.cs-logo--img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 132px;
  margin-top: auto;
  padding: var(--space-4);
  background: #FFFFFF;
  border: 1px solid var(--line);
}
.cs-logo--img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------- Why Promptu: where we work ----------
   Crossfading slider over the three cities, with the caption swapping in step. */
.city-slider { margin-top: var(--space-6); }
.city-track {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.city-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.04);
  /* Both have to land inside the 1.8s the slider now holds each city for —
     at the old 900/1600ms the push-in was still running when the next slide
     began and the two smeared together. */
  transition: opacity 520ms var(--ease-out), transform 1700ms var(--ease-out);
}
.city-slide.is-active { opacity: 1; transform: none; }
.city-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) contrast(1.06);
}
/* If a city photo has not been dropped in yet, the slide falls back to a
   labelled panel rather than a broken image. */
.city-slide.is-missing img { display: none; }
.city-slide.is-missing::after {
  content: attr(data-city);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-display);
  color: var(--muted);
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-4) 100%);
}

.city-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.city-caption { margin: 0; }
.city-dots { display: flex; gap: var(--space-2); }
.city-dot {
  width: 32px;
  height: 3px;
  padding: 0;
  border: none;
  background: var(--line);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.city-dot.is-active { background: var(--accent); }
.city-dot:hover { background: var(--muted); }
.city-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 600px) {
  .city-track { aspect-ratio: 4 / 3; }
  .city-foot { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .city-slide { transition: none; }
}

/* ---------- Book a call: panel treatment (image12website) ----------
   The form sits on a raised plate with a hard offset shadow, labels run down
   the left, and the "interested in" choice becomes a row of pill chips
   instead of a dropdown. Colours and type stay on the Promptu system. */
.book-hero-band {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.book-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-8);
  align-items: end;
  padding: var(--space-9) 0 var(--space-8);
}
.book-hero-inner .display-hero { margin-bottom: var(--space-4); }
.book-lede { color: var(--muted); font-size: var(--text-lg); line-height: var(--leading-body); max-width: 46ch; }
.book-lede strong { color: var(--ink); font-weight: 500; }

.book-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}
.book-fact {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: center;
}
.book-fact .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent);
}
.book-fact .txt {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.book-panel {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 0 var(--accent);
  padding: var(--space-7);
}
.book-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.book-panel-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: var(--text-h3);
  line-height: 1;
}
.book-panel-head .step {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.book-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.book-row:last-of-type { border-bottom: none; }
.book-row > label,
.book-row > .row-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
}
.book-row input,
.book-row textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur) var(--ease-out);
}
.book-row textarea { min-height: 110px; resize: vertical; }
.book-row input:focus,
.book-row textarea:focus { outline: none; border-color: var(--accent); }
.book-row input::placeholder,
.book-row textarea::placeholder { color: var(--muted); opacity: 0.75; }

/* Pill chips replace the interest dropdown */
.chip-set { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px var(--space-5);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.chip:hover { border-color: var(--ink); }
.chip.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Submit picks up the same hard-shadow treatment as the panel */
.book-submit {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--ink);
  padding: var(--space-4) var(--space-7);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.book-submit:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 var(--ink); }
.book-submit:active { transform: translate(5px, 5px); box-shadow: none; }
.book-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.book-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
}
.book-contact-row a { color: var(--accent); }
.book-contact-row a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .book-hero-inner { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-7); }
  .book-panel { padding: var(--space-6); box-shadow: 6px 6px 0 0 var(--accent); }
  .book-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .book-row > label, .book-row > .row-label { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .book-submit { transition: none; }
}

/* ==========================================================================
   CMS PASS 2 — scroll reveal, pinned process, tile flip, layout tuning
   ========================================================================== */

/* ---------- Scroll reveal ----------
   Section headings lift in as you move from one topic to the next. Same easing
   and same 12px rise as before — just given longer to travel (620ms) so the
   arrival reads as unhurried rather than snapping into place.
   Only armed once JS is running, so a failed script can never hide content. */
.js-reveal .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(12px);
}
.reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
/* Inside a heading block the parts arrive in quick succession — eyebrow,
   headline, then lede — which reads as one movement rather than three. */
.js-reveal .reveal-stagger > * {
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.js-reveal .reveal-stagger:not(.is-in) > * {
  opacity: 0;
  transform: translateY(12px);
}
.js-reveal .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 110ms; }
.js-reveal .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 220ms; }
.js-reveal .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 330ms; }
/* Page-load reveal for the title card on inner pages */
.js-reveal .page-hero .display-hero,
.js-reveal .book-hero-inner > div {
  animation: reveal-in 760ms var(--ease-out) both;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.is-in),
  .js-reveal .reveal-stagger:not(.is-in) > * { opacity: 1; transform: none; }
  .reveal, .js-reveal .reveal-stagger > * { transition: none; }
  .js-reveal .page-hero .display-hero,
  .js-reveal .book-hero-inner > div { animation: none; }
}

/* ---------- Who we work with: continuous scroll-linked track ----------
   The four industries live in one 2x2 track that the scroll translates
   smoothly, so the cards flow past instead of snapping between two states. */
.industry-stack {
  position: relative;
  height: 470px;
  overflow: hidden;
}
.industry-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Rows size to the card, with a real gutter between them — a fixed row
     height shorter than the card is what let the photos and the captions
     run into each other. */
  grid-auto-rows: auto;
  gap: var(--space-8) var(--space-6);
  will-change: transform;
}
.industry-track .person-card {
  align-self: start;
  transition: opacity 260ms linear;
}
/* A squarer crop keeps the whole card — photo plus its three lines of
   caption — comfortably inside the frame at any column width. */
.industry-track .person-card .photo { aspect-ratio: 16 / 11; }
.industry-track .person-card h3 { margin-top: 16px; }

@media (max-width: 900px) {
  .industry-stack { height: auto; overflow: visible; }
  .industry-track { grid-auto-rows: auto; gap: var(--space-6); transform: none !important; }
  .industry-track .person-card { opacity: 1 !important; }
}

/* ---------- How it works: pinned while both phases play ----------
   A longer runway means the two phases draw over more scroll, so each step
   sits on screen long enough to actually be read before the next arrives. */
.process-runway { position: relative; height: 360vh; }
.process-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-6) 0;
}
/* Pinned means the whole thing has to clear one viewport, so the timeline
   runs tighter here than it would in normal flow. */
.process-sticky .editorial { margin-bottom: 0; }
.process-sticky .timeline { margin-top: clamp(28px, 3.5vw, 48px); }
.process-sticky .tl-step { padding-bottom: var(--space-6); }
.process-sticky .tl-title { margin: var(--space-1) 0 var(--space-3); }
.process-sticky .tl-list { gap: var(--space-2); }
.process-sticky .tl-phase { margin-bottom: var(--space-4); }
.process-sticky .lede { margin-bottom: 0; }
/* Short viewports: because the panel is pinned, anything taller than the screen
   is simply unreachable — you scroll and the last steps never come into view.
   On a 700px-tall laptop the block ran ~110px past the bottom. Below 900px of
   viewport height the section tightens itself, in step with the height it has,
   until the whole process clears one screen. */
@media (min-width: 861px) and (max-height: 900px) {
  .process-sticky { padding: var(--space-4) 0; }
  .process-sticky .display { font-size: clamp(34px, 5.6vh, 64px); }
  .process-sticky .lede { margin-top: var(--space-3); font-size: clamp(15px, 2vh, 17px); }
  .process-sticky .timeline { margin-top: clamp(16px, 3vh, 48px); }
  .process-sticky .tl-step { padding-bottom: clamp(10px, 2.6vh, 32px); }
  .process-sticky .tl-title {
    font-size: clamp(22px, 3.4vh, 34px);
    margin: var(--space-1) 0 var(--space-2);
  }
  .process-sticky .tl-list { gap: clamp(4px, 0.9vh, 12px); }
  .process-sticky .tl-list li { font-size: clamp(14px, 1.9vh, 16px); }
}
@media (max-width: 860px) {
  .process-runway { height: auto; }
  .process-sticky { position: static; min-height: 0; display: block; padding: var(--section-gap) 0; }
}

/* ---------- Tools mosaic: smaller tiles that flip to name themselves ----------
   At rest the grid reads as monograms. A broad pool around the cursor flips
   to the full names, the wave spreading outward via a distance-based delay. */
/* minmax(0, 1fr) rather than 1fr: a plain 1fr track will not shrink below its
   content's min-content width, so one long name ("Google Workspace") used to
   push its column wider than the rest. Every tile is now identical. */
.tile-grid--tools { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.tile-grid--tools .tile {
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: var(--space-2);
  perspective: 620px;
}
.tile-grid--tools .tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease-out);
}
.tile-grid--tools .tile.is-flipped .tile-inner { transform: rotateY(180deg); }
.tile-grid--tools .tile-front,
.tile-grid--tools .tile-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 4px;
  text-align: center;
}
/* At rest every tile carries the same cover: the Promptu hourglass mark
   (image13website), the logo silhouette masked over the green accent rather
   than a font character. Flipping a tile reveals the app's real name. */
.tile-grid--tools .tile-front { padding: 0; }
.tile-grid--tools .tile-mark {
  display: block;
  width: 46%;
  height: 46%;
  background-color: var(--accent);
  -webkit-mask-image: url("../assets/logos/promptu-mark-white.png");
          mask-image: url("../assets/logos/promptu-mark-white.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.tile-grid--tools .tile-back {
  transform: rotateY(180deg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--accent);
  text-wrap: balance;
}
/* The proximity wash still runs underneath the flip */
.tile-grid--tools .tile.is-dimmed .tile-inner { transform: none; }

/* No cursor means no flip, so a touch visitor would be left with 24 identical
   hourglasses and no way to turn any of them over. There the tiles rest
   name-up instead — the cover is a desktop-hover idea. */
@media (hover: none) {
  .tile-grid--tools .tile-inner,
  .tile-grid--tools .tile.is-dimmed .tile-inner { transform: rotateY(180deg); }
}

@media (max-width: 900px) { .tile-grid--tools { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .tile-grid--tools { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .tile-grid--tools .tile-inner { transition: none; }
}

/* ---------- 2.3 Founder cards centred ---------- */
.founder-grid { margin-inline: auto; }

/* ---------- 3.2 Opening statement: larger, no rules fencing it in ---------- */
.statement-block--tight .statement {
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  line-height: 1.28;
  max-width: 24ch;
}
/* The statement flows out of the title and into what follows — no divider
   lines top or bottom, and the section under it loses its rule. */
.page-hero + .container .statement-block--tight { margin-top: var(--space-7); }
.page-hero { border-bottom: 0; }
.statement-block--tight + * ,
.container:has(> .statement-block--tight) + .section { border-top: 0; }

/* ---------- 3.4 Maintenance note: light green plate ---------- */
.plan-note {
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ---------- 4.3 Why Promptu statement: room before the dark band ---------- */
.why-statement-space { padding-bottom: var(--space-10); }

/* ---------- 6.1 Book a Call title on one line ---------- */
.book-hero-inner .display-hero {
  white-space: nowrap;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
}
@media (max-width: 520px) {
  .book-hero-inner .display-hero { font-size: clamp(2rem, 11vw, 3rem); }
}

/* ---------- 6.3 Booking panel, dialled down a little ---------- */
.book-panel {
  max-width: 880px;
  margin-inline: auto;
  padding: var(--space-6);
  box-shadow: 8px 8px 0 0 var(--accent);
}
.book-panel-head { padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.book-panel-head h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.book-row { grid-template-columns: 132px 1fr; padding: var(--space-4) 0; gap: var(--space-4); }
.book-row input, .book-row textarea { font-size: var(--text-sm); padding: 10px var(--space-3); }
.book-row textarea { min-height: 88px; }
.book-row > label, .book-row > .row-label { padding-top: 8px; }
.chip { font-size: 0.8125rem; padding: 8px var(--space-4); }
.book-submit { margin-top: var(--space-5); padding: var(--space-3) var(--space-6); }
.book-contact-row { margin-top: var(--space-5); padding-top: var(--space-4); }

/* ==========================================================================
   CMS PASS 3
   ========================================================================== */

/* ---------- Staggered card reveals ----------
   The .reveal-d* classes were already on the markup but had no rule behind
   them, so cards that were meant to arrive left-to-right all landed at once. */
.js-reveal .reveal-d1.is-in { transition-delay: 110ms; }
.js-reveal .reveal-d2.is-in { transition-delay: 220ms; }
.js-reveal .reveal-d3.is-in { transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal-d1.is-in,
  .js-reveal .reveal-d2.is-in,
  .js-reveal .reveal-d3.is-in { transition-delay: 0ms; }
}

/* ---------- 2.4 Fourth "How we work" card ----------
   The dark-card treatment for every 4th card is a leftover from the dark
   default. On the light page it left white type on a near-white plate —
   "Security comes standard" was effectively invisible. */
.card-grid > .info-card:nth-child(4n + 4) .h-card,
.flex-reflow > .info-card:nth-child(4n + 4) .h-card { color: var(--ink); }
.card-grid > .info-card:nth-child(4n + 4) .body,
.flex-reflow > .info-card:nth-child(4n + 4) .body { color: var(--muted); }
.card-grid > .info-card:nth-child(4n + 4) .index,
.card-grid > .info-card:nth-child(4n + 4) .icon { color: var(--accent); }

/* ---------- 3.2 Opening statement: spread across the page ----------
   Runs the full container width on one even measure instead of being held to
   a narrow 24ch column hugging the left edge. */
.statement-block--tight { display: block; }
.statement-block--tight .statement {
  max-width: none;
  width: 100%;
  text-align: justify;
  text-align-last: left;
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .statement-block--tight .statement { text-align: left; }
}

/* ---------- 5.3 AI tool tiles: green wash follows the cursor ----------
   Scoped to the plain grid so the home page's flip mosaic is untouched. */
.tile-grid:not(.tile-grid--tools) .tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tile-grid:not(.tile-grid--tools) .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  /* Dialled back: at 92% accent in the corner the wash was bright enough to
     swallow the tool's name. It now tops out around half that, so the label
     stays legible the whole way through the sweep. */
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 48%, transparent) 0%,
              color-mix(in srgb, var(--accent) 20%, transparent) 55%,
              transparent 100%);
  transform: translate3d(-18%, 18%, 0) scale(1.12);
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out);
}
.tile-grid:not(.tile-grid--tools) .tile:hover::before,
.tile-grid:not(.tile-grid--tools) .tile:focus-visible::before {
  opacity: 1;
  transform: none;
}
/* The label goes to full ink rather than white — on a lighter wash white was
   the thing making it hard to read. */
.tile-grid:not(.tile-grid--tools) .tile:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .tile-grid:not(.tile-grid--tools) .tile::before { transition: none; }
}

/* ---------- 5.2 Ball Haul logo ----------
   The supplied file was a near-black mark on a black field (brightest pixel
   42/255), which the white plate and its multiply blend erased completely.
   The asset itself is now levelled and inverted, so it sits dark-on-white
   alongside every other client mark and needs no special case here. */

/* ---------- 1.6 Home pricing: the image16 wash ----------
   A soft green gradient carries the plan name, the price and the button, and
   the plain panel underneath lists what you get. The reference rounds its
   corners; these stay square, because nothing else on the site is rounded.
   This block is now home's alone — Services (3.5) carries its own treatment. */
.pricing-grid--wash { gap: var(--space-5); align-items: stretch; }
.price-card--wash { display: flex; flex-direction: column; overflow: hidden; }
.price-card--wash .visual {
  /* Moved to the edges and taken well down. It used to be a broad wash across
     the whole panel, which pulled the eye off the price and the button; it is
     now a thin glow along the top edge and a soft lift out of the bottom-left
     corner, with the panel itself left clean in the middle. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 26%),
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%),
    var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: var(--space-6) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
/* The featured plan wears the same edges, a step brighter */
.price-card--wash.featured .visual {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 28%),
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 62%),
    var(--bg-2);
}
.price-card--wash .visual .btn { width: 100%; margin-top: var(--space-4); }
.price-card--wash .features {
  flex: 1;
  padding: var(--space-6);
  gap: var(--space-5);
}
/* The reference has no corner ticks and no tail button in the list panel */
.price-card--wash::after { content: none; }
@media (max-width: 900px) {
  .pricing-grid--wash { gap: var(--space-6); }
}

/* ---------- 3.5 Services pricing: the image17 rate cards ----------
   Price only. What each plan includes lives in the menu above, so these carry
   the plan, one line on who it suits, the number, and the button — nothing
   else. Dark cards, as in the reference, using the same token flip the site's
   other dark zones use so the type and buttons follow automatically. */
.pricing-grid--rate { gap: var(--space-5); align-items: stretch; }
.price-card--rate {
  --bg:     #0D0D0C;
  --bg-2:   #131312;
  --bg-3:   #1A1A18;
  --line:   #262624;
  --ink:    #F2F2F0;
  --muted:  #8C8C86;
  --accent: #52B788;

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}
.price-card--rate .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.price-card--rate h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--ink);
}
/* The mark stands in for the reference's cube glyph */
.price-card--rate .rate-mark {
  flex: none;
  width: 22px;
  height: 22px;
  background-color: var(--accent);
  -webkit-mask-image: url("../assets/logos/promptu-mark-white.png");
          mask-image: url("../assets/logos/promptu-mark-white.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.price-card--rate .rate-for { color: var(--muted); font-size: var(--text-base); }
.price-card--rate .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-5);
}
.price-card--rate .price .fig {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-stat);
  line-height: 1;
  color: var(--ink);
}
.price-card--rate .price .per {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-card--rate .btn { width: 100%; margin-top: auto; }
.price-card--rate.featured { border-color: var(--accent) !important; }
.price-card--rate::after { content: none; }
.price-card--rate:hover { background: var(--bg-3) !important; border-color: var(--accent) !important; }

/* ---------- 4.4 "Why owners choose us": the four cards arrive in order ----------
   Card one lands as soon as it is reached, then the others follow half a
   second apart — 1, 2, 3, 4. The delay is measured from the moment each card
   is scrolled into view, so on a narrow screen where they come up one at a
   time the sequence still reads left to right, top to bottom. */
.js-reveal .why-card:nth-child(2).is-in { transition-delay: 500ms; }
.js-reveal .why-card:nth-child(3).is-in { transition-delay: 1000ms; }
.js-reveal .why-card:nth-child(4).is-in { transition-delay: 1500ms; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .why-card:nth-child(2).is-in,
  .js-reveal .why-card:nth-child(3).is-in,
  .js-reveal .why-card:nth-child(4).is-in { transition-delay: 0ms; }
}

/* ---------- 4.5 Testimonials: bigger quote ---------- */
.testi-band .testi-quote {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 1.28;
}
.testi-band .testi-name { font-size: var(--text-lg); }
.testi-band .testi-role { font-size: var(--text-base); }

/* ---------- 6.3 Booking form: live submission states ----------
   The form posts to send.php on our own server and reports back in place. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.form-note {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.form-note.is-ok { color: var(--accent); }
.form-note.is-error { color: #B4341F; }
.book-submit[disabled] { opacity: 0.6; cursor: progress; }

/* Effective-date line on the legal pages */
.doc-date {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-6);
}