/* ========================
   LAYOUT - Page structure (M3 tokens)
   ======================== */

/* Site wrapper - single column, nav lives in the header */
.site {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Header: the charcoal top app bar on every page. header.ejs puts mk-section--dark on it, so this
   background and the text resolve to the dark colour roles (variables.css); the portal shell overrides
   its geometry further down (.site--portal) */
.header {
  background-color: var(--md-surface);
  box-shadow: var(--md-elevation-2);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom-left-radius: var(--md-shape-large);
  border-bottom-right-radius: var(--md-shape-large);
}

/* The header menus' panels (.navbar__panel, components.css) position against .header so they span
   the bar's full width, rounded corners included: nothing between the two may be positioned */
.header .navbar {
  position: static;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
}

/* Capped and centred on the desktop tier; components.css lifts the cap below 1280px so the
   collapsed row spans the header and the hamburger sits at the row's left padding */
.header .navbar__inner {
  position: static;
  max-width: var(--md-layout-max-width);
  margin: 0 auto;
}

/* Main content */
.main {
  width: 100%;
  max-width: var(--md-layout-max-width);
  margin: 0 auto;
  padding: var(--md-spacing-10) var(--md-spacing-6);
}

/* ---- Portal app shell (layout.ejs .site--portal: client /portal/* and end-user /parkhere/*) ----
   Charcoal chrome around one light panel: the sticky bar across the top, from 768px the sticky rail down
   the left (both carry mk-section--dark: the dark colour roles on the element, painted by marketing.css),
   the canvas the same charcoal, and <main> a rounded light panel inset by one gutter at the sides and the
   bottom (the bar owns the gap above it: --md-portal-bar-height). Bar,
   rail and gutters are one colour, so the panel's rounded top-left corner reads as the radiused
   intersection with no seam and no mask. The document scrolls; the chrome stays. Mobile first, min-width
   only: no fractional-width gap. From 768px the rail column is the rail width plus the gutter: the rail
   carries the gutter as padding on both sides, so its rows sit centred in the charcoal column between the
   viewport edge and the panel, and its right padding is the panel's left gutter (the panel drops its own
   left margin there). The rail's own rules live in components.css (.nav-rail). */
.site--portal {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;                     /* the panel fills the viewport on short pages */
  background-color: var(--md-inverse-surface);      /* the brand charcoal in the light theme */
}

.site--portal > .header {
  grid-column: 1 / -1;                              /* explicit: auto-placement would give the bar column 1 only */
  grid-row: 1;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The row spans the bar at every width and is the whole charcoal band above the panel (the 40px buttons
   with one spacing of air plus the gutter, --md-portal-bar-height), so the logo and the buttons are centred in what the
   eye reads as the bar; its side padding is the gutter, so the buttons end on the panel's right edge */
.site--portal > .header .navbar__inner {
  max-width: none;
  gap: var(--md-spacing-2);
  padding: 0 var(--md-portal-gutter);
  min-height: var(--md-portal-bar-height);
}

/* The panel. A grid item with width: auto fills its area minus the margins (.main's width: 100% would
   overflow by two gutters). On wide panels the content stays a centred column within the layout max
   width (percentages resolve against the grid area, which is one gutter wider than the panel, hence the
   addition). Block padding keeps .main's */
.site--portal > .main {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0 var(--md-portal-gutter) var(--md-portal-gutter);   /* no top margin: the bar owns the gap above the panel */
  background-color: var(--md-surface);
  border-radius: var(--md-shape-large);
  padding-inline: max(var(--md-spacing-6), calc((100% - var(--md-layout-max-width)) / 2 + var(--md-portal-gutter)));
}

/* Charcoal behind the rubber-band overscroll (base.css paints body with the light surface) */
.body--portal {
  background-color: var(--md-inverse-surface);
}

@media (min-width: 768px) {
  .site--portal {
    grid-template-columns: calc(var(--md-nav-rail-width) + var(--md-portal-gutter)) minmax(0, 1fr);
  }

  .site--portal > .main {
    grid-column: 2;
    margin-left: 0;                                 /* the rail's right padding is this gutter */
  }

  /* The P mark centred on the rail column (rail width + gutter), the line the icon pills are centred on */
  .site--portal > .header .navbar__inner {
    padding-left: calc((var(--md-nav-rail-width) + var(--md-portal-gutter) - var(--md-navbar-logo-height)) / 2);
  }
}

@media (min-width: 1280px) {
  .site--portal {
    grid-template-columns: calc(var(--md-nav-rail-width-expanded) + var(--md-portal-gutter)) minmax(0, 1fr);
  }

  /* The wordmark's left edge on the rows' icon column: the rail's padding plus the row padding */
  .site--portal > .header .navbar__inner {
    padding-left: calc(var(--md-portal-gutter) + var(--md-spacing-4));
  }
}

/* ---- The assistant's dock as the shell's third column (partials/assistant-dock, components.css
   .assistant-dock) ----
   From 1600px (M3's extra-large window, --md-breakpoint-desktop-xl) the dock is a column beside the
   content panel and pushes it left, the AWS console's way mirrored: the track is 0 while closed and
   the dock width while open (body--assistant-open: rendered by the server from the ph_assistant_open
   cookie, toggled by assistant-dock.js), and it animates - three tracks in both states so
   grid-template-columns interpolates, the drawer's 0fr -> 1fr idiom; head.ejs's no-transitions class
   keeps a page rendered open from animating on load. The panel keeps its right-margin gutter as the
   gap to the dock, so no rule on .main depends on the state and nothing jumps; its padding-inline
   formula still centres the content in the narrower area (both paddings equal). The transition lives
   in this tier only, where the rail column is constant (a resize across 1280px never animates the
   rail). Below 1600px the dock is a sheet over the page (components.css) and the grid keeps two
   tracks; the end-user portal shares .site--portal and never carries the class: a 0px third track
   beside minmax(0, 1fr) is pixel-identical to today. */
@media (min-width: 1600px) {
  .site--portal {
    grid-template-columns: calc(var(--md-nav-rail-width-expanded) + var(--md-portal-gutter)) minmax(0, 1fr) 0px;
    transition: grid-template-columns var(--md-motion-duration-medium) var(--md-motion-easing-accelerate);
  }

  .body--assistant-open .site--portal {
    grid-template-columns: calc(var(--md-nav-rail-width-expanded) + var(--md-portal-gutter)) minmax(0, 1fr) var(--md-portal-dock-width);
    transition: grid-template-columns var(--md-motion-duration-long) var(--md-motion-easing-emphasized);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site--portal,
  .body--assistant-open .site--portal {
    transition: none;
  }
}

/* Section */
.section {
  margin-bottom: var(--md-spacing-16);
}

/* Hero background wrapper */
.hero-bg-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--md-spacing-16);
}

/* Full-viewport hero (landing page only) */
.hero-bg-wrapper--full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
  margin-bottom: 0;
  margin-top: calc(-1 * var(--md-spacing-12));
  padding-top: 0;
  height: 100vh;
}

