/* ============================================================
   OSCILLAS.COM — site skin
   Tokens transcribed from the Oscillas Design System Rev02
   (design handoff 2026-07-29). Layout values from the design
   canvas — treat px values as spec.
   ============================================================ */

/* ---- Self-hosted webfonts (variable; OFL — licenses alongside files) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-var-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-var-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono/jetbrains-mono-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono/jetbrains-mono-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Color tokens ---- */
:root {
  --blue-sky: #E9F7FE;
  --blue-bright: #2C8FF1;
  --blue-medium: #2562A5;
  --blue-navy: #1F568F;
  --blue-ink: #0F2D4B;
  --blue-abyss: #0A1E33;

  --blue-25: #F5FAFE;
  --blue-50: #E9F7FE;
  --blue-100: #D2ECFC;
  --blue-200: #A9D6F8;
  --blue-300: #6FB6F3;
  --blue-400: #2C8FF1;
  --blue-500: #1F7BDE;
  --blue-600: #2562A5;
  --blue-700: #1F568F;
  --blue-800: #143C68;
  --blue-900: #0F2D4B;

  --grey-0: #FFFFFF;
  --grey-25: #FAFBFC;
  --grey-50: #F4F6F8;
  --grey-100: #E9EDF1;
  --grey-200: #D6DDE4;
  --grey-300: #BAC4CE;
  --grey-400: #9EA8B2;
  --grey-500: #7C8794;
  --grey-600: #5C6773;
  --grey-700: #414B56;
  --grey-800: #2A323B;
  --grey-900: #171D24;

  --green-50: #E7F6EE;
  --green-500: #1F9D57;
  --green-600: #167A43;
  --amber-50: #FDF3E2;
  --amber-500: #E0921C;
  --amber-600: #B4720F;
  --red-50: #FCEBEA;
  --red-500: #D24A3F;
  --red-600: #A9362D;

  --text-strong: var(--blue-ink);
  --text-body: var(--grey-800);
  --text-muted: var(--grey-600);
  --text-subtle: var(--grey-500);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(233, 247, 254, 0.72);
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);

  --surface-card: #FFFFFF;
  --surface-dark: var(--blue-ink);
  --surface-darker: var(--blue-abyss);

  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --action: var(--blue-600);
  --action-hover: var(--blue-700);
  --action-active: var(--blue-800);

  --status-up: var(--green-500);
  --status-up-bg: var(--green-50);
  --status-down: var(--red-500);
  --status-down-bg: var(--red-50);
  --status-warn: var(--amber-500);
  --status-warn-bg: var(--amber-50);
  --status-idle: var(--grey-400);

  --focus-ring: 0 0 0 3px rgba(44, 143, 241, 0.35);

  /* type + effects */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --shadow-sm: 0 1px 3px rgba(15, 45, 75, 0.08), 0 1px 2px rgba(15, 45, 75, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 45, 75, 0.08), 0 2px 4px rgba(15, 45, 75, 0.04);
  --shadow-xl: 0 24px 56px rgba(15, 45, 75, 0.14);

  /* layout */
  --container: 1160px;
  --gutter: 64px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; color: var(--text-strong); font-weight: 300; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }
img { max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--blue-200); color: var(--blue-900); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.container { max-width: var(--container); margin: 0 auto; }

