/* ══════════════════════════════════════════════════════════════════════════════
SITE KIT — the Easton Automations design kernel. kit.css v1.0
Extracted 2026-08-31 from the Lux Eternal Spa build, which is the version of
this system that closed in the room (Karen Fuchs, 2026-08-26).
HOW TO USE IT
<- this file, never edited
<- the client's colours only
<- anything unique to them
palette.css redefines the :root values below and nothing else. If you find
yourself editing kit.css for one client, the thing you want belongs in their
site.css instead. A kit that gets forked per client is not a kit.
THE RULES THIS FILE ENFORCES SO NOBODY HAS TO REMEMBER THEM
- Header sizes are floors, not suggestions (--nav-h and the .nav block).
This is the single most repeated correction on a build: the header is too
small. Never shrink it to fit more links. Drop a link instead.
- Body copy floor is 17px. Secondary text never below 15px. Badges never
below 11px. This audience skews older and reads on a phone in bad light.
- No band is ever a flat fill. Every section carries two blurred light
sources and a film grain, so the page reads lit rather than printed.
- Nothing is hidden to animate it. See the .reveal note further down.
══════════════════════════════════════════════════════════════════════════════ */
:root{
--ink:#1B2419; /* the client's darkest brand colour */
--ink-2:#2E3B29;
--ink-3:#4A5A42;
--accent-2:#8A9A7B;
--accent:#B08D57;
--accent-lt:#C9A96A;
--paper:#F7F3EA;
--paper-2:#FFFDF7;
--line:#E2DACB;
--body:#3D453A;
--muted:#6E7768;
--mark:#6FA344; /* only ever the logo mark, never type or UI */
/* Ambient brand light. Sections are never a flat fill: each one carries a soft gold and
secondary glow so the page reads lit rather than printed. Adam's standing rule is that a
plain white or plain cream section is unacceptable. (Adam, 2026-08-26.) */
--glow-a:rgba(176,141,87,.22);
--glow-b:rgba(122,150,104,.17);
--hair:rgba(176,141,87,.22);
/* A tiled film grain. Large soft gradients band badly on cheap panels, and a few percent of
noise both hides that and is most of why a gradient reads expensive instead of flat. */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
--shadow:0 1px 2px rgba(27,36,25,.05),0 8px 30px -12px rgba(27,36,25,.18);
--shadow-lg:0 2px 4px rgba(27,36,25,.06),0 30px 60px -22px rgba(27,36,25,.30);
--r:14px; --r-lg:22px;
/* Header size lives here. Deliberately large: this audience skews older and the nav has to
be readable and tappable without anyone leaning in. Never shrink these to fit more links,
drop a link instead. (Adam, 2026-08-26.) */
--nav-h:100px;
--serif:"Cormorant Garamond",'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
--sans:"Jost",-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--wrap:1180px;
/* Luxury grammar knobs (client-site-design skill, reference/luxury-grammar.md, 2026-09-05).
Measured on 24 award-level sites: hero display median 78px = 5.4vw, text columns 620-720px,
buttons either full pills or square (0-4px) and never the 8-14px in between. */
--col:680px;
--display:clamp(2.6rem,5.4vw,5.5rem);
--display-lh:1.02;
--btn-r:100px; /* pills. the other luxury camp is square: set 3px in palette.css */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;color:var(--body);
background:var(--paper);
font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.12;
letter-spacing:-.005em;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 44px,860px);margin-inline:auto}
.col{width:min(100% - 44px,var(--col));margin-inline:auto}
.prose{max-width:60ch}
@media(max-width:640px){.wrap,.narrow,.col{width:min(100% - 32px,var(--wrap))}}
/* ── eyebrow / section headings ── */
.eyebrow{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
font-weight:500;color:var(--accent);margin:0 0 16px}
.eyebrow.on-dark{color:var(--accent-lt)}
.dhead{font-size:clamp(2rem,4.4vw,3.25rem);letter-spacing:-.012em}
.lede{font-size:clamp(1.06rem,1.6vw,1.2rem);line-height:1.72;color:var(--muted);max-width:62ch}
.lede.on-dark{color:rgba(247,243,234,.80)}
/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;
text-transform:uppercase;text-decoration:none;padding:15px 30px;border-radius:var(--btn-r);
border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),
background-color .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px rgba(176,141,87,.85)}
.btn-accent:hover{background:#9C7B49;box-shadow:0 16px 30px -12px rgba(176,141,87,.9)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#0F160E}
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{border-color:rgba(247,243,234,.42);color:var(--paper)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btns{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
/* white-space:normal on the narrowest phones: a full-width button carrying the long CTA
("Book a free consultation") has an intrinsic width of ~330px with nowrap, which is wider
than a 320px phone and was the 18px overflow the reference audit caught on 2026-09-05. */
@media(max-width:430px){.btns .btn{width:100%}.btns .btn,.thanks .btn{padding:15px 20px}.btns{gap:10px}
.btns .btn,.drawer .dbtns .btn{white-space:normal;text-align:center;line-height:1.25}}
/* ── nav ── */
.nav{position:sticky;top:0;z-index:70;background:rgba(247,243,234,.86);
backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
border-bottom:1px solid var(--line);transition:background .3s,border-color .3s}
.nav-in{display:flex;align-items:center;gap:24px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto;margin-right:auto;
min-height:44px}
.brand .mk{width:36px;height:36px;flex:0 0 36px}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .w1{font-family:var(--serif);font-size:27px;letter-spacing:.10em;color:var(--ink);font-weight:500}
.brand .w2{font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;color:var(--accent);
text-transform:uppercase;margin-top:4px;font-weight:500}
/* 21px, down from 26. The eighth tab plus 18px type overflowed the page by up to 36px in the band
just above the 1240px burger breakpoint. Buying the room out of the GAPS keeps the bigger
type and all eight labels — the design rule forbids shrinking the header itself, not its
spacing. Measured after: no overflow at any width, clearance holds. */
.nlinks{display:flex;align-items:center;gap:21px}
/* 18px, up from the 17px floor. A client has asked for a bigger header on more than one build
("it looks a little bit small in my opinion", 2026-08-28). Start here, not at the floor. */
.nlinks a{font-size:18px;text-decoration:none;color:var(--body);position:relative;
padding:7px 0;transition:color .2s;white-space:nowrap}
.nlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--accent);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nlinks a:hover{color:var(--ink)}
.nlinks a:hover::after,.nlinks a[aria-current]::after{right:0}
.nlinks a[aria-current]{color:var(--ink)}
.ncta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.nphone{font-size:18px;text-decoration:none;color:var(--body);white-space:nowrap;transition:color .2s}
.nphone:hover{color:var(--accent)}
.ncta .btn{padding:14px 28px;font-size:14.5px}
.burger{display:none;width:52px;height:52px;border:1px solid var(--line);background:none;
border-radius:13px;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto;
transition:border-color .2s,background .2s}
.burger:hover{border-color:var(--accent)}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;height:2px;
background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.3,1),background .2s}
.burger span::before{top:-7px}.burger span::after{top:7px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}
/* pages whose banner is dark invert the nav until you scroll */
body.dark-top .nav{background:transparent;border-bottom-color:transparent}
body.dark-top .nav .w1{color:var(--paper)}
body.dark-top .nav .nlinks a,body.dark-top .nav .nphone{color:rgba(247,243,234,.85)}
body.dark-top .nav .nlinks a:hover,body.dark-top .nav .nlinks a[aria-current]{color:#fff}
body.dark-top .nav .burger{border-color:rgba(247,243,234,.38)}
body.dark-top .nav .burger span,body.dark-top .nav .burger span::before,body.dark-top .nav .burger span::after{background:var(--paper)}
body.dark-top .nav .btn-ink{background:var(--paper);color:var(--ink)}
body.dark-top.scrolled .nav,body.menu-open .nav{background:rgba(247,243,234,.94);border-bottom-color:var(--line)}
body.dark-top.scrolled .nav .w1,body.menu-open .nav .w1{color:var(--ink)}
body.dark-top.scrolled .nav .nlinks a,body.dark-top.scrolled .nav .nphone,
body.menu-open .nav .nlinks a,body.menu-open .nav .nphone{color:var(--body)}
body.dark-top.scrolled .nav .burger,body.menu-open .nav .burger{border-color:var(--line)}
body.dark-top.scrolled .nav .burger span,body.dark-top.scrolled .nav .burger span::before,
body.dark-top.scrolled .nav .burger span::after,body.menu-open .nav .burger span,
body.menu-open .nav .burger span::before,body.menu-open .nav .burger span::after{background:var(--ink)}
body.dark-top.scrolled .nav .btn-ink,body.menu-open .nav .btn-ink{background:var(--ink);color:var(--paper)}
.drawer{position:fixed;inset:var(--nav-h) 0 auto;background:var(--paper);border-bottom:1px solid var(--line);
z-index:69;padding:10px 0 30px;transform:translateY(-118%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
max-height:calc(100dvh - var(--nav-h));overflow-y:auto;box-shadow:var(--shadow)}
body.menu-open .drawer{transform:translateY(0)}
.drawer a{display:block;padding:17px 0;font-size:23px;font-family:var(--serif);color:var(--ink);
text-decoration:none;border-bottom:1px solid var(--line)}
.drawer .dbtns{margin-top:22px;display:grid;gap:11px}
.drawer .dbtns .btn{width:100%}
@media(max-width:1240px){
.nlinks,.nphone{display:none}
.burger{display:flex}
}
/* The lockup, the Book button and the burger together have an intrinsic width of ~411px, so
below that the header pushed every page sideways. Shrink the lockup and the button first,
then drop the button entirely on the narrowest phones — the drawer opens with the same
CTA, and every page carries its own. The 44px burger tap target is never reduced. */
@media(max-width:640px){
:root{--nav-h:86px}
.nav-in{gap:14px}
.brand{gap:10px}
.brand .mk{width:30px;height:30px;flex:0 0 30px}
.brand .w1{font-size:22px;letter-spacing:.08em}
.brand .w2{font-size:9px;letter-spacing:.28em}
.ncta{gap:11px}
.ncta .btn{padding:12px 17px;font-size:12.5px;letter-spacing:.04em}
.drawer a{font-size:21px;padding:16px 0}
}
@media(max-width:430px){.ncta .btn{display:none}}
@media(min-width:1061px){.drawer{display:none}}
/* ── hero ── */
.hero{position:relative;min-height:min(94dvh,880px);display:flex;align-items:flex-end;
margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 70px) 0 84px;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-img::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,18,11,.58) 0%,rgba(12,18,11,.22) 30%,rgba(12,18,11,.52) 66%,rgba(12,18,11,.90) 100%),
linear-gradient(96deg,rgba(12,18,11,.80) 0%,rgba(12,18,11,.58) 34%,rgba(12,18,11,.12) 66%,rgba(12,18,11,0) 100%)}
.hero-in{position:relative;z-index:2;color:var(--paper);width:min(100% - 44px,var(--wrap));margin-inline:auto}
.hero h1{color:#fff;font-size:clamp(2.9rem,7vw,5.4rem);font-weight:400;letter-spacing:-.018em;
line-height:1.02;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero .sub{margin:24px 0 0;font-size:clamp(1.05rem,1.9vw,1.32rem);color:rgba(247,243,234,.88);
max-width:52ch;line-height:1.62}
.hero .btns{margin-top:38px}
.hero-meta{margin-top:44px;padding-top:26px;border-top:1px solid rgba(247,243,234,.20);
display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;
font-size:14px;color:rgba(247,243,234,.78)}
.hero-meta b{color:#fff;font-weight:500}
.hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--accent-lt);flex:0 0 3px}
@media(max-width:700px){
.hero{min-height:0;margin-top:0;padding:0 0 46px;display:block;background:var(--ink)}
.hero-img{position:relative;inset:auto;height:74vw;max-height:440px;margin-top:calc(-1 * var(--nav-h))}
.hero-img::after{background:linear-gradient(180deg,rgba(12,18,11,.52) 0%,rgba(12,18,11,.10) 44%,rgba(12,18,11,.78) 100%)}
.hero-in{padding-top:34px}
.hero h1{max-width:none}
.hero-meta{gap:10px 22px;margin-top:30px}
}
/* ── page banner (every interior page) ── */
.pbanner{position:relative;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 92px) 0 78px;
overflow:hidden;background:var(--ink);min-height:420px;display:flex;align-items:flex-end}
.pbanner .bimg{position:absolute;inset:0}
.pbanner .bimg img{width:100%;height:100%;object-fit:cover}
.pbanner .bimg::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,18,11,.62) 0%,rgba(12,18,11,.34) 44%,rgba(12,18,11,.84) 100%),
linear-gradient(96deg,rgba(12,18,11,.82) 0%,rgba(12,18,11,.60) 36%,rgba(12,18,11,.14) 70%,rgba(12,18,11,0) 100%)}
.pbanner-in{position:relative;z-index:2;color:var(--paper);width:min(100% - 44px,var(--wrap));margin-inline:auto}
.pbanner h1{color:#fff;font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:400;letter-spacing:-.015em;max-width:18ch}
.pbanner .lede{margin-top:20px}
.crumbs{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(247,243,234,.62);margin-bottom:20px}
.crumbs a{color:rgba(247,243,234,.62);text-decoration:none;transition:color .2s;
display:inline-block;padding:13px 6px;margin:-13px -6px;min-height:44px;box-sizing:content-box}
.crumbs a:hover{color:var(--accent-lt)}
.crumbs span{margin:0 8px;opacity:.5}
@media(max-width:700px){.pbanner{padding:calc(var(--nav-h) + 56px) 0 52px;min-height:0}}
/* ── sections ──
Every band is lit, never filled flat. Light sections get a warm gold glow off one corner and
a sage glow off the opposite one; dark sections get the same treatment turned up, which reads
like the lamp light in the client's own rooms. Painted as background-image on the section rather
than a pseudo-element, so there is no stacking context to get wrong. */
.sec{padding:clamp(72px,9vw,128px) 0;position:relative}
.sec-ink,.sec-alt{border-top:1px solid rgba(201,169,106,.20);border-bottom:1px solid rgba(201,169,106,.14)}
.sec-tight{padding:clamp(48px,6vw,80px) 0}
.sec-paper{}
.sec-ink{color:rgba(247,243,234,.80)}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-alt{color:rgba(247,243,234,.80)}
.sec-alt h2,.sec-alt h3{color:#fff}
.shead{max-width:70ch;margin-bottom:clamp(34px,4.5vw,58px)}
.shead.center{margin-inline:auto;text-align:center}
.shead h2{font-size:clamp(1.95rem,4.2vw,3.05rem)}
.shead p{margin-top:16px}
/* ── grids ── */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.g2.ba-pair{align-items:center}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* ── split ── */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(34px,5.5vw,80px);align-items:center}
.split.flip .s-media{order:2}
.split .s-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}.split.flip .s-media{order:0}}
/* ── service cards ── */
.scard{position:relative;display:flex;flex-direction:column;
background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
box-shadow:0 1px 2px rgba(27,36,25,.04),0 14px 34px -22px rgba(27,36,25,.20);
transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s,border-color .34s}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D5CBB6}
.scard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.scard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.scard:hover .ph img{transform:scale(1.045)}
.scard .bd{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
/* A card's padding lives on .bd, because a card with a photo needs the image to run
edge to edge while the copy is inset. A card written WITHOUT the .bd wrapper is
therefore unpadded, and it renders as text jammed against the border with nothing
to tell you why. This guard catches that: no .bd, pad the card itself. Write the
.bd anyway — this exists so the mistake looks like a card, not like a bug. */
.scard:not(:has(.bd)){padding:26px 26px 28px}
.scard h3{font-size:1.5rem;margin-bottom:9px}
.scard p{font-size:15px;color:var(--muted);line-height:1.62;flex:1}
.scard .from{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:500}
.scard .arw{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.scard:hover .arw{transform:translateX(5px)}
/* ── price list ──
Every service is a light card, two across (Adam, 2026-08-28: "add the white bubble around the
other services... so they do not all look hard to read, and make them pop and look luxury").
Worth recording because it was measured: the old light-on-dark rows were NOT a contrast
failure — names ran 17.35:1 and descriptions 7.48:1. What was wrong was that sustained body
copy is harder to read light-on-dark whatever the ratio (this audience skews older, per the
client-site-design skill), the descriptions sat at 66% opacity so they read as recessed, and a
flat hairline-separated list has no depth. Hence a treatment change, not a colour change.
Two-up rather than full width is a deliberate density choice: the price list carries 47
services and was already 12,093px tall. Two across makes it SHORTER than the plain list was;
full-width cards would have pushed it past 16,000px. */
.menu-g{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:760px){.menu-g{grid-template-columns:1fr}}
.mrow{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px 24px;
align-items:baseline;align-content:start;overflow:hidden;
padding:clamp(24px,2.6vw,32px);
background:linear-gradient(168deg,#FFFEFA 0%,#FCF8F0 100%);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.mrow::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;
background:linear-gradient(180deg,var(--accent-lt),rgba(176,141,87,.15))}
.mrow .mn{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.24}
/* --body, not --muted: on this card's darkest gradient stop --muted measures 4.40:1 and misses
AA by a hair. It is the obvious-looking choice and it is wrong. Same trap for .mt below. */
.mrow .md{grid-column:1/-1;font-size:16px;color:var(--body);line-height:1.6;margin-top:2px}
.mrow .mp{font-family:var(--serif);font-size:1.5rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.mrow .mt{font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:#616B58;
display:block;margin-top:6px;font-weight:500}
.mrow .fav{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:#7C5F33;border:1px solid rgba(124,95,51,.38);border-radius:100px;padding:4px 11px;
vertical-align:middle;margin-left:11px;font-weight:500;white-space:nowrap}
.mgroup+.mgroup{margin-top:clamp(44px,5vw,70px)}
.mgroup>h3{font-size:clamp(1.85rem,3.4vw,2.5rem);margin-bottom:10px}
.mgroup>.gnote{font-size:17px;color:var(--muted);max-width:66ch;margin-bottom:30px}
@media(max-width:560px){.mrow .mn,.mrow .mp{font-size:1.3rem}.mrow .md{font-size:15.5px}}
/* ── treatment clip ── */
.vwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
background:var(--ink);max-width:1000px;margin-inline:auto;aspect-ratio:16/9}
.vwrap video{width:100%;height:100%;display:block;object-fit:cover}
.vcap{margin-top:18px;font-size:14.5px;color:var(--muted);text-align:center;
max-width:60ch;margin-inline:auto;line-height:1.6}
/* ── reviews ── */
.rvw{margin:0;background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);
box-shadow:0 1px 2px rgba(27,36,25,.04),0 12px 30px -24px rgba(27,36,25,.20);
border:1px solid var(--line);border-radius:var(--r-lg);
padding:30px 28px;display:flex;flex-direction:column;gap:16px;break-inside:avoid}
.rvw q{quotes:none;font-family:var(--serif);font-size:1.16rem;line-height:1.56;color:var(--ink-2);flex:1}
.rvw q::before{content:'“';color:var(--accent);margin-right:1px}
.rvw q::after{content:'”';color:var(--accent)}
.stars{color:var(--accent);letter-spacing:2px;font-size:13px}
.who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)}
.who .av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);
display:grid;place-items:center;font-family:var(--serif);font-size:16px;flex:0 0 36px}
.who .nm{display:block;color:var(--ink);font-weight:500;font-size:14.5px}
.who .mt{display:block;font-size:12.5px;margin-top:1px}
.rcols{columns:3;column-gap:clamp(18px,2.4vw,30px)}
.rcols .rvw{margin-bottom:clamp(18px,2.4vw,30px);display:inline-flex;width:100%}
@media(max-width:980px){.rcols{columns:2}}
@media(max-width:620px){.rcols{columns:1}}
/* ── before / after slider ── */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
background:var(--ink);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba img{width:100%;display:block;pointer-events:none}
.ba .aft{position:absolute;inset:0;overflow:hidden;width:50%}
.ba .aft img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.ba .hnd{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.92);
transform:translateX(-1px);pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.35)}
.ba .hnd::after{content:'';position:absolute;top:50%;left:50%;width:46px;height:46px;
transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.96);
box-shadow:0 4px 18px rgba(0,0,0,.34)}
.ba .hnd .ar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
color:var(--ink);font-size:12px;letter-spacing:1px}
.ba .lbl{position:absolute;bottom:14px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
background:rgba(15,22,14,.72);color:#fff;padding:6px 13px;border-radius:100px;
backdrop-filter:blur(6px);pointer-events:none;font-weight:500}
.ba .lbl.l{left:14px}.ba .lbl.r{right:14px}
.ba-cap{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}
/* ── gallery ── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal .tall{grid-row:span 2;aspect-ratio:auto}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}.gal .tall{grid-row:span 1;aspect-ratio:4/3}}
/* ── product cards ── */
.pcard{background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);
box-shadow:0 1px 2px rgba(27,36,25,.04),0 12px 30px -24px rgba(27,36,25,.20);
border:1px solid var(--line);border-radius:var(--r-lg);
padding:30px 26px;display:flex;flex-direction:column;gap:10px;
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard h3{font-size:1.36rem}
.pcard .sz{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500}
.pcard .ac{font-size:14px;color:var(--ink-2);font-style:italic;font-family:var(--serif);font-size:1.02rem}
.pcard p{font-size:14.5px;color:var(--muted);line-height:1.6}
/* ── facts / hours ── */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,58px)}
@media(max-width:820px){.facts{grid-template-columns:1fr}}
.hrow{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
border-bottom:1px solid var(--line);font-size:15.5px}
.hrow:last-child{border-bottom:0}
.hrow .d{color:var(--ink)}
.hrow .t{color:var(--muted);font-variant-numeric:tabular-nums}
.hrow.closed .t{color:#A79B85}
.hrow.today{position:relative}
.hrow.today .d{font-weight:500;color:var(--accent)}
.hrow.today .t{color:var(--accent)}
.sec-ink .hrow,.sec-alt .hrow{border-color:rgba(247,243,234,.14)}
.sec-ink .hrow .d,.sec-alt .hrow .d{color:rgba(247,243,234,.94)}
.sec-ink .hrow .t,.sec-alt .hrow .t{color:rgba(247,243,234,.62)}
.sec-ink .hrow.today .d,.sec-ink .hrow.today .t,
.sec-alt .hrow.today .d,.sec-alt .hrow.today .t{color:var(--accent-lt)}
.iline{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.iline:last-child{border-bottom:0}
.iline svg{flex:0 0 19px;margin-top:3px;color:var(--accent)}
.iline .k{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2);
display:block;margin-bottom:3px;font-weight:500}
/* These are the phone, email and address links in the Find us blocks — a phone tap is a tracked
lead, so this is a conversion target, not decoration. It measured 112x26 on a phone. Padded to
clear 44px without moving the underline off the text. */
.iline a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
transition:border-color .2s;display:inline-block;padding:9px 0;margin:-9px 0;min-height:44px;
box-sizing:content-box}
.iline a:hover{border-color:var(--accent)}
.sec-ink .iline,.sec-alt .iline{border-color:rgba(247,243,234,.14)}
.sec-ink .iline a,.sec-alt .iline a{color:#fff;border-color:rgba(247,243,234,.30)}
/* ── steps ── */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,44px)}
.steps>div{counter-increment:s;position:relative;padding-top:56px}
.steps>div::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
font-family:var(--serif);font-size:2.5rem;color:var(--accent);opacity:.5;line-height:1}
.steps h3{font-size:1.36rem;margin-bottom:9px}
.steps p{font-size:15px;color:var(--muted)}
.sec-ink .steps p,.sec-alt .steps p{color:rgba(247,243,234,.72)}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:30px}.steps>div{padding-top:0;padding-left:62px}
.steps>div::before{font-size:2.1rem}}
/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
font-family:var(--serif);font-size:1.28rem;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
transform:translateY(-70%) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq .ans{padding:0 40px 24px 0;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:74ch}
/* ── form ── */
.form{background:linear-gradient(168deg,#FFFEFA 0%,#FCF9F1 100%);border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(28px,4vw,46px);box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.fld label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);font-weight:500}
.fld input,.fld select,.fld textarea{font-family:var(--sans);font-size:16px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 15px;width:100%;
transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B08D57' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px rgba(176,141,87,.14)}
.fld input:invalid:not(:placeholder-shown){border-color:#C0796B}
.fnote{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6}
.thanks{text-align:center;padding:36px 10px}
.thanks .tick{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;
display:grid;place-items:center;margin:0 auto 20px;font-size:26px}
.thanks h3{font-size:1.9rem;margin-bottom:10px}
.thanks p{color:var(--muted)}
/* ── CTA band ── */
.cta{position:relative;overflow:hidden;background:var(--ink);text-align:center;
padding:clamp(64px,8vw,112px) 0}
.cta .cimg{position:absolute;inset:0;opacity:.30}
.cta .cimg img{width:100%;height:100%;object-fit:cover}
.cta .cimg::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,22,14,.72),rgba(15,22,14,.90))}
.cta-in{position:relative;z-index:2}
.cta h2{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem);max-width:20ch;margin-inline:auto}
.cta p{margin:20px auto 0;color:rgba(247,243,234,.80);max-width:56ch;font-size:1.06rem}
.cta .btns{justify-content:center;margin-top:34px}
/* ── footer ── */
.foot{background-color:var(--ink);color:rgba(247,243,234,.62);padding:clamp(52px,6vw,80px) 0 34px;font-size:15px;
background-image:
radial-gradient(760px 420px at 10% 0%,rgba(198,163,102,.16),transparent 62%),
radial-gradient(680px 400px at 94% 90%,rgba(122,150,104,.12),transparent 65%)}
.foot a{color:rgba(247,243,234,.62);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--accent-lt)}
/* Footer links were rendering 21px tall on a phone — measured 19 tap targets under the 44px
minimum, and this audience skews older (client-site-design skill). The link itself is padded
rather than the row spaced, so the whole target grows, not just the gap between them.
Negative inline margin keeps the left edge optically aligned with the heading above. */
/* Scoped to `.foot a`, NOT `.foot ul a`. The narrower scope shipped once and left every
footer link outside a list — most importantly the phone number, which is the single
highest-value tap on a client site — at 21px tall. Measured by _audit.html. */
.foot a{display:inline-block;padding:11px 8px;margin:-11px -8px;min-height:44px;
line-height:1.45;box-sizing:content-box}
@media(hover:none){.foot a{padding:13px 8px;margin:-13px -8px}}
/* Buttons inside the footer keep their own box. The .foot a rule above is for TEXT links:
its content-box sizing and negative margins turn a full-width .btn into 100% + 40px of
padding, which was an 18px horizontal overflow on every phone width in the reference
audit (2026-09-05, the first build with a .btns group in the footer). */
.foot a.btn{box-sizing:border-box;margin:0;padding:15px 30px}
@media(max-width:430px){.foot .btns .btn{padding:15px 20px}}
/* mailing list strip, above the footer columns on every page */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flist{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;
padding-bottom:clamp(34px,4vw,46px);margin-bottom:clamp(34px,4vw,46px);
border-bottom:1px solid rgba(247,243,234,.13)}
/* Scoped .foot .flist rather than .flist alone: the .foot h4 rule is defined later at the same
specificity and was winning, rendering this as an 11.5px uppercase column label instead of a
heading. (No backticks in these comments — the whole stylesheet is a template literal.) */
.foot .flist h4{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:#fff;
letter-spacing:0;text-transform:none;margin:0 0 8px;font-weight:500}
.flist p{margin:0;max-width:46ch;line-height:1.62}
.flist-form{display:flex;gap:10px;flex-wrap:wrap}
.flist-form input[type=email]{flex:1 1 220px;min-height:52px;padding:14px 16px;font:inherit;
font-size:16px;color:#FBF8F1;background:rgba(255,255,255,.06);border-radius:10px;
border:1px solid rgba(247,243,234,.22)}
.flist-form input[type=email]::placeholder{color:rgba(247,243,234,.42)}
.flist-form input[type=email]:focus{outline:none;border-color:var(--accent-lt);
box-shadow:0 0 0 3px rgba(201,169,106,.20)}
.flist-form .btn{min-height:52px;flex:0 0 auto}
.flist-slot .thanks{text-align:left;padding:0}
.flist-slot .thanks h3{font-size:1.25rem;margin:8px 0 6px;color:#fff}
.flist-slot .thanks p{font-size:15px}
@media(max-width:760px){.flist{grid-template-columns:1fr;gap:20px}
.flist-form .btn{width:100%}}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,48px)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:32px}}
.foot h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lt);
font-family:var(--sans);font-weight:500;margin-bottom:16px}
/* gap trimmed from 11px because each link now carries its own 11px of padding — without this
the footer columns grow by ~90px on a phone for no visual gain. */
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fbrand .w1{font-family:var(--serif);font-size:26px;letter-spacing:.10em;color:#fff;display:block}
.fbrand .w2{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-lt);margin-top:5px;display:block}
.fbrand p{margin-top:18px;max-width:34ch;line-height:1.7}
.social{display:flex;gap:11px;margin-top:20px}
/* 44px, up from 38px: the icon stays visually the same size, the hit area does not. */
.social a{width:44px;height:44px;border:1px solid rgba(247,243,234,.20);border-radius:50%;
display:grid;place-items:center;transition:border-color .25s,background .25s,color .25s}
.social a:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.fbot{margin-top:clamp(38px,5vw,60px);padding-top:26px;border-top:1px solid rgba(247,243,234,.13);
display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13px;
color:rgba(247,243,234,.44)}
.fbot .by{color:rgba(247,243,234,.44)}
.fbot .by a{color:rgba(247,243,234,.62);display:inline-block;padding:12px 6px;margin:-12px -6px;
min-height:44px;box-sizing:content-box}
/* ── misc ── */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
border-radius:100px;padding:8px 16px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);background:var(--paper-2)}
.pill.on-dark{border-color:rgba(247,243,234,.22);color:rgba(247,243,234,.78);background:transparent}
/* A pill used as a LINK is a tap target (the price list's jump nav), so it gets the 44px floor.
Decorative pills — the qualifier chips on the awards band and the treatment pages — are not
links and are deliberately left alone. */
a.pill{min-height:44px;padding-block:12px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.note{border-left:2px solid var(--accent);padding:4px 0 4px 20px;color:var(--muted);font-size:15px;
max-width:70ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
padding:12px 20px;z-index:100;border-radius:0 0 10px 0}
.skip:focus{left:0}
/* .reveal is deliberately INERT. It used to start every section at opacity:0 and rely on an
IntersectionObserver to reveal it, which left whole bands blank when the observer did not
fire — and because a transparent parent also defers its lazy-loaded images, eleven of the
twelve photographs on the home page never downloaded at all. A client demo cannot have a
failure mode where a section is simply not there, so the animation is gone. The class is
left in the markup as an inert hook. Do not restyle it to hide anything. */
/* ═══════════════════════════════════════════════════════════════════════════
DARK LUXE LAYER — this is the standard, not an option.
Everything above assumes a light page. On its own it reads as flat bands of
cream with text sitting on them, which is exactly the templated look this
whole kit exists to avoid. Adam's words, after a first attempt fixed it with
subtle glows on a light page: "Literally on all of the pages, there's still so
much white. It needs to have different, like, neon accents or something and
look way higher quality. So there's not these flat blocks of just light color
behind the text. It looks very templated and not elevated." (2026-08-26.)
Nobody sees a 5% gradient. When a page looks templated, go structural on the
first pass, not incremental.
WHY DARK WINS HERE: almost every client on this shore photographs dark or warm
— treatment rooms, restaurants, bars, evening venues. A dark ground lets their
own photography be the light in the design, and that is the single biggest
difference between "templated" and "expensive."
PICK THE ACCENTS FROM THE CLIENT'S REAL FIXTURES, NOT A PALETTE GENERATOR.
On the build this came from, the warm accent was the glow of her illuminated
sign and the cool one was the LED wash on her treatment room walls. Being able
to name where a colour came from is what stops it looking generic. Put that
sentence in their palette.css.
The layering is deliberate. Delete from here down and the light version returns
intact, which is the escape hatch for the rare client whose material is bright.
═══════════════════════════════════════════════════════════════════════════ */
:root{
--ground:#0F160E;
--panel:#182116;
--panel-2:#1E2A1C;
--lume:#E2B87A; /* the warm light source. name its real fixture in palette.css */
--lume-hot:#F0CE9A;
--lume-2:#7FA6D6; /* the cool light source. also a real fixture, never invented */
--txt:rgba(242,240,231,.86);
--txt-2:rgba(242,240,231,.66); /* 6.9:1 on the ground. beat 4.5:1, do not meet it */
--edge:rgba(226,184,122,.16);
--edge-hot:rgba(226,184,122,.42);
}
body{background:var(--ground);background-image:none;color:var(--txt)}
h1,h2,h3,h4{color:#FBF8F1}
/* section grounds. no flat fills: each band is a dark ground with two soft light
sources bled into it, plus the grain. */
.sec,.sec-tight{position:relative;overflow:hidden;background-color:transparent;background-image:none;
border-top:0;border-bottom:0}
.sec::before,.sec-tight::before{content:'';position:absolute;inset:-10% -20%;pointer-events:none;
background:
radial-gradient(38% 46% at 6% 8%,rgba(226,184,122,.30),transparent 68%),
radial-gradient(40% 48% at 96% 96%,rgba(127,166,214,.20),transparent 68%);
filter:blur(58px);opacity:.9}
.sec::after,.sec-tight::after{content:'';position:absolute;inset:0;pointer-events:none;
background-image:var(--grain);background-size:180px 180px;opacity:.75}
.sec>*,.sec-tight>*{position:relative;z-index:1}
/* alternate the light source so consecutive bands never look the same */
.sec-paper{background-color:var(--panel);background-image:none;border-top:1px solid rgba(226,184,122,.12);
border-bottom:1px solid rgba(226,184,122,.12)}
.sec-paper::before{background:
radial-gradient(42% 50% at 94% 6%,rgba(226,184,122,.34),transparent 68%),
radial-gradient(38% 46% at 2% 98%,rgba(127,166,214,.22),transparent 68%)}
.sec-ink{background-color:var(--ground);background-image:none}
.sec-alt{background-color:var(--panel-2);background-image:none}
.sec-alt::before{background:
radial-gradient(44% 52% at 14% 2%,rgba(226,184,122,.36),transparent 66%),
radial-gradient(40% 48% at 92% 100%,rgba(127,166,214,.24),transparent 68%)}
/* a hairline of light where bands meet */
.sec+.sec,.sec+.sec-tight,.sec-tight+.sec{border-top:1px solid rgba(226,184,122,.10)}
/* type */
.lede,.lede.on-dark{color:var(--txt-2)}
/* .mrow .md is NOT in this list: the service rows are cream cards, and --txt-2 (near-white at
66%) measures 1.05:1 against that card — invisible. Its colour is owned by the base rule. */
p,.scard p,.pcard p,.steps p,.faq .ans,.fnote,.ba-cap,.gnote,.mgroup>.gnote{color:var(--txt-2)}
.sec-ink .steps p,.sec-alt .steps p{color:var(--txt-2)}
.eyebrow,.eyebrow.on-dark{color:var(--lume);text-shadow:0 0 22px rgba(226,184,122,.45)}
.note{border-left-color:var(--lume);color:var(--txt-2)}
.note strong{color:#FBF8F1}
/* cards: raised glass on the dark ground, with a light edge that ignites on hover.
this is the "neon accent" — it is the client's own signage colour, not a generic glow. */
.scard,.rvw,.pcard,.form{
background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
border:1px solid var(--edge);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 34px 70px -38px rgba(0,0,0,.92);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scard:hover{transform:translateY(-6px);border-color:var(--edge-hot);
box-shadow:0 0 0 1px rgba(226,184,122,.30),0 0 46px -12px rgba(226,184,122,.42),
0 40px 80px -38px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.07) inset}
.scard .from{color:var(--lume)}
.rvw q{color:rgba(245,242,233,.92)}
.rvw q::before,.rvw q::after{color:var(--lume)}
.stars{color:var(--lume);text-shadow:0 0 16px rgba(226,184,122,.55)}
.who{color:var(--txt-2)}
.who .nm{color:#FBF8F1}
.who .av{background:linear-gradient(150deg,var(--lume),#B98B4C);color:#17200F;
box-shadow:0 0 22px -4px rgba(226,184,122,.6)}
.pcard .sz{color:var(--lume)}
.pcard .ac{color:rgba(245,242,233,.86)}
/* price list — the service rows are CREAM CARDS on this dark ground, not dark rows, so the
overrides that used to recolour them for the dark theme are gone on purpose. Every one of them
was wrong against the card and would have been invisible or failing:
.mn/.mp #FBF8F1 near-white -> 1.1:1, invisible
.mt var(--lume-2) blue -> 2.38:1, fails
.fav var(--lume) -> 1.74:1, fails
The base rules now own these colours. Do not "restore" this block. */
/* faq, hours, icon lines */
.faq details{border-bottom-color:rgba(226,184,122,.13)}
.faq summary{color:#FBF8F1}
.faq summary:hover{color:var(--lume)}
.faq summary::after{border-color:var(--lume)}
.hrow,.sec-ink .hrow,.sec-alt .hrow{border-bottom-color:rgba(226,184,122,.12)}
.hrow .d,.sec-ink .hrow .d,.sec-alt .hrow .d{color:rgba(245,242,233,.92)}
.hrow .t,.sec-ink .hrow .t,.sec-alt .hrow .t{color:var(--txt-2)}
.hrow.closed .t{color:rgba(240,238,228,.36)}
.hrow.today .d,.hrow.today .t,.sec-ink .hrow.today .d,.sec-ink .hrow.today .t,
.sec-alt .hrow.today .d,.sec-alt .hrow.today .t{color:var(--lume);text-shadow:0 0 18px rgba(226,184,122,.5)}
.iline,.sec-ink .iline,.sec-alt .iline{border-bottom-color:rgba(226,184,122,.12)}
.iline svg{color:var(--lume)}
.iline .k{color:var(--lume-2)}
.iline a,.sec-ink .iline a,.sec-alt .iline a{color:#FBF8F1;border-bottom-color:rgba(226,184,122,.30)}
.iline a:hover{border-bottom-color:var(--lume)}
/* pills and steps */
.pill,.pill.on-dark{border-color:var(--edge);color:var(--txt-2);
background:rgba(255,255,255,.035)}
a.pill:hover{border-color:var(--edge-hot);color:#FBF8F1;box-shadow:0 0 26px -10px rgba(226,184,122,.5)}
.steps>div::before{color:var(--lume);opacity:.65;text-shadow:0 0 26px rgba(226,184,122,.4)}
/* buttons */
.btn-accent{background:linear-gradient(150deg,var(--lume-hot),#C0904F);color:#151E12;
box-shadow:0 0 34px -10px rgba(226,184,122,.65)}
.btn-accent:hover{background:linear-gradient(150deg,#F7DCB4,#CE9E5C);
box-shadow:0 0 48px -8px rgba(226,184,122,.85)}
.btn-out,.btn-ink{border-color:var(--edge-hot);color:#FBF8F1;background:transparent}
.btn-out:hover,.btn-ink:hover{background:rgba(226,184,122,.14);color:#fff;border-color:var(--lume);
box-shadow:0 0 30px -12px rgba(226,184,122,.7)}
.btn-ghost{border-color:rgba(240,238,228,.34);color:#FBF8F1}
.btn-ghost:hover{background:rgba(226,184,122,.16);border-color:var(--lume);color:#fff}
/* form fields */
.fld label{color:var(--lume-2)}
.fld input,.fld select,.fld textarea{background-color:rgba(255,255,255,.055);border-color:var(--edge);
color:#FBF8F1}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(240,238,228,.38)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--lume);
box-shadow:0 0 0 3px rgba(226,184,122,.16)}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23E2B87A' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center}
.fld select option{background:#182116;color:#FBF8F1}
.thanks .tick{background:linear-gradient(150deg,var(--lume),#B98B4C);color:#151E12;
box-shadow:0 0 40px -8px rgba(226,184,122,.7)}
.thanks p{color:var(--txt-2)}
/* nav: the whole page is dark now, so it never inverts to cream */
.nav{background:rgba(15,22,14,.55);border-bottom-color:transparent}
body.scrolled .nav,body.dark-top.scrolled .nav,body.menu-open .nav{
background:rgba(15,22,14,.86);border-bottom-color:rgba(226,184,122,.16)}
.nav .w1,body.dark-top.scrolled .nav .w1,body.menu-open .nav .w1{color:#FBF8F1}
.nav .w2{color:var(--lume)}
.nav .nlinks a,.nav .nphone,body.dark-top.scrolled .nav .nlinks a,
body.dark-top.scrolled .nav .nphone,body.menu-open .nav .nlinks a,
body.menu-open .nav .nphone{color:rgba(240,238,228,.80)}
.nav .nlinks a:hover,.nav .nlinks a[aria-current]{color:#fff}
.nav .nlinks a::after{background:var(--lume);box-shadow:0 0 12px rgba(226,184,122,.8)}
.nav .burger,body.dark-top.scrolled .nav .burger,body.menu-open .nav .burger{border-color:rgba(226,184,122,.30)}
.nav .burger span,.nav .burger span::before,.nav .burger span::after,
body.dark-top.scrolled .nav .burger span,body.dark-top.scrolled .nav .burger span::before,
body.dark-top.scrolled .nav .burger span::after,body.menu-open .nav .burger span,
body.menu-open .nav .burger span::before,body.menu-open .nav .burger span::after{background:#FBF8F1}
body.dark-top .nav .btn-ink,body.dark-top.scrolled .nav .btn-ink,body.menu-open .nav .btn-ink,
.nav .btn-ink{background:transparent;color:#FBF8F1;border-color:var(--edge-hot)}
.drawer{background:rgba(18,26,17,.98);border-bottom-color:rgba(226,184,122,.18);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.drawer a{color:#FBF8F1;border-bottom-color:rgba(226,184,122,.13)}
/* gallery tiles get an edge so they do not float on the dark */
.gal figure{border:1px solid var(--edge);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.split .s-media img,.ba{box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px var(--edge)}
/* banners and CTA sit on the same ground */
.cta{background:var(--panel)}
.foot{background-color:var(--ground);border-top:1px solid rgba(226,184,122,.14)}
.err404 .code{color:rgba(226,184,122,.22)}
.form{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
::selection{background:var(--lume);color:#151E12}
:focus-visible{outline-color:var(--lume)}
.mapwrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--edge);
box-shadow:0 30px 60px -34px rgba(0,0,0,.9);background:var(--panel)}
.mapwrap iframe{filter:invert(91%) hue-rotate(180deg) brightness(.92) contrast(.86) saturate(.8);
display:block}
/* ── sticky book bar: phones only ──
The nav CTA is dropped under 430px and a visitor reading a price list is a long way from
any button. This keeps Book and Call one thumb away at all times. Body gets matching
padding so it can never cover the last line of a page. */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:10px;padding:11px 14px
calc(11px + env(safe-area-inset-bottom));
background:rgba(15,22,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-top:1px solid rgba(226,184,122,.28)}
.bookbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
text-decoration:none;padding:15px 10px;border-radius:100px;white-space:nowrap}
.bookbar .b1{background:linear-gradient(150deg,var(--lume-hot),#C0904F);color:#151E12;
box-shadow:0 0 26px -10px rgba(226,184,122,.7)}
.bookbar .b2{border:1px solid rgba(226,184,122,.5);color:#FBF8F1}
@media(max-width:760px){
.bookbar{display:flex}
body{padding-bottom:84px}
}
/* ── inline CTA under each price group ── */
.mcta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px;
padding-top:22px;border-top:1px solid rgba(226,184,122,.16)}
.mcta .why{font-size:15px;color:var(--txt-2);flex:1 1 240px;margin:0}
/* ── chat widget ── */
.chatfab{position:fixed;right:18px;bottom:18px;z-index:80;width:60px;height:60px;border-radius:50%;
border:1px solid rgba(226,184,122,.5);cursor:pointer;display:grid;place-items:center;
background:linear-gradient(150deg,#22301C,#151E12);color:var(--lume);
box-shadow:0 0 34px -8px rgba(226,184,122,.55),0 18px 40px -18px rgba(0,0,0,.9);
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.chatfab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 46px -6px rgba(226,184,122,.75)}
/* "Ask a question" tag beside the bubble. It exists because a client had the site open on his own
phone and had not registered what the bubble was for (2026-08-28). Hidden once the panel is
open, and dropped entirely on phones where it would crowd the sticky Book bar. */
.chattag{position:fixed;right:88px;bottom:33px;z-index:79;pointer-events:none;
font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;color:var(--paper);
background:linear-gradient(150deg,#22301C,#151E12);border:1px solid rgba(226,184,122,.45);
border-radius:100px;padding:9px 16px;white-space:nowrap;
box-shadow:0 14px 30px -16px rgba(0,0,0,.9);
opacity:0;transform:translateX(8px);transition:opacity .45s ease .8s,transform .45s ease .8s}
body.chat-ready .chattag{opacity:1;transform:none}
body.chat-open .chattag{opacity:0;transform:translateX(8px);transition-delay:0s}
@media(max-width:760px){.chattag{display:none}}
.chatfab .x{display:none}
body.chat-open .chatfab .q{display:none}
body.chat-open .chatfab .x{display:block}
@media(max-width:760px){.chatfab{bottom:96px;width:56px;height:56px}}
.chatpanel{position:fixed;right:18px;bottom:88px;z-index:81;width:min(380px,calc(100vw - 36px));
max-height:min(600px,calc(100dvh - 130px));display:flex;flex-direction:column;
background:linear-gradient(168deg,#1E2A1C,#141C13);border:1px solid rgba(226,184,122,.32);
border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
transition:opacity .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1)}
body.chat-open .chatpanel{opacity:1;transform:none;pointer-events:auto}
@media(max-width:760px){.chatpanel{bottom:164px;max-height:calc(100dvh - 210px)}}
.chathead{display:flex;align-items:center;gap:11px;padding:16px 18px;
border-bottom:1px solid rgba(226,184,122,.18);background:rgba(226,184,122,.07)}
.chathead .mk{width:30px;height:30px;flex:0 0 30px;color:var(--lume)}
.chathead b{font-family:var(--serif);font-size:19px;color:#FBF8F1;font-weight:500;display:block;line-height:1.15}
.chathead span{font-size:12px;color:var(--txt-2);display:block;margin-top:1px}
.chatbody{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
scroll-behavior:smooth}
.msg{max-width:86%;padding:12px 15px;border-radius:16px;font-size:15px;line-height:1.55}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);color:rgba(242,240,231,.92);
border:1px solid rgba(226,184,122,.16);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:linear-gradient(150deg,var(--lume-hot),#C0904F);
color:#151E12;border-bottom-right-radius:5px;font-weight:500}
.msg a{color:var(--lume);text-underline-offset:3px}
.msg.bot b{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}
.chips button{font-family:var(--sans);font-size:13px;color:rgba(242,240,231,.86);cursor:pointer;
background:rgba(255,255,255,.05);border:1px solid rgba(226,184,122,.26);border-radius:100px;
padding:8px 14px;transition:background .2s,border-color .2s,color .2s}
.chips button:hover{background:rgba(226,184,122,.16);border-color:var(--lume);color:#fff}
.chatact{display:flex;gap:9px;padding:0 18px 14px}
.chatact a{flex:1;text-align:center;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
font-weight:500;text-decoration:none;padding:12px 8px;border-radius:100px}
.chatact .p{background:linear-gradient(150deg,var(--lume-hot),#C0904F);color:#151E12}
.chatact .s{border:1px solid rgba(226,184,122,.45);color:#FBF8F1}
.chatform{display:flex;gap:8px;padding:13px 15px;border-top:1px solid rgba(226,184,122,.18);
background:rgba(0,0,0,.22)}
.chatform input{flex:1;font-family:var(--sans);font-size:15px;color:#FBF8F1;
background:rgba(255,255,255,.07);border:1px solid rgba(226,184,122,.22);border-radius:100px;
padding:12px 16px;-webkit-appearance:none}
.chatform input::placeholder{color:rgba(242,240,231,.42)}
.chatform input:focus{outline:none;border-color:var(--lume);box-shadow:0 0 0 3px rgba(226,184,122,.14)}
.chatform button{flex:0 0 46px;height:46px;border-radius:50%;border:0;cursor:pointer;
background:linear-gradient(150deg,var(--lume-hot),#C0904F);color:#151E12;display:grid;place-items:center}
.chatnote{font-size:11px;color:rgba(242,240,231,.42);text-align:center;padding:0 18px 12px;line-height:1.4}
.err404{text-align:center;padding:clamp(90px,14vw,180px) 0}
.err404 .code{font-family:var(--serif);font-size:clamp(5rem,16vw,11rem);color:var(--line);line-height:.9}
/* ═══════════════════════════════════════════════════════════════════════════
LUXURY GRAMMAR LAYER — added 2026-09-05 from the client-site-design skill's
reference library (reference/luxury-grammar.md). 24 award-level sites were
measured; every component below carries a move that recurred across them.
The floors above are untouched: the luxury came from proportion, not size.
═══════════════════════════════════════════════════════════════════════════ */
/* §2 the display line: enormous, light, tight, four words. On phones the luxury set
runs roughly 10vw, so the mobile clamp is a separate ratio, not a scaled-down desktop. */
.h-display{font-family:var(--serif);font-weight:400;font-size:var(--display);line-height:var(--display-lh);
letter-spacing:-.015em;max-width:14ch;text-wrap:balance;margin:0}
.h-display.center{margin-inline:auto;text-align:center}
.h-display.caps{text-transform:uppercase;letter-spacing:.02em}
@media(max-width:640px){.h-display{font-size:clamp(2.2rem,10vw,3.4rem);max-width:none}}
/* §9 buttons: pills or square, never in between. --btn-r sets the site's camp; .sq forces square. */
.btn.sq{border-radius:3px}
/* §4 the empty header: mark + one CTA + Menu, on desktop too (13 of 17 luxury headers).
Opt in per page with page({ navMin:true }). Seven links is still the ceiling for .nav
without .min; this variant is for Signature builds where the menu lives in the drawer. */
body.nav-min .nlinks,body.nav-min .nphone{display:none}
body.nav-min .burger{display:flex}
body.nav-min .drawer{display:block}
/* §6 full-bleed image bands between text bands (15 of 24 home pages carry at least one).
A placed directly inside , outside any .wrap. */
.bleed{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.bleed>img,.bleed>picture>img,.bleed>video{width:100%;height:clamp(380px,64vh,780px);object-fit:cover;display:block}
.bleed.tall>img{height:clamp(520px,80vh,960px)}
.bleed>figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 0 24px;
color:rgba(247,243,234,.90);font-family:var(--sans);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
background:linear-gradient(180deg,transparent,rgba(12,18,11,.74))}
.bleed>figcaption>span{display:block;width:min(100% - 44px,var(--wrap));margin-inline:auto}
@media(max-width:700px){.bleed>img,.bleed>picture>img,.bleed>video{height:min(72vw,520px)}
.bleed.tall>img{aspect-ratio:4/5;height:auto}.bleed>figcaption{font-size:12.5px;padding:20px 0 18px}}
/* the 50/50 variant: photograph one side, words the other. Arc alternates these down the page. */
.bleed.split{display:grid;grid-template-columns:1fr 1fr;background:var(--panel)}
.bleed.split>img{height:100%;min-height:520px}
.bleed.split.flip>img{order:2}
.bleed.split .txt{padding:clamp(48px,6vw,96px) clamp(28px,5vw,80px);display:flex;flex-direction:column;
justify-content:center;gap:18px;color:var(--txt)}
.bleed.split .txt h2,.bleed.split .txt h3{font-size:clamp(1.9rem,3.6vw,2.8rem);color:#FBF8F1}
.bleed.split .txt p{max-width:48ch}
@media(max-width:900px){.bleed.split{grid-template-columns:1fr}.bleed.split>img{min-height:0;height:min(72vw,520px)}
.bleed.split.flip>img{order:0}}
/* §15 trust as provenance, not a star wall: one quiet line. "Est. 2009." "Third generation on the water." */
.provenance{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:15px;
letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--txt-2);margin:0}
.provenance::before{content:'';width:34px;height:1px;background:var(--lume);opacity:.75;flex:0 0 34px}
/* one real review set large, in place of a carousel */
.pull{margin:0;text-align:center}
.pull blockquote,.pull q{quotes:none;display:block;margin:0 auto;font-family:var(--serif);font-weight:400;
font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.3;letter-spacing:-.01em;max-width:28ch;color:#FBF8F1;text-wrap:balance}
.pull cite{display:block;margin-top:22px;font-style:normal;font-family:var(--sans);font-size:13.5px;
letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2)}
/* §16 the footer is a second page. .foot.big adds the phone as the largest tap target on the
site, the hours, a map link and a closing line. Mobile footers on the luxury set ran
1,244 to 3,789px tall; ours is allowed to be a whole screen. */
.foot.big{padding-top:clamp(64px,8vw,110px)}
.foot .fclose{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);color:#FBF8F1;max-width:30ch;
line-height:1.3;margin:0 0 26px;font-weight:400}
.foot a.fphone{display:inline-block;font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.4rem);color:#fff;
line-height:1.1;letter-spacing:-.01em;padding:8px 0;margin:0 0 6px;min-height:44px;box-sizing:content-box}
.foot a.fphone:hover{color:var(--lume-hot)}
.foot .fhours .hrow{border-bottom-color:rgba(247,243,234,.13);font-size:15.5px;padding:10px 0}
.foot .fhours .hrow .d{color:#FBF8F1}
.foot .fhours .hrow .t{color:rgba(247,243,234,.62)}
.foot .fhours .hrow.today .d,.foot .fhours .hrow.today .t{color:var(--lume)}
/* ═══════════════════════════════════════════════════════════════════════════
LIGHT PAGE MODE — body.light. The other luxury shape, and on the open web the
more common one: 18 of the 19 measurable anchors ran a warm off-white ground
(Aman #F3EEE7, Ballena #F8F2E5, Goldust #F5F0E7, Vander #F4F2F1), with the
dark reserved for the first viewport and the footer. The hero, the page
banner, the CTA band, the footer, the book bar and the chat stay dark on
purpose: that is the Aman and Metric Civil shape, dark bookends on paper.
Opt in per page with page({ bodyClass:'light' }). Which mode a client gets is
decided in the design brief from THEIR photographs, per family doc: light for
spa, inn, venue, restaurant, retail and professional when the photography is
warm and lit; dark for fitness, nightlife, auto, law, and any client whose
rooms photograph dark. The dark layer above stays the default until Adam has
seen the evidence (client-site-design SKILL.md, Luxury references).
═══════════════════════════════════════════════════════════════════════════ */
body.light{background:var(--paper);color:var(--body)}
body.light h1,body.light h2,body.light h3,body.light h4{color:var(--ink)}
body.light .hero h1,body.light .pbanner h1,body.light .cta h2,body.light .bleed.split .txt h2,
body.light .bleed.split .txt h3{color:#fff}
body.light .bleed.split{background:var(--ink)}
/* bands: paper with one warm light and the grain turned down. still never a flat fill. */
body.light .sec::before,body.light .sec-tight::before{opacity:1;background:
radial-gradient(40% 48% at 8% 6%,rgba(176,141,87,.20),transparent 68%),
radial-gradient(38% 46% at 94% 96%,rgba(122,150,104,.13),transparent 68%)}
body.light .sec::after,body.light .sec-tight::after{opacity:.5}
body.light .sec-paper{background-color:var(--paper-2);border-color:var(--line)}
body.light .sec-paper::before{background:
radial-gradient(42% 50% at 94% 6%,rgba(176,141,87,.22),transparent 68%),
radial-gradient(38% 46% at 2% 98%,rgba(122,150,104,.13),transparent 68%)}
body.light .sec-alt{background-color:#F1EBDF;color:var(--body)}
body.light .sec-alt::before{background:
radial-gradient(44% 52% at 14% 2%,rgba(176,141,87,.24),transparent 66%),
radial-gradient(40% 48% at 92% 100%,rgba(122,150,104,.15),transparent 68%)}
body.light .sec-alt h2,body.light .sec-alt h3{color:var(--ink)}
body.light .sec-ink{background-color:var(--ink);color:rgba(247,243,234,.80)}
body.light .sec-ink h2,body.light .sec-ink h3{color:#fff}
body.light .sec+.sec,body.light .sec+.sec-tight,body.light .sec-tight+.sec{border-top-color:var(--line)}
/* type */
body.light p{color:var(--body)}
body.light .lede,body.light .faq .ans,body.light .scard p,body.light .pcard p,body.light .steps p,
body.light .fnote,body.light .ba-cap,body.light .gnote,body.light .mgroup>.gnote,body.light .vcap{color:var(--muted)}
/* the dark bookends keep their light text */
body.light .hero p,body.light .pbanner p,body.light .pbanner .lede,body.light .cta p,body.light .cta .lede,
body.light .foot p,body.light .sec-ink p,body.light .sec-ink .lede,body.light .bleed.split .txt p,
body.light .chatpanel p,body.light .flist p{color:inherit}
body.light .cta p,body.light .cta .lede{color:rgba(247,243,234,.80)}
body.light .pbanner .lede,body.light .sec-ink p,body.light .sec-ink .lede{color:rgba(247,243,234,.80)}
body.light .bleed.split .txt p{color:rgba(247,243,234,.82)}
body.light .eyebrow{color:var(--accent);text-shadow:none}
body.light .cta .eyebrow,body.light .sec-ink .eyebrow,body.light .bleed .eyebrow{color:var(--accent-lt)}
body.light .note{border-left-color:var(--accent);color:var(--muted)}
body.light .note strong{color:var(--ink)}
body.light .provenance{color:var(--muted)}
body.light .provenance::before{background:var(--accent)}
body.light .hero .provenance,body.light .cta .provenance{color:rgba(247,243,234,.78)}
body.light .hero .provenance::before,body.light .cta .provenance::before{background:var(--accent-lt)}
body.light .pull blockquote,body.light .pull q{color:var(--ink)}
body.light .pull cite{color:var(--muted)}
/* cards back to cream */
body.light .scard,body.light .rvw,body.light .pcard,body.light .form{
background:linear-gradient(168deg,#FFFEFA 0%,#FDFAF3 100%);border:1px solid var(--line);
box-shadow:0 1px 2px rgba(27,36,25,.04),0 14px 34px -22px rgba(27,36,25,.20);
backdrop-filter:none;-webkit-backdrop-filter:none}
body.light .scard:hover{border-color:#D5CBB6;box-shadow:var(--shadow-lg)}
body.light .scard .from,body.light .pcard .sz{color:var(--accent)}
body.light .rvw q{color:var(--ink-2)}
body.light .rvw q::before,body.light .rvw q::after{color:var(--accent)}
body.light .stars{color:var(--accent);text-shadow:none}
body.light .who{color:var(--muted)}
body.light .who .nm{color:var(--ink)}
body.light .who .av{background:var(--ink);color:var(--paper);box-shadow:none}
body.light .pcard .ac{color:var(--ink-2)}
body.light .faq details{border-bottom-color:var(--line)}
body.light .faq summary{color:var(--ink)}
body.light .faq summary:hover{color:var(--accent)}
body.light .faq summary::after{border-color:var(--accent)}
body.light .hrow{border-bottom-color:var(--line)}
body.light .hrow .d{color:var(--ink)}
body.light .hrow .t{color:var(--muted)}
body.light .hrow.closed .t{color:#A79B85}
body.light .hrow.today .d,body.light .hrow.today .t{color:var(--accent);text-shadow:none}
body.light .iline{border-bottom-color:var(--line)}
body.light .iline svg{color:var(--accent)}
body.light .iline .k{color:var(--accent-2)}
body.light .iline a{color:var(--ink);border-bottom-color:var(--line)}
body.light .iline a:hover{border-bottom-color:var(--accent)}
body.light .pill{border-color:var(--line);color:var(--muted);background:var(--paper-2)}
body.light a.pill:hover{border-color:var(--accent);color:var(--ink);box-shadow:none}
body.light .steps>div::before{color:var(--accent);opacity:.5;text-shadow:none}
/* buttons */
body.light .btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px rgba(176,141,87,.85)}
body.light .btn-accent:hover{background:#9C7B49;box-shadow:0 16px 30px -12px rgba(176,141,87,.9)}
body.light .btn-ink{background:var(--ink);color:var(--paper);border-color:transparent}
body.light .btn-ink:hover{background:#0F160E;box-shadow:none}
body.light .btn-out{border-color:var(--ink);color:var(--ink);background:transparent}
body.light .btn-out:hover{background:var(--ink);color:var(--paper);box-shadow:none}
body.light .hero .btn-out,body.light .cta .btn-out,body.light .sec-ink .btn-out{border-color:rgba(247,243,234,.55);color:#FBF8F1}
body.light .hero .btn-out:hover,body.light .cta .btn-out:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* form fields */
body.light .fld label{color:var(--accent-2)}
body.light .fld input,body.light .fld select,body.light .fld textarea{background-color:#fff;border-color:var(--line);color:var(--ink)}
body.light .fld input::placeholder,body.light .fld textarea::placeholder{color:#8F8A7E}
body.light .fld input:focus,body.light .fld select:focus,body.light .fld textarea:focus{border-color:var(--accent);
box-shadow:0 0 0 3px rgba(176,141,87,.14)}
body.light .fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B08D57' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")}
body.light .fld select option{background:#fff;color:var(--ink)}
body.light .thanks .tick{background:var(--accent);color:#fff;box-shadow:none}
body.light .thanks p{color:var(--muted)}
/* nav: paper once scrolled, transparent over the dark hero (the base rules, restated) */
body.light .nav,body.light.scrolled .nav,body.light.menu-open .nav{background:rgba(247,243,234,.90);border-bottom-color:var(--line)}
body.light .nav .w1{color:var(--ink)}
body.light .nav .w2{color:var(--accent)}
body.light .nav .nlinks a,body.light .nav .nphone{color:var(--body)}
body.light .nav .nlinks a:hover,body.light .nav .nlinks a[aria-current]{color:var(--ink)}
body.light .nav .nlinks a::after{background:var(--accent);box-shadow:none}
body.light .nav .burger{border-color:var(--line)}
body.light .nav .burger span,body.light .nav .burger span::before,body.light .nav .burger span::after{background:var(--ink)}
body.light .nav .btn-ink{background:var(--ink);color:var(--paper);border-color:transparent}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav{background:transparent;border-bottom-color:transparent}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .w1{color:var(--paper)}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .nlinks a,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .nphone{color:rgba(247,243,234,.85)}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger{border-color:rgba(247,243,234,.38)}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger span,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger span::before,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger span::after{background:var(--paper)}
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .btn-ink{background:var(--paper);color:var(--ink)}
body.light .drawer{background:var(--paper);border-bottom-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
body.light .drawer a{color:var(--ink);border-bottom-color:var(--line)}
/* media */
body.light .gal figure{border:0;box-shadow:var(--shadow)}
body.light .split .s-media img,body.light .ba{box-shadow:var(--shadow-lg)}
body.light .mapwrap{border-color:var(--line);box-shadow:var(--shadow);background:var(--paper-2)}
body.light .mapwrap iframe{filter:none}
body.light .mcta{border-top-color:var(--line)}
body.light .mcta .why{color:var(--muted)}
body.light ::selection{background:var(--accent);color:#fff}
body.light :focus-visible{outline-color:var(--accent)}