@charset "utf-8";
/* ==========================================================================
   H7 CREATIVE WORKS — 2026 rebuild
   One stylesheet. Two layers, and the split is deliberate:

     PART A — SHARED INFRASTRUCTURE (§1–§12)
              Tokens, base, buttons, header, footer, forms. Reused everywhere.

     PART B — PAGE COMPOSITIONS (§13–§26)
              Single-use layouts. Each page gets its own art direction; these
              are NOT meant to be reused across pages. That separation is the
              H7 design philosophy expressed in the stylesheet itself.
   ========================================================================== */

/* ==========================================================================
   §1  FONTS
   Two self-hosted VARIABLE woff2 files carry weights 100–900.
   (The previous site shipped the same file three times under three weight
   names and got browser-synthesised bold as a result.)
   ========================================================================== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   §2  TOKENS
   ========================================================================== */
:root {
  /* --- Brand ------------------------------------------------------------ */
  --purple:      #7B3FE4;   /* H7 Purple. Large text / borders / decoration.  */
  --purple-lt:   #A97DF0;   /* 6.5:1 on ink-900 — safe for small text.        */
  --purple-dk:   #5B27B4;   /* 8.0:1 on paper — safe for small text.          */
  --purple-deep: #4A1E96;   /* CTA depth only. Never text.                    */
  --red:         #FF3B3B;   /* H7 Red. 5.6:1 on ink-900 — safe on dark.       */
  --red-lt:      #FF7A7A;
  --red-btn:     #D92B2B;   /* white on this = 4.9:1. Used for solid CTAs. */
  --red-dk:      #C41E1E;   /* 5.3:1 on paper — safe on light.                */

  /* --- The H7 signature -------------------------------------------------
     Purple enters from the H (left) and red resolves toward the 7 (right).
     That direction is the identity; do not reverse it.                      */
  --grad-h7:   linear-gradient(96deg, #A97DF0 0%, #C86AE8 46%, #FF3B3B 100%);
  --grad-rule: linear-gradient(90deg, #7B3FE4 0%, #C0409E 55%, #FF3B3B 100%);
  --grad-cta:  linear-gradient(135deg, #8B52EE 0%, #7B3FE4 52%, #6326C4 100%);
  --grad-edge: linear-gradient(180deg, #A97DF0 0%, #FF3B3B 100%);

  /* --- Dark ground: the H7 default -------------------------------------- */
  --ink-950:     #07070A;   /* deepest — advanced/custom, closing moments     */
  --ink-900:     #0B0B0F;   /* the page default                              */
  --ink-850:     #0E0E14;
  --ink-800:     #121218;
  --ink-750:     #16161D;
  --ink-700:     #191921;
  --ink-600:     #22222C;
  --ink-500:     #2E2E3A;

  /* --- Warm light: used sparingly, and always framed --------------------
     Warm off-white, not sterile cool white. Reserved for content that
     genuinely reads better on light: legal text, long inclusion lists,
     commerce diagrams, client case-study bodies.                            */
  --paper:       #F5F2ED;
  --paper-alt:   #EDE8E0;
  --paper-warm:  #F7F4EF;

  /* --- Text -------------------------------------------------------------
     Hierarchy comes from scale, weight and spacing — NOT from low
     legibility. Ratios below are measured against --ink-900.               */
  --on-dark:       #F7F7F8;   /* headings                        17.9:1     */
  --on-dark-body:  #CFCDD8;   /* paragraphs, supporting copy     12.4:1     */
  --on-dark-mute:  #CFCDD8;   /* alias of body — kept so every existing
                                 rule lifts to the readable value           */
  --on-dark-meta:  #AAA6B4;   /* metadata, tertiary labels        8.2:1     */
  --on-dark-faint: #6E6E80;   /* DECORATIVE OR DISABLED ONLY.
                                 Never navigation, captions, helper text,
                                 plan detail, founder info or disclosures.  */
  --on-light:      #14141A;
  --on-light-mute: #55555F;   /* 6.3:1 on paper                             */
  --on-light-meta: #6A6672;   /* 5.1:1 on paper                             */

  /* --- Lines ------------------------------------------------------------ */
  --line-dark:  rgba(255,255,255,.10);
  --line-dark2: rgba(255,255,255,.18);
  --line-brand: rgba(169,125,240,.34);
  --line-light: rgba(30,22,10,.13);
  --line-light2:rgba(30,22,10,.24);

  /* --- Depth ------------------------------------------------------------ */
  --shadow-lift:  0 28px 70px -34px rgba(0,0,0,.75);
  --shadow-inset: 0 44px 96px -52px rgba(0,0,0,.92);
  --shadow-brand: 0 26px 70px -34px rgba(123,63,228,.45);

  /* --- Space (8px base) -------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;   --s-11: 11rem;

  /* Section rhythm. The default is the INFORMATIONAL pace — it moves. Sections
     that genuinely deserve cinematic scale opt back in with .band--lg:
     the hero, Featured Work, the H7 story, the Managed Plan, the final CTA. */
  --band:    clamp(3.25rem, 6.4vw, 6.5rem);
  --band-lg: clamp(4.5rem, 9.5vw, 9rem);
  --band-sm: clamp(2.25rem, 4.5vw, 4rem);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
               Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  /* Fluid display scale. Nothing here is a fixed pixel size. */
  /* Floor is set so "You grow with it." still holds one line at 375px. */
  --t-hero:  clamp(2rem, 8.2vw, 6.5rem);
  --t-xxl:   clamp(2.25rem, 6vw, 4.5rem);
  --t-xl:    clamp(1.875rem, 4.2vw, 3.25rem);
  --t-lg:    clamp(1.5rem, 2.8vw, 2.25rem);
  --t-md:    clamp(1.25rem, 2vw, 1.5rem);
  --t-body:  1.0625rem;
  --t-sm:    .9375rem;
  --t-xs:    .8125rem;
  --t-eyebrow: .75rem;

  /* --- Shape / motion ---------------------------------------------------- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 22px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur:  .5s;
  --dur-fast: .16s;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
}

/* ==========================================================================
   §3  RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset in-page anchors so the sticky header never covers a target. */
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt and braces against a stray wide child on small screens. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); letter-spacing: -.01em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--purple-lt);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line-dark); margin: var(--s-7) 0; }

::selection { background: var(--purple); color: #fff; }

/* ==========================================================================
   §4  LAYOUT
   ========================================================================== */
.wrap    { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide   { max-width: 1560px; }
.wrap--narrow { max-width: 860px; }
.wrap--text   { max-width: 720px; }

.band     { padding-block: var(--band); }
/* Cinematic sections keep their scale: hero, Featured Work, H7 story,
   Managed Plan, final CTA. Everything informational moves faster. */
.band--lg { padding-block: var(--band-lg); }
.band--sm { padding-block: var(--band-sm); }
.band--tight-top { padding-top: var(--band-sm); }

/* Value rhythm: dark = brand & atmosphere, light = clarity & commerce. */
.band--dark  { background: var(--ink-900); color: var(--on-dark); }
.band--dark2 { background: var(--ink-800); color: var(--on-dark); }
.band--light { background: var(--paper);   color: var(--on-light); }
.band--warm  { background: var(--paper-warm); color: var(--on-light); }

.band--light p, .band--warm p { color: var(--on-light-mute); }
.band--light h1, .band--light h2, .band--light h3, .band--light h4,
.band--warm  h1, .band--warm  h2, .band--warm  h3, .band--warm  h4 { color: var(--on-light); }

main { display: block; }

/* ==========================================================================
   §5  TYPOGRAPHIC PRIMITIVES
   The recurring "architectural" motif: eyebrow, hairline rule, index number.
   ========================================================================== */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--purple-lt);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  flex: none;
  opacity: .7;
}
.band--light .eyebrow, .band--warm .eyebrow { color: var(--purple-dk); }
.eyebrow--red { color: var(--red); }
.band--light .eyebrow--red, .band--warm .eyebrow--red { color: var(--red-dk); }

.lede {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.55;
  color: var(--on-dark-mute);
}
.band--light .lede, .band--warm .lede { color: var(--on-light-mute); }

.idx {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--on-dark-meta);
}
.band--light .idx, .band--warm .idx { color: var(--on-light-mute); }

.rule { height: 1px; background: var(--line-dark); border: 0; margin: 0; }
.band--light .rule, .band--warm .rule { background: var(--line-light); }

/* Display type used at genuinely large sizes wants tighter tracking. */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

/* The signature. ONE dominant gradient moment per major section or viewport —
   a selected phrase, a major price, a key number. Never body copy, never
   essential small text. */
