/* styles.css */
/* FAAN — design tokens from scratchpad/ref/spec.md (Slalom-inspired layout, FAAN palette) */
:root {
  --ink: #120E1F;
  --ink-2: #1C162E;
  --ink-3: #272040;
  --paper: #F7F4EF;
  --muted: #B3ACCB;
  --body: rgba(247, 244, 239, .86);
  --coral: #FF5B3A;
  --coral-d: #E8482A;
  --mint: #3DE0B0;
  --lavender: #B8A6FF;
  --sun: #FFD23F;
  --line: rgba(247, 244, 239, .14);

  --sans: 'InterVariable', 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;

  --container: 1280px;
  --gutter: 32px;
  --section: 112px;
  --r-card: 28px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --shadow-lift: 0 24px 48px rgba(0, 0, 0, .42);
  --shadow-pop: 0 12px 32px rgba(18, 14, 31, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-h: 84px;
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --section: 72px; --header-h: 68px; }
}
/* Large displays (2K/4K): a wider measure and a taller hero so the layout doesn't sit small in the middle of the screen. */
@media (min-width: 1920px) {
  :root { --container: 1520px; --section: 136px; --hero-max: 1080px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 var(--fs-body, 17px)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
picture { display: contents; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
/* QA5 #3: sun ring vanishes on coral/sun/mint/lavender; use ink there (6.1-13.1:1). */
.cta-band :focus-visible,
.svc-hero :focus-visible,
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) :focus-visible { outline-color: var(--ink); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 16px; border-radius: 40px; }
.skip:focus { left: 16px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(880px + var(--gutter) * 2); }
.center { text-align: center; }
.section { padding: var(--section) 0; position: relative; }
.pt-0 { padding-top: 0; }
/* Plain dark sections that follow each other share one gap instead of two. */
.section.plain + .section.plain { padding-top: 0; }

/* Type ------------------------------------------------------------------ */
h1, h2, h3, h4, .h2, .h3, .h4 { margin: 0 0 .5em; font-weight: 600; letter-spacing: -.032em; }
h1 { font-size: clamp(46px, 5.6vw, 80px); line-height: .98; letter-spacing: -.04em; }
h2, .h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -.032em; }
h3, .h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.15; font-weight: 560; letter-spacing: -.02em; }
.h4 { font-size: 24px; line-height: 1.3; font-weight: 560; letter-spacing: -.02em; }
h1 em, h2 em, h3 em, .statement em, .statement-lg em, .mega-title em {
  font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit;
}
h2 em, .statement-lg em { color: var(--sun); }
p { margin: 0 0 1.2em; }
.lede { font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; line-height: 1.6; }
.eyebrow { line-height: 1.5; margin: 0 0 16px; color: var(--muted); }
.eyebrow.coral { color: var(--coral); }
.statement { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.4; font-weight: 400; text-align: center; margin: 0; }
.statement em { color: var(--mint); }
.statement-lg { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.2; }

.meta { color: var(--muted); font-size: 15px; margin: 0; }
.body-lg { font-size: 19px; color: var(--body); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 28px;
  border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none;
  border: 2px solid transparent; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .3s var(--ease);
  white-space: nowrap;
}
.btn:active, .round-btn:active, .arrow-btn:active:not(:disabled), .filter:active, .other-svc:active, .switcher-tab:active { transform: scale(.97); transition-duration: .08s; }
.btn .ico-arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .ico-arrow, .arrow-link:hover .ico-arrow, a:hover > .arrow-link .ico-arrow { transform: translateX(4px); }
.btn-solid { background: var(--coral); color: var(--ink); }
.btn-solid:hover { background: var(--paper); }
.btn-outline { border-color: var(--coral); color: var(--paper); }
.btn-outline:hover { background: var(--coral); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--paper); color: var(--ink); }
.btn-lg { min-height: 56px; padding: 0 34px; font-size: 18px; }
.btn-pill-sm { min-height: 38px; padding: 0 18px; font-size: 15px; border-color: var(--paper); color: var(--paper); }
.btn-pill-sm:hover { background: var(--paper); color: var(--ink); }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--coral); }
.arrow-link .ico-arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }

/* Header ----------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .35s var(--ease), border-color .35s; border-bottom: 1px solid transparent; }
.site-header.is-solid, .site-header.is-open, .site-header.mega-open { background: rgba(18, 14, 31, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line); }
/* Open mega menu: solid ink header (no backdrop-filter, so the scrim below can blur the page itself). */
.site-header.mega-open { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.logo-mark { width: 34px; height: 34px; }
.logo-word { font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.main-nav a { position: relative; display: block; padding: 8px 16px; font-weight: 600; font-size: 17px; text-decoration: none; transition: color .2s; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--coral); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; }
.menu-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--paper); transition: transform .3s var(--ease); }
.menu-toggle span:first-child { top: 17px; } .menu-toggle span:last-child { top: 25px; }
.site-header.is-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.site-header.is-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mega { position: absolute; z-index: 1; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s; }
/* QA5 #5: invisible bridge over the gap between trigger li and panel, so a slow pointer doesn't fire mouseleave. */
@media (min-width: 961px) {
  .main-nav .has-mega { position: relative; }
  .main-nav .has-mega::after { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 28px; }
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s; }
/* Full-page scrim under the open mega menu: the page dims and blurs so nothing reads through or competes with the menu. */
.mega-scrim { position: absolute; z-index: 0; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(10, 8, 18, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .18s ease-out, visibility 0s linear .18s; }
.site-header.mega-open .mega-scrim { opacity: 1; visibility: visible; transition: opacity .18s ease-out, visibility 0s; }
.mega-inner { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 48px; padding-top: 48px; padding-bottom: 56px; }
.mini-tile { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-xs); color: var(--ink); font-weight: 700; font-size: 14px; flex: none; }

/* Absolute, not fixed: the header's backdrop-filter makes it the containing block for fixed children. */
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--header-h)); background: var(--ink); padding: 24px var(--gutter) 40px; overflow-y: auto; animation: fadeUp .35s var(--ease); }
.site-header.is-open { background: var(--ink); }
.mobile-menu ul { list-style: none; margin: 0 0 32px; padding: 0; }
.mobile-menu .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; min-height: 56px; }

@media (max-width: 960px) {
  .main-nav, .header-actions .btn-pill-sm { display: none; }
  .menu-toggle { display: block; }
  .mega { display: none; }
}

/* Color bar --------------------------------------------------------------- */
.color-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; display: flex; z-index: 3; }
.color-bar span { flex: 1; }
.color-bar span:nth-child(1) { background: var(--coral); }
.color-bar span:nth-child(2) { background: var(--mint); }
.color-bar span:nth-child(3) { background: var(--lavender); }
.color-bar span:nth-child(4) { background: var(--sun); }
.color-bar span:nth-child(5) { background: var(--coral); }

