/* Oct 15 fixes (Christian's review). Loaded last on every inner page. */

/* --- split openers: photo stays inside the page width, so both sides balance --- */
.ops{min-height:0;align-items:center;padding-block:clamp(36px,5vw,76px)}
.ops-ph,.ops--flip .ops-ph{margin:0!important;align-self:stretch;min-height:clamp(420px,56vh,600px);border-radius:0 0 22px 22px}
.ops-copy{padding-block:0}

/* --- overlap openers (About, Family, HOA) become the same balanced split --- */
.opo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);width:var(--wrap);margin-inline:auto;align-items:center;padding-block:clamp(36px,5vw,76px)}
.opo-ph,.opo--low .opo-ph{grid-row:1;grid-column:1/7;height:clamp(420px,56vh,600px);border-radius:0 0 22px 22px}
.opo-sheet,.opo--left .opo-sheet,.opo--low .opo-sheet{grid-row:1;grid-column:7/13;width:auto;margin:0!important;padding:0 0 0 clamp(0px,2vw,32px)!important;background:none}
.opo--left .opo-ph{grid-column:7/13}
.opo--left .opo-sheet{grid-column:1/7;padding:0 clamp(0px,2vw,32px) 0 0!important}
.opo-sheet:before,.opo--left .opo-sheet:before{left:0;top:-22px}
.opo-ph .credit{position:absolute;left:14px;bottom:14px;right:auto;margin:0;max-width:calc(100% - 28px)}

