/* Work Juice — site styles.
 *
 * The Work Juice system (site/DESIGN.md), 21 Sep 2026: a pale-blue canvas,
 * crisp dark-grey type in two strengths, cool blue hairlines, and one electric
 * plasma blue. The blue appears only on the primary action (.pill--primary, one
 * per view) and in the logo orb, whose glass carries live plasma filaments
 * (sphere.js). Hierarchy comes from scale jumps, never from fills, shadows or
 * extra colours. Cards are transparent; buttons and tags are full pills;
 * inputs and cards are square.
 *
 * Type: Space Grotesk, the only text family. Display and headings are 700,
 * uppercase, set tight. The [data-squeeze] headline motion is a weight press:
 * letters load light and press to bold in turn. Fredoka stays for the
 * "work juice" logotype only.
 */

:root {
  /* The five colours. Nothing else. */
  --canvas: #e9f2fc;      /* pale blue: the page */
  --body: #3a434d;        /* dark grey: copy (9:1 on the canvas) */
  --ink: #1b2027;         /* crisp dark grey: display type, outlines, input rules */
  --rule: #aabdd3;        /* cool hairlines, disabled, placeholders */
  --volt: #1e61ff;        /* electric plasma blue: the primary action + logo orb */
  --volt-deep: #1450e0;   /* the primary pill's hover: one step darker, never a glow */

  --muted: var(--body);   /* secondary copy; the hairline blue is too light for text */

  --font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-caption: 11px;
  --text-body-sm: 14px;
  --text-body: 18px;
  --text-subheading: clamp(22px, 2vw, 27px);
  --text-heading-sm: clamp(27px, 3vw, 44px);
  --text-heading: clamp(44px, 5.4vw, 72px);
  --text-heading-lg: clamp(52px, 6.5vw, 91px);
  --text-display: clamp(60px, 12vw, 198px);
  --text-mega: clamp(80px, 15vw, 240px);

  --squeeze: 100%;        /* Space Grotesk has no width axis; kept so older rules stay valid */
  --ease-juice: cubic-bezier(.2, .9, .1, 1);

  --s-5: 5px;
  --s-8: 8px;
  --s-15: 15px;
  --s-19: 19px;
  --s-30: 30px;
  --s-46: 46px;
  --s-76: 76px;
  --s-119: clamp(76px, 9vw, 119px);

  --radius: 9999px;       /* buttons, tags, chips: the pill is the only rounded shape */
  --radius-sharp: 0;      /* cards, inputs, panels */
  --max: 1400px;
  --gutter: clamp(16px, 3vw, 30px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }

::selection { background: var(--ink); color: var(--canvas); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--ink); color: var(--canvas); padding: 8px 19px; border-radius: var(--radius);
  font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ *
 * Type
 * ------------------------------------------------------------------ */

.display, .heading, .heading-lg, .heading-sm, .subheading {
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* Display: 700, uppercase, set solid at 0.96. Caps lines stack into one block. */
.display {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.009em;
  text-transform: uppercase;
}
.display .line { display: block; }
.display--mega { font-size: var(--text-mega); font-weight: 700; letter-spacing: -0.02em; line-height: 0.92; }
.heading-lg, .heading {
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.heading-lg { font-size: var(--text-heading-lg); }
.heading { font-size: var(--text-heading); }
.heading .line, .heading-lg .line { display: block; }
.heading-sm { font-size: var(--text-heading-sm); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.subheading { font-size: var(--text-subheading); font-weight: 400; line-height: 1.2; letter-spacing: -0.009em; }

.label {
  font-size: var(--text-caption);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 560;
}
.label--bold { font-weight: 760; }
.body { font-size: var(--text-body); line-height: 1.1; }
.body-sm { font-size: var(--text-body-sm); line-height: 1.15; }
strong, b { color: var(--ink); }
.muted { color: var(--muted); }
.lede { font-size: var(--text-body); max-width: 34em; }

/* ------------------------------------------------------------------ *
 * Links & buttons — the ghost link, and the one pill with a state change
 * ------------------------------------------------------------------ */

.link {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: var(--s-5) 0; border-radius: var(--radius);
  font-size: var(--text-body-sm); text-decoration: none; color: var(--ink);
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.link .arrow { transition: transform 0.25s ease; }
.link span:not(.arrow) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s ease; }
.link:hover span:not(.arrow) { background-size: 100% 1px; }
.link:hover .arrow { transform: translateX(3px); }
.link--caps { font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: var(--s-8) var(--s-19);
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font: 400 15px/1.2 var(--font); letter-spacing: -0.009em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pill:hover, .pill[aria-current="page"] { background: var(--ink); color: var(--canvas); }
.pill--lg { padding: 13px 30px; }
/* Volt pill CTA: the only filled button, one per view. */
.pill--primary { background: var(--volt); border-color: var(--volt); color: #fff; }
.pill--primary:hover, .pill--primary[aria-current="page"] { background: var(--volt-deep); border-color: var(--volt-deep); color: #fff; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-19) var(--s-30); }

/* ------------------------------------------------------------------ *
 * Header — minimal top bar
 * ------------------------------------------------------------------ */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-30);
  padding: 20px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  border-bottom: 1px solid transparent;
  transition: padding 0.4s var(--ease-juice), background-color 0.4s ease, border-color 0.4s ease;
}
/* Once the page moves, the bar tightens and picks up a pale-blue glass. */
.site-header.is-stuck {
  padding-top: 12px; padding-bottom: 12px;
  background: rgb(233 242 252 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule);
}
.site-header.is-ink:not(.is-stuck) { color: var(--canvas); }
/* Logo: the hero orb in miniature (sphere.js, [data-sphere-mark]) beside the
   concept 3 wordmark, "work juice" in a rounded face whose i-dot is a small
   electric-blue orb. Hovering the logo makes that dot pulse and ripple.
   Fredoka is the logotype face only; the site's text stays Space Grotesk. */
.brand {
  --tile: 58px;
  --word: 31px;
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  margin-left: -10px; /* the orb canvas carries its own air; optically align the ball to the gutter */
}
.brand__orb {
  position: relative; flex: none; width: var(--tile); height: var(--tile);
  transition: width 0.4s var(--ease-juice), height 0.4s var(--ease-juice);
}
.brand__orb canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask: radial-gradient(closest-side, #000 72%, transparent);
  mask: radial-gradient(closest-side, #000 72%, transparent); /* the ripples fade out, never clip */
}
.brand__orb img {
  position: absolute; left: 50%; top: 50%; width: 60%; height: 60%; transform: translate(-50%, -50%);
  border-radius: 50%; transition: opacity 0.3s ease;
}
.brand__orb.is-live img { opacity: 0; }

.brand__word {
  font-family: 'Fredoka', var(--font); font-weight: 600; font-size: var(--word);
  line-height: 1; letter-spacing: -0.01em; text-transform: none; white-space: nowrap;
  transition: font-size 0.4s var(--ease-juice);
}
.brand__i { position: relative; display: inline-block; }
/* the orb dot: a tiny glass sphere with its own highlight, and a ripple beneath */
.brand__dot {
  position: absolute; left: 50%; top: 0.03em; width: 0.3em; height: 0.3em;
  margin-left: -0.15em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 10%, #6bd9ff 17%, var(--volt) 55%, #08248a 100%);
}
.brand__dot::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  border: 1.5px solid var(--volt); border-radius: 50%;
  transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none;
}
.brand:hover .brand__dot, .brand:focus-visible .brand__dot { animation: dot-pulse 1.1s var(--ease-juice) infinite; }
.brand:hover .brand__dot::after, .brand:focus-visible .brand__dot::after { animation: dot-ripple 1.1s ease-out infinite; }
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.32); }
}
@keyframes dot-ripple {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand__dot, .brand:hover .brand__dot::after { animation: none; }
}
.site-header.is-stuck .brand { --tile: 50px; --word: 26px; }
@media (max-width: 900px) { .brand { --tile: 50px; --word: 25px; } }

.nav { display: flex; align-items: center; gap: var(--s-30); }
.nav a:not(.pill) {
  font-size: var(--text-caption); font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; padding: var(--s-5) 0; border-radius: var(--radius);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat;
  transition: background-size 0.3s ease;
}
.nav a:not(.pill):hover, .nav a[aria-current="page"]:not(.pill) { background-size: 100% 1px; }

.menu-toggle { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--canvas);
  padding: 90px var(--gutter) var(--s-46);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.menu[hidden] { display: none; }
.menu__links { display: grid; border-top: 1px solid var(--rule); position: relative; z-index: 1; }
.menu__links a {
  font-size: var(--text-heading-sm); font-weight: 560; text-transform: uppercase; line-height: 1; text-decoration: none;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
.menu__links a::after { content: '→'; font-size: 0.5em; }
.menu__foot { position: relative; z-index: 1; }
.menu .rings { right: -30%; bottom: -10%; }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; position: relative; z-index: 60; }
  body.menu-open .site-header { position: fixed; z-index: 60; }
}

/* ------------------------------------------------------------------ *
 * Concentric Circle Ornament — static hairline rings
 * ------------------------------------------------------------------ */

.rings {
  position: absolute; width: var(--s); height: var(--s); max-width: none;
  fill: none; stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1;
  pointer-events: none; z-index: 0;
}

/* ------------------------------------------------------------------ *
 * Home hero — display type over the orb
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: grid; grid-template-rows: 1fr auto;
  padding: 110px 0 var(--s-30);
  overflow: hidden;
  isolation: isolate;
}
.hero .rings { z-index: -1; }

.orb {
  position: absolute; z-index: -1;
  width: min(92vw, 1180px, 132svh);
  aspect-ratio: 1.45;
  left: 60%; top: 52%;
  transform: translate(-50%, -50%);
}
.orb canvas { width: 100%; height: 100%; }

/* Fallback before/without WebGL: the flat logo orb over hairline rings. */
.orb__fallback { position: absolute; inset: 0; transition: opacity 0.6s ease; }
.orb.is-live .orb__fallback { opacity: 0; }
.orb__fallback::before {
  content: ''; position: absolute; left: 50%; top: 19%;
  width: 29%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(ellipse 22% 12% at 66% 22%, #fff 60%, transparent 64%),
    radial-gradient(circle at 32% 28%, #6bd9ff, var(--volt) 55%, #08248a);
}
.orb__fallback::after {
  content: ''; position: absolute; left: 50%; top: 66%;
  width: 62%; height: 18%; transform: translateX(-50%); border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, var(--rule) 0 5%, var(--canvas) 5% 9%);
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent);
  mask: radial-gradient(closest-side, #000 60%, transparent);
}
.orb canvas { position: relative; opacity: 0; transition: opacity 0.3s ease; }
.orb.is-live canvas { opacity: 1; }

.hero__top {
  align-self: start;
  display: flex; justify-content: space-between; gap: var(--s-30);
  padding-top: var(--s-15);
}
.hero__top .label:first-child { max-width: 30ch; }
.hero__prices { text-align: right; }

.hero__bottom { align-self: end; display: grid; gap: var(--s-46); }
.hero h1 { position: relative; }
.hero h1 .line:nth-child(2) { padding-left: 0.9em; }

.hero__foot {
  display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: var(--s-30);
  padding-top: var(--s-19); border-top: 1px solid var(--rule);
}
.hero__foot p.body { max-width: 30em; }

.scroll-cue {
  justify-self: end; margin-left: var(--s-46);
  display: inline-flex; gap: 8px; align-items: center;
  font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; transition: opacity 0.4s ease;
}
.scroll-cue span[aria-hidden] { display: inline-block; animation: cue 1.8s ease-in-out infinite; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }
@keyframes cue { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span[aria-hidden] { animation: none; } }

@media (max-width: 900px) {
  .hero { padding-top: 90px; }
  .orb { width: 150vw; left: 50%; top: 44%; }
  .hero__top { flex-direction: column; gap: var(--s-8); }
  .hero__prices { text-align: left; }
  .hero__foot { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
}

/* Inner-page hero: type only, rings behind */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 150px 0 var(--s-76);
  border-bottom: 1px solid var(--rule);
}
.page-hero .rings { z-index: -1; }
.page-hero__grid {
  display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: var(--s-46) var(--s-76); align-items: end;
  margin-top: var(--s-46);
}
.page-hero__grid .body { max-width: 26em; }
@media (max-width: 900px) {
  .page-hero { padding-top: 120px; }
  .page-hero__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Sections
 * ------------------------------------------------------------------ */

.section { position: relative; padding: var(--s-119) 0; overflow: clip; }
.section--stone { background: var(--canvas); }
.section--paper { background: var(--canvas); }
.section--ruled { border-top: 1px solid var(--rule); }
.section > .rings { z-index: 0; }
.section > .wrap { position: relative; z-index: 1; }

.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-19) var(--s-76);
  align-items: end; margin-bottom: var(--s-76);
}
.section-head > .label { grid-column: 1 / -1; margin-bottom: var(--s-19); }
.section-head .body { max-width: 30em; justify-self: end; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; margin-bottom: var(--s-46); }
  .section-head .body { justify-self: start; }
}

