/* =========================================================
   Charlotte Commercial Doors — charlottecommercialdoors.net
   Register-first door contractor. Survey, schedule, document.

   Design rules this file enforces (see _designDirection in
   charlotte-commercial-doors-net-project.json):
     - Zero border radius sitewide. No drop shadows anywhere.
     - Card signature is a 3px left rule in primary. Never a
       rounded corner, never a shadow, never a full box.
     - Condensed grotesque headings over a transitional serif
       body. This inversion is the fastest visual tell that
       this property is not related to the sibling sites.
     - Section bands alternate --surface and --tint. Exactly
       one primary-filled band per page, and never the hero.
     - Palette is drawn from the logo: forest green, lime,
       steel grey. No warm accent anywhere by design.
   ========================================================= */

:root {
  /* brand — sampled from logo.svg */
  --primary:      #24614A;   /* hexagon body */
  --primary-dark: #1A4735;   /* utility bar, hover */
  --primary-deep: #123425;   /* pressed */
  --lime:         #9CC24D;   /* inner hexagon rule, accents only */
  --lime-dark:    #6E8F2E;   /* lime on white, for AA text contrast */

  /* neutrals */
  --ink:          #101820;   /* headings, footer field */
  --ink-1:        #1B242C;   /* raised panel on ink */
  --body:         #47554F;   /* body copy */
  --steel:        #5C6670;   /* logo tagline grey, meta text */
  --paper:        #FFFFFF;
  --surface:      #F5F7F4;   /* band A */
  --tint:         #EDF3EC;   /* band B */
  --border:       #DCE4DA;   /* hairline */
  --border-firm:  #B9C6B6;   /* table rules */

  --max:   1180px;
  --gut:   22px;

  --f-head: 'Archivo Narrow', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --f-body: 'Source Serif 4', Constantia, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* leaves room for the mobile call bar so it never covers content */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 74ch; }
/* A measure-limited column must still start on the page's left edge. Without
   this, .wrap's `margin: 0 auto` centres the narrowed box and prose sections
   sit indented against every full-width section above and below them. */
.wrap.narrow { max-width: var(--max); }
.wrap.narrow > * { max-width: 74ch; }

/* ---------------------------------------------------------
   Type
   --------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: 0;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.62rem, 3.4vw, 2.32rem); margin-bottom: .55em; }
h3 { font-size: 1.28rem; margin-bottom: .3em; }
h4 { font-size: 1.06rem; }

p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-dark); }

strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .85rem;
  display: block;
}
.eyebrow--rev { color: var(--lime); }

.lead { font-size: 1.12rem; }
.meta { font-size: .88rem; color: var(--steel); }

/* the lime rule is the recurring brand device, lifted from the logo */
.rule {
  width: 92px; height: 4px; background: var(--lime);
  border: 0; margin: 0 0 1.5rem;
}
.rule--tight { margin-bottom: 1.1rem; }

/* ---------------------------------------------------------
   Buttons — square, no radius, no shadow
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-head);
  font-weight: 700; font-size: 1rem; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 15px 26px;
  background: var(--primary); color: var(--paper);
  border: 2px solid var(--primary);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--paper); }
.btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

.btn--lg { padding: 18px 32px; font-size: 1.1rem; }

.btn--ghost { background: transparent; color: var(--primary); }
.btn--ghost:hover { background: var(--primary); color: var(--paper); }

/* on dark fields */
.btn--onDark { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn--onDark:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--ghostDark { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.5); }
.btn--ghostDark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 1.6rem; }

/* ---------------------------------------------------------
   Header — two tier. Utility strip over a plain nav row.
   --------------------------------------------------------- */
.util {
  background: var(--primary-dark);
  color: rgba(255,255,255,.86);
  font-family: var(--f-head);
  font-size: .84rem;
  letter-spacing: .04em;
}
.util__in {
  max-width: var(--max); margin: 0 auto; padding: 7px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.util__tag { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.util__tag b { color: var(--lime); font-weight: 600; }
.util__phone { color: var(--paper); text-decoration: none; font-weight: 700; white-space: nowrap; }
.util__phone:hover { color: var(--lime); }
@media (max-width: 780px) { .util__tag { display: none; } .util__in { justify-content: center; } }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--max); margin: 0 auto; padding: 12px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__logo { display: block; flex: none; }
.nav__logo img { height: 50px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav__links > li { flex: 0 0 auto; }
.nav__links > li > a {
  font-family: var(--f-head); font-weight: 600; font-size: .95rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 6px 0; display: block;
  border-bottom: 2px solid transparent;
}
.nav__links > li > a:hover,
.nav__links > li > a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--lime); }

/* services dropdown */
.has-sub { position: relative; }
.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.sub {
  display: none; position: absolute; top: calc(100% + 12px); left: -14px;
  min-width: 306px; background: var(--paper);
  border: 1px solid var(--border); border-top: 3px solid var(--primary);
  padding: 6px 0; list-style: none;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub a {
  display: block; padding: 10px 18px; font-size: .95rem;
  color: var(--ink); text-decoration: none; font-family: var(--f-body);
  border-left: 3px solid transparent;
}
.sub a:hover { background: var(--tint); border-left-color: var(--lime); color: var(--primary); }

/* Selector must out-specify `.nav__links > li > a` above, which would
   otherwise force display:block and drop the number below the icon. */
.nav__links > li > a.nav__call {
  background: var(--primary); color: var(--paper) !important;
  font-family: var(--f-head); font-weight: 700; letter-spacing: .04em;
  font-size: 1rem;
  padding: 12px 20px; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 9px;
  border-bottom: 0;
}
.nav__links > li > a.nav__call:hover { background: var(--primary-dark); border-bottom: 0; color: var(--paper) !important; }
.nav__call svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--border);
  width: 46px; height: 44px; cursor: pointer; color: var(--ink);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 22px; height: 2px; background: var(--ink); position: relative; margin: 0 auto;
}
.nav__toggle span::before { content: ""; position: absolute; top: -7px; }
.nav__toggle span::after  { content: ""; position: absolute; top: 7px; }

@media (max-width: 1020px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 3px solid var(--primary);
    padding: 6px var(--gut) 16px; max-height: 78vh; overflow-y: auto;
  }
  .nav__links.open { display: flex; }
  .nav__links > li { border-bottom: 1px solid var(--border); }
  .nav__links > li:last-child { border-bottom: 0; padding-top: 12px; }
  .nav__links > li > a { padding: 13px 0; }
  .sub { display: block; position: static; border: 0; min-width: 0; padding: 0 0 8px 14px; }
  .sub a { padding: 8px 0 8px 12px; border-left: 2px solid var(--border); }
  .nav__call { justify-content: center; }
}

/* ---------------------------------------------------------
   Hero — stacked, typographic, never a photograph.
   --------------------------------------------------------- */
.hero { background: var(--tint); border-bottom: 1px solid var(--border); }
.hero__in { max-width: var(--max); margin: 0 auto; padding: 68px var(--gut) 0; }
.hero h1 { max-width: 19ch; margin-bottom: 1.1rem; }
.hero__copy { max-width: 60ch; font-size: 1.16rem; }
.hero .btn-row { margin-bottom: 52px; }

/* four-cell standards strip beneath the hero */
.standards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-firm);
}
.standards div {
  padding: 20px 22px 22px;
  border-right: 1px solid var(--border);
  background: var(--paper);
}
.standards div:last-child { border-right: 0; }
.standards dt {
  font-family: var(--f-head); font-weight: 700; font-size: .76rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--primary);
  margin-bottom: 5px;
}
.standards dd { font-size: .95rem; line-height: 1.45; color: var(--body); }
@media (max-width: 900px) {
  .standards { grid-template-columns: repeat(2, 1fr); }
  .standards div:nth-child(2) { border-right: 0; }
  .standards div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .standards { grid-template-columns: 1fr; }
  .standards div { border-right: 0; border-bottom: 1px solid var(--border); }
  .standards div:last-child { border-bottom: 0; }
}

/* inner-page leader — smaller, same family */
.leader { background: var(--tint); border-bottom: 1px solid var(--border); padding: 46px 0 44px; }
.leader h1 { max-width: 22ch; margin-bottom: .9rem; }
.leader__copy { max-width: 62ch; font-size: 1.08rem; }

/* ---------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------- */
.crumbs { font-family: var(--f-head); font-size: .84rem; letter-spacing: .05em; margin-bottom: 1.1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--steel); text-transform: uppercase; }
.crumbs li + li::before { content: "/"; color: var(--border-firm); }
.crumbs a { color: var(--primary); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Sections and bands
   --------------------------------------------------------- */
.section { padding: 62px 0; }
.section--tight { padding: 44px 0; }
.section--a { background: var(--surface); }
.section--b { background: var(--tint); }
.section--ink { background: var(--ink); color: rgba(255,255,255,.82); }
.section--ink h2, .section--ink h3 { color: var(--paper); }

.section__head { margin-bottom: 2rem; }
.section__head p { max-width: 72ch; }

/* ---------------------------------------------------------
   Cards — 3px left rule, no border box, no shadow, no radius
   --------------------------------------------------------- */
.grid { display: grid; gap: 26px 30px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border-left: 3px solid var(--primary);
  padding: 22px 24px 24px;
}
.card h3 { margin-bottom: .35em; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--primary); text-decoration: underline; }
.card p { font-size: .99rem; }
.card__more {
  display: inline-block; margin-top: .9rem;
  font-family: var(--f-head); font-weight: 700; font-size: .88rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--primary); text-decoration: none;
}
.card__more:hover { color: var(--primary-dark); text-decoration: underline; }
.card--lime { border-left-color: var(--lime); }

