/* ==========================================================================
   Vienti — "Morning Studio" design system  ·  v2.0
   Company site: / and /about/
   Palette and type unchanged from v1.0. Layout and motion rebuilt:
   editorial hero, service index instead of a nine-card grid, CSS
   scroll-driven motion instead of a JS scroll loop.
   ========================================================================== */

:root {
  --bg: #FAF7F2;
  --ink: #15153F;
  --ink-soft: #45456B;
  /* Body copy: a couple of shades darker than --ink-soft (11:1 on the canvas
     against 8.5:1), so it holds up over the pastel glow. Labels, nav links
     and headings keep their own colours. */
  --ink-body: #34345C;
  --dark: #0E0E30;
  --cream: #FAF7F2;

  --lavender: #E6E1F7;
  --blush: #F7E2E8;
  --mint: #DCEFE6;
  --butter: #FAEEDC;

  --violet: #B8ACEA;
  --rose: #F0BECB;
  --mint-mid: #A5D9C3;

  /* v1.0 used #6C5FC7, which measured 4.45:1 on the lavender section —
     under AA for 13px text. This clears 4.5:1 on all four backgrounds. */
  --accent: #6B5EC7;

  /* Sampled from the supplied logo PNG. The mark is navy, the wordmark black. */
  --brand-navy: #040A34;
  --brand-black: #000000;

  --line: rgb(21 21 63 / 0.12);
  --line-strong: rgb(21 21 63 / 0.28);
  --card: #FFFFFF;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Motion: every hover arrives in --t-in and releases in --t-out, on --ease.
     Indicators that travel between targets (nav ink, chip tint and fill) use
     --t-glide on --ease-glide. */
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --t-in: 280ms;
  --t-out: 440ms;
  --t-glide: 420ms;
  --header-h: 72px;
  --radius: 20px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-padding-bottom: 2rem;
}

/* --- Base ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

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

.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--cream); }

.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;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }

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

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section--dark .eyebrow { color: var(--violet); }

.section__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3rem);
  max-width: 20ch;
  margin-bottom: 1.25rem;
}

.section__lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--ink-body);
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section--dark .section__lead { color: rgb(239 237 251 / 0.72); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--t-out) var(--ease), background-color var(--t-out) var(--ease),
              translate var(--t-out) var(--ease), scale var(--t-out) var(--ease);
}

.btn--primary { background: var(--ink); color: var(--cream); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    box-shadow: 0 14px 34px rgb(21 21 63 / 0.26), 0 6px 22px rgb(107 94 199 / 0.32);
    transition-duration: var(--t-in);
  }
  .btn--ghost:hover { background: rgb(21 21 63 / 0.06); transition-duration: var(--t-in); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* One settled lift. The button never follows the pointer: text drifting
     under the cursor is what reads as jitter. */
  .btn:hover { translate: 0 -2px; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn:active { scale: 0.98; transition-duration: 120ms; }
}

.btn--lg { font-size: 1.0625rem; padding: 0.95rem 2.1rem; min-height: 52px; }

.btn--light { background: var(--cream); color: var(--ink); }

/* A text link that carries an arrow — the demoted secondary CTA. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--line-strong);
  transition: border-color var(--t-out) var(--ease);
}
.link-arrow svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  transition: translate var(--t-out) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { border-bottom-color: var(--ink); transition-duration: var(--t-in); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link-arrow:hover svg { translate: 3px 0; transition-duration: var(--t-in); }
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-stuck {
  background: rgb(250 247 242 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
  padding-block: 0.75rem;
  transition: padding 0.35s var(--ease);
}

.site-header.is-stuck .site-nav { padding-block: 0.4rem; }

.site-nav__links { display: none; position: relative; align-items: center; gap: 1.9rem; }

.site-nav__links > li > a {
  position: relative;
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.4rem;
  transition: color var(--t-in) var(--ease);
}

.site-nav__links > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-glide) var(--ease-glide);
}

.site-nav__links > li > a[aria-current] { color: var(--ink); }
.site-nav__links > li > a[aria-current]::after,
.site-nav__links > li > a:focus-visible::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .site-nav__links > li > a:hover { color: var(--ink); }
  .site-nav__links:not(.has-ink) > li > a:hover::after { transform: scaleX(1); }
}

/* With JS, one line of ink serves the whole row: it rests under the current
   link and glides to whichever link is hovered or focused. The rules above
   stay as the fallback without JS and under reduced motion. */
.site-nav__links.has-ink > li > a { color: var(--ink-soft); }
.site-nav__links.has-ink > li > a.is-lit { color: var(--ink); }
.site-nav__links.has-ink > li > a::after { content: none; }
.site-nav__links.has-ink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 3px;
  width: 100px; height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
  translate: var(--ink-x, 0px) 0;
  scale: var(--ink-s, 0) 1;
  transition: translate var(--t-glide) var(--ease-glide), scale var(--t-glide) var(--ease-glide);
  pointer-events: none;
}
.site-nav__links.is-snap::after { transition: none; }
/* The word answers the pointer at once; the ink follows after its short dwell. */
@media (hover: hover) and (pointer: fine) {
  .site-nav__links.has-ink > li > a:hover { color: var(--ink); }
}

