:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #9a9a9a;
  --accent: #ff3b30;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "SF Pro Display", "HelveticaNowDisplay", "Helvetica Neue", Inter, -apple-system, system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px;
  background: transparent;
  border-bottom: none;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.025em;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.brand sup {
  font-size: 8px;
  vertical-align: super;
  font-weight: 400;
  opacity: .55;
  margin-left: 1px;
}

.nav { display: flex; gap: 30px; align-items: center; }
.nav a {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  transition: opacity .2s ease;
}
.nav a:hover { opacity: 1; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after { transform: scaleX(1); }
.nav { transition: opacity .35s ease, transform .35s ease; }

/* Left-side vertical nav rail — appears once Custom Software section reaches the top */
.nav-rail {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translate(-8px, -50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.nav-rail a {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  padding-left: 14px;
  transition: opacity .25s ease, padding-left .25s ease;
  perspective: 700px;
}
.nav-rail a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: currentColor;
  opacity: .55;
  transform: translateY(-50%) scaleX(.35);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, background .25s ease;
}
.nav-rail a:hover { opacity: 1; padding-left: 18px; }
.nav-rail a:hover::before { transform: translateY(-50%) scaleX(1); opacity: 1; }

/* 3D flip for the active section indicator */
.nr-flip {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.7,.05,.25,1);
  will-change: transform;
}
.nr-face {
  display: inline-block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nr-back {
  position: absolute; inset: 0;
  transform: rotateX(180deg);
  color: #0071e3;
  font-weight: 700;
  letter-spacing: .16em;
  white-space: nowrap;
}
.nav-rail a.is-active { opacity: 1; padding-left: 22px; }
.nav-rail a.is-active::before {
  transform: translateY(-50%) scaleX(1.6);
  opacity: 1;
  background: #0071e3;
  height: 2px;
}
.nav-rail a.is-active .nr-flip { transform: rotateX(180deg); }

body.nav-rail-on .nav-rail {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
body.nav-rail-on .nav {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
body.subpage.nav-rail-on .topbar .cta {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

@media (max-width: 900px) {
  .nav-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-rail, .nav { transition: none; }
}

.cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: inherit;
  text-decoration: none;
  padding: 7px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .75;
  transition: opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.cta:hover { opacity: 1; background: var(--ink); color: #fff; border-color: var(--ink); }

.stage {
  position: relative;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  /* Updated by ResizeObserver in script.js to match the actual rendered
     height of .dialog. On mobile we subtract this from #scene so the bot
     canvas shrinks as the chat grows (no overlap). Desktop ignores it. */
  --dialog-h: 0px;
  /* Flat mid-grey as a one-frame guard before the WebGL canvas paints its
     own studio backdrop. Real depth (spotlight, vignette, floor shadow) is
     baked into scene.background in script.js so the post-FX chain renders
     opaque pixels and we never see a black flash. */
  background: #9a9aa3;
}

#scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: pan-y;
}
#scene canvas { display: block; touch-action: pan-y; }
.loader {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  z-index: 5; pointer-events: none;
}
.loader.hidden { display: none; }

/* Transparent full-stage click catcher — the actual "Click to start" prompt
   is rendered onto the CRT screen mesh via a canvas texture so it reads as
   the character's own UI rather than an HTML overlay. */
.start-overlay {
  position: absolute; inset: 0;
  z-index: 30;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.stage.started .start-overlay {
  display: none;
}

/* Dialog block stays hidden until the user clicks "Click to start", then
   slides in from the left while the 3D character animates from center to
   its right-half resting position. */
.dialog {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.stage.started .dialog {
  opacity: 1;
  transform: none;
}

.dialog {
  position: absolute;
  left: 40px;
  bottom: 60px;
  width: min(440px, 38vw);
  z-index: 10;
}
.dialog-prev {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  min-height: 0;
  pointer-events: none;
  /* fade the very top of the stack into the background */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 100%);
}
.dialog-prev:empty { margin: 0; }

.prev-msg {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -.005em;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transform-origin: left center;
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1),
    filter .7s cubic-bezier(.22,.61,.36,1),
    font-size .55s ease;
  will-change: opacity, transform, filter;
}
.prev-msg.you::before {
  content: "you · ";
  color: var(--muted);
  font-style: normal;
  letter-spacing: .02em;
}
.prev-msg.you { font-style: italic; }

/* Default for any chip beyond the visible depth tiers */
.dialog-prev .prev-msg {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-12px) scale(.96);
  font-size: 11px;
}
/* Depth tiers — :nth-last-child(1) is the most recent (closest, sharpest) */
.dialog-prev .prev-msg:nth-last-child(1) { opacity: .72; filter: blur(.5px); transform: none;                       font-size: 15px; }
.dialog-prev .prev-msg:nth-last-child(2) { opacity: .45; filter: blur(1.8px); transform: translateY(-2px) scale(.99); font-size: 13px; }
.dialog-prev .prev-msg:nth-last-child(3) { opacity: .26; filter: blur(3.2px); transform: translateY(-5px) scale(.98); font-size: 12px; }
.dialog-prev .prev-msg:nth-last-child(4) { opacity: .12; filter: blur(5px);   transform: translateY(-8px) scale(.97); font-size: 11px; }

/* Entry state: fresh chip rises from where the live line sits, then settles */
.dialog-prev .prev-msg.entering {
  opacity: 0;
  filter: blur(0);
  transform: translateY(18px) scale(1);
  font-size: 18px;
}

.dialog-text {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 400;
  margin-bottom: 28px;
  min-height: 3em;
}
.dialog-text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  margin-right: .26em;
}
.dialog-text .word.show { opacity: 1; transform: none; }
.dialog-text em { font-style: italic; color: var(--muted); }

.choices {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 380px;
}
.choices button {
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.choices button:hover { background: var(--ink); color: #fff; }
.choices button.secondary { border-color: var(--muted); color: var(--muted); }
.choices button.secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.form { display: grid; gap: 10px; max-width: 380px; }
.form input, .form textarea {
  font: inherit; font-size: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(15, 15, 20, 0.14);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
}
.form input::placeholder, .form textarea::placeholder { color: rgba(15,15,20,.38); }
.form textarea { min-height: 84px; resize: vertical; }
.form button {
  justify-self: start;
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); padding: 10px 22px; border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.form button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,15,20,.18); }
.form button[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.form .cf-status {
  font-size: 12px; margin: 0;
  color: var(--muted);
}
.form .cf-status.is-ok { color: #06893a; }
.form .cf-status.is-error { color: #c0392b; }

/* ===== Unified contact modal (used by every CTA + the Byte bot) ===== */
.contact-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.contact-modal.is-open { display: flex; }
.contact-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  animation: cmFade .2s ease-out;
}
@keyframes cmFade { from { opacity: 0 } to { opacity: 1 } }
.contact-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 36px 36px 30px;
  background: linear-gradient(160deg, #ffffff 0%, #f3f5fa 100%);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(8, 10, 14, 0.32), 0 2px 0 rgba(255,255,255,.6) inset;
  animation: cmIn .35s cubic-bezier(.16,.84,.34,1);
  color: var(--ink);
}
@keyframes cmIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.contact-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15,15,20,.06); color: var(--ink);
  border: none; border-radius: 999px; cursor: pointer;
  transition: background .15s;
}
.contact-close:hover { background: rgba(15,15,20,.14); }
.contact-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
  margin: 0 0 8px; color: var(--muted); font-weight: 600;
}
.contact-title {
  margin: 0; font-size: 28px; line-height: 1.18; font-weight: 600;
  letter-spacing: -0.015em;
}
.contact-title em {
  font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
  color: #0071e3;
}
.contact-sub { margin: 10px 0 22px; color: var(--muted); font-size: 14px; }
.contact-form { display: grid; gap: 14px; }
.cf-row {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.cf-field { display: grid; gap: 6px; }
.cf-field > span {
  font-size: 12px; font-weight: 600; color: var(--ink);
  letter-spacing: .01em;
}
.cf-field > span em { color: var(--muted); font-style: normal; font-weight: 400; margin-left: 4px; }
.cf-field input, .cf-field textarea, .cf-field select {
  font: inherit; font-size: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(15, 15, 20, 0.14);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.cf-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2358585f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
}
.cf-field textarea { resize: vertical; min-height: 96px; }
.cf-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 4px;
}
.contact-submit {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 22px;
  background: var(--ink); color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.contact-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,15,20,.22); }
.contact-submit:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
.cf-submit-arrow { transition: transform .2s ease; }
.contact-submit:hover .cf-submit-arrow { transform: translateX(3px); }
.contact-hint { font-size: 12px; color: var(--muted); }
.contact-hint a { color: var(--ink); text-decoration: underline; }
.contact-status {
  margin: 0; min-height: 18px;
  font-size: 13px; color: var(--muted);
}
.contact-status.is-ok    { color: #06893a; }
.contact-status.is-error { color: #c0392b; }
@media (max-width: 600px) {
  .contact-card { padding: 28px 22px 24px; border-radius: 18px; }
  .cf-row { grid-template-columns: 1fr; }
  .contact-title { font-size: 22px; }
  .cf-actions { flex-direction: column; align-items: flex-start; }
}

.sound {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 32px; height: 72px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: #fff; cursor: pointer;
  display: flex; flex-direction: column;
  padding: 6px 0; gap: 4px;
}
.sound .ico { flex: 1; display: grid; place-items: center; font-size: 13px; opacity: .25; transition: opacity .2s; }
body.sound-on .sound .ico.on { opacity: 1; }
body:not(.sound-on) .sound .ico.off { opacity: 1; }

.back {
  position: absolute; left: 32px; bottom: 32px; z-index: 40;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--ink); border: 1px solid var(--ink);
  cursor: pointer; font-size: 18px; line-height: 1;
}
.back:disabled { opacity: .25; cursor: default; }

/* Calling-Rob comedy mode: subtle dialog jitter while the skit plays.
   The "CALLING ROB" label itself is rendered directly into the CRT canvas. */
body.is-calling-rob .dialog { animation: cr-dialog-jitter .18s steps(2) infinite; }
@keyframes cr-dialog-jitter {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-0.6px, 0.4px); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-calling-rob .dialog { animation: none; }
}

.gear {
  position: absolute; right: 28px; bottom: 32px; z-index: 40;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--ink); border: 1px solid var(--ink);
  cursor: pointer; font-size: 16px; line-height: 1;
}

