/* ============================================================
   TDS Contractors — Shared Styles
   Used by: index.html + every service subpage
   ----------------------------------------------------------
   Contents:
   1. Design tokens (CSS variables)
   2. Reset & base typography
   3. Accessibility
   4. Layout utilities (.wrap, .eyebrow)
   5. Section framing (padding, variants, section-head)
   6. Topbar
   7. Primary nav + logo
   8. Breadcrumbs
   9. Hero — shared base (page CSS adds layout)
   10. Buttons
   11. FAQ (details/summary)
   12. CTA band
   13. Request form + success state
   14. Footer
   15. Placeholder image blocks (.ph)
   16. Shared responsive rules
   ============================================================ */

/* 1. Design tokens ------------------------------------------- */
:root{
  --navy:#0B2545;
  --navy-deep:#061A33;
  --sand:#EEEAE0;          /* limestone — cooled from #F5EFE6 to break the Anthropic-peach read */
  --sand-deep:#DCD3C2;     /* cooled to match */
  --copper:#B45827;        /* 4.63:1 on white (AA normal text, barely); 3.85:1 on sand (FAILS) — use --copper-deep for body links on .sand surfaces */
  --copper-hot:#D26A33;    /* bright accent — reserved for dark backgrounds (eyebrow on navy, signature badge) */
  --copper-deep:#8F441F;   /* deeper copper for hover/press AND for links on .sand sections — 8.1:1 on white, 6.7:1 on sand ✓ */
  --charcoal:#1A1A1A;
  --gray:#6B6B6B;          /* 5.33:1 on white ✓; 4.43:1 on sand FAILS — re-bound to --gray-deep inside sand contexts below */
  --gray-deep:#595959;     /* 5.84:1 on sand ✓ — backstop value used by the in-context re-binding */
  --line:#E0DCD4;
  --white:#FFFFFF;
  /* Sky-tint scale — off-whites used as text/border on navy / navy-deep.
     Replaces ad-hoc literals scattered across CSS and dark-section overrides. */
  --sky-100:#E6EAF2;       /* primary text on navy — 12.76:1 on --navy ✓ */
  --sky-200:#C9D3E2;       /* topbar copy on --navy-deep — high contrast */
  --sky-300:#B8C2D4;       /* secondary copy on navy — 8.58:1 ✓ */
  --sky-400:#8FA0B8;       /* tertiary / meta on navy — 5.4:1 ✓ */
  --sky-500:#5C6878;       /* lowest-prominence labels on navy-deep (footer coords) */
  --sand-warm:#D9CFC0;     /* warm sand variant for hero lead copy on --navy-deep */
  /* Callout palette — used by .permit-notice and noscript paragraphs */
  --notice-bg:#FFF8EF;
  --notice-border:#E9D9BF;
  --serif:"Newsreader","Iowan Old Style","Charter",Georgia,serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wide:1240px;
  
  /* Unified Spacing System Tokens */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 88px;
  --space-4xl: 120px;

  /* Typography Scale */
  --text-3xs: clamp(9px, 1vw, 10px);
  --text-2xs: clamp(10px, 1.2vw, 11px);
  --text-xs: clamp(11px, 1.5vw, 12px);
  --text-sm: clamp(12px, 1.8vw, 13px);
  --text-base-sm: clamp(13px, 2vw, 14px);
  --text-base: clamp(14px, 2.2vw, 15px);
  --text-md: clamp(15px, 2.5vw, 16px);
  --text-lg: clamp(16px, 2.8vw, 17px);
  --text-xl: clamp(16px, 3vw, 18px);
  --text-2xl: clamp(18px, 3.5vw, 20px);
  --text-3xl: clamp(19px, 4vw, 22px);
  --text-4xl: clamp(22px, 4.5vw, 26px);
  --text-5xl: clamp(25px, 5vw, 30px);
}

/* 2. Reset & base typography -------------------------------- */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--white);
  font-size:var(--text-lg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  font-feature-settings:"kern" 1, "liga" 1;
}
a{color:var(--copper);text-decoration:none}
a:hover{color:var(--copper-hot)}
/* Body links on .sand surfaces need --copper-deep (6.7:1 on sand) —
   --copper is 3.85:1 on sand and fails WCAG AA. Buttons and the
   .crumbs/.svc/.proj/.svc nav-card components have their own colors
   so we exclude classed anchors and only target body-text links. */
section.sand p a,
section.sand .a a,
form.req .privacy-note a,
form.req .submit-note a,
form.req .field-error a,
.area-foot a,
.faq-cta a{color:var(--copper-deep)}
section.sand p a:hover,
section.sand .a a:hover{color:var(--copper)}
h1,h2,h3,h4,h5{
  font-family:var(--serif);color:var(--navy);
  font-weight:600;margin:0;letter-spacing:-0.01em;
}
h1{font-size:clamp(32px,8vw,62px);line-height:1.1;letter-spacing:-0.02em}
h2{font-size:clamp(26px,7vw,45px);line-height:1.15;letter-spacing:-0.015em;margin-top:var(--space-md)}
h3{font-size:clamp(20px,6vw,26px);line-height:1.25;letter-spacing:-0.005em}
h4{font-size:var(--text-xl);line-height:1.3}
p{margin:0}
img{max-width:100%;display:block}

/* 3. Accessibility ------------------------------------------ */
.skip-link{
  position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;
  padding:var(--space-xs) var(--space-sm);border-radius:4px;font:600 14px/1 var(--sans);z-index:9999;
  text-decoration:none;
}
.skip-link:focus{left:16px}
a:focus-visible,button:focus-visible,summary:focus-visible,.faq-tab:focus-visible{
  outline:3px solid var(--copper-hot);outline-offset:3px;border-radius:2px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}
/* Sticky header is ~80px tall — anchor jumps and focus moves need
   matching scroll-margin so the target isn't hidden under the bar. */
:target,h1[id],h2[id],h3[id],section[id]{scroll-margin-top:var(--space-3xl)}

/* 4. Layout utilities --------------------------------------- */
.wrap{max-width:var(--wide);width:100%;margin:0 auto;padding:0 var(--space-lg);box-sizing:border-box}

