/* Lincoln Labs responsive layer.
   The page markup carries the desktop design as inline styles. Everything here
   overrides those inline values at each breakpoint, which is why it leans on
   !important: an inline style cannot be beaten any other way.

   Breakpoints
     1200  fluid container, desktop layout intact
     1024  wide grids collapse to two columns
      820  everything becomes a single column, type steps down
      600  phone padding and the tightest type
*/

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
/* the orbit canvas is deliberately wider than its box, so the glow spills past the ring */
canvas.orbitfx { max-width: none !important; }
img { height: auto; }
/* full bleed: backgrounds run edge to edge, the content inside stays on a 1200px measure */
.llpage { width: 100%; margin: 0; display: flex; flex-direction: column; background: #fff; }
@media (min-width: 1441px) {
  section, header, footer { padding-left: calc((100% - 1200px) / 2) !important;
    padding-right: calc((100% - 1200px) / 2) !important; }
}
section, header, footer { width: 100%; }

/* the sticky header sits above the hero canvases */
header { position: sticky; top: 0; z-index: 400; }

/* skip link, keyboard users land on the content not the nav */
.llskip { position: absolute; left: -9999px; top: 0; background: #C2FF00; color: #000;
  padding: 12px 18px; font-weight: 700; z-index: 900; border-radius: 0 0 10px 0; }
.llskip:focus { left: 0; }

/* ---------- mobile nav ---------- */
.llburger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 12px; background: #111827; border: 1px solid #374151; color: #fff; cursor: pointer; }
.llburger svg { display: block; }
.llnav-panel { display: none; }

@media (max-width: 1024px) {
  .llburger { display: inline-flex; }
  /* the desktop link row hides, its contents reappear in the panel */
  header nav > .navwrap, header nav > a.navlink { display: none !important; }
  header nav > a.ll-btn { display: none !important; }
  .llnav-panel { display: block; position: fixed; inset: 96px 0 0 0; background: #05070A;
    border-top: 1px solid #1F2937; padding: 22px 20px 40px; overflow-y: auto; z-index: 390;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
  .llnav-panel.open { opacity: 1; transform: none; pointer-events: auto; }
  .llnav-panel a { display: block; color: #fff; font-size: 19px; font-weight: 600;
    padding: 15px 4px; border-bottom: 1px solid #1F2937; }
  .llnav-panel .llnav-group { font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #C2FF00; padding: 24px 4px 6px; }
  .llnav-panel .llnav-cta { margin-top: 26px; background: #C2FF00; color: #000; border: 0;
    border-radius: 9999px; text-align: center; padding: 16px; font-weight: 700; }
  body.llnav-open { overflow: hidden; }
}

/* ---------- horizontal padding ---------- */
@media (max-width: 1200px) {
  section, header, footer { padding-left: 72px !important; padding-right: 72px !important; }
}
@media (max-width: 1024px) {
  section, header, footer { padding-left: 48px !important; padding-right: 48px !important; }
}
@media (max-width: 820px) {
  section, header, footer { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 600px) {
  section, header, footer { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ---------- vertical rhythm ---------- */
@media (max-width: 820px) {
  section { padding-top: 68px !important; padding-bottom: 68px !important; }
  section[style*="min-height"] { min-height: 0 !important; }
}
@media (max-width: 600px) {
  section { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* ---------- grids ---------- */
@media (max-width: 1200px) {
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* the split hero and every two-up editorial block stack */
  [style*="grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr)"],
  [style*="grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr)"],
  [style*="grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr)"],
  [style*="grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr)"],
  [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="gap: 80px"] { gap: 40px !important; }
  [style*="gap: 72px"] { gap: 36px !important; }
}
@media (max-width: 820px) {
  /* anything still in columns, including the bespoke pixel grids, goes to one */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* ...except an icon rail (a small fixed first column followed by the label).
     Those must stay two columns, or the number or icon ends up sitting on top of
     its own text. Matched exactly, so wider multi-column grids still collapse. */
  [style*="grid-template-columns: 28px minmax(0, 1fr);"],
  [style*="grid-template-columns: 32px minmax(0, 1fr);"],
  [style*="grid-template-columns: 36px minmax(0, 1fr);"],
  [style*="grid-template-columns: 40px minmax(0, 1fr);"],
  [style*="grid-template-columns: 44px minmax(0, 1fr);"],
  [style*="grid-template-columns: 46px minmax(0, 1fr);"],
  [style*="grid-template-columns: 48px minmax(0, 1fr);"],
  [style*="grid-template-columns: 56px minmax(0, 1fr);"] {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 4px 14px !important;
  }
  /* the editorial rows are icon | title | body. Keep the icon rail and let the body
     sit under the title rather than under the icon. */
  [style*="grid-template-columns: 64px 340px minmax(0, 1fr);"] {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px 16px !important; padding: 24px 0 !important; align-items: start !important;
  }
  [style*="grid-template-columns: 64px 340px minmax(0, 1fr);"] > *:nth-child(1) {
    width: 46px !important; height: 46px !important; border-radius: 14px !important; }
  [style*="grid-template-columns: 64px 340px minmax(0, 1fr);"] > *:nth-child(3) {
    grid-column: 2 !important; }
  /* a grid child that was told to span or start at a column no longer can */
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="gap: 56px"], [style*="gap: 48px"] { gap: 28px !important; }
}

/* ---------- type ---------- */
/* the design is drawn at 1440. a browser window is usually narrower than that,
   so the display sizes step down before the tablet breakpoints. */
@media (max-width: 1400px) {
  h1 { font-size: 76px !important; }
  h2 { font-size: 48px !important; }
  [style*="font-size: 88px"], [style*="font-size: 84px"], [style*="font-size: 80px"] { font-size: 72px !important; }
  [style*="font-size: 72px"], [style*="font-size: 68px"] { font-size: 60px !important; }
  [style*="font-size: 64px"] { font-size: 54px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"] { font-size: 48px !important; }
  [style*="font-size: 48px"], [style*="font-size: 44px"], [style*="font-size: 42px"] { font-size: 38px !important; }
}
@media (max-width: 1200px) {
  h1 { font-size: 64px !important; }
  h2 { font-size: 42px !important; }
  [style*="font-size: 88px"], [style*="font-size: 84px"], [style*="font-size: 80px"] { font-size: 60px !important; }
  [style*="font-size: 72px"], [style*="font-size: 68px"] { font-size: 52px !important; }
  [style*="font-size: 64px"] { font-size: 46px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"] { font-size: 42px !important; }
  [style*="font-size: 48px"], [style*="font-size: 44px"], [style*="font-size: 42px"] { font-size: 34px !important; }
  [style*="font-size: 38px"], [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 30px !important; }
  [style*="font-size: 24px"] { font-size: 21px !important; }
  [style*="font-size: 22px"] { font-size: 20px !important; }
}
@media (max-width: 1024px) {
  h1 { font-size: 54px !important; }
  h2 { font-size: 38px !important; }
  [style*="font-size: 88px"], [style*="font-size: 84px"], [style*="font-size: 80px"],
  [style*="font-size: 72px"], [style*="font-size: 68px"] { font-size: 46px !important; }
  [style*="font-size: 64px"] { font-size: 42px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"] { font-size: 38px !important; }
  [style*="font-size: 48px"], [style*="font-size: 44px"], [style*="font-size: 42px"] { font-size: 32px !important; }
  [style*="font-size: 38px"], [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 28px !important; }
  [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 26px !important; }
  [style*="font-size: 27px"], [style*="font-size: 26px"] { font-size: 23px !important; }
  [style*="font-size: 24px"] { font-size: 20px !important; }
  [style*="font-size: 22px"], [style*="font-size: 21px"] { font-size: 19px !important; }
}
@media (max-width: 820px) {
  h1 { font-size: 44px !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; }
  h2 { font-size: 33px !important; line-height: 1.15 !important; }
  h3 { font-size: 24px !important; }
  [style*="font-size: 88px"], [style*="font-size: 84px"], [style*="font-size: 80px"] { font-size: 41px !important; }
  [style*="font-size: 72px"], [style*="font-size: 68px"], [style*="font-size: 64px"] { font-size: 37px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"],
  [style*="font-size: 44px"], [style*="font-size: 42px"] { font-size: 31px !important; }
  [style*="font-size: 38px"], [style*="font-size: 36px"], [style*="font-size: 34px"],
  [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 26px !important; }
  [style*="font-size: 28px"], [style*="font-size: 26px"], [style*="font-size: 25px"],
  [style*="font-size: 24px"] { font-size: 22px !important; }
  [style*="font-size: 23px"], [style*="font-size: 22px"], [style*="font-size: 21px"] { font-size: 19px !important; }
  [style*="font-size: 20px"], [style*="font-size: 19px"] { font-size: 18px !important; }
  p { max-width: none !important; }
  [style*="max-width"] { max-width: 100% !important; }
}

/* ---------- pieces that need their own handling ---------- */
/* the logo marquee is a 1440px strip pulled out to the page edges */
.marqwrap { width: 100% !important; margin-left: 0 !important; }
@media (max-width: 820px) { .marquee { animation-duration: 28s; } }

/* the orbit hero: nodes are absolutely placed around a circle, so below the
   breakpoint they become an ordinary stacked list and the ring is dropped */
@media (max-width: 1024px) {
  .orbwrap { width: 100% !important; height: auto !important; display: flex !important;
    flex-direction: column; gap: 12px; }
  .orbwrap > canvas, .orbcore { display: none !important; }
  .orbnode { position: static !important; transform: none !important; width: 100% !important;
    left: auto !important; top: auto !important; }
}

/* hero canvases keep their aspect but never force width */
canvas.heroanim, canvas.herofx, canvas.dotfield { max-width: 100%; }

/* buttons wrap instead of overflowing */
@media (max-width: 600px) {
  .ll-btn { width: 100%; justify-content: center; }
  [style*="display: flex"][style*="gap: 16px"] > .ll-btn { width: 100%; }
}

/* tables and wide strips scroll rather than break the page */
.lloverflow { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* form controls are already fluid, just make the targets finger sized */
@media (max-width: 820px) {
  .llc { font-size: 16px !important; padding: 15px !important; }  /* 16px stops iOS zooming on focus */
  .llup { padding: 22px !important; }
}

/* the sticky footer columns */
@media (max-width: 1024px) {
  footer > div:first-child { flex-direction: column !important; gap: 36px !important; }
  footer > div:first-child > div:last-child { flex-wrap: wrap !important; gap: 32px !important; }
}
@media (max-width: 600px) {
  footer > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
}

/* respect the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- narrow-width corrections ---------- */
/* the skip link must not add width while it is hidden */
.llskip { width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.llskip:focus { width: auto; height: auto; overflow: visible; }

/* the logo marquee is deliberately wider than the page, keep it clipped */
.marqwrap { overflow: hidden !important; }

@media (max-width: 820px) {
  /* a flex row that never said "column" is allowed to wrap */
  [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap !important; }
  /* but not an icon rail: the chip has a fixed width and height, and the label
     belongs beside it however long it runs */
  [style*="display: flex"]:not([style*="flex-direction: column"]):has(> [style*="flex-shrink: 0"][style*="width:"]) {
    flex-wrap: nowrap !important;
    overflow-wrap: anywhere;
  }
  /* grid and flex children may shrink below their content width */
  [style*="display: grid"] > *, [style*="display: flex"] > * { min-width: 0; }
  /* long button labels wrap instead of pushing the page wide */
  .ll-btn { white-space: normal !important; text-align: center; }
  /* anything still pinned to a pixel width gives it up, except the marquee tiles,
     which are sized for the phone further down */
  [style*="width: 240px"]:not(.trusttile), [style*="width: 260px"]:not(.trusttile),
  [style*="width: 300px"]:not(.trusttile), [style*="width: 360px"]:not(.trusttile),
  [style*="width: 230px"]:not(.trusttile) { width: 100% !important; }
  img { max-width: 100%; }
}

/* ---------- file upload ---------- */
/* the dashed box is the control; the real input sits behind it */
.llf:has(.llfile) { cursor: pointer; }
.llup { display: block; }
.llfile { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.llf:focus-within .llup { border-color: #C2FF00; box-shadow: 0 0 0 3px rgba(194, 255, 0, 0.25); }
.llup:hover { border-color: #9CA3AF; }

/* ================================================================
   Mobile polish pass
   ================================================================ */

/* ---------- the trust marquees ---------- */
/* Tiles sized for a 1440px strip are far too big on a phone, and a fixed
   duration means the shorter the strip the faster it appears to move. */
@media (max-width: 820px) {
  .trusttile { width: 158px !important; height: 68px !important; border-radius: 12px !important;
    gap: 8px !important; padding: 0 14px !important; }
  .trusttile img { max-height: 26px !important; max-width: 110px !important; }
  .trusttile > span { font-size: 15px !important; }
  .trusttile--text { width: auto !important; padding: 0 20px !important; font-size: 15px !important; }
  .marquee { gap: 10px !important; animation-duration: 70s !important; }
  /* the strip sits tighter to the copy above it */
  .marqwrap + .marqwrap { margin-top: -4px; }
}
@media (max-width: 600px) {
  .trusttile { width: 138px !important; height: 60px !important; }
  .marquee { animation-duration: 80s !important; }
}

/* the black stat line under the marquee: a pill only works on one line. Once the
   text wraps it reads as a blob, so below the breakpoint it becomes a plain card. */
@media (max-width: 820px) {
  /* as a flex row it either wraps into a blob or pushes its inline links off the
     edge. As a block it is ordinary wrapping text in a card. */
  .statpill[style*="display: flex"] { display: block !important; border-radius: 16px !important;
    padding: 16px 18px !important; font-size: 15px !important; line-height: 1.5 !important;
    align-self: stretch !important; margin-top: 14px !important; text-align: left !important; }
  .statpill > span:first-child { display: inline-block !important; vertical-align: middle;
    margin-right: 9px; position: relative; top: -1px; }
}

/* ---------- who we help: the expanded panel ---------- */
@media (max-width: 820px) {
  .whopane { padding: 4px 4px 8px !important; gap: 24px !important; }
  .whopane > div { gap: 18px !important; }
  .whotab { min-height: 0 !important; padding: 20px !important; }
}

/* ---------- From idea to scale ---------- */
/* Five columns divided by a hairline read as one table on a phone: every stage
   runs into the next. Each stage becomes its own card instead. */
@media (max-width: 820px) {
  .stackmod { margin-left: 0 !important; gap: 14px !important; }
  .stackcol { border-left: 0 !important; border: 1px solid #1F2937 !important;
    border-radius: 18px !important; background: rgba(255,255,255,0.02);
    padding: 22px !important; gap: 14px !important; }
  .stackcol > div:last-child > div:first-child { border-top: 0 !important; padding-top: 0 !important; }
}
/* the stage numbers count in as the module comes into view */
.stacknum { display: inline-block; }
.stackmod[data-lit] .stacknum { opacity: 0; transform: translateY(14px) scale(0.82); }
.stackmod[data-lit="on"] .stacknum { opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.stackmod[data-lit="on"] .stackcol:nth-child(1) .stacknum { transition-delay: 0ms; }
.stackmod[data-lit="on"] .stackcol:nth-child(2) .stacknum { transition-delay: 90ms; }
.stackmod[data-lit="on"] .stackcol:nth-child(3) .stacknum { transition-delay: 180ms; }
.stackmod[data-lit="on"] .stackcol:nth-child(4) .stacknum { transition-delay: 270ms; }
.stackmod[data-lit="on"] .stackcol:nth-child(5) .stacknum { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .stackmod[data-lit] .stacknum { opacity: 1 !important; transform: none !important; }
}

/* ---------- portfolio rows ---------- */
/* A four column table row (logo, name, sector, arrow) flattened to one column
   leaves a stray pill and a lone arrow. Each row becomes a card. */
@media (max-width: 820px) {
  .portlist { border-top: 0 !important; }
  .portrow { display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 10px !important;
    padding: 20px !important; margin-bottom: 12px;
    border: 1px solid #E5E7EB !important; border-bottom: 1px solid #E5E7EB !important;
    border-radius: 18px; background: #fff; }
  .portlogo { height: 38px !important; }
  .portlogo img { max-height: 32px !important; max-width: 150px !important; }
  .portmeta { gap: 4px !important; }
  .porttag { justify-self: start !important; }
  /* the arrow stays: without it the row stops reading as something you can tap */
  .portarrow { display: flex !important; justify-self: start !important;
    align-self: flex-start; padding-top: 2px; }
}

/* ---------- the exploding headline wraps on a phone ---------- */
@media (max-width: 899px) {
  .swapline { white-space: normal !important; }
}

/* ---------- How engagements work: an accordion below the breakpoint ---------- */
.engcaret { display: none; }
@media (max-width: 820px) {
  .engwrap { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .engtab { position: relative; padding-right: 44px !important; }
  .engcaret { display: block; position: absolute; right: 18px; top: 50%;
    width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform 0.25s ease; opacity: 0.75; }
  .engtab[aria-expanded="true"] .engcaret { transform: rotate(-135deg); margin-top: -3px; }
  .engpane { margin-top: 0 !important; margin-bottom: 8px; }
}

/* the staffing diagram: phase columns on a desktop, a plain stack on a phone */
@media (max-width: 1024px) {
  .engraph { grid-template-columns: 150px repeat(4, minmax(0, 1fr)) !important;
    padding: 22px !important; column-gap: 8px !important; }
  .engraph > div[style*="grid-column"] { padding: 9px 12px !important; font-size: 13px !important; }
}
@media (max-width: 820px) {
  .engraph { display: flex !important; flex-direction: column !important; gap: 0 !important;
    padding: 20px !important; }
  .engraph > div:nth-child(-n+5) { display: none !important; }   /* the phase header */
  .engraph > div[style*="grid-column"] { grid-column: auto !important; width: 100% !important;
    box-sizing: border-box; margin: 2px 0 14px !important; }
  .engraph > div:not([style*="grid-column"]) { padding-right: 0 !important; }
}

/* ---------- roomier two-up editorial blocks ---------- */
@media (max-width: 820px) {
  [style*="padding: 48px"], [style*="padding: 40px"], [style*="padding: 36px"],
  [style*="padding: 34px"] { padding: 20px !important; }
  [style*="padding: 30px"], [style*="padding: 32px"], [style*="padding: 28px 32px"] { padding: 22px !important; }
}

/* ---------- 'Where we come in': nested padding squeezes the copy ---------- */
@media (max-width: 820px) {
  .stageband { padding: 22px 16px !important; gap: 14px !important; }
  .stagecard { padding: 18px 16px !important; }
}

/* ---------- who we help: four levels of nesting leave no room for the copy ---------- */
@media (max-width: 820px) {
  .whoshell { padding: 16px 14px !important; border-radius: 22px !important; }
  .whoside { padding: 18px 16px !important; }
  .whorow { padding: 14px 14px !important; }
  .whorow > span:last-child { padding-left: 0 !important; }
}

/* ---------- All holdings: the same table-row-to-card treatment ---------- */
@media (max-width: 820px) {
  .holdlist { border-top: 0 !important; }
  .holdrow { display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 10px !important;
    padding: 20px !important; margin-bottom: 12px;
    border: 1px solid #E5E7EB !important; border-bottom: 1px solid #E5E7EB !important;
    border-radius: 18px; background: #fff; position: relative; }
  .holdrow img { max-height: 32px !important; max-width: 150px !important; }
  .holdrow .holdnum { position: absolute; top: 18px; right: 20px;
    font-size: 13px !important; color: #9CA3AF !important; }
  .holdrow .holdcta { justify-self: start !important; color: #000 !important;
    border-bottom: 2px solid #C2FF00; padding-bottom: 2px; }
  .holdrow > span:empty { display: none !important; }
  /* the closing row lines up with the cards instead of hanging off the edge */
  .holdmore { border-bottom: 0 !important; padding: 4px 20px 0 !important; }
}

/* ---------- engagement tabs read as a real tabbed control ---------- */
.engtab { position: relative; }
.engtab:hover { background: #111827 !important; border-color: #4B5563 !important; color: #fff !important; }
.engtab[aria-expanded="true"]:hover { background: #C2FF00 !important; border-color: #C2FF00 !important; color: #000 !important; }
.engtab:focus-visible { outline: 2px solid #C2FF00; outline-offset: 2px; }
/* the selected tab sits on the panel below it */
@media (min-width: 821px) {
  .engwrap { row-gap: 0 !important; }
  .engpane { margin-top: 0 !important; padding-top: 28px; border-top: 3px solid #C2FF00; }
}

/* ============================================================
   Phone ordering and horizontal rails. These come last on purpose:
   several of them override the blanket grid rules higher up, and at
   equal specificity the later rule wins.
   ============================================================ */

/* ---------- a hero's calls to action belong under the context, not above it ---------- */
@media (max-width: 820px) {
  /* the left column dissolves so its children and the panel beside it become
     siblings in one column, which is the only way to interleave the two */
  .herocol { display: contents !important; }
  .herocol > *:nth-child(1) { order: 1; }
  .herocol > *:nth-child(2) { order: 2; }
  .herocol > *:nth-child(3) { order: 3; }
  .orbwrap, .herocol ~ div:not(.heroctas) { order: 4; }
  .heroctas { order: 5 !important; }
  .herostory { min-height: 0 !important; }
}

/* ---------- Who we help: each panel opens directly under the card you tapped ---------- */
@media (max-width: 820px) {
  .whowrap { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .whotabs, .whoshell { display: contents !important; }
  /* businesses leads on a phone; founders and investors follow */
  .whotab:nth-child(2) { order: 0; }
  .whopane:nth-child(2) { order: 1; }
  .whotab:nth-child(1) { order: 2; }
  .whopane:nth-child(1) { order: 3; }
  .whotab:nth-child(3) { order: 4; }
  .whopane:nth-child(3) { order: 5; }
  /* an open card is replaced by its panel rather than sitting on top of it */
  .whotab[aria-expanded="true"] { display: none !important; }
  /* the shell's black card moves onto each panel, since the shell is gone */
  .whopane { background: #000 !important; border-radius: 20px !important;
    padding: 28px 22px !important; margin-bottom: 6px; gap: 24px !important; }
  /* and inside a panel, the buttons go last */
  .whomain { display: contents !important; }
  .whomain > * { order: 1; }
  .whoside { order: 2 !important; }
  .whocta { order: 3 !important; padding-top: 4px !important; }
}

/* ---------- long card rows scroll sideways instead of stacking forever ---------- */
@media (max-width: 820px) {
  .leadgrid, .hlgrid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 14px !important;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .leadgrid > *, .hlgrid > * {
    flex: 0 0 74%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .hlgrid > * { flex-basis: 82%; }
  .leadgrid::-webkit-scrollbar, .hlgrid::-webkit-scrollbar { height: 4px; }
  .leadgrid::-webkit-scrollbar-thumb, .hlgrid::-webkit-scrollbar-thumb {
    background: rgba(194,255,0,.5); border-radius: 999px; }
}

/* ---------- a section heading with one action beside it ---------- */
@media (max-width: 820px) {
  /* the row stacks, heading first. The link belongs with the heading it labels,
     so it stays above the cards rather than stranded at the bottom. */
  .headrow { flex-direction: column !important; align-items: flex-start !important;
    gap: 14px !important; }
  /* two-up editorial blocks where the buttons sat above the panel beside them */
  .splitcol { display: contents !important; }
  .splitcta { order: 90 !important; }
}


/* ---------- a card whose title belongs beside its icon on a phone ---------- */
@media (max-width: 820px) {
  .icard {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 6px 14px !important;
    align-items: center;
  }
  .icard > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .icard > *:nth-child(2) { grid-column: 2; grid-row: 1; padding-top: 0 !important; }
  .icard > *:nth-child(n+3) { grid-column: 1 / -1; }
}

/* ---------- the featured case study: the link follows the numbers ---------- */
@media (max-width: 820px) {
  .featcol { display: contents !important; }
  .featlink { order: 90 !important; }
}

/* ---------- a hero animation is a texture on a phone, not the subject ---------- */
@media (max-width: 820px) {
  canvas.herofx, canvas.heroanim {
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 52%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 52%, #000 100%);
  }
}

/* ---------- hero spacing on a phone ---------- */
@media (max-width: 820px) {
  /* the hero column dissolves above, so the section's own gap is what separates
     the headline from the line under it. 40px is a desktop number. */
  @supports selector(:has(*)) {
    section:has(> .herocol) { gap: 22px !important; }
  }
  .herostory { gap: 8px !important; min-height: 0 !important; }
}

/* ============================================================
   Phone: rails, link affordances and the milestone timeline
   ============================================================ */

/* ---------- a row of cards that scrolls sideways instead of stacking ---------- */
@media (max-width: 820px) {
  .hrail, .engrail {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 14px !important;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .hrail > *, .engrail > * {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .hrail::-webkit-scrollbar, .engrail::-webkit-scrollbar { height: 4px; }
  .hrail::-webkit-scrollbar-thumb, .engrail::-webkit-scrollbar-thumb {
    background: rgba(194,255,0,.5); border-radius: 999px; }
  /* the engagement rows were full-width list items, so they become cards */
  .engrail > a {
    box-sizing: border-box;
    border-top: 1px solid #E5E7EB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px;
    background: #fff;
    padding: 24px 22px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .engrail > a > *:first-child { display: none !important; }   /* the big numeral */
}

/* ---------- a logo tile is a link, so it says so on a phone ---------- */
@media (max-width: 820px) {
  .logocell {
    border-left: 0 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px;
    padding: 22px !important;
    margin-bottom: 12px;
  }
  .logocell .cellarrow { display: inline-flex !important; padding-top: 4px; }
}

/* ---------- milestones: the dot belongs beside the year, not under it ---------- */
@media (max-width: 820px) {
  .tline {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 4px 12px !important;
    align-items: center !important;
    padding: 20px 0 !important;
  }
  .tline > *:nth-child(1) { grid-column: 2; grid-row: 1; font-size: 19px !important; }
  .tline > *:nth-child(2) { grid-column: 1; grid-row: 1; padding-top: 0 !important; }
  .tline > *:nth-child(2) > span { width: 12px !important; height: 12px !important; border-width: 2px !important; }
  .tline > *:nth-child(3) { grid-column: 1 / -1; grid-row: 2; padding-top: 4px; }
}