/*
 * Design overrides (README "Design overrides").
 *
 * Loaded after every page's own stylesheets. Rules are prefixed with `html body`
 * and marked !important where they must beat the export's inline styles or the
 * style tags hive-nav.js injects later in <head>. Selectors use what survives a
 * re-port: data-m / data-screen-label attributes, ids, and inline-style matches.
 */

/* ---- One page gutter ------------------------------------------------------
 * Every section's content starts at the export's own gutter token,
 * clamp(20px, 6vw, 96px): 86px at 1440, 61px at 1024, 46px at 768, and 20px on
 * phones (the nav's edge). Sections that used 32px, 4vw or 7vw get it too. */
/* From ~1560px wide the gutter grows to centre a 1320px column (see "Wide
 * screens" below). */
html { --hv-g: max(clamp(20px, 6vw, 96px), calc((100% - 1320px) / 2)); }
@media (max-width: 599px) { html { --hv-g: 20px; } }
html body section[style*="clamp(20px, 6vw, 96px)"],
html body section[style*=") 32px"],
html body section[style*="clamp(20px, 4vw, 48px)"],
html body section[style*="clamp(24px, 7vw, 128px)"],
html body section > div[style*="clamp(20px, 6vw, 96px)"],
html body section > div[style*="clamp(24px, 7vw, 128px)"] {
  padding-left: var(--hv-g) !important;
  padding-right: var(--hv-g) !important;
}

/* ---- "Team from" logo wall: two full rows at every width -------------------
 * Owner 2026-10-20: "two rows at max". The export's auto-fit grid wrapped the 12
 * logos as 5+5+2 on laptops (and 2 per row, 6 rows, on phones). Desktop shows
 * all 12 as 6 x 2; narrower screens show the best-known 8 (4 x 2) or 6 (3 x 2),
 * picked by alt text so a re-ordered export keeps working. */