.section--hero-full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  /* The copy keeps above the camera timeline (96 px up the wrapper, 36 px tall, 12 px clear:
     144) and, while the site's consent banner is shown (--ph-consent-h, consent-banner.js),
     above the bar as the banner lifts it (12 px over the banner then: 124 + the strip). The top
     padding keeps the copy's centre where it was without the banner and gives way to it */
  padding: max(0px, calc(64px - var(--ph-consent-h, 0px))) var(--md-spacing-6) max(144px, calc(124px + var(--ph-consent-h, 0px)));
  transition: padding-bottom 0.3s ease;
  max-width: var(--md-layout-max-width);
  margin: 0 auto;
  /* The section lies over the whole hero but holds its copy on the left: clicks on its empty
     part go through to the city's panels (the camera timeline) */
  pointer-events: none;
}

.hero__content {
  max-width: 700px;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s;
}

/* The hero's copy (badge, headline, lead, buttons) shows for the camera's overview only:
   city-grid.js marks the wrapper with the shot the camera is on, 0 being the overview. Once
   faded the copy is out of the tab order and the accessibility tree too (visibility, after the
   fade; back at once). The edge fades stay for every shot (the panes stand above them) */
.hero-bg-wrapper[data-camera-shot]:not([data-camera-shot="0"]) .hero__content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* The metered scene's phone (city-grid.js dressMeteredPhone): the page's journey with the pass
   activated in the waiting scene's slot, which stays up until the logo's scene (no waiting, no
   Approved). The play class and .cg-metered are on the same element, the journey's root, so the
   two are one compound selector (a descendant chain matched nothing, and the phone went blank
   for three seconds before the logo). Under reduced motion it is the frame shown, as the
   approved pass is on the page's phone: its children drawn out at (0,3,0), over the partial's
   own child rule */
.cg-metered.journey-anim--play .journey-anim__scene--6 {
  animation-name: cg-journey-hold;
}

@keyframes cg-journey-hold {
  0%, 54% { opacity: 0; transform: translateY(8px); }
  56%, 74% { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .cg-metered .journey-anim__scene--6,
  .cg-metered .journey-anim__scene--6 > :not(.journey-anim__replay) {
    opacity: 1;
    transform: none;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--md-spacing-2);
  padding: var(--md-spacing-1) var(--md-spacing-3);
  border-radius: var(--md-shape-full);
  background-color: var(--md-surface-container-lowest);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  margin-bottom: var(--md-spacing-6);
}

.hero__badge .material-symbols-outlined {
  font-size: 14px;
  color: var(--md-primary);
}

.hero__badge span:last-child {
  font-size: var(--md-label-small-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-on-surface-variant);
}

.hero__headline {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--md-display-large-tracking);
  margin-bottom: var(--md-spacing-8);
}

.hero__accent {
  color: var(--md-primary);
  font-weight: 700;
  text-shadow: 0 0 20px var(--md-primary-glow);
}

[data-theme="dark"] .hero__headline {
  color: var(--md-primary);
}

/* Scoped under .section--hero-full so the generic .hero__subtitle in
   components.css (loaded later) can't shrink the landing hero lead */
.section--hero-full .hero__subtitle {
  font-size: var(--md-title-large-size);
  line-height: var(--md-title-large-line);
  color: var(--md-on-surface-variant);
  max-width: 550px;
  margin-bottom: var(--md-spacing-10);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-spacing-4);
}

.hero__actions .btn--outlined {
  background-color: var(--md-surface-container-lowest);
}

[data-theme="light"] .hero__actions .btn--outlined {
  color: var(--md-on-surface);
  border-color: var(--md-outline-variant);
}

[data-theme="light"] .hero__actions .btn--outlined:hover {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-color: var(--md-primary);
}

/* City Grid Background Animation: the ground (roads, blocks, car parks and traffic) is drawn on
   the ground canvas in screen space through the camera, and the buildings on the 3D canvas
   after it, so both stay sharp however close the camera comes (city-grid.js puts both first in
   #city-grid-render, under the fades) */
.city-grid-bg {
  position: absolute;
  inset: -20% 0 0 0;
  z-index: 0;
  overflow: hidden;
  /* Lets the engine skip the hero (both canvases) when scrolled past. */
  contain: layout paint;
  content-visibility: auto;
}

/* The ground canvas (city-grid.js sizes it to the hero) */
.cg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* The camera timeline (city-timeline.js): the stops along a line, bottom left, a white panel
   off the hero's bottom strip (96 px up: the hero is a full viewport tall and starts under the
   header, so its last strip is below the fold), lifted by the strip the site's consent banner
   takes while that is shown (--ph-consent-h, the site's consent-banner.js). The stops are
   buttons with their names on view (on a narrow screen the current one's alone, beside the
   dots) of a 24 px target at least, 36 on a phone, the current one lit; the panel holds
   nothing else (no button of its own). Whatever the panel's height, city-view.js frameBox()
   keeps the panes above it */
.cg-timeline {
  position: absolute;
  left: var(--md-spacing-6);
  /* 96 px up the wrapper (which ends 64 px below the fold: 32 px above it), or 12 px above the
     consent banner while that is shown */
  bottom: max(var(--md-spacing-24), calc(76px + var(--ph-consent-h, 0px)));
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-spacing-2) var(--md-spacing-4);
  max-width: calc(100% - 2 * var(--md-spacing-6));
  padding: var(--md-spacing-1) var(--md-spacing-3);
  border-radius: var(--md-shape-large);
  background: var(--md-surface-container-lowest);
  box-shadow: var(--md-elevation-2);
  font-size: var(--md-label-large-size);
  line-height: var(--md-label-large-line);
  color: var(--md-on-surface);
}

.cg-timeline__caption,
.cg-timeline__current {
  color: var(--md-on-surface-variant);
  font-weight: var(--md-label-large-weight);
  white-space: nowrap;
}

.cg-timeline__current {
  display: none;
  color: var(--md-on-surface);
  font-weight: var(--md-weight-bold);
}

.cg-timeline__stops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--md-spacing-1);
}

/* Tucked away (city-timeline.js: a phone at the overview with the consent banner up and no room
   for the copy's buttons above the bar) */
.cg-timeline--tucked {
  display: none;
}

.cg-timeline__line {
  width: var(--md-spacing-4);
  height: 2px;
  flex: none;
  background: var(--md-outline-variant);
}

.cg-stop {
  display: inline-flex;
  align-items: center;
  gap: var(--md-spacing-2);
  min-height: 24px;
  padding: var(--md-spacing-1) var(--md-spacing-2);
  border: 0;
  border-radius: var(--md-shape-full);
  background: none;
  font: inherit;
  font-weight: var(--md-label-large-weight);
  color: var(--md-on-surface-variant);
  cursor: pointer;
}

.cg-stop:hover {
  background: var(--md-surface-container-low);
}

.cg-stop:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.cg-stop.is-on {
  color: var(--md-on-surface);
  font-weight: var(--md-weight-bold);
}

/* The dots are the control: the ink of the outline (4.2:1 on white), a transparent border for
   forced colours, where backgrounds are dropped */
.cg-stop__dot {
  width: var(--md-spacing-3);
  height: var(--md-spacing-3);
  flex: none;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--md-outline);
}

.cg-stop.is-on .cg-stop__dot {
  background: var(--md-primary);
}

.cg-stop__label {
  white-space: nowrap;
}

@media (forced-colors: active) {
  .cg-stop__dot {
    border-color: ButtonText;
  }

  .cg-stop.is-on .cg-stop__dot {
    background: Highlight;
    border-color: Highlight;
  }
}

@media (pointer: coarse) {
  .cg-stop {
    min-height: 40px;
  }
}

/* Edge fade overlays */
.cg-edge-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}

.cg-fade-top,
.cg-fade-bottom,
.cg-fade-left,
.cg-fade-right {
  position: absolute;
  left: 0;
  right: 0;
}

.cg-fade-top {
  top: 0;
  height: var(--ft, 50%);
  background: linear-gradient(to bottom,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 0%,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 50%,
    transparent 100%
  );
}

.cg-fade-bottom {
  bottom: 0;
  height: var(--fb, 30%);
  background: linear-gradient(to top,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 0%,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 30%,
    transparent 100%
  );
}

.cg-fade-left {
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: var(--fl, 30%);
  background: linear-gradient(to right,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 0%,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 30%,
    transparent 100%
  );
}

.cg-fade-right {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: var(--fr, 30%);
  background: linear-gradient(to left,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 0%,
    rgba(var(--md-surface-rgb, 30,30,30), var(--fade-intensity, 1)) 30%,
    transparent 100%
  );
}

/* On a phone the top fade stays as the desktop has it (the city's far edge dissolves into it
   under the header) at the overview and at the page stops (Portals, Numbers: the page stands
   above the fades). The two scene stops dock a phone and lay their scene in the top of the hero
   (city-grid.js lays the panes out for a narrow screen); there the fade is shortened so it hazes
   the top of the scene without washing it out. The render element reaches a fifth of the hero
   above it, so the fade's solid half lies under the header and only its gradient reaches the
   scene: 28% runs out about 110 px below the header on a 390 x 844 phone (18% would end under
   the header: no fog at all, which the user saw). The wrapper says whether the stop docks a phone
   (data-camera-dock, set by city-camera.js tellShot); the change eases as the camera moves */
@media (max-width: 759px) {
  /* The hero is the small viewport on a phone (the toolbar on screen), so the timeline is on
     screen at load and the browser's toolbar coming and going moves nothing (the frame is
     measured from the wrapper, city-view.js frameBox); the copy's section matches */
  .hero-bg-wrapper--full {
    height: 100vh;
    height: 100svh;
  }

  /* The copy keeps above the bar (72 px up the wrapper, which ends 56 px below the fold on a
     phone, so 16 px above it; 44 px tall; 12 px clear) and above the consent banner; with the
     bar tucked (data-cg-tucked, city-timeline.js) above the banner alone. The site's
     responsive.css sets the other paddings under 480 px and leaves this one here */
  .section--hero-full {
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: calc(128px + var(--ph-consent-h, 0px));
  }

  .hero-bg-wrapper[data-cg-tucked] .section--hero-full {
    padding-bottom: calc(64px + var(--ph-consent-h, 0px));
  }

  /* The stops are their dots, 36 px targets, and the current one is named beside them; the bar
     sits 16 px above the fold (the wrapper ends 56 px below it) and above the banner */
  .cg-timeline {
    bottom: calc(72px + var(--ph-consent-h, 0px));
    gap: var(--md-spacing-2);
  }

  .cg-timeline__caption,
  .cg-stop__label {
    display: none;
  }

  .cg-timeline__current {
    display: inline;
  }

  .cg-timeline__line {
    width: var(--md-spacing-1);
  }

  .cg-stop {
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
    padding: 0;
  }

  .cg-fade-top {
    transition: height 0.6s ease;
  }
  .hero-bg-wrapper[data-camera-dock] .cg-fade-top {
    height: 28%;
  }
  .cg-fade-bottom {
    height: 14%;
  }
  .cg-fade-left,
  .cg-fade-right {
    width: 10%;
  }
}

