/* v2 about page styles (self-hosted fonts + v2 design, from approved about mockup) */
@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; }

  /* tabular numerals on figures */
  .cred-row .val, .stat .n, .stat .num, .statrow .stat .num,
  .receipt .r-val, .pricing .scene .figures{ 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(34px,4.6vw,62px); line-height:1.04; letter-spacing:-0.015em; text-wrap:balance; }
  .scene{
    font-family:var(--body); font-style:italic; font-weight:500;
    font-size:clamp(25px,3.3vw,44px); line-height:1.32; letter-spacing:-0.005em;
    color:var(--navy); text-wrap:balance;
  }
  .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 ================= */
  .hero{ position:relative; min-height:min(96vh,980px); display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); }
  .hero .bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:56% 44%;
    transform:scale(1.06); animation:heroSettle 2.8s cubic-bezier(.2,.6,.2,1) forwards;
  }
  @keyframes heroSettle{ to{ transform:scale(1.0); } }
  @media (prefers-reduced-motion:reduce){ .hero .bg{ animation:none; transform:none; } }
  .hero .scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(to top, rgba(15,29,45,.92) 0%, rgba(15,29,45,.42) 34%, rgba(15,29,45,.08) 60%),
      linear-gradient(98deg, rgba(15,29,45,.86) 0%, rgba(15,29,45,.5) 36%, rgba(15,29,45,.12) 62%, rgba(15,29,45,0) 80%);
  }
  @media (max-width:700px){
    .hero .scrim{
      background:
        linear-gradient(to top, rgba(15,29,45,.95) 0%, rgba(15,29,45,.62) 40%, rgba(15,29,45,.42) 72%, rgba(15,29,45,.58) 100%);
    }
    .hero .kicker, .hero .factline{ text-shadow:0 1px 12px rgba(15,29,45,.65); }
  }
  .hero .wrap{ position:relative; z-index:2; width:100%; padding-top:150px; padding-bottom:clamp(120px,14vh,180px); }
  .hero .kicker{ color:var(--gold); margin-bottom:14px; }
  .hero .kicker::before{ background:var(--gold); }
  .hero .factline{
    font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.18em;
    text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:26px;
  }
  .hero h1{
    color:#fff; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(44px,7vw,98px); line-height:.99; max-width:13ch;
    margin-bottom:26px; text-wrap:balance;
    text-shadow:0 2px 30px rgba(15,29,45,.4);
  }
  .hero .lede{
    font-family:var(--body); font-size:clamp(18px,1.7vw,22px); line-height:1.6;
    color:rgba(255,255,255,.94); max-width:56ch; margin-bottom:16px;
  }
  .hero .hero-tag{ margin-top:0; }
  .hero .factline{ margin-bottom:26px; }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

  /* ================= CREDENTIALS: the verdict card ================= */
  .cred{ position:relative; z-index:5; }
  .cred-card{
    max-width:var(--wrap); margin:clamp(-96px,-9vw,-70px) auto 0;
    background:var(--navy); color:#fff; border-radius:4px;
    box-shadow:0 40px 80px -34px rgba(15,29,45,.6);
    border-top:3px solid var(--gold);
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(28px,4vw,64px);
    padding:clamp(30px,4vw,54px) clamp(24px,4vw,56px) clamp(30px,4vw,48px);
  }
  @media (max-width:1240px){ .cred-card{ margin-left:clamp(20px,4vw,48px); margin-right:clamp(20px,4vw,48px); } }
  .cred-intro .lead-in{
    font-family:var(--body); font-style:italic; font-size:16.5px; line-height:1.65;
    color:rgba(255,255,255,.72); margin-bottom:14px;
  }
  .cred-intro h2{
    color:#fff; font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.12;
    letter-spacing:-0.01em; margin-bottom:18px;
  }
  .cred-note{
    font-family:var(--body); font-style:italic; font-size:15.5px; line-height:1.6;
    color:var(--gold); border-left:2px solid var(--gold); padding-left:16px;
    margin-top:20px;
  }
  .cred-rows{ align-self:center; }
  .cred-row{
    display:flex; align-items:baseline; gap:14px;
    padding:11px 0; border-bottom:1px solid var(--hairline-dark);
  }
  .cred-row:last-child{ border-bottom:none; }
  .cred-row .lbl{
    font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap;
  }
  .cred-row .dots{ flex:1; border-bottom:1px dotted rgba(255,255,255,.28); transform:translateY(-4px); }
  .cred-row .val{
    font-family:var(--disp); font-weight:700; font-size:15.5px; color:#fff;
    letter-spacing:.02em; white-space:nowrap;
  }
  .cred-row .val .star{ color:var(--gold); margin-right:4px; }
  @media (max-width:880px){
    .cred-card{ grid-template-columns:1fr; }
    .cred-row .lbl{ white-space:normal; }
  }

  /* ================= PROOF CORE ================= */
  .proof{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,160px) 0 0; }
  .proof.has-pad{ padding-bottom:clamp(70px,9vw,120px); }
  .proof-grid{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(36px,5vw,88px); align-items:start;
    margin-bottom:clamp(60px,7vw,100px);
  }
  .proof-grid.balance{ align-items:center; }
  .proof-grid .sticky{ position:sticky; top:112px; }
  .proof-grid h2{ margin-bottom:22px; }
  .proof-grid .dek{ font-size:19px; color:var(--ink-soft); max-width:44ch; font-style:italic; }
  .proof-prose p{ font-size:18.5px; }
  @media (max-width:880px){ .proof-grid{ grid-template-columns:1fr; } .proof-grid .sticky{ position:static; } }

  /* full bleed photo moments */
  .bleed{ position:relative; overflow:hidden; }
  .bleed img{ width:100%; height:clamp(380px,62vh,720px); object-fit:cover; }
  html.js .bleed img{ transform:scale(1.05); transition:transform 1.6s cubic-bezier(.2,.6,.2,1); }
  html.js .bleed.in img{ transform:scale(1); }
  .bleed .cap{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(to top, rgba(15,29,45,.78), rgba(15,29,45,0));
    padding:70px clamp(20px,4vw,48px) 22px;
  }
  .bleed .cap p{
    max-width:var(--wrap); margin:0 auto;
    font-family:var(--body); font-style:italic; font-size:15.5px; color:rgba(255,255,255,.92);
  }

  /* ================= AWARDS NAVY BAND ================= */
  .pullband{ background:var(--navy); color:#dfe7ee; padding:clamp(60px,8vw,100px) 0; position:relative; overflow:hidden; }
  .pullband::before{ content:""; position:absolute; inset:0; background:radial-gradient(1000px 500px at 85% 110%, rgba(20,144,127,.16), transparent 65%); pointer-events:none; }
  .pullband .wrap{ position:relative; }
  .pullband .bigpull{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(34px,5.6vw,72px); line-height:1.0; letter-spacing:-.01em; color:#fff; max-width:16ch; text-wrap:balance; }
  .pullband .bigpull .g{ color:var(--teal); }
  .pullband .after{ margin-top:26px; font-size:clamp(17.5px,1.8vw,20px); line-height:1.65; color:#d8e2ec; max-width:62ch; }
  .statrow{ margin-top:clamp(40px,5vw,60px); padding-top:clamp(28px,3vw,40px); border-top:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px); }
  .statrow .stat .num{ font-family:var(--disp); font-weight:900; font-size:clamp(44px,5.4vw,76px); line-height:1; color:#fff; letter-spacing:-.01em; }
  .statrow .stat .num .u{ color:var(--teal); }
  .statrow .stat .lbl{ margin-top:8px; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8fa1b3; }
  .statrow .stat .lbl .stars{ color:var(--gold); font-size:13px; letter-spacing:.08em; margin-right:6px; }
  .sealrow{ margin-top:clamp(34px,4vw,48px); display:flex; align-items:center; gap:clamp(20px,3vw,36px); flex-wrap:wrap; }
  .sealrow img{ height:clamp(96px,10vw,132px); width:auto; filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
  .sealrow p{ font-family:var(--body); font-style:italic; font-size:15.5px; color:#d8e2ec; max-width:44ch; line-height:1.6; }
  @media (max-width:700px){ .statrow{ grid-template-columns:minmax(0,1fr); gap:22px; } }

  /* ================= CARE (dark) ================= */
  .care{ background:var(--navy-deep); color:#dfe7ee; padding:clamp(70px,9vw,120px) 0; position:relative; overflow:hidden; }
  .care::before{ content:""; position:absolute; inset:0; background:radial-gradient(1100px 560px at 10% 0%, rgba(20,144,127,.14), transparent 60%); pointer-events:none; }
  .care .wrap{ position:relative; }
  .care .kicker{ color:var(--teal); }
  .care h2{ color:#fff; margin-bottom:26px; }
  .care .scene{ color:#e8eef4; margin-bottom:24px; }
  .care .prose{ color:#d8e2ec; font-size:18px; } .care .prose p{ color:#d8e2ec; }
  .care .prose strong{ color:#fff; }
  .care-pull{ margin:30px 0 0; padding:6px 0 6px 24px; border-left:3px solid var(--gold); font-family:var(--body); font-style:italic; font-weight:500; font-size:clamp(19px,2vw,23px); line-height:1.55; color:#fff; max-width:34em; }
  .care-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); align-items:start; }
  .care-media{ display:flex; flex-direction:column; gap:22px; }
  .care-media figure img{ width:100%; aspect-ratio:16/11.5; object-fit:cover; box-shadow:0 34px 60px -30px rgba(0,0,0,.6); }
  .care-media figcaption{ margin-top:10px; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.06em; color:#8fa1b3; line-height:1.6; }
  .care-ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
  @media (max-width:900px){ .care-grid{ grid-template-columns:minmax(0,1fr); } }

  /* ================= VALUES (light band, candor voice) ================= */
  .values{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,150px) 0; }
  .values h2{ max-width:18ch; margin-bottom:clamp(28px,4vw,40px); }
  .values .say-so{
    font-family:var(--body); font-style:italic; font-size:clamp(19px,2vw,23px);
    line-height:1.55; color:var(--navy);
    border-left:3px solid var(--gold); padding-left:22px; margin-bottom:30px; max-width:52ch;
  }
  .values .prose p{ font-size:18.5px; }

  /* ================= STORY (second-generation, with placeholder slots) ================= */
  .story{ padding:clamp(90px,11vw,150px) 0 clamp(80px,10vw,130px); }
  .story-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px,5vw,80px); align-items:start; }
  .story-copy > .prose:first-of-type{ margin-top:16px; }
  .story-copy .prose p{ font-size:18.5px; }
  .story-copy .prose + .ph-note, .story-copy .ph-note + .prose{ margin-top:1.4em; }
  @media (max-width:880px){ .story-grid{ grid-template-columns:1fr; } }

  /* labeled editorial placeholder block (awaiting Michael's own words) */
  .ph-note{
    border:1.5px dashed rgba(22,40,60,.34); border-left:3px solid var(--gold);
    border-radius:4px; background:rgba(240,180,12,.06);
    padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,28px);
  }
  .ph-tag{
    font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:#8a6800; margin-bottom:12px;
    display:flex; align-items:center; gap:10px;
  }
  .ph-tag::before{ content:""; width:22px; height:2px; background:var(--gold); flex-shrink:0; }
  .ph-body{ font-family:var(--body); font-style:italic; font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:60ch; }

  /* Michael's story, first person (replaces the placeholder note) */
  .ownwords{ border-left:3px solid var(--gold); padding:6px 0 6px clamp(20px,2.4vw,28px); }
  .story-copy .ownwords{ margin-top:26px; }
  .ow-tag{
    font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:#8a6800; margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
  }
  .ow-tag::before{ content:""; width:22px; height:2px; background:var(--gold); flex-shrink:0; }
  .ownwords .prose p + p{ margin-top:1.15em; }

  /* right rail: founder + family, stacked */
  .story-rail{ display:grid; gap:34px; }

  /* labeled photo placeholder frame (founder, crew) */
  .ph-photo{ }
  .ph-photo .frame{
    position:relative; border:2px dashed rgba(22,40,60,.28); border-radius:4px;
    background:repeating-linear-gradient(135deg, rgba(22,40,60,.03) 0 12px, rgba(22,40,60,.06) 12px 24px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; text-align:center; padding:28px 20px;
  }
  .ph-photo.portrait .frame{ aspect-ratio:4/5; }
  .ph-photo.wide .frame{ aspect-ratio:16/11.5; }
  .ph-photo .frame svg{ opacity:.5; }
  .ph-photo .pt{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
  .ph-photo .ps{ font-family:var(--body); font-style:italic; font-size:14px; color:var(--ink-faint); }
  .ph-photo figcaption{ margin-top:12px; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint); }
  /* dark variant, on navy grounds */
  .ph-photo.dark .frame{
    border-color:rgba(255,255,255,.24);
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,.06) 12px 24px);
  }
  .ph-photo.dark .frame svg{ opacity:.6; }
  .ph-photo.dark .pt{ color:#dfe7ee; }
  .ph-photo.dark .ps{ color:#8fa1b3; }
  .ph-photo.dark figcaption{ color:#8fa1b3; }
  .ph-photo .frame:has(img){ border:none; background:none; padding:0; overflow:hidden; }
  .ph-photo .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* ================= REVIEWS ================= */
  .reviews{ padding:clamp(90px,11vw,160px) 0 clamp(80px,10vw,140px); }
  .reviews-head{ text-align:center; max-width:760px; margin:0 auto clamp(48px,6vw,72px); }
  .reviews-head .stars{
    font-size:26px; letter-spacing:8px; color:var(--gold); margin-bottom:18px;
  }
  .reviews-head .kicker{ justify-content:center; }
  .reviews-head .kicker::after{ content:""; width:34px; height:2px; background:var(--gold); flex-shrink:0; }
  .review-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); align-items:start; }
  .trophy{
    background:#fff; border:1px solid var(--hairline); border-radius:4px;
    padding:18px 18px 14px; position:relative;
    box-shadow:0 40px 74px -32px rgba(15,29,45,.5);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .trophy::after{
    content:""; position:absolute; left:18px; right:18px; bottom:8px; height:2px;
    background:var(--gold); opacity:.55; border-radius:1px;
  }
  .trophy img{ width:100%; height:auto; border-radius:2px; }
  .trophy:nth-child(1){ transform:rotate(-1.8deg) translateY(14px); }
  .trophy:nth-child(2){ transform:rotate(1.1deg) translateY(-10px); }
  .trophy:nth-child(3){ transform:rotate(-1.2deg) translateY(20px); }
  .trophy:hover{ transform:rotate(0deg) translateY(-2px) scale(1.02); box-shadow:0 48px 86px -34px rgba(15,29,45,.6); }
  .reviews-foot{ text-align:center; margin-top:clamp(48px,6vw,70px); }
  .reviews-foot .foot-line{
    font-family:var(--body); font-style:italic; font-size:19px; color:var(--navy); margin-bottom:16px;
  }
  .reviews-foot a{
    font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--teal-deep); text-decoration:none;
    border-bottom:2px solid var(--teal); padding-bottom:3px;
  }
  .reviews-foot a:hover{ color:var(--navy); border-color:var(--gold); }
  @media (max-width:880px){
    .review-row{ grid-template-columns:1fr; max-width:560px; margin:0 auto; }
    .trophy:nth-child(n){ transform:none; }
  }

  /* ---------- booking band ---------- */
  .bookband{ background:var(--teal); color:#fff; padding:clamp(58px,7vw,92px) 0; position:relative; overflow:hidden; }
  .bookband::before{ content:""; position:absolute; inset:0; background:radial-gradient(800px 400px at 90% 120%, rgba(15,29,44,.28), transparent 65%); pointer-events:none; }
  .bookband .wrap{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,64px); align-items:center; }
  .bookband h2{ color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:-.005em; font-size:clamp(30px,4.2vw,56px); line-height:1.03; text-wrap:balance; max-width:20ch; }
  .bookband p{ margin-top:14px; font-size:18.5px; color:rgba(255,255,255,.88); max-width:48ch; }
  .book-ctas{ display:flex; flex-direction:column; gap:14px; align-items:stretch; min-width:340px; }
  .book-ctas .btn{ justify-content:center; }
  @media (max-width:820px){ .bookband .wrap{ grid-template-columns:minmax(0,1fr); } .book-ctas{ max-width:420px; min-width:0; } }

  /* ================= SERVICES ================= */
  .services{ background:var(--ground-2); border-top:1px solid var(--hairline); padding:clamp(90px,11vw,150px) 0; }
  .services-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(36px,5vw,80px); align-items:center; }
  .service-list{ list-style:none; margin-top:34px; }
  .service-list li{ border-bottom:1px solid var(--hairline); }
  .service-list li:first-child{ border-top:1px solid var(--hairline); }
  .service-list a{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:20px 4px; text-decoration:none;
    font-family:var(--disp); font-weight:700; font-size:clamp(19px,2vw,25px);
    letter-spacing:-0.01em; color:var(--navy);
    transition:padding .22s ease, color .22s ease;
  }
  .service-list a::after{ content:"\2192"; color:var(--teal); font-weight:600; transition:transform .22s ease; }
  .service-list a:hover{ color:var(--teal-deep); padding-left:14px; }
  .service-list a:hover::after{ transform:translateX(6px); }
  .nearby{
    margin-top:26px; font-family:var(--body); font-size:16.5px; color:var(--ink-soft);
  }
  .nearby a{ color:var(--teal-deep); font-weight:600; }
  .svc-photo{ position:relative; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-photo); }
  .svc-photo img{ width:100%; height:clamp(320px,40vw,520px); object-fit:cover; }
  .svc-photo figcaption{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(to top, rgba(15,29,45,.82), rgba(15,29,45,0));
    padding:56px clamp(20px,3vw,28px) 18px;
    font-family:var(--body); font-style:italic; font-size:15px; color:rgba(255,255,255,.92);
  }
  @media (max-width:880px){ .services-grid{ grid-template-columns:1fr; } }

  /* ================= 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:44ch; 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; }
  .field{ margin-bottom:16px; }
  .field label{
    display:block; font-family:var(--disp); font-weight:700; font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
  }
  .field input, .field select, .field textarea{
    width:100%; font-family:var(--body); font-size:16.5px; color:var(--ink);
    padding:13px 14px; border:1.5px solid var(--hairline); border-radius:3px;
    background:var(--ground); outline:none; transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,144,127,.18); background:#fff;
  }
  .field textarea{ min-height:96px; resize:vertical; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .est-form .btn{ width:100%; margin-top:6px; }
  .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:880px){
    .est-grid{ grid-template-columns:minmax(0,1fr); }
    .receipts{ justify-content:space-between; }
  }
  @media (max-width:560px){ .field-row{ grid-template-columns:1fr; }
    /* 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; } }

  /* ================= 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; }