.grad-h7 {
  background: var(--grad-h7);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Fallback for the handful of engines that ignore background-clip:text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-h7 { color: var(--purple-lt); background: none; }
}
.band--light .grad-h7, .band--warm .grad-h7, .inset .grad-h7 {
  background: linear-gradient(96deg, #5B27B4 0%, #9B2C8A 50%, #C41E1E 100%);
  -webkit-background-clip: text; background-clip: text;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .band--light .grad-h7, .band--warm .grad-h7, .inset .grad-h7 { color: var(--purple-dk); background: none; }
}

/* Softer sibling — purple through magenta, stopping short of full red. For
   sub-headlines and secondary emphasis, so a page can carry several gradient
   moments without them all competing at the same volume. */
.grad-soft {
  background: linear-gradient(96deg, #B995F5 0%, #C86AE8 60%, #E8557F 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-soft { color: var(--purple-lt); background: none; }
}
.band--light .grad-soft, .inset .grad-soft {
  background: linear-gradient(96deg, #5B27B4 0%, #9B2C8A 60%, #B3243F 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* Gradient figure — for prices and important numbers that carry a section. */
.grad-num {
  background: var(--grad-h7);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-num { color: var(--purple-lt); background: none; }
}

/* Branded keyline. The section rule that carries the identity. */
.krule { height: 2px; width: 68px; border: 0; border-radius: 2px; background: var(--grad-rule); margin: 0 0 var(--s-6); }
.krule--wide { width: 100%; opacity: .5; }

/* ---- Atmosphere ---------------------------------------------------------
   Purple enters from the H (left), red resolves toward the 7 (right).
   Applied to a band, not to content, so it never affects legibility.       */
.atmo { position: relative; isolation: isolate; overflow: hidden; }
.atmo::before, .atmo::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.atmo::before {
  left: -14%; top: -22%;
  width: 62%; height: 116%;
  background: radial-gradient(closest-side, rgba(123,63,228,.26), transparent 72%);
}
.atmo::after {
  right: -16%; bottom: -30%;
  width: 58%; height: 110%;
  background: radial-gradient(closest-side, rgba(255,59,59,.16), transparent 74%);
}
.atmo--soft::before { background: radial-gradient(closest-side, rgba(123,63,228,.16), transparent 72%); }
.atmo--soft::after  { background: radial-gradient(closest-side, rgba(255,59,59,.10), transparent 74%); }
.atmo--deep::before { background: radial-gradient(closest-side, rgba(123,63,228,.34), transparent 70%); }
.atmo--deep::after  { background: radial-gradient(closest-side, rgba(255,59,59,.22), transparent 72%); }
/* Red-forward. Landing Pages only — that page is about a single conversion. */
.atmo--red::before { left: -10%; background: radial-gradient(closest-side, rgba(123,63,228,.16), transparent 74%); }
.atmo--red::after  { right: -8%; bottom: -20%; width: 74%; background: radial-gradient(closest-side, rgba(255,59,59,.30), transparent 70%); }

.price {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  display: block;
}
.price small {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-top: var(--s-3);
}
.band--light .price small, .band--warm .price small { color: var(--on-light-mute); }

/* Small print that must stay legible — used for every disclosure on the site. */
.fine {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--on-dark-mute);
  max-width: var(--measure);
}
.band--light .fine, .band--warm .fine { color: var(--on-light-mute); }

/* ==========================================================================
   §6  BUTTONS & LINKS
   ========================================================================== */
.btn {
  --btn-bg: var(--purple);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  /* 44px minimum touch target, enforced by min-height not padding alone. */
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* THE global primary conversion treatment. "Start a Project" uses this
   everywhere. Purple with restrained depth — the red is an edge, not a fill. */
.btn--primary {
  background: var(--grad-cta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              0 12px 28px -14px rgba(123,63,228,.85);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--grad-rule);
  opacity: .85;
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 34px -14px rgba(123,63,228,.95); }
.btn { position: relative; overflow: hidden; }

/* Solid red is reserved for rare page-specific campaign emphasis
   (currently: Landing Pages only). */
.btn--red { --btn-bg: var(--red-btn); background: var(--red-btn); }
.btn--red::after { display: none; }
.btn--red:hover { background: #C41E1E; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  border-color: var(--line-dark2);
}
.btn--ghost:hover { border-color: var(--purple-lt); color: var(--purple-lt); }
.band--light .btn--ghost, .band--warm .btn--ghost {
  --btn-fg: var(--on-light);
  border-color: var(--line-light2);
}
.band--light .btn--ghost:hover, .band--warm .btn--ghost:hover {
  border-color: var(--purple-dk); color: var(--purple-dk);
}

.btn--lg { min-height: 56px; padding-inline: var(--s-7); font-size: var(--t-body); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Text link with an underline that actually reads as one. */
.link {
  color: var(--purple-lt);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
.link:hover { color: #C4A3F5; text-decoration-thickness: 2px; }
.band--light .link, .band--warm .link { color: var(--purple-dk); }
.band--light .link:hover, .band--warm .link:hover { color: #401A85; }

/* Arrow link — the site's standard "go deeper" affordance. */
.alink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--purple-lt);
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.alink::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.alink:hover { gap: var(--s-3); color: #C4A3F5; }
.alink:hover::after { transform: translateX(3px); }
.band--light .alink, .band--warm .alink { color: var(--purple-dk); }
.band--light .alink:hover, .band--warm .alink:hover { color: #401A85; }

/* ==========================================================================
   §7  SKIP LINK / A11Y UTILITIES
   ========================================================================== */
.skip {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 999;
  background: var(--purple);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: var(--s-4); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   §8  HEADER / NAV
   ========================================================================== */
/* IMPORTANT: the blur lives on .hdr__bar, never on .hdr.
   backdrop-filter makes an element a containing block for fixed-position
   descendants. With it on .hdr, the fixed mobile panel positions itself
   against the 74px header instead of the viewport and collapses. position:
   sticky does NOT create a containing block, so .hdr can stay sticky. */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
}
.hdr__bar {
  background: rgba(11,11,15,.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
/* Engines without backdrop-filter get an opaque bar, not a transparent mess. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr__bar { background: #0B0B0F; }
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 74px;
}

/* MOBILE POLISH: real-device review found the header "occupies a meaningful
   portion of the viewport throughout scrolling" — the 74px bar is constant,
   with no distinct state once the visitor has actually started reading.
   Desktop (>=1000px) is approved and untouched: this entire block is scoped
   below that breakpoint. h7.js adds .hdr--scrolled once the page has moved
   past the very top (see "6. Sticky header" in h7.js); nothing is removed —
   same logo, same burger, same 48px touch target, just less resting height. */
@media (max-width: 999.98px) {
  .hdr__in { transition: min-height var(--dur-fast) var(--ease); }
  .hdr--scrolled .hdr__in { min-height: 58px; }
  .hdr--scrolled .logo__mark { width: 36px; height: 36px; transition: width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease); }
  /* .mnav hardcodes inset:74px to sit directly under the header's resting
     height. If the mobile menu is opened after scrolling, the header would
     otherwise be in its 58px compact state, leaving a 16px gap above the
     panel. The existing JS already locks body scroll while the menu is
     open — reuse that same state to hold the header at full height too, so
     .mnav's fixed offset is always correct whenever it can actually be seen. */
  body.is-locked .hdr--scrolled .hdr__in { min-height: 74px; }
  body.is-locked .hdr--scrolled .logo__mark { width: 44px; height: 44px; }
}

/* --- Logo: real master-derived mark image + live wordmark text ----------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--on-dark);
  margin-right: auto;
  padding: var(--s-2) 0;
}
.logo__mark {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line-brand);
  flex: none;
}
.logo__wm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 400px) { .logo__wm { display: none; } }

/* --- Desktop nav --------------------------------------------------------- */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.nav__li { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-dark-mute);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--on-dark); }
.nav__link[aria-current="page"] { color: var(--on-dark); }
/* Active state carries the H7 signature rather than a flat purple bar. */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s-4); right: var(--s-4);
  bottom: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-rule);
}
.nav__caret { width: 9px; height: 9px; transition: transform var(--dur-fast) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* --- Services dropdown --------------------------------------------------- */
.nav__panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  /* Wide enough that "Search Engine Optimization" holds one line, so every
     row is the same comfortable height. */
  min-width: 304px;
  padding: var(--s-3);
  background: var(--ink-800);
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  list-style: none;
  margin: 0;
  /* Hidden by default; opened by hover, click or keyboard. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.nav__li:hover > .nav__panel,
.nav__li:focus-within > .nav__panel,
.nav__link[aria-expanded="true"] + .nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__panel li { margin: 0; }
/* Names only — no prices, no descriptions. The dropdown is for navigating,
   not for explaining; /services/ does the explaining. */
.nav__panel a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  color: #EDEBF2;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* The purple-to-red indicator: a hairline that grows in from the left. */
.nav__panel a::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: 2px; height: 0;
  border-radius: 2px;
  background: var(--grad-edge);
  transform: translateY(-50%);
  transition: height var(--dur-fast) var(--ease);
}
.nav__panel a:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav__panel a:hover::before,
.nav__panel a[aria-current="page"]::before { height: 18px; }
.nav__panel a[aria-current="page"] { color: #fff; background: rgba(123,63,228,.13); }

.nav__panel hr {
  height: 1px;
  margin: var(--s-2) var(--s-3);
  border: 0;
  background: var(--line-dark);
}
/* "View all services" is a destination, not a sibling of the six. */
.nav__panel .np-all {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--purple-lt);
  gap: var(--s-2);
}
.nav__panel .np-all:hover { color: #C4A3F5; }
.nav__panel .np-all::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.nav__panel .np-all:hover::after { transform: translateX(3px); }

.hdr__cta { display: none; }

/* --- Mobile toggle ------------------------------------------------------- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-md);
  cursor: pointer;
}
/* :not(.vh) matters. Without it this rule also hits the visually-hidden
   "Menu" label, whose width:100% then resolves against the sticky .hdr
   (the nearest positioned ancestor) and pushes the page ~650px wide —
   horizontal overflow on every page below the 1000px breakpoint. */
.burger span:not(.vh) {
  display: block; height: 2px; width: 100%;
  background: var(--on-dark);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger[aria-expanded="true"] span:not(.vh):nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:not(.vh):nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:not(.vh):nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile panel -------------------------------------------------------- */
.mnav {
  position: fixed;
  inset: 74px 0 0 0;
  z-index: 99;
  background: var(--ink-900);
  padding: var(--s-6) 0 var(--s-9);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mnav[hidden] { display: none; }
.mnav__list { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.mnav__list li { margin: 0; border-bottom: 1px solid var(--line-dark); }
.mnav__list a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--on-dark);
}
.mnav__list a[aria-current="page"] { color: var(--purple-lt); }
/* Mobile Services disclosure trigger — same row styling/size as the .mnav__list
   links it sits beside, so it reads as one compact primary-nav item, not a
   different kind of control. Caret reuses the desktop .nav__caret rotate. */
.mnav__disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--on-dark);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.mnav__disclosure[aria-current="page"] { color: var(--purple-lt); }
.mnav__disclosure[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
#mnav-svc-panel[hidden] { display: none; }
.mnav__sub { list-style: none; margin: 0 0 var(--s-6); padding: 0 0 0 var(--s-4); border-left: 1px solid var(--line-dark2); }
.mnav__sub li { border: 0; }
.mnav__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-dark-mute);
  letter-spacing: 0;
  text-decoration: none;
}
.mnav__sub a:hover, .mnav__sub a[aria-current="page"] { color: var(--purple-lt); }
/* Matches the desktop dropdown's "View all services". */
.mnav__all {
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: var(--purple-lt) !important;
  margin-top: var(--s-2);
}
.mnav__label {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin: var(--s-6) 0 var(--s-3);
}
body.is-locked { overflow: hidden; }

@media (min-width: 1000px) {
  .nav { display: block; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
  .mnav { display: none !important; }
}

/* ==========================================================================
   §9  BREADCRUMB
   ========================================================================== */
.crumb { padding-top: var(--s-6); margin-bottom: var(--s-7); }
.crumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.crumb li { margin: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--on-dark-meta); }
.crumb li + li::before { content: "/"; opacity: .5; }
.crumb a { color: var(--on-dark-mute); text-decoration: none; }
.crumb a:hover { color: var(--purple-lt); text-decoration: underline; }
.crumb [aria-current="page"] { color: var(--on-dark); }

/* ==========================================================================
   §10  FOOTER
   ========================================================================== */
.ftr {
  position: relative;
  background: var(--ink-850);
  border-top: 1px solid var(--line-dark);
  padding-block: var(--s-9) var(--s-6);
  color: var(--on-dark-body);
}
/* The signature closes the page. */
.ftr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-rule);
  opacity: .65;
}
.ftr__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-8);
}
/* The brand column carries more weight than the link columns. */
.ftr__brand { max-width: 34ch; }
.ftr__brand .logo { gap: var(--s-4); }
.ftr__brand .logo__mark { width: 60px; height: 60px; border-radius: 13px; }
.ftr__brand .logo__wm { font-size: .9375rem; letter-spacing: .15em; }
.ftr__tag {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--on-dark);
  margin-top: var(--s-5);
  max-width: 22ch;
}
.ftr__blurb { font-size: var(--t-sm); margin-top: var(--s-4); color: var(--on-dark-body); }
.ftr h2 {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin-bottom: var(--s-4);
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: var(--s-1); }
.ftr a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--t-sm);
  color: var(--on-dark-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.ftr a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: .2em; }
.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-xs);
  color: var(--on-dark-meta);
}
@media (min-width: 700px)  { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* ==========================================================================
   §11  FORMS
   ========================================================================== */
.field { margin-bottom: var(--s-5); }
.field__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--on-dark);
  margin-bottom: var(--s-2);
}
.field__req { color: var(--red); margin-left: 2px; }
.field__opt { color: var(--on-dark-meta); font-weight: 500; letter-spacing: 0; text-transform: none; }
.field__help { font-size: var(--t-sm); color: var(--on-dark-body); margin: 0 0 var(--s-3); max-width: 60ch; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-md);
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: 1rem;   /* 16px — never smaller, or iOS zooms on focus. */
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255,255,255,.3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--purple-lt); background: rgba(123,63,228,.08); }
.textarea { min-height: 170px; resize: vertical; }
.select {
  appearance: none;
  /* The closed control is themed by our own CSS, but the OPENED native
     option list is drawn by the OS/browser, outside our styling reach on
     most engines. Without a hint, it defaults to a light popup while our
     light `color` above still inherits into the option text — nearly
     invisible unselected options. color-scheme tells the engine this
     control is dark-themed so it picks a legible native palette for the
     popup; the explicit .select option rule below is belt-and-braces for
     engines (Chromium, Firefox) that also honour author colours on
     <option> directly. Standards-based, no vendor-prefixed hacks. */
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A3A3B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px 8px;
  padding-right: var(--s-8);
}
.select option {
  color: var(--on-dark);
  background-color: var(--ink-800);
}
::placeholder { color: var(--on-dark-meta); opacity: 1; }

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--red);
  background: rgba(255,59,59,.06);
}
.field__err {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: #FF7A7A;   /* lifted for 4.5:1 on the dark field background */
  margin-top: var(--s-2);
}
.field__err::before { content: "\26A0"; }

