(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{color:var(--ink-40);font-size:16px;line-height:1}
.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:
