/* 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; }
/* The sheet scrolls when its links run past the screen; its rows keep their height
   instead of shrinking, so the logo never overlaps the bar's rule (John, 2026-10-06). */
.m-sheet > * { flex-shrink: 0; }
.m-sheet__home { display: flex; align-items: center; }
.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__group a { display: flex; align-items: center; gap: 14px; }
.m-sheet__icon { flex-shrink: 0; }
.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; }
/* Mega menus as dropdown panels (John, 2026-10-05; layout 2026-10-06 after his
   reference): sized to content, aligned to the right edge of the nav. An item grid on the
   left, a feature card on the right. */
[data-menu] { left: auto !important; right: var(--gutter) !important; padding: 28px !important; border-color: rgba(255,255,255,0.22) !important; box-shadow: 0 24px 48px rgba(0,0,0,0.22); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px 28px; align-items: start; }
.mega--systems { width: min(900px, calc(100vw - 2 * var(--gutter))); }
.mega--resources { width: min(960px, calc(100vw - 2 * var(--gutter))); }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega-grid--list { grid-template-columns: minmax(0, 1fr); }
.mega-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; color: #FFFFFF; text-decoration: none; transition: background-color .15s ease; }
.mega-item:hover, .mega-item:focus-visible, .mega-strip:hover, .mega-strip:focus-visible { background: rgba(255,255,255,0.07); }
.mega-item__icon { flex-shrink: 0; margin-top: -3px; }
.mega-item__body { display: flex; flex-direction: column; gap: 6px; }
.mega-item__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; white-space: nowrap; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }
.mega-item__text { font-size: 14px; line-height: 20px; color: rgba(255,255,255,0.7); }
.mega-feature { display: flex; flex-direction: column; gap: 8px; color: #FFFFFF; text-decoration: none; }
.mega-feature__img { display: block; aspect-ratio: 7 / 5; overflow: hidden; background: #EFEFEF; margin-bottom: 8px; }
.mega-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.mega--systems .mega-feature__img img { object-position: 50% 0%; }
.mega--resources .mega-feature__img img { object-position: 50% 12%; }
.mega-feature:hover .mega-feature__img img { transform: scale(1.03); }
.mega-strip { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px; border-top: 1px solid rgba(255,255,255,0.15); color: #FFFFFF; text-decoration: none; transition: background-color .15s ease; }
.mega-strip__arrow { color: #7DB356; font-size: 18px; }
:is(.mega-item, .mega-feature, .mega-strip)[aria-current="page"] .mega-item__title, .m-sheet__group a[aria-current="page"] span { color: #7DB356; }
:is(.mega-item, .mega-feature, .mega-strip):focus-visible { outline: 2px solid #7DB356; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .mega-feature__img img { transition: none; } }
/* Open and close (John, 2026-10-05; 2026-10-06 matched to the phone menu): a brand-green
   wipe drops from the nav, the black panel follows a beat behind, then the items rise in
   one after another. Closing lifts the panel back up into the nav. */
[data-menu] { background-image: linear-gradient(#000000 0 50%, #4A7A2E 50% 100%) !important; background-size: 100% 200% !important; background-repeat: no-repeat !important; background-clip: padding-box !important; background-color: #000000 !important; background-position: 0 0; }
[data-menu]:not([hidden]) { animation: mega-in .62s cubic-bezier(.76, 0, .24, 1) both; }
[data-menu]:not([hidden]) :is(.mega-item, .mega-feature, .mega-strip) { animation: mega-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--mi, 0) * .05s); }
.mega-grid > :nth-child(2) { --mi: 1; } .mega-grid > :nth-child(3) { --mi: 2; } .mega-grid > :nth-child(4) { --mi: 3; }
.mega-feature { --mi: 2; } .mega-strip { --mi: 4; }
[data-menu].is-closing { animation: mega-out .3s cubic-bezier(.76, 0, .24, 1) both; pointer-events: none; }
[data-menu].is-closing :is(.mega-item, .mega-feature, .mega-strip) { animation: none; }
@keyframes mega-in {
  0% { clip-path: inset(0 0 100% 0); background-position: 0 100%; }
  55% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); background-position: 0 0; }
}
@keyframes mega-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mega-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) {
  [data-menu]:not([hidden]), [data-menu].is-closing, [data-menu] :is(.mega-item, .mega-feature, .mega-strip) { animation: none !important; }
}
@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: the team, stacked (John, 2026-09-28). One person per row: square photo, name,
   title; the site's 1px ruled rows. On phones the title moves under the name. */
main .team-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #000000; }
main .team-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 20px 0; border-top: 1px solid #000000; }
main .team-list img { width: 80px; height: 80px; object-fit: cover; object-position: center top; display: block; }
main .team-list h3 { font-size: clamp(24px, 3.056vw, 44px); line-height: 1; }
main .team-list .body { color: #5E5E5E; text-align: right; }
@media (max-width: 640px) {
  main .team-list li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 16px 0; }
  main .team-list img { width: 56px; height: 56px; grid-row: span 2; }
  main .team-list h3 { align-self: end; }
  main .team-list .body { text-align: left; align-self: start; font-size: 15px; line-height: 22px; }
}

/* 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 0 clamp(32px, 6vw, 56px) 0 !important; }
  main .systems-photo img { position: static !important; max-width: 600px !important; margin: 0 auto !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; }

/* 5Four Migration: the four-tool and stats grids go 2-up, then the tools stack. */
@media (max-width: 1000px) {
  main #process div[style*="grid-template-columns: repeat(4"], main .migration-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  main #process div[style*="grid-template-columns: repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Case studies and the /work grid (John, 2026-10-01): inset about 13% narrower
   than the full content width, so the work reads crisper (a framing rule was tried and
   removed). Phones keep the full width. */
main .cs-framed, main section#grid:has([data-wf-grid]) {
  padding-left: calc(var(--gutter) + clamp(0px, 6.2vw, 120px)) !important;
  padding-right: calc(var(--gutter) + clamp(0px, 6.2vw, 120px)) !important;
}
@media (max-width: 640px) {
  main .cs-framed, main section#grid:has([data-wf-grid]) { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}

/* 5Four® Run (John, 2026-10-02): plan comparison table and the page grids. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.run-table { border-bottom: 1px solid #000000; }
.run-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 16px; padding: 18px 0; border-top: 1px solid #000000; font-size: 18px; line-height: 26px; }
.run-row--head { border-top: 6px solid #000000; padding: 16px 0; }
.run-row__label { font-weight: 400; }
.run-row__none { color: #5E5E5E; }
@media (max-width: 1000px) {
  main .run-loop { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main .run-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; max-width: 640px; }
}
@media (max-width: 760px) {
  main .run-pair { grid-template-columns: minmax(0, 1fr) !important; }
  /* Table: the row label takes its own line, the three plan values sit under it. */
  .run-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; font-size: 15px; line-height: 22px; }
  .run-row__label { grid-column: 1 / -1; font-weight: 700; font-size: 16px; }
  .run-row--head > :first-child { display: none; }
}
@media (max-width: 480px) {
  main .run-loop { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Our tools (2026-10-06): text beside a framed product shot; steps run four across,
   two on tablets, one on phones. */
.tools-perks li { margin: 0 !important; padding: 0 !important; }
/* Tool illustrations (2026-10-06): the same 4:3 gray panel for both, the drawing centered. */
.tools-shot { background: #EFEFEF; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 2vw, 28px); box-sizing: border-box; }
.tools-shot--dark { background: #1A1A1A; }
.tools-ill { width: 100%; height: 100%; display: block; overflow: visible; }
.tools-ill * { transform-box: fill-box; }
/* Animate once when in view: the signature draws, then the Signed check pops; the pin
   drops, then the comment opens from it. Hidden starting states only apply with JS. */
html.js .tools-ill:not(.is-in) .ill-sign { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .tools-ill:not(.is-in) :is(.ill-badge, .ill-pin, .ill-comment) { opacity: 0; }
.tools-ill.is-in .ill-sign { stroke-dasharray: 1; animation: ill-draw 1.1s cubic-bezier(.45, 0, .25, 1) .2s both; }
.tools-ill.is-in .ill-badge { transform-origin: center; animation: ill-pop .55s cubic-bezier(.34, 1.56, .64, 1) 1.3s both; }
.tools-ill.is-in .ill-pin { transform-origin: 50% 100%; animation: ill-drop .6s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
.tools-ill.is-in .ill-comment { transform-origin: 0% 0%; animation: ill-open .55s cubic-bezier(.22, 1, .36, 1) .75s both; }
@keyframes ill-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ill-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ill-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes ill-open { from { opacity: 0; transform: scale(.6) translate(-12px, -12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .tools-ill :is(.ill-sign, .ill-badge, .ill-pin, .ill-comment) { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
}
.tools-shot img { width: 100%; height: auto; display: block; max-height: 460px; object-fit: contain; }
@media (max-width: 1000px) {
  main .tools-steps, main .tools-perks ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  main .tools-split { grid-template-columns: minmax(0, 1fr) !important; }
  main .tools-split > div { grid-column: auto !important; padding-right: 0 !important; }
}
@media (max-width: 640px) {
  main .tools-steps, main .tools-perks ul { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Calendly loading placeholder (John, 2026-10-06). */
.cal-wrap { position: relative; }
.cal-placeholder { position: absolute; inset: 0; z-index: 0; transition: opacity .4s ease, visibility .4s; }
.cal-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cal-loading { position: absolute; z-index: 0; left: 50%; top: 220px; transform: translateX(-50%); background: #000000; color: #FFFFFF; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; padding: 12px 18px; white-space: nowrap; transition: opacity .4s ease, visibility .4s; }
.cal-wrap .calendly-inline-widget { position: relative; z-index: 1; }
.cal-ready .cal-placeholder, .cal-ready .cal-loading { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cal-placeholder, .cal-loading { transition: none; } }

/* UI/UX audit fixes (2026-10-06). */
/* Ticket Tax row: the three lines fit their columns on laptops and iPads, and wrap if they must. */
main #ticket-tax p[style*="nowrap"] { white-space: normal !important; font-size: clamp(22px, 2.15vw, 32px) !important; }
/* Trusted-by logos: three per row between phone and full desktop, so none is orphaned. */
@media (min-width: 641px) and (max-width: 1320px) {
  main [style*="justify-content: space-between; gap: 40px"] { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: space-between !important; align-items: center; }
}
/* Centered closing CTAs keep their buttons centered on phones too. */
main [style*="text-align: center"] > div[style*="display: flex; gap: 12px"] { justify-content: center; flex-wrap: wrap; }
/* Glossary jump links clear the fixed nav and the stuck jump bar. */
@media (min-width: 768px) { main:has(.toc-sticky) [id] { scroll-margin-top: 168px; } }
/* FAQ headings stay inside their column on laptops and iPads. */
@media (min-width: 1001px) { main #faq h2.h2 { font-size: clamp(31px, 4.4vw, 64px) !important; } }
/* Display headings: a touch more space between words on phones (the condensed caps ran together). */
@media (max-width: 767px) { main h1, main .h2 { word-spacing: 0.08em; } }
/* Tap targets of at least 44px on touch screens. */
@media (max-width: 1000px) {
  .footer-legal a { padding: 12px 0; }
  main .chip, main .ff-chip { min-height: 44px; display: inline-flex; align-items: center; }
}

/* No eyebrows (John, 2026-10-06): page openers sit a little higher. */
main section#hero { padding-top: clamp(36px, 6.25vw, 90px) !important; }

/* Home hero, phones (John, 2026-10-06): the two lines under the centered headline center
   too and sit closer together. */
@media (max-width: 640px) {
  header#top div[style*="justify-content: space-between; gap: 48px; align-items: flex-end"] { flex-direction: column; align-items: center !important; justify-content: center !important; gap: 12px !important; padding-top: 18px !important; text-align: center; }
  header#top div[style*="justify-content: space-between; gap: 48px; align-items: flex-end"] > div { align-items: center !important; text-align: center !important; max-width: 320px !important; }
  header#top div[style*="justify-content: space-between; gap: 48px; align-items: flex-end"] > div > div[style*="font-size: 17px"] { font-size: 15px !important; line-height: 22px !important; text-wrap: balance; }
  header#top div[style*="justify-content: space-between; gap: 48px; align-items: flex-end"] > div > .meta[style*="0.72"] { display: none; }
}