/* ============================================================
 * Yellow · Mobile-v2 Responsive Overlay · v2 (white liquid glass)
 *
 * One source of truth: this stylesheet sits ON TOP of the desktop
 * pages. Below 820px wide it transforms the same HTML into the
 * mobile-v2 design language — yellow band header, WHITE LIQUID
 * GLASS dock, EB Garamond italic typography, single-column
 * layouts, larger touch targets. Desktop view is untouched.
 *
 * Architecture:
 *   - mobile-v2-overlay.js  → injects the yellow band, glass
 *                             dock, and takeover menu DOM into
 *                             every page on small screens, and
 *                             defensively initialises the
 *                             .ye-sentence + .reveal animation
 *                             engines so text animations fire.
 *   - mobile-v2-overlay.css → restyles the page's existing
 *                             content (heroes, grids, forms,
 *                             showcase rows) for mobile.
 * ============================================================ */

/* Custom hover cursor (the magnifying/x-ray dot) removed site-wide, all widths */
.el-cursor, .nsm-cursor{ display:none !important; }
/* "In Motion" showcase removed site-wide — it repeated each page's own assets (client feedback) */
.nss{ display:none !important; }

@media (max-width: 820px){

  /* ── 1 · ROOT TOKENS ──────────────────────────────────── */
  :root{
    --mv2-yellow:#FCB116;
    --mv2-yellow-deep:#E59C00;
    --mv2-paper:#F4EFE0;
    --mv2-paper-2:#EAE3CD;
    --mv2-ink:#0E1A33;
    --mv2-ink-soft:#5A6483;
    --mv2-hairline:rgba(14,26,51,0.12);
    --mv2-ease:cubic-bezier(.16,1,.3,1);
  }

  html, body{ overflow-x:hidden !important; width:100% !important; }
  body{
    padding-top:54px !important;     /* room for the injected yellow band */
    padding-bottom:96px !important;  /* room for the glass dock */
    font-size:15px !important;
  }

  /* ── 2 · HIDE THE DESKTOP CHROME ──────────────────────── */
  .site-header,
  header.site-header,
  .nav-drawer,
  .nav-hamburger,
  .scroll-progress,
  .back-link{ display:none !important; }
  .site-footer{ display:none !important; }
  .mv2-only-desktop{ display:none !important; }

  /* ── 3 · INJECTED CHROME (yellow band, dock, takeover) ─── */
  .mv2-band{
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
    z-index:9000 !important;
    background:var(--mv2-yellow) !important;
    height:54px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    border-bottom:1px solid rgba(0,0,0,0.06) !important;
  }
  .mv2-band a{ display:inline-flex; align-items:center; }
  .mv2-band img{ height:24px !important; width:auto !important; }

  /* ── WHITE LIQUID GLASS DOCK ─────────────────────────── */
  .mv2-dock{
    position:fixed !important;
    bottom:22px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:9001 !important;
    display:flex !important; align-items:center !important; gap:6px !important;
    padding:9px 11px !important;
    background:rgba(255,255,255,0.62) !important;
    backdrop-filter:blur(28px) saturate(180%) brightness(1.05) !important;
    -webkit-backdrop-filter:blur(28px) saturate(180%) brightness(1.05) !important;
    border:1px solid rgba(255,255,255,0.55) !important;
    border-radius:100px !important;
    box-shadow:
      0 8px 32px rgba(14,26,51,0.16),
      0 2px 8px rgba(14,26,51,0.10),
      inset 0 0 0 1px rgba(255,255,255,0.4) !important;
  }
  .mv2-dock-btn{
    display:inline-flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    gap:4px !important;
    min-width:80px !important; height:auto !important;
    padding:8px 14px !important;
    border-radius:24px !important;
    background:transparent !important;
    color:var(--mv2-ink) !important;
    border:none !important; cursor:pointer !important;
    text-decoration:none !important;
    transition:background .25s var(--mv2-ease), transform .25s var(--mv2-ease) !important;
  }
  .mv2-dock-btn:active{ background:rgba(14,26,51,0.08) !important; transform:scale(0.94) !important; }
  .mv2-dock-btn.is-active,
  .mv2-dock-btn.is-menu{
    background:var(--mv2-yellow) !important;
    color:var(--mv2-ink) !important;
    box-shadow:0 4px 14px rgba(252,177,22,0.42) !important;
  }
  .mv2-dock-btn svg{ width:18px !important; height:18px !important; }
  .mv2-dock-label{
    font-family:'Jost',sans-serif !important;
    font-size:9px !important;
    letter-spacing:0.18em !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
    color:inherit !important;
    line-height:1 !important;
  }

  /* ── EDITORIAL TAKEOVER MENU · v3 ─────────────────────── */
  .mv2-takeover{
    position:fixed !important; inset:0 !important; z-index:9100 !important;
    background:rgba(244,239,224,0.99) !important;
    backdrop-filter:blur(26px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(26px) saturate(150%) !important;
    color:var(--mv2-ink) !important;
    transform:translateY(101%) !important;
    transition:transform .6s var(--mv2-ease) !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
    padding:0 !important; display:flex !important; flex-direction:column !important;
  }
  body.mv2-takeover-open .mv2-takeover{ transform:translateY(0) !important; }
  body.mv2-takeover-open{ overflow:hidden !important; }

  /* header row · Close (left) + centred wordmark */
  .mv2-takeover .mv2-mhead{
    position:relative !important; display:flex !important; align-items:center !important;
    justify-content:flex-start !important; padding:16px 20px !important;
    border-bottom:1px solid rgba(14,26,51,0.12) !important;
  }
  .mv2-takeover .mv2-close{
    display:inline-flex !important; align-items:center !important; gap:8px !important;
    background:rgba(14,26,51,0.05) !important; border:1px solid rgba(14,26,51,0.10) !important;
    border-radius:9px !important; padding:9px 15px !important; cursor:pointer !important;
    font-family:'Jost',sans-serif !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:0.1em !important; text-transform:uppercase !important; color:var(--mv2-ink) !important;
    -webkit-appearance:none !important; appearance:none !important;
  }
  .mv2-takeover .mv2-mlogo{ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; }
  .mv2-takeover .mv2-mlogo img{ height:20px !important; width:auto !important; display:block !important; }

  /* the list */
  .mv2-takeover .mv2-menu{ padding:6px 24px calc(150px + env(safe-area-inset-bottom)) !important; flex:1 0 auto !important; }
  .mv2-takeover .mv2-item{
    width:100% !important; display:flex !important; align-items:center !important; justify-content:flex-start !important;
    gap:12px !important; padding:24px 0 !important; margin:0 !important;
    border:0 !important; border-bottom:1px solid rgba(14,26,51,0.13) !important; background:none !important;
    font-family:'EB Garamond',serif !important; font-weight:500 !important; font-style:normal !important;
    font-size:clamp(31px, 8.4vw, 44px) !important; line-height:1 !important; letter-spacing:-0.02em !important;
    color:var(--mv2-ink) !important; text-decoration:none !important; text-align:left !important;
    -webkit-appearance:none !important; appearance:none !important; cursor:pointer !important;
    transition:color .25s var(--mv2-ease) !important;
  }
  .mv2-takeover .mv2-item.is-active{ color:var(--mv2-yellow-deep) !important; }
  .mv2-takeover .mv2-acc{ justify-content:space-between !important; }
  .mv2-takeover .mv2-lead{ display:inline-flex !important; align-items:flex-start !important; gap:9px !important; }
  .mv2-takeover .mv2-count{
    font-family:'Jost',sans-serif !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:0.02em !important; color:rgba(14,26,51,0.45) !important; margin-top:5px !important;
  }
  /* +/- indicator */
  .mv2-takeover .mv2-pm{ position:relative !important; width:19px !important; height:19px !important; flex:0 0 auto !important; }
  .mv2-takeover .mv2-pm::before,
  .mv2-takeover .mv2-pm::after{ content:"" !important; position:absolute !important; background:var(--mv2-ink) !important; transition:opacity .3s var(--mv2-ease), transform .3s var(--mv2-ease) !important; }
  .mv2-takeover .mv2-pm::before{ left:0 !important; top:50% !important; width:100% !important; height:1.6px !important; transform:translateY(-50%) !important; }
  .mv2-takeover .mv2-pm::after{ top:0 !important; left:50% !important; height:100% !important; width:1.6px !important; transform:translateX(-50%) !important; }
  .mv2-takeover .mv2-group.is-open .mv2-pm::after{ opacity:0 !important; transform:translateX(-50%) rotate(90deg) !important; }

  /* sub-panel · 2-col editorial grid */
  .mv2-takeover .mv2-sub{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 26px !important;
    max-height:0 !important; overflow:hidden !important; opacity:0 !important;
    transition:max-height .5s var(--mv2-ease), opacity .4s var(--mv2-ease), padding .5s var(--mv2-ease) !important;
  }
  .mv2-takeover .mv2-group.is-open .mv2-sub{ max-height:320px !important; opacity:1 !important; padding:2px 0 24px !important; }
  .mv2-takeover .mv2-sub a{
    font-family:'EB Garamond',serif !important; font-size:19px !important; font-style:normal !important;
    color:var(--mv2-ink-soft) !important; text-decoration:none !important; padding:10px 0 !important;
    letter-spacing:-0.01em !important; transition:color .2s var(--mv2-ease) !important;
  }
  .mv2-takeover .mv2-sub a.is-active{ color:var(--mv2-yellow-deep) !important; }

  /* entrance · header + rows fade up in sequence */
  .mv2-takeover .mv2-mhead,
  .mv2-takeover .mv2-menu > *{
    opacity:0 !important; transform:translateY(22px) !important;
    transition:opacity .55s var(--mv2-ease), transform .55s var(--mv2-ease) !important;
  }
  body.mv2-takeover-open .mv2-takeover .mv2-mhead,
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *{ opacity:1 !important; transform:none !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-mhead{ transition-delay:.04s !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *:nth-child(1){ transition-delay:.12s !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *:nth-child(2){ transition-delay:.19s !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *:nth-child(3){ transition-delay:.26s !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *:nth-child(4){ transition-delay:.33s !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *:nth-child(5){ transition-delay:.40s !important; }
  body.mv2-takeover-open .mv2-takeover .mv2-menu > *:nth-child(6){ transition-delay:.47s !important; }
  @media (prefers-reduced-motion:reduce){
    .mv2-takeover .mv2-mhead, .mv2-takeover .mv2-menu > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* When the dock Work button is in "menu open" state, give it a soft pulse */
  body.mv2-takeover-open .mv2-dock-btn#mv2-dock-menu{
    transform:scale(.94) !important;
    transition:transform .35s var(--mv2-ease) !important;
  }
  /* Takeover backdrop — subtle scale-up entrance reinforces the slide */
  .mv2-takeover{
    transform-origin:center bottom !important;
  }

  .mv2-footer{
    background:var(--mv2-ink) !important; color:rgba(244,239,224,0.6) !important;
    padding:30px 22px !important;
    font-family:'Jost',sans-serif !important;
    font-size:9px !important; letter-spacing:0.2em !important;
    text-transform:uppercase !important; font-weight:600 !important;
    text-align:center !important;
  }
  .mv2-footer em{ color:var(--mv2-yellow) !important; font-style:italic !important; }

  /* ── 4 · GLOBAL TYPOGRAPHY OVERRIDES ───────────────────── */
  h1, h2, h3, h4, h5, h6{
    font-family:'EB Garamond',serif !important;
    letter-spacing:-0.022em !important;
    text-wrap:balance;
  }
  .hero h1, .case-hero h1, .case-title,
  section.hero h1, h1.ye-sentence,
  .hero-title, .hero-greeting{
    font-family:'EB Garamond',serif !important;
    font-style:italic !important;
    font-weight:500 !important;
    font-size:clamp(34px, 9vw, 52px) !important;
    line-height:1.0 !important;
    letter-spacing:-0.022em !important;
    max-width:16ch !important;
    margin-bottom:20px !important;
  }
  /* Compose-time alignment so the greeting + body + pills sit centred and don't overflow on mobile */
  .hero{ text-align:center !important; }
  .hero-headline, .hero-body, .hero-tag, .hero .strap{ margin-left:auto !important; margin-right:auto !important; }
  .hero h1 em, .case-hero h1 em, .case-title em{ font-style:italic !important; }

  .chapter h2, .form-title, .roster-head h2, .culture-head h2,
  .intro h2, .roles-head h2, .pq blockquote, .work-head h2{
    font-size:clamp(30px, 8.5vw, 44px) !important;
    line-height:1.04 !important;
    letter-spacing:-0.022em !important;
  }

  .hero-body, .hero-tag, .case-tag, .hero .strap,
  .chapter-lead, .lead, p.lead{
    font-family:'EB Garamond',serif !important;
    font-size:clamp(16px, 4.4vw, 19px) !important;
    line-height:1.5 !important;
    max-width:42ch !important;
  }

  .eyebrow, .hero-eyebrow, .form-eyebrow, .nc-eyebrow,
  .cat-num, .roster-head .eyebrow, .culture-head .eyebrow,
  .roles-head .eyebrow{
    font-family:'Jost',sans-serif !important;
    font-size:10px !important;
    letter-spacing:0.22em !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
  }

  /* ── 5 · TEXT ANIMATIONS · CRITICAL ─────────────────────
     The desktop's .ye-sentence engine wraps each word in a span
     and fades it in. We do NOT override opacity or transform on
     these elements. The mobile-v2-overlay.js will defensively
     re-wrap any unwrapped .ye-sentence on the page so animations
     fire reliably on iOS Safari. */
  .ye-sentence .ye-word{
    will-change:opacity, transform !important;
  }
  /* Don't let earlier mobile rules disable the reveals */
  .reveal{
    transition-duration:1.1s !important;
    transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
  }

  /* ── 6 · CONTAINER PADDING ─────────────────────────────── */
  .wrap, .site-header-inner, .case-hero-content,
  .footer-inner, .form-grid, .work-head, .roster-head,
  .culture-head{
    padding-left:22px !important;
    padding-right:22px !important;
    max-width:100% !important;
  }
  section{ padding-left:0 !important; padding-right:0 !important; }
  .hero, .case-hero, .form-section, .roles-section,
  .culture-section, .roster, .intro, .clients-section,
  .pq, .pull, .next-case, .cta, .story, .chapter, .index{
    padding-top:50px !important;
    padding-bottom:50px !important;
  }
  body > section:first-of-type,
  .hero, .case-hero{ padding-top:36px !important; }

  /* ── 7 · GRIDS ─────────────────────────────────────────── */
  .form-grid, .story-grid, .chapter-head, .case-bottom,
  .nc-wrap, .work-head, .roster-head, .culture-head,
  .intro-grid, .cta-row{
    display:flex !important;
    flex-direction:column !important;
    gap:32px !important;
    align-items:stretch !important;
  }
  .cta-row{ gap:18px !important; }
  .cta-row h3{ width:100% !important; }

  .show-row, .show-row.reverse{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }
  .show-media{ aspect-ratio:9/16 !important; max-width:340px !important; margin:0 auto !important; }
  .show-media video{ width:100% !important; height:100% !important; object-fit:cover !important; }
  .show-meta{ padding:0 !important; }
  .show-meta h3{
    font-family:'EB Garamond',serif !important; font-style:italic !important;
    font-size:clamp(28px, 8vw, 36px) !important; line-height:1.04 !important;
  }
  .show-meta h3 br{ display:none; }
  .show-tag{ font-size:16px !important; line-height:1.5 !important; max-width:42ch !important; }

  .grid, .logo-grid, .brand-grid, .work-grid,
  .index-list, .timeline, .ch-media-grid,
  .culture-grid, .roles-grid, .nc-wrap{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  .nc-wrap{ grid-template-columns:1fr !important; }

  .category{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    padding:32px 0 !important;
  }
  .cat-meta h3{
    font-family:'EB Garamond',serif !important; font-style:italic !important;
    font-size:clamp(24px, 7vw, 30px) !important; line-height:1.05 !important;
  }
  .cat-list .brand{ font-size:15.5px !important; padding:6px 10px !important; }
  .cat-list .brand::after{ font-size:13px !important; right:-7px !important; }
  .logo-tile{
    aspect-ratio:3/2 !important;
    border-radius:10px !important;
  }
  /* Logo scale is governed by the unified optical system (same as desktop:
     62%/54% + .wide/.compact). Do NOT set a mobile-specific max-width/height
     here — that previously diverged the clients logos from desktop. The
     authoritative geometry lives in the `html body .logo-grid .logo-tile`
     block below (FIX 3). */

  .index-list{ grid-template-columns:1fr !important; gap:0 !important; }
  .index-row{ font-size:16px !important; padding:14px 0 !important; }

  .timeline{ grid-template-columns:repeat(2, 1fr) !important; gap:10px !important; }
  .year-card{ padding:18px 14px !important; aspect-ratio:3/4 !important; }
  .yr-year{ font-size:34px !important; }

  .ch-media-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:10px !important; }
  .ch-media-card.is-film{ grid-column:1 / -1 !important; max-width:340px !important; margin:0 auto !important; }

  /* ── 8 · FORMS ─────────────────────────────────────────── */
  form.jobs-form, form.contact-form{
    display:flex !important; flex-direction:column !important; gap:22px !important;
  }
  .field-row{
    display:flex !important; flex-direction:column !important; gap:22px !important;
  }
  .field{ display:flex !important; flex-direction:column !important; gap:6px !important; }
  label{
    font-family:'Jost',sans-serif !important;
    font-size:10px !important; letter-spacing:0.22em !important;
    text-transform:uppercase !important; font-weight:700 !important;
  }
  input, textarea, select{
    font-family:'EB Garamond',serif !important;
    font-size:17px !important; line-height:1.5 !important;
    padding:10px 0 12px !important; width:100% !important;
  }
  .submit{
    width:100% !important;
    padding:18px 26px !important;
    font-size:11px !important;
    justify-content:center !important;
    min-height:54px !important;
  }
  .submit-row{ flex-direction:column !important; align-items:stretch !important; gap:14px !important; }
  .submit-note{ text-align:center !important; }
  .side-card, .contact-card{
    position:static !important; top:auto !important;
    padding:34px 26px !important;
    border-radius:16px !important;
    margin-top:40px !important;
  }
  .side-card .h, .contact-card .h{
    font-size:clamp(24px, 6.6vw, 30px) !important; line-height:1.15 !important;
  }
  .contact-card .socials{ gap:14px !important; }
  .contact-card .socials a{ width:38px !important; height:38px !important; }

  /* ── 9 · MEDIA ─────────────────────────────────────────── */
  video, .show-video, .hero-video, .story-visual video, .ch-media-card video{
    width:100% !important; height:auto !important;
    border-radius:14px !important;
  }
  .story-visual{
    position:static !important;
    aspect-ratio:9/12 !important;
    max-width:340px !important;
    margin:0 auto 20px !important;
  }
  .ch-media-card{ border-radius:12px !important; }
  .ch-media-card.is-kv{ aspect-ratio:3/4 !important; }

  /* ── 11 · ABOUT · Top 10 team only on mobile ─────────────
     The About page renders ~63 team faces on desktop. On mobile
     we cap to the first 10 only. Broad selector set covers every
     class pattern likely used in the page's team grid. */
  .team-grid > *:nth-child(n+11),
  .team-roster > *:nth-child(n+11),
  #team-grid > *:nth-child(n+11),
  #teamGrid > *:nth-child(n+11),
  [class*="team-grid"] > *:nth-child(n+11),
  [class*="team-roster"] > *:nth-child(n+11),
  [class*="team-row"] > *:nth-child(n+11),
  .people-grid > *:nth-child(n+11),
  [data-team-grid] > *:nth-child(n+11),
  [data-team] > *:nth-child(n+11){
    display:none !important;
  }

  /* ── 12 · 2-COLUMN GRIDS · "Two assets next to each other" ──
     Belt-and-braces re-affirm 2-col layouts for every grid that
     would otherwise show one item per row on mobile. */
  .grid, .logo-grid, .brand-grid, .work-grid,
  .index-list, .timeline, .ch-media-grid,
  .culture-grid, .roles-grid, .kv-grid,
  .grid-4, .grid-3, .grid-2,
  .video-grid, .film-wall, .deliv-row,
  .case-row, .press-grid, .awards-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  /* Vertical 9:16 cells in 2-col still fit naturally */
  .video-cell.vertical{ aspect-ratio:9/16 !important; }
  .case-hero{ min-height:88vh !important; }

  /* ── LOGO THUMBNAIL UNIFORMITY (social hub · <820px) ──────────
     Keep the centred brand-logo scale identical to desktop so the
     Social hub tiles read uniformly on mobile — logo fills a fixed
     ~76% padded box, contain, never stretched/cropped, and the
     typeset wordmark fallback (when no PNG resolves) reads clean. */
  .brand .img img.logo-on-tile{
    position:absolute !important; inset:12% !important; margin:auto !important;
    width:auto !important; height:auto !important;
    max-width:76% !important; max-height:76% !important;
    object-fit:contain !important; object-position:center !important;
  }
  .brand .img img.logo-on-tile.lg{ max-width:84% !important; max-height:84% !important; inset:8% !important; }
  .brand .img img.logo-on-tile.sm{ max-width:66% !important; max-height:66% !important; inset:17% !important; }
  /* Full-bleed logos (opaque-bg source, set by the pixel classifier) cover the
     whole tile on mobile too — no coloured-border frame. Same class as desktop. */
  .brand .img img.logo-on-tile.fill{
    position:absolute !important; inset:0 !important; margin:0 !important;
    width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
    padding:0 !important; object-fit:cover !important; object-position:center !important;
  }
  .brand .img .wordmark-fallback{ font-size:clamp(20px, 6vw, 32px) !important; padding:14px !important; }

  /* ── 10 · MISC POLISH ─────────────────────────────────── */
  .ticker, .marquee{ font-size:18px !important; }
  .pq blockquote, .pull blockquote{
    font-size:clamp(24px, 7vw, 32px) !important;
    line-height:1.18 !important;
    padding:0 8px !important;
  }
  .pq cite, .pull .cite, .pull cite{ font-size:10px !important; margin-top:18px !important; }
  .nc-card, .next-case .nc-card{
    padding:30px 22px !important;
    min-height:auto !important;
    border-radius:16px !important;
  }
  .nc-card .nc-title, .nc-card h3{
    font-size:clamp(28px, 8vw, 36px) !important; line-height:1.04 !important;
  }
  .nc-arrow{ font-size:10px !important; }
  .yt-frame.yt-16-9{ aspect-ratio:16/9 !important; }
  .yt-frame iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; }
  .yt-rail{ display:none !important; }
  .yt-rail-label{ display:none !important; }
  .yt-lightbox, .lb{ padding:20px !important; }
  .story-visual, .side-card, .contact-card,
  [class*="sticky"]{ position:static !important; }

  .mv2-band, .mv2-dock, .mv2-takeover{ position:fixed !important; }

  /* ── 14 · BRANDING HOME · Section-specific mobile rules ───────────────
     Task #226 closes the gap between the desktop branding page and the
     overlay's generic mobile rules: 2-col video grids instead of stacked
     sections, the crafts grid + numbers grid held at 2-col below 820px,
     and the showcase row meta trimmed to fit a portrait card. */

  /* SHOWCASE · 5 stacked rows → 2-col grid of compact portrait cards */
  .page-branding-home .showcase .wrap{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:18px !important;
  }
  .page-branding-home .showcase .showcase-head,
  .page-branding-home .showcase .showcase-foot{ grid-column:1 / -1 !important; }
  .page-branding-home .showcase .show-row,
  .page-branding-home .showcase .show-row.reverse{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:0 !important;
    margin:0 !important;
    max-width:none !important;
  }
  .page-branding-home .showcase .show-row .show-media{
    aspect-ratio:4/5 !important;
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }
  .page-branding-home .showcase .show-row .show-media video,
  .page-branding-home .showcase .show-row .show-media img{
    width:100% !important; height:100% !important;
    object-fit:cover !important;
  }
  .page-branding-home .showcase .show-row .show-meta{ padding:0 4px !important; }
  .page-branding-home .showcase .show-row .show-num{
    font-size:10px !important;
    letter-spacing:0.18em !important;
    margin-bottom:4px !important;
  }
  .page-branding-home .showcase .show-row .show-meta h3{
    font-family:'EB Garamond',serif !important;
    font-style:italic !important;
    font-size:clamp(20px, 5.4vw, 26px) !important;
    line-height:1.06 !important;
    margin:0 0 6px !important;
  }
  .page-branding-home .showcase .show-row .show-meta h3 br{ display:none !important; }
  .page-branding-home .showcase .show-row .show-tag{ display:none !important; }
  .page-branding-home .showcase .show-row .show-stats{ display:none !important; }
  .page-branding-home .showcase .show-row .show-cta{
    font-size:10px !important;
    letter-spacing:0.18em !important;
    padding:8px 12px !important;
    margin-top:4px !important;
  }
  /* If an odd number of cards leaves an orphan, span it full width
     so the last tile reads intentionally, not abandoned. */
  .page-branding-home .showcase .show-row:last-of-type:nth-child(odd){ grid-column:1 / -1 !important; }
  .page-branding-home .showcase .show-row:last-of-type:nth-child(odd) .show-media{
    aspect-ratio:16/10 !important;
  }

  /* CRAFTS GRID · keep 2-col below 820px (was dropping to 1-col at 600) */
  .crafts-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:14px !important;
  }
  .crafts-grid .craft{ padding:18px 16px !important; }
  .crafts-grid .craft h3{
    font-family:'EB Garamond',serif !important;
    font-style:italic !important;
    font-size:clamp(18px, 5vw, 24px) !important;
    line-height:1.08 !important;
    margin:8px 0 6px !important;
  }
  .crafts-grid .craft .n{ font-size:9.5px !important; letter-spacing:0.2em !important; }
  .crafts-grid .craft p{ font-size:13px !important; line-height:1.45 !important; }

  /* NUMBERS · 2x2 stat grid on mobile, never 1-col */
  .nums-grid{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:0 !important;
    border-left:0 !important;
    border-top:1px solid var(--mv2-hairline) !important;
  }
  .num-cell{
    border-right:1px solid var(--mv2-hairline) !important;
    border-bottom:1px solid var(--mv2-hairline) !important;
    padding:24px 16px !important;
    min-height:auto !important;
  }
  .num-cell:nth-child(2n){ border-right:0 !important; }

  /* STATEMENT · trim the foot grid + tighten the reveal copy */
  .statement-foot{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:18px !important;
    padding-top:24px !important;
  }
  .statement-foot .col + .col{
    border-left:0 !important;
    padding-left:0 !important;
  }
  .statement .ye-sentence,
  .statement h2{
    font-size:clamp(28px, 7.4vw, 38px) !important;
    line-height:1.12 !important;
  }

  /* HERO · single-word title sits cleanly on the dark hero */
  .hero .hero-title{
    font-size:clamp(64px, 18vw, 108px) !important;
    line-height:0.94 !important;
    letter-spacing:-0.025em !important;
  }
  .hero .hero-tag{ font-size:15px !important; line-height:1.55 !important; }
  .hero .hero-foot{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:18px !important;
  }
  .hero .hero-foot .col.lede{ grid-column:1 / -1 !important; }

  /* BELIEF · operating-principle pull-quote, calmer on mobile */
  .belief blockquote,
  .belief .ye-sentence{
    font-size:clamp(22px, 6.2vw, 30px) !important;
    line-height:1.18 !important;
  }

  /* BRAND INDEX HEAD + SECTOR PILLS · scrollable filter, no wrap */
  .brand-index-head,
  .work-head{ gap:14px !important; }
  .cat-pills,
  .work .pills{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    padding-bottom:6px !important;
    margin:0 -18px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .cat-pills::-webkit-scrollbar,
  .work .pills::-webkit-scrollbar{ display:none !important; }
  .cat-pills .pill,
  .work .pills .pill{
    flex:0 0 auto !important;
    font-size:11px !important;
    padding:8px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v3 · MOBILE CHROME NORMALISATION · authoritative override (load-order
   wins). One source of truth for every page: the REAL v27 header +
   footer are used on mobile (identical everywhere → consistent), the
   injected band/dock/full-screen takeover are retired, the menu becomes
   a compact pop-out, the footer sits columns-2-up, heroes get breathing
   room, and sections / images / CGI render two-up.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){

  /* 1 · Retire injected chrome; restore the real, consistent chrome */
  .mv2-band, .mv2-dock, .mv2-takeover, .mv2-footer{ display:none !important; }
  body{ padding-top:58px !important; padding-bottom:0 !important; }

  header.site-header, .site-header{ display:block !important; }
  .site-footer{ display:block !important; }
  .nav-hamburger{ display:flex !important; }
  .site-nav{ display:none !important; }          /* desktop inline nav hidden; hamburger drives the menu */
  .site-header-inner{ padding:10px 20px !important; }
  .site-logo, .site-logo img, .site-logo .brand-img, .site-logo .mark{ height:34px !important; max-height:34px !important; }

  /* 2 · Menu = FULL-SCREEN LUXURY EDITORIAL MENU (v4) — the real nav-drawer.
     Yellow header bar with logo + animated ✕ stays on top; the menu rises
     from below as a paper editorial sheet. Large EB Garamond items, hairline
     dividers, Work shown as a 2-column labelled group. */
  .site-header{ z-index:9300 !important; }              /* header (with hamburger) sits above the sheet */
  .nav-hamburger{ z-index:9400 !important; position:relative !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) !important; }

  .nav-drawer{
    position:fixed !important; inset:0 !important; top:0 !important; right:0 !important; left:0 !important; bottom:0 !important;
    width:100vw !important; height:100% !important; max-height:none !important;
    background:rgba(244,239,224,0.99) !important;
    backdrop-filter:blur(26px) saturate(150%) !important; -webkit-backdrop-filter:blur(26px) saturate(150%) !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    transform:translateY(101%) !important; opacity:1 !important; visibility:visible !important;
    transition:transform .6s var(--mv2-ease) !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
    z-index:9200 !important; padding:0 !important; display:block !important;
  }
  .nav-drawer.is-open{ transform:translateY(0) !important; }
  .nav-drawer-inner{ display:block !important; padding:82px 24px calc(120px + env(safe-area-inset-bottom)) !important; gap:0 !important; max-width:none !important; align-items:stretch !important; }
  .nav-drawer-link{
    display:block !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:500 !important;
    font-size:clamp(31px, 8.4vw, 44px) !important; line-height:1 !important; letter-spacing:0.1em !important;
    color:var(--mv2-ink) !important; padding:24px 0 !important; border-bottom:1px solid rgba(14,26,51,0.13) !important;
    text-decoration:none !important;
  }
  /* Work group → big label + 2-column sub-links, like the reference's expanded section */
  .nav-drawer-group{ display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:26px !important; padding:0 !important; border-bottom:1px solid rgba(14,26,51,0.13) !important; }
  .nav-drawer-label{
    grid-column:1 / -1 !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:0.22em !important;
    font-size:10px !important; line-height:1 !important; color:#9A6A00 !important;
    padding:24px 0 14px !important; margin:0 !important;
  }
  .nav-drawer-link.sub{
    display:block !important; font-family:'Jost',sans-serif !important; font-style:normal !important;
    font-size:19px !important; line-height:1.2 !important; letter-spacing:0.1em !important;
    color:var(--mv2-ink-soft) !important; padding:10px 0 !important; border-bottom:0 !important; padding-left:0 !important;
  }
  /* entrance stagger for the menu rows */
  .nav-drawer .nav-drawer-inner > *{ opacity:0 !important; transform:translateY(22px) !important; transition:opacity .55s var(--mv2-ease), transform .55s var(--mv2-ease) !important; }
  .nav-drawer.is-open .nav-drawer-inner > *{ opacity:1 !important; transform:none !important; }
  .nav-drawer.is-open .nav-drawer-inner > *:nth-child(1){ transition-delay:.12s !important; }
  .nav-drawer.is-open .nav-drawer-inner > *:nth-child(2){ transition-delay:.19s !important; }
  .nav-drawer.is-open .nav-drawer-inner > *:nth-child(3){ transition-delay:.26s !important; }
  .nav-drawer.is-open .nav-drawer-inner > *:nth-child(4){ transition-delay:.33s !important; }
  .nav-drawer.is-open .nav-drawer-inner > *:nth-child(5){ transition-delay:.40s !important; }
  .nav-drawer.is-open .nav-drawer-inner > *:nth-child(6){ transition-delay:.47s !important; }
  @media (prefers-reduced-motion:reduce){
    .nav-drawer{ transition:none !important; }
    .nav-drawer .nav-drawer-inner > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* 3 · Footer · real footer, columns sit 2-up (never one-per-row) */
  .site-footer .footer-inner{ grid-template-columns:1fr 1fr !important; gap:30px 24px !important; padding:48px 22px 0 !important; }
  .site-footer .footer-brand{ grid-column:1 / -1 !important; }
  .site-footer .footer-cols{ grid-template-columns:1fr 1fr !important; gap:26px 24px !important; }
  .site-footer .footer-bottom{ padding:20px 22px 0 !important; margin-top:40px !important; }

  /* 4 · Hero / intro · breathing room */
  .hero, .case-hero, section.hero{ padding-top:64px !important; padding-bottom:64px !important; }
  .hero h1, .hero-title, .hero-greeting{ margin-bottom:24px !important; }
  .hero-eyebrow{ margin-bottom:24px !important; }
  .hero-tag, .hero-body, .hero .strap, .hero .lead{ margin-top:18px !important; line-height:1.6 !important; }
  .hero-pills, .hero-foot, .hero .pills, .hero-cats{ margin-top:30px !important; }

  /* 5 · Two-up everywhere · sections / images / CGI + animation video grids */
  .cgi-grid, .cgi-wall, .video-grid, .film-wall, .reel-grid, .anim-grid,
  .work-grid, .grid, .kv-grid, .image-grid, .gallery-grid, .case-grid,
  .crafts-grid, .ch-media-grid, .stills-grid, .render-grid{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  .cgi-tile, .cgi-card, .video-cell, .film-card, .reel-card{
    width:auto !important; margin:0 !important; aspect-ratio:3/4 !important;
  }
  .cgi-tile img, .cgi-tile video{ width:100% !important; height:100% !important; object-fit:cover !important; }

  /* 6 · About roster · key people only, in a horizontal scroll (matches the
     desktop's horizontal tile row). Long tail hidden on mobile. */
  .tier.seniors, .tier.juniors, .tier.admin{ display:none !important; }
  .tier.direction .tier-head .count{ display:none !important; }
  .tier.direction .team-grid{
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
    gap:14px !important;
    scroll-snap-type:x mandatory !important;
    margin:0 -22px !important; padding:4px 22px 14px !important;
    grid-template-columns:none !important;
  }
  .tier.direction .team-grid::-webkit-scrollbar{ display:none !important; }
  .tier.direction .member{
    flex:0 0 auto !important; width:56vw !important; max-width:230px !important;
    scroll-snap-align:start !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v4 · MOBILE EDITORIAL POLISH · Phases 2–4 (foundations · layouts · motion)
   Overlay-only, <820px. Builds on the existing 2-up system. Reduced-motion
   safe. Media stays visible by default (never gated behind JS).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){

  /* ── Phase 2 · FOUNDATIONS ────────────────────────────── */
  .site-header .nav-hamburger{ width:44px !important; height:44px !important; }
  /* Section rhythm — trim the big desktop vertical padding on social/case pages */
  .sec{ padding-top:8vh !important; padding-bottom:8vh !important; }
  .chapter{ padding-top:9vh !important; padding-bottom:9vh !important; }
  .story{ padding-top:12vh !important; padding-bottom:2vh !important; }
  .intro{ padding-top:13vh !important; padding-bottom:6vh !important; }
  .say{ padding-top:12vh !important; padding-bottom:12vh !important; }
  /* Reading comfort */
  .intro p, .chapter-lead, .sec__head p{ font-size:clamp(16px,4.4vw,19px) !important; line-height:1.6 !important; }
  .intro .lead{ font-size:clamp(28px,8vw,40px) !important; line-height:1.1 !important; }
  .story-block{ font-size:clamp(22px,6.2vw,30px) !important; line-height:1.32 !important; }
  .sec__head{ margin-bottom:26px !important; }
  .chapter-head{ margin-bottom:32px !important; }
  .grp{ margin-top:34px !important; }
  /* Hero meta sits 2-up, not a long stack */
  .hero__meta{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:18px 20px !important; }

  /* ── Phase 3 · EDITORIAL LAYOUTS ──────────────────────── */
  /* Reel walls (9:16) become premium horizontal snap galleries → the next
     card peeks, cutting vertical scroll like swiping a magazine spread.
     Single-item walls fall back to full width so nothing looks sparse.
     Stills stay a tight 2-up grid. */
  .sec .reels, .grp .reels, .chapter .reels{
    display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important;
    overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important; scrollbar-width:none !important;
    gap:12px !important; margin:0 -6vw !important; padding:2px 6vw 12px !important;
  }
  .sec .reels::-webkit-scrollbar, .grp .reels::-webkit-scrollbar, .chapter .reels::-webkit-scrollbar{ display:none !important; }
  .sec .reels > *, .grp .reels > *, .chapter .reels > *{
    flex:0 0 66% !important; max-width:66% !important; width:66% !important; margin:0 !important; scroll-snap-align:start !important;
  }
  .sec .reels.film > *, .chapter .reels.film > *{ flex-basis:86% !important; max-width:86% !important; width:86% !important; }
  .sec .reels > :only-child, .grp .reels > :only-child, .chapter .reels > :only-child{ flex-basis:100% !important; max-width:100% !important; width:100% !important; }
  .sec .stills, .grp .stills, .chapter .stills{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }

  /* ── Phase 4 · MOTION ─────────────────────────────────── */
  /* Gentle handcrafted easing on media; nothing hides content. */
  .reel, .still, .film{ transition:transform .6s var(--mv2-ease) !important; }
  @media (prefers-reduced-motion:reduce){
    .reel, .still, .film{ transition:none !important; }
  }
}

/* ════════════════════════════════════════════════════════════════════
   v4b · SPECIFICITY WIN · the canonical header's inline <style> sits later
   in the document than this linked overlay, so equal-specificity .nav-drawer
   rules were beating the overlay. Prefixing with `html` raises specificity
   so the editorial menu + horizontal galleries actually apply. <820px only.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){
  /* header + hamburger above the sheet; hamburger → ✕ */
  html .site-header{ z-index:9300 !important; }
  html .nav-hamburger{ z-index:9400 !important; position:relative !important; }
  html .nav-hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) !important; }
  html .nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 !important; }
  html .nav-hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) !important; }

  /* full-screen paper editorial sheet */
  html .nav-drawer{
    position:fixed !important; inset:0 !important; top:0 !important; right:0 !important; left:0 !important; bottom:0 !important;
    width:100vw !important; height:100% !important; max-height:none !important;
    background:rgba(244,239,224,0.99) !important; backdrop-filter:blur(26px) saturate(150%) !important; -webkit-backdrop-filter:blur(26px) saturate(150%) !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    transform:translateY(101%) !important; opacity:1 !important; visibility:visible !important;
    transition:transform .6s var(--mv2-ease) !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; z-index:9200 !important; padding:0 !important; display:block !important;
  }
  html .nav-drawer.is-open{ transform:translateY(0) !important; }
  html .nav-drawer .nav-drawer-inner{ display:block !important; padding:82px 24px calc(120px + env(safe-area-inset-bottom)) !important; max-width:none !important; }
  html .nav-drawer .nav-drawer-link{
    display:block !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:500 !important;
    font-size:clamp(31px,8.4vw,44px) !important; line-height:1 !important; letter-spacing:0.1em !important;
    color:var(--mv2-ink) !important; padding:24px 0 !important; border-bottom:1px solid rgba(14,26,51,0.13) !important; text-decoration:none !important;
  }
  html .nav-drawer .nav-drawer-group{ display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:26px !important; padding:0 !important; border-bottom:1px solid rgba(14,26,51,0.13) !important; }
  html .nav-drawer .nav-drawer-label{
    grid-column:1 / -1 !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:0.22em !important; font-size:10px !important; line-height:1 !important;
    color:#9A6A00 !important; padding:24px 0 14px !important; margin:0 !important;
  }
  html .nav-drawer .nav-drawer-link.sub{
    display:block !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-size:19px !important;
    line-height:1.2 !important; letter-spacing:0.1em !important; color:var(--mv2-ink-soft) !important; padding:10px 0 !important; padding-left:0 !important; border-bottom:0 !important;
  }
  html .nav-drawer .nav-drawer-inner > *{ opacity:0 !important; transform:translateY(22px) !important; transition:opacity .55s var(--mv2-ease), transform .55s var(--mv2-ease) !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *{ opacity:1 !important; transform:none !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *:nth-child(1){ transition-delay:.12s !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *:nth-child(2){ transition-delay:.19s !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *:nth-child(3){ transition-delay:.26s !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *:nth-child(4){ transition-delay:.33s !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *:nth-child(5){ transition-delay:.40s !important; }
  html .nav-drawer.is-open .nav-drawer-inner > *:nth-child(6){ transition-delay:.47s !important; }
  @media (prefers-reduced-motion:reduce){
    html .nav-drawer{ transition:none !important; }
    html .nav-drawer .nav-drawer-inner > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* horizontal reel galleries (win over the page's own .reels grid) */
  html .sec .reels, html .grp .reels, html .chapter .reels{
    display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important;
    overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important; gap:12px !important; margin:0 -6vw !important; padding:2px 6vw 12px !important;
  }
  html .sec .reels::-webkit-scrollbar, html .grp .reels::-webkit-scrollbar, html .chapter .reels::-webkit-scrollbar{ display:none !important; }
  html .sec .reels > *, html .grp .reels > *, html .chapter .reels > *{ flex:0 0 66% !important; max-width:66% !important; width:66% !important; margin:0 !important; scroll-snap-align:start !important; }
  html .sec .reels.film > *, html .chapter .reels.film > *{ flex-basis:86% !important; max-width:86% !important; width:86% !important; }
  html .sec .reels > :only-child, html .grp .reels > :only-child, html .chapter .reels > :only-child{ flex-basis:100% !important; max-width:100% !important; width:100% !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v5 · MOBILE OVERHAUL · 2026-07-03 · Shrey's six fixes
   Overlay-only, <820px. Every selector below carries `html` / `html body`
   prefixes so it wins the cascade over the canonical header inline <style>
   and each page's own inline <style> (both sit LATER in the document than
   this linked overlay, so equal-specificity rules lose on source order).
   Desktop (>820px) is never touched — the whole block is inside the query.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){

  /* ── FIX 1 · HAMBURGER MENU · opens reliably on EVERY page ────────────
     Root cause: two menu-toggle conventions coexist. 78 pages toggle
     `.is-open` on the drawer (canonical header JS); 6 key pages (home,
     clients, branding-home, social-media-home, animation, hamleys-global)
     ALSO carry a page-specific handler that toggles `body.nav-open` and a
     page CSS rule `body.nav-open .nav-drawer{transform:translateX(0)}`
     which, being later in the document, beat the overlay's bottom-sheet
     rule → the drawer slid in from the RIGHT as a mismatched card, or (if
     the observer/handler raced) did not appear at all. Below we make the
     overlay respond to BOTH class states at `html body` specificity so the
     editorial paper bottom-sheet is what opens, identically, everywhere. */

  /* Refined RIGHT-SIDE SHEET — NOT full-screen. Overrides the earlier
     v3/v4/v4b full-screen bottom-sheet so the menu is a tasteful panel
     (~380px / 86vw) rather than covering the whole viewport. Paper field,
     hairline edge, soft shadow, EB Garamond links. */
  html body .site-header .nav-drawer,
  html body .nav-drawer{
    position:fixed !important; top:0 !important; right:0 !important; left:auto !important; bottom:0 !important;
    width:min(380px, 86vw) !important; height:100% !important; max-height:none !important;
    inset:auto 0 auto auto !important;
    background:rgba(244,239,224,0.985) !important;
    backdrop-filter:blur(26px) saturate(150%) !important; -webkit-backdrop-filter:blur(26px) saturate(150%) !important;
    border:0 !important; border-left:1px solid rgba(14,26,51,0.10) !important; border-radius:0 !important;
    box-shadow:-24px 0 60px rgba(14,26,51,0.18) !important;
    transform:translateX(101%) !important; opacity:1 !important; visibility:visible !important;
    transition:transform .5s var(--mv2-ease) !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
    z-index:9200 !important; padding:0 !important; display:block !important;
  }
  /* Drawer visible for either toggle convention (slides in from the right) */
  html body .nav-drawer.is-open,
  html body.nav-open .nav-drawer{
    transform:translateX(0) !important;
    pointer-events:auto !important; visibility:visible !important;
  }
  /* Lock scroll behind the open sheet for either convention */
  html body.nav-open{ overflow:hidden !important; }

  /* Inner rhythm + restrained editorial link sizing (NOT the 44px giant) */
  html body .nav-drawer .nav-drawer-inner{
    display:block !important; padding:78px 30px calc(48px + env(safe-area-inset-bottom)) !important;
    max-width:none !important; width:100% !important; gap:0 !important; align-items:stretch !important;
  }
  /* Menu links speak the DESKTOP NAV's voice: Jost (never EB Garamond —
     the serif was the reported bug), comfortable large tap sizes. */
  html body .nav-drawer .nav-drawer-link{
    display:block !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:500 !important;
    font-size:23px !important; line-height:1.15 !important; letter-spacing:0.1em !important;
    color:var(--mv2-ink) !important; padding:17px 0 !important; border-bottom:1px solid rgba(14,26,51,0.12) !important;
    text-decoration:none !important;
  }
  html body .nav-drawer .nav-drawer-group{
    display:block !important; grid-template-columns:none !important; column-gap:0 !important;
    padding:6px 0 12px !important; border-bottom:1px solid rgba(14,26,51,0.12) !important;
  }
  /* "Work" label = Jost uppercase eyebrow with the yellow accent (per screenshot) */
  html body .nav-drawer .nav-drawer-label{
    grid-column:auto !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:0.22em !important;
    font-size:10px !important; line-height:1 !important; color:#9A6A00 !important;
    padding:22px 0 10px !important; margin:0 !important;
  }
  html body .nav-drawer .nav-drawer-link.sub{
    display:block !important; font-family:'Jost',sans-serif !important; font-style:normal !important; font-weight:400 !important;
    font-size:19px !important; line-height:1.2 !important; letter-spacing:0.1em !important;
    color:var(--mv2-ink) !important; padding:11px 0 !important; padding-left:0 !important; border-bottom:0 !important;
  }
  /* Simpler entrance — the whole sheet slides; rows just fade in place */
  html body .nav-drawer .nav-drawer-inner > *{ opacity:0 !important; transform:translateX(14px) !important; transition:opacity .5s var(--mv2-ease), transform .5s var(--mv2-ease) !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *,
  html body.nav-open .nav-drawer .nav-drawer-inner > *{ opacity:1 !important; transform:none !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *:nth-child(1),
  html body.nav-open .nav-drawer .nav-drawer-inner > *:nth-child(1){ transition-delay:.10s !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *:nth-child(2),
  html body.nav-open .nav-drawer .nav-drawer-inner > *:nth-child(2){ transition-delay:.16s !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *:nth-child(3),
  html body.nav-open .nav-drawer .nav-drawer-inner > *:nth-child(3){ transition-delay:.22s !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *:nth-child(4),
  html body.nav-open .nav-drawer .nav-drawer-inner > *:nth-child(4){ transition-delay:.28s !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *:nth-child(5),
  html body.nav-open .nav-drawer .nav-drawer-inner > *:nth-child(5){ transition-delay:.34s !important; }
  html body .nav-drawer.is-open .nav-drawer-inner > *:nth-child(6),
  html body.nav-open .nav-drawer .nav-drawer-inner > *:nth-child(6){ transition-delay:.40s !important; }
  @media (prefers-reduced-motion:reduce){
    html body .nav-drawer{ transition:none !important; }
    html body .nav-drawer .nav-drawer-inner > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* Hamburger → ✕ for either convention (page uses body.nav-open, canonical
     uses aria-expanded); keep the bars above the sheet. */
  html body.nav-open .nav-hamburger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) !important; }
  html body.nav-open .nav-hamburger span:nth-child(2){ opacity:0 !important; }
  html body.nav-open .nav-hamburger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) !important; }

  /* ── HOME HERO · editorial mobile redesign (7 Jul) ───────────────────
     Left-aligned, controlled type scale, tightened rhythm, Caveat accent.
     Replaces the oversized centred single word + the dead space around it.
     Greeting capped ~68px (was 132px); copy left-aligned & readable; the
     phrase "impossible to overlook" set in handwritten Caveat per the
     reference direction. */
  /* CENTRED editorial hero (8 Jul, Shrey): big greeting, smaller + airier copy,
     everything centre-aligned, reveal-transform reset to kill greeting/copy overlap. */
  /* Hero fits its content on mobile — kills the big empty patch below the meta
     that came from the desktop hero's full-viewport min-height (10 Jul). */
  html .hero{ text-align:center !important; padding:58px 24px 60px !important; min-height:0 !important; height:auto !important; }
  html .hero .hero-inner, html .hero .hero-text{ max-width:none !important; margin:0 auto !important; }
  /* defeat any stuck reveal transform that pushes the greeting onto the copy */
  html .hero .hero-greeting, html .hero h1.hero-headline, html .hero .hero-eyebrow, html .hero .hero-meta{
    transform:none !important; opacity:1 !important;
  }
  html .hero .hero-eyebrow{
    text-align:center !important; margin:0 auto 40px !important; white-space:nowrap !important;
    font-family:'Jost',sans-serif !important; font-size:8.5px !important;
    letter-spacing:0.16em !important; text-transform:uppercase !important;
    color:var(--mv2-ink-soft) !important; font-weight:600 !important;
  }
  html .hero .hero-greeting{
    font-family:'EB Garamond',serif !important; font-style:italic !important; font-weight:400 !important;
    font-size:clamp(92px, 27vw, 124px) !important; line-height:0.98 !important; letter-spacing:-0.032em !important;
    text-align:center !important; max-width:none !important; margin:0 auto 40px !important; color:var(--mv2-ink) !important;
    display:block !important; overflow:visible !important;
  }
  html .hero h1.hero-headline{
    font-family:'EB Garamond',serif !important; font-style:normal !important; font-weight:400 !important;
    font-size:16px !important; line-height:1.6 !important; letter-spacing:0 !important;
    text-align:center !important; max-width:none !important; width:88% !important; margin:0 auto !important; color:var(--mv2-ink) !important;
    text-wrap:pretty !important;
  }
  html .hero h1.hero-headline .tr-line{ display:block !important; }
  html .hero h1.hero-headline em{ font-style:normal !important; }
  html .hero h1.hero-headline strong{ font-weight:400 !important; font-style:normal !important; color:var(--mv2-ink) !important; }
  /* handwritten Caveat accent on "impossible to overlook" (l3 em) */
  html .hero h1.hero-headline .tr-line.l3 em{
    font-family:'Caveat',cursive !important; font-style:normal !important; font-weight:600 !important;
    font-size:1.5em !important; line-height:1 !important; letter-spacing:0 !important;
    color:var(--mv2-ink) !important; padding:0 0.02em !important;
  }
  html .hero .hero-meta{
    text-align:center !important; margin:44px auto 0 !important; padding-top:0 !important; max-width:none !important;
    border-top:0 !important; display:block !important; white-space:nowrap !important;
    font-family:'Jost',sans-serif !important; font-size:9px !important;
    letter-spacing:0.1em !important; text-transform:uppercase !important; color:#9A6A00 !important;
  }
  html .hero .hero-meta::before{
    content:"" !important; display:block !important; width:54px !important; height:1px !important;
    background:var(--mv2-hairline) !important; margin:0 auto 22px !important;
  }
  html .hero .hero-meta em{ font-style:normal !important; color:#7E5600 !important; }
  /* philosophy line — keep regular, not italic, not handwritten (Shrey 7 Jul) */
  html .pull blockquote{ font-style:normal !important; }
  html .pull blockquote em{ font-family:inherit !important; font-style:normal !important; font-weight:inherit !important; }

  /* ── HOME "Four crafts" services → 2×2 GRID (10 Jul, Shrey) ────────────
     Two per row, two rows (1 2 / 3 4) — not the horizontal scroll rail. */
  html .services-grid{
    display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:12px !important;
    overflow:visible !important; margin:0 !important; padding:0 !important;
  }
  html .services-grid .service{
    display:flex !important; flex-direction:column !important; gap:8px !important;
    padding:18px 15px !important; border:1px solid var(--mv2-hairline) !important; border-radius:13px !important;
    background:rgba(255,255,255,0.42) !important; opacity:1 !important; transform:none !important;
    min-width:0 !important;
  }
  html .services-grid .service p.body{ display:block !important; }
  html .services-grid .service .sub{
    display:flex !important; flex-wrap:wrap !important; gap:0 !important; margin-top:4px !important;
    font-family:'Jost',sans-serif !important; font-size:9px !important; letter-spacing:0.14em !important;
    text-transform:uppercase !important; color:var(--mv2-ink-soft) !important; opacity:.85 !important;
  }
  html .services-grid .service .n{
    font-family:'Jost',sans-serif !important; font-size:9.5px !important; letter-spacing:0.2em !important;
    text-transform:uppercase !important; font-weight:700 !important; color:var(--mv2-ink-soft) !important; margin:0 !important;
  }
  html .services-grid .service h3{
    font-family:'EB Garamond',serif !important; font-style:italic !important; font-weight:500 !important;
    font-size:clamp(20px, 5.4vw, 26px) !important; line-height:1.06 !important; margin:2px 0 4px !important;
  }
  html .services-grid .service .sub{ display:none !important; }
  html .services-grid .service p.body{
    font-family:'Jost',sans-serif !important; font-size:12.5px !important; line-height:1.45 !important;
    color:var(--mv2-ink-soft) !important; margin:0 !important;
  }
  html .services-grid .service .arr{ display:none !important; }

  /* ── FIX 2a · BRANDING-HOME brand grid → clean 2-up, no overlap/cutoff ─
     Root cause: three competing rules (page's own `.grid` 1-col at 480px,
     a broad `[class*="grid"]` 2-col block, and the overlay's generic grid
     rule) plus reveal-gating (`.brand{opacity:0;transform:translateY(28px)}`)
     that stays applied when the IntersectionObserver doesn't fire on mobile
     → tiles invisible/misplaced/overlapping. Pin the grid to exactly two
     columns at every mobile width and force the cards visible. */
  html body.page-branding-home #brandGrid,
  html body.page-branding-home .work .grid{
    display:grid !important; grid-template-columns:repeat(2, 1fr) !important;
    gap:26px 12px !important; margin-top:28px !important;
  }
  html body.page-branding-home #brandGrid .brand,
  html body.page-branding-home .work .grid .brand{
    display:block !important; opacity:1 !important; transform:none !important;
    min-width:0 !important; max-width:100% !important;
  }
  html body.page-branding-home #brandGrid .brand .img,
  html body.page-branding-home .work .grid .brand .img{
    aspect-ratio:4/5 !important; border-radius:8px !important; overflow:hidden !important; width:100% !important;
  }
  html body.page-branding-home #brandGrid .brand .meta h3{ font-size:16px !important; }
  html body.page-branding-home #brandGrid .brand .meta .sec{ font-size:9px !important; }

  /* ── EDITORIAL (Dlecta-family) brand pages · mobile padding + media fit (10 Jul) ──
     Applies to all 38 rebuilt brand-detail pages (shared el-*/dl-prod CSS).
     Fix 1 — body copy was flush to the screen edges (24px) → generous 28px
       side padding + tighter type so statements and stories breathe.
     Fix 2 — .el-pin styled ONLY `img` with object-fit, so a pinned VIDEO
       (e.g. Backbay's carton film) rendered at 16:9 and left a tall blue
       void beneath it. Fit el-pin media to its natural aspect on the stage
       (no void, no crop; matches the scaled-media look of desktop). */
  html .el-statement{ padding:60px 28px !important; }
  html .el-statement .lab{ margin-bottom:24px !important; }
  html .el-statement h2{ font-size:clamp(25px,6.4vw,33px) !important; line-height:1.2 !important; letter-spacing:-0.004em !important; max-width:none !important; }
  html .el-story{ padding:52px 28px !important; grid-template-columns:1fr !important; gap:22px !important; }
  html .el-story__aside{ position:static !important; top:auto !important; }
  html .el-story__body p{ font-size:18px !important; line-height:1.62 !important; max-width:none !important; }
  html .dl-prod{ padding:54px 28px !important; }
  html .dl-prod + .dl-prod{ padding-top:6px !important; }
  html .dl-prod__in{ grid-template-columns:1fr !important; gap:24px !important; }
  html .dl-prod__in > div:first-child{ position:static !important; top:auto !important; }
  html .dl-prod__h{ font-size:clamp(26px,6.8vw,34px) !important; }
  html .dl-prod__p{ font-size:16.5px !important; line-height:1.6 !important; max-width:none !important; }
  html .dl-prod__media{ gap:16px !important; }
  html .el-pin{ height:auto !important; }
  html .el-pin__stage{ position:static !important; height:auto !important; min-height:0 !important; display:block !important; }
  html .el-pin__media{ transform:none !important; height:auto !important; }
  html .el-pin__media img, html .el-pin__media video{ width:100% !important; height:auto !important; object-fit:contain !important; display:block !important; }
  html .el-pin__type h2{ font-size:clamp(30px,8vw,46px) !important; }
  html .el-pin__type p{ font-size:15px !important; }
  /* el-hero: force the cover media to FILL the hero — kills the navy void when a
     video/img fails to cover (Backbay carton). */
  html .el-hero__media{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; transform:none !important; }
  html .el-hero__media img, html .el-hero__media video{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  html .el-hero__top{ padding-left:26px !important; padding-right:26px !important; }
  html .el-hero__btm{ padding-left:26px !important; padding-right:26px !important; }

  /* ── FOOTER · mobile · 2-up columns, tighter, NO divider lines (10 Jul) ──
     Was one long single column with two horizontal rules. Now the nav
     blocks sit two-per-row (brand spans full width), spacing is tightened,
     and both divider lines (.footer-inner border-bottom + .footer-bottom
     border-top) are removed. */
  html .site-footer{ padding-bottom:24px !important; }
  html .site-footer .footer-inner{
    grid-template-columns:1fr 1fr !important; gap:30px 22px !important;
    padding:44px 26px 0 !important; border-bottom:0 !important;
  }
  html .site-footer .footer-brand{ grid-column:1 / -1 !important; gap:16px !important; }
  html .site-footer .footer-col h4,
  html .site-footer .footer-address .footer-label{ margin-bottom:12px !important; }
  html .site-footer .footer-col a{ font-size:15px !important; line-height:1.72 !important; }
  html .site-footer .footer-bottom{ border-top:0 !important; margin-top:30px !important; padding:14px 26px 0 !important; }

  /* ── FIX 2b · SOCIAL-MEDIA-HOME brand grid → clean 2-up ──────────────
     Same `.grid` of `.brand` logo-tiles; hold it to two columns and make
     the tiles keep a stable aspect ratio so nothing overlaps or clips. */
  html .work .grid,
  html section .grid:has(> a.brand){
    display:grid !important; grid-template-columns:repeat(2, 1fr) !important;
    gap:22px 12px !important;
  }
  html .grid > a.brand{
    display:block !important; opacity:1 !important; transform:none !important;
    min-width:0 !important; max-width:100% !important;
  }
  html .grid > a.brand .img{
    aspect-ratio:4/5 !important; border-radius:8px !important; overflow:hidden !important; width:100% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  html .grid > a.brand .img img.logo-on-tile{
    width:auto !important; height:auto !important; max-width:66% !important; max-height:50% !important;
    object-fit:contain !important;
  }
  html .grid > a.brand .img img.logo-on-tile.fill{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
    object-fit:cover !important; object-position:center !important;
  }
  html .grid > a.brand .meta{ margin-top:12px !important; }
  html .grid > a.brand .meta h3{ font-size:16px !important; line-height:1.1 !important; }
  html .grid > a.brand .meta .sec{ font-size:9px !important; }

  /* ── FIX 4 · graceful logo fallback (Bobbi Brown & any missing PNG) ───
     If a logo image fails and is collapsed to display:none by its onerror,
     the tile still reads cleanly (coloured field + brand name in .meta).
     Belt-and-braces: never let a broken <img> box show its icon. */
  html .grid > a.brand .img img[src=""],
  html .grid > a.brand .img img:not([src]){ display:none !important; }

  /* ── FIX 3 · CLIENT LOGOS · 3-per-row on mobile (match desktop 3-up) ──
     Overlay's generic 2-col rule is overridden here so the clients page
     logo wall reads three across, as on desktop. High specificity so it
     wins regardless of the generic `.logo-grid` 2-col rules above. */
  html body .logo-grid{
    display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:14px !important;
  }
  /* Container geometry adapts (columns/gap/padding) — the LOGO SCALE SYSTEM is
     identical to desktop so a brand reads at the same perceived weight on every
     viewport. Same 62%/54% default + the SAME .wide/.compact optical modifiers.
     No mobile-specific scale, no swapped/hidden logos, order unchanged. */
  html body .logo-grid .logo-tile{ aspect-ratio:3/2 !important; padding:16% 14% !important; }
  html body .logo-grid .logo-tile img{ width:auto !important; height:auto !important; max-width:62% !important; max-height:54% !important; object-fit:contain !important; }
  html body .logo-grid .logo-tile.wide img{ max-width:78% !important; max-height:44% !important; }
  html body .logo-grid .logo-tile.compact img{ max-width:70% !important; max-height:64% !important; }
  html body .logo-grid .logo-tile .brand-name{ font-family:'EB Garamond',serif !important; font-style:italic !important; font-size:clamp(12px, 3.4vw, 15px) !important; line-height:1.2 !important; }

  /* ── FIX 5b · reinforce branding-home crafts as tidy 2-up cards ───────
     (already 2-col via earlier block; lock visibility so reveal-gating
     can't hide them on mobile.) */
  html body.page-branding-home .crafts-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; }
  html body.page-branding-home .crafts-grid .craft{ opacity:1 !important; transform:none !important; }
}

/* Above 820px — overlay does nothing. Desktop site renders untouched. */