/* Sol-Genesys: "Grimoire" direction from the Claude Design handoff (clients/spellbound/design/locked-site).
   Part 1: tokens and base. Part 2: effects (motion, hover, reveals). Part 3: layout classes extracted
   from the design's inline styles (d0, d1, ...). The CSP blocks inline styles, so every style lives here. */
:root {
  --deepwood: #0E1B17;
  --moss: #1F3A31;
  --parchment: #ECE5D3;
  --lichen: #B9CF9A;
  --ember: #E2793C;
  --ink-muted: #4A5A52;
  --moss-light: #3E6253;
  --vellum: #F6F1E4;
  --vellum-dark: #E3D8BF;
  --gilt-shadow: #B8A57E;
  --seal: #B5562A;
  --seal-light: #C9683A;
  --seal-dark: #9C4520;

  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Geist', 'Helvetica Neue', sans-serif;
  --font-initial: 'Cinzel Decorative', Georgia, serif;
  --font-rune: 'Noto Sans Runic', sans-serif;

  --radius: 4px;
  --section-pad: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--deepwood); color: var(--parchment); }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 3px;
}
#main:focus { outline: none; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--parchment); color: var(--deepwood); font-family: var(--font-body); font-weight: 600; }
.skip-link:focus { left: 12px; top: 12px; }
.hp { position: absolute; left: -9999px; }

/* Effects */
.sg-btn { position: relative; overflow: hidden; isolation: isolate; transition: scale .12s ease; }
.sg-btn .star { transition: transform .5s ease; }
.sg-btn::before, .sg-btn::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.sg-btn:hover .star { transform: rotate(90deg); }
.sg-btn::before { inset: 0; background: currentColor; opacity: .16; clip-path: circle(0px at var(--hx, 50%) var(--hy, 50%)); transition: clip-path .55s ease; }
.sg-btn:hover::before { clip-path: circle(160% at var(--hx, 50%) var(--hy, 50%)); }
.sg-btn:active { scale: .96; }
.sg-btn::after { left: var(--hx, 50%); top: var(--hy, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: 0; }
.sg-btn[data-pressed]::after { animation: stamp .6s ease-out; }
@keyframes stamp { 0% { opacity: .35; transform: scale(0); } 100% { opacity: 0; transform: scale(22); } }

.nl { position: relative; }
.nl::before { content: ""; position: absolute; pointer-events: none; left: 50%; top: -13px; width: 10px; height: 10px; margin-left: -5px; background: var(--ember); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); transform: scale(0) rotate(-90deg); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.nl:hover::before, .nl:focus-visible::before, .nl[aria-current="page"]::before, .nl[data-active]::before { transform: scale(1) rotate(0deg); }

/* Reveals use only opacity and translate, which the compositor animates without repainting.
   (The design's blur, letter-spacing and page-turn reveals repainted large areas every frame.) */
[data-reveal], [data-head] { transition-property: opacity, translate; transition-duration: .8s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0ms); }
[data-armed] [data-reveal]:not([data-in]), [data-armed] [data-head]:not([data-in]) { opacity: 0; translate: 0 14px; }

.sg-card { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, opacity .9s ease, filter .9s ease; transition-delay: var(--rd, 0ms); }
.sg-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ember), 0 0 0 6px var(--parchment), 0 0 0 7px var(--ember), 0 20px 44px -26px var(--ember) !important; }
.sg-card.dark:hover { box-shadow: 0 0 0 1px var(--ember), 0 0 0 6px var(--deepwood), 0 0 0 7px var(--ember), 0 20px 44px -26px var(--ember) !important; }

.hero-art { transition: scale .6s ease, filter .6s ease; }
.hero-art:hover { scale: 1.03; filter: drop-shadow(0 0 16px var(--ember)); }
.owl-look { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .25s ease-out; }
/* Blinks twice after load, then rests: an endless SVG animation forced a layout every frame. */
.owl-blink { transform-box: fill-box; transform-origin: center; animation: blink 7s 2; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }

.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--lichen); opacity: 0; pointer-events: none; animation-name: mote; animation-timing-function: linear; animation-iteration-count: infinite; }
.mote.warm { background: var(--ember); }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .75; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate(36px, -280px); } }

.logo-star { transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
a:hover .logo-star { transform: rotate(180deg) scale(1.3); }

.rn { position: relative; display: inline-block; cursor: help; }
.rn::after { content: attr(data-plain); position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-display); font-style: italic; letter-spacing: .14em; -webkit-text-fill-color: currentColor; opacity: 0; transition: opacity .4s; }
.rn:hover { -webkit-text-fill-color: transparent; }
.rn:hover::after { opacity: 1; }

.seal { transition: scale .5s cubic-bezier(.5, 1.8, .6, 1) .35s, rotate .5s ease .35s, opacity .25s ease .35s; }
[data-armed] .seal:not([data-in]) { scale: 1.7; rotate: -25deg; opacity: 0; }