/* Founder Intro Block */
.intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-46) var(--s-76);
}
.intro__label { display: grid; gap: var(--s-19); align-content: start; }
.intro__label p { font-size: var(--text-body-sm); text-transform: uppercase; letter-spacing: 0.02em; max-width: 22ch; }
.intro__copy { display: grid; gap: var(--s-30); }
.intro__copy .subheading { max-width: 22em; }
.intro__copy .body { max-width: 34em; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * Featured Work Card — white, line-grid paper, sharp corners
 * ------------------------------------------------------------------ */

.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-19); }
.works--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1040px) { .works--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .works, .works--3 { grid-template-columns: 1fr; } }

.work {
  position: relative;
  background-color: var(--canvas);
  background-image:
    linear-gradient(var(--canvas) 1px, transparent 1px),
    linear-gradient(90deg, var(--canvas) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  padding: var(--s-30);
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-30);
  min-height: 460px;
}
.work__head { display: flex; justify-content: space-between; gap: var(--s-19); align-items: start; }
.work__art { display: grid; place-items: center; min-height: 200px; }
.work__art svg { width: min(100%, 320px); height: auto; }
.work__foot { display: grid; gap: var(--s-8); max-width: 30em; }
.work__foot p { font-size: var(--text-body-sm); }

/* ink drawings inside the cards */
.ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ink-fill { fill: var(--ink); }
.ink-type { font-family: var(--font); fill: var(--ink); }

