/* =========================================================================
   JORDAN ONG STUDIO — site.css
   Single stylesheet for the whole site. No framework, no build step.

   CONTENTS
   01 .. Tokens (colour, type, spacing)
   02 .. Reset & base elements
   03 .. Accessibility helpers (skip link, focus, reduced motion)
   04 .. Layout primitives (shell, grid, section rhythm)
   05 .. Typography classes
   06 .. Buttons
   07 .. Header & navigation
   08 .. Sticky mobile call bar
   09 .. Footer
   10 .. Hero
   11 .. Problem list
   12 .. THE LADDER  (signature element)
   13 .. Cards (work, service, industry, team)
   14 .. Proof band & stat blocks
   15 .. Pricing tables
   16 .. Steps / process
   17 .. FAQ (details/summary)
   18 .. Forms
   19 .. Callout, notice & placeholder styling
   20 .. Legal / long-form prose pages
   21 .. Scroll reveal
   ========================================================================= */


/* =========================================================================
   01 — TOKENS
   Palette: the Offsider Agency brand — navy, cream, orange. Light only.

   NOTE ON A REVERSED DECISION: the original brief ruled out warm cream with
   a terracotta accent. The brand since adopted exactly that pairing, and a
   client's identity outranks a stylistic prohibition written before it
   existed. What keeps this off the templated shelf is now the execution —
   the ladder, the flush-left spec-sheet layout, Archivo at 110% width — not
   the palette. See DESIGN-NOTES.md.
   ========================================================================= */

:root {
  /* Colour — sampled from the supplied brand artwork */
  --paper:      #F5F0E8;   /* brand cream, page background */
  --card:       #FFFFFF;   /* panels lift off the cream */
  --ink:        #0A1A24;   /* brand navy — headings + body */
  --navy:       #08171F;   /* deepest brand navy — footer, top rung, buttons */
  --navy-deep:  #051016;   /* pressed */
  --orange:     #CA5117;   /* brand orange — 3.97:1 on cream, so NON-TEXT ONLY:
                              rails, markers, rules, borders, the ladder fill */
  --orange-deep:#B8460F;   /* orange that carries white text at 5.3:1 */
  --orange-lift:#E9834A;   /* orange for use ON navy — 6.7:1, where --orange is 4.09 */
  --slate:      #5A6670;   /* secondary text — 5.25:1 on --paper */
  --line:       #E4DCD0;   /* warm hairlines, tuned to the cream */
  --line-firm:  #CDC2B2;   /* stronger rules */
  --edge:       #7C7365;   /* control borders — 3.4:1 on --paper, clears 1.4.11 */

  /* Type */
  --font-display: "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.36vw, 1.42rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.45rem);
  --step-4:  clamp(2.1rem, 1.65rem + 2.1vw, 3.3rem);
  --step-5:  clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);

  /* Space */
  --gap:    1.25rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --shell:  1240px;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* Effects */
  --radius: 4px;          /* squared-off. This is a trade site, not a SaaS. */
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(8, 23, 31, 0.06), 0 8px 24px -12px rgba(8, 23, 31, 0.16);
  --focus: 3px solid var(--navy);
  --speed: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* =========================================================================
   02 — RESET & BASE
   ========================================================================= */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* room for the sticky mobile call bar */
  padding-bottom: env(safe-area-inset-bottom);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;          /* Archivo is a variable width face — widen it slightly */
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

p, ul, ol, dl, table { margin: 0 0 1.15rem; }
p { max-width: 62ch; text-wrap: pretty; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--section-y) 0;
}

table { border-collapse: collapse; width: 100%; }


/* =========================================================================
   03 — ACCESSIBILITY
   ========================================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On navy surfaces the navy ring disappears — switch to hi-vis */
.is-dark :focus-visible,
.btn--primary:focus-visible,
.site-footer :focus-visible {
  outline-color: var(--orange-lift);
}

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

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


/* =========================================================================
   04 — LAYOUT PRIMITIVES
   ========================================================================= */

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

