/* Prime Solutions — Premium level, "Forest" theme: white, black and three greens
   (forest, emerald, mint). Type: Prime Display (headings) and Prime Text (body), see src/fonts and CREDITS.md.
   Layout concept: a pinned entrance (an arch you walk through into a valley) and then a stack of white
   sheets sliding over it. One signature moment: the same sample page upgrades from Standard to Premium
   as you scroll, and the section changes colour with it. */

@font-face {
  font-family: "Prime Display";
  src: url(../fonts/prime-display-medium.woff) format("woff");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Prime Display";
  src: url(../fonts/prime-display-bold.woff) format("woff");
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: "Prime Text";
  src: url(../fonts/prime-text-regular.woff) format("woff");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Prime Text";
  src: url(../fonts/prime-text-semibold.woff) format("woff");
  font-weight: 600 800;
  font-display: swap;
}
/* the Pro level keeps its own pair (Archivo and Schibsted Grotesk); they are only fetched when a Pro page is opened */
@font-face {
  font-family: "Archivo Prime";
  src: url(../fonts/archivo-display.woff) format("woff");
  font-weight: 500 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Prime";
  src: url(../fonts/schibsted-body.woff) format("woff");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Prime Serif";
  src: url(../fonts/prime-serif.woff) format("woff");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --white: #FFFFFF;
  --mist: #F5F8F6;
  --ink: #0A0F0C;
  --slate: #44504A;
  --forest: #0B5D3B;
  --forest-deep: #084A2F;
  --emerald: #1FAE6C;
  --mint: #D6F1E2;
  --mint-lite: #EAF6EF;
  --line: rgba(10, 15, 12, .12);
  --line-strong: #5F6A64;

  --f-display: "Prime Display", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: "Prime Text", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-pro-display: "Archivo Prime", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-pro-body: "Schibsted Prime", "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gut-l: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --head-h: 68px;
  --r: clamp(26px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-sheet: 0 -1px 0 var(--line), 0 -22px 50px -24px rgba(10, 15, 12, .18);
}

.tier--pro, .d--pro { --f-display: var(--f-pro-display); --f-body: var(--f-pro-body); }

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 8px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--band, var(--ink));
  z-index: 60;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--forest); color: var(--white);
  padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
}
.eyebrow {
  font: 600 .8125rem/1.2 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest);
}
.lead { font-size: clamp(1.1rem, 1.02rem + .45vw, 1.35rem); line-height: 1.55; color: var(--slate); max-width: 36em; }
.fine { font-size: .9375rem; color: var(--slate); }

/* ---------- buttons and links ---------- */
.btn {
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.5rem; border-radius: 999px;
  background: var(--forest); color: var(--white);
  font: 700 1rem/1 var(--f-body); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px -10px rgba(11, 93, 59, .7);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .2s;
}
.btn:hover { background: var(--forest-deep); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 30px -12px rgba(11, 93, 59, .75); }
.btn:active { transform: translateY(0); }
.btn--sm { min-height: 44px; padding: 0 1.15rem; font-size: .9375rem; }
.btn--lg { min-height: 60px; padding: 0 2rem; font-size: 1.125rem; }
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--forest);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link:hover { color: var(--forest); }

/* ---------- header: no bar, links centred, burger on phones ----------
   It blends into whatever is behind it. Its text switches between white and ink (data-tone) to stay readable. */
.site-header {
  --hc: #fff; --scrim: rgba(5, 10, 7, .34); --hsh: 0 1px 14px rgba(0, 0, 0, .55), 0 0 3px rgba(0, 0, 0, .3);
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 50;
  height: var(--head-h); color: var(--hc); text-shadow: var(--hsh); transition: color .3s;
}
.site-header[data-tone="light"] { --hc: var(--ink); --scrim: rgba(255, 255, 255, .94); --hsh: none; }
.site-header[data-tone="ink"], .site-header.menu-open { --hc: #fff; --scrim: rgba(10, 15, 12, .94); --hsh: none; }
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -20px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--scrim) 0, var(--scrim) 52%, transparent 100%);
}
.header__bar { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand {
  justify-self: start; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .32em; text-decoration: none;
  font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; min-height: 44px;
}
.brand__a { font-weight: 800; font-stretch: 104%; }
.brand__b { font-weight: 500; font-stretch: 94%; opacity: .82; }
.nav ul { display: flex; align-items: center; gap: clamp(.1rem, 1vw, .75rem); }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  font-size: .9375rem; font-weight: 600; color: inherit; text-decoration: none; opacity: .9; transition: opacity .2s;
}
.nav a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 8px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:hover, .nav a.is-active { opacity: 1; }
.nav a.is-active::after, .nav a:hover::after { transform: scaleX(1); }
.nav .nav__mail-li { display: none; }
.header__mail {
  justify-self: end; grid-column: 3; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem;
  border: 1.5px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; text-shadow: none;
  font: 700 .9375rem/1 var(--f-body); transition: background-color .25s;
}
.header__mail:hover { background: rgba(127, 127, 127, .18); }
.burger { display: none; grid-column: 3; justify-self: end; position: relative; z-index: 2; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, top .25s; }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.header__back { grid-column: 2; }

@media (max-width: 1000px) {
  .header__bar { grid-template-columns: 1fr auto; }
  .header__mail { display: none; }
  .burger { display: inline-block; grid-column: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1; display: none; place-items: center;
    background: var(--ink); color: #fff; text-shadow: none;
  }
  .nav.is-open { display: grid; }
  .nav ul { flex-direction: column; gap: .3rem; text-align: center; }
  .nav a { font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; min-height: 56px; padding: 0 1.5rem; opacity: 1; }
  .nav a::after { display: none; }
  .nav .nav__mail-li { display: block; margin-top: 1.1rem; }
  .nav .btn { background: var(--emerald); color: var(--ink); font-family: var(--f-body); font-size: 1.05rem; min-height: 54px; padding: 0 1.8rem; }
  .header__back { grid-column: 1 / -1; position: static; display: block; background: none; place-items: initial; }
  .header__back ul { flex-direction: row; justify-content: center; }
  .header__back a { font: 600 .9375rem var(--f-body); min-height: 44px; padding: 0 .8rem; }
}
@media (max-width: 420px) { .brand { font-size: 1.08rem; } }
@media (max-width: 480px) { .header__back { display: none; } }

/* ---------- the entrance: one pinned scene ----------
   The page opens on the arch, held still. The first swipe, scroll or tap plays the whole walk in by itself: towards the door, through the
   light, into the valley (intro.js). Inside, the headline opens, and a short scroll carries the plans in. There is no way back to the arch. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.stage { position: relative; z-index: 0; height: 100vh; height: 100svh; background: var(--ink); color: var(--white); }
.js .stage { height: calc(100vh + 55vh); height: calc(100svh + 55svh); }   /* the extra 55 is the short scroll that carries the valley away (intro.js reads it) */
.pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.js .pin { position: sticky; top: 0; }
/* until the door has opened the page is held still: the first gesture opens it */
html.gate { overflow: hidden; overscroll-behavior: none; touch-action: none; }
html.gate body { overflow: hidden; }
html.gate .pin { cursor: pointer; }

.scene { position: absolute; left: 50%; top: 50%; width: max(104vw, 185.1vh); width: max(104vw, 185.1svh); aspect-ratio: 1680 / 944; transform: translate(-50%, -50%); }
.layer { position: absolute; inset: 0; transform-origin: 50.06% 52.5%; will-change: transform, opacity; }
.layer img { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.layer--beyond { transform-origin: 50% 53%; }

/* the floating stones: cut out of the valley picture, each one drifts slowly up and down on its own timing (set per stone in the page)
   Only transform is animated. They rest when the entrance is off screen or the visitor prefers reduced motion. */
.rock { position: absolute; pointer-events: none; will-change: transform; animation: rock-float var(--dur, 10s) ease-in-out var(--delay, 0s) infinite alternate; }
.layer .rock img { position: static; display: block; width: 100%; height: auto; }
@keyframes rock-float {
  from { transform: translate3d(0, calc(var(--amp, 6%) * .5), 0); }
  to   { transform: translate3d(0, calc(var(--amp, 6%) * -.5), 0); }
}
.stage.is-away .rock, .stage.is-away .glow { animation-play-state: paused; }
.js .layer--beyond { opacity: 0; visibility: hidden; }
.layer--far, .layer--arch { transform-origin: 50.06% 52.5%; }
/* three of the stones carry a soft green light that slowly breathes */
.glow {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; opacity: .5; animation: glow-breathe 5.5s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(60, 255, 150, .8), rgba(31, 174, 108, .32) 40%, transparent 70%);
}
.rock:nth-of-type(2) .glow { animation-duration: 7s; animation-delay: -2s; }
.rock:nth-of-type(3) .glow { animation-duration: 4.6s; animation-delay: -3.4s; }
@keyframes glow-breathe { from { opacity: .22; } to { opacity: .75; } }

/* the light you walk into: a small soft disc that is scaled up, so it costs almost nothing */
.bloom {
  position: absolute; left: var(--dx, 50%); top: var(--dy, 52.5%); width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin;
  border-radius: 50%; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle closest-side, #fff 0, rgba(214, 255, 230, .96) 7%, rgba(95, 240, 165, .82) 20%, rgba(31, 174, 108, .56) 42%, rgba(11, 93, 59, .26) 70%, transparent 100%);
}