.site-nav__cta { display: none; }

.nav-toggle {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Scroll-linked progress — pure CSS where the browser supports it. */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5px;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--ink));
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: scroll()) {
  .progress span {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}

.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0.75rem; right: 0.75rem;
  z-index: 99;
  /* Phone width at most: on a tablet, or a wide window at large browser
     text, it drops from the menu button instead of spanning the screen. */
  max-width: 26rem;
  margin-left: auto;
  /* On a short screen (a phone turned sideways) it scrolls inside itself
     rather than running off the bottom. */
  max-height: calc(100vh - var(--header-h) - 0.75rem);
  max-height: calc(100dvh - var(--header-h) - 0.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(250 247 242 / 0.95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgb(21 21 63 / 0.16);
}

.mobile-menu li + li { border-top: 1px solid var(--line); }

.mobile-menu a:not(.btn) {
  display: block;
  padding: 0.85rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}

.mobile-menu .btn { width: 100%; margin-top: 1.25rem; }

/* em, not px: this query resolves against the browser's own font size, so a
   visitor reading at Large text gets the menu button instead of a row that
   wraps or pushes the CTA off the screen. */
@media (min-width: 56.25em) {
  .site-nav__links, .site-nav__cta { display: flex; }
  .nav-toggle, .mobile-menu { display: none; }
}

/* --- Logo lockup (traced mark + traced wordmark) ------------------------ */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  flex: none;
}

/* Widths follow each symbol's own viewBox so nothing is stretched. */
.logo__mark { height: 36px; width: calc(36px * 1176 / 1038); color: var(--brand-navy); flex: none; }
.logo__type { height: 15px; width: calc(15px * 1174 / 247); color: var(--brand-black); flex: none; }

.logo--light .logo__mark,
.logo--light .logo__type { color: var(--cream); }

.site-footer .logo__mark { height: 44px; width: calc(44px * 1176 / 1038); }
.site-footer .logo__type { height: 18px; width: calc(18px * 1174 / 247); }

/* --- Ambient blobs (always in motion, independent of the user) ----------- */

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  opacity: 0.55;
  will-change: transform;
}

.blob--violet {
  width: clamp(280px, 42vw, 560px); aspect-ratio: 1;
  background: var(--violet);
  top: -8%; right: -4%;
  animation: drift-a 21s ease-in-out infinite alternate;
}

.blob--rose {
  width: clamp(220px, 34vw, 460px); aspect-ratio: 1;
  background: var(--rose);
  top: 34%; right: 22%;
  animation: drift-b 26s ease-in-out infinite alternate;
}

.blob--mint {
  width: clamp(200px, 30vw, 400px); aspect-ratio: 1;
  background: var(--mint-mid);
  bottom: -12%; left: -6%;
  animation: drift-c 24s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-9%, 12%) scale(1.12); }
  to   { transform: translate(6%, -8%) scale(0.94); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(14%, -10%) scale(0.9); }
  to   { transform: translate(-10%, 8%) scale(1.1); }
}
@keyframes drift-c {
  from { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(10%, -12%) scale(1.15); }
  to   { transform: translate(-6%, 6%) scale(0.92); }
}

/* Scroll-linked: the whole cluster tracks scroll progress. */
@keyframes ambient-track { to { transform: translateY(190px) rotate(8deg); } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__ambient {
      animation: ambient-track linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* --- Hero: editorial grid, not a centred stack --------------------------- */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 3rem) 5rem;
}

.hero__ambient { position: absolute; inset: 0; z-index: -1; will-change: transform; }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: end;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 3vw, 2.5rem);
  }
  .hero__statement { grid-column: 1 / 9; }
  .hero__meta { grid-column: 9 / 13; padding-bottom: 0.6rem; }
}

/* Sized so the longest line ("World-class apps.") still fits the 8-column
   statement track at every width, not just at full container width. */
.hero__title {
  font-size: clamp(2.6rem, 0.6rem + 5.3vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

.circled { position: relative; display: inline-block; }

.hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  color: var(--ink-body);
  max-width: 54ch;
  margin-bottom: 2rem;
}

.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.hero__meta {
  display: grid;
  gap: 1.25rem;
  border-left: 2px solid var(--line-strong);
  padding-left: 1.25rem;
}

.hero__meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.hero__meta dd { font-size: 0.9375rem; color: var(--ink-body); }

/* --- Doodles ------------------------------------------------------------- */

.doodle { overflow: visible; pointer-events: none; }

.doodle path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .doodle:not(.doodle--live) path {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }
  }
}