.shell--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--card { background: var(--card); border-block: 1px solid var(--line); }
.section--navy {
  background: var(--navy);
  color: #fff;
}
.section--navy h2, .section--navy h3 { color: #fff; }
/* :not(.btn) matters. A bare `.section--navy a` rule outranks `.btn--accent`
   on specificity and repaints the CTA's text in the background colour,
   which makes the button vanish. Same trap in .nav and .site-footer. */
.section--navy a:not(.btn) { color: var(--orange-lift); }
/* Anything inheriting --slate would be unreadable on navy. */
.section--navy p,
.section--navy .lede,
.section--navy .small,
.section--navy li span { color: rgba(255, 255, 255, 0.8); }
.section--navy .notice { border-color: rgba(255, 255, 255, 0.22); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* Section header: kicker + heading + lede, flush left */
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 46rem; }
.section-head p { font-size: var(--step-1); color: var(--slate); max-width: 46ch; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1rem;
}
.kicker::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--orange);
  flex: none;
}
.section--navy .kicker { color: rgba(255,255,255,0.72); }

.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }


/* =========================================================================
   05 — TYPOGRAPHY CLASSES
   ========================================================================= */

.lede {
  font-size: var(--step-1);
  color: var(--slate);
  max-width: 46ch;
  line-height: 1.5;
}

.small { font-size: var(--step--1); color: var(--slate); }
.small p { max-width: 70ch; }

.mark-line {
  /* Hi-vis underline, used sparingly on a single phrase per page.
     box-decoration-break: clone is load-bearing — without it the browser
     treats the wrapped phrase as one box, so "88%" lands mid-way down the
     whole two-line block and the band reads as a strikethrough. With it,
     each line fragment gets its own underline. */
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.06em;
}

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
  max-width: 58ch;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 0.72rem; height: 0.4rem;
  border-left: 2.5px solid var(--navy);
  border-bottom: 2.5px solid var(--navy);
  transform: rotate(-45deg);
}
.ticks--light li::before { border-color: var(--orange-lift); }

.ticks li b { font-weight: 700; }
.ticks li span { color: var(--slate); }


/* =========================================================================
   06 — BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: var(--step-0);
  letter-spacing: 0.005em;
  line-height: 1.1;
  padding: 0.95rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.btn:active { transform: translateY(1px); }

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

.btn--accent { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.btn--accent:hover { background: #9E3B0B; border-color: #9E3B0B; color: #fff; }

/* --line-firm is a hairline colour and only reaches 1.5:1 against --paper,
   which fails the 3:1 WCAG minimum for a control's visible boundary.
   --edge is the darkest tone that still reads as "secondary". */
.btn--ghost { background: transparent; border-color: var(--edge); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(8,23,31,0.05); }

.btn--on-navy { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--on-navy:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }

.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* Text link that behaves like a control */
.link-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--speed) var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }


/* =========================================================================
   07 — HEADER & NAVIGATION
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 240, 232, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  flex: none;
  line-height: 0;
}
.wordmark img {
  height: 2.05rem;
  width: auto;
}
.site-footer .wordmark img { height: 2.3rem; }

@media (max-width: 520px) {
  .wordmark img { height: 1.75rem; }
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a:not(.btn) {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav a:not(.btn):hover { background: rgba(8, 23, 31, 0.06); }
.nav a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -3px 0 var(--orange); }

/* The header CTA is the most-clicked control on the site — give it a little
   more presence than the inline nav links around it. */
.nav .btn {
  padding: 0.72rem 1.2rem;
  margin-left: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12);
}

.header-phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0.6rem;
}
.header-phone:hover { text-decoration: underline; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 1rem; height: 1rem; }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .site-header__inner { min-height: 3.9rem; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    box-shadow: var(--shadow);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) {
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.05rem;
  }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--orange); padding-left: 0.75rem; }
  .nav .btn { margin-top: 1rem; }
  .header-phone { display: none; }
}


/* =========================================================================
   08 — STICKY MOBILE CALL BAR
   Present on every page. Phones are most of the traffic and most of the intent.
   ========================================================================= */

.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line-firm);
  border-top: 1px solid var(--line-firm);
  padding-bottom: env(safe-area-inset-bottom);
}
.call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 0.98rem;
  text-decoration: none;
}
.call-bar__call { background: var(--navy); color: #fff; }
.call-bar__quote { background: var(--orange-deep); color: #fff; }
.call-bar svg { width: 1.05rem; height: 1.05rem; flex: none; }

@media (max-width: 860px) {
  .call-bar { display: flex; }
  body { padding-bottom: 3.6rem; }
  .site-footer { padding-bottom: 4.5rem; }
}


/* =========================================================================
   09 — FOOTER
   ========================================================================= */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.95rem;
}
.site-footer a:not(.btn) { color: #fff; text-decoration: none; }
.site-footer a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--orange-lift); }

