/* ═══════════════════════════════════════════════
   STEEL CAP DIGITAL — v11.1
   Dark Industrial · Orange Accent · No Bloat

   STRUCTURE:
   1. Variables / reset / base typography
   2. Layout primitives (container, grids)
   3. Utility / extracted-from-inline classes
   4. All component base styles
   5. All media queries (LAST, in order: 1024 → 900 → 820 → 768 → 360 → 901+ desktop)

   CHANGES vs v10.23 (release renumbered to v11):
   - Stats strip: changed from flat orange to dark band with massive white numbers
     and orange vertical bar separators (.stats-strip-dark, .stat-bar).
   - Process: replaced 4 boxed cards with horizontal connected flow
     (.process-flow, .pf-step, .pf-arrow). Connecting orange line + chevrons.
   - Pricing: featured card emphasis (scale, lift, accent left edge).
   - About-strip: .about-strip-photo replaces stats panel with Shannon photo.
   - Final CTA: .cta-banner-pro with circuit-strong texture + boot watermark.
   - Diagonal section cuts: .cut-bottom, .cut-bottom-navy, .cut-bottom-orange
     pseudo-elements at strategic color-change points.
   - Section labels upgraded: thicker line (3px), longer (24px), 12px text.
   - Stronger circuit texture asset: /assets/circuit-strong.v11.svg.
   ═══════════════════════════════════════════════ */

/* ══════════════════════════════════
   1. VARIABLES & RESET
   ══════════════════════════════════ */

:root {
  --bg:       #111111;
  --bg2:      #1A1A1A;
  --bg3:      #0D1B2A;
  --navy:     #0A1628;
  --white:    #FFFFFF;
  --text:     #F0F0F0;
  --muted:    #888888;
  --dim:      rgba(240,240,240,0.5);

  /* Decorative orange — used for text on dark bg, borders, checkmarks, etc.
     #E8440A achieves 4.73:1 against #111111, passing WCAG AA for normal text.
     Do NOT use this variable for orange backgrounds that carry white text. */
  --orange:   #E8440A;

  /* Button orange — used only where white text sits on an orange background.
     #CF3D00 achieves 4.86:1 against white, passing WCAG AA for normal text (14-16px).
     #D44000 hover achieves 4.63:1 against white. */
  --orange-btn:       #CF3D00;
  --orange-btn-hover: #D44000;

  --orange2:  #FF5A1F;  /* Kept for decorative hover effects not involving white text */
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.15);
  --card:     #1A1A1A;
  --card2:    #222222;
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background-color: #0a0f16;
  background-image: url('/assets/circuit.v10.3.svg');
  background-repeat: repeat;
  background-size: 600px 600px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  padding-top: 64px;
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
p { line-height: 1.75; }
a { text-decoration: none; }
img { max-width:100%; height:auto; display:block; }
strong { font-weight: 600; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* ══════════════════════════════════
   2. LAYOUT PRIMITIVES
   ══════════════════════════════════ */

.section { padding: 88px 32px; }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-dark { background: var(--bg); }
.section-mid { background: var(--bg2); background-image: none; }
.section-navy { background: var(--bg3); }
.section-orange { background: var(--orange); }
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::before { content: ''; width: 26px; height: 3px; background: var(--orange); }
.section-title { font-size: clamp(34px,5vw,60px); color: var(--white); margin-bottom: 14px; }
.section-sub { font-size: 17px; color: var(--muted); max-width: 540px; line-height: 1.7; }

/* Generic container — used by thank-you.html and any standalone narrow layouts. */
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; width: 100%; }
.container.narrow  { max-width: 760px; }
.container.narrower { max-width: 680px; }

/* Generic grid primitives.
   Default .split-grid is 1fr 1fr with 72px gap (the majority case).
   Modifiers handle the variants instead of inline grid-template-columns,
   so the @media collapse at 768px can do its job without !important. */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.split-grid.tight { gap: 2px; }
.split-grid.bias-2-1 { grid-template-columns: 2fr 1fr; align-items: center; }
.split-grid.constrained { max-width: 640px; }
.three-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.two-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fast-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* ══════════════════════════════════
   3. UTILITY CLASSES (extracted from repeated inline styles)
   ══════════════════════════════════ */

/* Vertical stacks at common gap sizes. Use instead of inline
   display:flex;flex-direction:column;gap:Npx. */
.stack    { display: flex; flex-direction: column; }
.stack-0  { display: flex; flex-direction: column; gap: 0; }
.stack-2  { display: flex; flex-direction: column; gap: 2px; }
.stack-6  { display: flex; flex-direction: column; gap: 6px; }
.stack-7  { display: flex; flex-direction: column; gap: 7px; }
.stack-8  { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }

/* Row — horizontal flex with center align, wraps on small screens. */
.row        { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.start  { align-items: flex-start; }
.row.gap-14 { gap: 14px; }
.row.gap-16 { gap: 16px; }
.row.gap-20 { gap: 20px; }

/* Icon row — for icon-plus-content blocks (feature cards, fast-facts items, etc.). */
.icon-row { display: flex; align-items: flex-start; gap: 14px; }

/* Check-list — bullet-less list of items prefixed by an inline check or × glyph.
   Replaces the repeated inline pattern:
     <ul style="list-style:none;display:flex;flex-direction:column;gap:6px;">
       <li style="font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;">…</li>
   The <span> child holding the glyph keeps inline color (var(--orange) or var(--muted))
   because both glyph styles appear and the choice is content-driven. */
.check-list      { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.check-list.gap-7 { gap: 7px; }
.check-list.gap-8 { gap: 8px; }
.check-list > li,
.check-list > div {
  font-size: 13px; color: var(--muted);
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.55;
}
.check-list.bright > li,
.check-list.bright > div { font-size: 14px; color: rgba(240,240,240,0.75); align-items: flex-start; }
.check-list.dim    > li,
.check-list.dim    > div { color: rgba(240,240,240,0.5); }
.check-list.faded  > li,
.check-list.faded  > div { font-size: 14px; color: rgba(255,255,255,0.35); }

/* Feature card — dark card with an accent or neutral left border.
   Replaces the 3 hand-styled feature blocks in index.html "The Problem". */
.feature-card {
  background: linear-gradient(135deg, #1f1f1f 0%, #161616 100%);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(255,255,255,0.15);
  padding: 26px 28px; margin-bottom: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.2s, border-left-color 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  transform: translateX(2px);
  border-left-color: var(--orange);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.feature-card.accent {
  background: linear-gradient(135deg, #14233a 0%, #0c1828 100%);
  border: 1px solid rgba(232,68,10,0.3);
  border-left-color: var(--orange);
}
.feature-card-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  text-transform: uppercase; color: var(--white); margin-bottom: 6px;
}
.feature-card-text { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }
.feature-card-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }

/* Callout — one-liner highlight box (the "honest note" / "how deposits work" pattern).
   Replaces the repeated inline style with margin-top:24px;padding:20px 24px;background:var(--card);
   border-left:3px solid var(--orange);… */
.callout {
  margin-top: 24px; padding: 20px 24px;
  background: var(--card); border-left: 3px solid var(--orange);
  font-size: 14px; color: var(--muted); line-height: 1.65;
  max-width: 720px;
}
.callout.w-680 { max-width: 680px; }
.callout.w-760 { max-width: 760px; }
.callout.compact { padding: 18px 22px; }
.callout-strong  { color: var(--white); display: block; margin-bottom: 4px; }
.callout-strong-inline { color: var(--white); }

/* Inline CTA strip — the "Not sure which tier fits?" card with right-aligned button. */
.inline-cta {
  margin-top: 24px; padding: 20px 24px;
  background: rgba(232,68,10,0.08); border: 1px solid rgba(232,68,10,0.3);
  border-left: 3px solid var(--orange);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.inline-cta-btn {
  display: inline-block; background: transparent; border: 1px solid var(--orange);
  color: var(--orange); font-family: var(--font-head);
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 11px 24px; white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.inline-cta-btn:hover { background: var(--orange-btn); color: var(--white); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* Tradies pill bar / stats row wrappers on index — extracted from inline. */
.bar-band {
  background: var(--bg2); background-image: none;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 40px 32px;
}
.bar-band.no-top    { border-top: none; }
.bar-band.no-bottom { border-bottom: none; }
.bar-band-inner { max-width: 1280px; margin: 0 auto; }

/* Privacy/footer link with hover transition — replaces inline onmouseover/onmouseout. */
.privacy-link {
  font-size: 12px; color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
.privacy-link:hover { color: var(--orange); }

/* "Back to Work" breadcrumb-style link on case-study page. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  margin-bottom: 20px; transition: color 0.2s;
}
.back-link:hover { color: var(--orange); }

/* Comparison table cells (websites.html). Cells stay HTML-inline-stylable
   because each is uniquely styled, but we provide a hook for the table itself. */
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table-wrap { overflow-x: auto; }

/* ══════════════════════════════════
   4. COMPONENTS
   ══════════════════════════════════ */

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px;
  display: flex; align-items: center;
  background: rgba(17,17,17,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.4); }
.nav-inner {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo img { display: block; height: 32px; width: auto; }
.nav-logo-accent { color: var(--orange); }
.nav-logo-text {
  font-family: var(--font-head);
  font-weight: 800; font-size: 18px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--white); white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--muted);
  padding: 10px 14px; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color 0.2s; letter-spacing: 0.01em;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
/* v11.1.2 — Buy Upfront button: explicitly use .nav-links .nav-buy so the
   color rules beat the generic `.nav-links a { color: var(--muted) }` rule
   above (which has specificity 0,2,1 and was making the orange button text
   look grey). */
.nav-links .nav-buy {
  background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px 8px;
  min-height: 44px;
  border-bottom: 2px solid #9D2D00;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  margin-left: 8px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.nav-links .nav-buy:hover {
  background: var(--orange-btn-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}
.nav-links .nav-buy:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 1px; transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  z-index: 199; flex-direction: column; padding: 12px 16px 24px;
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 16px; font-weight: 500; color: var(--dim);
  padding: 12px 16px; transition: color 0.2s; display: block;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--white); }
.mobile-menu .mob-buy {
  background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head); font-weight: 700;
  text-align: center; letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 12px;
  border-bottom: 3px solid #9D2D00;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.mobile-menu .mob-sub { padding-left: 28px; font-size: 14px; }

/* ── NAV DROPDOWN ── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-dd-btn {
  background: none; border: none; cursor: pointer;
  padding: 8px 10px; min-height: 44px; min-width: 44px;
  font-size: 8px; color: var(--muted); line-height: 1;
  transition: transform 0.2s, color 0.2s;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -6px;
}
.nav-dd-btn:hover { color: var(--white); }
.nav-dropdown.open .nav-dd-btn { transform: rotate(180deg); color: var(--orange); }
.nav-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 12px); left: -12px;
  background: #1a1a1a; border: 1px solid var(--border);
  border-top: 2px solid var(--orange);
  min-width: 210px; z-index: 300;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 11px 18px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:last-child { border-bottom: none; }
.nav-dropdown-menu a:hover { color: var(--white); background: rgba(255,255,255,0.04); }

/* ── STICKY MOBILE CTA ──
   Hidden by default. JS adds .cta-visible on body after scrollY > 300px AND viewport <=768px.
   Body bottom padding is also state-driven: only when body.cta-active. */
.sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 12px 20px; flex-direction: row; align-items: center; justify-content: space-between;
  transition: transform 0.3s ease;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta span { color: var(--dim); font-size: 13px; font-weight: 500; }
.sticky-cta .scb-btn {
  background: var(--orange-btn); color: var(--white);
  padding: 9px 18px 7px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid #9D2D00;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  transition: background 0.15s;
}
/* Translates off-screen when footer is in view, OR mobile menu is open. */
.sticky-cta.footer-visible,
body.menu-open .sticky-cta { transform: translateY(110%); }

/* ── SCROLL TOP ── */
.scroll-top {
  position: fixed; bottom: 28px; right: 24px; z-index: 150;
  width: 38px; height: 38px;
  background: var(--card); border: 1px solid var(--border2); color: var(--white);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: all 0.3s; border-radius: 0;
}
.scroll-top.visible { opacity: 1; pointer-events: all; }
.scroll-top:hover { background: var(--orange-btn); border-color: var(--orange-btn); }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 26px 11px;
  border: none;
  border-bottom: 3px solid #9D2D00;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s, border-bottom-color 0.15s;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.btn-primary:hover {
  background: var(--orange-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
  border-bottom-color: #B33500;
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  border-bottom-width: 2px;
  padding-bottom: 12px;
}
.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--bg);
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 26px 11px;
  border: none;
  border-bottom: 3px solid #C8C5BF;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.btn-white:hover {
  background: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-white:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  border-bottom-width: 2px;
  padding-bottom: 12px;
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text);
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 24px; border-radius: 0;
  border: 2px solid rgba(255,255,255,0.4);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.btn-outline:hover {
  border-color: var(--orange);
  color: var(--white);
  background: rgba(232,68,10,0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
.btn-outline:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.btn-outline.on-dark { border-color: rgba(255,255,255,0.45); color: var(--white); }
.btn-outline.on-dark:hover { border-color: var(--orange); color: var(--white); background: rgba(232,68,10,0.12); }
.btn-outline-orange {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--orange);
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 24px; border-radius: 0;
  border: 2px solid var(--orange);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.15s;
}
.btn-outline-orange:hover {
  background: var(--orange-btn);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
.btn-outline-orange:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── STRIPE PAYMENT BUTTONS ── */
.stripe-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head);
  font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 24px 12px;
  width: 100%; justify-content: center;
  border: none;
  border-bottom: 3px solid #9D2D00;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.stripe-btn:hover {
  background: var(--orange-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
  color: var(--white);
}
.stripe-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  border-bottom-width: 2px;
  padding-bottom: 13px;
}
.stripe-btn-full {
  display: block; text-align: center; margin-top: 10px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  text-decoration: none; padding: 8px;
  border: 1px solid var(--border); transition: color 0.2s, border-color 0.2s;
}
.stripe-btn-full:hover { color: var(--text); border-color: var(--border2); }
.stripe-btn-full span { text-decoration: underline; }

/* ── PARALLAX HERO ──
   v10.19: removed always-on `will-change: transform`. JS sets it dynamically only on
   desktop with motion allowed (see nav.v10.19.js). Reduced-motion users skip parallax
   entirely; the bg image still renders, just without the JS-driven transform. */
.parallax-hero {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
}
.parallax-bg {
  position: absolute;
  /* v11.1.1 — anchor to TOP of hero instead of stretching with `inset:0`.
     Height is locked to the initial hero height (88vh on desktop).
     When price cards expand and grow the hero past 88vh, this box stays
     pinned to the top at its original size — content scrolls past below.
     No more photo-shift when cards open/close. */
  top: 0; left: 0; right: 0;
  height: 88vh;
  min-height: 100svh;     /* mobile fallback — matches .parallax-hero */
  background-size: cover; background-position: center right;
  background-repeat: no-repeat;
  background-image: url('/assets/hero-mobile.v10.10.webp');
  z-index: 0;
  /* will-change applied via JS only when parallax is active. */
}
.parallax-overlay {
  position: absolute;
  /* Match the locked dimensions of .parallax-bg so the overlay aligns with
     the photo, not with the (potentially-grown) hero section. */
  top: 0; left: 0; right: 0;
  height: 88vh;
  min-height: 100svh;
  /* v11.1.1 mobile-default — paints the dark text zone over the mobile photo
     (which has no baked-in black zone, so the overlay does all the bleed work).
     Strong darkening at left, fades to mostly transparent on the right.
     Desktop overrides this with a lighter overlay below. */
  background: linear-gradient(to right,
                rgba(17,17,17,0.97) 0%,
                rgba(17,17,17,0.94) 18%,
                rgba(17,17,17,0.82) 35%,
                rgba(17,17,17,0.55) 52%,
                rgba(17,17,17,0.28) 70%,
                rgba(17,17,17,0.10) 88%,
                rgba(17,17,17,0.00) 100%),
              radial-gradient(ellipse at 30% 60%, rgba(30,41,64,0.45) 0%, transparent 60%);
  z-index: 1;
}

/* Desktop (901px+) — photo is masked by CSS gradient so it fades into the
   dark text zone on its own. The overlay just adds atmospheric tint and a
   subtle right-corner vignette over the visible photo area. */
@media (min-width: 901px) {
  .parallax-overlay {
    background: linear-gradient(to right,
                  rgba(17,17,17,0)    0%,
                  rgba(17,17,17,0)   30%,
                  rgba(17,17,17,0.18) 55%,
                  rgba(17,17,17,0.10) 85%,
                  rgba(17,17,17,0.05) 100%),
                radial-gradient(ellipse 80% 120% at 100% 50%,
                  rgba(17,17,17,0.00)  0%,
                  rgba(17,17,17,0.00) 65%,
                  rgba(17,17,17,0.10) 88%,
                  rgba(17,17,17,0.20) 100%),
                radial-gradient(ellipse at 30% 60%, rgba(30,41,64,0.45) 0%, transparent 60%);
  }
}
.parallax-content { position: relative; z-index: 2; width: 100%; }

/* Hero content container - replaces inline padding on index.html */
.hero-content-pad { max-width: 1280px; margin: 0 auto; width: 100%; padding: 80px 32px; }
.hero-h1 {
  font-size: clamp(58px,10vw,130px);
  line-height: 0.88; color: var(--white);
  margin-bottom: 20px;
  /* Original max-width preserves the three-line rhythm Websites / Google Ads / More Work.
     Don't constrain by viewport % — that breaks line wrapping at large sizes. */
  max-width: 900px;
}

/* ── HERO PRICE CARDS ── */
.hero-price-card-wrap { overflow: hidden; }
.hero-price-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; cursor: pointer;
  transition: filter 0.2s; position: relative;
  text-decoration: none;
}
.hero-price-card:hover { filter: brightness(1.08); }
.hero-price-card-body { display: none; padding: 12px 20px 16px; }
.hero-price-card.open + .hero-price-card-body { display: block; }
.hero-price-card-expand {
  font-size: 12px; color: rgba(255,255,255,0.6);
  transition: transform 0.2s; flex-shrink: 0;
}
.hero-price-card.open .hero-price-card-expand { transform: rotate(180deg); }
button.hero-price-card {
  width: 100%; background: none; border: none; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── PAGE HERO ── */
.page-hero {
  background: var(--bg2); background-image: none;
  border-bottom: 1px solid var(--border); padding: 64px 32px 52px;
}
.page-hero-inner { max-width: 1280px; margin: 0 auto; }
.page-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 12px;
  display: flex; align-items: center; gap: 9px;
}
.page-hero-eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--orange); }
.page-hero h1 { font-size: clamp(38px,6vw,72px); color: var(--white); margin-bottom: 14px; }
.page-hero p { font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; }

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--bg2); background-image: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
}
.trust-bar-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.trust-item strong { color: var(--orange); }