.doodle--circle {
  position: absolute;
  inset: -20% -6%;
  width: 112%;
  height: 140%;
}
.doodle--circle path { stroke-width: 3; }

/* The hero ring is drawn clockwise on load, in CSS so it still appears
   without JavaScript. The light that draws it is added in JS. */
@media (prefers-reduced-motion: no-preference) {
  .doodle--live .doodle__ink { animation: pen-draw 2.4s cubic-bezier(0.37, 0, 0.63, 1) 0.4s both; }
  /* When the script is on its way (a first visit fetches it last), the plain
     draw holds back so the light can draw the ring. It still runs after 3s
     in case the script never arrives. */
  .js .doodle--live .doodle__ink { animation-delay: 3s; }
}

/* The gap is longer than the path and the start sits just past 1, so no
   zero-length dash exists: a round cap would otherwise leave a dot at the
   stroke's ends before the ink reaches them. */
.doodle--live .doodle__ink { stroke-dasharray: 1 2; }

@keyframes pen-draw { from { stroke-dashoffset: 1.002; } to { stroke-dashoffset: 0; } }

.doodle--squiggle {
  position: absolute;
  left: 2%;
  bottom: -0.38em;
  width: 96%;
  height: 0.28em;
}

.squiggled { position: relative; display: inline-block; }

.doodle--arrow { width: 78px; height: 36px; flex: none; }
.doodle--arrow-flip { transform: scaleX(-1); }

@media (max-width: 899px) {
  .doodle--arrow { transform: rotate(90deg); margin-block: 0.5rem; }
  .doodle--arrow-flip { transform: rotate(90deg) scaleX(-1); }
}

/* --- Scroll reveals: CSS only, content visible without support ----------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    /* Stagger spatially, not with delays, so it reverses correctly on scroll-up. */
    .reveal-group > *:nth-child(2) { animation-range: entry 4% cover 30%; }
    .reveal-group > *:nth-child(3) { animation-range: entry 8% cover 34%; }
    .reveal-group > *:nth-child(4) { animation-range: entry 12% cover 38%; }
    .steps.is-live > .step.reveal { animation-name: step-fade; }
    /* The track fades in with the first stage, never ahead of it. */
    .steps { view-timeline-name: --steps; }
    .steps::before {
      animation: step-fade linear both;
      animation-timeline: --steps;
      animation-range: entry 0% cover 26%;
    }
  }
}

@keyframes step-fade { from { opacity: 0; } to { opacity: 1; } }

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

.section { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

.section--lavender { background: #F1EDFA; overflow: clip; }
.section--mint { background: #EAF5EF; overflow: clip; }
.section--dark { background: var(--dark); color: #EFEDFB; }

.rule-dashed {
  height: 1px;
  border: 0;
  background-image: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px);
  opacity: 0.22;
}

.shape {
  position: absolute;
  width: clamp(300px, 38vw, 480px); aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
}

.shape--violet { background: var(--violet); top: 8%; left: -12%; }
.shape--rose { background: var(--rose); right: -14%; bottom: 2%; }
.shape--mint { background: var(--mint-mid); top: 4%; left: -10%; }

@keyframes shape-drift { to { transform: translateY(-110px); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shape { animation: shape-drift linear both; animation-timeline: view(); }
  }
}

/* --- Start here: pick what you're working on ---------------------------- */
/* Pure CSS: the radio group drives which panel shows via :has(). No JS. */

.picker {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.5rem, 4.5vw, 3.25rem);
  box-shadow: 0 30px 70px rgb(21 21 63 / 0.07);
}

.picker__title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.75rem);
  max-width: 18ch;
}

.picker__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: 0;
  border: 0;
  position: relative;
  isolation: isolate;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.2rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-out) var(--ease), border-color var(--t-out) var(--ease),
              color var(--t-out) var(--ease);
}

.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.chip svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--ink); transition-duration: var(--t-in); }
  .picker__choices.is-live > .chip:hover { border-color: var(--line-strong); }
}
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* With JS the navy fill slides to the chip under the pointer, and the answer
   below follows. The fill is a clipped copy of the row drawn cream on navy,
   so the text is cream exactly where the navy is, even halfway through a
   slide. */
.picker__choices.is-live > .chip { z-index: 1; }
.picker__choices.is-live > .chip:has(input:checked) {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.chip-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--ink);
  user-select: none;
  transition: clip-path var(--t-glide) var(--ease-glide);
}
.chip-fill > .chip { color: var(--cream); background: none; border-color: transparent; }
.chip-fill > .chip.is-focus { outline: 3px solid var(--cream); outline-offset: 3px; border-radius: 999px; }
.picker__choices.is-snap .chip-fill { transition: none; }

.picker__panel {
  display: none;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  animation: panel-in 0.45s var(--ease);
}

@media (min-width: 900px) {
  .picker__panel { grid-template-columns: 1.5fr 1fr; }
}

