/* Ems K9s. Palette from the logo and the approved mock-ups:
   near-black, forest green, warm sand, bone. Type: Anton / Figtree / DM Mono. */
:root {
  --ink: #0E120D;
  --ink-2: #161C15;
  --green: #2D4A2E;
  --green-deep: #223A24;
  --moss: #8DB58B;      /* readable green for text on dark */
  --sand: #C8794B;      /* accent (copper); name kept from the earlier sand */
  --bone: #F3EFE6;
  --muted: #A9B3A6;
  --line: rgba(243, 239, 230, .16);
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --gutter: clamp(1.1rem, 5vw, 3.5rem);
  --max: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 0; z-index: 20; background: var(--sand); color: var(--ink); padding: .6rem 1rem; font-weight: 600; }
.skip:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 50rem; }

h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .98; margin: 0; }
h2 { font-size: clamp(2.3rem, 5.5vw, 4rem); }
h3 { font-family: var(--body); font-weight: 700; font-size: 1.2rem; line-height: 1.25; margin: 0; }
p { margin: 0 0 1rem; }

.eyebrow { font: 700 .8rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .16em; color: var(--eb, var(--muted)); margin: 0 0 1.1rem; }
.eyebrow--green { --eb: var(--moss); }
.eyebrow--sand { --eb: var(--sand); }

/* buttons */
.btn {
  display: inline-block; font: 700 .95rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  padding: 1.1rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer; transition: transform .15s, background .15s;
}
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: #D98B5D; transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn--small { padding: .75rem 1.2rem; font-size: .8rem; }

/* nav + badge
   The bar is ALWAYS the same height, so nothing below it ever moves when it compacts
   (a height change here used to jerk the page up and down around the top on phones).
   Only the logo scales, using transform, which does not affect layout. */
