/* ==========================================================================
   GENESIS COMFORT SOLUTIONS — Shared design system
   ---------------------------------------------------------------------------
   Positioning: the EXPERT premium HVAC & geothermal firm for Central Arkansas.
   30+ years. Confident, precise, understated — a mechanical-engineering firm,
   not a coupon shop. Navy-dominant, red as a RARE accent, the navy(3px)+red(1px)
   double-rule signature, a spec-sheet vernacular (mono microtype + hairline
   framing) that signals engineering rigor, and a restrained distressed-flag
   texture. Serif display (Palatino/Book Antiqua) + system sans. Fire<->ice
   is a quiet hairline device only. No external fonts/CDNs (CSP-safe).
   Single source of truth for every page. Mobile-first, accessible.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Core palette */
  --navy:        #0f2a52;
  --navy-deep:   #0a1f3f;
  --navy-2:      #14356a;   /* lifted navy for gradients / hovers */
  --navy-hover:  #163b70;
  --red:         #a91e2c;
  --red-hover:   #8f1824;
  --red-soft:    #c65b5b;   /* warmed red for use ON navy (accessible) */

  /* Fire<->ice, kept as a quiet hairline device (not filled text) */
  --ice:         #2f6fb0;
  --flame:       #c9481f;

  /* Neutrals — deliberately cool-navy-biased, not pure grey */
  --ink:         #182230;
  --ink-2:       #3a4656;   /* secondary body ink */
  --muted:       #5d6772;
  --hairline:    #e3e8f0;
  --hairline-2:  #d3dae6;   /* stronger hairline for spec framing */
  --ground:      #f4f6fa;   /* soft cool ground */
  --ground-2:    #eef2f8;   /* second ground for banded sections */
  --paper:       #ffffff;
  --success:     #137333;

  /* On-navy neutrals (warm-biased for legibility on the dark ground) */
  --on-navy:        #e9eef7;
  --on-navy-2:      #c3cfe2;
  --on-navy-muted:  #93a3bf;
  --on-navy-line:   rgba(255,255,255,.13);
  --on-navy-line-2: rgba(255,255,255,.22);

  /* Fire<->ice hairline gradient (subtle, thin only) */
  --fire-ice: linear-gradient(90deg, var(--ice) 0%, #4a6aa0 45%, var(--red) 70%, var(--flame) 100%);

  /* Type families */
  --serif: "Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:  "Consolas","SFMono-Regular","Roboto Mono",ui-monospace,Menlo,monospace;

  /* Type scale — a confident editorial ramp */
  --fs-micro:   .74rem;   /* mono labels, spec captions */
  --fs-eyebrow: .76rem;
  --fs-small:   .875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.15rem, 1.02rem + .55vw, 1.42rem);
  --fs-h3:      clamp(1.3rem, 1.14rem + .7vw, 1.7rem);
  --fs-h2:      clamp(1.9rem, 1.45rem + 2vw, 3.1rem);
  --fs-h1:      clamp(2.5rem, 1.75rem + 3.6vw, 4.6rem);
  --fs-display: clamp(3rem, 2rem + 5vw, 6rem);   /* rare, oversized statement */

  /* Spacing */
  --sp-1: .375rem;  --sp-2: .625rem;  --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2.25rem;  --sp-6: 3.5rem;   --sp-7: 5rem;   --sp-8: 7rem;

  /* Structure */
  --wrap: 1220px;
  --wrap-narrow: 760px;
  --radius: 3px;         /* restrained, architectural — not rounded-lg */
  --radius-sm: 2px;
  --shadow:    0 1px 2px rgba(15,42,82,.05), 0 10px 30px rgba(15,42,82,.07);
  --shadow-lg: 0 24px 60px rgba(10,31,63,.15);
  --header-h: 78px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body {
  margin:0; font-family:var(--sans); font-size:var(--fs-body); line-height:1.68;
  color:var(--ink-2); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--navy); text-decoration:none; transition:color .15s var(--ease); }
