/* Courageous Souls — v4 "Bold", Terracotta & Gold (Sharon's picks, 2026-10-15)
   Contrast (measured): gold #F2C879 on night #4A2219 8.7:1 · muted #E2CFC5 on night 9.1:1 ·
   paper on night 12:1 · terracotta #9A4024 on paper 5.9:1 / on clay 5.0:1 · pm #5A4640 on paper 7.7:1 ·
   button label #4A2219 on gold 8.7:1. */

:root {
  --night: #4a2219;
  --night-2: #3a1a13;
  --ink: #2e1914;
  --paper: #f6efe6;
  --clay: #ecdccb;
  --gold: #f2c879;
  --on-gold: #4a2219;
  --terra: #9a4024;
  --muted: #e2cfc5;
  --soft: #f6e9df;
  --pm: #5a4640;
  --line-d: rgb(var(--gold-rgb) / 0.22);
  --line-l: rgb(var(--ink-rgb) / 0.14);
  --night: #4a2219;
  --night-2: #3a1a13;
  --ink: #2e1914;
  --paper: #f6efe6;
  --clay: #ecdccb;
  --gold: #f2c879;
  --on-gold: #4a2219;
  --terra: #9a4024;
  --muted: #e2cfc5;
  --soft: #f6e9df;
  --pm: #5a4640;
  --scrim: 52 24 18;
  --panel-hover: #573129;
  --gold-hover: #f5d69a;
  --terra-hover: #7e341e;
  --gold-rgb: 242 200 121;
  --terra-rgb: 154 64 36;
  --ink-rgb: 46 25 20;
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Sharon picked Charcoal & Gold (2026-10-16): final palette */
  --night: #1d1916;
  --night-2: #141110;
  --ink: #1d1916;
  --paper: #f4efe7;
  --clay: #e7dfd3;
  --gold: #d9aa4f;
  --on-gold: #1d1916;
  --terra: #7a500f;
  --muted: #cfc6ba;
  --soft: #f2eadf;
  --pm: #4f4741;
  --scrim: 20 18 15;
  --panel-hover: #2d2926;
  --gold-hover: #e2bf7b;
  --terra-hover: #64420c;
  --gold-rgb: 217 170 79;
  --terra-rgb: 122 80 15;
  --ink-rgb: 29 25 22;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Archivo, system-ui, sans-serif; font-size: 17.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--terra); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--on-gold); padding: .6rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; }
.light .eyebrow { color: var(--terra); }
.display, h1, h2 { font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 6.6vw, 6rem); line-height: .93; margin: 0 0 26px; }
h1 .sub, h2 .sub { display: block; font-stretch: 100%; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.2; margin-top: 18px; }
h1 .sub { font-size: .4em; color: var(--soft); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: .97; margin: 0 0 28px; }
h3 { font-stretch: 85%; font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0 0 10px; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.6; }
.dark .lead { color: var(--soft); }
.light .lead { color: var(--pm); }
.prose { max-width: 62ch; }
.light .prose p { color: var(--pm); }
.dark .prose p { color: var(--muted); }
.gold { color: var(--gold); }
.light .accent { color: var(--terra); }