.spin { animation: spin 140s linear infinite; will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The spark runs along the path once instead of looping forever (stroke animation repaints every frame). */
.spark { stroke-dasharray: 12 2000; stroke-dashoffset: 2012; animation: spark 6s ease-in-out 1s 1 both; }
@keyframes spark { 90% { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: 0; opacity: 0; } }

/* Paper grain: one small tile instead of live SVG turbulence filters. */
.grain { position: absolute; inset: 0; pointer-events: none; background: url(images/grain.webp); }

/* Sections below the first are not rendered (or animated) until they come near the screen. */
.sg-root > section ~ section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Website previews: the screenshot scrolls while the frame is hovered. */
.demo-page { transition: translate 3.6s cubic-bezier(.45, 0, .2, 1); }
.workshop-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--moss); background: var(--deepwood); box-shadow: 0 30px 60px -30px var(--deepwood); }
.workshop-window { height: 340px; overflow: hidden; background: var(--vellum); }
.workshop-window img, .d5u img { width: 100%; }
.workshop-frame:hover .demo-page { translate: 0 calc(-100% + 340px); }
.sg-card:hover .d5u .demo-page { translate: 0 calc(-100% + 280px); }

/* Contact form chips are real checkboxes. */
.chip:focus-within { outline: 2px solid var(--ember); outline-offset: 3px; }
.chip:has(input:checked) { background: var(--moss); color: var(--parchment); }

/* Orbit nav (site.js moves the nodes) */
[data-orbitnav] button { touch-action: manipulation; }
[data-orbitnav] button:focus-visible .d1k { outline: 2px solid var(--ember); outline-offset: 3px; }

/* Additions for the new home blocks */
.compare { display: flex; flex-direction: column; gap: 31px; margin-top: 48px; }
.d4s a, .d4t a { color: var(--moss); font-weight: 600; }
.story-sign { margin: 0; text-align: right; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-head], .seal { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; }
  .mote { display: none; }
  .spin, .spark, .owl-blink { animation: none !important; }
  .spark { opacity: 0; }
  .sg-btn, .sg-btn::before, .sg-btn .star, .nl::before, .sg-card, .hero-art, .owl-look, .demo-page, .logo-star, .rn::after { transition: none !important; }
  .sg-btn[data-pressed]::after { animation: none; }
  .owl-look { transform: none !important; }
  .workshop-frame:hover .demo-page, .sg-card:hover .d5u .demo-page { translate: none; }
  [data-orbitnav] button { transition: none !important; }
}