.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-grid .footer-col {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.06;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.9rem;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid p { color: rgba(255,255,255,0.78); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.62);
}
.footer-base ul { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }


/* =========================================================================
   10 — HERO
   ========================================================================= */

.hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(8,23,31,0.04), rgba(8,23,31,0) 60%),
    var(--paper);
}
.hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 950px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { font-size: var(--step-1); max-width: 52ch; margin-bottom: 1.9rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.4rem; }

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}
.hero__phone svg { width: 1.15rem; height: 1.15rem; color: var(--navy); }
.hero__phone small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0;
}

/* Page hero for interior pages */
.page-hero {
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-bottom: 1.6rem; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--slate);
  margin-bottom: 1.25rem;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-firm); }
.breadcrumb a { color: var(--slate); }


/* =========================================================================
   11 — PROBLEM LIST
   The four things that are actually costing them money.
   ========================================================================= */

.problems { display: grid; gap: 0; border-top: 1px solid var(--line-firm); }
.problem {
  display: grid;
  gap: 0.4rem 1.75rem;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 780px) {
  .problem { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.problem h3 { font-size: var(--step-2); margin: 0; max-width: 22ch; }
.problem p { margin: 0; color: var(--slate); font-size: var(--step-0); }
.problem p b { color: var(--ink); }


/* =========================================================================
   12 — THE LADDER  (signature element)
   Genuinely sequential and genuinely cumulative, so it is drawn that way:
   a rail that fills as you descend, cards that step right and gain weight,
   and each rung stating what it inherits from the one below.
   ========================================================================= */

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rung;
}

/* The gap between rungs is the CARD's bottom margin, not padding on the row.
   Padding on .rung would sit outside the grid tracks and break the rail into
   disconnected segments — the one thing this element cannot do. */
.rung {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 1.15rem;
}
.rung__card { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.rung:last-child .rung__card { margin-bottom: 0; }

@media (min-width: 900px) {
  .rung {
    grid-template-columns: 9.5rem 3.25rem minmax(0, 1fr);
    gap: 0 1.75rem;
  }
  .rung__card { margin-bottom: clamp(1.25rem, 2.2vw, 2rem); }
  /* the stair: each rung sits further along than the last */
  .rung--2 .rung__card { margin-left: 2.25rem; }
  .rung--3 .rung__card { margin-left: 4.5rem; }
  .rung--4 .rung__card { margin-left: 6.75rem; }
}

/* --- timing gutter (desktop only) --- */
.rung__when {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: right;
  padding-top: 1.55rem;
  line-height: 1.35;
}
@media (min-width: 900px) { .rung__when { display: block; } }

/* --- rail + node --- */
.rung__rail { position: relative; display: flex; justify-content: center; }

.rung__node {
  position: relative;
  z-index: 2;
  margin-top: 1.15rem;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-firm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--slate);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease);
}
.rung__node::after { counter-increment: rung; content: "0" counter(rung); }

/* Two stacked lines per rung: ::before is the empty track, ::after is the
   hi-vis fill that grows from 0 to full when the rung reveals.
   Node centre sits at 1.15rem margin + 1.3rem half-height = 2.45rem. */
.rung__rail::before,
.rung__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  top: 0;
  bottom: 0;
}
.rung__rail::before { background: var(--line); }
.rung__rail::after {
  background: var(--orange);
  bottom: auto;
  height: 0;
  transition: height 620ms var(--ease);
}

/* First rung: the rail starts at the node, so no line dangles above it. */
.rung:first-child .rung__rail::before,
.rung:first-child .rung__rail::after { top: 1.15rem; }

/* Last rung: the rail stops at the node instead of running past it. */
.rung:last-child .rung__rail::before { bottom: auto; height: 2.45rem; }

.rung.is-revealed .rung__rail::after { height: 100%; }
.rung:first-child.is-revealed .rung__rail::after { height: calc(100% - 1.15rem); }
.rung:last-child.is-revealed .rung__rail::after { height: 2.45rem; }

.rung.is-revealed .rung__node {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: #fff;
}

