/* =========================================================
   Page-level sections shared by index.html (GS) and honda.html
   ========================================================= */

/* ---------- mega menu (desktop) ---------- */
.has-mega{ position:relative; }
.mega{
  position:absolute; top: calc(100% + 22px); left:50%; transform:translateX(-50%);
  width: min(760px, 90vw);
  background:#fff; border:1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.28);
  padding: 1.8rem;
  display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem;
  opacity:0; visibility:hidden; translate: 0 8px;
  transition: opacity .16s ease, translate .16s ease, visibility .16s;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega{ opacity:1; visibility:visible; translate:0 0; }
.mega h4{
  font-family: var(--font-head); text-transform:uppercase; font-size:.78rem;
  letter-spacing:.08em; color: var(--accent); margin-bottom:.8rem;
}
.mega ul{ display:flex; flex-direction:column; gap:.55rem; }
.mega a{ font-size:.92rem; font-weight:600; }
.mega a:hover{ color: var(--accent); }

/* ---------- hero ----------
   Mobile-first: a defined-height photo "band" up top (full-width, cropped
   with a per-image focal point so the rider stays in frame) with a solid
   panel underneath for the heading/copy — legible on any phone without
   relying on a heavy scrim to fight the image for contrast. From 860px up
   this switches back to the original full-bleed overlay treatment, photo
   behind the whole section with the text floated over it. */
.hero{
  position:relative; overflow:hidden;
  background: var(--ink);
  color:#fff;
}
.hero-media{
  position:relative; width:100%; aspect-ratio: 4/3; overflow:hidden;
}
.hero-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
/* per-page focal point for the mobile photo band — keeps the rider(s) in
   frame instead of a generic centre-crop; irrelevant once the desktop
   full-bleed layer takes over below */
@media (max-width: 859px){
  .hero-photo[src*="gs-motorcycles"]{ object-position: 72% 48%; }
  .hero-photo[src*="ballymena-honda"]{ object-position: 50% 42%; }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  /* mobile: just a soft bottom fade into the solid panel below, not a
     legibility wash — the copy no longer sits over the photo */
  background: linear-gradient(180deg, rgba(6,6,6,0) 55%, rgba(6,6,6,.85) 100%);
}
[data-theme="honda"] .hero-scrim{
  background: linear-gradient(180deg, rgba(10,5,5,0) 55%, rgba(8,4,4,.85) 100%);
}
.hero-content{
  position:relative; z-index:2; width:100%;
  background: var(--ink);
  padding-block: 32px 40px;
}
@media (min-width: 860px){
  .hero{
    min-height: 78svh;
    display:flex; align-items:flex-end;
    background: linear-gradient(180deg,#151515 0%, #0d0d0d 60%, #0a0a0a 100%);
  }
  [data-theme="honda"] .hero{
    background: radial-gradient(120% 130% at 100% 0%, #2a2a2a 0%, #161616 45%, #0f0f0f 100%);
  }
  .hero-media{ position:absolute; inset:0; z-index:0; aspect-ratio:auto; }
  .hero-scrim{
    /* darker over the text column on the left, fading out fast so the photo
       reads clearly on the right; a light bottom wash keeps the stats row
       and finder bar legible without blacking out the image */
    background:
      linear-gradient(100deg, rgba(6,6,6,.72) 0%, rgba(6,6,6,.5) 26%, rgba(6,6,6,.14) 50%, rgba(6,6,6,0) 68%),
      linear-gradient(180deg, rgba(8,8,8,.02) 0%, rgba(8,8,8,.1) 55%, rgba(6,6,6,.55) 100%);
  }
  [data-theme="honda"] .hero-scrim{
    /* same treatment as the homepage: darker over the text column on the
       left, fading out fast so the photo reads clearly on the right, with
       a light bottom wash for the stats/finder bar — tinted slightly warm
       to sit with Honda red rather than pure black. */
    background:
      linear-gradient(100deg, rgba(10,5,5,.74) 0%, rgba(10,5,5,.52) 26%, rgba(10,5,5,.15) 50%, rgba(10,5,5,0) 68%),
      linear-gradient(180deg, rgba(10,5,5,.02) 0%, rgba(10,5,5,.1) 55%, rgba(8,4,4,.58) 100%);
  }
  .hero-content{ background:transparent; padding-block: 60px 96px; }
}
.hero-content .eyebrow{ color: var(--accent); }
.hero h1{ color:#fff; max-width: 14ch; }
.hero .lede{ color:#d8d8d8; margin-top: .6rem; }
.hero-stats{
  display:flex; flex-wrap:wrap; gap: 1.6rem 2.4rem; margin-top: 2.2rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.16);
}
.hero-stats div strong{
  display:block; font-family: var(--font-head); font-size:1.5rem; color:#fff;
}
.hero-stats div span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#a9a9a9; }
.hero-actions{ margin-top: 2rem; }

.finder{
  position:relative; z-index:2;
  background:#fff; color: var(--ink);
  margin-inline: var(--gutter);
  margin-top: -34px;
  padding: 1.3rem;
  display:grid; gap:.8rem;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.4);
}
@media (min-width:720px){
  .finder{
    margin-inline:auto; max-width: calc(var(--container) - 2*var(--gutter));
    grid-template-columns: repeat(4,1fr) auto; align-items:end; gap:1rem; padding: 1.5rem 1.8rem;
  }
}
.finder-field{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.finder-field label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color: var(--grey);
}
.finder-field select{
  appearance:none; border:1px solid var(--line); background:#fff; padding:.75em .9em;
  width:100%; min-width:0;
  font-family: var(--font-body); font-size:.92rem; border-radius: var(--radius);
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px; background-repeat:no-repeat;
}

/* ---------- brand strip (Five brands. One destination) ---------- */
.brand-tiles{ }
.brand-tile{
  background: var(--ink); color:#fff; position:relative; overflow:hidden;
  border-top: 4px solid var(--accent);
  padding: 1.8rem 1.6rem 1.6rem; min-height: 260px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.35rem;
  transition: box-shadow .35s ease;
}
@media (min-width:640px){ .brand-tile{ min-height: 340px; } }
@media (min-width:860px){ .brand-tile{ min-height: 420px; padding: 2.1rem 1.8rem 1.8rem; } }
.brand-tile:hover{ box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.brand-tile img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.brand-tile:hover img:not(.brand-tile-logo){ transform: scale(1.06); }
/* per-photo framing so the full bike stays in view instead of being
   cropped by the tall tiles — tuned to where each bike sits in its shot */
.brand-tile img[alt="Honda"]:not(.brand-tile-logo){ object-position: 70% 15%; }
.brand-tile img[alt="Triumph"]:not(.brand-tile-logo){ object-position: 65% 15%; }
.brand-tile img[alt="Suzuki"]:not(.brand-tile-logo){ object-position: 50% 20%; }
.brand-tile::before{
  content:""; position:absolute; inset:0; z-index:1;
  /* lighter through the middle so the photo actually reads, darker only
     at the very bottom where the logo/tagline sit */
  background: linear-gradient(180deg, rgba(8,8,8,.05) 0%, rgba(8,8,8,.08) 40%, rgba(6,6,6,.5) 72%, rgba(4,4,4,.92) 100%);
}
.brand-tile strong, .brand-tile span{ position:relative; z-index:2; }
.brand-tile strong{ font-family: var(--font-head); text-transform:uppercase; font-size:1.15rem; letter-spacing:.02em; }
.brand-tile span{ font-size:.82rem; color:#bdbdbd; }
.brand-tile .card-link{ margin-top:.6rem; color: var(--accent); font-weight:700; }

/* brand logo used in place of the tile's text title — override the
   absolute-fill photo rule above (.brand-tile img) since this is also
   an <img> inside .brand-tile */
.brand-tile img.brand-tile-logo{
  position:relative; inset:auto; z-index:2;
  display:block; width:auto; height: 30px; max-width: 62%;
  object-fit: contain; object-position: left center;
  margin-bottom:.6rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.65));
}
@media (min-width:640px){ .brand-tile img.brand-tile-logo{ height: 36px; } }
@media (min-width:860px){ .brand-tile img.brand-tile-logo{ height: 42px; margin-bottom:.75rem; } }

.range-row{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns: 1fr;
}
@media (min-width:640px){ .range-row{ grid-template-columns: 1fr 1fr; } }
.range-pill{
  display:flex; flex-direction:column; justify-content:flex-end; gap:.3rem;
  position:relative; overflow:hidden;
  background: var(--ink); color:#fff;
  border-top: 3px solid var(--accent);
  padding: 1.3rem 1.4rem 1.2rem;
  min-height: 150px;
  transition: box-shadow .35s ease;
}
@media (min-width:640px){ .range-pill{ min-height: 168px; } }
@media (min-width:860px){ .range-pill{ min-height: 188px; padding: 1.5rem 1.6rem 1.4rem; } }
.range-pill:hover{ box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.range-pill > img:not(.range-pill-logo){
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.range-pill:hover > img:not(.range-pill-logo){ transform: scale(1.06); }
.range-pill::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(8,8,8,.05) 0%, rgba(8,8,8,.1) 38%, rgba(6,6,6,.55) 74%, rgba(4,4,4,.9) 100%);
}
.range-pill > *{ position:relative; z-index:2; }
.range-pill span{ font-size:.8rem; color:#d6d6d6; }
.range-pill .card-link{ color: var(--accent); font-weight:700; margin-top:.2rem; }
.range-pill-logo{
  display:block; width:auto; height: 26px; max-width: 70%;
  object-fit: contain; object-position: left center;
  margin-bottom:.4rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.65));
}
@media (min-width:640px){ .range-pill-logo{ height: 30px; } }
@media (min-width:860px){ .range-pill-logo{ height: 34px; } }

/* Indian Motorcycle's logo is a two-line lockup (script wordmark stacked
   over a small "MOTORCYCLE" caption) rather than a single-line wordmark
   like Royal Enfield's, so matching pixel-for-pixel height makes its main
   lettering read visibly smaller. Bump it up so the two logos carry the
   same optical weight side by side. */
.range-pill-logo[alt="Indian Motorcycle"]{ height: 35px; }
@media (min-width:640px){ .range-pill-logo[alt="Indian Motorcycle"]{ height: 40px; } }
@media (min-width:860px){ .range-pill-logo[alt="Indian Motorcycle"]{ height: 46px; } }

/* ---------- helmet / PFS feature with 3D cutout ---------- */
.helmet-feature{
  position:relative;
  background: var(--ink); color:#fff; overflow:visible;
}
.helmet-grid{
  display:grid; grid-template-columns:1fr; gap: 0;
  align-items:center;
}
@media (min-width: 900px){ .helmet-grid{ grid-template-columns: .95fr 1.05fr; gap: 0 3rem; } }

.helmet-frame{
  position:relative;
  border: 3px solid var(--accent);
  aspect-ratio: 1/1;
  /* keep real breathing room either side on narrow screens so the helmet's
     breakout doesn't reach the edge of the viewport (was causing horizontal
     scroll on mobile — see .helmet-cutout below) */
  width: calc(100% - 64px); max-width: 420px; margin-inline: auto;
  margin-top: 78px; margin-bottom: 32px;
  /* room either side + above/below for the helmet to break out over */
  margin-left: auto; margin-right: auto;
}
@media (min-width:900px){ .helmet-frame{ margin-top: 34px; margin-bottom: 34px; } }
.helmet-frame::before{
  content:""; position:absolute; inset:14px;
  border: 1px solid rgba(255,255,255,.18);
}
.helmet-cutout{
  position:absolute;
  /* base.css sets a global `img{ max-width:100% }` reset — override it here,
     otherwise it silently clamps the width below and kills the overflow */
  max-width: none;
  /* smaller breakout on narrow screens — 148% of a near-viewport-width frame
     was bleeding off both edges and forcing the whole page to scroll
     horizontally on mobile; scale the breakout back in gradually as the
     frame gets more room to spare */
  width: 122%;
  left:54%; top:47%;
  translate: -50% -50%;
  rotate: -3deg;
  z-index: 3;
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,.5))
    drop-shadow(0 30px 46px rgba(0,0,0,.55));
}
@media (min-width:560px){ .helmet-cutout{ width: 135%; } }
@media (min-width:900px){ .helmet-cutout{ width: 148%; } }
.helmet-frame .cutout-tag{
  position:absolute; left:-3px; bottom:-3px; z-index:4;
  background: var(--accent); color:#fff;
  font-family: var(--font-head); text-transform:uppercase; letter-spacing:.06em;
  font-size:.72rem; font-weight:700; padding:.5em .9em;
}
.helmet-copy{ padding: 2.6rem 0 0; }
@media (min-width:900px){ .helmet-copy{ padding: 0; } }
.helmet-copy h2{ color:#fff; }
.helmet-copy p{ color:#c7c7c7; }
.helmet-feature .btn-row{ margin-top: 1.6rem; }

/* ---------- used bikes ---------- */
.bike-card .card-media{ background: linear-gradient(160deg,#efeeea,#e2e0d9); position:relative; }
.bike-card .card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bike-price{ font-family: var(--font-head); font-weight:700; color: var(--accent); font-size:1rem; }

/* ---------- workshop split ---------- */
.split{
  display:grid; grid-template-columns:1fr; gap: 1.6rem;
  align-items:stretch;
}
@media (min-width:900px){ .split{ grid-template-columns: 1fr 1fr; gap: 0; } }
.split-media{
  min-height: 260px;
  background: linear-gradient(135deg, var(--ink), #262626);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.split-media svg{ width: 46%; opacity:.9; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
/* the workshop shot is a transparent cutout with its own red frame baked
   into the artwork (matching the Shoei helmet treatment), not a plain
   rectangular photo — show it whole instead of cover-cropping it, and
   drop the dark placeholder backdrop so the transparent PNG shows the
   page's own light background through it rather than a black box */
#workshop .split-media{ background: var(--paper-alt); }
#workshop .split-media img{
  width: 90%; height: 90%; object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.22));
}
.split-copy{
  background: var(--paper-alt);
  padding: 2.2rem 1.6rem;
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
}
@media (min-width:900px){ .split-copy{ padding: 3rem 3.4rem; } }
.split-copy .btn-row{ margin-top:.4rem; }
.check-list{ display:flex; flex-direction:column; gap:.55rem; }
.check-list li{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; color: var(--grey-dark); font-weight:600; }
.check-list li::before{
  content:""; width:8px; height:8px; background: var(--accent); flex:none;
}
.split.reverse .split-media{ order:2; }
@media (min-width:900px){ .split.reverse .split-media{ order:2; } .split.reverse .split-copy{ order:1; } }

/* ---------- dual promo cards (gear / learn to ride) ---------- */
.promo-card{
  position:relative; min-height: 300px; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1.8rem; overflow:hidden;
}
.promo-card.promo-a{ background: linear-gradient(150deg,#1c1c1c,#0a0a0a); }
.promo-card.promo-b{ background: linear-gradient(150deg, var(--accent-dark), var(--accent)); }
.promo-card svg{ position:absolute; right:-6%; top:-6%; width:70%; opacity:.18; }
.promo-card > img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.promo-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.82) 100%);
}
.promo-card.promo-b::after{
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.72) 100%);
}
.promo-card h3, .promo-card p, .promo-card > span{ position:relative; z-index:2; }
.promo-card h3{ color:#fff; font-size: 1.5rem; }
.promo-card p{ color: rgba(255,255,255,.85); }

/* ---------- reviews ---------- */
.reviews-strip{
  display:flex; flex-direction:column; gap:1.6rem;
}
@media (min-width:860px){ .reviews-strip{ flex-direction:row; align-items:center; justify-content:space-between; } }
.rating-badge{
  display:flex; align-items:center; gap:1rem;
}
.rating-badge strong{ font-family: var(--font-head); font-size: 2.4rem; }
.stars{ color: var(--accent); letter-spacing:.1em; font-size:1.1rem; }
.review-cards{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:720px){ .review-cards{ grid-template-columns: repeat(3,1fr); } }
.review-card{ border:1px solid var(--line); padding:1.2rem; background:#fff; }
.review-card .stars{ font-size:.85rem; margin-bottom:.5rem; display:block; }
.review-card p{ font-size:.9rem; }
.review-card span{ font-size:.78rem; color:var(--grey); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- visit us ----------
   Same mobile-first split as the hero: a cropped photo band up top (own
   focal point so the signage/forecourt stays in shot) sitting on the
   section's own dark background, with the address/hours copy in a plain
   solid panel underneath rather than washed almost black by a scrim that
   was tuned for a wide desktop overlay. Reverts to the original full-bleed
   photo-behind-everything treatment at 960px, where the two-column grid
   gives the photo a whole side to itself again. */
.visit{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg,#101010,#000);
  color:#fff;
}
.visit-media{
  position:relative; width:100%; aspect-ratio: 4/3; overflow:hidden;
}
.visit-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
@media (max-width: 959px){
  .visit-photo{ object-position: 50% 20%; }
}
.visit-scrim{
  position:absolute; inset:0; z-index:1;
  /* mobile: soft bottom fade into the solid panel below, matching the hero */
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%);
}
.visit > .container{ position:relative; z-index:2; }
.visit-grid{
  display:grid; grid-template-columns:1fr; gap: 0;
}
@media (min-width:960px){
  .visit-grid{ grid-template-columns: 1.1fr .9fr; }
  .visit-media{ position:absolute; inset:0; z-index:0; aspect-ratio:auto; }
  .visit-scrim{ background: linear-gradient(100deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.4) 100%); }
}
.visit-copy{ padding: 2rem 0 3rem; }
@media (min-width:960px){ .visit-copy{ padding: 4.5rem 3rem 4.5rem 0; } }
.visit h2{ color:#fff; }
.visit .lede{ color:#c9c9c9; }
.visit-details{ display:flex; flex-direction:column; gap:1.1rem; margin: 1.8rem 0; }
.visit-details div{ display:flex; gap:.8rem; align-items:flex-start; }
.visit-details svg{ flex:none; width:20px; height:20px; margin-top:.15rem; color: var(--accent); }
.visit-details strong{ display:block; font-size:.95rem; }
.visit-details span{ font-size:.86rem; color:#b6b6b6; }
.visit-map{
  min-height: 320px; position:relative; border: 1px solid rgba(255,255,255,.15);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px),
    radial-gradient(60% 60% at 50% 40%, #262626, #050505);
}
.visit-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter: grayscale(.25) contrast(1.05); }
.visit-map .pin{
  position:absolute; left:50%; top:42%; translate:-50% -100%;
  color: var(--accent); width:44px; height:44px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5));
}

/* ---------- honda offers strip ---------- */
.offer-card{
  border: 1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; overflow:hidden;
  border-left: 4px solid var(--accent);
}
.offer-media{ aspect-ratio: 4/3; position:relative; overflow:hidden; }
.offer-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.offer-body{ padding: 1.5rem; display:flex; flex-direction:column; gap:.5rem; }
.offer-card .pill{ align-self:flex-start; background: var(--accent); color:#fff; border-color: var(--accent); }
.offer-card h3{ font-size:1.1rem; }

/* brand-matched pill colours, GS homepage multi-brand Offers strip */
.offer-card .pill--triumph{ background:#000; color:#fff; border-color:#000; }
.offer-card .pill--suzuki{ background:#003399; color:#fff; border-color:#003399; }
.offer-card .pill--honda{ background:#e4002b; color:#fff; border-color:#e4002b; }
.offer-card .pill--royal-enfield{ background:#fe2414; color:#fff; border-color:#fe2414; }

/* ---------- GS homepage offers strip (scrollable) ---------- */
.offers-strip{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding: .25rem 20px 1.75rem; margin: 0 auto;
  max-width: var(--container);
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.offers-strip::-webkit-scrollbar{ height:8px; }
.offers-strip::-webkit-scrollbar-track{ background:transparent; }
.offers-strip::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.offers-strip .offer-card{ flex: 0 0 270px; scroll-snap-align:start; }
@media (min-width:640px){ .offers-strip .offer-card{ flex-basis:320px; } }
@media (min-width:1024px){
  .offers-strip{ padding-left: max(20px, calc((100vw - var(--container)) / 2)); padding-right: max(20px, calc((100vw - var(--container)) / 2)); }
  .offers-strip .offer-card{ flex-basis: calc((var(--container) - 2rem) / 3); }
}

/* ---------- news strip ---------- */
.news .section-head{ margin-bottom: 1.4rem; }
.news-strip{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding: .25rem 20px 1.75rem; margin: 0 auto;
  max-width: var(--container);
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.news-strip::-webkit-scrollbar{ height:8px; }
.news-strip::-webkit-scrollbar-track{ background:transparent; }
.news-strip::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.news-card{
  flex: 0 0 250px; scroll-snap-align:start;
  border:1px solid var(--line); background:#fff; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; overflow:hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.news-card:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.1); transform: translateY(-2px); }
.news-media{ aspect-ratio: 4/3; position:relative; overflow:hidden; }
.news-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-body{ padding: 1.1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.news-card .pill{ align-self:flex-start; }
.news-body h3{ font-size:1rem; line-height:1.28; }
.news-body p{ font-size:.85rem; color: var(--grey-dark); }
.news-body .card-link{ font-size:.8rem; }
@media (min-width:640px){ .news-card{ flex-basis:290px; } }
@media (min-width:1024px){
  .news-strip{ padding-left: max(20px, calc((100vw - var(--container)) / 2)); padding-right: max(20px, calc((100vw - var(--container)) / 2)); }
  .news-card{ flex-basis: 310px; }
}

/* ---------- back-to-GS strap ---------- */
.crossbrand-strap{
  background: var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.crossbrand-strap .container{
  display:flex; flex-direction:column; gap:.9rem; padding-block: 1.1rem;
}
@media (min-width:720px){ .crossbrand-strap .container{ flex-direction:row; align-items:center; justify-content:space-between; } }
.crossbrand-strap p{ margin:0; font-size:.88rem; }
.crossbrand-strap strong{ color: var(--ink); }

/* utility */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-lg{ margin-top: 2.4rem; }