/* ==========================================================================
   AMORA Studios
   Standalone site stylesheet. No framework, no build step.

   Contents
   1.  Tokens and themes
   2.  Reset and base
   3.  Typography
   4.  Layout helpers
   5.  Buttons and small parts
   6.  Navigation
   7.  Hero
   8.  Scroll story
   9.  Scene artwork
   10. Content sections
   11. Services page
   12. About page
   13. Footer
   14. Reveal animation
   15. Responsive
   16. Reduced motion and print
   ========================================================================== */

/* 1. Tokens and themes ---------------------------------------------------- */

:root {
  --container: 1180px;
  --gutter: 24px;

  --accent: #c2552d;
  --accent-soft: #e08a5f;
  --gold: #cf9b3f;
  --sage: #3f6153;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* The story's subheads. Inter carries the rest of the site, but under a
     Fraunces headline it reads like every other site, so the beats get a face
     with a little more of its own. */
  --font-sub: "Instrument Sans", "Inter", -apple-system, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-soft: 0 24px 60px -30px rgba(20, 12, 6, 0.45);
  --shadow-lift: 0 30px 70px -35px rgba(20, 12, 6, 0.6);

  --nav-h: 76px;
}

.theme-light {
  --paper: #faf6f0;
  --paper-2: #f2ebe1;
  --surface: #ffffff;
  --ink: #14110e;
  --muted: #6c6259;
  --line: rgba(20, 17, 14, 0.12);
  --line-strong: rgba(20, 17, 14, 0.22);
  --accent-ink: #a8461f;
}

.theme-dark {
  --paper: #0c0b0a;
  --paper-2: #131010;
  --surface: #17130f;
  --ink: #f7f1e8;
  --muted: #9c9086;
  --line: rgba(247, 241, 232, 0.14);
  --line-strong: rgba(247, 241, 232, 0.28);
  --accent-ink: #e79063;
}

/* 2. Reset and base ------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` not `hidden`. Setting one axis to hidden promotes the other axis to
     auto, which turns body into its own scroll container. That is harmless
     here but breaks the page the moment it is embedded somewhere that also
     gives body a height, so use the value that clips without scrolling. */
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body {
    overflow-x: hidden;
  }
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--accent);
  color: #fff;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

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

/* 3. Typography ----------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.display-xl {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.display-lg {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.display-md {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.025em;
}

.display-sm {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
}

.body-muted {
  color: var(--muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0;
}

.eyebrow--muted {
  color: var(--muted);
}

.accent-text {
  color: var(--accent-ink);
}

.italic-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* 4. Layout helpers ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 820px;
}

.section {
  position: relative;
  padding-block: clamp(72px, 11vw, 140px);
  background-color: var(--paper);
  color: var(--ink);
}

.section--tight {
  padding-block: clamp(56px, 8vw, 96px);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}

.section-head .lead {
  margin-top: 4px;
}

.stack-sm > * + * {
  margin-top: 12px;
}

.stack > * + * {
  margin-top: 22px;
}

.stack-lg > * + * {
  margin-top: 40px;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* 5. Buttons and small parts ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(194, 85, 45, 0.9);
}

.btn--primary:hover {
  background: #ad4826;
  box-shadow: 0 20px 38px -18px rgba(194, 85, 45, 0.95);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.btn--lg {
  padding: 17px 32px;
  font-size: 16px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn .arrow {
  transition: transform 0.25s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 40%, transparent);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}

.text-link:hover {
  border-color: var(--accent-ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* 6. Navigation ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* The nav swaps its own theme class as it passes over light and dark
     sections. Without this, anything inheriting colour (the brand name) keeps
     the literal colour resolved back on body and disappears against the
     opposite background. Children using var(--ink) directly were always fine,
     which is why only the wordmark broke. */
  color: var(--ink);
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* The mark is the logo itself now, not a letter inside a tile, so it carries
   its own colours and sits directly on whichever theme it lands on. */
.brand__mark {
  width: 38px;
  flex: none;
  display: grid;
  place-items: center;
}

.brand__mark svg {
  width: 38px;
  height: auto;
}