/* ------------------------------------------------------------------ *
 * Hairline grid — Client Logo Cell pattern, used for deliverables/studios
 * ------------------------------------------------------------------ */

.cells {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell {
  background: var(--canvas);
  aspect-ratio: 1.25;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-15);
  padding: var(--s-19);
}
.cell svg { width: 40%; max-width: 72px; height: auto; place-self: center; }
.cell__top { display: flex; justify-content: space-between; gap: var(--s-8); }
.cell--tall { aspect-ratio: auto; min-height: 240px; }
.cell--soon { background: var(--canvas); }
.cell .subheading { font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 1040px) { .cells, .cells--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cells, .cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ *
 * Steps — numbered hairline rows
 * ------------------------------------------------------------------ */

.steps { border-top: 1px solid var(--ink); }
.step {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-19) var(--s-46);
  padding: var(--s-30) 0 var(--s-46); border-bottom: 1px solid var(--rule); align-items: start;
}
.step__num { font-size: var(--text-heading); font-weight: 300; line-height: 0.8; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.step .body { max-width: 30em; }
@media (max-width: 900px) {
  .step { grid-template-columns: 64px minmax(0, 1fr); }
  .step .body { grid-column: 2; }
  .step__num { font-size: var(--text-heading-sm); }
}

/* ------------------------------------------------------------------ *
 * Split layouts
 * ------------------------------------------------------------------ */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-46) var(--s-76); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 1040px) { .split { grid-template-columns: 1fr; } }

