/* BoulevardLabs — fluid layer between the mobile (≤820px, mobile.css) and desktop (≥1280px) endpoints.
   Desktop markup is untouched at ≥1280px; everything here interpolates toward it.
   Range syntax (width > 820px) is used so fractional/zoomed widths never fall between breakpoints. */

:root { --g: 68px; }
@media (width > 820px) and (width < 1280px) { :root { --g: clamp(32px, 5.3125vw, 68px); } }
@media (width <= 820px) { :root { --g: 20px; } }

/* ---------- media & text safety (all widths) ---------- */
img:not([style*="position: absolute"]), video { max-width: 100%; }
h1, h2, h3 { overflow-wrap: break-word; }

/* =====================================================================
   PHASE 1 — shared foundation
   ===================================================================== */
@media (width > 820px) and (width < 1280px) {
  [style*="px 68px"], [style*="padding: 0px 68px"] { padding-left: var(--g) !important; padding-right: var(--g) !important; }
  [style*="padding-left: 68px"] { padding-left: var(--g) !important; }
  [style*="padding-right: 68px"] { padding-right: var(--g) !important; }
  [style*="position: absolute"][style*="left: 68px"] { left: var(--g) !important; }
  [style*="position: absolute"][style*="right: 68px"] { right: var(--g) !important; }

  /* gaps scale with the viewport, landing on their desktop value at 1280 */
  [style*="gap: 96px"] { gap: clamp(44px, 7.5vw, 96px) !important; }
  [style*="gap: 80px"] { gap: clamp(40px, 6.25vw, 80px) !important; }
  [style*="gap: 72px"] { gap: clamp(36px, 5.625vw, 72px) !important; }
  [style*="gap: 64px"] { gap: clamp(32px, 5vw, 64px) !important; }
  [style*="gap: 58px"] { gap: clamp(32px, 4.53vw, 58px) !important; }
  [style*="gap: 56px"] { gap: clamp(30px, 4.375vw, 56px) !important; }
  [style*="gap: 48px"] { gap: clamp(28px, 3.75vw, 48px) !important; }

  /* section rhythm: vertical padding eases down with the gutters */
  [style*="padding: 100px"], [style*="padding: 96px"], [style*="padding: 94px"], [style*="padding: 92px"],
  [style*="padding: 88px"], [style*="padding: 86px"], [style*="padding: 84px"], [style*="padding: 80px"] {
    padding-top: clamp(64px, 7.2vw, 92px) !important; padding-bottom: clamp(64px, 7.2vw, 92px) !important;
  }

  /* display type: fluid down to the tablet range */
  h1[style*="font-size: 72px"] { font-size: clamp(44px, 5.625vw, 72px) !important; }
  h1[style*="font-size: 62px"] { font-size: clamp(42px, 4.84vw, 62px) !important; }
  h1[style*="font-size: 60px"] { font-size: clamp(42px, 4.69vw, 60px) !important; }
  h1[style*="font-size: 56px"] { font-size: clamp(40px, 4.375vw, 56px) !important; }
  h1[style*="font-size: 54px"] { font-size: clamp(40px, 4.22vw, 54px) !important; }
  h1[style*="font-size: 52px"] { font-size: clamp(38px, 4.06vw, 52px) !important; }
  h2[style*="font-size: 42px"] { font-size: clamp(32px, 3.28vw, 42px) !important; }
  h2[style*="font-size: 40px"] { font-size: clamp(31px, 3.125vw, 40px) !important; }
  h2[style*="font-size: 38px"] { font-size: clamp(30px, 2.97vw, 38px) !important; }
  h2[style*="font-size: 37px"] { font-size: clamp(30px, 2.89vw, 37px) !important; }
  h2[style*="font-size: 36px"] { font-size: clamp(29px, 2.81vw, 36px) !important; }
  h2[style*="font-size: 34px"] { font-size: clamp(28px, 2.66vw, 34px) !important; }
  h2[style*="font-size: 33px"] { font-size: clamp(28px, 2.58vw, 33px) !important; }
  h2[style*="font-size: 32px"] { font-size: clamp(27px, 2.5vw, 32px) !important; }

  /* header: desktop nav tightens before it collapses */
  [style*="position: sticky"][style*="z-index: 50"] > div:first-child { gap: 28px !important; }
  .bl-links { gap: clamp(14px, 1.875vw, 24px) !important; }
  .bl-links > span { padding-left: clamp(20px, 3.3vw, 42px) !important; padding-right: clamp(20px, 3.3vw, 42px) !important; }

  /* mega menus: keep every column legible inside the viewport */
  [style*="position: absolute; top: 100%; left: 0px; width: 100%"] [style*="fr)) 320px"] { grid-template-columns: repeat(var(--mm-n, 3), minmax(0, 1fr)) minmax(230px, 25%) !important; }
  [style*="position: absolute; top: 100%; left: 0px; width: 100%"] [style*="repeat(4, minmax(0px, 1fr)) 320px"] { --mm-n: 4; }
  [style*="position: absolute; top: 100%; left: 0px; width: 100%"] [style*="padding: 32px 30px"] { padding: 26px 22px !important; }
  [style*="position: absolute; top: 100%; left: 0px; width: 100%"] [style*="padding: 30px 24px"] { padding: 26px 18px !important; }
  [style*="position: absolute; top: 100%; left: 0px; width: 100%"] [style*="padding: 28px 22px"] { padding: 24px 18px !important; }

  /* legal pages: TOC column scales */
  .lg-wrap { grid-template-columns: clamp(190px, 20.3vw, 260px) minmax(0, 1fr) !important; }
}