/* --- rung card --- */
.rung__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-firm);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.rung--1 .rung__card { border-left-color: var(--line-firm); }
.rung--2 .rung__card { border-left-color: #B08A6E; }
.rung--3 .rung__card { border-left-color: var(--navy); }
.rung--4 .rung__card {
  background: var(--navy);
  border-color: var(--navy);
  border-left-color: var(--orange);
  color: rgba(255,255,255,0.82);
}
.rung--4 .rung__card h3 { color: #fff; }
.rung--4 .rung__price { color: #fff; }
.rung--4 .rung__inherit { color: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.22); }
.rung--4 .ticks li::before { border-color: var(--orange-lift); }
.rung--4 .rung__card .rung__outcome { color: #fff; }
/* .ticks li span defaults to --slate, which is unreadable on navy. */
.rung--4 .ticks li span { color: rgba(255, 255, 255, 0.72); }

.rung__card:hover { box-shadow: var(--shadow); }

.rung__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.25rem;
  margin-bottom: 0.35rem;
}
.rung__card h3 { margin: 0; font-size: var(--step-2); }
.rung__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 105%;
  font-size: var(--step-2);
  color: var(--navy);
  white-space: nowrap;
}
.rung__price small { font-size: 0.55em; font-weight: 700; color: var(--slate); }
.rung--4 .rung__price small { color: rgba(255,255,255,0.65); }

.rung__outcome {
  font-size: var(--step-1);
  line-height: 1.42;
  margin: 0.35rem 0 1.1rem;
  max-width: 44ch;
  font-weight: 500;
}

.rung__inherit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin: 0 0 0.9rem;
  letter-spacing: 0.01em;
}

.rung__meta {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.9rem;
}
@media (min-width: 900px) { .rung__meta { display: none; } }
.rung--4 .rung__meta { color: rgba(255,255,255,0.62); }

.ladder-note {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--slate);
  max-width: 60ch;
}


/* =========================================================================
   13 — CARDS
   ========================================================================= */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.6vw, 1.85rem);
  display: flex;
  flex-direction: column;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.card:hover { border-color: var(--line-firm); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--slate); font-size: 0.98rem; }
.card > :last-child { margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: 1.15rem; }

.card__icon {
  width: 2.4rem; height: 2.4rem;
  color: var(--navy);
  margin-bottom: 1rem;
}
.card__icon svg { width: 100%; height: 100%; }

/* Work / case study card.
   Portrait frame, because the screenshots are phone screenshots — which is
   the honest format for a site whose whole argument is that the traffic is
   phones. Cropped from the top so the logo, headline and CTAs are what shows;
   the full page is one click away. */
.work-card { padding: 0; overflow: hidden; }
.work-card__media {
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(-45deg, #EFE8DC 0 12px, #E7DFD1 12px 24px);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
}
/* Modifier for a media box holding a real screenshot rather than a placeholder.
   The image is taken out of flow: as a grid item its intrinsic height beats the
   container's aspect-ratio (automatic minimum size), and a tall phone
   screenshot then stretches the card to ~1150px. Absolute positioning makes
   the 4/5 box authoritative and object-fit do the cropping. */
.work-card__media--shot {
  padding: 0;
  background: var(--card);
  position: relative;
  overflow: hidden;
}
.work-card__media--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.work-card__body { padding: clamp(1.3rem, 2.6vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.work-card__trade {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.5rem;
}
.work-card dl { margin: 0 0 1.1rem; font-size: 0.95rem; }
.work-card dt {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.9rem;
}
.work-card dd { margin: 0.2rem 0 0; color: var(--ink); }

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  background: var(--orange-deep);
  color: #fff;
}
.badge--quiet { background: rgba(8,23,31,0.07); color: var(--navy); }

/* Team card */
.person__photo {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(-45deg, #EFE8DC 0 12px, #E7DFD1 12px 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  margin-bottom: 1.1rem;
}


/* =========================================================================
   14 — PROOF BAND & STATS
   ========================================================================= */

.proof {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.proof__item { background: var(--card); padding: clamp(1.3rem, 3vw, 1.9rem); }
.proof__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.proof__label { font-size: 0.92rem; color: var(--slate); margin: 0; }

.stars { display: inline-flex; gap: 2px; color: var(--orange); vertical-align: middle; }
.stars svg { width: 1.05rem; height: 1.05rem; }


/* =========================================================================
   15 — PRICING
   ========================================================================= */

.price-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.price-table { min-width: 640px; margin: 0; font-size: 0.96rem; }
.price-table th, .price-table td {
  text-align: left;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.price-table thead th {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
  background: #FBF8F3;
  white-space: nowrap;
}
.price-table tbody th {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 800;
  width: 30%;
}
.price-table tbody th small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--slate); font-size: 0.85rem; margin-top: 0.2rem; }
.price-table .cost { font-family: var(--font-display); font-weight: 800; white-space: nowrap; color: var(--navy); }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: #FBF8F3; }

.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}
.price-card--flag { border-top-color: var(--orange); }
.price-card__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--ink);
  margin: 0.6rem 0 0.35rem;
}
.price-card__amount small { font-size: 0.42em; font-weight: 700; color: var(--slate); letter-spacing: 0.02em; }
.price-card ul { margin-block: 1.15rem; }


