/* Site layer on top of the design export's CSS (src/generated/design.css).
   Desktop (>= 1200px) renders exactly as the 1440 artboards. Everything below
   the design width is ours: the design was desktop only. */

:root { --gutter: 56px; }
@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 640px) { :root { --gutter: 20px; } }

html, body { overflow-x: clip; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #FFFFFF; color: #000000; padding: 12px 16px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .1em; }
.skip-link:focus { left: 8px; }

/* ---- nav --------------------------------------------------------------- */
.menu-open { display: none; }
@media (max-width: 1080px) {
  .nav-links { display: none !important; }
  .menu-open { display: block; background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; }
  nav[aria-label="Main"] { height: 88px !important; }
  header#top > nav[aria-label="Main"] { height: 88px !important; }
  [data-menu] { display: none !important; }
}
@media (max-width: 1080px) { nav[aria-label="Main"] .logo > img { height: 56px !important; } }

.m-sheet {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: #000000; color: #FFFFFF;
  padding: 0 var(--gutter) 40px; display: flex; flex-direction: column; gap: 28px; font-family: var(--font-body);
}
.m-sheet__bar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.3); }
.m-sheet__bar a { text-decoration: none; }
.menu-close { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; }
.m-sheet__group ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.m-sheet__group a {
  display: block; padding: 12px 0; text-decoration: none; border-top: 1px solid rgba(255,255,255,.2);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.1;
}
.m-sheet__cta { align-self: flex-start; }
body.sheet-open { overflow: hidden; }

/* Display headlines sized by class (not inline) scale like the inline ones. */
.h2 { font-size: clamp(38px, 6.111vw, 88px); }

/* ---- stacking below the design width ------------------------------------ */
@media (max-width: 1000px) {
  /* 12-column and n-column grids collapse to one column; span rules reset. */
  main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px !important; }
  main [style*="grid-column"] { grid-column: auto !important; }
  main [style*="padding-right: 48px"], main [style*="padding-right: 32px"], main [style*="padding-right: 64px"] { padding-right: 0 !important; }
  /* Rows of side-by-side blocks wrap instead of squeezing. */
  main [style*="justify-content: space-between"] { flex-wrap: wrap; }
  main [style*="white-space: nowrap"] { white-space: normal !important; }
  main section, main header { min-height: 0 !important; }
  /* Split panels (two 50% halves in a flex row) stack. */
  main section[style*="display: flex;"]:not([style*="flex-direction: column"]) { flex-direction: column; }
  main [style*="width: 50%"] { width: 100% !important; }
  /* Only the homepage header holds a hero (its h1); nav-only headers stay nav height. */
  main header#top:has(h1) { min-height: 100svh !important; }
  main [style*="text-align: right"] { text-align: left !important; }
  main [style*="align-items: flex-end"][style*="flex-direction: column"] { align-items: flex-start !important; }
  /* Fixed-height media placeholders shrink to a ratio. */
  main div[style*="height: 480px"], main div[style*="height: 520px"], main div[style*="height: 600px"], main div[style*="height: 640px"], main div[style*="height: 560px"] { height: auto !important; aspect-ratio: 4 / 3; }
  /* Uncropped images only (logos, marks): cropped cover images keep their own framing. */
  main img:not([style*="object-fit: cover"]) { max-width: 100%; min-width: 0; flex-shrink: 1; object-fit: contain; object-position: left center; }
  .row-btn { font-size: 16px; }
  main table { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  /* Logo rows wrap into a 2-up grid. */
  main [style*="justify-content: space-between"][style*="gap: 40px"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 28px 24px !important; justify-items: start; }
  main div[style*="display: flex; gap: 12px"] { flex-wrap: wrap; }
  main [style*="display: flex; align-items: center; gap: 48px"] { flex-direction: column; align-items: flex-start !important; gap: 24px !important; }
  main [style*="width: 160px"] { width: auto !important; }
  /* Footer: link columns two-up under the full-width call block. */
  main > section:last-child > div[style*="grid-template-columns: 2fr"] { grid-template-columns: 1fr 1fr !important; gap: 36px 24px !important; }
  main > section:last-child > div[style*="grid-template-columns: 2fr"] > :first-child { grid-column: 1 / -1 !important; }
  .footer-legal { flex-wrap: wrap; row-gap: 8px !important; }
  .body { font-size: 16px; line-height: 26px; }
  .lead { font-size: 19px; line-height: 29px; }
}