.section__title {
  margin-bottom: var(--md-spacing-8);
}

/* Footer */
.footer {
  background-color: var(--md-surface);
  padding: var(--md-spacing-10) var(--md-spacing-6) var(--md-spacing-6);
  border-top: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-top-left-radius: var(--md-shape-large);
  border-top-right-radius: var(--md-shape-large);
}

.footer__inner {
  max-width: var(--md-layout-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--md-spacing-10);
  align-items: start;
  padding-bottom: var(--md-spacing-8);
}

.footer__brand {
  max-width: var(--md-component-width-small);
}

.footer__tagline {
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  color: var(--md-on-surface-variant);
  margin-top: var(--md-spacing-4);
  margin-bottom: 0;
}

.footer__contact {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-2);
  margin-top: var(--md-spacing-4);
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.footer__contact:hover {
  color: var(--md-primary);
}

.footer__contact .material-symbols-outlined {
  font-size: var(--md-icon-size-extra-small);
  color: var(--md-primary);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3);
}

.footer__col-title {
  font-size: var(--md-label-large-size);
  line-height: var(--md-label-large-line);
  font-weight: var(--md-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-on-surface);
  margin-bottom: var(--md-spacing-1);
}

/* Wrappers flatten away on desktop so the columns sit directly in the grid */
.footer__cols,
.footer__cols-inner {
  display: contents;
}

.footer__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--md-icon-button-size);
  height: var(--md-icon-button-size);
  background: none;
  border: none;
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface-variant);
  cursor: pointer;
}

.footer__chevron {
  font-size: var(--md-icon-size-medium);
  transition: transform var(--md-motion-duration-medium) var(--md-motion-easing-standard);
}

.footer--expanded .footer__chevron {
  transform: rotate(180deg);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
}

.footer__logo-img {
  height: 32px;
  width: auto;
}

.footer__logo-light {
  display: none;
}

.footer__logo-dark {
  display: block;
}

[data-theme="light"] .footer__logo-light {
  display: block;
}

[data-theme="light"] .footer__logo-dark {
  display: none;
}

.footer__link {
  color: var(--md-on-surface);
  text-decoration: none;
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  transition: color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.footer__link:hover {
  color: var(--md-primary);
}

.footer__bottom {
  max-width: var(--md-layout-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-spacing-4);
  flex-wrap: wrap;
  border-top: var(--md-divider-thickness) solid var(--md-outline-variant);
  padding-top: var(--md-spacing-6);
}

.footer__copyright {
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-medium-size);
  margin: 0;
}

.footer__trust {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-2);
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-medium-size);
  margin: 0;
}

.footer__trust .material-symbols-outlined {
  font-size: var(--md-icon-size-extra-small);
  color: var(--md-primary);
}

/* Footer responsive - collapsed to brand + single chevron on mobile */
@media (max-width: 767px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
  }

  .footer__brand {
    padding-right: var(--md-spacing-12);
  }

  .footer__toggle {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
  }

  .footer__cols {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--md-motion-duration-medium) var(--md-motion-easing-standard);
  }

  .footer__cols-inner {
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-6);
    overflow: hidden;
    min-height: 0;
    padding-top: var(--md-spacing-6);
  }

  .footer--expanded .footer__cols {
    grid-template-rows: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Public pages only (the portal shell renders no site footer: its rail foot carries the links).
   Hidden on mobile where the nav drawer carries the contact info instead; 768px is the historical
   hamburger breakpoint (the header now switches to the drawer below 1280px; footer hiding
   deliberately stays at 768px) */
@media (max-width: 768px) {
  .footer--hide-mobile {
    display: none;
  }
}