:root { --nav-h: 5.8rem; --nav-extra: 3.6rem; --badge-w: 8.4rem; --badge-scale: .548; }
.nav {
  position: sticky; top: 0; z-index: 50; background: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: none; height: var(--nav-h); padding: 0 var(--gutter);
  margin-bottom: var(--nav-extra);
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s;
}
.nav.is-scrolled {
  background: rgba(14, 18, 13, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.badge { display: block; width: var(--badge-w); text-decoration: none; flex: none; }
.nav .badge { align-self: flex-start; margin-top: .5rem; transform-origin: 0 0; will-change: transform; transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.nav.is-scrolled .badge { transform: scale(var(--badge-scale)); }
.badge img { width: 100%; filter: drop-shadow(0 .4rem .9rem rgba(0, 0, 0, .5)); }
.nav nav { display: flex; align-items: center; gap: 1.8rem; font-weight: 500; font-size: .95rem; }
.nav nav a:not(.btn) { text-decoration: none; color: var(--bone); }
.nav nav a:not(.btn):hover { color: var(--sand); }
@media (max-width: 52rem) { :root { --badge-w: 6.8rem; --badge-scale: .676; --nav-extra: 1.9rem; } .nav nav a:not(.btn) { display: none; } }

/* hero */
.hero {
  max-width: var(--max); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(3.5rem, 8vw, 6.5rem);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero h1 { font-size: clamp(3.4rem, 9vw, 7.4rem); color: var(--bone); }
.hero h1 > span:not(.w) { display: block; color: var(--sand); }
.lede { font-size: 1.2rem; max-width: 34rem; margin: 1.6rem 0 2rem; color: #DCD8CE; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.hero__slots { margin: 0; font: 700 .82rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--moss); }
.trust { list-style: none; margin: 2.2rem 0 0; padding: 1.3rem 0 0; display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; border-top: 1px solid var(--line); }
.trust li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: var(--bone); }
.trust li::before {
  content: ""; flex: none; width: 1.35rem; height: 1.35rem; background: var(--moss);
  -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat;
}
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.6 12.4 10.7 15.5 16.6 8.9'/%3E%3C/svg%3E"); }
.hero__mark { margin: 0; display: flex; justify-content: flex-end; }
.frame { background: var(--bone); border: .7rem solid var(--green); padding: clamp(1.2rem, 3vw, 2.2rem); width: min(100%, 27rem); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.frame img { width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; }
  .hero__mark { justify-content: flex-start; }
  .frame { width: min(100%, 20rem); }
}

/* hero with the photo: full-bleed. The picture runs up behind the header; a dark strip keeps the menu readable, and the left fades into the page colour where the words are */
.hero--photo {
  --navs: calc(var(--nav-h) + var(--nav-extra));
  max-width: none; margin: calc(-1 * var(--navs)) 0 0; position: relative; overflow: hidden;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-block: calc(clamp(2.5rem, 7vw, 5.5rem) + var(--navs)) clamp(2.5rem, 7vw, 5.5rem);
  min-height: calc(clamp(32rem, 76vh, 44rem) + var(--navs));
  grid-template-columns: minmax(0, 36rem);
}
body:has(.hero--photo) .nav:not(.is-scrolled) { background: transparent; }
.hero--photo::before { display: none; }
.hero--photo .hero__copy { position: relative; z-index: 2; }
.hero--photo .hero__bg { position: absolute; z-index: 0; inset: 0 0 0 36%; margin: 0; }
.hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; display: block; }
.hero--photo .hero__bg::before, .hero--photo .hero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero--photo .hero__bg::before { background: linear-gradient(to right, var(--ink) 0%, rgba(14, 18, 13, .8) 12%, rgba(14, 18, 13, .35) 30%, rgba(14, 18, 13, 0) 50%); }
.hero--photo .hero__bg::after { background: linear-gradient(to bottom, rgba(14, 18, 13, .92) 0, rgba(14, 18, 13, .88) calc(var(--nav-h) * .85), rgba(14, 18, 13, .5) calc(var(--nav-h) + 1.6rem), rgba(14, 18, 13, .18) calc(var(--nav-h) + 3.6rem), rgba(14, 18, 13, 0) calc(var(--nav-h) + 6rem), rgba(14, 18, 13, 0) 78%, var(--ink) 100%); }
.hero--photo h1 { font-size: clamp(3rem, 6.3vw, 5.6rem); text-shadow: 0 .15rem 1.4rem rgba(0, 0, 0, .45); }
@media (max-width: 52rem) {
  .hero--photo { grid-template-columns: 1fr; padding-top: calc(min(68vw, 21rem) + var(--navs)); min-height: 0; }
  .hero--photo .hero__bg { inset: 0 0 auto 0; height: calc(min(86vw, 27rem) + var(--navs)); }
  .hero--photo .hero__bg img { object-position: 52% 60%; }
  .hero--photo .hero__bg::before { background: linear-gradient(to bottom, rgba(14, 18, 13, .92) 0, rgba(14, 18, 13, .88) calc(var(--nav-h) * .85), rgba(14, 18, 13, .45) calc(var(--nav-h) + 1.4rem), rgba(14, 18, 13, 0) calc(var(--nav-h) + 4.5rem), rgba(14, 18, 13, .6) 78%, var(--ink) 100%); }
  .hero--photo .hero__bg::after { display: none; }
}

/* photos inside the page */
.slots__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
.slots__photo { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.slots__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: sepia(.32) saturate(1.12) contrast(1.02); }
.slots__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200, 121, 75, .28), rgba(200, 121, 75, 0) 60%); mix-blend-mode: multiply; pointer-events: none; }
@media (max-width: 52rem) {
      .slots__grid { grid-template-columns: 1fr; }
}

/* familiar */
.familiar { background: var(--green); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.familiar h2 { margin-bottom: 2.4rem; max-width: 14ch; }
.familiar__list { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: 3.5rem; }
.familiar__list li { position: relative; padding: 0 0 1.4rem 2rem; break-inside: avoid; font-size: 1.15rem; line-height: 1.5; }
.familiar__list li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 1.25rem; height: 1.25rem; background: var(--sand);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
:root { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.8 9.4 18.6 20.5 5.4'/%3E%3C/svg%3E"); }
.familiar__turn { margin: 1.6rem 0 0; font: 400 clamp(1.7rem, 3.6vw, 2.6rem)/1.1 var(--display); text-transform: uppercase; color: var(--sand); max-width: 24ch; }

/* who */
.who { padding: clamp(3.5rem, 8vw, 6.5rem) 0; --eb: var(--moss); }
.who h2 { max-width: 20ch; margin-bottom: 2.6rem; }
.who__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.2rem; }
.who__grid article { border-top: 3px solid var(--green); padding-top: 1.2rem; }
.who__grid h3 { margin-bottom: .6rem; }
.who__grid p { color: #CFD2C8; margin: 0; }
.notfor { margin-top: 3rem; border-left: 4px solid var(--sand); background: var(--ink-2); padding: 1.6rem 1.8rem; max-width: 52rem; }
.notfor h3 { margin-bottom: .5rem; }
.notfor p { margin: 0; color: #CFD2C8; }

/* method */
.method { background: var(--bone); color: var(--ink); padding: clamp(3.5rem, 8vw, 6.5rem) 0; --eb: var(--green); }
.method h2 { color: var(--ink); }
.method__intro { max-width: 36rem; margin: 1.2rem 0 3rem; font-size: 1.15rem; color: #38412F; }
.calm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 2.4rem 3.5rem; }
.calm li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; padding-top: 1.4rem; }
.calm li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ink); transform-origin: left; }
.calm__letter { font: 400 clamp(6rem, 12vw, 9.5rem)/.78 var(--display); color: var(--green); }
.calm h3 { margin-bottom: .5rem; font-size: 1.3rem; }
.calm p { margin: 0 0 1rem; color: #38412F; }

/* included */
.included { padding: clamp(3.5rem, 8vw, 6.5rem) 0; --eb: var(--moss); }
.included h2 { margin-bottom: 2rem; }
.stack { list-style: none; margin: 0 0 2rem; padding: 0; }
.stack li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.stack li:last-child { border-bottom: 1px solid var(--line); }
.stack p { margin: .25rem 0 0; color: var(--muted); font-size: .98rem; }
.stack__v { font: 700 1.2rem/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--sand); white-space: nowrap; }
.stack__total { border-top: 3px solid var(--sand) !important; }
.stack__total h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.8rem; }
.stack__total .stack__v { font-size: 1.8rem; }
.included__note { max-width: 34rem; margin-bottom: 1.5rem; color: #DCD8CE; }

/* slots */
.slots { background: var(--sand); color: var(--ink); padding: clamp(3rem, 7vw, 5rem) 0; }
.slots h2 { margin-bottom: 1.2rem; }
.slots p { font-size: 1.15rem; margin: 0; max-width: 40rem; }

/* about */
.about { background: var(--ink-2); padding: clamp(3.5rem, 8vw, 6.5rem) 0; --eb: var(--moss); }
.about__grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.about__text p { font-size: 1.12rem; color: #E0DDD3; }
.about__sign { font: 400 1.7rem/1 var(--display); text-transform: uppercase; color: var(--sand) !important; margin-top: 1.6rem; }
@media (max-width: 52rem) { .about__grid { grid-template-columns: 1fr; gap: 1.6rem; } .about__copy { display: contents; } .about__head { order: 1; } .about__photo { order: 2; } .about__text { order: 3; } }

/* promise */
.promise { background: var(--green); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.promise h2 { margin-bottom: 1.4rem; }
.promise__text { font-size: 1.3rem; line-height: 1.5; margin-bottom: 1.1rem; }

/* call + form */
.call { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.call__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.call h2 { margin-bottom: 1.4rem; }
.call__intro p { color: #DCD8CE; }
.call__email { margin-top: 1.6rem; font-size: .98rem; }
.call__email a { color: var(--sand); }
@media (max-width: 52rem) { .call__grid { grid-template-columns: 1fr; } }

form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; background: var(--bone); color: var(--ink);
  padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 1.2rem;
}
@media (max-width: 36rem) { form { grid-template-columns: 1fr; } }
.form__title { grid-column: 1 / -1; font: 400 1.9rem/1 var(--display); text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--wide, .form__foot, form .fine { grid-column: 1 / -1; }
label { font-weight: 600; font-size: .92rem; }
.opt { font-weight: 400; color: #5B6455; }
input, textarea {
  font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #C9C7BC; border-radius: .7rem; padding: .8rem .9rem; width: 100%;
}
input:focus, textarea:focus { outline: 3px solid var(--sand); outline-offset: 0; border-color: var(--green); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #B3261E; }
.hp { position: absolute; left: -9999px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__status { margin: 0; font-weight: 600; }
.form__status.is-error { color: #B3261E; }
form .fine { margin: 0; font-size: .85rem; color: #5B6455; }
form :focus-visible { outline-color: var(--green); }
form .btn--sand:focus-visible { outline-color: var(--ink); }

/* footer */
.foot { background: var(--ink-2); padding: 2.6rem 0; border-top: 1px solid var(--line); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.foot p { margin: 0; color: var(--muted); font-size: .95rem; }
.foot a { color: var(--sand); }
.foot .fine { color: #77816F; font-size: .82rem; }
.badge--foot { width: 6.4rem; margin-top: 0; }
.badge--foot img { filter: none; }

/* ===================== MOTION ===================== */
:root { --ease: cubic-bezier(.2, .7, .1, 1); }
html { scroll-padding-top: 6rem; }

/* scroll progress */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 100; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--sand); transform: scaleX(0); transform-origin: left; }

/* film grain: a whisper of texture so the dark sections feel printed, not flat */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hero glow */
.hero { position: relative; isolation: isolate; }
html, body { overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -12%; top: -6%; width: 62%; height: 95%;
  background: radial-gradient(closest-side, rgba(45, 74, 46, .7), rgba(45, 74, 46, 0)); filter: blur(30px); pointer-events: none;
}

/* parallax uses the independent `translate` property so it never fights reveal transforms */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }

/* buttons: arrow nudge + light sweep */
.arr { display: inline-block; margin-left: .35em; transition: transform .3s var(--ease); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(5px); }
.btn--sand { position: relative; overflow: hidden; isolation: isolate; }
.btn--sand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--ease);
}
.btn--sand:hover::after { transform: translateX(130%); }

/* nav links: underline draws in */
.nav nav a:not(.btn) { position: relative; }
.nav nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 2px; background: var(--sand);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav nav a:not(.btn):hover::after, .nav nav a:not(.btn):focus-visible::after { transform: scaleX(1); }

/* cards lift gently (translate, not transform, so reveals stay independent) */
.who__grid article { transition: translate .4s var(--ease), border-color .4s; }
.who__grid article:hover { translate: 0 -5px; border-top-color: var(--sand); }
.stack li:not(.stack__total) { transition: background .3s, padding .3s var(--ease); }
.stack li:not(.stack__total):hover { background: rgba(243, 239, 230, .04); padding-left: .8rem; padding-right: .8rem; }

/* ---------- reveal system (only active when JS runs and motion is allowed) ---------- */
html.js:not(.rv-fallback) .rv {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s ease var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms);
}
html.js:not(.rv-fallback) .rv--scale { transform: translateY(26px) scale(.93); }
html.js:not(.rv-fallback) .rv.is-in { opacity: 1; transform: none; }

/* headings: each word slides up out of a mask */
html.js:not(.rv-fallback) [data-split]:not(.is-split) { visibility: hidden; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.wi { display: inline-block; }
html.js:not(.rv-fallback) .wi {
  transform: translateY(112%);
  transition: transform 1s var(--ease) calc(var(--base, 0ms) + var(--i, 0) * 75ms);
}
html.js:not(.rv-fallback) .is-in .wi { transform: none; }

/* familiar: each tick wipes in left to right with its line */
html.js:not(.rv-fallback) .familiar__list li::before {
  clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease) calc(var(--d, 0ms) + 300ms);
}
html.js:not(.rv-fallback) .familiar__list li.is-in::before { clip-path: inset(0 0 0 0); }

/* C.A.L.M.: rule draws across, then the giant letter rises */
html.js:not(.rv-fallback) .calm li::before { transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--d, 0ms) + 100ms); }
html.js:not(.rv-fallback) .calm li.is-in::before { transform: none; }
.calm__letter { display: inline-block; }
html.js:not(.rv-fallback) .calm__letter {
  opacity: 0; transform: translateY(38%) scale(.9); transform-origin: left bottom;
  transition: opacity .9s ease calc(var(--d, 0ms) + 260ms), transform 1.1s var(--ease) calc(var(--d, 0ms) + 260ms);
}
html.js:not(.rv-fallback) .calm li.is-in .calm__letter { opacity: 1; transform: none; }

/* page-load: nav drops in */
@keyframes navin { from { transform: translateY(-100%); } to { transform: none; } }
html.js:not(.rv-fallback) .nav { animation: navin .9s var(--ease) both; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 5%, 0) scale(1.12); } }
  .hero::before { animation: drift 16s ease-in-out infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-parallax] { translate: none; }
}

/* ===================== SECTION BLENDING =====================
   Dark <-> green joins fade through a soft gradient (no hard line).
   Joins with the light sections use overlapping "sheets" with rounded tops. */
:root {
  --sheet: clamp(1.4rem, 4vw, 2.6rem);
  --fade: clamp(7rem, 18vw, 13rem);
  --ink-0: rgba(14, 18, 13, 0);
  --ink-2-0: rgba(22, 28, 21, 0);
}

/* gradient bridges */
.familiar, .promise { position: relative; }
.familiar .wrap, .promise .wrap { position: relative; z-index: 1; }
.familiar::before, .familiar::after, .promise::before, .promise::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--fade); pointer-events: none; z-index: 0;
}
/* hero (ink) -> familiar (green) */
.familiar::before { top: 0; background: linear-gradient(to bottom, var(--ink) 0%, rgba(14, 18, 13, .78) 26%, rgba(14, 18, 13, .36) 58%, var(--ink-0) 100%); }
/* familiar (green) -> who (ink) */
.familiar::after { bottom: 0; background: linear-gradient(to top, var(--ink) 0%, rgba(14, 18, 13, .78) 26%, rgba(14, 18, 13, .36) 58%, var(--ink-0) 100%); }
/* about (ink-2) -> promise (green) */
.promise::before { top: 0; background: linear-gradient(to bottom, var(--ink-2) 0%, rgba(22, 28, 21, .78) 26%, rgba(22, 28, 21, .36) 58%, var(--ink-2-0) 100%); }
/* promise (green) -> call (ink) */
.promise::after { bottom: 0; background: linear-gradient(to top, var(--ink) 0%, rgba(14, 18, 13, .78) 26%, rgba(14, 18, 13, .36) 58%, var(--ink-0) 100%); }

