/* ==========================================================================
   Ward AI — homepage design concept
   Palette: deep navy, warm ivory, restrained teal. Type: Instrument Serif + Geist.
   ========================================================================== */

:root {
  --navy-950: #050a16;
  --navy-900: #071026;
  --navy-850: #0a1631;
  --navy-800: #0e1d3f;

  --ink: #0b1326;
  --ink-2: #3b4559;
  --ink-3: #6c7589;

  --paper: #f5f3ee;
  --paper-2: #edeae3;
  --card: #fbfaf7;

  --on-dark: #eef2f8;
  --on-dark-2: rgba(222, 230, 243, 0.70);
  --on-dark-3: rgba(222, 230, 243, 0.46);

  --line-d: rgba(255, 255, 255, 0.09);
  --line-l: rgba(11, 19, 38, 0.11);

  --teal: #7fdccf;
  --teal-deep: #0f6f68;
  --amber: #9a6a16;

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(96px, 12vw, 168px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }
::selection { background: rgba(127, 220, 207, .35); }

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

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

/* Film grain to keep gradients smooth and give the dark sections some tactility */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 28px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--dark { color: var(--teal); }
.eyebrow__n { order: -1; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .9; }

.display, .h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.display { font-size: clamp(44px, 4.8vw, 70px); line-height: 1.02; color: #fff; }
.display em, .h2 em { color: var(--teal); }
.display--md { font-size: clamp(44px, 6vw, 88px); }

.h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; color: #fff; }
.h2--ink { color: var(--ink); }
.h2--ink em { color: var(--teal-deep); }


.lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--on-dark-2); max-width: 34em; font-weight: 300; }
.body-dark { color: var(--on-dark-2); font-weight: 300; max-width: 30em; }
.body-ink { color: var(--ink-2); max-width: 26em; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity .2s var(--ease), gap .25s var(--ease);
}
.textlink:hover { gap: 12px; }
.textlink--dark { color: var(--on-dark-2); border-color: rgba(255, 255, 255, .25); }
.textlink--dark:hover { color: #fff; border-color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--light { background: var(--on-dark); color: var(--navy-900); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -12px rgba(0,0,0,.6); }
.btn--light:hover { background: #fff; }
.btn--ghost { border: 1px solid rgba(255, 255, 255, .18); color: var(--on-dark); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--navy-800); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(5, 10, 22, .72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line-d);
}
.nav.is-light {
  background: rgba(245, 243, 238, .82);
  border-bottom-color: var(--line-l);
}
.nav.is-light .brand,
.nav.is-light .nav__links a:hover { color: var(--ink); }
.nav.is-light .nav__links { color: var(--ink-2); }
.nav.is-light .brand__name span { color: var(--teal-deep); }
.nav.is-light .brand__mark { color: var(--teal-deep); }
.nav.is-light .btn--light { background: var(--ink); color: #fff; box-shadow: none; }
.nav .brand, .nav .nav__links, .nav .btn { transition: color .35s var(--ease), background-color .35s var(--ease); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.nav__links { display: flex; gap: 34px; font-size: 14px; color: var(--on-dark-2); }
.nav__links a { position: relative; transition: color .2s; }
.nav__links a:hover { color: #fff; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.brand__mark { width: 30px; height: 30px; color: var(--teal); }
.brand__name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.brand__name span { font-weight: 400; color: var(--teal); margin-left: 4px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(124px, 13vw, 168px) 0 clamp(64px, 8vw, 96px);
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(70, 150, 220, .16), transparent 62%),
    radial-gradient(700px 420px at 8% 100%, rgba(80, 200, 190, .07), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
/* A single soft horizon of light behind the demo line: the only "lighting" moment in the hero */
.hero__light {
  position: absolute; left: 50%; top: 58%;
  width: 140vw; height: 70vw; max-height: 1100px;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 1px solid rgba(127, 220, 207, .18);
  background: radial-gradient(closest-side at 50% 0%, rgba(127, 220, 207, .06), transparent 70%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: clamp(40px, 4.5vw, 64px);
  align-items: center;
}
/* Desktop: the hero composition fills the first screen and sits centred in the space
   between the bottom of the nav and the bottom of the viewport. If the content is taller
   than that space it simply grows, keeping a minimum of breathing room on both sides. */
@media (min-width: 961px) {
  .hero { padding-top: 0; }
  .hero__grid {
    --nav-h: 76px;
    --hero-air: clamp(28px, 5vh, 64px);
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + var(--hero-air));
    padding-bottom: var(--hero-air);
    align-content: center;
  }
}
/* Shorter laptop screens: a little less air around the composition. */
@media (min-width: 961px) and (max-height: 800px) {
  .hero__grid { --hero-air: 24px; }
}
.hero .display { margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 44px; }

.facts {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(72px, 9vw, 120px);
  border-top: 1px solid var(--line-d);
}
.facts li { padding: 28px 32px 0 0; display: grid; gap: 6px; }
.facts li + li { padding-left: 32px; border-left: 1px solid var(--line-d); }
.facts strong { font-weight: 500; font-size: 15px; color: #fff; }
.facts span { font-size: 15px; color: var(--on-dark-3); line-height: 1.5; }

/* ---------- Example enquiry (How it works) ----------
   A product mockup of Marin's real enquiry email: a mail-client row (sender, subject in
   Marin's "Type | Reg | Name" format), then the email itself with its header band and
   labelled sections, restyled in the site's palette and type. */
.enquiry { position: relative; }
.enquiry__caption {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 13px; color: var(--on-dark-3); margin-bottom: 14px;
}
.enquiry__label { display: inline-flex; align-items: center; gap: 10px; }
.enquiry__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(127, 220, 207, .12); }
.enquiry__tabs { position: relative; display: inline-flex; padding: 3px; border: 1px solid var(--line-d); border-radius: 999px; }
.enquiry__pill {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 999px; background: rgba(255, 255, 255, .1);
  transition: transform .55s var(--ease-out), width .55s var(--ease-out);
}
.enquiry__tabs button {
  position: relative; z-index: 1;
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px; color: var(--on-dark-3);
  transition: color .3s var(--ease);
}
.enquiry__tabs button:hover { color: var(--on-dark); }
.enquiry__tabs button[aria-selected="true"] { color: #fff; }
.no-pill .enquiry__tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .1); }

.enquiry__card {
  background: var(--card);
  color: var(--ink);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .07),
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 50px 100px -40px rgba(0, 0, 0, .75),
    0 30px 60px -30px rgba(10, 40, 80, .5);
}

/* All three examples share one grid cell: the card is always as tall as the tallest,
   so switching never makes the layout jump. */
.enquiry__stack { display: grid; }
.email {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.email.is-active { visibility: visible; opacity: 1; transition: opacity .2s var(--ease); }

.email__client { padding: 13px 20px 11px; }
.email__from p { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.email__from strong { font-weight: 600; color: var(--ink); flex: none; }
.email__from span { overflow: hidden; text-overflow: ellipsis; }
/* Marin as the sender (10 Nov 2026): the small round avatar an email app shows beside the sender's name */
.email__from p { align-items: center; }
.email__from p::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper-2) url("assets/marin/marin-avatar-talk-a.jpg") center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--line-l);
}

.email__frame { margin: 0 12px 12px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-l), 0 10px 24px -18px rgba(11, 19, 38, .35); }
.email__head { position: relative; color: #fff; padding: 17px 22px 16px; overflow: hidden; }
.email__head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 100% 0%, rgba(127, 220, 207, .16), transparent 55%); pointer-events: none; }
.email__head--mechanics { background: linear-gradient(135deg, #17305a 0%, #0e1d3f 100%); }
.email__head--tyres { background: linear-gradient(135deg, #15415a 0%, #0c2638 100%); }
.email__brand { font-size: 10.5px; letter-spacing: .1em; color: rgba(222, 233, 240, .78); margin-bottom: 6px; }
.email__title { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: -0.005em; }
.email__sub { font-size: 13px; line-height: 1.45; color: rgba(222, 233, 240, .84); margin-top: 5px; }

.email__sections section { padding: 10px 22px 11px; }
/* Shorter examples fill the same card height: spare space is shared evenly
   between their sections (content centred in each row), so the footer sits
   in the same place on every tab and nothing jumps when switching. */
.email { display: flex; flex-direction: column; }
.email__frame { flex: 1; display: flex; flex-direction: column; }
.email__sections { flex: 1; display: flex; flex-direction: column; }
.email__sections section { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.email__sections section + section { border-top: 1px solid rgba(11, 19, 38, .07); }
.email__sections h4 { margin: 0 0 3px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.email__sections p { font-size: 14px; line-height: 1.5; color: var(--ink); }
.email__sections .email__name { font-size: 15px; font-weight: 600; }
.email__sections .email__lead { font-size: 14.5px; }

.email__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 22px 12px; border-top: 1px solid rgba(11, 19, 38, .07); background: #faf9f6; font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.enquiry__tag { flex: none; border: 1px solid var(--line-l); border-radius: 999px; padding: 1px 9px; font-size: 11px; letter-spacing: .04em; }

.enquiry__note { display: flex; gap: 12px; margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--on-dark-3); max-width: 36em; }
.enquiry__note::before { content: ""; flex: none; width: 18px; height: 1px; margin-top: .75em; background: var(--teal); opacity: .6; }

/* Entrance: the card settles into place (rise, scale, de-blur), then the email builds
   itself part by part. Switching examples replays the build quickly. */
.js .enquiry.reveal, .js .phone.reveal { transform: translateY(28px) scale(.985); filter: blur(6px); transition: opacity 1.2s var(--ease-out) var(--d, 0ms), transform 1.4s var(--ease-out) var(--d, 0ms), filter 1.2s var(--ease-out) var(--d, 0ms); }
.js .enquiry.reveal.is-in, .js .phone.reveal.is-in { transform: none; filter: none; }
.js .email__part { opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.js .enquiry.is-in .email.is-active .email__part {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--base, 700ms) + var(--i) * 70ms);
}

/* ---------- Live demonstration ---------- */
.demo {
  position: relative;
  padding: var(--section) 0;
  background: var(--navy-950);
  border-top: 1px solid var(--line-d);
}
.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}
.demo .h2 { margin-bottom: 28px; }

.try__label { margin-top: 44px; margin-bottom: 14px; font-size: 12px; font-weight: 500; color: var(--on-dark-3); letter-spacing: .08em; text-transform: uppercase; }
.try { border-top: 1px solid var(--line-d); }
.try p { color: var(--on-dark-2); font-weight: 300; }
.try strong { color: #fff; font-weight: 500; margin-right: 4px; }
.try li { display: flex; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-d); color: var(--on-dark); font-size: 16px; }
.try li span { font-size: 12px; color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Example conversations: a fixed-height "listening window". New lines arrive at the
   bottom and earlier ones glide up and fade beneath a soft top mask, so the visitor
   follows the call rather than reading a long transcript. */
.demo__side { display: grid; gap: 16px; }
.convo__card {
  position: relative;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(127, 220, 207, .07), transparent 60%),
    linear-gradient(180deg, var(--navy-850), var(--navy-900));
  border: 1px solid var(--line-d);
  overflow: hidden;
}
.convo__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 22px clamp(22px, 3vw, 36px) 18px;
  border-bottom: 1px solid var(--line-d);
}
.convo__topic { font-family: var(--serif); font-size: 24px; line-height: 1.15; color: #fff; transition: opacity .35s var(--ease); }
.convo__topic.is-swapping { opacity: 0; }
.convo__disclaimer { font-size: 12px; color: var(--on-dark-3); letter-spacing: .02em; text-align: right; }

.convo__stage {
  position: relative;
  height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  padding: 0 clamp(22px, 3vw, 36px) 26px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34%);
}
.convo__stage.is-clearing .line { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }

.line { display: grid; gap: 5px; max-width: 86%; flex: none; }
.line__who { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.line p { font-size: 16px; line-height: 1.55; font-weight: 300; text-wrap: pretty; }
/* Marin: teal marker, bright text, left. Caller: quiet marker, softer text, right. */
.line--m .line__who { color: var(--teal); }
.line--m .line__who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.line--m p { color: #fff; }
.line--c { margin-left: auto; text-align: right; justify-items: end; }
.line--c .line__who { color: var(--on-dark-3); }
.line--c p { color: var(--on-dark-2); }

/* Played lines: arrive with a short rise; JS glides the earlier lines up (FLIP). */
.line.is-new { opacity: 0; transform: translateY(12px); }
.line.is-shown { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.line.is-old { opacity: .42; transition: opacity .6s var(--ease); }

/* "Speaking" indicator: three soft dots in the speaker's colour */
.line__dots { display: inline-flex; gap: 5px; padding: 6px 0 4px; }
.line__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: dot 1.1s ease-in-out infinite; }
.line__dots i:nth-child(2) { animation-delay: .15s; }
.line__dots i:nth-child(3) { animation-delay: .3s; }
.line--m .line__dots { color: var(--teal); }
.line--c .line__dots { color: var(--on-dark-2); }
@keyframes dot { 0%, 100% { opacity: .25; transform: none; } 40% { opacity: .9; transform: translateY(-2px); } }

.convo__progress { height: 2px; background: rgba(255, 255, 255, .06); }
.convo__progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, rgba(127, 220, 207, .25), var(--teal)); transition: transform .8s var(--ease); }

/* Section 01 player (10 Nov 2026): the same listening window, now driven by the real recordings.
   A play button sits beside the topic; lines arrive as they are spoken and their words light up in time;
   earlier lines stay readable above; any visible line can be clicked to jump there. */
.convo__now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.convo__now { flex: 1 1 auto; }
.convo__now .convo__topic { text-wrap: balance; }
.convo__head:has(.convo__now) { align-items: center; }
.convo__now + .convo__disclaimer { flex: 0 1 13em; min-width: 0; }
.convo__play {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--on-dark);
  background: radial-gradient(circle at 50% 35%, rgba(127, 220, 207, .10), rgba(7, 16, 38, .92) 70%);
  box-shadow: 0 0 0 1px rgba(127, 220, 207, .24), 0 8px 22px rgba(0, 0, 0, .3);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), color .3s;
}
.convo__play:hover { transform: scale(1.05); color: #fff; box-shadow: 0 0 0 1px rgba(127, 220, 207, .45), 0 0 22px rgba(127, 220, 207, .14), 0 8px 22px rgba(0, 0, 0, .3); }
.convo__play:active { transform: scale(.96); transition-duration: .15s; }
.convo__play:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.convo__icon { position: absolute; width: 17px; height: 17px; fill: currentColor; transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.convo__icon--play { transform: translateX(1px); }
.convo__icon--pause { opacity: 0; transform: scale(.7); }
.convo.is-playing .convo__icon--play { opacity: 0; transform: translateX(1px) scale(.7); }
.convo.is-playing .convo__icon--pause { opacity: 1; transform: none; }
.convo.is-playing .convo__play { box-shadow: 0 0 0 1px rgba(127, 220, 207, .34), 0 0 26px rgba(127, 220, 207, .16), 0 8px 22px rgba(0, 0, 0, .3); }
.convo__time { margin-top: 3px; font-size: 12px; color: var(--on-dark-3); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.convo__track {
  position: absolute; left: clamp(22px, 3vw, 36px); right: clamp(22px, 3vw, 36px); top: 0;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .8s var(--ease-out); will-change: transform;
}
.convo__track .line { transition: opacity .6s var(--ease); }
.convo__track .line.is-future { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.convo__track .line.is-next { opacity: .5; }
.convo__track .line.is-past { opacity: .55; }
.convo__track .line.is-current { opacity: 1; }
.convo__track .line.is-past, .convo__track .line.is-current { cursor: pointer; }
.convo__track .line.is-past:hover, .convo__track .line.is-past:focus-visible { opacity: .85; }
.convo__track .line:focus-visible { outline: 1px solid rgba(127, 220, 207, .5); outline-offset: 6px; border-radius: 6px; }
.convo__track .line p span { transition: opacity .35s var(--ease), color .35s var(--ease); }
.convo__track .line.is-current p span:not(.is-said) { opacity: .28; }
.convo__track .line--m.is-current .line__who::before { box-shadow: 0 0 0 0 rgba(127, 220, 207, .5); animation: pulse 1.6s ease-in-out infinite; }
.convo__progress[data-convo-seek] { position: relative; cursor: pointer; }
.convo__progress[data-convo-seek]::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -6px; }
.convo__progress span { transition: none; }

/* Marin's face beside her lines (10 Nov 2026): one consistent crop, in place of the teal dot; caller lines stay text-only.
   While she is speaking, the soft teal pulse becomes a glow ring around the avatar. */
.convo .line--m .line__who { gap: 10px; }
.convo .line--m .line__who::before {
  width: 28px; height: 28px; flex: none;
  background: var(--navy-850) url("assets/marin/marin-avatar-talk-a.jpg") center / cover no-repeat;   /* head and shoulders, talking */
  box-shadow: 0 0 0 1px rgba(127, 220, 207, .32);
}
.convo .line--m[data-pose="b"] .line__who::before { background-image: url("assets/marin/marin-avatar-talk-b.jpg"); }   /* her other talking pose */
.convo__track .line--m.is-current .line__who::before { animation: marinGlow 1.8s ease-in-out infinite; }
@keyframes marinGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(127, 220, 207, .55), 0 0 0 0 rgba(127, 220, 207, .35); }
  50% { box-shadow: 0 0 0 1px rgba(127, 220, 207, .8), 0 0 0 5px rgba(127, 220, 207, 0), 0 0 14px rgba(127, 220, 207, .35); }
}

/* Without JavaScript (or with reduced motion) the first conversation simply reads in full */
.convo__script { display: grid; gap: 18px; padding: 24px clamp(22px, 3vw, 36px) 28px; }
.js .convo__script { display: none; }

.demo__call {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px;
  padding: 20px clamp(22px, 3vw, 36px);
  border: 1px solid var(--line-d); border-radius: 22px;
  background: rgba(255, 255, 255, .02);
}
.demo__number {
  display: block; margin-top: 4px;
  font-family: var(--serif); font-size: clamp(32px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.01em;
  color: #fff; font-variant-numeric: lining-nums; transition: color .25s;
}
.demo__number:hover { color: var(--teal); }
.demo__call-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.phone {
  position: relative;
  text-align: center;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 56px);
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(127, 220, 207, .07), transparent 60%),
    linear-gradient(180deg, var(--navy-850), var(--navy-900));
  border: 1px solid var(--line-d);
  overflow: hidden;
}
.phone__wave { display: block; width: 100%; height: 96px; margin-bottom: 28px; }

