/* ============================================================
   pages v2: about, practice, faq, articles, article, contact, accessibility
   loads after v2.css. page-specific compositions only; the system lives in v2.css
   ============================================================ */

/* ---------- close (the same block as the home page) ---------- */
.close{min-height:100svh;display:grid;align-items:center;overflow:hidden}
.close-inner{padding-block:calc(var(--nav-h) + 40px) 80px;text-align:center}
.close .giant{font-size:clamp(44px,8.4vw,132px);line-height:.96;max-width:9em;margin-inline:auto}
.close .phone{font-family:var(--display);font-size:clamp(34px,5vw,72px);color:var(--gold);margin-top:32px;line-height:1}
.close .hand{margin-top:36px;color:var(--on-ink-muted)}
.close-ring{position:absolute;inset:auto -20vw -30vw;height:60vw;border-radius:50%;border:1px solid rgba(255,255,255,.12);pointer-events:none}

/* ---------- shared bits ---------- */
.page-head h1{max-width:12em}
.page-head.ground-ink{padding-bottom:clamp(56px,7vw,100px)}
.tag{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.22em;color:var(--gold-ink);display:block}
.on-ink .tag{color:var(--gold)}
.ph[data-parallax] img{position:absolute;inset:-7% 0;height:114%}
.prose > h2:first-child{margin-top:0}
.prose h2[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.on-ink .portrait{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--on-ink-line)}
.on-ink .portrait::before{border-color:var(--on-ink-line)}
.on-ink .portrait .label-in{color:var(--on-ink-muted)}
.art-row .h3{font-size:clamp(22px,2.2vw,30px)}
.art-row .chip{justify-self:start}
/* B10: the title link's own box used to be exactly the wrapped text's line
   box, so a one-line title (short enough not to wrap) had only a ~26px-tall
   tap target — under 44px — while a two-line title happened to clear it by
   coincidence. Stretch the link to fill its row and give it a real minimum
   height, so every "more articles" row has the same solid tap target no
   matter how its title wraps. */
.art-row .h3 a,.art-row h3 a{display:flex;align-items:center;min-height:44px;transition:color var(--t-ui)}
.art-row .idx{transition:transform .5s var(--ease-out),color var(--t-ui)}
@media (hover:hover){
  .art-row:hover .h3 a,.art-row:hover h3 a{color:var(--gold-ink)}
  .art-row:hover .idx{transform:translateX(-6px);color:var(--gold)}
}

/* ---------- about ---------- */
.about-head-grid{display:grid;gap:36px;align-items:end}
@media (min-width:1000px){.about-head-grid{grid-template-columns:4fr 8fr;gap:72px;align-items:center}}
.about-portrait{max-width:250px}
@media (min-width:1000px){.about-portrait{max-width:440px}}
/* ABT-1: on mobile the portrait stacks above the tag/h1/lede/actions column
   (single-column grid below 1000px), so its height directly pushes the two
   CTA pills down the page. At the default sizing the actions row's bottom
   edge lands 35-89px into the fixed .callbar's band on first paint (measured
   at 390x844 and 360x740, REDUCED=1) — the primary "talk to the lawyer"
   buttons were partly or wholly covered. Shrink the portrait, tighten the
   stack's spacing, and use a smaller (but still >=44px-tall) pill variant
   for just this hero, so the whole block clears the call bar at both sizes
   without touching the shared .mt-32 / .page-head .lede / pill-lg rules
   that other sections still rely on. */
