/* =============================================================================
   ANEXIS LABS — MOBILE LAYER
   -----------------------------------------------------------------------------
   Every page on this site is authored against a 1440px desktop baseline and
   carries its own inline <style> block. Those blocks stop caring about width at
   900px, so phones inherited desktop proportions: 43px headlines on a 375px
   screen, 100px+ section gaps, 30px tap targets, and a nav that was a bare list
   of underlined links.

   This file is the phone layer. It is linked LAST in every <head>, so for equal
   specificity it wins on source order — that is why the selectors below mirror
   the originals exactly (`.rail-sec > .wrap > h2`, not a loose `h2`). Nothing
   here uses !important except where a page ships its own `!important` mobile
   patch that must be undone.

   Two header families exist and both are handled throughout:
     A. .top      / .top-inner    / .brand / .top-end    / .menu-btn
     B. .site-header / .header-inner / .logo  / .header-end / .menu-toggle
   They share .nav, .mega, .mobile-panel and .pill.

   Breakpoints
     <= 900px  tablet + phone   (site already has some rules here)
     <= 640px  phone            (the bulk of this file)
     <= 380px  small phone      (iPhone SE / mini)
   ============================================================================ */


/* =============================================================================
   1. FOUNDATIONS — apply at every width
   ============================================================================ */

html {
  /* stop iOS/Android from inflating body copy in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* kill the grey flash box on tap; :active states below give real feedback */
  -webkit-tap-highlight-color: transparent;
}

/* Long unbroken strings — email addresses, URLs, domain names in body copy —
   are the most common source of horizontal overflow on a 375px screen. */
p, li, dd, blockquote, figcaption, address,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Media must never be the thing that widens the page. */
img, video, svg, canvas, iframe {
  max-width: 100%;
}
img, video {
  height: auto;
}


/* =============================================================================
   1B. TOUCH-CONTROL LAYER  (<= 900px)
   -----------------------------------------------------------------------------
   900px is where the site already swaps its desktop nav for the burger, so it
   is also where every control has to become finger-sized. Keeping these rules
   at the phone breakpoint left the whole 641–900px band — iPad portrait, large
   phones in landscape, foldables — with the original 31px burger, 38px CTA at
   12.5px type, and 25px text links: the exact "before" state, just on a wider
   screen. Sizing belongs here; the phone type scale and single-column layouts
   stay in section 2.
   ============================================================================ */
@media (max-width: 900px) {

  /* --- header bar --- */
  .top-inner,
  .header-inner {
    height: 60px;
    gap: 12px;
  }

  /* The logo is a link home — give it a full-height hit area rather than the
     20px the image alone occupied. */
  .brand,
  .logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    flex: 0 0 auto;
    min-width: 0;
  }
  .brand img,
  .logo img { height: 20px; width: auto; }

  .top-end,
  .header-end {
    gap: 8px;
    margin-left: auto;
    align-items: center;
  }

  /* CTA in the header — real size, real type. The old rules squeezed this to
     38px tall at 12.5px to make room; mobile.js shortens the label instead,
     so the button can stay a proper target. */
  .top-end .pill,
  .header-end .contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    background: #ffffff;
    color: #0a0a0a;
    text-decoration: none;
  }
  /* undo the page-level patch that hid the CTA outright */
  .header-end .contact-link { display: inline-flex !important; }
  .header-end .contact-link::before { content: none; }

  /* Burger — 44px hit area, 22px glyph. */
  .menu-btn,
  .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
  }
  .menu-btn svg,
  .menu-toggle svg { width: 22px; height: 22px; display: block; }
  .menu-btn:active,
  .menu-toggle:active { background: rgba(255,255,255,0.08); }

  /* Desktop nav and mega panels stay out of the way — unless mobile.js has
     promoted this <nav> to be the drawer itself (the blog template has no
     separate #mobilePanel), in which case the drawer rules own it. */
  .nav:not(.mobile-panel),
  .primary-nav:not(.mobile-panel) { display: none !important; }
  .mega { display: none !important; }
  /* the desktop dropdown inside a promoted nav is flattened into the list */
  .mobile-panel .drop-panel,
  .mobile-panel .chev { display: none !important; }

  /* --- buttons --- */
  .pill,
  .btn,
  .btn-primary,
  .btn-ghost,
  .cta-btn,
  .hero-cta,
  button[type="submit"],
  input[type="submit"] {
    min-height: 48px;
    padding: 13px 24px;
    font-size: 1rem;
    border-radius: 999px;
  }

  /* --- inline text links ---
     These were 25–29px tall. Pad them into a real target without changing
     how they look. */
  .story-link,
  .learn-more,
  .go,
  .flink,
  .case-info .link,
  .footer nav a,
  .footer-links a,
  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- forms ---
     16px is mandatory: anything smaller makes iOS Safari zoom the viewport on
     focus, and the user then has to pinch back out. */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
  }
  textarea { min-height: 120px; padding-top: 12px; }

  /* --- press feedback, now that the tap-highlight flash is gone --- */
  .pill:active,
  .btn:active,
  .btn-primary:active,
  .cta-btn:active { transform: scale(0.985); }
}