/* Hero carousel ------------------------------------------------------------ */
.hero { position: relative; height: min(100svh, var(--hero-max, 920px)); min-height: 640px; overflow: hidden; background: var(--ink); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1s var(--ease), visibility 1s; }
.hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Photos crossfade, copy never does: the outgoing headline is gone (250ms) before the incoming one starts (450ms). */
.hero-slide .hero-inner { opacity: 0; transition: opacity .25s ease-out; }
.hero-slide.is-active .hero-inner { opacity: 1; transition: opacity .6s var(--ease) .45s; }
.hero.is-held .hero-dot.is-active span { animation-play-state: paused; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.hero-slide.is-active .hero-media img { transform: scale(1); }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,14,31,.7) 0%, rgba(18,14,31,0) 22%), linear-gradient(90deg, rgba(18,14,31,.85) 0%, rgba(18,14,31,.5) 42%, rgba(18,14,31,.25) 70%, rgba(18,14,31,.35) 100%), linear-gradient(0deg, rgba(18,14,31,.75), transparent 40%); }
.hero-inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding-top: var(--header-h); }
.hero-title { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: clamp(48px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 36px; max-width: 12ch; text-shadow: 0 2px 24px rgba(18,14,31,.35); }
/* Pills anchor bottom-right, above the controls, so they stay clear of faces in the photo. */
.hero-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; justify-self: end; align-self: end; margin-bottom: 116px; }
.chip-row { display: flex; gap: 12px; }
.chip-word { display: inline-block; padding: 6px 30px 10px; border-radius: 999px; font-size: clamp(34px, 3.9vw, 56px); font-weight: 600; line-height: 1.1; color: var(--ink); letter-spacing: -.02em; box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(30px) scale(.9); }
.hero-slide.is-active .chip-word { animation: chipIn .8s var(--ease) forwards; animation-delay: calc(.35s + var(--d) * .14s); }
@keyframes chipIn { to { opacity: 1; transform: none; } }
.chip-coral { background: var(--coral); } .chip-mint { background: var(--mint); } .chip-lavender { background: var(--lavender); } .chip-sun { background: var(--sun); }
.hero-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: 36px; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.round-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(247,244,239,.85); color: var(--ink); display: grid; place-items: center; transition: background .2s, transform .2s var(--ease); }
.round-btn:hover { background: var(--paper); }
.round-btn svg { width: 16px; height: 16px; }
.round-btn .i-play { display: none; }
.hero.is-paused .round-btn .i-play { display: block; } .hero.is-paused .round-btn .i-pause { display: none; }
.hero-dots { display: flex; gap: 8px; margin-left: 16px; padding: 0 16px; border-radius: 999px; background: rgba(18,14,31,.5); }
/* 44px-tall hit area; the visible 4px track is drawn by ::before, progress by the span. */
.hero-dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.hero-dot::before, .hero-dot span { content: ''; position: absolute; left: 0; top: 20px; height: 4px; border-radius: 4px; }
.hero-dot::before { right: 0; background: rgba(247,244,239,.35); }
.hero-dot span { display: block; width: 0; background: var(--paper); }
.hero-dot.is-active span { animation: progress var(--slide-ms, 7000ms) linear forwards; }
.hero.is-paused .hero-dot.is-active span { animation-play-state: paused; }
@keyframes progress { to { width: 44px; } }

@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; }
  .hero-slide { position: relative; display: none; }
  .hero-slide.is-active { display: block; }
  .hero-media { position: relative; height: 340px; }
  .hero-media::after { background: linear-gradient(0deg, var(--ink) 0%, transparent 50%); }
  .hero-inner { grid-template-columns: 1fr; padding-top: 0; margin-top: -40px; padding-bottom: 96px; }
  .hero-chips { order: -1; align-items: flex-start; justify-self: start; align-self: start; gap: 8px; margin: -110px 0 0; }
  .chip-row { gap: 8px; }
  .chip-word { font-size: 30px; padding: 4px 18px 7px; }
  .hero-title { font-size: 42px; margin-bottom: 28px; }
  .hero-controls { justify-content: flex-start; bottom: 28px; }
}

/* Wave backgrounds --------------------------------------------------------- */
.wave { position: relative; overflow: hidden; isolation: isolate; }
.mission { padding: 128px 0 112px; }
.purpose { padding: 128px 0; }
.purpose p { max-width: 640px; margin: 32px auto 40px; font-size: 18px; }
@media (max-width: 760px) { .mission, .purpose { padding: 80px 0; } }

/* Section heads ------------------------------------------------------------- */
.section-head { max-width: 860px; margin-bottom: 56px; }
.section-head p:last-child { font-size: 19px; color: var(--body); margin-bottom: 0; }
.section-head h2 { margin-bottom: 16px; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.row-head h2 { margin: 0; }
.scroller-btns { display: flex; gap: 8px; }
.arrow-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--coral); background: none; color: var(--coral); display: grid; place-items: center; transition: background .25s, color .25s, transform .2s var(--ease); }
.arrow-btn:hover:not(:disabled) { background: var(--coral); color: var(--ink); }
.arrow-btn .ico-arrow { width: 22px; height: 22px; }
.arrow-btn[data-scroll="-1"] .ico-arrow { transform: rotate(180deg); }
.arrow-btn:disabled { border-color: rgba(247,244,239,.25); color: rgba(247,244,239,.4); cursor: default; }

/* Grids & feature cards ------------------------------------------------------ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }
.feature-card { display: flex; flex-direction: column; align-items: flex-start; scroll-margin-top: calc(var(--header-h) + 24px); }
.feature-card p { color: var(--body); margin-bottom: 14px; }
.feature-card .h4 { margin: 24px 0 8px; }
.feature-card .btn { margin-top: auto; }
.offer-teaser { display: flex; flex-direction: column; text-decoration: none; }
.offer-teaser .h4 { margin: 24px 0 8px; }
.offer-teaser p { color: var(--body); margin-bottom: 18px; }
.offer-teaser .arrow-link { margin-top: auto; }
.offer-teaser:hover .feature-media img { transform: scale(1.05); }
.offer-teaser:hover .h4 { color: var(--coral); }
.feature-media { position: relative; width: 100%; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16/10; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feature-card:hover .feature-media img { transform: scale(1.05); }
.feature-media .chip { position: absolute; right: 16px; bottom: 16px; padding: 4px 14px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ticks { list-style: none; padding: 0; margin: 0 0 28px; }
.ticks li { position: relative; padding-left: 26px; margin: 6px 0; line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mint); }

/* Story scroller ------------------------------------------------------------- */
.scroller { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2)) 8px; scroll-padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: 0 0 304px; scroll-snap-align: start; }
.story-card { display: flex; flex-direction: column; text-decoration: none; background: var(--ink-2); border-radius: var(--r-card); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
a.story-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.story-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.scroller .story-media { aspect-ratio: 4/5; }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a.story-card:hover .story-media img { transform: scale(1.05); }
.story-body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.story-body .eyebrow { font-size: 14px; margin-bottom: 10px; color: var(--muted); }
.story-body h3 { font-size: 21px; line-height: 1.3; font-weight: 600; margin: 0 0 18px; min-height: 2.6em; }
.story-body .meta { margin-top: auto; }



/* Split sections ----------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.split-top { align-items: start; }
.split-text { align-items: start; }
.split-media { margin: 0; position: relative; }
.split-media img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; border-radius: var(--r-card); }
.split-media.bleed-left img { border-radius: 0 var(--r-card) var(--r-card) 0; }
.split-media.bleed-right img { border-radius: var(--r-card) 0 0 var(--r-card); }
@media (min-width: 961px) {
  .split-media.bleed-left { margin-left: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); }
  .split-media.bleed-right { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); }
}
.split-media figcaption { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 16px; max-width: 560px; }
.split-media.bleed-left figcaption { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); max-width: calc(560px + max(var(--gutter), calc((100vw - var(--container)) / 2))); }
.split-copy p { font-size: 19px; color: var(--body); margin-bottom: 32px; max-width: 540px; }
.split-copy h3 { margin-bottom: 20px; }
.split-top .split-copy { padding-top: 8px; }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-rev .split-media { order: -1; }
  .split-media.bleed-left img, .split-media.bleed-right img { border-radius: var(--r-card); }
  .split-media.bleed-left figcaption { padding-left: 0; }
}

/* Tiles ---------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 112px); gap: 10px; margin: 8px 0 44px; }
.tile { position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; width: 112px; height: 96px; padding: 10px 12px 11px; border-radius: var(--r-sm); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s; }
.tile:hover { transform: translateY(-4px); }
.tile-sym { font-size: 26px; font-weight: 700; line-height: 1; }
.tile-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.tile-coral { background: var(--coral); } .tile-mint { background: var(--mint); } .tile-lavender { background: var(--lavender); } .tile-sun { background: var(--sun); }
.tile-sm { width: 56px; height: 56px; justify-content: center; align-items: center; }
.tile-lg { width: 132px; height: 132px; padding: 14px 16px; margin: 0 0 32px; }
.tile-lg .tile-sym { font-size: 52px; } .tile-lg .tile-name { font-size: 14px; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tiles .tile { width: auto; height: auto; min-height: 84px; } .tiles .tile-name { font-size: 14px; } }

/* Industry list (home) */
.industry-list { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.industry-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; color: rgba(247,244,239,.72); transition: color .4s; }
.industry-list li.is-current { color: var(--paper); }
@media (max-width: 560px) { .industry-list { grid-template-columns: 1fr; } }

/* Google Cloud product grid */
.cloud-head { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: end; margin-bottom: 48px; }
.cloud-head h2 { margin: 0; }
.cloud-head p { color: var(--body); font-size: 19px; }
.product-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.product { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 28px 32px; background: var(--ink); transition: background .3s; }
.product:hover { background: var(--ink-2); }
.product .mini-tile { transition: transform .3s var(--ease); }
.product:hover .mini-tile { transform: translateY(-3px) rotate(-4deg); }
.product .mini-tile { grid-row: span 2; width: 48px; height: 48px; border-radius: var(--r-sm); font-size: 17px; }
.product-name { font-size: 20px; font-weight: 600; line-height: 1.3; }
.product-role { font-size: 15px; color: var(--muted); line-height: 1.4; }
@media (max-width: 960px) { .cloud-head { grid-template-columns: 1fr; gap: 16px; } .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } .product { padding: 20px 24px; } }