.picker:has(input[value="new"]:checked)   .picker__panel[data-for="new"],
.picker:has(input[value="fix"]:checked)   .picker__panel[data-for="fix"],
.picker:has(input[value="grow"]:checked)  .picker__panel[data-for="grow"],
.picker:has(input[value="brand"]:checked) .picker__panel[data-for="brand"] { display: grid; }

/* Without :has() every answer is simply shown, stacked. */
@supports not selector(:has(*)) {
  .picker__panel { display: grid; margin-bottom: 2.5rem; }
}

@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

/* Sweeping the row would otherwise restart this entry animation per chip. */
.picker.is-hover-swap .picker__panel { animation: none; }

.picker__panel h3 {
  font-size: clamp(1.35rem, 1rem + 1.3vw, 1.8rem);
  max-width: 24ch;
  margin-bottom: 0.8rem;
}

.picker__panel p { color: var(--ink-body); max-width: 56ch; margin-bottom: 1.6rem; }

.picker__list {
  background: #F4F1FB;
  border-radius: 18px;
  padding: 1.35rem 1.5rem;
  display: grid;
  gap: 0.85rem;
}

.picker__list li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-weight: 500;
}

.picker__list li::before {
  content: "";
  width: 0.7em; height: 0.38em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  rotate: -45deg;
  translate: 0 -0.25em;
  flex: none;
}

.assurances {
  display: grid;
  gap: 1.1rem 2rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 900px) { .assurances { grid-template-columns: repeat(3, 1fr); } }

.assurances li {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-body);
}

.assurances strong { display: block; color: var(--ink); font-weight: 600; }

.assurances svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  margin-top: 1px;
  transition: rotate var(--t-out) var(--ease), translate var(--t-out) var(--ease);
}

/* A lavender tile fades up behind the icon, the same tile-and-tilt gesture
   the service cards use. */
.assurances li::before {
  content: "";
  position: absolute;
  left: -8px; top: -7px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--lavender);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-out) var(--ease), scale var(--t-out) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .assurances li:hover::before { opacity: 1; transition-duration: var(--t-in); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .assurances li::before { scale: 0.6; }
  .assurances li:hover::before { scale: 1; }
  .assurances li:hover svg { rotate: -5deg; translate: 0 -1px; transition-duration: var(--t-in); }
}

.marquee__label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: clamp(3rem, 6vw, 4.5rem) 0 0.9rem;
}

.marquee {
  --fade: 5rem;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
}

@supports (mask-image: linear-gradient(#000, #0000)) {
  .marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  }
}

.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee ul { display: flex; align-items: center; flex: none; }

.marquee li {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  color: rgb(21 21 63 / 0.55);
  white-space: nowrap;
  padding-right: 1.4rem;
}

.marquee li::after { content: "·"; color: var(--accent); padding-left: 1.4rem; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Service index: nine services as an editorial list ------------------- */

.index { border-top: 1px solid var(--line-strong); }

.index > li { border-bottom: 1px solid var(--line); }

.index details { --open: 0; }
.index details[open] { --open: 1; }

.index summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.85rem, 3vw, 2rem);
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.index summary::-webkit-details-marker { display: none; }

.index summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 8px; }

.index__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.7);
  border: 1px solid var(--line);
  transition: rotate var(--t-out) var(--ease), background-color var(--t-out) var(--ease);
}

.index__icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.index__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  transition: translate var(--t-out) var(--ease);
}

.index__chev {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  flex: none;
  transition: background-color var(--t-out) var(--ease), border-color var(--t-out) var(--ease),
              rotate 0.4s var(--ease);
}

.index__chev::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 0.3s var(--ease);
}

.index details[open] .index__chev { rotate: 180deg; border-color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .index summary:hover .index__icon { background: var(--card); transition-duration: var(--t-in); }
  .index summary:hover .index__chev { border-color: var(--ink); background: var(--lavender); transition-duration: var(--t-in), var(--t-in), 0.4s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .index summary:hover .index__icon { rotate: -4deg; }
  .index summary:hover .index__name { translate: 6px 0; transition-duration: var(--t-in); }
}

.index__body {
  padding-bottom: 1.6rem;
  padding-left: calc(42px + clamp(0.85rem, 3vw, 2rem));
  display: grid;
  gap: 1rem;
  max-width: 68ch;
}

.index__body p { color: var(--ink-body); }

@supports selector(::details-content) {
  .index ::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete;
  }
  .index details[open]::details-content { block-size: auto; }
}

/* --- App service cards (dark section) ------------------------------------ */

.apps__layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 900px) {
  .apps__layout { grid-template-columns: minmax(0, 380px) 1fr; gap: 4.5rem; }
  .apps__device {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    align-self: start;
  }
}

.apps__device { display: flex; justify-content: center; }

.apps__list { display: flex; flex-direction: column; gap: 1.25rem; }