/* ask anything input */
.ask {
  margin-top: 14px;
  display: flex; gap: 6px;
  max-width: 380px;
}
.ask input {
  flex: 1; font: inherit; font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--ink); border-radius: 999px;
  background: #fff;
}
.ask input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
.ask button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer; font-size: 14px;
}

/* settings modal */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.4);
  display: grid; place-items: center;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 14px;
  padding: 26px 28px; width: min(460px, 92vw);
  max-height: 90vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.modal-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.modal-card .hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.modal-card .hint code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
/* The HTML [hidden] attribute is normally `display:none`, but `.modal-card
   label { display: block }` below is more specific and would otherwise
   re-show hidden fields. Restore [hidden] precedence inside the modal. */
.modal-card [hidden] { display: none !important; }
.modal-card label {
  display: block; font-size: 12px; color: var(--muted);
  margin-bottom: 12px;
}
.modal-card input, .modal-card select, .modal-card textarea {
  display: block; width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #ddd; border-radius: 8px;
  background: #fff;
}
.modal-card textarea { resize: vertical; font-size: 13px; line-height: 1.4; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;
}
.modal-actions button {
  font: inherit; font-size: 13px;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
}
.modal-actions button.ghost { background: #fff; color: var(--ink); }

.progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(0,0,0,.06); z-index: 30;
}