/* Checkbox / radio groups — real 44px targets, no bare inputs. */
.opts { display: grid; gap: var(--s-2); grid-template-columns: 1fr; border: 0; padding: 0; margin: 0; }
@media (min-width: 620px) { .opts--2 { grid-template-columns: 1fr 1fr; } }
.opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--t-sm);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.opt:hover { border-color: rgba(255,255,255,.32); }
.opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--purple); flex: none; }
.opt:has(input:checked) { border-color: var(--purple); background: rgba(123,63,228,.12); }
.opt:has(input:focus-visible) { outline: 2px solid var(--purple-lt); outline-offset: 2px; }

legend.field__label { padding: 0; }

/* Error summary — announced, and every item jumps to its field. */
.errsum {
  border: 1px solid var(--red);
  background: rgba(255,59,59,.08);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
}
.errsum h2 { font-size: var(--t-md); color: var(--on-dark); margin-bottom: var(--s-3); letter-spacing: -.01em; }
.errsum ul { margin: 0; padding-left: 1.1em; }
.errsum a { color: #FF9A9A; }

/* The honeypot. Off-screen, not display:none — some bots skip hidden fields. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   §12  SCROLL REVEAL
   Ships VISIBLE. JS opts elements in by adding .reveal-on to <html>, so if the
   script fails, is blocked, or errors, nothing is ever stuck invisible.
   ========================================================================== */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   §12b  SHARED CONTENT PRIMITIVES
   Used on more than one page. Anything used on exactly one page lives in
   PART B instead.
   ========================================================================== */

/* Tick list — the standard "what is included" list. */
.ticks { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--s-3);
  max-width: var(--measure);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--purple-lt);
  border-bottom: 2px solid var(--purple-lt);
  transform: rotate(-45deg);
}
.band--light .ticks li::before,
.band--warm .ticks li::before { border-color: var(--purple-dk); }
.ticks--sm { font-size: var(--t-sm); }
.ticks--sm li { margin-bottom: var(--s-2); }

/* Crosses — used where a page has to say what is NOT included. */
.crosses { list-style: none; padding: 0; margin: 0 0 var(--s-5); font-size: var(--t-sm); }
.crosses li { position: relative; padding-left: 1.9rem; margin-bottom: var(--s-2); max-width: var(--measure); }
.crosses li::before {
  content: "\00D7";
  position: absolute;
  left: .2rem; top: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--red);
}
.band--light .crosses li::before, .band--warm .crosses li::before { color: var(--red-dk); }

/* A disclosure block. Every "we do not guarantee" statement uses this. */
.disclaim {
  margin: var(--s-8) 0 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--red);
  background: rgba(255,59,59,.06);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--on-dark-mute);
  max-width: 78ch;
}
.disclaim strong { color: var(--on-dark); }
.band--light .disclaim, .band--warm .disclaim {
  border-left-color: var(--red-dk);
  background: rgba(196,30,30,.06);
  color: var(--on-light-mute);
}
.band--light .disclaim strong, .band--warm .disclaim strong { color: var(--on-light); }

/* Generic surface panel. */
.panel {
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.band--light .panel, .band--warm .panel { background: #FFFDFA; border-color: var(--line-light); }

/* ==========================================================================
   WARM INSET
   A framed off-white panel that sits INSIDE a dark band. This is how H7
   keeps editorial clarity for content that genuinely reads better on light
   — long inclusion lists, legal text, commerce diagrams — without cutting
   the page with another full-bleed white expanse.

   It re-declares the dark-context tokens locally, so every shared component
   inside it (eyebrow, lede, ticks, links, buttons, fine print, disclaim)
   flips to its light-surface value automatically. No per-component overrides.
   ========================================================================== */
.inset {
  --on-dark:       var(--on-light);
  --on-dark-body:  var(--on-light-mute);
  --on-dark-mute:  var(--on-light-mute);
  --on-dark-meta:  var(--on-light-meta);
  --on-dark-faint: var(--on-light-meta);
  --purple-lt:     var(--purple-dk);
  --red:           var(--red-dk);
  --line-dark:     var(--line-light);
  --line-dark2:    var(--line-light2);

  position: relative;
  background: var(--paper-warm);
  color: var(--on-light);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}
/* The branded keyline that marks it as H7 rather than a generic white card. */
.inset::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-rule);
}
.inset--flush { padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.inset h1, .inset h2, .inset h3, .inset h4 { color: var(--on-light); }

/* ==========================================================================
   DARK CARD
   The counterpart: a contained, elevated surface on a dark band. Used for
   service tiers, pricing rungs and comparison paths so nothing floats
   unanchored on a large flat expanse.
   ========================================================================== */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--ink-750) 0%, var(--ink-850) 100%);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
/* Emphasis without shouting: a gradient edge down the leading side. */
.card--lead {
  border-color: var(--line-brand);
  box-shadow: var(--shadow-brand);
}
.card--lead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  background: var(--grad-edge);
}
/* ==========================================================================
   .panel--h7  —  THE H7 DIMENSIONAL SURFACE
   Promoted from the White Glove card, which was the reference treatment.
   Charcoal ground, purple atmosphere entering from the H side, red resolving
   toward the 7 side, a purple-to-red hairline along the top edge, restrained
   depth. This is the site's standard surface for modular content: plans,
   benefits, capabilities, comparisons, numbered concepts, limitations.

   It is NOT for everything. Editorial passages, heroes, portfolio bands and
   long-form prose stay open and uncarded — see SITE-GUIDE "Do not over-card".
   ========================================================================== */
.panel--h7 {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 2.8vw, 2rem);
  background:
    radial-gradient(85% 130% at 0% 0%,   rgba(123,63,228,.15) 0%, transparent 60%),
    radial-gradient(75% 120% at 100% 100%, rgba(255,59,59,.08) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
  box-shadow: var(--shadow-lift);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.panel--h7::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-rule);
  opacity: .55;
}
.panel--h7:hover { border-color: var(--line-brand); transform: translateY(-2px); }
.panel--h7 h3, .panel--h7 h4 { color: var(--on-dark); }
.panel--h7 p  { color: var(--on-dark-body); }

/* Emphasis variant: the leading item in a set. */
.panel--h7.is-lead { border-color: var(--line-brand); box-shadow: var(--shadow-brand); }
.panel--h7.is-lead::before { opacity: 1; height: 3px; }

/* The numbered index used across benefit / capability sets. */
.panel--h7 .pnum {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--purple-lt);
  margin-bottom: var(--s-3);
}

/* ==========================================================================
   .npanels  —  the grid these surfaces live in
   Compact by design: adding polish must not add scrolling.
   ========================================================================== */
.npanels { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.npanels h3 { font-size: var(--t-md); margin-bottom: var(--s-2); line-height: 1.2; }
.npanels p  { font-size: var(--t-sm); margin: 0; }
@media (min-width: 620px)  { .npanels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .npanels--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .npanels--8 { grid-template-columns: repeat(4, 1fr); } }

.card__flag {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: var(--s-4);
  border-radius: 999px;
  background: rgba(123,63,228,.18);
  border: 1px solid var(--line-brand);
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple-lt);
}

/* Section head used at the top of most bands. */
.shead { max-width: 46rem; margin-bottom: var(--s-9); }
.shead .lede { margin-top: var(--s-5); }
.shead--mid { margin-inline: auto; text-align: center; }
.shead--mid .eyebrow { justify-content: center; }

/* ==========================================================================
   THE H7 PAGE HERO FRAME
   Every H7-owned page hero shares these conventions: dark ground, purple-to-red
   atmosphere, eyebrow, optional price token, headline scale, CTA hierarchy,
   and the same hairline bottom transition. Individual pages then re-art-direct
   the composition on top — they do not replace the frame.
   ========================================================================== */
.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--on-dark);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
}
.phero h1 { font-size: var(--t-xxl); margin-bottom: var(--s-5); }
.phero .lede { max-width: 54ch; color: var(--on-dark-body); }

/* Shared bottom transition — the hero resolves into the page rather than
   stopping at a hard edge. */
.phero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line-brand) 28%, var(--line-brand) 72%, transparent 100%);
}

/* The price token. Consistent wherever a service publishes a starting price. */
.phero__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--line-brand);
  border-radius: 999px;
  background: rgba(123,63,228,.12);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--on-dark-body);
}
.phero__price strong {
  font-size: var(--t-md);
  letter-spacing: -.02em;
  color: var(--on-dark);
}

/* End-of-page CTA, shared shell — each page supplies its own words. */
.endcta { text-align: center; }
.endcta h2 { font-size: var(--t-xl); margin-bottom: var(--s-4); }
.endcta .lede { max-width: 46ch; margin-inline: auto; }
.endcta .btn-row { justify-content: center; margin-top: var(--s-7); }

/* Two-column prose used on legal pages and long-form service copy. */
.prose h2 { font-size: var(--t-lg); margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-md); margin-top: var(--s-6); }
.prose ul { max-width: var(--measure); }
.prose li { margin-bottom: var(--s-2); }

/* ==========================================================================
   PART B — PAGE COMPOSITIONS
   Single-use layouts. Not shared between pages by design.
   ========================================================================== */

/* ==========================================================================
   §13  HOME — hero
   The H7 master artwork used to open the page. It now closes it (§22), where
   the family meaning gives it context. What opens instead is the evidence:
   three real client sites in a cascade. Claim and proof in one viewport.
   ========================================================================== */
.hh {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 7rem);
  /* Purple enters from the H side, red resolves toward the 7 side. */
  background:
    radial-gradient(56% 44% at 12% 22%, rgba(123,63,228,.28) 0%, transparent 70%),
    radial-gradient(50% 42% at 92% 70%, rgba(255,59,59,.16) 0%, transparent 72%),
    var(--ink-900);
}
/* The locked headline gets the FULL measure. --t-hero's floor was chosen so
   "You grow with it." holds one line at 375px; that only holds if the element
   is full width. In a half-width column at 1440 it breaks to "We / build it.",
   which damages the statement — hence copy and cascade sit beneath, not beside. */
.hh__h1 {
  font-size: var(--t-hero);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: none;
}
.hh__h1 span { display: block; }
/* REVISION (owner review pass): the gradient span's descender ("g" in "grow")
   was visibly clipped. Root cause, confirmed by rendering a debug clone at
   generous line-height for comparison: -webkit-background-clip:text paints
   the gradient within the LINE BOX, and the base h1-h6 line-height (1.06) is
   tighter than Montserrat 800's true ascent+descent at this size (up to
   104px), so the paint region crops the bottom of the descender.
   A padding-bottom/negative-margin trick was tried first, but it only adds
   room at the very bottom of the block — it does not help "grow" when the
   phrase wraps onto two internal lines below ~420px, since the wrapped
   descender then sits on the FIRST line, not the block's bottom edge.
   line-height gives every line — wrapped or not — the same extra room, so it
   is the correct fix for all widths, not only the common desktop case. */