/* Sections: vertical rhythm + horizontal gutters live on the section */
.section { padding: 72px var(--gutter); background: #fff; }
.section--tint { background: var(--grey-25); border-top: 1px solid var(--grey-100); }
.section--blue { background: var(--blue-25); border-top: 1px solid var(--grey-100); }
.section--rule { border-top: 1px solid var(--grey-100); }

/* ---- Eyebrows (the signature wide-tracked labels) ---- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.mono-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.mono-eyebrow--blue { color: var(--blue-600); }
.mono-eyebrow--dim { color: var(--grey-500); letter-spacing: 0.04em; }
.section-title { margin-top: 14px; font-size: 34px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn--md { height: 40px; padding: 0 20px; font-size: 14px; }
.btn--lg { height: 48px; padding: 0 26px; font-size: 15px; }
.btn--primary { background: var(--action); color: #fff; border-color: var(--action); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn--primary:active { background: var(--action-active); border-color: var(--action-active); }
.btn--secondary { background: #fff; color: var(--action); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--action); }
.btn--ghost { background: transparent; color: var(--action); border-color: transparent; }
.btn--ghost:hover { background: var(--blue-50); color: var(--action); }
.btn--block { width: 100%; }

/* ---- Header ---- */
.site-header { background: #fff; border-bottom: 1px solid var(--grey-200); position: relative; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
}
.site-header__wordmark { height: 19px; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav__link { font-size: 14px; color: var(--grey-700); }
.site-nav__link:hover { color: var(--blue-ink); }
.site-nav__link.is-active { font-weight: 600; color: var(--blue-ink); }
.site-header__mobile { display: none; align-items: center; gap: 14px; }
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--blue-ink); transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--grey-200);
  box-shadow: var(--shadow-md);
  padding: 8px 24px 16px;
  flex-direction: column;
  animation: menu-in var(--dur-normal) var(--ease-out);
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu__link { padding: 12px 0; font-size: 15px; color: var(--grey-700); border-bottom: 1px solid var(--grey-100); }
.mobile-menu__link:last-child { border-bottom: 0; }
.mobile-menu__link.is-active { font-weight: 600; color: var(--blue-ink); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Footer (columned, sitewide) ---- */
.site-footer { background: #fff; border-top: 1px solid var(--grey-200); padding: 56px var(--gutter) 40px; }
.site-footer__top { display: flex; justify-content: space-between; gap: 64px; }
.site-footer__signature { height: 42px; display: block; }
.site-footer__address { margin-top: 20px; font-size: 13.5px; line-height: 1.7; color: var(--grey-600); }
.site-footer__address a { color: var(--grey-600); }
.site-footer__address a:hover { color: var(--blue-ink); }
.site-footer__cols { display: flex; gap: 80px; }
.site-footer__col-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-600);
  margin-bottom: 14px;
}
.site-footer__col-links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col-links a { font-size: 14px; color: var(--grey-700); }
.site-footer__col-links a:hover { color: var(--blue-ink); }
.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--grey-100);
  margin-top: 44px;
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--grey-600);
}
.site-footer__legal-links { display: flex; gap: 24px; }
.site-footer__legal-links a { color: var(--grey-600); }
.site-footer__legal-links a:hover { color: var(--blue-ink); }

/* ---- CTA band ---- */
.cta-band { background: var(--blue-ink); padding: 72px var(--gutter); }
.cta-band__inner { display: flex; align-items: center; gap: 56px; }
.cta-band__deer { height: 100px; opacity: 0.9; flex: none; }
.cta-band__copy { flex: 1; }
.cta-band__copy h2 { font-size: 32px; color: #fff; }
.cta-band__copy p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--text-on-dark-muted); max-width: 560px; }
.cta-band .btn { flex: none; }

/* ---- Generic panel card (KB support / contact demo / job apply) ---- */
.panel-card {
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  background: var(--grey-25);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.panel-card--blue { border-color: var(--blue-100); background: var(--blue-25); }
.panel-card__title { font-size: 17px; font-weight: 600; color: var(--blue-ink); }
.panel-card__sub { margin-top: 5px; font-size: 14.5px; line-height: 1.6; color: var(--grey-600); }
.panel-card .btn { flex: none; }
.panel-card__actions { display: flex; gap: 12px; flex: none; }

/* ---- Page hero (interior pages) ---- */
.page-hero { padding: 88px var(--gutter) 0; background: #fff; }
.page-hero h1 { margin-top: 18px; font-size: 48px; line-height: 1.15; }
.page-hero--wide h1 { font-size: 52px; margin-top: 20px; }
.page-hero__lede { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--grey-600); max-width: 560px; }

/* ---- Principle columns (How We Think / What It's Like) ---- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 36px; }
.principle { border-top: 2px solid var(--blue-ink); padding-top: 20px; }
.principle h4 { font-size: 18px; font-weight: 500; }
.principle p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--grey-600); }

/* ============================================================
   HOME
   ============================================================ */
.home-hero { padding: 80px var(--gutter) 0; background: #fff; }
.home-hero__grid { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: center; }
/* min-width:auto would let the floor card's min-content inflate the single
   mobile track and push the whole hero past the viewport */
.home-hero__grid > div { min-width: 0; }
.home-hero h1 { margin-top: 22px; font-size: 68px; line-height: 1.08; }
.home-hero__lede { margin-top: 24px; font-size: 17.5px; line-height: 1.65; color: var(--grey-600); max-width: 520px; }
.home-hero__actions { display: flex; gap: 14px; margin-top: 34px; }

/* Floor display card — dark instrument panel */
.floor-card {
  background: var(--blue-abyss);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  padding: 26px 30px 30px;
}
.floor-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.floor-card__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--blue-200); text-transform: uppercase; }
.floor-card__delta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--status-up); }
.floor-card__delta-arrow { font-size: 12px; }
.floor-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  border-top: 1px solid var(--border-on-dark);
  margin-top: 24px;
  padding-top: 22px;
}
.floor-card__po { border-top: 1px solid var(--border-on-dark); margin-top: 22px; padding-top: 20px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-pill--up { background: var(--status-up-bg); color: var(--status-up); }
.status-pill--down { background: var(--status-down-bg); color: var(--status-down); }
.status-pill__dot { position: relative; width: 9px; height: 9px; display: inline-flex; flex: none; }
.status-pill__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status-pill--up .status-pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: os-pulse 1.8s var(--ease-out) infinite;
}
@keyframes os-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}

