/* ==========================================================
   Turbo Studio — Fast Websites
   styles.css
   ========================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --ivory: #F6F4F0;
  --graphite: #4A4A4A;
  --accent: #6B1E23;            /* Oxblood */
  --blush: #EADBDC;             /* mild Oxblood: a soft tint of the accent for calm backgrounds */

  --font: 'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;

  --track-logo: 0.4em;
  --track-tag: 0.45em;
  --track-display: 0.14em;
  --track-label: 0.3em;

  --measure: 34rem;             /* body text line length */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 12vw, 9rem);

  --ease: cubic-bezier(.65, 0, .25, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--graphite);
  background: var(--ivory);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--paper); }

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

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
  font-size: .75rem; letter-spacing: var(--track-label); text-transform: uppercase; z-index: 100;
}
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.75rem var(--gutter) 1.5rem;
  background: var(--ivory);   /* solid so the header reads over any section, including Oxblood */
  transition: background-color .5s var(--ease-soft), padding .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.site-header.scrolled {
  background: var(--ivory);
  padding-top: 1.1rem; padding-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(10, 10, 10, .08);
}

.lockup {
  grid-column: 2;
  display: flex; flex-direction: column; align-items: center;
  color: var(--ink);
}

.wordmark {
  display: inline-flex;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  letter-spacing: var(--track-logo);
  padding-left: var(--track-logo);   /* balances trailing tracking so it centres */
  line-height: 1.2;
  white-space: nowrap;
}
.wordmark .dot { color: var(--accent); margin: 0 .05em; }

.tagline {
  margin-top: .7rem;
  font-weight: 300;
  font-size: clamp(.62rem, .8vw, .72rem);
  letter-spacing: var(--track-tag);
  padding-left: var(--track-tag);
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.4;
  max-height: 2em;
  overflow: hidden;
  transition: opacity .4s var(--ease-soft), max-height .5s var(--ease-soft), margin .5s var(--ease-soft);
}
.site-header.scrolled .tagline { opacity: 0; max-height: 0; margin-top: 0; }

.nav { display: flex; gap: 2.25rem; align-items: center; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav a, .menu-toggle {
  font-size: .7rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
}
.nav a { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav a:hover { border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
/* Start your site: same sliding Oxblood underline as .link-underline */
.nav .nav-cta {
  font-weight: 700;
  border-bottom: 0; padding-bottom: 4px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 100% 1.5px;
  transition: background-size .45s var(--ease);
}
.nav .nav-cta:hover { background-size: 0 1.5px; background-position: right bottom; }

.menu-toggle {
  display: none; grid-column: 3; justify-self: end;
  background: none; border: 0; padding: .5rem 0; cursor: pointer; font-family: var(--font);
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 1.75rem; }
.mobile-menu a {
  font-size: 1.1rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
  padding-left: .3em;
}

/* ---------- Shared type ---------- */
.display, .hero-title {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.35;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
}
.display .line, .hero-title .line { display: block; padding-left: var(--track-display); }
.line-bold { font-weight: 700; }
.line-light { font-weight: 300; }


/* ---------- Buttons and links ---------- */
/* Buttons: on hover a new colour wipes across from the left (same timing as the link underline).
   --wipe sets the colour; the button's own colour sits underneath. */
.btn {
  display: inline-block; border: 0; cursor: pointer; font-family: var(--font);
  font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 1.05rem 1.9rem 1.05rem calc(1.9rem + var(--track-label));
  background-image: linear-gradient(var(--wipe), var(--wipe));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .45s var(--ease), color .3s var(--ease) .1s;
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; }
.btn-ink { --wipe: var(--accent); background-color: var(--ink); color: var(--paper); }
/* Paper buttons sit on dark sections: Oxblood wipes in on Ink, Ink wipes in on Oxblood */
.btn-paper { --wipe: var(--accent); background-color: var(--paper); color: var(--ink); }
.btn-paper:hover, .btn-paper:focus-visible { color: var(--paper); }
.section-oxblood .btn-paper { --wipe: var(--ink); }

.link-underline {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink);
  padding: 0 0 4px var(--track-label);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 100% 1.5px;
  transition: background-size .45s var(--ease);
}
.link-underline:hover { background-size: 0 1.5px; background-position: right bottom; }

/* Arrow link: sliding underline on the words plus a fine arrow that stretches on hover */
.link-arrow {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink);
}
.link-arrow .link-text {
  padding-bottom: 4px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 100% 1.5px;
  transition: background-size .45s var(--ease);
}
.link-arrow:hover .link-text { background-size: 0 1.5px; background-position: right bottom; }
.link-count { color: var(--accent); }
.arrow-line {
  position: relative; width: 2.5rem; height: 1px; margin-bottom: 4px; background: currentColor;
  transition: width .5s var(--ease);
}
.arrow-line::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.link-arrow:hover .arrow-line { width: 5rem; }

/* ---------- Hero ---------- */
/* Dark, like the intro, with its stars still drifting slowly behind (canvas, drawn by script).
   It fits any screen: every size and gap below shrinks with the screen's height as well as its
   width (the smaller wins), so the strip along the bottom is always in view */
.hero-kin {
  position: relative; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 30rem;
  padding: calc(6.75rem + clamp(.25rem, 3vh, 2.5rem)) var(--gutter) clamp(1rem, 3.5vh, 3rem); background: var(--ink); color: var(--paper); overflow: hidden;
}
.kin-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The headline sits towards the top and the buttons + price towards the bottom, just above the
   Design / Build / Launch strip, so the gap between them grows with the screen */
.kin-main { position: relative; flex: 1; display: flex; flex-direction: column; padding-top: clamp(1rem, 8.5vh, 5.5rem); text-align: left; }
.kin-main .kin-actions { margin-top: auto; }
.kin-main .kin-title { margin-bottom: clamp(2.5rem, min(12vh, 7vw), 7rem); }
@media (min-width: 901px) { .hero-kin .kin-bottom { margin-top: clamp(1.5rem, 9vh, 6rem); } }  /* room between the buttons and the strip */
@media (max-width: 900px) { .kin-main { flex: none; padding-top: 0; margin-block: auto; } }  /* iPads in portrait and phones: stacked, centred as before */
.kin-eyebrow {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 clamp(.75rem, 3vh, 1.75rem);
  color: var(--paper); font-size: clamp(.8rem, 1vw, 1rem); font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
}
.kin-eyebrow::before { content: ''; width: 2.5rem; height: 2px; background: var(--accent); }
.kin-title { display: flex; flex-direction: column; color: var(--paper); text-transform: uppercase; line-height: .95; text-align: left; }
.kin-line { display: block; white-space: nowrap; }
.kin-bold { font-weight: 700; font-size: clamp(2rem, min(6.3vw, 9vh), 7.2rem); letter-spacing: -.01em; }
.kin-light { font-weight: 300; font-size: clamp(1.8rem, min(5.6vw, 8vh), 6.4rem); letter-spacing: 0; }
.kin-sub { max-width: 34rem; margin: clamp(.75rem, 3vh, 2rem) 0 0; color: rgba(255, 255, 255, .72); line-height: 1.55; }
.kin-actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; align-items: center; margin-top: clamp(2.5rem, min(12vh, 7vw), 7rem); }  /* the minimum gap; on wider screens .kin-main pushes the buttons lower */
@media (max-height: 640px) { .hero-kin .btn { padding-top: .8rem; padding-bottom: .8rem; } }
.hero-kin .link-arrow { color: var(--paper); }
/* The price, as a feature: lower right, level with the buttons */
.kin-price {
  position: absolute; right: 0; bottom: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1; text-align: right;
}
.kin-price-from { color: rgba(255, 255, 255, .6); font-size: clamp(.7rem, .9vw, .85rem); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; margin-bottom: .6rem; }
.kin-price-amount { font-weight: 700; font-size: clamp(2rem, min(6.3vw, 9vh), 7.2rem); letter-spacing: -.01em; }  /* same as the bold headline line */
/* Design / Build / Launch along the bottom, on a hairline */
.kin-steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin: 0; padding: clamp(.75rem, 2.5vh, 1.5rem) 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .18);
}
.kin-bottom { position: relative; margin-top: clamp(.75rem, 3.5vh, 3rem); }
/* Very short windows: the strip keeps just its numbers and names */
@media (max-height: 560px) { .kin-step-text { display: none; } }
.kin-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: baseline; justify-items: start; text-align: left; }
.kin-step-num { grid-row: span 2; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .15em; }
.kin-step-name { font-size: .8rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.kin-step-text { margin-top: .35rem; color: rgba(255, 255, 255, .6); font-size: .9rem; }
/* Letters, wrapped by script: each rolls up into place in turn */
.kin-l { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.15; padding-top: .04em; }
.kin-l > span { display: inline-block; translate: 0 105%; animation: kin-in .9s var(--ease) both; animation-delay: calc(var(--n) * 28ms + var(--d, 0ms)); }
@keyframes kin-in { from { translate: 0 105%; } to { translate: 0 0; } }
.kin-light .kin-word { color: var(--paper); }
/* Words never break mid-word on small screens */
.kin-word { display: inline-block; white-space: nowrap; }

/* The intro: a full-screen Ink screen where DESIGN shape-shifts into BUILD and LAUNCH, and
   LAUNCH crashes into a rocket that blasts off. It shows while <html> has .intro (set by
   script.js before the page paints, first visit only); the timeline itself is run by script.js,
   these are the resting styles */
.kin-intro { display: none; }
html.intro .kin-intro {
  display: flex; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); cursor: pointer; overflow: hidden;
  --kin-size: clamp(4rem, 17vw, 20rem);
}
/* A line above the changing word and one below, so the three read as one sentence: Let me design
   your website. Then I'll build your new working partner and together we'll launch a masterpiece
   that means business. */
.kin-intro-kicker {
  position: absolute; left: 0; right: 0; top: calc(50% - var(--kin-size) * .66); z-index: 1; text-align: center;
  font-size: clamp(.75rem, 1.2vw, 1rem); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; opacity: 0;
}
.kin-intro-kicker.is-below { top: calc(50% + var(--kin-size) * .5); }
/* The lines above and below change with each word (script fades one phrase into the next) */
.kin-intro-kicker { display: grid; justify-items: center; }
.kin-intro-kicker > span { grid-area: 1 / 1; opacity: 0; }
.kin-intro-tag {
  position: absolute; left: var(--gutter); top: 2rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; opacity: .6;
}
.kin-intro-tag.is-right { left: auto; right: var(--gutter); font-weight: 400; }
.kin-intro-skip {
  position: absolute; right: var(--gutter); bottom: 1.75rem; font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; opacity: .4;
}
.kin-filter { position: absolute; width: 0; height: 0; }
/* The moving pictures behind the words (drawn by script) */
.kin-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.kin-intro-words { position: relative; display: grid; width: 100%; padding: 0 var(--gutter); }
.kin-intro-word { grid-area: 1 / 1; position: relative; text-align: center; line-height: 1.05; opacity: 0; }
.kin-intro-word > span {
  display: inline-block; position: relative;
  font-size: var(--kin-size); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em;
}
.kin-intro-word > span > span { display: inline-block; position: relative; }

/* Replay intro: a small pill, bottom right of the hero */
.kin-replay {
  position: absolute; right: 0; bottom: 0; z-index: 5; padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4); background: none; color: rgba(255, 255, 255, .7); font: inherit; font-size: .5rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s;
}
.kin-replay:hover, .kin-replay:focus-visible { background: var(--paper); color: var(--ink); }
[data-hero="light"] .kin-replay { border-color: rgba(10, 10, 10, .3); color: rgba(10, 10, 10, .6); }
[data-hero="light"] .kin-replay:hover, [data-hero="light"] .kin-replay:focus-visible { background: var(--ink); color: var(--paper); }

/* Inverted hero (test): <html data-hero="light">, or ?hero=light on the home page.
   Paper sky, Ink type and drawing, Oxblood accents unchanged. The intro starts on Paper and
   turns black for LAUNCH (script.js), so the rocket keeps its usual white-on-night look */
[data-hero="light"] .hero-kin { background: var(--paper); color: var(--ink); }
/* no drifting stars behind the white hero: on Paper they read as specks of dust */
[data-hero="light"] .kin-bg { display: none; }
[data-hero="light"] .kin-eyebrow, [data-hero="light"] .kin-title, [data-hero="light"] .kin-light .kin-word,
[data-hero="light"] .hero-kin .link-arrow { color: var(--ink); }
[data-hero="light"] .kin-sub { color: rgba(10, 10, 10, .7); }
[data-hero="light"] .kin-price-from, [data-hero="light"] .kin-step-text { color: rgba(10, 10, 10, .6); }
[data-hero="light"] .kin-steps { border-top-color: rgba(10, 10, 10, .15); }
[data-hero="light"] .hero-kin .btn-paper { --wipe: var(--accent); background-color: var(--ink); color: var(--paper); }
[data-hero="light"].intro .kin-intro { background: var(--paper); color: var(--ink); }

/* LAUNCH.'s rocket: hidden until the letters mash together into it */
.kin-intro-word .kin-rocket {
  position: absolute; left: 50%; top: 50%; width: .65em; height: 1.3em; margin: -.7em 0 0 -.325em;
  fill: var(--paper); opacity: 0;
}
.kin-rocket-band { fill: var(--accent); }
.kin-rocket-window { fill: var(--ink); }
/* Its exhaust flame, under the nozzle */
.kin-intro-word .kin-flame {
  display: block; position: absolute; left: 50%; top: calc(50% + .36em); width: .1em; height: 1.6em; margin-left: -.045em;
  border-radius: 999px; background: linear-gradient(var(--paper), var(--accent) 35%, transparent);
  transform-origin: top; scale: 1 0;
}
.kin-intro-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent);
  transform-origin: left; scale: 0 1;
}

@media (max-width: 900px) {
  .kin-line { white-space: normal; }
  .kin-steps { grid-template-columns: 1fr; gap: 1rem; }
  .kin-price { position: static; align-items: flex-start; text-align: left; margin-top: 2rem; }
  .hero-kin { height: auto; min-height: 100vh; min-height: 100svh; }
}
/* Phones: a bigger headline */
@media (max-width: 600px) {
  .kin-bold { font-size: 11vw; }
  .kin-light { font-size: 9.4vw; }
}
@media (prefers-reduced-motion: reduce) {
  .kin-l > span { animation: none !important; translate: none; }
}

/* ---------- Layout below the hero ----------
   Left-aligned editorial grid: big type, strong rules. */
.wrap { max-width: 84rem; margin-inline: auto; text-align: left; }

.section { padding: var(--section-y) var(--gutter); }
.section-paper { background: var(--paper); }
.section-ivory { background: var(--ivory); }

.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1.1rem; border-top: 2px solid currentColor;
  font-size: clamp(.78rem, .95vw, .875rem); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* Section number in Oxblood on light sections; dark sections keep Paper for contrast */
.section-head span:last-child { color: var(--accent); }
.section-graphite .section-head span:last-child,
.closing .section-head span:last-child { color: inherit; }

.wrap .display {
  font-size: clamp(2.4rem, 6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: .04em;
}
.wrap .display .line { padding-left: 0; }
/* Section headlines: the bold first line is 30% larger than the light second line */
.wrap .display .line-bold { font-size: 1.3em; letter-spacing: .04em; }
.wrap .link-underline { padding-left: 0; }

/* Proof */
.proof { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); }
.proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.proof-list li { border-top: 2px solid var(--paper); padding-top: 1.25rem; }
.proof-figure {
  display: block; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.8rem, 7vw, 6.5rem); letter-spacing: .02em; line-height: 1;
}
.proof-label {
  display: block; margin-top: 1.1rem;
  font-size: .7rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--paper); opacity: .72;
}

/* The honest bit */
.split {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(10, 10, 10, .15);
}
.lead {
  grid-column: 1 / 7;
  color: var(--ink); font-weight: 400; line-height: 1.35;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
}
.split-body { grid-column: 8 / 13; }
.split-body p { margin-bottom: 2.25rem; }

/* Meet Joanne */
/* Headline lines set to equal width: the light line is tracked out to match the
   larger bold line. Font size is capped so neither line wraps on small screens. */
.about h2.display { font-size: min(clamp(2.4rem, 6vw, 5.25rem), calc((100vw - 2 * var(--gutter)) / 11.8)); }
.about h2.display .line-light { letter-spacing: .1981em; }
.about-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.about-photo { grid-column: 1 / 6; margin: 0; }
.about-photo img { width: 100%; }
.about-text { grid-column: 7 / 13; }

/* The outtake: hover (or tap) swaps the sultry portrait for a funny one */
.about-photo { position: relative; overflow: hidden; }
.about-outtake {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
/* Both portraits are semi-transparent, so the main one fades out as the outtake fades in */
.about-main { transition: opacity .45s var(--ease-soft); }
.about-photo:hover .about-outtake,
.about-photo.is-outtake .about-outtake { opacity: 1; }
.about-photo:hover .about-main,
.about-photo.is-outtake .about-main { opacity: 0; }
@media (hover: none) {
  .about-photo:hover .about-outtake { opacity: 0; }
  .about-photo:hover .about-main { opacity: 1; }
  .about-photo.is-outtake .about-outtake { opacity: 1; }
  .about-photo.is-outtake .about-main { opacity: 0; }
}

/* Glassy hint labels on photos (outtake and underwater) */
.photo-pill {
  position: absolute; left: clamp(.75rem, 2vw, 1.25rem); bottom: clamp(.75rem, 2vw, 1.25rem); z-index: 1;
  padding: .7rem 1.1rem;
  background: rgba(10, 10, 10, .45); color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.photo-pill[hidden] { display: none; }
/* home page only: "Hover for big attitude" sits top left of the photo */
.about-photo .photo-pill { top: clamp(.75rem, 2vw, 1.25rem); bottom: auto; }
.photo-pill:hover { background: rgba(10, 10, 10, .65); border-color: var(--paper); }
.pill-touch { display: none; }
@media (hover: none) {
  .pill-hover { display: none; }
  .pill-touch { display: inline; }
}
.about-text .lead { margin-bottom: 1.5rem; }
.about-quote {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding-top: 1.25rem; border-top: 2px solid var(--ink);
  color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: .06em; line-height: 1.3;
}

/* Work */
.title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; flex-wrap: wrap; }
.title-row .link-underline, .title-row .link-arrow { margin-bottom: .6rem; }
/* Mosaic: phones stack, tablets 2 × 2, desktop four sizes locked into one rectangle */
.work-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.work-item {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: #E9E6E0; color: var(--paper);
  border-radius: clamp(.75rem, 1.2vw, 1.1rem); transform: translateZ(0);   /* same corners as the Work page cards */
}
@media (min-width: 680px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .work-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(15rem, 24vw, 22rem));
    grid-template-areas:
      "a a a a a a a b b b b b"
      "c c c c d d d b b b b b";
  }
  .work-item { aspect-ratio: auto; }
  .work-a { grid-area: a; }
  .work-b { grid-area: b; }
  .work-c { grid-area: c; }
  .work-d { grid-area: d; }
}

/* Image is taller than its frame so script.js can drift it for a gentle parallax */
.work-media { position: absolute; inset: 0; }
.work-media img {
  position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover;
  transition: scale 1.2s var(--ease-soft);
}
.work-item:hover .work-media img { scale: 1.04; }

/* Caption overlaid on a soft Ink fade at the bottom */
.work-item::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .42) 34%, rgba(10, 10, 10, 0) 62%);
}
.work-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1.1rem, 2vw, 1.75rem); }
.work-meta { font-size: .68rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper); opacity: .8; }
.work-name {
  margin-top: .4rem; color: var(--paper); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: .1em; line-height: 1.3;
}
.work-line { margin-top: .35rem; max-width: 26rem; font-size: .9rem; line-height: 1.5; color: var(--paper); opacity: .85; }

/* "View project" tab slides down from the top corner on hover */
.work-cta {
  position: absolute; right: 0; top: 0; z-index: 3;
  background: var(--accent); color: var(--paper);
  font-size: .68rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 1rem 1.4rem 1rem 1.5rem;
  transform: translateY(-101%);
  transition: transform .5s var(--ease-soft);
}
.work-cta .arrow { display: inline-block; margin-left: .5rem; letter-spacing: 0; transition: transform .5s var(--ease-soft); }
.work-item:hover .work-cta, .work-item:focus-visible .work-cta { transform: translateY(0); }
.work-item:hover .work-cta .arrow { transform: translateX(.3rem); }

/* Oxblood feature section: one per page at most, for the key statement */
.section-oxblood { background: var(--accent); color: var(--paper); }
.section-oxblood .section-head,
.section-oxblood .display,
.section-oxblood .lead { color: var(--paper); }
.section-oxblood .section-head span:last-child { color: inherit; }
.section-oxblood .split { border-top-color: rgba(255, 255, 255, .3); }
.section-oxblood .split-body p { color: var(--paper); opacity: .85; }
.section-oxblood .link-underline { color: var(--paper); background-image: linear-gradient(var(--paper), var(--paper)); }
.section-oxblood .link-arrow { color: var(--paper); }
.section-oxblood .link-arrow .link-text { background-image: linear-gradient(var(--paper), var(--paper)); }
/* Ink-based blocks that take the Oxblood feature instead */
.package.section-oxblood, .cta-band.section-oxblood { background: var(--accent); }
/* Ink band (used for some page intros) */
.section-ink { background: var(--ink); color: var(--paper); }
.section-ink .section-head, .section-ink .display, .section-ink .lead { color: var(--paper); }
.section-ink .section-head span:last-child { color: inherit; }

/* Process: Graphite band, three columns with fine oversized numerals */
.section-graphite { background: var(--graphite); color: var(--paper); }
.section-graphite .section-head, .section-graphite .display { color: var(--paper); }

.steps {
  --steps-gap: clamp(2rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--steps-gap);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.steps li {
  position: relative;
  /* Numeral size and the crop window showing its top 70% (Jost digits: top at .131em, .714em tall) */
  --num-size: clamp(6.5rem, 15vw, 14rem);
  --num-crop: calc(var(--num-size) * .5);
}

/* Timeline: a fine line across all three steps (one segment per step, bridging the gaps),
   with a dot at the start of each. On reveal the segments draw left to right in turn and
   the dots land; on hover a step's segment slides away to the right like .link-underline. */
.steps li::after {
  content: ''; position: absolute; left: 0; top: var(--num-crop); right: calc(-1 * var(--steps-gap)); height: 1px;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) no-repeat left top / 100% 100%;
  transform-origin: left center;
  transition: transform .65s linear var(--line-delay, 0s), background-size .45s var(--ease) 0s;
}
.steps li:last-child::after { right: 0; }
.steps li:hover::after { background-size: 0 100%; background-position: right top; }

.steps li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--num-crop) - 4px); z-index: 1;
  width: 9px; height: 9px; border-radius: 50%; background: var(--paper);
  transition: transform .5s var(--ease-soft) var(--line-delay, 0s);
}
.steps li.rv::after { transform: scaleX(0); }
.steps li.rv::before { transform: scale(0); }
.steps li.rv-in::after { transform: scaleX(1); }
.steps li.rv-in::before { transform: scale(1); }
.steps li:nth-child(1) { --line-delay: .2s; }
.steps li:nth-child(2) { --line-delay: .85s; }
.steps li:nth-child(3) { --line-delay: 1.5s; }
/* Giant numerals cropped by the timeline: only the top shows, rising out of the line */
.step-num {
  display: block; overflow: hidden;
  height: var(--num-crop);
  font-size: var(--num-size); font-weight: 700; line-height: 1; letter-spacing: -.01em;
}
.step-num span {
  display: block; margin-top: -.131em;
  transition: transform 1s var(--ease-soft) calc(var(--line-delay, 0s) + .15s);
}
.steps li.rv:not(.rv-in) .step-num span { transform: translateY(60%); }
.step-title {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 .9rem;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: .2em;
}
.steps p { color: var(--paper); opacity: .8; max-width: 22rem; }

/* Comparison */
.table-wrap { margin-top: clamp(3rem, 7vw, 5rem); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 38rem; }
th, td { padding: 1.35rem 1.25rem; border-bottom: 1px solid rgba(10, 10, 10, .15); text-align: left; }
thead th {
  font-size: .7rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
tbody th {
  color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .18em; padding-left: 0;
}
.col-us { background: var(--graphite); color: var(--paper); font-weight: 400; border-bottom-color: rgba(255, 255, 255, .18); }
thead .col-us { color: var(--paper); border-bottom-color: var(--graphite); }

/* Closing: underwater call to action, split into text on Ink (left) and photo (right).
   Phones stack the photo above the text. */
.closing { background: var(--ink); color: var(--paper); }
.closing .section-head, .closing .display { color: var(--paper); }

.uw-photo { position: relative; overflow: hidden; }
.uw-media { position: relative; }
.uw-media img { width: 100%; filter: contrast(1.2) brightness(.85); }

/* Bubbles rise from the mouth (49.2% across, 67.4% down the photo) */
.uw-bubbles {
  position: absolute; left: 49.2%; bottom: 32.6%; z-index: 1;
  width: 4rem; height: 62%; transform: translateX(-50%);
  container-type: size; pointer-events: none;
}
.bubble {
  position: absolute; bottom: 0; left: calc(50% + var(--x));
  /* --air (set by script.js) shrinks the bubbles as Joanne runs out of breath */
  --s: calc(var(--size) * var(--bubble-scale, 1) * var(--air, 1));
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  border: 1.5px solid rgba(255, 255, 255, .95); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .7) 0 14%, rgba(255, 255, 255, .08) 38%);
  box-shadow: 0 0 8px rgba(10, 10, 10, .28);
  opacity: 0;
  transition: width 1.2s, height 1.2s, margin 1.2s;
  animation: bubble-rise var(--dur) cubic-bezier(.4, 0, .6, 1) var(--delay) infinite;
  animation-play-state: paused;
}
.uw-media.in-view .bubble { animation-play-state: running; }
/* Fewer bubbles as the air runs out */
.uw-bubbles[data-air="low"] .bubble:nth-child(n+6),
.uw-bubbles[data-air="lower"] .bubble:nth-child(n+4),
.uw-bubbles[data-air="out"] .bubble:nth-child(n+2) { visibility: hidden; }
.bubble:nth-child(1) { --size: 12px; --x: -4px; --drift: 10px;  --dur: 5.2s; --delay: 0s; }
.bubble:nth-child(2) { --size: 7px;  --x: 6px;  --drift: -8px;  --dur: 4.4s; --delay: .9s; }
.bubble:nth-child(3) { --size: 18px; --x: 1px;  --drift: 14px;  --dur: 6.1s; --delay: 1.7s; }
.bubble:nth-child(4) { --size: 9px;  --x: -8px; --drift: -12px; --dur: 4.8s; --delay: 2.6s; }
.bubble:nth-child(5) { --size: 14px; --x: 4px;  --drift: 9px;   --dur: 5.6s; --delay: 3.4s; }
.bubble:nth-child(6) { --size: 6px;  --x: -2px; --drift: -6px;  --dur: 4s;   --delay: 4.1s; }
.bubble:nth-child(7) { --size: 10px; --x: 7px;  --drift: -10px; --dur: 5s;   --delay: 4.9s; }

/* "Let me take a breath": glassy pill on the photo that triggers the exhale */
.uw-breath {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); z-index: 2;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem 1.2rem .8rem 1rem;
  background: rgba(10, 10, 10, .45); color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font); font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.uw-breath[hidden] { display: none; }
.uw-breath:hover { background: rgba(10, 10, 10, .65); border-color: var(--paper); }
.uw-breath-icon {
  position: relative; width: 12px; height: 12px; border: 1.5px solid var(--paper); border-radius: 50%;
}
.uw-breath-icon::after {
  content: ''; position: absolute; right: -7px; top: -7px; width: 6px; height: 6px;
  border: 1.5px solid var(--paper); border-radius: 50%;
}
/* Gentle pulse once she's running low on air */
.uw-breath.is-urgent { animation: breath-pulse 1.6s ease-in-out infinite; }
@keyframes breath-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* The big exhale: burst bubbles added by script.js when "Start your site" is hovered */
.burst {
  position: absolute; bottom: 0; left: calc(50% + var(--x));
  --s: calc(var(--size) * var(--bubble-scale, 1));
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  border: 1.5px solid rgba(255, 255, 255, .95); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .7) 0 14%, rgba(255, 255, 255, .08) 38%);
  box-shadow: 0 0 8px rgba(10, 10, 10, .28);
  opacity: 0;
  animation: bubble-burst var(--dur) cubic-bezier(.2, .7, .3, 1) var(--delay) forwards;
}
@keyframes bubble-burst {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.3); }
  8%   { opacity: 1; }
  45%  { transform: translate(calc(var(--drift) * .7), -55cqh) scale(.9); }
  100% { opacity: 0;  transform: translate(var(--drift), -110cqh) scale(1.15); }
}

@keyframes bubble-rise {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.5); }
  8%   { opacity: .9; }
  35%  { transform: translate(var(--drift), -35cqh) scale(.85); }
  70%  { opacity: .6; transform: translate(calc(var(--drift) * -.6), -70cqh) scale(1); }
  100% { opacity: 0;  transform: translate(calc(var(--drift) * .3), -100cqh) scale(1.1); }
}

.uw-panel { padding: var(--section-y) var(--gutter); }
.uw-text {
  max-width: 30rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 2.75rem);
  color: var(--paper); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.6;
}
.uw-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.uw-note { font-size: .7rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper); opacity: .72; }

@media (min-width: 900px) {
  .closing {
    --closing-h: clamp(36rem, 90vh, 56rem);
    display: grid; grid-template-columns: 1fr 1fr; height: var(--closing-h);
    align-items: stretch; overflow: hidden;  /* the photo and the black panel always end together */
  }
  .uw-photo { height: 100%; }
  .uw-photo { grid-column: 2; grid-row: 1; }
  /* Frame keeps the photo's proportions while covering the half, so the bubbles stay on the mouth */
  .uw-media {
    position: absolute; left: 50%; top: 50%;
    width: max(100%, calc(var(--closing-h) * 1535 / 1024));
    aspect-ratio: 1535 / 1024; transform: translate(-50%, -50%);
  }
  .uw-media img { height: 100%; object-fit: cover; }
  .uw-panel {
    grid-column: 1; grid-row: 1; max-width: none; margin: 0;
    display: flex; flex-direction: column;
    padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem) max(var(--gutter), calc((100vw - 84rem) / 2));
  }
  .uw-content { margin-top: auto; }
  /* Capped to the panel's content width so "Is your website" (about 12.2em wide) never wraps */
  .uw-panel .display {
    font-size: min(clamp(1.75rem, 3vw, 3.5rem),
      calc((50vw - max(var(--gutter), (100vw - 84rem) / 2) - clamp(2rem, 4vw, 4rem)) / 12.4));
  }
}

/* ==========================================================
   Inner pages: Pricing and Start Your Site
   ========================================================== */

/* Page intro (clears the fixed header) */
.page-intro { padding-top: calc(var(--section-y) + 5rem); }
.page-lead { max-width: 36rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* Page intros that fill exactly one screen (FAQ, How it works; the Work intro does the same):
   the label, headline and lead sit centred in the space below the header, and the headline and
   gaps shrink on short screens so nothing spills below the fold */
.fit-screen {
  height: 100vh; height: 100svh; min-height: 26rem;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(6.75rem + clamp(1rem, 4vh, 3rem)); padding-bottom: clamp(1rem, 4vh, 3rem);
}
.fit-screen > .wrap { width: 100%; }
.fit-screen .display, .work-intro .display { font-size: clamp(1.5rem, min(3.4vw, 6.2vh), 3rem); }
.fit-screen .page-lead, .work-intro .page-lead { margin-top: clamp(1rem, 3vh, 2.25rem); }
@media (max-width: 900px) { .fit-screen { height: auto; min-height: 100vh; min-height: 100svh; } }
/* Pricing intro: the agency price falls to $1,000 (script.js, initPriceDrop) */
.pricing-intro { position: relative; overflow: hidden; }
.pricing-intro .wrap { position: relative; }
.price-drop {
  position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 10vh, 6rem); text-align: right;
  color: var(--paper); pointer-events: none; font-variant-numeric: tabular-nums;
}
.pd-was {
  font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 300; letter-spacing: .04em; opacity: 0;
  text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px;
  transition: opacity .6s var(--ease-soft);
}
.pd-label {
  margin-top: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  opacity: .5; transition: opacity .5s var(--ease-soft);
}
.pd-num {
  position: relative; display: inline-block; margin-top: .25rem;
  font-size: clamp(3.5rem, min(10vw, 17vh), 10rem); font-weight: 300; line-height: 1; letter-spacing: -.03em;
  opacity: .35; transition: opacity .6s var(--ease-soft);
}
.pd-num::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: 3px; background: var(--accent);
  transform-origin: left; scale: 0 1; transition: scale .8s var(--ease);
}
.pd-note { margin-top: 1.4rem; font-size: .9rem; opacity: 0; transition: opacity .6s var(--ease-soft) .2s; }
/* landed on $1,000 */
.price-drop.is-landed .pd-was { opacity: .55; }
.price-drop.is-landed .pd-label { opacity: .85; }
.price-drop.is-landed .pd-num { opacity: 1; }
.price-drop.is-landed .pd-num::after { scale: 1 1; }
.price-drop.is-landed .pd-note { opacity: .75; }
@media (max-width: 991px) {
  .pricing-intro.fit-screen { height: auto; min-height: 100vh; min-height: 100svh; }
  .price-drop { position: relative; order: 2; right: auto; bottom: auto; align-self: flex-end; margin-top: clamp(2rem, 6vh, 3.5rem); }
}

/* FAQ intro: a faint search box typing real questions, suggestions dropping down (script.js) */
.faq-intro { position: relative; overflow: hidden; }
.faq-intro .wrap { position: relative; }
/* a little air between "Your questions" and "answered" */
.faq-intro .display .line-light { margin-top: .22em; }
.faq-search {
  position: absolute; right: 5%; top: 50%; translate: 0 -30%; width: min(30rem, calc(100vw - 46rem));
  color: var(--paper); opacity: .5; pointer-events: none; text-align: left;
}
.fs-bar {
  display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem;
  border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; font-size: clamp(1rem, 1.3vw, 1.2rem);
}
.fs-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fs-text { white-space: nowrap; }
.fs-caret { width: 1.5px; height: 1.2em; margin-left: -.6rem; background: currentColor; animation: fs-blink 1s steps(1) infinite; }
@keyframes fs-blink { 50% { opacity: 0; } }
.fs-list { margin: .6rem 0 0; padding: .4rem 0; list-style: none; border-radius: 1.25rem; background: rgba(255, 255, 255, .08); }
.fs-list:empty { display: none; }
.fs-list li {
  padding: .65rem 1.25rem; font-size: clamp(.9rem, 1.1vw, 1.05rem); opacity: 0; translate: 0 -.4rem;
  transition: opacity .35s var(--ease-soft), translate .35s var(--ease-soft), background-color .3s;
}
.fs-list li.is-in { opacity: 1; translate: 0 0; }
.fs-list li.is-picked { background: rgba(255, 255, 255, .14); }
.fs-list b { font-weight: 700; }
@media (max-width: 991px) {
  .faq-intro.fit-screen { height: auto; min-height: 100vh; min-height: 100svh; }
  .faq-search { position: relative; order: 2; right: auto; top: auto; translate: none; align-self: flex-end; width: min(100%, 30rem); margin-top: clamp(2rem, 6vh, 3.5rem); }
}
@media (prefers-reduced-motion: reduce) { .fs-caret { animation: none; } }

/* How it works intro: a faint Mousetrap-style chain reaction behind the text (played by
   script.js; stands still for reduced motion) */
.how-intro { position: relative; overflow: hidden; }
.how-intro .wrap { position: relative; }
.hiw-trap {
  /* sized to the space beside the text (the text column is about 42rem wide), never taller than the screen allows */
  position: absolute; right: 3%; bottom: clamp(1rem, 6vh, 4rem); width: min(46rem, calc(100vw - 42rem), 95vh); height: auto;
  pointer-events: none; overflow: visible;
}
.trap-rail { fill: none; stroke: var(--paper); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.trap-post { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.trap-rod { fill: none; stroke: var(--paper); stroke-width: 5; stroke-linecap: round; }
.trap-ball, .trap-domino, .trap-hammer, .trap-pin { fill: var(--paper); }
/* Everything is faint; the flag starts faint white too and warms to full Oxblood as it's
   raised (script.js), the payoff of the chain reaction */
.trap-all > * { opacity: .2; }
.trap-all > .trap-flag { fill: var(--paper); }
/* The two balls are Oxblood and solid, so you can follow them through the machine */
.trap-all > .trap-ball { fill: var(--accent); opacity: 1; }
/* iPads in portrait and phones: no room beside the text, so the drawing sits underneath it,
   right-aligned and fully in frame (the intro grows to fit) */
@media (max-width: 991px) {
  .how-intro.fit-screen { height: auto; min-height: 100vh; min-height: 100svh; }
  .hiw-trap { position: relative; order: 2; right: auto; bottom: auto; align-self: flex-end; width: min(100%, 36rem); margin-top: clamp(2rem, 6vh, 3.5rem); }
  .trap-all > * { opacity: .16; }
}
/* Terms (and other legal pages): a single readable column */
.legal-updated { margin-top: 1.25rem; color: var(--graphite); font-size: .72rem; letter-spacing: var(--track-label); text-transform: uppercase; }
.legal { max-width: 46rem; }
.legal h2 { margin: clamp(2.25rem, 4vw, 3rem) 0 .75rem; color: var(--ink); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 700; line-height: 1.35; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { line-height: 1.7; }
.legal p + p { margin-top: 1rem; }
.legal ul { margin: .75rem 0 1rem; padding-left: 1.25rem; list-style: disc; }
.legal li + li { margin-top: .35rem; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.section-graphite .lead { color: var(--paper); }

/* Pricing: the package (price on Ink, key facts as big numbers) */
.package { background: var(--ink); color: var(--paper); padding: var(--section-y) var(--gutter); }
.package-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.package-price { grid-column: 1 / 7; }
.package-label {
  font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: inherit; opacity: .72;
}
.package-figure {
  margin: 1rem 0 1.25rem; font-weight: 700; line-height: .9; letter-spacing: .01em;
  font-size: clamp(4.5rem, 12vw, 10rem);
}
.package-terms { opacity: .8; margin-bottom: 2.5rem; }
/* Key facts stacked down the right, divided by faint hairlines. Each number has its label and a small graphic
   that plays the first time the facts scroll into view (initFacts in js/script.js adds .is-in) */
.package-facts { grid-column: 8 / 13; grid-row: 1; align-self: center; }
.package-facts li {
  display: grid; grid-template-columns: clamp(3.5rem, 6vw, 5.5rem) 1fr; grid-template-areas: 'num label' 'num visual';
  align-items: center; column-gap: clamp(1rem, 2vw, 2rem); row-gap: .7rem; padding: clamp(.9rem, 2.2vh, 1.4rem) 0;
}
.package-facts li + li { border-top: 1px solid rgba(255, 255, 255, .2); }
.fact-num { grid-area: num; font-weight: 300; line-height: .9; font-size: clamp(3rem, 5.5vw, 5rem); }
.fact-label { grid-area: label; align-self: end; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.package-note { grid-column: 8 / 13; margin-top: -2rem; font-size: .82rem; opacity: .65; }
.fact-visual { grid-area: visual; display: flex; align-items: center; gap: .9rem; min-height: 3.6rem; }
.fact-visual b { font-size: .78rem; font-weight: 400; letter-spacing: .02em; opacity: .75; }
/* 5 pages: five page cards fan out */
.fv-pages i {
  position: relative; display: flex; align-items: flex-end; flex: none; width: 2.9rem; height: 3.6rem; margin-left: -.7rem; padding: .3rem;
  background: var(--paper); color: var(--accent); border-radius: 3px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .55);
  font-style: normal; font-size: .46rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; translate: -1.2rem .6rem; transition: opacity .5s, translate .7s cubic-bezier(.22,1,.36,1), rotate .7s cubic-bezier(.22,1,.36,1);
}
.fv-pages i:first-child { margin-left: 0; }
.fv-pages i::before { content: ''; position: absolute; left: .3rem; right: .3rem; top: .3rem; height: .9rem; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(rgba(107, 30, 36, .25), rgba(107, 30, 36, .25)) 0 .45rem / 70% 2px no-repeat, linear-gradient(rgba(107, 30, 36, .25), rgba(107, 30, 36, .25)) 0 .75rem / 50% 2px no-repeat; }
.package-facts.is-in .fv-pages i { opacity: 1; translate: 0 0; }
.package-facts.is-in .fv-pages i:nth-child(1) { rotate: -8deg; }
.package-facts.is-in .fv-pages i:nth-child(2) { rotate: -4deg; transition-delay: .08s; }
.package-facts.is-in .fv-pages i:nth-child(3) { transition-delay: .16s; }
.package-facts.is-in .fv-pages i:nth-child(4) { rotate: 4deg; transition-delay: .24s; }
.package-facts.is-in .fv-pages i:nth-child(5) { rotate: 8deg; transition-delay: .32s; }
/* 5 business days: the week fills one day at a time */
.fv-days { flex-wrap: wrap; gap: .3rem; }
.fv-days i {
  display: grid; place-items: center; width: 2.6rem; height: 2.3rem; border: 1px solid rgba(255, 255, 255, .35);
  font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .35s, color .35s, border-color .35s;
}
.fv-days b { flex-basis: 100%; }
.package-facts.is-in .fv-days i { background: var(--paper); color: var(--accent); border-color: var(--paper); }
.package-facts.is-in .fv-days i:nth-child(1) { transition-delay: .5s; }
.package-facts.is-in .fv-days i:nth-child(2) { transition-delay: .8s; }
.package-facts.is-in .fv-days i:nth-child(3) { transition-delay: 1.1s; }
.package-facts.is-in .fv-days i:nth-child(4) { transition-delay: 1.4s; }
.package-facts.is-in .fv-days i:nth-child(5) { transition-delay: 1.7s; }
/* 1 round of changes: a loop arrow draws itself */
.fv-round svg { flex: none; width: 2.6rem; height: 2.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fv-round path { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1) 2s; }
.fv-round path + path { transition-delay: 2.9s; }
.package-facts.is-in .fv-round path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .fv-pages i, .fv-days i, .fv-round path { transition: none; }
}

/* Pricing: what's included, in four short groups */
.include-groups {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.include-group { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.include-title {
  margin-bottom: 1rem; color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: .85rem; letter-spacing: .18em;
}
.include-group li { padding: .7rem 0; border-top: 1px solid rgba(10, 10, 10, .12); line-height: 1.5; }
.include-group li:first-child { border-top: 0; padding-top: 0; }

/* Pricing extras: compact individual cards with a consistent reading order. */
.addon-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.addon-group { min-width: 0; }
.addon-group-title {
  margin: 0 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
}
.addon-group > ul { display: grid; gap: .85rem; }
.addon-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 14rem;
  padding: 1.4rem;
  background: var(--paper);
}
.addon-name {
  margin: 0 0 .65rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}
.addon-desc { margin: 0 0 1.15rem; font-size: .95rem; line-height: 1.55; }
.addon-price {
  position: relative;
  margin: auto 0 0;
  padding-top: 1rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
}
.addon-price::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 1px;
  background: var(--accent);
}
@media (max-width: 760px) {
  .addon-row { min-height: 0; padding: 1.25rem; }
  .addon-price { margin-top: .25rem; }
  .addon-group + .addon-group { margin-top: 1rem; }
}

/* Pricing: what we need */
.needs-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.needs-grid li { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .35); }
.needs-title {
  margin-bottom: .75rem; font-weight: 700; text-transform: uppercase;
  font-size: .95rem; letter-spacing: .2em;
}
.needs-grid p { color: var(--paper); opacity: .85; }

/* Questions (pricing and FAQ): native details/summary, no script needed.
   The answer slides open where the browser supports it (::details-content); elsewhere it simply appears. */
.faq-list { margin-top: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid rgba(10, 10, 10, .15); }
.faq-item { position: relative; border-top: 1px solid rgba(10, 10, 10, .15); interpolate-size: allow-keywords; }
/* Oxblood rule down the side of the open question */
.faq-item::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease);
}
.faq-item[open]::before { transform: scaleY(1); }
.faq-item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.4rem 3.5rem 1.4rem 0;
  color: var(--ink); font-weight: 400; line-height: 1.4; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  transition: padding-left .45s var(--ease), color .3s var(--ease-soft);
}
.faq-item summary:hover, .faq-item[open] summary { padding-left: 1.25rem; }
.faq-item[open] summary { font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus that turns into a minus: two Oxblood bars, the upright one folds away */
.faq-item summary::before, .faq-item summary::after {
  content: ''; position: absolute; right: .25rem; top: 50%;
  width: 1.1rem; height: 2px; margin-top: -1px; background: var(--accent);
  transition: transform .45s var(--ease);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg) scaleX(0); }
