/**
 * Responsive (viewport) overrides — single place for max-width breakpoints.
 * Load after index.css (and after about.html’s inline page styles) so these win at equal specificity.
 * Accessibility media (forced-colors, prefers-reduced-motion) stay in index.css.
 */

@media (max-width: 1100px) {
  .hero-copy {
    width: 72%;
    max-width: 72%;
    padding: 2rem 1.5rem;
  }

  .hero-copy__title {
    font-size: 4.25rem;
  }

  .meters-title {
    font-size: 3.2rem;
  }

  .meters-panel {
    flex-direction: column;
    gap: 1rem;
  }

  .meters-copy {
    max-width: 780px;
    margin: 0 auto;
    left: 0;
    top: 0;
  }

  .phone-scene {
    min-height: 0;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
  }

  .meters-section::before {
    left: 12%;
    right: 12%;
    top: 38%;
    bottom: 0;
    filter: blur(36px);
    opacity: 0.36;
  }
}

@media (max-width: 900px) {
  .hero-copy {
    width: 85%;
    max-width: 85%;
    padding: 1.75rem 1.25rem;
  }

  .hero-copy__title {
    font-size: 3.35rem;
  }

  .hero-copy__title-line {
    white-space: normal;
  }

  .trust-bar__title {
    font-size: 1.35rem;
  }

  .trust-bar__desc {
    font-size: 0.78rem;
  }

  .map-hero__grid {
    min-height: 0;
    grid-template-rows: auto auto;
  }

  .map-hero__layer {
    grid-row: 1;
    max-width: 100%;
    padding-right: 0;
  }

  .map-hero__visual {
    grid-row: 2;
    justify-self: center;
    width: 100%;
    max-width: min(100%, 640px);
    margin-top: clamp(1.25rem, 4vw, 2rem);
    margin-right: 0;
  }

  .map-hero__map {
    max-height: min(78vh, 620px);
  }

  .partners-section {
    margin: 0 0 2.75rem;
  }

  .partners-marquee {
    border-radius: 14px;
    padding: 0.85rem 0;
  }

  .partners-marquee__track {
    gap: 1.2rem;
    animation-duration: 26s;
  }

  .partners-marquee__logo {
    height: clamp(1.7rem, 7vw, 2.6rem);
    max-width: 150px;
  }

  .solution-cta {
    margin-bottom: 2rem;
  }

  .site-footer__main {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__col--brand {
    grid-column: 1 / -1;
    max-width: none;
  }

  .solutions-smart__grid {
    grid-template-columns: 1fr;
  }

  .solutions-smart__visual {
    order: -1;
    width: 100%;
    justify-self: stretch;
  }

  .solutions-smart__figure {
    min-height: clamp(11rem, 48vw, 20rem);
  }

  .solutions-platform__grid {
    grid-template-columns: 1fr;
  }

  .about-split__left {
    width: 100%;
  }

  .about-intro {
    border-right: none;
    border-bottom: 1px solid rgba(18, 69, 109, 0.08);
  }

  .about-panel {
    border-right: none;
    border-bottom: 1px solid rgba(18, 69, 109, 0.08);
    min-height: min-content;
    padding-bottom: 3rem;
  }
}

@media (max-width: 780px) {
  /* --- About page: story stack + static map --- */
  .about-map-backdrop {
    display: none !important;
  }

  .about-map-mobile {
    display: block;
    padding: clamp(0.65rem, 2.5vw, 1rem) clamp(1rem, 4vw, 1.25rem);
    border: none;
  }

  .about-map-mobile__frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 1;
    max-height: min(48vh, 400px);
    overflow: hidden;
    border-radius: 1.25rem;
  }

  /*
    Crop (about / who / proof): shorter viewport only — stack stays full width
    and square so map + overlay size/alignment do not shrink.
  */
  .about-map-mobile:not(.about-map-mobile--purpose) .about-map-mobile__frame {
    aspect-ratio: 10 / 6.5;
    max-height: none;
  }

  .about-map-mobile--purpose .about-map-mobile__frame {
    aspect-ratio: 1;
    max-height: min(48vh, 400px);
  }

  /* Base + overlays scale/pan together (same as desktop .about-map-stack) */
  .about-map-mobile__stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --stack-anchor-x: 50%;
    --stack-anchor-y: 50%;
    --stack-scale: 1;
    transform-origin: var(--stack-anchor-x) var(--stack-anchor-y);
    transform: translate(
        calc(50% - var(--stack-anchor-x)),
        calc(50% - var(--stack-anchor-y))
      )
      scale(var(--stack-scale));
  }

  /* Full-size square stack, vertically centered — frame clips top/bottom */
  .about-map-mobile:not(.about-map-mobile--purpose) .about-map-mobile__stack {
    inset: unset;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    transform: translateY(-50%)
      translate(
        calc(50% - var(--stack-anchor-x)),
        calc(50% - var(--stack-anchor-y))
      )
      scale(var(--stack-scale));
  }

  .about-map-mobile__base {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }

  .about-map-mobile__overlay {
    position: absolute;
    left: var(--about-map-overlay-left, 15%);
    top: var(--about-map-overlay-top, 42%);
    transform: translate(-50%, -50%);
    height: var(--about-map-overlay-height, 35%);
    width: auto;
    max-width: none;
    max-height: var(--about-map-overlay-height, 35%);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  .about-map-mobile__overlay--property {
    left: var(--about-map-property-overlay-left, 55%);
    top: var(--about-map-property-overlay-top, 12%);
    height: var(--about-map-property-overlay-height, 40%);
    max-height: var(--about-map-property-overlay-height, 40%);
  }

  .about-map-mobile__overlay--proof {
    left: var(--about-map-proof-overlay-left, 70%);
    top: var(--about-map-proof-overlay-top, 79%);
    height: var(--about-map-proof-overlay-height, 42%);
    max-height: var(--about-map-proof-overlay-height, 42%);
  }

  /* About us: location pin on map */
  .about-map-mobile--about .about-map-mobile__stack {
    --stack-anchor-x: var(--about-map-overlay-left, 15%);
    --stack-anchor-y: var(--about-map-overlay-top, 42%);
  }

  .about-map-mobile--about .about-map-mobile__stack {
    --stack-scale: 1.55;
  }

  /* Who we are: property connect graphic */
  .about-map-mobile--who .about-map-mobile__stack {
    --stack-anchor-x: var(--about-map-property-overlay-left, 55%);
    --stack-anchor-y: var(--about-map-property-overlay-top, 12%);
    --stack-scale: 1.4;
  }

  /* Proof in the field: connected meters graphic */
  .about-map-mobile--proof .about-map-mobile__stack {
    --stack-anchor-x: var(--about-map-proof-overlay-left, 70%);
    --stack-anchor-y: var(--about-map-proof-overlay-top, 79%);
    --stack-scale: 1.35;
  }

  /* Our purpose: wide island (no overlay) — map only, centered */
  .about-map-mobile--purpose .about-map-mobile__stack {
    --stack-anchor-x: 50%;
    --stack-anchor-y: 50%;
    --stack-scale: 0.9;
  }

  .about-split__left {
    width: 100%;
    background: var(--page-bg, #f3f3f3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page.about-page .about-intro {
    transform: none;
    min-height: auto;
    min-height: unset;
    padding: clamp(1.25rem, 4vw, 2rem);
    padding-bottom: clamp(3rem, 11vw, 4.5rem);
    margin-bottom: clamp(3rem, 11vw, 4.5rem);
    border-right: none;
    border-bottom: 1px solid rgba(18, 69, 109, 0.08);
    justify-content: flex-start;
  }

  .about-intro .about-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
    max-width: 100%;
  }

  .about-intro .about-sub {
    font-size: clamp(1rem, 3.5vw, 1.125rem);
    max-width: 100%;
  }

  /* Each panel: copy → map → tags; divider only after full section */
  .about-panel {
    display: flex;
    flex-direction: column;
    min-height: auto;
    min-height: unset;
    padding: 0;
    margin-bottom: clamp(3rem, 11vw, 4.5rem);
    padding-bottom: clamp(3rem, 11vw, 4.5rem);
    border-right: none;
    border-bottom: 1px solid rgba(18, 69, 109, 0.08);
  }

  .about-panel--purpose {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
  }

  .about-panel__copy {
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem) 0;
  }

  .about-panel:not(:first-of-type) .about-panel__copy {
    padding-top: clamp(2rem, 6vw, 2.75rem);
  }

  .about-panel__copy .about-body:last-child {
    margin-bottom: 0;
  }

  .about-panel .about-stats {
    margin-top: 0;
    padding: clamp(0.75rem, 3vw, 1.25rem) clamp(1.25rem, 4vw, 2rem) 0;
  }

  .about-body {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .about-section-title {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  .about-panel--purpose .about-purpose-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: auto;
    max-width: none;
    min-height: 48px;
    margin: clamp(0.75rem, 3vw, 1.25rem) auto clamp(1.25rem, 4vw, 2rem);
    padding: 0.9rem 2rem;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }

  body.about-page {
    overflow-x: hidden;
  }

  .meters-page {
    padding: 1.5rem clamp(1rem, 4.5vw, 1.35rem) 2rem;
  }

  .meters-section {
    overflow: hidden;
    max-width: 100%;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .meters-header {
    position: relative;
    z-index: 1;
  }

  .meters-content-viewport {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .meters-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .meters-title {
    font-size: 2.25rem;
  }

  .meter-tabs-row {
    margin-top: 1.1rem;
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(0.25rem, 1.5vw, 0.5rem);
  }

  .meter-tabs-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  .meter-tabs {
    display: flex;
    flex: 0 1 auto;
    width: min(100%, 20rem);
    min-width: 0;
    max-width: 100%;
    margin: 0;
    gap: 0.5rem;
    padding: 0;
    border-radius: 9px;
  }

  .meter-tab {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    border-radius: 9px;
  }

  .meter-tabs-pause {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9px;
  }

  .meter-tabs-pause:active {
    transform: translateY(1px);
  }

  .meters-panel {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.85rem;
    padding-inline: clamp(0.65rem, 3.5vw, 1.1rem);
  }

  .meters-copy {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
    box-sizing: border-box;
    padding-inline: clamp(0.35rem, 2vw, 0.65rem);
  }

  .meters-section::before {
    left: 8%;
    right: 8%;
    top: auto;
    height: min(52%, 22rem);
    bottom: 0;
    filter: blur(28px);
    opacity: 0.3;
  }

  .meters-copy__headline {
    font-size: clamp(1.95rem, 6.25vw, 2.55rem);
    line-height: 1.05;
  }

  .meters-copy__ideal {
    font-size: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin: 1rem 0 1rem;
  }

  .ideal-pill {
    font-size: 0.8125rem;
    padding: 0.35rem 0.55rem;
  }

  .meters-copy__list {
    padding-left: 1.15rem;
    padding-right: clamp(0.35rem, 2vw, 0.65rem);
  }

  .meters-copy__list li {
    font-size: 0.9375rem;
    line-height: 1.45;
    margin-bottom: 0.55rem;
    overflow-wrap: anywhere;
  }

  .meters-copy__list li:last-child {
    margin-bottom: 0;
  }

  .phone-scene {
    min-height: 0;
    width: 100%;
    max-width: min(100%, 360px);
    margin-inline: auto;
  }

  .smart-mockup-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(55vh, 420px);
    margin: 0;
    object-fit: contain;
  }

  /* Postpaid: scale up toward bottom-right (homepage mobile) */
  .meters-panel--postpaid .phone-scene--postpaid-image {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    overflow: visible;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .meters-panel--postpaid .postpaid-mockup-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    object-fit: contain;
    transform: scale(1.42);
    transform-origin: top left;
    margin: 0 -18% -12% 0;
  }

  .phone-frame {
    width: 235px;
    height: 470px;
    right: 1.1rem;
  }

  .metric-chip {
    width: 260px;
    right: 0;
    padding: 0.45rem 0.7rem;
  }

  .metric-chip strong {
    font-size: 0.76rem;
  }

  .metric-chip span {
    font-size: 0.67rem;
  }

  .metric-chip i {
    height: 6px;
  }

  .metric-chip--power {
    top: 4.8rem;
  }

  .metric-chip--water {
    top: 9.9rem;
    right: -0.8rem;
  }

  .chart-card {
    width: 195px;
    height: 88px;
    top: 14.8rem;
  }

  .topup-pill {
    top: 20.4rem;
    right: 1rem;
    font-size: 1.3rem;
    padding: 0.52rem 1.5rem;
  }

  /* How it works — static step stack (no scroll-scrub on mobile) */
  .steps-scroll {
    height: auto;
    min-height: 0;
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .steps-cinematic {
    display: none !important;
  }

  .steps-mobile {
    display: block;
    max-width: 100%;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .steps-header--mobile {
    position: relative;
    top: auto;
    left: auto;
    padding: 0 clamp(0.75rem, 4vw, 1.25rem) 1rem;
    pointer-events: auto;
  }

  .steps-mobile .steps-heading-img {
    width: min(500px, 92vw);
    max-width: 100%;
    height: auto;
  }

  .steps-mobile__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 5vw, 2rem);
  }

  .steps-mobile__item {
    margin: 0;
    padding: 0;
    width: 112vw;
    max-width: 112vw;
    margin-left: calc(50% - 56vw);
  }

  .steps-mobile__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .steps-mobile__step2 {
    position: relative;
    width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }

  .steps-mobile__step2-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
  }

  .steps-mobile__truck {
    position: absolute;
    left: 50%;
    top: 0%;
    z-index: 2;
    width: min(130vw);
    max-width: none;
    height: auto;
    margin-left: -65vw;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: none;
    will-change: transform;
  }

  .steps-mobile__pair {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
  }

  .steps-mobile__stack {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .steps-mobile__stack .steps-mobile__img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  .steps-mobile__img--base {
    position: relative;
    z-index: 1;
  }

  .steps-mobile__pair-overlay {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
  }

  /* Powering Mauritius map section */
  .map-hero {
    max-width: 100%;
    padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 1.25rem) clamp(1.5rem, 4vw, 2rem);
    overflow-x: clip;
    box-sizing: border-box;
  }

  .map-hero__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 4vw, 1.5rem);
    min-height: 0;
  }

  .map-hero__layer {
    order: 1;
    position: static;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    pointer-events: auto;
  }

  .map-hero__title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2rem, 8.5vw, 2.65rem);
  }

  .map-hero__copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .map-hero__subbox {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }

  .map-hero__subtitle {
    font-size: clamp(1.6rem, 6.5vw, 2.25rem);
    line-height: 1.15;
  }

  .map-hero__body {
    margin-top: 1rem;
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
    line-height: 1.45;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .map-hero__visual {
    order: 2;
    position: relative;
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-right: 0;
    justify-self: stretch;
    overflow: visible;
  }

  .map-hero__map {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(48vh, 400px);
    object-fit: contain;
    object-position: center;
  }

  .map-hero__learn-more {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 1rem;
    min-height: 44px;
    padding: 0.55rem 1.5rem;
    font-size: 0.9375rem;
    align-self: center;
  }
}