a:hover { color:var(--red); }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:700; line-height:1.06; color:var(--navy); margin:0; text-wrap:balance; letter-spacing:-.012em; }
p { margin:0; }
ul { margin:0; }
button { font-family:inherit; }
strong { color:var(--ink); }
::selection { background:var(--navy); color:#fff; }
:focus-visible { outline:3px solid var(--ice); outline-offset:2px; border-radius:2px; }

/* --------------------------------------------------------------- Utilities */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.25rem); }
.wrap-narrow { max-width:var(--wrap-narrow); }
.section { padding-block:clamp(3.5rem,8vw,var(--sp-8)); }
.section--tight { padding-block:clamp(2.5rem,5vw,var(--sp-6)); }
.section--ground { background:var(--ground); }
.section--ground-2 { background:var(--ground-2); }
.section--navy { background:var(--navy-deep); color:var(--on-navy); position:relative; }
.section--navy h1,.section--navy h2,.section--navy h3 { color:#fff; }
/* Contrast safety on dark grounds: never leave light-theme greys on navy */
.section--navy .lede { color:var(--on-navy-2); }
.section--navy .spec-label { color:var(--on-navy-muted); }
.specialty .eyebrow, .cta-band .eyebrow { color:var(--red-soft); }
.hero strong, .page-intro strong, .specialty strong, .section--navy strong,
.cta-band strong, .navy-card strong, .portal-badge strong, .site-footer strong { color:inherit; }
.page-intro p:not(.crumbs) a, .specialty a:not(.btn), .section--navy p a:not(.btn) { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.page-intro p:not(.crumbs) a:hover, .specialty a:not(.btn):hover, .section--navy p a:not(.btn):hover { color:var(--red-soft); }
.center { text-align:center; }
.stack > * + * { margin-top:var(--sp-3); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; z-index:200; background:var(--red); color:#fff; padding:.7rem 1.1rem; font-weight:700; }
.skip-link:focus { left:0; color:#fff; }
.tnum { font-variant-numeric:tabular-nums; }

/* Signature: navy(3px)+red(1px) double-rule */
.double-rule { border:0; height:4px; width:100%; padding:0; margin:0;
  background:
    linear-gradient(var(--red),var(--red)) bottom/100% 1px no-repeat,
    linear-gradient(var(--navy),var(--navy)) top/100% 3px no-repeat; }
.double-rule--short { width:60px; }
.double-rule--on-navy {
  background:
    linear-gradient(var(--red-soft),var(--red-soft)) bottom/100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) top/100% 3px no-repeat; }
.fire-ice-rule { height:2px; width:66px; border:0; margin:0; background:var(--fire-ice); }

/* Mono utility label — the spec-sheet voice */
.spec-label {
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}

/* ------------------------------------------------- Eyebrow / section header */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red); margin:0 0 1rem;
}
.eyebrow::before { content:""; width:22px; height:2px; background:currentColor; opacity:.8; }
.sec-head { max-width:64ch; }
.sec-head.center { margin-inline:auto; }
.sec-head.center .eyebrow { justify-content:center; }
.sec-head h2 { font-size:var(--fs-h2); }
.sec-head .lede { color:var(--muted); font-size:var(--fs-lead); margin-top:1.1rem; max-width:60ch; }
.sec-head.center .lede { margin-inline:auto; }
.section--navy .sec-head .lede { color:var(--on-navy-2); }
.section--navy .eyebrow { color:var(--red-soft); }
.lede { font-size:var(--fs-lead); color:var(--muted); }

/* --------------------------------------------------------------- Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-weight:700; font-size:1rem; line-height:1;
  padding:1rem 1.65rem; border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  text-align:center; letter-spacing:.01em;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn--red { background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 8px 22px rgba(169,30,44,.24); }
.btn--red:hover { background:var(--red-hover); border-color:var(--red-hover); color:#fff; box-shadow:0 12px 28px rgba(169,30,44,.3); }
.btn--navy { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--navy:hover { background:var(--navy-hover); border-color:var(--navy-hover); color:#fff; }
.btn--ghost { background:transparent; color:var(--navy); border-color:var(--hairline-2); }
.btn--ghost:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--on-navy { background:#fff; color:var(--navy); border-color:#fff; }
.btn--on-navy:hover { background:var(--ground); color:var(--navy); }
.btn--ghost-on-navy { background:transparent; color:#fff; border-color:var(--on-navy-line-2); }
.btn--ghost-on-navy:hover { background:#fff; color:var(--navy); border-color:#fff; }
.btn--lg { padding:1.15rem 2rem; font-size:1.05rem; }
.btn--block { width:100%; }
.btn svg { width:1.1em; height:1.1em; flex:none; }

/* -------------------------------------------------------------- Header/nav */
/* NOTE: no backdrop-filter here — it would create a containing block that breaks
   the position:fixed mobile nav panel/backdrop. Keep the background near-opaque instead. */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97); }
.site-header .double-rule { position:absolute; left:0; right:0; bottom:0; }
.header-inner { display:flex; align-items:center; gap:1.25rem; min-height:var(--header-h); }
.brand { display:flex; align-items:center; gap:.75rem; flex:none; }
.brand img { height:58px; width:auto; }
@media (min-width:1024px){ .brand img { height:64px; } }
.brand .brand-txt { display:none; line-height:1.05; }
@media (min-width:1140px){ .brand .brand-txt{ display:block; } }
.brand-txt strong { font-family:var(--serif); color:var(--navy); font-size:1.05rem; letter-spacing:.005em; display:block; font-weight:700; }
.brand-txt span { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.nav { margin-left:auto; }
.nav-toggle { display:inline-flex; flex-direction:column; gap:5px; width:48px; height:44px; align-items:center; justify-content:center; background:transparent; border:1.5px solid var(--hairline-2); border-radius:var(--radius-sm); cursor:pointer; -webkit-user-select:none; user-select:none; }
.nav-toggle span { width:22px; height:2px; background:var(--navy); border-radius:2px; }
#nav-check { position:absolute; opacity:0; pointer-events:none; }
.nav-links { list-style:none; display:flex; align-items:center; gap:clamp(.35rem,1.1vw,1.15rem); margin:0; padding:0; }
.nav-links a { font-family:var(--sans); font-weight:600; font-size:.925rem; color:var(--ink); padding:.4rem .15rem; position:relative; white-space:nowrap; }
.nav-links a:hover { color:var(--red); }
.nav-links a[aria-current="page"] { color:var(--navy); }
.nav-links a[aria-current="page"]::after { content:""; position:absolute; left:.15rem; right:.15rem; bottom:-3px; height:2px; background:var(--red); }
.nav-cta { display:flex; align-items:center; gap:.75rem; margin-left:.5rem; }
.nav-cta .btn { padding:.68rem 1.15rem; font-size:.9rem; }
.nav-call { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--navy); font-size:.9rem; white-space:nowrap; }
.nav-call:hover { color:var(--red); }
.nav-call svg { width:1em; height:1em; color:var(--red); }

/* Sign In — prominent but secondary to Request Service: hairline-framed pill */
.nav-signin { display:inline-flex; align-items:center; gap:.42rem; font-family:var(--sans); font-weight:700;
  font-size:.9rem; color:var(--navy); white-space:nowrap; padding:.6rem 1rem;
  border:1.5px solid var(--hairline-2); border-radius:var(--radius);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.nav-signin:hover { color:var(--navy); border-color:var(--navy); background:var(--ground); }
.nav-signin svg { width:1.05em; height:1.05em; color:var(--navy); flex:none; }

@media (max-width:1023px){
  .nav-toggle { order:3; }
  /* Solid, fully opaque panel stacked above the dim backdrop (both live inside the
     header's z-index:100 stacking context, so they sit above all page content). */
  .nav-panel { position:fixed; inset:var(--header-h) 0 0 auto; width:min(90vw,380px); z-index:2;
    background:var(--paper); border-left:1px solid var(--hairline); box-shadow:var(--shadow-lg);
    transform:translateX(103%); transition:transform .28s var(--ease); overflow-y:auto;
    display:flex; flex-direction:column; padding:1.4rem 1.4rem 2.5rem; gap:1.2rem; }
  /* The checkbox is a direct child of .site-header; .header-inner (which contains
     .nav) is its sibling — so the combinator must be `~ .header-inner`, not `~ .nav`. */
  #nav-check:checked ~ .header-inner .nav-panel { transform:translateX(0); }
  .nav-links { flex-direction:column; align-items:stretch; gap:0; }
  /* Menu rows: the divider lives on the block-level <li>, and each <a> is a
     block-level flex row filling its <li>. Inline anchors with vertical padding
     produced 53px-tall hitboxes overlapping neighboring 29px rows (taps landed on
     the wrong item) and painted their border-bottom through the next row. */
  .nav-links li { border-bottom:1px solid var(--hairline); }
  .nav-links li:last-child { border-bottom:0; }
  .nav-links a { display:flex; align-items:center; width:100%; min-height:48px;
    padding:.7rem .6rem; font-size:1.05rem; font-weight:600; }
  .nav-links a:active { background:var(--ground); }
  .nav-links a[aria-current="page"]::after { display:none; }
  .nav-links a[aria-current="page"] { color:var(--red); }
  .nav-cta { flex-direction:column; align-items:stretch; margin-left:0; margin-top:.75rem; }
  .nav-cta .btn { padding:.95rem 1rem; font-size:1rem; min-height:48px; }
  .nav-call { padding:.75rem 0; font-size:1.05rem; justify-content:center; min-height:48px; }
  .nav-signin { justify-content:center; padding:.9rem 1rem; font-size:1rem; min-height:48px; }
  .nav-backdrop { position:fixed; inset:var(--header-h) 0 0 0; background:rgba(10,31,63,.45); opacity:0; visibility:hidden; transition:opacity .22s var(--ease); z-index:1; }
  #nav-check:checked ~ .header-inner .nav-backdrop { opacity:1; visibility:visible; }
}
@media (min-width:1024px){
  .nav-toggle { display:none; }
  .nav-panel { display:flex; align-items:center; gap:clamp(.35rem,1.1vw,1.15rem); }
  .nav-backdrop { display:none; }
}

/* ------------------------------------------------------------------- Hero */
.hero { position:relative; overflow:hidden; isolation:isolate; color:var(--on-navy);
  background:
    radial-gradient(130% 120% at 82% -10%, var(--navy-2) 0%, var(--navy) 44%, var(--navy-deep) 100%); }
/* Flag watermark anchored behind the headline block — the only rule-free zone of
   the hero. Dead-center it sat under the stats row, whose full-width hairline
   (border-top) drew a visible line straight through the flag. */
.hero-flag { position:absolute; inset:0; z-index:-1; background-image:url("assets/flag.png");
  background-repeat:no-repeat; background-position:left 5vw top 7rem; background-size:min(78%,560px) auto;
  opacity:.12; filter:grayscale(.3) contrast(1.05); pointer-events:none; }
/* Faint blueprint grid — engineering texture */
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(180deg,#000 0%, transparent 78%); }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:linear-gradient(var(--red),var(--red)) bottom/100% 1px no-repeat,
             linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) top/100% 3px no-repeat; }