@media (max-width:999px){
  .about-portrait{max-width:150px}
  .about-head-grid{gap:12px}
  .about-head h1{margin-top:8px}
  .about-head .lede{margin-top:8px}
  .about-head .actions{margin-top:14px;gap:8px}
  .about-head .actions .pill{min-height:44px;font-size:15px;padding:4px 16px 4px 4px}
  .about-head .actions .pill .dot{width:34px;height:34px}
}
.about-name{font-size:clamp(50px,8.2vw,128px);line-height:1}
.about-spec .ph{aspect-ratio:4/5;max-width:520px}
.about-spec .about-photo{position:relative}
.about-spec .about-photo .hand{display:block;margin-top:18px;transform:rotate(-2deg);max-width:12em;text-align:start;padding-inline-start:6px}
.about-spec h2{font-size:clamp(30px,3.6vw,54px);max-width:14em}
.about-lists{display:grid;gap:56px}
@media (min-width:900px){.about-lists{grid-template-columns:1fr 1fr;gap:80px}}
.about-lists h2{font-size:clamp(34px,3.8vw,56px);margin-bottom:28px}
.about-lists .rows > li{padding:20px 0}
@media (min-width:640px){.about-lists .row-kv{grid-template-columns:110px 1fr}}
.about-lists .row-k,.about-contact .row-k{font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:0;line-height:1.3;color:var(--gold-ink);padding-top:0}
.about-ach{align-items:start}
.timeline .when{display:block;font-family:var(--display);font-size:20px;line-height:1.2;color:var(--gold-ink)}
.timeline strong{display:block;font-family:var(--serif);font-size:clamp(21px,1.9vw,26px);font-weight:500;line-height:1.3;color:var(--ink);margin-top:8px}
.timeline p{margin-top:6px;color:var(--muted)}
.timeline > li{padding:0 0 40px}
.about-contact{max-width:960px}
.about-contact-grid{display:grid;gap:32px}
@media (min-width:900px){.about-contact-grid{grid-template-columns:5fr 7fr;gap:56px;align-items:start}}
.about-contact h2{font-size:clamp(30px,3.2vw,44px)}
.about-contact .rows{border-top-width:0}
.about-contact .rows > li{padding:14px 0}
.about-contact .rows > li:first-child{padding-top:0}
@media (min-width:640px){.about-contact .row-kv{grid-template-columns:130px 1fr}}
.about-contact .row-kv a{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px;font-weight:600;transition:color var(--t-ui)}
@media (hover:hover){.about-contact .row-kv a:hover{color:var(--gold-ink)}}

/* ---------- practice: sticky index + stacked areas ---------- */
.practice-layout{display:grid;gap:28px;align-items:start}
.practice-layout > *{min-width:0;max-width:100%}
@media (min-width:1000px){.practice-layout{grid-template-columns:300px minmax(0,1fr);gap:72px}}
.practice-index .hand{display:block;margin-bottom:14px;transform:rotate(-3deg);transform-origin:right}
.practice-index ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
@media (max-width:999px){
  .practice-index ul{overflow-x:auto;padding:4px var(--gutter) 12px;margin-inline:calc(var(--gutter)*-1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .practice-index ul::-webkit-scrollbar{display:none}
}
@media (min-width:1000px){
  .practice-index{position:sticky;top:calc(var(--nav-h) + 20px)}
  .practice-index ul{flex-direction:column;align-items:flex-start;gap:6px}
}
.practice-index .pill{min-height:46px;font-size:15px;padding:4px 18px 4px 4px;flex:none}
.practice-index .pill .dot{width:38px;height:38px;font-family:var(--display);font-size:14px;line-height:1}
.practice-index .pill[aria-current]{--pill-bg:var(--ink);--pill-fg:var(--white);--dot-bg:var(--gold);--dot-fg:var(--ink);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.practice-index .pill[aria-current]:hover{background:var(--ink-2)}}
.practice-list{min-width:0}
.area{position:relative;display:grid;gap:28px;padding-block:clamp(44px,5.5vw,84px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 12px)}
.area:first-child{border-top:0;padding-top:8px}
@media (min-width:1000px){
  .area.has-photo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
  .area.has-photo.ph-end .area-photo{order:2}
  .area.has-photo.ph-start .area-photo{order:-1}
}
.area-idx{display:block;font-family:var(--display);font-size:clamp(56px,7vw,104px);line-height:.85;color:var(--gold-ink);opacity:.9;margin-bottom:16px}
.area-body h2{font-size:clamp(32px,3.8vw,56px);max-width:14em}
.area-body p{margin-top:20px;max-width:62ch}
.area-body .actions{margin-top:28px}
.area-photo{aspect-ratio:4/5;max-width:480px}
@media (max-width:999px){.area-photo{aspect-ratio:16/10;max-width:none}}
.practice-band{margin-block:clamp(20px,4vw,56px)}
.practice-band .ph{aspect-ratio:21/9}
@media (max-width:999px){.practice-band .ph{border-radius:0;margin-inline:calc(var(--gutter)*-1);aspect-ratio:16/9}}

/* ---------- faq ---------- */
.faq-head-grid{display:grid;gap:24px;align-items:end}
@media (min-width:1000px){.faq-head-grid{grid-template-columns:7fr 5fr;gap:64px}.faq-head-grid .qmark{order:2;justify-self:end}}
.qmark{font-family:var(--display);font-size:clamp(120px,22vw,320px);line-height:.8;color:var(--gold);opacity:.9}
@media (max-width:639px){.faq-seg{flex-wrap:wrap;gap:8px;border-radius:28px}.faq-seg button{flex:1 1 auto}}
.faq-list{max-width:960px}
.faq-list .acc-btn{min-height:80px}
.faq-after{max-width:34em;margin-top:56px}

/* ---------- articles ---------- */
.articles-head{display:grid;gap:20px;align-items:end}
@media (min-width:1000px){.articles-head{grid-template-columns:6fr 6fr;gap:64px}}
.articles .rows > li{padding:32px 0}
.articles .rows > li:first-child{padding-top:8px}

/* ---------- article ---------- */
.article-head h1{font-size:clamp(36px,4.8vw,72px);line-height:1.04;max-width:15em}
.article-head .meta{font-size:14px;color:var(--muted);margin-top:24px}
.article-body{padding-block:8px var(--sec)}
.article-body .pull{max-width:none}
@media (min-width:1100px){.article-body .pull{margin-inline-end:calc(-1 * min(360px,26vw))}}
.article-after .rows{border-top-width:0}
.article-after .art-row{padding:18px 0}
.article-after .art-row h3{font-size:clamp(20px,1.9vw,26px)}

/* ---------- contact ---------- */
.contact-split{align-items:start}
.contact-form{display:grid;gap:22px}
.contact-form .pill-block{justify-content:space-between}
.contact-rows{border-top-width:0}
.contact-rows > li{padding:0}
.contact-rows .ci{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:center;min-height:86px;padding:14px 0}
.contact-rows .ico-ring{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--white);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--t-ui),color var(--t-ui)}
.contact-rows .k{display:block;font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.contact-rows .v{display:block;font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);line-height:1.3;color:var(--ink);margin-top:2px}
@media (hover:hover){.contact-rows a.ci:hover .ico-ring{background:var(--gold);color:var(--ink)}}
.contact-map{padding-bottom:var(--sec)}
.contact-map .ph{aspect-ratio:16/7}
@media (max-width:999px){.contact-map .ph{aspect-ratio:4/3}}

