/* ==========================================================================
   RTA — Regional Transportation Agency of Central Maryland
   Design system built from the RTA Brand Guidelines.
   Layout patterns modeled on wmata.com. Targets WCAG 2.1 AA.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* Brand palette (RTA Brand Guidelines — Color System) */
  --laser-red:    #ED352D;  /* primary, decorative / large display only */
  --red-hot:      #E91006;  /* secondary accent */
  --red-700:      #C5221A;  /* accessible red — body links & icons on white (>=5:1) */
  --red-800:      #A81C15;  /* hover/active for red surfaces */
  --stockholm:    #083866;  /* secondary dark blue (11.8:1 on white) */
  --stockholm-700:#0A2C4D;
  --frosted-black:#0D1720;  /* dark section / footer background */
  --charcoal:     #202222;  /* default body text */
  --pale-yellow:  #F7F179;  /* accent background (status chips, advisories) */
  --pale-silver:  #EBEBEB;  /* light backgrounds, borders */
  --white:        #FFFFFF;
  --black:        #000000;

  /* Functional */
  --ink:          var(--charcoal);
  --ink-muted:    #4A4F4F;     /* muted text — 8.0:1 on white */
  --ink-subtle:   #5E6363;     /* still AA on white for normal text */
  --bg:           #FFFFFF;
  --bg-alt:       #F5F6F7;     /* very light section background */
  --bg-silver:    #EBEBEB;
  --border:       #D6D9DC;
  --border-strong:#B7BDC2;
  --focus:        #1763B6;     /* high-visibility focus ring */
  --success:      #1E7A3D;
  --warning-bg:   var(--pale-yellow);
  --link:         var(--red-700);
  --link-hover:   var(--red-800);

  /* Typography (Brand Guidelines — Poppins headings / Roboto body) */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,23,32,.08), 0 1px 3px rgba(13,23,32,.06);
  --shadow:    0 4px 14px rgba(13,23,32,.10);
  --shadow-lg: 0 12px 34px rgba(13,23,32,.16);

  /* Layout scale.
     The site used to render at a noticeably "zoomed in" scale: a narrow 1200px
     column with an oversized type and chrome scale inside it. The column is
     wider now and the component scale steps down ~15%, so a desktop screen
     shows the amount of content you expect at a normal browser zoom. */
  --maxw: 1320px;
  --gutter: clamp(16px, 3vw, 32px);
  /* White navigation bar (the black utility strip above it was removed, so this
     one bar carries the whole of the site chrome). */
  --header-h: 104px;
  --badge: 72px;

  /* Hero / page-header photography.
     Swap these two values for the client's official RTA bus photographs —
     nothing else needs to change. --hero-photo-sm is the narrow-screen crop. */
  --hero-photo:    url("../img/hero-bus.jpg");
  --hero-photo-sm: url("../img/hero-bus-mobile.jpg");
}

/* ---------- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;          /* never below 16px — it is the accessible baseline */
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

/* Fluid type scale. Body copy stays at 16px; the headings above it were the
   main reason the site read as zoomed in, so the whole scale steps down and
   every size interpolates with the viewport instead of jumping at breakpoints. */
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--stockholm); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.25rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: .25rem 0; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
strong { font-weight: 700; }

/* ---------- Accessibility helpers --------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--stockholm); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 8px; font-family: var(--font-head); font-weight: 600;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; color:#fff; }

/* ---------- Layout ------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(32px, 1.5rem + 2.5vw, 64px); }
.section--alt { background: var(--bg-alt); }
.section--silver { background: var(--bg-silver); }
.section--dark { background: var(--frosted-black); color: #E9ECEF; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--blue { background: var(--stockholm); color: #EAF1F8; }
.section--blue h2, .section--blue h3 { color: #fff; }

/* Width and spacing options the CMS offers per section. Purely additive — no
   existing selector changes, so every page built before these existed renders
   exactly as it did. */