/* Marin behind the waveform (10 Nov 2026): head and shoulders, her face centred on the wave and play button,
   dissolving into the navy with a soft circular fade. Absolutely positioned, so the card keeps its original size. */
.phone__marin {
  position: absolute; left: 50%; top: 50%; width: 252px; aspect-ratio: 810 / 900;
  transform: translate(-50%, -40%);              /* her face (40% down the photo) sits on the wave's centre line */
  pointer-events: none; opacity: .56; transition: opacity 1.4s var(--ease);
  -webkit-mask-image: radial-gradient(ellipse 50% 56% at 50% 46%, #000 0%, #000 30%, rgba(0, 0, 0, .78) 48%, rgba(0, 0, 0, .46) 65%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, .06) 92%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 56% at 50% 46%, #000 0%, #000 30%, rgba(0, 0, 0, .78) 48%, rgba(0, 0, 0, .46) 65%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, .06) 92%, transparent 100%);
}
.phone__marin img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.92); }
.phone.is-playing .phone__marin { opacity: .68; }
.phone__stage:has(.phone__marin) .phone__play { background: radial-gradient(circle at 50% 35%, rgba(127, 220, 207, .08), rgba(7, 16, 38, .5) 72%); }

/* Hero card layout (chosen 10 Nov 2026): Marin and the waveform at the top; the play button and label sit below the
   wave so her face stays clear. The spacing further down is tightened by the same amount, so the card keeps its size. */