html body [data-m="logos"] {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  column-gap: clamp(16px, 3vw, 56px) !important;
  row-gap: clamp(24px, 3vw, 44px) !important;
}
html body [data-m="logos"] > * { min-width: 0; }
html body [data-m="logos"] img { max-width: min(150px, 100%) !important; }
@media (max-width: 899px) {
  html body [data-m="logos"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body [data-m="logos"] > :is(:has(img[alt="Microsoft"]), :has(img[alt="Accenture"]),
    :has(img[alt*="Oxford"]), :has(img[alt*="Imperial"]), :has(img[alt*="Harvard"]),
    :has(img[alt="Intercom"])) { order: 1; }
  html body [data-m="logos"] > :is(:has(img[alt*="echstars"]), :has(img[alt="Antler"])) { order: 2; }
  html body [data-m="logos"] > :not(:is(
    :has(img[alt="Microsoft"]), :has(img[alt="Accenture"]), :has(img[alt*="Oxford"]),
    :has(img[alt*="Imperial"]), :has(img[alt*="Harvard"]), :has(img[alt="Intercom"]),
    :has(img[alt*="echstars"]), :has(img[alt="Antler"]))) { display: none !important; }
}
@media (max-width: 599px) {
  html body [data-m="logos"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px 16px !important; }
  html body [data-m="logos"] > :is(:has(img[alt*="echstars"]), :has(img[alt="Antler"])) { display: none !important; }
}

/* ---- Home "Built to run on its own." ----------------------------------------
 * Owner 2026-10-20: the line was misaligned and, on laptops, the text column
 * ran past the viewport. The export's auto-fit grid (440px minimum columns plus
 * an 8vw gap) is replaced by two explicit shrinkable columns from 1000px up and
 * one column below. hive-nav.js caps every img at max-width:100%, which shrank
 * the mock-up (sized at 165% so the card crops it) to the card's width: its
 * bottom and the app's own scrollbar edge showed inside the frame. */
html body section[aria-labelledby="s4-h"] > div {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 48px !important;
}
@media (min-width: 1000px) {
  html body section[aria-labelledby="s4-h"] > div {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
    gap: clamp(48px, 6vw, 112px) !important;
  }
}
html body section[aria-labelledby="s4-h"] > div > div:first-child img { max-width: none !important; }
/* WebKit sized the aspect-ratio card to 0x0 in the one-column grid. */
html body section[aria-labelledby="s4-h"] > div > div:first-child { width: 100%; }

/* ---- Careers values cards ---------------------------------------------------
 * Owner 2026-10-20: "this looks very ugly". The six cards wrapped 4 + 2, each
 * title was pushed to the bottom of a tall empty card (so a two-line body put
 * it lower than its siblings), and a half-width tint faded out mid-card. Now:
 * 3 x 2 on desktop, 2 x 3 on tablets, the design's accordion on phones; equal
 * heights; icon, title and body top-aligned; one soft full-card tint. */
html body div:has(> [data-acc-kind="life"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
}
@media (max-width: 999px) {
  html body div:has(> [data-acc-kind="life"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  html body div:has(> [data-acc-kind="life"]) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
}
html body [data-acc-kind="life"] {
  border-radius: 10px;
  border: 1px solid rgba(63, 111, 163, 0.14);
  background: linear-gradient(150deg, rgba(111, 166, 220, 0.16) 0%, rgba(111, 166, 220, 0.06) 55%, rgba(111, 166, 220, 0.02) 100%);
}
html body [data-acc-kind="life"] > span[aria-hidden="true"] { display: none !important; }
@media (min-width: 761px) {
  html body [data-acc-kind="life"] {
    min-height: 0 !important;
    padding: clamp(26px, 2.4vw, 34px) !important;
  }
  html body [data-acc-kind="life"] > h3 { margin: clamp(36px, 3.4vw, 52px) 0 12px !important; }
  html body [data-acc-kind="life"] > p { max-width: none !important; }
}

/* ---- Property hero photo, mirrored ----------------------------------------
 * Owner 2026-10-20: "flip this image", so the building sits on the right and
 * the area behind the "Property" headline is calm. Only the photo layer flips. */
html body section[data-screen-label="Hero"] div[aria-hidden="true"][style*="ind-property.jpg"] { transform: scaleX(-1); }

/* ---- Product mock-ups on phones: a readable, zoomed crop ---------------------
 * Owner 2026-10-20: "cant read this image". Below 600px the export shrank each
 * full desktop screenshot (1710 css px wide) into a ~310px card, so its text was
 * ~3px. Each mock-up now shows the app at 1200px wide (body text ~9.5px) and
 * crops to its most meaningful region (the chat answer, the workflow list, ...)
 * inside the same rounded card. Offsets are in px of that 1200px-wide app. */
@media (max-width: 599px) {
  /* Hero shots (Platform, Agent Studio): taller frame, zoomed background. */
  html body section div[data-m="shot-frame"],
  html body section div[data-m="shot-frame"][style] { aspect-ratio: 1 / 0.92 !important; }
  html body section div[data-m="shot-frame"] > [data-m="shot"] {
    height: 100% !important;
    aspect-ratio: auto !important;
    background-size: 1200px auto !important;
    background-position: var(--hv-mx, 0) var(--hv-my, 0) !important;
  }
  html body [data-m="shot"][style*="p-01.png"] { --hv-mx: -520px; --hv-my: -170px; }
  html body [data-m="shot"][style*="p-04.png"] { --hv-mx: -180px; --hv-my: -20px; }

  /* Workflows hero: the HTML mock-up, 1232px wide, at 90% (12px text -> 10.8px). */
  html body section div[data-m="wf-frame"][style] { aspect-ratio: 1 / 0.92 !important; }
  html body section div[data-m="wf-frame"] [data-norwd] { transform: translate(-159px, 0) scale(0.9) !important; }

  /* Private Equity hero: the HTML mock-up at 80%. */
  html body section[data-screen-label="Hero"] div:has(> div[data-norwd][style*="zoom"]) { height: 340px; }
  html body section[data-screen-label="Hero"] div[data-norwd][style*="zoom"] { zoom: 0.72 !important; margin-left: -272px; }

  /* Platform "Hive combines context, agents and workflows" (the owner's shot). */
  html body img[src$="/product/p-10.png"][data-rwd-w] {
    --hv-mx: 420px; --hv-my: 50px;
  }
  /* Screenshots placed straight on the gradient card: zoom, shift and clip so
   * the crop sits 16px inside the card like the design's inset frame. */
  html body img[src*="/product/"][data-rwd-w] {
    width: 1200px !important;
    max-width: none !important;
    left: calc(16px - var(--hv-mx, 0px)) !important;
    top: calc(16px - var(--hv-my, 0px)) !important;
    clip-path: inset(var(--hv-my, 0px) 0 0 var(--hv-mx, 0px) round 10px 0 0 0);
    border-radius: 0 !important;
  }

  /* Deployment: workflow list strip. */
  html body div[style*="p-05.png"][style*="130%"] {
    background-size: 1200px auto !important;
    background-position: -170px -30px !important;
  }
  html body div:has(> div[style*="p-05.png"][style*="130%"]) { height: 300px !important; }

  /* About: workflows screenshot. */
  html body img[src$="/product/p-05.png"][data-rwd-w] { --hv-mx: 175px; --hv-my: 0px; }

  /* Screenshots inside the phone accordions (Home, Platform capabilities). */
  html body :is(div, span)[style*="/design/product/"]:is([style*="190%"], [style*="170%"]) {
    background-size: 1200px auto !important;
    background-position: -175px -10px !important;
  }
  html body :is(div, span)[style*="/design/product/p-01.png"]:is([style*="190%"], [style*="170%"]) { background-position: -520px -170px !important; }
  html body :is(div, span)[style*="/design/product/p-10-tight.png"]:is([style*="190%"], [style*="170%"]) {
    background-size: 1000px auto !important;
    background-position: -230px -50px !important;
  }

  /* Home "Built to run": four crossfading screenshots. */
  html body section[aria-labelledby="s4-h"] > div > div:first-child { aspect-ratio: 1 / 0.92 !important; }
  html body section[aria-labelledby="s4-h"] > div > div:first-child > div { left: 16px !important; top: 16px !important; }
  html body section[aria-labelledby="s4-h"] > div > div:first-child img { width: 1200px !important; left: -170px !important; top: -10px !important; }
  html body section[aria-labelledby="s4-h"] > div > div:first-child img[src$="p-10.png"] { left: -400px !important; }
}

/* ===========================================================================
 * Site-wide sweep (2026-10-20): the same kinds of flaw as the owner's items,
 * found by screenshotting every page at 1366/1920 (scrollbar), 768 and 390.
 * ======================================================================== */

/* ---- Headings: no one-word last lines ---------------------------------------
 * Many h1/h2s left a lone word ("scale.", "time.", "company.") on phones.
 * "balance" (the export's choice on many) does not prevent it when a <br>
 * precedes a short first line; "pretty" avoids a one-word last line. */
html body :is(h1, h2, h3) { text-wrap: pretty !important; }

/* ---- Card grids: complete rows ----------------------------------------------
 * The export's auto-fit/auto-fill grids wrap by width, not by count, so 3 cards
 * went 2 + 1 on tablets, 9 went 4 + 4 + 1 and 6 went 5 + 1 on wide screens, and
 * a 3-card grid made 4 tracks at 1920 (an empty column). Grids with a known
 * card count get a column count that divides it. Phones keep one column. The
 * footer's link grid has its own rule below. */
@media (min-width: 600px) and (max-width: 999px) {
  /* Three rich cards at ~215px each were too cramped (wrapped buttons,
   * clipped mock-ups), so tablets stack them. */
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):not(:has(> select.hv-msel)):has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(4):last-child),
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1000px) {
  html body [style*="repeat(auto-fill"]:not(:has(> select.hv-msel)):has(> :nth-child(3):last-child),
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(6):last-child),
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1000px) {
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Rows of three stats: one row on tablets, a stack on phones, never 2 + 1 */
@media (min-width: 600px) and (max-width: 999px) {
  html body div[style*="flex-wrap: wrap; gap: clamp(24px, 7vw, 96px)"]:has(> :nth-child(3):last-child) {
    flex-wrap: nowrap !important;
    gap: clamp(14px, 4vw, 40px) !important;
  }
  html body div[style*="flex-wrap: wrap; gap: clamp(24px, 7vw, 96px)"]:has(> :nth-child(3):last-child) > * {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 599px) {
  html body div[style*="flex-wrap: wrap; gap: clamp(24px, 7vw, 96px)"]:has(> :nth-child(3):last-child) {
    flex-direction: column !important;
    gap: 22px !important;
  }
}

/* ---- Mobile filter <select>s span the content width -------------------------
 * They were capped at 560px and centred, so at 768 they sat ~58px in from the
 * heading and list edges. */
html body select.hv-msel { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---- Footer on tablets: five link columns in one row (was 3 + 2) ------------ */
@media (min-width: 601px) and (max-width: 1199px) {
  html body [data-m="foot"] > div:first-child { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 40px 20px !important; }
  html body [data-m="foot"] > div:first-child > div:first-child { max-width: none !important; }
}

/* ---- Wide screens: one content column ---------------------------------------
 * From ~1560px some sections capped their content at 1320px (starting at
 * x~300 at 1920) while their neighbours ran to the 96px gutter, so left edges
 * jumped from section to section. Every section, the photo bands' overlay text
 * and the footer now share the centred 1320px column (--hv-g, at the top). */
html body section > footer[style*="clamp(20px, 6vw, 96px)"] {
  padding-left: var(--hv-g) !important;
  padding-right: var(--hv-g) !important;
}
html body section :is(div, span)[style*="position: absolute"]:is([style*="left: clamp(20px, 6vw, 96px)"], [style*="left: clamp(24px, 6vw, 96px)"]) {
  left: var(--hv-g) !important;
}
html body section div[style*="position: absolute"]:is([style*="right: clamp(20px, 6vw, 96px)"], [style*="right: clamp(24px, 6vw, 96px)"]) {
  right: var(--hv-g) !important;
}

/* ---- Sticky side rails stick ------------------------------------------------
 * The page wrapper's overflow-x:hidden made it a scroll container, so the
 * Pricing calculator rail (position:sticky) scrolled away. clip keeps the
 * horizontal clipping without that side effect. */
html body div[style*="width: 100%; overflow-x: hidden"] { overflow-x: clip !important; }
/* Below 1000px the rails sit above the content, not beside it; sticking there
 * drew them over the text, so they scroll normally (as they always did). */
@media (max-width: 999px) {
  html body [style*="position: sticky"] { position: static !important; }
}

/* ---- Careers open roles on tablets: one row per role ------------------------ */
@media (min-width: 600px) and (max-width: 999px) {
  html body a[style*="grid-template-columns: 48px minmax(0px, 1fr) auto auto"] {
    grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
    gap: 20px !important;
  }
  html body a[style*="grid-template-columns: 48px minmax(0px, 1fr) auto auto"] > * { grid-column: auto !important; grid-row: auto !important; }
}

/* ---- Private Equity hold period on tablets ----------------------------------
 * The five-step staircase fell into a ragged 2-column grid with "Exit" alone;
 * tablets get the stacked phone version instead. */
@media (min-width: 600px) and (max-width: 999px) {
  html body [data-m="holdmob"] { display: block !important; }
  html body [data-m="holddesk"] { display: none !important; }
}

/* ---- 404 "Pick up from here" on phones: title above its description --------- */
@media (max-width: 599px) {
  html body section[data-screen-label="Popular pages"] a[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  html body section[data-screen-label="Popular pages"] a[style*="grid-template-columns"] > * { text-align: left !important; }
}

/* ---- Deployment bento on tablets and phones ---------------------------------
 * Stacked full width, the 0.88:1 cards became ~770px-tall empty panels. */
@media (max-width: 999px) {
  html body [style*="aspect-ratio: 0.88 / 1"] { aspect-ratio: 16 / 10 !important; }
}

/* ---- Contact options: titles top-aligned, links on one bottom line ---------- */
@media (min-width: 761px) {
  html body [data-acc-kind="way"] > p[style*="margin: auto 0px 8px"] { margin-top: clamp(28px, 3vw, 44px) !important; }
  html body [data-acc-kind="way"] > span:last-child { margin-top: auto !important; padding-top: 20px; }
}

/* ---- Touch tablets: hover-only CTA cards show their content ----------------- */
@media (hover: none) and (min-width: 600px) {
  html body [data-m="ctacards"] > a * { opacity: 1 !important; }
}

/* ---- The window scrolls, not <body> -----------------------------------------
 * hive-responsive.css sets overflow-x:hidden on html and body; when it loaded
 * after the nav's body{overflow-x:clip} (load order varies in WebKit), <body>
 * became the scroll container on iPhones, which breaks window scrolling,
 * anchor jumps and the collapsing address bar. clip never makes a scroller. */
html, html body { overflow-x: clip !important; }