@media (max-width: 720px) {
  .brand {
    padding-left: 2.35rem;
  }

  .brand__mark {
    --badge-size: 2.5rem;
    left: 0;
    transform: translateY(-50%);
  }

  .hero-copy {
    width: 92%;
    max-width: 92%;
    padding: 1.5rem 1rem;
  }

  .scroll-placeholder {
    width: 92%;
    min-height: 110vh;
    padding: 1.5rem 1rem;
  }

  .hero-copy__title {
    font-size: 2.25rem;
  }

  .hero-copy__title-line {
    white-space: normal;
  }

  .trust-bar__item {
    padding: 1.1rem 0.75rem 1rem;
  }

  .trust-bar__value {
    font-size: 2.3rem;
  }

  .trust-bar__title {
    font-size: 1.15rem;
  }

  .trust-bar__desc {
    font-size: 0.72rem;
  }
}

@media (max-width: 600px) {
  .trust-bar {
    grid-template-columns: 1fr;
  }

  .trust-bar__item + .trust-bar__item {
    border-left: 0;
    border-top: 2px solid rgba(28, 125, 189, 0.35);
  }
}

@media (max-width: 560px) {
  .site-footer__main {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .faq-item__summary {
    padding-right: 2.35rem;
    font-size: 0.93rem;
  }

  .solutions-hero__inner {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .solutions-smart__grid {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .solutions-platform__inner {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .solutions-cta__inner {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .site-nav {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
  }

  html.site-nav-menu-open,
  html.site-nav-menu-open body {
    overflow: hidden;
    touch-action: none;
  }

  .site-nav__toggle {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    z-index: 5;
  }

  .site-nav__toggle-box {
    position: relative;
    display: block;
    width: 1.35rem;
    height: 1rem;
  }

  .site-nav__toggle-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--text-nav);
    transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
  }

  .site-nav__toggle-line:nth-child(1) {
    top: 0;
  }

  .site-nav__toggle-line:nth-child(2) {
    top: 7px;
  }

  .site-nav__toggle-line:nth-child(3) {
    top: 14px;
  }

  .site-nav--open .site-nav__toggle-line:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  .site-nav--open .site-nav__toggle-line:nth-child(2) {
    opacity: 0;
  }

  .site-nav--open .site-nav__toggle-line:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  .site-nav__bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.5rem 0.75rem;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .site-nav__bar .brand {
    position: relative;
    z-index: 5;
    min-width: 0;
  }

  .site-nav__backdrop {
    display: block;
    position: fixed;
    top: var(--site-nav-h, 3.5rem);
    left: 0;
    width: 100vw;
    max-width: 100vw;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(13, 33, 55, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
    cursor: pointer;
  }

  .site-nav--open .site-nav__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__sheet {
    position: fixed;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    top: var(--site-nav-h, 3.5rem);
    z-index: 2;
    flex: none;
    justify-content: stretch;
    max-height: min(70vh, calc(100dvh - var(--site-nav-h, 3.5rem) - 1rem));
    overflow-y: auto;
    padding: 0.35rem 0 1rem;
    background: var(--nav-bg);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 40px rgba(8, 32, 55, 0.22);
    transform: translateY(-102%);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transition:
      transform 0.3s var(--nav-morph-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
      opacity 0.22s ease,
      visibility 0.22s ease;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
  }

  .site-nav--open .site-nav__sheet {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__end {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
    padding: 0.25rem 1rem 0.5rem;
  }

  .nav-links__list {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
  }

  .nav-links__a {
    display: block;
    padding: 0.85rem 0.35rem;
    white-space: normal;
    border-bottom: 1px solid rgba(18, 69, 109, 0.1);
  }

  .nav-links__list li:last-child .nav-links__a {
    border-bottom: none;
  }

  .site-nav__end .btn-login {
    align-self: center;
    width: 100%;
    max-width: 16rem;
    padding: 0.55rem 1.25rem;
  }

  /* Home hero: full-width; title top + tagline bottom over video; trust below */
  .hero-panel {
    width: 100%;
    max-width: 100%;
    margin: 0.65rem 0 1.75rem;
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(8, 32, 55, 0.12);
  }

  .hero-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .hero-stage__media {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    width: 100%;
    aspect-ratio: var(--hero-video-ar, 16 / 9);
    overflow: hidden;
    z-index: 0;
  }

  .hero-stage__video,
  .hero-stage__dashboard {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-copy {
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    padding: 0.75rem 1rem 0.85rem;
    box-sizing: border-box;
    background: none;
    min-height: 0;
  }

  .hero-copy__title {
    font-size: clamp(2rem, 8.75vw, 2.85rem);
    margin: 0;
    line-height: 1.08;
    max-width: min(100%, 24rem);
    filter: drop-shadow(0 1px 3px rgba(0, 28, 55, 0.32));
  }

  .hero-copy__title-line {
    white-space: normal;
  }

  .hero-copy__lead {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: min(100%, 22rem);
    margin: 0;
    padding-top: 0.5rem;
    color: #fff;
    text-shadow:
      0 1px 2px rgba(0, 28, 55, 0.45),
      0 0 6px rgba(0, 28, 55, 0.22);
  }

  .trust-bar {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    grid-template-columns: 1fr;
    background: linear-gradient(180deg, rgba(230, 244, 252, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
    border-top: 1px solid rgba(18, 69, 109, 0.08);
  }

  .trust-bar__item {
    padding: 1rem 1rem 0.95rem;
  }

  .trust-bar__item + .trust-bar__item {
    border-left: none;
    border-top: 2px solid rgba(28, 125, 189, 0.28);
  }

  .trust-bar__value {
    font-size: clamp(2rem, 8vw, 2.65rem);
  }

  .trust-bar__title {
    font-size: 1.1rem;
  }

  .trust-bar__desc {
    font-size: 0.78rem;
  }

  .contact-main__cards {
    grid-template-columns: 1fr;
  }
}