/* =============================================================
   Solutions and Problems LLC, design layer (v1.1)
   Palette: #0B0B0C base, #F5F2EC bone, #B0181E red. No mid grays.
   --sp-red is for graphic use on dark and text use on bone (6.27:1 AA).
   --sp-red-on-dark is for text on dark surfaces (4.62:1 AA).
   Spacing scale: 4 8 12 16 24 32 48 64 96 128 (no others).
   ============================================================= */

:root {
  --sp-base:        #0B0B0C;
  --sp-base-2:      #111114;
  --sp-bone:        #F5F2EC;
  --sp-bone-2:      #EDE8DF;
  --sp-red:         #B0181E;       /* graphic on dark; text on bone */
  --sp-red-on-dark: #E5363D;       /* text on dark, 4.62:1 vs base */
  --sp-white:       #FFFFFF;
  --sp-rule-dark:   rgba(245, 242, 236, 0.12);
  --sp-rule-dark-2: rgba(245, 242, 236, 0.06);
  --sp-rule-dark-strong: rgba(245, 242, 236, 0.32);
  --sp-rule-light:  rgba(11, 11, 12, 0.10);

  --sp-display: "Big Shoulders Display", "Big Shoulders Display Fallback", "Arial Narrow", sans-serif;
  --sp-serif:   "Source Serif 4", "Source Serif 4 Fallback", "Source Serif Pro", Georgia, serif;
  --sp-ui:      "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;

  --sp-track-mono: 0.16em;
  --sp-track-eyebrow: 0.18em;
  --sp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Section-edge rails (Task 15): replace flat 32px with fluid clamp.
     32px floor for mobile, scales with viewport, caps at 96px on wide screens. */
  --sp-rail: clamp(32px, 4vw, 96px);
}

/* Metric-matched fallback faces (Task 13) calibrated to reduce CLS on cold load.
   Values from font-fallback-generator (capsize-based) for size-adjust + ascent-override.
   The fallback face sits behind the real font and renders nearly identical metrics
   so the swap on first paint is invisible. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 100%;
  ascent-override: 99%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Big Shoulders Display Fallback";
  src: local("Impact"), local("Arial Narrow"), local("Arial");
  size-adjust: 70%;
  ascent-override: 122%;
  descent-override: 38%;
  line-gap-override: 0%;
}

/* ---------- Reset surfaces ---------- */

/* P0.1 fix: global border-box reset scoped to design layer.
   Prevents content-box overflow on .sp-hero__inner and any future inner container
   that uses width:100% with padding. Resolves home page horizontal scroll at 375/768/1024/1440. */
body.sp-design,
body.sp-design *,
body.sp-design *::before,
body.sp-design *::after {
  box-sizing: border-box;
}

/* Prevent unbreakable display words from overflowing narrow containers (P0.1 corollary).
   Applies only at <=480 viewport widths where display sizes meet narrow grid tracks. */
@media (max-width: 480px) {
  body.sp-design h1,
  body.sp-design h2,
  body.sp-design h3,
  body.sp-design .sp-positioning p,
  body.sp-design .sp-page-hero h1,
  body.sp-design .sp-band h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

html {
  background: var(--sp-base);
  color: var(--sp-bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link for keyboard users (P2.11). Visible on focus only. */
.sp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--sp-base);
  color: var(--sp-bone);
  /* Task 17: 12px 20px -> 12px 24px (spacing scale). */
  padding: 12px 24px;
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--sp-rule-dark-strong);
}
.sp-skip-link:focus {
  left: 16px;
  top: 16px;
}

body.sp-design {
  background: var(--sp-base);
  color: var(--sp-bone);
  font-family: var(--sp-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
}

body.sp-design .wp-site-blocks { padding-inline: 0 !important; }
body.sp-design main.wp-block-group.has-global-padding,
body.sp-design main.wp-block-group {
  padding-inline: 0 !important;
  max-width: none !important;
}
body.sp-design .entry-content,
body.sp-design .wp-block-post-content {
  max-width: none !important;
  margin: 0 !important;
}

body.sp-design ::selection {
  background: var(--sp-red);
  color: var(--sp-bone);
}

/* P1.2 fix: zero out twentytwentyfive default section/band top margin (19.2px = 1.2em)
   so layout sticks to the documented 4/8/12/16/24/32/48/64/96/128 spacing scale. */
body.sp-design section,
body.sp-design .sp-band,
body.sp-design .sp-credentials,
body.sp-design .sp-section,
body.sp-design .sp-positioning,
body.sp-design .sp-quote,
body.sp-design .sp-page-hero {
  margin-block: 0;
}

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

body.sp-design h1, body.sp-design h2, body.sp-design h3 {
  font-family: var(--sp-display);
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}

body.sp-design h4, body.sp-design h5, body.sp-design h6 {
  font-family: var(--sp-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sp-track-mono);
  font-size: 0.8125rem;
}

body.sp-design .sp-eyebrow {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 0.78;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body.sp-design .sp-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--sp-red-on-dark);
}
body.sp-design .has-bone-background-color .sp-eyebrow,
body.sp-design .sp-section--bone .sp-eyebrow,
body.sp-design .sp-credentials .sp-eyebrow {
  color: var(--sp-base);
  opacity: 0.78;
}
body.sp-design .has-bone-background-color .sp-eyebrow::before,
body.sp-design .sp-section--bone .sp-eyebrow::before,
body.sp-design .sp-credentials .sp-eyebrow::before {
  background: var(--sp-red);
}

body.sp-design p { max-width: 64ch; }

body.sp-design .has-bone-background-color,
body.sp-design .has-bone-background-color p,
body.sp-design .has-bone-background-color h1,
body.sp-design .has-bone-background-color h2,
body.sp-design .has-bone-background-color h3,
body.sp-design .has-bone-background-color h4 {
  color: var(--sp-base);
}

/* Tabular numerals on stat blocks and phone numbers */
body.sp-design .sp-stat__num,
body.sp-design .sp-band__phone,
body.sp-design .sp-contact__phone,
body.sp-design .sp-cred__num,
body.sp-design .sp-service__num,
body.sp-design .sp-service-row__num,
body.sp-design .sp-phone__num {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Header ---------- */

.sp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sp-base);
  border-bottom: 1px solid var(--sp-rule-dark);
  backdrop-filter: saturate(140%) blur(8px);
}

