/* J. Thomas Law: inner pages. Loaded after style.css (which keeps the header, footer, buttons and form).
   One motif: the Kennesaw Mountain ridge from her logo. Grounds: magnolia, cream, sage mist. Green is ink. */

:root{
  --magnolia:#fbf8f1;--cream:#f3eee2;--mist:#e5ece6;--mist-2:#d3e0d6;--rule:#e2dacb;
  --t-display:clamp(2.9rem,6vw,5.6rem);
  --t-section:clamp(2.1rem,3.5vw,3.3rem);
  --t-statement:clamp(1.35rem,2.1vw,1.9rem);
  --gap-sec:clamp(88px,10vw,150px);
  --out:cubic-bezier(.16,1,.3,1);
  --ridge-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 139.4 34.44'%3E%3Cpath d='M0 34.4C19.7 34.4 31.2 21.3 42.6 14.8 49.2 11.5 54.1 13.1 59 17.2 64 20.5 68.1 19.7 73.8 13.1 82 3.3 90.2 0 98.4 3.3 109.9 8.2 119.7 24.6 139.4 34.4Z' fill='%238a6224'/%3E%3C/svg%3E");
}
body.inner{background:var(--magnolia)}
.inner .site-top{background:var(--magnolia)}
.inner ::selection{background:var(--mist-2);color:var(--deep)}
.inner main{display:block}
.inner :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.inner .num,.inner .tnum{font-variant-numeric:tabular-nums lining-nums}

/* breadcrumb */
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15.5px;color:var(--muted)}
.trail a{color:var(--accent);font-weight:600;text-decoration:none}
.trail a:hover{text-decoration:underline;text-underline-offset:4px}
.trail svg{width:9px;height:9px;opacity:.55}

/* ---------- opener ---------- */
.op{padding-top:clamp(26px,3.6vw,52px)}
.op-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:end}
.op .trail{grid-column:1/-1;margin-bottom:clamp(22px,3.4vw,46px)}
.op-title{grid-column:1/8;font-size:var(--t-display);line-height:.98;letter-spacing:-.024em;color:var(--deep);font-weight:400}
.op-side{grid-column:8/13;padding-bottom:.5rem}
.op-lede{font-size:clamp(17.5px,1.35vw,19.5px);line-height:1.6;max-width:44ch}
.op-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.op-acts .btn{min-height:54px;padding:13px 24px}
.op--wide .op-title{grid-column:1/10}
.op--wide .op-side{grid-column:1/8;margin-top:26px}

/* the photograph that rises through the ridge */
.rise-fig{margin:clamp(-8px,-1vw,0px) 0 0}
.rise{position:relative;height:clamp(300px,48vh,560px);overflow:hidden;background:var(--cream)}
.rise img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rise .sky{position:absolute;left:0;top:-1px;width:100%;height:auto;aspect-ratio:1440/240;z-index:1;pointer-events:none;color:var(--magnolia);overflow:visible}
.rise .sky .fill{fill:currentColor}
.rise .sky .gold{fill:none;stroke:var(--gold);stroke-width:2.5;vector-effect:non-scaling-stroke}
.rise--mirror .sky{transform:scaleX(-1)}
.rise-cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;width:var(--wrap);margin:12px auto 0;font-size:14px;line-height:1.45;color:var(--muted)}
.rise-cap b{font-weight:600;color:var(--ink)}
@keyframes rise-up{from{clip-path:inset(100% 0 0 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:none}}
.js .rise img{animation:rise-up 1.15s var(--out) .12s both}

/* ---------- blocks ---------- */
.blk{padding-block:var(--gap-sec);position:relative}
.blk--cream{background:var(--cream)}
.blk--mist{background:var(--mist)}
.blk--tight{padding-block:clamp(64px,7vw,104px)}
.blk-h{font-size:var(--t-section);color:var(--deep);max-width:22ch;letter-spacing:-.015em}
.blk-intro{font-size:clamp(17.5px,1.3vw,19px);max-width:60ch;margin-top:18px}
.blk-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.blk-head .blk-h{grid-column:1/7}
.blk-head .blk-intro{grid-column:7/13;margin:0 0 .35rem}
.statement{font-family:var(--serif);font-size:var(--t-statement);line-height:1.3;color:var(--deep);letter-spacing:-.006em}
.copy p+p{margin-top:1em}
.copy p{max-width:62ch}
.fine{font-size:15.5px;line-height:1.55;color:var(--muted)}

/* the ridge as a bullet */
.marks{list-style:none;margin:0;padding:0}
.marks li{position:relative;padding-left:32px;line-height:1.55}
.marks li+li{margin-top:12px}
.marks li:before{content:'';position:absolute;left:0;top:.58em;width:22px;height:6px;background:var(--ridge-mark) center/contain no-repeat}
.marks--big li{font-size:clamp(17.5px,1.3vw,19px)}

/* text link with an arrow drawn, not typed */
.go{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .2s}
.go:after{content:'';width:16px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s var(--out)}
.go:hover{text-decoration-color:currentColor}
.go:hover:after{transform:translateX(4px)}

/* photographs */
.pic{margin:0;position:relative;overflow:hidden;background:var(--cream)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic-cap{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.pic-cap b{font-weight:600;color:var(--ink)}

/* ---------- the closing horizon ---------- */
.horizon{position:relative;overflow:hidden;background:var(--magnolia);padding:clamp(72px,8vw,120px) 0 clamp(150px,16vw,250px);isolation:isolate}
.horizon-ridge{position:absolute;right:-5vw;bottom:-2px;width:min(1400px,94vw);height:auto;z-index:-1;fill:var(--mist)}
.horizon-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:end}
.horizon h2{grid-column:1/8;font-size:var(--t-section);color:var(--deep);max-width:16ch}
.horizon-say{grid-column:1/7;margin-top:20px;font-size:clamp(17.5px,1.3vw,19px);max-width:46ch}
.horizon-call{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 40px;margin-top:clamp(30px,3.6vw,48px)}
.horizon-phone{font-family:var(--serif);font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.02em;color:var(--deep);text-decoration:none;white-space:nowrap}
.horizon-phone:hover{color:var(--accent)}
.horizon-ways{display:flex;flex-direction:column;gap:6px;font-size:16.5px}
.horizon-ways a{color:var(--accent);font-weight:600}
.horizon-hours{grid-column:1/-1;margin-top:20px;font-size:15.5px;color:var(--muted)}
.also{grid-column:1/-1;margin-top:clamp(40px,5vw,64px);font-size:16.5px;max-width:70ch}
.also a{color:var(--accent);font-weight:600}

/* ---------- reading pages (privacy, terms) ---------- */
.doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.doc-nav{position:sticky;top:calc(var(--top-h,128px) - var(--util-h,39px) + 28px);font-size:16px}
.doc-nav p{font-weight:700;color:var(--deep);margin-bottom:12px}
.doc-nav ol{list-style:none;margin:0;padding:0}
.doc-nav li+li{margin-top:9px}
.doc-nav a{color:var(--muted);text-decoration:none}
.doc-nav a:hover,.doc-nav a.is-here{color:var(--accent)}
.doc-body h2{font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--deep);margin:clamp(48px,5vw,64px) 0 16px;scroll-margin-top:120px}
.doc-body h2:first-child{margin-top:0}
.doc-body p,.doc-body li{max-width:68ch}
.doc-body p+p{margin-top:1em}
.doc-body ul{margin:14px 0 0;padding:0}
.doc-body address{font-style:normal;margin-top:12px;line-height:1.7}
.short{background:var(--cream);padding:clamp(28px,3.6vw,48px);margin-bottom:clamp(48px,6vw,80px)}
.short h2{margin:0 0 18px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .op-title,.op--wide .op-title{grid-column:1/-1}
  .op-side,.op--wide .op-side{grid-column:1/-1;margin-top:22px}
  .blk-head .blk-h,.blk-head .blk-intro{grid-column:1/-1}
  .blk-head .blk-intro{margin-top:18px}
  .horizon h2,.horizon-say{grid-column:1/-1}
  .doc{grid-template-columns:1fr}
  .doc-nav{position:static}
}
@media (max-width:760px){
  .op{padding-top:18px}
  .op .trail{margin-bottom:18px;font-size:14.5px}
  .op-title{font-size:clamp(2.55rem,11vw,3.4rem)}
  .op-acts{margin-top:22px}
  .op-acts .btn{width:100%}
  .rise{height:clamp(220px,34vh,320px)}
  .rise-cap{font-size:13.5px}
  .horizon{padding-bottom:clamp(120px,36vw,170px)}
  .horizon-ridge{width:130vw;right:-30vw}
  .horizon-phone{font-size:clamp(2.4rem,11vw,3.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .js .rise img{animation:none}
  .go:after{transition:none}
}

/* ================= About ================= */
.route{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.route-map{position:sticky;top:calc(var(--top-h,128px) - var(--util-h,39px) + 16px);height:calc(100vh - var(--top-h,128px) + var(--util-h,39px) - 32px);max-height:860px;display:flex;align-items:center;justify-content:center}
.route-svg{width:100%;height:100%;display:block}
.route-svg .st path{fill:var(--cream);stroke:#d4cab6;stroke-width:1}
.route-svg .st-ga{fill:var(--mist);stroke:#a9bdb0;stroke-width:1.2}
.route-svg .st-names text{font:500 13px var(--sans);fill:#8d8a7e;letter-spacing:.01em}
.route-svg .seg{fill:none;stroke:var(--deep);stroke-width:3.2;stroke-linecap:round}
.route-svg .city circle{fill:var(--magnolia);stroke:var(--deep);stroke-width:3;transition:fill .4s,r .4s}
.route-svg .city text{font:600 17px var(--sans);fill:var(--deep);paint-order:stroke;stroke:var(--magnolia);stroke-width:5px;stroke-linejoin:round;transition:opacity .4s}
.js .route[data-ready] .seg{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--out)}
.js .route[data-ready] .seg.on{stroke-dashoffset:0}
.js .route[data-ready] .city text{opacity:.35}
.js .route[data-ready] .city.on text{opacity:1}
.route .city.here circle{fill:var(--deep)}
.legs{list-style:none;margin:0;padding:0}
.leg{padding:clamp(40px,9vh,110px) 0;min-height:52vh;display:flex;flex-direction:column;justify-content:center}
.leg:first-child{padding-top:0;min-height:44vh;justify-content:flex-start}
.leg-h{font-size:clamp(1.8rem,2.8vw,2.6rem);color:var(--deep);margin-bottom:16px;transition:color .4s}
.js .route[data-ready] .leg .leg-h{color:#9aa79f}
.js .route[data-ready] .leg.is-on .leg-h{color:var(--deep)}
.leg p{max-width:52ch}
.leg .marks{margin-top:20px}
.leg-ph{margin:30px 0 0}
.leg-ph .pic{aspect-ratio:3/2}
.leg-cobb{margin:30px 0 0;background:var(--cream);padding:clamp(14px,2vw,24px)}
.cobb-svg{width:100%;height:auto;display:block}
.cobb-svg .co path{fill:var(--magnolia);stroke:#d4cab6;stroke-width:1}
.cobb-svg .co-cobb{fill:var(--mist);stroke:var(--accent);stroke-width:2}
.cobb-svg .km path{fill:var(--accent)}
.cobb-svg .pt circle{fill:var(--deep)}
.cobb-svg .pt.here circle{fill:var(--bronze);stroke:var(--magnolia);stroke-width:3}
.cobb-svg text{font:600 16px var(--sans);fill:var(--deep);paint-order:stroke;stroke:var(--magnolia);stroke-width:5px;stroke-linejoin:round}
.cobb-svg .co-name{font:italic 400 19px var(--serif);fill:var(--accent);stroke:none}
.cobb-svg .km-l{font-weight:500;fill:var(--accent)}

.how-me{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:center}
.how-portrait .pic{aspect-ratio:4/5;background:#e1d9c9}
.how-text{margin-top:26px;font-size:clamp(17.5px,1.3vw,19px)}
.how-list{margin-top:26px}
.how-more{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:34px}

.record{max-width:980px;margin:0 auto;background:var(--cream);padding:clamp(48px,7vw,104px) clamp(22px,7vw,110px);text-align:center}
.record-logo{width:min(240px,62%);height:auto;margin:0 auto}
.record-name{font-size:clamp(2.2rem,4.4vw,3.6rem);color:var(--deep);margin-top:clamp(30px,4vw,48px)}
.record-sub{margin-top:10px;color:var(--muted)}
.record-honor{margin-top:clamp(40px,5vw,64px)}
.record h3{font-size:clamp(1.3rem,1.9vw,1.6rem);color:var(--deep)}
.record-honor h3{font-size:clamp(1.45rem,2.3vw,2rem)}
.record-honor > p{margin-top:6px;color:var(--muted)}
.years{list-style:none;margin:22px auto 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:4px clamp(14px,2.6vw,34px)}
.years li{font-family:var(--serif);font-size:clamp(1.5rem,3.7vw,3.1rem);line-height:1.05;color:var(--accent);font-variant-numeric:lining-nums}
.record-mark{display:block;width:46px;height:12px;margin:clamp(36px,4.6vw,56px) auto;background:var(--ridge-mark) center/contain no-repeat;opacity:.9}
.record-part h3{margin-bottom:18px}
.record-entry+.record-entry{margin-top:18px}
.record-entry p{line-height:1.5}
.record-what{font-weight:600;color:var(--ink)}
.record-entry .fine{margin-top:2px}
.record-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}

@media (max-width:1000px){
  .route{grid-template-columns:1fr;gap:20px}
  .route-map{position:relative;top:auto;height:auto;max-height:none;max-width:560px;margin:0 auto;width:100%}
  .route-svg{height:auto}
  .leg,.leg:first-child{min-height:0;padding:36px 0}
  .how-me{grid-template-columns:1fr}
  .how-portrait{max-width:440px}
}
@media (max-width:760px){
  .record-pair{grid-template-columns:1fr;gap:0}
  .record-pair .record-part+.record-part{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .js .route[data-ready] .seg{transition:none}
}

/* ================= Practice Areas ================= */
.sorter-top{display:flex;justify-content:space-between;align-items:end;gap:28px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
/* segmented choice used by the sorter and the choosers */
.who{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.who legend{font-size:15.5px;font-weight:600;color:var(--muted);margin-bottom:10px;padding:0;width:100%}
.who label{position:relative;margin:0;font-weight:600;font-size:16px;cursor:pointer}
.who input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;min-height:0}
.who span{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;background:rgba(29,58,50,.075);color:var(--deep);transition:background .25s,color .25s,box-shadow .25s}
.who label:hover span{background:rgba(29,58,50,.14)}
.who input:checked+span{background:var(--deep);color:#fff}
.who input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}

@keyframes sit-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.index{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,80px);row-gap:clamp(36px,4vw,56px)}
.index-h{font-size:clamp(1.5rem,2.2vw,1.9rem);color:var(--deep);margin-bottom:14px}
.index ul{list-style:none;margin:0;padding:0}
.index li a,.index-both{display:grid;grid-template-columns:84px 1fr;gap:22px;align-items:center;padding:18px 0;text-decoration:none;color:inherit}

.index img{width:84px;height:84px;object-fit:cover;transition:transform .5s var(--out)}
.index b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.2;color:var(--deep)}
.index i{display:block;font-style:normal;font-size:16px;line-height:1.5;color:var(--muted);margin-top:4px}
.index a:hover b{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.index a:hover img{transform:scale(1.06)}
.index-both{grid-column:1/-1;grid-template-columns:150px 1fr;gap:32px;background:var(--mist);padding:24px clamp(20px,3vw,40px) 24px 24px}
.index-both img{width:150px;height:150px}
.index-both b{font-size:clamp(1.7rem,2.6vw,2.3rem)}
.index-both i{font-size:17px;max-width:62ch}

@media (max-width:1000px){
  .index{grid-template-columns:1fr}
}
@media (max-width:760px){
  .who{gap:6px}
  .who span{padding:8px 15px;min-height:44px;font-size:15px}
  .index li a{grid-template-columns:64px 1fr;gap:16px}
  .index img{width:64px;height:64px}
  .index-both{grid-template-columns:1fr;gap:18px}
  .index-both img{width:100%;height:180px}
}
.op--plain{padding-bottom:clamp(64px,7vw,104px)}
.blk:not(.blk--cream):not(.blk--mist) + .horizon{padding-top:0}

/* ================= Civil Litigation ================= */
.xlate{list-style:none;margin:0;padding:0}
.xlate li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,88px);align-items:start;padding:clamp(28px,3.4vw,46px) 0}

.xl-say{font-family:var(--serif);font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.18;letter-spacing:-.012em;color:var(--deep);text-indent:-.42em}
.xl-law h3{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--bronze);letter-spacing:.005em;margin:.5em 0 8px}
.xl-law p{max-width:46ch}
.xl-law .go{margin-top:14px}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.side{background:var(--magnolia);padding:clamp(28px,3.4vw,48px)}
.side h3{font-size:clamp(1.5rem,2.2vw,1.9rem);color:var(--deep);margin-bottom:14px}
.side > p{max-width:50ch}
.side .marks{margin-top:22px}
.one-lit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,7vw,120px);align-items:center}
.one-ph .pic{aspect-ratio:4/5}
.one-st{margin-top:24px;max-width:34ch}
.one-p{margin-top:20px;max-width:56ch}
@media (max-width:1000px){
  .xlate li{grid-template-columns:1fr;gap:14px}
  .sides,.one-lit{grid-template-columns:1fr}
  .one-ph{max-width:420px}
}

/* ================= choosers (Family, HOA, Fees) ================= */
.chooser-top{display:flex;justify-content:space-between;align-items:end;gap:28px 48px;flex-wrap:wrap;margin-bottom:clamp(36px,4.4vw,64px)}
.js .chooser[data-ready] [data-pane]:not(.is-shown){display:none}
.js .chooser[data-ready] .pane.is-shown{animation:pane-in .55s var(--out) both}
@keyframes pane-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.pane+.pane{margin-top:72px}
.js .chooser[data-ready] .pane+.pane{margin-top:0}
.pane-ph .pic{aspect-ratio:1/1}
.pane-copy .statement{max-width:28ch;margin-bottom:clamp(20px,2.6vw,34px)}
.matter{padding:14px 0}

.matter h3{font-size:clamp(1.4rem,2vw,1.75rem);color:var(--deep);margin-bottom:8px}
.matter p{max-width:54ch}

/* ================= Family ================= */
.reach-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(36px,7vw,120px);align-items:center}
.reach-st{margin-top:24px;max-width:36ch}
.reach-list{margin-top:30px}
.reach-ph .pic{aspect-ratio:5/6}
@media (max-width:1000px){
  .pane,.reach-in{grid-template-columns:1fr}
  .pane-ph{max-width:460px}
  .reach-ph{max-width:380px}
}
@media (prefers-reduced-motion:reduce){.js .chooser[data-ready] .pane.is-shown{animation:none}}

/* ================= Estate: four documents, fanned ================= */
.desk-in{max-width:920px;margin:0 auto}
.fan{display:grid;padding-top:0}
.sheet{grid-area:auto;background:#fffdf8;padding:0 clamp(24px,4vw,60px) clamp(28px,4vw,52px);box-shadow:0 1px 0 rgba(20,42,36,.05),0 18px 40px -28px rgba(20,42,36,.45);transition:transform .6s var(--out),box-shadow .4s} /* taste-skill-ignore: a sheet of paper lying on the page */
.sheet+.sheet{margin-top:22px}
.sheet-kind{margin:0;text-align:center}
.sheet-kind button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:clamp(18px,2.4vw,24px) 0;font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);font-variant:small-caps;letter-spacing:.04em;color:var(--ink);transition:color .25s}
.sheet-kind button:hover{color:var(--accent)}
.sheet-kind button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.sheet-q{font-family:var(--serif);font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1.15;color:var(--deep);margin:clamp(10px,1.6vw,20px) 0 16px;max-width:22ch}
.sheet-body > p:not(.sheet-q):not(.sheet-sign){max-width:54ch}
.sheet-sign{display:flex;gap:28px;padding-top:clamp(30px,4vw,48px);font-size:14px;color:var(--muted)}
.sheet-sign span{flex:1;padding-top:8px;border-top:1px solid #b9b2a3} /* taste-skill-ignore: the signature line of a document */
.sheet-sign span:last-child{flex:.5}
/* with the script: one stack, the chosen sheet in front, the others peeking out above it by their titles */
.fan[data-ready]{--peek:clamp(56px,6vw,68px);padding-top:calc(var(--peek) * 3)}
.fan[data-ready] .sheet{grid-area:1/1;margin:0;transform:translateY(calc(var(--rank,0) * var(--peek) * -1)) rotate(calc(var(--rank,0) * var(--tilt,.5deg)));z-index:calc(10 - var(--rank,0))}
.fan[data-ready] .sheet:nth-child(odd){--tilt:-.45deg}
.fan[data-ready] .sheet:not(.is-front) .sheet-body{visibility:hidden}
.fan[data-ready] .sheet:not(.is-front){box-shadow:0 -6px 18px -14px rgba(20,42,36,.4)} /* taste-skill-ignore: sheets behind the front one in the stack */
.fan[data-ready] .sheet.is-front{box-shadow:0 1px 0 rgba(20,42,36,.05),0 30px 60px -30px rgba(20,42,36,.55)} /* taste-skill-ignore: the sheet on top of the stack */
.fan[data-ready] .sheet.is-front .sheet-kind button{cursor:default;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.nowgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,7vw,120px);align-items:start}
.now-list{margin-top:30px}
.flat{background:var(--magnolia);padding:clamp(28px,3.6vw,52px)}
.flat-big{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;color:var(--deep);letter-spacing:-.02em}
.flat-say{margin:18px 0 22px;max-width:40ch}
@media (max-width:1000px){
  .desk-in,.nowgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.sheet{display:flex;flex-direction:column} /* taste-skill-ignore: a sheet of paper lying on the page */
.sheet-sign{margin-top:auto!important;padding-top:clamp(30px,4vw,52px)}
.flat-big{font-size:clamp(2.3rem,3.9vw,3.6rem);white-space:nowrap}

/* ================= Property: the plat ================= */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plat-wrap{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(28px,4.6vw,72px);align-items:start}
.plat{position:relative;background:var(--cream)}
.plat-svg{display:block;width:100%;height:auto}
.plat-svg .p-paper{fill:#f6f1e4}
.plat-svg .p-street{fill:#e9e2d2}
.plat-svg .p-curb{stroke:#b9ae97;stroke-width:2}
.plat-svg .p-lot{fill:none;stroke:var(--deep);stroke-width:2.5;transition:fill .4s,stroke-width .4s}
.plat-svg .p-lot-n{stroke:#7d8f84;stroke-width:1.5}
.plat-svg .p-line{stroke:var(--deep);stroke-width:2;stroke-dasharray:14 6 3 6;fill:none}
.plat-svg .p-house{fill:#fbf8f1;stroke:var(--deep);stroke-width:2}
.plat-svg .p-drive{fill:#e7e0cf;stroke:#a99f88;stroke-width:1.5;transition:fill .4s}
.plat-svg .p-garage{fill:#fbf8f1;stroke:var(--deep);stroke-width:2}
.plat-svg .p-path{fill:none;stroke:#cdbf9f;stroke-width:16;stroke-linecap:round;opacity:.65;transition:stroke .4s,opacity .4s}
.plat-svg .p-steps circle{fill:#a99f88;transition:fill .4s}
.plat-svg .p-waves{fill:none;stroke:#a99f88;stroke-width:2.5;stroke-linecap:round;transition:stroke .4s}
.plat-svg .p-fence{stroke:#7d8f84;stroke-width:5;stroke-dasharray:2 7;fill:none}
.plat-svg .p-lab{font:600 17px var(--sans);fill:#5d6b62}
.plat-svg .p-big{font:400 26px var(--serif);fill:var(--deep)}
.plat-svg .p-street-lab{font:600 18px var(--sans);fill:#8d846f;letter-spacing:.2em}
.plat-svg .p-north path{fill:var(--deep)}
/* highlight the part of the drawing that is picked */
.plat:has(input[value=deed]:checked) .g-deed .p-lot{fill:rgba(42,84,70,.10);stroke-width:4.5}
.plat:has(input[value=easement]:checked) .p-drive{fill:#cfe0d4;stroke:var(--accent)}
.plat:has(input[value=trespass]:checked) .p-path{stroke:var(--bronze);opacity:.45}
.plat:has(input[value=trespass]:checked) .p-steps circle{fill:var(--bronze)}
.plat:has(input[value=nuisance]:checked) .p-waves{stroke:var(--bronze)}
.plat:has(input[value=nuisance]:checked) .p-shop{fill:#f3e6cf}
.pins{position:absolute;inset:0;display:block}
.pins label{position:absolute;transform:translate(-50%,-50%);margin:0}
.pins span{min-height:40px;padding:6px 16px;font-size:15px;background:#fffdf8;box-shadow:0 0 0 1.5px var(--accent) /* taste-skill-ignore: a pin sitting on the drawing needs its own edge */}
.pins input:checked+span{background:var(--bronze)}
.plat-note h3{font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--deep);margin-bottom:12px}
.plat-note{display:block}
.plat-note .note-ph{margin-top:24px;aspect-ratio:3/2}
.plat-fine{margin-top:16px}
.early{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.early-p{margin-top:28px;max-width:58ch}
@media (max-width:1000px){
  .plat-wrap,.early{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pins span{min-height:34px;padding:4px 10px;font-size:13px}
}

/* ================= Business litigation ================= */
.dip{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(24px,3.4vw,52px);align-items:center}
.dip .pic{aspect-ratio:3/4}
.dip-mid{text-align:center;padding:0 clamp(0px,1vw,16px)}
.dip-mid .statement{margin:0 auto}
.dip-p{margin:22px auto 0;max-width:40ch}
.ledger-t{width:100%;border-collapse:collapse;font-size:17px}
.ledger-t th,.ledger-t td{text-align:left;vertical-align:top;padding:22px 24px 22px 0}
.ledger-t thead th{font-size:15px;font-weight:700;color:var(--bronze);padding-top:0;padding-bottom:14px;border-bottom:2px solid var(--deep)}
.ledger-t tbody tr{border-bottom:1px solid #d9d0bd}
.ledger-t tbody th{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2;color:var(--deep);width:26%}
.ledger-t td{width:37%;line-height:1.55}
.ledger-t td .go{margin-top:8px;display:inline-flex}

/* ================= Contracts: the clause ================= */
.clause{display:grid;grid-template-columns:minmax(0,7.5fr) minmax(0,4.5fr);gap:clamp(24px,4vw,64px);align-items:start}
.clause-page{background:#fffdf8;padding:clamp(28px,4.4vw,64px);font-family:var(--serif);font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.75;color:#2d2c26;box-shadow:0 18px 40px -30px rgba(20,42,36,.5)} /* taste-skill-ignore: a sheet of paper lying on the page */
.clause-page p+p{margin-top:1.1em}
.clause-page b{font-weight:600}
.clause-kind{text-align:center;font-variant:small-caps;letter-spacing:.05em;font-size:1.15em;margin-bottom:1.4em!important;color:var(--ink)}
.clause-kind span{display:block;font-family:var(--sans);font-variant:normal;letter-spacing:0;font-size:13.5px;color:var(--bronze);font-weight:700;margin-top:2px}
.mk{font:inherit;color:inherit;background:rgba(201,166,107,.28);border:0;padding:0 .12em;margin:0;cursor:pointer;border-radius:2px;text-align:inherit;transition:background .25s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mk:hover,.mk.is-on,.mk:focus-visible{background:rgba(42,84,70,.2)}
.clause-page sup{font-family:var(--sans);font-size:.62em;font-weight:700;color:var(--accent);margin-left:1px}
.clause-notes{list-style:none;margin:0;padding:0;counter-reset:n}
.clause-notes li{position:relative;padding:12px 0 12px 46px;font-size:17px;line-height:1.5;color:var(--ink);transition:color .25s}

.clause-notes li:before{content:attr(data-n);position:absolute;left:0;top:13px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--accent);border:1.5px solid var(--accent);transition:background .25s,color .25s}
.clause-notes li.is-on:before{background:var(--accent);color:#fff}
.clause-notes li.is-on{color:var(--deep)}
.clause[data-ready] .clause-notes li:not(.is-on){color:var(--muted)}
.clause-fine{margin-top:18px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.two h3{font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--deep);margin-bottom:12px}
.two-ph .pic{aspect-ratio:4/5}
.two-ph img{object-position:50% 50%}
.two-fee{margin-top:16px;font-weight:600;color:var(--accent)}

/* ================= Formation: steps that grow ================= */
.grow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,20px);align-items:end}
.grow-head{grid-column:1/-1;margin-bottom:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:end}
.grow-head .blk-h{grid-column:1/7}
.grow-head .blk-intro{grid-column:7/13;margin:0 0 .35rem}
.grow-step .pic{width:100%}
.grow-step h3{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.4rem,2vw,1.75rem);color:var(--deep);margin:20px 0 8px}
.grow-n{font-family:var(--serif);font-size:1.5em;line-height:.8;color:var(--bronze)}
.grow-step p{max-width:40ch;min-height:5.2em}
.g1{grid-column:1/4}.g1 .pic{height:clamp(200px,24vw,330px)}
.g2{grid-column:4/8}.g2 .pic{height:clamp(260px,32vw,450px)}
.g3{grid-column:8/13}.g3 .pic{height:clamp(320px,42vw,600px)}

@media (max-width:1000px){
  .dip{grid-template-columns:1fr 1fr}
  .dip-mid{grid-column:1/-1;grid-row:1;text-align:left;padding:0}
  .dip-mid .statement,.dip-p{margin-left:0}
  .ledger-t thead{display:none}
  .ledger-t,.ledger-t tbody,.ledger-t tr,.ledger-t th,.ledger-t td{display:block;width:auto}
  .ledger-t tbody tr{padding:22px 0}
  .ledger-t th,.ledger-t td{padding:4px 0}
  .clause,.two{grid-template-columns:1fr}
  .two-ph{max-width:420px}
  .grow-head .blk-h,.grow-head .blk-intro{grid-column:1/-1}
  .grow-head .blk-intro{margin-top:16px}
  .g1,.g2,.g3{grid-column:1/-1;margin-bottom:36px}
  .g1 .pic{height:44vw}.g2 .pic{height:56vw}.g3 .pic{height:70vw}
  .grow-step p{min-height:0}
}
@media (max-width:760px){
  .dip{grid-template-columns:1fr}
  .dip .pic{aspect-ratio:4/3}
}
@media (min-width:1001px){
  .grow{grid-template-rows:auto auto auto}
  .grow-head{grid-row:1}
  .grow-step{grid-row:2/span 2;display:grid;grid-template-rows:subgrid}
  .grow-step .pic{align-self:end}
  .grow-step p{min-height:0}
}

/* ================= HOA: the escalation ladder ================= */
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,14px);align-items:end}
.rung{padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column}
.r1{background:var(--cream);min-height:clamp(300px,30vw,380px)}
.r2{background:var(--mist);min-height:clamp(360px,36vw,460px)}
.r3{background:var(--mist-2);min-height:clamp(420px,42vw,540px)}
.rung h3{font-size:clamp(1.5rem,2.2vw,1.95rem);color:var(--deep);margin-bottom:14px;max-width:14ch}
.rung .eg{font-family:var(--serif);font-size:clamp(1.12rem,1.45vw,1.28rem);line-height:1.4;color:var(--ink);max-width:34ch}
.rung-me{margin-top:auto;padding-top:24px;max-width:36ch;font-weight:500}
.rung-me:before{content:'';display:block;width:30px;height:8px;margin-bottom:12px;background:var(--ridge-mark) left/contain no-repeat}
.pair{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4.4fr) minmax(0,4fr);gap:clamp(24px,3.6vw,56px);align-items:center}
.pair .pic{aspect-ratio:4/5}
.pair-mid .statement{margin-top:20px}
.pair-fee{margin-top:20px;max-width:40ch}
.pair-b{margin-top:clamp(0px,8vw,120px)}
.pair-a{margin-bottom:clamp(0px,8vw,120px)}

/* ================= Defamation ================= */
.what{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,104px);align-items:start}
.what-st{margin-top:26px;max-width:24ch;font-size:clamp(1.6rem,2.7vw,2.4rem)}
.what-copy{font-size:clamp(17.5px,1.3vw,19px)}
.what-who{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
.what-who h3{font-size:1.35rem;color:var(--deep);margin-bottom:8px}
.what-who p{font-size:17px}
.deep{background:var(--deep);color:var(--on-deep)}
.deep .blk-h{color:#fff}
.deep .blk-intro{color:var(--on-deep-2)}
.clips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.clips li:nth-child(even){margin-top:clamp(0px,4vw,56px)}
.clip{position:relative;display:grid;width:100%;min-height:clamp(260px,24vw,320px);padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;perspective:1200px}
.clip-front,.clip-back{grid-area:1/1;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,30px);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s var(--out)}
.clip-front{background:#f4efe2;color:#25241f;box-shadow:0 20px 40px -26px rgba(0,0,0,.6);transform:rotate(var(--tilt,-1deg))} /* taste-skill-ignore: a sheet of paper lying on the page */
.clips li:nth-child(2) .clip-front{--tilt:1.2deg}.clips li:nth-child(3) .clip-front{--tilt:-.6deg}.clips li:nth-child(4) .clip-front{--tilt:.8deg}
.clip-q{font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.25;text-indent:-.4em}
.clip-src{margin-top:auto;padding-top:20px;font-size:14.5px;color:#6d6a5f}
.clip-back{background:var(--magnolia);color:var(--ink);font-size:17px;line-height:1.5;transform:rotateY(180deg)}
.clip-back b{display:block;font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.2;color:var(--deep);margin-bottom:10px}
.clip[aria-expanded=true] .clip-front{transform:rotateY(-180deg)}
.clip[aria-expanded=true] .clip-back{transform:rotateY(0)}
.clip:hover .clip-front{box-shadow:0 26px 46px -24px rgba(0,0,0,.7)} /* taste-skill-ignore: a sheet of paper lying on the page */
.clip:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
html:not(.js) .clip-back{transform:none;position:static}
.deep-fine{margin-top:clamp(36px,4vw,56px);font-size:15px;color:var(--on-deep-2)}
.doit{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(32px,6vw,104px);align-items:start}
.doit-list{list-style:none;margin:0;padding:0}
.doit-list li{display:grid;grid-template-columns:clamp(110px,13vw,170px) 1fr;gap:clamp(18px,2.4vw,32px);align-items:center;padding:20px 0}

.doit-list .pic{aspect-ratio:1/1}
.doit-list h3{font-size:clamp(1.4rem,2vw,1.75rem);color:var(--deep);margin-bottom:8px}
.bring{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:center}
.folder{position:relative;background:#e6cf9f;padding:clamp(36px,4vw,56px) clamp(26px,4vw,56px) clamp(30px,3.4vw,48px);margin-top:28px;box-shadow:0 22px 40px -30px rgba(80,60,20,.6)} /* taste-skill-ignore: a sheet of paper lying on the page */
.folder-tab{position:absolute;left:0;top:-26px;width:38%;height:28px;background:#e6cf9f;clip-path:polygon(0 100%,0 22%,4% 0,92% 0,100% 100%)}
.folder .marks li{color:#2f2a1d}
.folder .marks li:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 139.4 34.44'%3E%3Cpath d='M0 34.4C19.7 34.4 31.2 21.3 42.6 14.8 49.2 11.5 54.1 13.1 59 17.2 64 20.5 68.1 19.7 73.8 13.1 82 3.3 90.2 0 98.4 3.3 109.9 8.2 119.7 24.6 139.4 34.4Z' fill='%231d3a32'/%3E%3C/svg%3E")}

@media (max-width:1000px){
  .ladder{grid-template-columns:1fr}
  .r1,.r2,.r3{min-height:0}
  .r2{margin-left:6%}.r3{margin-left:12%}
  .pair{grid-template-columns:1fr 1fr}
  .pair-mid{grid-column:1/-1;grid-row:1}
  .pair-a,.pair-b{margin:0}
  .what,.doit,.bring{grid-template-columns:1fr}
  .clips{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .what-who{grid-template-columns:1fr}
  .clips{grid-template-columns:1fr}
  .clips li:nth-child(even){margin-top:0}
  .clip{min-height:220px}
  .pair{grid-template-columns:1fr}
  .r2{margin-left:4%}.r3{margin-left:8%}
}
@media (prefers-reduced-motion:reduce){
  .clip-front,.clip-back{transition:none}
}
.horizon h2{max-width:21ch;grid-column:1/10}

/* ================= Fees ================= */
.op-acts .btn-pay{margin-top:0;min-height:54px}
.breath-line{font-family:var(--serif);font-size:clamp(1.9rem,3.9vw,3.6rem);line-height:1.16;letter-spacing:-.016em;color:var(--deep);max-width:30ch}
.breath-line span{display:inline}
.breath-line b{font-weight:500;white-space:nowrap}
.breath-after{margin-top:clamp(28px,3.4vw,44px);font-size:clamp(17.5px,1.3vw,19px);max-width:56ch}
.cost{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.cost-q{flex-direction:column;align-items:stretch;gap:8px}
.cost-q span{width:100%;border-radius:0;justify-content:flex-start;min-height:54px;font-size:16.5px}
.cost-a{background:var(--cream);padding:clamp(28px,4vw,60px);min-height:100%}
.cost-pane{display:block}
.cost-pane+.cost-pane{margin-top:40px}
.js .chooser[data-ready] .cost-pane+.cost-pane{margin-top:0}
.cost-first{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.25;color:var(--deep)}
.cost-then{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.25;color:var(--ink);margin-top:18px;max-width:28ch}
.cost-a b{font-weight:500;color:var(--deep)}
.cost-pane .go{margin-top:28px}
.js .chooser[data-ready] .cost-pane.is-shown{animation:pane-in .5s var(--out) both}
.billing{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,104px);align-items:center}
.billing-pay{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.billing-pay .fine a{color:var(--accent);font-weight:600}
.invoice{margin:0;background:#fffdf8;padding:clamp(26px,3.6vw,48px);box-shadow:0 26px 50px -34px rgba(20,42,36,.5)}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:22px;border-bottom:2px solid var(--deep)}
.inv-top img{width:min(220px,55%);height:auto}
.inv-top p{text-align:right;font-family:var(--serif);font-size:1.2rem;line-height:1.2;color:var(--deep)}
.inv-top span{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--bronze)}
.inv-t{width:100%;border-collapse:collapse;margin-top:8px;font-size:16.5px}
.inv-t th,.inv-t td{padding:14px 0;border-bottom:1px solid #e5ddcc;text-align:left;font-weight:400}
.inv-t td{text-align:right;white-space:nowrap;color:var(--deep);font-weight:600}
.inv-how{margin-top:22px;font-size:15.5px;color:var(--muted)}
.inv-ways{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.inv-ways li{font-size:14.5px;font-weight:600;color:var(--deep);padding:5px 12px;background:var(--mist)}

/* ================= Contact ================= */
.contact-op{padding-bottom:clamp(72px,8vw,120px)}
.contact-op .trail{margin-bottom:clamp(22px,3.4vw,46px)}
.ct{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:clamp(36px,6vw,96px);align-items:start}
.ct .op-title{font-size:clamp(2.7rem,5vw,4.6rem)}
.ct-now{margin-top:26px;font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.35;color:var(--ink);max-width:30ch}
.ct-now b{font-weight:500;color:var(--deep)}
.ct-now:before{content:'';display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:12px;vertical-align:.12em;background:var(--gold)}
.ct-now.is-open:before{background:#3f8a5f}
.ct-phone{display:inline-block;margin-top:30px;font-family:var(--serif);font-size:clamp(2.6rem,4.8vw,4.3rem);line-height:1;letter-spacing:-.02em;color:var(--deep);text-decoration:none}
.ct-phone:hover{color:var(--accent)}
.ct-mail{margin-top:14px;font-size:18px}
.ct-mail a{color:var(--accent);font-weight:600}
.ct-facts{margin:clamp(30px,3.6vw,48px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.ct-facts dt{font-weight:700;color:var(--deep);font-size:16px;margin-bottom:4px}
.ct-facts dd{margin:0;font-size:16.5px;line-height:1.55}
.inner form.ct-form{background:var(--cream);border-radius:0;box-shadow:none;border-top:0;padding:clamp(26px,3.4vw,48px)}
.inner form[data-ntfy-form] input,.inner form[data-ntfy-form] textarea{background:#fffdf8;border-radius:4px;border-color:#d9d0bd}
.inner form[data-ntfy-form] fieldset.consent{background:#fffdf8;border-radius:4px;border-color:#d9d0bd}
.inner form[data-ntfy-form] .btn-primary{width:100%}
.after{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,104px);align-items:start}
.after-list{margin:0;padding:0;list-style:none;counter-reset:a;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.after-list li{counter-increment:a}
.after-list li:before{content:counter(a);display:block;font-family:var(--serif);font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--bronze);margin-bottom:14px}
.after-list h3{font-size:clamp(1.35rem,1.9vw,1.6rem);color:var(--deep);margin-bottom:8px}
.rise-fig--end{margin:0;padding-top:clamp(40px,5vw,72px)}
.rise-fig--end .rise-cap{padding-bottom:28px}

/* ================= 404 ================= */
.lost{position:relative;overflow:hidden;isolation:isolate;padding:clamp(56px,8vw,120px) 0 clamp(170px,22vw,300px)}
.lost .op-title{max-width:16ch}
.lost .op-lede{margin-top:24px}
.lost-links{list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;max-width:760px}
.lost-links a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:14px 0;text-decoration:none}
.lost-links b{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2vw,1.7rem);color:var(--deep)}
.lost-links span{color:var(--muted);font-size:16.5px}
.lost-links a:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lost-call{margin-top:28px;font-size:18px}
.lost-call a{color:var(--accent);font-weight:700}

@media (max-width:1000px){
  .cost,.billing,.ct,.after{grid-template-columns:1fr}
  .after-list{grid-template-columns:1fr}
  .invoice{transform:none}
}
@media (max-width:760px){
  .ct-facts{grid-template-columns:1fr}
  .inv-t{font-size:15px}
}
.legal-read{padding-top:0}
@media (max-width:760px){
  .rise .sky{width:190%;left:auto;right:0}
  .rise--mirror .sky{left:0;right:auto}
  .rise{height:clamp(240px,40vh,340px)}
  .pins{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:14px 14px 16px}
  .pins label{position:static!important;transform:none}
  .pins span{min-height:44px;padding:8px 14px;font-size:14.5px;background:#fffdf8;box-shadow:0 0 0 1.5px var(--accent) /* taste-skill-ignore: a pin sitting on the drawing needs its own edge */}
  .years{gap:0 10px}
  .years li{font-size:1.3rem}
  .record{padding-inline:18px}
}
/* inner pages: flat buttons (the homepage keeps its approved treatment) */
.inner .btn-primary{background:var(--deep);box-shadow:none}
.inner .btn-primary:hover{background:var(--accent);transform:none;box-shadow:none}
.sheet{display:flex;flex-direction:column}
.sheet-body{flex:1;display:flex;flex-direction:column}
.sheet-sign{margin-top:auto}

/* ================= fix round 1 ================= */
/* openers: title and intro start on the same line; taller photo strips */
.op-in{align-items:start}
.op-side{padding-top:.9rem}
.rise{height:clamp(340px,58vh,640px)}

/* sorter, grouped by practice area */
.sits{columns:2;column-gap:clamp(36px,5vw,80px)}
.sit-g{break-inside:avoid;margin-bottom:clamp(30px,3.4vw,44px);animation:sit-in .45s var(--out) both}
.sit-h{display:flex;align-items:center;gap:14px;text-decoration:none;margin-bottom:10px}
.sit-h img{width:46px;height:46px;object-fit:cover}
.sit-h span{font-weight:700;font-size:16px;color:var(--bronze)}
.sit-h:hover span{text-decoration:underline;text-underline-offset:4px}
.sit-g ul{list-style:none;margin:0;padding:0}
.sit-g li a{display:block;position:relative;padding:9px 34px 9px 0;font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.3;color:var(--ink);text-decoration:none;text-wrap:pretty}
.sit-g li a:after{content:'';position:absolute;right:0;top:50%;width:18px;height:12px;margin-top:-6px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.55;transition:transform .3s var(--out),opacity .25s}
.sit-g li a:hover{color:var(--deep)}
.sit-g li a:hover:after{transform:translateX(4px);opacity:1}
.sorter:has(input[value=me]:checked) .sit-g:not([data-who~=me]),
.sorter:has(input[value=biz]:checked) .sit-g:not([data-who~=biz]){display:none}
@keyframes sit-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the compact close on practice pages */
.close{position:relative;overflow:hidden;isolation:isolate;padding:clamp(80px,9vw,128px) 0 clamp(120px,12vw,180px)}
.close-ridge{position:absolute;right:-4vw;bottom:-2px;width:min(820px,62vw);height:auto;z-index:-1;fill:var(--mist)}
.close-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,104px);align-items:start}
.close h2,.bring-main h2{font-size:var(--t-section);color:var(--deep);max-width:18ch}
.close-say{margin-top:18px;font-size:clamp(17.5px,1.3vw,19px);max-width:52ch}
.close-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.close-acts .btn{min-height:54px;padding:13px 24px}
.close-hours{margin-top:16px;font-size:15.5px;color:var(--muted)}
.close-also{padding-top:.6rem}
.close-also p{font-weight:700;font-size:15.5px;color:var(--bronze);margin-bottom:12px}
.close-also ul{list-style:none;margin:0;padding:0}
.close-also li a{display:block;padding:7px 0;font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.25;color:var(--deep);text-decoration:none}
.close-also li a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.bring-close,.bill-close,.legal-read{position:relative;overflow:hidden;isolation:isolate}
.bring-close{padding-bottom:clamp(140px,14vw,210px)}
.bring-close .close-ridge{fill:#e8e1d0}
.bill-close{padding-bottom:clamp(150px,15vw,220px)}
.bill-close .close-ridge{fill:var(--mist-2)}
.legal-read{padding-bottom:clamp(150px,15vw,220px)}
.bring{grid-template-columns:minmax(0,6fr) minmax(0,6fr)!important;align-items:start!important}
.folder{margin-top:46px}
.folder-h{font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.7rem);color:#2f2a1d;margin-bottom:16px}
.bill-new{max-width:46ch}
.bill-new a{color:var(--accent);font-weight:600}

/* fees: the question as a sentence */
.cost{display:block!important;margin-top:clamp(24px,3vw,40px)}
.ask{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.3;color:var(--ink)}
.ask label{font-weight:inherit;font-size:inherit;margin:0;display:inline}
.ask-sel{position:relative;display:inline-block;max-width:100%}
.ask select{font:inherit;color:var(--deep);background:transparent;border:0;border-bottom:2px solid var(--accent);border-radius:0;padding:0 1.3em 2px 0;margin:0;min-height:0;max-width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.ask-sel:after{content:'';position:absolute;right:.15em;top:50%;width:.45em;height:.45em;margin-top:-.32em;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);pointer-events:none}
.ask select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cost-a{margin-top:clamp(24px,3vw,40px)}
.btn-pay--line{background:transparent;color:var(--deep);border:1.5px solid var(--deep)}
.btn-pay--line:hover{background:var(--deep);color:#fff}

/* civil, family copy blocks */
.side-more{margin-top:16px;max-width:50ch;color:var(--ink)}
.reach-p{margin-top:24px;max-width:50ch;font-size:clamp(17.5px,1.3vw,19px)}
.pic-cap .credit{display:block;margin-top:2px}

/* contracts: phrases wrap like text */
.mk{display:inline}
.two{grid-template-columns:1fr 1fr!important}

/* civil: one hanging quote, one left edge */
@media (max-width:760px){.xl-say{text-indent:0}}

/* business litigation table on phones */
@media (max-width:1000px){.ledger-t tbody th,.ledger-t td{width:auto!important}}

/* defamation clippings: sized to the words, with a cue */
.clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px) clamp(24px,3vw,44px);max-width:1060px}
.clips li:nth-child(even){margin-top:clamp(0px,5vw,64px)}
.clips li:nth-child(3){margin-top:clamp(0px,-2vw,0px)}
.clip{min-height:clamp(200px,17vw,240px)}
.clip-foot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.clip-src{margin:0;padding:0}
.clip-turn{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}
.clip-turn:after{content:' \21BB';font-weight:400}

/* HOA: the ladder drawn as a climb */
.ladder{gap:0;align-items:start;padding-top:0}
.rung{background:none!important;min-height:0!important;padding:28px clamp(16px,2.4vw,36px) 0 clamp(16px,2vw,28px)}
.r1{margin-top:clamp(120px,14vw,200px)}
.r2{margin-top:clamp(60px,7vw,100px)}
.r3{margin-top:0}
.rung-me{margin-top:22px;padding-top:0}

/* route map: readable labels */
.route-svg .city text{font-size:22px;stroke-width:6px}
.route-svg .st-names text{font-size:15px}

@media (max-width:1000px){
  .close-in{grid-template-columns:1fr}
  .bring{grid-template-columns:1fr!important}
  .rung{margin-top:0!important;margin-left:0!important;padding-bottom:28px}
  .r2{margin-left:8%!important}.r3{margin-left:16%!important}
  /* About on phones: a small map stays pinned while the chapters scroll */
  .route-map{position:sticky;top:var(--hdr,64px);z-index:3;height:38svh;max-width:none;background:var(--magnolia);padding:8px 0;margin:0 -20px;width:auto}
  .route-svg{height:100%;width:100%}
}
@media (max-width:760px){
  .sits{columns:1}
  .clips{grid-template-columns:1fr}
  .clips li:nth-child(even){margin-top:0}
  .clip{min-height:0}
  .clip-front,.clip-back{min-height:180px}
  .ask{font-size:1.5rem}
  .close-ridge{width:120vw;right:-30vw}
  .two{grid-template-columns:1fr!important}
}
@media (max-width:1000px){
  .route{display:block}
  .route-map{top:calc(var(--hdr,64px) - 1px);height:34svh;margin:0 -20px 8px;padding:6px 20px;box-shadow:0 10px 18px -16px rgba(20,42,36,.5)} /* taste-skill-ignore: a pinned strip that really floats over the text */
  .legs{position:relative;z-index:1}
}
@media (max-width:760px){
  .ask{font-size:1.3rem}
  .ask label{display:block;margin-bottom:6px}
  .ask-sel,.ask select{width:100%}
  .fan[data-ready] .sheet{transform:translateY(calc(var(--rank,0) * var(--peek) * -1))}
  .fan[data-ready]{--peek:52px}
}

/* ================= fix round 2 ================= */
/* openers with no photo: less dead paper before the first section */
.op--plain{padding-bottom:clamp(36px,4vw,64px)}
.op--plain + .blk:not(.blk--cream):not(.blk--mist):not(.deep){padding-top:clamp(36px,4vw,64px)}

/* contracts: marks are spans, so they wrap like the words around them */
.mk{cursor:pointer;border-radius:2px}
.mk:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* HOA: one thin stair line, the text sits on each step */
.rung{border:0!important;padding:0 clamp(16px,2.4vw,36px) 0 0!important;position:relative}
.rung:before{content:'';display:block;height:1.5px;background:var(--deep);margin:0 calc(-1 * clamp(16px,2.4vw,36px)) 22px 0}
.rung:after{content:'';position:absolute;left:0;top:0;width:1.5px;height:clamp(60px,7vw,100px);background:var(--deep);transform:translateY(-100%)}
.r3:after{display:none}
.r1:after{display:none}
.r2:after{left:0}
.r3:before{margin-right:0}
.rung h3{margin-top:0}
.rung .eg{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--muted)}
.rung-me{font-weight:600;color:var(--deep)}
.ladder .rung:not(.r1){padding-left:clamp(16px,2vw,28px)!important}
.ladder .rung:not(.r1):before{margin-left:calc(-1 * clamp(16px,2vw,28px))}
.ladder .rung:not(.r1):after{left:0}

/* defamation: clippings use the full measure and are sized to their words */
.clips{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.clips li:nth-child(even){margin-top:clamp(0px,3vw,40px)}
.clip,.clip-front,.clip-back{min-height:clamp(220px,18vw,260px)}

/* about, phones: crop the pinned map to the route and enlarge its labels */
@media (max-width:1000px){
  .route-map{height:40svh}
  .route-svg .st-names{display:none}
  .route-svg .city text{font-size:34px;stroke-width:8px}
  .route-svg .city circle{r:9}
}
@media (max-width:1000px){
  .clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ladder .rung,.ladder .rung:not(.r1){padding:0 0 28px 0!important;margin-left:0!important}
  .r2{margin-left:8%!important}.r3{margin-left:16%!important}
  .rung:after{display:none}
  .ladder .rung:before,.ladder .rung:not(.r1):before{margin:0 0 18px 0}
}
@media (max-width:760px){
  .clips{grid-template-columns:1fr}
  .clips li:nth-child(even){margin-top:0}
  .clip,.clip-front,.clip-back{min-height:170px}
}
@media (min-width:1001px){
  .ladder .rung:after{display:block;left:0;top:0;transform:none;height:clamp(60px,7vw,100px)}
  .ladder .r1:after{display:none}
}