/* Layout classes extracted from the design */
.d0{position: relative; overflow: hidden; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--parchment); background: var(--deepwood)}
.d1{position: absolute}
.d2{transform: translate(var(--ex, 0px), var(--ey, 0px))}
.d3{position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, var(--moss) 0%, var(--deepwood) 65%)}
.d4{left: 8%; top: 80%; animation-delay: -2s; animation-duration: 16s}
.d5{left: 18%; top: 60%; animation-delay: -7s; animation-duration: 22s}
.d6{left: 27%; top: 90%; animation-delay: -11s; animation-duration: 19s}
.d7{left: 38%; top: 70%; animation-delay: -4s; animation-duration: 24s}
.d8{left: 52%; top: 85%; animation-delay: -14s; animation-duration: 18s}
.d9{left: 61%; top: 65%; animation-delay: -9s; animation-duration: 21s}
.da{left: 72%; top: 92%; animation-delay: -1s; animation-duration: 17s}
.db{left: 81%; top: 75%; animation-delay: -6s; animation-duration: 23s}
.dc{left: 90%; top: 88%; animation-delay: -12s; animation-duration: 20s}
.dd{left: 96%; top: 60%; animation-delay: -3s; animation-duration: 25s}
.de{position: absolute; left: 0; top: 0; width: 100%; height: 280px; z-index: 2; pointer-events: none}
.df{position: relative; z-index: 3; max-width: 1300px; margin: 0 auto; padding: 22px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: center; gap: 12px 24px; border-bottom: 1px solid var(--moss)}
.dg{display: flex; flex-wrap: wrap; gap: 6px 28px}
.dh{color: var(--parchment); text-decoration: none}
.di{justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--parchment); text-decoration: none}
.dj{display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.9rem; line-height: 1}
.dk{font-family: var(--font-rune); font-size: 0.75rem; letter-spacing: 0.4em; color: var(--lichen)}
.dl{justify-self: end; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; color: var(--parchment); border: 3px double var(--ember)}
.dm{position: relative; max-width: 1300px; margin: 48px auto 0; padding: 0 24px 120px}
.dn{position: absolute; left: 50%; top: -16px; width: 18px; height: calc(100% - 40px); transform: translateX(-50%); z-index: 2; background: var(--moss); border-left: 1px solid var(--moss-light); border-right: 1px solid var(--moss-light); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%)}
.do{display: grid; grid-template-columns: 1fr; border-radius: 4px; box-shadow: 0 5px 0 #D9CDB0, 0 10px 0 var(--gilt-shadow), 0 14px 0 #D9CDB0, 0 40px 80px #000000}
.dp{position: relative; background: var(--parchment); color: var(--deepwood); border-radius: 4px 0 0 4px; padding: 72px clamp(28px, 5vw, 76px); box-sizing: border-box; box-shadow: inset -40px 0 50px -30px #8C7B55, inset 0 0 140px var(--gilt-shadow)}
.dq{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none}
.dr{position: absolute; left: 14px; top: 14px}
.ds{position: absolute; left: 14px; bottom: 14px; transform: scaleY(-1)}
.dt{position: relative; display: flex; flex-direction: column; gap: 16px}
.du{font-family: var(--font-rune); color: var(--moss); letter-spacing: 0.4em; font-size: 0.95rem}
.dv{margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(3.00rem, 5.52vw, 5.28rem); line-height: 1.02; letter-spacing: -0.02em}
.dw{float: left; display: grid; place-items: center; width: 1.9em; height: 1.9em; margin: 0.08em 0.05em 0 0; background: var(--moss); border: 4px double var(--lichen); border-radius: 4px; color: var(--ember); font-family: var(--font-initial); font-weight: 700; font-size: 1.15em; line-height: 1}
.dx{margin: 0; font-size: 19px; line-height: 1.55; clear: both}
.dy{display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 3px double var(--moss); border-bottom: 3px double var(--moss)}
.dz{font-family: var(--font-display); font-weight: 500; font-size: 1.35em}
.d10{display: flex; flex-wrap: wrap; gap: 12px; align-items: center}
.d11{box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; color: var(--deepwood); border: 3px double var(--moss)}
.d12{box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; color: var(--deepwood); border: 1.5px solid var(--deepwood)}
.d13{margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.1em}
.d14{position: relative; background: var(--parchment); color: var(--deepwood); border-radius: 0 4px 4px 0; padding: 72px clamp(28px, 5vw, 76px); box-sizing: border-box; box-shadow: inset 40px 0 50px -30px #8C7B55, inset 0 0 140px var(--gilt-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px}
.d15{position: absolute; right: 14px; top: 14px; transform: scaleX(-1)}
.d16{position: absolute; right: 14px; bottom: 14px; transform: scale(-1, -1)}
.d17{position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1}
.d18{position: absolute; inset: 0}
.d19{position: relative; width: 100%; aspect-ratio: 1 / 1; font-family: var(--font-body); color: var(--deepwood)}
.d1a{position: absolute; inset: 0; width: 100%; height: 100%; color: var(--moss)}
.d1b{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center}
.d1c{font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1}
.d1d{font-size: 0.9rem; opacity: 0.85}
.d1e{display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--moss); border: 3px double var(--lichen); color: var(--ember); font-family: var(--font-rune); font-size: 1.3rem}
.d1f{font-family: var(--font-display); font-size: 1.6rem; line-height: 1.05}
.d1g{font-size: 0.92rem; line-height: 1.45}
.d1h{display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; color: var(--deepwood); border: 3px double var(--moss)}
.d1i{display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 0.8rem}
.d1j{position: absolute; left: 50.00%; top: 9.00%; opacity: 0.70; transform: translate(-50%, -50%) scale(0.880); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--deepwood); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d1k{display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--moss); border: 3px double var(--lichen); color: var(--ember); font-family: var(--font-rune); font-size: 1.5rem; transition: box-shadow 0.4s ease}
.d1l{padding: 1px 10px; border-radius: 999px; background: var(--parchment); font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap}
.d1m{display: flex; align-items: center; gap: 4px; font-size: 0.72rem; white-space: nowrap}
.d1n{width: 6px; height: 6px; border-radius: 50%; background: var(--ember)}
.d1o{position: absolute; left: 88.99%; top: 37.33%; opacity: 0.80; transform: translate(-50%, -50%) scale(0.942); z-index: 13; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--deepwood); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d1p{position: absolute; left: 74.10%; top: 83.17%; opacity: 0.97; transform: translate(-50%, -50%) scale(1.043); z-index: 19; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--deepwood); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d1q{position: absolute; left: 25.90%; top: 83.17%; opacity: 0.97; transform: translate(-50%, -50%) scale(1.043); z-index: 19; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--deepwood); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d1r{position: absolute; left: 11.01%; top: 37.33%; opacity: 0.80; transform: translate(-50%, -50%) scale(0.942); z-index: 13; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--deepwood); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d1s{position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 16px; width: 100%; font-size: 0.95em; line-height: 1.5}
.d1t{display: flex; flex-direction: column; gap: 4px}
.d1u{font-family: var(--font-display); font-style: italic; font-size: 1.2em}
.d1v{display: block; width: 100%; height: 48px; background: var(--deepwood)}
.d1w{position: relative; background: var(--parchment); color: var(--deepwood)}
.d1x{position: relative; max-width: 1200px; margin: 0 auto; padding: 104px 24px; display: flex; flex-direction: column; gap: 31px}
.d1y{display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center}
.d1z{font-family: var(--font-rune); color: var(--moss); letter-spacing: 0.4em; font-size: 0.85rem}
.d20{margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.52rem, 4.32vw, 3.96rem); line-height: 1.05; letter-spacing: -0.02em}
.d21{margin: 0; max-width: 52ch; font-size: 19px}
.d22{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px}
.d23{display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 20px; border: 1px solid var(--moss); outline: 1px solid var(--moss); outline-offset: -7px; border-radius: 4px; background: transparent}
.d24{display: flex; justify-content: space-between; align-items: flex-start; gap: 12px}
.d25{display: grid; place-items: center; width: 56px; height: 56px; background: var(--moss); border: 3px double var(--lichen); border-radius: 4px; color: var(--ember); font-family: var(--font-rune); font-size: 1.7rem}
.d26{font-family: var(--font-display); font-style: italic}
.d27{margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.86rem; line-height: 1.15}
.d28{display: flex; gap: 10px; align-items: baseline}
.d29{flex: none}
.d2a{margin-top: auto; font-family: var(--font-display); font-weight: 500; font-size: 1.4em}
.d2b{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 31px; align-items: center}
.d2c{display: flex; flex-direction: column; gap: 8px}
.d2d{margin: 0}
.d2e{align-self: flex-start; color: var(--moss); font-weight: 600}
.d2f{border-radius: 4px; overflow: hidden; border: 1px solid var(--moss); background: var(--deepwood); box-shadow: 0 30px 60px -30px var(--deepwood)}
.d2g{position: relative; height: 340px}
.d2h{position: absolute; inset: 0; display: grid; place-items: center; background: #D8CFBC; color: var(--ink-muted)}
.d2i{position: absolute; inset: 0; display: grid; place-items: center; background: var(--moss); color: var(--parchment); clip-path: inset(0 0 0 50%)}
.d2j{position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--ember)}
.d2k{display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--parchment); font-size: 0.9em}
.d2l{flex: 1; accent-color: var(--ember)}
.d2m{position: relative; display: flex; align-items: center; gap: 16px; max-width: 520px; margin: 0 auto; padding: 0 24px}
.d2n{flex: 1; height: 1px; background: var(--moss)}
.d2o{position: relative; max-width: 900px; margin: 0 auto; padding: 104px 24px; display: flex; flex-direction: column; gap: 16px}
.d2p{margin: 0; text-align: center; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.52rem, 4.32vw, 3.96rem); line-height: 1.05; letter-spacing: -0.02em}
.d2q{display: flex; flex-direction: column; font-size: 1.08em}
.d2r{display: flex; align-items: baseline; gap: 12px; padding: 8px 0}
.d2s{flex: 1; border-bottom: 2px dotted var(--moss)}
.d2t{white-space: nowrap}
.d2u{margin: 0; text-align: center; font-size: 0.92em; color: var(--ink-muted)}
.d2v{display: block; width: 100%; height: 48px; background: var(--parchment)}
.d2w{left: 6%; top: 85%; animation-delay: -5s; animation-duration: 18s}
.d2x{left: 21%; top: 70%; animation-delay: -10s; animation-duration: 23s}
.d2y{left: 34%; top: 95%; animation-delay: -2s; animation-duration: 20s}
.d2z{left: 58%; top: 80%; animation-delay: -13s; animation-duration: 17s}
.d30{left: 69%; top: 92%; animation-delay: -7s; animation-duration: 22s}
.d31{left: 83%; top: 72%; animation-delay: -4s; animation-duration: 19s}
.d32{left: 94%; top: 90%; animation-delay: -9s; animation-duration: 24s}
.d33{position: relative; max-width: 1300px; margin: 0 auto; padding: 104px 24px; display: flex; flex-direction: column; align-items: center; gap: 31px; text-align: center}
.d34{position: relative; display: grid; place-items: center; width: min(420px, 90%); aspect-ratio: 1 / 1}
.d35{position: absolute; inset: 0; width: 100%; height: 100%; color: var(--moss-light)}
.d36{position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 70%}
.d37{margin: 0; color: var(--lichen)}
.d38{position: relative; width: 100%}
.d39{position: absolute; left: 0; top: 0; width: 100%; height: 120px}
.d3a{position: relative; margin: 0; padding: 52px 0 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px}
.d3b{display: flex; flex-direction: column; align-items: center; gap: 10px}
.d3c{width: 16px; height: 16px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 6px var(--deepwood), 0 0 0 7px var(--lichen)}
.d3d{font-family: var(--font-display); font-style: italic; font-size: 1.3em}
.d3e{color: var(--lichen)}
.d3f{margin: 0; max-width: 50ch; font-size: 19px}
.d3g{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 31px}
.d3h{position: relative; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 20px; border: 1px solid var(--moss); outline: 1px solid var(--moss); outline-offset: -7px; border-radius: 4px; background: transparent}
.d3i{display: flex; align-items: center; gap: 14px}
.d3j{display: flex; flex-direction: column}
.d3k{position: relative; max-width: 820px; margin: 0 auto; padding: 104px 24px; display: flex; flex-direction: column; gap: 16px}
.d3l{margin: 0; font-size: 19px; line-height: 1.75}
.d3m{float: left; display: grid; place-items: center; width: 1.62em; height: 1.62em; margin: 0.1em 0.04em 0 0; background: var(--moss); border: 4px double var(--lichen); border-radius: 4px; color: var(--ember); font-family: var(--font-initial); font-size: 2.7em; line-height: 1}
.d3n{font-variant: small-caps; font-size: 1.14em; letter-spacing: 0.03em}
.d3o{align-self: center; color: var(--moss); font-weight: 600}
.d3p{position: relative; max-width: 1200px; margin: 0 auto; padding: 104px 24px}
.d3q{position: relative; max-width: 760px; margin: 0 auto; background: var(--parchment); color: var(--deepwood); border-radius: 4px; padding: 64px clamp(24px, 6vw, 72px) 80px; box-shadow: 0 30px 70px #000000, inset 0 0 140px var(--gilt-shadow); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px}
.d3r{position: relative; margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.52rem, 4.32vw, 3.96rem); line-height: 1.05}
.d3s{position: relative; font-family: var(--font-display); font-size: 2.4em; color: var(--deepwood); text-decoration: none}
.d3t{position: relative; color: var(--moss)}
.d3u{position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px}
.d3v{position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--seal); box-shadow: inset 0 0 0 7px var(--seal-light), inset 0 0 0 9px var(--seal-dark), 0 8px 18px var(--deepwood)}
.d3w{position: relative; max-width: 1200px; margin: 0 auto; padding: 32px 24px 40px; border-top: 1px solid var(--moss); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--lichen); font-size: 0.95em}
.d3x{display: flex; flex-wrap: wrap; gap: 8px 20px}
.d3y{color: var(--parchment)}
.d3z{display: flex; flex-wrap: wrap; gap: 8px 24px}
.d40{left: 22%; top: 62%; animation-delay: -7s; animation-duration: 22s}
.d41{left: 41%; top: 90%; animation-delay: -11s; animation-duration: 19s}
.d42{left: 63%; top: 70%; animation-delay: -4s; animation-duration: 24s}
.d43{left: 82%; top: 86%; animation-delay: -9s; animation-duration: 21s}
.d44{left: 95%; top: 64%; animation-delay: -3s; animation-duration: 25s}
.d45{margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 5.52vw, 5.28rem); line-height: 1.02; letter-spacing: -0.02em}
.d46{margin: 0; clear: both; font-size: 19px; line-height: 1.55}
.d47{display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 3px double var(--moss); border-bottom: 3px double var(--moss)}
.d48{display: flex; gap: 14px; align-items: center}
.d49{display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--moss); border: 3px double var(--lichen); border-radius: 4px; color: var(--ember); font-family: var(--font-rune); font-size: 1.2rem}
.d4a{font-family: var(--font-display); font-weight: 500; font-size: 1.2em}
.d4b{position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1}
.d4c{position: absolute; left: 25%; top: 14%; width: 50%; height: 78%; color: var(--ember)}
.d4d{position: relative; margin: 0; max-width: 34ch; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.2rem}
.d4e{margin: 0; max-width: 58ch; font-size: 19px}
.d4f{overflow-x: auto; border-top: 3px double var(--moss); border-bottom: 3px double var(--moss)}
.d4g{width: 100%; min-width: 720px; border-collapse: collapse; text-align: left}
.d4h{padding: 16px 12px; width: 22%}
.d4i{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)}
.d4j{padding: 16px 12px; width: 36%; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--ink-muted)}
.d4k{padding: 16px 20px; width: 42%; background: var(--moss); color: var(--parchment); font-family: var(--font-display); font-weight: 500; font-size: 1.35rem}
.d4l{display: inline-flex; align-items: center; gap: 10px}
.d4m{border-top: 1px solid #CFC5AC}
.d4n{padding: 18px 12px; vertical-align: top; font-weight: 400}
.d4o{display: flex; align-items: center; gap: 12px}
.d4p{display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--moss); border: 3px double var(--lichen); border-radius: 4px; color: var(--ember); font-family: var(--font-rune); font-size: 1.15rem}
.d4q{font-family: var(--font-display); font-size: 1.3rem}
.d4r{padding: 18px 12px; vertical-align: top; color: var(--ink-muted)}
.d4s{padding: 18px 20px; vertical-align: top; background: var(--vellum-dark); font-weight: 500}
.d4t{margin: 0 auto; max-width: 62ch; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.2rem}
.d4u{left: 12%; top: 85%; animation-delay: -5s; animation-duration: 18s}
.d4v{left: 35%; top: 70%; animation-delay: -10s; animation-duration: 23s}
.d4w{left: 58%; top: 92%; animation-delay: -2s; animation-duration: 20s}
.d4x{left: 80%; top: 76%; animation-delay: -7s; animation-duration: 22s}
.d4y{font-family: var(--font-rune); color: var(--lichen); letter-spacing: 0.4em; font-size: 0.85rem}
.d4z{margin: 0; max-width: 52ch; font-size: 19px; color: var(--lichen)}
.d50{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px}
.d51{display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-sizing: border-box; padding: 24px 18px; border: 1px solid var(--moss-light); outline: 1px solid var(--moss-light); outline-offset: -7px; border-radius: 4px; background: var(--deepwood)}
.d52{position: relative; width: 132px; height: 132px; display: grid; place-items: center}
.d53{display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--moss); border: 3px double var(--lichen); text-align: center; line-height: 1.1}
.d54{font-family: var(--font-initial); font-size: 1.9rem; color: var(--ember)}
.d55{font-size: 0.75rem; color: var(--lichen)}
.d56{margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15}
.d57{font-family: var(--font-display); font-style: italic; color: var(--ember)}
.d58{font-size: 0.95rem; color: var(--lichen)}
.d59{font-size: 0.85rem; color: var(--lichen)}
.d5a{position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px 140px}
.d5b{position: relative; margin: 0; max-width: 44ch}
.d5c{left: 9%; top: 78%; animation-delay: -3s; animation-duration: 17s}
.d5d{left: 26%; top: 60%; animation-delay: -8s; animation-duration: 22s}
.d5e{left: 71%; top: 88%; animation-delay: -12s; animation-duration: 19s}
.d5f{left: 90%; top: 66%; animation-delay: -5s; animation-duration: 24s}
.d5g{position: relative; max-width: 900px; margin: 48px auto 0; padding: 0 24px 104px}
.d5h{position: relative; background: var(--parchment); color: var(--deepwood); border-radius: 4px; padding: 72px clamp(28px, 6vw, 88px); box-sizing: border-box; box-shadow: 0 5px 0 #D9CDB0, 0 10px 0 var(--gilt-shadow), 0 40px 80px #000000, inset 0 0 140px var(--gilt-shadow); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px}
.d5i{position: relative; font-family: var(--font-rune); color: var(--moss); letter-spacing: 0.4em; font-size: 0.95rem}
.d5j{position: relative; margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 5.52vw, 5.28rem); line-height: 1.02; letter-spacing: -0.02em}
.d5k{position: relative; margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.55}
.d5l{position: relative; margin: 0; font-size: 0.9rem; color: var(--ink-muted)}
.d5m{margin: 0; max-width: 54ch; font-size: 19px}
.d5n{margin: 0; font-size: 0.9rem; color: var(--ink-muted)}
.d5o{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 31px}
.d5p{display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; padding: 20px; border: 1px solid var(--moss); outline: 1px solid var(--moss); outline-offset: -7px; border-radius: 4px}
.d5q{border-radius: 4px; overflow: hidden; border: 1px solid var(--moss); background: var(--deepwood)}
.d5r{display: flex; align-items: center; gap: 8px; padding: 9px 12px}
.d5s{width: 9px; height: 9px; border-radius: 50%; background: var(--moss-light)}
.d5t{margin-left: 8px; padding: 2px 12px; border-radius: 999px; background: var(--moss); color: var(--lichen); font-size: 0.78rem}
.d5u{height: 280px; overflow: hidden; background: var(--vellum)}
.d5v{display: flex; flex-direction: column; gap: 10px; padding: 14px}
.d5w{height: 170px; border-radius: 4px; background: var(--moss); color: var(--parchment); display: grid; place-items: center; font-size: 0.85rem}
.d5x{height: 12px; width: 68%; border-radius: 4px; background: #D8CFBC}
.d5y{height: 12px; width: 48%; border-radius: 4px; background: #D8CFBC}
.d5z{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px}
.d60{height: 96px; border-radius: 4px; background: var(--vellum-dark)}
.d61{height: 150px; border-radius: 4px; background: #D8CFBC; color: var(--ink-muted); display: grid; place-items: center; font-size: 0.85rem}
.d62{height: 90px; border-radius: 4px; background: var(--moss)}
.d63{display: grid; place-items: center; flex: none; width: 48px; height: 48px; background: var(--moss); border: 3px double var(--lichen); border-radius: 4px; color: var(--ember); font-family: var(--font-rune); font-size: 1.4rem}
.d64{display: flex; flex-wrap: wrap; gap: 6px}
.d65{padding: 2px 10px; border: 1px solid var(--moss); border-radius: 999px; font-size: 0.85rem}
.d66{align-self: flex-start; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; color: var(--deepwood); border: 1.5px solid var(--deepwood)}
.d67{height: 170px; border-radius: 4px; background: #3A2E22; color: var(--parchment); display: grid; place-items: center; font-size: 0.85rem}
.d68{height: 90px; border-radius: 4px; background: #3A2E22}
.d69{height: 170px; border-radius: 4px; background: #2A3A2C; color: var(--parchment); display: grid; place-items: center; font-size: 0.85rem}
.d6a{height: 90px; border-radius: 4px; background: #2A3A2C}
.d6b{height: 170px; border-radius: 4px; background: #22324A; color: var(--parchment); display: grid; place-items: center; font-size: 0.85rem}
.d6c{height: 90px; border-radius: 4px; background: #22324A}
.d6d{left: 14%; top: 82%; animation-delay: -6s; animation-duration: 19s}
.d6e{left: 47%; top: 70%; animation-delay: -1s; animation-duration: 23s}
.d6f{left: 84%; top: 90%; animation-delay: -9s; animation-duration: 18s}
.d6g{display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 31px}
.d6h{margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.05}
.d6i{width: min(520px, 100%)}
.d6j{position: relative; width: 100%; aspect-ratio: 1 / 1; font-family: var(--font-body); color: var(--parchment)}
.d6k{display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-weight: 600; text-decoration: none; border-radius: 4px; background: transparent; color: var(--parchment); border: 3px double var(--ember)}
.d6l{position: absolute; left: 50.00%; top: 9.00%; opacity: 0.70; transform: translate(-50%, -50%) scale(0.880); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--parchment); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d6m{padding: 1px 10px; border-radius: 999px; background: var(--deepwood); font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap}
.d6n{position: absolute; left: 88.99%; top: 37.33%; opacity: 0.80; transform: translate(-50%, -50%) scale(0.942); z-index: 13; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--parchment); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d6o{position: absolute; left: 74.10%; top: 83.17%; opacity: 0.97; transform: translate(-50%, -50%) scale(1.043); z-index: 19; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--parchment); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d6p{position: absolute; left: 25.90%; top: 83.17%; opacity: 0.97; transform: translate(-50%, -50%) scale(1.043); z-index: 19; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--parchment); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d6q{position: absolute; left: 11.01%; top: 37.33%; opacity: 0.80; transform: translate(-50%, -50%) scale(0.942); z-index: 13; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--parchment); cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease}
.d6r{left: 7%; top: 82%; animation-delay: -2s; animation-duration: 18s}
.d6s{left: 33%; top: 66%; animation-delay: -9s; animation-duration: 22s}
.d6t{left: 57%; top: 90%; animation-delay: -5s; animation-duration: 20s}
.d6u{left: 93%; top: 72%; animation-delay: -12s; animation-duration: 24s}
.d6v{position: relative; max-width: 1240px; margin: 0 auto; padding: 64px 24px 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 48px; align-items: start}
.d6w{display: flex; flex-direction: column; gap: 18px; padding-top: 24px}
.d6x{font-family: var(--font-rune); color: var(--lichen); letter-spacing: 0.4em; font-size: 0.95rem}
.d6y{margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 5.52vw, 5.28rem); line-height: 1; letter-spacing: -0.03em}
.d6z{margin: 0; max-width: 40ch; font-size: 19px; color: var(--lichen)}
.d70{font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.1; color: var(--parchment); text-decoration: none}
.d71{font-size: 1.2rem; color: var(--parchment)}
.d72{display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--moss-light)}
.d73{display: flex; gap: 12px; align-items: center}
.d74{position: relative; background: var(--parchment); color: var(--deepwood); border-radius: 4px; padding: 48px clamp(24px, 4vw, 48px) 56px; box-sizing: border-box; box-shadow: 0 5px 0 #D9CDB0, 0 10px 0 var(--gilt-shadow), 0 40px 80px #000000, inset 0 0 140px var(--gilt-shadow)}
.d75{position: absolute; left: 12px; top: 12px}
.d76{position: absolute; right: 12px; bottom: 12px; transform: scale(-1, -1)}
.d77{position: relative; display: flex; flex-direction: column; gap: 14px}
.d78{margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 2.4rem; line-height: 1.05}
.d79{margin: 0; color: var(--ink-muted)}
.d7a{margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px}
.d7b{padding: 0; margin-bottom: 8px; font-weight: 600}
.d7c{display: flex; flex-wrap: wrap; gap: 8px}
.d7d{position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--deepwood); border: 1px solid var(--moss)}
.d7e{position: absolute; opacity: 0; width: 1px; height: 1px}
.d7f{font-family: var(--font-rune)}
.d7g{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px}
.d7h{display: flex; flex-direction: column; gap: 4px; font-weight: 500}
.d7i{min-height: 46px; padding: 0 12px; font: inherit; font-weight: 400; background: var(--vellum); color: var(--deepwood); border: 1px solid var(--moss); border-radius: 4px}
.d7j{padding: 10px 12px; font: inherit; font-weight: 400; background: var(--vellum); color: var(--deepwood); border: 1px solid var(--moss); border-radius: 4px; resize: vertical}
.d7k{align-self: flex-start; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 4px; background: transparent; color: var(--deepwood); border: 3px double var(--moss)}
.d7l{margin: 0; font-size: 0.85rem; color: var(--ink-muted)}
.d7m{position: relative; max-width: 1300px; margin: 0 auto; padding: 0 24px 104px; display: flex; flex-direction: column; align-items: center; gap: 31px; text-align: center}
.d7n{position: relative; max-width: 1200px; margin: 0 auto; padding: 104px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 48px; align-items: center}
.d7o{display: flex; flex-direction: column; gap: 16px}
.d7p{display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 20px; border: 1px solid var(--moss); outline: 1px solid var(--moss); outline-offset: -7px; border-radius: 4px}
.d7q{display: flex; flex-direction: column; align-items: center; gap: 12px}
.d7r{margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.3rem}
.d7s{width: min(500px, 100%)}
.d7t{position: relative; max-width: 1200px; margin: 0 auto; padding: 32px 24px 40px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--lichen); font-size: 0.95em}

/* Orbit card related-page chips (built by site.js) */
.orbit-related { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--moss); background: transparent; color: inherit; cursor: pointer; }
[data-orbitnav="portfolio"] .orbit-related { border-color: var(--moss-light); }

/* Thanks and 404 pages */
.simple-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 30%, var(--moss) 0%, var(--deepwood) 65%); font-family: var(--font-body); line-height: 1.6; }
.simple-card { position: relative; max-width: 560px; padding: 56px clamp(24px, 6vw, 56px); background: var(--parchment); color: var(--deepwood); border-radius: var(--radius); box-shadow: inset 0 0 140px var(--gilt-shadow), 0 40px 80px #000; text-align: center; }
.simple-card h1 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.05; }
.simple-card p { margin: 0 0 12px; }
.simple-card a { color: var(--moss); font-weight: 600; }
.simple-seal { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: var(--seal); box-shadow: inset 0 0 0 4px var(--seal-light), inset 0 0 0 7px var(--seal-dark); }

/* Orbit nav centre: idle hint and the chosen page's card */
[data-orbit-nosel], [data-orbit-sel] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
[data-orbit-sel][hidden], [data-orbit-nosel][hidden] { display: none; }
@media (max-width: 520px) {
  [data-orbitnav] .d1d, [data-orbitnav] .d1g, [data-orbit-nosel] svg { display: none; }
  [data-orbitnav] .d1c, [data-orbitnav] .d1f { font-size: 1.15rem; }
  [data-orbitnav] .d1m { display: none; }
}

/* Comparison tables stack into cards on narrow screens */
@media (max-width: 640px) {
  .d4f { overflow: visible; }
  .d4g { min-width: 0; }
  .d4g thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .d4g tr { display: block; padding: 8px 0 16px; }
  .d4g th, .d4g td { display: block; width: auto; padding: 8px 4px; }
  .d4g td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; }
  .d4g td.d4s { padding: 10px 12px; }
}

/* Orbit nav in live mode: nodes sit at the centre and site.js moves them with transforms.
   Without JS the design's fixed positions (d1j, d1o, ...) still show the full circle. */
.orbit-live nav button { left: 50% !important; top: 50% !important; transition: none !important; will-change: transform; }

/* Privacy policy and terms */
.legal-wrap { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 48px 16px 96px; }
.legal { position: relative; padding: clamp(28px, 6vw, 64px); background: var(--parchment); color: var(--deepwood); border-radius: var(--radius); box-shadow: inset 0 0 140px var(--gilt-shadow), 0 40px 80px #000; font-size: 1.02rem; line-height: 1.7; }
.legal > * { position: relative; }
.legal h1 { margin: 8px 0 4px; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
.legal h2 { margin: 32px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.legal p { margin: 0 0 12px; max-width: 68ch; }
.legal-meta { color: var(--ink-muted); font-size: 0.9rem; }
.legal-lead { font-size: 1.15rem; }
.legal ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 68ch; }
.legal li { display: flex; gap: 10px; align-items: baseline; }
.legal li svg { flex: none; }
.legal a { color: var(--moss); font-weight: 600; }
.form-legal a { color: var(--moss); }

/* Open book: two pages side by side only when both fit; the spine ribbon shows only then too */
@media (min-width: 1100px) { .do { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1099px) {
  .ribbon { display: none; }
  .dp { border-radius: 4px 4px 0 0; box-shadow: inset 0 -40px 50px -30px #8C7B55, inset 0 0 140px var(--gilt-shadow); }
  .d14 { border-radius: 0 0 4px 4px; box-shadow: inset 0 40px 50px -30px #8C7B55, inset 0 0 140px var(--gilt-shadow); }
}

/* Orbit nav: the ring layer only catches clicks on its runes, so the centre card's link and buttons work */
[data-orbitnav] nav { pointer-events: none; }
[data-orbitnav] nav button { pointer-events: auto; transition: opacity 0.4s ease; }

/* Headings materialize letter by letter out of a green glow (site.js splits them into .ml letters) */
.mw { display: inline-block; white-space: nowrap; }
.ml { display: inline-block; }
[data-armed] [data-head].mz:not([data-in]) { opacity: 1; translate: none; }
[data-armed] [data-head].mz:not([data-in]) .ml { opacity: 0; }
[data-armed] [data-head].mz[data-in] .ml { animation: materialize 1.2s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--rd, 0ms) + var(--li, 0) * 32ms); }
@keyframes materialize {
  0% { opacity: 0; filter: blur(8px); transform: translateY(.22em) scale(.9); text-shadow: 0 0 .35em #9BF0A0, 0 0 .9em #34B36F, 0 0 1.6em #1F7A4A; }
  35% { opacity: .9; filter: blur(2px); transform: translateY(.04em) scale(1.02); text-shadow: 0 0 .3em #B9F5B0, 0 0 .8em #34B36F, 0 0 1.4em #1F7A4A; }
  100% { opacity: 1; filter: blur(0); transform: none; text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ml { animation: none !important; opacity: 1 !important; }
}

/* Portal: links in the orbit card open a glowing portal that fills the screen (site.js),
   and the next page opens out of it (portal.js sets .portal-arrive before first paint). */
@property --pr { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.portal-leave, .portal-arrive body::after {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
}
.portal-leave {
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), var(--deepwood) calc(var(--pr) - 7%), #1F7A4A calc(var(--pr) - 2.5%), #9BF0A0 var(--pr), transparent calc(var(--pr) + 0.6%));
  animation: portal-reach 0.7s cubic-bezier(.45, 0, .55, 1) both;
}
.portal-arrive body::after {
  content: "";
  background: radial-gradient(circle at 50% 50%, transparent var(--pr), #9BF0A0 calc(var(--pr) + 0.6%), #1F7A4A calc(var(--pr) + 3%), var(--deepwood) calc(var(--pr) + 8%));
  animation: portal-grow 0.9s cubic-bezier(.3, 0, .2, 1) 0.05s both;
}
@keyframes portal-grow { from { --pr: 0%; } to { --pr: 160%; } }
@keyframes portal-reach { from { --pr: 0%; } to { --pr: 112%; } }
@media (prefers-reduced-motion: reduce) {
  .portal-leave, .portal-arrive body::after { display: none; }
}

/* Turnstile status under the contact form (shown only when the spam check fails) */
.ts-status { color: #7A2E12; font-weight: 600; }