/* ── PRICING CARDS ── */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 48px; }
.tier-card {
  background: var(--card); border-top: 3px solid var(--border);
  padding: 36px 32px; position: relative;
  transition: border-color 0.2s; scroll-margin-top: 80px;
}
.tier-card:hover { border-top-color: var(--orange); }
.tier-card.featured { background: var(--bg3); border-top-color: var(--orange); }
.tier-badge {
  position: absolute; top: 20px; right: 20px;
  background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px;
}
.tier-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.tier-name { font-size: 26px; color: var(--white); margin-bottom: 0; }
.tier-price {
  font-family: var(--font-head); font-size: 56px; font-weight: 800;
  color: var(--white); line-height: 1; margin: 16px 0 4px;
}
.tier-per { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.tier-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.tier-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.tier-list-head { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; }
.tier-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(240,240,240,0.7); line-height: 1.4; }
.tier-list li::before { content: '✓'; color: var(--orange); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.tier-time { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.tier-foot-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }

/* ── PROCESS ── */
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 48px; }
.process-step {
  background: #202020; padding: 32px 24px;
  border-top: 3px solid rgba(255,255,255,0.22);
  border-left: 1px solid rgba(255,255,255,0.11);
  border-right: 1px solid rgba(255,255,255,0.11);
  border-bottom: 1px solid rgba(255,255,255,0.11);
  transition: border-top-color 0.2s, background 0.2s, transform 0.2s;
}
.process-step:hover { border-top-color: var(--orange); background: #242424; }
.ps-num {
  font-family: var(--font-head); font-size: 56px; font-weight: 800;
  color: var(--orange); opacity: 1; line-height: 1; margin-bottom: 12px;
}
.ps-icon { font-size: 26px; margin-bottom: 12px; }
.ps-title {
  font-family: var(--font-head); font-size: 19px; font-weight: 700;
  text-transform: uppercase; color: var(--white); margin-bottom: 8px;
}
.ps-text { font-size: 13px; color: #A8A8A8; line-height: 1.65; }

/* ── SERVICE PILLARS ── */
.service-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 48px; }
.sp-card {
  background: var(--card); padding: 36px 28px;
  border-top: 3px solid transparent; transition: border-color 0.2s;
}
.sp-card:hover { border-top-color: var(--orange); }
.sp-card.featured { background: var(--bg3); border-top-color: var(--orange); }
.sp-num { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.sp-icon { font-size: 28px; margin-bottom: 14px; }
.sp-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
.sp-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; }
.sp-price { font-family: var(--font-head); font-size: 32px; font-weight: 800; color: var(--orange); }
.sp-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.sp-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); }
.sp-list li::before { content: '-'; color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* ── SERVICE CATEGORY CARDS ── */
.service-cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; margin-top: 48px; }
.service-cat-card {
  background: var(--card); padding: 36px 32px;
  border-top: 3px solid rgba(255,255,255,0.08);
  position: relative;
  transition: background 0.25s, border-top-color 0.25s, transform 0.25s, box-shadow 0.25s;
  display: block; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.service-cat-card:hover {
  background: var(--bg3);
  border-top-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.service-cat-card:hover .scc-arrow { opacity: 1; transform: translateX(0); }
/* .featured class kept for backward compatibility but de-emphasised — no special bg/border */
.service-cat-card.featured { background: var(--card); border-top-color: rgba(255,255,255,0.08); }
.service-cat-card.featured:hover { background: var(--bg3); border-top-color: var(--orange); }
.scc-icon { font-size: 32px; margin-bottom: 16px; }
.scc-title { font-family: var(--font-head); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.scc-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.scc-from { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--orange); }
.scc-arrow {
  position: absolute; top: 24px; right: 24px; font-size: 20px; color: var(--orange);
  opacity: 0; transform: translateX(-6px); transition: all 0.2s;
}

/* ── HOSTING TIERS ── */
.hosting-tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 40px; }
.hosting-tier {
  background: var(--card); padding: 28px 24px;
  border-top: 3px solid var(--border); transition: border-color 0.2s;
}
.hosting-tier:hover { border-top-color: var(--orange); }
.hosting-tier.featured { background: var(--bg3); border-top-color: var(--orange); }
.ht-name { font-family: var(--font-head); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.ht-price { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: var(--orange); line-height: 1; margin: 10px 0 4px; }
.ht-per { font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.ht-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.ht-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(240,240,240,0.65); line-height: 1.4; }
.ht-list li::before { content: '✓'; color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* ── CASE STUDY CARDS (work index) ── */
.case-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; margin-top: 48px; }
.case-card {
  background: var(--card); overflow: hidden; position: relative;
  transition: all 0.3s; cursor: pointer; display: block; text-decoration: none;
}
.case-card:hover .case-img { transform: scale(1.03); }
.case-img-wrap { overflow: hidden; aspect-ratio: 16/9; background: var(--bg3); position: relative; }
.case-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,10,16,0.1), rgba(5,10,16,0.65));
  pointer-events: none;
}
.case-img { width:100%; height:100%; object-fit:cover; object-position: top center; display: block; transition:transform 0.5s; }
.case-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction: column; gap: 10px; min-height: 220px;
  font-size:64px; background: var(--bg3);
}
.case-img-placeholder .next-label {
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  text-transform: uppercase; color: rgba(255,255,255,0.2); letter-spacing: 0.1em;
}
.case-body { padding: 24px 28px 28px; position: relative; }
.case-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.case-title { font-family: var(--font-head); font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 8px; line-height: 1.1; }
.case-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.case-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.cs-num { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--white); line-height: 1; }
.cs-label { font-size: 11px; color: var(--muted); }
.case-arrow {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
  background: var(--orange-btn); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  opacity: 0; transform: translateY(4px); transition: all 0.25s;
}
.case-card:hover .case-arrow { opacity: 1; transform: translateY(0); }
.case-card.coming-soon { opacity: 0.55; cursor: default; }
.case-card.coming-soon:hover .case-img { transform: none; }

/* ── CASE STUDY PAGE (deep) ── */
.cs-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cs-img-wrap { overflow: hidden; border: 1px solid var(--border); }
.cs-img-wrap img { width: 100%; height: auto; }
.cs-stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 20px 0; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-stat-item .csn { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--orange); line-height: 1; }
.cs-stat-item .csl { font-size: 12px; color: var(--muted); font-weight: 500; }
.cs-body { font-size: 15px; color: var(--muted); line-height: 1.8; }
.cs-body h2 { font-family: var(--font-head); font-size: 26px; color: var(--white); text-transform: uppercase; margin: 32px 0 10px; }
.cs-body p { margin-bottom: 14px; }
.cs-callout { background: var(--card); border-left: 3px solid var(--orange); padding: 14px 18px; margin: 20px 0; font-size: 14px; color: var(--text); }
.cs-approach-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 64px; align-items: start; }
.build-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.deliverables-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; margin-top: 0; }
.dlv-item { display: flex; align-items: flex-start; gap: 14px; background: var(--card); padding: 20px 22px; border-left: 2px solid var(--border); }
.dlv-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.dlv-name { font-size: 14px; color: rgba(240,240,240,0.7); line-height: 1.55; }

/* ── ABOUT STRIP ── */
.about-strip { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.about-strip-text {
  padding: 72px 64px; background: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.strip-block .about-strip-text { background: transparent; }
.about-strip-visual {
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 40px; min-height: 440px; position: relative; overflow: hidden;
}
.asv-content { position: relative; z-index: 1; text-align: center; }
.asv-num { font-family: var(--font-head); font-size: 88px; font-weight: 800; color: var(--white); line-height: 1; }
.asv-num.orange { color: var(--orange); }
.asv-label { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 6px; font-weight: 500; }
.about-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 18px;
}
.about-tag::before { content: ''; width: 14px; height: 2px; background: var(--orange); }
.about-strip-text h2 { font-size: clamp(30px,3.5vw,48px); color: var(--white); margin-bottom: 16px; }
.about-strip-text p { font-size: 15px; color: rgba(240,240,240,0.55); line-height: 1.75; margin-bottom: 14px; }
.about-strip-text p:last-of-type { margin-bottom: 28px; }

/* ── NAVY CTA / STRIP BLOCK ── */
.cta-banner.navy-cta {
  background: var(--navy);
  background-image: url('/assets/circuit.v10.3.svg');
  background-repeat: repeat;
  background-size: 600px 600px;
}
.strip-block {
  display: flex; flex-direction: column;
  background: var(--navy);
  background-image: url('/assets/circuit.v10.3.svg');
  background-repeat: repeat;
  background-size: 600px 600px;
}
.strip-block .about-strip { flex: 1; }
.strip-block .about-strip-visual {
  background: transparent;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.strip-block .cta-banner {
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0; border-radius: 0;
}

/* ── STATS ROW ── */
.stat-row { display: flex; max-width: 1280px; margin: 0 auto; }
.stat-row-band { background: var(--bg2); background-image: none; border-bottom: 1px solid var(--border); }
.stat-block { padding: 32px 40px; border-right: 1px solid var(--border); flex: 1; }
.stat-block:last-child { border-right: none; }
.stat-num { font-family: var(--font-head); font-size: 52px; font-weight: 800; color: var(--orange); line-height: 1; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── PULL QUOTE ── */
.pull-quote { border-left: 3px solid var(--orange); padding: 20px 28px; background: var(--card); margin: 32px 0; }
.pull-quote p { font-family: var(--font-head); font-size: clamp(20px,2.5vw,28px); font-weight: 700; text-transform: uppercase; color: var(--white); line-height: 1.2; }
.pull-quote cite { font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; margin-top: 8px; display: block; }

/* ── CTA BANNER ── */
.cta-banner {
  background: var(--orange-btn); padding: 64px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-banner h2 { font-size: clamp(30px,4.5vw,56px); color: var(--white); margin-bottom: 10px; position: relative; }
.cta-banner p { font-size: 16px; color: rgba(255,255,255,0.75); margin-bottom: 28px; position: relative; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; position: relative; }

/* ── PHOTO FRAME ── */
.photo-frame { position: relative; overflow: hidden; border-left: 3px solid var(--orange); }
.photo-frame img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── CONTACT ── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 48px; }
.cm-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border);
  padding: 14px 18px; text-decoration: none; transition: border-color 0.2s;
  margin-bottom: 8px;
}
.cm-item:hover { border-color: var(--orange); }
.cm-item.no-link { cursor: default; }
.cm-icon { font-size: 18px; flex-shrink: 0; }
.cm-label { font-size: 10px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.cm-value { font-size: 14px; color: var(--text); font-weight: 500; overflow-wrap: anywhere; word-break: break-word; }
.cm-item:hover .cm-value { color: var(--orange); }

/* ── FORM ── */
.form-box {
  background: var(--card); border: 1px solid var(--border);
  padding: 36px; position: relative; overflow: hidden;
}
.form-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--orange); }
.form-title { font-family: var(--font-head); font-size: 22px; color: var(--white); text-transform: uppercase; margin-bottom: 4px; }
.form-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; background: var(--bg); border: 1px solid var(--border);
  padding: 11px 13px; font-size: 16px; color: var(--text);
  font-family: var(--font-body); outline: none; transition: border-color 0.2s;
  border-radius: 0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--orange); }