/* Steps ---------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
.step { padding: 28px; background: var(--ink-2); border-radius: 0 0 var(--r-card) var(--r-card); border-top: 4px solid var(--coral); }
.step:nth-child(2) { border-color: var(--mint); } .step:nth-child(3) { border-color: var(--lavender); } .step:nth-child(4) { border-color: var(--sun); }
.step-n { display: block; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 44px; line-height: 1; margin-bottom: 20px; color: var(--muted); }
.step p { margin: 0; color: var(--body); }
.steps { margin-top: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* CTA band ------------------------------------------------------------------- */
.cta-band { background: var(--coral); color: var(--ink); padding: 88px 0; }
.cta-band-inner { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 64px; }
.cta-band h2 { margin: 0; font-size: clamp(38px, 4.4vw, 64px); }
@media (max-width: 860px) { .cta-band-inner { grid-template-columns: 1fr; gap: 24px; } }
.cta-band h2 em { color: var(--ink); }
.cta-band-side { max-width: 440px; justify-self: end; }
@media (max-width: 860px) { .cta-band-side { justify-self: start; } }
.cta-band-side p { font-size: 18px; }

/* Footer --------------------------------------------------------------------- */
.site-footer { background: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 72px; padding-bottom: 64px; }
.footer-brand p { max-width: 320px; color: var(--muted); margin-top: 20px; font-size: 16px; }
.footer-h { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; padding: 0; font-weight: 500; text-decoration: none; }
@media (max-width: 960px) { .site-footer li a { min-height: 44px; } }
.site-footer li a:hover { color: var(--mint); }
.footer-bar { border-top: 1px solid var(--line); padding: 24px 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-bar-inner { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-bar p { margin: 0; }
.footer-motto { color: var(--coral); }
.footer-note { text-transform: none; letter-spacing: 0; flex-basis: 100%; font-size: 14px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* Page hero (inner pages) ------------------------------------------------------ */
.page-hero { position: relative; min-height: 620px; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 80px) 0 96px; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,14,31,.95) 4%, rgba(18,14,31,.45) 55%, rgba(18,14,31,.6)), linear-gradient(90deg, rgba(18,14,31,.55), transparent 65%); }
.page-hero-inner { position: relative; }
.page-hero h1 { max-width: 14ch; }
.page-hero h1 em { color: var(--coral); }
.page-hero.tone-lavender h1 em { color: var(--lavender); }
.page-hero.tone-mint h1 em { color: var(--mint); }
.page-hero .eyebrow { color: var(--paper); }
.page-hero .lede { max-width: 640px; margin-bottom: 0; }
@media (max-width: 760px) { .page-hero { min-height: 540px; padding-bottom: 64px; } }

/* Services index -------------------------------------------------------------- */
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.service-card { grid-column: span 2; }
.service-card:nth-child(-n+2) { grid-column: span 3; }
.service-card { display: flex; flex-direction: column; background: var(--ink-2); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: transform .45s var(--ease), background .3s, box-shadow .45s var(--ease); }
.service-card:hover { transform: translateY(-8px); background: var(--ink-3); box-shadow: var(--shadow-lift); }
.service-media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.service-card:nth-child(-n+2) .service-media { aspect-ratio: 21/9; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.service-card:hover .service-media img { transform: scale(1.05); }
.service-media .tile { position: absolute; left: 24px; bottom: -1px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.service-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 28px 32px 32px; }
.service-card .h4 { margin: 0 0 12px; }
.service-card p { color: var(--body); }
.service-card .arrow-link { margin-top: auto; }
@media (max-width: 960px) { .service-grid { grid-template-columns: 1fr 1fr; } .service-card, .service-card:nth-child(-n+2) { grid-column: auto; } .service-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
.path { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.path li { display: flex; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); font-size: 18px; color: var(--body); }
.path li:last-child { border-bottom: 1px solid var(--line); }
.path strong { color: var(--paper); font-weight: 600; }
.path .mini-tile { width: 44px; height: 44px; }

/* Service detail ------------------------------------------------------------- */
.svc-hero { padding: calc(var(--header-h) + 56px) 0 80px; color: var(--ink); background: var(--coral); }
.svc-hero.tone-mint { background: var(--mint); } .svc-hero.tone-lavender { background: var(--lavender); } .svc-hero.tone-sun { background: var(--sun); }
.svc-hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.svc-hero h1 { font-size: clamp(40px, 4.6vw, 68px); }
.svc-hero .tile { background: var(--ink); color: var(--paper); }
.svc-hero-media { margin: 0; }
.svc-hero-media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: var(--r-card) var(--r-card) var(--r-card) 0; }
.crumb { display: flex; width: fit-content; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; margin-bottom: 16px; }
.crumb:hover { text-decoration: underline; }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) { color: var(--ink); }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .main-nav a:hover { color: var(--ink); }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm { border-color: var(--ink); color: var(--ink); }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .menu-toggle span { background: var(--ink); }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .logo-mark rect { fill: var(--ink); }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .logo-mark circle { fill: var(--paper); }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .logo-mark path { stroke: var(--paper); }
@media (max-width: 860px) { .svc-hero-inner { grid-template-columns: 1fr; gap: 40px; } }

.subnav { position: sticky; top: var(--header-h); z-index: 20; background: rgba(28,22,46,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav .container { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 16px 0; white-space: nowrap; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a.is-active { border-color: var(--coral); }
[id] { scroll-margin-top: calc(var(--header-h) + 64px); }

.light { background: var(--paper); color: var(--ink); }
.light h2 em { color: var(--coral); }
.offerings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; margin-top: 48px; }
.offering { border-top: 2px solid var(--ink); padding-top: 24px; }
.offering-n { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 32px; color: var(--coral); }
.offering .h4 { margin: 8px 0 10px; }
.offering p { margin: 0; color: #2d2840; }
@media (max-width: 860px) { .offerings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .offerings { grid-template-columns: 1fr; } }

.stack-card { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; padding: 56px; border-radius: var(--r-card); background: var(--ink-2); }
.stack-card h2 { margin: 0; }
@media (max-width: 860px) { .stack-card { grid-template-columns: 1fr; padding: 32px; } }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stack-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stack-list li { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-sm); background: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; }
.stack-list .mini-tile { width: 32px; height: 32px; font-size: 14px; }
@media (max-width: 960px) { .stack-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stack-list { grid-template-columns: 1fr; } }
.pill-list li, .pill-list span { padding: 8px 18px; border-radius: 999px; border: 1.5px solid rgba(247,244,239,.28); font-weight: 500; font-size: 16px; }
.other-services { display: flex; flex-wrap: wrap; gap: 12px; }
.other-svc { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; background: var(--ink-2); text-decoration: none; font-weight: 600; transition: background .3s; }
.other-svc:hover { background: var(--ink-3); }
.other-svc .ico-arrow { width: 16px; height: 16px; color: var(--coral); }

/* Industries ---------------------------------------------------------------- */
.split-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; }
.split-hero-media { margin: 0; }
.split-hero-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 var(--r-card) 0; }
.split-hero-copy { padding: calc(var(--header-h) + 80px) max(var(--gutter), calc((100vw - var(--container)) / 2)) 80px 72px; align-self: center; }
.split-hero-copy h1 em { color: var(--mint); }
@media (max-width: 860px) { .split-hero { grid-template-columns: 1fr; min-height: 0; } .split-hero-media img { height: 360px; border-radius: 0; } .split-hero-copy { padding: 48px var(--gutter) 24px; } }