.app-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: rgb(255 255 255 / 0.045);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  position: relative;
  transition: translate var(--t-out) var(--ease), background-color var(--t-out) var(--ease),
              border-color var(--t-out) var(--ease);
}

/* Hover movement on .reveal elements uses translate/rotate/scale: the
   reveal's fill would silently override a hover transform. The 8px skirt
   below a lifted card keeps it under a pointer resting at its bottom edge. */
@media (hover: hover) and (pointer: fine) {
  .app-card:hover {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(184 172 234 / 0.45);
    transition-duration: var(--t-in);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .app-card:hover { translate: 0 -4px; }
  .app-card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}

.app-card h3 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.app-card p { font-size: 0.9375rem; line-height: 1.62; color: rgb(239 237 251 / 0.75); }

.card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--lavender);
  flex: none;
  transition: translate var(--t-out) var(--ease), rotate var(--t-out) var(--ease),
              background-color var(--t-out) var(--ease);
}

.card__icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-card .card__icon { background: rgb(184 172 234 / 0.16); }
.app-card .card__icon svg { stroke: #CFC7F4; }
@media (hover: hover) and (pointer: fine) {
  .app-card:hover .card__icon { background: rgb(184 172 234 / 0.3); transition-duration: var(--t-in); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .app-card:hover .card__icon { translate: 0 -2px; rotate: -5deg; }
}

/* Device frame — deliberately generic: no notch, no home indicator, no
   Apple-specific detail (Apple's marketing guidelines prohibit illustrated
   devices carrying platform-unique features). */
.device-frame {
  width: min(290px, 74vw);
  aspect-ratio: 9 / 18.6;
  border-radius: 40px;
  background: #23234F;
  padding: 11px;
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.45), inset 0 0 0 2px rgb(255 255 255 / 0.08);
  animation: floaty 7s ease-in-out infinite alternate;
}

@keyframes floaty {
  from { transform: translateY(-7px) rotate(-0.6deg); }
  to { transform: translateY(9px) rotate(0.6deg); }
}

.device-frame__screen {
  width: 100%; height: 100%;
  border-radius: 30px;
  background: var(--bg);
  overflow: clip;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  container-type: inline-size;
}

.device-frame__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.device-frame__logo { width: 24px; height: 24px; color: var(--ink); }
.device-frame__title { width: 42%; height: 8px; border-radius: 999px; background: rgb(21 21 63 / 0.18); }
.device-frame__hero { height: 21%; border-radius: 18px; background: linear-gradient(120deg, var(--violet), var(--rose)); margin-bottom: 12px; }
.device-frame__row { display: flex; gap: 10px; margin-bottom: 12px; }
.device-frame__row span { flex: 1; height: 52px; border-radius: 14px; }
.device-frame__row span:first-child { background: var(--mint); }
.device-frame__row span:last-child { background: var(--butter); }
.device-frame__chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding: 10px 6px 14px; }
.device-frame__chart i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--lavender); }
.device-frame__chart i:nth-child(2) { background: var(--violet); }
.device-frame__chart i:nth-child(4) { background: var(--rose); }
.device-frame__chart i:nth-child(6) { background: var(--ink); }
.device-frame__tabs { display: flex; justify-content: space-around; align-items: center; height: 44px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgb(21 21 63 / 0.08); }
.device-frame__tabs span { width: 22px; height: 6px; border-radius: 999px; background: rgb(21 21 63 / 0.16); }
.device-frame__tabs span.on { background: var(--ink); width: 30px; }

/* --- How we work: a real sequence, so it's an ordered list -------------- */

.steps { position: relative; display: grid; gap: 2.25rem; }

/* The rail joining the stages: vertical on phones, horizontal on desktop.
   A faint solid line; the light draws its colour over it. */
.steps::before {
  content: "";
  position: absolute;
  left: 9px; top: 10px; bottom: var(--rail-end, 10px);   /* JS ends it at the last circle */
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}

.step { position: relative; padding-left: 2.75rem; }

.step__dot {
  position: absolute;
  left: 0; top: 0.3rem;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}

.step:last-child .step__dot { background: var(--accent); }

.step h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.9375rem; color: var(--ink-body); max-width: 34ch; }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps::before {
    left: 10px; right: 10px; top: 9px; bottom: auto;
    width: auto; height: 2px;
  }
  .step { padding-left: 0; padding-top: 2.6rem; }
  .step__dot { top: 0; }
}

/* Live mode (JS): a miniature of the hero light travels the rail as you
   scroll. Solid ink appears behind it, and each ring is checked like a radio
   button as it arrives. Stacking: rail -2 < fill -1 < rings < light 1. */
.steps.is-live { isolation: isolate; }
.steps.is-live::before { z-index: -2; }

.steps__track { position: absolute; inset: 0; pointer-events: none; }

