/* Waveshaper. One stylesheet, no build step.
   Identity: dark, purple and orange wave lines, editorial serif headings, mono labels, hard offset shadows.
   Everything is driven by the tokens in :root. */

/* Self-hosted fonts (see /fonts for the licence files).
   Gambetta and Switzer: Indian Type Foundry, ITF Free Font License (free for commercial use, self-hosting permitted).
   Necto Mono: Collletttivo, SIL Open Font License. */
@font-face { font-family: "Gambetta"; src: url("/fonts/Gambetta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("/fonts/Gambetta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Necto Mono"; src: url("/fonts/NectoMono-400.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* Colour */
  --bg: #0D0D0D;
  --surface: #181818;
  --surface-2: #202020;
  --field: #0F0F0F;
  --border: #2A2A2A;
  --border-strong: #3B3B3B;
  --text: #F2F2F2;
  --text-2: #D0D0D0;
  --muted: #A3A3A3;

  --purple: #A855F7;
  --purple-text: #B57BFA;   /* purple for small text on dark surfaces (passes 4.5:1 on --surface) */
  --purple-dark: #6D28D9;
  --orange: #F97316;
  --orange-dark: #C2410C;
  --green: #4ADE80;         /* success and positive status only */
  --green-dark: #15803D;

  /* Type */
  --f-display: "Gambetta", Georgia, "Times New Roman", serif;
  --f-body: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Necto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-body: clamp(1rem, .3vw + .94rem, 1.125rem);      /* 16 to 18px */
  --fs-lead: clamp(1.125rem, .55vw + 1rem, 1.3125rem);
  --fs-h3: clamp(1.65rem, 1.4vw + 1.15rem, 2.2rem);
  --fs-h2: clamp(2.3rem, 3.4vw + 1.2rem, 4.1rem);
  --fs-h1: clamp(2.7rem, 6vw, 5.8rem);

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(64px, 8vw, 112px);
  --section-tight: clamp(48px, 6vw, 80px);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1180px;

  /* Shape */
  --radius: 6px;
  --r-btn: 4px;
  --shadow-sm: 3px;
  --shadow-md: 6px;
  --shadow-lg: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; font-synthesis: none; }
body {
  margin: 0; font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.65;
  color: var(--text); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--purple); color: var(--bg); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
section[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--purple); color: var(--bg); padding: 10px 14px; border-radius: var(--r-btn);
}
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

