/* Site shell: the header and primary navigation, the referral notice under it, and the footer.
   This file is the ONLY stylesheet that styles them. The generator strips every rule that targets
   the shell from page CSS (splitShellCss in _build/generate.js) and links this file last in <head>
   on every page, so the shell is identical on every page type and cannot drift per template.
   Values that page CSS reads too (colors, fonts, --noticeH) are the site's design tokens and are
   defined once here. Brand colors are filled in per site from #bf1f1f at build time. */

/* ---------- fonts ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/barlow-300.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/barlow-condensed-900.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;font-display:swap;src:url(/assets/fonts/barlow-condensed-900-italic.woff2) format('woff2')}

/* ---------- design tokens ---------- */
:root{
  /* brand + palette */
  --red:#bf1f1f;--accent-text:#bf1f1f;--accent-on-dark:#e04242;
  --red-hover:#991919;
  --black:#111111;
  --ink:#222222;
  --body:#000000;
  --muted:#595959;
  --rule:#e0e0e0;
  --bg-off:#ffffff;
  --bg-dark:#111111;
  --on-dark:#ffffff;
  --on-dark-strong:rgb(255 255 255 / .88);
  --on-dark-soft:rgb(255 255 255 / .84);
  --on-dark-muted:rgb(255 255 255 / .72);
  --on-dark-faint:rgb(255 255 255 / .7);
  --on-dark-rule:rgb(255 255 255 / .18);
  --on-accent-rule:rgb(255 255 255 / .2);
  /* focus: a dark ring outside a light halo reads on light, dark and brand-red surfaces alike */
  --focus-ring:#111111;
  --focus-halo:#ffffff;
  /* type */
  --heading-font:'Barlow Condensed',sans-serif;
  --body-font:'Barlow',sans-serif;
  --shell-line-height:1.6;
  /* Every Barlow and Barlow Condensed face has a cap height of exactly 0.7 em, so this keeps the web
     fonts at their designed size (scale 1) and scales a fallback font to the same cap height while
     the web font loads, which keeps the (mostly uppercase) shell from jumping on a font swap. */
  --font-size-adjust:cap-height .7;
  /* shell geometry (page CSS offsets content by these) */
  --nav-h:64px;
  --noticeH:56px;
}
@media (min-width:1750px){:root{--noticeH:37px}}
@media (max-width:1100px){:root{--noticeH:75px}}
@media (max-width:700px){:root{--noticeH:94px}}
@media (max-width:480px){:root{--noticeH:118px}}

/* ---------- sitewide type ----------
   One font-size-adjust for every page: Barlow and Barlow Condensed share a 0.7 cap height, so the
   web fonts render at exactly their size and a fallback font is scaled to match while they load.
   (Four page types used from-font on body, which scaled their headings differently from the rest.) */
body{font-size-adjust:var(--font-size-adjust)}


:root{
  --type-display:clamp(4rem,6vw,5.25rem);   /* page title (every H1)              66-84 / 64 / 44-54 */
  --type-headline:clamp(3.125rem,4.85vw,3.875rem); /* section H2s                50-62 / 50 / 40 */
  --type-feature:3.125rem;   /* large feature cards (destinations, prices)   50 / 44 / 34 */
  --type-title:2.25rem;      /* card, tile and panel titles                   36 / 36 / 28 */
  --type-subtitle:1.5625rem; /* FAQ questions, small headings                 25 / 25 / 22 */
  --type-body:1.125rem;      /* paragraphs                                    18 / 18 / 17 */
  --type-button:1.25rem;     /* call-to-action buttons                        20 / 22 / 19-22 */
  --type-label:.875rem;      /* eyebrows                                      14          */
  --type-crumb:.875rem;      /* breadcrumbs                                   14 / 14 / 12 */
  --lh-display:1.05;
  --lh-headline:1.1;
  --lh-feature:1.05;
  --lh-title:1.15;
  --lh-subtitle:1.2;
  --lh-body:1.6;
  --lh-button:1.2;
  /* the design-system block's copy tokens follow the body role */
  --sprinter-copy-size:var(--type-body);
  --sprinter-copy-size-mobile:var(--type-body);
}
@media (max-width:1024px){:root{--type-display:4rem;--type-headline:3.125rem;--type-feature:2.75rem;--type-button:1.375rem}}
@media (max-width:767px){:root{--type-display:clamp(2.75rem,12vw,3.375rem);--type-headline:2.5rem;--type-feature:2.125rem;--type-title:1.75rem;--type-subtitle:1.375rem;--type-body:1.0625rem;--type-button:clamp(1.1875rem,5.2vw,1.375rem);--type-crumb:.75rem}}

/* The page templates still carry their own heading/copy sizes, many with !important. An !important
   declaration inside a cascade layer outranks every unlayered !important one, so the roles below
   win without a specificity arms race; they are the ONLY place type sizes are set per role. */
@layer type-roles{
  
  :where(main h1:not(#page-title):not(main:has([id^="about-details"]) #hero h1)){font-size:var(--type-display)!important;line-height:var(--lh-display)!important}
  :where(main h2:not(.srv-hub-title,.contact-panel-title,.sitemap-block-title):not(.privacy-policy-body h2,.quick-panel h2)){text-align:center!important}
  :where(main h2:not(.srv-hub-title,.contact-panel-title,.sitemap-block-title):not(.privacy-policy-body h2,.quick-panel h2):not(.vfl4-title,.arcfg__heading,.amt12-title,.services-heading)){
    font-size:var(--type-headline)!important;line-height:var(--lh-headline)!important}
  :where(main h3:not(.fqt):not(.amt12-caption h3,.privacy-policy-body h3,.fname h3),
         main h2:is(.srv-hub-title,.contact-panel-title,.sitemap-block-title),
         main .quick-panel h2){font-size:var(--type-title)!important;line-height:var(--lh-title)!important}
  /* big feature cards (destination cards, prices feature headings) use the feature role */
  :where(main :is(h3.vds1-name,h3.why-h)){font-size:var(--type-feature)!important;line-height:var(--lh-feature)!important}
  :where(main .amt12-caption h3,main h4:not(.privacy-policy-body h4)){font-size:var(--type-subtitle)!important;line-height:var(--lh-subtitle)!important}
  :where(main .eyebrow){font-size:var(--type-label)!important}
  :where(main :is(.rich-text p,.rich-text li,p:not([class])):not(.am-item-title p,.privacy-policy-body *)){font-size:var(--type-body)!important;line-height:var(--lh-body)!important}
  /* body text reads left-aligned (hero copy keeps its hero's alignment) */
  :where(main :is(.rich-text p,.rich-text li,p:not([class])):not(#hero *,[data-page-hero] *,.am-item-title p)){text-align:start!important}
  :where(main :is(.btn-red-lg,.btn-black-lg):not(.contact-action)){font-size:var(--type-button)!important;line-height:var(--lh-button)!important}
  :where(main .bcrumb,main .bcrumb :is(a,span)){font-size:var(--type-crumb)!important}
}

/* ---------- sitewide UI standards (Primer accessibility design guidance) ---------- */
@layer ui-standards{
  /* The slanted call-to-action buttons are clipped with clip-path, which cut off any focus ring drawn
     outside them (focus was invisible on a quarter of all tab stops). Draw it inside, in the
     button's own text color, which always contrasts with the button fill. */
  :is(.btn-red-lg,.btn-black-lg,.amt12-action,.desktop-cta-btn,.mobile-cta-btn):focus-visible{outline:3px solid currentColor!important;outline-offset:-7px!important;box-shadow:none!important}
  .error-secondary:focus-visible{outline-color:#fff!important}
  .svc-nav-link:focus-visible{outline-offset:-3px!important}
  /* "The Best" on the brand-red band: #171717 on red was 2.92:1 (large text needs 3:1). */
  main .bd-title span{color:#000!important}
  /* On short or landscape screens the floating bar would cover most of the page. */
  @media (max-height:500px){.mobile-cta-widget{display:none!important}}
  /* Forced colors (Windows high contrast) removes fills: give buttons a real border and the
     desktop CTA panel a solid background under its gradient. */
  @media (forced-colors:active){
    :is(.btn-red-lg,.btn-black-lg,.amt12-action,.desktop-cta-btn,.mobile-cta-btn){border:2px solid ButtonText!important}
    .desktop-cta-panel{background-color:Canvas!important}
  }
}

/* ---------- sitewide interaction baseline ---------- */
:where(a:any-link,button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 2px var(--focus-halo)}
/* dark surfaces swap the two focus layers */
.site-notice,.site-footer{--focus-ring:#ffffff;--focus-halo:#111111}
/* Back to Top only after the first viewport (site-ui.js adds is-scroll-ready). Inside the desktop
   CTA panel it follows the panel, which is itself hidden until the hero clears. */
.back-to-top:not(.is-scroll-ready),.mobile-cta-top[data-back-to-top]:not(.is-scroll-ready){display:none!important}
.back-to-top.is-scroll-ready{display:inline-flex!important}
.desktop-cta-panel .back-to-top,.desktop-cta-actions .back-to-top{display:inline-flex!important}
.mobile-cta-top[data-back-to-top].is-scroll-ready{display:block!important}
/* the phone bar's Back to Top is a button that must look exactly like the link beside it */
button.mobile-cta-top{width:100%;margin:0;border:0;border-radius:0;background:none;line-height:inherit;cursor:pointer;appearance:none}
body.nav-open{overflow:hidden}
/* While the privacy <dialog> is open the page behind it does not scroll. (No scrollbar-gutter on the
   root: it would also shrink every vw-based heading size sitewide.) */
html:has(dialog.cookie-modal[open]){overflow:hidden}
/* Inline quote forms render after the page (third-party script): reserve their measured height
   while the mount point is still empty so the page below does not jump when the form appears. */
main [data-booking-form]:empty{min-height:640px}
@media (max-width:1199px){main [data-booking-form]:empty{min-height:720px}}
@media (max-width:767px){main [data-booking-form]:empty{min-height:840px}}
@media (max-width:599px){main [data-booking-form]:empty{min-height:1120px}}
@media (max-width:439px){main [data-booking-form]:empty{min-height:1260px}}
@media (max-width:359px){main [data-booking-form]:empty{min-height:1460px}}
/* Floating CTA bars: opacity alone leaves invisible buttons in the tab order and the accessibility
   tree, so a hidden bar is also visibility:hidden. The visibility change waits for the .25s fade
   when hiding and is immediate when showing (reduced motion drops all of it). */
.mobile-cta-widget{transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.mobile-cta-widget:not(.is-visible),body:is(.nav-open,.overflow-hidden) .mobile-cta-widget{visibility:hidden}
.mobile-cta-widget.is-visible{transition-delay:0s}
.desktop-cta-widget:not(.is-visible){visibility:hidden}

/* ---------- shell roots ----------
   Page CSS is fenced off the shell at build time (every generic page selector gets
   :where(:not([data-site-shell],[data-site-shell] *))), so the resets the shell needs live here, and
   every inherited property is set on the roots: neither page CSS nor a late third-party reset can
   change the shell's type or box model. */
.site-header,.site-notice,.site-footer{
  font-family:var(--body-font);
  font-size:1.125rem;
  font-size-adjust:var(--font-size-adjust);
  font-style:normal;
  font-weight:400;
  line-height:var(--shell-line-height);
  letter-spacing:normal;
  text-transform:none;
  text-align:start;
  -webkit-text-size-adjust:100%;
}
.site-header{color:var(--black)}
.site-header :where(ul,li),.site-footer :where(ul,li){margin:0;padding:0;list-style:none}
.site-header :where(p,div),.site-footer :where(p,div,nav),.site-notice :where(span){margin:0;padding:0}
.site-header :where(a),.site-footer :where(a),.site-notice :where(a){color:inherit;text-decoration:none}
.site-header :where(button),.site-footer :where(button){margin:0;font:inherit;font-size-adjust:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;appearance:none;cursor:pointer}
.site-header,.site-notice,.site-footer,:is(.site-header,.site-notice,.site-footer) :where(*,*::before,*::after){box-sizing:border-box}

/* visually hidden text (after the resets above so it wins inside the shell too) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- header bar ---------- */
#nav{position:fixed;inset:0 0 auto;z-index:200;background:rgb(255 255 255 / .97);border-bottom:3px solid var(--red);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav-wrap{max-width:1340px;margin:0 auto;padding:0 16px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.nav-wrap>a[href="/"]{display:inline-block;min-height:24px}
.logo{font-family:var(--heading-font);font-style:italic;font-weight:900;font-size:1.25rem;line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--black)}

/* ---------- primary navigation (desktop) ---------- */
.nav-links{display:flex;height:100%}
.nav-item{position:relative;display:flex;align-items:center;height:100%}
.mobile-only-item{display:none}
.nav-main-group{display:flex;align-items:stretch;height:var(--nav-h);border-right:1px solid var(--rule)}
.nav-main-link{position:relative;display:flex;align-items:center;height:var(--nav-h);padding:0 8px;border-right:1px solid var(--rule);font-family:var(--heading-font);font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.nav-main-link::after{content:'';position:absolute;inset:auto 0 0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left}
.nav-main-link:hover{color:var(--red)}
.nav-main-link:hover::after{transform:scaleX(1)}
.nav-main-group>.nav-main-link{padding-right:4px;border-right:0}
.nav-submenu-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0 7px;color:var(--ink)}
.nav-main-group>.nav-submenu-toggle{min-width:30px;height:var(--nav-h)}
/* the Resources control is a toggle that is also the nav label */
.nav-submenu-toggle.nav-main-link{gap:6px;border-right:0;padding:0 7px;line-height:normal}
.nav-submenu-toggle:hover,.nav-submenu-toggle:focus-visible,.nav-item.open>.nav-main-group>:is(.nav-main-link,.nav-submenu-toggle),.nav-item.open>.nav-main-link{color:var(--red)}
.nav-submenu-toggle:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.nav-mobile-label{display:none}
.nav-chevron{display:inline-block;line-height:1}
.nav-item.open .nav-chevron{transform:rotate(180deg)}

/* dropdown panels: shown only by the nav script (.nav-item.open), never by hover alone */
.nav-dropdown{display:none;position:absolute;top:var(--nav-h);left:0;flex-direction:column;min-width:240px;max-height:70vh;overflow-y:auto;background:#fff;border-top:3px solid var(--red);box-shadow:0 8px 24px rgb(0 0 0 / .08)}
.nav-dropdown-right{left:auto;right:0}
.nav-dropdown a{display:block;padding:16px 20px;font-family:var(--heading-font);font-size:.9375rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.nav-dropdown>li:not(:last-child)>a{border-bottom:1px solid var(--rule)}
.nav-dropdown a:hover{background:var(--bg-off);color:var(--red)}
.nav-links .mobile-view-all{display:none}
@media (min-width:1025px){
  .nav-item.has-submenu.open>.nav-dropdown{display:flex}
  .nav-item.open>.nav-main-group>.nav-main-link::after,.nav-item.open>.nav-submenu-toggle.nav-main-link::after{transform:scaleX(1)}
}

/* ---------- calls to action ---------- */
.nav-cta-wrap{display:flex;height:var(--nav-h)}
.nav-cta{display:flex;align-items:center;height:var(--nav-h);padding:0 12px;background:var(--red);color:var(--on-dark);font-family:var(--heading-font);font-size:.875rem;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nav-cta-quote{border-right:1px solid var(--on-accent-rule);line-height:normal}
.nav-cta-quote:hover{background:var(--red-hover)}
.nav-cta-phone{background:var(--black)}
.mobile-nav-tel{display:none}
.hbg{display:none;padding:4px;touch-action:manipulation}
/* border, not background: the bars must survive forced-colors (high contrast) mode */
.hbg span{display:block;width:22px;height:0;margin:5px 0;border-top:2px solid var(--black)}

/* ---------- navigation drawer (tablet and phone) ---------- */
@media (max-width:1024px){
  #nav{z-index:10001;transform:translateZ(0)}
  .nav-wrap{padding:0 20px}
  .nav-wrap>a[href="/"]{min-width:0;flex:0 1 auto;overflow:hidden}
  .logo{font-size:clamp(.625rem,7vw - .875rem,1.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-cta{display:none}
  .mobile-nav-tel{display:flex;flex:0 0 auto;align-items:center;margin-left:auto;padding:8px 16px;border-radius:4px;background:var(--red);color:var(--on-dark);font-family:var(--heading-font);font-size:.9375rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;touch-action:manipulation}
  .hbg{display:block;margin-left:12px}
  .nav-links{display:none;position:fixed;inset:var(--nav-h) 0 0;z-index:10000;width:100%;height:calc(100dvh - var(--nav-h));min-height:calc(100vh - var(--nav-h));padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 12px);overflow:hidden auto;overscroll-behavior:contain;background:#fff;border-top:3px solid var(--red)}
  .nav-links.open{display:block}
  .nav-item{display:block;height:auto}
  .nav-main-group{display:block;width:100%;height:auto;border-right:0}
  .nav-main-group>.nav-main-link{display:none}
  .nav-main-link{display:block;height:auto;padding:16px 28px;border-right:0;border-bottom:1px solid var(--rule);font-size:1.0625rem;letter-spacing:.1em}
  .nav-main-link::after{display:none}
  .nav-main-link:hover,.nav-item.open>.nav-main-link{color:var(--red)}
  .nav-main-group>.nav-submenu-toggle,.nav-submenu-toggle.nav-main-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;height:auto;min-height:56px;padding:16px 28px;border-bottom:1px solid var(--rule);color:var(--ink);font-family:var(--heading-font);font-size:1rem;font-weight:700;letter-spacing:.08em;line-height:1.2;text-align:start;text-transform:uppercase;white-space:normal}
  .nav-mobile-label{display:inline}
  .nav-dropdown{position:static;min-width:0;max-height:none;overflow:visible;background:transparent;border-top:0;box-shadow:none}
  .nav-item.has-submenu.open>.nav-dropdown{display:block}
  .nav-links :is(.nav-dropdown a,.mobile-view-all){display:block;position:relative;z-index:2;width:100%;padding:12px 28px 12px 48px;background:var(--bg-off);border-bottom:1px solid var(--rule);color:var(--body);font-family:var(--heading-font);font-size:.9375rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  .nav-dropdown>li:last-child>a{border-bottom:0}
  .nav-links .nav-dropdown a:hover{background:transparent;color:var(--red)}
  .mobile-only-item{display:block}
  .nav-item.mobile-only-item>:is(.nav-mobile-quote,.nav-mobile-phone){display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);min-height:50px;height:auto;margin:12px 16px;padding:14px 20px;border:0;border-radius:6px;color:var(--on-dark);font-family:var(--heading-font);font-size:1.0625rem;font-weight:800;line-height:1.1;letter-spacing:.08em;text-align:center;text-transform:uppercase;white-space:normal}
  .nav-item.mobile-only-item>.nav-mobile-quote{background:var(--red)}
  .nav-item.mobile-only-item>.nav-mobile-phone{margin-top:0;background:var(--black)}
}

/* ---------- referral notice under the header ---------- */
.site-notice{display:flex;align-items:center;justify-content:center;min-height:var(--noticeH);padding:8px 16px;overflow-wrap:anywhere;background:var(--black);color:var(--on-dark-strong);font-size:.78125rem;line-height:1.5;text-align:center}
.site-notice-link{display:inline-block;margin:-5px 0;padding:5px 0;color:var(--on-dark);text-decoration:underline;text-underline-offset:.125rem}
@media (max-width:480px){.site-notice{padding:7px 12px;font-size:.71875rem;line-height:1.45}}

/* ---------- footer ---------- */
.site-footer{padding:54px 0 38px;background:var(--bg-dark);color:var(--on-dark)}
.site-footer-container{width:min(1180px,100% - 48px);margin:0 auto}
.site-footer-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:36px;align-items:start}
.site-footer-grid>*{min-width:0}
.site-footer-logo,.site-footer-heading{margin:0 0 16px;color:var(--on-dark);font-family:var(--heading-font);font-size:1.5rem;font-style:italic;font-weight:900;line-height:1.05;letter-spacing:.08em;text-transform:uppercase}
.site-footer-logo{max-width:100%;overflow-wrap:anywhere}
.site-footer-contact{margin:0 0 10px;color:var(--on-dark-soft);font-size:1.0625rem;line-height:1.65}
.site-footer-contact strong{display:block;color:var(--on-dark);font-weight:800}
.site-footer-list{display:grid;gap:8px}
.site-footer a,.site-footer-privacy-button{display:inline-block;color:var(--on-dark-soft);font-size:1.0625rem;line-height:1.65;text-align:start}
.site-footer a:hover,.site-footer a:focus-visible,.site-footer-privacy-button:hover,.site-footer-privacy-button:focus-visible{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.site-footer-privacy-button:focus-visible{outline:3px solid var(--on-dark);outline-offset:3px}
.site-footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--on-dark-rule);color:var(--on-dark-muted);font-size:.9375rem;line-height:1.5;text-align:center}
.site-footer-disclaimer{max-width:900px;margin:0 auto 14px;color:var(--on-dark-faint);font-size:1.125rem;line-height:1.6}
@media (max-width:1024px){.site-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .site-header,.site-footer{font-size:1.0625rem}
  .site-footer-disclaimer{font-size:1.0625rem;text-align:start}
}
@media (max-width:640px){
  .site-footer{padding:46px 0 32px}
  .site-footer-container{width:min(100% - 32px,1180px)}
  .site-footer-grid{grid-template-columns:minmax(0,1fr);gap:30px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .nav-main-link:is(a){transition:color .2s}
  .nav-main-link::after{transition:transform .3s}
  .nav-chevron{transition:transform .2s ease}
  .nav-dropdown a{transition:background-color .2s,color .2s}
}

/* ---------- forced colors (Windows high contrast) ---------- */
@media (forced-colors:active){
  :where(a:any-link,button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible,.nav-submenu-toggle:focus-visible{outline-color:Highlight}
  .nav-main-link::after{background:Highlight}
}

/* ---------- without JavaScript the menus stay usable: desktop dropdowns open on hover/focus,
   and on small screens the menu is laid out in the page instead of a drawer ---------- */
@media (scripting:none) and (min-width:1025px){
  .nav-main-group>.nav-submenu-toggle{display:none}
  .nav-main-group>a.nav-main-link{display:flex;width:100%}
  .nav-item.has-submenu:is(:hover,:focus-within)>.nav-dropdown{display:flex}
}
@media (scripting:none) and (max-width:1024px){
  #nav{position:static}
  .nav-wrap{height:auto;min-height:var(--nav-h);flex-wrap:wrap}
  .nav-links{display:block;position:static;flex:0 0 100%;order:10;width:100%;height:auto;min-height:0;overflow:visible}
  .nav-links .nav-dropdown,.nav-item.has-submenu>.nav-dropdown{display:block;position:static;width:100%;max-height:none;overflow:visible}
  .mobile-only-item,.nav-links .mobile-view-all{display:block}
  .nav-main-group>.nav-submenu-toggle{display:none}
  .nav-main-group>a.nav-main-link{display:flex;width:100%;padding:16px 28px;border-bottom:1px solid var(--rule)}
  .nav-item>.nav-submenu-toggle.nav-main-link{display:block;pointer-events:none}
  .hbg{display:none}
  body #main-content{padding-top:0!important}
  body{padding-bottom:0!important}
  .mobile-cta-widget{display:none!important}
}