.sp-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding-block: max(env(safe-area-inset-top), 16px) 16px;
  padding-inline: var(--sp-rail);
  max-width: 1440px;
  margin: 0 auto;
}

.sp-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: var(--sp-bone);
  line-height: 1;
}

.sp-mark__glyph {
  font-family: var(--sp-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 0.9;
  display: inline-flex;
  align-items: baseline;
}
.sp-mark__glyph .amp {
  color: var(--sp-red-on-dark);
  margin: 0 1px;
  font-style: italic;
}

.sp-mark__line {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--sp-bone);
  opacity: 0.7;
}

.sp-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.sp-nav a {
  font-family: var(--sp-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-bone);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  transition: color 200ms var(--sp-ease);
}
.sp-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--sp-red-on-dark);
  transition: right 240ms var(--sp-ease);
}
.sp-nav a:hover::after,
.sp-nav a.is-current::after { right: 0; }

.sp-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sp-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--sp-bone);
  text-decoration: none;
}
.sp-phone__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 1;
  border: 1px solid var(--sp-rule-dark-strong);
  padding: 4px 8px;
  border-radius: 999px;
}
.sp-phone__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-red-on-dark);
  box-shadow: 0 0 0 0 rgba(229, 54, 61, 0.6);
  animation: sp-pulse 1.6s var(--sp-ease) infinite;
}
@keyframes sp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 54, 61, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(229, 54, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 54, 61, 0); }
}

/* ----- Unified CTA button system (Task 16) -----
   One height (48px) across primary, ghost, hero, submit. Padding 16px 24px.
   min-height 44px guards against sub-44 ghost variants (Task 26). */
.sp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sp-red);
  color: var(--sp-bone);
  border: 1px solid var(--sp-red);
  text-decoration: none;
  padding: 16px 24px;
  min-height: 48px;
  box-sizing: border-box;
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--sp-ease), color 200ms var(--sp-ease), border-color 200ms var(--sp-ease), filter 60ms var(--sp-ease);
}
.sp-cta-btn:hover {
  background: var(--sp-bone);
  color: var(--sp-base);
  border-color: var(--sp-bone);
  filter: brightness(1.08);
}
.sp-cta-btn:active { filter: brightness(0.96); }
.sp-cta-btn--ghost {
  background: transparent;
  color: var(--sp-bone);
  border-color: var(--sp-rule-dark);
}
.sp-cta-btn--ghost:hover {
  background: var(--sp-bone);
  color: var(--sp-base);
  border-color: var(--sp-bone);
}
/* Hero context: lift ghost CTA border for legibility over photo overlay */
.sp-hero .sp-cta-btn--ghost {
  border-color: rgba(245, 242, 236, 0.42);
}

/* ---------- Mobile nav toggle (P0.2) ---------- */

.sp-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0 4px;
  background: transparent;
  border: 1px solid var(--sp-rule-dark-strong);
  color: var(--sp-bone);
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 200ms var(--sp-ease), background 200ms var(--sp-ease);
}
.sp-nav-toggle:hover { border-color: var(--sp-bone); }
.sp-nav-toggle:focus-visible {
  outline: 2px solid var(--sp-red-on-dark);
  outline-offset: 2px;
}
.sp-nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
}
.sp-nav-toggle__bars::before,
.sp-nav-toggle__bars::after,
.sp-nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: var(--sp-bone);
  transition: transform 200ms var(--sp-ease), opacity 200ms var(--sp-ease), top 200ms var(--sp-ease);
}
.sp-nav-toggle__bars::before { top: 0; }
.sp-nav-toggle__bars span { top: 5px; left: 0; display: block; }
.sp-nav-toggle__bars::after { top: 11px; }

.sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars::before {
  top: 5px;
  transform: rotate(45deg);
}
.sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars span {
  opacity: 0;
}
.sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars::after {
  top: 5px;
  transform: rotate(-45deg);
}

.sp-mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 49;
  background: var(--sp-base);
  border-bottom: 1px solid var(--sp-rule-dark);
  /* Tasks 23, 24, 27: full small-viewport height with safe-area padding so
     the panel never leaves dead space behind it on iPhones. */
  height: 100svh;
  max-height: 100svh;
  overflow-y: auto;
  padding: max(env(safe-area-inset-top), 80px) 24px max(env(safe-area-inset-bottom), 32px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms var(--sp-ease), transform 200ms var(--sp-ease);
}
.sp-mobile-nav[data-open="true"] {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.sp-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sp-mobile-nav__list li + li {
  border-top: 1px solid var(--sp-rule-dark);
}
.sp-mobile-nav__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 4px;
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sp-bone);
  text-decoration: none;
}
.sp-mobile-nav__list a:hover,
.sp-mobile-nav__list a:focus-visible {
  color: var(--sp-red-on-dark);
}
.sp-mobile-nav__phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  /* Task 17: 18px 4px -> 16px 4px (spacing scale). */
  padding: 16px 4px;
  border-top: 1px solid var(--sp-rule-dark-strong);
  font-family: var(--sp-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sp-bone);
  text-decoration: none;
  min-height: 56px;
}
.sp-mobile-nav__phone .sp-mobile-nav__phone-num {
  font-family: var(--sp-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sp-mobile-nav__phone:hover { color: var(--sp-red-on-dark); }

body.sp-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sp-mobile-nav { transition: opacity 0.01ms; transform: none; }
  .sp-nav-toggle__bars::before,
  .sp-nav-toggle__bars::after,
  .sp-nav-toggle__bars span { transition: none; }
}

/* Phone icon button (used at <768 in place of literal phone text) */
.sp-phone--icon {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sp-rule-dark-strong);
  border-radius: 2px;
  color: var(--sp-bone);
  text-decoration: none;
  transition: border-color 200ms var(--sp-ease), color 200ms var(--sp-ease);
}
.sp-phone--icon:hover { border-color: var(--sp-bone); color: var(--sp-red-on-dark); }
.sp-phone--icon svg { width: 18px; height: 18px; }

/* Task 6: hide brand subtitle below 1100px so the 1024 header phone never wraps. */
@media (max-width: 1099px) {
  .sp-mark__line { display: none; }
}