/* =============================================================================
   2. PHONE LAYER  (<= 640px)
   ============================================================================ */
@media (max-width: 640px) {

  /* ---------------------------------------------------------------------------
     2.1 Page gutters
     One consistent edge margin everywhere. The site mixed 24px, 14px and 40px
     depending on which component you landed on, which is what made scrolling
     feel ragged — text blocks never lined up with each other down the page.
     ------------------------------------------------------------------------- */
  .wrap,
  .top-inner,
  .header-inner,
  .footer-inner,
  .container,
  .shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Full-bleed sections still need their inner text on the same 20px rail. */
  .wrap { max-width: 100%; }


  /* ---------------------------------------------------------------------------
     2.2 Type scale
     The originals are clamp(FLOOR, Nvw, CEIL). On a phone the vw term collapses
     and the desktop FLOOR is what renders — 43px headlines, 96px ghost numbers.
     These replacements are fluid across 320–640px and land at roughly
     31 / 26 / 20 / 16px on a 375px screen: a clean 1.25 ratio that still reads
     as editorial without wrapping every headline into four ragged lines.
     ------------------------------------------------------------------------- */

  /* --- H1 / hero headlines --- */
  .hero h1,
  .page-hero h1,
  .ab-hero h1,
  .res-hero h1,
  .case-detail-hero h1,
  .lp-hero h1,
  h1 {
    font-size: clamp(1.6rem, 8.2vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
  }

  /* --- H2 / section headlines --- */
  .rail-sec > .wrap > h2,
  .final h2,
  .visit-card h2,
  .contact-copy h2,
  .b2start-inner h2,
  .cta-title,
  .b2h-title,
  h2 {
    font-size: clamp(1.42rem, 7vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  /* --- H3 / card titles --- */
  .svc-main h3,
  .more-content .more-title,
  h3 {
    font-size: clamp(1.1rem, 5vw, 1.35rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
  }

  h4 { font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.005em; }

  /* --- Body copy ---
     16px is the floor: below it iOS zooms on focus and the page feels cheap. */
  body { font-size: 16px; line-height: 1.62; }
  p, li { font-size: 1rem; line-height: 1.62; }

  /* --- Big statistic numerals ---
     .ghost-num had a 96px floor: on a 375px screen it was wider than its own
     column and swamped the copy it was meant to annotate. */
  .ghost-num {
    font-size: clamp(3rem, 17vw, 4.5rem);
    line-height: 1;
  }
  .case-media .num,
  .case-highlight-value,
  .lp-stat b,
  .stat-num,
  .metric-value {
    font-size: clamp(1.7rem, 8.5vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  /* --- Eyebrow / micro labels --- */
  /* 12px is the floor for uppercase tracked-out labels — below that the
     letter-spacing starts doing the work of legibility and loses. */
  .micro,
  .eyebrow,
  .section-label,
  .mega-col-head {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
  }

  /* Desktop headline tracking (-1px to -2px) is far too tight once type drops
     to ~26px — glyphs start to collide. Reset it across the board. */
  .story .line,
  .rail-sec > .wrap > h2,
  .final h2,
  .hero h1,
  .page-hero h1 {
    letter-spacing: -0.02em;
  }

  /* Measure caps written in ch for desktop become artificial on a narrow
     column and cause premature wraps. */
  .story .line,
  .rail-sec > .wrap > h2,
  .hero h1,
  .hero p,
  .page-hero h1,
  .page-hero p {
    max-width: 100%;
  }


  /* ---------------------------------------------------------------------------
     2.3 Vertical rhythm
     Desktop sections breathe at 100–130px. On a phone that reads as dead space:
     you swipe twice between ideas. 56–64px keeps the editorial pacing without
     the scroll tax.
     ------------------------------------------------------------------------- */
  .hero            { padding-top: 44px;  padding-bottom: 36px; }
  .story           { padding-top: 64px;  padding-bottom: 52px; }
  .rail-sec        { padding-top: 44px;  padding-bottom: 52px; }
  .services,
  .founders,
  .insights,
  .visit,
  .results,
  .section,
  .page-section    { padding-top: 58px;  padding-bottom: 58px; }
  .final           { padding-top: 60px;  padding-bottom: 64px; }

  .rail-sec > .wrap > h2 { margin-bottom: 40px; }

  section + section { margin-top: 0; }


  /* ---------------------------------------------------------------------------
     2.4 Buttons
     Header, tap-target and form sizing live in section 1B (<= 900px), because
     they must apply everywhere the burger nav is active — including tablets
     and phones in landscape. Only the full-width stacking is phone-specific.
     ------------------------------------------------------------------------- */

  /* Hero / section CTAs: full-bleed stack. */
  .hero .pill,
  .final .pill,
  .hero-ctas > *,
  .final-cta-btns > *,
  .cta-row > * {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-ctas,
  .final-cta-btns,
  .cta-row,
  .story-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ---------------------------------------------------------------------------
     2.6 Grids — collapse to one column
     Two-column card grids at 375px leave ~160px per card: headlines wrap to
     four lines and the cards no longer look designed.
     ------------------------------------------------------------------------- */
  .case-row,
  .svc-grid,
  .svc-list,
  .founder-grid,
  .insight-grid,
  .reviews-grid,
  .lp-svc-grid,
  .lp-stat-grid,
  .lp-pillars,
  .why-grid,
  .card-solution,
  .testi-card,
  .visit-card,
  .footer-col,
  .feature-grid,
  .stat-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Stat strips read better as a 2-up than a 1-up — the numbers are short and
     a single column wastes the width. */
  .stats-row,
  .metrics-row,
  .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }


  /* ---------------------------------------------------------------------------
     2.7 Cards and surfaces
     Desktop card padding (44–48px) eats a third of a phone's width.
     ------------------------------------------------------------------------- */
  .card-problem,
  .card-solution,
  .svc-main,
  .insight-card,
  .founder-card,
  .visit-card,
  .testi-quote,
  .case-info,
  .card,
  .panel,
  .feature-card {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .more-modal {
    padding: 28px 20px 24px;
    border-radius: 18px;
    max-height: 88svh;
  }
  .more-overlay { padding: 12px; }
  .more-points { grid-template-columns: 1fr; gap: 18px; }


  /* ---------------------------------------------------------------------------
     2.8 The "how we work" rail
     The 56px left indent plus a 38px dot left ~250px of text width. Drop the
     rail to a slim 24px gutter and shrink the dot.
     ------------------------------------------------------------------------- */
  .rail { padding-left: 44px; }
  .rail::before { left: 15px; }
  .step .dot {
    left: -44px;
    width: 31px;
    height: 31px;
    font-size: 0.82rem;
  }
  .step { margin-bottom: 40px; }


  /* ---------------------------------------------------------------------------
     2.9 Forms
     Field sizing is in section 1B; on phones they also go full width and
     their rows stop trying to sit side by side.
     ------------------------------------------------------------------------- */
  input, select, textarea { width: 100%; }
  .form-row,
  .field-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }


  /* ---------------------------------------------------------------------------
     2.10 Tables and wide content
     A data table cannot reflow below ~320px. Give it its own scroll container
     rather than letting it stretch the page.
     ------------------------------------------------------------------------- */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.9rem;
  }
  pre, code {
    overflow-x: auto;
    font-size: 0.85rem;
  }


  /* ---------------------------------------------------------------------------
     2.11 Footer
     Was a single flex row: logo, nav and fine print collided and wrapped
     unpredictably. Stack it.
     ------------------------------------------------------------------------- */
  .footer { padding: 36px 0 40px; }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
  }
  .footer img { height: 21px; }
  .footer nav,
  .footer-links,
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    width: 100%;
  }
  .footer nav a,
  .footer-links a,
  .footer-nav a,
  .site-footer nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em;
  }
  .footer .fine,
  .footer-bottom,
  .footer-copy {
    font-size: 0.8rem;
    line-height: 1.5;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    width: 100%;
  }

  .site-footer { padding: 36px 0 40px; }


  /* ---------------------------------------------------------------------------
     2.12 Sub-navigation strip
     The service pages carry a six-item sub-nav. Wrapping it into three rows
     pushed the hero below the fold; a single swipeable row is the standard
     mobile pattern.
     ------------------------------------------------------------------------- */
  .sub-nav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 10px 20px;
    scroll-snap-type: x proximity;
  }
  .sub-nav-inner::-webkit-scrollbar { display: none; }
  .sub-nav-inner a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.86rem;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
  }
  .sub-nav-inner a.active {
    background: rgba(239,178,112,0.16);
    color: #efb270;
  }


  /* ---------------------------------------------------------------------------
     2.13 Motion
     Scroll-reveal transforms that travel 24px+ feel sluggish on a short
     viewport, and the .story scale-up overshoots its column.
     ------------------------------------------------------------------------- */
  .reveal { transform: translateY(14px); }
  .story .line.lit { transform: none; }
}