.switcher { display: grid; grid-template-columns: 320px 1fr; gap: 56px; }
.switcher-list { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.switcher-tab { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 20px; border: 0; border-radius: var(--r-sm); background: none; font-size: 19px; font-weight: 500; color: rgba(247,244,239,.78); transition: background .3s, color .3s; }
.switcher-tab:hover { color: var(--paper); }
.switcher-tab[aria-selected="true"] { background: var(--ink-2); color: var(--paper); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot-lg { width: 22px; height: 22px; margin-bottom: 20px; }
.dot-coral { background: var(--coral); } .dot-mint { background: var(--mint); } .dot-lavender { background: var(--lavender); } .dot-sun { background: var(--sun); }
.switcher-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; animation: fadeUp .6s var(--ease); }
.switcher-media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: var(--r-card); }
.switcher-copy p { color: var(--body); font-size: 18px; }
.switcher-copy .ticks li { font-size: 17px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 960px) {
  .switcher { grid-template-columns: 1fr; gap: 24px; }
  .switcher-list { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .switcher-tab { white-space: nowrap; font-size: 15px; min-height: 44px; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
  .switcher-panel { grid-template-columns: 1fr; }
}
.patterns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pattern { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card); background: var(--ink-2); }
.pattern-n { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 34px; line-height: 1; color: var(--coral); margin-bottom: 20px; }
.pattern .h4 { font-size: 22px; margin-bottom: 10px; }
.pattern p { color: var(--body); font-size: 16px; line-height: 1.6; }
.tag-list { list-style: none; padding: 16px 0 0; margin: auto 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.tag-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--paper); }
.tag-list .dot { width: 8px; height: 8px; }
@media (max-width: 1100px) { .patterns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .patterns { grid-template-columns: 1fr; } }

/* Insights ------------------------------------------------------------------ */
.feature-hero { padding: calc(var(--header-h) + 48px) 0 0; }
.feature-hero-inner { display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; align-items: center; }
.feature-hero-copy h1 { font-size: clamp(34px, 3.4vw, 50px); }
.feature-hero-media { display: block; border-radius: var(--r-card); overflow: hidden; }
.feature-hero-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .8s var(--ease); }
.feature-hero-media:hover img { transform: scale(1.04); }
.feature-hero-copy .eyebrow { color: var(--coral); }
.feature-hero-copy p { color: rgba(247,244,239,.85); font-size: 18px; margin-bottom: 32px; }
@media (max-width: 860px) { .feature-hero-inner { grid-template-columns: 1fr; gap: 32px; } }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { min-height: 44px; padding: 8px 20px; border-radius: 999px; border: 1.5px solid var(--line); background: none; font-weight: 500; transition: background .3s, color .3s, border-color .3s, transform .2s var(--ease); }
.filter:hover { border-color: var(--paper); }
.filter.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.insight-grid > * { display: flex; }
.insight-grid > * > .story-card { flex: 1; }
.insight-grid [hidden] { display: none; }
.text-card { flex-direction: column; padding: 36px; border-radius: var(--r-card); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease); }
.text-card:hover { transform: translateY(-8px); }
.text-card.tone-lavender { background: var(--lavender); } .text-card.tone-mint { background: var(--mint); }
.text-card .eyebrow { color: var(--ink); }
.text-card p { font-size: 17px; }
.text-card { position: relative; overflow: hidden; }
.text-card h3 { font-size: 32px; line-height: 1.15; font-weight: 560; letter-spacing: -.02em; margin: 12px 0 18px; }
.text-card::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(18,14,31,.08); pointer-events: none; }
.text-card .arrow-link { position: relative; z-index: 1; }
.text-card .arrow-link { color: var(--ink); margin-top: auto; }
@media (max-width: 960px) { .insight-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .insight-grid { grid-template-columns: 1fr; } .text-card { min-height: 0; } }

.article-hero { padding: calc(var(--header-h) + 48px) 0 0; }
.article-hero > .narrow, aside.narrow { max-width: calc(760px + var(--gutter) * 2); }
.article-hero h1 { margin-top: 8px; }
.article-hero .eyebrow { color: var(--coral); margin-top: 24px; }
.meta-bar { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.meta-bar a { color: var(--paper); }
.article-media { margin-top: 48px; margin-bottom: 64px; }
@media (max-width: 760px) { .article-media { --ar: 4/3; margin-top: 32px; margin-bottom: 40px; } }
.article-media img { width: 100%; aspect-ratio: var(--ar, 21/9); object-fit: cover; object-position: var(--focus, center); border-radius: var(--r-card); }
.prose { font-size: 19px; line-height: 1.8; max-width: calc(760px + var(--gutter) * 2); }
.prose h2 { font-size: clamp(30px, 3vw, 40px); margin: 1.6em 0 .5em; }
.prose p, .prose li { color: rgba(247,244,239,.92); }
.pull { margin: 48px 0; padding-left: 28px; border-left: 4px solid var(--coral); font-family: var(--sans); font-style: normal; font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.25; }
.checklist { padding-left: 1.4em; }
.checklist li { margin: 10px 0; padding-left: 6px; }
.checklist li::marker { color: var(--coral); font-weight: 600; }
.author { display: flex; gap: 24px; align-items: center; margin-top: 64px; padding: 28px; border-radius: var(--r-card); background: var(--ink-2); }
.author p { margin: 4px 0 0; color: var(--body); font-size: 16px; line-height: 1.6; }
.avatar { flex: none; display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--ink-2); }

/* About -------------------------------------------------------------------- */
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; }
.facts li { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); color: rgba(247,244,239,.85); }
.facts span { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--sun); }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 4px; } }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.values-band .value { background: #fff; box-shadow: 0 1px 0 rgba(18,14,31,.06), 0 12px 32px rgba(18,14,31,.06); }
.values-band .value p { color: #2d2840; }
.values-band .value-sun { border-color: #E8B800; }
.value { padding: 28px 28px 32px; border-radius: 0 0 var(--r-card) var(--r-card); background: var(--ink-2); border-top: 4px solid var(--coral); }
.value-mint { border-color: var(--mint); } .value-lavender { border-color: var(--lavender); } .value-sun { border-color: var(--sun); }
.value p { color: var(--body); margin: 0; }
@media (max-width: 960px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }
.leader { display: grid; grid-template-columns: 376px 1fr; gap: 88px; align-items: center; }
/* Founder portrait: 752px square file shown at <= 376 CSS px (2x). Same treatment as the value cards: coral top rule, rounded bottom. */
.leader-photo { max-width: 376px; }
.leader-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 0 0 var(--r-card) var(--r-card); border-top: 4px solid var(--coral); box-sizing: border-box; background: #1e1e1e; }
.leader-copy p { font-size: 18px; color: rgba(247,244,239,.86); }
.leader-copy h2 { margin-bottom: 20px; }
.leader-name { font-size: 24px !important; font-weight: 500; color: var(--paper) !important; margin-bottom: 16px; }
.leader-name span { display: inline-block; margin-left: 10px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); vertical-align: middle; }
.leader-copy .pill-list { margin-top: 28px; }
@media (max-width: 860px) { .leader { grid-template-columns: 1fr; gap: 32px; } .leader-photo { max-width: 280px; } }

/* Contact ------------------------------------------------------------------- */
.contact { padding: calc(var(--header-h) + 72px) 0 var(--section); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: stretch; }
.contact-intro { display: flex; flex-direction: column; }
.contact-intro h1 em { color: var(--coral); }
.contact-media { margin: 32px 0 0; flex: 1; min-height: 240px; position: relative; }
.contact-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.form { background: var(--ink-2); border-radius: var(--r-card); padding: 48px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; width: 100%; }
.field span { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--paper); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1.5px solid rgba(247,244,239,.32); background: var(--ink); color: var(--paper); font: inherit; font-size: 17px; transition: border-color .2s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #FF8A73; }
.field-row { display: flex; gap: 20px; }
.hp { position: absolute; left: -9999px; }
.form-note { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.field textarea::placeholder { color: rgba(247,244,239,.55); }
@media (max-width: 860px) { .contact-media { flex: none; aspect-ratio: 16/10; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } .form { padding: 28px 20px; } .field-row { flex-direction: column; gap: 0; } }

.simple-page { padding: calc(var(--header-h) + 140px) 0 160px; }
.simple-page h1 em { color: var(--coral); }

/* Reveal motion --------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .chip-word { opacity: 1; transform: none; }
}

[hidden] { display: none !important; }
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .main-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* typography.css */
/* FAAN premium typography — written by Grok Bot. Load AFTER styles.css. */
@font-face { font-family: 'InterVariable'; src: url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --sans: 'InterVariable', 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-body: clamp(17px, 0.35vw + 15.6px, 18.5px);
  --fs-small: 15px;
  --fs-micro: 13px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "ss03" 1;
  font-synthesis: none;            /* never fake bold/italic */
}

/* Display + headings: tight, confident, never light */
h1, h2, h3, h4, .display, .h1, .h2, .h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}
h1, .h1 { letter-spacing: -0.04em; line-height: 0.98; }
h3, h4, .h3 { font-weight: 560; letter-spacing: -0.02em; line-height: 1.15; }

p, li, blockquote { text-wrap: pretty; }
p { max-width: 68ch; }

/* No italic display type. Accent words keep the brand color, same upright sans (pattern used by Linear, Vercel, Stripe, Notion). */
em, .accent, .hero-title em, h1 em, h2 em, h3 em { font-family: var(--sans) !important; font-style: normal !important; font-weight: inherit; }
.hero-title, .pull, .step-n, .offering-n, .pattern-n, .facts span {
  font-family: var(--sans) !important; font-style: normal !important; }
.hero-title { font-weight: 600 !important; letter-spacing: -0.045em !important; line-height: .98 !important; }
.pull { font-weight: 500 !important; letter-spacing: -0.02em; }
.step-n, .offering-n, .pattern-n, .facts span { font-weight: 600 !important; letter-spacing: -0.03em; }
/* Tabular figures only where digits must align; Inter's tnum also widens the hyphen ("Hands - on"). */
.step-n, .offering-n, .pattern-n { font-variant-numeric: tabular-nums; }

/* Eyebrows / labels / pills / nav meta: mono, uppercase, tracked */
.eyebrow, .kicker, .label, .tag, .pill, .chip, .meta, .badge, small {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Secondary text: never below 15px, never washed out */
.muted, .lede-sub, .card p, .caption, figcaption, .footer p, label {
  font-size: max(var(--fs-small), 1em * 0.88);
  font-weight: 420;
}

/* Buttons and nav: medium weight, slight negative tracking */
.btn, button, nav a, .nav a { font-family: var(--sans); font-weight: 520; letter-spacing: -0.01em; }
/* QA5 #9 exception: the "faan" wordmark is a logo; keep its original single-storey a. */
.logo-word { font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv11" 1, "ss03" 1; }
/* QA5 #11: 520 read weak on 16px buttons; restore the design's 600 for .btn only (nav links are untouched). */
.btn { font-weight: 600; }

/* Numbers align in stats and tables */
.stat, table, .num { font-variant-numeric: tabular-nums lining-nums; }

/* Light weights are banned on dark surfaces */
[class*="dark"] p, .bg-ink p, .section-dark p { font-weight: 420; }

/* Upright everywhere: no element renders italic. */
em, i, cite, dfn, var, address, blockquote, q { font-style: normal; }
/* Form controls don't inherit fonts by default */
input, select, textarea, button { font-family: inherit; }

/* grok-fixes.css */
/* Grok Bot design fixes — load LAST. */
/* 1) Kill the "vibe-coded" glow blobs on .wave sections: flat ink + hairline grid + one crisp color rule */
.wave, .wave-alt { background: var(--ink) !important; position: relative; isolation: isolate; }
.wave::before, .wave-alt::before, .wave::after, .wave-alt::after {
  content: "" !important; position: absolute; inset: 0 !important; height: auto !important; border-radius: 0 !important; z-index: -1; transform: none !important;
  background:
    linear-gradient(rgba(247,244,239,.045) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(90deg, rgba(247,244,239,.045) 1px, transparent 1px) 0 0 / 88px 88px !important;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  filter: none !important; opacity: 1 !important;
}
.wave::after, .wave-alt::after { display: none !important; }
/* mission statement: editorial, left-aligned, big */
.mission { padding-block: clamp(96px, 11vw, 160px) !important; }
.mission .container.narrow { max-width: calc(var(--container) + var(--gutter) * 2); }
.mission p, .mission .statement { text-align: left; margin-inline: 0; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; }
.mission .container, .mission > div { display: block; }

/* 2) Born in Austin tag */
.born-in { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono, ui-monospace); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(247,244,239,.75); }
.born-in::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

/* ===== Grok Bot QA round 1 ===== */
/* Hero chips: no half-transparent muddy state; crisp staggered pop */
.chip-word { opacity: 1; color: var(--ink) !important; -webkit-font-smoothing: antialiased; will-change: transform; }
.hero-chips .chip-word { animation: chipIn .55s cubic-bezier(.2,.9,.25,1.15) both; }
.chip-row:nth-child(1) .chip-word:nth-child(1) { animation-delay: .05s; }
.chip-row:nth-child(1) .chip-word:nth-child(2) { animation-delay: .15s; }
.chip-row:nth-child(2) .chip-word:nth-child(1) { animation-delay: .25s; }
.chip-row:nth-child(2) .chip-word:nth-child(2) { animation-delay: .35s; }
@keyframes chipIn { from { transform: translateY(14px) scale(.94); clip-path: inset(0 0 100% 0 round 999px); } to { transform: none; clip-path: inset(0 0 0 0 round 999px); } }
@media (prefers-reduced-motion: reduce) { .hero-chips .chip-word { animation: none; } }

/* Contrast: secondary text to AA on ink */
:root { --muted: #C4C1D4; }
.meta, .meta-bar, .card .meta, [class*="-meta"] { color: #C4C1D4 !important; font-size: 14px; }

/* Periodic-table tiles: bigger, readable, never clipped */
.tiles { grid-template-columns: repeat(3, minmax(132px, 1fr)) !important; gap: 12px !important; max-width: 460px; }
.tile { width: auto !important; height: 120px !important; padding: 14px 14px 13px !important; }
.tile-sym { font-size: 32px !important; letter-spacing: -.03em; }
.tile-name { font-size: 13px !important; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }

/* Insights carousel: equal cards, edge fade */
.scroller { align-items: stretch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.scroller > * { display: flex; flex-direction: column; }
.scroller .story-media { aspect-ratio: 4/3 !important; }
.scroller > * h3 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.scroller-btns button { width: 48px; height: 48px; border: 1.5px solid rgba(247,244,239,.6); opacity: 1 !important; }
.scroller-btns button:disabled { opacity: .35 !important; }

/* Mega menu: readable labels, more air */
/* (mega label/link sizing moved to the Round 3b block at the end of this file) */

/* Reveal safety: never leave sections invisible */
.no-js [class*="reveal"], html:not(.js) [class*="reveal"] { opacity: 1 !important; transform: none !important; }

/* QA1 fix: chips stay hidden (clipped) during their start delay instead of showing, then snapping shut */
.hero-slide.is-active .chip-word { animation-fill-mode: both; }
/* QA1 fix: single-column grids used `1fr` (= minmax(auto,1fr)), so a child's min-content width pushed the column past
   the 390px viewport; mobile browsers then widened the layout viewport and the fixed header's menu button slid off-screen. */
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
/* QA1 fix: the 3 x 132px tile minimum (420px) overflowed the 350px content box on phones. */
@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: none; gap: 8px !important; }
  .tiles .tile { height: auto !important; min-height: 104px; padding: 12px 10px 11px !important; }
}
/* QA1 fix: keep "Conversational" whole on phones (it was split mid-word at 390px). */
@media (max-width: 760px) { .tiles .tile { padding-inline: 8px !important; } .tiles .tile-name { font-size: 13px !important; } }
@media (max-width: 380px) { .tiles .tile-name { font-size: 13px !important; letter-spacing: -.015em; } }
/* QA5 #8: at 13px, 3 columns split "Conversational" mid-word at 360px; 2 columns at <=380 keep every word whole. */
@media (max-width: 380px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* QA1 fix: brand coral is 2.8:1 on paper; use a deeper coral for text on light sections (4.9:1). */
.light h2 em, .light .offering-n, .light .eyebrow.coral, .light .arrow-link { color: #C2381C; }
/* QA1 fix: text over photos must hold 4.5:1 even over bright highlights (lamps, windows). Photo scrims only, no glows. */
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open)::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,14,31,.55), rgba(18,14,31,0)); /* legibility scrim (GROK_MENUS), not a glow */
}
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm { background: rgba(18,14,31,.55); }
/* QA5 #1: hover/active/focus over dark heroes: paper fill, ink text (was ink on ink at 1.00:1). */
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:hover,
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:active,
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:focus-visible {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.page-hero-media::after {
  background: linear-gradient(0deg, rgba(18,14,31,.95) 4%, rgba(18,14,31,.6) 55%, rgba(18,14,31,.65)),
              linear-gradient(90deg, rgba(18,14,31,.7), rgba(18,14,31,.35) 55%, transparent 80%);
}
@media (max-width: 760px) { .page-hero-media::after { background: linear-gradient(0deg, rgba(18,14,31,.95) 6%, rgba(18,14,31,.8) 50%, rgba(18,14,31,.65)); } }

/* Grok hotfix: Let's talk pill hover/focus (was ink text on dark bg) */
.site-header .btn-pill-sm:hover,
.site-header .btn-pill-sm:active,
.site-header .btn-pill-sm:focus-visible,
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:hover,
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:focus-visible {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:hover,
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:active,
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .btn-pill-sm:focus-visible {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Round 3b: crisp, bright menu text (GROK_ROUND3_MENU.md) ----------------------------------------------
   Pure white titles, color-only dimming (no opacity on text or parents), whole-pixel geometry,
   no filter/backdrop-filter on the panel or any ancestor (blur lives only on .mega-scrim). */
.mega, .mobile-menu {
  color: #FFFFFF;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-optical-sizing: auto; font-synthesis: none;
  filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; will-change: auto;
}
/* Mobile menu text sits inside the header: the open header must not carry a backdrop-filter. */
.site-header.is-open { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Mega grid, type and rows: see menus.css (round 4). */
/* Mobile menu: same treatment; opens with opacity + translateY on the panel only, ending at transform: none. */
@keyframes menuIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mobile-menu { animation: menuIn .22s ease-out backwards; }

/* QA5 #7 mega type: superseded by menus.css (round 4, GROK_MENUS must-fix #2). */

/* GROK_AUDIT fixes -------------------------------------------------------- */
.insight-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .insight-grid { grid-template-columns: 1fr; } }
.footer-note { max-width: none; }
@media (max-width: 560px) { .site-footer li a { min-height: 0; padding: 8px 0; line-height: 1.3; } .site-footer ul { display: grid; gap: 4px; } }
.footer-bar { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; }
.footer-bar .footer-note { font-family: var(--sans); font-size: 14px; letter-spacing: 0; }

/* mission.css */
/* Homepage mission band (GROK_MISSION3): a 1:1 structural copy of slalom.com/us/en's post-hero band.
   Measured values (scratchpad/mission3/slalom/styles.json) at 1440 → 390:
   top 216 → 168 · centered statement 48/60 w300 → 30/42 · gap 152 → 120 · H2 64/76 w300 → 40/52 · 32 → 24 ·
   lede 20/32 → 16/28 · 32 → 24 · 3-up 16:9 cards, 16px gap, radius 30 · 32 · title 26/34 w700 → 20/28 · sub 16/28 ·
   32 → 24 · outline pill 48h, 2px, 16px w700, 24 left / 8 / 24 icon / 20 right · bottom 128 → 104.
   Translated to InterVariable (upright), FAAN ink + mint. Loaded after grok-fixes.css, so its `.mission p` / padding rules are reset here. */
.mission { padding-block: 216px 128px !important; }
.mission .mission-band p { font-size: inherit; line-height: inherit; letter-spacing: 0; font-weight: 400; margin: 0; max-width: none; text-align: left; }

/* 1. centered statement */
.mission .mission-band .mission-statement {
  font-family: var(--sans); font-size: 48px; line-height: 60px; font-weight: 260; letter-spacing: 0; color: var(--paper);
  text-align: center; max-width: 1208px; margin: 0 auto; text-wrap: balance;
}

/* 2. left-aligned heading + lede */
.mission .mission-head {
  font-family: var(--sans); font-size: 64px; line-height: 76px; font-weight: 260; letter-spacing: -.01em; color: var(--paper);
  margin: 152px 0 32px; max-width: none; text-wrap: balance;
}
.mission .mission-accent { font-weight: 400; color: var(--mint); }
.mission .mission-band .mission-sub { font-size: 20px; line-height: 32px; color: var(--paper); max-width: none; margin-bottom: 32px; }

/* 3. three image cards */
.mission-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.mission-card { display: flex; flex-direction: column; align-items: flex-start; }
.mission-card picture { display: block; width: 100%; }
.mission-card .mission-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 30px; }
.mission .mission-card h3 { font-family: var(--sans); font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; color: var(--paper); margin: 32px 0 0; }
.mission .mission-band .mission-card p { font-size: 16px; line-height: 28px; color: var(--paper); margin: 0 0 32px; }

/* outline pill CTA */
.mission-pill {
  display: inline-flex; align-items: center; height: 48px; padding: 0 20px 0 24px; gap: 8px; margin-top: auto;
  border: 2px solid var(--paper); border-radius: 50px; background: transparent; color: var(--paper);
  font-family: var(--sans); font-size: 16px; line-height: 16px; font-weight: 700; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mission-pill .ico-arrow { width: 24px; height: 24px; flex: none; transition: transform .2s var(--ease); }
.mission-pill:hover { background: var(--paper); color: var(--ink); }
.mission-pill:hover .ico-arrow { transform: translateX(3px); }
.mission-pill:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

@media (max-width: 1200px) {
  .mission .mission-band .mission-statement { font-size: 40px; line-height: 52px; }
  .mission .mission-head { font-size: 52px; line-height: 64px; }
  .mission .mission-card h3 { font-size: 22px; line-height: 30px; }
}
@media (max-width: 760px) {
  .mission { padding-block: 168px 104px !important; }
  .mission .container { padding-inline: 24px; }
  .mission .mission-band .mission-statement { font-size: 30px; line-height: 42px; }
  .mission .mission-head { font-size: 40px; line-height: 52px; margin: 120px 0 24px; }
  .mission .mission-band .mission-sub { font-size: 16px; line-height: 28px; margin-bottom: 24px; }
  .mission-cards { grid-template-columns: 1fr; row-gap: 32px; }
  .mission .mission-card h3 { font-size: 20px; line-height: 28px; margin-top: 32px; }
  .mission .mission-band .mission-card p { margin-bottom: 24px; }
}

/* menus.css */
/* Round 4 (GROK_MENUS.md): top nav + five mega menus + mobile accordions, one family. Loads LAST.
   Panel shell (solid ink, separate blurred .mega-scrim, 180ms fade ending at transform:none) lives in styles.css.
   Rules: InterVariable upright only, no filter/backdrop-filter on any ancestor of text, whole-pixel geometry. */

:root {
  --m-white: #FFFFFF;
  --m-desc: rgba(255, 255, 255, .80);
  --m-eyebrow: rgba(255, 255, 255, .66);
  --m-wash: rgba(255, 255, 255, .06);
  --m-rule: rgba(255, 255, 255, .10);
  --m-ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------------------------------------------------------------- Top nav */
.main-nav ul { gap: 2px; }
.main-nav li { display: flex; align-items: center; }
.main-nav a {
  padding: 8px 14px; font-size: 15px; line-height: 24px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--m-white); font-synthesis: none;
  text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px;
  transition: color .15s var(--m-ease);
}
.main-nav .has-mega > a { padding-right: 4px; }
/* Legibility over the hero photo (with the header-only ink scrim in grok-fixes.css). */
body:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open) .main-nav :is(a, .nav-chev) { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* Underline only when shown: a transparent underline would still cast the text-shadow. */
.main-nav a:is(:hover, [aria-current]), .main-nav .has-mega.is-open > a { text-decoration-line: underline; text-decoration-color: currentColor; }
.main-nav a[aria-current], .main-nav .has-mega.is-open > a { color: var(--coral); }
.main-nav .has-mega.is-open > a:not([aria-current]) { color: var(--coral); }
/* Chevron: a real disclosure button beside the label (the label stays a link). */
.nav-chev {
  display: grid; place-items: center; width: 24px; height: 40px; margin-right: 6px; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; border-radius: 6px;
}
.main-nav a[aria-current] + .nav-chev, .has-mega.is-open > .nav-chev { color: var(--coral); }
.nav-chev .chev { width: 10px; height: 10px; transition: transform .15s var(--m-ease); }
.nav-chev[aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-header .main-nav { color: var(--m-white); }
/* Light (pastel) service heroes: ink labels, ink underline (QA5 #2 contrast). */
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .main-nav :is(a, .nav-chev),
body.is-light-hero .site-header:not(.is-solid):not(.mega-open):not(.is-open) .main-nav a[aria-current] { color: var(--ink); }

/* ---------------------------------------------------------------- Panel grid (all five menus) */
.mega { font-synthesis: none; }
.mega * { font-style: normal; }
.mega .mega-inner {
  display: grid; align-items: start; max-width: none; margin: 0;
  padding: 44px max(var(--gutter), calc((100% - var(--container)) / 2)) 52px;
  padding-inline: max(var(--gutter), round(down, calc((100% - var(--container)) / 2), 1px));
  grid-template-columns: 264px minmax(0, 1fr) 300px; column-gap: 40px;
}
@media (min-width: 1280px) { .mega .mega-inner { grid-template-columns: 320px minmax(0, 1fr) 360px; column-gap: 64px; } }
@media (min-width: 1920px) { .mega .mega-inner { grid-template-columns: 384px minmax(0, 1fr) 432px; column-gap: 80px; padding-top: 52px; padding-bottom: 60px; } }
.mega-col { min-width: 0; }

/* Eyebrow: one line, every column, same top edge (GROK_MENUS must-fix #2). */
.mega .eyebrow {
  display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-eyebrow); margin: 0 0 20px; max-width: none;
}

/* Intro column */
.mega .mega-title {
  font-family: var(--sans); font-weight: 600; font-size: 32px; line-height: 36px; letter-spacing: -.025em; color: var(--m-white);
  margin: 0 0 16px; max-width: 12ch; text-wrap: balance; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
.mega .mega-title em { color: var(--coral); white-space: nowrap; }
#mega-about .mega-title { max-width: none; }
@media (max-width: 1279px) { .mega .mega-title { font-size: 28px; line-height: 32px; } }
.mega .mega-lede { font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: -.006em; color: var(--m-desc); margin: 0 0 28px; max-width: 30ch; }
@media (max-width: 1279px) { .mega .mega-lede { display: none; } .mega .mega-title { margin-bottom: 24px; } }
.mega .mega-intro .btn { min-height: 44px; padding: 0 20px 0 22px; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.mega .mega-intro .btn .ico-arrow { width: 16px; height: 16px; }
.mega .mega-intro .btn-outline { color: var(--m-white); border: 1.5px solid rgba(255, 255, 255, .9); background: transparent; }
.mega .mega-intro .btn-outline:is(:hover, :focus-visible) { background: var(--m-white); color: var(--ink); border-color: var(--m-white); }
.mega .mega-intro .btn-solid:is(:hover, :focus-visible) { background: var(--m-white); color: var(--ink); }
.mega .mega-note { font-size: 14px; line-height: 20px; color: var(--m-desc); margin: 16px 0 0; }
.mega .mega-born {
  display: flex; align-items: center; gap: 10px; margin: 24px 0 0;
  font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--m-desc);
}
.mega .mega-born::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none; }

/* Main list rows: marker | title + one line | arrow. Rows hang 12px into the gutter so text aligns with the eyebrow. */
.mega-rows { list-style: none; margin: -12px -12px 0; padding: 0; }
.mrow {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) 16px; column-gap: 16px; align-items: start;
  padding: 12px; border-radius: 12px; text-decoration: none; color: var(--m-white);
  transition: background-color .15s var(--m-ease);
}
.mrow.has-tile { grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; }
.mrow .dot { width: 10px; height: 10px; margin-top: 6px; }
.mrow .mini-tile { width: 40px; height: 40px; border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; transition: transform .3s var(--ease); }
.mrow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mrow-title { font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.011em; color: var(--m-white); transition: color .15s var(--m-ease); }
.mrow-desc { font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: -.006em; color: var(--m-desc); }
.mega :is(.mrow, .mega-mini a) > .ico-arrow, .mcard-cta .ico-arrow {
  width: 16px; height: 16px; flex: none; color: var(--coral); transition: opacity .15s var(--m-ease), transform .15s var(--m-ease);
}
.mega :is(.mrow, .mega-mini a) > .ico-arrow { align-self: center; opacity: 0; transform: translateX(-4px); }
.mega :is(.mrow, .mega-mini a):is(:hover, :focus-visible) { background: var(--m-wash); }
.mega :is(.mrow, .mega-mini a):is(:hover, :focus-visible) > .ico-arrow { opacity: 1; transform: none; }
.mrow:is(:hover, :focus-visible) .mrow-title { color: var(--coral); }
.mrow:hover .mini-tile { transform: translateY(-2px) rotate(-4deg); }

/* Feature card: eyebrow above, real photo (16:10, whole-pixel height), title, one line, coral link. */
.mcard { display: block; text-decoration: none; color: var(--m-white); margin: 0 -12px; padding: 0 12px 12px; border-radius: 16px; }
a.mcard { transition: background-color .15s var(--m-ease); }
a.mcard:is(:hover, :focus-visible) { background: var(--m-wash); }
.mcard-media { display: block; height: 188px; margin: 0 0 16px; overflow: hidden; border-radius: 12px; background: var(--ink-2); }
@media (min-width: 1280px) { .mcard-media { height: 225px; } }
@media (min-width: 1920px) { .mcard-media { height: 270px; } }
.mcard-media picture, .mcard-media img { display: block; width: 100%; height: 100%; }
.mcard-media img { object-fit: cover; transition: transform .45s var(--ease); }
a.mcard:hover .mcard-media img { transform: scale(1.03); }
.mcard-title { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.015em; color: var(--m-white); margin: 0 0 6px; text-wrap: balance; transition: color .15s var(--m-ease); }
a.mcard:is(:hover, :focus-visible) .mcard-title { color: var(--coral); }
.mcard-desc { display: block; font-size: 15px; line-height: 22px; color: var(--m-desc); }
.mcard-cta { display: flex; width: max-content; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.005em; color: var(--coral); }
a.mcard:hover .mcard-cta .ico-arrow { transform: translateX(3px); }
.mcard-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--m-desc); }
.mcard-steps b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--coral); margin-right: 8px; }
.mcard-ticks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mcard-ticks > span { position: relative; padding-left: 20px; font-size: 15px; line-height: 22px; color: var(--m-desc); }
.mcard-ticks > span::before { content: ''; position: absolute; left: 1px; top: 7px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--mint); }
.mega-feature .mega-born { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--m-rule); }

