/* ==========================================================================
   Reaplex: real estate websites you own
   heynesh-inspired layout on a cool banded ground (change 236), glass cards, ink type, one cobalt accent.
   ========================================================================== */
/* Self-hosted variable fonts, latin subset (2026-10-20, replaces the Google Fonts stylesheet; see PERFORMANCE.md).
   Archivo carries both axes (weight 400-900, width 62-125%) for the 125% wordmarks. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/hanken-grotesk-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/hanken-grotesk-italic-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #F8FAFF;         /* the canvas, the default ground */
  --bg-2: #EFF4FF;       /* the subtle band */
  --card: #FFFFFF;       /* the card surface */
  --card-strong: #FFFFFF;
  --card-solid: #FFFFFF;
  --pill: #FFFFFF;
  --line-card: #E3EAF8;  /* the hairline that keeps a white card visible */
  --line: rgba(11, 11, 12, .12);
  --line-2: rgba(11, 11, 12, .2);
  --ink: #0B0B0C;
  --ink-2: #26262A;
  --muted: rgba(11, 11, 12, .62);
  --faint: rgba(11, 11, 12, .18);
  --blue: #2557F5;
  --blue-deep: #1B3FD1;
  --blue-soft: rgba(37, 87, 245, .12);
  --dark: #0D0D0F;
  --dark-2: #17171B;
  --cloud: #EDEFF4;

  --f-display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --f-body: 'Hanken Grotesk', 'Segoe UI', Arial, sans-serif;

  --pl: 16px;
  --pr: 16px;
  --max: 1320px;
  --r: 10px;
  --r-lg: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow: 0 30px 60px -32px rgba(20, 16, 6, .35);
}
@media (min-width: 700px) { :root { --pl: 28px; --pr: 28px; } }
@media (min-width: 1100px) { :root { --pl: 40px; --pr: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; } /* was 90px, to clear the sticky bar that no longer exists */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
em { font-style: normal; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.ic { width: 1em; height: 1em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 999; background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- type ---------- */
.h-hero { font-size: clamp(2.6rem, 5.4vw, 5.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.h-xl { font-size: clamp(2.2rem, 4.3vw, 4.1rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.h-post { font-size: clamp(2.1rem, 4vw, 3.9rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.h-hero em, .h-xl em, .h-post em, .footer__big em, .cta__title em { color: var(--blue); }
.theme-dark .h-xl em { color: #7E9BFF; }
.lead { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.lead p + p { margin-top: .8em; }
.lead--lg { font-size: clamp(1.05rem, 1.35vw, 1.25rem); max-width: 50ch; }
.lead a, .rich a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.rich { color: var(--ink-2); font-size: 1.04rem; line-height: 1.7; max-width: 60ch; }
.rich p + p { margin-top: 1em; }
.theme-dark .lead, .theme-dark .rich { color: rgba(255, 255, 255, .78); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: 100%;
  font: 700 .74rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 11px 6px 9px;
  border: 1.5px solid transparent; /* the border takes the gradient too, so it blends into the background */
  border-radius: 99px;
  color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  /* glassy brand-blue pill: gradient base, a soft highlight along the top edge, and a shine that sweeps across every few seconds */
  background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 45%, #4D73FF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 22px -14px rgba(37,87,245,.7);
  margin-bottom: 18px;
}
.eyebrow::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: skewX(-22deg) translateX(-180%); animation: eyebrow-shine 3.8s ease-in-out infinite; }
@keyframes eyebrow-shine { 0% { transform: skewX(-22deg) translateX(-180%); } 38% { transform: skewX(-22deg) translateX(300%); } 100% { transform: skewX(-22deg) translateX(300%); } }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btns--center { justify-content: center; }
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1rem/1 var(--f-body);
  padding: 15px 18px 15px 22px;
  border-radius: 9px;
  white-space: nowrap;
  transition: color .35s var(--ease), background-color .35s, box-shadow .35s;
  will-change: transform;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: translateY(0); }
.btn__label { position: relative; }
.btn__arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; overflow: hidden; position: relative; }
.btn__arrow .ic { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover .btn__arrow .ic { transform: translateX(3px); }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 14px 30px -14px rgba(37, 87, 245, .8); }
.btn--blue::before { background: var(--ink); }
.btn--blue .btn__arrow { background: rgba(255, 255, 255, .16); }
.btn--pill { background: var(--pill); color: var(--ink); }
.btn--pill::before { background: #fff; }
.btn--pill .btn__arrow { background: var(--blue); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark::before { background: var(--blue); }
.btn--dark .btn__arrow { background: rgba(255,255,255,.14); }
.btn--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-card); }
.btn--light::before { background: var(--blue); }
.btn--light:hover { color: #fff; box-shadow: none; }
.btn--light .btn__arrow { background: var(--blue); color: #fff; }
.btn--ghost { border: 1.5px solid currentColor; }
.btn--sm { padding: 10px 12px 10px 14px; font-size: .9rem; border-radius: 8px; }
.btn--sm .btn__arrow { width: 20px; height: 20px; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--blue); }
.link-arrow .ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link-arrow:hover .ic, a:hover > .link-arrow .ic { transform: translateX(5px); }

/* ---------- surfaces ---------- */
.glass {
  background: var(--card);
  -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid var(--line-card);
  border-radius: var(--r);
}
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; font-size: .8rem; line-height: 1.3; background: rgba(0,0,0,.35); color: #fff; white-space: nowrap; }
.tag--ink { background: rgba(255,255,255,.55); border-color: var(--line-2); color: var(--ink); }
.tag--blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 99px; background: var(--pill); font-size: .92rem; font-weight: 500; transition: background-color .3s, color .3s; }
.chip:hover { background: #fff; }
.chip.is-active { background: var(--ink); color: #fff; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--blue); color: #fff; font: 700 .95rem/1 var(--f-display); overflow: hidden; }
.avatar .ic { width: 20px; height: 20px; }
.avatar--lg { width: 60px; height: 60px; font-size: 1.2rem; }
.avatar--xl { width: 88px; height: 88px; }
.avatar--img { background: var(--dark); }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.stars { display: inline-flex; gap: 2px; color: var(--blue); }
.stars .ic { width: 16px; height: 16px; }
.checks { display: grid; gap: 12px; margin-top: 26px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.checks__ic { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--blue); color: #fff; margin-top: 1px; }
.checks__ic .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } /* 8 short labels read better in two columns beside a square image (change 149) */
@media (max-width: 560px) { .checks--two { grid-template-columns: 1fr; } }

/* ---------- fixed backdrop: drifting colour orbs + grain behind the glass ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* The drifting background orbs were removed in change 154: being position: fixed inside
   .backdrop, they stayed glued to the viewport while content scrolled past, which read
   as a pale wash sitting on top of the page. Only the grain texture remains. */
.grain { position: absolute; inset: -50%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- page curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 400; background: var(--blue); display: grid; place-items: center; pointer-events: none; transform: translateY(100%); }
.curtain__logo { font: 900 clamp(2rem, 6vw, 4.5rem)/1 var(--f-display); font-stretch: 125%; color: #fff; letter-spacing: -.02em; display: flex; align-items: flex-start; gap: 4px; opacity: 0; }
.curtain__logo .logo-dot { background: #fff; }
html.is-entering .curtain { transform: translateY(0); }
html.is-entering .curtain.is-out { transition: transform .75s var(--ease-io); transform: translateY(-100%); }
html.is-leaving .curtain { transition: transform .6s var(--ease-io); transform: translateY(0); pointer-events: all; }
html.is-leaving .curtain__logo { opacity: 1; transition: opacity .3s .25s; }

/* ---------- drag cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; }
.cursor__in { position: absolute; transform: translate(-50%, -50%) scale(0); width: 92px; height: 92px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 .75rem/1 var(--f-display); letter-spacing: .08em; transition: transform .45s var(--ease); }
.cursor__in i { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.cursor__in i:first-child { border-right: 6px solid #fff; }
.cursor__in i:last-child { border-left: 6px solid #fff; }
.cursor.is-on .cursor__in { transform: translate(-50%, -50%) scale(1); }

/* ---------- logo ---------- */
.logo-box {
  display: inline-flex; align-items: flex-start; gap: 3px;
  background: var(--blue); color: #fff;
  font: 900 1.02rem/1 var(--f-display); font-stretch: 125%; letter-spacing: -.01em;
  padding: 9px 11px 8px 12px; border-radius: 6px;
}
.logo-dot { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: #fff; margin-top: .02em; }
.logo-box--lg { font-size: 1.5rem; padding: 12px 16px 11px; }

/* ==========================================================================
   Top navigation — floating glass bar with mega-menu dropdowns
   ========================================================================== */
/* At the top of the page the bar is absolute and scrolls away with it (change 144).
   Owner request 2026-10-18: desktop top 56px -> 24px (heroes moved up by the same 32px),
   and once the bar has scrolled out of view it comes back pinned whenever the visitor
   scrolls up (.is-pinned = fixed but parked above the screen, .is-up = slid in). main.js
   swaps the classes at the scroll position where both placements coincide, so nothing jumps. */
.nav { position: absolute; z-index: 90; top: 24px; left: 0; right: 0; padding: 0 var(--pr); pointer-events: none; }
.nav__wrap { position: relative; max-width: 1360px; margin: 0 auto; }
.nav__bar {
  pointer-events: auto; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  height: 66px; padding: 0 10px 0 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--line-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 40px -28px rgba(20, 16, 6, .45);
  transition: height .5s var(--ease), background-color .45s, color .45s, border-color .45s, box-shadow .45s;
}
/* Hide eases in (accelerates away), show eases out (arrives gently): the two halves of a smooth slide.
   --pin-top is set by main.js so the pinned bar tracks the document near the top and never jumps. */
.nav.is-pinned { position: fixed; top: var(--pin-top, 12px); transform: translate3d(0, calc(-100% - 40px), 0); opacity: 0; will-change: transform; transition: transform .42s cubic-bezier(.55, 0, .75, .2), opacity .3s .12s linear; }
.nav.is-pinned.is-up { transform: translate3d(0, 0, 0); opacity: 1; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .25s linear; }
.nav.is-pinned .nav__bar { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 44px -26px rgba(20, 16, 6, .5); }
body.admin-bar .nav.is-pinned { top: 44px; }
@media (max-width: 782px) { body.admin-bar .nav.is-pinned { top: 58px; } }
@media (prefers-reduced-motion: reduce) { .nav.is-pinned { transition: none; } }
.nav.is-compact .nav__bar, .nav.is-open .nav__bar { height: 58px; background: var(--card-strong); box-shadow: 0 20px 50px -30px rgba(20, 16, 6, .55); }
.nav.is-dark:not(.is-open) .nav__bar { background: rgba(20, 20, 24, .72); border-color: rgba(255,255,255,.08); color: #fff; }
.nav__logo { flex: none; font-size: .98rem; }
/* nav__logo--img: the header uses the supplied reaplex wordmark instead of the blue pill (change 173).
   Sized by height so it keeps the pill's old footprint: 32px tall renders 126px wide against the old 128x33. */
.nav__logo--img { display: inline-flex; align-items: center; }
.nav__logo--img img { display: block; height: 32px; width: auto; }
@media (max-width: 999px) { .nav__logo--img img { height: 28px; } }
/* footer__logo--img: the light wordmark on the footer's dark card (change 174).
   46px tall renders 181px wide, against the old blue pill's 191x47. */
.footer__logo--img { display: inline-flex; align-items: center; }
.footer__logo--img img { display: block; height: 46px; width: auto; }
@media (max-width: 700px) { .footer__logo--img img { height: 38px; } }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav__pill { position: absolute; left: 0; top: 50%; height: 40px; width: 0; margin-top: -20px; border-radius: 10px; background: rgba(255, 255, 255, .85); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; z-index: 0; }
.nav.is-dark:not(.is-open) .nav__pill { background: rgba(255,255,255,.12); }
.nav__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; font: 500 .95rem/1 var(--f-body); white-space: nowrap; color: inherit; transition: color .3s; }
.nav__chev { width: 14px; height: 14px; stroke-width: 2.2; opacity: .55; transition: transform .45s var(--ease), opacity .3s; }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); opacity: 1; }
.nav__link.is-active::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue); }
.nav__link[data-dd-open].is-active::after { margin-left: -9px; }
.nav__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.nav__ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 500; font-size: .95rem; transition: background-color .3s; }
.nav__ghost:hover { background: rgba(255,255,255,.7); }
.nav.is-dark:not(.is-open) .nav__ghost:hover { background: rgba(255,255,255,.12); }
.nav__cta { padding: 11px 10px 11px 16px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 11px; background: var(--ink); color: #fff; position: relative; }
.nav__burger i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.nav__burger i:first-child { top: 17px; }
.nav__burger i:last-child { top: 25px; right: 18px; }
.nav__burger:hover i:last-child { transform: translateX(5px); }
@media (max-width: 1240px) { .nav__ghost { display: none; } .nav__link { padding: 0 11px; } }
@media (max-width: 1099px) {
  .nav { top: 16px; padding: 0 12px; }
  .nav__bar { height: 58px; padding: 0 7px 0 10px; }
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__burger { display: block; }
  .nav__cta { padding: 10px 12px; }
  .nav__cta .btn__arrow { display: none; }
  .dd, .nav-scrim { display: none !important; }
}
@media (max-width: 380px) { .nav__cta { display: none; } }

/* dropdown panels */
.dd { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 1; pointer-events: none; visibility: hidden; }
.dd.is-open { pointer-events: auto; visibility: visible; }
.dd::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd__panel {
  display: grid; grid-template-columns: 290px 1fr; gap: 10px; padding: 10px;
  max-height: calc(100svh - 110px); overflow: auto; overscroll-behavior: contain;
  background: var(--card-strong);
  -webkit-backdrop-filter: blur(30px) saturate(1.25); backdrop-filter: blur(30px) saturate(1.25);
  border: 1px solid var(--line-card); border-radius: 18px;
  box-shadow: 0 40px 80px -40px rgba(20, 16, 6, .55);
  clip-path: inset(0 0 100% 0 round 18px);
  opacity: 0; transform: translateY(-8px);
  transition: clip-path .65s var(--ease), opacity .35s, transform .65s var(--ease);
}
.dd.is-open .dd__panel { clip-path: inset(0 0 0 0 round 18px); opacity: 1; transform: none; }
.dd--1 .dd__panel, .dd--2 .dd__panel { max-width: 920px; margin: 0 auto; }
.dd__intro { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 260px; padding: 24px; border-radius: 12px; background: var(--dark); color: #fff; }
.dd__intro::after { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(37,87,245,.8), transparent 65%); filter: blur(10px); }
.dd__intro > * { position: relative; z-index: 1; }
.dd__intro .eyebrow { margin-bottom: 0; }
.dd__intro p { font: 600 1.4rem/1.15 var(--f-display); letter-spacing: -.02em; }
.dd__intro .btn { align-self: flex-start; }
.dd__groups { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px 4px; align-content: start; }
.dd--1 .dd__group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; align-content: start; }
.dd--1 .dd__gt { grid-column: 1 / -1; }
.dd__group { display: grid; gap: 2px; align-content: start; }
.dd__gt { font: 700 .7rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; }
.dd__link { position: relative; display: grid; gap: 3px; padding: 11px 44px 11px 12px; border-radius: 10px; transition: background-color .3s; }
.dd__link b { font: 600 .98rem/1.2 var(--f-display); letter-spacing: -.01em; }
.dd__link small { font-size: .82rem; line-height: 1.3; color: var(--muted); }
.dd__link span { position: absolute; right: 10px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 7px; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: 0; transform: translate(-6px, 6px) scale(.8); transition: opacity .3s, transform .45s var(--ease); }
.dd__link span .ic { width: 13px; height: 13px; }
.dd__link:hover { background: #fff; }
.dd__link:hover span { opacity: 1; transform: none; }
.dd__link.is-current b { color: var(--blue); }
.nav-scrim { position: fixed; inset: 0; z-index: 85; background: rgba(248, 250, 255, .3); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.nav-scrim.is-on { opacity: 1; visibility: visible; }

/* mobile full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 150; overflow: auto;
  background: var(--bg); color: var(--ink);
  padding: 10px 12px 28px;
  display: flex; flex-direction: column; gap: 20px;
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path .8s var(--ease), visibility .8s;
  visibility: hidden;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
.menu__top { display: flex; justify-content: space-between; align-items: center; padding: 7px 7px 7px 10px; }
.menu__close { width: 44px; height: 44px; display: grid; place-items: center; background: var(--blue); color: #fff; border-radius: 11px; }
.menu__close .ic { width: 20px; height: 20px; }
.menu__nav { display: grid; gap: 6px; }
.menu__link, .menu__group summary { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; background: var(--pill); font: 600 clamp(1.15rem, 5.5vw, 1.6rem)/1.1 var(--f-display); cursor: pointer; list-style: none; }
.menu__group summary::-webkit-details-marker { display: none; }
.menu__link .ic, .menu__group summary > .ic { width: 22px; height: 22px; color: var(--blue); }
.menu__group summary .qa__ic { margin-left: auto; }
.menu__group[open] summary { background: var(--ink); color: #fff; }
.menu__sub { display: grid; padding: 8px 6px 12px 18px; }
.menu__sub span { font: 700 .72rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 0 6px; }
.menu__sub a { padding: 9px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
.menu__foot { display: grid; gap: 12px; margin-top: auto; text-align: center; }
@media (min-width: 1100px) { .menu { display: none !important; } }

/* ==========================================================================
   Home hero — centred headline + product mockup that tilts flat on scroll
   ========================================================================== */
.hero { position: relative; z-index: 6; padding: calc(clamp(130px, 17vh, 170px) - 22px) var(--pr) 0; /* -32px with the header (2026-10-18) */ overflow: clip; }
@media (max-width: 1099px) { .hero { padding-top: calc(clamp(130px, 17vh, 170px) - 20px); } } /* home hero tracks the header back up on mobile (change 176) */
.hero__glow { position: absolute; left: 50%; top: 42%; width: min(1100px, 110vw); aspect-ratio: 1.6; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 87, 245, .34), rgba(37, 87, 245, .08) 60%, transparent); filter: blur(30px); pointer-events: none; }
.hero__grid { position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; background-image: linear-gradient(rgba(11,11,12,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,12,.055) 1px, transparent 1px); background-size: 64px 64px; background-position: center -1px; mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%); }
.hero__inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; justify-items: center; text-align: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 99px; background: rgba(255,255,255,.55); border: 1px solid var(--line-card); box-shadow: 0 10px 30px -22px rgba(20,16,6,.5); font-size: .9rem; font-weight: 500; transition: background-color .3s; }
.hero__badge:hover { background: #fff; }
.hero__badge-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.hero__badge-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.hero__badge-sep { width: 1px; height: 16px; background: var(--line-2); }
.hero__badge-more { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .82rem; }
.hero__badge-more .ic { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.hero__badge:hover .hero__badge-more .ic { transform: translateX(3px); }
.hero__title { margin-top: 28px; font-size: clamp(2.9rem, 7.4vw, 7.4rem); line-height: .93; letter-spacing: -.05em; font-weight: 700; text-wrap: balance; }
.hero__ln { display: inline-block; }
.hero__ln--blue { color: var(--blue); }
.hero__lead { max-width: 60ch; margin: 28px auto 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.65; color: var(--ink-2); }
.hero__cta { margin-top: 34px; }
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px; margin-top: 34px; font-size: .92rem; color: var(--ink-2); }
.hero__proof li { display: inline-flex; align-items: center; gap: 10px; }
.hero__proof li + li { padding-left: 26px; border-left: 1px solid var(--line-2); }
.hero__proof > li > .ic { width: 18px; height: 18px; color: var(--blue); }
.hero__proof b { color: var(--ink); font-weight: 700; }
.hero__proof .stars { margin-right: 6px; vertical-align: -2px; }
.hero__proof .stars .ic { width: 13px; height: 13px; }
.hero__faces { display: inline-flex; }
.hero__faces i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--f-display); font-style: normal; color: #fff; background: var(--ink); border: 2px solid var(--bg); }
.hero__faces i:nth-child(2) { background: var(--blue); }
.hero__faces i:nth-child(3) { background: #6b6557; }
.hero__faces i:nth-child(4) { background: #1B3FD1; }
.hero__faces i + i { margin-left: -9px; }
@media (max-width: 700px) { .hero__proof li + li { padding-left: 0; border-left: 0; } .hero__proof { flex-direction: column; gap: 10px; } }

/* product mockup */
.hero__stage { position: relative; max-width: 1180px; margin: clamp(56px, 7vw, 90px) auto 0; padding: 0 clamp(0px, 3vw, 40px) clamp(60px, 8vw, 110px); perspective: 1800px; }
.hv { position: relative; container-type: inline-size; transform-origin: 50% 0; transform-style: preserve-3d; }
.hv__browser { position: relative; border-radius: 1.4cqw; overflow: hidden; background: var(--cloud); box-shadow: 0 0 0 1px rgba(11,11,12,.08), 0 50px 100px -50px rgba(20,16,6,.6), 0 30px 60px -40px rgba(37,87,245,.45); }
.hv__bar { height: 3.2cqw; display: flex; align-items: center; gap: .55cqw; padding: 0 1.3cqw; background: #E9E4D8; border-bottom: 1px solid rgba(11,11,12,.07); }
.hv__bar i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #ff5f57; }
.hv__bar i:nth-child(2) { background: #febc2e; }
.hv__bar i:nth-child(3) { background: #28c840; }
.hv__bar span { display: inline-flex; align-items: center; gap: .5cqw; margin: 0 auto; transform: translateX(-2cqw); padding: .45cqw 2.4cqw; border-radius: .6cqw; background: rgba(255,255,255,.75); font-size: .95cqw; color: #666; }
.hv__bar .ic { width: .9cqw; height: .9cqw; }
.hv__screen { padding: 0 1.8cqw 1.8cqw; }
.hv__nav { display: flex; align-items: center; gap: 2.2cqw; padding: 1.5cqw 0; font-size: 1cqw; color: #555; }
.hv__nav b { font: 800 1.15cqw/1 var(--f-display); letter-spacing: .06em; color: #111; margin-right: auto; }
.hv__nav b em { color: var(--blue); margin-left: .3cqw; }
.hv__btn { padding: .8cqw 1.3cqw; border-radius: .6cqw; background: var(--blue); color: #fff; font-weight: 600; font-style: normal; }
.hv__heroimg { position: relative; height: 26cqw; border-radius: 1cqw; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.8cqw; padding: 3cqw; background: linear-gradient(160deg, #56657f 0%, #26324a 48%, #111726 100%); }
.hv__heroimg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 78% 26%, rgba(255, 196, 120, .55), transparent 38%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); }
.hv__heroimg::after { content: ''; position: absolute; left: 52%; right: 6%; bottom: 0; height: 58%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.25)), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 4cqw, transparent 4cqw 4.6cqw); clip-path: polygon(0 40%, 30% 10%, 60% 30%, 100% 0, 100% 100%, 0 100%); opacity: .8; }
.hv__copy { position: relative; z-index: 1; display: grid; gap: .8cqw; color: #fff; }
.hv__copy small { font-size: .95cqw; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.hv__h1 { font: 700 3.3cqw/1 var(--f-display); letter-spacing: -.03em; }
.hv__search { position: relative; z-index: 1; display: flex; align-items: center; gap: .6cqw; max-width: 64cqw; padding: .6cqw; border-radius: .9cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.25); font-size: 1cqw; color: #555; }
.hv__search > span { display: inline-flex; align-items: center; gap: .5cqw; padding: .7cqw 1.2cqw; border-right: 1px solid #eee; flex: 1; white-space: nowrap; }
.hv__search > span:nth-child(3) { border-right: 0; }
.hv__search .ic { width: 1.1cqw; height: 1.1cqw; color: var(--blue); }
.hv__search em { display: inline-flex; align-items: center; gap: .5cqw; padding: .9cqw 1.6cqw; border-radius: .6cqw; background: var(--blue); color: #fff; font-style: normal; font-weight: 600; }
.hv__search em .ic { color: #fff; }
.hv__row { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 1.3cqw; margin-top: 1.6cqw; }
.hv__card { display: grid; gap: .4cqw; padding: .7cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 .6cqw 2cqw -1cqw rgba(0,0,0,.2); }
.hv__card b { font: 800 1.35cqw/1 var(--f-display); padding: .5cqw .3cqw 0; }
.hv__card small { font-size: .85cqw; color: #777; padding: 0 .3cqw .3cqw; }
.hv__img { position: relative; height: 8.5cqw; border-radius: .7cqw; background: linear-gradient(135deg, #c9b99a, #8d7b61); }
.hv__img--2 { background: linear-gradient(135deg, #9fb1c9, #4b5d78); }
.hv__img--3 { background: linear-gradient(135deg, #b9c2a4, #6e7a5c); }
.hv__img span { position: absolute; left: .6cqw; top: .6cqw; padding: .35cqw .7cqw; border-radius: .4cqw; background: #fff; font-size: .8cqw; font-weight: 700; color: #111; }
.hv__mapcard { position: relative; overflow: hidden; border-radius: 1cqw; background-color: #E6E9EF; background-image: linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px); background-size: 1.6cqw 1.6cqw; }
.hv__zone { position: absolute; left: 22%; top: 18%; width: 52%; height: 58%; border-radius: 45% 55% 40% 60%; background: rgba(37,87,245,.2); border: .2cqw dashed var(--blue); }
.hv__mapcard .ic { position: absolute; width: 1.8cqw; height: 1.8cqw; color: var(--blue); fill: #fff; }
.hv__mapcard .ic:nth-of-type(1) { left: 30%; top: 26%; }
.hv__mapcard .ic:nth-of-type(2) { left: 56%; top: 44%; }
.hv__mapcard .ic:nth-of-type(3) { left: 40%; top: 58%; }
.hv__mapcard small { position: absolute; left: .8cqw; bottom: .8cqw; padding: .4cqw .8cqw; border-radius: .4cqw; background: #fff; font-size: .8cqw; font-weight: 600; }
.hv__phone { position: absolute; right: -2.5%; bottom: -9%; width: 17.5%; aspect-ratio: 193 / 406; }
/* real screenshots in the mockup: the browser frame keeps its radius/shadow, the phone artwork brings its own shell */
.hv__shot { display: block; width: 100%; height: auto; } /* the frame takes the screenshot's own proportions — nothing is cropped */
.hv__pshot { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.45)); }
.hv__notch { position: absolute; top: 1.3cqw; left: 50%; width: 5cqw; height: 1.2cqw; margin-left: -2.5cqw; border-radius: 1cqw; background: #000; z-index: 2; }
.hv__pscreen { height: 100%; border-radius: 2.2cqw; overflow: hidden; background: var(--cloud); display: flex; flex-direction: column; gap: .5cqw; padding-bottom: 1cqw; }
.hv__pimg { position: relative; height: 58%; background: linear-gradient(160deg, #56657f, #1f2a40); }
.hv__pimg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,196,120,.5), transparent 45%); }
.hv__pimg span { position: absolute; left: 1cqw; bottom: 1cqw; z-index: 1; padding: .35cqw .7cqw; border-radius: .4cqw; background: var(--blue); color: #fff; font-size: .8cqw; font-weight: 700; }
.hv__pscreen b { font: 800 1.5cqw/1 var(--f-display); padding: .6cqw 1cqw 0; }
.hv__pscreen small { font-size: .78cqw; color: #777; padding: 0 1cqw; }
.hv__pscreen em { margin: auto 1cqw 0; display: flex; align-items: center; justify-content: center; gap: .4cqw; padding: .8cqw; border-radius: .7cqw; background: var(--ink); color: #fff; font-size: .85cqw; font-style: normal; font-weight: 600; }
.hv__pscreen em .ic { width: 1cqw; height: 1cqw; }
.hv__f { position: absolute; z-index: 3; }
.hv__f--lead { left: -3.5%; top: 34%; }
.hv__f--own { left: 9%; bottom: -6%; }
.hv__f--speed { right: -4%; top: 8%; }
@media (max-width: 900px) {
  .hv__f { transform: scale(.78); }
  .hv__f--lead { left: -2%; top: 18%; transform-origin: left top; }
  .hv__f--own { left: 2%; bottom: -12%; transform-origin: left bottom; }
  .hv__f--speed { display: none; }
}
@media (max-width: 600px) { .hv__f--lead { display: none; } .hero__stage { padding-bottom: 70px; } }

/* ==========================================================================
   Sections
   ========================================================================== */
.main { position: relative; z-index: 5; }
.page-inner .main { padding-top: 0; }
.sec { position: relative; padding: clamp(80px, 9vw, 140px) var(--pr) clamp(80px, 9vw, 140px) var(--pl); }
.sec > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.sec + .sec { padding-top: clamp(20px, 3vw, 50px); }
.mq + .sec, .notice + .sec { padding-top: clamp(80px, 9vw, 140px); }
.sec-head { display: grid; justify-items: start; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .h-xl { max-width: 18ch; }
.sec-head .lead { margin-top: 22px; }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .h-xl { max-width: 20ch; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--split { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.theme-dark { background: var(--dark); color: #fff; --line-card: rgba(255, 255, 255, .1); }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: 34px !important; }
.crumbs .ic { width: 11px; height: 11px; opacity: .6; }
.crumbs a:hover { color: var(--blue); }
.crumbs span { color: var(--ink); }

/* ---------- inner hero ---------- */
.sec--hero { padding-top: clamp(100px, 10vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); } /* the +30px that tracked the header was removed in change 176, when the mobile header moved back up */
@media (min-width: 1100px) { .sec--hero { padding-top: 128px; /* 160 -> 128: header moved up 32px (2026-10-18) */ min-height: min(calc(100svh - 70px), 910px); display: flex; flex-direction: column; } .sec--hero > .hero-in { flex: 1; } .sec--posthero { min-height: 0; } } /* padding-top 130 -> 160 tracks the header moving down and is the collision floor; min-height -100px raises the centred copy ~50px, which is the requested tightening */
.hero-in { display: grid; gap: clamp(40px, 5vw, 70px); align-items: center; width: 100%; }
.hero-in--media { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero-in--media { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); } }
.hero-in__copy { display: grid; justify-items: start; }
.hero-in__copy .lead { margin-top: 26px; }
.hero-in--solo .h-hero { font-size: clamp(2.8rem, 6.6vw, 6.8rem); max-width: 16ch; }
.page-luxury-presence-alternative .h-hero { font-size: clamp(2.6rem, 4vw, 4.3rem); } /* the longest hero title of the five comparison pages: at the shared size, "Luxury Presence," alone is wider than the copy column, so it broke to five lines */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 99px; background: var(--pill); font-size: .88rem; font-weight: 500; }
.hero-chips .ic { width: 15px; height: 15px; color: var(--blue); }
.hero-note { margin-top: 22px; font-size: .82rem; color: var(--muted); max-width: 56ch; line-height: 1.5; }
.hero-in__media { position: relative; }
.hero-in__media .float-card { position: absolute; z-index: 3; }
.float-card--1 { left: -6%; bottom: 12%; }
@media (min-width: 1000px) { .hero--case .float-card--1 { bottom: 5%; } .hero--lowfloat .float-card--1 { bottom: 2%; } } /* case studies: the "live website" card sits a little lower on the mockup */
.float-card--2 { right: -3%; top: -6%; }
@media (max-width: 999px) { .float-card--1 { left: 4%; bottom: -8%; } .float-card--2 { right: 4%; top: -8%; } }

/* ---------- frames + placeholders ---------- */
.frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--dark-2); box-shadow: var(--shadow); isolation: isolate; }
.frame__view { position: relative; overflow: hidden; }
.frame__view > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame--browser { padding: 0; }
.frame__bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #1d1d22; }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.frame__bar i:nth-child(2) { background: #febc2e; }
.frame__bar i:nth-child(3) { background: #28c840; }
.frame__bar span { margin: 0 auto; transform: translateX(-20px); font-size: .72rem; color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); padding: 3px 14px; border-radius: 5px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame--round { border-radius: 24px; }
/* three site captures on a brand gradient (The Work hero): the two behind rise first, the front one follows */
.frame--stack { border-radius: 26px; background: radial-gradient(120% 95% at 76% 4%, #3E6BFF 0%, var(--blue) 40%, var(--blue-deep) 100%); box-shadow: 0 46px 90px -44px rgba(27, 63, 209, .75); }
.frame--stack .frame__view { overflow: hidden; }
.wstack { position: absolute; inset: 0; }
.wstack__site { position: absolute; bottom: 0; border-radius: 10px 10px 0 0; object-fit: cover; object-position: top center; box-shadow: 0 28px 55px -26px rgba(6, 16, 52, .8); }
.wstack__site--front { left: 23%; width: 54%; height: 92%; z-index: 3; box-shadow: 0 34px 70px -28px rgba(6, 16, 52, .9); }
.wstack__site--l, .wstack__site--r { width: 34%; height: 76%; z-index: 2; }
.wstack__site--l { left: 4%; }
.wstack__site--r { right: 4%; }
@media (max-width: 560px) { .frame--stack { border-radius: 18px; } .wstack__site { border-radius: 7px 7px 0 0; } }
/* armed by JS so the images are never stuck invisible if the script never runs */
.wstack--armed .wstack__site { opacity: 0; }
.wstack--armed .wstack__site--l, .wstack--armed .wstack__site--r { transform: translateY(46px); }
.wstack--armed .wstack__site--front { transform: translateY(96px); }
.wstack--armed.is-in .wstack__site { opacity: 1; transform: translateY(0); }
.wstack--armed.is-in .wstack__site--l { transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.wstack--armed.is-in .wstack__site--r { transition: opacity .45s ease .07s, transform .55s cubic-bezier(.22, 1, .36, 1) .07s; }
.wstack--armed.is-in .wstack__site--front { transition: opacity .6s ease .3s, transform .85s cubic-bezier(.16, 1, .3, 1) .3s; }
@media (prefers-reduced-motion: reduce) { .wstack--armed .wstack__site { opacity: 1; transform: none; } }
.frame figcaption { padding: 10px 14px; font-size: .82rem; color: rgba(255,255,255,.7); }
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #1b1d26 0%, #23283a 45%, #12131a 100%); color: #fff; overflow: hidden; }
.ph__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); }
.ph__glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(37,87,245,.55), transparent 65%); filter: blur(20px); animation: phglow 7s ease-in-out infinite alternate; }
@keyframes phglow { from { transform: translate(-25%, -15%); } to { transform: translate(25%, 20%); } }
.ph__label { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 16px; max-width: 90%; }
.ph__label .ic { width: 26px; height: 26px; opacity: .8; }
.ph__label b { font: 600 .92rem/1.3 var(--f-display); letter-spacing: -.005em; }
.ph__label code { font-size: .68rem; color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); padding: 3px 8px; border-radius: 4px; word-break: break-all; }
.is-before .ph { background: linear-gradient(135deg, #5c5a55, #3b3a37); filter: saturate(.2); }

/* ---------- marquee ---------- */
.mq { position: relative; z-index: 4; overflow: hidden; padding: 18px 0; margin: 0 var(--pr) 0 var(--pl); border-block: 1px solid var(--line-2); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__track { display: flex; align-items: center; gap: 28px; width: max-content; font: 600 clamp(1rem, 1.6vw, 1.35rem)/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; will-change: transform; }
.mq__track b, .mq__track strong { color: var(--blue); }
.mq__sep .ic { width: 14px; height: 14px; color: var(--blue); }
.mq--blue { background: var(--blue); color: #fff; border: 0; margin: 0; mask-image: none; }
.mq--blue .mq__sep .ic, .mq--blue b { color: #fff; }
.mq--tilt { transform: rotate(-1.5deg); }

/* ---------- statement ---------- */
.sec--statement { text-align: center; padding-top: clamp(110px, 12vw, 180px) !important; padding-bottom: clamp(90px, 10vw, 160px); }
.sec--statement .eyebrow { margin-inline: auto; margin-bottom: 30px; }
.statement__text { font: 700 clamp(1.9rem, 4.4vw, 4.3rem)/1.1 var(--f-display); letter-spacing: -.03em; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.st-chip { display: inline-grid; place-items: center; vertical-align: middle; width: 1.5em; height: .95em; margin: 0 .08em; border-radius: .22em; background: var(--blue); color: #fff; transform: translateY(-.06em) rotate(-4deg); box-shadow: 0 10px 20px -10px rgba(37,87,245,.9); }
.st-chip .ic { width: .52em; height: .52em; }
.statement__text--wide { max-width: 27ch; } /* wide: true — a shorter statement set on a wider measure */
.statement__sub { max-width: 60ch; margin: 34px auto 0; color: var(--ink-2); font-size: 1.1rem; }
/* chips with content ([[icon|Title|Text]]) — heynesh "capabilities" pattern: the inline chip is only an invisible slot in the
   sentence; the card floats over it (so the text never reflows) and inflates on hover via CSS variables tweened by GSAP. */
:root { --st-fs: clamp(1.9rem, 4.4vw, 4.3rem); }
.st-chip--card { display: inline-block; position: relative; z-index: 5; width: 1.44em; height: .9em; margin: 0 .1em; background: none; box-shadow: none; transform: translateY(-.06em); cursor: pointer; outline: none; }
.st-card { position: absolute; top: 0; left: 0; box-sizing: border-box; min-width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: calc(.2em * var(--pad-y, 1)) calc(.3em * var(--pad-x, 1)); border-radius: .22em; background: var(--card-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--line-card); box-shadow: 0 14px 30px -18px rgba(11,11,12,.35); color: var(--blue); text-align: left; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-wrap: initial; will-change: transform; }
.st-chip--card:focus-visible .st-card { outline: 2px solid var(--blue); outline-offset: 3px; }
.st-chip--flip .st-card { left: auto; right: 0; }
.st-chip--flip .st-card__top { flex-direction: row-reverse; }
.st-card__top { display: flex; align-items: center; justify-content: space-between; gap: .16em; width: 100%; }
.st-card__ic { display: grid; place-items: center; flex: none; width: calc(.5em * var(--ico, 1)); height: calc(.5em * var(--ico, 1)); }
.st-chip--card .st-card__ic .ic { width: 100%; height: 100%; }
.st-card__caret { display: grid; place-items: center; flex: none; width: calc(.18em * var(--car, 1)); height: calc(.18em * var(--car, 1)); border-radius: 20%; transition: rotate .4s ease, background-color .4s; }
.st-card__caret svg { display: block; width: 55%; height: 55%; }
.st-card.is-open .st-card__caret { rotate: 180deg; }
.st-card__body { display: grid; grid-template-rows: 0fr; width: calc(min(15rem, 80vw) * var(--grow, 0)); overflow: hidden; }
.st-card__in { display: block; min-height: 0; overflow: hidden; width: min(15rem, 80vw); }
.st-card__h { display: block; padding-top: .95rem; margin-bottom: .3rem; font: 600 1.05rem/1.15 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.st-card__p { display: block; font: 400 .93rem/1.45 var(--f-body); color: var(--ink-2); }
/* mobile: the tapped card is cloned into this full-screen overlay, flown to the centre and expanded there */
.st-overlay { position: fixed; inset: 0; z-index: 600; display: none; place-items: center; padding: 20px; background: rgba(0,0,0,.8); font: 700 var(--st-fs)/1.1 var(--f-display); }
.st-overlay .st-card { position: relative; top: auto; left: auto; min-width: 0; min-height: 0; }
.st-overlay .st-card.is-open .st-card__caret { background: rgba(11,11,12,.12); }
.no-js .st-card__body { grid-template-rows: 1fr; width: min(15rem, 80vw); }

/* ---------- split ---------- */
.split { display: grid; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split--rev .split__media { order: -1; } }
.split--nomedia { grid-template-columns: 1fr !important; }
.split__copy .sec-head { margin-bottom: 26px; }
.split__media { position: relative; }
.split__note { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.stat { flex: 1 1 140px; padding: 18px 18px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-card); display: grid; gap: 8px; }
.stat__v { font: 800 clamp(1.8rem, 2.8vw, 2.6rem)/.9 var(--f-display); letter-spacing: -.04em; color: var(--blue); }
.stat__l { font-size: .88rem; line-height: 1.35; color: var(--ink-2); }

/* ---------- odometer ---------- */
.odo { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.odo-num { display: inline-flex; }
.odo-d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo-col { display: flex; flex-direction: column; transform: translateY(0); }
.odo-col span { height: 1em; line-height: 1; }
.odo-sep, .odo-pre, .odo-post { line-height: 1; }

/* ---------- features ---------- */
.feat-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .feat-grid--2, .feat-grid--3, .feat-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .feat-grid--3 { grid-template-columns: repeat(3, 1fr); } .feat-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.feat { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border-radius: var(--r); background: var(--card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--line-card); min-height: 230px; transition: transform .6s var(--ease), background-color .4s; }
.feat::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.75), transparent 45%); transition: opacity .4s; }
.feat:hover::after { opacity: 1; }
.feat:hover { transform: translateY(-4px); }
.feat__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; padding-bottom: 26px; }
.feat__ic { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 14px 26px -14px rgba(37,87,245,.9); transition: transform .6s var(--ease); }
.feat:hover .feat__ic { transform: rotate(-8deg) scale(1.06); }
.feat__ic .ic { width: 24px; height: 24px; }
.feat__n { font: 700 .8rem/1 var(--f-display); color: var(--muted); }
.feat h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.12; letter-spacing: -.02em; }
.feat p { color: var(--ink-2); font-size: .98rem; line-height: 1.6; }
.feat .link-arrow { margin-top: 6px; }
.feat--closer { background: var(--blue); color: #fff; border-color: transparent; justify-content: flex-end; }
.feat--closer p { color: rgba(255,255,255,.85); }
.feat--closer .btn { align-self: flex-start; margin-top: 10px; }
@media (min-width: 1000px) {
  .feat-grid--bento { grid-template-columns: repeat(3, 1fr); }
  .feat-grid--bento .feat--hero { grid-row: span 2; background: var(--dark); color: #fff; border-color: transparent; justify-content: flex-end; background-image: radial-gradient(circle at 80% 0%, rgba(37,87,245,.55), transparent 55%); }
  .feat-grid--bento .feat--hero h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
  .feat-grid--bento .feat--hero p { color: rgba(255,255,255,.78); font-size: 1.08rem; }
  .feat-grid--bento .feat--hero .feat__n { color: rgba(255,255,255,.5); }
  .feat-grid--bento .feat--hero .link-arrow { color: #9DB2FF; }
  .feat-grid--bento .feat--hero::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(37,87,245,.35), transparent 45%); }
}

/* ---------- journey (steps + timeline) ---------- */
.journey { position: relative; padding-bottom: 40px; }
.journey__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.journey__ghost { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 6; }
.journey__line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.journey__dot { fill: var(--blue); stroke: var(--ink); stroke-width: 2; transition: r .4s var(--ease); }
.jcard { position: relative; z-index: 2; width: min(460px, 100%); margin-left: calc((100% - min(460px, 100%)) * var(--x, 0)); padding: 30px 30px 32px; border-radius: 12px; }
.jcard + .jcard { margin-top: clamp(-10px, -1vw, 0px); }
@media (min-width: 900px) { .jcard + .jcard { margin-top: 30px; } }
.jcard__num { font: 900 clamp(3.6rem, 6vw, 5.4rem)/.85 var(--f-display); letter-spacing: -.05em; color: var(--blue); margin-bottom: 16px; }
.jcard__year { font: 900 clamp(3.8rem, 6vw, 5.4rem)/.85 var(--f-display); letter-spacing: -.05em; color: var(--blue); margin-bottom: 16px; }
.jcard__tag { display: inline-flex; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; margin-bottom: 12px; }
.jcard h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); margin-bottom: 10px; }
.jcard p { color: var(--ink-2); line-height: 1.6; }
.jcard p + p { margin-top: .6em; }
.jcard .checks { margin-top: 18px; gap: 8px; font-size: .95rem; }
.jcard__foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.jcard__handle { display: grid; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.jcard__handle small { font-weight: 400; color: var(--muted); }
@media (max-width: 899px) {
  .journey { padding-left: 26px; }
  .jcard { margin-left: 0; width: 100%; padding: 24px 22px; }
  .jcard + .jcard { margin-top: 18px; }
}
/* journey variant (heynesh "About Me" timeline): card + fading stem on the dot's side; the line starts at the first dot,
   alternates straight diagonal / big outward arc, ends in a dashed tail and is revealed top-down like a curtain */
.journey--j { padding-bottom: clamp(120px, 12vw, 200px); }
.journey--j .journey__ghost { display: none; }
.journey__reveal { clip-path: inset(0 0 100% 0); }
.journey--j .journey__line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.journey__dash { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 16; }
.journey--j .journey__dot { opacity: 0; transition: opacity .6s; }
.journey--j .journey__dot.is-on { opacity: 1; }
.jwrap { --jw: min(100%, calc(clamp(370px, 29.58vw, 600px) + 22px)); position: relative; z-index: 2; display: flex; align-items: stretch; gap: clamp(14px, 1.39vw, 20px); width: var(--jw); margin-left: calc((100% - var(--jw)) * var(--x, 0)); }
.jwrap + .jwrap { margin-top: clamp(70px, 7vw, 120px); }
.jwrap--l .jstem { order: -1; }
.jcard--j { flex: 1 1 auto; width: auto; margin: 0; padding: clamp(22px, 2.08vw, 34px); border-radius: clamp(10px, .83vw, 14px); background: var(--card-strong); border: 1px solid var(--line-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.jcard--j .jcard__num { font-size: clamp(4rem, 5.56vw, 6.25rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; margin-bottom: clamp(6px, .42vw, 10px); }
.jcard--j h3 { font-size: clamp(1.15rem, 1.67vw, 2.25rem); line-height: 1.1; margin-bottom: clamp(6px, .42vw, 10px); }
.jcard--j .jcard__text p { color: var(--ink); opacity: .8; }
.jcard--j .jcard__foot { justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: clamp(16px, 1.39vw, 24px); padding-top: 0; border-top: 0; }
.jcard__meta { display: flex; align-items: center; gap: clamp(10px, .97vw, 16px); }
.jcard__avs { display: flex; }
.jcard__av { display: grid; place-items: center; flex: none; width: clamp(44px, 4.44vw, 64px); height: clamp(44px, 4.44vw, 64px); border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid rgba(255,255,255,.6); }
.jcard__av .ic { width: 40%; height: 40%; }
.jcard__av--2 { position: relative; z-index: 1; margin-left: clamp(-22px, -1.53vw, -14px); background: #fff; color: var(--blue); }
.jcard__handle { display: block; color: var(--muted); font-weight: 400; font-size: clamp(.85rem, 1vw, 1rem); line-height: 1.3; }
.jcard__more { display: inline-flex; align-items: center; flex: none; padding: clamp(9px, .69vw, 12px) clamp(16px, 1.39vw, 22px); border-radius: clamp(10px, .83vw, 14px); background: var(--pill); border: 1px solid rgba(11,11,12,.15); color: var(--ink); font: 500 clamp(.85rem, .97vw, 1rem)/1 var(--f-body); white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.jcard__more:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.jstem { position: relative; flex: none; width: 2px; }
.jstem i { position: absolute; left: 0; top: clamp(8px, .83vw, 12px); bottom: -10%; width: 2px; background: linear-gradient(to bottom, rgba(11,11,12,.5), rgba(11,11,12,.27) 44%, rgba(11,11,12,0) 95%); clip-path: inset(100% 0 0 0); }
.no-anim .journey__reveal, .no-anim .jstem i { clip-path: none; }
.no-anim .journey--j .journey__dot { opacity: 1; }
@media (max-width: 899px) {
  .journey--j { padding-bottom: 40px; }
  .jwrap { --jw: 100%; display: block; }
  .jwrap + .jwrap { margin-top: 18px; }
  .jstem { display: none; }
  .journey--j .journey__line { stroke-width: 3; }
  .journey__dash { stroke-width: 3; stroke-dasharray: 5 9; }
}

/* ---------- compare (rent vs own) ---------- */
.cmp-grid { display: grid; gap: 12px; align-items: stretch; position: relative; }
@media (min-width: 900px) { .cmp-grid { grid-template-columns: 1fr 74px 1fr; } }
.cmp { position: relative; border-radius: 14px; padding: 30px 28px; display: flex; flex-direction: column; gap: 22px; }
.cmp--rent { background: rgba(255,255,255,.25); border: 1px dashed var(--line-2); color: var(--ink-2); }
.cmp--own { background: var(--dark); color: #fff; box-shadow: 0 40px 80px -40px rgba(37,87,245,.7); overflow: hidden; isolation: isolate; }
/* the blue glow sits in the top-right corner and follows the pointer while it is inside the card (main.js sets --sx/--sy) */
.cmp--own::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(620px circle at var(--sx, 100%) var(--sy, 0%), rgba(37,87,245,.6), transparent 58%); }
.cmp__head { display: grid; gap: 6px; }
.cmp__badge { justify-self: start; padding: 5px 10px; border-radius: 99px; background: var(--blue); color: #fff; font: 700 .72rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.cmp__label { font: 600 1.05rem/1.2 var(--f-display); }
.cmp__value { font: 800 clamp(2rem, 3.6vw, 3.2rem)/1 var(--f-display); letter-spacing: -.04em; }
.cmp--own .cmp__value { color: #fff; }
/* rented price: a brand-blue line draws through it once the cards have landed — "this is what you avoid" */
.cmp--rent .cmp__value { position: relative; justify-self: start; }
.cmp--rent .cmp__value::after { content: ''; position: absolute; left: -.04em; right: -.04em; top: 50%; height: .07em; margin-top: -.035em; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) .55s; }
.cmp--rent.is-struck .cmp__value::after, .no-anim .cmp--rent .cmp__value::after { transform: scaleX(1); }
.cmp__sub { font-size: .9rem; opacity: .7; }
.cmp__list { display: grid; gap: 12px; }
.cmp__list li { position: relative; display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.cmp__list .ic { width: 22px; height: 22px; padding: 4px; border-radius: 6px; flex: none; margin-top: 1px; stroke-width: 2.6; }
.cmp--rent .cmp__list .ic { background: rgba(11,11,12,.08); color: #b33a2e; }
.cmp--own .cmp__list .ic { background: var(--blue); color: #fff; }
.cmp__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; }
.cmp--own .cmp__foot { border-color: rgba(255,255,255,.15); }
.cmp-vs { display: grid; place-items: center; }
.cmp-vs span { position: relative; isolation: isolate; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 800 1.1rem/1 var(--f-display); text-transform: uppercase; box-shadow: 0 0 0 8px rgba(37,87,245,.15); }
/* orbit: a brand-blue comet-tail arc (light tint #86A0FF -> Reaplex blue) that circles the badge along the outer edge of its halo (masked to a 3px ring so it never covers the blue) */
.cmp-vs span::before { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 38%, rgba(134,160,255,.2) 52%, #86A0FF 72%, var(--blue) 88%, transparent 88.5%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); animation: vs-orbit 3.3s linear infinite; will-change: transform; }
@keyframes vs-orbit { to { transform: rotate(360deg); } }
@media (max-width: 899px) { .cmp-vs { margin: -34px 0; z-index: 2; } .cmp-vs span { width: 52px; height: 52px; font-size: .95rem; } }
.cmp-note { max-width: 70ch; margin: 30px auto 0; text-align: center; color: var(--ink-2); font-size: .98rem; }
.cmp-note a { color: var(--blue); text-decoration: underline; }

/* ---------- table ---------- */
.tbl-wrap { overflow-x: auto; padding: 8px; border-radius: 14px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 1.1rem; }
.tbl th, .tbl td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
.tbl thead th { font: 700 .88rem/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--line-2); }
.tbl tbody th { font: 600 1.12rem/1.3 var(--f-display); width: 22%; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl .is-hl { background: rgba(37,87,245,.08); color: var(--ink); }
.tbl thead .is-hl { background: var(--blue); color: #fff; border-radius: 10px 10px 0 0; }
.tbl tbody tr:last-child .is-hl { border-radius: 0 0 10px 10px; }
.tbl td.is-hl { font-weight: 600; }
.tbl__yes, .tbl__no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.tbl__yes { background: var(--blue); color: #fff; }
.tbl__no { background: rgba(11,11,12,.08); color: #b33a2e; }
.tbl__yes .ic, .tbl__no .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.tbl tbody tr { transition: background-color .35s var(--ease); }
.tbl tbody tr:hover > th, .tbl tbody tr:hover > td { background: rgba(11,11,12,.035); }
.tbl tbody tr:hover > .is-hl { background: rgba(37,87,245,.14); }
.tbl-note { text-align: center; margin-top: 18px; font-size: .84rem; color: var(--muted); }

/* under 760px a three-column table cannot be read side-to-side, so each row becomes a card and every cell keeps its column name */
@media (max-width: 760px) {
  .tbl-wrap { overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .tbl { min-width: 0; width: 100%; display: block; font-size: 1.1rem; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* header text lives on each cell instead */
  .tbl tbody, .tbl tbody tr, .tbl tbody th, .tbl tbody td { display: block; width: auto; }
  .tbl tbody tr { margin-bottom: 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); overflow: hidden; }
  .tbl tbody tr:last-child { margin-bottom: 0; }
  .tbl tbody th { padding: 15px 16px 4px; border-bottom: 0; font: 700 1.16rem/1.25 var(--f-display); letter-spacing: -.01em; }
  .tbl tbody td { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
  .tbl tbody tr > *:last-child { border-bottom: 0; }
  .tbl tbody td::before { content: attr(data-label); display: block; margin-bottom: 5px; font: 700 .75rem/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .tbl tbody td.is-hl { background: rgba(37,87,245,.1); border-radius: 0; }
  .tbl tbody td.is-hl::before { color: var(--blue-deep); }
  .tbl tbody tr:last-child .is-hl { border-radius: 0; }
  .tbl tbody tr:hover > th, .tbl tbody tr:hover > td { background: none; }
  .tbl tbody tr:hover > .is-hl { background: rgba(37,87,245,.1); }
}

/* ---------- pricing ---------- */
.plans { display: grid; gap: 12px; padding: 12px; border-radius: 18px; background: var(--card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--line-card); }
@media (min-width: 860px) { .plans--2 { grid-template-columns: 1fr 1fr; max-width: 1040px; margin-inline: auto; } .plans--3 { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border-radius: 12px; background: rgba(255,255,255,.5); border: 1px solid var(--line-card); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan__head h3 { display: flex; align-items: center; gap: 10px; font-size: 1.45rem; }
.plan__head h3::before { content: ''; width: 14px; height: 14px; border-radius: 4px; background: var(--blue); }
.plan__tag { font-size: .8rem; padding: 4px 10px; border-radius: 99px; background: rgba(11,11,12,.06); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan__price b { font: 800 clamp(2.6rem, 4.2vw, 3.8rem)/1 var(--f-display); letter-spacing: -.045em; }
.plan__price > span { color: var(--muted); font-size: .95rem; }
.plan__desc { color: var(--ink-2); }
.plan .checks { margin-top: 0; gap: 11px; }
.plan__cta { margin-top: auto; padding-top: 10px; }
.plan__cta .btn { width: 100%; justify-content: space-between; }
.plan__foot { font-size: .86rem; color: var(--muted); }
.plan--featured { background: var(--dark); color: #fff; border-color: transparent; background-image: radial-gradient(circle at 100% 0%, rgba(37,87,245,.5), transparent 55%); }
.plan--featured .plan__tag { background: rgba(255,255,255,.12); }
.plan--featured .plan__price { border-color: rgba(255,255,255,.14); }
.plan--featured .plan__price > span, .plan--featured .plan__foot { color: rgba(255,255,255,.62); }
.plan--featured .plan__desc { color: rgba(255,255,255,.8); }
.plans-note { text-align: center; margin: 22px auto 0; color: var(--ink-2); max-width: 64ch; }

/* ---------- work (pinned horizontal) ---------- */
.sec--work { padding: 0; background: linear-gradient(180deg, #0B0B0D, #1A1A1F); overflow: hidden; }
.sec--work > * { max-width: none; }
.work { min-height: 100svh; padding: clamp(78px, 9vh, 104px) 0 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.work__head { display: grid; gap: 28px; padding: 0 var(--pr) 0 var(--pl); margin-bottom: clamp(20px, 3.5vh, 48px); align-items: end; }
@media (min-width: 900px) { .work__head { grid-template-columns: 1fr minmax(260px, 380px); } }
.work__head .h-xl { color: #F3F3F3; max-width: 16ch; font-size: clamp(2rem, min(3.6vw, 6vh), 3.6rem); }
.work__aside .lead { color: rgba(255,255,255,.75); }
.work__aside .btns { margin-top: 20px; }
.work__track { display: flex; gap: 22px; padding: 0 var(--pr) 0 var(--pl); width: max-content; will-change: transform; }
.wcard { position: relative; flex: none; width: var(--wcw, clamp(280px, min(30vw, (100svh - 320px) * .95), 470px)); border-radius: 16px; padding: 14px; background: #1c1c21; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 14px; color: #fff; transition: border-color .4s, background-color .4s; }
.wcard:hover { border-color: rgba(37,87,245,.7); background: #202027; }
.wcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 4px 0; }
.wcard__num { font: 700 .88rem/1 var(--f-display); color: rgba(255,255,255,.55); }
.wcard .tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.wcard .tag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
/* photo cards (portfolio photo: true): no browser bar, but the same height as the browser-framed cards next to them (bar = 32px) */
.frame--photo { container-type: inline-size; }
.wcard__media .frame--photo .frame__view { aspect-ratio: auto !important; height: calc(100cqw * .6875 + 32px); }
.pcard > .frame--photo .frame__view { aspect-ratio: auto !important; height: calc(100cqw * .625 + 32px); }
.wcard__media { border-radius: 10px; overflow: hidden; }
.wcard__media .frame { box-shadow: none; border-radius: 10px; }
.wcard__media .frame__view { transition: transform 1s var(--ease); }
.wcard:hover .wcard__media .frame__view { transform: scale(1.03); }
.wcard__body { position: relative; padding: 4px 64px 8px 6px; }
.wcard h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: 8px; }
.wcard p { color: rgba(255,255,255,.72); font-size: .96rem; line-height: 1.5; }
.wcard__go { position: absolute; right: 4px; bottom: 8px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; transition: transform .6s var(--ease); }
.wcard__go .ic { width: 18px; height: 18px; }
.wcard:hover .wcard__go { transform: rotate(45deg) scale(1.08); }
.wcard--cta { background: var(--blue); border-color: transparent; justify-content: space-between; }
.wcard--cta:hover { background: var(--blue-deep); }
.wcard--cta h3 { font-size: clamp(2rem, 3vw, 3rem); }
.wcard--cta p { color: rgba(255,255,255,.85); }
.wcard--cta .wcard__go { background: #fff; color: var(--blue); }
.wcard--cta .wcard__num { color: rgba(255,255,255,.75); }
.work__progress { margin: 22px var(--pr) 0 var(--pl); height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.work__progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
@media (max-width: 899px) {
  .work { min-height: 0; }
  .work__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .work__track::-webkit-scrollbar { display: none; }
  .wcard { width: 84vw; scroll-snap-align: center; }
  .work__progress { display: none; }
}

/* ---------- portfolio grid ---------- */
.pgrid { display: grid; gap: 16px; margin-top: 26px; }
/* "loading more" indicator between batches of work rows (change 067): a bare ring — no disc — with two gradient arcs orbiting in opposite directions, a white gleam sweeping round the outer arc */
.pload { display: flex; justify-content: center; padding: 64px 0 24px; }
.pload[hidden] { display: none; }
.pload__orb { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.pload__orb svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.pload__track { fill: none; stroke: rgba(37,87,245,.12); stroke-width: 1.5; }
.pload__arc { fill: none; stroke: url(#pload-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .7; transform-origin: 50% 50%; animation: pload-spin 1.8s cubic-bezier(.65, .05, .36, 1) infinite, pload-arc 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(37,87,245,.35)); }
.pload__arc--2 { stroke-width: 2; opacity: .5; stroke-dashoffset: .8; animation: pload-spin-r 2.6s cubic-bezier(.65, .05, .36, 1) infinite, pload-arc-2 2.6s ease-in-out infinite; filter: none; }
.pload__gleam { fill: none; stroke: url(#pload-shine); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .14 1; transform-origin: 50% 50%; mix-blend-mode: screen; animation: pload-gleam 1.8s cubic-bezier(.65, .05, .36, 1) infinite; }
@keyframes pload-spin { to { transform: rotate(360deg); } }
@keyframes pload-spin-r { to { transform: rotate(-360deg); } }
@keyframes pload-arc { 0%, 100% { stroke-dashoffset: .82; } 50% { stroke-dashoffset: .3; } }
@keyframes pload-arc-2 { 0%, 100% { stroke-dashoffset: .86; } 50% { stroke-dashoffset: .55; } }
@keyframes pload-gleam { 0% { transform: rotate(-40deg); opacity: 0; } 20% { opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(320deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pload__arc, .pload__gleam { animation: none; } }
.pgrid:has(> .pfeat) { row-gap: 50px; } /* the work rows breathe: 50px between one project and the next */
@media (min-width: 800px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
/* ---------- work card "shot" (change 053): client-colour background that breathes, a browser window whose full page scrolls on hover ---------- */
.shot { position: relative; height: 0; padding-top: calc(62.5% + 32px); /* same height as the browser-framed cards: 16:10 view + 32px bar */ border-radius: 10px; overflow: hidden; isolation: isolate; background: var(--brand-deep); background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand), #fff 12%) 0%, var(--brand) 22%, var(--brand-deep) 70%, var(--brand-deep) 100%); }
.shot__glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(28px); will-change: transform; }
.shot__glow--a { width: 80%; aspect-ratio: 1; left: -20%; top: -40%; background: radial-gradient(circle, color-mix(in srgb, var(--brand), #fff 35%) 0%, transparent 65%); animation: shot-a 11s ease-in-out infinite; }
.shot__glow--b { width: 70%; aspect-ratio: 1; right: -25%; top: 10%; background: radial-gradient(circle, color-mix(in srgb, var(--brand), #fff 20%) 0%, transparent 65%); animation: shot-b 14s ease-in-out infinite; }
@keyframes shot-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28%, 22%) scale(1.15); } }
@keyframes shot-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-26%, -18%) scale(1.1); } }
.shot__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%); }
.shot__win { position: absolute; z-index: 1; left: 7.5%; right: 7.5%; top: 9%; bottom: 0; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); transform: translateY(0); transition: transform .8s var(--ease); }
.pcard:hover .shot__win, .pfeat:hover .shot__win { transform: translateY(-6px); }
.shot__bar { flex: none; height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #f1efe9; border-bottom: 1px solid rgba(0,0,0,.06); }
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.shot__bar i:nth-child(2) { background: #febc2e; }
.shot__bar i:nth-child(3) { background: #28c840; }
.shot__bar span { margin: 0 auto; transform: translateX(-16px); font-size: .68rem; color: rgba(0,0,0,.45); background: rgba(0,0,0,.05); padding: 2px 12px; border-radius: 4px; }
.shot__view { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.shot__img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 5s cubic-bezier(.45, .05, .55, .95); } /* same speed both ways: down on hover, back up on leave */
.pcard:hover .shot__img, .pfeat:hover .shot__img { transform: translateY(calc(100cqh - 100%)); }
@media (hover: none) { .shot__img { animation: shot-scroll 14s ease-in-out infinite alternate; } }
@keyframes shot-scroll { to { transform: translateY(calc(100cqh - 100%)); } }
@media (prefers-reduced-motion: reduce) { .shot__glow, .shot__img { animation: none !important; transition: none !important; } .pcard:hover .shot__img, .pfeat:hover .shot__img { transform: none; } }
/* full-width work row (change 053): shot left, white rounded content panel right */
.pfeat { grid-column: 1 / -1; display: grid; gap: 24px; }
@media (min-width: 900px) { .pfeat { gap: 50px; } .pfeat--rev .pfeat__media { order: 2; } }
.pfeat__media .shot { transition: box-shadow .5s; }
.pfeat:hover .shot { box-shadow: 0 40px 70px -40px rgba(20,16,6,.55); }
.pfeat[hidden] { display: none; }
@media (min-width: 900px) { .pfeat { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.pfeat__media { position: relative; display: block; }
/* glassy round "open site" button centred on the shot — the button stays glassy; only the arrow moves: hovering anywhere on the image, it flies out top-right and a second one comes in from bottom-left */
.pfeat__go { position: absolute; left: 50%; top: 50%; z-index: 3; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); overflow: hidden; pointer-events: auto; }
.pfeat__go-in { position: relative; width: 34px; height: 34px; }
.pfeat__go .ic { position: absolute; inset: 0; width: 34px; height: 34px; stroke-width: 2.2; transition: transform .55s var(--ease), opacity .3s; }
.pfeat__go .ic:last-child { transform: translate(-130%, 130%); opacity: 0; }
.pfeat__media:hover .pfeat__go .ic:first-child { transform: translate(130%, -130%); opacity: 0; }
.pfeat__media:hover .pfeat__go .ic:last-child { transform: translate(0, 0); opacity: 1; }
.pfeat__media .shot { border-radius: 12px; height: 0; padding-top: 100%; } /* square, like the mockup */
.pfeat__panel { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 3vw, 44px); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -44px rgba(20,16,6,.35); }
.pfeat__kind { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(37,87,245,.08); color: var(--blue); font: 700 .74rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.pfeat__kind i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.pfeat h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -.02em; }
.pfeat p { color: var(--ink-2); line-height: 1.6; max-width: 48ch; }
.pfeat p + p { margin-top: -4px; }
.pfeat__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--muted); }
.pfeat__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pfeat__meta .ic { width: 14px; height: 14px; }
.pfeat .btns { margin-top: 20px; align-items: center; gap: 18px; }
.pcard { display: flex; flex-direction: column; border-radius: 16px; padding: 12px; background: var(--card); border: 1px solid rgba(255,255,255,.42); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: transform .6s var(--ease), box-shadow .6s; transform-style: preserve-3d; }
.pcard:hover { box-shadow: 0 40px 70px -40px rgba(20,16,6,.5); }
.pcard .frame { box-shadow: none; border-radius: 10px; }
.pcard__body { padding: 20px 10px 12px; display: grid; gap: 10px; }
.pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .86rem; color: var(--muted); }
.pcard h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.pcard p { color: var(--ink-2); }
.pcard[hidden] { display: none; }

/* ---------- testimonials ---------- */
.rv-dashes { display: flex; gap: 6px; }
.rv-dashes i { width: 22px; height: 4px; border-radius: 2px; background: var(--faint); transition: background-color .4s, width .4s var(--ease); }
.rv-dashes i.is-on { background: var(--blue); width: 40px; }
/* the review track sits inside the page width like every other section (it used to bleed to the screen edges); still scrolls / drags sideways */
.rv-track { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 20px; cursor: grab; overscroll-behavior-x: contain; }
/* button + dots share the top-right corner of the section head */
.rv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.rv-side .btns { margin-top: 0; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track.is-dragging { cursor: grabbing; }
.rv-track.is-dragging * { pointer-events: none; user-select: none; }
.rv { flex: none; width: calc((100% - 28px) / 3); padding: 28px 26px 24px; border-radius: 14px; display: flex; flex-direction: column; gap: 14px; } /* exactly three cards in view (gap 14px × 2) */
@media (max-width: 999px) { .rv { width: calc((100% - 14px) / 2); } }
@media (max-width: 640px) { .rv { width: 86%; } }
.rv__top { display: flex; justify-content: space-between; gap: 14px; }
.rv h3 { font-size: 1.4rem; line-height: 1.12; }
.rv__badge { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; }
.rv__badge .ic { width: 18px; height: 18px; }
.rv p { color: var(--ink-2); line-height: 1.6; flex: 1; }
.rv footer, .wall__card footer { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.rv footer b, .wall__card footer b, .bigq__who b { display: block; font: 600 1rem/1.25 var(--f-display); }
.rv footer small, .wall__card footer small, .bigq__who small { display: block; color: var(--muted); font-size: .84rem; }
.wall { columns: 1; column-gap: 14px; }
@media (min-width: 700px) { .wall { columns: 2; } }
@media (min-width: 1100px) { .wall { columns: 3; } }
.wall__card { break-inside: avoid; margin-bottom: 14px; padding: 26px 24px 22px; border-radius: 14px; display: grid; gap: 12px; }
.wall__card h3 { font-size: 1.25rem; }
.wall__card p { color: var(--ink-2); }
.sec--quote { text-align: center; }
.bigq { display: grid; justify-items: center; gap: 22px; max-width: 1000px !important; }
.bigq__mark { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--blue); color: #fff; transform: rotate(-6deg); }
.bigq__mark .ic { width: 28px; height: 28px; }
.bigq .stars .ic { width: 20px; height: 20px; }
.bigq__text { margin: 0; font: 600 clamp(1.5rem, 3.1vw, 2.8rem)/1.2 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.bigq__who { display: flex; align-items: center; gap: 14px; text-align: left; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 40px; }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 70px; } .faq__head { position: sticky; top: 40px; align-self: start; } .faq--stack { grid-template-columns: 1fr; } }
.faq__head .sec-head { margin-bottom: 0; }
.faq__head .btns { margin-top: 26px; }
.faq__list { display: grid; gap: 8px; }
.qa { border-radius: 12px; background: var(--card); border: 1px solid var(--line-card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: background-color .4s; }
.qa[open] { background: rgba(255,255,255,.62); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; cursor: pointer; list-style: none; font: 600 clamp(1.02rem, 1.3vw, 1.18rem)/1.35 var(--f-display); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa__ic { position: relative; width: 30px; height: 30px; border-radius: 8px; background: var(--pill); flex: none; transition: background-color .35s, transform .5s var(--ease); }
.qa__ic::before, .qa__ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform .5s var(--ease); }
.qa__ic::after { transform: rotate(90deg); }
.qa[open] .qa__ic, .menu__group[open] .qa__ic { background: var(--blue); color: #fff; transform: rotate(180deg); }
.qa[open] .qa__ic::after, .menu__group[open] .qa__ic::after { transform: rotate(0); }
.qa__a { overflow: hidden; }
.qa__inner { padding: 0 22px 22px; color: var(--ink-2); line-height: 1.7; max-width: 68ch; }
.qa__inner p + p { margin-top: .7em; }
.qa__inner a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- closing CTA ---------- */
.sec--cta { text-align: center; padding-top: clamp(110px, 12vw, 180px) !important; padding-bottom: clamp(110px, 12vw, 180px); }
.cta { display: grid; justify-items: center; }
.cta .eyebrow { margin-bottom: 26px; }
.cta__title { display: grid; font-size: clamp(2.8rem, 8vw, 8.2rem); line-height: .92; letter-spacing: -.045em; }
.cta__l2 { color: var(--blue); } /* was ink, painted blue by a scrubbed colour fade; change 162 removed the fade and keeps the end colour */
.cta__title--sm { font-size: clamp(2.5rem, 6.6vw, 6.6rem); } /* size: "sm" on a cta block — for longer titles that should stay on two lines */
.cta__text { margin: 34px auto 0; text-align: center; font-size: clamp(1.06rem, 1.3vw, 1.22rem); } /* a touch larger than the standard lead */
.chat { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; }
.chat__avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 10px 20px -10px rgba(0,0,0,.4); }
.chat__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* the avatar file is already a face-centred square crop */
.chat__bubble { position: relative; display: grid; align-items: center; min-height: 46px; padding: 12px 18px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 16px 30px -18px rgba(0,0,0,.35); font-weight: 500; }
.chat__dots, .chat__txt { grid-area: 1 / 1; transition: opacity .4s, transform .5s var(--ease); }
.chat__dots { display: flex; gap: 4px; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__txt { opacity: 0; transform: translateY(6px); white-space: nowrap; }
.chat.is-typed .chat__dots { opacity: 0; }
.chat.is-typed .chat__txt { opacity: 1; transform: none; }
.chat:hover .chat__bubble { background: var(--blue); color: #fff; }

/* ---------- founder ---------- */
.founder { display: grid; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (min-width: 960px) { .founder { grid-template-columns: .9fr 1.1fr; } .founder--rev .founder__media { order: 2; } }
.founder__media { position: relative; }
.founder__photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 4.6; background: #111; box-shadow: var(--shadow); }
.founder__photo img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; }
.founder__media .float-card { position: absolute; z-index: 2; }
.float-card--a { right: -5%; top: 12%; }
.float-card--b { left: -6%; bottom: 20%; }
@media (max-width: 700px) { .float-card--a { right: 3%; top: 3%; } .float-card--b { left: 3%; bottom: 16%; } }
.founder__sig { position: absolute; left: 20px; bottom: 20px; right: 20px; color: #fff; font: 700 1.2rem/1.2 var(--f-display); text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.founder__sig small { display: block; font: 400 .85rem/1.4 var(--f-body); opacity: .8; }
/* Soft fade under the name: the founder photo is light (2026-10-17), and the white name sat on a white shirt at 390. */
.founder__photo { position: relative; }
.founder__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to top, rgba(11,11,12,.58), rgba(11,11,12,0)); pointer-events: none; }
.founder__copy .sec-head { margin-bottom: 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.badges li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 99px; background: var(--pill); font-size: .9rem; font-weight: 500; }
.badges .ic { width: 16px; height: 16px; color: var(--blue); }

/* ---------- pills cloud ---------- */
.pills { display: grid; gap: 50px; align-items: center; }
@media (min-width: 960px) { .pills { grid-template-columns: 1fr 1fr; } }
.pills__copy .sec-head { margin-bottom: 24px; }
.pills__cloud { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin: 0 auto; }
.pills__cloud::before, .pills__cloud::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed var(--line-2); animation: spin 60s linear infinite; }
.pills__cloud::after { inset: 30%; animation-direction: reverse; animation-duration: 40s; }
@keyframes spin { to { transform: rotate(360deg); } }
.pills__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; box-shadow: 0 0 0 12px rgba(37,87,245,.12), 0 30px 60px -20px rgba(37,87,245,.6); z-index: 2; }
.pills__core span { width: 44px; height: 44px; border-radius: 12px; background: var(--blue); display: grid; place-items: center; }
.pills__core span .ic { width: 22px; height: 22px; }
.pills__core b { font: 700 .95rem/1.15 var(--f-display); padding: 0 12px; }
/* image core (e.g. the IDX/MLS illustration on the IDX page): the picture fills the circle */
.pills__core--img { padding: 0; overflow: hidden; background: #EEF1FA; }
.pills__core--img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 50%; display: block; }
.pill-orbit { --a: calc(360deg / var(--n) * var(--i) - 90deg); position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) rotate(var(--a)) translate(clamp(130px, 17vw, 215px)) rotate(calc(var(--a) * -1)); }
.pill-float { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 99px; background: var(--pill); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); font: 600 .9rem/1 var(--f-display); white-space: nowrap; transition: background-color .3s, color .3s; }
.pill-float:hover { background: var(--blue); color: #fff; }
/* orbit variant (change 071, CRM page): the whole ring turns slowly; each pill counter-rotates so it stays upright;
   the pills take turns lighting up brand blue as the ring goes round; the core breathes a soft blue glow */
.pills__cloud--orbit { --spin: 48s; --hold: 3s; } /* each pill stays lit for --hold, then hands over to the next */
.pills__cloud--orbit .pills__ring { position: absolute; inset: 0; animation: pills-spin var(--spin) linear infinite; will-change: transform; }
.pills__cloud--orbit .pill-orbit { animation: none; }
.pills__cloud--orbit .pill-float { animation: pills-unspin var(--spin) linear infinite, pill-lit calc(var(--hold) * var(--n)) ease-in-out infinite; animation-delay: 0s, calc(var(--hold) * var(--i) * -1); transition: none; }
.pills__cloud--orbit .pill-float .ic { transition: none; animation: pill-lit-ic calc(var(--hold) * var(--n)) ease-in-out infinite; animation-delay: calc(var(--hold) * var(--i) * -1); }
.pills__cloud--orbit .pills__core { box-shadow: 0 0 0 0 rgba(37,87,245,.35), 0 30px 60px -30px rgba(37,87,245,.7); animation: pills-core 3.2s ease-in-out infinite; }
@keyframes pills-spin { to { transform: rotate(360deg); } }
@keyframes pills-unspin { to { transform: rotate(-360deg); } }
/* 8 pills → 24 s cycle: lit from 0 to 1/8 of the cycle (3 s), ~0.4 s cross-fade at each end */
@keyframes pill-lit { 0%, 100% { background: var(--pill); color: var(--ink); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); } 1.6%, 10.9% { background: var(--blue); color: #fff; box-shadow: 0 18px 34px -14px rgba(37,87,245,.85); } 12.5% { background: var(--pill); color: var(--ink); box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); } }
@keyframes pill-lit-ic { 0%, 100% { color: var(--blue); } 1.6%, 10.9% { color: #fff; } 12.5% { color: var(--blue); } }
@keyframes pills-core { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,87,245,.35), 0 30px 60px -30px rgba(37,87,245,.7); } 50% { box-shadow: 0 0 0 22px rgba(37,87,245,0), 0 30px 70px -26px rgba(37,87,245,.9); } }
.pills__cloud--orbit .pill-float:hover { background: var(--blue) !important; color: #fff !important; }
.pills__cloud--orbit .pill-float:hover .ic { color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .pills__cloud--orbit .pills__ring, .pills__cloud--orbit .pill-float, .pills__cloud--orbit .pill-float .ic, .pills__cloud--orbit .pills__core { animation: none; } }
.pill-float .ic { width: 15px; height: 15px; color: var(--blue); }

/* ---------- link cards + rows ---------- */
.lcards { display: grid; gap: 12px; }
@media (min-width: 640px) { .lcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lcards--3 { grid-template-columns: repeat(3, 1fr); } .lcards--4 { grid-template-columns: repeat(4, 1fr); } }
.lcard { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; min-height: 220px; border-radius: 12px; transition: transform .6s var(--ease), background-color .4s, color .4s; }
.lcard::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.8), transparent 45%); transition: opacity .4s; }
.lcard:hover::after { opacity: 1; }
.lcard:hover { transform: translateY(-4px); }
.lcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: auto; padding-bottom: 18px; }
.lcard .feat__ic { width: 44px; height: 44px; }
.lcard h3 { font-size: 1.35rem; line-height: 1.12; }
.lcard p { color: var(--ink-2); font-size: .96rem; }
.lcard__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); }
.lcard__go .ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.lcard:hover .lcard__go .ic { transform: translateX(5px); }
/* who it's for: one card per audience — icon, title, copy, link (change 101) */
.auds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .auds { grid-template-columns: 1fr; gap: 16px; } }
.aud { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 28px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card); color: inherit; transition: transform .55s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease), background-color .55s var(--ease); }
/* a slow blue wash sweeps up from the bottom on hover */
.aud::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(37,87,245,.09), rgba(37,87,245,.22)); opacity: 0; transform: translateY(28%); transition: opacity .55s var(--ease), transform .7s var(--ease); }
.aud:hover, .aud:focus-visible { transform: translateY(-8px); border-color: rgba(37, 87, 245, .5); box-shadow: 0 34px 64px -38px rgba(27, 63, 209, .6); }
.aud:hover::before, .aud:focus-visible::before { opacity: 1; transform: translateY(0); }
.aud__tag { align-self: flex-start; }
.aud h3 { font: 700 clamp(1.3rem, 1.8vw, 1.7rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.aud p { font-size: .97rem; color: var(--muted); }
.aud__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 600 .92rem/1 var(--f-display); color: var(--blue); }
.aud__go .ic { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.aud:hover .aud__go .ic { transform: translateX(6px); }
/* icon chip: on hover the glyph slides out of the top and its twin arrives from below */
.aud__ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: 0 16px 30px -18px rgba(37,87,245,.9); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.aud__ic i { grid-area: 1 / 1; width: 100%; height: 100%; display: grid; place-items: center; transition: transform .5s var(--ease); }
.aud__ic i:last-child { transform: translateY(120%); }
.aud__ic .ic { width: 24px; height: 24px; }
.aud:hover .aud__ic { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 22px 36px -18px rgba(37,87,245,1); }
.aud:hover .aud__ic i:first-child { transform: translateY(-120%); }
.aud:hover .aud__ic i:last-child { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .aud, .aud::before, .aud__ic, .aud__ic i, .aud__go .ic { transition: none; } .aud:hover { transform: none; } .aud:hover .aud__ic { transform: none; } }
/* FAQ hub (change 120): sticky category rail + one filterable question list */
.fhub { display: grid; gap: clamp(24px, 3.4vw, 54px); align-items: start; }
@media (min-width: 900px) { .fhub { grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); } .fhub__rail { position: sticky; top: 104px; } }
.fhub__rail { display: grid; gap: 14px; }
.search--fq { width: 100%; }
.fcats { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); }
.fcat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 600 .97rem/1.2 var(--f-display); text-align: left; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease); }
.fcat span:nth-of-type(1) { flex: 0 0 auto; }
.fcat > span:last-of-type { flex: 1 1 auto; }
.fcat b { flex: 0 0 auto; min-width: 26px; padding: 3px 7px; border-radius: 99px; background: rgba(11,11,12,.07); color: var(--muted); font: 700 .78rem/1.2 var(--f-display); text-align: center; transition: background-color .35s var(--ease), color .35s var(--ease); }
.fcat__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(37,87,245,.1); color: var(--blue); transition: background-color .35s var(--ease), color .35s var(--ease); }
.fcat__ic .ic { width: 15px; height: 15px; }
.fcat:hover { background: rgba(11,11,12,.04); }
.fcat.is-active { background: var(--blue); color: #fff; }
.fcat.is-active .fcat__ic { background: rgba(255,255,255,.18); color: #fff; }
.fcat.is-active b { background: rgba(255,255,255,.2); color: #fff; }
.fhelp { display: grid; gap: 8px; padding: 20px; border-radius: 18px; background: var(--dark); background-image: radial-gradient(90% 80% at 85% 0%, rgba(37,87,245,.55), transparent 60%); color: #fff; }
.fhelp b { font: 700 1.05rem/1.25 var(--f-display); }
.fhelp p { font-size: .92rem; color: rgba(255,255,255,.78); }
.fhelp .btn { margin-top: 6px; justify-self: start; }
.fqs { display: grid; gap: 10px; }
.qa--hub { padding: 4px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.qa--hub:hover { border-color: rgba(37,87,245,.35); }
.qa--hub[open] { border-color: rgba(37,87,245,.45); background: var(--card-strong, var(--card)); }
.qa--hub summary { gap: 14px; }
.qa--hub .qa__q { flex: 1 1 auto; }
.qa__cat { flex: 0 0 auto; padding: 5px 10px; border-radius: 99px; background: rgba(37,87,245,.1); color: var(--blue-deep); font: 700 .7rem/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 720px) { .qa__cat { display: none; } }
.fq-empty { margin-top: 18px; text-align: center; color: var(--muted); }
.fq-empty a { color: var(--blue); text-decoration: underline; }
@media (max-width: 899px) {
  .fhub { display: flex; flex-direction: column; gap: 16px; }
  .fhub__rail { display: contents; } /* so search, chips, list and help card can be ordered independently */
  .search--fq { order: 1; }
  .fcats { order: 2; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .fcats::-webkit-scrollbar { display: none; }
  .fcat { width: auto; white-space: nowrap; }
  .fcat__ic { display: none; }
  .fhub__main { order: 3; }
  .fhelp { order: 4; } /* the help card follows the questions on a phone */
}
.lrows { border-top: 1px solid var(--line-2); }
.lrow { position: relative; isolation: isolate; display: grid; grid-template-columns: 50px 1fr auto 50px; gap: 20px; align-items: center; padding: 26px 10px; border-bottom: 1px solid var(--line-2); transition: color .5s var(--ease); }
.lrow::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); border-radius: 6px; }
.lrow:hover { color: #fff; }
.lrow:hover::before { transform: scaleY(1); }
.lrow:hover .tag--ink { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.lrow__n { font: 700 .9rem/1 var(--f-display); color: var(--muted); }
.lrow:hover .lrow__n { color: rgba(255,255,255,.6); }
.lrow__t b { display: block; font: 700 clamp(1.3rem, 2.6vw, 2.3rem)/1.05 var(--f-display); letter-spacing: -.025em; transition: transform .6s var(--ease); }
.lrow:hover .lrow__t b { transform: translateX(10px); }
.lrow__t small { display: block; margin-top: 6px; font-size: .95rem; color: var(--muted); }
.lrow:hover .lrow__t small { color: rgba(255,255,255,.7); }
.lrow__go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; transition: transform .6s var(--ease); }
.lrow__go .ic { width: 18px; height: 18px; }
.lrow:hover .lrow__go { transform: rotate(45deg); }
@media (max-width: 640px) { .lrow { grid-template-columns: 1fr 44px; gap: 12px; } .lrow__n, .lrow > .tag, .lrow > span:nth-child(3) { display: none; } .lrow__go { width: 40px; height: 40px; } }

/* ---------- duo: two expanding choice panels ---------- */
.duo { display: grid; gap: 14px; }
.duo__panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; min-height: 380px; padding: clamp(24px, 2.4vw, 36px); border-radius: 18px; background: var(--card-strong); border: 1px solid var(--line-card); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--ink); overflow: hidden; isolation: isolate; }
.duo__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.duo__ic { width: 56px; height: 56px; border-radius: 14px; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 26px -14px rgba(37,87,245,.9); transition: transform .6s var(--ease); }
.duo__ic .ic { width: 26px; height: 26px; }
.duo h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 10px; }
.duo p { color: var(--ink-2); line-height: 1.55; max-width: 46ch; }
.duo__points { display: grid; gap: 8px; margin-top: 16px; }
.duo__points li { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 500; }
.duo__points .ic { width: 20px; height: 20px; padding: 4px; border-radius: 6px; background: var(--blue); color: #fff; flex: none; stroke-width: 2.6; }
.duo__go { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 18px; border-radius: 99px; background: var(--pill); border: 1px solid var(--line-card); color: var(--ink); font-weight: 600; font-size: .95rem; transition: background-color .4s, color .4s; }
.duo__go .ic { width: 16px; height: 16px; }
@media (min-width: 900px) and (hover: hover) {
  .duo { display: flex; align-items: stretch; }
  .duo__panel { flex: 1 1 0; }
}
@media (min-width: 900px) and (hover: none) { .duo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) { .duo__panel { min-height: 0; } }

/* ---------- big stats ---------- */
.bigstats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .bigstats { grid-template-columns: repeat(4, 1fr); } }
.bigstat { display: grid; gap: 12px; padding: 30px 24px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-card); }
.bigstat b { font: 900 clamp(2.8rem, 5.6vw, 5.2rem)/.85 var(--f-display); letter-spacing: -.05em; color: var(--blue); }
.bigstat > span { font-weight: 500; color: var(--ink-2); }
.theme-dark .bigstat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.theme-dark .bigstat > span { color: rgba(255,255,255,.75); }

/* ---------- before / after ---------- */
.ba { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); user-select: none; touch-action: pan-y; }
.ba__pane .frame { border-radius: 0; box-shadow: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__tag { position: absolute; top: 16px; z-index: 3; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font: 700 .75rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.ba__tag--l { left: 16px; }
.ba__tag--r { right: 16px; background: var(--blue); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.ba__handle .ic { position: absolute; top: 50%; width: 14px; height: 14px; color: var(--blue); }
.ba__handle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ba__handle .ic:first-of-type { left: -16px; margin-top: -7px; transform: rotate(180deg); }
.ba__handle .ic:last-of-type { left: 5px; margin-top: -7px; }
.ba__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__caps { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; font-size: .9rem; color: var(--muted); }

/* ---------- prose / legal ---------- */
.doc { display: grid; gap: 40px; }
@media (min-width: 1000px) { .doc { grid-template-columns: 260px minmax(0, 1fr); gap: 60px; } .doc--notoc { grid-template-columns: minmax(0, 1fr); } }
.doc__toc { position: sticky; top: 30px; align-self: start; display: grid; gap: 2px; padding: 18px 14px; border-radius: 12px; max-height: calc(100svh - 60px); overflow: auto; }
@media (max-width: 999px) { .doc__toc { display: none; } }
.doc__toc-t { font: 700 .72rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 8px 10px; }
.doc__toc a { position: relative; padding: 7px 8px 7px 16px; border-radius: 6px; font-size: .9rem; line-height: 1.35; color: var(--ink-2); transition: background-color .3s, color .3s; }
.doc__toc a::before { content: ''; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--faint); transition: background-color .3s, transform .3s; }
.doc__toc a:hover { background: rgba(37, 87, 245, .07); }
.doc__toc a.is-active { color: var(--ink); font-weight: 600; background: var(--blue-soft); }
.doc__toc a.is-active::before { background: var(--blue); transform: scale(1.6); }
.doc__bar { height: 3px; margin: 12px 8px 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.doc__bar i { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.prose { font-size: 1.08rem; line-height: 1.8; color: var(--ink-2); max-width: 760px; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; color: var(--ink); margin-top: 2em; scroll-margin-top: 90px; }
.prose h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; color: var(--ink); margin-top: 1.6em; }
.prose h4 { font-size: 1.1rem; color: var(--ink); margin-top: 1.4em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 28px; list-style: none; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px; border-radius: 3px; background: var(--blue); transform: rotate(45deg); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 36px; list-style: none; counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: #fff; font: 700 .8rem/24px var(--f-display); text-align: center; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose blockquote { margin-left: 0; padding: 20px 24px; border-left: 4px solid var(--blue); background: rgba(255,255,255,.4); border-radius: 0 10px 10px 0; font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line-2); padding: 10px 12px; text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2.5em 0; }
.prose__updated { display: inline-flex; padding: 6px 12px; border-radius: 99px; background: var(--pill); font-size: .85rem; }

/* ---------- notice + text block ---------- */
.notice { position: relative; z-index: 4; display: flex; gap: 12px; align-items: flex-start; max-width: calc(var(--max) - 0px); margin: 0 var(--pr) 0 var(--pl); padding: 14px 18px; border-radius: 10px; background: rgba(255,255,255,.35); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
@media (min-width: 1100px) { .notice { margin-left: max(var(--pl), calc(var(--pl) + (100vw - var(--pl) - var(--pr) - var(--max)) / 2)); margin-right: max(var(--pr), calc(var(--pr) + (100vw - var(--pl) - var(--pr) - var(--max)) / 2)); } }
.notice .ic { width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }
/* ---------- case study: inside the site (change 046) — image left, copy + numbered tiles right ---------- */
.inside { display: grid; gap: 40px; }
@media (min-width: 960px) { .inside { grid-template-columns: 1fr 1fr; gap: clamp(36px, 4.5vw, 64px); align-items: center; } }
.inside__media { position: relative; }
.inside .sec-head { margin-bottom: 20px; }
.inside .rich { max-width: 56ch; }
.spec { display: grid; gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
.spec__item { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 14px; background: var(--card-strong); border: 1px solid rgba(255,255,255,.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: border-color .35s, transform .5s var(--ease), box-shadow .5s; }
.spec__item:hover { border-color: rgba(37,87,245,.55); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(37,87,245,.6); }
.spec__n { font: 700 .72rem/1 var(--f-display); letter-spacing: .08em; color: var(--muted); flex: none; width: 1.6em; }
.spec__ic { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.spec__ic .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.spec__t { font-weight: 500; line-height: 1.35; }
.inside .btns { margin-top: 26px; }
.textblock { display: grid; gap: 40px; }
@media (min-width: 960px) { .textblock--aside { grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: start; } .textblock__aside { position: sticky; top: 40px; } }
.textblock .sec-head { margin-bottom: 24px; }
.textblock .rich { max-width: 68ch; }
.textblock .rich ul { display: grid; gap: .5em; margin: 1em 0; }
.textblock .rich ul li { position: relative; padding-left: 22px; }
.textblock .rich ul li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); transform: rotate(45deg); }
.textblock .rich h3 { font-size: 1.35rem; margin: 1.4em 0 .5em; color: var(--ink); }
.textblock__aside { padding: 26px 24px; border-radius: 14px; display: grid; gap: 14px; }
.textblock__aside h3 { font-size: 1.3rem; }
.textblock__aside .checks { margin-top: 4px; font-size: .95rem; }
.textblock__aside .btn { justify-self: start; margin-top: 6px; }
.textblock__aside a:not(.btn) { color: var(--blue); text-decoration: underline; }

/* ---------- forms ---------- */
.fwrap { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .fwrap { grid-template-columns: .85fr 1.15fr; gap: 60px; } .fwrap__info { position: sticky; top: 36px; } }
.fwrap__info .sec-head { margin-bottom: 26px; }
.fpoints { display: grid; gap: 14px; margin-bottom: 26px; }
.fpoints li { display: flex; gap: 14px; align-items: flex-start; }
.fpoint__n { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; }
.fpoint__n .ic { width: 18px; height: 18px; }
.fpoints b { display: block; font: 600 1.05rem/1.3 var(--f-display); }
.fpoints small { display: block; color: var(--ink-2); font-size: .94rem; line-height: 1.5; margin-top: 2px; }
.fwrap__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; }
.fwrap__contact b { display: block; font: 600 1rem/1.2 var(--f-display); }
.fwrap__contact small { color: var(--muted); font-size: .84rem; }
.copy { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: var(--pill); font-size: .9rem; transition: background-color .3s; }
.copy:hover { background: #fff; }
.copy .ic { width: 15px; height: 15px; }
.fcard { padding: clamp(22px, 3vw, 36px); border-radius: 16px; display: grid; gap: 18px; background: var(--card-strong); }
.fcard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fcard__head h3 { font-size: 1.5rem; }
.fcard__head span { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); }
.fcard__head .ic { width: 15px; height: 15px; color: var(--blue); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font: 600 .9rem/1.3 var(--f-display); padding: 0; margin-bottom: 8px; }
.field > span { margin-bottom: 0; }
.field em { color: var(--blue); }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; font: 400 1rem/1.4 var(--f-body); color: var(--ink); padding: 14px 15px; border-radius: 10px; border: 1.5px solid var(--line-card); background: rgba(255,255,255,.75); transition: border-color .3s, background-color .3s, box-shadow .3s; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B0B0C' stroke-width='1.8' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 36px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
.field .is-invalid, .choice-grid.is-invalid { border-color: #c0392b !important; box-shadow: 0 0 0 4px rgba(192,57,43,.12); }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 12px; border: 1.5px solid transparent; }
/* application form: numbered section headings, the consent row, and the block that
   only appears once someone says they already have a website. :has() is already used
   elsewhere in this stylesheet, so the conditional needs no JavaScript. */
.fcard__sec { display: flex; align-items: center; gap: 10px; margin: 26px 0 2px; font: 700 .95rem/1.2 var(--f-display); letter-spacing: -.01em; }
.fcard__sec:first-child { margin-top: 0; }
.fcard__sec > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .72rem; flex: none; }
.form-hint { margin: -6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.field--check { grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: start; gap: 11px; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
/* `.field input` sets appearance:none and text-box padding, which left the consent box
   a blank square that never showed its tick. Hand it back to the native checkbox. */
.field--check input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; padding: 0; border-radius: 4px; cursor: pointer; }
.field--check > span { margin-bottom: 0; font-weight: 400; font-size: .92rem; line-height: 1.5; }
.when-site { display: none; grid-gap: 18px; }
.fcard:has(input[name="has_site"][value="Yes"]:checked) .when-site { display: grid; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; padding: 10px 14px; border-radius: 99px; background: rgba(255,255,255,.75); font-size: .92rem; transition: background-color .3s, color .3s, transform .3s var(--ease); cursor: pointer; border: 1.5px solid var(--line-card); }
.choice:hover span { background: #fff; }
.choice input:checked + span { background: var(--ink); color: #fff; }
.choice input:focus-visible + span { border-color: var(--blue); }
.form-note { font-size: .84rem; color: var(--muted); text-align: center; }
.form-note a { color: var(--blue); text-decoration: underline; }
.form-note.is-error { color: #b0392b; font-weight: 500; }
.form-note.is-success { color: var(--blue); font-weight: 600; }

/* ---------- blog ---------- */
.post-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; border-radius: 14px; padding: 10px; background: var(--card); border: 1px solid var(--line-card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: transform .6s var(--ease), background-color .4s; }
.post-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.55); }
.post-card[hidden] { display: none; }
.post-card__img { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--dark-2); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.06); }
.post-card__img .frame { position: absolute; inset: 0; border-radius: 0; }
.post-card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 10px 12px; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--muted); }
.post-card h2, .post-card h3 { font-size: 1.28rem; line-height: 1.18; letter-spacing: -.015em; }
.post-card p { color: var(--ink-2); font-size: 1rem; }
.post-card .link-arrow { margin-top: auto; padding-top: 8px; }
.post-feature { margin-bottom: 30px; }
@media (min-width: 900px) {
  .post-card--big { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: center; }
  .post-card--big .post-card__img { aspect-ratio: 16 / 10; }
  .post-card--big .post-card__body { padding: 20px 30px; }
  .post-card--big h2, .post-card--big h3 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; }
}
.blog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 24px; }
.search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 99px; background: var(--pill); min-width: min(320px, 100%); }
.search .ic { width: 17px; height: 17px; color: var(--muted); }
.search input { border: 0; background: none; font: inherit; padding: 11px 0; width: 100%; outline: 0; }
.a11y-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* read by screen readers, invisible on screen */
.blog-empty { text-align: center; padding: 40px; color: var(--muted); }
.posthero { display: grid; justify-items: start; } /* 241: the 980px cap and margin-left:0 pinned this block to the section padding while its own figure, the article and the CTA all sat in the 1320px container, so the title was 253px left of everything else on wide screens */
.posthero > * { max-width: 980px; } /* keeps the previous measure, so line breaks are unchanged */
.posthero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; font-size: .9rem; color: var(--ink-2); }
.posthero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.posthero__meta .ic { width: 15px; height: 15px; }
.posthero .lead { margin-top: 22px; max-width: 62ch; }
.posthero__author { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.posthero__author b { display: block; font: 600 .98rem/1.2 var(--f-display); }
.posthero__author small { color: var(--muted); font-size: .84rem; }
.posthero__img { margin-top: 44px !important; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--dark-2); box-shadow: var(--shadow); }
.posthero__img img { width: 100%; height: 100%; object-fit: cover; }
.sec--article { padding-top: clamp(30px, 4vw, 60px) !important; }
.article { display: grid; gap: 40px; }
@media (min-width: 1000px) { .article { grid-template-columns: 250px minmax(0, 1fr); gap: 60px; } }
.article__sticky { position: sticky; top: 30px; display: grid; gap: 10px; }
@media (max-width: 999px) { .article__side { order: 2; } .article__side .doc__toc { display: none; } }
.share { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; }
.share > span { font: 700 .72rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.share a, .share button { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--pill); transition: background-color .3s, color .3s; }
.share a:hover, .share button:hover { background: var(--blue); color: #fff; }
.share .ic { width: 15px; height: 15px; }
.prose--post { max-width: 780px; }
.prose--post > p:first-child { font-size: 1.22rem; line-height: 1.7; color: var(--ink); }
.post-cta { margin-top: 3em !important; padding: 28px; border-radius: 16px; display: grid; gap: 20px; align-items: center; background: var(--dark) !important; color: #fff; background-image: radial-gradient(circle at 100% 0%, rgba(37,87,245,.55), transparent 55%) !important; }
@media (min-width: 760px) { .post-cta { grid-template-columns: 1fr auto; } }
.post-cta .eyebrow { margin-bottom: 12px; }
.post-cta h3 { font-size: 1.6rem; color: #fff; margin: 0 0 8px; }
.post-cta p { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.6; }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2em !important; }
.post-tags > .ic { width: 18px; height: 18px; color: var(--blue); }
.post-tags .chip { text-decoration: none; color: var(--ink); font-size: .85rem; padding: 7px 12px; }
.author-box { display: flex; gap: 20px; align-items: flex-start; padding: 24px; border-radius: 16px; margin-top: 2em !important; }
.author-box small { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.author-box b { display: block; font: 700 1.2rem/1.3 var(--f-display); color: var(--ink); margin: 2px 0 8px; }
.author-box p { font-size: .98rem; line-height: 1.6; margin-bottom: 10px; }
.author-box .link-arrow { text-decoration: none; }
@media (max-width: 560px) { .author-box { flex-direction: column; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; z-index: 5; padding: 0 var(--pr) 18px var(--pl); }
.footer__card { position: relative; overflow: hidden; border-radius: 22px; background: var(--dark); color: #fff; padding: clamp(30px, 4vw, 56px) clamp(22px, 4vw, 56px) 0; background-image: radial-gradient(circle at 90% 0%, rgba(37,87,245,.45), transparent 45%); }
.footer__cta { display: grid; gap: 30px; align-items: end; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(255,255,255,.12); }
@media (min-width: 1000px) { .footer__cta { grid-template-columns: 1fr auto; } }
.footer__big { font: 700 clamp(2rem, 4.4vw, 4.2rem)/1 var(--f-display); letter-spacing: -.035em; max-width: 16ch; }
.footer__big em { color: #86A0FF; }
.footer__cta .btns { margin-top: 0; }
.footer__cols { display: grid; gap: 34px 24px; padding: clamp(40px, 5vw, 60px) 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .footer__cols { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; align-content: start; }
@media (min-width: 1300px) { .footer__brand { grid-column: auto; padding-right: 30px; } }
.footer__brand p { color: rgba(255,255,255,.72); font-size: 1.12rem; line-height: 1.6; max-width: 34ch; }
.footer__mail { display: inline-flex; align-items: center; gap: 10px; font-size: 1.18rem; font-weight: 600; }
.footer__mail .ic { width: 19px; height: 19px; color: #86A0FF; }
.footer__mail:hover { color: #86A0FF; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: background-color .3s, transform .4s var(--ease); }
.footer__social a:hover { background: var(--blue); transform: translateY(-3px); }
.footer__social .ic { width: 19px; height: 19px; }
.footer__find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.05rem; color: rgba(255,255,255,.62); }
.footer__find a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; }
.footer__find a:hover { background: var(--blue); }
.footer__find .ic { width: 17px; height: 17px; }
.footer__col { display: grid; gap: 9px; align-content: start; }
.footer__col h4 { font: 700 .86rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.footer__col a { font-size: 1.23rem; color: rgba(255,255,255,.82); width: max-content; max-width: 100%; background: linear-gradient(#86A0FF, #86A0FF) no-repeat 0 100% / 0 1px; transition: background-size .45s var(--ease), color .3s; }
.footer__col a:hover { color: #fff; background-size: 100% 1px; }
@media (max-width: 1000px) { .footer__col a { font-size: 1.06rem; width: auto; } .footer__brand p { font-size: 1.05rem; } } /* width:auto so long labels wrap instead of running off a narrow screen */
/* wordmark: sunk into the bottom edge of the card — top 70% shows — and the letters fade toward the cut (change 043) */
.footer__word { position: relative; font: 900 100px/.8 var(--f-display); font-stretch: 125%; letter-spacing: -.03em; color: var(--blue); display: flex; justify-content: space-between; white-space: nowrap; margin: clamp(28px, 3vw, 44px) 0 -.09em; mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.3) 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.3) 100%); } /* glyphs are ~.72em tall: -.09em trims only the very bottom; the letters themselves fade toward the cut */
/* outline wordmark (change 042): hollow letters, brand-blue stroke */
.footer__word--outline .ch { overflow: visible; } /* the letter boxes used to clip the stroke at the baseline (P, R) */
.footer__word--outline .ch > span { color: transparent; -webkit-text-stroke: .022em #86A0FF; }
/* letter-by-letter rise on scroll (change 141, corrected in 150).
   clip-path, not overflow: overflow: hidden cut the bottom of the glyphs, which is why
   change 042 switched clipping off in the first place, and it also changes an
   inline-block's baseline. clip-path clips without touching layout or baseline, and the
   negative insets let the ink and the .022em stroke sit outside the box while still
   hiding a letter parked below. The letters are moved by JS, never by CSS, so if GSAP
   never loads anim-ready is dropped and the wordmark renders normally. */
.anim-ready .footer__word--outline .ch { clip-path: inset(-0.8em 0 -0.16em 0); }
.anim-ready .footer__word--outline .ch > span { will-change: transform; }
.footer__copy { font-size: 1rem; color: rgba(255,255,255,.5); }
.footer__col-sub { margin-top: 14px; }
/* back to top: a round button pinned to the middle of the card's right edge */
.footer__top { position: absolute; right: clamp(16px, 2.2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: background-color .35s, border-color .35s, transform .5s var(--ease); }
.footer__top .ic { width: 18px; height: 18px; transform: rotate(-90deg); }
.footer__top:hover { background: var(--blue); border-color: var(--blue); transform: translateY(calc(-50% - 3px)); }
@media (min-width: 1300px) { .footer__cols { padding-right: 84px; } }
@media (max-width: 1299px) { .footer__top { position: static; transform: none; margin: 4px 0 0 auto; } .footer__top:hover { transform: translateY(-3px); } } /* narrower screens: below the columns, right-aligned, so it never sits on the links */

/* ==========================================================================
   Motion states (JS adds .anim-ready before animating — without JS everything is visible)
   ========================================================================== */
/* Only the hero starts hidden now. The scroll reveals below the fold no longer
   animate opacity at all (change 199), so if they started at 0 here nothing
   would ever turn them back on: GSAP writes no inline opacity when a tween's
   from and to are both 1, and this rule would win. Leaving them visible also
   means content still renders if the scripts fail. */
/* The hero no longer starts hidden. .anim-ready is added by an inline script before
   first paint, so this rule kept the largest element on the page invisible until GSAP
   had downloaded and run: LCP was 4.4s on mobile. The intro still moves, it just does
   not fade from nothing, which is the same trade made for the scroll reveals in 199. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .orb { animation: none; }
}
@media print {
  .nav, .backdrop, .footer__word, .cursor, .curtain { display: none !important; }
  :root { --pl: 0; --pr: 0; }
}

/* ---------- fixes ---------- */
.sec--hero > * { width: 100%; }
.split__media .frame { max-width: 560px; margin-inline: auto; }
.split__media .frame--full { max-width: none !important; } /* media.cls: full-width image in its column (overrides the 500px cap below) */
.split--tight { gap: clamp(28px, 4.4vw, 64px); } /* tight: true — less air between copy and image */
.split__media .frame--browser { max-width: none; }
.ba { max-width: 1100px !important; }
@media (min-width: 1100px) { .sec--hero:has(.hero-in--solo) { min-height: min(78svh, 760px); } }
html, body { overflow-x: clip; }
.hero-chips a { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.hero-chips li:has(a) { transition: background-color .3s, color .3s; }
.hero-chips li:has(a):hover { background: var(--ink); color: #fff; }
.hero-chips li:has(a):hover .ic { color: #fff; }

.split__copy .h-xl, .pills__copy .h-xl, .founder__copy .h-xl, .fwrap__info .h-xl, .textblock .h-xl, .faq__head .h-xl { font-size: clamp(2rem, 3.3vw, 3.3rem); }
.split__media .frame { max-width: 500px; }
/* hero-in--center: an inner hero centred the way the home hero is. About Reaplex only. */
.hero-in--center .hero-in__copy { justify-items: center; text-align: center; }
.hero-in--center .h-hero { max-width: 20ch; margin-inline: auto; } /* wider than the 16ch solo cap, so the title breaks into two lines like the home hero */
.hero-in--center .h-hero em { display: block; } /* the blue half starts its own line, the way .hero__ln--blue does on the home hero */
.hero-in--center .lead { max-width: 60ch; margin-inline: auto; }   /* matches .hero__lead */
.hero-in--center .hero-chips { justify-content: center; }
/* Spacing asked for on the About hero: 50px from the header bar down to the badge, and 20px from the badge down to the ink of the headline.
   The header bar's bottom edge sits at 122px at 1100px and up, and at 104px below that, so the section padding is those plus 50.
   0.09em is the empty space this font leaves above its capitals, measured off rendered pixels, so subtracting it makes the 20px a gap you can actually see. */
.sec--hero:has(.hero-in--center) { padding-top: 124px; } /* nav bottom is 74px below 1100px since change 176, so 124 keeps the 50px gap */
@media (min-width: 1100px) { .sec--hero:has(.hero-in--center) { padding-top: 140px; } } /* 172 -> 140 with the header (2026-10-18) */
.hero-in--center .h-hero { margin-top: calc(20px - 0.09em); }


/* frame--hug: care plans 'set and forget' split only. No dark fill behind the photo (it showed as a hairline at the rounded edge), and the frame fills its column so its edge lines up with the container. */
.split__media .frame--hug { background: transparent; }
.split__media .frame.frame--hug { max-width: none; margin-inline: 0; }

/* ---------- shared: floating cards + split letters ---------- */
.ch { display: inline-block; overflow: hidden; padding: .04em 0 .03em; margin: -.04em 0 -.03em; vertical-align: top; }
.ch > span { display: inline-block; }
.float-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--card-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--line-card); box-shadow: 0 24px 50px -24px rgba(20,16,6,.45); white-space: nowrap; text-align: left; }
.float-card b { display: block; font: 700 .95rem/1.2 var(--f-display); }
.float-card span:not(.float-card__ic) { display: block; font-size: .8rem; color: var(--muted); }
.float-card__ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; }
.float-card__ic .ic { width: 18px; height: 18px; }
/* Same reason as above, for the home hero. */
@media (max-width: 900px) { .hv .hv__f--speed { display: none; } }
@media (max-width: 600px) {
  .hv .hv__f--lead { display: none; }
  .hv .hv__f--own { left: 3%; bottom: -14%; }
  .hero__badge { font-size: .84rem; padding: 7px 14px; }
  .hero__badge-sep, .hero__badge-more { display: none; }
  .hero__proof .hero__faces { display: none; }
}

/* ==========================================================================
   Accessibility: small blue text (change 187)
   Brand blue #2557F5 on the beige background measures 3.59:1. WCAG AA needs
   4.5:1 for text below 24px (or below 18.66px bold), so every inline link and
   small blue label was failing. --blue-deep #1B3FD1 measures 5.04:1.

   Deliberately NOT changed, because they already pass the 3:1 bar that applies
   to large text and to graphics: headline <em>, .stat__v, .jcard__num,
   .jcard__year, .bigstat b, .cta__l2, .hero__ln--blue, every .ic icon, .stars,
   and white-on-blue buttons. Brand blue stays where the brand is loudest.
   ========================================================================== */
.lead a, .rich a, .prose a, .qa__inner a, .cmp-note a, .fq-empty a,
.textblock__aside a:not(.btn), .crumbs a:hover,
.link-arrow, .lcard__go, .aud__go, .pfeat__kind,
.dd__link.is-current b, .mq__track b, .mq__track strong { color: var(--blue-deep); }

/* ==========================================================================
   Typographic rag (change 188)
   Measured across 19 pages at 390: 26 paragraphs ended on a stub line under
   18% of the column width, and 5 headings ended on a stub under 30%. The
   homepage lead finished with the word "in." alone on its own line.

   balance evens out the line lengths of short blocks, which is what a headline
   wants. pretty leaves the line breaking alone but refuses to leave an orphan
   on the last line, which is what body copy wants. Both degrade to normal
   wrapping in browsers that do not support them, so nothing breaks.
   ========================================================================== */
h1, h2, h3,
.h-hero, .h-xl, .h-post, .h-sm,
.cta__title, .footer__big, .sec-head h2,
.post-card h2, .post-card h3, .jcard h3, .lcard__t, .fcard__head { text-wrap: balance; }

p, li,
.lead, .lead--lg, .prose p, .rich p,
.post-card p, .lcard__d, .jcard p { text-wrap: pretty; }

/* ==========================================================================
   Scroll smoothness: backdrop-filter only where it can be seen (change 189)

   These cards sit at static position on the flat page background, so their
   backdrop-filter was blurring a solid colour and producing nothing, while
   still forcing a compositing layer and a per-frame backdrop sample. Measured
   during a 3000px scroll on the home page:

       with backdrop-filter     worst frame 83.4ms, 6 frames over 33ms
       without backdrop-filter  worst frame 16.8ms, 0 frames over 33ms

   An 83ms stall is a five frame stutter, which is what reads as smearing or a
   trail behind text while scrolling. Removing it from these classes across 20
   viewport comparisons on 5 pages changed 538 pixels out of 25.9 million,
   which is 0.002% and is antialiasing on card edges.

   The translucent background stays, so the cards look exactly the same.

   Glass is KEPT where something actually passes behind it: .nav__bar,
   .dd__panel, .nav-scrim, .float-card, .st-card and .pfeat__go.
   ========================================================================== */
.rv, .post-card, .qa, .feat, .jcard, .plans, .tbl-wrap {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Same reasoning, two more cases (change 189)

   .glass is only ever applied to static or relative cards sitting on the flat
   page background: .rv, .wall__card, .lcard, .tbl-wrap, .fwrap__contact and
   .fcard. Checked across 5 pages, and neither .nav__bar nor .dd__panel carries
   the class, so the places where glass is actually seen keep their blur.

   will-change on .btn permanently promoted a compositing layer for every button
   on the page, 22 of them on the home page, for a transform that only happens
   on hover. The spec is explicit that will-change should not be left on
   indefinitely. Scoped to hover and keyboard focus instead.

   Measured over 3 runs per page during a 3000px scroll, worst frame:
       /the-work/   133.4ms  ->  17.7ms
       /            83.5ms   ->  16.8ms
   -------------------------------------------------------------------------- */
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

.btn { will-change: auto; }
.btn:hover, .btn:focus-visible { will-change: transform; }

/* --------------------------------------------------------------------------
   Portfolio card glows (change 189)

   .shot__glow is already a radial-gradient that fades to transparent at 65%,
   and then had filter: blur(28px) applied on top of it. Blurring an already
   soft gradient adds almost nothing visible, but it costs a full GPU blur pass
   on 30 elements, each of which animates transform on an 11s and 14s infinite
   loop. That is a permanent, continuous load and it is why /the-work/ was the
   heaviest page on the site.

   Measured with the animation frozen: removing the blur changed 0.76% of the
   viewport by a maximum delta of 21 out of 765, which is not perceptible.

   will-change is redundant here: the browser already promotes an element whose
   transform is animating, so the hint only kept the layer alive permanently.
   -------------------------------------------------------------------------- */
.shot__glow { filter: none; will-change: auto; }

/* --------------------------------------------------------------------------
   Statement block last line (change 190)

   .statement__text already asked for text-wrap: balance, but the block carries
   inline .st-chip elements and runs long, and the result still left the final
   word stranded: the last line measured 16.9% of the column at 1920 and 18.4%
   at 1440, which is the word "power." alone.

   pretty targets exactly that, and measured better here: 25.1% and 27.3%, with
   the block height unchanged at 530px and 488px so nothing below it shifts.
   Widening the measure to 24ch was also tried and was worse on both counts.
   -------------------------------------------------------------------------- */
.statement__text { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Footer columns overlapped between 1300px and 1800px (change 190)

   .footer__col a carried width: max-content, so a long label could not wrap,
   and the five column layout started at 1300px where each column is only
   ~190px. Long labels ran straight over the next column. Measured overflow:

       1366   14 links overflowing, worst +83px
       1440   12 links overflowing, worst +71px
       1600    9 links overflowing, worst +42px

   "Website Redesign & Migration" needs about 262px at 1.23rem, so five columns
   genuinely need roughly a 1770px viewport. Below that the columns were always
   going to be too narrow.

   Fixed by giving the link columns more room in that range (a narrower brand
   column and less right padding) and setting the link size to 1.06rem, which
   is the value the design already uses below 1000px rather than a new one.
   width: fit-content replaces max-content as a permanent safety net, so a long
   label can wrap instead of overflowing at any width.

   Moving to three columns instead was tried and rejected: it fixed the overlap
   but made the footer 465px taller at 1440. This keeps the five column design
   and the footer height barely moves (668px to 683px at 1440).
   -------------------------------------------------------------------------- */
.footer__col a { width: fit-content; }

@media (min-width: 1300px) and (max-width: 1799px) {
  .footer__cols { grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)); padding-right: 24px; }
  .footer__col a { font-size: 1.06rem; }
}

/* --------------------------------------------------------------------------
   Statement chip followed by punctuation (change 195)

   .st-chip carries margin: 0 .1em, which at the statement's 68.8px type is
   nearly 7px each side. When a comma or full stop follows the chip, that right
   margin pushed it away and it read as a typo: "same IDX [chip] , lead capture".
   42 places across the site had a chip immediately followed by punctuation.

   The block now tags those chips so the punctuation sits tight against them.
   -------------------------------------------------------------------------- */
.st-chip--tight { margin-right: 0; }

/* --------------------------------------------------------------------------
   Curtain is inert unless a transition is running (change 196)

   .curtain is position: fixed, inset: 0, the full viewport, painted brand blue
   and held off screen with transform: translateY(100%). A transformed fixed
   element is promoted to its own compositing layer, so the browser was carrying
   a viewport-sized layer on every page, during every scroll, for something only
   used during a page transition.

   The print rule at the end of this file hides it, but nothing hid it on screen.

   visibility: hidden takes it out of the compositing tree entirely. The two
   states that actually use it turn it back on, and because visibility flips
   immediately while the transform still transitions, the animation is unchanged.
   -------------------------------------------------------------------------- */
.curtain { visibility: hidden; }
html.is-entering .curtain, html.is-leaving .curtain { visibility: visible; }

/* --------------------------------------------------------------------------
   Journey line showing through the step cards (change 197)

   .jcard--j is background: var(--card-strong), rgba(236,232,221,.86), so it is
   14% transparent. It also had backdrop-filter: blur(10px), which smeared the
   drawn journey line passing behind it into invisibility.

   Change 189 removed backdrop-filter from .jcard as part of a blanket cleanup.
   That was right for every other card, which sits on flat background, but wrong
   here: with the blur gone the line reads as a sharp stroke straight across the
   card. This is a regression from that change, reported by the owner.

   Fixed by making the card opaque rather than restoring the blur, which keeps
   the performance gain. The value is the measured composite of the translucent
   card over the page background, sampled from the rendered page: #E9E4D9. The
   card looks the same and the line is now properly hidden behind it.
   -------------------------------------------------------------------------- */
.jcard--j { background: var(--card-strong); }

/* --------------------------------------------------------------------------
   Logo artwork in the curtain and the footer wordmark (change 198)

   Both places previously set the wordmark as live text: the loading curtain as
   'REAPLEX' plus a dot element, and the giant footer mark as outlined letters.
   Both now use the real logo file, logo-reaplex-light.png, which is white with
   the blue dot on transparency and reads correctly on both the blue curtain and
   the dark footer card.

   The footer keeps its existing treatment: full width of the card, and the same
   gradient mask and negative bottom margin that crop the lower part of the mark
   so it bleeds off the edge of the card.
   -------------------------------------------------------------------------- */
.curtain__logo { display: block; width: clamp(190px, 26vw, 400px); height: auto; }
.curtain__logo img { display: block; width: 100%; height: auto;
  /* The curtain is painted brand blue, and the light logo's dot is #4C74FF,
     which is blue on blue and all but disappears. Rendering the mark pure white
     is how a logo should sit on its own brand colour. */
  filter: brightness(0) invert(1); }


/* --------------------------------------------------------------------------
   Footer wordmark dot (change 198)

   The giant footer mark is coded text, not an image, as it always was. It now
   spells the logo's lowercase wordmark rather than uppercase REAPLEX, and the
   logo's dot rides on the final letter so the flex space-between spread does
   not push it to the far edge.

   The dot takes the same light blue as the outline stroke so the two read as
   one mark. The global .logo-dot is white, which is right in the header and
   wrong here.
   -------------------------------------------------------------------------- */
.footer__word .logo-dot { background: #86A0FF; width: .26em; height: .26em; margin-left: .04em; vertical-align: baseline; }

/* --------------------------------------------------------------------------
   The banded ground, site wide (change 236)

   Replaces the two page-scoped experiments, 234 on /real-estate-website-design/
   and 235 on /idx-websites/. Both of those blocks are gone; this is now the
   site's ground.

   Three values, never one:

     #F8FAFF  canvas, the default ground, also on <body>
     #EFF4FF  the subtle band
     #FFFFFF  the white band

   The cycle below is bunzy.io's homepage order, measured section for section:
   subtle, canvas, white, canvas, subtle, white, canvas, white, canvas. Nine
   steps rather than a simple alternation because that is what the source
   actually does, and because no two neighbours in it match, including across
   the wrap from step 9 back to step 1.

   Counting is :nth-of-type over every section, so a dark section still takes
   its turn and the rhythm either side of it is unchanged. Painting is
   :not(.theme-dark), so dark sections keep their own treatment.

   background-color, never background, so .sec--work keeps its gradient.

   On a white band a white card is only its hairline, so those steps also
   retint the card variables, which is what bunzy does on its own white
   sections.
   -------------------------------------------------------------------------- */
main > section:not(.theme-dark):nth-of-type(9n+1) { background-color: #EFF4FF; }
main > section:not(.theme-dark):nth-of-type(9n+2) { background-color: #F8FAFF; }
main > section:not(.theme-dark):nth-of-type(9n+4) { background-color: #F8FAFF; }
main > section:not(.theme-dark):nth-of-type(9n+5) { background-color: #EFF4FF; }
main > section:not(.theme-dark):nth-of-type(9n+7) { background-color: #F8FAFF; }
main > section:not(.theme-dark):nth-of-type(9n+9) { background-color: #F8FAFF; }

main > section:not(.theme-dark):nth-of-type(9n+3),
main > section:not(.theme-dark):nth-of-type(9n+6),
main > section:not(.theme-dark):nth-of-type(9n+8) {
  background-color: #FFFFFF;
  --card: #EFF4FF;
  --card-strong: #EFF4FF;
  --card-solid: #EFF4FF;
  --pill: #EFF4FF;
}

/* ---------- home UX pass (2026-10-17) ---------- */
/* Who we help: four audience cards. Scoped to the home section so the 3-up .auds elsewhere is untouched. */
@media (min-width: 640px) { .sec--aud4 .auds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec--aud4 .auds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .sec--aud4 .aud { padding: 28px 24px 24px; } }
/* Phones: compact rows (icon, title + line, arrow); the whole card is the link. */
@media (max-width: 639px) {
  .sec--aud4 .auds { gap: 10px; }
  .sec--aud4 .aud { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; column-gap: 14px; row-gap: 4px; align-items: center; padding: 16px 16px 16px 14px; border-radius: 16px; }
  .sec--aud4 .aud__ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; align-self: start; }
  .sec--aud4 .aud__ic .ic { width: 20px; height: 20px; }
  .sec--aud4 .aud h3 { grid-column: 2; font-size: 1.12rem; }
  .sec--aud4 .aud p { grid-column: 2; font-size: .9rem; line-height: 1.5; }
  .sec--aud4 .aud__go { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; }
  .sec--aud4 .aud__go > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Home blog cards: a swipe row below 1100px instead of a tall stack (mobile) or a 2 + 1 orphan (tablet). */
@media (max-width: 1099px) {
  .sec--posts .post-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 380px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 14px; margin-right: calc(var(--pr) * -1); padding-right: var(--pr); scrollbar-width: thin; }
  .sec--posts .post-grid > * { scroll-snap-align: start; }
}

/* ---------- .sec--tidy: opt-in card tidy-up (UX pass 2026-10-17) ----------
   Added per page through 'cls' => 'sec--tidy' on features / links sections.
   Desktop: titles align at the top of every card, the link sits at the foot.
   Phones: each card becomes a compact row (icon beside title, text, link). */
.sec--tidy .feat:not(.feat--hero) .feat__top, .sec--tidy .lcard__top { margin-bottom: 0; }
.sec--tidy .feat:not(.feat--closer) .link-arrow, .sec--tidy .lcard__go { margin-top: auto; padding-top: 6px; }
@media (max-width: 699px) {
  .sec--tidy .feat:not(.feat--closer), .sec--tidy .lcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; min-height: 0; padding: 18px 18px 18px 16px; }
  .sec--tidy .feat__top, .sec--tidy .lcard__top { grid-row: 1 / span 3; padding: 0; }
  .sec--tidy .feat__n, .sec--tidy .lcard__top .tag { display: none; }
  .sec--tidy .feat__ic, .sec--tidy .lcard .feat__ic { width: 44px; height: 44px; border-radius: 12px; }
  .sec--tidy .feat__ic .ic { width: 20px; height: 20px; }
  .sec--tidy .feat:not(.feat--closer) > :not(.feat__top), .sec--tidy .lcard > :not(.lcard__top) { grid-column: 2; }
  .sec--tidy .feat h3, .sec--tidy .lcard h3 { font-size: 1.12rem; }
  .sec--tidy .feat p, .sec--tidy .lcard p { font-size: .92rem; line-height: 1.5; }
  .sec--tidy .feat .link-arrow, .sec--tidy .lcard__go { margin-top: 2px; padding-top: 0; font-size: .92rem; }
  .sec--tidy .feat-grid, .sec--tidy .lcards { gap: 10px; }
}

/* Feature card with a photo behind it ('img' on a features item; used on the bento hero card). */
.feat--img { background: var(--dark); color: #fff; border-color: transparent; }
.feat--img .feat__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feat--img::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.05) 35%, rgba(11,11,12,.82) 100%); }
.feat--img:hover .feat__img { transform: scale(1.04); }
.feat--img p { color: rgba(255,255,255,.85); }
.feat--img .feat__n { color: rgba(255,255,255,.7); }
.feat-grid--bento .feat--hero.feat--img { background-image: none; }
@media (max-width: 999px) { .feat--img { min-height: 340px; justify-content: flex-end; } .sec--tidy .feat.feat--img { display: flex; min-height: 300px; } .sec--tidy .feat.feat--img .feat__top { margin-bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .feat--img .feat__img { transition: none; } .feat--img:hover .feat__img { transform: none; } }

/* Feature cards that carry a short list (process steps turned into cards). */
.feat .checks { margin-top: 4px; gap: 6px; font-size: .9rem; }
.sec--process .feat { min-height: 0; }

/* Review wall: phones show eight reviews, then a "Show all" button (block: review-wall.php). */
.wall__more { display: none; justify-content: center; margin-top: 22px; }
@media (max-width: 699px) {
  .sec--wall:not(.is-all) .wall__card:nth-child(n+9) { display: none; }
  .wall__more { display: flex; }
}

/* Portrait in a square hero frame: keep the face in view (contact hero). */
.frame--face img { object-position: 50% 22%; }

/* Statement: a chip and the punctuation after it never split across lines. */
.st-pair { white-space: nowrap; }

/* Newer posts carry their own "What this guide covers" list. The rail replaces it where the rail shows (2026-10-18). */
@media (min-width: 1000px) { .prose--post h2#contents, .prose--post h2#contents + ul { display: none; } }
/* Buttons inside an article (the post CTA) keep their own colors; .prose a was turning the label blue and underlined (2026-10-18). */
.prose a.btn { text-decoration: none; }
.prose a.btn--blue { color: #fff; }
/* Images inside articles (blog visuals, 2026-10-20). Full column width, the site radius, a quiet caption. */
.prose figure { margin: 2.2em 0 !important; }
.prose figure picture { display: block; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-card); background: var(--bg); box-shadow: 0 24px 50px -36px rgba(20, 16, 6, .45); }
.prose figcaption { margin-top: 12px; font-size: .9rem; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }