/* Harvey W James — faithful replica chrome. Tokens captured from live site. */
@font-face{font-family:"Brittany Signature";src:url("assets/fonts/BrittanySignature.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--dark:#262626;--accent:#FF6933;--ink:#1A1A1A;--head:#333333;--body:#212121;--paper:#ECE4D5;--soft:#E6DDCC;--cream:#F6F1E7;--sand:#ECE4D5;--line:#E1DACB;--mut:#6F6A60}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:Sen,system-ui,-apple-system,Arial,sans-serif;color:var(--body);background:var(--sand);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.in{max-width:1440px;margin:0 auto;padding:0 16px}
.flag{background:#111;color:#fff;text-align:center;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:7px 10px}
.flag b{color:#FF9466}
/* ---------- HEADER ---------- */
.site-h{background:var(--dark);position:sticky;top:0;z-index:50}
.site-h .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1440px;margin:0 auto;padding:8px 16px}
.logo img{height:80px;width:auto;display:block}
.logo.txt{font-family:Lato;font-weight:900;font-size:20px;color:#fff;letter-spacing:.02em}
.logo.txt b{color:var(--accent)}
.nav{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav>li{position:relative}
.nav>li>a{color:#fff;font-size:17px;font-weight:700;padding:24px 0;display:inline-block;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.4);letter-spacing:-.025em}
.nav>li>a .c{font-size:10px;opacity:.85;margin-left:3px}
.nav>li>a:hover,.nav>li>a.on{color:var(--accent)}
.drop{position:absolute;top:100%;left:-16px;min-width:250px;background:#fff;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:8px;display:none}
.nav>li:hover .drop{display:block}
.drop a{display:block;color:var(--ink);font-size:14px;font-weight:600;padding:10px 14px;border-radius:5px}
.drop a:hover{background:#F6F1E8;color:var(--accent)}
.icons{display:flex;gap:10px;align-items:center}
.ic{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;color:#fff}
.ic svg{width:17px;height:17px;fill:currentColor}
.ic:hover{background:var(--accent)}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px}
.burger span{display:block;height:2px;background:#fff;margin:5px auto;width:24px;transition:.2s}
.langswbox-mob{display:none}  /* mobile-only EN|中文 toggle in the top bar (desktop uses the copy inside .icons) */
/* home hero header: fixed, transparent at top, turns solid dark on scroll (matches live) */
.site-h.over{position:fixed;top:0;left:0;right:0;background:transparent;z-index:40;transition:background .25s}
.site-h.over.scrolled{background:var(--dark);box-shadow:0 2px 14px rgba(0,0,0,.18)}
/* content-page hero card image */
.prose .phero-img{width:100%;border-radius:8px;margin:0 0 28px;display:block}
/* home hero — full-viewport cover bg with 10% overlay, content vertically centred (matches live) */
.hero-wrap{position:relative;background:#EDE7DC url(assets/hero-london-map.png) center center/cover no-repeat;min-height:100vh;display:flex;align-items:center}
.hero-wrap{background-image:-webkit-image-set(url(assets/hero-london-map.webp) type("image/webp"),url(assets/hero-london-map.png) type("image/png"));background-image:image-set(url(assets/hero-london-map.webp) type("image/webp"),url(assets/hero-london-map.png) type("image/png"))}
.hero-wrap::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10));pointer-events:none;z-index:1}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;padding:0 16px}
.hero-inner h1{font-family:Lato;font-weight:900;font-size:45px;color:#1A1A1A;margin:0;line-height:1;letter-spacing:-.025em}
.hero-inner .scriptL{display:block;font-family:"Brittany Signature",cursive;font-weight:200;font-size:67.5px;color:var(--accent);line-height:1;letter-spacing:-1.125px;margin:-4px 0 6px}
.hero-inner .subL{display:block;font-family:Lato;font-weight:900;font-size:22.5px;color:#1A1A1A;line-height:1.33;letter-spacing:-.025em;margin:0 0 26px}
.hero-inner .btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-out{background:transparent;color:#1A1A1A;border:1px solid var(--accent);font-weight:900;font-size:16.875px;padding:13px 26px;border-radius:999px}
/* home feature tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:56px 0 18px}
.tile{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.62))}
.tile span{position:relative;z-index:2;padding:18px;font-family:Lato;font-weight:900;font-size:18px}
/* home about */
.habout{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center;padding:42px 0 56px}
.habout img{width:100%;aspect-ratio:1.63/1;object-fit:cover;border-radius:10px;display:block}
.habout h2{font-family:Lato;font-weight:700;font-size:21px;color:var(--head);margin:0 0 16px;line-height:1.1;letter-spacing:-.025em}
.habout p{margin:0 0 14px;font-size:15px;line-height:1.5}
.habout a.more{display:inline-block;margin-top:8px;background:var(--accent);color:#fff;font-weight:800;padding:13px 28px;border-radius:999px;text-decoration:none}
.habout p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* about page */
.about-herotext{text-align:center;padding:58px 28px 26px}
.about-herotext h1{font-family:Lato;font-weight:900;font-size:46px;color:var(--ink);letter-spacing:.05em;margin:0 0 12px}
.about-herotext p{font-size:18px;color:var(--mut);margin:0}
.about-img{width:100%;border-radius:10px;display:block}
.twoimg{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px 0 6px}
.twoimg img{width:100%;border-radius:10px;display:block}
@media(max-width:700px){.twoimg{grid-template-columns:1fr}.about-herotext h1{font-size:32px}}
/* testimonials */
.tmon{background:var(--paper);border-top:1px solid var(--line)}
.tmon .in{padding:56px 16px}
.tmon h2{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--head);text-align:left;margin:0 0 30px;letter-spacing:-.025em}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;display:flex;flex-direction:column;align-items:center}
.tcard .stars{display:none}
.tcard p{font-size:16.875px;font-style:normal;color:#333;margin:0 0 14px;line-height:1.25;text-align:center}
.tcard .who{font-weight:800;color:var(--head);font-size:14px;text-align:center}
@media(max-width:1024px){.tiles{grid-template-columns:repeat(2,1fr)}.tgrid{grid-template-columns:1fr}.habout{grid-template-columns:1fr;gap:24px}}
@media(max-width:560px){.tiles{grid-template-columns:1fr 1fr;gap:12px}.hero-inner h1{font-size:32px}.hero-inner .scriptL{font-size:48px}.hero-inner .subL{font-size:18px}}
/* blog post hero (image or banner) */
.prose .bhero-img{width:100%;border-radius:8px;margin:0 0 24px;display:block}
.bhero{background:#211d19;border-radius:8px;padding:40px 38px;margin:0 0 26px;position:relative;overflow:hidden}
.bhero::before{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;background:radial-gradient(circle,rgba(255,105,51,.28),transparent 70%)}
.bhero-wm{font-size:11px;letter-spacing:.14em;color:#fff;font-weight:800;border-bottom:2px solid var(--accent);padding-bottom:5px;display:inline-block}
.bhero-pill{position:absolute;top:40px;right:38px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 12px;border-radius:4px;text-transform:uppercase}
.bhero-t{font-family:Lato;font-weight:900;font-size:29px;color:#fff;line-height:1.14;margin-top:28px;max-width:92%;position:relative}
.ndate{font-size:12px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
@media(max-width:560px){.bhero-t{font-size:22px}.bhero{padding:30px 24px}.bhero-pill{top:auto;bottom:24px;right:24px}}
/* home search bar */
.hsearch{background:var(--soft);border-bottom:1px solid var(--line)}
.hsearch .in{padding:48px 16px 42px;text-align:center}
.hsearch h2{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--body);margin:0 0 22px;letter-spacing:-.025em}
.searchbar{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 4px;max-width:720px;width:100%;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.searchbar .mag{padding:0 8px 0 16px;color:var(--mut);display:flex}
.searchbar input{flex:1;border:0;background:transparent;padding:14px 10px;font:inherit;min-width:0;outline:none}
.searchbar .searchbtn{border:0;cursor:pointer}
/* help cards */
.help{background:var(--soft)}
.help .in{padding:50px 16px 50px}
.help-h{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--head);margin:0 0 26px;letter-spacing:-.025em}
.hcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hcard{position:relative;aspect-ratio:33/40.5;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;background:#F3EEE2;padding:28px 24px 0;transition:background .2s}
.hcard-wm{align-self:flex-start;font-size:9px;letter-spacing:.12em;color:#8a8276;font-weight:800;border-bottom:1.5px solid var(--accent);padding-bottom:5px}
.hcard-h{margin-top:auto;font-family:Lato;font-weight:900;font-size:30px;line-height:1.05;letter-spacing:-.02em}
.hcard-h b{display:block;color:var(--ink)}
.hcard-h i{display:block;color:var(--accent);font-style:normal}
.hcard-sub{margin:12px 0 auto;color:var(--mut);font-size:15px;line-height:1.45}
.hcard-btn{align-self:stretch;margin:22px -24px 0;background:var(--accent);color:#fff;font-weight:800;font-size:15px;padding:15px}
.hcard-more{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;color:var(--ink);font-weight:800;font-size:15px;padding:11px 26px;border-radius:999px;opacity:0;transition:opacity .2s;white-space:nowrap;z-index:3}
.hcard:hover{background:var(--accent)}
.hcard:hover .hcard-wm,.hcard:hover .hcard-h,.hcard:hover .hcard-sub,.hcard:hover .hcard-btn{opacity:0;transition:opacity .2s}
.hcard:hover .hcard-more{opacity:1}
/* videos */
.vids{border-top:1px solid var(--line)}
.vids .in{padding:54px 16px}
.vids h2,.lnews h2{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--head);margin:0 0 26px;letter-spacing:-.025em}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vcard{display:block;text-decoration:none}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.vthumb img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:.2s}
.vcard:hover .vthumb img{opacity:1;transform:scale(1.03)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,105,51,.94);display:flex;align-items:center;justify-content:center}
.vplay::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vtitle{font-family:Lato;font-weight:700;font-size:16px;color:var(--ink);margin:12px 0 0;line-height:1.3}
/* latest news */
.lnews{background:#fff;border-top:1px solid var(--line)}
.lnews .in{padding:54px 16px}
.lncards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lncard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.lncard-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#211d19}
.lncard-body{padding:22px;display:flex;flex-direction:column;flex:1}
.lncard .d{font-size:12px;color:var(--accent);font-weight:800;margin-bottom:10px}
.lncard h3{font-family:Lato;font-weight:700;font-size:19px;color:var(--ink);margin:0 0 10px;line-height:1.25}
.lncard p{font-size:14px;color:#555;margin:0 0 16px;flex:1;line-height:1.55}
.lncard .rm{color:var(--accent);font-weight:800;font-size:13px}
.viewarch{text-align:center;margin-top:32px}
.pager{display:flex;gap:8px;justify-content:center;padding:6px 0 54px}
.pager .pg{min-width:40px;height:40px;padding:0 10px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink);text-decoration:none}
.pager a.pg:hover{border-color:var(--accent);color:var(--accent)}
.pager .pg.on{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:1024px){.hcards{grid-template-columns:repeat(2,1fr)}.vgrid,.lncards{grid-template-columns:1fr}}
@media(max-width:1024px){.hcard{min-height:300px}}
@media(max-width:560px){.hcards{grid-template-columns:1fr}.hcard{min-height:0;padding:24px}}
/* ---------- TITLE BAND ---------- */
.titleband{background:var(--paper);border-bottom:1px solid var(--line)}
.titleband .in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:46px;padding-bottom:46px;flex-wrap:wrap}
.titleband h1{font-family:Lato;font-weight:800;font-size:45px;color:var(--head);margin:0 0 8px;letter-spacing:-.025em;line-height:1}
.titleband.article h1{font-size:33.75px;line-height:1.05}
.crumb{font-size:14px;color:var(--mut)}
.crumb a{color:var(--accent)}
.searchbtn{background:var(--accent);color:#fff;font-weight:700;font-size:15px;padding:13px 40px;border-radius:999px;white-space:nowrap}
.hero-inner .searchbtn,.searchbar .searchbtn{font-size:16.875px}
/* ---------- CONTENT ---------- */
.layout{display:grid;grid-template-columns:1fr 360px;gap:48px;padding:54px 0 64px}
.prose{font-size:15px;line-height:1.5;color:var(--body);max-width:820px}
.prose h2,.prose h3{font-family:Lato;font-weight:700;color:var(--head);line-height:1.2;margin:30px 0 10px}
.prose h3{font-size:19.5px}
.prose h2{font-size:21px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
/* prose tables (news/blog comparison tables) — cream header, ruled rows, mobile scroll */
.prose table{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:14.5px;line-height:1.5}
.prose thead th{background:var(--soft);text-align:left;padding:11px 14px;border:1px solid var(--line);font-family:Lato;font-weight:700;color:var(--head)}
.prose tbody td{padding:11px 14px;border:1px solid var(--line);vertical-align:top}
.prose tbody td:first-child{font-weight:700;color:var(--ink)}
.prose tbody tr:nth-child(even){background:color-mix(in srgb,var(--cream) 60%,transparent)}
@media(max-width:600px){.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.prose thead th,.prose tbody td{padding:9px 11px}}
/* related reads (S126b) — the same-topic block at the foot of every news article */
.nrel{margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}
.nrel h2{margin-top:0}
.nrel-i{margin:9px 0}
/* reading layer (S126e) — the save-this-read heart on every news article */
.nact{text-align:center;margin:14px 0 2px}
.nfav{display:inline-flex;align-items:center;gap:7px;font-family:Lato,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6f6e6a;background:transparent;border:1px solid rgba(34,34,34,.28);border-radius:999px;padding:9px 16px;cursor:pointer}
.nfav .hh{font-size:14px;line-height:1}
.nfav.on{color:#B23F11;border-color:#B23F11}
.nfav:hover{color:#FF6933;border-color:#FF6933}
.nact-n{display:inline-block;margin-left:10px;font-family:Lato,sans-serif;font-size:12px;font-weight:800;letter-spacing:.06em;color:#B23F11;vertical-align:middle}
/* enquiry form */
.enq{align-self:start;position:sticky;top:96px;border:1px solid var(--line);border-radius:14px;padding:28px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.enq h3{font-family:Lato;font-weight:700;font-size:22.5px;text-align:center;color:var(--head);margin:0 0 18px;letter-spacing:-.025em}
.enq input,.enq textarea{width:100%;border:1px solid var(--line);border-radius:999px;padding:14px 18px;margin:0 0 14px;font:inherit;color:var(--ink)}
.enq textarea{border-radius:18px;min-height:120px;resize:vertical}
.enq .send{display:block;width:auto;margin:6px auto 0;background:var(--accent);color:#fff;border:0;font-weight:800;font-size:15px;padding:14px 32px;border-radius:999px;cursor:pointer}
/* ---------- LISTINGS ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);font-size:14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:9px 18px;cursor:pointer;font:inherit;color:var(--mut)}
.seg button.on{background:var(--dark);color:#fff}
.controls label{color:var(--mut);margin-left:8px}
.controls select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.count{margin-left:auto;color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:34px 0 60px}
.card{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:0 12px 32px rgba(0,0,0,.12);transform:translateY(-2px)}
.ph{position:relative;aspect-ratio:16/10;background:#EEE9DF;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.pill{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#fff;color:var(--ink)}
.pill.tolet{background:var(--accent);color:#fff}
.pill.agreed{background:#fff;color:var(--mut);border:1px solid var(--line)}
.cbody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.rent{font-family:Lato;font-weight:900;font-size:23px;color:var(--ink)}
.rent small{font-size:12px;color:var(--mut);font-weight:700}
.addr{font-size:16px}
.pc{display:inline-block;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:2px 7px}
.meta{display:flex;gap:14px;font-size:13px;color:var(--mut);border-top:1px solid var(--line);padding-top:11px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;color:var(--mut);background:#F4F1EA;border-radius:4px;padding:3px 8px}
/* detail */
.detail{padding:30px 0 60px}
.detail .crumb{margin-bottom:10px}
.dt{font-family:Lato;font-weight:900;font-size:34px;color:var(--ink);margin:6px 0 4px}
.dtsub{color:var(--mut);margin-bottom:18px}
.dgallery{aspect-ratio:16/9;background:#EEE9DF;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.dgallery img{width:100%;height:100%;object-fit:cover}
.dlayout{display:grid;grid-template-columns:1fr 330px;gap:40px;padding-top:28px}
.facts{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:22px}
.fact b{display:block;font-family:Lato;font-weight:900;font-size:19px;color:var(--ink)}
.fact span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.prose-d{font-size:16.5px}
.prose-d h3{font-family:Lato;font-weight:900;color:var(--ink);margin:22px 0 8px}
.side{align-self:start;position:sticky;top:96px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:24px}
.side .rent{font-size:28px}
.side .muted{color:var(--mut);font-size:13px;margin-bottom:8px}
.cta{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:800;padding:14px;border-radius:999px;margin-top:12px}
.cta.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.kvs{margin-top:16px;font-size:14px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);color:var(--mut)}
.kv b{color:var(--ink)}
/* hero + featured (home) */
.phero{padding:50px 0 18px}
.phero .kick{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:12px}
.phero h1{font-family:Lato;font-weight:900;font-size:40px;color:var(--ink);margin:0 0 12px}
.phero .lede{font-size:18px;color:var(--mut);max-width:680px}
.ngrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:30px 0 60px}
.ncard{border:1px solid var(--line);border-radius:8px;padding:22px;transition:.18s;display:block}
.ncard:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px)}
.ndate{font-size:12px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ntitle{font-family:Lato;font-weight:700;font-size:19px;color:var(--ink);line-height:1.25}
/* popular locations (collapsible bar above footer — matches live) */
.poploc{background:#fff;border-top:1px solid #d1d5db;padding:32px 0}
.poploc h3{font-family:Lato;font-weight:800;font-size:22.5px;color:var(--body);text-align:center;letter-spacing:-.02em;margin:0;cursor:pointer;position:relative}
.poploc h3 .tg{font-size:14px;margin-left:8px}
.poploc .ploc-list{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;padding:22px 16px 0;font-size:14px}
.poploc .ploc-list a{color:var(--mut)}
.poploc .ploc-list a:hover{color:var(--accent)}
.poploc.collapsed .ploc-list{display:none}
/* ---------- FOOTER ---------- */
.site-f{background:var(--dark);color:#cbc6bd;margin-top:0}
.news{border-bottom:1px solid #3a3a3a}
.news .in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:40px 28px;flex-wrap:wrap}
.news h3{font-family:Lato;font-weight:800;color:#fff;font-size:28.125px;margin:0;letter-spacing:-.025em}
.news .sub{color:#a39d93;font-size:14px;margin-top:4px}
.news form{display:flex;gap:0;background:#fff;border-radius:999px;padding:6px;flex:1;max-width:620px;min-width:280px}
.news input{border:0;background:transparent;padding:12px 16px;font:inherit;flex:1;color:#222;min-width:0}
.news .signup{background:var(--accent);color:#fff;border:0;font-weight:800;padding:12px 26px;border-radius:999px;cursor:pointer;white-space:nowrap}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:46px 16px 30px;max-width:1440px;margin:0 auto}
.fcol h4{color:#fff;font-family:Lato;font-weight:700;font-size:16.875px;margin:0 0 14px;letter-spacing:-.025em}
.fcol a,.fcol p{display:block;color:#bbb6ad;font-size:14px;margin:0 0 9px}
.fcol a:hover{color:var(--accent)}
.fcol .reg{color:#8f8a81;line-height:1.5}
.acc{border-top:1px solid #3a3a3a;padding:34px 16px;display:flex;flex-wrap:wrap;gap:30px 40px;align-items:center;justify-content:center;max-width:1440px;margin:0 auto}
.acc img{height:45px;width:auto;opacity:.92}
.legal{border-top:1px solid #3a3a3a;text-align:center;color:#8f8a81;font-size:12.5px;padding:22px}
/* social rail */
.rail{position:fixed;right:18px;bottom:84px;display:flex;flex-direction:column;gap:10px;z-index:40}
.rail a{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.2)}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .layout{grid-template-columns:1fr 300px;gap:30px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .dlayout{grid-template-columns:1fr 290px}
  .fcols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .nav,.icons{display:none}
  .burger{display:block}
  .langswbox-mob{display:inline-flex;align-items:center;gap:3px;margin-left:auto;margin-right:6px}
  .site-h .bar{padding:14px 20px}
  .mobnav{display:none;background:var(--dark);border-top:1px solid #3a3a3a}
  body.menu-open .mobnav{display:block}
  .mobnav ul{list-style:none;margin:0;padding:8px 0}
  .mobnav>ul>li>a{display:block;color:#fff;font-weight:700;padding:13px 24px;font-size:16px}
  .mobnav .sub a{display:block;color:#bbb6ad;padding:9px 38px;font-size:14px}
  .mobnav .sub{border-left:2px solid var(--accent);margin:0 24px 8px}
  .layout{grid-template-columns:1fr;gap:30px;padding:34px 0 50px}
  .enq{position:static}
  .titleband h1{font-size:34px}
  .titleband .in{padding-top:32px;padding-bottom:32px}
  .grid{grid-template-columns:1fr 1fr}
  .dlayout{grid-template-columns:1fr}
  .side{position:static}
  .ngrid{grid-template-columns:1fr}
  .news .in{flex-direction:column;align-items:flex-start}
  .news form{max-width:none;width:100%}
}
@media(max-width:560px){
  .in{padding:0 18px}
  .grid{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr;gap:24px}
  .phero h1{font-size:30px}
  .titleband h1{font-size:28px}
  .searchbtn{width:100%;text-align:center}
  .rail{bottom:14px;right:12px}
  .rail a{width:38px;height:38px}
  .acc img{height:34px}
}
.mobnav{display:none}
@media(min-width:821px){.mobnav{display:none!important}}
/* ============ SESSION 52 — structural exact-match to live ============ */
/* home hero block sits ~50px lower than live; nudge up (desktop only) */
.hero-inner{transform:translateY(-90px)}
@media(max-width:820px){.hero-inner{transform:translateY(-14vh)}}
@media(max-width:560px){.hero-inner .btns{flex-direction:column}.hero-inner .btn-out,.hero-inner .searchbtn{width:100%;text-align:center}}
html,body{overflow-x:clip}
/* help cards — cream typographic cards, hover turns orange + shows "View more" (matches live) */
/* ---- LISTINGS (live): dark filter bar + price-on-image cards, no title band ---- */
.lfilter{background:var(--dark)}
.lfilter .in{padding:18px 16px}
.lfbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lf-loc{position:relative;flex:1;min-width:220px;display:flex;align-items:center;background:#fff;border-radius:8px;padding:0 12px}
.lf-ic{width:18px;height:18px;color:var(--mut);flex:none}
.lf-loc input{flex:1;border:0;background:transparent;padding:13px 10px;font:inherit;outline:none;min-width:0}
.lf-sel{border:0;border-radius:8px;background:#fff;padding:13px 14px;font:inherit;color:var(--ink);cursor:pointer;min-width:150px}
.lf-btn{border:0;border-radius:8px;padding:13px 28px;font:inherit;font-weight:800;cursor:pointer;background:var(--accent);color:#fff}
.lf-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.listhead{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--head);letter-spacing:-.025em;margin:34px 0 22px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 0 60px}
.pcard{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.18s}
.pcard:hover{box-shadow:0 12px 32px rgba(0,0,0,.12);transform:translateY(-2px)}
.pcard-img{position:relative;aspect-ratio:3/2;background:#EEE9DF;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-price{position:absolute;left:0;bottom:0;background:rgba(26,26,26,.82);color:#fff;font-family:Lato;font-weight:800;font-size:18px;padding:8px 14px;border-top-right-radius:10px}
.pcard-price small{font-size:11px;font-weight:700;opacity:.85}
.pcard-heart{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.pcard-heart svg{width:18px;height:18px;fill:none;stroke:var(--mut);stroke-width:2}
.pc-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#fff}
.pc-badge.agreed{background:var(--dark)}
.pc-badge.soon{background:var(--accent)}
.pcard-body{padding:16px 18px 20px}
.pcard-addr{font-family:Lato;font-weight:700;font-size:16px;color:var(--ink);line-height:1.3}
.pcard-loc{font-size:13px;color:var(--mut);margin:3px 0 12px}
.pcard-meta{display:flex;gap:16px;font-size:13px;color:var(--mut);border-top:1px solid var(--line);padding-top:11px}
@media(max-width:1024px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.lf-loc{flex:1 1 100%}.lf-sel{flex:1}.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}.lfbar>*{flex:1 1 100%}.lf-btn{flex:1}}
/* ---- NEWS ARTICLE (live): centred single-column, no title band/breadcrumb/sidebar ---- */
.nart-head{text-align:center;max-width:820px;margin:0 auto;padding:50px 0 6px}
.nart-head h1{font-family:Lato;font-weight:800;font-size:33.75px;color:var(--head);letter-spacing:-.025em;line-height:1.12;margin:0 0 12px}
.nart-date{font-size:13px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.nart-body{max-width:820px;margin:0 auto;padding:24px 0 64px}
.nart-body.prose{max-width:820px}
.nart-body .bhero-img{margin:6px 0 30px}
@media(max-width:560px){.nart-head h1{font-size:27px}.nart-head{padding:34px 0 4px}}
/* ---- CONTACT (live): centred hero, no title band ---- */
.chero{background:var(--paper);border-bottom:1px solid var(--line);text-align:center}
.chero .in{padding:54px 16px 44px}
.chero h1{font-family:Lato;font-weight:800;font-size:45px;color:var(--head);letter-spacing:-.025em;line-height:1.05;margin:0 0 14px}
.chero .cmeta{font-size:18px;color:var(--body)}
.chero .cmeta a{color:var(--accent)}.cmap{margin:18px 0 22px;border-radius:10px;overflow:hidden;line-height:0}.cmap iframe{width:100%;height:260px;border:0;display:block}
@media(max-width:560px){.chero h1{font-size:30px}}

/* ===== BATCH 2: live-style listing controls + card carousel + detail gallery ===== */
.lcontrols{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:30px 0 18px}
.lcontrols .listhead{margin:0}
.lctl-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lctl{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 14px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.lctl svg{width:15px;height:15px}
.lctl:hover{border-color:var(--accent);color:var(--accent)}
.lctl.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sortwrap{gap:6px}
.sortwrap select{border:0;background:transparent;font:inherit;font-weight:800;color:var(--accent);cursor:pointer;outline:none}
/* card image carousel */
.pcard-img .pcs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.pcard-img .pcs.on{opacity:1}
.pcarw{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.86);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;z-index:3}
.pcard:hover .pcarw{opacity:1}
.pcarw.prev{left:10px}.pcarw.next{right:10px}
.pcard-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:5px;justify-content:center;z-index:3}
.pcard-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.pcard-dots i.on{background:#fff}
/* ---- detail page ---- */
.detailx{padding:26px 0 64px}
.dxtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dxback{color:var(--accent);font-weight:700;font-size:14px}
.dxrefr{color:var(--mut);font-size:13px}
.dxtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.dxtab{border:0;background:#F1ECE2;color:var(--ink);font:inherit;font-weight:700;font-size:13px;padding:9px 16px;border-radius:8px 8px 0 0;cursor:pointer}
.dxtab.on{background:var(--dark);color:#fff}
.dxpane{display:none}
.dxpane.on{display:block}
.dxstage{position:relative;aspect-ratio:16/10;background:#EEE9DF;border-radius:10px;overflow:hidden}
.dxs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.dxs.on{opacity:1}
.dxnoimg{opacity:1}
.dxnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:24px;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
.dxnav.prev{left:14px}.dxnav.next{right:14px}
.dxcount{position:absolute;right:14px;bottom:14px;background:rgba(26,26,26,.8);color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;z-index:3}
.dxbadge{position:absolute;top:14px;left:14px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:#fff;z-index:3}
.dxbadge.tolet{background:var(--accent)}.dxbadge.agreed{background:var(--dark)}.dxbadge.soon{background:var(--accent)}
.dxthumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px}
.dxt{flex:0 0 auto;width:88px;height:62px;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#EEE9DF;cursor:pointer;padding:0}
.dxt.on{border-color:var(--accent)}
.dxt img{width:100%;height:100%;object-fit:cover}
.dxfp{width:100%;border-radius:10px;border:1px solid var(--line);margin-bottom:12px}
.dxvt,.dxmap{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.dxvt iframe,.dxmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dxmap{aspect-ratio:16/8;background:#e8e8e8}
/* 3D view (9 Aug). gmp-map-3d is a custom element with no intrinsic size — without an explicit
   fill it lays out at 0 height and never paints, the same class of trap as a percentage-height
   map div. The satellite embed sits underneath until the 3D canvas proves itself. */
/* TfL line-status chip (9 Aug) — per leg. Good service is deliberately QUIET (it is the expected
   state and should not shout); a disruption gets the warm pill so the eye lands on it. */
.sm-tfls{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font:700 11px Lato,sans-serif;
  letter-spacing:.02em;background:#F3E2D6;color:#9A3A12;vertical-align:1px}
.sm-tfls.ok{background:#E4EBDD;color:#4A6033}
.dx3d gmp-map-3d{display:block;width:100%;height:100%}
.dx3dnote{color:var(--mut);font-size:12.5px;line-height:1.5;margin:9px 0 0}
.dxlayout{display:grid;grid-template-columns:1fr 360px;gap:44px;padding-top:30px}
.dxh1{font-family:Lato;font-weight:900;font-size:30px;color:var(--ink);margin:20px 0 4px;letter-spacing:-.02em;line-height:1.1}
.dxsub{color:var(--mut);font-size:15px;margin-bottom:18px}
.dxfacts{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:8px}
.dxfact b{display:block;font-family:Lato;font-weight:900;font-size:20px;color:var(--ink)}
.dxfact span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.dxsec{font-family:Lato;font-weight:900;font-size:21px;color:var(--head);margin:30px 0 12px}
.prose-d{font-size:15.5px;line-height:1.6}
.prose-d p{margin:0 0 14px}
.dxfeatures{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.dxfeatures li{position:relative;padding-left:22px;font-size:15px;line-height:1.4}
.dxfeatures li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.dxside{align-self:start;position:sticky;top:96px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.dxprice{font-family:Lato;font-weight:900;font-size:30px;color:var(--ink)}
.dxprice small{font-size:13px;color:var(--mut);font-weight:700}
.dxsstatus{display:inline-block;font-size:12px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin:4px 0 16px}
.dxcta{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:800;padding:14px;border-radius:999px;margin-bottom:10px}
.dxcta.alt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.dxcta-row{display:flex;gap:10px}
.dxcta2{flex:1;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.dxcta2.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.dxkvs{margin-top:18px;font-size:14px}
.dxkv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);color:var(--mut)}
.dxkv b{color:var(--ink);text-align:right}
/* S136 · viewing-light strip (daylight spine; .dxlt-wx/.dxlt-dry are the weather overlay's slots — :empty keeps them silent until it lands) */
.dxlight{margin-top:14px;padding:13px 13px 12px;border:1px solid var(--line);border-radius:12px;background:var(--cream)}
.dxlt-h{font:800 10.5px/1 Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:9px}
.dxlt-chips{display:flex;gap:4px}
.dxlt-c{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 1px 6px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.dxlt-c.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.dxlt-dw{font:800 9.5px/1 Lato,sans-serif;color:var(--mut);text-transform:uppercase}
.dxlt-c.on .dxlt-dw{color:var(--accent)}
.dxlt-dn{font:900 13.5px/1 Lato,sans-serif;color:var(--ink)}
.dxlt-bar{display:block;width:82%;height:5px;border-radius:3px;background:var(--dark);position:relative;overflow:hidden}
.dxlt-bar i{position:absolute;top:0;bottom:0;background:var(--cream)}
.dxlt-wx{font:700 9.5px/1.1 Sen,sans-serif;color:var(--mut);min-height:0}
.dxlt-wx:empty{display:none}
.dxlt-head{margin:10px 0 3px;font:800 13.5px/1.3 Lato,sans-serif;color:var(--ink)}
.dxlt-head b{color:var(--accent)}
/* rail DESIGN C (Harvey's pick 10 Aug) + option A's sentence line: labelled hour cells, colour steps
   r1/r2/r3 at ≥10/≥25/≥40% (r3 = the stated umbrella threshold), night cells dark, dry day = one pill. */
.dxlt-wxline{font:700 12px/1.45 Sen,sans-serif;color:var(--ink);margin:2px 0 3px}
.dxlt-wxline.umb{color:#B23F11}   /* umbrella-level day: the plain-English instruction reads in the r3 burnt tone */
.dxlt-wxline:empty{display:none}
.dxlt-rail{display:block;margin:4px 0 2px}
.dxlt-rail:empty{display:none}
/* MOCKUP 2 (Harvey 03:2x): full-width under the thumbnails — ONE 14-cell timeline, timetable-style,
   hour on every cell via ::before. Below 640px the row wraps into two rows of seven. */
.dxlt-cells{display:flex;flex-wrap:wrap;gap:3px}
@media(max-width:640px){.dxlt-cells b{flex-basis:calc(100%/7 - 3px)!important}}
/* REVERSED (Harvey 03:0x): DRY hours sit on sand; WET cells go WHITE so the emoji pops.
   Umbrella-level (r3) keeps the burnt highlight — the one colour that still means something. */
.dxlt-cells b{flex:1 0 calc(100%/14 - 3px);min-height:58px;border-radius:6px;background:#E9DFC8;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:700 10px/1 Sen,sans-serif;color:var(--mut);overflow:hidden;padding:4px 0}
.dxlt-cells b::before{content:attr(data-h);font:700 8px/1 Sen,sans-serif;opacity:.75}
.dxlt-cells b.n::before{color:#F6F1E7;opacity:.55}
.dxlt-cells b u{font-size:22px;line-height:1.1;text-decoration:none}
.dxlt-cells b i{font:700 10px/1.1 Sen,sans-serif;font-style:normal}
.dxlt-cells b.n{background:var(--dark);border-color:var(--dark)}
.dxlt-cells b.r1{background:#fff;color:#4A4436}
.dxlt-cells b.r2{background:#fff;color:#4A4436}
.dxlt-cells b.r3{background:var(--accent-ink,#B23F11);border-color:var(--accent-ink,#B23F11);color:#fff}
.dxlt-legend{display:block;font:400 10px/1.5 Sen,sans-serif;color:var(--mut);margin-top:4px;font-style:normal}
.dxlt-drypill{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font:700 11.5px/1.4 Sen,sans-serif;color:var(--ink)}
.dxlt-dry{font:700 12px/1.4 Sen,sans-serif;color:var(--ink);margin:2px 0 3px}
.dxlt-dry:empty{display:none}
.dxlt-fine{font:400 11px/1.5 Sen,sans-serif;color:var(--mut)}
.dxenqsec{margin-top:10px}
.dxenqsec .enq{position:static;box-shadow:none;padding:0;border:0}
.dxblock{padding-top:10px}
.dxsimilar{padding-top:14px}.dxexplore{padding-top:14px}.dxareagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px;margin-top:6px}.dxarea{display:flex;flex-direction:column;gap:8px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:22px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.dxarea:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 30px rgba(26,26,26,.09)}.dxarea-pc{font:800 .68rem/1 Lato;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}.dxarea h3{font:900 1.12rem/1.2 Lato;color:var(--head);margin:0;min-height:2.4rem}.dxarea p{font:400 .85rem/1.55 Sen;color:#6F6A60;margin:0}.dxarea-go{margin-top:auto;padding-top:8px;font:800 .8rem/1 Sen;color:var(--accent)}.nav a[href="james.html"],.mobnav a[href="james.html"],.nav a[href="james"],.mobnav a[href="james"]{color:var(--accent)!important}
.dxsimilar .pgrid{padding-bottom:0}
@media(max-width:980px){.dxlayout{grid-template-columns:1fr;gap:28px}.dxside{position:static}.dxfeatures{grid-template-columns:1fr}}
@media(max-width:560px){.dxstage{aspect-ratio:4/3}.dxh1{font-size:24px}.lcontrols{flex-direction:column;align-items:flex-start}}


/* S53d: home Compliance-first rebuilt as a responsive HTML card (was a baked PNG whose text hugged the edge); internal padding keeps text inset at any width */
.habout-card{background:#F3EEE2;border-radius:10px;padding:46px 44px;display:flex;flex-direction:column;justify-content:center;min-height:360px}
.habout-card .hc-wm{align-self:flex-start;font-size:11px;letter-spacing:.14em;color:#8a8276;font-weight:800;border-bottom:1.6px solid var(--accent);padding-bottom:6px;margin-bottom:30px}
.habout-card .hc-h{font-family:Lato;font-weight:900;font-size:40px;line-height:1.06;letter-spacing:-.02em}
.habout-card .hc-h b{display:block;color:var(--ink);font-weight:900}
.habout-card .hc-h i{display:block;color:var(--accent);font-style:normal;font-weight:900}
.habout-card .hc-sub{margin:22px 0 0;color:var(--mut);font-size:15px;line-height:1.5}
@media(max-width:560px){.habout-card{padding:34px 26px;min-height:0}.habout-card .hc-h{font-size:30px}}

/* lead-capture forms */
.enq .lead-msg,.news .lead-msg{margin-top:10px;font-size:14px;line-height:1.4;min-height:1px}
.lead-msg.ok{color:#1a7f37}
.lead-msg.err{color:#b42318}
/* WEB-036 — the prepared-enquiry banner. Sand/cream house palette; deliberately calm, not an alert:
   nothing has gone wrong, the form is simply filled in and waiting for the person to read it. */
.enq-prefill{margin:0 0 14px;padding:12px 14px;border:1px solid #e3d9c6;border-left:3px solid #b08d57;
  background:#faf6ee;color:#3f3a33;font-size:14px;line-height:1.5;border-radius:4px}
.enq-prefill strong{color:#2b2721}
.enq-prefill.err{border-color:#e6cfcb;border-left-color:#b42318;background:#fdf6f5;color:#7a2e26}
@media (prefers-color-scheme:dark){
  .enq-prefill{background:#2a2723;border-color:#4a423a;color:#e8e2d8}
  .enq-prefill strong{color:#f5f0e6}
}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
form.lead-form button[disabled],form.news-form button[disabled]{opacity:.6;cursor:default}

/* ---------- mobile calibration ---------- */
@media(max-width:1024px){.rail{display:none}}
@media(max-width:640px){.in{padding:0 20px}.hero-inner{padding:0 20px}}
@media(max-width:640px){.detailx{padding-bottom:48px}}
/* iOS Safari auto-zooms inputs <16px on focus — force 16px on touch widths (no desktop change) */
@media(max-width:820px){input,textarea,select{font-size:16px!important}}
@media(max-width:820px){
  body.menu-open{overflow:hidden}
  body.menu-open .mobnav{max-height:calc(100vh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobnav>ul>li.has-sub{position:relative}
  .mobnav .msub{position:absolute;top:3px;right:10px;background:none;border:0;color:#fff;font-size:22px;line-height:1;width:46px;height:46px;cursor:pointer;opacity:.85}
  .mobnav>ul>li.open>.msub{transform:rotate(180deg);color:var(--accent)}
  .mobnav .sub{display:none}
  .mobnav>ul>li.open>.sub{display:block}
}

/* ---------- Street View launch panel (keyless fallback) ---------- */
.dxsv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:420px;background:#f1efe9;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-align:center;text-decoration:none;transition:background .15s,color .15s}
.dxsv:hover{background:#e9e5dc;color:var(--accent)}
.dxsv b{font-family:Lato;font-weight:900;font-size:20px}
.dxsv-sub{color:var(--mut);font-size:14px;max-width:300px;padding:0 16px}
@media(max-width:640px){.dxsv{min-height:320px}}

/* ---------- home search autocomplete ---------- */
.hsr{position:relative;flex:1;min-width:0;display:flex}
.hsr>input{flex:1;border:0;background:transparent;padding:14px 10px;font:inherit;min-width:0;outline:none}
.hsr-drop{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.18);z-index:30;overflow:hidden;text-align:left}
.hsr-drop.on{display:block}
.hsr-drop button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #F1ECE3;padding:13px 18px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.hsr-drop button:last-child{border-bottom:0}
.hsr-drop button:hover{background:#F6F1E8;color:var(--accent)}
@media(max-width:640px){.searchbar .searchbtn{width:auto;padding:13px 22px}}

/* ---------- saved properties (shortlist) + share popover (S58) ---------- */
.pcard-heart{cursor:pointer;transition:transform .12s,background .12s}
.pcard-heart:hover{background:#fff;transform:scale(1.08)}
.pcard-heart.on svg{fill:var(--accent);stroke:var(--accent)}
.ic-saved{position:relative;text-decoration:none}
.ic-saved svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.ic-saved.has svg{fill:#fff}
.ic-saved .saved-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#fff;color:var(--dark);font-size:10px;font-weight:800;line-height:16px;text-align:center}
.mob-saved .saved-count{color:var(--accent);margin-left:4px}
.dxsave{display:flex;align-items:center;justify-content:center;gap:7px}
.dxsave svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.dxsave.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.dxsave.on svg{fill:#fff;stroke:#fff}
.dxshare{position:relative;flex:1;display:flex}
.dxshare-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px}
.dxshare-btn svg{width:15px;height:15px}
.dxshare-pop{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 38px rgba(0,0,0,.17);padding:6px;z-index:30;display:flex;flex-direction:column;gap:1px}
.dxshare-pop[hidden]{display:none}
.dxsh{display:block;text-align:left;padding:11px 14px;border-radius:8px;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:none}
.dxsh:hover{background:#F6F1E8;color:var(--accent)}
.dxsh.dxcopy.ok{color:var(--accent)}
.savedx{padding-top:30px;padding-bottom:64px}
.savedx .listhead{margin:8px 0 22px}
.savedempty{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:32px;color:var(--mut);font-size:15px;line-height:1.6;max-width:600px}
.savedempty a{color:var(--accent);font-weight:800;text-decoration:none}
.pcard-saved .pcard-img{display:block}
.pcard-saved .pcard-addr{display:block;text-decoration:none}
.pcard-saved .savedrm{margin-top:13px;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:inherit;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer}
.pcard-saved .savedrm:hover{border-color:var(--accent);color:var(--accent)}
.savemodal{position:fixed;inset:0;z-index:1000;background:rgba(26,26,26,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.savemodal[hidden]{display:none}
.savemodal-card{background:#fff;border-radius:16px;max-width:418px;width:100%;padding:32px 28px 26px;position:relative;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.32)}
.savemodal-x{position:absolute;top:12px;right:15px;background:none;border:0;font-size:26px;line-height:1;color:var(--mut);cursor:pointer}
.savemodal-ic{width:54px;height:54px;border-radius:50%;background:#F6F1E8;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.savemodal-ic svg{width:26px;height:26px;fill:var(--accent);stroke:var(--accent)}
.savemodal-card h3{font-family:Lato;font-weight:900;font-size:22px;color:var(--ink);margin:0 0 8px}
.savemodal-card>p{color:var(--body);font-size:14.5px;line-height:1.5;margin:0 0 16px}
.savemodal-benefits{list-style:none;padding:0;margin:0 0 18px;text-align:left}
.savemodal-benefits li{position:relative;padding:5px 0 5px 27px;font-size:14px;color:var(--body)}
.savemodal-benefits li:before{content:"\2713";position:absolute;left:2px;top:5px;color:var(--accent);font-weight:900}
.save-form input:not(.hp){width:100%;border:1px solid var(--line);border-radius:999px;padding:13px 18px;margin:0 0 11px;font:inherit;color:var(--ink)}
.save-form .send{display:block;width:100%;background:var(--accent);color:#fff;border:0;font-weight:800;font-size:15px;padding:14px;border-radius:999px;cursor:pointer}
.savemodal-skip{display:block;width:100%;background:none;border:0;color:var(--mut);font:inherit;font-size:13px;font-weight:700;padding:11px 0 0;cursor:pointer;text-decoration:underline}
body.modal-lock{overflow:hidden}
/* ---------- tour pop-out lightbox (full-screen, matches live) ---------- */
.dxtab-lb{position:relative;padding-right:30px}
.dxtab-lb:after{content:"\2197";position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.7}
a.dxtab{display:inline-block;text-decoration:none;line-height:normal}
.dxtab-film{background:var(--dark);color:#fff}
.dxtab-film:after{content:"\25B6";font-size:10px;opacity:.9;color:var(--accent)}
.dxlb-body video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.dxlb{position:fixed;inset:0;z-index:1200;background:#fff;display:flex;flex-direction:column}
.dxlb[hidden]{display:none}
.dxlb-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px solid var(--line);flex:none}
.dxlb-title{font-family:Lato;font-weight:900;font-size:20px;color:var(--ink)}
.dxlb-x{background:none;border:0;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;width:44px;height:44px;flex:none}
.dxlb-body{flex:1;position:relative;background:#000;min-height:0}
.dxlb-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* S65: cap detail photo gallery height so the photo + thumbnail strip fit the viewport on desktop (16/10 overflowed wide screens) */
@media(min-width:561px){.dxstage{max-height:max(380px,calc(100vh - 330px))}}
/* S65b: detail gallery moved into the left grid column beside the booking sidebar; min-width:0 lets the 1fr track shrink so the thumbnail strip can't blow out the grid */
.dxinfo{min-width:0}
.dxthumbs{min-width:0}
/* S65d: detail refinements - photo full column width (flush with the thumbnail wheel) + slightly taller; Bed/Bath/Size/Reception moved into the sidebar and centred evenly across */
.dxstage{width:100%}
.dxlayout{padding-top:12px}
@media(min-width:561px){.dxstage{max-height:max(380px,calc(100vh - 315px))}}
.dxside .dxfacts{display:flex;justify-content:space-between;gap:6px;flex-wrap:nowrap;margin:8px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.dxside .dxfacts>*{flex:1 1 0;min-width:0;text-align:center}
/* S65g: gallery photos pulled at full hi-res (uncropped); expand button (top-right of the stage) opens the WHOLE photo in the full-screen lightbox with prev/next. Gallery itself stays edge-to-edge (cover). */
.dxexpand{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;transition:background .15s}
.dxexpand:hover{background:rgba(0,0,0,.72)}
.dxlb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dxlb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1a1a1a;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dxlb-nav:hover{background:#fff}
.dxlb-nav.prev{left:16px}
.dxlb-nav.next{right:16px}
@media(max-width:560px){.dxexpand{top:8px;right:8px}.dxlb-nav{width:40px;height:40px;font-size:20px}}

/* ---- Meet The Team roster (S71) ---- */
.tm-h{font-family:Lato,system-ui,sans-serif;font-weight:900;font-size:26px;letter-spacing:.02em;color:var(--ink);margin:38px 0 20px}
.tmgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px;margin:18px 0 12px}
.tmcard{margin:0;text-align:center}
.tmpic{width:100%;aspect-ratio:1/1;overflow:hidden;background:transparent}
.tmpic img{width:100%;height:100%;object-fit:cover;display:block}
.tmcard figcaption{margin-top:13px}
.tmname{display:block;font-family:Lato,system-ui,sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
.tmrole{display:block;color:var(--mut);font-size:13.5px;line-height:1.4;margin-top:3px}
@media(max-width:860px){.tmgrid{grid-template-columns:repeat(3,1fr);gap:24px 18px}}
@media(max-width:560px){.tmgrid{grid-template-columns:1fr 1fr;gap:20px 14px}.tm-h{font-size:23px}}

/* Accessibility: keyboard skip link (offscreen until focused) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;font-weight:700;text-decoration:none;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* Cookie-consent banner (wired to GA4 Consent Mode) */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:2147483001;background:var(--dark);color:#fff;box-shadow:0 -4px 24px rgba(0,0,0,.28)}
.consent[hidden]{display:none}
.consent-in{max-width:1440px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.consent-tx{margin:0;font-size:14px;line-height:1.55;color:#ECE7DF;flex:1 1 300px}
.consent-tx a{color:var(--accent);text-decoration:underline}
.consent-btns{display:flex;gap:10px;flex-shrink:0}
.consent-yes,.consent-no{font:inherit;font-weight:700;font-size:14px;padding:9px 22px;border-radius:7px;cursor:pointer;border:1px solid transparent;line-height:1.2}
.consent-yes{background:var(--accent);color:#fff}
.consent-yes:hover{filter:brightness(1.06)}
.consent-no{background:transparent;color:#ECE7DF;border-color:rgba(255,255,255,.4)}
.consent-no:hover{border-color:#fff}
@media(max-width:560px){.consent-in{padding:12px 16px;gap:12px}.consent-btns{width:100%}.consent-yes,.consent-no{flex:1}}

/* ===== transparency scoreboard band (S77) ===== */
.statband{background:#F3EEE2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statband .in{padding:54px 16px}
.sb-head{text-align:center;max-width:760px;margin:0 auto 32px}
.sb-kick{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}.sb-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.sb-head h2{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--head);margin:0 0 12px;letter-spacing:-.025em}
.sb-sub{font-size:15px;line-height:1.55;color:#555;margin:0}
.sb-asat{color:var(--mut);font-weight:700;white-space:nowrap}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px;display:flex;flex-direction:column;text-align:left;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.stat::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--accent)}
a.stat:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(26,26,26,.09);border-color:var(--accent)}
.stat-n{font-family:Lato;font-weight:900;font-size:33px;line-height:1.02;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-l{margin-top:10px;font-family:Lato;font-weight:800;font-size:13.5px;color:var(--head);line-height:1.25}
.stat-s{margin-top:5px;font-size:12.5px;color:var(--mut);line-height:1.3}
a.stat:hover .stat-n{color:var(--accent)}
a.stat-team,.stat-team{background:var(--dark);border-color:var(--dark)}
.stat-team .stat-n,.stat-team .stat-l{color:#fff}
.stat-team .stat-s{color:#E9CBB0}
a.stat-team:hover{border-color:var(--ink);box-shadow:0 12px 26px rgba(26,26,26,.18)}
a.stat-team:hover .stat-n{color:var(--accent)}
.sb-cta{text-align:left;margin-top:30px}
.sb-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:800;font-size:15px;padding:15px 26px;border-radius:999px;text-decoration:none;transition:filter .15s}
.sb-btn:hover{filter:brightness(.94)}
@media(max-width:560px){.statgrid{grid-template-columns:repeat(2,1fr);gap:12px}.stat-n{font-size:27px}.statband .in{padding:42px 18px}}
/* ===== /our-properties postcode board ===== */
.pcwrap{padding:8px 0 56px}
.pcintro{font-size:16px;line-height:1.6;color:#333;max-width:820px;margin:18px 0 6px}
.pcintro strong{color:var(--ink)}
.pcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:24px}
.pcrow{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.pcrow:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 22px rgba(26,26,26,.07)}
.pc-d{font-family:Lato;font-weight:900;font-size:22px;color:var(--ink);letter-spacing:-.01em}
.pc-n{font-weight:800;font-size:13px;color:var(--accent);margin-top:4px}
.pc-r{font-size:12.5px;color:var(--mut);margin-top:2px}
.pcfoot{font-size:13px;color:var(--mut);margin-top:26px;max-width:820px}
/* ===== /our-properties map (Leaflet, S77) ===== */
.hwjmap{height:460px;width:100%;border-radius:12px;border:1px solid var(--line);margin:22px 0 10px;position:relative;z-index:0;background:#EDE7DB}
.hwjmap .leaflet-container{font:inherit;background:#EDE7DB;border-radius:12px}
.leaflet-popup-content{font:inherit;font-size:13px}
.leaflet-popup-content b{font-family:Lato;font-weight:900;color:var(--ink)}
.pcmaplegend{font-size:13px;color:var(--mut);margin:4px 0 0;display:flex;align-items:center;gap:9px;line-height:1.4}
.pcdot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--accent);border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.pch2{font-family:Lato;font-weight:800;font-size:22px;color:var(--head);margin:34px 0 2px;letter-spacing:-.02em}
@media(max-width:560px){.hwjmap{height:360px}}
/* ===== map rent-colour legend (S77) ===== */
.pcmlegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 2px;font-size:12.5px}
.pcml-t{font-weight:800;color:var(--head)}
.pcml-i{display:inline-flex;align-items:center;gap:6px;color:var(--mut)}
.pcml-i i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block}
/* ===== map postcode-tile interaction (S77) ===== */
.pcrow{cursor:pointer}
.pcrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pcrow.active{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.pcrow.active .pc-d{color:var(--accent)}
.pch2row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:34px}
.pch2row .pch2{margin:0}
.pchint{font-size:13px;color:var(--mut);margin:4px 0 0}
.pcmreset{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:800;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s}
.pcmreset:hover{border-color:var(--accent);color:var(--accent)}
/* Leaflet tile fix: the site's global img rules force tiles to opacity:0 and over-scale them */
.hwjmap img.leaflet-tile{max-width:none !important;width:256px !important;height:256px !important;opacity:1 !important;display:block !important}
.hwjmap .leaflet-pane img{max-width:none}

/* === Warm two-tone (S-AGH): cream boxes on a sand page; solid-black nav === */
.tcard,.lncard,.card,.pcard,.pcard-saved,.enq,.side,.savemodal-card,.drop{background:var(--cream)}
.lnews,.poploc{background:var(--paper)}
.site-h,.site-h.over,.site-h.over.scrolled{background:transparent;box-shadow:none}
.site-h{position:relative;z-index:50}        /* interior: in normal flow, scrolls away (not sticky) */
.site-h.over{position:absolute;top:0;left:0;right:0}  /* home: over the hero, scrolls away (not fixed) */
.site-h .nav>li>a,.site-h .logo.txt{color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.5)}
.site-h .nav>li>a:hover,.site-h .nav>li>a.on{color:var(--accent)}
.site-h .ic{color:var(--ink)}
.site-h .ic:hover{color:#fff}
.site-h .burger span{background:var(--ink)}
.site-h .langsw.on{color:var(--ink)!important;text-shadow:none!important}

/* === Restyle completion (Harvey, site-wide): remaining WHITE surfaces → cream === */
/* controls, search bars, listing Share/Save/Sort, selects, newsletter form, detail price box + secondary CTAs, scoreboard tiles, postcode tiles, badges */
.searchbar,.hsr-drop,.seg,.controls select,.lctl,.lf-loc,.lf-sel,.news form,.dxside,.dxcta.alt,.dxcta2,.stat,.pcrow,.pcmreset,.hcard-more,.pill,.pill.agreed,.cta.ghost{background:var(--cream)}
/* form fields sit inside cream boxes — give them the sand page tone (not white) so they read as fields */
.enq input,.enq textarea,.save-form input:not(.hp){background:var(--paper)}

/* === Homepage uniform sand bg + area-guide inset dividers (Harvey) === */
:root{--div:#C9C2B4}
/* one uniform page tone — flatten the band backgrounds; cards stay the lighter cream */
.hsearch,.help,.statband{background:var(--paper)}
.habout-card,.hcard{background:var(--cream)}
/* drop the old full-bleed section borders */
.hsearch{border-bottom:0}
.statband{border-top:0;border-bottom:0}
.tmon{border-top:0}
.vids{border-top:0}
.lnews{border-top:0}
.poploc{border-top:0}
/* same content-width editorial inset line as the area guides, between sections */
.help,.habout,.statband,.tmon,.vids,.lnews,.poploc{position:relative}
.help::before,.habout::before,.statband::before,.tmon::before,.vids::before,.lnews::before,.poploc::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(min(1240px,100%) - 2*clamp(18px,4vw,40px));height:1.5px;background:var(--div)}
/* detail Enquire box: restore padding + border so fields don't hug the edge (match Get In Touch) */
.dxenqsec .enq{padding:28px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.05)}

/* ============ S111 — homepage hero manifesto overlay (matched to Direction-1 reference) ============ */
.hero-inner{transform:none}
.hero-inner .hkick{display:block;margin:0 0 18px;font:800 12px/1.4 Lato,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#6F6A60}
.hero-inner .hkick::before{content:"";display:inline-block;vertical-align:middle;width:22px;height:2px;background:var(--accent);margin:-3px 12px 0 0}
.hero-inner h1{font-size:clamp(2.4rem,1.2rem + 4.5vw,4.6rem);line-height:1.02;letter-spacing:-.02em}
.hero-inner h1 span{display:block}
.hero-inner h1 .hdot{font-style:normal;color:var(--accent)}
.hero-inner .hscript{font:200 clamp(2.1rem,1.4rem + 2.4vw,3.4rem)/1.05 "Brittany Signature",cursive;color:var(--accent);letter-spacing:-.5px;margin:.35em 0 .15em}
.hero-inner .hsub{font:400 clamp(1.02rem,.95rem + .4vw,1.25rem)/1.5 Sen,system-ui,sans-serif;color:#6F6A60;margin:0 0 30px}
@media(max-width:820px){.hero-inner{transform:translateY(-6vh)}}
@media(max-width:560px){.hero-inner .hkick{font-size:11.5px;letter-spacing:.14em}}

/* ============ S111 — stats-band ledger intro (copy + CTAs + "The ledger" heading) ============ */
.sb-sub strong{font-weight:800;color:var(--head)}
.sb-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.sb-ledger{text-align:center;max-width:760px;margin:clamp(36px,5vw,58px) auto clamp(20px,3vw,30px)}
.sb-ledger h2{font-family:Lato;font-weight:800;font-size:28.125px;color:var(--head);letter-spacing:-.025em;margin:0 0 10px;line-height:1.1}
.sb-prov{display:inline-block;font-size:12px;letter-spacing:.04em;color:var(--mut);text-decoration:none}
.sb-prov:hover{color:var(--accent)}
@media(max-width:560px){.sb-ctas{flex-direction:column}.sb-ctas .searchbtn,.sb-ctas .btn-out{width:100%;text-align:center}}

/* ============ S111b — left-align stats band + uniform serif section headers (match the ledger/book bands) ============ */
.statband .sb-head{text-align:left;max-width:none;margin:0 0 clamp(22px,3vw,30px)}
.statband .sb-sub{max-width:610px}
.statband .sb-ctas{justify-content:flex-start}
.statband .sb-ledger{text-align:left;max-width:none;margin:clamp(40px,5vw,60px) 0 clamp(22px,3vw,30px)}
.statband .sb-head h2,.statband .sb-ledger h2,.habout h2{font-family:Lato,system-ui,-apple-system,Arial,sans-serif;font-weight:800;font-size:clamp(1.85rem,1.15rem + 2.3vw,3.1rem);line-height:1.05;letter-spacing:-.02em;color:var(--head)}


/* === HWJ /about reimagined (S118) — .abt-scoped, safe site-wide === */
/* ============================================================================
   HWJ /about — reimagined page styles (scoped under .abt so it can't leak into
   the global .site-h header / .site-f footer). Locked cream/sand house palette.
   Editorial tier: Lato display + Sen body, figures = Lato + tabular-nums (NO mono).
   Echoes: /landlords scaffold, /area-guides ahero + ledger, day-one-price seam.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.abt{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  /* on-light secondary + on-dark band tones (tokenised so the dark band is themeable) */
  --body-soft:#4d4a44;
  --on-dark:#e9e5dc; --on-dark-mut:#bbb6ad; --kicker-dark:#a39d93;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* contain any bleeding ghost glyph */
}

.abt *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.abt .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.abt section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.abt section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}
.abt .band-dark::before,
.abt .band-dark + section::before{ display:none; }
/* V4 dark->footer seam */
.abt .band-dark:last-child::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.abt h1,.abt h2,.abt h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.abt h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.abt h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.abt p{ margin:0 0 1.05em; }
.abt a{ color:inherit; }

/* keyboard focus — explicit, high-contrast, outline (not clipped by overflow:hidden) */
.abt a:focus-visible,
.abt .btn:focus-visible,
.abt .ab-ncard:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; }
.abt .band-dark a:focus-visible,
.abt .band-dark .btn:focus-visible{ outline-color:#fff; }

/* kicker: accent rule + uppercase tracked Lato */
.abt .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.abt .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.abt .kicker--d{ color:var(--kicker-dark); }

/* provenance stamp */
.abt .prov{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12px; letter-spacing:.01em; color:var(--mut);
  text-decoration:none;
}
.abt .prov::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; }
.abt a.prov:hover{ color:var(--accent-ink); }
@media (hover:none){ .abt .prov{ padding-block:11px; margin-block:-11px; } } /* ≥44px touch target */

/* citation / proof chip */
.abt .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.abt a.cite:hover{ border-color:var(--accent); transform:translateY(-1px); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — variant A (recommended): typographic lockup + live ledger ribbon
   ---------------------------------------------------------------------------- */
.abt .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.abt .hero .shell{ position:relative; }
.abt .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.0; letter-spacing:-.02em;
  max-width:16ch;
}
.abt .hero .dot{ color:var(--accent); }
.abt .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.18em 0 .1em; display:block; }
.abt .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:46ch; }

/* ledger ribbon */
.abt .ledger{
  margin-top:clamp(24px,3vw,38px);
  border-top:1.5px solid var(--div);
  padding-top:clamp(20px,2.4vw,30px);
}
.abt .ledger-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,30px);
}
.abt .led-n{ display:block; font-family:var(--display); font-weight:900;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink);
  font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem); line-height:1; }
.abt .led-l{ display:block; margin-top:8px; font-size:13px; line-height:1.35; color:var(--mut);
  text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.abt .ledger-foot{ margin-top:clamp(16px,2vw,24px); }

/* ----------------------------------------------------------------------------
   BLOCK: who-we-are — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.abt .ab-prose{ max-width:62ch; font-size:1.0625rem; line-height:1.7; color:var(--body); }
.abt .ab-prose p strong{ color:var(--ink); }
.abt .ab-prose a{ color:var(--accent-ink); text-underline-offset:3px; text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.abt .ab-prose a:hover{ text-decoration-color:var(--accent); }
.abt .ab-who-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.abt .ab-who-aside{ position:sticky; top:96px; }
.abt .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.abt .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: signature-data — the five pillars (numbered, cited)  [recommended]
   The numeral "inks in": solid accent fill rises from the baseline on scroll.
   Default (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   ---------------------------------------------------------------------------- */
.abt .pillars-intro{ max-width:62ch; font-size:1.0625rem; line-height:1.7; margin-bottom:clamp(34px,5vw,64px); }
.abt .pillars{ display:grid; gap:0; }
.abt .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(30px,4vw,52px) 0;
  border-top:1px solid var(--line);
}
.abt .pillar:first-child{ border-top:0; }
.abt .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;                 /* optical: seat the numeral toward the heading cap-line */
  color:var(--accent);              /* no-JS / default: solid */
}
html.js .abt .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.abt .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .abt .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .abt .pillar.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .abt .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .abt .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.abt .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .5em;
  letter-spacing:-.02em; }
.abt .pillar-b{ max-width:64ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.abt .pillar-b a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.abt .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.abt .pillars-foot{ max-width:62ch; font-size:1.0625rem; line-height:1.7; margin-top:clamp(34px,5vw,60px); }
.abt .pillars-foot a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }

/* ----------------------------------------------------------------------------
   BLOCK: latest-news — cream article cards
   ---------------------------------------------------------------------------- */
.abt .ab-news-head{ margin-bottom:clamp(26px,3vw,42px); }
.abt .ab-news-foot{ text-align:center; margin-top:clamp(28px,4vw,48px); }
.abt .ab-ncards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.abt .ab-ncard{ display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.abt .ab-ncard:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(26,26,26,.10); border-color:var(--accent); }
.abt .ab-ncard img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--soft); }
.abt .ab-ncard-b{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.abt .ab-ncard-d{ font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-variant-numeric:tabular-nums; }
.abt .ab-ncard h3{ font-size:1.12rem; line-height:1.2; font-weight:800; }
.abt .ab-ncard p{ font-size:.95rem; line-height:1.55; color:var(--body); margin:0; }
.abt .ab-ncard .ab-rm{ margin-top:auto; font:800 12px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }

/* ----------------------------------------------------------------------------
   BLOCK: cta — variant A (recommended): dark band + seam
   ---------------------------------------------------------------------------- */
.abt .band-dark{ background:var(--dark); color:var(--on-dark); }
.abt .ab-cta{ text-align:left; }
.abt .ab-cta .shell{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,60px); align-items:center; }
.abt .ab-cta h2{ color:#fff; max-width:18ch; }
.abt .ab-cta-sub{ color:var(--on-dark-mut); font-size:var(--fs-lede); line-height:1.55; margin-top:14px; max-width:46ch; }
.abt .ab-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* buttons */
.abt .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:14px 28px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.abt .btn-solid{ background:var(--accent); color:#fff; }
.abt .btn-solid:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.abt .btn-ghost{ background:transparent; border-color:var(--accent); color:var(--ink); }
.abt .band-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.abt .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.abt .band-dark .btn-ghost:hover{ color:var(--accent); }
.abt .btn-james{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.abt .btn-james .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.abt .btn-james:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .abt [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .abt [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .abt .ab-who-grid{ grid-template-columns:1fr; }
  .abt .ab-who-aside{ position:static; }
  .abt .pull{ max-width:34ch; }                 /* keep a shapely measure when stacked */
  .abt .ab-cta .shell{ grid-template-columns:1fr; }
  .abt .ab-ncards{ grid-template-columns:1fr 1fr; }
  .abt .ab-ncard{ --d:0s; }                     /* stacked cards: rely on per-card IO timing */
}
@media (max-width:680px){
  .abt .ledger-row{ grid-template-columns:1fr 1fr; gap:22px 18px; }
  .abt .pillar{ grid-template-columns:1fr; gap:14px; }
  .abt .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:4px; }
  .abt .ab-ncards{ grid-template-columns:1fr; }
  .abt .hero h1{ max-width:none; }
}


/* === HWJ /meet-the-team reimagined (S118) — .mtt-scoped, safe site-wide === */
/* ============================================================================
   HWJ /meet-the-team — reimagined page styles. Scoped under .mtt so nothing can
   leak into the global .site-h header / .site-f footer; every page class is
   namespaced so two page stylesheets (about's .abt + this .mtt) can both ship in
   the global styles.css without colliding. Locked cream/sand house palette.
   Brand/people tier: typography + the team roster as cream cards is the one
   signature moment — no data gadget. Lato display + Sen body (no mono).
   Motion is a progressive enhancement gated behind html.js; reduced-motion honoured.
   ============================================================================ */

.mtt{
  /* --- locked tokens (the AA-passing house set) --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA on sand (4.6:1) */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA on sand (5.42:1) */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.mtt *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.mtt .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.mtt section{ padding-block:clamp(56px,9vw,110px); position:relative; }
.mtt .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(52px,7vw,96px); }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.mtt section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.mtt h1,.mtt h2,.mtt h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.mtt h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.mtt h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.mtt p{ margin:0 0 1.05em; }
.mtt a{ color:inherit; }

/* keyboard focus — explicit, high-contrast outline */
.mtt a:focus-visible,
.mtt button:focus-visible,
.mtt input:focus-visible,
.mtt textarea:focus-visible,
.mtt .mtt-card:focus-within{ outline:3px solid var(--accent-ink); outline-offset:3px; }

/* kicker: accent rule + uppercase tracked Lato */
.mtt .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.mtt .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* ----------------------------------------------------------------------------
   BLOCK: hero — title lockup + verbatim intro prose + pull-quote
   ---------------------------------------------------------------------------- */
.mtt .hero .shell{ position:relative; }
.mtt .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.0; letter-spacing:-.02em;
  max-width:14ch;
}
.mtt .hero .dot{ color:var(--accent); }
.mtt .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .1em; display:block; }

.mtt .mtt-intro{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start;
  margin-top:clamp(30px,4vw,52px);
}
.mtt .mtt-prose{ max-width:62ch; font-size:1.0625rem; line-height:1.7; color:var(--body); }
.mtt .mtt-prose p:last-child{ margin-bottom:0; }
.mtt .mtt-prose p strong{ color:var(--ink); }
.mtt .mtt-prose a{ color:var(--accent-ink); text-underline-offset:3px; text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.mtt .mtt-prose a:hover{ text-decoration-color:var(--accent); }
.mtt .mtt-aside{ position:sticky; top:96px; }
.mtt .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.mtt .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: roster — the strategic management team as cream cards (signature)
   Portraits ship as circular PNGs with the brand orange ring baked in, on
   transparent backgrounds — so they sit as-is, centred, no extra frame.
   ---------------------------------------------------------------------------- */
.mtt .mtt-roster{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px);
  margin-top:clamp(34px,5vw,60px);
}
.mtt .mtt-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px) 18px clamp(20px,2.2vw,26px);
}
html.js .mtt .mtt-card{ transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.mtt .mtt-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(26,26,26,.10); border-color:var(--accent); }
.mtt .mtt-card-pic{ width:clamp(118px,13vw,150px); aspect-ratio:1; position:relative; }
.mtt .mtt-photo{ width:100%; height:auto; aspect-ratio:1; display:block; border-radius:50%; background:transparent; }
html.js .mtt .mtt-photo{ transition:transform .3s var(--ease); }
.mtt .mtt-card:hover .mtt-photo{ transform:scale(1.03); }
.mtt .mtt-name{
  display:block; margin-top:18px; font-family:var(--display); font-weight:800;
  font-size:1.08rem; letter-spacing:-.01em; color:var(--ink); line-height:1.18;
}
.mtt .mtt-role{
  display:block; margin-top:7px; font:800 11.5px/1.35 var(--display);
  letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
}

/* James — the eighth member, woven in lightly */
.mtt .mtt-card--ai{ border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); }
.mtt .mtt-role--ai{ color:var(--accent-ink); }
.mtt .mtt-name--link{ text-decoration:none; }
html.js .mtt .mtt-name--link{ transition:color .2s var(--ease); }
.mtt .mtt-name--link:hover{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.mtt .mtt-ai-dot{
  position:absolute; right:9%; bottom:9%; width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2.5px solid var(--cream); box-shadow:0 0 0 0 rgba(255,105,51,.5);
}
@media (prefers-reduced-motion:no-preference){
  .mtt .mtt-ai-dot{ animation:mttPulse 2.6s var(--ease) infinite; }
}
@keyframes mttPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,105,51,.5);} 70%{ box-shadow:0 0 0 8px rgba(255,105,51,0);} 100%{ box-shadow:0 0 0 0 rgba(255,105,51,0);} }
@media (hover:none){ .mtt .mtt-name--link{ display:inline-block; padding-block:8px; margin-block:-8px; } }

/* ----------------------------------------------------------------------------
   BLOCK: enquiry — the live "Get In Touch" lead form, restyled as a cream panel
   ---------------------------------------------------------------------------- */
.mtt .mtt-enq{
  max-width:680px; margin:clamp(28px,3.4vw,44px) auto 0;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.mtt .mtt-enq .lead-form{ display:flex; flex-direction:column; gap:14px; }
.mtt .mtt-enq-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mtt .mtt-enq input,
.mtt .mtt-enq textarea{
  width:100%; background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; font:400 15px/1.4 var(--sans); color:var(--ink); -webkit-appearance:none;
}
html.js .mtt .mtt-enq input,
html.js .mtt .mtt-enq textarea{ transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.mtt .mtt-enq input::placeholder,
.mtt .mtt-enq textarea::placeholder{ color:var(--mut); }
.mtt .mtt-enq input:focus,
.mtt .mtt-enq textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.mtt .mtt-enq textarea{ min-height:130px; resize:vertical; }
.mtt .mtt-enq .hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }
.mtt .mtt-enq .send{
  align-self:flex-start; background:var(--dark); color:#fff; border:0; border-radius:999px;
  padding:14px 30px; font:800 15px/1 var(--display); letter-spacing:.01em; cursor:pointer;
}
html.js .mtt .mtt-enq .send{ transition:transform .2s var(--ease), filter .2s var(--ease); }
.mtt .mtt-enq .send:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.mtt .mtt-enq .send:disabled{ opacity:.6; cursor:default; transform:none; }
.mtt .mtt-enq .lead-msg{ font-size:14px; line-height:1.4; color:var(--mut); }
.mtt .mtt-enq .lead-msg.ok{ color:var(--accent-ink); }
.mtt .mtt-enq .lead-msg.err{ color:#b00020; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated; content fully visible if the script never runs)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .mtt [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .mtt [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .mtt .mtt-intro{ grid-template-columns:1fr; }
  .mtt .mtt-aside{ position:static; }
  .mtt .pull{ max-width:36ch; }
  .mtt .mtt-roster{ grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,24px); }
}
@media (max-width:560px){
  .mtt .hero h1{ max-width:none; }
  .mtt .mtt-enq-row{ grid-template-columns:1fr; }
}
@media (max-width:340px){
  .mtt .mtt-roster{ grid-template-columns:1fr; }   /* 2-up holds down to ~360; single column only on the very narrowest */
}


/* === HWJ /valuation reimagined (S118) — .vln-scoped, safe site-wide === */
/* ============================================================================
   HWJ /valuation — reimagined page styles. Scoped under .vln (own wrapper +
   namespaced classes) so it can't leak into the global header/footer and can't
   collide with about's .abt or meet-the-team's .mtt in the shared styles.css.
   Conversion / data tier: the signature moment is the dark "analyst console" —
   pick a postcode, see real managed-portfolio rent evidence, then book.
   Lato display + Sen body; figures = Lato + tabular-nums (no mono).
   Motion gated behind html.js; reduced-motion honoured.
   ============================================================================ */

.vln{
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   --body-soft:#4d4a44;
  --on-dark:#e9e5dc; --on-dark-mut:#bbb6ad; --kicker-dark:#a39d93;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper); color:var(--body); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.vln *{ box-sizing:border-box; }

/* shell + rhythm */
.vln .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.vln section{ padding-block:clamp(56px,9vw,110px); position:relative; }
.vln .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(44px,6vw,80px); }

/* inset dividers (content-width); suppressed at dark-band edges */
.vln section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad)); height:1.5px; background:var(--div);
}
.vln .band-dark::before, .vln .band-dark + section::before{ display:none; }

/* type */
.vln h1,.vln h2,.vln h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.vln h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.vln h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.vln p{ margin:0 0 1.05em; }
.vln a{ color:inherit; }

.vln a:focus-visible,.vln .btn:focus-visible,.vln select:focus-visible,
.vln input:focus-visible,.vln textarea:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; }
.vln .band-dark a:focus-visible,.vln .band-dark select:focus-visible,.vln .band-dark .btn:focus-visible{ outline-color:#fff; }

/* kicker */
.vln .kicker{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800;
  font-size:12px; line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin:0 0 18px; }
.vln .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.vln .kicker--d{ color:var(--kicker-dark); }

/* provenance + citation chips */
.vln .prov{ display:inline-flex; align-items:center; gap:8px; font:400 12px/1 var(--sans); color:var(--mut); text-decoration:none; }
.vln .prov::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; }
.vln .prov--d{ color:var(--on-dark-mut); }
.vln a.prov:hover{ color:var(--accent); }
.vln .cite{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line);
  border-radius:999px; background:var(--cream); color:var(--accent-ink); font-size:12.5px; font-weight:700; text-decoration:none; }
.vln a.cite{ transition:border-color .2s var(--ease), transform .2s var(--ease); }
.vln a.cite:hover{ border-color:var(--accent); transform:translateY(-1px); }

/* buttons */
.vln .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px; font-family:var(--display);
  font-weight:800; font-size:15px; letter-spacing:.01em; padding:14px 28px; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:transform .2s var(--ease), filter .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.vln .btn-solid{ background:var(--accent); color:#fff; }
.vln .btn-solid:hover{ filter:brightness(1.07); transform:translateY(-2px); }
.vln .btn-ghost{ background:transparent; border-color:var(--accent); color:var(--ink); }
.vln .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ---------------------------------------------------------------- hero */
.vln .hero h1{ font-size:var(--fs-display); font-weight:900; line-height:1.0; letter-spacing:-.02em; max-width:15ch; }
.vln .hero .dot{ color:var(--accent); }
.vln .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.14em 0 .12em; display:block; }
.vln .hero-sub{ font-size:var(--fs-lede); line-height:1.6; color:var(--body-soft); max-width:56ch; }

/* ---------------------------------------------------- tool: dark console */
.vln .band-dark{ background:var(--dark); color:var(--on-dark); }
.vln .vln-tool h2{ color:#fff; }
.vln .vln-tool-lede{ color:var(--on-dark-mut); font-size:var(--fs-lede); line-height:1.6; max-width:60ch; margin-top:6px; }

.vln .vln-console{
  margin-top:clamp(26px,3.4vw,44px); border:1px solid rgba(255,255,255,.13); border-radius:var(--r);
  background:rgba(255,255,255,.04); padding:clamp(22px,3vw,40px);
}
.vln .vln-console-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 28px; }
.vln .vln-field{ display:block; min-width:min(340px,100%); }
.vln .vln-field-l{ display:block; font:800 11.5px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:10px; }
.vln .vln-select-wrap{ position:relative; display:block; }
.vln .vln-select-wrap::after{ content:""; position:absolute; right:18px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.vln .vln-select{ width:100%; -webkit-appearance:none; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius:12px;
  color:#fff; font:700 16px/1.2 var(--sans); padding:15px 44px 15px 16px; }
html.js .vln .vln-select{ transition:border-color .18s var(--ease), background .18s var(--ease); }
.vln .vln-select:hover{ border-color:rgba(255,255,255,.4); }
.vln .vln-select:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.1); }
.vln .vln-select option{ color:#1a1a1a; }   /* native dropdown list stays light/legible */
.vln .vln-context{ font-size:13px; line-height:1.5; color:var(--on-dark-mut); max-width:34ch; }
.vln .vln-context strong{ color:#fff; font-variant-numeric:tabular-nums; }

.vln .vln-readout{ margin-top:clamp(24px,3vw,38px); }
.vln .vln-fig{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.vln .vln-fig-n{ font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  color:#fff; font-size:clamp(3rem,1.8rem + 6vw,5.6rem); line-height:.92; }
.vln .vln-fig-n .vln-med::after{ } /* placeholder */
.vln .vln-fig-l{ font:700 13px/1.3 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mut); }
.vln .vln-where{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.vln .vln-area-name{ font-family:var(--display); font-weight:800; font-size:1.25rem; color:#fff; letter-spacing:-.01em; }
.vln .vln-area-d{ font:800 11.5px/1 var(--display); letter-spacing:.1em; padding:5px 9px; border-radius:6px;
  background:rgba(255,105,51,.16); color:var(--accent); }

/* range bar — fixed London scale £0–£7,000 */
.vln .vln-range{ margin-top:clamp(22px,2.6vw,32px); }
.vln .vln-range-track{ position:relative; height:14px; border-radius:999px; background:rgba(255,255,255,.1); overflow:visible; }
.vln .vln-range-fill{ position:absolute; top:0; height:100%; left:0; width:0; border-radius:999px;
  background:linear-gradient(90deg,#FF6933,#ff9466); box-shadow:0 0 18px rgba(255,105,51,.35); }
.vln .vln-range-marker{ position:absolute; top:-5px; left:0; width:3px; height:24px; border-radius:2px;
  background:#fff; box-shadow:0 0 10px rgba(255,255,255,.6); transform:translateX(-50%); }
html.js .vln .vln-range-fill{ transition:left .8s var(--ease), width .8s var(--ease); }
html.js .vln .vln-range-marker{ transition:left .8s var(--ease); }
.vln .vln-range-scale{ display:flex; justify-content:space-between; margin-top:9px;
  font:700 11px/1 var(--sans); letter-spacing:.04em; color:var(--on-dark-mut); }
.vln .vln-range-cap{ margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--on-dark-mut); }
.vln .vln-range-cap strong{ color:#fff; font-variant-numeric:tabular-nums; }
.vln .vln-range-med{ color:var(--on-dark-mut); }

.vln .vln-sample{ margin:clamp(18px,2.2vw,26px) 0 0; font-size:14.5px; line-height:1.55; color:var(--on-dark-mut); }
.vln .vln-sample .vln-n{ color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.vln .vln-guide{ color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.vln .vln-guide:hover{ text-decoration:underline; text-underline-offset:3px; }

.vln .vln-disclaimer{ margin:clamp(20px,2.4vw,28px) 0 0; padding-top:clamp(18px,2vw,24px);
  border-top:1px solid rgba(255,255,255,.1); font-size:14px; line-height:1.6; color:var(--on-dark-mut); max-width:66ch; }
.vln .vln-console-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:clamp(20px,2.4vw,28px); }

/* ---------------------------------------------------- method: numbered points */
.vln .vln-method-intro{ max-width:64ch; font-size:1.0625rem; line-height:1.7; margin-top:8px; }
.vln .vln-signals{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:clamp(22px,2.6vw,32px); }
.vln .vln-signals-l{ width:100%; font:800 11.5px/1.3 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-bottom:4px; }
.vln .vln-signal{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border:1px solid var(--line);
  border-radius:999px; background:var(--cream); color:var(--ink); font:700 13px/1 var(--sans); letter-spacing:.01em; }
.vln .vln-signal::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.vln .vln-points{ display:grid; gap:0; margin-top:clamp(30px,4vw,52px); }
.vln .vln-point{ display:grid; grid-template-columns:clamp(72px,9vw,120px) minmax(0,1fr); gap:clamp(18px,3vw,44px);
  padding:clamp(26px,3.4vw,46px) 0; border-top:1px solid var(--line); }
.vln .vln-point:first-child{ border-top:0; }
.vln .vln-point-no{ font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.04em;
  line-height:.82; font-size:clamp(2.4rem,1.4rem + 3.6vw,4.4rem); color:transparent; -webkit-text-stroke:1.5px var(--accent); }
@supports not ((-webkit-text-stroke:1px red)){ .vln .vln-point-no{ color:var(--accent); } }
.vln .vln-point-main h3{ color:var(--ink); margin-bottom:.5em; }
.vln .vln-point-main p{ max-width:64ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.vln .vln-point-main em{ font-style:normal; color:var(--accent-ink); font-weight:700; }
.vln .vln-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ---------------------------------------------------- process: steps */
.vln .vln-steps{ list-style:none; margin:clamp(30px,4vw,52px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); }
.vln .vln-step{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px 26px; }
.vln .vln-step-n{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:var(--dark); color:#fff; font:900 17px/1 var(--display); font-variant-numeric:tabular-nums; margin-bottom:16px; }
.vln .vln-step h3{ font-size:1.08rem; margin-bottom:.45em; }
.vln .vln-step p{ font-size:.95rem; line-height:1.55; color:var(--body-soft); margin:0; }

/* ---------------------------------------------------- book: conversion panel */
.vln .vln-book-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(28px,5vw,72px); align-items:start; }
.vln .vln-book-intro h2{ margin-top:2px; }
.vln .vln-book-lede{ font-size:1.0625rem; line-height:1.68; color:var(--body); margin-top:14px; max-width:42ch; }
.vln .vln-assure{ list-style:none; margin:22px 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.vln .vln-assure li{ position:relative; padding-left:30px; font-size:1rem; line-height:1.4; color:var(--ink); }
.vln .vln-assure li em{ font-style:normal; color:var(--accent-ink); font-weight:800; }
.vln .vln-assure li::before{ content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%;
  background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; }
.vln .vln-book-call{ font-size:.98rem; color:var(--body-soft); margin:0; }
.vln .vln-book-call a{ color:var(--accent-ink); font-weight:700; text-decoration:none; }
.vln .vln-book-call a:hover{ text-decoration:underline; text-underline-offset:3px; }

.vln .vln-book-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,36px); box-shadow:0 10px 30px rgba(0,0,0,.05); }
.vln .vln-book-panel .lead-form{ display:flex; flex-direction:column; gap:13px; }
.vln .vln-enq-row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.vln .vln-book-panel input,.vln .vln-book-panel textarea{ width:100%; background:var(--paper); border:1px solid var(--line);
  border-radius:10px; padding:13px 15px; font:400 15px/1.4 var(--sans); color:var(--ink); -webkit-appearance:none; }
html.js .vln .vln-book-panel input,html.js .vln .vln-book-panel textarea{ transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.vln .vln-book-panel input::placeholder,.vln .vln-book-panel textarea::placeholder{ color:var(--mut); }
.vln .vln-book-panel input:focus,.vln .vln-book-panel textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.vln .vln-book-panel textarea{ min-height:120px; resize:vertical; }
.vln .vln-book-panel .hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }
.vln .vln-book-panel .send{ align-self:flex-start; background:var(--accent); color:#fff; border:0; border-radius:999px;
  padding:15px 32px; font:800 15px/1 var(--display); letter-spacing:.01em; cursor:pointer; }
html.js .vln .vln-book-panel .send{ transition:transform .2s var(--ease), filter .2s var(--ease); }
.vln .vln-book-panel .send:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.vln .vln-book-panel .send:disabled{ opacity:.6; cursor:default; transform:none; }
.vln .vln-book-panel .lead-msg{ font-size:14px; line-height:1.4; color:var(--mut); }
.vln .vln-book-panel .lead-msg.ok{ color:var(--accent-ink); }
.vln .vln-book-panel .lead-msg.err{ color:#b00020; }
.vln .vln-privacy{ font-size:12.5px; line-height:1.5; color:var(--mut); margin:2px 0 0; }
.vln .vln-privacy a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }

/* reveal */
@media (prefers-reduced-motion:no-preference){
  html.js .vln [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .vln [data-reveal].in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .vln .vln-range-fill,.vln .vln-range-marker{ transition:none !important; }
}

/* responsive */
@media (max-width:920px){
  .vln .vln-steps{ grid-template-columns:1fr 1fr; }
  .vln .vln-book-grid{ grid-template-columns:1fr; }
  .vln .vln-point{ grid-template-columns:1fr; gap:10px; }
  .vln .vln-point-no{ font-size:clamp(2.4rem,2rem + 4vw,3rem); }
}
@media (max-width:560px){
  .vln .hero h1{ max-width:none; }
  .vln .vln-console-head{ flex-direction:column; align-items:stretch; }
  .vln .vln-enq-row{ grid-template-columns:1fr; }
  .vln .vln-steps{ grid-template-columns:1fr; }
  .vln .vln-fig-n{ font-size:clamp(2.8rem,2rem + 8vw,4rem); }
}


/* === HWJ /new-build-specialists reimagined (S118) — .nbs-scoped, safe site-wide === */
/* ============================================================================
   HWJ /new-build-specialists — reimagined page styles (scoped under .nbs so it
   can't leak into the global .site-h header / .site-f footer). Locked cream/sand
   house palette. Proposition tier: Lato display + Sen body; figures = Lato +
   tabular-nums (NO mono — this is an editorial/proposition page, not a data page).
   Echoes: /about scaffold (ink-in numerals, citation chips, CTA seam),
   /landlords numbered scaffold, /day-one-price § citation chips.
   The ONE earned signature is the "thin comparables" figure in Pillar 1.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.nbs{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  /* on-light secondary + on-dark band tones (tokenised so the dark band is themeable) */
  --body-soft:#4d4a44;
  --on-dark:#e9e5dc; --on-dark-mut:#bbb6ad; --kicker-dark:#a39d93;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* contain any bleeding ghost glyph */
}

.nbs *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.nbs .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.nbs section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.nbs section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}
.nbs .band-dark::before,
.nbs .band-dark + section::before{ display:none; }
/* V4 dark->footer seam */
.nbs .band-dark:last-child::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.nbs h1,.nbs h2,.nbs h3,.nbs h4{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.nbs h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.nbs h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.nbs p{ margin:0 0 1.05em; }
.nbs a{ color:inherit; }
.nbs strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline (not clipped by overflow:hidden) */
.nbs a:focus-visible,
.nbs .btn:focus-visible,
.nbs .nbs-read:focus-visible,
.nbs .cite:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }
.nbs .band-dark a:focus-visible,
.nbs .band-dark .btn:focus-visible{ outline-color:#fff; }

/* kicker: accent rule + uppercase tracked Lato */
.nbs .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.nbs .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.nbs .kicker--d{ color:var(--kicker-dark); }

/* provenance / source stamp */
.nbs .prov{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12px; letter-spacing:.01em; color:var(--mut);
  text-decoration:none;
}
.nbs .prov::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; }
.nbs a.prov:hover{ color:var(--accent-ink); }
@media (hover:none){ .nbs .prov{ padding-block:11px; margin-block:-11px; } } /* ≥44px touch target */

/* citation / proof chip */
.nbs .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.nbs a.cite:hover{ border-color:var(--accent); transform:translateY(-1px); }
@media (hover:none){ .nbs a.cite{ padding-block:9px; } }

/* ----------------------------------------------------------------------------
   BLOCK: hero — typographic lockup (no ledger; the H1 line carries it)
   ---------------------------------------------------------------------------- */
.nbs .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.nbs .hero .shell{ position:relative; }
.nbs .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.0; letter-spacing:-.02em;
  max-width:18ch;
}
.nbs .hero .dot{ color:var(--accent); }
.nbs .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.18em 0 .12em; display:block; }
.nbs .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:54ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.nbs .nbs-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.nbs .nbs-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.nbs .nbs-intro-prose p strong{ color:var(--ink); }
.nbs .nbs-intro-aside{ position:sticky; top:96px; }
.nbs .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:26ch;
}
.nbs .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: why — the "different in kind" triptych (Commercial/Operational/Compliance)
   ---------------------------------------------------------------------------- */
.nbs .nbs-why-intro{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(30px,4vw,52px); }
.nbs .nbs-why-intro strong{ color:var(--ink); }
.nbs .nbs-tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.nbs .nbs-tri-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; }
.nbs .nbs-tri-label{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink);
}
.nbs .nbs-tri-label::before{ content:""; width:14px; height:2px; background:var(--accent); flex:none; }
.nbs .nbs-tri-card p{ font-size:.975rem; line-height:1.62; color:var(--body); margin:0; }
.nbs .nbs-tri-card p strong{ color:var(--ink); }
.nbs .nbs-tri-cites{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:16px; }

/* ----------------------------------------------------------------------------
   BLOCK: pillars — the five operational pillars (numbered, cited)
   The numeral "inks in": solid accent fill rises from the baseline on scroll.
   Default (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   ---------------------------------------------------------------------------- */
.nbs .nbs-pillars-intro{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(26px,4vw,48px); }
.nbs .pillars{ display:grid; gap:0; }
.nbs .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(34px,4.5vw,60px) 0;
  border-top:1px solid var(--line);
}
.nbs .pillar:first-of-type{ border-top:0; }
.nbs .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;                 /* optical: seat the numeral toward the heading cap-line */
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .nbs .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.nbs .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .nbs .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .nbs .pillar.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .nbs .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .nbs .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.nbs .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.02em; max-width:24ch; }
.nbs .pillar-b{ max-width:66ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.nbs .pillar-b strong{ color:var(--ink); }
.nbs .pillar-b a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.nbs .pillar-b a:hover{ text-decoration-color:var(--accent); }

/* sub-points within a pillar: bold lead-ins promoted to scannable sub-headings */
.nbs .nbs-subs{ display:grid; gap:0; margin:clamp(18px,2vw,26px) 0 clamp(8px,1.4vw,18px);
  border-top:1px solid var(--line); }
.nbs .nbs-sub{ padding:clamp(15px,1.6vw,20px) 0; border-bottom:1px solid var(--line); max-width:66ch; }
.nbs .nbs-sub-h{ font-size:1rem; font-weight:800; color:var(--ink); margin:0 0 .35em;
  letter-spacing:-.01em; display:flex; gap:10px; align-items:baseline; }
.nbs .nbs-sub-h::before{ content:""; width:8px; height:8px; margin-top:.18em; background:var(--accent);
  flex:none; border-radius:1px; transform:rotate(45deg); }
.nbs .nbs-sub p{ margin:0; font-size:1.0062rem; line-height:1.66; color:var(--body); }
.nbs .nbs-sub p strong{ color:var(--ink); }

.nbs .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   SIGNATURE: thin-comparables figure (lives inside Pillar 1)
   Two panels: dense established-stock evidence vs a sparse new-build first-let.
   Dots are decorative (aria-hidden); each panel carries a descriptive aria-label.
   ---------------------------------------------------------------------------- */
.nbs .nbs-cmp{ margin:clamp(22px,2.6vw,34px) 0; }
.nbs .nbs-cmp-cap{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--ink);
  letter-spacing:-.01em; margin:0 0 14px; }
.nbs .nbs-cmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
.nbs .nbs-cmp-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,1.8vw,22px); }
.nbs .nbs-cmp-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:6px 14px; margin-bottom:14px; }
.nbs .nbs-cmp-type{ font:800 12px/1.3 var(--display); letter-spacing:.04em; text-transform:uppercase;
  color:var(--mut); }
.nbs .nbs-cmp-n{ font:900 1.05rem/1 var(--display); font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.nbs .nbs-cmp-panel--new .nbs-cmp-n{ color:var(--accent-ink); }
.nbs .nbs-cmp-plot{ position:relative; height:96px; border-radius:8px; background:var(--soft);
  overflow:hidden; }
.nbs .nbs-cmp-plot::after{ /* baseline */ content:""; position:absolute; left:10px; right:10px; bottom:12px;
  height:1px; background:color-mix(in srgb,var(--div) 80%,transparent); }
.nbs .nbs-dot{ position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--mut); transform:translate(-50%,-50%); opacity:.55; }
.nbs .nbs-dot--hot{ background:var(--accent); opacity:1;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
.nbs .nbs-cmp-week{ position:absolute; bottom:20px; left:74%; transform:translateX(-50%);
  font:800 10px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);
  white-space:nowrap; }
.nbs .nbs-cmp-axis{ display:flex; justify-content:space-between; margin-top:9px;
  font:700 11px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--mut);
  font-variant-numeric:tabular-nums; }
.nbs .nbs-cmp-sub{ margin:10px 0 0; font-size:.84rem; line-height:1.45; color:var(--mut); }
.nbs .nbs-cmp-note{ max-width:64ch; margin:16px 0 0; font-size:.94rem; line-height:1.6; color:var(--body-soft); }
.nbs .nbs-cmp-note strong{ color:var(--ink); }
/* dot reveal — JS-gated stagger; reduced-motion / no-JS shows them immediately */
@media (prefers-reduced-motion:no-preference){
  html.js .nbs .nbs-cmp .nbs-dot{ opacity:0; transform:translate(-50%,-50%) scale(.4);
    transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--di,0)*45ms); }
  html.js .nbs .nbs-cmp .nbs-dot--hot{ opacity:0; }
  html.js .nbs .nbs-cmp.in .nbs-dot{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
  html.js .nbs .nbs-cmp.in .nbs-dot--hot{ opacity:1; }
}

/* ----------------------------------------------------------------------------
   BLOCK: how we work — engagement phases (smaller index, not ink-in)
   ---------------------------------------------------------------------------- */
.nbs .nbs-work-intro{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(24px,3vw,40px); }
.nbs .nbs-phases{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.nbs .nbs-phase{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.4vw,34px);
  padding:clamp(20px,2.4vw,30px) 0; border-top:1px solid var(--line); }
.nbs .nbs-phase:first-child{ border-top:0; }
.nbs .nbs-phase-i{ font:900 1.5rem/1 var(--display); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; color:var(--accent); }
.nbs .nbs-phase-h{ font-size:1.12rem; font-weight:800; color:var(--ink); margin:0 0 .4em; letter-spacing:-.01em; }
.nbs .nbs-phase-b{ max-width:70ch; font-size:1.0062rem; line-height:1.66; color:var(--body); margin:0; }
.nbs .nbs-phase-b strong{ color:var(--ink); }
.nbs .nbs-phase-b a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.nbs .nbs-work-foot{ max-width:64ch; font-size:1.0312rem; line-height:1.7; margin-top:clamp(26px,3.5vw,44px); }
.nbs .nbs-work-foot a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }

/* ----------------------------------------------------------------------------
   BLOCK: where to look next — related reading + see-also
   ---------------------------------------------------------------------------- */
.nbs .nbs-read-intro{ max-width:64ch; font-size:1.0625rem; line-height:1.72; margin-bottom:clamp(22px,3vw,36px); }
.nbs .nbs-read-list{ list-style:none; margin:0 0 clamp(28px,4vw,46px); padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
.nbs .nbs-read{ display:flex; flex-direction:column; gap:7px; height:100%;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2vw,24px); text-decoration:none; color:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.nbs .nbs-read:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(26,26,26,.10); border-color:var(--accent); }
.nbs .nbs-read-tag{ font:800 11px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.nbs .nbs-read-h{ font-size:1.08rem; line-height:1.22; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.nbs .nbs-read-d{ font-size:.94rem; line-height:1.55; color:var(--body); margin:0; }
.nbs .nbs-read-rm{ margin-top:auto; padding-top:4px; font:800 12px/1 var(--display);
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.nbs .nbs-seealso{ max-width:66ch; font-size:1.0062rem; line-height:1.7; color:var(--body-soft); }
.nbs .nbs-seealso a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — cream panel + area line + legal small print
   ---------------------------------------------------------------------------- */
.nbs .nbs-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.nbs .nbs-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.nbs .nbs-cgroup h3{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink); margin:0 0 14px;
  text-transform:uppercase; }
.nbs .nbs-clist{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.nbs .nbs-clist li{ font-size:.975rem; line-height:1.5; color:var(--body); }
.nbs .nbs-clist .nbs-cl-l{ display:block; font-weight:700; color:var(--ink); margin-bottom:1px; }
.nbs .nbs-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.nbs .nbs-clist a:hover{ text-decoration-color:var(--accent); }
.nbs .nbs-reg-verify{ font-size:.84rem; color:var(--mut); }
.nbs .nbs-arealine{ max-width:66ch; margin:clamp(26px,3.5vw,42px) 0 0; font-size:1.0312rem; line-height:1.7;
  color:var(--body); }
.nbs .nbs-arealine a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.nbs .nbs-legal{ max-width:74ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.6; color:var(--mut); }
.nbs .nbs-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   BLOCK: cta — dark band + V4 seam into footer
   ---------------------------------------------------------------------------- */
.nbs .band-dark{ background:var(--dark); color:var(--on-dark); }
.nbs .nbs-cta{ text-align:left; }
.nbs .nbs-cta .shell{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,60px); align-items:center; }
.nbs .nbs-cta h2{ color:#fff; max-width:18ch; }
.nbs .nbs-cta-sub{ color:var(--on-dark-mut); font-size:var(--fs-lede); line-height:1.55; margin-top:14px; max-width:48ch; }
.nbs .nbs-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* buttons */
.nbs .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:14px 28px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.nbs .btn-solid{ background:var(--accent); color:#fff; }
.nbs .btn-solid:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.nbs .btn-ghost{ background:transparent; border-color:var(--accent); color:var(--ink); }
.nbs .band-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.nbs .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.nbs .band-dark .btn-ghost:hover{ color:var(--accent); }
.nbs .btn-james{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.nbs .btn-james .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.nbs .btn-james:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .nbs [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .nbs [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .nbs .nbs-intro-grid{ grid-template-columns:1fr; }
  .nbs .nbs-intro-aside{ position:static; }
  .nbs .pull{ max-width:38ch; }                 /* keep a shapely measure when stacked */
  .nbs .nbs-tri{ grid-template-columns:1fr; }
  .nbs .nbs-read-list{ grid-template-columns:1fr; }
  .nbs .nbs-contact-grid{ grid-template-columns:1fr; }
  .nbs .nbs-cta .shell{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .nbs .pillar{ grid-template-columns:1fr; gap:12px; }
  .nbs .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:2px; }
  .nbs .nbs-cmp-grid{ grid-template-columns:1fr; }
  .nbs .nbs-phase{ grid-template-columns:auto minmax(0,1fr); gap:14px; }
  .nbs .hero h1{ max-width:none; }
}


/* === HWJ /contact reimagined (S118) — .cnt-scoped, safe site-wide === */
/* ============================================================================
   HWJ /contact — reimagined page styles (scoped under .cnt so it can't leak into
   the global .site-h header / .site-f footer). Locked cream/sand house palette.
   Conversion/utility tier: Lato display + Sen body. Channel-forward layout; the
   verbatim contact lead-form (data-form="contact") is preserved so the global
   handler binds; James closes the page (the brand's differentiator).
   Echoes: /about + /valuation scaffold (hero, kicker, cite, dark band + V4 seam).
   Motion is JS-gated behind html.js; reduced-motion fully honoured.
   ============================================================================ */

.cnt{
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;
  --body-soft:#4d4a44;
  --on-dark:#e9e5dc; --on-dark-mut:#bbb6ad; --kicker-dark:#a39d93;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.cnt *{ box-sizing:border-box; }

/* shell + section rhythm */
.cnt .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.cnt section{ padding-block:clamp(52px,8vw,100px); position:relative; }

/* editorial inset divider */
.cnt section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}
.cnt .band-dark::before,
.cnt .band-dark + section::before{ display:none; }
.cnt .band-dark:last-child::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* type */
.cnt h1,.cnt h2,.cnt h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.cnt h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.cnt h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.cnt p{ margin:0 0 1.05em; }
.cnt a{ color:inherit; }
.cnt strong{ color:var(--ink); }

/* focus */
.cnt a:focus-visible,
.cnt .btn:focus-visible,
.cnt .cnt-dept:focus-visible,
.cnt input:focus-visible,
.cnt textarea:focus-visible,
.cnt button:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }
.cnt .band-dark a:focus-visible,
.cnt .band-dark .btn:focus-visible{ outline-color:#fff; }

/* kicker */
.cnt .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin:0 0 18px;
}
.cnt .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.cnt .kicker--d{ color:var(--kicker-dark); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — H1 + script + lede + quick-channel ribbon
   ---------------------------------------------------------------------------- */
.cnt .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(34px,5vw,60px); }
.cnt .hero h1{ font-size:var(--fs-display); font-weight:900; line-height:1.0; letter-spacing:-.02em; max-width:15ch; }
.cnt .hero .dot{ color:var(--accent); }
.cnt .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.cnt .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:52ch; }

/* quick-channel ribbon */
.cnt .cnt-chan{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,2.6vw,32px);
  border-top:1.5px solid var(--div); padding-top:clamp(18px,2.2vw,26px); }
.cnt .cnt-chan a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--cream);
  font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:.01em; color:var(--ink);
  text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.cnt .cnt-chan a:hover{ border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.cnt .cnt-chan .ic{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.cnt .cnt-chan .cnt-chan-wa .ic{ border-radius:2px; }

/* ----------------------------------------------------------------------------
   BLOCK: reach — message form (verbatim lead-form) + intro/assurance
   ---------------------------------------------------------------------------- */
.cnt .cnt-reach-grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,64px); align-items:start; }
.cnt .cnt-reach-intro h2{ margin-bottom:.4em; max-width:16ch; }
.cnt .cnt-reach-lede{ font-size:var(--fs-lede); line-height:1.6; color:var(--body); max-width:46ch; }
.cnt .cnt-assure{ list-style:none; margin:clamp(18px,2.2vw,26px) 0 0; padding:0; display:grid; gap:12px; }
.cnt .cnt-assure li{ position:relative; padding-left:26px; font-size:1.0062rem; line-height:1.5; color:var(--body); }
.cnt .cnt-assure li::before{ content:""; position:absolute; left:0; top:.45em; width:9px; height:9px;
  background:var(--accent); border-radius:2px; transform:rotate(45deg); }
.cnt .cnt-reach-call{ margin-top:clamp(18px,2.2vw,26px); font-size:1.0062rem; color:var(--body); }
.cnt .cnt-reach-call a{ color:var(--accent-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }

/* form panel */
.cnt .cnt-form-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,38px); box-shadow:0 10px 30px rgba(26,26,26,.05); }
.cnt .cnt-form-panel h3{ font-size:1.18rem; font-weight:800; margin:0 0 4px; }
.cnt .cnt-form-note{ font-size:.92rem; line-height:1.5; color:var(--mut); margin:0 0 20px; }
.cnt .lead-form{ display:grid; gap:14px; }
.cnt .cnt-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cnt .lead-form input,
.cnt .lead-form textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cnt .lead-form input::placeholder,
.cnt .lead-form textarea::placeholder{ color:var(--mut); }
.cnt .lead-form input:focus,
.cnt .lead-form textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.cnt .lead-form textarea{ min-height:128px; resize:vertical; }
.cnt .lead-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cnt .lead-form .send{
  appearance:none; cursor:pointer; border:1.5px solid var(--accent); background:var(--accent); color:#fff;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:14px 28px; border-radius:999px; justify-self:start;
  transition:filter .2s var(--ease), transform .2s var(--ease);
}
.cnt .lead-form .send:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.cnt .lead-msg{ font-size:.92rem; line-height:1.5; color:var(--accent-ink); min-height:1px; }
.cnt .cnt-privacy{ font-size:.82rem; line-height:1.5; color:var(--mut); margin:2px 0 0; }
.cnt .cnt-privacy a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   BLOCK: departments — cream cards, one per inbox
   ---------------------------------------------------------------------------- */
.cnt .cnt-depts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px);
  grid-auto-rows:1fr;          /* every row equal height → all six cards the same box size */
  margin-top:clamp(26px,3vw,42px); }
.cnt .cnt-dept{ display:flex; flex-direction:column; gap:6px;
  width:100%; justify-self:stretch;     /* fill the (equal) grid cell → equal box widths */
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2vw,24px); text-decoration:none; color:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.cnt .cnt-dept:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(26,26,26,.10); border-color:var(--accent); }
.cnt .cnt-dept-l{ font:800 12px/1.3 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.cnt .cnt-dept-e{ font-size:1.02rem; font-weight:800; color:var(--accent-ink); letter-spacing:-.01em; word-break:break-word; }

/* ----------------------------------------------------------------------------
   BLOCK: office — address + transport chips + map
   ---------------------------------------------------------------------------- */
.cnt .cnt-office-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(14px,2.4vw,40px); margin-top:clamp(20px,2.4vw,32px); }
.cnt .cnt-office-addr{ font-size:1.0625rem; line-height:1.6; color:var(--body); max-width:44ch; margin:0; }
.cnt .cnt-office-addr strong{ color:var(--ink); }
.cnt .cnt-lines{ display:flex; flex-wrap:wrap; gap:8px; }
.cnt .cnt-line{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--cream); font-size:12.5px; font-weight:700; color:var(--ink); }
.cnt .cnt-line::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
/* full content-width landscape map */
.cnt .cnt-map{ width:100%; margin-top:clamp(22px,2.8vw,38px);
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:21/9; min-height:320px; background:var(--soft); }
.cnt .cnt-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.2) contrast(.96); }

/* ----------------------------------------------------------------------------
   BLOCK: james — dark band close + V4 seam
   ---------------------------------------------------------------------------- */
.cnt .band-dark{ background:var(--dark); color:var(--on-dark); }
.cnt .cnt-james .shell{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,60px); align-items:center; }
.cnt .cnt-james h2{ color:#fff; max-width:14ch; }
.cnt .cnt-james-sub{ color:var(--on-dark-mut); font-size:var(--fs-lede); line-height:1.55; margin-top:14px; max-width:52ch; }
.cnt .cnt-james-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* buttons */
.cnt .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:14px 28px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), filter .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.cnt .btn-solid{ background:var(--accent); color:#fff; }
.cnt .btn-solid:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.cnt .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.cnt .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.cnt .btn-james{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.cnt .btn-james .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.cnt .btn-james:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* reveal-on-scroll (JS-gated) */
@media (prefers-reduced-motion:no-preference){
  html.js .cnt [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .cnt [data-reveal].in{ opacity:1; transform:none; }
}

/* responsive */
@media (max-width:900px){
  .cnt .cnt-reach-grid{ grid-template-columns:1fr; }
  .cnt .cnt-depts-grid{ grid-template-columns:1fr 1fr; }
  .cnt .cnt-james .shell{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cnt .cnt-row{ grid-template-columns:1fr; }
  .cnt .cnt-depts-grid{ grid-template-columns:1fr; }
  .cnt .hero h1{ max-width:none; }
}


/* === HWJ /terms reimagined === */
/* ============================================================================
   HWJ /terms (Landlord Terms of Business) — reimagined page styles (scoped under
   .tms so it can't leak into the global .site-h header / .site-f footer). Locked
   cream/sand house palette. LEGAL tier: typography + editorial scaffold only — copy
   is strictly verbatim, no data viz, no gadget. Figures/citations = Lato + tabular-nums
   (NO mono). Cloned from /renters-rights-act-2025 (.rra → .tms). The earned moves are
   the house hero, content-width dividers, § citation chips, the /about "ink-in" numerals
   numbering the 19 top-level contract clauses (01…19), provision blocks for the verbatim
   bold-lead-in sub-clauses, and cleanly restyled fee/obligation lists.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.tms{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.tms *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.tms .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.tms section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.tms section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.tms h1,.tms h2,.tms h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.tms h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.tms h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.tms p{ margin:0 0 1.05em; }
.tms a{ color:inherit; }
.tms strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.tms a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.tms .tms-cbody p a,
.tms .tms-prov p a,
.tms .tms-list a,
.tms .tms-olist a,
.tms .tms-callout a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.tms .tms-cbody p a:hover,
.tms .tms-prov p a:hover,
.tms .tms-list a:hover,
.tms .tms-olist a:hover,
.tms .tms-callout a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.tms .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.tms .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory / fee chips) */
.tms .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.tms .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.tms .hero .shell{ position:relative; }
.tms .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:16ch;
}
.tms .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.tms .hero-sub{ font-size:var(--fs-lede); line-height:1.6; color:var(--body-soft); max-width:66ch; }
.tms .hero-sub strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: clause — the 19 numbered top-level contract clauses. Header is a 2-col
   lockup: the /about "ink-in" numeral (left) + kicker/H2 (right). The numeral
   "inks in": solid accent fill rises from the baseline on scroll. Default (no-JS)
   state is the SOLID numeral; the outline+fill is JS-gated. (Same machine as the
   .rra .pillar-no / .pillar.in pattern, here driven by .tms-clause.in.)
   ---------------------------------------------------------------------------- */
.tms .tms-chead{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,44px); align-items:start;
  margin-bottom:clamp(26px,3.4vw,46px);
}
.tms-chead-t{ align-self:center; }
.tms .tms-chead-t .kicker{ margin-bottom:13px; }
.tms .tms-chead-t h2{ max-width:24ch; }

/* ink-in numeral — solid by default (no-JS / reduced-motion), outline+fill when JS on */
.tms .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
.tms .tms-no{ margin-top:-.04em; justify-self:start; }
html.js .tms .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.tms .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .tms .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .tms .tms-clause.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .tms .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .tms .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}

/* clause body measure + rhythm */
.tms .tms-cbody{ max-width:none; }
.tms .tms-cbody > p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }

/* ----------------------------------------------------------------------------
   BLOCK: provision — verbatim bold-lead-in sub-clauses (§ marked, cited).
   Mirrors the .rra .rra-prov treatment.
   ---------------------------------------------------------------------------- */
.tms .tms-prov{ padding:clamp(22px,2.8vw,36px) 0; border-top:1px solid var(--line); }
.tms .tms-prov:first-child{ border-top:0; padding-top:0; }
.tms .tms-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .6em; max-width:48ch;
  display:flex; gap:12px; align-items:baseline; }
.tms .tms-prov-h::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.tms .tms-prov > p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0 0 1.05em; }
.tms .tms-prov > p:last-of-type{ margin-bottom:0; }
.tms .tms-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ----------------------------------------------------------------------------
   lists — verbatim <ul>/<ol> restyled cleanly. No invented structure.
   ---------------------------------------------------------------------------- */
.tms .tms-list{ list-style:none; margin:.4em 0 0; padding:0; max-width:78ch;
  display:grid; gap:11px; }
.tms .tms-prov .tms-list{ margin-top:0; }
.tms .tms-list li{ position:relative; padding-left:22px; font-size:1.0312rem; line-height:1.62;
  color:var(--body); }
.tms .tms-list li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:2px; background:var(--accent); }
.tms .tms-list li strong{ color:var(--ink); }

/* compliance-obligation list — heavier lead-ins, a touch more air */
.tms .tms-list-lead{ gap:15px; }
.tms .tms-list-lead li{ line-height:1.66; }

/* numbered ordered list (the catch-up mechanic in 4.5 — verbatim, kept as <ol>) */
.tms .tms-olist{ list-style:none; counter-reset:tms-o; margin:.2em 0 1.05em; padding:0;
  max-width:78ch; display:grid; gap:13px; }
.tms .tms-olist li{ counter-increment:tms-o; position:relative; padding-left:42px;
  font-size:1.0312rem; line-height:1.66; color:var(--body); }
.tms .tms-olist li::before{ content:counter(tms-o,decimal-leading-zero); position:absolute; left:0; top:.04em;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  font-size:.95rem; letter-spacing:.01em; color:var(--accent-ink); }
.tms .tms-olist li strong{ color:var(--ink); }

/* penalties callout — a quiet emphasis panel, verbatim text */
.tms .tms-callout{ max-width:78ch; margin:clamp(22px,2.6vw,34px) 0 0;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); font-size:1.0125rem; line-height:1.66; color:var(--body); }
.tms .tms-callout strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: agent details — verbatim registrations <ul> restyled into a cream panel.
   Mirrors the .rra contacts panel. The page ENDS ON LIGHT CONTENT (no dark CTA).
   ---------------------------------------------------------------------------- */
.tms .tms-agent-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin:clamp(8px,1.4vw,18px) 0 clamp(22px,2.6vw,34px); }
.tms .tms-agent-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.tms .tms-agroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.tms .tms-alist{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.tms .tms-alist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.tms .tms-alist li strong{ color:var(--ink); }
.tms .tms-alist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.tms .tms-alist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.tms .tms-legal{ max-width:80ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.66; color:var(--mut); }
.tms .tms-legal em{ font-style:italic; }
.tms .tms-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .tms [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .tms [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .tms .tms-agent-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  /* clause header collapses to a stacked numeral over the heading */
  .tms .tms-chead{ grid-template-columns:1fr; gap:10px; }
  .tms .tms-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); }
  .tms .hero h1{ max-width:none; }
  .tms .tms-prov-h{ max-width:none; }
  .tms .tms-cbody > p,
  .tms .tms-prov > p,
  .tms .tms-list,
  .tms .tms-olist,
  .tms .tms-callout{ max-width:none; }
}


/* === HWJ /renters-rights-act-2025 reimagined === */
/* ============================================================================
   HWJ /renters-rights-act-2025 — reimagined page styles (scoped under .rra so it
   can't leak into the global .site-h header / .site-f footer). Locked cream/sand
   house palette. LEGAL tier: typography + editorial scaffold only — copy is strictly
   verbatim, no data viz, no gadget. Figures/citations = Lato + tabular-nums (NO mono).
   Echoes: /about + /new-build-specialists scaffold (ink-in numerals, citation chips),
   /landlords numbered scaffold. The earned moves are the house hero, content-width
   dividers, § citation chips, the ink-in numerals on the two architectural changes,
   and an editorial timeline for the phased commencement roadmap.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.rra{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.rra *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.rra .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.rra section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.rra section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.rra h1,.rra h2,.rra h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.rra h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.rra h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.rra p{ margin:0 0 1.05em; }
.rra a{ color:inherit; }
.rra strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.rra a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.rra .rra-intro-prose a,
.rra .rra-prov p a,
.rra .rra-tl-main p a,
.rra .rra-foot a,
.rra .rra-seealso a,
.rra .rra-source a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.rra .rra-intro-prose a:hover,
.rra .rra-prov p a:hover,
.rra .rra-tl-main p a:hover,
.rra .rra-foot a:hover,
.rra .rra-seealso a:hover,
.rra .rra-source a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.rra .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.rra .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.rra .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + synthesis foot (shared measure) */
.rra .rra-lead{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }
.rra .rra-foot{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-top:clamp(30px,4vw,56px); color:var(--body); }
.rra .rra-foot strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.rra .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.rra .hero .shell{ position:relative; }
.rra .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.rra .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.rra .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:60ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.rra .rra-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.rra .rra-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.rra .rra-intro-aside{ position:sticky; top:96px; }
.rra .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.rra .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: pillars — the two architectural changes (numbered, cited)
   The numeral "inks in": solid accent fill rises from the baseline on scroll.
   Default (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   Shared by the .pillar (two changes) and the .rra-tl-node (roadmap timeline).
   ---------------------------------------------------------------------------- */
.rra .pillars{ display:grid; gap:0; }
.rra .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(34px,4.5vw,60px) 0;
  border-top:1px solid var(--line);
}
.rra .pillar:first-of-type{ border-top:0; }
.rra .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .rra .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.rra .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .rra .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .rra .pillar.in .pillar-no::after,
html.js .rra .rra-tl-node.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .rra .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .rra .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.rra .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.02em; max-width:26ch; }
.rra .pillar-b{ max-width:66ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.rra .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: other changes — eleven provision blocks (verbatim, § cited)
   ---------------------------------------------------------------------------- */
.rra .rra-provs{ display:grid; gap:0; border-top:1px solid var(--line); }
.rra .rra-prov{ padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--line); }
.rra .rra-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .6em; max-width:42ch;
  display:flex; gap:12px; align-items:baseline; }
.rra .rra-prov-h::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.rra .rra-prov p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }
.rra .rra-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ----------------------------------------------------------------------------
   BLOCK: roadmap — editorial timeline. Each phase node carries the ink-in numeral
   (left column) + a continuous spine (border-left on the content) + an accent node
   dot at the date marker. Inks in on scroll = phases "coming into force".
   ---------------------------------------------------------------------------- */
.rra .rra-tl{ --tlcol:clamp(56px,7vw,96px); list-style:none; margin:clamp(26px,3.6vw,48px) 0 0;
  padding:0; display:grid; gap:0; }
.rra .rra-tl-node{ display:grid; grid-template-columns:var(--tlcol) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px); align-items:stretch; }
/* margin-top (NOT padding-top) so the ink-in ::after (inset:0 on the padding box)
   stays registered to the base digit — padding-top would offset the fill from the outline */
.rra .rra-tl-no{ font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);
  margin-top:clamp(22px,2.8vw,36px); justify-self:start; }
.rra .rra-tl-node:first-child .rra-tl-no{ margin-top:0; }
.rra .rra-tl-main{ position:relative; border-left:2px solid var(--line);
  padding:clamp(22px,2.8vw,36px) 0 clamp(22px,2.8vw,36px) clamp(20px,2.4vw,34px); }
.rra .rra-tl-node:first-child .rra-tl-main{ padding-top:0; }
.rra .rra-tl-node:last-child .rra-tl-main{ padding-bottom:0; }
/* node dot on the spine, level with the date marker */
.rra .rra-tl-main::before{ content:""; position:absolute; left:-7px;
  top:calc(clamp(22px,2.8vw,36px) + .25em); width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--paper); }
.rra .rra-tl-node:first-child .rra-tl-main::before{ top:.25em; }
.rra .rra-tl-date{ display:block; font:800 12px/1 var(--display); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); font-variant-numeric:tabular-nums;
  margin-bottom:11px; }
.rra .rra-tl-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.015em; }
.rra .rra-tl-main p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }
.rra .rra-source{ margin:clamp(22px,3vw,38px) 0 0; font-size:.92rem; line-height:1.6; color:var(--mut); }

/* ----------------------------------------------------------------------------
   BLOCK: where to look next — verbatim see-also prose
   ---------------------------------------------------------------------------- */
.rra .rra-seealso{ max-width:70ch; font-size:1.0625rem; line-height:1.74; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.rra .rra-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.rra .rra-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.rra .rra-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.rra .rra-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.rra .rra-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.rra .rra-clist li strong{ color:var(--ink); }
.rra .rra-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.rra .rra-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.rra .rra-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.rra .rra-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .rra [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .rra [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .rra .rra-intro-grid{ grid-template-columns:1fr; }
  .rra .rra-intro-aside{ position:static; }
  .rra .pull{ max-width:38ch; }
  .rra .rra-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .rra .pillar{ grid-template-columns:1fr; gap:12px; }
  .rra .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:2px; }
  .rra .hero h1{ max-width:none; }
  .rra .rra-prov-h{ max-width:none; }
  /* timeline: keep the numeral + spine rail, just tighten the column */
  .rra .rra-tl{ --tlcol:clamp(42px,12vw,56px); }
  .rra .rra-tl-no{ font-size:clamp(2.1rem,1.6rem + 4vw,2.8rem); }
}


/* === HWJ /tenant-fees-schedule reimagined === */
/* ============================================================================
   HWJ /tenant-fees-schedule — reimagined page styles (scoped under .tfs so it
   can't leak into the global .site-h header / .site-f footer). Locked cream/sand
   house palette. LEGAL tier: typography + editorial scaffold only — copy is strictly
   verbatim, no data viz, no gadget. Figures/citations/fee amounts = Lato + tabular-nums
   (NO mono) for the "schedule" feel.
   Echoes the /renters-rights-act-2025 scaffold (this page is its sibling): the house
   hero, content-width dividers, § citation chips surfacing in-copy refs, cream panels.
   The earned, page-specific moves are the permitted/prohibited two-column LEDGER, the
   pre-tenancy/in-tenancy SCHEDULE provision rows with a tabular-nums amount tag, and a
   definition-row treatment for the capped figures. NO ink-in numerals, NO timeline —
   a fees schedule is a register, not a numbered narrative.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.tfs{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.tfs *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.tfs .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.tfs section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.tfs section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.tfs h1,.tfs h2,.tfs h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.tfs h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.tfs h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.tfs p{ margin:0 0 1.05em; }
.tfs a{ color:inherit; }
.tfs strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.tfs a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.tfs .tfs-intro-prose a,
.tfs .tfs-item-body p a,
.tfs .tfs-led p a,
.tfs .tfs-qa p a,
.tfs .tfs-standfirst a,
.tfs .tfs-wrong-panel a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.tfs .tfs-intro-prose a:hover,
.tfs .tfs-item-body p a:hover,
.tfs .tfs-led p a:hover,
.tfs .tfs-qa p a:hover,
.tfs .tfs-standfirst a:hover,
.tfs .tfs-wrong-panel a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.tfs .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.tfs .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.tfs .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* H2 gets a little air below it before the body of its section */
.tfs section h2{ margin-bottom:clamp(20px,2.6vw,34px); }
/* a standfirst paragraph that *is* the whole section body (who-applies, payments) */
.tfs .tfs-standfirst{ max-width:66ch; font-size:1.0625rem; line-height:1.72; color:var(--body); margin:0; }

/* fee-item sections sit a touch tighter than the prose sections (it's a schedule) */
.tfs .tfs-sec--item{ padding-block:clamp(40px,6vw,72px); }
/* heading row for a fee item: verbatim H2 on the left, the schedule amount tag on the right */
.tfs .tfs-h2row{ display:flex; gap:18px 22px; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:clamp(16px,2vw,26px); }
.tfs .tfs-h2row h2{ margin:0; max-width:34ch; }
/* the schedule amount — Lato tabular-nums "ledger figure" */
.tfs .tfs-amt{ flex:none; font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:.98rem; letter-spacing:.005em; color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 10%,var(--cream));
  border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);
  border-radius:999px; padding:6px 14px; white-space:nowrap; line-height:1.1; align-self:center; }
/* fee-item body measure */
.tfs .tfs-item-body{ max-width:78ch; }
.tfs .tfs-item-body--narrow{ max-width:54ch; }
.tfs .tfs-item-body p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0 0 1.02em; }
.tfs .tfs-item-body p:last-child{ margin-bottom:0; }
.tfs .tfs-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.tfs .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.tfs .hero .shell{ position:relative; }
.tfs .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.tfs .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.tfs .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:62ch; }
.tfs .hero-sub strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: the short version — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.tfs .tfs-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.tfs .tfs-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.tfs .tfs-intro-aside{ position:sticky; top:96px; }
.tfs .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.tfs .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: permitted / prohibited — the verbatim lists in cream "ledger" panels.
   One panel per source <h3> section; a corner tag flags permitted vs prohibited.
   The permitted <ul> is a clean ledger list; the prohibited run-on stays a single
   verbatim sentence in a soft block. Presentational only — no invented items.
   ---------------------------------------------------------------------------- */
.tfs .tfs-led{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.8vw,38px); position:relative; max-width:78ch;
  border-top-width:3px; }
.tfs .tfs-led-yes{ border-top-color:var(--accent); }
.tfs .tfs-led-no{ border-top-color:var(--div); }
.tfs .tfs-led p{ max-width:64ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.tfs .tfs-led > p:last-of-type{ margin-bottom:0; }
/* corner status tag */
.tfs .tfs-led-tag{ display:inline-flex; align-items:center; gap:7px; margin-bottom:16px;
  padding:5px 12px; border-radius:999px; font:800 11.5px/1 var(--display); letter-spacing:.1em;
  text-transform:uppercase; }
.tfs .tfs-led-tag::before{ content:""; width:8px; height:8px; border-radius:50%; }
.tfs .tfs-led-tag-yes{ background:color-mix(in srgb,var(--accent) 12%,var(--cream));
  color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); }
.tfs .tfs-led-tag-yes::before{ background:var(--accent); }
.tfs .tfs-led-tag-no{ background:var(--soft); color:var(--mut); border:1px solid var(--div); }
.tfs .tfs-led-tag-no::before{ background:var(--mut); }
.tfs .tfs-led-list{ list-style:none; margin:0 0 1.05em; padding:0; display:grid; gap:0;
  border-top:1px solid var(--line); }
.tfs .tfs-led-list li{ font-size:1.0312rem; line-height:1.55; color:var(--body);
  padding:13px 0 13px 26px; border-bottom:1px solid var(--line); position:relative; }
.tfs .tfs-led-list li:last-child{ border-bottom:0; }
.tfs .tfs-led-list li::before{ content:""; position:absolute; left:2px; top:.72em;
  width:9px; height:9px; border-radius:2px; background:var(--accent); }
/* prohibited run-on list (kept as the single verbatim sentence, set as a soft block) */
.tfs .tfs-led-run{ background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font-size:.995rem; line-height:1.62; color:var(--body-soft); max-width:none; }
.tfs .tfs-led-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   definition rows — the capped figures (5/6 weeks) + check-in hours.
   left term, right tabular-nums figure; verbatim text only.
   ---------------------------------------------------------------------------- */
.tfs .tfs-defrows{ margin:0 0 1.05em; padding:0; border-top:1px solid var(--line); max-width:54ch; }
.tfs .tfs-defrow{ display:flex; gap:18px; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; padding:13px 0; border-bottom:1px solid var(--line); }
.tfs .tfs-defrow dt{ font-size:1.0312rem; line-height:1.5; color:var(--ink); font-weight:700; margin:0; }
.tfs .tfs-defrow dd{ margin:0; }
.tfs .tfs-fig{ font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:1.0312rem; color:var(--accent-ink); letter-spacing:.005em; white-space:nowrap; }

/* ----------------------------------------------------------------------------
   BLOCK: FAQ — verbatim Q&A pairs (question heading + answer)
   ---------------------------------------------------------------------------- */
.tfs .tfs-qa{ display:grid; gap:0; border-top:1px solid var(--line); }
.tfs .tfs-qrow{ padding:clamp(22px,2.8vw,36px) 0; border-bottom:1px solid var(--line); }
.tfs .tfs-q{ font-size:clamp(1.08rem,.98rem + .45vw,1.3rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.22; margin:0 0 .55em; max-width:50ch;
  display:flex; gap:12px; align-items:baseline; }
.tfs .tfs-q::before{ content:"Q"; font-family:var(--display); font-weight:900; color:var(--accent);
  font-size:.86em; flex:none; }
.tfs .tfs-qa p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: if something has gone wrong — verbatim redress, cream panel + small print
   ---------------------------------------------------------------------------- */
.tfs .tfs-wrong-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.tfs .tfs-wrong-panel p{ max-width:78ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.tfs .tfs-wrong-panel p:last-child{ margin-bottom:0; }
.tfs .tfs-wrong-panel a{ word-break:break-word; }

/* legal small print — closes the page */
.tfs .tfs-legal{ max-width:80ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.tfs .tfs-legal em{ font-style:italic; }
.tfs .tfs-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .tfs [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .tfs [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .tfs .tfs-intro-grid{ grid-template-columns:1fr; }
  .tfs .tfs-intro-aside{ position:static; }
  .tfs .pull{ max-width:38ch; }
}
@media (max-width:680px){
  .tfs .hero h1{ max-width:none; }
  .tfs .tfs-h2row h2{ max-width:none; }
  .tfs .tfs-q{ max-width:none; }
  .tfs .tfs-h2row{ gap:12px; }
  .tfs .tfs-amt{ font-size:.92rem; align-self:flex-start; }
}


/* === HWJ /awaabs-law reimagined === */
/* ============================================================================
   HWJ /awaabs-law — reimagined page styles (scoped under .awl so it can't leak
   into the global .site-h header / .site-f footer). Locked cream/sand house
   palette. LEGAL tier: typography + editorial scaffold only — copy is strictly
   verbatim, no data viz, no gadget. Figures/citations = Lato + tabular-nums (NO mono).
   Echoes: /about + /new-build-specialists scaffold (ink-in numerals, citation chips),
   /renters-rights-act-2025 (cloned: shared editorial timeline, § chips, contacts panel).
   The earned moves are the house hero, content-width dividers, § citation chips, and
   an editorial timeline carrying the three statutory hazard-response timeframes
   (24 hours / 10 + 5 working days / alternative accommodation) — the chronological,
   severity-ordered heart of the page.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.awl{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.awl *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.awl .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.awl section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.awl section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.awl h1,.awl h2,.awl h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.awl h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.awl h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.awl p{ margin:0 0 1.05em; }
.awl a{ color:inherit; }
.awl strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.awl a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.awl .awl-intro-prose a,
.awl .awl-prov p a,
.awl .awl-tl-main p a,
.awl .awl-foot a,
.awl .awl-seealso a,
.awl .awl-source a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.awl .awl-intro-prose a:hover,
.awl .awl-prov p a:hover,
.awl .awl-tl-main p a:hover,
.awl .awl-foot a:hover,
.awl .awl-seealso a:hover,
.awl .awl-source a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.awl .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.awl .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.awl .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + synthesis foot (shared measure) */
.awl .awl-lead{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }
.awl .awl-foot{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-top:clamp(30px,4vw,56px); color:var(--body); }
.awl .awl-foot strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.awl .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.awl .hero .shell{ position:relative; }
.awl .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.awl .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
/* hero deck — verbatim remainder of the source title heading, set as a display sub-line */
.awl .hero-deck{ font-family:var(--display); font-weight:800; letter-spacing:-.018em;
  font-size:clamp(1.3rem,1.05rem + 1.05vw,1.85rem); line-height:1.18; color:var(--ink);
  max-width:24ch; margin:.1em 0 .55em; }
.awl .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:60ch; margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.awl .awl-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.awl .awl-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.awl .awl-intro-prose p:last-of-type{ margin-bottom:0; }
.awl .awl-intro-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.awl .awl-intro-aside{ position:sticky; top:96px; }
.awl .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.awl .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: ink-in numeral primitive (.pillar-no). The numeral "inks in": solid accent
   fill rises from the baseline on scroll. Default (no-JS) state is the SOLID numeral;
   the outline+fill is JS-gated. On THIS page the primitive is consumed only by the
   .awl-tl-node timeline numerals (no two-changes "pillars" block); the .pillar wrapper
   rules below are the shared component definition, inert on this page.
   ---------------------------------------------------------------------------- */
.awl .pillars{ display:grid; gap:0; }
.awl .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(34px,4.5vw,60px) 0;
  border-top:1px solid var(--line);
}
.awl .pillar:first-of-type{ border-top:0; }
.awl .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .awl .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.awl .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .awl .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .awl .pillar.in .pillar-no::after,
html.js .awl .awl-tl-node.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .awl .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .awl .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.awl .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.02em; max-width:26ch; }
.awl .pillar-b{ max-width:66ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.awl .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: provision blocks (verbatim, § cited) — "what landlords must do",
   "the law around the timeframes", "enforcement". Some blocks carry two verbatim
   paragraphs, so non-final paragraphs keep their bottom margin.
   ---------------------------------------------------------------------------- */
.awl .awl-provs{ display:grid; gap:0; border-top:1px solid var(--line); }
.awl .awl-prov{ padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--line); }
.awl .awl-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .6em; max-width:48ch;
  display:flex; gap:12px; align-items:baseline; }
.awl .awl-prov-h::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.awl .awl-prov p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0 0 1em; }
.awl .awl-prov p:last-of-type{ margin-bottom:0; }
.awl .awl-prov em{ font-style:italic; }
.awl .awl-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ----------------------------------------------------------------------------
   BLOCK: "reporting a hazard" — verbatim prose + a verbatim three-item list
   ---------------------------------------------------------------------------- */
.awl .awl-prose{ max-width:74ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.awl .awl-prose strong{ color:var(--ink); }
.awl .awl-list{ list-style:none; margin:0 0 1.05em; padding:0; display:grid; gap:14px; max-width:74ch; }
.awl .awl-list li{ position:relative; padding-left:24px; font-size:1.0312rem; line-height:1.66; color:var(--body); }
.awl .awl-list li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:8px; height:2px; background:var(--accent); }
.awl .awl-list li strong{ color:var(--ink); }
.awl .awl-prose p:last-child{ margin-bottom:0; }

/* ----------------------------------------------------------------------------
   BLOCK: the statutory timeframes — editorial timeline. Each node carries the ink-in
   numeral (left column) + a continuous spine (border-left on the content) + an accent
   node dot at the date marker. The date marker is ADDED scaffold restating the verbatim
   timeframe; the node body is the verbatim timeframe <li>. Inks in on scroll = the
   response clock starting. Severity-ordered: 24 hours -> 10 + 5 working days -> where
   uninhabitable.
   ---------------------------------------------------------------------------- */
.awl .awl-tl{ --tlcol:clamp(56px,7vw,96px); list-style:none; margin:clamp(26px,3.6vw,48px) 0 0;
  padding:0; display:grid; gap:0; }
.awl .awl-tl-node{ display:grid; grid-template-columns:var(--tlcol) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px); align-items:stretch; }
/* margin-top (NOT padding-top) so the ink-in ::after (inset:0 on the padding box)
   stays registered to the base digit — padding-top would offset the fill from the outline */
.awl .awl-tl-no{ font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);
  margin-top:clamp(22px,2.8vw,36px); justify-self:start; }
.awl .awl-tl-node:first-child .awl-tl-no{ margin-top:0; }
.awl .awl-tl-main{ position:relative; border-left:2px solid var(--line);
  padding:clamp(22px,2.8vw,36px) 0 clamp(22px,2.8vw,36px) clamp(20px,2.4vw,34px); }
.awl .awl-tl-node:first-child .awl-tl-main{ padding-top:0; }
.awl .awl-tl-node:last-child .awl-tl-main{ padding-bottom:0; }
/* node dot on the spine, level with the date marker */
.awl .awl-tl-main::before{ content:""; position:absolute; left:-7px;
  top:calc(clamp(22px,2.8vw,36px) + .25em); width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--paper); }
.awl .awl-tl-node:first-child .awl-tl-main::before{ top:.25em; }
/* date marker may wrap to two lines on the longer "significant" node — give it leading */
.awl .awl-tl-date{ display:block; font:800 12px/1.35 var(--display); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); font-variant-numeric:tabular-nums;
  margin-bottom:11px; max-width:48ch; }
.awl .awl-tl-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.015em; }
.awl .awl-tl-main p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }
.awl .awl-source{ margin:clamp(22px,3vw,38px) 0 0; font-size:.92rem; line-height:1.6; color:var(--mut); }

/* ----------------------------------------------------------------------------
   BLOCK: where to look next — verbatim see-also prose
   ---------------------------------------------------------------------------- */
.awl .awl-seealso{ max-width:70ch; font-size:1.0625rem; line-height:1.74; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.awl .awl-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.awl .awl-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.awl .awl-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.awl .awl-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.awl .awl-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.awl .awl-clist li strong{ color:var(--ink); }
.awl .awl-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.awl .awl-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.awl .awl-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.awl .awl-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .awl [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .awl [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .awl .awl-intro-grid{ grid-template-columns:1fr; }
  .awl .awl-intro-aside{ position:static; }
  .awl .pull{ max-width:38ch; }
  .awl .awl-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .awl .pillar{ grid-template-columns:1fr; gap:12px; }
  .awl .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:2px; }
  .awl .hero h1{ max-width:none; }
  .awl .awl-prov-h{ max-width:none; }
  /* timeline: keep the numeral + spine rail, just tighten the column */
  .awl .awl-tl{ --tlcol:clamp(42px,12vw,56px); }
  .awl .awl-tl-no{ font-size:clamp(2.1rem,1.6rem + 4vw,2.8rem); }
}


/* === HWJ /section-8-grounds reimagined === */
/* ============================================================================
   HWJ /section-8-grounds — reimagined page styles (scoped under .s8g so it
   can't leak into the global .site-h header / .site-f footer). Locked cream/sand
   house palette. LEGAL tier: typography + editorial scaffold only — copy is strictly
   verbatim, no data viz, no gadget. Figures/citations = Lato + tabular-nums (NO mono).
   Cloned from /renters-rights-act-2025 (.rra→.s8g): this is the page the /about
   "ink-in" numerals were made for — every Schedule 2 ground is a numbered ink-in row
   carrying its REAL ground number (1, 1A, 5C, 7A, 14ZA …), verbatim heading + body,
   a mandatory/discretionary tag, and a § statutory-basis chip.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.s8g{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.s8g *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.s8g .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.s8g section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.s8g section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.s8g h1,.s8g h2,.s8g h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.s8g h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.s8g h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.s8g p{ margin:0 0 1.05em; }
.s8g a{ color:inherit; }
.s8g strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.s8g a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.s8g .s8g-intro-prose a,
.s8g .s8g-prov p a,
.s8g .s8g-ground-b a,
.s8g .s8g-foot a,
.s8g .s8g-seealso a,
.s8g .s8g-source a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.s8g .s8g-intro-prose a:hover,
.s8g .s8g-prov p a:hover,
.s8g .s8g-ground-b a:hover,
.s8g .s8g-foot a:hover,
.s8g .s8g-seealso a:hover,
.s8g .s8g-source a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.s8g .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.s8g .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.s8g .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + synthesis foot (shared measure) */
.s8g .s8g-lead{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }
.s8g .s8g-foot{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-top:clamp(30px,4vw,56px); color:var(--body); }
.s8g .s8g-foot strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.s8g .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.s8g .hero .shell{ position:relative; }
.s8g .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.s8g .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.s8g .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:60ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.s8g .s8g-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.s8g .s8g-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.s8g .s8g-intro-aside{ position:sticky; top:96px; }
.s8g .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.s8g .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: pillars — the "why this matters" three-audience read (numbered, cited)
   The numeral "inks in": solid accent fill rises from the baseline on scroll.
   Default (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   Shared by .pillar (why-this-matters) and .s8g-ground (the Schedule 2 grounds).
   ---------------------------------------------------------------------------- */
.s8g .pillars{ display:grid; gap:0; }
.s8g .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(34px,4.5vw,60px) 0;
  border-top:1px solid var(--line);
}
.s8g .pillar:first-of-type{ border-top:0; }
.s8g .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .s8g .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.s8g .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .s8g .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .s8g .pillar.in .pillar-no::after,
html.js .s8g .s8g-ground.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .s8g .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .s8g .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.s8g .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.02em; max-width:26ch; }
.s8g .pillar-b{ max-width:66ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.s8g .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: grounds — the Schedule 2 grounds, each an ink-in numbered row.
   Reuses the .pillar shell + .pillar-no ink-in numeral (data-num = the REAL,
   non-sequential ground number incl. letters). A long ref (e.g. 14ZA, marked with
   an inline --nlen glyph count) auto-shrinks to fit the numeral column; 1–2 char
   refs keep the big size. Per-ground: verbatim heading, verbatim body, a
   mandatory/discretionary tag, a § chip.
   ---------------------------------------------------------------------------- */
.s8g .s8g-grounds{ display:grid; gap:0; border-top:1px solid var(--line); }
.s8g .s8g-ground{
  --gncol:clamp(92px,10.5vw,138px);
  display:grid; grid-template-columns:var(--gncol) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);
  padding:clamp(28px,3.8vw,48px) 0;
  border-bottom:1px solid var(--line);
}
/* The numeral auto-fits its lane: a long ground ref (e.g. 14ZA — carries an inline
   --nlen = glyph count) shrinks just enough to fit the column; 1–2 char refs keep the
   big default size. The ink-in ::after inherits the size, so the fill stays registered.
   First declaration is the safe fallback for browsers without min(). */
.s8g .s8g-ground .pillar-no{
  white-space:nowrap;
  font-size:clamp(2.2rem,1.4rem + 3.4vw,4.2rem);
  font-size:min(clamp(2.2rem,1.4rem + 3.4vw,4.2rem), calc(var(--gncol) / max(1, var(--nlen,1)) / 0.8));
  margin-top:.02em;
}
/* "Ground" eyebrow above the big numeral, so a bare "1A"/"5C" reads as a ground ref */
.s8g .s8g-ground-key{ display:flex; flex-direction:column; align-items:flex-start; }
.s8g .s8g-ground-key .s8g-gk-label{ font:800 11px/1 var(--display); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut); margin-bottom:8px; }
.s8g .s8g-ground-main{ min-width:0; }
.s8g .s8g-ground-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .58em; max-width:42ch; }
.s8g .s8g-ground-b{ max-width:70ch; font-size:1.0312rem; line-height:1.68; color:var(--body); margin:0; }
.s8g .s8g-ground-b strong{ color:var(--ink); }
.s8g .s8g-ground-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }

/* mandatory / discretionary tag — small Lato pill, accent-ink on cream */
.s8g .s8g-tag{ display:inline-flex; align-items:center; gap:7px;
  font:800 11px/1 var(--display); letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; }
.s8g .s8g-tag::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.s8g .s8g-tag-mand{ color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 13%,var(--cream)); }
.s8g .s8g-tag-mand::before{ background:var(--accent); }
.s8g .s8g-tag-disc{ color:var(--mut); background:var(--cream); border:1px solid var(--line); }
.s8g .s8g-tag-disc::before{ background:var(--div); }

/* ----------------------------------------------------------------------------
   BLOCK: provisions — verbatim editorial paragraphs (intro/notes/arrears prose),
   each § cited. Same scaffold as the RRA "other changes" provision blocks.
   ---------------------------------------------------------------------------- */
.s8g .s8g-provs{ display:grid; gap:0; border-top:1px solid var(--line); }
.s8g .s8g-prov{ padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--line); }
.s8g .s8g-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .6em; max-width:46ch;
  display:flex; gap:12px; align-items:baseline; }
.s8g .s8g-prov-h::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.s8g .s8g-prov p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }
.s8g .s8g-prov p strong{ color:var(--ink); }
.s8g .s8g-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* verbatim editorial prose (no bold lead-ins to promote — e.g. specialist grounds) */
.s8g .s8g-prose{ max-width:74ch; }
.s8g .s8g-prose p{ font-size:1.0312rem; line-height:1.7; color:var(--body); }
.s8g .s8g-prose p:last-of-type{ margin-bottom:0; }
.s8g .s8g-prose strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: arrears workflow — verbatim <ul> day-schedule, rendered as a clean
   ledger list. Day markers (the verbatim bold lead-ins) carry tabular-nums.
   ---------------------------------------------------------------------------- */
.s8g .s8g-flow{ list-style:none; margin:clamp(22px,3vw,40px) 0 0; padding:0;
  border-top:1px solid var(--line); display:grid; gap:0; }
.s8g .s8g-flow li{ padding:clamp(16px,2vw,24px) 0; border-bottom:1px solid var(--line);
  max-width:80ch; font-size:1.0312rem; line-height:1.62; color:var(--body); }
.s8g .s8g-flow li strong{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------------------------
   BLOCK: where to look next — verbatim see-also prose
   ---------------------------------------------------------------------------- */
.s8g .s8g-seealso{ max-width:70ch; font-size:1.0625rem; line-height:1.74; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.s8g .s8g-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.s8g .s8g-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.s8g .s8g-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.s8g .s8g-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.s8g .s8g-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.s8g .s8g-clist li strong{ color:var(--ink); }
.s8g .s8g-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.s8g .s8g-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.s8g .s8g-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.s8g .s8g-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .s8g [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .s8g [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .s8g .s8g-intro-grid{ grid-template-columns:1fr; }
  .s8g .s8g-intro-aside{ position:static; }
  .s8g .pull{ max-width:38ch; }
  .s8g .s8g-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .s8g .pillar{ grid-template-columns:1fr; gap:12px; }
  .s8g .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:2px; }
  .s8g .hero h1{ max-width:none; }
  .s8g .s8g-prov-h{ max-width:none; }
  /* grounds: stack the numeral above the body, keep the ink-in numeral prominent */
  .s8g .s8g-ground{ grid-template-columns:1fr; gap:10px; }
  .s8g .s8g-ground .pillar-no{ font-size:clamp(2.4rem,2rem + 5vw,3.2rem); margin-top:0; margin-bottom:0; }
  .s8g .s8g-ground-h{ max-width:none; }
}


/* === HWJ /renters-rights-information-sheet reimagined === */
/* ============================================================================
   HWJ /renters-rights-information-sheet — reimagined page styles (scoped under .ris
   so it can't leak into the global .site-h header / .site-f footer). Locked cream/sand
   house palette. LEGAL tier (the government-prescribed MHCLG information sheet): typography
   + editorial scaffold only — copy is strictly verbatim, no data viz, no gadget, NO numerals,
   NO timeline (the source presents no explicitly-numbered list of rights/steps). Figures/
   citations = Lato + tabular-nums (NO mono). Cloned from /renters-rights-act-2025 and rescoped
   (.rra -> .ris, rra-* -> ris-*); the pillar/timeline blocks are dropped as unused here.
   The earned moves are the house hero, content-width dividers, § citation chips that surface
   refs already in the copy, clean provision blocks for the substantive sections, and a calm
   restyle of the six verbatim lists.
   Motion is a progressive enhancement: gated behind html.js so the page is fully visible if
   the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.ris{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.ris *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.ris .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.ris section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.ris section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.ris h1,.ris h2,.ris h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.ris h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.ris h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.ris p{ margin:0 0 1.05em; }
.ris a{ color:inherit; }
.ris strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.ris a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.ris .ris-intro-prose a,
.ris .ris-prose a,
.ris .ris-prov-body a,
.ris .ris-applies a,
.ris .ris-lead a,
.ris .ris-seealso a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.ris .ris-intro-prose a:hover,
.ris .ris-prose a:hover,
.ris .ris-prov-body a:hover,
.ris .ris-applies a:hover,
.ris .ris-lead a:hover,
.ris .ris-seealso a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.ris .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.ris .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.ris .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead (shared measure) */
.ris .ris-lead{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(8px,1.5vw,18px); color:var(--body); }

/* generic verbatim prose stack (about section) */
.ris .ris-prose{ max-width:72ch; }
.ris .ris-prose p{ font-size:1.0312rem; line-height:1.72; color:var(--body); }
.ris .ris-prose p:last-child{ margin-bottom:0; }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.ris .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.ris .hero .shell{ position:relative; }
.ris .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.ris .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.ris .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:64ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.ris .ris-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.ris .ris-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.ris .ris-intro-prose p:last-child{ margin-bottom:0; }
.ris .ris-intro-aside{ position:sticky; top:96px; }
.ris .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:26ch;
}
.ris .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: the changes — provision blocks (verbatim, § cited). One per substantive
   section of the sheet. No numerals (the source presents no numbered list of rights).
   ---------------------------------------------------------------------------- */
.ris .ris-provs{ display:grid; gap:0; border-top:1px solid var(--line);
  margin-top:clamp(20px,2.6vw,34px); }
.ris .ris-prov{ padding:clamp(28px,3.8vw,48px) 0; border-bottom:1px solid var(--line); }
.ris .ris-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .85em; max-width:46ch;
  display:flex; gap:12px; align-items:baseline; }
.ris .ris-prov-h::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.ris .ris-prov-body{ max-width:74ch; }
.ris .ris-prov-body p{ font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0 0 1em; }
.ris .ris-prov-body p:last-child{ margin-bottom:0; }
.ris .ris-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* the six verbatim lists, restyled cleanly (no invented structure) */
.ris .ris-list{ list-style:none; margin:.2em 0 1.05em; padding:0; max-width:74ch;
  display:grid; gap:10px; }
.ris .ris-list li{ position:relative; padding-left:26px; font-size:1.0312rem; line-height:1.66;
  color:var(--body); }
.ris .ris-list li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.ris .ris-prov-body > .ris-list:last-child{ margin-bottom:0; }

/* ----------------------------------------------------------------------------
   BLOCK: how HWJ applies this — verbatim 6-item list with bold lead-ins, kept inline
   so the source list structure is preserved exactly. Restyled as a clean operational list.
   ---------------------------------------------------------------------------- */
.ris .ris-applies{ list-style:none; margin:clamp(20px,2.6vw,34px) 0 0; padding:0;
  display:grid; gap:0; border-top:1px solid var(--line); max-width:84ch; }
.ris .ris-applies li{ position:relative; padding:clamp(18px,2.2vw,26px) 0 clamp(18px,2.2vw,26px) 26px;
  border-bottom:1px solid var(--line); font-size:1.0312rem; line-height:1.68; color:var(--body); }
.ris .ris-applies li::before{ content:""; position:absolute; left:2px; top:calc(clamp(18px,2.2vw,26px) + .58em);
  width:9px; height:9px; border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.ris .ris-applies li strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.ris .ris-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.ris .ris-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.ris .ris-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.ris .ris-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.ris .ris-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.ris .ris-clist li strong{ color:var(--ink); }
.ris .ris-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.ris .ris-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.ris .ris-legal{ max-width:80ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.ris .ris-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .ris [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .ris [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .ris .ris-intro-grid{ grid-template-columns:1fr; }
  .ris .ris-intro-aside{ position:static; }
  .ris .pull{ max-width:40ch; }
  .ris .ris-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .ris .hero h1{ max-width:none; }
  .ris .ris-prov-h{ max-width:none; }
}


/* === HWJ /internal-complaints-procedure reimagined === */
/* ============================================================================
   HWJ /internal-complaints-procedure — reimagined page styles (scoped under .icp so
   it can't leak into the global .site-h header / .site-f footer). Locked cream/sand
   house palette. LEGAL tier: typography + editorial scaffold only — copy is strictly
   verbatim, no data viz, no gadget. Figures/citations = Lato + tabular-nums (NO mono).
   Cloned from /renters-rights-act-2025 (.rra → .icp, rra-* → icp-*). The earned moves
   are the house hero, content-width dividers, § citation chips, and an editorial
   TIMELINE for the five-step, deadline-driven complaints procedure (ink-in numerals
   1–5 on a continuous spine).
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.icp{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.icp *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.icp .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.icp section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.icp section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.icp h1,.icp h2,.icp h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.icp h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.icp h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.icp p{ margin:0 0 1.05em; }
.icp a{ color:inherit; }
.icp strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.icp a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.icp .icp-intro-prose a,
.icp .icp-prov p a,
.icp .icp-prov-ul a,
.icp .icp-tl-main p a,
.icp .icp-raise-body a,
.icp .icp-rro-body a,
.icp .icp-decide-prose a,
.icp .icp-note a,
.icp .icp-hazard-panel a,
.icp .icp-foot a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.icp .icp-intro-prose a:hover,
.icp .icp-prov p a:hover,
.icp .icp-prov-ul a:hover,
.icp .icp-tl-main p a:hover,
.icp .icp-raise-body a:hover,
.icp .icp-rro-body a:hover,
.icp .icp-decide-prose a:hover,
.icp .icp-note a:hover,
.icp .icp-hazard-panel a:hover,
.icp .icp-foot a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.icp .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.icp .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.icp .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + synthesis foot (shared measure) */
.icp .icp-lead{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }
.icp .icp-foot{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-top:clamp(30px,4vw,56px); color:var(--body); }
.icp .icp-foot strong{ color:var(--ink); }

/* shared verbatim prose body (intro-paragraph / list groups not in a special panel) */
.icp .icp-raise-body,
.icp .icp-rro-body,
.icp .icp-decide-prose,
.icp .icp-note{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.icp .icp-raise-body p:last-child,
.icp .icp-rro-body p:last-child,
.icp .icp-decide-prose p:last-child,
.icp .icp-note{ margin-bottom:0; }

/* shared verbatim lists (the source <ul>s) — restyled with an accent marker, kept verbatim */
.icp .icp-ul{ list-style:none; margin:0 0 1.05em; padding:0; display:grid; gap:11px; max-width:74ch; }
.icp .icp-ul li{ position:relative; padding-left:24px; font-size:1.0312rem; line-height:1.62; color:var(--body); }
.icp .icp-ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--accent); }
.icp .icp-ul li strong{ color:var(--ink); }
.icp .icp-ul-wide{ max-width:78ch; }
.icp .icp-ul-wide li{ padding-bottom:1px; }
.icp .icp-raise-body .icp-ul{ margin-block:14px 1.05em; }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.icp .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.icp .hero .shell{ position:relative; }
.icp .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.icp .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.icp .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:60ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.icp .icp-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.icp .icp-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.icp .icp-intro-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.icp .icp-intro-aside{ position:sticky; top:96px; }
.icp .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.icp .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: timeline — editorial timeline for the five-step procedure. Each step node
   carries the ink-in numeral (left column) + a continuous spine (border-left on the
   content) + an accent node dot at the date marker. Inks in on scroll = each step
   "coming due". The numeral "inks in": solid accent fill rises from the baseline on
   scroll. Default (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   ---------------------------------------------------------------------------- */
.icp .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .icp .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.icp .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .icp .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .icp .icp-tl-node.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .icp .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .icp .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}

.icp .icp-tl{ --tlcol:clamp(56px,7vw,96px); list-style:none; margin:clamp(26px,3.6vw,48px) 0 0;
  padding:0; display:grid; gap:0; }
.icp .icp-tl-node{ display:grid; grid-template-columns:var(--tlcol) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px); align-items:stretch; }
/* margin-top (NOT padding-top) so the ink-in ::after (inset:0 on the padding box)
   stays registered to the base digit — padding-top would offset the fill from the outline */
.icp .icp-tl-no{ font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);
  margin-top:clamp(22px,2.8vw,36px); justify-self:start; }
.icp .icp-tl-node:first-child .icp-tl-no{ margin-top:0; }
.icp .icp-tl-main{ position:relative; border-left:2px solid var(--line);
  padding:clamp(22px,2.8vw,36px) 0 clamp(22px,2.8vw,36px) clamp(20px,2.4vw,34px); }
.icp .icp-tl-node:first-child .icp-tl-main{ padding-top:0; }
.icp .icp-tl-node:last-child .icp-tl-main{ padding-bottom:0; }
/* node dot on the spine, level with the date marker */
.icp .icp-tl-main::before{ content:""; position:absolute; left:-7px;
  top:calc(clamp(22px,2.8vw,36px) + .25em); width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--paper); }
.icp .icp-tl-node:first-child .icp-tl-main::before{ top:.25em; }
.icp .icp-tl-date{ display:block; font:800 12px/1 var(--display); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); font-variant-numeric:tabular-nums;
  margin-bottom:11px; }
.icp .icp-tl-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.015em; }
.icp .icp-tl-main p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: expected timeframes — at-a-glance figures in a clean ledger panel
   ---------------------------------------------------------------------------- */
.icp .icp-glance-list{ list-style:none; margin:0; padding:0; max-width:78ch;
  border-top:1px solid var(--line); }
.icp .icp-glance-list li{ position:relative; padding:15px 0 15px 26px; border-bottom:1px solid var(--line);
  font-size:1.05rem; line-height:1.5; color:var(--body); font-variant-numeric:tabular-nums; }
.icp .icp-glance-list li::before{ content:""; position:absolute; left:2px; top:1.42em; width:9px; height:9px;
  border-radius:50%; background:var(--accent); }
.icp .icp-glance-list li strong{ color:var(--ink); font-family:var(--display); font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ----------------------------------------------------------------------------
   BLOCK: provision blocks — the two redress routes + RRO + decide (verbatim, § cited)
   ---------------------------------------------------------------------------- */
.icp .icp-provs{ display:grid; gap:0; border-top:1px solid var(--line); }
.icp .icp-prov{ padding:clamp(28px,3.6vw,48px) 0; border-bottom:1px solid var(--line); }
.icp .icp-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .7em; max-width:48ch;
  display:flex; gap:12px; align-items:baseline; }
.icp .icp-prov-h::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.icp .icp-prov p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.icp .icp-prov p:last-of-type{ margin-bottom:0; }
.icp .icp-prov-ul{ margin-block:0 1.05em; }
.icp .icp-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: note / contractor — single-paragraph editorial note
   ---------------------------------------------------------------------------- */
/* (uses shared .icp-note measure above) */

/* ----------------------------------------------------------------------------
   BLOCK: hazards — caution panel (source itself flags this as the faster route)
   ---------------------------------------------------------------------------- */
.icp .icp-hazard-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  border-left:3px solid var(--accent);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.icp .icp-hazard-panel p{ max-width:78ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.icp .icp-hazard-panel p:last-of-type{ margin-bottom:0; }
.icp .icp-hazard-panel .icp-prov-cites{ margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.icp .icp-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.icp .icp-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.icp .icp-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.icp .icp-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.icp .icp-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.icp .icp-clist li strong{ color:var(--ink); }
.icp .icp-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.icp .icp-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.icp .icp-legal{ max-width:80ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.icp .icp-legal em{ font-style:italic; }
.icp .icp-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .icp [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .icp [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .icp .icp-intro-grid{ grid-template-columns:1fr; }
  .icp .icp-intro-aside{ position:static; }
  .icp .pull{ max-width:38ch; }
  .icp .icp-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .icp .hero h1{ max-width:none; }
  .icp .icp-prov-h{ max-width:none; }
  /* timeline: keep the numeral + spine rail, just tighten the column */
  .icp .icp-tl{ --tlcol:clamp(42px,12vw,56px); }
  .icp .icp-tl-no{ font-size:clamp(2.1rem,1.6rem + 4vw,2.8rem); }
}


/* === HWJ /privacy reimagined === */
/* ============================================================================
   HWJ /privacy — reimagined page styles (scoped under .prv so it can't leak into
   the global .site-h header / .site-f footer). Locked cream/sand house palette.
   LEGAL tier: typography + editorial scaffold only — copy is strictly verbatim, no
   data viz, no gadget. Figures/citations = Lato + tabular-nums (NO mono).
   Cloned from /renters-rights-act-2025 (.rra → .prv), with the unique additions this
   page needs: the two restyled cream TABLES (prv-table, stacked-card on mobile), the
   §1/§14 identity panels (prv-deflist), the numbered sub-section blocks (prv-sub), and
   the §13 two-stage complaints panel (prv-steps).
   The earned moves are the house hero, content-width dividers, § citation chips that
   surface refs already in the copy, and the clean cream tables. NO ink-in numerals,
   NO timeline (not warranted by this content). Page ENDS ON LIGHT — no dark CTA.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.prv{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1) */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1) */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.prv *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.prv .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.prv section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.prv section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* tighten the rhythm between consecutive numbered sections (there are 14) so the
   page doesn't feel cavernous — major sections still divided, just calmer */
.prv .prv-sec{ padding-block:clamp(46px,6.5vw,84px); }

/* --- type --- */
.prv h1,.prv h2,.prv h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.prv h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.prv h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.prv p{ margin:0 0 1.05em; }
.prv a{ color:inherit; }
.prv strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.prv a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }
.prv .prv-tablewrap:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:var(--r); }

/* in-copy prose links (shared) */
.prv .prv-intro-prose a,
.prv .prv-sub p a,
.prv .prv-sub li a,
.prv .prv-list li a,
.prv .prv-after a,
.prv .prv-lead a,
.prv .prv-steps a,
.prv .prv-table a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.prv .prv-intro-prose a:hover,
.prv .prv-sub p a:hover,
.prv .prv-sub li a:hover,
.prv .prv-list li a:hover,
.prv .prv-after a:hover,
.prv .prv-lead a:hover,
.prv .prv-steps a:hover,
.prv .prv-table a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.prv .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.prv .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.prv .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + after-prose (shared measure) */
.prv .prv-lead{ max-width:68ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(24px,3.4vw,40px); color:var(--body); }
.prv .prv-lead strong{ color:var(--ink); }
.prv .prv-lead-solo{ margin-bottom:0; }      /* §12: lead is the whole section */
.prv .prv-after{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body);
  margin-top:clamp(22px,3vw,38px); margin-bottom:0; }
.prv .prv-after strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.prv .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.prv .hero .shell{ position:relative; }
.prv .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.prv .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.prv .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:64ch; }
.prv .prv-hero-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,2.4vw,30px); }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.prv .prv-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.prv .prv-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.prv .prv-intro-aside{ position:sticky; top:96px; }
.prv .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:26ch;
}
.prv .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: identity / contact panels — verbatim <ul> as a cream definition panel
   (§1 controller details, §14 contact + registers). Two-column dt/dd rows.
   ---------------------------------------------------------------------------- */
.prv .prv-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,38px); margin-top:clamp(6px,1vw,14px); }
.prv .prv-deflist{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.prv .prv-deflist li{ display:grid; grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);
  gap:clamp(14px,3vw,40px); padding:14px 0; border-top:1px solid var(--line);
  font-size:1rem; line-height:1.55; }
.prv .prv-deflist li:first-child{ border-top:0; padding-top:0; }
.prv .prv-deflist li:last-child{ padding-bottom:0; }
.prv .prv-dt{ font-family:var(--display); font-weight:800; color:var(--ink); letter-spacing:-.01em;
  font-size:.95rem; }
.prv .prv-dd{ color:var(--body); }
.prv .prv-dd a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.prv .prv-dd a:hover{ text-decoration-color:var(--accent); }

/* ----------------------------------------------------------------------------
   BLOCK: sub-sections — numbered provision blocks (2.1–2.10, 5.1–5.5, 8.1–8.8)
   Each verbatim sub-heading carries a small tabular-nums number tab; verbatim body
   + lists follow. Quiet hairline rules separate them within a section.
   ---------------------------------------------------------------------------- */
.prv .prv-subs{ display:grid; gap:0; border-top:1px solid var(--line);
  margin-top:clamp(6px,1vw,14px); }
.prv .prv-sub{ padding:clamp(24px,3.2vw,40px) 0; border-bottom:1px solid var(--line); }
.prv .prv-sub-h{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .7em; max-width:52ch;
  display:flex; gap:14px; align-items:baseline; }
.prv .prv-sub-n{ font-family:var(--display); font-weight:900; color:var(--accent);
  font-variant-numeric:tabular-nums; font-size:.86em; flex:none; letter-spacing:-.02em;
  min-width:2.4ch; }
.prv .prv-sub > p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.prv .prv-sub > p:last-child{ margin-bottom:0; }
.prv .prv-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ----------------------------------------------------------------------------
   verbatim lists — clean check-lists with an accent tick marker
   ---------------------------------------------------------------------------- */
.prv .prv-list{ list-style:none; margin:0 0 1.05em; padding:0; display:grid; gap:11px;
  max-width:80ch; }
.prv .prv-list:last-child{ margin-bottom:0; }
.prv .prv-list li{ position:relative; padding-left:26px; font-size:1.0312rem; line-height:1.62;
  color:var(--body); }
.prv .prv-list li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; border-radius:2px; background:var(--accent);
  transform:rotate(45deg); }
/* "lead-in" lists carry bold provider/condition names then verbatim descriptions */
.prv .prv-list-lead li strong{ color:var(--ink); }
.prv .prv-list li a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.prv .prv-list li a:hover{ text-decoration-color:var(--accent); }

/* ----------------------------------------------------------------------------
   BLOCK: TABLES — the unique element. Verbatim cells restyled into a cream table:
   Lato uppercase-tracked heads, Sen body, tabular-nums, content-width, hairline rows.
   Desktop: real table inside a horizontal-scroll wrapper (so even at tight widths it
   never breaks the page). Mobile (<=720): each row becomes a stacked card with the
   column name surfaced from the data-label attribute. No horizontal overflow at 375.
   ---------------------------------------------------------------------------- */
.prv .prv-tablewrap{ margin-top:clamp(8px,1.4vw,18px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--cream); overflow:hidden; }
.prv .prv-table{ width:100%; border-collapse:collapse; font-size:.975rem; line-height:1.55;
  color:var(--body); font-variant-numeric:tabular-nums; }
.prv .prv-table thead th{ background:var(--soft); color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:left; padding:14px clamp(14px,1.6vw,20px);
  border-bottom:1.5px solid var(--div); white-space:nowrap; }
.prv .prv-table tbody td{ padding:14px clamp(14px,1.6vw,20px); border-top:1px solid var(--line);
  vertical-align:top; }
.prv .prv-table tbody tr:first-child td{ border-top:0; }
.prv .prv-table tbody tr:nth-child(even){ background:color-mix(in srgb,var(--paper) 45%,transparent); }
/* column emphasis: first column reads as the row's "label" */
.prv .prv-table tbody td:first-child{ color:var(--ink); font-weight:600;
  font-family:var(--sans); }
/* retention table: the middle "period" column is the figure — give it Lato + accent-ink */
.prv .prv-table-ret tbody td:nth-child(2){ font-family:var(--display); font-weight:700;
  color:var(--accent-ink); font-variant-numeric:tabular-nums; white-space:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: §13 complaints — two-stage panel (verbatim Stage 1 / Stage 2 prose)
   ---------------------------------------------------------------------------- */
.prv .prv-steps{ display:grid; gap:0; border-top:1px solid var(--line);
  margin-top:clamp(6px,1vw,14px); }
.prv .prv-step{ display:grid; grid-template-columns:clamp(76px,9vw,116px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px); padding:clamp(22px,3vw,36px) 0; border-bottom:1px solid var(--line);
  align-items:start; }
.prv .prv-step-n{ font-family:var(--display); font-weight:900; color:var(--accent);
  font-size:clamp(1.05rem,.9rem + .6vw,1.34rem); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.prv .prv-step p{ max-width:72ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.prv .prv-step p:last-child{ margin-bottom:0; }
.prv .prv-step .prv-list{ margin-top:.6em; }

/* ----------------------------------------------------------------------------
   BLOCK: §14 close — governing-law note + last-reviewed stamp as small print
   (page ENDS ON LIGHT — no dark CTA, no seam line)
   ---------------------------------------------------------------------------- */
.prv .prv-contact .prv-govlaw{ max-width:80ch; margin:clamp(26px,3.5vw,42px) 0 0;
  padding-top:clamp(18px,2vw,26px); border-top:1px solid var(--line);
  font-size:.86rem; line-height:1.66; color:var(--mut); }
.prv .prv-contact .prv-govlaw em{ font-style:italic; }
.prv .prv-reviewed{ margin:clamp(16px,2vw,24px) 0 0; font-size:.95rem; color:var(--ink); }
.prv .prv-reviewed strong{ color:var(--ink);
  font-family:var(--display); font-weight:800; letter-spacing:-.01em; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .prv [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .prv [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .prv .prv-intro-grid{ grid-template-columns:1fr; }
  .prv .prv-intro-aside{ position:static; }
  .prv .pull{ max-width:42ch; }
}
@media (max-width:720px){
  /* definition panels stack to single column */
  .prv .prv-deflist li{ grid-template-columns:1fr; gap:4px; padding:13px 0; }
  .prv .prv-dt{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }

  /* complaints steps stack */
  .prv .prv-step{ grid-template-columns:1fr; gap:8px; }

  /* TABLES → stacked cards. Hide the real thead; each <tr> is a card; each <td>
     gets its column name from data-label. No horizontal scroll needed. */
  .prv .prv-tablewrap{ overflow:visible; border:0; background:transparent; border-radius:0; }
  .prv .prv-table{ display:block; }
  .prv .prv-table thead{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .prv .prv-table tbody{ display:grid; gap:14px; }
  .prv .prv-table tbody tr{ display:block; background:var(--cream); border:1px solid var(--line);
    border-radius:var(--r); padding:clamp(14px,4vw,18px); }
  .prv .prv-table tbody tr:nth-child(even){ background:var(--cream); }
  .prv .prv-table tbody td{ display:block; border-top:0; padding:0; }
  .prv .prv-table tbody td + td{ margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
  .prv .prv-table tbody td:first-child{ font-size:1.04rem; }
  .prv .prv-table tbody td::before{ content:attr(data-label); display:block;
    font-family:var(--display); font-weight:800; font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mut); margin-bottom:5px; }
  .prv .prv-table-ret tbody td:nth-child(2){ white-space:normal; }
}
@media (max-width:680px){
  .prv .hero h1{ max-width:none; }
  .prv .prv-sub-h{ max-width:none; }
}


/* === HWJ /glossary reimagined === */
/* ============================================================================
   HWJ /glossary — reimagined page styles (scoped under .gls so it can't leak into
   the global .site-h header / .site-f footer). Locked cream/sand house palette.
   REFERENCE tier: typography + editorial scaffold only — copy is strictly verbatim,
   no data viz, no gadget. Figures/citations = Lato + tabular-nums (NO mono).
   Cloned from /renters-rights-act-2025 (.rra → .gls, rra-* → gls-*). The dictionary
   register is lighter than RRA's provision blocks: hairline-separated term entries,
   flowing in two columns on wide screens, with a sticky A–Z jump index (ADDED nav).
   The earned moves are the house hero, content-width dividers, § citation chips on
   statute-citing entries, and the A–Z index.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.gls{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.gls *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.gls .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.gls section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.gls section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.gls h1,.gls h2,.gls h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.gls h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.gls h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.gls p{ margin:0 0 1.05em; }
.gls a{ color:inherit; }
.gls strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.gls a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.gls .gls-intro-prose a,
.gls .gls-term p a,
.gls .gls-howto-prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.gls .gls-intro-prose a:hover,
.gls .gls-term p a:hover,
.gls .gls-howto-prose a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.gls .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.gls .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.gls .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead (shared measure) */
.gls .gls-lead{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.gls .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.gls .hero .shell{ position:relative; }
.gls .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.gls .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.gls .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:60ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose (no pull-quote on this reference page)
   ---------------------------------------------------------------------------- */
.gls .gls-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }

/* ----------------------------------------------------------------------------
   BLOCK: A–Z index — ADDED nav microcopy. Sticky on wide screens, plain anchors.
   Works fully without JS. Inert letters (no entries) are muted + non-interactive.
   ---------------------------------------------------------------------------- */
.gls .gls-az{ padding-block:0; position:sticky; top:0; z-index:5;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--div); }
/* the sticky index sits between sections — suppress the generic section-seam rule on it */
.gls section + .gls-az::before{ display:none; }
.gls .gls-az .shell{ display:flex; align-items:center; gap:clamp(10px,2vw,20px);
  padding-block:12px; flex-wrap:wrap; }
.gls .gls-az-lab{ font-family:var(--display); font-weight:900; font-size:13px; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); flex:none;
  font-variant-numeric:tabular-nums; }
.gls .gls-az-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:2px; }
.gls .gls-az-list li{ display:flex; }
.gls .gls-az-list a,
.gls .gls-az-off{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; min-height:30px; padding:0 6px; border-radius:8px;
  font-family:var(--display); font-weight:800; font-size:14px; line-height:1;
  letter-spacing:.01em; text-decoration:none; color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.gls .gls-az-list a:hover{ background:var(--accent); color:#fff; }
.gls .gls-az-list a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:2px; }
.gls .gls-az-off{ color:var(--mut); opacity:.45; cursor:default; }

/* ----------------------------------------------------------------------------
   BLOCK: glossary entries — dictionary register. Letter group markers (large Lato),
   terms hairline-separated, flowing in two columns on wide screens. Lighter than the
   RRA provision blocks: thinner rules, tighter measure, no heavy top borders.
   ---------------------------------------------------------------------------- */
.gls .gls-body{ scroll-margin-top:0; }
.gls .gls-group{ margin-top:clamp(34px,5vw,64px); }
.gls .gls-group:first-child{ margin-top:0; }

/* the big alphabet marker that opens each group; offset so the sticky index
   doesn't cover it when jumped to */
.gls .gls-letter{
  font-family:var(--display); font-weight:900; letter-spacing:-.03em; line-height:1;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem); color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-bottom:clamp(14px,1.8vw,22px); margin-bottom:clamp(18px,2.4vw,30px);
  border-bottom:1.5px solid var(--div);
  scroll-margin-top:clamp(64px,8vw,86px);   /* clears the sticky A–Z bar on jump */
}

/* two-column flow of entries on wide screens; DOM order (alphabetical) preserved.
   column-count keeps reading order top-to-bottom within each column. */
.gls .gls-entries{ column-gap:clamp(34px,5vw,72px); }
@media (min-width:780px){
  .gls .gls-entries{ column-count:2; }
}
.gls .gls-term{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  padding:clamp(16px,2vw,22px) 0;
  border-top:1px solid var(--line);
}
.gls .gls-term:first-child{ border-top:0; padding-top:0; }
.gls .gls-term-h{ font-size:clamp(1.04rem,.96rem + .4vw,1.2rem); font-weight:800; color:var(--ink);
  letter-spacing:-.012em; line-height:1.22; margin:0 0 .5em; }
.gls .gls-term p{ font-size:.975rem; line-height:1.66; color:var(--body); margin:0; max-width:54ch; }
.gls .gls-term-cites{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }

/* the empty-letter placeholders (Q, U, W–Z) — verbatim note, muted */
.gls .gls-group-empty .gls-letter{ color:var(--mut); }
.gls .gls-empty{ font-size:.95rem; line-height:1.6; color:var(--mut); margin:0; font-style:italic; }

/* ----------------------------------------------------------------------------
   BLOCK: how to use — verbatim closing prose + legal small print
   ---------------------------------------------------------------------------- */
.gls .gls-howto-prose{ max-width:70ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }

/* legal small print — closes the page on light content (no dark CTA) */
.gls .gls-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.gls .gls-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .gls [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .gls [data-reveal].in{ opacity:1; transform:none; }
}
/* never hide the sticky A–Z bar behind a reveal — it must be usable immediately */
html.js .gls .gls-az[data-reveal]{ opacity:1; transform:none; }

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:780px){
  .gls .gls-entries{ column-count:1; }
  .gls .gls-term p{ max-width:none; }
}
@media (max-width:680px){
  .gls .hero h1{ max-width:none; }
  /* A–Z index: let it wrap to two rows on narrow screens, stay tappable (≥30px, ≥44 row) */
  .gls .gls-az .shell{ gap:8px; }
  .gls .gls-az-list{ gap:3px; }
  .gls .gls-az-list a,
  .gls .gls-az-off{ min-width:34px; min-height:34px; }
}


/* === HWJ /faq reimagined === */
/* ============================================================================
   HWJ /faq — reimagined page styles (scoped under .fq so it can't leak into the
   global .site-h header / .site-f footer). Locked cream/sand house palette. LEGAL
   tier: typography + editorial scaffold only — copy is strictly verbatim, no data
   viz, no gadget, no JS accordion. Figures/citations = Lato + tabular-nums (NO mono).
   Echoes the /renters-rights-act-2025 template: house hero, content-width dividers,
   § citation chips surfacing refs already in the copy, and the RRA provision-block
   rhythm reused for the static Q&A list (fq-qa items, hairline-separated).
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.fq{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.fq *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.fq .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.fq section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.fq section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.fq h1,.fq h2,.fq h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.fq h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.fq h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.fq p{ margin:0 0 1.05em; }
.fq a{ color:inherit; }
.fq strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.fq a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.fq .fq-intro-prose a,
.fq .fq-qa p a,
.fq .fq-seealso a,
.fq .fq-foot a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.fq .fq-intro-prose a:hover,
.fq .fq-qa p a:hover,
.fq .fq-seealso a:hover,
.fq .fq-foot a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.fq .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.fq .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.fq .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + synthesis foot (shared measure) */
.fq .fq-lead{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }
.fq .fq-foot{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-top:clamp(30px,4vw,56px); color:var(--body); }
.fq .fq-foot strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.fq .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.fq .hero .shell{ position:relative; }
.fq .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.fq .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.fq .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:62ch; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.fq .fq-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.fq .fq-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.fq .fq-intro-prose p:last-child{ margin-bottom:0; }
.fq .fq-intro-aside{ position:sticky; top:96px; }
.fq .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.fq .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: Q&A categories — the static, fully-visible question list. Each fq-qa
   item reuses the RRA provision-block rhythm: a scannable Lato question heading
   (with a leading § glyph) + the verbatim answer below, hairline-separated.
   No JS accordion: every answer is in the DOM and visible at all times.
   ---------------------------------------------------------------------------- */
.fq .fq-qas{ display:grid; gap:0; border-top:1px solid var(--line); }
.fq .fq-qa{ padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--line); }
.fq .fq-q{ font-size:clamp(1.12rem,1rem + .5vw,1.36rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .6em; max-width:52ch;
  display:flex; gap:12px; align-items:baseline; }
.fq .fq-q::before{ content:"§"; font-family:var(--display); font-weight:900;
  color:var(--accent); font-size:.92em; flex:none; }
.fq .fq-qa p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }
.fq .fq-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ----------------------------------------------------------------------------
   BLOCK: where else to look — verbatim see-also prose
   ---------------------------------------------------------------------------- */
.fq .fq-seealso{ max-width:70ch; font-size:1.0625rem; line-height:1.74; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.fq .fq-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.fq .fq-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.fq .fq-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.fq .fq-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.fq .fq-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.fq .fq-clist li strong{ color:var(--ink); }
.fq .fq-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.fq .fq-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.fq .fq-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.fq .fq-legal em{ font-style:italic; }
.fq .fq-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .fq [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .fq [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .fq .fq-intro-grid{ grid-template-columns:1fr; }
  .fq .fq-intro-aside{ position:static; }
  .fq .pull{ max-width:38ch; }
  .fq .fq-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .fq .hero h1{ max-width:none; }
  .fq .fq-q{ max-width:none; }
}


/* === HWJ /guarantor-services reimagined === */
/* ============================================================================
   HWJ /guarantor-services — reimagined page styles (scoped under .gsv so it can't
   leak into the global .site-h header / .site-f footer). Locked cream/sand palette.
   PROPOSITION / SERVICE tier (NOT strictly-verbatim legal): copy is reproduced
   faithfully, restyled onto the house editorial scaffold, with an earned signature
   where justified. Figures/citations = Lato + tabular-nums (NO mono).
   Cloned from /privacy (.prv → .gsv) — reuses its hero, content-width dividers,
   § citation chips, cream TABLES (gsv-table, stacked-card on mobile) and the
   reveal-on-scroll system. The additions this page needs:
     - gsv-prov  : numbered provision blocks (the "First… Fifth…" risk/feature lists
                   and the ranked-provider entries, each bold lead promoted to a head).
     - gsv-table-cost : the WIDE 8-column indicative-cost table — desktop sits in an
                   overflow-x:auto wrapper (never breaks the page); <=720 it stacks to
                   per-row cards with the formula as the title and 7 labelled figure rows.
     - gsv-cta band-dark + V4 seam : this is a CONVERSION page → it ENDS ON A DARK CTA
                   (the about.css band-dark + band-dark:last-child::after seam + btn set,
                   incl. the btn-james "Ask James" weave).
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.gsv{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1) */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1) */
  --body-soft:#4d4a44;
  --on-dark:#e9e5dc; --on-dark-mut:#bbb6ad; --kicker-dark:#a39d93;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.gsv *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.gsv .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.gsv section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.gsv section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}
/* dark CTA: no top divider above it, and it owns the seam below (see CTA block) */
.gsv .band-dark::before,
.gsv .band-dark + section::before{ display:none; }

/* tighten the rhythm between consecutive numbered sections (there are 14) so the
   page doesn't feel cavernous — major sections still divided, just calmer */
.gsv .gsv-sec{ padding-block:clamp(46px,6.5vw,84px); }

/* --- type --- */
.gsv h1,.gsv h2,.gsv h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.gsv h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.gsv h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.gsv p{ margin:0 0 1.05em; }
.gsv a{ color:inherit; }
.gsv strong{ color:var(--ink); }
.gsv em{ font-style:italic; }

/* keyboard focus — explicit, high-contrast, outline */
.gsv a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }
.gsv .gsv-tablewrap:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:var(--r); }
.gsv .btn:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; }
.gsv .band-dark a:focus-visible,
.gsv .band-dark .btn:focus-visible{ outline-color:#fff; }

/* in-copy prose links (shared) */
.gsv .gsv-intro-prose a,
.gsv .gsv-prose a,
.gsv .gsv-prov p a,
.gsv .gsv-after a,
.gsv .gsv-lead a,
.gsv .gsv-fine a,
.gsv .gsv-table a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.gsv .gsv-intro-prose a:hover,
.gsv .gsv-prose a:hover,
.gsv .gsv-prov p a:hover,
.gsv .gsv-after a:hover,
.gsv .gsv-lead a:hover,
.gsv .gsv-fine a:hover,
.gsv .gsv-table a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.gsv .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.gsv .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.gsv .kicker--d{ color:var(--kicker-dark); }

/* citation / proof chip (the § statutory chips) */
.gsv .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + after-prose (shared measure) */
.gsv .gsv-lead{ max-width:72ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(24px,3.4vw,40px); color:var(--body); }
.gsv .gsv-lead strong{ color:var(--ink); }
.gsv .gsv-after{ max-width:78ch; font-size:1.0312rem; line-height:1.7; color:var(--body);
  margin-top:clamp(22px,3vw,38px); margin-bottom:0; }
.gsv .gsv-after strong{ color:var(--ink); }

/* generic prose block (the verbatim multi-paragraph sections) */
.gsv .gsv-prose{ max-width:74ch; font-size:1.0312rem; line-height:1.72; color:var(--body); }
.gsv .gsv-prose p:last-child{ margin-bottom:0; }
.gsv .gsv-prose strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.gsv .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.gsv .hero .shell{ position:relative; }
.gsv .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.gsv .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
.gsv .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:66ch; }
.gsv .gsv-hero-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,2.4vw,30px); }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.gsv .gsv-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.gsv .gsv-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.gsv .gsv-intro-prose p:last-child{ margin-bottom:0; }
.gsv .gsv-intro-aside{ position:sticky; top:96px; }
.gsv .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:28ch;
}
.gsv .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: provision blocks — numbered provision blocks (the "First… Fifth…" feature
   and risk lists, and the ranked / scheme / watchlist provider entries). Each carries
   a tabular-nums number (or a short label tab for schemes/watchlist), a promoted
   verbatim heading, and the verbatim body. Quiet hairline rules separate them.
   ---------------------------------------------------------------------------- */
.gsv .gsv-provs{ display:grid; gap:0; border-top:1px solid var(--line);
  margin-top:clamp(6px,1vw,14px); }
.gsv .gsv-prov{ display:grid; grid-template-columns:clamp(48px,5vw,72px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,36px); padding:clamp(22px,3vw,36px) 0;
  border-bottom:1px solid var(--line); align-items:start; }
.gsv .gsv-prov-n{ font-family:var(--display); font-weight:900; color:var(--accent);
  font-variant-numeric:tabular-nums; font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem);
  letter-spacing:-.02em; line-height:1; }
.gsv .gsv-prov-n--watch{ font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem); }
.gsv .gsv-prov-n--scheme{ font-size:clamp(.9rem,.8rem + .3vw,1.05rem); letter-spacing:.04em;
  line-height:1.1; }
.gsv .gsv-prov-body{ min-width:0; }
.gsv .gsv-prov-h{ font-size:clamp(1.12rem,1rem + .5vw,1.4rem); font-weight:800; color:var(--ink);
  letter-spacing:-.015em; line-height:1.18; margin:0 0 .6em; max-width:54ch; }
.gsv .gsv-prov p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body);
  margin-bottom:0; }

/* sub-group head inside §5 ("Most practical first checks" etc.) — verbatim h4 labels */
.gsv .gsv-group-h{ font-family:var(--display); font-weight:800; color:var(--ink);
  font-size:clamp(.78rem,.72rem + .25vw,.9rem); letter-spacing:.14em; text-transform:uppercase;
  margin:clamp(34px,4.2vw,56px) 0 0; display:flex; align-items:center; gap:12px; }
.gsv .gsv-group-h::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.gsv .gsv-provs-ranked,
.gsv .gsv-provs-watch,
.gsv .gsv-provs-scheme{ margin-top:clamp(14px,2vw,22px); }

.gsv .gsv-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,2.6vw,30px); }

/* ----------------------------------------------------------------------------
   BLOCK: TABLES — verbatim cells restyled into a cream table:
   Lato uppercase-tracked heads, Sen body, tabular-nums, content-width, hairline rows.
   Desktop: real table inside a horizontal-scroll wrapper (so even at tight widths it
   never breaks the page). Mobile (<=720): each row becomes a stacked card with the
   column name surfaced from the data-label attribute. No horizontal overflow at 375.
   ---------------------------------------------------------------------------- */
.gsv .gsv-tablewrap{ margin-top:clamp(8px,1.4vw,18px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--cream); overflow:hidden; }
.gsv .gsv-table{ width:100%; border-collapse:collapse; font-size:.975rem; line-height:1.55;
  color:var(--body); font-variant-numeric:tabular-nums; }
.gsv .gsv-table thead th{ background:var(--soft); color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:left; padding:14px clamp(14px,1.6vw,20px);
  border-bottom:1.5px solid var(--div); white-space:nowrap; }
.gsv .gsv-table tbody td{ padding:14px clamp(14px,1.6vw,20px); border-top:1px solid var(--line);
  vertical-align:top; }
.gsv .gsv-table tbody tr:first-child td{ border-top:0; }
.gsv .gsv-table tbody tr:nth-child(even){ background:color-mix(in srgb,var(--paper) 45%,transparent); }
/* column emphasis: first column reads as the row's "label" */
.gsv .gsv-table tbody td:first-child{ color:var(--ink); font-weight:600; font-family:var(--sans); }

/* TABLE 2 (the WIDE indicative-cost table): the 7 figure columns are Lato tabular-nums
   in accent-ink so the money reads as the data; the wrapper scrolls horizontally on
   desktop rather than crushing 8 columns into the shell. */
.gsv .gsv-tablewrap-cost{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gsv .gsv-table-cost{ min-width:920px; }       /* forces the wrapper to scroll, never the page */
.gsv .gsv-table-cost thead th + th{ text-align:right; white-space:nowrap; }
.gsv .gsv-table-cost tbody td{ white-space:nowrap; }
.gsv .gsv-table-cost tbody td + td{ text-align:right; font-family:var(--display); font-weight:700;
  color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.gsv .gsv-table-cost tbody td:first-child{ white-space:normal; min-width:230px; }

/* ----------------------------------------------------------------------------
   BLOCK: §14 close — Sources + Disclaimer as small print
   (the CONVERSION CTA follows; this fine-print section is on light)
   ---------------------------------------------------------------------------- */
.gsv .gsv-fine-sec .gsv-fine{ max-width:84ch; font-size:.92rem; line-height:1.68; color:var(--mut); }
.gsv .gsv-fine-sec .gsv-fine em{ font-style:italic; }
.gsv .gsv-fine-h{ font-family:var(--display); font-weight:800; color:var(--ink);
  font-size:clamp(1.1rem,1rem + .4vw,1.3rem); letter-spacing:-.01em;
  margin:clamp(30px,3.6vw,46px) 0 clamp(12px,1.4vw,18px); }

/* ----------------------------------------------------------------------------
   BLOCK: cta — dark band + V4 seam (this page ENDS ON DARK — conversion page)
   ---------------------------------------------------------------------------- */
.gsv .band-dark{ background:var(--dark); color:var(--on-dark); }
/* V4 dark->footer seam */
.gsv .band-dark:last-child::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}
.gsv .gsv-cta{ text-align:left; }
.gsv .gsv-cta .shell{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,4vw,60px); align-items:center; }
.gsv .gsv-cta h2{ color:#fff; max-width:18ch; }
.gsv .gsv-cta-sub{ color:var(--on-dark-mut); font-size:var(--fs-lede); line-height:1.55;
  margin-top:14px; margin-bottom:0; max-width:50ch; }
.gsv .gsv-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* buttons */
.gsv .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:14px 28px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.gsv .btn-solid{ background:var(--accent); color:#fff; }
.gsv .btn-solid:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.gsv .btn-ghost{ background:transparent; border-color:var(--accent); color:var(--ink); }
.gsv .band-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.gsv .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.gsv .band-dark .btn-ghost:hover{ color:var(--accent); }
.gsv .btn-james{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.gsv .btn-james .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.gsv .btn-james:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .gsv [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .gsv [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .gsv .gsv-intro-grid{ grid-template-columns:1fr; }
  .gsv .gsv-intro-aside{ position:static; }
  .gsv .pull{ max-width:46ch; }
  .gsv .gsv-cta .shell{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  /* provision blocks stack: number tab sits above the body */
  .gsv .gsv-prov{ grid-template-columns:1fr; gap:6px; }
  .gsv .gsv-prov-n{ font-size:clamp(1.2rem,1rem + 2vw,1.6rem); }
  .gsv .gsv-prov-n--scheme{ font-size:.95rem; }

  /* TABLES → stacked cards. Hide the real thead; each <tr> is a card; each <td>
     gets its column name from data-label. No horizontal scroll needed. This also
     applies to the WIDE cost table: its min-width + overflow-x are reset so the row
     cards never force the page to scroll at 375. */
  .gsv .gsv-tablewrap{ overflow:visible; border:0; background:transparent; border-radius:0; }
  .gsv .gsv-tablewrap-cost{ overflow-x:visible; }
  .gsv .gsv-table{ display:block; }
  .gsv .gsv-table-cost{ min-width:0; }
  .gsv .gsv-table thead{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .gsv .gsv-table tbody{ display:grid; gap:14px; }
  .gsv .gsv-table tbody tr{ display:block; background:var(--cream); border:1px solid var(--line);
    border-radius:var(--r); padding:clamp(14px,4vw,18px); }
  .gsv .gsv-table tbody tr:nth-child(even){ background:var(--cream); }
  .gsv .gsv-table tbody td{ display:block; border-top:0; padding:0; white-space:normal; }
  .gsv .gsv-table tbody td + td{ margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
  .gsv .gsv-table tbody td:first-child{ font-size:1.04rem; min-width:0; }
  .gsv .gsv-table tbody td::before{ content:attr(data-label); display:block;
    font-family:var(--display); font-weight:800; font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mut); margin-bottom:5px; }
  /* the cost table's 7 figure cells: in card mode they read left-aligned with a label,
     not right-aligned as in the desktop grid */
  .gsv .gsv-table-cost tbody td + td{ text-align:left; }
  /* the cost table's first cell is the card title (the formula) — no data-label caption */
  .gsv .gsv-table-cost tbody td:first-child::before{ content:none; }
}
@media (max-width:680px){
  .gsv .hero h1{ max-width:none; }
  .gsv .gsv-prov-h{ max-width:none; }
}


/* === HWJ /pet-requests reimagined === */
/* ============================================================================
   HWJ /pet-requests — reimagined page styles (scoped under .pet so it can't leak
   into the global .site-h header / .site-f footer). Locked cream/sand house
   palette. PROCESS tier with a statutory hook (RRA s.11): typography + editorial
   scaffold only — copy is reproduced verbatim, restyle only. No data viz, no gadget.
   Figures/citations = Lato + tabular-nums (NO mono).
   Echoes: /about + /new-build-specialists scaffold (ink-in numerals, citation chips),
   /renters-rights-act-2025 + /awaabs-law (cloned: shared editorial timeline, § chips,
   contacts panel). The one earned move is a compact editorial TIMELINE rendering the
   deadline-driven request PROCESS — tenant asks -> landlord responds within 28 days
   (or 35 with further information) -> grant or refuse on reasonable grounds -> an
   unreasonable refusal is a breach. The timeline restates only the verbatim statutory
   deadlines; the binding copy lives in the verbatim provision blocks.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.pet{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.pet *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.pet .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.pet section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.pet section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.pet h1,.pet h2,.pet h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.pet h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.pet h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.pet p{ margin:0 0 1.05em; }
.pet a{ color:inherit; }
.pet strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline */
.pet a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.pet .pet-intro-prose a,
.pet .pet-prose a,
.pet .pet-tl-main p a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.pet .pet-intro-prose a:hover,
.pet .pet-prose a:hover,
.pet .pet-tl-main p a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.pet .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.pet .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.pet .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead (shared measure) */
.pet .pet-lead{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.pet .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.pet .hero .shell{ position:relative; }
.pet .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:18ch;
}
.pet .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
/* hero deck — verbatim remainder of the source title heading, set as a display sub-line */
.pet .hero-deck{ font-family:var(--display); font-weight:800; letter-spacing:-.018em;
  font-size:clamp(1.3rem,1.05rem + 1.05vw,1.85rem); line-height:1.18; color:var(--ink);
  max-width:26ch; margin:.1em 0 .55em; }
.pet .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:62ch; margin:0; }
.pet .hero-sub em{ font-style:italic; }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.pet .pet-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.pet .pet-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.pet .pet-intro-prose p:last-of-type{ margin-bottom:0; }
.pet .pet-intro-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.pet .pet-intro-aside{ position:sticky; top:96px; }
.pet .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.pet .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: verbatim prose sections — "where the right comes from", "the statutory
   request", "the 28-day window", "reasonable refusal", "pet damage insurance",
   "when the tenant disagrees", "end of tenancy", "how this fits". Each is the
   source h3 promoted to the section <h2> + verbatim paragraph(s). Multi-paragraph
   blocks keep their non-final bottom margin.
   ---------------------------------------------------------------------------- */
.pet .pet-prose{ max-width:74ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.pet .pet-prose strong{ color:var(--ink); }
.pet .pet-prose em{ font-style:italic; }
.pet .pet-prose p:last-of-type{ margin-bottom:0; }
.pet .pet-prose-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* the verbatim five-item refusal-grounds list (restyled, bold lead-ins preserved) */
.pet .pet-list{ list-style:none; margin:0 0 1.05em; padding:0; display:grid; gap:14px; max-width:74ch; }
.pet .pet-list li{ position:relative; padding-left:24px; font-size:1.0312rem; line-height:1.66; color:var(--body); }
.pet .pet-list li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:8px; height:2px; background:var(--accent); }
.pet .pet-list li strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: ink-in numeral primitive (.pillar-no). The numeral "inks in": solid accent
   fill rises from the baseline on scroll. Default (no-JS) state is the SOLID numeral;
   the outline+fill is JS-gated. On THIS page the primitive is consumed only by the
   .pet-tl-node process-timeline numerals (no two-changes "pillars" block); the .pillar
   wrapper rules below are the shared component definition, inert on this page.
   ---------------------------------------------------------------------------- */
.pet .pillars{ display:grid; gap:0; }
.pet .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(34px,4.5vw,60px) 0;
  border-top:1px solid var(--line);
}
.pet .pillar:first-of-type{ border-top:0; }
.pet .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .pet .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.pet .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .pet .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .pet .pillar.in .pillar-no::after,
html.js .pet .pet-tl-node.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .pet .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .pet .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.pet .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.02em; max-width:26ch; }
.pet .pillar-b{ max-width:66ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.pet .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: the request process — editorial timeline (the one earned move). Each node
   carries the ink-in numeral (left column) + a continuous spine (border-left on the
   content) + an accent node dot at the step label. The step label + body are ADDED
   scaffold (in the diff STOP set) restating only the verbatim statutory deadlines
   (28 days / 35 days / s.16B(4) grounds) reproduced word-for-word in the provision
   blocks below. Inks in on scroll = the request clock starting.
   ---------------------------------------------------------------------------- */
.pet .pet-tl{ --tlcol:clamp(56px,7vw,96px); list-style:none; margin:clamp(26px,3.6vw,48px) 0 0;
  padding:0; display:grid; gap:0; }
.pet .pet-tl-node{ display:grid; grid-template-columns:var(--tlcol) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px); align-items:stretch; }
/* margin-top (NOT padding-top) so the ink-in ::after (inset:0 on the padding box)
   stays registered to the base digit — padding-top would offset the fill from the outline */
.pet .pet-tl-no{ font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);
  margin-top:clamp(22px,2.8vw,36px); justify-self:start; }
.pet .pet-tl-node:first-child .pet-tl-no{ margin-top:0; }
.pet .pet-tl-main{ position:relative; border-left:2px solid var(--line);
  padding:clamp(22px,2.8vw,36px) 0 clamp(22px,2.8vw,36px) clamp(20px,2.4vw,34px); }
.pet .pet-tl-node:first-child .pet-tl-main{ padding-top:0; }
.pet .pet-tl-node:last-child .pet-tl-main{ padding-bottom:0; }
/* node dot on the spine, level with the step label */
.pet .pet-tl-main::before{ content:""; position:absolute; left:-7px;
  top:calc(clamp(22px,2.8vw,36px) + .25em); width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--paper); }
.pet .pet-tl-node:first-child .pet-tl-main::before{ top:.25em; }
/* step label may wrap to two lines on the longer "respond" node — give it leading */
.pet .pet-tl-step{ display:block; font:800 12px/1.35 var(--display); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); font-variant-numeric:tabular-nums;
  margin-bottom:11px; max-width:48ch; }
.pet .pet-tl-body{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }
.pet .pet-process-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,3vw,40px); }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.pet .pet-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.pet .pet-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.pet .pet-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.pet .pet-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.pet .pet-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.pet .pet-clist li strong{ color:var(--ink); }
.pet .pet-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.pet .pet-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.pet .pet-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.pet .pet-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .pet [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .pet [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .pet .pet-intro-grid{ grid-template-columns:1fr; }
  .pet .pet-intro-aside{ position:static; }
  .pet .pull{ max-width:38ch; }
  .pet .pet-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .pet .pillar{ grid-template-columns:1fr; gap:12px; }
  .pet .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:2px; }
  .pet .hero h1{ max-width:none; }
  /* timeline: keep the numeral + spine rail, just tighten the column */
  .pet .pet-tl{ --tlcol:clamp(42px,12vw,56px); }
  .pet .pet-tl-no{ font-size:clamp(2.1rem,1.6rem + 4vw,2.8rem); }
}


/* === HWJ /holding-deposits reimagined === */
/* ============================================================================
   HWJ /holding-deposits — reimagined page styles (scoped under .hld so it can't
   leak into the global .site-h header / .site-f footer). Locked cream/sand house
   palette. PROCESS / SCHEDULE tier with a statutory hook (Tenant Fees Act 2019):
   typography + editorial scaffold only — copy is strictly verbatim, no data viz,
   no gadget. Figures / fee amounts / citations = Lato + tabular-nums (NO mono) for
   the "schedule" feel.
   Cloned from /internal-complaints-procedure (.icp → .hld) + the /tenant-fees-schedule
   schedule pieces (amount tag, definition rows). The earned moves are the house hero,
   content-width dividers, § citation chips surfacing in-copy refs, a clean at-a-glance
   ledger, schedule-style figure rows for the cap / deadline, cream provision panels,
   and the FOUR LAWFUL GROUNDS rendered as numbered provision blocks riding the /about
   "ink-in" numerals 1–4 (the source numbers them "Ground 1…4", so the enumeration is
   faithful, restyled).
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.hld{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1); was #BE4413 */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1); was #6F6A60 */
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.hld *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.hld .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.hld section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.hld section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.hld h1,.hld h2,.hld h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.hld h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.hld h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.hld p{ margin:0 0 1.05em; }
.hld a{ color:inherit; }
.hld strong{ color:var(--ink); }
.hld em{ font-style:italic; }

/* keyboard focus — explicit, high-contrast, outline */
.hld a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links (shared) */
.hld .hld-intro-prose a,
.hld .hld-prov-panel p a,
.hld .hld-item-body p a,
.hld .hld-grd-main p a,
.hld .hld-note a,
.hld .hld-foot a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.hld .hld-intro-prose a:hover,
.hld .hld-prov-panel p a:hover,
.hld .hld-item-body p a:hover,
.hld .hld-grd-main p a:hover,
.hld .hld-note a:hover,
.hld .hld-foot a:hover{ text-decoration-color:var(--accent); }

/* kicker: accent rule + uppercase tracked Lato */
.hld .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.hld .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* citation / proof chip (the § statutory chips) */
.hld .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  font-variant-numeric:tabular-nums;
}

/* section lead + synthesis foot (shared measure) */
.hld .hld-lead{ max-width:66ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(28px,4vw,52px); color:var(--body); }
.hld .hld-foot{ max-width:74ch; font-size:1.0312rem; line-height:1.7;
  margin-top:clamp(30px,4vw,52px); color:var(--body); }
.hld .hld-foot strong{ color:var(--ink); }

/* shared verbatim prose body (single-paragraph notes / prose groups not in a panel) */
.hld .hld-note{ max-width:78ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: hero — house typographic lockup
   ---------------------------------------------------------------------------- */
.hld .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.hld .hero .shell{ position:relative; }
.hld .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em;
  max-width:16ch;
}
.hld .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.16em 0 .14em; display:block; }
/* the verbatim source first-<h3> sentence, carried as a standfirst under the H1 */
.hld .hld-hero-standfirst{ font-family:var(--display); font-weight:800; color:var(--ink);
  font-size:clamp(1.18rem,1.02rem + .7vw,1.6rem); line-height:1.22; letter-spacing:-.015em;
  max-width:30ch; margin:0 0 .7em; }
.hld .hero-sub{ font-size:var(--fs-lede); line-height:1.58; color:var(--body-soft); max-width:64ch; }
.hld .hero-sub strong{ color:var(--ink); }

/* ----------------------------------------------------------------------------
   BLOCK: at-a-glance ledger — four short term/figure rows (figures restate in-copy
   numbers). Lato tabular-nums figures, a clean ruled register.
   ---------------------------------------------------------------------------- */
.hld .hld-glance h2{ margin-bottom:clamp(20px,2.6vw,34px); }
.hld .hld-glance-rows{ margin:0; padding:0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,5vw,72px); }
.hld .hld-glance-row{ padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid var(--line); }
.hld .hld-glance-row dt{ font:800 12px/1 var(--display); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 12px; }
.hld .hld-glance-row dd{ margin:0; }
.hld .hld-fig{ font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; color:var(--ink); line-height:1; }
.hld .hld-glance-row .hld-fig{ font-size:clamp(1.7rem,1.2rem + 1.5vw,2.4rem); display:block; }
.hld .hld-glance-note{ margin:11px 0 0; max-width:34ch; font-size:.96rem; line-height:1.5; color:var(--body); }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.hld .hld-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.hld .hld-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.hld .hld-intro-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.hld .hld-intro-aside{ position:sticky; top:96px; }
.hld .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:24ch;
}
.hld .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   schedule-style fee/figure sections — verbatim H2 + a tabular-nums amount tag,
   then the verbatim body. Mirrors the /tenant-fees-schedule item rows.
   ---------------------------------------------------------------------------- */
.hld .hld-sec h2{ margin-bottom:clamp(20px,2.6vw,34px); }
.hld .hld-sec--item{ padding-block:clamp(44px,7vw,84px); }
.hld .hld-h2row{ display:flex; gap:18px 22px; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:clamp(16px,2vw,26px); }
.hld .hld-h2row h2{ margin:0; max-width:34ch; }
/* the schedule amount — Lato tabular-nums "ledger figure" pill */
.hld .hld-amt{ flex:none; font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:.98rem; letter-spacing:.005em; color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 10%,var(--cream));
  border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);
  border-radius:999px; padding:6px 14px; white-space:nowrap; line-height:1.1; align-self:center; }
/* fee-item body measure */
.hld .hld-item-body{ max-width:78ch; }
.hld .hld-item-body p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0 0 1.02em; }
.hld .hld-item-body p:last-child{ margin-bottom:0; }
.hld .hld-prov-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* definition rows — the worked currency examples under the one-week cap.
   left term, right tabular-nums figure; verbatim text only. */
.hld .hld-defrows{ margin:0 0 1.05em; padding:0; border-top:1px solid var(--line); max-width:56ch; }
.hld .hld-defrow{ display:flex; gap:18px; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; padding:13px 0; border-bottom:1px solid var(--line); }
.hld .hld-defrow dt{ font-size:1.0312rem; line-height:1.5; color:var(--ink); font-weight:700; margin:0;
  font-variant-numeric:tabular-nums; }
.hld .hld-defrow dd{ margin:0; }
.hld .hld-defrow .hld-fig{ font-size:1.0312rem; color:var(--accent-ink); letter-spacing:.005em;
  white-space:nowrap; font-weight:800; }

/* ----------------------------------------------------------------------------
   BLOCK: four lawful grounds — numbered provision blocks riding the ink-in numerals.
   Each ground node carries the ink-in numeral (left column) + a continuous spine
   (border-left on the content) + an accent node dot at the heading. Inks in on scroll.
   The numeral "inks in": solid accent fill rises from the baseline on scroll. Default
   (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   ---------------------------------------------------------------------------- */
.hld .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .hld .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.hld .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .hld .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .hld .hld-grd.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .hld .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .hld .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}

.hld .hld-grds{ --grdcol:clamp(56px,7vw,96px); list-style:none; margin:clamp(26px,3.6vw,48px) 0 0;
  padding:0; display:grid; gap:0; }
.hld .hld-grd{ display:grid; grid-template-columns:var(--grdcol) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px); align-items:stretch; }
/* margin-top (NOT padding-top) so the ink-in ::after (inset:0 on the padding box)
   stays registered to the base digit — padding-top would offset the fill from the outline */
.hld .hld-grd-no{ font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);
  margin-top:clamp(22px,2.8vw,36px); justify-self:start; }
.hld .hld-grd:first-child .hld-grd-no{ margin-top:0; }
.hld .hld-grd-main{ position:relative; border-left:2px solid var(--line);
  padding:clamp(22px,2.8vw,36px) 0 clamp(22px,2.8vw,36px) clamp(20px,2.4vw,34px); }
.hld .hld-grd:first-child .hld-grd-main{ padding-top:0; }
.hld .hld-grd:last-child .hld-grd-main{ padding-bottom:0; }
/* node dot on the spine, level with the heading */
.hld .hld-grd-main::before{ content:""; position:absolute; left:-7px;
  top:calc(clamp(22px,2.8vw,36px) + .25em); width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--paper); }
.hld .hld-grd:first-child .hld-grd-main::before{ top:.25em; }
.hld .hld-grd-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.015em; }
.hld .hld-grd-main p{ max-width:74ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin:0; }

/* ----------------------------------------------------------------------------
   BLOCK: provision panel — the post-RRA bidding-ban interaction (verbatim, § cited),
   set in a cream panel with an accent edge (it is the statutory interaction block).
   ---------------------------------------------------------------------------- */
.hld .hld-prov-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  border-left:3px solid var(--accent);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.hld .hld-prov-panel p{ max-width:78ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.hld .hld-prov-panel p:last-of-type{ margin-bottom:0; }
.hld .hld-prov-panel .hld-prov-cites{ margin-top:18px; }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — verbatim list restyled into a cream panel
   ---------------------------------------------------------------------------- */
.hld .hld-contacts h2{ margin-bottom:clamp(20px,2.6vw,34px); }
.hld .hld-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.hld .hld-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.hld .hld-cgroup-h{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink);
  margin:0 0 16px; text-transform:uppercase; }
.hld .hld-clist{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.hld .hld-clist li{ font-size:.975rem; line-height:1.55; color:var(--body); }
.hld .hld-clist li strong{ color:var(--ink); }
.hld .hld-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.hld .hld-clist a:hover{ text-decoration-color:var(--accent); }

/* legal small print — closes the page */
.hld .hld-legal{ max-width:80ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.hld .hld-legal em{ font-style:italic; }
.hld .hld-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .hld [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .hld [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .hld .hld-intro-grid{ grid-template-columns:1fr; }
  .hld .hld-intro-aside{ position:static; }
  .hld .pull{ max-width:38ch; }
  .hld .hld-glance-rows{ grid-template-columns:1fr; }
  .hld .hld-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .hld .hero h1{ max-width:none; }
  .hld .hld-hero-standfirst{ max-width:none; }
  .hld .hld-h2row h2{ max-width:none; }
  .hld .hld-h2row{ gap:12px; }
  .hld .hld-amt{ font-size:.92rem; align-self:flex-start; }
  /* grounds: keep the numeral + spine rail, just tighten the column */
  .hld .hld-grds{ --grdcol:clamp(42px,12vw,56px); }
  .hld .hld-grd-no{ font-size:clamp(2.1rem,1.6rem + 4vw,2.8rem); }
}


/* === HWJ /rent-protection reimagined === */
/* ============================================================================
   HWJ /rent-protection — reimagined page styles (scoped under .rpr so it can't
   leak into the global .site-h header / .site-f footer). Locked cream/sand house
   palette. Proposition / SERVICE / CONVERSION tier: Lato display + Sen body;
   figures = Lato + tabular-nums (NO mono). Echoes: /about scaffold (ink-in numerals,
   citation chips, dark-CTA + V4 seam), /new-build-specialists provision/pillar
   scaffold + signature figure, /day-one-price § citation chips.
   The earned signatures: (1) the four-product index ribbon in the hero, and
   (2) the "arrears gap" strip in the why-block (the verbatim 4–9-month Section 8
   window the rent guarantee has to span — built only from verbatim figures).
   This is a CONVERSION page → it ENDS on a dark CTA band + the V4 seam.
   Motion is a progressive enhancement: gated behind html.js so the page is fully
   visible if the script never loads. Reduced-motion fully honoured.
   ============================================================================ */

.rpr{
  /* --- locked tokens --- */
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;   /* AA-passing on sand (4.6:1) */
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;   /* AA-passing on sand (5.42:1) */
  /* on-light secondary + on-dark band tones (tokenised so the dark band is themeable) */
  --body-soft:#4d4a44;
  --on-dark:#e9e5dc; --on-dark-mut:#bbb6ad; --kicker-dark:#a39d93;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);   /* hero H1 -> ~80px */
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);    /* section H2 -> ~41.6px */
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* contain any bleeding ghost glyph */
}

.rpr *{ box-sizing:border-box; }

/* --- shell + section rhythm --- */
.rpr .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.rpr section{ padding-block:clamp(56px,9vw,110px); position:relative; }
/* anchor-jump offset so the in-hero index lands the heading clear of any sticky chrome */
.rpr .pillar[id]{ scroll-margin-top:84px; }

/* --- editorial inset divider (content-width, never full-bleed) --- */
.rpr section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}
.rpr .band-dark::before,
.rpr .band-dark + section::before{ display:none; }
/* V4 dark->footer seam */
.rpr .band-dark:last-child::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* --- type --- */
.rpr h1,.rpr h2,.rpr h3,.rpr h4{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.rpr h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.rpr h3{ font-size:var(--fs-h3); font-weight:800; line-height:1.12; }
.rpr p{ margin:0 0 1.05em; }
.rpr a{ color:inherit; }
.rpr strong{ color:var(--ink); }

/* keyboard focus — explicit, high-contrast, outline (not clipped by overflow:hidden) */
.rpr a:focus-visible,
.rpr .btn:focus-visible,
.rpr .rpr-read:focus-visible,
.rpr .rpr-ix:focus-visible,
.rpr .cite:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }
.rpr .band-dark a:focus-visible,
.rpr .band-dark .btn:focus-visible{ outline-color:#fff; }

/* kicker: accent rule + uppercase tracked Lato */
.rpr .kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:800; font-size:12px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mut);
  margin:0 0 18px;
}
.rpr .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }
.rpr .kicker--d{ color:var(--kicker-dark); }

/* citation / proof chip */
.rpr .cite{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.rpr a.cite:hover{ border-color:var(--accent); transform:translateY(-1px); }
@media (hover:none){ .rpr a.cite{ padding-block:9px; } }

/* ----------------------------------------------------------------------------
   BLOCK: hero — typographic lockup + four-product index ribbon
   ---------------------------------------------------------------------------- */
.rpr .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.rpr .hero .shell{ position:relative; }
.rpr .hero h1{
  font-size:var(--fs-display); font-weight:900; line-height:1.0; letter-spacing:-.02em;
  max-width:17ch;
}
.rpr .hero .dot{ color:var(--accent); }
.rpr .hero-script{ font-family:var(--script); color:var(--accent);
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem); line-height:1; margin:.18em 0 .12em; display:block; }
.rpr .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:54ch; }

/* index ribbon: the four products as quiet anchored signposts */
.rpr .rpr-index{
  margin-top:clamp(24px,3vw,40px);
  border-top:1.5px solid var(--div);
  padding-top:clamp(20px,2.4vw,30px);
}
.rpr .rpr-index-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px);
}
.rpr .rpr-ix{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--cream);
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rpr .rpr-ix:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 14px 28px rgba(26,26,26,.08); }
.rpr .rpr-ix-n{ font:900 1.3rem/1 var(--display); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; color:var(--accent); }
.rpr .rpr-ix-l{ font-size:13px; line-height:1.32; color:var(--ink); font-weight:700;
  letter-spacing:.005em; }
.rpr .rpr-index-foot{ margin-top:clamp(16px,2vw,22px); }

/* ----------------------------------------------------------------------------
   BLOCK: intro / standfirst — editorial prose + pull-quote
   ---------------------------------------------------------------------------- */
.rpr .rpr-intro-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
.rpr .rpr-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.rpr .rpr-intro-prose p strong{ color:var(--ink); }
.rpr .rpr-intro-aside{ position:sticky; top:96px; }
.rpr .pull{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem); color:var(--ink);
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:0;
  max-width:26ch;
}
.rpr .pull cite{ display:block; margin-top:14px; font:700 12px/1.4 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-style:normal; }

/* ----------------------------------------------------------------------------
   BLOCK: why — verbatim prose + the SIGNATURE "arrears gap" strip
   ---------------------------------------------------------------------------- */
.rpr .rpr-why-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px); align-items:start; margin-top:clamp(22px,3vw,40px); }
.rpr .rpr-why-prose{ max-width:62ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.rpr .rpr-why-prose strong{ color:var(--ink); }
.rpr .rpr-why-prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.rpr .rpr-why-prose a:hover{ text-decoration-color:var(--accent); }

/* the arrears-gap strip */
.rpr .rpr-gap{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px); margin:0; position:sticky; top:96px; }
.rpr .rpr-gap-cap{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--ink);
  letter-spacing:-.01em; margin:0 0 18px; }
.rpr .rpr-gap-track{ position:relative; height:54px; border-radius:8px; background:var(--soft);
  overflow:hidden; }
.rpr .rpr-gap-fill{ position:absolute; left:0; top:0; bottom:0; width:100%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 16%,transparent) 0%,
    color-mix(in srgb,var(--accent) 34%,transparent) 44%,
    color-mix(in srgb,var(--accent) 58%,transparent) 100%);
  transform-origin:left; }
.rpr .rpr-gap-mark{ position:absolute; bottom:8px; display:flex; flex-direction:column; align-items:center;
  line-height:1; }
.rpr .rpr-gap-mark::before{ content:""; position:absolute; bottom:-8px; width:2px; top:-46px;
  background:color-mix(in srgb,var(--accent-ink) 55%,transparent); }
.rpr .rpr-gap-mark b{ font:900 1.35rem/1 var(--display); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; color:var(--accent-ink); }
.rpr .rpr-gap-mark i{ font:700 10px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--mut); font-style:normal; margin-top:3px; }
.rpr .rpr-gap-mark--a{ left:44%; }
.rpr .rpr-gap-mark--b{ left:calc(100% - 30px); }
.rpr .rpr-gap-mark--b::before{ background:var(--accent-ink); }
.rpr .rpr-gap-axis{ display:flex; justify-content:space-between; gap:12px; margin-top:11px;
  font:700 11px/1.3 var(--sans); letter-spacing:.03em; text-transform:uppercase; color:var(--mut); }
.rpr .rpr-gap-axis span:last-child{ text-align:right; }
.rpr .rpr-gap-note{ max-width:46ch; margin:16px 0 0; font-size:.95rem; line-height:1.62; color:var(--body-soft); }
.rpr .rpr-gap-note strong{ color:var(--ink); }
.rpr .rpr-gap-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
/* fill grows on reveal — JS-gated; reduced-motion / no-JS shows it full immediately */
@media (prefers-reduced-motion:no-preference){
  html.js .rpr .rpr-gap .rpr-gap-fill{ transform:scaleX(0); transition:transform 1s var(--ease) .1s; }
  html.js .rpr .rpr-gap.in .rpr-gap-fill{ transform:scaleX(1); }
  html.js .rpr .rpr-gap .rpr-gap-mark{ opacity:0; transition:opacity .5s var(--ease) .55s; }
  html.js .rpr .rpr-gap.in .rpr-gap-mark{ opacity:1; }
}

/* ----------------------------------------------------------------------------
   BLOCK: products — the four products (numbered pillars, cited)
   The numeral "inks in": solid accent fill rises from the baseline on scroll.
   Default (no-JS) state is the SOLID numeral; the outline+fill is JS-gated.
   ---------------------------------------------------------------------------- */
.rpr .rpr-products-intro{ max-width:64ch; font-size:1.0625rem; line-height:1.72;
  margin-bottom:clamp(26px,4vw,48px); }
.rpr .pillars{ display:grid; gap:0; }
.rpr .pillar{
  display:grid; grid-template-columns:clamp(86px,11vw,148px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(34px,4.5vw,60px) 0;
  border-top:1px solid var(--line);
}
.rpr .pillar:first-of-type{ border-top:0; }
.rpr .pillar-no{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.04em; line-height:.82;
  font-size:clamp(2.8rem,1.6rem + 4.4vw,5.4rem);
  margin-top:.06em;                 /* optical: seat the numeral toward the heading cap-line */
  color:var(--accent);              /* no-JS / default: solid */
  height:max-content;
}
html.js .rpr .pillar-no{ color:transparent; -webkit-text-stroke:1.6px var(--accent); }
.rpr .pillar-no::after{
  content:attr(data-num); position:absolute; inset:0;
  color:var(--accent); -webkit-text-stroke:0;
  clip-path:inset(0 0 0 0);         /* default: shown */
}
html.js .rpr .pillar-no::after{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
html.js .rpr .pillar.in .pillar-no::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  html.js .rpr .pillar-no{ color:var(--accent); -webkit-text-stroke:0; }
  html.js .rpr .pillar-no::after{ clip-path:inset(0 0 0 0); transition:none; }
}
.rpr .pillar-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .55em;
  letter-spacing:-.02em; max-width:26ch; }
.rpr .pillar-b{ max-width:66ch; font-size:1.0312rem; line-height:1.68; color:var(--body); }
.rpr .pillar-b strong{ color:var(--ink); }
.rpr .pillar-b a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.rpr .pillar-b a:hover{ text-decoration-color:var(--accent); }
.rpr .pillar-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* provision blocks: each bold lead-in promoted to a coverage card with an Insured-Event tag */
.rpr .rpr-provs{ display:grid; gap:0; margin:clamp(18px,2vw,26px) 0 clamp(6px,1.4vw,16px);
  border-top:1px solid var(--line); }
.rpr .rpr-prov{ padding:clamp(15px,1.8vw,22px) 0; border-bottom:1px solid var(--line); max-width:68ch; }
.rpr .rpr-prov-h{ font-size:1.04rem; font-weight:800; color:var(--ink); margin:0 0 .45em;
  letter-spacing:-.01em; display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
.rpr .rpr-prov-h::before{ content:""; width:8px; height:8px; margin-top:.18em; background:var(--accent);
  flex:none; border-radius:1px; transform:rotate(45deg); }
/* the Insured-Event / condition tag rides at the end of the provision heading */
.rpr .rpr-prov-tag{
  font:800 10.5px/1 var(--display); letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 12%,var(--cream));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:999px; padding:5px 9px; white-space:nowrap; align-self:center;
}
.rpr .rpr-prov p{ margin:0; font-size:1.0062rem; line-height:1.66; color:var(--body); }
.rpr .rpr-prov p strong{ color:var(--ink); }
.rpr .rpr-prov p a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.rpr .rpr-prov p a:hover{ text-decoration-color:var(--accent); }

/* ----------------------------------------------------------------------------
   BLOCK: rent-level — the distinguishing-claim emphasis panel
   ---------------------------------------------------------------------------- */
.rpr .rpr-level-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  border-left:3px solid var(--accent);
  padding:clamp(24px,3vw,40px); margin-top:clamp(18px,2.4vw,30px); max-width:none; }
.rpr .rpr-level-panel p{ max-width:74ch; font-size:1.075rem; line-height:1.72; color:var(--body); margin:0; }
.rpr .rpr-level-panel p strong{ color:var(--ink); }
.rpr .rpr-level-panel .pillar-cites{ margin-top:20px; }

/* ----------------------------------------------------------------------------
   BLOCK: packaging — how-it-fits prose + what-landlords-do sub-block
   ---------------------------------------------------------------------------- */
.rpr .rpr-fit-prose{ max-width:66ch; font-size:1.0625rem; line-height:1.72; color:var(--body);
  margin-top:clamp(18px,2.4vw,30px); }
.rpr .rpr-fit-prose strong{ color:var(--ink); }
.rpr .rpr-fit-prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.rpr .rpr-fit-prose a:hover{ text-decoration-color:var(--accent); }
.rpr .rpr-do{ margin-top:clamp(26px,3.5vw,46px); padding-top:clamp(22px,2.6vw,32px);
  border-top:1.5px solid var(--div); }
.rpr .rpr-do-h{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:0 0 .6em;
  letter-spacing:-.02em; }
.rpr .rpr-do p{ max-width:66ch; font-size:1.0312rem; line-height:1.7; color:var(--body); }
.rpr .rpr-do a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.rpr .rpr-do a:hover{ text-decoration-color:var(--accent); }

/* ----------------------------------------------------------------------------
   BLOCK: where to look next — related reading cards + see-also
   ---------------------------------------------------------------------------- */
.rpr .rpr-read-list{ list-style:none; margin:clamp(18px,2.4vw,30px) 0 clamp(28px,4vw,46px); padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
.rpr .rpr-read{ display:flex; flex-direction:column; gap:7px; height:100%;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2vw,24px); text-decoration:none; color:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.rpr .rpr-read:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(26,26,26,.10); border-color:var(--accent); }
.rpr .rpr-read-h{ font-size:1.08rem; line-height:1.22; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.rpr .rpr-read-d{ font-size:.94rem; line-height:1.55; color:var(--body); margin:0; }
.rpr .rpr-read-rm{ margin-top:auto; padding-top:4px; font:800 12px/1 var(--display);
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.rpr .rpr-seealso{ max-width:66ch; font-size:1.0062rem; line-height:1.7; color:var(--body-soft); }
.rpr .rpr-seealso a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }

/* ----------------------------------------------------------------------------
   BLOCK: contacts & registers — cream panel + legal small print
   ---------------------------------------------------------------------------- */
.rpr .rpr-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px); margin-top:clamp(8px,1vw,16px); }
.rpr .rpr-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.rpr .rpr-cgroup h3{ font-size:.95rem; font-weight:800; letter-spacing:.02em; color:var(--ink); margin:0 0 14px;
  text-transform:uppercase; }
.rpr .rpr-clist{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.rpr .rpr-clist li{ font-size:.975rem; line-height:1.5; color:var(--body); }
.rpr .rpr-clist .rpr-cl-l{ display:block; font-weight:700; color:var(--ink); margin-bottom:1px; }
.rpr .rpr-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); word-break:break-word; }
.rpr .rpr-clist a:hover{ text-decoration-color:var(--accent); }
.rpr .rpr-legal{ max-width:78ch; margin:clamp(26px,3.5vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.6; color:var(--mut); }
.rpr .rpr-legal a{ color:var(--mut); text-decoration:underline; text-underline-offset:2px; }

/* ----------------------------------------------------------------------------
   BLOCK: cta — dark band + V4 seam into footer
   ---------------------------------------------------------------------------- */
.rpr .band-dark{ background:var(--dark); color:var(--on-dark); }
.rpr .rpr-cta{ text-align:left; }
.rpr .rpr-cta .shell{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,60px); align-items:center; }
.rpr .rpr-cta h2{ color:#fff; max-width:18ch; }
.rpr .rpr-cta-sub{ color:var(--on-dark-mut); font-size:var(--fs-lede); line-height:1.55; margin-top:14px; max-width:48ch; }
.rpr .rpr-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* buttons */
.rpr .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:14px 28px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.rpr .btn-solid{ background:var(--accent); color:#fff; }
.rpr .btn-solid:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.rpr .btn-ghost{ background:transparent; border-color:var(--accent); color:var(--ink); }
.rpr .band-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.rpr .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.rpr .band-dark .btn-ghost:hover{ color:var(--accent); }
.rpr .btn-james{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.rpr .btn-james .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.rpr .btn-james:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ----------------------------------------------------------------------------
   reveal-on-scroll (JS-gated so content is fully visible if the script fails)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .rpr [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .rpr [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .rpr .rpr-index-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .rpr .rpr-intro-grid{ grid-template-columns:1fr; }
  .rpr .rpr-intro-aside{ position:static; }
  .rpr .pull{ max-width:38ch; }                 /* keep a shapely measure when stacked */
  .rpr .rpr-why-grid{ grid-template-columns:1fr; }
  .rpr .rpr-gap{ position:static; }
  .rpr .rpr-read-list{ grid-template-columns:1fr; }
  .rpr .rpr-contact-grid{ grid-template-columns:1fr; }
  .rpr .rpr-cta .shell{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .rpr .rpr-index-row{ grid-template-columns:1fr; }
  .rpr .pillar{ grid-template-columns:1fr; gap:12px; }
  .rpr .pillar-no{ font-size:clamp(2.6rem,2rem + 6vw,3.4rem); margin-top:0; margin-bottom:2px; }
  .rpr .rpr-gap-mark--a{ left:42%; }
  .rpr .hero h1{ max-width:none; }
}


/* === HWJ /energy-performance-certificate reimagined === */
/* ============================================================================
   HWJ /energy-performance-certificate — reimagined page styles (scoped under .epc).
   Locked cream/sand house palette. DATA tier: the editorial scaffold PLUS one earned
   signature — the EPC rating ladder (A–G) showing the lettable floor rising E→C with
   HWJ's B–C portfolio band above it — and a live count-up ribbon of real stats.json
   figures. Verbatim copy throughout; every figure on the page is in the live copy.
   Echoes: /about ledger + count-up, RRA/legal § citation chips. Motion JS-gated behind
   html.js (fully visible if JS fails); reduced-motion fully honoured.
   ============================================================================ */

.epc{
  --paper:#ECE4D5;   --cream:#F6F1E7;  --soft:#E6DDCC;
  --line:#E1DACB;    --div:#C9C2B4;    --dark:#262626;
  --accent:#FF6933;  --accent-ink:#B23F11;
  --ink:#1A1A1A;     --body:#212121;   --mut:#5F5A50;
  --body-soft:#4d4a44;

  --display:'Lato',system-ui,-apple-system,Arial,sans-serif;
  --sans:'Sen',system-ui,-apple-system,Arial,sans-serif;
  --script:'Brittany Signature','Allura',cursive;

  --shell:1240px;
  --pad:clamp(18px,4vw,40px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.2,1);

  --fs-display:clamp(2.6rem,1.2rem + 5vw,5rem);
  --fs-h2:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);
  --fs-h3:clamp(1.2rem,1.02rem + .6vw,1.5rem);
  --fs-lede:clamp(1.06rem,.98rem + .35vw,1.3rem);

  background:var(--paper); color:var(--body); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.epc *{ box-sizing:border-box; }

/* shell + section rhythm */
.epc .shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); }
.epc section{ padding-block:clamp(56px,9vw,110px); position:relative; }

/* editorial inset divider */
.epc section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--shell),100%) - 2*var(--pad));
  height:1.5px; background:var(--div);
}

/* type */
.epc h1,.epc h2,.epc h3{ font-family:var(--display); letter-spacing:-.02em; color:var(--ink); margin:0; }
.epc h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.05; }
.epc p{ margin:0 0 1.05em; }
.epc a{ color:inherit; }
.epc strong{ color:var(--ink); }
.epc a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }

/* in-copy prose links */
.epc .epc-prose a,.epc .epc-intro-prose a{ color:var(--accent-ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.epc .epc-prose a:hover,.epc .epc-intro-prose a:hover{ text-decoration-color:var(--accent); }

/* kicker */
.epc .kicker{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800;
  font-size:12px; line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin:0 0 18px; }
.epc .kicker::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none; }

/* § citation chip */
.epc .cite{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line);
  border-radius:999px; background:var(--cream); color:var(--accent-ink); font-size:12.5px; font-weight:700;
  letter-spacing:.01em; font-variant-numeric:tabular-nums; }

/* provenance stamp */
.epc .prov{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px;
  color:var(--mut); text-decoration:none; }
.epc .prov::before{ content:""; width:7px; height:7px; background:var(--accent); flex:none; }
.epc a.prov:hover{ color:var(--accent-ink); }
@media (hover:none){ .epc .prov{ padding-block:11px; margin-block:-11px; } }

.epc .epc-lead{ max-width:60ch; font-size:1.0625rem; line-height:1.72; color:var(--body); margin-bottom:clamp(24px,3vw,40px); }

/* ----------------------------------------------------------------------------
   hero
   ---------------------------------------------------------------------------- */
.epc .hero{ padding-top:clamp(36px,5vh,72px); padding-bottom:clamp(40px,6vw,72px); }
.epc .hero h1{ font-size:var(--fs-display); font-weight:900; line-height:1.02; letter-spacing:-.02em; max-width:16ch; }
.epc .hero-script{ font-family:var(--script); color:var(--accent); font-size:clamp(2.1rem,1.4rem + 2.4vw,3.4rem);
  line-height:1; margin:.16em 0 .14em; display:block; }
.epc .hero-sub{ font-size:var(--fs-lede); line-height:1.55; color:var(--body-soft); max-width:52ch; }

/* ----------------------------------------------------------------------------
   intro + ledger (count-up ribbon — echoes /about)
   ---------------------------------------------------------------------------- */
.epc .epc-intro-prose{ max-width:64ch; font-size:1.0625rem; line-height:1.72; color:var(--body); }
.epc .epc-ledger{ margin-top:clamp(26px,3.4vw,44px); border-top:1.5px solid var(--div); padding-top:clamp(20px,2.4vw,30px); }
.epc .epc-ledger-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,30px); }
.epc .led-n{ display:block; font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; color:var(--ink); font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem); line-height:1; }
.epc .led-l{ display:block; margin-top:8px; font-size:13px; line-height:1.35; color:var(--mut);
  text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.epc .epc-ledger-foot{ margin-top:clamp(16px,2vw,24px); }

/* ----------------------------------------------------------------------------
   SIGNATURE: the EPC rating ladder. 7 equal rungs A–G (gap-free, so row boundaries
   sit at exact n/7 fractions); the lettable floor overlays at those fractions; the
   C floor rises from E on scroll; HWJ's B–C band brackets the right edge.
   ---------------------------------------------------------------------------- */
.epc .epc-ladder{ margin:clamp(10px,1.6vw,22px) 0 0; }
.epc .epc-ladder-grid{ position:relative; display:grid; grid-template-rows:repeat(7,1fr);
  min-height:clamp(340px,44vw,460px); padding-right:clamp(116px,17vw,196px);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding-block:clamp(10px,1.4vw,16px); padding-left:clamp(12px,1.6vw,20px); }
.epc .epc-rung{ grid-row:var(--row); grid-column:1; display:flex; align-items:center; gap:clamp(10px,1.4vw,16px);
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.epc .epc-rung:nth-child(1){ border-top:0; }
.epc .epc-rung-l{ flex:none; width:1.5em; text-align:center; font:900 clamp(1.15rem,.9rem + .9vw,1.7rem)/1 var(--display);
  color:var(--mut); letter-spacing:-.02em; }
.epc .epc-rung-bar{ height:58%; width:var(--w); border-radius:0 5px 5px 0; background:var(--soft);
  border:1px solid var(--line); border-left:0; }
/* HWJ band rungs (B = 2nd, C = 3rd) — accent fill + ink letter */
.epc .epc-rung:nth-child(2) .epc-rung-l,.epc .epc-rung:nth-child(3) .epc-rung-l{ color:var(--accent-ink); }
.epc .epc-rung:nth-child(2) .epc-rung-bar,.epc .epc-rung:nth-child(3) .epc-rung-bar{
  background:color-mix(in srgb,var(--accent) 22%,var(--cream)); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
/* barred rungs F,G — below today's floor, dimmed + hatched */
.epc .epc-rung--barred{ opacity:.62; }
.epc .epc-rung--barred .epc-rung-bar{ background:repeating-linear-gradient(135deg,var(--soft) 0 6px,transparent 6px 12px); }

/* overlays — absolute, positioned at n/7 row boundaries (gap-free grid) */
.epc .epc-floor{ position:absolute; left:clamp(12px,1.6vw,20px); right:0; height:0; z-index:3; }
.epc .epc-floor::before{ content:""; position:absolute; left:0; right:clamp(8px,1vw,14px); top:0; height:0; }
/* label sits just ABOVE its line (never struck through by it) */
.epc .epc-floor-l{ position:absolute; right:clamp(6px,.8vw,12px); bottom:4px;
  font:800 10.5px/1.25 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink);
  text-align:left; max-width:clamp(104px,15vw,176px); }
.epc .epc-floor--now{ top:71.43%; }              /* E / F boundary = 5/7 */
.epc .epc-floor--now::before{ border-top:2px solid var(--accent-ink); }
.epc .epc-floor--next{ top:42.86%; }             /* C / D boundary = 3/7 */
.epc .epc-floor--next::before{ border-top:2px dashed var(--accent); }
.epc .epc-floor--next .epc-floor-l{ color:var(--accent); }
.epc .epc-floor--next .epc-floor-l::before{ content:"↑ "; }
/* the C floor RISES from the E line on scroll (meaningful motion) */
@media (prefers-reduced-motion:no-preference){
  html.js .epc .epc-floor--next{ top:71.43%; transition:top .9s var(--ease) .15s; }
  html.js .epc .epc-ladder.in .epc-floor--next{ top:42.86%; }
}

/* HWJ portfolio band bracket — right edge, spanning B–C rows (1/7 → 3/7) */
.epc .epc-band{ position:absolute; right:clamp(2px,.6vw,8px); top:14.29%; height:28.57%; z-index:2;
  display:flex; align-items:center; gap:9px; padding-left:10px;
  border-left:3px solid var(--accent); }
.epc .epc-band-l{ font:800 11px/1.25 var(--display); letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); max-width:clamp(96px,14vw,150px); }

.epc .epc-ladder-cap{ max-width:70ch; margin:clamp(16px,2vw,24px) 0 0; font-size:.95rem; line-height:1.6; color:var(--body-soft); }
.epc .epc-ladder-cap strong{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* penalty callouts under the ladder */
.epc .epc-floornote{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px);
  margin-top:clamp(20px,2.6vw,32px); }
.epc .epc-pen{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,1.8vw,22px); }
.epc .epc-pen-n{ display:block; font:900 clamp(1.4rem,1rem + 1.4vw,2rem)/1 var(--display);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--accent-ink); }
.epc .epc-pen-l{ display:block; margin-top:8px; font-size:.9rem; line-height:1.45; color:var(--mut); }

/* ----------------------------------------------------------------------------
   the 9 verbatim sections
   ---------------------------------------------------------------------------- */
.epc .epc-sec h2{ font-variant-numeric:tabular-nums; }
.epc .epc-prose{ max-width:72ch; font-size:1.0312rem; line-height:1.7; color:var(--body); margin-top:clamp(16px,2vw,26px); }
.epc .epc-prose strong{ color:var(--ink); }
.epc .epc-list{ list-style:none; margin:0 0 1.05em; padding:0; display:grid; gap:10px; }
.epc .epc-list li{ display:flex; gap:12px; align-items:baseline; font-size:1.0312rem; line-height:1.6; color:var(--body); }
.epc .epc-list-k{ flex:none; min-width:6.5em; font:800 .95rem/1.4 var(--display); font-variant-numeric:tabular-nums;
  letter-spacing:.01em; color:var(--accent-ink); }
.epc .epc-cites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* ----------------------------------------------------------------------------
   contact (light close) + disclaimer
   ---------------------------------------------------------------------------- */
.epc .epc-contact-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,34px); max-width:560px; }
.epc .epc-clist{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.epc .epc-clist li{ font-size:1rem; line-height:1.5; color:var(--body); }
.epc .epc-clist strong{ color:var(--ink); }
.epc .epc-clist a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.epc .epc-legal{ max-width:78ch; margin:clamp(26px,3.4vw,42px) 0 0; padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line); font-size:.82rem; line-height:1.62; color:var(--mut); }
.epc .epc-reviewed{ margin:14px 0 0; font-size:.82rem; color:var(--mut); font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------------------------
   reveal (JS-gated)
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .epc [data-reveal]{ opacity:0; transform:translateY(16px);
    transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s); }
  html.js .epc [data-reveal].in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   responsive
   ---------------------------------------------------------------------------- */
@media (max-width:680px){
  .epc .epc-ledger-row{ grid-template-columns:1fr; gap:18px; }
  .epc .hero h1{ max-width:none; }
  .epc .epc-floornote{ grid-template-columns:1fr; }
  /* ladder: more vertical room + reserve label space; labels shrink */
  .epc .epc-ladder-grid{ min-height:clamp(360px,86vw,460px); padding-right:clamp(96px,30vw,140px); }
  .epc .epc-floor-l,.epc .epc-band-l{ font-size:9.5px; }
}


/* === HWJ /tenants reimagined === */
/* ===================================================================== */
/* /tenants — reimagined. James-led tenant experience.                    */
/* Everything scoped under .tnt (on <main>); every class namespaced tnt-*. */
/* Safe to append to global styles.css — cannot collide with .abt/.mtt/    */
/* .vln/.rra/.jx etc. House design system: sand #ECE4D5 page, cream        */
/* #F6F1E7 panels, dark #262626 James/CTA blocks, Lato display + Sen body,  */
/* AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono (system   */
/* fallback) is used ONLY for § citation chips + James' AI status labels,   */
/* mirroring the live /james page — never for reading text.                 */
/* ===================================================================== */

.tnt{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.tnt *{box-sizing:border-box}
.tnt .tnt-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.tnt h1,.tnt h2,.tnt h3{margin:0;font-family:var(--display);color:var(--ink)}
.tnt h1,.tnt h2{letter-spacing:-.02em}
.tnt h3{letter-spacing:-.01em} /* card/step titles run small — looser tracking reads better */
.tnt .tnt-h1{font-weight:900;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1.0}
.tnt .tnt-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.08}
.tnt .tnt-dot{color:var(--accent)}
.tnt .tnt-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.tnt .tnt-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.tnt .tnt-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.tnt a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.tnt a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers (content-width 1.5px #C9C2B4) ────────── */
.tnt .tnt-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.tnt .tnt-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.tnt .band-dark::before{display:none} /* suppress divider at the dark CTA edge (light→dark already separates) */
.tnt .tnt-prose{max-width:74ch}
.tnt .tnt-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.tnt .tnt-prose p:last-child{margin-bottom:0}
.tnt .tnt-prose strong{color:var(--ink);font-weight:700}
.tnt .tnt-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.tnt .tnt-list li{position:relative;padding-left:24px;font-size:1.05rem;line-height:1.6}
.tnt .tnt-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tnt .tnt-note{margin-top:20px;font-size:.95rem;color:var(--mut);border-left:2px solid var(--div);padding-left:16px}

/* ── Editorial pull-quote band (verbatim lines, break the long-prose belt) ── */
.tnt-pullband{text-align:center}
.tnt-pull{max-width:min(40ch,100%);margin:0 auto;font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,1.05rem + 1.5vw,2.05rem);line-height:1.22;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tnt-pull::before{content:"";display:block;width:34px;height:3px;background:var(--accent);margin:0 auto 26px;border-radius:2px}

/* ── Buttons ───────────────────────────────────────────────────────── */
.tnt .tnt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.tnt .tnt-btn:hover{transform:translateY(-1px)}
.tnt .tnt-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.tnt .tnt-btn-dark:hover{background:#000}
.tnt .tnt-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.tnt .tnt-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.tnt .tnt-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.tnt .tnt-btn-accent:hover{filter:brightness(.94)}
.tnt .tnt-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.tnt .tnt-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.tnt a:focus-visible,.tnt button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── HERO ───────────────────────────────────────────────────────────── */
.tnt-hero{position:relative;padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,72px)}
.tnt-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:start}
.tnt-hero-tx{min-width:0;align-self:center}
.tnt-hero .tnt-lede{font-size:clamp(1.05rem,.98rem + .4vw,1.22rem);line-height:1.62;color:var(--body);max-width:60ch;margin:20px 0 0}
.tnt-hero .tnt-lede strong{color:var(--ink)}
.tnt-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James stage (dark) + conversation (cream) */
.tnt-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.tnt-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.tnt-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,rgba(255,105,51,.16),transparent 60%);pointer-events:none}
.tnt-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.tnt-who{margin-right:auto;min-width:0}
.tnt-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.tnt-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.tnt-live{color:#7CC47C;font-size:.7em}
.tnt-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA;max-width:48ch}

/* The orb (James presence; reused from /james) */
.tnt-orb{position:relative;width:62px;height:62px;flex:none}
.tnt-orb .tnt-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.tnt-orb .tnt-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.tnt-orb .tnt-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.tnt-orb .tnt-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes tntPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes tntCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.tnt-orb .tnt-ring.r2{animation:tntPulse 2.6s var(--ease) infinite}
.tnt-orb .tnt-core{animation:tntCore 2.6s var(--ease) infinite}

/* Voice button (visual stub in preview; wire to live voice on install) */
.tnt-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.tnt-voice:hover{filter:brightness(.94)}
.tnt-voice .tnt-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.tnt-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.tnt-voice.is-listening .tnt-mic{background:#10250f;animation:tntBlink 1s infinite}
@keyframes tntBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Conversation panel */
.tnt-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.tnt-thread{display:flex;flex-direction:column;gap:11px;max-height:360px;overflow-y:auto;padding:2px}
.tnt-msgs{display:flex;flex-direction:column;gap:11px}
.tnt-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.tnt-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.tnt-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.tnt-msg a{color:var(--accent-ink);font-weight:700}
.tnt-msg .tnt-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.tnt-msg .tnt-jump:hover{border-color:var(--accent)}
.tnt-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.tnt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tnt-chip{display:inline-flex;align-items:center;font:600 .82rem/1 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s}
.tnt-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.tnt-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.tnt-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.tnt-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.tnt-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.tnt-send:hover{background:var(--accent)}
.tnt-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.tnt-disclose a{color:var(--accent-ink)}
.tnt-convo-fallback .tnt-msg{max-width:100%}

/* ── RIGHTS PANEL (signature 2) ─────────────────────────────────────── */
.tnt-rights-intro{max-width:70ch;font-size:1.05rem;line-height:1.6;margin:0 0 clamp(24px,3vw,34px)}
.tnt-rights-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.tnt-right{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column}
.tnt-right h3{font-weight:800;font-size:1.08rem;line-height:1.22;margin-bottom:9px}
.tnt-right p{margin:0 0 16px;font-size:.95rem;line-height:1.55;color:var(--body)}
.tnt-cite{margin-top:auto;align-self:flex-start;font:500 .7rem/1.3 var(--mono);letter-spacing:.02em;color:var(--accent-ink);
  background:rgba(178,63,17,.07);border:1px solid rgba(178,63,17,.16);border-radius:6px;padding:5px 9px}
.tnt-cite-fact{color:var(--mut);background:var(--soft);border-color:var(--line)}

/* ── APPLICATION JOURNEY (signature 3) ──────────────────────────────── */
.tnt-apply-intro{max-width:72ch;font-size:1.05rem;line-height:1.6;margin:0 0 clamp(28px,4vw,40px)}
.tnt-journey{display:grid;gap:clamp(22px,3vw,30px)}
.tnt-steprail{list-style:none;margin:0;padding:0;display:flex}
.tnt-steprail li{flex:1;position:relative;display:flex;justify-content:center}
.tnt-steprail li + li::before{content:"";position:absolute;top:23px;right:50%;left:-50%;height:2px;background:var(--line);z-index:0}
.tnt-steprail li.is-done + li::before{background:var(--accent)}
.tnt-stepnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:0 4px;width:100%}
.tnt-stepnum{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--cream);border:1.5px solid var(--div);color:var(--mut);
  font:800 1.15rem/1 var(--display);transition:background .2s,border-color .2s,color .2s,transform .2s}
.tnt-steplbl{font:700 .76rem/1.15 var(--display);letter-spacing:-.01em;color:var(--mut);text-align:center;transition:color .2s}
.tnt-stepnode:hover .tnt-stepnum{border-color:var(--accent)}
.tnt-steprail li.is-done .tnt-stepnum{background:var(--accent);border-color:var(--accent);color:#fff}
.tnt-steprail li.is-active .tnt-stepnum{background:var(--dark);border-color:var(--dark);color:#fff;transform:scale(1.08);box-shadow:0 6px 18px rgba(38,38,38,.22)}
.tnt-steprail li.is-active .tnt-steplbl,.tnt-steprail li.is-done .tnt-steplbl{color:var(--ink)}

.tnt-steppanels{position:relative}
.tnt-steppanel{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px)}
.tnt-steppanel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.js .tnt-steppanel{display:none}
.js .tnt-steppanel.is-open{display:block;animation:tntPanelIn .35s var(--ease)}
@keyframes tntPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tnt-step-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tnt-step-index{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.tnt-step-head h3{font-weight:800;font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);line-height:1.12}
.tnt-steppanel p{margin:0 0 14px;font-size:1.04rem;line-height:1.62}
.tnt-steppanel p:last-child{margin-bottom:0}
.tnt-guard{margin-top:18px!important;background:rgba(255,105,51,.07);border:1px solid rgba(178,63,17,.18);border-radius:12px;
  padding:15px 18px;font-size:.97rem;line-height:1.55;color:var(--body)}
.tnt-guard-tag{display:block;font:700 .68rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:7px}

/* ── WHAT YOU PAY ───────────────────────────────────────────────────── */
.tnt-pay-lead{font-size:1.1rem;font-weight:700;color:var(--ink);margin:0 0 22px}
.tnt-pay-grid{list-style:none;margin:0 0 clamp(26px,3vw,36px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.tnt-pay-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px;position:relative;width:100%}
.tnt-pay-n{font:800 1rem/1 var(--display);color:var(--accent);letter-spacing:.04em;display:block;margin-bottom:14px}
.tnt-pay-card h3{font-weight:800;font-size:1.12rem;line-height:1.2;margin-bottom:7px}
.tnt-pay-card p{margin:0;font-size:.96rem;line-height:1.5;color:var(--body)}
.tnt-nofees{background:var(--dark);border-radius:16px;padding:clamp(22px,3vw,30px);color:#fff}
.tnt-nofees-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.tnt-nofees-list li{font:600 .9rem/1 var(--sans);color:var(--dark-mut);border:1px solid var(--dark-line);border-radius:999px;padding:9px 14px;text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
.tnt-nofees-cap{margin:0;font-size:.97rem;line-height:1.6;color:#EAE4DA;max-width:76ch}
.tnt-nofees-cap a{color:#fff;text-decoration-color:var(--accent)}

/* ── REPAIRS: Awaab timeframes ──────────────────────────────────────── */
.tnt-timeframes{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px}
.tnt-timeframes li{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:20px;border-top:3px solid var(--accent)}
.tnt-tf-fig{display:block;font:800 1.35rem/1.05 var(--display);letter-spacing:-.02em;color:var(--ink);margin-bottom:9px}
.tnt-timeframes p{margin:0;font-size:.94rem;line-height:1.5;color:var(--body)}
.tnt-timeframes strong{color:var(--ink)}

/* ── IF SOMETHING GOES WRONG ────────────────────────────────────────── */
.tnt-redress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:18px 0 26px}
.tnt-redress{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px}
.tnt-redress h3{font-weight:800;font-size:1.08rem;line-height:1.25;margin-bottom:9px}
.tnt-redress p{margin:0;font-size:.96rem;line-height:1.55;color:var(--body)}

/* ── CONTACTS ───────────────────────────────────────────────────────── */
.tnt-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.tnt-contact-col{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px}
.tnt-contact-h{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.tnt-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.tnt-contact-list li{font-size:.98rem;line-height:1.5}
.tnt-contact-list strong{color:var(--ink)}
.tnt-related{max-width:78ch;margin-top:clamp(24px,3vw,32px)}
.tnt-related p{margin:0 0 16px;font-size:1rem;line-height:1.6;color:var(--body)}
.tnt-related p:last-child{margin-bottom:0}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
/* The global styles.css caps every <section> at max-width:1440px + auto margins.
   That's invisible on the light sand sections, but it leaves sand around the dark
   CTA band on screens wider than 1440px. Override it here so the band bleeds full-
   width (it fills `main`, which is full-width — no 100vw hack, so no scrollbar overflow). */
.tnt .tnt-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.tnt-cta-in{display:flex;flex-direction:column;align-items:center}
.tnt-orb-sm{width:56px;height:56px;margin-bottom:18px}
.tnt-orb-sm .tnt-core{inset:19px}
.tnt .tnt-cta-h{color:#fff;max-width:20ch}
.tnt-cta-sub{margin:16px auto 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.tnt-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
/* Full-bleed seam (Harvey's call for /tenants): the CTA→footer divider runs edge to edge,
   not the content-width inset used elsewhere — both blacks are #262626, so a full line reads cleaner. */
.tnt-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
/* Standard .tnt-sec padding + the inset divider above it, so the boundary
   matches every other section (no orphaned gap); text stays quiet small-print. */
.tnt-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── MOTION (reveal) — JS-gated; reduced-motion safe ────────────────── */
.js .tnt [data-reveal]{opacity:0;transform:translateY(16px)}
.tnt [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .tnt-steprail{display:none} /* no-JS: hide non-functional rail; all panels show stacked */

@media(prefers-reduced-motion:reduce){
  .tnt *,.tnt *::before,.tnt *::after{animation:none!important}
  .js .tnt [data-reveal]{opacity:1;transform:none}
  .tnt [data-reveal].in{transition:none}
  .js .tnt-steppanel.is-open{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .tnt-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .tnt-hero-tx{align-self:auto}
  .tnt-hero .tnt-lede{max-width:none}
}
@media(max-width:640px){
  .tnt-stage-top{flex-wrap:wrap}
  .tnt-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .tnt-steplbl{font-size:.66rem}
  .tnt-stepnum{width:40px;height:40px;font-size:1rem}
  .tnt-steprail li + li::before{top:20px}
  .tnt-hero-cta .tnt-btn{flex:1 1 auto;justify-content:center}
  .tnt-cta-btns .tnt-btn{flex:1 1 100%;justify-content:center}
  .tnt-pay-grid,.tnt-timeframes{grid-template-columns:1fr;grid-auto-rows:auto} /* stack 1-up, natural height */
}
@media(max-width:360px){
  .tnt-steplbl{display:none} /* numbers-only rail on the very narrowest screens */
}
/* Touch devices: ensure ≥44px tap targets (house QA standard) */
@media(hover:none){
  .tnt-chip{min-height:44px}
  .tnt-stepnum{width:44px;height:44px}
  .tnt-steprail li + li::before{top:22px}
}


/* === HWJ /overseas-landlords reimagined === */
/* ===================================================================== */
/* /overseas-landlords — reimagined. James-as-multilingual-concierge.      */
/* Scoped under .ovl (on <main>); every class namespaced ovl-*. Safe to     */
/* append to global styles.css. House design system: sand #ECE4D5 page,     */
/* cream #F6F1E7 panels, dark #262626 James/clock/CTA blocks, Lato display + */
/* Sen body, AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono  */
/* (IBM Plex Mono) is used ONLY for § citation chips, the clock figures and  */
/* James' AI status labels — never for reading text (data-story tier).       */
/* ===================================================================== */

.ovl{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --you:#5FA39B; /* muted teal — "your hours / elsewhere" on the dark dial (distinct from accent + the cream London arc, not a generic dashboard blue) */
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.ovl *{box-sizing:border-box}
.ovl .ovl-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.ovl h1,.ovl h2,.ovl h3{margin:0;font-family:var(--display);color:var(--ink)}
.ovl h1,.ovl h2{letter-spacing:-.02em}
.ovl h3{letter-spacing:-.01em}
/* Hero headline runs long (a full sentence) in the half-width two-column lockup,
   so the ceiling sits below the 80px short-hero gold standard and the lines balance. */
.ovl .ovl-h1{font-weight:900;font-size:clamp(2.3rem,1rem + 3.6vw,4rem);line-height:1.05;text-wrap:balance}
.ovl .ovl-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.08}
.ovl .ovl-dot{color:var(--accent)}
.ovl .ovl-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.ovl .ovl-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.ovl .ovl-kick-d{color:var(--accent)} /* on the dark clock band */
.ovl .ovl-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.ovl a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.ovl a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers (content-width 1.5px #C9C2B4) ────────── */
.ovl .ovl-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.ovl .ovl-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.ovl .band-dark::before{display:none}              /* suppress divider entering a dark band */
.ovl .band-dark + .ovl-sec::before{display:none}    /* …and leaving one (dark already separates) */
.ovl .ovl-prose{max-width:74ch}
.ovl .ovl-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.ovl .ovl-prose p:last-child{margin-bottom:0}
.ovl .ovl-prose strong{color:var(--ink);font-weight:700}
.ovl .ovl-lead-p{max-width:72ch;font-size:1.08rem;line-height:1.62;margin:0 0 clamp(24px,3vw,34px)}

/* ── Editorial pull-quote band ─────────────────────────────────────── */
.ovl-pullband{text-align:center}
.ovl-pull{max-width:min(46ch,100%);margin:0 auto;font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,1.05rem + 1.5vw,2.05rem);line-height:1.22;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ovl-pull::before{content:"";display:block;width:34px;height:3px;background:var(--accent);margin:0 auto 26px;border-radius:2px}

/* ── Buttons ───────────────────────────────────────────────────────── */
.ovl .ovl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.ovl .ovl-btn:hover{transform:translateY(-1px)}
.ovl .ovl-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.ovl .ovl-btn-dark:hover{background:#000}
.ovl .ovl-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.ovl .ovl-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.ovl .ovl-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.ovl .ovl-btn-accent:hover{filter:brightness(.94)}
.ovl .ovl-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.ovl .ovl-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.ovl a:focus-visible,.ovl button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ovl .ovl-clockwrap a:focus-visible,.ovl .ovl-cta a:focus-visible{outline-color:#fff}

/* ── HERO ───────────────────────────────────────────────────────────── */
.ovl-hero{position:relative;padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,72px)}
.ovl-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:start}
.ovl-hero-tx{min-width:0;align-self:center}
.ovl-hero .ovl-lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.5;color:var(--ink);max-width:30ch;margin:22px 0 0;font-weight:700}
.ovl-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James stage (dark) + conversation (cream) */
.ovl-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.ovl-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.ovl-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,rgba(255,105,51,.16),transparent 60%);pointer-events:none}
.ovl-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.ovl-who{margin-right:auto;min-width:0}
.ovl-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.ovl-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.ovl-live{color:#7CC47C;font-size:.7em}
.ovl-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA;max-width:52ch}
.ovl-greet{display:inline-block;color:#fff;font-weight:700;min-width:2.2em}
.ovl-greet::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;background:var(--accent);vertical-align:-.13em;animation:ovlCaret 1s steps(1) infinite}
@keyframes ovlCaret{0%,100%{opacity:1}50%{opacity:0}}

/* The orb (James presence; reused from /james) */
.ovl-orb{position:relative;width:62px;height:62px;flex:none}
.ovl-orb .ovl-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.ovl-orb .ovl-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.ovl-orb .ovl-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.ovl-orb .ovl-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes ovlPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes ovlCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ovl-orb .ovl-ring.r2{animation:ovlPulse 2.6s var(--ease) infinite}
.ovl-orb .ovl-core{animation:ovlCore 2.6s var(--ease) infinite}

/* Voice button (visual stub in preview; wires to live voice on install) */
.ovl-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.ovl-voice:hover{filter:brightness(.94)}
.ovl-voice .ovl-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.ovl-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.ovl-voice.is-listening .ovl-mic{background:#10250f;animation:ovlBlink 1s infinite}
@keyframes ovlBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Conversation panel */
.ovl-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.ovl-thread{display:flex;flex-direction:column;gap:11px;max-height:360px;overflow-y:auto;padding:2px}
.ovl-msgs{display:flex;flex-direction:column;gap:11px}
.ovl-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.ovl-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.ovl-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.ovl-msg a{color:var(--accent-ink);font-weight:700}
.ovl-msg .ovl-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.ovl-msg .ovl-jump:hover{border-color:var(--accent)}
.ovl-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.ovl-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ovl-chip{display:inline-flex;align-items:center;font:600 .82rem/1 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s}
.ovl-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.ovl-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.ovl-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.ovl-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.ovl-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.ovl-send:hover{background:var(--accent)}
.ovl-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.ovl-disclose a{color:var(--accent-ink)}
.ovl-convo-fallback .ovl-msg{max-width:100%}

/* ── SIGNATURE 1: THE WORLD CLOCK (dark band) ───────────────────────── */
.ovl-clockwrap{background:var(--dark);color:#fff;max-width:none;margin-inline:0} /* full-bleed past the 1440 cap */
.ovl-clock-head{text-align:center;max-width:60ch;margin:0 auto}
.ovl-clock-head .ovl-kick{justify-content:center}
.ovl .ovl-clock-h{color:#fff}
.ovl-clock-sub{margin:14px auto 0;max-width:54ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.ovl-cities{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px auto 0;max-width:720px}
.ovl-city{font:600 .85rem/1 var(--sans);background:transparent;color:#EAE4DA;border:1.5px solid #7A766D;border-radius:999px;padding:10px 15px;cursor:pointer;transition:border-color .16s,color .16s,background .16s} /* idle border ≥3:1 on #262626 (1.4.11) */
.ovl-city:hover{border-color:var(--accent);color:#fff}
.ovl-city.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

.ovl-clock-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(30px,4vw,46px)}
.ovl-dial-wrap{display:flex;justify-content:center}
.ovl-dial{width:100%;max-width:360px;height:auto;overflow:visible}
.ovl-dial-face{fill:#222020}
.ovl-dial-track{stroke:#332f2c;stroke-width:1}
/* arcs (stroked paths injected by JS) */
.ovl-arc{fill:none;stroke-linecap:round}
.ovl-arc-james{stroke:var(--accent);stroke-width:5;opacity:.85}
.ovl-arc-ldn{stroke:#EFE7D8;stroke-width:11}
.ovl-arc-you{stroke:var(--you);stroke-width:11;opacity:.92}
.ovl-tick{stroke:#4A453F;stroke-width:1.5}
.ovl-tick-lbl{fill:#A9A299;font:600 11px/1 var(--mono);letter-spacing:.04em}
.ovl-hand{stroke:#fff;stroke-width:2;stroke-linecap:round}
.ovl-hand-dot{fill:#fff}
.ovl-mark-dot{fill:var(--accent);stroke:#1A1A1A;stroke-width:1.5}
.ovl-dial-orb-core{fill:var(--accent);filter:drop-shadow(0 0 9px rgba(255,105,51,.55))}
.ovl-dial-orb-r2{stroke:rgba(255,105,51,.55);stroke-width:1.5}
.ovl-dial-orb-r3{stroke:rgba(255,105,51,.3);stroke-width:1.5}
.ovl-dial-orb-lbl{fill:#fff;font:800 12px/1 var(--display);letter-spacing:.18em;text-anchor:middle}
@keyframes ovlOrbPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.13);opacity:.95}}
.ovl-dial-orb-r2{transform-box:fill-box;transform-origin:center;animation:ovlOrbPulse 2.6s var(--ease) infinite}

/* Clock readout + legend */
.ovl-clock-read{min-width:0}
.ovl-readrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ovl-readcard{background:#211F1D;border:1px solid var(--dark-line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.ovl-read-loc{font:700 .72rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-mut)}
.ovl-read-time{font:600 1.9rem/1 var(--mono);letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums}
.ovl-read-state{font:500 .8rem/1.3 var(--sans);color:#C9C2B4}
.ovl-james-state{margin:18px 0 0;font-size:1.02rem;line-height:1.5;color:#fff} /* not flex — flex+gap pushed a gap between the bold clause and the trailing comma */
.ovl-james-state strong{color:#fff}
.ovl-js-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#7CC47C;margin-right:9px;vertical-align:middle;box-shadow:0 0 0 0 rgba(124,196,124,.6);animation:ovlJsDot 2.4s var(--ease) infinite}
@keyframes ovlJsDot{0%{box-shadow:0 0 0 0 rgba(124,196,124,.55)}70%{box-shadow:0 0 0 9px rgba(124,196,124,0)}100%{box-shadow:0 0 0 0 rgba(124,196,124,0)}}
.ovl-legend{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ovl-legend li{display:flex;align-items:center;gap:10px;font:500 .86rem/1.35 var(--sans);color:#D9D2C7}
.ovl-lg-sw{width:16px;height:16px;border-radius:5px;flex:none}
.ovl-lg-ldn{background:#EFE7D8}
.ovl-lg-you{background:var(--you)}
.ovl-lg-james{background:var(--accent)}
.ovl-lg-mark{background:transparent;border:2px solid var(--accent);border-radius:50%}
.ovl-clock-note{margin:18px 0 0;font:500 .9rem/1.55 var(--sans);color:#A9A299;border-left:2px solid var(--accent);padding-left:14px;max-width:60ch}

/* ── EVIDENCE LEDGER RIBBON (real stats.json) ───────────────────────── */
.ovl-ledger{list-style:none;margin:clamp(26px,3.5vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ovl-led{background:var(--cream);padding:22px 18px;display:flex;flex-direction:column;gap:4px;width:100%} /* width:100% — flex grid-items shrink to content under the global styles.css otherwise */
.ovl-led-fig{font:800 clamp(1.9rem,1.4rem + 1.5vw,2.7rem)/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ovl-led-approx::before{content:"~"} /* the ~55 count-up keeps its "about" qualifier (verbatim "About 55") */
.ovl-led-lbl{font:500 .82rem/1.3 var(--sans);color:var(--mut)}
.ovl-led-prov{margin:12px 0 0;font:500 .78rem/1.5 var(--mono);color:var(--mut)}

/* ── THREE OBLIGATIONS (numbered cards + § chips) ───────────────────── */
.ovl-oblig-grid{list-style:none;margin:0 0 clamp(22px,3vw,30px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px;counter-reset:none}
.ovl-oblig{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px 22px 20px;display:flex;flex-direction:column;width:100%;position:relative}
.ovl-oblig-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--dark);color:#fff;font:800 1.15rem/1 var(--display);margin-bottom:15px}
.ovl-oblig h3{font-weight:800;font-size:1.12rem;line-height:1.2;margin-bottom:9px}
.ovl-oblig p{margin:0 0 16px;font-size:.95rem;line-height:1.55;color:var(--body)}
.ovl-cite{margin-top:auto;align-self:flex-start;font:500 .68rem/1.3 var(--mono);letter-spacing:.01em;color:var(--accent-ink);
  background:rgba(178,63,17,.07);border:1px solid rgba(178,63,17,.16);border-radius:6px;padding:5px 9px}
.ovl-mistake{background:var(--dark);color:#EAE4DA;border-radius:14px;padding:clamp(20px,2.6vw,26px);font-size:1rem;line-height:1.62;margin:0}
.ovl-mistake-tag{display:block;font:700 .7rem/1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* ── MTD THRESHOLDS (mini cards) ────────────────────────────────────── */
.ovl-thr-intro{margin-top:0!important}
.ovl-thr-grid{list-style:none;margin:6px 0 clamp(8px,1.5vw,14px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.ovl-thr{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px;border-top:3px solid var(--accent);width:100%}
.ovl-thr-fig{display:block;font:800 1.9rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ovl-thr-when{display:block;margin-top:7px;font:600 .72rem/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.ovl-thr p{margin:12px 0 0;font-size:.92rem;line-height:1.5;color:var(--body)}
.ovl-callout{background:rgba(255,105,51,.07);border:1px solid rgba(178,63,17,.18);border-radius:12px;padding:18px 20px;font-size:1rem;line-height:1.6;color:var(--body);margin:6px 0 18px!important}
.ovl-callout>strong:first-child{color:var(--accent-ink)}

/* ── STATEMENT → SA MAPPING ─────────────────────────────────────────── */
.ovl-stmt{list-style:none;margin:0 0 clamp(18px,2.5vw,26px);padding:0;display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* fixed (viewport-relative, so identical across rows) key column — the old per-row
   minmax(180,260) resolved to different widths row-to-row at narrow viewports, so the
   key/value divider zig-zagged. clamp(...vw...) is the same value for every row. */
.ovl-stmt-row{background:var(--cream);display:grid;grid-template-columns:clamp(150px,18vw,230px) 1fr;gap:clamp(14px,2.4vw,28px);padding:18px clamp(18px,2.4vw,24px);align-items:start;width:100%} /* width:100% — short rows (list-item grid-items) shrank to content otherwise */
.ovl-stmt-k{font:700 1rem/1.35 var(--display);color:var(--ink);letter-spacing:-.01em}
.ovl-stmt-k span{font-weight:400;color:var(--mut)}
.ovl-stmt-v{font-size:.97rem;line-height:1.55;color:var(--body)}
.ovl-stmt-v strong{color:var(--ink)}
.ovl-stmt-warn{background:#F3E4DC}
.ovl-stmt-warn .ovl-stmt-k{color:var(--accent-ink)}
.ovl-stmt-foot{max-width:78ch;font-size:1rem;line-height:1.6;color:var(--body);margin:0}

/* ── HWJ × YWC SPLIT ────────────────────────────────────────────────── */
.ovl-split{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;margin:clamp(24px,3vw,34px) 0 clamp(18px,2.5vw,24px)}
.ovl-split-col{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.6vw,28px);width:100%}
.ovl-split-ywc{background:var(--dark);color:#EAE4DA}
.ovl-split-h{font-weight:800;font-size:1.18rem;line-height:1.2;margin-bottom:14px}
.ovl-split-h::before{content:"";display:block;width:30px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:13px}
.ovl-split-ywc .ovl-split-h{color:#fff}
.ovl-split-col p{margin:0;font-size:.97rem;line-height:1.6}
.ovl-split-ywc p{color:#D9D2C7}
.ovl-split-ywc a{color:#fff;text-decoration-color:var(--accent)}
.ovl-split-foot{max-width:80ch;font-size:1rem;line-height:1.62;color:var(--body);margin:0}

/* ── WEBINARS: James note ───────────────────────────────────────────── */
.ovl-james-note{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:18px 20px;font-size:1rem!important;line-height:1.6!important;color:var(--body);margin-top:6px!important}
.ovl-james-note-tag{display:block;font:700 .68rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}

/* ── CONTACTS ───────────────────────────────────────────────────────── */
.ovl-contacts{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));grid-auto-rows:1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ovl-contact{background:var(--cream);padding:18px 20px;font-size:.98rem;line-height:1.5;width:100%} /* grid-auto-rows:1fr + width:100% → uniform tiles (8 → 4×2 on desktop) */
.ovl-contact strong{color:var(--ink)}
.ovl-related{max-width:78ch;margin-top:clamp(22px,3vw,30px)}
.ovl-related p{margin:0;font-size:1rem;line-height:1.6;color:var(--body)}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
.ovl .ovl-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.ovl-cta-in{display:flex;flex-direction:column;align-items:center}
.ovl-orb-sm{width:56px;height:56px;margin-bottom:18px}
.ovl-orb-sm .ovl-core{inset:19px}
.ovl .ovl-cta-h{color:#fff;max-width:24ch}
.ovl-cta-sub{margin:16px auto 0;max-width:64ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.ovl-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.ovl-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.ovl-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── MOTION (reveal) — JS-gated; reduced-motion safe ────────────────── */
.js .ovl [data-reveal]{opacity:0;transform:translateY(16px)}
.ovl [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}

@media(prefers-reduced-motion:reduce){
  .ovl *,.ovl *::before,.ovl *::after{animation:none!important}
  .js .ovl [data-reveal]{opacity:1;transform:none}
  .ovl [data-reveal].in{transition:none}
  .ovl-greet::after{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:980px){
  .ovl-clock-grid{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .ovl-dial{max-width:320px}
}
@media(max-width:920px){
  .ovl-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .ovl-hero-tx{align-self:auto}
  .ovl-hero .ovl-lede{max-width:none}
}
@media(max-width:760px){
  .ovl-oblig-grid,.ovl-thr-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .ovl-split{grid-template-columns:1fr;grid-auto-rows:auto}
  .ovl-ledger{grid-template-columns:repeat(2,1fr)}
  .ovl-stmt-row{grid-template-columns:1fr;gap:6px}
}
@media(max-width:640px){
  .ovl-stage-top{flex-wrap:wrap}
  .ovl-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .ovl-hero-cta .ovl-btn{flex:1 1 auto;justify-content:center}
  .ovl-cta-btns .ovl-btn{flex:1 1 100%;justify-content:center}
  .ovl-readrow{grid-template-columns:1fr}
}
/* Touch devices: ensure ≥44px tap targets (house QA standard) */
@media(hover:none){
  .ovl-chip{min-height:44px}
  .ovl-city{min-height:44px}
  .ovl-msg .ovl-jump{min-height:44px}
}


/* === HWJ /china-desk reimagined === */
/* ===================================================================== */
/* /china-desk — reimagined. Chinese-first James + WeChat / /zh bridge.    */
/* Scoped under .cnd (on <main>); every class namespaced cnd-*. Shares the  */
/* exact house system with /overseas-landlords (.ovl) so the pair reads as  */
/* one family: sand #ECE4D5 page, cream #F6F1E7 panels, dark #262626 James/ */
/* CTA blocks, Lato display + Sen body, AA tokens (--mut #5F5A50,           */
/* --accent-ink #B23F11). Mono only for the WeChat ID + James' AI status.   */
/* ===================================================================== */

.cnd{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",var(--sans);
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.cnd *{box-sizing:border-box}
.cnd .cnd-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.cnd h1,.cnd h2,.cnd h3{margin:0;font-family:var(--display);color:var(--ink)}
.cnd h1,.cnd h2{letter-spacing:-.02em}
.cnd h3{letter-spacing:-.01em}
/* Matched to .ovl-h1 so the pair's heroes share one scale (long headline, balanced). */
.cnd .cnd-h1{font-weight:900;font-size:clamp(2.3rem,1rem + 3.6vw,4rem);line-height:1.05;text-wrap:balance}
.cnd .cnd-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.08}
.cnd .cnd-dot{color:var(--accent)}
.cnd .cnd-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.cnd .cnd-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.cnd .cnd-script-zh{font-family:var(--zh);font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);color:var(--accent);line-height:1;margin:14px 0 0;font-weight:700;letter-spacing:.04em} /* accent #FF6933 to rhyme with the .ovl-script hero flourish (decorative, aria-hidden) */
.cnd a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.cnd a:hover{text-decoration-color:var(--accent)}

/* Section numerals (verbatim source numbers, kept visible + styled) */
.cnd .cnd-secn{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;margin-right:.4em;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:.62em;vertical-align:.12em}

/* ── Sections + inset dividers ─────────────────────────────────────── */
.cnd .cnd-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.cnd .cnd-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.cnd .band-dark::before{display:none}
.cnd .band-dark + .cnd-sec::before{display:none}
.cnd .cnd-prose{max-width:74ch}
.cnd .cnd-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.cnd .cnd-prose p:last-child{margin-bottom:0}
.cnd .cnd-prose strong{color:var(--ink);font-weight:700}
.cnd .cnd-lead-p{max-width:72ch;font-size:1.08rem;line-height:1.62;margin:0 0 clamp(22px,3vw,30px)}

/* ── Buttons ───────────────────────────────────────────────────────── */
.cnd .cnd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.cnd .cnd-btn:hover{transform:translateY(-1px)}
.cnd .cnd-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.cnd .cnd-btn-dark:hover{background:#000}
.cnd .cnd-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.cnd .cnd-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.cnd .cnd-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.cnd .cnd-btn-accent:hover{filter:brightness(.94)}
.cnd .cnd-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.cnd .cnd-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.cnd a:focus-visible,.cnd button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.cnd .cnd-cta a:focus-visible{outline-color:#fff}

/* ── HERO ───────────────────────────────────────────────────────────── */
.cnd-hero{position:relative;padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,72px)}
.cnd-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:start}
.cnd-hero-tx{min-width:0;align-self:center}
.cnd-hero .cnd-lede{font-size:clamp(1.05rem,.98rem + .45vw,1.24rem);line-height:1.5;color:var(--ink);max-width:44ch;margin:22px 0 0;font-weight:700}
.cnd-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James stage (shared with .ovl) */
.cnd-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.cnd-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.cnd-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,rgba(255,105,51,.16),transparent 60%);pointer-events:none}
.cnd-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.cnd-who{margin-right:auto;min-width:0}
.cnd-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.cnd-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.cnd-live{color:#7CC47C;font-size:.7em}
.cnd-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA;max-width:52ch}
.cnd-greet{display:inline-block;font-family:var(--zh);color:#fff;font-weight:700;min-width:2.4em}
.cnd-greet::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;background:var(--accent);vertical-align:-.13em;animation:cndCaret 1s steps(1) infinite}
@keyframes cndCaret{0%,100%{opacity:1}50%{opacity:0}}

.cnd-orb{position:relative;width:62px;height:62px;flex:none}
.cnd-orb .cnd-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.cnd-orb .cnd-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.cnd-orb .cnd-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.cnd-orb .cnd-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes cndPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes cndCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.cnd-orb .cnd-ring.r2{animation:cndPulse 2.6s var(--ease) infinite}
.cnd-orb .cnd-core{animation:cndCore 2.6s var(--ease) infinite}

.cnd-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.cnd-voice:hover{filter:brightness(.94)}
.cnd-voice .cnd-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.cnd-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.cnd-voice.is-listening .cnd-mic{background:#10250f;animation:cndBlink 1s infinite}
@keyframes cndBlink{0%,100%{opacity:1}50%{opacity:.25}}

.cnd-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.cnd-thread{display:flex;flex-direction:column;gap:11px;max-height:360px;overflow-y:auto;padding:2px}
.cnd-msgs{display:flex;flex-direction:column;gap:11px}
.cnd-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.cnd-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.cnd-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.cnd-msg a{color:var(--accent-ink);font-weight:700}
.cnd-msg .cnd-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.cnd-msg .cnd-jump:hover{border-color:var(--accent)}
.cnd-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.cnd-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.cnd-chip{display:inline-flex;align-items:center;font:600 .82rem/1 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s}
.cnd-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.cnd-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.cnd-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.cnd-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.cnd-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.cnd-send:hover{background:var(--accent)}
.cnd-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.cnd-disclose a{color:var(--accent-ink)}
.cnd-convo-fallback .cnd-msg{max-width:100%}

/* ── SIGNATURE: WeChat + /zh BRIDGE ─────────────────────────────────── */
.cnd-bridge-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,2.6vw,28px);align-items:stretch}
.cnd-bridge-main{display:flex;flex-direction:column;gap:20px;width:100%} /* flex grid-items need width:100% (global styles.css shrinks them otherwise) */
.cnd-bridge-lead{font-size:1.08rem;line-height:1.62;color:var(--body);margin:0;max-width:60ch}
.cnd-bridge-lead strong{color:var(--ink)}
.cnd-wechat-id{font-family:var(--mono);font-weight:600;color:var(--accent-ink);letter-spacing:.01em}
.cnd-wechat-card{margin-top:auto;background:var(--dark);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.cnd-wechat-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 88% 10%,rgba(255,105,51,.16),transparent 60%);pointer-events:none}
.cnd-wechat-eyebrow{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);position:relative;z-index:1}
.cnd-wechat-big{font:600 clamp(1.7rem,1.3rem + 1.6vw,2.3rem)/1 var(--mono);letter-spacing:.005em;color:#fff;position:relative;z-index:1}
.cnd-wechat-sub{font:500 .9rem/1.3 var(--sans);color:#C9C2B4;position:relative;z-index:1}
.cnd-zh{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%}
.cnd-zh-eyebrow{font-family:var(--zh);font-weight:700;font-size:1.5rem;color:var(--accent-ink);letter-spacing:.05em}
.cnd-zh-txt{margin:0;font-size:1rem;line-height:1.55;color:var(--body)}
.cnd-zh .cnd-btn{font-family:var(--zh),var(--display)}
.cnd-zh-note{margin:auto 0 0;font-size:.86rem;line-height:1.5;color:var(--mut);border-top:1px solid var(--line);padding-top:14px;width:100%}

/* ── 2. BILINGUAL CHECKLIST ─────────────────────────────────────────── */
.cnd-check{list-style:none;margin:0 0 clamp(18px,2.5vw,26px);padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cnd-check-i{background:var(--cream);padding:16px 18px 16px 44px;position:relative;font-size:.98rem;line-height:1.5;color:var(--body);width:100%}
.cnd-check-i::before{content:"";position:absolute;left:16px;top:18px;width:16px;height:16px;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat}
.cnd-what-foot{max-width:78ch;font-size:1rem;line-height:1.62;color:var(--body);margin:0}

/* ── 3. TAX LIST ────────────────────────────────────────────────────── */
.cnd-tax-list{list-style:none;margin:0 0 clamp(18px,2.5vw,26px);padding:0;display:grid;gap:12px}
.cnd-tax-i{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:20px 22px;border-left:3px solid var(--accent);width:100%} /* width:100% — the short 4th item (list-item) shrank to content otherwise */
.cnd-tax-i h3{font-weight:800;font-size:1.05rem;line-height:1.25;margin-bottom:7px;display:inline}
.cnd-tax-i p{margin:0;font-size:.97rem;line-height:1.55;color:var(--body);display:inline}
.cnd-tax-i h3::after{content:" "}
.cnd-tax-foot{max-width:80ch;font-size:1rem;line-height:1.62;color:var(--body);margin:0}

/* ── 5. WHAT WE DON'T DO ────────────────────────────────────────────── */
.cnd-notdo-list{list-style:none;margin:0 0 clamp(18px,2.5vw,26px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-rows:1fr;gap:14px}
.cnd-notdo-i{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px 50px;position:relative;width:100%}
.cnd-notdo-i::before{content:"";position:absolute;left:20px;top:23px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent-ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23B23F11' stroke-width='2.4' d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.cnd-notdo-i h3{font-weight:800;font-size:1.04rem;line-height:1.25;margin-bottom:7px}
.cnd-notdo-i p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}
.cnd-notdo-foot{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:40ch;margin:0}

/* ── 6. REGULATORY CARDS ────────────────────────────────────────────── */
.cnd-regs-grid{list-style:none;margin:0 0 clamp(18px,2.5vw,26px);padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:16px}
.cnd-reg{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px 22px 20px;width:100%;position:relative}
.cnd-reg-n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;font:800 1.05rem/1 var(--display);margin-bottom:14px}
.cnd-reg h3{font-weight:800;font-size:1.1rem;line-height:1.22;margin-bottom:9px}
.cnd-reg p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}
.cnd-regs-foot{max-width:80ch;font-size:1rem;line-height:1.6;color:var(--body);margin:0}

/* ── CONTACTS ───────────────────────────────────────────────────────── */
.cnd-contacts{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));grid-auto-rows:1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cnd-contact{background:var(--cream);padding:18px 20px;font-size:.98rem;line-height:1.5;width:100%}
.cnd-contact strong{color:var(--ink)}
.cnd-related{max-width:78ch;margin-top:clamp(22px,3vw,30px)}
.cnd-related p{margin:0;font-size:1rem;line-height:1.6;color:var(--body)}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
.cnd .cnd-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.cnd-cta-in{display:flex;flex-direction:column;align-items:center}
.cnd-orb-sm{width:56px;height:56px;margin-bottom:18px}
.cnd-orb-sm .cnd-core{inset:19px}
.cnd .cnd-cta-h{color:#fff;max-width:24ch;font-family:var(--zh),var(--display)}
.cnd-cta-sub{margin:16px auto 0;max-width:64ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.cnd-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.cnd-cta-btns .cnd-btn-ghost-d:last-child{font-family:var(--zh),var(--display)}
.cnd-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.cnd-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}
.cnd-reviewed{margin-top:12px!important}
.cnd-reviewed strong{color:var(--body)}

/* ── MOTION (reveal) — JS-gated; reduced-motion safe ────────────────── */
.js .cnd [data-reveal]{opacity:0;transform:translateY(16px)}
.cnd [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}

@media(prefers-reduced-motion:reduce){
  .cnd *,.cnd *::before,.cnd *::after{animation:none!important}
  .js .cnd [data-reveal]{opacity:1;transform:none}
  .cnd [data-reveal].in{transition:none}
  .cnd-greet::after{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .cnd-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .cnd-hero-tx{align-self:auto}
  .cnd-hero .cnd-lede{max-width:none}
  .cnd-bridge-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .cnd-check{grid-template-columns:1fr}
  .cnd-regs-grid{grid-template-columns:1fr;grid-auto-rows:auto}
}
@media(max-width:640px){
  .cnd-stage-top{flex-wrap:wrap}
  .cnd-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .cnd-hero-cta .cnd-btn{flex:1 1 auto;justify-content:center}
  .cnd-cta-btns .cnd-btn{flex:1 1 100%;justify-content:center}
}
@media(hover:none){
  .cnd-chip{min-height:44px}
  .cnd-msg .cnd-jump{min-height:44px}
}


/* === HWJ /technology-and-partners reimagined === */
/* ======================================================================= */
/* /technology-and-partners — reimagined. "The Engine Room": James gives a   */
/* guided tour of what is under the hood. SHOWCASE tier — a cinematic        */
/* descent through the stack with the continuous-compliance pillar as spine, */
/* the partner network in motion, and James as the narrator/operator.        */
/*                                                                           */
/* Scoped under .tap (on <main>); every class namespaced tap-*. Safe to      */
/* append to global styles.css. House design system: sand #ECE4D5 page,      */
/* cream #F6F1E7 panels, dark #262626 "engine-room" bands, Lato display +     */
/* Sen body, AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono   */
/* (IBM Plex Mono) is used ONLY for figures / the heartbeat captions / James' */
/* status labels / register numbers — never for reading text (showcase-data  */
/* tier). The register alternates: dark bands for the wow moments (hero,      */
/* heartbeat, marquee, James operator), cream editorial between.             */
/* ======================================================================= */

.tap{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-3:#211F1D;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --ok:#7CC47C; /* "live / online" green — James status + the continuous pulse health */
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.tap *{box-sizing:border-box}
.tap .tap-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.tap img{max-width:100%}

/* ── Type ──────────────────────────────────────────────────────────── */
.tap h1,.tap h2,.tap h3,.tap h4{margin:0;font-family:var(--display);color:var(--ink)}
.tap h1,.tap h2{letter-spacing:-.02em}
.tap h3,.tap h4{letter-spacing:-.01em}
.tap .tap-h1{font-weight:900;font-size:clamp(2.5rem,1.1rem + 5vw,5rem);line-height:1.0;text-wrap:balance}
.tap .tap-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.08;text-wrap:balance}
.tap .tap-dot{color:var(--accent)}
.tap .tap-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.tap .tap-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.tap .tap-kick-d{color:var(--accent)} /* kicker on a dark band */
.tap a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.tap a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers (content-width 1.5px #C9C2B4) ────────── */
.tap .tap-sec{position:relative;padding-block:clamp(52px,7vw,92px);scroll-margin-top:clamp(64px,8vh,92px)}
.tap .tap-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.tap .band-dark{background:var(--dark);color:#EDE6D9;max-width:none;margin-inline:0} /* full-bleed past the global 1440 <section> cap */
.tap .band-dark::before{display:none}            /* suppress divider entering a dark band */
.tap .band-dark + .tap-sec::before{display:none}  /* …and leaving one (dark already separates) */
.tap .tap-sec:first-child::before{display:none}
.tap .tap-prose{max-width:74ch;margin-inline:0;padding-inline:0} /* margin/padding-inline:0 defeat the global stylesheet's content-block centring + the [data-reveal] 16px gutter, so prose left-aligns with its kicker/H2 */
/* Same global [data-reveal] 16px left-gutter lands on every reveal container that doesn't set its own padding — zero it so their content lines up with the section header (cards like .tap-pillar/.tap-affil set their own padding and are unaffected). */
.tap .tap-jblock,.tap .tap-layer,.tap .tap-orbwrap,.tap .tap-hb-stats,.tap .tap-split,.tap .tap-cta,.tap .tap-marquees{padding-inline:0}
.tap .tap-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.tap .tap-prose p:last-child{margin-bottom:0}
.tap .tap-prose strong{color:var(--ink);font-weight:700}
.tap .band-dark .tap-prose strong{color:#fff}
.tap .tap-lead{max-width:72ch;font-size:1.12rem;line-height:1.6;margin:0 0 clamp(24px,3vw,34px)}
.tap .tap-no{font:700 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--accent-ink)}

/* ── Reveal-on-scroll (gated by html.js; solid without JS) ─────────── */
.js .tap [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .tap [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .tap [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===================================================================== */
/* 01 · HERO — the orb boots the stack (dark, cinematic)                  */
/* ===================================================================== */
.tap-hero{overflow:hidden;position:relative;padding-block:clamp(56px,8vw,110px)}
.tap-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 78% 12%,rgba(255,105,51,.14),transparent 55%),
            radial-gradient(70% 60% at 8% 92%,rgba(255,105,51,.06),transparent 60%)}
/* long full-sentence thesis headline runs full-width above the lead+orb row,
   so it lands in ~4 lines at a statement scale rather than 9 lines at 80px */
.tap-hero .tap-h1{color:#fff;position:relative;z-index:1;font-size:clamp(2.3rem,1.1rem + 2.8vw,3.8rem);line-height:1.04;max-width:24ch;margin-bottom:clamp(30px,4vw,46px)}
.tap-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:center}
.tap-hero-lead{margin:22px 0 0;max-width:46ch;font-size:1.12rem;line-height:1.62;color:#D9D2C7}
.tap-hero-lead strong{color:#fff;font-weight:700}
.tap-status{display:inline-flex;align-items:center;gap:9px;margin:26px 0 0;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-mut)}
.tap-status .tap-live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.tap-status .tap-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);transform-origin:center;animation:tapPulseDot 2.6s var(--ease) infinite} /* transform/opacity ring — composited, no per-frame box-shadow paint */
@keyframes tapPulseDot{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.tap-tour{display:inline-flex;align-items:center;gap:10px;margin:30px 0 0;font:700 .9rem/1 var(--display);color:#fff;text-decoration:none;border:1.5px solid #7A766D;border-radius:999px;padding:13px 20px;transition:border-color .18s,background .18s}
.tap-tour:hover{border-color:var(--accent);background:rgba(255,105,51,.1);text-decoration:none}
.tap-tour .tap-arr{font-size:1.05em;transition:transform .3s var(--ease)}
.tap-tour:hover .tap-arr{transform:translateY(3px)}

/* The orb-as-architecture: the James core, orbital rings = stack layers */
.tap-orbwrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(300px,40vw,440px)}
.tap-orb{position:relative;width:min(100%,420px);aspect-ratio:1}
.tap-orb svg{width:100%;height:100%;overflow:visible}
.tap-orbit{fill:none;stroke:var(--dark-line);stroke-width:1;stroke-dasharray:2 7} /* dashed so the slow ring-spin actually reads as motion (concentric solid circles would be a no-op) */
.tap-orbit.o2{stroke:rgba(255,105,51,.22)}
.tap-orb-core{fill:var(--accent);filter:drop-shadow(0 0 16px rgba(255,105,51,.55))}
.tap-orb-r2{fill:none;stroke:rgba(255,105,51,.55);stroke-width:1.5}
.tap-orb-r3{fill:none;stroke:rgba(255,105,51,.3);stroke-width:1.5}
.tap-orb-jlbl{fill:#fff;font:800 13px/1 var(--display);letter-spacing:.16em;text-anchor:middle}
@keyframes tapOrbPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:.95}}
@keyframes tapOrbSpin{to{transform:rotate(360deg)}}
.js .tap-orb-r2{transform-box:fill-box;transform-origin:center;animation:tapOrbPulse 2.8s var(--ease) infinite}
.js .tap-orb-rings{transform-box:view-box;transform-origin:center;animation:tapOrbSpin 90s linear infinite}
.tap-orb-nodes{position:absolute;inset:0}
/* each layer node = a clickable anchor sitting on a ring */
.tap-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;color:#EDE6D9;cursor:pointer;padding:4px;transition:color .18s}
.tap-node .tap-node-dot{width:13px;height:13px;border-radius:50%;background:var(--dark);border:2px solid var(--accent);
  box-shadow:0 0 0 0 rgba(255,105,51,.5);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.tap-node .tap-node-lbl{font:700 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  background:rgba(20,20,20,.72);border:1px solid var(--dark-line);border-radius:999px;padding:5px 9px;transition:border-color .18s}
.tap-node:hover .tap-node-dot,.tap-node:focus-visible .tap-node-dot{background:var(--accent);transform:scale(1.25);box-shadow:0 0 14px 2px rgba(255,105,51,.5)}
.tap-node:hover .tap-node-lbl,.tap-node:focus-visible .tap-node-lbl{border-color:var(--accent);color:#fff}
.tap-node:focus-visible{outline:none}
.tap-node:focus-visible .tap-node-lbl{outline:2px solid var(--accent);outline-offset:2px}
/* node positions (percentages around the orb) */
.tap-node.n-1{top:8%;left:50%}
.tap-node.n-2{top:27%;left:90%}
.tap-node.n-3{top:73%;left:90%}
.tap-node.n-4{top:92%;left:50%}
.tap-node.n-5{top:73%;left:10%}
.tap-node.n-6{top:27%;left:10%}
.tap-orb-hint{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);font:500 .68rem/1 var(--mono);letter-spacing:.06em;color:var(--dark-mut);text-transform:uppercase;white-space:nowrap} /* below the bottom (Finance) node, not overlapping it */

/* ===================================================================== */
/* 02 · THE THESIS — continuous vs annual + the stack at a glance (cream) */
/* ===================================================================== */
.tap-glance{list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.tap-pillar{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px 22px;width:100%;
  display:flex;flex-direction:column;gap:10px;position:relative;border-top:3px solid var(--accent)}
.tap-pillar p{margin:0;font-size:.96rem;line-height:1.55;color:var(--body)}
.tap-pillar p strong{color:var(--ink)} /* the bolded pillar name is verbatim */
.tap-glance-foot{margin:clamp(22px,3vw,30px) 0 0;max-width:74ch;font-size:1rem;line-height:1.6;color:var(--mut)}

/* ===================================================================== */
/* 03 · CONTINUOUS COMPLIANCE — the heartbeat (dark, the spine ★)         */
/* ===================================================================== */
.tap-hb-head{max-width:62ch}
.tap-hb-head .tap-h2{color:#fff}
.tap-hb-head .tap-lead{color:#D9D2C7;margin-bottom:0}
/* the viz */
.tap-hb{margin:clamp(30px,4vw,44px) 0 0;background:var(--dark-3);border:1px solid var(--dark-line);border-radius:18px;
  padding:clamp(22px,3vw,32px);overflow:hidden}
.tap-hb-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:clamp(14px,2vw,26px);align-items:center;padding:clamp(14px,2vw,20px) 0}
.tap-hb-row + .tap-hb-row{border-top:1px solid var(--dark-line)}
.tap-hb-side .tap-hb-who{font:800 1rem/1.1 var(--display);letter-spacing:-.01em;color:#fff}
.tap-hb-side .tap-hb-mode{display:block;margin-top:5px;font:500 .7rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dark-mut)}
.tap-hb-row.is-hwj .tap-hb-who{color:var(--accent)}
.tap-hb-track{position:relative;height:54px}
.tap-hb-track svg{width:100%;height:100%;overflow:visible}
.tap-baseline{stroke:#4A453F;stroke-width:1.5}
.tap-annual-tick{stroke:#6f6a60;stroke-width:2}
.tap-annual-blip{fill:none;stroke:#8a857b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tap-ecg{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tap-ecg-glow{fill:none;stroke:rgba(255,105,51,.26);stroke-width:7;stroke-linecap:round;stroke-linejoin:round} /* static halo — gives the pulse glow without a per-frame drop-shadow re-raster on the animated path */
.js .tap-ecg-anim{stroke-dasharray:14 6;animation:tapEcgFlow 2.4s linear infinite}
@keyframes tapEcgFlow{to{stroke-dashoffset:-40}}
.tap-hb-cap{font:500 .72rem/1.3 var(--mono);letter-spacing:.04em;color:var(--dark-mut);margin-top:8px}
.tap-hb-row.is-hwj .tap-hb-cap{color:#C9C2B4}
/* the supporting stat chips drawn from real stats.json */
.tap-hb-stats{list-style:none;margin:clamp(22px,3vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);border-radius:14px;overflow:hidden}
.tap-hb-stat{background:var(--dark-3);padding:20px 18px;width:100%;display:flex;flex-direction:column;gap:5px}
.tap-hb-fig{font:800 clamp(1.7rem,1.3rem + 1.4vw,2.4rem)/1 var(--display);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.tap-hb-lbl{font:500 .8rem/1.35 var(--sans);color:#C9C2B4}
.tap-hb-prov{margin:14px 0 0;font:500 .76rem/1.5 var(--mono);color:var(--dark-mut)}

/* ===================================================================== */
/* 04 · THE DESCENT — layer by layer (cream editorial)                    */
/* ===================================================================== */
.tap-descent-head{max-width:64ch}
.tap-layers{margin:clamp(28px,4vw,44px) 0 0;display:grid;gap:clamp(20px,2.6vw,30px)}
.tap-layer{display:grid;grid-template-columns:minmax(0,clamp(180px,22vw,260px)) 1fr;gap:clamp(20px,3vw,46px);
  padding-block:clamp(22px,3vw,34px);align-items:start}
.tap-layer + .tap-layer{border-top:1.5px solid var(--div)}
.tap-layer-aside{position:sticky;top:clamp(70px,9vh,100px)}
.tap-layer-no{font:800 1.05rem/1 var(--mono);color:var(--accent-ink);letter-spacing:.02em}
.tap-layer-aside h3{margin:12px 0 0;font-weight:800;font-size:clamp(1.2rem,1rem + .8vw,1.55rem);line-height:1.12}
.tap-depth{margin:16px 0 0;display:inline-flex;flex-direction:column;gap:8px;width:100%;max-width:220px}
.tap-depth-lbl{font:600 .64rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.tap-depth-bar{position:relative;height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.tap-depth-fill{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#F2A35E,#FF6933)}
.tap-depth-ends{display:flex;justify-content:space-between;font:500 .6rem/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mut)}
.tap-layer-body p{margin:0 0 16px;font-size:1.04rem;line-height:1.65}
.tap-layer-body p:last-child{margin-bottom:0}
.tap-layer-body strong{color:var(--ink);font-weight:700}

/* ===================================================================== */
/* 05 · THE PARTNER NETWORK IN MOTION — the marquee (dark ★)              */
/* ===================================================================== */
.tap-mq-head{max-width:60ch}
.tap-mq-head .tap-h2{color:#fff}
.tap-mq-head .tap-lead{color:#D9D2C7;margin-bottom:0}
.tap-marquees{margin:clamp(28px,3.6vw,42px) 0 0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tap-mqgroup .tap-mq-glbl{font:700 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;padding-left:2px}
.tap-mq{position:relative;overflow:hidden}
.tap-mq-track{display:flex;align-items:center;width:max-content} /* spacing lives on each logo's margin-right (NOT a flex gap) so the gap is part of the repeating unit and the -50% loop is seamless */
.js .tap-mq-track{animation:tapMarq var(--dur,42s) linear infinite;will-change:transform} /* will-change only while the JS animation is live (not permanent) */
.js .tap-mq--rev .tap-mq-track{animation-direction:reverse}
@keyframes tapMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.js .tap-mq:hover .tap-mq-track,.js .tap-mq:focus-within .tap-mq-track{animation-play-state:paused}
.tap-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;height:64px;padding:0 22px;margin-right:14px;
  background:#211F1D;border:1px solid var(--dark-line);border-radius:12px;position:relative;transition:border-color .18s,opacity .25s,transform .18s}
.tap-logo img{height:26px;width:auto;display:block;opacity:.92;transition:opacity .18s}
/* placeholder wordmark chips (until real SVGs are supplied) */
.tap-logo.is-word{font:800 1.02rem/1 var(--display);letter-spacing:-.01em;color:#EDE6D9;white-space:nowrap}
.js .tap-mq:hover .tap-logo:not(:hover),.js .tap-mq:focus-within .tap-logo:not(:focus-visible){opacity:.32}
.tap-logo:hover,.tap-logo:focus-visible{border-color:var(--accent);transform:translateY(-2px);outline:none}
.tap-logo:hover img,.tap-logo:focus-visible img{opacity:1}
.tap-logo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* spotlight tooltip — the one-line role */
.tap-logo[data-role]::after{content:attr(data-role);position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  font:500 .72rem/1.3 var(--sans);color:#1A1A1A;background:var(--cream);border:1px solid var(--line);border-radius:8px;
  padding:7px 11px;white-space:nowrap;max-width:280px;opacity:0;pointer-events:none;transition:opacity .16s;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tap-logo:hover::after,.tap-logo:focus-visible::after{opacity:1}
.tap-mq-foot{margin:clamp(22px,3vw,30px) 0 0;font:500 .82rem/1.6 var(--sans);color:var(--dark-mut);max-width:72ch}
.tap-mq-foot .tap-key{display:inline-flex;align-items:center;gap:7px;margin-right:18px;white-space:nowrap}
.tap-mq-foot .tap-key-real{width:22px;height:1px;background:#EDE6D9;display:inline-block}
.tap-mq-foot .tap-key-word{width:22px;height:14px;border:1px dashed #6f6a60;border-radius:3px;display:inline-block}

/* ===================================================================== */
/* 06 · JAMES — the split design (cream editorial)                        */
/* ===================================================================== */
.tap-james-head{max-width:64ch}
.tap-james-blocks{margin:clamp(28px,3.6vw,42px) 0 0;display:grid;gap:clamp(20px,2.6vw,30px)}
.tap-jblock{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:start}
.tap-jblock .tap-jb-mk{width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font:800 .85rem/1 var(--display)}
.tap-jblock p{margin:0;font-size:1.05rem;line-height:1.65}
.tap-jblock p strong{color:var(--ink);font-weight:700}
/* the two-halves split diagram */
.tap-split{margin:clamp(26px,3.4vw,38px) 0 0;display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--cream)}
.tap-split-half{padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:9px;width:100%}
.tap-split-half.is-llm{background:var(--cream)}
.tap-split-half.is-code{background:var(--dark);color:#EDE6D9}
.tap-split-k{font:700 .66rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.tap-split-half.is-code .tap-split-k{color:var(--accent)}
.tap-split-half h4{font-weight:800;font-size:1.1rem;color:var(--ink)}
.tap-split-half.is-code h4{color:#fff}
.tap-split-half p{margin:0;font-size:.92rem;line-height:1.55;color:var(--body)}
.tap-split-half.is-code p{color:#C9C2B4}
.tap-split-mid{display:flex;align-items:center;justify-content:center;padding:0 4px;background:linear-gradient(180deg,var(--cream),var(--dark));position:relative}
.tap-split-mid span{font:700 .62rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:8px 6px;writing-mode:vertical-rl;text-orientation:mixed}

/* ===================================================================== */
/* 07 · JAMES THE OPERATOR — orb stage + scripted tour + CTA (dark)       */
/* ===================================================================== */
.tap-stage-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3vw,44px);align-items:start}
.tap-stage{background:var(--dark-3);border:1px solid var(--dark-line);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.tap-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,rgba(255,105,51,.16),transparent 60%);pointer-events:none}
.tap-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.tap-stage-who{margin-right:auto;min-width:0}
.tap-stage-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.tap-stage-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.tap-stage-live{color:var(--ok);font-size:.7em}
.tap-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA;max-width:52ch}
.tap-greet{display:inline-block;color:#fff;font-weight:700;min-width:2.2em}
.tap-greet::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;background:var(--accent);vertical-align:-.13em;animation:tapCaret 1s steps(1) infinite}
@keyframes tapCaret{0%,100%{opacity:1}50%{opacity:0}}
/* the small orb on the stage (reused from /james) */
.tap-orb-sm{position:relative;width:62px;height:62px;flex:none}
.tap-orb-sm .tap-osm-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.tap-orb-sm .tap-osm-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.tap-orb-sm .tap-osm-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.tap-orb-sm .tap-osm-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes tapOsmPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes tapOsmCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.js .tap-orb-sm .tap-osm-ring.r2{animation:tapOsmPulse 2.6s var(--ease) infinite}
.js .tap-orb-sm .tap-osm-core{animation:tapOsmCore 2.6s var(--ease) infinite}
/* voice button */
.tap-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.tap-voice:hover{filter:brightness(.94)}
.tap-voice .tap-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.tap-voice.is-listening{background:var(--ok);border-color:var(--ok);color:#10250f}
.tap-voice.is-listening .tap-mic{background:#10250f;animation:tapBlink 1s infinite}
@keyframes tapBlink{0%,100%{opacity:1}50%{opacity:.25}}
/* conversation panel */
.tap-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.tap-thread{display:flex;flex-direction:column;gap:11px;max-height:380px;overflow-y:auto;padding:2px}
.tap-msgs{display:flex;flex-direction:column;gap:11px}
.tap-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.tap-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.tap-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.tap-msg a{color:var(--accent-ink);font-weight:700}
.tap-msg .tap-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.tap-msg .tap-jump:hover{border-color:var(--accent)}
.tap-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.tap-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tap-chip{display:inline-flex;align-items:center;font:600 .82rem/1 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s}
.tap-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.tap-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.tap-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.tap-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.tap-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.tap-send:hover{background:var(--accent)}
.tap-disclose{font:400 .76rem/1.5 var(--sans);color:#A9A299;margin:11px 2px 0}
.tap-disclose a{color:var(--accent)}
.tap-convo-fallback .tap-msg{max-width:100%}
/* the "Ask James" CTA, sitting under the stage */
.tap-cta{margin:clamp(30px,4vw,46px) 0 0;text-align:center}
.tap-cta .tap-h2{color:#fff}
.tap-cta-p{margin:14px auto 0;max-width:54ch;font-size:1.06rem;line-height:1.6;color:#D9D2C7}
.tap-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0 0}
.tap-btn{display:inline-flex;align-items:center;gap:8px;font:700 .94rem/1 var(--display);text-decoration:none;border-radius:999px;padding:15px 26px;transition:filter .18s,background .18s,border-color .18s}
.tap-btn-pri{background:var(--accent);color:#fff;border:1.5px solid var(--accent)}
.tap-btn-pri:hover{filter:brightness(.94);text-decoration:none}
.tap-btn-ghost{background:transparent;color:#fff;border:1.5px solid #7A766D}
.tap-btn-ghost:hover{border-color:var(--accent);text-decoration:none}

/* ===================================================================== */
/* 08 · AFFILIATIONS · WHAT COMES NEXT · CONTACTS · DISCLAIMER (light)    */
/* ===================================================================== */
.tap-affil-head{max-width:64ch}
.tap-affil-grid{list-style:none;margin:clamp(26px,3.4vw,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:16px}
.tap-affil{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 24px;width:100%}
.tap-affil p{margin:0;font-size:.98rem;line-height:1.6;color:var(--body)}
.tap-affil p strong{color:var(--ink)}
.tap-affil p strong a{color:var(--accent-ink)}
.tap-next{margin:clamp(28px,3.6vw,42px) 0 0}
.tap-look{list-style:none;margin:clamp(20px,2.6vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:12px}
.tap-look li{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px;width:100%;font-size:.96rem;line-height:1.5}
.tap-look li a{font-weight:700}
.tap-contacts{list-style:none;margin:clamp(20px,2.6vw,28px) 0 0;padding:0;display:grid;gap:10px;max-width:80ch}
.tap-contacts li{font:500 .92rem/1.55 var(--sans);color:var(--body);padding-left:18px;position:relative}
.tap-contacts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tap-contacts li strong{font-variant-numeric:tabular-nums}
.tap-disc{margin:clamp(30px,4vw,46px) 0 0;padding-top:clamp(22px,3vw,30px);border-top:1.5px solid var(--div)}
.tap-disc-h{font-weight:800;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.tap-disc p{margin:0;font:400 .84rem/1.65 var(--sans);color:var(--mut);max-width:90ch}

/* ── Focus + tap targets ───────────────────────────────────────────── */
.tap a:focus-visible,.tap button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (hover:none){
  .tap-node,.tap-chip,.tap-logo,.tap-voice,.tap-send,.tap-btn,.tap-tour{min-height:44px}
  .tap-logo[data-role]::after{display:none} /* no hover tooltips on touch */
}

/* ── Reduced motion: kill all decorative motion; marquees go static ── */
@media (prefers-reduced-motion:reduce){
  .js .tap-orb-r2,.js .tap-orb-rings,.js .tap-orb-sm .tap-osm-ring.r2,.js .tap-orb-sm .tap-osm-core,
  .js .tap-ecg-anim,.js .tap-mq-track,.tap-status .tap-live::after,.tap-greet::after,.tap-stage-live{
    animation:none!important}
  .js .tap-mq-track{will-change:auto}
  .tap-mq.is-static{overflow-x:auto}
  .tap-mq.is-static .tap-mq-track{width:auto}
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width:920px){
  .tap-hero-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .tap-orbwrap{min-height:auto;order:2}
  .tap-orb{width:min(82vw,360px)}
  .tap-stage-grid{grid-template-columns:1fr}
  .tap-glance{grid-template-columns:1fr 1fr}
  .tap-hb-stats{grid-template-columns:1fr 1fr}
  .tap-affil-grid,.tap-look{grid-template-columns:1fr}
  .tap-layer{grid-template-columns:1fr;gap:14px}
  .tap-layer-aside{position:static}
  .tap-depth{max-width:none}
}
@media (max-width:560px){
  .tap-glance,.tap-hb-stats{grid-template-columns:1fr}
  .tap-stage-top{flex-wrap:wrap}            /* let the voice button drop to its own row on the narrowest phones */
  .tap-stage-top .tap-voice{margin-left:auto}
  .tap-hb-row{grid-template-columns:1fr;gap:8px}
  .tap-split{grid-template-columns:1fr}
  .tap-split-mid{display:none}
  .tap-node .tap-node-lbl{font-size:.6rem;padding:4px 7px}
  .tap-msg{max-width:96%}
}


/* === HWJ homepage-hero — The Intelligence Map === */
/* ============================================================================
   HWJ homepage hero — PROTOTYPE B: "The Intelligence Map" (vector, from scratch)
   London rendered in SVG + canvas: Thames + map grid + glowing nodes at HWJ's REAL
   postcode districts (sized by homes managed). No baked artwork — fully directable.
   Same contained/perf/reduced-motion discipline as the illustrated build.
   ============================================================================ */
.hero-wrap{ isolation:isolate; min-height:100svh; }
html.hx-js .hero-wrap{ background:#ECE4D5; background-image:none; } /* Cowork install: gated to the EN homepage (hx-js) so the SHARED zh hero keeps its existing map bg */

.hx{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hx-map{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; transition:opacity 1s ease; transform-origin:center center; }
.hero-wrap.hx-ready .hx-map{ opacity:1; animation:hxFocus 1.25s ease both; } /* boot focus-pull */
.hx-map svg{ width:100%; height:100%; display:block; }
.hx-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
  opacity:0; transition:opacity 1.2s ease .2s; transform-origin:center center; }
.hero-wrap.hx-ready .hx-canvas{ opacity:1; }
@keyframes hxFocus{ from{ filter:blur(9px); } to{ filter:blur(0); } }

/* Specular sheen — a soft glass highlight that follows the pointer (desktop) */
.hx-spec{ position:absolute; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px;
  border-radius:50%; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:soft-light;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 68%); transition:opacity .45s ease; }
/* Hover depth-of-field: the map recedes while a postcode is interrogated */
.hx.focus .hx-map{ opacity:.6; transition:opacity .28s ease; }

.hx-scrim{ position:absolute; left:0; top:0; bottom:0; width:60%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(236,228,213,.78) 0%, rgba(236,228,213,.4) 45%, rgba(236,228,213,0) 100%); }
@media (max-width:820px){ .hx-scrim{ width:100%;
  background:linear-gradient(90deg, rgba(236,228,213,.72) 0%, rgba(236,228,213,.4) 60%, rgba(236,228,213,.15) 100%); } }

.hx-orb{ position:absolute; right:11%; top:30%; width:clamp(54px,5vw,76px); aspect-ratio:1; z-index:3;
  pointer-events:none; opacity:0; transition:opacity 1s ease .3s; }
.hero-wrap.hx-ready .hx-orb{ opacity:1; }
.hx-orb svg{ width:100%; height:100%; overflow:visible; display:block; }
.hx-orb-core{ fill:var(--accent,#FF6933); filter:drop-shadow(0 0 9px rgba(255,105,51,.6)); }
.hx-orb-glow{ fill:var(--accent,#FF6933); opacity:.16; }
.hx-orb-ring{ fill:none; stroke:var(--accent,#FF6933); stroke-width:1; opacity:.5; stroke-dasharray:2 6;
  transform-box:fill-box; transform-origin:center; animation:hxOrbSpin 64s linear infinite; }
.hx-orb-pulse{ fill:none; stroke:var(--accent,#FF6933); stroke-width:1; transform-box:fill-box;
  transform-origin:center; animation:hxOrbPulse 4.2s ease-out infinite; }
.hx-orb-label{ position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  font:800 11px/1 Lato,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#5F5A50; white-space:nowrap; }

.hx-ask{ position:absolute; z-index:4; pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; font:700 12.5px/1 Lato,system-ui,sans-serif; letter-spacing:.01em;
  color:#1A1A1A; background:rgba(246,241,231,.86); border:1px solid var(--accent,#FF6933);
  border-radius:999px; padding:0 18px; cursor:pointer;
  -webkit-backdrop-filter:saturate(1.1) blur(2px); backdrop-filter:saturate(1.1) blur(2px);
  opacity:0; transition:opacity .7s ease .9s, transform .2s ease, background .2s ease; }
.hero-wrap.hx-ready .hx-ask{ opacity:1; }
.hx-ask:hover{ background:#B23F11; color:#fff; transform:translateY(-1px); }
.hx-ask:focus-visible{ outline:2px solid #B23F11; outline-offset:3px; box-shadow:0 0 0 4px rgba(255,255,255,.92); } /* AA focus ring (>=3:1) */
.hx-ask .hx-ask-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent,#FF6933); box-shadow:0 0 0 3px rgba(255,105,51,.22); flex:none; }
.hx-ask:hover .hx-ask-dot{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }

.hx-rail{ position:absolute; left:50%; transform:translateX(-50%); bottom:11%; z-index:3; pointer-events:none;
  width:min(1440px,100%); margin:0 auto; padding:0 16px; opacity:0; transition:opacity 1s ease .6s; }
.hero-wrap.hx-ready .hx-rail{ opacity:1; }
.hx-rail-track{ position:relative; height:1.4em; overflow:hidden; }
.hx-rail-line{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:9px; white-space:nowrap; opacity:0; transition:opacity .9s ease; }
.hx-rail-line.on{ opacity:1; }
.hx-rail-line::before{ content:""; width:16px; height:2px; background:var(--accent,#FF6933); flex:none; }
.hx-rail-line .t{ font:400 13.5px/1.4 Sen,system-ui,sans-serif; color:#5F5A50; }
.hx-rail-line.data .t{ font:500 12.5px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:-.01em; color:#B23F11; }
@media (max-width:720px){ .hx-rail{ display:none; } }
@media (max-width:820px){ .hx-orb, .hx-ask{ display:none; } }

/* --- Living Thames current (subtle downstream shimmer) --- */
.hx-thames-flow{ fill:none; stroke:#EAF0F0; stroke-width:3; stroke-linecap:round; stroke-dasharray:2 30; opacity:0; }
.hero-wrap.hx-ready .hx-thames-flow{ opacity:.7; animation:hxFlow 6s linear infinite; }
@keyframes hxFlow{ to{ stroke-dashoffset:-320; } }
/* --- Cinematic boot: the river draws in (paths carry pathLength="1") --- */
.hx-river{ stroke-dasharray:1; stroke-dashoffset:1; }
.hero-wrap.hx-ready .hx-river{ animation:hxDraw 1.4s ease forwards; }
@keyframes hxDraw{ to{ stroke-dashoffset:0; } }

/* --- Explorable node intelligence: hotspots + data card (desktop/tablet) --- */
.hx-hotspots{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hx-hotspot{ position:absolute; transform:translate(-50%,-50%); min-width:44px; min-height:44px;
  border:0; background:transparent; padding:0; margin:0; border-radius:50%; cursor:pointer; pointer-events:auto; }
.hx-hotspot:focus-visible{ outline:2px solid #B23F11; outline-offset:2px; box-shadow:0 0 0 4px rgba(255,255,255,.92); } /* AA focus ring (>=3:1) */
.hx-card{ position:absolute; z-index:5; pointer-events:none; min-width:176px; max-width:236px;
  background:#F6F1E7; border:1px solid #C9C2B4; border-radius:14px; padding:12px 14px;
  box-shadow:0 12px 34px rgba(38,38,38,.14); opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease; }
.hx-card.on{ opacity:1; transform:none; }
.hx-card .c-code{ font:800 12px/1 Lato,system-ui,sans-serif; letter-spacing:.05em; color:#B23F11; }
.hx-card .c-name{ font:700 14px/1.2 Lato,system-ui,sans-serif; color:#1A1A1A; margin:2px 0 9px; letter-spacing:-.01em; }
.hx-card .c-row{ display:flex; justify-content:space-between; gap:16px; font:400 12px/1.6 Sen,system-ui,sans-serif; color:#5F5A50; }
.hx-card .c-row b{ font:500 12.5px/1.6 "IBM Plex Mono",ui-monospace,monospace; color:#1A1A1A; font-weight:500; }
.hx-card .c-kick{ display:block; margin-top:9px; font:700 9.5px/1.3 Lato,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#5F5A50; }
@media (max-width:820px){ .hx-hotspots, .hx-card{ display:none; } }

html.hx-js .hero-inner > *{ opacity:0; transform:translateY(12px); animation:hxRise .56s cubic-bezier(.2,.7,.2,1) forwards; }
html.hx-js .hero-inner > h1{ opacity:1; transform:translateY(10px); animation:hxSlide .56s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:0s; }
html.hx-js .hero-inner > .hkick{ animation-delay:.04s; }
html.hx-js .hero-inner > .btns{ animation-delay:.50s; }
/* FINALE: cursive + sub are held back and arrive AFTER the map boot. The cursive is
   signed on by JS (.hx-signing); these CSS rules are safety reveals so the lines never
   go missing if the signing JS doesn't run. */
html.hx-js .hero-inner > .hscript{ transform:none; min-height:1.8em; margin-top:-0.24em; animation:hxFade .7s ease 5.4s forwards; } /* bigger signature hugs up under the headline; slot reserved (no CLS) */
html.hx-js .hero-inner > .hsub{ transform:none; animation:hxFade .7s ease 5.75s forwards; }
.hero-wrap.hx-signing .hero-inner > .hscript{ opacity:1; animation:none; }
@keyframes hxRise{ to{ opacity:1; transform:none; } }
@keyframes hxSlide{ to{ transform:none; } }
@keyframes hxFade{ from{ opacity:0; } to{ opacity:1; } }

/* --- The signed-on signature (real Brittany Signature, written by a pen-mask) --- */
.hx-sign-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.hx-sign{ display:block; height:1.8em; width:auto; max-width:100%; overflow:visible; }
.hx-sign .sigtext{ fill:var(--accent,#FF6933); font-family:"Brittany Signature",cursive; font-weight:200; }
.hx-sign .wl{ fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.hero-wrap.hx-signing .hx-sign .wl{ animation:hxSignDraw 2.9s cubic-bezier(.45,.04,.28,.97) 2.2s forwards; }
.hx-sign .nib{ fill:var(--accent,#FF6933); opacity:0; offset-rotate:0deg; filter:drop-shadow(0 0 5px rgba(255,105,51,.75)); }
.hero-wrap.hx-signing .hx-sign .nib{ animation:hxNibMove 2.9s cubic-bezier(.45,.04,.28,.97) 2.2s forwards, hxNibFade 2.9s linear 2.2s forwards; }
@keyframes hxSignDraw{ to{ stroke-dashoffset:0; } }
@keyframes hxNibMove{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@keyframes hxNibFade{ 0%{ opacity:0; } 4%{ opacity:1; } 88%{ opacity:1; } 100%{ opacity:0; } }
@keyframes hxOrbSpin{ to{ transform:rotate(360deg); } }
@keyframes hxOrbPulse{ 0%{ transform:scale(.7); opacity:.55; } 70%{ opacity:0; } 100%{ transform:scale(2.1); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .hx-map,.hx-canvas,.hx-orb,.hx-ask,.hx-rail{ transition:none; }
  .hx-orb-ring,.hx-orb-pulse{ animation:none; }
  html.hx-js .hero-inner > *{ opacity:1; transform:none; animation:none; }
  .hero-wrap.hx-ready .hx-thames-flow{ animation:none; opacity:.5; }
  .hero-wrap.hx-ready .hx-river{ animation:none; stroke-dashoffset:0; }
  .hero-wrap.hx-ready .hx-map{ animation:none; filter:none; }
  .hx.focus .hx-map{ transition:none; }
  .hx-card{ transition:none; }
  .hx-spec{ display:none; }
  .hero-wrap.hx-signing .hx-sign .wl, .hero-wrap.hx-signing .hx-sign .nib{ animation:none; }
  .hx-sign .wl{ stroke-dashoffset:0; } .hx-sign .nib{ display:none; }
  html.hx-js .hero-inner > .hscript, html.hx-js .hero-inner > .hsub{ opacity:1; animation:none; } /* no held finale under reduced motion */
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .hx-ask{ background:rgba(246,241,231,.96); } }


/* === HWJ /student-lettings reimagined === */
/* ===================================================================== */
/* /student-lettings — reimagined. James-as-multilingual-concierge for     */
/* young international + UK students. Everything scoped under .slt (on       */
/* <main>); every class namespaced slt-*. Safe to append to global          */
/* styles.css — cannot collide with .tnt/.ovl/.cnd/.abt/.mtt/.vln/.rra etc. */
/* House design system: sand #ECE4D5 page, cream #F6F1E7 panels, dark        */
/* #262626 James/CTA blocks, Lato display + Sen body, AA contrast tokens     */
/* (--mut #5F5A50, --accent-ink #B23F11). Mono (system fallback) only on     */
/* James' AI status label + worked-example figures, mirroring /james.        */
/* All icons are pure CSS (currentColor) — no icon font is fetched.          */
/* ===================================================================== */

.slt{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --ramp-1:#FF6933;--ramp-2:#FF8C57;--ramp-3:#F2A35E;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.slt *{box-sizing:border-box}
.slt .slt-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.slt h1,.slt h2,.slt h3{margin:0;font-family:var(--display);color:var(--ink)}
.slt h1,.slt h2{letter-spacing:-.02em}
.slt h3{letter-spacing:-.01em}
.slt .slt-h1{font-weight:900;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1.0}
.slt .slt-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.1}
.slt .slt-dot{color:var(--accent)}
.slt .slt-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.slt .slt-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.slt .slt-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.slt .slt-deck{font-family:var(--display);font-weight:800;color:var(--ink);font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);line-height:1.22;letter-spacing:-.015em;max-width:30ch;margin:0 0 clamp(20px,2.6vw,30px);text-wrap:balance}
.slt a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.slt a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers (content-width 1.5px #C9C2B4) ────────── */
.slt .slt-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.slt .slt-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.slt .band-dark::before{display:none}
.slt .slt-prose{max-width:74ch}
.slt .slt-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.slt .slt-prose p:last-child{margin-bottom:0}
.slt .slt-prose strong{color:var(--ink);font-weight:700}
.slt .slt-pay-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px;max-width:80ch}
.slt .slt-pay-list li{position:relative;padding-left:24px;font-size:1.02rem;line-height:1.6}
.slt .slt-pay-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.slt .slt-pay-list strong{color:var(--ink)}

/* ── Pure-CSS icons (currentColor) ─────────────────────────────────── */
.slt .slt-i{display:inline-block;vertical-align:-.12em;box-sizing:border-box}
.slt .slt-i-arrow{width:.5em;height:.5em;border-top:2.2px solid currentColor;border-right:2.2px solid currentColor;transform:rotate(45deg)}
.slt .slt-i-globe{width:1em;height:1em;border:1.7px solid currentColor;border-radius:50%;position:relative}
.slt .slt-i-globe::before{content:"";position:absolute;left:50%;top:1px;bottom:1px;border-left:1.5px solid currentColor;transform:translateX(-50%)}
.slt .slt-i-globe::after{content:"";position:absolute;top:50%;left:1px;right:1px;border-top:1.5px solid currentColor;transform:translateY(-50%)}
.slt .slt-i-pin{width:.82em;height:.82em;border:1.7px solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(45deg);position:relative}
.slt .slt-i-pin::after{content:"";position:absolute;width:.28em;height:.28em;border-radius:50%;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ── Buttons ───────────────────────────────────────────────────────── */
.slt .slt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.slt .slt-btn:hover{transform:translateY(-1px)}
.slt .slt-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.slt .slt-btn-dark:hover{background:#000}
.slt .slt-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.slt .slt-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.slt .slt-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.slt .slt-btn-accent:hover{filter:brightness(.94)}
.slt .slt-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.slt .slt-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.slt a:focus-visible,.slt button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── HERO ───────────────────────────────────────────────────────────── */
.slt-hero{position:relative;padding-block:clamp(34px,6vw,68px) clamp(40px,6vw,72px)}
.slt-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4vw,56px);align-items:start}
.slt-hero-tx{min-width:0;align-self:center}
.slt-hero .slt-lede{font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);line-height:1.62;color:var(--body);max-width:58ch;margin:20px 0 0}
.slt-hero .slt-lede strong{color:var(--ink)}
.slt-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James stage (dark) + language picker + conversation (cream) */
.slt-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.slt-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.slt-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 84% 6%,rgba(255,105,51,.17),transparent 60%);pointer-events:none}
.slt-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.slt-who{margin-right:auto;min-width:0}
.slt-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.slt-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.slt-live{color:#7CC47C;font-size:.7em}
.slt-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA}
.slt-greet{font-family:var(--display);font-weight:800;color:#fff}

/* The orb (James presence; reused from /james) */
.slt-orb{position:relative;width:62px;height:62px;flex:none}
.slt-orb .slt-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.slt-orb .slt-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.slt-orb .slt-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.slt-orb .slt-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes sltPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes sltCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.slt-orb .slt-ring.r2{animation:sltPulse 2.6s var(--ease) infinite}
.slt-orb .slt-core{animation:sltCore 2.6s var(--ease) infinite}

/* Voice button */
.slt-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.slt-voice:hover{filter:brightness(.94)}
.slt-voice .slt-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.slt-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.slt-voice.is-listening .slt-mic{background:#10250f;animation:sltBlink 1s infinite}
@keyframes sltBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Language picker (the multilingual signature) */
.slt-langs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.slt-lang{font:600 .85rem/1 var(--sans);color:#EAE4DA;background:rgba(255,255,255,.05);border:1px solid var(--dark-line);border-radius:999px;padding:9px 13px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.slt-lang:hover{border-color:var(--accent);color:#fff}
.slt-lang.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.slt-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.slt-lang-cap{position:relative;z-index:1;margin:12px 0 0;font:400 .76rem/1.5 var(--sans);color:var(--dark-mut)}
html:not(.js) .slt-langs,html:not(.js) .slt-lang-cap{display:none}

/* Conversation panel */
.slt-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.slt-thread{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;padding:2px}
.slt-msgs{display:flex;flex-direction:column;gap:11px}
.slt-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.slt-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.slt-james-msg[dir="rtl"]{text-align:right}
.slt-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.slt-msg a{color:var(--accent-ink);font-weight:700}
.slt-msg .slt-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.slt-msg .slt-jump:hover{border-color:var(--accent)}
.slt-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.slt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.slt-chip{display:inline-flex;align-items:center;font:600 .82rem/1.15 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s;text-align:left}
.slt-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.slt-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.slt-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.slt-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.slt-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.slt-send:hover{background:var(--accent)}
.slt-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.slt-disclose a{color:var(--accent-ink)}
.slt-convo-fallback .slt-msg{max-width:100%}

/* ── REASSURANCE CARDS (promise section) ────────────────────────────── */
.slt-reassure{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:1fr;gap:14px}
.slt-rcard{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px;width:100%;display:flex;flex-direction:column}
.slt-rcard-ic{width:42px;height:42px;border-radius:50%;background:rgba(255,105,51,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink);margin-bottom:14px}
.slt-rcard-ic .slt-i{width:15px;height:9px;border:0;border-left:2.6px solid currentColor;border-bottom:2.6px solid currentColor;border-radius:0;transform:translateY(-2px) rotate(-45deg)}
.slt-rcard h3{font-weight:800;font-size:1.08rem;line-height:1.2;margin-bottom:8px}
.slt-rcard p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}

/* ── ELIGIBILITY FLIP (signature 2) ─────────────────────────────────── */
.slt-flip{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(12px,2vw,22px);margin:0 0 clamp(28px,4vw,40px);max-width:860px}
.slt-flip-card{border-radius:16px;padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;justify-content:center;gap:8px}
.slt-flip-was{background:var(--soft);border:1px solid var(--line)}
.slt-flip-now{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.slt-flip-now::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 90% 0,rgba(255,105,51,.2),transparent 60%);pointer-events:none}
.slt-flip-lbl{font:700 .7rem/1.1 var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.slt-flip-now .slt-flip-lbl{color:var(--accent);position:relative;z-index:1}
.slt-flip-fig{font:800 2rem/1.05 var(--display);letter-spacing:-.02em;color:var(--mut)}
.slt-flip-fig s{text-decoration-color:var(--accent);text-decoration-thickness:3px}
.slt-flip-fig-now{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);color:#fff;position:relative;z-index:1}
.slt-flip-sub{font-size:.9rem;line-height:1.45;color:var(--mut)}
.slt-flip-now .slt-flip-sub{color:var(--dark-mut);position:relative;z-index:1}
.slt-flip-arrow{align-self:center;color:var(--accent-ink);font-size:1.6rem}

/* ── COST VIZ (signature 3) ─────────────────────────────────────────── */
.slt-cost-intro{max-width:70ch;font-size:1.05rem;line-height:1.6;margin:0 0 clamp(22px,3vw,30px)}
.slt-cost-viz{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,34px);margin:0 0 clamp(26px,3vw,36px)}
.slt-cost-toggle{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;margin-bottom:clamp(20px,3vw,30px)}
.slt-ctog{font:700 .86rem/1 var(--display);color:var(--mut);background:none;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .18s,color .18s}
.slt-ctog.is-active{background:var(--dark);color:#fff}
.slt-ctog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Horizontal before/after bars — same left baseline, length tells the story */
.slt-cost-chart{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,22px)}
.slt-hbar-row{display:grid;grid-template-columns:minmax(96px,168px) minmax(0,1fr);gap:clamp(12px,2vw,20px);align-items:center}
.slt-hbar-head{display:flex;flex-direction:column;gap:2px}
.slt-hbar-ttl{font:800 .92rem/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.slt-hbar-sub{font:400 .76rem/1.3 var(--sans);color:var(--mut)}
.slt-hbar-track{display:flex;align-items:center;gap:12px;min-width:0}
.slt-hbar{height:clamp(34px,4.4vw,44px);border-radius:9px;flex:none;display:flex;align-items:center;overflow:hidden}
.slt-hbar-old{width:100%;background:var(--soft);border:1px solid var(--div);justify-content:flex-end}
.slt-hbar-new{width:26.3%;min-width:52px}
.slt-seg{height:100%}
.slt-seg-1{flex:2400 0 0;background:var(--ramp-1)}
.slt-seg-2{flex:2769 0 0;background:var(--ramp-2)}
.slt-seg-3{flex:2400 0 0;background:var(--ramp-3)}
.slt-hbar-fig{font:800 .98rem/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.slt-hbar-fig-in{color:var(--ink);padding-right:14px}
.slt-hbar-fig-new{color:var(--accent-ink);flex:none}
.slt-cost-headline{margin:clamp(22px,3vw,30px) 0 0;font:400 1.15rem/1.4 var(--sans);color:var(--body)}
.slt-cost-headline strong{font-family:var(--display);font-weight:800;color:var(--accent-ink)}
.slt-cost-legend{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:11px;max-width:60ch}
.slt-cost-legend li{display:flex;align-items:baseline;gap:10px;font-size:.96rem;line-height:1.4;color:var(--body)}
.slt-cost-legend b{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--ink);white-space:nowrap}
.slt-key{flex:none;width:12px;height:12px;border-radius:3px;align-self:center}
.slt-key-1{background:var(--ramp-1)}.slt-key-2{background:var(--ramp-2)}.slt-key-3{background:var(--ramp-3)}
.slt-key-note{color:var(--mut);font-size:.9rem;padding-left:22px}
.slt-key-note b{margin-left:0;font-family:var(--mono)}

/* ── FOR YOUR FAMILY ────────────────────────────────────────────────── */
.slt-family-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.slt-family-tx{max-width:none}
.slt-family-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.slt-family-points li{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;width:100%}
.slt-fp-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--dark);color:#fff;font:800 .9rem/28px var(--display);text-align:center}
.slt-family-points p{margin:0;font-size:.95rem;line-height:1.45;color:var(--body)}
.slt-family-points strong{color:var(--ink)}

/* ── APPLICATION JOURNEY (signature 4) ──────────────────────────────── */
.slt-apply-intro{max-width:72ch;font-size:1.05rem;line-height:1.6;margin:0 0 clamp(26px,4vw,38px)}
.slt-apply-after{margin-top:clamp(24px,3vw,34px)}
.slt-journey{display:grid;gap:clamp(22px,3vw,30px)}
.slt-steprail{list-style:none;margin:0;padding:0;display:flex}
.slt-steprail li{flex:1;position:relative;display:flex;justify-content:center}
.slt-steprail li + li::before{content:"";position:absolute;top:23px;right:50%;left:-50%;height:2px;background:var(--line);z-index:0}
.slt-steprail li.is-done + li::before{background:var(--accent)}
.slt-stepnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:0 4px;width:100%}
.slt-stepnum{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--cream);border:1.5px solid var(--div);color:var(--mut);
  font:800 1.15rem/1 var(--display);transition:background .2s,border-color .2s,color .2s,transform .2s}
.slt-steplbl{font:700 .76rem/1.15 var(--display);letter-spacing:-.01em;color:var(--mut);text-align:center;transition:color .2s}
.slt-stepnode:hover .slt-stepnum{border-color:var(--accent)}
.slt-steprail li.is-done .slt-stepnum{background:var(--accent);border-color:var(--accent);color:#fff}
.slt-steprail li.is-active .slt-stepnum{background:var(--dark);border-color:var(--dark);color:#fff;transform:scale(1.08);box-shadow:0 6px 18px rgba(38,38,38,.22)}
.slt-steprail li.is-active .slt-steplbl,.slt-steprail li.is-done .slt-steplbl{color:var(--ink)}

.slt-steppanels{position:relative}
.slt-steppanel{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px)}
.slt-steppanel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.js .slt-steppanel{display:none}
.js .slt-steppanel.is-open{display:block;animation:sltPanelIn .35s var(--ease)}
@keyframes sltPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slt-step-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.slt-step-index{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.slt-step-badge{display:inline-flex;align-items:center;gap:7px;font:700 .68rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.slt-badge-anywhere{color:var(--accent-ink);background:rgba(255,105,51,.09);border:1px solid rgba(178,63,17,.18)}
.slt-badge-london{color:#fff;background:var(--accent);border:1px solid var(--accent)}
.slt-step-h{font-weight:800;font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);line-height:1.14;margin-bottom:10px}
.slt-steppanel p{margin:0;font-size:1.04rem;line-height:1.62}

/* ── RIGHT TO RENT cards ────────────────────────────────────────────── */
.slt-rtr-intro{margin-bottom:clamp(22px,3vw,30px)}
.slt-rtr-grid{list-style:none;margin:0 0 clamp(22px,3vw,30px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-rows:1fr;gap:16px}
.slt-rtr-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%;display:flex;flex-direction:column}
.slt-rtr-card-warm{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.slt-rtr-h{font-weight:800;font-size:1.06rem;line-height:1.25;margin-bottom:10px}
.slt-rtr-card p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}

/* ── UNIVERSITIES + TIMING (signature 5) ────────────────────────────── */
.slt-unis-intro{margin-bottom:clamp(22px,3vw,30px)}
.slt-uni-grid{list-style:none;margin:0 0 clamp(20px,2.6vw,28px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr;gap:16px}
.slt-uni-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px;width:100%;display:flex;flex-direction:column}
.slt-uni-h{font-weight:800;font-size:1.05rem;line-height:1.2;margin-bottom:8px}
.slt-uni-card p{margin:0 0 16px;font-size:.94rem;line-height:1.5;color:var(--body)}
.slt-uni-link{margin-top:auto;align-self:flex-start;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.slt-uni-link:hover{color:var(--accent)}
.slt-unis-contact{margin-bottom:clamp(28px,4vw,40px)}

.slt-timing{margin:0 0 clamp(28px,4vw,40px)}
.slt-timing-track{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.slt-tphase{padding:clamp(16px,2vw,22px);position:relative;background:var(--cream)}
.slt-tphase + .slt-tphase{border-left:1px solid var(--line)}
.slt-tphase-go{background:rgba(124,196,124,.12)}
.slt-tphase-peak{background:rgba(255,105,51,.12)}
.slt-tphase-move{background:var(--dark);color:#fff}
.slt-tphase-when{display:block;font:700 .72rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.slt-tphase-move .slt-tphase-when{color:var(--accent)}
.slt-tphase-what{display:block;font:800 1.15rem/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:5px}
.slt-tphase-move .slt-tphase-what{color:#fff}
.slt-tphase-note{display:block;font-size:.85rem;line-height:1.4;color:var(--mut)}
.slt-tphase-move .slt-tphase-note{color:var(--dark-mut)}
.slt-timing-cap{margin:14px 0 0;font-size:.95rem;line-height:1.5;color:var(--mut)}

/* ── CONTACTS ───────────────────────────────────────────────────────── */
.slt-contacts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.slt-contact-col{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%}
.slt-contact-h{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.slt-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.slt-contact-list li{font-size:.98rem;line-height:1.5}
.slt-contact-list strong{color:var(--ink)}
.slt-related{max-width:78ch;margin-top:clamp(22px,3vw,30px)}
.slt-related p{margin:0;font-size:1rem;line-height:1.6;color:var(--body)}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.slt-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
/* Full-bleed band (matches /tenants): the global styles.css caps every
   <section> at max-width:1440px + auto margins, leaving sand around a dark
   band on >1440px monitors. Override so the band fills `main` (full-width). */
.slt .slt-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.slt-cta-in{display:flex;flex-direction:column;align-items:center}
.slt-orb-sm{width:56px;height:56px;margin-bottom:18px}
.slt-orb-sm .slt-core{inset:19px}
.slt .slt-cta-h{color:#fff;max-width:22ch}
.slt-cta-sub{margin:16px auto 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.slt-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.slt-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── MOTION (reveal) — JS-gated; reduced-motion safe ────────────────── */
.js .slt [data-reveal]{opacity:0;transform:translateY(16px)}
.slt [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .slt-steprail{display:none}
/* Cost bars grow from the left when the section reveals */
.js .slt-hbar{transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease) .12s}
.slt-cost.in .slt-hbar{transform:none}

@media(prefers-reduced-motion:reduce){
  .slt *,.slt *::before,.slt *::after{animation:none!important}
  .js .slt [data-reveal]{opacity:1;transform:none}
  .slt [data-reveal].in{transition:none}
  .js .slt-steppanel.is-open{animation:none}
  .js .slt-hbar{transform:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .slt-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .slt-hero-tx{align-self:auto}
  .slt-hero .slt-lede{max-width:none}
  .slt-family-grid{grid-template-columns:1fr;gap:clamp(22px,4vw,30px)}
}
@media(max-width:680px){
  .slt-flip{grid-template-columns:1fr;gap:12px}
  .slt-flip-arrow{transform:rotate(90deg)}
}
@media(max-width:640px){
  .slt-stage-top{flex-wrap:wrap}
  .slt-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .slt-steplbl{font-size:.66rem}
  .slt-stepnum{width:40px;height:40px;font-size:1rem}
  .slt-steprail li + li::before{top:20px}
  .slt-hero-cta .slt-btn{flex:1 1 auto;justify-content:center}
  .slt-cta-btns .slt-btn{flex:1 1 100%;justify-content:center}
  .slt-timing-track{grid-template-columns:1fr}
  .slt-tphase + .slt-tphase{border-left:0;border-top:1px solid var(--line)}
  .slt-hbar-row{grid-template-columns:1fr;gap:7px}
  .slt-hbar-head{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
}
@media(max-width:360px){
  .slt-steplbl{display:none}
}
/* Touch devices: ≥44px tap targets (house QA standard) */
@media(hover:none){
  .slt-chip,.slt-lang{min-height:44px}
  .slt-stepnum{width:44px;height:44px}
  .slt-steprail li + li::before{top:22px}
}


/* === HWJ /property-management reimagined === */
/* ===================================================================== */
/* /property-management — reimagined. James-led landlord "operator" page.  */
/* Everything scoped under .pm (on <main>); every class namespaced pm-*.    */
/* Safe to append to global styles.css — cannot collide with .slt/.tnt/     */
/* .ovl/.cnd/.abt/.mtt/.vln/.rra etc. House design system: sand #ECE4D5      */
/* page, cream #F6F1E7 panels, dark #262626 James/CTA blocks, Lato display + */
/* Sen body, AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono  */
/* (system fallback) only on James' AI status label + the evidence figures   */
/* and § references, mirroring /james + /day-one-price.                      */
/* ===================================================================== */

.pm{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.pm *{box-sizing:border-box}
.pm .pm-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.pm h1,.pm h2,.pm h3{margin:0;font-family:var(--display);color:var(--ink)}
.pm h1,.pm h2{letter-spacing:-.02em}
.pm h3{letter-spacing:-.01em}
.pm .pm-h1{font-weight:900;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1.0}
.pm .pm-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.1}
.pm .pm-dot{color:var(--accent)}
.pm .pm-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.pm .pm-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.pm .pm-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.pm a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.pm a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers ─────────────────────────────────────── */
.pm .pm-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.pm .pm-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.pm .band-dark::before{display:none}
.pm .pm-prose{max-width:74ch}
.pm .pm-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.pm .pm-prose p:last-child{margin-bottom:0}
.pm .pm-prose strong{color:var(--ink);font-weight:700}
.pm .pm-list{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:13px;max-width:80ch}
.pm .pm-list li{position:relative;padding-left:24px;font-size:1.02rem;line-height:1.6}
.pm .pm-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pm .pm-list strong{color:var(--ink)}

/* ── Buttons ───────────────────────────────────────────────────────── */
.pm .pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.pm .pm-btn:hover{transform:translateY(-1px)}
.pm .pm-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.pm .pm-btn-dark:hover{background:#000}
.pm .pm-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.pm .pm-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.pm .pm-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.pm .pm-btn-accent:hover{filter:brightness(.94)}
.pm .pm-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.pm .pm-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.pm a:focus-visible,.pm button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── HERO ───────────────────────────────────────────────────────────── */
.pm-hero{position:relative;padding-block:clamp(34px,6vw,68px) clamp(40px,6vw,72px)}
.pm-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:center}
.pm-hero-tx{min-width:0}
.pm-hero .pm-lede{font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);line-height:1.62;color:var(--body);max-width:60ch;margin:20px 0 0}
.pm-hero .pm-lede strong{color:var(--ink)}
.pm-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James operator stage */
.pm-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.pm-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.pm-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 84% 6%,rgba(255,105,51,.17),transparent 60%);pointer-events:none}
.pm-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.pm-who{margin-right:auto;min-width:0}
.pm-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.pm-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.pm-live{color:#7CC47C;font-size:.7em}
.pm-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA}

.pm-orb{position:relative;width:62px;height:62px;flex:none}
.pm-orb .pm-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.pm-orb .pm-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.pm-orb .pm-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.pm-orb .pm-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes pmPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes pmCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pm-orb .pm-ring.r2{animation:pmPulse 2.6s var(--ease) infinite}
.pm-orb .pm-core{animation:pmCore 2.6s var(--ease) infinite}

.pm-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.pm-voice:hover{filter:brightness(.94)}
.pm-voice .pm-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.pm-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.pm-voice.is-listening .pm-mic{background:#10250f;animation:pmBlink 1s infinite}
@keyframes pmBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Conversation panel */
.pm-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.pm-thread{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;padding:2px}
.pm-msgs{display:flex;flex-direction:column;gap:11px}
.pm-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.pm-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.pm-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.pm-msg a{color:var(--accent-ink);font-weight:700}
.pm-msg .pm-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.pm-msg .pm-jump:hover{border-color:var(--accent)}
.pm-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.pm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pm-chip{display:inline-flex;align-items:center;font:600 .82rem/1.15 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s;text-align:left}
.pm-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.pm-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.pm-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.pm-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.pm-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.pm-send:hover{background:var(--accent)}
.pm-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.pm-disclose a{color:var(--accent-ink)}
.pm-convo-fallback .pm-msg{max-width:100%}

/* ── EVIDENCE RIBBON (count-up, real stats.json) ────────────────────── */
.pm-ribbonwrap .pm-sec, .pm-ribbonwrap{padding-block:clamp(34px,4vw,52px)}
.pm-ribbon{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pm-ribbon li{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 20px;width:100%}
.pm-fig{display:block;font:800 clamp(2rem,1.4rem + 1.6vw,2.9rem)/1 var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.pm-fig-lbl{display:block;margin-top:8px;font-size:.9rem;line-height:1.35;color:var(--mut)}
.pm-ribbon-cap{margin:16px 0 0;font-size:.92rem;line-height:1.5;color:var(--mut);max-width:80ch}

/* ── FOUR PILLARS ───────────────────────────────────────────────────── */
.pm-full-intro{margin-bottom:clamp(24px,3vw,34px)}
.pm-pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-rows:1fr;gap:16px}
.pm-pillar{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%;display:flex;flex-direction:column;border-top:3px solid var(--accent)}
.pm-pillar-n{font:800 .95rem/1 var(--mono);color:var(--accent);letter-spacing:.06em;display:block;margin-bottom:12px}
.pm-pillar h3{font-weight:800;font-size:1.1rem;line-height:1.2;margin-bottom:10px}
.pm-pillar p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}

/* ── REPAIRS categories + compliance ledger ─────────────────────────── */
.pm-repairs-intro{margin-bottom:clamp(22px,3vw,30px)}
.pm-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-rows:1fr;gap:16px;margin-bottom:clamp(22px,3vw,30px)}
.pm-cat{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%}
.pm-cat-h{font-weight:800;font-size:1.06rem;line-height:1.25;margin-bottom:10px}
.pm-cat p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}
.pm-ledger{list-style:none;margin:0 0 clamp(20px,2.6vw,28px);padding:0;display:grid;gap:10px}
.pm-ledger li{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:start;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:15px 18px;width:100%}
.pm-led-cad{font:700 .72rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:rgba(255,105,51,.08);border:1px solid rgba(178,63,17,.16);border-radius:6px;padding:6px 9px;text-align:center;align-self:start}
.pm-ledger p{margin:0;font-size:.96rem;line-height:1.5;color:var(--body)}
.pm-ledger strong{color:var(--ink)}

/* ── DECISION-THRESHOLD SPLIT ───────────────────────────────────────── */
.pm-thr-intro{margin-bottom:clamp(24px,3vw,34px)}
.pm-split{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.pm-split-col{padding:clamp(22px,3vw,30px)}
.pm-split-do{background:var(--cream)}
.pm-split-ask{background:var(--dark);color:#EAE4DA}
.pm-split-h{font-weight:800;font-size:1.05rem;line-height:1.25;margin-bottom:12px;color:var(--ink)}
.pm-split-ask .pm-split-h{color:#fff}
.pm-split-col p{margin:0;font-size:.96rem;line-height:1.6}
.pm-split-pivot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#fff;padding:0 clamp(14px,2vw,22px);min-width:96px}
.pm-pivot-fig{font:900 clamp(1.4rem,1rem + 1.4vw,2rem)/1 var(--display);letter-spacing:-.02em}
.pm-pivot-lbl{font:700 .6rem/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.9;text-align:center}
.pm-thr-principle{margin-top:clamp(20px,2.6vw,28px);font-weight:600;color:var(--ink)}

/* ── ANNUAL-CYCLE TIMELINE (tablist year ribbon) ────────────────────── */
.pm-cycle-intro{margin-bottom:clamp(26px,3.4vw,38px)}
.pm-timeline{display:grid;gap:clamp(20px,2.6vw,28px)}
.pm-cyclerail{list-style:none;margin:0;padding:0;display:flex}
.pm-cyclerail li{flex:1;position:relative;display:flex;justify-content:center}
.pm-cyclerail li + li::before{content:"";position:absolute;top:14px;right:50%;left:-50%;height:2px;background:var(--line);z-index:0}
.pm-cyclerail li.is-done + li::before{background:var(--accent)}
.pm-cyclenode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0 4px;width:100%}
.pm-cyclenode::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--div);transition:background .2s,border-color .2s,transform .2s}
.pm-cyclerail li.is-done .pm-cyclenode::before{background:var(--accent);border-color:var(--accent)}
.pm-cyclerail li.is-active .pm-cyclenode::before{background:var(--dark);border-color:var(--dark);transform:scale(1.3)}
.pm-cyc-when{font:800 .92rem/1 var(--display);letter-spacing:-.01em;color:var(--mut);transition:color .2s}
.pm-cyc-lbl{font:600 .72rem/1.15 var(--sans);color:var(--mut);text-align:center;transition:color .2s}
.pm-cyclenode:hover .pm-cyc-when{color:var(--accent-ink)}
.pm-cyclerail li.is-active .pm-cyc-when,.pm-cyclerail li.is-done .pm-cyc-when{color:var(--ink)}
.pm-cyclerail li.is-active .pm-cyc-lbl{color:var(--ink)}
.pm-phasepanel{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px)}
.pm-phasepanel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.js .pm-phasepanel{display:none}
.js .pm-phasepanel.is-open{display:block;animation:pmPanelIn .35s var(--ease)}
@keyframes pmPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pm-phase-h{font-weight:800;font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem);line-height:1.14;margin-bottom:12px}
.pm-phasepanel p{margin:0;font-size:1.04rem;line-height:1.62}
.pm-cycle-after{margin-top:clamp(20px,2.6vw,28px);border-left:2px solid var(--div);padding-left:18px;color:var(--body)}
.pm-cycle-after strong{color:var(--ink)}

/* ── OPTIONS (2 cards) ──────────────────────────────────────────────── */
.pm-opt-intro{margin-bottom:clamp(22px,3vw,30px)}
.pm-opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-rows:1fr;gap:16px;margin-bottom:clamp(20px,2.6vw,28px)}
.pm-opt{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:26px;width:100%;display:flex;flex-direction:column}
.pm-opt-n{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.pm-opt h3{font-weight:800;font-size:1.12rem;line-height:1.22;margin-bottom:10px}
.pm-opt p{margin:0;font-size:.96rem;line-height:1.55;color:var(--body)}

/* ── TENANT EXPECTATIONS LIST ───────────────────────────────────────── */
.pm-tnt-intro{margin-bottom:clamp(20px,2.6vw,28px)}
.pm-tnt-list{list-style:none;margin:0 0 clamp(20px,2.6vw,28px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.pm-tnt-list li{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:18px 20px;width:100%;font-size:.97rem;line-height:1.55;color:var(--body);border-left:3px solid var(--accent)}
.pm-tnt-list strong{color:var(--ink)}

/* ── CONTACTS ───────────────────────────────────────────────────────── */
.pm-contacts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:clamp(20px,2.6vw,28px)}
.pm-contact-col{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%}
.pm-contact-h{font:700 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.pm-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.pm-contact-list li{font-size:.98rem;line-height:1.5}
.pm-contact-list strong{color:var(--ink)}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.pm-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
.pm .pm-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.pm-cta-in{display:flex;flex-direction:column;align-items:center}
.pm-orb-sm{width:56px;height:56px;margin-bottom:18px}
.pm-orb-sm .pm-core{inset:19px}
.pm .pm-cta-h{color:#fff;max-width:22ch}
.pm-cta-sub{margin:16px auto 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.pm-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.pm-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── MOTION (reveal + count-up) — JS-gated; reduced-motion safe ─────── */
.js .pm [data-reveal]{opacity:0;transform:translateY(16px)}
.pm [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .pm-cyclerail{display:none}

@media(prefers-reduced-motion:reduce){
  .pm *,.pm *::before,.pm *::after{animation:none!important}
  .js .pm [data-reveal]{opacity:1;transform:none}
  .pm [data-reveal].in{transition:none}
  .js .pm-phasepanel.is-open{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .pm-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);align-items:stretch}
  .pm-hero .pm-lede{max-width:none}
  .pm-ribbon{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pm-split{grid-template-columns:1fr}
  .pm-split-pivot{flex-direction:row;gap:10px;padding:12px;min-width:0}
}
@media(max-width:640px){
  .pm-stage-top{flex-wrap:wrap}
  .pm-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .pm-hero-cta .pm-btn{flex:1 1 auto;justify-content:center}
  .pm-cta-btns .pm-btn{flex:1 1 100%;justify-content:center}
  .pm-cyc-lbl{display:none}
  .pm-cyc-when{font-size:.8rem}
  .pm-ledger li{grid-template-columns:1fr;gap:8px}
  .pm-led-cad{justify-self:start}
}
@media(max-width:460px){
  .pm-ribbon{grid-template-columns:1fr 1fr;gap:12px}
}
/* Touch devices: ≥44px tap targets */
@media(hover:none){
  .pm-chip{min-height:44px}
  .pm-cyclenode{padding-block:6px}
}


/* === HWJ /aftercare reimagined === */
/* ===================================================================== */
/* /property-management — reimagined. James-led landlord "operator" page.  */
/* Everything scoped under .afc (on <main>); every class namespaced afc-*.    */
/* Safe to append to global styles.css — cannot collide with .slt/.tnt/     */
/* .ovl/.cnd/.abt/.mtt/.vln/.rra etc. House design system: sand #ECE4D5      */
/* page, cream #F6F1E7 panels, dark #262626 James/CTA blocks, Lato display + */
/* Sen body, AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono  */
/* (system fallback) only on James' AI status label + the evidence figures   */
/* and § references, mirroring /james + /day-one-price.                      */
/* ===================================================================== */

.afc{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.afc *{box-sizing:border-box}
.afc .afc-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.afc h1,.afc h2,.afc h3{margin:0;font-family:var(--display);color:var(--ink)}
.afc h1,.afc h2{letter-spacing:-.02em}
.afc h3{letter-spacing:-.01em}
.afc .afc-h1{font-weight:900;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1.0}
.afc .afc-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.1}
.afc .afc-dot{color:var(--accent)}
.afc .afc-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.afc .afc-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.afc .afc-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.afc a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.afc a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers ─────────────────────────────────────── */
.afc .afc-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.afc .afc-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.afc .band-dark::before{display:none}
.afc .afc-prose{max-width:74ch}
.afc .afc-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.afc .afc-prose p:last-child{margin-bottom:0}
.afc .afc-prose strong{color:var(--ink);font-weight:700}
.afc .afc-list{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:13px;max-width:80ch}
.afc .afc-list li{position:relative;padding-left:24px;font-size:1.02rem;line-height:1.6}
.afc .afc-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.afc .afc-list strong{color:var(--ink)}

/* ── Buttons ───────────────────────────────────────────────────────── */
.afc .afc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.afc .afc-btn:hover{transform:translateY(-1px)}
.afc .afc-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.afc .afc-btn-dark:hover{background:#000}
.afc .afc-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.afc .afc-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.afc .afc-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.afc .afc-btn-accent:hover{filter:brightness(.94)}
.afc .afc-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.afc .afc-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.afc a:focus-visible,.afc button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── HERO ───────────────────────────────────────────────────────────── */
.afc-hero{position:relative;padding-block:clamp(34px,6vw,68px) clamp(40px,6vw,72px)}
.afc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:center}
.afc-hero-tx{min-width:0}
.afc-hero .afc-lede{font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);line-height:1.62;color:var(--body);max-width:60ch;margin:20px 0 0}
.afc-hero .afc-lede strong{color:var(--ink)}
.afc-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James operator stage */
.afc-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.afc-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.afc-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 84% 6%,rgba(255,105,51,.17),transparent 60%);pointer-events:none}
.afc-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.afc-who{margin-right:auto;min-width:0}
.afc-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.afc-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.afc-live{color:#7CC47C;font-size:.7em}
.afc-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA}

.afc-orb{position:relative;width:62px;height:62px;flex:none}
.afc-orb .afc-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.afc-orb .afc-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.afc-orb .afc-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.afc-orb .afc-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes afcPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes afcCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.afc-orb .afc-ring.r2{animation:afcPulse 2.6s var(--ease) infinite}
.afc-orb .afc-core{animation:afcCore 2.6s var(--ease) infinite}

.afc-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  min-height:44px;padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.afc-voice:hover{filter:brightness(.94)}
.afc-voice .afc-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.afc-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.afc-voice.is-listening .afc-mic{background:#10250f;animation:afcBlink 1s infinite}
@keyframes afcBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Conversation panel */
.afc-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.afc-thread{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;padding:2px}
.afc-msgs{display:flex;flex-direction:column;gap:11px}
.afc-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.afc-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.afc-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.afc-msg a{color:var(--accent-ink);font-weight:700}
.afc-msg .afc-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.afc-msg .afc-jump:hover{border-color:var(--accent)}
.afc-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.afc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.afc-chip{display:inline-flex;align-items:center;font:600 .82rem/1.15 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s;text-align:left}
.afc-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.afc-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.afc-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.afc-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.afc-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.afc-send:hover{background:var(--accent)}
.afc-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.afc-disclose a{color:var(--accent-ink)}
.afc-convo-fallback .afc-msg{max-width:100%}

/* ── TRIGGERS (Director Review trigger checklist) ───────────────────── */
.afc-trig-intro{margin-bottom:clamp(22px,3vw,30px)}
.afc-triggers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.afc-triggers li{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px 16px 46px;font-size:.98rem;line-height:1.55;color:var(--body);width:100%}
.afc-triggers li::before{content:"";position:absolute;left:18px;top:17px;width:16px;height:16px;border-radius:50%;border:2px solid var(--accent);background:radial-gradient(circle at 50% 50%,var(--accent) 0 3.5px,transparent 4.5px)}
.afc-trig-after{margin-top:clamp(20px,2.6vw,28px);border-left:2px solid var(--div);padding-left:18px;color:var(--ink);font-weight:600}

/* ── SIGNATURE 1: THE ESCALATION LADDER (vertical ARIA tablist) ─────── */
.afc-ladder-intro{margin-bottom:clamp(24px,3vw,34px)}
.afc-ladder{display:grid;grid-template-columns:minmax(190px,260px) 1fr;gap:clamp(18px,2.6vw,32px);align-items:start}
.afc-rungs{list-style:none;margin:0;padding:0;position:relative}
.afc-rungs::before{content:"";position:absolute;left:8px;top:20px;bottom:20px;width:2px;background:var(--line)}
.afc-rungs li{position:relative}
.afc-rung{position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;border-radius:10px;padding:13px 14px 13px 34px;cursor:pointer;text-align:left;transition:background .2s}
.afc-rung::before{content:"";position:absolute;left:1px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--div);transition:background .2s,border-color .2s,transform .2s}
.afc-rung:hover{background:var(--cream)}
.afc-rungs li.is-done .afc-rung::before{background:var(--accent);border-color:var(--accent)}
.afc-rung.is-active{background:var(--cream);box-shadow:inset 3px 0 0 var(--accent)}
.afc-rung.is-active::before{background:var(--dark);border-color:var(--dark);transform:scale(1.25)}
.afc-rung-fig{font:800 1.02rem/1.15 var(--display);letter-spacing:-.01em;color:var(--mut);transition:color .2s}
.afc-rung:hover .afc-rung-fig,.afc-rung.is-active .afc-rung-fig{color:var(--ink)}
.afc-rung-lbl{font:600 .76rem/1.2 var(--sans);color:var(--mut);transition:color .2s}
.afc-rung.is-active .afc-rung-lbl{color:var(--accent-ink)}
.afc-bandpanel{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px)}
.afc-bandpanel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.afc-band-h{margin:0 0 12px}
.afc-band-h strong{font:800 clamp(1.3rem,1.05rem + 1vw,1.85rem)/1.12 var(--display);letter-spacing:-.02em;color:var(--ink)}
.afc-bandpanel p:not(.afc-band-h){margin:0;font-size:1.06rem;line-height:1.62;color:var(--body)}
.js .afc-bandpanel{display:none}
.js .afc-bandpanel.is-open{display:block;animation:afcPanelIn .35s var(--ease)}
@keyframes afcPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .afc-bandpanel{margin-bottom:12px}
.afc-ladder-after{margin-top:clamp(22px,2.8vw,30px);border-left:2px solid var(--div);padding-left:18px;color:var(--ink);font-weight:600}

/* ── WHAT DIRECTOR REVIEW MEANS — the evidence pack ─────────────────── */
.afc-review-intro{margin-bottom:clamp(18px,2.4vw,26px)}
.afc-pack{list-style:none;margin:0 0 clamp(18px,2.4vw,26px);padding:0;display:flex;flex-wrap:wrap;gap:9px}
.afc-pack li{position:relative;font:600 .85rem/1.2 var(--sans);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:9px 15px 9px 30px;color:var(--ink)}
.afc-pack li::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:2px;background:var(--accent)}

/* ── SIGNATURE 2: THE SEVEN CATEGORIES (matrix) ─────────────────────── */
.afc-cat-intro{margin-bottom:clamp(22px,3vw,32px)}
.afc-cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr;gap:16px}
.afc-cat{position:relative;background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--div);border-radius:14px;padding:34px 22px 22px;width:100%;display:flex;flex-direction:column}
.afc-cat-n{position:absolute;top:18px;left:22px;font:800 .8rem/1 var(--mono);letter-spacing:.04em;color:var(--accent-ink)}
.afc-cat-stance{position:absolute;top:15px;right:16px;font:700 .6rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--mut)}
.afc-cat-h{font-weight:800;font-size:1.04rem;line-height:1.25;margin:6px 0 10px}
.afc-cat p{margin:0;font-size:.95rem;line-height:1.55;color:var(--body)}
.afc-cat-claim{border-left-color:var(--accent)}
.afc-cat-claim .afc-cat-stance{color:var(--accent-ink);border-color:rgba(178,63,17,.3);background:rgba(255,105,51,.09)}
.afc-cat-part{border-left-color:#D98A4E}
.afc-cat-land{border-left-color:var(--mut)}
.afc-cat-fwt{border-left-color:var(--div)}
.afc-cat-eve{border-left-style:dashed;border-left-color:var(--mut)}

/* priority legend (the second dimension) */
.afc-prio{margin-top:clamp(24px,3vw,34px);background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2.4vw,26px)}
.afc-prio-lead{margin:0 0 12px;font-weight:700;color:var(--ink);font-size:1rem}
.afc-prio-chips{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.afc-prio-chips li{font:700 .76rem/1.2 var(--display);letter-spacing:.01em;border-radius:999px;padding:9px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-transform:capitalize}
.afc-prio-chips li:first-child{border-color:rgba(178,63,17,.35);color:var(--accent-ink);background:rgba(255,105,51,.09)}
.afc-prio-note{margin:0;color:var(--body)}

/* ── APPROVAL PULL-QUOTE ────────────────────────────────────────────── */
.afc-quote{margin:clamp(20px,2.6vw,28px) 0;background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:clamp(22px,3vw,32px);box-shadow:0 10px 30px rgba(0,0,0,.05)}
.afc-quote p{margin:0;font-size:1.1rem;line-height:1.62;color:var(--ink);font-style:italic}

/* ── WHERE TO LOOK NEXT + SOURCES ───────────────────────────────────── */
.afc-nextgrid{list-style:none;margin:0 0 clamp(24px,3vw,36px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.afc-nextgrid li{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:18px 20px;width:100%;font-size:.96rem;line-height:1.55;color:var(--body)}
.afc-nextgrid a{font-weight:700}
.afc-sources-h{margin-bottom:8px}

/* ── COMPONENT RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:760px){
  .afc-ladder{grid-template-columns:1fr;gap:16px}
}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.afc-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
.afc .afc-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.afc-cta-in{display:flex;flex-direction:column;align-items:center}
.afc-orb-sm{width:56px;height:56px;margin-bottom:18px}
.afc-orb-sm .afc-core{inset:19px}
.afc .afc-cta-h{color:#fff;max-width:22ch}
.afc-cta-sub{margin:16px auto 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.afc-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.afc-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── MOTION (reveal + count-up) — JS-gated; reduced-motion safe ─────── */
.js .afc [data-reveal]{opacity:0;transform:translateY(16px)}
.afc [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .afc-rungs{display:none}

@media(prefers-reduced-motion:reduce){
  .afc *,.afc *::before,.afc *::after{animation:none!important}
  .js .afc [data-reveal]{opacity:1;transform:none}
  .afc [data-reveal].in{transition:none}
  .js .afc-bandpanel.is-open{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .afc-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);align-items:stretch}
  .afc-hero .afc-lede{max-width:none}
}

@media(max-width:640px){
  .afc-stage-top{flex-wrap:wrap}
  .afc-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .afc-hero-cta .afc-btn{flex:1 1 auto;justify-content:center}
  .afc-cta-btns .afc-btn{flex:1 1 100%;justify-content:center}
}

/* Touch devices: ≥44px tap targets */
@media(hover:none){
  .afc-chip{min-height:44px}
}


/* === HWJ /contact valuation CTA === */
.cnt .cnt-hero-cta{ margin-top:22px; display:flex; align-items:center; gap:14px 16px; flex-wrap:wrap; }
.cnt .cnt-hero-cta-note{ font-size:.95rem; line-height:1.45; color:var(--mut); max-width:34ch; }


/* === HWJ /valuation form v2 (property + scheduler) === */
/* === /valuation booking form v2 — property details + visit scheduler === */
.vln .vln-book-panel select{ width:100%; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:13px 15px; font:400 15px/1.4 var(--sans); color:var(--ink); cursor:pointer; }
html.js .vln .vln-book-panel select{ transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.vln .vln-book-panel select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.vln .vln-book-panel input[type=date]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
/* Fieldsets are SECTIONS: block flow (NOT flex) so empty validation notes collapse cleanly + the <legend> never hugs. */
.vln .vln-fset{ border:0; padding:0; margin:13px 0 0; min-width:0; }   /* +13px form flex-gap = 26px section break (symmetric) */
.vln .vln-fset > * + *{ margin-top:13px; }                            /* one rhythm for every row AND the legend->first-field gap */
.vln .vln-leg{ font:800 12px/1 var(--display); letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); padding:0; margin:0; }
.vln .vln-f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.vln .vln-f .vln-flab{ font:600 13px/1.2 var(--sans); color:var(--mut); }
.vln .vln-enq-row-3{ grid-template-columns:1fr 1fr 1fr; }
.vln .vln-pc-note,.vln .vln-date-note{ font:500 13px/1.45 var(--sans); color:var(--mut); margin:5px 0 0; }  /* tight to the field it annotates; 0-height + margin-collapses when empty */
.vln .vln-pc-note.ok,.vln .vln-date-note.ok{ color:var(--accent-ink); }
.vln .vln-pc-note.warn,.vln .vln-date-note.warn{ color:#b00020; }
.vln .vln-pref{ display:flex; flex-wrap:wrap; gap:10px; }
.vln .vln-radio{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:10px 16px; font:600 14px/1 var(--sans); color:var(--ink); min-height:44px; }
.vln .vln-radio input{ width:auto; -webkit-appearance:auto; appearance:auto; border:0; padding:0; border-radius:0; box-shadow:none; accent-color:var(--accent); margin:0; }
.vln .vln-radio:has(input:checked){ border-color:var(--accent); color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 9%,var(--paper)); }
.vln #vln-sched[hidden]{ display:none; }
.vln .vln-visit-note{ font:400 13px/1.5 var(--sans); color:var(--mut); }
@media (max-width:560px){
  .vln .vln-enq-row-3{ grid-template-columns:1fr; }
  .vln .vln-pref{ flex-direction:column; align-items:stretch; }
  .vln .vln-radio{ justify-content:flex-start; }
}
/* address autocomplete dropdown (Google Places via our proxy) */
.vln .vln-ac-wrap{ position:relative; }
.vln .vln-ac-list{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px); margin:0; padding:6px; list-style:none; background:var(--cream); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.12); max-height:282px; overflow:auto; }
.vln .vln-ac-item{ display:flex; flex-direction:column; gap:1px; padding:9px 11px; border-radius:8px; cursor:pointer; }
.vln .vln-ac-item[aria-selected="true"],.vln .vln-ac-item:hover{ background:color-mix(in srgb,var(--accent) 12%,var(--cream)); }
.vln .vln-ac-main{ font:600 14px/1.3 var(--sans); color:var(--ink); }
.vln .vln-ac-sec{ font:400 12.5px/1.3 var(--sans); color:var(--mut); }


/* ===== /refresh-cycle (.rfc) — S13 reimagined, appended 2026-06-21 ===== */
/* ===================================================================== */
/* /refresh-cycle — reimagined. James-led ("refresh desk") landlord page.   */
/* Everything scoped under .rfc (on <main>); every class namespaced rfc-*.    */
/* Safe to append to global styles.css — cannot collide with .afc/.slt/.tnt/ */
/* .ovl/.cnd/.pm/.dep etc. House design system: sand #ECE4D5 page,           */
/* cream #F6F1E7 panels, dark #262626 James/CTA blocks, Lato display + Sen    */
/* body, AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono       */
/* (system fallback) only on James' AI status label, the void figures, the    */
/* day stamps and § references — mirroring /aftercare + /day-one-price.       */
/* ===================================================================== */

.rfc{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.rfc *{box-sizing:border-box}
.rfc .rfc-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.rfc h1,.rfc h2,.rfc h3{margin:0;font-family:var(--display);color:var(--ink)}
.rfc h1,.rfc h2{letter-spacing:-.02em}
.rfc h3{letter-spacing:-.01em}
.rfc .rfc-h1{font-weight:900;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1.02}
.rfc .rfc-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.1}
.rfc .rfc-dot{color:var(--accent)}
.rfc .rfc-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.rfc .rfc-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.rfc .rfc-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.rfc a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.rfc a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers ─────────────────────────────────────── */
.rfc .rfc-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.rfc .rfc-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.rfc .band-dark::before{display:none}
.rfc .rfc-prose{max-width:74ch}
.rfc .rfc-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.rfc .rfc-prose p:last-child{margin-bottom:0}
.rfc .rfc-prose strong{color:var(--ink);font-weight:700}
.rfc .rfc-list{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:13px;max-width:80ch}
.rfc .rfc-list li{position:relative;padding-left:24px;font-size:1.02rem;line-height:1.6}
.rfc .rfc-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.rfc .rfc-list strong{color:var(--ink)}

/* ── Buttons ───────────────────────────────────────────────────────── */
.rfc .rfc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.rfc .rfc-btn:hover{transform:translateY(-1px)}
.rfc .rfc-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.rfc .rfc-btn-dark:hover{background:#000}
.rfc .rfc-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.rfc .rfc-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.rfc .rfc-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.rfc .rfc-btn-accent:hover{filter:brightness(.94)}
.rfc .rfc-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.rfc .rfc-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.rfc a:focus-visible,.rfc button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── HERO ───────────────────────────────────────────────────────────── */
.rfc-hero{position:relative;padding-block:clamp(34px,6vw,68px) clamp(40px,6vw,72px)}
.rfc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:center}
.rfc-hero-tx{min-width:0}
.rfc-hero .rfc-lede{font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);line-height:1.62;color:var(--body);max-width:60ch;margin:20px 0 0}
.rfc-hero .rfc-lede strong{color:var(--ink)}
.rfc-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James operator stage */
.rfc-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.rfc-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.rfc-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 84% 6%,rgba(255,105,51,.17),transparent 60%);pointer-events:none}
.rfc-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.rfc-who{margin-right:auto;min-width:0}
.rfc-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.rfc-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.rfc-live{color:#7CC47C;font-size:.7em}
.rfc-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA}

.rfc-orb{position:relative;width:62px;height:62px;flex:none}
.rfc-orb .rfc-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.rfc-orb .rfc-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.rfc-orb .rfc-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.rfc-orb .rfc-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes rfcPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes rfcCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.rfc-orb .rfc-ring.r2{animation:rfcPulse 2.6s var(--ease) infinite}
.rfc-orb .rfc-core{animation:rfcCore 2.6s var(--ease) infinite}

.rfc-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  min-height:44px;padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.rfc-voice:hover{filter:brightness(.94)}
.rfc-voice .rfc-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.rfc-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.rfc-voice.is-listening .rfc-mic{background:#10250f;animation:rfcBlink 1s infinite}
@keyframes rfcBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Conversation panel */
.rfc-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.rfc-thread{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;padding:2px}
.rfc-msgs{display:flex;flex-direction:column;gap:11px}
.rfc-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.rfc-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.rfc-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.rfc-msg a{color:var(--accent-ink);font-weight:700}
.rfc-msg .rfc-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.rfc-msg .rfc-jump:hover{border-color:var(--accent)}
.rfc-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.rfc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.rfc-chip{display:inline-flex;align-items:center;font:600 .82rem/1.15 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s;text-align:left}
.rfc-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.rfc-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.rfc-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.rfc-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.rfc-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.rfc-send:hover{background:var(--accent)}
.rfc-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.rfc-disclose a{color:var(--accent-ink)}
.rfc-convo-fallback .rfc-msg{max-width:100%}

/* ── SIGNATURE: THE VOID-COST HOOK ──────────────────────────────────── */
/* "Void days are the landlord's money." The opening figure callout — every
   number is verbatim (15 days · £3,500/mo · ~£1,700 lost · £150–£200). */
.rfc-void{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,3.4vw,46px);align-items:center}
.rfc-void-tx{min-width:0}
.rfc-void-tx .rfc-prose{max-width:54ch}
.rfc-meter{background:var(--dark);border-radius:18px;padding:clamp(22px,2.8vw,32px);color:#fff;position:relative;overflow:hidden}
.rfc-meter::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 90% 0%,rgba(255,105,51,.16),transparent 62%);pointer-events:none}
.rfc-meter-h{position:relative;z-index:1;font:700 .68rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-mut);margin:0 0 14px}
.rfc-vdays{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:5px;margin:0 0 18px}
.rfc-vdays span{width:14px;height:22px;border-radius:3px;background:rgba(255,255,255,.12);border:1px solid var(--dark-line)}
.rfc-vdays span.lost{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(255,105,51,.45)}
.rfc-vfig{position:relative;z-index:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rfc-vnum{font:900 clamp(2.6rem,1.6rem + 3vw,3.7rem)/1 var(--display);letter-spacing:-.02em;color:#fff}
.rfc-vnum .rfc-vp{color:var(--accent)}
.rfc-vunit{font:700 .9rem/1.3 var(--sans);color:var(--dark-mut)}
.rfc-vsub{position:relative;z-index:1;margin:14px 0 0;font-size:.95rem;line-height:1.55;color:#EAE4DA}
.rfc-vsub strong{color:#fff}

/* ── SIGNATURE: THE MINOR / MAJOR TWO-TRACK SPLIT ───────────────────── */
.rfc-tracks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,22px);margin-top:clamp(8px,1.6vw,18px)}
.rfc-track{position:relative;background:var(--cream);border:1px solid var(--line);border-top:3px solid var(--div);border-radius:16px;padding:clamp(22px,2.6vw,30px);width:100%;display:flex;flex-direction:column}
.rfc-track-major{border-top-color:var(--accent)}
.rfc-track-tag{font:700 .64rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:8px;margin:0 0 6px}
.rfc-track-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--div)}
.rfc-track-major .rfc-track-tag{color:var(--accent-ink)}
.rfc-track-major .rfc-track-tag::before{background:var(--accent)}
.rfc-track-h{font-weight:800;font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);line-height:1.1;margin:0 0 6px}
.rfc-track-lead{margin:0 0 16px;font-size:.96rem;line-height:1.5;color:var(--mut)}
.rfc-track p{margin:0;font-size:1rem;line-height:1.6;color:var(--body)}
.rfc-track-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.rfc-track-meta span{font:600 .76rem/1.2 var(--sans);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--ink)}
.rfc-track-major .rfc-track-meta span.key{border-color:rgba(178,63,17,.32);color:var(--accent-ink);background:rgba(255,105,51,.08)}
.rfc-tracks-after{margin-top:clamp(20px,2.6vw,28px);border-left:2px solid var(--div);padding-left:18px;color:var(--ink);font-weight:600;max-width:78ch}

/* ── SIGNATURE: THE DUAL-TRACK TEN-DAY TIMELINE ─────────────────────── */
.rfc-timeline-intro{margin-bottom:clamp(22px,3vw,32px)}
.rfc-tl{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.6vw,30px);box-shadow:0 10px 30px rgba(0,0,0,.05)}

/* Marketing lane (Lettings) — the parallel track, rendered above the works
   stepper as labelled context. Decorative summary of the verbatim four-week
   window paragraph that follows in prose. */
.rfc-lane{position:relative;border:1px dashed var(--div);border-radius:14px;padding:16px 18px 18px;margin-bottom:22px;background:var(--paper)}
.rfc-lane-h{font:700 .66rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 16px;display:flex;align-items:center;gap:9px}
.rfc-lane-h .rfc-team{color:var(--accent-ink)}
.rfc-lane-rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rfc-lane-rail::before{content:"";position:absolute;left:6%;right:6%;top:6px;height:2px;background:repeating-linear-gradient(90deg,var(--div) 0 8px,transparent 8px 14px)}
.rfc-node{position:relative;padding-top:22px;font-size:.84rem;line-height:1.4;color:var(--body)}
.rfc-node::before{content:"";position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--div)}
.rfc-node b{display:block;font:800 .82rem/1.2 var(--display);letter-spacing:.01em;color:var(--ink);margin-bottom:2px}
.rfc-node-end{text-align:right}
.rfc-node-end::before{left:auto;right:0;background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(255,105,51,.5)}
.rfc-node-end b{color:var(--accent-ink)}

.rfc-converge{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 0 18px;font:700 .72rem/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.rfc-converge::before,.rfc-converge::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--div))}
.rfc-converge::after{background:linear-gradient(90deg,var(--div),transparent)}

/* Works track (Aftercare) — horizontal ARIA tablist of the day stamps. */
.rfc-works-h{font:700 .66rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.rfc-works-h .rfc-team{color:var(--accent-ink)}
.rfc-days{list-style:none;margin:0 0 18px;padding:0;position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.rfc-days::before{content:"";position:absolute;left:5%;right:5%;top:13px;height:2px;background:var(--line);z-index:0}
.rfc-days li{position:relative;z-index:1}
.rfc-day{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:24px;background:none;border:0;padding:0 2px 8px;cursor:pointer;text-align:center;transition:transform .2s}
.rfc-day::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--div);transition:background .2s,border-color .2s,transform .2s}
.rfc-day:hover::before{border-color:var(--accent)}
.rfc-days li.is-done .rfc-day::before{background:var(--accent);border-color:var(--accent)}
.rfc-day.is-active::before{background:var(--dark);border-color:var(--dark);transform:scale(1.3)}
.rfc-day-fig{font:800 .82rem/1.1 var(--display);letter-spacing:-.01em;color:var(--mut);transition:color .2s}
.rfc-day:hover .rfc-day-fig,.rfc-day.is-active .rfc-day-fig{color:var(--ink)}
.rfc-day-lbl{font:600 .68rem/1.15 var(--sans);color:var(--mut);transition:color .2s}
.rfc-day.is-active .rfc-day-lbl{color:var(--accent-ink)}

.rfc-daypanels{position:relative}
.rfc-daypanel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2.4vw,26px)}
.rfc-daypanel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rfc-daypanel .rfc-dp-day{font:800 .76rem/1 var(--mono);letter-spacing:.04em;color:var(--accent-ink);text-transform:uppercase;margin:0 0 8px}
.rfc-daypanel p:not(.rfc-dp-day){margin:0;font-size:1.05rem;line-height:1.62;color:var(--body)}
.js .rfc-daypanel{display:none}
.js .rfc-daypanel.is-open{display:block;animation:rfcPanelIn .35s var(--ease)}
@keyframes rfcPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .rfc-daypanel{margin-bottom:10px}
.rfc-tl-after{margin-top:clamp(20px,2.6vw,28px);color:var(--ink);font-weight:600}

/* ── SIGN-OFF GATE (the four artefacts) ─────────────────────────────── */
.rfc-gate{list-style:none;margin:clamp(8px,1.6vw,16px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rfc-gate li{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:18px 18px 18px 50px;font-size:.98rem;line-height:1.5;color:var(--body);width:100%}
.rfc-gate li::before{content:attr(data-n);position:absolute;left:16px;top:16px;width:24px;height:24px;border-radius:7px;background:var(--dark);color:#fff;font:800 .74rem/24px var(--mono);text-align:center}
.rfc-gate li strong{display:block;color:var(--ink);font-weight:800;font-size:.86rem;letter-spacing:.01em;margin-bottom:3px}

/* ── SIGNATURE: THE MID-TERM DECORATION-AGE BANDS ───────────────────── */
.rfc-bands{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:clamp(8px,1.6vw,16px) 0 0}
.rfc-band{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:18px 16px 16px;width:100%;overflow:hidden}
.rfc-band-bar{height:6px;border-radius:999px;background:var(--soft);margin-bottom:14px;overflow:hidden}
.rfc-band-bar i{display:block;height:100%;border-radius:999px;background:var(--div)}
.rfc-band:nth-child(1) .rfc-band-bar i{width:18%}
.rfc-band:nth-child(2) .rfc-band-bar i{width:46%}
.rfc-band:nth-child(3) .rfc-band-bar i{width:74%}
.rfc-band:nth-child(4) .rfc-band-bar i{width:100%;background:var(--accent)}
.rfc-band-age{font:800 1.02rem/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
.rfc-band-note{font:600 .76rem/1.35 var(--sans);color:var(--mut)}
.rfc-band-flag{border-color:rgba(178,63,17,.3);background:rgba(255,105,51,.06)}
.rfc-band-flag .rfc-band-age{color:var(--accent-ink)}
.rfc-band-flag .rfc-band-note{color:var(--accent-ink)}
.rfc-bands-note{margin-top:clamp(16px,2.2vw,22px)}
.rfc-rec{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.rfc-rec li{font:700 .78rem/1.2 var(--display);border-radius:999px;padding:9px 14px;border:1px solid var(--line);background:var(--cream);color:var(--ink)}

/* ── WHERE TO LOOK NEXT + SOURCES ───────────────────────────────────── */
.rfc-nextgrid{list-style:none;margin:0 0 clamp(24px,3vw,36px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.rfc-nextgrid li{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:18px 20px;width:100%;font-size:.96rem;line-height:1.55;color:var(--body)}
.rfc-nextgrid a{font-weight:700}
.rfc-sources-h{margin-bottom:8px}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.rfc-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
.rfc .rfc-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.rfc-cta-in{display:flex;flex-direction:column;align-items:center}
.rfc-orb-sm{width:56px;height:56px;margin-bottom:18px}
.rfc-orb-sm .rfc-core{inset:19px}
.rfc .rfc-cta-h{color:#fff;max-width:24ch}
.rfc-cta-sub{margin:16px auto 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.rfc-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.rfc-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── MOTION (reveal) — JS-gated; reduced-motion safe ────────────────── */
.js .rfc [data-reveal]{opacity:0;transform:translateY(16px)}
.rfc [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .rfc-days{display:none}

@media(prefers-reduced-motion:reduce){
  .rfc *,.rfc *::before,.rfc *::after{animation:none!important}
  .js .rfc [data-reveal]{opacity:1;transform:none}
  .rfc [data-reveal].in{transition:none}
  .js .rfc-daypanel.is-open{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .rfc-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);align-items:stretch}
  .rfc-hero .rfc-lede{max-width:none}
  .rfc-void{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .rfc-void-tx .rfc-prose{max-width:none}
}
@media(max-width:760px){
  .rfc-tracks{grid-template-columns:1fr}
  .rfc-bands{grid-template-columns:1fr 1fr}
  /* Works stepper → vertical list of day stamps */
  .rfc-days{grid-template-columns:1fr;gap:4px}
  .rfc-days::before{display:none}
  .rfc-day{flex-direction:row;justify-content:flex-start;gap:12px;padding:9px 10px;border-radius:10px}
  .rfc-day.is-active{background:var(--paper)}
  .rfc-day::before{flex:none}
  .rfc-day-lbl{margin-left:auto}
  .rfc-lane-rail{grid-template-columns:1fr;gap:18px}
  .rfc-lane-rail::before{display:none}
  .rfc-node,.rfc-node-end{text-align:left;padding-top:0;padding-left:24px}
  .rfc-node::before,.rfc-node-end::before{left:0;right:auto;top:3px}
}
@media(max-width:640px){
  .rfc-stage-top{flex-wrap:wrap}
  .rfc-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .rfc-hero-cta .rfc-btn{flex:1 1 auto;justify-content:center}
  .rfc-cta-btns .rfc-btn{flex:1 1 100%;justify-content:center}
}
@media(max-width:460px){
  .rfc-bands{grid-template-columns:1fr}
}

/* Touch devices: ≥44px tap targets */
@media(hover:none){
  .rfc-chip{min-height:44px}
  .rfc-day{min-height:44px}
}


/* ===== /deposit-returns (.dep) — S13 reimagined, appended 2026-06-21 ===== */
/* ===================================================================== */
/* /deposit-returns — reimagined. James-led ("deposit desk") landlord page. */
/* Everything scoped under .dep (on <main>); every class namespaced dep-*.    */
/* Safe to append to global styles.css — cannot collide with .afc/.rfc/.slt/ */
/* .tnt/.ovl/.cnd/.pm etc. House design system: sand #ECE4D5 page, cream      */
/* #F6F1E7 panels, dark #262626 James/CTA blocks, Lato display + Sen body,    */
/* AA contrast tokens (--mut #5F5A50, --accent-ink #B23F11). Mono (system     */
/* fallback) only on James' AI status label, the apportionment figures, the   */
/* ribbon stats and § references — mirroring /aftercare + /day-one-price.     */
/* ===================================================================== */

.dep{
  --paper:#ECE4D5;--cream:#F6F1E7;--soft:#E6DDCC;--line:#E1DACB;--div:#C9C2B4;
  --ink:#1A1A1A;--body:#212121;--mut:#5F5A50;--accent:#FF6933;--accent-ink:#B23F11;
  --dark:#262626;--dark-2:#2E2E2E;--dark-line:#3A3A3A;--dark-mut:#A9A299;
  --display:"Lato",system-ui,-apple-system,Arial,sans-serif;
  --sans:"Sen",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.9,.3,1);
  background:var(--paper);color:var(--body);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.dep *{box-sizing:border-box}
.dep .dep-shell{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

/* ── Type ──────────────────────────────────────────────────────────── */
.dep h1,.dep h2,.dep h3{margin:0;font-family:var(--display);color:var(--ink)}
.dep h1,.dep h2{letter-spacing:-.02em}
.dep h3{letter-spacing:-.01em}
.dep .dep-h1{font-weight:900;font-size:clamp(2.6rem,1.2rem + 5vw,5rem);line-height:1.02}
.dep .dep-h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.1}
.dep .dep-dot{color:var(--accent)}
.dep .dep-kick{font:700 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.dep .dep-kick::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.dep .dep-script{font-family:"Brittany Signature","Allura",cursive;font-size:clamp(1.5rem,1rem + 2vw,2.3rem);color:var(--accent);line-height:1;margin:6px 0 0;font-weight:400}
.dep a{color:var(--accent-ink);text-underline-offset:2px;text-decoration-thickness:1px}
.dep a:hover{text-decoration-color:var(--accent)}

/* ── Sections + inset dividers ─────────────────────────────────────── */
.dep .dep-sec{position:relative;padding-block:clamp(48px,7vw,84px);scroll-margin-top:clamp(64px,8vh,92px)}
.dep .dep-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(min(1240px,100%) - 2*var(--pad));height:1.5px;background:var(--div)}
.dep .band-dark::before{display:none}
.dep .dep-prose{max-width:74ch}
.dep .dep-prose p{margin:0 0 18px;font-size:1.05rem;line-height:1.65}
.dep .dep-prose p:last-child{margin-bottom:0}
.dep .dep-prose strong{color:var(--ink);font-weight:700}
.dep .dep-list{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:13px;max-width:80ch}
.dep .dep-list li{position:relative;padding-left:24px;font-size:1.02rem;line-height:1.6}
.dep .dep-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.dep .dep-list strong{color:var(--ink)}

/* ── Buttons ───────────────────────────────────────────────────────── */
.dep .dep-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  font:700 .95rem/1 var(--display);padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,filter .18s,transform .18s}
.dep .dep-btn:hover{transform:translateY(-1px)}
.dep .dep-btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.dep .dep-btn-dark:hover{background:#000}
.dep .dep-btn-ghost{background:transparent;color:var(--ink);border-color:var(--div)}
.dep .dep-btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.dep .dep-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.dep .dep-btn-accent:hover{filter:brightness(.94)}
.dep .dep-btn-ghost-d{background:transparent;color:#fff;border-color:var(--dark-line)}
.dep .dep-btn-ghost-d:hover{border-color:var(--accent);color:#fff}
.dep a:focus-visible,.dep button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── HERO ───────────────────────────────────────────────────────────── */
.dep-hero{position:relative;padding-block:clamp(34px,6vw,68px) clamp(40px,6vw,72px)}
.dep-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:center}
.dep-hero-tx{min-width:0}
.dep-hero .dep-lede{font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);line-height:1.62;color:var(--body);max-width:60ch;margin:20px 0 0}
.dep-hero .dep-lede strong{color:var(--ink)}
.dep-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* James operator stage */
.dep-james{min-width:0;display:flex;flex-direction:column;gap:14px}
.dep-stage{background:var(--dark);border-radius:18px;padding:clamp(20px,2.4vw,28px);color:#fff;position:relative;overflow:hidden}
.dep-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 84% 6%,rgba(255,105,51,.17),transparent 60%);pointer-events:none}
.dep-stage-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.dep-who{margin-right:auto;min-width:0}
.dep-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.dep-stat{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-mut);margin-top:6px;display:flex;align-items:center;gap:6px}
.dep-live{color:#7CC47C;font-size:.7em}
.dep-stage-line{position:relative;z-index:1;margin:18px 0 0;font-size:.98rem;line-height:1.55;color:#EAE4DA}

.dep-orb{position:relative;width:62px;height:62px;flex:none}
.dep-orb .dep-core{position:absolute;inset:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px 4px rgba(255,105,51,.5)}
.dep-orb .dep-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--dark-line)}
.dep-orb .dep-ring.r2{inset:9px;border-color:rgba(255,105,51,.5)}
.dep-orb .dep-ring.r3{inset:16px;border-color:rgba(255,105,51,.28)}
@keyframes depPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.9}}
@keyframes depCore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.dep-orb .dep-ring.r2{animation:depPulse 2.6s var(--ease) infinite}
.dep-orb .dep-core{animation:depCore 2.6s var(--ease) infinite}

.dep-voice{display:inline-flex;align-items:center;gap:9px;flex:none;font:700 .85rem/1 var(--display);
  min-height:44px;padding:11px 16px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);cursor:pointer;transition:filter .18s,background .18s}
.dep-voice:hover{filter:brightness(.94)}
.dep-voice .dep-mic{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.dep-voice.is-listening{background:#7CC47C;border-color:#7CC47C;color:#10250f}
.dep-voice.is-listening .dep-mic{background:#10250f;animation:depBlink 1s infinite}
@keyframes depBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* Conversation panel */
.dep-convo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.dep-thread{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;padding:2px}
.dep-msgs{display:flex;flex-direction:column;gap:11px}
.dep-msg{max-width:90%;padding:11px 15px;border-radius:14px;font-size:.96rem;line-height:1.5;word-wrap:break-word}
.dep-james-msg{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body)}
.dep-user-msg{align-self:flex-end;background:var(--dark);color:#fff;border-bottom-right-radius:5px}
.dep-msg a{color:var(--accent-ink);font-weight:700}
.dep-msg .dep-jump{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:700 .82rem/1 var(--display);color:var(--accent-ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--paper)}
.dep-msg .dep-jump:hover{border-color:var(--accent)}
.dep-typing{align-self:flex-start;color:var(--mut);font-size:.88rem;font-style:italic;padding:2px 6px}
.dep-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.dep-chip{display:inline-flex;align-items:center;font:600 .82rem/1.15 var(--sans);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s,color .15s;text-align:left}
.dep-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.dep-input{display:flex;gap:9px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.dep-input input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:400 .96rem var(--sans);color:var(--ink)}
.dep-input input:focus{outline:2px solid var(--accent);outline-offset:1px}
.dep-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;border:0;cursor:pointer;font-size:1.2rem;line-height:1;transition:background .18s}
.dep-send:hover{background:var(--accent)}
.dep-disclose{font:400 .76rem/1.5 var(--sans);color:var(--mut);margin:11px 2px 0}
.dep-disclose a{color:var(--accent-ink)}
.dep-convo-fallback .dep-msg{max-width:100%}

/* ── SIGNATURE: THE THREE PRINCIPLES (numbered cards) ───────────────── */
.dep-prin-intro{margin-bottom:clamp(22px,3vw,32px)}
.dep-principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr;gap:16px}
.dep-prin{position:relative;background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:34px 22px 22px;width:100%;display:flex;flex-direction:column}
.dep-prin-n{position:absolute;top:18px;left:22px;font:800 .8rem/1 var(--mono);letter-spacing:.04em;color:var(--accent-ink)}
.dep-prin-h{font-weight:800;font-size:1.12rem;line-height:1.2;margin:6px 0 10px}
.dep-prin p{margin:0;font-size:.97rem;line-height:1.58;color:var(--body)}

/* ── SIGNATURE: THE APPORTIONMENT ENGINE (the carpet worked example) ── */
/* A 3-state ARIA tablist over the page's own £500 / 10-year worked example.
   Every figure shown is the page's published number — year 4 → ~£300, year 9
   → small, life exhausted → nil. Stripped from the verbatim diff; the carpet
   paragraphs carry the real copy. */
.dep-appo{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.6vw,32px);box-shadow:0 10px 30px rgba(0,0,0,.05);margin-bottom:clamp(22px,3vw,34px)}
.dep-appo-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:18px}
.dep-appo-title{font:800 .72rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.dep-appo-basis{font:600 .82rem/1.3 var(--sans);color:var(--accent-ink)}
.dep-appo-tabs{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.dep-appo-tab{font:700 .82rem/1 var(--display);min-height:42px;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--mut);cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.dep-appo-tab:hover{border-color:var(--accent);color:var(--accent-ink)}
.dep-appo-tab.is-active{background:var(--dark);border-color:var(--dark);color:#fff}
.dep-appo-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(18px,3vw,38px);align-items:center}
.js .dep-appo-panel{display:none}
.js .dep-appo-panel.is-open{display:grid;animation:depPanelIn .35s var(--ease)}
@keyframes depPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .dep-appo-panel{margin-bottom:18px;border-top:1px solid var(--line);padding-top:18px}
html:not(.js) .dep-appo-panel:first-of-type{border-top:0;padding-top:0}

.dep-bar-label{font:600 .68rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 9px}
.dep-bar{display:flex;gap:4px}
.dep-seg{flex:1;height:46px;border-radius:4px;background:var(--soft);position:relative}
.dep-seg.used{background:repeating-linear-gradient(135deg,var(--soft) 0 5px,#DBD2C0 5px 10px)}
.dep-seg.lost{background:var(--accent);box-shadow:0 0 10px rgba(255,105,51,.35)}
.dep-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.dep-legend span{display:inline-flex;align-items:center;gap:7px;font:600 .76rem/1.3 var(--sans);color:var(--mut)}
.dep-legend i{width:14px;height:14px;border-radius:3px;flex:none}
.dep-legend .li-used{background:repeating-linear-gradient(135deg,var(--soft) 0 4px,#DBD2C0 4px 8px)}
.dep-legend .li-lost{background:var(--accent)}
.dep-claimbox{text-align:left}
.dep-claim-k{font:700 .68rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 4px}
.dep-claim-fig{font:900 clamp(2.4rem,1.5rem + 3vw,3.5rem)/1 var(--display);letter-spacing:-.02em;color:var(--accent-ink)}
.dep-claim-of{font:700 .9rem/1.3 var(--sans);color:var(--mut);margin-top:4px}
.dep-claim-note{margin:12px 0 0;font-size:.95rem;line-height:1.5;color:var(--body)}

/* ── SIGNATURE: THE FOUR RULES (chips) ──────────────────────────────── */
.dep-rules{list-style:none;margin:clamp(8px,1.6vw,16px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.dep-rules li{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:18px 18px 18px 52px;font-size:.96rem;line-height:1.45;color:var(--body);width:100%}
.dep-rules li::before{content:attr(data-n);position:absolute;left:16px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--dark);color:#fff;font:800 .8rem/26px var(--mono);text-align:center}
.dep-rules li strong{display:block;color:var(--ink);font-weight:800;font-size:.92rem;margin-bottom:3px}

/* ── SIGNATURE: THE DEPOSIT-PROTECTION FACTS RIBBON ─────────────────── */
.dep-ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:clamp(8px,1.6vw,18px) 0 0}
.dep-fact{background:var(--cream);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:14px;padding:clamp(20px,2.4vw,28px);text-align:center}
.dep-fact-fig{font:900 clamp(2rem,1.3rem + 2.4vw,3rem)/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.dep-fact-fig .u{font-size:.5em;font-weight:800;color:var(--accent-ink);letter-spacing:0}
.dep-fact-lbl{margin-top:10px;font:600 .82rem/1.4 var(--sans);color:var(--mut)}

/* ── WHERE TO LOOK NEXT + SOURCES ───────────────────────────────────── */
.dep-nextgrid{list-style:none;margin:0 0 clamp(24px,3vw,36px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.dep-nextgrid li{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:18px 20px;width:100%;font-size:.96rem;line-height:1.55;color:var(--body)}
.dep-nextgrid a{font-weight:700}
.dep-sources-h{margin-bottom:8px}

/* ── DISCLAIMER ─────────────────────────────────────────────────────── */
.dep-disclaimer p{margin:0;font-size:.84rem;line-height:1.6;color:var(--mut);max-width:90ch}

/* ── DARK CTA + V4 SEAM ─────────────────────────────────────────────── */
.dep .dep-cta{background:var(--dark);color:#fff;text-align:center;max-width:none;margin-inline:0}
.dep-cta-in{display:flex;flex-direction:column;align-items:center}
.dep-orb-sm{width:56px;height:56px;margin-bottom:18px}
.dep-orb-sm .dep-core{inset:19px}
.dep .dep-cta-h{color:#fff;max-width:24ch}
.dep-cta-sub{margin:16px auto 0;max-width:62ch;font-size:1.05rem;line-height:1.6;color:#EAE4DA}
.dep-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.dep-cta.band-dark:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--div)}

/* ── MOTION (reveal) — JS-gated; reduced-motion safe ────────────────── */
.js .dep [data-reveal]{opacity:0;transform:translateY(16px)}
.dep [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .dep-appo-tabs{display:none}

@media(prefers-reduced-motion:reduce){
  .dep *,.dep *::before,.dep *::after{animation:none!important}
  .js .dep [data-reveal]{opacity:1;transform:none}
  .dep [data-reveal].in{transition:none}
  .js .dep-appo-panel.is-open{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:920px){
  .dep-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px);align-items:stretch}
  .dep-hero .dep-lede{max-width:none}
}
@media(max-width:680px){
  .dep-appo-panel{grid-template-columns:1fr;gap:22px}
  .dep-claimbox{text-align:center}
  .dep-seg{height:38px}
  .dep-ribbon{grid-template-columns:1fr}
}
@media(max-width:640px){
  .dep-stage-top{flex-wrap:wrap}
  .dep-voice{order:3;width:100%;justify-content:center;margin-top:4px}
  .dep-hero-cta .dep-btn{flex:1 1 auto;justify-content:center}
  .dep-cta-btns .dep-btn{flex:1 1 100%;justify-content:center}
  .dep-appo-tab{flex:1 1 auto;text-align:center;justify-content:center}
}

/* Touch devices: ≥44px tap targets */
@media(hover:none){
  .dep-chip{min-height:44px}
}

/* HWJ mobile hero — drop CTAs into the lower empty band, above the chat FAB (S53, 2026-07-05) */
@media(max-width:560px){
  .hero-wrap{align-items:stretch}
  .hero-inner{transform:none;display:flex;flex-direction:column;padding-top:clamp(116px,17vh,156px);padding-bottom:clamp(104px,15vh,132px)}
  .hero-inner .btns{margin-top:auto}
}

/* ---- S127: detail-page Street-Data / free-data modules (.sm-*) ---- */
.detailx .sm .dxsec{margin-bottom:6px}
.sm-lede{color:var(--mut);margin:0 0 12px;max-width:62ch}
.sm-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sm-fact{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.sm-fact b{display:block;font:700 16px/1.25 "IBM Plex Mono",ui-monospace,Menlo,monospace;color:var(--ink)}
.sm-fact span{display:block;font:700 10.5px/1.35 Lato,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin-top:5px}
.sm-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.sm-cols{grid-template-columns:1fr}}
.sm-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.sm-ch{font:800 14px Lato,sans-serif;margin:0 0 9px;color:var(--ink)}
.sm-t{width:100%;border-collapse:collapse;font-size:14px}
.sm-t th{font:700 10.5px Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:left;padding:6px 4px;border-bottom:1.5px solid var(--div)}
.sm-t td{padding:8px 4px;border-bottom:1px solid var(--line)}
.sm-t tr:last-child td{border-bottom:0}
.sm-num{text-align:right;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.sm-t th.sm-num{text-align:right}   /* numeric column headers align over their right-aligned figures (Harvey, 10 Aug) */
.sm-total td{font:800 15px Lato,sans-serif;padding-top:11px}
.sm-total .sm-num{color:var(--accent);font-size:17px}
.sm-opt{display:flex;gap:8px;align-items:flex-start;margin:10px 0 2px;font-size:13.5px;cursor:pointer}
.sm-opt input{accent-color:var(--accent);margin-top:2px}
.sm-fine{font-size:12.5px;color:var(--mut);margin:10px 0 0}
.sm-fine a{text-decoration:underline;text-underline-offset:2px}
.sm-mv{padding:9px 0;border-bottom:1px solid var(--line)}
.sm-mv:last-child{border-bottom:0}
.sm-mv b{display:block;font:800 13px Lato,sans-serif}
.sm-mv span{display:block;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:14px;margin-top:3px}
.sm-mv i{display:block;font-style:normal;font-size:12px;color:var(--mut);margin-top:2px}
.sm-dests{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sm-dest{border:1px solid var(--div);background:var(--cream);border-radius:99px;padding:8px 14px;font:700 13px Lato,sans-serif;cursor:pointer;color:var(--body)}
.sm-dest.on{background:var(--dark);border-color:var(--dark);color:#fff}
.sm-journey b{font:700 40px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;color:var(--ink)}
.sm-journey span{color:var(--mut)}
.sm-comp{margin:0 0 6px;font-size:15px}
.sm-comp-pos{margin:0;font:700 14px Lato,sans-serif;color:var(--ink)}
.sm-dots{letter-spacing:2px;color:#3E6B4A;white-space:nowrap}
.sm-honest{border-left:4px solid var(--accent)}
.sm-hrow{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sm-hrow:last-child{border-bottom:0}
.sm-ht{font:700 14px Lato,sans-serif;min-width:170px}
.sm-hd{color:var(--mut);font-size:13.5px;flex:1 1 260px}
.sm-hd a{text-decoration:underline;text-underline-offset:2px}
.sm-pill{font:700 11px Lato,sans-serif;letter-spacing:.07em;text-transform:uppercase;border-radius:99px;padding:4px 10px;white-space:nowrap}
.sm-pill.calm{background:#E3EAD9;color:#3E6B4A}
.sm-pill.info{background:var(--soft);color:var(--mut)}
.sm-pill.high{background:#F5DCC8;color:#A14E2B}
.sm-unis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.sm-uni{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sm-uni b{display:block;font:700 13.5px Lato,sans-serif;color:var(--ink)}
.sm-uni span{color:var(--mut);font-size:13px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.sm-james{background:var(--dark);border-radius:14px;color:#fff;padding:24px}
.sm-james h2{font:800 20px/1.3 Lato,sans-serif;margin:0 0 8px;color:#fff}
.sm-james p{color:rgba(255,255,255,.75);max-width:56ch;margin:0}
.sm-qs{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.sm-q{border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:99px;padding:8px 14px;font-size:13px;background:transparent;cursor:pointer}
.sm-q:hover{border-color:var(--accent)}
.sm-jbtn{display:inline-block;background:var(--accent);color:#fff;border-radius:99px;font:800 14px Lato,sans-serif;padding:12px 20px;margin-top:14px;border:0;cursor:pointer}
.sm-src{font-size:11.5px;color:var(--mut);margin:6px 0 0}
.sm-dest:focus-visible,.sm-q:focus-visible,.sm-jbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- S128: daily-life module ---- */
.sm-lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.sm-lcat{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.sm-lcat>b{font:800 11px Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.sm-lcat ul{list-style:none;margin:8px 0 0;padding:0}
.sm-lcat li{padding:6px 0;border-bottom:1px solid var(--line)}
.sm-lcat li:last-child{border-bottom:0}
.sm-lcat li b{display:block;font:700 13.5px Sen,sans-serif;color:var(--ink)}
/* Venue link-outs (9 Aug). The name stays typographically identical to the unlinked case — only a hairline
   underline marks it as clickable — so a venue WITH a website and one without still read as the same list.
   --accent-ink, not --accent: this sits on cream and must pass AA. */
.sm-lcat li b a{color:inherit;text-decoration:none;border-bottom:1px solid var(--div,#C9C2B4)}
.sm-lcat li b a:hover,.sm-lcat li b a:focus-visible{color:var(--accent-ink,#B23F11);border-bottom-color:currentColor}
.sm-lcat li span{color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums}
/* Venue pins (9 Aug). The row highlight has to be legible without moving anything — a border or
   padding change here would reflow the whole grid on every click. */
.sm-lcat li{border-radius:6px;transition:background .15s ease}
.sm-lcat li.on{background:#F0E7D8}
.sm-lmap{aspect-ratio:16/7;border-radius:14px;overflow:hidden;margin:14px 0 0;border:1px solid var(--line);background:var(--sand)}
/* Venue name pills (9 Aug — Harvey: the names blended into the map). Google renders marker labels
   as a plain text node with an inline colour, so the only way to give them a background is the
   supported `className` hook. Solid dark + cream reads over roads, parks, water AND the accent
   route line — no basemap colour can swallow it. white-space:nowrap because Google sizes the label
   box to the text and a wrap would break the pill. */
.sm-vlbl{background:#262626;padding:2px 7px;border-radius:7px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.28);letter-spacing:.01em}
/* Family colours (9 Aug). Twelve categories collapse to FIVE colours — twelve hues is confetti
   nobody learns; five is a legend you read once. Each is dark enough to carry cream text at AA. */
.sm-vlbl.f-eat{background:#C2410C}
.sm-vlbl.f-needs{background:#1F5F8B}
.sm-vlbl.f-health{background:#A03050}
.sm-vlbl.f-shops{background:#6B4E9B}
.sm-vlbl.f-green{background:#4A6033}
.sm-vlbl-on{box-shadow:0 2px 10px rgba(0,0,0,.40);outline:2px solid #F6F1E7}
/* Tile edge, heading and icon all inherit ONE value (--fc) — the same one the pin and pill use.
   That single source is what makes the tile↔map link obvious rather than coincidental. */
.sm-lcat{border-left:3px solid var(--fc,transparent)}
.sm-lcat>b{color:var(--fc,var(--mut));display:flex;align-items:center;gap:6px}
.sm-fic{flex:none}
/* Food delivery row (9 Aug). Deliberately quiet — it is a convenience, not a selling point, and
   must not compete with the venue grid above it. */
.sm-deliv{margin:16px 0 0;padding:13px 15px;background:var(--cream);border:1px solid var(--line);border-radius:14px}
.sm-drow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.sm-pcbtn{font:700 12.5px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.04em;
  background:var(--dark);color:var(--cream);border:0;border-radius:8px;padding:6px 11px;cursor:pointer}
.sm-pcbtn:hover{background:var(--accent-ink,#B23F11)}
.sm-dlink{font:700 12.5px Lato,sans-serif;color:var(--ink);text-decoration:none;border:1px solid var(--div,#C9C2B4);
  border-radius:999px;padding:5px 12px}
.sm-dlink:hover,.sm-dlink:focus-visible{color:var(--accent-ink,#B23F11);border-color:currentColor}
.sm-deliv .sm-fine{margin:9px 0 0}
/* "Delivers" on a venue row — a fact from the venue's own Google record, not a claim of ours. */
.sm-dfl{display:inline-block;margin-top:3px;font:700 10.5px Lato,sans-serif;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;color:#4A6033;background:#E4EBDD;padding:1px 7px;border-radius:999px}
.sm-lfil{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.sm-fchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--fc);background:transparent;
  color:var(--fc);font:700 11.5px Lato,sans-serif;letter-spacing:.02em;padding:4px 11px;border-radius:999px;
  cursor:pointer;transition:background .14s ease,color .14s ease}
.sm-fchip.on{background:var(--fc);color:#F6F1E7}
.sm-fchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:600px){.sm-lmap{aspect-ratio:4/3}}
.sm-envline{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 13px}
.sm-envline span{background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:13.5px}

/* ---- S128c: move-in mockup-parity (segmented toggle + inset panels) ---- */
.sm-seg{display:inline-flex;border:1px solid var(--div);border-radius:99px;overflow:hidden;margin-bottom:11px}
.sm-seg button{border:0;background:transparent;font:700 12px Lato,sans-serif;letter-spacing:.04em;padding:8px 14px;cursor:pointer;color:var(--mut)}
.sm-seg button.on{background:var(--dark);color:#fff}
.sm-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm-mi{background:var(--soft);border-radius:10px;padding:13px 15px}
.sm-mirow{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:4px 0}
.sm-mirow b{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-weight:600}
.sm-mitotal{border-top:1px solid var(--div);margin-top:7px;padding-top:9px}
.sm-mitotal span{font:800 13px Lato,sans-serif}
.sm-mitotal b{font-weight:700;color:var(--ink)}
/* Reposit link-out (9 Aug). Quiet by design — it must read as a footnote to the non-refundable
   check-in fee above it, never as an endorsement competing with the Day-one total. */
.sm-minote{margin:9px 0 0;font-size:12.5px;line-height:1.45}
.sm-minote a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--div)}
.sm-minote a:hover,.sm-minote a:focus-visible{color:var(--accent-ink,#B23F11);border-bottom-color:currentColor}

/* ---- S128d: visual polish — module rhythm, dividers, total emphasis, source tag ---- */
.detailx section.sm{position:relative;margin-top:14px;padding-top:30px}
.detailx section.sm::before{content:"";position:absolute;top:0;left:2%;right:2%;height:1.5px;background:var(--div)}
.detailx section.sm .dxsec{margin-top:0}
.sm-total .sm-num{font-size:19px;letter-spacing:-.01em}
.sm-total td{padding-top:12px}
.sm-srctag{display:inline-block;font:700 9.5px Lato,sans-serif;letter-spacing:.08em;color:#3E6B4A;background:#E3EAD9;border-radius:3px;padding:2px 5px;vertical-align:1px;margin-left:4px}
.sm-fine{line-height:1.55}
.sm-envline span{font-variant-numeric:tabular-nums}
.sm-journey{margin:2px 0 6px}

/* ---- S128e: billing chips (communal heat / cooling) ---- */
.sm-billed{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.sm-billed-t{font:800 11px Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-right:2px}
.sm-bchip{background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:13px;color:var(--body)}
.sm-bchip b{font:700 12.5px Lato,sans-serif}
.sm-bchip.comm{border-color:#C9A24B;background:#F0E6CF}
.sm-bchip.cool{border-color:var(--div);background:var(--soft)}

/* ---- S129: journey map + leg breakdown ---- */
.sm-jmwrap{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;margin-top:12px}
@media(max-width:760px){.sm-jmwrap{grid-template-columns:1fr}}
.sm-jmmap{background:var(--soft);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:300px}
.sm-jmmap iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
.sm-legs{list-style:none;margin:10px 0 0;padding:0}
.sm-legs li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.sm-legs li:last-child{border-bottom:0}
.sm-legs .ic{flex:0 0 22px;text-align:center}
.sm-legs .lg{flex:1}
.sm-legs .lg b{font:700 13px Lato,sans-serif}
.sm-legs .lg small{display:block;color:var(--mut);font-size:12px}
.sm-legs .dur{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;color:var(--mut);white-space:nowrap;font-size:12.5px}

.sm-wnote{margin:2px 0 0;font-size:12.5px;color:var(--mut)}
.sm-wnote[hidden]{display:none}

.sm-fact span a{text-decoration:underline;text-underline-offset:2px;text-transform:none;letter-spacing:.02em}

/* ---- S129c: in-page journey planner + fares ---- */
.sm-plan{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:2px 0 12px}
.sm-pdir{display:inline-flex;border:1px solid var(--div);border-radius:99px;overflow:hidden}
.sm-pdir button{border:0;background:transparent;font:700 11.5px Lato,sans-serif;letter-spacing:.03em;padding:7px 12px;cursor:pointer;color:var(--mut)}
.sm-pdir button.on{background:var(--dark);color:#fff}
.sm-pbox{position:relative;flex:1 1 260px;max-width:420px}
.sm-pbox input{width:100%;box-sizing:border-box;background:var(--paper);border:1px solid var(--div);border-radius:99px;padding:9px 16px;font:400 13.5px Sen,sans-serif;color:var(--body)}
.sm-pbox input:focus{outline:2px solid var(--accent);outline-offset:1px}
.sm-psug{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--cream);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:30;overflow:hidden}
.sm-psug button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 15px;font:400 13.5px Sen,sans-serif;color:var(--body);cursor:pointer;border-bottom:1px solid var(--line)}
.sm-psug button:last-child{border-bottom:0}
.sm-psug button:hover{background:var(--paper)}
.sm-pnote{font-size:12.5px;color:var(--mut)}
.sm-fare{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:14px;color:var(--body);margin-left:6px}
.sm-zone{display:inline-block;background:var(--soft);border-radius:99px;padding:4px 11px;font:700 11px Lato,sans-serif;letter-spacing:.06em;color:var(--mut);margin-left:8px;vertical-align:4px}

/* ---- S130d: quiet leg markers (Harvey: no emoji rings) ---- */
.sm-legs .ic{display:flex;align-items:center;justify-content:center}
.sm-legs .ic i{display:inline-block;width:9px;height:9px;border-radius:50%}
.sm-legs li.ride .ic i{background:var(--accent)}
.sm-legs li.walk .ic i{background:transparent;border:2px solid var(--div);width:7px;height:7px}

/* ---- S130f: colour-emoji leg icons, no text-presentation ring (Harvey keeps the emoji) ---- */
.sm-legs .ic{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:16px;line-height:1}
.sm-legs .ic i{display:none}

/* ---- S130g: leg icon class renamed .sm-lic — the site's header .ic chrome (orange ring) was leaking in ---- */
.sm-legs .sm-lic{flex:0 0 26px;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:16px;line-height:1}

/* ---- S131: clickable legs zoom the map to their segment ---- */
.sm-legs li[data-leg]{cursor:pointer;transition:background .15s;border-radius:6px}
.sm-legs li[data-leg]:hover{background:var(--paper)}
.sm-legs li[data-leg].on{background:var(--paper);box-shadow:inset 3px 0 0 var(--accent);padding-left:8px}