/* ===================================
   SECURITY SERVICES ORLANDO
   A Nexus Security Firm Offering
   Design system: graphite ground, safety-orange signal, Anton display.
   Sharp corners, strong hierarchy, high contrast, WCAG AA.

   Design context for this site lives at .agents/context/DESIGN.md inside this
   site folder, with the token sidecar at .impeccable/design.json. The workspace
   .impeccable/config.json declares a projectRoots glob covering each site
   folder, so design audits are scoped per site build and never inherit a
   sibling site's system.

   Never write a glob containing a star followed by a slash inside a CSS
   comment. That sequence closes the comment early and silently destroys every
   rule after it. It happened here and took the whole :root token block with it.
   =================================== */

:root {
  /* Core palette */
  --color-primary: #171B21;        /* graphite */
  --color-primary-ink: #ffffff;
  --color-surface: #21262E;        /* steel */
  --color-accent: #F26522;         /* safety orange */
  --color-accent-deep: #C24A10;    /* AA-safe on white for text/links */
  --color-ink: #12161B;
  --color-body: #3A424C;
  --color-muted: #646C79;
  --color-line: #DDE1E6;
  --color-line-dark: #333B45;
  --color-bg: #ffffff;
  --color-bg-alt: #F4F5F7;
  --color-success: #15803D;
  --color-error: #C0322B;

  /* Typography */
  --font-heading: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Scale */
  --fs-h1: clamp(2.5rem, 5.4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 2vw, 1.4375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 76px;
  --radius: 0;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
::selection { background: var(--color-accent); color: #fff; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Themed scrollbar + caret */
html { scrollbar-color: var(--color-line-dark) var(--color-bg-alt); }
input, textarea, select { caret-color: var(--color-accent-deep); }

/* Typography — Anton is a single-weight display face; H3/H4 fall back to Inter
   so smaller headings stay readable rather than shouting. */
h1, h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-transform: uppercase;
}
h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.0625rem; }

/* Default heading spacing. The reset zeroes every margin, so a heading in a
   context that does not set its own would otherwise sit flush against the text
   below it. Components that want tighter spacing override this by specificity. */
h1, h2, h3, h4 { margin-bottom: var(--s-2); }

p { margin-bottom: var(--s-2); }
p:last-child { margin-bottom: 0; }

/* NOTE: no .overline / eyebrow class exists on purpose. Small all-caps labels
   above headings are banned by the design system. Sections lead with the heading. */

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
.container-narrow { max-width: var(--container-narrow); }
section { padding-block: var(--s-6); }
@media (min-width: 768px) { section { padding-block: var(--s-7); } }
.section-alt { background: var(--color-bg-alt); }
.prose > h2 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose > h3 { margin-top: var(--s-4); margin-bottom: var(--s-1); }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--s-2); padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0.9375rem 1.875rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--color-accent); color: #12161B; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-ink); color: #fff; }
.btn-ondark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-ondark:hover { background: #fff; color: var(--color-ink); border-color: #fff; }

/* Announcement bar */
.announcement-bar {
  background: var(--color-accent);
  color: #12161B;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.5rem var(--s-2);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-line-dark);
  min-height: var(--header-h);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--header-h);
}

/* Wordmark — two lines, identical weight and size by design.
   This is a typeface wordmark, not a designed logo. */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  line-height: 1.06;
  letter-spacing: 0.005em;
  font-size: 1.0625rem;
  display: block;
}
.wordmark .wordmark-sub { display: block; }
.wordmark:hover { color: var(--color-accent); }
@media (min-width: 480px) { .wordmark { font-size: 1.1875rem; } }
@media (min-width: 1024px) { .wordmark { font-size: 1.3125rem; } }

.site-header nav { display: none; gap: var(--s-3); align-items: center; }
.site-header nav a { text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: rgba(255,255,255,0.88); }
.site-header nav a:hover { color: var(--color-accent); }
@media (min-width: 900px) { .site-header nav { display: flex; align-self: stretch; } }