.brand__word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.brand__sub {
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav__link {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  transition:
    color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.nav__link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.nav__link.is-active {
  color: var(--ink);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__cta {
  padding: 11px 20px;
  font-size: 14.5px;
}

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  place-items: center;
}

.nav__toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav__toggle span + span {
  margin-top: 5px;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  background: var(--paper);
  /* Same reason as .nav above: it is themed independently of body. */
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--gutter) 30px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu.is-open {
  display: flex;
  animation: menu-in 0.28s var(--ease);
}

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

.mobile-menu a {
  padding: 14px 4px;
  font-size: 19px;
  font-family: var(--font-display);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.mobile-menu .btn {
  margin-top: 18px;
  width: 100%;
}

/* 7. Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--paper);
  padding-block: calc(var(--nav-h) + 40px) 60px;
}

.hero__glow {
  position: absolute;
  inset: auto;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.hero__glow--a {
  width: 620px;
  height: 620px;
  right: -160px;
  top: -180px;
  background: radial-gradient(circle, rgba(194, 85, 45, 0.55), transparent 68%);
}

.hero__glow--b {
  width: 520px;
  height: 520px;
  left: -180px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(207, 155, 63, 0.34), transparent 68%);
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: min(25vw, 260px) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 940px;
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line > span {
  display: block;
  animation: rise 1.1s var(--ease) backwards;
}

.hero__title .line:nth-child(1) > span {
  animation-delay: 0.05s;
}

.hero__title .line:nth-child(2) > span {
  animation-delay: 0.16s;
}

.hero__title .line:nth-child(3) > span {
  animation-delay: 0.27s;
}

@keyframes rise {
  from {
    transform: translateY(105%);
    opacity: 0;
  }
}

.hero__fade {
  animation: fade-up 1s var(--ease) 0.5s backwards;
}

.hero__fade--late {
  animation-delay: 0.66s;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--muted);
  padding-top: 6px;
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.hero__meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fade-up 1s var(--ease) 1s backwards;
}

.scroll-cue__track {
  width: 1px;
  height: 46px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}

.scroll-cue__track::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 16px;
  background: var(--accent);
  animation: cue 2.1s var(--ease) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-18px);
  }
  60%,
  100% {
    transform: translateY(48px);
  }
}

/* 8. Scroll story --------------------------------------------------------- */

.story {
  position: relative;
  background: var(--paper);
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}

.progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--gold), var(--accent));
}

.rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.rail.is-visible {
  opacity: 1;
}

.rail a,
.rail button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
}

.rail a::after,
.rail button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: all 0.3s var(--ease);
}

.rail a:hover::after,
.rail button:hover::after {
  border-color: #f7f1e8;
}

.rail a.is-active::after,
.rail button.is-active::after {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.45);
}

/* One pinned stage holds the whole story. The camera moves through a single
   world, the copy rides alongside it, and nothing ever cuts to a new section. */

.stage {
  position: relative;
  height: 780vh;
  background: #0a0908;
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #0a0908;
}

.stage__scene {
  position: absolute;
  inset: 0;
}

.stage__scene svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
}

/* Keeps the copy readable whether the world behind it is midnight or noon. */
.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The copy used to be readable because everything behind it was crushed to
     black. Now that the world keeps its detail, the scrim has to do that work
     deliberately, or the headings go grey on grey. */
  background:
    linear-gradient(
      100deg,
      rgba(8, 6, 5, 0.94) 0%,
      rgba(8, 6, 5, 0.86) 30%,
      rgba(8, 6, 5, 0.42) 55%,
      rgba(8, 6, 5, 0) 82%
    ),
    linear-gradient(to top, rgba(8, 6, 5, 0.55), rgba(8, 6, 5, 0) 42%);
}

.stage__copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  padding-inline: max(var(--gutter), 5.5vw);
  pointer-events: none;
}

.beat {
  grid-area: 1 / 1;
  max-width: 41ch;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #f8f3ec;
  --lp: calc((var(--t, 0) - var(--in)) / var(--span));
  opacity: min(clamp(0, calc(var(--lp) / 0.16), 1), clamp(0, calc((1 - var(--lp)) / 0.16), 1));
  transform: translate3d(0, calc((0.5 - var(--lp)) * 74px), 0);
  will-change: opacity, transform;
  pointer-events: none;
}

.stage[data-beat="0"] .beat--hero {
  pointer-events: auto;
}

.beat__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(248, 243, 236, 0.6);
  display: flex;
  align-items: center;
  gap: 14px;
}

.beat__num::after {
  content: "";
  height: 1px;
  width: 46px;
  background: rgba(248, 243, 236, 0.28);
}

.beat__title {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.beat__body {
  font-family: var(--font-sub);
  color: rgba(248, 243, 236, 0.76);
  font-size: clamp(1.02rem, 1.3vw, 1.19rem);
  line-height: 1.62;
  letter-spacing: -0.005em;
  max-width: 46ch;
}

.stage__cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 243, 236, 0.6);
  pointer-events: none;
  opacity: calc(1 - clamp(0, calc(var(--t, 0) * 22), 1));
}