/* compact navigation: ≤1100px, and on touch-only devices */
@media (width <= 1100px), (hover: none) and (pointer: coarse) {
  .bl-links { display: none !important; }
  [style*="position: absolute; top: 100%; left: 0px; width: 100%"] { display: none !important; }
  [style*="position: sticky"][style*="z-index: 50"] > div:first-child { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* footer: reorganizes before it squeezes */
@media (width > 820px) and (width <= 1100px) {
  div:has(> .ft-logo-col) { flex-wrap: wrap !important; row-gap: 36px !important; column-gap: clamp(32px, 4vw, 40px) !important; }
  .ft-logo-col { flex: 0 1 260px !important; min-width: 200px; }
  div:has(> .ft-logo-col) > div:last-child { flex-wrap: wrap; row-gap: 28px; }
}
@media (width > 820px) and (width <= 900px) {
  div:has(> .ft-logo-col) { flex-direction: column !important; }
  .ft-logo-col { transform: none !important; flex: none !important; width: 240px; }
  div:has(> .ft-logo-col) > div:last-child { width: 100%; justify-content: space-between; }
}

@media (width <= 480px) {
  html body [style*="grid-template-columns: 170px 1fr"] { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) !important; }
  html body [style*="grid-template-columns: 170px 1fr"] > div { overflow-wrap: anywhere; padding-left: 12px !important; padding-right: 12px !important; }
  html body div:has(> .ft-logo-col) > div:last-child { flex-wrap: wrap !important; justify-content: center !important; gap: 24px 32px !important; }
}

/* mobile drawer */
.bl-drawer { overscroll-behavior: contain; padding-top: max(22px, env(safe-area-inset-top)) !important; padding-bottom: max(32px, env(safe-area-inset-bottom)) !important; }
@media (width > 820px) { .bl-drawer { padding-left: var(--g) !important; padding-right: var(--g) !important; } }

/* =====================================================================
   PHASE 2 — Home, Capabilities, Products, Industries
   ===================================================================== */

/* ---------- HOME ---------- */
@media (width > 820px) and (width < 1280px) {
  /* hero keeps its proportion instead of a fixed 880px slab */
  [style*="height: 880px"] { height: clamp(620px, 68.75vw, 880px) !important; }
}
@media (width > 820px) and (width <= 1100px) {
  /* AI for Impact formats: 4 → 2×2 */
  html body .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* free resources: intro sits above the four covers */
  .ai-resrow > [style*="span 4"], .ai-resrow > [style*="span 8"] { grid-column: 1 / -1 !important; }
  .ai-resrow > [style*="span 4"] { max-width: 620px; }
  /* technology-in-production rows: columns narrow before anything stacks */
  .tp-row > div:first-child, .tp-detail { grid-template-columns: clamp(120px, 15vw, 170px) minmax(0, 1fr) clamp(150px, 20vw, 210px) 24px !important; gap: clamp(18px, 2.6vw, 32px) !important; }
}
@media (width > 820px) and (width <= 960px) {
  html body .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (width > 820px) and (width <= 900px) {
  /* product rows: the tag column drops under the description */
  .tp-row > div:first-child { grid-template-columns: 120px minmax(0, 1fr) 24px !important; row-gap: 6px !important; }
  .tp-row > div:first-child > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .tp-row > div:first-child > :nth-child(4) { grid-column: 3; grid-row: 1; }
  .tp-detail { grid-template-columns: 120px minmax(0, 1fr) !important; }
  .tp-detail > :nth-child(3) { grid-column: 2; }
  .tp-detail > :nth-child(4) { display: none; }
}

/* ---------- CAPABILITIES ---------- */
@media (width > 820px) and (width < 1280px) {
  body:has(.cap-sec) aside { width: clamp(200px, 19.5vw, 250px) !important; }
}
@media (width > 820px) and (width <= 1100px) {
  /* proof column moves under the copy and lays out as a row */
  .cap-sec > [style*="repeat(12"] > [style*="span 7"], .cap-sec > [style*="repeat(12"] > [style*="span 5"] { grid-column: 1 / -1 !important; }
  .cap-sec > [style*="repeat(12"] > [style*="span 7"] h2 { max-width: 760px !important; }
  .cap-sec > [style*="repeat(12"] > [style*="span 5"] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px !important; align-items: start; }
  .cap-sec > [style*="repeat(12"] > [style*="span 5"] > :first-child { grid-row: span 3; }
}
@media (width > 820px) and (width <= 960px) {
  /* the sticky side index becomes the compact selector bar */
  body:has(.cap-sec) aside { display: none !important; }
  .mc-bar { position: sticky; top: 62px; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 14px var(--g) 0; border-bottom: 1px solid #E2E2E7; }
  .cap-detail [style*="repeat(12"] > [style*="span 7"], .cap-detail [style*="repeat(12"] > [style*="span 5"] { grid-column: 1 / -1 !important; }
  .cap-detail [style*="repeat(12"] > [style*="span 5"] { justify-content: flex-start !important; }
}

/* ---------- PRODUCTS ---------- */
@media (width > 820px) {
  /* landscape iPad scales to its column (factor set by responsive.js) */
  [style*="width: 690px"][style*="scale(1.6)"] { transform: scale(var(--fit, 1.6)) !important; }
  [style*="height: 773px"][style*="overflow: hidden"] { height: calc(483.125px * var(--fit, 1.6)) !important; }
}
/* portrait iPad (the mobile mockup) — applied by responsive.js when the column drops below the legible landscape width */
.pd-portrait[style*="height: 773px"][style*="overflow: hidden"] { height: auto !important; overflow: visible !important; padding: 6px 0 24px; }
.pd-portrait > [style*="width: 690px"][style*="scale(1.6)"] { width: min(330px, calc(100vw - 50px)) !important; transform: none !important; margin: 0 auto; zoom: var(--pz, 1); }
.pd-portrait .pd-dash > div:first-child { height: 422px !important; position: relative; }
.pd-portrait .pd-dash:has(> .ram-mob), .pd-portrait .pd-dash:has(> * > .st-mob), .pd-portrait .pd-dash:has(> .st-mob) { position: relative !important; height: 422px !important; padding: 0 !important; }
.pd-portrait .pd-dash > .ram-mob ~ *, .pd-portrait .pd-dash > * > .st-mob ~ * { visibility: hidden; }
.pd-portrait .pd-dash :is(.ram-mob, .st-mob) { display: block !important; z-index: 5; --rms: .537; }
.pd-portrait .pd-dash .st-mob > div > div:last-child { justify-content: flex-start; }
.pd-portrait .pd-dash .st-mob > div > div:last-child > * { flex-shrink: 0; }
html body .pd-dash :is(.ram-mob, .st-mob) [style*="white-space: nowrap"] { white-space: nowrap !important; }
@media (width > 820px) and (width <= 1100px) {
  /* side panels leave the right column and form a 2-up grid under the story: News | Capabilities, Talk | How to buy */
  div:has(> div > .fs[data-product]) > div { grid-column: 1 / -1 !important; }
  div:has(> .fs[data-product]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3.5vw, 36px) !important; align-items: start; }
  .pr-panel > [style*="repeat(12"]:first-child > [style*="span 8"] { grid-column: 1 / -1 !important; }
}

/* ---------- INDUSTRIES (hub + shared industry components) ---------- */
@media (width > 820px) and (width <= 1000px) {
  html body .ih-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (width > 820px) and (width <= 1024px) {
  html body .pp-track > .ppc { flex-basis: calc((100% - 20px) / 2) !important; }
}

/* =====================================================================
   PHASE 3 — remaining pages + shared page components
   ===================================================================== */

/* grid items may shrink below their content (code blocks, long tokens scroll inside instead of widening the page) */
[style*="grid-column: span"] { min-width: 0; }
pre { max-width: 100%; }
table { max-width: 100%; }
/* About timeline: blurred ambient glow is decorative — clip it to the section */
.tl-outer { overflow-x: clip; }

/* dense 4-up card rows → 2×2 once columns drop under ~190px */
@media (width > 820px) and (width <= 960px) {
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"]:not([style*="width: 690px"] *):not([style*="width: 1160px"] *):not(.pd-dash *):not([style*="position: absolute; top: 100%"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Ghost Works project cards (Work page + Ghost Works page): one per row before the stat grids squeeze */
@media (width > 820px) and (width <= 1180px) {
  html body div:has(> #no-soup-sandwich) { grid-template-columns: minmax(0, 1fr) !important; }
  html body div:has(> #no-soup-sandwich) > .wk-sec > [style*="repeat(2"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
div:has(> #no-soup-sandwich) .wk-sec [style*="font-size: 14.5px; font-weight: 700"] { overflow-wrap: anywhere; }

/* Ghost Works hero: shield sits behind the copy once there's no right half to hold it */
@media (width <= 1100px) { .gw-shield { opacity: .4; } }
@media (width <= 820px) { .gw-shield-wrap { display: none; } }

/* Drone Works — 4 steps divide evenly: 4 → 2×2 → 1 */
@media (width <= 1100px) { html body .dw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (width <= 560px) { html body .dw-steps { grid-template-columns: minmax(0, 1fr) !important; } }

/* Drone Works hero: shade follows the copy as it widens relative to the art */
@media (width > 820px) and (width <= 1100px) {
  html body .dw-hero-shade { background-image: linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.8) 55%, rgba(8,8,10,.35) 78%, rgba(8,8,10,0) 92%), linear-gradient(180deg, rgba(8,8,10,0) 60%, rgba(8,8,10,.55) 100%) !important; }
}
@media (width <= 820px) {
  html body .dw-hero-shade { background-image: linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.8) 45%, rgba(8,8,10,.9) 100%) !important; }
}

@media (width <= 1100px) {
  html body .dw-drone-front { opacity: .3; }
}

/* About — method steps */
@media (width > 820px) and (width <= 1024px) {
  div:has(> .ap-step) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* AI for Impact — horizontal resource cards (cover + copy): one per row before the copy column gets squeezed */
@media (width > 820px) and (width <= 1200px) {
  div:has(> .rs-card) { grid-template-columns: minmax(0, 1fr) !important; }
  .rs-card { grid-template-columns: clamp(170px, 20vw, 230px) minmax(0, 1fr) !important; }
}

/* Industry pages — horizontal case-study cards and their expanded body */
@media (width > 820px) and (width < 1280px) {
  .pp-sum { grid-template-columns: minmax(240px, 36%) minmax(0, 1fr) !important; gap: clamp(24px, 3.1vw, 40px) !important; }
}
@media (width > 820px) and (width <= 960px) {
  .pp-sum { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .pp-sum > span:first-child, .pp-sum .pp-img { min-height: 260px !important; }
  .pp-body > [style*="span 7"], .pp-body > [style*="span 5"] { grid-column: 1 / -1 !important; }
}

/* ---------- 600–820: tablet portrait keeps 2-up card grids instead of one long column ---------- */
@media (width >= 600px) and (width <= 820px) {
  html body .ai-grid, html body .cc-grid, html body .ih-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body div:has(> .ai-res) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body .pp-track { gap: 16px !important; }
  html body .pp-track > .ppc { flex: 0 0 calc((100% - 16px) / 2) !important; }
  html body div:has(> .fs[data-product]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px !important; align-items: start; }
  html body div:has(> .ap-step) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .rs-card { grid-template-columns: 150px minmax(0, 1fr) !important; gap: 22px !important; }
}

/* =====================================================================
   WIDE SCREENS (> 1440px): the layout stays in its 1440px column, and each
   section's background color is carried out to the screen edges by a11y.js
   (box-shadow + clip-path), so there are no side bars.
   ===================================================================== */

/* Typography: balanced headings (no single-word last lines) and paragraphs that
   avoid ending on one orphaned word. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }