:root {
  --parchment: #f2f2f2;      /* off-white page / paper (matches #paper and #water filters in index.html) */
  --ink: #0037ff;            /* the one brand blue: illustration ink above water, fill below */
  --ink-strong: #0a1a66;     /* headline text — deep enough to read comfortably */
  --night: #002ccc;          /* nav backing over deep water */
  --moon: #ffffff;

  --surface: 35%;            /* waterline in the illustration, as % of its height */
  --img-ratio: 1.7768;       /* 1672 / 941 */
  --stage-w: 100vw;          /* illustration always fills the full width */

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* clip, not hidden, so position: sticky still works */
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--parchment); padding: 10px 14px; border-radius: 8px;
}
.skip:focus { top: 12px; }

/* ---------- Nav ---------- */
/* Floating pill, tile.pt-style: compact at the top of the page (brand + CTA), widens once you
   scroll and the section links fade in. */
.nav {
  position: fixed; z-index: 50;
  top: 16px; left: 50%; translate: -50% 0;
  width: min(320px, calc(100vw - 24px));      /* compact: just the name and the button */
  height: var(--nav-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 12px 0 22px;
  border-radius: 12px;
  color: var(--ink-strong);
  background: color-mix(in srgb, var(--parchment) 80%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgb(10 26 102 / .06);
  transition: width .45s cubic-bezier(.65, 0, .35, 1), color .5s ease, background-color .5s ease,
              translate .4s cubic-bezier(.25, 1, .5, 1), opacity .3s ease;
}
.nav.is-scrolled, .nav:focus-within { width: min(760px, calc(100vw - 24px)); }
.nav.is-hidden { translate: -50% calc(-100% - 24px); opacity: 0; pointer-events: none; }   /* footer on screen: its CTA takes over */
.nav.is-deep { color: var(--moon); background: color-mix(in srgb, var(--night) 55%, transparent); box-shadow: none; }
.nav__brand { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.nav nav { flex: 1; min-width: 0; overflow: hidden; display: flex; justify-content: center; }
.nav__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: .9375rem; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.nav.is-scrolled .nav__links, .nav:focus-within .nav__links { opacity: 1; pointer-events: auto; transition: opacity .35s ease .2s; }
.nav__links a { text-decoration: none; opacity: .8; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
@media (max-width: 720px) {
  .nav nav { display: none; }
  .nav .btn--sm { margin-left: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 500 1rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn--primary { background: var(--ink); color: var(--parchment); }
.btn--primary:hover { background: var(--ink-strong); }
.btn--ghost { border: 1.5px solid currentColor; color: var(--ink); }
.btn--ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav.is-deep .btn--primary { background: var(--moon); color: var(--night); }
.btn:focus-visible, .nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Scene ---------- */
.dive { position: relative; }   /* height set by script.js: scene + blue hold */
.scene {
  position: sticky;          /* pinned while the blue holds; top set by script.js */
  top: var(--pin, 0px);
  /* Keep the illustration's aspect on wide screens; on narrow screens stay tall (250svh) and crop the sides. */
  height: max(calc(var(--stage-w) * var(--img-ratio)), 250svh);
  overflow: hidden;
  isolation: isolate;
}
.layer { position: absolute; inset: 0; background: var(--parchment); }
.bg-col { position: absolute; inset: 0; margin-inline: auto; width: var(--stage-w); }
.bg { width: 100%; height: 100%; object-fit: cover; object-position: 62% 0; user-select: none; }

.layer--above { filter: url(#paper); }
/* Hero landscape fills everything above the waterline, full width, cropped to fit */
.hero-art { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--surface) + 3%); object-fit: cover; object-position: 50% 30%; user-select: none; }
.layer--deep {
  filter: url(#water);
  /* soft edge right at the waterline; the flood clip (script.js) does the rest */
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--surface) - .6%), #000 calc(var(--surface) + 1.2%));
          mask-image: linear-gradient(to bottom, transparent calc(var(--surface) - .6%), #000 calc(var(--surface) + 1.2%));
}
.layer--deep, .depth { visibility: hidden; }   /* shown by script.js once the flood covers the screen */

/* Flood overlay: fixed to the viewport, above the scene and hero, below the nav */
.flood {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  visibility: hidden;
}
.flood img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

.depth {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, #fff var(--surface), #fff calc(var(--surface) + 12%), #c9d3ee 100%);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--surface), #000 calc(var(--surface) + 2%));
          mask-image: linear-gradient(to bottom, transparent var(--surface), #000 calc(var(--surface) + 2%));
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.surface-marker { position: absolute; left: 0; right: 0; top: var(--surface); height: 1px; pointer-events: none; visibility: hidden; }

/* Videos have a white background: multiply leaves only the ink lines on the parchment. */
.weed, .lady {
  position: absolute;
  mix-blend-mode: multiply;
  /* decoded video white is ~253, not 255; lift it so the frame edge never shows through the water filter */
  filter: brightness(1.03) contrast(1.04);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease, scale 1.6s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.weed {
  left: var(--x); bottom: var(--b); width: var(--w);
  aspect-ratio: 360 / 922;
  transform-origin: 50% 100%;
  scale: .96;
}
.weed--flip { rotate: y 180deg; }
.weed--back  { --o: .42; }
.weed--mid   { --o: .72; }
.weed--front { --o: 1; }
.weed.is-in { opacity: var(--o); scale: 1; }

.lady {
  left: 50%; bottom: 5%;     /* centred in the clearing on the seabed */
  translate: -50% 0;
  width: clamp(220px, 28%, 420px);
  aspect-ratio: 600 / 900;
  transform-origin: 50% 100%;
  scale: .9;
}
.lady.is-in { opacity: .92; scale: 1; }

.fish {
  position: absolute; left: 0; top: 0;
  width: var(--fw);
  will-change: transform;
  pointer-events: none;
}
.fish img { width: 100%; height: auto; }
.fish img { transform: scaleX(-1); }   /* artwork faces left; mirrored so the sprite faces heading 0 (right) */
.fish--far { opacity: .7; filter: blur(.4px); }
.fish--lure { --fw: clamp(34px, 3vw, 46px); opacity: 0; transition: opacity .35s ease; }
.fish--lure.is-on { opacity: 1; }
.scene.lure-on, .scene.lure-on * { cursor: none; }   /* the lure fish is the cursor over the water */

/* ---------- Hero copy ---------- */
.hero {
  position: absolute; z-index: 5;
  top: 17%;                 /* just under the castle's horizon line */
  left: clamp(16px, 6vw, 96px);
  width: min(620px, calc(100% - 32px));
  color: var(--ink-strong);
}
.hero::before {           /* parchment wash (plus a light blur) so the text reads clearly over the ink lines */
  content: ""; position: absolute; inset: -26% -16% -20% -20%; z-index: -1;
  background: radial-gradient(closest-side, var(--parchment) 72%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
          mask-image: radial-gradient(closest-side, #000 72%, transparent);
}
.hero__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__title strong { font-weight: 700; }
.hero__sub {
  margin: 0 0 28px; max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5; color: var(--ink-strong);
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.scroll-cue {
  position: absolute; z-index: 5; left: 50%; translate: -50% 0;
  top: min(calc(100svh - 84px), 31%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--ink);
  transition: opacity .4s;
}
.scroll-cue i { width: 1.5px; height: 36px; background: linear-gradient(currentColor, transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity: .5 } 50% { transform: scaleY(1); opacity: 1 } }
.scroll-cue.is-hidden { opacity: 0; }

/* ---------- Content on the solid blue ---------- */
.blue {
  position: absolute; left: 0; right: 0; z-index: 45;   /* above the flood (40), below the nav (50) */
  top: var(--blue-top, 100%);                            /* set by script.js */
  padding: 0 clamp(16px, 6vw, 96px);
  color: #fff;
  /* same blue as the flood's final frame. The top fades in from transparent so the last rising
     bubbles stay visible behind it instead of being sliced off by a hard edge. */
  background: linear-gradient(to bottom, transparent 0, var(--ink) 45svh);
}
.blue__intro {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(24px, 4vw, 64px);
  margin-left: calc(-1 * clamp(16px, 6vw, 96px));   /* let the Lady bleed off the left edge */
}
/* The Lady as dark-blue linework on the blue, like tile.pt's illustrations: the white of the video
   multiplies to the brand blue, the ink goes deep navy. The column has its own blue so the blend
   works inside .blue's stacking context (it matches the flood exactly, so there's no visible box). */
.blue__art { background: var(--ink); align-self: stretch; display: flex; align-items: center; }
.blue__lady {
  width: 100%; max-height: 92svh; aspect-ratio: 600 / 900; object-fit: contain; object-position: left center;
  mix-blend-mode: multiply;
  opacity: 0; translate: -3% 0;
  transition: opacity 1.2s ease, translate 1.6s cubic-bezier(.2, .7, .2, 1);
}
.blue__lady.is-in { opacity: 1; translate: 0 0; }

.blue__copy { display: flex; flex-direction: column; gap: 28px; padding-block: 12svh; }
.blue__label {
  margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: .01em;
  color: rgb(255 255 255 / .75);
}
.blue__statement {
  margin: 0;
  font-size: clamp(2rem, 1rem + 3.2vw, 4.25rem);
  line-height: 1.04; font-weight: 400; letter-spacing: -0.035em;
  text-wrap: balance;
}
.blue__statement strong { font-weight: 700; }
.blue__lead {
  margin: 0; max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.5;
  color: rgb(255 255 255 / .82);
  text-wrap: pretty;
}

/* Services accordion */
.svcs { max-width: 1200px; margin: 0 auto; padding: 16svh 0 0; }
.svcs__title { margin: 0 0 20px; font-size: 1rem; font-weight: 500; color: rgb(255 255 255 / .75); }
.svc { border-top: 1.5px solid rgb(255 255 255 / .3); }
.svc:last-child { border-bottom: 1.5px solid rgb(255 255 255 / .3); }
.svc__head { margin: 0; }
.svc__btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline;
  column-gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 3vw, 32px) 0;
  color: #fff;
}
.svc__num { font-size: .9375rem; font-weight: 500; color: rgb(255 255 255 / .6); font-variant-numeric: tabular-nums; }
.svc__name { font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.svc__sub { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: rgb(255 255 255 / .8); }
.svc__icon { position: relative; width: 28px; height: 28px; align-self: center; }
.svc__icon::before, .svc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: currentColor;
  translate: -50% -50%; transition: rotate .35s cubic-bezier(.65, 0, .35, 1);
}
.svc__icon::after { rotate: 90deg; }
.svc.is-open .svc__icon::after { rotate: 0deg; }
.svc__btn:hover .svc__name { font-style: italic; }
.svc__btn:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }

.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.65, 0, .35, 1); }
.svc.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; }
.svc__body {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(20px, 4vw, 64px);
  padding: 0 0 clamp(28px, 4vw, 44px);
  opacity: 0; transition: opacity .3s ease;
}
.svc.is-open .svc__body { opacity: 1; transition-delay: .12s; }
.svc__blurb { margin: 0; font-size: 1.125rem; line-height: 1.5; color: rgb(255 255 255 / .85); }
.svc__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 32px;
}
.svc__list li { position: relative; padding-left: 22px; line-height: 1.45; }
.svc__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1.5px; background: rgb(255 255 255 / .7); }

/* Shared bits for sections on blue */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  color: #fff; font-weight: 500; text-decoration: none;
  border-bottom: 1.5px solid rgb(255 255 255 / .5); padding-bottom: 4px;
  transition: border-color .2s, gap .25s ease;
}
.link-arrow:hover { border-color: #fff; gap: 14px; }
.link-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* AI & automation (home, short) */
.ai {
  max-width: 1200px; margin: 0 auto; padding: 22svh 0 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start;
}
.ai__intro { display: flex; flex-direction: column; gap: 24px; }
.ai__title {
  margin: 0; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.06; font-weight: 400; letter-spacing: -0.035em; text-wrap: balance;
}
.ai__title strong { font-weight: 700; }
.ai__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ai__points li { border-top: 1.5px solid rgb(255 255 255 / .3); padding: 22px 0; }
.ai__points li:last-child { border-bottom: 1.5px solid rgb(255 255 255 / .3); }
.ai__points h3 { margin: 0 0 6px; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; }
.ai__points p { margin: 0; line-height: 1.55; color: rgb(255 255 255 / .82); max-width: 52ch; }

/* Case studies (home, short) */
.work { max-width: 1200px; margin: 0 auto; padding: 22svh 0 26svh; }
.work__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.case {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 280px; padding: 24px;
  border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .22);
  color: #fff; text-decoration: none;
  transition: background-color .25s, border-color .25s, translate .3s ease;
}
.case:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .45); translate: 0 -3px; }
.case:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.case__tag {
  align-self: flex-start; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink);
}
.case__type { font-size: .9375rem; color: rgb(255 255 255 / .7); }
.case__title { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.case__result { margin-top: auto; font-size: 1.125rem; font-weight: 500; }

@media (max-width: 760px) {
  .blue__intro { grid-template-columns: 1fr; min-height: 0; margin-left: 0; padding-top: 10svh; }
  .blue__art { justify-content: center; }
  .blue__lady { max-height: 55svh; object-position: center; }
  .blue__copy { padding-block: 0 8svh; }
  .svc__btn { grid-template-columns: auto 1fr auto; row-gap: 6px; }
  .svc__sub { grid-column: 2; grid-row: 2; }
  .svc__icon { grid-row: 1; grid-column: 3; }
  .svc__body { grid-template-columns: 1fr; }
  .ai, .web, .chapter { grid-template-columns: 1fr; }
  .chapter--flip .chapter__visual { order: 0; }
  .chapter { padding-top: 14svh; }
  .browser { rotate: none; }
}

/* ---------- Home story chapters: a visual, a few words, a link ---------- */
.chapter {
  max-width: 1200px; margin: 0 auto; padding: 20svh 0 0;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.chapter:last-child { padding-bottom: 26svh; }
.chapter--flip .chapter__visual { order: 2; }
.chapter__visual { display: flex; justify-content: center; }
.chapter__art {
  width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
}
.chapter__browser { width: min(100%, 520px); }
.chapter__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.chapter__head {
  margin: 0; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
  line-height: 1.02; font-weight: 400; letter-spacing: -0.04em; text-wrap: balance;
}
.chapter__head strong { font-weight: 700; }
.chapter__line { margin: 0; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.45; color: rgb(255 255 255 / .82); }

/* Priced → Paid → Invoiced: three big steps for the FOCO chapter */
.mini-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; width: min(100%, 420px); }
.mini-flow li {
  display: flex; align-items: baseline; gap: 18px; padding: 18px 24px; border-radius: 12px;
  background: #fff; color: var(--ink); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em;
}
.mini-flow li:nth-child(2) { margin-left: 12%; }
.mini-flow li:nth-child(3) { margin-left: 24%; }
.mini-flow span { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: rgb(0 55 255 / .6); }

/* 1-2-3 animation: cards slide in one after another, then each icon plays (class .is-in set by script.js) */
.mini-flow li { opacity: 0; translate: -28px 0; transition: opacity .6s ease, translate .8s cubic-bezier(.2, .7, .2, 1); }
.mini-flow li:nth-child(2) { transition-delay: .45s; }
.mini-flow li:nth-child(3) { transition-delay: .9s; }
.mini-flow.is-in li { opacity: 1; translate: 0 0; }
.mf { margin-left: auto; align-self: center; flex: none; width: 46px; height: 32px; display: block; }
.mf--list { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.mf--list b { display: block; height: 5px; border-radius: 3px; background: rgb(0 55 255 / .45); transform-origin: left; scale: 0 1; transition: scale .5s ease; }
.mf--list b:nth-child(1) { width: 100%; } .mf--list b:nth-child(2) { width: 78%; } .mf--list b:nth-child(3) { width: 56%; }
.mini-flow.is-in .mf--list b { scale: 1 1; }
.mini-flow.is-in .mf--list b:nth-child(1) { transition-delay: .5s; }
.mini-flow.is-in .mf--list b:nth-child(2) { transition-delay: .65s; }
.mini-flow.is-in .mf--list b:nth-child(3) { transition-delay: .8s; }
.mf--board { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 2px; padding: 2px; border: 2px solid rgb(0 55 255 / .5); border-radius: 3px; }
.mf--board b { background: rgb(0 55 255 / .35); border-radius: 1px; scale: 0; transition: scale .4s cubic-bezier(.25, 1, .5, 1); }
.mf--board b:nth-child(1) { grid-row: span 2; }
.mini-flow.is-in .mf--board b { scale: 1; }
.mini-flow.is-in .mf--board b:nth-child(1) { transition-delay: 1s; }
.mini-flow.is-in .mf--board b:nth-child(2) { transition-delay: 1.15s; }
.mini-flow.is-in .mf--board b:nth-child(3) { transition-delay: 1.3s; }
.mini-flow.is-in .mf--board b:nth-child(4) { transition-delay: 1.45s; background: transparent; outline: 1.5px dashed rgb(0 55 255 / .35); }
.mf--tick { display: flex; align-items: center; justify-content: flex-end; }
.mf--tick svg {
  display: block; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%;
  background: rgb(0 55 255 / .12); overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .5s ease;
}
.mini-flow.is-in .mf--tick svg { stroke-dashoffset: 0; transition-delay: 1.55s; }

/* Words that light up as you scroll (script.js wraps each word in .w) */
.lit .w { opacity: .22; transition: opacity .3s ease; }
.lit .w.on { opacity: 1; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 46; background: var(--ink); color: #fff; overflow: hidden; padding: 16svh clamp(16px, 6vw, 96px) 32px; }
.foot__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto 10svh; }
.foot__kicker { margin: 0; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; }
.foot__mark {
  margin: 0 0 -0.12em; font-size: clamp(4rem, 18.5vw, 20rem); line-height: .9; font-weight: 700; letter-spacing: -0.06em;
  color: rgb(255 255 255 / .1); white-space: nowrap; user-select: none; text-align: center;
}
.foot__tag { max-width: 1200px; margin: 28px auto 24px; text-align: center; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); color: rgb(255 255 255 / .85); }
.foot__pills { list-style: none; max-width: 1200px; margin: 0 auto 5svh; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.foot__pills a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgb(255 255 255 / .1); color: #fff; font-weight: 500; text-decoration: none; transition: background-color .2s;
}
.foot__pills a:hover { background: rgb(255 255 255 / .2); }
.foot__links { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: .9375rem; }
.foot__links a { color: rgb(255 255 255 / .7); text-decoration: none; transition: color .2s; }
.foot__links a:hover { color: #fff; }
.foot__base { max-width: 1200px; margin: 18px auto 0; text-align: center; font-size: .8125rem; color: rgb(255 255 255 / .55); }
.foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Home: the footer floats over the last screen of the underwater scene (seaweed, fish, seabed).
   Clicks pass through to the water (so the fish still chase the lure) except on the footer's own links. */
.foot--over {
  margin-top: -100svh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--ink) 35%, transparent) 45%, color-mix(in srgb, var(--ink) 80%, transparent) 100%);
  pointer-events: none;
}
.foot--over a, .foot--over button { pointer-events: auto; }
.foot--over .foot__cta { margin-bottom: auto; padding-top: 4svh; }
.foot--over .foot__mark { color: rgb(255 255 255 / .16); }

