@font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:'InterV';src:url('../fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}:root{--bg:#ffffff;--surface:#f4f2ef;--card:#ffffff;--ink:#191413;--muted:#5c534e;--line:#e6e0da;--pink:#b03a63;--pink-deep:#8a2549;--pink-soft:#fbecf0;--teal:#148075;--teal-soft:#e3f2ee;--shadow:0 1px 2px rgba(20,23,28,.05),0 18px 40px -22px rgba(20,23,28,.22);--r:16px;--r-pill:999px;--font-display:'Fraunces',Georgia,serif;--font-body:'InterV',system-ui,-apple-system,sans-serif;--hd:72px}:root[data-theme="dark"]{--bg:#12100f;--surface:#1c1917;--card:#201c1a;--ink:#f0eae6;--muted:#a89e98;--line:#332d29;--pink:#e07a9c;--pink-deep:#ef9cb7;--pink-soft:#2c1620;--teal:#4fc9b8;--teal-soft:#123330;--shadow:0 1px 2px rgba(0,0,0,.4),0 22px 48px -24px rgba(0,0,0,.6)}:root[data-theme="light"]{--bg:#ffffff;--surface:#f4f2ef;--card:#ffffff;--ink:#191413;--muted:#5c534e;--line:#e6e0da;--pink:#b03a63;--pink-deep:#8a2549;--pink-soft:#fbecf0;--teal:#148075;--teal-soft:#e3f2ee;--shadow:0 1px 2px rgba(20,23,28,.05),0 18px 40px -22px rgba(20,23,28,.22)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.07;letter-spacing:-.015em;text-wrap:balance;margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pink);outline-offset:2px}.btn:focus-visible{outline-offset:3px;box-shadow:0 0 0 4px var(--pink-soft)}summary:focus{outline:none}summary:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}::selection{background:var(--pink-soft);color:var(--pink-deep)}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;font-size:.86rem}.skip:focus{left:0}.wrap{max-width:1120px;margin:0 auto;padding:0 24px}.narrow{max-width:820px}.ey{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-deep);margin:0 0 14px}.ey.teal{color:var(--teal)}.sec{padding:clamp(22px,3vw,42px) 0}.sec.tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sec-h{margin:0 0 clamp(14px,2vw,24px);position:relative}.sec-h.center{text-align:center;margin-inline:auto;max-width:60ch}.sec-h h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:10px;letter-spacing:-.02em}.sec-h h2 em{font-style:italic;font-weight:500;color:var(--pink-deep)}.sec-h p{color:var(--muted);margin:0;font-size:1.02rem}.sec-h.center .ey{display:inline-flex;align-items:center;gap:14px;margin-inline:auto;padding:0 2px}.sec-h.center .ey::before,.sec-h.center .ey::after{content:"";display:inline-block;width:clamp(16px,3vw,44px);height:1.5px;background:var(--pink);opacity:.55}.sec-h:not(.center) .ey{display:inline-flex;align-items:center;gap:12px}.sec-h:not(.center) .ey::before{content:"";display:inline-block;width:22px;height:2px;background:var(--pink)}.sec.tint{position:relative;overflow:hidden}.sec.tint::before{content:"H";position:absolute;top:-40px;right:-14px;font-family:var(--font-display);font-weight:700;font-size:280px;line-height:.85;color:var(--pink);opacity:.045;pointer-events:none;letter-spacing:-.03em}@media(max-width:760px){.sec.tint::before{display:none}}:root[data-theme="dark"] .sec.tint::before{opacity:.06;color:var(--teal)}.final,.trust,.hd,.ft{position:static}.final::before,.trust::before,.hd::before,.ft::before{display:none}.body{max-width:66ch;margin-inline:auto}.body p{color:var(--muted);font-size:1.05rem;line-height:1.75}.body p+p{margin-top:1.1em}.body ul{color:var(--muted);font-size:1.02rem;line-height:1.7;padding-left:22px;margin:1em 0}.body ul li{margin-bottom:.35em}.body ul li b,.body p b{color:var(--ink);font-weight:600}.body a{color:var(--pink-deep);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.body a:hover{color:var(--pink)}.body.mid{text-align:center}.body.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);max-width:78ch}@media(max-width:640px){}.body.chapters{display:grid;gap:22px}.body.chapters .chapter{position:relative}.body.chapters .chapter p{margin:0}.body.chapters .chapter.drop p::first-letter{font-family:var(--font-display);font-weight:700;font-size:4.1em;color:var(--pink);float:left;line-height:.85;padding:.08em .12em 0 0;margin-top:-.02em}.body.chapters .chapter.drop p::first-line{font-variant:small-caps;letter-spacing:.02em;color:var(--ink);font-weight:500}.body.chapters .chapter:not(.drop) p::before{content:"\00A7";color:var(--pink);font-family:var(--font-display);font-weight:700;font-size:1.15em;margin-right:.5em;vertical-align:-.05em}.body.chapters .chapter+.chapter{padding-top:12px;background-image:radial-gradient(circle at 6px 4px,var(--pink) 1.5px,transparent 1.5px),radial-gradient(circle at 16px 4px,var(--pink) 1.5px,transparent 1.5px),radial-gradient(circle at 26px 4px,var(--pink) 1.5px,transparent 1.5px);background-repeat:no-repeat;background-position:0 0;background-size:auto 8px}@media(max-width:640px){.body.chapters .chapter.drop p::first-letter{font-size:3.4em}}.intro-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);align-items:start}@media(max-width:820px){.intro-split{grid-template-columns:1fr;gap:24px}}.intro-split .body{max-width:none;margin:0}.callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,30px);position:sticky;top:calc(var(--hd) + 14px)}@media(max-width:820px){.callout{position:static}}.callout .ey{margin-bottom:14px}.callout h3{font-size:1.2rem;margin:0 0 14px}.callout ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}.callout li{position:relative;padding-left:26px;font-size:.93rem;color:var(--muted);line-height:1.45}.callout li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:5px;background:var(--teal-soft)}.callout li::after{content:"";position:absolute;left:5px;top:7.5px;width:5px;height:8px;border:2px solid var(--teal);border-top:0;border-left:0;transform:rotate(42deg)}.callout .btn{width:100%;justify-content:center}.callout .callout-note{font-size:.8rem;color:var(--muted);margin:12px 0 0;text-align:center}.btn{border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:.92rem;padding:15px 26px;border-radius:var(--r-pill);transition:transform .18s,background .18s,border-color .18s,color .18s;display:inline-flex;align-items:center;gap:9px}.btn-p{background:var(--pink-deep);color:#fff;box-shadow:0 10px 26px -12px var(--pink-deep)}.btn-p:hover{background:var(--pink);box-shadow:0 12px 30px -12px var(--pink);transform:translateY(-2px)}.btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn-o:hover{border-color:var(--pink);color:var(--pink)}.btn-g{background:var(--teal-soft);color:var(--teal);font-weight:600}.cta{display:flex;gap:12px;flex-wrap:wrap}.stars{color:var(--teal);letter-spacing:2px;display:inline-flex;gap:1px;align-items:center}.stars .star{position:relative;display:inline-block;line-height:1;font-family:inherit}.stars .star.empty{color:color-mix(in srgb,var(--teal) 35%,transparent)}.stars .star.half{width:1em;overflow:hidden}.stars .star.half .star-out{color:color-mix(in srgb,var(--teal) 35%,transparent)}.stars .star.half .star-fill{position:absolute;left:0;top:0;width:55%;overflow:hidden;color:var(--teal)}.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}.brand{display:inline-flex;align-items:center;line-height:0}.brand img{display:block;height:48px;width:auto;max-width:100%}.ft-brand-a img{height:64px}@media(max-width:760px){.brand img{height:38px}}.nav{display:flex;gap:26px;font-size:.86rem;font-weight:500;color:var(--muted);align-items:center}.nav>a:hover{color:var(--ink)}.nav-item.has-drop{position:relative;display:inline-flex;align-items:center;gap:2px}.nav-plain-link{color:var(--muted);transition:color .18s}.nav-item.has-drop:hover .nav-plain-link,.nav-plain-link:hover,.nav-plain-link:focus-visible{color:var(--ink)}.nav-drop-btn{background:transparent;border:0;padding:8px 10px;cursor:pointer;font:inherit;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;transition:color .18s;border-radius:4px}.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--ink)}.nav-drop-btn .caret{font-size:.7em;transition:transform .18s;line-height:1}.nav-drop-btn[aria-expanded="true"] .caret,.nav-item.has-drop:hover .nav-drop-btn .caret{transform:rotate(180deg)}.nav-drop{position:absolute;top:calc(100% + 14px);left:-14px;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:41}.nav-item.has-drop:hover .nav-drop,.nav-item.has-drop:focus-within .nav-drop,.nav-drop.open{opacity:1;visibility:visible;transform:none}.nav-drop-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}.nav-drop-list.two-col{grid-template-columns:1fr 1fr;gap:2px 6px;min-width:340px}.nav-drop-list a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink);font-size:.9rem;font-weight:500;transition:background .15s,color .15s}.nav-drop-list a:hover,.nav-drop-list a:focus-visible{background:var(--pink-soft);color:var(--pink-deep);outline:none}.nav-drop-list .di{font-size:.95rem;line-height:1;width:22px;text-align:center}.nav-drop-all{display:block;margin-top:6px;padding:10px 12px;border-top:1px solid var(--line);color:var(--pink);font-size:.82rem;font-weight:600;transition:color .18s}.nav-drop-all:hover{color:var(--pink-deep)}.hd-r{display:flex;align-items:center;gap:16px}.hd-tel{font-size:.86rem;font-weight:600;letter-spacing:.01em}.pill{background:var(--pink-deep);color:#fff;padding:9px 18px;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;transition:transform .18s,background .18s}.pill:hover{background:var(--pink);transform:translateY(-1px)}.menu-btn{display:none;background:transparent;border:0;color:var(--ink);font-size:1.4rem;cursor:pointer;width:44px;height:44px;place-items:center;margin-right:-10px}@media(max-width:760px){.hd-tel{display:none}.hd .pill{display:none}.menu-btn{display:grid}html.js .nav{display:none}html.js .nav.open{display:flex;position:fixed;top:72px;left:0;right:0;z-index:39;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 0;box-shadow:var(--shadow);max-height:calc(100vh - 72px);overflow-y:auto}.nav.open>a,.nav.open .nav-item{padding:0;border-top:1px solid var(--line)}.nav.open>a{padding:14px 24px;font-size:1rem}.nav.open>a:first-child,.nav.open .nav-item:first-child{border-top:0}.nav.open .nav-item.has-drop{display:flex;flex-wrap:wrap;align-items:stretch}.nav.open .nav-plain-link{display:block;flex:1;padding:14px 24px;font-size:1rem;font-weight:600;color:var(--ink)}.nav.open .nav-drop-btn{display:flex;align-items:center;justify-content:center;width:56px;padding:0;color:var(--pink);background:var(--pink-soft);border-left:1px solid var(--line);border-radius:0}.nav.open .nav-drop-btn .caret{font-size:1.1rem;font-weight:700}.nav.open .nav-drop-btn[aria-expanded="true"]{background:var(--pink);color:#fff}.nav.open .nav-drop{position:static;flex-basis:100%;min-width:0}.nav.open .nav-drop-list{gap:0}.nav.open .nav-drop-list.two-col{grid-template-columns:1fr 1fr;min-width:0}.nav.open .nav-drop-list a{padding:11px 14px;font-size:.94rem;font-weight:500}.nav.open .nav-drop-all{padding:12px 14px;font-size:.86rem;border-top:1px solid var(--line);margin-top:4px}}.crumb{font-size:.78rem;color:var(--muted);padding:16px 0 0}.crumb a{display:inline-block;padding:4px 0}.crumb a:hover{color:var(--pink)}.crumb .sep{opacity:.5;margin:0 7px}.hero{padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px)}.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}@media(max-width:840px){.hero .wrap{grid-template-columns:1fr;gap:34px}}.hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem);margin-bottom:18px}.hero h1 .u{background:linear-gradient(transparent 68%,var(--teal-soft) 0);padding:0 .04em}.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:42ch;margin:0 0 22px}.rating{display:flex;align-items:center;gap:10px;margin:0 0 26px;font-size:.92rem;color:var(--muted)}.rating .stars{font-size:1rem}.rating b{color:var(--ink)}.hero-note{margin:16px 0 0;font-size:.82rem;color:var(--muted)}.m-hero{padding:8px 0 clamp(28px,4vw,44px)}.m-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:center}@media(max-width:840px){.m-hero .wrap{grid-template-columns:1fr;gap:26px}}.m-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:6px 0 14px}.m-lead{font-size:1.08rem;color:var(--muted);max-width:42ch;margin:0 0 18px}.m-rate,.c-rate,.rate{display:inline-flex;align-items:center;gap:9px;background:var(--teal-soft);color:var(--ink);padding:8px 15px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;margin:0 0 20px;text-decoration:none;transition:background .18s,transform .18s}.m-rate:hover,.c-rate:hover,.rate:hover{background:color-mix(in srgb,var(--teal-soft) 60%,var(--teal) 12%);transform:translateY(-1px)}.m-rate .stars,.c-rate .stars,.rate .stars{font-size:.95rem}.m-note{font-size:.82rem;color:var(--muted);margin:14px 0 0}.g-hero{padding:8px 0 clamp(30px,4vw,54px)}.g-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,58px);align-items:center}@media(max-width:840px){.g-hero .wrap{grid-template-columns:1fr;gap:30px}}.g-hero h1{font-size:clamp(2.4rem,5vw,3.7rem);margin:6px 0 16px}.answer{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.55;color:var(--ink);max-width:40ch;margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--pink);background:linear-gradient(to right,color-mix(in srgb,var(--pink-soft) 60%,transparent),transparent 90%);border-radius:0 10px 10px 0}.answer b{color:var(--pink-deep)}.g-sub{color:var(--muted);font-size:.95rem;margin:0 0 24px;max-width:46ch}.c-hero{padding:8px 0 clamp(30px,4vw,52px)}.c-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,56px);align-items:center}@media(max-width:840px){.c-hero .wrap{grid-template-columns:1fr;gap:28px}}.c-hero h1{font-size:clamp(2.3rem,4.8vw,3.6rem);margin:6px 0 14px}.c-lead{font-size:1.08rem;color:var(--muted);max-width:44ch;margin:0 0 18px}.c-rate{display:inline-flex;align-items:center;gap:9px;background:var(--teal-soft);color:var(--ink);padding:8px 15px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;margin:0 0 20px}.c-rate .stars{font-size:.95rem}@media(min-width:840px){.hero .shot,.hero .ba,.m-hero .shot,.m-hero .ba,.g-hero .shot,.g-hero .ba,.c-hero .shot,.c-hero .ba{margin-top:clamp(20px,3vw,44px)}}.ba{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);background:#0d1215;--pos:50%;touch-action:pan-y;user-select:none;-webkit-user-select:none}.ba.ratio{aspect-ratio:16/10}.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} /* The WebP wrapper must not generate a box of its own: .ba-img is absolutely positioned inside .ba, and an inline would still create a line box and shift the slider. display:contents makes the wrapper vanish from layout while the negotiation still happens. */ .ba picture{display:contents}.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:1}.ba-after{z-index:0}.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}.ba-range::-webkit-slider-runnable-track{height:100%;background:transparent}.ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:100%;cursor:ew-resize;background:transparent}.ba-range::-moz-range-track{height:100%;background:transparent}.ba-range::-moz-range-thumb{width:44px;height:100%;cursor:ew-resize;border:0;background:transparent}.ba-range:focus-visible~.ba-handle::before{outline:3px solid var(--pink);outline-offset:3px}.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);z-index:2;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.45)}.ba-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--pink);box-shadow:0 8px 22px -6px rgba(0,0,0,.5)}.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:10px;background:linear-gradient(to right,transparent 0,transparent 3px,#fff 3px,#fff 5px,transparent 5px,transparent 15px,#fff 15px,#fff 17px,transparent 17px,transparent 20px),linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) no-repeat 0 50% / 6px 6px,linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) no-repeat 100% 50% / 6px 6px;clip-path:polygon(0 45%,20% 0,20% 30%,80% 30%,80% 0,100% 45%,100% 55%,80% 100%,80% 70%,20% 70%,20% 100%,0 55%)}.ba-label{position:absolute;bottom:14px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);color:#fff;backdrop-filter:blur(3px);z-index:1;pointer-events:none}.ba-label.b{left:14px;background:rgba(20,23,28,.6)}.ba-label.a{right:14px;background:var(--pink-deep)}@media(max-width:640px){.ba-handle::before{width:52px;height:52px}}.shot{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}.shot img{width:100%;height:100%;object-fit:cover;display:block}.shot.ratio{aspect-ratio:16/10}.chip{position:absolute;bottom:14px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:rgba(20,23,28,.6);color:#fff;backdrop-filter:blur(3px)}.chip.b{left:14px}.chip.a{right:14px;background:var(--pink)}.sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%)}body.loaded .sweep{animation:sweep 1.5s cubic-bezier(.5,0,.2,1) .35s 1 both}@keyframes sweep{to{transform:translateX(130%)}}.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:15px 24px;font-size:.85rem;color:var(--muted)}.trust b{color:var(--ink)}.trust .d{color:var(--pink)}.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:820px){.svc-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;position:relative}.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}.svc .ic{width:42px;height:42px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center;font-size:1.15rem;margin-bottom:14px;color:var(--pink-deep)}.svc .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.svc h3{font-size:1.15rem;margin-bottom:6px}.svc p{color:var(--muted);font-size:.9rem;margin:0 0 14px;flex:1}.svc .go{font-size:.82rem;font-weight:600;color:var(--pink-deep);display:inline-flex;gap:6px;align-items:center}.svc .go span{transition:transform .2s}.svc:hover .go span{transform:translateX(4px)}.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:820px){.pick{grid-template-columns:1fr 1fr}}@media(max-width:520px){.pick{grid-template-columns:1fr}}.pk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}.pk:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}.pk .ic{width:40px;height:40px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center;font-size:1.1rem;margin-bottom:13px;color:var(--pink-deep)}.pk .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.pk h3{font-size:1.1rem;margin-bottom:5px}.pk p{color:var(--muted);font-size:.87rem;margin:0 0 16px;flex:1}.pk .go{font-size:.82rem;font-weight:600;color:var(--pink-deep);display:inline-flex;gap:6px;align-items:center}.pk .go span{transition:transform .2s}.pk:hover .go span{transform:translateX(4px)}@media(max-width:480px){}.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}.rev .s{color:var(--teal);letter-spacing:2px;font-size:.9rem;margin-bottom:10px}.rev q{font-family:var(--font-display);font-size:1.08rem;line-height:1.45;color:var(--ink);quotes:none}.rev .who{margin-top:14px;font-size:.84rem;font-weight:600;color:var(--muted)}.rev .who i{font-style:normal;color:var(--teal);font-weight:500}.mrev{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:820px){.mrev{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 24px 16px;margin-inline:-24px;gap:12px}.mrev::-webkit-scrollbar{display:none}}.mr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}@media(max-width:820px){.mr{flex:0 0 86%;scroll-snap-align:center}}.mr .s{color:var(--teal);letter-spacing:2px;font-size:.88rem;margin-bottom:9px}.mr q{font-family:var(--font-display);font-size:1.02rem;line-height:1.42;quotes:none}.mr .who{margin-top:12px;font-size:.82rem;font-weight:600;color:var(--muted)}.band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:720px){.band{grid-template-columns:1fr 1fr}}.bcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}.bcard .big{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--pink-deep);line-height:1}.bcard .big .stars{color:var(--teal);font-size:1.2rem}.bcard .lab{font-size:.8rem;color:var(--muted);margin-top:7px}@media(max-width:720px){}@media(max-width:820px){}.check{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 34px}@media(max-width:820px){.check{grid-template-columns:1fr 1fr}}@media(max-width:520px){.check{grid-template-columns:1fr}}.ck-col h3{font-size:1.02rem;margin-bottom:12px;padding-bottom:9px;border-bottom:2px solid var(--teal-soft);display:flex;align-items:center;gap:8px}.ck-col h3 .rm{font-size:1.1rem}.ck-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.ck-col li{position:relative;padding-left:26px;font-size:.92rem;color:var(--muted);line-height:1.4}.ck-col li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:5px;background:var(--teal-soft)}.ck-col li::after{content:"";position:absolute;left:5.5px;top:6px;width:5px;height:9px;border:2px solid var(--teal);border-top:0;border-left:0;transform:rotate(42deg)}.story-body{display:grid;gap:26px;max-width:none}.story-chunk{display:grid;gap:8px}.story-chunk .ey{margin:0}.story-chunk p{margin:0;font-size:1.05rem;line-height:1.7;color:var(--ink)}.story-photo{margin:0 0 clamp(28px,4vw,44px);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 40px -24px rgba(31,20,24,.18);background:var(--pink-soft)}.story-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.story-signoff{margin:22px 0 0;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.02rem;color:var(--pink-deep)}.ba-range:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}.ba-range:focus-visible+.ba-handle{box-shadow:0 0 0 3px var(--pink-soft),0 0 0 5px var(--pink)}@media(max-width:820px){main{padding-bottom:88px}.to-top,.a11y-btn{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}}.sticky{transition:transform .28s ease-out}body:not(.scrolled) .sticky{transform:translateY(105%)}@media(min-width:821px){.sticky{transform:translateY(0)!important}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}.vs-answer{max-width:60ch;margin:0 auto clamp(22px,3vw,32px);font-size:1.08rem;line-height:1.65;color:var(--ink);text-align:center}.vs-sub{color:var(--muted);font-size:.92rem;margin:0 0 14px;line-height:1.5}.vs-rule{max-width:70ch;margin:clamp(22px,3vw,30px) auto 0;color:var(--muted);font-size:.98rem;line-height:1.65;text-align:center}.vs-rule b{color:var(--ink);font-weight:600}.vs-card ul{margin-top:12px}.vs-card li{padding-left:22px}.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:820px){.loc-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.loc-grid{grid-template-columns:1fr}}.loc-card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}.loc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}.loc-pin{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--pink-soft);color:var(--pink);display:grid;place-items:center}.loc-pin svg{width:18px;height:18px;display:block}.loc-body{display:grid;gap:5px;min-width:0}.loc-body h3{font-size:1.05rem;margin:0}.loc-body p{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0}.loc-go{font-size:.78rem;font-weight:600;color:var(--pink);margin-top:6px;display:inline-flex;gap:5px;align-items:center}.loc-card:hover .loc-go span{transform:translateX(3px)}.loc-go span{transition:transform .2s;font-family:var(--font-body)}.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}@media(max-width:640px){.vs{grid-template-columns:1fr}}.vs-card{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--card)}.vs-card.hi{border-color:var(--pink);box-shadow:var(--shadow)}.vs-card .tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.vs-card.hi .tag{color:var(--pink)}.vs-card h3{font-size:1.3rem;margin-bottom:12px}.vs-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.vs-card li{font-size:.92rem;color:var(--muted);padding-left:22px;position:relative}.vs-card li::before{content:"x";position:absolute;left:4px;color:var(--muted);font-weight:600}.vs-card.hi li::before{content:"+";color:var(--pink);font-weight:700}.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:440px){.steps{grid-template-columns:1fr}}.step{position:relative;padding-top:8px}.step .n{counter-increment:s;width:38px;height:38px;border-radius:50%;background:var(--pink-soft);color:var(--pink-deep);font-family:var(--font-display);font-weight:700;display:grid;place-items:center;margin-bottom:12px}.step .n::before{content:counter(s)}.step h3{font-size:1.02rem;margin-bottom:5px}.step p{color:var(--muted);font-size:.87rem;margin:0}.cities{display:flex;flex-wrap:wrap;gap:10px}.city{border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;font-size:.9rem;font-weight:500;background:var(--card);transition:border-color .18s,color .18s,transform .18s}.city:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-1px)}.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}.q{background:var(--card);border:1px solid var(--line);border-radius:12px}.q summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px;align-items:center}.q summary::-webkit-details-marker{display:none}.q summary::after{content:"+";color:var(--pink);font-size:1.5rem;transition:transform .2s;line-height:1}.q[open] summary::after{transform:rotate(45deg)}.q .a{padding:0 22px 20px;color:var(--muted);font-size:.94rem}.imsg{max-width:440px;margin:clamp(24px,4vw,44px) auto 8px;text-align:center}.imsg-frame{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;text-align:left}.imsg-hd{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--line)}.imsg-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pink-soft),var(--teal-soft));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.95rem;line-height:1;color:var(--ink);letter-spacing:-.02em;flex:0 0 auto}.imsg-avatar b{color:var(--pink);font-weight:700}.imsg-avatar i{color:var(--teal);font-style:normal;font-weight:600;margin-left:1px}.imsg-who{display:flex;flex-direction:column;gap:2px;line-height:1.2;min-width:0}.imsg-name{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}.imsg-status{font-size:.72rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}.imsg-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 25%,transparent);animation:imsg-pulse 2s ease-in-out infinite}.imsg-body{padding:16px 14px 12px;display:flex;flex-direction:column;gap:6px;min-height:220px}.imsg-time{margin:0 0 8px;font-size:.7rem;color:var(--muted);text-align:center;font-weight:600;letter-spacing:.02em}.imsg-row{display:flex;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}.imsg-row.in{opacity:1;transform:none}.imsg-row.you{justify-content:flex-end}.imsg-row.them{justify-content:flex-start}.imsg-bubble{max-width:78%;padding:9px 14px;border-radius:20px;font-size:.94rem;line-height:1.4;word-wrap:break-word}.imsg-row.you .imsg-bubble{background:var(--pink);color:#fff;border-bottom-right-radius:6px}.imsg-row.them .imsg-bubble{background:var(--surface);color:var(--ink);border-bottom-left-radius:6px}:root[data-theme="dark"] .imsg-row.them .imsg-bubble{background:color-mix(in srgb,var(--surface) 60%,var(--line))}.imsg-row.you+.imsg-row.you .imsg-bubble{border-bottom-right-radius:20px}.imsg-row.them+.imsg-row.them:not([data-typing]) .imsg-bubble{border-bottom-left-radius:20px}.imsg-typing{display:inline-flex;gap:4px;padding:12px 16px;background:var(--surface);border-radius:20px;border-bottom-left-radius:6px}:root[data-theme="dark"] .imsg-typing{background:color-mix(in srgb,var(--surface) 60%,var(--line))}.imsg-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.4;animation:imsg-blink 1.4s ease-in-out infinite}.imsg-typing span:nth-child(2){animation-delay:.2s}.imsg-typing span:nth-child(3){animation-delay:.4s}.imsg-row[data-typing]{display:none}.imsg-row[data-typing].in{display:flex}.imsg-row[data-typing].out{display:none}.imsg-caption{margin:14px auto 0;max-width:360px;font-size:.82rem;color:var(--muted);line-height:1.5}@keyframes imsg-pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes imsg-blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.imsg-row,.imsg-row[data-typing]{opacity:1;transform:none;display:none}.imsg-row:not([data-typing]){display:flex}.imsg-dot,.imsg-typing span{animation:none}}.hm-diagram{margin:30px auto 0;max-width:780px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px}.hm-diagram:focus-visible{outline:2px solid var(--pink);outline-offset:3px}.hm-diagram svg{display:block;width:100%;min-width:560px;height:auto;border-radius:10px}.hm-diagram__cap{margin:12px 6px 4px;font-family:var(--font-body);font-size:.9rem;line-height:1.6;color:var(--muted)}:root[data-theme="dark"] .hm-diagram svg{filter:invert(.92) hue-rotate(180deg)}:root[data-theme="light"] .hm-diagram svg{filter:none}.form{max-width:640px;margin:0 auto;text-align:left}.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.field{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}.field label{font-size:.85rem;font-weight:600;color:var(--ink)}.field .opt{color:var(--muted);font-weight:400}.field-hint{font-size:.78rem;color:var(--muted);margin-top:-2px}.form input:invalid:not(:placeholder-shown){border-color:color-mix(in srgb,#c1416a 60%,var(--line))}.form input,.form select,.form textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .18s,box-shadow .18s}.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.form textarea{resize:vertical;min-height:120px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:560px){.row2{grid-template-columns:1fr}}.form .btn-p{width:100%;justify-content:center;margin-top:6px}.form-note{font-size:.85rem;color:var(--muted);margin:14px 0 0;text-align:center}.form-note a{color:var(--pink);font-weight:600}.ok{width:64px;height:64px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:1.9rem;margin:0 auto 22px}.final{padding:clamp(32px,4.2vw,58px) 0;text-align:center}.final .box{background:linear-gradient(135deg,var(--pink),var(--pink-deep));border-radius:24px;padding:clamp(38px,5vw,68px) 24px;color:#fff;position:relative;overflow:hidden}.final h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:12px}.final p{color:rgba(255,255,255,.9);max-width:42ch;margin:0 auto 24px}.final .btn-w{background:#fff;color:var(--pink-deep)}.final .btn-w:hover{transform:translateY(-2px)}.final .btn-gh{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}.final .cta{justify-content:center}.guide-cta{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--pink-soft);border:1px solid color-mix(in srgb,var(--pink) 20%,var(--line));border-radius:var(--r);padding:22px 26px;color:var(--ink);max-width:900px;margin:0 auto 30px;transition:transform .2s,box-shadow .2s,border-color .2s}.guide-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--pink)}.guide-cta-body{min-width:0}.guide-cta h3{font-size:1.15rem;margin:2px 0 6px;line-height:1.25}.guide-cta p{color:var(--muted);font-size:.9rem;margin:0 0 10px;line-height:1.5}.guide-cta-go{font-size:.82rem;font-weight:600;color:var(--pink-deep);display:inline-flex;align-items:center;gap:5px}.guide-cta-mark{font-size:2.2rem;line-height:1;flex:0 0 auto}@media(max-width:640px){.guide-cta{grid-template-columns:1fr;gap:12px;padding:20px}.guide-cta-mark{font-size:1.6rem;order:-1}}.silo-h{font-size:1.1rem;text-align:center;margin:0 0 16px}.linkset{max-width:920px;margin:0 auto}.linkset+.linkset{margin-top:30px}.linkset .cities{justify-content:center}.silo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(max-width:640px){.silo-grid{grid-template-columns:1fr}}.silo-tile{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:.92rem;font-weight:500;transition:transform .18s,border-color .18s,background .18s}.silo-tile:hover{transform:translateY(-1px);border-color:var(--pink);background:var(--surface)}.silo-tile:hover .silo-tile-go{color:var(--pink);transform:translateX(2px)}.silo-tile-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--pink-soft);color:var(--pink-deep);font-size:.72rem;line-height:1;flex:0 0 auto}.silo-tile-lbl{min-width:0}.silo-tile-go{color:var(--muted);font-size:1rem;transition:color .18s,transform .18s;line-height:1}.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:960px){.g-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.g-grid{grid-template-columns:1fr}}.g-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;color:inherit;min-height:280px}.g-card.is-live:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}.g-card.is-soon{opacity:.72}.g-card-ic{font-size:1.6rem;line-height:1;margin-bottom:14px;width:44px;height:44px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center}.g-card-body{display:flex;flex-direction:column;flex:1;gap:8px}.g-card-meta{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}.g-tag{color:var(--teal)}.g-dot{opacity:.5}.g-card h3{font-size:1.15rem;line-height:1.25;margin:0}.g-card p{color:var(--muted);font-size:.9rem;margin:0 0 auto;line-height:1.55}.g-go{margin-top:14px;font-size:.82rem;font-weight:600;color:var(--pink);display:inline-flex;gap:6px;align-items:center}.g-card.is-live:hover .g-go span{transform:translateX(4px)}.g-go span{transition:transform .2s}.g-soon{margin-top:14px;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}.g-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,4vw,54px);align-items:start}@media(max-width:900px){.g-layout{grid-template-columns:1fr;gap:24px}}.g-toc{position:sticky;top:calc(var(--hd) + 22px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}@media(max-width:900px){.g-toc{position:static}}.g-toc .ey{margin-bottom:12px}.g-toc ol{list-style:none;counter-reset:g;margin:0;padding:0;display:grid;gap:8px}.g-toc li{counter-increment:g;font-size:.86rem;line-height:1.4}.g-toc li a{color:var(--muted);display:flex;gap:9px;align-items:baseline;padding:4px 0;transition:color .18s}.g-toc li a::before{content:counter(g,decimal-leading-zero);font-family:var(--font-display);font-size:.75rem;color:var(--pink);font-weight:700;letter-spacing:.02em;flex:0 0 auto}.g-toc li a:hover{color:var(--ink)}.g-article{min-width:0;max-width:70ch}.g-section{margin:0 0 clamp(32px,4vw,50px);scroll-margin-top:calc(var(--hd) + 24px)}.g-hero.article-hero h1{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:22ch}.g-hero.article-hero .answer{font-size:clamp(1rem,1.4vw,1.15rem);max-width:52ch}.g-section h2{font-size:clamp(1.55rem,3vw,2rem);margin-bottom:16px;line-height:1.2}.g-section p{color:var(--ink);font-size:1.02rem;line-height:1.78;margin:0 0 1.1em}.g-section p+p{margin-top:.9em}.g-section p b{font-weight:600}.g-section ul,.g-section ol{color:var(--ink);font-size:1.01rem;line-height:1.75;margin:1em 0 1.4em;padding-left:22px}.g-section ul li,.g-section ol li{margin-bottom:8px}.g-section ul li b,.g-section ol li b{color:var(--pink-deep);font-weight:600}.g-related-svc{background:var(--pink-soft);border-radius:var(--r);padding:clamp(22px,3vw,32px);margin:32px 0}.g-related-svc .ey{margin-bottom:10px}.g-related-svc h3{font-size:1.35rem;margin-bottom:8px}.g-related-svc p{color:var(--ink);font-size:.98rem;line-height:1.6;margin:0 0 16px}.g-byline{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;line-height:1.65}.g-byline p{margin:0}.g-byline p+p{margin-top:8px}.g-byline b{color:var(--ink);font-weight:600}.g-byline-updated{font-size:.82rem;color:var(--muted);opacity:.85}.g-byline-updated time{color:var(--ink);font-weight:600}.g-updated{color:var(--teal)}.g-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto}@media(max-width:640px){.g-mini-grid{grid-template-columns:1fr}}.g-mini{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;align-items:flex-start}.g-mini:not(.is-soon):hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent}.g-mini.is-soon{opacity:.72}.g-mini-ic{font-size:1.2rem;width:36px;height:36px;border-radius:9px;background:var(--pink-soft);display:grid;place-items:center;flex:0 0 auto}.g-mini-body{display:grid;gap:5px;min-width:0}.g-mini-tag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}.g-mini-title{font-family:var(--font-display);font-size:.98rem;line-height:1.3;color:var(--ink)}.ft{border-top:1px solid var(--line);background:var(--surface);padding:56px 0 24px;margin-top:20px}.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.ft-grid{grid-template-columns:1fr;gap:32px}}.ft-brand .brand{display:inline-block;margin-bottom:14px;font-size:1.3rem}.ft-brand p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0 0 18px;max-width:36ch}.ft-contact{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}.ft-contact li{color:var(--ink);font-size:.9rem;line-height:1.5;display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline}.ft-contact .ft-lab{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.ft-contact a{color:var(--ink);font-weight:500;transition:color .18s}.ft-contact a:hover{color:var(--pink)}.ft-cta .btn{padding:11px 22px;font-size:.86rem}.ft-col h3,.ft-col h4{margin:0 0 14px;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.ft-col h3.ft-social-h,.ft-col h4.ft-social-h{margin-top:24px}.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ft-col li{font-size:.9rem;line-height:1.4}.ft-col a{color:var(--ink);opacity:.85;transition:color .18s,opacity .18s}.ft-col a:hover{color:var(--pink);opacity:1}.ft-col ul.ft-social{display:flex;flex-direction:row;gap:10px}.ft-social li{margin:0}.ft-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--muted);opacity:1;transition:color .18s,border-color .18s,background .18s,transform .18s}.ft-social a:hover{color:var(--pink);border-color:var(--pink);background:var(--pink-soft);transform:translateY(-2px);opacity:1}.ft-social svg{width:18px;height:18px;display:block}.ft-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 22px;align-items:center}.ft-rate{display:inline-flex;align-items:center;gap:6px}.ft-rate .stars{color:var(--teal);letter-spacing:0}.ft-bot .powered{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--muted);font-weight:600;letter-spacing:.01em;transition:border-color .18s}.ft-bot .powered b{color:var(--pink-deep);font-weight:800;font-style:normal}.ft-bot .powered:hover{border-color:var(--pink)}.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(20,23,28,.18)}.sticky .btn{flex:1;justify-content:center;padding:14px 10px;font-size:.95rem;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 14px -6px var(--pink)}.sticky .s2{flex:0 0 auto;box-shadow:none;padding:14px 18px}.sticky .btn svg{width:16px;height:16px;flex:0 0 auto}@media(max-width:760px){body.has-sticky .sticky{display:flex}body.has-sticky{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}.fab{position:fixed;bottom:22px;z-index:48;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px -8px rgba(20,23,28,.45);transition:transform .18s,opacity .3s,background .18s,visibility .3s}.fab:hover{transform:translateY(-2px)}.fab:active{transform:translateY(0)}.to-top{right:22px;background:var(--pink);color:#fff;font-size:1.15rem;opacity:0;visibility:hidden}.to-top.show{opacity:1;visibility:visible}.to-top:hover{background:var(--pink-deep)}.a11y-btn{left:22px;background:var(--teal);color:#fff;display:none}html.js .a11y-btn{display:grid}.a11y-btn:hover{filter:brightness(1.06)}.a11y-btn svg{width:24px;height:24px;fill:currentColor}@media(max-width:760px){body.has-sticky .fab{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}.a11y-panel{position:fixed;left:22px;bottom:78px;z-index:49;width:260px;max-width:calc(100vw - 44px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}.a11y-panel.open{opacity:1;visibility:visible;transform:none}@media(max-width:760px){body.has-sticky .a11y-panel{bottom:calc(136px + env(safe-area-inset-bottom,0px))}}.a11y-title{font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.a11y-row:first-of-type{border-top:0}.a11y-row span{font-size:.9rem;font-weight:500}.a11y-tg{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line);border:0;cursor:pointer;flex:0 0 auto;transition:background .18s}.a11y-tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}.a11y-tg[aria-pressed="true"]{background:var(--teal)}.a11y-tg[aria-pressed="true"]::after{transform:translateX(18px)}.a11y-reset{margin-top:12px;width:100%;background:transparent;border:1px solid var(--line);border-radius:10px;padding:9px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer}.a11y-reset:hover{border-color:var(--pink);color:var(--pink)}html.a11y-large{font-size:112.5%}html.a11y-contrast{--muted:var(--ink);--line:#7d746e}html.a11y-contrast .svc,html.a11y-contrast .pk,html.a11y-contrast .rev,html.a11y-contrast .mr,html.a11y-contrast .q,html.a11y-contrast .bcard,html.a11y-contrast .vs-card{border-width:2px}html.a11y-contrast .body p,html.a11y-contrast .sec-h p,html.a11y-contrast .svc p,html.a11y-contrast .pk p,html.a11y-contrast .rev .who,html.a11y-contrast .mr .who,html.a11y-contrast .step p{color:var(--ink)}html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.a11y-motion .reveal{opacity:1!important;transform:none!important}html.a11y-motion .hero .st,html.a11y-motion .m-hero .st,html.a11y-motion .g-hero .st,html.a11y-motion .c-hero .st{opacity:1!important;transform:none!important}html.a11y-motion .sweep{display:none!important}.sec-tall{padding-top:clamp(48px,7vw,90px)}.center-block{text-align:center}.lead-narrow{margin-inline:auto;max-width:54ch}.cta-center{justify-content:center}.cta-top{margin-top:22px}.pink-strong{color:var(--pink);font-weight:600}.err-mark{font-size:clamp(4rem,8vw,7rem);color:var(--pink);font-family:var(--font-display);font-weight:700;line-height:1;margin:6px 0 12px}.err-h1{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px}.ty-h{font-size:1.15rem;margin:0 0 12px}.ty-steps{margin:0;padding-left:22px;color:var(--muted);line-height:1.7;font-size:.95rem}.ty-steps li{margin-bottom:6px}html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}html.js .reveal.in{opacity:1;transform:none}.hero .st,.m-hero .st,.g-hero .st,.c-hero .st{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.5s}.hero .st:nth-child(1),.m-hero .st:nth-child(1),.g-hero .st:nth-child(1),.c-hero .st:nth-child(1){animation-delay:.05s}.hero .st:nth-child(2),.m-hero .st:nth-child(2),.g-hero .st:nth-child(2),.c-hero .st:nth-child(2){animation-delay:.13s}.hero .st:nth-child(3),.m-hero .st:nth-child(3),.g-hero .st:nth-child(3),.c-hero .st:nth-child(3){animation-delay:.21s}.hero .st:nth-child(4),.m-hero .st:nth-child(4),.g-hero .st:nth-child(4),.c-hero .st:nth-child(4){animation-delay:.29s}.hero .st:nth-child(5),.m-hero .st:nth-child(5),.g-hero .st:nth-child(5),.c-hero .st:nth-child(5){animation-delay:.37s}.hero .st:nth-child(6),.m-hero .st:nth-child(6),.g-hero .st:nth-child(6),.c-hero .st:nth-child(6){animation-delay:.45s}@keyframes rise{to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero .st,.m-hero .st,.g-hero .st,.c-hero .st{opacity:1;transform:none;animation:none}body.loaded .sweep{animation:none;display:none}}@media print{:root{--bg:#fff;--surface:#fff;--card:#fff;--ink:#000;--muted:#333;--line:#ccc;--pink:#000;--pink-deep:#000;--pink-soft:#f5f5f5;--teal:#000;--teal-soft:#f5f5f5;--shadow:none}body{background:#fff;color:#000;font-size:11pt;padding:0}.hd,.ft,.sticky,.to-top,.a11y-btn,.a11y-panel,.skip,.hero-note,.hero .st,.reveal,.sweep,.final,.g-related-svc,.g-mini-grid,.g-mini,.cta,.pill,.btn,.trust,.callout,.crumb,.g-updated{display:none!important}.reveal{opacity:1!important;transform:none!important}main{padding:0}.wrap{max-width:none;padding:0 24pt}h1,h2,h3{page-break-after:avoid;color:#000!important}h1{font-size:22pt}h2{font-size:16pt;margin-top:18pt;padding-top:8pt;border-top:1pt solid #ccc}h3{font-size:12pt}p,li{color:#000!important;font-size:11pt;line-height:1.4}.g-section{break-inside:auto;page-break-inside:auto;margin-bottom:14pt}.g-section h2{margin-top:14pt}.g-section ul,.g-section ol{page-break-inside:avoid}.g-section li{margin-bottom:4pt}.g-layout{display:block}.g-toc{border:1pt solid #ccc;padding:12pt;margin:0 0 18pt;background:#f9f9f9;page-break-inside:avoid}.g-toc ol{gap:2pt}.g-toc a{color:#000!important}.hm-diagram{border:1pt solid #ccc;page-break-inside:avoid;margin:12pt 0;background:#fff}.g-byline{border-top:1pt solid #ccc;padding-top:8pt;font-size:9pt}a[href^="http"]:not(.brand):after{content:" (" attr(href) ")";font-size:8pt;color:#666}a{color:#000!important;text-decoration:underline}.g-hero{border-bottom:1pt solid #ccc;padding-bottom:12pt;margin-bottom:18pt}.g-hero:before{content:"Honest Maids · honestmaids.la · (818) 414-8012";display:block;font-size:9pt;color:#666;margin-bottom:8pt;letter-spacing:.02em}}h1,h2,h3{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;text-rendering:optimizeLegibility}.rev q,.mr q{hanging-punctuation:first;quotes:"\201C" "\201D"}.chip,.m-rate b,.c-rate b,.rate b,.rating b{font-variant-numeric:tabular-nums} /* ---- Dark mode: primary button contrast ---------------------------------- --pink-deep has two jobs: it is the fill behind white button text, and it is also pink text sitting on the page background. In light mode one value satisfies both. In dark mode it cannot: text legibility needs a light pink, which then leaves white button labels at 2.19:1. Fix belongs on the component, not the token. */ :root[data-theme="dark"] .btn-p, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .sticky .btn-p{color:#1d0d14} :root[data-theme="dark"] .btn-p:hover{background:var(--pink-deep);color:#1d0d14} :root[data-theme="dark"] .imsg-row.you .imsg-bubble{color:#1d0d14} :root[data-theme="dark"] .final .box{background:linear-gradient(135deg,#8e2258,#6d1743)} :root[data-theme="dark"] .ba-label.a{color:#1d0d14} /* Light mode: the CTA gradient ran light-to-dark, so the light end sat at 4.10:1 behind white text. Run dark-to-darker instead. */ .final .box{background:linear-gradient(135deg,var(--pink-deep),#6d1743)} /* ---- Fraunces optical sizing --------------------------------------------- The subsetted face carries opsz 9-144, defaulting to 9. Every heading was therefore rendering with the optical master drawn for 9px text. Map the axis to the size each heading is actually set at. (The face has no SOFT or WONK axis; those were subsetted out.) */ h1,h2,h3{font-optical-sizing:auto} .hero h1,.g-hero h1{font-variation-settings:"opsz" 128;letter-spacing:-.028em} .m-hero h1,.c-hero h1{font-variation-settings:"opsz" 96;letter-spacing:-.024em} .sec-h h2,.final h2{font-variation-settings:"opsz" 60} .g-section h2{font-variation-settings:"opsz" 48} .svc h3,.pk h3,.loc-body h3,.ck-col h3,.g-card h3,.vs-card h3,.callout h3, .rev q,.mr q{font-variation-settings:"opsz" 22} .q summary{font-variation-settings:"opsz" 24} /* The FAQ +/x glyph inherits Fraunces from summary, where the serif plus is visibly lopsided once rotated 45deg. */ .q summary::after{font-family:var(--font-body);font-weight:400} /* ---- Nav dropdown --------------------------------------------------------- Rebuilt. The panel read as cheap for reasons that were mostly mechanical: no gap under the trigger (invalid calc, fixed above), a flat card shadow used for a floating overlay, item radii larger than the concentric rule allows, and a hover that flooded the row with a chalky tint and nothing else. Kept in cascade order after the base rules so the mobile block at max-width:760px still wins. */ .nav-drop{ left:-12px; min-width:288px; border-radius:18px; padding:8px; transform:translateY(-4px) scale(.985); transform-origin:24px top; transition:opacity .16s ease,transform .16s ease,visibility 0s .16s; /* Overlay shadow: a tight contact layer plus wider ambient ones. The --shadow token is tuned for cards resting in the page and is nearly invisible when used for something floating above it. */ /* Fallback first: if color-mix is unsupported the whole declaration below is dropped, and a shadowless panel is the exact problem being fixed. */ box-shadow: 0 0 0 1px rgba(25,20,19,.04), 0 2px 6px -1px rgba(25,20,19,.10), 0 14px 32px -10px rgba(25,20,19,.18), 0 32px 64px -24px rgba(25,20,19,.22); box-shadow: 0 0 0 1px color-mix(in srgb,var(--ink) 4%,transparent), 0 2px 6px -1px color-mix(in srgb,var(--ink) 10%,transparent), 0 14px 32px -10px color-mix(in srgb,var(--ink) 18%,transparent), 0 32px 64px -24px color-mix(in srgb,var(--ink) 22%,transparent); } /* Bridges the 14px gap so diagonal travel toward an item cannot drop hover. */ .nav-drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* Pointer, drawn from the panel's own border and fill. */ .nav-drop::after{ content:"";position:absolute;top:-6px;left:26px;width:11px;height:11px; background:var(--card); border-left:1px solid var(--line);border-top:1px solid var(--line); border-radius:2px 0 0 0;transform:rotate(45deg); } /* Superseded: the open state transform, transition and hover-intent delay now live once, in the NAVIGATION MOTION section at the end of this file. This block was one of several duplicate .nav-drop.open layers left over from earlier passes; they were competing on opacity and one of them was winning at mobile widths. */ .nav-drop-list{gap:1px} .nav-drop-list a{ position:relative; padding:9px 12px 9px 11px; border-radius:10px; /* 18 outer - 8 padding = 10. Concentric. */ font-size:.895rem; letter-spacing:-.005em; } /* Hover reads as a rail cue rather than a pastel flood. */ .nav-drop-list a::before{ content:"";position:absolute;left:3px;top:50%; width:2px;height:0;border-radius:2px;background:var(--pink); transform:translateY(-50%); transition:height .18s cubic-bezier(.16,1,.3,1); } .nav-drop-list a:hover,.nav-drop-list a:focus-visible{ background:var(--surface); background:color-mix(in srgb,var(--surface) 78%,var(--pink-soft)); color:var(--pink-deep); } .nav-drop-list a:hover::before,.nav-drop-list a:focus-visible::before{height:17px} /* Keyboard focus must stay distinct from hover. */ .nav-drop-list a:focus-visible{outline:2px solid var(--pink);outline-offset:-2px} .nav-drop-list.two-col{gap:1px 10px;min-width:336px} .nav-drop-list.two-col a{padding-left:12px;font-size:.87rem} .nav-drop-list.two-col a::before{left:4px} .nav-drop-all{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin:7px -8px -8px; padding:12px 20px; border-radius:0 0 17px 17px; background:var(--surface); color:var(--pink-deep); font-size:.8rem; transition:background .15s ease,color .15s ease; } .nav-drop-all span{transition:transform .2s cubic-bezier(.16,1,.3,1)} .nav-drop-all:hover{background:var(--pink-soft);color:var(--pink-deep)} .nav-drop-all:hover span{transform:translateX(4px)} @media(prefers-reduced-motion:reduce){ .nav-drop{transform:none} .nav-drop-list a::before{transition:none} } /* The mobile disclosure panel is static, so the desktop pointer and hover bridge must not follow it down there. */ @media(max-width:760px){ .nav.open .nav-drop::before,.nav.open .nav-drop::after{display:none} .nav.open .nav-drop{box-shadow:none;border-radius:0;padding:0 12px 10px} .nav.open .nav-drop-all{margin:4px 0 0;border-radius:0;background:transparent} } /* Nav dropdown icons. The rows previously used platform emoji, which render in the OS emoji font at mismatched baselines and weights, ignore --ink so they stay saturated and wrong in dark mode, and sat twelve pixels from the monoline SVG set on the same page. Now reuse that set. */ .nav-drop-list .di{ display:grid;place-items:center; width:26px;height:26px; border-radius:8px; background:var(--pink-soft); color:var(--pink-deep); font-size:0; text-align:initial; flex:0 0 auto; transition:background .15s ease,color .15s ease; } .nav-drop-list .di svg{ width:15px;height:15px;display:block; stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .nav-drop-list a:hover .di, .nav-drop-list a:focus-visible .di{background:var(--pink-deep);color:var(--card)} /* Region headings in the Locations panel. Thirteen identical rows in a 2x7 block threw away grouping the body copy already describes. */ .nav-drop-head{ grid-column:1 / -1; padding:11px 12px 4px; font-size:.66rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase; color:var(--muted); list-style:none; } .nav-drop-head:first-child{padding-top:4px} @media(max-width:760px){ .nav.open .nav-drop-head{padding:10px 14px 3px} } /* ---- Section rhythm -------------------------------------------------------- Section padding capped at 42px, so the gap between two major sections was 77px on desktop and 44px on mobile. On mobile that is only 2.4x a paragraph break, which is not enough signal for "new topic". */ .sec{padding:clamp(30px,4.5vw,58px) 0} .sec-h{margin-bottom:clamp(18px,2.2vw,30px)} .final{padding:clamp(44px,5.5vw,74px) 0} /* Consecutive tinted sections merged into one continuous surface, up to 3,041px on the homepage, and stacked their 280px H watermarks on top of each other. Keep the tint as a signal by letting a run read as one section with internal rules. */ .sec.tint+.sec.tint{border-top:0;padding-top:0} .sec.tint+.sec.tint::before{display:none} .sec.tint+.sec.tint>.wrap{ padding-top:clamp(30px,4.5vw,58px); border-top:1px solid var(--line); } /* ---- FAQ ------------------------------------------------------------------ The money pages carry 24 to 25 entries. At 760px wide and 65px per row that was 1,790px of identical closed bars, 60 percent of the page's word count inside one undifferentiated block. Two columns and tighter rows roughly halve it and make the list scannable. align-items:start is load bearing: without it, opening one row stretches its neighbour into an empty tall card. */ .faq{max-width:1040px;align-items:start} @media(min-width:1000px){ .faq{grid-template-columns:1fr 1fr;gap:10px 14px} } .q summary{padding:15px 20px;font-size:1rem;line-height:1.35} .q .a{padding:0 20px 17px;font-size:.92rem;line-height:1.62} /* ---- Guide measure -------------------------------------------------------- 70ch in Inter measured 90 characters per line, because the ch unit is the width of a zero, which is wider than average lowercase. The site's longest read had its worst measure. */ .g-article{max-width:56ch} .g-section p,.g-section ul,.g-section ol{max-width:56ch} /* ---- Planned guide cards -------------------------------------------------- opacity:.72 composited --muted to roughly #8A8380, which is 3.72:1 against the card and fails AA on body text. A token-level contrast pass cannot catch this because it is an opacity, not a colour. Convey "planned" with surface and weight instead of transparency. */ .g-card.is-soon,.g-mini.is-soon{opacity:1;background:var(--surface)} .g-card.is-soon h3,.g-card.is-soon p, .g-mini.is-soon .g-mini-title{color:var(--muted)} .g-soon{color:var(--muted);opacity:1} .g-card.is-soon .g-card-ic,.g-mini.is-soon .g-mini-ic{ background:var(--line);color:var(--muted); } /* ---- Remaining icon slots ------------------------------------------------- The nav dropdown swapped its emoji for the monoline SVG set this morning; these four slots were missed. Same reasoning: emoji render in the OS emoji font, differ across platforms, sit off the baseline, and ignore --ink so they stay saturated and wrong in dark mode. */ .ck-col h3 .rm{ display:inline-grid;place-items:center; width:26px;height:26px;flex:0 0 auto; border-radius:var(--r-sm,8px); background:var(--teal-soft);color:var(--teal); font-size:0; } .g-card-ic,.g-mini-ic,.guide-cta-mark{ display:grid;place-items:center; background:var(--pink-soft);color:var(--pink-deep); border-radius:10px; font-size:0; } .g-card-ic{width:44px;height:44px} .g-mini-ic{width:36px;height:36px} .guide-cta-mark{width:44px;height:44px} .ck-col h3 .rm svg{width:15px;height:15px} .g-card-ic svg{width:22px;height:22px} .g-mini-ic svg{width:18px;height:18px} .guide-cta-mark svg{width:22px;height:22px} .ck-col h3 .rm svg,.g-card-ic svg,.g-mini-ic svg,.guide-cta-mark svg{ display:block;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } /* Planned guide cards keep their muted treatment on the new icons too. */ .g-card.is-soon .g-card-ic,.g-mini.is-soon .g-mini-ic{ background:var(--line);color:var(--muted); } /* ============================================================================ NAVIGATION MOTION Desktop keeps the dropdown. Mobile becomes a real slide in drawer. Appended last so the max-width:760px rules earlier in the file are still beaten where they need to be. The position on motion, since the brief asked for one: this is a family cleaning company and its visitors are older and mostly on a phone. Motion is here to answer two questions, where did this come from and what do I look at first, and then to get out of the way. So everything decelerates into place, nothing overshoots, nothing bounces, and the longest sequence on the page finishes inside a third of a second. Opening is unhurried. Closing is always shorter than opening, because someone who has tapped away has already decided and should not wait for the interface to agree. ==========================================================================*/ /* ---- Desktop dropdown ----------------------------------------------------- Was one flat fade plus a small translate and scale, every row arriving at once, with a transform origin at an arbitrary 24px. Nothing below changes colour, radius, shadow or spacing. */ /* The origin moves onto the pointer, which sits under the trigger button: ::after is at left:26px and 11px wide, so its centre is 31.5px. The panel now grows out of its own arrow instead of out of nowhere. */ .nav-drop{ transform-origin:31px top; transform:translateY(-6px) scale(.985); transition:opacity .14s cubic-bezier(.4,0,1,1), transform .14s cubic-bezier(.4,0,1,1), visibility 0s .14s; } .nav-item.has-drop:hover .nav-drop, .nav-item.has-drop:focus-within .nav-drop, .nav-drop.open{ transform:none; transition:opacity .2s cubic-bezier(.2,.8,.3,1), transform .22s cubic-bezier(.2,.8,.3,1), visibility 0s; transition-delay:.06s,.06s,0s; /* hover intent preserved, unchanged */ } /* Rows arrive in sequence. Declared only inside the open state, so leaving the state removes the animation and the next open replays it from the top. There is no closing animation on the rows: on close the panel is what leaves, and animating seventeen rows out would be the slowest possible way to dismiss a menu. */ @keyframes navRowIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} .nav-item.has-drop:hover .nav-drop > *, .nav-item.has-drop:focus-within .nav-drop > *, .nav-drop.open > *{animation:navRowIn .26s cubic-bezier(.2,.8,.3,1) both} .nav-item.has-drop:hover .nav-drop li, .nav-item.has-drop:focus-within .nav-drop li, .nav-drop.open li{animation:navRowIn .24s cubic-bezier(.2,.8,.3,1) both} /* 22ms apart, so the sixth row of the Services panel is settled 110ms after the first. Rows past the sixth share the sixth delay: Locations holds seventeen rows and a true per row stagger across all of them would run for most of a second and turn a menu into a performance. */ .nav-drop li{animation-delay:.20s} .nav-drop li:nth-child(1){animation-delay:.09s} .nav-drop li:nth-child(2){animation-delay:.112s} .nav-drop li:nth-child(3){animation-delay:.134s} .nav-drop li:nth-child(4){animation-delay:.156s} .nav-drop li:nth-child(5){animation-delay:.178s} .nav-drop li:nth-child(6){animation-delay:.20s} .nav-drop .nav-drop-all{animation-delay:.16s} .nav-drop .nav-drop-list{animation:none} /* the wrapper must not animate over its own rows */ /* The caret. A 180 degree flip on a solid triangle is the convention this audience already knows, so the direction stays. What changes is the timing: it now shares the panel curves, so the arrow and the panel read as one movement rather than two things that fired at the same moment. */ .nav-drop-btn .caret{transition:transform .14s cubic-bezier(.4,0,1,1)} .nav-drop-btn[aria-expanded="true"] .caret, .nav-item.has-drop:hover .nav-drop-btn .caret{ transition:transform .22s cubic-bezier(.2,.8,.3,1); transition-delay:.06s; } /* ---- Drawer shell, desktop ------------------------------------------------ The drawer wrapper, panel and head exist on every page but must be inert above 760px, where the nav is still a plain header row. display:contents lifts .nav back into the header flex line as if the wrappers were not there, so no desktop layout changes at all. */ .drawer,.drawer-panel{display:contents} .scrim,.drawer-head,.dw-cta{display:none} /* ============================================================================ MOBILE DRAWER ==========================================================================*/ @media(max-width:760px){ /* .hd carries backdrop-filter, which makes it a containing block for position:fixed descendants, which would pin the drawer inside a 72px tall header. Dropping the blur on phones removes the containing block, and costs nothing visible: it is a 10px blur behind an 88% opaque bar on a screen held at arm's length, and it is not free on a mid range phone. */ .hd{backdrop-filter:none;background:var(--bg)} /* Raised above the sticky contact bar, which sits at z-index 50. */ html.nav-open .hd{z-index:60} .drawer{ display:block; position:fixed;inset:0;z-index:5; visibility:hidden; transition:visibility 0s .26s; } .drawer.open{visibility:visible;transition:visibility 0s} .scrim{ display:block; position:absolute;inset:0; background:rgba(12,9,8,.52); opacity:0; transition:opacity .2s ease; } .drawer.open .scrim{opacity:1;transition:opacity .25s ease} .drawer-panel{ display:flex;flex-direction:column; position:absolute;top:0;right:0;bottom:0; /* The reference runs 320px on a 375px screen, leaving a 55px strip. That strip is a second way to dismiss, but this drawer already has a scrim, a close button, Escape and a swipe, so the width is better spent on the content: these rows are long service names and a two column city list read by people who often have reading glasses on. 90vw keeps a visible sliver of page so the drawer still reads as an overlay rather than a new screen. */ width:min(360px,90vw); background:var(--bg); border-left:1px solid var(--line); box-shadow: -1px 0 0 rgba(25,20,19,.06), -24px 0 56px -20px rgba(25,20,19,.34); box-shadow: -1px 0 0 color-mix(in srgb,var(--ink) 6%,transparent), -24px 0 56px -20px color-mix(in srgb,var(--ink) 34%,transparent); transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,1,1); overscroll-behavior:contain; } .drawer.open .drawer-panel{ transform:none; transition:transform .32s cubic-bezier(.4,0,.2,1); } /* While a finger is on the panel it follows the thumb with no transition, otherwise every frame of the drag would lag by a third of a second. */ .drawer-panel.dragging{transition:none} .drawer-head{ display:flex;align-items:center;justify-content:space-between; gap:12px; height:72px;flex:0 0 auto; padding:0 12px 0 20px; border-bottom:1px solid var(--line); } .drawer-brand{ font-family:var(--font-display);font-weight:600; font-size:1.06rem;letter-spacing:-.01em;color:var(--ink); } .drawer-close{ display:grid;place-items:center; width:44px;height:44px;flex:0 0 auto; background:var(--surface);border:1px solid var(--line); border-radius:12px; color:var(--ink);cursor:pointer;padding:0; transition:background .15s ease,color .15s ease; } .drawer-close svg{ width:18px;height:18px;display:block; stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round; } .drawer-close:hover,.drawer-close:active{background:var(--pink-soft);color:var(--pink-deep)} /* The nav is now just the list inside the panel. It no longer positions or hides itself: the panel does both. */ html.js .nav, html.js .nav.open{ display:flex; position:static; flex-direction:column; gap:0; background:transparent; border:0; box-shadow:none; padding:6px 0 calc(24px + env(safe-area-inset-bottom)); max-height:none; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* Top level rows slide in behind the panel, in sequence. Five of them: the two dropdown items, then Guides, About and Contact. Same 14px offset and same curve as the panel, so the rows read as cargo the drawer carried in rather than as a separate effect. */ html.js .nav > a, html.js .nav > .nav-item{ opacity:0; transform:translateX(14px); transition:opacity .14s ease,transform .18s cubic-bezier(.4,0,1,1); } .drawer.open .nav > a, .drawer.open .nav > .nav-item{ opacity:1; transform:none; transition:opacity .28s ease,transform .32s cubic-bezier(.4,0,.2,1); } .drawer.open .nav > :nth-child(1){transition-delay:.10s} .drawer.open .nav > :nth-child(2){transition-delay:.14s} .drawer.open .nav > :nth-child(3){transition-delay:.18s} .drawer.open .nav > :nth-child(4){transition-delay:.22s} .drawer.open .nav > :nth-child(5){transition-delay:.26s} /* ---- Nested submenus ---------------------------------------------------- The part the reference does not attempt. These toggled display none to block, which cannot be transitioned, so they simply appeared. Rejected: grid-template-rows 0fr to 1fr. Tidier, but it wants a single collapsible child and .nav-drop has two, the list and the "see all" row; two fr tracks would give the link half the panel. Rejected: a fixed max-height cap, which either clips the fourteen city list or overshoots it far enough that the close visibly stalls before anything moves. So a measured max-height, with app.js writing the real scrollHeight into --sub-h. The 720px fallback only applies if that write never happens. visibility, not display, does the hiding, so a collapsed submenu stays out of the tab order, which a zero height alone does not achieve. */ .nav .nav-item.has-drop .nav-drop, .nav .nav-item.has-drop:hover .nav-drop:not(.open), .nav .nav-item.has-drop:focus-within .nav-drop:not(.open){ display:block; position:static; visibility:hidden; overflow:hidden; max-height:0; /* No opacity here on purpose. The height is the whole animation. An opacity pair is one more declaration that has to win the cascade in both states, and when it lost the panel opened to the right size and stayed invisible. Navigation does not get to fail that way. */ opacity:1; transform:none; box-shadow:none;border:0;border-radius:0; background:transparent; min-width:0; padding:0 12px; transition:max-height .2s cubic-bezier(.4,0,1,1),padding .2s,visibility 0s .2s; } .nav .nav-item.has-drop .nav-drop.open{ visibility:visible; max-height:1000px; /* JS writes the measured value inline; this is only a floor */ opacity:1; padding:2px 12px 10px; transition:max-height .28s cubic-bezier(.2,.8,.3,1),padding .28s,visibility 0s; } .nav .nav-drop::before,.nav .nav-drop::after{display:none} /* A short cascade inside the submenu, capped at six steps. It ties the rows to the parent they unfolded from. It is deliberately shorter and smaller than the drawer's own stagger, because by this point the visitor is hunting for one specific city and motion that delays reading is a cost. Seventeen rows in true sequence would be fidget, not orientation. */ @keyframes subRowIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}} .nav .nav-drop.open li, .nav .nav-drop.open .nav-drop-all{ animation:subRowIn .24s cubic-bezier(.2,.8,.3,1) both; animation-delay:.15s; } .nav .nav-drop.open li:nth-child(1){animation-delay:.03s} .nav .nav-drop.open li:nth-child(2){animation-delay:.055s} .nav .nav-drop.open li:nth-child(3){animation-delay:.08s} .nav .nav-drop.open li:nth-child(4){animation-delay:.105s} .nav .nav-drop.open li:nth-child(5){animation-delay:.13s} .nav .nav-drop.open li:nth-child(6){animation-delay:.15s} .nav .nav-drop.open .nav-drop-list{animation:none} /* ---- Thumb targets ------------------------------------------------------ Submenu rows were 11px of padding on a .94rem line, roughly 42px, under the 44px floor, and every one of them is a phone tap. */ .nav .nav-drop-list a{min-height:44px;padding:12px 14px;align-items:center} .nav .nav-drop-all{min-height:46px;margin:4px 0 0;border-radius:0;background:transparent} .nav .nav-drop-btn{min-height:52px} .nav.open > a,.nav > a{min-height:48px;display:flex;align-items:center} /* Two columns for the city list survive at 360px: the names are short and one column would make Locations a 700px scroll. */ .nav .nav-drop-list.two-col{grid-template-columns:1fr 1fr;min-width:0} } /* ============================================================================ REDUCED MOTION No slide, no stagger, no scrim fade, no height animation. The drawer is parked on screen rather than off it, so visibility alone opens and closes it and nothing moves. html.a11y-motion already forces animation and transition to none globally; the two things it cannot undo are a transform that parks the panel offscreen and a max-height of zero, so both are unset explicitly here. ==========================================================================*/ @media(prefers-reduced-motion:reduce){ .nav-drop, .nav-item.has-drop:hover .nav-drop, .nav-item.has-drop:focus-within .nav-drop, .nav-drop.open{transform:none;transition:opacity .01ms,visibility .01ms} .nav-drop > *,.nav-drop li,.nav-drop .nav-drop-all, .nav-drop.open > *,.nav-drop.open li{animation:none;animation-delay:0s} .nav-drop-btn .caret{transition:none} } @media(prefers-reduced-motion:reduce) and (max-width:760px){ .drawer-panel,.drawer.open .drawer-panel{transform:none;transition:none} .scrim,.drawer.open .scrim{transition:none} .drawer,.drawer.open{transition:none} html.js .nav > a,html.js .nav > .nav-item, .drawer.open .nav > a,.drawer.open .nav > .nav-item{ opacity:1;transform:none;transition:none;transition-delay:0s; } .nav .nav-item.has-drop .nav-drop, .nav .nav-item.has-drop .nav-drop.open{transition:none} .nav .nav-drop.open li,.nav .nav-drop.open .nav-drop-all{animation:none;animation-delay:0s} } html.a11y-motion .nav-drop{transform:none!important} @media(max-width:760px){ html.a11y-motion .drawer-panel{transform:none!important} html.a11y-motion .scrim{opacity:1} html.a11y-motion .drawer:not(.open) .scrim{opacity:0} html.a11y-motion .nav > a,html.a11y-motion .nav > .nav-item{ opacity:1!important;transform:none!important; } html.a11y-motion .nav .nav-item.has-drop .nav-drop.open{max-height:none} } /* ==== Mobile sticky contact bar ============================================ Rebuilt. The bar is the top of a message thread, not an ad for one, so it is one solid brand-pink object with a single filled action inside it. Five calc() expressions in the old rules were missing the space before env(), which is required by the grammar. Every one of them was discarded at parse time: body padding-bottom computed 0px so the fixed bar covered the bottom of every page, both FABs fell back to bottom:22px and sat entirely behind the bar, the a11y panel landed on the bar's top edge, and the bar's own padding shorthand computed 0px, putting the tap targets in the iOS home-indicator gesture strip. All five are restated below, spaced. Geometry, all derived from --sb-h: bar 64px + safe-area (was 77.3px) tap target 64px full-bleed (was ~48px inside a 78px strip) FAB bottom 64 + 12 = 76px panel bottom 76 + 46 (FAB) + 10 = 132px body pad 76px, bar height plus the same 12px of air */ :root{ --sb-h:64px; --sb-bg:#8a2549; --sb-fill:#ffffff; --sb-fill-lead:#7a1e40; --sb-fill-sub:#8f4661; --sb-ink:#ffffff; --sb-sub:rgba(255,255,255,.84); --sb-edge:rgba(255,255,255,.16); } :root[data-theme="dark"]{ --sb-bg:#5e1338; --sb-fill:#f7edf0; --sb-fill-lead:#5e1338; --sb-fill-sub:#7d2a4d; --sb-ink:#fdf4f6; --sb-sub:rgba(253,244,246,.86); --sb-edge:rgba(255,255,255,.14); } .sticky{ gap:0; padding:0; background:var(--sb-bg); backdrop-filter:none; border-top:1px solid var(--sb-edge); box-shadow:0 -10px 30px -10px rgba(20,10,16,.42); transition:transform .34s cubic-bezier(.22,.9,.3,1); } /* Not 50/50. Texting is the job; calling is the fallback for someone who would rather hear a voice. The fixed 124px keeps the number legible and the target well over 44px without pretending the two are equal. */ .sb-act{ display:flex; align-items:center; gap:11px; height:calc(var(--sb-h) + env(safe-area-inset-bottom, 0px)); padding:0 16px env(safe-area-inset-bottom, 0px); text-decoration:none; font-family:var(--font-body); -webkit-tap-highlight-color:transparent; } .sb-text{flex:1 1 auto;min-width:0;background:var(--sb-fill);color:var(--sb-fill-lead)} .sb-call{flex:0 0 124px;background:transparent;color:var(--sb-ink);padding:0 14px env(safe-area-inset-bottom, 0px)} .sb-lines{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0} .sb-lead{ display:flex;align-items:center;gap:7px; font-size:1rem;font-weight:650;line-height:1.15;letter-spacing:-.005em; white-space:nowrap; } .sb-sub{ font-size:.69rem;font-weight:500;line-height:1.2;letter-spacing:.005em; white-space:nowrap; opacity:0;transition:opacity .22s ease .13s; } body.scrolled .sb-sub{opacity:1} .sb-text .sb-sub{color:var(--sb-fill-sub)} .sb-call .sb-sub{color:var(--sb-sub)} .sb-ic{width:19px;height:19px;flex:0 0 auto;display:block} .sb-call .sb-ic{width:16px;height:16px} .sb-text:active{background:#f2e4e9} :root[data-theme="dark"] .sb-text:active{background:#e6d5da} .sb-call:active{background:rgba(255,255,255,.12)} /* The page focus ring is --pink, which is invisible on a pink bar. */ .sb-act:focus-visible{ outline:3px solid var(--sb-ink); outline-offset:-4px; box-shadow:none; } .sb-text:focus-visible{outline-color:var(--sb-fill-lead)} @media(max-width:760px){ body.has-sticky{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))} body.has-sticky .fab, body.has-sticky .to-top, body.has-sticky .a11y-btn{bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important} body.has-sticky .a11y-panel{bottom:calc(132px + env(safe-area-inset-bottom, 0px))} } /* Tablet: no bar, so the FABs go back to their normal resting height. The old rule pinned them at 76px here too. !important only because the declaration it has to beat carries one. */ @media(min-width:761px) and (max-width:820px){ .to-top,.a11y-btn{bottom:calc(22px + env(safe-area-inset-bottom, 0px))!important} } /* Reduced motion: the bar still waits for body.scrolled, it just arrives with no travel. The sub-lines must not be left stuck at opacity 0. */ @media(prefers-reduced-motion:reduce){ .sticky{transition:none} .sb-sub{opacity:1;transition:none} } html.a11y-motion .sb-sub{opacity:1} /* Dark page ground is #12100f and the bar is #5e1338, only 1.47:1 apart, so the bar's silhouette comes from the hairline rather than the fill. */ :root[data-theme="dark"]{--sb-edge:rgba(255,255,255,.30)} /* 320px phones. The label block measures 138px and the text cell has 51px of slack at 375, which runs out at 323. Give the call cell back 16px there. */ @media(max-width:359px){ .sb-call{flex:0 0 108px;padding:0 11px env(safe-area-inset-bottom, 0px)} .sb-text{padding:0 13px env(safe-area-inset-bottom, 0px)} .sb-lead{font-size:.95rem} } /* ============================================================================ MOBILE BOTTOM CHROME Measured at 375x812 with the sticky bar showing: 121px of the screen, 15 percent, was permanent chrome, and elementFromPoint under both floating buttons returned a paragraph of body copy. Two 46px targets were sitting on top of the words they exist to help people read. Back to top goes. On a phone the gesture already exists, by swipe and on iOS by tapping the status bar, so the button bought nothing and cost a permanent target plus covered text. It stays on desktop, where there is no equivalent gesture. Accessibility moves into the drawer. It is a settings panel, and settings belong in a menu. The .a11y-panel element itself was relocated in the markup to sit inside the drawer; it is position:fixed, and on desktop the drawer wrappers are display:contents and generate no boxes, so it still anchors to the viewport exactly where it always did. Below 760px the panel becomes an ordinary block inside the drawer instead. ==========================================================================*/ @media(max-width:760px){ .to-top,html.js .to-top{display:none!important} .a11y-btn,html.js .a11y-btn{display:none!important} .a11y-row-btn{ display:flex;align-items:center;gap:12px; flex:0 0 auto; width:100%;min-height:52px; padding:12px 24px; background:var(--surface);border:0;border-top:1px solid var(--line); font:inherit;font-size:1rem;font-weight:600;color:var(--ink); text-align:left;cursor:pointer; } .a11y-row-lb{flex:1} .a11y-row-ic{ display:grid;place-items:center; width:26px;height:26px;flex:0 0 auto; border-radius:8px;background:var(--teal-soft);color:var(--teal); } .a11y-row-ic svg{ width:15px;height:15px;display:block; stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .a11y-row-btn .caret{ font-size:.8rem;color:var(--muted);line-height:1; transition:transform .14s cubic-bezier(.4,0,1,1); } .a11y-row-btn[aria-expanded="true"] .caret{ transform:rotate(180deg); transition:transform .22s cubic-bezier(.2,.8,.3,1); } /* The panel becomes part of the drawer. Its content is a fixed five rows, so unlike the nav submenus a constant cap is honest here and needs no measurement. */ .drawer-panel .a11y-panel{ position:static; flex:0 0 auto; width:auto;max-width:none; left:auto;bottom:auto; z-index:auto; background:var(--surface); border:0;border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:0 24px calc(6px + env(safe-area-inset-bottom)); max-height:0; overflow:hidden; opacity:0;visibility:hidden;transform:none; transition:max-height .2s cubic-bezier(.4,0,1,1),opacity .13s ease,padding .2s,visibility 0s .2s; } .drawer-panel .a11y-panel.open{ max-height:340px; opacity:1;visibility:visible; padding:12px 24px calc(14px + env(safe-area-inset-bottom)); overflow-y:auto; transition:max-height .28s cubic-bezier(.2,.8,.3,1),opacity .2s ease,padding .28s,visibility 0s; } /* Switch rows are taps too. */ .drawer-panel .a11y-row{padding:11px 0;min-height:46px} .drawer-panel .a11y-tg{width:52px;height:30px} .drawer-panel .a11y-tg::after{width:24px;height:24px} .drawer-panel .a11y-tg[aria-pressed="true"]::after{transform:translateX(22px)} .drawer-panel .a11y-reset{min-height:44px} } /* Desktop keeps the floating button and the popover, so the drawer row must not appear there. */ @media(min-width:761px){.a11y-row-btn{display:none}} @media(prefers-reduced-motion:reduce) and (max-width:760px){ .a11y-row-btn .caret{transition:none} .drawer-panel .a11y-panel,.drawer-panel .a11y-panel.open{transition:none} } @media(max-width:760px){ html.a11y-motion .drawer-panel .a11y-panel.open{max-height:none} } /* ---- Drawer row consistency ----------------------------------------------- .nav carries align-items:center from the desktop rule. In a column flex container that centres every row horizontally, so Guides, About and Contact sat centred while Services and Locations, being flex rows themselves, stretched. Five items in one list get one alignment. */ @media(max-width:760px){ html.js .nav{align-items:stretch} html.js .nav > a, html.js .nav .nav-plain-link{ display:flex;align-items:center; min-height:52px; padding:12px 24px; font-size:1rem;font-weight:600;color:var(--ink); text-align:left; } html.js .nav > .nav-item.has-drop{align-items:stretch} /* The head holds only the close button now. The brand was removed from the markup: the drawer overlays the header, so the logo and a text lockup were repeating the same name about 40px apart. */ .drawer-head{justify-content:flex-end;padding:0 12px} } /* The accessibility switches are 52x30 inside the drawer, which reads right but leaves a 30px tall target. The pill stays that size and the hit area is grown past it instead, to 46px, so the control looks like a switch and taps like a button. */ @media(max-width:760px){ .drawer-panel .a11y-tg::before{ content:"";position:absolute;top:-8px;bottom:-8px;left:-6px;right:-6px; } } /* ---- Reviews: one component, not two -------------------------------------- .rev-grid and .mrev are visually identical above 820px. Below it .rev-grid stacks and .mrev becomes a snap carousel holding exactly three cards with no dots, no arrows and no count. With three reviews that hides two thirds of the social proof behind a gesture whose only affordance is a 14 percent peek, on the pages where reviews carry the most weight. Stack both. */ @media(max-width:820px){ .mrev{ display:grid;grid-template-columns:1fr;gap:12px; overflow:visible;scroll-snap-type:none; padding:0;margin-inline:0; } .mr{flex:none;scroll-snap-align:none} } /* Align the two card treatments so they are demonstrably the same object. */ .mr{border-radius:var(--r);padding:22px} .mr .s{font-size:.9rem;margin-bottom:10px} .mr q{font-size:1.08rem;line-height:1.45} .mr .who{font-size:.84rem;margin-top:14px} /* ---- h3 scale ------------------------------------------------------------- Seven live values inside a 0.33rem band. 1.02 and 1.05rem differ by half a pixel at a 16px root, which is below the just-noticeable threshold, so they read as inconsistency rather than hierarchy. Three steps. .ft-col h3 stays out of this: it is an uppercase micro label, not a heading. */ :root{--h3-sm:1.02rem;--h3-md:1.15rem;--h3-lg:1.3rem} .ck-col h3,.step h3,.loc-body h3{font-size:var(--h3-sm)} .svc h3,.pk h3,.g-card h3,.guide-cta h3,.callout h3,.silo-h,.ty-h{font-size:var(--h3-md)} .vs-card h3,.g-related-svc h3{font-size:var(--h3-lg)} /* Keep Fraunces optical sizing tracking the new steps. */ .ck-col h3,.step h3,.loc-body h3{font-variation-settings:"opsz" 20} .svc h3,.pk h3,.g-card h3,.guide-cta h3,.callout h3,.silo-h,.ty-h{font-variation-settings:"opsz" 22} .vs-card h3,.g-related-svc h3{font-variation-settings:"opsz" 26} /* ---- Radius scale --------------------------------------------------------- Fifteen distinct literals against a --r token of 16px, and --r-sm was referenced once as var(--r-sm,8px) but never defined. Three tiers. Left deliberately alone: the nav dropdown's concentric 18/8/10 and its 17px footer corner, the 2px rail cue and pointer, focus ring and tick radii, the 6px chat bubble tails, and every 50 percent circle. */ :root{--r-sm:10px;--r-lg:22px} .mr,.bcard,.loc-card,.g-mini,.silo-tile,.q, .form input,.form select,.form textarea,.a11y-panel{border-radius:var(--r)} .svc .ic,.pk .ic,.loc-pin,.g-card-ic,.g-mini-ic,.guide-cta-mark, .ck-col h3 .rm,.nav-drop-list .di,.ft-social a{border-radius:var(--r-sm)} .final .box,.imsg-frame{border-radius:var(--r-lg)} /* ---- Shortened cross link band, 65 money pages ---------------------------- These sections used to hold a ~500 word comparison plus an inline SVG. Both were removed because they were verbatim on all 13 city pages and targeted informational intent that the /services/ pillar already owns. What is left is an eyebrow, a display heading, two or three sentences and a link, still sitting in a wrapper sized for the old content: measured at 375px, a 463px section holding 53 words, with a 280px watermark and a heading larger than the text beneath it. The section's real job now is lateral navigation. Size it for that. Scoped with :has() so the homepage and the six pillar pages, which kept their full comparison, are untouched. :not(.chapters) protects the long .body.chapters block on services/deep-cleaning/. */ .sec.tint:has(> .wrap > .sec-h + .vs-rule), .sec.tint:has(> .wrap > .sec-h + .body:not(.chapters)){ padding:clamp(20px,2.4vw,30px) 0; } .sec.tint:has(> .wrap > .sec-h + .vs-rule)::before, .sec.tint:has(> .wrap > .sec-h + .body:not(.chapters))::before{display:none} .sec-h:has(+ .vs-rule), .sec-h:has(+ .body:not(.chapters)){ text-align:left;max-width:none;margin:0 0 10px; } .sec-h:has(+ .vs-rule) h2, .sec-h:has(+ .body:not(.chapters)) h2{ font-size:clamp(1.2rem,1.7vw,1.5rem); font-variation-settings:"opsz" 28; letter-spacing:-.012em; margin-bottom:0; } .sec-h:has(+ .vs-rule) .ey, .sec-h:has(+ .body:not(.chapters)) .ey{margin-bottom:8px} .sec-h:has(+ .vs-rule) .ey::before, .sec-h:has(+ .vs-rule) .ey::after, .sec-h:has(+ .body:not(.chapters)) .ey::before, .sec-h:has(+ .body:not(.chapters)) .ey::after{display:none} .sec-h + .vs-rule, .sec-h + .vs-rule + .vs-rule{ max-width:62ch;margin:0;text-align:left;font-size:1.02rem; } .sec-h + .vs-rule + .vs-rule{margin-top:10px} .sec-h + .body:not(.chapters){max-width:62ch;margin:0} /* ---- Follow the operating system's dark mode ------------------------------ The site had zero prefers-color-scheme queries, so someone whose phone is set to dark got a full brightness white page, and the only way to change it was a settings row inside a menu. The JS reset already claimed to put the theme "back to following the OS"; this is the half that was missing. Guarded with :not([data-theme="light"]) so an explicit light choice still beats a dark OS. An explicit dark choice is handled by the [data-theme="dark"] block above, which also wins against a light OS. Tokens are copied verbatim from that block, so the two stay identical. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--bg:#12100f;--surface:#1c1917;--card:#201c1a;--ink:#f0eae6;--muted:#a89e98;--line:#332d29;--pink:#e07a9c;--pink-deep:#ef9cb7;--pink-soft:#2c1620;--teal:#4fc9b8;--teal-soft:#123330;--shadow:0 1px 2px rgba(0,0,0,.4),0 22px 48px -24px rgba(0,0,0,.6)} } /* ---- Drawer: close the void ------------------------------------------------ Five nav rows and one settings row inside an 812px panel left a large empty band in the middle, which reads as unfinished rather than spacious. Push the accessibility row to the bottom edge and let the nav list sit at the top, so the space becomes deliberate separation between navigation and settings rather than a gap nobody placed. */ @media(max-width:760px){ html.js .nav.open{ justify-content:flex-start; height:100%; } /* The settings row is not navigation, so it goes to the far edge and gets a rule to say so. */ .nav.open .a11y-row-btn{ margin-top:auto; border-top:1px solid var(--line); } } /* ---- Drawer: the contact action the drawer was hiding ----------------------- The panel is fixed and opaque and sits above the sticky contact bar, so opening the menu removed the only way to text the business from anywhere on screen. That is backwards: the menu is opened by the most engaged visitors. Placement. The block is the panel's footer, directly above the settings row, not under the nav list and not floating in the middle of the band. Two reasons. It lands in the same corner of the screen the sticky bar occupied, so nothing about where the action lives changes when the drawer opens. And because .nav is the flex:1 scroll region, a footer stays put while the Locations submenu expands and scrolls fourteen cities past it; anything parked under the nav rows would scroll away exactly when the panel got busy. Treatment. Same solid --sb-bg object and the same two-line lockup as the bar, so it reads as that bar re-surfaced rather than a new offer. The call line under it is deliberately not a second button: one action leads, and the number is there because .hd-tel is hidden on phones and the footer number is a full page scroll away, so the drawer is the only place a visible number costs nothing. */ @media(max-width:760px){ .dw-cta{ display:block; flex:0 0 auto; padding:14px 20px 12px; background:var(--bg); border-top:1px solid var(--line); } .dw-cta-act{ display:flex;align-items:center;gap:13px; min-height:64px; padding:12px 18px; border-radius:14px; background:var(--sb-bg,#8a2549); color:var(--sb-ink,#fff); box-shadow:0 8px 22px -12px rgba(20,10,16,.7); } .dw-cta-act:active{background:var(--sb-fill-lead,#7a1e40)} .dw-cta-ic{width:22px;height:22px;flex:0 0 auto;display:block} .dw-cta-lines{display:flex;flex-direction:column;gap:1px;min-width:0} .dw-cta-lead{font-size:1.02rem;font-weight:700;letter-spacing:.01em;line-height:1.25} .dw-cta-sub{font-size:.82rem;font-weight:500;color:var(--sb-sub,rgba(255,255,255,.84));line-height:1.3} /* A text link, not a button. It carries the number, which is the part that is otherwise unreachable on a phone without scrolling the whole page. */ .dw-cta-tel{ display:flex;align-items:center;justify-content:center;gap:6px; min-height:48px;margin-top:2px; font-size:.95rem;font-weight:500;color:var(--muted); } .dw-cta-tel b{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px} .dw-cta-tel:active b{color:var(--pink-deep)} /* Arrives after the fifth nav row, on the same offset and curve, so it is cargo the panel carried in rather than a separate effect. */ html.js .dw-cta{ opacity:0; transform:translateX(14px); transition:opacity .14s ease,transform .18s cubic-bezier(.4,0,1,1); } .drawer.open .dw-cta{ opacity:1;transform:none; /* One beat after the fifth nav row's .26s, and .26 + .32 = .58s still lands inside the 620ms settle timer in app.js. */ transition:opacity .28s ease .26s,transform .32s cubic-bezier(.4,0,.2,1) .26s; } } @media(max-width:760px) and (prefers-reduced-motion:reduce){ html.js .dw-cta,.drawer.open .dw-cta{ opacity:1;transform:none;transition:none;transition-delay:0s; } } html.a11y-motion .dw-cta{ opacity:1!important;transform:none!important;transition:none!important;transition-delay:0s!important; } /* ---- Drawer contact block, dark mode --------------------------------------- The sticky bar can wear --sb-bg #8a2549 in dark mode because it is a full-bleed strip with a lit top edge, so its shape is read from the screen edges. In the drawer the same fill is a floating card on a #12100f panel, a 2.21:1 boundary, under the 3:1 that a UI component's edge needs. Measured. The fill moves to #b03a63, which is not a new colour: it is the light theme --pink, already in the palette. It reads 3.26:1 against the dark panel and still carries white at 5.78:1, so the object is visible and the label is legible without turning the primary action into a pale chip that no longer matches the bar it stands in for. */ @media(max-width:760px){ :root[data-theme="dark"] .dw-cta-act{background:#b03a63} :root[data-theme="dark"] .dw-cta-act:active{background:#8a2549} :root[data-theme="dark"] .dw-cta-sub{color:rgba(255,255,255,.92)} } @media(max-width:760px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .dw-cta-act{background:#b03a63} :root:not([data-theme="light"]) .dw-cta-act:active{background:#8a2549} :root:not([data-theme="light"]) .dw-cta-sub{color:rgba(255,255,255,.92)} }