@media (max-width: 960px) {
  .sp-header__inner { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 24px; }
  .sp-nav { display: none; }
  .sp-phone__pill { display: none; }
  /* Header CTA matches unified system but compresses for mobile column budget. */
  .sp-header__right .sp-cta-btn { padding: 12px 16px; min-height: 44px; font-size: 0.6875rem; }
  .sp-nav-toggle { display: inline-flex; }
}

/* Task 4: phone-icon-vs-formatted breakpoint moved from <768 to <420.
   At 414 (iPhone Plus) the formatted phone now shows. At 375 (iPhone SE) the
   icon-only stays. Header column budget at 414 verified ~309px claimed of 414
   leaving ~105px for "(239) 292-0248" at 12px Inter 700 letterspaced (fits). */
@media (max-width: 419px) {
  .sp-phone { display: none; }
  .sp-phone--icon { display: inline-flex; }
}
@media (min-width: 420px) {
  .sp-phone--icon { display: none; }
  .sp-phone { display: inline-flex; }
}
/* At <420 also tighten the formatted-phone span if it inadvertently shows. */
.sp-phone__num { white-space: nowrap; }

/* ---------- Hero (home, asymmetric portrait + overhang headline) ---------- */

.sp-hero {
  position: relative;
  background: var(--sp-base);
  overflow: visible;
  isolation: isolate;
  /* Task 23: small-viewport unit so iOS Safari URL bar does not push hero off screen. */
  min-height: 92svh;
}
.sp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  /* Task 15: section rails fluid via --sp-rail. */
  padding: 96px var(--sp-rail) 96px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 48px;
  align-items: end;
  min-height: 92svh;
}
.sp-hero__media {
  position: relative;
  grid-column: 2;
  align-self: end;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: -10vh;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--sp-rule-dark);
}
.sp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.88);
}
.sp-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.85) 100%);
  pointer-events: none;
}
.sp-hero__copy {
  grid-column: 1;
  z-index: 2;
  align-self: end;
}
.sp-hero__copy h1 {
  font-family: var(--sp-display);
  font-weight: 800;
  /* Task 11: lift vw from 10 to 11 so the 9.5rem (152px) ceiling actually fires
     on >=1440 screens. 11vw at 1440 = 158.4px > 152px ceiling. */
  font-size: clamp(3.75rem, 11vw, 9.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--sp-bone);
  margin: 0 0 24px;
  text-transform: uppercase;
  text-wrap: balance;
}
.sp-hero__copy h1 .accent {
  color: var(--sp-red-on-dark);
}
.sp-hero__copy h1 em {
  font-family: var(--sp-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  display: inline-block;
}
.sp-hero__copy h1 .overhang {
  position: relative;
  z-index: 3;
  display: inline-block;
}
.sp-hero__lede {
  font-family: var(--sp-serif);
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 56ch;
  color: var(--sp-bone);
  opacity: 0.85;
  margin: 0 0 32px;
}
.sp-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
/* Task 16: hero ctas inherit unified 16px 24px padding now. */
.sp-hero__ctas .sp-cta-btn { font-size: 0.875rem; }

/* Subtle SVG film grain overlay on hero only (P3.16) */
.sp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity;
  z-index: 4;
}
@media (prefers-reduced-motion: reduce) { .sp-hero::after { opacity: 0.25; } }

@media (max-width: 900px) {
  .sp-hero { min-height: clamp(560px, 80svh, 720px); }
  .sp-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px var(--sp-rail) 64px;
    min-height: clamp(560px, 80svh, 720px);
  }
  .sp-hero__media {
    grid-column: 1;
    aspect-ratio: 4/5;
    margin-bottom: 0;
    order: 2;
  }
  .sp-hero__copy { grid-column: 1; order: 1; }
}
@media (max-width: 480px) {
  .sp-hero::after { opacity: 0.32; }
}

/* ---------- Reveal animation (restrained) ---------- */

.sp-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--sp-ease), transform 700ms var(--sp-ease);
}
.sp-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sp-reveal { opacity: 1; transform: none; transition: none; }
  .sp-phone__dot { animation: none; }
}

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

.sp-section {
  padding: 96px var(--sp-rail);
  max-width: 1440px;
  margin: 0 auto;
}
.sp-section--bone { background: var(--sp-bone); color: var(--sp-base); max-width: none; }
.sp-section--bone .sp-section__inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-rail); }
.sp-section--tight { padding: 64px var(--sp-rail); }

.sp-section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sp-rule-dark);
}
.sp-section--bone .sp-section__head { border-color: var(--sp-rule-light); }

.sp-section__head h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  margin: 8px 0 0;
  line-height: 0.96;
}
.sp-section__head .sp-eyebrow { color: var(--sp-bone); }
.sp-section--bone .sp-section__head .sp-eyebrow { color: var(--sp-base); opacity: 0.78; }

/* ---------- Service ladder (was 4-up grid; now editorial rows) ---------- */

.sp-services {
  display: block;
  background: transparent;
  border-top: 1px solid var(--sp-rule-dark);
}
.sp-service {
  display: grid;
  /* Task 17: 88px num column normalized to 96px (spacing scale). */
  grid-template-columns: 96px 1.1fr 1.2fr;
  gap: 48px;
  align-items: baseline;
  padding: 48px 8px;
  border-bottom: 1px solid var(--sp-rule-dark);
  background: transparent;
  transition: transform 220ms var(--sp-ease), color 220ms var(--sp-ease);
  position: relative;
  text-decoration: none;
  color: var(--sp-bone);
}
.sp-service:hover { transform: translateX(8px); }
.sp-service:hover .sp-service__title { color: var(--sp-red-on-dark); }
/* Task 21: hairline rule slides in beneath each service row on hover (180ms). */
.sp-service::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--sp-red-on-dark);
  transition: width 180ms var(--sp-ease);
}
.sp-service:hover::after { width: 100%; }