.stack { display: grid; gap: var(--s-30); align-content: start; }
.stack--tight { gap: var(--s-19); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border: 1px solid var(--ink); border-radius: var(--radius);
  font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.4;
}
.tag--soon { border-color: var(--rule); color: var(--muted); }

.list { border-top: 1px solid var(--rule); }
.list li {
  display: flex; justify-content: space-between; gap: var(--s-19);
  padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-body-sm);
}
.list li::after { content: '+'; color: var(--muted); }
.list li.no { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.list li.no::after { content: '–'; }

/* ------------------------------------------------------------------ *
 * Portal illustration — the Work Juice AI screen, in ink on paper
 * ------------------------------------------------------------------ */

.portal { background: var(--canvas); border: 1px solid var(--ink); font-size: var(--text-body-sm); }
.portal__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-15);
  padding: 12px var(--s-19); border-bottom: 1px solid var(--ink);
}
.portal__title { display: inline-flex; gap: 8px; align-items: center; }
.portal__title i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.portal__body { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.portal__side { display: grid; align-content: start; gap: 2px; padding: var(--s-19); border-right: 1px solid var(--rule); }
.portal__side .label { margin-bottom: 10px; color: var(--muted); }
.portal__side span { padding: 7px 10px; border-radius: var(--radius-sharp); }
.portal__side span.is-active { background: var(--ink); color: var(--canvas); }
.portal__main { display: grid; gap: var(--s-19); padding: var(--s-19); }
.portal__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.portal__field { background: var(--canvas); padding: 10px 12px; display: grid; gap: 2px; }
.portal__field .label { color: var(--muted); }
.portal__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.portal__results figure {
  background-color: var(--canvas);
  background-image: linear-gradient(var(--canvas) 1px, transparent 1px), linear-gradient(90deg, var(--canvas) 1px, transparent 1px);
  background-size: 12px 12px; aspect-ratio: 1; position: relative; display: grid; place-items: center;
}
.portal__results figcaption { position: absolute; left: 8px; top: 6px; font-size: var(--text-caption); letter-spacing: 0.05em; }
.portal__results svg { width: 62%; }
.portal__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-15); }
.portal__cost { color: var(--muted); font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 640px) {
  .portal__body { grid-template-columns: 1fr; }
  .portal__side { display: none; }
}

/* ------------------------------------------------------------------ *
 * Pricing
 * ------------------------------------------------------------------ */

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-19); }
@media (max-width: 1040px) { .tiers { grid-template-columns: 1fr; max-width: 560px; } }
.tier {
  background: var(--canvas); padding: var(--s-30);
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s-30);
}
.tier--pick { outline: 1px solid var(--ink); outline-offset: -1px; position: relative; }
.tier__flag {
  position: absolute; left: -1px; right: -1px; top: -26px; height: 26px;
  display: flex; align-items: center; padding: 0 var(--s-15);
  background: var(--ink); color: var(--canvas);
}
.tiers { padding-top: 26px; }
@media (max-width: 1040px) { .tiers { row-gap: 52px; } }
.tier__name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-15); }
.tier__price { display: flex; align-items: baseline; gap: 10px; }
.tier__price .num { font-size: var(--text-heading-lg); font-weight: 560; line-height: 0.8; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.tier__for { font-size: var(--text-body-sm); color: var(--muted); max-width: 26em; }

.addons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.addons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1040px) { .addons, .addons--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .addons, .addons--3 { grid-template-columns: 1fr; } }
.addon { background: var(--canvas); padding: var(--s-30); display: grid; gap: var(--s-19); align-content: start; min-height: 260px; }
.addon .num { font-size: var(--text-heading); font-weight: 560; line-height: 0.8; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.addon p:last-child { font-size: var(--text-body-sm); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--text-body-sm); font-variant-numeric: lining-nums tabular-nums; }
.compare th, .compare td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--rule); font-weight: 400; vertical-align: top; }
.compare thead th { font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; border-bottom-color: var(--ink); }
.compare tbody th { color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--s-30); align-items: baseline;
  padding: var(--s-19) 0; font-size: var(--text-subheading); font-weight: 440; line-height: 1.08;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: var(--text-body); transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 var(--s-30); max-width: 40em; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip;
    transition: height 0.45s var(--ease-juice), content-visibility 0.45s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* ------------------------------------------------------------------ *
 * Services page rows
 * ------------------------------------------------------------------ */

.service-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-46) var(--s-76);
  padding: var(--s-76) 0; border-bottom: 1px solid var(--rule); align-items: center;
}
.service-row:first-child { padding-top: 0; }
.service-row .work { min-height: 380px; grid-template-rows: auto 1fr; }
.service-row:nth-child(even) .work { order: 2; }
@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; }
  .service-row:nth-child(even) .work { order: 0; }
}

/* ------------------------------------------------------------------ *
 * Form
 * ------------------------------------------------------------------ */

.form { display: grid; gap: var(--s-19); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-19); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; padding: 0; }
.field legend { margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; font: 400 var(--text-body)/1.45 var(--font); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: var(--radius-sharp);
  padding: 7px 0;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; padding: var(--s-8) var(--s-19); border: 1px solid var(--ink); border-radius: var(--radius);
  font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; transition: background-color 0.2s, color 0.2s;
}
.chip input:checked + span { background: var(--ink); color: var(--canvas); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.form__msg { font-size: var(--text-body-sm); min-height: 1.4em; }
.form__msg[data-state="error"] { color: var(--ink); }

.panel { background: var(--canvas); padding: var(--s-30); display: grid; gap: var(--s-19); align-content: start; }

/* ------------------------------------------------------------------ *
 * CTA & footer
 * ------------------------------------------------------------------ */

.cta { text-align: left; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-46) var(--s-76); align-items: end; }
.cta__grid .body { max-width: 26em; }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } }

.footer { border-top: 1px solid var(--ink); padding: var(--s-46) 0 var(--s-30); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-30); }
.footer__intro { display: grid; gap: var(--s-15); align-content: start; }
.footer__intro p { font-size: var(--text-body-sm); max-width: 28em; }
.footer__col { display: grid; gap: 6px; align-content: start; }
.footer__col .label { color: var(--muted); margin-bottom: 6px; }
.footer__col a { font-size: var(--text-body-sm); text-decoration: none; justify-self: start; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__mega { margin: var(--s-76) 0 var(--s-30); white-space: nowrap; }
.footer__legal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8) var(--s-30); flex-wrap: wrap; padding-top: var(--s-15); border-top: 1px solid var(--rule); }
/* Statutory company details (Companies Act 2006 trading disclosures) */
.footer__company { font-size: var(--text-caption); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.footer__company a { color: inherit; }
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__intro { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ *
 * The squeeze: the site's one orchestrated motion.
 *
 * site.js splits a [data-squeeze] headline into letters. They start wide and
 * light; when the moment fires (the orb landing on Home, fonts ready
 * elsewhere) each letter squeezes to the display cut in turn, left to right,
 * like juice being pressed out. Without JS, or with reduced motion, the
 * headline renders in its final state.
 * ------------------------------------------------------------------ */

.sq { display: inline-block; white-space: pre; }
.js [data-squeeze].is-split .sq {
  font-weight: 300;
  opacity: 0.5;
  transition:
    font-weight 1.1s var(--ease-juice) calc(var(--i) * 38ms),
    opacity 1.1s var(--ease-juice) calc(var(--i) * 38ms);
}
.js [data-squeeze].is-squeezed .sq { font-weight: inherit; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js [data-squeeze].is-split .sq { font-weight: inherit; opacity: 1; transition: none; }
}

/* ================================================================== *
 * FLOW COMPONENTS
 * The Framer-grade layer: a scroll-inked manifesto, the service
 * carousel engine, the pinned Work Juice AI demo, live plan tiles and
 * the showcase marquee. Behaviour lives in assets/motion.js; every
 * component renders complete and readable without it.
 * ================================================================== */

/* ---------- Manifesto: words ink in as you read ------------------- */

.manifesto { padding: var(--s-119) 0; }
.manifesto__text {
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 460;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 20em;
  text-wrap: pretty;
}
.manifesto__text .w { color: var(--ink); transition: color 0.35s linear; }
.js .manifesto__text .w { color: rgb(27 32 39 / 0.16); }
.js .manifesto__text .w.is-on { color: var(--ink); }
.manifesto__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-19) var(--s-46); align-items: center;
  margin-top: var(--s-46);
}
@media (prefers-reduced-motion: reduce) { .js .manifesto__text .w { color: var(--ink); } }

/* ---------- Carousel engine --------------------------------------- */

.carousel { position: relative; }
.carousel__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-30); align-items: end;
  margin-bottom: var(--s-46);
}
.carousel__controls { display: flex; gap: 8px; }
.carousel__btn {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink);
  font: 400 18px/1 var(--font); cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.carousel__btn:hover:not(:disabled) { background: var(--ink); color: var(--canvas); }
.carousel__btn:disabled { opacity: 0.25; cursor: default; }

.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(270px, 30vw, 430px);
  gap: var(--s-19);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 6px;
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel__track:focus-visible { outline-offset: -2px; }

.slide { scroll-snap-align: start; display: grid; gap: var(--s-19); align-content: start; }
.slide__media {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  background: var(--canvas);
}
.slide__media img, .slide__media video {
  position: absolute; inset: -2% -9%; width: 118%; height: 104%; max-width: none;
  object-fit: cover;
  transform: translate3d(var(--px, 0px), 0, 0) scale(1.02);
  transition: transform 0.9s var(--ease-juice);
  pointer-events: none;
}
.slide:hover .slide__media :is(img, video) { transform: translate3d(var(--px, 0px), 0, 0) scale(1.06); }
.slide__tag {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  padding: 5px 10px; border-radius: var(--radius);
  background: rgb(233 242 252 / .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.slide__copy { display: grid; gap: 6px; max-width: 26em; }
.slide__copy p { font-size: var(--text-body-sm); color: var(--muted); }

.carousel__progress { position: relative; height: 1px; background: var(--rule); margin-top: var(--s-46); }
.carousel__progress i {
  position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink);
  width: var(--w, 20%); transform: translateX(var(--x, 0%));
}

/* The "Drag" cursor that follows a fine pointer over the track */
.drag-cursor {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--canvas);
  font-size: var(--text-caption); font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase;
  transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(0);
  transition: transform 0.35s var(--ease-juice), width 0.3s, height 0.3s;
}
.drag-cursor.is-on { transform: translate3d(var(--cx), var(--cy), 0) scale(1); }
.drag-cursor.is-down { transform: translate3d(var(--cx), var(--cy), 0) scale(0.78); }
@media (hover: none), (pointer: coarse) { .drag-cursor { display: none; } .carousel__track { cursor: auto; } }