/* ============ scroll cue ============ */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  z-index: 20;
  animation: cueBob 2.4s ease-in-out infinite;
}
.scroll-cue .arrow { font-size: 16px; color: var(--ink); }
@keyframes cueBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ============ Apple-style sections ============ */
.hero-tile {
  position: relative;
  min-height: 92vh;
  padding: 100px 24px 60px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  overflow: hidden;
}
.hero-tile.dark { background: #1d1d1f; color: #f5f5f7; }
.hero-tile.light { background: #fbfbfd; color: var(--ink); }

.eyebrow {
  font-size: 13px;
  letter-spacing: .02em;
  margin: 0 0 10px;
  opacity: .85;
  font-weight: 500;
}
.eyebrow.light { color: rgba(255,255,255,.7); }
.eyebrow.ink { color: var(--ink); opacity: .7; }

.display {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 600;
  margin: 0 0 14px;
  max-width: 920px;
}
.display em { font-style: italic; font-weight: 500; }
.display.ink { color: var(--ink); }

.sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  font-weight: 400;
  margin: 0 0 26px;
  max-width: 640px;
  opacity: .9;
}
.sub.ink { color: var(--ink); opacity: .8; }

.cta-row {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 48px;
}
.cta-row.small { margin-bottom: 0; gap: 18px; }

.btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 400;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s, color .18s, opacity .18s;
  white-space: nowrap;
}
.btn.primary { background: #0071e3; color: #fff; }
.btn.primary:hover { background: #0077ed; }
.btn.primary.dark-btn { background: #1d1d1f; }
.btn.primary.dark-btn:hover { background: #2d2d2f; }
.btn.ghost { background: transparent; color: #2997ff; padding-left: 0; padding-right: 0; }
.btn.ghost.ink { color: #0071e3; }
.btn.ghost.light { color: #2997ff; }
.btn.ghost:hover { text-decoration: underline; }

/* hero browser mockup — a believable Chrome window */
.hero-art { margin-top: 36px; width: 100%; max-width: 880px; }

/* Extension section: pure white, seamless with the hero above */
#extension { background: #fff; }
#extension.hero-tile.split,
#marketing.hero-tile.split {
  /* Video/deck on the left, text on the right (mirrors the Solutions section). */
  flex-direction: row-reverse;
}
#extension .hero-video {
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.06);
}

/* ===== Golden-ratio split section (text ⟷ media) ===== */
.hero-tile.split {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: clamp(32px, 5vw, 80px);
  /* Section spans full viewport so the background paints edge-to-edge.
     Content is kept within a 1400px reading width via auto-gutter padding. */
  padding-top: 100px;
  padding-bottom: 80px;
  padding-left: max(clamp(24px, 6vw, 80px), calc((100% - 1400px) / 2));
  padding-right: max(clamp(24px, 6vw, 80px), calc((100% - 1400px) / 2));
}
.split-text {
  /* golden minor: 1 / (1 + 1.618) ≈ 38.2% */
  flex: 0 1 38.2%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.split-text .display { margin-bottom: 16px; max-width: none; }
.split-text .sub { margin-bottom: 28px; max-width: none; text-align: left; }
.split-text .cta-row { justify-content: flex-start; margin-bottom: 0; }

.split-media {
  /* golden major: 1.618 / (1 + 1.618) ≈ 61.8% */
  flex: 0 1 61.8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video {
  width: 100%;
  /* Cap so the Extension video well matches the Solutions deck width and
     both split sections read at the same golden-ratio scale. */
  max-width: 620px;
  height: auto;
  max-height: 70vh;
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06);
  background: #000;
  object-fit: cover;
  display: block;
}
/* Webp/img variant for sub-page heroes - letterbox so the full frame is
   visible (the source assets aren't 16:9 like the original mp4 was). */
.hero-video.is-img { object-fit: contain; }

/* Small Chrome mark above the title in the split layout */
.chrome-mark.sm {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.4));
}

@media (max-width: 900px) {
  .hero-tile.split {
    flex-direction: column;
    text-align: center;
    padding: 84px 18px 48px;
  }
  /* Override ID-scoped row-reverse rules so these sections also stack on mobile
     instead of being squeezed side-by-side. */
  #extension.hero-tile.split,
  #marketing.hero-tile.split { flex-direction: column; }
  /* Sections with inline flex-direction (e.g. row-reverse) must still stack on mobile. */
  .hero-tile.split[style*="row-reverse"],
  .hero-tile.split[style*="row"] { flex-direction: column !important; }
  .split-text { flex-basis: auto; align-items: center; }
  .split-text .sub { text-align: center; }
  .split-text .cta-row { justify-content: center; }
  .split-media { flex-basis: auto; width: 100%; }
  .hero-video { max-height: 50vh; }
}

/* Phones: tighten sub-page hero so the headline + video are both visible. */
@media (max-width: 640px) {
  .hero-tile.split { padding: 64px 16px 36px; }
  .hero-video { max-height: 44dvh; }
  .chrome-mark.sm { width: 52px; height: 52px; margin-bottom: 12px; }
}

/* solutions illustration */
.solutions-art {
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-top: 8px;
}

/* ===== Custom Solutions (industry showcase) ===== */
#solutions { background: #fbfbfd; }

.sol-pills {
  list-style: none; margin: 26px 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sol-pill {
  font: inherit;
  font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d2d2d7;
  background: #fff;
  color: #1d1d1f;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.sol-pill:hover { border-color: #1d1d1f; }
.sol-pill.is-active {
  background: #1d1d1f;
  color: #fff;
  border-color: #1d1d1f;
}

/* The deck: stacked cards, only active one visible */
.sol-deck {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Matches .hero-video max-width so both split sections feel the same size. */
  max-width: 560px;
  max-height: 70vh;
  margin: 0 auto;
  overflow: visible; /* allow tilted screenshot thumbs to peek out */
}

/* ===== Tilted screenshot thumbs behind each Solutions card ===== */
.sol-shots {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.sol-shots.is-active {
  opacity: 1;
  pointer-events: auto;
}
.sol-shot {
  position: absolute;
  width: 52%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
  padding: 8px;
  cursor: zoom-in;
  appearance: none;
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1), box-shadow .35s ease;
  will-change: transform;
  overflow: hidden;
}
.sol-shot--a { top: -6%; left: -9%; transform: rotate(-7deg); }
.sol-shot--b { bottom: -7%; right: -7%; transform: rotate(6deg); }
.sol-shot--c { bottom: -4%; left: -6%; transform: rotate(-4deg); }
.sol-shot:hover {
  transform: rotate(-1deg) scale(1.05) translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.05);
  z-index: 3;
}
.sol-shot--b:hover { transform: rotate(1deg) scale(1.05) translateY(-4px); }
.sol-shot--c:hover { transform: rotate(0deg) scale(1.05) translateY(-4px); }

/* Hover preview: full-card-sized panel that floats over the active card */
.sol-preview-pane {
  position: absolute;
  inset: 4% 4%;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  transform: scale(.94);
  transform-origin: center center;
  transition: opacity .22s ease, transform .35s cubic-bezier(.2,.9,.3,1.1);
  pointer-events: none;
  z-index: 9;
  overflow: hidden;
}
.sol-preview-pane.is-show { opacity: 1; transform: scale(1); }
.sol-preview-pane .ssh-chrome { padding: 4px 6px; }
.sol-preview-pane .ssh-chrome i { width: 10px; height: 10px; }
.sol-preview-pane .ssh-title { font-size: 12px; letter-spacing: .04em; }
.sol-preview-pane .ssh-body { padding: 18px 20px; gap: 12px; flex: 1; border-radius: 14px; }
.sol-preview-pane .ssh-bar { height: 12px; border-radius: 7px; }
.sol-preview-pane .ssh-dot { width: 14px; height: 14px; }
.sol-preview-pane .ssh-tile { height: 50%; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .sol-preview-pane { transition: opacity .15s ease; transform: none; }
  .sol-preview-pane.is-show { transform: none; }
}
.ssh-chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 4px;
}
.ssh-chrome i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e0e0e0; display: block;
}
.ssh-chrome i:nth-child(1) { background: #ff5f57; }
.ssh-chrome i:nth-child(2) { background: #febc2e; }
.ssh-chrome i:nth-child(3) { background: #28c840; }
.ssh-title {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a8a90;
  font-weight: 600;
}
.ssh-body {
  flex: 1;
  background: linear-gradient(180deg, #f6f8fb, #ecf0f5);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
/* Real-screenshot variant - fills the mock browser body with a single image
   (no fake rows/bars). Works in both the small thumb and the lightbox card
   because the lightbox simply clones the markup. */
.ssh-body--shot { padding: 0; overflow: hidden; }
.ssh-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
}
.ssh-row {
  display: flex; align-items: center; gap: 6px;
}
.ssh-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sol-from, #888);
  flex-shrink: 0;
}
.ssh-dot--alt { background: #ff3b30; }
.ssh-bar {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sol-from, #888), var(--sol-to, #555));
  opacity: .7;
  flex: 0 0 auto;
}
.ssh-tag {
  margin-left: auto;
  font-size: 8.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6c6c72;
  font-weight: 700;
}
.ssh-tag--alt { color: #c0392b; }
.ssh-tile {
  height: 36%;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--sol-from, #888), var(--sol-to, #555));
  opacity: .85;
}

/* Lightbox for expanded screenshots */
.sol-lightbox {
  position: fixed; inset: 0;
  background: rgba(15,15,20,.72);
  display: none;
  z-index: 9999;
  align-items: center; justify-content: center;
  padding: 4vw;
  cursor: zoom-out;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sol-lightbox.is-open { display: flex; animation: solLbFade .25s ease; }
.sol-lightbox-card {
  position: relative;
  max-width: 1100px; width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: default;
  animation: solLbIn .35s cubic-bezier(.2,.9,.3,1.1);
}
.sol-lightbox-card .ssh-body {
  padding: 24px 28px;
  gap: 14px;
  border-radius: 14px;
}
.sol-lightbox-card .ssh-bar { height: 12px; border-radius: 6px; }
.sol-lightbox-card .ssh-dot { width: 14px; height: 14px; }
.sol-lightbox-card .ssh-tag { font-size: 12px; }
.sol-lightbox-card .ssh-tile { height: 50%; border-radius: 10px; }
.sol-lightbox-card .ssh-title { font-size: 12px; }
.sol-lightbox-card .ssh-chrome i { width: 12px; height: 12px; }
.sol-lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.06);
  border: 0; color: #1d1d1f; font-size: 22px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.sol-lightbox-close:hover { background: rgba(0,0,0,.12); }
@keyframes solLbIn  { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes solLbFade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  .sol-shot { width: 60%; }
  .sol-shot--a { top: -4%; left: -6%; }
  .sol-shot--b { bottom: -5%; right: -4%; }
  .sol-shot--c { bottom: -3%; left: -3%; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-shot,
  .sol-lightbox.is-open,
  .sol-lightbox-card { animation: none !important; transition: none !important; }
}
.sol-card {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 36px 34px 34px;
  display: flex; flex-direction: column;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(155deg, var(--sol-from), var(--sol-to));
  box-shadow:
    0 30px 60px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.04);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1.1);
  pointer-events: none;
  overflow: hidden;
}
.sol-card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
}
.sol-card::after {
  /* subtle large background glyph */
  content: "";
  position: absolute;
  right: -60px; bottom: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.sol-card-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  margin-bottom: 24px;
  color: var(--sol-from);
  backdrop-filter: blur(6px);
}
.sol-card-icon svg { width: 44px; height: 44px; display: block; }

.sol-card-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 8px;
}
.sol-card-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.sol-card-sub {
  font-size: 15px; line-height: 1.45;
  opacity: .92;
  margin: 0 0 22px;
  max-width: 360px;
}
.sol-card-tags {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sol-card-tags li {
  font-size: 12px; font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.sol-card-metric {
  display: flex; align-items: flex-end; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.22);
}

/* Learn more link at the bottom of each Solutions/Marketing card */
.sol-card-more {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: inherit;
  text-decoration: none;
  opacity: .9;
  padding: 7px 12px 7px 0;
  border-radius: 999px;
  transition: opacity .2s ease, transform .25s cubic-bezier(.4,0,.2,1), padding .25s cubic-bezier(.4,0,.2,1);
}
.sol-card-more span { transition: transform .25s cubic-bezier(.4,0,.2,1); }
.sol-card-more:hover { opacity: 1; padding-right: 16px; }
.sol-card-more:hover span { transform: translateX(4px); }

/* ===== Subpage: Capabilities feature cards with embedded screenshot thumbs ===== */
.cap-section {
  padding: 100px 0 110px;
  background: #fbfbfd;
}
.cap-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
.cap-section-head .eyebrow { margin: 0 0 8px; }
.cap-section-head .display {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px;
}
.cap-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
  color: #1d1d1f;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.1), box-shadow .3s ease, border-color .2s ease;
}
.cap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}
.cap-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0;
}
.cap-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 2px 0 4px;
}
.cap-sub {
  font-size: 14.5px;
  line-height: 1.55;
  opacity: .72;
  margin: 0 0 6px;
}
.cap-tags {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cap-tags li {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  opacity: .82;
}
.cap-shot {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: zoom-in;
  appearance: none;
  text-align: left;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.1), box-shadow .25s ease;
  font: inherit;
  color: inherit;
}
.cap-shot:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 18px 38px rgba(0,0,0,.14);
}
@media (max-width: 720px) {
  .cap-grid { padding: 0 16px; gap: 16px; }
  .cap-card { padding: 22px; }
}

/* ===== Animated product preview inside each solution card ===== */
.sol-card-preview {
  margin-bottom: 18px;
  border-radius: 14px;
  padding: 10px 12px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}

/* Image/gif variant of the preview - fills the same slot as the SVG route
   animation but contains a flat asset. object-fit:cover keeps the aspect
   ratio nice; the fixed aspect-ratio keeps card heights consistent across
   the deck so the active card doesn't pop taller than its siblings. */
.scp--media {
  padding: 0;
  background: #000;
}
.scp--media .scp-bar {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.scp-media-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
}