/* =============================================================================
   2B. NAVIGATION DRAWER
   -----------------------------------------------------------------------------
   .mobile-panel used to be an in-flow block that pushed the page down: ten
   underlined links, the seven service pages indented under no heading at all,
   no way to dismiss it except the burger, and "Company" pointing at contact.
   It read as an unstyled fallback because that is effectively what it was.

   It is now a proper drawer — overlay, slide-in, grouped sections, 52px rows,
   its own scroll, and a primary CTA pinned at the bottom. The markup is
   untouched; mobile.js injects the chrome (close button, group headings, CTA)
   and the existing toggle handler still just flips `.open`.
   ============================================================================ */
@media (max-width: 900px) {

  /* --- backdrop (injected by mobile.js) --- */
  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(5,5,5,0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .mobile-drawer-backdrop.show { opacity: 1; visibility: visible; }

  /* --- the drawer itself --- */
  .mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;

    display: flex !important;   /* beat the base `display:none` / `.open{flex}` */
    flex-direction: column;
    gap: 0;

    width: min(87vw, 372px);
    max-width: 100%;
    height: 100svh;
    height: 100dvh;

    padding: 0;
    background: #0f0f0f;
    border-left: 1px solid rgba(255,255,255,0.09);
    border-bottom: 0;
    box-shadow: -18px 0 46px -14px rgba(0,0,0,0.7);

    transform: translateX(101%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
    overscroll-behavior: contain;
  }
  .mobile-panel.open {
    transform: none;
    visibility: visible;
  }

  /* --- drawer header: wordmark + close --- */
  .mdrawer-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .mdrawer-top img { height: 19px; width: auto; display: block; }
  .mdrawer-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
  }
  .mdrawer-close svg { width: 21px; height: 21px; display: block; }
  .mdrawer-close:active { background: rgba(255,255,255,0.09); }

  /* --- scrolling link list --- */
  .mdrawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 12px 12px;
  }

  /* group heading, e.g. SERVICES / COMPANY */
  .mdrawer-head {
    display: block;
    padding: 18px 8px 6px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #6d6d6d;
  }
  .mdrawer-head:first-child { padding-top: 8px; }

  /* rows — the borders-between-everything look is gone; rows are now
     touch-sized blocks that highlight on press like a native list.
     Scoped to the scroll area so the wordmark in .mdrawer-top and the CTA in
     .mdrawer-foot keep their own sizing. */
  .mdrawer-scroll a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 6px 10px;
    border-bottom: 0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: #f2f2f2;
    text-decoration: none;
    transition: background 0.15s ease;
  }
  .mdrawer-scroll a:active { background: rgba(255,255,255,0.07); }
  .mdrawer-scroll a.sub {
    padding-left: 10px;   /* the old 20px indent had no heading to indent from */
    font-size: 0.97rem;
    color: #d6d6d6;
  }
  /* current page */
  .mdrawer-scroll a[aria-current="page"] {
    color: #efb270;
    background: rgba(239,178,112,0.09);
  }

  /* wordmark in the drawer header — sized by its image, not by row rules.
     Needs the .mobile-panel prefix to outrank the page's own
     `.mobile-panel a { padding: 13px 4px }`. */
  .mobile-panel .mdrawer-home {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    text-decoration: none;
  }

  /* --- pinned CTA --- */
  .mdrawer-foot {
    flex: 0 0 auto;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,0.07);
    background: #0f0f0f;
  }
  /* .mobile-panel prefix so these outrank the page's `.mobile-panel a` rule */
  .mobile-panel .mdrawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 999px;
    border-bottom: 0;
    background: #ffffff;
    color: #0a0a0a;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-panel .mdrawer-cta:active { transform: scale(0.985); background: #ececea; }
  .mdrawer-meta {
    display: block;
    padding-top: 10px;
    font-size: 0.78rem;
    text-align: center;
    color: #7a7a7a;
  }
  .mobile-panel .mdrawer-meta a {
    display: inline;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    color: #9a9a9a;
  }

  /* body scroll lock while the drawer is open */
  body.drawer-open { overflow: hidden; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mobile-panel { transition: none; }
  .mobile-drawer-backdrop { transition: none; }
}


/* =============================================================================
   2C. COMPONENT REPAIRS
   -----------------------------------------------------------------------------
   Specific components whose own mobile rules made things worse. The recurring
   mistake across these pages was solving a width problem by shrinking type:
   hero CTAs dropped to 0.68rem (10.9px), form labels to 9.9px, badges to
   9.6px. That is what reads as amateur more than anything else on the site.

   Section 2.5 already stacks those CTAs full width, so there is no longer a
   width problem to solve — the type can go back to a readable size. Selectors
   here deliberately match the specificity of the rules they replace.
   ============================================================================ */
@media (max-width: 640px) {

  /* --- hero / section CTAs back to full size -------------------------------
     Pages shrank these so two buttons would sit side by side. They now stack,
     so they get real button type again. */
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost,
  .hero-ctas .pill,
  .cta-inner .btn-primary,
  .final-cta-btns .btn-primary,
  .final-cta-btns .btn-outline {
    font-size: 1rem;
    padding: 14px 22px;
    min-height: 50px;
    width: 100%;
    justify-content: center;
  }

  /* --- form labels and helper text ---
     9.9px labels above a 16px field look like a rendering error. */
  label,
  .field label,
  .form-label,
  .contact-form label,
  .contact-field label {
    font-size: 0.875rem !important;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  .form-note,
  .field-note,
  .err,
  .contact-alt { font-size: 0.82rem; line-height: 1.5; }

  /* --- minimum legible size: 12px floor -----------------------------------
     Badges, kickers, eyebrows, captions and metric labels were authored
     between 0.57rem and 0.71rem (9.1–11.4px). At arm's length on a phone,
     uppercase text with 0.1em+ tracking stops being readable below 12px.

     This one block uses !important deliberately. The sizes it replaces are
     spread over 30-odd files and set through selectors of every shape
     (`.pricing-note .pn-tag`, `.modal .intro-badge`, `.contact-direct span`),
     so matching each one's specificity would mean maintaining a parallel copy
     of the site's CSS. A floor is exactly the case !important exists for:
     one rule, one intent, no exceptions. */
  /* .chip is deliberately absent: on the case-studies index it is a filter
     button, not a badge, and it is sized with the other chip rows below. */
  .mi-badge,
  .tag, .badge,
  .blog-tag,
  .bot-visual .tag,
  .page-eyebrow,
  .metric-label,
  .metric .l,
  .footer-bottom p,
  .deliverable-card span,
  .case-meta-card span,
  .case-kicker,
  .case-label,
  .case-modal-tag,
  .case-highlight-label,
  .case-hero-pill-label,
  .price-badge,
  .contact-kicker,
  .contact-direct span,
  .stack-tab,
  .page-index-title,
  .cs-shot-hint,
  .cs-tab .cs-tab-soon,
  .wyg-rule .mono,
  .cmp-head .mono,
  .mono,
  .wyg-idx i,
  .pricing-note .pn-tag,
  .pn-tag,
  .magnet-tag,
  .fd-how,
  .writeup-format,
  .scroll-cta-eyebrow,
  .shot .cap,
  .feat-badge,
  .feat-chip,
  .client-strip .strip-label,
  .strip-label,
  .stack-label,
  .stack-strip .stack-label,
  .bot-ind,
  .bot-visual .bot-ind,
  .modal .intro-badge,
  .intro-badge {
    font-size: 0.75rem !important;
    letter-spacing: 0.06em;
    line-height: 1.4;
  }
  .mdrawer-head { font-size: 0.75rem; }

  /* --- pricing cards --- */
  .plan-name { font-size: 0.95rem; }
  .role, .frole { font-size: 0.85rem; }

  /* --- tab strips ---
     36px tall and 12px type; now a proper 44px scrollable pill row. */
  .cs-tabs,
  .tabsec-tabs,
  .tab-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .cs-tabs::-webkit-scrollbar,
  .tabsec-tabs::-webkit-scrollbar,
  .tab-row::-webkit-scrollbar { display: none; }
  .cs-tab,
  .tabsec-tab,
  .tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  /* Resources filter chips — a wrapping row here is fine (there are only a
     handful) but each chip still needs a real target. */
  .rex-chip,
  .chip,
  .filter-chip {
    min-height: 42px;
    padding: 0 15px;
    font-size: 0.85rem;
  }
  .rex-cat { font-size: 0.75rem; }

  /* --- overlay / modal controls ---
     A 21px close button is the hardest thing on the site to hit. */
  .close-x,
  .proof-zoom-close,
  .modal-close,
  .more-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 1.5rem;
    line-height: 1;
  }
  .video-sound,
  .testimonial-video-sound {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.8rem;
  }

  /* "slots remaining" promo popup — its button and dismiss were scoped
     tighter than the global button rules, so both stayed desktop-tiny. */
  .slots-pop .btn-primary {
    font-size: 0.9rem;
    min-height: 44px;
    padding: 10px 18px;
  }
  .slots-pop .sp-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
    line-height: 1;
  }
  .slots-pop { max-width: calc(100vw - 32px); }

  /* --- decorative numerals ---
     .ghost-num is a watermark behind section headings; at 64px it competed
     with the heading instead of sitting behind it. */
  .ghost-num { font-size: clamp(2.6rem, 13vw, 3.4rem); }

  /* --- section heads with desktop top padding --- */
  .section-head { padding-top: 48px; }

  /* --- inner card padding ---
     44px of side padding inside a 327px card leaves 239px of text. */
  .fd-goal { padding: 16px 20px; }
  .wyg-card,
  .plan-card,
  .pricing-card,
  .info-card,
  .deliverable-card,
  .timeline-card,
  .proof-visual,
  .cta,
  .post-cta { padding: 22px 18px; }

  /* --- case-study detail pages ---
     These 14 pages are the only ones with `.top { position: fixed }`, so their
     hero carries a top offset to clear it. That offset was 128px, sized for a
     header that no longer exists at this width; against the 60px mobile header
     it left roughly a thumb's worth of empty screen above the title. */
  .case-detail-hero {
    padding-top: 88px;
    padding-bottom: 36px;
  }
  .case-content-wrap,
  .final-cta-case,
  .case-detail-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* --- grids that never got a mobile collapse --- */
  .contact-cta,
  .case-meta-strip,
  .metric-grid,
  .metrics,
  .cards-2,
  .cards-3,
  .deliverables-grid,
  .res-cats,
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- contact page ---
     A 38px !important logo in a 60px header dwarfed every other page's 20px. */
  .site-header .logo img,
  .top .brand img { height: 20px !important; max-width: 150px !important; }
  .fine h2 { font-size: 0.75rem; }
  .form-side { padding: 22px 18px 26px; }
  .wa-row { justify-content: stretch; }
  .wa { width: 100%; justify-content: center; min-height: 44px; }
}