.phone .phone__stage { margin-bottom: 84px; }
.phone .phone__play { top: calc(100% + 10px); margin-top: 0; }
.phone .phone__number { margin-top: 8px; margin-bottom: 20px; }
.phone .fine { margin-top: 14px; }
.hero .phone { padding-bottom: calc(clamp(40px, 5vw, 56px) - 28px); }

/* Hero demo player: the wave area plays the recorded demo call (initial test, 10 Nov 2026) */
.phone__stage { position: relative; height: 96px; margin-bottom: 28px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.phone__stage .phone__wave { position: absolute; inset: 0; height: 100%; margin: 0; }
.phone__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--on-dark);
  background: radial-gradient(circle at 50% 35%, rgba(127, 220, 207, .10), rgba(7, 16, 38, .92) 70%);
  box-shadow: 0 0 0 1px rgba(127, 220, 207, .22), 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), color .3s;
}
.phone__play:hover, .phone__stage:hover .phone__play { transform: scale(1.045); box-shadow: 0 0 0 1px rgba(127, 220, 207, .42), 0 0 28px rgba(127, 220, 207, .14), 0 10px 30px rgba(0, 0, 0, .35); color: #fff; }
.phone__play:active { transform: scale(.97); transition-duration: .15s; }
.phone__play:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.phone__ring { position: absolute; inset: -4px; width: 72px; height: 72px; transform: rotate(-90deg); pointer-events: none; }
.phone__ring circle { fill: none; stroke-width: 1.5; }
.phone__ring-track { stroke: rgba(127, 220, 207, 0); transition: stroke .6s; }
.phone__ring-fill { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 213.63; stroke-dashoffset: 213.63; opacity: 0; transition: opacity .6s; }
.phone__icon { position: absolute; width: 22px; height: 22px; fill: currentColor; transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.phone__icon--play { transform: translateX(1px); }
.phone__icon--pause { opacity: 0; transform: scale(.7); }
.phone.is-playing .phone__icon--play { opacity: 0; transform: translateX(1px) scale(.7); }
.phone.is-playing .phone__icon--pause { opacity: 1; transform: none; }
.phone.is-started .phone__ring-track { stroke: rgba(127, 220, 207, .14); }
.phone.is-started .phone__ring-fill { opacity: .9; }
.phone.is-playing .phone__play { box-shadow: 0 0 0 1px rgba(127, 220, 207, .30), 0 0 36px rgba(127, 220, 207, .16), 0 10px 30px rgba(0, 0, 0, .35); }
.phone.is-playing .phone__label i { animation-duration: 1.2s; }
.phone__label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--on-dark-2); letter-spacing: .02em; }
.phone__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 220, 207, .45); } 50% { box-shadow: 0 0 0 6px rgba(127, 220, 207, 0); } }