.steps__fill {
  position: absolute;
  z-index: -1;
  border-radius: 1px;
  transform-origin: 0 0;
  scale: 0 1;
}
[data-axis="x"] .steps__fill { background: linear-gradient(90deg, var(--violet), var(--accent)); }
[data-axis="y"] .steps__fill { scale: 1 0; background: linear-gradient(180deg, var(--violet), var(--accent)); }

.steps__head {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  width: 0; height: 0;
  opacity: 0;
  will-change: translate, opacity;
}
.steps__head::after {
  content: "";
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(244 241 255) 0 1.5px, rgb(143 102 242) 2.6px, rgb(91 71 230) 5px);
  box-shadow: 0 0 0 3px rgb(143 102 242 / 0.16), 0 0 12px 2px rgb(143 102 242 / 0.5),
              0 0 24px 6px rgb(213 110 208 / 0.14);
}
.steps__head::before { content: ""; position: absolute; border-radius: 2px; }
[data-axis="x"] .steps__head::before {
  right: 0; top: -1px;
  width: 44px; height: 2px;
  background: linear-gradient(90deg, rgb(248 185 147 / 0), rgb(245 142 174 / 0.45) 35%, rgb(213 110 208 / 0.8) 65%, rgb(143 102 242));
}
[data-axis="y"] .steps__head::before {
  bottom: 0; left: -1px;
  width: 2px; height: 36px;
  background: linear-gradient(180deg, rgb(248 185 147 / 0), rgb(245 142 174 / 0.45) 35%, rgb(213 110 208 / 0.8) 65%, rgb(143 102 242));
}

.steps.is-live .step__dot {
  /* Light enough to read as "not yet", dark enough to stay above 3:1 on the
     canvas. Plain --violet measured 1.94:1. */
  border-color: color-mix(in srgb, var(--accent) 78%, var(--bg));
  transition: border-color var(--t-in) var(--ease), background-color var(--t-in) var(--ease),
              box-shadow 700ms var(--ease);
}
.steps.is-live .step.is-reached .step__dot { border-color: var(--accent); }
.steps.is-live .step__dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  scale: 0;
  transition: scale var(--t-in) var(--ease);
}
.steps.is-live .step.is-reached .step__dot::after { scale: 1; }
.steps.is-live .step.is-reached:has(+ .steps__track) .step__dot::after { scale: 1.75; }

/* The line ends at the last stage instead of trailing past it, and that
   stage fills solid and keeps a soft halo once the light has arrived
   (always, in the static version). */
.steps.is-live .step.is-reached:has(+ .steps__track) .step__dot,
.steps:not(.is-live) .step:last-child .step__dot {
  background-color: var(--accent);
  box-shadow: 0 0 0 6px rgb(107 94 199 / 0.14), 0 0 20px 2px rgb(143 102 242 / 0.28);
}
@media (min-width: 900px) {
  .steps::before { right: calc(25% - 1.5rem - 10px); }   /* the fourth circle's centre */
}
/* Phones without the live version (no JS, or reduced motion): cover the rail
   below the last circle, since its position depends on the text above it.
   ::before, so the circle and its halo paint over the cover. */
@media (max-width: 899px) {
  .steps:not(.is-live) .step:last-child::before {
    content: "";
    position: absolute;
    left: 8px; top: calc(0.3rem + 20px); bottom: 0;
    width: 4px;
    background: var(--bg);
  }
}
.steps.is-live .step__dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.steps.is-live .step.is-arrived .step__dot::before { animation: dot-flare 700ms var(--ease); }
.steps.is-live .step.is-arrived:has(+ .steps__track) .step__dot::before { --flare: 3; animation-duration: 1200ms; }
@keyframes dot-flare { from { opacity: 0.55; scale: 1; } to { opacity: 0; scale: var(--flare, 2.2); } }

.steps.is-live .step h3 { color: var(--ink-soft); transition: color var(--t-in) var(--ease); }
.steps.is-live .step.is-reached h3 { color: var(--ink); }

/* --- Why Vienti ---------------------------------------------------------- */

.pillars {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The box hugs the diagram, so the empty margins beside the cards don't
     count as hovering the row (which lights the arrows). */
  width: min(300px, 100%);
  margin-inline: auto;
  gap: 0.75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .pillars { flex-direction: row; justify-content: center; gap: 1.25rem; width: fit-content; max-width: 100%; }
}

.pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.75rem;
  text-align: center;
  /* Same as min(300px, 100%), written so the row can shrink-wrap its cards. */
  width: 300px;
  max-width: 100%;
  position: relative;
  transition: translate var(--t-out) var(--ease), box-shadow var(--t-out) var(--ease),
              border-color var(--t-out) var(--ease);
}

.pillar .card__icon { margin: 0 auto 1rem; background: var(--mint); }
.pillar h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.pillar p { font-size: 0.9rem; color: var(--ink-body); }