.metric { display: flex; flex-direction: column; gap: 4px; }
.metric--lg { gap: 8px; }
.metric__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.metric--lg .metric__label { font-size: 14px; }
.metric__value-row { display: flex; align-items: baseline; gap: 8px; }
.metric__value { font-family: var(--font-mono); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.metric--lg .metric__value { font-size: 68px; }
.metric--down .metric__value { color: var(--status-down); }
.metric__unit { font-size: 14px; color: var(--text-on-dark-muted); }
.metric--lg .metric__unit { font-size: 22px; }

.progress { --track: rgba(255, 255, 255, 0.14); }
.progress__head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.progress__label { font-size: 13px; color: var(--text-on-dark-muted); }
.progress__value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #fff; }
.progress__track { position: relative; height: 8px; background: var(--track); border-radius: 999px; }
.progress__fill { position: absolute; inset: 0 auto 0 0; background: var(--action); border-radius: 999px; }
.progress__goal { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--blue-50); }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-top: 1px solid var(--grey-200);
  margin-top: 72px;
  padding: 28px 0 44px;
}
.stat-strip__value { font-size: 26px; font-weight: 300; color: var(--blue-ink); }
.stat-strip__label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-600);
}

/* One Platform, Two Layers */
.layers { display: grid; grid-template-columns: 1fr 40px 1.45fr; margin-top: 44px; align-items: stretch; }
.layer-card {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 36px 38px;
  display: flex;
  flex-direction: column;
}
.layer-card--emphasis { border-color: var(--blue-300); box-shadow: var(--shadow-md); }
.layer-card__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-600); }
.layer-card--emphasis .layer-card__eyebrow { color: var(--blue-600); }
.layer-card h3 { margin-top: 10px; font-size: 25px; font-weight: 400; }
.layer-card__body { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--grey-700); max-width: 560px; }
.layers__connector { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.layers__connector-line { width: 1px; flex: 1; background: var(--grey-300); }
.layers__connector-arrow { font-family: var(--font-mono); font-size: 13px; color: var(--grey-600); }

.reads-card { border: 1px solid var(--grey-100); border-radius: 8px; background: var(--grey-25); margin-top: 26px; padding: 20px 22px; }
.reads-card__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 14px; }
.reads-card__rows { display: flex; flex-direction: column; gap: 11px; font-family: var(--font-mono); font-size: 12.5px; }
.reads-card__rows > div { display: flex; justify-content: space-between; gap: 16px; }
.reads-card__rows dt { color: var(--grey-600); text-transform: uppercase; }
.reads-card__rows dd { margin: 0; color: var(--blue-ink); }

.layer-card__foot { display: flex; gap: 32px; border-top: 1px solid var(--grey-100); margin-top: auto; padding-top: 20px; }
.layer-card__foot-label { font-size: 12px; color: var(--grey-600); }
.layer-card__foot-value { margin-top: 3px; font-size: 14.5px; font-weight: 500; color: var(--blue-ink); }

.layer-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; border-top: 1px solid var(--grey-100); margin-top: 26px; padding-top: 22px; }
.layer-lists__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 12px; }
.layer-lists ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--grey-800); }
.layer-card__cta { border-top: 1px solid var(--grey-100); margin-top: auto; padding-top: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.layer-card__cta p { font-size: 14px; line-height: 1.6; color: var(--grey-600); max-width: 560px; }
.layer-card__cta a { flex: none; font-size: 14px; font-weight: 600; color: var(--blue-600); }

/* Steps to Success */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 48px; }
.step { border-top: 2px solid var(--blue-ink); padding-top: 22px; }
.step__num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--blue-600); }
.step h4 { margin-top: 10px; font-size: 19px; font-weight: 500; }
.step p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--grey-600); }

/* Benefits band */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.benefits h4 { font-size: 17px; font-weight: 600; }
.benefits p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--grey-600); }

/* Testimonials */
.quote-section { padding: 96px var(--gutter); }
.quote-section .eyebrow { text-align: center; }
.pull-quote { margin: 32px auto 0; max-width: 880px; text-align: center; font-size: 28px; line-height: 1.45; font-weight: 300; color: var(--blue-ink); }
.pull-quote-attr {
  margin-top: 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.pull-quote-attr strong { font-weight: 600; color: var(--grey-800); }
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; align-items: stretch; }
.testimonial { border: 1px solid var(--grey-200); border-radius: 8px; padding: 26px 28px; display: flex; flex-direction: column; }
.testimonial p { font-size: 14.5px; line-height: 1.6; color: var(--grey-800); }
.testimonial footer { margin-top: auto; padding-top: 20px; font-size: 12.5px; color: var(--grey-600); }
.testimonial footer strong { font-weight: 600; color: var(--grey-700); }

/* ============================================================
   SERVICES
   ============================================================ */
.services-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--grey-200); margin-top: 44px; overflow-x: auto; }
.services-tabs a { padding: 0 2px 14px; font-size: 14.5px; color: var(--grey-600); white-space: nowrap; border-bottom: 2px solid transparent; }
.services-tabs a:hover { color: var(--blue-600); }

.svc { padding: 72px var(--gutter); }
.svc__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-600); }
.svc h2 { margin-top: 14px; font-size: 32px; }
.svc__body { margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: var(--grey-700); }
.svc__body + .svc__body { margin-top: 14px; }
.svc__grid { display: grid; grid-template-columns: 1fr 480px; gap: 72px; align-items: start; }
.svc__grid--flip { grid-template-columns: 480px 1fr; }
.svc__grid--narrow { grid-template-columns: 1fr 420px; }

.arrow-list { margin-top: 28px; border-top: 1px solid var(--grey-100); }
.arrow-list > div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--grey-100); }
.arrow-list > div:last-child { border-bottom: 0; }
.arrow-list__arrow { font-family: var(--font-mono); font-size: 12px; color: var(--blue-600); width: 24px; flex: none; }
.arrow-list__text { font-size: 14.5px; color: var(--grey-800); }

.connects-card { border: 1px solid var(--grey-200); border-radius: 12px; padding: 32px; background: var(--grey-25); }
.connects-card__label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 18px; }
.connects-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.connects-card__tile {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-600);
  text-align: center;
}
.connects-card__tile--wide { font-size: 13px; letter-spacing: 0.08em; }
.connects-card__note { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--grey-600); }

.img-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grey-50);
  border: 1px dashed var(--grey-300);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-500);
  text-align: center;
  padding: 16px;
}
.device-figure .img-slot { height: 320px; }

/* Dropped-in photos take the placeholder slots' exact frames (findAsset swap). */
.figure-img { display: block; width: 100%; border-radius: 12px; object-fit: cover; }
.figure-img--device { height: 320px; object-position: 50% 40%; }   /* center the enclosure in the portrait source */
.figure-img--cv { object-position: 100% 50%; }   /* keep the right edge — the live bottle counter lives there */
.figure-img--about { height: 440px; object-position: 50% 25%; }   /* bias crop upward — faces sit in the top third of the 5K shot */

.spec-card {
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  background: #fff;
  margin-top: 16px;
  padding: 22px 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2.2;
  color: var(--grey-700);
}
.spec-card > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--grey-100); }
.spec-card > div:last-child { border-bottom: 0; }
.spec-card span:first-child { color: var(--grey-600); text-transform: uppercase; }