.hero-inner { position:relative; z-index:1; padding-block:clamp(3.5rem,9vw,7rem); display:grid; gap:3rem; }
@media (min-width:940px){ .hero-inner{ grid-template-columns:1.28fr .72fr; align-items:center; gap:4rem; } }
.hero .eyebrow { color:var(--red-soft); }
.hero h1 { color:#fff; font-size:var(--fs-h1); letter-spacing:-.02em; line-height:1.02; }
.hero h1 em { font-style:italic; color:#fff; }
.hero h1 .accent { color:var(--red-soft); font-style:normal; }
.hero-sub { color:var(--on-navy-2); font-size:var(--fs-lead); max-width:52ch; margin-top:1.5rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.5rem 2rem; margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--on-navy-line); }
.hero-meta div { display:flex; flex-direction:column; gap:.15rem; }
.hero-meta .n { font-family:var(--serif); font-size:1.85rem; font-weight:700; color:#fff; line-height:1; }
.hero-meta .l { font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-navy-muted); }

/* Hero credential ledger — replaces the cheesy emergency card */
.hero-ledger { background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--on-navy-line-2); border-radius:var(--radius); padding:1.75rem; backdrop-filter:blur(2px); }
.hero-ledger .ledger-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--on-navy-line); }
.hero-ledger .ledger-head .spec-label { color:var(--on-navy-muted); }
.hero-ledger .ledger-head .est { font-family:var(--mono); font-size:.72rem; color:var(--on-navy-2); letter-spacing:.08em; }
.ledger-row { display:flex; align-items:flex-start; gap:.85rem; padding:.95rem 0; border-bottom:1px solid var(--on-navy-line); }
.ledger-row:last-of-type { border-bottom:0; }
.ledger-row svg { width:1.2rem; height:1.2rem; color:var(--red-soft); flex:none; margin-top:.15rem; }
.ledger-row strong { display:block; color:#fff; font-family:var(--sans); font-size:.98rem; }
.ledger-row span { font-size:.86rem; color:var(--on-navy-2); }
.hero-ledger .ledger-cta { margin-top:1.25rem; }

/* ------------------------------------------------------- Credential strip */
.credbar { background:var(--paper); border-bottom:1px solid var(--hairline); }
.credbar-inner { display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .credbar-inner{ grid-template-columns:repeat(4,1fr); } }
.cred { padding:1.6rem clamp(1.1rem,3vw,1.9rem); border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
@media (min-width:860px){ .cred{ border-bottom:0; } }
.cred:nth-child(2n){ border-right:0; }
@media (min-width:860px){ .cred{ border-right:1px solid var(--hairline); } .cred:last-child{ border-right:0; } .cred:nth-child(2n){ border-right:1px solid var(--hairline); } }
.cred .n { font-family:var(--serif); font-size:clamp(1.9rem,1.4rem+1.6vw,2.6rem); font-weight:700; color:var(--navy); line-height:1; }
.cred .l { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.55rem; }

/* --------------------------------------------------------------- Cards/grid */
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns:1fr; }
.grid-3 { grid-template-columns:1fr; }
.grid-4 { grid-template-columns:1fr; }
@media (min-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } }

/* Editorial service card — indexed, hairline-framed (spec-sheet vernacular) */
.card { position:relative; background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:1.85rem 1.7rem 1.65rem; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); overflow:hidden; }
.card--link { display:block; }
.card--link:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--hairline-2); }
.card--link:hover .card-title { color:var(--red); }
.card-idx { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--muted); font-weight:600; }
.card-ico { width:48px; height:48px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:var(--navy); margin:1rem 0 1.15rem; }
.card-ico svg { width:24px; height:24px; color:#fff; }
.card-title { font-family:var(--serif); font-size:var(--fs-h3); color:var(--navy); margin-bottom:.55rem; transition:color .18s var(--ease); letter-spacing:-.01em; }
.card p { color:var(--muted); font-size:1rem; }
.card-more { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-weight:700; font-size:.9rem; color:var(--red); }
.card-more svg { width:1em; height:1em; transition:transform .18s var(--ease); }
.card--link:hover .card-more svg { transform:translateX(4px); }
/* thin top accent rule that draws in on hover */
.card::before { content:""; position:absolute; top:0; left:0; height:3px; width:0; background:var(--red); transition:width .3s var(--ease); }
.card--link:hover::before { width:100%; }

/* -------------------------------------------------------- Specialty band */
.specialty { position:relative; overflow:hidden; color:var(--on-navy);
  background:radial-gradient(120% 130% at 15% 0%, var(--navy-2) 0%, var(--navy) 42%, var(--navy-deep) 100%); }
/* Watermark behind the band's heading/text column (borderless zone) — under the
   right-hand specialty panel its hairline rows sliced across the flag, and the
   negative offset clipped it hard at the viewport edge. */
.specialty .flag-wm { position:absolute; inset:0; z-index:0; background-image:url("assets/flag.png");
  background-repeat:no-repeat; background-position:left clamp(1rem,4vw,3.5rem) top 5rem; background-size:min(52%,540px) auto; opacity:.09; pointer-events:none; }
.specialty-inner { position:relative; z-index:1; display:grid; gap:2.75rem; align-items:center; }
@media (min-width:920px){ .specialty-inner{ grid-template-columns:1.05fr .95fr; gap:4rem; } }
.specialty h2 { color:#fff; font-size:var(--fs-h2); }
.specialty .lede { color:var(--on-navy-2); }
.specialty-list { list-style:none; padding:0; margin:1.75rem 0 0; display:grid; gap:.9rem; }
.specialty-list li { display:flex; gap:.75rem; align-items:flex-start; color:var(--on-navy); }
.specialty-list svg { width:1.3rem; height:1.3rem; color:var(--red-soft); flex:none; margin-top:.15rem; }
.specialty-panel { border:1px solid var(--on-navy-line-2); border-radius:var(--radius); overflow:hidden; }
.specialty-panel .sp-head { padding:1.2rem 1.5rem; border-bottom:1px solid var(--on-navy-line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; background:rgba(255,255,255,.03); }
.specialty-panel .sp-head .spec-label { color:var(--on-navy-muted); }
.specialty-panel .sp-row { padding:1.2rem 1.5rem; border-bottom:1px solid var(--on-navy-line); }
.specialty-panel .sp-row:last-child { border-bottom:0; }
.specialty-panel .sp-row h3 { color:#fff; font-size:1.12rem; margin-bottom:.3rem; }
.specialty-panel .sp-row p { color:var(--on-navy-2); font-size:.92rem; }

/* ------------------------------------------- On-navy panel cards (dark bands) */
.navy-cards { display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:860px){ .navy-cards{ grid-template-columns:repeat(3,1fr); } }
.navy-card { border:1px solid var(--on-navy-line-2); background:rgba(255,255,255,.045);
  border-radius:var(--radius); padding:2rem 1.75rem; }
.navy-card .kicker { font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red-soft); font-weight:600; }
.navy-card h3 { color:#fff; font-family:var(--serif); font-size:1.24rem; margin:.9rem 0 .55rem; letter-spacing:-.01em; }
.navy-card p { color:var(--on-navy-2); font-size:.96rem; }

/* ------------------------------------------------- Process (true sequence) */
.process { display:grid; gap:1.25rem; grid-template-columns:1fr; counter-reset:step; margin-top:2.5rem; }
@media (min-width:760px){ .process{ grid-template-columns:repeat(4,1fr); } }
.step { position:relative; padding:1.6rem 1.4rem; border:1px solid var(--hairline); border-radius:var(--radius); background:var(--paper); }
.step .num { font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; color:var(--red); font-weight:700; }
.step h3 { font-family:var(--serif); font-size:1.18rem; color:var(--navy); margin:.7rem 0 .4rem; }
.step p { color:var(--muted); font-size:.94rem; }
.step .code { font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.05em; margin-top:.7rem; display:block; }

/* --------------------------------------------------------- Feature list */
.feature-list { list-style:none; padding:0; margin:0; display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media (min-width:700px){ .feature-list{ grid-template-columns:repeat(2,1fr); gap:2rem 2.5rem; } }
.feature { display:flex; gap:1.1rem; }
.feature-ico { width:46px; height:46px; flex:none; border-radius:var(--radius-sm); background:var(--ground-2);
  border:1px solid var(--hairline-2); display:flex; align-items:center; justify-content:center; }
.feature-ico svg { width:22px; height:22px; color:var(--navy); }
.feature h3 { font-family:var(--serif); font-size:1.24rem; color:var(--navy); margin-bottom:.4rem; }
.feature p { color:var(--muted); font-size:.98rem; }
.section--navy .feature-ico { background:rgba(255,255,255,.06); border-color:var(--on-navy-line-2); }
.section--navy .feature-ico svg { color:#fff; }
.section--navy .feature h3 { color:#fff; }
.section--navy .feature p { color:var(--on-navy-2); }

/* ------------------------------------------------------------- Plan cards */
.plans { display:grid; gap:1.5rem; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:860px){ .plans{ grid-template-columns:repeat(3,1fr); } }
.plan { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:2rem 1.85rem; box-shadow:var(--shadow); position:relative; }
.plan--featured { border-color:var(--navy); box-shadow:var(--shadow-lg); }
.plan--featured::before { content:"Most chosen"; position:absolute; top:0; right:1.6rem; transform:translateY(-50%);
  background:var(--navy); color:#fff; font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .75rem; border-radius:2px; }
.plan .plan-name { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.plan h3 { font-size:var(--fs-h3); margin-top:.45rem; }
.plan .price { font-family:var(--serif); font-size:2.7rem; font-weight:700; color:var(--navy); line-height:1; margin:1rem 0 .25rem; font-variant-numeric:tabular-nums; }
.plan .price small { font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--muted); }
.plan .price-basis { font-family:var(--mono); font-size:.75rem; color:var(--muted); letter-spacing:.03em; margin-bottom:1.4rem; }
.plan ul { list-style:none; padding:0; margin:0 0 1.75rem; display:flex; flex-direction:column; gap:.75rem; }
.plan li { display:flex; gap:.65rem; font-size:.97rem; color:var(--ink-2); }
.plan li svg { width:1.15em; height:1.15em; color:var(--success); flex:none; margin-top:.2em; }
.plan .btn { margin-top:auto; }

/* Billing toggle (monthly / quarterly) */
.bill-toggle { display:inline-flex; border:1px solid var(--hairline-2); border-radius:100px; padding:.25rem; background:var(--paper); }
.bill-toggle button { border:0; background:transparent; font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--muted);
  padding:.5rem 1.2rem; border-radius:100px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.bill-toggle button[aria-pressed="true"] { background:var(--navy); color:#fff; }

/* ------------------------------------------------------------ Service area */
.area-strip { display:flex; flex-wrap:wrap; gap:.55rem; }
.area-chip { display:inline-flex; align-items:center; gap:.45rem; background:var(--paper); border:1px solid var(--hairline);
  border-radius:2px; padding:.5rem .95rem; font-size:.9rem; font-weight:600; color:var(--navy); }
.area-chip svg { width:.9em; height:.9em; color:var(--red); }
.section--navy .area-chip { background:rgba(255,255,255,.05); border-color:var(--on-navy-line); color:#fff; }
.section--navy .area-chip svg { color:var(--red-soft); }

/* -------------------------------------------------------------- Reviews */
.reviews { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:720px){ .reviews{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .reviews{ grid-template-columns:repeat(3,1fr); } }
.review { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius); padding:1.85rem 1.7rem; display:flex; flex-direction:column; }
.review .mark { font-family:var(--serif); font-size:3rem; line-height:.6; color:var(--hairline-2); height:1.1rem; }
.review blockquote { margin:.5rem 0 1.5rem; font-family:var(--serif); font-size:1.1rem; line-height:1.55; color:var(--ink); }
.review-by { display:flex; align-items:center; gap:.85rem; margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--hairline); }
.review-avatar { width:44px; height:44px; border-radius:50%; flex:none; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.05rem; }
.review-by strong { display:block; font-family:var(--sans); font-size:.94rem; color:var(--ink); }
.review-by span { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); }

/* ------------------------------------------------------- GC / contractor band */
.gc-band { position:relative; overflow:hidden; background:var(--ground-2); }
.gc-inner { display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .gc-inner{ grid-template-columns:1.1fr .9fr; gap:4rem; } }
.gc-visual { border:1px solid var(--hairline-2); border-radius:var(--radius); background:var(--paper); padding:1.75rem; box-shadow:var(--shadow); }
.gc-visual .gc-row { display:flex; gap:.85rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--hairline); }
.gc-visual .gc-row:last-child { border-bottom:0; }
.gc-visual .gc-row svg { width:1.3rem; height:1.3rem; color:var(--navy); flex:none; margin-top:.15rem; }
.gc-visual .gc-row strong { display:block; color:var(--ink); font-size:.98rem; }
.gc-visual .gc-row span { font-size:.88rem; color:var(--muted); }

/* --------------------------------------------------------------- CTA band */
.cta-band { position:relative; overflow:hidden; color:var(--on-navy);
  background:radial-gradient(120% 150% at 12% 8%, var(--navy-2) 0%, var(--navy) 46%, var(--navy-deep) 100%); }
/* Smaller watermark tucked behind the CTA heading only — at 56% width it ran under
   the bordered portal-badge card and the action buttons' borders crossed it. */
.cta-band .flag-wm { position:absolute; inset:0; z-index:0; background-image:url("assets/flag.png");
  background-repeat:no-repeat; background-position:left clamp(1rem,4vw,3.5rem) top 2.25rem; background-size:min(40%,300px) auto; opacity:.09; pointer-events:none; }
.cta-band-inner { position:relative; z-index:1; display:grid; gap:2rem; align-items:center; }
@media (min-width:880px){ .cta-band-inner{ grid-template-columns:1.35fr .65fr; } }
.cta-band h2 { color:#fff; font-size:var(--fs-h2); }
.cta-band p { color:var(--on-navy-2); font-size:var(--fs-lead); margin-top:1rem; }
.cta-band .actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem; }
.portal-badge { border:1px solid var(--on-navy-line-2); border-radius:var(--radius); padding:1.6rem 1.75rem; background:rgba(255,255,255,.05); }
.portal-badge .spec-label { color:var(--on-navy-muted); }
.portal-badge h3 { color:#fff; font-size:1.25rem; margin:.6rem 0 .5rem; }
.portal-badge p { font-size:.9rem; color:var(--on-navy-2); margin-top:0; }
.portal-badge .btn { margin-top:1.1rem; }

/* ------------------------------------------------------------------ Forms */
.request { display:grid; gap:3rem; align-items:start; }
@media (min-width:940px){ .request{ grid-template-columns:.85fr 1.15fr; } }
.form-card { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:clamp(1.6rem,3vw,2.5rem); }
.form-card .double-rule { margin-bottom:1.75rem; }
.form-grid { display:grid; gap:1.15rem; grid-template-columns:1fr; }
@media (min-width:560px){ .form-grid .col-2{ grid-template-columns:1fr 1fr; display:grid; gap:1.15rem; } }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field label .req { color:var(--red); }
.field input, .field select, .field textarea {
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--hairline-2); border-radius:var(--radius-sm); padding:.85rem .95rem; width:100%;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.field textarea { resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(47,111,176,.16); }
.field input::placeholder, .field textarea::placeholder { color:#9aa4b0; }
.form-note { font-size:.82rem; color:var(--muted); margin-top:1rem; }
.form-aside .contact-line { display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 0; border-bottom:1px solid var(--hairline); }
.form-aside .contact-line:last-of-type { border-bottom:0; }
.form-aside .contact-line svg { width:1.4rem; height:1.4rem; color:var(--red); flex:none; margin-top:.2rem; }
.form-aside .contact-line strong { display:block; color:var(--ink); font-family:var(--sans); margin-bottom:.1rem; }
.form-aside .contact-line span, .form-aside .contact-line a { color:var(--muted); font-size:.95rem; }

/* Form success / error states */
.form-result { display:none; text-align:center; padding:2rem 1rem; }
.form-result svg { width:3rem; height:3rem; margin-inline:auto; }
.form-result h3 { font-size:var(--fs-h3); margin:1rem 0 .5rem; }
.form-result p { color:var(--muted); }
.form-result.is-visible { display:block; }
form.is-sent { display:none; }
.form-result.ok svg { color:var(--success); }
.form-result.err svg { color:var(--red); }

/* ------------------------------------------------------------------ Footer */
.site-footer { background:var(--navy-deep); color:var(--on-navy-muted); position:relative; }
.site-footer .double-rule { position:absolute; top:0; left:0; right:0; }
.footer-top { display:grid; gap:2.75rem; grid-template-columns:1fr; padding-block:clamp(3rem,5vw,4rem); }
@media (min-width:680px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:1000px){ .footer-top{ grid-template-columns:1.7fr 1fr 1fr 1.1fr; } }
.footer-brand img { height:52px; background:#fff; padding:.55rem .75rem; border-radius:var(--radius); }
.footer-brand p { margin-top:1.15rem; font-size:.92rem; color:var(--on-navy-muted); max-width:36ch; }
.footer-brand .tagline { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red-soft); margin-top:1.15rem; }
.footer-col h3 { color:#fff; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.15rem; font-weight:600; }
.footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a, .footer-col li { color:var(--on-navy-muted); font-size:.93rem; }
.footer-col a:hover { color:#fff; }
.footer-contact li { display:flex; gap:.6rem; align-items:flex-start; }
.footer-contact svg { width:1.05em; height:1.05em; color:var(--red-soft); flex:none; margin-top:.28em; }
.footer-bottom { border-top:1px solid var(--on-navy-line); padding-block:1.6rem; display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--on-navy-muted); }
.footer-bottom .lic { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-family:var(--mono); letter-spacing:.03em; }
.footer-flag { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; }
.footer-flag svg { width:1.05em; height:1.05em; color:var(--red-soft); }

/* ---------------------------------------------------- Sticky mobile callbar */
.callbar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr;
  background:var(--navy-deep); border-top:1px solid var(--on-navy-line-2); box-shadow:0 -8px 24px rgba(10,31,63,.3); }
.callbar a { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:1rem .5rem; color:#fff; font-weight:700; font-size:.98rem; }
.callbar a + a { border-left:1px solid var(--on-navy-line); }
.callbar a.req { background:var(--red); }
.callbar a svg { width:1.15em; height:1.15em; }
@media (max-width:719px){ body{ padding-bottom:62px; } }
@media (min-width:720px){ .callbar{ display:none; } }

/* ---------------------------------------------------------- Page intro band */
.page-intro { position:relative; overflow:hidden; color:var(--on-navy);
  background:radial-gradient(125% 130% at 82% -20%, var(--navy-2) 0%, var(--navy) 46%, var(--navy-deep) 100%); }
/* Fully on-screen (the old -8% offset clipped the flag hard at the viewport edge)
   and clear of the intro's bottom double-rule. */
.page-intro .flag-wm { position:absolute; inset:0; z-index:0; background-image:url("assets/flag.png");
  background-repeat:no-repeat; background-position:right clamp(1rem,4vw,3.5rem) center; background-size:min(52%,520px) auto; opacity:.09; pointer-events:none; }
.page-intro::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:1;
  background:linear-gradient(var(--red),var(--red)) bottom/100% 1px no-repeat,
             linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) top/100% 3px no-repeat; }
.page-intro-inner { position:relative; z-index:1; padding-block:clamp(3rem,6vw,5rem); max-width:66ch; }
.page-intro .eyebrow { color:var(--red-soft); }
.page-intro h1 { color:#fff; font-size:clamp(2.3rem,1.6rem+2.8vw,3.8rem); letter-spacing:-.02em; }
.page-intro p { color:var(--on-navy-2); font-size:var(--fs-lead); margin-top:1.15rem; }
.crumbs { font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--on-navy-muted); margin-bottom:1.25rem; }
.crumbs a { color:var(--on-navy-muted); } .crumbs a:hover{ color:#fff; }

/* -------------------------------------------------------------- Prose */
.prose { max-width:68ch; }
.prose p { color:var(--ink-2); margin-bottom:1.15rem; }
.prose h2 { font-size:var(--fs-h2); margin:2.5rem 0 1rem; }
.prose h3 { font-size:var(--fs-h3); margin:2rem 0 .75rem; }
.prose ul { padding-left:1.25rem; margin:0 0 1.15rem; color:var(--ink-2); }
.prose li { margin-bottom:.55rem; }
.prose strong { color:var(--ink); }

/* -------------------------------------------------------------------- FAQ */
.faq { max-width:840px; }
.faq details { border:1px solid var(--hairline); border-radius:var(--radius); background:var(--paper); margin-bottom:.85rem; overflow:hidden; }
.faq summary { cursor:pointer; padding:1.25rem 1.4rem; font-family:var(--serif); font-weight:700; font-size:1.14rem; color:var(--navy); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--sans); font-size:1.5rem; color:var(--red); flex:none; transition:transform .2s var(--ease); line-height:1; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details > div { padding:0 1.4rem 1.4rem; color:var(--muted); }

/* --------------------------------------------------------- Scroll reveal */
@media (prefers-reduced-motion: no-preference){
  .reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity:1; transform:none; }
}