.faq-item[open] summary::before { transform: rotate(180deg); }
.faq-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .5s var(--ease), content-visibility .5s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item p { max-width: 46rem; padding: 0 0 1.6rem 1.25rem; }

/* FAQ page: questions grouped into chapters, title sticky on the left */
.faq-groups { margin-top: clamp(3.5rem, 8vw, 6rem); }
.faq-all .faq-groups { margin-top: 0; }
.faq-group {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.faq-group + .faq-group { margin-top: clamp(3.5rem, 8vw, 6rem); }
.faq-group-head { grid-column: 1 / 5; position: sticky; top: 8rem; border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.faq-group-num { display: block; color: var(--accent); font-weight: 700; font-size: .78rem; letter-spacing: var(--track-label); }
.faq-group-title {
  margin-top: .6rem; color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.05; letter-spacing: .01em;
}
.faq-group-count {
  display: block; margin-top: .9rem; color: var(--graphite);
  font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
.faq-group .faq-list { grid-column: 5 / 13; margin-top: 0; }
@media (max-width: 900px) {
  .faq-group-head { grid-column: 1 / -1; position: static; }
  .faq-group .faq-list { grid-column: 1 / -1; }
}
.faq-more { margin-top: clamp(2rem, 4vw, 3rem); }

/* Closing band */
.cta-band { background: var(--ink); color: var(--paper); padding: var(--section-y) var(--gutter); }
.cta-band .display { color: var(--paper); margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Contact: a big statement, the email and phone as large links, a live Sydney line, and the
   form in a soft Ivory panel on the right. One screen on desktop. */
.contact {
  min-height: 100vh; min-height: 100svh; display: flex;
  padding-top: calc(6.75rem + clamp(1.25rem, 3svh, 3rem)); padding-bottom: clamp(1.5rem, 3svh, 3rem);
}
.contact-grid { --line: rgba(10, 10, 10, .14); display: flex; flex-direction: column; width: 100%; }
.contact-body {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: stretch; margin-block: auto; text-align: left;
}
/* both columns share a top and a bottom: the Sydney line and start link sit at the foot, level with Fire away */
.contact-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.contact-text > * { align-self: stretch; }
.contact-text > .contact-start { align-self: flex-start; }
.contact-box { display: flex; flex-direction: column; }
.contact-box .hello-form { flex: 1; display: flex; flex-direction: column; }
.contact-box .hello-form .btn { align-self: flex-start; margin-top: auto; }
.contact-title { display: flex; flex-direction: column; color: var(--ink); text-transform: uppercase; line-height: .95; }
.contact-title-big { font-size: clamp(3rem, min(7vw, 11svh), 7rem); font-weight: 700; letter-spacing: -.01em; }
.contact-title-small { margin-top: .35em; font-size: clamp(1.4rem, min(2.6vw, 4.4svh), 2.5rem); font-weight: 300; letter-spacing: .02em; }
.contact-me { max-width: 30rem; margin-top: clamp(1rem, 2.5svh, 1.6rem); text-align: left; }
.contact-me p { color: var(--graphite); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.6; }
.contact-lines { margin: clamp(1.5rem, 4svh, 2.5rem) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.contact-lines li { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; gap: 1rem; padding: clamp(.75rem, 1.8svh, 1.1rem) 0; border-top: 1px solid var(--line); }
.contact-label { color: var(--accent); font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.contact-big {
  justify-self: start; color: var(--ink); font-size: clamp(1.2rem, min(2.1vw, 3.6svh), 2rem); font-weight: 300; letter-spacing: -.01em;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0 1.5px;
  transition: background-size .45s var(--ease);
}
.contact-big:hover, .contact-big:focus-visible { background-size: 100% 1.5px; }
.contact-now { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: clamp(2rem, 6svh, 3.5rem); color: var(--graphite); font-size: .85rem; }
.contact-now-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); animation: contact-pulse 2.4s ease-in-out infinite; }
@keyframes contact-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(107, 30, 35, .45); } 50% { box-shadow: 0 0 0 .45rem rgba(107, 30, 35, 0); } }
.contact-start { margin-top: clamp(1.25rem, 3svh, 2rem); }
/* the form, in a soft rounded panel */
.contact-box {
  position: relative; isolation: isolate; min-width: 0; width: 100%; justify-self: stretch; scroll-margin-top: 8rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
/* The whole section sits on Paper (white); the form sits straight on it (no panel) */
.contact { overflow-x: clip; background: var(--paper); }
.contact-lines, .contact-lines li { border-color: rgba(107, 30, 35, .22); }
.contact .contact-box { padding: 0; color: var(--ink); }
.contact-box .hello-title { color: var(--ink); font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.contact-box-lead { margin: .4rem 0 0; color: var(--graphite); font-size: .95rem; }
/* a nudge to the brief, pointing to the Start your site button in the header */
.contact-brief-note { margin: .6rem 0 clamp(1.25rem, 3svh, 2rem); color: var(--graphite); font-size: .95rem; line-height: 1.6; }
/* Start your site, in the same spaced capitals as the header button, with an Oxblood underline
   that draws away and back on hover and an arrow that slides along */
.contact-brief-note .brief-link {
  display: inline-flex; align-items: baseline; gap: .45em; margin-left: .3em; padding-bottom: 2px;
  color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 100% 1.5px;
  transition: background-size .45s var(--ease);
}
.contact-brief-note .brief-link:hover, .contact-brief-note .brief-link:focus-visible { background-size: 0 1.5px; background-position: right bottom; }
.brief-arrow { display: inline-block; letter-spacing: 0; transition: translate .45s var(--ease); }
.brief-link:hover .brief-arrow, .brief-link:focus-visible .brief-arrow { translate: .3em 0; }
/* the header button is hidden behind Menu below 1181px, so "up there" goes too */
@media (max-width: 1180px) {
  .contact-up-there { display: none; }
}
.contact-box .hello-form .field { margin-bottom: clamp(1rem, 2.6svh, 1.6rem); }
.contact-box .hello-form .field > span { color: var(--graphite); opacity: 1; font-size: .65rem; letter-spacing: .15em; }
.contact-box .hello-form .field input, .contact-box .hello-form .field textarea {
  color: var(--ink); border-bottom-color: rgba(107, 30, 35, .4); margin-top: .35rem; padding: .55rem 0; font-size: 1rem; line-height: 1.4;
}
.contact-box .hello-form .field input:focus, .contact-box .hello-form .field textarea:focus { border-bottom-color: var(--accent); }
.contact-box .hello-form .field textarea { min-height: 3.6rem; height: clamp(3.6rem, 9svh, 5.5rem); }
.contact-box .hello-form .form-error { color: var(--accent); }
.contact-box .hello-form.was-checked .field input:invalid, .contact-box .hello-form.was-checked .field textarea:invalid { border-bottom-color: var(--accent); border-bottom-width: 2px; }
/* the last field keeps a gap above Fire away; the button itself drops to the foot of the column */
.contact-box .hello-form > label.field:last-of-type { margin-bottom: clamp(2rem, 6svh, 3.5rem); }
.contact .contact-box .hello-sent { border-top-color: rgba(107, 30, 35, .4); color: var(--ink); }
@media (max-width: 900px) {
  .contact-body { grid-template-columns: 1fr; gap: 2.5rem; margin-block: 0; }
  .contact-title-big { font-size: clamp(3rem, 15vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) { .contact-now-dot { animation: none; } }

/* About closing: Start your site on the left, a short "say hello" form on the right */
.hello-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem); align-items: start; }
.hello-text { grid-column: 1 / 7; }
.hello-box { grid-column: 8 / 13; }
.hello-title { color: var(--paper); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; line-height: 1.3; }
.hello-lead { margin: .5rem 0 1.75rem; opacity: .75; }
.hello-form .field > span { color: var(--paper); opacity: .8; }
.hello-form .field input, .hello-form .field textarea { color: var(--paper); border-bottom-color: rgba(255, 255, 255, .35); }
.hello-form .field input:focus, .hello-form .field textarea:focus { border-bottom-color: var(--paper); }
.hello-form .form-error { color: var(--paper); }
.hello-form.was-checked .field input:invalid, .hello-form.was-checked .field textarea:invalid { border-bottom-color: var(--paper); border-bottom-width: 2px; }
.hello-form .btn { margin-top: .5rem; }
.hello-sent { padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 1.05rem; }
@media (max-width: 900px) {
  .hello-text, .hello-box { grid-column: 1 / -1; }
}

/* Start hero: centre the introduction in the viewport below the fixed header. */
.start-intro {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(6.75rem + clamp(1rem, 3svh, 2rem));
  padding-bottom: clamp(1rem, 3svh, 2rem);
}
.start-intro > .wrap { width: 100%; }
.start-intro .section-head { margin-bottom: clamp(1.25rem, 4svh, 3rem); padding-top: .75rem; }
.start-intro .display { font-size: clamp(1.65rem, min(6vw, 7svh), 5.25rem); }
.start-intro .page-lead {
  margin-top: clamp(1rem, 3svh, 2rem);
  font-size: clamp(1.05rem, min(2.3vw, 3svh), 2rem); line-height: 1.45;
}
@media (max-height: 550px) {
  .start-intro .section-head { margin-bottom: 1rem; }
  .start-intro .display { font-size: clamp(1.5rem, min(4vw, 6svh), 2rem); }
  .start-intro .page-lead { font-size: 1rem; }
}

/* Start intro: a faint brief fills itself in, is sent, folds into a paper plane that vanishes with it, then a thank-you (script.js, initBriefCard) */
.start-intro { position: relative; overflow: hidden; }
.start-intro > .wrap { position: relative; }
/* sits just under the section line, on the right of the headline */
.brief-card {
  position: absolute; right: 0; top: clamp(3rem, 7svh, 5rem);
  width: min(23rem, calc(100% - 42rem)); color: var(--paper); pointer-events: none; text-align: left;
}
.bc-sheet {
  padding: clamp(.9rem, 2.4svh, 1.6rem) clamp(1rem, 2vw, 1.6rem); border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 1rem;
  background: rgba(255, 255, 255, .05); opacity: .6; transform-origin: 70% 40%;
}
.bc-title { margin-bottom: clamp(.5rem, 1.5vh, 1rem); font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.bc-field { padding: clamp(.3rem, 1svh, .65rem) 0; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.bc-label { display: block; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
/* a fixed line height so the card is the same size empty or filled (it's centred on screen) */
.bc-value { display: block; height: 1.5em; line-height: 1.5; margin-top: .15rem; font-size: clamp(.85rem, min(1.2vw, 2svh), 1.1rem); white-space: nowrap; }
.bc-value.is-typing::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: fs-blink 1s steps(1) infinite; }
.bc-send {
  display: inline-block; margin-top: clamp(.7rem, 2svh, 1.3rem); padding: .65rem 1.2rem;
  border: 1.5px solid var(--paper); font-size: .65rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color .2s, color .2s, scale .2s;
}
.bc-send.is-pressed { background: var(--paper); color: var(--accent); scale: .96; }
.bc-plane {
  position: absolute; left: 50%; top: 45%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem;
  fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; opacity: 0;
}
/* the thank-you that takes the plane's place */
.bc-sent {
  position: absolute; left: 8%; right: 8%; top: 50%; translate: 0 -50%; text-align: center; opacity: 0;
  font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1;
}
.bc-sent span { display: block; margin-top: .9rem; font-size: clamp(.9rem, 1.1vw, 1.05rem); font-weight: 300; letter-spacing: .01em; line-height: 1.5; text-transform: none; }
/* narrower laptop windows: a smaller card, and the text keeps clear of it */
@media (min-width: 860px) and (max-width: 1099px) {
  .brief-card { width: 15.5rem; }
  .start-intro .display, .start-intro .page-lead { max-width: calc(100% - 17.5rem); }
}
@media (max-width: 859px) {
  /* under the text on iPads in portrait and phones */
  .start-intro > .wrap { display: flex; flex-direction: column; }
  .brief-card { position: relative; order: 2; right: auto; top: auto; width: min(100%, 22rem); margin: clamp(2rem, 6vh, 3.5rem) 0 0 auto; }
}
/* too short a laptop window to fit it beside the text */
@media (min-width: 860px) and (max-height: 600px) { .brief-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .bc-value.is-typing::after { animation: none; } }

/* Case study pages (case-study-*.html): intro over the project photo with the facts, brief,
   the homepage playing in a browser window, challenge and solution, design notes, phone
   screens, outcome, then an Oxblood call to action */
.cs-back { border-bottom: 1px solid currentColor; }
.cs-back:hover { color: var(--accent); }
/* the project photo fills the intro, darkened on the left and at the foot so the text reads */
.cs-intro { position: relative; isolation: isolate; overflow: hidden; }
.cs-intro-photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.cs-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.cs-intro::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 10, .78), rgba(10, 10, 10, .45) 60%, rgba(10, 10, 10, .6)), linear-gradient(0deg, rgba(10, 10, 10, .5), transparent 50%);
}
/* a photo that's already dark: a lighter wash so the subject still shows */
.cs-intro-soft::before { background: linear-gradient(90deg, rgba(10, 10, 10, .55), rgba(10, 10, 10, .1) 60%, rgba(10, 10, 10, .3)); }
.cs-intro .cs-back { color: var(--paper); }
.cs-intro .cs-back:hover { color: var(--paper); opacity: .75; }
.cs-intro .link-arrow { color: var(--paper); }
.cs-intro .link-arrow .link-text { background-image: linear-gradient(var(--paper), var(--paper)); }
.cs-intro .cs-facts dt { color: var(--paper); opacity: .7; }
.cs-intro .cs-facts dd { color: var(--paper); }
.cs-intro .cs-facts div + div { border-top-color: rgba(255, 255, 255, .28); }
/* light hero photos: Ink text and a soft white wash, otherwise the same layout as the dark version */
.cs-intro-light::before { background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .55)); }
/* the photo sits below the header and is scaled up so she's imposing; it's pinned to the top right,
   so if anything has to be cropped it's her feet and the empty grey on the left, never her head */
.cs-intro-light { background: linear-gradient(180deg, #E2E4E8, #ECEEF2 55%, #F3F5F9); }
.cs-intro-light .cs-intro-photo { top: 6.75rem; container-type: size; }
.cs-intro-light .cs-intro-photo img {
  position: absolute; right: 0; top: 0; translate: 0 -12%; /* lifted: the top of her head sits just under the header */
  height: max(56.25cqw, min(118cqh, 90cqw)); width: auto; max-width: none; aspect-ratio: 2000 / 1125; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%);
}
/* iPads in portrait and phones: the photo drops under the facts, full width */
@media (max-width: 900px) {
  .cs-intro-light .cs-intro-photo { position: relative; inset: auto; z-index: 0; order: 2; container-type: normal; margin: clamp(1rem, 4vw, 2rem) calc(-1 * var(--gutter)) 0; }
  .cs-intro-light .cs-intro-photo img {
    position: static; width: 100%; height: auto; translate: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  }
}
.cs-intro-light .cs-back { color: var(--ink); }
.cs-intro-light .cs-back:hover { color: var(--accent); opacity: 1; }
.cs-intro-light .link-arrow { color: var(--ink); }
.cs-intro-light .link-arrow .link-text { background-image: linear-gradient(var(--accent), var(--accent)); }
.cs-intro-light .cs-facts dt { color: var(--graphite); opacity: 1; }
.cs-intro-light .cs-facts dd { color: var(--ink); }
.cs-intro-light .cs-facts div + div { border-top-color: rgba(10, 10, 10, .18); }
@media (min-width: 600px) { .cs-intro .display .line { white-space: nowrap; } }
/* a photo whose subject sits left of centre: shift it so the subject lands between the text and the facts */
.cs-intro-photo .cs-photo-left { object-position: 28% 55%; }
/* Vantelope: the van sits left in the photo, so on landscape screens the photo slides right until the van
   lands between the headline and the facts; its left edge fades into the dark. Always fills the hero. */
@media (min-width: 901px) and (min-aspect-ratio: 6/5) {
  .cs-intro-photo:has(.cs-photo-van) { container-type: size; }
  .cs-intro-photo .cs-photo-van {
    position: absolute; left: 24cqw; top: 50%; translate: 0 -50%;
    width: max(76cqw, 177.8cqh); height: auto; max-width: none; aspect-ratio: 2000 / 1125;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%);
  }
}
.cs-intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); align-items: center; }
.cs-intro-text { grid-column: 1 / 8; }
.cs-intro .page-lead { max-width: 32rem; font-size: clamp(1.05rem, min(1.6vw, 2.8vh), 1.5rem); line-height: 1.45; }
.cs-facts { grid-column: 9 / 13; margin: 0; }
.cs-facts div {
  display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 1rem;
  padding: clamp(.7rem, 2.2vh, 1.3rem) 0;
}
.cs-facts div + div { border-top: 1px solid rgba(10, 10, 10, .14); }
.cs-facts dt { font-size: .65rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }
.cs-facts dd { margin: 0; font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.cs-live { margin-top: clamp(1.25rem, 4vh, 2.75rem); }


/* The brief as a before and after, split by a fine Oxblood line */
.cs-ba { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 9vw, 9rem); }
.cs-ba::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--accent); }
.cs-ba-kicker { color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.cs-ba-title {
  margin: .6rem 0 clamp(1.75rem, 4vw, 3rem); color: var(--ink); text-transform: uppercase; line-height: .95;
  font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: .02em;
}
.cs-ba-title span { display: block; font-size: .55em; font-weight: 300; letter-spacing: .06em; }
.cs-ba-list { margin: 0; padding: 0; list-style: none; counter-reset: ba; border-bottom: 1px solid rgba(10, 10, 10, .14); }
.cs-ba-list li {
  counter-increment: ba; display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0; border-top: 1px solid rgba(10, 10, 10, .14);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink);
}
.cs-ba-list li::before { content: counter(ba, decimal-leading-zero); color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .1em; padding-top: .3em; }
@media (max-width: 900px) {
  .cs-ba { grid-template-columns: 1fr; }
  .cs-ba::before { display: none; }
  .cs-ba-side + .cs-ba-side { padding-top: clamp(2.5rem, 8vw, 4rem); border-top: 1px solid var(--accent); }
}

.cs-browser {
  margin-top: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden;
  background: var(--paper); border: 1px solid rgba(10, 10, 10, .12); border-radius: 10px;
  box-shadow: 0 40px 70px -40px rgba(10, 10, 10, .45);
}
.cs-shot { display: block; width: 100%; height: auto; }
.cs-video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 620; object-fit: cover; background: #F7F3EE; }

/* Challenge and solution: the two words set huge, side by side, with a short line and text under each */
.cs-cs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
.cs-cs::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(10, 10, 10, .15); }
.cs-cs-word {
  color: var(--ink); font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: -.01em;
  font-size: clamp(2.4rem, 6.4vw, 6.25rem);
}
.cs-cs-word span { display: block; margin-bottom: .35em; color: var(--accent); font-size: max(.7rem, .14em); letter-spacing: var(--track-label); }
.cs-cs-sub { margin: clamp(1.5rem, 3vw, 2.25rem) 0 1rem; color: var(--ink); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 400; line-height: 1.3; }
.cs-cs-text { max-width: 34rem; color: var(--graphite); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7; }
/* the pull quote, set huge in white on its own Oxblood band */
.cs-quote { position: relative; margin: 0; padding-top: clamp(3rem, 6vw, 5rem); }
.cs-quote::before {
  content: '“'; position: absolute; left: -.05em; top: -.12em; color: var(--paper); opacity: .35;
  font-size: clamp(7rem, 16vw, 14rem); font-weight: 700; line-height: 1;
}
.cs-quote p { max-width: 22ch; font-size: clamp(2rem, 5.2vw, 4.75rem); font-weight: 300; line-height: 1.08; letter-spacing: -.005em; color: var(--paper); }
/* a first line that should never break (wider screens only; phones wrap as normal) */
@media (min-width: 700px) { .cs-quote-line { display: inline-block; white-space: nowrap; } .cs-quote p:has(.cs-quote-line) { max-width: none; } }
.cs-quote strong { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

/* one full-width row per note: big Oxblood number, bold title, then the note */
.cs-notes { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(10, 10, 10, .15); }
.cs-notes li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0; border-top: 1px solid rgba(10, 10, 10, .15);
  transition: background-color .4s var(--ease-soft);
}
.cs-note-num {
  grid-column: 1 / 3; color: var(--accent); font-weight: 700; line-height: .85; letter-spacing: -.02em;
  font-size: clamp(3rem, 7vw, 6.5rem); transition: translate .5s var(--ease-soft);
}
.cs-notes h3 {
  grid-column: 3 / 8; color: var(--ink); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05;
  font-size: clamp(1.4rem, 3vw, 2.6rem); transition: translate .5s var(--ease-soft);
}
.cs-notes p { grid-column: 8 / 13; color: var(--graphite); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; }
.cs-notes li:hover .cs-note-num, .cs-notes li:hover h3 { translate: .6rem 0; }

