/* SPS theme 01.00.04 for DNN 10.4 (stonypointservices.com). Built by build-v2/src/build_css.py from
   design/sps-base/mockups-v2/css/sps.css (v2.1, approved 2026-10-24) + src/skin-additions.css. Do not edit here. */
/* =====================================================================
   Stony Point Services (stonypointservices.com) -- site theme CSS, mockups v1
   Carla Walton, 2026-10-24. Draft for Roggie's approval. One file: tokens + components.
   Sister theme to SPP mockups-v1 (same tokens, Montserrat + Public Sans). Classes use the sps- prefix.
   Mobile-first; breakpoints: 640px (sm), 1024px (lg), 1280px (desktop nav).
   ===================================================================== */

/* ---------- 0. Tokens (literal brand colours, see "DNN integration" at the end) ---------- */
:root {
  --sps-color-primary: #1F4A42;   /* Fraser Fir: links, primary buttons */
  --sps-color-primary-hover: #163830;
  --sps-color-on-primary: #FFFFFF;
  --sps-color-accent: #B4562B;  /* Copper: Book buttons, pen line, icons */
  --sps-color-accent-ink: #94431D;                          /* Copper ink: small copper text on light */
  --sps-color-accent-on-dark: #E3A47E;                      /* Copper on dark */
  --sps-color-bg: #F5F3EE;     /* Limestone */
  --sps-color-surface: #FFFFFF;
  --sps-color-surface-alt: #E8E5DD;
  --sps-color-dark: #17221F;                                /* Night Ridge */
  --sps-color-text: #1D2320;   /* Basalt */
  --sps-color-text-muted: #545C58;                          /* Slate */
  --sps-color-on-dark: #F5F3EE;
  --sps-color-on-dark-muted: #B9C0BB;
  --sps-color-on-fir-muted: #DCE5E1;
  --sps-color-border: #CFCBC1;                              /* Gravel: decorative dividers */
  --sps-color-border-strong: #7A817C;                       /* Flint: input borders */
  --sps-color-focus: #B4562B;
  --sps-color-tbd-bg: #FCF1D8; --sps-color-tbd-ink: #6E4700;
  --sps-color-error: #94431D;

  --sps-font-head: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sps-font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sps-fw-head: 700; --sps-fw-head-sub: 600;
  --sps-fs-small: 0.875rem; --sps-fs-body: 1rem; --sps-fs-h3: 1.25rem; --sps-fs-h2: 1.5625rem; --sps-fs-h1: 1.9375rem;
  --sps-fs-lead: 1.125rem; --sps-fs-display: 2rem; --sps-fs-eyebrow: 0.8125rem;
  --sps-lh-body: 1.6; --sps-lh-head: 1.2;

  --sps-space-1: 0.25rem; --sps-space-2: 0.5rem; --sps-space-3: 0.75rem; --sps-space-4: 1rem;
  --sps-space-5: 1.5rem; --sps-space-6: 2rem; --sps-space-7: 3rem; --sps-space-8: 4rem; --sps-space-9: 6rem;
  --sps-section-y: var(--sps-space-8);
  --sps-container: 75rem; --sps-measure: 40rem; --sps-gutter: 1rem;
  --sps-radius: 6px; --sps-radius-lg: 12px;
  --sps-shadow-card: 0 1px 2px rgb(23 34 31 / 0.06), 0 4px 16px rgb(23 34 31 / 0.06);
  --sps-shadow-card-hover: 0 2px 4px rgb(23 34 31 / 0.08), 0 12px 28px rgb(23 34 31 / 0.10);
  --sps-focus-ring: 2px solid var(--sps-color-focus);       /* copper 2px, 2px offset (site-wide) */
}
@media (min-width: 640px) { :root { --sps-gutter: 1.5rem; } }
@media (min-width: 1024px) {
  :root { --sps-fs-small: 0.9375rem; --sps-fs-body: 1.125rem; --sps-fs-h3: 1.375rem; --sps-fs-h2: 2rem; --sps-fs-h1: 2.6875rem;
          --sps-fs-lead: 1.25rem; --sps-fs-display: 3rem; --sps-fs-eyebrow: 0.875rem;
          --sps-section-y: var(--sps-space-9); --sps-gutter: 2rem; }
}
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/montserrat-600.latin.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/montserrat-700.latin.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/public-sans-400.latin.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/public-sans-400-italic.latin.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/public-sans-600.latin.woff2') format('woff2'); }

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--sps-space-5); }
body { margin: 0; background: var(--sps-color-bg); color: var(--sps-color-text); font-family: var(--sps-font-body);
  font-size: var(--sps-fs-body); line-height: var(--sps-lh-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--sps-font-head); line-height: var(--sps-lh-head); margin: 0 0 var(--sps-space-4); text-wrap: balance; letter-spacing: -0.01em; color: var(--sps-color-text); }
h1 { font-size: var(--sps-fs-h1); font-weight: var(--sps-fw-head); }
h2 { font-size: var(--sps-fs-h2); font-weight: var(--sps-fw-head); }
h3 { font-size: var(--sps-fs-h3); font-weight: var(--sps-fw-head-sub); letter-spacing: 0; }
h4 { font-size: var(--sps-fs-body); font-weight: var(--sps-fw-head-sub); letter-spacing: 0; }
p, ul, ol, dl { margin: 0 0 var(--sps-space-4); }
p { text-wrap: pretty; }
a { color: var(--sps-color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--sps-color-primary-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--sps-focus-ring); outline-offset: 2px; }
.sps-on-dark :focus-visible, .sps-topbar :focus-visible, .sps-footer :focus-visible, .sps-cta :focus-visible, .sps-strip :focus-visible { outline-color: var(--sps-color-accent-on-dark); }
main:focus { outline: none; }

/* ---------- 2. Utilities ---------- */
.sps-container { width: 100%; max-width: calc(var(--sps-container) + 2 * var(--sps-gutter)); margin-inline: auto; padding-inline: var(--sps-gutter); }
.sps-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sps-skip-link { position: absolute; left: var(--sps-space-4); top: var(--sps-space-3); z-index: 100; padding: var(--sps-space-3) var(--sps-space-5);
  background: var(--sps-color-primary); color: var(--sps-color-on-primary); font-family: var(--sps-font-head); font-weight: 600; text-decoration: none;
  border-radius: var(--sps-radius); transform: translateY(-300%); }
.sps-skip-link:focus { transform: none; color: var(--sps-color-on-primary); }
.sps-eyebrow { display: block; margin: 0 0 var(--sps-space-3); font-family: var(--sps-font-head); font-weight: 600; font-size: var(--sps-fs-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sps-color-accent-ink); }
.sps-lead { font-size: var(--sps-fs-lead); line-height: 1.55; }
.sps-muted { color: var(--sps-color-text-muted); }
.sps-small { font-size: var(--sps-fs-small); }
/* Pen-line rule: the D2 idea -- a pointed landing, full weight, ending in the nib */
.sps-rule { position: relative; width: 5.5rem; height: 3px; margin: 0 0 var(--sps-space-5); border: 0; background: var(--sps-color-accent);
  clip-path: polygon(0 50%, 30% 0, 100% 0, 100% 100%, 30% 100%); overflow: visible; }
.sps-penline { display: flex; align-items: flex-end; gap: 0; margin: 0 0 var(--sps-space-5); height: 1.25rem; }
.sps-penline::before { content: ""; width: 5rem; height: 3px; margin-bottom: 1px; background: var(--sps-color-accent); clip-path: polygon(0 50%, 35% 0, 100% 0, 100% 100%, 35% 100%); }
.sps-penline::after { content: ""; width: 0.875rem; height: 1.25rem; background: url("../img/sps-nib.svg") no-repeat left bottom / contain; margin-left: -1px; }

/* ---------- 3. Buttons ---------- */
.sps-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sps-space-2); min-height: 2.75rem; padding: 0.6875rem 1.375rem;
  border: 2px solid transparent; border-radius: var(--sps-radius); font-family: var(--sps-font-head); font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.sps-button:hover { text-decoration: none; }
.sps-button--book { background: var(--sps-color-accent); color: #FFFFFF; }                /* white on copper 4.88:1 */
.sps-button--book:hover { background: var(--sps-color-accent-ink); color: #FFFFFF; }
.sps-button--primary { background: var(--sps-color-primary); color: var(--sps-color-on-primary); }
.sps-button--primary:hover { background: var(--sps-color-primary-hover); color: var(--sps-color-on-primary); }
.sps-button--secondary { background: transparent; color: var(--sps-color-primary); border-color: var(--sps-color-primary); }
.sps-button--secondary:hover { background: var(--sps-color-primary); color: var(--sps-color-on-primary); }
.sps-button--on-dark { background: var(--sps-color-on-dark); color: var(--sps-color-dark); }
.sps-button--on-dark:hover { background: #FFFFFF; color: var(--sps-color-dark); }
.sps-button--ghost-dark { background: transparent; color: var(--sps-color-on-dark); border-color: rgb(245 243 238 / 0.6); }
.sps-button--ghost-dark:hover { border-color: var(--sps-color-on-dark); background: rgb(245 243 238 / 0.08); color: #FFFFFF; }
.sps-button--block { width: 100%; }
.sps-button__icon { width: 1.125rem; height: 1.125rem; flex: none; }
.sps-button-row { display: flex; flex-wrap: wrap; gap: var(--sps-space-3); }
.sps-link-arrow { font-family: var(--sps-font-head); font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-decoration-color: var(--sps-color-accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.sps-link-arrow::after { content: " \2192"; }
.sps-tel { font-family: var(--sps-font-head); font-weight: 700; white-space: nowrap; }

/* ---------- 4. Top bar + header + nav (skin) ---------- */
.sps-topbar { background: var(--sps-color-dark); color: var(--sps-color-on-dark-muted); font-size: 0.8125rem; }
.sps-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sps-space-3); min-height: 2.75rem; }
.sps-topbar p { margin: 0; }
.sps-topbar a { display: inline-flex; align-items: center; gap: var(--sps-space-2); min-height: 2.75rem; color: var(--sps-color-on-dark); font-family: var(--sps-font-head); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sps-topbar a:hover { color: var(--sps-color-accent-on-dark); text-decoration: underline; }
.sps-topbar__label { display: none; }
@media (min-width: 640px) { .sps-topbar { font-size: var(--sps-fs-small); } .sps-topbar__label { display: inline; color: var(--sps-color-on-dark-muted); font-family: var(--sps-font-body); font-weight: 400; } }

.sps-header { position: relative; z-index: 20; background: var(--sps-color-bg); border-bottom: 1px solid var(--sps-color-border); }
.sps-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sps-space-3); min-height: 4.5rem; }
.sps-logo { display: block; flex: 0 1 auto; padding-block: var(--sps-space-3); border-radius: 2px; }
.sps-logo img { width: 15.5rem; height: auto; }              /* wordmark with pen, 248px wide (README min 240px) */
@media (min-width: 640px) { .sps-logo img { width: auto; height: 2.75rem; } }   /* D2 horizontal, 44px tall (README min) */
@media (min-width: 1280px) { .sps-header__inner { min-height: 5.75rem; } }

.sps-nav-toggle { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--sps-space-2); min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--sps-space-3);
  border: 1px solid var(--sps-color-border-strong); border-radius: var(--sps-radius); background: transparent; color: var(--sps-color-text);
  font: 600 0.875rem/1 var(--sps-font-head); text-decoration: none; cursor: pointer; flex: none; }
.sps-nav-toggle__icon, .sps-nav-toggle__icon::before, .sps-nav-toggle__icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; transition: transform .2s ease, background-color .2s ease; }
.sps-nav-toggle__icon::before, .sps-nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.sps-nav-toggle__icon::before { top: -6px; } .sps-nav-toggle__icon::after { top: 6px; }
.sps-nav-toggle[aria-expanded="true"] .sps-nav-toggle__icon { background: transparent; }
.sps-nav-toggle[aria-expanded="true"] .sps-nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.sps-nav-toggle[aria-expanded="true"] .sps-nav-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

.sps-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--sps-color-bg); border-bottom: 1px solid var(--sps-color-border); box-shadow: 0 12px 24px rgb(23 34 31 / 0.08); }
.sps-nav.is-open, .sps-nav:target { display: block; }
.sps-nav__list { list-style: none; margin: 0; padding: var(--sps-space-2) var(--sps-gutter) var(--sps-space-5); }
.sps-nav__item + .sps-nav__item { border-top: 1px solid var(--sps-color-border); }
.sps-nav__link { display: block; padding: var(--sps-space-4) 0; color: var(--sps-color-text); text-decoration: none; font-family: var(--sps-font-head); font-weight: 600; font-size: 1.0625rem; }
.sps-nav__link:hover { color: var(--sps-color-primary); }
.sps-nav__link[aria-current="page"], .sps-nav__link[aria-current="true"] { color: var(--sps-color-primary); box-shadow: inset 3px 0 0 var(--sps-color-accent); padding-left: var(--sps-space-4); }
.sps-nav__item--cta { border-top: 0 !important; padding-top: var(--sps-space-4); }
.sps-nav__item--cta .sps-button { width: 100%; }
.sps-nav__close { display: none; margin: 0 var(--sps-gutter) var(--sps-space-4); }
.sps-nav:target .sps-nav__close { display: inline-block; }
.sps-js .sps-nav:target:not(.is-open) { display: none; }
@media (min-width: 1280px) {
  .sps-nav-toggle { display: none; }
  .sps-nav, .sps-js .sps-nav:target:not(.is-open) { display: block; position: static; background: none; border: 0; box-shadow: none; }
  .sps-nav__close, .sps-nav:target .sps-nav__close { display: none; }
  .sps-nav__list { display: flex; align-items: center; gap: var(--sps-space-1); padding: 0; }
  .sps-nav__item + .sps-nav__item { border-top: 0; }
  .sps-nav__link { position: relative; padding: var(--sps-space-3) 0.625rem; font-size: 0.9688rem; white-space: nowrap; }
  .sps-nav__link::after { content: ""; position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.25rem; height: 2px; background: var(--sps-color-accent); transform: scaleX(0); transition: transform .2s ease; }
  .sps-nav__link:hover::after, .sps-nav__link[aria-current]::after { transform: scaleX(1); }
  .sps-nav__link[aria-current="page"], .sps-nav__link[aria-current="true"] { box-shadow: none; padding-left: 0.625rem; }
  .sps-nav__item--cta { padding-top: 0; margin-left: var(--sps-space-4); }
  .sps-nav__item--cta .sps-button { width: auto; }
}

/* ---------- 5. Panes + sections ---------- */
.sps-pane:empty { display: none; }
.sps-section { padding-block: var(--sps-section-y); }
.sps-section--tight { padding-block: var(--sps-space-7); }
.sps-section--alt { background: var(--sps-color-surface-alt); }
.sps-section--paper { background: var(--sps-color-surface); }
.sps-section__head { max-width: 46rem; margin-bottom: var(--sps-space-7); }
.sps-section__head p:last-child { margin-bottom: 0; }
.sps-section__head--split { max-width: none; display: grid; gap: var(--sps-space-4); }
@media (min-width: 1024px) { .sps-section__head--split { grid-template-columns: minmax(0, 46rem) auto; justify-content: space-between; align-items: end; } }

/* ---------- 6. Home hero ---------- */
.sps-hero { position: relative; background: var(--sps-color-bg); padding-top: var(--sps-space-7); overflow: hidden; }
.sps-hero__inner { display: grid; gap: var(--sps-space-6); position: relative; z-index: 1; }
.sps-hero__title { font-size: var(--sps-fs-display); line-height: 1.12; letter-spacing: -0.02em; max-width: 16em; margin-bottom: var(--sps-space-5); }
.sps-hero__title span { color: var(--sps-color-primary); }
.sps-hero .sps-lead { max-width: 36rem; color: var(--sps-color-text-muted); margin-bottom: var(--sps-space-6); }
.sps-hero__meta { margin: var(--sps-space-5) 0 0; font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }
.sps-hero__meta a { font-family: var(--sps-font-head); font-weight: 700; }
.sps-hero__card { background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); box-shadow: var(--sps-shadow-card); padding: var(--sps-space-5); }
.sps-hero__card h2 { font-size: 1.125rem; margin-bottom: var(--sps-space-4); }
.sps-hero__art { position: relative; margin-top: calc(-1 * var(--sps-space-5)); pointer-events: none; }
.sps-hero__art img { width: 100%; height: 11rem; object-fit: cover; object-position: 78% 100%; }
@media (min-width: 640px) { .sps-hero__art img { height: auto; aspect-ratio: 4 / 1; } }
@media (min-width: 1024px) {
  .sps-hero { padding-top: var(--sps-space-8); }
  .sps-hero__inner { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sps-space-8); align-items: start; }
  .sps-hero__art { margin-top: -6.5rem; }
  .sps-hero__art img { max-height: 25rem; }
}
/* the Fraser Fir strip continues the landscape's ground */
.sps-strip { background: var(--sps-color-primary); color: var(--sps-color-on-primary); margin-top: -1px; padding-block: var(--sps-space-5) var(--sps-space-6); }
.sps-strip__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sps-space-4); }
.sps-strip__list li { display: flex; gap: var(--sps-space-3); align-items: flex-start; }
.sps-strip__list strong { display: block; font-family: var(--sps-font-head); font-size: 1rem; color: #FFFFFF; }
.sps-strip__list span { color: var(--sps-color-on-fir-muted); font-size: var(--sps-fs-small); }
.sps-strip a { color: #FFFFFF; }
.sps-strip__dot { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.4rem; background: var(--sps-color-accent-on-dark); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (min-width: 1024px) { .sps-strip__list { grid-template-columns: repeat(3, 1fr); gap: var(--sps-space-6); } }

/* Steps (hero card + How it works) */
/* TBD chip inside the dark strip keeps its own ink */

.sps-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sps-space-4); counter-reset: step; }
.sps-steps > li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sps-space-3); align-items: start; }
.sps-steps > li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--sps-color-bg); border: 2px solid var(--sps-color-accent); color: var(--sps-color-accent-ink); font: 700 0.9375rem/1 var(--sps-font-head); }
.sps-steps h3 { font-size: 1rem; margin: 0.375rem 0 var(--sps-space-1); }
.sps-steps p { margin: 0; font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }
.sps-hero__card .sps-button { margin-top: var(--sps-space-5); }
.sps-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sps-space-5); counter-reset: step; }
.sps-how > li { counter-increment: step; background: var(--sps-color-surface); border-radius: var(--sps-radius-lg); padding: var(--sps-space-6) var(--sps-space-5) var(--sps-space-5); position: relative; }
.sps-how__icon { width: 3.5rem; height: 3.5rem; margin-bottom: var(--sps-space-4); }
.sps-how h3::before { content: "Step " counter(step); display: block; margin-bottom: var(--sps-space-2); font-size: var(--sps-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--sps-color-accent-ink); }
.sps-how p { margin: 0; color: var(--sps-color-text-muted); font-size: var(--sps-fs-small); }
@media (min-width: 1024px) { .sps-how { grid-template-columns: repeat(3, 1fr); gap: var(--sps-space-6); } }

/* ---------- 7. Interior page head ---------- */
.sps-page-head { padding-block: var(--sps-space-6) var(--sps-space-7); border-bottom: 1px solid var(--sps-color-border); background: linear-gradient(180deg, var(--sps-color-bg), var(--sps-color-bg) 60%, #EFECE5); position: relative; overflow: hidden; }
.sps-page-head__grid { display: grid; gap: var(--sps-space-5); align-items: center; }
.sps-page-head__title { max-width: 18em; margin-bottom: var(--sps-space-3); }
.sps-page-head .sps-lead { max-width: var(--sps-measure); color: var(--sps-color-text-muted); margin-bottom: 0; }
.sps-page-head__icon { display: none; }
.sps-breadcrumb { margin-bottom: var(--sps-space-5); font-size: var(--sps-fs-small); }
.sps-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sps-space-2); margin: 0; padding: 0; color: var(--sps-color-text-muted); }
.sps-breadcrumb li + li::before { content: "/"; margin-right: var(--sps-space-2); color: var(--sps-color-border-strong); }
.sps-breadcrumb a { color: var(--sps-color-text-muted); display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
@media (min-width: 1024px) {
  .sps-page-head { padding-block: var(--sps-space-7) var(--sps-space-8); }
  .sps-page-head__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sps-space-8); }
  .sps-page-head__icon { display: grid; place-items: center; width: 10rem; height: 10rem; border-radius: 50%; background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); box-shadow: var(--sps-shadow-card); }
  .sps-page-head__icon img { width: 5.5rem; height: 5.5rem; }
}

/* ---------- 8. Service cards ---------- */
.sps-card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sps-space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sps-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sps-card-grid--4 { grid-template-columns: repeat(4, 1fr); } .sps-card-grid--3 { grid-template-columns: repeat(3, 1fr); } .sps-card-grid { gap: var(--sps-space-6); } }
.sps-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--sps-space-5) var(--sps-space-5) var(--sps-space-5);
  background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); box-shadow: var(--sps-shadow-card); transition: box-shadow .2s ease, transform .2s ease; }
.sps-card:hover, .sps-card:focus-within { box-shadow: var(--sps-shadow-card-hover); transform: translateY(-2px); }
.sps-card__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: var(--sps-space-4); border-radius: 50%; background: var(--sps-color-bg); }
.sps-card__icon img { width: 2.75rem; height: 2.75rem; }
.sps-card__title { font-size: 1.1875rem; margin-bottom: var(--sps-space-3); }
.sps-card__title a { color: var(--sps-color-text); text-decoration: none; }
.sps-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sps-radius-lg); }
.sps-card__title a:focus-visible { outline: none; }
.sps-card:has(.sps-card__title a:focus-visible) { outline: var(--sps-focus-ring); outline-offset: 3px; }
.sps-card__text { color: var(--sps-color-text-muted); font-size: var(--sps-fs-small); margin-bottom: var(--sps-space-4); }
.sps-card__list { list-style: none; padding: 0; margin: 0 0 var(--sps-space-5); font-size: var(--sps-fs-small); display: grid; gap: var(--sps-space-2); }
.sps-card__list li { padding-left: 1.25rem; position: relative; }
.sps-card__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; background: var(--sps-color-accent); clip-path: polygon(50% 8%, 100% 92%, 78% 92%, 50% 42%, 22% 92%, 0 92%); }
.sps-card__link { margin-top: auto; font-family: var(--sps-font-head); font-weight: 600; font-size: 0.875rem; color: var(--sps-color-primary); }
.sps-card__link::after { content: " \2192"; }
.sps-card:hover .sps-card__link { text-decoration: underline; text-decoration-color: var(--sps-color-accent); text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.sps-card--lg { padding: var(--sps-space-6); }
.sps-card--lg .sps-card__title { font-size: var(--sps-fs-h3); }

/* ---------- 9. Options (office / mobile) and feature rows ---------- */
.sps-options { display: grid; gap: var(--sps-space-5); }
@media (min-width: 768px) { .sps-options { grid-template-columns: 1fr 1fr; gap: var(--sps-space-6); } }
.sps-option { display: grid; grid-template-columns: auto 1fr; gap: var(--sps-space-4); align-items: start; background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); padding: var(--sps-space-5); }
.sps-option img { width: 3rem; height: 3rem; }
.sps-option h3 { margin-bottom: var(--sps-space-2); font-size: 1.125rem; }
.sps-option p { margin: 0 0 var(--sps-space-2); font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }
.sps-option p:last-child { margin: 0; }
.sps-prose .sps-options { margin: var(--sps-space-5) 0 var(--sps-space-6); grid-template-columns: 1fr; gap: var(--sps-space-4); }
.sps-prose .sps-option { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .sps-prose .sps-option { grid-template-columns: auto 1fr; } }

/* ---------- 10. Split (About teaser) + facts + badge slot ---------- */
.sps-split { display: grid; gap: var(--sps-space-7); align-items: center; }
.sps-split__body { max-width: var(--sps-measure); }
@media (min-width: 1024px) { .sps-split { grid-template-columns: 5fr 6fr; gap: var(--sps-space-9); } }
.sps-facts { list-style: none; padding: 0; margin: var(--sps-space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--sps-space-2) var(--sps-space-3); }
.sps-facts li { padding: var(--sps-space-1) var(--sps-space-3); border: 1px solid var(--sps-color-border-strong); border-radius: 999px; font-size: var(--sps-fs-small); font-weight: 600; }
.sps-badge-slot { display: flex; gap: var(--sps-space-4); align-items: center; margin-top: var(--sps-space-5); }
.sps-badge-slot__ph { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 2px dashed var(--sps-color-border-strong); background: var(--sps-color-surface-alt);
  display: grid; place-items: center; text-align: center; font-size: 0.6875rem; font-weight: 600; line-height: 1.25; color: var(--sps-color-text-muted); padding: var(--sps-space-2); }
.sps-badge-slot p { margin: 0; font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }

/* ---------- 11. Placeholders (photo, booking widget). Remove when real assets/tools arrive ---------- */
.sps-ph { position: relative; margin: 0; display: grid; place-items: center; padding: var(--sps-space-5); text-align: center; border-radius: var(--sps-radius-lg);
  border: 2px dashed var(--sps-color-border-strong); color: var(--sps-color-text-muted); font-size: var(--sps-fs-small);
  background: repeating-linear-gradient(135deg, var(--sps-color-surface-alt) 0 14px, #EDEAE3 14px 28px); }
.sps-ph--photo { aspect-ratio: 4 / 3; }
.sps-ph--portrait { aspect-ratio: 4 / 5; }
.sps-ph__label { max-width: 22rem; background: var(--sps-color-surface-alt); padding: var(--sps-space-2) var(--sps-space-3); border-radius: var(--sps-radius); }
.sps-ph__label strong { display: block; color: var(--sps-color-text); font-family: var(--sps-font-head); }
.sps-booking { min-height: 26rem; align-content: center; gap: var(--sps-space-4); background: var(--sps-color-surface); }
.sps-booking img { width: 4.5rem; height: 4.5rem; margin-inline: auto; }
.sps-booking .sps-ph__label { background: var(--sps-color-surface); }
.sps-booking__mock { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(100%, 18rem); margin-inline: auto; }
.sps-booking__mock span { aspect-ratio: 1; border-radius: 4px; background: var(--sps-color-surface-alt); }
.sps-booking__mock span:nth-child(9), .sps-booking__mock span:nth-child(17) { background: var(--sps-color-border); }

/* ---------- 12. Content (interior) ---------- */
.sps-layout { display: grid; gap: var(--sps-space-7); }
@media (min-width: 1024px) { .sps-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sps-space-9); align-items: start; } }
.sps-prose { max-width: 46rem; min-width: 0; }
.sps-prose h2 { margin-top: var(--sps-space-8); }
.sps-prose h3 { margin-top: var(--sps-space-6); }
.sps-prose > :first-child { margin-top: 0; }
.sps-prose h2 + .sps-penline { margin-top: calc(-1 * var(--sps-space-2)); }
.sps-check-list { list-style: none; padding: 0; margin: var(--sps-space-4) 0 var(--sps-space-5); display: grid; gap: var(--sps-space-3); }
.sps-check-list li { position: relative; padding-left: 2rem; }
.sps-check-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: .9rem; height: .9rem; background: var(--sps-color-accent); clip-path: polygon(50% 8%, 100% 92%, 78% 92%, 50% 42%, 22% 92%, 0 92%); }
@media (min-width: 640px) { .sps-check-list--cols { grid-template-columns: 1fr 1fr; gap: var(--sps-space-3) var(--sps-space-6); } }
.sps-defs { margin: var(--sps-space-4) 0 var(--sps-space-5); display: grid; gap: 0; border-top: 1px solid var(--sps-color-border); }
.sps-defs > div { padding: var(--sps-space-4) 0; border-bottom: 1px solid var(--sps-color-border); display: grid; gap: var(--sps-space-1); }
@media (min-width: 640px) { .sps-defs > div { grid-template-columns: 12rem 1fr; gap: var(--sps-space-5); } }
.sps-defs dt { font-family: var(--sps-font-head); font-weight: 600; }
.sps-defs dd { margin: 0; color: var(--sps-color-text-muted); }
.sps-ol { padding-left: 1.5rem; display: grid; gap: var(--sps-space-3); }
.sps-ol li::marker { font-family: var(--sps-font-head); font-weight: 700; color: var(--sps-color-accent-ink); }
.sps-media-row { display: grid; gap: var(--sps-space-4); grid-template-columns: auto 1fr; align-items: center; margin: var(--sps-space-8) 0 var(--sps-space-4); }
.sps-media-row img { width: 3.5rem; height: 3.5rem; }
.sps-media-row h2 { margin: 0 !important; }

.sps-aside { display: grid; gap: var(--sps-space-5); }
@media (min-width: 1024px) { .sps-aside--sticky { position: sticky; top: var(--sps-space-5); } }
.sps-aside-card { background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); padding: var(--sps-space-5); }
.sps-aside-card h2 { font-size: 1.125rem; margin-bottom: var(--sps-space-3); }
.sps-aside-card > p { font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }
.sps-aside-card dl { margin: 0 0 var(--sps-space-5); font-size: var(--sps-fs-small); }
.sps-aside-card dt { font-weight: 600; margin-top: var(--sps-space-3); }
.sps-aside-card dt:first-child { margin-top: 0; }
.sps-aside-card dd { margin: 0; color: var(--sps-color-text-muted); }
.sps-aside-card dd a { color: var(--sps-color-primary); }
.sps-aside-card .sps-button + .sps-button { margin-top: var(--sps-space-3); }
.sps-aside-card--fir { background: var(--sps-color-primary); border-color: var(--sps-color-primary); color: var(--sps-color-on-primary); }
.sps-aside-card--fir h2 { color: #FFFFFF; }
.sps-aside-card--fir > p { color: var(--sps-color-on-fir-muted); }
.sps-aside-card--fir :focus-visible { outline-color: var(--sps-color-accent-on-dark); }
.sps-call { display: inline-flex; align-items: center; gap: var(--sps-space-2); min-height: 2.75rem; font-family: var(--sps-font-head); font-weight: 700; font-size: 1.375rem; color: var(--sps-color-primary); text-decoration: none; }
.sps-call:hover { text-decoration: underline; }
.sps-aside-card--fir .sps-call { color: #FFFFFF; }

/* Fees block */
.sps-fees { width: 100%; border-collapse: collapse; margin: var(--sps-space-4) 0; font-size: var(--sps-fs-small); background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); overflow: hidden; }
.sps-fees caption { text-align: left; font-family: var(--sps-font-head); font-weight: 600; padding-bottom: var(--sps-space-3); caption-side: top; }
.sps-fees th, .sps-fees td { text-align: left; padding: var(--sps-space-3) var(--sps-space-4); border-bottom: 1px solid var(--sps-color-border); vertical-align: top; }
.sps-fees thead th { background: var(--sps-color-surface-alt); font-family: var(--sps-font-head); font-weight: 600; }
.sps-fees tbody th { font-weight: 600; }
.sps-fees td:last-child, .sps-fees th:last-child { text-align: right; white-space: nowrap; }
.sps-fees tr:last-child > * { border-bottom: 0; }

/* FAQ */
.sps-faq { border-top: 1px solid var(--sps-color-border); max-width: 52rem; }
.sps-faq details { border-bottom: 1px solid var(--sps-color-border); }
.sps-faq summary { display: flex; justify-content: space-between; gap: var(--sps-space-4); align-items: center; min-height: 2.75rem; padding: var(--sps-space-4) 0; cursor: pointer;
  font-family: var(--sps-font-head); font-weight: 600; font-size: 1.0625rem; list-style: none; }
.sps-faq summary::-webkit-details-marker { display: none; }
.sps-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--sps-color-accent); color: var(--sps-color-accent-ink); font-size: 1.125rem; line-height: 1; }
.sps-faq details[open] summary::after { content: "\2212"; }
.sps-faq details > div { padding: 0 0 var(--sps-space-5); color: var(--sps-color-text-muted); max-width: 44rem; }
.sps-faq details > div p:last-child { margin: 0; }

/* ---------- 13. CTA band ---------- */
.sps-cta { background: var(--sps-color-primary); color: var(--sps-color-on-primary); padding-block: var(--sps-space-8); position: relative; overflow: hidden; }
.sps-cta::after { content: ""; position: absolute; right: -3rem; bottom: -1px; width: 34rem; max-width: 90%; aspect-ratio: 900 / 186; background: url("../img/sps-peaks-on-fir.svg") no-repeat right bottom / contain; opacity: .5; pointer-events: none; }
.sps-cta__inner { display: grid; gap: var(--sps-space-6); align-items: center; position: relative; z-index: 1; }
.sps-cta h2 { color: #FFFFFF; margin-bottom: var(--sps-space-3); }
.sps-cta p { color: var(--sps-color-on-fir-muted); margin: 0; max-width: 36rem; }
.sps-cta .sps-eyebrow { color: var(--sps-color-accent-on-dark); }
.sps-cta .sps-button--book { background: var(--sps-color-on-dark); color: var(--sps-color-dark); }
.sps-cta .sps-button--book:hover { background: #FFFFFF; }
@media (min-width: 1024px) { .sps-cta__inner { grid-template-columns: 1fr auto; gap: var(--sps-space-8); } }

/* ---------- 14. Footer (skin) ---------- */
.sps-footer { background: var(--sps-color-dark); color: var(--sps-color-on-dark-muted); font-size: var(--sps-fs-small); padding-top: var(--sps-space-8); }
.sps-footer a { color: var(--sps-color-on-dark); text-decoration: none; }
.sps-footer a:hover { color: var(--sps-color-accent-on-dark); text-decoration: underline; text-underline-offset: .25em; }
.sps-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sps-space-7) var(--sps-space-5); padding-bottom: var(--sps-space-7); }
.sps-footer__brand, .sps-footer__contact { grid-column: 1 / -1; }
.sps-footer__brand img { width: 18rem; height: auto; margin-bottom: var(--sps-space-5); }
.sps-footer__brand p { max-width: 24rem; margin: 0 0 var(--sps-space-3); }
.sps-footer__title { font-family: var(--sps-font-head); font-weight: 600; font-size: var(--sps-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--sps-color-accent-on-dark); margin: 0 0 var(--sps-space-4); }
.sps-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sps-space-1); }
.sps-footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.sps-footer__contact p { margin: 0 0 var(--sps-space-2); }
.sps-footer__contact .sps-tel { font-size: 1.0625rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.sps-footer__family { margin-top: var(--sps-space-4) !important; color: var(--sps-color-on-dark); }
.sps-footer__family a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgb(227 164 126 / .7); display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
.sps-footer__bar { border-top: 1px solid rgb(245 243 238 / 0.14); padding-block: var(--sps-space-4); display: flex; flex-direction: column; gap: var(--sps-space-2); }
.sps-footer__bar p { margin: 0; }
.sps-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sps-space-5); }
.sps-footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sps-color-on-dark-muted); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgb(185 192 187 / .5); }
@media (min-width: 640px) { .sps-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .sps-footer__contact { grid-column: auto; } }
@media (min-width: 1024px) {
  .sps-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--sps-space-7); }
  .sps-footer__brand { grid-column: auto; }
  .sps-footer__brand img { width: 20rem; }
  .sps-footer__bar { flex-direction: row; justify-content: space-between; align-items: center; }
}

.sps-field { display: grid; gap: var(--sps-space-2); min-width: 0; }
.sps-field__label { font-weight: 600; font-size: var(--sps-fs-small); }
.sps-field__hint { font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); margin: 0; }

.sps-input, .sps-textarea { width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.625rem 0.875rem; font: inherit; font-size: 1rem; color: var(--sps-color-text);
  background: var(--sps-color-surface); border: 1px solid var(--sps-color-border-strong); border-radius: var(--sps-radius); transition: border-color .15s ease; }
.sps-textarea { min-height: 10rem; resize: vertical; }
.sps-input:hover, .sps-textarea:hover { border-color: var(--sps-color-primary); }
.sps-input:focus, .sps-textarea:focus { outline: var(--sps-focus-ring); outline-offset: 2px; border-color: var(--sps-color-primary); }
.sps-input::placeholder, .sps-textarea::placeholder { color: #6B716D; opacity: 1; }
.sps-input[aria-invalid="true"], .sps-textarea[aria-invalid="true"] { border-color: var(--sps-color-error); box-shadow: inset 0 0 0 1px var(--sps-color-error); }

/* Book / Contact page */
.sps-book { display: grid; gap: var(--sps-space-6); align-items: start; }
@media (min-width: 1024px) { .sps-book { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sps-space-8); } }
.sps-contact { display: grid; gap: var(--sps-space-7); align-items: start; }
@media (min-width: 1024px) { .sps-contact { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sps-space-8); } }

/* ---------- 16. 404 ---------- */
.sps-404 { text-align: center; padding-block: var(--sps-space-8) var(--sps-space-9); }
.sps-404 img { width: min(100%, 26rem); margin: 0 auto var(--sps-space-6); }
.sps-404 .sps-lead { max-width: 34rem; margin-inline: auto; color: var(--sps-color-text-muted); }
.sps-404 .sps-button-row { justify-content: center; margin-top: var(--sps-space-6); }
.sps-404__links { list-style: none; padding: 0; margin: var(--sps-space-6) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sps-space-5); }
.sps-404__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--sps-font-head); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .sps-card:hover, .sps-card:focus-within { transform: none; } }
@media print { .sps-topbar, .sps-header nav, .sps-nav-toggle, .sps-hero__art, .sps-cta::after { display: none !important; } }

/* =====================================================================
   v2 additions
   ===================================================================== */
/* top bar: full line from 768, location only below */
.sps-topbar__more { display: none; }
@media (min-width: 768px) { .sps-topbar__more { display: inline; } }

/* real photo */
.sps-photo { margin: 0; }
.sps-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sps-radius-lg); border: 1px solid var(--sps-color-border); box-shadow: var(--sps-shadow-card); }
.sps-photo figcaption { margin-top: var(--sps-space-3); font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }
.sps-aside .sps-photo { max-width: 22rem; }

/* trust chips + real NNA badge (300 px artwork, shown at 96 px; never upscaled or recoloured) */
.sps-trust { list-style: none; padding: 0; margin: var(--sps-space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--sps-space-2); }
.sps-trust li { display: inline-flex; align-items: center; gap: var(--sps-space-2); padding: var(--sps-space-1) var(--sps-space-3); background: var(--sps-color-surface); border: 1px solid var(--sps-color-border-strong); border-radius: 999px; font-size: var(--sps-fs-small); font-weight: 600; }
.sps-trust li::before { content: ""; width: .6rem; height: .6rem; background: var(--sps-color-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sps-nna { display: flex; gap: var(--sps-space-4); align-items: center; margin-top: var(--sps-space-5); }
.sps-nna img { flex: none; width: 6rem; height: 6rem; }
.sps-nna p { margin: 0; font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }

/* fee table with legal basis column */
.sps-fees--law td:last-child, .sps-fees--law th:last-child { text-align: left; white-space: normal; color: var(--sps-color-text-muted); }
.sps-fees--law td:nth-child(2) { font-weight: 600; color: var(--sps-color-text); }
.sps-fees__law-note { display: inline-flex; align-items: center; gap: var(--sps-space-2); margin: 0 0 var(--sps-space-2); padding: 2px var(--sps-space-3); border-radius: 999px; background: var(--sps-color-primary); color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; }
.sps-fees-intro { margin-bottom: var(--sps-space-2); }
@media (max-width: 639px) {
  .sps-fees--law thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sps-fees--law, .sps-fees--law tbody, .sps-fees--law tr, .sps-fees--law th, .sps-fees--law td { display: block; }
  .sps-fees--law tr { padding: var(--sps-space-3) var(--sps-space-4); border-bottom: 1px solid var(--sps-color-border); }
  .sps-fees--law tr:last-child { border-bottom: 0; }
  .sps-fees--law th, .sps-fees--law td { padding: 0; border: 0; }
  .sps-fees--law td { margin-top: var(--sps-space-1); }
  .sps-fees--law td:last-child { font-size: 0.8125rem; }
}
.sps-small-print { font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }


/* may / may not lists */
.sps-dodont { display: grid; gap: var(--sps-space-4); margin: var(--sps-space-5) 0; }
@media (min-width: 768px) { .sps-dodont { grid-template-columns: 1fr 1fr; } }
.sps-dodont > div { background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); padding: var(--sps-space-5); }
.sps-dodont h3 { margin-top: 0 !important; font-size: 1.0625rem; }
.sps-dodont ul { margin: 0; }
.sps-x-list { list-style: none; padding: 0; margin: 0; }
.sps-x-list li { position: relative; padding-left: 1.6rem; margin-bottom: var(--sps-space-2); }
.sps-x-list li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .8rem; height: 2px; background: var(--sps-color-text-muted); transform: rotate(45deg); box-shadow: 0 0 0 0; }
.sps-x-list li::after { content: ""; position: absolute; left: .15rem; top: .55em; width: .8rem; height: 2px; background: var(--sps-color-text-muted); transform: rotate(-45deg); }
.sps-disclaimer { margin: var(--sps-space-5) 0; padding: var(--sps-space-4) var(--sps-space-5); border-left: 4px solid var(--sps-color-accent); background: var(--sps-color-surface-alt); border-radius: 0 var(--sps-radius) var(--sps-radius) 0; font-size: var(--sps-fs-small); }
.sps-disclaimer p { margin: 0; }

.sps-bk { background: var(--sps-color-surface); border: 1px solid var(--sps-color-border); border-radius: var(--sps-radius-lg); box-shadow: var(--sps-shadow-card); overflow: hidden; }
.sps-bk__bar { display: flex; flex-wrap: wrap; gap: var(--sps-space-2) var(--sps-space-4); align-items: center; justify-content: space-between; padding: var(--sps-space-3) var(--sps-space-5); background: var(--sps-color-surface-alt); border-bottom: 1px solid var(--sps-color-border); font-size: var(--sps-fs-small); }

/* footer legal lines */
.sps-footer__notes { padding-block: var(--sps-space-4); border-top: 1px solid rgb(245 243 238 / 0.14); display: grid; gap: var(--sps-space-2); font-size: 0.8125rem; color: var(--sps-color-on-dark-muted); }
.sps-footer__notes p { margin: 0; max-width: 60rem; }
.sps-footer__contact p { margin: 0 0 var(--sps-space-2); }

.sps-bk__note { margin: var(--sps-space-3) 0 0; font-size: 0.8125rem; color: var(--sps-color-text-muted); }

/* v2.1: office and mailing address (<address>) */
.sps-address { font-style: normal; margin: 0 0 var(--sps-space-2); overflow-wrap: normal; }
.sps-nowrap { white-space: nowrap; }
.sps-footer__label { font-weight: 600; color: var(--sps-color-on-dark); margin: var(--sps-space-4) 0 var(--sps-space-1) !important; }
.sps-footer__contact .sps-address { color: var(--sps-color-on-dark-muted); }
.sps-footer__aside { font-size: 0.8125rem; }
.sps-aside-card dd .sps-address { margin: 0; }
.sps-dd-note { display: block; font-size: 0.8125rem; margin-top: var(--sps-space-1); }

/* =====================================================================
   DNN integration (SPS theme 01.00.00, added on top of mockups-v2 css/sps.css)
   ===================================================================== */
/* Tokens: the mockup wrote var(--dnn-color-primary, #1F4A42) etc. DNN 10 always defines --dnn-color-* (DNN blue
   defaults in /Portals/<id>-System/dnn-css-variables.css), so the fallbacks would never be used and the theme would
   turn DNN blue. build_css.py makes the brand colours literal; this block maps DNN's link variables back to them. */
.sps-theme { --dnn-color-primary: var(--sps-color-primary); --dnn-color-foreground-light: var(--sps-color-primary-hover); }
/* DNN default.css colours every link a,a:visited{color:var(--dnn-color-primary)} / a:hover,a:focus,a:active
   {color:var(--dnn-color-foreground-light)} (0,1,1): point those variables at each link's own colour. */
.sps-nav__link, .sps-nav-toggle, .sps-nav__close { --dnn-color-primary: var(--sps-color-text); --dnn-color-foreground-light: var(--sps-color-text); }
.sps-nav__link[aria-current="page"] { --dnn-color-primary: var(--sps-color-primary); --dnn-color-foreground-light: var(--sps-color-primary); }
.sps-button--primary, .sps-button--book, .sps-skip-link { --dnn-color-primary: #FFFFFF; --dnn-color-foreground-light: #FFFFFF; }
.sps-button--secondary { --dnn-color-primary: var(--sps-color-primary); --dnn-color-foreground-light: var(--sps-color-primary); }
.sps-button--on-dark { --dnn-color-primary: var(--sps-color-primary); --dnn-color-foreground-light: var(--sps-color-primary); }
.sps-button--ghost-dark, .sps-footer a, .sps-aside-card--fir a:not(.sps-button), .sps-cta a:not(.sps-button) { --dnn-color-primary: var(--sps-color-on-dark); --dnn-color-foreground-light: var(--sps-color-on-dark); }
.sps-topbar a { --dnn-color-primary: currentColor; --dnn-color-foreground-light: currentColor; }

/* DNN's default.css styles module text as 12px/18px #444 (.Normal): let the theme type scale win. */
.sps-theme .Normal, .sps-theme .NormalBold { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }
.sps-theme .Head { display: inline; margin: 0; }
.sps-theme img { vertical-align: baseline; }
#sps-main:focus { outline: none; }
.sps-theme { position: relative; overflow-x: clip; }
/* Phone numbers never break across lines */
.sps-theme a[href^="tel:"] { white-space: nowrap; }

/* Empty panes collapse in view mode (DNN adds .DNNEmptyPane); in edit mode they stay visible as drop zones. */
body:not(.dnnEditState) .sps-pane.DNNEmptyPane { display: none; }
.dnnEditState .sps-pane { min-height: 4rem; outline: 1px dashed var(--sps-color-border-strong); outline-offset: -4px; }

/* SidebarPane on the Book layout: the aside cards arrive inside DNN module wrappers, so put the grid gap there too. */
.sps-pane--sidebar .Normal { display: grid; gap: var(--sps-space-5); }
.sps-pane--sidebar .DnnModule + .DnnModule { margin-top: var(--sps-space-5); }

/* Utilities replacing the mockup's inline style="" (HtmlText content keeps classes, not inline styles) */
.sps-mt-0 { margin-top: 0 !important; } .sps-mt-3 { margin-top: var(--sps-space-3) !important; }
.sps-mt-4 { margin-top: var(--sps-space-4) !important; } .sps-mt-5 { margin-top: var(--sps-space-5) !important; }
.sps-mt-6 { margin-top: var(--sps-space-6) !important; }
.sps-m-0 { margin: 0 !important; } .sps-text-small { font-size: var(--sps-fs-small); }

/* Hero art is a webp <img> in content (no <picture>/<source> through the sanitizer) */

/* Visually hidden until focused (utility) */
.sps-visually-hidden-focusable:not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sps-bk__soon { padding: var(--sps-space-5); border-top: 1px solid var(--sps-color-border); }
.sps-bk__soon p { margin: 0; }
.sps-bk__soon p + p { margin-top: var(--sps-space-3); }

 

/* Containers/SPS/title.ascx */
.sps-mod { padding-block: var(--sps-space-7); }
.sps-mod__title { margin-bottom: var(--sps-space-5); }

.sps-theme .sps-bk__soon .sps-bk__note{margin:var(--sps-space-3) 0 0}

/* n1 (Carla re-test, 2026-10-24): one shared card-text style for the office/mailing address, so the office cards
   (Home, Services, Notary: .sps-option) match the Book/About aside cards: 15px (--sps-fs-small at 1024+), muted. */
.sps-theme .sps-option .sps-address,
.sps-theme .sps-aside-card dd .sps-address { font-size: var(--sps-fs-small); line-height: 1.6; color: var(--sps-color-text-muted); }

/* §12 Notary Tips: post date line and the aside link list (other tips). */
.sps-theme .sps-post-meta { margin: var(--sps-space-3) 0 0; font-size: var(--sps-fs-small); color: var(--sps-color-text-muted); }
.sps-theme .sps-card .sps-post-meta { margin: 0 0 var(--sps-space-3); }
.sps-theme .sps-linklist { list-style: none; margin: 0 0 var(--sps-space-5); padding: 0; font-size: var(--sps-fs-small); line-height: 1.5; }
.sps-theme .sps-linklist li + li { margin-top: var(--sps-space-3); }
.sps-theme .sps-card-grid + .sps-small-print { margin-top: var(--sps-space-6); }

/* §13 m6: /notary-tips has 5 cards. 2 columns (640–1023): last card centred at one column wide; 3 columns (1024+): a 3 + 2 split with the
   row of 2 centred (6-track grid, each card spans 2). Below 640 it stays a single column. */
@media (min-width: 640px) and (max-width: 1023.98px) { .sps-theme .sps-card-grid--5 > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--sps-space-5)) / 2); } }
@media (min-width: 1024px) { .sps-theme .sps-card-grid--5 { grid-template-columns: repeat(6, 1fr); } .sps-theme .sps-card-grid--5 > li { grid-column: span 2; } .sps-theme .sps-card-grid--5 > li:nth-child(4) { grid-column: 2 / span 2; } }

/* 01.00.03 header option A (Carla header-options/NOTES.md, Roggie 2026-10-25 04:59 "Go with A, stacked"):
   Header logo: D2 stacked, 224 x 80 px at all widths (logo-r2 README: stacked min 220 px wide). Footer keeps the wide mark. */
.sps-logo { padding-block: var(--sps-space-2); }
.sps-logo img { width: 14rem; height: auto; }
@media (min-width: 640px) { .sps-logo img { width: 14rem; height: auto; } }

/* 01.00.04 (Carla QA on header A): the 224 x 80 logo never shrinks; under 360 px the Menu button is icon-only
   (44 x 44 tap target, accessible name from aria-label="Menu"/"Close"; focus ring is the global :focus-visible). */
.sps-logo { flex: none; }
@media (max-width: 359.98px) {
  .sps-nav-toggle { width: 2.75rem; height: 2.75rem; padding: 0; gap: 0; justify-content: center; }
  .sps-nav-toggle__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* 01.00.04: SPS login page (DNN 10.4 Authentication / DNN login control): hide "Reset Password" (SendPassword is a 404 on SPS).
   Only this theme loads the rule, so SPP (its own skin) is unaffected. display:none also removes it from the accessibility tree.
   The row holding only that link is hidden too so no empty gap is left; a Register link, if ever enabled, keeps its row. */
.sps-theme .dnnLoginService [id$="_Login_DNN_liPassword"],
.sps-theme .dnnLoginService a[id$="_Login_DNN_passwordLink"] { display: none !important; }
.sps-theme .dnnLoginService .dnnFormItem:has(.dnnLoginActions):not(:has(.dnnActions > li:not([id$="_Login_DNN_liPassword"]))) { display: none; }