/* lower sections bleed their own colour UP into the section above (no hard edge, no cards) */
:root { --bleed: clamp(5rem, 12vw, 9rem); }
.method, .included, .slots, .about { position: relative; }
.method::before, .included::before, .slots::before, .about::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--bleed) * -1); height: var(--bleed);
  pointer-events: none; z-index: 1;
}
.method::before   { background: linear-gradient(to bottom, rgba(243,239,230,0), rgba(243,239,230,.16) 30%, rgba(243,239,230,.55) 68%, #F3EFE6 100%); }
.included::before { background: linear-gradient(to bottom, rgba(14,18,13,0), rgba(14,18,13,.16) 30%, rgba(14,18,13,.55) 68%, #0E120D 100%); }
.slots::before    { background: linear-gradient(to bottom, rgba(200,121,75,0), rgba(200,121,75,.16) 30%, rgba(200,121,75,.55) 68%, #C8794B 100%); }
.about::before    { background: linear-gradient(to bottom, rgba(22,28,21,0), rgba(22,28,21,.16) 30%, rgba(22,28,21,.55) 68%, #161C15 100%); }
.included { background: var(--ink); }
/* keep the fade clear of the text above it */
.who, .method, .included { padding-bottom: calc(clamp(3.5rem, 8vw, 6.5rem) + var(--bleed) * .55); }
.slots { padding-bottom: calc(clamp(3rem, 7vw, 5rem) + var(--bleed) * .55); }


/* ===================== PRICE NOTE (price is shared on the call) ===================== */
.invest { display: flex; gap: 1.1rem; align-items: flex-start; margin: 0 0 2rem; padding: 1.3rem 1.4rem; border: 1px solid rgba(200, 121, 75, .55); border-radius: 14px; background: rgba(200, 121, 75, .07); }
.invest__ico { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--ink); }
.invest__label { margin: 0 0 .3rem; font: 700 .76rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.invest__text { margin: 0; color: #E4E0D6; font-size: 1.05rem; line-height: 1.55; max-width: 36rem; }
.invest__text strong { color: var(--bone); font-weight: 600; }
.stack__total p { margin: .3rem 0 0; }
@media (max-width: 520px) { .invest { flex-direction: column; gap: .8rem; } }


/* ===================== FOOTER SOCIALS ===================== */
.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; align-items: center; }
.foot .socials a.soc { display: inline-flex; align-items: center; gap: .7rem; padding: 0; border: 0; background: none; color: var(--bone); font-weight: 700; font-size: .95rem; text-decoration: none; }
.soc__logo { width: 2.9rem; height: 2.9rem; display: block; border-radius: 28%; box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .35); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
.soc--fb .soc__logo, .soc--wa .soc__logo { border-radius: 50%; }
.foot .socials a.soc:hover .soc__logo, .foot .socials a.soc:focus-visible .soc__logo { transform: translateY(-.35rem) scale(1.14); box-shadow: 0 1rem 1.6rem rgba(0, 0, 0, .5); }
.foot .socials a.soc:active .soc__logo { transform: translateY(-.1rem) scale(1.04); }
.foot .socials a.soc:focus-visible { outline: 2px solid var(--sand); outline-offset: 6px; border-radius: 10px; }
.foot__right { display: grid; gap: 1.1rem; justify-items: end; text-align: right; }
.foot__right .socials { justify-content: flex-end; }
@media (max-width: 52rem) { .foot__right { justify-items: start; text-align: left; } .foot__right .socials { justify-content: flex-start; } }
.foot__right .fine { order: 2; }
.foot .socials { flex-wrap: wrap; }
.soc--gm .soc__logo { box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .45); }
.foot__row > p { max-width: 21rem; }
.foot__right { margin-left: auto; }
.foot .socials { gap: 1rem; }
@media (max-width: 52rem) { .foot__right { margin-left: 0; } }


/* ===================== TERMS PAGE ===================== */
.terms { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.terms__title { font-size: clamp(2.6rem, 7vw, 4.6rem); margin: 0 0 1.2rem; }
.terms__lede { font-size: 1.15rem; line-height: 1.6; color: #DCD8CE; max-width: 40rem; margin: 0 0 2.4rem; }
.terms__toc { border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.5rem; margin: 0 0 3rem; background: rgba(243, 239, 230, .03); }
.terms__toc-h { margin: 0 0 .8rem; font: 700 .76rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); }
.terms__toc ol { margin: 0; padding: 0 0 0 1.2rem; columns: 2 16rem; column-gap: 2.5rem; font-size: .96rem; line-height: 1.9; }
.terms__toc a { color: var(--bone); text-decoration: none; }
.terms__toc a:hover { color: var(--sand); text-decoration: underline; }
.terms__sec { padding: 1.9rem 0; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.terms__sec h2 { font-size: clamp(1.5rem, 3vw, 2rem); display: flex; align-items: baseline; gap: .9rem; margin: 0 0 1rem; }
.terms__sec h2 span { color: var(--sand); font-size: .75em; min-width: 1.6em; }
.terms__sec p { margin: 0 0 .95rem; line-height: 1.65; color: #DCD8CE; max-width: 44rem; }
.terms__end { margin: 2.4rem 0 0; padding: 1.3rem 1.5rem; border: 1px solid rgba(200, 121, 75, .55); border-radius: 14px; background: rgba(200, 121, 75, .07); }
.terms__end a, .foot .fine a { color: var(--sand); }
form .fine a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* about photo */
.about__head { margin-bottom: 1.6rem; }
.about__photo { margin: 0; width: 100%; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .45); outline: 1px solid var(--line); outline-offset: -1px; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 36% 40%; display: block; }
@media (max-width: 52rem) { .about__head { margin-bottom: 0; } .about__photo { aspect-ratio: 1 / 1; } .about__photo img { object-position: 36% 35%; } }

/* free call tidy */
.call__points { list-style: none; margin: 1.6rem 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.call__points li { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1rem; color: var(--bone); }
.call__points li::before { content: ""; flex: none; width: 1.3rem; height: 1.3rem; background: var(--moss); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.call__email { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.form__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.form__head .form__title { grid-column: auto; margin: 0; }
.form__req { margin: 0; font-size: .86rem; color: var(--muted-on-light, #5B6455); }

/* Laptop-height windows: tighten the enquiry form so all of it fits on screen when the
   "Book your free call" buttons scroll to it. */
@media (min-width: 52.01rem) and (max-height: 860px) {
  #enquiry { padding: 1.3rem 1.6rem; gap: .8rem 1.2rem; }
  #enquiry .form__title { font-size: 1.6rem; }
  #enquiry textarea { height: 5.4rem; resize: vertical; }
  #enquiry .field { gap: .3rem; }
  #enquiry input, #enquiry textarea { padding: .65rem .85rem; }
}

/* Client login: quiet grey text, far right on desktop, centred in the bar on phones */
.nav .login-link { color: #7F897C; font-weight: 500; font-size: .85rem; text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav .login-link:hover, .nav .login-link:focus-visible { color: var(--bone); }
.nav nav a.login-link { margin-right: .4rem; }
.login-link--mid { display: none; }
@media (max-width: 52rem) {
  .nav nav a.login-link--end { display: none; }
  .nav .login-link--mid { display: block; font-size: .82rem; }
}

/* Phones: drop the arrow in the header button so Client login has clear space on both sides */
@media (max-width: 30rem) {
  .nav nav .btn .arr { display: none; }
}