/* ---- /work filter (src/lib/work-grid.ts + site.js) ------------------------ */
.wf-bar { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wf-dd { position: relative; }
.wf-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: #FFFFFF; color: #000000; border: 1px solid #000000; border-radius: 0; cursor: pointer;
}
.wf-btn:hover { background: #EFEFEF; }
.wf-btn.is-set { background: #000000; color: #FFFFFF; }
.wf-btn:focus-visible, .wf-menu button:focus-visible, .wf-pill:focus-visible { outline: 2px solid #4A7A2E; outline-offset: 2px; }
.wf-dot { width: 6px; height: 6px; background: currentColor; flex-shrink: 0; }
.wf-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.wf-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; max-height: 360px; overflow-y: auto;
  background: #FFFFFF; border: 1px solid #000000; padding: 6px; display: flex; flex-direction: column;
}
.wf-dd[data-wf-dd="industry"] .wf-menu { left: auto; right: 0; }
.wf-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; text-align: left;
  font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 0; border-radius: 0; color: #5E5E5E; cursor: pointer;
}
.wf-menu button:hover, .wf-menu button:focus-visible { background: #000000; color: #FFFFFF; }
.wf-menu button[aria-checked="true"] { color: #000000; }
.wf-menu button[aria-checked="true"]:hover { color: #FFFFFF; }
.wf-check { visibility: hidden; flex-shrink: 0; }
.wf-menu button[aria-checked="true"] .wf-check { visibility: visible; }
.wf-view { display: flex; gap: 6px; margin-left: 8px; }
.wf-view-btn[aria-pressed="true"] { background: #000000; color: #FFFFFF; border-color: #000000; }
.wf-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wf-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #EFEFEF; color: #000000;
}
.wf-pill:hover { background: #000000; color: #FFFFFF; }
.wf-clear-all { background: none; border: 0; padding: 7px 4px; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: #5E5E5E; text-decoration: underline; text-underline-offset: 4px; }
.wf-clear-all:hover { color: #000000; }
.wf-empty { padding: 80px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; border-top: 1px solid #000000; }

/* List view: same tiles, laid out as rows. */
.wf-grid.is-list { display: flex !important; flex-direction: column; row-gap: 0 !important; border-top: 1px solid #000000; }
.wf-grid.is-list .wf-tile:not([hidden]) {
  display: grid !important; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px !important; row-gap: 4px !important;
  align-items: center; padding: 20px 0; border-bottom: 1px solid #000000;
}
.wf-grid.is-list .wf-media { grid-row: 1 / span 2; width: 64px; height: 64px !important; margin: 0 !important; }
.wf-grid.is-list .wf-title { font-size: clamp(24px, 3.056vw, 44px) !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.005em !important; align-self: end; }
.wf-grid.is-list .wf-tags { align-self: start; }
.wf-grid.is-list .wf-tile:hover .wf-title { color: #4A7A2E; }

.wf-tile .wf-media img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.wf-grid:not(.is-list) .wf-tile:hover .wf-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .wf-tile .wf-media img { transition: none; } }

@media (max-width: 1000px) {
  .wf-bar, .wf-row, .wf-active { align-items: flex-start; justify-content: flex-start; }
  .wf-dd[data-wf-dd="industry"] .wf-menu { left: 0; right: auto; }
  .wf-grid:not(.is-list) .wf-media { height: auto !important; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .wf-row { width: 100%; }
  .wf-dd { flex: 1 1 auto; }
  .wf-btn { width: 100%; justify-content: space-between; }
  .wf-menu, .wf-dd[data-wf-dd="industry"] .wf-menu { left: 0; right: 0; min-width: 0; }
  .wf-view { margin-left: 0; }
  .wf-grid.is-list .wf-tile:not([hidden]) { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px !important; }
  .wf-grid.is-list .wf-media { width: 48px; height: 48px !important; }
}

/* Case studies: gallery and cover shrink to ratios below the design width. */
@media (max-width: 1000px) {
  #gallery .cs-pair { grid-template-columns: minmax(0, 1fr) !important; }
  #cover { min-height: 0 !important; padding-top: 32px !important; }
  #next div[style*="height: 300px"] { height: auto !important; aspect-ratio: 16 / 10; }
}

/* Industries, regulated teams: four features go two-up on laptop widths so each title stays on one line. */
@media (min-width: 1001px) and (max-width: 1300px) {
  #govern div[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 40px !important; }
}

/* Tables of contents stay in view while reading (legal pages' "On this page",
   the glossary's "Jump to"). Desktop only: on phones they stack above the text. */
@media (min-width: 1001px) {
  nav[aria-label="On this page"] {
    position: sticky; top: 24px; align-self: start;
    max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
  }
  .toc-sticky { position: sticky; top: 0; z-index: 20; }
  .toc-sticky.is-stuck .toc-bar { padding: 14px 40px !important; gap: 12px !important; }
  .toc-sticky.is-stuck .toc-bar > .meta { display: none; }
  .toc-sticky.is-stuck .toc-bar a { padding: 8px 14px !important; }
}
nav[aria-label="On this page"] a[aria-current="true"] { color: #4A7A2E !important; font-weight: 700; }
main [id] { scroll-margin-top: 32px; }

/* Trusted-by logo row wraps between phone and desktop widths (it overflowed at 1024,
   and its last logo was clipped at 1180 and 1280). */
@media (min-width: 641px) and (max-width: 1320px) {
  main [style*="justify-content: space-between; gap: 40px"] { flex-wrap: wrap; justify-content: flex-start !important; gap: 28px 48px !important; }
}
/* Footer legal links: comfortable tap targets on touch screens. */
@media (max-width: 1000px) {
  .footer-legal a { display: inline-block; padding: 10px 0; }
}

/* Nav links +2px (John, 2026-09-24). */
.nav-link { font-size: 16px !important; line-height: 20px !important; }

/* Sticky nav: once the page scrolls past the header, the nav pins to the top as a
   slimmer black bar (site.js toggles .nav-fixed on <html>). The mega menus open
   under it. A spacer keeps the header's content from jumping. */
.nav-spacer { display: none; }
html.nav-fixed .nav-spacer { display: block; }
html.nav-fixed nav[aria-label="Main"] {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 50;
  height: 80px !important; padding: 0 var(--gutter) !important; box-sizing: border-box;
  background: #000000; color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,0.15);
  animation: nav-in .25s cubic-bezier(.2,.7,.2,1);
}
html.nav-fixed nav[aria-label="Main"] .logo > svg:first-child { height: 48px !important; }
html.nav-fixed nav[aria-label="Main"] .logo .logo-type svg { height: 32px !important; }
html.nav-fixed [data-menu] { position: fixed !important; top: 80px !important; z-index: 49; }
@keyframes nav-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.nav-fixed nav[aria-label="Main"] { animation: none; } }
@media (max-width: 1080px) { html.nav-fixed nav[aria-label="Main"] { height: 72px !important; } }
/* Anchors and sticky tables of contents clear the fixed nav. */
main [id] { scroll-margin-top: 104px; }
@media (min-width: 1001px) {
  nav[aria-label="On this page"] { top: 104px !important; max-height: calc(100vh - 128px) !important; }
  .toc-sticky { top: 80px !important; }
}

/* About: team grid, 5 across on desktop, 3 on tablet, 2 on phones. */
@media (max-width: 1000px) { main .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 32px !important; } }
@media (max-width: 640px) { main .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Page heroes keep the artboard's height on wide desktops only; on narrower
   screens they size to their content, so no blank band opens up. */
@media (max-width: 1200px) {
  main section#hero { min-height: 0 !important; }
}

/* Mobile/tablet nav (<= 1080px): the mark gets even breathing room in a 96px bar. */
@media (max-width: 1080px) {
  nav[aria-label="Main"], header#top > nav[aria-label="Main"] { height: 96px !important; }
  nav[aria-label="Main"] .logo > svg:first-child { height: 52px !important; width: auto !important; }
  html.nav-fixed nav[aria-label="Main"], html.nav-fixed header#top > nav[aria-label="Main"] { height: 72px !important; }
  html.nav-fixed nav[aria-label="Main"] .logo > svg:first-child { height: 40px !important; }
  .m-sheet__bar { height: 96px; }
}
/* Touch screens and narrow layouts show the mark only (John, 2026-09-25): no hover
   there, so the desktop wordmark reveal only flashed on tap. */
@media (hover: none), (max-width: 1080px) {
  .logo .logo-type, .logo:hover .logo-type, .logo:focus-visible .logo-type { display: none !important; }
}

/* Chips: comfortable tap targets on touch screens. */
@media (hover: none), (max-width: 1000px) {
  .chip { min-height: 40px; padding: 0 14px !important; display: inline-flex; align-items: center; }
}

/* The pinned (scrolled) bar shows the full logo, mark + wordmark, at every width
   (John, 2026-09-25: mobile first, then desktop). At the top of the page, phones
   and tablets show the mark only and desktop reveals the wordmark on hover. As the
   bar pins, the wordmark slides out of the mark once: the desktop hover motion. */
html.nav-fixed nav[aria-label="Main"] .logo { --logo-gap: 20px; }
html.nav-fixed nav[aria-label="Main"] .logo .logo-type {
  display: block !important; max-width: 190px; opacity: 1; margin-left: var(--logo-gap); transition: none !important;
  animation: logo-reveal .5s cubic-bezier(.2,.7,.2,1) .15s both;
}
html.nav-fixed nav[aria-label="Main"] .logo .logo-type svg { transform: none !important; transition: none !important; animation: logo-slide .5s cubic-bezier(.2,.7,.2,1) .15s both; }
@media (hover: none), (max-width: 1080px) {
  html.nav-fixed nav[aria-label="Main"] .logo { --logo-gap: 12px; }
  html.nav-fixed nav[aria-label="Main"] .logo .logo-type svg { height: 26px !important; width: auto !important; }
}
@keyframes logo-reveal { from { max-width: 0; opacity: 0; margin-left: 0; } to { max-width: 190px; opacity: 1; margin-left: var(--logo-gap); } }
@keyframes logo-slide { from { transform: translateX(-24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.nav-fixed nav[aria-label="Main"] .logo .logo-type, html.nav-fixed nav[aria-label="Main"] .logo .logo-type svg { animation: none !important; }
}

/* Bulleted lists (square green markers): the marker sits on the first line of its
   text at every width (it had wrapped onto its own line on phones). */
main li[style*="display: flex"] { flex-wrap: nowrap !important; align-items: flex-start !important; }
main li[style*="display: flex"] > span[aria-hidden="true"]:first-child { top: 0 !important; margin-top: 7px; }

/* Brand System prompt / assistant exchange: full width, stacked, on phones and tablets. */
@media (max-width: 1000px) {
  main [style*="width: 60%"] { width: 100% !important; margin-left: 0 !important; }
  main [style*="width: 60%"][style*="align-items: flex-end"] { align-items: stretch !important; }
}

/* Mobile menu motion (John, 2026-09-25): a brand-green circle bursts from the Menu
   button, the black sheet follows a beat behind, and the links rise in one after
   another. Closing plays the same thing in reverse into the button. site.js sets
   --mx/--my (the button's centre) and --mr (distance to the farthest corner). */
.m-wipe {
  position: fixed; inset: 0; z-index: 59; background: #4A7A2E; pointer-events: none;
  clip-path: circle(0px at var(--mx, 90%) var(--my, 44px));
  transition: clip-path .62s cubic-bezier(.76, 0, .24, 1) .1s;
}
.m-sheet {
  clip-path: circle(0px at var(--mx, 90%) var(--my, 44px));
  transition: clip-path .62s cubic-bezier(.76, 0, .24, 1) 0s;
}
html.m-open .m-wipe { clip-path: circle(var(--mr, 150vmax) at var(--mx, 90%) var(--my, 44px)); transition-delay: 0s; }
html.m-open .m-sheet { clip-path: circle(var(--mr, 150vmax) at var(--mx, 90%) var(--my, 44px)); transition-delay: .1s; }
.m-sheet > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .2s ease, transform .2s ease;
}
html.m-open .m-sheet > * {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(.32s + var(--i, 0) * .06s);
}
.m-sheet:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .m-wipe, .m-sheet, .m-sheet > * { transition: none !important; }
}

/* Testimonial header on phones: labels wrap as a row, arrows stay at the end. */
@media (max-width: 640px) {
  #testimonials > div:first-child { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 8px 20px !important; }
  #testimonials > div:first-child > div:last-child { margin-left: auto; }
}

/* Rotating slides: only the slide on show takes clicks (hidden ones are stacked
   on top of it and were catching them). */
[data-slide][aria-hidden="true"], [data-sys][aria-hidden="true"] { pointer-events: none; }

/* About team photos: square, like the photos themselves (John, 2026-09-25). */
main .team-photos { aspect-ratio: 1 / 1; }

/* Chrome extensions: on phones and tablets each promo shows whole, at its own
   shape once the cards stack (the fixed 380px frame cropped the wide banners
   into a portrait). Side by side on iPad landscape, both keep the desktop's
   3:2 frame so the titles line up. */
@media (max-width: 1000px) {
  main div[style*="height: 380px"]:has(> img[src*="-promo."]) { height: auto !important; }
  main img[src*="-promo."] { height: auto !important; object-fit: contain !important; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  main div[style*="height: 380px"]:has(> img[src*="-promo."]) { height: auto !important; aspect-ratio: 3 / 2; }
}

/* Homepage systems photo: once the split stacks, it sits under the text, not pinned. */
@media (max-width: 1000px) {
  main .systems-photo { padding: 0 !important; }
  main .systems-photo img { position: static !important; max-width: none !important; }
}

/* Glossary A to Z: two columns, in reading order, once four no longer fit. */
@media (max-width: 1000px) {
  main div[style*="grid-template-rows: repeat(12, auto)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-flow: row !important; }
}
/* Calendly asks for 320px; under 360px screens it runs edge to edge. */
@media (max-width: 360px) {
  main .calendly-inline-widget { min-width: 0 !important; margin-left: calc(-1 * var(--gutter)) !important; margin-right: calc(-1 * var(--gutter)) !important; width: auto !important; }
}

/* Meta labels and chips at 12px, the smallest text on the site (John, 2026-09-25;
   the design system set them at 11px). */
.meta { font-size: 12px; }
.meta:not(.nav-link)[style*="font-size: 10px"], .meta:not(.nav-link)[style*="font-size: 11px"] { font-size: 12px !important; }
.chip, .ff-chip { font-size: 12px !important; line-height: 16px !important; }