/* ---------------------------------------------------------
   Figures — original technical drawings

   These carry small dimension labels. Scaling one to phone width would take
   13px type down to about 5px, so below its natural width the frame scrolls
   instead of shrinking. The drawing keeps its own border and left rule, so
   nothing is added here.
   --------------------------------------------------------- */
.fig { margin: 2.8rem 0 0; }
.fig--tight { margin-top: 1.8rem; }
.fig__frame {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* 860px keeps the smallest dimension labels near 11px. Below that the
   drawings stop being readable and start being decoration. */
.fig__frame img { width: 100%; min-width: 860px; height: auto; display: block; }
.fig figcaption, .photo figcaption {
  font-size: .9rem; line-height: 1.55; color: var(--steel);
  margin-top: 12px; max-width: 82ch;
  padding-left: 14px; border-left: 2px solid var(--border);
}

/* Photographs. Capped at their intrinsic width — these are ~610px originals
   and stretching one across the container only makes it soft. Left-aligned,
   which matches the prose columns that already stop short of the right
   margin, so the space beside it reads as the page's rhythm rather than a gap. */
.photo { margin: 2.8rem 0 0; max-width: 611px; }
.photo img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border);
}
.photo figcaption { max-width: 611px; }
/* scroll affordance, only where the drawing actually overflows */
@media (max-width: 720px) {
  .fig__frame { border-right: 1px solid var(--border); }
  .fig figcaption::after {
    content: " Scroll the drawing sideways to see all of it.";
    color: var(--lime-dark); font-weight: 600;
  }
}

/* ---------------------------------------------------------
   Ruled register — service subitems, values, why-us.
   Two columns, hairline separated. Deliberately not cards.
   --------------------------------------------------------- */
.register { border-top: 2px solid var(--ink); }
.register__row {
  display: grid; grid-template-columns: 300px 1fr; gap: 28px;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.register__row:last-child { border-bottom: 1px solid var(--border-firm); }
.register__k {
  font-family: var(--f-head); font-weight: 600; font-size: 1.1rem;
  color: var(--ink); line-height: 1.25;
}
.register__v { font-size: 1rem; }
@media (max-width: 760px) {
  .register__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------
   Tables — header carries no fill, only a 2px bottom rule
   --------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
table { width: 100%; border-collapse: collapse; font-size: .98rem; }
caption { text-align: left; font-family: var(--f-head); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding-bottom: 10px; }
th {
  text-align: left; font-family: var(--f-head); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: none;
  padding: 0 20px 11px 0; border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
td { padding: 15px 20px 15px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 1px solid var(--border-firm); }
td:first-child { font-family: var(--f-head); font-weight: 600; font-size: 1.03rem; color: var(--ink); }
.table-note { font-size: .95rem; color: var(--body); max-width: 74ch; }
.num { font-variant-numeric: tabular-nums lining-nums; font-family: var(--f-mono); font-size: .93em; }

/* ---------------------------------------------------------
   Process — left numeral column, hanging indent.
   Not cards, not a timeline.
   --------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; max-width: 82ch; }
.steps li {
  display: grid; grid-template-columns: 74px 1fr; gap: 4px 22px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: 0; }
.steps__n {
  grid-row: span 2;
  font-family: var(--f-head); font-weight: 700; font-size: 2.5rem; line-height: .9;
  color: var(--lime-dark);
  font-variant-numeric: tabular-nums lining-nums;
}
.steps__t { font-family: var(--f-head); font-weight: 600; font-size: 1.18rem; color: var(--ink); align-self: end; }
.steps__d { font-size: 1rem; }
.inline-call {
  font-family: var(--f-head); font-weight: 700; letter-spacing: .04em;
  color: var(--primary); text-decoration: none;
  border-bottom: 2px solid var(--lime); white-space: nowrap;
}
.inline-call:hover { color: var(--primary-dark); border-bottom-color: var(--primary); }
@media (max-width: 560px) {
  .steps li { grid-template-columns: 52px 1fr; }
  .steps__n { font-size: 1.9rem; }
}

/* ---------------------------------------------------------
   Link lists — services / areas index
   --------------------------------------------------------- */
.linklist { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); }
@media (max-width: 860px) { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .linklist { grid-template-columns: 1fr; } }
.linklist a {
  display: block; padding: 16px 18px;
  font-family: var(--f-head); font-weight: 600; font-size: 1.02rem;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent;
  background: var(--paper);
}
.linklist a:hover { border-left-color: var(--lime); color: var(--primary); background: var(--tint); }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { max-width: 84ch; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--border); background: none; }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--f-head); font-weight: 600; font-size: 1.13rem; color: var(--ink);
  padding: 17px 44px 17px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 13px; height: 13px; margin-top: -9px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg); transition: transform .16s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--primary); }
.faq__a { padding: 0 0 20px; max-width: 78ch; }
.faq__group + .faq__group { margin-top: 2.6rem; }
.faq__group > h2 { font-size: 1.5rem; }

/* ---------------------------------------------------------
   Call panel — the conversion unit. Phone only, no forms.
   --------------------------------------------------------- */
.callpanel {
  background: var(--paper);
  border-left: 3px solid var(--lime);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 30px 32px 34px;
}
.callpanel h2, .callpanel h3 { margin-bottom: .5em; }
.callpanel__num {
  display: inline-block; margin: .35rem 0 .2rem;
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 2.7rem); line-height: 1.05;
  color: var(--primary); text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.callpanel__num:hover { color: var(--primary-dark); text-decoration: underline; }
.callpanel__free {
  display: inline-block; margin-top: .5rem;
  font-family: var(--f-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--lime-dark);
  border: 1px solid var(--lime); padding: 5px 11px;
}

.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* prep / bullet lists */
.ticks { list-style: none; max-width: 76ch; }
.ticks li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--border); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 12px; height: 3px; background: var(--lime);
}
.bullets { list-style: none; max-width: 76ch; }
.bullets li { position: relative; padding: 5px 0 5px 24px; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 3px; background: var(--lime); }

/* ---------------------------------------------------------
   CTA band — the single primary-filled band on a page
   --------------------------------------------------------- */
.cta {
  background: var(--primary); color: rgba(255,255,255,.9);
  padding: 56px 0 58px;
  border-top: 5px solid var(--lime);
}
.cta h2 { color: var(--paper); max-width: 24ch; }
.cta p { max-width: 66ch; }
.cta .rule { background: var(--lime); }
.cta__num {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem); color: var(--paper); text-decoration: none;
  display: inline-block; margin-top: .4rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.cta__num:hover { color: var(--lime); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 54px 0 26px; font-size: .95rem; }
.site-footer h4 {
  color: var(--paper); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 14px; font-weight: 700;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { margin-bottom: 18px; }
.footer-logo img { height: 52px; width: auto; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--lime); text-decoration: underline; }
.footer-phone {
  font-family: var(--f-head); font-weight: 700; font-size: 1.5rem;
  color: var(--paper) !important; text-decoration: none !important;
  display: inline-block; margin: 4px 0 6px;
  font-variant-numeric: tabular-nums lining-nums;
}
.footer-phone:hover { color: var(--lime) !important; }
.footer-note { font-size: .84rem; color: rgba(255,255,255,.56); line-height: 1.55; margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 20px;
  font-size: .84rem; color: rgba(255,255,255,.56);
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
}
/* the sitemap sits in the legal row, where people look for it, and is tinted
   so it does not read as one more policy page */
.footer-bottom .footer-sitemap { color: var(--lime); }
.footer-bottom .footer-sitemap:hover { color: var(--paper); }

/* ---------------------------------------------------------
   Mobile sticky call bar — phone is the only conversion path
   --------------------------------------------------------- */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--primary); border-top: 3px solid var(--lime);
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  color: var(--paper); text-decoration: none;
  font-family: var(--f-head); font-weight: 700; font-size: 1.16rem; letter-spacing: .04em;
}
.callbar svg { width: 19px; height: 19px; fill: currentColor; }
@media (max-width: 780px) {
  .callbar { display: block; }
  body { padding-bottom: 68px; }
}

/* ---------------------------------------------------------
   Utilities
   --------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  font-family: var(--f-head); font-weight: 700;
}
.skip:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.stack > * + * { margin-top: 1.05rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 2.8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .util, .site-header, .callbar, .cta { display: none; }
  body { font-size: 12pt; }
}