.hh__h1 .grad-h7 { line-height: 1.18; }

.hh__lower {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.hh__lede { max-width: 46ch; margin-bottom: var(--s-7); }

/* Below the two-column breakpoint the cascade would otherwise run the full
   measure — 690px tall on a tablet, which pushes everything below it off the
   first screen. Capped so it stays a composition rather than a wall. */
.hh__proof { max-width: 32rem; }

@media (min-width: 1000px) {
  /* Asymmetric: the cascade takes marginally the larger share, because it is
     the evidence and the copy above it has already made the claim. */
  .hh__lower { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 5vw, 4.5rem); }
  .hh__proof { max-width: none; }
}

/* ---- The cascade --------------------------------------------------------
   Three frames at three depths. Percentage geometry throughout, so the whole
   composition scales with its container instead of needing a breakpoint per
   size. Every offset is checked to land inside 0–100% at every width, which
   is what keeps this out of the horizontal-overflow trap.                  */
.deck {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .92;
}
.deck__f {
  position: absolute;
  margin: 0;
  /* Parallax offset. --px/--py are set by JS on the container; --depth makes
     each frame move a different amount, which is what reads as depth.
     Both default to zero, so with JS off nothing moves and nothing shifts. */
  transform: translate3d(
    calc(var(--px, 0px) * var(--depth, 0)),
    calc(var(--py, 0px) * var(--depth, 0)), 0);
  transition: transform var(--dur) var(--ease);
}
.deck__f--1 { width: 78%; left: 0;   top: 0;   z-index: 3; --depth: 1;   }
.deck__f--2 { width: 58%; left: 40%; top: 32%; z-index: 2; --depth: .62; }
.deck__f--3 { width: 50%; left: 6%;  top: 62%; z-index: 1; --depth: .34; }

.deck__a {
  display: block;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-dark2);
  background: var(--ink-800);
  text-decoration: none;
  /* The client's own identity colour, as a glow under their own screenshot. */
  box-shadow:
    0 30px 70px -34px rgba(0,0,0,.9),
    0 18px 60px -30px var(--tint);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.deck__img { display: block; width: 100%; height: auto; }
.deck__f:hover, .deck__f:focus-within { z-index: 4; }
.deck__a:hover, .deck__a:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 40px 90px -34px rgba(0,0,0,.92), 0 26px 74px -30px var(--tint);
}
/* Caption sits inside the frame on its own scrim, so it can never collide
   with a neighbouring frame no matter how the cascade reflows. */
.deck__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, transparent, rgba(6,6,10,.92) 62%);
}
.deck__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: -.01em;
  color: var(--on-dark);
}
.deck__kind {
  display: block;
  font-size: var(--t-xs);
  color: var(--on-dark-meta);
  margin-top: 2px;
}
/* Below 620px the two supporting frames are too small to caption legibly.
   The links keep their accessible names from the image alt text. */
@media (max-width: 619.98px) {
  .deck__f--2 .deck__cap, .deck__f--3 .deck__cap { display: none; }
}
@media (min-width: 768px) {
  .deck__f--1 { width: 60%; left: 0;   top: 2%;  }
  .deck__f--2 { width: 50%; left: 44%; top: 28%; }
  .deck__f--3 { width: 42%; left: 10%; top: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .deck__f, .deck__a { transition: none; }
}

/* ==========================================================================
   §14  HOME — selected work
   Three projects, three genuinely different compositions. The point of the
   section is range, so a single repeated row treatment would contradict it.
   ========================================================================== */
.sw__h {
  font-size: var(--t-xxl);
  max-width: 20ch;
  margin-bottom: var(--s-5);
}
.sw__lede { max-width: 52ch; margin-bottom: var(--s-9); }

.sw__p {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line-dark);
}
.sw__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.sw__shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  box-shadow: 0 26px 70px -34px var(--tint);
}
.sw__shot img { display: block; width: 100%; height: auto; }

.sw__idx {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--tint);
  margin: 0 0 var(--s-3);
}
.sw__name { font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -.03em; margin-bottom: var(--s-2); }
.sw__kind {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin-bottom: var(--s-4);
}
.sw__line { color: var(--on-dark-body); max-width: 38ch; margin-bottom: var(--s-3); }
.sw__arch { font-size: var(--t-sm); color: var(--on-dark-meta); margin-bottom: var(--s-5); }
.sw__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tint);
  text-decoration: none;
}
.sw__cta:hover { text-decoration: underline; text-underline-offset: .25em; }
.sw__foot { margin-top: var(--s-8); }

/* --- C only: a centred composition with a wash of the client's ground
       colour. Different rhythm from A and B, not a third variant of them. */
.sw__p--c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 50% 0%, var(--ground), transparent 70%);
  opacity: .3;
}

@media (min-width: 900px) {
  /* A — screenshot leads from the left, copy holds the right. */
  .sw__p--a .sw__grid { grid-template-columns: 1.55fr 1fr; }

  /* B — mirrored, with a wash entering from the right edge. */
  .sw__p--b .sw__grid { grid-template-columns: 1fr 1.55fr; }
  .sw__p--b .sw__shot { order: 2; }
  .sw__p--b .sw__body { order: 1; }
  .sw__p--b::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(58% 100% at 100% 50%, var(--ground), transparent 72%);
    opacity: .26;
  }

  /* C — full-measure screenshot, copy centred beneath it. */
  .sw__p--c .sw__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sw__p--c .sw__line { max-width: 46ch; }
  .sw__p--c .sw__body { max-width: 52ch; }
}

/* ==========================================================================
   §16  HOME — why H7 builds differently
   Opens on typography rather than an eyebrow, so the page changes gear here.
   Three beats, keyline-marked, not cards.
   ========================================================================== */
.why__h {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  max-width: 30ch;
  /* REVISION (owner review pass): was --s-9 (96px) — more gap than a
     two-line headline needs before three keyline-marked beats, on a
     section that is already using the site's tightened informational
     pace rather than a cinematic one. */
  margin-bottom: var(--s-8);
}
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
.beat { margin: 0; }
.beat::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-rule);
  margin-bottom: var(--s-4);
}
.beat__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  color: var(--on-dark-meta);
  margin: 0 0 var(--s-2);
}
.beat__name { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.beat p { color: var(--on-dark-body); margin: 0; }
.why__fine { margin-top: var(--s-8); }

/* MOBILE POLISH: real-device review found this section unnecessarily tall
   below the 860px breakpoint, where the three beats stack in one column and
   each body paragraph inherits the site's 1.65 reading line-height — generous
   for continuous prose, more than three short single-idea paragraphs need.
   Tightened moderately: less gap between the three stacked beats, a shorter
   headline gap, and a slightly closer paragraph leading. Text size and the
   editorial character are untouched — this is leading and spacing only, and
   only below 860px, so the approved desktop three-column layout is untouched. */
@media (max-width: 859.98px) {
  .why__h { margin-bottom: var(--s-7); }
  .beats { gap: var(--s-6); }
  .beat p { line-height: 1.5; }
}

@media (min-width: 860px) {
  .beats { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); }
}

/* ==========================================================================
   §17  HOME — what H7 builds + starting prices
   REVISION (owner review pass): absorbs the old standalone "What H7 Builds"
   section. Typographic price list, not a commodity table — only the
   flagship figure carries the gradient, every other number stays plain so
   it means something. The list reads price-descending (Advanced ->
   E-Commerce -> Custom -> Landing); Custom Websites stays visually dominant
   through .sp__row--flag's dimensional treatment, not through position —
   the same "this is the recommended thing" language as .cpanel--lead below
   and .wct--lead on Website Care, so the flagship reads as flagship wherever
   it sits in a list.
   ========================================================================== */
.sp__head { max-width: 42rem; margin-bottom: var(--s-8); }
.sp__list { margin: 0; }
.sp__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4) var(--s-5);
  align-items: baseline;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-dark);
}
.sp__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}
.sp__label a { text-decoration: none; color: var(--on-dark); }
.sp__label a:hover { text-decoration: underline; text-underline-offset: .2em; }
.sp__tag {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-lt);
  margin: 0 0 var(--s-3);
}
.sp__tag--red { color: var(--red-lt); }
.sp__note {
  display: block;
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--on-dark-meta);
  margin-top: var(--s-2);
}
.sp__fig {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -.03em;
  color: var(--on-dark);
  text-align: right;
}
/* The flagship row — a highlighted band within the same list, not a separate
   card, so "Custom Websites is the flagship" and "here is the full price
   range, high to low" are ONE visual statement instead of two sections. */
.sp__row--flag {
  position: relative;
  overflow: hidden;
  margin-block: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-top-color: transparent;
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(123,63,228,.16) 0%, transparent 64%),
    radial-gradient(70% 120% at 100% 100%, rgba(255,59,59,.08) 0%, transparent 66%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
  box-shadow: var(--shadow-brand);
}
.sp__row--flag::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-edge);
}
.sp__row--flag .sp__label { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.sp__row--flag .sp__fig  { font-size: clamp(2rem, 4vw, 3.25rem); }
.sp__fig--word { font-size: var(--t-md); font-weight: 700; color: var(--on-dark-body); letter-spacing: 0; }
.sp__list--minor .sp__label { font-size: var(--t-md); }
.sp__list--minor .sp__fig { font-size: var(--t-lg); color: var(--on-dark-body); }
.sp__rule { margin: var(--s-7) 0 var(--s-5); }
.sp__fine { margin-top: var(--s-7); }
.sp__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

/* MOBILE POLISH (real-device review): below 620px the 1fr/auto grid measured
   "Custom Websites" wrapping to two lines even at 430px (28px bold text
   squeezed into ~55% of the row), and the SEO row's description column
   compressed to ~153px against a three-line paragraph. Real device review
   confirmed both. Below this row's own existing 620px breakpoint — already
   used for the flagship's padding — the label and figure stack full-width
   instead of sharing columns; name and price both get the whole measure, so
   neither is squeezed and nothing wraps awkwardly.
   Order deliberately stays tag -> name -> note -> price (dt, then dd) rather
   than moving price up between name and note: that would need CSS to visually
   reorder price ahead of dt's own content, which would make a screen reader's
   line-order (tag, name, note, price — unchanged) diverge from what a sighted
   mobile reader sees. Keeping dt-then-dd preserves one true reading order at
   every width and still fully resolves the reported squeeze/wrap defects. */
@media (max-width: 619.98px) {
  .sp__row { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .sp__fig { text-align: left; }
  .sp__row--flag .sp__fig { margin-top: var(--s-2); }
}

@media (min-width: 620px) {
  .sp__row--flag { padding-inline: var(--s-7); }
}

/* ==========================================================================
   §18  HOME — after launch / website care
   The two tiers share ONE shell and differ by atmosphere, never by shape.
   This deliberately mirrors .wct on the Website Care page so that page's
   later redesign inherits a system that already exists.
   Essentials is NOT a plain box: it carries its own restrained purple wash
   and a soft edge, so it reads as the quieter member of one family.
   ========================================================================== */
.care__head { max-width: 44rem; margin-bottom: var(--s-8); }
.care__h { font-size: var(--t-xxl); margin-bottom: var(--s-5); }
.care__tiers { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }

.cpanel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
}
.cpanel--quiet {
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(123,63,228,.08) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
}
.cpanel--quiet::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(169,125,240,.55), rgba(169,125,240,.06));
}
.cpanel--lead {
  border-color: var(--line-brand);
  box-shadow: var(--shadow-brand);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(123,63,228,.20) 0%, transparent 60%),
    radial-gradient(70% 110% at 100% 100%, rgba(255,59,59,.10) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-750) 0%, var(--ink-900) 100%);
}
.cpanel--lead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-edge);
}
.cpanel__tier {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin-bottom: var(--s-4);
}
.cpanel__tier--lead { color: var(--purple-lt); }
.cpanel__name { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.cpanel__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--on-dark);
  margin: 0 0 var(--s-3);
}
.cpanel--lead .cpanel__price { font-size: clamp(2.125rem, 4.4vw, 3rem); }
.cpanel__price span { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; color: var(--on-dark-meta); }
/* "Starting at" on its own line so the figure never wraps mid-price. */
.cpanel__from { display: block; margin-bottom: var(--s-2); }
.cpanel__line { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); color: var(--on-dark); margin: 0 0 var(--s-5); }
.cpanel__line--lead { color: var(--purple-lt); }
.cpanel .ticks li::before { border-color: var(--purple-lt); }

