/* v2 contact page styles (self-hosted fonts + v2 design system; components shared with the about/city pages) */
@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 */
  .receipt .r-val, .ct-phone, .step .s-num{ 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; }
  .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; } }

  /* ================= CONTACT HERO (compact: the number IS the hero) ================= */
  .ct-hero{
    background:var(--navy-deep); color:#dfe7ee;
    padding:clamp(64px,9vw,110px) 0 clamp(60px,8vw,96px);
    position:relative; overflow:hidden;
  }
  .ct-hero::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(1100px 560px at 12% -10%, rgba(20,144,127,.20), transparent 62%);
  }
  .ct-hero .wrap{ position:relative; z-index:2; }
  .ct-hero .kicker{ color:var(--gold); margin-bottom:16px; }
  .ct-hero h1{
    color:#fff; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(38px,5.6vw,74px); line-height:1.0; max-width:14ch;
    margin-bottom:18px; text-wrap:balance;
  }
  .ct-phone{
    display:inline-block; text-decoration:none;
    font-family:var(--disp); font-weight:900; letter-spacing:-0.02em;
    font-size:clamp(40px,7.4vw,104px); line-height:1.02; color:#fff;
    border-bottom:4px solid var(--gold); padding-bottom:6px;
    transition:color .18s ease, border-color .18s ease;
  }
  .ct-phone:hover{ color:var(--teal); border-color:var(--teal); }
  .ct-lede{
    margin-top:26px; font-family:var(--body); font-size:clamp(18px,1.7vw,21px);
    line-height:1.6; color:rgba(255,255,255,.9); max-width:52ch;
  }
  .ct-ctas{ margin-top:28px; display:flex; gap:16px; flex-wrap:wrap; }
  .ct-alt{
    margin-top:24px; font-family:var(--body); font-style:italic;
    font-size:16.5px; color:rgba(255,255,255,.72);
  }
  .ct-alt a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
  .ct-alt a:hover{ border-color:var(--gold); }
  @media (max-width:560px){
    .ct-phone{ border-bottom-width:3px; }
    .ct-ctas .btn{ width:100%; }
  }

  /* ================= WHAT HAPPENS NEXT ================= */
  .ct-next{ padding:clamp(64px,8vw,110px) 0 clamp(60px,8vw,100px); }
  .ct-next h2{ max-width:20ch; margin-bottom:clamp(34px,4vw,52px); }
  .step-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.4vw,48px); align-items:start; }
  .step{ border-top:2px solid var(--hairline); padding-top:20px; }
  .step .s-num{
    display:block; font-family:var(--disp); font-weight:900; font-size:clamp(30px,3.4vw,46px);
    line-height:1; color:var(--teal); margin-bottom:12px;
  }
  .step .s-name{
    font-family:var(--disp); font-weight:800; font-size:clamp(17px,1.6vw,20px);
    line-height:1.25; color:var(--navy); letter-spacing:-0.01em; margin-bottom:10px;
  }
  .step .s-body{ font-family:var(--body); font-size:17px; line-height:1.65; color:var(--ink-soft); }
  .ct-deposit{
    margin-top:clamp(36px,4vw,52px);
    font-family:var(--body); font-style:italic; font-size:clamp(18px,1.9vw,22px);
    line-height:1.55; color:var(--navy);
    border-left:3px solid var(--gold); padding-left:22px; max-width:56ch;
  }
  @media (max-width:820px){ .step-row{ grid-template-columns:minmax(0,1fr); gap:26px; } }

  /* ================= ESTIMATE (shared component) ================= */
  /* overflow:clip, not hidden: `hidden` makes this a scroll container and silently
     kills position:sticky on the copy column inside it. See v2-city.css. */
  .estimate{ background:var(--navy); color:#fff; padding:clamp(80px,10vw,140px) 0 clamp(70px,9vw,120px); 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){
    /* minmax(0,...) so the receipts row can never push the column past .wrap */
    .est-grid{ grid-template-columns:minmax(0,1fr); }
    .receipts{ justify-content:space-between; }
  }
  @media (max-width:560px){
    .field-row{ grid-template-columns:1fr; }
    .receipts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
    .receipt{ min-width:0; }
  }

  /* ================= THE PRACTICAL DETAILS ================= */
  .ct-details{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(64px,8vw,110px) 0 clamp(64px,8vw,110px); }
  .ct-details h2{ font-size:clamp(28px,3.2vw,44px); margin-bottom:clamp(30px,3.6vw,44px); }
  .det-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.4vw,48px); align-items:start; }
  .det{ border-top:2px solid var(--hairline); padding-top:18px; }
  .det-h{
    font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--navy); margin-bottom:12px;
  }
  .det-b{ font-family:var(--body); font-size:17px; line-height:1.65; color:var(--ink-soft); }
  .det-b a{ color:var(--teal-deep); font-weight:600; text-decoration:none; }
  .det-b a:hover{ color:var(--navy); }
  @media (max-width:820px){ .det-grid{ grid-template-columns:minmax(0,1fr); gap:26px; } }

  /* labeled placeholder block (awaiting Michael's confirmation) */
  .ph-note{
    margin-top:clamp(32px,4vw,48px);
    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; }

  /* ================= 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:34px; width:auto; }  /* no filter: img/Logo_Full_White.png is already the dark-ground artwork */
  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; }
}

/* Copy column sticks while the booking form scrolls past it (two-column only). */
@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; }