/* Global responsive layer for Deals To Grow.
   Strategy: layout is built with React inline styles using fixed grids.
   We intercept at small viewports with high-specificity CSS,
   forcing single-column / reduced padding / smaller type / wrapping.

   Breakpoints:
     <= 1100px : hide desktop nav
     <= 1024px : tablet — stack 2-col heroes
     <= 768px  : large mobile — single column everything
     <= 560px  : phone — tightest spacing, 2-up stat grids
*/

/* ─── Universal overflow & text protection ─── */
html { overflow-x: clip; } /* clip on html: prevents overflow without blocking inner scroll containers */
body { overflow-x: clip; } /* clip keeps position:sticky working */
img, svg, video { max-width: 100%; height: auto; }
.dtg-logo        { height: 72px !important; max-height: 72px !important; width: auto !important; display: block; }
.dtg-logo-footer { height: 72px !important; max-height: 72px !important; width: auto !important; display: block; }
h1, h2, h3, p { overflow-wrap: anywhere; word-break: normal; }

/* Hero sections: full viewport on desktop, auto on mobile */
.hero-viewport { height: calc(100vh - 80px); overflow: hidden; }
@media (max-width: 768px) {
  .hero-viewport {
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100svh - 80px) !important; /* 100svh accounts for mobile browser chrome */
    overflow: hidden;
  }
}

/* ── JumpNav: pin to viewport width on all screens so overflow-x:auto scrolls instead of clipping ── */
[style*="position: sticky"][style*="top: 80"],
[style*="position: sticky"][style*="top:80"] {
  width: 100%;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
[style*="position: sticky"][style*="top: 80"]::-webkit-scrollbar,
[style*="position: sticky"][style*="top:80"]::-webkit-scrollbar { display: none; }

/* ── JumpNav: desktop — nav bar is 116px (20px pad×2 + 72px logo + 2px border×2) ── */
@media (min-width: 769px) {
  [style*="position: sticky"][style*="top: 80"],
  [style*="position: sticky"][style*="top:80"] {
    top: 116px !important;
  }
}

/* ═══════════════════════════════════════════
   NAV  <= 1100px
   ═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nav-links  { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  /* Hide the "Revenue Sim" button from the right-side nav at tablet/mobile — it's in the burger menu */
  [style*="position: sticky"][style*="top: 0"] a[href*="revenue-simulator"] { display: none !important; }
}


/* ═══════════════════════════════════════════
   TABLET  <= 1024px
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  section, footer, header { padding-left: 32px !important; padding-right: 32px !important; }

  /* 4/5-col repeat grids → 2 columns */
  [style*="gridTemplateColumns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="gridTemplateColumns"][style*="repeat(5"],
  [style*="grid-template-columns"][style*="repeat(5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* All two-column hero / split layouts → single column.
     Covers every fractional variant used across the site.
     Note: browsers serialize inline `minmax(0, ...)` as `minmax(0px, ...)`,
     so we match both forms here. */
  [style*="minmax(0, 1.4fr)"],   [style*="minmax(0px, 1.4fr)"],
  [style*="minmax(0, 1.3fr)"],   [style*="minmax(0px, 1.3fr)"],
  [style*="minmax(0, 1.2fr)"],   [style*="minmax(0px, 1.2fr)"],
  [style*="minmax(0, 1.1fr)"],   [style*="minmax(0px, 1.1fr)"],
  [style*="minmax(0, 1fr) auto"], [style*="minmax(0px, 1fr) auto"],
  [style*="minmax(0, 1fr) minmax(0, 2fr)"], [style*="minmax(0px, 1fr) minmax(0px, 2fr)"],
  [style*="1.4fr 1fr"],
  [style*="1.3fr 1fr"],
  [style*="1.2fr 1fr"],
  [style*="1.1fr 1fr"],
  [style*="1fr 1.4fr"],
  [style*="1fr 1.3fr"],
  [style*="1fr 1.2fr"],
  [style*="1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero side panels: hide at tablet so text fills hero width without overflow.
     `0` is serialized as `0px` in inline styles, so match both forms. */
  .hero-viewport [style*="minmax(0, 1fr) auto"] > div:last-child,
  .hero-viewport [style*="minmax(0px, 1fr) auto"] > div:last-child,
  .hero-viewport [style*="minmax(300px, 1fr)"] > div:last-child { display: none !important; }

  /* Comparison table exception: scroll horizontally rather than stacking.
     #comparison has ID specificity (0,1,0,1) > attribute (0,0,1,0),
     so it overrides the general !important above. */
  #comparison [style*="overflow: hidden"] {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  #comparison [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(120px, 1fr)) !important;
    min-width: 560px !important;
  }
}


/* ═══════════════════════════════════════════
   LARGE MOBILE  <= 768px
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  section, footer, header { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── Section vertical padding compression ── */
  section[style*="padding: 120px"],
  section[style*="padding:120px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding: 100px"],
  section[style*="padding:100px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 88px"],
  section[style*="padding:88px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding: 80px"],
  section[style*="padding:80px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding: 64px"],
  section[style*="padding:64px"]  { padding-top: 40px !important; padding-bottom: 40px !important; }
  section[style*="padding: 60px"],
  section[style*="padding:60px"]  { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* ── All repeat() multi-col grids → 1 column ── */
  [style*="gridTemplateColumns"][style*="repeat(2"],
  [style*="grid-template-columns"][style*="repeat(2"],
  [style*="gridTemplateColumns"][style*="repeat(3"],
  [style*="grid-template-columns"][style*="repeat(3"],
  [style*="gridTemplateColumns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="gridTemplateColumns"][style*="repeat(5"],
  [style*="grid-template-columns"][style*="repeat(5"],
  [style*="gridTemplateColumns"][style*="repeat(6"],
  [style*="grid-template-columns"][style*="repeat(6"],
  [style*="gridTemplateColumns"][style*="repeat(7"],
  [style*="grid-template-columns"][style*="repeat(7"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Booking calendar: 3 columns on mobile (3×3 grid of 9 weekdays).
        Desktop uses repeat(4, 1fr) inline; this override fires below 768px.
        Higher specificity (#id) than the attribute selectors above. ── */
  #booking [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── Trade grid: remove inter-cell right borders when repeat(3) collapses to 1 col ── */
  [style*="repeat(3, 1fr)"] > [style*="border-right: 2px solid"] { border-right: none !important; }
  [style*="repeat(3, 1fr)"] > [style*="border-right:2px solid"]  { border-right: none !important; }

  /* ── Other collapsed grids: remove column-separator right borders ── */
  /* Handles Problem cards (1fr 1fr 1fr) and Marquee image col (1fr 1fr) */
  [style*="grid-template-columns: 1fr 1fr"] > [style*="border-right: 2px solid"] { border-right: none !important; }
  /* Handles Home hero text col (minmax(0, 1.2fr)) and Simulator inputs panel (1fr 1.2fr) */
  [style*="1.2fr"] > [style*="border-right: 2px solid"]                          { border-right: none !important; }

  /* ── Literal two-column fr grids → 1 column ── */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Fractional split grids → 1 column ──
     Browsers normalize inline `minmax(0, ...)` to `minmax(0px, ...)`, so match both forms. */
  [style*="2fr 1fr"],
  [style*="1.4fr"],
  [style*="1.3fr"],
  [style*="1.2fr"],
  [style*="1.1fr"],
  [style*="1.6fr"],
  [style*="1fr 1.4fr"],
  [style*="1fr 1.3fr"],
  [style*="1fr 1.2fr"],
  [style*="1fr 1.1fr"],
  [style*="1fr 2fr"],
  [style*="minmax(0, 2fr)"],   [style*="minmax(0px, 2fr)"],
  [style*="minmax(0, 1fr) auto"], [style*="minmax(0px, 1fr) auto"],
  [style*="minmax(0, 1fr) minmax(0, 1fr)"],
  [style*="minmax(0px, 1fr) minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Remove right-border separators on collapsed equal-halves grids (NotLosing / MissedCalls / WhoFor etc.) */
  [style*="minmax(0, 1fr) minmax(0, 1fr)"] > [style*="border-right: 2px solid"],
  [style*="minmax(0px, 1fr) minmax(0px, 1fr)"] > [style*="border-right: 2px solid"] {
    border-right: none !important;
  }

  /* ── Fixed-pixel first-column grids: collapse to full width ── */
  /* what-we-do.html CategoryRow: "320px 1fr" and "320px 1fr 1fr" */
  [style*="grid-template-columns: 320px"] {
    grid-template-columns: 1fr !important;
  }
  /* outcome.html CaseStudy inner grid: "160px 1fr" (portrait image + company info) */
  [style*="grid-template-columns: 160px"] {
    grid-template-columns: 1fr !important;
  }
  /* terms/privacy Section: "120px 1fr" (number + body text) */
  [style*="grid-template-columns: 120px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* ── Comparison table: keep scrollable (overrides general rule above) ── */
  #comparison [style*="overflow: hidden"] {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  #comparison [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(110px, 1fr)) !important;
    min-width: 520px !important;
  }

  /* ── FAQ accordion button grid: "60px 100px 1fr 24px"
        On mobile: drop the category stamp (2nd child), keep code + question + toggle ── */
  [style*="grid-template-columns: 60px 100px 1fr 24px"] {
    grid-template-columns: 48px 1fr 28px !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns: 60px 100px 1fr 24px"] > *:nth-child(2) {
    display: none !important;
  }
  /* FAQ answer indent: reset marginLeft that assumes the code/category columns exist */
  [style*="margin-left: 184"] { margin-left: 0 !important; }
  [style*="marginLeft: 184"]  { margin-left: 0 !important; }

  /* ── Gap compression ── */
  [style*="gap: 64px"], [style*="gap:64px"] { gap: 32px !important; }
  [style*="gap: 56px"], [style*="gap:56px"] { gap: 28px !important; }
  [style*="gap: 48px"], [style*="gap:48px"] { gap: 24px !important; }
  [style*="gap: 40px"], [style*="gap:40px"] { gap: 24px !important; }
  [style*="gap: 32px"], [style*="gap:32px"] { gap: 20px !important; }

  /* ── Typography ── */
  h1, h2 { font-size: clamp(36px, 9vw, 60px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  h3      { font-size: clamp(22px, 5vw, 30px)  !important; line-height: 1.05 !important; }
  /* No !important on p: allows display-font <p> elements (Manifesto etc.) to keep their inline size */
  p       { font-size: 15px; }

  /* Display-font paragraphs with oversized inline font-size: scale down for mobile.
     Targets Manifesto (about.html: 44px, 56px) and BlueprintBand (what-we-do.html: 64px). */
  p[style*="font-size: 64px"] { font-size: clamp(24px, 7vw, 44px)   !important; }
  p[style*="font-size: 56px"] { font-size: clamp(22px, 6.5vw, 38px) !important; }
  p[style*="font-size: 44px"] { font-size: clamp(18px, 5.5vw, 32px) !important; }
  /* Marquee data-stat-grid: 44px div stat values overflow ~96px cols in 3-col layout */
  [data-stat-grid] [style*="font-size: 44px"] { font-size: clamp(20px, 5.5vw, 36px) !important; }

  /* ── Inner panel padding shrink ── */
  /* "padding: Xpx 40px..." inner divs — compress horizontal to 20px, preserve vertical */
  [style*="padding: 64px 40px"]:not(section):not(footer) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* _shared.jsx CTA inner grid div (appears on every page) */
  [style*="padding: 120px 40px"]:not(section):not(footer) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 24px 40px"]:not(section):not(footer) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Pricing hero inner div: "80px 40px 100px" — compress all sides */
  [style*="padding: 80px 40px"]:not(section):not(footer) {
    padding-top: 48px !important; padding-bottom: 48px !important;
    padding-left: 20px !important; padding-right: 20px !important;
  }
  [style*="padding: 56px"]:not(section):not(footer) { padding: 28px !important; }
  [style*="padding: 48px"]:not(section):not(footer) { padding: 28px !important; }
  [style*="padding: 40px"]:not(section):not(footer) { padding: 24px !important; }
  [style*="padding:40px"]:not(section):not(footer)  { padding: 24px !important; }
  [style*="padding: 36px"]:not(section):not(footer) { padding: 22px !important; }
  [style*="padding: 32px"]:not(section):not(footer) { padding: 20px !important; }
  [style*="padding: 28px"]:not(section):not(footer) { padding: 18px !important; }

  /* Status strip header bars ("14px 40px") inside heroes — hide on mobile (decorative only) */
  [style*="padding: 14px 40px"] { display: none !important; }

  /* Form inputs: 16px minimum prevents iOS Safari auto-zoom on focus */
  input, select, textarea { font-size: 16px !important; }

  /* ── Nav ── */
  /* Fixed: was nth-of-type(2) which targeted the mobile drawer; nav bar is 1st child */
  [style*="position: sticky"][style*="top: 0"] > div:nth-of-type(1) {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 14px 20px !important;
  }
  .dtg-logo        { height: 48px !important; max-height: 48px !important; }
  .dtg-logo-footer { height: 48px !important; max-height: 48px !important; }
  .nav-links  { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  [style*="position: sticky"][style*="top: 0"] a[href*="book-scoping-call"],
  [style*="position: sticky"][style*="top: 0"] a[href*="revenue-simulator"] {
    display: none !important;
  }

  /* ── JumpNav: horizontal scroll when links overflow + right-edge fade hint ── */
  [style*="position: sticky"][style*="top: 80"],
  [style*="position: sticky"][style*="top:80"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  [style*="position: sticky"][style*="top: 80"]::-webkit-scrollbar,
  [style*="position: sticky"][style*="top:80"]::-webkit-scrollbar { display: none; }
  /* JumpNav: mobile nav is 80px tall (14px padding ×2 + 48px logo + 2px borders ×2) */
  [style*="position: sticky"][style*="top: 80"],
  [style*="position: sticky"][style*="top:80"] { top: 80px !important; }

  /* ── Footer ── */
  footer [style*="grid-template-columns"],
  footer [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer [style*="justify-content: space-between"][style*="display: flex"]:last-child,
  footer [style*="justifyContent: space-between"]:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ── Sticky bottom CTA bar — stack message + button vertically ── */
  .dtg-sticky-cta { padding: 12px 44px 12px 16px !important; }
  .dtg-sticky-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .dtg-sticky-cta-msg { text-align: center; font-size: 13px !important; }
  .dtg-sticky-cta-row > a {
    width: 100%;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 11px 16px !important;
  }

  /* ── Trust bars / flex strips ── */
  [style*="flex-wrap: wrap"], [style*="flexWrap: wrap"] { gap: 12px !important; }

  /* ── Proof card quote: remove min-height so collapsed cards don't waste space ── */
  [style*="min-height: 130"] { min-height: 0 !important; }
  [style*="min-height: 180"] { min-height: 0 !important; }

  /* ── Marquee / 2-col image+text sections: give image pane a height after collapse ── */
  /* When a 1fr 1fr grid collapses to single col, the image-only pane has no height.
     Target panes that have overflow:hidden but no explicit height. */
  [style*="grid-template-columns: 1fr 1fr"][style*="min-height: 480"] > div:first-child,
  [style*="grid-template-columns: 1fr 1fr"] > [style*="overflow: hidden"][style*="border-right"] {
    min-height: 220px !important;
  }

  /* ── SectionTitle margin: compress the 56px bottom margin to 28px on mobile ── */
  [style*="margin-bottom: 56px"],
  [style*="marginBottom: 56"] { margin-bottom: 28px !important; }

  /* ── Stat grids that should stay horizontal even on mobile ── */
  [data-stat-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* ── outcome.html case study: image wrapper must fill column after 160px grid collapses ── */
  [style*="grid-template-columns: 160px"] [style*="width: 160px"] {
    width: 100% !important;
  }

  /* ── pricing.html: featured card lift removed in single-column stack ── */
  [style*="translateY(-12px)"] {
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════
   FIXED HEIGHTS — collapse to auto on mobile
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  [style*="height: 480"], [style*="height:480"]  { height: auto !important; min-height: 240px !important; }
  /* FieldBand (trades 2nd image): overflow:hidden section needs definite height so img height:100% resolves */
  [style*="height: 480"][style*="overflow: hidden"] { height: 240px !important; }
  [style*="height: 460"], [style*="height:460"]  { height: auto !important; min-height: 220px !important; }
  [style*="height: 440"], [style*="height:440"]  { height: auto !important; min-height: 220px !important; }
  [style*="height: 420"], [style*="height:420"]  { height: auto !important; min-height: 200px !important; }
  [style*="height: 380"], [style*="height:380"]  { height: auto !important; min-height: 200px !important; }
  [style*="height: 360"], [style*="height:360"]  { height: auto !important; min-height: 280px !important; }
  [style*="height: 320"], [style*="height:320"]  { height: 200px !important; }
  [style*="height: 220"], [style*="height:220"]  { height: auto !important; min-height: 140px !important; }
  /* minHeight overrides for tall image panels */
  [style*="min-height: 480"] { min-height: 220px !important; }
  [style*="min-height: 360"] { min-height: 180px !important; }
  /* Testimonials CaseRow image panels: remove column-separator borders in 1-col layout */
  [style*="min-height: 480"][style*="border-left: 2px solid"] { border-left: none !important; }
  [style*="min-height: 480"][style*="border-right: 2px solid"] { border-right: none !important; }
  /* ── Home hero: full-bleed photo background, text overlay ── */
  /* Grid grows with content; min-height ensures it fills the viewport even when content is short */
  [style*="minmax(0, 1.2fr)"] {
    position: relative !important;
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100svh - 80px) !important;
  }
  /* Image column → absolute full-bleed background behind text */
  [style*="minmax(0, 1.2fr)"] > div:last-child {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important; z-index: 0 !important;
  }
  /* Text column → sits above photo, with semi-transparent gradient wash.
     height:100% fills the grid row height (= max(content, viewport min-height)).
     min-height mirrors the grid so gradient covers the full hero on tall screens.
     overflow:visible lets content show on very small phones without clipping. */
  section#overview [style*="minmax(0, 1.2fr)"] > div:first-child {
    position: relative !important; z-index: 1 !important;
    height: 100% !important;
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100svh - 80px) !important;
    overflow: visible !important;
    padding: 20px 20px 24px !important;
    background: linear-gradient(to bottom, rgba(245,243,239,1) 0%, rgba(245,243,239,0.97) 70%, rgba(245,243,239,0.82) 100%) !important;
  }
  /* Opacity/flex wrapper inside text column: shrink to content so CTA/stats stay on screen */
  section#overview [style*="minmax(0, 1.2fr)"] > div > div[style*="flex: 1"] { flex: none !important; overflow: visible !important; }
  /* Angle dots: hide on mobile (saves vertical space, no hover interaction anyway) */
  [style*="minmax(0, 1.2fr)"] [style*="margin: 16px 0"] { display: none !important; }
  /* Trade + pricing hero side panels: hide on mobile so text fills the full-bleed section.
     `minmax(0, ...)` serializes as `minmax(0px, ...)` — match both forms. */
  .hero-viewport [style*="minmax(300px, 1fr)"] > div:last-child,
  .hero-viewport [style*="minmax(0, 1fr) auto"] > div:last-child,
  .hero-viewport [style*="minmax(0px, 1fr) auto"] > div:last-child { display: none !important; }
  /* Other section flex-column panes: remove desktop overflow clip on mobile */
  section > div > div[style*="overflow: hidden"][style*="flex-direction: column"] { overflow: visible !important; }
  /* Hero CTA buttons: wrap so "BLUEPRINT" doesn't overflow right edge */
  [style*="minmax(0, 1.2fr)"] > div [style*="gap: 8px"][style*="flex-shrink: 0"] { flex-wrap: wrap !important; }
  /* Agenda rows (20-min section): narrow the fixed time column so text has room */
  [style*="gridTemplateColumns: '110px"] {
    grid-template-columns: 72px 1fr !important;
    padding: 16px 18px !important;
    gap: 14px !important;
  }
  /* Booking form: header row (date/time picker + form section) allow wrap */
  #booking > div > div:first-child { flex-wrap: wrap !important; }
  /* Phases timeline: hide desktop Gantt + week axis; show vertical-stacked mobile version */
  [data-phase-chart], [data-phase-week-axis] { display: none !important; }
  [data-phase-chart-mobile] { display: flex !important; }
}


/* ═══════════════════════════════════════════
   PHONE  <= 560px
   ═══════════════════════════════════════════ */
@media (max-width: 560px) {
  section, footer, header { padding-left: 16px !important; padding-right: 16px !important; }

  h1, h2 { font-size: clamp(32px, 10vw, 48px) !important; }
  h3      { font-size: clamp(20px, 5.5vw, 26px) !important; }

  /* JumpNav: extra compact on phone */
  [style*="position: sticky"][style*="top: 80"] a {
    padding: 9px 11px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  /* Keep simulator link hidden on phones (already hidden at ≤1100px, safety fallback) */
  [style*="position: sticky"][style*="top: 0"] a[href*="revenue-simulator"] { display: none !important; }

  /* Tighter inner padding on phones */
  [style*="padding: 40px"]:not(section):not(footer),
  [style*="padding:40px"]:not(section):not(footer) { padding: 18px !important; }

  /* Hero inner panels on phones: compress vertical too (64px → 32px, 120px → 48px) */
  [style*="padding: 64px 40px"]:not(section):not(footer)  { padding: 32px 16px !important; }
  [style*="padding: 120px 40px"]:not(section):not(footer) { padding: 48px 16px !important; }

  /* Hide nav CTA on small phones — logo + CTA + burger overflow 375px; use burger menu instead */
  [style*="position: sticky"][style*="top: 0"] a[href*="book-scoping-call"] { display: none !important; }

  /* Ticker strips: smaller font */
  [style*="overflow: hidden"][style*="padding: 10px"],
  [style*="overflow: hidden"][style*="padding: 14px"] { font-size: 10px !important; }

  /* Stats / spec tiles: 2-up on phone for repeat(4) and repeat(6) grids */
  [style*="gridTemplateColumns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="gridTemplateColumns"][style*="repeat(6"],
  [style*="grid-template-columns"][style*="repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Booking date picker: keep 3 columns on phones (3×3 = 9 weekdays).
     Overrides the general repeat(4, ...) → desktop layout. */
  #booking [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* Booking timezone/header label: allow wrapping on narrow screens */
  [style*="20-MIN BLOCKS"] { white-space: normal !important; word-break: break-word !important; font-size: 9px !important; }

  /* Card-content grids: override the 2-col rule above for sections with tall card content */
  #phases  [style*="grid-template-columns"],
  #physics [style*="grid-template-columns"],
  section[style*="padding: 88px 40px"] [style*="grid-template-columns"][style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* FAQ button: on small phones, remove code column too — just question + toggle */
  [style*="grid-template-columns: 60px 100px 1fr 24px"] {
    grid-template-columns: 1fr 28px !important;
  }
  [style*="grid-template-columns: 60px 100px 1fr 24px"] > *:nth-child(1),
  [style*="grid-template-columns: 60px 100px 1fr 24px"] > *:nth-child(2) {
    display: none !important;
  }

  /* Pricing cards: force single column on phones */
  [style*="repeat(auto-fit"][style*="320px"] {
    grid-template-columns: 1fr !important;
  }

  /* about.html #numbers: 48px stat values overflow 2-up cells at 375px ("99.98%" = 173px > 121px cell) */
  #numbers [style*="font-size: 48px"] {
    font-size: clamp(24px, 7vw, 40px) !important;
  }
}


/* ═══════════════════════════════════════════
   MOBILE MENU DRAWER
   ═══════════════════════════════════════════ */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #16161A; color: #FA6015;
  border: none; cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px; font-weight: 700;
}
.nav-drawer {
  position: fixed; inset: 0;
  background: #16161A; color: #F2EFE9;
  z-index: 100;
  display: none; flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.nav-drawer.open { display: flex; }
.nav-drawer .close {
  align-self: flex-end;
  background: transparent; color: #FA6015;
  border: 2px solid #FA6015;
  padding: 8px 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; cursor: pointer;
}
.nav-drawer a {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(24px, 7vw, 32px); color: #F2EFE9;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-transform: uppercase; letter-spacing: -0.5px;
  overflow-wrap: anywhere;
  word-break: normal;
}
.nav-drawer a:hover,
.nav-drawer a:active { color: #FA6015; }
.nav-drawer .drawer-cta {
  display: flex; flex-direction: column;
  gap: 12px; margin-top: 24px;
}
.nav-drawer .drawer-cta a {
  position: relative;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 16px 28px; text-align: center;
  border: 2px solid #16161A;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    4px 4px 0 #16161A;
}
.nav-drawer .drawer-cta a.primary {
  color: #F2EFE9;
  border-color: #16161A;
  background:
    /* four corner rivets — dark dots with subtle highlight */
    radial-gradient(circle at 11px 11px, rgba(22,22,26,0.95) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 11px) 11px, rgba(22,22,26,0.95) 2.5px, transparent 3.5px),
    radial-gradient(circle at 11px calc(100% - 11px), rgba(22,22,26,0.95) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), rgba(22,22,26,0.95) 2.5px, transparent 3.5px),
    #D1501A;
  text-shadow: 0 1px 0 rgba(0,0,0,0.30);
}


/* ═══════════════════════════════════════════
   GLOBAL RANGE SLIDERS — touch-friendly thumbs on mobile
   Applies to trade-page TradeSimulator and any other plain
   <input type="range"> that doesn't carry its own thumb styling.
   Per-page styles (index.html, revenue-simulator.html) override these.
   ═══════════════════════════════════════════ */
input[type="range"] { touch-action: manipulation; }
@media (max-width: 768px) {
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 32px; height: 32px;
    background: #FA6015; border: 2px solid #16161A;
    cursor: pointer;
  }
  input[type="range"]::-moz-range-thumb {
    width: 32px; height: 32px;
    background: #FA6015; border: 2px solid #16161A;
    border-radius: 0; cursor: pointer;
  }
}

/* ── Simulator slider (TradeSimulator + revenue-simulator page) ── */
.sim-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(22,22,26,0.18); outline: none; cursor: pointer; touch-action: manipulation; }
.sim-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #FA6015; border: 2px solid #16161A; cursor: grab; }
.sim-slider::-moz-range-thumb { width: 24px; height: 24px; background: #FA6015; border: 2px solid #16161A; cursor: grab; border-radius: 0; }
.sim-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
@media (max-width: 768px) {
  .sim-slider { height: 8px; }
  .sim-slider::-webkit-slider-thumb { width: 32px; height: 32px; }
  .sim-slider::-moz-range-thumb { width: 32px; height: 32px; }
}

/* ═══════════════════════════════════════════
   HOME HERO — unify text + photo into one mobile section
   Hides the right-side photo pane on phones so the hero reads
   as a single column. Desktop/tablet untouched.
   `minmax(0, ...)` serializes as `minmax(0px, ...)` — match both.
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-viewport [style*="minmax(0, 1.2fr) minmax(0, 1fr)"] > div:last-child,
  .hero-viewport [style*="minmax(0px, 1.2fr) minmax(0px, 1fr)"] > div:last-child {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════
   DESKTOP WIDE-MARGIN — uncramp large screens
   The site uses inline `padding: ... 40px` and inner `maxWidth: 1280/1400`.
   On wide viewports the 40px gutter feels tight; bump it without rewriting JSX.
   ═══════════════════════════════════════════ */
@media (min-width: 1280px) {
  section, footer, header { padding-left: 72px !important; padding-right: 72px !important; }
  /* Sticky nav strip: matches header padding so logo doesn't kiss the edge */
  [style*="position: sticky"][style*="top: 0"] > div:first-child {
    padding-left: 72px !important; padding-right: 72px !important;
  }
  /* Constrain inner content wrappers so wide screens don't sprawl text columns.
     Match both spaced + unspaced inline-style serializations. */
  section > div[style*="max-width: 1400"],
  section > div[style*="max-width:1400"] { max-width: 1280px !important; }
  section > div[style*="max-width: 1280"],
  section > div[style*="max-width:1280"] { max-width: 1180px !important; }
  /* Hero stays edge-to-edge — overrides section gutter for full-width visual */
  section.hero-viewport { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 1600px) {
  section, footer, header { padding-left: 96px !important; padding-right: 96px !important; }
  [style*="position: sticky"][style*="top: 0"] > div:first-child {
    padding-left: 96px !important; padding-right: 96px !important;
  }
  section.hero-viewport { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Hero safety valve: auto-size on short desktop screens so content stays above the fold */
@media (min-width: 769px) and (max-height: 800px) {
  .hero-viewport { height: auto !important; min-height: 600px; }
}

/* ═══════════════════════════════════════════
   MOBILE HEADLINE CAP — overrides oversized inline clamp()/font-size
   on display headlines so words don't break mid-syllable on phones.
   Higher specificity (attribute selector) + !important beats inline styles.
   ═══════════════════════════════════════════ */
@media (max-width: 560px) {
  h1[style*="clamp"], h2[style*="clamp"], h3[style*="clamp"],
  h1[style*="font-size"], h2[style*="font-size"] {
    font-size: clamp(28px, 9vw, 44px) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.05 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
  }
}
@media (min-width: 561px) and (max-width: 768px) {
  h1[style*="clamp"], h2[style*="clamp"], h3[style*="clamp"],
  h1[style*="font-size"], h2[style*="font-size"] {
    font-size: clamp(36px, 7vw, 60px) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.05 !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════
   BLOG GRID — 3 per row on desktop, 2 on tablet, 1 on mobile
   ═══════════════════════════════════════════ */
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ═══════════════════════════════════════════
   CLIENTS PAGE — stack split-view on mobile
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .clients-split { grid-template-columns: 1fr !important; }
  .clients-split-img { min-height: 240px !important; aspect-ratio: 16/10 !important; }
  .clients-metrics { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .clients-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .clients-split-text { padding: 24px !important; }
}


/* ═══════════════════════════════════════════
   TESTIMONIALS — stack/wrap on tablet & mobile
   ═══════════════════════════════════════════ */
@media (max-width: 980px) {
  .testimonial-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonial-case { grid-template-columns: 1fr !important; }
  .testimonial-case-photo { min-height: 480px !important; }
  .testimonial-compare { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .testimonial-stats-grid { grid-template-columns: 1fr !important; }
  .testimonial-case-text { padding: 32px 24px !important; }
  .testimonial-compare { grid-template-columns: 1fr !important; }
}