/* Services: the other two offers as compact rows under the card. */
.mega-mini { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--m-rule); }
.mega-mini a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 -12px; padding: 10px 12px; border-radius: 10px;
  font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.011em; color: var(--m-white); text-decoration: none;
  transition: background-color .15s var(--m-ease), color .15s var(--m-ease);
}
.mega-mini a > .ico-arrow { margin-left: auto; }
.mega-mini a:is(:hover, :focus-visible) { color: var(--coral); }
.mega-mini .dot { width: 10px; height: 10px; }

/* Focus: one ring for every control in the panels and drawer. */
.mega a:focus-visible, .nav-chev:focus-visible, .mobile-menu :is(a, button):focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.mega .mrow:focus-visible, .mega .mega-mini a:focus-visible { outline-offset: 0; }

/* Switching between open menus is instant (no replayed fade). */
.site-header.mega-switch .mega { transition: none !important; }

/* ---------------------------------------------------------------- Mobile drawer: accordions */
.mobile-menu .m-acc { list-style: none; margin: 0 0 28px; padding: 0; }
.mobile-menu .m-acc > li { border-bottom: 1px solid var(--line); }
.mobile-menu .m-acc > li > a, .m-acc-btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 64px; padding: 0; border: 0; background: none;
  font-family: var(--sans); font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--m-white); text-decoration: none; text-align: left; cursor: pointer;
}
.mobile-menu .m-acc > li > a::after { content: '→'; font-size: 20px; color: var(--coral); }
.m-acc-btn .chev { width: 14px; height: 14px; color: var(--coral); transition: transform .2s var(--m-ease); }
.m-acc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.m-acc-btn[aria-expanded="true"] { color: var(--coral); }
.m-acc-panel { list-style: none; margin: -4px 0 0; padding: 0 0 16px; }
.m-acc-panel a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 0;
  font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -.011em; color: var(--m-desc); text-decoration: none;
}
.m-acc-panel a:hover { color: var(--m-white); }
.m-acc-panel .m-acc-all { color: var(--coral); }
.m-acc-panel .m-acc-all .ico-arrow { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .mega *, .main-nav *, .mobile-menu * { transition: none !important; }
  .mrow:hover .mini-tile, a.mcard:hover .mcard-media img { transform: none; }
}
[data-switcher] { scroll-margin-top: calc(var(--header-h) + 32px); }