/* Services dropdown.

   The panel is anchored to the header CONTAINER rather than to the Services
   nav item, so a wide two-column menu can never run off either edge. Anchoring
   it to the nav item meant the panel drifted with the item's position and
   overflowed left at some widths and right at others. Centring it on the
   container, which is itself capped at --container, keeps it on screen at every
   width where the nav exists. */
.site-header > .container { position: relative; }
.site-header nav .has-dropdown { position: static; display: flex; align-items: center; }
.site-header nav .has-dropdown > a::after { content: ' \25BE'; font-size: 0.7em; color: var(--color-accent); }
.site-header nav .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Sized from measurement, not estimate. The longest item, "Senior Living and
     Assisted Living Security", renders at 281px of text; with 1.25rem of padding
     each side that is 321px, so columns are 344px to leave real breathing room.
     Six of the 22 items overflowed the previous 248px of usable width. */
  width: min(720px, calc(100vw - 2rem));
  columns: 2;
  column-gap: 32px;
  column-rule: 1px solid var(--color-line-dark);
  background: var(--color-surface);
  border: 1px solid var(--color-line-dark);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  display: none;
  z-index: 60;
}
.site-header nav .dropdown li { break-inside: avoid; }
.site-header nav .has-dropdown:hover .dropdown,
.site-header nav .has-dropdown:focus-within .dropdown { display: block; }
.site-header nav .dropdown a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  /* nowrap is deliberate: every item must read as one line. The column width
     above is measured against the longest item so nothing is forced to clip.
     If a longer service name is ever added, re-measure rather than removing
     this, or the menu starts wrapping unevenly. */
  white-space: nowrap;
}
.site-header nav .dropdown a:hover,
.site-header nav .dropdown a:focus { background: var(--color-primary); color: var(--color-accent); }

.header-call {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.625rem 1rem;
  background: var(--color-accent);
  color: #12161B;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.header-call:hover { background: #fff; }
.header-call svg { flex: none; }
.header-call span { display: none; }
@media (min-width: 560px) { .header-call span { display: inline; } }
@media (max-width: 479px) {
  :root { --header-h: 64px; }
  .wordmark { font-size: 0.9375rem; }
  .header-call { padding: 0.5rem 0.75rem; }
}

/* Review strip — social proof above the hero */
.review-strip {
  background: var(--color-surface);
  color: #fff;
  text-align: center;
  padding-block: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.review-strip .stars { color: var(--color-accent); letter-spacing: 1px; }

/* Hero */
.hero {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  padding-block: var(--s-5);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(115deg, rgba(23,27,33,0.94) 0%, rgba(23,27,33,0.78) 55%, rgba(23,27,33,0.62) 100%);
  z-index: 1;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero > .container { position: relative; z-index: 2; }
.hero h1 { color: #fff; margin-bottom: var(--s-3); }
.hero .subhead { font-size: 1.125rem; color: rgba(255,255,255,0.88); margin-bottom: var(--s-3); max-width: 54ch; }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-6); }
  .hero > .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-5); align-items: start; }
}
.hero-points { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 0.625rem; }
.hero-points li { display: flex; gap: 0.625rem; align-items: flex-start; font-weight: 500; color: rgba(255,255,255,0.94); }
.hero-points svg { flex: none; margin-top: 0.28rem; color: var(--color-accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Lead form card */
.lead-form {
  background: #fff;
  padding: var(--s-3);
  border: 1px solid var(--color-line);
  color: var(--color-body);
}
.lead-form h2, .lead-form h3 { color: var(--color-ink); font-size: 1.375rem; margin-bottom: 0.375rem; font-family: var(--font-body); font-weight: 800; text-transform: none; letter-spacing: -0.01em; line-height: 1.2; }
.lead-form .form-lede { font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--s-2); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
@media (min-width: 480px) { .lead-form .form-row.two { grid-template-columns: 1fr 1fr; } }
.lead-form label { display: block; font-weight: 600; font-size: 0.8125rem; color: var(--color-ink); margin-bottom: 0.3125rem; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-ink);
  font-size: 1rem;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-ink);
}
.lead-form textarea { min-height: 90px; resize: vertical; }
.lead-form .btn { width: 100%; }
.lead-form .hp { position: absolute; left: -9999px; }
.lead-form .form-note { font-size: 0.75rem; color: var(--color-muted); margin-top: var(--s-2); text-align: center; }