.form-group select option { background: var(--bg2); color: var(--text); }
.form-group textarea { resize: vertical; min-height: 96px; }
.form-submit {
  width: 100%; background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 14px 12px;
  border: none;
  border-bottom: 3px solid #9D2D00;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  margin-top: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.form-submit:hover {
  background: var(--orange-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}
.form-submit:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.form-success { display: none; text-align: center; padding: 40px 0; }
.form-success.show { display: block; }
.form-success .fs-icon { font-size: 40px; margin-bottom: 12px; }
.form-success h4 { font-family: var(--font-head); font-size: 24px; color: var(--white); text-transform: uppercase; margin-bottom: 6px; }
.form-success p { font-size: 14px; color: var(--muted); }
.form-hidden { display: none; }
/* Honeypot field — hidden from real users, visible to bots. */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── SERVICES FAQ ── */
.services-faq { display: flex; flex-direction: column; gap: 1px; max-width: 720px; margin-top: 28px; }
.faq-item { background: var(--card); }
button.faq-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; width: 100%; background: none; border: none; text-align: left; color: inherit; font: inherit; }
.faq-q { font-family: var(--font-head); font-size: 17px; color: var(--white); text-transform: uppercase; }
.faq-chevron { color: var(--muted); font-size: 16px; transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--orange); }
.faq-body { padding: 0 22px 18px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.faq-body[hidden] { display: none; }
.faq-item.open .faq-body { display: block; }

/* ── TRADES LIST ── */
.trades-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.trade-pill {
  background: rgba(255,255,255,0.07); border: 1px solid var(--border2);
  padding: 5px 14px; font-size: 13px; font-weight: 500; color: var(--text);
  letter-spacing: 0.02em;
}

/* ── SITE PREVIEW ── */
.site-preview-wrap { position: relative; overflow: hidden; border: 1px solid var(--border); cursor: pointer; display: block; max-width: 900px; }
.site-preview-wrap img { width: 100%; display: block; transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.site-preview-wrap:hover img { transform: scale(1.04); }
.site-preview-overlay {
  position: absolute; inset: 0;
  background: rgba(17,17,17,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.site-preview-wrap:hover .site-preview-overlay { opacity: 1; }
.site-preview-overlay span {
  background: var(--orange-btn); color: var(--white);
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 28px;
}

/* ── SMOKO NOTE ── */
.smoko-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); font-style: italic;
  border-left: 2px solid rgba(232,68,10,0.3); padding-left: 10px; margin-top: 8px;
}

/* ── WEBSITES PAGE HERO SPLIT ── */
.ph-split { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.ph-price-rail { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex-shrink: 0; }
.ph-price-btn {
  display: block; padding: 12px 18px; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ph-price-btn:hover { color: var(--white); border-color: var(--border2); background: #222; }
.ph-price-btn.ph-featured { color: var(--white); border-color: var(--orange); border-top-width: 3px; }
.ph-price-btn.ph-featured:hover { background: rgba(232,68,10,0.1); }
.ph-price-rail-link {
  display: block; text-align: center;
  font-size: 12px; color: var(--muted); margin-top: 8px;
  text-decoration: none; transition: color 0.2s;
}
.ph-price-rail-link:hover { color: var(--orange); }

/* ── FOOTER ── */
footer { background: #0A0A0A; border-top: 1px solid var(--border); color: var(--muted); padding: 56px 32px 36px; }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-logo {
  display: inline-block;
  margin-bottom: 12px; text-decoration: none;
}
.footer-logo img { display: block; width: 130px; height: auto; opacity: 0.92; }
.footer-brand-desc { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
.footer-col-head { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.footer-links a { font-size: 13px; color: var(--muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-copy { font-size: 12px; }
.footer-badge { font-size: 11px; background: var(--card); padding: 4px 10px; color: var(--muted); }
.footer-meta { font-size: 12px; color: var(--muted); }
.footer-locations { font-size: 13px; color: var(--muted); line-height: 2; }
.footer-locations a { color: var(--orange); text-decoration: none; }
.footer-contact-block { font-size: 13px; color: var(--muted); line-height: 1.8; }
.footer-contact-block a { color: var(--orange); text-decoration: none; }
.footer-bottom-right { display: flex; align-items: center; gap: 16px; }

/* ── UTILITIES ── */
.text-orange { color: var(--orange); }
.text-muted { color: var(--muted); }
.text-white { color: var(--white); }

/* ── HERO PRICE CARD WRAP VARIANTS ──
   Replaces inline rgba backgrounds on index.html hero price cards.
   Opaque colours so contrast is stable regardless of what is behind the element.
   .hero-pcw-navy is the highlighted "Professional" tier; .hero-pcw-card is the standard. */
.hero-pcw-navy { background: #0D1B29; border-top: 3px solid var(--orange); }
.hero-pcw-card { background: var(--card); }


/* ── MARQUEE TRADES BAND ──
   Navy background. Two identical sets of pills concatenated so the loop
   is seamless. Animation runs at 40s so it feels measured, not frantic.
   Pauses on hover. prefers-reduced-motion stops it completely. */
.marquee-section {
  background: var(--bg3);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 6px 0;
  overflow: hidden;
}
.marquee-section-label {
  padding: 14px 32px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: 10px;
}
.marquee-section-label::before {
  content: ''; width: 18px; height: 2px; background: var(--orange); flex-shrink: 0;
}
.marquee-overflow { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
/* v11.1.1 — Suburbs marquee: reverse direction, slower speed.
   Best practice for stacked marquees: opposite scroll directions create
   visual contrast; slower speed gives the eye a different rhythm and weight. */
.marquee-track-reverse {
  animation: marquee-scroll-reverse 47s linear infinite;
}
.marquee-track-reverse:hover { animation-play-state: paused; }
.marquee-section-suburbs {
  background: var(--bg2);  /* slightly different tone from .marquee-section's --bg3 */
  border-top: 0;            /* no double border between stacked marquees */
}
.marquee-section-suburbs .marquee-pill {
  /* Suburbs are clickable links — distinguish them subtly with a hover that
     pulls the orange brand color, matching the link affordance elsewhere. */
  text-decoration: none;
}
.marquee-section-suburbs .marquee-pill:hover {
  color: var(--orange);
}
/* Region pills (Newcastle / Maitland / Port Stephens / Hunter Valley)
   have a subtle bold weight to read as the "anchor" pillars. */
.marquee-pill-area {
  font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.marquee-set { display: flex; align-items: stretch; }
.marquee-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-right: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; font-weight: 500;
  color: rgba(240,240,240,0.65);
  white-space: nowrap; letter-spacing: 0.02em;
  transition: color 0.2s;
}
.marquee-pill:hover { color: var(--white); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  /* 3 sets in track → animate by exactly 1/3 = one set width. Seamless loop. */
  to   { transform: translateX(-33.3333%); }
}
@keyframes marquee-scroll-reverse {
  /* Suburbs: scroll right-to-left (start at -33.3333%, end at 0).
     Same loop math as forward; reversed direction. */
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}

/* ── ORANGE STATS STRIP ──
   Full-bleed --orange-btn (#CF3D00). White stat numbers (4.86:1 contrast).
   Replaces .stat-row-band / .stat-row / .stat-block. */
.stats-strip {
  background: var(--orange-btn);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 100%;
}
.stat-cell {
  padding: 48px 40px;
  border-right: 1px solid rgba(0,0,0,0.12);
}
.stat-cell:last-child { border-right: none; }
.stats-strip .stat-num {
  font-family: var(--font-head);
  font-size: 72px; font-weight: 800; line-height: 1;
  color: var(--white);
  margin-bottom: 8px;
}
.stats-strip .stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  max-width: 180px;
}

/* ── PROCESS CTA ROW ──
   Full-width strip at the base of the process section. */
.process-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
  padding: 36px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--bg2);
  text-align: center;
}
.process-cta-row p {
  font-size: 15px; color: var(--muted); margin: 0;
}


/* ── DARK STATS STRIP (replaces flat orange) ──
   Massive numbers (clamp 80–120px) doing the work via type alone.
   Orange vertical bars between cells. Sits on dark bg, optional circuit texture. */
.stats-strip-dark {
  background: var(--bg2);
  background-image: url('/assets/circuit.v10.3.svg');
  background-size: 600px 600px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 56px 32px;
}
.stats-strip-dark .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
}
.stats-strip-dark .stat-cell {
  position: relative;
  padding: 12px 32px;
  border-right: none;
  border-bottom: none;
}
.stats-strip-dark .stat-cell + .stat-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--orange);
}
.stats-strip-dark .stat-num {
  font-family: var(--font-head);
  font-size: clamp(64px, 8vw, 112px);
  font-weight: 800; line-height: 0.95;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.stats-strip-dark .stat-label {
  font-size: 13px; line-height: 1.55;
  color: var(--muted);
  max-width: 200px;
}

/* Stat-label link — subtle underline + hover orange (used for "Nate's Rates" → case study). */
.stat-label a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(232,68,10,0.4);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.stat-label a:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}


/* ── PROCESS FLOW (horizontal connected sequence) ──
   Replaces 4 boxed cards. Big orange numbers connected by a thin line
   with chevron breaks. Reads as a sequence, not 4 products. */
.process-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  padding: 32px 0 0;
}
.process-flow::before {
  /* The connecting line — sits behind the numbers at their vertical center */
  content: '';
  position: absolute;
  top: 64px;            /* aligned with vertical center of the 96px-tall number */
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--orange) 8%,
    var(--orange) 92%,
    transparent 100%);
  z-index: 0;
}
.pf-step {
  position: relative;
  z-index: 1;
  padding: 0 20px 36px;
  text-align: left;
}
.pf-num-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  height: 96px;
}
.pf-num {
  font-family: var(--font-head);
  font-size: 96px; font-weight: 800;
  line-height: 1;
  color: var(--orange);
  background: var(--bg);   /* covers the connecting line behind the number */
  padding: 0 14px 0 0;
  letter-spacing: -0.02em;
}
.pf-step:first-child .pf-num { padding-left: 0; }
.pf-arrow {
  position: absolute;
  top: 56px;
  font-size: 14px; line-height: 1;
  color: var(--orange);
  background: var(--bg);
  padding: 4px 6px;
  z-index: 2;
}
/* Place arrow at the right edge of the cell (between this and next step) */
.process-flow .pf-step:not(:last-child) .pf-arrow { right: -7px; }
.pf-step:last-child .pf-arrow { display: none; }

.pf-icon {
  font-size: 22px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.75;
}
.pf-title {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.pf-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── FEATURED PRICING CARD EMPHASIS ──
   Tier card already has .featured class. Add real visual lift on desktop. */
@media (min-width: 1025px) {
  .pricing-grid { align-items: stretch; }
  .tier-card.featured {
    transform: translateY(-12px);
    border-left: 3px solid var(--orange);
    border-top-width: 4px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
    padding-top: 40px;
    padding-bottom: 40px;
    z-index: 2;
  }
  .tier-card.featured .tier-badge {
    top: 0;
    transform: translateY(-50%);
    padding: 6px 14px;
    font-size: 11px;
    box-shadow: 0 4px 12px rgba(207,61,0,0.4);
  }
}

/* ── ABOUT STRIP — PHOTO VARIANT ──
   Replaces .about-strip-visual stats with Shannon photo.
   .about-strip-photo wraps an <img> that fills the panel. */
.about-strip-photo {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  overflow: hidden;
  min-height: 440px;
  position: relative;
}
.about-strip-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.about-strip-photo::after {
  /* Subtle dark-to-transparent gradient on the left edge so it fades into the text panel */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(10,22,40,0.4) 0%,
    transparent 30%,
    transparent 100%);
  pointer-events: none;
}

/* ── ABOUT BLEED — full-width concrete background variant ──
   v11.1.2 — replaces side-by-side .about-strip on /index and /about with a
   full-bleed industrial concrete photo. Text overlays the image with a
   readable dark gradient. Single-column at every breakpoint — no stacking
   issues on mobile because there's nothing to stack. */
.about-bleed {
  position: relative;
  background-color: #1a1a1a;
  background-image:
    /* Dark gradient over the photo for legibility — heavier on the left where
       the text sits, fades right so the concrete texture stays visible. */
    linear-gradient(105deg,
      rgba(10,15,22,0.92) 0%,
      rgba(10,15,22,0.82) 35%,
      rgba(10,15,22,0.55) 65%,
      rgba(10,15,22,0.35) 100%),
    url('/assets/concrete-bg.v11_2.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  padding: 96px 64px;
  /* Top + bottom hairline orange separators tie this in with the rest of the
     industrial design language without making it feel like a "section". */
  border-top: 3px solid var(--orange);
}
.about-bleed-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-bleed h2 {
  font-size: clamp(34px, 4.5vw, 56px);
  color: var(--white);
  margin-bottom: 20px;
  /* Subtle text shadow keeps the headline readable even if the gradient ever
     drifts off the cracks in the concrete. */
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.about-bleed p {
  font-size: 16px;
  color: rgba(240,240,240,0.85);
  line-height: 1.75;
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  max-width: 640px;
}
.about-bleed p:last-of-type { margin-bottom: 32px; }
.about-bleed .about-tag {
  margin-bottom: 22px;
}

/* ── FINAL CTA "PRO" VARIANT ──
   Stronger industrial treatment — circuit-strong texture, boot watermark,
   asymmetric layout. Used inside .strip-block as the close. */
.cta-banner-pro {
  position: relative;
  background: var(--bg);
  background-image: url('/assets/circuit-strong.v11.svg');
  background-size: 600px 600px;
  background-repeat: repeat;
  border-top: 3px solid var(--orange);
  padding: 80px 64px 88px;
  overflow: hidden;
}
.cta-banner-pro::before {
  /* Industrial corner-bracket accent on the right side */
  content: '';
  position: absolute;
  right: 48px;
  top: 48px;
  width: 80px;
  height: 80px;
  border-top: 4px solid var(--orange);
  border-right: 4px solid var(--orange);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.cta-banner-pro::after {
  /* Mirror bracket bottom-right corner */
  content: '';
  position: absolute;
  right: 48px;
  bottom: 48px;
  width: 80px;
  height: 80px;
  border-bottom: 4px solid var(--orange);
  border-right: 4px solid var(--orange);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.cta-banner-pro > * { position: relative; z-index: 1; }
.cta-banner-pro .cta-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.cta-banner-pro .cta-eyebrow::before {
  content: ''; width: 26px; height: 3px; background: var(--orange);
}
.cta-banner-pro h2 {
  font-size: clamp(40px, 6vw, 72px);
  color: var(--white);
  line-height: 0.95;
  margin-bottom: 16px;
  max-width: 680px;
}
.cta-banner-pro h2 em {
  font-style: normal;
  color: var(--orange);
}
.cta-banner-pro p {
  font-size: 17px; color: var(--muted);
  margin-bottom: 32px;
  max-width: 540px;
  line-height: 1.65;
}
.cta-banner-pro .cta-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: flex-start;
}

/* ── DIAGONAL SECTION CUTS ──
   Pseudo-element triangles at section bottoms create angular sheet-metal edges
   between color-changing transitions. Each variant points to its NEXT section's color.
   The element with the cut needs `position: relative` and bottom-padding to keep content
   off the cut line. Only used at color-change points (no point on dark→dark). */
.cut-bottom-navy,
.cut-bottom-orange,
.cut-bottom-bg2,
.cut-bottom-bg {
  position: relative;
  padding-bottom: 80px;  /* breathing room above the cut */
}
.cut-bottom-navy::after,
.cut-bottom-orange::after,
.cut-bottom-bg2::after,
.cut-bottom-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 60px;
  pointer-events: none;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.cut-bottom-navy::after   { background: var(--bg3); }
.cut-bottom-orange::after { background: var(--orange-btn); }
.cut-bottom-bg2::after    { background: var(--bg2); }
.cut-bottom-bg::after     { background: var(--bg); }

/* Inverse direction — diagonal slope goes the other way */
.cut-bottom-navy.cut-flip::after,
.cut-bottom-bg2.cut-flip::after,
.cut-bottom-bg.cut-flip::after {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

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

.ty-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--orange-btn);
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 28px;
}
.ty-section-narrow { padding: 80px 0 64px; }
.ty-section-mid    { padding: 64px 0; }
.ty-section-tight  { padding: 48px 0; }
.ty-heading {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.05;
}
.ty-sub {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}
.ty-h2 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 40px;
  text-align: center;
  color: var(--white);
}
.ty-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ty-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ty-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ty-step-body strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.ty-step-body p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.65;
  margin: 0;
}
.ty-contact {
  text-align: center;
}
.ty-contact-q { color: var(--muted); margin-bottom: 8px; }
.ty-contact-link {
  color: var(--orange); font-weight: 600;
  text-decoration: none; font-size: 1.05rem;
}
.ty-contact-sep { color: var(--muted); margin: 0 12px; }

/* ══════════════════════════════════
   5. MEDIA QUERIES (in cascade order)
   ══════════════════════════════════ */

/* ── 1024px: tablet landscape ── */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .about-strip { grid-template-columns: 1fr; }
  .about-strip-visual { min-height: 240px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .case-grid { grid-template-columns: 1fr; }
  .cs-hero-grid { grid-template-columns: 1fr; }
  .service-pillars { grid-template-columns: 1fr; }
  .service-cat-grid { grid-template-columns: 1fr; }
  .hosting-tier-grid { grid-template-columns: 1fr; }
  .cs-approach-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── 900px: tablet portrait + small landscape ── */
@media (max-width: 900px) {
  /* Hamburger nav */
  .nav-links, .nav-buy { display: none; }
  .hamburger { display: flex; }
  nav { height: 56px; }
  body { padding-top: 56px; }
  .mobile-menu { top: 56px; max-height: calc(100dvh - 56px); }

  /* Case study tablet collapses */
  .build-cols { grid-template-columns: 1fr; }
  .deliverables-grid { grid-template-columns: 1fr; }

  /* Hero compaction (matches hamburger nav zone) */
  .parallax-hero { min-height: auto; padding-top: 0; }
  .hero-content-pad { padding: 48px 24px 32px; }
  .hero-h1 { font-size: clamp(40px,9vw,72px); line-height: 0.9; }
}

/* ── 820px: tighter section padding ── */
@media (max-width: 820px) {
  .section { padding-left: 24px; padding-right: 24px; }
  .bar-band { padding-left: 24px; padding-right: 24px; }
}

/* ── 768px: phones ── */
@media (max-width: 768px) {
  /* Drop expensive backdrop blur on mobile */
  nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #111; }

  .section { padding: 56px 20px; }
  .bar-band { padding: 28px 20px; }
  .page-hero { padding: 44px 20px 36px; }
  .about-strip-text { padding: 44px 24px; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 24px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions a, .cta-actions button { text-align: center; justify-content: center; }
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .trust-bar { padding: 12px 20px; }
  .trust-bar-inner { gap: 16px; }
  .stat-row { flex-direction: column; }
  .stat-block { border-right: none; border-bottom: 1px solid var(--border); }
  /* Orange stats strip collapses to 2-col on phones */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-cell { padding: 32px 24px; border-bottom: 1px solid rgba(0,0,0,0.12); }
  .stats-strip .stat-num { font-size: 52px; }
  .process-cta-row { padding: 28px 20px; }

  /* Dark stats strip — collapse to 2x2, keep orange bars between cells */
  .stats-strip-dark { padding: 36px 16px; }
  .stats-strip-dark .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .stats-strip-dark .stat-cell { padding: 8px 18px; }
  .stats-strip-dark .stat-cell + .stat-cell::before { display: none; }
  .stats-strip-dark .stat-cell:nth-child(odd) { border-right: 2px solid var(--orange); }
  .stats-strip-dark .stat-num { font-size: 64px; }

  /* Process flow — stack vertically, line goes left-side instead */
  .process-flow { grid-template-columns: 1fr; gap: 8px; padding-top: 0; }
  .process-flow::before { display: none; }
  .pf-step { padding: 16px 0 24px 24px; border-left: 2px solid var(--orange); }
  .pf-num-wrap { height: auto; margin-bottom: 12px; }
  .pf-num { background: transparent; padding: 0; font-size: 56px; }
  .pf-arrow { display: none !important; }

  /* Featured pricing card — keep accent but no transform on mobile */
  .tier-card.featured { border-left: 3px solid var(--orange); }

  /* About-strip photo — let it set its own height on mobile */
  .about-strip-photo { min-height: 320px; }

  /* About bleed — tighter padding on phones, slightly heavier overlay so the
     headline always wins against whatever crop of the concrete shows through. */
  .about-bleed { padding: 64px 24px 72px; }
  .about-bleed h2 { font-size: clamp(30px, 8vw, 42px); }
  .about-bleed p { font-size: 15px; }

  /* CTA-banner-pro — tighter padding + scale boot watermark down */
  .cta-banner-pro { padding: 56px 24px 64px; border-top-width: 2px; }
  .cta-banner-pro::before { width: 320px; height: 320px; right: -100px; opacity: 0.04; }

  /* Diagonal cuts — reduce angle steepness so it doesn't eat too much height on mobile */
  .cut-bottom-navy,
  .cut-bottom-orange,
  .cut-bottom-bg2,
  .cut-bottom-bg { padding-bottom: 56px; }
  .cut-bottom-navy::after,
  .cut-bottom-orange::after,
  .cut-bottom-bg2::after,
  .cut-bottom-bg::after { height: 36px; }

  /* Hero — phone tier (tighter than 900px tablet tier) */
  .hero-content-pad { padding: 36px 20px 28px; }
  .hero-h1 { font-size: clamp(40px,11vw,58px); }

  /* v11.1.1 — STACKED mobile hero.
     Below 768px the desktop split-column layout doesn't fit. Industry standard
     is to stack: photo as a banner on top, text full-width below.

     Approach: switch the hero from absolute-positioned overlapping layers to
     a simple block flow. Each child is a full-width block stacked top-to-bottom.
     Photo gets a fixed height, text content flows naturally below it.

     Reduced-motion fallbacks at the bottom of this file still apply. */
  .parallax-hero {
    min-height: auto;       /* override the 88vh from desktop */
    display: block;
  }
  .parallax-bg {
    position: relative;     /* override absolute */
    inset: auto;
    /* Reset min-height from base rule (100svh) — mobile uses fixed banner height */
    min-height: auto;
    /* Banner height scales with viewport width so the face stays well-framed.
       At 360px wide → ~290px tall. At 768px wide → ~440px tall. */
    height: clamp(280px, 56vw, 460px);
    width: 100%;
    /* Use the original mobile photo (768×960). It already has good headroom +
       shoulders framing — just needs cover-positioning to land the face well. */
    background-image: url('/assets/hero-mobile.v10.10.webp');
    background-size: cover;
    background-position: center 30%;  /* face slightly above banner center */
    /* Soft fade at the bottom so the photo dissolves into the text section. */
    -webkit-mask-image: linear-gradient(to bottom,
                          #000 0%, #000 70%,
                          rgba(0,0,0,0.5) 88%,
                          transparent 100%);
            mask-image: linear-gradient(to bottom,
                          #000 0%, #000 70%,
                          rgba(0,0,0,0.5) 88%,
                          transparent 100%);
  }
  /* Overlay: become a thin gradient strip at the bottom of the photo only,
     so text on the photo's lower edge stays readable. Skipped for now since
     the mask already softens that boundary. */
  .parallax-overlay { display: none; }
  /* Circuits: keep them as a behind-everything texture across the WHOLE hero
     (photo + text section). Position absolute over the entire stacked hero. */
  .parallax-circuits {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  /* Text content: regular block flow, sits below the photo. */
  .parallax-content {
    position: relative;
    width: 100%;
    z-index: 2;
    margin-top: -40px;     /* pull text up under the photo's fade */
    padding-top: 8px;
  }

  /* Generic grid collapses */
  .split-grid { grid-template-columns: 1fr; gap: 36px; }
  /* .bias-2-1 has higher specificity than .split-grid, so it doesn't get
     collapsed by the rule above — must override it explicitly here. */
  .split-grid.bias-2-1 { grid-template-columns: 1fr; }
  .split-grid.tight { gap: 2px; }
  .three-grid { grid-template-columns: 1fr; }
  .two-grid { grid-template-columns: 1fr; }
  .fast-facts-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 100%; }

  /* Websites hero split: hide rail, single column */
  .ph-split { grid-template-columns: 1fr; }
  .ph-price-rail { display: none; }

  /* Sticky CTA: shown on phones when JS adds .cta-visible.
     v10.19: body bottom-padding only when body.cta-active (state-driven).
     This avoids reserving 58px under every phone screen even if user never scrolls. */
  .sticky-cta.cta-visible { display: flex; }
  body.cta-active { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .scroll-top { display: none; }

  /* Case study site preview height */
  #site-preview-inner { min-height: 260px; }

  /* Hover-only cues visible on touch */
  .case-arrow { opacity: 1; transform: none; }
  .scc-arrow { opacity: 1; transform: none; }
}

/* ── 360px: very narrow phones ── */
@media (max-width: 360px) {
  .nav-inner { padding: 0 16px; gap: 8px; }
  .nav-logo img { height: 28px; }
  .nav-logo-text { font-size: 15px; }
  /* .nav-logo-accent intentionally NOT hidden: "Steel Cap Digital" at 15px Barlow
     Condensed fits the 320px viewport (verified in responsive sweep). */
  .section { padding: 48px 16px; }
  .bar-band { padding: 24px 16px; }
}

/* ── Desktop hero height (901px+) ── */
@media (min-width: 901px) {
  /* v11.1.2 — Hero photo handling rewritten for ultrawide.
     Previous v11.1.1 attempt used `background-size: 100% auto` and relied on
     a baked-in feather inside the v11_1 image. Two problems:
       1. The "feathered" hero file actually has a hard cut at ~57%, so the
          seam was visible on every desktop width.
       2. `100% auto` letterboxes vertically on tall heroes.
     New approach:
       - Source image is now hero-desktop.v11_2.webp — the v11_1 file with the
         baked-in black zone cropped off (840×1080 of pure photo).
       - Background sized to fill the right ~50% of viewport regardless of
         viewport width. On 1280px → 640px wide, on 3440px → 1720px wide.
         The brick wall + Shannon stays at consistent visual scale across
         every desktop resolution.
       - A CSS mask gradient fades the LEFT edge of the photo into the dark
         text zone over a 16% feather window. Decoupled from the image, so
         resolution-independent. */
  .parallax-bg {
    background-image: url('/assets/hero-desktop.v11_2.webp');
    background-color: #111;
    /* size:auto 100% means scale to hero height, preserve photo aspect.
       At 88vh hero height the photo settles at roughly 50vw on standard 16:9,
       and the same physical width in CSS pixels on ultrawide (face stays the
       same size relative to the user's eye, just with more dark space on the
       left for the text). */
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
    /* v11.1.4 — Mask direction corrected.
       photo_width = (840/1080) × 100svh ≈ 77.78vh
       photo_left_edge = calc(100% - 78vh)

       Previous attempt faded transparent→opaque left-to-right, reaching full
       opacity BEFORE the photo started. Photo then appeared fully visible at its
       own left edge — hard cut.

       Correct approach: mask is transparent everywhere left of (and at) the photo
       edge. It then fades transparent→opaque going RIGHTWARD into the photo.
       The photo fades up from nothing at its own left edge.
       Left dark zone: mask=transparent → hero background-color #111 shows through.
       Circuits layer is above parallax-bg (z-index 1) so it's unaffected by this mask.

       Verified geometry at 1280×720, 1920×1080, 2560×1440, 3440×1440:
       photo_left_edge = calc(100% - 78vh) at every desktop width. */
    -webkit-mask-image: linear-gradient(to right,
                          transparent 0%,
                          transparent calc(100% - 78vh),
                          #000 calc(100% - 55vh),
                          #000 100%);
            mask-image: linear-gradient(to right,
                          transparent 0%,
                          transparent calc(100% - 78vh),
                          #000 calc(100% - 55vh),
                          #000 100%);
  }
  /* Hero section background matches the photo's discarded dark zone so the
     masked-out portion blends seamlessly. */
  .parallax-hero { min-height: 88vh; padding-bottom: 60px; background-color: #111; }
}

/* ══════════════════════════════════
   v11.1.1 additions — hero motion
   ══════════════════════════════════
   Adds three layered effects to the parallax hero without touching existing rules:
     - .parallax-circuits  : animated PCB trace layer behind text
     - .hero-h1 reveal     : staggered word-by-word entry on first paint
     - .text-orange spark  : single warm pulse on "More Work."
   All three are gated by prefers-reduced-motion at the bottom of this file. */

/* Animated PCB layer — sits ABOVE .parallax-bg and BELOW .parallax-overlay.
   The overlay's left-side opacity attenuates the circuits over the text area
   (still visible, ~30% strength) and they read at full intensity over the photo.
   pointer-events: none so it never blocks interactions. */
.parallax-circuits {
  position: absolute; inset: 0;
  background-image: url('/assets/circuit-animated.v11_1.svg');
  background-size: 600px 600px;
  background-repeat: repeat;
  z-index: 1;            /* same as overlay — declared earlier in DOM so it paints under */
  pointer-events: none;
  opacity: 1;
  /* Screen blend lifts the orange traces over the dark text zone AND the photo —
     bright traces brighten what's underneath, dark gaps stay invisible.
     This is what makes the "current flowing" effect actually readable on the brick wall. */
  mix-blend-mode: screen;
}

/* H1 word reveal — each word is wrapped in <span class="hw"> in markup.
   Default state is hidden; .ready on the parent triggers the staggered entry.
   Using transform+opacity (compositor-only) keeps this cheap. */
.hero-h1 .hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-h1.ready .hw {
  opacity: 1; transform: translateY(0); filter: blur(0);
}
/* Staggered delays — line-by-line, not word-by-word, so the headline reads
   as three deliberate beats: "Websites." / "Google Ads." / "More Work." */
.hero-h1.ready .hw-1 { transition-delay: 0.05s; }
.hero-h1.ready .hw-2 { transition-delay: 0.30s; }
.hero-h1.ready .hw-3 { transition-delay: 0.60s; }

/* Spark on "More Work." — one warm pulse synchronised with the H1 reveal.
   Drives box-shadow + a subtle text-shadow. Runs once via animation-fill-mode. */
.hero-h1.ready .text-orange {
  animation: hero-spark 1.4s ease-out 0.85s 1 both;
}
@keyframes hero-spark {
  0%   { text-shadow: 0 0 0    rgba(232,68,10,0); }
  18%  { text-shadow: 0 0 32px rgba(255,120,40,0.55),
                      0 0 8px  rgba(255,180,80,0.35); }
  45%  { text-shadow: 0 0 18px rgba(232,68,10,0.30); }
  100% { text-shadow: 0 0 0    rgba(232,68,10,0); }
}

/* ── v11.1.1 STATS ENTRANCE ──
   Each .stat-cell starts hidden and slides up with a subtle stagger when the
   strip enters the viewport (driven by a `.stats-in` class added by JS via
   IntersectionObserver). Counter numbers tick from 0 to their target during
   the same window, driven by data-count-to + JS rAF loop. */
.stats-strip-dark[data-stats-anim] .stat-cell {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stats-strip-dark.stats-in .stat-cell                  { opacity: 1; transform: translateY(0); }
.stats-strip-dark.stats-in .stat-cell:nth-child(1)     { transition-delay: 0.05s; }
.stats-strip-dark.stats-in .stat-cell:nth-child(2)     { transition-delay: 0.20s; }
.stats-strip-dark.stats-in .stat-cell:nth-child(3)     { transition-delay: 0.35s; }
.stats-strip-dark.stats-in .stat-cell:nth-child(4)     { transition-delay: 0.50s; }

/* ── v11.1.1 PROCESS FLOW DRAW-ON-SCROLL ──
   When the .process-flow enters the viewport:
     1. The connecting orange line "draws" left-to-right by animating its
        clip-path inset from 100% (fully clipped) to 0% (fully visible).
     2. Each .pf-step's number, icon, title, and text fade up with stagger.
     3. The arrow chevrons (▶) fade in as the line passes each one.

   Mobile (<=900px) uses a vertical line instead of horizontal — the existing
   responsive override handles the layout switch; we just retarget the
   line-draw direction in the same media query. */
.process-flow[data-flow-anim]::before {
  /* Start fully clipped (line invisible). JS adds .flow-in to trigger draw. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.process-flow[data-flow-anim].flow-in::before {
  clip-path: inset(0 0 0 0);
}
.process-flow[data-flow-anim] .pf-step {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.process-flow[data-flow-anim].flow-in .pf-step                    { opacity: 1; transform: translateY(0); }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(1)       { transition-delay: 0.20s; }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(2)       { transition-delay: 0.55s; }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(3)       { transition-delay: 0.90s; }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(4)       { transition-delay: 1.25s; }
/* Arrow chevrons fade in slightly behind their step's number, so the line
   drawing past visually "lights up" the chevron next to it. */
.process-flow[data-flow-anim] .pf-arrow {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.process-flow[data-flow-anim].flow-in .pf-arrow                   { opacity: 1; }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(1) .pf-arrow { transition-delay: 0.50s; }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(2) .pf-arrow { transition-delay: 0.85s; }
.process-flow[data-flow-anim].flow-in .pf-step:nth-child(3) .pf-arrow { transition-delay: 1.20s; }

/* Mobile: line is vertical (left border on each step). The clip-path animates
   bottom→top instead of left→right. */
@media (max-width: 900px) {
  .process-flow[data-flow-anim]::before { display: none; }
  .process-flow[data-flow-anim] .pf-step {
    /* Retarget the clip on the per-step left-border via a pseudo? Actually
       the existing mobile uses border-left directly, which can't be clipped.
       Simpler: just stagger the steps in. The vertical "line" draws by
       virtue of each step's border appearing in sequence. */
    transition-property: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .case-card:hover .case-img { transform: none; }
  .site-preview-wrap:hover img { transform: none; }
  .scc-arrow,
  .case-arrow { transition: opacity 0.15s; transform: none !important; }
  .nav-dropdown.open .nav-dd-btn { transition: none; }
  .hamburger span { transition: none; }
  .parallax-bg { transform: none !important; }
  /* Marquee stops entirely for reduced-motion users. Both forward and reverse. */
  .marquee-track,
  .marquee-track-reverse { animation: none; }
  /* v11.1.1 — kill all hero motion additions:
     - swap the animated PCB layer for the static one (SMIL animations gone with the asset)
     - H1 lands instantly visible; orange spark suppressed. */
  .parallax-circuits {
    background-image: url('/assets/circuit.v10.3.svg');
    opacity: 0.6;
  }
  .hero-h1 .hw { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-h1.ready .text-orange { animation: none; text-shadow: none; }
  /* Stats entrance — show immediately, no count-up. */
  .stats-strip-dark[data-stats-anim] .stat-cell { opacity: 1; transform: none; transition: none; }
  /* Process flow — show immediately, no draw or stagger. */
  .process-flow[data-flow-anim]::before { clip-path: none !important; transition: none; }
  .process-flow[data-flow-anim] .pf-step,
  .process-flow[data-flow-anim] .pf-arrow {
    opacity: 1; transform: none; transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   v11.1.5 — Inline-style extraction (homepage)
   These classes were lifted out of inline style="..." attributes on
   index.html so they can be reused on other pages. Naming is intentionally
   tied to the section/component they came from rather than utility-style,
   so propagation reads cleanly: e.g. .hero-eyebrow makes sense across pages.
   ────────────────────────────────────────────────────────────────────────── */

/* Hero — eyebrow above H1 (location chip) */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 28px;
}
.hero-eyebrow-bar {
  width: 18px;
  height: 2px;
  background: var(--orange);
  display: inline-block;
}

/* Hero — sub-headline paragraph under H1 */
.hero-sub {
  font-size: 18px;
  color: rgba(240, 240, 240, 0.7);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 32px;
}

/* Hero — CTA row (Buy Upfront / Get a Free Quote) */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Hero — pricing cards container */
.hero-price-cards {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Hero pricing card — internal layout pieces */
.hpc-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 800;
  width: 68px;
}
.hpc-price.is-orange { color: var(--orange); }
.hpc-price.is-white  { color: var(--white); }

.hpc-meta { flex: 1; }
.hpc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.hpc-sub {
  font-size: 11px;
  color: var(--muted);
}
/* Variant sub — the navy "Professional" card uses dimmer white */
.hpc-sub.on-navy { color: rgba(255, 255, 255, 0.55); }

/* Hero pricing card — expanded body text */
.hpc-body-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 10px;
}

/* Hero pricing card — small CTA inside expanded body */
.hpc-cta-sm {
  font-size: 13px;
  padding: 8px 16px;
}

/* Problem section — three intro paragraphs */
.problem-lead {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}
.problem-lead.is-text  { color: var(--text); }
.problem-lead.is-muted { color: var(--muted); }
.problem-lead.last     { margin-bottom: 28px; }

/* Pull-quote under the feature cards (Shannon's quote) */
.pullquote-block {
  margin-top: 14px;
  padding-left: 2px;
}
.pullquote-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 6px;
}
.pullquote-byline {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Services grid — small note under "From $800" on the Websites card */
.scc-fineprint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* "How It Works" — sub-paragraph under the section title */
.how-it-works-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 0;
}

/* Generic "give this grid some breathing room from the title above" — used
   by the services grid and the case-study grid. Pulled into a reusable name. */
.grid-pad-top { margin-top: 40px; }

/* Case study — body needs position:relative so the absolute-positioned arrow
   in .case-arrow can anchor against it */
.case-body { position: relative; }

/* Case study — the "Could Be You" placeholder card has an inline CTA whose
   spacing differs from the standard btn-primary defaults */
.case-cta-inline {
  margin-top: 8px;
  display: inline-flex;
}

/* v11.1.5 — END inline-style extraction */

/* Footer — small spacing variant for stacked meta lines */
.footer-meta + .footer-meta { margin-top: 4px; }

/* v11.1.7 — Stats strip case-study intro
   Adds an intro block (eyebrow + title + sub) above the four stats so the
   numbers have a frame. Constrains to the same max-width as .stats-grid and
   adds 32px left/right padding to match each .stat-cell's inner padding so
   the intro's left edge lines up with the leftmost stat number. */
.stats-intro {
  max-width: 1280px;
  margin: 0 auto 44px;
  padding: 0 32px;
}
.stats-intro .section-sub {
  max-width: 640px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  /* Mobile: match the .stat-cell padding (which collapses to 8px 18px) */
  .stats-intro {
    padding: 0 18px;
    margin-bottom: 28px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   v11.1.8 — Inline-style extraction (websites.html + contact.html)
   Same approach as v11.1.5 on the homepage: lift inline style="..." patterns
   into named classes, drop visual differentiation that wasn't doing real work
   (alternating accents on parallel cards), share classes between pages.
   ────────────────────────────────────────────────────────────────────────── */

/* Body text levels — used on websites.html "Why Not WordPress" section.
   .body-lead is the opening paragraph (slightly larger, full text colour),
   .body-text is the supporting paragraphs (muted). */
.body-lead {
  font-size: 17px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 16px;
}
.body-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
}
.body-text.last { margin-bottom: 28px; }

/* Benefit card — small block-style card used on websites.html (the three
   "Suburb pages / SEO upfront / Words written" boxes) and analogous spots
   on contact.html. Single style for all instances — no alternating accent;
   if you need to highlight one, add .accent. */
.benefit-card {
  background: var(--card);
  padding: 24px;
}
.benefit-card.accent { border-top: 3px solid var(--orange); }
.benefit-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}
.benefit-card-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* Side-bordered callout — the "Response time" / orange-left-border boxes on
   contact.html. Different from the existing .callout pattern: this one is
   smaller, has an orange left border and is meant to flow inline with other
   content rather than be a centred block. */
.callout-side {
  background: var(--card);
  padding: 20px;
  border-left: 3px solid var(--orange);
  margin: 20px 0;
}
.callout-side-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 5px;
}
.callout-side-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* Service mini-row — the small "Websites / Google Ads / Hosting" rows on
   contact.html. All three use the same border treatment now (was alternating
   orange/grey/orange — visual difference that wasn't signalling anything). */
.svc-mini {
  padding: 14px 18px;
  background: var(--card);
  border-left: 3px solid var(--border);
}
.svc-mini-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}
.svc-mini-meta {
  font-size: 11px;
  color: var(--muted);
}

/* "Rather just buy upfront?" footer note on contact.html */
.contact-buy-note {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--bg3);
  background-image: none;
  font-size: 12px;
  color: var(--muted);
}
.contact-buy-note a {
  color: var(--orange);
  text-decoration: none;
}

/* Section H3 — small uppercase heading (e.g. "Get in Touch" on contact.html) */
.section-h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}

/* Inline orange link — for the "Get in touch →" pattern in footers */
.link-orange {
  color: var(--orange);
  text-decoration: none;
}

/* Privacy link spacing in the footer-bottom row */
.privacy-link.indent { margin-left: 16px; }

/* ── COMPARISON TABLE ──
   Steel Cap vs Digital Agency. Two-column comparison with the "us" column
   tinted orange and the "them" column muted. Replaces ~15 inline styles. */
.compare-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table th {
  text-align: center;
  padding: 14px 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compare-table th.ct-th-default {
  text-align: left;
  background: var(--bg3);
  color: var(--muted);
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border-bottom: 2px solid var(--border);
  width: 30%;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.compare-table th.ct-th-us {
  background: rgba(232, 68, 10, 0.12);
  color: var(--orange);
  border-bottom: 2px solid var(--orange);
  width: 35%;
}
.compare-table th.ct-th-them {
  background: var(--bg3);
  color: var(--muted);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  width: 35%;
}
.compare-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .ct-row-label {
  color: var(--muted);
  font-weight: 600;
}
.compare-table .ct-cell-us {
  text-align: center;
  background: rgba(232, 68, 10, 0.05);
  border-bottom-color: rgba(232, 68, 10, 0.15);
  color: var(--white);
  font-weight: 600;
}
.compare-table .ct-cell-them {
  text-align: center;
  color: var(--muted);
}

/* FAQ container width on websites.html */
.faq-constrained {
  max-width: 720px;
  margin-top: 28px;
}

/* Wider section-sub variant — used above the comparison table where the
   default 540px feels narrow next to a wide table. */
.section-sub.wide { max-width: 620px; margin-bottom: 40px; }

/* Anchor offset — for elements with id="" that get scrolled to via #hash links.
   Keeps them visible below the sticky nav. Used on pricing tier cards. */
.scroll-anchor { scroll-margin-top: 80px; }

/* Small centred footnote under a tier card's primary CTA */
.tier-footnote {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Inline-CTA inner text — title + small description, used on websites.html
   "Not sure which tier fits?" prompt. */
.inline-cta-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 3px;
}
.inline-cta-sub {
  font-size: 13px;
  color: var(--muted);
}

/* v11.1.8 — END inline-style extraction */

/* ──────────────────────────────────────────────────────────────────────────
   v11.1.9 — Inline-style extraction (services.html + about.html)
   Same approach as v11.1.5 / v11.1.8. Drops non-functional alternating
   accents on parallel cards (about.html fact tiles, big-number stats).
   ────────────────────────────────────────────────────────────────────────── */

/* services.html — inline price-row indicator (Starter / Professional / Enterprise)
   shown in a service-card body. Three small spans separated by gaps. */
.tier-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tier-row span {
  font-size: 12px;
  color: var(--muted);
}
.tier-row span.is-recommended { color: var(--orange); }

/* services.html — small centred CTA prompts. Two variants: a section-foot
   prompt below the tier cards, and a smaller follow-up. */
.foot-prompt {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.foot-prompt-sm {
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
}
.foot-prompt a,
.foot-prompt-sm a {
  color: var(--orange);
}

/* services.html — buy-button row (horizontal flex of stripe-btn or similar) */
.buy-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* services.html — tightened section-sub variant used in the "How to buy" intro */
.section-sub.tight {
  max-width: 560px;
  margin-bottom: 32px;
  font-size: 16px;
}

/* about.html — body paragraphs (similar to .body-lead/.body-text from v11.1.8
   but slightly different sizing and bottom-margin used on the about page).
   Adding .lg modifier rather than a separate class so the family stays small. */
.body-lead.lg {
  margin-bottom: 20px;
}
.body-text.lg {
  margin-bottom: 20px;
}
.body-text.lg.last {
  margin-bottom: 32px;
}

/* about.html — about-page paragraph with 16px size (used in the right column) */
.body-text-md {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 20px;
}
.body-text-md.last { margin-bottom: 32px; }

/* about.html — Shannon photo wrapper: stacks photo + 4 fact tiles vertically */
.about-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-side-photo {
  width: 100%;
  display: block;
}

/* about.html — "fact tile" cards inside the existing .fast-facts-grid (2x2).
   All four uniform — top border in --border. Add .accent for orange top border. */
.fact-tile {
  background: var(--card);
  padding: 18px;
  border-top: 3px solid var(--border);
}
.fact-tile.accent { border-top-color: var(--orange); }
.fact-tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.fact-tile.accent .fact-tile-label { color: var(--orange); }
.fact-tile-value {
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
}

/* about.html — "What I don't do" callout (different from .callout because it
   has a top border instead of a left border, and uses the bg3 background) */
.callout-top {
  background: var(--bg3);
  background-image: none;
  padding: 24px;
  border-top: 3px solid var(--border);
}
.callout-top.accent { border-top-color: var(--orange); }
.callout-top-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

/* about.html — big-number stat tiles ($0 / 1 / 100%). Three uniform tiles —
   same border-top as fact-tile, but different padding and a big number on top.
   Wrapped in the existing .stack-2 (gap: 2px, vertical) so no grid needed.
   Add .accent to highlight one if desired. */
.bignum-tile {
  background: var(--card);
  padding: 24px;
  border-top: 3px solid var(--border);
}
.bignum-tile.accent { border-top-color: var(--orange); }
.bignum-tile-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.bignum-tile.accent .bignum-tile-num { color: var(--orange); }
.bignum-tile-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 700px) {
  /* Existing .fast-facts-grid already collapses to 1fr; nothing extra needed. */
}

/* v11.1.9 — END inline-style extraction */

/* ─────────────────────────────────────────────
   v11.1.10 — Inline-style extraction continued
   Targets: google-ads, meta-ads, hosting-support,
            work, work/nates-rates-electrical,
            thank-you, privacy, 404
   ───────────────────────────────────────────── */

/* Generic info-card — recurring background+padding+top-border pattern across
   the four service-adjacent pages (google-ads, meta-ads, hosting-support).
   Default: var(--card) bg, 28px padding, no border. Modifiers below.
   Naming follows the established pattern: .info-card / .info-card-title /
   .info-card-eyebrow, the same shape as .feature-card / .feature-card-title. */
.info-card { background: var(--card); padding: 28px; }
.info-card.bg-bg3        { background: var(--bg3); }
.info-card.accent-orange { border-top: 3px solid var(--orange); }
.info-card.accent-border { border-top: 3px solid var(--border); }
.info-card.accent-border2 { border-top: 3px solid var(--border2); }
.info-card.pad-24       { padding: 24px; }
.info-card.pad-40       { padding: 40px; }
.info-card.pad-tight    { padding: 28px 24px; }
/* In-card subheading. Default 18px; .sm = 16px, .lg = 22px.
   Same Barlow Condensed / uppercase / white pattern shared by every
   "title inside a card" in the v11 design language. */
.info-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.info-card-title.sm     { font-size: 16px; margin-bottom: 6px; }
.info-card-title.lg     { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.info-card-title.gap-10 { margin-bottom: 10px; }
.info-card-title.flush  { margin-bottom: 0; }

/* Recurring smallprint patterns. */
.fineprint  { font-size: 13px; color: var(--muted); line-height: 1.8; }
.microcopy  { font-size: 12px; color: var(--muted); }
.microcopy.gap-top-4 { margin-top: 4px; }
.microcopy.gap-bot-20 { margin-bottom: 20px; }

/* hosting-support — tier description paragraph. .featured tier uses a slightly
   faded text colour so the body integrates with the orange-accented bg3 card. */
.ht-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.hosting-tier.featured .ht-desc { color: rgba(240,240,240,0.5); }

/* hosting-support — small stripe button used in the "Pick Your Plan" pair.
   Standard .stripe-btn is the hero CTA size; .sm is the compact form. */
.stripe-btn.sm { font-size: 14px; padding: 11px 18px 9px; }

/* google-ads — three-feature strip beneath the pricing cards
   (No lock-in / No minimum spend / Your account, your data).
   Layout-critical: replaces a long inline display:flex declaration. */
.three-up-strip {
  margin-top: 2px;
  background: var(--card);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Case study (work/nates-rates-electrical) — recurring small body text inside
   the "How It Was Built" cards and the suburb-pages callout. 7 uses on the
   page; .gap-top adds margin-top:10px, .constrained caps width at 760px. */
.cs-card-text { font-size: 13px; color: var(--muted); line-height: 1.75; }
.cs-card-text.gap-top { margin-top: 10px; }
.cs-card-text.constrained { max-width: 760px; }

/* Case study — section h2 typography used 3x (Brief / Deliverables /
   How It Was Built). Slightly smaller than the standard .section-title
   clamp (34→60); page-specific to the case study. */
.cs-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
}

/* Case study — testimonial card wrapper (Nate's quote). One-off but the
   wrapper carries 4 layout-critical declarations (border, border-top accent,
   bg, padding); inner typography stays inline as decorative. */
.cs-testimonial {
  background: rgba(13,27,42,0.9);
  border: 1px solid rgba(232,68,10,0.25);
  border-top: 3px solid var(--orange);
  padding: 28px 26px;
}

/* Case study — horizontal stat strip below the testimonial (giant orange
   number + label/sub). Layout-critical: flex + border. */
.cs-metric-strip {
  margin-top: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Case study — suburb-pages "Why this matters" callout: left-bordered,
   dark-translucent bg, sits flush to the .build-cols grid above (margin-top:2px). */
.cs-suburb-callout {
  margin-top: 2px;
  background: rgba(13,27,42,0.7);
  border: 1px solid rgba(232,68,10,0.2);
  border-left: 3px solid var(--orange);
  padding: 24px 28px;
}

/* Privacy policy — orange-bordered intro callout above the doc body.
   Distinct from .callout because it has a bottom margin (sitting before the
   body) rather than a top margin (sitting after content). */
.privacy-intro {
  background: var(--card);
  border-left: 3px solid var(--orange);
  padding: 18px 22px;
  margin-bottom: 40px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* Privacy policy — full-document body wrapper. Replaces ~50 inline declarations
   by classing the wrapper and styling its children via descendant selectors.
   Scoped to the privacy doc only — no risk of bleed onto other pages. */
.privacy-body { font-size: 15px; color: var(--muted); line-height: 1.85; }
.privacy-body strong { color: var(--white); }
.privacy-body a      { color: var(--orange); }
.privacy-body h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  margin: 36px 0 12px;
}
.privacy-body ul { margin: 12px 0 0 20px; line-height: 2; }
.privacy-body p + p,
.privacy-body ul + p,
.privacy-body ol + p { margin-top: 12px; }

/* v11.1.10 — END */