/* ---------- Scroll progress + cursor ring ---------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--orange));
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.cursor, .cursor-label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 200;
    width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border: 1.5px solid #fff; border-radius: 50%;
    pointer-events: none; mix-blend-mode: difference; opacity: 0; will-change: transform;
    transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .25s, opacity .3s;
  }
  .cursor.is-on { opacity: 1; }
  .cursor.is-hover { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: #fff; }
  .cursor.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .cursor-label {
    display: block; position: fixed; left: 0; top: 0; z-index: 201; padding: 4px 8px; border-radius: var(--r-btn);
    background: var(--purple); color: var(--bg); font: 700 .68rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
    pointer-events: none; opacity: 0; scale: .8; will-change: transform; transition: opacity .15s, scale .2s var(--ease);
  }
  .cursor-label.is-on { opacity: 1; scale: 1; }
}
/* Over the before / after slider the cursor becomes a face: sad over the old site, a classic rave smiley over the new one */
.cursor__face { display: none; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .cursor.is-face { width: 84px; height: 84px; margin: -42px 0 0 -42px; mix-blend-mode: normal; border-width: 3px; }
  .cursor.is-sad { background: #3F1783; border-color: #CDBBFF; }
  .cursor.is-happy { background: #FFE600; border-color: #111; }
  .cursor.is-sad .cursor__face--sad, .cursor.is-happy .cursor__face--happy { display: block; animation: facepop .32s var(--ease); }
  @keyframes facepop { from { scale: .6; rotate: -14deg; opacity: 0; } }
}

/* ---------- Nav: a floating slab, detached from the edges, hard shadow once you scroll ---------- */
.nav {
  /* The slab sits 18px outside the content column, so the logo inside it lines up with the page content */
  position: fixed; top: 12px; left: max(8px, calc(var(--gutter) - 18px)); right: max(8px, calc(var(--gutter) - 18px)); z-index: 50;
  max-width: calc(var(--maxw) + 36px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: 10px 12px 10px 16px; color: var(--text);
  border: 2px solid transparent; border-radius: var(--radius);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.nav.is-solid, .nav.is-solid-always {
  background: rgba(13, 13, 13, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--border); box-shadow: 4px 4px 0 var(--purple-dark);
}
.nav__brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-family: var(--f-mono); font-weight: 700; letter-spacing: .08em; }
.nav__mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-btn);
  border: 2px solid var(--purple); color: var(--purple); background: var(--bg);
  font-family: var(--f-mono); font-size: .78rem; font-weight: 700; box-shadow: 3px 3px 0 var(--purple-dark);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__mark svg { display: block; width: 72%; height: auto; overflow: visible; }
.nav__brand:hover .nav__mark { transform: rotate(-7deg) translate(-1px, -1px); box-shadow: 5px 5px 0 var(--purple-dark); }
.nav__links { display: none; gap: 30px; }
.nav__links a {
  position: relative; padding-block: 6px; text-decoration: none; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); transition: color .15s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--purple);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__links a:hover, .nav__links a.is-current { color: #fff; }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }
@media (min-width: 860px) { .nav__links { display: flex; } }
@media (max-width: 380px) { .nav__name { display: none; } }

/* ---------- Buttons ---------- */
/* Primary: purple with a hard shadow. Secondary: outlined. Tertiary: .text-link. All share hover, focus, active and disabled states. */
.btn {
  --sh: var(--purple-dark); --so: 4px; --lift: 0px; --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 13px 24px; border-radius: var(--r-btn);
  background: var(--purple); color: var(--bg); border: 2px solid var(--purple);
  font: 700 .92rem/1.1 var(--f-mono); letter-spacing: .03em; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--so) var(--so) 0 var(--sh);
  transform: translate(calc(var(--mx) + var(--lift)), calc(var(--my) + var(--lift)));
  transition: transform .1s ease, box-shadow .1s ease, background .15s, color .15s, border-color .15s;
}
.btn:hover { --lift: -2px; --so: 6px; }
.btn:active { --lift: 2px; --so: 1px; }
.btn:focus-visible { outline-offset: 5px; }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 1rem; }
.btn--sm { --so: 3px; min-height: 42px; padding: 10px 16px; font-size: .84rem; background: transparent; color: var(--text); border-color: var(--border-strong); --sh: var(--border); }
.btn--sm:hover { border-color: var(--purple); color: #fff; --sh: var(--purple-dark); }
.nav.is-solid .btn--sm, .nav.is-solid-always .btn--sm { background: var(--purple); color: var(--bg); border-color: var(--purple); --sh: var(--purple-dark); }
.btn--ghost { background: rgba(13, 13, 13, .4); color: var(--text); border-color: rgba(240, 240, 240, .55); --sh: rgba(240, 240, 240, .2); }
.btn--ghost:hover { border-color: #fff; color: #fff; --sh: var(--purple-dark); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; --lift: 0px; --so: 4px; }

.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: color .15s, text-decoration-color .15s;
}
.text-link:hover { color: var(--purple-text); }
.text-link span { transition: translate .2s var(--ease); }
.text-link:hover span { translate: 3px 0; }

/* ---------- Hero ---------- */
@property --in { syntax: "<number>"; inherits: false; initial-value: 1; }
/* A black page where the giant words are windows onto moving wave lines (drawn in main.js).
   A tall track with a pinned stage: --p runs 0 to 1 over the extra scroll distance, diving into the P until the
   lines fill the screen, then holding on the sea for a moment. Tune the dwell with the height below. */
.wt { --p: 0; position: relative; height: 230vh; height: 230svh; background: #0A0A0A; color: var(--text); border-bottom: 2px solid var(--border); }
.wt__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  /* Copy at the top, buttons at the bottom, sharing the height so they can never overlap */
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(96px, 16vh, 150px) var(--gutter) clamp(24px, 6vh, 56px);
}
.wt__sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--ease); }
.wt.is-ready .wt__sea { opacity: 1; }
/* main.js adds it on bigger screens: a blurred small copy of the lines, screened over them for a soft neon glow (dropped on slow devices) */
.wt__glow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: blur(14px) saturate(1.4); mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s var(--ease) .4s; }
.wt.is-ready .wt__glow { opacity: .7; }
/* Entrance: the copy and buttons glide in one after another while the lines rise into the letters */
.wt__kicker, .wt__small, .wt__foot { translate: 0 calc((1 - var(--in)) * 16px); transition: --in 1s var(--ease); }
.js .wt:not(.is-ready) :is(.wt__kicker, .wt__small, .wt__foot) { --in: 0; }
.wt__kicker { transition-delay: .1s; }
.wt__small { transition-delay: .2s; }
.wt__small--end { transition-delay: .6s; }
.wt__foot { transition-delay: .75s; }

.wt__copy { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; pointer-events: none; container-type: inline-size; }
.wt__kicker {
  margin: 0 0 clamp(14px, 3vh, 28px); font: 700 .72rem/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: #8A8A8A;
  opacity: calc(var(--in) * clamp(0, 1 - var(--p) * 5, 1));
}
.wt__title { margin: 0; font-family: var(--f-display); font-weight: 400; }
.wt__small { display: block; font-size: clamp(1.6rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.03em; opacity: calc(var(--in) * clamp(0, 1 - var(--p) * 4, 1)); }
.wt__small--end { text-align: right; }
/* The giant words are drawn into the canvas; the real text stays here, invisible, for search engines and screen readers.
   Sized to fill the column exactly (one line on wide screens, two on phones), so nothing moves when the canvas takes over.
   Without JS the text simply shows. */
.wt__big { display: block; margin: .1em 0 .12em; font-family: var(--f-body); font-weight: 600; font-size: 12vw; font-size: min(14.8cqi, 32svh); line-height: .86; letter-spacing: -.03em; text-transform: uppercase; color: transparent; white-space: nowrap; }
.wt__big > span { display: inline; }
html:not(.js) .wt__big { color: var(--text); }
html:not(.js) .wt { height: auto; }
/* main.js adds this when the screen is too short for the pinned layout: the hero just flows, no dive */
html:not(.js) .wt__stage, .wt--flow .wt__stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
.wt.wt--flow { height: auto; }

.wt__foot {
  position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin-inline: auto;
  opacity: calc(var(--in) * clamp(0, 1 - var(--p) * 4, 1));
}
.wt__sub { max-width: 30rem; margin: 0 0 18px; font-size: var(--fs-lead); line-height: 1.5; color: #BDBDBD; }
/* Wider screens: paragraph bottom-left, buttons bottom-right, so the hero fits short laptop windows */
@media (min-width: 900px) {
  .wt__foot { display: grid; grid-template-columns: minmax(0, 30rem) auto; justify-content: space-between; align-items: end; column-gap: 48px; }
  .wt__sub { grid-row: 1 / span 2; margin: 0; }
  .wt__cta { justify-content: flex-end; }
  .wt__more { justify-self: end; margin-top: 8px; }
}
.wt__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.wt__cta .btn { box-shadow: none; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.wt__cta .btn--ghost { background: transparent; color: var(--text); border-color: #3A3A3A; }
.wt__cta .btn--ghost:hover { border-color: var(--text); }
.wt__more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-4); min-height: 44px; font-size: var(--fs-sm); color: #9A9A9A; text-decoration: none; }
.wt__more span { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.wt__more i { font-style: normal; color: var(--orange); transition: translate .2s var(--ease); }
.wt__more:hover i { translate: 4px 0; }
@media (max-width: 700px) {
  .wt__stage { padding-top: 96px; }
  .wt__big { font-size: 22vw; font-size: min(27.4cqi, 14svh); }
  .wt__big > span { display: block; }
  .wt__sub { margin-bottom: 14px; font-size: 1rem; }
  .wt__cta { flex-wrap: nowrap; gap: 10px; }
  .wt__cta .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 14px 10px; font-size: .9rem; }
  .wt__more { display: none; }
}
/* Short phones (iPhone SE and similar): tighter spacing so the pinned hero still fits */
@media (max-width: 700px) and (max-height: 600px) {
  .wt__stage { padding-top: 84px; gap: 16px; }
  .wt__kicker { margin-bottom: 10px; }
}

/* ---------- Ticker ---------- */
.marquee { position: relative; overflow: hidden; background: var(--orange); color: var(--bg); border-bottom: 2px solid var(--bg); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; flex-shrink: 0; align-items: center; }
.marquee__group span {
  display: inline-flex; align-items: center; padding: 13px 0; white-space: nowrap;
  font: 700 clamp(.9rem, 1.4vw, 1.1rem)/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; transition: color .15s;
}
.marquee__group span::after { content: ""; width: 9px; height: 9px; margin: 0 clamp(18px, 3vw, 36px); background: var(--purple-dark); transform: rotate(45deg); }
.marquee__group span:hover { color: #fff; }
.marquee__group span[data-type] { cursor: pointer; }

/* ---------- Sections and shared type ---------- */
.section { padding-block: var(--section); border-bottom: 2px solid var(--border); }
.section--tight { padding-block: var(--section-tight); }
.section--alt { background: #121212; }
.section--deep {
  position: relative; overflow: hidden; color: var(--text); border-bottom: 0;
  background: linear-gradient(180deg, #0D0D0D 0%, #0f0820 45%, #06030c 100%);
}
.section--deep::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 12%, rgba(168, 85, 247, .18), transparent 70%),
    radial-gradient(36% 30% at 85% 55%, rgba(249, 115, 22, .09), transparent 70%);
}
.section--deep .wrap { position: relative; z-index: 1; }

.h2 { margin: 0 0 var(--s-5); max-width: 18ch; font-family: var(--f-display); font-weight: 400; color: #fff; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.03em; }
.h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.h2 .w > span { display: inline-block; }
.js .h2--split .w > span { transform: translateY(112%); transition: transform .8s var(--ease); }
.js .h2--split.is-in .w > span { transform: none; }
.subhead { margin: var(--s-8) 0 var(--s-4); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; color: #fff; }

.lead { max-width: 40rem; margin: 0 0 var(--s-6); font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.lead--sm { font-size: var(--fs-body); }
.note { max-width: 42rem; margin: var(--s-5) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.note a, .faq__a a { color: var(--purple-text); text-underline-offset: 3px; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.tags li { padding: 7px 11px; border: 1.5px solid var(--border-strong); border-radius: var(--r-btn); font: 700 .74rem/1 var(--f-mono); letter-spacing: .03em; color: var(--text-2); }

.ticks { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; color: var(--text-2); }
.ticks li { position: relative; padding-left: 34px; }
.ticks li b { color: #fff; font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--green); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: .58em; width: 8px; height: 4px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg); }

/* ---------- Two pathways ---------- */
.pathways { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .pathways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); } }
.pathway {
  --c: var(--purple); --cd: var(--purple-dark); --ct: var(--purple-text);
  display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(28px, 3vw, 40px); text-decoration: none;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md) var(--shadow-md) 0 var(--cd);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.pathway--orange { --c: var(--orange); --cd: var(--orange-dark); --ct: var(--orange); }
.pathway:hover { transform: translate(-3px, -3px); border-color: var(--c); box-shadow: 9px 9px 0 var(--cd); }
.pathway__kicker { font: 700 var(--fs-xs)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ct); }
.pathway h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3vw, 3rem); line-height: 1; color: #fff; }
.pathway p { margin: 0; max-width: 32rem; color: var(--text-2); }
.pathway__meta { font: 600 1.05rem/1.3 var(--f-body); color: #fff; }
.pathway__go { margin-top: auto; padding-top: var(--s-3); font-weight: 600; color: #fff; }
.pathway__go i { font-style: normal; color: var(--c); display: inline-block; transition: translate .2s var(--ease); }
.pathway:hover .pathway__go i { translate: 5px 0; }
.js .pathway.reveal { transition: opacity .6s var(--ease) var(--d, 0ms), translate .6s var(--ease) var(--d, 0ms), transform .12s ease, box-shadow .12s ease, border-color .12s; }

/* ---------- Selected work showcases ---------- */
.showcase { display: grid; gap: var(--s-6); align-items: center; margin-top: var(--s-8); }
.showcase + .showcase { margin-top: clamp(64px, 9vw, 120px); }
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-8); }
  .showcase--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .showcase--flip .showcase__media { order: 2; }
}
.showcase__media { position: relative; }
.showcase__text p { color: var(--text-2); margin: 0 0 var(--s-5); }
.showcase__tag { margin: 0 0 var(--s-3) !important; font: 700 .76rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green) !important; }
.showcase__tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); vertical-align: 1px; }
.showcase__name { margin: 0 0 var(--s-2); font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.02em; color: #fff; }
.showcase__text .showcase__lede { font-size: var(--fs-lead); line-height: 1.45; color: #fff; }
.showcase .tags { margin-bottom: var(--s-6); }
.showcase__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

/* Screenshot frame: a slim bar that names the real domain, then the real screenshot. No fake window dots. */
.frame {
  --cd: var(--purple-dark);
  margin: 0; overflow: hidden; background: var(--surface);
  border: 2px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg) var(--shadow-lg) 0 var(--cd);
}
.frame--orange { --cd: var(--orange-dark); }
.frame__bar { display: flex; align-items: center; padding: 9px 14px; border-bottom: 2px solid var(--border-strong); background: var(--bg); }
.frame__bar span { padding: 3px 12px; border-radius: 999px; background: var(--surface-2); font: 400 .74rem/1.5 var(--f-mono); color: var(--muted); }
.frame img { width: 100%; height: auto; }
.frame--inset {
  position: absolute; right: -4%; bottom: -14%; width: 46%; border-color: var(--border-strong);
  box-shadow: 8px 8px 0 var(--bg), 8px 8px 0 2px var(--border-strong);
}
.showcase--flip .showcase__media { padding-bottom: 12%; }
@media (max-width: 640px) { .frame--inset { position: relative; right: auto; bottom: auto; width: 80%; margin: -12% 0 0 auto; } .showcase--flip .showcase__media { padding-bottom: 0; } }

/* ---------- Website packages, add-ons and quote builder ---------- */
.cards { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
.cards--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards--addons { margin-top: 0; }
@media (min-width: 760px) { .cards--addons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.card {
  --c: var(--purple); --cd: var(--purple-dark); --ct: var(--purple-text);
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(26px, 2.6vw, 34px);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md) var(--shadow-md) 0 var(--cd);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s, background .2s;
}
.card--orange { --c: var(--orange); --cd: var(--orange-dark); --ct: var(--orange); }
.card:hover { border-color: var(--c); transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--cd); }
.card::before { /* soft spotlight that follows the cursor */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--c) 16%, transparent), transparent 65%);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card__kicker { margin: 0 0 var(--s-2); font: 700 .76rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ct); }
.card h3 { margin: 0 0 var(--s-3); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.05; color: #fff; }
.card p { margin: 0 0 var(--s-4); color: var(--text-2); }
.card .card__price { margin: 0 0 var(--s-4); font: 600 1.2rem/1.25 var(--f-body); letter-spacing: -.01em; color: #fff; }
.card__price span { font-size: .85rem; font-weight: 400; color: var(--muted); }
.card__list { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.card__list li { position: relative; padding-left: 20px; }
.card__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--c); }
.card__add {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); align-self: flex-start; margin-top: auto;
  min-height: 46px; padding: 11px 16px; border: 2px solid var(--c); border-radius: var(--r-btn); background: transparent; color: var(--ct);
  font: 700 .86rem/1 var(--f-mono); letter-spacing: .03em; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, transform .1s;
}
.card__add:hover { background: var(--c); color: var(--bg); }
.card__add:active { transform: translate(1px, 1px); }
.card__add .plus { display: inline-block; font-size: 1.1rem; line-height: 1; transition: transform .3s var(--ease); }
.card.is-picked { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--surface)); box-shadow: 9px 9px 0 var(--cd); }
.card.is-picked .card__add { background: var(--c); color: var(--bg); }
.card.is-picked .plus { transform: rotate(45deg); }
.card--addon { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-5); }
.card--addon > div:first-child { flex: 1 1 260px; }
.card--addon p { margin: 0; }
.card--addon .card__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.card--addon .card__price { margin: 0; }
.card--addon .card__add { margin-top: 0; }
.js .card.reveal { transition: opacity .6s var(--ease) var(--d, 0ms), translate .6s var(--ease) var(--d, 0ms), transform .12s ease, box-shadow .12s ease, border-color .12s, background .2s; }

