:root{
  --brand-blue:#087dc2;
  --brand-blue-dark:#054e75;
  --brand-green:#23a455;
  --brand-accent:#f5a623;
  --text:#2b2b2b;
  --muted:#7a7a7a;
  --muted-2:#54595f;
  --bg:#ffffff;
  --bg-alt:#f4f7f9;
  --border:#eaeaea;
  --radius:10px;
  --max-width:1160px;
  font-size:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw;}
body{
  margin:0;
  overflow-x:hidden;max-width:100vw;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius);}
a{color:var(--brand-blue);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:100;}
.skip-link:focus{left:10px;top:10px;}

/* header: fixed, translucent dark-tinted, shaded -- matches
   farandawayadventures.com's floating header (never opaque white, sits on
   top of the hero video/image or plain page content, always visible on
   scroll). Logo PNG has a real transparent background (no white box baked
   in) so it sits cleanly on this bar. Body gets a top-padding equal to the
   header's real height so nothing loads underneath it; hero sections pull
   themselves up by that same amount (see .hero below) so the hero image
   is visible right up through/behind the header, not pushed down by it. */
/* Header: a light frosted bar. At the top it's a translucent WHITE pane
   over the hero (lighter than the image, hero showing through the frost);
   as you scroll it fills in to solid white. The fill is scroll-LINKED via
   the --sp custom property (scroll progress, 0 at top -> 1 by ~180px) that
   the header-scroll script updates on every scroll, so the change is a
   gradual dark-to-white fade rather than a single snap. Text is dark in
   both states (dark-on-light). */
.site-header{
  background:rgba(255,255,255,calc(.65 + .35*var(--sp,0)));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--text);position:fixed;top:0;left:0;right:0;z-index:200;
  box-shadow:0 2px 14px rgba(0,0,0,calc(.05 + .09*var(--sp,0)));
  transition:background .15s linear, box-shadow .15s linear;
}
body{padding-top:84px;}
/* Desktop: everything stays on one line -- no wrap, tightened gaps/padding
   so logo + nav + phone + currency all fit inside the 1160px container on
   a standard screen. Mobile (<=1000px, see the media query near the bottom)
   switches header-inner/header-utils back to stacked columns.
   2026-07-16 header audit: at the ORIGINAL 80px logo / 16px gap, roughly
   900-1350px viewport width was a dead zone where nowrap+shrink-to-fit left
   too little room for logo+nav+phone+currency, so nav items got silently
   clipped by the sitewide overflow-x:hidden safety net instead of wrapping.
   Shrinking the logo 80px->64px and tightening this gap 16px->8px (below)
   closed nearly all of that dead zone on their own -- measured minimum fit
   is now ~885px. Breakpoint only needed to move 820px->1000px (small safety
   margin past that number) to close the rest, NOT all the way past 1350:
   an earlier pass over-corrected to 1360px, which dragged ordinary desktop
   widths (1024-1350px, extremely common laptop/half-screen sizes) into the
   fully-stacked mobile layout -- header ballooned to ~480px tall and the
   hero-widget-box search box lost its "floating over the hero image"
   position, since that trick depends on the fixed-header desktop layout.
   Always verify with real width testing after touching this number -- see
   the widths listed in HEADER_AUDIT_AND_HANDOFF_2026-07-16.md. */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 20px;flex-wrap:nowrap;}
/* flex-shrink:0 -- without this, when the header's total content doesn't
   fit in one line the flex algorithm shrinks the logo's box narrower than
   its natural width while height:111px on the img stays rigid, squishing
   it (this bit twice: once on mobile via viewport width, here via desktop
   flex overflow after the logo's new wider 4.8:1 crop). Never let the logo
   shrink -- let nav/utils wrap instead. */
.logo{flex-shrink:0;}
.logo img{height:64px;width:auto;background:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}
.main-nav{flex:0 1 auto;min-width:0;}
.main-nav ul{list-style:none;display:flex;gap:16px;margin:0;padding:0;flex-wrap:nowrap;white-space:nowrap;}
/* padding (not just font metrics) so the tap target clears ~44px tall,
   even though the visible text is much smaller -- WCAG 2.5.5 / Material
   44-48px minimum. display:inline-block so the padding actually expands
   the hit area instead of just adding visual space around inline text. */