/* ---------- Ink section ------------------------------------------- */

.section--ink { background: var(--canvas); color: var(--body); border-top: 1px solid var(--rule); }

/* ---------- Pinned Work Juice AI demo ------------------------------ */

.demo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-76); }
.demo__steps { display: grid; }
.demo__step {
  min-height: 78vh; display: grid; align-content: center; gap: var(--s-19);
  opacity: 0.28; transition: opacity 0.5s ease;
}
.demo__step.is-active { opacity: 1; }
.demo__step:first-child { min-height: 60vh; align-content: start; padding-top: 16vh; }
.demo__step:last-child { min-height: 100vh; }
.demo__num { font-size: var(--text-caption); font-weight: 560; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.demo__step .body { max-width: 26em; color: var(--body); }
.demo__stage { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; }
.demo__rail { display: flex; gap: 6px; margin-bottom: var(--s-19); }
.demo__rail i { flex: 1; height: 2px; background: rgb(27 32 39 / .14); position: relative; overflow: hidden; }
.demo__rail i::after {
  content: ''; position: absolute; inset: 0; background: var(--canvas);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-juice);
}
.demo__rail i.is-done::after { transform: none; }

@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; gap: 0; }
  .demo__stage { top: 64px; height: auto; z-index: 2; order: -1; padding: var(--s-15) 0; background: var(--canvas); }
  .demo__step, .demo__step:first-child, .demo__step:last-child { min-height: 62vh; padding-top: 0; align-content: end; padding-bottom: 8vh; }
  .demo__stage > .label { display: none; }
  .live .portal__main { min-height: 0; gap: 12px; padding: 14px; }
  .live .portal__bar { padding: 10px 14px; }
}

/* the live portal inside the demo */
.live { color: var(--body); }
.live .portal__main { min-height: 360px; align-content: start; }
.live__typed::after { content: '▍'; margin-left: 1px; animation: caret 1s steps(1) infinite; opacity: 0; }
.live__typed.is-typing::after { opacity: 1; }
@keyframes caret { 50% { visibility: hidden; } }

.live .portal__results figure svg { transform: scale(0.6); opacity: 0; transition: transform 0.7s var(--ease-juice), opacity 0.4s ease; }
.live .portal__results figure:nth-child(2) svg { transition-delay: 0.12s; }
.live .portal__results figure:nth-child(3) svg { transition-delay: 0.24s; }
.live[data-state="concepts"] .portal__results svg,
.live[data-state="studio"] .portal__results svg,
.live[data-state="ship"] .portal__results svg { transform: none; opacity: 1; }
.live .portal__results figure { transition: outline-color 0.3s ease; outline: 2px solid transparent; outline-offset: -2px; }
.live[data-state="studio"] .portal__results figure:first-child,
.live[data-state="ship"] .portal__results figure:first-child { outline-color: var(--ink); }

.live__status {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  font-size: var(--text-body-sm);
}
.live__status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; transition: background-color 0.3s; }
.live[data-state="studio"] .live__status .dot { background: var(--ink); animation: pulse 1.4s ease-in-out infinite; }
.live[data-state="ship"] .live__status .dot { background: var(--ink); }
@keyframes pulse { 50% { opacity: 0.35; } }

.live__files { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.live__files span {
  background: var(--canvas); padding: 8px 12px; display: flex; justify-content: space-between;
  font-size: var(--text-body-sm); opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-juice);
}
.live__files span::after { content: '✓'; }
.live[data-state="ship"] .live__files span { opacity: 1; transform: none; }
.live[data-state="ship"] .live__files span:nth-child(2) { transition-delay: 0.08s; }
.live[data-state="ship"] .live__files span:nth-child(3) { transition-delay: 0.16s; }
.live[data-state="ship"] .live__files span:nth-child(4) { transition-delay: 0.24s; }
.live:not([data-state="ship"]) .live__files { display: none; }
.live[data-state="ship"] .portal__results { display: none; }
.live .portal__credits { font-variant-numeric: tabular-nums; }

/* ---------- Plan tiles: small working parts of the product --------- */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-19); }
.tile {
  background: var(--canvas); display: grid; grid-template-rows: 1fr auto;
  min-height: 400px; overflow: hidden;
}
.tile--wide { grid-column: span 2; }
.tile--full { grid-column: 1 / -1; min-height: 340px; }
.tile__stage { display: grid; place-items: center; padding: var(--s-30); position: relative; }
.tile__copy { padding: 0 var(--s-30) var(--s-30); display: grid; gap: 6px; }
.tile__copy p { font-size: var(--text-body-sm); color: var(--muted); max-width: 30em; }
@media (max-width: 1040px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tiles { grid-template-columns: 1fr; } .tile--wide, .tile--full { grid-column: auto; } }

/* credits meter */
.meter { width: 100%; max-width: 520px; display: grid; gap: var(--s-19); }
.meter__big { display: flex; align-items: baseline; gap: 12px; }
.meter__big .num { font-size: var(--text-heading-lg); font-weight: 560; line-height: 0.8; font-variant-numeric: tabular-nums; }
.meter__rows { display: grid; gap: 10px; }
.meter__row { display: grid; grid-template-columns: 120px 1fr 60px; gap: 12px; align-items: center; font-size: var(--text-body-sm); }
.meter__row b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.bar { height: 8px; background: var(--canvas); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-juice); }
.is-live .bar i { transform: scaleX(var(--v)); }
.meter__row:nth-child(2) .bar i { transition-delay: 0.1s; }
.meter__row:nth-child(3) .bar i { transition-delay: 0.2s; }