.container--narrow { max-width: 860px; }
.container--wide { max-width: 1560px; }
.section--tight { padding-block: clamp(20px, 1rem + 1.2vw, 36px); }
.section--loose { padding-block: clamp(48px, 2.5rem + 4vw, 104px); }
.section__head { max-width: 68ch; margin-bottom: var(--sp-6); }
.section__eyebrow {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem; color: var(--red-700); margin: 0 0 .5rem;
}
.section--dark .section__eyebrow, .section--blue .section__eyebrow { color: var(--pale-yellow); }
.lead { font-size: 1.05rem; color: var(--ink-muted); }
.section--dark .lead, .section--blue .lead { color: #C9D3DC; }

/* Content grids reflow continuously instead of stepping at two breakpoints:
   each track collapses on its own as the viewport narrows, so there is no width
   at which a card is squashed or a row is left half empty. min(100%, …) keeps
   the track from ever exceeding the container on very narrow screens. */
/* Fixed-count grids step down explicitly rather than by auto-fit. These sections
   hold a known number of cards (3, 4 or 6), and auto-fit sizing sat within a few
   pixels of opening an extra column at desktop width — which would leave a
   6-card grid as a ragged 4+2. Column counts here only ever divide the card
   counts evenly. Open-ended lists (routes, statuses, social links) still use
   auto-fill further down, where raggedness is expected. */
.grid { display: grid; gap: var(--sp-5); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Buttons ------------------------------------------------------ */
/* 44px is the minimum comfortable touch target and the floor for every button
   size here, including the small ones. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  line-height: 1.15; text-decoration: none; cursor: pointer;
  padding: 11px 18px; border-radius: var(--radius-pill);
  border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .05s;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red-700); color: #fff; }
.btn--primary:hover { background: var(--red-800); color:#fff; }
.btn--secondary { background: var(--stockholm); color: #fff; }
.btn--secondary:hover { background: var(--stockholm-700); color:#fff; }
.btn--outline { background: transparent; color: var(--stockholm); border-color: var(--stockholm); }
.btn--outline:hover { background: var(--stockholm); color: #fff; }
.btn--ghost-light { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background:#fff; color: var(--stockholm); }
.btn--lg { font-size: 1.02rem; padding: 13px 22px; min-height: 48px; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Language translator (in the menu bar) ------------------------ */
/* The black utility strip is gone, and so is the light band that briefly
   replaced it: with the Customer Service number removed there was nothing left
   to fill a band, so the translator sits in the menu bar itself, beside the
   Plan Trip button. The phone number lives in the footer of every page and on
   the Contact page. */
.headerlang { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.headerlang__ico { display: inline-flex; color: var(--stockholm); }
.headerlang__ico svg { width: 18px; height: 18px; }
.lang-select {
  background: #fff; color: var(--stockholm); border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 10px; font: inherit;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; cursor: pointer;
  min-height: 40px; max-width: 9.5rem;
}
.lang-select:hover { border-color: var(--stockholm); }
@media (max-width: 480px) {
  .headerlang__ico svg { width: 17px; height: 17px; }
  .lang-select { font-size: .82rem; padding: 6px 8px; min-height: 36px; max-width: 7.5rem; }
}

/* ---------- Service alert bar ------------------------------------------- */
.alertbar { background: var(--laser-red); color: #fff; }
.alertbar[hidden] { display: none; }
.alertbar__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding-block: 7px; }
.alertbar__icon { flex: none; width: 20px; height: 20px; }
.alertbar__icon svg { width: 20px; height: 20px; }
.alertbar p { margin: 0; font-size: .9rem; }
.alertbar a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
/* Dismiss control: a visible "Close" word beside a circled X, so it reads as
   close/dismiss and is never confused with the X (Twitter) social glyph. */
.alertbar__close {
  margin-left: auto; flex: none; background: transparent; color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; min-height: 34px;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; line-height: 1;
}
.alertbar__close:hover { background: #fff; color: var(--red-800); border-color: #fff; }
.alertbar__close svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .alertbar__close-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .alertbar__close { padding: 6px; width: 34px; justify-content: center; }
}

/* ---------- Header / main nav ------------------------------------------- */
/* One tall white bar — no black strip above it. Fixed vertical padding (never a
   collapsing min-height) so the space above and below the logo stays identical
   whether the page is at the top or scrolled. */
.site-header { position: sticky; top: 0; z-index: 200; background: #fff; box-shadow: var(--shadow-sm); }
.site-header__bar { background: #fff; }
/* One row: badge left, nav and the Plan Trip button as a single group on the
   right. Fixed vertical padding (never a collapsing min-height) keeps the space
   above and below the logo identical at rest and scrolled. */
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-3); min-height: var(--header-h);
}

/* Official RTA badge, used on its own and intentionally static — no hover
   transform, transition or animation is defined for it anywhere. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__badge { width: var(--badge); height: var(--badge); }
@media (max-width: 560px) { :root { --badge: 56px; } }

/* primary nav — pushed right so it forms one group with the Plan Trip button
   instead of floating in the middle of the bar. */
.mainnav { margin-left: auto; }
.mainnav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav__item { position: static; }
.mainnav__link, .mainnav__btn {
  position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--stockholm);
  text-decoration: none; background: transparent; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.mainnav__link:hover, .mainnav__btn:hover { background: var(--bg-alt); color: var(--red-700); }
/* The current-page marker is a rule under the item rather than an inset shadow,
   so it reads as a tab indicator and does not square off the hover shape. */
.mainnav__item[aria-current] > .mainnav__btn::before,
.mainnav__link[aria-current="page"]::before {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 3px; border-radius: 2px; background: var(--laser-red);
}
.mainnav__item[aria-current] > .mainnav__btn,
.mainnav__link[aria-current="page"] { color: var(--red-700); }
/* Carets flip instantly to show open/closed state — no transition, so the icon
   never animates (client review: static icons everywhere). */
.mainnav__btn .caret { width: 14px; height: 14px; }
.mainnav__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mainnav__btn[aria-expanded="true"] { background: var(--bg-alt); color: var(--red-700); }

/* mega menu — full-width panel (wmata-style), animated */
.megamenu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-top: 3px solid var(--laser-red);
  box-shadow: var(--shadow-lg); z-index: 210;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .26s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s;
}
.megamenu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__inner { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 320px); gap: var(--sp-8); padding-block: var(--sp-6); align-items: stretch; }
.megamenu__title { font-family: var(--font-head); font-weight: 700; color: var(--red-700); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--sp-4); }
/* Two columns, so the 4-item Ride menu reads as a tidy 2x2 rather than 3+1. */
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-5); }
@media (max-width: 700px) { .mega__grid { grid-template-columns: minmax(0, 1fr); } }
.mega__link { display: flex; align-items: flex-start; gap: var(--sp-3); text-decoration: none; padding: var(--sp-3); border-radius: var(--radius); transition: background .15s; }
.mega__link:hover { background: var(--bg-alt); }
.mega__ico { flex: none; width: 38px; height: 38px; border-radius: var(--radius); background: #FCE7E5; color: var(--red-700); display: grid; place-items: center; }
.mega__ico svg { width: 20px; height: 20px; }
.mega__link:hover .mega__ico { background: var(--red-700); color: #fff; }
.mega__txt { display: flex; flex-direction: column; gap: 2px; }
.mega__txt b { font-family: var(--font-head); font-weight: 600; color: var(--stockholm); font-size: .95rem; }
.mega__txt span { font-size: .82rem; color: var(--ink-muted); line-height: 1.4; }
/* Always visible and stationary — it used to slide in on hover. */
.mega__go { margin-left: auto; align-self: center; color: var(--border-strong); }
.mega__go svg { width: 18px; height: 18px; }
.mega__link:hover .mega__go { color: var(--red-700); }

.mega__feature { display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: linear-gradient(150deg, var(--stockholm), #0b4d8a); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-5); position: relative; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.mega__feature::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(237,53,45,.55), transparent 70%); }
.mega__feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mega__feature-ico { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; position: relative; }
.mega__feature-ico svg { width: 22px; height: 22px; color: #fff; }
.mega__feature strong { font-family: var(--font-head); font-size: 1.15rem; color: #fff; position: relative; }
.mega__feature-txt { color: #D7E1EC; font-size: .88rem; position: relative; }
.mega__feature-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--pale-yellow); position: relative; }
.mega__feature-cta svg { width: 18px; height: 18px; }
@media (max-width: 1080px) { .megamenu__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } .mega__feature { display: none; } }

/* Translator + Plan Trip travel together as the right-hand group. */
.header__tools { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; margin-left: var(--sp-4); }
.header__cta { display: inline-flex; gap: var(--sp-2); align-items:center; flex:none; }
.iconbtn {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--border-strong);
  background: #fff; color: var(--stockholm); display: grid; place-items: center; cursor: pointer;
}
.iconbtn:hover { border-color: var(--stockholm); color: var(--red-700); }
.iconbtn svg { width: 22px; height: 22px; }
.m-acc__btn .caret { width: 16px; height: 16px; }

/* mobile toggle */
/* The nav collapses into the drawer later than it used to: the smaller nav type
   and wider container mean the full menu still fits comfortably on a tablet. */
.navtoggle { display: none; }
@media (max-width: 900px) {
  .mainnav, .header__cta { display: none; }
  /* The translator is deliberately NOT hidden here — it stays in the bar at
     every width, so .header__tools takes over pushing the group right. */
  .header__tools { margin-left: auto; }
  .navtoggle {
    display: inline-grid; place-items: center; margin-left: var(--sp-3);
    width: 46px; height: 46px; border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    background: #fff; color: var(--stockholm); cursor: pointer;
  }
  .navtoggle svg { width: 24px; height: 24px; }
  /* One tall bar is unnecessary once the nav collapses into the drawer. */
  .site-header__inner { min-height: 0; }
}

/* mobile drawer */
.mobilenav { position: fixed; inset: 0; z-index: 300; display: none; }
.mobilenav[data-open="true"] { display: block; }
.mobilenav__overlay { position: absolute; inset: 0; background: rgba(13,23,32,.55); }
.mobilenav__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 90vw);
  background: #fff; box-shadow: var(--shadow-lg); padding: var(--sp-5); overflow-y: auto;
}
.mobilenav__head { display:flex; align-items:center; justify-content: space-between; margin-bottom: var(--sp-4); }
.mobilenav__panel .btn { width: 100%; justify-content: center; margin-bottom: var(--sp-4); }
.m-acc { border-top: 1px solid var(--border); }
.m-acc__btn {
  width: 100%; display:flex; align-items:center; justify-content: space-between;
  background: transparent; border: 0; padding: 16px 4px; font-family: var(--font-head);
  font-weight: 600; font-size: 1.05rem; color: var(--stockholm); cursor: pointer;
}
.m-acc__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.m-acc__panel { display: none; padding: 0 4px 12px; }
.m-acc__panel[data-open="true"] { display: block; }
.m-acc__panel a { display: block; padding: 10px 8px; color: var(--stockholm); text-decoration: none; border-radius: var(--radius-sm); font-weight: 500; }
.m-acc__panel a:hover { background: var(--bg-alt); color: var(--red-700); }

/* ---------- Hero --------------------------------------------------------- */
/* RTA bus photography sits behind the hero and fades up into the solid blue of
   the site header, so the header and the image read as one surface.
   Swap --hero-photo (top of this file) for the client's official photograph. */
.hero { position: relative; background: var(--stockholm); color: #fff; overflow: hidden; isolation: isolate; }
.hero__photo {
  position: absolute; inset: 0; z-index: 0; display: block;
  background-image: var(--hero-photo);
  background-size: cover; background-position: 62% 62%; background-repeat: no-repeat;
}
/* Art direction: on wide screens the crop favours the right of the frame, where
   the bus sits, leaving the left clear for the headline. As the hero narrows
   the crop walks back toward the bus so it never slides out of frame, and a
   lighter file is fetched. */
@media (max-width: 920px) { .hero__photo { background-position: 58% 60%; } }
@media (max-width: 700px) {
  .hero__photo { background-image: var(--hero-photo-sm); background-position: 55% 58%; }
}
.hero::before {
  /* The fade. Two stacked scrims:
     1. vertical — solid Stockholm blue where the hero meets the site header,
        dissolving downward so the photograph emerges;
     2. horizontal — holds density on the left so the headline keeps well past
        AA contrast, then releases to near-clear on the right where the
        photograph carries the composition. */
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--stockholm) 0%, rgba(8,56,102,.92) 14%, rgba(8,56,102,.34) 56%, rgba(8,56,102,.20) 100%),
    linear-gradient(90deg, rgba(6,34,61,.92) 0%, rgba(6,34,61,.74) 30%, rgba(6,34,61,.24) 62%, rgba(6,34,61,0) 100%);
}
/* No extra bottom bleed: the photograph's own foreground already grounds the
   hero, and an added blue wash flattened it into a visible band. */