/* Trust bar — ledger of hard credentials */
.trust-bar { background: var(--color-ink); color: #fff; padding-block: var(--s-3); }
.trust-bar ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
}
@media (min-width: 900px) { .trust-bar ul { grid-template-columns: repeat(4, 1fr); } }
.trust-bar li { font-size: 0.8125rem; color: rgba(255,255,255,0.72); line-height: 1.4; }
.trust-bar li b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 0.25rem;
}

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: flex; flex-direction: column;
  padding: var(--s-3);
  background: #fff;
  text-decoration: none;
  color: var(--color-body);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.service-card h3 { margin-bottom: 0.5rem; transition: color 0.15s ease; }
.service-card p { font-size: 0.9375rem; margin-bottom: var(--s-2); }
.service-card .arrow { margin-top: auto; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-deep); transition: color 0.15s ease; }
.service-card:hover { background: var(--color-primary); color: rgba(255,255,255,0.82); }
.service-card:hover h3 { color: #fff; }
.service-card:hover .arrow { color: var(--color-accent); }

/* Why choose us */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar h3 { margin-bottom: 0.625rem; }
.pillar p { font-size: 0.9375rem; }

/* Depth sections — problem/service category blocks */
.depth-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 768px) { .depth-grid { grid-template-columns: repeat(2, 1fr); } }
.depth-item h3 { margin-bottom: 0.5rem; }
.depth-item p { font-size: 0.9375rem; }

/* Mid-page lead form band */
.midform { background: var(--color-primary); color: rgba(255,255,255,0.88); }
.midform h2 { color: #fff; }
.midform .subhead { margin-bottom: var(--s-2); font-size: 1.0625rem; }
.midform .lead-form h2, .midform .lead-form h3 { color: var(--color-ink); }
@media (min-width: 900px) {
  .midform .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
}

/* Social proof */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: #fff; padding: var(--s-3); border: 1px solid var(--color-line); display: flex; flex-direction: column; }
.review-card blockquote { font-size: 1.0625rem; line-height: 1.55; color: var(--color-ink); margin-bottom: var(--s-2); }
.review-card cite { font-style: normal; font-weight: 700; font-size: 0.875rem; color: var(--color-ink); display: block; margin-top: auto; }
.review-card cite span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--color-muted); }

/* Lead magnet */
.magnet { background: var(--color-surface); color: rgba(255,255,255,0.85); }
.magnet h2 { color: #fff; }
.magnet ul { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); display: grid; gap: 0.5rem; }
.magnet li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; }
.magnet li svg { flex: none; margin-top: 0.3rem; color: var(--color-accent); }
@media (min-width: 900px) {
  .magnet .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5); align-items: center; }
}
.magnet-inline {
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  padding: var(--s-3);
  margin: var(--s-4) 0;
}
.magnet-inline h3 { margin-bottom: 0.375rem; }
.magnet-inline p { font-size: 0.9375rem; margin-bottom: var(--s-2); }
.magnet-inline form { display: grid; gap: var(--s-2); }
@media (min-width: 560px) { .magnet-inline form { grid-template-columns: 1fr auto; align-items: end; } }
.magnet-inline input[type="email"] { width: 100%; padding: 0.75rem; border: 1px solid var(--color-line); background: #fff; }
.magnet-inline .hp { position: absolute; left: -9999px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--color-line); padding-block: var(--s-2); }
.faq details:first-of-type { border-top: 1px solid var(--color-line); }
.faq summary {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.25rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 0; top: -0.125rem;
  font-size: 1.5rem; line-height: 1;
  color: var(--color-accent-deep);
}
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin-top: var(--s-2); font-size: 0.9375rem; }

/* Scenario walkthrough */
.scenario {
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  padding: var(--s-4);
  margin: var(--s-5) 0;
}
.scenario h3 { margin-bottom: var(--s-2); }
.scenario p { margin-bottom: var(--s-2); font-size: 0.9375rem; }
.scenario p:last-child { margin-bottom: 0; }
.scenario strong { color: var(--color-ink); }

/* Calculator / quiz */
.calc {
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  padding: var(--s-4);
  margin: var(--s-4) 0 var(--s-5);
}
.calc h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.calc > p { font-size: 0.9375rem; margin-bottom: var(--s-3); }
.calc-grid { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
.calc .calc-row { margin-bottom: 0; }
.calc label { display: block; font-weight: 600; font-size: 0.8125rem; color: var(--color-ink); margin-bottom: 0.3125rem; }
.calc input[type="number"], .calc select {
  width: 100%; padding: 0.75rem;
  border: 1px solid var(--color-line);
  background: #fff; color: var(--color-ink); font: inherit;
}
.calc input:focus, .calc select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.calc fieldset { border: 0; padding: 0; margin: 0 0 var(--s-2); }
.calc fieldset legend { font-weight: 600; font-size: 0.8125rem; color: var(--color-ink); margin-bottom: 0.375rem; padding: 0; }
.calc .radio-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.calc .radio-row label { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; font-size: 0.9375rem; margin-bottom: 0; }
.calc .btn { margin-top: var(--s-3); }
.calc .calc-result {
  display: none; margin-top: var(--s-3); padding: var(--s-3);
  background: #fff; border: 1px solid var(--color-line);
}
.calc .calc-result.visible { display: block; }
.calc .calc-result > p:first-child { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 0.25rem; }
.calc .calc-figure {
  font-family: var(--font-heading); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.25rem); color: var(--color-ink); line-height: 1.1; margin-bottom: 0.5rem;
}
.calc .calc-note { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: var(--s-2); }

/* Infographic */
.infographic {
  border: 1px solid var(--color-line);
  background: #fff;
  padding: var(--s-3);
  margin: var(--s-4) 0;
}
.infographic svg { display: block; width: 100%; height: auto; }
.infographic figcaption { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--s-2); }

/* Final CTA */
.cta-band { background: var(--color-ink); color: rgba(255,255,255,0.85); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-band p { font-size: 1.0625rem; margin-bottom: var(--s-3); max-width: 60ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* Footer */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.72); padding-block: var(--s-5) var(--s-3); font-size: 0.9375rem; }
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); text-decoration: underline; }
.site-footer .footer-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer .wordmark { margin-bottom: var(--s-2); font-size: 1.0625rem; }
.site-footer h2 { color: #fff; margin-bottom: var(--s-2); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-body); font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4375rem; font-size: 0.875rem; }
.site-footer .nap { font-size: 0.875rem; line-height: 1.6; }
.site-footer .nap strong { color: #fff; }
.site-footer .footer-bottom {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--color-line-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-size: 0.8125rem; color: rgba(255,255,255,0.55);
}
.site-footer .footer-bottom a { color: rgba(255,255,255,0.55); }

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta a {
  padding: 1rem; text-align: center; text-decoration: none;
  font-weight: 700; text-transform: uppercase; font-size: 0.9375rem; letter-spacing: 0.04em;
}
.mobile-cta .call { background: var(--color-ink); color: #fff; }
.mobile-cta .quote { background: var(--color-accent); color: #12161B; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--s-2); font-size: 0.8125rem; color: var(--color-muted); }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-ink); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--color-ink); font-weight: 600; }

/* Page head block for interior pages */
.page-head { background: var(--color-primary); color: rgba(255,255,255,0.85); padding-block: var(--s-5); }
.page-head h1 { color: #fff; margin-bottom: var(--s-2); }
.page-head .subhead { font-size: 1.0625rem; max-width: 62ch; }
.page-head .breadcrumbs { color: rgba(255,255,255,0.6); padding-top: 0; padding-bottom: var(--s-2); }
.page-head .breadcrumbs a { color: rgba(255,255,255,0.6); }
.page-head .breadcrumbs a:hover { color: #fff; }
.page-head .breadcrumbs span[aria-current] { color: #fff; }

/* Two-column interior layout */
.layout-two { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 1024px) { .layout-two { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; } }
.sidebar { display: grid; gap: var(--s-3); }
@media (min-width: 1024px) { .sidebar { position: sticky; top: calc(var(--header-h) + var(--s-2)); } }
.sidebar-card { border: 1px solid var(--color-line); padding: var(--s-3); background: var(--color-bg-alt); }
.sidebar-card h3 { margin-bottom: var(--s-2); font-size: 1.0625rem; }
.sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.sidebar-card li { margin-bottom: 0.4375rem; font-size: 0.9375rem; }

/* Media */
.media-figure { margin: var(--s-4) 0; }
.media-figure img { width: 100%; }
.media-figure figcaption { font-size: var(--fs-small); color: var(--color-muted); margin-top: var(--s-1); }

/* Service area list */
.area-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem var(--s-2); font-size: 0.9375rem; }
@media (min-width: 640px) { .area-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .area-list { grid-template-columns: repeat(4, 1fr); } }

/* Contact details */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-details dl { margin: 0; }
.contact-details dt { font-weight: 700; color: var(--color-ink); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--s-3); }
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: 0.25rem 0 0; }
.map-embed { border: 1px solid var(--color-line); margin-top: var(--s-4); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Utility */
.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; }
.text-center { text-align: center; }
.lede { font-size: 1.125rem; color: var(--color-ink); }
.section-intro { max-width: 68ch; margin-bottom: var(--s-4); }
.section-intro h2 { margin-bottom: var(--s-2); }
.stat-note { font-size: 0.8125rem; color: var(--color-muted); }

/* 404 */
.error-page { background: var(--color-primary); color: rgba(255,255,255,0.85); min-height: 100vh; display: flex; align-items: center; text-align: center; }
.error-page h1 { color: #fff; margin-bottom: var(--s-2); }
.error-page p { margin-bottom: var(--s-3); }
.error-page .wordmark { display: inline-block; margin-bottom: var(--s-4); }

/* Guide delivery page */
.guide-hero { background: var(--color-primary); color: rgba(255,255,255,0.85); padding-block: var(--s-6); text-align: center; }
.guide-hero h1 { color: #fff; margin-bottom: var(--s-2); }

/* ===================================
   TWO STANDING GUARDS

   Both of these are bugs that have shipped more than once in this design
   system. They are fixed here globally rather than per band, because the
   failure mode is forgetting one band, not getting the rule wrong.
   =================================== */

/* GUARD 1: light-on-dark heading colour cascading into a white form card.
   A .lead-form is always a white card, whatever dark band contains it
   (.hero, .midform, .magnet, .cta-band, or anything added later). Band rules
   like `.magnet h2 { color: #fff }` tie on specificity with `.lead-form h2`
   and win on source order, painting the form heading white on white.
   The doubled class raises specificity so no single-class ancestor can
   override it regardless of where it sits in the file. */
.lead-form.lead-form h2,
.lead-form.lead-form h3,
.lead-form.lead-form h4 { color: var(--color-ink); }
.lead-form.lead-form label,
.lead-form.lead-form legend { color: var(--color-ink); }
.lead-form.lead-form .form-lede,
.lead-form.lead-form .form-note { color: var(--color-muted); }

/* GUARD 2: stacked two-column bands butting together.
   Every band that pairs copy with a form card is a two-column grid on wide
   screens and a single stack below the breakpoint. Stacked, the card must not
   sit flush against the content above it. Listing every such band in one place
   means adding a new band means adding it here, rather than discovering the
   gap on a phone. */
.hero .lead-form,
.midform .lead-form,
.magnet .lead-form { margin-top: var(--s-4); }
@media (min-width: 900px) {
  .hero .lead-form,
  .midform .lead-form,
  .magnet .lead-form { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .announcement-bar, .mobile-cta, .site-footer, .cta-band, .midform { display: none; }
}