.cs-screens { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 5rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.cs-phone { width: min(17rem, 42vw); margin: 0; }
/* three phones sit side by side from tablet width up */
@media (min-width: 700px) { .cs-screens:has(.cs-phone:nth-child(3)) .cs-phone { width: min(16rem, 26vw); } }
.cs-phone img {
  display: block; width: 100%; height: auto; aspect-ratio: 924 / 1550; object-fit: cover; object-position: top; border: clamp(6px, 1vw, 10px) solid var(--ink); border-radius: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 40px 70px -40px rgba(10, 10, 10, .5);
}
.cs-phone figcaption { margin-top: 1.1rem; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--graphite); }

/* Outcome on Graphite: huge statement, results as short bold lines, the live site as a giant link */
.cs-big { color: var(--paper); text-transform: uppercase; line-height: .9; }
.cs-big-bold { display: block; font-size: clamp(2.2rem, 12vw, 11rem); font-weight: 700; letter-spacing: -.01em; }
.cs-big-light { display: block; margin-top: .15em; font-size: clamp(1.6rem, 4.6vw, 4.2rem); font-weight: 300; letter-spacing: .04em; }
.cs-wins {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem);
  margin: clamp(3rem, 8vw, 6rem) 0 0; padding: 0; list-style: none; counter-reset: win;
}
.cs-wins li {
  counter-increment: win; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .3);
  color: var(--paper); font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 700; line-height: 1.25; letter-spacing: .01em;
}
.cs-wins li::before { content: counter(win, decimal-leading-zero); display: block; margin-bottom: .75rem; color: var(--paper); opacity: .6; font-size: .75rem; letter-spacing: .15em; }
.cs-site-link {
  display: block; margin-top: clamp(4rem, 10vw, 7rem); padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, .3); color: var(--paper);
}
.cs-site-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; opacity: .7; }
.cs-site-url {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3em; max-width: 100%; margin-top: .5rem;
  font-size: clamp(1.5rem, 7.5vw, 7rem); font-weight: 300; line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0 3px; padding-bottom: .12em;
  transition: background-size .6s var(--ease);
}
.cs-site-arrow { display: inline-block; font-size: .6em; transition: translate .5s var(--ease-soft); }
.cs-site-link:hover .cs-site-url, .cs-site-link:focus-visible .cs-site-url { background-size: 100% 3px; }
.cs-site-link:hover .cs-site-arrow, .cs-site-link:focus-visible .cs-site-arrow { translate: .2em -.2em; }

.cs-next { border-top: 1px solid rgba(10, 10, 10, .12); }
.cs-next-link { display: block; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter); text-align: center; transition: background-color .3s; }
.cs-next-link:hover { background: var(--ivory); }
.cs-next-label { display: block; color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.cs-next-name { display: block; margin-top: .6rem; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* closing band: headline across the top, the line on the left, the button over on the right */
.cs-cta .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); align-items: end; }
.cs-cta .display { grid-column: 1 / -1; }
.cs-cta .page-lead { grid-column: 1 / 8; margin-top: 0; }
.cs-cta .btn { grid-column: 9 / 13; justify-self: end; }

@media (max-width: 900px) {
  .cs-intro-text, .cs-facts { grid-column: 1 / -1; }
  .cs-facts { max-width: 30rem; }
  .cs-cs { grid-template-columns: 1fr; }
  .cs-cs::before { display: none; }
  .cs-cta .page-lead, .cs-cta .btn { grid-column: 1 / -1; }
  .cs-cta .btn { justify-self: start; }
  .cs-wins { grid-template-columns: 1fr 1fr; }
  .cs-note-num { grid-column: 1 / 4; }
  .cs-notes h3 { grid-column: 4 / -1; }
  .cs-notes p { grid-column: 4 / -1; }
}
@media (max-width: 560px) {
}

/* small phones: long single words in the case study headlines (CONFIDENCE, CONSIDERED) must still fit */
@media (max-width: 480px) {
  .cs-film .display, .cs-notes-section .display, .cs-screens-section .display, .cs-cta .display { font-size: 1.9rem; }
}

/* See for yourself: one real client site per page, under that client's testimonial (Pricing, FAQ).
   Same layout as the About page example; the browser window shows a still of the live homepage. */
.browser-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale .8s var(--ease-soft); }
.browser-frame:hover .browser-view img { scale: 1.03; }

/* Studio Journal (blog/): the listing page and article pages, in the site's editorial style.
   Listing: three to a row (two on iPads, one on phones). Articles: a Paper header
   with the title, standfirst and date / author / reading time, a wide image, then a narrow
   reading column, older / newer links and the closing band */
.journal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.journal-card { display: grid; gap: 1.1rem; align-content: start; color: var(--ink); }
/* Blog intro: a faint computer screen where a draft writes itself (script.js, initDraft) */
.journal-intro { position: relative; overflow: hidden; }
.journal-intro .wrap { position: relative; }
/* drawn as a desktop computer: a screen in a thick bezel, an editor bar with window dots,
   and a neck and stand underneath (the pseudo-elements) */
.journal-draft {
  position: absolute; right: 2%; top: clamp(3.5rem, 9vh, 5.5rem); width: min(28rem, calc(100vw - 48rem));  /* just under the section line */
  padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1.1rem, 2vw, 1.75rem) clamp(1.4rem, 2.4vw, 2.1rem);
  border: clamp(8px, .9vw, 12px) solid rgba(10, 10, 10, .16); border-radius: 1rem; background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1.5px rgba(10, 10, 10, .2);
  color: var(--ink); opacity: .7; pointer-events: none; text-align: left;
}
.journal-draft::before {   /* the neck */
  content: ''; position: absolute; left: 50%; top: 100%; width: 16%; height: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(8px, .9vw, 12px); translate: -50% 0;
  background: linear-gradient(rgba(10, 10, 10, .2), rgba(10, 10, 10, .1)); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.journal-draft::after {    /* the stand */
  content: ''; position: absolute; left: 50%; top: 100%; width: 38%; height: .55rem; translate: -50% 0;
  margin-top: calc(clamp(8px, .9vw, 12px) + clamp(1.6rem, 3vw, 2.4rem)); border-radius: .5rem .5rem .2rem .2rem;
  background: rgba(10, 10, 10, .18);
}
.jd-label { display: flex; align-items: center; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(10, 10, 10, .15);
  font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); }
.jd-label::before {        /* window dots, like an editor */
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(10, 10, 10, .2);
  box-shadow: 11px 0 rgba(10, 10, 10, .2), 22px 0 rgba(10, 10, 10, .2); margin-right: 22px;
}
.jd-label span:last-child { margin-left: auto; }
.jd-state { color: var(--accent); }
.jd-title { height: 3.6em; overflow: hidden; margin-top: 1.1rem;  /* fixed at three lines so the screen never changes size while it types */ font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.jd-wrong { position: relative; display: inline; }
.jd-wrong::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 3px; background: var(--accent); transform-origin: left; scale: 0 1; transition: scale .45s var(--ease); }
.jd-wrong.is-struck::after { scale: 1 1; }
.jd-wrong.is-struck { opacity: .45; transition: opacity .45s; }
.jd-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--accent); animation: fs-blink 1s steps(1) infinite; }
.jd-lines { display: grid; gap: .6rem; margin-top: 1.25rem; }
.jd-lines span { display: block; height: 6px; border-radius: 3px; background: rgba(10, 10, 10, .12); transform-origin: left; scale: 0 1; transition: scale .6s var(--ease-soft); }
.jd-lines span:nth-child(2) { width: 92%; } .jd-lines span:nth-child(3) { width: 96%; } .jd-lines span:nth-child(4) { width: 64%; }
.journal-draft.is-written .jd-lines span { scale: 1 1; }
.journal-draft.is-written .jd-lines span:nth-child(2) { transition-delay: .12s; }
.journal-draft.is-written .jd-lines span:nth-child(3) { transition-delay: .24s; }
.journal-draft.is-written .jd-lines span:nth-child(4) { transition-delay: .36s; }
.jd-stamp {
  position: absolute; right: 1.25rem; bottom: 1.1rem; padding: .35rem .7rem; border: 2px solid var(--accent); border-radius: .3rem;
  color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; rotate: -8deg; scale: 1.6; transition: opacity .25s, scale .35s var(--ease);
}
.journal-draft.is-published .jd-stamp { opacity: 1; scale: 1; }
.journal-draft.is-published .jd-state { color: var(--graphite); }
@media (max-width: 991px) {
  .journal-intro.fit-screen { height: auto; min-height: 100svh; }
  .journal-intro > .wrap { display: flex; flex-direction: column; }
  .journal-draft { position: relative; order: 2; right: auto; top: auto; translate: none; align-self: flex-end; width: min(100%, 26rem); margin: clamp(2rem, 6vh, 3.5rem) 0 clamp(3rem, 7vh, 4rem); }
}
@media (min-width: 992px) and (max-height: 600px), (min-width: 992px) and (max-width: 1149px) { .journal-draft { display: none; } }  /* too short or narrow a window to sit beside the text */
@media (prefers-reduced-motion: reduce) { .jd-caret { animation: none; } }

/* intro: the line under the header sits where it does on Pricing and How it works, whose intro
   paragraphs run to three lines on laptops (this one is two), so it gets the same height there */
@media (min-width: 1225px) { .journal-intro .page-lead { min-height: 3lh; } }
/* iPads in portrait and phones: the other intros have a graphic under the text that lifts them, so this one starts from the top at the same height */
@media (max-width: 900px) { .journal-intro.fit-screen { justify-content: flex-start; padding-top: calc(6.75rem + clamp(4rem, 14svh, 8rem)); } }
.journal-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .75rem; background: var(--ivory); }
.journal-card-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-soft); }
.journal-card-img.is-logo { background: #fff; }
.journal-card-img.is-logo img { object-fit: contain; padding: 18%; background: #fff; }
.journal-card:hover .journal-card-img img, .journal-card:focus-visible .journal-card-img img { scale: 1.04; }
.journal-card-text { display: block; }
.journal-card-meta { display: block; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.journal-card-title { display: block; margin-top: .7rem; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.08; }
.journal-card-desc { display: block; margin-top: .8rem; color: var(--graphite); font-size: .95rem; line-height: 1.6; }
.journal-card-read {
  display: inline-block; margin-top: 1.25rem; padding-bottom: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 100% 1.5px; transition: background-size .45s var(--ease);
}
.journal-card:hover .journal-card-read { background-size: 0 1.5px; background-position: right bottom; }

.journal-head { padding-top: calc(var(--section-y) + 4rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.journal-title { max-width: 18ch; color: var(--ink); font-size: clamp(2.2rem, 5.5vw, 5rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; line-height: .98; }
.journal-standfirst { max-width: 40rem; margin-top: clamp(1.25rem, 3vw, 2rem); }
.journal-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); padding-top: 1rem; border-top: 1px solid rgba(10, 10, 10, .15);
  color: var(--graphite); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.journal-meta time { color: var(--accent); }
.journal-hero { max-width: calc(84rem + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.journal-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1173 / 480; object-fit: cover; border-radius: .75rem; }
.journal-hero.is-logo img { object-fit: contain; padding: clamp(2rem, 6vw, 5rem) 12%; background: var(--ivory); }
.journal-body-section { padding-top: clamp(3rem, 7vw, 5.5rem); }
.journal-body { max-width: 42rem; margin: 0 auto; color: var(--ink); font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.75; }
.journal-body h2 { margin: 2.6em 0 .8em; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.journal-body h2:first-child { margin-top: 0; }
.journal-body h2::before { content: ''; display: block; width: 2.5rem; height: 2px; margin-bottom: .9rem; background: var(--accent); }
.journal-body p { margin: 0 0 1.25em; }
.journal-body ul { margin: 0 0 1.5em; padding: 0; list-style: none; border-top: 1px solid rgba(10, 10, 10, .12); }
.journal-body li { position: relative; padding: .7rem 0 .7rem 1.75rem; border-bottom: 1px solid rgba(10, 10, 10, .12); }
.journal-body li::before { content: ''; position: absolute; left: 0; top: 1.45rem; width: .8rem; height: 2px; background: var(--accent); }
.journal-body a { border-bottom: 1px solid var(--accent); transition: color .3s; }
.journal-body a:hover { color: var(--accent); }
.journal-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 42rem; margin: clamp(3.5rem, 8vw, 5rem) auto 0; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.journal-pager-link { display: block; color: var(--ink); }
.journal-pager-link.is-newer { grid-column: 2; text-align: right; }
.journal-pager-label { display: block; color: var(--accent); font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.journal-pager-title { display: block; margin-top: .4rem; font-size: 1.05rem; line-height: 1.35; }
.journal-pager-link:hover .journal-pager-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.journal-all { display: flex; width: fit-content; margin: clamp(2rem, 5vw, 3rem) auto 0; }
@media (max-width: 900px) {
  .journal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .journal-list { grid-template-columns: 1fr; }
  .journal-pager { grid-template-columns: 1fr; }
  .journal-pager-link.is-newer { grid-column: 1; text-align: left; }
  .journal-hero img { aspect-ratio: 16 / 9; }
}

/* Start: layout */
.enquiry-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem); align-items: start; }
.enquiry-aside { grid-column: 1 / 5; position: sticky; top: 7rem; }
.enquiry-form { grid-column: 6 / 13; }
.next-steps { margin-top: 1.25rem; border-bottom: 1px solid rgba(10, 10, 10, .15); }
.next-steps li { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(10, 10, 10, .15); line-height: 1.6; }
.next-steps span { color: var(--accent); font-weight: 700; font-size: .8rem; letter-spacing: .1em; padding-top: .15rem; }

/* Start: form */
.enquiry-form fieldset { border: 0; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0; min-width: 0; }
.enquiry-form legend {
  float: left; width: 100%; padding: .9rem 0 0; margin-bottom: 1.75rem;
  border-top: 2px solid var(--ink); color: var(--ink);
  font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
.enquiry-form legend + * { clear: both; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.field { display: block; margin-bottom: 1.5rem; }
.field > span, .field-label {
  display: block; color: var(--ink);
  font-size: .72rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
}
.field-label { margin: 1.75rem 0 .8rem; }
.field input, .field textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .6rem 0;
  border: 0; border-bottom: 1px solid rgba(10, 10, 10, .35); border-radius: 0;
  background: transparent; color: var(--ink);
  font: inherit; font-weight: 400; font-size: 1.05rem;
  transition: border-color .3s;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--graphite); opacity: .6; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }

/* Radio and checkbox options as selectable tags */
.choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-block; cursor: pointer;
  padding: .65rem 1.1rem; border: 1px solid rgba(10, 10, 10, .3);
  color: var(--ink); font-size: .88rem; line-height: 1.3;
  transition: background-color .3s, color .3s, border-color .3s;
}
.choice span:hover { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.follow-up { margin-top: 1.25rem; padding-left: 1.25rem; border-left: 1px solid rgba(10, 10, 10, .2); }
.field-hint { margin-top: .75rem; font-size: .88rem; line-height: 1.6; }
.field-hint.follow-up { padding-left: 0; border-left: 0; }
.choices + .field, .field-hint + .field, .follow-up + .field { margin-top: 1.75rem; }
.confirm { display: flex; gap: .85rem; align-items: flex-start; margin-top: 1rem; color: var(--ink); line-height: 1.6; cursor: pointer; }
.confirm input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .3rem; accent-color: var(--ink); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin-bottom: 1rem; color: var(--accent); font-weight: 400; }
.was-checked .field input:invalid, .was-checked .field textarea:invalid { border-bottom-color: var(--accent); }
.form-privacy { margin-top: 1.25rem; font-size: .82rem; }
.form-privacy a { border-bottom: 1px solid var(--accent); }

@media (max-width: 900px) {
  .package-price, .package-facts, .package-note, .enquiry-aside, .enquiry-form { grid-column: 1 / -1; }
  .package-note { margin-top: 0; }
  .package-facts { grid-row: auto; }
  .include-groups { grid-template-columns: 1fr 1fr; }
  .addon-groups { grid-template-columns: 1fr; }
  .enquiry-aside { position: static; }
  .needs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .needs-grid, .field-row, .include-groups { grid-template-columns: 1fr; }
}

/* ==========================================================
   About page
   ========================================================== */

/* Intro: lead left, portrait right, sitting on the baseline of the lead */
.about-intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
/* The lead starts just under the headline, then holds its place on screen as the page
   scrolls (sticky within the intro) until it settles level with the bottom of the photo */
.about-intro .page-lead {
  grid-column: 1 / 7; align-self: start;
  position: sticky; top: clamp(7rem, 40vh, 26rem);
}
.intro-photo { grid-column: 8 / 13; margin: 0; margin-top: calc(-1 * clamp(6rem, 14vw, 13rem)); }
.intro-photo { position: relative; }
.intro-photo img { width: 100%; filter: grayscale(1); }   /* all the photos of Joanne in the same neutral grey */

/* On laptops and desktops the whole intro fits on the first screen: the label row across the
   top, headline top left with the lead sitting at the bottom, level with the bottom of the photo,
   and the photo on the right starting level with the headline,
   sized to the screen height (cropped from the top so the face stays in frame) */
@media (min-width: 901px) {
  .about-hero {
    /* clear of the header (about 6.75rem) with real breathing room above the label row */
    --hero-top: calc(6.75rem + clamp(1.5rem, 6vh, 4rem)); --hero-bottom: clamp(2rem, 6vh, 4rem); --head-gap: clamp(1.5rem, 4vh, 2.5rem);
    padding-top: var(--hero-top); padding-bottom: var(--hero-bottom);
  }
  .about-hero > .wrap {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-rows: auto auto 1fr;
  }
  .about-hero .section-head { grid-column: 1 / -1; margin-bottom: var(--head-gap); }
  .about-hero h1 { grid-column: 1 / 8; grid-row: 2; }
  .about-hero .about-intro { display: contents; }
  .about-hero .about-intro .page-lead {
    grid-column: 1 / 7; grid-row: 3; align-self: end; position: static;
    margin-top: clamp(1rem, 3.5vh, 2.25rem); font-size: clamp(.95rem, min(1.7vw, 2.7vh), 1.65rem);
  }
  .about-hero .intro-photo { grid-column: 8 / 13; grid-row: 2 / 4; margin-top: 0; align-self: start; }
  .about-hero .intro-photo img {
    /* screen height minus the top spacing, the label row (about 3rem) and the bottom spacing */
    height: calc(100vh - var(--hero-top) - var(--head-gap) - var(--hero-bottom) - 3.5rem);
    height: calc(100svh - var(--hero-top) - var(--head-gap) - var(--hero-bottom) - 3.5rem);
    object-fit: cover; object-position: center 20%;
  }
}

/* A second photo of Joanne that cuts in over the first for thoughts that have their own photo */
.intro-photo .photo-swap {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  opacity: 0; pointer-events: none;   /* a straight cut, not a fade: fading two photos into each other looks blurred */
}
.about-hero .intro-photo img.photo-swap { height: 100%; }
.intro-photo .photo-swap.is-on { opacity: 1; }

/* A brief coffee spray for the decaf punchline; no lingering lens splats. */
.coffee-spray { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.coffee-spray .coffee-drop { fill: rgba(10, 10, 10, .6); }

/* Judgy thought bubble on the espresso photo */
.thought {
  position: absolute; left: 6%; top: 9%; z-index: 2; max-width: min(12.5rem, 44%);   /* narrow, so longer thoughts wrap down the left instead of covering her face */
  padding: .9rem 1.15rem; border-radius: 1.4rem;
  background: var(--paper); color: var(--ink);
  font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 500; line-height: 1.3;
  box-shadow: 0 18px 40px -18px rgba(10, 10, 10, .45);
  opacity: 0; transform: scale(.85) translateY(8px); transform-origin: 85% 110%;
  transition: opacity .3s var(--ease-soft), transform .35s var(--ease-soft);
  pointer-events: none;
}
/* Two trailing dots leading towards her eyes */
.thought::before, .thought::after {
  content: ''; position: absolute; border-radius: 50%; background: var(--paper);
  box-shadow: 0 6px 14px -6px rgba(10, 10, 10, .4);
}
.thought::before { width: 14px; height: 14px; right: 12%; bottom: -18px; }
.thought::after { width: 8px; height: 8px; right: 4%; bottom: -32px; }
.thought.is-showing { opacity: 1; transform: none; }

/* Headline role cycle: the light line rotates through Joanne's job titles */
/* Sized so the longest title ("Scarlett's chauffeur", about 11.4em) fits beside the photo
   on desktop and within the screen on phones, so the line never wraps as titles change */
.page-intro .has-roles { font-size: min(clamp(2.4rem, 6vw, 5.25rem), calc((100vw - 2 * var(--gutter)) / 11.8)); }
@media (min-width: 901px) {
  .page-intro .has-roles { font-size: min(clamp(2.4rem, 6vw, 5.25rem), calc((min(100vw, 84rem + 2 * var(--gutter)) - 2 * var(--gutter)) * .56 / 11.8)); }
}
.role-words { display: inline-grid; }
.role {
  grid-area: 1 / 1; opacity: 0; transform: translateY(.45em);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.role.is-current { opacity: 1; transform: none; }
.role.is-leaving { opacity: 0; transform: translateY(-.45em); }

/* Story */
.story-quote {
  grid-column: 1 / 6; margin: 0; padding-top: 1.25rem; border-top: 2px solid var(--ink);
  color: var(--ink); font-weight: 700; text-transform: uppercase; line-height: 1.2;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: .04em;
  align-self: start;
  /* Travels down beside the paragraphs (sticky within the story grid) */
  position: sticky; top: clamp(7rem, 30vh, 18rem);
  display: grid;
}
/* One statement, sticky: it travels down beside the paragraphs until the end of the story */
.quote-line { grid-area: 1 / 1; }
.story-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: end; margin-top: clamp(3rem, 7vw, 5.5rem);
}
.story-text { grid-column: 7 / 13; }
/* Generous space between paragraphs so the story breathes */
.story-text .lead { margin-bottom: clamp(2rem, 6vh, 4rem); }
.story-text p + p { margin-top: clamp(2rem, 6vh, 4rem); }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: clamp(2rem, 5vh, 3rem); }

/* The AI suggested / I said: a chat. AI bubbles on the left get struck through as they
   scroll in, then Joanne's reply pops in on the right */
.ai-list { max-width: 72rem; margin-top: clamp(3rem, 7vw, 5rem); display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }
/* Each exchange reads straight across: suggestion in the left column, reply in the right */
.ai-row {
  /* Left column wide enough for the longest suggestion on one line; replies line up to its right */
  display: grid; grid-template-columns: minmax(0, 43rem) minmax(16rem, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
}
.ai-said, .me-said {
  justify-self: start; max-width: 100%; padding: 1rem 1.35rem 1.1rem;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.35;
}
.ai-said {
  color: var(--paper); font-weight: 400;
  background: rgba(255, 255, 255, .1); border-radius: 1.25rem 1.25rem 1.25rem .3rem;
}
/* Strike drawn as a background on each line of text, so wrapped suggestions are struck through properly */
.ai-said s {
  text-decoration: none;
  background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) no-repeat left 56% / 100% 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .7s var(--ease) calc(var(--rv-delay, 0s) + .35s);
}
.me-said {
  color: var(--ink); font-weight: 700; background: var(--paper);
  border-radius: 1.25rem 1.25rem 1.25rem .3rem; transform-origin: left center;
  transition: opacity .5s var(--ease-soft) calc(var(--rv-delay, 0s) + 1s), transform .5s var(--ease-soft) calc(var(--rv-delay, 0s) + 1s);
}
.ai-tag {
  display: block; margin-bottom: .35rem;
  font-size: .6rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; opacity: .6;
}
.ai-row.rv:not(.rv-in) .ai-said s { background-size: 0 1px; }
.ai-row.rv:not(.rv-in) .me-said { opacity: 0; transform: scale(.85); }

/* A day in the life: a horizontal timeline, scrolled sideways (arrows on desktop, swipe on phones) */
.day-scroller {
  margin-top: clamp(3rem, 7vw, 5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
          mask-image: linear-gradient(to right, #000 85%, transparent);
}
.day-list { display: flex; gap: clamp(1.25rem, 2.5vw, 2rem); padding: .5rem 0 1.5rem; }
.day-list li {
  position: relative; flex: 0 0 clamp(13rem, 21vw, 17rem); scroll-snap-align: start;
  padding-top: 1.5rem; border-top: 2px solid var(--ink);
}
.day-list li::before {
  content: ''; position: absolute; left: 0; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
}
.day-time {
  display: block; margin-bottom: .75rem; color: var(--ink); font-weight: 700; line-height: 1;
  font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: .02em;
}
.day-list p { font-size: 1rem; line-height: 1.6; }
.day-nav { display: flex; gap: .75rem; margin-top: 1.25rem; }
.day-nav[hidden] { display: none; }
.day-nav button {
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer;
  transition: background-color .3s, color .3s, opacity .3s;
}
.day-nav button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.day-nav button:disabled { opacity: .3; cursor: default; }

/* The honest stats (count up as they appear) */
.honest-stats { background: var(--accent); color: var(--paper); padding: var(--section-y) var(--gutter); }
.honest-stats .section-head { color: var(--paper); }
.honest-stats .section-head span:last-child { color: inherit; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.stat { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .35); }
.stat-num { display: block; font-weight: 700; line-height: .9; font-size: clamp(4rem, 9vw, 8rem); }
/* Stat footnotes: a small asterisk on the number, the note under the label */
.stat-figure { display: flex; align-items: flex-start; }
.stat-star { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.75rem); line-height: 1; margin-left: .1em; }
.stat-note { display: block; margin-top: .6rem; font-size: .8rem; line-height: 1.5; opacity: .75; }
.stat-label {
  display: block; margin-top: 1rem; max-width: 14rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .8; line-height: 1.6;
}

/* Meet Scarlett */
.scarlett-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: end; margin-top: clamp(3rem, 7vw, 5.5rem);
}
.scarlett-photo { grid-column: 1 / 5; max-width: 26rem; margin: 0; }
.scarlett-photo { position: relative; }
.scarlett-photo img { width: 100%; }
/* Paw-print cursor anywhere in Scarlett's section on the About page (back to normal once you
   scroll past it), and over her photo on the 404 page */
.scarlett, .scarlett *, .notfound-photo { cursor: url("../images/paw-cursor.svg") 16 16, auto; }
.scarlett a, .scarlett button { cursor: url("../images/paw-cursor.svg") 16 16, pointer; }
/* Walk swap (enabled by script.js once scarlett-walk.webp exists) */
.scarlett-walk {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 470 / 590; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.scarlett-main { transition: opacity .45s var(--ease-soft); }
.scarlett-photo.is-walking .scarlett-walk { opacity: 1; }
.scarlett-photo.is-walking .scarlett-main { opacity: 0; }
.scarlett-photo .walk-pill { text-align: center; }
.scarlett-photo .walk-pill { position: absolute; left: clamp(.75rem, 2vw, 1.25rem); bottom: calc(clamp(.75rem, 2vw, 1.25rem) + 2rem); }
/* Once the walk swap is on, the hint label replaces the caption */
.scarlett-photo.can-walk figcaption { visibility: hidden; }
.scarlett-photo figcaption {
  margin-top: .9rem; color: var(--ink);
  font-size: .68rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
.role-list { grid-column: 6 / 13; border-bottom: 1px solid rgba(10, 10, 10, .15); }
.role-list li { padding: 1.25rem 0; border-top: 1px solid rgba(10, 10, 10, .15); }
.role-title {
  margin-bottom: .4rem; color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: .9rem; letter-spacing: .18em;
}

/* Don't hire me if: big Paper cards in a staggered grid on Graphite */
.dont-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(3rem, 7vw, 5rem); align-items: start;
}
.dont-grid li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  min-height: clamp(12rem, 18vw, 16rem); padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--paper);
}
.dont-grid li:nth-child(3n + 2) { margin-top: clamp(2rem, 6vw, 5rem); }
.dont-grid li:nth-child(3n) { margin-top: clamp(1rem, 3vw, 2.5rem); }
.dont-if { color: var(--ink); font-weight: 700; line-height: 1.2; font-size: clamp(1.25rem, 2.2vw, 1.85rem); }
.dont-aside { color: var(--graphite); }
/* Legal-style small print under the cards */
.dont-small-print {
  margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--paper); opacity: .6;
  font-size: .72rem; letter-spacing: .02em; font-style: italic;
}

/* Example site call to action: live preview in a browser frame */
.example-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.example-text { grid-column: 1 / 6; }
/* Sized so each headline line stays on one line in the narrower column */
.example .display { font-size: clamp(1.9rem, 3vw, 2.9rem); }
.example-text .lead { margin: 1.75rem 0 2.25rem; }
.browser-frame {
  grid-column: 6 / 13; display: block; overflow: hidden;
  background: var(--paper); border: 1px solid rgba(10, 10, 10, .12); border-radius: 10px;
  box-shadow: 0 40px 70px -40px rgba(10, 10, 10, .45);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.browser-frame:hover, .browser-frame.rv-in:hover { transform: translateY(-4px); box-shadow: 0 50px 80px -40px rgba(10, 10, 10, .5); }
.browser-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: #E9E6E0; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(10, 10, 10, .18); }
.browser-bar span {
  flex: 1; max-width: 20rem; margin-left: .75rem; padding: .25rem .9rem; border-radius: 999px;
  background: var(--paper); color: var(--graphite); font-size: .7rem; line-height: 1.6; white-space: nowrap; overflow: hidden;
}
.browser-view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #F7F3EE; }
.browser-view iframe {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0;
  pointer-events: none; transform-origin: 0 0;
  transition: translate 9s cubic-bezier(.45, 0, .55, 1);
}

.cta-belief { max-width: 32rem; margin-bottom: 1.75rem; opacity: .75; }

@media (max-width: 900px) {
  .story-quote, .story-text, .scarlett-photo, .role-list, .example-text, .browser-frame,
  .about-intro .page-lead, .intro-photo { grid-column: 1 / -1; }
  .intro-photo { margin-top: 0; max-width: 30rem; }
  .about-intro .page-lead { position: static; }
  .story-quote { position: static; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dont-grid { grid-template-columns: 1fr 1fr; }
  .dont-grid li:nth-child(n) { margin-top: 0; }
  .dont-grid li:nth-child(2n) { margin-top: clamp(2rem, 6vw, 4rem); }
}
@media (max-width: 680px) {
  .dont-grid { grid-template-columns: 1fr; }
  .ai-list { gap: 2rem; }
  .ai-row { grid-template-columns: 1fr; gap: .6rem; }
  .ai-said { max-width: 88%; }
  .me-said { justify-self: end; max-width: 80%; border-radius: 1.25rem 1.25rem .3rem 1.25rem; transform-origin: right bottom; }
  .dont-grid li { margin-top: 0 !important; min-height: 0; }
}

/* 404: Scarlett ate this page. Fills one screen, no scrolling (the page has no footer) */
.notfound {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-top: clamp(6.5rem, 14vh, 8.5rem); padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
}
.notfound .wrap { width: 100%; }
.notfound .section-head { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.notfound-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem); align-items: end;
}
.notfound-text { grid-column: 1 / 9; }
.notfound .display { font-size: clamp(2rem, 4.4vw, 4rem); }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.notfound-photo { grid-column: 9 / 13; margin: 0; max-width: 24rem; justify-self: end; }
.notfound-photo img { width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 15rem); }
.notfound-photo figcaption {
  margin-top: .9rem; color: var(--ink);
  font-size: .68rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
@media (max-width: 900px) {
  /* Phones: Scarlett sits beside the buttons so it all fits on one screen */
  .notfound-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: end; }
  .notfound-text { display: contents; }
  .notfound-text > * { grid-column: 1 / -1; }
  .notfound .page-lead { margin-top: 1.25rem; }
  .notfound-actions { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-top: 1.75rem; }
  .notfound-photo { grid-column: 2; width: clamp(6.5rem, 28vw, 10rem); justify-self: end; }
  .notfound-actions .btn, .notfound-actions .link-text { white-space: nowrap; }
  .notfound-photo img { width: 100%; max-height: none; }
  .notfound-photo figcaption { font-size: .6rem; }
}

/* ---------- How it works ---------- */
/* The process: three steps in a row on one fine line, each step's top border plus a bridge
   across the gap, with a small Oxblood dot where each step starts */
.process-list {
  --gap: clamp(2rem, 4vw, 3.5rem);
  --line: rgba(10, 10, 10, .28);
  --num-size: clamp(4.5rem, 8vw, 7.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.process-step { position: relative; padding-top: 2rem; border-top: 1px solid var(--line); }
.process-step::before {
  content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.process-step:not(:last-child)::after {
  content: ''; position: absolute; top: -1px; left: 100%; width: var(--gap); height: 1px; background: var(--line);
}
/* Top of each step: giant number on the left, the timing hard right, both just above the picture
   (the number tucks behind it) */
.process-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.process-stage {
  padding-bottom: calc(.2 * var(--num-size) + .9rem); color: var(--graphite); text-align: right;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
/* The picture rides up over the bottom fifth of the giant number */
.process-media { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 3 / 2; margin-top: calc(-.2 * var(--num-size)); }
.process-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: scale 1.2s var(--ease-soft); }
.process-media img.focus-face { object-position: center 30%; }
.process-step:hover .process-media img { scale: 1.04; }
.process-num {
  /* Giant number tucked behind the top of the picture, as on the home page steps */
  display: block; position: relative; z-index: 0;
  color: var(--accent); font-weight: 700; font-size: var(--num-size); line-height: .8; letter-spacing: .01em;
}
.process-title {
  margin-top: 1.4rem; color: var(--ink); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.3vw, 1.15rem); letter-spacing: .12em; line-height: 1.3;
}
.process-meta { margin-top: .5rem; color: var(--graphite); font-size: .78rem; letter-spacing: .02em; }
.process-desc { margin-top: 1rem; color: var(--graphite); font-size: .95rem; line-height: 1.7; }
/* Placeholder tone until the step photos arrive */
.process-ph { background: linear-gradient(160deg, #EFECE7 0%, #E1DDD6 100%); }
/* ---------- Mini mockups in the three steps (decorative, CSS only) ----------
   Sized in cqw so they scale with their box. They loop while the step is revealed
   (they wait for .rv-in when script.js adds reveals) and show their finished state
   with reduced motion. */
/* How it works: the process as a feature switcher */
.flow {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: center; margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.flow-steps { grid-column: 1 / 6; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.flow-item { position: relative; border-top: 1px solid var(--line); }
.flow-btn {
  position: relative; display: grid; grid-template-columns: clamp(2.75rem, 4vw, 4rem) 1fr auto; align-items: baseline; gap: 1rem;
  width: 100%; padding: clamp(1.25rem, 2.4vw, 1.75rem) 0; border: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.flow-num { color: var(--accent); font-size: clamp(1.4rem, 2.3vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.flow-title {
  font-size: clamp(1rem, 1.5vw, 1.55rem); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.15;
  white-space: nowrap;   /* each title stays on one line */
  opacity: .3; transition: opacity .5s var(--ease-soft);
}
.flow-when { color: var(--graphite); font-size: .68rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
.flow-item.is-active .flow-title, .flow-btn:hover .flow-title, .flow-btn:focus-visible .flow-title { opacity: 1; }
/* the line that fills under the open step while it's showing */
.flow-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: 2px; background: var(--accent);
  transform-origin: left; scale: 0 1;
}
.flow-item.is-active::after { animation: flow-fill var(--flow-time, 7s) linear forwards; }
.flow.is-paused .flow-item.is-active::after { animation-play-state: paused; }
@keyframes flow-fill { to { scale: 1 1; } }
.flow-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-soft); }
.flow-more > div { overflow: hidden; padding-left: calc(clamp(2.75rem, 4vw, 4rem) + 1rem); }
.flow-item.is-active .flow-more { grid-template-rows: 1fr; }
.flow-who { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.flow-desc { margin: .6rem 0 1.75rem; max-width: 30rem; color: var(--graphite); line-height: 1.7; }
.flow-stage {
  grid-column: 7 / 13; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: clamp(.75rem, 1.2vw, 1.1rem); background: var(--ivory); transform: translateZ(0);
}
.flow-stage .mock { position: absolute; inset: 0; opacity: 0; scale: .97; transition: opacity .6s var(--ease-soft), scale .9s var(--ease-soft); }
.flow-stage .mock.is-on { opacity: 1; scale: 1; }
@media (max-width: 900px) {
  .flow-steps, .flow-stage { grid-column: 1 / -1; }
  .flow-stage { order: -1; }
  .flow-when { display: none; }
}
@media (prefers-reduced-motion: reduce) { .flow-item.is-active::after { animation: none; scale: 1 1; } }

.mock { container-type: inline-size; display: flex; align-items: center; justify-content: center; background: var(--ivory); }
.mock *, .mock *::before, .mock *::after { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: var(--ease-soft); }
.process-step.rv:not(.rv-in) .mock *, .process-step.rv:not(.rv-in) .mock *::after { animation-play-state: paused; }
.mock-dots { display: flex; align-items: center; gap: 1.2cqw; height: 6cqw; padding: 0 3cqw; }
.mock-dots i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(10, 10, 10, .2); }

/* 01: the form */
.mock-card {
  display: flex; flex-direction: column; gap: 3cqw; width: 66%; padding: 5cqw 6cqw;
  background: var(--paper); box-shadow: 0 3cqw 7cqw -3cqw rgba(10, 10, 10, .25);
}
.mock-label { color: var(--ink); font-size: 2.6cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.mock-field { display: flex; align-items: flex-end; min-height: 6cqw; padding-bottom: 1cqw; border-bottom: 1px solid rgba(10, 10, 10, .25); }
.mock-type { display: inline-block; color: var(--ink); font-size: 3.2cqw; line-height: 1.3; white-space: nowrap; animation-timing-function: steps(18); }
.mock-t1 { animation-name: mock-type1; }
.mock-t2 { animation-name: mock-type2; }
.mock-t3 { animation-name: mock-type3; }
@keyframes mock-type1 { 0% { clip-path: inset(0 100% 0 0); } 14%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes mock-type2 { 0%, 16% { clip-path: inset(0 100% 0 0); } 32%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes mock-type3 { 0%, 34% { clip-path: inset(0 100% 0 0); } 50%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.mock-send {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 1.5cqw; margin-top: 1cqw; padding: 2cqw 4cqw;
  background: var(--ink); color: var(--paper); font-size: 2.4cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  animation-name: mock-send;
}
@keyframes mock-send { 0%, 56% { background: var(--ink); scale: 1; } 59% { scale: .92; } 62%, 92% { background: var(--accent); scale: 1; } 100% { background: var(--ink); } }
.mock-tick { display: inline-block; animation-name: mock-tick; }
@keyframes mock-tick { 0%, 60% { opacity: 0; translate: 0 1cqw; } 66%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* 02: code that turns into a page */
.mock-code { background: var(--ivory); }
.mock-window {
  position: relative; display: flex; flex-direction: column; gap: 2.4cqw; width: 78%; height: 74%; overflow: hidden;
  background: var(--ink); box-shadow: 0 3cqw 7cqw -3cqw rgba(10, 10, 10, .45);
}
.mock-window .mock-dots i { background: rgba(255, 255, 255, .25); }
.mock-line {
  display: block; height: 1.6cqw; margin-left: 5cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .55);
  transform-origin: left; animation-name: mock-code;
}
.mock-line:nth-child(2) { width: 34%; background: var(--accent); }
.mock-line:nth-child(3) { width: 52%; margin-left: 9cqw; animation-delay: .25s; }
.mock-line:nth-child(4) { width: 40%; margin-left: 13cqw; background: rgba(255, 255, 255, .35); animation-delay: .5s; }
.mock-line:nth-child(5) { width: 58%; margin-left: 13cqw; animation-delay: .75s; }
.mock-line:nth-child(6) { width: 30%; margin-left: 9cqw; background: var(--accent); animation-delay: 1s; }
.mock-line:nth-child(7) { width: 46%; margin-left: 9cqw; background: rgba(255, 255, 255, .35); animation-delay: 1.25s; }
.mock-line:nth-child(8) { width: 22%; animation-delay: 1.5s; }
@keyframes mock-code { 0%, 4% { transform: scaleX(0); } 16%, 100% { transform: scaleX(1); } }
.mock-page {
  position: absolute; inset: 6cqw 0 0; display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw 6cqw;
  background: var(--paper); opacity: 0; animation-name: mock-page;
}
@keyframes mock-page { 0%, 50% { opacity: 0; translate: 0 6cqw; } 60%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
.mock-page-nav { display: block; height: 1.2cqw; width: 30%; margin: 0 auto 1cqw; background: rgba(10, 10, 10, .25); }
.mock-page-head { display: block; height: 3cqw; width: 70%; background: var(--ink); }
.mock-page-head.mock-short { width: 45%; background: rgba(10, 10, 10, .35); }
.mock-page-img { display: block; flex: 1; background: linear-gradient(160deg, #E4E0D9, #CFCAC1); }
.mock-page-btn { display: block; height: 3.2cqw; width: 22%; background: var(--accent); }

/* 03: publish and go live */
.mock-launch { position: relative; }
.mock-browser {
  position: relative; display: flex; flex-direction: column; gap: 2.4cqw; width: 78%; height: 74%; padding-bottom: 4cqw;
  background: var(--paper); box-shadow: 0 3cqw 7cqw -3cqw rgba(10, 10, 10, .3);
}
.mock-browser .mock-dots { background: #E9E6E0; }
.mock-browser .mock-page-head { margin-left: 6cqw; margin-top: 2cqw; }
.mock-browser .mock-page-head.mock-short { margin-top: 0; }
.mock-text { display: block; height: 1.4cqw; width: 60%; margin-left: 6cqw; background: rgba(10, 10, 10, .15); }
.mock-text.mock-short { width: 40%; }
.mock-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 1cqw; padding: .6cqw 2cqw; border-radius: 99px;
  background: var(--accent); color: var(--paper); font-size: 2cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  animation-name: mock-live;
}
.mock-live::before { content: ''; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--paper); }
@keyframes mock-live { 0%, 48% { opacity: 0; scale: .4; } 54% { opacity: 1; scale: 1.15; } 58%, 90% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
.mock-publish {
  position: absolute; right: 5cqw; bottom: 4cqw; padding: 1.8cqw 3.6cqw; border-radius: 99px;
  background: var(--ink); color: var(--paper); font-size: 2.2cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  animation-name: mock-publish;
}
@keyframes mock-publish { 0%, 42% { scale: 1; background: var(--ink); } 45% { scale: .9; } 48%, 90% { scale: 1; background: var(--accent); } 100% { background: var(--ink); } }
/* Arrow cursor drawn with a clip-path */
.mock-cursor {
  position: absolute; left: 72%; top: 70%; width: 4cqw; height: 5.6cqw; background: var(--ink);
  clip-path: polygon(0 0, 0 78%, 24% 60%, 42% 100%, 56% 94%, 38% 56%, 70% 56%);
  animation-name: mock-cursor;
}
@keyframes mock-cursor {
  0%, 10% { left: 30%; top: 92%; opacity: 0; }
  16% { opacity: 1; }
  40%, 92% { left: 72%; top: 70%; opacity: 1; }
  43% { scale: .85; } 47% { scale: 1; }
  100% { left: 72%; top: 70%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mock *, .mock *::before, .mock *::after { animation: none !important; }
  .mock-page { opacity: 1; }
}

.process-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 44rem; color: var(--graphite); font-size: .85rem; line-height: 1.6;
}

/* Sites gallery: large clean screenshots, one at a time, the next peeking in at the right.
   Without script it's a sideways-scrolling row; script.js adds .is-gallery and positions each card */
.sites {
  --site-w: min(calc(100vw - 2 * var(--gutter) - 6rem), 40rem);
  --site-gap: clamp(1.25rem, 3vw, 2.5rem);
  --site-left: max(var(--gutter), calc((100% - 84rem) / 2));
  position: relative; margin: clamp(3rem, 7vw, 5rem) calc(-1 * var(--gutter)) 0;
  overflow-x: auto; scrollbar-width: none;
}
.sites::-webkit-scrollbar { display: none; }
.sites-track { display: flex; gap: var(--site-gap); width: max-content; padding: 0 var(--gutter); }
.site-card { width: var(--site-w); flex: none; }
.site-link { position: relative; display: block; overflow: hidden; border-radius: clamp(.75rem, 1.2vw, 1.1rem); transform: translateZ(0); }   /* same corners as the Work page cards */
.site-link .site-shot { transition: scale 1.2s var(--ease-soft); }
.site-link:hover .site-shot { scale: 1.04; }
/* Name and industry over a soft Ink fade, as on the home page work tiles */
.site-link::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .4) 32%, rgba(10, 10, 10, 0) 60%);
}
.site-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: clamp(1.1rem, 2vw, 1.75rem); }
.site-meta { color: var(--paper); opacity: .8; font-size: .65rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.site-title {
  margin-top: .4rem; color: var(--paper); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: .1em; line-height: 1.2;
}
/* Faint white "View project" button in the top corner; firms up on hover and the arrow nudges */
.site-cta {
  position: absolute; right: 0; top: 0; z-index: 3;
  background: rgba(255, 255, 255, .18); color: var(--paper);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .65rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: .95rem 1.3rem .95rem 1.4rem;
  transition: background-color .4s var(--ease-soft), color .4s var(--ease-soft);
}
.site-cta .arrow { display: inline-block; margin-left: .5rem; letter-spacing: 0; transition: transform .5s var(--ease-soft); }
.site-link:hover .site-cta { background: rgba(255, 255, 255, .92); color: var(--ink); }
.site-link:hover .site-cta .arrow { transform: translateX(.3rem); }
.site-shot {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7);
}
/* Focus points for tall images cropped into the wide frame */
.site-shot.focus-mid { object-position: center 40%; }
.site-shot.focus-low { object-position: center 62%; }
/* Placeholder until the screenshots arrive */
.site-ph {
  display: flex; align-items: flex-end; padding: 1.25rem;
  background: linear-gradient(160deg, #EDEAE4 0%, #D9D5CE 100%);
}
.site-ph span { color: var(--graphite); font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; line-height: 1.6; }

/* Gallery mode */
.sites.is-gallery { overflow: hidden; aspect-ratio: auto; height: calc(var(--site-w) * .625 + 2px); }
.sites.is-gallery .sites-track { display: block; padding: 0; width: auto; height: 100%; }
.sites.is-gallery .site-card {
  position: absolute; top: 0; left: var(--site-left);
  transform: translateX(calc(var(--offset, 0) * (var(--site-w) + var(--site-gap))));
  opacity: .35; transition: transform 1.4s cubic-bezier(.7, 0, .2, 1), opacity 1.4s var(--ease-soft);
}
.sites.is-gallery .site-card.is-current { opacity: 1; }
.sites.is-gallery .site-card.is-gone { opacity: 0; }
.sites.is-gallery .site-card.no-glide { transition: none; }
.sites.is-gallery .site-card:not(.is-current) .site-link { pointer-events: none; }

/* Counter, name, progress line and arrows under the gallery */
.sites-meta {
  display: grid; grid-template-columns: auto minmax(0, 24rem) auto; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.sites-count { color: var(--paper); font-weight: 300; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: .9; letter-spacing: .02em; white-space: nowrap; }
.sites-now { font-weight: 700; }
.sites-progress { display: block; height: 1px; background: rgba(255, 255, 255, .2); }
.sites-progress span { display: block; height: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.sites-meta.is-running .sites-progress span { animation: sites-progress var(--site-time, 6s) linear forwards; }
.sites:hover ~ .sites-meta .sites-progress span, .sites-meta:hover .sites-progress span { animation-play-state: paused; }
@keyframes sites-progress { to { transform: scaleX(1); } }
.sites-nav { margin-top: 0; }
.sites-nav button { border-color: var(--paper); color: var(--paper); }
.sites-nav button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.sites-caption {
  margin-top: 1.75rem; color: var(--paper); opacity: .75;
  font-size: .7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
.sites-caption + .wrap { margin-top: clamp(1rem, 3vw, 2rem); }
@media (max-width: 600px) {
  .sites { --site-w: calc(100vw - 2 * var(--gutter) - 2.5rem); }
  .sites-meta { grid-template-columns: 1fr auto; grid-template-areas: "count nav" "line line"; }
  .sites-count { grid-area: count; }
  .sites-nav { grid-area: nav; }
  .sites-progress { grid-area: line; }
  .site-cta { padding: .7rem .9rem; font-size: .55rem; }
}

/* Who does what: AI column quiet, Joanne's column bold */
.who-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.who-ai { grid-column: 1 / 6; }
.who-me { grid-column: 7 / 13; }
.who-col { border-top: 2px solid var(--paper); padding-top: 1.5rem; }
.who-ai { border-top-color: rgba(255, 255, 255, .35); }
.who-count { display: flex; align-items: baseline; gap: .6rem; color: var(--paper); font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.who-count span { font-size: clamp(3.5rem, 7vw, 6rem); line-height: .9; letter-spacing: 0; }
.who-ai .who-count { opacity: .45; }
.who-title { margin-top: 1rem; color: var(--paper); font-size: .78rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.who-list { margin-top: 1.5rem; }
.who-list li { padding: .85rem 0; border-top: 1px solid rgba(255, 255, 255, .15); color: var(--paper); line-height: 1.4; }
.who-ai .who-list li { opacity: .6; font-weight: 300; }
.who-me .who-list li { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

/* Why custom code: the rent (bills struck through, then $0) beside the speed race */
.why-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: start; margin-top: clamp(3rem, 7vw, 5rem);
}
.bills { grid-column: 1 / 7; }
.race { grid-column: 8 / 13; }
.why-sub { margin-bottom: 1.25rem; color: var(--paper); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.bill-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  padding: 1.1rem 0; border-top: 1px solid rgba(255, 255, 255, .25);
  color: var(--paper); font-size: clamp(1.1rem, 2vw, 1.6rem);
}
.bill-item { font-weight: 300; }
.bill-price { position: relative; font-weight: 700; white-space: nowrap; }
.bill-price::after {
  content: ''; position: absolute; left: -.2em; right: -.2em; top: 52%; height: 2px; background: var(--paper);
  transform: scaleX(1); transform-origin: left; transition: transform .6s var(--ease) calc(var(--rv-delay, 0s) + .7s);
}
.bill-list li.rv:not(.rv-in) .bill-price::after { transform: scaleX(0); }
.bill-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; padding-top: 1.5rem; border-top: 2px solid var(--paper); }
.bill-zero { color: var(--paper); font-weight: 700; font-size: clamp(4rem, 11vw, 9rem); line-height: .9; }
.bill-zero-label { color: var(--paper); font-size: clamp(1rem, 1.6vw, 1.3rem); }
.bill-note { margin-top: 1.5rem; color: var(--paper); opacity: .6; font-size: .75rem; }

/* Speed race: bars fill in real time (4.2s vs 0.8s) each time it scrolls into view */
.race-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: .9rem 1.5rem; align-items: center;
  padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, .25);
}
.race-label { grid-column: 1 / -1; color: var(--paper); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.race-track { display: block; height: .75rem; background: rgba(255, 255, 255, .15); }
.race-track span { display: block; height: 100%; width: 0; background: var(--paper); }
.race-slow .race-track span { background: rgba(255, 255, 255, .5); }
.race.is-racing .race-slow .race-track span { width: 100%; transition: width 4.2s linear; }
.race.is-racing .race-fast .race-track span { width: 100%; transition: width .8s var(--ease-soft); }
.race-time { color: var(--paper); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 2rem); text-align: right; }
.race-note { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .25); max-width: 40rem; color: var(--paper); opacity: .85; }

@media (max-width: 900px) {
  .bills, .race { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bill-list li { font-size: 1rem; }
}

/* What I need: each box ticks itself when it scrolls in */
.need-list { margin-top: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid rgba(10, 10, 10, .15); }
.need-list li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: 1.35rem 0; border-top: 1px solid rgba(10, 10, 10, .15);
}
.need-box { position: relative; width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--ink); }
.need-box::after {
  content: ''; position: absolute; left: .42rem; top: .12rem; width: .45rem; height: .85rem;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(1);
  transition: transform .4s var(--ease) calc(var(--rv-delay, 0s) + .5s);
}
.need-list li.rv:not(.rv-in) .need-box::after { transform: rotate(45deg) scale(0); }
.need-title { color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: .05em; }
.need-list p { color: var(--graphite); }
.need-links { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 900px) {
  /* Phones and tablets: one column; each step keeps its line and dot along the top */
  .process-list { grid-template-columns: 1fr; row-gap: 3rem; }
  .process-step::after { display: none; }
  .who-ai, .who-me { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .need-list li { grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; }
  .need-list li p { grid-column: 2; }
}

/* ---------- Work ---------- */
.work-intro {
  position: relative; isolation: isolate; min-height: 44rem; height: 100svh;
  padding: calc(6.75rem + clamp(1.5rem, 4svh, 3rem)) var(--gutter) clamp(2rem, 5svh, 4rem);
  overflow: hidden; background: var(--ink);
}
.work-intro-photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.work-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.work-intro::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,10,.72), rgba(10,10,10,.18) 75%), linear-gradient(0deg, rgba(10,10,10,.8), transparent 60%);
}
.work-cover { height: 100%; display: flex; flex-direction: column; max-width: 84rem; }
.work-cover-label { display: flex; justify-content: space-between; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.5); font-size: .65rem; font-weight: 400; letter-spacing: .25em; text-transform: uppercase; color: var(--paper); }
.work-intro .display { margin-block: auto; padding-block: 1.5rem; font-size: clamp(3.5rem, min(10vw, 15svh), 10rem); line-height: .88; letter-spacing: -.025em; }
.work-intro .display .line-bold { font-size: 1em; letter-spacing: -.025em; }
.work-intro .display .line-light { margin-top: .1em; font-size: 1em; letter-spacing: .01em; }
.work-cover-bottom { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: end; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.35); color: var(--paper); }
.work-cover-bottom > p:first-child { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; }
.work-cover-bottom .link-arrow { color: var(--paper); justify-self: center; }
.work-cover-bottom .link-text { background-image: linear-gradient(var(--paper),var(--paper)); }
.work-cover-credit { font-size: .6rem; line-height: 1.8; letter-spacing: .2em; text-transform: uppercase; }
.work-cover-credit span { display: block; }
.work-cover-credit span:first-child { margin-top: .5rem; font-size: .85rem; font-weight: 700; letter-spacing: .1em; }
#portfolio { scroll-margin-top: 7rem; }
@media (min-width: 901px) and (max-height: 720px) { .work-intro { min-height: 34rem; } }

/* Call to action between the intro and the portfolio */
.invite-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); align-items: end; }
.invite-grid .display { grid-column: 1 / 7; }
.invite-text { grid-column: 8 / 13; text-align: left; }
.invite-text .lead { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: 1.75rem; }

@media (max-width: 900px) {
  .work-intro { min-height: 38rem; height: 100svh; }
  .work-cover-label { font-size: .55rem; letter-spacing: .18em; }
  .work-cover-label span:last-child { text-align: right; }
  .work-cover-bottom { grid-template-columns: 1fr auto; gap: 1.5rem; }
  .work-cover-bottom .link-arrow { justify-self: end; font-size: .6rem; gap: .75rem; }
  .work-cover-credit { grid-column: 1 / -1; }
  .work-cover-credit span { display: inline; margin-left: .75rem; }
  .work-cover-credit span:first-child { font-size: .65rem; }
  .invite-grid .display, .invite-text { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .work-cover-bottom { grid-template-columns: 1fr; } .work-cover-bottom .link-arrow { justify-self: start; } }

/* Portfolio grid: two columns of large rounded cards; small service line and a big light
   name that rolls up letter by letter on hover (script.js initRollText) */
/* Heading above the grid: label row and a small count */
.pf-head { max-width: 84rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: left; }
.pf-head .section-head { margin-bottom: 1.25rem; }
.pf-count { color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.pf-count span { color: var(--accent); }

/* Grid: two columns of equal cards, wider than tall, softly rounded */
.pf-section { background: var(--paper); padding: var(--section-y) var(--gutter); }
.pf-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.75rem);
  max-width: 84rem; margin: 0 auto;
}
.pf-link { display: block; color: var(--ink); text-align: left; }
.pf-media {
  position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; border-radius: clamp(.75rem, 1.2vw, 1.1rem);
  background: #EDEAE4; transform: translateZ(0);
}
.pf-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: scale 1.4s var(--ease-soft); }
.pf-media img.focus-low { object-position: center 65%; }
/* The brief: a full-colour panel wipes up over the image on hover, focus, or first tap on touch
   screens (.show-brief, script.js). Colours rotate so no two neighbours match, across or down */
.pf-brief {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.9rem); text-align: left;
  background: var(--accent); color: var(--paper);
  clip-path: inset(100% 0 0 0); transition: clip-path .75s var(--ease);
}
.pf-card:nth-child(4n + 2) .pf-brief { background: var(--ivory); color: var(--ink); }
.pf-card:nth-child(4n + 3) .pf-brief { background: var(--graphite); color: var(--paper); }
.pf-card:nth-child(4n + 4) .pf-brief { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .14); }
.pf-brief > span { opacity: 0; translate: 0 .9rem; transition: opacity .5s var(--ease-soft), translate .7s var(--ease); }
.pf-brief-ind { font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.pf-brief-name {
  margin-top: auto; font-weight: 300; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05;
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
}
.pf-brief-name::after { content: ''; display: block; width: 2.5rem; height: 2px; margin-top: .9rem; background: currentColor; }
.pf-brief-text { margin-top: .9rem; font-size: clamp(.85rem, 1vw, .95rem); line-height: 1.6; max-width: 26rem; }
.pf-brief-more { margin-top: 1.1rem; font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
/* Oxblood labels on the light panels */
.pf-card:nth-child(4n + 2) .pf-brief-ind, .pf-card:nth-child(4n + 4) .pf-brief-ind,
.pf-card:nth-child(4n + 2) .pf-brief-more, .pf-card:nth-child(4n + 4) .pf-brief-more { color: var(--accent); opacity: 1; }
.pf-link:hover .pf-brief, .pf-link:focus-visible .pf-brief, .pf-link.show-brief .pf-brief { clip-path: inset(0); }
.pf-link:hover .pf-brief > span, .pf-link:focus-visible .pf-brief > span, .pf-link.show-brief .pf-brief > span { opacity: 1; translate: 0 0; }
.pf-link:hover .pf-brief > span:nth-child(1), .pf-link:focus-visible .pf-brief > span:nth-child(1), .pf-link.show-brief .pf-brief > span:nth-child(1) { transition-delay: .2s; opacity: .8; }
.pf-link:hover .pf-brief > span:nth-child(2), .pf-link:focus-visible .pf-brief > span:nth-child(2), .pf-link.show-brief .pf-brief > span:nth-child(2) { transition-delay: .28s; }
.pf-link:hover .pf-brief > span:nth-child(3), .pf-link:focus-visible .pf-brief > span:nth-child(3), .pf-link.show-brief .pf-brief > span:nth-child(3) { transition-delay: .36s; }
.pf-link:hover .pf-brief > span:nth-child(4), .pf-link:focus-visible .pf-brief > span:nth-child(4), .pf-link.show-brief .pf-brief > span:nth-child(4) { transition-delay: .44s; }
.pf-link:hover .pf-media img, .pf-link:focus-visible .pf-media img { scale: 1.05; }
.pf-word {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  padding: 2rem; background: var(--ink); text-align: center;
}
.pf-word span { color: var(--paper); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; line-height: 1.1; font-size: clamp(1.4rem, 3vw, 2.6rem); }
.pf-word small { color: var(--paper); opacity: .55; font-size: .65rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

/* Small service line, then the big light name */
.pf-meta {
  display: block; margin-top: 1.1rem; color: var(--ink);
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.pf-meta span { color: var(--accent); }
.pf-title {
  display: flex; align-items: center; margin-top: .55rem;
  font-weight: 300; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.15; letter-spacing: -.005em;
}
/* Arrow slides in before the name on hover */
.pf-arrow {
  display: inline-block; width: 0; overflow: hidden; opacity: 0; color: var(--accent);
  transition: width .5s var(--ease), opacity .4s var(--ease-soft), margin .5s var(--ease);
}
.pf-link:hover .pf-arrow, .pf-link:focus-visible .pf-arrow { width: 1.1em; margin-right: .3em; opacity: 1; }

/* Rolling letters: script.js wraps each letter; a copy sits just below via text-shadow and
   each letter slides up in turn on hover */
.roll-letter { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.15; height: 1.15em; }
.roll-letter > span {
  display: inline-block; text-shadow: 0 1.15em 0 currentColor;
  transition: translate .55s var(--ease); transition-delay: calc(var(--n, 0) * 22ms);
}
.pf-link:hover .roll-letter > span, .pf-link:focus-visible .roll-letter > span { translate: 0 -1.15em; }

@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .roll-letter > span { transition: none; }
  .pf-brief, .pf-brief > span { transition: none !important; }
}

/* The break: statement, link and four key numbers on Graphite */
.break-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); align-items: end; }
.break-grid .display { grid-column: 1 / 7; }
.break-text { grid-column: 8 / 13; text-align: left; }
.break-text .lead { color: var(--paper); font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.break-text .link-arrow { margin-top: 1.5rem; color: var(--paper); }
.break-text .link-arrow .link-text { background-image: linear-gradient(var(--paper), var(--paper)); }
.break-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3rem, 7vw, 5rem); }
.break-stats li { padding-top: 1.25rem; border-top: 2px solid var(--paper); text-align: left; }
.break-figure { display: block; color: var(--paper); font-weight: 700; line-height: 1; font-size: clamp(2.2rem, 4.5vw, 4rem); }
.break-label { display: block; margin-top: .8rem; color: var(--paper); opacity: .75; font-size: .68rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }


@media (max-width: 900px) {
  .break-grid .display, .break-text { grid-column: 1 / -1; }
  .break-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Client testimonial band (one per page) ----------
   Black by default; .is-light (Ivory) and .is-graphite where a black band would sit against
   other dark sections */
.quote-band { padding: var(--section-y) var(--gutter); background: var(--ink); color: var(--paper); }
.quote-band.is-light { background: var(--ivory); color: var(--ink); }
.quote-band.is-graphite { background: var(--graphite); color: var(--paper); }
.quote { margin: 0; text-align: left; }
.quote-mark {
  display: block; height: .5em; color: var(--accent); font-weight: 700; line-height: 1;
  font-size: clamp(7rem, 15vw, 13rem);
}
.quote-band.is-graphite .quote-mark { color: var(--paper); opacity: .5; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  max-width: 20ch; color: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.04;
  font-size: clamp(2rem, 5.4vw, 5rem);
}
.quote figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 2px solid currentColor; max-width: 28rem;
}
.quote-name { font-size: .78rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.quote-role { font-size: .9rem; opacity: .75; }

/* ---------- Motion below the hero ---------- */
/* Scroll reveals (classes added by script.js, so content shows if it never runs) */
.rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-soft), transform 1.2s var(--ease-soft);
  transition-delay: var(--rv-delay, 0s);
}
.rv.rv-in { opacity: 1; transform: none; }
/* Keep the underline hover animation on links that are revealed on their own */
.link-underline.rv {
  transition: opacity .9s var(--ease-soft) var(--rv-delay, 0s),
              transform 1.2s var(--ease-soft) var(--rv-delay, 0s),
              background-size .45s var(--ease) 0s;
}
/* Label rows draw in from the left instead */
.section-head.rv { transform: none; clip-path: inset(0 100% 0 0); transition-property: opacity, clip-path; transition-duration: .6s, 1.4s; }
.section-head.rv.rv-in { clip-path: inset(0); }

/* Underwater drift: the photo and its bubbles sway slowly while on screen */
.uw-media { animation: uw-drift 16s ease-in-out infinite alternate; animation-play-state: paused; }
.uw-media.in-view { animation-play-state: running; }
@keyframes uw-drift {
  0%   { scale: 1.04; translate: 0 0; }
  50%  { scale: 1.07; translate: -1% 1.2%; }
  100% { scale: 1.05; translate: 1% -.8%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--paper); padding: clamp(4rem, 8vw, 6rem) var(--gutter) 2.5rem; }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2.5rem 3rem;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.footer-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--ink); }
.footer-lockup .wordmark, .footer-lockup .tagline { padding-left: 0; }
.footer-lockup .tagline { max-height: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; }
.footer-nav a {
  font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink);
}
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem 2rem;
  padding-top: 1.5rem; border-top: 2px solid var(--ink);
  font-size: .78rem;
}
.footer-contact a { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer-legal a:hover { color: var(--ink); }

/* ---------- Intro state (class added by script.js) ---------- */
html.intro, html.intro body { overflow: hidden; }

/* ---------- Responsive ---------- */
/* The added Contact link needs about 1180px; below that, use the Menu button */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .site-header { grid-template-columns: 1fr auto 1fr; }
}