.hero__inner {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, clamp(340px, 34vw, 420px));
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(32px, 1.5rem + 3.5vw, 72px);
}
.hero__copy { min-width: 0; }
.hero__title { color: #fff; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); margin-bottom: var(--sp-3); }
.hero__title .accent { color: var(--pale-yellow); }
.hero__text { font-size: 1.05rem; color: #D7E1EC; max-width: 46ch; margin-bottom: 0; }
@media (max-width: 920px) { .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* Trip planner card + quick actions.
   Reviewers kept missing the quick-action buttons when they were flat text on a
   pale pill, so each one is now a full button: white fill, a 2px Stockholm
   outline and a labelled group heading. The selected action is solid Stockholm
   (8.6:1 on white), the rest sit at 11.9:1 — all well past AA. */
.tripcard { background: #fff; color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); }
.tripcard__eyebrow {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .75rem; color: var(--red-700); margin: 0 0 var(--sp-2);
}
.tripcard__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.tripcard__tab {
  flex: 1 1 30%; cursor: pointer; padding: 10px 8px; border-radius: var(--radius);
  background: #fff; color: var(--stockholm); border: 2px solid var(--stockholm);
  font-family: var(--font-head); font-weight: 700; font-size: .875rem;
  display: inline-flex; gap: 6px; align-items: center; justify-content: center;
  line-height: 1.15; min-height: 46px;
}
.tripcard__tab:hover { background: var(--bg-alt); border-color: var(--red-700); color: var(--red-700); }
.tripcard__tab[aria-selected="true"] {
  background: var(--stockholm); border-color: var(--stockholm); color: #fff;
  box-shadow: inset 0 -4px 0 var(--laser-red);
}
.tripcard__tab[aria-selected="true"]:hover { background: var(--stockholm-700); border-color: var(--stockholm-700); color: #fff; }
.tripcard__tab svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 400px) { .tripcard__tab { flex: 1 1 100%; } }
.tabpanel[hidden] { display: none; }

/* ---------- Forms -------------------------------------------------------- */
.field { margin-bottom: var(--sp-3); }
.field > label { display: block; font-family: var(--font-head); font-weight: 600; color: var(--stockholm); margin-bottom: 5px; font-size: .9rem; }
.field .req { color: var(--red-700); }
.field .hint { font-size: .85rem; color: var(--ink-muted); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--ink); background: #fff;
  border: 2px solid var(--border-strong); border-radius: var(--radius); padding: 10px 12px; min-height: 44px;
}
.textarea { min-height: 110px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--stockholm); }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--stockholm); }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--red-700); pointer-events: none; }
.input-icon .input { padding-left: 38px; }
.field-error { color: var(--red-800); font-weight: 600; font-size: .9rem; margin-top: 6px; display: none; }
.field[data-invalid="true"] .input { border-color: var(--red-800); }
.field[data-invalid="true"] .field-error { display: block; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
legend { font-family: var(--font-head); font-weight: 700; color: var(--stockholm); padding: 0; margin-bottom: var(--sp-2); }

/* ---------- Cards -------------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); height: 100%; }
.card--link { display: block; text-decoration: none; color: var(--ink); transition: transform .12s, box-shadow .12s, border-color .12s; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card__icon { width: 44px; height: 44px; border-radius: var(--radius); background: #FCE7E5; color: var(--red-700); display: grid; place-items: center; margin-bottom: var(--sp-3); }
.card__icon svg { width: 23px; height: 23px; }
.card h3 { color: var(--stockholm); margin-bottom: .3em; }
.card p { color: var(--ink-muted); margin: 0; font-size: .95rem; }
.card__more { display:inline-flex; align-items:center; gap:6px; margin-top: var(--sp-3); color: var(--red-700); font-family: var(--font-head); font-weight: 600; font-size: .9rem; }
.card__more svg { width: 16px; height: 16px; }

/* ---------- Service alert list (home + Service Alerts page) -------------- */
.alertlist { list-style:none; padding:0; margin:0; display:grid; gap: var(--sp-3); }
.alertlist__item {
  display:flex; gap: var(--sp-3); align-items:flex-start; margin:0; min-width: 0;
  background:#fff; border:1px solid var(--border); border-left: 5px solid var(--red-700);
  border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.alertlist__ico { flex:none; color: var(--red-700); }
.alertlist__ico svg { width: 24px; height: 24px; }
.alertlist__item b { display:block; font-family: var(--font-head); color: var(--stockholm); font-size:1rem; margin-bottom: 2px; }
.alertlist__item span span { color: var(--ink-muted); font-size: .92rem; }

.allclear {
  display:flex; gap: var(--sp-3); align-items:flex-start; margin:0;
  background:#fff; border:1px solid var(--border); border-left: 5px solid var(--success);
  border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.allclear__ico { flex:none; color: var(--success); }
.allclear__ico svg { width: 24px; height: 24px; }
.allclear b { font-family: var(--font-head); color: var(--stockholm); }

/* ---------- Social channels (Service Alerts page) ----------------------- */
.socialgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--sp-3); }
.sociallink {
  display:flex; align-items:center; gap: var(--sp-3); text-decoration:none; color: var(--ink); min-width: 0;
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s;
}
.sociallink:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.sociallink__ico { flex:none; width:40px; height:40px; border-radius:50%; background: var(--stockholm); color:#fff; display:grid; place-items:center; }
.sociallink__ico svg { width:20px; height:20px; }
.sociallink:hover .sociallink__ico { background: var(--red-700); }
.sociallink b { display:block; font-family: var(--font-head); color: var(--stockholm); }
.sociallink span span { font-size:.88rem; color: var(--ink-muted); }

/* ---------- Route cards (Routes & Schedules) ---------------------------- */
.routegrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--sp-4); }
.routecard {
  display:flex; flex-direction:column; gap: var(--sp-3);
  background:#fff; border:1px solid var(--border); border-top: 4px solid var(--laser-red);
  border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
}
.routecard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.routecard__head { display:flex; align-items:center; gap: var(--sp-3); min-width: 0; }
.routecard__num {
  flex:none; min-width: 54px; padding: 6px 10px; border-radius: var(--radius);
  background: var(--stockholm); color:#fff; text-align:center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; line-height: 1.15;
}
.routecard__name { margin:0; font-size: 1rem; color: var(--stockholm); min-width: 0; }
/* Route number, route name, brochure — nothing else on the card. */
.routecard__actions { margin-top:auto; display:flex; flex-direction:column; gap: var(--sp-3); align-items:flex-start; }
.routecard__actions .btn { padding: 11px 18px; min-height: 44px; font-size:.95rem; }
.routecard__actions .btn svg { width:18px; height:18px; }