.phone__number {
  display: block;
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 14px 0 32px;
  font-variant-numeric: lining-nums;
  transition: color .25s;
}
.phone__number:hover { color: var(--teal); }
.phone.is-flash .phone__number { color: var(--teal); transition-duration: .6s; }
.phone__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.fine { margin-top: 24px; font-size: 13px; color: var(--on-dark-3); }

/* ---------- Ivory sheets ----------
   Benefits and Pricing sit on rounded ivory "sheets" laid over the navy page, with
   How it works in navy between them: distinct page breakers that read as one site. */
.light { background: var(--paper); color: var(--ink); }
.light .eyebrow { color: var(--teal-deep); }
.sheet { position: relative; z-index: 1; border-radius: clamp(24px, 3vw, 44px); }

/* Shared rule motion: a hairline that draws across as an item comes into view */
.benefit::before, .step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s var(--ease-out) var(--d, 0ms);
}
.benefit.is-in::before, .step.is-in::before { transform: scaleX(1); }
.benefit::after, .step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: -1; }

/* ---------- Benefits ---------- */
.benefits { padding: var(--section) 0; }
.benefits__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.benefits__aside { position: sticky; top: 132px; }
.benefits__lede { margin-top: 28px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 22em; }
/* Marin, editorial portrait (10 Nov 2026): one warm image in the ivory section, with a light honesty caption */
.benefits__marin { margin-top: 40px; max-width: clamp(200px, calc((100vh - 540px) * .8), 300px); }   /* stays inside the sticky column on shorter screens */
.benefits__marin img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%;
  border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 48px -28px rgba(11, 19, 38, .45);
}
.benefits__marin figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.benefits__marin figcaption span + span { color: var(--ink-3); font-size: 12px; letter-spacing: .02em; }
.benefits__list { counter-reset: none; }
.benefit {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: clamp(64px, 7vw, 96px) minmax(0, 1fr);
  padding: 36px 0 42px;
}
.benefit:last-child { box-shadow: 0 1px 0 rgba(11, 19, 38, .14); }
.benefit::before { background: var(--ink); }
.benefit::after { background: rgba(11, 19, 38, .14); }
.benefit__n { font-family: var(--serif); font-style: italic; font-size: clamp(36px, 3.4vw, 48px); line-height: .9; color: var(--teal-deep); }
.benefit h3 { font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin-bottom: 12px; }
.benefit p { color: var(--ink-2); line-height: 1.65; max-width: 32em; }