.included {
  margin-top: var(--s-7); padding: clamp(26px, 3vw, 40px); background: var(--bg);
  border: 2px solid var(--border); border-radius: var(--radius);
}
.included h3 { margin: 0 0 var(--s-5); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); color: #fff; }
@media (min-width: 900px) { .included .ticks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-7); } }

/* Live estimate bar */
.quote {
  position: fixed; left: 50%; bottom: 18px; z-index: 55; display: flex; align-items: center; gap: var(--s-4);
  width: min(960px, 100% - 2 * var(--gutter)); padding: 14px 18px;
  background: var(--surface); border: 2px solid var(--purple); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--purple-dark);
  translate: -50% 160%; opacity: 0; visibility: hidden;
  transition: translate .5s var(--ease), opacity .3s, visibility 0s .5s;
}
.quote.is-in { translate: -50% 0; opacity: 1; visibility: visible; transition: translate .5s var(--ease), opacity .3s, visibility 0s; }
.quote__main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.quote__label { font: 700 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.quote__items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text); }
.quote__total { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: #fff; white-space: nowrap; }
.quote__total small { font: 400 .76rem var(--f-mono); color: var(--muted); }
@media (max-width: 640px) {
  .quote { gap: var(--s-3); padding: 12px 14px; bottom: 12px; }
  .quote__items { font-size: .82rem; }
  .quote .btn { min-height: 44px; padding: 10px 12px; font-size: .8rem; }
}

/* ---------- Industry examples: switcher + phone ---------- */
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } }
.types { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-6); }
.type, .chip {
  min-height: 44px; padding: 10px 16px; border: 2px solid var(--border-strong); border-radius: var(--r-btn); background: transparent; color: var(--text-2);
  font: 700 .84rem/1 var(--f-mono); letter-spacing: .03em; cursor: pointer; box-shadow: 3px 3px 0 var(--border);
  transition: transform .1s ease, box-shadow .1s ease, background .15s, color .15s, border-color .15s;
}
.type:hover, .chip:hover { transform: translate(-1px, -1px); border-color: var(--purple); color: #fff; box-shadow: 4px 4px 0 var(--purple-dark); }
.type.is-on, .chip.is-on { background: var(--purple); border-color: var(--purple); color: var(--bg); box-shadow: 3px 3px 0 var(--purple-dark); }
.needs__label { margin: 0 0 var(--s-3); font: 700 var(--fs-xs)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.phone-wrap { display: grid; place-items: center; perspective: 1200px; }
.phone {
  position: relative; width: min(380px, 86vw); aspect-ratio: 9 / 18.5; border-radius: 26px;
  border: 2px solid var(--border-strong); overflow: hidden; background: #fff;
  box-shadow: 14px 14px 0 var(--purple-dark);
  transform: rotateY(-8deg) rotateX(3deg); transition: transform .18s ease-out;
}
.phone__screen { height: 100%; overflow: hidden; }
.ph-scroll { will-change: transform; transition: opacity .16s ease; font-family: var(--f-body); }
.ph-scroll.is-swap { opacity: 0; }

/* The sample sites inside the phone. Each business type has its own brand colours (set as --b, --b2, --ink, --paper). */
.ph { --b: #1F4E46; --b2: #E9C46A; --ink: #15201D; --paper: #F7F3EC; background: var(--paper); color: var(--ink); font-size: 11px; line-height: 1.45; min-height: 100%; }
.ph__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--paper); }
.ph__logo { font: 700 12.5px/1.1 var(--f-body); letter-spacing: -.01em; }
.ph__logo small { display: block; font-size: 8px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.ph__chip { padding: 3px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 7.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ph__hero { position: relative; height: 210px; overflow: hidden; color: #fff; }
.ph__hero img { width: 100%; height: 100%; object-fit: cover; }
.ph__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .7) 100%); }
.ph__hero-copy { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.ph__hero-copy small { display: block; margin-bottom: 4px; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.ph__hero-copy b { display: block; font: 400 21px/1.05 var(--f-display); }
.ph__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
.ph__btn { display: grid; place-items: center; min-height: 34px; padding: 6px; border-radius: 8px; background: var(--b); color: #fff; font-weight: 600; font-size: 10.5px; text-align: center; }
.ph__btn--alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ph__sec { padding: 12px 14px 4px; }
.ph__h { margin: 0 0 8px; font: 400 16px/1.1 var(--f-display); }
.ph__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.ph__rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.ph__rows li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.ph__rows b { font-weight: 600; }
.ph__rows span { opacity: .7; }
.ph__rows em { font-style: normal; font-weight: 600; color: var(--b); }
.ph__pill { padding: 3px 8px; border-radius: 999px; background: var(--b); color: #fff; font-size: 9px; font-weight: 600; }
.ph__pill--soft { background: color-mix(in srgb, var(--b2) 35%, transparent); color: var(--ink); }
.ph__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ph__chips span { padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); font-size: 9.5px; font-weight: 500; }
.ph__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.ph__quote { margin: 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--b2) 25%, var(--paper)); }
.ph__quote b { display: block; margin-bottom: 3px; color: #B7791F; letter-spacing: .1em; }
.ph__form { display: grid; gap: 6px; }
.ph__field { padding: 8px 10px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); color: rgba(0, 0, 0, .45); }
.ph__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ph__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22A35A; }
.ph__map { position: relative; height: 92px; border-radius: 8px; overflow: hidden; background: #E7E2D6; }
.ph__map::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
  linear-gradient(0deg, transparent 58%, #fff 58%, #fff 64%, transparent 64%),
  linear-gradient(35deg, transparent 70%, #CFE3D8 70%); }
.ph__map::after { content: ""; position: absolute; left: 50%; top: 40%; width: 14px; height: 14px; margin: -14px 0 0 -7px; border-radius: 50% 50% 50% 0; background: var(--b); transform: rotate(-45deg); }
.ph__people { display: grid; gap: 8px; }
.ph__person { display: flex; align-items: center; gap: 10px; }
.ph__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--b2); color: var(--ink); font-weight: 700; font-size: 10px; }
.ph__foot { padding: 14px; margin-top: 10px; background: var(--ink); color: var(--paper); font-size: 9.5px; }

/* ---------- Before / after ---------- */
.ba-block { margin-top: clamp(72px, 9vw, 120px); }
.ba-block .subhead { margin-top: 0; }
.ba {
  position: relative; aspect-ratio: 16 / 9; min-height: 320px; margin-top: var(--s-5); overflow: hidden; background: #F4F0E8;
  border: 2px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg) var(--shadow-lg) 0 var(--purple-dark);
  user-select: none; -webkit-user-select: none; container-type: inline-size;
}
@media (max-width: 700px) { .ba { aspect-ratio: 3 / 4; } }
.ba__pane { position: absolute; inset: 0; isolation: isolate; }
.ba__after { z-index: 0; }
.ba__before { z-index: 1; clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); z-index: 3; width: 3px; margin-left: -1.5px; background: var(--orange); pointer-events: none; }
.ba__handle i {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border: 2px solid var(--bg); border-radius: 50%; background: var(--orange); box-shadow: 3px 3px 0 var(--orange-dark);
}
.ba__handle i::before { content: "\2039 \203A"; font: 700 1.1rem/1 var(--f-mono); letter-spacing: .15em; color: var(--bg); }
.ba__tag { position: absolute; top: 12px; z-index: 2; padding: 6px 10px; border-radius: var(--r-btn); font: 700 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.ba__tag--before { left: 12px; background: #2b2b2b; color: #fff; }
.ba__tag--after { right: 12px; background: var(--purple); color: var(--bg); }
.ba__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) { outline: 3px solid var(--purple); outline-offset: 4px; }
.ba__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.ba__controls .note { margin: 0; flex: 1 1 320px; }
.ba__buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Mock sites inside the slider. Sizes scale with the slider's width (container units). */
.mk { position: absolute; inset: 0; overflow: hidden; font-size: clamp(9px, 1.25cqw, 15px); }
/* Before: a 2000s site. Tiled background, centred everything, buried phone number, no clear next step. */
.mk--old {
  padding: 3.6em 3em 2em; text-align: center; color: #1b1b6b; font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive;
  background: #D7E6F2 repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, .45) 10px 20px);
}
.mk__marquee { margin: 0 auto .6em; padding: .25em; width: 80%; background: #FFFF66; color: #CC0000; font-weight: 700; font-size: 1.05em; border: 2px dotted #CC0000; }
.mk__oldhead { margin-bottom: .3em; }
.mk__oldhead b { display: block; font: 700 2em/1.1 "Times New Roman", Times, serif; color: #003399; text-shadow: 2px 2px 0 #99CCFF; }
.mk__oldhead span { font-size: .85em; color: #666; }
.mk__oldnav { margin: .3em 0 1em; font-family: "Times New Roman", Times, serif; color: #0000EE; font-size: 1em; }
.mk__oldbody { display: flex; gap: 1em; align-items: flex-start; max-width: 46em; margin: 0 auto; padding: .8em; background: #fff; border: 3px ridge #999; text-align: left; }
.mk__oldbody img { width: 9em; height: 6em; object-fit: cover; image-rendering: pixelated; filter: saturate(.6) contrast(1.15); border: 2px solid #000; flex-shrink: 0; }
.mk__oldbody p { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: .82em; line-height: 1.3; color: #333; }
.mk__counter { margin: 1em 0 .3em; font: 700 .8em/1 "Courier New", monospace; color: #009900; }
.mk__oldfoot { margin: 0; font-size: .62em; color: #777; font-family: Arial, sans-serif; }
@container (max-width: 560px) {
  .mk { font-size: clamp(8px, 2.6cqw, 13px); }
  .mk--old { padding: 3.6em 1.2em 1.5em; }
  .mk__oldbody { flex-direction: column; align-items: center; }
  .mk__oldbody img { width: 70%; height: auto; aspect-ratio: 3 / 2; }
}
/* After: the same fictional builder, done properly. Its own brand colours, so it reads as a client's site, not ours. */
.mk--new { --mk-brand: #12343B; --mk-accent: #E3A857; --mk-paper: #F6F3EE; display: flex; flex-direction: column; background: var(--mk-paper); color: #12343B; font-family: var(--f-body); }
.mk__bar { display: flex; align-items: center; gap: 1.6em; padding: 3.4em 2.4em 1em; font-size: .95em; }
.mk__logo-new { margin-right: auto; font: 700 1.25em/1 var(--f-body); letter-spacing: -.02em; }
.mk__logo-new span { display: block; margin-top: .2em; font-size: .55em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.mk__nav { font-weight: 500; opacity: .8; }
.mk__bar em { padding: .7em 1.2em; border-radius: .4em; background: var(--mk-brand); color: #fff; font-style: normal; font-weight: 600; }
.mk__hero { position: relative; flex: 1; margin: 0 2.4em; overflow: hidden; border-radius: .8em; color: #fff; }
.mk__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 30, 34, .82) 0%, rgba(10, 30, 34, .35) 60%, rgba(10, 30, 34, .1) 100%); }
.mk__hero-copy { position: absolute; left: 2em; bottom: 2em; z-index: 1; max-width: 26em; }
.mk__hero-copy small { display: block; margin-bottom: .6em; font-size: .8em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-accent); }
.mk__hero-copy h4 { margin: 0 0 .7em; font: 400 2.5em/1.02 var(--f-display); }
.mk__btns { display: flex; flex-wrap: wrap; gap: .6em; }
.mk__btn { padding: .7em 1.2em; border-radius: .4em; background: var(--mk-accent); color: #12343B; font-weight: 700; font-size: .95em; }
.mk__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.mk__services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; margin: 0; padding: 1.4em 2.4em 1.8em; list-style: none; font-size: .9em; }
.mk__services li { padding-top: .7em; border-top: 2px solid var(--mk-accent); color: #3B5A60; }
.mk__services b { display: block; color: #12343B; font-size: 1.05em; }
@container (max-width: 560px) {
  .mk__bar { padding: 3.6em 1.2em .8em; gap: 1em; }
  .mk__nav { display: none; }
  .mk__hero { margin: 0 1.2em; }
  .mk__hero-copy { left: 1.2em; right: 1.2em; bottom: 1.2em; }
  .mk__hero-copy h4 { font-size: 2.2em; }
  .mk__services { grid-template-columns: 1fr; gap: .6em; padding: 1em 1.2em 1.4em; }
}

/* ---------- How it works ---------- */
.steps { display: grid; gap: var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.step { --c: var(--purple); padding-top: var(--s-5); border-top: 2px solid var(--c); }
.step:nth-child(2) { --c: var(--orange); }
.step:nth-child(3) { --c: var(--purple-text); }
.step__no { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--c); }
.step h3 { margin: var(--s-3) 0 var(--s-2); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; color: #fff; }
.step p { margin: 0; color: var(--text-2); }

/* ---------- Why work with me ---------- */
.why { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.why__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--border); }
.why__list li { padding: var(--s-5) 0; border-bottom: 2px solid var(--border); }
.why__list h3 { margin: 0 0 var(--s-1); font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 1vw + 1.1rem, 1.9rem); line-height: 1.15; color: #fff; }
.why__list p { margin: 0; color: var(--text-2); }

/* ---------- Software teaser ---------- */
.teaser { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .teaser { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); } }
.teaser__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.teaser__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.teaser__list li {
  display: grid; gap: 2px; padding: var(--s-5); background: rgba(24, 24, 24, .75);
  border: 2px solid var(--border-strong); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--orange-dark);
}
.teaser__list b { font: 400 1.6rem/1.1 var(--f-display); color: #fff; }
.teaser__list span { color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq-wrap .faq { max-width: 860px; }
.faq { border-top: 2px solid var(--border); }
.faq__item { border-bottom: 2px solid var(--border); }
.faq__item h3 { margin: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); width: 100%; min-height: 64px; padding: 18px 4px;
  background: none; border: 0; color: #fff; text-align: left; cursor: pointer;
  font-family: var(--f-display); font-size: clamp(1.35rem, 1.6vw + .9rem, 1.85rem); line-height: 1.2; transition: color .15s;
}
.faq__q:hover, .faq__item.is-open .faq__q { color: var(--purple-text); }
.faq__icon { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s .4s; }
.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }
.faq__a p { max-width: 42rem; margin: 0 0 var(--s-5); color: var(--text-2); }

/* ---------- Contact form ---------- */
.contact { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: start; } }
.form {
  position: relative; display: grid; gap: var(--s-5); padding: clamp(24px, 3.4vw, 40px); background: var(--surface);
  border: 2px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md) var(--shadow-md) 0 var(--purple-dark);
}
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: var(--s-2); }
.field[hidden] { display: none; }
.field label, .field legend { padding: 0; font-size: var(--fs-sm); font-weight: 600; color: #fff; }
.field legend { margin-bottom: var(--s-2); }
.opt { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--field); border: 2px solid var(--border-strong); border-radius: var(--radius);
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s;
}
textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
::placeholder { color: #7d7d7d; }
input:hover, select:hover, textarea:hover { border-color: #4a4a4a; }
select option { background: var(--bg); color: var(--text); }
select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B57BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple); box-shadow: 4px 4px 0 var(--purple-dark); transform: translate(-1px, -1px); }
.is-invalid, .is-invalid:hover { border-color: var(--orange); }
.field__err { min-height: 0; margin: 0; font-size: var(--fs-sm); color: #FDBA74; }
.field__err:empty { display: none; }
/* Segmented choice for "What's it about?" */
.seg { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seg__opt { position: relative; display: block; cursor: pointer; }
.seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span {
  display: flex; align-items: center; min-height: 52px; height: 100%; padding: 12px 14px; border: 2px solid var(--border-strong); border-radius: var(--radius);
  background: var(--field); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--text-2);
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.seg__opt:hover span { border-color: #4a4a4a; color: #fff; }
.seg__opt input:checked + span { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, var(--field)); color: #fff; box-shadow: 3px 3px 0 var(--purple-dark); }
.seg__opt input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form__status { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-ok { color: var(--text); }
.form__status.is-err { padding: 12px 14px; border-radius: var(--radius); background: rgba(249, 115, 22, .1); border: 1px solid rgba(249, 115, 22, .45); color: #FED7AA; }
.form__privacy { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Testimonial pattern (ready for real quotes; nothing is published until a customer provides one) ---------- */
.testimonial { margin: 0; padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md) var(--shadow-md) 0 var(--purple-dark); }
.testimonial blockquote { margin: 0 0 var(--s-4); font: 400 clamp(1.4rem, 1.4vw + 1rem, 1.9rem)/1.25 var(--f-display); color: #fff; }
.testimonial figcaption { font-size: var(--fs-sm); color: var(--muted); }
.testimonial figcaption b { color: var(--text); font-weight: 600; }

/* ---------- Footer ---------- */
.footer { padding: var(--s-7) 0; font-size: var(--fs-sm); color: var(--muted); background: var(--bg); border-top: 2px solid var(--purple); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.footer__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); }
.nav__mark--dark { width: 28px; height: 28px; font-size: .68rem; box-shadow: 2px 2px 0 var(--purple-dark); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; transition: color .15s; }
.footer a:hover { color: #fff; }
.footer__meta { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); }
kbd { display: inline-block; padding: 1px 7px; border: 2px solid var(--border-strong); border-radius: var(--r-btn); font: 700 .72rem/1.4 var(--f-mono); color: var(--text); box-shadow: 2px 2px 0 var(--purple-dark); }
@media (hover: none) { .kbd-hint { display: none; } }

/* ---------- Scroll reveal (uses `translate` so hover transforms still work) ---------- */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .6s var(--ease) var(--d, 0ms), translate .6s var(--ease) var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; translate: none; }
  .js .h2--split .w > span { transform: none; }
  .wt { height: auto; }
  .wt__stage { position: relative; }
  .phone { transform: none; }
  .cursor, .cursor-label { display: none; }
  .quote { transition: none; }
}