/* Essex Block Management, home page v2 (2026-09-28). Sharper and faster: native scroll, animations locked to the
   scroll, a hard oxblood / photograph split hero, hairline brass rules on a strict grid, a chapter rail that tells the
   story. Brand: BRAND.md. Loaded after site.css on / only. */
:root{--ox:#85010c;--char:#1f1f1f;--ivory:#f7f4ec;--brass:#b08d57;--rule:#d8cdb5;--g:48px}
body.home{background:var(--ivory);overflow-x:hidden}
.home ::selection{background:var(--ox);color:var(--ivory)}
.home .head{position:fixed;left:0;right:0;top:0;background:var(--ox);border-bottom:1px solid rgba(176,141,87,.55)}
.home .head .wrap{max-width:none;padding:0 var(--g)}
.eyebrow{font:600 12px/1 "Albert Sans",sans-serif;letter-spacing:.32em;color:var(--brass)}
.serif{font-family:"EB Garamond",Garamond,Georgia,serif;font-weight:500}

/* chapter rail */
.rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:14px}
.rail a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brass);font:600 11px/1 "Albert Sans",sans-serif;letter-spacing:.2em}
.rail a i{display:block;width:14px;height:1px;background:var(--brass);transition:width .25s}
.rail a span{background:rgba(31,31,31,.82);color:#efe6d4;padding:4px 7px}
.rail a span{opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s;white-space:nowrap}
.rail a.on i{width:34px}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail a.on i{background:var(--ivory);box-shadow:0 0 0 1px var(--brass)}

/* 01 arrival: hard split */
.xhero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:100vh;padding-top:84px;background:var(--ox);color:var(--ivory)}
.xhero .panel2{display:flex;flex-direction:column;justify-content:space-between;padding:56px var(--g) 44px calc(var(--g) + 40px);border-right:1px solid rgba(176,141,87,.55)}
.xhero h1{font:500 clamp(48px,5.6vw,96px)/.95 "EB Garamond",Garamond,serif;letter-spacing:-.015em;margin-top:28px}
.xhero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}.xhero h1 .line>span{display:inline-block}
.xhero .lede{font-size:18px;line-height:1.6;color:#f0dcd9;max-width:38ch;margin-top:28px}
.xhero .ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(176,141,87,.6);margin-top:40px}
.xhero .ledger div{padding:18px 16px 0 0}
.xhero .ledger b{display:block;font:500 34px/1 "EB Garamond",serif;color:var(--ivory)}
.xhero .ledger span{display:block;font-size:13px;color:#e3c7c3;margin-top:8px}
.xhero .ctas{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.xhero .btn{background:var(--ivory);color:var(--ox);border-radius:0;padding:16px 24px}
.xhero .btn.ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(247,244,236,.7)}
.xhero figure{position:relative;margin:0;overflow:hidden;background:#2a2624}
.xhero figure img{width:100%;height:100%;object-fit:cover;display:block}
.xhero figure figcaption{position:absolute;right:20px;bottom:18px;font:600 11px/1 "Albert Sans",sans-serif;letter-spacing:.26em;color:#f7f4ec;opacity:.85}

/* 01 arrival v4: the E as a window. A full-screen photograph under an inline SVG veil (oxblood field, the E's ivory
   blades as holes, the brass segments on top), traced from Sam's artwork so it is sharp at any zoom. .ebox is an
   invisible box CSS places; home.js fits the E into it, and on scroll flies through the middle blade into the photo. */
.xland,.xmask,.xessex,.xpack{padding:0}  /* site.css gives every section 96px padding; these chapters set their own */
.xland{position:relative;height:240vh;background:var(--ox)}
.lpin{--head:84px;--eh:min(calc(100vh - var(--head) - 10vh),54vw);--ew:calc(var(--eh) * 1484 / 1752);
 --ex:clamp(32px,5.2vw,120px);--ey:calc(var(--head) + (100vh - var(--head) - var(--eh)) / 2);
 position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ox);color:var(--ivory)}
.lfull{position:absolute;inset:0;overflow:hidden}
.lfull picture{display:block;width:100%;height:100%}
.lfull img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:32% 45%;transform-origin:32% 45%}
.ebox{position:absolute;left:var(--ex);top:var(--ey);width:var(--ew);height:var(--eh);pointer-events:none}
.eveil{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.eveil .ev{fill:var(--ox)}.eveil .eb{fill:var(--brass,#B08D57)}
/* before the script has placed it, the E sits where the CSS box says (no flash of a misplaced veil) */
.eveil:not(.set){visibility:hidden}
.lcopy{z-index:2;position:absolute;right:var(--g);left:calc(var(--ex) + var(--ew) + clamp(36px,4.4vw,110px));top:var(--head);bottom:0;
 display:flex;flex-direction:column;justify-content:center;max-width:720px}
.lcopy h1{font:500 clamp(46px,min(5.6vw,10vh),132px)/.94 "EB Garamond",Garamond,serif;letter-spacing:-.015em;margin-top:clamp(14px,2.4vh,28px)}
.lcopy h1 .line{display:block;overflow:hidden;padding-bottom:.06em}.lcopy h1 .line>span{display:inline-block}
.lcopy .lede{font-size:clamp(16px,min(1.15vw,2.1vh),21px);line-height:1.6;color:#f0dcd9;max-width:40ch;margin-top:clamp(14px,2.6vh,28px)}
.lcopy .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(16px,3vh,34px)}
.lcopy .btn{background:var(--ivory);color:var(--ox);border-radius:0;padding:16px 24px}
.lcopy .btn.ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(247,244,236,.7)}
.lcopy .ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(176,141,87,.6);margin-top:clamp(22px,4.5vh,52px);max-width:560px}
.lcopy .ledger div{padding:16px 16px 0 0}
.lcopy .ledger b{display:block;font:500 clamp(26px,min(2.3vw,4vh),42px)/1 "EB Garamond",serif}
.lcopy .ledger span{display:block;font-size:13px;color:#e3c7c3;margin-top:8px}
.lcue{z-index:2;position:absolute;right:var(--g);bottom:26px;font:600 11px/1 "Albert Sans",sans-serif;letter-spacing:.3em;color:#d9c29a}
/* the arrival frame: once you are through the E, a soft shade at the foot carries the line */
.lshade{position:absolute;inset:auto 0 0 0;height:34vh;background:linear-gradient(transparent,rgba(20,6,6,.55));opacity:0;pointer-events:none}
.lcap{z-index:2;position:absolute;left:0;right:0;bottom:clamp(28px,6vh,60px);text-align:center;color:var(--ivory);opacity:0}
.lcap b{display:block;font:500 clamp(30px,3.4vw,58px)/1.05 "EB Garamond",serif;letter-spacing:-.01em}
.lcap span{display:block;margin-top:14px;font:600 12px/1 "Albert Sans",sans-serif;letter-spacing:.34em}

/* 02 Essex: the letters open onto the facade */
.xmask{position:relative;height:300vh;background:var(--ivory)}
.xmask .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.xmask .reveal{position:absolute;inset:0;z-index:0;background:url(img/ed-texture.webp) center/cover;will-change:transform}
.xmask .rshade{position:absolute;inset:0;z-index:1;opacity:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(18,14,13,.72),rgba(18,14,13,.5))}
.xmask .sheet{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;transform-origin:50% 50%}
.xmask .sheet .iv{fill:var(--ivory)}
.xmask .sheet text{font:500 27vw "EB Garamond",Garamond,serif;letter-spacing:-.02em;fill:#000}
.xmask .say{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--ivory);opacity:0;padding:0 24px}
.xmask .say p{font:500 clamp(34px,4.6vw,72px)/1.06 "EB Garamond",serif;max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.xmask .say .eyebrow{display:block;margin-top:30px;color:var(--ivory);opacity:.9;text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* 03 stewardship */
.xsteward{padding:120px 0 40px;background:var(--ivory)}
.xsteward .grid{padding:0 var(--g) 0 calc(var(--g) + 40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
.xsteward .frames{position:sticky;top:120px;height:calc(100vh - 170px);align-self:start}
.xsteward .frame{position:relative;height:100%;overflow:hidden;background:#1f1f1f}
.xsteward .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.xsteward .frame img.on{opacity:1}
.xsteward .frame .cap{position:absolute;left:18px;bottom:16px;z-index:2;font:600 11px/1 "Albert Sans",sans-serif;letter-spacing:.26em;color:var(--ivory)}
.xsteward .intro{padding-bottom:40px}
.xsteward .intro h2{font:500 clamp(40px,4.4vw,70px)/1 "EB Garamond",serif;color:var(--char);margin-top:18px}
.xsteward .intro p{font-size:18px;color:#5f5a52;max-width:40ch;margin-top:20px}
.chap{min-height:56vh;padding:40px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:64px 1fr;gap:0 18px;align-content:center}
.chap .n{font:500 18px/1.4 "EB Garamond",serif;color:var(--brass)}
.chap h3{font:500 clamp(32px,3vw,46px)/1.05 "EB Garamond",serif;color:var(--ox);margin-bottom:14px}
.chap p{font-size:17px;color:#3b3833;max-width:44ch}
.chap ul{list-style:none;margin-top:16px;border-top:1px solid #e6dfcf}
.chap li{padding:9px 0;border-bottom:1px solid #e6dfcf;font-size:15px;color:#3b3833}
.chap>div{grid-column:2}

/* 04 the county, sideways */
.xessex{background:var(--char);color:var(--ivory)}
.xessex .pin{height:100vh;overflow:hidden;display:flex;flex-direction:column;padding-top:84px}
.xessex .top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:40px var(--g) 26px calc(var(--g) + 40px)}
.xessex .top h2{font:500 clamp(40px,4.6vw,72px)/1 "EB Garamond",serif;margin-top:14px}
.xessex .top p{max-width:34ch;color:#cfc7b6;font-size:16px}
.xessex .track{display:flex;gap:20px;padding:0 var(--g) 40px calc(var(--g) + 40px);flex:1;min-height:0;will-change:transform}
.place{position:relative;flex:0 0 auto;width:min(40vw,560px);height:100%;overflow:hidden;background:#111;color:var(--ivory);text-decoration:none;border-top:2px solid var(--brass)}
.place img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.place:hover img{transform:scale(1.04)}
.place:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,13,12,.92) 0%,rgba(15,13,12,.78) 38%,rgba(15,13,12,.35) 62%,rgba(15,13,12,0) 80%)}
/* 2026-09-29 (Sam: "you cant see these bits of text"): brass on a busy photo vanished, so the place labels go ivory with a shadow */
.place .t .eyebrow{color:var(--ivory);opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.7)}.place .t h3,.place .t p{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.place .t{position:absolute;left:24px;right:24px;bottom:24px;z-index:2}
.place .t h3{font:500 clamp(32px,3vw,48px)/1 "EB Garamond",serif;margin:10px 0 8px}
.place .t p{font-size:15px;color:#ded7c8;max-width:36ch}
.place .t>span:not(.eyebrow){display:inline-block;margin-top:12px;font-size:14px;font-weight:700;border-bottom:1px solid var(--brass);padding-bottom:3px}

/* 05 the fee */
.xfee{background:var(--char);color:var(--ivory);padding:110px 0;border-top:1px solid rgba(176,141,87,.4)}
.xfee .wrap{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:end;padding:0 var(--g) 0 calc(var(--g) + 40px)}
.xfee h2{font:500 clamp(36px,3.6vw,56px)/1.04 "EB Garamond",serif;max-width:16ch;margin-top:14px}
.xfee .lede{color:#cfc7b6;font-size:17px;margin-top:16px;max-width:42ch}
.xfee .figure{font:500 clamp(80px,11vw,176px)/.9 "EB Garamond",serif;color:#d0b27c;letter-spacing:-.03em;margin-top:36px;font-variant-numeric:lining-nums tabular-nums}
.xfee .per{color:#cfc7b6;font-size:16px;margin-top:10px}
.dial{border-top:1px solid var(--brass);padding-top:24px}
.dial .row{display:flex;justify-content:space-between;align-items:baseline}
.dial .row b{font:500 44px/1 "EB Garamond",serif}
.dial .row span{color:#cfc7b6}
.dial input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:1px;background:#6b6358;outline:none;margin:26px 0 30px}
.dial input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ivory);border:5px solid var(--ox);cursor:grab}
.dial input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ivory);border:5px solid var(--ox);cursor:grab}
.dial input[type=range]:focus-visible{outline:2px solid var(--brass);outline-offset:8px}
.dial .kinds{display:grid;grid-template-columns:1fr 1fr;margin-bottom:26px;border:1px solid #5b544a}
.dial .kinds button{font:inherit;font-size:14px;background:transparent;color:#cfc7b6;border:0;padding:12px;cursor:pointer}
.dial .kinds button[aria-pressed=true]{background:var(--ivory);color:var(--char)}
.dial .btn{display:block;width:100%;text-align:center;padding:17px;border-radius:0}

/* 06 services index */
.xindex{background:var(--ivory);padding:110px 0}
.xindex .wrap{max-width:none;padding:0 var(--g) 0 calc(var(--g) + 40px)}
.xindex h2{font:500 clamp(36px,3.6vw,56px)/1.04 "EB Garamond",serif;color:var(--char);margin:14px 0 40px}
.xrow{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) 190px;gap:24px;align-items:baseline;padding:28px 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--char)}
.xrow:last-child{border-bottom:1px solid var(--rule)}
.xrow .n{font:500 18px/1 "EB Garamond",serif;color:var(--brass)}
.xrow h3{font:500 clamp(28px,2.8vw,42px)/1 "EB Garamond",serif;transition:color .2s,transform .3s}
.xrow p{color:#5f5a52;font-size:15px}
.xrow .price{font:600 16px/1.3 "Albert Sans",sans-serif;color:var(--ox);text-align:right}
.xrow:hover h3{color:var(--ox);transform:translateX(8px)}
.float{position:fixed;left:0;top:0;width:280px;height:350px;pointer-events:none;z-index:40;overflow:hidden;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s}
.float.on{opacity:1}
.float img{width:100%;height:100%;object-fit:cover}

/* 07 leaving your agent */
.xpack{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:80vh;background:var(--ox);color:var(--ivory)}
.xpack .txt{padding:110px var(--g) 110px calc(var(--g) + 40px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(176,141,87,.55)}
.xpack blockquote{font:500 clamp(40px,5vw,84px)/1 "EB Garamond",serif;max-width:14ch;margin-top:16px}
.xpack p{font-size:18px;max-width:46ch;color:#f0dcd9;margin:26px 0 30px}
.xpack .btn{background:var(--ivory);color:var(--ox);border-radius:0;align-self:flex-start}
.xpack figure{margin:0;overflow:hidden}.xpack figure img{width:100%;height:100%;object-fit:cover;display:block}

/* the guide keeps the SEO copy */
.home #guide{padding:110px 0}
.home #guide .wrap{max-width:none;padding-left:calc(var(--g) + 40px)}
.home #guide .art h2{color:var(--ox)}
.home .xclose{background:var(--char);color:var(--ivory);padding:100px var(--g);display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid rgba(176,141,87,.4)}
.home .xclose p{font:500 clamp(30px,3.4vw,52px)/1.06 "EB Garamond",serif;max-width:18ch}
.home .xclose .btn{background:var(--ivory);color:var(--ox);border-radius:0}

/* ===== audit fixes, 2026-09-28 ===== */
/* 1, 3: the hero scales with the screen's height as well as its width, so it never looks sparse on a large monitor
   and the ledger never drops below the fold on a short laptop */
.xhero{height:100vh;min-height:620px;max-height:1200px}
.xhero .panel2{padding-top:clamp(28px,5vh,72px);padding-bottom:clamp(24px,4.5vh,56px)}
.xhero h1{font-size:clamp(46px,min(6.2vw,10.5vh),132px);margin-top:clamp(14px,2.6vh,30px)}
.xhero .lede{font-size:clamp(16px,min(1.15vw,2.1vh),21px);margin-top:clamp(14px,2.8vh,30px);max-width:40ch}
.xhero .ctas{margin-top:clamp(16px,3.2vh,36px)}
.xhero .ledger{margin-top:0}
.xhero .ledger b{font-size:clamp(26px,min(2.4vw,4.2vh),44px)}
.xhero .ledger span{font-size:clamp(12px,.85vw,15px)}
/* 2: stewardship reads at the same scale as the rest of the page on wide screens, frame aligned to the heading */
.xsteward{padding-top:0}
.xsteward .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(48px,5vw,110px)}
.xsteward .frames{top:108px;height:calc(100vh - 140px);margin-top:108px}
.xsteward .intro{padding-top:108px}
.chap p{font-size:clamp(16px,1.05vw,20px)}
.chap li{font-size:clamp(14px,.9vw,17px)}
.chap .cimg{display:none}
/* 4: the county header is compact on short screens so the captions are never cut */
.xessex .top{padding-top:clamp(18px,4vh,44px);padding-bottom:clamp(14px,2.6vh,26px)}
.xessex .track{padding-bottom:clamp(20px,4vh,40px)}
.place .t{bottom:clamp(16px,3vh,28px)}
@media (max-height:760px) and (min-width:901px){.xessex .top p{display:none}.place .t p,.place .t>span:last-child{display:none}}
/* services index: steadier columns */
.xrow{grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 200px;padding:clamp(22px,3.4vh,34px) 0}
.xrow p{font-size:clamp(15px,.95vw,17px)}
@media (min-width:1600px){.home .eyebrow{font-size:13px}.xfee .lede,.xpack p,.xessex .top p{font-size:19px}}

@media(max-width:1100px){.rail{display:none}.xhero .panel2,.xsteward .grid,.xessex .top,.xessex .track,.xfee .wrap,.xindex .wrap,.xpack .txt,.home #guide .wrap{padding-left:var(--g)}}
@media(max-width:900px){
 :root{--g:20px}
 .xhero{grid-template-columns:1fr;padding-top:68px}.xhero figure{height:48vh;order:-1}.xhero .panel2{padding:36px 20px 40px;border-right:0}
 .xmask{height:240vh}.xmask .sheet text{font-size:26vw}
 /* phone: the same fly-through, full screen. The E leads, centred and large, the headline sits at the foot */
 .xland{height:230vh;height:230svh}
 .lpin{--head:68px;--eh:min(calc(100svh - 440px),104vw,560px);--ex:calc((100vw - var(--ew)) / 2);--ey:calc(var(--head) + 22px);height:100vh;height:100svh}
 .lcopy{left:20px;right:20px;top:auto;bottom:calc(22px + env(safe-area-inset-bottom));display:block}
 .lcopy .eyebrow{font-size:11px}
 .lcopy h1{font-size:clamp(34px,10.4vw,48px);margin-top:10px}
 .lcopy .lede{font-size:15px;line-height:1.5;margin-top:12px}
 .lcopy .ctas{margin-top:16px;flex-wrap:nowrap}.lcopy .btn{padding:14px 10px;font-size:14px;flex:1;text-align:center;white-space:nowrap}
 .lcopy .ledger,.lcue{display:none}
 .lcap b{font-size:32px;padding:0 20px}.lcap span{font-size:10px;letter-spacing:.26em}
 .xhero{height:auto;max-height:none;min-height:0}
 .xsteward .grid{grid-template-columns:1fr;gap:0}.xsteward .frames{display:none}.xsteward .intro{padding-top:70px}
 .chap{min-height:0;grid-template-columns:40px 1fr}.chap .cimg{display:block;margin:0 0 22px;aspect-ratio:4/3;overflow:hidden;background:#1f1f1f}.chap .cimg img{width:100%;height:100%;object-fit:cover}
 .xessex .pin{height:auto}.xessex .top{flex-direction:column;align-items:flex-start;gap:12px}.xessex .track{flex-direction:column}.place{width:100%;height:62vh}
 .xfee .wrap,.xpack{grid-template-columns:1fr;gap:36px}.xpack figure{height:40vh}.xpack .txt{padding:70px 20px;border-right:0}
 .xrow{grid-template-columns:36px 1fr;gap:6px 14px}.xrow p,.xrow .price{grid-column:2;text-align:left}
 .home .xclose{flex-direction:column;align-items:flex-start;padding:70px 20px}
}
@media(max-width:900px) and (max-height:740px){.lpin{--eh:min(calc(100svh - 350px),104vw)}.lcopy .lede{display:none}}
@media(prefers-reduced-motion:reduce){.xland{height:auto}.lcue{display:none}.xmask{height:auto}.xmask .pin{position:relative;height:70vh}.xmask .sheet{display:none}.xmask .rshade,.xmask .say{opacity:1}}

/* slow scrollers: a hairline under the header that always moves with the scroll */
.head .readbar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* 2026-09-29 polish pass: balanced headings (no one-word last lines), the closing band and footer on the same left
   edge as every chapter, the guide's sub-heads in the display serif, a quiet hover on the services rows */
.home h1,.home h2,.home h3,.home .xclose p,.home .xmask .say p{text-wrap:balance}
.home p{text-wrap:pretty}
.home .xclose{padding:100px var(--g) 100px calc(var(--g) + 40px)}
.home footer .wrap{max-width:none;margin:0;padding:0 var(--g) 0 calc(var(--g) + 40px)}
.home #guide h3{font:500 clamp(24px,1.9vw,30px)/1.15 "EB Garamond",Garamond,serif;color:var(--char);margin-top:36px}
.xrow{position:relative;transition:background .25s}
.xrow:after{content:"\2192";position:absolute;right:-28px;top:50%;transform:translate(-8px,-50%);opacity:0;color:var(--ox);font:500 20px/1 "Albert Sans",sans-serif;transition:opacity .25s,transform .3s}
.xrow:hover:after{opacity:1;transform:translate(0,-50%)}
.xrow:focus-visible{outline:2px solid var(--ox);outline-offset:4px}
@media(max-width:1100px){.home .xclose,.home footer .wrap{padding-left:var(--g)}.xrow:after{display:none}}
.xfee .wrap{align-items:center}

/* 2026-09-29 mobile pass (Sam: "MOBILE LOOKS FUCKING SHITE COMPARED TO DESKTOP"). What was wrong on a phone: the ESSEX
   word small in an empty ivory screen, the four stewardship chapters as small inset photos with 13-15px text, the
   directors' guide as fifteen screens of dense text with no way to move around it, and small type throughout. */
@media(max-width:900px){
 /* ESSEX: the word fills the width, and the chapter is shorter so the pause is a beat, not a wait */
 .xmask{height:200vh;height:200svh}
 .xmask .sheet text{font-size:29vw}
 /* stewardship: each chapter opens with a full-bleed photograph, the number as a brass label, bigger type */
 .xsteward .intro{padding:72px 0 28px}
 .xsteward .intro h2{font-size:clamp(38px,10.5vw,48px);line-height:1.02}
 .xsteward .intro p{font-size:17px;line-height:1.6}
 .chap{display:block;padding:0 0 52px;border-top:0}
 .chap>div{grid-column:auto}
 .chap .cimg{margin:0 calc(-1 * var(--g)) 22px;aspect-ratio:5/4;border-radius:0}
 .chap .n{display:block;font:600 12px/1 "Albert Sans",sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
 .chap h3{font-size:clamp(32px,9vw,40px);margin-bottom:12px}
 .chap p{font-size:17px;line-height:1.6}
 .chap li{font-size:16px;padding:12px 0}
 /* county, fee, services, pack: a size up where it was 13-15px */
 .xessex .top p,.xfee .lede,.xpack p{font-size:17px;line-height:1.6}
 .xrow p{font-size:16px}.xrow .price{font-size:16px}
 .place .t p{font-size:16px}
 /* the directors' guide: a sticky row of chapter chips to jump around, and reading-size type */
 .home #guide{padding:64px 0 40px}
 .home #guide .guide{display:block}
 .home #guide .toc{display:flex;position:sticky;top:68px;z-index:5;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--g)) 28px;padding:12px var(--g);background:rgba(247,244,236,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
 .home #guide .toc::-webkit-scrollbar{display:none}
 .home #guide .toc b{display:none}
 .home #guide .toc a{flex:0 0 auto;white-space:nowrap;border:1px solid var(--rule);border-left:1px solid var(--rule);padding:9px 14px;font:600 14px/1 "Albert Sans",sans-serif;color:var(--char);background:#fffdf8}
 .home #guide .toc a:hover,.home #guide .toc a:focus{border-color:var(--ox);color:var(--ox)}
 .home #guide .art{font-size:17px;line-height:1.68}
 .home #guide .art article{padding-bottom:40px;margin-bottom:40px;scroll-margin-top:130px}
 .home #guide .art h2{font-size:clamp(32px,9vw,40px);margin-bottom:16px}
 .home #guide .art h3{font-size:24px;margin-top:28px}
 .home #guide .art li{margin-bottom:12px}
 .home #guide details summary{font-size:18px;padding:16px 0}
}

/* 2026-09-29 mobile motion: the county strip pins and travels sideways on phones as it does on desktop */
@media(max-width:900px){
 .xessex .pin{height:100vh;height:100svh;padding-top:68px;display:flex;flex-direction:column}
 .xessex .top{flex-direction:column;align-items:flex-start;gap:6px;padding:22px var(--g) 14px}
 .xessex .top h2{font-size:clamp(34px,9.5vw,44px)}
 .xessex .top p{display:none}
 .xessex .track{flex-direction:row;flex:1;min-height:0;gap:14px;padding:0 var(--g) 22px}
 .place{flex:0 0 82vw;width:82vw;height:auto}
 .chap .cimg{overflow:hidden}
}

/* 2026-09-29 proposal pass: assurance strip, folded guide sections, switch line */
.xassure{background:var(--ivory);border-bottom:1px solid var(--rule)}
.xassure .wrap{max-width:none;padding:0 var(--g) 0 calc(var(--g) + 40px);display:grid;grid-template-columns:repeat(4,1fr)}
.xassure .wrap>div{padding:46px 28px 50px 0;border-right:1px solid var(--rule);margin-right:28px}
.xassure .wrap>div:last-child{border-right:0;margin-right:0}
.xassure .n{display:block;font:italic 500 18px/1 "EB Garamond",serif;color:var(--brass);margin-bottom:14px}
.xassure b{display:block;font:500 clamp(22px,1.8vw,28px)/1.12 "EB Garamond",serif;color:var(--char);margin-bottom:10px}
.xassure .wrap>div>span:last-child{display:block;font-size:15px;line-height:1.55;color:#5f5a52;max-width:30ch}
.xindex .switchline{margin-top:44px}
.home #guide .switchline{margin:10px 0 46px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.home #guide details.more{border:0;margin:6px 0 0}
.home #guide details.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:10px 0;font:600 13px/1 "Albert Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ox)}
.home #guide details.more>summary::-webkit-details-marker{display:none}
.home #guide details.more>summary:after{content:"+";font:300 22px/1 "Albert Sans",sans-serif;color:var(--brass);transition:transform .25s}
.home #guide details.more[open]>summary{margin-bottom:6px}.home #guide details.more[open]>summary:after{transform:rotate(45deg)}
.home #guide details.more>div{animation:foldin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes foldin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.home #guide article+article{margin-top:56px}
@media(max-width:1100px){.xassure .wrap{padding-left:var(--g)}}
@media(max-width:900px){.xassure .wrap{grid-template-columns:1fr 1fr}.xassure .wrap>div{padding:34px 18px 34px 0;margin-right:18px}.xassure .wrap>div:nth-child(2){border-right:0;margin-right:0}.xassure .wrap>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}.xassure .wrap>div:nth-child(n+3){padding-top:30px}
 .home #guide details.more>summary{font-size:12px;padding:14px 0}}
@media(max-width:520px){.xassure .wrap{grid-template-columns:1fr}.xassure .wrap>div{border-right:0;margin-right:0;padding:26px 0;border-bottom:1px solid var(--rule)}.xassure .wrap>div:last-child{border-bottom:0}.xassure .wrap>div:nth-child(n+3){padding-top:26px}}
@media(max-width:560px){.lcopy .ctas{display:grid;grid-template-columns:1fr;gap:10px;max-width:340px}.lcopy .ctas .btn{text-align:center;padding:14px 16px}}

/* 2026-09-30 (Sam's iPhone): the headline line masks cut the tail of the "g"; room below each line for descenders,
   given back with a negative margin so the spacing does not change */
.xhero h1 .line,.lcopy h1 .line{padding-bottom:.24em;margin-bottom:-.18em}
.xmask .say p{padding-bottom:.08em}
/* ebm-polish-2026-10-13 */
.xplate{background:var(--ox,#85010c);padding:clamp(44px,6vw,76px) 20px;border-top:1px solid rgba(176,141,87,.45);border-bottom:1px solid rgba(176,141,87,.45)}
.xplate .pl{position:relative;margin:0 auto;max-width:720px;background:#f7f4ec;border:1px solid #b08d57;outline:1px solid rgba(176,141,87,.5);outline-offset:6px;padding:clamp(26px,3.4vw,40px) clamp(22px,4vw,56px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;overflow:hidden;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.xplate a{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:#1f1f1f}
.xplate img{height:clamp(46px,5.4vw,66px);width:auto;position:static;display:block}
.xplate small{font:600 10.5px/1 "Albert Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#85010c}
.xplate a:hover small,.xplate a:focus-visible small{text-decoration:underline;text-underline-offset:4px}
.xplate .rule{display:block;width:1px;height:clamp(60px,7vw,86px);background:#b08d57;margin:0 clamp(22px,4vw,54px);transform-origin:center}
.xplate .pl::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;transform:skewX(-18deg) translateX(-120%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);pointer-events:none}
.xplate.pre .rule{transform:scaleY(0)}.xplate.pre a{opacity:0;transform:translateY(10px)}
.xplate.go .rule{animation:pl-rule .9s cubic-bezier(.2,.7,.2,1) both}
.xplate.go a{animation:pl-in .9s cubic-bezier(.2,.7,.2,1) both}.xplate.go a:last-child{animation-delay:.18s}
.xplate.go .pl::after{animation:pl-sheen 1.6s .7s ease-in-out both}
@keyframes pl-rule{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pl-sheen{to{transform:skewX(-18deg) translateX(560%)}}
@media (max-width:560px){.xplate .pl{grid-template-columns:1fr;row-gap:22px}.xplate .rule{width:56px;height:1px;margin:0 auto}.xplate.pre .rule{transform:scaleX(0)}@keyframes pl-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
@media (prefers-reduced-motion:reduce){.xplate *,.xplate .pl::after{animation:none!important}}
.wa-btn{transition:opacity .25s ease,transform .25s ease,box-shadow .2s}
.wa-btn.wa-dim{opacity:.28!important;transform:scale(.9)!important}
.wa-btn.wa-away{opacity:0!important;pointer-events:none!important;transform:translateY(16px)!important}
@media (max-width:700px){.wa-btn{font-size:0;gap:0;padding:14px;border-radius:50%}.wa-btn svg{width:24px;height:24px}}
@media (max-width:900px){.home #guide .toc,.toc{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);scroll-snap-type:x proximity;padding-right:56px}.toc a{scroll-snap-align:start;font-size:13px;padding:8px 12px}}
.ledger{border-top-color:rgba(176,141,87,.75)}
.ledger>div{padding:18px 20px 2px 22px!important;border-left:1px solid rgba(176,141,87,.38)}
.ledger>div:first-child{padding-left:0!important;border-left:0}
.ledger b{font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.ledger span{font:600 11px/1.45 "Albert Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#e9d3cf;margin-top:10px;max-width:22ch}