/* insights.css */
/* Insights: real articles with Google Cloud-style diagrams (white canvas). Loaded last. */

/* Diagram media: contained on its own white canvas, never cropped. */
.is-diagram { background: #fff; }
.is-diagram img { object-fit: contain !important; object-position: center !important; }
.story-media.is-diagram, .scroller .story-media.is-diagram { aspect-ratio: 16/10 !important; padding: 10px; }
.story-media.is-diagram img { width: 100%; height: 100%; }
a.story-card:hover .story-media.is-diagram img { transform: scale(1.025); }
.scroller .insight-card { width: min(440px, 82vw); }
.feature-hero-media.is-diagram { padding: 14px; border: 1px solid rgba(255,255,255,.08); }
.feature-hero-media.is-diagram img { aspect-ratio: auto; height: auto; }
.feature-hero-media.is-diagram:hover img { transform: scale(1.015); }
.mcard-media.is-diagram { padding: 8px; }
.mcard-media.is-diagram img { width: 100%; height: 100%; }
.filter-n { font-family: var(--mono); font-size: 12px; opacity: .6; margin-left: 4px; }

/* Article header */
.post-hero > .narrow { max-width: calc(760px + var(--gutter) * 2); }
.post-title { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.035em; margin: 8px 0 20px; text-wrap: balance; }
.post-hero .lede { color: rgba(247,244,239,.86); max-width: 62ch; margin: 0 0 32px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.byline .avatar { width: 48px; height: 48px; }
.byline-text { display: flex; flex-direction: column; line-height: 1.35; }
.byline-text strong { font-weight: 600; font-size: 16px; }
.byline-text span { color: var(--muted); font-size: 14px; }
.byline-meta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--muted); }
.byline-meta a { color: var(--coral); text-decoration: none; font-weight: 600; }
.byline-meta a:hover { text-decoration: underline; }
@media (max-width: 600px) { .byline-meta { margin-left: 0; width: 100%; } }
.post-figure-wrap { max-width: calc(1120px + var(--gutter) * 2); margin-top: 48px; margin-bottom: 56px; }