.eyebrow{
  font-family:var(--sans);font-size:var(--text-xs);line-height:16px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--copper);font-weight:600;
  display:inline-flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;
  margin-left:calc(-1 * (var(--space-md) + var(--space-xs)));
  margin-bottom:var(--space-md);
}
.eyebrow::before{
  content:"";width:var(--space-md);height:2px;background:var(--copper);display:inline-block;flex-shrink:0;
}
.eyebrow.centered{justify-content:center;margin-left:0}
.eyebrow.centered::before{display:none}

/* Enforce mathematical equivalence: when an eyebrow immediately precedes a heading, 
   the heading's inherited top margin is stripped so the visual gap is defined 
   100% by the eyebrow's margin-bottom, avoiding inline-flex + block double-margins. */
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3 { margin-top: 0; }


/* 5. Section framing ---------------------------------------- */
section{padding:clamp(var(--space-lg), 5vw, var(--space-2xl)) 0}
section.compact{padding:clamp(var(--space-md), 4vw, var(--space-xl)) 0}
section.sand{background:var(--sand)}
section.dark{background:var(--navy);color:#E6EAF2}
section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark .eyebrow{color:var(--copper-hot)}
section.dark .eyebrow::before{background:var(--copper-hot)}
/* When sections share a background, eliminate the top padding of the second section
   so the visual gap equals exactly one standard padding block (the bottom padding of the first). */
section.sand + section.sand{padding-top:0}
section:not(.sand):not(.dark):not(.hero) + section:not(.sand):not(.dark):not(.hero){padding-top:0}

.section-head{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);
  align-items:end;margin-bottom:clamp(var(--space-lg), 4vw, var(--space-xl));
}
.section-head .sh-copy{
  max-width:520px;color:var(--gray);
  font-size:var(--text-lg);line-height:1.6;
}
section.dark .section-head .sh-copy{color:#B8C2D4}
.section-head h2{text-wrap:balance}

/* Variant: centered single-column head — used to break the editorial
   2-col rhythm on long pages. Eyebrow renders above the headline. */
.section-head.centered{
  grid-template-columns:1fr;text-align:center;
  max-width:780px;margin-left:auto;margin-right:auto;gap:0;
}
.section-head.centered > div{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}
.section-head.centered .eyebrow{justify-content:center}
.section-head.centered .eyebrow::before{display:none}
.section-head.centered .sh-copy{
  max-width:560px;margin:var(--space-md) auto 0;text-align:center;
}

/* Variant: stacked single-column head — left-aligned, copy below headline. */
.section-head.stacked{
  grid-template-columns:1fr;gap:var(--space-sm);align-items:start;
}
.section-head.stacked .sh-copy{margin:var(--space-xs) 0 0;max-width:680px}

/* 6. Topbar ------------------------------------------------- */
.topbar{background:var(--navy-deep);color:#C9D3E2;font-size:var(--text-sm);letter-spacing:0.02em}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:var(--space-xs);padding-bottom:var(--space-xs);gap:var(--space-md);flex-wrap:wrap;
}
.topbar a{padding:var(--space-2xs) 0;display:inline-block;min-height:var(--space-lg);line-height:1.6}
.topbar strong{color:#fff;font-weight:600}
.topbar .lic{
  color:#8FA0B8;font-family:var(--sans);letter-spacing:0.06em;
  text-transform:uppercase;font-size:var(--text-2xs);
  white-space: nowrap;
}
.topbar .mid{color:#8FA0B8}
.topbar .mid a{color:inherit;text-decoration:none;transition:color .15s}
.topbar .mid a:hover{color:#fff}
.topbar a{color:#fff}

/* 7. Primary nav -------------------------------------------- */
header.nav{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--space-sm);padding-bottom:var(--space-sm);gap:var(--space-lg);
}
.logo{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--navy)}
.logo-text{line-height:1.1;display:flex;flex-direction:column;align-items:stretch}
.logo-text .lt-main{
  font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:-0.015em;
  color:var(--navy);white-space:nowrap;display:block;
  padding-bottom:var(--space-2xs);position:relative;
}
.logo-text .lt-main::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1.5px;background:var(--copper);
}
.logo-text .lt-sub{
  font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gray);margin-top:var(--space-2xs);text-align:center;display:block;
}
nav.primary{display:flex;gap:var(--space-lg)}
nav.primary a{color:var(--navy);font-weight:500;font-size:var(--text-base);letter-spacing:0.01em}
nav.primary a:hover,nav.primary a.active{color:var(--copper)}
.nav-cta{
  background:var(--copper);color:#fff;padding:var(--space-xs) var(--space-md);border-radius:2px;
  font-weight:600;font-size:var(--text-base);letter-spacing:0.02em;
  display:inline-flex;align-items:center;gap:var(--space-xs);transition:background .15s;
  white-space:nowrap;line-height:1;
}
.nav-cta:hover{background:var(--copper-deep);color:#fff}

/* 7b. Mobile nav drawer (≤960px) ---------------------------- */
/* Hamburger button — shown only when nav.primary collapses (≤960px). */
.nav-hamburger{
  display:none;background:transparent;border:1px solid var(--line);
  color:var(--navy);padding:0;cursor:pointer;border-radius:2px;
  width:var(--space-xl);height:var(--space-xl);font-size:var(--text-2xl);line-height:1;
  align-items:center;justify-content:center;
  transition:border-color .15s, background .15s;
}
.nav-hamburger:hover{border-color:var(--copper);background:var(--sand)}
.nav-hamburger:focus-visible{outline:3px solid var(--copper-hot);outline-offset:3px}

/* Drawer — uses native <dialog> so we get a built-in focus trap,
   modal layer, and Esc-to-close behavior for free. */
.nav-drawer{
  border:0;padding:0;margin:0;
  background:var(--navy-deep);color:#fff;
  width:100%;max-width:380px;height:100vh;height:100dvh;max-height:none;
  margin-left:auto;  /* slide to the right edge */
  inset:0 0 0 auto;
}
.nav-drawer::backdrop{
  background:rgba(6,26,51,0.62);
}
.nav-drawer-inner{
  padding:var(--space-md) var(--space-lg) var(--space-lg);display:flex;flex-direction:column;
  height:100vh;height:100dvh;box-sizing:border-box;gap:0;
}
.nav-drawer-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:var(--space-md);border-bottom:1px solid rgba(245,239,230,.14);gap:var(--space-sm);
}
.nav-drawer-head .logo-text .lt-main{
  color:#fff;font-size:var(--text-3xl);
}
.nav-drawer-head .logo-text .lt-main::after{display:none}
.nav-drawer-head .logo-text .lt-sub{color:#8FA0B8;font-size:9.5px;text-align:left}
.nav-drawer-close{
  background:transparent;border:1px solid rgba(245,239,230,.18);
  color:#fff;padding:0;cursor:pointer;border-radius:2px;
  width:var(--space-xl);height:var(--space-xl);flex:0 0 var(--space-xl);font-size:var(--text-xl);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s, background .15s;
}
.nav-drawer-close:hover{border-color:var(--copper-hot);background:rgba(180,88,39,.12)}
.nav-drawer-close:focus-visible{outline:3px solid var(--copper-hot);outline-offset:3px}
.nav-drawer-links{
  display:flex;flex-direction:column;gap:0;margin-top:var(--space-xs);flex:1 1 auto;
}
.nav-drawer-links a{
  font-family:var(--serif);font-size:var(--text-3xl);color:#fff;font-weight:500;
  letter-spacing:-0.005em;line-height:1.2;
  padding:var(--space-sm) 0;border-bottom:1px solid rgba(245,239,230,.08);
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--space-xl);text-decoration:none;
  transition:color .15s;
}
.nav-drawer-links a:hover{color:var(--copper-hot)}
.nav-drawer-links a::after{
  content:"→";font-family:var(--sans);font-size:var(--text-xl);
  color:var(--copper-hot);font-weight:400;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.nav-drawer-links a:hover::after{transform:translateX(3px)}
.nav-drawer-foot{
  padding-top:var(--space-sm);border-top:1px solid rgba(245,239,230,.14);
  font-size:var(--text-base-sm);color:#B8C2D4;line-height:1.55;
}
.nav-drawer-foot a{color:#fff;font-weight:600;font-size:var(--text-lg);display:inline-block;padding:var(--space-xs) 0;min-height:var(--space-xl);line-height:1.6}
.nav-drawer-foot .lic{
  display:block;font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.18em;
  text-transform:uppercase;color:#8FA0B8;margin-top:var(--space-2xs);
  white-space: nowrap;
}
@media (max-width:960px){
  .nav-hamburger{display:inline-flex}
}
/* On narrow screens the drawer takes the full width. Lifted from 420px → 480px so
   iPhone 14/15 (390px) in landscape and Galaxy fold/cover devices also get full-width
   instead of a clipped right-edge drawer. */
@media (max-width:480px){
  .nav-drawer{max-width:100%}
}

/* 8. Breadcrumbs -------------------------------------------- */
/* In sand-background contexts, locally re-bind --gray to the
   contrast-safe deeper value (5.84:1 on sand vs --gray's 4.43:1).
   Every component that uses var(--gray) inside these contexts picks
   up the corrected value without a per-component migration. */
section.sand,.crumbs,.proof,form.req{--gray:#595959}

.crumbs{background:var(--sand);border-bottom:1px solid var(--sand-deep);font-size:var(--text-sm);color:var(--gray)}
.crumbs .wrap{padding-top:var(--space-sm);padding-bottom:var(--space-sm);display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap}
.crumbs a{
  color:var(--navy);font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--space-2xs);transition:color .15s;
}
.crumbs a:hover{color:var(--copper)}
.crumbs .back-arrow{color:var(--copper);font-weight:600;transition:transform .15s}
.crumbs a:hover .back-arrow{transform:translateX(-2px)}
.crumbs .sep{color:var(--sand-deep)}
.crumbs .current{color:var(--gray);font-weight:400}

/* 9. Hero — shared base ------------------------------------- */
.hero{
  background:var(--navy-deep);color:#fff;
  position:relative;overflow:hidden;border-bottom:2px solid var(--copper);
  padding:0;  /* hero-grid (per page) owns its own spacing */
}
/* Hero is on a dark background, so use the brighter copper. */
.hero .eyebrow{color:var(--copper-hot)}
.hero .eyebrow::before{background:var(--copper-hot)}
.hero h1{color:#fff;text-wrap:balance}
.hero h1 em{
  font-style:italic;
  font-weight:500;
  color:#F5EFE6;
  padding:0;
}
.hero .lead,.hero .lede{
  color:#B8C2D4;font-size:var(--text-lg);line-height:1.55;margin-top:var(--space-md);text-wrap:pretty;
}
.hero-ctas{display:flex;gap:var(--space-sm);margin-top:var(--space-lg);flex-wrap:wrap;align-items:center}

/* 10. Buttons ----------------------------------------------- */
.btn-primary{
  background:var(--copper);color:#fff;padding:var(--space-sm) var(--space-lg);font-weight:600;font-size:var(--text-md);
  letter-spacing:0.02em;display:inline-flex;align-items:center;gap:var(--space-xs);border-radius:2px;
  border:0;cursor:pointer;transition:background .15s;
}
.btn-primary:hover{background:var(--copper-deep);color:#fff}
/* Arrow glyphs carry the forward-momentum cue on hover */
.btn-primary > span,
.nav-cta .arr,
form.req button.submit .arr,
.ctaband .btn-white .arr{
  display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover > span,
.nav-cta:hover .arr,
form.req button.submit:hover .arr,
.ctaband .btn-white:hover .arr{transform:translateX(3px)}
.btn-ghost{
  background:transparent;color:#F5EFE6;padding:var(--space-sm) 0 var(--space-sm) var(--space-xs);font-weight:500;font-size:var(--text-md);
  border:0;border-radius:0;
  display:inline-flex;align-items:center;gap:var(--space-xs);
  transition:color .15s;white-space:nowrap;
}
.btn-ghost:hover{color:#fff}

/* 11. FAQ --------------------------------------------------- */
.faq{max-width:820px;margin:0 auto}

details.q{border-top:1px solid var(--line);padding:var(--space-sm) 0}
details.q:last-of-type{border-bottom:1px solid var(--line)}
details.q summary{
  list-style:none;cursor:pointer;min-height:var(--space-xl);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);
  font-family:var(--serif);font-size:var(--text-2xl);color:var(--navy);font-weight:500;line-height:1.3;
}
details.q summary::-webkit-details-marker{display:none}
details.q .marker{
  font-family:var(--sans);font-size:24px;color:var(--copper);font-weight:400;
  flex:0 0 24px;text-align:center;transition:transform .2s;
}
details.q[open] .marker{transform:rotate(45deg)}
details.q .a{margin-top:var(--space-sm);color:var(--gray);font-size:var(--text-md);line-height:1.7}
details.q .a strong,details.q .a b{color:var(--navy);font-weight:600}

/* 12. CTA band ---------------------------------------------- */
.ctaband{background:var(--copper);color:#fff;padding:var(--space-2xl) 0}
.ctaband .wrap{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--space-xl);align-items:center}
.ctaband h2{color:#fff;font-size:clamp(28px,3.6vw,42px);text-wrap:pretty;margin-top:var(--space-sm)}
.ctaband p{color:#fff;font-size:var(--text-lg);margin-top:var(--space-sm);line-height:1.55;max-width:520px}
.ctaband .actions{display:flex;flex-direction:column;gap:var(--space-sm)}
.ctaband .btn-white{
  background:#fff;color:var(--navy);padding:var(--space-sm) var(--space-md);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);border-radius:2px;
  transition:background .15s,color .15s;
}
.ctaband .btn-white:hover{background:var(--navy);color:#fff}
.ctaband .btn-white .arr{color:var(--copper);font-weight:700}
.ctaband .btn-white:hover .arr{color:var(--copper-deep)}
.ctaband .btn-outline{
  background:transparent;color:#fff;padding:var(--space-sm) var(--space-md);
  /* Full-strength white border so the secondary CTA reads as an action, not decoration.
     Earlier rgba(255,255,255,.5) made it look like a divider rather than a button. */
  border:1.5px solid #fff;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);border-radius:2px;font-weight:600;
  transition:border-color .15s,background .15s;
}
.ctaband .btn-outline:hover{border-color:#fff;background:rgba(0,0,0,.1);color:#fff}

/* 13. Request form ------------------------------------------ */
section.request{
  background:#fff;padding:var(--space-3xl) 0 !important;
  border-top:1px solid var(--sand-deep);position:relative;
}
section.request::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:80px;height:2px;background:var(--copper);
}
/* Centered Funnel Layout */
.req-funnel { max-width: 960px; margin: 0 auto; }
.req-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); text-align: center; }
.req-proof .proof-item strong { display: block; font-family: var(--serif); font-size: var(--text-lg); color: var(--navy); margin-bottom: var(--space-xs); }
.req-proof .proof-item p { font-size: var(--text-sm); color: var(--gray); line-height: 1.5; margin: 0; }
.req-form-card { max-width: 760px; margin: 0 auto; }

form.req{background:var(--sand);padding:var(--space-xl) var(--space-xl) var(--space-lg);border:1px solid var(--sand-deep);box-shadow:0 12px 40px rgba(20,33,61,0.03);border-radius:2px}
form.req .form-step{display:none;animation:fadeIn 0.3s ease-out;}
form.req .form-step.active{display:block;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
form.req .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-sm)}
form.req .row.full{grid-template-columns:1fr}
form.req label{
  display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:0.01em;
  text-transform:none;color:var(--charcoal);font-weight:600;margin-bottom:var(--space-2xs);
}
form.req label .req-star{color:var(--copper);margin-left:var(--space-2xs)}
form.req input[type=text],
form.req input[type=email],
form.req input[type=tel],
form.req select,
form.req textarea{
  width:100%;font-family:var(--sans);font-size:var(--text-base);color:var(--navy);
  background:#fff;border:1px solid transparent;border-bottom:1.5px solid rgba(20,33,61,0.18);
  padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-xs);transition:border-color .15s, background .15s;border-radius:0;
}
form.req textarea{min-height:80px;resize:vertical;line-height:1.45;font-family:var(--sans);padding:var(--space-xs) var(--space-xs)}
form.req input:focus,
form.req select:focus,
form.req textarea:focus{outline:none;border-bottom-color:var(--copper);background:#fff}
form.req select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gray) 50%),
                   linear-gradient(135deg,var(--gray) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;
  background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--space-2xl);
}

/* Fieldset/legend reset — the radio group is wrapped in <fieldset>/<legend>
   so the group label is programmatically associated (WCAG 1.3.1). */
form.req fieldset{border:0;padding:0;margin:0;min-width:0}
form.req legend{
  display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:0.01em;
  text-transform:none;color:var(--charcoal);font-weight:600;margin-bottom:var(--space-2xs);padding:0;
}
form.req legend .req-star{color:var(--copper);margin-left:var(--space-2xs)}

form.req .radio-group{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-2xs)}
form.req .radio-group label{
  display:inline-flex;align-items:center;gap:var(--space-xs);margin:0;padding:var(--space-xs) var(--space-sm);
  min-height:var(--space-xl);
  border:1px solid rgba(20,33,61,0.15);font-size:var(--text-sm);color:var(--navy);
  text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer;background:#fff;
  transition:border-color .15s, background .15s;
}
/* Visually hide the radio input but keep it focusable so keyboard users
   can Tab/arrow through. Replaces the earlier `pointer-events:none` block
   that left no focus indicator. */
form.req .radio-group input[type=radio]{
  position:absolute;width:1px;height:1px;
  opacity:0;clip:rect(0,0,0,0);
}
form.req .radio-group label:has(input:checked){
  border-color:var(--copper);background:var(--sand);color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--copper);
}
/* Focus ring on the wrapping label when its enclosed radio receives
   keyboard focus — pairs with the visually-hidden input above. */
form.req .radio-group label:has(input:focus-visible){
  outline:3px solid var(--copper-hot);outline-offset:2px;border-radius:2px;
}

/* Inline submission-error panel (replaces alert()). Mirrors the noscript panel style. */
.req-error{
  background:#FFF8EF;border:1px solid #E9D9BF;border-left:4px solid var(--copper);
  padding:var(--space-xs) var(--space-sm);margin:0 0 var(--space-sm);color:var(--navy);
  font-size:var(--text-base-sm);line-height:1.5;
}
.req-error[hidden]{display:none}
.req-error p{margin:0}
.req-error p + p{margin-top:var(--space-2xs)}
.req-error strong{color:var(--navy);font-weight:600}
.req-error a{
  color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--copper);text-underline-offset:3px;
}

/* Per-field inline error. Collapses to zero height when empty. */
.field-error{
  display:block;min-height:0;margin-top:var(--space-2xs);
  font-family:var(--sans);font-size:12.5px;line-height:1.4;
  color:var(--copper-deep);font-weight:500;letter-spacing:0.005em;
}
.field-error:empty{display:none}

form.req .consent{
  display:flex;gap:var(--space-xs);align-items:flex-start;font-size:var(--text-sm);color:var(--navy);
  line-height:1.45;margin:var(--space-2xs) 0 var(--space-2xs);font-weight:500;
}
form.req .consent input{margin-top:var(--space-2xs);accent-color:var(--copper)}
form.req .privacy-note{
  font-size:var(--text-xs);color:var(--gray);line-height:1.5;
  margin:0 0 var(--space-sm);padding-left:var(--space-md);letter-spacing:0.005em;
}
form.req .consent a{
  color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--copper);text-underline-offset:3px;
}

form.req .submit-row{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  padding-top:var(--space-sm);border-top:1px solid rgba(20,33,61,0.1);
}
form.req .submit-row.step-1{border-top:none;padding-top:0;margin-top:0}
form.req .submit-note{font-size:var(--text-xs);color:var(--gray);line-height:1.45;max-width:280px}
form.req button.submit{
  background:var(--navy);color:#fff;font-family:var(--sans);font-weight:600;font-size:var(--text-base);
  padding:var(--space-sm) var(--space-md);border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--space-sm);
  letter-spacing:0.02em;border-radius:0;transition:background .15s;
}
form.req button.submit:hover{background:var(--navy-deep)}
form.req button.submit .arr{color:var(--copper-hot);font-weight:700}
form.req button.back{
  background:transparent;border:none;color:var(--gray);font-family:var(--sans);font-weight:600;
  font-size:var(--text-sm);cursor:pointer;padding:var(--space-sm) 0;transition:color .15s;
}
form.req button.back:hover{color:var(--navy)}
.req-success{
  display:none;padding:var(--space-lg) var(--space-lg);text-align:center;
  background:var(--sand);border:1px solid var(--sand-deep);
}
.req-success.active{display:block}
.req-success h3{font-family:var(--serif);font-size:var(--text-4xl);color:var(--navy);margin-bottom:var(--space-xs)}
.req-success p{color:var(--gray);font-size:var(--text-base);line-height:1.55;max-width:440px;margin:0 auto}
.req-success .checkmark{
  width:var(--space-xl);height:var(--space-xl);border-radius:50%;background:var(--copper);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-3xl);margin-bottom:var(--space-sm);
}

/* 14. Footer ------------------------------------------------ */
footer{
  background:var(--navy-deep);color:#B8C2D4;
  padding:var(--space-3xl) 0 var(--space-lg);border-top:2px solid var(--copper);
}
footer .wrap{display:grid;grid-template-columns:1.618fr 1fr 1fr 1fr;gap:var(--space-xl)}
footer h5{
  color:#fff;font-family:var(--sans);font-size:var(--text-xs);letter-spacing:0.18em;
  text-transform:uppercase;margin:0 0 var(--space-sm);font-weight:600;
}
footer a{color:#B8C2D4;display:block;padding:var(--space-2xs) 0;font-size:var(--text-base);transition:color .15s}
footer a:hover{color:var(--copper-hot)}
footer .brand-line{color:#8FA0B8;font-size:var(--text-base-sm);line-height:1.6;margin-top:var(--space-sm);max-width:320px}
footer .brand-line strong{color:#fff}
footer .brand-contact{margin-top:var(--space-sm)}
/* Survey-marker stamp — Boca office coordinates, set in mono. A small,
   specific detail meant to read as a real address book entry, not a
   marketing flourish. Rendered low-prominence so it doesn't compete. */
footer .brand-coords{
  font-family:var(--mono);font-size:var(--text-2xs);letter-spacing:0.14em;
  color:#5C6878;margin:var(--space-sm) 0 0;font-variant-numeric:tabular-nums;
}
footer .footer-logo,footer .footer-logo .lt-main{color:#fff}
footer .footer-logo .lt-sub{color:#8FA0B8}
footer .legal{
  border-top:1px solid rgba(255,255,255,.08);margin-top:var(--space-xl);padding-top:var(--space-md);
  display:block;font-size:var(--text-xs);color:#8FA0B8;letter-spacing:0.04em;
  grid-column:1/-1;
}
footer .legal-fineprint{font-size:var(--text-xs);line-height:1.7;color:#8FA0B8;margin:var(--space-sm) 0 var(--space-sm)}
footer .legal-fineprint strong{color:#C9D3E2;font-weight:600}
footer .legal-row{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
footer .legal a{display:inline;padding:0;font-size:var(--text-xs)}
footer .legal-row a{margin-left:var(--space-sm)}

/* Collapsible fine-print disclosure. Hides the wall-of-text by default
   so the footer feels lighter; the legal copy is still one click away. */
footer .legal-details{margin:0 0 var(--space-sm)}
footer .legal-details > summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  font-size:var(--text-xs);letter-spacing:0.06em;color:#C9D3E2;font-weight:500;
  padding:var(--space-xs) 0;min-height:var(--space-xl);
  transition:color .15s;
}
footer .legal-details > summary::-webkit-details-marker{display:none}
footer .legal-details > summary:hover{color:#fff}
footer .legal-details > summary:focus-visible{outline:2px solid var(--copper-hot);outline-offset:3px;border-radius:2px}
footer .legal-details .legal-arrow{
  font-family:var(--sans);font-size:var(--text-3xl);color:var(--copper-hot);font-weight:400;
  flex:0 0 22px;text-align:center;transition:transform .2s;line-height:1;
}
footer .legal-details[open] > summary .legal-arrow{transform:rotate(45deg)}
footer .legal-details[open] > summary{color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}

/* Form success fallback line + optional hint */
.req-success .success-fallback{margin-top:var(--space-sm)}
.req-success .success-fallback strong{color:var(--navy)}
.req-success .success-fallback a{color:inherit;text-decoration:none}
form.req label .optional{color:var(--gray);font-weight:500;text-transform:none;letter-spacing:0}

/* CTA band credential line */
.ctaband-credential{
  font-family:var(--sans);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:#fff;margin-top:var(--space-md);opacity:0.92;
}

/* 15. Placeholder image blocks ------------------------------ */
.ph{
  position:relative;overflow:hidden;background:var(--sand-deep);
  display:flex;align-items:flex-start;justify-content:space-between;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(11,37,69,.05) 0 18px,transparent 18px 36px),
             linear-gradient(160deg,#C9BFA8 0%,#A89C85 100%);
}
.ph.navy::before{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 18px,transparent 18px 36px),
             linear-gradient(160deg,#0B2545 0%,#061A33 100%);
}
.ph.copper::before{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 18px,transparent 18px 36px),
             linear-gradient(160deg,#C16837 0%,#8F4420 100%);
}
.ph > *{position:relative;z-index:1}
.ph-label{display:none}
.ph-meta{display:none}
.ph-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;
  font-family:var(--serif);font-size:72px;color:rgba(11,37,69,.1);font-weight:600;
}
.ph.navy .ph-icon{color:rgba(255,255,255,.08)}
.ph.copper .ph-icon{color:rgba(255,255,255,.14)}
/* ────────────────────────────────────────────────────────────
   Real image support — drop a <picture>/<img> inside any .ph
   and the striped-gradient placeholder + annotations auto-hide
   via :has(). Always pass explicit width + height on the <img>
   so no CLS. object-fit:cover lets any source aspect ratio fit.
form.req fieldset{border:0;padding:0;margin:0;min-width:0}
form.req legend{
  display:block;font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gray);font-weight:600;margin-bottom:var(--space-2xs);padding:0;
}
form.req legend .req-star{color:var(--copper);margin-left:var(--space-2xs)}

form.req .radio-group{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-2xs)}
form.req .radio-group label{
  display:inline-flex;align-items:center;gap:var(--space-xs);margin:0;padding:var(--space-xs) var(--space-sm);
  min-height:var(--space-xl);
  border:1px solid rgba(20,33,61,0.15);font-size:var(--text-sm);color:var(--navy);
  text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer;background:#fff;
  transition:border-color .15s, background .15s;
}
/* Visually hide the radio input but keep it focusable so keyboard users
   can Tab/arrow through. Replaces the earlier `pointer-events:none` block
   that left no focus indicator. */
form.req .radio-group input[type=radio]{
  position:absolute;width:1px;height:1px;
  opacity:0;clip:rect(0,0,0,0);
}
form.req .radio-group label:has(input:checked){
  border-color:var(--copper);background:var(--sand);color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--copper);
}
/* Focus ring on the wrapping label when its enclosed radio receives
   keyboard focus — pairs with the visually-hidden input above. */
form.req .radio-group label:has(input:focus-visible){
  outline:3px solid var(--copper-hot);outline-offset:2px;border-radius:2px;
}

/* Inline submission-error panel (replaces alert()). Mirrors the noscript panel style. */
.req-error{
  background:#FFF8EF;border:1px solid #E9D9BF;border-left:4px solid var(--copper);
  padding:var(--space-xs) var(--space-sm);margin:0 0 var(--space-sm);color:var(--navy);
  font-size:var(--text-base-sm);line-height:1.5;
}
.req-error[hidden]{display:none}
.req-error p{margin:0}
.req-error p + p{margin-top:var(--space-2xs)}
.req-error strong{color:var(--navy);font-weight:600}
.req-error a{
  color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--copper);text-underline-offset:3px;
}

/* Per-field inline error. Collapses to zero height when empty. */
.field-error{
  display:block;min-height:0;margin-top:var(--space-2xs);
  font-family:var(--sans);font-size:12.5px;line-height:1.4;
  color:var(--copper-deep);font-weight:500;letter-spacing:0.005em;
}
.field-error:empty{display:none}

form.req .consent{
  display:flex;gap:var(--space-xs);align-items:flex-start;font-size:var(--text-sm);color:var(--navy);
  line-height:1.45;margin:var(--space-2xs) 0 var(--space-2xs);font-weight:500;
}
form.req .consent input{margin-top:var(--space-2xs);accent-color:var(--copper)}
form.req .privacy-note{
  font-size:var(--text-xs);color:var(--gray);line-height:1.5;
  margin:0 0 var(--space-sm);padding-left:var(--space-md);letter-spacing:0.005em;
}
form.req .consent a{
  color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--copper);text-underline-offset:3px;
}

form.req .submit-row{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  padding-top:var(--space-sm);border-top:1px solid rgba(20,33,61,0.1);
}
form.req .submit-note{font-size:var(--text-xs);color:var(--gray);line-height:1.45;max-width:280px}
form.req button.submit{
  background:var(--navy);color:#fff;font-family:var(--sans);font-weight:600;font-size:var(--text-base);
  padding:var(--space-sm) var(--space-md);border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--space-sm);
  letter-spacing:0.02em;border-radius:0;transition:background .15s;
}
form.req button.submit:hover{background:var(--navy-deep)}
form.req button.submit .arr{color:var(--copper-hot);font-weight:700}

.req-success{
  display:none;padding:var(--space-lg) var(--space-lg);text-align:center;
  background:var(--sand);border:1px solid var(--sand-deep);
}
.req-success.active{display:block}
.req-success h3{font-family:var(--serif);font-size:var(--text-4xl);color:var(--navy);margin-bottom:var(--space-xs)}
.req-success p{color:var(--gray);font-size:var(--text-base);line-height:1.55;max-width:440px;margin:0 auto}
.req-success .checkmark{
  width:var(--space-xl);height:var(--space-xl);border-radius:50%;background:var(--copper);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-3xl);margin-bottom:var(--space-sm);
}

/* 14. Footer ------------------------------------------------ */
footer{
  background:var(--navy-deep);color:#B8C2D4;
  padding:var(--space-3xl) 0 var(--space-lg);border-top:2px solid var(--copper);
}
footer .wrap{display:grid;grid-template-columns:1.618fr 1fr 1fr 1fr;gap:var(--space-xl)}
footer h5{
  color:#fff;font-family:var(--sans);font-size:var(--text-xs);letter-spacing:0.18em;
  text-transform:uppercase;margin:0 0 var(--space-sm);font-weight:600;
}
footer a{color:#B8C2D4;display:block;padding:var(--space-2xs) 0;font-size:var(--text-base);transition:color .15s}
footer a:hover{color:var(--copper-hot)}
footer .brand-line{color:#8FA0B8;font-size:var(--text-base-sm);line-height:1.6;margin-top:var(--space-sm);max-width:320px}
footer .brand-line strong{color:#fff}
footer .brand-contact{margin-top:var(--space-sm)}
/* Survey-marker stamp — Boca office coordinates, set in mono. A small,
   specific detail meant to read as a real address book entry, not a
   marketing flourish. Rendered low-prominence so it doesn't compete. */
footer .brand-coords{
  font-family:var(--mono);font-size:var(--text-2xs);letter-spacing:0.14em;
  color:#5C6878;margin:var(--space-sm) 0 0;font-variant-numeric:tabular-nums;
}
footer .footer-logo,footer .footer-logo .lt-main{color:#fff}
footer .footer-logo .lt-sub{color:#8FA0B8}
footer .legal{
  border-top:1px solid rgba(255,255,255,.08);margin-top:var(--space-xl);padding-top:var(--space-md);
  display:block;font-size:var(--text-xs);color:#8FA0B8;letter-spacing:0.04em;
  grid-column:1/-1;
}
footer .legal-fineprint{font-size:var(--text-xs);line-height:1.7;color:#8FA0B8;margin:var(--space-sm) 0 var(--space-sm)}
footer .legal-fineprint strong{color:#C9D3E2;font-weight:600}
footer .legal-row{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
footer .legal a{display:inline;padding:0;font-size:var(--text-xs)}
footer .legal-row a{margin-left:var(--space-sm)}

/* Collapsible fine-print disclosure. Hides the wall-of-text by default
   so the footer feels lighter; the legal copy is still one click away. */
footer .legal-details{margin:0 0 var(--space-sm)}
footer .legal-details > summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  font-size:var(--text-xs);letter-spacing:0.06em;color:#C9D3E2;font-weight:500;
  padding:var(--space-xs) 0;min-height:var(--space-xl);
  transition:color .15s;
}
footer .legal-details > summary::-webkit-details-marker{display:none}
footer .legal-details > summary:hover{color:#fff}
footer .legal-details > summary:focus-visible{outline:2px solid var(--copper-hot);outline-offset:3px;border-radius:2px}
footer .legal-details .legal-arrow{
  font-family:var(--sans);font-size:var(--text-3xl);color:var(--copper-hot);font-weight:400;
  flex:0 0 22px;text-align:center;transition:transform .2s;line-height:1;
}
footer .legal-details[open] > summary .legal-arrow{transform:rotate(45deg)}
footer .legal-details[open] > summary{color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}

/* Form success fallback line + optional hint */
.req-success .success-fallback{margin-top:var(--space-sm)}
.req-success .success-fallback strong{color:var(--navy)}
.req-success .success-fallback a{color:inherit;text-decoration:none}
form.req label .optional{color:var(--gray);font-weight:500;text-transform:none;letter-spacing:0}

/* CTA band credential line */
.ctaband-credential{
  font-family:var(--sans);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:#fff;margin-top:var(--space-md);opacity:0.92;
}

/* 15. Placeholder image blocks ------------------------------ */
.ph{
  position:relative;overflow:hidden;background:var(--sand-deep);
  display:flex;align-items:flex-start;justify-content:space-between;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(11,37,69,.05) 0 18px,transparent 18px 36px),
             linear-gradient(160deg,#C9BFA8 0%,#A89C85 100%);
}
.ph.navy::before{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 18px,transparent 18px 36px),
             linear-gradient(160deg,#0B2545 0%,#061A33 100%);
}
.ph.copper::before{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 18px,transparent 18px 36px),
             linear-gradient(160deg,#C16837 0%,#8F4420 100%);
}
.ph > *{position:relative;z-index:1}
.ph-label{display:none}
.ph-meta{display:none}
.ph-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;
  font-family:var(--serif);font-size:72px;color:rgba(11,37,69,.1);font-weight:600;
}
.ph.navy .ph-icon{color:rgba(255,255,255,.08)}
.ph.copper .ph-icon{color:rgba(255,255,255,.14)}
/* ────────────────────────────────────────────────────────────
   Real image support — drop a <picture>/<img> inside any .ph
   and the striped-gradient placeholder + annotations auto-hide
   via :has(). Always pass explicit width + height on the <img>
   so no CLS. object-fit:cover lets any source aspect ratio fit.
   ──────────────────────────────────────────────────────────── */
.ph img,.ph picture,.ph picture img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;
}
.ph:has(img) .ph-icon,
.ph:has(img) .ph-label,
.ph:has(img) .ph-meta,
.ph:has(picture) .ph-icon,
.ph:has(picture) .ph-label,
.ph:has(picture) .ph-meta{display:none}
.ph:has(img),.ph:has(picture){background:transparent}
.ph:has(img)::before,.ph:has(picture)::before{display:none}


/* 15b. Hero trust-strip note --------------------------------- */
/* Used by the small "Current COI on request" line under the Insurance ht-item.
   Promoted out of an inline style so it can be reused on additional ht-items. */
.ht-note{font-weight:400;opacity:.75}

/* 15c. Smooth-open <details> --------------------------------- */
/* Where the browser supports interpolate-size, the FAQ answers ease in/out
   instead of snapping. No-op everywhere else (grace fallback). */
@supports (interpolate-size: allow-keywords) {
  details.q{interpolate-size:allow-keywords;transition:height .22s ease-out}
  details.q .a{transition:opacity .18s ease}
}

/* 16. Shared responsive rules ------------------------------- */
@media (max-width:1100px){
  .section-head{grid-template-columns:1fr;gap:var(--space-sm)}
  .ctaband .wrap{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:repeat(2,1fr)}
}
/* Nav menu collapses earlier than the rest of the mobile layout because
   the logo + 5 menu items + CTA combined exceed tablet widths. */
@media (max-width:960px){
  nav.primary{display:none}
}
@media (max-width:860px){
  .req-proof{grid-template-columns:1fr;gap:var(--space-md)}
  form.req{padding:var(--space-md) var(--space-sm)}
  form.req .row{grid-template-columns:1fr;gap:var(--space-xs);margin-bottom:var(--space-xs)}
  form.req .submit-row{flex-direction:column;align-items:stretch}
  form.req button.submit{justify-content:center}
}
@media (max-width:720px){
  nav.primary{display:none}
  section{padding:var(--space-2xl) 0}
  section.compact{padding:var(--space-xl) 0}
  .topbar{font-size:var(--text-2xs)}
  .topbar .wrap{
    gap:var(--space-xs) var(--space-md);padding-top:var(--space-sm);padding-bottom:var(--space-sm);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
  }
  .topbar .mid{display:none}
  .nav .wrap{padding-top:var(--space-sm);padding-bottom:var(--space-sm);gap:var(--space-sm)}
  .logo-text .lt-main{font-size:var(--text-3xl)}
  .logo-text .lt-sub{font-size:9.5px}
  .nav-cta{padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs)}
  @media (max-width:600px){
    header.nav .nav-cta{display:none}
  }
  .wrap{padding:0 var(--space-md)}
  .hero .lead,.hero .lede{font-size:var(--text-md);margin-top:var(--space-md);line-height:1.6}
  .sh-copy,.ctaband p{font-size:var(--text-md)}
  .btn-primary,.btn-ghost{padding:var(--space-sm) var(--space-sm);font-size:var(--text-base-sm)}
  .hero-ctas{gap:var(--space-xs)}
  details.q summary{font-size:var(--text-xl);gap:var(--space-sm)}
  .ctaband{padding:var(--space-xl) 0}
  .ctaband .wrap{grid-template-columns:1fr;gap:var(--space-md)}
  .ctaband .btn-white,.ctaband .btn-outline{padding:var(--space-sm) var(--space-md);font-size:var(--text-base);gap:var(--space-sm)}
  footer{padding:var(--space-xl) 0 var(--space-md)}
  footer .wrap{grid-template-columns:1fr;gap:var(--space-lg)}
  footer .legal{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
  footer .legal a{margin-left:0;margin-right:var(--space-sm)}
  html,body{overflow-x:hidden}
}
@media (max-width:420px){
  h1{font-size:36px}
  .wrap{padding:0 var(--space-sm)}
}

/* 16b. Sticky mobile CTA bar -------------------------------- */
/* Injected by initStickyMobileCta() in site.js. Two equal columns:
   tel: link (navy) on the left, request-form anchor (copper) on the right.
   Auto-hides when the request form section is in view (.mcb-hidden). */
.mobile-cta-bar{display:none}
@media (max-width:760px){
  .mobile-cta-bar{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;bottom:0;left:0;right:0;z-index:40;
    box-shadow:0 -4px 14px rgba(11,37,69,0.18);
    transform:translateY(0);transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-cta-bar.mcb-hidden{transform:translateY(110%);pointer-events:none}
  .mobile-cta-bar a{
    min-height:56px;padding:var(--space-xs) var(--space-sm);
    display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);
    font-family:var(--sans);font-weight:600;font-size:var(--text-base-sm);
    letter-spacing:0.01em;color:#fff;text-decoration:none;text-align:center;
    border:0;border-radius:0;line-height:1.2;
  }
  .mobile-cta-bar a:focus-visible{outline:3px solid var(--copper-hot);outline-offset:-3px}
  .mobile-cta-bar .mcb-call{background:var(--navy)}
  .mobile-cta-bar .mcb-call:active{background:var(--navy-deep)}
  .mobile-cta-bar .mcb-quote{background:var(--copper)}
  .mobile-cta-bar .mcb-quote:active{background:var(--copper-deep)}
  /* Push page content above the bar so the footer isn't covered. */
  body{padding-bottom:56px}
}
/* Smaller phones: drop the phone number to icon only to save the right CTA's width. */
@media (max-width:380px){
  .mobile-cta-bar .mcb-call{font-size:var(--text-sm)}
}

/* 17. Print stylesheet ------------------------------------- */
/* Hides chrome + CTA bands + forms so printed pages carry only
   the substantive content. Expands long-URL targets for hard copies. */
@media print{
  .topbar,header.nav,.crumbs,.ctaband,section.request,
  .skip-link,.hero-ctas,.faq-tabs,.faq-handoff,.faq-cta,
  .req-success,form.req,.nav-cta,.hero-sig,.hero-trust,
  .mobile-cta-bar{display:none !important}
  html,body{background:#fff !important;color:#000 !important}
  section{padding:18pt 0 !important;break-inside:avoid}
  section.dark,section.sand{background:transparent !important;color:#000 !important}
  section.dark h2,section.dark h3,section.dark h4,
  section.dark .section-head .sh-copy,section.dark p{color:#000 !important}
  .hero{background:transparent !important;border-bottom:1pt solid #000 !important;color:#000 !important}
  .hero h1,.hero .lead,.hero .lede{color:#000 !important}
  .hero h1 em{background:none !important}
  footer{background:transparent !important;color:#000 !important;border-top:1pt solid #000 !important}
  footer a,footer .brand-line,footer h5{color:#000 !important}
  a{color:#000 !important;text-decoration:underline}
  a[href^="http"]:after,a[href^="/"]:after{
    content:" (" attr(href) ")";font-size:.85em;color:#444;font-weight:400;
  }
  a[href^="tel:"]:after,a[href^="mailto:"]:after,
  a[href^="#"]:after,a[href*="tdscontractors.com"]:after{content:""}
  h1,h2,h3,h4{page-break-after:avoid}
  img,.ph,.hero-img,.ba-slider{max-height:3in;object-fit:contain}
  details.q{break-inside:avoid}
  details.q summary{font-size:14pt}
  .ph::before,.tiled,.tiled-overlay{display:none !important}
}

/* 18. Reusable utilities ----------------------------------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}



/* Collapse empty placeholders when JS fetch fails locally */
[id^="shared-"]:empty { display: none !important; }