/* hours gauge */
.gauge { width: min(200px, 60%); aspect-ratio: 1; position: relative; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 6; }
.gauge .track { stroke: var(--canvas); }
.gauge .fill { stroke: var(--ink); stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.6s var(--ease-juice); }
.is-live .gauge .fill { stroke-dashoffset: 0; }
.gauge__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge__label .num { font-size: var(--text-heading); font-weight: 560; line-height: 0.8; }

/* brand kit assembling */
.kit { display: grid; gap: 14px; width: 100%; max-width: 280px; }
.kit__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kit__swatches i { aspect-ratio: 1 / 1.3; transform: translateY(14px); opacity: 0; transition: transform 0.7s var(--ease-juice), opacity 0.4s; }
.kit__swatches i:nth-child(2) { transition-delay: 0.08s; }
.kit__swatches i:nth-child(3) { transition-delay: 0.16s; }
.kit__swatches i:nth-child(4) { transition-delay: 0.24s; }
.kit__type { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--rule); padding-top: 12px; opacity: 0; transition: opacity 0.6s 0.35s; }
.kit__type span:first-child { font-size: 64px; line-height: 0.8; font-weight: 560; }
.is-live .kit__swatches i { transform: none; opacity: 1; }
.is-live .kit__type { opacity: 1; }

/* turnaround timeline with plan switch */
.turn { width: 100%; max-width: 360px; display: grid; gap: var(--s-19); }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--radius); padding: 3px; gap: 3px; justify-self: start; }
.seg button {
  font: 560 var(--text-caption)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
  border: 0; background: transparent; color: var(--ink); padding: 8px 12px; border-radius: var(--radius); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.days { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; padding-top: 28px; }
.days span { text-align: center; font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 8px; }
.days span.is-hit { color: var(--ink); border-top-color: var(--ink); }
.days__dot {
  position: absolute; top: 4px; left: calc((var(--d, 3) - 0.5) * 20%);
  width: 18px; height: 18px; border-radius: 50%; background: var(--ink);
  transform: translateX(-50%);
  transition: left 0.6s var(--ease-juice);
}

/* history log */
.log { width: 100%; max-width: 560px; border-top: 1px solid var(--ink); }
.log li {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-19); align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-body-sm);
  opacity: 0; transform: translateX(-10px); transition: opacity 0.5s, transform 0.6s var(--ease-juice);
}
.log li span:not(:first-child) { color: var(--muted); font-variant-numeric: tabular-nums; }
.is-live .log li { opacity: 1; transform: none; }
.log li:nth-child(2) { transition-delay: 0.1s; } .log li:nth-child(3) { transition-delay: 0.2s; } .log li:nth-child(4) { transition-delay: 0.3s; }

/* file formats */
.formats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 240px; }
.formats span { padding: 10px 14px; border: 1px solid var(--ink); border-radius: var(--radius); font-size: var(--text-caption); font-weight: 560; letter-spacing: 0.06em; }
.formats span:nth-child(odd) { background: var(--ink); color: var(--canvas); }

@media (prefers-reduced-motion: reduce) {
  .bar i, .gauge .fill, .kit__swatches i, .kit__type, .log li, .live__files span, .live .portal__results figure svg { transition: none !important; }
}

/* ---------- Showcase marquee -------------------------------------- */

.showcase { padding: var(--s-119) 0; overflow: hidden; }
.showcase__rows { display: grid; gap: var(--s-19); margin-top: var(--s-46); }
.marquee-row { display: flex; width: max-content; gap: var(--s-19); will-change: transform; }
.marquee-row figure { margin: 0; height: clamp(220px, 26vw, 360px); position: relative; overflow: hidden; background: var(--canvas); flex: none; }
.marquee-row img { height: 100%; width: auto; max-width: none; transition: transform 1s var(--ease-juice); }
.marquee-row figure:hover img { transform: scale(1.04); }
.marquee-row figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--radius);
  background: rgb(233 242 252 / .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s var(--ease-juice);
}
.marquee-row figure:hover figcaption { opacity: 1; transform: none; }
.showcase__note { margin-top: var(--s-30); color: var(--muted); font-size: var(--text-body-sm); }
@media (prefers-reduced-motion: reduce) { .showcase__rows { overflow-x: auto; } }

/* services page photographs */
.shot { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--canvas); }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease-juice); }
.shot:hover img { transform: scale(1.1); }
.service-row:nth-child(even) .shot { order: 2; }
@media (max-width: 900px) { .service-row:nth-child(even) .shot { order: 0; } }

/* ---------- Long-read legal pages (privacy, terms) ---------------- */

.prose { max-width: 70ch; }
.prose h2 { font-size: var(--text-subheading); font-weight: 480; line-height: 1.08; letter-spacing: -0.012em; margin: var(--s-46) 0 var(--s-15); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-caption); font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase; margin: var(--s-30) 0 var(--s-8); }
.prose p, .prose li { font-size: var(--text-body-sm); line-height: 1.5; }
.prose p + p { margin-top: var(--s-15); }
.prose ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 8px; margin: var(--s-8) 0 var(--s-15); }
.prose a { text-underline-offset: 3px; }
.prose .table-scroll { margin: var(--s-15) 0; }
.prose .compare { min-width: 480px; }
.prose .compare td { color: var(--ink); }

/* Draft markers: remove from the pages before launch */
.draft-note {
  max-width: 70ch; margin-bottom: var(--s-46); padding: var(--s-15) var(--s-19);
  border: 1px solid var(--ink); border-radius: var(--radius-sharp); font-size: var(--text-body-sm);
  background: rgb(27 32 39 / 0.04);
}
mark.tbd { background: rgb(30 97 255 / 0.14); color: var(--ink); padding: 0 0.2em; border-radius: 3px; }

.footer__policies { display: flex; gap: var(--s-19); }
.footer__policies a { font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 560; text-decoration: none; }
.footer__policies a:hover { text-decoration: underline; text-underline-offset: 3px; }
.form__privacy { font-size: var(--text-caption); line-height: 1.5; color: var(--muted); max-width: 52ch; }

/* ------------------------------------------------------------------ *
 * Juice — the talking orb (juice.js). A small orb bottom-right on every
 * page opens a square panel with a bigger one. The panel follows the
 * system: transparent-on-canvas, ink hairline, pills, one volt action.
 * ------------------------------------------------------------------ */

.juice { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 45; font-family: var(--font); }

.juice__launch {
  display: flex; align-items: center; gap: 2px;
  padding: 0 var(--s-15) 0 0; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--canvas); color: var(--ink); cursor: pointer;
  font: 560 var(--text-caption)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.juice__launch:hover { background: var(--ink); color: var(--canvas); }
.juice__launch:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.juice__launch-orb { position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; }
.juice__launch-orb canvas { width: 100%; height: 100%; }
.juice__launch:hover .juice__launch-orb { background: var(--canvas); }
.juice.is-open .juice__launch-label::after { content: ' ✕'; }

.juice__panel {
  position: absolute; right: 0; bottom: calc(100% + var(--s-15));
  display: flex; flex-direction: column; gap: var(--s-15);
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  max-height: min(680px, calc(100vh - 190px)); max-height: min(680px, calc(100dvh - 190px));
  padding: var(--s-19); border: 1px solid var(--ink); border-radius: var(--radius-sharp);
  background: var(--canvas); color: var(--body);
  transform-origin: 100% 100%; animation: juice-in 0.35s var(--ease-juice);
}
.juice__panel[hidden] { display: none; }
@keyframes juice-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .juice__panel { animation: none; } }

.juice__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-15); padding-bottom: var(--s-8); border-bottom: 1px solid var(--rule); color: var(--ink); }
.juice__sep { color: var(--rule); }
.juice__close { width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: var(--radius); background: none; color: var(--ink); cursor: pointer; font: 400 13px/1 var(--font); }
.juice__close:hover { background: var(--ink); color: var(--canvas); }

.juice__stage { display: grid; justify-items: center; gap: var(--s-5); }
.juice__orb { position: relative; width: 100%; height: 190px; }
.juice__orb canvas { width: 100%; height: 100%; }
.juice__status { color: var(--ink); min-height: 1.4em; text-align: center; }
.juice[data-mood="thinking"] .juice__status::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--volt); vertical-align: middle; animation: juice-dot 1s ease-in-out infinite; }
@keyframes juice-dot { 50% { opacity: 0.2; } }

.juice__log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-15); overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.juice__log:empty { display: none; }
.juice__msg { display: grid; gap: 4px; max-width: 88%; }
.juice__msg p { font-size: var(--text-body-sm); line-height: 1.4; color: var(--ink); white-space: pre-line; }
.juice__msg .label { color: var(--body); }
.juice__msg--user { justify-self: end; text-align: right; padding-right: var(--s-8); border-right: 1px solid var(--ink); }
.juice__msg--juice { padding-left: var(--s-8); border-left: 1px solid var(--volt); }

.juice__form { display: flex; gap: var(--s-8); align-items: center; }
.juice__input {
  flex: 1 1 auto; min-width: 0; font: 400 15px/1.45 var(--font); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: var(--radius-sharp); padding: 7px 0;
}
.juice__input::placeholder { color: var(--body); opacity: 0.7; }
.juice__input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 6px; }
.juice__talk { width: 100%; }
.juice.is-call .juice__talk { background: transparent; border-color: var(--ink); color: var(--ink); }
.juice.is-call .juice__talk:hover { background: var(--ink); color: var(--canvas); }
.juice__note { font-size: var(--text-caption); line-height: 1.5; color: var(--body); }
.juice__note a { color: var(--ink); }

@media (max-width: 560px) {
  .juice { right: 16px; bottom: 16px; }
  .juice__launch-label { display: none; }
  .juice__launch { padding: 0; }
  .juice__panel { width: calc(100vw - 32px); }
  .juice__orb { height: 150px; }
}
@media print { .juice { display: none; } }
.juice__tools { display: flex; align-items: center; gap: var(--s-8); }
.juice__sound {
  padding: 7px 12px; border: 1px solid var(--ink); border-radius: var(--radius); background: none; color: var(--ink); cursor: pointer;
  font: 560 var(--text-caption)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
}
.juice__sound:hover { background: var(--ink); color: var(--canvas); }
.juice__sound[aria-pressed="false"] { color: var(--body); border-color: var(--rule); }