.mplan2 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-top: var(--s-8);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  background: var(--ink-850);
}
.mplan2__h { font-size: var(--t-md); margin-bottom: var(--s-3); }
.mplan2__copy p { color: var(--on-dark-body); margin: 0; }
.mplan2__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin: 0; }
/* MOBILE POLISH: keeps each amount with its own label as one atomic unit, so
   wrapping at narrow widths can only happen BETWEEN "$399 to start" and
   "$249 per month x 12" — never split an amount from what it means. */
.mplan2__unit { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: var(--s-2); }
.mplan2__amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -.03em;
  color: var(--on-dark);
}
.mplan2__sub { font-size: var(--t-sm); color: var(--on-dark-meta); }
.mplan2__op { font-family: var(--font-display); font-size: var(--t-md); color: var(--purple-lt); }
.mplan2__fine { margin: 0; }
.care__fine { margin-top: var(--s-7); }

@media (min-width: 900px) {
  .care__tiers { grid-template-columns: 1fr 1.15fr; align-items: start; }
}
@media (min-width: 860px) {
  .mplan2 { grid-template-columns: 1.25fr auto; align-items: center; }
  .mplan2__fine { grid-column: 1 / -1; }
}

   §19  MANAGED PLAN FIGURE — shared by Payment Options (.mplan__figure) and
   used standalone (.mplan). The homepage now uses its own .mplan2 treatment
   above instead (see the "MOBILE POLISH" note) — this block is no longer
   home-only, hence the renamed header.
   ========================================================================== */
.mplan {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(123,63,228,.35);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255,59,59,.14) 0%, transparent 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(123,63,228,.22) 0%, transparent 62%),
    var(--ink-700);
}
.mplan__figure {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: rgba(11,11,15,.55);
  border: 1px solid var(--line-dark2);
}
.mplan__label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--s-5);
}
.mplan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0;
  color: var(--on-dark);
}
.mplan__amount span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple-lt);
  margin-top: var(--s-2);
}
.mplan__plus { font-family: var(--font-display); font-size: var(--t-lg); color: var(--on-dark-faint); margin: var(--s-4) 0; }
.mplan__fine {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--on-dark-mute);
}
@media (min-width: 950px) { .mplan { grid-template-columns: 1.1fr .9fr; } }

/* ==========================================================================
   §20  HOME — website care tiers
   ========================================================================== */
.hm-care__head { max-width: 40rem; margin-bottom: var(--s-8); }
/* Two tiers of ONE card system — same padding, same grid, same price
   alignment. White Glove leads via the gradient edge, not a different shape. */
.tiers { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
.tier {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--ink-750) 0%, var(--ink-850) 100%);
}
.tier--lead {
  border-color: var(--line-brand);
  box-shadow: var(--shadow-brand);
  overflow: hidden;
}
.tier--lead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--grad-edge);
}
.tier__name {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-lt);
  margin-bottom: var(--s-4);
}
.tier .price { color: var(--on-dark); }
.tier .price small { color: var(--on-dark-meta); }
.tier__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--on-dark);
  margin: var(--s-5) 0;
  letter-spacing: -.01em;
}
.tier--lead .tier__line { color: var(--purple-lt); }
.hm-care__fine { margin-top: var(--s-7); }
@media (min-width: 860px) { .tiers { grid-template-columns: 1fr 1.15fr; } }

/* ==========================================================================
   §21  HOME — process
   ========================================================================== */
.hm-process__head { max-width: 40rem; margin-bottom: var(--s-8); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
.steps__i { margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--line-dark); }
.steps__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--purple-lt);
  display: block;
  margin-bottom: var(--s-4);
}
.steps__i h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.steps__i p { font-size: var(--t-sm); color: var(--on-dark-mute); margin: 0; }
@media (min-width: 700px)  { .steps { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   §22  HOME — founder
   ========================================================================== */
/* ==========================================================================
   THE H7 STORY COMPOSITION — homepage only.
   About used to share this exact composition (artwork + legend + grid) with
   the homepage crescendo; the two read as too similar and About no longer
   uses .story__art/.story__legend/.ab-name__in. This block now belongs to
   the homepage alone. About's own, smaller name/story treatment lives in
   §35 ABOUT as .ab-story. Do not reintroduce .ab-name__in here.
   ========================================================================== */
.story__art {
  position: relative;
  margin: 0;
  justify-self: center;
}
.story__art img {
  width: 100%;
  max-width: 460px;
  height: auto;
  /* The square crop dissolves into the band, so the mark floats in the dark
     rather than sitting in a visible box. Unsupported engines simply show the
     square, which is still correct. */
  -webkit-mask-image: radial-gradient(circle at 50% 47%, #000 52%, rgba(0,0,0,.55) 68%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 47%, #000 52%, rgba(0,0,0,.55) 68%, transparent 80%);
}
.story__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4) var(--s-7);
  margin-top: calc(var(--s-5) * -1);
  font-size: var(--t-sm);
  color: var(--on-dark-body);
}
.story__legend span { display: inline-flex; align-items: baseline; gap: var(--s-3); }
.story__ch {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--purple-lt);
}
.story__ch--red { color: var(--red); }
.story__copy .lede { color: var(--on-dark-body); }

.story__in {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
/* Founder signature: portrait, name, role — all at readable contrast. */
.story__sig {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-sm);
}
.story__face {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-brand);
  flex: none;
  background: var(--ink-900);
}
.story__sig strong { display: block; font-family: var(--font-display); color: var(--on-dark); font-size: var(--t-body); }
.story__sig span span { color: var(--on-dark-body); }

@media (min-width: 900px) {
  .story__in { grid-template-columns: .85fr 1.15fr; }
  /* Controlled overlap: the artwork breaks its column slightly. */
  .story__art { margin-inline-end: calc(var(--s-6) * -1); }
}
@media (min-width: 1100px) {
  .story__art img { max-width: 460px; }
}

/* Story lead-in and headline. Added with the 2026 homepage redesign, when the
   founder section became the page's brand crescendo rather than a mid-page
   aside. Shared shape with the About page story block above. */
.story__pre {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin-bottom: var(--s-4);
}
.story__h { font-size: var(--t-xl); margin-bottom: var(--s-5); }
/* Same descender-clip mechanism and fix as .hh__h1 .grad-h7 — "people" has a
   'p' descender, this heading shares the same tight 1.06 line-height, and the
   gradient span is a long phrase that wraps at narrow widths, so line-height
   (not the bottom-only padding trick) is needed to protect every line. */
.story__h .grad-h7 { line-height: 1.18; }

/* ==========================================================================
   §23  HOME — final CTA
   Deliberately NOT the shared .endcta the other pages close with, and set on
   the deepest ground on the site so the page visibly arrives somewhere.
   ========================================================================== */
.close {
  background:
    radial-gradient(64% 100% at 50% 0%, rgba(123,63,228,.24) 0%, transparent 70%),
    var(--ink-950);
  text-align: center;
}
.close__in > * { margin-inline: auto; }
.close__h {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  margin-bottom: var(--s-5);
}
/* Same descender-clip mechanism and fix as .hh__h1 .grad-h7 — "building."
   has a 'g' descender at an even tighter line-height (1.03) than the hero. */
.close__h .grad-h7 { line-height: 1.18; }
.close__lede { max-width: 44ch; }
.close__row { justify-content: center; margin: var(--s-7) 0 var(--s-6); }
.close__fine { color: var(--on-dark-meta); }
/* ==========================================================================
   §24  SERVICES — the decision page
   Situation on the left, recommendation on the right. Not a card grid.
   ========================================================================== */
.sv-hero h1 { max-width: 16ch; }

.match { border-top: 1px solid var(--line-dark); }
.match__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  border-bottom: 1px solid var(--line-dark);
}
.match__q {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--on-dark);
  margin: 0;
  max-width: 26ch;
}
.match__label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin: 0 0 var(--s-2);
}
/* Flagship marker on the Custom Websites recommendation. Reuses the approved
   .card__flag pill rather than adding a component; only the gap is tightened,
   because .card__flag's default spacing is tuned for the larger panel cards.
   .match__then is a plain block (see the note below about display:contents),
   so this adds no grid item and cannot disturb the row layout. */
.match__then .card__flag { margin-bottom: var(--s-3); }

.match__then h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.match__then h3 a { text-decoration: none; }
.match__then h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.match__price {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--purple-lt);
  margin: 0 0 var(--s-4);
}
.match__price--alt { color: var(--red); }
.match__row--key { background: linear-gradient(90deg, rgba(123,63,228,.10), transparent 62%); }
.match__row--alt { background: linear-gradient(90deg, rgba(255,59,59,.08), transparent 62%); }
@media (min-width: 860px) {
  .match__row { grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
  .match__q { position: relative; padding-left: 1.4rem; }
  .match__q::before {
    content: "\201C";
    position: absolute; left: -.1rem; top: -.35em;
    font-size: 2.6em; line-height: 1;
    color: var(--line-dark2);
  }
}
/* A three-column variant was tried here (situation | recommendation | detail)
   and made the section TALLER, not shorter: `display: contents` on .match__then
   put five siblings into the row grid and the implicit rows grew. Reverted
   deliberately — the two-column form with tighter padding is the better result.
   Do not reintroduce it without measuring. */

/* Wide desktop: the price sits beside the recommendation rather than under it. */
@media (min-width: 1120px) {
  .match__then { position: relative; }
  .match__then h3 { display: inline; margin-right: var(--s-4); }
  .match__price { display: inline-block; margin-bottom: var(--s-4); }
}


.sv-seo__pair { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
.sv-seo__pair h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.tier__name--alt { color: var(--red); }
@media (min-width: 820px) { .sv-seo__pair { grid-template-columns: 1fr 1fr; } }

.sv-care__in { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .sv-care__in { grid-template-columns: 1.4fr auto; } }

/* ==========================================================================
   §25  CUSTOM WEBSITES — the sitemap is the hero object
   ========================================================================== */
.cw-hero {
  background:
    radial-gradient(50% 60% at 82% 20%, rgba(123,63,228,.20) 0%, transparent 70%),
    var(--ink-900);
}
.cw-hero__in { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .cw-hero__in { grid-template-columns: 1fr 1fr; } }

/* min-width: 0 overrides the grid item's default min-content size, which
   otherwise forces the 1fr track to grow to the diagram's 460px and pushes
   it past the viewport below the 1000px breakpoint — the intended internal
   scroll on .smap__scroll never gets a chance to engage. */
.smap { margin: 0; min-width: 0; }
/* Wide diagram scrolls inside its own box; the page body never does. */
.smap__scroll { overflow-x: auto; padding-bottom: var(--s-3); -webkit-overflow-scrolling: touch; }
.smap__scroll:focus-visible { outline: 2px solid var(--purple-lt); outline-offset: 2px; }
.smap__tree { min-width: 460px; }
.smap__root, .smap__node {
  display: block;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-md);
  background: var(--ink-800);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  text-align: center;
}
.smap__root {
  max-width: 150px;
  margin: 0 auto var(--s-6);
  border-color: var(--purple);
  background: rgba(123,63,228,.18);
  position: relative;
}
.smap__root::after {
  content: "";
  position: absolute; left: 50%; top: 100%;
  width: 1px; height: var(--s-6);
  background: var(--line-dark2);
}
.smap__branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.smap__col { position: relative; padding-top: var(--s-4); }
.smap__col::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 1px; height: var(--s-4);
  background: var(--line-dark2);
}
.smap__node--cta { border-color: var(--red); background: rgba(255,59,59,.14); }
.smap__kids { display: block; margin-top: var(--s-3); }
.smap__kids span {
  display: block;
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  border: 1px dashed var(--line-dark2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--on-dark-mute);
  text-align: center;
}
.smap__cap { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--on-dark-mute); }