@media (max-width: 680px) {
  :root { --track-logo: 0.28em; --track-tag: 0.32em; --track-display: 0.08em; }
  .proof-list, .work-grid, .steps { grid-template-columns: 1fr; }
  .steps li::after { right: 0; }
  .steps li { --line-delay: .2s; }
  .proof-list { gap: 2.5rem; }
  .lead, .split-body, .about-photo, .about-text { grid-column: 1 / -1; }
  .uw-bubbles { --bubble-scale: .6; }
  .uw-breath { right: .75rem; bottom: .75rem; gap: .5rem; padding: .55rem .85rem .55rem .7rem; font-size: .56rem; letter-spacing: .16em; }
  .menu-toggle { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .uw-bubbles { display: none; }
  .uw-breath { display: none; }
  .thought { transition: opacity .2s; transform: none; }
  .ai-said s, .me-said { transition: none; }
  .uw-media { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Contact desktop: footer rises over the fixed screen, instead of scrolling it away. */
.contact-footer-toggle { display: none; }
body.contact-fixed { height: 100svh; overflow: hidden; }
.contact-fixed .contact-footer-toggle {
  display: block; position: fixed; right: var(--gutter); bottom: 1rem; z-index: 72;
  border: 0; border-bottom: 1px solid var(--accent); padding: .35rem 0;
  background: transparent; color: var(--ink); font-family: var(--font);   /* no fill, so it suits the Blush page and the white footer as it rises */
  font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.contact-fixed .site-footer {
  position: fixed; inset: auto 0 0; z-index: 70;
  max-height: min(70svh, 32rem); overflow-y: auto; overscroll-behavior: contain;
  padding-top: clamp(2rem, 4svh, 3rem); padding-bottom: 4rem;
  border-top: 1px solid rgba(10, 10, 10, .15);
  box-shadow: 0 -20px 70px rgba(10, 10, 10, .08);
  transform: translateY(105%); visibility: hidden;
  transition: transform .85s var(--ease-soft), visibility 0s .85s;
}
.contact-fixed .site-footer .footer-top { padding-bottom: 2rem; }
.contact-fixed.contact-footer-open .site-footer {
  transform: translateY(0); visibility: visible;
  transition: transform .85s var(--ease-soft), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .contact-fixed .site-footer { transition: none; }
}

/* Recovered Work portfolio carousel: image left, project brief right. */
.sp { position: relative; padding: clamp(3rem, 6vw, 5rem) max(4rem, calc((100vw - 84rem)/2)) 2.5rem; background: var(--paper); text-align: left; }
.sp-slide { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; min-height: min(65svh, 42rem); }
.sp-slide[hidden] { display: none; }
.sp-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory); border-radius: .75rem; }
.sp-media img { width: 100%; height: 100%; object-fit: cover; }
.sp-media .focus-low { object-position: center 65%; }
.sp-word { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); }
.sp-word > span { font-size: clamp(2rem, 4vw, 4rem); font-weight: 700; }
.sp-word small { letter-spacing: .25em; text-transform: uppercase; }
.sp-count { font-size: .75rem; letter-spacing: .2em; margin-bottom: 1.5rem; }
.sp-count span, .sp-tag { color: var(--accent); }
.sp-tag { text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .2em; }
.sp-name { margin: .75rem 0 .5rem; font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 300; line-height: 1.1; color: var(--ink); }
.sp-ind { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; }
.sp-desc { margin: 1.5rem 0; max-width: 30rem; }
.sp-details { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(10,10,10,.18); font-size: .9rem; }
.sp-details dt { color: var(--ink); font-weight: 700; }
.sp-details dd { margin: 0; }
.sp-btn { --wipe: var(--accent); background-color: var(--ink); color: var(--paper); margin-top: 1.5rem; }
.sp-thumbs {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  display: flex; gap: .5rem; overflow-x: auto; margin: 0; padding: .65rem;
  background: rgba(10,10,10,.45); border-radius: .4rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.5) transparent;
}
.sp-thumb { flex: 0 0 3.25rem; height: 2.5rem; padding: 0; border: 2px solid transparent; background: var(--ivory); opacity: .45; cursor: pointer; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumb.is-current { border-color: var(--paper); opacity: 1; }
.sp-thumb-word { font-family: var(--font); color: var(--ink); }
.sp-arrow { position: absolute; top: 45%; border: 0; background: none; color: var(--ink); font-size: 1.75rem; cursor: pointer; padding: .5rem; }
.sp-prev { left: .75rem; } .sp-next { right: .75rem; }
.sp-progress { height: 1px; background: rgba(10,10,10,.15); margin-top: 1.5rem; }
.sp-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; scale: 0 1; }
@media(max-width: 900px) {
 .sp { padding-inline: var(--gutter); }
 .sp-slide { grid-template-columns: 1fr; gap: 2rem; }
 .sp-thumbs { left: .65rem; right: .65rem; bottom: .65rem; padding: .45rem; }
 .sp-arrow { top: auto; bottom: 4rem; font-size: 1.5rem; }
 .sp-prev { left: auto; right: 3rem; } .sp-next { right: .75rem; }
}