/* ---------- Badges / chips ---------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .78rem; padding: 5px 12px; border-radius: var(--radius-pill); letter-spacing:.02em; }
.badge--ontime { background: var(--pale-yellow); color: #4a4500; }
.badge--ok { background: #DCF1E2; color: #145228; }
.badge--alert { background: #FCE0DE; color: var(--red-800); }
.badge--dot::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- System status — one block per route ------------------------- */
/* Green check = no interruptions · red warning triangle = service interruption.
   Colour is never the only signal: the icon shape and the status wording both
   carry the meaning too. */
.svclegend { display:flex; flex-wrap:wrap; gap: var(--sp-6); list-style:none; padding:0; margin: 0 0 var(--sp-6); font-size:.95rem; font-weight:600; color: var(--ink-muted); }
.svclegend li { display:flex; align-items:center; gap:10px; margin:0; }
.svclegend__ico { flex:none; display:grid; place-items:center; }
.svclegend__ico svg { width:22px; height:22px; }
.svclegend__ico--ok { color: var(--success); }
.svclegend__ico--alert { color: var(--red-700); }

.svcgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sp-3); }
.svc {
  display:flex; align-items:flex-start; gap: var(--sp-3); text-decoration:none; color: var(--ink);
  background:#fff; border:1px solid var(--border); border-left: 5px solid var(--success);
  border-radius: var(--radius); padding: var(--sp-4);
  box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease;
}
.svc--disruption { border-left-color: var(--red-700); }
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svc__state { flex:none; color: var(--success); }
.svc--disruption .svc__state { color: var(--red-700); }
.svc__state svg { width: 26px; height: 26px; }
.svc__body { display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.svc__route { font-family: var(--font-head); font-weight:700; font-size:1.05rem; color: var(--stockholm); line-height:1.2; }
.svc__name { font-size:.85rem; color: var(--ink-muted); }
.svc__status { font-family: var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.02em; margin-top: 3px; color: #145228; }
.svc--disruption .svc__status { color: var(--red-800); }
.svc__note { font-size:.8rem; color: var(--ink-muted); line-height:1.45; }

/* ---------- Alerts / advisory boxes ------------------------------------- */
.advisory { display:flex; gap: var(--sp-3); background: var(--pale-yellow); border-radius: var(--radius); padding: var(--sp-4); color: #3f3a00; }
.advisory svg { flex:none; width: 22px; height: 22px; color: #8a7a00; }
.advisory h4 { color: #4a4500; margin: 0 0 4px; }
.advisory p { margin: 0; }

.note { border-left: 5px solid var(--stockholm); background: var(--bg-alt); padding: var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- Page header / breadcrumbs ----------------------------------- */
.pagehead { background: var(--stockholm); color: #fff; position: relative; overflow: hidden; }
.pagehead::after { content:""; position:absolute; inset:0; opacity:.16; background-image: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.12) 38px 40px); }
.pagehead__inner { position: relative; z-index:2; padding-block: clamp(24px, 1rem + 2vw, 48px); }
.pagehead h1 { color:#fff; margin-bottom: .25em; }
.pagehead p { color:#CFDBE7; font-size: 1.02rem; max-width: 60ch; margin: 0; }

/* Photography treatment — the same blue-to-photo fade as the home hero,
   carried across the major pages. */
.pagehead--photo .pagehead__photo {
  position: absolute; inset: 0; z-index: 0; display: block;
  background-image: var(--hero-photo);
  background-size: cover; background-position: 60% 55%; background-repeat: no-repeat;
}
/* Must sit *after* the rule above — same specificity, so source order decides.
   Phones get the 1100px file here just as the home hero does. */
@media (max-width: 700px) {
  .pagehead--photo .pagehead__photo { background-image: var(--hero-photo-sm); background-position: 56% 52%; }
}
.pagehead--photo::after {
  /* Same two-scrim fade as the home hero, tuned for the shorter band: page
     headers sit tighter under the site header, so the blue holds a little
     longer before the photograph comes through. */
  z-index: 1; opacity: 1;
  background-image:
    linear-gradient(180deg, var(--stockholm) 0%, rgba(8,56,102,.94) 20%, rgba(8,56,102,.56) 100%),
    linear-gradient(90deg, rgba(6,34,61,.92) 0%, rgba(6,34,61,.62) 46%, rgba(6,34,61,.14) 100%);
}

/* Section logo pinned to the right of the blue header (e.g. RTA Mobility).
   The page title stays live text beside it. */
.pagehead__inner--withlogo { display: flex; align-items: center; gap: var(--sp-8); justify-content: space-between; }
.pagehead__copy { min-width: 0; }
.pagehead__logo {
  flex: none; width: clamp(96px, 12vw, 148px); height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.28));
}
@media (max-width: 720px) {
  .pagehead__inner--withlogo { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-5); }
  .pagehead__logo { width: 92px; }
}
.breadcrumbs { font-size: .9rem; margin-bottom: var(--sp-4); }
.breadcrumbs ol { list-style: none; display:flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumbs li { display:flex; gap: 8px; align-items:center; margin:0; }
.breadcrumbs a { color: #CFE0F1; text-decoration: none; }
.breadcrumbs a:hover { color:#fff; text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; font-weight: 600; }
.breadcrumbs li::after { content: "/"; color: rgba(255,255,255,.45); }
.breadcrumbs li:last-child::after { content: ""; }

/* ---------- Content prose ------------------------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.5em; }
.prose h3 { margin-top: 1.3em; color: var(--stockholm); }
.prose ul li::marker { color: var(--red-700); }
/* min-width:0 keeps a wide child (the 480px-minimum data tables) inside its
   column and scrolling in its own .table-wrap, instead of pushing the whole
   page sideways on narrow screens. Grid items default to min-width:auto, which
   is what let the table win the size negotiation and drag the page with it. */
.layout-2col { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 300px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.layout-2col > * { min-width: 0; }
@media (max-width: 900px) { .layout-2col { grid-template-columns: minmax(0, 1fr); } }
.sidecard { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 12px); }
.sidecard h3 { font-size: 1.1rem; }
.sidecard ul { list-style: none; padding: 0; margin: 0; }
.sidecard li { margin: 0; border-top: 1px solid var(--border); }
.sidecard li:first-child { border-top: 0; }
.sidecard a { display:block; padding: 9px 0; text-decoration: none; color: var(--stockholm); font-weight: 600; font-family: var(--font-head); font-size: .95rem; }
.sidecard a:hover { color: var(--red-700); }
/* A .btn inside a sidecard has to win back button layout: the generic
   `.sidecard a` rule above is more specific than `.btn`, so without this the
   pill loses its horizontal padding and centring and its icon drops out of
   alignment (seen on the Tap & Go "Get the Transit app" button). */
.sidecard .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px 18px; }
.sidecard .btn--block { display: flex; width: 100%; }
.sidecard .btn--primary, .sidecard .btn--primary:hover { color: #fff; }
.sidecard .btn--outline:hover { color: #fff; }
/* Sticky only while there is a column beside it to stick against. */
@media (max-width: 900px) { .sidecard { position: static; } }

/* ---------- Tables ------------------------------------------------------- */
/* The table is allowed to be wider than the screen — but only inside this
   wrapper, which scrolls on its own. max-width:100% is what stops it handing
   its width back up to the page. */
.table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
table.data { border-collapse: collapse; width: 100%; min-width: 440px; }
table.data caption { text-align: left; font-family: var(--font-head); font-weight:700; color: var(--stockholm); padding: var(--sp-3) var(--sp-4); }
table.data th, table.data td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: .95rem; }
table.data thead th { background: var(--stockholm); color: #fff; font-family: var(--font-head); }
table.data tbody tr:nth-child(even) { background: var(--bg-alt); }

/* ---------- Accordion (FAQ) --------------------------------------------- */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.accordion__item + .accordion__item { border-top: 1px solid var(--border); }
.accordion__btn {
  width: 100%; text-align: left; background: #fff; border: 0; cursor: pointer; padding: 14px 16px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--stockholm);
  display:flex; align-items:center; justify-content: space-between; gap: var(--sp-3);
}
.accordion__btn:hover { background: var(--bg-alt); }
.accordion__btn .caret { flex:none; width: 18px; height: 18px; color: var(--red-700); }
.accordion__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.accordion__panel { padding: 14px 16px; display: none; }
.accordion__panel[data-open="true"] { display: block; }
/* Mirror the question row's padding: the answer keeps the same 14/16 breathing
   room on every side, so it never sits flush against the question or the rule. */
.accordion__panel > :first-child { margin-top: 0; }
.accordion__panel > :last-child { margin-bottom: 0; }

/* ---------- Ride Smarter — Transit app ---------------------------------- */
.transit { display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 56px); align-items:center; }
@media (max-width: 900px) { .transit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }
.transit__copy h2 { margin-bottom: .3em; }
.transit__list { list-style:none; padding:0; margin: var(--sp-6) 0; display:grid; gap: var(--sp-4); }
.transit__list li { display:flex; align-items:flex-start; gap: var(--sp-3); margin:0; }
.transit__list svg { flex:none; width:24px; height:24px; color: var(--red-700); margin-top: 2px; }
.transit__list b { font-family: var(--font-head); color: var(--stockholm); }
.transit__cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); }

.transit__brandcard {
  text-align:center; background:#fff; border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); box-shadow: var(--shadow);
}
.transit__logo { width:96px; height:96px; border-radius: 22px; display:block; margin: 0 auto var(--sp-4); }
.transit__wordmark { font-family: var(--font-head); font-weight:700; font-size:1.6rem; color: var(--charcoal); margin:0; letter-spacing:-.01em; }
.transit__tag { color: var(--ink-muted); margin: 4px 0 var(--sp-5); }
.transit__partner {
  margin:0; padding-top: var(--sp-4); border-top:1px solid var(--border);
  font-family: var(--font-head); font-weight:600; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase; color: var(--stockholm);
}

/* ---------- Mobility page ------------------------------------------------ */
/* Inline iconography here was oversized relative to the copy — scaled back so
   the text leads and the icons support it. */
.page--mobility .advisory svg { width: 20px; height: 20px; }
.page--mobility .sidecard svg { width: 17px; height: 17px; }
.page--mobility .sidecard a { display:flex; align-items:center; gap: 9px; }
.page--mobility .sidecard .btn svg { width: 18px; height: 18px; }

/* ---------- Administrative office hours (Holiday Schedule) --------------- */
.officehours {
  display:flex; gap: var(--sp-4); align-items:flex-start;
  background:#fff; border:1px solid var(--border); border-left: 5px solid var(--stockholm);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.officehours__ico { flex:none; width:46px; height:46px; border-radius: var(--radius); background:#E7EEF6; color: var(--stockholm); display:grid; place-items:center; }
.officehours__ico svg { width:24px; height:24px; }
.officehours__body { min-width:0; }
.officehours h2 { margin-bottom: .4em; }
.officehours__time { display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px var(--sp-4); margin: 0 0 var(--sp-3); }
.officehours__time b { font-family: var(--font-head); font-weight:700; font-size:1rem; color: var(--stockholm); }
.officehours__time span { font-family: var(--font-head); font-weight:700; font-size:1.2rem; color: var(--red-700); }
.officehours__note { margin:0; color: var(--ink-muted); max-width: 70ch; }
@media (max-width: 560px) { .officehours { flex-direction: column; gap: var(--sp-4); } }

/* ---------- Stat blocks -------------------------------------------------- */
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--sp-5); }
.stat { text-align:center; min-width: 0; }
.stat b { display:block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); color: var(--laser-red); line-height:1.05; }
.stat span { color: var(--ink-muted); font-weight:600; font-size: .92rem; }
.section--blue .stat span, .section--dark .stat span { color: #C9D3DC; }

/* ---------- CTA band ----------------------------------------------------- */

/* ---------- Footer ------------------------------------------------------- */
/* Two bands with a shared rhythm: the identity band (badge · tagline · contact)
   sits above an evenly-weighted link grid, separated by a hairline rule. Every
   heading shares one baseline and every list uses the same 8px step, so the
   columns read as a set instead of three ragged stacks of different heights.
   Vertical padding was cut from 64px to 48px to close the empty gap the client
   flagged. */
.site-footer { background: var(--frosted-black); color: #B9C2CB; }
.site-footer a { color: #CDD5DD; text-decoration: none; }
.site-footer a:hover { color:#fff; text-decoration: underline; }
.footer__top { padding-block: var(--sp-12) var(--sp-10); }

.footer__identity {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-6) var(--sp-8); align-items: start;
  padding-bottom: var(--sp-8); border-bottom: 1px solid #25313c;
}
.footer__identity .brand { align-self: center; }
.footer__brandcopy { min-width: 0; }
.footer__tagline { margin: 0 0 var(--sp-2); }
.footer__blurb { color:#9AA6B1; margin: 0; max-width: 46ch; }

.footer__contact { display:grid; gap: 10px; font-style: normal; min-width: 250px; }
.footer__contact div { display:flex; gap: 10px; align-items:flex-start; }
.footer__contact svg { flex:none; width: 20px; height: 20px; color: var(--laser-red); margin-top: 2px; }

.footer__social { display:flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2a3742; display:grid; place-items:center; }
.footer__social a:hover { background:#fff; }
.footer__social svg { width: 19px; height: 19px; color:#CDD5DD; }
.footer__social a:hover svg { color: var(--frosted-black); }

.footer__links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8); padding-top: var(--sp-8);
}
.footer__col h3 { color:#fff; font-size: .95rem; text-transform: uppercase; letter-spacing:.06em; margin: 0 0 var(--sp-4); }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin: 0 0 8px; }
.footer__col li:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .footer__identity { grid-template-columns: auto minmax(0, 1fr); }
  .footer__contact { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer__identity { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer__identity .brand { align-self: start; }
  .footer__links { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 480px) { .footer__links { grid-template-columns: 1fr; } }

.footer__bottom { border-top: 1px solid #25313c; padding-block: var(--sp-5); display:flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items:center; justify-content: space-between; font-size: .85rem; }
.footer__legal { display:flex; flex-wrap:wrap; gap: var(--sp-3) var(--sp-5); list-style: none; padding:0; margin:0; }
.footer__legal li { margin:0; }

/* ---------- Back to top -------------------------------------------------- */
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 150; width: 44px; height: 44px;
  border-radius: 50%; background: var(--stockholm); color:#fff; border: 0; cursor: pointer;
  display: none; place-items: center; box-shadow: var(--shadow);
}
.totop[data-show="true"] { display: grid; }
.totop:hover { background: var(--red-700); }
.totop svg { width: 21px; height: 21px; }

/* ---------- Header search + mobile call button (both opt-in) -------------- */
.header__search {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; color: var(--stockholm); border: 1px solid var(--border);
}
.header__search:hover { color: var(--red-700); border-color: var(--stockholm); }
.header__search svg { width: 20px; height: 20px; }
.callfab { display: none; }
@media (max-width: 900px) {
  .callfab {
    position: fixed; left: 16px; bottom: 16px; z-index: 150; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--red-700); color: #fff;
    font-family: var(--font-head); font-weight: 600; text-decoration: none; box-shadow: var(--shadow);
  }
  .callfab:hover, .callfab:focus-visible { background: var(--red-800); color: #fff; }
  .callfab svg { width: 20px; height: 20px; }
}

/* ---------- Site search page ---------------------------------------------- */
.searchbar { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.searchbar .input { flex: 1 1 260px; }
.searchstatus { font-weight: 500; margin-bottom: var(--sp-4); }
.searchresults { list-style: none; padding: 0; margin: 0; }
.searchresult { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); margin: 0; }
.searchresult a { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.searchresult p { margin: 6px 0 0; color: var(--ink-muted); }

/* ---------- Utilities ---------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flow > * + * { margin-top: var(--sp-4); }
.pill-list { list-style:none; display:flex; flex-wrap:wrap; gap: var(--sp-2); padding:0; margin:0; }
.pill-list li { margin:0; }
.tag { background: var(--bg-silver); color: var(--charcoal); padding: 5px 12px; border-radius: var(--radius-pill); font-size:.85rem; font-weight:600; }
.divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--sp-8); }

/* ==========================================================================
   Motion & micro-interactions
   ========================================================================== */

/* Scroll-reveal (only when JS is active, so no-JS shows everything) */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .65s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Hero entrance */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes popIn  { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
.hero__title     { animation: fadeUp .7s both .05s; }
.hero__text      { animation: fadeUp .7s both .18s; }
.tripcard        { animation: popIn .8s both .22s; }

/* Sticky header: the shadow deepens once the page is scrolled and nothing else
   moves. The header used to condense to a 72px row while the badge stayed at
   96px, which ate the space above and below the logo — the padding is now fixed
   on .site-header__inner, so it is identical scrolled or not. */
.site-header { transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(13,23,32,.16); }
/* Logo is intentionally static — no transform, transition or animation. */

/* Nav hover is the tinted pill defined above — the sliding underline that used
   to run alongside it competed with the current-page rule and has been dropped. */

/* Buttons: lift on hover. Icons never move — the trailing-icon nudge was
   removed with the rest of the icon animation (client review). */
.btn { transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s; }
.btn--primary:hover, .btn--secondary:hover, .btn--lg:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.iconbtn { transition: border-color .15s, color .15s; }

/* Cards: the icon tile recolours on hover but does not scale or rotate. */
.card__icon { transition: background .25s ease, color .25s ease; }
.card--link:hover .card__icon { background: var(--red-700); color: #fff; }

/* Tab panels fade in */
.tabpanel { animation: tabFade .3s ease both; }
@keyframes tabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Accordion + mega panel content reveal */
.accordion__panel[data-open="true"] { animation: tabFade .25s ease both; }

/* Mobile drawer slide-in */
.mobilenav__panel { animation: drawerIn .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.mobilenav__overlay { animation: tabFade .3s ease both; }

/* Back-to-top: colour change only — the icon itself is static. */
.totop { transition: background .18s ease; }

/* Respect reduced-motion: disable decorative looping + reveal hiding */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  .hero__title, .hero__text, .tripcard, .tabpanel, .mobilenav__panel { animation: none !important; }
}

/* ---------- "Driven" brand accents (hero + footer only) ----------------- */
.footer__tagline { margin: 0 0 var(--sp-2); font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: #E9EEF3; }
.footer__tagline span { font-style: italic; font-weight: 800; color: var(--laser-red); text-transform: uppercase; letter-spacing: .04em; }