/* ---------- accessibility ---------- */
.a11y .prose{max-width:820px}
.a11y .prose ul.rows{padding-inline-start:0;margin-top:8px}
.a11y .rows > li + li{margin-top:0}
/* accessibility.html's page-head (tag+h1+lede only, no CTA row) is short
   enough that on mobile the section right after it starts inside the fixed
   .callbar's band on first paint, so the bar visibly covers live text
   before the visitor scrolls. Filling the head to the viewport's height
   guarantees the next section starts at/after the screen's bottom edge, for
   any device height — a fixed pixel nudge was tried and rejected because it
   only worked for the two viewports it was tuned on and broke others.
   `.page-head.ground-paper2` is unique to this page (see page-head usage
   across the site), so this doesn't reach any other page's shorter or
   taller head. */
@media (max-width:999px){
  .page-head.ground-paper2{min-height:100vh;min-height:100svh}
}

/* ---------- photos of Shaul: a much lighter grade than the stock images ---------- */
.ph.ph-person::after,.ph.ph-soft::after{opacity:.09}
.ph.ph-person::before,.ph.ph-soft::before{background:linear-gradient(to top,rgba(10,22,40,.2),rgba(10,22,40,0) 55%)}
.ph.ph-person img,.ph.ph-soft img{filter:saturate(.96) contrast(1.02) brightness(1.01)}
.portrait img{filter:saturate(.96) contrast(1.02)}

/* byline avatar */
.byline{display:flex;align-items:center;gap:14px}
.byline .meta{font-size:15px;line-height:1.45;font-weight:700;color:var(--ink)}
.byline .meta .muted{font-weight:400;font-size:14px}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;box-shadow:0 0 0 1px var(--line),0 0 0 4px var(--paper),0 0 0 5px rgba(201,162,39,.5)}
.avatar-lg{width:76px;height:76px}

/* contact: the portrait sits under the details, sized so the column stays balanced */
.contact-portrait{aspect-ratio:4/5;max-width:320px}
@media (max-width:999px){.contact-portrait{max-width:none;aspect-ratio:4/3}}
/* a portrait in an area slot stays squarish on phones; a 16/10 band would crop him to a strip */
@media (max-width:999px){.area-photo.ph-person{aspect-ratio:1/1;max-width:none}}

/* a photo that must not be cropped: the box takes the image's own ratio */
.area-photo-free{aspect-ratio:auto!important;max-width:470px}
.area-photo-free img{position:static;inset:auto;width:100%;height:auto}
@media (max-width:999px){.area-photo-free{max-width:none}}