/* =========================================================================
   16 — STEPS / PROCESS
   ========================================================================= */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--card); padding: clamp(1.35rem, 3vw, 1.9rem); }
.step__when {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--orange);
  width: fit-content;
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--slate); font-size: 0.96rem; margin-bottom: 0; }


/* =========================================================================
   17 — FAQ
   Native details/summary: accessible and keyboard-operable with no JS.
   ========================================================================= */

.faq { border-top: 1px solid var(--line-firm); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 105%;
  font-size: var(--step-1);
  line-height: 1.25;
  list-style: none;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.95rem; height: 0.95rem;
  margin-top: 0.4rem;
  border-right: 2.5px solid var(--navy);
  border-bottom: 2.5px solid var(--navy);
  transform: rotate(45deg);
  transition: transform var(--speed) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 0.7rem; }
.faq summary:hover { color: var(--navy); }
.faq__answer { padding-bottom: 1.4rem; }
.faq__answer p { color: var(--slate); }
.faq__answer > :last-child { margin-bottom: 0; }


/* =========================================================================
   18 — FORMS
   ========================================================================= */

.form { display: grid; gap: 1.15rem; }
@media (min-width: 720px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } }

.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.field label .req { color: #B3261E; }
.field .hint { font-size: 0.85rem; color: var(--slate); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2356626E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.7rem; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(202, 81, 23, 0.20);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }

.field__error {
  font-size: 0.85rem;
  font-weight: 600;
  color: #B3261E;
  display: none;
}
.field__error.is-shown { display: block; }

/* honeypot — hidden from people, visible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-weight: 600;
  display: none;
  border: 1px solid;
}
.form-status.is-shown { display: block; }
.form-status--ok { background: #EAF6EE; border-color: #96C9A8; color: #14532D; }
.form-status--error { background: #FDECEA; border-color: #E7A9A1; color: #7A1F16; }
.form-status p { margin: 0; max-width: none; }
.form-status p + p { margin-top: 0.5rem; font-weight: 500; }


/* =========================================================================
   19 — CALLOUT, NOTICE, PLACEHOLDER
   ========================================================================= */

.callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.85rem);
}
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { font-size: var(--step-1); }

.notice {
  font-size: 0.9rem;
  color: var(--slate);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/*  Placeholder chip.
    Anything not yet supplied by the client renders like this so it is
    impossible to ship by accident. Search the source for "[[PLACEHOLDER"
    and see PLACEHOLDERS.md.                                              */
.ph {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.35;
  color: #7A5A00;
  background: #FFF8DF;
  border: 1px dashed #D9A400;
  border-radius: 3px;
  padding: 0.12em 0.45em;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: baseline;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ph--block { display: block; padding: 0.7rem 0.85rem; margin-bottom: 1rem; }
.ph--media { background: transparent; border-color: #B9863A; color: #6B4A0C; }
.proof__num .ph { font-size: 0.34em; }


/* =========================================================================
   20 — LONG-FORM / LEGAL PROSE
   ========================================================================= */

.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.75rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose table { font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.7rem 0.85rem; text-align: left; }

.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.toc ol { margin: 0; padding-left: 1.15rem; font-size: 0.95rem; }
.toc li { margin-bottom: 0.35rem; }


/* =========================================================================
   21 — SCROLL REVEAL
   Applied only to the ladder and to card grids. Nothing ambient.
   JS adds .is-revealed; without JS everything is visible (see below).
   ========================================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js .reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  /* the ladder rail still fills, it just does not animate */
  .rung .rung__rail::after { transition: none; }
}

/* Utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }