/* ============================================================================
   Storage Valet website: V8 Patina (ratified 2026-09-24).
   Built from the V8 home project/theme.css + project/tokens/ (rulings.css,
   patterns.css). V8 primitive names and semantic roles only.
   Light first: White page, Bone tint layer, ONE Onyx band (the offer).
   Founder tone ruling 2026-09-25: gold is an accent, navy and patina lead. Gilt is the signup action and nothing else. Patina confirms, in at
   most three moments per page. Square = act, round = state.
   Every page links this file; it is the site's only stylesheet.
   ============================================================================ */

/* Fonts: self-hosted, as the ratified system ships them (theme.css) */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Outfit.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/DMSerifDisplay.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/DMSerifDisplayItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/JetBrainsMono-2026-09-28.woff2') format('woff2'); }

:root {
  /* Primitive palette (V8) */
  --color-onyx: #070d16;
  --color-ink-navy: #0e1a2b;
  --color-harbor: #16283f;
  --color-brass: #c9a15c;
  --color-antique: #8a6a33;
  --color-bronze: #6b4e26;
  --color-gilt: #e3b968;
  --color-white-pure: #ffffff;
  --color-champagne: #efe2c2;
  --color-alabaster: #f7f2e8;
  --color-bone: #fcf9f2;
  --color-parchment: #ede4d3;
  --color-ash: #b8bfc9;
  --color-graphite: #33353a;
  --color-verdigris: #436c54;
  --color-pale-patina: #b0e2d0;

  /* Functional */
  --color-warning: #c2761f;
  --color-error: #b0453f;
  --color-cta: var(--color-gilt);
  --color-cta-text: var(--color-onyx);
  --color-cta-hover: color-mix(in oklab, var(--color-gilt) 80%, white);
  --color-cta-press: color-mix(in oklab, var(--color-gilt) 94%, var(--color-onyx));

  /* Semantic roles: light master (R1, R7) */
  --color-page: var(--color-white-pure);
  --color-surface: var(--color-white-pure);
  /* Tone pass 9/25: the tint layer is Bone (was Alabaster), so fields, the
     footer and notes sit on the lightest tint and cream never leads. */
  --color-elevated: var(--color-bone);
  --color-band: var(--color-bone);
  /* Hover and press fills, chart tracks: a Harbor Navy wash, not a cream one */
  --color-wash: rgb(22 40 63 / 0.08);
  --color-selected: var(--color-parchment);
  --color-ink: var(--color-ink-navy);
  --color-body: var(--color-graphite);
  --color-muted: color-mix(in srgb, var(--color-graphite) 88%, transparent);
  --color-accent: var(--color-harbor);
  --color-eyebrow: var(--color-harbor);
  --color-line: rgb(14 26 43 / 0.14);
  --color-line-strong: rgb(14 26 43 / 0.24);
  --color-cta-border: var(--color-ink-navy);
  --color-secondary-edge: var(--color-ink-navy);
  /* Tone pass 9/25: ornament icons are navy, not Antique Brass */
  --color-decor: var(--color-harbor);
  --color-accent-ink: var(--color-ink-navy);
  --color-info: var(--color-bronze);
  --color-patina: var(--color-verdigris);
  --color-success: var(--color-patina);
  --color-error-text: #8f2e2e;
  --color-control-border: rgb(14 26 43 / 0.50);
  --color-focus-ring: var(--color-harbor);

  /* Type */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-display: clamp(44px, 3.15vw + 31.7px, 72px);
  --text-h1: clamp(36px, 1.35vw + 30.74px, 48px);
  --text-h2: clamp(32px, 0.9vw + 28.5px, 40px);
  --text-h3: 1.5rem;
  --text-title: 1.125rem;
  --text-lead: 1.25rem;
  --text-body-lg: 1.0625rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;

  /* Shape (R12) */
  --radius-control: 2px;
  --radius-surface: 4px;
  --radius-media: 0;

  /* Layout */
  --sv-shell-max: 1280px;
  --sv-gutter: clamp(20px, 5.5vw, 56px);
  --sv-col-gap: 24px;
  --sv-section-y: 64px;
  --sv-strip-y: 32px;
  --sv-header-h: 80px;

  /* Motion */
  --dur-press: 120ms;
  --dur-hover: 150ms;
  --dur-disclosure: 200ms;
  --dur-enter: 260ms;
  --dur-reveal: 520ms;
  --dur-stagger: 60ms;
  --dur-sheet: 320ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --press-scale: .97;

  --shadow-sm: 0 1px 2px 0 rgb(3 6 12 / 0.25);
  color-scheme: light;
}
@media (max-width: 1023px) { :root { --sv-section-y: 56px; --sv-col-gap: 16px; --sv-header-h: 64px; } }
@media (max-width: 639px) { :root { --sv-section-y: 48px; --sv-strip-y: 24px; } }

/* The one Onyx band (A2 roles, R10) */
.theme-dark {
  --color-page: var(--color-onyx);
  --color-surface: var(--color-ink-navy);
  --color-elevated: var(--color-harbor);
  --color-band: var(--color-ink-navy);
  --color-wash: var(--color-harbor);
  --color-selected: var(--color-harbor);
  --color-ink: var(--color-champagne);
  --color-body: var(--color-ash);
  --color-muted: color-mix(in srgb, var(--color-ash) 86%, transparent);
  --color-accent: var(--color-brass);
  --color-eyebrow: var(--color-ash);
  --color-line: rgb(239 226 194 / 0.16);
  --color-line-strong: rgb(239 226 194 / 0.28);
  --color-cta-border: transparent;
  --color-secondary-edge: rgb(239 226 194 / 0.6);
  --color-decor: var(--color-ash);
  --color-accent-ink: var(--color-champagne);
  --color-info: var(--color-brass);
  --color-patina: var(--color-pale-patina);
  --color-success: var(--color-patina);
  --color-error-text: #e9a6a0;
  --color-control-border: rgb(239 226 194 / 0.45);
  --color-focus-ring: var(--color-champagne);
  background-color: var(--color-page);
  color: var(--color-body);
  color-scheme: dark;
}

/* ============================================================================
   Base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sv-header-h) + 16px);
}
/* Smooth scrolling only after the first user input (site-v8.js): a fragment
   landing (promo cards send people to /#signup) must be an instant jump, and
   Chrome re-runs that jump after load, so nothing before the visitor's first
   touch, click or key may be an animation. */
html.settled { scroll-behavior: smooth; }
/* A flex column, so a page shorter than the window grows <main> and the footer
   meets the bottom edge instead of leaving a slab of page ground below it. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-page);
  color: var(--color-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}
body > main { flex: 1 0 auto; }
@media (max-width: 639px) { body { font-size: var(--text-body); } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--color-ink); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.01em; }
h4, h5 { font-family: var(--font-sans); font-weight: 600; color: var(--color-ink); margin: 0; }
p { margin: 0; }
em { font-style: italic; }
strong { font-weight: 600; color: var(--color-ink); }
h1 strong, h2 strong, h3 strong { font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* Links (C6): underlined at rest, 1px at a 0.3em offset; 2px on hover */
a { color: var(--color-accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }

/* Focus (C7): one rule, never animated */
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--color-ink-navy); color: var(--color-champagne);
  border-radius: var(--radius-control); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ============================================================================
   Layout
   ============================================================================ */
.container, .sv-shell {
  width: 100%;
  max-width: calc(var(--sv-shell-max) + 2 * var(--sv-gutter));
  margin-inline: auto;
  padding-inline: var(--sv-gutter);
}
/* Narrow reading column, left-aligned to the shell so it lines up with the page hero */
.container.container-narrow > * { max-width: 800px; }
.sv-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sv-col-gap); }
.section, .sv-section { padding-block: var(--sv-section-y); }
.sv-band { background: var(--color-band); }
.sv-rule { border-top: 1px solid var(--color-line); }
.divider { height: 1px; max-width: calc(var(--sv-shell-max)); margin-inline: auto; background: var(--color-line); }
@media (max-width: 1327px) { .divider { margin-inline: var(--sv-gutter); } }
.mb-48 { margin-bottom: 48px; }

/* Type helpers */
.t-eyebrow, .section-eyebrow {
  font-family: var(--font-sans); font-size: var(--text-eyebrow); line-height: 1.3;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-eyebrow);
}
.section-eyebrow { display: block; margin-bottom: 16px; }
.section-eyebrow .line { display: none; }
.t-lead { font-size: var(--text-lead); line-height: 1.5; }
@media (max-width: 639px) { .t-lead, .sv-hero__lead { font-size: 1.125rem; } }
p, li, summary, figcaption { text-wrap: pretty; }

/* ============================================================================
   Wordmark (2F, R8): live type, single ink, italic "Valet" in the same ink
   ============================================================================ */
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo-text, .sv-wordmark {
  font-family: var(--font-display); font-weight: 400; line-height: 1; white-space: nowrap;
  letter-spacing: -0.04em; color: var(--color-ink); text-decoration: none; font-size: 28px;
}
.logo-text span, .sv-wordmark__b { font-style: italic; color: var(--color-ink); }
@media (max-width: 1023px) { .logo-text, .sv-wordmark { font-size: 24px; } }

/* ============================================================================
   Buttons (C1–C5): Gilt, 2px corners, no shadow, no lift. Press scales.
   .btn-secondary is the marketing secondary action: an underlined text link.
   ============================================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-control); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn-primary { background: var(--color-cta); color: var(--color-cta-text); border-color: var(--color-cta-border); }
.btn-primary:active { background: var(--color-cta-press); }
.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-secondary-edge); }
.btn-outline:active { background: var(--color-wash); }
.btn-secondary {
  min-height: 44px; padding: 0; background: none; border: 0; color: var(--color-ink);
  font-size: 16px; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.btn-secondary:active { transform: none; }
/* Long email labels ("Email concierge@...") wrap instead of pushing the page sideways (WCAG 1.4.12).
   Scoped to mailto links: the signup form's .btn-secondary actions keep nowrap. */
a.btn-secondary[href^='mailto:'] { white-space: normal; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--color-cta-hover); }
  .btn-outline:hover { background: var(--color-wash); }
  .btn-secondary:hover { text-decoration-thickness: 2px; }
}
.btn:disabled {
  pointer-events: none; background: var(--color-elevated); border-color: var(--color-line);
  color: color-mix(in srgb, var(--color-ink) 60%, transparent);
}
.btn[aria-busy='true'] { cursor: progress; pointer-events: none; }
.btn[aria-busy='true'] > .btn__label { visibility: hidden; }
.btn__spinner { position: absolute; inset: 0; display: none; place-items: center; }
.btn[aria-busy='true'] > .btn__spinner { display: grid; }
.cta-arrow { display: none; }
.btn__arrow { flex: none; width: 16px; height: 16px; }

/* ============================================================================
   Header (E6, I1): 80px sticky on the page ground with a 1px rule.
   Below 1024: 64px bar, the compact Gilt action stays, and a "Menu" text
   button opens an in-page panel that pushes the page down (no overlay).
   ============================================================================ */
.header { position: sticky; top: 0; z-index: 40; background: var(--color-page); border-bottom: 1px solid var(--color-line); }
.header-inner { height: var(--sv-header-h); display: flex; align-items: center; gap: 32px; }
.header .logo { margin-right: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-ink); font-size: 15px; font-weight: 500; line-height: 1.3;
  text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.nav-link[aria-current='page'] { font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { text-decoration-line: underline; } }
#header-cta { flex: none; }
.mobile-menu-btn {
  display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 6px; border: 0; border-radius: var(--radius-control); background: transparent;
  flex: none; color: var(--color-ink); font: 500 16px/1 var(--font-sans); cursor: pointer;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .mobile-menu-btn:hover { background: var(--color-wash); } }
.mobile-menu-btn, .nav-link, .footer-nav a, .site-menu nav a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (max-width: 1023px) {
  .header-inner { gap: 12px; }
  .nav { display: none; }
  .mobile-menu-btn { display: inline-flex; }
}
/* Phones (I1): the compact Gilt action stays in the bar beside the wordmark
   and "Menu", tightened to fit one line (44px tall targets throughout). Below
   390 the wordmark takes its 22px minimum; below 360 the three cannot share one
   line, so the action steps out and the Menu panel's Gilt action stands in. */
@media (max-width: 639px) {
  .header-inner { gap: 8px; }
  #header-cta { padding-inline: 12px; }
  .mobile-menu-btn { padding: 0; }
}
@media (max-width: 389px) {
  .header .logo-text { font-size: 22px; }
  #header-cta { padding-inline: 10px; }
}
@media (max-width: 359px) { #header-cta { display: none; } }

/* Menu panel (I1): inside the header, under the bar. Esc closes (site-v8.js). */
.site-menu { padding-bottom: 24px; }
.site-menu[hidden] { display: none; }
/* 400% zoom and short landscape screens (WCAG 1.4.10): the open panel scrolls
   inside itself, so the sticky header never holds links below the fold. The top
   and scroll padding keep each focus ring inside the scrollport. */
@media (max-height: 560px) {
  .site-menu:not([hidden]) {
    max-height: calc(100vh - var(--sv-header-h) - 1px); max-height: calc(100dvh - var(--sv-header-h) - 1px);
    overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; scroll-padding-block: 8px;
  }
}
.site-menu nav { display: flex; flex-direction: column; }
.site-menu nav a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--color-line);
  color: var(--color-ink); font: 500 20px/1.3 var(--font-sans); text-decoration: none;
}
.site-menu nav a[aria-current='page'] { font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-menu nav a:active { background: var(--color-wash); }
.site-menu > .btn { width: 100%; min-height: 56px; font-size: 16px; margin-top: 24px; }
.site-menu:not([hidden]) { animation: sv-fade-in var(--dur-disclosure) ease both; }
@media (min-width: 1024px) { .site-menu { display: none; } }

/* ============================================================================
   Landing: hero split (E1, D1, D5)
   ============================================================================ */
.sv-hero { padding-block: 48px; }
.sv-hero .sv-grid-12 { align-items: center; }
.sv-split-hero__copy { grid-column: 1 / span 5; }
.sv-split-hero__media { grid-column: 7 / span 6; }
/* 1024-1279: the display headline is near full size while five columns are
   only about 366-431px wide, so short headlines broke into 3-4 lines. Six
   columns hold them on two; the media keeps 7-12. Heroes with a photograph
   (home, Advance Realty) already held their lines and keep column 6 as the
   breathing room between the copy and the picture. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sv-hero:not(.sv-hero--text):not(:has([data-hero-media='photo'])) .sv-split-hero__copy { grid-column: 1 / span 6; }
}
.sv-hero h1 { margin-top: 16px; font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.025em; }
.sv-hero h1 em { color: var(--color-accent-ink); letter-spacing: -0.01em; }
.sv-hero__lead { margin-top: 24px; max-width: 36ch; font-size: var(--text-lead); line-height: 1.5; }
.sv-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; }
.sv-hero__terms { margin-top: 16px; font-size: 15px; line-height: 1.5; }
.sv-hero__media { aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: var(--radius-media); background: var(--color-elevated); }
.sv-hero__media picture, .sv-hero__media img { display: block; width: 100%; height: 100%; }
.sv-hero__media img { object-fit: cover; }

/* Media (B3, K3): square corners, fixed ratio. A placeholder is a flat
   Bone block with a small caption, never an off-palette photograph. */
.sv-media { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--color-elevated); aspect-ratio: 4 / 3; }
.sv-media__placeholder { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; padding: 16px; color: var(--color-body); font-size: var(--text-small); line-height: 1.5; }
.sv-media__placeholder span { max-width: 44ch; margin-inline: auto; }

/* The kit hero: two-line display headline, square media on desktop, 4:3 below 1024.
   Photo slots (every page): the figure holds the photograph and the rule K
   placeholder, and data-hero-media on the figure picks one ("photo" or
   "placeholder"). A slot with no approved photograph yet carries only the
   placeholder. The caption sits below, never over the image (B3). */
.sv-hero h1 > span { display: block; }
.sv-hero .sv-hero__media { aspect-ratio: 1; }
.sv-hero__figure, .sv-figure { margin: 0; min-width: 0; }
.sv-hero__figure img { object-position: 50% 70%; }
.sv-figure picture, .sv-figure img { display: block; width: 100%; height: 100%; }
.sv-figure img { object-fit: cover; }
.sv-hero__caption, .sv-caption { margin-top: 12px; font-size: var(--text-small); line-height: 1.5; color: var(--color-body); }
[data-hero-media='photo'] .sv-media__placeholder,
[data-hero-media='placeholder'] picture,
[data-hero-media='placeholder'] figcaption { display: none; }

/* Text-only hero (.sv-hero--text): a hero that ships no photograph yet spans
   the full shell from 1024 up, so columns 7-12 never sit empty. The eyebrow and
   headline take columns 1-6; the lead, actions and terms stack in 7-12 beside
   the headline, on the home photo's column line. Markup order is unchanged, so
   the entrance stagger and the stacking below 1024 are untouched; without
   subgrid the page keeps the split layout. Remove the modifier when a
   photograph ships, or the copy and the figure share columns 7-12. */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 1024px) {
    .sv-hero--text .sv-split-hero__copy { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; }
    .sv-hero--text .sv-split-hero__copy > .t-eyebrow { grid-column: 1 / span 6; grid-row: 1; }
    .sv-hero--text .sv-split-hero__copy > h1 { grid-column: 1 / span 6; grid-row: 2 / span 3; }
    .sv-hero--text .sv-split-hero__copy > .sv-hero__lead,
    .sv-hero--text .sv-split-hero__copy > .sv-hero__actions,
    .sv-hero--text .sv-split-hero__copy > .sv-hero__terms { grid-column: 7 / span 6; }
    .sv-hero--text .sv-split-hero__copy > .sv-hero__lead { grid-row: 2; margin-top: 16px; max-width: 44ch; }
    .sv-hero--text .sv-split-hero__copy > .sv-hero__actions { grid-row: 3; }
    .sv-hero--text .sv-split-hero__copy > .sv-hero__terms { grid-row: 4; }
  }
}

/* Proof strip (E7). Patina moment: the signature word "Storage", upright */
.sv-proof { border-top: 1px solid var(--color-line); padding-block: var(--sv-strip-y); }
.sv-proof .sv-grid-12 { align-items: center; }
.sv-proof__title { grid-column: 1 / span 6; font: 400 28px/1.2 var(--font-display); color: var(--color-ink); letter-spacing: -0.02em; text-wrap: balance; }
.sv-proof__word { color: var(--color-patina); font-style: normal; }
.sv-proof__facts { grid-column: 8 / span 5; font-size: 16px; }

/* Split section head / body (E2) */
.sv-split-section__head { grid-column: 1 / span 4; }
.sv-split-section__body { grid-column: 6 / span 7; min-width: 0; }
.sv-split-section__body > p { max-width: 60ch; }
.sv-mk-section__intro { margin-top: 24px; max-width: 34ch; }

/* Process band. Patina moment: the numeral sequence and its rule. Tone pass
   9/25: numerals at 44px (36 on phones) and the step rules in a patina tint, so
   the sequence reads as one patina unit rather than a single accent line. */
.sv-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-patina); }
.sv-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: first baseline; padding-block: 24px; border-bottom: 1px solid color-mix(in srgb, var(--color-patina) 32%, transparent); }
.sv-step:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-step__n { color: var(--color-patina); font: 400 44px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.sv-step h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.01em; }
.sv-step p { margin-top: 8px; max-width: 52ch; }

/* The one Onyx band, offer only (E3, E8). Patina moment: checks + divider.
   Tone pass 9/25: 20px checks, and the inclusion rules take a patina tint so
   checks, frame and rules read as one reassurance unit. Text stays in ink. */
.sv-offer .sv-grid-12 { align-items: center; }
.sv-offer h2 { margin-top: 16px; }
.sv-offer h2 em { font-style: italic; letter-spacing: -0.01em; color: var(--color-accent-ink); }
.sv-split-offer__copy { grid-column: 1 / span 6; }
.sv-split-offer__aside { grid-column: 8 / span 5; }
.sv-offer__copy h2 + p { margin-top: 24px; }
.sv-offer__copy p + p { margin-top: 12px; }
.sv-offer__copy > p:not(.t-eyebrow) { max-width: 36ch; }
.sv-offer__aside { padding-left: 32px; border-left: 1px solid var(--color-patina); }
.sv-offer__comp { font: 500 16px/1.4 var(--font-sans); color: var(--color-ink); }
.sv-offer__price { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; color: var(--color-ink); }
.sv-offer__price strong { font: 400 clamp(56px, 1.8vw + 49px, 72px)/1 var(--font-display); letter-spacing: -0.025em; color: var(--color-ink); }
.sv-offer__price span { font-size: 16px; }
.sv-incl { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid color-mix(in srgb, var(--color-patina) 32%, transparent); }
.sv-incl li { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-patina) 32%, transparent); font-size: 16px; line-height: 1.45; color: var(--color-ink); }
.sv-incl__check { flex: none; width: 20px; height: 20px; color: var(--color-patina); }
.sv-offer__aside .btn { margin-top: 24px; }

/* Offer band on a partner page: text links in place of the Gilt action */
.sv-offer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 16px; }
.sv-offer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.sv-offer__aside .btn-secondary { margin-top: 16px; }

/* Rows (E2 body): a hairline list of short labelled statements, label beside
   the text from 640px, stacked on phones. No icons, no cards. */
.sv-rows { margin: 0; border-top: 1px solid var(--color-line); }
.sv-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--sv-col-gap); padding-block: 20px; border-bottom: 1px solid var(--color-line); }
.sv-row dt { font: 600 var(--text-title)/1.4 var(--font-sans); color: var(--color-ink); }
.sv-row dd { margin: 0; font-size: 16px; line-height: 1.6; max-width: 56ch; }
@media (max-width: 639px) { .sv-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } }

/* Head-column photo slot (partner page): square on desktop, 4:3 below 1024 */
.sv-head-media { margin-top: 32px; aspect-ratio: 1; }

/* Page index (FAQ, legal): an "On this page" list in the hero's right columns.
   Rows follow the menu panel (I1): 56px, a hairline between rows, ink text. */
.sv-toc { align-self: center; }
.sv-toc__title { font-size: var(--text-small); font-weight: 600; color: var(--color-ink); padding-bottom: 12px; }
.sv-toc ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.sv-toc li { border-bottom: 1px solid var(--color-line); }
.sv-toc a { display: flex; align-items: center; min-height: 56px; color: var(--color-ink); font: 500 18px/1.3 var(--font-sans); text-decoration: none; transition: color var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) { .sv-toc a:hover { color: var(--color-accent); text-decoration-line: underline; } }

/* Service area (FAQ): the place names as a plain list in the row pattern (R9: no ticker). */
.sv-area__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sv-col-gap); }
.sv-area__list li { break-inside: avoid; padding-block: 2px; }
@media (min-width: 640px) { .sv-area__list { columns: 3; } }
.sv-area__faq { margin-top: 48px; }

/* ============================================================================
   Disclosure / FAQ (G5, E9): an SVG plus whose vertical bar folds into a minus;
   the body height animates (progressive: ::details-content, Chrome 131+)
   ============================================================================ */
.sv-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--color-line); interpolate-size: allow-keywords; }
.sv-accordion details { border-bottom: 1px solid var(--color-line); }
.sv-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding-block: 18px; cursor: pointer; list-style: none;
  font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--color-ink);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color var(--dur-hover) ease;
}
.sv-accordion summary::-webkit-details-marker { display: none; }
.sv-pm { flex: none; width: 18px; height: 18px; color: var(--color-ink); transition: color var(--dur-hover) ease; }
.sv-pm path { transform-box: fill-box; transform-origin: center; }
.sv-pm .sv-pm__v { transition: transform var(--dur-disclosure) var(--ease-in-out); }
.sv-accordion details[open] .sv-pm__v { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .sv-accordion summary:hover { color: var(--color-accent); }
  .sv-accordion summary:hover .sv-pm { color: var(--color-decor); }
}
.sv-accordion details::details-content {
  height: 0; overflow: clip;
  transition: height var(--dur-disclosure) var(--ease-out), content-visibility var(--dur-disclosure) allow-discrete;
}
.sv-accordion details[open]::details-content { height: auto; }
.sv-accordion__body { padding: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--color-body); max-width: 62ch; }
.sv-accordion__body p + p, .sv-accordion__body p + ul, .sv-accordion__body ul + p { margin-top: 12px; }
.sv-accordion__body ul { margin: 0; padding-left: 20px; }
@media (max-width: 639px) { .sv-accordion summary { font-size: 17px; } }
.faq-more { margin-top: 16px; }
.faq-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ============================================================================
   Signup form (G6): 2px fields, 50% ink boundary (R2), single focus ring.
   Tone pass 9/25: fields and notes on White (was the cream tint); notes take
   an Ash edge. Fields keep the 50% ink boundary (3.39:1), not Ash (1.85:1),
   so they stay identifiable (WCAG 1.4.11).
   Loading keeps the Gilt fill: the label hides under a spinner (C4).
   ============================================================================ */
.signup-form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-label { font-size: var(--text-small); font-weight: 500; color: var(--color-ink); }
.form-input, .form-select {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-ink);
  font-family: var(--font-sans); font-size: 1rem;
}
.form-input::placeholder { color: var(--color-muted); }
.form-select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.sv-select-wrap { position: relative; }
.sv-select-wrap::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form-input:user-invalid { border-color: var(--color-error); }
#signup-form .form-input[aria-invalid='true'] { border-color: var(--color-error); }
.form-field-error { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--color-error-text); }
.form-field-error[hidden] { display: none; }
textarea.form-input { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.form-optional { font-weight: 400; color: var(--color-body); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; }
.form-success h3 { margin-top: 16px; }
.form-success p { margin-top: 8px; font-size: 16px; }
.form-success__icon { width: 40px; height: 40px; color: var(--color-ink); }
.form-success__icon svg { width: 100%; height: 100%; }
html.js .form-expanded {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-sheet) var(--ease-out);
}
html.js .form-expanded > .form-expanded-inner { overflow: hidden; min-height: 0; }
html.js .form-expanded:not(.visible) > .form-expanded-inner { visibility: hidden; }
html.js .form-expanded.visible { grid-template-rows: 1fr; }
.form-expanded-inner { display: grid; gap: 20px; }
.form-submit { width: 100%; min-height: 56px; font-size: 16px; }
.form-footer { display: grid; gap: 4px; font-size: var(--text-small); color: var(--color-body); }
.form-footer a { display: inline-block; padding-block: 5px; margin-block: -5px; }
.form-message {
  padding: 14px 16px; border: 1px solid var(--color-ash); border-radius: var(--radius-surface);
  background: var(--color-surface); color: var(--color-ink); font-size: 15px; line-height: 1.5;
}
.form-message:not([hidden]) { animation: sv-fade-in var(--dur-disclosure) ease both; }
.form-message--error { border-color: var(--color-error); }
.form-message--success { border-color: var(--color-line-strong); }
.form-message a { color: var(--color-accent); }
.context-banner {
  margin-bottom: 24px; padding: 14px 16px;
  border: 1px solid var(--color-ash); border-radius: var(--radius-surface);
  background: var(--color-surface); color: var(--color-ink); font-size: 15px; line-height: 1.5;
}
/* The referral banner rewrites its line in place: invisible copies of every
   line it can show share one grid cell, so its height never changes. */
.context-banner--slot { display: grid; }
.context-banner--slot > * { grid-area: 1 / 1; }
.context-banner__sizer { visibility: hidden; }
/* Typed referral code: a quiet disclosure at the end of the contact fields.
   The toggle and Change are underlined text actions (.btn-secondary, 44px),
   never Gilt. Codes set in the self-hosted JetBrains Mono (V8 IDs and codes),
   preloaded (index.html head) only when a code arrives by link, since the
   field otherwise starts closed; an applied code never breaks
   at its hyphen. [hidden] must beat .btn and .form-group display. */
.referral-field { display: grid; gap: 8px; justify-items: start; }
.referral-field[hidden], .referral-field [hidden] { display: none; }
.referral-field__action { justify-content: flex-start; }
.referral-field__applied {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; margin: 0;
  font-size: var(--text-body); color: var(--color-ink);
}
.referral-field__code, .referral-field__input {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.02em;
}
.referral-field__code { white-space: nowrap; }
.referral-field__panel { width: 100%; }
.referral-field__input { max-width: 360px; }
.referral-field__panel:not([hidden]) { animation: sv-fade-in var(--dur-disclosure) ease both; }
.referral-field__input[aria-invalid='true'] { border-color: var(--color-error); }
.referral-field__help { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--color-body); }
/* One slot under the input holds the error or the confirmation. Every child
   shares the same grid cell, and the invisible sizers (the longest lines) set
   the height, so showing, swapping or clearing a message never moves Continue. */
.referral-field__status { display: grid; }
.referral-field__status > * { grid-area: 1 / 1; margin: 0; font-size: var(--text-small); line-height: 1.5; }
.referral-field__sizer { visibility: hidden; }
.referral-field__error { color: var(--color-error-text); }
.referral-field__ok { color: var(--color-ink); }
@media (max-width: 639px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   Footer (E10): brand line, one nav row, legal row, no top rule.
   Tone pass 9/25: a Harbor Navy ground with the dark ink set (Champagne text
   and single-ink wordmark, Ash links, Champagne focus ring). Harbor Navy is
   not Onyx: the offer band stays the page's only Onyx surface.
   ============================================================================ */
.footer {
  --color-ink: var(--color-champagne);
  --color-body: var(--color-champagne);
  --color-accent: var(--color-ash);
  --color-line: rgb(239 226 194 / 0.16);
  --color-focus-ring: var(--color-champagne);
  background: var(--color-harbor);
  color: var(--color-body);
  color-scheme: dark;
}
.footer-in { padding-block: 48px 32px; }
.footer-brand { grid-column: 1 / span 5; }
.footer-brand .logo-text { font-size: 24px; display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand p { margin-top: 12px; font-size: 16px; max-width: 32ch; }
.footer-links { grid-column: 8 / span 5; font-size: 15px; }
.footer-links > p { font-size: 16px; }
.footer-links > .footer-hours { margin-top: 8px; font-size: 15px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); font-weight: 500; text-decoration: none; text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { text-decoration-line: underline; } }
.footer-legal { grid-column: 1 / -1; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.footer-legal span, .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-legal a { color: var(--color-accent); }
@media (max-width: 1023px) { .footer-brand, .footer-links { grid-column: 1 / -1; } .footer-links { margin-top: 24px; } }
@media (max-width: 639px) { .footer-in { padding-block: 40px 28px; } }

/* ============================================================================
   Sub-pages: legal
   ============================================================================ */
/* Legal pages (editorial): hero with eyebrow, title and date; then the document
   under a rule with its index in columns 1-3 (sticky) and the text in 5-12.
   Below 1024 the index folds into one Accordion disclosure above the text. */
.legal-hero { padding-block: 64px 48px; }
.legal-hero__copy { grid-column: 1 / span 8; }
.legal-hero h1 { margin-top: 16px; }
.legal-updated { margin-top: 16px; font-size: 15px; line-height: 1.5; }
.legal-doc .sv-grid-12 { align-items: start; }
/* The 4px padding, offset by a matching negative margin, gives the links' 2px
   focus ring (2px offset) room inside the scroll box, which clips overflow-x;
   the sticky top and max-height absorb it, so the index sits where it did. */
.legal-index {
  grid-column: 1 / span 3; position: sticky; top: calc(var(--sv-header-h) + 28px);
  max-height: calc(100dvh - var(--sv-header-h) - 56px); overflow-y: auto;
  padding: 4px; margin: -4px;
}
.legal-index ul, .legal-index-m ul { list-style: none; margin: 0; padding: 0; }
.legal-index ul { border-top: 1px solid var(--color-line); }
.legal-index li { border-bottom: 1px solid var(--color-line); }
.legal-index a, .legal-index-m a {
  display: flex; align-items: center; min-height: 44px; padding-block: 8px;
  color: var(--color-ink); font-size: 15px; line-height: 1.35; text-decoration: none;
  transition: color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .legal-index a:hover, .legal-index-m a:hover { color: var(--color-accent); text-decoration-line: underline; }
}
.legal-index-m { display: none; }
.legal-content { grid-column: 5 / span 8; min-width: 0; max-width: 72ch; }
.legal-content a { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .legal-hero__copy, .legal-content { grid-column: 1 / -1; }
  .legal-index { display: none; }
  .legal-index-m { display: flex; grid-column: 1 / -1; margin-bottom: 40px; }
  .legal-index-m a { font-size: 16px; }
  /* The disclosure body clips (::details-content), so give the focus ring room
     on the clipping box itself; FAQ accordions are untouched. */
  .legal-index-m details::details-content { padding-inline: 4px; margin-inline: -4px; }
  .legal-index-m .sv-accordion__body { padding-top: 4px; }
}
@media (max-width: 639px) { .legal-hero { padding-block: 40px 32px; } }
.legal-content h2 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--font-sans); font-size: var(--text-title); font-weight: 600; margin: 24px 0 8px; }
.legal-content p, .legal-content ul, .legal-content ol { margin: 0 0 16px; }
.legal-content ul, .legal-content ol { padding-left: 22px; }
.legal-content li + li { margin-top: 6px; }

/* ============================================================================
   Checkout return pages
   ============================================================================ */
.return-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.return-page__top { height: var(--sv-header-h); display: flex; align-items: center; border-bottom: 1px solid var(--color-line); }
.success-page, .canceled-page { padding-block: 56px 64px; }
.success-page .sv-grid-12, .canceled-page .sv-grid-12 { align-items: start; }
.success-card, .canceled-card { grid-column: 1 / span 6; min-width: 0; }
.success-steps, .canceled-offer { grid-column: 8 / span 5; min-width: 0; }
.canceled-page .sv-grid-12 { grid-template-rows: auto 1fr; }
.canceled-offer { grid-row: 1 / span 2; }
.canceled-page .canceled-footer { grid-column: 1 / span 6; grid-row: 2; }
.success-card h1, .canceled-card h1 { margin-top: 20px; }
.success-card > p, .canceled-card > p { margin-top: 16px; font-size: var(--text-lead); line-height: 1.5; }
.success-icon, .canceled-icon { width: 40px; height: 40px; }
.success-icon { color: var(--color-patina); }
.canceled-icon { color: var(--color-decor); }
.success-icon svg, .canceled-icon svg { width: 100%; height: 100%; }
.highlight { font-weight: 600; color: var(--color-ink); }
.success-card > .return-note { font-size: 16px; }
.return-note {
  margin-top: 24px; padding: 14px 16px; border: 1px solid var(--color-success); border-radius: var(--radius-surface);
  background: var(--color-elevated); color: var(--color-ink); font-weight: 500; line-height: 1.5;
}
.return-note span { font-weight: 400; color: var(--color-body); }
.success-steps { border-top: 1px solid var(--color-line); }
.success-steps h2 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.01em; padding-block: 24px 8px; }
.success-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--color-line); }
.success-step-icon { width: 40px; height: 40px; color: var(--color-decor); }
.success-step-icon svg { width: 100%; height: 100%; }
.success-step-text { font-size: 16px; }
.return-fineprint { margin-top: 24px; font-size: var(--text-small); color: var(--color-body); }
.success-footer, .canceled-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-line); display: grid; gap: 4px; font-size: 15px; }
.success-footer a, .canceled-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================================================
   Promo pages (promo/index.html and the generated promo/<slug>.html): the
   landing patterns plus the sample notice, the no-script offer, the deadline
   notes, the property manager toolkit and the not-found state.
   ============================================================================ */
.promo-demo { display: none; background: var(--color-elevated); border-bottom: 1px solid var(--color-line); }
.promo-demo p { padding-block: 12px; font-size: 15px; line-height: 1.5; color: var(--color-ink); }
/* Property names run to 28 characters, so the promo heading takes the H1 size */
.promo-hero h1, .sv-hero--long-title h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.02em; }
.offer-deadline { margin-top: 4px; font: 600 16px/1.4 var(--font-sans); color: var(--color-ink); }
.cta-note { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--color-body); }
.cta-note strong { color: var(--color-ink); }
.sv-offer__aside .cta-note { max-width: 36ch; }
.promo-closing .sv-grid-12 { align-items: center; }
.promo-closing .sv-hero__actions { margin-top: 0; }
.promo-noscript h1 { max-width: 20ch; }
.promo-noscript p { margin-top: 16px; max-width: 60ch; }
.promo-noscript .btn { margin-top: 24px; }
.share-body > .share-note { max-width: none; }
.share-note {
  padding: 14px 16px; border: 1px solid var(--color-ash); border-radius: var(--radius-surface);
  background: var(--color-surface); color: var(--color-ink); font-size: 15px; line-height: 1.5;
}
.snippet-box { margin-top: 24px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-surface); background: var(--color-surface); }
.snippet-box p { font-size: 16px; line-height: 1.6; }
.snippet-box p + p { margin-top: 8px; }
.snippet-box a { overflow-wrap: anywhere; }
.copy-btn { margin-top: 8px; }
.share-divider { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-line); font: 600 var(--text-title)/1.4 var(--font-sans); color: var(--color-ink); }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: 8px; }
.link-url { font-size: 16px; color: var(--color-ink); overflow-wrap: anywhere; }
.qr-section { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.qr-code { flex: none; display: grid; place-items: center; min-width: 96px; min-height: 96px; padding: 6px; background: var(--color-white-pure); border: 1px solid var(--color-line); border-radius: var(--radius-media); }
.qr-code img { width: 84px; height: 84px; }
.qr-fallback { display: none; max-width: 150px; font-size: 14px; line-height: 1.4; }
.qr-fallback strong { word-break: break-all; }
.qr-text { font-size: 15px; line-height: 1.5; }
.assets-email { margin-top: 24px; font-size: 15px; }
.promo-notfound h1 { max-width: 20ch; }
.promo-notfound p { margin-top: 16px; }
.promo-notfound .btn { margin-top: 16px; }
@media (max-width: 639px) { .qr-section { align-items: flex-start; } }

/* ============================================================================
   Postcard explainer pages (hoboken/_template.html, generated into
   <word>.html at the repo root): the landing patterns plus the billing timeline
   rows in the offer band.
   ============================================================================ */
.hbk-when { margin-top: 24px; }

/* ============================================================================
   Partner proposal pages (partnerships/<partner>/index.html): the landing
   patterns plus figures, bar charts, compare cards, the portfolio list and the
   contact block. Charts are data, not ornament: square bars, Ink Navy for
   Storage Valet, Ash for the comparison, every value also written as text.
   ============================================================================ */
.pp-prepared { margin-top: 24px; }
.pp-prepared span { display: block; }
.pp-source { margin-top: 12px; font-size: var(--text-small); line-height: 1.5; color: var(--color-body); }
.sv-split-section__body > .pp-source--block { margin-top: 32px; max-width: none; }

.pp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sv-col-gap); border-top: 1px solid var(--color-line); }
.pp-stat { padding-block: 24px; border-bottom: 1px solid var(--color-line); min-width: 0; }
.pp-stat__num { font: 400 48px/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
.pp-stat__label { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--color-ink); }
.pp-stat__source { margin-top: 6px; font-size: var(--text-small); line-height: 1.5; color: var(--color-body); }

.pp-chart { margin-top: 40px; }
.pp-chart__title { font: 600 var(--text-title)/1.4 var(--font-sans); color: var(--color-ink); }
.pp-chart__subtitle { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.pp-rates { margin-top: 0; }
.pp-supply { display: grid; gap: 12px; margin-top: 16px; }
.pp-supply__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; }
.pp-supply__label { color: var(--color-ink); }
.pp-supply__track { display: block; height: 12px; background: var(--color-wash); border-radius: 0; }
.pp-supply__fill { display: block; height: 100%; background: var(--color-ink-navy); border-radius: 0; }
.pp-supply__value { text-align: right; color: var(--color-ink); font-variant-numeric: tabular-nums; }

.pp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; font-size: 15px; line-height: 1.4; color: var(--color-ink); }
.pp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.pp-legend__key { width: 12px; height: 12px; border-radius: 0; }
.pp-legend__key--industry { background: var(--color-ash); }
.pp-legend__key--sv { background: var(--color-ink-navy); }
.pp-rates__rows { margin-top: 16px; border-top: 1px solid var(--color-line); }
.pp-rates__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--color-line); }
.pp-rates__period { font-size: 15px; line-height: 1.4; color: var(--color-ink); }
.pp-rates__bars { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pp-rates__bar { display: flex; align-items: center; min-height: 28px; padding-inline: 8px; border-radius: 0; font: 500 14px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-rates__bar--industry { background: var(--color-ash); color: var(--color-ink-navy); }
.pp-rates__bar--sv { background: var(--color-ink-navy); color: var(--color-champagne); }

.pp-callout { margin-top: 32px; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-surface); }
.pp-callout__title { font: 600 var(--text-title)/1.4 var(--font-sans); color: var(--color-ink); }
.pp-callout p + p { margin-top: 8px; font-size: 16px; }

.pp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-col-gap); }
.pp-card { min-width: 0; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-surface); }
.pp-card--featured { background: var(--color-surface); border-color: var(--color-ink); }
.pp-card__label { font: 600 var(--text-title)/1.4 var(--font-sans); color: var(--color-ink); }
.pp-card__price { margin-top: 12px; font: 400 40px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
.pp-card__detail { margin-top: 4px; font-size: 15px; }
.pp-card__list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--color-line); }
.pp-card__list li { padding-block: 10px; border-bottom: 1px solid var(--color-line); font-size: 16px; line-height: 1.45; }
.pp-savings { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-line-strong); }
.pp-savings__amount { font: 400 28px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
.pp-savings p + p { margin-top: 8px; }

.pp-offer .sv-grid-12 { align-items: start; }
.pp-offer__h3 { margin-top: 32px; font: 600 var(--text-title)/1.4 var(--font-sans); letter-spacing: 0; color: var(--color-ink); }
.pp-offer__h3--aside { margin-top: 0; }
.pp-offer .sv-incl { margin-top: 12px; }
.pp-plain { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--color-line); max-width: 44ch; }
.pp-plain li { padding-block: 10px; border-bottom: 1px solid var(--color-line); font-size: 16px; line-height: 1.45; }
.pp-offer__terms { margin-top: 20px; font-size: 15px; line-height: 1.5; }

.pp-portfolio { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.pp-portfolio__item { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 6rem; align-items: baseline; gap: 4px 16px; padding-block: 14px; border-bottom: 1px solid var(--color-line); }
.pp-portfolio__building { min-width: 0; }
.pp-portfolio__name { display: block; font: 600 16px/1.4 var(--font-sans); color: var(--color-ink); }
.pp-portfolio__address { display: block; font-size: var(--text-small); line-height: 1.5; }
.pp-portfolio__status { font-size: 15px; line-height: 1.4; }
.pp-portfolio__units { text-align: right; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-split-section__body > .pp-portfolio__total { max-width: none; }
.pp-portfolio__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding-top: 16px; font: 500 16px/1.4 var(--font-sans); color: var(--color-ink); }
.pp-portfolio__total strong { font: 400 28px/1.2 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }

.pp-founder .sv-split-section__body > p + p { margin-top: 16px; }
.pp-glance__title { margin: 48px 0 16px; }

.pp-contact__name { font: 400 var(--text-h3)/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); }
.pp-contact__name strong { font-weight: 400; }
.pp-contact__links { list-style: none; margin: 12px 0 0; padding: 0; }
.pp-contact__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.pp-contact__area { font-size: 16px; line-height: 1.8; }

@media (max-width: 1023px) {
  .pp-founder .pp-glance__title { margin-top: 40px; }
}
@media (max-width: 639px) {
  .pp-stat__num { font-size: 40px; }
  .pp-compare { grid-template-columns: minmax(0, 1fr); }
  .pp-supply__row { grid-template-columns: 6.5rem minmax(0, 1fr) 5rem; gap: 8px; }
  .pp-rates__row { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 8px; }
  .pp-portfolio__item { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-portfolio__building { grid-column: 1; grid-row: 1; }
  .pp-portfolio__units { grid-column: 2; grid-row: 1; }
  .pp-portfolio__status { grid-column: 1; grid-row: 2; font-size: var(--text-small); }
}

/* ============================================================================
   Partnerships: Advance Realty page (partnerships/advance-realty/index.html).
   The ar-* rules on top of the partner proposal patterns above. Tokens only.
   ============================================================================ */
/* What your buildings gain: four statements in a hairline 2x2 grid, one
   column on phones. Type and rules only: no icons, cards or fills. */
.ar-gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: calc(var(--sv-col-gap) * 2); border-top: 1px solid var(--color-line); }
.ar-gain { min-width: 0; padding-block: 24px; border-bottom: 1px solid var(--color-line); }
.ar-gain p { margin-top: 8px; font-size: 16px; line-height: 1.6; max-width: 44ch; }

/* Offer band: three short paragraphs, so the copy column runs a little wider. */
.ar-offer .sv-offer__copy > p:not(.t-eyebrow) { max-width: 40ch; }
/* Keep the programme name on one line on phones. */
.ar-nowrap { white-space: nowrap; }

/* The live member portal, framed by a hairline. Screenshots take 0px corners (R12). */
.ar-shot__frame { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-media); background: var(--color-elevated); }
.ar-shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ar-shot + .sv-rows { margin-top: 32px; }

/* The close: the page's one action, then a direct line to the founder. */
.ar-close { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-line); }
.ar-close .pp-contact__name { margin-top: 28px; }
.ar-close .pp-contact__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }

@media (min-width: 640px) {
  .ar-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-gain { padding-block: 28px; }
}
@media (max-width: 639px) {
  /* Phones: a square crop of the capture's content column, so the item cards read at a legible size.
     52% starts the square just right of the portal's 248px sidebar and holds the first three item columns. */
  .ar-shot__frame { aspect-ratio: 1 / 1; }
  .ar-shot__frame img { object-position: 52% 0; }
  .ar-close .btn-primary { width: 100%; }
}

/* ============================================================================
   Responsive grid collapse (below 1024) and the tablet band (640–1023)
   ============================================================================ */
@media (max-width: 1023px) {
  .sv-split-hero__copy, .sv-split-hero__media, .sv-split-section__head, .sv-split-section__body,
  .sv-split-offer__copy, .sv-split-offer__aside, .sv-proof__title, .sv-proof__facts { grid-column: 1 / -1; }
  .sv-hero .sv-hero__media { aspect-ratio: 4 / 3; margin-top: 32px; }
  .sv-split-section__body { margin-top: 32px; }
  .sv-offer__aside { margin-top: 32px; padding-left: 0; padding-top: 32px; border-left: 0; border-top: 1px solid var(--color-patina); }
  .sv-proof__facts { margin-top: 8px; }
  .sv-head-media { aspect-ratio: 4 / 3; max-width: 640px; }
  .success-card, .canceled-card, .success-steps, .canceled-offer { grid-column: 1 / -1; }
  .success-steps { margin-top: 40px; }
  .canceled-page .sv-grid-12 { grid-template-rows: none; }
  .canceled-offer, .canceled-page .canceled-footer { grid-row: auto; }
  .canceled-page .canceled-footer { grid-column: 1 / -1; }
  .sv-toc { margin-top: 40px; }
}
@media (max-width: 639px) {
  .sv-hero { padding-block: 32px 24px; }
  .sv-hero__media { margin-inline: calc(-1 * var(--sv-gutter)); }
  .sv-hero__actions .btn-primary { width: 100%; }
  .sv-proof__title { font-size: 24px; }
  .sv-step { grid-template-columns: 44px minmax(0, 1fr); }
  .sv-step__n { font-size: 36px; }
  .sv-offer__aside .btn-primary { width: 100%; }
}

/* ============================================================================
   Motion (§4b). The hero entrance is CSS (transform only, from first paint).
   Below-the-fold reveals are set up by site-v8.js only after GSAP loads, and
   only for content below the fold, so nothing is hidden without script.
   Reduced motion: gentler, not zero. No travel, fades at 200ms or less.
   ============================================================================ */
@keyframes sv-fade-in { from { opacity: 0; } }
@keyframes svSpin { to { transform: rotate(360deg); } }
@keyframes sv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.sv-spinner { animation: svSpin .8s linear infinite; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes sv-hero-in { from { transform: translateY(12px); } }
  .sv-hero [data-hero-anim] { animation: sv-hero-in var(--dur-reveal) var(--ease-out) both; }
  .sv-hero [data-hero-anim]:nth-child(2) { animation-delay: calc(var(--dur-stagger) * 1); }
  .sv-hero [data-hero-anim]:nth-child(3) { animation-delay: calc(var(--dur-stagger) * 2); }
  .sv-hero [data-hero-anim]:nth-child(4) { animation-delay: calc(var(--dur-stagger) * 3); }
  .sv-hero [data-hero-anim]:nth-child(5) { animation-delay: calc(var(--dur-stagger) * 4); }
  .sv-hero .sv-split-hero__media[data-hero-anim] { animation-delay: calc(var(--dur-stagger) * 5); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; }
  html.settled { scroll-behavior: auto; }
  .btn:active { transform: none; }
  .sv-pm .sv-pm__v { transition: opacity 200ms ease; }
  .sv-accordion details[open] .sv-pm__v { transform: none; opacity: 0; }
  .sv-accordion details::details-content { transition: none; }
  .sv-spinner { animation: sv-pulse 2.4s ease-in-out infinite; }
  html.js .form-expanded { transition: none; }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .btn { border: 2px solid ButtonText; }
  .mobile-menu-btn { border: 1px solid ButtonText; }
  /* Advance Realty charts: bars and legend keys are drawn by background colour,
     which forced colours removes. Storage Valet is filled, self-storage outlined. */
  .pp-supply__track, .pp-legend__key--industry, .pp-rates__bar--industry { border: 1px solid CanvasText; }
  .pp-supply__fill, .pp-legend__key--sv, .pp-rates__bar--sv { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}