/* ==========================================================================
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.
18px, not the 12px the bound tier calls for, and the extra 6 is not a fudge:
the primary button carries a large soft drop shadow that renders BELOW its
border box. Margin measures from the border box, so a true 12px gap puts the
text 12px from the button's edge and perhaps 4px from the bottom of its
visible shadow — the eye reads the shadow as part of the button, so the pair
looks cramped even though the number is right. Spacing is optical: measure to
what the visitor can see, not to the box model. */
.rgroup > .hero-cta + :is(.cta-note,.region-inline),
.rgroup > .btn + .cta-note{margin-top:calc(-1 * var(--stack) + 18px)}
/* ---- a block, and the note that explains it ------------------------------
A list, a table or a CTA cluster is a change of MODE, so the prose that
follows one sits at the break tier — never at whatever margin it inherited.
Left alone these collapse to nothing and the note butts straight onto the
last row, which is what makes /partners/ read as unfinished in two separate
places: the fineprint under the rules and the note under the earnings table
both looked like a sixth row of the thing above them rather than a comment
on it. Bound to the block above, broken from the section below. */
:is(.worth,.deflist,.checklist,.steps,.faq) + .fineprint,
:is(.worth,.deflist,.checklist,.steps,.faq) + .cta-note{margin-top:clamp(26px,2.6vw,34px)}
.fineprint{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:74ch;text-wrap:pretty}
.fineprint a{color:var(--brass-ink);font-weight:600}
/* 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)}
/* ---- .h-duo — a headline that is two statements, not one -----------------
"Send someone our way. Take 20% of what they spend." is a proposition and
then its terms. Set at ONE size inside a 16ch measure it broke into four
ragged lines and orphaned "our way." on its own — four lines of identical
weight, so the eye got no help deciding which half was the offer.
Two tiers instead: the proposition large enough to hold one line at desktop,
the terms about 58% of it and a step softer in colour. The size drop is what
makes the first line land; the colour drop is what stops the second line
competing. Same tonal ladder as the home hero (ink → espresso → brass).
`max-width:none` overrides the 16ch hero measure deliberately — 16ch is the
right measure for one running headline and the wrong one for a lead line
that is supposed to stay unbroken. `balance` still governs the wrap on a
phone, where one line is not possible and an even 2+2 split is the goal. */
.h-duo{display:grid;gap:.1em;max-width:none}
.svc-hero h1.h-duo{max-width:none}
.h-duo .hl-a{display:block;font-size:clamp(34px,6.2vw,80px);line-height:.94;
color:var(--ink);text-wrap:balance}
.h-duo .hl-b{display:block;font-size:clamp(24px,3.6vw,47px);line-height:1;
color:var(--espresso);text-wrap:balance}
/* A lead is display-adjacent, not body prose. At 1.55 — the body ratio — a 21px
lead set two or three lines deep opens up to 32.5px of leading and stops
reading as one block under the headline: the lines float apart while the
headline above them sits at .96, so the pair looks like two unrelated
paragraphs rather than a statement and its qualifier. Larger type needs
proportionally LESS leading, not the same. 1.45 keeps the block cohesive and
still clears the descenders at 17px on a phone. */
.lead{font-size:clamp(17px,1.7vw,21px);color:var(--ink-soft);line-height:1.45;max-width:48ch;font-weight:400;text-wrap:pretty}
.brass{color:var(--brass)}
/* The accent has two values, one per ground: --brass reads as mud on onyx.
Every other on-dark component already switches; the emphasis span did not,
because until the standard band there was no brass word on a dark heading. */
.on-dark .brass{color:var(--brass-bright)}
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)}
/* The lane icon, above the name on its own line so five equal-weight columns
read as a set at a glance. Brass, because it is the one accent and these are
the only marks in the row. */
.rail-ic{display:block;line-height:0;margin-bottom:2px}
.rail-ic svg{width:22px;height:22px;color:var(--brass);stroke:currentColor;fill:none;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
transition:color var(--dur-3) var(--ease)}
.rail-item.is-active .rail-ic svg,.rail-item:hover .rail-ic svg{color:var(--espresso)}
.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}
/* Coolvetica, weight 400, zero tracking — and each of those three is a fix.
This was 11px body-BOLD at letter-spacing:.06em. Positive tracking is what
you reach for when 11px bold body type has no other way to look deliberate,
and it is exactly what makes a badge read as stock SaaS chrome; it is the
same treatment the eyebrow ban exists to kill, surviving inside a pill.
The display face does not need the crutch, and it costs no room: measured,
"Best seller" advances 61.7px at 14px Coolvetica against 62.6px at the old
11px+.06em, so the pill keeps its footprint in every card grid while the
glyphs get ~27% bigger and stop looking shouted.
font-weight stays 400 because there IS no Coolvetica bold — the @font-face
at the top of this file declares 400 only, so a 700 here would be
SYNTHESISED: the browser smears the outline sideways and the pill renders in
a fake bold that does not match the h1..h4 set in the same face 25px below
it on the same card. Never put a weight on --display that the file has not
loaded.
letter-spacing:0, not the house -.02em: that value is tuned for the 40-124px
display lines it was written for. At 14px the face's own sidebearings are
already right, and the defect being fixed here is ADDED tracking — so the
honest value is none, not a different amount.
line-height is pinned to 1 so the pill's height is the padding plus the font
size and nothing else, and the padding is asymmetric the OTHER way round to
the obvious guess. Coolvetica's em box carries more descent than the strings
in this pill ever use ("Best seller", "Instant" have no descender at all), so
a symmetric pad leaves the cap band sitting high. Measured at 6/7: 7.59px
above the cap against 10px below the baseline — 2.41px out. 7 top / 6 bottom
moves it a pixel down and lands at 8.59 against 9.00, i.e. 0.41px out, which
is under the rounding. Optical centring here means centring the CAP BAND
(cap-top to baseline), not the font box; "Everything" still keeps 5.7px of
clearance under its descenders. */
.svc-flag{font-family:var(--display);font-size:14px;font-weight:400;letter-spacing:0;line-height:1;
color:#fff;background:var(--brass);padding:7px 12px 6px;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}
/* The icon variant. `.steps` already carries the grid, the rule and the type
scale, so this adds a slot and nothing else — the alternative was a second
four-across grid component that would drift from this one. */
.steps-ic .step{border-top:none;padding-top:0;gap:10px}
.step .s-ic{width:26px;height:26px;color:var(--brass);stroke:currentColor;fill:none;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.on-dark .step{border-top-color:rgba(205,160,85,.5)}
.on-dark .step p{color:rgba(251,248,241,.68)}
.on-dark .step .s-ic{color:var(--brass-bright)}
/* ---------- 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)}
/* The panel used to be a bare child: the chevron rotated on --dur-3
and the answer SNAPPED, which is the one place on the site with no motion at
all. Three things were tried and measured in a browser before this shape:
1. `grid-template-rows:0fr -> 1fr` as a plain CSS transition. It does not
run. A closed has its content skipped (content-visibility), so
on open there is no previous computed value to interpolate FROM and the
engine creates no CSSTransition at all — getAnimations() came back empty.
Only the CLOSE produced a transition object, and that one is invisible
because the content is hidden the instant `open` is removed.
2. `::details-content` with block-size + allow-discrete. Also produced no
transition object here, needs `interpolate-size:allow-keywords`, and is
too new to be the only route. Overriding its content-visibility to make
it animatable LEAKS — the answer renders while the panel is shut.
3. What ships: faq.js drives the track with the Web Animations API, which
interpolates fr units correctly (measured 0 -> 4.7 -> 18.8 -> 42.3 ->
75.2px across 320ms) and, unlike a CSS transition, also runs on CLOSE
because the script holds `open` until the animation finishes.
So the DEFAULT below is the OPEN state, not the closed one. With JS off, or
before faq.js arrives, behaves exactly as it always did — the
panel is correct and keyboard-operable, it simply does not animate. Nothing
here gates the answer on motion. */
.faq .fa-w{display:grid;grid-template-rows:1fr}
.faq .fa{overflow:hidden;min-height:0}
.faq .fa-b{padding:0 0 24px;font-size:16px;color:var(--ink-soft);line-height:1.6;max-width:70ch}
/* The house entrance — fluid, blurry, motion-graphic — is applied to .fa-b by
faq.js, not here, because it is a Web Animations keyframe rather than a CSS
transition. It runs at the SURFACE duration (--dur-3), not the entrance one
(--dur-4): a disclosure panel is a surface. faq.js reads --dur-3, --ease,
--ease-out, --rv-y and --rv-blur off :root, so the tokens above stay the
single definition and this block invents no duration of its own.
prefers-reduced-motion is checked in the script — the global reduce block
below only neutralises CSS transitions, and a WAAPI animation ignores it. */
/* ---------- 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}
/* A form is a list of fields, and an even gap between fields is CORRECT — a
list is supposed to be even. What is not correct is the submit and its
risk-reversal note taking that same gap: the contact form ran five fields,
the button and the note all at 14px, so nothing in it grouped. The two rules
under it are the break and the bind, expressed against the gap so they stay
right if the rhythm is ever retuned. */
.bk-step{--stack:14px;display:grid;gap:var(--stack)}
/* the submit is a change of mode, not one more field */
.bk-step > * + .btn{margin-top:calc(var(--s-4) - var(--stack))}
/* ...and the note under it belongs to that button, not to whatever follows */
.bk-step > .btn + .cta-note{margin-top:calc(var(--s-2) - var(--stack))}
.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