/* ============================================================================
   v2-basic.css - the one stylesheet for the base template hierarchy
   (index.php, page.php, single.php, archive.php, search.php, 404.php).

   These are utility surfaces, not landing pages: same navy/teal/amber tokens,
   Montserrat + Spectral, cool near-white ground as the v2 pages, but quiet.
   No hero photography, no scroll reveals, no full-bleed moments.

   Self-contained by rule: the @font-face block below is copied verbatim from
   v2-about.css and points at our own /fonts directory. There is no third-party
   URL 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 (same set as the v2 pages) ================= */
: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;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1320px; /* was 1200: the page was capped well inside a 1440 screen and left ~720px unused at 1920 */
  --column:860px;        /* reading column for utility surfaces */
}

/* ================= BASE =================
   Divi prints an et-critical-inline-css style block after this file loads, and it sets
   body font-size to var(--et_global_body_font_size), which is 14px, plus line-height
   1.7em and its own link colour. Those are plain element selectors, so the base rules
   here are scoped to the .mhp-basic body class to outrank them without !important.
   Everything that has to beat .mhp-basic a (0,1,1) in turn, buttons, footer links and
   the skip link, carries the same prefix. */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body.mhp-basic{
  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;
}
.mhp-basic img{ max-width:100%; height:auto; display:block; }
.mhp-basic a{ color:var(--teal-deep); }
::selection{ background:var(--teal); color:#fff; }

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

/* Divi's inline critical CSS also carries p{padding-bottom:1em} and h1-h6{padding-bottom:10px},
   which double up on our own margins. Cancelled inside our own surfaces only: builder content
   in .contentwide is styled entirely by Divi and keeps its spacing. */
.pagehead h1,.pagehead h2,.pagehead p,
.sheet h1,.sheet h2,.sheet h3,.sheet h4,.sheet h5,.sheet h6,.sheet p,
.postitem h2,.postitem p,
.notice h2,.notice p,
.route .rt,.route .rs,
.nextstep h2,.nextstep p,
footer p{ padding-bottom:0; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.mhp-basic .skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px;
  font-family:var(--disp); font-weight:700; font-size:13px; text-decoration:none;
}
.mhp-basic .skip:focus{ left:12px; top:12px; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

/* ================= BUTTONS ================= */
.mhp-basic .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:16px 28px; 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;
}
.mhp-basic .btn-teal{ background:var(--teal); color:#fff; box-shadow:0 14px 28px -14px rgba(14,111,98,.6); }
.mhp-basic .btn-teal:hover{ background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(14,111,98,.7); }
.mhp-basic .btn-ghost{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(22,40,60,.12); }
.mhp-basic .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.mhp-basic .btn-navy{ background:var(--navy); color:#fff; }
.mhp-basic .btn-navy:hover{ background:var(--navy-deep); transform:translateY(-2px); }
.mhp-basic .btn-ghost-navy{ border-color:var(--navy); color:var(--navy); background:transparent; }
.mhp-basic .btn-ghost-navy:hover{ background:var(--navy); color:#fff; }

/* ================= HEADER (shared chrome, parts/v2-header.php) ================= */
.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; } }

/* ================= PAGE HEAD ================= */
/* Held to the reading column so the H1 lines up with the sheet / list below it.
   The dark bands (.nextstep, footer) stay on the wide wrap and read as chrome. */
.pagehead{ padding:clamp(46px,6.5vw,84px) 0 clamp(22px,3vw,34px); }
.pagehead .wrap{ max-width:calc(var(--column) + 2 * clamp(20px,4vw,48px)); }
.pagehead .eyebrow{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-family:var(--disp); font-weight:700; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal-deep);
  margin-bottom:16px;
}
.pagehead .eyebrow::before{ content:""; width:28px; height:2px; background:var(--gold); flex-shrink:0; }
.pagehead .eyebrow:hover{ color:var(--navy); }
.pagehead h1{
  font-family:var(--disp); font-weight:800; color:var(--navy);
  font-size:clamp(31px,4.2vw,54px); line-height:1.07; letter-spacing:-.018em;
  max-width:24ch; text-wrap:balance;
}
.pagehead .meta{
  margin-top:16px; font-family:var(--disp); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.pagehead .dek{ margin-top:16px; font-size:18px; color:var(--ink-soft); max-width:60ch; }
.pagehead .rule{ margin-top:clamp(22px,3vw,32px); border:0; border-top:1px solid var(--hairline); }

/* ================= READING SHEET ================= */
.sheet{
  background:var(--card);
  border:1px solid var(--hairline);
  border-top:3px solid var(--gold);
  box-shadow:0 30px 60px -48px rgba(15,29,45,.5);
  max-width:var(--column); margin:0 auto clamp(56px,7vw,100px);
  padding:clamp(28px,4vw,52px) clamp(22px,4vw,54px);
}
/* editor content that is already a full-width builder layout renders unwrapped */
.contentwide{ margin:0 0 clamp(50px,7vw,90px); }

/* ================= PROSE (arbitrary editor content) ================= */
.prose > *:first-child{ margin-top:0; }
.prose > *:last-child{ margin-bottom:0; }
.prose p{ margin:0 0 1.05em; color:var(--ink-soft); }
.prose strong,.prose b{ font-weight:600; color:var(--navy); }
.prose em{ font-style:italic; }
.prose a{ color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--navy); }
.prose h1{
  font-family:var(--disp); font-weight:800; color:var(--navy);
  font-size:clamp(27px,3vw,38px); line-height:1.12; letter-spacing:-.014em;
  margin:1.7em 0 .5em;
}
.prose h2{
  font-family:var(--disp); font-weight:800; color:var(--navy);
  font-size:clamp(23px,2.5vw,31px); line-height:1.18; letter-spacing:-.01em;
  margin:1.9em 0 .55em;
}
.prose h3{
  font-family:var(--disp); font-weight:700; color:var(--navy);
  font-size:clamp(19px,2vw,23px); line-height:1.28; margin:1.7em 0 .5em;
}
.prose h4{
  font-family:var(--disp); font-weight:700; color:var(--navy);
  font-size:16px; line-height:1.4; margin:1.6em 0 .45em;
}
.prose h5,.prose h6{
  font-family:var(--disp); font-weight:700; color:var(--navy);
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  margin:1.6em 0 .45em;
}
.prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.35em; color:var(--ink-soft); }
.prose li{ margin-bottom:.5em; }
.prose li::marker{ color:var(--teal); }
.prose li > ul,.prose li > ol{ margin-top:.5em; margin-bottom:.3em; }
.prose blockquote{
  margin:1.7em 0; padding:2px 0 2px 22px;
  border-left:3px solid var(--gold);
  font-style:italic; font-size:1.05em; color:var(--navy);
}
.prose blockquote p{ color:var(--navy); }
.prose blockquote cite{
  display:block; margin-top:10px; font-style:normal;
  font-family:var(--disp); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.prose hr{ border:0; border-top:1px solid var(--hairline); margin:2.3em 0; }
.prose img{ margin:1.7em 0; border-radius:2px; }
.prose figure{ margin:1.8em 0; max-width:100%; }
.prose figure img{ margin:0; }
.prose figcaption{
  margin-top:10px; font-size:14.5px; font-style:italic;
  color:var(--ink-faint); line-height:1.5;
}
.prose table{
  display:block; max-width:100%; overflow-x:auto;
  border-collapse:collapse; margin:1.8em 0; font-size:16px;
}
.prose th,.prose td{
  border:1px solid var(--hairline); padding:11px 14px;
  text-align:left; vertical-align:top; color:var(--ink-soft);
}
.prose th{
  font-family:var(--disp); font-weight:700; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--ground-2); color:var(--navy); white-space:nowrap;
}
.prose tbody tr:nth-child(even) td{ background:rgba(22,40,60,.025); }
.prose .wp-block-table{ margin:1.8em 0; overflow-x:auto; }
.prose .wp-block-table table{ margin:0; }
.prose code{
  font-family:var(--mono); font-size:.88em;
  background:var(--ground-2); padding:2px 6px; border-radius:2px; color:var(--navy);
}
.prose pre{
  font-family:var(--mono); font-size:14.5px; line-height:1.6;
  background:var(--navy-deep); color:#e3ecf3;
  padding:18px 20px; border-radius:3px; margin:1.7em 0;
  overflow-x:auto;
}
.prose pre code{ background:none; padding:0; color:inherit; }
.prose iframe,.prose video{ max-width:100%; }
.prose .alignleft,.prose .alignright,.prose .aligncenter{ margin-left:auto; margin-right:auto; }

