/* /book concierge page styles (QR destination; phone-first). Fonts + tokens + shell from v2-city.css. */
@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');}

:root{
  --navy:#16283c; --navy-deep:#0f1d2d; --navy-soft:#22374e;
  --teal:#14907f; --teal-deep:#0e6f62; --gold:#F0B40C;
  --ground:#f4f8f8; --ground-2:#e9f0f0; --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:760px; /* single concierge column */
}

*,*::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; }
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); }

.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,4vw,46px); line-height:1.06; letter-spacing:-0.015em; text-wrap:balance; }

.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); }
.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-white{ background:#fff; color:var(--navy); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(15,29,45,.5); }

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; }
@media (prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; transition:none; } }

/* header (shared markup) */
.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; max-width:1200px; }
.topbar .logo img{ height:34px; width:auto; }
.topnav{ display:flex; gap:24px; margin-left:auto; align-items:center; }
.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:560px){ .topnav a.phone{ display:none; } .topbar .wrap{ height:64px; } .topbar .logo img{ height:28px; } }

/* ================= INTRO (navy) ================= */
.bk-hero{ background:var(--navy-deep); padding:clamp(64px,9vw,110px) 0 clamp(56px,8vw,96px); }
.bk-hero h1{ color:#fff; font-weight:800; font-size:clamp(38px,6vw,64px); line-height:1.02; letter-spacing:-0.015em; }
.bk-kicker{ color:#8fd3c8; }
.bk-lede{
  margin-top:22px; font-family:var(--body); font-size:clamp(17.5px,1.8vw,20px);
  line-height:1.65; color:rgba(255,255,255,.88); max-width:52ch;
}
.bk-ctas{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }

/* ================= LINK CARDS ================= */
.bk-list{ padding:clamp(44px,6vw,72px) 0 clamp(20px,3vw,36px); }
.lcard{
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  background:var(--card); border:1px solid var(--hairline); border-left:3px solid var(--teal);
  border-radius:4px; padding:clamp(20px,3vw,28px) clamp(20px,3vw,30px);
  text-decoration:none; color:var(--ink);
  box-shadow:0 18px 40px -30px rgba(15,29,45,.35);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lcard + .lcard{ margin-top:16px; }
.lcard:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -28px rgba(15,29,45,.45); border-left-color:var(--gold); }
.lc-title{ font-family:var(--disp); font-weight:700; font-size:clamp(16px,1.8vw,19px); color:var(--navy); }
.lc-sub{ margin-top:6px; font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:56ch; }
.lc-sub strong{ font-weight:600; color:var(--navy); }
.lc-arrow{ font-size:22px; color:var(--teal-deep); flex-shrink:0; }

/* ================= WARRANTY ================= */
.bk-warranty{ padding:clamp(48px,7vw,84px) 0; }
.wr-rows{ margin-top:26px; display:grid; gap:14px; }
.wr-row{
  display:flex; align-items:center; gap:20px;
  background:var(--card); border:1px solid var(--hairline); border-radius:4px;
  padding:18px 22px;
}
.wr-num{
  font-family:var(--disp); font-weight:900; font-size:clamp(34px,4vw,44px);
  color:var(--teal-deep); line-height:1; min-width:52px; text-align:center;
}
.wr-name{ font-family:var(--disp); font-weight:700; font-size:clamp(15px,1.8vw,18px); color:var(--navy); }
.wr-line{ margin-top:20px; font-family:var(--body); font-style:italic; font-size:16.5px; color:var(--ink-soft); max-width:56ch; }

/* ================= CLOSE (navy) ================= */
.bk-close{ background:var(--navy-deep); padding:clamp(56px,8vw,92px) 0; }
.bk-close h2{ color:#fff; }
.bk-close-line{ margin-top:16px; font-size:clamp(17px,1.8vw,19.5px); color:rgba(255,255,255,.88); max-width:48ch; }
.bk-nap{ margin-top:28px; font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.08em; color:rgba(255,255,255,.6); text-transform:uppercase; }

/* footer + sticky bar (shared markup) */
footer{ background:var(--navy-deep); color:rgba(255,255,255,.65); padding:38px 0 46px; border-top:1px solid var(--hairline-dark); }
footer .wrap{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; max-width:1200px; }
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; }
.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; }

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