/* ---------- Sub-pages (ai.html, case-studies.html): all on the brand blue ---------- */
.page-body { background: var(--ink); color: #fff; }
.page { max-width: 1200px; margin: 0 auto; padding: 160px clamp(16px, 6vw, 96px) 12svh; }
.page__hero { display: flex; flex-direction: column; gap: 28px; padding-bottom: 12svh; }
.page__title {
  margin: 0; max-width: 20ch;
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.5rem);
  line-height: 1.02; font-weight: 400; letter-spacing: -0.04em; text-wrap: balance;
}
.page__title strong { font-weight: 700; }
.page__section { border-top: 1.5px solid rgb(255 255 255 / .3); padding: 44px 0 12svh; }
.page__h2 { margin: 0 0 32px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; }
.page__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }

.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.features li { padding: 28px; border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .22); }
.features h3, .steps h3 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.features p, .steps p { margin: 0; line-height: 1.55; color: rgb(255 255 255 / .85); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.steps li { counter-increment: step; border-top: 1.5px solid rgb(255 255 255 / .3); padding-top: 20px; }
.steps li::before { content: "0" counter(step); display: block; margin-bottom: 14px; font-size: .9375rem; font-weight: 500; color: rgb(255 255 255 / .7); }

.study {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px);
  border-top: 1.5px solid rgb(255 255 255 / .3); padding: 48px 0 12svh;
  scroll-margin-top: 110px;
}
.study__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.study__services { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.study__services li { font-size: .875rem; font-weight: 500; padding: 4px 12px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .45); }
.study__title { margin: 0 0 32px; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.study__facts { margin: 0; display: grid; gap: 24px; }
.study__facts dt { font-size: .9375rem; font-weight: 600; color: rgb(255 255 255 / .75); margin-bottom: 6px; }
.study__facts dd { margin: 0; font-size: 1.125rem; line-height: 1.55; max-width: 60ch; }

.page__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; border-top: 1.5px solid rgb(255 255 255 / .3); padding-top: 12svh; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: rgb(255 255 255 / .88); }
.nav__links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