/* grading */
.shade { position: absolute; inset: 0; pointer-events: none; }
.shade--top { height: 200px; bottom: auto; background: radial-gradient(ellipse 46% 100% at 0% 0%, rgba(5, 10, 7, .62), transparent 75%), linear-gradient(180deg, rgba(5, 10, 7, .55), transparent); }
.shade--bottom { top: auto; height: 62%; background: linear-gradient(0deg, rgba(5, 10, 7, .82), rgba(5, 10, 7, .4) 45%, transparent); will-change: opacity; }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* words */
.side { position: absolute; z-index: 10; left: max(var(--gut-l), calc((100% - 1280px) / 2 + var(--gut-l))); bottom: clamp(36px, 12vh, 120px); color: var(--white); text-shadow: 0 2px 20px rgba(0, 0, 0, .7); will-change: opacity, transform; pointer-events: none; }
.side__rule { display: block; width: 36px; height: 2px; background: var(--emerald); margin-bottom: 14px; }
.side p { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 1.55vw, 1.4rem); line-height: 1.28; letter-spacing: -.01em; }
.cue { position: absolute; z-index: 10; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); pointer-events: none; will-change: opacity; }
.cue i { width: 1px; height: 28px; background: linear-gradient(180deg, #fff, transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.skipintro {
  position: absolute; z-index: 12; right: max(var(--gut-r), 16px); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(10, 15, 12, .4); color: #fff;
  font: 600 .875rem var(--f-body); cursor: pointer; will-change: opacity; transition: background-color .25s;
}
.skipintro:hover { background: rgba(255, 255, 255, .18); }

.copy { position: absolute; z-index: 10; left: max(var(--gut-l), calc((100% - 1280px) / 2 + var(--gut-l))); bottom: clamp(32px, 9vh, 96px); max-width: min(640px, calc(100% - var(--gut-l) - var(--gut-r))); text-shadow: 0 2px 24px rgba(0, 0, 0, .55); will-change: opacity, transform; display: flex; flex-direction: column; gap: clamp(.9rem, 1.6vw, 1.3rem); }
.copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -14vw; right: -12vw; top: -130px; bottom: -80px;
  background: radial-gradient(closest-side, rgba(5, 10, 7, .68), rgba(5, 10, 7, .5) 45%, rgba(5, 10, 7, .2) 75%, transparent 100%);
}
.copy .eyebrow { color: var(--mint); }
.copy h1 { font-weight: 700; font-size: clamp(2.35rem, 4.9vw, 4.35rem); line-height: 1.02; letter-spacing: -.03em; }
.copy .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.copy .ln:last-child { color: #5BF0A0; }
.copy .lead { color: #E9F3ED; max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; }
.copy .btn { background: var(--emerald); color: var(--ink); text-shadow: none; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); }
.copy .btn:hover { background: #3CC584; }
.copy .link { color: #fff; text-decoration-color: var(--emerald); }
.copy .link:hover { color: var(--mint); }
.copy :focus-visible, .skipintro:focus-visible, .cue + :focus-visible { outline-color: #fff; }
/* the headline opens line by line (time-driven, so it stays smooth even when the page is busy) */
.js .copy .ln > span { display: block; transform: translateY(112%); transition: transform .4s var(--ease); }
.js .copy .rv { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.js .stage.is-open .copy .ln > span { transform: none; transition: transform 1s var(--ease); transition-delay: calc(.05s + var(--i) * .14s); }
.js .stage.is-open .copy .rv { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(.4s + var(--i) * .12s); }
.js .copy { opacity: 0; visibility: hidden; }
.js .side, .js .cue, .js .skipintro { will-change: opacity; }
html { scrollbar-gutter: stable; }

/* phones: once you are in, the valley stays still while you scroll and just drifts slowly from side to side by itself */
@keyframes valley-drift {
  0%   { translate: 0 0; }
  25%  { translate: calc(var(--drift, 0px) * -1) 0; }
  75%  { translate: var(--drift, 0px) 0; }
  100% { translate: 0 0; }
}
@media (max-width: 700px) {
  .js .stage { height: calc(100vh + 48vh); height: calc(100svh + 48svh); }
  .stage[data-state="open"] .scene { animation: valley-drift 72s ease-in-out infinite; }
  .stage.is-away .scene { animation-play-state: paused; }
  .copy h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .cue { left: var(--gut-l); transform: none; justify-items: start; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .skipintro { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .shade--top { height: 130px; }
  .copy { bottom: clamp(70px, 11vh, 110px); }
}

/* reduced motion and no JavaScript: the finished valley, no film */
.rm .stage, .rm.js .stage { height: auto; min-height: 100svh; }
.rm .pin, .rm.js .pin { position: relative; min-height: 100svh; }
.rm .cue, .rm .skipintro, .rm .layer--far, .rm .layer--arch, .rm .bloom { display: none; }
.rm .side { display: none; }
.rm.js .copy, .rm.js .copy .rv { opacity: 1; visibility: visible; transform: none; }
.rm.js .copy .ln > span { transform: none; }
:root:not(.js) .side, :root:not(.js) .cue, :root:not(.js) .skipintro, :root:not(.js) .layer--far, :root:not(.js) .layer--arch, :root:not(.js) .bloom, :root:not(.js) .motes { display: none; }
.rm .rock, .rm .glow, .rm .scene { animation: none; }
.rm .glow { opacity: .4; }

/* ---------- sheets (sections stacked like layered cards) ---------- */
.flow { position: relative; z-index: 2; margin-top: calc(var(--r) * -1); }
.sheet {
  position: relative;
  border-radius: var(--r) var(--r) 0 0;
  padding-top: clamp(4rem, 2.5rem + 7vw, 8.5rem);
  padding-bottom: calc(clamp(4rem, 2.5rem + 7vw, 8.5rem) + var(--r));
  box-shadow: var(--shadow-sheet);
}
.sheet + .sheet { margin-top: calc(var(--r) * -1); }
.sheet:last-child { padding-bottom: clamp(4rem, 2.5rem + 7vw, 8.5rem); }
@property --tier-bg { syntax: "<color>"; inherits: true; initial-value: #F5F8F6; }
.levels { --tier-bg: var(--mist); background-color: var(--tier-bg); transition: --tier-bg .9s var(--ease); overflow: clip; isolation: isolate; }
.levels[data-tier="pro"] { --tier-bg: var(--mint-lite); }
.levels[data-tier="premium"] { --tier-bg: var(--mint); }
/* a soft landscape behind the heading; painted hills show until the picture is there */
.levels__bg {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: clamp(560px, 92vh, 1000px); pointer-events: none; opacity: .8;
  background:
    radial-gradient(70% 38% at 12% 100%, rgba(31, 174, 108, .20), transparent 70%),
    radial-gradient(60% 34% at 92% 96%, rgba(11, 93, 59, .14), transparent 70%),
    radial-gradient(50% 36% at 82% 6%, rgba(255, 236, 190, .65), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
}
.levels .wrap { position: relative; }
.samples { background: var(--ink); color: var(--white); overflow: clip; isolation: isolate; }
.included { background: var(--mist); }
.process { background: var(--white); overflow: clip; isolation: isolate; }
.faq { background: var(--mist); }
.contact { background: var(--ink); color: var(--white); overflow: clip; isolation: isolate; }

/* ---------- pictures behind three parts (samples, how it works, contact) ----------
   The files are written into the page by build.py (photo_css). A picture is only fetched when its part is close (main.js adds .is-near), fades in,
   and drifts a little slower than the page (--py). A soft green light follows the pointer over the dark ones (--mx, --my, --spot). */
.bgpic { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.bgpic > i {
  position: absolute; z-index: 0; left: 0; right: 0; top: -12%; bottom: -12%; background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform; opacity: 0; transition: opacity 1.2s ease;
}
.bgpic.is-near > i, :root:not(.js) .bgpic > i { opacity: 1; }
html.js .bgpic:not(.is-near) > i { background-image: none; }
.bgpic::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.bgpic::before {
  content: ""; position: absolute; z-index: 2; inset: 0; opacity: var(--spot, 0); transition: opacity .6s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 40%), rgba(60, 255, 150, .16), transparent 68%);
}
.bgpic--gate::after {
  background:
    linear-gradient(180deg, var(--ink) 0, rgba(10, 15, 12, 0) 8rem, rgba(10, 15, 12, 0) calc(100% - 8rem), var(--ink) 100%),
    linear-gradient(90deg, rgba(8, 13, 10, .9) 0, rgba(8, 13, 10, .66) 32%, rgba(8, 13, 10, .28) 70%, rgba(8, 13, 10, .2) 100%);
}
.bgpic--castle::after { background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 9rem, rgba(255, 255, 255, 0) calc(100% - 9rem), #fff 100%); }
.bgpic--castle::before { display: none; }
.bgpic--path::after {
  background:
    linear-gradient(180deg, var(--ink) 0, rgba(10, 15, 12, .3) 24%, rgba(10, 15, 12, .12) 58%, rgba(10, 15, 12, .8) 100%),
    linear-gradient(90deg, rgba(10, 15, 12, .78) 0, rgba(10, 15, 12, .34) 56%, rgba(10, 15, 12, .08) 100%);
}

.section__head { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
h2 {
  font-weight: 700;
  font-size: clamp(1.95rem, 1rem + 3.9vw, 3.8rem);
  line-height: 1.06; letter-spacing: -.03em;
}
h3 { font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.65rem); line-height: 1.18; letter-spacing: -.015em; }

/* reveal on scroll: starts partly visible so nothing is ever blank */
.js .reveal { opacity: .22; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.section__head .eyebrow { display: inline-flex; align-items: center; gap: .7rem; }
.section__head .eyebrow::before { content: ""; width: 2rem; height: 2px; border-radius: 2px; background: currentColor; transition: width .9s var(--ease) .25s; }
.js .section__head.reveal:not(.in) .eyebrow::before { width: 0; }

/* ---------- browser frame (the levels preview) ---------- */
.browser {
  border-radius: 18px; background: var(--white); border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 60px 90px -45px rgba(10, 15, 12, .45), 0 24px 40px -24px rgba(10, 15, 12, .25);
}
.browser__bar { display: flex; align-items: center; gap: .75rem; padding: 10px 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #C4CCC7; }
.browser__url {
  flex: 1; max-width: 17rem; font-size: .75rem; line-height: 1; color: var(--slate); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser__view { position: relative; aspect-ratio: 16 / 11; background: var(--white); overflow: hidden; }

/* ---------- ladder (signature moment) ---------- */
.ladder { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ladder__stage {
  position: sticky; top: calc(var(--head-h) + 20px);
  display: flex; flex-direction: column; gap: 1rem; z-index: 3;
}
.pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
  min-height: 44px; padding: 0 1.15rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--white); color: var(--slate); font: 600 .9375rem/1 var(--f-body); cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.pill:hover { color: var(--ink); border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.stage__foot { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.stage__foot .btn { min-height: 48px; padding: 0 1.3rem; font-size: .9375rem; }
.stage__note { font-size: .875rem; color: var(--slate); }
.demolink {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: 0 1.15rem; margin-top: .25rem;
  border: 1.5px solid var(--forest); border-radius: 999px; color: var(--forest); font: 700 .9375rem/1 var(--f-body); text-decoration: none;
  transition: background-color .25s, color .25s, transform .35s var(--ease);
}
.demolink:hover { background: var(--forest); color: var(--white); transform: translateX(3px); }
.demolink:focus-visible { outline-offset: 3px; }
.ladder .browser { transition: box-shadow .8s ease, transform .8s var(--ease); }
.ladder[data-tier="premium"] .ladder__stage .browser { transform: translateY(-4px); }
.step__box { display: none; }

.ladder__steps { display: flex; flex-direction: column; }
.step {
  min-height: min(78vh, 640px); display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  padding-block: 1.5rem;
}
.step h3, .step .ticks li { transition: color .5s var(--ease); }
.step:not(.is-active) h3, .step:not(.is-active) .ticks li { color: var(--slate); }
.step__tag {
  align-self: flex-start; display: flex; align-items: center; gap: .6rem;
  font: 700 .8125rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--forest);
}
.step__tag::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: width .6s var(--ease); }
.step.is-active .step__tag::before { width: 44px; }
.step__tag--premium::before { display: none; }
.step__tag--premium { background: var(--mint); color: var(--ink); padding: .5rem .7rem; border-radius: 999px; }
.step > p:not(.step__tag):not(.step__here) { color: var(--slate); max-width: 30em; }
.ticks { display: flex; flex-direction: column; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.7rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: .9rem; height: .5rem;
  border-left: 2px solid var(--forest); border-bottom: 2px solid var(--forest); transform: rotate(-45deg) translateY(-30%);
}
.step__here { font-size: .9375rem; color: var(--forest); font-weight: 600; }
.ladder + .fine { margin-top: 1rem; }
.step__cta { font-size: .9375rem; }
.step__cta a { color: var(--forest); font-weight: 700; text-underline-offset: 4px; }
.plannote { display: grid; gap: .5rem; max-width: 46rem; margin-top: 1.25rem; }
.plannote p:first-child { color: var(--ink); font-size: 1.0625rem; }

@media (max-width: 899px) {
  .ladder { grid-template-columns: 1fr; gap: 1rem; }
  /* phones: no pinned box. Each level carries its own sample page right above its writing, and the two scroll down together */
  .ladder__stage { display: none; }
  .step__box { display: block; max-width: 36rem; margin-bottom: .75rem; }
  .step__box .mock { opacity: 1; visibility: visible; transition: none; }
  .levels__bg { height: 240px; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 100%); }
  .step { min-height: 0; justify-content: flex-start; padding-block: 1.75rem 2rem; }
}

/* ---- sample page mock-ups (sizes in cqw so they scale with the frame) ---- */
.mock {
  position: absolute; inset: 0; container-type: inline-size; background: var(--white); color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s .22s;
}
.ladder[data-tier="standard"] .mock--standard,
.ladder[data-tier="pro"] .mock--pro,
.ladder[data-tier="premium"] .mock--premium { opacity: 1; visibility: visible; transition: opacity .5s ease .14s; }
.m { position: absolute; inset: 0; font: 400 2.5cqw/1.4 var(--f-body); overflow: hidden; }
.m-nav { display: flex; align-items: center; gap: 3.2cqw; padding: 3cqw 5cqw; }
.m-nav b { margin-right: auto; font-size: 3cqw; font-weight: 700; }
.m-nav span { font-size: 2.2cqw; opacity: .8; }
.m-btn { display: inline-block; padding: 1.5cqw 3.4cqw; border-radius: 99cqw; background: var(--forest); color: #fff; font-size: 2.3cqw; font-weight: 700; }
.m-cols, .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.m-cols > div, .m-cards > div, .m-stack > div { display: flex; flex-direction: column; gap: 1cqw; }
.m-cols b, .m-cards b, .m-stack b { font-size: 2.5cqw; }
.m-cols i, .m-cards i, .m-stack i { display: block; height: 1cqw; border-radius: 1cqw; background: var(--ink); opacity: .14; }
.m-cols i:last-child, .m-cards i:last-child { width: 70%; }

/* Standard: one typeface, flat and calm */
.mock--standard .m-hero { padding: 5cqw 5cqw 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2cqw; }
.mock--standard h4 { font: 700 7.4cqw/1.05 var(--f-body); letter-spacing: -.01em; max-width: 14ch; }
.mock--standard .m-hero p { max-width: 38cqw; font-size: 2.5cqw; color: var(--slate); }
.mock--standard .m-cols { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; border-top: .3cqw solid var(--line); padding-top: 3cqw; }

/* Pro: second typeface, photo-led opening, layered blocks, shadows */
.mock--pro { background: var(--mist); }
.mock--pro .m-top { position: absolute; left: 0; right: 0; top: 0; height: 50cqw; color: #fff; background: linear-gradient(120deg, #0A0F0C 0%, #0B5D3B 100%); }
.mock--pro .m-nav span.on { opacity: 1; position: relative; }
.mock--pro .m-nav span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.8cqw; height: .4cqw; background: #fff; border-radius: 1cqw; }
.mock--pro .m-copy { position: absolute; left: 5cqw; top: 12.5cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.8cqw; width: 52cqw; }
.mock--pro h4 { font: 800 6.8cqw/1 var(--f-display); font-stretch: 104%; letter-spacing: -.03em; }
.mock--pro .m-copy p { font-size: 2.4cqw; opacity: .92; max-width: 36cqw; }
.mock--pro .m-btn { background: #fff; color: var(--forest); }
.mock--pro .m-art { position: absolute; right: 5cqw; top: 8cqw; width: 34cqw; height: 32cqw; }
.mock--pro .m-blk { position: absolute; border-radius: 2cqw; box-shadow: 0 2cqw 4cqw -1.4cqw rgba(0, 0, 0, .45); }
.mock--pro .b1 { inset: 0 8cqw 8cqw 0; background: linear-gradient(145deg, #D6F1E2, #6FD0A0); }
.mock--pro .b2 { inset: 9cqw 0 0 12cqw; background: #F5F8F6; opacity: .97; }
.mock--pro .b3 { left: 3cqw; bottom: 3cqw; width: 11cqw; height: 11cqw; background: #1FAE6C; border-radius: 50%; }
.mock--pro .m-cards { position: absolute; left: 5cqw; right: 5cqw; top: 46cqw; }
.mock--pro .m-cards > div { background: #fff; border-radius: 2cqw; padding: 2.6cqw; box-shadow: 0 2.2cqw 4.4cqw -2cqw rgba(10, 15, 12, .3); }

/* Premium: large type, depth, layered surfaces, one signature detail */
.mock--premium { background: #0A0F0C; color: #F5F8F6; }
.mock--premium .m-glow { position: absolute; width: 80cqw; height: 80cqw; right: -22cqw; top: -34cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 174, 108, .7), rgba(31, 174, 108, 0)); }
.mock--premium .m-nav { position: relative; }
.mock--premium .m-nav span.on { opacity: 1; color: #D6F1E2; }
.mock--premium h4 { position: absolute; left: 5cqw; top: 13cqw; font: 800 12.4cqw/.88 var(--f-display); font-stretch: 104%; letter-spacing: -.05em; }
.mock--premium h4 span { display: block; }
.mock--premium h4 .o { color: transparent; -webkit-text-stroke: .28cqw #F5F8F6; }
.mock--premium > .m > p { position: absolute; left: 5cqw; top: 40cqw; width: 33cqw; font-size: 2.4cqw; opacity: .88; }
.mock--premium > .m > .m-btn { position: absolute; left: 5cqw; top: 53cqw; background: #1FAE6C; color: #0A0F0C; }
.mock--premium .m-seal { position: absolute; right: 5cqw; top: 12cqw; width: 21cqw; height: 21cqw; overflow: visible; }
.mock--premium .m-seal text { font: 700 9.4px/1 var(--f-body); fill: #D6F1E2; letter-spacing: .06em; text-transform: uppercase; }
.mock--premium .m-seal circle { fill: #1FAE6C; }
.mock--premium .m-seal__ring { transform-origin: 50px 50px; }
.ladder[data-tier="premium"] .m-seal__ring { animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mock--premium .m-stack { position: absolute; right: 4cqw; top: 40cqw; width: 56cqw; height: 24cqw; }
.mock--premium .m-stack > div { position: absolute; width: 22cqw; padding: 2.2cqw; border-radius: 2cqw; background: #111B15; box-shadow: 0 3cqw 5cqw -1.5cqw rgba(0, 0, 0, .7), 0 0 0 .2cqw rgba(255, 255, 255, .1) inset; transform: rotate(var(--rot, 0deg)); }
.mock--premium .m-stack i { background: #F5F8F6; }
.mock--premium .c1 { left: 0; top: 4cqw; --rot: -4deg; }
.mock--premium .c2 { left: 17cqw; top: 0; --rot: 1.5deg; background: #16241C; z-index: 1; }
.mock--premium .c3 { left: 34cqw; top: 5cqw; --rot: 5deg; background: #1D3225; z-index: 2; }

/* ---------- samples (the endless sideways strip) ---------- */
.samples__layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.samples__intro { display: flex; flex-direction: column; gap: 1.1rem; }
.samples__intro h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 2.9rem); }
.samples__intro p:not(.eyebrow) { color: var(--slate); }
.samples__ctrl { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.round {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  font-size: 1.15rem; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.round:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.textbtn {
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  font: 600 .9375rem/1 var(--f-body); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.textbtn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.samples__hint { flex-basis: 100%; font-size: .875rem; color: var(--slate); }
/* the samples sit on the dark forest picture */
.samples .eyebrow { color: #5BF0A0; }
.samples h2 { color: var(--white); }
.samples__intro p:not(.eyebrow), .samples__hint { color: #D5E3DB; }
.samples .round, .samples .textbtn { background: rgba(255, 255, 255, .08); color: var(--white); border-color: rgba(255, 255, 255, .55); }
.samples .round:hover, .samples .textbtn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.samples .sample figcaption { color: var(--white); }
.samples .sample figcaption span { color: #BFD0C6; }
.samples :focus-visible { outline-color: var(--white); }
.samples .sample__view { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 28px 44px -22px rgba(0, 0, 0, .85); }
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } }

.samples__rail {
  position: relative; display: flex; align-items: center; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  min-height: 26.5rem; padding: 1.5rem 0 1.75rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.samples__rail::-webkit-scrollbar { display: none; }
.js .samples__rail { cursor: grab; }
.samples__rail.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.sample { flex: 0 0 auto; width: 13.5rem; margin: 0; display: flex; flex-direction: column; gap: .75rem; outline-offset: 8px; }
.sample__view {
  aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; position: relative; container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(10, 15, 12, .1), 0 22px 36px -22px rgba(10, 15, 12, .45);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  will-change: transform;
}
.sample figcaption { display: flex; flex-direction: column; font-size: .9375rem; line-height: 1.3; }
.sample figcaption span { color: var(--slate); font-size: .8125rem; }
@media (hover: hover) {
  .sample:hover .sample__view { transform: scale(1.14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 40px 60px -22px rgba(0, 0, 0, .9), 0 0 50px -8px rgba(60, 255, 150, .35); }
}
.sample:focus-visible .sample__view { transform: scale(1.08); }
.samples__rail.is-loop { overflow: hidden; touch-action: pan-y; }
.samples__track { position: relative; display: flex; align-items: center; gap: 18px; width: max-content; will-change: transform; }

.s { position: absolute; inset: 0; background: var(--s-bg); color: var(--s-ink); font: 400 4.2cqw/1.4 var(--f-body); display: flex; flex-direction: column; overflow: hidden; }
.s-nav { display: flex; align-items: center; gap: 3cqw; padding: 6cqw 7cqw 0; position: relative; z-index: 1; }
.s-nav b { margin-right: auto; font: 800 5cqw/1 var(--f-display); font-stretch: 104%; }
.s-nav i { width: 6cqw; height: 1.2cqw; border-radius: 1cqw; background: currentColor; opacity: .4; }
.s-body { padding: 7cqw 7cqw 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3cqw; }
.s-body h4 { font: 800 11.5cqw/.98 var(--f-display); font-stretch: 104%; letter-spacing: -.03em; text-wrap: balance; }
.s-body p { font-size: 4.2cqw; opacity: .82; }
.s-btn { display: inline-block; padding: 2.4cqw 5cqw; border-radius: 99cqw; background: var(--s-brand); color: var(--s-on); font-weight: 700; font-size: 4cqw; }
.s--a .s-art { margin: auto 7cqw 7cqw; height: 36cqw; border-radius: 6cqw; position: relative; background: linear-gradient(140deg, var(--s-brand), var(--s-acc)); overflow: hidden; }
.s--a .s-art i { position: absolute; border-radius: 50%; background: var(--s-bg); opacity: .22; }
.s--a .s-art i:first-child { width: 40cqw; height: 40cqw; right: -8cqw; top: -14cqw; }
.s--a .s-art i:last-child { width: 24cqw; height: 24cqw; left: 6cqw; bottom: -10cqw; opacity: .35; }
.s--b .s-nav { justify-content: center; }
.s--b .s-nav b { margin-right: 0; }
.s--b .s-nav i { display: none; }
.s--b .s-body { align-items: center; text-align: center; padding-top: 10cqw; }
.s--b .s-body h4 { font-size: 11cqw; }
.s--b .s-tiles { margin: auto 7cqw 7cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.s--b .s-tiles i { height: 26cqw; border-radius: 4cqw; background: var(--s-brand); }
.s--b .s-tiles i:nth-child(2) { background: var(--s-acc); transform: translateY(-4cqw); }
.s--b .s-tiles i:nth-child(3) { background: var(--s-ink); opacity: .85; }
.s--c .s-photo { position: relative; height: 56cqw; background: linear-gradient(160deg, var(--s-brand), var(--s-ink)); overflow: hidden; }
.s--c .s-photo .s-nav b { color: var(--s-bg); }
.s--c .s-photo .s-nav i { background: var(--s-bg); }
.s--c .s-shape { position: absolute; right: -10cqw; bottom: -18cqw; width: 70cqw; height: 70cqw; border-radius: 50%; background: var(--s-acc); opacity: .9; box-shadow: 0 0 0 7cqw rgba(255, 255, 255, .1); }
.s--c .s-body { padding-top: 6cqw; gap: 2.4cqw; }
.s--c .s-body h4 { font-size: 9.6cqw; }
/* with a real picture */
.s--ph.s--a .s-art { height: 46cqw; box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, .4); }
.s--ph .s-art i { display: none; }
.s--b .s-tiles--ph { grid-template-columns: 1.9fr 1fr; gap: 3cqw; }
.s--b .s-tiles--ph i { height: 32cqw; }
.s--b .s-tiles--ph i:nth-child(2) { transform: none; background: var(--s-acc); opacity: 1; }
.s--b .s-tiles--ph .ph { border-radius: 4cqw; box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, .4); }
.s--c .s-photo.ph { height: 60cqw; }
.s--c .s-photo.ph::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 58%); }
.s--c .s-photo.ph .s-shape { width: 42cqw; height: 42cqw; right: -9cqw; bottom: -17cqw; opacity: .96; box-shadow: 0 0 0 5cqw rgba(255, 255, 255, .14); }

@media (max-width: 899px) {
  .samples__layout { grid-template-columns: 1fr; align-items: stretch; }
  .samples__rail { margin-inline: calc(var(--gut-l) * -1) calc(var(--gut-r) * -1); min-height: 0; }
  .sample { width: min(68vw, 17rem); }
}

/* ---------- included ---------- */
.included { overflow: clip; }
.included::before {
  content: ""; position: absolute; right: -14%; top: -8%; width: min(70vw, 760px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31, 174, 108, .16), rgba(31, 174, 108, 0));
}
.included .wrap { position: relative; }
.included__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.included__col { display: flex; flex-direction: column; }
.included__h { padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feat__item--wide { grid-column: 1 / -1; }
.feat__card {
  position: relative; height: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 20px; background: var(--white); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(10, 15, 12, .07), 0 16px 26px -20px rgba(10, 15, 12, .4);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.feat__card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(11, 93, 59, .3), 0 30px 40px -22px rgba(11, 93, 59, .5); }
.feat__ic {
  flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--white);
  background: linear-gradient(150deg, #34D58C, var(--forest));
  box-shadow: 0 10px 16px -8px rgba(11, 93, 59, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .45s var(--ease);
}
.feat__card:hover .feat__ic { transform: rotate(-6deg) scale(1.08); }
.feat__card::after, .included__col--extra::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 174, 108, .17), transparent 70%);
}
.included__col--extra::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 240, 160, .2), transparent 70%); }
@media (hover: hover) { .feat__card:hover::after, .included__col--extra:hover::after { opacity: 1; } }
.feat__t { font-weight: 600; line-height: 1.4; padding-top: .2rem; }

.included__col--extra {
  position: relative; overflow: hidden; gap: .9rem; color: var(--white); border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(165deg, #10392A 0%, var(--ink) 72%);
  box-shadow: 0 36px 56px -30px rgba(10, 15, 12, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.included__col--extra > * { position: relative; }
.extra__glow { position: absolute !important; right: -34%; top: -30%; width: 95%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(31, 174, 108, .5), rgba(31, 174, 108, 0)); }
.extra__tag { font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #5BF0A0; }
.included__col--extra > h3 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.05; color: var(--white); }
.extra__sub { color: #CFE3D7; }
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: .5rem; }
.extras li {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: .5rem .85rem; border-radius: 15px; font-size: .9375rem; line-height: 1.25;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  transition: transform .35s var(--ease), background-color .25s;
}
.extras li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .15); }
.extras li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.extras .ic { flex: none; width: 22px; height: 22px; color: #5BF0A0; }
.extra__btn { align-self: flex-start; margin-top: .75rem; background: var(--emerald); color: var(--ink); }
.extra__btn:hover { background: var(--white); }
@media (max-width: 899px) { .included__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .feat { grid-template-columns: 1fr; } }

/* ---------- process timeline ---------- */
.process__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.process__notes { grid-column: 1 / -1; display: grid; gap: .6rem; max-width: 46rem; color: var(--slate); }
.process__head { position: sticky; top: calc(var(--head-h) + 28px); margin-bottom: 0; }
@property --edge { syntax: "<color>"; inherits: false; initial-value: #B4C0B9; }
.timeline { --p: 0; position: relative; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }
.timeline::before, .timeline::after { content: ""; position: absolute; z-index: 0; left: 26px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; }
.timeline::before { background: var(--line); }
.timeline::after { background: linear-gradient(180deg, var(--emerald), var(--forest)); transform: scaleY(var(--p)); transform-origin: top; }
.t-step { position: relative; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.4rem; perspective: 500px; }
/* each number is a raised block: a thick lower edge, a bright top edge and a shadow on the page */
.t-num {
  --edge: #B4C0B9;
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 8px;
  font: 800 1.5rem/1 var(--f-display); color: var(--slate);
  background: linear-gradient(160deg, #FFFFFF, #E3EBE7);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 8px 0 var(--edge), 0 20px 20px -8px rgba(10, 15, 12, .38);
  transform: translateY(0); transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s, background .5s, --edge .5s;
}
.t-step.in .t-num {
  --edge: var(--forest-deep); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  background: linear-gradient(160deg, #46E09B 0%, var(--emerald) 48%, var(--forest) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 8px 0 var(--edge), 0 22px 22px -8px rgba(8, 74, 47, .55);
  animation: num-rise .8s var(--ease) both;
}
.t-step:hover .t-num { transform: translateY(-4px) rotateX(10deg) rotateY(-10deg); }
@keyframes num-rise { 0% { transform: translateY(14px) scale(.8); } 55% { transform: translateY(-6px) scale(1.07); } 100% { transform: none; } }
.t-step > div { display: flex; flex-direction: column; gap: .5rem; padding-top: .7rem; }
.t-step p { color: var(--slate); max-width: 34em; }
@media (max-width: 899px) { .process__layout { grid-template-columns: 1fr; } .process__head { position: static; margin-bottom: 1rem; } }

/* ---------- FAQ ---------- */
.faq__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq .section__head { margin-bottom: 0; }
@media (min-width: 900px) { .faq .section__head { position: sticky; top: calc(var(--head-h) + 28px); } }
.faq__list { border-top: 1px solid var(--line-strong); }
details { border-bottom: 1px solid var(--line); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .9rem 0;
  font: 600 1.125rem/1.35 var(--f-body); cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: 4px;
  background: linear-gradient(var(--forest), var(--forest)) center / 100% 2px no-repeat, linear-gradient(var(--forest), var(--forest)) center / 2px 100% no-repeat;
  transition: transform .4s var(--ease);
}
details[open] summary::after { transform: rotate(135deg); }
summary { transition: color .25s, padding-left .35s var(--ease); }
summary:hover { color: var(--forest); }
@media (hover: hover) { summary:hover { padding-left: .5rem; } }
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
details p { padding: 0 2.5rem 1.4rem 0; color: var(--slate); max-width: 40em; animation: fade-up .5s var(--ease) both; }
@media (max-width: 899px) { .faq__layout { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- contact ---------- */
.contact .eyebrow { color: var(--emerald); }
.contact .lead { color: #DCE6DF; }
.contact .fine { color: #DCE6DF; }
a[href^="https://wa.me/"] { white-space: nowrap; }   /* the number stays on one line */
.contact__block { max-width: 40rem; font-size: 1rem; line-height: 1.6; color: #E6EEE9; }
.contact__block a { color: inherit; font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact__glow {
  position: absolute; left: 50%; top: -34%; width: min(110vw, 1100px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31, 174, 108, .38), rgba(31, 174, 108, 0));
}
.contact__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.contact__title {
  font-weight: 700; font-size: clamp(2.3rem, .8rem + 7vw, 6.2rem); line-height: 1; letter-spacing: -.035em; max-width: 12ch;
}
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .5rem; }
.contact .btn { background: var(--emerald); color: var(--ink); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.contact .btn:hover { background: var(--white); color: var(--ink); box-shadow: 0 20px 36px -14px rgba(0, 0, 0, .6); }
.contact :focus-visible { outline-color: var(--white); }
.copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.copyrow__addr { font: 600 1.05rem/1.2 var(--f-body); user-select: all; overflow-wrap: anywhere; }
.copybtn {
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .7);
  font: 600 .9375rem/1 var(--f-body); cursor: pointer; transition: background-color .25s, color .25s;
}
.copybtn:hover { background: var(--white); color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 2; background: var(--white); border-top: 1px solid var(--line); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.footer__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem 2rem; font-size: .9375rem; color: var(--slate); }
.footer__cta { justify-self: end; text-align: right; color: var(--ink); }
.footer__cta a { color: var(--forest); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.footer__meta, .footer__note { grid-column: 1 / -1; }
.footer__meta { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.footer__note { font-size: .875rem; line-height: 1.55; max-width: 60rem; }
.footer__bar .footer__note a, .footer__bar .footer__enq a { display: inline; min-height: 0; color: inherit; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer__note a { font-weight: 600; }
@media (max-width: 700px) { .footer__bar { grid-template-columns: 1fr; } .footer__cta { justify-self: start; text-align: left; } }
.footer__name strong { color: var(--ink); font-family: var(--f-display); font-weight: 800; margin-right: .5rem; }
.footer__bar a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- privacy policy ---------- */
.legal { background: var(--white); padding: calc(var(--head-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem); }
.legal--inline { display: none; position: relative; z-index: 2; padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.legal--inline:target { display: block; }
.legal__wrap { max-width: 48rem; display: flex; flex-direction: column; gap: 1rem; }
.legal .legal__title { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.legal__body { display: flex; flex-direction: column; gap: .9rem; margin-top: .5rem; }
.legal__body h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.legal__body p, .legal__body li { line-height: 1.65; }
.legal__meta { color: var(--slate); font-size: .9375rem; }
.legal__body ul, .legal__body ol { display: flex; flex-direction: column; gap: .4rem; padding-left: 1.2rem; list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__body h3 { font-size: 1.0625rem; font-weight: 700; margin-top: .75rem; }
.legal__body blockquote { padding: .8rem 1.1rem; border-left: 3px solid var(--emerald); background: var(--mist); border-radius: 0 12px 12px 0; }
.legal__body hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: .75rem 0; }
.legal__body li::marker { color: var(--forest); }
.legal__body a { color: var(--forest); text-underline-offset: 3px; overflow-wrap: anywhere; }
.notice { background: var(--mint); border-radius: 14px; padding: .9rem 1.1rem; font-size: .9375rem; }
.notice--plain { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
mark.ph { background: var(--mint); color: var(--ink); border-radius: 4px; padding: 0 .2em; box-shadow: inset 0 -2px 0 var(--emerald); }
.table-wrap { overflow-x: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table-wrap table.wide { min-width: 30rem; }
.table-wrap th { text-align: left; background: var(--mist); font-weight: 700; }
.table-wrap th, .table-wrap td { padding: .6rem .8rem; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
.table-wrap tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) { .legal__body h2 { font-size: 1.125rem; } .legal__body { font-size: .9375rem; } }

/* ---------- demo viewer: the Standard, Pro and Premium sample pages, full screen ---------- */
.demo { display: none; position: fixed; inset: 0; z-index: 90; flex-direction: column; background: var(--ink); color: var(--white); }
.demo.is-open { display: flex; }
html:not(.demo-ready) .demo:target { display: flex; }      /* without the script (or before it has run) the address opens the page; once it has run, only it decides */
html.demo-open { overflow: hidden; }
.demo__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gut-r) 10px var(--gut-l); background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.demo__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.demo__label strong { font: 800 1rem/1.2 var(--f-display); }
.demo__label span { color: #BFD0C6; font-size: .8125rem; }
.demo__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.demo__tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; color: var(--white); text-decoration: none; font: 600 .9375rem/1 var(--f-body); transition: background-color .25s; }
.demo__tabs a:hover { background: rgba(255, 255, 255, .14); }
.demo__tabs a[aria-current] { background: var(--emerald); color: var(--ink); }
.demo__close { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; color: var(--white); text-decoration: none; font: 600 .9375rem/1 var(--f-body); transition: background-color .25s, color .25s; }
.demo__close:hover { background: var(--white); color: var(--ink); }
.demo :focus-visible { outline-color: var(--white); }
.demo__scroll:focus-visible { outline: 0; border-radius: 0; }
.demo__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--d-bg); color: var(--d-ink); outline: none; }
.demo__end { background: var(--ink); color: var(--white); padding: clamp(2.5rem, 6vw, 4rem) var(--gut-r) calc(clamp(2.5rem, 6vw, 4rem) + env(safe-area-inset-bottom, 0px)) var(--gut-l); }
.demo__end-in { max-width: 62rem; margin-inline: auto; display: flex; flex-direction: column; gap: .5rem; }
.demo__end-t { font: 800 clamp(1.6rem, 4vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -.03em; }
.demo__end-p { color: #CFE3D7; }
.demo__end-a { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1rem; }
.demo__end .btn { background: var(--emerald); color: var(--ink); }
.demo__end .btn:hover { background: var(--white); }
.demo__own, .demo__next { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--white); font-weight: 600; text-decoration: underline; text-decoration-color: var(--emerald); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* the sample pages share these (the Standard and Pro versions of this site; their own styling is in tiers.css) */
.d { font: 400 1rem/1.6 var(--f-body); color: var(--d-ink); }
.d :is(h2, h3, h4, p, ol, ul, figure) { margin: 0; }
.d :focus-visible { outline-color: var(--d-brand); }
.d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.5rem; border: 0; border-radius: 999px; white-space: nowrap; text-decoration: none;
  background: var(--d-brand); color: var(--d-on); font: 700 1rem/1 var(--f-body); cursor: pointer; transition: transform .3s var(--ease), filter .2s, background-color .2s;
}
.d-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.d-btn--light { background: #fff; color: var(--d-ink); }
.d-btn--lg { min-height: 60px; padding: 0 2rem; font-size: 1.1rem; }
.js .d-rv { opacity: .2; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .d-rv.in { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .demo__label { display: none; }
  .demo__bar { justify-content: space-between; }
  .demo__tabs a { min-height: 38px; padding: 0 .75rem; font-size: .875rem; }
  .demo__close { padding: 0 .95rem; }
}
@media (max-width: 380px) {
  .demo__bar { gap: .5rem; }
  .demo__tabs { gap: 2px; padding: 3px; }
  .demo__tabs a { padding: 0 .6rem; font-size: .8125rem; }
  .demo__close { padding: 0 .75rem; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .d-rv { opacity: 1; transform: none; }
}

/* ---------- phones: smaller, bite-sized type ---------- */
@media (max-width: 700px) {
  body { font-size: 1rem; line-height: 1.6; }
  .lead { font-size: 1.0625rem; line-height: 1.5; }
  h2, .samples__intro h2 { font-size: clamp(1.65rem, 7.4vw, 2.15rem); line-height: 1.06; letter-spacing: -.03em; }
  h3 { font-size: 1.125rem; }
  .contact__title { font-size: clamp(1.95rem, 9vw, 2.9rem); }
  .eyebrow { letter-spacing: .1em; }
  .btn--lg { min-height: 54px; padding: 0 1.6rem; font-size: 1rem; }
  .brand { font-size: 1.1rem; }
  .step { min-height: 56vh; }
  summary { font-size: 1rem; min-height: 56px; }
  .ticks--big { gap: .75rem; }
  .sheet { padding-top: 3.25rem; padding-bottom: calc(3.25rem + var(--r)); }
  .sheet:last-child { padding-bottom: 3.25rem; }
  .section__head { gap: .75rem; margin-bottom: 1.75rem; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ladder[data-tier="premium"] .m-seal__ring { animation: none; }
  .rock { animation: none !important; }
}

/* ---------- plans label, enquiry notice (Cherry's A4 / A6 wording; text comes from site.json) ---------- */
.plans-label { margin-top: .35rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.enq { font-size: .875rem; line-height: 1.5; color: var(--slate); max-width: 46rem; }
.enq a { color: inherit; text-underline-offset: 3px; }
.plannote .enq { margin-top: .15rem; }
.enq--hero { max-width: 34rem; margin-top: -.15rem; color: #DCE9E1; font-size: .8125rem; }
.enq--extra { margin-top: 1rem; font-size: .8125rem; color: inherit; opacity: .82; }
.footer__enq { grid-column: 1 / -1; font-size: .875rem; color: var(--slate); max-width: 46rem; }
.footer__enq a { color: inherit; text-underline-offset: 3px; }
.demo__enq { margin-top: .9rem; max-width: 46rem; font-size: .8125rem; line-height: 1.5; color: #CFE3D7; }
.demo__enq a { color: inherit; text-underline-offset: 3px; }

/* =====================================================================================================
   The Standard and Pro versions of the Prime Solutions site. Premium is the page itself.
   Same sections, same words; only the treatment changes.
     Standard  one typeface, flat and calm, one picture, a gentle fade on opening
     Pro       two typefaces, the portal scene with only the swirl turning, layered blocks, reveals, a header that follows you down
   Colours come from the page's own variables (--d-*), set on the frame in demos.py.
   ===================================================================================================== */

.d { overflow-x: clip; }
.d .d-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.d-addr { font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.d-copy { min-height: 44px; padding: 0 1.1rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 600 .9375rem/1 var(--f-body); cursor: pointer; transition: background-color .2s, color .2s; }
.d-copy:hover { background: #fff; color: var(--d-ink); border-color: #fff; }
.d-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--d-brand); text-decoration: underline; text-decoration-color: var(--d-brand); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.d-link:hover { text-decoration-color: currentColor; }
.plan-cta { font-size: .9375rem; color: var(--d-mute); }
.plan-cta a { color: var(--d-brand); font-weight: 700; text-underline-offset: 4px; }
.d .d-fine { font-size: .875rem; }

/* ------------------------------------------------------------------------------------- Standard
   Its own colours (black, off-white, pastel green, forest green: site.json, standard_theme) and its own typeface (Prime Serif).
   Three soft forest pictures sit behind parts of the page, already mixed into the off-white; the portal and the sunrise sky are the
   same pictures as Pro and Premium, kept still. One gentle fade as each part arrives. No swirl, no sticky header, nothing on hover. */
.tier--standard { --f-body: 'Prime Serif', 'Lora', Georgia, 'Times New Roman', serif; --f-display: 'Prime Serif', 'Lora', Georgia, 'Times New Roman', serif; }   /* the skip link too, so the other typeface is never fetched here */
.d--standard { --ps-run: clamp(4.5rem, 9vw, 7rem); --ps-shadow: 0 1px 2px rgba(11, 15, 12, .06), 0 16px 30px -22px rgba(8, 74, 47, .42); --ps-shadow-lg: 0 2px 4px rgba(11, 15, 12, .06), 0 30px 48px -28px rgba(8, 74, 47, .55); --ps-lead: #2B352F;
  background: var(--d-bg); font-size: 1.0625rem; line-height: 1.65; font-variant-numeric: lining-nums; }
.d--standard :is(h2, h3, h4) { font-family: var(--f-body); font-weight: 700; text-wrap: balance; }
.ps-wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.d--standard section[id] { scroll-margin-top: 8px; }
.d--standard .d-rv { transform: translateY(12px); transition-duration: 1s; }
.d--standard .d-rv.in { transform: none; }
.d--standard .d-btn { letter-spacing: .01em; }

/* the top: header and opening share one picture (the castle valley), faded into the off-white on the left and at the bottom */
.ps-top { position: relative; isolation: isolate; background-color: var(--d-bg); padding-bottom: var(--ps-run); margin-bottom: calc(-1 * var(--ps-run)); }
.ps-top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--ps-rgb), .86) 0, rgba(var(--ps-rgb), .5) 5.5rem, rgba(var(--ps-rgb), 0) 11rem),
    linear-gradient(90deg, rgba(var(--ps-rgb), .94) 0%, rgba(var(--ps-rgb), .78) 30%, rgba(var(--ps-rgb), .22) 56%, rgba(var(--ps-rgb), 0) 74%),
    linear-gradient(180deg, rgba(var(--ps-rgb), 0) 52%, rgba(var(--ps-rgb), .7) 80%, rgb(var(--ps-rgb)) 100%); }
/* the header has no bar of its own: the picture shows through. Links in the middle; a burger on phones */
.ps-head .ps-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem 1.5rem; min-height: 76px; }
.ps-logo { justify-self: start; font-size: 1.2rem; font-weight: 700; letter-spacing: -.005em; color: var(--d-ink); text-decoration: none; }
.ps-logo span { color: var(--d-brand); }
.ps-head nav { display: flex; gap: 1.75rem; }
.ps-head nav a { padding: .6rem 0; font-size: 1rem; color: var(--d-ink); text-decoration: none; }
.ps-head nav a:hover { color: var(--d-brand); text-decoration: underline; text-decoration-color: var(--d-brand); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ps-head .ps-wrap > .d-btn { justify-self: end; }
.ps-menu { display: none; position: relative; justify-self: end; border: 0; }
.ps-menu summary { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer; list-style: none; }
.ps-menu summary::after { content: none; }
.ps-menu summary::-webkit-details-marker { display: none; }
.ps-menu summary:focus-visible { outline: 2px solid var(--d-brand); outline-offset: 2px; }
.ps-burger { position: relative; display: block; width: 22px; height: 16px; }
.ps-burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--d-ink); transition: transform .25s var(--ease), opacity .2s; }
.ps-burger i:nth-child(1) { top: 0; } .ps-burger i:nth-child(2) { top: 7px; } .ps-burger i:nth-child(3) { top: 14px; }
.ps-menu[open] .ps-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-menu[open] .ps-burger i:nth-child(2) { opacity: 0; }
.ps-menu[open] .ps-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ps-menu__panel { position: absolute; z-index: 6; top: calc(100% + .5rem); right: 0; display: grid; min-width: 13rem; padding: .5rem; border-radius: 16px; background: var(--d-card); box-shadow: var(--ps-shadow-lg), 0 0 0 1px var(--d-line); }
.ps-menu__panel a { display: flex; align-items: center; min-height: 46px; padding: 0 1rem; border-radius: 10px; color: var(--d-ink); text-decoration: none; }
.ps-menu__panel a:hover { background: var(--d-mint2); color: var(--d-brand); }
.ps-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font: 600 .8125rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--d-brand); }
.ps-eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--d-brand), var(--d-acc)); }

.ps-hero { display: flex; align-items: center; min-height: min(72vh, 38rem); padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem); }
.ps-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 34rem; animation: ps-in .9s var(--ease) both; }
.ps-hero h2 { font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.05; letter-spacing: -.015em; }
.ps-hero h2 span { display: block; }
.ps-hero h2 span:last-child { color: var(--d-brand); }
.ps-lead { font-size: 1.2rem; line-height: 1.55; color: var(--ps-lead); max-width: 28ch; }
.ps-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .4rem; }
@keyframes ps-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the bands */
.ps-band { position: relative; isolation: isolate; }
.ps-band--soft { background: linear-gradient(180deg, transparent 0, var(--d-bg) var(--ps-run, 6rem)); }
.ps-band--tint { background: linear-gradient(180deg, var(--d-mint2) 0%, var(--d-paper2) 100%); box-shadow: inset 0 1px 0 var(--d-line), inset 0 -1px 0 var(--d-line); }
.ps-band--gate, .ps-band--path { background-color: var(--d-bg); box-shadow: inset 0 1px 0 var(--d-line), inset 0 -1px 0 var(--d-line); }
/* writing straight on a picture takes the deeper green, so it stays readable over the darkest parts */
.ps-band--gate .ps-eyebrow, .ps-band--path .ps-eyebrow, .ps-top .ps-eyebrow { color: var(--d-deep); }
.ps-sky { position: absolute; inset: 0 0 auto; z-index: -1; height: min(24rem, 70%); pointer-events: none; background-size: cover; background-position: 50% 78%; opacity: .6; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, transparent 100%); }
.ps-block { padding-block: clamp(2.75rem, 6.5vw, 4.5rem); }
.ps-block__head { display: grid; gap: .65rem; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); max-width: 40rem; }
.ps-block h3 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.ps-block__head p:not(.ps-eyebrow) { color: var(--ps-lead); font-size: 1.1rem; }
.d .ps-note { margin-top: 1.75rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--d-card); box-shadow: inset 0 0 0 1px var(--d-line); font-size: .9375rem; color: var(--d-mute); }
.d .ps-note + .ps-note { margin-top: .6rem; }

.ps-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.ps-level { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.75rem 1.6rem 1.6rem; border-radius: 18px; background: var(--d-card); box-shadow: var(--ps-shadow), inset 0 0 0 1px var(--d-line); overflow: hidden; }
.ps-level::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--d-brand), var(--d-acc)); opacity: .45; }
.ps-level.is-here { background: linear-gradient(180deg, var(--d-card) 0%, var(--d-mint2) 100%); box-shadow: var(--ps-shadow-lg), inset 0 0 0 2px var(--d-brand); }
.ps-level.is-here::before { opacity: 1; }
.ps-tag { font: 700 .8125rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--d-brand); }
.ps-level h4 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ps-ticks { display: grid; gap: .5rem; }
.ps-ticks li { position: relative; padding-left: 1.6rem; }
.ps-ticks li::before { content: ""; position: absolute; left: .15rem; top: .42em; width: .62rem; height: .34rem; border-left: 2px solid var(--d-brand); border-bottom: 2px solid var(--d-brand); transform: rotate(-45deg); }
/* the level card's last part (its demo link, or 'This page', then the email link) sits at the bottom of the card */
.d .ps-level .ps-ticks, .d .pp-level .ps-ticks { margin-bottom: auto; }
.ps-here { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem; border-radius: 999px; background: var(--d-brand); color: var(--d-on); font-size: .875rem; font-weight: 700; }

/* sample cards: a picture, the trade, its headline, and the theme colours it is shown in */
.ps-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.ps-sample { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--d-card); box-shadow: var(--ps-shadow), inset 0 0 0 1px var(--d-line); }
.ps-sample__pic { aspect-ratio: 4 / 3; background-color: #DCE4D8; box-shadow: inset 0 -40px 40px -40px rgba(11, 15, 12, .35); }
.ps-sample figcaption { display: grid; gap: .3rem; padding: 1rem 1.2rem 1.15rem; }
.ps-sample strong { font-weight: 700; font-size: 1.1rem; }
.ps-sample figcaption span { color: var(--d-mute); font-size: .9375rem; }
.ps-sample__line { color: var(--d-ink) !important; }
.ps-sample__theme { display: flex; align-items: center; gap: .55rem; margin-top: .35rem; padding-top: .65rem; border-top: 1px solid var(--d-line); font-size: .875rem !important; }
.ps-sw { display: inline-flex; }
.ps-sw i { width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--d-card), 0 0 0 3px rgba(11, 15, 12, .14); }
.ps-sw i:first-child { margin-left: 0; }

.ps-incl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.d .ps-sub { margin-bottom: 1rem; font: 700 .8125rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ps-lead); }
.ps-feat { display: grid; gap: .8rem; }
.ps-feat li { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem .7rem .7rem; border-radius: 14px; background: var(--d-card); box-shadow: inset 0 0 0 1px var(--d-line), 0 10px 18px -16px rgba(8, 74, 47, .5); }
.ps-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--d-mint); box-shadow: inset 0 0 0 1px rgba(11, 93, 59, .16); color: var(--d-brand); }
.ps-extras { display: grid; gap: .5rem; padding: 1.6rem; border-radius: 18px; background: linear-gradient(180deg, var(--d-mint2) 0%, var(--d-card) 100%); box-shadow: var(--ps-shadow), inset 0 0 0 1px var(--d-line); }
.ps-extras h4 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.ps-extras > p { color: var(--d-mute); }
.ps-extras ul { display: grid; gap: .6rem; margin: .8rem 0 1.1rem; }
.ps-extras li { display: flex; align-items: center; gap: .7rem; }
.ps-extras li .d-ic { color: var(--d-brand); }
.ps-extras .d-btn { justify-self: start; }

.ps-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem clamp(1.25rem, 3vw, 2rem); }
.ps-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem 1rem; align-items: start; padding: 1.25rem 1.3rem; border-radius: 16px; background: var(--d-card); box-shadow: var(--ps-shadow), inset 0 0 0 1px var(--d-line); }
.ps-steps .n { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--d-brand); color: var(--d-on); font-weight: 700; box-shadow: 0 0 0 4px var(--d-mint); }
.ps-steps h4 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ps-steps p { color: var(--d-mute); }

.ps-faq { max-width: 46rem; border-radius: 16px; background: var(--d-card); box-shadow: var(--ps-shadow), inset 0 0 0 1px var(--d-line); }
.ps-faq details { padding-inline: 1.3rem; border-bottom: 1px solid var(--d-line); }
.ps-faq details:last-child { border-bottom: 0; }
.ps-faq summary { font-size: 1.0625rem; }
.ps-faq summary::after { background: linear-gradient(var(--d-brand), var(--d-brand)) center / 100% 2px no-repeat, linear-gradient(var(--d-brand), var(--d-brand)) center / 2px 100% no-repeat; }
.ps-faq summary:hover { color: var(--d-brand); }
.ps-faq details p { color: var(--d-mute); }

/* the last part: forest green, with the cloudy valley picture showing faintly through */
.ps-contact { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, var(--d-brand) 0%, var(--d-deep) 100%); color: var(--d-on); padding-block: clamp(3rem, 7vw, 5rem); }
.ps-contact__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .34; }
.ps-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(8, 74, 47, .94) 0%, rgba(8, 74, 47, .78) 60%, rgba(8, 74, 47, .7) 100%); }
.d--standard .ps-contact :focus-visible, .d--pro .pp-hero :focus-visible, .d--pro .pp-contact :focus-visible, .d--pro .pp-extras :focus-visible { outline-color: #fff; }
.ps-contact__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
.ps-contact__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ps-contact h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.ps-contact .ps-lead { color: var(--d-on); opacity: 1; }
.ps-contact .ps-eyebrow { color: var(--d-on); }
.ps-contact .ps-eyebrow::before { background: currentColor; }
.ps-contact .d-btn { background: var(--d-card); color: var(--d-ink); }
.ps-card { display: grid; gap: .8rem; justify-items: start; padding: 1.4rem 1.5rem; border-radius: 16px; background: rgba(251, 250, 245, .1); box-shadow: inset 0 0 0 1px rgba(251, 250, 245, .3), 0 24px 40px -28px rgba(0, 0, 0, .5); }
.ps-card .d-addr { font-size: 1.1rem; }
.ps-foot { display: grid; gap: .6rem; padding-block: 1.5rem; font-size: .9375rem; color: var(--d-mute); }
.ps-foot a { color: var(--d-mute); }
.ps-foot a:hover { color: var(--d-ink); }
.ps-foot__cta { color: var(--d-ink); }
.ps-foot .ps-foot__cta a { color: var(--d-brand); font-weight: 700; }
.ps-foot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ps-foot__note { font-size: .875rem; }

/* ------------------------------------------------------------------------------------- Pro
   Dark portal opening (the glow needs the dark), then the Standard colours: off-white, black, pastel and forest green. Two typefaces.
   The same three forest pictures as Standard sit behind its bands, but they melt into the page at their edges. Richer than Standard:
   a header that follows you down and goes clear, a vortex in the portal, layered cards that lift on hover. Less than Premium. */
.d--pro { --pp-night: #07110B; --pp-lead: #2B352F; --pp-shadow: 0 1px 2px rgba(11, 15, 12, .06), 0 20px 34px -24px rgba(8, 74, 47, .5);
  --pp-veil-castle: linear-gradient(180deg, rgba(7, 17, 11, 1) 0, rgba(7, 17, 11, 0) 7rem), linear-gradient(180deg, rgba(var(--ps-rgb), .34) 0, rgba(var(--ps-rgb), .64) 42%, rgba(var(--ps-rgb), .95) 100%);
  --pp-veil-gate: linear-gradient(180deg, rgb(var(--ps-rgb)) 0, rgba(var(--ps-rgb), 0) 6rem, rgba(var(--ps-rgb), 0) calc(100% - 6rem), rgb(var(--ps-rgb)) 100%);
  --pp-veil-path: var(--pp-veil-gate);
  background: var(--d-bg); }
.pp-wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.d--pro section[id] { scroll-margin-top: 76px; }
.pp-band { position: relative; isolation: isolate; display: flow-root; background-color: var(--d-bg); }

/* the header: it follows you down. Over the dark opening it is clear; below it, a soft off-white veil that blends into the page.
   (Without the script it simply stays the soft veil.) The links are in the middle, and on phones a burger takes over. */
.pp-head { position: sticky; top: 0; z-index: 5; margin-bottom: -76px; background: rgba(var(--ps-rgb), .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .35s, backdrop-filter .35s; }
.pp-head.on-hero { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pp-head .pp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem 1.5rem; min-height: 76px; }
.pp-logo { justify-self: start; font: 800 1.2rem/1 var(--f-display); font-stretch: 104%; letter-spacing: -.02em; color: var(--d-ink); text-decoration: none; transition: color .3s; }
.pp-logo span { color: var(--d-brand); transition: color .3s; }
.pp-head nav { display: flex; gap: 1.75rem; }
.pp-head nav a { position: relative; padding: .6rem 0; font-size: .9375rem; font-weight: 600; color: var(--d-ink); text-decoration: none; transition: color .3s; }
.pp-head nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 2px; background: var(--d-brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.pp-head nav a:hover::after, .pp-head nav a[aria-current]::after { transform: scaleX(1); }
.pp-head .pp-wrap > .d-btn { justify-self: end; transition: background-color .3s, color .3s; }
.pp-head .ps-menu { justify-self: end; }
.pp-head.on-hero .pp-logo, .pp-head.on-hero nav a { color: #fff; }
.pp-head.on-hero .pp-logo span { color: var(--d-mint); }
.pp-head.on-hero nav a::after { background: var(--d-mint); }
.pp-head.on-hero .pp-wrap > .d-btn { background: var(--d-card); color: var(--d-ink); }
.pp-head.on-hero .ps-burger i { background: #fff; }
.pp-kicker { font: 700 .8125rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--d-brand); }

/* the opening: the portal picture, and the clouds that swirl in toward the glow (pictures and the oval are written by build.py) */
.pp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(34rem, 50vw, 44rem); padding-block: clamp(6rem, 9vw, 8rem) clamp(10rem, 14vw, 12rem); background: var(--pp-night); color: #fff; }
.pp-hero__pic { position: absolute; inset: 0 0 0 20%; z-index: -1; container-type: size; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
.pp-scene { position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1680 / 944; transform: translate(-50%, -50%); background-size: 100% 100%; background-repeat: no-repeat; }
@supports (width: 1cqw) { .pp-scene { width: max(100cqw, 177.97cqh); } }
/* the swirl in the doorway turns clockwise around the white light: the whole doorway slowly, its middle faster, so it reads as a vortex.
   It is the doorway's own picture that turns (squashed round, turned, stretched back: see build.py), nothing is added on top. */
.pp-door { position: absolute; aspect-ratio: 1; -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }
.pp-door i { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; background-repeat: no-repeat; will-change: transform; }
.pp-door i:first-child { width: 100%; animation: pp-turn 42s linear infinite; }
.pp-door i:last-child { border-radius: 50%; animation: pp-turn 14s linear infinite; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
@keyframes pp-turn { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.pp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--pp-night) 0%, rgba(7, 17, 11, .8) 26%, rgba(7, 17, 11, 0) 52%), linear-gradient(0deg, var(--pp-night) 0%, rgba(7, 17, 11, 0) 22%); }
.pp-hero__in { width: 100%; }
.pp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; max-width: 30rem; }
.pp-hero .pp-kicker { color: var(--d-mint); }
.pp-hero h2 { font: 800 clamp(2.5rem, 5.4vw, 4.4rem)/.98 var(--f-display); font-stretch: 104%; letter-spacing: -.035em; }
.pp-hero h2 span { display: block; }
.pp-hero h2 span:last-child { color: var(--d-mint); }
.pp-sub { font-size: 1.15rem; line-height: 1.5; color: #E3EEE7; max-width: 30ch; }
.pp-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .4rem; }
.pp-cta .d-link { color: #fff; text-decoration-color: var(--d-mint); }
.pp-hero .d-btn--light, .pp-hero .d-btn { background: var(--d-card); color: var(--d-ink); }

/* levels: the castle valley behind the cards, rising out of the dark of the opening */
.pp-band--castle { background-color: var(--d-bg); }
.pp-levels { position: relative; z-index: 2; margin-top: calc(-1 * clamp(10rem, 14vw, 12rem) + clamp(1rem, 2.5vw, 2rem)); padding-bottom: clamp(3rem, 7vw, 5rem); }
.pp-levels__head { display: grid; gap: .5rem; margin-bottom: 1.5rem; color: #fff; }
.pp-levels__head .pp-kicker { color: var(--d-mint); }
.pp-levels__head h3 { font: 800 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--f-display); letter-spacing: -.03em; }
.pp-levels__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.pp-level { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.7rem; border-radius: 22px; background: var(--d-card); box-shadow: 0 32px 46px -28px rgba(7, 17, 11, .65), 0 0 0 1px rgba(11, 15, 12, .06); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pp-level .pp-kicker { color: var(--d-brand); }
.pp-level h4 { font: 800 1.5rem/1.1 var(--f-display); letter-spacing: -.02em; }
.pp-level .ps-ticks li::before { border-color: var(--d-brand); }
.pp-level.is-here { background: linear-gradient(165deg, var(--d-brand) 0%, var(--d-deep) 100%); color: var(--d-on); }
.pp-level.is-here .pp-kicker { color: var(--d-mint); }
.pp-level.is-here .ps-ticks li::before { border-color: var(--d-card); }
.pp-level .ps-here { background: var(--d-card); color: var(--d-ink); }
.pp-level.is-here .plan-cta, .pp-level.is-here .plan-cta a { color: var(--d-on); }

.d .pp-note { max-width: 46rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding: .9rem 1.1rem; border-left: 3px solid var(--d-acc); border-radius: 0 12px 12px 0; background: rgba(var(--ps-rgb), .82); font-size: .9375rem; }
.d .pp-note p, .d .pp-note p:first-child { color: var(--d-mute); font-size: .9375rem; }
.d .pp-note + .pp-note { margin-top: 1rem; }

.pp-sec { padding-block: clamp(3rem, 7vw, 5.5rem); }
.pp-sec__head { display: grid; gap: .6rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.pp-sec h3 { font: 800 clamp(1.9rem, 4vw, 3rem)/1.05 var(--f-display); font-stretch: 102%; letter-spacing: -.03em; }
.pp-sec__head p:not(.pp-kicker) { color: var(--pp-lead); font-size: 1.1rem; }

.pp-samples { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; padding-bottom: 2.4rem; }
.pp-samples::before { content: ""; position: absolute; z-index: -1; inset: 10% -2% 0 22%; border-radius: 32px; background: linear-gradient(160deg, var(--d-mint) 0%, var(--d-mint2) 100%); box-shadow: inset 0 0 0 1px rgba(11, 93, 59, .14); }
.pp-sample { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 20px; background: var(--d-ink); box-shadow: 0 30px 44px -30px rgba(7, 17, 11, .65); }
.pp-sample:nth-child(3n + 2) { margin-top: 2.4rem; }
.pp-sample .pp-pic { position: absolute; inset: 0; transition: transform .9s var(--ease); }
.pp-sample figcaption { position: absolute; inset: auto 0 0; display: grid; gap: .1rem; padding: 3rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(7, 17, 11, .92) 55%); color: #fff; }
.pp-sample strong { font: 800 1.2rem/1.2 var(--f-display); letter-spacing: -.01em; }
.pp-sample figcaption span { font-size: .9375rem; color: #E3EEE7; }

/* writing straight on a picture takes the deeper green, so it stays readable over the darkest parts */
.pp-band--gate .pp-kicker, .pp-band--path .pp-kicker { color: var(--d-deep); }

/* what is included: the stone gateway behind it */
.pp-incl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.d .pp-sub2 { margin-bottom: 1rem; font: 700 .8125rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pp-lead); }
.pp-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pp-feat li { display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem; border-radius: 18px; background: var(--d-card); box-shadow: 0 0 0 1px var(--d-line), 0 18px 30px -24px rgba(7, 17, 11, .5); transition: transform .35s var(--ease); }
.pp-feat li:last-child { grid-column: 1 / -1; }
.pp-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--d-brand); color: var(--d-on); }
.pp-extras { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: .5rem; padding: 1.9rem; border-radius: 26px; background: var(--d-ink); color: #fff; box-shadow: 0 34px 50px -30px rgba(7, 17, 11, .75); }
.pp-extras::before { content: ""; position: absolute; z-index: -1; right: -22%; top: -30%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(156, 196, 165, .5), rgba(156, 196, 165, 0)); }
.pp-extras .pp-kicker { color: var(--d-mint); }
.pp-extras h4 { font: 800 1.5rem/1.15 var(--f-display); letter-spacing: -.02em; }
.pp-extras > p:not(.pp-kicker) { color: #C9D6CE; }
.pp-extras ul { display: grid; gap: .65rem; margin: .8rem 0 1.2rem; }
.pp-extras li { display: flex; align-items: center; gap: .7rem; }
.pp-extras li .d-ic { color: var(--d-acc); }
.pp-extras .d-btn { justify-self: start; background: var(--d-card); color: var(--d-ink); }

.pp-steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pp-steps li { display: grid; align-content: start; gap: .4rem; padding: 1.6rem; border-radius: 22px; background: var(--d-ink); color: #fff; transition: transform .35s var(--ease); }
.pp-steps .n { font: 800 2.8rem/1 var(--f-display); color: var(--d-acc); }
.pp-steps h4 { font: 700 1.2rem/1.25 var(--f-body); }
.pp-steps p { color: #C9D6CE; }

/* questions: the mossy path behind it */
.pp-faq__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.pp-faq__layout .pp-sec__head { margin-bottom: 0; }
.pp-faq__list { display: grid; gap: .7rem; }
.pp-faq__list details { border: 0; border-radius: 16px; background: rgba(251, 250, 245, .86); box-shadow: inset 0 0 0 1px var(--d-line); transition: background-color .3s, box-shadow .3s; }
.pp-faq__list details[open] { background: var(--d-card); box-shadow: inset 0 0 0 2px var(--d-brand); }
.pp-faq__list summary { min-height: 60px; padding: .8rem 1.2rem; font-size: 1.0625rem; font-weight: 700; }
.pp-faq__list summary::after { margin-right: 0; background: linear-gradient(var(--d-brand), var(--d-brand)) center / 100% 2px no-repeat, linear-gradient(var(--d-brand), var(--d-brand)) center / 2px 100% no-repeat; }
.pp-faq__list summary:hover { color: var(--d-brand); }
.pp-faq__list details p { padding: 0 1.2rem 1.2rem; color: var(--d-mute); }

.pp-contact { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 10vw, 8rem); background: linear-gradient(160deg, var(--d-brand) 0%, var(--d-deep) 100%); color: #fff; }
.pp-contact__bg { position: absolute; inset: 0; z-index: -2; opacity: .4; }
.pp-contact::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 74, 47, .94) 0%, rgba(8, 74, 47, .78) 55%, rgba(8, 74, 47, .6) 100%); }
.pp-contact .pp-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.pp-contact .pp-kicker { color: var(--d-mint); }
.pp-big { font: 800 clamp(2.4rem, 7vw, 5.4rem)/.95 var(--f-display); font-stretch: 104%; letter-spacing: -.045em; max-width: 14ch; }
.pp-contact .pp-sub { color: #E3EEE7; }
.pp-contact__row { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; }
.pp-contact .d-btn { background: var(--d-card); color: var(--d-ink); }
.pp-copyrow { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.pp-copyrow .d-addr { font-size: 1.05rem; }
.pp-foot { display: grid; gap: .6rem; padding-block: 1.5rem; font-size: .9375rem; color: var(--d-mute); }
.pp-foot a { color: var(--d-mute); }
.pp-foot a:hover { color: var(--d-ink); }
.pp-foot__cta { color: var(--d-ink); }
.pp-foot .pp-foot__cta a { color: var(--d-brand); font-weight: 700; }
.pp-foot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pp-foot__note { font-size: .875rem; }

/* lifting and zooming only where there is a pointer to hover with (not on a phone) */
@media (hover: hover) {
  .pp-level:hover { transform: translateY(-5px); box-shadow: 0 38px 52px -28px rgba(7, 17, 11, .65), 0 0 0 1px rgba(11, 15, 12, .08); }
  .pp-sample:hover .pp-pic { transform: scale(1.07); }
  .pp-feat li:hover, .pp-steps li:hover { transform: translateY(-4px); }
}

.tier-main { background: var(--d-bg); color: var(--d-ink); }

/* ------------------------------------------------------------------------------------- narrower screens */
@media (max-width: 899px) {
  /* on a phone the writing runs across the whole width, so the picture is veiled from the top down instead of from the left */
  .ps-top::before { background: linear-gradient(180deg, rgba(var(--ps-rgb), .9) 0, rgba(var(--ps-rgb), .66) 6rem, rgba(var(--ps-rgb), .6) 58%, rgba(var(--ps-rgb), .82) 82%, rgb(var(--ps-rgb)) 100%); }
  .ps-hero { min-height: 0; }
  .ps-head nav, .pp-head nav { display: none; }
  .ps-head .ps-wrap, .pp-head .pp-wrap { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; }
  .ps-menu { display: block; }
  .ps-incl, .ps-contact__in { grid-template-columns: 1fr; }
  .ps-levels, .ps-samples, .pp-levels__row { grid-template-columns: 1fr; }
  .pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-steps { grid-template-columns: 1fr; }
  .pp-incl, .pp-faq__layout { grid-template-columns: 1fr; }
  .pp-faq__layout { gap: 1.75rem; }
  .pp-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-sample:nth-child(3n + 2) { margin-top: 0; }
  .pp-sample:nth-child(2n) { margin-top: 2rem; }
  .pp-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 6rem 0; }
  .pp-hero__pic { position: relative; inset: auto; z-index: 0; order: 2; height: min(92vw, 30rem); margin-top: 1.25rem; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
  .pp-hero::after { background: linear-gradient(0deg, #07110B 0%, rgba(7, 17, 11, 0) 20%); z-index: 1; }
  .pp-hero__in { position: relative; z-index: 2; }
  .pp-levels { margin-top: -3.5rem; }
}
@media (max-width: 700px) {
  .ps-head .ps-wrap > .d-btn, .pp-head .pp-wrap > .d-btn { display: none; }   /* the opening already has the email button */
  .ps-head .ps-wrap, .pp-head .pp-wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-feat, .pp-steps { grid-template-columns: 1fr; }
  .pp-samples::before { inset: 6% -3% 0 12%; }
  .ps-foot__row, .pp-foot__row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-hero__copy { animation: none; }
  .pp-door i, .pp-door i:first-child, .pp-door i:last-child { animation: none; }   /* the swirl holds still */
  .pp-head, .pp-head .pp-wrap > .d-btn { transition: none; }
  .pp-sample .pp-pic, .pp-level, .pp-feat li, .pp-steps li { transition: none; }
  .pp-sample:hover .pp-pic, .pp-level:hover, .pp-feat li:hover, .pp-steps li:hover { transform: none; }
}

/* ---------- plans label, enquiry notice (text from site.json) ---------- */
.d .d-label { margin-top: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-brand); }
.d .d-block { max-width: 40rem; font-size: 1rem; line-height: 1.6; }
.d .d-block a { color: inherit; font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.d .ps-foot__note a, .d .pp-foot__note a { text-underline-offset: 3px; }
.d .d-enq { max-width: 40rem; margin-top: .9rem; font-size: .8125rem; line-height: 1.5; color: inherit; opacity: .82; }
.d .ps-foot__enq, .d .pp-foot__enq { max-width: 46rem; line-height: 1.5; }
.d .ps-foot__enq a, .d .pp-foot__enq a, .d .d-enq a, .d .pp-note .d-fine a, .d .ps-note .d-fine a { color: inherit; text-underline-offset: 3px; }
.d .pp-levels__head .d-label { color: var(--d-mint); }

/* ---------- pictures (written by build.py from whatever is in src/img) ---------- */
html .ph.ph-plumbing { background-image: url(../img/trade-plumbing.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-pic.ph-plumbing { background-image: url(../img/trade-plumbing-sm.webp); } }
html .ph.ph-salon { background-image: url(../img/trade-salon.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-pic.ph-salon { background-image: url(../img/trade-salon-sm.webp); } }
html .ph.ph-cafe { background-image: url(../img/trade-cafe.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-pic.ph-cafe { background-image: url(../img/trade-cafe-sm.webp); } }
html .ph.ph-garage { background-image: url(../img/trade-garage.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-pic.ph-garage { background-image: url(../img/trade-garage-sm.webp); } }
html .ph.ph-cleaning { background-image: url(../img/trade-cleaning.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-pic.ph-cleaning { background-image: url(../img/trade-cleaning-sm.webp); } }
html .ph.ph-firm { background-image: url(../img/trade-firm.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-pic.ph-firm { background-image: url(../img/trade-firm-sm.webp); } }
html .levels__bg { background-image: url(../img/levels-bg.webp); background-size: cover; background-position: center bottom; }
html .ps-sky { background-image: url(../img/levels-bg.webp); }
html .pp-scene, html .pp-door i { background-image: url(../img/pro-hero.webp); }
html .pp-door { left: 50.00%; top: 52.44%; width: 15.60%; transform: translate(-50%, -50%) scaleY(1.975); }
html .pp-door i:first-child { background-size: 641.03% 182.38%; background-position: 50.00% 55.40%; }
html .pp-door i:last-child { width: 50%; background-size: 1282.05% 364.75%; background-position: 50.00% 53.36%; }
@media (max-width: 700px) { html .pp-scene, html .pp-door i { background-image: url(../img/pro-hero-sm.webp); } }
html .pp-contact__bg, html .ps-contact__bg { background-image: url(../img/pro-valley.webp); background-size: cover; background-position: center; }
@media (max-width: 700px) { html .pp-contact__bg { background-image: url(../img/pro-valley-sm.webp); } }
html .ps-top { background-image: url(../img/ps-castle.webp); background-size: cover; background-position: 70% 22%; }
@media (max-width: 899px) { html .ps-top { background-position: 84% 0; } }
html .ps-band--gate { background-image: url(../img/ps-gateway.webp); background-size: cover; background-position: 72% 30%; }
html .ps-band--path { background-image: url(../img/ps-path.webp); background-size: cover; background-position: 68% 50%; }
html .pp-band--castle { background-image: var(--pp-veil-castle), url(../img/ps-castle.webp); background-size: 100% 100%, cover; background-position: 0 0, 70% 30%; background-repeat: no-repeat; }
@media (max-width: 700px) { html .pp-band--castle { background-image: var(--pp-veil-castle), url(../img/ps-castle-sm.webp); } }
html .pp-band--gate { background-image: var(--pp-veil-gate), url(../img/ps-gateway.webp); background-size: 100% 100%, cover; background-position: 0 0, 72% 30%; background-repeat: no-repeat; }
@media (max-width: 700px) { html .pp-band--gate { background-image: var(--pp-veil-gate), url(../img/ps-gateway-sm.webp); } }
html .pp-band--path { background-image: var(--pp-veil-path), url(../img/ps-path.webp); background-size: 100% 100%, cover; background-position: 0 0, 68% 50%; background-repeat: no-repeat; }
@media (max-width: 700px) { html .pp-band--path { background-image: var(--pp-veil-path), url(../img/ps-path-sm.webp); } }
html .bgpic--gate > i { background-image: url(../img/pm-gateway.webp); background-position: 62% 50%; }
@media (max-width: 700px) { html .bgpic--gate > i { background-image: url(../img/pm-gateway-sm.webp); } }
html .bgpic--castle > i { background-image: url(../img/pm-castle.webp); background-position: 70% 35%; }
@media (max-width: 700px) { html .bgpic--castle > i { background-image: url(../img/pm-castle-sm.webp); } }
html .bgpic--path > i { background-image: url(../img/pm-path.webp); background-position: 66% 40%; }
@media (max-width: 700px) { html .bgpic--path > i { background-image: url(../img/pm-path-sm.webp); } }