/* ================= POST LIST (archive / index / search) ================= */
.postlist{
  max-width:var(--column); margin:0 auto clamp(46px,6vw,80px);
  border-top:1px solid var(--hairline);
}
.postitem{ padding:clamp(22px,3vw,30px) 0; border-bottom:1px solid var(--hairline); }
.postitem .date{
  font-family:var(--disp); font-weight:600; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.postitem h2{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(20px,2.1vw,26px); line-height:1.24; letter-spacing:-.008em;
  margin:9px 0 10px; text-wrap:balance;
}
.postitem h2 a{ color:var(--navy); text-decoration:none; }
.postitem h2 a:hover{ color:var(--teal-deep); }
.postitem p{ color:var(--ink-soft); font-size:16.5px; max-width:68ch; margin-bottom:12px; }
.postitem .more{
  font-family:var(--disp); font-weight:700; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-deep); text-decoration:none;
}
.postitem .more::after{ content:" \2192"; }
.postitem .more:hover{ color:var(--navy); }

/* pagination (paginate_links output) */
.pager{
  max-width:var(--column); margin:0 auto clamp(56px,7vw,96px);
  display:flex; gap:9px; flex-wrap:wrap;
}
.pager .page-numbers{
  font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.08em;
  padding:11px 15px; border:1px solid var(--hairline);
  background:var(--card); color:var(--ink-soft); text-decoration:none;
}
.pager a.page-numbers:hover{ border-color:var(--teal); color:var(--teal-deep); }
.pager .page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pager .page-numbers.dots{ border-color:transparent; background:none; }