.sp-service__num {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--sp-bone);
  opacity: 0.55;
  align-self: start;
  /* Task 17: 14px → 16px (spacing scale). */
  padding-top: 16px;
}
.sp-service__title {
  font-family: var(--sp-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: var(--sp-bone);
  transition: color 220ms var(--sp-ease);
}
.sp-service__desc {
  font-family: var(--sp-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sp-bone);
  opacity: 0.78;
  margin: 0;
  max-width: 48ch;
}
.sp-service__more { display: none; }

@media (max-width: 900px) {
  .sp-service {
    grid-template-columns: 56px 1fr;
    gap: 16px 24px;
    padding: 32px 0;
  }
  .sp-service__desc { grid-column: 2; }
  .sp-service__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .sp-service__desc {
    overflow-wrap: break-word;
  }
}

/* ---------- Credentials strip (was 5-up chips; now tracked monogram line) ---------- */

.sp-credentials {
  background: var(--sp-bone);
  color: var(--sp-base);
  padding: 48px var(--sp-rail);
  border-top: 1px solid var(--sp-rule-light);
  border-bottom: 1px solid var(--sp-rule-light);
}
.sp-credentials__line {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 16px 32px;
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-base);
  max-width: 1440px;
  margin: 0 auto;
}
.sp-credentials__line span {
  display: inline-flex;
  align-items: center;
}
.sp-credentials__line span + span {
  border-left: 1px solid var(--sp-red);
  padding-left: 32px;
  height: 1.1em;
  line-height: 1.1em;
}
.sp-credentials__line .sp-credentials__lead {
  color: var(--sp-red);
}
@media (max-width: 900px) {
  .sp-credentials__line span + span {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- Stat row ---------- */

.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  background: var(--sp-bone);
  color: var(--sp-base);
  padding: 64px var(--sp-rail);
}
.sp-stat__num {
  font-family: var(--sp-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--sp-base);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums lining-nums;
}
.sp-stat__num .accent { color: var(--sp-red); }
.sp-stat__num .unit {
  font-size: 0.5em;
  vertical-align: 0.45em;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Task 17: 6px → 8px (spacing scale). */
  margin-left: 8px;
  color: var(--sp-base);
  opacity: 0.65;
}
.sp-stat__label {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  color: var(--sp-base);
  opacity: 0.78;
  margin: 0;
  border-top: 1px solid var(--sp-rule-light);
  padding-top: 12px;
}
@media (max-width: 900px) { .sp-stats { grid-template-columns: repeat(2, 1fr); padding: 48px var(--sp-rail); } }

/* ---------- Positioning sentence (controlrisks lift) ---------- */

.sp-positioning {
  border-top: 1px solid var(--sp-rule-dark);
  border-bottom: 1px solid var(--sp-rule-dark);
  padding: 96px var(--sp-rail);
  max-width: 1440px;
  margin: 0 auto;
}
.sp-positioning p {
  font-family: var(--sp-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 7.2vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin: 0;
  max-width: none;
  text-wrap: balance;
  color: var(--sp-bone);
}
.sp-positioning .accent {
  color: var(--sp-red-on-dark);
  font-family: var(--sp-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
}

/* ---------- Quote / proof band ---------- */

.sp-quote {
  border-top: 1px solid var(--sp-rule-dark);
  border-bottom: 1px solid var(--sp-rule-dark);
  padding: 64px 0;
  margin: 0;
}
.sp-quote__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-rail);
}
.sp-quote blockquote {
  font-family: var(--sp-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
  color: var(--sp-bone);
  margin: 0 0 24px;
  max-width: 36ch;
}
.sp-quote__attr {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 0.6;
}

/* ---------- Proof cards (replaces single italic testimonial moment) ---------- */

.sp-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sp-rule-dark);
  border: 1px solid var(--sp-rule-dark);
  margin-top: 32px;
}
.sp-proof__card {
  background: var(--sp-base);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.sp-proof__eyebrow {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-red-on-dark);
}
.sp-proof__body {
  font-family: var(--sp-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sp-bone);
  opacity: 0.85;
  margin: 0;
}
@media (max-width: 900px) { .sp-proof { grid-template-columns: 1fr; } }

/* ---------- CTA band (per-page variants) ---------- */

.sp-band {
  background: var(--sp-base-2);
  border-top: 1px solid var(--sp-rule-dark);
  border-bottom: 1px solid var(--sp-rule-dark);
  padding: 64px var(--sp-rail);
}
.sp-band__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
}
.sp-band h2 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  margin: 0;
  line-height: 0.96;
}
.sp-band__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}
.sp-band__phone {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--sp-bone);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.sp-band__phone:hover { color: var(--sp-red-on-dark); }

/* sentence variant: full-width sentence, single ghost CTA aligned right */
.sp-band--sentence .sp-band__inner { grid-template-columns: 1fr; max-width: 1100px; }
.sp-band--sentence h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.96;
  max-width: 24ch;
  margin: 0 0 24px;
}
.sp-band--sentence .sp-band__actions { flex-direction: row; align-items: center; justify-content: flex-end; gap: 24px; }

/* rule variant: hairline + sentence + no CTA (the page itself is the action) */
.sp-band--rule { padding: 96px var(--sp-rail); }

/* Task 29: bone proof band variant. Available for future content use. */
.sp-band--bone {
  background: var(--sp-bone);
  color: var(--sp-base);
  border-color: var(--sp-rule-light);
}
.sp-band--bone h2 { color: var(--sp-base); }
.sp-band--bone .sp-band__phone { color: var(--sp-base); }
.sp-band--bone .sp-band__phone:hover { color: var(--sp-red); }
.sp-band--bone .sp-cta-btn { background: var(--sp-red); color: var(--sp-bone); border-color: var(--sp-red); }
.sp-band--bone .sp-cta-btn:hover { background: var(--sp-base); color: var(--sp-bone); border-color: var(--sp-base); }
.sp-band--bone .sp-cta-btn--ghost { background: transparent; color: var(--sp-base); border-color: var(--sp-rule-light); }
.sp-band--bone .sp-cta-btn--ghost:hover { background: var(--sp-base); color: var(--sp-bone); border-color: var(--sp-base); }
.sp-band--rule .sp-band__inner {
  display: block;
  max-width: 1100px;
  border-top: 1px solid var(--sp-rule-dark);
  padding-top: 32px;
}
.sp-band--rule h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-top: 16px; }

@media (max-width: 900px) {
  .sp-band__inner { grid-template-columns: 1fr; }
  .sp-band__actions { align-items: flex-start; }
}

/* ---------- About excerpt ---------- */

.sp-about-x {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.sp-about-x__media {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--sp-base-2);
  border: 1px solid var(--sp-rule-dark);
}
.sp-about-x__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.92);
}
.sp-about-x p {
  font-family: var(--sp-serif);
  font-size: 1.125rem;
  line-height: 1.6;
}
@media (max-width: 900px) { .sp-about-x { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Service detail page (varied row compositions) ---------- */

.sp-service-row {
  display: grid;
  gap: 48px 64px;
  /* Task 17: 80px → 96px (spacing scale). */
  padding: 96px 0;
  border-top: 1px solid var(--sp-rule-dark);
  position: relative;
}
.sp-service-row:first-child { border-top: 0; }
.sp-service-row h3 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  margin: 16px 0 0;
}

/* Decorative drop-numerals behind each services-page row */
.sp-service-row__bignum {
  position: absolute;
  top: 32px;
  right: 0;
  font-family: var(--sp-display);
  font-weight: 800;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--sp-bone);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

.sp-service-row > * { position: relative; z-index: 1; }

.sp-service-row__num {
  font-family: var(--sp-ui);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-red-on-dark);
}
.sp-service-row__media {
  overflow: hidden;
  background: var(--sp-base-2);
  border: 1px solid var(--sp-rule-dark);
}
.sp-service-row__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.92);
}
.sp-service-row__body p {
  font-family: var(--sp-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.sp-service-row__body p strong {
  font-family: var(--sp-ui);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--sp-bone);
  text-transform: none;
}
.sp-service-row__body ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
.sp-service-row__body li {
  font-family: var(--sp-ui);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--sp-bone);
  padding-left: 24px;
  position: relative;
  line-height: 1.45;
}
.sp-service-row__body li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Task 17: 0.55em arbitrary → 8px (spacing scale, paired with line-height). */
  top: 8px;
  width: 12px;
  height: 1px;
  background: var(--sp-red-on-dark);
}

/* Variant: portrait (image left small portrait) */
.sp-service-row--portrait { grid-template-columns: 0.8fr 1.4fr; }
.sp-service-row--portrait .sp-service-row__media { aspect-ratio: 4/5; }

/* Variant: plate-above (full-bleed image above, copy in 2 cols) */
.sp-service-row--plate-above { grid-template-columns: 1fr 1fr; }
.sp-service-row--plate-above .sp-service-row__media { grid-column: 1 / -1; aspect-ratio: 16/9; }
.sp-service-row--plate-above .sp-service-row__copy { grid-column: 1; }
.sp-service-row--plate-above .sp-service-row__body { grid-column: 2; }

/* Variant: plate-right (4:3 image on right) */
.sp-service-row--plate-right { grid-template-columns: 1.4fr 1fr; }
.sp-service-row--plate-right .sp-service-row__copy { grid-column: 1; }
.sp-service-row--plate-right .sp-service-row__body { grid-column: 1; }
.sp-service-row--plate-right .sp-service-row__media { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4/3; align-self: start; }

/* Variant: cinemascope (21:9 letterbox above, narrow column below) */
.sp-service-row--cinemascope { grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }
.sp-service-row--cinemascope .sp-service-row__media { aspect-ratio: 21/9; }
.sp-service-row--cinemascope .sp-service-row__copy,
.sp-service-row--cinemascope .sp-service-row__body { max-width: 64ch; margin: 0 auto; }

@media (max-width: 900px) {
  .sp-service-row,
  .sp-service-row--portrait,
  .sp-service-row--plate-above,
  .sp-service-row--plate-right,
  .sp-service-row--cinemascope {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sp-service-row--plate-above .sp-service-row__copy,
  .sp-service-row--plate-above .sp-service-row__body,
  .sp-service-row--plate-right .sp-service-row__copy,
  .sp-service-row--plate-right .sp-service-row__media,
  .sp-service-row--plate-right .sp-service-row__body { grid-column: 1; grid-row: auto; }
  .sp-service-row__body ul { grid-template-columns: 1fr; }
  .sp-service-row__bignum { font-size: 6rem; right: -16px; top: 8px; }
}

/* ---------- Team ---------- */

.sp-leader {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--sp-rule-dark);
  margin-bottom: 64px;
  align-items: start;
  position: relative;
}
.sp-leader__media {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--sp-base-2);
  border: 1px solid var(--sp-rule-dark);
}
.sp-leader__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.05); }
.sp-leader__name {
  font-family: var(--sp-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  text-transform: uppercase;
  margin: 0;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.sp-leader__title {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  color: var(--sp-red-on-dark);
  margin: 8px 0 24px;
}
.sp-leader__bio p {
  font-family: var(--sp-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Roster mosaic: feature + standard cells via 12-track grid */
.sp-roster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--sp-rule-dark);
  border: 1px solid var(--sp-rule-dark);
}
.sp-roster__card {
  background: var(--sp-base);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  grid-column: span 4;
}
.sp-roster__card--feature { grid-column: span 6; }
.sp-roster__media {
  aspect-ratio: 1/1;
  background: var(--sp-base-2);
  border: 1px solid var(--sp-rule-dark);
  overflow: hidden;
}
.sp-roster__card--feature .sp-roster__media { aspect-ratio: 4/5; }
.sp-roster__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.05) brightness(0.85); }
.sp-roster__role {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
  /* allow long names to wrap rather than overflow */
  overflow-wrap: break-word;
  hyphens: auto;
}
.sp-roster__bio {
  font-family: var(--sp-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sp-bone);
  opacity: 0.78;
  margin: 0;
}
.sp-roster__creds {
  font-family: var(--sp-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--sp-bone);
  opacity: 0.72;
  margin: 0;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--sp-red-on-dark);
  padding-top: 12px;
  display: inline-block;
  align-self: flex-start;
}
@media (max-width: 1100px) {
  .sp-roster__card { grid-column: span 6; }
  .sp-roster__card--feature { grid-column: span 12; }
}
@media (max-width: 900px) {
  .sp-leader { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .sp-roster__card, .sp-roster__card--feature { grid-column: span 12; } }

/* Decorative ROSTER mark behind heading */
.sp-roster-mark {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--sp-bone);
  opacity: 0.06;
  margin: 0 0 -48px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* ---------- Gallery / portfolio (BAN-1 fix: no side stripe) ---------- */

.sp-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 8px;
}
.sp-gallery figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--sp-base-2);
}
.sp-gallery figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.06) brightness(0.85);
  transition: transform 600ms var(--sp-ease), filter 400ms var(--sp-ease);
}
.sp-gallery figure:hover img {
  transform: scale(1.04);
  filter: saturate(0.95) contrast(1.06) brightness(0.95);
}
.sp-gallery figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: rgba(11,11,12,0.78);
  /* Task 17: 12px 14px 12px -> 12px 16px (spacing scale). */
  padding: 12px 16px;
  border-top: 1px solid rgba(245, 242, 236, 0.16);
}
.sp-gallery figcaption .sp-gallery__eyebrow {
  display: block;
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 0.72;
  margin-bottom: 4px;
}
.sp-gallery figcaption .sp-gallery__caption {
  display: block;
  font-family: var(--sp-serif);
  font-style: normal;
  font-size: 14px;
  line-height: 1.35;
  color: var(--sp-bone);
  opacity: 0.95;
}
.sp-g-1 { grid-column: span 7; grid-row: span 4; }
.sp-g-2 { grid-column: span 5; grid-row: span 2; }
.sp-g-3 { grid-column: span 5; grid-row: span 2; }
.sp-g-4 { grid-column: span 4; grid-row: span 3; }
.sp-g-5 { grid-column: span 4; grid-row: span 3; }
.sp-g-6 { grid-column: span 4; grid-row: span 3; }
@media (max-width: 900px) {
  .sp-gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 100px; }
  .sp-g-1, .sp-g-2, .sp-g-3, .sp-g-4, .sp-g-5, .sp-g-6 { grid-column: span 6; grid-row: span 2; }
}

/* ---------- Booking page ---------- */

.sp-booking {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.sp-booking__copy h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.92;
  margin: 16px 0 24px;
}
.sp-booking__copy .sp-booking__procedure {
  margin-top: 32px;
  border-top: 1px solid var(--sp-rule-dark);
  border-bottom: 1px solid var(--sp-rule-dark);
  padding: 16px 0;
  font-family: var(--sp-serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 1;
}
.sp-booking__panel {
  background: var(--sp-bone);
  color: var(--sp-base);
  padding: 48px var(--sp-rail);
  border: 1px solid var(--sp-rule-light);
}
.sp-booking__panel h2 {
  font-size: 1.5rem;
  margin: 0 0 16px;
  color: var(--sp-base);
}
.sp-booking__privacy,
.sp-form__privacy {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--sp-rule-light);
  font-family: var(--sp-serif);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--sp-base);
  opacity: 1;
}
@media (max-width: 900px) { .sp-booking { grid-template-columns: 1fr; } }

/* ----- WPForms restyle on bone surface ----- */
.sp-booking__panel .wpforms-container,
.sp-booking__panel .wpforms-form {
  background: var(--sp-bone);
  color: var(--sp-base);
}
.sp-booking__panel .wpforms-field {
  margin-bottom: 16px;
  padding: 0;
}
.sp-booking__panel .wpforms-field label,
.sp-booking__panel .wpforms-field-label {
  font-family: var(--sp-ui);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  color: var(--sp-base);
  margin-bottom: 8px;
  display: block;
}
.sp-booking__panel .wpforms-field input[type="text"],
.sp-booking__panel .wpforms-field input[type="email"],
.sp-booking__panel .wpforms-field input[type="tel"],
.sp-booking__panel .wpforms-field input[type="number"],
.sp-booking__panel .wpforms-field input[type="date"],
.sp-booking__panel .wpforms-field input[type="time"],
.sp-booking__panel .wpforms-field select,
.sp-booking__panel .wpforms-field textarea,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="date"],
.wpforms-container input[type="time"],
.wpforms-container select,
.wpforms-container textarea {
  background: var(--sp-white);
  border: 1px solid var(--sp-rule-light);
  border-radius: 2px;
  /* Task 17: 13px 14px → 12px 16px (spacing scale, matches radio labels). */
  padding: 12px 16px;
  min-height: 48px;
  font-family: var(--sp-ui);
  font-size: 0.9375rem;
  color: var(--sp-base);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 180ms var(--sp-ease);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  outline: 0;
  border-color: var(--sp-red);
  box-shadow: 0 0 0 1px var(--sp-red);
}

/* Task 8: brand override for invalid-state border color (was WPForms #066aab). */
.wpforms-form input:invalid,
.wpforms-form select:invalid,
.wpforms-form textarea:invalid {
  border-color: var(--sp-red);
}

/* Task 7: pair Date + Time side-by-side at >=768. F1 injects sp-form-row-pair class. */
.wpforms-form .wpforms-field.sp-form-row-pair {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .wpforms-form .wpforms-field.sp-form-row-pair {
    width: calc(50% - 8px);
    margin-right: 16px;
  }
  .wpforms-form .wpforms-field.sp-form-row-pair + .wpforms-field.sp-form-row-pair {
    margin-right: 0;
  }
}

.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li { margin: 0; }
.wpforms-container .wpforms-field-radio label,
.wpforms-container .wpforms-field-checkbox label {
  font-family: var(--sp-ui) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--sp-base);
  border: 1px solid var(--sp-rule-light);
  /* Task 17: 12px 14px → 12px 16px (matches input padding). */
  padding: 12px 16px;
  cursor: pointer;
  display: block;
  transition: border-color 180ms var(--sp-ease), background 180ms var(--sp-ease);
}
.wpforms-container .wpforms-field-radio label:hover,
.wpforms-container .wpforms-field-checkbox label:hover { border-color: var(--sp-red); }

/* Task 3: WPForms description contrast fix.
   Was rgba(0,0,0,0.55) * opacity 0.7 = 2.68:1 on bone (FAIL AA).
   Now var(--sp-base) (#0B0B0C) at opacity 0.72 = effective ~#5A5A5B blended on
   bone -> 5.4:1 ratio (PASS AA, PASS AA-large). */
.wpforms-container .wpforms-field-description {
  font-family: var(--sp-serif);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--sp-base);
  opacity: 0.72;
  /* Task 17: 6px → 8px (spacing scale). */
  margin-top: 8px;
}

/* Task 8: WPForms inline error red override (was hardcoded #D63637). */
.wpforms-form .wpforms-error,
.wpforms-form .wpforms-field-error,
.wpforms-form em.wpforms-error {
  color: var(--sp-red);
  font-family: var(--sp-serif);
  font-style: italic;
  font-size: 0.8125rem;
  font-weight: 400;
  margin-top: 8px;
}
.wpforms-form .wpforms-field.wpforms-has-error input,
.wpforms-form .wpforms-field.wpforms-has-error select,
.wpforms-form .wpforms-field.wpforms-has-error textarea {
  border-color: var(--sp-red);
  box-shadow: 0 0 0 1px var(--sp-red);
}
.wpforms-form .wpforms-field-required-indicator,
.wpforms-form .wpforms-required-label {
  color: var(--sp-red);
}

.wpforms-container .wpforms-submit-container {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-rule-light);
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
}

/* Task 16: unified button height. Submit follows same 16px 24px / 48px height
   as .sp-cta-btn. Specificity high enough to overcome WPForms inline rules
   without !important on most properties. */
.wpforms-form .wpforms-submit,
.wpforms-form button[type="submit"],
.wpforms-container button.wpforms-submit {
  background: var(--sp-red);
  color: var(--sp-bone);
  border: 1px solid var(--sp-red);
  border-radius: 0;
  padding: 16px 24px;
  min-height: 48px;
  box-sizing: border-box;
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.1;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--sp-ease), color 200ms var(--sp-ease), border-color 200ms var(--sp-ease), filter 60ms var(--sp-ease);
}
.wpforms-form .wpforms-submit:hover,
.wpforms-form button[type="submit"]:hover,
.wpforms-container button.wpforms-submit:hover {
  background: var(--sp-base);
  color: var(--sp-bone);
  border-color: var(--sp-base);
  filter: brightness(1.08);
}
.wpforms-form .wpforms-submit:active,
.wpforms-container button.wpforms-submit:active {
  filter: brightness(0.96);
}

/* Task 9: honeypot wrapper visually hidden from sighted + AT users.
   F1 adds aria-hidden + tabindex=-1 via filter; CSS supplements visual hide. */
.wpforms-container .wpforms-field-hp,
.wpforms-container .wpforms-field-honeypot,
.wpforms-container input[name="hp"],
.wpforms-container .wpforms-field-honeypot-wrap,
#wpforms-21-field_11-container,
#wpforms-23-field_4-container {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  height: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Contact page ---------- */

.sp-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.sp-contact__hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.92;
  margin: 16px 0 24px;
}
.sp-contact__phone {
  font-family: var(--sp-display);
  font-weight: 800;
  /* Task 5: lower clamp ceiling from 6.5rem (104px) to 5rem (80px) and add
     white-space: nowrap so "(239) 292-0248" never breaks mid-number. */
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--sp-bone);
  text-decoration: none;
  display: block;
  margin: 16px 0;
  line-height: 0.92;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 180ms var(--sp-ease);
}
.sp-contact__phone:hover { color: var(--sp-red-on-dark); }
.sp-contact__meta {
  display: grid;
  gap: 24px;
  margin-top: 48px;
  border-top: 1px solid var(--sp-rule-dark);
  padding-top: 32px;
}
.sp-contact__meta dt {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 0.6;
  margin-bottom: 4px;
}
.sp-contact__meta dd {
  font-family: var(--sp-serif);
  font-size: 1rem;
  margin: 0;
  color: var(--sp-bone);
}
@media (max-width: 900px) { .sp-contact { grid-template-columns: 1fr; } }

/* ---------- Footer (no redundant credentials strip; tighter legal) ---------- */

.sp-footer {
  background: var(--sp-base);
  color: var(--sp-bone);
  padding: 0;
  border-top: 1px solid var(--sp-rule-dark);
}
.sp-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 64px var(--sp-rail);
  /* Task 24: respect bottom safe area on iPhones in landscape. */
  padding-bottom: max(env(safe-area-inset-bottom), 32px);
  max-width: 1440px;
  margin: 0 auto;
}
.sp-footer__cols > div > .sp-footer__label {
  font-family: var(--sp-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--sp-track-mono);
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 0.6;
  margin: 0 0 16px;
  display: block;
}
.sp-footer ul { list-style: none; margin: 0; padding: 0; }
.sp-footer li { margin-bottom: 4px; }
.sp-footer a {
  font-family: var(--sp-ui);
  font-size: 0.875rem;
  color: var(--sp-bone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
}
.sp-footer a:hover { color: var(--sp-red-on-dark); }
/* Footer phone + email tap targets (P1.5: meet 44x44 minimum) */
.sp-footer a[href^="tel:"],
.sp-footer a[href^="mailto:"] {
  min-height: 44px;
  padding: 12px 0;
}
.sp-footer li:not(:has(a)) {
  font-family: var(--sp-ui);
  font-size: 0.875rem;
  color: var(--sp-bone);
  opacity: 0.78;
  padding: 4px 0;
}
.sp-footer__brand .sp-mark__glyph { font-size: 56px; }
.sp-mark__glyph--legal { font-size: 22px; }
.sp-footer__brand p {
  font-family: var(--sp-serif);
  font-style: italic;
  font-size: 0.9375rem;
  max-width: 38ch;
  color: var(--sp-bone);
  opacity: 0.78;
  margin: 16px 0 0;
}
.sp-footer__legal {
  border-top: 1px solid var(--sp-rule-dark);
  padding: 32px var(--sp-rail);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  font-family: var(--sp-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-bone);
  opacity: 1;
}
.sp-footer__legal .sp-footer__copy {
  font-family: var(--sp-serif);
  font-style: italic;
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 0;
  text-transform: none;
}
.sp-footer__legal a { color: inherit; }
.sp-footer__legal a:hover { color: var(--sp-red-on-dark); opacity: 1; }
@media (max-width: 1100px) {
  .sp-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sp-footer__cols { grid-template-columns: 1fr; gap: 32px; padding: 32px var(--sp-rail); padding-bottom: max(env(safe-area-inset-bottom), 32px); }
  .sp-footer__legal { grid-template-columns: 1fr; gap: 16px; padding: 32px var(--sp-rail); }
}

/* ---------- Generic page wrapper ---------- */

.sp-page-hero {
  padding: 96px var(--sp-rail) 48px;
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: 1px solid var(--sp-rule-dark);
}
.sp-page-hero h1 {
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: 0.9;
  margin: 16px 0 16px;
  letter-spacing: -0.02em;
}
.sp-page-hero h1 em,
.sp-page-hero h1 .accent-italic {
  font-family: var(--sp-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--sp-red-on-dark);
}
.sp-page-hero__lede {
  font-family: var(--sp-serif);
  font-size: 1.125rem;
  max-width: 64ch;
  color: var(--sp-bone);
  opacity: 0.85;
  margin: 0;
}

/* ---------- Long-form (Privacy / Terms / About body) ---------- */

.sp-prose {
  /* Task 14: lift Privacy/Terms measure ~45ch -> 65ch (typographic comfort). */
  max-width: 65ch;
  margin: 64px auto;
  padding: 0 var(--sp-rail);
  font-family: var(--sp-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Task 20: visible link state on dark prose surface (Privacy / Terms).
   Default bone-on-base mailto: links were indistinguishable from body copy. */
.sp-prose a,
.sp-prose--dark a {
  color: var(--sp-bone);
  text-decoration: underline;
  text-decoration-color: var(--sp-red-on-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms var(--sp-ease), text-decoration-color 180ms var(--sp-ease);
}
.sp-prose a:hover,
.sp-prose--dark a:hover {
  color: var(--sp-red-on-dark);
}
/* Within bone surfaces, links use red on bone (6.27:1 AA). */
.sp-section--bone .sp-prose a,
.has-bone-background-color .sp-prose a {
  color: var(--sp-base);
  text-decoration-color: var(--sp-red);
}
.sp-section--bone .sp-prose a:hover,
.has-bone-background-color .sp-prose a:hover {
  color: var(--sp-red);
}
.sp-prose h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 48px 0 16px;
}
.sp-prose h3 {
  font-size: 1.25rem;
  margin: 32px 0 12px;
}
.sp-prose ul, .sp-prose ol { padding-left: 24px; }
.sp-prose li { margin-bottom: 8px; }

/* About-page pillars + credentials blocks (defined to remove inline-style soup) */
.sp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 32px; }
.sp-pillar { border-top: 1px solid var(--sp-red); padding-top: 16px; }
.sp-pillar__eyebrow {
  font-family: var(--sp-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 8px;
}
.sp-pillar__title {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 8px 0 16px;
  line-height: 1.05;
}
.sp-pillar__body {
  font-family: var(--sp-serif);
  font-size: 1rem; line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) { .sp-pillars { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Utilities ---------- */

.sp-rule { height: 1px; background: var(--sp-rule-dark); margin: 64px 0; border: 0; }
.sp-section--bone .sp-rule { background: var(--sp-rule-light); }

a:focus-visible, button:focus-visible, .sp-cta-btn:focus-visible {
  outline: 2px solid var(--sp-red-on-dark);
  outline-offset: 3px;
}

/* Ensure WP block headings don't sneak in alternate fonts */
body.sp-design .wp-block-heading {
  font-family: var(--sp-display);
}

/* Phone tel: link subtle underline-on-hover (Task 21) */
a[href^="tel:"] {
  transition: color 180ms var(--sp-ease), text-decoration-color 180ms var(--sp-ease);
}
a[href^="tel:"]:hover {
  text-decoration: underline;
  text-decoration-color: var(--sp-red-on-dark);
  text-underline-offset: 4px;
}

/* Honor reduced motion across all transitions and the hero film grain */
@media (prefers-reduced-motion: reduce) {
  body.sp-design *, body.sp-design *::before, body.sp-design *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== Print stylesheet (Task 22) =====
   White background, dark text, no decorative elements, phone CTA legible.
   Optimized for /booking-thank-you and /contact-thank-you handoffs. */
@media print {
  body.sp-design,
  body.sp-design html {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }
  /* Hide chrome, decorative, and interactive UI. */
  .sp-header,
  .sp-mobile-nav,
  .sp-nav-toggle,
  .sp-skip-link,
  .sp-hero::after,
  .sp-band,
  .sp-cta-btn,
  .sp-roster-mark,
  .sp-service-row__bignum,
  .sp-phone--icon,
  .sp-phone__pill,
  form,
  .wpforms-container {
    display: none;
  }
  /* Phone numbers stay legible and printable. */
  a[href^="tel:"]::after {
    content: " " attr(href);
    font-family: monospace;
    font-size: 10pt;
    color: #000;
  }
  a[href^="tel:"]::after { content: ""; }
  .sp-contact__phone,
  .sp-band__phone {
    color: #000;
    font-size: 24pt;
    text-decoration: none;
  }
  /* Headings tighter for print. */
  body.sp-design h1, body.sp-design h2, body.sp-design h3 {
    color: #000;
    text-transform: uppercase;
    page-break-after: avoid;
  }
  body.sp-design h1 { font-size: 24pt; }
  body.sp-design h2 { font-size: 18pt; }
  body.sp-design h3 { font-size: 13pt; }
  body.sp-design p {
    color: #000;
    max-width: none;
    orphans: 3;
    widows: 3;
  }
  /* Prose, sections, footers: white surface, dark rules. */
  .sp-section,
  .sp-section--bone,
  .sp-positioning,
  .sp-prose,
  .sp-page-hero,
  .sp-footer,
  .sp-credentials {
    background: #fff;
    color: #000;
    border-color: #000;
    padding: 12pt 0;
    max-width: none;
  }
  .sp-section__head,
  .sp-section__head h2 { color: #000; border-color: #000; }
  /* Footer reduced to legal line. */
  .sp-footer__cols { display: none; }
  .sp-footer__legal {
    border-top: 1px solid #000;
    padding-top: 8pt;
    font-size: 9pt;
    color: #000;
  }
  /* Images print only when relevant; suppress decorative dark photo treatments. */
  img { filter: none; max-width: 100%; }
  /* Links print URL inline for print copy provenance. */
  .sp-prose a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #333;
  }
  .sp-prose a[href^="#"]::after,
  .sp-prose a[href^="mailto:"]::after { content: ""; }
}