@media (max-width:1000px){
  .ops-ph,.ops--flip .ops-ph{min-height:0;height:clamp(260px,60vw,440px);border-radius:0 0 18px 18px}
  .opo{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .opo-sheet,.opo--left .opo-sheet,.opo--low .opo-sheet{order:-1;padding:0!important}
  .opo-ph,.opo--low .opo-ph{height:clamp(260px,60vw,440px);border-radius:0 0 18px 18px}
  .opo-sheet:before{top:-14px}
}

/* --- defamation opener: no empty left half, cards in an even row --- */
.dfo-side{grid-column:1/9!important;margin-top:clamp(10px,1.4vw,20px)}
.dfo-fo{margin:clamp(56px,6vw,88px) 0 clamp(28px,3vw,44px)}
.dfo .clips li:nth-child(even){margin-top:0!important}
.dfo .clip{min-height:clamp(230px,18vw,270px)}

/* --- HOA "Where I come in": three even cards instead of a staircase --- */
.hl-steps{align-items:stretch;gap:clamp(14px,1.6vw,22px)}
.hl-s1,.hl-s2,.hl-s3{min-height:0!important;margin-left:0!important;border-radius:0 0 16px 16px}
.hl-step + .hl-step .hl-edge:before,.hl-stair{display:none!important}
.hl-me{padding-top:26px}

/* --- property: labels fit on one line; drawing parts read as clickable --- */
.pd-k{font-size:clamp(1.8rem,2.75vw,2.6rem);white-space:nowrap}
.plat-svg [class^="g-"]{transition:opacity .25s}
.plat-svg [class^="g-"]:hover{opacity:.82}

/* --- fees: a clear fee board instead of the scroll-lit sentence --- */
.fe-board-h{margin-bottom:clamp(28px,3vw,44px)}
.fe-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.fe-cards li{background:var(--magnolia);border-radius:18px;padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--gold);box-shadow:0 24px 48px -36px rgba(20,42,36,.45);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.fe-cards li:hover{transform:translateY(-5px);box-shadow:0 32px 60px -36px rgba(20,42,36,.55)}
.fe-amt{font-family:var(--serif);font-size:clamp(2.4rem,3.6vw,3.4rem);line-height:1;color:var(--deep);letter-spacing:-.015em}
.fe-what{font-size:17.5px;line-height:1.45;color:var(--deep);font-weight:500}
.fe-note{margin-top:auto;padding-top:8px;font-size:15.5px;line-height:1.5;color:#5b5a50}
.fe-board .fe-after{margin-top:clamp(22px,2.4vw,32px);font-size:17px}
@media (max-width:1000px){.fe-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fe-cards{grid-template-columns:1fr}}

/* --- formation steps: titles on one line --- */
.bf-grow .grow-step h3{font-size:clamp(1.5rem,2vw,1.9rem);white-space:nowrap}
@media (max-width:1000px){.bf-grow .grow-step h3{white-space:normal}}
/* defamation cards: answering card gets the same fee line spacing */
.df-step .pic{aspect-ratio:4/3}
.opo-sheet:before,.opo--left .opo-sheet:before{display:none}
@media (max-width:1000px){.dfo-side{grid-column:1/-1!important}.dfo .opx-acts .btn{white-space:nowrap}}

/* --- About: her portrait opens the page --- */
.pg-about .opo-ph{background:#e8e0d0}
@media (min-width:1001px){.pg-about .opo-ph{grid-column:2/7;height:clamp(480px,66vh,660px)}}

/* --- fees: pick your matter with buttons, answer card beside --- */
.fe-cost .cost{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(26px,3vw,40px)}
.fe-chips{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fe-chips legend{font-size:15px;font-weight:600;color:var(--deep);margin-bottom:12px;padding:0}
.fe-chips label{display:block;cursor:pointer}
.fe-chips input{position:absolute;opacity:0;pointer-events:none}
.fe-chips span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border:1px solid var(--line,#ddd6c6);border-radius:12px;background:var(--magnolia);font-size:17px;color:var(--deep);transition:background .25s,border-color .25s,transform .3s,color .25s}
.fe-chips span:after{content:'\2192';opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s}
.fe-chips label:hover span{border-color:var(--gold);transform:translateX(4px)}
.fe-chips input:checked+span{background:var(--deep);border-color:var(--deep);color:#fff}
.fe-chips input:checked+span:after{opacity:1;transform:none}
.fe-chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.fe-cost .cost-a{max-width:none;border-radius:0 18px 18px 0;position:sticky;top:120px}
.fe-cost .cost-first,.fe-cost .cost-then{font-size:clamp(1.35rem,1.9vw,1.75rem)}
@media (max-width:1000px){.fe-cost .cost{grid-template-columns:1fr}.fe-cost .cost-a{position:static}}
@media (min-width:1001px){.fe-cost .cost{display:grid!important}.fe-cost .cost-a{margin-top:0}}
.fe-cost .cost-a{min-height:0;align-self:start}
@media (max-width:1000px){.fe-cost .cost-a{position:relative}}

/* --- defamation statement cards: hover lifts the whole card, flip never fights the hover --- */
.dfo .clip{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.dfo .clip:hover{transform:translateY(-6px)}
.dfo .clip:hover .clip-front{transform:rotate(var(--tilt,-1deg))}
.clip[aria-expanded=true] .clip-front,.dfo .clip[aria-expanded=true]:hover .clip-front{transform:rotateY(-180deg)}
.clip[aria-expanded=true] .clip-back,.dfo .clip[aria-expanded=true]:hover .clip-back{transform:rotateY(0)}
.clip-back{box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}
.clip-front,.clip-back{will-change:transform}

/* Oct 17: Defamation now sits second in each group, so each row has five tiles */
@media (min-width:1281px){.pa-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1101px) and (max-width:1280px){.pa-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pa-tile--deep{--tile:var(--deep)}
.pa-tile--deep .pa-line{color:var(--gold)}
.pa-tile--deep .pa-name{color:#fff}
.pa-tile--deep .pa-what{color:var(--on-deep-2,rgba(255,255,255,.78))}
.pa-tile--deep .pa-go{border-color:rgba(255,255,255,.4)}
.pa-tile--deep .pa-go:after{background:#fff}
.pa-tile--deep a:hover{background:color-mix(in srgb,var(--deep) 88%,#000)}
.pa-tile--deep a:hover .pa-go{background:#fff;border-color:#fff}
.pa-tile--deep a:hover .pa-go:after{background:var(--deep)}

/* Oct 17: About on phones: a shorter pinned map that lets go once East Cobb lights up */
@media (max-width:1000px){.route-map{height:30svh}}

/* Formation: the three steps are typeset color blocks that rise in height (no stock photos) */
.bf-grow .grow-step .grow-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:clamp(20px,2.2vw,32px);outline:0;box-sizing:border-box;overflow:hidden}
.bf-grow .g1 .grow-card{background:var(--magnolia);color:var(--deep)}
.bf-grow .g2 .grow-card{background:var(--sage-f2);color:var(--deep)}
.bf-grow .g3 .grow-card{background:var(--deep);color:#fbf8f1}
.grow-card .gc-k{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--honey-ink)}
.g3 .grow-card .gc-k{color:var(--gold)}
.grow-card .gc-big{font-family:var(--serif);font-style:italic;line-height:1.08;font-size:clamp(1.5rem,2.3vw,2.2rem);max-width:14ch}
.g3 .grow-card .gc-big{font-size:clamp(1.8rem,2.9vw,2.8rem)}
@media (max-width:1000px){
  .bf-grow .g1 .grow-card,.bf-grow .g2 .grow-card,.bf-grow .g3 .grow-card{height:auto;min-height:150px}
  .bf-grow .g2 .grow-card{min-height:175px}.bf-grow .g3 .grow-card{min-height:200px}
  .grow-card .gc-big,.g3 .grow-card .gc-big{font-size:1.65rem;max-width:18ch}
}

/* Defamation: three small drawn scenes instead of stock photos (a letter, a reply, a court filing) */
.dsc{position:relative;aspect-ratio:4/3;margin:0;overflow:hidden;background:var(--honey)}
.dsc--reply{background:var(--petal)}.dsc--court{background:var(--sage-f)}
.dsc > span{position:absolute;transition:transform .7s var(--ease-o)}
.dsc-sheet{left:24%;top:12%;width:46%;height:80%;background:#fffdf8;outline:1px solid #e3d6b8;padding:7% 6%;display:flex;flex-direction:column;gap:7px;box-shadow:0 18px 30px -22px rgba(20,42,36,.55);transform:rotate(-4deg)}
.dsc-sheet b{font:400 clamp(.95rem,1.3vw,1.15rem)/1.1 var(--serif);color:var(--deep);text-align:center;margin-bottom:5px;font-variant:small-caps;letter-spacing:.02em}
.dsc-sheet small{font:600 8.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.dsc-sheet i{display:block;height:4px;background:#e5dcc9;border-radius:2px}
.dsc-sheet i.s{width:62%}
.dsc-sig{margin-top:auto;height:2px;background:var(--deep);width:58%;position:relative}
.dsc-sig:before{content:'';position:absolute;left:8%;bottom:3px;width:70%;height:14px;border-bottom:2px solid var(--accent);border-radius:0 0 60% 40%;transform:rotate(-4deg)}
.dsc-env{left:10%;bottom:10%;width:52%;height:38%;background:#f3e6c6;outline:1px solid #dcc79a;transform:rotate(6deg)}
.dsc-env:before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.4%,#e6d2a5 50%,transparent 50.6%),linear-gradient(to bottom left,transparent 49.4%,#e6d2a5 50%,transparent 50.6%);background-size:50% 100%;background-repeat:no-repeat;background-position:left top,right top}
.dsc--letter .dsc-env{z-index:0}.dsc--letter .dsc-sheet{z-index:1;left:34%}
.dsc--reply .dsc-sheet{left:30%;top:6%;height:62%;transform:rotate(3deg)}
.dsc-env--open{left:18%;bottom:8%;width:64%;height:44%;transform:rotate(-2deg);z-index:2;background:#f6e9de;outline-color:#e2c4b0}
.dsc-env--open:before{background:linear-gradient(to top right,transparent 49.4%,#e9cfbf 50%,transparent 50.6%),linear-gradient(to top left,transparent 49.4%,#e9cfbf 50%,transparent 50.6%);background-size:50% 100%;background-repeat:no-repeat;background-position:left top,right top}
.dsc--court .dsc-sheet{left:26%;transform:rotate(-2deg)}
.dsc-stamp{right:12%;bottom:14%;width:27%;aspect-ratio:1;border:3px solid var(--deep);border-radius:50%;display:grid;place-items:center;font:700 clamp(.8rem,1.1vw,1rem)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--deep);transform:rotate(-14deg);background:rgba(211,224,213,.7);box-shadow:inset 0 0 0 4px rgba(211,224,213,.9),inset 0 0 0 6px var(--deep)}
.df-step:hover .dsc-sheet{transform:rotate(-1deg) translateY(-6px)}
.df-step:hover .dsc--reply .dsc-sheet{transform:rotate(1deg) translateY(-14px)}
.df-step:hover .dsc-stamp{transform:rotate(-8deg) scale(1.04)}


/* Legal pages: overflow:hidden on the section turned off the sticky "On this page" box. clip trims the same edges but keeps sticky working. */
.pg-terms .legal-read{overflow:clip}
@supports not (overflow:clip){.pg-terms .legal-read{overflow:visible}}

/* Formation steps: the italic line sits right under its label, and the blocks are only as tall as a clear staircase needs */
.bf-grow .grow-step .grow-card{justify-content:flex-start;gap:12px}
@media (min-width:1001px){
  .bf-grow .g1 .grow-card{height:clamp(200px,17vw,240px)}
  .bf-grow .g2 .grow-card{height:clamp(250px,21vw,300px)}
  .bf-grow .g3 .grow-card{height:clamp(300px,25.5vw,360px)}
}
.bf-grow .grow-card .gc-big{margin-top:2px}


/* Legal pages, desktop: the contents become a bar that sticks under the header; each section's heading sits in the
   left column beside its own text and holds there while you read it, so the left side is never empty. */
@media (min-width:1001px){
  .pg-terms .legal-read .doc{display:block}
  .pg-terms .legal-read .doc-nav{position:sticky;top:calc(var(--top-h,128px) - var(--util-h,39px));z-index:6;display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap;padding:16px 24px;margin:0 0 clamp(36px,4vw,56px);box-shadow:0 14px 24px -22px rgba(20,42,36,.45)}
  .pg-terms .legal-read .doc-nav p{margin:0 6px 0 0}
  .pg-terms .legal-read .doc-nav ol{display:flex;flex-wrap:wrap;gap:6px 20px}
  .pg-terms .legal-read .doc-nav li+li{margin-top:0}
  .pg-terms .legal-read .doc-nav a:hover,.pg-terms .legal-read .doc-nav a.is-here{padding-left:0;color:var(--deep);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
  .pg-terms .legal-read .doc-body > .short{margin-bottom:clamp(40px,4vw,64px)}
  .doc-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:clamp(32px,6vw,96px);padding:clamp(30px,3vw,44px) 0;border-top:1px solid var(--rule)}
  .doc-sec > *{grid-column:2}
  .doc-sec > h2{grid-column:1;grid-row:1 / span 40;align-self:start;position:sticky;top:calc(var(--top-h,128px) - var(--util-h,39px) + 130px);margin:0!important;font-size:clamp(1.5rem,2.1vw,1.95rem);line-height:1.15;padding-left:18px;border-left:3px solid var(--gold)}
  .doc-sec > p:first-of-type{margin-top:0}
}
@media (min-width:1001px){.pg-terms .legal-read .doc-body h2[id]{scroll-margin-top:250px}}

/* photo credits: the place reads first; the license line sits under it in small type */
.credit .lic{display:block;margin-top:2px;font-size:10.5px;line-height:1.3;opacity:.82;font-weight:400;letter-spacing:.01em}
/* Small Businesses: a drawn demand letter, its deadline circled (same family as the Defamation drawings) */
.dsc--demand{background:var(--honey)}
.dsc--demand .dsc-sheet{left:28%;top:8%;height:86%;width:48%;transform:rotate(-3deg);z-index:1}
.dsc--demand .dsc-env{left:8%;bottom:8%;transform:rotate(-7deg)}
.dsc-due{position:relative;align-self:flex-start;margin:4px 0 2px;font:italic 400 clamp(.8rem,1.05vw,.95rem)/1.2 var(--serif);color:var(--deep);padding:4px 8px}
.dsc-due:after{content:'';position:absolute;inset:-4px -8px;border:2.5px solid var(--bronze);border-radius:50%;transform:rotate(-3deg)}
.hl-court:hover .dsc--demand .dsc-sheet{transform:rotate(-1deg) translateY(-6px)}
.pic-cap .credit-s{display:block;margin-top:2px;font-size:11px;opacity:.75}