/* Full-screen sticky portfolio: image, typography and controls share one stage. */
.sp { padding: 0; height: 180svh; background: var(--ink); color: var(--paper); }
.sp-stage { position: sticky; top: 0; height: 100svh; min-height: 35rem; overflow: hidden; isolation: isolate; }
.sp-slides, .sp-slide { height: 100%; }
.sp-slide { display: block; position: relative; min-height: 0; }
.sp-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.sp-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.12), rgba(10,10,10,.2) 35%, rgba(10,10,10,.8)), linear-gradient(0deg, rgba(10,10,10,.65), transparent 55%); }
.sp-media img { animation: folio-drift 9s ease-out both; }
.sp-info { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 56%; width: 38%; height: 100%; padding: 6rem 0 7rem; }
.sp-meta-row { display: flex; gap: 2rem; align-items: baseline; margin-bottom: 2rem; }
.sp-count, .sp-tag, .sp-count span { margin: 0; color: var(--paper); font-size: .65rem; font-weight: 400; letter-spacing: .2em; }
.sp-project-body { padding: 0; margin: 0; animation: folio-reveal .9s var(--ease-soft) both; }
.sp-name { margin: 0; color: var(--paper); font-size: clamp(2.75rem, 5.3vw, 6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; text-wrap: balance; }
.sp-ind { margin-top: 1.5rem; font-size: .65rem; letter-spacing: .2em; color: var(--paper); }
.sp-desc { max-width: 25rem; margin: 1.5rem 0 0; color: var(--paper); font-size: 1rem; font-weight: 300; line-height: 1.7; }
.sp-project-link { display: inline-flex; align-items: center; gap: 2rem; margin-top: 2rem; padding: .6rem 0; color: var(--paper); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.5); }
.sp-project-link span { font-size: 1.5rem; line-height: 1; }
.sp-thumbs { left: clamp(1.25rem, 4vw, 4rem); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; max-height: 65%; width: auto; padding: .4rem; gap: .35rem; border-radius: 0; overflow-y: auto; overflow-x: hidden; background: rgba(10,10,10,.18); }
.sp-thumb { flex: 0 0 2.5rem; width: 3.5rem; height: 2.5rem; transition: opacity .3s; }
.sp-thumb:hover { opacity: 1; }
.sp-arrow { z-index: 3; top: auto; bottom: 2.5rem; color: var(--paper); font-size: 1.5rem; }
.sp-prev { left: auto; right: 7rem; } .sp-next { right: 3rem; }
.sp-progress { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; margin: 0; height: 2px; background: rgba(255,255,255,.2); }
.sp-progress span { background: var(--paper); }
@keyframes folio-reveal { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes folio-drift { from { transform: scale(1.045); } to { transform: scale(1); } }
@media (max-width: 700px) {
 .sp { height: 140svh; }
 .sp-stage { min-height: 36rem; }
 .sp-media::after { background: linear-gradient(0deg, rgba(10,10,10,.92), rgba(10,10,10,.15) 95%); }
 .sp-info { justify-content: flex-end; margin-left: 6%; width: 88%; padding: 6rem 0 8rem; }
 .sp-name { font-size: clamp(2.5rem, 10vw, 4rem); }
 .sp-meta-row { margin-bottom: 1rem; }
 .sp-desc { font-size: .9rem; margin-top: 1rem; }
 .sp-ind { margin-top: 1rem; }
 .sp-project-link { margin-top: 1rem; }
 .sp-thumbs { top: auto; bottom: 2rem; left: 6%; right: 6%; max-height: none; max-width: 65%; transform: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
 .sp-thumb { flex-basis: 2.5rem; width: 2.5rem; height: 2rem; }
 .sp-prev { right: 3.5rem; } .sp-next { right: .75rem; }
 .sp-arrow { bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .sp-media img, .sp-project-body { animation: none; } }

/* Industry labels accompany each portfolio thumbnail. */
.sp-thumb { display: flex; align-items: center; gap: .85rem; width: 14rem; text-align: left; background: transparent; border: 0; color: var(--paper); opacity: .65; }
.sp-thumb img, .sp-thumb-word { flex: 0 0 3.5rem; width: 3.5rem; height: 2.5rem; object-fit: cover; border: 1px solid transparent; }
/* Photos whose subject sits near the top (e.g. the Suds & Snouts Dalmatian): keep the head in frame */
.sp-media img.pos-top { object-position: 50% 6%; }
.sp-thumb img.pos-top { object-position: 50% 12%; }
.sp-thumb-word { display: grid; place-items: center; background: var(--ivory); }
.sp-thumb.is-current { border: 0; }
.sp-thumb.is-current img, .sp-thumb.is-current .sp-thumb-word { border-color: var(--paper); }
.sp-thumb-label { font-family: var(--font); font-size: .55rem; font-weight: 400; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 700px) {
 .sp-thumb { flex: 0 0 9.5rem; width: 9.5rem; gap: .5rem; }
 .sp-thumb img, .sp-thumb-word { flex-basis: 2.5rem; width: 2.5rem; height: 2rem; }
 .sp-thumb-label { font-size: .5rem; letter-spacing: .08em; }
}

/* Centre the thumbnail tower in the visible space below the fixed navigation.
   Phones retain their horizontal thumbnail strip. */
@media (min-width: 701px) {
  .sp-thumbs {
    top: calc(50% + var(--portfolio-header-height, 5rem) / 2);
    max-height: calc(100% - var(--portfolio-header-height, 5rem) - 3rem);
    gap: .25rem;
  }
  .sp-thumb { flex: 0 0 auto; height: clamp(1.5rem, 4.2svh, 2.5rem); }
  .sp-thumb img, .sp-thumb-word { flex-basis: auto; height: 100%; width: auto; aspect-ratio: 7 / 5; }
}

/* A quieter editorial heading for the craftsmanship section. */
.work-break .break-grid { align-items: center; row-gap: 2.5rem; }
.work-break #break-title { font-size: clamp(3rem, 5.5vw, 5.5rem); line-height: 1.16; letter-spacing: -.025em; text-transform: none; margin: 0; }
.work-break #break-title .line-bold { font-size: 1em; font-weight: 400; letter-spacing: inherit; }
.work-break #break-title .line-light { margin-top: .12em; font-weight: 300; letter-spacing: inherit; }
.work-break .break-stats li { border-top-width: 1px; border-top-color: rgba(255,255,255,.3); padding-top: 1.5rem; }
.work-break .break-figure { font-weight: 300; font-size: clamp(3.25rem, 6vw, 6rem); }

.work-break .break-stats li { text-align: center; }

/* Compact brochure request alongside the Work invitation. */
.work-invite .invite-grid { align-items: center; }
.brochure-title { margin: 0 0 1.75rem; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 300; line-height: 1.35; }
.brochure-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.brochure-form .field { min-width: 0; margin: 0; }
.brochure-form .field input { width: 100%; padding-block: .65rem; }
.brochure-form .btn { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; gap: 1.5rem; }
.brochure-form .form-error { grid-column: 1 / -1; }
@media (max-width: 450px) { .brochure-form { grid-template-columns: 1fr; } }
.brochure-form .field > span { color: var(--graphite); }
.brochure-form .field input { color: var(--ink); background: transparent; border-bottom-color: rgba(10,10,10,.35); }
.brochure-form .field input:focus { border-bottom-color: var(--accent); }
/* Readable supporting type over portfolio imagery. */
.sp-thumb-label { font-size: .75rem; letter-spacing: .08em; }
.sp-thumb { width: 16rem; opacity: .85; }
.sp-count, .sp-tag, .sp-count span, .sp-ind, .sp-project-link { font-size: .8rem; letter-spacing: .14em; }
.sp-desc { font-size: clamp(1.05rem, 1.2vw, 1.2rem); }
@media (max-width: 700px) {
 .sp-thumb { flex-basis: 11rem; width: 11rem; }
 .sp-thumb-label { font-size: .7rem; }
 .sp-desc { font-size: 1rem; }
}
/* Larger project-caption text for comfortable reading. */
.sp-info .sp-count, .sp-info .sp-tag, .sp-info .sp-count span { font-size: .9rem; }
.sp-info .sp-ind, .sp-info .sp-project-link { font-size: 1rem; letter-spacing: .12em; }
.sp-info .sp-desc { font-size: clamp(1.2rem, 1.45vw, 1.45rem); line-height: 1.65; max-width: 30rem; }
@media (max-width: 700px) {
 .sp-info .sp-count, .sp-info .sp-tag, .sp-info .sp-count span { font-size: .8rem; }
 .sp-info .sp-ind, .sp-info .sp-project-link { font-size: .9rem; }
 .sp-info .sp-desc { font-size: 1.1rem; }
}

/* Keep the primary menu comfortable with the added Features page. */
@media (min-width: 1181px) and (max-width: 1350px) {
  .nav-left {
    gap: 1.5rem;
  }
}

/* ==========================================================
   Extras page (extras.html), 24 October 2026
   Live demos of extra features, each beside its build time before AI and now
   ========================================================== */

/* Opening: the shared page-intro / fit-screen layout (so the top line and headline line up with the FAQ, Pricing
   and Process intros) on graphite, with the page's verbs drifting along the bottom edge */
.ex-opening { position: relative; overflow: hidden; }
.ex-opening .wrap { position: relative; z-index: 1; }
.ex-running-type { position: absolute; left: 0; bottom: clamp(.25rem, 1.5svh, 1rem); display: flex; white-space: nowrap; pointer-events: none; color: rgba(255, 255, 255, .09); font-weight: 700; font-size: min(9vw, 11svh); line-height: 1; letter-spacing: .04em; }
.ex-running-type span { flex: none; padding-right: .3em; animation: ex-marquee 35s linear infinite; }
@keyframes ex-marquee { to { transform: translateX(-100%); } }
/* very short windows have no room below the words for the marquee */
@media (max-height: 620px) { .ex-running-type { display: none; } }

/* 02 Quote calculator (after the features page's event quote): the form and an Ink receipt side by side */
/* Match the introduction columns to the calculator and black receipt below. */
.eq-intro {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: end;
  gap: 5%;
  margin-bottom: 3.5rem;
}
.eq-intro .display { font-size: clamp(2rem, 3.7vw, 3.65rem); }
.eq-intro p { max-width: 28rem; line-height: 1.9; }
.eq-intro .ex-time { margin-top: 1.25rem; }
.eq-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 5%; align-items: stretch; }
.eq-controls { padding-top: 1.2rem; border-top: 1px solid rgba(10, 10, 10, .27); }
.eq-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.eq-heading > span:first-child { color: var(--accent); font-weight: 700; }
.eq-range-label { display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 1rem; }
.eq-range-label output { color: var(--accent); font-size: 2.5rem; font-weight: 300; line-height: 1; }
.eq-range { width: 100%; margin: 1.5rem 0 2rem; accent-color: var(--accent); cursor: ew-resize; }
.eq-packages, .eq-extras { margin: 0; padding: 0; border: 0; min-width: 0; }
.eq-packages legend, .eq-extras legend { margin-bottom: 1rem; color: var(--ink); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.eq-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.eq-packages label { position: relative; cursor: pointer; }
.eq-packages input { position: absolute; opacity: 0; }
.eq-packages label > span { display: flex; flex-direction: column; min-height: 10rem; padding: 1rem; border: 1px solid rgba(10, 10, 10, .19); transition: background-color .25s, border-color .25s; }
.eq-packages strong { color: var(--ink); font-size: .9rem; font-weight: 400; }
.eq-packages small { margin: .5rem 0 1rem; font-size: .75rem; line-height: 1.6; }
.eq-packages b { margin-top: auto; color: var(--accent); font-size: .75rem; font-weight: 400; }
.eq-packages input:checked + span { background: var(--blush); border-color: var(--accent); }
.eq-packages input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.eq-extras { margin-top: 2rem; }
.eq-extras label { display: flex; align-items: center; gap: .8rem; padding: .9rem 0; border-top: 1px solid rgba(10, 10, 10, .15); font-size: .95rem; cursor: pointer; }
.eq-extras input { flex-shrink: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.eq-extras small { display: block; font-size: .75rem; }
.eq-extras b { margin-left: auto; color: var(--accent); font-size: .8rem; font-weight: 400; white-space: nowrap; }
.eq-fineprint { margin-top: 1.5rem; font-size: .75rem; line-height: 1.8; }
.eq-receipt { padding: 2.5rem; background: var(--ink); color: var(--paper); }
.eq-receipt-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: .5rem; letter-spacing: .12em; }
.eq-receipt-top > span:first-child { font-size: .9rem; letter-spacing: .15em; }
.eq-receipt h3 { margin: 2rem 0 1rem; font-size: clamp(1.75rem, 2.8vw, 2.8rem); font-weight: 300; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; }
#eq-desc { font-size: .85rem; opacity: .7; }
.eq-items { margin: 1.8rem 0; }
.eq-items > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(255, 255, 255, .19); font-size: .85rem; }
.eq-items dd { margin: 0; white-space: nowrap; }
.eq-total { padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .5); }
.eq-total > span { display: block; font-size: .6rem; letter-spacing: .18em; }
.eq-total output { display: block; font-size: clamp(3.5rem, 5vw, 5rem); font-weight: 300; line-height: 1.4; }
.eq-receipt .btn { display: flex; justify-content: space-between; gap: .8rem; width: 100%; margin-top: 1.5rem; }
.eq-note { margin-top: 1.3rem; font-size: .7rem; line-height: 1.7; opacity: .7; }
.eq-uses { display: flex; gap: 2rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(10, 10, 10, .19); font-size: .8rem; }
.eq-uses > span { flex-shrink: 0; padding-top: .2rem; color: var(--accent); font-size: .65rem; letter-spacing: .15em; }
@media (max-width: 1000px) {
  .eq-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .eq-intro p { max-width: 38rem; }
  .eq-receipt { padding: 2rem; }
  .eq-layout { gap: 2rem; }
  .eq-packages { grid-template-columns: 1fr; }
  .eq-packages label > span { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; padding: .75rem 1rem; }
  .eq-packages small { grid-column: 1; margin: 0; }
  .eq-packages b { grid-row: 1 / 3; grid-column: 2; justify-self: end; align-self: center; }
}
@media (max-width: 700px) {
  .eq-intro .display { font-size: clamp(1.55rem, 5vw, 2.2rem); }
  .eq-intro { margin-bottom: 2.5rem; }
  .eq-layout { grid-template-columns: 1fr; }
  .eq-heading { gap: .5rem; font-size: .55rem; }
  .eq-packages label > span { grid-template-columns: 1fr auto; }
  .eq-receipt { padding: 1.7rem; }
  .eq-receipt h3 { font-size: 2.2rem; }
  .eq-total output { font-size: 4rem; }
  .eq-uses { display: block; }
  .eq-uses p { margin-top: .5rem; }
}

/* Each demo: words on the left, the working panel on the right */
.ex-demo { scroll-margin-top: 5rem; }
.ex-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); align-items: start; }
.ex-text { grid-column: 1 / 6; min-width: 0; }
.ex-panel { grid-column: 7 / 13; min-width: 0; }
.ex-grid-wide .ex-text { grid-column: 1 / 5; }
.ex-grid-wide .ex-panel { grid-column: 6 / 13; }
/* demo headlines sit in a narrower column than full-width section headlines, so they run a size smaller */
.ex-demo .wrap .display { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.ex-grid-wide .ex-text .display { font-size: clamp(1.9rem, 2.9vw, 2.8rem); }
.ex-body { max-width: var(--measure); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ex-good { max-width: var(--measure); margin-top: 1.25rem; font-size: .92rem; line-height: 1.7; }
.ex-good b { display: block; color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ex-time { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.ex-time span { display: inline-flex; align-items: baseline; gap: .55rem; padding: .55rem .9rem; border: 1px solid rgba(10, 10, 10, .2); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.ex-time b { font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ex-time span:first-child b { text-decoration: line-through; text-decoration-color: rgba(107, 30, 36, .6); }
.ex-time span:last-child { border-color: var(--accent); color: var(--accent); }
.ex-time span:last-child b { color: var(--ink); font-weight: 700; }

.ex-panel { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); box-shadow: 0 30px 60px -45px rgba(10, 10, 10, .45); }
.section-paper .ex-panel { background: var(--ivory); box-shadow: none; }
.ex-panel-label { margin-bottom: 1.5rem; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ex-caption { margin-top: .9rem; font-size: .82rem; opacity: .75; }
.qc-note { margin-top: .6rem; font-size: .82rem; opacity: .75; }

/* Shared panel controls */
.qc-name, .qc-set legend { display: block; padding: 0; color: var(--ink); font-size: .72rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
.qc-set { margin: 1.6rem 0 0; padding: 0; border: 0; }
.qc-set legend { margin-bottom: .8rem; }
.qc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; color: var(--ink); }
.qc-total span { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.qc-total b { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: .01em; }
.ex-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; margin: 1.1rem 0 .4rem; background: rgba(10, 10, 10, .3); outline: none; cursor: pointer; }
.ex-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); transition: background-color .3s; }
.ex-range::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.ex-range:hover::-webkit-slider-thumb, .ex-range:focus-visible::-webkit-slider-thumb { background: var(--accent); }
.ex-range:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 8px; }

/* 03 Before & after: two layers, the "before" clipped to the left of the handle (--pos, set by initCompare) */
.cmp-stage { --pos: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; cursor: ew-resize; user-select: none; }
.cmp-layer { position: absolute; inset: 0; }
.cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -50% 0; background: var(--paper); box-shadow: 0 0 0 1px rgba(10, 10, 10, .15); pointer-events: none; }
.cmp-handle i { position: absolute; top: 50%; left: 50%; width: 2.9rem; height: 2.9rem; translate: -50% -50%; border-radius: 50%; background: var(--paper); box-shadow: 0 6px 18px rgba(10, 10, 10, .3); }
.cmp-handle i::before, .cmp-handle i::after { content: ''; position: absolute; top: 50%; width: .5rem; height: .5rem; border: solid var(--ink); border-width: 2px 2px 0 0; }
.cmp-handle i::before { left: .65rem; transform: translateY(-50%) rotate(-135deg); }
.cmp-handle i::after { right: .65rem; transform: translateY(-50%) rotate(45deg); }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-stage:has(.cmp-range:focus-visible) .cmp-handle i { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-tag { position: absolute; top: 3.5cqw; padding: .35rem .7rem; background: rgba(10, 10, 10, .72); color: var(--paper); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cmp-tag-before { left: 3.5cqw; }
.cmp-tag-after { right: 3.5cqw; }
/* the 2011 original */
.old-site { position: absolute; inset: 0; padding: 4cqw 5cqw; background: linear-gradient(#c9d6e8, #eef2f7 30%, #e3e3e3); font-family: 'Times New Roman', Times, serif; color: #222; text-align: center; }
.os-head { color: #0033cc; font-weight: 700; font-size: 3.1cqw; line-height: 1.1; text-shadow: 2px 2px 0 #9fb4d9; letter-spacing: .02em; }
.os-nav { margin-top: 1.6cqw; color: #0033cc; font-size: 1.9cqw; }
.os-flash { margin-top: 2.4cqw; color: #d40000; font-weight: 700; font-size: 2.6cqw; animation: os-blink 1.1s steps(1) infinite; }
@keyframes os-blink { 50% { opacity: 0; } }
.os-text { margin: 2.4cqw auto 0; max-width: 78%; padding: 2cqw; background: #fff; border: 3px ridge #b9b9b9; font-family: Arial, sans-serif; font-size: 1.9cqw; line-height: 1.45; text-align: center; }
.os-cta { display: inline-block; margin-top: 2.6cqw; padding: 1cqw 2cqw; background: #ffef3a; border: 2px dashed #d40000; color: #d40000; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-weight: 700; font-size: 2.3cqw; }
.os-count { margin-top: 2.4cqw; font-family: 'Courier New', monospace; font-size: 1.6cqw; color: #555; }
/* the redesign */
.new-site { position: absolute; inset: 0; padding: 4cqw 6cqw; background: radial-gradient(circle at 85% 20%, #1d3f5a, #0d1b2a 60%); color: #fff; font-family: var(--font); text-align: left; }
.ns-top { display: flex; justify-content: space-between; align-items: center; }
.ns-logo { font-size: 2.1cqw; font-weight: 700; letter-spacing: .3em; }
.ns-logo i { font-style: normal; color: #f2a541; padding: 0 .2em; }
.ns-nav { display: flex; gap: 3cqw; font-size: 1.6cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.ns-nav i { font-style: normal; }
.ns-kicker { margin-top: 7cqw; color: #f2a541; font-size: 1.6cqw; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.ns-title { margin-top: 1.5cqw; font-size: 6.6cqw; font-weight: 300; line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; }
.ns-title b { font-weight: 700; }
.ns-btn { display: inline-block; margin-top: 3.4cqw; padding: 1.6cqw 3cqw; background: #f2a541; color: #0d1b2a; font-size: 1.7cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ns-facts { position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqw; display: flex; gap: 4cqw; padding-top: 2cqw; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 1.6cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* 04 Smart enquiry form */
.sf-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(10, 10, 10, .08); }
.sf-progress i { display: block; width: var(--sf, 33.3%); height: 100%; background: var(--accent); transition: width .6s var(--ease); }
.sf-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-q { display: block; margin-bottom: 1.1rem; padding: 0; color: var(--ink); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 400; line-height: 1.35; }
.sf-if { display: none; }
.sf-if.is-on { display: block; }
.sf-check { display: inline-block; margin-top: 1rem; }
.sf-error { margin-top: .9rem; color: var(--accent); font-size: .9rem; }
.sf-field { position: relative; }
.sf-ok { position: absolute; right: 0; top: 1.9rem; color: var(--accent); font-style: normal; font-weight: 700; opacity: 0; scale: .5; transition: opacity .3s, scale .3s var(--ease-soft); }
.sf-field.is-valid .sf-ok { opacity: 1; scale: 1; }
.sf-msg { display: block; min-height: 1.2em; margin-top: .35rem; color: var(--accent); font-size: .82rem; }
.sf-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.sf-actions .sf-next { margin-left: auto; }
.sf-back { padding: .6rem 0; border: 0; background: none; color: var(--ink); font: 700 .72rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.sf-back:hover { color: var(--accent); }
.sf-dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem; margin: 0; }
.sf-dl dt { color: var(--graphite); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.9; }
.sf-dl dd { margin: 0; color: var(--ink); font-weight: 400; }
.sf-restart { margin-top: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font); }
.sf.is-done .sf-actions, .sf.is-done .sf-step { display: none; }

/* 05 Booking picker */
.bk-q { margin-bottom: .8rem; color: var(--ink); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.bk-q + .bk-times { margin-bottom: 0; }
.bk-days { display: flex; gap: .5rem; margin-bottom: 1.6rem; padding-bottom: .4rem; overflow-x: auto; scrollbar-width: thin; }
.bk-day, .bk-time { border: 1px solid rgba(10, 10, 10, .3); background: transparent; color: var(--ink); font-family: var(--font); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.bk-day { flex: none; display: grid; justify-items: center; gap: .1rem; width: 3.6rem; padding: .6rem 0; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bk-day b { font-size: 1.35rem; font-weight: 400; letter-spacing: 0; line-height: 1.1; }
.bk-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bk-time { padding: .7rem .4rem; font-size: .92rem; }
.bk-day:hover, .bk-time:hover:not(:disabled) { border-color: var(--ink); }
.bk-day[aria-pressed="true"], .bk-time[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bk-time:disabled { cursor: not-allowed; opacity: .35; text-decoration: line-through; }
.bk-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid rgba(10, 10, 10, .15); }
.bk-chosen { color: var(--ink); font-weight: 400; }
.bk-add:disabled { opacity: .35; cursor: not-allowed; }

/* 06 Open now */
.on-badge { display: inline-flex; align-items: center; gap: .7rem; padding: .65rem 1.1rem; border-radius: 999px; background: rgba(10, 10, 10, .06); color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.on-badge i { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; }
.on-badge.is-open { background: #E3F1E7; color: #1D6B3A; }
.on-badge.is-open i { animation: on-pulse 1.8s ease-out infinite; }
.on-badge.is-closed { background: var(--blush); color: var(--accent); }
@keyframes on-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 155, 87, .55); } 100% { box-shadow: 0 0 0 .7rem rgba(46, 155, 87, 0); } }
.on-next { margin: 1rem 0 1.5rem; color: var(--ink); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 400; line-height: 1.35; }
.on-hours { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.on-hours th, .on-hours td { padding: .55rem 0; border-top: 1px solid rgba(10, 10, 10, .12); font-weight: 300; text-align: left; }
.on-hours td { text-align: right; }
.on-hours tr.is-today th, .on-hours tr.is-today td { color: var(--ink); font-weight: 700; }
.on-hours tr.is-today th::before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .6rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.on-preview { display: block; margin-top: 1.6rem; }
.on-preview span { display: block; margin-bottom: .5rem; color: var(--ink); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.on-preview select { width: 100%; padding: .7rem .8rem; border: 1px solid rgba(10, 10, 10, .3); border-radius: 0; background: transparent; color: var(--ink); font: 400 1rem var(--font); }

/* 07 Product configurator (initConfigurator sets --fabric and --legs on the panel) */
.cf { --fabric: #D8C7AE; --legs: #B88A5A; }
.cf-chair { display: block; width: 100%; max-width: 24rem; margin: 0 auto .5rem; overflow: visible; }
.cf-fabric { fill: var(--fabric); transition: fill .6s var(--ease-soft); }
.cf-shade { filter: brightness(.86); }
.cf-leg { fill: var(--legs); transition: fill .6s var(--ease-soft); }
.cf-leg-back { filter: brightness(.75); }
.cf-shadow { fill: rgba(10, 10, 10, .12); }
.cf-cushion { opacity: 0; translate: 0 10px; transition: opacity .4s, translate .5s var(--ease-soft); }
.cf-cushion rect { fill: #F4EFE6; stroke: rgba(10, 10, 10, .15); }
.cf-cushion path { stroke: rgba(10, 10, 10, .12); stroke-width: 1.5; }
.cf.has-cushion .cf-cushion { opacity: 1; translate: 0 0; }
.cf-chosen { margin-left: .5rem; color: var(--graphite); letter-spacing: .04em; text-transform: none; }
.cf-swatches { display: flex; gap: .7rem; }
.cf-sw { position: relative; cursor: pointer; }
.cf-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-sw span { display: block; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .15); transition: box-shadow .3s; }
.cf-sw span[data-key="sand"] { background: #D8C7AE; }
.cf-sw span[data-key="sage"] { background: #9AA88C; }
.cf-sw span[data-key="ivory"] { background: #EFE9DE; }
.cf-sw span[data-key="oxblood"] { background: #6B1E23; }
.cf-sw span[data-key="navy"] { background: #24324F; }
.cf-sw input:checked + span { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .15), 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.section-paper .cf-sw input:checked + span { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .15), 0 0 0 3px var(--ivory), 0 0 0 4.5px var(--ink); }
.cf-sw input:focus-visible + span { outline: 1.5px solid var(--accent); outline-offset: 6px; }
.cf-total { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(10, 10, 10, .15); }

/* 08 Search & filter */
.mf-search { margin-bottom: 1.2rem; }
.mf-search input { -webkit-appearance: none; appearance: none; }
.mf-count { margin: 1.2rem 0 .4rem; font-size: .82rem; opacity: .8; }
.mf-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: .75rem 0; border-top: 1px solid rgba(10, 10, 10, .12); animation: mf-in .35s var(--ease-soft); }
.mf-list li[hidden] { display: none; }
.mf-list b { color: var(--ink); font-weight: 400; }
.mf-list span { grid-column: 1; font-size: .88rem; line-height: 1.5; }
.mf-list em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--ink); font-style: normal; }
.mf-empty { padding: 1rem 0; color: var(--accent); }
@keyframes mf-in { from { opacity: 0; translate: 0 6px; } }

/* 09 Make an entrance (from the features page): an Ink section with a particle stage drawn by initMotion */
.mo { background: var(--ink); color: var(--paper); }
.mo .section-head, .mo .display { color: var(--paper); }
.mo .section-head span:last-child { color: var(--blush); }
.mo .ex-time span { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .7); }
.mo .ex-time span:last-child { border-color: var(--blush); color: var(--blush); }
.mo .ex-time span:last-child b { color: var(--paper); }
.mo .ex-time span:first-child b { text-decoration-color: rgba(255, 255, 255, .7); }
.mo-stage { position: relative; height: clamp(22rem, 42vw, 38rem); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); background: #0b0b0b; touch-action: pan-y; }
#mo-canvas { display: block; width: 100%; height: 100%; }
.mo-top, .mo-bottom { position: absolute; left: 1.5rem; right: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; }
.mo-top { top: 1.5rem; }
.mo-bottom { bottom: 1rem; align-items: center; }
.mo-bottom > span:last-child { font-size: 1.8rem; line-height: 1; }
.mo-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.mo-modes { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.mo-controls button { padding: .4rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: rgba(255, 255, 255, .56); font: 400 .7rem var(--font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.mo-controls button[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--blush); }
.mo-controls label { display: flex; align-items: center; gap: .8rem; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
#mo-speed { width: 6rem; accent-color: var(--blush); }
.mo-fineprint { margin-top: 1.5rem; font-size: .75rem; line-height: 1.8; opacity: .65; }
@media (max-width: 700px) {
  .mo-stage { height: 23rem; }
  .mo-top, .mo-bottom { left: 1rem; right: 1rem; gap: 1rem; font-size: .43rem; }
  .mo-controls { gap: 1rem; }
  .mo-modes { justify-content: space-between; width: 100%; gap: .75rem; }
  .mo-controls button { font-size: .6rem; }
}

/* 09 The AI story: each bar shrinks from its old build time to its build time now (initTimeBars adds .is-in).
   Widths are hours against the longest build (3 working days, 24 hours) */
.ex-ai-split { border-top-color: rgba(255, 255, 255, .3); }
.ex-bars { margin-top: clamp(3rem, 6vw, 4.5rem); }
.ex-bars li { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr minmax(8rem, 11rem); align-items: center; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.xb-name { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.xb-track { position: relative; height: .7rem; }
.xb-then, .xb-now { position: absolute; left: 0; top: 0; bottom: 0; }
.xb-then { width: var(--then); background: rgba(255, 255, 255, .18); }
.xb-now { width: var(--then); background: var(--paper); transition: width 1.6s var(--ease); }
.ex-bars.is-in .xb-now { width: var(--now); }
.ex-bars li:nth-child(2) .xb-now { transition-delay: .15s; } .ex-bars li:nth-child(3) .xb-now { transition-delay: .3s; }
.ex-bars li:nth-child(4) .xb-now { transition-delay: .45s; } .ex-bars li:nth-child(5) .xb-now { transition-delay: .6s; }
.ex-bars li:nth-child(6) .xb-now { transition-delay: .75s; } .ex-bars li:nth-child(7) .xb-now { transition-delay: .9s; }
.ex-bars li[data-key="quote"] { --then: 100%; --now: 12.5%; }
.ex-bars li[data-key="form"] { --then: 66.7%; --now: 8.3%; }
.ex-bars li[data-key="booking"] { --then: 100%; --now: 16.7%; }
.ex-bars li[data-key="config"] { --then: 100%; --now: 16.7%; }
.ex-bars li[data-key="compare"] { --then: 33.3%; --now: 4.2%; }
.ex-bars li[data-key="motion"] { --then: 100%; --now: 16.7%; }
.ex-bars li[data-key="open"] { --then: 16.7%; --now: 2.1%; }
.xb-figs { font-size: .95rem; text-align: right; }
.xb-figs s { margin-right: .5rem; opacity: .6; }
.ex-bars-note { margin-top: 1.5rem; font-size: .82rem; opacity: .75; }

/* 10 And plenty more */
.ex-more-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.ex-more-list li { padding: 1.3rem 0 1.6rem; border-top: 1px solid rgba(10, 10, 10, .15); }
.ex-more-list b { display: block; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ex-more-list span { display: block; margin-top: .45rem; font-size: .95rem; line-height: 1.6; }
.ex-more-note { margin-top: 2rem; max-width: 46rem; }
.ex-more-note .link-underline { margin-left: .6rem; }

@media (max-width: 900px) {
  .ex-text, .ex-panel, .ex-grid-wide .ex-text, .ex-grid-wide .ex-panel { grid-column: 1 / -1; }
  .ex-more-list { grid-template-columns: 1fr 1fr; }
  .ex-bars li { grid-template-columns: 1fr auto; gap: .6rem 1rem; }
  .xb-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .ex-more-list { grid-template-columns: 1fr; }
  .bk-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-stage { aspect-ratio: 4 / 3.4; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-running-type span, .os-flash, .on-badge.is-open i, .mf-list li { animation: none; }
  .xb-now, .sf-progress i, .cf-fabric, .cf-leg, .cf-cushion { transition: none; }
}

/* Related reading sits beside the article, keeping the reading column intact. */
.journal-with-topics { position: relative; }
.journal-topics { position: absolute; top: 0; left: 0; width: calc((100% - 42rem) / 2 - 2rem); }
.journal-topics p { font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.2rem; }
.journal-topics nav { display: flex; align-items: flex-start; flex-direction: column; gap: .65rem; }
.journal-topics a {
  display: inline-block;
  padding: .55rem .85rem;
  border: 1px solid var(--accent);
  border-radius: 2rem;
  color: var(--accent);
  font-size: .7rem;
  line-height: 1.4;
  transition: color .2s, background .2s;
}
.journal-topics a:hover { color: var(--paper); background: var(--accent); }
@media (max-width: 1100px) {
  .journal-topics { position: static; width: auto; max-width: 42rem; margin: 0 auto 2.5rem; }
  .journal-topics nav { flex-direction: row; flex-wrap: wrap; }
}

/* Pricing facts: restrained type and generous spacing. */
.package-facts-editorial li {
  grid-template-areas: "num label" "num description";
  grid-template-columns: clamp(3.5rem, 6vw, 5.5rem) minmax(0, 1fr);
  padding-block: clamp(1.4rem, 3vh, 2.2rem);
  row-gap: .5rem;
}
.package-facts-editorial .fact-num { font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 700; }
.package-facts-editorial .fact-label { font-weight: 500; letter-spacing: .18em; line-height: 1.5; }
.package-facts-editorial .fact-description {
  grid-area: description;
  align-self: start;
  color: inherit;
  opacity: .72;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .package-facts-editorial li { column-gap: 1.25rem; padding-block: 1.4rem; }
}

/* A quiet studio dot replaces decorative section numbering. */
.section-head .section-marker {
  display: block;
  flex: 0 0 .4rem;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  align-self: center;
}

.addon-price .price-prefix { font-weight: 300; font-size: .85em; }

.package-features-note { margin-top: 1.25rem; max-width: 28rem; font-size: .9rem; line-height: 1.6; opacity: .85; }
.package-features-note a, .pricing-features-note a { text-decoration: underline; text-underline-offset: .2em; }
.pricing-features-note { max-width: 54rem; margin-top: 1.25rem; font-size: 1rem; line-height: 1.7; }

/* Feature scope stays visible alongside the opening introduction. */
.features-scope { max-width: 46rem; margin-top: 1.25rem; font-size: .95rem; line-height: 1.65; }
.features-scope strong { font-weight: 700; }
.features-scope a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

.feature-starting-price { display: block; margin-top: .85rem; font-size: .95rem; line-height: 1.6; font-weight: 400; letter-spacing: 0; text-transform: none; }
.feature-starting-price .price-prefix, .feature-rates .price-prefix { font-weight: 300; font-size: .85em; }
.feature-starting-price > span:last-child { margin-left: .4rem; font-size: .8em; opacity: .75; }
.feature-starting-price a { text-decoration: underline; text-underline-offset: .2em; }
.feature-rates-intro { max-width: 58rem; margin-block: 1.5rem; font-size: 1rem; line-height: 1.7; }
.feature-rates-scroll { overflow-x: auto; }
.feature-rates-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.6; }
.feature-rates-table th, .feature-rates-table td { padding: 1rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid #0a0a0a22; }
.feature-rates-table thead th { border-bottom-color: var(--accent); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.feature-rates-table tbody th { width: 25%; font-weight: 500; }
.feature-rates-table td:nth-child(2) { white-space: nowrap; width: 15%; }
@media (max-width: 600px) { .feature-rates-table { min-width: 34rem; } }

/* Confirmation content fits the viewport beneath the fixed masthead. */
.thanks.page-intro {
  box-sizing: border-box;
  min-height: 100svh;
  padding-top: calc(5rem + clamp(1.5rem, 5svh, 3.5rem));
  padding-bottom: clamp(2rem, 5svh, 4rem);
  display: flex;
  align-items: center;
}
.thanks > .wrap { width: 100%; }
.thanks .section-head { margin-bottom: clamp(1.5rem, 5svh, 3rem); }
.thanks .display { margin: 0; font-size: clamp(1.8rem, min(5vw, 7svh), 4.5rem); }
.thanks .page-lead {
  max-width: 38rem;
  margin-top: clamp(1rem, 3svh, 1.75rem);
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, min(2vw, 3svh), 1.35rem);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .thanks .display { font-size: clamp(1.6rem, 6.5vw, 2.5rem); }
}