/* ============================================
   BESPOKED AI — Mobile Overrides
   Rebuilt 15 June 2026 against the 15 May redesign (layouts.css).
   Loads after styles.css and layouts.css, so it wins on equal
   specificity. Desktop appearance is unaffected — every rule is
   inside a max-width query.

   Breakpoints:
     900px and below — tablet + phone (grids stack, nav collapses)
     600px and below — phone (dark hero, tighter spacing)
   ============================================ */

/* ============================================
   TABLET + PHONE  (<= 900px)
   ============================================ */
@media (max-width: 900px) {

  /* --- Belt-and-braces: nothing should scroll sideways --- */
  body { overflow-x: hidden; }

  /* --- Nav toggle + logo visible on dark hero background --- */
  .nav--hero .nav__toggle span {
    background: var(--cream);
  }
  .nav--hero .nav__logo,
  .nav--hero .nav__logo strong,
  .nav--hero .nav__logo span {
    color: var(--cream);
  }

  /* ------------------------------------------------------------
     CRITICAL FIX — Glyph-index layouts (Direction C)
     layouts.css collapses these to "44px 1fr" and hides the
     number/icon that filled the 44px column, so the body text
     dropped into the 44px sliver and wrapped one word per line.
     Stack everything into a single full-width column instead.
     ------------------------------------------------------------ */

  /* "What we do" — numbered index (homepage) */
  .c-list li {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
  }
  .c-list .ic { display: none; }
  .c-list .n  { display: none; }
  .c-list .body p { max-width: 100%; }

  /* Ethics principles — 8-item glyph index */
  .c-principles li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: var(--space-sm) 0;
  }
  .c-principles .n  { display: none; }
  .c-principles .ic { display: none; }
  .c-principles .title {
    padding-top: 0;
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
  }
  .c-principles .desc {
    padding-top: 0;
    max-width: 100%;
  }

  /* --- Trim the big dark/atmospheric bands so they don't leave
         a screen of empty space once their grids stack --- */
  .b-s3,
  .a-s2 { padding: var(--space-xl) 0; }

  /* The Ethics-preview feature image is decorative; drop it on
     mobile rather than parking it in dead space below the text */
  .b-s3 .feature-icon { display: none; }
  .b-s3 .grid { gap: var(--space-md); }

  /* --- About photo: show it stacked on mobile --- */
  .content-with-icon__accent:has(.about-photo) {
    display: flex !important;
    justify-content: center;
    margin-top: var(--space-md);
  }
  .about-photo {
    width: 100% !important;
    max-width: 320px;
    padding-top: 0;
    margin-left: 0;
    justify-content: center;
  }
  .about-photo img,
  .content-with-icon__accent .about-photo img {
    width: 100% !important;
    max-width: 320px;
    clip-path: none;
  }

  /* --- Ethics header: hide decorative graphic on mobile --- */
  .page-header--bg {
    background-image: none !important;
  }

  /* --- Footer bottom: centre to match stacked footer layout --- */
  .footer__bottom {
    text-align: center;
  }

}

/* ============================================
   PHONE  (<= 600px)
   ============================================ */
@media (max-width: 600px) {

  /* --- Hero: remove video, charcoal background, content up --- */
  .hero__video,
  .hero__overlay {
    display: none;
  }
  .hero {
    background-color: var(--charcoal);
    min-height: auto;
    padding: 7rem var(--space-sm) var(--space-xl);
    display: block;
  }
  .hero__content {
    position: static;
    transform: none;
    max-width: 100%;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .hero__content h1 {
    color: var(--cream);
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    margin-bottom: var(--space-sm);
  }
  .hero__sub {
    color: var(--stone);
    font-size: 1rem;
    margin-bottom: var(--space-md);
  }

  /* The outline "How We Work" button carries an inline charcoal
     colour for the light desktop hero — invisible once the mobile
     hero turns charcoal. Force a readable cream/gold pairing. */
  .hero .btn--outline {
    color: var(--cream) !important;
    border-color: var(--gold) !important;
  }

  /* --- Tighter side padding on phones --- */
  .container {
    padding: 0 var(--space-sm);
  }

  /* The Ethics "what we build / don't build" block is an inline-styled
     two-column grid with no class, so nothing collapses it. Stack it.
     !important is needed to beat the inline style. */
  .b-section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }

  /* --- Pull the tall section padding in further on phones --- */
  .c-section,
  .a-section,
  .b-section {
    padding: var(--space-lg) 0;
  }
  .b-s3,
  .a-s2 {
    padding: var(--space-lg) 0;
  }

  /* --- Nav open dropdown: readable links on cream --- */
  .nav__links.open a {
    color: var(--charcoal);
    padding: var(--space-xs) 0;
    font-size: 1rem;
  }

  /* --- Page headers: clear the fixed nav --- */
  .page-header {
    padding-top: calc(var(--space-lg) + var(--space-md)) !important;
    padding-bottom: var(--space-sm) !important;
  }

  /* --- Headline blocks: rein in the large clamps on narrow screens --- */
  .a-headline {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
  .c-header h2 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
  .b-s3 .quote {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }

  /* --- Accordion + stacked items: tidy spacing --- */
  .accordion__trigger { font-size: 1rem; }
  .principle-item { padding: var(--space-sm) 0; }
  .split-header { gap: var(--space-sm); }

}