(rail is sticky ≥900px) */
.arc-3{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,3vw,44px);
}
.arc-3 li{position:relative;border-top:1px solid var(--line);padding-top:clamp(16px,2vw,26px)}
.arc-3 li::before{
content:"";position:absolute;left:0;top:-3.5px;
width:6px;height:6px;border-radius:50%;background:var(--umber);
}
.arc-3 b,.arc-3 h3{
display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(20px,2vw,28px);line-height:1.15;letter-spacing:-.005em;color:var(--ink);
}
.arc-3 p,.arc-3 li>span{display:block;margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--ink-60);max-width:34ch}
@media (max-width:760px){ .arc-3{grid-template-columns:1fr;gap:24px} }
.arc-3-wrap{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:start}
.arc-3-wrap .arc-rail{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);margin:0}
.arc-3-wrap .arc-rail img{width:100%;height:auto}
@media (min-width:900px){
.arc-3-wrap{grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,84px)}
.arc-3-wrap .arc-rail{position:sticky;top:12vh}
/* P1 fix: when the text column carries .arc-copy, IT pins and the taller
rail scrolls past (sticky on the taller child never engages). Scoped so
plain .arc-rail keeps its sticky if the class is reused elsewhere. */
.arc-3-wrap .arc-copy{position:sticky;top:12vh;align-self:start}
.arc-3-wrap .arc-copy~.arc-rail{position:static}
}
/* P1 fix (mobile): rail figures fill the column; no orphan inset thirds */
@media (max-width:899px){
.arc-3-wrap .arc-rail figure{margin:0!important;width:100%!important}
}
/* ---------- A6 · .line-family : legacy lineage device ----------
markup:
The homeone quiet line
×3
*/
.line-family{
position:relative;
display:flex;flex-direction:column;gap:clamp(24px,3vw,38px);
padding-left:clamp(24px,3vw,36px);
max-width:46ch;
}
.line-family::before{content:"";position:absolute;left:2px;top:8px;bottom:8px;width:1px;background:var(--line)}
.line-family .lf-row{position:relative}
.line-family .lf-row::before{
content:"";position:absolute;top:.5em;left:calc(-1*clamp(24px,3vw,36px));
width:5px;height:5px;border-radius:50%;background:var(--umber);
}
.line-family b,.line-family h3{
display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(20px,2.2vw,30px);line-height:1.15;color:var(--ink);
}
.line-family .lf-row span,.line-family .lf-row p{
display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink-60);
}
/* ---------- A7 · .colophon : per-page one-line disclaimer above the footer ---------- */
.colophon{
text-align:center;
font-family:var(--caps);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-60);
padding:clamp(28px,4vw,48px) var(--gut);
line-height:1.9;
}
/* ---------- A8 · ambient hero loops (motion-plan.md, authoritative) ----------
Layered video above the untouched still; crossfades in only once actually
playing (JS adds .is-playing/.playing). Hidden <760px and under
reduced-motion so the webp still shows and zero video bytes are fetched. */
.amb-loop{position:relative;overflow:hidden}
.bleed-media .loop-video,.amb-loop video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .9s ease;
}
.bleed-media .loop-video.is-playing,.bleed-media .loop-video.playing,
.amb-loop video.is-playing,.amb-loop video.playing{opacity:1}
@media (max-width:759.98px), (prefers-reduced-motion: reduce){
.bleed-media .loop-video,.amb-loop video{display:none}
}
html.shot .bleed-media .loop-video,html.shot .amb-loop video{display:none}
/* ---------- A9 · pc-stack: first frame never lost without JS/motion ---------- */
html.no-js .pc-stack img:first-child,html.shot .pc-stack img:first-child{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.pc-stack img:first-child{opacity:1;transform:none}
}
/* ---------- A10 · form v3: textarea matches the input underline style ---------- */
form[data-wa] textarea{
display:block;width:100%;
background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
padding:10px 0;margin-bottom:6px;
font:inherit;line-height:1.5;color:var(--ink);
resize:vertical;min-height:2.4em;
}
form[data-wa] textarea:focus-visible{
outline:none;
border-bottom-color:var(--umber);
box-shadow:0 1px 0 0 var(--umber);
}
/* ---------- device-fix pass (12-viewport compatibility test, 2026-07-02) ---------- */
/* D3: index hero-meta clock clears the WhatsApp pill (768-1200px) */
@media (min-width:481px){ .hero-meta{padding-right:clamp(150px,13vw,210px)} }
/* D4: phones — band-caption tails clear the FAB circle */
@media (max-width:759px){ .bleed-cap,.warm-band .cap{padding-right:76px} }
/* D5: tap targets on hairline links (hit area only, no visual shift) */
.addr a,.cta-secondary{padding-block:8px;margin-block:-8px}
/* D6: selling four-fact caps row (builder A applies the class) */
.fact-row{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,36px)}
@media (min-width:900px){ .fact-row{grid-template-columns:repeat(4,1fr)} }
@media (max-width:460px){ .fact-row{grid-template-columns:1fr} }
/* D7: proof strip trims its tail on small phones (builder A adds the span) */
@media (max-width:480px){ .proof-strip .extra{display:none} }
/* ---------- end wave 2 block ---------- */
/* ---- FINAL QA POLISH (post wave-2) ---- */
.case-timeline{margin-top:clamp(28px,3vw,44px)}
.rev-card .rev-by{margin-top:auto;padding-top:14px}
/* ============================================================================
WAVE 3 BLOCK · .photo-close — closing-CTA pattern (cta-photo-plan.md §1)
============================================================================
FINAL CLASS NAMES (collision-checked against the legacy .pc-grid/.pc-stack
pillar component and all izanami.js hooks — NO rename needed, use as planned):
.photo-close the 2-col wrapper (add .flip to mirror: image RIGHT)
.pc-fig the figure — MUST also carry class "reveal"
.pc-body the existing close content, moved in unchanged
EXPECTED MARKUP (builders):
Optional one line in her voice.
…existing close content verbatim: .eyebrow, .statement, .cta-line,
.cta-btn, .cta-secondary, tel line, viewlinks row (all keep their
inline margins — nothing needs restyling)…
NOTES:
- The 4/5 (desktop) / 4/3 (≤899px) aspect lives on the IMG, not the figure,
so the optional figcaption flows below the photo without distorting the
ratio box (same as every existing .reveal figure on the site). Builders:
do NOT add inline aspect-ratio — only object-position if needed.
- The unveil animation is inherited automatically: izanami.js wires every
".reveal" (clip reveal + slow scale + 4% img parallax) and the still/no-js
path adds .in — no JS change was required, works as a grid item.
- ≤899px the component stacks image-FIRST in source order (figure is first
in the markup); .flip has no effect below 900px by design.
========================================================================== */
.photo-close{display:block}
@media (min-width:900px){
.photo-close{display:grid;grid-template-columns:minmax(300px,.9fr) 1.4fr;
gap:clamp(32px,5vw,80px);align-items:center}
.photo-close.flip>.pc-fig{order:2}
.photo-close.flip>.pc-body{order:1}
}
.pc-fig{margin:0;position:relative;overflow:hidden;border-radius:2px}
.pc-fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pc-fig figcaption{margin-top:12px;font-family:var(--serif);font-style:italic;
font-size:15px;line-height:1.55;color:var(--ink-60)}
@media (max-width:899.98px){
.pc-fig{margin:0 0 clamp(26px,7vw,38px)}
.pc-fig img{aspect-ratio:4/3}
}
/* nested close content: kill any stray top gap so align-items:center is true */
.pc-body>:first-child{margin-top:0}
/* ---------- end wave 3 block ---------- */
/* flip variant: mirror column WIDTHS too (order alone put the image in the wide track) */
@media (min-width:900px){
.photo-close.flip{grid-template-columns:1.4fr minmax(300px,.9fr)}
}
/* ================================================================
============ WAVE 4 BLOCK (2026-07-03 · pricing-plan.md) =====
Pricing page components. Appended last on purpose: later rules
win. Register: ivory / hairline / Playfair numerals / Cinzel caps
— no border-radius, no colored fills, no icon fonts. The only
glyphs are the small ◆ tick and the faint "·" for excluded rows.
================================================================ */
/* ---------- W4.1 · .price-tiers : two hairline-framed rate columns ----------
markup:
i.
Option one
Well sold
2.0%of sale price
…
…
×2
Side by side ≥760px, stacked below. The note is pinned to the card
foot (margin-top:auto) so both cards close on the same line. */
.price-tiers{
display:grid;grid-template-columns:1fr 1fr;
gap:clamp(18px,2.4vw,40px);
margin-top:clamp(30px,4vw,56px);
}
.price-tier{
position:relative;
border:1px solid var(--line);
padding:clamp(26px,3.4vw,52px) clamp(22px,3vw,46px);
display:flex;flex-direction:column;
}
.price-tier .tier-no{font-family:var(--serif);font-size:clamp(20px,2vw,28px);color:var(--umber);line-height:1}
.price-tier .tier-label{
font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:var(--ink-60);margin-top:clamp(12px,1.4vw,18px);
}
.price-tier .tier-name{
font-family:var(--serif);font-weight:400;
font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.005em;
color:var(--ink);margin-top:8px;
}
.price-tier .tier-rate{
margin-top:clamp(18px,2.4vw,30px);
padding-top:clamp(16px,2vw,26px);
border-top:1px solid var(--line-soft);
}
.price-tier .rate{
display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(56px,6.4vw,104px);line-height:.95;letter-spacing:-.02em;
color:var(--ink);font-variant-numeric:tabular-nums;
}
.price-tier .rate em{font-style:normal;font-size:.46em}
.price-tier .rate-of{
display:block;margin-top:10px;
font-family:var(--caps);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-60);
}
.price-tier .tier-line{
margin-top:clamp(16px,2vw,24px);margin-bottom:clamp(18px,2.4vw,30px);
font-size:15px;line-height:1.7;color:var(--ink-80);max-width:44ch;
}
.price-tier .tier-note{
margin-top:auto;
padding-top:clamp(16px,2vw,24px);
border-top:1px solid var(--line-soft);
font-family:var(--caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-60);line-height:1.8;
}
@media (max-width:760px){
.price-tiers{grid-template-columns:1fr;gap:16px}
}
/* ---------- W4.2 · .price-table : grouped hairline comparison rows ----------
markup:
Well sold · 2.0%Seen first · 2.5%
i.What gets made about your home
Row nameone-line sub◆·Well sold · Seen first
…
Ticks are text glyphs, never icon fonts. ≤600px the tick columns and
header vanish and each row shows .pt-tags (Cinzel micro-labels naming
the options that include it) — stacked, no horizontal scroll. */
.price-table{margin-top:clamp(30px,4vw,56px);border-bottom:1px solid var(--line)}
.pt-head,.pt-row{
display:grid;
grid-template-columns:1fr clamp(112px,13vw,170px) clamp(112px,13vw,170px);
gap:clamp(10px,1.8vw,30px);
align-items:center;
}
.pt-head{padding-bottom:14px;border-bottom:1px solid var(--line);align-items:end}
.pt-h{
font-family:var(--caps);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-80);text-align:center;line-height:1.7;
}
.pt-group{
display:flex;align-items:baseline;gap:clamp(10px,1.4vw,16px);
padding:clamp(26px,3.4vw,44px) 0 12px;
}
.pt-group .g-no{font-family:var(--serif);font-size:clamp(18px,1.8vw,26px);color:var(--umber);line-height:1}
.pt-group .g-name{
font-family:var(--caps);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-80);line-height:1.7;
}
.pt-row{padding:clamp(13px,1.7vw,19px) 0;border-top:1px solid var(--line-soft)}
.pt-feat b{
display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(17px,1.7vw,22px);line-height:1.3;color:var(--ink);
}
.pt-feat .pt-sub{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--ink-60);max-width:52ch}
.pt-cell{text-align:center}
.pt-cell .tick{color:var(--umber);font-size:11px;line-height:1}
.pt-cell .no-tick{display:inline-block;width:12px;height:1px;background:var(--ink-40);vertical-align:middle;overflow:hidden;color:transparent;font-size:0;line-height:0}
.pt-tags{display:none}
@media (max-width:600px){
.pt-head{display:none}
.pt-cell{display:none}
.pt-row{grid-template-columns:1fr;gap:0;padding:15px 0}
.pt-tags{
display:block;margin-top:8px;
font-family:var(--caps);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-60);line-height:1.7;
}
.pt-tags::before{content:"◆ ";color:var(--umber);font-size:8.5px}
.pt-group{padding:26px 0 4px}
}
/* ---------- W4.3 · .arc-3 numbered variant (Seen first unlocks) ----------
markup:
i. …
The figure bleeds to the card border (negative margins cancel the card
padding). The rate block notches up over the image's bottom edge on a
paper panel flush with the card's left border. Collapses cleanly at any
width because every offset is derived from the same card-padding clamps. */
.price-tier .tier-media{
margin:calc(-1*clamp(26px,3.4vw,52px)) calc(-1*clamp(22px,3vw,46px)) 0;
overflow:hidden;
}
.price-tier .tier-media img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.price-tier .tier-rate.over{
position:relative;z-index:2;
align-self:flex-start;
margin-top:calc(-1*clamp(30px,3.8vw,58px));
margin-left:calc(-1*clamp(22px,3vw,46px));
padding:clamp(12px,1.6vw,20px) clamp(20px,2.6vw,36px) 0 clamp(22px,3vw,46px);
background:var(--paper);
border-top:0;
}
.price-tier .tier-media~.tier-no{margin-top:clamp(16px,2vw,26px)}
.price-tier .tier-kicker{
font-family:var(--caps);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--umber);margin-top:10px;line-height:1.7;
}
/* ---------- W4.5 · .pt-proof : the viewing-log artifact under group iii ----------
markup:
Rail is shorter than the copy, so sticky goes on the RAIL (arc-3-wrap's
.arc-copy inversion is not needed here). */
.work-wrap{
display:grid;grid-template-columns:1fr;
gap:clamp(28px,4vw,56px);align-items:start;
}
.work-wrap .diff-grid{grid-template-columns:1fr;margin-top:clamp(26px,3vw,44px)}
.work-wrap .work-rail{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.work-wrap .work-rail figure{margin:0}
.work-wrap .work-rail img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.work-wrap .work-rail figcaption{
margin-top:12px;font-family:var(--serif);font-style:italic;
font-size:15px;line-height:1.55;color:var(--ink-60);
}
@media (min-width:900px){
.work-wrap{grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,84px)}
.work-wrap .work-rail{position:sticky;top:10vh}
}
/* ---------- W4.7 · .unlock-3 : visual three-up (Seen first unlocks) ----------
markup:
01…
…
…
Your homeFirst in the results ×2
…
Cell 03 carries the typographic ledger device instead of a photo:
three hairline rows, the top one in umber. Abstract, never a portal UI. */
.unlock-3{
list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,3vw,44px);
}
.unlock-3 li{position:relative;border-top:1px solid var(--line);padding-top:clamp(16px,2vw,26px)}
.unlock-3 li::before{
content:"";position:absolute;left:0;top:-3.5px;
width:6px;height:6px;border-radius:50%;background:var(--umber);
}
.unlock-3 figure{margin:0 0 clamp(14px,1.8vw,22px);overflow:hidden}
.unlock-3 figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.unlock-3 .u-no{
display:block;font-family:var(--serif);font-size:clamp(18px,1.8vw,24px);
color:var(--umber);line-height:1;margin-bottom:10px;
}
.unlock-3 b{
display:block;font-family:var(--serif);font-weight:400;
font-size:clamp(20px,2vw,28px);line-height:1.15;color:var(--ink);
}
.unlock-3 p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--ink-60);max-width:34ch}
.unlock-3 .ledger{
aspect-ratio:16/9;
border:1px solid var(--line);
background:var(--paper-hi);
box-shadow:0 20px 54px rgba(27,23,18,.08);
margin:0 0 clamp(14px,1.8vw,22px);
padding:clamp(14px,1.8vw,24px) clamp(16px,2vw,26px) clamp(10px,1.4vw,18px);
display:flex;flex-direction:column;
}
.unlock-3 .ledger .lg-head{
font-family:var(--caps);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
/* --ink-40 is a hairline value (2.99:1). These two are the only places it
carried words a reader has to make out, so they take --ink-60 (5.2:1).
Audit 2026-09-01, finding H1. */
color:var(--ink-60);line-height:1.6;
padding-bottom:clamp(8px,1vw,12px);
}
.unlock-3 .ledger .lg-row{
flex:1;min-height:0;
display:flex;align-items:center;gap:14px;
border-top:1px solid var(--line-soft);
font-family:var(--caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
line-height:1.5;
}
.unlock-3 .ledger .lg-top{
flex:1.3;
color:#7A5C3F;
border-top:1px solid color-mix(in srgb, var(--umber) 45%, transparent);
}
.unlock-3 .ledger .lg-dia{font-style:normal;font-size:10px;line-height:1;color:var(--umber)}
.unlock-3 .ledger .lg-name{font-weight:500;white-space:nowrap}
.unlock-3 .ledger .lg-tag{
margin-left:auto;font-size:9px;letter-spacing:.16em;
color:var(--ink-60);white-space:nowrap;
}
.unlock-3 .ledger .lg-bar{height:6px;background:color-mix(in srgb, var(--ink) 9%, transparent)}
.unlock-3 .ledger .lg-bar+.lg-bar{margin-left:auto}
@media (max-width:820px){
.unlock-3{grid-template-columns:1fr;gap:30px}
.unlock-3 p{max-width:52ch}
}
/* ---------- end wave 4 block ---------- */
/* ---- A11Y GATE FIXES (pre-launch) ---- */
@media (prefers-reduced-motion:reduce){.scrollcue::after{animation:none}}
.warm-band .cap{background:linear-gradient(to top, rgba(38,28,16,.78), rgba(38,28,16,.30) 55%, transparent)}
.hero-eyebrow,html.webgl-hero .hero-eyebrow{text-shadow:0 1px 3px rgba(10,7,4,.75), 0 2px 14px rgba(10,7,4,.4)}
.stat-display .stat-n{margin-top:auto}
.log-card .redact{white-space:nowrap}
form[data-wa] textarea{resize:none;min-height:64px}
/* ---- TECH FOUNDATIONS (landmarks + skip link) ---- */
main{display:block}
.skip-link{position:fixed;top:18px;left:18px;z-index:300;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%);padding:0;background:var(--paper-hi);color:var(--ink);border:1px solid var(--line);border-radius:999px;font-family:var(--caps);font-size:11px;letter-spacing:.22em;text-transform:uppercase;box-shadow:0 12px 32px rgba(27,23,18,.16)}
.skip-link:focus-visible{width:auto;height:auto;overflow:visible;clip-path:none;padding:12px 22px;outline:2px solid var(--umber);outline-offset:3px}
/* ===================== WAVE 5 BLOCK =====================
1) First-paint note: the load curtain + hero intro were retimed in
izanami.js (0.45s power3.out uncover starting immediately; hero image
no longer opacity-faded; split headings render unsplit until fonts
settle instead of being hidden). No CSS change was needed for that —
.pt keeps its default transform:scaleY(0) so pre-JS / no-JS / ?shot
paints are never covered.
2) Clickability affordances (meeting decision 4): sub-page links must
read unmistakably clickable, on touch as well as pointer. Everything
stays in the ivory/hairline register — ink hairlines, paper tints,
existing radii only. */
/* (a) .viewlink — persistent affordance: a hairline underline (offset, on
the label text) plus a small trailing arrow that nudges right on hover.
Both are visible at rest so touch devices get the affordance too. */
.viewlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
text-decoration-color:color-mix(in srgb, var(--ink) 34%, transparent);
transition:text-decoration-color .4s ease}
.viewlink:hover{text-decoration-color:var(--ink)}
.viewlink::after{content:"\2192";font-family:var(--sans);font-size:14px;line-height:1;
transform:translateX(0);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.viewlink:hover::after{transform:translateX(6px)}
/* (b) .chapters-index rows — the whole row is the link. Default state keeps
the nested .viewlink arrow visible (reads as a link before hover); hover
adds a paper-hi tint behind the row (the existing padding-left slide and
.ln growth remain) and slides the arrow. .ci-row already transitions
`background`, so the tint eases in/out. */
.chapters-index .ci-row:hover{background:var(--paper-hi)}
.chapters-index .ci-row:hover .viewlink::after{transform:translateX(6px)}
.chapters-index .ci-row:hover .viewlink{text-decoration-color:var(--ink)}
/* (c) .btn-quiet — quiet bordered button for INTERNAL links.
Contract: same shape/padding as .cta-btn (999px pill, 14px 30px, Cinzel
caps 12px/.2em) but inverted register — 1px ink hairline on paper, ink
text; hover swaps to ink fill / ivory text. Use for secondary journeys,
e.g. See how I sell a home.
Sits beside .cta-btn (solid ink = primary) without competing. */
.btn-quiet{display:inline-flex;align-items:center;gap:12px;font-family:var(--caps);font-size:12px;
letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--paper);
border:1px solid var(--ink);border-radius:999px;padding:14px 30px;
transition:background .4s ease,color .4s ease}
.btn-quiet:hover{background:var(--ink);color:var(--paper-hi)}
/* (d) touch devices: hover styling is inert there, but nothing above is
hover-gated — underline + arrows render at rest, so the affordance holds. */
/* ---------- end wave 5 block ---------- */
/* ---------- discretion register: delayed FAB (audit move 8) ----------
Pages whose carries .fab-delay (prime, legacy) keep the WhatsApp
FAB hidden at load; izanami.js adds .fab-on once the reader has scrolled
past ~one viewport, and it fades/rises in. Still modes (?shot, reduced
motion, no-JS) show it immediately. Pages without the class are
untouched — base .wa-fab rules apply as before. */
body.fab-delay .wa-fab{
opacity:0;transform:translateY(14px);pointer-events:none;
animation:none; /* cancel the base wa-in entrance */
transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,color .4s ease,border-color .4s ease;
}
body.fab-delay .wa-fab.fab-on{opacity:1;transform:translateY(0);pointer-events:auto}
body.fab-delay .wa-fab.fab-on:hover,
body.fab-delay .wa-fab.fab-on:focus-visible{transform:translateY(-3px)}
/* still modes: visible from first paint */
html.shot body.fab-delay .wa-fab,
html.no-js body.fab-delay .wa-fab{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
body.fab-delay .wa-fab{opacity:1;transform:none;pointer-events:auto}
}
/* ============================================================
TAP TARGETS · tel links (audit 2026-09-01, finding M2)
The number rendered 104x17 on a phone. 44px is the minimum a
finger can reliably hit, and this is the single action the
oldest visitors are most likely to want.
============================================================ */
a[href^="tel:"]{display:inline-block;min-height:44px;padding:12px 0;line-height:20px}
.foot-social a,.addr a[href^="tel:"]{vertical-align:top}
/* ============================================================
PRINT (audit 2026-09-01, finding C2)
Body copy is opacity:0 until a ScrollTrigger adds .in. Print
never scrolls, so before this block every page printed blank:
the pricing page produced 14 empty A4 sheets. The site already
had the mechanism (STILL mode, ?shot) but it was never wired
to the printer.
============================================================ */
@media print{
/* 1 · everything the motion layer hides, made visible */
.rv,.reveal,.split,.hero-title,.linemask,.ground-strip,
.rv-2,.rv-3,.rv-4,.pc-fig,.log-card,figure,section,article{
opacity:1!important;transform:none!important;clip-path:none!important;
filter:none!important;visibility:visible!important;
}
.ln-in,.linemask>span,.w{transform:none!important;opacity:1!important}
/* 2 · ink and paper. Cream backgrounds waste toner and grey text
on white is harder to read than it looks on screen. */
:root{--paper:#fff;--paper-hi:#fff;--paper-2:#fff;--mist:#fff;
--ink:#000;--ink-80:#1a1a1a;--ink-60:#333;--ink-40:#555;
--umber:#5a4630;--line:#bbb;--line-soft:#ddd}
html,body{background:#fff!important;color:#000!important;font-size:11pt;line-height:1.5}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact;
box-shadow:none!important;text-shadow:none!important}
/* 3 · screen furniture that means nothing on paper */
.nav,.nav-wrap,.mobile-menu,.menu-btn,.wa-fab,.scrollcue,.skip-link,
.film-feat,[data-film],video,.play-ring,.hero-mist,.hero-fog,
.foot-word,.foot-social,.ambient,.loop,canvas{display:none!important}
/* 4 · the hero is a full-screen image on screen; on paper it is a title */
.hero{min-height:0!important;height:auto!important;padding:0 0 18pt!important;
background:none!important;color:#000!important}
.hero-media,.hero .bg{display:none!important}
.hero-title{color:#000!important;font-size:24pt!important;line-height:1.1!important}
/* 5 · keep related things on one sheet */
h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}
figure,.log-card,.tier,.pt-row,.fq,.bench-row,.promise-row,li{
break-inside:avoid;page-break-inside:avoid}
img{max-width:100%!important;height:auto!important}
/* 6 · a reader holding the paper still needs to reach her */
a[href^="tel:"],a[href*="wa.me"]{min-height:0;padding:0}
main::after{
content:"jessinchua.sg · +65 8959 3313 · Jessin Chua · PropNex Realty · CEA R066020B";
display:block;margin-top:16pt;padding-top:8pt;border-top:1pt solid #bbb;
font-family:var(--sans);font-size:8.5pt;color:#333}
}
/* ---- print-only fee sheet (pricing.html) ---- */
.fee-sheet{display:none}
@media print{
/* the screen page is replaced by the sheet, not appended to */
.has-fee-sheet main > section:not(.fee-sheet),
.has-fee-sheet > header.page-top,
.has-fee-sheet > footer{display:none!important}
.has-fee-sheet main::after{content:none}
.fee-sheet{display:block!important;font-family:var(--sans);color:#000}
.fs-brand{font-family:var(--caps);font-size:8.5pt;letter-spacing:.18em;
text-transform:uppercase;color:#5a4630;margin:0 0 14pt}
.fs-title{font-family:var(--serif);font-weight:400;font-size:26pt;line-height:1.08;
margin:0 0 8pt;color:#000}
.fs-sub{font-size:10pt;line-height:1.5;margin:0 0 16pt;max-width:34em;color:#222}
.fs-tiers{display:flex;gap:14pt;margin-bottom:16pt}
.fs-tier{flex:1;border:0.6pt solid #999;padding:10pt 11pt}
.fs-pc{font-family:var(--serif);font-size:22pt;line-height:1;margin:0}
.fs-nm{font-family:var(--caps);font-size:8pt;letter-spacing:.13em;text-transform:uppercase;
color:#5a4630;margin:4pt 0 6pt}
.fs-ds{font-size:9pt;line-height:1.45;margin:0;color:#222}
.fs-tbl{width:100%;border-collapse:collapse;font-size:9.5pt;margin-bottom:16pt}
.fs-tbl th{text-align:left;font-family:var(--caps);font-size:7.5pt;letter-spacing:.12em;
text-transform:uppercase;color:#444;border-bottom:0.8pt solid #000;padding:0 6pt 5pt 0;font-weight:400}
.fs-tbl th:nth-child(2),.fs-tbl th:nth-child(3),
.fs-tbl td:nth-child(2),.fs-tbl td:nth-child(3){text-align:center;width:16%}
.fs-tbl td{padding:5pt 6pt 5pt 0;border-bottom:0.4pt solid #ccc;color:#111}
.fs-tbl td:nth-child(2),.fs-tbl td:nth-child(3){color:#5a4630}
.fs-qh{font-family:var(--serif);font-weight:400;font-size:13pt;margin:0 0 8pt;color:#000}
.fs-qa{margin:0 0 16pt;max-width:40em}
.fs-qa dt{font-size:9.5pt;font-weight:600;margin-top:8pt;color:#000}
.fs-qa dd{font-size:9.5pt;line-height:1.45;margin:2pt 0 0;color:#222}
.fs-foot{border-top:0.6pt solid #999;padding-top:7pt;font-size:8.5pt;color:#444;margin:0}
.fee-sheet,.fs-tiers,.fs-tbl,.fs-qa{break-inside:avoid;page-break-inside:avoid}
/* the sheet is meant to be one sheet: kill inherited page padding so the
content box matches the printable area and nothing spills to a second leaf */
body.has-fee-sheet,body.has-fee-sheet main,body.has-fee-sheet .fee-sheet{
padding:0!important;margin:0!important;min-height:0!important}
body.has-fee-sheet .fee-sheet > *:last-child{margin-bottom:0!important}
}
/* The floating WhatsApp button sat outside every landmark, so a screen-reader
user moving by landmark never reached the one control that is always on
screen. The wrapper is a labelled complementary region; it is not a
containing block, so the button's position:fixed is untouched.
Audit 2026-09-01, finding L3. */
.wa-fab-wrap{position:static;margin:0;padding:0;border:0;line-height:0}
/* ---- the three answers, beside the price (finding H3) ---- */
.fee-qa{margin-top:clamp(34px,4.5vw,60px);padding-top:clamp(24px,3vw,36px);
border-top:1px solid var(--line)}
.fee-qa .eyebrow{margin-bottom:clamp(16px,2vw,24px)}
.fee-qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.fee-qa-grid h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,20px);
line-height:1.25;color:var(--ink);margin-bottom:8px}
.fee-qa-grid p{font-size:15px;line-height:1.7;color:var(--ink-60);margin:0}
.fee-qa-more{margin-top:clamp(18px,2.2vw,26px);font-family:var(--caps);font-size:11px;
letter-spacing:.18em;text-transform:uppercase}
.fee-qa-more a{color:var(--umber);text-decoration:none;border-bottom:1px solid var(--line)}
.fee-qa-more a:hover{border-bottom-color:var(--umber)}
@media (max-width:820px){
.fee-qa-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,26px)}
}
/* ============================================================
CONTACT BAR (audit 2026-09-01, finding H3)
The only way to reply sat at the very bottom of pages running 13 to 15
phone-screens. This follows the reader instead. It appears once she is
past the hero and hides again over the footer, where the real CTA lives,
so the two never argue.
Selling, Landed and Pricing only. /prime and /legacy keep the
by-appointment register, where a bar that follows you down the page is
the wrong manner. That was a written stance, not an oversight.
============================================================ */
.contact-bar{
position:fixed;left:0;right:0;bottom:0;z-index:40;
background:color-mix(in srgb, var(--paper-hi) 94%, transparent);
backdrop-filter:saturate(120%) blur(10px);
border-top:1px solid var(--line);
transform:translateY(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
padding-bottom:env(safe-area-inset-bottom);
}
.contact-bar.cb-on{transform:none}
.cb-in{width:min(100% - 2*var(--gut), var(--maxw));margin-inline:auto;
display:flex;align-items:center;gap:clamp(12px,2vw,22px);
padding:11px 0;min-height:60px}
.cb-line{font-size:15px;line-height:1.4;color:var(--ink-80);flex:1;min-width:0}
.cb-go,.cb-tel{
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--caps);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
text-decoration:none;white-space:nowrap;min-height:44px;padding:0 20px;border-radius:999px;
}
.cb-go{background:var(--ink);color:var(--paper-hi);transition:background .3s}
.cb-go:hover{background:var(--umber)}
.cb-tel{color:var(--ink);border:1px solid var(--line);padding:0 16px}
.cb-tel:hover{border-color:var(--umber);color:var(--umber)}
/* The floating button and the bar must never stack on top of each other.
!important is load-bearing here: .wa-fab carries `animation:wa-in .55s .8s both`,
and a filled animation outranks a normal declaration in the cascade. Only an
important declaration wins, so this is deliberate rather than lazy. */
body.cb-visible .wa-fab{opacity:0!important;pointer-events:none;transition:opacity .3s}
@media (max-width:560px){
.cb-line{font-size:14px}
.cb-in{gap:10px;padding:9px 0}
.cb-go{padding:0 14px;font-size:10.5px}
.cb-tel{padding:0 13px;font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.contact-bar{transition:none}}
@media print{.contact-bar{display:none!important}}