.dark { background: var(--night); color: #fff; }
.darker { background: var(--night-2); color: #fff; }
.light { background: var(--paper); color: var(--ink); }
.clay { background: var(--clay); color: var(--ink); }
.section { padding: clamp(80px, 13vh, 140px) 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; white-space: nowrap;
  background: var(--gold); color: var(--on-gold); text-decoration: none; border: 0; cursor: pointer;
  font: 700 .85rem/1 Archivo, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 30px; min-height: 52px; border-radius: 3px;
  transition: background-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.btn:hover { background: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.55); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.sm { padding: 12px 18px; min-height: 44px; font-size: .74rem; }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.light .btn.terra, .clay .btn.terra { background: var(--terra); color: #fff; }
.light .btn.terra:hover, .clay .btn.terra:hover { background: var(--terra-hover); }
.row { display: flex; flex-wrap: wrap; gap: 14px; }
.textlink { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--terra); display: inline-flex; min-height: 44px; align-items: center; }
.dark .textlink { text-decoration-color: var(--gold); }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 30; background: var(--night); color: #fff; border-bottom: 1px solid var(--line-d); }
.header .wrap { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-height: 44px; }
.brand img { width: 38px; height: 38px; }
.brand b { display: block; font-family: Junge, serif; font-weight: 400; font-size: 1.28rem; letter-spacing: .04em; line-height: 1.05; }
.brand small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.8rem; }
.nav a:not(.btn) { color: #fff; text-decoration: none; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; position: relative; padding: 12px 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; color: #fff; width: 48px; height: 48px; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px auto; transition: transform .3s var(--ease), opacity .2s; }

/* ---------- home hero: her photo fills the whole hero, the words sit over it ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - 77px); }
.hero__copy { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 8vh, 90px) clamp(20px, 4.5vw, 72px); }
.hero__copy > div { max-width: 600px; width: 100%; }
/* line the hero copy up with the logo in the header */
.hero__copy { padding-left: max(clamp(20px, 4.5vw, 72px), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* scaled past the right edge so she lands on the right third, clear of the words */
.hero__photo img { position: absolute; top: 0; left: 0; height: 100%; width: max(138%, calc((100svh - 77px) * 1.6)); max-width: none; object-fit: cover; object-position: 50% 50%; }
/* terracotta-brown fade: solid behind the words, clear over her */
/* no tint over her photo (Sharon, 2026-10-16): legibility comes from a soft shadow on the letters only */
/* the photo stays untinted (Sharon): the headline sits right on it; everything smaller lives on one solid charcoal card */
.hero h1 { text-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 2px 22px rgb(0 0 0 / .45); margin-bottom: 30px; }
.hero .eyebrow { display: inline-block; background: var(--night); padding: 9px 14px; border-radius: 2px; margin-bottom: 26px; }
.hero__card { background: var(--night); max-width: 540px; padding: 26px 28px 28px; border-radius: 3px; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .7); }
.hero__sub { font-stretch: 85%; font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.2; color: #fff; margin: 0 0 12px; }
.hero__card .lead { color: var(--soft); font-size: 1.05rem; margin: 0 0 22px; }
.hero__card .row { gap: 6px 26px; align-items: center; }
@media (max-width: 900px) { .hero__card { padding: 22px 20px 24px; } .hero h1 { margin-bottom: 22px; } }

/* sub-page hero */
.phero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(56px, 10vh, 110px) 0; }
.phero h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.phero figure { margin: 0; position: relative; }
.phero figure img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; }
.phero figure::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); border-radius: 3px; z-index: -1; }
.phero figure { z-index: 0; isolation: isolate; }

/* ---------- home: now what ---------- */
.nowwhat { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.questions { list-style: none; margin: 0 0 34px; padding: 0; }
.questions li { font-stretch: 85%; font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.28; padding: 24px 0 24px 46px; border-top: 1px solid var(--line-l); position: relative; color: var(--ink); }
.questions li::before { content: "?"; position: absolute; left: 0; top: 22px; font-stretch: 70%; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--terra); }

/* the words band */
.words { text-align: center; }
.words p.intro { font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .55em; font-stretch: 70%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 6.4vw, 5.6rem); line-height: 1; }
.words li { color: #fff; }
.words li:last-child { color: var(--gold); flex-basis: 100%; }
.words .after { max-width: 54ch; margin: 44px auto 0; color: var(--muted); font-size: 1.15rem; }

/* statement band */
.statement { text-align: center; }
.statement p { font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1; margin: 0; }
.statement p span { color: var(--terra); }
.statement p .ph { color: inherit; white-space: nowrap; }

/* meet / split */
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.split.flip { grid-template-columns: 1.15fr .85fr; }
.split.flip figure { order: 2; }
.split figure { margin: 0; }
.split figure img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; }
/* long text beside a photo: the photo stays in view while you read */
.split { align-items: start; }
.split figure { position: sticky; top: 110px; }
.creds { list-style: none; margin: 28px 0 32px; padding: 0; border-top: 1px solid var(--line-l); }
.creds li { padding: 13px 0 13px 28px; border-bottom: 1px solid var(--line-l); font-weight: 600; position: relative; }
.creds li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--terra); transform: rotate(45deg); }
.dark .creds { border-color: var(--line-d); }
.dark .creds li { border-color: var(--line-d); color: #fff; }
.dark .creds li::before { background: var(--gold); }

/* offers */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line-d); border: 1px solid var(--line-d); margin-top: 50px; }
.offer { background: var(--night); padding: 36px 32px 34px; display: flex; flex-direction: column; transition: background-color .3s ease; }
.offer:hover { background: var(--panel-hover); }
.offer .n { font-stretch: 70%; font-weight: 800; font-size: 3rem; line-height: 1; color: var(--gold); margin-bottom: 22px; }
.offer h3 { color: #fff; font-size: 1.5rem; }
.offer p { color: var(--muted); flex: 1; }
.offer .textlink { margin-top: 8px; align-self: flex-start; }
.offers.wide { grid-template-columns: 1fr; }
.offers.wide .offer { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px 36px; align-items: center; padding: 40px; }
.offers.wide .offer .n { margin: 0; }
.offers.wide .offer p { margin: 0; }

/* discovery call band */
.book { text-align: center; }
.book h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.book .lead { max-width: 52ch; margin: 0 auto 34px; }
.book .fine { margin-top: 18px; font-size: .9rem; color: var(--pm); }

/* about */
.pull { font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; margin: 44px 0 16px; color: var(--terra); }
.mission-line { font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1; color: var(--gold); margin: 50px 0 0; max-width: 20ch; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); }
.why .big { font-stretch: 85%; font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.35; color: var(--ink); }

