/*
Theme Name: TSN Premium
Theme URI: https://tampaservicenetwork.com/
Author: Tampa Service Network
Author URI: https://tampaservicenetwork.com/
Description: Custom classic (PHP) theme for Tampa Service Network — a mobile-first, dual-audience membership + referral network site for Tampa Bay homeowners and contractors. Flat navy/blue/gold identity, full component system (buttons, forms, cards, heroes, disclosures, FAQ accordion), accessibility-first.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tsn-premium
Tags: custom-menu, custom-logo, featured-images, sticky-post, threaded-comments, translation-ready, full-width-template
*/

/* ============================================================
   1. DESIGN TOKENS (:root) — verbatim from TSN Design System v1.0
   ============================================================ */
:root {
  /* Brand */
  --tsn-navy: #0C2B4E;
  --tsn-blue: #1463A8;
  --tsn-blue-dark: #0F4E86;
  --tsn-skyline: #E9F1F8;
  --tsn-gold: #C98A1B;
  --tsn-gold-deep: #8A5A12;
  --tsn-gold-wash: #FAF3E3;
  /* Neutrals */
  --tsn-ink: #17222E;
  --tsn-slate: #4A5A6A;
  --tsn-fog: #8A97A3;
  --tsn-line: #DCE3EA;
  --tsn-mist: #F2F4F6;
  --tsn-paper: #FFFFFF;
  --tsn-canvas: #F8FAFC;
  /* Functional */
  --tsn-success: #1E7A34;
  --tsn-success-wash: #E7F4EA;
  --tsn-error: #B3261E;
  --tsn-error-wash: #FBECEA;
  --tsn-warning: #8A5A12;
  --tsn-warning-wash: #FAF3E3;
  --tsn-info: #1463A8;
  --tsn-info-wash: #E9F1F8;
  /* Type */
  --tsn-font-head: "Bitter", Georgia, "Times New Roman", serif;
  --tsn-font-body: "Public Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;
  /* Layout */
  --wrap-narrow: 720px; --wrap-base: 1120px; --wrap-wide: 1280px;
  --gutter: 20px;
  /* Radius & shadow */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --sh-1: 0 1px 2px rgba(12, 43, 78, .06);
  --sh-2: 0 4px 16px rgba(12, 43, 78, .08);
  --sh-3: 0 12px 32px rgba(12, 43, 78, .12);
  /* Breakpoints (use in min-width queries) */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tsn-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tsn-ink);
  background: var(--tsn-canvas);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tsn-blue); text-underline-offset: 2px; touch-action: manipulation; }
button { font: inherit; touch-action: manipulation; cursor: pointer; }

h1, h2, h3 { font-family: var(--tsn-font-head); color: var(--tsn-ink); margin: 0 0 var(--sp-4); }
h1, .tsn-h1 { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 1024px) { h1, .tsn-h1 { font-size: 3rem; } }
h2, .tsn-h2 { font-size: 1.625rem; line-height: 1.15; font-weight: 600; }
@media (min-width: 1024px) { h2, .tsn-h2 { font-size: 2.25rem; } }
h3, .tsn-h3 { font-size: 1.3125rem; line-height: 1.25; font-weight: 600; }
@media (min-width: 1024px) { h3, .tsn-h3 { font-size: 1.5rem; } }
h4, .tsn-h4 {
  font-family: var(--tsn-font-body); font-size: 0.8125rem; font-weight: 700;
  line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tsn-gold-deep); margin: 0 0 var(--sp-3);
}
p { margin: 0 0 var(--sp-4); }
.tsn-lead { font-size: 1.125rem; line-height: 1.6; color: var(--tsn-slate); }
@media (min-width: 1024px) { .tsn-lead { font-size: 1.25rem; } }
.tsn-small { font-size: 0.875rem; line-height: 1.5; color: var(--tsn-slate); }
.tsn-micro { font-size: 0.8125rem; line-height: 1.4; font-weight: 500; color: var(--tsn-slate); }
.tsn-price, table, .tsn-stat__number { font-variant-numeric: tabular-nums; }

/* Eyebrow + gold rule pairing (brand signature) */
.tsn-eyebrow-rule { width: 32px; height: 4px; background: var(--tsn-gold); margin: 0 0 var(--sp-3); }
.tsn-hero-rule { width: 64px; height: 4px; background: var(--tsn-gold); margin: 0 0 var(--sp-4); }
.tsn-on-dark .tsn-eyebrow-rule, .tsn-on-dark .tsn-hero-rule { background: var(--tsn-gold); }
.tsn-on-dark h4, .tsn-on-dark .tsn-h4 { color: var(--tsn-gold); }

/* Focus visibility (DS §6.1) */
:focus-visible { outline: 3px solid var(--tsn-blue); outline-offset: 2px; border-radius: 4px; }
.tsn-on-dark :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}

/* Skip link */
.tsn-skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--tsn-navy); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
}
.tsn-skip-link:focus { top: var(--sp-4); color: #fff; }
.tsn-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;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.tsn-wrap { max-width: var(--wrap-base); margin-inline: auto; padding-inline: var(--gutter); }
.tsn-wrap--narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.tsn-wrap--wide { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.tsn-section { padding-block: var(--sp-12); }
@media (min-width: 768px) { .tsn-section { padding-block: var(--sp-24); } }
.tsn-section--tight { padding-block: var(--sp-8); }
@media (min-width: 768px) { .tsn-section--tight { padding-block: var(--sp-16); } }
.tsn-section--paper { background: var(--tsn-paper); }
.tsn-section--mist { background: var(--tsn-mist); }
.tsn-section--skyline { background: var(--tsn-skyline); }
.tsn-section--navy { background: var(--tsn-navy); color: #fff; }
.tsn-section--navy h1, .tsn-section--navy h2, .tsn-section--navy h3 { color: #fff; }
.tsn-section--navy p { color: rgba(255,255,255,.85); }

.tsn-prose { max-width: 68ch; }
.tsn-prose > *:last-child { margin-bottom: 0; }

/* Grid */
.tsn-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .tsn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .tsn-grid { gap: var(--sp-6); } }
@media (min-width: 1024px) { .tsn-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .tsn-grid--stats { grid-template-columns: repeat(4, 1fr); } }

/* Text + media split — stacks <900px (DS §5.2 hero-split note: dedicated 900px query) */
.tsn-split { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) {
  .tsn-split { grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
  .tsn-split__text { max-width: 560px; }
}

/* ============================================================
   4. BUTTONS (DS §4.1)
   ============================================================ */
.tsn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 28px; border-radius: var(--r-md);
  font-family: var(--tsn-font-body); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.01em; line-height: 1; text-decoration: none;
  border: 2px solid transparent; transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.tsn-btn svg { width: 20px; height: 20px; flex: none; }
.tsn-btn--primary { background: var(--tsn-blue); color: #fff; }
.tsn-btn--primary:hover { background: var(--tsn-blue-dark); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-2); }
.tsn-btn--primary:active { background: #0C3F6E; transform: none; }
.tsn-btn--primary:disabled { background: var(--tsn-mist); color: var(--tsn-fog); box-shadow: none; transform: none; cursor: not-allowed; }
.tsn-btn--secondary { border-color: var(--tsn-navy); color: var(--tsn-navy); background: transparent; }
.tsn-btn--secondary:hover { background: var(--tsn-skyline); color: var(--tsn-navy); text-decoration: none; }
.tsn-btn--secondary:active { background: #D8E6F3; }
.tsn-btn--secondary:disabled { border-color: var(--tsn-line); color: var(--tsn-fog); cursor: not-allowed; }
.tsn-btn--secondary-light { border-color: #fff; color: #fff; background: transparent; }
.tsn-btn--secondary-light:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.tsn-btn--secondary-light:active { background: rgba(255,255,255,.2); }
.tsn-btn--text {
  min-height: 44px; padding: 10px 4px; color: var(--tsn-blue); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; border: 0; background: none;
}
.tsn-btn--text:hover { color: var(--tsn-blue-dark); text-decoration-thickness: 2px; }
.tsn-btn--block { width: 100%; }
.tsn-btn--hero { min-height: 52px; width: 100%; }
@media (min-width: 640px) { .tsn-btn--hero { width: auto; } }
.tsn-btn.is-loading { position: relative; pointer-events: none; }
.tsn-btn__spinner {
  width: 20px; height: 20px; border: 2.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: tsn-spin .7s linear infinite; flex: none;
}
@keyframes tsn-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .tsn-btn--primary:hover { box-shadow: var(--sh-2); }
}

/* ============================================================
   5. FORMS (DS §4.2) — theme styles for theme-owned forms;
   Platform Pro renders its own markup (do not restyle its internals here).
   ============================================================ */
.tsn-field { margin-bottom: var(--sp-4); }
.tsn-field > label, .tsn-label {
  display: block; font-weight: 600; font-size: 0.875rem; color: var(--tsn-ink);
  margin-bottom: 8px;
}
.tsn-required { color: var(--tsn-error); font-weight: 700; }
.tsn-field input[type="text"], .tsn-field input[type="email"], .tsn-field input[type="tel"],
.tsn-field input[type="number"], .tsn-field input[type="url"], .tsn-field input[type="search"],
.tsn-field textarea, .tsn-field select,
.tsn-input {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1.5px solid var(--tsn-line); border-radius: var(--r-md);
  background: var(--tsn-paper); color: var(--tsn-ink);
  font-family: var(--tsn-font-body); font-size: 1rem; line-height: 1.5;
}
.tsn-field textarea { min-height: 140px; resize: vertical; }
.tsn-field input:focus, .tsn-field textarea:focus, .tsn-field select:focus, .tsn-input:focus {
  border-color: var(--tsn-blue); box-shadow: 0 0 0 3px rgba(20,99,168,.18); outline: none;
}
.tsn-field__hint { font-size: 0.8125rem; color: var(--tsn-slate); margin-top: 6px; }
.tsn-field--error input, .tsn-field--error textarea, .tsn-field--error select {
  border-color: var(--tsn-error);
}
.tsn-field__error { display: flex; gap: 6px; align-items: flex-start; color: var(--tsn-error); font-size: 0.875rem; font-weight: 600; margin-top: 8px; }
.tsn-field__error svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.tsn-form-errors {
  background: var(--tsn-error-wash); border-left: 2px solid var(--tsn-error);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-6);
}
.tsn-form-errors h2 { font-size: 1.125rem; margin-bottom: var(--sp-2); color: var(--tsn-error); }
.tsn-form-errors ul { margin: 0; padding-left: var(--sp-6); }
/* Select chevron */
.tsn-field select, select.tsn-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  padding-right: 48px;
}
/* Checkbox / radio rows */
.tsn-check { display: flex; gap: var(--sp-3); align-items: flex-start; min-height: 44px; padding: 10px 0; cursor: pointer; }
.tsn-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tsn-check__box {
  width: 24px; height: 24px; flex: none; border: 2px solid var(--tsn-line);
  border-radius: var(--r-sm); background: var(--tsn-paper); display: inline-flex;
  align-items: center; justify-content: center; transition: background-color .12s ease;
}
.tsn-check__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.tsn-check input:checked + .tsn-check__box { background: var(--tsn-blue); border-color: var(--tsn-blue); }
.tsn-check input:checked + .tsn-check__box svg { opacity: 1; }
.tsn-check input:focus-visible + .tsn-check__box { outline: 3px solid var(--tsn-blue); outline-offset: 2px; }
.tsn-check__label { font-size: 1rem; color: var(--tsn-ink); }
/* Consent block (DS §4.2 — full sentences, not footnote checkboxes) */
.tsn-consent {
  background: var(--tsn-mist); border-radius: var(--r-md); padding: var(--sp-4);
  margin: var(--sp-6) 0;
}
.tsn-consent p { font-size: 0.875rem; color: var(--tsn-slate); margin: 0 0 var(--sp-2); }
.tsn-consent a { text-decoration: underline; }
/* Honeypot (never display:none) */
.tsn-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Submit row */
.tsn-form__submit { margin-top: var(--sp-6); }
.tsn-form__submit .tsn-btn { width: 100%; }
@media (min-width: 640px) { .tsn-form__submit .tsn-btn { width: auto; } }
.tsn-form__microcopy { font-size: 0.8125rem; color: var(--tsn-slate); margin-top: var(--sp-3); }
/* Two-column field pairs */
@media (min-width: 640px) {
  .tsn-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
/* Platform Pro form slot — disclosure + consent spacing around plugin forms */
.tsn-plugin-form .tsn-callout { margin-bottom: var(--sp-6); }

/* ============================================================
   6. CARDS, CALLOUTS, FAQ, BADGES, MEDIA PLACEHOLDER
   ============================================================ */
.tsn-card {
  background: var(--tsn-paper); border: 1px solid var(--tsn-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--sp-6);
  position: relative;
}
@media (min-width: 768px) { .tsn-card { padding: var(--sp-8); } }
.tsn-card--accent { border-top: 4px solid var(--tsn-gold); }
.tsn-card__title { font-size: 1.3125rem; font-weight: 600; margin-bottom: var(--sp-2); }
.tsn-card p { color: var(--tsn-slate); }
.tsn-card__meta { font-size: 0.8125rem; color: var(--tsn-slate); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--tsn-line); }
.tsn-card__link { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); }
.tsn-card__link svg { width: 18px; height: 18px; }
.tsn-monogram {
  width: 56px; height: 56px; border-radius: var(--r-md); background: var(--tsn-navy);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tsn-font-head); font-weight: 700; font-size: 1.25rem; margin-bottom: var(--sp-4);
}
@media (hover: hover) and (pointer: fine) {
  .tsn-card--hoverable:hover { transform: translateY(-2px); box-shadow: var(--sh-2); transition: transform .16s ease, box-shadow .16s ease; }
}

/* Callouts (DS §4.6) — disclosure is first-class, never fine print */
.tsn-callout { border-radius: var(--r-md); padding: var(--sp-6); margin: var(--sp-6) 0; }
.tsn-callout__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tsn-callout__head svg { width: 18px; height: 18px; }
.tsn-callout__label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.tsn-callout p { margin-bottom: var(--sp-2); font-size: 0.9375rem; }
.tsn-callout p:last-child { margin-bottom: 0; }
.tsn-callout--disclosure { background: var(--tsn-gold-wash); border-left: 3px solid var(--tsn-gold); }
.tsn-callout--disclosure .tsn-callout__label { color: var(--tsn-gold-deep); }
.tsn-callout--disclosure p { color: var(--tsn-slate); }
.tsn-callout--trust { background: var(--tsn-skyline); border-left: 3px solid var(--tsn-blue); }
.tsn-callout--trust .tsn-callout__label { color: var(--tsn-blue); }
.tsn-callout--trust p { color: var(--tsn-slate); }
.tsn-callout--warning { background: var(--tsn-warning-wash); border-left: 3px solid var(--tsn-error); }
.tsn-callout--warning .tsn-callout__label { color: var(--tsn-error); }
.tsn-callout--warning p { color: var(--tsn-slate); }

/* FAQ accordion (DS §4.7) */
.tsn-faq { max-width: var(--wrap-narrow); margin: 0 auto; }
.tsn-faq__item { border-bottom: 1px solid var(--tsn-line); }
.tsn-faq__item:first-child { border-top: 1px solid var(--tsn-line); }
.tsn-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 20px 0; background: none; border: 0; text-align: left;
  font-size: 1.0625rem; font-weight: 600; color: var(--tsn-ink); min-height: 44px;
}
@media (min-width: 768px) { .tsn-faq__q { padding: 24px 0; } }
.tsn-faq__icon {
  width: 24px; height: 24px; flex: none; border: 2px solid var(--tsn-navy); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.tsn-faq__icon svg { width: 12px; height: 12px; color: var(--tsn-navy); }
.tsn-faq__q[aria-expanded="true"] .tsn-faq__icon { transform: rotate(45deg); }
.tsn-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.tsn-faq__q[aria-expanded="true"] + .tsn-faq__a { grid-template-rows: 1fr; }
.tsn-faq__a-inner { overflow: hidden; }
.tsn-faq__a-inner > div { padding: 0 var(--sp-6) var(--sp-6) 0; color: var(--tsn-slate); max-width: 68ch; }

/* Badges (DS §4.10) — full-round is the one allowed exception */
.tsn-badge {
  display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 999px;
  line-height: 1;
}
.tsn-badge--navy { background: var(--tsn-navy); color: #fff; }
.tsn-badge--blue { background: var(--tsn-skyline); color: var(--tsn-navy); border: 1px solid var(--tsn-blue); }
.tsn-badge--gold { background: var(--tsn-gold); color: var(--tsn-navy); }
.tsn-badge--success { background: var(--tsn-success-wash); color: var(--tsn-success); }
.tsn-badge--neutral { background: var(--tsn-mist); color: var(--tsn-slate); }

/* Media placeholder (DS §7.3) — solid flat fills only, never shipped to prod */
.tsn-media-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--tsn-skyline); border: 1px solid var(--tsn-line);
  border-radius: var(--r-xl); aspect-ratio: 4 / 3; padding: var(--sp-6); text-align: center;
}
@media (min-width: 1024px) { .tsn-media-placeholder { aspect-ratio: 16 / 10; } }
.tsn-media-placeholder svg { width: 48px; height: 48px; color: var(--tsn-blue); }
.tsn-media-placeholder span { font-size: 0.8125rem; font-weight: 500; color: var(--tsn-slate); letter-spacing: 0.06em; }
.tsn-media-placeholder--dark { background: var(--tsn-navy); border-color: rgba(255,255,255,.15); }
.tsn-media-placeholder--dark svg { color: var(--tsn-gold); }
.tsn-media-placeholder--dark span { color: rgba(255,255,255,.75); }

/* Breadcrumb */
.tsn-breadcrumb { font-size: 0.8125rem; color: var(--tsn-slate); margin-bottom: var(--sp-4); }
.tsn-breadcrumb a { color: var(--tsn-slate); text-decoration: none; }
.tsn-breadcrumb a:hover { color: var(--tsn-blue); text-decoration: underline; }
.tsn-breadcrumb [aria-current] { color: var(--tsn-ink); font-weight: 600; }

/* ============================================================
   7. HEROES (DS §4.4) + CTA BAND (§4.5)
   ============================================================ */
.tsn-hero { position: relative; overflow: hidden; }
.tsn-hero__inner { padding-block: var(--sp-12); }
@media (min-width: 768px) { .tsn-hero__inner { padding-block: var(--sp-24); } }

/* Hero A — Split (default for service pages). Stacks <900px (DS §5.2 hero-split note) */
.tsn-hero--split { background: var(--tsn-paper); }
.tsn-hero--split-sky { background: var(--tsn-skyline); }
.tsn-hero__title { font-size: 2.5rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--sp-4); }
@media (min-width: 1024px) { .tsn-hero__title { font-size: 4rem; } }
.tsn-hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (min-width: 640px) { .tsn-hero__actions { flex-direction: row; align-items: center; } }
.tsn-hero__actions .tsn-btn { width: 100%; }
@media (min-width: 640px) { .tsn-hero__actions .tsn-btn { width: auto; } }
.tsn-hero__trust { font-size: 0.8125rem; color: var(--tsn-slate); margin-top: var(--sp-4); }
.tsn-hero__media .tsn-media-placeholder, .tsn-hero__media img { border-radius: var(--r-xl); }

/* Hero B — Navy statement (homepage, campaign landings; max one per page) */
.tsn-hero--navy { background: var(--tsn-navy); color: #fff; }
.tsn-hero--navy .tsn-hero__inner { min-height: 480px; display: flex; align-items: center; }
@media (min-width: 1024px) { .tsn-hero--navy .tsn-hero__inner { min-height: 560px; } }
.tsn-hero--navy .tsn-hero__title { color: #fff; }
.tsn-hero--navy .tsn-lead { color: rgba(255,255,255,.85); }
.tsn-hero--navy .tsn-hero__trust { color: rgba(255,255,255,.75); }
.tsn-hero__texture { position: absolute; inset: 0; opacity: .06; pointer-events: none; }
.tsn-hero__content { position: relative; z-index: 1; }

/* Hero C — Compact page header (interior pages) */
.tsn-hero--compact { background: var(--tsn-mist); }
.tsn-hero--compact .tsn-hero__inner { padding-block: var(--sp-16); }
@media (min-width: 768px) { .tsn-hero--compact .tsn-hero__inner { padding-block: var(--sp-24); } }

/* CTA band (DS §4.5) — max one per page, after main content, before footer */
.tsn-cta-band { background: var(--tsn-navy); color: #fff; text-align: center; padding-block: var(--sp-16); }
@media (min-width: 768px) { .tsn-cta-band { padding-block: var(--sp-24); } }
.tsn-cta-band__inner { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.tsn-cta-band__rule { width: 64px; height: 4px; background: var(--tsn-gold); margin: 0 auto var(--sp-6); }
.tsn-cta-band h2 { color: #fff; font-size: 1.875rem; }
@media (min-width: 1024px) { .tsn-cta-band h2 { font-size: 2.5rem; } }
.tsn-cta-band p { color: rgba(255,255,255,.85); font-size: 1.0625rem; }
.tsn-cta-band__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); align-items: stretch; }
@media (min-width: 640px) { .tsn-cta-band__actions { flex-direction: row; justify-content: center; } }

/* ============================================================
   8. HEADER / NAV (DS §4.8)
   ============================================================ */
.tsn-topbar { display: none; background: var(--tsn-navy); color: #fff; font-size: 0.8125rem; }
@media (min-width: 1024px) {
  .tsn-topbar { display: block; }
  .tsn-topbar__inner {
    max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter);
    height: 36px; display: flex; align-items: center; justify-content: space-between;
  }
  .tsn-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
  .tsn-topbar a:hover { text-decoration: underline; text-decoration-color: var(--tsn-gold); text-underline-offset: 3px; }
  .tsn-topbar__left { display: flex; gap: var(--sp-4); align-items: center; color: rgba(255,255,255,.85); }
}
.tsn-header {
  position: sticky; top: 0; z-index: 100; background: var(--tsn-paper);
  border-bottom: 1px solid var(--tsn-line); box-shadow: var(--sh-1);
  transition: box-shadow .16s ease;
}
.tsn-header.is-scrolled { box-shadow: var(--sh-2); }
.tsn-header__inner {
  max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter);
  height: 72px; display: flex; align-items: center; gap: var(--sp-4);
}
@media (min-width: 1024px) { .tsn-header__inner { height: 80px; gap: var(--sp-6); } }
.tsn-logo { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex: none; }
.tsn-logo img { height: 40px; width: auto; }
.tsn-logo__wordmark {
  font-family: var(--tsn-font-head); font-weight: 700; color: var(--tsn-navy);
  font-size: 1.125rem; line-height: 1.1; letter-spacing: -0.01em;
}
.tsn-logo__wordmark small { display: block; font-family: var(--tsn-font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tsn-gold-deep); }
.tsn-nav { display: none; }
@media (min-width: 1024px) {
  .tsn-nav { display: block; margin-right: auto; }
  .tsn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
  .tsn-nav li { position: relative; }
  .tsn-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
    color: var(--tsn-ink); font-weight: 600; font-size: 1rem; text-decoration: none;
    border-bottom: 3px solid transparent;
  }
  .tsn-nav a:hover { color: var(--tsn-blue); }
  .tsn-nav .current-menu-item > a, .tsn-nav .current-page-ancestor > a {
    color: var(--tsn-blue); border-bottom-color: var(--tsn-gold);
  }
  .tsn-nav .sub-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
    background: var(--tsn-paper); border-radius: var(--r-md); box-shadow: var(--sh-3);
    padding: var(--sp-2); flex-direction: column; gap: 0;
  }
  .tsn-nav li:hover > .sub-menu, .tsn-nav li:focus-within > .sub-menu { display: flex; }
  .tsn-nav .sub-menu a { min-height: 44px; padding: var(--sp-2) var(--sp-3); border-bottom: 0; width: 100%; }
}
.tsn-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.tsn-header__phone {
  display: inline-flex; align-items: center; gap: 8px; color: var(--tsn-blue);
  font-weight: 600; font-size: 1rem; text-decoration: none; min-height: 44px; padding: 0 var(--sp-2);
}
.tsn-header__phone svg { width: 20px; height: 20px; }
.tsn-header__phone:hover { color: var(--tsn-blue-dark); }
.tsn-header__cta { display: none; }
@media (min-width: 1024px) {
  .tsn-header__cta { display: inline-flex; gap: var(--sp-3); }
  .tsn-header__cta .tsn-btn { min-height: 48px; padding: 12px 22px; }
}
/* Hamburger */
.tsn-hamburger {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--tsn-navy); flex: none;
}
@media (min-width: 1024px) { .tsn-hamburger { display: none; } }
.tsn-hamburger svg { width: 26px; height: 26px; }
.tsn-hamburger .tsn-icon--close { display: none; }
.tsn-hamburger[aria-expanded="true"] .tsn-icon--close { display: block; }
.tsn-hamburger[aria-expanded="true"] .tsn-icon--menu { display: none; }
/* Mobile overlay panel */
.tsn-mobile-nav {
  position: fixed; inset: 72px 0 0 0; z-index: 99; background: var(--tsn-paper);
  overflow-y: auto; padding: var(--sp-6) var(--gutter) var(--sp-12);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.tsn-mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.tsn-mobile-nav__group { margin-bottom: var(--sp-6); }
.tsn-mobile-nav__label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tsn-gold-deep); margin-bottom: var(--sp-2); }
.tsn-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.tsn-mobile-nav li a {
  display: flex; align-items: center; min-height: 52px; font-size: 1.25rem; font-weight: 600;
  color: var(--tsn-ink); text-decoration: none; border-bottom: 1px solid var(--tsn-line);
}
.tsn-mobile-nav li a:hover { color: var(--tsn-blue); }
.tsn-mobile-nav__ctas { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.tsn-mobile-nav__ctas .tsn-btn { width: 100%; }
body.tsn-nav-open { overflow: hidden; }

/* ============================================================
   9. FOOTER (DS §4.9) + BACK TO TOP
   ============================================================ */
.tsn-footer { background: var(--tsn-navy); color: #fff; }
.tsn-footer a { color: #fff; }
.tsn-footer__grid {
  display: grid; gap: var(--sp-8); padding-block: var(--sp-16) var(--sp-12);
}
@media (min-width: 768px) { .tsn-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tsn-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-12); } }
.tsn-footer h2, .tsn-footer h3, .tsn-footer .tsn-widget-title {
  color: #fff; font-family: var(--tsn-font-body); font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--sp-4);
}
.tsn-footer p { color: rgba(255,255,255,.85); font-size: 0.9375rem; }
.tsn-footer ul { list-style: none; margin: 0; padding: 0; }
.tsn-footer ul li { margin-bottom: var(--sp-2); }
.tsn-footer ul a { text-decoration: none; color: rgba(255,255,255,.85); font-size: 0.9375rem; display: inline-block; min-height: 32px; line-height: 32px; }
.tsn-footer ul a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--tsn-gold); text-underline-offset: 3px; }
.tsn-footer address { font-style: normal; color: rgba(255,255,255,.85); font-size: 0.9375rem; }
.tsn-footer address a { font-weight: 600; color: #fff; text-decoration: none; }
.tsn-footer address a:hover { text-decoration: underline; }
.tsn-footer__brand .tsn-logo__wordmark { color: #fff; }
.tsn-footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.tsn-footer__social a {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.tsn-footer__social a:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.tsn-footer__social svg { width: 20px; height: 20px; }
.tsn-footer__disclosure {
  border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--sp-6);
  font-size: 0.8125rem; color: rgba(255,255,255,.7); max-width: 68ch;
}
.tsn-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: 0.8125rem; color: rgba(255,255,255,.7);
}
@media (min-width: 768px) { .tsn-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.tsn-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tsn-footer__legal a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 0.8125rem; min-height: 32px; display: inline-flex; align-items: center; }
.tsn-footer__legal a:hover { color: #fff; text-decoration: underline; }
/* Back to top */
.tsn-backtotop {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--tsn-blue); color: #fff; box-shadow: var(--sh-3);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.tsn-backtotop.is-visible { opacity: 1; visibility: visible; transform: none; }
.tsn-backtotop:hover { background: var(--tsn-blue-dark); }
.tsn-backtotop svg { width: 22px; height: 22px; }

/* ============================================================
   10. LANDING TEMPLATE CHROME (template-landing.php)
   ============================================================ */
.tsn-landing-bar { background: var(--tsn-paper); border-bottom: 1px solid var(--tsn-line); }
.tsn-landing-bar__inner {
  max-width: var(--wrap-base); margin-inline: auto; padding-inline: var(--gutter);
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.tsn-landing-footer { background: var(--tsn-navy); color: rgba(255,255,255,.7); font-size: 0.8125rem; padding: var(--sp-8) 0; }
.tsn-landing-footer a { color: #fff; }
.tsn-landing-footer__inner { max-width: var(--wrap-base); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--sp-4); }
.tsn-landing-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tsn-form-page__form { max-width: var(--wrap-narrow); margin: 0 auto; }

/* ============================================================
   11. CONTENT / EDITOR STYLES
   ============================================================ */
.tsn-entry { background: var(--tsn-paper); }
.tsn-entry__body { padding-block: var(--sp-12); }
@media (min-width: 768px) { .tsn-entry__body { padding-block: var(--sp-16); } }
.tsn-entry__body ul, .tsn-entry__body ol { color: var(--tsn-ink); }
.tsn-entry__body li { margin-bottom: var(--sp-2); }
/* Clickable cards — stretched link pattern */
.stretched-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stretched-link { position: static; }
/* WordPress alignment + captions */
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8125rem; color: var(--tsn-slate); margin-top: var(--sp-2); }
/* Tables — scrollable wrapper on mobile (DS §5.2) */
.tsn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-6); border: 1px solid var(--tsn-line); border-radius: var(--r-md); }
table.tsn-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; margin: 0; }
table.tsn-table th, table.tsn-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--tsn-line); }
table.tsn-table th { background: var(--tsn-mist); font-weight: 600; color: var(--tsn-navy); }
table.tsn-table tr:nth-child(even) td { background: var(--tsn-canvas); }
.tsn-entry__body table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-6); font-size: 0.9375rem; }
.tsn-entry__body th, .tsn-entry__body td { border: 1px solid var(--tsn-line); padding: var(--sp-3) var(--sp-4); text-align: left; }
.tsn-entry__body th { background: var(--tsn-mist); color: var(--tsn-navy); font-weight: 600; }
/* Steps list */
.tsn-steps { list-style: none; margin: 0 0 var(--sp-8); padding: 0; counter-reset: tsn-step; display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .tsn-steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.tsn-steps li { counter-increment: tsn-step; background: var(--tsn-paper); border: 1px solid var(--tsn-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--sp-6); }
.tsn-steps li::before {
  content: counter(tsn-step); display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--tsn-navy); color: #fff;
  font-family: var(--tsn-font-head); font-weight: 700; font-size: 1.125rem; margin-bottom: var(--sp-4);
}
.tsn-steps h3 { margin-bottom: var(--sp-2); }
.tsn-steps p { color: var(--tsn-slate); margin: 0; }

/* ============================================================
   12. PRINT
   ============================================================ */
@media print {
  .tsn-header, .tsn-mobile-nav, .tsn-backtotop, .tsn-cta-band, .tsn-topbar { display: none !important; }
  .tsn-hero--navy, .tsn-footer { background: #fff !important; color: var(--tsn-ink) !important; }
}

/* ============================================================
   13. PREMIUM MARKETPLACE HOMEPAGE (template-home-premium.php)
   Mobile-first. Honors existing design tokens. No invented content.
   ============================================================ */
.pm-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter, 20px); }
.pm-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.pm-center { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.pm-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tsn-paper); background: var(--tsn-blue);
  padding: .4rem .9rem; border-radius: 999px; margin: 0 0 1rem;
}
.pm-h2 {
  font-family: var(--tsn-font-head); font-weight: 700; color: var(--tsn-navy);
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -.01em;
  margin: 0 0 1rem;
}
.pm-lead { color: var(--tsn-slate); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.65; margin: 0 0 1.5rem; }
.pm-gold { color: var(--tsn-gold); }
.pm-fine { font-size: .8rem; color: var(--tsn-fog); line-height: 1.5; margin: 1rem 0 0; display: flex; gap: .4rem; align-items: flex-start; }
.pm-fine svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* Buttons */
.pm-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: .9rem 1.6rem; border-radius: 12px; border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer; line-height: 1.2;
}
.pm-btn svg { width: 18px; height: 18px; }
.pm-btn--gold { background: linear-gradient(180deg, #DFA93F, var(--tsn-gold)); color: #1d1405; box-shadow: 0 6px 18px rgba(201,138,27,.35); }
.pm-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,138,27,.45); color: #1d1405; }
.pm-btn--ghost { background: rgba(255,255,255,.7); border-color: var(--tsn-line); color: var(--tsn-navy); }
.pm-btn--ghost:hover { border-color: var(--tsn-navy); }
.pm-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.5rem 0 .5rem; }

/* Checks */
.pm-checks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; }
.pm-checks li { display: flex; gap: .7rem; align-items: flex-start; color: var(--tsn-ink); font-weight: 500; }
.pm-checks svg { width: 22px; height: 22px; flex: none; color: var(--tsn-blue); margin-top: 2px; }
@media (min-width: 640px) { .pm-checks--2col { grid-template-columns: 1fr 1fr; } }

/* ── 1. HERO ── */
.pm-hero {
  position: relative; background-size: cover; background-position: center 30%;
  color: #fff; overflow: hidden;
}
.pm-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,20,38,.92) 0%, rgba(6,20,38,.78) 42%, rgba(6,20,38,.38) 75%, rgba(6,20,38,.25) 100%);
}
.pm-hero__grid {
  position: relative; z-index: 1; display: grid; gap: 2.5rem;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
@media (min-width: 1024px) { .pm-hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3.5rem; } }
.pm-hero__title {
  font-family: var(--tsn-font-head); font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.015em;
  margin: 0 0 1.1rem; color: #fff; text-wrap: balance;
}
.pm-hero__sub { font-size: clamp(1.02rem, 2.2vw, 1.25rem); line-height: 1.6; color: rgba(255,255,255,.88); margin: 0 0 1.6rem; max-width: 34rem; }
.pm-badges { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0; padding: 0; }
.pm-badges li { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.92); }
.pm-badges svg { width: 17px; height: 17px; color: var(--tsn-gold); }
.pm-photo-credit {
  position: relative; z-index: 1; text-align: right;
  font-size: .68rem; color: rgba(255,255,255,.5); margin: 0; padding: 0 20px 10px;
}

/* Quote card */
.pm-quote-card {
  background: #fff; color: var(--tsn-ink); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(3,12,24,.45); overflow: hidden;
}
.pm-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--tsn-mist); }
.pm-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--tsn-slate);
  padding: 1rem .5rem; border-bottom: 3px solid transparent;
}
.pm-tab.is-active { color: var(--tsn-navy); background: #fff; border-bottom-color: var(--tsn-gold); }
.pm-panel { padding: 1.5rem; }
.pm-panel[hidden] { display: none; }
.pm-panel__title { font-family: var(--tsn-font-head); font-size: 1.25rem; color: var(--tsn-navy); margin: 0 0 .6rem; }
.pm-panel__body { color: var(--tsn-slate); margin: 0 0 1.2rem; }
/* Keep the embedded estimator compact inside the hero card */
.pm-quote-card .tsn-estimator { margin: 0; }

/* ── 2. CATEGORY GRID ── */
.pm-cats { background: #fff; padding-block: clamp(2rem, 4vw, 3rem); }
.pm-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (min-width: 640px) { .pm-catgrid { grid-template-columns: repeat(5, 1fr); } }
.pm-cat {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  background: var(--tsn-canvas); border: 1px solid var(--tsn-line); border-radius: 16px;
  padding: 1.4rem .8rem; text-decoration: none; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pm-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(12,43,78,.12); border-color: var(--tsn-blue); }
.pm-cat__icon { display: inline-flex; color: var(--tsn-navy); }
.pm-cat__icon svg { width: 34px; height: 34px; }
.pm-cat:hover .pm-cat__icon { color: var(--tsn-blue); }
.pm-cat__label { font-weight: 600; font-size: .9rem; color: var(--tsn-ink); line-height: 1.35; }

/* ── 3. FEATURED EV ── */
.pm-ev { background: var(--tsn-canvas); }
.pm-ev__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .pm-ev__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.pm-ev__visual { display: flex; justify-content: center; }
.pm-ev__art {
  width: 100%; max-width: 460px; aspect-ratio: 4/3; border-radius: 24px;
  background: radial-gradient(120% 120% at 20% 10%, #143a63 0%, var(--tsn-navy) 55%, #071a30 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 24px 60px rgba(12,43,78,.28); position: relative; overflow: hidden;
}
.pm-ev__art::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,138,27,.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.pm-ev__art svg { width: 72%; height: auto; position: relative; z-index: 1; }

/* ── 4. STEPS ── */
.pm-steps { background: #fff; }
.pm-stepgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 768px) { .pm-stepgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pm-stepgrid { grid-template-columns: repeat(4, 1fr); } }
.pm-step {
  position: relative; background: var(--tsn-canvas); border: 1px solid var(--tsn-line);
  border-radius: 18px; padding: 1.8rem 1.4rem; overflow: hidden;
}
.pm-step__num {
  position: absolute; top: .9rem; left: 1.2rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tsn-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tsn-font-head); font-weight: 700; font-size: 1rem;
}
.pm-step__icon { display: inline-flex; color: var(--tsn-navy); margin: 1.6rem 0 .8rem 2.6rem; }
.pm-step__icon svg { width: 30px; height: 30px; }
.pm-step__title { font-family: var(--tsn-font-head); font-size: 1.1rem; color: var(--tsn-navy); margin: 0 0 .4rem; }
.pm-step__body { color: var(--tsn-slate); font-size: .94rem; margin: 0; }

/* ── 5. CONTRACTOR BAND ── */
.pm-pros { background: var(--tsn-canvas); }
.pm-pros__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .pm-pros__grid { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.pm-pros__art {
  width: 100%; max-width: 440px; aspect-ratio: 4/3; border-radius: 24px; margin-inline: auto;
  background: radial-gradient(120% 120% at 80% 10%, #143a63 0%, var(--tsn-navy) 55%, #071a30 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 24px 60px rgba(12,43,78,.28); position: relative; overflow: hidden;
}
.pm-pros__art::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,138,27,.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.pm-pros__art svg { width: 62%; height: auto; position: relative; z-index: 1; }

/* ── 6. TRUST BAND ── */
.pm-trust { background: var(--tsn-navy); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.pm-trust__grid { display: grid; gap: 1.8rem; }
@media (min-width: 768px) { .pm-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pm-trust__grid { grid-template-columns: repeat(4, 1fr); } }
.pm-trust__item { display: flex; gap: 1rem; align-items: flex-start; }
.pm-trust__icon { display: inline-flex; color: var(--tsn-gold); flex: none; }
.pm-trust__icon svg { width: 30px; height: 30px; }
.pm-trust__title { font-family: var(--tsn-font-head); font-size: 1.05rem; margin: 0 0 .3rem; color: #fff; }
.pm-trust__body { color: rgba(255,255,255,.75); font-size: .9rem; margin: 0; line-height: 1.55; }

/* ── 7. SERVICE AREA ── */
.pm-area { background: #fff; }
.pm-area__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .pm-area__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.pm-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; padding: 0; }
.pm-chips li {
  font-weight: 600; font-size: .9rem; color: var(--tsn-navy);
  background: var(--tsn-skyline); border: 1px solid var(--tsn-line);
  padding: .5rem 1.1rem; border-radius: 999px;
}
.pm-area__visual { display: flex; justify-content: center; }
.pm-area__visual svg { width: 100%; max-width: 420px; height: auto; }

/* ── Reveal animation (subtle; honors reduced motion) ── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pm-btn:hover, .pm-cat:hover { transform: none; }
}

/* ============================================================
   14. MOBILE BOTTOM NAV + MOBILE HOMEPAGE CONCEPT (v1.2.0)
   ============================================================ */

/* ── Fixed mobile bottom navigation ── */
.tsn-bottomnav { display: none; }
@media (max-width: 767px) {
  /* Reserve space so the bar never covers content, forms, or legal text */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .tsn-bottomnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--tsn-navy);
    border-top: 1px solid rgba(255,255,255,.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px rgba(3,12,24,.35);
  }
  .tsn-bottomnav__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: .65rem .25rem .55rem; color: rgba(255,255,255,.75);
    text-decoration: none; font-size: .68rem; font-weight: 600; line-height: 1;
  }
  .tsn-bottomnav__item svg { width: 22px; height: 22px; }
  .tsn-bottomnav__item.is-active { color: var(--tsn-gold); }
  .tsn-bottomnav__item--cta { color: #1d1405; background: linear-gradient(180deg, #DFA93F, var(--tsn-gold)); font-weight: 700; }
  .tsn-bottomnav__item--cta.is-active { color: #1d1405; }
  /* Lift the back-to-top button above the bar */
  .tsn-backtotop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Mobile homepage concept ── */
.pm-hero__cta, .pm-hero__micro { display: none; }
@media (max-width: 1023px) {
  /* Compact hero: single CTA instead of the full estimator card */
  .pm-quote-card { display: none; }
  .pm-hero__cta { display: inline-flex; margin-top: 1.4rem; }
  .pm-hero__micro { display: block; color: rgba(255,255,255,.75); font-size: .9rem; margin: .8rem 0 0; }
  .pm-hero__grid { padding-block: 3rem; }
  /* "What can we help with?" — 4 featured tiles + link */
  .pm-catgrid { grid-template-columns: repeat(2, 1fr); }
  .pm-catgrid .pm-cat:not(.pm-cat--featured) { display: none; }
  .pm-cats__more { text-align: center; margin: 1.2rem 0 0; }
  .pm-cats__more a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--tsn-blue); text-decoration: none; }
  .pm-cats__more svg { width: 16px; height: 16px; }
  /* 3-step strip instead of 4 cards */
  .pm-stepgrid { display: none; }
  .pm-ministeps {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem;
    font-size: 1.05rem; color: var(--tsn-ink);
  }
  .pm-ministeps li { display: inline-flex; align-items: center; gap: .8rem; }
  .pm-ministeps span[aria-hidden] { color: var(--tsn-gold); font-weight: 700; }
}
@media (min-width: 1024px) {
  .pm-ministeps, .pm-cats__more { display: none; }
  .pm-cats__title { text-align: center; margin-bottom: 2rem; }
}
/* Independent-contractor disclosure card */
.pm-disclosure-card {
  margin-top: 2rem; background: var(--tsn-ink); color: #fff;
  border-radius: 18px; padding: 1.6rem;
}
.pm-disclosure-card h3 { font-family: var(--tsn-font-head); font-size: 1.25rem; margin: 0 0 .5rem; color: #fff; }
.pm-disclosure-card p { margin: 0; color: rgba(255,255,255,.78); }
@media (min-width: 1024px) { .pm-disclosure-card { max-width: 720px; margin-inline: auto; } }


/* ============================================================
   15. HOMEPAGE REDESIGN 2026-10 (v1.2.1) + HEADER/BOTTOMNAV FIXES
   ============================================================ */

/* ── Header: the phone number must never wrap onto two lines ── */
.tsn-header__phone { flex: 0 0 auto; }
.tsn-header__phone span { white-space: nowrap; }
@media (max-width: 560px) {
  .tsn-header__phone { font-size: .92rem; padding: 0 2px; gap: 6px; }
  .tsn-header__phone svg { width: 18px; height: 18px; }
}

/* ── Bottom nav: a little more air + anchored sections clear the bar ── */
@media (max-width: 767px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.hp-quote { scroll-margin-top: 84px; }

/* ── Shared homepage pieces ── */
.hp-eyebrow {
  margin: 0 0 .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tsn-gold);
}
.hp-eyebrow--dark { color: var(--tsn-gold-deep); }
.hp-h2 {
  font-family: var(--tsn-font-head); color: var(--tsn-ink);
  font-size: clamp(1.65rem, 3.4vw, 2.3rem); line-height: 1.15; margin: 0 0 1.6rem;
}
.hp-h2--center { text-align: center; }
.hp-h2--light { color: #fff; }
.hp-sectionlead { margin: -.9rem 0 1.6rem; color: var(--tsn-slate); font-size: 1.05rem; line-height: 1.55; max-width: 44rem; }
.hp-sectionlead--center { text-align: center; margin-inline: auto; }
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 56px; padding: .9rem 1.7rem; border-radius: 14px;
  font-weight: 700; font-size: 1.06rem; line-height: 1; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp-btn svg { width: 20px; height: 20px; }
.hp-btn--gold {
  color: #1d1405; background: linear-gradient(180deg, #DFA93F, var(--tsn-gold));
  box-shadow: 0 10px 24px rgba(201, 138, 27, .35);
}
.hp-btn--gold:hover { color: #1d1405; text-decoration: none; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(201, 138, 27, .42); }
.hp-btn--gold:focus-visible { outline: 3px solid var(--tsn-blue); outline-offset: 3px; }
.hp-btn--ghost {
  color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.65);
}
.hp-btn--ghost:hover { color: #fff; text-decoration: none; border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-1px); }
.hp-btn--ghost:focus-visible { outline: 3px solid var(--tsn-gold); outline-offset: 3px; }
.hp-textlink { font-weight: 700; color: var(--tsn-blue); text-decoration: none; }
.hp-textlink:hover { color: var(--tsn-blue-dark); text-decoration: underline; }

/* ── Hero ── */
.hp-hero { position: relative; background: var(--tsn-navy); color: #fff; overflow: hidden; }
.hp-hero__texture { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .06; pointer-events: none; }
.hp-hero__grid {
  position: relative; display: grid; gap: 1.8rem;
  padding-block: 2.4rem 2.8rem; align-items: center;
}
.hp-hero__media { order: -1; }
.hp-hero__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: 50% 30%; border-radius: 18px; box-shadow: 0 18px 40px rgba(3, 12, 24, .45);
}
.hp-hero__title {
  font-family: var(--tsn-font-head); color: #fff;
  font-size: clamp(2.05rem, 6.2vw, 3.35rem); line-height: 1.08; margin: 0 0 1rem;
}
.hp-hero__lead { font-size: clamp(1.05rem, 2.4vw, 1.25rem); line-height: 1.5; color: rgba(255,255,255,.86); margin: 0 0 1.7rem; max-width: 34rem; }
.hp-hero__cta { width: 100%; }
.hp-hero__micro { margin: .95rem 0 0; text-align: center; font-size: .95rem; color: rgba(255,255,255,.78); }
.hp-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.hp-badges { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.hp-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.88); }
.hp-badge svg { width: 19px; height: 19px; flex: none; color: var(--tsn-gold); }
@media (min-width: 768px) {
  .hp-hero__cta { width: auto; }
  .hp-hero__micro { text-align: left; }
}
@media (min-width: 1024px) {
  .hp-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding-block: 4.2rem; }
  .hp-hero__media { order: 0; }
  .hp-hero__media img { aspect-ratio: 4 / 4.4; }
}

/* ── Service category cards ── */
.hp-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.hp-cat {
  display: flex; align-items: center; gap: .8rem;
  background: var(--tsn-mist); border: 1px solid var(--tsn-line); border-radius: 16px;
  padding: 1.05rem 1rem; color: var(--tsn-ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hp-cat:hover { text-decoration: none; border-color: var(--tsn-gold); box-shadow: var(--sh-2); transform: translateY(-1px); }
.hp-cat:focus-visible { outline: 3px solid var(--tsn-blue); outline-offset: 2px; }
.hp-cat__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--tsn-gold-wash); color: var(--tsn-gold-deep);
}
.hp-cat__icon svg { width: 23px; height: 23px; }
.hp-cat__label { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.hp-cat__arrow { margin-left: auto; color: var(--tsn-fog); display: inline-flex; }
.hp-cat__arrow svg { width: 18px; height: 18px; }
.hp-cat--feature { grid-column: 1 / -1; background: var(--tsn-navy); border-color: var(--tsn-navy); color: #fff; }
.hp-cat--feature .hp-cat__icon { background: rgba(201, 138, 27, .18); color: #DFA93F; }
.hp-cat--feature .hp-cat__arrow { color: rgba(255,255,255,.6); }
.hp-cat__text { display: flex; flex-direction: column; gap: .2rem; }
.hp-cat__sub { font-size: .92rem; font-weight: 400; color: rgba(255,255,255,.8); line-height: 1.35; }
.hp-more { margin: 1.3rem 0 0; text-align: center; }
.hp-more a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--tsn-blue); text-decoration: none; }
.hp-more a:hover { color: var(--tsn-blue-dark); text-decoration: underline; }
.hp-more svg { width: 17px; height: 17px; }
@media (min-width: 768px) { .hp-catgrid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .hp-catgrid { grid-template-columns: repeat(4, 1fr); } }

/* ── How It Works ── */
.hp-stepgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.hp-step {
  background: var(--tsn-paper); border: 1px solid var(--tsn-line); border-radius: 18px;
  padding: 1.5rem 1.4rem;
}
.hp-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: .9rem;
  background: linear-gradient(180deg, #DFA93F, var(--tsn-gold)); color: #1d1405;
  font-family: var(--tsn-font-head); font-weight: 700; font-size: 1.15rem;
}
.hp-step__title { font-size: 1.18rem; margin: 0 0 .45rem; }
.hp-step__body { margin: 0; color: var(--tsn-slate); line-height: 1.55; }
.hp-note { margin: 1.6rem auto 0; max-width: 46rem; text-align: center; color: var(--tsn-slate); font-size: .97rem; }
@media (min-width: 860px) { .hp-stepgrid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }

/* ── Two-audience panels ── */
.hp-panels__grid { display: grid; gap: 1rem; }
.hp-panel {
  background: var(--tsn-paper); border: 1px solid var(--tsn-line); border-radius: 18px;
  padding: 1.7rem 1.5rem;
}
.hp-panel__title { font-family: var(--tsn-font-head); color: var(--tsn-ink); font-size: 1.45rem; line-height: 1.2; margin: 0 0 .5rem; }
.hp-panel__sub { margin: 0 0 1.2rem; color: var(--tsn-slate); font-size: 1.05rem; }
.hp-panel__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .8rem; }
.hp-panel__list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--tsn-ink); font-weight: 500; line-height: 1.45; }
.hp-panel__list svg { width: 22px; height: 22px; flex: none; color: var(--tsn-blue); margin-top: 1px; }
@media (min-width: 900px) { .hp-panels__grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }

/* ── Quote form band ── */
.hp-quote__lead { text-align: center; color: rgba(255,255,255,.85); margin: -.6rem 0 1.6rem; font-size: 1.05rem; }
.hp-quote__card {
  background: var(--tsn-paper); border-radius: 18px; padding: 1.4rem 1.2rem;
  max-width: 640px; margin-inline: auto; box-shadow: 0 18px 40px rgba(3, 12, 24, .35);
}
@media (min-width: 768px) { .hp-quote__card { padding: 2rem; } }
.hp-quote__fine { text-align: center; color: rgba(255,255,255,.75); margin: 1.2rem 0 0; font-size: .95rem; }

/* ── For Local Pros band ── */
.hp-pros__grid { display: grid; gap: 1.4rem; }
.hp-pros__body { margin: 0; color: var(--tsn-slate); line-height: 1.6; max-width: 40rem; }
.hp-pros__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (min-width: 900px) {
  .hp-pros__grid { grid-template-columns: 1.4fr .6fr; align-items: center; }
  .hp-pros__actions { align-items: flex-end; text-align: right; }
}

/* ── Disclosure spacing after the pros band ── */
.hp-disclosure { border-top: 1px solid var(--tsn-line); }

@media (prefers-reduced-motion: reduce) {
  .hp-btn, .hp-cat { transition: none; }
}

/* ============================================================
   16. HOMEPAGE VISUAL REPRODUCTION 2026-10-23
   Owner-approved reference screenshot: pill header, full-bleed
   photo hero, photo panels, six task tiles, numbered-icon steps.
   Palette follows the reference (bright royal blue family) using
   homepage-scoped tokens layered on the §15 structure.
   ============================================================ */
:root {
  --tsn-royal: #1B6AC9;
  --tsn-royal-dark: #1456A6;
  --tsn-heronavy: #0A2547;
  --tsn-heroslate: #33506B;
  --tsn-panel-blue: #EAF3FC;
  --tsn-panel-blue-line: #D3E5F6;
  --tsn-panel-green: #EAF6EC;
  --tsn-panel-green-line: #D2EDD9;
  --tsn-green: #1E9E4A;
  --tsn-green-dark: #177A39;
  --tsn-tile: #EFF5FB;
  --tsn-tile-line: #DCE8F4;
}

/* ── Header v2: brand + tagline, pill nav ── */
.tsn-header--v2 { border-bottom: 1px solid var(--tsn-line); }
.tsn-header__inner--v2 { height: 68px; }
@media (min-width: 1024px) { .tsn-header__inner--v2 { height: 88px; } }
.tsn-brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; min-width: 0; }
.tsn-header--v2 .custom-logo { height: 46px; width: auto; }
.tsn-header--v2 .tsn-logo img { height: 46px; }
@media (min-width: 1024px) {
  .tsn-header--v2 .custom-logo { height: 58px; }
  .tsn-header--v2 .tsn-logo img { height: 58px; }
}
.tsn-brand__tagline { display: none; }
@media (min-width: 768px) {
  .tsn-brand__tagline {
    display: flex; flex-direction: column; margin: 0;
    padding-left: var(--sp-3); border-left: 1px solid var(--tsn-line);
    font-size: .8rem; font-weight: 500; line-height: 1.4;
    color: var(--tsn-navy); white-space: nowrap;
  }
}
.tsn-navpill { display: none; }
@media (min-width: 1024px) {
  .tsn-navpill {
    display: flex; align-items: center; gap: 2px; margin-left: auto;
    position: relative; z-index: 5;
    background: #fff; border: 1px solid rgba(12, 43, 78, .06);
    border-radius: 999px; box-shadow: var(--sh-2); padding: 6px;
  }
  .tsn-nav--pill { display: block; margin: 0; }
  .tsn-nav--pill ul { gap: 0; }
  .tsn-nav--pill a {
    min-height: 44px; padding: 0 13px; font-size: .95rem;
    border-bottom: 0; border-radius: 999px;
  }
  .tsn-nav--pill a:hover { color: var(--tsn-royal); background: #F0F6FC; }
  .tsn-nav--pill .current-menu-item > a,
  .tsn-nav--pill .current-page-ancestor > a { color: var(--tsn-royal); background: #EAF3FC; border-bottom-color: transparent; }
  .tsn-nav--pill .sub-menu { border: 1px solid var(--tsn-line); }
  .tsn-navpill__cta {
    display: inline-flex; align-items: center; min-height: 46px; margin-left: 4px;
    padding: 0 22px; border-radius: 999px; background: var(--tsn-royal); color: #fff;
    font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
    transition: background .15s ease;
  }
  .tsn-navpill__cta:hover { background: var(--tsn-royal-dark); color: #fff; text-decoration: none; }
}
.tsn-header__inner--v2 .tsn-hamburger { margin-left: auto; }
.tsn-mobile-nav { top: 68px; }
/* Homepage: header floats over the hero photo; it turns solid on scroll
   (.is-scrolled is toggled by js/tsn.js, unchanged). */
body.home .tsn-header--v2 {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
}
body.home .tsn-header--v2.is-scrolled {
  background: var(--tsn-paper); border-bottom-color: var(--tsn-line); box-shadow: var(--sh-2);
}
body.home .hp-hero { margin-top: -69px; }
@media (min-width: 1024px) { body.home .hp-hero { margin-top: -89px; } }

/* ── Buttons: royal / outline / green (reference palette) ── */
.hp-btn--royal {
  background: var(--tsn-royal); color: #fff; border: 2px solid var(--tsn-royal);
  border-radius: 10px; box-shadow: 0 10px 22px rgba(27, 106, 201, .30);
}
.hp-btn--royal:hover { background: var(--tsn-royal-dark); border-color: var(--tsn-royal-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
.hp-btn--royal:focus-visible { outline: 3px solid var(--tsn-heronavy); outline-offset: 3px; }
.hp-btn--outline {
  background: rgba(255, 255, 255, .88); color: var(--tsn-royal);
  border: 2px solid var(--tsn-royal); border-radius: 10px;
}
.hp-btn--outline:hover { background: #fff; color: var(--tsn-royal-dark); border-color: var(--tsn-royal-dark); text-decoration: none; transform: translateY(-1px); }
.hp-btn--outline:focus-visible { outline: 3px solid var(--tsn-heronavy); outline-offset: 3px; }
.hp-btn--green {
  background: var(--tsn-green); color: #fff; border: 2px solid var(--tsn-green);
  border-radius: 10px; box-shadow: 0 10px 22px rgba(30, 158, 74, .28);
}
.hp-btn--green:hover { background: var(--tsn-green-dark); border-color: var(--tsn-green-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
.hp-btn--green:focus-visible { outline: 3px solid var(--tsn-heronavy); outline-offset: 3px; }

/* ── Hero: full-bleed photo + light scrim ── */
.hp-hero--photo { background: #C9DCEC; color: var(--tsn-ink); }
.hp-hero__bg { position: absolute; inset: 0; }
.hp-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hp-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(246, 249, 252, .88) 0%, rgba(246, 249, 252, 0) 34%),
    linear-gradient(90deg, rgba(246, 249, 252, .97) 0%, rgba(246, 249, 252, .93) 38%, rgba(246, 249, 252, .55) 62%, rgba(246, 249, 252, .08) 82%, rgba(246, 249, 252, 0) 100%);
}
.hp-hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(6.9rem, 12vw, 9.4rem) clamp(3rem, 6vw, 4.4rem);
}
.hp-hero__copy { max-width: 36.5rem; }
.hp-hero--photo .hp-hero__title {
  color: var(--tsn-heronavy);
  font-size: clamp(2.35rem, 5.4vw, 3.45rem); line-height: 1.1;
}
.hp-hero--photo .hp-hero__lead {
  color: var(--tsn-heroslate); font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.6; max-width: 31rem;
}
@media (max-width: 639px) {
  /* Strengthen the scrim so copy stays readable over the photo on phones. */
  .hp-hero__scrim {
    background:
      linear-gradient(0deg, rgba(246, 249, 252, .94) 0%, rgba(246, 249, 252, .72) 55%, rgba(246, 249, 252, .5) 100%),
      linear-gradient(90deg, rgba(246, 249, 252, .95) 0%, rgba(246, 249, 252, .85) 100%);
  }
  .hp-hero__bg img { object-position: 72% 50%; }
}

/* ── Hero trust indicators ── */
.hp-hero--photo .hp-badges { margin-top: 1.7rem; gap: .85rem 1.9rem; }
.hp-hero--photo .hp-badge { color: var(--tsn-ink); align-items: flex-start; gap: .55rem; font-weight: 500; }
.hp-hero--photo .hp-badge > svg { width: 23px; height: 23px; color: var(--tsn-royal); margin-top: 2px; }
.hp-badge__text { display: flex; flex-direction: column; line-height: 1.3; font-size: .88rem; color: var(--tsn-heroslate); }
.hp-badge__text strong { font-size: .95rem; font-weight: 700; color: var(--tsn-heronavy); }
.hp-badge__text--wide { display: block; max-width: 15.5rem; font-size: .93rem; font-weight: 600; color: var(--tsn-heronavy); }

/* ── Two-audience panels: tinted photo cards ── */
.hp-panel {
  border-radius: 20px; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.hp-panel--homeowners { background: var(--tsn-panel-blue); border-color: var(--tsn-panel-blue-line); }
.hp-panel--providers { background: var(--tsn-panel-green); border-color: var(--tsn-panel-green-line); }
.hp-panel__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hp-panel__main .hp-btn { margin-top: auto; }
.hp-panel__head { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.05rem; }
.hp-panel__head .hp-panel__sub { margin: 0; }
.hp-panel__icon {
  flex: none; width: 48px; height: 48px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.hp-panel__icon svg { width: 27px; height: 27px; }
.hp-panel__icon--blue { background: #CFE5FA; color: var(--tsn-royal); }
.hp-panel__icon--green { background: #CFEDD8; color: var(--tsn-green-dark); }
.hp-panel--homeowners .hp-panel__title,
.hp-panel--providers .hp-panel__title { color: var(--tsn-heronavy); }
.hp-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.hp-check svg { width: 13px; height: 13px; stroke-width: 3; color: #fff; margin: 0; }
.hp-check--blue { background: var(--tsn-royal); }
.hp-check--green { background: var(--tsn-green); }
.hp-panel__media { border-radius: 14px; overflow: hidden; flex: none; order: -1; }
.hp-panel__media img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: 50% 22%; }
@media (min-width: 640px) {
  .hp-panel { flex-direction: row; }
  .hp-panel__media { order: 0; width: 178px; align-self: stretch; }
  .hp-panel__media img { height: 100%; min-height: 300px; }
  .hp-panel--providers .hp-panel__media img { object-position: 50% 30%; }
}

/* ── Task tiles: six across, plain line icons ── */
.hp-catgrid--six { grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 480px) { .hp-catgrid--six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .hp-catgrid--six { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .hp-catgrid--six { grid-template-columns: repeat(6, 1fr); } }
.hp-cat--tile {
  flex-direction: column; align-items: center; text-align: center;
  gap: .75rem; padding: 1.5rem .8rem 1.3rem;
  background: var(--tsn-tile); border-color: var(--tsn-tile-line); border-radius: 14px;
}
.hp-cat--tile:hover { border-color: var(--tsn-royal); transform: translateY(-2px); }
.hp-cat--tile .hp-cat__icon {
  width: auto; height: auto; border-radius: 0;
  background: transparent; color: var(--tsn-royal);
}
.hp-cat--tile .hp-cat__icon svg { width: 36px; height: 36px; stroke-width: 1.6; }
.hp-cat--tile .hp-cat__label { font-size: .99rem; font-weight: 600; line-height: 1.3; color: var(--tsn-heronavy); }

/* ── How It Works band: heading left, six numbered-icon steps ── */
.hp-how { background: var(--tsn-skyline); }
.hp-how__grid { display: grid; gap: 2.2rem; }
@media (min-width: 1024px) {
  .hp-how__grid { grid-template-columns: 235px 1fr; align-items: center; gap: 3rem; }
}
.hp-how .hp-h2 { margin-bottom: .8rem; }
.hp-how .hp-sectionlead { margin: 0; }
.hp-how__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.8rem 1rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .hp-how__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .hp-how__list { grid-template-columns: repeat(6, 1fr); } }
.hp-how__step {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: .7rem; padding: 0 .2rem;
}
@media (max-width: 639px) {
  .hp-how__step { flex-direction: row; text-align: left; gap: 1rem; }
}
.hp-how__iconwrap { position: relative; display: inline-flex; flex: none; color: var(--tsn-royal); }
.hp-how__iconwrap > svg { width: 36px; height: 36px; }
.hp-how__num {
  position: absolute; top: -11px; left: -13px; z-index: 1;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--tsn-royal); color: #fff;
  font-size: .8rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--tsn-skyline);
}
.hp-how__label { font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--tsn-heronavy); max-width: 11rem; }
@media (max-width: 639px) { .hp-how__label { max-width: none; } }
@media (min-width: 1024px) {
  .hp-how__step::after {
    content: ""; position: absolute; top: 15px; right: -13px;
    width: 9px; height: 9px;
    border-top: 2.5px solid #A9C3DE; border-right: 2.5px solid #A9C3DE;
    transform: rotate(45deg);
  }
  .hp-how__step:last-child::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tsn-navpill__cta, .hp-cat--tile, .hp-btn--royal, .hp-btn--outline, .hp-btn--green { transition: none; }
}