/* 9. Scene artwork -------------------------------------------------------- */

/* The world is one SVG. Every moving part reads the same two numbers the
   script writes onto the stage, --t (0 to 1 through the whole story) and
   --day (0 at midnight, 1 at noon), so the animation never has seams. */

.world text {
  font-family: var(--font-body);
}

/* Fades in at --in, back out at --out. --sp sets how sharp the fade is. */
.sv {
  opacity: min(
    clamp(0, calc((var(--t, 0) - var(--in, 0)) * var(--sp, 26)), 1),
    clamp(0, calc((var(--out, 2) - var(--t, 0)) * var(--sp, 26)), 1)
  );
}

/* One switch, no fade out. Used for things that stay once they arrive. */
.sv-on {
  opacity: clamp(0, calc((var(--t, 0) - var(--in, 0)) * var(--sp, 60)), 1);
}

.sv-day {
  opacity: var(--day, 0);
}

.sv-night {
  opacity: calc(1 - var(--day, 0));
}

/* The night is a single sheet laid over a daylight world. It stays light
   enough that the artwork's own colour comes through rather than being
   replaced by the colour of the sheet. */
.sv-tint {
  opacity: calc((1 - var(--day, 0)) * 0.52);
}

.sv-rise {
  transform: translateY(calc((1 - clamp(0, calc((var(--t, 0) - var(--in, 0)) * 16), 1)) * 30px));
}

.sv-draw {
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: calc(var(--len, 2400) * (1 - clamp(0, calc((var(--t, 0) - var(--in, 0)) * 8), 1)));
}

.twinkle {
  animation: twinkle 3.4s ease-in-out infinite;
}

.twinkle:nth-of-type(2n) {
  animation-delay: 0.7s;
}

.twinkle:nth-of-type(3n) {
  animation-delay: 1.5s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.95;
  }
}

/* 10. Content sections ---------------------------------------------------- */

.cta-band {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

.cta-band .lead {
  max-width: 60ch;
}

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 52px;
}

.teaser {
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.teaser:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.teaser__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
}

.teaser__icon svg {
  width: 19px;
  height: 19px;
}

.teaser h3 {
  font-size: 19px;
}

.teaser p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

.quote {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.quote figcaption {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}

/* 11. Services page ------------------------------------------------------- */

.page-hero {
  padding-top: calc(var(--nav-h) + clamp(60px, 10vw, 120px));
  padding-bottom: clamp(48px, 7vw, 90px);
  position: relative;
  overflow: hidden;
}

.page-hero__glow {
  position: absolute;
  width: 700px;
  height: 700px;
  right: -220px;
  top: -300px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  background: radial-gradient(circle, rgba(194, 85, 45, 0.4), transparent 70%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.svc-group + .svc-group {
  margin-top: clamp(48px, 6vw, 76px);
}

.svc-group__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.svc-group__head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.svc-group__head p {
  font-size: 14.5px;
  color: var(--muted);
  margin-left: auto;
  text-align: right;
  max-width: 34ch;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 16px;
}

.svc-card {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.svc-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}

.svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.svc-card:hover::after {
  transform: scaleX(1);
}

.svc-card__top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.svc-card__icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
}

.svc-card__icon svg {
  width: 18px;
  height: 18px;
}

.svc-card h3 {
  font-size: 18.5px;
  line-height: 1.25;
}

.svc-card p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
}

.svc-card ul {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.svc-card li {
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}

.svc-card--soon {
  border-style: dashed;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  counter-reset: step;
}

.step {
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
}

.step h3 {
  font-size: 19px;
}

.step p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.62;
}

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq details p {
  padding: 0 40px 26px 0;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 74ch;
}


/* Quote form */

.form {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field > label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.field > label .opt {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field textarea {
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fieldset > legend {
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 4px;
}

.fieldset > .hint {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

/* Spam trap field. Out of sight without display:none, which some bots detect. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Groups of four sit as an even 2 x 2 block rather than three and a stray one. */
.pick-grid--pairs {
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

/* Small label above each group of checkboxes in the quote form. */
.pick-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 9px;
}

.pick-grid + .pick-label {
  margin-top: 18px;
}

.pick {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  font-size: 14.5px;
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.pick:hover {
  border-color: var(--ink);
}

.pick input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  flex: none;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.pick input::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition:
    transform 0.2s var(--ease),
    opacity 0.15s var(--ease);
  margin-top: -2px;
}

.pick input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.pick input:checked::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.pick:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form__status {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
}

.form__status.is-ok {
  color: var(--sage);
}

.form__status.is-error {
  color: #b0452a;
}

.form__status.is-pending {
  color: var(--muted);
}

.form__note {
  font-size: 13.5px;
  color: var(--muted);
}

/* 12. About page ---------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: start;
}

.split__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.prose > * + * {
  margin-top: 22px;
}

.prose p {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--muted);
}

.prose p strong {
  color: var(--ink);
  font-weight: 600;
}

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.value {
  background: var(--paper);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.value__num {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
  font-weight: 600;
}

.value h3 {
  font-size: 19px;
}

.value p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.62;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat__label {
  font-size: 14px;
  color: var(--muted);
}

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline__item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.timeline__item:last-child {
  border-bottom: 1px solid var(--line);
}

.timeline__label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  padding-top: 4px;
}

.timeline__body h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.timeline__body p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 62ch;
}

/* 13. Footer -------------------------------------------------------------- */

.footer {
  background: var(--paper);
  color: var(--ink);
  padding-block: clamp(56px, 8vw, 90px) 34px;
  border-top: 1px solid var(--line);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 46px;
}

.footer__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 42ch;
}

.footer__intro p {
  color: var(--muted);
  font-size: 15px;
}

/* Where we are. Quiet enough not to compete with the sentence above it, but
   present on every page, which is what local search wants to see. */
.footer__where {
  font-size: 13.5px !important;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--muted) 82%, transparent) !important;
}

.footer__col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 16px;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__col a {
  font-size: 15px;
  color: var(--ink);
  opacity: 0.82;
  transition: opacity 0.2s var(--ease);
}

.footer__col a:hover {
  opacity: 1;
  color: var(--accent-ink);
}

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted);
}