.main-nav a{color:var(--brand-blue-dark);font-weight:600;font-size:.95rem;transition:color .2s ease;display:inline-block;padding:10px 6px;}
.main-nav li.active a{color:var(--brand-blue);}
.main-nav a:hover{color:var(--brand-accent);text-decoration:none;}
.header-utils{display:flex;flex-direction:row;align-items:center;gap:10px;flex:0 0 auto;}
.phone{color:#fff;font-weight:700;white-space:nowrap;background:var(--brand-blue);padding:12px 14px;border-radius:6px;display:inline-block;line-height:1.3;}
.phone:hover{text-decoration:none;filter:brightness(1.08);}

/* phone dropdown: hover/focus-within panel below the phone number,
   one click through to Contact Us (same interaction pattern as the
   lang-switcher below). */
.phone-dropdown{position:relative;}
.phone-dropdown-menu{
  list-style:none;margin:0;padding:6px;position:absolute;right:0;top:100%;
  background:#fff;border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:180px;
  display:none;flex-direction:column;gap:2px;z-index:60;
}
.phone-dropdown:hover .phone-dropdown-menu,
.phone-dropdown:focus-within .phone-dropdown-menu{display:flex;}
.phone-dropdown-menu li a{display:block;padding:8px 10px;border-radius:6px;color:var(--text);font-weight:600;font-size:.9rem;}
.phone-dropdown-menu li a:hover{background:var(--bg-alt);text-decoration:none;color:var(--brand-blue);}

/* language / currency switcher */
.lang-switcher{position:relative;}
.lang-switcher-trigger{
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;
  padding:13px 10px;font-size:.88rem;font-weight:600;color:var(--text);cursor:pointer;
}
.lang-switcher-trigger:hover{border-color:var(--brand-blue);}
.lang-switcher .lang-currency{color:var(--muted);font-weight:600;font-size:.82rem;}
.lang-switcher-trigger .lang-caret{font-size:.7rem;color:var(--muted);display:inline-block;transition:transform .15s ease;}
/* rotate the caret whenever the menu is actually visible -- CSS hover/focus
   for desktop mouse, plus the JS-driven .open class (data-header-dropdown-a11y
   script) for click/tap, so touch users get the same "this is now open"
   affordance mouse users get for free from :hover. */
.lang-switcher:hover .lang-caret,
.lang-switcher:focus-within .lang-caret,
.lang-switcher.open .lang-caret{transform:rotate(180deg);}
/* header lang-switcher uses the default light styling (dark text on light) --
   the header is a light frosted bar, so no white-on-dark override needed. */
.lang-switcher-menu{
  list-style:none;margin:0;padding:6px;position:absolute;right:0;top:100%;
  background:#fff;border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:200px;
  display:none;flex-direction:column;gap:2px;z-index:60;
}
.lang-switcher:hover .lang-switcher-menu,
.lang-switcher:focus-within .lang-switcher-menu,
.lang-switcher.open .lang-switcher-menu{display:flex;}
.lang-switcher-menu li a{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:8px 10px;border-radius:6px;color:var(--text);font-weight:600;font-size:.9rem;
}
.lang-switcher-menu li a:hover{background:var(--bg-alt);text-decoration:none;}
.lang-switcher-menu li.active a{color:var(--brand-blue);}
.lang-switcher-menu .lang-currency{font-weight:500;}
.footer-lang .lang-switcher-menu{right:auto;left:0;}

/* fixed vertical social icon bar, right edge of viewport -- same pattern
   as farandawayadventures.com's social bar (fixed, vertically centered,
   circular brand-colored buttons). */
.site-socialbar{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);
  z-index:9990;display:flex;flex-direction:column;gap:11px;
}
.site-sb-link{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--c,var(--brand-blue));color:#fff;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .18s,box-shadow .18s;
}
.site-sb-link:hover,.site-sb-link:focus-visible{
  transform:scale(1.14);box-shadow:0 8px 22px rgba(0,0,0,.3);outline:none;text-decoration:none;
}
.site-sb-link svg{display:block;pointer-events:none;}

/* hero: solid/plain (fallback, e.g. homepage tagline strip) */
.hero{
  position:relative;
  background:#000;
  color:#fff;
  overflow:hidden;
  margin-top:-84px;padding-top:84px; /* pull hero up under the fixed translucent header */
}
.hero-plain{background:linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);min-height:620px;display:flex;align-items:center;text-align:center;}
.hero-inner{position:relative;z-index:2;padding:60px 0;width:100%;}
.hero-title{font-size:2.5rem;margin:0 0 12px;font-weight:800;letter-spacing:-.5px;}
.hero-sub{font-size:1.2rem;margin:0;opacity:.95;}