/* ---------- Missed-call calculator (11 Nov 2026): continues the ivory Why Ward AI sheet ---------- */
.calc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: center;
  margin-top: clamp(88px, 10vw, 144px); padding-top: clamp(88px, 10vw, 144px); padding-bottom: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line-l);
}
.calc__lede { margin-top: 28px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 24em; }
.calc__inputs { margin-top: 44px; display: grid; gap: 30px; }
.calc__field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 14px; }
.calc__field label { font-size: 15px; font-weight: 500; color: var(--ink); }
.calc__field output { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--teal-deep); font-variant-numeric: lining-nums tabular-nums; }
.calc__field input { grid-column: 1 / -1; }
.calc__note { font-size: 13px; color: var(--ink-3); }

/* sliders: a hairline track that fills in deep teal, with a calm round handle */
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  --p: 50%;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--teal-deep) 0 var(--p), rgba(11, 19, 38, .12) var(--p) 100%);
}
.calc input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(11, 19, 38, .12); }
.calc input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--teal-deep); }
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(11, 19, 38, .14);
  box-shadow: 0 0 0 5px rgba(15, 111, 104, .12), 0 4px 12px -4px rgba(11, 19, 38, .35);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid rgba(11, 19, 38, .14);
  box-shadow: 0 0 0 5px rgba(15, 111, 104, .12), 0 4px 12px -4px rgba(11, 19, 38, .35);
}
.calc input[type="range"]:hover::-webkit-slider-thumb, .calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(15, 111, 104, .14), 0 6px 16px -4px rgba(11, 19, 38, .4); }
.calc input[type="range"]:focus-visible { outline: none; }
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal-deep); }
.calc input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal-deep); }

/* the result: a navy card in the same family as the hero demo card */
.calc__result {
  position: relative; overflow: hidden; color: var(--on-dark);
  padding: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 56px);
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(127, 220, 207, .09), transparent 60%),
    linear-gradient(180deg, var(--navy-850), var(--navy-900));
  box-shadow: 0 40px 80px -48px rgba(11, 19, 38, .7);
}
.calc__label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.calc__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.calc__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; }
.calc__amount [data-result="month"] { font-family: var(--serif); font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.calc__per { font-size: 16px; color: var(--on-dark-2); }
.calc__year { margin-top: 14px; font-size: 18px; color: var(--on-dark-2); }
.calc__year strong { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.calc__working { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-d); font-size: 14px; color: var(--on-dark-2); line-height: 1.55; }
.calc__honest { margin-top: 10px; font-size: 13px; color: var(--on-dark-3); line-height: 1.6; }
.calc__cta { margin-top: 30px; }
.calc__cta p { font-size: 16px; color: var(--on-dark); margin-bottom: 16px; }
.calc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- How it works (navy) ---------- */
.how {
  position: relative; overflow: hidden;
  padding: calc(var(--section) + 24px) 0 var(--section);
  margin: clamp(-44px, -3vw, -24px) 0;
  background:
    radial-gradient(900px 520px at 85% 20%, rgba(70, 150, 220, .12), transparent 62%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 50%, var(--navy-950) 100%);
}
.how__light {
  position: absolute; left: 50%; bottom: -70vw; width: 150vw; height: 80vw;
  transform: translateX(-50%); border-radius: 50%;
  border-top: 1px solid rgba(127, 220, 207, .14);
  background: radial-gradient(closest-side at 50% 0%, rgba(127, 220, 207, .05), transparent 70%);
  pointer-events: none;
}
.how .wrap { position: relative; }
.how__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(48px, 7vw, 120px); align-items: center; margin-bottom: clamp(72px, 9vw, 120px); }
.how__intro { margin-top: 32px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--on-dark-2); font-weight: 300; max-width: 26em; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
.step { position: relative; isolation: isolate; padding-top: 36px; }
.step::before { background: linear-gradient(90deg, var(--teal), rgba(127, 220, 207, .15)); }
.step::after { background: rgba(255, 255, 255, .1); }
.step__n {
  display: block;
  font-family: var(--serif); font-size: clamp(80px, 8vw, 120px); line-height: .85; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #b4f0e6 0%, rgba(127, 220, 207, .28) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 32px;
}
.step h3 { font-size: clamp(21px, 1.9vw, 24px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.28; color: #fff; margin-bottom: 12px; }
.step p { color: var(--on-dark-2); font-weight: 300; line-height: 1.65; max-width: 24em; }

.how__cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
  margin-top: clamp(72px, 9vw, 112px); padding-top: 36px;
  border-top: 1px solid var(--line-d);
}
.how__cta p { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: #fff; letter-spacing: -0.01em; }

/* ---------- Pricing ---------- */
.pricing { padding: var(--section) 0; }
.pricing__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.pricing .h2 { margin-bottom: 24px; }
.draft-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-l); font-size: 14px; color: var(--ink-3); max-width: 28em; }

.plans { display: grid; gap: 16px; }
.plan { background: var(--card); border: 1px solid var(--line-l); border-radius: 22px; }
.plan--main { background: #fff; }
.plan--main { padding: clamp(28px, 4vw, 44px); box-shadow: 0 30px 60px -40px rgba(11, 19, 38, .35); }
.plan__head h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.plan__head p { color: var(--ink-3); font-size: 15px; margin-top: 4px; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin: 32px 0 24px; }
.plan__amount { font-family: var(--serif); font-size: 64px; line-height: 1; letter-spacing: -0.02em; }
.plan__per { color: var(--ink-3); font-size: 15px; }
.plan__terms { border-top: 1px solid var(--line-l); }
.plan__terms > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-l); font-size: 15px; }
.plan__terms dt { color: var(--ink-2); }
.plan__list { margin: 28px 0 36px; display: grid; gap: 12px; }
.plan__list li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--ink-2); }
.plan__list li::before {
  content: ""; position: absolute; left: 2px; top: .45em;
  width: 12px; height: 7px;
  border-left: 1.5px solid var(--teal-deep); border-bottom: 1.5px solid var(--teal-deep);
  transform: rotate(-45deg);
}
.plan--alt { padding: 28px clamp(28px, 4vw, 44px); display: grid; gap: 10px; background: transparent; }
.plan--alt h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.plan--alt p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 8px; }
.plan--alt .textlink { justify-self: start; }

/* Placeholder markers: deliberately visible so nobody mistakes them for agreed terms */
.ph { color: var(--ink-3); background-image: linear-gradient(90deg, currentColor 50%, transparent 0); background-size: 6px 1px; background-repeat: repeat-x; background-position: 0 100%; padding-bottom: 2px; }
.ph--dark { color: var(--on-dark-3); }
.ph-chip {
  display: inline-flex; align-items: center; flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--amber); background: rgba(154, 106, 22, .09);
  border: 1px dashed rgba(154, 106, 22, .45); border-radius: 6px; padding: 3px 8px;
  font-family: var(--sans);
}

/* ---------- Contact ---------- */
.contact {
  position: relative; overflow: hidden;
  padding: var(--section) 0;
  background:
    radial-gradient(800px 480px at 50% 120%, rgba(70, 150, 220, .14), transparent 65%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 55%, var(--navy-950));
  text-align: center;
}
.contact__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.contact .display { margin-bottom: 28px; }
.contact .lede { margin: 0 auto; }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.contact__details {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; max-width: 720px;
  margin-top: clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--line-d);
  text-align: left;
}
.contact__details > div { padding: 24px 0 0; display: grid; gap: 6px; }
.contact__details > div + div { padding-left: 32px; border-left: 1px solid var(--line-d); }
.contact__details span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.contact__details a { color: var(--on-dark); transition: color .2s; overflow-wrap: anywhere; }
.contact__details a:hover { color: var(--teal); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); border-top: 1px solid var(--line-d); padding: 56px 0 40px; color: var(--on-dark-3); font-size: 14px; }
.footer__inner { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.footer__tag { flex: 1; min-width: 220px; }
.footer__links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer__links a:hover { color: #fff; }
.footer__legal { display: flex; gap: 12px 32px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-d); font-size: 12.5px; }

/* ---------- Mobile call bar ---------- */
.callbar { display: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  transform: translate(-50%, 16px); opacity: 0;
  background: var(--on-dark); color: var(--navy-900);
  font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Scroll choreography ----------
   A few deliberate moves rather than one fade everywhere:
   1. Hero recedes in depth as you leave it (copy, card and horizon at different rates).
   2. Section headings rise word by word from behind a mask.
   3. Ivory sheets open out to full width as they arrive and draw back in as they leave.
   4. Benefits: the item at the centre of the screen takes focus.
   5. How it works: one teal line fills across the steps with scroll, lighting each numeral.
   6. The demo waveform briefly responds to scroll speed. */

/* 1 — hero depth (JS sets the translate/opacity; `translate` composes with reveal transforms) */
.hero__copy, .hero .phone, .hero .facts, .hero__light { will-change: translate, opacity; }

/* 2 — word mask reveal */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .1em .14em 0; margin: 0 -.1em -.14em 0; }
.split .wi { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--wi) * 45ms + var(--d, 0ms)); }
.js .reveal.split { opacity: 1; transform: none; }
.split.is-in .wi { transform: none; }

