/* CursorLock homepage — desktop build from Figma "Chosen v2" (90:689), 1440px design width */
:root {
  --ink: #0a0a0a;
  --ink-2: #101114;
  --nav-ink: #191919;
  --muted: #5a5d6b;
  --plum: #461D78;
  --plum-deep: #4c1b87;
  --blush: #ffd0e6;
  --lilac-panel: linear-gradient(1.79deg, #ead8ff 4.52%, #f9f6fc 83.39%);
  --pill: #4a256c;
  --frame: 1440px;
  --grain: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise: url(assets/noise.png);   /* Figma NOISE: mono black @25%, size .5, density 1 */
  --head: 'Anek Latin', sans-serif;
  --body: 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #fff; }
html { overflow-x: clip; }
body {
  font-family: var(--body);
  font-optical-sizing: auto;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* A 1440px stage centered on the page — the design's coordinate space */
.frame { position: relative; width: var(--frame); margin: 0 auto; }

/* WIDE SCREENS — the page never grows past the 1440px design: backgrounds, glows and the footer stop at
   its edges (body clips them), and the space either side is light grey */
@media (min-width: 1441px) {
  html { background: #fafafb; }
  body { max-width: 1440px; margin: 0 auto; }
  body .cookie-banner { left: calc((100vw - 1440px) / 2 + 24px); }   /* stays on the page, not out in the grey */
}

.eyebrow { font: 300 14px/18px var(--body); text-transform: uppercase; color: var(--ink); }
.h2 { font: 300 48px/60px var(--head); color: var(--ink); }
.lede { font: 300 18px/20px var(--body); color: #000; }

/* Dark pill button used across the page */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 15px;
  background: #191919; border: .5px solid rgba(0,0,0,.2); border-radius: 6px;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  font: 400 14px/1 var(--body); color: #fff; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,18,24,.18); background: #000; }

/* Figma GLASS on translucent white panels (frost 13, refraction .91, light −45°): a crisp 1px light
   rim and a soft light sweep toward the bottom-right, over 50% white */
.glass {
  background: linear-gradient(120deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 100%), rgba(255,255,255,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.9);
}
/* Figma NOISE — on the layer's own fill, beneath its content */
.noise::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--noise) 0 0 / 256px 256px;
}

/* ── PAGE BACKGROUND GLOWS (absolute, behind everything) ── */
body { position: relative; }
.page-glows { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.page-glows img { position: absolute; left: 0; width: 100%; object-fit: fill; }

/* Below 1440px wide the whole page scales down as one piece (--fit is set by site.js) */
main.site, .page-glows { zoom: var(--fit, 1); }
main.site { position: relative; z-index: 1; }

/* ── NAV ── */
.nav { position: absolute; inset: 0 0 auto; height: 80px; z-index: 5; }
.nav .frame { height: 100%; }
.nav-logo { position: absolute; left: 76px; top: 26px; display: flex; align-items: center; gap: 4px; }
.nav-logo .mark { width: 27.5px; height: 26px; display: grid; place-items: center; }
.nav-logo .mark img { width: 19.55px; height: 19.54px; transform: rotate(28.33deg) skewX(-3.39deg); }
.nav-logo span {
  font-family: 'Roboto Flex', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink);
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712;
  margin-top: 2px;
}
.nav-links { position: absolute; top: 31px; left: 571px; display: flex; list-style: none; }
.nav-links a {
  display: block; width: 103.7px; text-align: center;
  font: 300 14px/18px var(--body); color: var(--nav-ink);
  transition: opacity .2s ease;
}
.nav-links a:hover { opacity: .6; }
.nav .btn { position: absolute; left: 1231px; top: 25px; width: 133px; height: 30px; }

/* ── HERO ── */
.hero { position: relative; height: 831px; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-tint {
  position: absolute; left: 0; right: 0; top: 275px; height: 591px; opacity: .8;
  /* Figma interpolates transparent-white → pink in straight color (whiter midtones than CSS), so stops are explicit */
  background: linear-gradient(to bottom, rgba(255,255,255,0.000) -1.3%, rgba(255,234,244,0.125) 8.1%, rgba(255,214,233,0.250) 17.5%, rgba(255,194,222,0.375) 27.0%, rgba(255,173,212,0.500) 36.4%, rgba(255,152,201,0.625) 45.8%, rgba(255,132,190,0.750) 55.2%, rgba(255,112,179,0.875) 64.7%, rgba(255,91,168,1.000) 74.1%);
}
.hero-patterns { position: absolute; top: 37.4px; left: calc(50% - 1115.2px); width: 2211.71px; height: 1054.91px; max-width: none; }
/* Figma's blur is progressive (soft at the top, crisp toward the bottom); the SVG export flattens it,
   so a less-blurred copy fades in from ~38% down */
.hero-patterns.soft {
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 38%, transparent 96%);
}
.hero-patterns.sharp {
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 96%);
  mask-image: linear-gradient(to bottom, transparent 38%, #000 96%);
}
/* The group's noise, clipped to the pattern's own shape (its alpha already carries the 50% opacity) */
.hero-noise {
  position: absolute; top: 37.4px; left: calc(50% - 1115.2px); width: 2211.71px; height: 1054.91px;
  background: var(--noise) 0 0 / 256px 256px; opacity: .6;
  -webkit-mask: url(assets/figma/hero-patterns.svg) 0 0 / 100% 100% no-repeat;
  mask: url(assets/figma/hero-patterns.svg) 0 0 / 100% 100% no-repeat;
}
.hero .frame { height: 100%; }
.hero-copy { position: absolute; left: 72px; top: 161px; width: 585px; }
.hero-copy h1 { margin-top: 28px; font: 300 62px/60px var(--head); color: var(--ink); }
.hero-side { position: absolute; left: 973px; top: 216.5px; width: 408px; }
.hero-side .btn { margin-top: 28.5px; margin-left: 5px; width: 169px; }

/* Glass browser frames with the recorded prototypes */
.mock {
  position: absolute; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mock video {
  position: absolute; object-fit: cover; object-position: top center; background: #fff;
  border: 1px solid rgba(255,255,255,.7); border-radius: 5px 5px 0 0;
}
.mock-bravo { left: 80px; top: 427px; width: 633px; height: 403px; }
.mock-bravo video { left: 11px; top: 20px; width: 609px; height: 371px; }
.mock-fund { left: 639px; top: 403px; width: 721px; height: 452px; }
.mock-fund video { left: 8.84px; top: 22.73px; width: 698.85px; height: 361.79px; }
/* The poster painted behind each video too, so the frame never shows blank white where a phone browser
   won't autoplay (iOS Low Power Mode, data saver) or hasn't drawn a frame yet */
.mock-bravo video { background: #fff url(assets/video/bravo.jpg?v=4) top center / cover no-repeat; }
.mock-fund video { background: #fff url(assets/video/fundsense.jpg?v=4) top center / cover no-repeat; }
/* Soft band that fades the bottom of the mockups into the page */
.hero-shadow, .hero-fade { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.hero-shadow { top: 662px; height: 112px; background: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,0)); }
.hero-fade { top: 772px; height: 132px; background: linear-gradient(to bottom, #f6ecfb 0%, #fff 84.8%); }

/* ── PROBLEMS ── */
.problems { position: relative; z-index: 3; height: 713px; }
.problems-card {
  position: absolute; left: 59px; top: 0; width: 1322px; height: 713px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(to bottom, var(--plum-deep), var(--blush));
}
.problems-card h2 { position: absolute; top: 83px; left: 0; right: 0; text-align: center; color: #fff; }
.problems-card .lede { position: absolute; top: 164.5px; left: 0; right: 0; width: 455px; margin: 0 auto; text-align: center; color: #fff; }
.problems-panel {
  position: absolute; left: 72px; top: 293px; width: 1178px; height: 370px; border-radius: 6px;
  background: var(--lilac-panel); box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 4px 4px rgba(0,0,0,.15);
}
.problem-tabs { position: absolute; left: 35px; top: 27px; display: flex; flex-direction: column; gap: 12px; list-style: none; }
.problem-tab {
  width: 546px; height: 51px; padding: 0 56px 0 35px; border-radius: 6px; text-align: left;
  font: 300 18px/20px var(--body); color: rgba(0,0,0,.8);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .3s ease, box-shadow .3s ease, background-color .3s ease, padding .35s cubic-bezier(.2,.7,.2,1), transform .2s ease;
}
.problem-tab::before {   /* active state: Figma's #9b64da → #c973b5 at 80%, with the glass rim */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(to bottom, #9b64da, #c973b5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
  opacity: 0; transition: opacity .35s ease;
}
/* Chevron pointing at the answer: slides in on hover, stays on the selected tab */
.problem-tab::after {
  content: ''; position: absolute; right: 24px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: #4A256C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), background-color .3s ease;
}
/* Hover previews the selected look: a faint purple wash, the text nudges in, the chevron arrives */
.problem-tab:not([aria-selected="true"]):hover {
  background-color: rgba(255,255,255,.8); padding-left: 43px;
  box-shadow: 0 6px 16px rgba(70,29,120,.14), inset 0 0 0 1px rgba(255,255,255,.9);
}
.problem-tab:not([aria-selected="true"]):hover::before { opacity: .16; }
.problem-tab:hover::after, .problem-tab[aria-selected="true"]::after { opacity: 1; transform: none; }
.problem-tab:active { transform: scale(.99); }
.problem-tab[aria-selected="true"] { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.9); }
.problem-tab[aria-selected="true"]::before { opacity: .8; }
.problem-tab[aria-selected="true"]::after { background-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .problem-tab, .problem-tab::after { transition: color .3s ease, background-color .3s ease, opacity .3s ease; }
  .problem-tab:not([aria-selected="true"]):hover { padding-left: 35px; }
}
.problem-tab:focus-visible { outline: 2px solid #9346E9; outline-offset: 2px; }
.problem-answer {
  position: absolute; left: 602px; top: 27px; width: 546px; height: 303px; border-radius: 6px;
  padding: 29px 38px 0 34px;
}
.problem-copy {
  display: flex; flex-direction: column; gap: 14px;
  font: 300 18px/25px var(--body); color: rgba(0,0,0,.8);   /* same as the problem tabs */
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.problem-copy.swap { opacity: 0; transform: translateY(8px); }

/* The statement that sat between the problems and the portfolio is gone: everything below the
   problems card now sits 394px higher than in the Figma file (its 525px out, less the 131px it had added) */
:root { --pin-shift: -394px; }
.bigprob { position: relative; height: calc(1088px + var(--work-shift)); }   /* the portfolio, after the problems */

/* ── PORTFOLIO ── */
/* The prototypes are 495px tall (about 16:9, so the whole hero of each recording shows); --work-shift is how much
   taller that made the cards, and how much further down everything below now sits */
:root { --work-shift: 66.8px; }
/* The footer's plum ramp: dark behind the copy, warming toward the bottom. On desktop it starts 120px
   down, leaving some white space below the problems card and the heading 120px of plum */
.bigprob { background: linear-gradient(to bottom, var(--plum) 0%, var(--plum) 28%, #5E3283 52%, #8C639E 78%, #C79EBC 100%) 0 120px / 100% calc(100% - 120px) no-repeat; }
.bigprob .portfolio-head h2 { color: #fff; }
.bigprob .portfolio-head .lede { color: rgba(255,255,255,.8); }
.bigprob .portfolio-head .btn { background: #fff; color: var(--ink); border-color: rgba(255,255,255,.4); }
.bigprob .portfolio-head .btn:hover { background: #fbf3ff; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.portfolio-head h2 { position: absolute; left: 82px; top: 240px; width: 497px; }
.portfolio-head .lede { position: absolute; left: 973px; top: 251.5px; width: 332px; }
.portfolio-head .btn { position: absolute; left: 973px; top: 317.6px; width: 168px; height: 34.8px; }
.carousel {
  position: absolute; left: 0; right: 0; top: 453px; height: calc(570px + var(--work-shift)); overflow: hidden;
  padding-bottom: 20px;   /* room for the card shadows, which would otherwise be cut off in a hard line */
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.carousel.dragging { cursor: grabbing; }
/* The neighbors fade out toward the screen edges */
.carousel {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 240px, #000 calc(100% - 240px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 240px, #000 calc(100% - 240px), transparent 100%);
}
/* Arrows sit in the faded margins, level with the middle of the prototype */
.carousel-arrow {
  position: absolute; z-index: 2; top: calc(453px + 222px); width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255,255,255,.7); box-shadow: 0 4px 12px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.carousel-arrow.prev { left: calc(50% - 720px + 48px); }
.carousel-arrow.next { left: calc(50% + 720px - 48px - 52px); }
.carousel-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow:hover { background: #191919; color: #fff; box-shadow: 0 8px 20px rgba(20,18,24,.22); }
.carousel-arrow.prev:hover { transform: translateX(-2px); }
.carousel-arrow.next:hover { transform: translateX(2px); }
.carousel-arrow:active { transform: scale(.94); }
.carousel-arrow:focus-visible { outline: 2px solid #9346E9; outline-offset: 3px; }
.carousel-track { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
/* Dots under the cards, as on phones: white on the plum */
.carousel-dots { position: absolute; left: 0; right: 0; top: calc(1022px + var(--work-shift)); display: flex; justify-content: center; gap: 4px; }
.carousel-dots button { width: 24px; height: 24px; display: grid; place-items: center; }
.carousel-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.35); transition: width .35s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
.carousel-dots button[aria-current="true"]::before { width: 22px; background: #fff; }
.carousel-dots button:hover::before { background: rgba(255,255,255,.6); }
.carousel-dots button[aria-current="true"]:hover::before { background: #fff; }
.work-card {
  position: absolute; top: 2px; left: -474px; width: 923.5px; height: calc(545.2px + var(--work-shift));   /* 2px down: room for the stroke */
  transition: transform .8s cubic-bezier(.65,0,.2,1), opacity .6s ease;
}
.work-card.no-anim { transition: none; }
/* One stroke around the mockup and its caption panel together, drawn just outside them so it always sits on the
   plum and reads as one continuous line (on the video itself it changed colour with the page behind it) */
.work-card::after {
  content: ''; position: absolute; z-index: 1; left: 33.23px; top: -1px; width: 861.2px; height: calc(547.2px + var(--work-shift));
  border: 1px solid rgba(255,255,255,.18); border-radius: 9px 9px 7px 7px; pointer-events: none;
}
/* The card is just the prototype with the caption panel under it, both the prototype's width */
.work-card .body {
  position: absolute; left: 34.23px; top: 0; width: 859.2px; height: calc(545.2px + var(--work-shift)); border-radius: 8px 8px 6px 6px;
  /* Frosted glass on the plum, so the caption panel sits in the section instead of on top of it */
  background: rgba(255,255,255,.1); box-shadow: 0 4px 14px rgba(30,10,60,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.work-card video {
  position: absolute; left: 34.23px; top: 0; width: 859.2px; height: 495px;
  object-fit: cover; object-position: top center; background: #111;
  border-radius: 8px 8px 0 0; pointer-events: none;
}
.work-card video.light { background: transparent; }   /* a light page: the dark fill would show as a stroke at its edge */
/* Each prototype's still painted behind its video too (same files as the posters, so nothing extra to
   download): the card never shows an empty frame while a video loads, retries or can't autoplay */
.work-card video[poster*="fundsense"] { background: #111 url(assets/video/fundsense.jpg?v=4) top center / cover no-repeat; }
.work-card video[poster*="architecture"] { background: #111 url(assets/video/architecture.jpg?v=5) top center / cover no-repeat; }
.work-card video[poster*="bravo"] { background: transparent url(assets/video/bravo.jpg?v=4) top center / cover no-repeat; }
.work-card .caption { position: absolute; left: 66px; top: calc(460px + var(--work-shift)); width: 460px; font: 300 18px/25px var(--body); color: rgba(255,255,255,.88); }
.work-card .btn { position: absolute; left: 722px; top: calc(466px + var(--work-shift)); width: 140px; height: 34px; }
/* Quiet buttons: a faint dark glass that firms up on hover, so the work stays the focus */
.work-card .btn { background: rgba(16,17,20,.28); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
.work-card .btn:hover { background: rgba(16,17,20,.55); box-shadow: none; }

/* ── PROCESS — a full-bleed road through three checkpoints ──
   The stage (heading, road, cards; --stage-h tall) pins mid-screen for --road-scroll of scrolling
   while site.js draws the route along the road; each checkpoint it reaches lights up and its card
   slides up. Only the stage pins, so the spacing around the section stays as designed. */
:root {
  --stage-h: 760px; --road-scroll: 1300px;
  --road-shift: calc(var(--road-scroll) + 145px);   /* how much further down pricing now sits */
}
.process { position: relative; padding-top: 150px; height: calc(150px + var(--stage-h) + var(--road-scroll) + 40px); }
.process-pin { position: sticky; top: max(0px, calc((var(--vhl, 100vh) - var(--stage-h)) / 2)); height: var(--stage-h); }
/* The section's own lilac glows (the page tints' #D6A4EE), held with the stage so they don't scroll
   away while it's pinned; the layer spans the whole screen and fades out at its top and bottom */
.process-glow {
  position: absolute; left: 0; right: 0; top: calc((var(--stage-h) - var(--vhl, 100vh)) / 2); height: var(--vhl, 100vh);
}
.process-glow {
  pointer-events: none;
  background:
    radial-gradient(520px 460px at 0% 72%, rgba(214,164,238,.55), rgba(214,164,238,0) 70%),
    radial-gradient(600px 480px at 100% 58%, rgba(214,164,238,.38), rgba(214,164,238,0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.process-head { position: relative; text-align: center; }
.process-head .h2 { width: 585px; margin: 27px auto 0; }

/* Road: a soft lilac band with a dashed centre line; the route is drawn over it */
.road { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-edge { stroke: #e6d6f7; stroke-width: 66; }
.road-surface { stroke: #f6effd; stroke-width: 60; }
.road-lane { stroke: #d3bdeb; stroke-width: 2; stroke-dasharray: 14 12; }
.road-route { stroke: url(#routeInk); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(125,69,196,.45)); }
.road-head {
  position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #7d45c4; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(125,69,196,.35), 0 0 18px 6px rgba(155,100,218,.45);
  will-change: transform; transition: opacity .3s ease;
}

/* Checkpoints sit on the road (x in the 1440 frame, y in the stage); each card hangs below its stop */
.stops { position: absolute; inset: 0; margin: 0 auto; list-style: none; }
.stop { position: absolute; left: var(--x); top: 0; }
.stop-dot {
  position: absolute; left: -22px; top: calc(var(--y) - 22px); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font: 500 14px/1 var(--body); color: #9a86b5;
  background: #fff; box-shadow: inset 0 0 0 1.5px #d9c6ee, 0 4px 12px rgba(70,29,120,.10);
  transition: color .4s ease, background .4s ease, box-shadow .5s ease, transform .5s cubic-bezier(.3,1.6,.5,1);
}
.stop-stem {
  position: absolute; left: -.75px; top: calc(var(--y) + 30px); height: calc(440px - var(--y) - 38px);
  border-left: 1.5px dashed #b99bdc; transform: scaleY(0); transform-origin: top; transition: transform .5s ease .1s;
}
/* Liquid glass (after Apple's): nearly clear, a light blur, a specular rim lit from the top-left, an
   inner glow for thickness — and in Chromium a lens at the edges that bends what's behind
   (site.js builds a refraction filter per card and adds it to backdrop-filter) */
.phase {
  position: absolute; left: -190px; top: 440px; width: 380px; min-height: 288px; border-radius: 26px; padding: 18px 18px 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.10) 55%, rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(5px) saturate(1.8) brightness(1.04); backdrop-filter: blur(5px) saturate(1.8) brightness(1.04);
  box-shadow:
    0 16px 40px rgba(70,29,120,.14), 0 3px 10px rgba(70,29,120,.08),
    inset 2px 2px 1px -1px rgba(255,255,255,.95),
    inset -2px -2px 1px -1px rgba(255,255,255,.6),
    inset 0 0 22px rgba(255,255,255,.45);
  opacity: 0; transform: translateY(70px);
  transition: opacity .6s ease .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s;
}
.phase::before, .phase::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* the rim: a 1.5px edge that catches the light at the top-left and bottom-right corners */
.phase::before {
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 38%, rgba(255,255,255,.15) 62%, rgba(255,255,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* a soft sheen across the top */
.phase::after { background: radial-gradient(120% 55% at 18% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%); }
.phase > * { position: relative; z-index: 1; }
.stop.reached .stop-dot {
  color: #fff; background: linear-gradient(to bottom, #461b76, #9b64da); transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(155,100,218,.18), 0 6px 16px rgba(70,29,120,.25);
}
.stop.reached .stop-stem { transform: scaleY(1); }
.stop.reached .phase { opacity: 1; transform: none; }
.phase-chip {
  position: relative; height: 88px; border-radius: 12px; padding: 13.6px 15px 0;
  background: linear-gradient(to bottom, #461b76, #ab7fb2 119.89%); color: #fff;
  box-shadow: inset 0 4px 4px rgba(0,0,0,.25);
}
.phase-chip small, .phase-chip strong { position: relative; z-index: 1; }
.phase-chip small { display: block; font: 300 14px/20px var(--body); }
.phase-chip strong { display: block; margin-top: 12.4px; font: 500 25px/20px var(--head); }
/* Timeline: a line through dots, one dot per step */
.phase ul { list-style: none; position: relative; margin-top: 28px; padding-left: 40px; display: flex; flex-direction: column; gap: 16px; }
.phase li { position: relative; font: 300 16px/20px var(--body); color: #000; }
.phase li::before { content: ''; position: absolute; left: -27px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #4A256C; }
.phase ul::before { content: ''; position: absolute; left: 15.5px; top: 10px; bottom: 10px; width: 1px; background: #4A256C; }
@media (prefers-reduced-motion: reduce) {
  .phase, .stop-stem, .stop-dot { transition-duration: .01s; transition-delay: 0s; }
}

/* ── PRICING ── */
.pricing { position: relative; height: 1882px; }
.pricing .eyebrow { position: absolute; left: 82px; top: 121px; }
.pricing h2 { position: absolute; left: 78px; top: 175px; width: 530px; }
.pricing .lede { position: absolute; left: 978px; top: 186px; width: 312px; }
.plans { position: absolute; left: 58px; top: 390px; width: 1333px; display: flex; gap: 26px; align-items: stretch; }
.plan {
  flex: 1 0 0; min-height: 1183px; display: flex; flex-direction: column;
  padding: 44px 42px 42px; border-radius: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 4px 12px rgba(0,0,0,.05);
  color: var(--muted);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(70,29,120,.12); }
.plan h3 { font: 600 31px/40px var(--body); letter-spacing: -1.2px; color: var(--ink-2); }
.plan .desc { margin-top: 12px; height: 58px; font: 400 18px/20px var(--body); }
.plan .price { margin-top: 34px; font: 500 70px/88px var(--body); letter-spacing: -3.8px; color: var(--ink-2); }
/* The pre-offer price ($800 a page), small and struck through beside the offer price */
.plan .price .was { margin-left: 14px; font-size: 26px; font-weight: 400; letter-spacing: -.6px; color: #9a9cab; text-decoration-thickness: 1.5px; }
.plan.featured .price .was { color: rgba(255,255,255,.62); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Year-end offer: a small pill with a live countdown, under the lede in the right-hand column */
.offer {
  position: absolute; left: 978px; top: 328px; height: 34px;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; border-radius: 100px;
  background: #fbf3ff; border: 1px solid rgba(70,29,120,.12);
  font: 400 14px/16px var(--body); color: var(--pill); white-space: nowrap;
}
.offer[hidden] { display: none; }
.offer > i { width: 7px; height: 7px; border-radius: 50%; background: var(--plum); animation: offerPulse 1.6s ease-in-out infinite; }
@keyframes offerPulse { 50% { box-shadow: 0 0 0 4px rgba(70,29,120,.14); } }
@media (prefers-reduced-motion: reduce) { .offer > i { animation: none; } }
.offer > b { font-weight: 600; color: var(--plum); }
.offer-clock { padding-left: 9px; border-left: 1px solid rgba(70,29,120,.18); }
.offer-clock b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--plum); }
.plan .scope { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.plan .badge { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 100px; background: #fbf3ff; color: var(--pill); font: 400 18px/20px var(--body); white-space: nowrap; }
.plan .badge b { font-weight: 600; }
.plan .choose {
  margin-top: 30px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 1.5px solid #959595; background: #fff; font: 600 18px/20px var(--body); color: var(--muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.plan .choose:hover { background: #101114; border-color: #101114; color: #fff; }
.plan hr { margin-top: 30px; border: 0; height: 1.5px; background: #e9e9ef; }
/* Features: roomy line height so wrapped items read as one, a tighter gap between items */
.plan .features { margin-top: 32px; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.plan .features li { display: flex; gap: 16px; font: 400 17px/26px var(--body); }
.plan .features li img { flex: none; width: 16px; height: 13px; margin-top: 7px; }
.plan .features li.plus { display: block; margin-bottom: 4px; font-weight: 600; }
.plan-more, .plan-dots { display: none; }   /* phones only */
.plan.featured { background: linear-gradient(to bottom, #4b1d7f, #9e74a5); color: #fff; }
.plan.featured h3, .plan.featured .price { color: #fff; }
.plan.featured .badge { background: rgba(34,35,44,.4); color: #fff; }
.plan.featured .choose { border: 0; color: var(--ink); }
.plan.featured .choose:hover { background: #fbf3ff; color: var(--ink); }
.plan.featured hr { background: #fff; }

.custom-plan {
  position: absolute; left: 58px; top: 1612px; width: 1333px; height: 170px;
  display: flex; align-items: center; gap: 40px; padding: 42px; border-radius: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 4px 10px rgba(0,0,0,.05);
}
.custom-plan .intro { width: 411px; display: flex; flex-direction: column; gap: 14px; }
.custom-plan h3 { font: 600 31px/normal var(--body); letter-spacing: -1.2px; color: var(--ink-2); }
.custom-plan .intro p { font: 300 18px/24px var(--body); color: var(--muted); }
.custom-plan ul { width: 480px; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.custom-plan li { display: flex; align-items: center; gap: 18px; font: 400 20px/26px var(--body); color: var(--ink-2); white-space: nowrap; }
.custom-plan li img { width: 17.47px; height: 14.15px; margin-left: -.7px; }
.custom-plan .quote {
  width: 249px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: #101114; font: 600 20px/normal 'Inter', sans-serif; color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.custom-plan .quote:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,17,20,.22); }

/* ── CTA — free mockup, with a short qualifier ── */
.cta { position: relative; height: 820px; transition: height .6s cubic-bezier(.2,.7,.2,1); }
.cta-card {
  position: absolute; left: 58px; top: 40px; width: 1323px; height: 660px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(to bottom, var(--plum-deep), var(--blush));
  box-shadow: 0 4px 2px rgba(0,0,0,.15);
  transition: height .6s cubic-bezier(.2,.7,.2,1);
}
.cta-card.noise::before, .problems-card.noise::before { opacity: .35; }   /* softer grain than the other noise layers */
.cta-copy { position: absolute; z-index: 1; left: 80px; top: 92px; width: 500px; color: #fff; }
.cta-copy .h2, .cta-copy .lede { color: #fff; }
.cta-copy .h2 { line-height: 52px; }
.cta-copy .lede { margin-top: 24px; line-height: 26px; }
.cta-points { margin-top: 34px; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.cta-points li { position: relative; padding-left: 30px; font: 400 17px/22px var(--body); }
.cta-points li::before {   /* small check */
  content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px;
  border-left: 1.75px solid #fff; border-bottom: 1.75px solid #fff; transform: rotate(-45deg);
}
.qualify {
  position: absolute; z-index: 1; right: 64px; top: 38px; width: 600px; height: 584px; border-radius: 6px;
  padding: 30px 36px 0;
  background: var(--lilac-panel); box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 4px 4px rgba(0,0,0,.15);
}
.q-steps { transition: opacity .3s ease; }
/* Two steps, one shown at a time, with a progress bar above them */
.q-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font: 400 13px/18px var(--body); color: #6b5a85; transition: opacity .3s ease; }
.q-progress i { flex: 1; height: 4px; border-radius: 2px; background: rgba(74,37,108,.12); overflow: hidden; }
.q-progress b { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #461b76, #ab7fb2); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.qualify[data-step="2"] .q-progress b { width: 100%; }
.q-page { display: flex; flex-direction: column; gap: 24px; animation: qIn .45s cubic-bezier(.2,.7,.2,1); }
.q-page[hidden], .q-fields[hidden], .q-actions [hidden] { display: none; }
.q-site { margin-top: 10px; }
/* The package cards: a mini version of each pricing card */
.pkgs { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pkgs label { position: relative; cursor: pointer; }
.pkgs input { position: absolute; opacity: 0; pointer-events: none; }
.pkg {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 12px 14px 13px; border-radius: 6px;
  color: #000; isolation: isolate; overflow: hidden; transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.pkg::before {   /* selected: the same purple as the chips */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(to bottom, #9b64da, #c973b5); opacity: 0; transition: opacity .3s ease;
}
.pkg-name { font: 500 15px/20px var(--body); }
.pkg-price { margin-top: 2px; font: 300 24px/30px var(--head); }
.pkg-meta { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; font: 300 13px/18px var(--body); color: rgba(0,0,0,.62); transition: color .3s ease; }
.pkgs label:hover .pkg { background-color: rgba(255,255,255,.8); }
.pkgs input:checked + .pkg { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.9); }
.pkgs input:checked + .pkg::before { opacity: .8; }
.pkgs input:checked + .pkg .pkg-meta { color: rgba(255,255,255,.9); }
.pkgs input:focus-visible + .pkg { outline: 2px solid #9346E9; outline-offset: 2px; }
.q.invalid .pkg { box-shadow: inset 0 0 0 1.5px rgba(192,70,110,.6); }
.pkg-undecided { margin-top: 8px; }
.pkg-undecided span { height: 34px; padding: 0 14px; font-size: 15px; }
.q-fields { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-fields .wide { grid-column: 1 / -1; }
.q-fields input, .q-fields textarea {
  width: 100%; min-width: 0; height: 44px; padding: 0 16px; border-radius: 6px; border: 0;
  background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 6px rgba(70,29,120,.06);
  font: 300 16px/1 var(--body); color: #000; transition: box-shadow .2s ease;
}
.q-fields textarea { height: auto; min-height: 112px; padding: 12px 16px; font-size: 16px; line-height: 22px; resize: vertical; }
.q-fields input::placeholder, .q-fields textarea::placeholder { color: #9a8ab0; }
.q-fields input:focus, .q-fields textarea:focus { outline: 2px solid #9346E9; outline-offset: 0; }
.q-fields .invalid { box-shadow: inset 0 0 0 1.5px #c0466e, 0 2px 6px rgba(70,29,120,.06); }
.q.invalid .chips span { box-shadow: inset 0 0 0 1.5px rgba(192,70,110,.6); }
.q { border: 0; }
.q legend { display: flex; align-items: center; gap: 12px; font: 400 18px/24px var(--body); color: #000; }
.q legend span {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(to bottom, #461b76, #ab7fb2 119.89%); color: #fff; font: 500 13px/1 var(--body);
}
.chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 6px;
  font: 300 16px/1 var(--body); color: #000; isolation: isolate; overflow: hidden;
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.chips span::before {   /* selected: the active problem tab's purple */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(to bottom, #9b64da, #c973b5); opacity: 0; transition: opacity .3s ease;
}
.chips label:hover span { background-color: rgba(255,255,255,.8); }
.chips input:checked + span { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.9); }
.chips input:checked + span::before { opacity: .8; }
.chips input:focus-visible + span { outline: 2px solid #9346E9; outline-offset: 2px; }
.q-error { position: absolute; left: 36px; bottom: 96px; font: 400 14px/18px var(--body); color: #a3345c; }
.q-actions { position: absolute; left: 36px; right: 36px; bottom: 32px; display: flex; gap: 12px; transition: opacity .3s ease; }
.q-actions .btn { height: 52px; font-size: 16px; }
.q-check, .q-next { flex: 1; }
.q-back { flex: none; width: 120px; background: transparent; color: var(--ink); border: 1px solid rgba(74,37,108,.35); }
.q-back:hover { background: rgba(255,255,255,.6); box-shadow: 0 6px 18px rgba(70,29,120,.12); }
.q-skip { flex: 1.25; background: transparent; color: var(--ink); border: 1px solid rgba(74,37,108,.35); }
.q-skip:hover { background: rgba(255,255,255,.6); box-shadow: 0 6px 18px rgba(70,29,120,.12); }

/* Result replaces the questions in place */
.qualify.done .q-progress, .qualify.done .q-steps, .qualify.done .q-actions, .qualify.done .q-error { opacity: 0; visibility: hidden; }
.q-result {
  position: absolute; inset: 0; padding: 48px 44px 0; display: flex; flex-direction: column;
  animation: qIn .5s cubic-bezier(.2,.7,.2,1);
}
.q-result[hidden] { display: none; }
@keyframes qIn { from { opacity: 0; transform: translateY(10px); } }
.q-verdict { font: 300 40px/48px var(--head); color: #000; }
.q-note { margin-top: 16px; font: 300 18px/26px var(--body); color: #86739e; }
.q-book { margin-top: 34px; align-self: flex-start; width: 200px; height: 52px; font-size: 16px; }

/* Qualified: the card grows, the copy turns to booking and the calendar takes the form's place */
.cta-copy, .qualify { transition: opacity .4s ease .2s, visibility 0s; }
.cta-booking, .q-calendar { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.q-calendar {
  position: absolute; z-index: 1; right: 64px; top: 40px; width: 600px; height: 720px; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 4px 4px rgba(0,0,0,.15);
}
.q-calendar .calendly-inline-widget, .q-calendar iframe { width: 100%; height: 100%; }
.q-cal-error { padding: 48px 44px; font: 300 18px/26px var(--body); color: #000; }
.q-cal-error a { color: #4A256C; text-decoration: underline; }
.cta.booking { height: 960px; }
.cta.booking .cta-card { height: 800px; }
.cta.booking .cta-copy:not(.cta-booking), .cta.booking .qualify { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.cta.booking .cta-booking, .cta.booking .q-calendar { opacity: 1; visibility: visible; transition: opacity .5s ease .25s, visibility 0s; }

/* ── FULL PORTFOLIO REQUEST — popup with the qualifier's fields and chips ── */
.pf-dialog {
  position: fixed; inset: 0; margin: auto; width: 600px; max-height: calc(100vh / var(--fit, 1) - 48px);
  border: 0; border-radius: 8px; padding: 0; overflow: auto; zoom: var(--fit, 1);
  background: var(--lilac-panel); box-shadow: 0 24px 60px rgba(40,10,70,.35), 0 4px 12px rgba(0,0,0,.12);
}
.pf-dialog::backdrop { background: rgba(32,10,56,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pf-dialog[open] { animation: pfIn .45s cubic-bezier(.2,.7,.2,1); }
.pf-dialog[open]::backdrop { animation: pfFade .3s ease; }
@keyframes pfIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes pfFade { from { opacity: 0; } }
.pf { position: relative; }
.pf-body, .pf-done { padding: 40px 40px 36px; }
.pf-done { display: flex; flex-direction: column; }
.pf-done[hidden], .pf-body[hidden] { display: none; }
.pf-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: #4A256C; transition: background-color .2s ease;
}
.pf-close:hover { background: rgba(255,255,255,.7); }
.pf-close:focus-visible { outline: 2px solid #9346E9; outline-offset: 2px; }
.pf-title { width: 470px; font: 300 34px/42px var(--head); color: #000; }
.pf-note { margin-top: 14px; font: 300 17px/25px var(--body); color: #6f5c88; }
.pf-steps { margin-top: 28px; display: flex; flex-direction: column; gap: 32px; }
.pf-error { min-height: 18px; margin-top: 14px; font: 400 14px/18px var(--body); color: #a3345c; }
.pf-submit { width: 100%; height: 52px; margin-top: 10px; font-size: 16px; }
.pf-done .pf-submit { margin-top: 30px; width: 160px; }
body:has(.pf-dialog[open]) { overflow: hidden; }

/* ── FOOTER — dark plum, with a glow along the bottom ── */
.footer { position: relative; z-index: 1; background: var(--plum); color: #fff; overflow: hidden; zoom: var(--fit, 1); }
.footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(70,29,120,0) 45%, #5E3283 68%, #8C639E 86%, #C79EBC 100%);
}
.footer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); mix-blend-mode: overlay; opacity: .25; }
.footer-inner { position: relative; z-index: 1; width: var(--frame); margin: 0 auto; padding: 88px 80px 32px; }
.footer-top { display: flex; justify-content: space-between; }
.footer-brand { width: 360px; }
.footer .nav-logo { position: static; }
.footer .nav-logo span { color: #fff; }
.footer .nav-logo .mark img { filter: brightness(0) invert(1); }
.footer-brand p { margin-top: 20px; font: 300 18px/26px var(--body); color: rgba(255,255,255,.75); }
.btn.light { margin-top: 28px; width: 169px; background: #fff; color: var(--ink); border-color: rgba(255,255,255,.4); }
.btn.light:hover { background: #fbf3ff; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.footer-cols { display: flex; gap: 96px; }
.footer-cols div { display: flex; flex-direction: column; gap: 14px; min-width: 120px; }
.footer-cols h4 { margin-bottom: 6px; font: 400 13px/18px var(--body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.footer-cols a { font: 300 16px/20px var(--body); color: #fff; transition: opacity .2s ease; }
.footer-cols a:hover { opacity: .6; }
/* The cursor globe, rising from the bottom bar's line like a sunrise */
.footer-globe { position: relative; height: 380px; margin: 40px -80px 0; }
.footer-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer-bottom {
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.3);
  display: flex; justify-content: space-between; font: 300 14px/18px var(--body); color: rgba(255,255,255,.85);
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   PHONES & SMALL TABLETS (≤ 900px) — the page stops scaling (site.js sets --fit to 1) and every
   section drops its 1440px coordinates for a single-column flow with a 20px gutter
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --frame: 100%; --gutter: 20px; --road-scroll: 0px; }
  .frame { padding: 0 var(--gutter); }
  .h2 { font-size: 27px; line-height: 30px; }
  .h2, .hero-copy h1, .pf-title, .q-verdict { text-wrap: balance; }   /* no lone last words */
  .lede { font-size: 15px; line-height: 22px; }
  .eyebrow { font-size: 11px; line-height: 15px; letter-spacing: .04em; }
  .btn { height: 42px; padding: 0 18px; font-size: 14px; }
  .page-glows { display: none; }   /* placed for the desktop page's coordinates */

  /* Nav: logo and the call button; the section links stay on desktop */
  .nav { height: 68px; }
  .nav .frame { display: flex; align-items: center; justify-content: space-between; }
  .nav-logo { position: static; }
  .nav-links { display: none; }
  .nav .btn { position: static; width: auto; height: 36px; padding: 0 14px; font-size: 13px; }

  /* Hero: copy, button, then the two prototypes overlapping as on desktop */
  .hero { height: auto; padding-bottom: 20px; }
  .hero .frame { display: grid; grid-template-columns: 100%; padding-top: 104px; }
  .hero-copy, .hero-side { position: static; width: auto; }
  .hero-copy h1 { margin-top: 14px; font-size: 35px; line-height: 36px; }
  .hero-side { margin-top: 18px; }
  .hero-side .btn { margin: 22px 0 0; width: auto; }
  .mock { position: relative; grid-row: 3; grid-column: 1; left: auto; top: auto; border-radius: 8px; }
  .mock-bravo { width: 78%; height: auto; aspect-ratio: 633 / 403; justify-self: start; margin-top: 44px; }
  .mock-fund { width: 80%; height: auto; aspect-ratio: 721 / 452; justify-self: end; margin-top: 104px; }
  .mock-bravo video { left: 1.74%; top: 4.96%; width: 96.2%; height: 92.06%; }
  .mock-fund video { left: 1.23%; top: 5.03%; width: 96.93%; height: 80.04%; }
  .hero-tint { top: 46%; height: 60%; }
  .hero-patterns, .hero-noise { top: 160px; left: calc(50% - 560px); width: 1110px; height: 530px; }
  .hero-shadow { top: auto; bottom: 56px; height: 90px; }
  .hero-fade { top: auto; bottom: -64px; height: 120px; }   /* cuts across the mockups' bottoms, as on desktop */

  /* Problems: the card fills the width; each tab opens its answer underneath (site.js moves it) */
  .problems { height: auto; padding-bottom: 56px; }   /* white space before the portfolio's plum */
  .problems .frame { padding: 0 12px; }
  .problems-card { position: relative; left: auto; width: auto; height: auto; padding: 52px 14px 14px; }
  .problems-card h2, .problems-card .lede { position: relative; top: auto; left: auto; width: auto; margin: 0; padding: 0 8px; }
  .problems-card .lede { margin-top: 12px; }
  .problems-panel { position: relative; left: auto; top: auto; width: auto; height: auto; margin-top: 32px; padding: 12px; }
  .problem-tabs { position: static; gap: 10px; }
  .problem-tab { width: 100%; height: auto; min-height: 48px; padding: 13px 42px 13px 16px; font-size: 15px; line-height: 20px; }
  .problem-tab::after { right: 16px; transform: rotate(90deg); }
  .problem-tab[aria-selected="true"]::after { transform: rotate(90deg); }
  .problem-tab:not([aria-selected="true"]):hover { padding-left: 16px; }
  .problem-answer { position: static; width: auto; height: auto; margin-top: 8px; padding: 18px 16px 20px; }
  .problem-copy { font-size: 15px; line-height: 22px; gap: 10px; }

  /* Portfolio: heading stack, then one card at a time (swipe or wait) */
  .bigprob { height: auto; padding: 64px 0 48px; background-position: 0 0; background-size: 100% 100%; }
  .portfolio-head { display: flex; flex-direction: column; align-items: flex-start; }
  .portfolio-head h2, .portfolio-head .lede, .portfolio-head .btn { position: static; width: auto; height: 44px; }
  .portfolio-head h2 { height: auto; }
  .portfolio-head .lede { height: auto; margin-top: 12px; }
  .portfolio-head .btn { margin-top: 20px; }
  .carousel {
    position: relative; top: auto; margin-top: 52px;
    height: calc((100vw - 64px) * .5761 + 164px); padding-bottom: 0;   /* video + two caption lines, the button and room for the shadow */
    -webkit-mask-image: none; mask-image: none;
  }
  .carousel-arrow { display: none; }   /* swipe instead; the dots show there's more */
  .carousel-dots { position: static; margin-top: 0; }
  .work-card { left: calc((100vw - 40px) / -2); width: calc(100vw - 40px); height: auto; padding: 0 0 18px; display: flex; flex-direction: column; }
  .work-card .body { left: 0; top: 0; width: auto; right: 0; height: auto; bottom: 0; }
  .work-card::after { left: -1px; right: -1px; top: -1px; bottom: -1px; width: auto; height: auto; }
  .work-card video { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 859.2 / 495; }
  .work-card .caption { position: relative; left: auto; top: auto; width: auto; margin-top: 14px; padding: 0 16px; font-size: 14px; line-height: 20px; }
  .work-card .btn { position: relative; left: auto; top: auto; width: auto; height: 38px; margin: 12px 0 0 16px; align-self: flex-start; font-size: 14px; }

  /* Process: no road; the phases stack down a line that fills as you scroll */
  .process { height: auto; padding: 80px 0 72px; }
  .process-pin { position: relative; top: auto; height: auto; }
  .process-glow { top: 0; height: 100%; }
  .process-head .h2 { width: auto; margin-top: 16px; }
  .road, .road-head, .stop-stem { display: none; }
  .stops { position: relative; inset: auto; margin-top: 40px; padding-left: calc(var(--gutter) + 56px); display: flex; flex-direction: column; gap: 28px; }
  .stops::before, .stops::after { content: ''; position: absolute; left: calc(var(--gutter) + 15px); top: 16px; bottom: var(--tail, 16px); width: 2px; border-radius: 2px; }   /* first dot → last dot */
  .stops::before { background: #d3bdeb; }
  .stops::after { background: linear-gradient(to bottom, #461D78, #7d45c4, #c973b5); transform-origin: top; transform: scaleY(var(--road-p, 0)); }
  .stop { position: relative; left: auto; }
  .stop-dot { left: -56px; top: 14px; z-index: 1; width: 32px; height: 32px; font-size: 12px; }
  .stop.reached .stop-dot { transform: none; box-shadow: 0 0 0 4px rgba(155,100,218,.16), 0 4px 10px rgba(70,29,120,.2); }
  .phase { position: relative; left: auto; top: auto; width: auto; min-height: 0; padding: 14px 14px 22px; border-radius: 22px; transform: translateY(40px);
    background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.45) 55%, rgba(255,255,255,.6)); }
  .phase-chip { height: 76px; padding: 11px 14px 0; }
  .phase-chip strong { margin-top: 9px; font-size: 20px; }
  .phase-chip small { font-size: 13px; }
  .phase li { font-size: 15px; line-height: 20px; }
  .phase ul { margin-top: 22px; padding-left: 36px; gap: 14px; }
  .phase ul::before { left: 13.5px; }
  .phase li::before { left: -25px; }

  /* Pricing: plans stack */
  .pricing { height: auto; padding: 72px 0 24px; }
  .pricing .eyebrow, .pricing h2, .pricing .lede { position: static; width: auto; }
  .pricing h2 { margin-top: 14px; }
  .pricing .lede { margin-top: 14px; }
  .offer { position: static; height: 30px; margin-top: 30px; gap: 7px; padding: 0 12px 0 10px; font-size: 12.5px; }
  .offer-clock { padding-left: 7px; }
  /* A swipeable row: one plan at a time with the next peeking in, snapping into place */
  .plans {
    position: static; width: auto; margin: 12px calc(var(--gutter) * -1) -12px; padding: 20px var(--gutter) 32px;   /* room for the card shadows inside the scroller */
    align-items: flex-start; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 calc(100vw - var(--gutter) * 2 - 28px); min-height: 0; padding: 30px 22px 24px; scroll-snap-align: start; }
  .plan-dots { display: flex; justify-content: center; gap: 4px; margin-top: 2px; }
  .plan-dots button { width: 24px; height: 24px; display: grid; place-items: center; }
  .plan-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 4px; background: #d3bdeb; transition: width .35s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
  .plan-dots button[aria-current="true"]::before { width: 22px; background: var(--plum); }
  /* The feature list folds away behind a toggle */
  .plan-more {
    display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 18px; padding: 6px 0;
    font: 500 15px/22px var(--body); color: var(--ink-2);
  }
  .plan-more::after {
    content: ''; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
    transform: rotate(45deg); transition: transform .3s ease, margin .3s ease;
  }
  .plan-more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
  .plan.featured .plan-more { color: #fff; }
  .plan .features { display: none; }
  .plan.open .features { display: flex; animation: planIn .4s cubic-bezier(.2,.7,.2,1); }
  @keyframes planIn { from { opacity: 0; transform: translateY(-6px); } }
  .plan:hover { transform: none; }
  .plan h3 { font-size: 23px; line-height: 27px; letter-spacing: -.6px; }
  .plan .desc { height: auto; margin-top: 6px; font-size: 15px; line-height: 21px; }
  .plan .desc br { display: none; }
  .plan .price { margin-top: 16px; font-size: 44px; line-height: 54px; letter-spacing: -2px; }
  .plan .price .was { margin-left: 10px; font-size: 18px; letter-spacing: -.3px; }
  .plan .scope { margin-top: 18px; }
  .plan .badge { height: 32px; padding: 0 14px; font-size: 14px; }
  .plan .choose { margin-top: 22px; height: 48px; font-size: 15px; }
  .plan hr { margin-top: 24px; }
  .plan .features { margin-top: 14px; gap: 12px; }
  .plan .features li { font-size: 15px; line-height: 22px; gap: 12px; }
  .plan .features li img { margin-top: 6px; }
  .custom-plan { position: static; width: auto; height: auto; margin-top: 28px; padding: 28px 22px; flex-direction: column; align-items: stretch; gap: 22px; }
  .custom-plan .intro, .custom-plan ul { width: auto; }
  .custom-plan h3 { font-size: 23px; line-height: 27px; letter-spacing: -.6px; }
  .custom-plan .intro p { font-size: 15px; line-height: 22px; }
  .custom-plan li { white-space: normal; align-items: flex-start; font-size: 15px; line-height: 21px; gap: 12px; }
  .custom-plan li img { margin-top: 4px; flex: none; }
  .custom-plan .quote { width: 100%; height: 48px; font-size: 15px; }

  /* Free mockup: copy, then the form; once qualified, the booking copy and the calendar */
  .cta, .cta.booking { height: auto; padding: 48px 0 72px; }
  .cta .frame { padding: 0 12px; }
  .cta-card, .cta.booking .cta-card { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 44px 16px 16px; border-radius: 14px; }
  .cta-copy { position: relative; left: auto; top: auto; width: auto; padding: 0 6px; }
  .cta-copy .h2 { line-height: 28px; font-weight: 400; }
  .cta-copy .lede { margin-top: 24px; line-height: 22px; color: rgba(255,255,255,.88); }
  .cta-points { margin-top: 22px; gap: 10px; }
  .cta-points li { padding-left: 26px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.92); }
  .cta-points li::before { top: 4px; width: 11px; height: 6px; }
  .qualify { position: relative; right: auto; top: auto; width: auto; height: auto; margin-top: 36px; padding: 26px 18px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(40,10,70,.18); }
  .q-progress { margin-bottom: 20px; font-size: 12px; }
  .q-page { gap: 30px; }
  /* Package cards stack: name and details on the left, price on the right */
  .pkgs { grid-template-columns: 1fr; gap: 7px; }
  .pkg { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 11px 14px; }
  .pkg-name { grid-column: 1; font-size: 15px; }
  .pkg-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 22px; }
  .pkg-meta { grid-column: 1; margin-top: 2px; gap: 0; font-size: 13px; line-height: 17px; }
  .q legend { gap: 10px; font-size: 15px; line-height: 21px; align-items: flex-start; }
  .q legend span { width: 22px; height: 22px; font-size: 12px; }
  .q-fields { margin-top: 12px; gap: 8px; }
  .q-fields input { height: 46px; font-size: 16px; }   /* 16px keeps iPhones from zooming in on focus */
  .chips { gap: 7px; }
  .chips span { height: 36px; padding: 0 12px; font-size: 14px; }
  .q-error { position: static; min-height: 18px; margin-top: 16px; }
  .q-actions { position: static; margin-top: 8px; flex-direction: column; gap: 10px; }
  .q-actions .btn { height: 48px; font-size: 15px; }
  .q-actions .btn { width: 100%; flex: none; }
  .qualify.done .q-progress, .qualify.done .q-steps, .qualify.done .q-actions, .qualify.done .q-error { display: none; }   /* the panel shrinks to the result */
  .q-result { position: static; padding: 10px 6px 8px; }
  .q-verdict { font-size: 26px; line-height: 29px; }
  .q-note { font-size: 15px; line-height: 22px; }
  .q-book { width: 100%; }
  .cta-booking, .q-calendar { display: none; }
  .cta.booking .cta-copy:not(.cta-booking), .cta.booking .qualify { display: none; }
  .cta.booking .cta-booking { display: block; }
  .cta.booking .q-calendar { display: block; position: relative; right: auto; top: auto; width: auto; height: 680px; margin-top: 28px; }

  /* Popups: nearly full screen */
  .pf-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .pf-body, .pf-done { padding: 30px 18px 22px; }
  .pf-close { top: 10px; right: 10px; }
  .pf-title { width: auto; padding-right: 30px; font-size: 24px; line-height: 27px; }
  .pf-title br { display: none; }
  .pf-note { font-size: 15px; line-height: 22px; }
  .pf-done .pf-submit { width: 100%; }

  /* Footer: brand, then the link columns, the globe and the bottom line */
  .footer-inner { padding: 60px var(--gutter) 24px; }
  .footer-top { flex-direction: column; gap: 44px; }
  .footer-brand { width: auto; }
  .footer-brand p { font-size: 15px; line-height: 22px; }
  .footer-cols a { font-size: 15px; }
  .footer-cols { flex-wrap: wrap; gap: 32px 44px; }
  .footer-globe { height: 230px; margin: 36px calc(var(--gutter) * -1) 0; }
  .footer-bottom { flex-direction: column; gap: 6px; font-size: 13px; }
}
/* Honeypot: hidden from people, filled in only by form-spamming bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── COOKIE BANNER — a small card in the bottom-left corner for UK/EU visitors.
   Reject and Accept are the same size, so declining is as easy as accepting. */
.cookie-banner {
  position: fixed; z-index: 60; left: 24px; bottom: 24px; width: 400px; zoom: var(--fit);
  padding: 22px 22px 20px; border-radius: 10px;
  background: rgba(255,255,255,.94); border: 1px solid rgba(74,37,108,.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(40,10,70,.22);
  animation: cookie-in .45s cubic-bezier(.2,.8,.2,1) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }
.cookie-title { font: 500 16px/22px var(--body); color: var(--ink); }
.cookie-text { margin-top: 8px; font: 300 14px/21px var(--body); color: rgba(0,0,0,.75); }
.cookie-actions { margin-top: 18px; display: flex; gap: 10px; }
.cookie-actions .btn { flex: 1; height: 40px; }
.cookie-reject { background: transparent; color: var(--ink); border: 1px solid rgba(74,37,108,.35); }
.cookie-reject:hover { background: rgba(74,37,108,.06); box-shadow: none; }
.cookie-settings {
  margin-left: 18px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.cookie-settings[hidden] { display: none; }

@media (max-width: 900px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 16px 16px; }
  .cookie-title { font-size: 15px; }
  .cookie-actions .btn { height: 44px; font-size: 15px; }
  .cookie-settings { margin-left: 0; display: block; margin-top: 6px; }
}

/* Footer legal link and the banner's privacy link */
.footer-legal { margin-left: 18px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookie-text a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .footer-legal { margin-left: 0; display: block; margin-top: 6px; }
}