/* ============================================================
   BIZMUTH — MOBILE DESIGN LAYER
   A purpose-built phone experience, not a scaled-down desktop.
   Loaded AFTER bizmuth.css + tree.css so desktop stays the
   untouched source of truth. Everything lives at ≤760px.
   ============================================================ */

/* new mobile-only hero CTA — hidden by default (desktop unaffected) */
.hero-cta-m{ display:none; }

@media (max-width:760px){

  /* --------------------------------------------------------
     GLOBAL RHYTHM
     Comfortable 24px gutters, calmer vertical pacing, balanced
     headline wrapping. One consistent measure across sections.
     -------------------------------------------------------- */
  :root{ --pad:24px; }

  body{ overflow-x:hidden; }

  .section{ scroll-margin-top:64px; }

  /* tighter, intentional section padding everywhere */
  .services{ padding:56px 0 52px; }
  .work{ padding:54px 0 52px; }
  .industries{ padding:56px 0 54px; }
  .final-cta{ padding:60px 0 68px; }

  /* headlines: balance wrapping, kill orphans, phone-tuned scale */
  h1, h2, h3{ text-wrap:balance; }
  .services-head h2,
  .work-head h2,
  .ind-head h2{ font-size:clamp(27px,7.4vw,34px); line-height:1.06; margin-top:16px; max-width:20ch; }

  /* eyebrows sit a touch tighter to their headline */
  .eyebrow{ font-size:10.5px; letter-spacing:.24em; }

  /* --------------------------------------------------------
     HEADER — compact split nav
     -------------------------------------------------------- */
  .nav{ height:58px; padding-left:var(--pad); }
  .nav.scrolled{ height:52px; }
  .brand{ font-size:16px; letter-spacing:.26em; padding-right:.26em; }
  .nav-cta{
    gap:14px; padding:0 18px; font-size:10.5px; letter-spacing:.16em;
  }
  .nav-cta:hover{ gap:18px; }
  .nav-cta .arr{ font-size:12px; }

  /* --------------------------------------------------------
     HERO — headline first, illustration in a supporting role
     Order: eyebrow · headline · lead · CTAs · illustration.
     -------------------------------------------------------- */
  .hero{
    display:flex; flex-direction:column;
    min-height:auto; padding-top:58px;
    background:
      radial-gradient(140% 70% at 88% 6%, color-mix(in srgb,var(--lav) 20%, transparent), transparent 58%),
      var(--cream);
  }
  .hero-scrim{ display:none; }
  .hero-draft{ opacity:.35; }

  .hero-grid{ order:1; padding:22px var(--pad) 0; padding-bottom:0; }
  .hero-stage{ order:2; }
  .hero-foot{ order:3; }

  /* eyebrow row — compact, no big element badge dominating */
  .hero-meta{ gap:14px; padding-top:6px; align-items:center; }
  .hero-meta .element{ padding:7px 10px 6px; }
  .hero-meta .element .sym{ font-size:22px; }
  .hero-meta .element .num,
  .hero-meta .element .mass{ font-size:8.5px; }
  .hero-meta .meta-txt{ font-size:10.5px; letter-spacing:.2em; line-height:1.6; }

  .hero h1{
    font-size:clamp(38px,11vw,52px); line-height:.96; letter-spacing:-.03em;
    margin-top:22px; max-width:14ch;
  }

  .hero-lower{ gap:22px; margin-top:26px; max-width:38ch; }
  .hero-lead{ font-size:15.5px; line-height:1.58; max-width:40ch; }

  /* CTAs — stacked, generous tap targets */
  .hero-ctas{ display:flex; flex-direction:column; gap:14px; width:100%; }
  .hero-cta-m{
    display:inline-flex; align-items:center; justify-content:space-between; gap:20px;
    width:100%; padding:17px 22px; background:var(--ink); color:#fff;
    font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  }
  .hero-ctas .link-ul{ width:100%; justify-content:space-between; padding-bottom:14px; }

  /* illustration — supporting, ~30% smaller, pushed to background */
  .hero-stage{
    position:relative; right:auto; top:auto;
    width:100%; height:44vh; min-height:280px; max-height:420px;
    margin:14px 0 0; opacity:.9;
  }

  /* footer strip — pared down, no crowding */
  .hero-foot{
    position:static; margin:22px var(--pad) 26px; padding-top:13px;
    font-size:10px; letter-spacing:.18em;
  }
  .hero-foot span:nth-child(2){ display:none; }

  /* --------------------------------------------------------
     SERVICES — shorter cards, alternating icon / text rhythm
     -------------------------------------------------------- */
  .services-head{ gap:20px; }
  .services-head .link-ul{ width:100%; justify-content:space-between; }

  .svc-grid{ margin-top:34px; border-top:1px solid var(--line); }
  .svc{
    display:grid; grid-template-columns:112px 1fr; column-gap:20px;
    align-items:center; padding:26px 0; border-left:none; border-top:1px solid var(--line);
  }
  .svc:first-child{ border-top:none; }
  .svc-art{ grid-column:1; grid-row:1 / span 3; height:112px; margin:0; align-self:center; }
  .svc-num{ grid-column:2; grid-row:1; }
  .svc h3{ grid-column:2; grid-row:2; font-size:17px; margin:8px 0 8px; }
  .svc p{ grid-column:2; grid-row:3; font-size:13.5px; line-height:1.55; max-width:34ch; }

  /* alternate: even services flip the illustration to the right */
  .svc:nth-child(even){ grid-template-columns:1fr 112px; }
  .svc:nth-child(even) .svc-art{ grid-column:2; }
  .svc:nth-child(even) .svc-num,
  .svc:nth-child(even) h3,
  .svc:nth-child(even) p{ grid-column:1; }

  /* --------------------------------------------------------
     WORK / PORTFOLIO CARDS — fixed preview, tap to open
     -------------------------------------------------------- */
  .work-head{ grid-template-columns:1fr; gap:16px; }
  .work-intro{ justify-self:start; align-self:start; max-width:46ch; font-size:13.5px; }
  .work-grid{ grid-template-columns:1fr; gap:20px; margin-top:34px; }

  /* no lift on tap; keep the card calm */
  .wf-card:hover{ transform:none; box-shadow:none; }
  .wf-card:hover::before{ border-color:transparent; }

  /* fixed browser-preview height; iframe stays desktop-scaled inside */
  .wf-preview{ aspect-ratio:auto; height:210px; }
  .wf-card:hover .preview-scale-wrap{ transform:scale(0.31); }  /* freeze auto-scroll */

  /* hint bar always visible on touch = the tap affordance */
  .wf-hint{ opacity:1; transform:none; padding:26px 15px 13px; font-size:9.5px; }

  .wf-meta{ padding:20px 20px 22px; }
  .wf-meta h3{ font-size:18px; }
  .wf-desc{ font-size:13.5px; max-width:46ch; }

  /* --------------------------------------------------------
     WHO WE BUILD FOR — let the cards breathe, tame the city
     -------------------------------------------------------- */
  .ind-head h2{ max-width:15ch; }
  .ind-lead{ font-size:15px; max-width:48ch; }

  .city-wrap{ margin-top:26px; }
  .city-stage::before{ display:none; }          /* drop the grid wash on mobile */
  .city-svg{ max-width:78%; margin:0 auto; }     /* stop the illustration dominating */

  .city-annos{ grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
  .ca-box{ padding:14px 15px 15px; height:100%; }
  .ca-desc{ font-size:11.5px; }

  /* --------------------------------------------------------
     PROCESS — smaller crystal, tabs pulled close to the art
     -------------------------------------------------------- */
  .tree-sticky{ min-height:0; }
  .tree-head{ top:16px; left:var(--pad); right:var(--pad); }
  .tree-head h2{ font-size:24px !important; line-height:1.14; max-width:15ch; margin-top:6px; }
  .th-readout{ display:none; }

  /* shrink + center the growing crystal (~30% smaller footprint) */
  .tree-stage{ inset:14% 6% 26% 6%; }
  .tree-field{ opacity:.4; }
  .tree-draft{ opacity:.3; }

  /* phase tabs — 2x2 grid, pulled up snug against the artwork
     (titles like "Architecture" don't fit a 4-across row) */
  .phase-rail{
    position:absolute; z-index:6; left:var(--pad); right:var(--pad);
    top:60%; bottom:auto; transform:none; width:auto;
    display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:auto; gap:0;
  }
  .phase{ padding:15px 16px; border-left:none; border-top:none; }
  .phase:nth-child(odd){ border-right:1px solid var(--line-cream); }
  .phase:nth-child(-n+2){ border-bottom:1px solid var(--line-cream); }
  .phase .ph-num{ font-size:10px; letter-spacing:.18em; }
  .phase .ph-title{ font-size:13px; letter-spacing:.01em; line-height:1.25; margin-top:6px; }
  .tree-cue{ font-size:10px; }

  /* --------------------------------------------------------
     FINAL CTA — reworked type, full-width stacked buttons
     -------------------------------------------------------- */
  .final-cta h2{
    font-size:clamp(30px,8.6vw,40px) !important; line-height:1.02;
    letter-spacing:-.02em; max-width:16ch; margin:16px 0 22px;
  }
  .fc-lead{ font-size:15px; margin-bottom:18px; }
  .fc-email{ font-size:16px; margin-bottom:30px; word-break:break-word; }
  .fc-bridge{ opacity:.5; }

  .fc-actions{ flex-direction:column; gap:12px; width:100%; }
  .fc-actions .btn-ghost,
  .fc-actions .btn-primary{
    width:100%; justify-content:space-between; gap:20px; padding:18px 22px;
  }

  /* --------------------------------------------------------
     FOOTER
     -------------------------------------------------------- */
  .footer{ padding:26px 0; }
  .footer .row{ flex-direction:column; align-items:flex-start; gap:18px; }
  .footer .left{ flex-wrap:wrap; gap:12px 20px; }
  .footer .right{ gap:18px; }
  .footer .el-mini{ width:40px; height:40px; font-size:17px; }

  /* --------------------------------------------------------
     DECORATION SYSTEM — fewer objects, more negative space
     Nothing decorative may sit over headlines or copy.
     -------------------------------------------------------- */
  .services .aurora-field{ opacity:.35; }
  .ind-field{ opacity:.4; }
  .ind-draft{ opacity:.28; }
  .fc-draft{ opacity:.55; }

  /* --------------------------------------------------------
     REDUCED MOTION INTENSITY ON PHONES
     Signature gradients stay; heavy floating loops calm down.
     -------------------------------------------------------- */
  .cr-fc, .cr-fb{ animation-duration:12s; }
  .wf-scroll.playing{ animation:none; }
}

/* very small phones — final polish */
@media (max-width:380px){
  .hero h1{ font-size:34px; }
  .svc{ grid-template-columns:92px 1fr; column-gap:16px; }
  .svc:nth-child(even){ grid-template-columns:1fr 92px; }
  .svc-art{ height:92px; }
  .city-annos{ grid-template-columns:1fr; }
  .final-cta h2{ font-size:28px !important; }
}