/* 3 — sheets: JS writes --inset (0 to 1) */
.js .sheet { clip-path: inset(0 calc(var(--inset, 0) * var(--inset-max)) round clamp(24px, 3vw, 44px)); --inset-max: clamp(14px, 4vw, 64px); }

/* 4 — benefits focus */
.benefit__n, .benefit p, .benefit::before { transition: color .6s var(--ease), opacity .6s var(--ease), transform 1.2s var(--ease-out) var(--d, 0ms); }
.focus-on .benefit:not(.is-current) .benefit__n { color: rgba(15, 111, 104, .38); }
.focus-on .benefit:not(.is-current) p { color: var(--ink-3); }
.focus-on .benefit.is-current::before { transform: scaleX(1); }

/* 5 — step progress (JS writes --p per step; defaults to complete without JS) */
.js .step::before { transform: scaleX(var(--p, 1)); transition: none; }
.js .step__n { opacity: calc(.28 + var(--p, 1) * .72); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { gap: 24px; }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .hero__grid,
  .demo__grid,
  .pricing__grid { grid-template-columns: 1fr; }
  .enquiry, .phone { max-width: 560px; }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .step__n { font-size: 80px; margin-bottom: 20px; }
  .how__head { grid-template-columns: 1fr; align-items: start; }
  .benefits__layout { grid-template-columns: 1fr; }
  .benefits__aside { position: static; }
  .calc { grid-template-columns: 1fr; }
  .benefits__marin { max-width: 340px; }
}

@media (max-width: 720px) {
  .calc__actions .btn { width: 100%; }
  .calc__actions .textlink { margin: 0 auto; }
  .calc__field output { font-size: 26px; }
  body { font-size: 16px; }
  .nav__inner { height: 64px; }
  .hero { padding-top: 120px; }
  .hero__actions { margin-top: 36px; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .textlink { margin: 0 auto; }

  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding: 20px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--line-d); }

  .enquiry__card { border-radius: 18px; }
  .email__client { padding: 12px 16px 10px; }
  .email__frame { margin: 0 8px 8px; }
  .email__head { padding: 16px 18px 15px; }
  .email__sections section, .email__foot { padding-left: 18px; padding-right: 18px; }
  .email__title { font-size: 24px; }
  .enquiry__caption > span:first-child { display: none; }
  .enquiry__caption { justify-content: flex-start; }

  .phone { border-radius: 22px; }
  .phone__actions .btn { width: 100%; }
  .convo__card { border-radius: 22px; }
  .convo__head { flex-direction: column; gap: 4px; }
  .convo__disclaimer { text-align: left; }
  .convo__head:has(.convo__now) { align-items: flex-start; gap: 12px; }
  .convo__now + .convo__disclaimer { max-width: none; }
  .convo__stage { height: 380px; gap: 16px; }
  .line { max-width: 92%; }
  .line p { font-size: 15.5px; }
  .demo__call-actions, .demo__call-actions .btn { width: 100%; }

  .benefit { grid-template-columns: 56px 1fr; padding: 30px 0 34px; }
  .benefit__n { font-size: 32px; }
  .benefit h3, .step h3 { font-size: 20px; }
  .how__cta .btn { width: 100%; }

  .contact__actions { width: 100%; }
  .contact__actions .btn { width: 100%; }
  .contact__details { grid-template-columns: 1fr; }
  .contact__details > div + div { padding-left: 0; border-left: 0; }

  .footer { padding-bottom: 112px; }

  /* Click-to-call is the most valuable action on a phone, so keep it one tap away */
  .callbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px;
    border-radius: 999px;
    background: rgba(10, 22, 49, .86);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--line-d);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
    font-size: 14px; color: var(--on-dark);
    transform: translateY(140%); transition: transform .45s var(--ease);
  }
  .callbar span { display: inline-flex; align-items: center; gap: 10px; }
  .callbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 2.4s ease-in-out infinite; }
  .callbar.is-on { transform: none; }
  .toast { bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .step::before, .benefit::before, .js .step::before { transform: scaleX(1); }
  .js .step__n { opacity: 1; }
  .js .sheet { clip-path: none; }
  .split .wi { transform: none; }
  .js .enquiry.reveal, .js .phone.reveal { filter: none; }
  .js .email__part { opacity: 1; transform: none; }
  .convo__track, .convo__track .line, .convo__track .line p span { transition: none !important; }
  .convo__track .line--m.is-current .line__who::before { animation: none; }
}