/* 14. Reveal animation ---------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] {
  transition-delay: 0.08s;
}

[data-reveal-delay="2"] {
  transition-delay: 0.16s;
}

[data-reveal-delay="3"] {
  transition-delay: 0.24s;
}

[data-reveal-delay="4"] {
  transition-delay: 0.32s;
}

/* 15. Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .stage {
    height: 720vh;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
  }

  .nav__links,
  .nav__actions .btn {
    display: none;
  }

  .nav__toggle {
    display: grid;
  }

  .stage {
    height: 660vh;
  }

  /* Portrait screens read better with the copy sitting under the world
     rather than beside it. */
  .stage__copy {
    align-items: end;
    padding-bottom: clamp(48px, 12vh, 110px);
  }

  .beat {
    max-width: none;
    gap: 12px;
  }

  .beat__body {
    font-size: 15.5px;
    max-width: 38ch;
  }

  .stage__scrim {
    background:
      linear-gradient(to top, rgba(8, 6, 5, 0.96) 0%, rgba(8, 6, 5, 0.88) 38%, rgba(8, 6, 5, 0) 74%),
      linear-gradient(to bottom, rgba(8, 6, 5, 0.55), rgba(8, 6, 5, 0) 26%);
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__sticky {
    position: static;
  }

  .svc-group__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .svc-group__head p {
    margin-left: 0;
    text-align: left;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer__intro {
    grid-column: 1 / -1;
  }

  .rail {
    display: none;
  }

  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .stage {
    height: 620vh;
  }

  .hero__meta {
    gap: 8px 18px;
    font-size: 13px;
  }

  .btn {
    padding: 13px 22px;
  }

  .btn-row .btn {
    flex: 1 1 auto;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .beat__title {
    font-size: clamp(1.9rem, 8.4vw, 2.6rem);
  }
}

/* 16. Reduced motion and print -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* The story still runs here. It used to be flattened into a stacked page,
     which read as a broken site to anyone whose machine has reduced motion
     switched on, and that is a lot of people. What changes instead is how
     much movement there is around it: the camera tracks the scrollbar one to
     one rather than easing toward it, the looping decoration above is stopped
     by the duration overrides, and the sections below appear without sliding.
     Same story, less to react to. */

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .scroll-cue {
    display: none;
  }
}

@media print {
  .nav,
  .rail,
  .progress,
  .scroll-cue,
  .stage__cue {
    display: none !important;
  }

  .stage {
    height: auto;
  }

  .stage__pin {
    position: static;
    height: auto;
  }
}


/* Founder card (About page) ------------------------------------------------ */

/* Same card language as the service cards, so it belongs to the page: paper
   surface, hairline border, and the accent-to-gold rule that wipes in. It
   lifts on hover rather than doing anything showy, and the reduced-motion
   block above damps the transition for anyone who asked for less movement. */
.founder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 620px;
  margin-top: 34px;
  padding: 26px 30px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.founder::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}

.founder:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.founder:hover::after {
  transform: scaleX(1);
}

.founder__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.founder__role {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 54ch;
}