/* ========== PAGE INTRO LOADER ==========
       Full-viewport overlay shown on first visit; runs a 4-stage square
       animation, then fades out and reveals the hero with stagger fade-up. */
    #auPageLoader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #000000;
      pointer-events: none;
      overflow: hidden;
    }

    #auLoaderSquare {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      background: #ffffff;
      will-change: transform;
    }

    /* While the intro is running, lock scroll. The loader covers everything
       at z-index 9999 so the hero behind it doesn't need to be hidden — any
       paint there is invisible. */
    body.au-intro-loading {
      overflow: hidden;
    }

    /* ========== BG LAYER + CUBE STAGE ==========
       Body bg is tweened white → orange by GSAP. The bg layer is a full-page
       fixed div behind everything so the colour change is visible regardless
       of section backgrounds (hero/footer have transparent backgrounds now). */
    body { background: #FFFFFF; }

    .au-bg-layer {
      position: fixed;
      inset: 0;
      background: #0a0a0a; /* match footer dark bg */
      z-index: 0;
      pointer-events: none;
    }

    .au-cube-stage {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 1;
    }

    #auCubeCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      transform: translate(33vw, 52vh);
      will-change: transform;
    }

    /* Banner overlay shown during cube lock + expansion. JS positions and
       sizes it to match the cube's projected face on screen. */
    .au-cube-banner {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      will-change: transform, width, height, opacity;
      overflow: hidden;
    }

    .au-cube-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* ========== PAGE HERO ========== */
    .au-hero {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: visible;
      z-index: 2;
      padding: 40px 0 80px;
      box-sizing: border-box;
    }

    .au-hero-title {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      color: #000000;
      text-transform: uppercase;
      font-weight: 400;
      margin: 0;
      line-height: 0.9;
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
    }

    .au-hero-line {
      display: block;
      margin: 0;
      padding: 0;
    }

    .au-hero-line + .au-hero-line {
      margin-top: 10px;
    }

    .au-hero-line {
      font-size: clamp(70px, 10vw, 160px);
      letter-spacing: 0.02em;
    }

    .au-hero-line--1 {
      text-align: center;
      font-weight: 600;
      color: #fff;
    }

    .au-hero-line--2 {
      padding-left: 7vw;
      font-weight: 600;
      color: #ff4612;
    }

    .au-hero-line--3 {
      padding-left: 30vw;
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
    }

    .au-hero-dot {
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 0px;
      background: #FF4612;
      margin-right: 15px;
      flex-shrink: 0;
    }

    /* Anchored to the right edge and vertically tracked to the middle title line via calc():
       the title scales with vw, so top = padding(40) + line1-height(0.9 × 10vw) + gap(10) lands
       the desc in the empty space beside "EXPERTISE," at any viewport — independent of height,
       so it stays in the gap in both portrait and landscape. (Tablet override mirrors this with
       the 12vw title; phones drop it to static flow.) */
    .au-hero-desc {
      position: absolute;
      top: calc(50px + 9vw);
      right: 5%;
      left: auto;
      max-width: clamp(200px, 20vw, 300px);
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.05em;
      line-height: 1.5;
      color: #ffffff;
      text-transform: uppercase;
      margin: 0;
      z-index: 3;
    }

    /* ========== VIDEO EXPAND (scroll-driven cube → full-width video frame) ========== */
    .au-video-expand {
      position: relative;
      width: 100%;
      height: 200vh;
      z-index: 2;
    }

    .au-video-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 4;
    }

    .au-video-play {
      pointer-events: auto;
      background: #FF4612;
      color: #ffffff;
      border: none;
      border-radius: 50%;
      width: 140px;
      height: 140px;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.05em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      opacity: 0;
      transform: scale(0.7);
      transition: transform 0.3s ease;
    }

    .au-video-play:hover {
      transform: scale(0.75);
    }

    /* ========== OUR HISTORY ========== */
    .au-history {
      position: relative;
      z-index: 5;
      background: #ffffff;
      color: #000000;
      padding: 60px 5% 100px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    /* Per-line reveal: each visual line is wrapped by JS in
       .au-line-mask (overflow:hidden) > .au-line-inner (translateY).
       Animation slides the inner up from below the mask edge.
       padding-bottom + negative margin-bottom expand the clip area down
       so descenders (g, p, y) aren't cut by overflow:hidden on tight
       line-heights (the title has line-height:0.95). */
    .au-line-mask {
      display: block;
      overflow: hidden;
      line-height: inherit;
      padding-bottom: 0.2em;
      margin-bottom: -0.2em;
    }

    .au-line-inner {
      display: block;
      will-change: transform;
    }

    .au-history-label {
      display: inline-block;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(10, 10, 10, 0.6);
      margin-top: 15vh;
      margin-bottom: 28px;
    }

    .au-history-content {
    }

    .au-history-title {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(60px, 9vw, 140px);
      font-weight: 600;
      line-height: 0.95;
      letter-spacing: -0.02em;
      color: #000000;
      margin: 0 0 60px;
    }

    /* The paragraph sits indented from the h2 — use margin-left because the
       offset is between sibling elements, not internal padding. */
    .au-history-body {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(18px, 2dvh, 26px);
      font-weight: 300;
      color: #666;
      line-height: 1.8;
      margin: 0 0 0 35%;
      max-width: 560px;
    }

    /* ========== OUR VALUES ========== */
    .au-values {
      position: relative;
      z-index: 5;
      background: #FF4612;
      color: #ffffff;
      padding: 60px 5% 100px;
      min-height: 100vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .au-values-label {
      display: inline-block;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 15vh;
      margin-bottom: 28px;
    }

    .au-values-title {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(60px, 9vw, 140px);
      font-weight: 600;
      line-height: 0.95;
      letter-spacing: -0.02em;
      color: #ffffff;
      margin: 0;
      max-width: 90%;
    }

    /* 3-column grid: leftmost cell is intentionally left empty so the two
       cards sit aligned on the right. */
    .au-values-cards {
      margin-top: auto;
      padding-top: 120px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
    }

    .au-values-card {
      position: relative;
      background: #ffffff;
      padding: 40px;
      display: flex;
      flex-direction: column;
    }

    /* Stacking for the slide-in effect:
       cards 2 (transparency) & 3 (sustainability) sit on top so cards 1
       (alignment) & 4 (innovation) emerge from beneath them. */
    .au-values-card--transparency,
    .au-values-card--sustainability {
      z-index: 2;
    }

    .au-values-card--alignment,
    .au-values-card--innovation {
      z-index: 1;
    }

    .au-values-card--empty {
      /* placeholder column — kept transparent so the orange section shows through */
      background: transparent;
      padding: 0;
    }

    .au-values-card-title {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(28px, 2.4vw, 40px);
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #FF4612;
      margin: 0;
    }

    .au-values-card-lead {
      display: block;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(18px, 2dvh, 26px);
      font-weight: 400;
      color: #000000;
      line-height: 1.8;
      margin-top: 120px;
      margin-bottom: 30px;
    }

    .au-values-card-body {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(18px, 2dvh, 26px);
      font-weight: 300;
      color: #666;
      line-height: 1.8;
      margin: 0;
    }

    /* (Pre-footer shatter CSS moved to footer.css for sharing) */

    /* ========== OUR FOUNDERS ========== */
    .au-founders {
      position: relative;
      z-index: 5;
      background: #ffffff;
      color: #000000;
      padding: 60px 5% 120px;
      min-height: 100vh;
      box-sizing: border-box;
      overflow: hidden;
    }

    .au-founders-label {
      display: inline-block;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(10, 10, 10, 0.6);
      margin-bottom: 16px;
    }

    /* Photo block: holds the label and photo as a single column,
       so the label sits directly above the photo, left-aligned with it. */
    .au-founders-photo-block {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    /* Cursor-follow arrow — visible only while hovering the founders section.
       Native cursor is hidden inside the section so the arrow replaces it. */
    .au-founders {
      cursor: none;
    }

    /* Chevron arrow — only positioning here; stroke styles are inline on
       the SVG so nothing CSS-side can re-introduce a fill. */
    .au-founders-arrow {
      position: fixed;
      top: 0;
      left: 0;
      width: clamp(180px, 22vw, 320px);
      height: clamp(180px, 22vw, 320px);
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 0;
      z-index: 10;
      transition: opacity 0.3s ease;
      will-change: transform;
    }

    .au-founders:hover .au-founders-arrow {
      opacity: 1;
    }

    .au-founders-stage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 60px auto 40px;
    }

    /* Marquee: breaks out of the section's 5% padding to span the full viewport. */
    .au-founders-marquee {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100vw;
      transform: translate(-50%, -50%);
      overflow: hidden;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }

    .au-founders-marquee-track {
      display: inline-flex;
      animation: founderMarquee 40s linear infinite;
    }

    .au-founders-marquee-track span {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(110px, 20vw, 320px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1;
      color: #000000;
      flex-shrink: 0;
      white-space: pre;
    }

    /* Orange square between each marquee instance — sized in em so it scales
       with the surrounding text. */
    .au-founders-marquee-sq {
      display: inline-block;
      width: 0.3em;
      height: 0.3em;
      background: #FF4612;
      align-self: center;
      margin: 0 0.5em;
      flex-shrink: 0;
    }

    @keyframes founderMarquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .au-founders-photo {
      position: relative;
      z-index: 2;
      width: clamp(280px, 32vw, 540px);
      height: clamp(280px, 32vw, 540px);
      object-fit: cover;
      display: block;
    }

    .au-founders-info {
      width: clamp(280px, 32vw, 540px);
      margin: 0 auto;
      display: block;
    }

    .au-founders-name {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(18px, 3dvh, 26px);
      font-weight: 400;
      color: var(--black);
      line-height: 1.5;
      margin: 0;
    }

    .au-founders-role,
    .au-founders-bio {
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: clamp(18px, 2dvh, 26px);
      font-weight: 300;
      color: #666;
      line-height: 1.8;
      margin: 0;
    }

    .au-founders-bio {
      margin-top: 16px;
    }

    /* ========== ABOUT-US NAV OVERRIDE ========== */
    /* Nav scrolls with the page (not fixed) — sits in normal document flow */
    #mainNav.au-nav {
      position: relative;
      z-index: 5;
      opacity: 1;
      transform: none;
      transition: none;
    }

    #mainNav.au-nav .nav-logo-img {
      height: 65px;
      width: auto;
    }

    /* Force white nav text on this dark page (no nav-dark toggling) */
    #mainNav.au-nav .nav-logo-text,
    #mainNav.au-nav .nav-contact-btn {
      color: #ffffff;
      -webkit-text-fill-color: #ffffff;
      background: none;
    }
    /* Nav links / lang use the SAME gradient-clip technique as the home so the orange
       fill animates on hover. A solid `background: none` here would kill that effect. */
    #mainNav.au-nav .nav-links a,
    #mainNav.au-nav .lang-link {
      color: #ffffff;
      background:
        linear-gradient(to right, var(--orange), var(--orange)) no-repeat left,
        linear-gradient(to right, #ffffff, #ffffff);
      background-size: 0% 100%, 100% 100%;
      -webkit-background-clip: text, text;
      background-clip: text, text;
      -webkit-text-fill-color: transparent;
    }
    #mainNav.au-nav .nav-links a.fill-active,
    #mainNav.au-nav .lang-link.fill-active {
      background-size: 100% 100%, 100% 100%;
    }
    #mainNav.au-nav .nav-contact-btn {
      border-color: rgba(255, 255, 255, 0.5);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: color 0.4s ease, border-color 0.3s ease;
    }
    /* "Let's Talk" — solid colour sweeps in left → right on hover (fill colour matches the
       page's nav-link fill: orange here, overridden to black on the orange-hero page). */
    #mainNav.au-nav .nav-contact-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #mainNav.au-nav .nav-contact-btn:hover {
      background: transparent;
    }
    #mainNav.au-nav .nav-contact-btn:hover::before {
      transform: scaleX(1);
    }



    /* ========== STAND SECTION ==========
       300vh of scroll. .au-stand-pin is pinned by GSAP for the duration.
       Initial state: squares/text/title hidden (opacity 0, translateY).
       ScrollTrigger reveals them in Phase 3.
    */
    .au-stand {
      position: relative;
      width: 100%;
      height: 300vh;
      background: transparent;
      z-index: 2;
    }

    .au-stand-pin {
      position: relative;
      width: 100%;
      height: 100vh;
      padding: 60px 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      pointer-events: auto;
    }

    .au-stand-content {
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Spacer reserves the row where the cube faces land. The cube faces
       themselves are the visible "squares" — no HTML imgs in the final state. */
    .au-stand-squares {
      position: relative;
      width: 100%;
      margin-top: 60px;
    }
    .au-stand-squares--spacer {
      height: 30vw;        /* matches the cube faces' final size (~30vw) */
    }

    .au-stand-text {
      margin: 80px auto 0;
      max-width: 650px;
      text-align: center;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 28px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1.5;
      opacity: 0;
      transform: translateY(30px);
      will-change: opacity, transform;
    }

    .au-stand-title {
      margin: 100px auto 0;
      font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
      font-weight: 900;
      font-size: 80px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #FFFFFF;
      text-align: center;
      line-height: 1.05;
      opacity: 0;
      transform: translateY(30px);
      will-change: opacity, transform;
    }

    .au-stand-word {
      display: inline-block;
      vertical-align: middle;
    }

    .au-stand-rule {
      display: inline-block;
      width: 150px;
      height: 3px;
      background: #FFFFFF;
      vertical-align: middle;
      margin: 0 16px;
    }


    /* ========== RESPONSIVE — first pass ========== */

    /* Touch devices: the founders section swaps the native cursor for a follow-arrow on hover,
       which makes no sense without a pointer (arrow gets stuck top-left). Restore the cursor. */
    @media (pointer: coarse) {
      .au-founders { cursor: auto; }
      .au-founders-arrow { display: none; }
    }

    /* <1200 (not 1200 itself): shorten the cube's lock+expand scroll length so the expansion
       completes faster — 200vh meant ~2 screens of scrolling. (≥100vh keeps the 100vh sticky
       video pinning intact.) */
    @media (max-width: 1199px) {
      /* <1200 shares the phone cube choreography (visible rise → turn → expand), with the cube on
         the RIGHT (right edge ~20px from the viewport edge) and on-screen/spinning at rest. JS
         positions it exactly; this is just the pre-JS placement. Section height = expand scroll. */
      .au-video-expand { height: 90vh; }
      .au-video-sticky { height: 90vh; }
      #auCubeCanvas { transform: translate(28vw, 37vh); }
      /* Values: 2 columns instead of 3 below 1200px. Hide the empty placeholder cells so the
         four real cards form a clean 2×2 grid. (≤480 drops to a single column — see below.) */
      .au-values-cards { grid-template-columns: 1fr 1fr; }
      .au-values-card--empty { display: none; }
    }

    /* ---------- TABLET (≤1024) ---------- */
    @media (max-width: 1024px) {
      /* Header → hamburger (matches the home): hide the inline nav, keep the logo. */
      #mainNav.au-nav .nav-links,
      #mainNav.au-nav .nav-right { display: none; }

      /* Hero: a little bigger title here (12vw vs the 10vw base), and ease the big diagonal
         indents so the larger lines still fit. (The desc drops below the title for <1200px —
         see the rule below — so it's no longer floated in the gap here.) */
      .au-hero-line { font-size: clamp(80px, 12vw, 160px); }
      .au-hero-line--2 { padding-left: 4vw; }
      .au-hero-line--3 { padding-left: 16vw; }

      /* History body: reduce the deep 35% indent. */
      .au-history-body { margin-left: 18%; }

      /* Values: the 120px lead gap is too tall once the columns narrow. */
      .au-values-card { padding: 32px; }
      .au-values-card-lead { margin-top: 56px; }
    }

    /* ---------- <1200: hero description drops below the title, left-aligned ----------
       The floating "in the gap" desc is desktop-only (≥1200). Below that it reads better in
       flow under the h1. (Phones ≤768 also get this via the block below, within the hero's own
       24px gutter; here, 769–1199, the hero has no side padding so the desc uses its own.) */
    @media (min-width: 769px) and (max-width: 1199px) {
      .au-hero-desc {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        max-width: 600px;
        margin-top: 44px;
        padding-left: 5vw;
        font-size: 13px;
        text-align: left;
      }

      /* Founders: make the stage (photo) and info a bit larger here than the 32vw desktop base,
         keeping the square proportion (photo width = height = info width). Starts at 380px
         (matching the ≤768 size, so no jump at the breakpoint) and grows to ~520px. */
      .au-founders-photo {
        width: clamp(380px, 42vw, 520px);
        height: clamp(380px, 42vw, 520px);
      }
      .au-founders-info { width: clamp(380px, 42vw, 520px); }
      .au-founders-stage { margin: 72px auto 48px; }
    }

    /* ---------- PHONE (≤768) ---------- */
    @media (max-width: 768px) {
      /* The cube is shown on phones too (centred below the hero text). Centred horizontally
         (translate 0, vs the desktop right-offset) and 16vh down so it sits clearly below the
         text — NOT pushed to the bottom edge. Must match MOBILE_REST_TY_VH in JS. */
      #auCubeCanvas { transform: translate(28vw, 37vh); }

      /* Phones: this section's height = the lock+expand scroll length (minus the short rise).
         90vh gives the ≥2-face rotation beat plenty of room to turn SLOWLY/deliberately, while
         the scale-up that follows is still reasonably quick. */
      .au-video-expand { height: 90vh; }
      .au-video-sticky { height: 90vh; }

      /* Sections: don't force 100vh with little content; tighten side padding + label offsets. */
      .au-history,
      .au-values,
      .au-founders { min-height: auto; padding-left: 24px; padding-right: 24px; }
      .au-history  { padding-top: 56px; padding-bottom: 64px; }
      .au-values   { padding-top: 56px; padding-bottom: 72px; }
      .au-founders { padding-top: 56px; padding-bottom: 80px; }
      .au-history-label,
      .au-values-label { margin-top: 0; }

      /* Hero: stack the title left-aligned (drop the diagonal indents), shrink it, and let the
         description flow below it. Keep it full-height so the centred cube has room to sit
         below the text (it's a fixed canvas at translate(0, 52vh)). */
      .au-hero { padding: 40px 24px 64px; min-height: 100vh; }
      .au-hero-line { font-size: clamp(46px, 15vw, 92px); }
      .au-hero-line + .au-hero-line { margin-top: 4px; }
      .au-hero-line--1,
      .au-hero-line--2,
      .au-hero-line--3 { text-align: left; padding-left: 0; }
      .au-hero-dot { width: 16px; height: 16px; margin-right: 10px; }
      .au-hero-desc {
        position: static;
        left: auto;
        top: auto;
        max-width: 100%;
        margin-top: 36px;
        font-size: 13px;
      }

      /* History */
      .au-history-title { font-size: clamp(40px, 12vw, 80px); margin-bottom: 32px; }
      .au-history-body { margin-left: 0; max-width: 100%; font-size: 16px; }

      /* Values: keep the 2-column grid from the ≤1199 rule (don't reset to 1fr here); only
         tighten spacing/sizes. Single column kicks in below 480px (the cards get too narrow). */
      .au-values-title { font-size: clamp(44px, 13vw, 84px); max-width: 100%; }
      .au-values-cards { gap: 16px; padding-top: 44px; }
      .au-values-card { padding: 28px 24px; }
      .au-values-card-lead { margin-top: 20px; margin-bottom: 14px; font-size: 17px; }
      .au-values-card-body { font-size: 16px; }

      /* Founders: shrink the marquee and size the photo/info to the viewport. */
      .au-founders-marquee-track span { font-size: clamp(72px, 26vw, 150px); }
      .au-founders-stage { margin: 40px auto 32px; }
      .au-founders-photo { width: min(80vw, 380px); height: min(80vw, 380px); }
      .au-founders-info { width: min(80vw, 380px); }
      .au-founders-bio { font-size: 16px; }
    }

    /* ---------- SMALL PHONE (≤480) ---------- */
    @media (max-width: 480px) {
      /* The value cards get too narrow for two columns on small phones — go single column. */
      .au-values-cards { grid-template-columns: 1fr; }
    }