/* hero: video background. Each page sets its own poster photo via an
   inline background-image style on .hero-video-bg (real photo pulled from
   the old WP media library, not a placeholder) -- it's the permanent
   mobile hero (video never loads on small screens, matching how Elementor
   used to hide the video and fall back to this same background-image on
   mobile) and it's what desktop sees for the first HERO_POSTER_MS of the
   page's life, before data-hero-video-script.js swaps the iframe in. */
.hero-video{min-height:620px;display:flex;align-items:center;} /* matches the rendered height of the USA hotels page hero -- the sitewide minimum */
.hero-video-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background-size:cover;background-position:center;}
.hero-video-bg iframe{
  position:absolute;top:50%;left:50%;
  width:177.78vh;height:56.25vw;
  min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  border:0;
  opacity:0;transition:opacity .8s ease;
}
.hero-video-bg.is-playing iframe{opacity:1;}
@media (max-width:700px){
  /* mobile: poster photo only, permanently -- no video request at all */
  .hero-video-bg iframe{display:none;}
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 100%);pointer-events:none;}
.hero-video .hero-inner{padding:80px 0;}
.hero-video .hero-title{font-size:2.7rem;}
.hero-video .hero-title,.hero-video .hero-sub{text-shadow:0 2px 10px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.6);}

/* affiliate search widget floated as a card inside the hero (booking-site
   pattern -- quick-search box over the header image). Falls back to a
   plain card under the hero on narrow screens where a 2nd overlay row
   would crowd the title. */
.hero-widget-box{
  margin-top:22px;max-width:1040px;width:100%;
  background:rgba(255,255,255,.96);border-radius:12px;
  padding:16px 18px 6px;box-shadow:0 10px 28px rgba(0,0,0,.28);
}
@media (max-width:700px){
  .hero-widget-box{max-width:none;}
}
/* The hotel search widget (S4279) is a fixed 320x320px square, unlike the
   other hero widgets which stretch to fill their box -- so its card needs
   to shrink to match instead of leaving a huge empty white area around a
   small square. The doubled-up class selector beats both rules above
   (equal specificity otherwise) at every breakpoint, including mobile. */
.hero-widget-box.hero-widget-box--compact{max-width:360px;width:auto;}
/* Trim the GetRentacar car-rental widget's oversized default iframe
   (min-height:560px inline) -- its search bar + Search button only occupy
   ~390px, leaving a big empty white block below. 430px keeps the button
   with a little breathing room; the remaining reserve still lets the
   flatpickr date calendar open without clipping. */
.hero-widget-box #getrentacar_iframe{min-height:430px !important;}

/* Viator tours/activities widget. Its script injects an iframe styled
   height:100%, but the container itself has no intrinsic height, so it
   collapses to 0 and the widget is invisible. Give the container a
   min-height so the iframe has room to render; Viator will grow it further
   via postMessage when its content is taller. */
/* Viator tours widget. Its script forces an inline height:0 on the
   container and never postMessage-resizes it, so we pin the height with
   min-height (which the inline height:0 can't override) and let the
   height:100% iframe fill it. The widget shows a real grid of tours for
   the city set in data-vi-search-term (fed per-page by the search box /
   random featured city); 1180px shows a few rows, the rest is clipped. */
.viator-widget{
  min-height:1180px;
  margin:1.5em 0 2em;
  border-radius:var(--radius);
  overflow:hidden;
}
.viator-widget iframe{width:100%;height:100%;min-height:1180px;border:0;}
@media (max-width:700px){
  .viator-widget,.viator-widget iframe{min-height:1500px;}
}

/* hero destination search (activities pages): type a city, go to the
   activities results page for that city. White rounded card floated over
   the hero image, same family as .hero-widget-box. */
.hero-search{
  display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;
  margin-top:22px;max-width:660px;width:100%;
  background:rgba(255,255,255,.96);border-radius:12px;padding:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.hero-search input{
  flex:1 1 280px;min-width:0;border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:1rem;color:var(--text);background:#fff;
}
.hero-search input:focus{outline:2px solid var(--brand-blue);outline-offset:1px;}
.hero-search button{
  flex:0 0 auto;background:var(--brand-blue);color:#fff;border:0;border-radius:8px;
  padding:12px 22px;font-weight:700;font-size:1rem;cursor:pointer;white-space:nowrap;
}
.hero-search button:hover{filter:brightness(1.08);}
@media (max-width:700px){
  .hero-search{max-width:none;}
  .hero-search input,.hero-search button{flex:1 1 100%;}
}

/* main content */
main.container{padding:36px 20px 60px;min-height:60vh;}
.page-title{font-size:2.1rem;margin:0 0 20px;color:var(--brand-blue-dark);}
main h1,main h2,main h3,main h4{color:var(--brand-blue-dark);line-height:1.3;}
main h2{font-size:1.6rem;margin-top:2em;}
main h3{font-size:1.25rem;margin-top:1.6em;}
main p{margin:1em 0;color:var(--text);}
main ul,main ol{margin:1em 0;padding-left:1.4em;}
main li{margin:.4em 0;}
main blockquote{border-left:4px solid var(--brand-green);margin:1.2em 0;padding:.4em 1.2em;background:var(--bg-alt);color:var(--muted-2);}
main table{border-collapse:collapse;width:100%;margin:1.4em 0;}
main table td,main table th{border:1px solid var(--border);padding:8px 10px;text-align:left;}
main img{margin:1em 0;}
main a{word-break:break-word;}

/* image galleries */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin:1.5em 0;
}
.gallery img{
  margin:0;
  width:100%;
  height:220px;
  object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .2s ease;
}
.gallery img:hover{transform:scale(1.03);}

/* FAQ */
.faq-list{margin:1.2em 0;}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  margin-bottom:12px;
  background:var(--bg-alt);
}
.faq-q{margin:0 0 8px;font-size:1.05rem;color:var(--brand-blue-dark);}
.faq-a{margin:0;color:var(--text);}
.faq-a p{margin:0;}

/* related links + authority note */
.related-links{
  margin:2em 0;
  padding:18px 20px;
  background:var(--bg-alt);
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.related-links h2{margin-top:0;font-size:1.1rem;}
.related-links ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 12px;}
.related-links li{margin:0;display:inline-flex;}
.related-links a{
  display:inline-block;font-weight:600;font-size:.92rem;color:var(--brand-blue-dark);
  background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:8px 16px;line-height:1.3;
}
.related-links a:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;text-decoration:none;}
.authority-note{
  font-size:.9rem;
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:2em;
}

/* contact page: organized cards instead of a wall of images */
.breadcrumb{margin:0 0 1.2em;}
.breadcrumb ol{list-style:none;display:flex;gap:6px;margin:0;padding:0;font-size:.9rem;color:var(--muted);}
.breadcrumb a{color:var(--muted-2);}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:1.6em 0;}
.contact-card{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;text-align:center;
}
.contact-card h2{margin:0 0 10px;font-size:1.1rem;}
.contact-card p{margin:0;}
.contact-card address{font-style:normal;color:var(--text);line-height:1.6;}
.contact-card-cta{
  display:inline-block;font-weight:700;font-size:1.15rem;color:#fff;
  background:var(--brand-blue);padding:10px 22px;border-radius:6px;
}
.contact-card-cta:hover{filter:brightness(1.08);text-decoration:none;}

/* contact form: two columns (name/email/phone | message+submit) collapsing
   to one column under 768px, per SPEC-header-and-contact.md */
.contact-form{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;margin:1.6em 0;
}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.form-col{display:flex;flex-direction:column;}
.form-group{margin-bottom:16px;}
.form-group-grow{flex:1;display:flex;flex-direction:column;}
.form-group-grow textarea{flex:1;min-height:140px;}
.contact-form label{display:block;font-weight:600;font-size:.9rem;color:var(--text);margin-bottom:6px;}
.contact-form .req{color:#c0392b;}
.contact-form input,.contact-form textarea{
  width:100%;border:1px solid var(--border);border-radius:6px;padding:10px 12px;
  font-size:.95rem;font-family:inherit;color:var(--text);background:#fff;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand-blue);outline-offset:1px;}
.contact-form textarea{resize:vertical;}
.contact-form-submit{
  display:inline-block;font-weight:700;font-size:1rem;color:#fff;background:var(--brand-blue);
  border:0;border-radius:6px;padding:12px 26px;cursor:pointer;align-self:flex-start;
}
.contact-form-submit:hover{filter:brightness(1.08);}
.contact-form-status{margin-top:10px;font-size:.9rem;min-height:1.2em;}
.contact-form-status-ok{color:#1a7f37;font-weight:600;}
.contact-form-status-error{color:#c0392b;font-weight:600;}
@media (max-width:768px){
  .contact-form-grid{grid-template-columns:1fr;}
  .contact-form-submit{align-self:stretch;text-align:center;}
}

/* CTA-style buttons for known link text patterns */
main > p > a:only-child,
main > a{
  display:inline-block;
}

/* footer: proper horizontal, multi-column layout */
.site-footer{background:var(--brand-blue-dark);border-top:1px solid var(--border);margin-top:40px;color:#fff;}
.footer-grid{
  padding:44px 20px 32px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  text-align:left;
}
.footer-col h3{margin:0 0 14px;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;opacity:.85;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:#fff;opacity:.9;}
.footer-col a:hover{opacity:1;text-decoration:none;}
.footer-brand .footer-logo{display:inline-block;margin-bottom:12px;}
.footer-brand .footer-logo img{background:#fff;padding:4px 10px;border-radius:6px;}
.footer-tagline{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.5;margin:0 0 16px;max-width:32ch;}
.footer-social{display:flex;gap:14px;flex-wrap:wrap;}
.footer-phone{display:inline-block;font-weight:700;color:#fff;background:rgba(255,255,255,.12);padding:9px 14px;border-radius:6px;margin-bottom:14px;}
.footer-phone:hover{background:rgba(255,255,255,.2);text-decoration:none;}
.footer-lang .lang-switcher-trigger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff;}
.footer-lang .lang-current,.footer-lang .lang-currency{color:#fff;}
.footer-lang .lang-switcher-trigger:hover{border-color:#fff;}
.footer-bottom{padding:18px 20px;border-top:1px solid rgba(255,255,255,.15);}
.copyright{color:rgba(255,255,255,.75);font-size:.85rem;margin:0;}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:1000px){
  /* fixed header + negative-margin hero trick gets unreliable once the
     header wraps to multiple rows on narrow screens -- fall back to a
     simple in-flow sticky header here instead. */
  .site-header{position:sticky;top:0;}
  body{padding-top:0;}
  .hero{margin-top:0;padding-top:0;}
  .header-inner{flex-direction:column;align-items:flex-start;}
  /* logo: switch from a fixed height (which, combined with the global
     img{max-width:100%} reset, was letting the width get clamped narrower
     than the image's natural ratio while the height stayed rigid -- i.e.
     squished) to a capped WIDTH with height:auto, which always preserves
     the image's true 3:1 aspect ratio. */
  .logo img{height:auto;width:100%;max-width:210px;}
  /* phone number + currency/language box side by side on the same line
     (not stacked one above the other) even when the header wraps to its
     own row on mobile. */
  .header-utils{flex-direction:row;align-items:center;flex-wrap:wrap;}
  /* nav items that don't fit on one line wrap to additional lines instead
     of being forced nowrap (which, combined with the sitewide overflow-x:
     hidden safety net, was clipping overflowing items off-screen entirely
     -- i.e. losing menu items). */
  .main-nav ul{gap:14px;flex-wrap:wrap;white-space:normal;}
  /* the currency/language dropdown defaults to right:0 (grows leftward
     off its trigger's right edge) -- fine when the trigger sits near the
     right of a wide desktop header, but on mobile header-utils stacks at
     the LEFT edge of the screen, so a leftward-growing menu wider than its
     trigger gets pushed past x=0 and clipped/invisible. Same fix already
     used for .footer-lang; flip it to grow rightward here too. */
  .lang-switcher-menu{left:0;right:auto;}
  /* same right:0-grows-leftward issue as the lang-switcher above, on the
     phone number's "Contact Us" dropdown -- it sits ahead of the
     lang-switcher in header-utils, so it's flush against the left edge on
     mobile too. */
  .phone-dropdown-menu{left:0;right:auto;}
  .page-title{font-size:1.6rem;}
  .hero-plain{min-height:0;padding:44px 0 52px;}
  .hero-video{min-height:320px;}
  .site-socialbar{right:8px;gap:8px;}
  .site-sb-link{width:36px;height:36px;}
  .site-sb-link svg{width:16px;height:16px;}
  .hero-video .hero-inner{padding:48px 0;}
  .hero-title{font-size:1.9rem;}
  .hero-video .hero-title{font-size:2rem;}
  .gallery{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));}
  .gallery img{height:150px;}
  .footer-grid{grid-template-columns:1fr;gap:24px;}
}

/* solo inline content images: float + shrink so text wraps beside them.
   Multi-image galleries (.gallery) are untouched and stay full-width. */
.content-img-float-left,
.content-img-float-right{
  width:42%;
  max-width:420px;
  margin-top:6px;
  margin-bottom:18px;
}
.content-img-float-left{float:left;margin-right:24px;}
.content-img-float-right{float:right;margin-left:24px;}
.faq-list,
.related-links,
.authority-note,
.gallery{clear:both;}

@media (max-width:1000px){
  .content-img-float-left,
  .content-img-float-right{
    float:none;
    width:100%;
    max-width:none;
    margin:1em 0;
  }
}

/* accurate-status callout for pages about carriers that changed ownership/ops */
.status-note{
  background:#fff7e6;
  border:1px solid #f0d9