/* ─────────────────────────────────────────────────────────
   Second Nature Partners — Mobile (≤768px)
   Override-only stylesheet. Loads AFTER styles.css / audit.css
   so the cascade wins without !important wherever possible.

   Priority is iPhone 375–430px. Tablet is mostly untouched.
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px){

  /* ── Layout primitives ─────────────────────────────── */
  :root{
    --pad-x: 22px;
    --rail-inset: 8px;
    --eyebrow-gap: 28px;
  }
  body{ overflow-x:hidden; }

  /* ── Decorative system — quieter on mobile ─────────── */
  /* Larger, present orb — anchors the upper half of the hero */
  .orb{
    width:115vw;
    height:115vw;
    max-width:none;
    max-height:none;
    top:38%;
    opacity:.9;
  }
  .orb-panel{ display:none; } /* full-bleed warm bg breaks on small screens */

  /* Edge text — keep the framing detail on both side rails. Bottom
     edges float above the tab bar; top edges sit below the nav. */
  .edge{ font-size:7px; letter-spacing:.16em; opacity:.55; }
  .edge-lt{ left:5px; top:54px; display:block; }
  .edge-lb{ left:5px; bottom:88px; display:block; }
  .edge-rt{ right:5px; top:54px; display:block; }
  .edge-rb{ right:5px; bottom:88px; display:block; }

  /* Blueprint marks — only the bottom-right minimal mark; size it down,
     anchor above the tab bar so it never overlaps content. */
  .bp-tr{ display:none !important; }
  .bp-br{
    bottom:88px !important;
    right:14px !important;
    transform:scale(.72) !important;
    transform-origin:bottom right;
    opacity:.7;
  }
  .bp-br .lbl{ font-size:6px; }
  /* On homepage Work bloom: keep mark hidden so it doesn't fight the panels */
  body.in-work .bp-br{ display:none !important; }
  /* On audit, hide blueprint entirely — page is dense already */
  body.audit .bp-br{ display:none !important; }

  /* ── Top nav — collapse to centered logo only ──────── */
  .nav{
    grid-template-columns:1fr;
    padding:10px 22px;
    pointer-events:none; /* logo link still clickable below */
  }
  .nav .left,
  .nav .right{ display:none; }
  .nav .logo{ pointer-events:auto; }
  .nav .logo img{ height:46px; }
  .nav.scrolled{ padding-top:6px; padding-bottom:16px; }

  /* ── Mobile bottom tab bar (injected by mobile-nav.js) ── */
  .m-tabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    align-items:stretch;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background:rgba(240,237,232,.92);
    backdrop-filter:blur(18px) saturate(1.05);
    -webkit-backdrop-filter:blur(18px) saturate(1.05);
    border-top:.5px solid rgba(42,37,32,.10);
    box-shadow:0 -8px 24px rgba(42,37,32,.04);
    font-family:"Courier New", ui-monospace, monospace;
  }
  .m-tab{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 4px 7px;
    color:rgba(42,37,32,.55);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s ease;
  }
  /* Eyebrow-style horizontal tick above every label — mimics the section
     eyebrows used across the rest of the site. */
  .m-tab-mark{
    position:relative;
    width:18px;
    height:1px;
    background:rgba(42,37,32,.32);
    border:0;
    transition:width .25s ease, height .25s ease, background .25s ease,
               border .25s ease;
  }
  .m-tab-dot{ display:none; } /* legacy circle suppressed */
  .m-tab-label{
    font-family:"Courier New", ui-monospace, monospace;
    font-size:9.5px;
    font-weight:400;
    letter-spacing:.22em;
    text-transform:uppercase;
    line-height:1;
  }
  /* Active state: the eyebrow tick becomes a hollow blueprint square. */
  .m-tab.active{ color:var(--ink); }
  .m-tab.active .m-tab-mark{
    width:8px;
    height:8px;
    background:transparent;
    border:.7px solid var(--amber);
  }
  .m-tab-cta .m-tab-mark{ background:rgba(185,120,28,.55); }
  .m-tab-cta.active .m-tab-mark{
    background:transparent;
    border-color:var(--amber);
  }

  /* When audit results is on, body has scrollable height — pad so tab bar
     doesn't overlap the final CTA. */
  body.audit.on-results .audit-stage{ padding-bottom:120px !important; }

  /* On the welcome/results audit screens body switches between fixed and
     scrolling; the tab bar floats above either way. Add bottom padding
     on the audit body so the formula/CTA isn't covered. */
  body.audit { padding-bottom:0; }

  /* ────────────────────────────────────────────────────────
     HOMEPAGE — Second Nature - Homepage.html
     ──────────────────────────────────────────────────────── */

  /* Hero — pin content to bottom of viewport, leaving the upper half
     as organic negative space for the orb. */
  .hero{
    min-height:calc(100vh - 72px); /* leave room for tab bar */
    padding-top:96px;
    padding-bottom:32px;
    justify-content:flex-end;
  }
  .hero .eyebrow{
    /* Keep eyebrows at the desktop 10px size — they were shrinking to
       7.5px which read as illegible on phones. Only tighten the tick
       and tighten the bottom gap; type stays at full size. */
    letter-spacing:.22em;
    gap:8px;
    margin-bottom:18px;
  }
  .hero .eyebrow .tick{ width:18px; }
  .hero h1.display{
    font-size:34px !important;
    line-height:1.02;
    letter-spacing:-.032em;
  }
  /* Inline-styled spans on homepage hero ("font-size:65px") need overriding */
  .hero h1.display span{ font-size:34px !important; line-height:1.02; }
  .hero .pencil{
    width:78vw; height:14px;
    margin-top:12px;
    opacity:.45;
  }
  .hero .bottomrow{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin-top:24px;
  }
  .hero .hero-sub{ font-size:13.5px; line-height:1.62; max-width:none; }
  /* Drop the "Art of Innovation / Science of Execution" tagline on
     mobile — it competes with the body copy and crowds the bottom. */
  .hero .tagline{ display:none; }
  .hero .footbar{
    position:relative;
    left:auto; right:auto; bottom:auto;
    margin-top:28px;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    font-size:7.5px;
    letter-spacing:.16em;
  }
  .hero .footbar .scroll .line{ width:32px; }
  .hero .footbar > div:nth-child(2){ display:none; } /* "01 · Positioning   02 · Systems..." crowds */

  /* Our Model */
  .model{ padding:72px var(--pad-x) 72px; }
  /* Eyebrows on mobile keep their desktop 10px size — only the
     letter-spacing relaxes a hair and the tick shrinks to 18px. */
  .model .label{ letter-spacing:.20em; }
  .model .label::before{ width:18px; }
  .model .billboard{ grid-template-columns:1fr; gap:28px; }
  .model .display,
  .model .display span,
  .model .display i,
  .model .display span span{
    font-size:30px !important;
    line-height:1.08 !important;
  }
  .model .copy{ font-size:14px; line-height:1.68; }

  /* The Work — un-sticky and horizontal swipe between pillars */
  .work-outer{ height:auto; }
  .work-sticky{
    position:relative;
    height:auto;
    overflow:visible;
    padding:64px 0 40px;
  }
  .work-sticky-header{
    position:relative;
    top:auto; left:auto; right:auto;
    padding:0 var(--pad-x);
    margin-bottom:80px;
    gap:14px;
  }
  .work-sticky-header .label{ letter-spacing:.20em; align-items:flex-start; }
  .work-sticky-header .label::before{ width:18px; }
  .work-sticky-header{ align-items:flex-start; text-align:left; }
  .work-sticky-header .work-title{
    /* Body Outfit treatment on mobile too — match the desktop switch
       from Cormorant display to small regular prose. */
    font-family:"Outfit",sans-serif;
    font-weight:300;
    font-style:normal;
    font-size:14px;
    line-height:1.55;
    letter-spacing:0;
    text-align:left;
    max-width:none;
    gap:.9em;
  }
  .work-sticky-header .work-title .coda{ line-height:1.4; gap:0; }
  /* Horizontal scroll-snap carousel for the four domain panels.
     The wrapping .work-mobile-track div is inserted by mobile-nav.js. */
  .work-mobile-track{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
    /* Hint the user that there's more to the right */
    padding-bottom:8px;
  }
  .work-mobile-track::-webkit-scrollbar{ display:none; }
  .domain-panel{
    position:relative;
    inset:auto;
    flex:0 0 calc(100% - 28px);
    width:calc(100% - 28px);
    margin:0 14px;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    padding:32px 22px 32px;
    border-top:0;
    /* Frosted square card — no border, just a soft drop shadow */
    background:rgba(240,237,232,.32);
    backdrop-filter:blur(18px) saturate(1.05);
    -webkit-backdrop-filter:blur(18px) saturate(1.05);
    border:0;
    border-radius:0;
    box-shadow:0 2px 14px rgba(42,37,32,.035);
  }
  .panel-content{ max-width:none; }
  .panel-text{ max-width:none; align-items:flex-start; text-align:left; }
  .meta-row{ justify-content:flex-start; margin-bottom:14px; }
  .principle{
    font-size:26px !important;
    line-height:1.08;
    letter-spacing:-.022em;
  }
  .panel-text .tagline{
    font-size:16px !important;
    text-align:left;
    margin-bottom:14px;
    max-width:none;
  }
  .rule{ margin:0 0 16px 0; }
  .body{ font-size:14px; line-height:1.65; text-align:left; max-width:none; }
  .prog-dots{ justify-content:flex-start; margin-top:22px; }
  .prog-dot{ width:7px; height:7px; } /* slightly larger as nav affordance */

  /* Duality: forms one continuous shape — Blueprint (top, parchment)
     flows seamlessly into Unlock (bottom, frosted transparent), with
     rounded corners only at the very outer top + outer bottom. */
  .duality{ padding:32px 14px; }
  .duality-grid{
    border-radius:0;
    background:transparent;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:0;
    border-radius:22px;
  }
  .duality-panel{
    padding:48px 26px;
    min-height:auto;
    border:0 !important;
    border-radius:0;
    box-shadow:none !important;
  }
  /* Blueprint (top) — keep the solid parchment background like the
     regular site, with rounded TOP corners only. */
  .duality-left{
    background:var(--paper) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:22px 22px 0 0;
  }
  /* Unlock (bottom) — transparent frosted so the orb shines through,
     rounded BOTTOM corners only. */
  .duality-right{
    background:rgba(240,237,232,.18) !important;
    backdrop-filter:blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.05) !important;
    border-radius:0 0 22px 22px;
  }
  .duality-content{ gap:20px; }
  .d-display,
  .d-display .italic{ font-size:30px !important; line-height:1.08 !important; }
  .d-body{ font-size:14px; line-height:1.65; gap:14px; }
  .d-body .d-close{ font-size:16px; line-height:1.4; }
  .duality-blueprint{ display:none; } /* removed at small widths to keep panel clean */

  /* CTA */
  .cta{
    padding:48px var(--pad-x) 56px;
    min-height:auto;
    position:relative; /* anchor for .cta-coords side detail */
  }
  .cta .copy{ font-size:22px !important; line-height:1.3; }
  .cta .btn{ padding:14px 28px; font-size:13px; }

  /* Miami coordinates rebuilt as horizontal corner marks that FRAME
     the CTA section — latitude top-left, longitude top-right, MIA
     stamp bottom-right. Each piece has a thin amber tick line so the
     whole assembly reads as architectural section marks bracketing
     the schedule-a-call composition. */
  .cta-coords{
    position:static;
    display:contents;
    pointer-events:none;
  }
  .cta-coords .cc-lat,
  .cta-coords .cc-lng,
  .cta-coords .cc-loc{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:"Courier New", ui-monospace, monospace;
    font-size:9px;
    font-weight:400;
    letter-spacing:.20em;
    line-height:1;
    color:rgba(42,37,32,.50);
    text-transform:uppercase;
    white-space:nowrap;
  }
  /* Latitude — top-left corner, tick extends to the RIGHT of the label. */
  .cta-coords .cc-lat{
    top:14px;
    left:var(--pad-x);
  }
  .cta-coords .cc-lat::after{
    content:"";
    display:block;
    width:18px;
    height:1px;
    background:rgba(185,120,28,.55);
  }
  /* Longitude — top-right corner, tick extends to the LEFT of the label. */
  .cta-coords .cc-lng{
    top:14px;
    right:var(--pad-x);
    flex-direction:row-reverse;
  }
  .cta-coords .cc-lng::after{
    content:"";
    display:block;
    width:18px;
    height:1px;
    background:rgba(185,120,28,.55);
  }
  /* MIA stamp — bottom-right corner of the section. */
  .cta-coords .cc-loc{
    bottom:14px;
    right:var(--pad-x);
    flex-direction:row-reverse;
    letter-spacing:.28em;
    font-size:8px;
    color:rgba(42,37,32,.42);
  }
  .cta-coords .cc-loc::after{
    content:"";
    display:block;
    width:10px;
    height:1px;
    background:rgba(185,120,28,.45);
  }
  /* The default vertical-stack inline-element separators from earlier
     iterations need to be neutralized. */
  .cta-coords .cc-lng::before,
  .cta-coords .cc-loc::before{ content:none !important; }
  /* Reset the bottom padding bump that was for an inline coord plate
     — corner placement doesn't need it. */
  .cta{ padding-bottom:48px; padding-top:64px; }

  /* Footer — single tight band, centered. The desktop 4-column grid
     reads odd at phone widths (lopsided columns), so on mobile we
     collapse to a centered inline row of links with a hairline rule
     above the copyright meta. The bottom tab bar already covers
     About / Clients, Friction Audit is in the header CTA pill, and
     the Miami coords moved into the CTA — leaving Privacy · LinkedIn
     · email as the only links here. */
  footer.foot{
    padding:28px var(--pad-x) calc(96px + env(safe-area-inset-bottom, 0px));
    text-align:center;
  }
  .foot-cols{
    display:flex !important;
    flex-flow:row wrap;
    align-items:center;
    justify-content:center;
    grid-template-columns:none;
    gap:0 22px;
    row-gap:0;
    max-width:none;
    margin:0 auto;
  }
  /* Column 1 = About / Clients → in bottom tab bar already. Hide. */
  .foot-cols > .foot-col:nth-child(1){ display:none !important; }
  /* Column 2 = Friction Audit / Privacy → drop Friction Audit (it's
     a persistent CTA pill in the header) and keep Privacy as an
     inline link. */
  .foot-cols > .foot-col:nth-child(2){
    display:contents;
  }
  .foot-cols > .foot-col:nth-child(2) > a{ display:none; }
  .foot-cols > .foot-col:nth-child(2) > a[href*="Privacy"]{ display:inline-block; }
  /* Column 3 = email / LinkedIn → render inline. */
  .foot-cols > .foot-col:nth-child(3){ display:contents; }
  /* Every visible link in the row shares the same treatment. */
  .foot-col a{
    font-family:"Courier New", ui-monospace, monospace !important;
    font-size:10px !important;
    letter-spacing:.18em !important;
    text-transform:uppercase;
    color:rgba(42,37,32,.62) !important;
    line-height:1;
    padding:8px 0;
    transition:color .2s ease;
  }
  .foot-col a:hover{ color:var(--ink) !important; }
  /* Meta row — own line below, hairline rule, centered, dim. */
  .foot-meta{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    text-align:center;
    width:100%;
    flex:0 0 100%;
    margin-top:14px;
    padding-top:14px;
    border-top:.5px solid rgba(42,37,32,.10);
    gap:0;
  }
  .foot-meta > span{
    font-family:"Courier New", ui-monospace, monospace;
    font-size:9px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(42,37,32,.42);
    line-height:1.3;
  }
  /* Hide the Miami coords span — they live in the CTA now. */
  .foot-meta > span:nth-child(2){ display:none; }

  /* ────────────────────────────────────────────────────────
     SUBPAGES — About.html / Clients.html (.sub-* sections)
     ──────────────────────────────────────────────────────── */

  .sub-hero{
    min-height:calc(100vh - 72px);
    padding-top:96px;
    padding-bottom:32px;
    justify-content:flex-end;
  }
  .sub-hero .label{ letter-spacing:.20em; gap:10px; }
  .sub-hero .label::before{ width:18px; }
  .sub-hero h1.sub-display{
    font-size:34px !important;
    line-height:1.04;
    margin-bottom:24px;
  }
  .sub-hero h1.sub-display span{ font-size:34px !important; line-height:1.04; }
  .sub-hero .sub-lede{ font-size:15px; line-height:1.62; }

  /* Generic sub-section */
  .sub-section{ padding:64px var(--pad-x) 64px; }
  .sub-section .label{ letter-spacing:.20em; }
  .sub-section .label::before{ width:18px; }
  .sub-section .billboard{ grid-template-columns:1fr; gap:24px; }
  .sub-section .display,
  .sub-section .display span,
  .sub-section .display i,
  .sub-section .display span span{
    font-size:28px !important;
    line-height:1.1 !important;
  }
  /* About — inline-styled "What makes us different" h2 needs override */
  .sub-section h2[style]{
    font-size:24px !important;
    line-height:1.18 !important;
  }
  .sub-section .copy{ font-size:14px; line-height:1.65; }
  .sub-section .copy .close{ font-size:16px; line-height:1.4; margin-top:18px; }

  /* Case studies */
  .case-studies{ padding:48px var(--pad-x) 80px; }
  .case-studies > .label{ letter-spacing:.20em; margin-bottom:24px; }
  .case-studies > .label::before{ width:18px; }
  .case-studies .cs-title{
    font-size:30px !important;
    line-height:1.06;
    margin-bottom:40px;
  }
  /* Case row — mobile layout.
     mobile-nav.js does two things at mount on cases that have an image:
       1. moves .cs-name + .cs-scope into a new .cs-header sibling
       2. adds .cs-mobile-grid class on the .case

     That gives us a clean 3-child structure ([cs-image] [cs-header] [cs-text])
     we can grid: row 1 pairs image + header (vertically centered), row 2
     contains the cs-text with rule / body / highlight / outcome / brand-strip
     flowing full-width.

     Cases without an image (e.g. About's Founder block) skip the wrap and
     use plain block layout — they're text-only sections. */
  .case-studies .case{
    padding:32px 0;
  }
  .case-studies .case:only-of-type{
    padding-top:0;
    padding-bottom:0;
  }
  .case.cs-mobile-grid{
    display:grid !important;
    grid-template-columns:84px 1fr !important;
    grid-template-areas:
      "img header"
      "text text" !important;
    column-gap:18px !important;
    row-gap:18px !important;
    align-items:center !important;
    --cs-circle:84px !important;
  }
  .case.cs-mobile-grid .cs-image,
  .case.cs-mobile-grid.rev .cs-image{
    position:relative;
    grid-area:img !important;
    float:none !important;
    width:84px !important;
    height:84px !important;
    flex:none !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    align-self:center !important;
    justify-self:start !important;
    order:0 !important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s ease;
    isolation:isolate;
    shape-outside:none !important;
  }
  .case.cs-mobile-grid .cs-image image-slot{
    width:84px !important;
    height:84px !important;
    display:block;
    border-radius:50%;
    overflow:hidden;
  }
  .case.cs-mobile-grid .cs-image:active{ transform:scale(.97); }
  .case.cs-mobile-grid .cs-image::after{
    content:'';
    position:absolute;
    inset:-2px;
    border:.5px solid rgba(42,37,32,.18);
    border-radius:50%;
    pointer-events:none;
  }

  /* Header next to the circle */
  .case.cs-mobile-grid .cs-header{
    grid-area:header !important;
    align-self:center !important;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }
  .case.cs-mobile-grid .cs-name{
    display:block;
    font-size:22px !important;
    line-height:1.15;
    margin:0;
  }
  .case.cs-mobile-grid .cs-scope{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
    font-size:9px;
    letter-spacing:.16em;
    margin:0;
  }

  /* The leftover cs-text holds rule + body + highlight + outcome below */
  .case.cs-mobile-grid .cs-text,
  .case.cs-mobile-grid.rev .cs-text{
    grid-area:text !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px;
    order:auto !important;
    flex:none !important;
    width:auto !important;
    max-width:none !important;
    align-self:stretch !important;
  }
  .case.cs-mobile-grid .cs-rule{
    display:block;
    width:84px;
    height:.5px;
    background:rgba(185,120,28,.55);
    margin:0;
  }
  .case.cs-mobile-grid .cs-body{
    font-size:13.5px;
    line-height:1.65;
    margin:0;
  }
  .case.cs-mobile-grid .cs-highlight{
    font-size:13px;
    line-height:1.65;
    padding-top:16px;
    margin:0;
  }
  .case.cs-mobile-grid .cs-highlight .hl-prefix{ font-size:14px; }
  .case.cs-mobile-grid .cs-outcome{
    flex-wrap:wrap;
    gap:6px 10px;
    padding-top:16px;
    margin:0;
  }
  .case.cs-mobile-grid .cs-outcome .o-text{ font-size:14px; line-height:1.45; }
  .case.cs-mobile-grid .cs-outcome .o-label{ font-size:8px; letter-spacing:.18em; }

  /* Founder-style case (no image) — plain stack, no grid. */
  .case:not(.cs-mobile-grid){
    display:block !important;
    --cs-circle:0 !important;
  }
  .case:not(.cs-mobile-grid) .cs-text{
    display:flex !important;
    flex-direction:column !important;
    gap:14px;
    width:100% !important;
    max-width:none !important;
  }
  .case:not(.cs-mobile-grid) .cs-name{ font-size:24px !important; line-height:1.1; margin:0; }
  .case:not(.cs-mobile-grid) .cs-body{ font-size:13.5px; line-height:1.7; margin:0; }
  .case:not(.cs-mobile-grid) .cs-scope{ font-size:9px; letter-spacing:.16em; gap:6px 10px; }

  /* ── Case-image lightbox: tapping the thumbnail opens the image in
     a centered overlay so you can actually see it. The overlay is
     created at runtime by mobile-nav.js. ──────────────────────── */
  .cs-lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(42,37,32,.62);
    backdrop-filter:blur(10px) saturate(1.05);
    -webkit-backdrop-filter:blur(10px) saturate(1.05);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    padding:24px;
  }
  .cs-lightbox.open{
    opacity:1;
    pointer-events:auto;
  }
  .cs-lightbox-img{
    width:min(78vw, 360px);
    height:min(78vw, 360px);
    border-radius:50%;
    overflow:hidden;
    background:rgba(240,237,232,.5);
    box-shadow:0 18px 60px rgba(0,0,0,.35);
    filter:sepia(.18) saturate(.9) contrast(1.02) brightness(1.01);
    transform:scale(.92);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .cs-lightbox.open .cs-lightbox-img{ transform:scale(1); }
  .cs-lightbox-img image-slot{
    display:block;
    width:100%; height:100%;
  }
  .cs-lightbox-caption{
    position:absolute;
    bottom:max(40px, calc(env(safe-area-inset-bottom, 0px) + 32px));
    left:24px; right:24px;
    text-align:center;
    color:rgba(240,237,232,.86);
    font-family:"Courier New", ui-monospace, monospace;
    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;
  }
  .cs-lightbox-close{
    position:absolute;
    top:max(20px, env(safe-area-inset-top, 0px));
    right:18px;
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(240,237,232,.12);
    border:.5px solid rgba(240,237,232,.30);
    color:rgba(240,237,232,.92);
    font-family:"Courier New", monospace;
    font-size:14px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }

  /* Brand strip */
  .brand-strip-inline{ margin-top:24px; }
  .brand-track{ gap:22px; padding-left:22px; }
  .brand-mark img,
  .brand-mark svg{ height:22px; max-width:96px; }
  .brand-mark img[src$="stanford.svg"]{ height:32px; max-width:140px; }
  .brand-mark img[src$="chantecaille.png"],
  .brand-mark img[src$="harry-winston.png"]{ height:24px; max-width:120px; }
  .brand-mark img[src$="grability.png"]{ height:16px; max-width:90px; }
  .brand-mark img[src$="tom-ford.png"],
  .brand-mark img[src$="plug-and-play.png"]{ height:15px; max-width:88px; }

  /* About — team grid */
  .team{ padding:64px var(--pad-x) 64px; }
  .team-head{ grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
  .team-head .display,
  .team-head .display span{
    font-size:28px !important;
    line-height:1.1 !important;
  }
  .team-head .copy{ font-size:14px; line-height:1.65; }
  .team-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 16px; }
  .member .portrait{ margin-bottom:12px; }
  .member .name{ font-size:14px; }
  .member .role{ font-size:8.5px; }
  .member .role i{ font-size:10px; }

  /* About — principles */
  .principles{ padding:56px var(--pad-x) 56px; }
  .principles-head{ gap:18px; margin-bottom:36px; }
  .principles-head .display{ font-size:26px !important; line-height:1.1; }
  .principles-grid{ grid-template-columns:1fr; gap:28px; }
  .tenet{ column-gap:18px; }
  .tenet .num-wrap{ min-width:64px; }
  .tenet .ghost-num{ font-size:48px; }
  .tenet .pencil-num{ font-size:14px; left:6px; }
  .tenet .t-text h4{ font-size:17px; }
  .tenet .t-text p{ font-size:13.5px; line-height:1.6; }

  /* ────────────────────────────────────────────────────────
     FRICTION AUDIT — Friction Audit.html
     ──────────────────────────────────────────────────────── */

  /* Allow vertical scroll on every audit screen — fixed-height /
     overflow:hidden doesn't work on phones (steps overflow the viewport). */
  body.audit{
    height:auto !important;
    min-height:100vh;
    overflow:auto !important;
    display:block !important;
  }
  body.audit .audit-stage{
    flex:none;
    min-height:auto;
    padding-top:84px;
    padding-bottom:120px; /* clear the tab bar */
  }
  body.audit .foot{ display:none; } /* the bottom tab bar replaces it */

  /* Meta row + progress rail — tighter */
  .audit-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:0 var(--pad-x);
    margin-bottom:14px;
  }
  .audit-meta .ident{ font-size:8px; }
  .audit-meta .ident .title{ font-size:9px; }
  .audit-meta .counter{ font-size:8px; }

  .audit-progress{
    margin:0 var(--pad-x) 28px var(--pad-x);
    height:42px;
  }
  .audit-progress .axis,
  .audit-progress .axis-fill{ top:20px; }
  .audit-progress .axis-cap-l,
  .audit-progress .axis-cap-r{ top:16px; }
  .knot{ height:42px; min-width:12px; }
  .knot .sq{ top:20px; }
  .knot.current .sq{ width:9px; height:9px; margin:-4.5px 0 0 -4.5px; }
  .knot .now-tag{ top:30px; font-size:7px; letter-spacing:.16em; }
  .knot .now-tag::before,
  .knot .now-tag::after{ width:4px; }
  .knot .lbl{ font-size:7px; letter-spacing:.14em; }
  .knot .tick-down{ top:25px; height:5px; }

  /* Stage / step */
  body.audit .stage-wrap{ padding:0 var(--pad-x); }
  .step{ max-width:none; }
  .step .step-eye{ font-size:8.5px; margin-bottom:14px; }
  .step .prompt{
    font-size:24px !important;
    line-height:1.12;
    letter-spacing:-.018em;
  }
  .step.welcome .prompt{
    font-size:34px !important;
    line-height:1.04;
    letter-spacing:-.032em;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .step.stage-step .prompt,
  .step.team-step .prompt,
  .step.question-step .prompt{ font-size:22px !important; }
  .step .sub{ font-size:14px !important; line-height:1.45; max-width:none; }

  /* Welcome screen */
  body.audit.on-welcome .audit-stage{
    padding-top:108px;
    padding-bottom:140px;
    justify-content:flex-start;
    min-height:auto;
  }
  .welcome{ max-width:none; }
  .welcome .welcome-eye{ font-size:9px; margin-bottom:18px; }
  .welcome .prompt{
    font-size:34px !important;
    line-height:1.04;
    letter-spacing:-.032em;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .welcome .prompt .line + .line{ margin-top:5px !important; }
  .welcome .pencil-rule{ width:60vw; margin:10px auto 16px; }
  .welcome .lede{ font-size:14px; line-height:1.55; margin-bottom:22px; max-width:none; }
  .welcome .email-row{ flex-direction:column; gap:10px; max-width:none; margin-bottom:18px; }
  .welcome .email-row input{ text-align:left; padding:10px 4px; }
  .welcome .email-note{ font-size:9px; margin-bottom:24px; }
  .welcome .btn-primary{ padding:13px 24px; font-size:13px; }

  /* Choice grids — stack to single column */
  .choice-grid,
  .choice-grid.cols-3,
  .choice-grid.flow-col-3,
  .choice-grid.flow-col-4{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-flow:row !important;
    max-width:none;
    gap:6px;
  }
  .choice{
    padding:12px 14px;
    font-size:13.5px;
    gap:12px;
  }
  .choice .marker{ font-size:8.5px; width:18px; }
  .choice .hint{ font-size:12px; padding-right:14px; }
  .choice.selected::after{ right:12px; }

  /* Scale slider */
  .scale-wrap{ margin:24px 0 14px 0; max-width:none; }
  .scale-anchors{ font-size:8px; letter-spacing:.16em; }
  .scale-track{ height:78px; }
  .scale-track .track-line,
  .scale-track .track-fill{ left:6%; right:6%; top:14px; }
  .scale-track .track-fill{ left:6%; }
  .scale-track .track-cap-l{ left:6%; }
  .scale-track .track-cap-r{ right:6%; }
  .scale-track .stop .stop-num{ font-size:10px; }
  .scale-track .stop .stop-label{
    font-size:7.5px;
    top:46px;
    letter-spacing:.14em;
    padding:0 4px;
  }
  .scale-row{ grid-template-columns:1fr !important; gap:6px; }
  .scale-cell{ flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 16px; }
  .scale-cell .pt{ font-size:22px; }
  .scale-cell .pt-label{ max-width:none; text-align:left; font-size:13px; }

  /* Footer nav row */
  .nav-row{ max-width:none; padding-top:18px; }
  .btn-primary{ padding:13px 26px; font-size:13px; }
  .btn-ghost{ font-size:11px; }

  /* ── Results screen ─────────────────────────────────── */
  body.audit.on-results .audit-stage{
    padding-top:108px;
    padding-bottom:140px;
  }
  .results{ max-width:none; }
  .results-grid{
    grid-template-columns:1fr !important;
    gap:48px !important;
    align-items:start;
    margin-top:4px;
  }
  .results-eye{ font-size:9px; margin-bottom:18px; }
  .cost-block{ padding-right:0; }
  .cost-block .cost-prompt{
    font-size:26px !important;
    line-height:1.1;
    letter-spacing:-.02em;
    max-width:none;
  }
  .cost-block .cost-prompt span{ display:inline; } /* let them wrap naturally */
  .cost-block .annual{ font-size:15px; line-height:1.5; }
  body.audit.on-results .cost-block .monthly{
    font-size:56px !important;
    letter-spacing:-.04em;
  }

  /* Formula — break to multi-row on phones */
  .cost-formula{ margin-top:24px; padding-top:16px; }
  .cost-formula .formula-row{
    gap:4px 6px;
  }
  .cost-formula .f-token b{ font-size:15px; }
  .cost-formula .f-token span{ font-size:7.5px; letter-spacing:.12em; }
  .cost-formula .f-op,
  .cost-formula .f-equals{ font-size:14px; padding:0 2px; }
  .cost-formula .formula-note{ font-size:12px; line-height:1.55; max-width:none; }

  .starting-point{ margin-top:24px; padding-top:16px; }
  .starting-point .start-line{ font-size:14px; line-height:1.6; max-width:none; }

  /* Results CTA */
  .results-cta{ flex-direction:column; align-items:flex-start; gap:14px; margin-top:18px; }
  .cta-link{ padding:11px 18px; font-size:13.5px; }
  .btn-ghost{ font-size:11px; }

  /* Friction map */
  .fmap .fmap-eye{ font-size:9px; margin-bottom:18px; }
  .fmap .score-readout{ font-size:16px; }
  .fmap .bar-list{ gap:14px; }
  .bar{ gap:4px 14px; }
  .bar .domain{ font-size:11.5px; letter-spacing:.10em; }
  .bar .score{ font-size:10px; letter-spacing:.14em; }
  .bar.flagged .domain::after{ font-size:11px; }

  /* Results narrative */
  .results-narrative{
    grid-template-columns:1fr !important;
    gap:28px !important;
    margin-top:40px;
    padding-top:32px;
  }
  .results-narrative h4{ font-size:12px; letter-spacing:.08em; }
  .results-narrative p{ font-size:14px; line-height:1.7; }

  /* ────────────────────────────────────────────────────────
     Hover-only interactions — show resting state
     ──────────────────────────────────────────────────────── */
  /* Pill button: no swap, just show the primary label */
  .nav .pill{ pointer-events:auto; } /* (overridden hidden anyway) */
  .nav .pill .a{ opacity:1 !important; }
  .nav .pill .b{ opacity:0 !important; }
}

/* ── iPhone SE / very narrow (≤375px) ── */
@media (max-width: 380px){
  :root{ --pad-x: 18px; }
  .hero h1.display,
  .hero h1.display span{ font-size:30px !important; }
  .sub-hero h1.sub-display,
  .sub-hero h1.sub-display span{ font-size:30px !important; }
  .case-studies .cs-title{ font-size:26px !important; }
  .step .prompt{ font-size:22px !important; }
  .step.welcome .prompt,
  .welcome .prompt{ font-size:30px !important; }
  body.audit.on-results .cost-block .monthly{ font-size:48px !important; }
  .m-tab-label{ font-size:8.5px; letter-spacing:.16em; }
}