.channels { border-top: 1px solid var(--grey-200); margin-top: 26px; padding-top: 20px; }
.channels__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 12px; }
.channels__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-family: var(--font-mono); font-size: 12.5px; }
.channels__grid > div { display: flex; justify-content: space-between; gap: 12px; }
.channels__grid span:first-child { color: var(--grey-600); }
.channels__grid span:last-child { color: var(--blue-ink); }
.channels__grid .is-open { color: var(--grey-600); }

.dash-card { border: 1px solid var(--grey-200); border-radius: 12px; background: var(--grey-25); padding: 26px 28px; }
.dash-card__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 14px; }
.dash-card__rows { display: flex; flex-direction: column; gap: 11px; }
.dash-card__rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--grey-800); }
.dash-card__rows span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--grey-600); }

.excel-card {
  border: 1px dashed var(--grey-400);
  border-radius: 12px;
  background: var(--grey-25);
  margin-top: 32px;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.excel-card__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-600); }
.excel-card h3 { margin-top: 10px; font-size: 20px; font-weight: 500; }
.excel-card__body { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--grey-700); max-width: 520px; }
.sheet-mock { border: 1px solid var(--grey-200); border-radius: 8px; overflow: hidden; background: #fff; font-family: var(--font-mono); font-size: 12.5px; }
.sheet-mock__fx { display: flex; align-items: center; gap: 12px; background: var(--grey-50); border-bottom: 1px solid var(--grey-200); padding: 11px 16px; }
.sheet-mock__fx-label { font-style: italic; color: var(--grey-600); }
.sheet-mock__fx-formula { color: var(--blue-600); }
.sheet-mock__row { display: grid; grid-template-columns: 52px 1fr 84px; padding: 9px 16px; border-bottom: 1px solid var(--grey-100); }
.sheet-mock__row:last-child { border-bottom: 0; }
.sheet-mock__row span:first-child { color: var(--grey-600); }
.sheet-mock__row span:nth-child(2) { color: var(--grey-700); }
.sheet-mock__row span:last-child { text-align: right; color: var(--blue-ink); font-weight: 600; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 36px; }
.about-intro p { font-size: 16.5px; line-height: 1.7; color: var(--grey-700); }
.about-figure { margin: 56px 0 0; }
.about-figure .img-slot { height: 440px; }
.about-figure figcaption, .figure-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.team-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.team-card { border: 1px solid var(--grey-200); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.team-card__photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
div.team-card__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-25);
  font-size: 44px;
  font-weight: 500;
  color: var(--blue-700);
}
.team-card__body { padding: 14px 18px 20px; }
.team-card__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grey-200);
}
.team-card__name { margin-top: 14px; font-size: 19px; font-weight: 600; color: var(--blue-ink); }
.team-card__title { margin-top: 4px; font-size: 14px; color: var(--grey-600); }
.where { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 28px; align-items: start; }
.where p { font-size: 15.5px; line-height: 1.7; color: var(--grey-700); }
.where__rows { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.where__rows > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(15, 45, 75, 0.12); padding-bottom: 12px; }
.where__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.where__rows span:first-child { font-weight: 500; color: var(--blue-ink); }
.where__rows span:last-child { color: var(--grey-600); }

/* ============================================================
   CAREERS
   ============================================================ */
.roles__head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; }
.roles__note { font-size: 13.5px; color: var(--grey-600); }
.roles__list { border-top: 1px solid var(--grey-200); margin-top: 24px; }
.role-row {
  display: grid;
  grid-template-columns: 1fr 280px 140px;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  border-bottom: 1px solid var(--grey-100);
  color: inherit;
}
.role-row:hover .role-row__view { color: var(--blue-700); }
.role-row__title { font-size: 18px; font-weight: 500; color: var(--blue-ink); }
.role-row__excerpt { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--grey-600); }
.role-row__dept { font-size: 13.5px; color: var(--grey-600); }
.role-row__view { font-size: 14px; font-weight: 600; color: var(--blue-600); text-align: right; }
.roles__generalist { margin-top: 28px; font-size: 14.5px; line-height: 1.65; color: var(--grey-600); max-width: 640px; }
.roles__generalist a { font-weight: 500; }
.roles__empty { padding: 40px 8px; border-bottom: 1px solid var(--grey-100); font-size: 15px; line-height: 1.65; color: var(--grey-600); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section { padding: 96px var(--gutter) 88px; }
.contact-grid { display: grid; grid-template-columns: 1fr 560px; gap: 88px; align-items: start; }
.contact-grid h1 { margin-top: 20px; font-size: 52px; line-height: 1.15; }
.contact-grid__lede { margin-top: 22px; font-size: 16.5px; line-height: 1.7; color: var(--grey-600); max-width: 480px; }
.contact-info { border-top: 1px solid var(--grey-200); margin-top: 40px; padding-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.contact-info__row { display: flex; gap: 20px; }
.contact-info__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-600);
  width: 80px;
  flex: none;
  padding-top: 2px;
}
.contact-info__value { font-size: 15px; line-height: 1.6; color: var(--grey-800); }
.contact-info__value a { color: var(--grey-800); }
.contact-info__value a:hover { color: var(--blue-600); }