/* approach */
.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 80px); margin-top: 50px; }
.area { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; padding: 30px 0; border-top: 1px solid var(--line-l); }
.area .n { font-stretch: 70%; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--terra); }
.area p { margin: 0; color: var(--pm); }
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line-d); border: 1px solid var(--line-d); margin-top: 54px; }
.pillar { background: var(--night); padding: clamp(30px, 4vw, 48px); }
.pillar .k { font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.pillar h3 { font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: #fff; margin-bottom: 20px; }
.pillar p { color: var(--muted); }
.pillar ul { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-d); }
.pillar li { position: relative; padding: 6px 0 6px 24px; color: #fff; }
.pillar li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.closing { max-width: 30ch; margin: 64px auto 0; text-align: center; font-stretch: 85%; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; }

/* footer */
.footer { background: var(--night-2); color: var(--muted); padding: 56px 0 40px; font-size: .92rem; }
.footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.footer h4 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.footer a { color: #fff; text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.footer a:hover { color: var(--gold); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line-d); padding-top: 22px; margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .82rem; }
.footer .legal a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.js .wipe.in { clip-path: inset(0 0 0 0); }
.js .wipe img { transform: scale(1.12); transition: transform 2s var(--ease); }
.js .wipe.in img { transform: none; }
.js .words li { opacity: 0; transform: translateY(.35em); transition: opacity .7s ease, transform .9s var(--ease); }
.js .words.in li { opacity: 1; transform: none; }
.js:not(.booted) .reveal, .js:not(.booted) .wipe, .js:not(.booted) .words li { animation: failsafe 0s 2.5s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; clip-path: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .wipe, .js .wipe img, .js .words li { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .offers { grid-template-columns: 1fr; }
  .offers.wide .offer { grid-template-columns: 1fr; padding: 32px; }
  .areas, .pillars, .cols2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav { position: fixed; inset: 77px 0 0; background: var(--night); flex-direction: column; align-items: flex-start; gap: 0; padding: 20px var(--gutter) 40px; transform: translateY(-110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; overflow-y: auto; }
  .nav a:not(.btn) { font-size: 1.6rem; font-stretch: 75%; font-weight: 800; letter-spacing: 0; padding: 16px 0; width: 100%; border-bottom: 1px solid var(--line-d); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 28px; }
  .menu-open .nav { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* phones: she sits at the top of the frame, the words overlap the lower part of the photo */
  .hero { align-items: flex-end; min-height: calc(100svh - 77px); }
  .hero__copy { padding-top: 42svh; padding-bottom: 44px; }
  /* place her in the open top of the screen: scaled so her figure (x≈47%, y≈53% of the photo) lands centre-top */
  .hero__photo img { width: 190vw; height: auto; left: -39vw; top: -80vw; object-fit: fill; }
  .hero__copy > div { margin: 0; }
  .phero, .nowwhat, .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip figure { order: 0; }
  .split figure { position: static; }
  .phero figure { max-width: 460px; }
  .footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .brand b { font-size: 1.08rem; }
  .brand small { font-size: .58rem; letter-spacing: .14em; }
  .brand img { width: 32px; height: 32px; }
  .questions li { padding-left: 36px; }
  .area { grid-template-columns: 48px 1fr; }
}

/* full-bleed photo band */
.band-photo { position: relative; height: clamp(320px, 62vh, 640px); overflow: hidden; }
.band-photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.band-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--scrim) / .0) 55%, rgb(var(--scrim) / .55)); }
.band-photo figcaption { position: absolute; z-index: 1; left: var(--gutter); bottom: 28px; color: #fff; font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1; max-width: 18ch; }
section[id] { scroll-margin-top: 76px; }
.intro-head { max-width: 22ch; }

/* ================= hover states (mouse/trackpad only; touch devices never get stuck states) ================= */
.hw { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  /* big bold type: each word lifts and lights up as the cursor passes */
  .hw { transition: color .28s ease, transform .45s var(--ease); will-change: transform; }
  .hw:hover { transform: translateY(-.07em); }
  .dark .hw:hover, .darker .hw:hover, .band-photo .hw:hover { color: var(--gold); }
  .light .hw:hover, .clay .hw:hover { color: var(--terra); }
  .light .accent .hw:hover, .statement span:not(.ph) .hw:hover, .pull .hw:hover { color: var(--ink); }
  .mission-line .hw:hover, .closing .gold .hw:hover { color: #fff; }
  .words li { transition: color .3s ease, transform .5s var(--ease); cursor: default; }
  .words li:hover { color: var(--gold); transform: translateY(-.06em) scale(1.04); }
  .words li:last-child:hover { color: #fff; }

  /* logo: the flower turns toward you */
  .brand img { transition: transform .9s var(--ease); }
  .brand:hover img { transform: rotate(45deg); }

  /* photos: slow push-in, frame answers */
  .split figure { overflow: hidden; }
  .split figure img { transition: transform 1.4s var(--ease), filter .6s ease; }
  .split figure:hover img { transform: scale(1.045); filter: saturate(1.06); }
  .band-photo:hover img { transform: scale(1.04) !important; transition: transform 1.6s var(--ease); }

  /* questions */
  .questions li { transition: background-color .35s ease, color .3s ease; }
  .questions li::before { transition: transform .5s var(--ease); }
  .questions li:hover { background: rgb(var(--terra-rgb) / .07); color: var(--terra); }
  .questions li:hover::before { transform: rotate(-12deg) scale(1.15); }

  /* credentials */
  .creds li { transition: color .3s ease; cursor: default; }
  .creds li::before { transition: transform .5s var(--ease); }
  .creds li:hover { color: var(--terra); }
  .creds li:hover::before { transform: rotate(225deg) scale(1.25); }

  /* seven areas: a terracotta line sweeps in, the number fills */
  .area { position: relative; transition: background-color .35s ease; }
  .area::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
  .area:hover::after { transform: scaleX(1); }
  .area .n { transition: color .3s ease, transform .5s var(--ease); display: inline-block; }
  .area:hover .n { transform: translateX(4px); color: var(--ink); }
  .area h3 { transition: color .3s ease; }
  .area:hover h3 { color: var(--terra); }

  /* four pillars: gold bar sweeps across the top, the panel warms */
  .pillar { position: relative; transition: background-color .4s ease; }
  .pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
  .pillar:hover { background: var(--panel-hover); }
  .pillar:hover::before { transform: scaleX(1); }
  .pillar h3 { transition: color .3s ease; }
  .pillar:hover h3 { color: var(--gold); }
  .pillar li::before { transition: transform .5s var(--ease); }
  .pillar li:hover::before { transform: rotate(225deg) scale(1.3); }

  /* offers: a gold line sweeps along the bottom of the row, number steps forward */
  .offer { position: relative; }
  .offer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
  .offer:hover::after { transform: scaleX(1); }
  .offer .n { transition: transform .5s var(--ease), color .3s ease; }
  .offer:hover .n { transform: translateX(8px); color: #fff; }

  /* footer links: underline sweep */
  .footer ul a { background: linear-gradient(var(--gold), var(--gold)) 0 85% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s ease; }
  .footer ul a:hover { background-size: 100% 1px; }

  /* text links */
  .textlink { transition: color .3s ease, text-underline-offset .3s ease; }
  .textlink:hover { color: var(--terra); text-underline-offset: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw, .words li, .brand img, .split figure img, .hero__photo img, .area .n, .offer .n { transition: color .2s ease !important; transform: none !important; }
}

/* hero photo: slow settle-in on load */
.js .hero__photo img { transform: scale(1.08); transition: transform 2.4s var(--ease); }
.js.booted .hero__photo img { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .hero__photo img { transform: none; transition: none; } }
@media (min-width: 600px) and (max-width: 900px) {
  .hero__copy { padding-top: 56svh; }
  .hero__photo img { top: -94vw; }
}

/* ================= palettes (html[data-palette]); every pair contrast-checked ≥4.5:1 ================= */
html[data-palette="charcoal"] { --night: #1d1916; --night-2: #141110; --ink: #1d1916; --paper: #f4efe7; --clay: #e7dfd3; --gold: #d9aa4f; --on-gold: #1d1916; --terra: #7a500f; --muted: #cfc6ba; --soft: #f2eadf; --pm: #4f4741; --scrim: 20 18 15; --panel-hover: #2d2926; --gold-hover: #e2bf7b; --terra-hover: #64420c; --gold-rgb: 217 170 79; --terra-rgb: 122 80 15; --ink-rgb: 29 25 22; }
html[data-palette="bw"] { --night: #0d0d0d; --night-2: #000000; --ink: #0d0d0d; --paper: #ffffff; --clay: #ececec; --gold: #ffffff; --on-gold: #0d0d0d; --terra: #0d0d0d; --muted: #bdbdbd; --soft: #e6e6e6; --pm: #474747; --scrim: 9 9 9; --panel-hover: #1e1e1e; --gold-hover: #ffffff; --terra-hover: #333333; --gold-rgb: 255 255 255; --terra-rgb: 13 13 13; --ink-rgb: 13 13 13; }
html[data-palette="forest"] { --night: #18291f; --night-2: #111e17; --ink: #17261d; --paper: #f1f2ea; --clay: #dfe5d4; --gold: #c8d6a4; --on-gold: #18291f; --terra: #3d6638; --muted: #c6d0c2; --soft: #e9efe3; --pm: #46524a; --scrim: 17 29 22; --panel-hover: #28382f; --gold-hover: #d6e0bb; --terra-hover: #32542e; --gold-rgb: 200 214 164; --terra-rgb: 61 102 56; --ink-rgb: 23 38 29; }
html[data-palette="navy"] { --night: #14223d; --night-2: #0d172b; --ink: #14223d; --paper: #f4f0e9; --clay: #e6ded0; --gold: #ecc690; --on-gold: #14223d; --terra: #2c4f8c; --muted: #c6ccda; --soft: #ebeef5; --pm: #46506a; --scrim: 14 24 43; --panel-hover: #24314b; --gold-hover: #f1d4ac; --terra-hover: #244173; --gold-rgb: 236 198 144; --terra-rgb: 44 79 140; --ink-rgb: 20 34 61; }
html[data-palette="slate"] { --night: #252e38; --night-2: #1b222a; --ink: #252e38; --paper: #f1f2f4; --clay: #e2e5ea; --gold: #f08ab3; --on-gold: #252e38; --terra: #a92e64; --muted: #c9d0d8; --soft: #eef1f5; --pm: #4b5562; --scrim: 26 32 39; --panel-hover: #343d46; --gold-hover: #f4a7c6; --terra-hover: #8b2652; --gold-rgb: 240 138 179; --terra-rgb: 169 46 100; --ink-rgb: 37 46 56; }
html[data-palette="plum"] { --night: #3b1f33; --night-2: #2b1625; --ink: #2f1a29; --paper: #f7f0f0; --clay: #ecdbdd; --gold: #f2b8b0; --on-gold: #3b1f33; --terra: #8e3a5e; --muted: #e3cfd8; --soft: #f6e8ee; --pm: #5a4652; --scrim: 41 22 36; --panel-hover: #492f41; --gold-hover: #f5cac4; --terra-hover: #74304d; --gold-rgb: 242 184 176; --terra-rgb: 142 58 94; --ink-rgb: 47 26 41; }
html[data-palette="teal"] { --night: #0f3b3a; --night-2: #0a2b2a; --ink: #10302f; --paper: #f3f1ec; --clay: #dfe6e2; --gold: #f4a582; --on-gold: #0f3b3a; --terra: #a8432a; --muted: #c3d6d3; --soft: #e6f0ee; --pm: #43524f; --scrim: 10 41 41; --panel-hover: #204948; --gold-hover: #f7bca1; --terra-hover: #8a3722; --gold-rgb: 244 165 130; --terra-rgb: 168 67 42; --ink-rgb: 16 48 47; }
html[data-palette="bw"] img:not([src$=".svg"]) { filter: grayscale(1) contrast(1.05); }
html[data-palette="bw"] .brand img { filter: grayscale(1) brightness(2.6); }
body, .header, .section, .offer, .pillar, .btn, .footer { transition: background-color .45s ease, color .45s ease; }

/* more blues + greens (2026-10-16), same derivation + contrast check */
html[data-palette="steel"] { --night: #2b3e50; --night-2: #1f2d3b; --ink: #1f2d3b; --paper: #f2f3f2; --clay: #dfe4e8; --gold: #e8c372; --on-gold: #1f2d3b; --terra: #2e5a82; --muted: #c8d2dc; --soft: #edf1f5; --pm: #47525d; --scrim: 30 43 56; --panel-hover: #3a4c5c; --gold-hover: #eed295; --terra-hover: #264a6b; --gold-rgb: 232 195 114; --terra-rgb: 46 90 130; --ink-rgb: 31 45 59; }
html[data-palette="ocean"] { --night: #0b3557; --night-2: #072540; --ink: #0b2a45; --paper: #f1f5f7; --clay: #dbe7ee; --gold: #9fd3f2; --on-gold: #0b3557; --terra: #1b5c92; --muted: #c2d4e2; --soft: #e8f1f7; --pm: #43525e; --scrim: 8 37 61; --panel-hover: #1c4363; --gold-hover: #b7def5; --terra-hover: #164b78; --gold-rgb: 159 211 242; --terra-rgb: 27 92 146; --ink-rgb: 11 42 69; }
html[data-palette="indigo"] { --night: #262a5c; --night-2: #1b1e45; --ink: #1f2248; --paper: #f6f2ef; --clay: #e7e1e6; --gold: #f6bf9a; --on-gold: #262a5c; --terra: #4a4ea0; --muted: #cfd0e4; --soft: #eeeef7; --pm: #4d4e63; --scrim: 27 29 64; --panel-hover: #353967; --gold-hover: #f8cfb3; --terra-hover: #3d4083; --gold-rgb: 246 191 154; --terra-rgb: 74 78 160; --ink-rgb: 31 34 72; }
html[data-palette="emerald"] { --night: #0f3d2e; --night-2: #0a2c21; --ink: #0e3326; --paper: #f3f2ea; --clay: #dfe6dc; --gold: #e2c26a; --on-gold: #0f3d2e; --terra: #1d6a4d; --muted: #c2d6cc; --soft: #e7f0ea; --pm: #44524b; --scrim: 10 43 32; --panel-hover: #204b3d; --gold-hover: #e9d18f; --terra-hover: #18573f; --gold-rgb: 226 194 106; --terra-rgb: 29 106 77; --ink-rgb: 14 51 38; }
html[data-palette="olive"] { --night: #36391f; --night-2: #272a16; --ink: #2c2e18; --paper: #f5f2e8; --clay: #e6e2cf; --gold: #e0b85a; --on-gold: #2c2e18; --terra: #6b5a17; --muted: #d6d6c2; --soft: #efefe2; --pm: #4f4f3c; --scrim: 38 40 22; --panel-hover: #44472f; --gold-hover: #e8ca83; --terra-hover: #584a13; --gold-rgb: 224 184 90; --terra-rgb: 107 90 23; --ink-rgb: 44 46 24; }
html[data-palette="pine"] { --night: #12302a; --night-2: #0c221e; --ink: #10291f; --paper: #f2f4f1; --clay: #dce8e2; --gold: #a8e0c4; --on-gold: #12302a; --terra: #1f6b59; --muted: #c0d5cd; --soft: #e6f2ec; --pm: #43524d; --scrim: 13 34 29; --panel-hover: #233e39; --gold-hover: #bee8d3; --terra-hover: #195849; --gold-rgb: 168 224 196; --terra-rgb: 31 107 89; --ink-rgb: 16 41 31; }