/* ==========================================================================
LUMORIA — site v3 stylesheet
Palette V3 (warm luxury) · Coolvetica display · Helvetica Neue body
Motion: fluid, blurry, motion-graphic entrances (house rule)
========================================================================== */
@font-face{font-family:"Coolvetica";src:url("/assets/fonts/Coolvetica-Rg.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
:root{
--paper:#FBF8F1; --surface:#FFFEFA; --sand:#F1E8D6; --sand-deep:#E7D9BF;
--ink:#221A11; --ink-soft:#5C4F3D; --espresso:#4A2A15; --onyx:#15120D;
--brass:#9A6B1C; --brass-bright:#CDA055; --brass-ink:#87590F;
--line:rgba(34,26,17,.12); --line-2:rgba(34,26,17,.07); --line-dk:rgba(247,240,225,.14);
--ok:#2F6B44; --ok-bg:rgba(47,107,68,.09);
--err:#8C2F1E; --err-bg:rgba(140,47,30,.07);
/* chrome — tokenised so the Black theme can restyle nav/menu without a fork */
--nav-bg:rgba(251,248,241,.72);
--nav-line:var(--line);
--menu-bg:rgba(251,248,241,.94);
--brand-ink:var(--espresso);
--focus:var(--brass);
--display:"Coolvetica","Familjen Grotesk",-apple-system,sans-serif;
--body:-apple-system,"Helvetica Neue","Helvetica","Segoe UI",system-ui,sans-serif;
/* ---- motion, one token set (ADR-048 · docs/10-interface-standard.md §6) ----
Four durations, one job each; two curves. Before this the site carried nine
entrance durations and had its easing hardcoded three times inside .reveal
— so the site's own reveal did not use the site's own --ease. The character
stays exactly as it was (fluid, blurry, motion-graphic); the WEIGHT halves.
860ms is the ceiling for anything to be fully readable, everywhere. */
--dur-1:120ms; /* state — hover, press, colour */
--dur-2:200ms; /* control — focus, toggle, tab */
--dur-3:320ms; /* surface — drawer, sheet, menu, rail */
--dur-4:560ms; /* entrance — the reveal */
--ease:cubic-bezier(.33,.78,.27,1); /* general */
--ease-out:cubic-bezier(.16,1,.3,1); /* entrance, and anything that settles */
--spring:cubic-bezier(.34,1.4,.5,1);
/* The entrance as tokens rather than 13 blur radii and 15 travel distances. */
--rv-blur:10px;
--rv-y:20px;
--rv-scale:.985;
--rv-stagger:50ms; /* index capped at 6 => 300ms max chain */
/* ---- controls: PUBLIC density (§1) ----
52px tall, 14px radius, and 16px type. The 16px is not taste: iOS Safari
zooms the viewport on focus of any control under 16px, which physically
moves the page under the user's thumb mid-typing. This stylesheet shipped
15.5px, so it had that bug live. 44px is the absolute floor for any tap
target; these controls sit well above it. */
--ctl-h:52px;
--ctl-r:14px;
--ctl-pad:14px 16px;
--ctl-size:16px;
--lbl-size:13px;
--maxw:1200px;
/* ---- spacing system ----
Every gap on the site comes from here. Before this, spacing was ~40 magic
numbers sprinkled across the stylesheet and inline `style=` attributes in
the generator, so no two sections breathed the same way. */
--s-1:6px; --s-2:12px; --s-3:18px; --s-4:26px;
--s-5:34px; --s-6:44px; --s-7:56px; --s-8:72px;
--gutter:34px;
/* The chrome is 94px tall: 18px page padding + 58px pill + 18px. Anything
that sticks, or that a #hash scroll lands on, has to clear it — three
places used to hard-code 82/74/104px and two of them tucked under the nav. */
--nav-h:94px;
--band-y:clamp(76px,8vw,124px);
--band-y-tight:clamp(52px,5.5vw,82px);
--head-top:clamp(126px,13vw,168px);
/* Default gap inside a .rgroup stack. */
--stack:22px;
color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Author display rules beat the UA [hidden] rule — restore it explicitly. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-padding-top:calc(var(--nav-h) + 14px)}
/* Nothing may make the page wider than the phone. `clip` has to be on
as well as : with visible, body's overflow propagates up to the
viewport and the body box itself computes back to `visible`, so a few px of
overhang still counts toward the layout width — and a phone will happily
pinch out to that width, sliding the fixed backdrops off the content and
showing the page at a size it was never composed at. `clip` rather than
`hidden` so no scroll container is created and the sticky nav still sticks. */
html,body{overflow-x:clip}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.5;letter-spacing:-.01em;
-webkit-tap-highlight-color:rgba(154,107,28,.18)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,label,summary,input[type=checkbox]{touch-action:manipulation}
::selection{background:var(--brass);color:var(--paper)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
/* visually hidden, still announced */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:fixed;top:10px;left:50%;z-index:60;transform:translate(-50%,-160%);background:var(--ink);color:var(--paper);
padding:12px 22px;border-radius:999px;font-size:14px;font-weight:600;transition:transform var(--dur-2) var(--spring)}
.skip:focus-visible{transform:translate(-50%,0)}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
background-image: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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.wrap-n{max-width:940px}
/* ---------- vertical rhythm ----------
.rgroup is the stack. It used to be a JS-only hook for staggering the
entrance, so on every plain block container — both columns of every
.two-col, the Black tease, the service hero — an h2 and the paragraph under
it both had margin:0 and rendered *touching*.
Giving it a single gap fixed the collision but created a flatter problem: a
96px headline, a paragraph, a list and a call-to-action were all separated by
the same 22px, so nothing grouped and the eye couldn't tell what belonged to
what. Space has to express relationship. Three tiers, applied by what the two
neighbours actually are:
bound the thing and the thing it belongs to (a button and its
risk-reversal note) — closer than the flow, so they read as one
flow the default: prose to prose, label to field (--stack)
break a change of mode — prose into a list, a panel, a CTA cluster
Space after a heading is proportional to the heading (em, not px): a 96px
display line needs far more air beneath it than a 40px sub-head, and one
fixed value can't serve both. The em also absorbs the display face's .96
line-height, which lets descenders fall below the box. */
/* The column is stated, not inferred. A grid with no grid-template-columns
leans on one implicit `auto` track plus the "stretch auto tracks" rule to
reach full width — correct per spec, and the single most fragile thing this
stylesheet relied on, because an engine that skips the stretch sizes that
track to MAX-CONTENT instead and every paragraph in the stack becomes one
long line running off the right edge. `minmax(0,1fr)` is a definite track:
it fills, and the 0 floor stops a long unbroken string blowing it out. */
.rgroup{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--stack)}
.rgroup-tight{--stack:var(--s-2)}
.rgroup-loose{--stack:var(--s-4)}
/* after a heading — scales with its own size */
.rgroup > :is(h1,h2,h3){margin-bottom:max(4px,.16em)}
/* into a list, a data block or a UI panel: a real break */
.rgroup > * + :is(.checklist,.svc-meta,.priceline,.addons,.finder,.region-note){margin-top:8px}
/* ...except straight after a heading, where the block IS the heading's content
and the heading's own proportional space is already the break */
.rgroup > :is(h1,h2,h3) + :is(.checklist,.svc-meta,.priceline,.addons,.finder,.region-note){margin-top:0}
/* breadcrumbs and a flag pill are both page meta — they belong together above
the title, not spaced like separate blocks */
.rgroup > .crumbs + *{margin-top:calc(-1 * var(--stack) + 14px)}
/* the CTA cluster is the biggest break in any stack — it must stand alone */
.rgroup > * + .hero-cta{margin-top:14px}
/* ...and the microcopy under a button is bound to that button, not floating
between it and whatever comes next */
.rgroup > .hero-cta + :is(.cta-note,.region-inline),
.rgroup > .btn + .cta-note{margin-top:calc(-1 * var(--stack) + 12px)}
/* Pills and inline affordances would otherwise be stretched by the grid. */
.rgroup > .svc-flag,.rgroup > .btn,.rgroup > .under-link,.rgroup > .lockup{justify-self:start}
/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:.96;letter-spacing:-.02em;text-wrap:balance}
.h-display{font-size:clamp(42px,7.4vw,96px)}
.h-section{font-size:clamp(34px,4.8vw,64px)}
.h-sub{font-size:clamp(26px,3.2vw,40px)}
.lead{font-size:clamp(17px,1.7vw,21px);color:var(--ink-soft);line-height:1.55;max-width:48ch;font-weight:400;text-wrap:pretty}
.brass{color:var(--brass)}
em.plain{font-style:normal;color:var(--espresso)}
/* NOTE: there is deliberately no section-eyebrow class here.
The dash-plus-tracked-caps kicker above every heading ("— HOW IT WORKS")
is gone from the whole site and is not to be reintroduced. If a section
needs framing, the heading does it. Same rule as the numbered-incrementer
ban: labels that only exist to decorate a heading read as filler. */
/* A quiet label for the one place a value genuinely needs naming: the price
in a buy box. Sentence case, no tracking, no rule — a caption, not a kicker. */
.lab{font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.01em}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:13px;font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:-.01em;
padding:13px 14px 13px 24px;border-radius:999px;cursor:pointer;border:none;text-align:left;
min-height:44px;
transition:transform var(--dur-3) var(--spring),background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
/* Promoted only while it is actually being touched. It used to carry
`will-change:transform` unconditionally, so every button on every page held a
composited layer for the whole session. */
.btn:hover,.btn:active{will-change:transform}
.btn .ic-c{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;flex:none;
transition:transform var(--dur-3) var(--spring),background var(--dur-2) var(--ease)}
.btn .ic-c svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 36px -18px rgba(34,26,17,.55)}
.btn-primary .ic-c{background:rgba(255,255,255,.13)}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 44px -18px rgba(34,26,17,.6)}
.btn-primary:hover .ic-c{transform:translate(3px,-2px);background:var(--brass-bright)}
.btn-primary:hover .ic-c svg{stroke:var(--onyx)}
.btn-brass{background:var(--brass);color:#fff;box-shadow:0 16px 36px -18px rgba(154,107,28,.9)}
.btn-brass .ic-c{background:rgba(255,255,255,.2)}
.btn-brass:hover .ic-c{transform:translate(3px,-2px);background:#fff}
.btn-brass:hover .ic-c svg{stroke:var(--brass)}
.btn-ghost{background:transparent;color:var(--ink);padding-left:20px;box-shadow:0 0 0 1px var(--line) inset}
.btn-ghost .ic-c{background:rgba(74,42,21,.07)}
.btn-ghost:hover{box-shadow:0 0 0 1px var(--brass) inset}
.btn-ghost:hover .ic-c{transform:translate(3px,-2px)}
.on-dark.btn-ghost{color:var(--paper);box-shadow:0 0 0 1px rgba(205,160,85,.45) inset}
.on-dark.btn-ghost .ic-c{background:rgba(255,255,255,.08)}
.on-dark.btn-ghost:hover{box-shadow:0 0 0 1px var(--brass-bright) inset}
.btn-sm{font-size:13.5px;padding:9px 10px 9px 18px}
.btn-sm .ic-c{width:25px;height:25px}
.btn[disabled]{opacity:.4;pointer-events:none}
.under-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--ink-soft);transition:color var(--dur-2) var(--ease)}
.under-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-3) var(--spring)}
.under-link:hover{color:var(--brass-ink)}.under-link:hover svg{transform:translateX(3px)}
.on-dark .under-link{color:rgba(251,248,241,.72)}.on-dark .under-link:hover{color:var(--brass-bright)}
/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:center;padding:18px 16px;pointer-events:none}
.nav-inner{pointer-events:auto;display:flex;align-items:center;gap:26px;padding:9px 9px 9px 22px;border-radius:999px;width:min(1020px,100%);
background:var(--nav-bg);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
box-shadow:0 0 0 1px var(--nav-line) inset,0 14px 40px -24px rgba(34,26,17,.45);transition:box-shadow var(--dur-3) var(--ease)}
/* The logo is always the vector — never live text — so it is identical on every
machine and cannot reflow while the display font loads. */
.lockup{display:block;color:var(--brand-ink);line-height:0}
.lockup .lk{height:1em;width:calc(1em * 5.9603);display:block}
.brand{display:flex;align-items:center;margin-right:auto;font-size:19px;color:var(--brand-ink);
transition:opacity var(--dur-2) var(--ease)}
.brand:hover{opacity:.72}
.lockup-lg{font-size:26px}
.lockup-inline{display:inline-block;vertical-align:baseline;font-size:.86em}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500}
.nav-links a{position:relative;opacity:.74;transition:opacity var(--dur-3) var(--ease);white-space:nowrap}
/* scaleX, not `right`. Animating `right` relayouts the pseudo-element on every
frame of every nav hover; a transform runs on the compositor. */
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--brass);
transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{font-size:14px;padding:10px 11px 10px 19px}
.nav .btn .ic-c{width:26px;height:26px}
.burger{display:none;border:none;background:none;padding:0}
/* visibility:hidden keeps the closed menu's links out of the tab order —
opacity alone left six invisible links keyboard-reachable. */
.menu{position:fixed;inset:0;z-index:39;background:var(--menu-bg);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 32px;opacity:0;visibility:hidden;overscroll-behavior:contain;
transition:opacity var(--dur-4) var(--ease),visibility 0s linear var(--dur-4);overflow-y:auto}
.menu.open{opacity:1;visibility:visible;transition:opacity var(--dur-4) var(--ease),visibility 0s}
.menu a{font-family:var(--display);font-size:clamp(32px,9vw,60px);color:var(--brand-ink);transform:translateY(40px);opacity:0;
transition:transform var(--dur-4) var(--ease),opacity var(--dur-4) var(--ease),color var(--dur-2) var(--ease);line-height:1.12;padding:2px 0}
.menu a:hover{color:var(--brass-ink)}
.menu.open a{transform:none;opacity:1}
/* One --rv-stagger step each, capped at index 6 — the seventh link shares the
sixth's delay rather than pushing the chain past 300ms. */
.menu.open a:nth-child(1){transition-delay:50ms}.menu.open a:nth-child(2){transition-delay:100ms}
.menu.open a:nth-child(3){transition-delay:150ms}.menu.open a:nth-child(4){transition-delay:200ms}
.menu.open a:nth-child(5){transition-delay:250ms}.menu.open a:nth-child(n+6){transition-delay:300ms}
.menu-black{display:flex;align-items:center;gap:14px;font-size:clamp(22px,6vw,34px)!important;color:var(--brass)!important;margin-top:18px;
padding-top:22px!important;border-top:1px solid var(--line)}
.menu-black .jingle{width:15px;height:24px;flex:none}
/* ---------- sections ---------- */
section{position:relative}
.band{--band-pad:var(--band-y);padding:var(--band-pad) 0}
.band-tight{--band-pad:var(--band-y-tight)}
.band-sand{background:var(--sand)}
.band-ruled{border-top:1px solid var(--line)}
/* Two plain bands in a row paid for the gap twice — up to 250px of empty paper
between the end of one section's copy and the next heading, with no change of
surface to justify it. When the background doesn't change, one band's worth
of space is the section break. A band that changes surface (dark, sand) or
carries its own top rule keeps its full padding: there, the space is the
transition. */
.band + .band{padding-top:0}
.band + .on-dark,.band + .band-sand,.band + .band-ruled,
.on-dark + .band,.band-sand + .band{padding-top:var(--band-pad)}
/* Sets --stack, not gap: the bound-pair rules subtract --stack to pull a note
up under its button, so anything that changes the spacing has to change the
variable or the two disagree. */
.band-head{display:grid;--stack:var(--s-3);gap:var(--stack);max-width:68ch;margin-bottom:clamp(34px,4vw,52px)}
/* Heads that introduce a table or a card row rather than a whole section. */
.band-head-tight{margin-bottom:clamp(20px,2.4vw,30px)}
.on-dark{background:var(--onyx);color:var(--paper)}
.on-dark h2,.on-dark h3{color:var(--paper)}
.on-dark .lead{color:rgba(251,248,241,.72)}
.rule{height:1px;background:var(--line);border:none}
/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:center;padding:var(--head-top) 0 clamp(44px,6vw,70px);overflow:hidden}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(1000px 560px at 82% 4%,var(--sand) 0%,transparent 58%),radial-gradient(760px 520px at 6% 96%,rgba(231,217,191,.5),transparent 60%);
animation:glowdrift 16s ease-in-out infinite}
/* No `will-change` here. It was on permanently, which pins a full-viewport
composited layer in GPU memory for the life of the page for an animation the
compositor already handles — one blurred ambient layer per surface, and never
with a standing promotion hint. */
.hero .wrap{--stack:var(--s-4)}
.hero h1{max-width:16ch}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* No wrap: the mark is a bullet for the line, and when it wrapped it left an
orphan sparkle sitting alone above the text on every phone. */
.hero-proof{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-soft)}
.hero-proof .jingle{width:11px;height:17px;color:var(--brass);flex:none;margin-top:2px}
.hero-proof b{color:var(--ink);font-weight:600}
/* z-index 0, below .wrap — at z-index 1 the lower mark sat on top of the
finder card's corner. Decoration must never land on an input. */
.float-mark{position:absolute;color:var(--sand-deep);z-index:0;animation:bob 8s var(--ease) infinite}
.float-mark.a{top:15%;right:6%;width:58px;height:90px;color:var(--brass);opacity:.45}
.float-mark.b{bottom:22%;right:4%;width:26px;height:40px;opacity:.6;animation-delay:-2.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(5deg)}}
@keyframes glowdrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.2%,1.6%,0) scale(1.045)}}
/* ---------- instant service finder (hero-adjacent) ---------- */
.finder{position:relative;z-index:3;margin-top:8px;background:var(--surface);border-radius:26px;padding:10px;
box-shadow:0 0 0 1px var(--line) inset,0 30px 70px -40px rgba(34,26,17,.45)}
/* 8px of right padding on the bar put the text hard against a rounded corner,
so a placeholder one character too long ended in a guillotined glyph rather
than reading as trailing-off text. The bar keeps a real right inset now. */
.finder-bar{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 20px;border-radius:19px;background:var(--paper);box-shadow:0 0 0 1px var(--line-2) inset}
.finder-bar svg.mag{width:19px;height:19px;stroke:var(--ink-soft);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.finder-bar input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--ctl-size);
line-height:1.25;min-height:var(--ctl-h);padding:14px 0;letter-spacing:-.01em;
/* Belt to the JS braces: site.js swaps in the short placeholder when the
long one will not fit, and this makes the cut soft if it ever does. */
text-overflow:ellipsis}
/* ::placeholder was styled in exactly ONE rule site-wide (this one), so every
other placeholder on the site rendered at the UA's grey. One value, applied
to every control that has one. */
.finder-bar input::placeholder,.dir-search input::placeholder{color:var(--ink-soft);opacity:.62}
.finder-tags{display:flex;flex-wrap:wrap;gap:7px;padding:14px 10px 8px}
.ftag{font-size:13px;font-weight:500;color:var(--ink-soft);padding:8px 15px;border-radius:999px;background:var(--paper);cursor:pointer;border:none;
min-height:44px;
box-shadow:0 0 0 1px var(--line-2) inset;transition:box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.ftag:hover{color:var(--brass-ink);box-shadow:0 0 0 1px rgba(154,107,28,.32) inset}
.finder-results{display:none;padding:6px 6px 8px}
.finder.has-results .finder-results{display:block}
.finder.has-results .finder-tags{display:none}
.fres{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:15px;transition:background var(--dur-2) var(--ease)}
.fres:hover,.fres:focus-visible{background:var(--sand)}
.fres .fr-n{font-weight:600;font-size:15.5px}
.fres .fr-l{font-size:12.5px;color:var(--ink-soft)}
.fres .fr-p{margin-left:auto;font-size:14px;color:var(--brass-ink);font-weight:600;white-space:nowrap}
.fres-empty{padding:18px;font-size:15px;color:var(--ink-soft)}
/* ---------- proof strip ----------
Client NAMES, set as a credit line. The previous version rendered each name
as a wordmark in LUMORIA's own display face, which read as a row of client
logos we were never given. Names are honest; fake logos are not. */
.proof-strip{padding:var(--s-5) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
/* Sentence case, no tracking. As tracked caps this was an eyebrow in all but
name, and the .72 opacity put 11px type at ~4.6:1. */
.strip-label{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:var(--s-3);text-align:center;text-wrap:balance}
.credits{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.credits li{display:flex;align-items:baseline;gap:9px;padding:9px 18px;border-radius:999px;background:var(--surface);
box-shadow:0 0 0 1px var(--line-2) inset;transition:box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.credits li:hover{box-shadow:0 0 0 1px rgba(154,107,28,.3) inset;transform:translateY(-2px)}
.credits b{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.credits span{font-size:13px;color:var(--ink-soft)}
.credits-note{margin:var(--s-3) auto 0;max-width:62ch;text-align:center;font-size:13px;color:var(--ink-soft);line-height:1.55;text-wrap:pretty}
/* ---------- lane rail (5 lanes) ---------- */
/* A bottom rule as well as a top one — with only a top rule the tab strip had
a ragged open edge and read as an unfinished block. */
.rail{display:grid;grid-template-columns:repeat(5,1fr);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:var(--s-6)}
.rail-item{text-align:left;background:none;border:none;font-family:var(--body);cursor:pointer;padding:22px 20px 22px;display:grid;gap:7px;align-content:start;position:relative;border-left:1px solid var(--line);transition:background var(--dur-3) var(--ease)}
.rail-item:first-child{border-left:none}
/* Same conversion as the nav underline: transform, never `right`. */
.rail-item::before{content:"";position:absolute;top:-1.5px;left:0;right:0;height:1.5px;background:var(--brass);
transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease)}
.rail-item.is-active::before{transform:scaleX(1)}
.rail-item.is-active{background:linear-gradient(180deg,rgba(154,107,28,.07),transparent)}
.rail-k{font-family:var(--display);font-size:clamp(21px,2.1vw,29px);color:var(--ink);line-height:1;transition:color var(--dur-3) var(--ease)}
.rail-item.is-active .rail-k,.rail-item:hover .rail-k{color:var(--espresso)}
.rail-sub{font-size:13px;color:var(--ink-soft);line-height:1.35}
/* Pushed to the floor of the cell so the five counts sit on one line — "Grow"
has a two-line description and its count used to hang 15px below the rest,
leaving the bottom of the tab strip ragged. */
.rail-n{font-size:12px;color:var(--brass-ink);font-weight:600;margin-top:auto;padding-top:6px}
/* ---------- service cards ---------- */
/* Same shape as .tiers: single column is the base, extra tracks are opt-in
above a width where the 288px minimum is guaranteed to fit (2 * 288 + 16). */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:681px){.svc-grid{grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}}
.svc{min-width:0;overflow-wrap:break-word;overflow-wrap:anywhere}
/* Column, not grid-with-align-content:start — so .svc-foot can take the slack
and every price row in a grid of cards lands on the same baseline no matter
how many lines the title above it wrapped to. */
.svc{position:relative;display:flex;flex-direction:column;gap:9px;background:var(--surface);border-radius:22px;padding:26px 26px 24px;
box-shadow:0 0 0 1px var(--line) inset,0 1px 0 rgba(255,255,255,.6) inset;overflow:hidden;
transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.svc::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur-3) var(--ease);
background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),rgba(154,107,28,.10),transparent 62%)}
.svc:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(154,107,28,.32) inset,0 30px 60px -34px rgba(34,26,17,.42);z-index:2}
.svc:hover::before{opacity:1}
/* The per-card lane tag is gone: every grid of cards on the site is already
inside a lane — a selected tab panel on the homepage, a lane-headed group in
the directory — so it restated the heading directly above it in tracked caps
on all 27 cards. Only a real flag (Best seller / Instant) earns the row now. */
.svc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.svc-flag{font-size:11px;letter-spacing:.06em;font-weight:700;color:#fff;background:var(--brass);padding:5px 11px;border-radius:999px}
.svc-flag.alt{background:var(--espresso)}
/* The card title is display type at 25px; it needs its own air, not the same
9px that separates the flag row from it. */
.svc h3{font-size:25px;letter-spacing:-.015em;line-height:1.02;margin-bottom:3px}
.svc p{font-size:14.8px;color:var(--ink-soft);line-height:1.5}
.svc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line-2)}
.svc-price{font-size:13.5px;color:var(--ink-soft);line-height:1.3}
.svc-price b{font-family:var(--display);font-size:23px;color:var(--espresso);font-weight:400;display:block;letter-spacing:-.01em}
.svc-go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--brass-ink);white-space:nowrap}
.svc-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-3) var(--spring)}
.svc:hover .svc-go svg,.svc:focus-within .svc-go svg{transform:translateX(3px)}
/* The card is one link, but the anchor now wraps the heading rather than being
an empty overlay — so the accessible name is the real text and the card body
stays selectable. ::after does the full-card hit area. */
.svc-link::after{content:"";position:absolute;inset:0;z-index:3}
.svc:focus-within{box-shadow:0 0 0 1px rgba(154,107,28,.32) inset,0 30px 60px -34px rgba(34,26,17,.42)}
.svc-link:focus-visible{outline:none}
.svc:has(.svc-link:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
/* ---------- directory page ---------- */
.dir-head{padding:var(--head-top) 0 var(--s-5)}
/* Was top:82px against a 94px-tall nav, so the filter bar parked 12px *under*
the chrome. Pinned to the token now, with the same 14px breathing room the
scroll anchors use. */
.dir-controls{position:sticky;top:calc(var(--nav-h) + 6px);z-index:20;padding:12px 0 16px;background:linear-gradient(var(--paper) 72%,transparent);margin-bottom:var(--s-4)}
.dir-search{display:flex;align-items:center;gap:12px;padding:4px 6px 4px 18px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;max-width:520px}
/* Was 15.5px — under 16px, so focusing it zoomed the viewport on iOS. */
.dir-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--ctl-size);
line-height:1.25;min-height:44px;padding:12px 0;
/* Belt to the JS braces — site.js already swaps in a placeholder that fits;
this makes the cut soft rather than a guillotined glyph if it ever does. */
text-overflow:ellipsis}
.dir-search svg{width:18px;height:18px;stroke:var(--ink-soft);fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.dir-clear{border:none;background:var(--sand);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:8px 14px;border-radius:999px;
flex:none;min-height:44px;transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.dir-clear:hover{background:var(--sand-deep);color:var(--ink)}
.dir-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* `transition:all` also animates layout properties nobody intended — name them. */
.fchip{font-size:13px;font-weight:600;color:var(--ink-soft);padding:9px 17px;border-radius:999px;background:var(--surface);cursor:pointer;border:none;
min-height:44px;
box-shadow:0 0 0 1px var(--line) inset;
transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.fchip:hover{color:var(--brass-ink);box-shadow:0 0 0 1px rgba(154,107,28,.32) inset}
.fchip.on{background:var(--ink);color:var(--paper);box-shadow:none}
.dir-count{font-size:13.5px;color:var(--ink-soft);margin:4px 0 var(--s-3)}
.dir-empty{padding:var(--s-8) 0;text-align:center;color:var(--ink-soft);display:grid;gap:var(--s-3);justify-items:center}
.dir-empty h3{font-size:30px;color:var(--ink)}
.dir-group{margin-bottom:var(--s-7)}
.dir-group-head{display:flex;align-items:baseline;gap:14px;margin-bottom:var(--s-3);padding-bottom:14px;border-bottom:1.5px solid var(--ink);flex-wrap:wrap}
.dir-group-head h2{font-size:clamp(27px,3vw,38px)}
.dir-group-head span{font-size:14px;color:var(--ink-soft)}
/* ---------- service detail ---------- */
.svc-hero{padding:var(--head-top) 0 clamp(38px,5vw,58px);position:relative;overflow:hidden}
.svc-hero .hero-glow{animation:glowdrift 18s ease-in-out infinite}
/* Margins on these were hand-tuned one at a time (22 / 18 / 26 / 30px) and no
two heroes matched. The .rgroup stack owns the spacing now. */
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.crumbs a:hover{color:var(--brass-ink)}
.crumbs .sep{opacity:.4}
.svc-hero h1{max-width:16ch}
.svc-hero .lead{max-width:56ch}
.svc-meta{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-soft);padding:9px 16px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.pill b{color:var(--ink);font-weight:600}
.pill .dot{width:6px;height:6px;border-radius:999px;background:var(--brass);flex:none}
.pill .dot.live{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.priceline{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.priceline .big{font-family:var(--display);font-size:clamp(44px,6vw,72px);line-height:.94;color:var(--espresso);letter-spacing:-.02em}
.priceline .big .px{color:var(--brass)}
/* Two stacked facts, so they stack — this used to be one span with a in it. */
.priceline .qual{display:grid;gap:2px;font-size:14.5px;color:var(--ink-soft);padding-bottom:8px;line-height:1.35}
.two-col{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(38px,4.4vw,56px);align-items:start}
/* 12px between items whose own line spacing is 24px meant a wrapped item ran
into the next one — the four-point list read as one grey block. */
.checklist{display:grid;gap:16px}
.checklist li{list-style:none;display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink-soft);line-height:1.5}
.checklist li svg{width:17px;height:17px;color:var(--brass);flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.checklist li b{color:var(--ink);font-weight:600}
.on-dark .checklist li{color:rgba(251,248,241,.82)}
.on-dark .checklist li svg{color:var(--brass-bright)}
/* tiers */
/* ONE COLUMN IS THE BASE, and every extra column is opt-in. This used to be a
single `repeat(auto-fit,minmax(min(240px,100%),1fr))` on an element that was
ALSO the query container — three features stacked on one declaration, and if
any of them mis-sizes, the fallback is a collapsed track, not a phone layout.
That is exactly what shipped: on 2026-08-09 the cards rendered ~45px wide on
a real handset with the text overflowing them, while every desktop engine and
the live CSS itself (byte-identical to this file) laid them out correctly.
So the failure mode is inverted. The base declaration is a plain single
column that no engine can get wrong, the multi-column rule only ever ADDS
tracks, and it lives behind a query — so if the query never matches, or the
engine drops it, what remains is the correct mobile layout.
No min() inside minmax() inside repeat() either. The 520px floor is why it is
not needed: two 240px tracks plus the 16px gap is 496px, so the track minimum
is guaranteed to fit before auto-fit is ever asked for. */
.tiers-c{container-type:inline-size}
.tiers{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:520px){
.tiers{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
/* The empty badge slot exists to line headings up ACROSS tiers. Once the grid
collapses to one column there is nothing to line up with, so it is just a
hole above the title — measured off the container, not the viewport, so it
tracks the actual column count wherever the component is used. */
@container (max-width:519px){.tier .t-tag:empty{display:none}}
/* Column so the CTA can bottom-align across tiers of different note lengths. */
.tier{border-radius:22px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:13px;background:var(--surface);
box-shadow:0 0 0 1px var(--line) inset;transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);position:relative;
/* Containment of last resort. Whatever a track does, words stay in the card:
min-width:0 lets the item shrink instead of forcing the track wider, and
`anywhere` (unlike break-word) also lowers the min-content contribution,
so a squeezed card wraps its own text rather than spilling it sideways.
break-word first for engines that never learned `anywhere`. */
min-width:0;overflow-wrap:break-word;overflow-wrap:anywhere}
.tier:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(154,107,28,.3) inset,0 30px 60px -34px rgba(34,26,17,.4)}
.tier.pop{background:var(--espresso);color:var(--paper);box-shadow:0 26px 60px -28px rgba(74,42,21,.7)}
.tier.pop .t-note,.tier.pop .t-amt small{color:rgba(251,248,241,.72)}
.tier.pop .t-amt{color:var(--paper)}
/* The badge slot is always in the flow, empty or not, so the headings of a
flagged and an unflagged tier sit on the same line. It used to be filled
with a literal , which a screen reader read out as a blank line. */
/* line-height and min-height must match, or a tier with a badge sits a few
pixels lower than one with an empty slot and the three headings go ragged. */
.tier .t-tag{font-size:11px;letter-spacing:.06em;font-weight:700;color:var(--brass-ink);line-height:1.2;min-height:1.2em}
.tier.pop .t-tag{color:var(--brass-bright)}
.tier h3{font-size:25px}
.tier .t-amt{font-family:var(--display);font-size:clamp(29px,3.2vw,38px);color:var(--espresso);line-height:1;letter-spacing:-.01em}
.tier .t-amt small{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--ink-soft);letter-spacing:0;display:block;margin-top:7px}
.tier .t-note{font-size:14px;color:var(--ink-soft);line-height:1.45}
/* auto pushes the CTA to the card floor so buttons line up across tiers; the
flex gap guarantees clearance from the note above even in a short card. */
/* max-width:100% so the CTA can never be wider than the card it sits in — a
column-flex item's cross size can shrink today, so this is not live, but it
was one white-space:nowrap away from being the reported overflowing pill. */
.tier .btn{margin-top:auto;align-self:start;max-width:100%}
/* Below ~190px of layout viewport (a 320pt phone at Safari's 200% page zoom,
which is a LAYOUT zoom) the pill's fixed 30px arrow circle plus 38px of
padding stops fitting inside the card. Tighten the pill and let the label
break rather than let the arrow escape the corner. */
@media (max-width:400px){
.tier .btn{padding:11px 10px 11px 16px;gap:9px}
.tier .btn .btn-t{min-width:0;overflow-wrap:anywhere}
.tier .btn .ic-c{width:26px;height:26px}
}
.tier h3{margin-bottom:2px}
/* addons table */
.addons{display:grid;gap:2px}
.addon{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line-2);flex-wrap:wrap}
.addon:first-child{border-top:none}
.addon .a-n{font-weight:600;font-size:15.5px;flex:none}
.addon .a-d{font-size:14px;color:var(--ink-soft);flex:1;min-width:180px;line-height:1.4}
.addon .a-p{font-family:var(--display);font-size:21px;color:var(--espresso);margin-left:auto;white-space:nowrap}
.addon .a-p .a-u{font-family:var(--body);font-size:12px;font-weight:500;color:var(--ink-soft)}
/* sticky buy rail */
.buybox{position:sticky;top:calc(var(--nav-h) + 14px);background:var(--surface);border-radius:24px;padding:28px;display:grid;gap:16px;
box-shadow:0 0 0 1px var(--line) inset,0 30px 70px -44px rgba(34,26,17,.5)}
/* "From" is a caption bound to the number under it, not a sibling of it. */
.buybox .lab{margin-bottom:-10px}
/* The primary action gets a break from the copy above; the trust list is bound
to the button it reassures. */
.buybox .btn{margin-top:6px}
.buybox .bb-note + .btn{margin-top:4px}
.buybox .bb-price{font-family:var(--display);font-size:40px;color:var(--espresso);line-height:1;letter-spacing:-.02em}
.buybox .bb-price small{font-family:var(--body);font-size:13px;color:var(--ink-soft);font-weight:500;letter-spacing:0;display:block;margin-top:8px}
/* Centred, not space-between: in a ~300px rail the arrow ended up marooned at
the far edge with a hand-span of dead pill between it and the label. */
.buybox .btn{justify-self:stretch;justify-content:center;padding-left:20px}
.buybox .bb-note{font-size:13px;color:var(--ink-soft);line-height:1.5}
.buybox .bb-note b{color:var(--ink)}
.bb-trust{display:grid;gap:9px;padding-top:15px;border-top:1px solid var(--line-2)}
.bb-trust li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.bb-trust svg{width:14px;height:14px;color:var(--brass);flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* region notice */
.region-note{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;border-radius:16px;background:var(--sand);box-shadow:0 0 0 1px var(--line-2) inset;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.region-note svg{width:16px;height:16px;color:var(--brass);flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.region-note b{color:var(--ink)}
/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.8vw,34px)}
.step{padding-top:20px;border-top:1.5px solid var(--ink);display:grid;gap:12px;align-content:start}
/* The tracked-caps kicker above each step's heading is gone. On the process
band it was literally ONE / TWO / THREE / FOUR — a numbered incrementer
above four items already in order, the exact tell we don't ship. */
.step h3{font-size:22px}
.step p{font-size:14.8px;color:var(--ink-soft);line-height:1.5}
.on-dark .step{border-top-color:rgba(205,160,85,.5)}
.on-dark .step p{color:rgba(251,248,241,.68)}
/* ---------- faq ---------- */
.faq{display:grid;gap:0;max-width:840px}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:17.5px;font-weight:600;position:relative;transition:color var(--dur-2) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(45deg);transition:transform var(--dur-3) var(--spring)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--brass-ink)}
.faq .fa{padding:0 0 24px;font-size:16px;color:var(--ink-soft);line-height:1.6;max-width:70ch}
/* ---------- guarantee ---------- */
/* Contrast is decided by the SECTION, not the body. The old rule keyed off a
body.dark-ctx class that was never set anywhere, so the guarantee inside the
onyx "Built, not pitched" band rendered warm brown on near-black (~1.3:1). */
.guarantee{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:28px 32px;border-radius:22px;
background:linear-gradient(180deg,rgba(154,107,28,.09),rgba(154,107,28,.03));box-shadow:0 0 0 1px rgba(154,107,28,.26) inset}
/* On the directory this box also carries a CTA; without this it got squeezed
by the flexible paragraph instead of holding its own width. */
.guarantee .btn{flex:none}
.steps + .guarantee{margin-top:clamp(38px,4.6vw,56px)}
.guarantee .g-ic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;background:rgba(154,107,28,.13);color:var(--brass)}
.guarantee .g-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guarantee p{font-size:16px;color:var(--ink-soft);line-height:1.5;flex:1;min-width:240px}
.guarantee p b{color:var(--ink);font-weight:600}
.on-dark .guarantee{background:linear-gradient(180deg,rgba(205,160,85,.12),rgba(205,160,85,.035));box-shadow:0 0 0 1px rgba(205,160,85,.3) inset}
.on-dark .guarantee .g-ic{background:rgba(205,160,85,.16);color:var(--brass-bright)}
.on-dark .guarantee p{color:rgba(251,248,241,.84)}
.on-dark .guarantee p b{color:var(--paper)}
/* ---------- booking ---------- */
.bk{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(28px,3.4vw,44px);align-items:start}
.bk-card{background:var(--surface);border-radius:24px;padding:30px;box-shadow:0 0 0 1px var(--line) inset;display:grid;gap:22px}
.bk-step{display:grid;gap:14px}
.bk-step-h{display:flex;align-items:center;gap:12px}
.bk-step-h .n{width:26px;height:26px;border-radius:999px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.bk-step-h h3{font-size:21px}
.bk-step.done .bk-step-h .n{background:var(--ok)}
/* ---------- controls — the canonical block (docs/10-interface-standard.md §2)
One geometry, public density. Copied, not re-derived: this block and the
app-density one in the Console differ only by --ctl-h, --ctl-r and the two
font sizes.
Three defects lived here and all three are fixed below, so nobody
reintroduces them:
1. `appearance` was reset NOWHERE in this stylesheet, so every