/* Cal.com inline booking embed, framed in the site's card treatment.
   The iframe auto-resizes its height; min-height limits pre-load layout jump. */
.cal-embed-card { border: 1px solid var(--grey-200); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 12px; background: #fff; overflow: hidden; }
.cal-embed { width: 100%; min-height: 560px; }

/* ============================================================
   BLOG
   ============================================================ */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--grey-200); margin-top: 40px; padding-bottom: 20px; }
.chip {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--grey-300);
  background: #fff;
  color: var(--grey-700);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--grey-400); color: var(--blue-ink); }
.chip.is-active { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; font-weight: 500; }

.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.featured-card {
  grid-column: 1 / -1;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: center;
  background: var(--blue-abyss);
}
.featured-card__meta { display: flex; gap: 14px; align-items: center; }
.featured-card__meta .mono-eyebrow { color: var(--blue-200); }
.featured-card__meta .mono-eyebrow--date { color: rgba(233, 247, 254, 0.5); letter-spacing: 0.04em; }
.featured-card h3 { margin-top: 16px; font-size: 30px; line-height: 1.25; font-weight: 300; color: #fff; }
.featured-card__excerpt { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--text-on-dark-muted); max-width: 520px; }
.featured-card__link { margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--blue-bright); }
.featured-card__deer { height: 200px; opacity: 0.14; justify-self: center; }

.post-card {
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.post-card:hover { border-color: var(--grey-300); color: inherit; }
.post-card__meta { display: flex; gap: 14px; align-items: center; }
.post-card h3 { margin-top: 14px; font-size: 21px; line-height: 1.3; font-weight: 400; }
.post-card__excerpt { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--grey-600); flex: 1; }
.post-card__link { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--blue-600); }
.collection-empty { padding: 48px 0; font-size: 15.5px; line-height: 1.7; color: var(--grey-600); max-width: 560px; }

/* ============================================================
   ARTICLE PAGES (post / kb / job) — 720px column
   ============================================================ */
.article-page { padding: 64px var(--gutter) 88px; background: #fff; }
.article-col { max-width: 720px; margin: 0 auto; }
.back-link { font-size: 13px; color: var(--grey-600); }
.back-link a { color: var(--blue-600); font-weight: 500; }
.breadcrumb-sep { color: var(--grey-500); }

.article-eyebrow { display: flex; gap: 14px; align-items: center; margin-top: 28px; }
.post-title { margin-top: 16px; font-size: 44px; line-height: 1.15; }
.post-lede { margin-top: 20px; font-size: 19px; line-height: 1.6; font-weight: 300; color: var(--grey-600); }
.post-byline {
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  margin-top: 28px;
  padding: 16px 0;
  font-size: 14px;
  color: var(--grey-600);
}
.post-byline strong { font-weight: 600; color: var(--grey-800); }

.kb-header { border-bottom: 1px solid var(--grey-200); padding-bottom: 28px; margin-top: 24px; }
.kb-title { font-size: 38px; line-height: 1.2; }
.kb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600);
}

.job-header { border-bottom: 1px solid var(--grey-200); padding-bottom: 32px; margin-top: 28px; }
.job-title { margin-top: 14px; font-size: 42px; line-height: 1.15; }
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.job-apply { margin-top: 44px; }