/* Web design (home) */
.web {
  max-width: 1200px; margin: 0 auto; padding: 22svh 0 0;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.web__copy { display: flex; flex-direction: column; gap: 24px; }
.web__points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; }
.web__points li { border-top: 1.5px solid rgb(255 255 255 / .3); padding: 16px 0; }
.web__points h3 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 600; }
.web__points p { margin: 0; line-height: 1.5; color: rgb(255 255 255 / .8); }
.browser { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 20px 44px rgb(0 0 0 / .22); rotate: 1.5deg; }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #f2f2f2; border-bottom: 1px solid #e2e2e2; }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d4; }
.browser__bar span { margin-left: 10px; font-size: .75rem; color: #6b6b6b; }
.browser img { display: block; width: 100%; height: clamp(280px, 42svh, 460px); object-fit: cover; object-position: 50% 25%; }
.browser .project__self, .project__placeholder img { filter: url(#paper); }   /* blue-ink recolour (filter defined in the page) */
.browser figcaption { padding: 12px 16px; font-size: .875rem; font-weight: 500; color: var(--ink); background: #fff; border-top: 1px solid #eee; }

/* Real screenshots in a browser frame (natural height, no tilt) */
.shot-wrap { padding-bottom: 12svh; }
.page__section .shot-wrap { padding-bottom: 48px; }
.shot { rotate: none; }
.shot img { height: auto; object-fit: contain; }
.shot__cap { margin: 14px 0 0; font-size: .9375rem; color: rgb(255 255 255 / .75); }

/* Optimiser explainer (case study) */
.opt__title { margin: 16px 0 24px; }
.opt__h3 { margin: 12svh 0 28px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; }
.diagrams { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 48px; }
.diagrams figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.diagrams img { width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgb(0 0 0 / .2); }
.diagrams figcaption { font-size: 1.0625rem; line-height: 1.45; color: rgb(255 255 255 / .85); }
.diagrams strong { color: #fff; }

.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 1100px) { .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules li { padding: 22px; border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .22); }
.rule__pic { color: #fff; margin-bottom: 16px; }
.rule__pic svg { width: 100%; max-width: 150px; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.rule__pic .cut { stroke: #ffd9a8; stroke-width: 2.5; stroke-dasharray: 5 4; }
.rule__pic .blade { stroke: #ffd9a8; stroke-width: 8; stroke-linecap: round; opacity: .9; }
.rule__pic .fill { fill: rgb(255 255 255 / .18); stroke: none; }
.rule__pic .grain { stroke: rgb(255 255 255 / .55); stroke-width: 1.5; }
.rules h3 { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 600; }
.rules p { margin: 0; line-height: 1.5; color: rgb(255 255 255 / .82); }

.search { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; counter-reset: none; }
.search li { position: relative; padding: 24px 28px 24px 0; border-top: 1.5px solid rgb(255 255 255 / .35); }
.search li span { display: block; margin-bottom: 10px; font-size: .9375rem; color: rgb(255 255 255 / .65); }
.search h4 { margin: 0 0 6px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; }
.search p { margin: 0; line-height: 1.5; color: rgb(255 255 255 / .82); }

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 12svh; }
.proof > div { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 12px; background: #fff; color: var(--ink-strong); }
.proof strong { font-size: clamp(2.5rem, 1.8rem + 2.2vw, 4rem); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.proof span { line-height: 1.45; }
.opt__note { margin-top: 24px; max-width: 60ch; }

/* Pricing estimator */
.estimate__lead { margin: -12px 0 32px; }
.quiz { max-width: 860px; padding: clamp(24px, 4vw, 48px); border-radius: 16px; background: #fff; color: var(--ink-strong); }
.quiz__bar { height: 6px; border-radius: 3px; background: rgb(0 55 255 / .12); margin-bottom: 32px; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); border-radius: inherit; transition: width .4s cubic-bezier(.25, 1, .5, 1); }
.quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__q { padding: 0; margin: 0 0 20px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); }
.quiz__q small { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: rgb(10 26 102 / .65); }
.quiz__q span { display: block; margin-top: 6px; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: rgb(10 26 102 / .7); }
.quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.quiz__opt { position: relative; cursor: pointer; }
.quiz__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quiz__opt span {
  display: flex; align-items: center; min-height: 56px; padding: 14px 18px 14px 48px; border-radius: 10px;
  border: 1.5px solid rgb(0 55 255 / .22); line-height: 1.35; font-weight: 500; transition: border-color .15s, background-color .15s;
  position: relative;
}
.quiz__opt span::before {
  content: ""; position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid rgb(0 55 255 / .45); background: #fff; transition: background-color .15s, border-color .15s;
}
.quiz__opt input[type=radio] + span::before { border-radius: 50%; }
.quiz__opt:hover span { border-color: rgb(0 55 255 / .5); }
.quiz__opt input:checked + span { border-color: var(--ink); background: rgb(0 55 255 / .06); }
.quiz__opt input:checked + span::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.quiz__opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.quiz__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.quiz .btn--light { background: var(--ink); color: #fff; }
.quiz .btn--light:hover { background: var(--ink-strong); }
.quiz .btn:disabled { opacity: .4; cursor: not-allowed; }
.quiz__back { all: unset; cursor: pointer; font-weight: 500; color: var(--ink); border-bottom: 1.5px solid rgb(0 55 255 / .35); padding-bottom: 2px; }
.quiz__back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.quiz__result { outline: none; }
.quiz__result .blue__label { color: rgb(10 26 102 / .65); margin: 0 0 8px; }
.quiz__price { margin: 0; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz__price span { font-weight: 400; color: rgb(10 26 102 / .5); }
.quiz__hours { margin: 12px 0 0; font-size: 1.125rem; }
.quiz__monthly { margin: 8px 0 0; font-size: 1.125rem; }
.quiz__summary { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid rgb(0 55 255 / .15); }
.quiz__summary li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(0 55 255 / .15); }
.quiz__summary li span:last-child { color: rgb(10 26 102 / .7); text-align: right; }
.quiz__small { margin: 20px 0 0; font-size: .9375rem; line-height: 1.5; color: rgb(10 26 102 / .75); }

/* Tick-box estimator */
.est { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.est__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.est__card { border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .25); transition: background-color .2s, border-color .2s; }
.est__card.is-on { background: #fff; border-color: #fff; color: var(--ink-strong); }
.est__tick { position: relative; display: block; cursor: pointer; }
.est__tick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.est__tick > span { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 18px 52px; position: relative; }
.est__tick > span::before {
  content: ""; position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgb(255 255 255 / .6); transition: background-color .15s, border-color .15s;
}
.est__card.is-on .est__tick > span::before { background: var(--ink); border-color: var(--ink); }
.est__card.is-on .est__tick > span::after {
  content: ""; position: absolute; left: 25px; top: 23px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; rotate: 45deg;
}
.est__tick b { font-size: 1.125rem; font-weight: 600; }
.est__tick small { font-size: .9375rem; line-height: 1.4; opacity: .8; }
.est__tick input:focus-visible + span { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 10px; }
.est__size { border: 0; margin: 0; padding: 0 18px 18px 52px; display: flex; flex-wrap: wrap; gap: 6px; }
.est__size[hidden] { display: none; }
.est__hint { flex-basis: 100%; margin: 6px 0 0; font-size: .875rem; line-height: 1.45; color: rgb(10 26 102 / .75); }
.est__hint:empty { display: none; }
.est__size legend { padding: 0; margin-bottom: 8px; font-size: .875rem; color: rgb(10 26 102 / .7); float: left; width: 100%; }
.est__size label, .est__support label { position: relative; cursor: pointer; }
.est__size input, .est__support input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.est__size span { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgb(0 55 255 / .25); font-size: .875rem; font-weight: 500; }
.est__size input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.est__size input:focus-visible + span, .est__support input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.est__support { grid-column: 1 / -1; border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.est__support legend { padding: 0; margin-bottom: 10px; font-weight: 600; float: left; width: 100%; }
.est__support span { display: inline-flex; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .4); font-weight: 500; }
.est__support input:checked + span { background: #fff; color: var(--ink); border-color: #fff; }

.est__panel { position: sticky; top: 100px; padding: 28px; border-radius: 16px; background: #fff; color: var(--ink-strong); display: flex; flex-direction: column; gap: 10px; }
.est__label { margin: 0; font-size: .9375rem; font-weight: 500; color: rgb(10 26 102 / .65); }
.est__empty { margin: 4px 0 0; font-size: 1.125rem; line-height: 1.45; }
.est__monthly { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.est__monthly span { font-weight: 400; color: rgb(10 26 102 / .45); }
.est__monthly small { flex-basis: 100%; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-strong); }
.est__total, .est__extra { margin: 0; font-size: 1rem; }
.est__small { margin: 6px 0 0; font-size: .875rem; line-height: 1.5; color: rgb(10 26 102 / .7); }
.est__btn { margin-top: 8px; background: var(--ink); color: #fff; }
.est__btn:hover { background: var(--ink-strong); }

@media (max-width: 900px) {
  .est { grid-template-columns: 1fr; }
  .est__panel { position: sticky; top: auto; bottom: 12px; order: 2; box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
}

/* Portfolio */
.folio { display: flex; flex-direction: column; gap: 12svh; padding-bottom: 12svh; }
.project { display: flex; flex-direction: column; gap: 28px; }
.project--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.project__shot { rotate: none; }
.project__shot img { height: auto; aspect-ratio: 16 / 10; }
.project--feature .project__shot img { aspect-ratio: auto; object-fit: contain; }   /* real screenshot: show it whole */
.project__placeholder { position: relative; }
.project__placeholder span {
  position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 500;
}
.project__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.project__type { margin: 0; font-size: .9375rem; color: rgb(255 255 255 / .75); }
.project__name { margin: 0; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.project__desc { margin: 0; max-width: 52ch; font-size: 1.125rem; line-height: 1.55; color: rgb(255 255 255 / .88); }
.project__info .study__services { margin: 0; }
.project__links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 4px; }
.folio__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12svh clamp(24px, 4vw, 56px); }

/* Case study page */
.cs-meta { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 32px; border-top: 1.5px solid rgb(255 255 255 / .3); padding-top: 24px; }
.cs-meta dt { font-size: .875rem; font-weight: 500; color: rgb(255 255 255 / .7); margin-bottom: 6px; }
.cs-meta dd { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.cs-meta .study__services { margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(16px, 2vw, 24px); padding-bottom: 12svh; }
.stats > div { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .22); }
.stats strong { font-size: clamp(2.5rem, 1.8rem + 2.2vw, 4rem); line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stats span { line-height: 1.45; color: rgb(255 255 255 / .82); }

.prose { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.prose p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: rgb(255 255 255 / .9); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pillars article { padding: 28px; border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .22); }
.pillars h3 { margin: 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 1.0625rem; font-weight: 500; color: rgb(255 255 255 / .8); }
.pillars h3 span { font-size: 2rem; font-weight: 600; letter-spacing: -0.035em; color: #fff; }
.pillars ul, .dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pillars li, .dash-list li { position: relative; padding-left: 22px; line-height: 1.5; }
.pillars li::before, .dash-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1.5px; background: rgb(255 255 255 / .7); }

.callout { margin: 0; max-width: 34ch; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.2; font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; }
.callout strong { font-weight: 700; }
.stack { margin: 0; }
/* Illustrations on blue: white paper multiplies away, ink becomes deep-blue linework */
.art { margin: 0 0 12svh; display: flex; justify-content: center; }
.art img {
  width: 100%; max-width: 1100px; height: auto; max-height: 62svh; object-fit: contain; mix-blend-mode: multiply;
  /* feather the edges so the old paper border never shows as a box */
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
}
/* AI vs automation + use cases */
.vs, .uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.vs__col { padding: clamp(24px, 3vw, 36px); border-radius: 12px; background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .22); }
.vs__col h3, .uses__col h3 { margin: 0 0 8px; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.03em; }
.vs__lead { margin: 0 0 20px; font-size: 1.125rem; line-height: 1.45; color: rgb(255 255 255 / .9); }
.vs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs__col li { position: relative; padding-left: 22px; line-height: 1.5; }
.vs__col li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1.5px; background: rgb(255 255 255 / .7); }
.vs__rule { margin-top: clamp(32px, 5vw, 56px); max-width: 40ch; }
.uses__col ul { list-style: none; margin: 16px 0 0; padding: 0; }
.uses__col li { border-top: 1.5px solid rgb(255 255 255 / .25); padding: 18px 0; }
.uses__col h4 { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.uses__col p { margin: 0; line-height: 1.55; color: rgb(255 255 255 / .82); }
.uses__link { margin-top: 32px; }
/* Before / after workflow */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.flow__col { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 12px; }
.flow__col h3 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.flow__col ol { list-style: none; margin: 0; padding: 0; counter-reset: flow; display: grid; gap: 4px; }
.flow__col li {
  counter-increment: flow; display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid currentColor; border-color: rgb(255 255 255 / .2); line-height: 1.4;
}
.flow__col li::before { content: counter(flow); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; border: 1.5px solid currentColor; }
.flow__col li > span:first-child { flex: 1; }
.flow__tag { flex: none; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.flow__sum { margin: auto 0 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }

.flow__col--old { border: 1.5px dashed rgb(255 255 255 / .4); color: rgb(255 255 255 / .85); }
.flow__col--old .is-manual { background: #ffd9a8; color: #5a3200; }
.flow__col--old .is-wait { background: rgb(255 255 255 / .16); color: #fff; }

.flow__col--new { background: #fff; color: var(--ink-strong); }
.flow__col--new h3 { color: var(--ink); }
.flow__col--new li { border-color: rgb(0 55 255 / .15); }
.flow__col--new li::before { background: var(--ink); color: #fff; border-color: var(--ink); }
.flow__col--new .is-auto { background: rgb(0 55 255 / .1); color: var(--ink); }

.flow__point { margin-top: clamp(32px, 5vw, 56px); }
.callout__note { margin-top: 24px; }

/* Featured case study card (home) */
.case--feature { min-height: 0; gap: 18px; padding: clamp(24px, 3vw, 40px); }
.case--feature .case__title { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 22ch; }
.case__stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 8px; }
.case__stats span { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: rgb(255 255 255 / .8); }
.case__stats b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.case__more { margin-top: 8px; font-weight: 500; }

@media (max-width: 760px) {
  .page { padding-top: 120px; }
  .page__split, .study, .project--feature { grid-template-columns: 1fr; }
  .case__stats { gap: 12px 24px; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) { .scroll-cue { display: none; } }
@media (max-width: 600px) {
  .hero { top: 16.5%; }
  .hero::before { inset: -14% -16%; }
  .weed { width: calc(var(--w) * 1.5); }
  .lady { width: 62%; bottom: 5%; }
}

/* ---------- Reduced motion: static scene ---------- */
@media (prefers-reduced-motion: reduce) {
  .mini-flow li, .mf--list b, .mf--board b, .mf--tick svg { opacity: 1; translate: none; scale: none; stroke-dashoffset: 0; transition: none; }
  .lit .w { opacity: 1; transition: none; }
  .fish--lure { display: none; }
  .blue__lady { transition: none; opacity: 1; translate: none; }
  .svc__panel, .svc__body, .svc__icon::after, .case, .link-arrow { transition: none; }
  .layer--deep, .depth { visibility: visible; }
  .flood { display: none; }
  .weed, .lady { transition: none; opacity: var(--o, .92); scale: 1; }
  .lady { opacity: .92; }
  .fish { left: var(--fx); top: var(--fy); transform: translate(-50%, -50%); }
  .fish[data-dir="-1"] { transform: translate(-50%, -50%) scaleX(-1); }
  .scroll-cue i { animation: none; }
  .nav, .btn { transition: none; }
}