/* =============================================================================
   3. SMALL PHONE  (<= 380px)  — iPhone SE, mini, older Androids
   ============================================================================ */
@media (max-width: 380px) {
  .wrap,
  .top-inner,
  .header-inner,
  .footer-inner { padding-left: 16px; padding-right: 16px; }

  /* Tighter padding, not smaller type — the shortened label leaves room and
     13px was the size that made the old header look squeezed. */
  .top-end .pill,
  .header-end .contact-link { padding: 0 13px; font-size: 0.84rem; }

  .brand img, .logo img { height: 18px; }

  .footer nav,
  .footer-links { grid-template-columns: 1fr; }

  .stats-row,
  .metrics-row,
  .kpi-row { grid-template-columns: 1fr !important; }

  .card-problem,
  .card-solution,
  .svc-main,
  .insight-card,
  .founder-card,
  .visit-card,
  .testi-quote { padding: 20px 16px; }

  /* homepage loader wordmark — 33px type inside a 272px column overflowed */
  #site-loader .wm { font-size: 1.75rem; padding: 0 18px; }
}


/* =============================================================================
   3B. VERY NARROW  (<= 350px)  — iPhone SE 1st gen, 320px Androids
   -----------------------------------------------------------------------------
   Below this the header genuinely cannot hold logo + CTA + burger: at 320px
   the three together need ~304px inside a 288px bar. Rather than shrink the
   CTA back to unreadable type — the exact mistake this whole layer undoes —
   the header keeps the logo and the burger, and the CTA is served by the
   pinned button at the bottom of the drawer, which is one tap away.
   ============================================================================ */
@media (max-width: 350px) {
  .top-end .pill,
  .header-end .contact-link { display: none !important; }

  .top-inner,
  .header-inner { gap: 8px; }

  #site-loader .wm { font-size: 1.5rem; }
}


/* =============================================================================
   4. LANDSCAPE PHONE
   A 375x812 device turned sideways is 812x375: the hero's vertical padding
   plus a 60px sticky header can leave almost no content visible.
   ============================================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding-top: 28px; padding-bottom: 24px; }
  .top-inner, .header-inner { height: 52px; }
  .mobile-drawer { padding-top: 8px; }
}