/* Markdown body — shared conventions */
.article-body { color: var(--grey-700); }
.article-body > p { margin-top: 16px; font-size: 16px; line-height: 1.75; }
.article-body--post > p { font-size: 16.5px; line-height: 1.8; }
.article-body--post > p:first-child { margin-top: 36px; }
.article-body--kb > p:first-child, .article-body--job > p:first-child { margin-top: 32px; }
.article-body strong { font-weight: 600; color: var(--grey-800); }
.article-body h2 { margin-top: 44px; font-size: 24px; font-weight: 400; }
.article-body--post h2 { font-size: 27px; }
.article-body h2 + p { margin-top: 16px; }
.article-body h3 { margin-top: 32px; font-size: 19px; font-weight: 500; }
.article-body ul, .article-body ol { margin: 14px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.article-body li { font-size: 16px; line-height: 1.7; }
.article-body a { font-weight: 500; }

/* pull quote (plain blockquote) */
.article-body blockquote {
  margin: 32px 0 0;
  border-left: 2px solid var(--grey-300);
  padding: 4px 0 4px 24px;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--blue-ink);
}
.article-body blockquote p { margin: 0; font-size: inherit; line-height: inherit; }
.article-body blockquote + p { margin-top: 32px; }

/* callout box (`> **LABEL**` + list) */
.article-body blockquote.callout {
  border: 1px solid var(--grey-200);
  border-left: 1px solid var(--grey-200);
  border-radius: 8px;
  background: var(--grey-25);
  margin-top: 28px;
  padding: 20px 24px;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.callout .callout-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.callout ul, .callout ol { margin-top: 12px; padding-left: 20px; gap: 7px; }
.callout li { font-size: 14.5px; line-height: 1.6; color: var(--grey-700); }

/* code blocks */
.article-body pre {
  margin: 18px 0 0;
  background: var(--grey-25);
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue-ink);
  overflow-x: auto;
}
.article-body code { font-family: var(--font-mono); font-size: 0.92em; color: var(--blue-ink); overflow-wrap: anywhere; }
.article-body pre code { font-size: 13px; }

/* figures */
.article-figure { margin: 36px 0 0; }
.article-figure img { display: block; width: 100%; border: 1px solid var(--grey-200); border-radius: 8px; }
.article-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--grey-600);
}

/* tables (plain + status-light) */
.article-body table { margin-top: 24px; width: 100%; border: 1px solid var(--grey-200); border-radius: 8px; border-spacing: 0; overflow: hidden; font-size: 14px; }
.article-body th {
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  padding: 10px 18px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--grey-600);
}
.article-body td { padding: 12px 18px; border-bottom: 1px solid var(--grey-100); color: var(--grey-600); vertical-align: top; }
.article-body tr:last-child td { border-bottom: 0; }
.article-body td:first-child { color: var(--grey-800); white-space: nowrap; }
.status-cell { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot--up { background: var(--status-up); }
.status-dot--warn { background: var(--status-warn); }
.status-dot--down { background: var(--status-down); }

/* KB auto-numbered h2s (source markdown carries no numbers) */
.article-body--kb { counter-reset: kbsec; }
.article-body--kb h2 { counter-increment: kbsec; }
.article-body--kb h2::before {
  content: counter(kbsec, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  color: var(--blue-600);
  margin-right: 12px;
}

/* tags */
.post-tags { border-top: 1px solid var(--grey-200); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--grey-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-600);
}

/* prev/next + more-from-blog */
.kb-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--grey-200); margin-top: 48px; padding-top: 24px; }
.kb-prevnext__card { border: 1px solid var(--grey-200); border-radius: 8px; padding: 18px 22px; display: block; transition: border-color var(--dur-fast) var(--ease-standard); }
.kb-prevnext__card:hover { border-color: var(--grey-300); }
.kb-prevnext__card--next { text-align: right; }
.kb-prevnext__title { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--blue-ink); }

