/* v2 cost-guide pages (self-hosted fonts + v2 design system).
   Self-contained by design: this file is the ONLY stylesheet template-v2-costguide.php
   loads, so the @font-face block and the token/chrome layer are duplicated from
   v2-about.css on purpose. Zero external URLs anywhere in this file. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-300.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/montserrat-400i.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/spectral-300.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spectral-500.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/spectral-300i.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400i.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/spectral-500i.woff2) format('woff2');}

  /* ================= TOKENS ================= */
  :root{
    --navy:#16283c;
    --navy-deep:#0f1d2d;
    --navy-soft:#22374e;
    --teal:#14907f;
    --teal-deep:#0e6f62;
    --gold:#F0B40C;        /* brush amber, micro only */
    --ground:#f4f8f8;      /* cool near-white */
    --ground-2:#e9f0f0;    /* deeper cool band */
    --card:#ffffff;
    --ink:#16283c;
    --ink-soft:#41556a;
    --ink-faint:#6b7d8f;
    --hairline:rgba(22,40,60,.14);
    --hairline-dark:rgba(255,255,255,.14);
    --disp:"Montserrat",sans-serif;
    --body:"Spectral",Georgia,serif;
    --shadow-photo:0 30px 60px -28px rgba(15,29,45,.45);
    --wrap:1320px; /* was 1200: the page was capped well inside a 1440 screen and left ~720px unused at 1920 */
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
  body{
    background:var(--ground); color:var(--ink);
    font-family:var(--body); font-size:17.5px; line-height:1.7;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:var(--teal-deep); }
  ::selection{ background:var(--teal); color:#fff; }

  /* Every published figure on these pages is a number a homeowner compares against
     another number. Tabular figures keep the columns aligned while they do it. */
  .receipt .r-val, .ptable, .tier-band, .cg-anchor .val, .cg-hero .lede{ font-variant-numeric:tabular-nums; }

  /* filmic grain, very quiet */
  body::after{
    content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
    opacity:.035; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,48px); }

  /* type voices */
  .kicker{
    font-family:var(--disp); font-weight:700; font-size:12px;
    letter-spacing:.24em; text-transform:uppercase; color:var(--teal-deep);
    display:flex; align-items:center; gap:14px; margin-bottom:20px;
  }
  .kicker::before{ content:""; width:34px; height:2px; background:var(--gold); flex-shrink:0; }
  h1,h2,h3{ font-family:var(--disp); color:var(--navy); }
  h2{ font-weight:800; font-size:clamp(30px,4.2vw,56px); line-height:1.06; letter-spacing:-0.015em; text-wrap:balance; }
  h3{ font-weight:700; }
  .prose p{ max-width:64ch; color:var(--ink-soft); }
  .prose p + p{ margin-top:1.1em; }
  .prose strong{ font-weight:600; color:var(--navy); }

  /* buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--disp); font-weight:700; font-size:14px;
    letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
    padding:17px 30px; border-radius:3px; border:2px solid transparent;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
    white-space:nowrap; cursor:pointer;
  }
  .btn-teal{ background:var(--teal); color:#fff; box-shadow:0 14px 28px -14px rgba(14,111,98,.6); }
  .btn-teal:hover{ background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(14,111,98,.7); }
  .btn-ghost{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(22,40,60,.12); }
  .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
  .btn-navy{ background:var(--navy); color:#fff; }
  .btn-navy:hover{ background:var(--navy-deep); transform:translateY(-2px); }
  .btn-ghost-navy{ border-color:var(--navy); color:var(--navy); background:transparent; }
  .btn-ghost-navy:hover{ background:var(--navy); color:#fff; }
  .btn-white{ background:#fff; color:var(--navy); }
  .btn-white:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(15,29,45,.5); }

  /* reveals: visible without JS */
  html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  html.js .rv.in{ opacity:1; transform:none; }
  html.js .rv.d1{ transition-delay:.08s; } html.js .rv.d2{ transition-delay:.16s; } html.js .rv.d3{ transition-delay:.24s; }
  @media (prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; transition:none; } }

  /* ================= HEADER ================= */
  .topbar{
    position:sticky; top:0; z-index:60;
    background:rgba(244,248,248,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline);
    transition:box-shadow .25s ease;
  }
  .topbar.scrolled{ box-shadow:0 10px 30px -18px rgba(15,29,45,.35); }
  .topbar .wrap{ display:flex; align-items:center; gap:26px; height:72px; }
  .topbar .logo img{ height:34px; width:auto; }
  .topnav{ display:flex; gap:24px; margin-left:auto; align-items:center; }
  .topnav a.navlink{
    font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.12em;
    text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  }
  .topnav a.navlink:hover{ color:var(--teal-deep); }
  .topnav a.phone{
    font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.04em;
    color:var(--navy); text-decoration:none;
  }
  .topnav .btn{ padding:12px 20px; font-size:12.5px; }
  @media (max-width:1060px){ .topnav a.navlink{ display:none; } }
  @media (max-width:560px){ .topnav a.phone{ display:none; } .topbar .wrap{ height:64px; } .topbar .logo img{ height:28px; } }

  /* ================= HERO =================
     Deliberately shorter than the marketing heroes. Someone who lands here typed a
     price question; the answer paragraph has to be on screen, not below a 96vh photo. */
  .cg-hero{ position:relative; background:var(--navy); overflow:hidden; }
  .cg-hero .bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:56% 46%;
  }
  .cg-hero .scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(to top, rgba(15,29,45,.94) 0%, rgba(15,29,45,.72) 46%, rgba(15,29,45,.5) 100%),
      linear-gradient(98deg, rgba(15,29,45,.9) 0%, rgba(15,29,45,.62) 46%, rgba(15,29,45,.3) 82%);
  }
  .cg-hero .wrap{ position:relative; z-index:2; padding-top:clamp(64px,8vw,104px); padding-bottom:clamp(56px,7vw,92px); }
  .cg-hero .kicker{ color:var(--gold); margin-bottom:16px; }
  .cg-hero .kicker::before{ background:var(--gold); }
  .cg-hero h1{
    color:#fff; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(34px,5.2vw,72px); line-height:1.03; max-width:17ch;
    margin-bottom:22px; text-wrap:balance;
    text-shadow:0 2px 30px rgba(15,29,45,.4);
  }
  .cg-hero .lede{
    font-family:var(--body); font-size:clamp(17.5px,1.55vw,21px); line-height:1.62;
    color:rgba(255,255,255,.94); max-width:62ch; margin-bottom:24px;
  }
  .cg-hero .factline{
    font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.18em;
    text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:26px;
  }
  .cg-hero .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  @media (max-width:700px){ .cg-hero .factline{ text-shadow:0 1px 12px rgba(15,29,45,.65); } }

  /* jump strip: the price table is the reason people are here, so offer the shortcut */
  .cg-jump{ background:var(--navy-deep); border-top:1px solid var(--hairline-dark); }
  .cg-jump .wrap{ display:flex; gap:10px 26px; flex-wrap:wrap; align-items:center; padding-top:16px; padding-bottom:16px; }
  .cg-jump a{
    font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.78); text-decoration:none;
    border-bottom:1px solid transparent; padding-bottom:2px;
  }
  .cg-jump a:hover{ color:#fff; border-bottom-color:var(--gold); }

  /* ================= PULL QUOTE ================= */
  .cg-quote{ background:var(--card); border-bottom:1px solid var(--hairline); padding:clamp(56px,7vw,96px) 0; }
  .cg-quote blockquote{
    font-family:var(--body); font-style:italic; font-weight:500;
    font-size:clamp(23px,3vw,40px); line-height:1.3; letter-spacing:-0.005em;
    color:var(--navy); max-width:24ch; text-wrap:balance;
    border-left:3px solid var(--gold); padding-left:clamp(20px,2.6vw,34px);
  }
  .cg-quote .after{ margin-top:26px; max-width:62ch; color:var(--ink-soft); font-size:18px; }

  /* ================= DRIVERS ("What Moves the Price") ================= */
  .cg-drivers{ background:var(--ground); padding:clamp(70px,9vw,130px) 0; }
  .cg-drivers h2{ max-width:16ch; margin-bottom:clamp(34px,4vw,54px); }
  .driver-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,34px); }
  .driver{
    background:var(--card); border-radius:5px; border-top:3px solid var(--teal);
    padding:clamp(24px,2.6vw,34px);
    box-shadow:0 24px 48px -34px rgba(15,29,45,.4);
  }
  .driver .d-h{ font-family:var(--disp); font-weight:700; font-size:16.5px; color:var(--navy); line-height:1.3; margin-bottom:10px; }
  .driver p{ color:var(--ink-soft); font-size:16.5px; }
  @media (max-width:820px){ .driver-grid{ grid-template-columns:minmax(0,1fr); } }

  /* ================= PRICES: the centrepiece ================= */
  .cg-prices{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(70px,9vw,130px) 0; }
  .cg-prices h2{ max-width:18ch; margin-bottom:22px; }
  .cg-prices .dek{ font-family:var(--body); font-style:italic; font-size:18.5px; color:var(--ink-soft); max-width:62ch; margin-bottom:clamp(30px,3.6vw,46px); }
  .cg-prices .after-note{ margin-top:26px; color:var(--ink-soft); font-size:16.5px; max-width:62ch; }
  .cg-prices .after-note + .after-note{ margin-top:12px; }

  /* --- The responsive price table --------------------------------------------
     ONE table, two layouts, no duplicated markup.
     >760px: a real <table>, columns aligned, tabular figures.
     <=760px: the table parts go display:block and each ROW becomes a card, with the
     column heading printed inside the cell as a small label. Explicit ARIA roles are
     on the elements because display:block strips the native table semantics; the
     roles put them back, so a screen reader still reads a table at any width.
     .ptable-wrap keeps a scroll of last resort for the 760-900px squeeze. */
  .ptable-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ptable{
    width:100%; border-collapse:collapse; background:var(--card);
    border-radius:5px; overflow:hidden;
    box-shadow:0 30px 60px -40px rgba(15,29,45,.5);
  }
  .ptable thead th{
    font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.16em;
    text-transform:uppercase; color:rgba(255,255,255,.85); background:var(--navy);
    text-align:left; padding:16px 22px; vertical-align:bottom;
  }
  .ptable tbody tr + tr{ border-top:1px solid var(--hairline); }
  .ptable tbody th, .ptable tbody td{ padding:20px 22px; vertical-align:top; text-align:left; }
  .ptable tbody th{
    font-family:var(--disp); font-weight:700; font-size:16px; color:var(--navy);
    line-height:1.35; max-width:30ch;
  }
  .ptable .price{
    font-family:var(--disp); font-weight:800; font-size:clamp(21px,2.1vw,27px);
    color:var(--teal-deep); line-height:1.1; white-space:nowrap; display:block;
  }
  .ptable .count{ font-family:var(--disp); font-weight:600; font-size:15px; color:var(--ink-soft); white-space:nowrap; display:block; }
  /* Composition, not a menu. The per-item figures run on as one phrase under the room
     price, so they read as what the number is made of rather than a shopping list. */
  .ptable .inside{
    display:block; font-family:var(--body); font-size:15.5px; line-height:1.6;
    color:var(--ink-soft); max-width:42ch;
  }
  .ptable .cell-h{ display:none; }
  .ptable tbody tr:nth-child(even){ background:rgba(22,40,60,.025); }

  @media (max-width:760px){
    .ptable-wrap{ overflow-x:visible; }
    .ptable{ display:block; background:transparent; box-shadow:none; border-radius:0; }
    /* The column headings stay in the accessibility tree (each stacked cell prints its
       own visible label, and those are aria-hidden so nothing is read twice). They must
       also stop being 1px boxes with wide table-cell children: overflow does NOT apply
       to display:table-header-group, so without the display:block below the hidden
       header row lays out ~560px wide behind the page. */
    .ptable thead, .ptable thead tr, .ptable thead th{
      display:block; width:1px; height:1px; overflow:hidden;
      padding:0; margin:0; white-space:normal; background:transparent;
    }
    .ptable thead{ position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); }
    .ptable tbody{ display:block; }
    .ptable tbody tr{
      display:block; background:var(--card); border:none; border-top:3px solid var(--teal);
      border-radius:5px; padding:20px 20px 22px; margin-bottom:14px;
      box-shadow:0 22px 44px -34px rgba(15,29,45,.45);
    }
    .ptable tbody tr:nth-child(even){ background:var(--card); }
    .ptable tbody th, .ptable tbody td{ display:block; padding:0; }
    .ptable tbody th{ font-size:17px; max-width:none; margin-bottom:14px; }
    .ptable tbody td{ margin-top:16px; }
    .ptable .cell-h{
      display:block; font-family:var(--disp); font-weight:700; font-size:10.5px;
      letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
      margin-bottom:5px;
    }
    .ptable .price{ font-size:29px; white-space:normal; }
    .ptable .count{ font-size:16px; }
    .ptable .inside{ max-width:none; font-size:16px; }
  }

  /* per-page footnote under a table */
  .cg-prices .tnote{
    font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.06em;
    color:var(--ink-soft); margin-top:20px;
  }

  /* ================= TIER BAND (whole-house ranges) ================= */
  .tier-band{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:clamp(28px,3.4vw,44px); }
  .tier{
    background:var(--navy); color:#fff; border-radius:5px; border-top:3px solid var(--gold);
    padding:clamp(22px,2.4vw,32px); min-width:0;
  }
  .tier .t-size{
    font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.16em;
    text-transform:uppercase; color:rgba(255,255,255,.66); margin-bottom:12px;
  }
  .tier .t-val{ font-family:var(--disp); font-weight:800; font-size:clamp(24px,2.5vw,34px); color:#fff; line-height:1.1; }
  @media (max-width:820px){ .tier-band{ grid-template-columns:minmax(0,1fr); } }

  /* ================= ADDERS LIST (exterior variables) ================= */
  .cg-adders{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(70px,9vw,130px) 0; }
  .cg-adders h2{ max-width:16ch; margin-bottom:22px; }
  .cg-adders .dek{ font-family:var(--body); font-style:italic; font-size:18.5px; color:var(--ink-soft); max-width:56ch; margin-bottom:clamp(26px,3vw,38px); }
  .adder-list{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,3vw,52px); }
  .adder-list li{
    display:flex; gap:14px; align-items:flex-start;
    padding:16px 0; border-bottom:1px solid var(--hairline);
    color:var(--ink-soft); font-size:16.5px; line-height:1.55; min-width:0;
  }
  .adder-list li::before{ content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--gold); margin-top:9px; }
  @media (max-width:820px){ .adder-list{ grid-template-columns:minmax(0,1fr); } }

  /* ================= CALLOUT (a fact that needs its own frame) ================= */
  .cg-callout{
    background:var(--navy); color:#fff; border-radius:5px; border-left:3px solid var(--gold);
    padding:clamp(26px,3vw,40px); margin-top:clamp(34px,4vw,52px);
  }
  .cg-callout h3{ color:#fff; font-weight:800; font-size:clamp(20px,2.1vw,27px); line-height:1.2; margin-bottom:14px; }
  .cg-callout p{ color:rgba(255,255,255,.84); font-size:17px; max-width:70ch; }
  .cg-callout p + p{ margin-top:1em; }
  .cg-callout strong{ color:#fff; font-weight:600; }

  /* light variant, used where a callout sits on a dark-ish band already */
  .cg-callout.light{ background:var(--card); border-left-color:var(--teal); color:var(--ink); }
  .cg-callout.light h3{ color:var(--navy); }
  .cg-callout.light p{ color:var(--ink-soft); }
  .cg-callout.light strong{ color:var(--navy); }

  /* ================= ANCHORS (deck: the two real numbers) ================= */
  .cg-anchor{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:clamp(28px,3.4vw,44px); }
  .cg-anchor .a-card{
    background:var(--card); border-radius:5px; border-top:3px solid var(--teal);
    padding:clamp(24px,2.6vw,36px); min-width:0;
    box-shadow:0 26px 52px -38px rgba(15,29,45,.45);
  }
  .cg-anchor .lbl{
    font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;
  }
  .cg-anchor .val{ font-family:var(--disp); font-weight:800; font-size:clamp(32px,3.6vw,50px); color:var(--teal-deep); line-height:1; margin-bottom:12px; }
  .cg-anchor p{ color:var(--ink-soft); font-size:16.5px; }
  @media (max-width:700px){ .cg-anchor{ grid-template-columns:minmax(0,1fr); } }

  /* ================= GENERIC PROSE SECTION ================= */
  .cg-section{ background:var(--ground); border-top:1px solid var(--hairline); padding:clamp(70px,9vw,130px) 0; }
  .cg-section.alt{ background:var(--card); }
  .cg-section h2{ max-width:18ch; margin-bottom:26px; }
  .cg-section .prose p{ font-size:18px; }
  .cg-section .say-so{
    font-family:var(--body); font-style:italic; font-size:clamp(19px,2vw,25px); line-height:1.45;
    color:var(--navy); border-left:3px solid var(--gold); padding-left:clamp(18px,2.2vw,28px);
    max-width:46ch; margin-top:clamp(30px,3.4vw,44px);
  }
  .cg-two{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(30px,4vw,70px); align-items:start; }
  @media (max-width:880px){ .cg-two{ grid-template-columns:minmax(0,1fr); } }

  /* ================= FAQ (markup + styling mirror parts/v2-city-body.php:
     includes/schema.php parses <details class="qa"> / <summary> / <div class="ans">
     to emit FAQPage, so this structure is load-bearing, not decorative) ========= */
  .faq{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(80px,10vw,140px) 0; }
  .faq-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,80px); align-items:start; }
  .faq-grid .sticky{ position:sticky; top:112px; }
  .faq-grid h2{ max-width:12ch; }
  .faq-grid .dek{ margin-top:18px; font-style:italic; font-size:18px; color:var(--ink-soft); max-width:38ch; }
  .qa{ border-bottom:1px solid var(--hairline); }
  .qa:first-of-type{ border-top:1px solid var(--hairline); }
  .qa summary{
    list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:18px;
    padding:24px 0; font-family:var(--disp); font-weight:700;
    font-size:clamp(16.5px,1.7vw,19.5px); color:var(--navy); line-height:1.35;
  }
  .qa summary::-webkit-details-marker{ display:none; }
  .qa summary .tog{
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    border:2px solid var(--teal); color:var(--teal-deep);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; transform:translateY(4px);
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .qa[open] summary .tog{ background:var(--teal); color:#fff; transform:translateY(4px) rotate(45deg); }
  .qa .ans{ padding:0 0 26px 44px; }
  .qa .ans p{ font-size:17px; color:var(--ink-soft); max-width:62ch; }
  .qa .ans p + p{ margin-top:.9em; }
  @media (max-width:880px){ .faq-grid{ grid-template-columns:1fr; } .faq-grid .sticky{ position:static; } }
  @media (max-width:560px){ .qa .ans{ padding-left:0; } }

  /* ================= ESTIMATE ================= */
/* overflow:clip, not hidden. Both clip the ::before glow, but `hidden` makes this
     a scroll container, which silently kills position:sticky on the copy column
     inside it. `clip` does not. The `hidden` line stays first as the fallback for
     browsers without clip: there the copy simply scrolls instead of sticking. */
  .estimate{ background:var(--navy); color:#fff; padding:clamp(90px,11vw,160px) 0 clamp(80px,10vw,130px); position:relative; overflow:hidden; overflow:clip; }
  .estimate::before{
    content:""; position:absolute; left:-10%; bottom:-30%; width:55%; height:80%;
    background:radial-gradient(ellipse at center, rgba(20,144,127,.14), transparent 65%);
    pointer-events:none;
  }
  /* Single column: the booking embed is responsive and tall, so pairing it beside a
     short receipts column stretched the section with ~575px of dead space. Promise and
     receipts read across the top, calendar gets the full width underneath. */
  /* Two columns again. It went single-column when the booking embed was full width
     and left a wide empty band; now that .est-book is capped at the 640px the Field
     Stash slot grid actually needs, the copy sits beside it instead of above it. */
  .est-grid{
    display:grid; grid-template-columns:minmax(0,1fr) 640px;
    gap:clamp(32px,4vw,64px); align-items:start; position:relative; z-index:2;
  }
  @media (max-width:1080px){ .est-grid{ grid-template-columns:minmax(0,1fr); } }
  .estimate .kicker{ color:var(--gold); }
  .estimate h2{ color:#fff; margin-bottom:20px; max-width:22ch; }
  /* 12ch was sized for a narrow left column beside the form. The section is a
     single full-width column now, so that setting broke the heading over three
     lines against 1,100px of empty navy. */
  .estimate .dek{ font-family:var(--body); font-style:italic; font-size:19px; color:rgba(255,255,255,.85); max-width:52ch; margin-bottom:36px; }
  .receipts{ display:grid; grid-template-columns:repeat(3,auto); gap:clamp(22px,3vw,44px); justify-content:start; margin-bottom:40px; }
  .receipt .r-val{ font-family:var(--disp); font-weight:800; font-size:clamp(26px,2.8vw,38px); color:#fff; line-height:1; }
  .receipt .r-lbl{ font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:8px; }
  .receipt{ border-left:2px solid var(--gold); padding-left:16px; }
  .nap{
    font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.08em;
    color:rgba(255,255,255,.72);
  }
  .est-form{
    background:#fff; border-radius:6px; padding:clamp(26px,3vw,40px);
    box-shadow:0 50px 100px -40px rgba(0,0,0,.6);
  }
  .est-form h3{ font-weight:800; font-size:22px; margin-bottom:6px; }
  .est-form .form-sub{ font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-soft); margin-bottom:22px; }
  .est-form .alt-line{
    text-align:center; margin-top:16px; font-family:var(--body); font-size:15px; color:var(--ink-soft);
  }
  .est-form .alt-line a{ color:var(--teal-deep); font-weight:600; }
  @media (max-width:560px){
    /* minmax(0,1fr) + min-width:0, or the "Deposit, $1,000 max" label blows the
       column past .wrap and gets clipped by overflow-x:hidden at 390. */
    .receipts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
    .receipt{ min-width:0; }
  }

  /* ================= CROSS-LINKS ================= */
  .cg-links{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(70px,9vw,120px) 0; }
  .cg-links h2{ max-width:18ch; margin-bottom:14px; }
  .cg-links .dek{ font-family:var(--body); font-style:italic; font-size:18px; color:var(--ink-soft); max-width:56ch; margin-bottom:clamp(28px,3.2vw,42px); }
  .link-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
  .link-card{
    display:block; text-decoration:none; background:var(--card); border-radius:5px;
    border-top:3px solid var(--teal); padding:clamp(22px,2.4vw,30px); min-width:0;
    box-shadow:0 24px 48px -36px rgba(15,29,45,.4);
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .link-card:hover{ transform:translateY(-3px); box-shadow:0 30px 56px -32px rgba(15,29,45,.5); }
  .link-card .lc-h{ font-family:var(--disp); font-weight:800; font-size:18px; color:var(--navy); line-height:1.25; margin-bottom:10px; }
  .link-card .lc-b{ color:var(--ink-soft); font-size:16px; }
  .link-card .lc-go{
    display:inline-block; margin-top:14px; font-family:var(--disp); font-weight:700;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep);
  }
  .cg-links .also{ margin-top:clamp(26px,3vw,38px); color:var(--ink-soft); font-size:16.5px; }
  .cg-links .also a{ font-weight:600; }
  @media (max-width:880px){ .link-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:620px){ .link-grid{ grid-template-columns:minmax(0,1fr); } }

  /* ================= HUB ================= */
  .hub-guides{ background:var(--ground); padding:clamp(70px,9vw,130px) 0; }
  .hub-guides h2{ max-width:20ch; margin-bottom:18px; }
  .hub-guides .dek{ font-family:var(--body); font-style:italic; font-size:18.5px; color:var(--ink-soft); max-width:60ch; margin-bottom:clamp(32px,3.8vw,50px); }
  .hub-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px); }
  .hub-card{
    display:block; text-decoration:none; background:var(--card); border-radius:5px;
    border-top:3px solid var(--gold); padding:clamp(26px,3vw,38px); min-width:0;
    box-shadow:0 30px 58px -40px rgba(15,29,45,.45);
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .hub-card:hover{ transform:translateY(-3px); box-shadow:0 36px 66px -36px rgba(15,29,45,.55); }
  .hub-card .hc-h{ font-family:var(--disp); font-weight:800; font-size:clamp(20px,2.1vw,26px); color:var(--navy); line-height:1.2; margin-bottom:12px; }
  .hub-card .hc-range{
    font-family:var(--disp); font-weight:800; font-size:clamp(20px,2vw,25px); color:var(--teal-deep);
    line-height:1.2; margin-bottom:12px; font-variant-numeric:tabular-nums;
  }
  .hub-card .hc-b{ color:var(--ink-soft); font-size:16.5px; }
  .hub-card .hc-go{
    display:inline-block; margin-top:16px; font-family:var(--disp); font-weight:700;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep);
  }
  @media (max-width:700px){ .hub-grid{ grid-template-columns:minmax(0,1fr); } }

  /* ================= FOOTER ================= */
  footer{ background:var(--navy-deep); color:rgba(255,255,255,.65); padding:38px 0 46px; }
  footer .wrap{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
  footer img{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.85; }
  footer p{ font-family:var(--disp); font-weight:500; font-size:12.5px; letter-spacing:.06em; }
  footer .foot-right{ margin-left:auto; display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
  footer a{ color:rgba(255,255,255,.75); text-decoration:none; font-family:var(--disp); font-size:12.5px; font-weight:600; letter-spacing:.08em; }
  footer a:hover{ color:#fff; }

  /* ================= MOBILE STICKY BAR ================= */
  .stickybar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:none; grid-auto-flow:column; grid-auto-columns:1fr; /* auto, not 1fr 1fr: /careers/ hides the call link and the lone CTA must fill the bar */
    box-shadow:0 -10px 30px -12px rgba(15,29,45,.4);
  }
  .stickybar a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--disp); font-weight:700; font-size:13.5px; letter-spacing:.08em;
    text-transform:uppercase; text-decoration:none; padding:17px 10px;
  }
  .stickybar .call{ background:var(--navy); color:#fff; }
  .stickybar .book{ background:var(--teal); color:#fff; }
  @media (max-width:820px){
    .stickybar{ display:grid; }
    body{ padding-bottom:56px; }
  }

/* Anchor targets sit under a 73px sticky header. Without this, clicking
   "Book Your Estimate Online" lands past the section heading and the visitor
   arrives at a bare form with no idea what they are looking at. */
section[id], [id="estimate"], [id="crew"]{ scroll-margin-top: 118px; }

/* ---- booking card ----------------------------------------------------------
   The Field Stash embed renders its own white card, its own border radius and
   its own footer, so the wrapper must add no chrome of its own: a second white
   box around it read as a border. The iframe fills its container and Field
   Stash centres the form at about 540px inside it, so a full-width container
   just stretches their cream page background into a wide empty field. Cap the
   container near the form's real width and that band becomes a normal margin. */
.est-book{
  background:transparent; box-shadow:none; padding:0; border-radius:0;
  max-width:640px; width:100%;
}
@media (max-width:680px){ .est-book{ max-width:none; } }

/* Receipts stack while the estimate section is two columns: the copy column is about
   406px there, which is too narrow for three of them side by side. Below 1080 the
   section is single column again and they go back to a row. */
@media (min-width:1081px){
  .est-grid .receipts{ grid-template-columns:minmax(0,1fr); gap:16px; justify-content:stretch; }
  /* Fixed first track so the three labels start on the same line, whatever the
     value above them is ("10%" and "Fixed" are very different widths). */
  /* 130px, not a ch/em value: those resolve against .receipt's inherited body size,
     not the 38px display size of .r-val, so the value overlapped its own label. */
  .est-grid .receipt{ display:grid; grid-template-columns:130px minmax(0,1fr); align-items:baseline; gap:14px; }
  .est-grid .receipt .r-lbl{ margin-top:0; }
  .est-grid .nap{ text-wrap:balance; }
  .est-grid .nap a{ white-space:nowrap; }
}

/* The copy column sticks while the booking form scrolls past it, the same way the
   proof and FAQ sections behave. It keeps the deposit cap, the fixed price and the
   no-subcontractors line in view for the whole time someone is filling the form in.
   Only while the section is two columns. */
@media (min-width:1081px){
  .est-grid > div:first-child{ position:sticky; top:112px; align-self:start; }
}

/* ---- two-tier header -------------------------------------------------------
   Row 1 is site navigation and is identical on every page. Row 2 is the page's
   own section anchors, deliberately smaller and quieter so it reads as a jump
   list rather than as competing navigation. */
.topbar .topbar-main{ display:flex; align-items:center; gap:26px; height:64px; }
/* .topbar .wrap sets height:72px and outranks a bare .subbar, so this needs the same
   specificity or the "tiny" second row silently renders taller than the primary one. */
.topbar .subbar{ height:30px; }
.topnav a.navlink.is-here{ color:var(--teal-deep); }
.subbar{ display:flex; align-items:center; border-top:1px solid var(--hairline); }
.subnav{ display:flex; align-items:center; gap:20px; margin-left:auto; overflow-x:auto;
         scrollbar-width:none; -ms-overflow-style:none; }
.subnav::-webkit-scrollbar{ display:none; }
.subnav-lede{
  font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); flex-shrink:0; margin-right:2px;
}
.subnav a{
  font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-faint);
  white-space:nowrap; flex-shrink:0;
}
.subnav a:hover{ color:var(--teal-deep); }
@media (max-width:900px){
  .topbar .topbar-main{ gap:16px; }
  .topnav{ gap:16px; }
  .topnav a.navlink{ font-size:11px; letter-spacing:.08em; }
}
@media (max-width:760px){
  /* The five site links no longer fit beside the logo and the CTA, so the whole second
     row becomes the site nav on phones and the page anchors drop. Navigation beats
     shortcuts, and mobile is 58% of clicks, so it must not be the tier that disappears. */
  .topbar .topbar-main .topnav a.navlink{ display:none; }
  .subbar{ height:auto; padding:8px 0 9px; }
  .subnav{ margin-left:0; gap:16px; }
  .subnav-lede{ display:none; }
  .subnav .jump{ display:none; }
  .subnav .sitelink{ display:inline; color:var(--ink-soft); font-size:11.5px; font-weight:700; }
}
/* Above 760 the site links live in row 1, so the row-2 copies stay out of the way. */
@media (min-width:761px){ .subnav .sitelink{ display:none; } }

/* ---- flyouts ---------------------------------------------------------------
   Hover AND :focus-within, so a keyboard reaches them with no JavaScript. Touch has
   no hover, so tapping the parent navigates to a page listing the same children. */
.topnav .hasmenu{ position:relative; display:inline-flex; align-items:center; }
.topnav .caret{
  display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.55;
}
.topnav .flyout{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:230px; padding:8px; display:flex; flex-direction:column; gap:1px;
  background:#fff; border:1px solid var(--hairline); border-radius:4px;
  box-shadow:0 26px 50px -24px rgba(15,29,45,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:70;
}
.topnav .hasmenu:hover .flyout,
.topnav .hasmenu:focus-within .flyout{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
/* a hover bridge, so the pointer can travel from the label to the panel */
.topnav .hasmenu::after{ content:""; position:absolute; top:100%; left:0; right:0; height:10px; }
.topnav .flyout a{
  font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.02em;
  text-transform:none; color:var(--ink-soft); text-decoration:none;
  padding:9px 12px; border-radius:3px; white-space:nowrap;
}
.topnav .flyout a:hover, .topnav .flyout a:focus{ background:var(--ground-2); color:var(--teal-deep); }
@media (max-width:760px){ .topnav .flyout, .topnav .caret{ display:none; } }

/* ---- row 2 sits LEFT ---------------------------------------------------------
   Right-aligned it sat directly under the Book button, putting small grey text in the
   most valuable corner of the page and competing with the one thing that matters. */
.subnav{ margin-left:0; margin-right:auto; }

/* link out to the self-quote tool, under the estimate dek */
.estimate .dek-alt{
  margin-top:14px; font-family:var(--body); font-size:16px; line-height:1.6;
  color:rgba(255,255,255,.78);
}
.estimate .dek-alt a{ color:#8fd3c8; font-weight:600; }
.estimate .dek-alt a:hover{ color:#fff; }