/* ================= SEARCH FORM ================= */
.searchrow{ max-width:var(--column); margin:0 auto clamp(30px,4vw,44px); }
.searchform{ display:flex; gap:10px; max-width:560px; flex-wrap:wrap; }
.searchform input[type="search"]{
  flex:1 1 240px; min-width:0;
  font-family:var(--body); font-size:16.5px; line-height:1.4;
  padding:14px 16px; border:1px solid var(--hairline); border-radius:2px;
  background:var(--card); color:var(--ink);
}
.searchform input[type="search"]::placeholder{ color:var(--ink-faint); }
.searchform input[type="search"]:focus{ border-color:var(--teal); outline:2px solid var(--teal); outline-offset:1px; }
.searchform .btn{ padding:14px 24px; }

/* ================= NOTICE / EMPTY STATE ================= */
.notice{
  max-width:var(--column); margin:0 auto clamp(46px,6vw,80px);
  background:var(--card); border:1px solid var(--hairline);
  padding:clamp(24px,3.6vw,40px);
}
.notice h2{
  font-family:var(--disp); font-weight:700; color:var(--navy);
  font-size:clamp(19px,2vw,23px); line-height:1.25; margin-bottom:12px;
}
.notice p{ color:var(--ink-soft); max-width:62ch; }
.notice p + p{ margin-top:.85em; }
.notice .searchform{ margin-top:20px; }

/* ================= ROUTE CARDS ================= */
.routes{
  max-width:var(--column); margin:0 auto clamp(56px,7vw,96px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.routes.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px){ .routes,.routes.two{ grid-template-columns:1fr; } }
.routes .rhead{
  grid-column:1/-1; font-family:var(--disp); font-weight:700; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
}
.route{
  display:block; background:var(--card); border:1px solid var(--hairline);
  padding:20px 20px 18px; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.route:hover{
  border-color:var(--teal); transform:translateY(-2px);
  box-shadow:0 22px 36px -28px rgba(15,29,45,.55);
}
.route .rt{
  display:block;
  font-family:var(--disp); font-weight:700; font-size:14.5px; line-height:1.35;
  color:var(--navy); letter-spacing:.01em;
}
.route .rt::after{ content:" \2192"; color:var(--teal); }
.route .rs{ display:block; margin-top:6px; font-size:15px; line-height:1.55; color:var(--ink-soft); }

/* ================= NEXT STEP BAND (owns id="estimate") ================= */
.nextstep{
  background:var(--navy); color:#fff;
  padding:clamp(50px,6.5vw,80px) 0; position:relative; overflow:hidden;
}
.nextstep::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 450px at 88% 115%, rgba(20,144,127,.18), transparent 66%);
}
.nextstep .wrap{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,48px); align-items:center;
}
@media (max-width:820px){ .nextstep .wrap{ grid-template-columns:1fr; } }
.nextstep h2{
  font-family:var(--disp); font-weight:800; color:#fff;
  font-size:clamp(25px,3vw,38px); line-height:1.1; letter-spacing:-.012em;
  max-width:18ch; text-wrap:balance;
}
.nextstep p{ margin-top:14px; color:#cbd8e4; font-size:17px; max-width:54ch; }
.nextstep .nap{
  margin-top:18px; font-family:var(--disp); font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.nextstep .nap a{ color:rgba(255,255,255,.85); text-decoration:none; }
.nextstep .nap a:hover{ color:#fff; }
.nextstep .ns-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ================= 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; }
/* .mhp-basic img sets height:auto at (0,1,1), so the footer mark has to match it. */
.mhp-basic 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; }
.mhp-basic 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; }
.mhp-basic 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);
}
.mhp-basic .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.mhp-basic{ 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; }