/* ===== Client logo strip (sits just above the preview) ===== */
.sol-card-clients {
  margin-top: auto;
  margin-bottom: 10px;
  display: flex; align-items: center;
  gap: 10px;
  min-width: 0;
}
.scc-label {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  white-space: nowrap;
}
.scc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: nowrap;
  gap: 6px;
  min-width: 0; overflow: hidden;
}
.scc-logo {
  display: inline-flex; align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 0;
  min-width: 0;
}
.scc-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--sol-from, #333);
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.scc-mark img {
  width: 24px; height: 24px;
  object-fit: contain;
  display: block;
}
.scc-name { display: none; }
.scp-bar {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
.scp-bar span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.scp-bar i {
  font-style: normal;
  font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  margin-left: auto;
}

/* --- Route preview (Linen) --- */
.scp-map { width: 100%; height: 70px; display: block; }
.sol-card.is-active .scp--route .scp-route {
  stroke-dashoffset: 0;
  animation: scpDash 3.2s linear infinite;
}
.sol-card.is-active .scp--route .scp-truck {
  offset-path: path("M8 56 C 60 14, 100 62, 138 30 S 198 10, 212 22");
  offset-rotate: 0deg;
  animation: scpTruck 3.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes scpDash {
  to { stroke-dashoffset: -40; }
}
@keyframes scpTruck {
  0%   { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- Rows preview (Medical) --- */
.scp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scp-rows li {
  display: flex; align-items: center; gap: 8px;
  height: 18px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.10);
}
.scp-rows li b {
  width: 28px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.55);
}
.scp-rows li em {
  flex: 1; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.28);
}
.scp-ck {
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; line-height: 1;
  color: var(--sol-from, #0a7e2c);
  background: #fff;
  opacity: 0;
  transform: scale(.6);
}
.sol-card.is-active .scp-rows li:nth-child(1) .scp-ck { animation: scpCheck 3s ease-out infinite; animation-delay: .2s; }
.sol-card.is-active .scp-rows li:nth-child(2) .scp-ck { animation: scpCheck 3s ease-out infinite; animation-delay: .9s; }
.sol-card.is-active .scp-rows li:nth-child(3) .scp-ck { animation: scpCheck 3s ease-out infinite; animation-delay: 1.6s; }
@keyframes scpCheck {
  0%   { opacity: 0; transform: scale(.6); }
  20%  { opacity: 1; transform: scale(1.15); }
  35%  { transform: scale(1); }
  88%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* --- Donation preview (Non-Profits) --- */
.scp-donate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.scp-heart {
  font-size: 18px; line-height: 1;
  color: #fff;
  animation: scpPulse 1.4s ease-in-out infinite;
}
.scp-progress {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.25);
  overflow: hidden;
  position: relative;
}
.scp-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: #fff;
  border-radius: 999px;
}
.sol-card.is-active .scp-fill { animation: scpFill 3.4s ease-out infinite; }
.scp-counter {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: -.01em;
}
@keyframes scpPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes scpFill {
  0%   { width: 8%; }
  85%  { width: 92%; }
  100% { width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-card.is-active .scp-route,
  .sol-card.is-active .scp-truck,
  .sol-card.is-active .scp-rows .scp-ck,
  .sol-card.is-active .scp-fill,
  .scp-heart { animation: none !important; }
  .scp-rows .scp-ck { opacity: 1; transform: none; }
  .scp-fill { width: 65%; }
}

/* --- Marketing chart preview --- */
.scp-chart {
  position: relative;
  height: 76px;
}
.scp-bars {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  gap: 6px;
  padding: 0 2px;
}
.scp-bars span {
  flex: 1;
  background: rgba(255,255,255,.35);
  border-radius: 3px 3px 0 0;
  height: 0;
}
.sol-card.is-active .scp-bars span { animation: scpBarGrow 1.4s cubic-bezier(.2,.9,.3,1.1) forwards; }
.sol-card.is-active .scp-bars span:nth-child(1) { animation-delay: .05s; }
.sol-card.is-active .scp-bars span:nth-child(2) { animation-delay: .15s; }
.sol-card.is-active .scp-bars span:nth-child(3) { animation-delay: .25s; }
.sol-card.is-active .scp-bars span:nth-child(4) { animation-delay: .35s; }
.sol-card.is-active .scp-bars span:nth-child(5) { animation-delay: .45s; }
.sol-card.is-active .scp-bars span:nth-child(6) { animation-delay: .55s; }
.sol-card.is-active .scp-bars span:nth-child(7) { animation-delay: .65s; }
.scp-trend {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.scp-trend-line {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.sol-card.is-active .scp-trend-line { animation: scpTrendDraw 1.6s ease-out .4s forwards; }
@keyframes scpBarGrow {
  from { height: 0; }
  to   { height: var(--h, 50%); }
}
@keyframes scpTrendDraw {
  to { stroke-dashoffset: 0; }
}

/* --- Google Ad Grant preview --- */
.scp-grant { display: grid; gap: 8px; padding-top: 2px; }
.scp-grant-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px;
}
.scp-grant-label { opacity: .8; letter-spacing: .02em; }
.scp-grant-val {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-weight: 700; font-size: 15px;
  letter-spacing: -.01em;
}
.scp-grant-row--sub {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 4px 10px;
  font-size: 11px;
  opacity: .9;
}
.scp-grant-row--sub b {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scp-fill--grant {
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.85));
}
.sol-card.is-active .scp-fill--grant { animation: scpGrantFill 3.2s ease-out infinite; }
@keyframes scpGrantFill {
  0%   { width: 12%; }
  80%  { width: 96%; }
  100% { width: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-card.is-active .scp-bars span,
  .sol-card.is-active .scp-trend-line,
  .sol-card.is-active .scp-fill--grant { animation: none !important; }
  .scp-bars span { height: var(--h, 50%); }
  .scp-trend-line { stroke-dashoffset: 0; }
  .scp-fill--grant { width: 80%; }
}
.sm-num {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(42px, 5vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.sm-num small {
  font-size: .55em; font-weight: 500; margin-left: 2px; opacity: .9;
}
.sm-label {
  font-size: 12px; line-height: 1.35;
  opacity: .88;
  padding-bottom: 4px;
}

@media (max-width: 900px) {
  /* Tablets: deck is taller so cards aren't clipped. */
  .sol-deck { max-width: 100%; aspect-ratio: auto; min-height: 720px; }
  .sol-pills { justify-content: center; }
}

/* Phones: keep the pill tabs + card-swap UX, but let the deck grow to
   the active card's content so nothing is clipped. Inactive cards stay
   absolutely positioned (and hidden) so only one card takes up space. */
@media (max-width: 640px) {
  .sol-deck {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    max-height: none;
    max-width: 100%;
    overflow: visible;
  }
  .sol-card { padding: 28px 22px; }
  /* Active card flows in-doc and sizes the deck. */
  .sol-card.is-active {
    position: relative;
    inset: auto;
  }
  /* Inactive cards stay overlaid (no document space). */
  .sol-card:not(.is-active) {
    position: absolute;
    inset: 0;
  }
  .sol-card-icon { width: 56px; height: 56px; margin-bottom: 16px; }
  .sol-card-icon svg { width: 32px; height: 32px; }
  .sol-card-title { font-size: 24px; }
  .sol-card-sub { margin-bottom: 16px; }
  .sol-card-tags { margin-bottom: 18px; }
  .sm-num { font-size: 38px; }
  .sol-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
  }
  /* Floating screenshot thumbs assume a fixed-size deck; hide on phones. */
  .sol-shots { display: none; }
}

/* ===== Why us — golden-ratio split (61.8 / 38.2) ===== */
.why-us {
  background: #fff;
  padding: 96px clamp(20px, 5vw, 64px);
}
.why-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 16px;
}
.why-card {
  border-radius: 28px;
  padding: 56px 48px;
  display: flex; flex-direction: column;
  min-height: 460px;
  position: relative;
  overflow: hidden;
}
.why-card--lead {
  color: #f5f5f7;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(41,151,255,.22), transparent 55%),
    linear-gradient(155deg, #1d1d1f, #2c2c2e 60%, #0a0a0b);
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
}
.why-card--lead::after {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(41,151,255,.18), transparent 60%);
  pointer-events: none;
}
/* Subtle dotted texture on dark lead card for depth */
.why-card--lead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.why-card--lead > * { position: relative; z-index: 1; }

/* Live "Booking" status pill on lead card */
.why-status {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.why-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52,199,89,.22);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52,199,89,.22); }
  50%      { box-shadow: 0 0 0 6px rgba(52,199,89,.10); }
}
.why-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 14px 0 16px;
}
.why-sub {
  font-size: 17px; line-height: 1.5;
  max-width: 520px;
  margin: 0 0 36px;
  opacity: .82;
}
.why-stats {
  list-style: none; margin: auto 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.why-stats-head {
  display: flex; align-items: center; gap: 14px;
  margin: auto 0 18px;
}
.why-stats-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
.why-stats-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
}
.why-stats li { display: flex; flex-direction: column; gap: 4px; }
.why-num {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.why-num small { font-size: .45em; font-weight: 500; margin-left: 2px; opacity: .85; }
.why-lbl {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  opacity: .65;
}

.why-card--quote {
  background: #fafafa;
  border: 1px solid #ebebef;
  color: var(--ink);
}
.why-quote-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.why-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(0,113,227,.08);
  border: 1px solid rgba(0,113,227,.18);
  color: #0058b3;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
.why-verified svg { flex-shrink: 0; }
.why-stars {
  font-size: 14px;
  letter-spacing: .12em;
  color: #f5a623;
  text-shadow: 0 1px 0 rgba(0,0,0,.04);
  margin-bottom: 8px;
}
.why-quote {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 8px 0 28px;
  color: #1d1d1f;
}
.why-attrib {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: auto;
  padding-top: 18px;
  border-top: 1px solid #ebebef;
}
.why-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5fa8ff, #0046b8 80%);
  color: #fff;
  font-weight: 600; font-size: 17px;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,70,184,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.why-attrib strong { display: block; font-size: 14px; color: #1d1d1f; }
.why-attrib span { display: block; font-size: 12px; color: #6e6e73; }
.why-cta { margin-top: 28px; align-self: flex-start; padding-left: 0; }

/* ===== Story — golden-ratio editorial split ===== */
.story-split {
  background: #fbfbfd;
  padding: 120px clamp(20px, 5vw, 64px);
}
.story-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.story-copy {
  display: flex; flex-direction: column;
  padding: 24px 12px 24px 0;
}
.story-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -.028em;
  font-weight: 600;
  margin: 14px 0 22px;
  color: var(--ink);
}
.muted-ink { color: #86868b; }
.story-lede {
  font-size: 20px; line-height: 1.5;
  max-width: 600px; margin: 0 0 40px;
  color: #1d1d1f; opacity: .82;
}
.story-kpis {
  list-style: none; margin: 0 0 36px; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 40px;
  border-top: 1px solid #ebebef;
  border-bottom: 1px solid #ebebef;
  padding: 24px 0;
}
.story-kpis li { display: flex; flex-direction: column; gap: 6px; }
.sk-num {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.sk-num small { font-size: .5em; font-weight: 500; margin-left: 2px; color: #6e6e73; }
.sk-lbl { font-size: 13px; color: #6e6e73; letter-spacing: .01em; }
.story-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Right manifesto card */
.story-card {
  position: relative;
  border-radius: 28px;
  padding: 48px 40px 44px;
  color: #f5f5f7;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(41,151,255,.22), transparent 55%),
    linear-gradient(155deg, #1d1d1f, #2c2c2e 60%, #0a0a0b);
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.story-card::after {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(41,151,255,.16), transparent 60%);
  pointer-events: none;
}
.story-card-mark {
  position: absolute;
  top: 8px; left: 28px;
  font-family: "SF Pro Display", Georgia, serif;
  font-size: 160px; line-height: 1;
  color: rgba(255,255,255,.08);
  pointer-events: none;
  user-select: none;
}
.story-card-eyebrow {
  position: relative;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 14px;
}
.story-card-title {
  position: relative;
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0 0 28px;
}
.story-principles {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 18px;
  margin-top: auto;
}
.story-principles li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.story-principles li:first-child { padding-top: 0; border-top: 0; }
.sp-num {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  padding-top: 2px;
}
.story-principles strong {
  display: block;
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: -.005em;
  color: #fff;
  margin-bottom: 2px;
}
.story-principles span {
  font-size: 14px; line-height: 1.5;
  color: rgba(245,245,247,.78);
}
/* Light-card override (used on subpages inside .why-card--quote) */
.why-card--quote .story-principles { margin-top: 4px; }
.why-card--quote .story-principles li { border-top-color: rgba(0,0,0,.08); }
.why-card--quote .story-principles strong { color: var(--ink); }
.why-card--quote .story-principles span { color: #1d1d1f; opacity: .72; }
.why-card--quote .sp-num { color: rgba(0,0,0,.42); }
.why-card--quote .story-principles li:last-child {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 18px;
}
.story-card-foot {
  position: relative;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.scf-mark {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.scf-mark sup { font-size: .65em; opacity: .7; margin-left: 1px; }
.scf-link {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s ease, color .2s ease;
}
.scf-link:hover { gap: 10px; color: #6ab1ff; }
.scf-link span { transition: transform .2s ease; }
.scf-link:hover span { transform: translateX(2px); }

/* ===== How we work — golden-ratio process split ===== */
.process-split {
  background: #fff;
  padding: 120px clamp(20px, 5vw, 64px);
}
.process-grid-2 {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.process-copy {
  display: flex; flex-direction: column;
  padding: 24px 12px 24px 0;
}
.process-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.04;
  margin: 14px 0 22px;
  color: var(--ink);
}
.process-title em {
  font-style: italic;
  font-weight: 500;
  color: #0071e3;
}
.process-lede {
  font-size: 20px; line-height: 1.5;
  max-width: 600px; margin: 0 0 36px;
  color: #1d1d1f; opacity: .82;
}
.process-bullets {
  list-style: none; padding: 0;
  margin: 0 0 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.process-bullets li {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 12px; align-items: start;
  font-size: 15px; line-height: 1.5;
  color: #1d1d1f;
}
.pb-dot {
  width: 10px; height: 10px; margin-top: 7px;
  border-radius: 50%;
  background: #0071e3;
  box-shadow: 0 0 0 4px rgba(0,113,227,.14);
}
.process-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Right rail — vertical timeline card */
.process-rail {
  position: relative;
  border-radius: 28px;
  padding: 36px 32px 28px;
  background:
    linear-gradient(180deg, #ffffff, #f5f5f7);
  border: 1px solid #ebebef;
  box-shadow: 0 30px 60px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  display: flex; flex-direction: column;
}
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin: 0 0 22px;
}
.rail-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: #0071e3;
  margin: 0;
}
.rail-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(52,199,89,.10);
  border: 1px solid rgba(52,199,89,.28);
  color: #0a7e2c;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.rail-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52,199,89,.22);
  animation: pulseDot 2.2s ease-in-out infinite;
}
.rail-steps {
  list-style: none; padding: 0; margin: 0 0 26px;
  position: relative;
}
.rail-steps::before {
  content: "";
  position: absolute;
  left: 22px; top: 22px; bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, #d2d2d7, #d2d2d7 60%, transparent);
}
.rail-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 18px 0;
}
.rail-step:first-child { padding-top: 0; }
.rail-step:last-child { padding-bottom: 0; }
.rs-num {
  position: relative;
  z-index: 1;
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--rs-accent, #1d1d1f);
  color: #fff;
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: -.01em;
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--rs-accent, #1d1d1f) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.rs-headline {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 6px;
}
.rs-body h4 {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 18px; font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.rs-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rs-accent, #0071e3) 10%, transparent);
  color: var(--rs-accent, #0071e3);
  border: 1px solid color-mix(in srgb, var(--rs-accent, #0071e3) 24%, transparent);
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rs-body p {
  font-size: 14px; line-height: 1.5;
  color: #6e6e73; margin: 0;
}
.rail-foot {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid #ebebef;
  font-size: 13px;
  color: #6e6e73;
  letter-spacing: .01em;
}
.rail-foot strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card { padding: 40px 28px; min-height: auto; }
  .why-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .story-grid, .process-grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .story-copy, .process-copy { padding: 0; }
  .story-card, .process-rail { padding: 36px 28px; }
  .story-kpis { gap: 24px; }
}

/* ============ ABOUT US — editorial team ============ */
.about {
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
  padding: 140px clamp(20px, 5vw, 64px);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Golden-ratio header: copy left (1.618fr), stats right (1fr) */
.about-head-grid {
  max-width: 1320px;
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid #ebebef;
}
.about-head-copy { max-width: 720px; }
.about-title {
  margin: 12px 0 18px;
  font-family: "SF Pro Display", -apple-system, system-ui, sans-serif;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.04;
  color: var(--ink);
}
.about-title .muted-ink { color: #86868b; }
.about-sub {
  margin: 0;
  max-width: 620px;
  color: #515154;
  font-size: 19px;
  line-height: 1.55;
}
.about-head-stats ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.about-head-stats li {
  display: flex; flex-direction: column; gap: 6px;
}
.ahs-num {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink); line-height: 1;
}
.ahs-num small { font-size: .42em; font-weight: 500; margin-left: 2px; color: #6e6e73; }
.ahs-lbl { font-size: 13px; color: #6e6e73; letter-spacing: .01em; }

/* Editorial team grid — full-bleed portrait cards */
.team-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1320px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.team-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #1d1d1f;
  aspect-ratio: 4 / 5.6;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 22px 50px -26px rgba(0,0,0,.32);
  transform-style: preserve-3d;
  transition:
    transform .5s cubic-bezier(.2,.9,.3,1.1),
    box-shadow .5s ease;
  will-change: transform;
  /* Scroll-reveal initial state — JS removes .is-pre once visible */
  opacity: 1;
}
.team-card.is-pre {
  opacity: 0;
  transform: translateY(28px);
}
.team-card.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.9,.3,1.1),
    box-shadow .5s ease;
}
.team-card:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 44px 90px -28px rgba(0,0,0,.5);
}
.team-photo {
  position: absolute; inset: 0;
  margin: 0; padding: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--tc-from, #1e8aff) 30%, transparent), transparent 55%),
    linear-gradient(160deg, var(--tc-from, #1e8aff), var(--tc-to, #0046b8));
}
.team-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 1.1s cubic-bezier(.2,.9,.3,1.1),
    filter .7s ease;
  filter: saturate(.55) contrast(1.05) brightness(.92);
}
.team-card:hover .team-photo img {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.05) brightness(1);
}
/* Bottom gradient scrim for legible text overlay */
.team-photo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(180deg,
    rgba(10,10,11,0) 0%,
    rgba(10,10,11,.15) 35%,
    rgba(10,10,11,.78) 78%,
    rgba(10,10,11,.92) 100%);
  pointer-events: none;
}
/* Top-right accent halo */
.team-photo::before {
  content: "";
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--tc-from, #1e8aff) 55%, transparent), transparent 60%);
  mix-blend-mode: screen;
  opacity: .65;
  pointer-events: none;
}
/* Initial mark in top-left */
.team-mark {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: -.01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .92;
  transition: opacity .35s ease, transform .45s ease;
}
.team-card:hover .team-mark { opacity: 1; transform: scale(1.04); }

/* Meta overlay at bottom */
.team-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 26px 26px 28px;
  color: #fff;
}
.team-role {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tc-from, #6ab1ff) 65%, #ffffff);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.team-name {
  position: relative;
  margin: 0 0 4px;
  padding-bottom: 14px;
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.team-name::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tc-from, #6ab1ff) 80%, #ffffff);
  opacity: .92;
  transition: width .55s cubic-bezier(.2,.9,.3,1.1);
}
.team-card:hover .team-name::after { width: 84px; }
.team-bio {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .55s ease, opacity .45s ease, transform .45s ease;
}
.team-card:hover .team-bio,
.team-card:focus-within .team-bio {
  max-height: 180px;
  opacity: 1;
  transform: none;
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .about-head-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 560px) {
  .about { padding: 90px 18px; }
  .team-grid { grid-template-columns: 1fr; max-width: 420px; gap: 18px; }
  .about-head-stats ul { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  /* Always show bio on touch — no hover available */
  .team-bio { max-height: 200px; opacity: 1; transform: none; }
}
/* Touch / no-hover devices: always reveal the bio so info isn't hidden */
@media (hover: none) {
  .team-bio { max-height: 200px; opacity: 1; transform: none; }
}

/* newsroom strip — sits between Team and the footer on the main page */
.news-strip { padding: 56px 24px 24px; background: #fff; }
.news-strip-inner {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px;
  padding: 28px 28px;
  background: linear-gradient(135deg, #0f0f12 0%, #1a1a22 100%);
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(15,15,20,.18);
}
.news-strip-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
  margin: 0 0 8px; color: rgba(255,255,255,.62); font-weight: 600;
}
.news-strip h2 {
  margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; color: #fff;
  letter-spacing: -0.01em;
}
.news-strip h2 em {
  font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
  color: #cfe7ff;
}
.news-strip-sub { margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 14px; max-width: 56ch; }
.news-strip-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: #fff; color: #0f0f12; text-decoration: none;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-strip-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.news-strip-cta span { transition: transform .25s ease; }
.news-strip-cta:hover span { transform: translateX(3px); }
@media (max-width: 720px) {
  .news-strip-inner { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
  .news-strip h2 { font-size: 20px; }
}

/* subtle support strip — sits between newsroom strip and footer */
.support-strip { padding: 0 24px 32px; background: #fff; }
.support-strip-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 20px;
  border: 1px solid #e5e5ea;
  border-radius: 14px;
  background: #fafafc;
}
.support-strip-copy { min-width: 0; }
.support-strip-eyebrow {
  display: inline-block;
  text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px;
  color: #86868b; font-weight: 600; margin-bottom: 2px;
}
.support-strip-line { margin: 0; color: #3a3a3f; font-size: 13.5px; line-height: 1.45; }
.support-strip-cta {
  appearance: none; border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f;
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.support-strip-cta:hover { border-color: #0071e3; color: #0071e3; transform: translateY(-1px); }
.support-strip-cta span { transition: transform .15s ease; }
.support-strip-cta:hover span { transform: translateX(2px); }
@media (max-width: 640px) {
  .support-strip-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .support-strip-cta { align-self: stretch; justify-content: center; }
}

/* footer */
.footer { background: #f5f5f7; padding: 40px 24px 24px; color: #6e6e73; font-size: 12px; line-height: 1.5; }
.footer-inner { max-width: 980px; margin: 0 auto; }
.footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 28px; border-bottom: 1px solid #d2d2d7; }
.footer h4 { color: #1d1d1f; font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.footer a { display: block; color: #6e6e73; text-decoration: none; padding: 3px 0; }
.footer a:hover { text-decoration: underline; }
.footer .legal { margin: 18px 0 0; }
.footer .legal a { display: inline; color: inherit; }
.footer-social { display: flex; gap: 18px; margin: 22px 0 0; flex-wrap: wrap; justify-content: center; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; color: #8e8e93; background: none; border: 0; transition: color .15s ease, transform .15s ease; }
.footer-social-link svg { width: 100%; height: 100%; display: block; }
.footer-social-link:hover { color: #1d1d1f; text-decoration: none; transform: translateY(-1px); }
.footer-social-link:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 3px; border-radius: 4px; }

/* LinkedIn badge on team cards (top-right, mirrors .team-mark) */
.team-social {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 3;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .92;
  transition: background .25s ease, color .25s ease, transform .35s ease, opacity .25s ease;
}
.team-social svg { width: 18px; height: 18px; display: block; }
.team-social:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; opacity: 1; transform: scale(1.06); text-decoration: none; }
.team-social:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 768px) {
  .topbar { padding: 10px 16px; }
  .hero-tile { padding: 84px 18px 40px; min-height: auto; }
  .why-us, .story-split, .process-split { padding: 64px 18px; }
  .why-card { padding: 32px 22px; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .cta-row { gap: 16px; }
}
.progress-bar { height: 100%; width: 0; background: var(--ink); transition: width .5s ease; }

/* ============ MOBILE / TOUCH ============
   Strategy:
   - On touch devices, hide the custom cursor dot (it can't follow a finger).
   - On portrait phones, move the dialog to the TOP of the screen and let the
     3D character sit below — otherwise the model and the text overlap.
   - Bump input font-size to 16px so iOS Safari doesn't auto-zoom on focus.
   - Respect safe-area insets so the floating buttons clear notches/home bar.
*/
@media (max-width: 768px) {
  .topbar {
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    /* Softer fade so the character's head is never clipped under the bar. */
    background: linear-gradient(180deg, rgba(255,255,255,.92) 30%, rgba(255,255,255,0) 100%);
  }
  .brand { font-size: 16px; }
  .nav { display: none; }
  .cta { font-size: 12px; padding: 4px 10px; border: 1px solid var(--ink); border-radius: 999px; }

  /* Dialog pinned to the BOTTOM on phones (standard chat-UI pattern). On
     mobile we deliberately make the panel NEARLY TRANSPARENT so Byte stays
     visible behind the text — legibility comes from a heavy text-shadow
     halo + slight backdrop blur, not from a solid card. */
  .dialog {
    left: 0;
    right: 0;
    width: auto;
    bottom: 0;
    top: auto;
    padding: 14px 16px max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 35%, rgba(255,255,255,.34) 100%);
    backdrop-filter: blur(4px) saturate(115%);
    -webkit-backdrop-filter: blur(4px) saturate(115%);
    border-top: 1px solid rgba(0,0,0,.05);
    max-height: 50dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The bot canvas shrinks from the bottom to match the dialog's live
     height (see ResizeObserver in script.js). This keeps Byte fully visible
     above the chat regardless of how many messages accumulate. */
  #scene {
    inset: 0 0 var(--dialog-h, 0px) 0;
  }
  /* Boost contrast of every text element inside the translucent dialog so
     it stays crisp against the live 3D background. */
  .dialog,
  .dialog .dialog-text,
  .dialog .dialog-prev,
  .dialog .choices button {
    text-shadow:
      0 1px 0 rgba(255,255,255,.9),
      0 0 6px rgba(255,255,255,.85),
      0 0 14px rgba(255,255,255,.7);
  }
  .dialog .dialog-text { color: #0a0a0a; font-weight: 600; }
  .dialog .dialog-prev .prev-msg { color: #1d1d1f; }
  .dialog .choices button {
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.18);
    color: #0a0a0a;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* "Contact us" et al. ship as .secondary which sets color to var(--muted)
     - barely legible on the now-translucent pill. Force dark ink on mobile. */
  .dialog .choices button.secondary {
    color: #1d1d1f;
    border-color: rgba(0,0,0,.28);
  }
  .dialog .ask input {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.18);
  }
  /* Scroll cue overlaps dialog on phones - hide it. */
  .scroll-cue { display: none; }
  .dialog-prev { font-size: 11px; margin-bottom: 6px; }
  .dialog-text {
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 14px;
    min-height: 0;
  }
  .choices { max-width: none; gap: 6px; }
  .choices button { font-size: 13px; padding: 8px 14px; }

  /* iOS Safari zooms any input < 16px on focus. Use 16px to prevent that. */
  .ask {
    max-width: none;
    margin-top: 12px;
    gap: 8px;
  }
  .ask input { font-size: 16px; padding: 11px 16px; }
  .ask button { width: 42px; height: 42px; font-size: 16px; flex-shrink: 0; }
  .form { max-width: none; }
  .form input, .form textarea { font-size: 16px; padding: 12px 14px; }
  .form button { padding: 10px 20px; font-size: 14px; }

  /* Floating controls stack in the TOP-RIGHT corner where they don't fight
     with the dialog (bottom) or the brand mark (top-left). */
  .sound, .gear, .back {
    position: absolute;
    z-index: 40;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid; place-items: center;
    padding: 0;
    font-size: 15px; line-height: 1;
    color: var(--ink);
    transform: none;
  }
  .sound {
    top: calc(max(10px, env(safe-area-inset-top)) + 52px);
    right: 16px;
    left: auto; bottom: auto;
    flex-direction: row; gap: 0;
  }
  .sound .ico { font-size: 14px; }
  body.sound-on .sound .ico.off,
  body:not(.sound-on) .sound .ico.on { display: none; }

  .gear {
    top: calc(max(10px, env(safe-area-inset-top)) + 100px);
    right: 16px;
    left: auto; bottom: auto;
  }
  .back {
    top: calc(max(10px, env(safe-area-inset-top)) + 52px);
    left: 16px;
    right: auto; bottom: auto;
  }
  .back:disabled { display: none; }

  .loader { right: 16px; top: auto; bottom: 50%; transform: none; }

  .modal-card { padding: 20px; max-height: calc(100dvh - 40px); }
  .modal-card h2 { font-size: 18px; }
}

/* Tiny phones: pull the dialog tighter still. */
@media (max-width: 380px) {
  .dialog-text { font-size: 17px; margin-bottom: 10px; }
  .topbar { padding: 8px 12px; }
  .brand { font-size: 15px; }
}

/* Short phones (iPhone SE class) - give bot more room. */
@media (max-height: 700px) and (orientation: portrait) {
  .dialog { max-height: 42dvh; padding-top: 14px; }
  .dialog-text { font-size: 17px; margin-bottom: 10px; }
}

/* Landscape phones (short height): keep dialog at the bottom-left like
   desktop but smaller, and shrink the topbar so it doesn't eat the view. */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { padding: 6px 16px; }
  .brand { font-size: 14px; }
  .dialog {
    left: 16px; right: auto; width: min(340px, 50vw);
    top: auto; bottom: 12px;
    background: none; padding-top: 0;
  }
  .dialog-text { font-size: 17px; margin-bottom: 8px; min-height: 0; }
  .sound, .gear, .back {
    width: 36px; height: 36px;
  }
  .sound { top: 12px; right: 12px; }
  .gear { top: 12px; right: 56px; }
  .back { top: 12px; left: 12px; }
}

/* ===== Rotating headline word (Solutions H1) ===== */
.rotate-word {
  display: inline-block;
  position: relative;
  /* Width is pinned in JS to the widest word, so the rest of the line
     never reflows when the word swaps. */
  vertical-align: baseline;
  text-align: left;
  /* Keep the line box the same height as the surrounding H1. */
  line-height: inherit;
}
.rotate-word .rw-cur {
  display: inline-block;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  /* Same font-size + line-height as the surrounding H1 so the line never grows. */
  font-size: 1em;
  line-height: inherit;
  letter-spacing: 0;
  background: linear-gradient(120deg, #1d1d1f 0%, #4a4a52 60%, #1d1d1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity .22s ease;
  will-change: opacity;
}
.rotate-word .rw-cur.rw-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rotate-word .rw-cur,
  .rotate-word .rw-cur.rw-out { transition: none; opacity: 1; }
}

/* ===== NEWSROOM ===== */
.news-page { background: #fbfbfd; }

/* Hero */
.news-hero {
  padding: clamp(110px, 14vw, 170px) clamp(20px, 5vw, 64px) 60px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(0,113,227,.10), transparent 55%),
    radial-gradient(80% 60% at 100% 0%, rgba(255,55,95,.08), transparent 60%),
    #fbfbfd;
  border-bottom: 1px solid #ececef;
}
.news-hero-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
.news-hero h1 {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -.028em;
  font-weight: 600;
  margin: 12px 0 8px;
  color: var(--ink);
  max-width: 1000px;
}
.news-hero p.sub {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: #1d1d1f;
  opacity: .72;
  max-width: 720px;
  margin: 0;
}

/* Featured */
.news-featured {
  padding: 70px clamp(20px, 5vw, 64px) 30px;
}
.news-featured-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: stretch;
}
.news-featured-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(155deg, #1d1d1f, #2c2c2e 60%, #0a0a0b);
  color: #f5f5f7;
  padding: 44px 40px 40px;
  min-height: 380px;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 30px 60px rgba(0,0,0,.18);
}
.news-featured-card::after {
  content: "";
  position: absolute;
  right: -140px; top: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(41,151,255,.22), transparent 60%);
  pointer-events: none;
}
.news-featured-card:hover { transform: translateY(-3px); box-shadow: 0 36px 70px rgba(0,0,0,.24); }
.news-featured-eyebrow {
  position: relative;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 18px;
}
.news-featured-title {
  position: relative;
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.15;
  margin: 0 0 16px;
}
.news-featured-excerpt {
  position: relative;
  font-size: 16px; line-height: 1.6;
  color: rgba(245,245,247,.82);
  margin: 0 0 28px;
  max-width: 640px;
}
.news-featured-meta {
  position: relative;
  margin-top: auto;
  display: flex; gap: 14px; align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.62);
}
.news-featured-meta strong { color: #fff; font-weight: 500; }

.news-featured-side {
  display: flex; flex-direction: column; gap: 16px;
}
.news-side-card {
  border: 1px solid #ececef;
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-side-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0,0,0,.06); border-color: #dcdce0; }
.news-side-meta {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #86868b; margin: 0 0 8px;
}
.news-side-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 17px; line-height: 1.3; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
  margin: 0;
}

/* Filter bar */
.news-controls {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251,251,253,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #ececef;
  padding: 14px clamp(20px, 5vw, 64px);
}
.news-controls-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
}
.news-filters {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.news-filter {
  appearance: none; border: 1px solid #d8d8dc; background: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.news-filter:hover { border-color: #b8b8bd; }
.news-filter.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.news-search {
  margin-left: auto;
  position: relative;
}
.news-search input {
  border: 1px solid #d8d8dc;
  background: #fff;
  border-radius: 999px;
  padding: 9px 16px 9px 38px;
  font-size: 14px;
  width: 240px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.news-search input:focus { border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.news-search::before {
  content: ""; position: absolute; left: 14px; top: 50%;
  width: 14px; height: 14px; transform: translateY(-50%);
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}

/* Grid */
.news-section { padding: 50px clamp(20px, 5vw, 64px) 90px; }
.news-section-head {
  max-width: 1240px; margin: 0 auto 28px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.news-section-head h2 {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 600;
  letter-spacing: -.014em; color: var(--ink); margin: 0;
}
.news-section-head .news-count { font-size: 13px; color: #86868b; }
.news-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
}
.news-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 22px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(0,0,0,.08);
  border-color: #dcdce0;
}
.news-card-link {
  all: unset;
  display: flex; flex-direction: column;
  cursor: pointer; height: 100%;
}
.news-card-link:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; border-radius: 22px; }
.news-card-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, var(--n-from, #5ac8fa), var(--n-to, #0040a0));
  overflow: hidden;
}
.news-card-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
  mix-blend-mode: overlay;
}
.news-card-art::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,.28), transparent 60%);
}
.news-card-cat {
  position: absolute; left: 14px; top: 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 1;
}
.news-card-body {
  display: flex; flex-direction: column;
  padding: 20px 22px 22px;
  flex: 1;
}
.news-card-meta {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #86868b; margin-bottom: 10px;
}
.news-card-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 19px; line-height: 1.28; font-weight: 600;
  letter-spacing: -.012em; color: var(--ink);
  margin: 0 0 10px;
}
.news-card-excerpt {
  font-size: 14.5px; line-height: 1.55;
  color: #1d1d1f; opacity: .72;
  margin: 0 0 18px;
}
.news-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  color: #6e6e73;
}
.news-card-author { font-weight: 500; color: #1d1d1f; }
.news-card-arrow {
  font-size: 18px; transition: transform .25s ease;
}
.news-card-link:hover .news-card-arrow { transform: translateX(3px); }
.news-card[hidden] { display: none !important; }

/* Around the web */
.news-web {
  background: #fff;
  border-top: 1px solid #ececef;
  border-bottom: 1px solid #ececef;
  padding: 70px clamp(20px, 5vw, 64px);
}
.news-web-inner { max-width: 1240px; margin: 0 auto; }
.news-web-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 26px;
}
.news-web-head h2 {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 600;
  letter-spacing: -.014em; color: var(--ink); margin: 0;
}
.news-web-head p { font-size: 13.5px; color: #86868b; margin: 0; }
.news-web-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.news-web-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 20px;
  border: 1px solid #ececef;
  background: #fbfbfd;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  min-height: 160px;
}
.news-web-card:hover {
  transform: translateY(-2px);
  border-color: #dcdce0;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0,0,0,.05);
}
.news-web-source {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: #6e6e73;
}
.news-web-source .nw-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nw-color, #0071e3);
}
.news-web-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.35; font-weight: 600;
  letter-spacing: -.008em; color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-web-date {
  margin-top: auto;
  font-size: 12.5px; color: #86868b;
}
.news-web-status {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px; color: #86868b;
  padding: 14px;
}
.news-web-skeleton {
  background: linear-gradient(110deg, #f3f3f6 8%, #ebebef 18%, #f3f3f6 33%);
  background-size: 200% 100%;
  animation: nwShimmer 1.4s linear infinite;
  border-radius: 18px;
  min-height: 160px;
}
@keyframes nwShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Newsletter signup */
.news-subscribe {
  padding: 90px clamp(20px, 5vw, 64px) 110px;
}
.news-subscribe-card {
  max-width: 980px; margin: 0 auto;
  background: linear-gradient(135deg, #f5f5f7, #fff);
  border: 1px solid #ececef;
  border-radius: 28px;
  padding: 56px clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.06);
}
.news-subscribe-card h2 {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(26px, 2.8vw, 38px); font-weight: 600;
  letter-spacing: -.018em; color: var(--ink);
  margin: 0 0 10px; line-height: 1.15;
}
.news-subscribe-card p {
  font-size: 15.5px; line-height: 1.55;
  color: #1d1d1f; opacity: .72; margin: 0;
}
.news-subscribe-form {
  display: flex; flex-direction: column; gap: 10px;
}
.news-subscribe-form-row {
  display: flex; gap: 8px;
}
.news-subscribe-form input[type="email"] {
  flex: 1;
  border: 1px solid #d8d8dc;
  background: #fff;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.news-subscribe-form input[type="email"]:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0,113,227,.12);
}
.news-subscribe-form button {
  border: 0;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 0 22px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.news-subscribe-form button:hover { background: #000; transform: translateY(-1px); }
.news-subscribe-form small {
  font-size: 12px; color: #86868b;
}
.news-subscribe-status {
  font-size: 13px; color: #0071e3; min-height: 18px;
}

/* Article reader modal */
.news-reader {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,15,20,.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.news-reader.is-open { display: flex; }
.news-reader-card {
  background: #fff;
  border-radius: 22px;
  max-width: 780px; width: 100%;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 72px);
  box-shadow: 0 40px 90px rgba(0,0,0,.32);
  position: relative;
  animation: nrIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes nrIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.news-reader-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid #ececef;
  background: #fff;
  font-size: 22px; line-height: 1;
  color: #1d1d1f;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.news-reader-close:hover { background: var(--ink); color: #fff; }
.news-reader-cat {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  color: #0071e3;
  margin: 0 0 14px;
}
.news-reader-title {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600; letter-spacing: -.022em; line-height: 1.1;
  color: var(--ink);
  margin: 0 0 18px;
}
.news-reader-meta {
  font-size: 13.5px; color: #86868b;
  margin: 0 0 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ececef;
}
.news-reader-meta strong { color: #1d1d1f; font-weight: 500; }
.news-reader-body p {
  font-size: 17px; line-height: 1.65;
  color: #1d1d1f;
  margin: 0 0 18px;
}
.news-reader-body h3 {
  font-family: "SF Pro Display", system-ui, sans-serif;
  font-size: 21px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink);
  margin: 28px 0 12px;
}
.news-reader-body blockquote {
  margin: 24px 0;
  padding: 14px 0 14px 22px;
  border-left: 3px solid #0071e3;
  font-style: italic;
  color: #1d1d1f;
  opacity: .85;
}

/* Mobile */
@media (max-width: 880px) {
  .news-featured-inner { grid-template-columns: 1fr; }
  .news-subscribe-card { grid-template-columns: 1fr; padding: 40px 24px; }
  .news-search { margin-left: 0; width: 100%; }
  .news-search input { width: 100%; }
}
@media (max-width: 600px) {
  .news-controls { position: relative; }
  .news-card-body { padding: 16px 18px 18px; }
  .news-card-title { font-size: 17.5px; }
}

/* Newsroom desktop: filter bar moves to a left-side rail (mirrors the
   nav-rail on the main page once you scroll past the hero). */
@media (min-width: 1100px) {
  body.news-page main {
    padding-left: 220px;
  }
  /* Topbar becomes a vertical column anchored to the left rail */
  body.news-page .topbar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 220px;
    padding: 28px;
    gap: 18px;
    background: transparent;
  }
  body.news-page .topbar .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  body.news-page .topbar .cta {
    position: fixed;
    left: 28px;
    bottom: 28px;
    margin: 0;
  }
  .news-controls {
    position: fixed;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    width: 180px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 49;
  }
  .news-controls-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: none;
    padding: 0;
  }
  .news-filters {
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .news-filter {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 0 6px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .55;
    transition: opacity .25s ease, padding-left .25s ease;
  }
  .news-filter::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 8px; height: 1px;
    background: currentColor;
    opacity: .55;
    transform: translateY(-50%) scaleX(.35);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, background .25s ease, height .25s ease;
  }
  .news-filter:hover {
    background: transparent;
    border: 0;
    opacity: 1;
    padding-left: 18px;
  }
  .news-filter:hover::before {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
  }
  .news-filter.is-active {
    background: transparent;
    color: var(--ink);
    border: 0;
    opacity: 1;
    padding-left: 22px;
  }
  .news-filter.is-active::before {
    transform: translateY(-50%) scaleX(1.6);
    opacity: 1;
    background: #0071e3;
    height: 2px;
  }
  .news-search {
    margin: 12px 0 0;
    width: 100%;
  }
  .news-search input {
    width: 100%;
  }
}

/* ============================================================
   MOBILE POLISH (Commit 1 - hamburger drawer)
   Desktop is untouched; everything below either targets the
   new mobile-only elements or lives inside a max-width query.
   ============================================================ */

/* Hamburger button - hidden on desktop by default */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.nav-toggle-bar {
  display: block;
  width: 18px; height: 1.5px;
  background: #0a0a0a;
  border-radius: 1px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-toggle-bar { transition: transform .22s ease, opacity .15s ease; }

/* Drawer + scrim - hidden everywhere by default via [hidden]; only used on mobile */
.nav-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.42);
  z-index: 90;
  opacity: 0;
  transition: opacity .22s ease;
}
.nav-drawer-scrim.open { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(82vw, 320px);
  background: #ffffff;
  z-index: 100;
  padding: 64px 28px 28px;
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: #0a0a0a;
}

.nav-drawer-links {
  display: flex; flex-direction: column; gap: 4px;
}
.nav-drawer-links a {
  display: block;
  padding: 14px 4px;
  color: #0a0a0a;
  text-decoration: none;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav-drawer-links a:active { background: rgba(0,0,0,.03); }

.nav-drawer-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 14px 18px;
  background: #0a0a0a;
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
}

/* Reveal hamburger / hide desktop nav links on mobile */
@media (max-width: 820px) {
  .topbar .nav { display: none; }
  .topbar .cta { display: none; }
  .nav-toggle { display: inline-flex; }
}