.more-band { background: var(--grey-25); border-top: 1px solid var(--grey-100); padding: 56px var(--gutter); }
.more-band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.more-card { border: 1px solid var(--grey-200); border-radius: 12px; background: #fff; padding: 26px 30px; display: block; transition: border-color var(--dur-fast) var(--ease-standard); }
.more-card:hover { border-color: var(--grey-300); }
.more-card h3 { margin-top: 12px; font-size: 19px; line-height: 1.35; font-weight: 400; }

/* ============================================================
   404
   ============================================================ */
.notfound { padding: 150px var(--gutter) 170px; background: #fff; }
.notfound__inner { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.notfound__deer { height: 88px; opacity: 0.22; }
.notfound .status-pill { margin-top: 36px; }
.notfound h1 { margin-top: 28px; font-size: 48px; line-height: 1.15; }
.notfound p { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--grey-600); max-width: 460px; }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .home-hero__grid { grid-template-columns: 1fr 460px; gap: 48px; }
  .home-hero h1 { font-size: 56px; }
  .svc__grid, .svc__grid--flip, .svc__grid--narrow { gap: 48px; }
  .contact-grid { grid-template-columns: 1fr 500px; gap: 56px; }
}

@media (max-width: 980px) {
  :root { --gutter: 32px; }
  .site-nav { display: none; }
  .site-header__mobile { display: flex; }
  .site-header__inner { padding: 16px 20px; }
  .site-header__wordmark { height: 16px; }

  .home-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .home-hero h1 { font-size: clamp(40px, 9vw, 52px); }
  .layers { grid-template-columns: 1fr; }
  .layers__connector { flex-direction: row; height: 40px; }
  .layers__connector-line { width: auto; height: 1px; flex: 1; }
  .layers__connector-arrow { transform: rotate(90deg); }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  .principles, .benefits, .testimonials { grid-template-columns: 1fr; gap: 32px; }
  .svc__grid, .svc__grid--flip, .svc__grid--narrow { grid-template-columns: 1fr; }
  .svc__grid--flip .device-figure { order: 2; }
  .excel-card { grid-template-columns: 1fr; gap: 28px; }
  .about-intro, .where { grid-template-columns: 1fr; }
  .team-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .team-card__name { font-size: 16.5px; }
  .about-intro { gap: 20px; margin-top: 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .post-grid, .more-band__grid { grid-template-columns: 1fr; }
  .featured-card { grid-template-columns: 1fr; padding: 32px 28px; }
  .featured-card__deer { display: none; }
  .page-hero h1, .page-hero--wide h1 { font-size: clamp(34px, 7.5vw, 44px); }
  .contact-grid h1 { font-size: clamp(36px, 8vw, 44px); }
  .post-title { font-size: clamp(32px, 7vw, 38px); }
  .job-title { font-size: clamp(30px, 7vw, 36px); }
  .kb-title { font-size: clamp(28px, 6.5vw, 34px); }
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cta-band__deer { height: 72px; }
  .site-footer__top { flex-direction: column; gap: 40px; }
  .quote-section { padding: 72px var(--gutter); }
  .pull-quote { font-size: 22px; }

  .roles__head { flex-direction: column; gap: 8px; align-items: flex-start; }
  .role-row { grid-template-columns: 1fr; gap: 10px; border: 1px solid var(--grey-200); border-radius: 12px; padding: 24px; margin-top: 16px; }
  .roles__list { border-top: 0; margin-top: 8px; }
  .role-row__dept {
    order: -1;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .role-row__view { text-align: left; }

  .panel-card { flex-direction: column; align-items: flex-start; gap: 20px; }
  .kb-prevnext { grid-template-columns: 1fr; }
  .kb-prevnext__card--next { text-align: left; }
}

@media (max-width: 640px) {
  :root { --gutter: 24px; }
  .section, .svc { padding-top: 56px; padding-bottom: 56px; }
  .home-hero { padding-top: 56px; }
  .page-hero { padding-top: 64px; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }
  .steps { grid-template-columns: 1fr; }
  .floor-card { padding: 22px 22px 26px; }
  .metric--lg .metric__value { font-size: 52px; }
  .floor-card__head { flex-wrap: wrap; row-gap: 10px; }
  .floor-card__row { grid-template-columns: 1fr; gap: 18px; }
  .cal-embed-card { padding: 6px; }
  .cal-embed { min-height: 480px; }
  .home-hero__actions { flex-direction: column; align-items: stretch; }
  .home-hero__actions .btn { width: 100%; }
  .notfound { padding: 96px var(--gutter) 110px; }
  .notfound__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .article-page { padding-top: 48px; }
  .connects-card__grid { grid-template-columns: 1fr 1fr; }
  .channels__grid { grid-template-columns: 1fr; }
  .article-body table, .article-body thead, .article-body tbody, .article-body tr { display: block; }
  .article-body thead { display: none; }
  .article-body tr { border-bottom: 1px solid var(--grey-100); }
  .article-body tr:last-child { border-bottom: 0; }
  .article-body td { display: block; border-bottom: 0; padding: 4px 16px; }
  .article-body td:first-child { padding-top: 12px; }
  .article-body td:last-child { padding-bottom: 12px; }
}