.cw-inc__in, .cw-pay__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .cw-inc__in { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .cw-pay__in { grid-template-columns: 1.1fr .9fr; align-items: start; }
}
.cw-seo__list { columns: 1; }
@media (min-width: 720px) { .cw-seo__list { columns: 2; column-gap: var(--s-8); } }
.cw-seo__list li { break-inside: avoid; }
.cw-pay__note h3 { font-size: var(--t-md); margin-bottom: var(--s-4); }

/* ==========================================================================
   §26  LANDING PAGES — a funnel. The measure narrows as you scroll.
   ========================================================================== */
.lp-hero {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(255,59,59,.22) 0%, transparent 70%),
    var(--ink-900);
  text-align: center;
}
.lp-hero .eyebrow { justify-content: center; }
.lp-hero__h1 { font-size: var(--t-hero); margin: var(--s-4) 0 var(--s-6); }
.lp-hero__lede { margin-inline: auto; }
.lp-hero .btn-row { justify-content: center; }
.lp-red { color: var(--red); }

/* The narrowing. Each successive band is tighter than the last — the funnel
   still works, it just resolves in fewer, denser steps. */
.lp-narrow-1 { max-width: 880px; }
.lp-narrow-4 { max-width: 620px; text-align: center; }

/* The fit question and the deliverables, side by side on desktop. */
.lp-fit__in { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
.lp-fit__col h2 { font-size: var(--t-lg); margin-bottom: var(--s-5); }
.lp-fit__col .ticks li, .lp-fit__col .crosses li { max-width: 46ch; }
.lp-when__sub { margin-top: var(--s-6); font-size: var(--t-md); }
.lp-fit__deliver { align-self: stretch; }
@media (min-width: 920px) {
  .lp-fit__in { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
}
.lp-narrow-4 .lede { margin-inline: auto; }
.lp-narrow-4 .btn-row { justify-content: center; }

/* ==========================================================================
   §28  E-COMMERCE — catalogue structure rendered as architecture
   ========================================================================== */
.ecgrid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; margin-bottom: var(--s-8); }
@media (min-width: 860px) { .ecgrid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.ecgrid__block { padding: var(--s-6); border: 1px solid var(--line-light); border-radius: var(--r-xl); background: #fff; }
.ecgrid__t {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-dk);
  margin: 0 0 var(--s-5);
}
.ecgrid__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-5); }
.ecgrid__tiles span {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--paper-alt), #DDDDE6);
  border: 1px solid var(--line-light);
}
.ecgrid__pp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.ecgrid__pp-img {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--paper-alt), #DDDDE6);
  border: 1px solid var(--line-light);
}
.ecgrid__pp-lines { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.ecgrid__pp-lines i { display: block; height: 8px; border-radius: 4px; background: var(--paper-alt); }
.ecgrid__pp-lines i:nth-child(2) { width: 70%; }
.ecgrid__pp-lines i:nth-child(3) { width: 45%; }
.ecgrid__pp-lines b { display: block; height: 34px; border-radius: var(--r-md); background: var(--purple-dk); }
.ecgrid__d { font-size: var(--t-sm); margin: 0; }

.ecchain { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.ecchain__s {
  position: relative;
  padding: var(--s-4);
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: #fff;
}
.ecchain__s p { margin: var(--s-2) 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); color: var(--on-light); }
.ecchain__s--end { border-color: var(--purple-dk); background: rgba(123,63,228,.06); }
@media (min-width: 720px)  { .ecchain { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ecchain { grid-template-columns: repeat(6, 1fr); } }
.ec-arch__fine, .ec-price__fine { margin-top: var(--s-6); }

.ec-inc__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .ec-inc__in { grid-template-columns: .9fr 1.1fr; align-items: start; } }

/* The operational checklist: localized purple glow behind the field, each
   item on a hairline row rather than a floating tick, and a dimmed
   description against a bright operational term — so the list reads as one
   continuous, scannable ledger instead of nine identical white lines. */
.ec-list { position: relative; overflow: hidden; }
.ec-list::before {
  content: "";
  position: absolute;
  inset: -8% -18% -8% -8%;
  background: radial-gradient(58% 68% at 88% 22%, rgba(123,63,228,.16) 0%, transparent 72%);
  pointer-events: none;
}
.ec-list .ticks { position: relative; margin: 0; }
.ec-list .ticks li {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark-mute);
}
.ec-list .ticks li:last-child { border-bottom: 0; }
.ec-list .ticks li strong { color: var(--on-dark); }
.ec-list .ticks li::before { top: calc(var(--s-3) + .55em); }

/* The scope matrix: a numbered, ruled ledger rather than six floating text
   blocks or another .panel--h7 card grid. */
.ec-price__rule { margin: var(--s-6) 0 0; }
.ec-price__grid {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line-dark);
}
.ec-price__grid::before {
  content: "";
  position: absolute;
  inset: -6% -14% -6% -6%;
  background: radial-gradient(50% 60% at 8% 85%, rgba(255,59,59,.10) 0%, transparent 70%);
  pointer-events: none;
}
.ec-price__row {
  position: relative;
  display: flex;
  gap: var(--s-4);
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--line-dark);
}
.ec-price__idx {
  flex: none;
  padding-top: .2em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--purple-lt);
}
.ec-price__row h3 { font-size: var(--t-md); margin: 0 0 var(--s-2); }
.ec-price__row p { font-size: var(--t-sm); margin: 0; }
@media (min-width: 760px)  { .ec-price__grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
@media (min-width: 1100px) { .ec-price__grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   §29  ADVANCED / CUSTOM — systems view, the darkest page on the site
   ========================================================================== */
.page-advanced { background: #07070A; }
.page-advanced .band--dark  { background: #07070A; }
.page-advanced .band--dark2 { background: #0E0E14; }
.ad-hero {
  background:
    radial-gradient(46% 60% at 16% 12%, rgba(123,63,228,.20) 0%, transparent 70%),
    radial-gradient(40% 50% at 86% 78%, rgba(255,59,59,.14) 0%, transparent 72%),
    #07070A;
}
.ad-hero h1 { max-width: 20ch; }


.ad-how__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .ad-how__in { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.adspec {
  padding: var(--s-6);
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono);
}
.adspec__h {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-lt);
  margin: 0 0 var(--s-5);
}
.adspec ul { list-style: none; margin: 0; padding: 0; }
.adspec li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--on-dark-mute);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line-dark);
}
.adspec li:last-child { border-bottom: 0; }
.adspec span { color: var(--red); flex: none; }

/* ==========================================================================
   §30  SEO — typographic and text-forward. No cards, no icons, no tiers.

   DESKTOP REFINEMENT: the whole body used to live in one 720px .prose column
   regardless of viewport, so every section repeated the same
   heading/paragraph/list rhythm down an increasingly tall single column on
   wide screens. .seo-wrap widens the body container to a genuine desktop
   editorial measure; individual text runs still cap their own line length
   (46–62ch) so paragraphs never stretch uncomfortably wide. The two
   inclusion/exclusion arguments (§scope) and the two honesty arguments
   (§honesty) each now run as one connected row on desktop instead of two
   identical stacked chapters — the actual source of the "mobile format on
   desktop" feeling — while collapsing to the original single-column order
   below their breakpoints. Nothing here turns the page into cards: every
   grouping still reads as open prose plus a ruled or column-split list.
   ========================================================================== */
.seo-hero { text-align: left; }
.seo-hero__h1 { font-size: clamp(2.25rem, 6.4vw, 5rem); margin: var(--s-4) 0 var(--s-6); }
.seo-red { color: var(--red); }
.seo-hero__lede { max-width: 58ch; }

.seo-wrap { max-width: 1120px; }

.seo-intro { max-width: var(--measure); }

.seo-split { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin: var(--s-7) 0 var(--s-8); }
.seo-split__i { padding: var(--s-6); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--ink-750), var(--ink-850)); border: 1px solid var(--line-dark); border-top: 3px solid var(--purple); }
.seo-split__i--alt { border-top-color: var(--red); }
.seo-split__i h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.seo-split__i p { font-size: var(--t-sm); margin: 0; }
.seo-split__tag {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple-lt);
  margin: 0 0 var(--s-3);
}
.seo-split__tag--alt { color: var(--red); }
@media (min-width: 780px) { .seo-split { grid-template-columns: 1fr 1fr; } }

/* B + C: what the Foundation covers, beside what it is not. */
.seo-scope {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  margin: var(--s-8) 0;
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-dark);
}
@media (min-width: 980px) {
  .seo-scope { grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
}
.seo-scope__col h2 { font-size: var(--t-lg); margin: 0 0 var(--s-4); }
.seo-scope__col > p { max-width: 60ch; }
.seo-scope__close { font-size: var(--t-sm); color: var(--on-dark-mute); }
.seo-scope__list { margin: var(--s-5) 0; }
@media (min-width: 640px) {
  .seo-scope__col--in .seo-scope__list { columns: 2; column-gap: var(--s-7); }
  .seo-scope__col--in .seo-scope__list li { break-inside: avoid; }
}
.seo-scope__col--out .crosses { margin: var(--s-5) 0; }
@media (min-width: 980px) {
  .seo-scope__col--out {
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid var(--line-dark);
  }
}

/* D. Additional SEO — explanation on one side, the list on the other. */
.seo-extra {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  margin: var(--s-8) 0;
}
@media (min-width: 900px) {
  .seo-extra { grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}
.seo-extra__text h2 { font-size: var(--t-lg); margin: 0 0 var(--s-4); }
.seo-extra__text p { max-width: 46ch; }
.seo-extra__list { margin: 0; }
@media (min-width: 620px) { .seo-extra__list { columns: 2; column-gap: var(--s-7); } }
.seo-extra__list li { break-inside: avoid; }

/* E. Two honesties, one movement: pricing philosophy beside outcome
   philosophy. The guarantee panel keeps its existing emphasis; only its
   position changes, so its weight is not lost by sitting beside prose. */
.seo-honesty {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  margin: var(--s-8) 0;
}
@media (min-width: 940px) {
  .seo-honesty { grid-template-columns: 1fr 1fr; align-items: start; }
}
.seo-honesty__col > p { max-width: 58ch; }

.seo-guarantee {
  margin: 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--red);
  border-radius: var(--r-lg);
  background: rgba(255,59,59,.07);
}
.seo-guarantee__h { margin-top: 0 !important; font-size: var(--t-lg); }
.seo-guarantee p:last-child { margin-bottom: 0; }
.seo-guarantee p { max-width: 58ch; }

/* F. Website Care cross-reference — deliberately demoted: a footnote-weight
   clarification, not a chapter the same size as the arguments above it. */
.seo-aside {
  max-width: var(--measure);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-dark);
}
.seo-aside h3 { font-size: var(--t-md); margin: 0 0 var(--s-3); color: var(--on-dark-mute); }
.seo-aside p { font-size: var(--t-sm); }

/* The Website Care aside is the last thing in .seo-body, so the section's
   own bottom .band padding plus .endcta's own top .band padding stacked
   into ~184px of dead space at 1440px — measured live, not assumed. Only
   .seo-body's bottom padding is narrowed, and only at tablet width and up:
   .band, .band--tight-top and .endcta are shared by every page on the site,
   so neither is touched, and mobile keeps its original clamp(3.25rem…)
   spacing untouched. */
@media (min-width: 768px) {
  .seo-body { padding-bottom: var(--s-6); }
}

/* ==========================================================================
   §31  WORK — three full-bleed project worlds
   ========================================================================== */
.wp-hero {
  background:
    radial-gradient(54% 58% at 78% 14%, rgba(123,63,228,.20) 0%, transparent 70%),
    var(--ink-900);
}
.wp-hero__h1 { font-size: clamp(2.25rem, 6.6vw, 5.25rem); margin: var(--s-4) 0 var(--s-6); }
.wp-hero__lede { max-width: 52ch; }

.wproj {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  /* Each project band is grounded in that client's own colour. */
  background:
    radial-gradient(70% 90% at 20% 0%, color-mix(in srgb, var(--ground) 55%, transparent) 0%, transparent 72%),
    radial-gradient(60% 80% at 90% 100%, color-mix(in srgb, var(--tint) 20%, transparent) 0%, transparent 70%),
    var(--ink-900);
  border-top: 1px solid var(--line-dark);
}
/* Fallback for engines without color-mix(). */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .wproj { background: var(--ink-900); }
}
.wproj__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
.wproj__idx { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; color: var(--tint); display: block; margin-bottom: var(--s-4); }
.wproj__kind {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--s-3);
}
.wproj__name { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -.03em; margin-bottom: var(--s-4); }
.wproj__head {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tint);
  margin-bottom: var(--s-5);
  max-width: 24ch;
}
.wproj__body { color: var(--on-dark-mute); margin-bottom: var(--s-5); }
.wproj__tags { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wproj__tags li {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-dark2);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--on-dark-mute);
}
.wproj__shot img {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark2);
  box-shadow: 0 30px 80px -34px var(--tint);
}
@media (min-width: 1000px) {
  .wproj__in { grid-template-columns: .82fr 1.18fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .wproj:nth-of-type(even) .wproj__copy { order: 2; }
  .wproj:nth-of-type(even) .wproj__shot { order: 1; }
  .wproj:nth-of-type(even) .wproj__in { grid-template-columns: 1.18fr .82fr; }
}
.wp-note h2 { margin-bottom: var(--s-5); }

/* ==========================================================================
   §32  CASE STUDIES — shared scaffold, per-project art direction
   ========================================================================== */
.cs-hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.cs-hero__kind {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tint);
  margin: var(--s-6) 0 var(--s-4);
}
.cs-hero__h1 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); letter-spacing: -.035em; margin-bottom: var(--s-4); }
.cs-hero__h1--big { font-size: clamp(3rem, 11vw, 8rem); line-height: .9; margin-bottom: var(--s-5); }
.cs-red { color: var(--tint); }
.cs-hero__line {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--on-dark-mute);
  max-width: 30ch;
  margin-bottom: var(--s-6);
}
.cs-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-sm);
  color: var(--on-dark-mute);
  max-width: 44rem;
}
.cs-hero__url { color: var(--tint); text-decoration: underline; text-underline-offset: .2em; }
.cs-hero__shot { margin-top: clamp(2rem, 4vw, 3.5rem); }
.cs-hero__shot img {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark2);
  box-shadow: 0 36px 90px -40px var(--tint);
  width: 100%; margin-inline: auto;
}
.cs-hero__shot--bleed img { border-radius: var(--r-md); }

/* Per-project hero grounds. Three genuinely different worlds. */
.cs-hero--lucy {
  background:
    radial-gradient(70% 80% at 50% 0%, #16264A 0%, transparent 72%),
    linear-gradient(180deg, #101B33 0%, var(--ink-900) 78%);
  text-align: center;
}
.cs-hero--lucy .cs-hero__plate { max-width: 46rem; margin-inline: auto; }
.cs-hero--lucy .cs-hero__line { margin-inline: auto; }
.cs-hero--lucy .cs-hero__meta { justify-content: center; margin-inline: auto; }
.cs-hero--lucy .crumb ol { justify-content: center; }

.cs-hero--lily {
  background:
    radial-gradient(60% 70% at 78% 8%, rgba(255,43,61,.22) 0%, transparent 70%),
    radial-gradient(50% 60% at 12% 40%, rgba(107,63,212,.22) 0%, transparent 72%),
    #08080C;
}

.cs-hero--dusty {
  background:
    radial-gradient(80% 90% at 50% 0%, #3E86BE 0%, transparent 70%),
    linear-gradient(180deg, #2C6C9E 0%, var(--ink-900) 76%);
}
.cs-hero--dusty .cs-hero__dustyplate { max-width: 44rem; }

/* Body scaffold — a label column and a content column. */
.cs-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.cs-label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin: 0;
}
.cs-label--tint { color: var(--tint); }
.band--light .cs-label { color: var(--on-light-mute); }
.cs-h2 { font-size: var(--t-lg); margin-bottom: var(--s-5); }
@media (min-width: 900px) {
  .cs-grid { grid-template-columns: 13rem 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .cs-grid__side { position: sticky; top: 7rem; }
}

/* Architecture diagram */
.cs-map { margin: var(--s-7) 0 0; }
.cs-map__row { display: grid; gap: var(--s-4); align-items: center; grid-template-columns: 1fr; }
.cs-map__root {
  display: block;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--tint);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  text-align: center;
  white-space: nowrap;
}
.cs-map__arm { display: none; }
.cs-map__kids { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cs-map__kids span {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-dark2);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--on-dark-mute);
}
.cs-map figcaption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--on-dark-mute); }
/* The cs-map surface is decided by the BAND it sits in (the .band--light rules
   below), never by a hand-set modifier on the figure. A .cs-map--light on a
   dark band produced 2.67:1 text on work/dustywalks77 (QA, pre-production).
   Do not reintroduce a surface modifier here. */
.band--light .cs-map .cs-map__kids span { border-color: var(--line-light2); color: var(--on-light-mute); }
.band--light .cs-map figcaption { color: var(--on-light-mute); }
@media (min-width: 700px) {
  .cs-map__row { grid-template-columns: auto 24px 1fr; }
  .cs-map__arm { display: block; height: 1px; background: var(--line-dark2); }
  .band--light .cs-map__arm { background: var(--line-light2); }
}

.cs-swatches { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.cs-swatches span {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-dark2);
}
.band--light .cs-swatches span { border-color: var(--line-light2); }

.cs-shots__h { margin-bottom: var(--s-7); }
.cs-shot { margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.cs-shot img {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark2);
  margin-inline: auto;
  width: 100%; max-width: 1100px;
}
.cs-shot figcaption {
  margin: var(--s-4) auto 0;
  max-width: 1100px;
  font-size: var(--t-sm);
  color: var(--on-dark-mute);
}

.cs-feats { display: grid; gap: var(--s-6); grid-template-columns: 1fr; margin-top: var(--s-7); }
.cs-feats h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-4); color: var(--tint); }
@media (min-width: 760px) { .cs-feats { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }

.cs-result__row { margin-top: var(--s-7); }

/* ==========================================================================
   §33  WEBSITE CARE — two-tier editorial split
   ========================================================================== */
.wc-hero__h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); margin: var(--s-4) 0 var(--s-6); }
/* REVISED (redesign): the opening's second beat — a short standalone line
   rather than a second paragraph, so the section reads as two beats and
   closes on a line that hands off to the tiers instead of repeating the
   hero's own claim a second time. */
.wc-hero__hand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--on-dark);
  margin-top: var(--s-5);
}

/* TWO TIERS, ONE CARD SYSTEM.
   Same shell, same padding, same grid, same price alignment. Essentials is a
   complete contained panel — it does not float on a flat expanse. White Glove
   leads through a gradient edge, a restrained glow and a fractionally larger
   figure, not through a different shape. */
.wct {
  position: relative;
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
  overflow: hidden;
}
.wct + .wct { margin-top: var(--s-6); }

/* REVISED (redesign): Essentials carried this class before with no rule
   behind it — it rendered as a plain, undifferentiated panel. Gives it the
   same restrained-wash language already approved on the homepage's
   .cpanel--quiet, written here as its own page-local rule rather than a
   shared class: Website Care and the homepage each own their composition. */
.wct--quiet {
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(123,63,228,.08) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
}
.wct--quiet::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(169,125,240,.55), rgba(169,125,240,.06));
}

.wct--lead {
  border-color: var(--line-brand);
  box-shadow: var(--shadow-brand);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(123,63,228,.20) 0%, transparent 60%),
    radial-gradient(70% 110% at 100% 100%, rgba(255,59,59,.10) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-750) 0%, var(--ink-900) 100%);
}
.wct--lead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-edge);
}
.wct h3, .wct h4 { color: var(--on-dark); }
.wct p { color: var(--on-dark-body); }
.wct .ticks li::before { border-color: var(--purple-lt); }
.wct--lead .wct__price { color: var(--on-dark); font-size: clamp(2.125rem, 4.4vw, 3.25rem); }
.wct__tier {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-meta);
  margin: 0 0 var(--s-4);
}
.wct__tier--lead { color: var(--purple-lt); }
.wct__name { font-size: var(--t-lg); margin-bottom: var(--s-4); }
.wct__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0 0 var(--s-4);
}
.wct__price span { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0; color: var(--on-dark-meta); }
/* "Starting at" sits on its own line so the figure never wraps mid-price. */
.wct__from { display: block; margin-bottom: var(--s-2); }
.wct__line { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -.01em; margin: 0; }
.wct__line--lead { color: var(--purple-lt) !important; }
.wct__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr; margin-top: var(--s-6); }
.wct__cols h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-4); }
@media (min-width: 780px)  { .wct { grid-template-columns: 16rem 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } }
@media (min-width: 980px)  { .wct__cols { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

/* HISTORY — the first glove attempt used the full atmospheric master photo
   as a full-bleed panel background (rejected: read as a photograph
   functioning as the UI). Extracting just the gloves from THAT photo was
   also tried and rejected (the atmospheric lighting wasn't a separable
   backdrop, and no matting tool was available — the cutout ghosted and
   haloed). The asset below is different: a properly matted, owner-supplied
   transparent PNG shot specifically for this purpose, not extracted after
   the fact. White Glove itself is the real CSS surface below, on the same
   shell and grid as Essentials — the glove is a small accent on top of it,
   never a replacement for it. */
.wg-deco { position: relative; }
/* The glove sits mostly OUTSIDE .wct--lead's own box (left and below it),
   with just enough overlap for the fingertips to rest on the panel's lower-
   left corner — which is empty atmospheric background at that point (the id
   column's tag/name/price/line sit well above it), so nothing meaningful is
   ever covered. .wct--lead itself keeps overflow:hidden untouched — that's
   what clips its radial-gradient wash and left edge rule to the panel's own
   border-radius; changing it would visibly square off those corners. This
   wrapper gives the image room to extend past the panel without touching
   that property at all. */
.wg-deco__glove {
  position: absolute;
  /* Shifted +42px right of the original clamp(-14px,-1vw,-6px) — same
     responsive shape, moved so the palm/fingers land inside the panel's
     lower-left area rather than mostly outside it; the wrist still clears
     the panel's left edge at every width. Vertical positioning (bottom),
     size and orientation are all untouched. */
  left: clamp(28px, calc(42px - 1vw), 36px);
  /* Measured directly rather than guessed: the tagline sits only 159px
     above the panel's bottom edge once the 3-column feature grid is active
     (>=980px) — tight — but 341-686px away below that, where the feature
     list is still stacked and the panel is much taller. Below 980px this
     value is generous everywhere; solved as a straight line fitting the
     two tight points (1280px -> -67px, 1440px -> -84px) so both the
     tagline above and the next section below clear with margin at every
     required width, not just the two it was tuned against. */
  bottom: clamp(-95px, calc(69px - 10.625vw), -12px);
  /* Sized down ~14% from clamp(190px,19vw,270px) — bottom-anchored, so a
     smaller size clears its own top edge further from the panel's bottom,
     reserving room for the "Already an H7 client?" portal callout added to
     .wct__id above, without moving the glove (and its clearance from the
     section below) at all. */
  width: clamp(163px, 16.3vw, 232px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
}
/* Hidden below the sidebar breakpoint — the panel already reads as complete
   and premium without it, and content stays the only priority on mobile. */
@media (max-width: 779.98px) { .wg-deco__glove { display: none; } }


.wc-why__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .wc-why__in { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.wc-why .panel h3 { font-size: var(--t-md); margin-bottom: var(--s-4); }

/* REVISED (redesign): the limits grid dropped from four panels to three —
   the fourth ("sites H7 did not build") moved into the existing-site
   journey in §4 (see index.php). Scoped to this page only; the shared
   .npanels rule and its --4/--8 modifiers, used elsewhere, are untouched. */
@media (min-width: 900px) { .wc-terms .npanels { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   §34  PAYMENT OPTIONS — ledger aesthetic
   ========================================================================== */
.payp {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
}
.payp + .payp { margin-top: var(--s-6); }
.payp--managed { border-color: var(--line-brand); }
/* Equal weight, different character: the Managed Plan carries the signature
   keyline, the Standard Purchase a neutral one. Neither is scaled up. */
.payp, .payp--managed { position: relative; overflow: hidden; }
.payp::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--line-dark2);
}
.payp--managed::before { background: var(--grad-rule); }
.payp__mark .idx {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-lt);
}
.payp h2 { font-size: var(--t-lg); margin-bottom: var(--s-4); }
.payp h3 { font-size: var(--t-md); margin: var(--s-7) 0 var(--s-4); }
@media (min-width: 860px) { .payp { grid-template-columns: 12rem 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; } }

.ledger { margin: var(--s-5) 0 var(--s-5); }
.ledger > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-dark);
}
.ledger dt {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--on-dark);
}
.ledger dd { margin: 0; font-size: var(--t-sm); color: var(--on-dark-body); }
@media (min-width: 620px) { .ledger > div { grid-template-columns: 14rem 1fr; gap: var(--s-4); align-items: baseline; } }

/* The Managed Plan figure on the payment-options page. */
.mplan__figure--pay {
  background: var(--ink-900);
  border-color: var(--line-dark2);
  margin: var(--s-6) 0;
  max-width: 30rem;
}

.pay-which__fine { margin-top: var(--s-6); }

/* ==========================================================================
   §35  ABOUT — portrait-led editorial
   ========================================================================== */
.ab-hero {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(56% 60% at 16% 26%, rgba(123,63,228,.22) 0%, transparent 70%),
    radial-gradient(46% 50% at 88% 70%, rgba(255,59,59,.14) 0%, transparent 72%),
    var(--ink-900);
}
.ab-hero__in { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; margin-top: var(--s-6); }
.ab-hero__portrait img { width: 100%; max-width: 440px; border-radius: var(--r-xl); background: var(--ink-900); }

/* Compact "why H7" aside — deliberately smaller and plainer than the
   homepage's H7 Story crescendo (§22). No artwork, no card: the H/7
   initials borrow the same restrained colour treatment as the homepage's
   .story__ch letters, in a page-specific class so the two sections stay
   fully decoupled. */
.ab-story__ch { font-family: var(--font-display); font-weight: 800; color: var(--purple-lt); }
.ab-story__ch--red { color: var(--red); }
.ab-hero__sig { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--t-sm); }
.ab-hero__sig strong { display: block; font-family: var(--font-display); font-size: var(--t-body); color: var(--on-dark); }
.ab-hero__sig span { color: var(--on-dark-mute); }
@media (min-width: 900px) { .ab-hero__in { grid-template-columns: .78fr 1.22fr; } }

/* The H7 story composition lives in the shared .story__* block above. */


.ab-how__in { display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: 1fr; }
.ab-how__lede h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
@media (min-width: 950px) {
  .ab-how__in { grid-template-columns: 1fr 1fr; align-items: start; }
  .ab-how__lede { position: sticky; top: 7rem; }
}
.ab-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.ab-steps li { padding-block: var(--s-5); border-top: 1px solid var(--line-dark); margin: 0; }
.ab-steps h3 { font-size: var(--t-md); margin: var(--s-3) 0 var(--s-2); }
.ab-steps p { font-size: var(--t-sm); color: var(--on-dark-mute); margin: 0; }

/* ==========================================================================
   §36  START A PROJECT — one continuous, open conversation.

   REVISED: the original five fieldsets were each a bordered, radial-gradient
   "dimensional surface" card — visually correct for genuinely modular
   content (service tiers, pricing rungs) but wrong here, where the form is
   one task, not five. Owner feedback on the live production page (which
   uses no card treatment at all) confirmed the boxed framing was making a
   single short form feel like five separate ones to clear. Sections are now
   separated by a plain top rule and a small numbered label — spacing,
   typography and restrained colour carry the hierarchy instead of borders
   and glow. .sp-wrap gives the hero, form and closing note one comfortable
   ~740px measure instead of the old 860px column, so desktop reads as an
   intentional composition rather than a stretched mobile form.
   ========================================================================== */
.sp-hero {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(123,63,228,.20) 0%, transparent 70%),
    var(--ink-900);
}
.sp-wrap { max-width: 740px; }

.sp-set {
  margin: 0 0 var(--s-7);
  padding-top: var(--s-7);
  /* <fieldset> carries a UA-default border on all four sides (a visible
     grey groove) — border-top alone only overrides the top edge, leaving
     the browser default showing as unintended vertical rails down the
     left/right. Zero it explicitly, then apply only the deliberate rule. */
  border: 0;
  border-top: 1px solid var(--line-dark);
}
.sp-set:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.sp-legend {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--on-dark);
}
.sp-legend .idx { color: var(--purple-lt); font-size: var(--t-sm); }

/* The submission moment stays part of the same flow — a rule and generous
   space give it weight, not a card. */
.sp-submit {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-dark);
}
.sp-submit .btn { min-width: min(100%, 22rem); }
.sp-submit .fine { margin-top: var(--s-5); max-width: 56ch; }
.sp-alt { margin-top: var(--s-7); font-size: var(--t-sm); color: var(--on-dark-mute); }

/* Closing reassurance, after the form. Same numbered-step language already
   used elsewhere on the site (see .rc__steps), scoped to this page. */
.sp-next__steps { list-style: none; margin: var(--s-7) 0 0; padding: 0; }
.sp-next__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-dark);
  margin: 0;
}
.sp-next__steps .idx { padding-top: .2em; }
.sp-next__steps h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.sp-next__steps p { font-size: var(--t-sm); color: var(--on-dark-mute); margin: 0; }

/* ==========================================================================
   §37  RECEIVED / 404 / LEGAL
   ========================================================================== */
.rc-band {
  min-height: 60vh;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(123,63,228,.22) 0%, transparent 70%),
    var(--ink-900);
}
.rc__h1 { font-size: clamp(2.5rem, 7vw, 5rem); margin: var(--s-4) 0 var(--s-6); }
.rc__steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; }
.rc__steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line-dark); margin: 0; }
.rc__n { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--purple-lt); }
.rc__steps h2 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.rc__steps p { font-size: var(--t-sm); color: var(--on-dark-mute); margin: 0; }
.rc__fine { margin-top: var(--s-7); }
.rc__row { margin-top: var(--s-7); }

.nf {
  min-height: 66vh;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(255,59,59,.16) 0%, transparent 70%),
    var(--ink-900);
}
.nf__h1 { font-size: clamp(2.5rem, 7vw, 5rem); margin: var(--s-4) 0 var(--s-6); }
.nf__links { list-style: none; margin: var(--s-8) 0; padding: 0; }
.nf__links li { margin: 0; border-top: 1px solid var(--line-dark); }
.nf__links li:last-child { border-bottom: 1px solid var(--line-dark); }
.nf__links a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  min-height: 64px;
  padding-block: var(--s-4);
  text-decoration: none;
  color: var(--on-dark);
  transition: color var(--dur-fast) var(--ease);
}
.nf__links a:hover { color: var(--purple-lt); }
.nf__links strong { font-family: var(--font-display); font-size: var(--t-md); }
.nf__links span { font-size: var(--t-sm); color: var(--on-dark-mute); }

.lg-hero h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
.lg-date { font-size: var(--t-sm); color: var(--on-dark-meta); }
.lg-body .prose p, .lg-body .prose li { font-size: var(--t-sm); line-height: 1.75; }
.lg-body code {
  font-family: var(--font-mono);
  font-size: .875em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--paper-alt);
}
.lg-next { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-light); }

/* ==========================================================================
   §38  PRINT
   ========================================================================== */
@media print {
  .hdr, .mnav, .ftr, .skip, .btn-row, .endcta { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1rem; background: #fff !important; color: #000 !important; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* --- Case study: the whole page, in a browser frame ---------------------- */
.csfull { margin: 0 auto clamp(2rem, 4vw, 3.5rem); max-width: 900px; }
.csfull__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--ink-700);
  border: 1px solid var(--line-dark2);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.csfull__chrome span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-dark2); flex: none; }
.csfull__chrome p {
  margin: 0 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--on-dark-mute);
}
/* The tall screenshot scrolls INSIDE this frame. The page body never does. */
.csfull__scroll {
  height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-dark2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--ink-800);
}
.csfull__scroll:focus-visible { outline: 2px solid var(--purple-lt); outline-offset: 2px; }
.csfull__scroll img { width: 100%; height: auto; display: block; }
.csfull figcaption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--on-dark-mute); text-align: center; }
.band--light .csfull figcaption { color: var(--on-light-mute); }

/* --- Case-study contrast guard -------------------------------------------
   A client's identity colour is preserved as an accent, but it is not always
   legible as TEXT on a light ground (Lucy's gold is 2.2:1 on warm paper).
   On light case-study sections the heading reverts to the readable value and
   the tint moves to a keyline, so the client's colour is still present. */
.band--light .cs-feats h3,
.band--warm  .cs-feats h3 {
  color: var(--on-light);
  padding-left: var(--s-3);
  border-left: 3px solid var(--tint);
}