.pillar--core {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 24px 50px rgb(21 21 63 / 0.28);
}
.pillar--core p { color: rgb(250 247 242 / 0.78); }
.pillar__mark {
  width: 52px; height: 52px; color: var(--cream); margin: 0 auto 1rem;
  transition: scale var(--t-out) var(--ease);
}

/* The hovered card lifts; the arrow beside it turns violet and nudges toward
   the core, so the diagram says both disciplines flow into one studio. */
.pillars .doodle--arrow { transition: translate var(--t-out) var(--ease); }
.pillars .doodle--arrow path { transition: stroke var(--t-out) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .pillar:not(.pillar--core):hover {
    box-shadow: 0 18px 40px -12px rgb(21 21 63 / 0.16);
    border-color: rgb(107 94 199 / 0.35);
    transition-duration: var(--t-in);
  }
  .pillar--core:hover { box-shadow: 0 32px 64px -12px rgb(21 21 63 / 0.36); transition-duration: var(--t-in); }
  /* Lit whenever the pointer is in the row but not on the card at the far
     end, so crossing the gap to the core doesn't blink it off and on. */
  .pillars:hover:not(:has(> .pillar:last-child:hover)) > .doodle--arrow:not(.doodle--arrow-flip) path,
  .pillars:hover:not(:has(> .pillar:first-child:hover)) > .doodle--arrow-flip path {
    stroke: var(--accent);
    transition-duration: var(--t-in);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pillar:hover { translate: 0 -4px; }
  .pillar:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
  .pillar:hover .card__icon { translate: 0 -2px; rotate: -5deg; transition-duration: var(--t-in); }
  .pillar--core:hover .pillar__mark { scale: 1.05; transition-duration: var(--t-in); }   /* the logo never rotates */
  .pillars:hover:not(:has(> .pillar:last-child:hover)) > .doodle--arrow:not(.doodle--arrow-flip) {
    translate: 3px 0; transition-duration: var(--t-in);
  }
  .pillars:hover:not(:has(> .pillar:first-child:hover)) > .doodle--arrow-flip {
    translate: -3px 0; transition-duration: var(--t-in);
  }
  @media (max-width: 899px) {
    .pillars:hover:not(:has(> .pillar:last-child:hover)) > .doodle--arrow:not(.doodle--arrow-flip) { translate: 0 3px; }
    .pillars:hover:not(:has(> .pillar:first-child:hover)) > .doodle--arrow-flip { translate: 0 -3px; }
  }
}

/* --- Final CTA ----------------------------------------------------------- */

.cta-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--blush), var(--lavender) 65%, var(--mint));
  border-radius: 28px;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}

.cta-panel .blob { z-index: 0; opacity: 0.5; }
.cta-panel > :not(.blob) { position: relative; z-index: 1; }

.cta-panel h2 {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3rem);
  max-width: 18ch;
  margin: 0 auto 1rem;
}

.cta-panel > p { color: var(--ink-body); max-width: 44ch; margin: 0 auto 2rem; }
.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.cta-panel .btn--ghost { background: rgb(255 255 255 / 0.55); }

@media (hover: hover) and (pointer: fine) {
  .cta-panel .btn--ghost:hover { background: rgb(255 255 255 / 0.88); box-shadow: 0 10px 26px rgb(21 21 63 / 0.1); }
}

/* A soft light that follows the pointer across the panel (JS), above the
   pastel gradient and blobs, below the text and buttons. */
.cta-panel > .cta-panel__glow {
  position: absolute;
  z-index: 0;
  left: 0; top: 0;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0));
  opacity: 0;
  pointer-events: none;
  will-change: translate;
  transition: opacity 600ms var(--ease);
}
.cta-panel__glow.is-lit { opacity: 1; transition-duration: var(--t-in); }

.btn__icon {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  transition: rotate var(--t-out) var(--ease), translate var(--t-out) var(--ease);
}

/* The icon tips, like a letter being sent. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover .btn__icon { rotate: -8deg; translate: 2px -1px; transition-duration: var(--t-in); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:focus-visible .btn__icon { rotate: -8deg; translate: 2px -1px; transition-duration: var(--t-in); }
}

.cta-panel__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.25rem;
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line-strong);
  font-size: 0.9375rem;
}

.cta-panel__contacts li { display: flex; flex-direction: column; gap: 0.15rem; align-items: center; }

.cta-panel__contacts span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cta-panel__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
  /* Two underlines: a thin ink one at rest slides away to the right while a
     2px violet one draws in from the left. Fully reversible mid-way. */
  text-decoration: none;
  background:
    linear-gradient(var(--accent) 0 0) left bottom / 0 2px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 100% 1px no-repeat;
  transition: background-size var(--t-out) var(--ease);
}
.cta-panel__contacts a:focus-visible { background-size: 100% 2px, 0 1px; transition-duration: var(--t-in); }
@media (hover: hover) and (pointer: fine) {
  .cta-panel__contacts a:hover { background-size: 100% 2px, 0 1px; transition-duration: var(--t-in); }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--dark);
  color: rgb(239 237 251 / 0.78);
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.75rem;
}

@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr; } }

.site-footer h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(239 237 251 / 0.55);
  margin-bottom: 1rem;
}

.site-footer li { margin-bottom: 0.6rem; }
.site-footer a {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--t-out) var(--ease), text-decoration-color var(--t-out) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: #fff; text-decoration-color: currentColor; transition-duration: var(--t-in); }
}
.site-footer__tag { margin-top: 1rem; max-width: 30ch; }

.entity {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgb(239 237 251 / 0.6);
}

.entity address { font-style: normal; }
.entity p + address { margin-top: 0.6rem; }

.hl {
  color: inherit;
  font-weight: 600;
  padding-inline: 0.12em;
  border-radius: 2px;
  background: linear-gradient(transparent 58%, rgb(184 172 234 / 0.55) 58% 92%, transparent 92%);
}

.site-footer .hl {
  color: #fff;
  background: linear-gradient(transparent 62%, rgb(184 172 234 / 0.4) 62% 94%, transparent 94%);
}

.entity__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin-top: 0.75rem;
}

.site-footer .entity__contacts li { margin: 0; }
.entity__contacts span { color: rgb(239 237 251 / 0.9); font-weight: 600; margin-right: 0.35rem; }
.entity__contacts a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; }

/* The rule runs full width; only the text is constrained. */
.entity > * { max-width: 82ch; }
.entity strong { color: rgb(239 237 251 / 0.9); font-weight: 600; }
.entity a { text-decoration: underline; }

.site-footer__copy {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgb(239 237 251 / 0.62);
}

/* --- About page ---------------------------------------------------------- */

.page-head { position: relative; padding-block: calc(var(--header-h) + 4rem) 2.5rem; }

/* The intro and the first section sit closer together. */
.page-head + .section { padding-top: clamp(2rem, 3.5vw, 3rem); }
.prose-block > h2:first-child { margin-top: 0; }

/* Soft colour in the white space beside the text column, drifting with the
   scroll like the homepage's section shapes. Behind the text (z-index -1),
   and under the footer, which paints over anything that reaches it. */
.page-head + .section .shape { z-index: -1; }
.shape--about-violet { background: var(--violet); top: 10%; right: -10%; }
.shape--about-mint { background: var(--mint-mid); top: 46%; right: 2%; }
.shape--about-rose { background: var(--rose); bottom: 4%; right: -12%; }

.page-head h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem);
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-bottom: 1.25rem;
}

.page-head p { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); color: var(--ink-soft); max-width: 58ch; }
.page-head p:not(.eyebrow) { color: var(--ink-body); }

.prose-block { max-width: 68ch; }
.prose-block h2 { font-size: 1.5rem; margin-block: 2.75rem 0.9rem; }
.prose-block p + p { margin-top: 1em; }
.prose-block p { color: var(--ink-body); }
.prose-block a:not(.btn) { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; }

.factlist { display: grid; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line); }

.factlist > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) { .factlist > div { grid-template-columns: 14rem 1fr; } }

.factlist dt { font-weight: 600; font-size: 0.9375rem; }
.factlist dd { color: var(--ink-body); font-size: 0.9375rem; }

/* --- User preference blocks ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .doodle path { stroke-dashoffset: 0; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #2B2B52; --ink-body: #2B2B52; --line: rgb(21 21 63 / 0.3); --accent: #4A3EAE; }
  .card, .pillar, .app-card { border-width: 2px; }
  .steps.is-live .step__dot { border-color: var(--accent); }
}

@media (forced-colors: active) {
  :root {
    --ink: CanvasText; --bg: Canvas; --ink-soft: CanvasText; --ink-body: CanvasText;
    --line: CanvasText; --line-strong: CanvasText;
    --accent: CanvasText; --violet: CanvasText;
  }
  /* The traced logo keeps its own colours by default, which disappear on a
     black canvas. */
  .logo__mark, .logo__type { forced-color-adjust: auto; color: CanvasText; }
  .chip:has(input:checked) { background: Highlight; border-color: Highlight; color: HighlightText; }
  .chip:has(input:checked) svg { stroke: HighlightText; }
  .blob, .shape, .cta-panel, .device-frame__hero, .progress span { background: none; }
  .pillar, .app-card, .cta-panel, .device-frame { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonBorder; background: ButtonFace; color: ButtonText; }
  .index__chev { border-color: CanvasText; }
  svg { fill: none; stroke: currentColor; }
  .site-nav__links.has-ink::after,
  .site-nav__links > li > a::after { forced-color-adjust: none; background: CanvasText; }
  .chip-fill, .cta-panel__glow { display: none; }
}

@media print {
  .site-header, .mobile-menu, .blob, .shape, .marquee, .skip-link,
  .chip-fill, .steps__track, .cta-panel__glow { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}