/* Figures */
.diagram { margin: 48px 0; }
.diagram-frame { display: block; background: #fff; border-radius: 16px; padding: clamp(6px, 1.2vw, 16px); border: 1px solid rgba(255,255,255,.1); cursor: zoom-in; }
.diagram-frame img { display: block; width: 100%; height: auto; }
.diagram figcaption { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 72ch; }
.diagram-hero { margin: 0; }
.post-body .diagram { position: relative; width: min(1040px, calc(100vw - var(--gutter) * 2)); left: 50%; transform: translateX(-50%); }
.post-body .diagram figcaption { max-width: 720px; margin-inline: auto; }

/* Body typography: 68ch measure, 19px, generous leading. */
.post-body { max-width: calc(720px + var(--gutter) * 2); font-size: 19px; line-height: 1.75; }
.post-body p, .post-body li { max-width: 68ch; color: rgba(247,244,239,.9); }
.post-body p { margin: 0 0 1.15em; }
.post-body h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; margin: 2em 0 .55em; scroll-margin-top: calc(var(--header-h) + 24px); }
.post-body h3 { font-size: 22px; line-height: 1.25; margin: 1.8em 0 .5em; scroll-margin-top: calc(var(--header-h) + 24px); }
.post-body strong { font-weight: 600; color: var(--paper); }
.post-body a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-body a:hover { color: var(--coral); }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.post-body li { margin: .4em 0; padding-left: .3em; }
.post-body li::marker { color: var(--coral); font-weight: 600; }
.post-body :not(pre) > code { font-family: var(--mono); font-size: .84em; padding: .12em .38em; border-radius: 6px; background: rgba(247,244,239,.08); border: 1px solid rgba(247,244,239,.1); color: var(--paper); overflow-wrap: anywhere; }

/* Code blocks: Geist Mono on a slightly lifted panel. */
.code-block { position: relative; margin: 28px 0 32px; border-radius: 14px; background: #0B0815; border: 1px solid var(--line); }
.code-block pre { margin: 0; padding: 22px 24px; overflow-x: auto; font-family: var(--mono); font-size: 14.5px; line-height: 1.7; color: #EDE9F7; tab-size: 2; }
.code-block code { font-family: inherit; font-style: normal; }
.code-block .c { color: #8E87A8; }
.code-lang { position: absolute; top: 10px; right: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #8E87A8; }
@media (max-width: 760px) { .code-block { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; } .code-block pre { padding: 20px var(--gutter); font-size: 13px; } }

/* Further reading: compact link list. */
#further-reading { font-size: 22px; margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); }
#further-reading + ul { list-style: none; padding: 0; font-size: 16px; line-height: 1.5; }
#further-reading + ul li { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); color: var(--muted); }
#further-reading + ul a { color: var(--paper); text-decoration-color: rgba(255,91,58,.6); text-decoration-thickness: 1px; }
#further-reading + ul a:hover { color: var(--coral); }
#get-started + p a { color: var(--coral); font-weight: 600; }
.code-block:has(.code-lang) pre { padding-top: 36px; }

/* GROK_AUDIT fixes -------------------------------------------------------- */
/* Founder avatars: <picture> collapsed to 0 width inside the flex rows, offsetting the image. */
.byline picture, .author picture { display: block; flex: none; line-height: 0; }
/* Body column shares the hero's left edge (760px measure container). */
.post-body { max-width: calc(760px + var(--gutter) * 2); }
.byline-meta a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
.post-body :not(pre) > code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 600px) {
  .author { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .author .avatar { width: 56px; height: 56px; }
  /* Diagrams keep readable labels on phones: drawn at 720px inside a horizontal scroller (1600px file = 2.2x). */
  .diagram-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .diagram-frame img { width: 720px; max-width: none; }
  .diagram figcaption::after { content: ' Swipe to see the full diagram, or tap to open it.'; color: var(--muted); }
}
/* Insight card covers (GROK_CARDS): dark surface + official Google Cloud icons, never cropped. */
.is-cover { background: #1C162E; }
.is-cover img { object-fit: contain !important; object-position: center !important; width: 100%; height: 100%; }
.story-media.is-cover, .scroller .story-media.is-cover { aspect-ratio: 16/10 !important; padding: 0; }
a.story-card:hover .story-media.is-cover img { transform: scale(1.03); }
.feature-hero-media.is-cover { border: 1px solid rgba(255,255,255,.08); }
.feature-hero-media.is-cover img { aspect-ratio: 16/10; height: auto; }
.mcard-media.is-cover img { width: 100%; height: 100%; }
/* Offer meta line (only where the offer page states it). */
.offer-meta { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; margin: 0 0 10px !important; }