/* ============================================================
   SITE COMPONENTS
   ============================================================ */

/* ---------- HEADER ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;mix-blend-mode:normal;
  transition:transform var(--d-standard) var(--ease-out),background var(--d-standard) var(--ease-out),
             border-color var(--d-standard) var(--ease-out)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);
  padding-block:clamp(1rem,1.6vw,1.5rem)}
.hdr::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d-reveal) var(--ease-inout)}
.hdr.is-stuck{background:color-mix(in oklab,var(--bone-200) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.hdr.is-stuck::after{transform:scaleX(1)}
.hdr.is-hidden{transform:translateY(-101%)}

.brand{display:flex;align-items:flex-end;gap:.75rem;color:var(--ox-700);flex:none}
.invert .brand,
html.nav-open .brand{color:var(--bone-200)}
.invert .brand__sub,
html.nav-open .brand__sub{color:#8A7F76}
html.nav-open .burger{border-color:var(--rule-inv)}
html.nav-open .burger span{background:var(--bone-200)}
.brand__mark{width:clamp(112px,10.5vw,168px);height:auto;color:currentColor}
.brand__sub{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tr-ultra);
  text-transform:uppercase;color:var(--ink-mute);padding-bottom:.28em;white-space:nowrap}
@media (max-width:640px){.brand__sub{display:none}}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.3vw,2.3rem)}
.nav a:not(.btn){font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);transition:color var(--d-micro) var(--ease)}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{color:var(--ox-700)}
.nav__cta{margin-left:.6rem}
@media (max-width:1000px){.nav--main{display:none}}

.burger{display:none;width:46px;height:46px;border:1px solid var(--rule);background:none;
  cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:13px;width:20px;height:1.5px;background:var(--ox-700);
  transition:transform var(--d-standard) var(--ease-out),opacity var(--d-micro)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1000px){.burger{display:block}}

/* mobile drawer (never a modal) */
.drawer{position:fixed;inset:0;z-index:99;background:var(--ox-900);color:var(--bone-200);
  display:flex;flex-direction:column;justify-content:center;padding:var(--margin);
  clip-path:inset(0 0 100% 0);transition:clip-path var(--d-reveal) var(--ease-inout);
  visibility:hidden}
.drawer.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer a{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,10vw,4.5rem);line-height:1.02;letter-spacing:-0.035em;
  padding-block:.16em;border-bottom:1px solid var(--rule-inv);
  opacity:0;transform:translateY(28px);
  transition:opacity var(--d-standard) var(--ease-out),transform var(--d-standard) var(--ease-out),
             color var(--d-micro)}
.drawer.is-open a{opacity:1;transform:none}
.drawer a:hover{color:var(--rose)}
.drawer__meta{margin-top:var(--s-8);font-family:var(--font-mono);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:#8B8177}

/* ---------- HERO ---------- */
.hero{position:relative;padding-top:clamp(8rem,15vh,12rem);padding-bottom:var(--pad-section)}
.hero__kicker{grid-column:1/-1;margin-bottom:clamp(1.6rem,3vw,3rem)}
.hero__title{grid-column:1/-1}
.hero__title em{font-style:normal;color:var(--ox-700)}
.hero__meta{grid-column:1/6;margin-top:clamp(2rem,4vw,3.5rem)}
.hero__aside{grid-column:8/13;margin-top:clamp(2rem,4vw,3.5rem);align-self:end}
@media (max-width:900px){.hero__meta,.hero__aside{grid-column:1/-1}
  .hero__aside{margin-top:var(--s-6)}}

.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,3rem);margin-top:var(--s-7)}
.stat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,3rem);
  line-height:.95;letter-spacing:-0.03em;color:var(--ox-700)}
.stat__l{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin-top:.55em;max-width:16ch}

/* ---------- CREDITS BLOCK ----------
   Practice areas set like end-title credits: mono, uppercase, +0.08em,
   on the exposed 12-col grid. Replaces the marquee — a logo/keyword
   marquee is now invisible on every agency and corporate site. */
.credits{border-block:1px solid var(--rule);padding-block:clamp(2rem,3.4vw,3rem)}
/* bound to the same 12-col grid as everything else so the item edges land
   exactly on the exposed column guides */
.credits__grid{display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);row-gap:clamp(1rem,1.6vw,1.5rem)}
.credits__i{grid-column:span 2}
@media (max-width:1000px){.credits__i{grid-column:span 3}}
@media (max-width:640px){.credits__i{grid-column:span 2}}
.credits__i{display:flex;flex-direction:column;gap:.45em;
  padding-top:.9rem;border-top:1px solid var(--rule)}
.credits__k{font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:var(--tr--1);text-transform:uppercase;color:var(--ox-700);
  font-variant-numeric:tabular-nums}
.credits__v{font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.35}

/* ---------- IMAGE SCALE-PARALLAX ---------- */
html.has-scroll-timeline .fig--px img{
  animation:px linear both;
  animation-timeline:view();
  animation-range:cover 0% cover 100%}
@keyframes px{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  html.has-scroll-timeline .fig--px img{animation:none;animation-timeline:none!important}}

/* ---------- PRACTICE INDEX (sticky-pinned) ---------- */
.prac{border-top:1px solid var(--rule)}
.prac__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  padding-block:clamp(2rem,3.6vw,3.2rem);border-bottom:1px solid var(--rule);
  position:relative;transition:background var(--d-standard) var(--ease-out)}
.prac__row::before{content:"";position:absolute;inset:0 calc(var(--margin)*-1);
  background:var(--ox-700);transform:scaleY(0);transform-origin:bottom;z-index:-1;
  transition:transform var(--d-standard) var(--ease-inout)}
.prac__row:hover::before{transform:scaleY(1);transform-origin:top}
.prac__row:hover{color:var(--bone-100)}
.prac__row:hover .prac__n,.prac__row:hover .prac__body{color:color-mix(in oklab,var(--bone-100) 74%,transparent)}
.prac__n{grid-column:1/2;padding-top:.5em;color:var(--ink-mute);transition:color var(--d-standard)}
.prac__h{grid-column:2/7;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.75rem,3.6vw,3.4rem);line-height:.98;letter-spacing:-0.032em}
.prac__body{grid-column:8/12;color:var(--ink-soft);font-size:14px;line-height:1.55;
  transition:color var(--d-standard)}
.prac__arw{grid-column:12/13;justify-self:end;align-self:start;padding-top:.4em;
  transition:transform var(--d-standard) var(--ease-out)}
.prac__row:hover .prac__arw{transform:translate(.4em,-.4em)}
@media (max-width:900px){
  .prac__row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .prac__n{grid-column:1/-1;padding-top:0;margin-bottom:.5em}
  .prac__h{grid-column:1/-1;margin-bottom:.7em}
  .prac__body{grid-column:1/-1}
  .prac__arw{display:none}
}

/* chips inside expanded practice detail */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-5)}
.chip{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;padding:.55em .95em;border:1px solid var(--rule);
  color:var(--ink-soft);transition:border-color var(--d-micro),color var(--d-micro)}
.chip:hover{border-color:var(--ox-700);color:var(--ox-700)}

/* ---------- FIGURE / PORTRAIT ----------
   True two-tone: the plate is oxblood, the greyscale image is screen-blended
   over it, so blacks land on oxblood and whites stay paper. `mix-blend-mode:
   color` over a greyscale source only produces muddy mauve. */
.fig{position:relative;overflow:hidden;background:var(--bone-300);isolation:isolate}
.fig img{width:100%;height:100%;object-fit:cover;
  transition:filter var(--d-deliberate) var(--ease),
             opacity var(--d-deliberate) var(--ease)}
.fig--duo{background:var(--ox-700)}
.fig--duo img{filter:grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode:screen}
.fig--duo:hover img,.fig--duo:focus-within img{
  filter:grayscale(0) contrast(1);mix-blend-mode:normal}
.fig__cap{position:absolute;left:0;bottom:0;right:0;padding:var(--s-5);z-index:2;
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-100);
  background:linear-gradient(to top,rgba(23,0,12,.78),transparent)}

/* ---------- TESTIMONIALS ---------- */
.quotes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.quote{grid-column:span 6;border-top:1px solid var(--rule);padding-top:var(--s-6);
  display:flex;flex-direction:column;gap:var(--s-5)}
.quote__mark{font-family:var(--font-display);font-size:3.4rem;line-height:.62;
  color:currentColor;opacity:.3;height:.42em;display:block}
.quote__t{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.48;letter-spacing:-0.012em;
  color:var(--ink)}
.quote__by{display:flex;align-items:center;gap:var(--s-4);margin-top:auto;padding-top:var(--s-4)}
.quote__av{width:56px;height:56px;flex:none;overflow:hidden;background:var(--bone-300)}
.quote__av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.quote__nm{display:block;font-family:var(--font-display);font-weight:var(--w-disp);
  font-size:15px;letter-spacing:-0.01em;line-height:1.25;color:var(--ink)}
.quote__rl{display:block;font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-top:.4em}
@media (max-width:900px){.quotes{grid-template-columns:1fr}.quote{grid-column:1/-1}}

/* ---------- ACCORDION (FAQ) ---------- */
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--gutter);align-items:start;
  padding-block:clamp(1.5rem,2.6vw,2.2rem);color:inherit;
  transition:color var(--d-micro) var(--ease)}
.acc__btn:hover{color:var(--ox-700)}
.acc__q{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,2.05vw,1.75rem);line-height:1.16;letter-spacing:-0.022em}
.acc__ic{width:22px;height:22px;position:relative;flex:none;margin-top:.35em}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--d-standard) var(--ease-inout),opacity var(--d-standard)}
.acc__ic::before{left:0;top:10.5px;width:22px;height:1.5px}
.acc__ic::after{left:10.5px;top:0;width:1.5px;height:22px}
.acc__btn[aria-expanded="true"] .acc__ic::after{transform:scaleY(0)}
.acc__btn[aria-expanded="true"] .acc__ic::before{transform:rotate(180deg)}
.acc__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-reveal) var(--ease-inout)}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__a{padding-bottom:clamp(1.6rem,2.6vw,2.4rem);max-width:var(--measure);
  color:var(--ink-soft);grid-column:2}
.acc__inner{display:grid;grid-template-columns:auto 1fr auto;gap:var(--gutter)}
@media (max-width:760px){.acc__inner{grid-template-columns:1fr}.acc__a{grid-column:1}
  .acc__btn{grid-template-columns:1fr auto}.acc__btn .num{display:none}}

/* ---------- CTA BAND ---------- */
.cta{position:relative;overflow:hidden}
.cta__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:end}
.cta__h{grid-column:1/9}
.cta__act{grid-column:9/13;justify-self:end;display:flex;flex-direction:column;
  gap:var(--s-4);align-items:flex-end}
@media (max-width:900px){.cta__h,.cta__act{grid-column:1/-1}
  .cta__act{justify-self:start;align-items:flex-start;margin-top:var(--s-7)}}

/* ---------- FOOTER ---------- */
.ftr{padding-top:clamp(4rem,7vw,7rem);padding-bottom:var(--s-7)}
.ftr__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  padding-bottom:clamp(3rem,6vw,5.5rem)}
.ftr__brand{grid-column:1/5}
.ftr__col{grid-column:span 2}
.ftr__col h3{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--s-5);font-weight:500}
.ftr__col li+li{margin-top:.65em}
.ftr__col li,.ftr__col a{font-size:14px;line-height:1.4;color:var(--ink-soft);
  transition:color var(--d-micro) var(--ease)}
.ftr__col a:hover{color:var(--ink)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);justify-content:space-between;
  align-items:center;padding-top:var(--s-6);border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}
.ftr__disc{max-width:78ch;font-family:var(--font-body);font-size:13px;
  letter-spacing:0;text-transform:none;line-height:1.6;color:var(--ink-mute);
  padding-top:var(--s-6)}
/* oversized ghost mark — must key off the bone ink on the dark plate */
.ftr__wordmark{width:100%;height:auto;color:var(--bone-200);opacity:.075;
  margin-top:clamp(2rem,4vw,3.5rem);margin-bottom:clamp(1.5rem,3vw,2.5rem);display:block}
@media (max-width:900px){
  .ftr__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ftr__brand{grid-column:1/-1;margin-bottom:var(--s-7)}
  .ftr__col{grid-column:span 3}
}
@media (max-width:560px){.ftr__col{grid-column:span 6}}

/* ---------- PAGE HEAD ---------- */
.phead{padding-top:clamp(7.5rem,13vh,11rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.phead__t{grid-column:1/11}
.phead__d{grid-column:1/7;margin-top:var(--s-6)}
@media (max-width:900px){.phead__t,.phead__d{grid-column:1/-1}}

/* ---------- PILLARS ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  border-top:1px solid var(--rule)}
.pillar{padding-top:var(--s-6);padding-right:var(--gutter);
  border-right:1px solid var(--rule)}
.pillar:last-child{border-right:0}
.pillar h3{margin:var(--s-5) 0 var(--s-4)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--rule);padding-bottom:var(--s-6)}
  .pillar:last-child{border-bottom:0}}

/* ---------- PRACTICE INDEX NAV ---------- */
.pidx{border-block:1px solid var(--rule);padding-block:var(--s-5)}
.pidx ul{display:flex;flex-wrap:wrap;gap:var(--s-4) clamp(1.4rem,3vw,2.8rem)}
.pidx a{font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:-0.01em;display:flex;align-items:baseline;gap:.6em;color:var(--ink-soft);
  transition:color var(--d-micro)}
.pidx a:hover{color:var(--ox-700)}

/* ---------- PRACTICE DETAIL ---------- */
.pdet{border-bottom:1px solid var(--rule);scroll-margin-top:6rem}
.pdet__grid{padding-block:clamp(3rem,6vw,6rem)}
.pdet__lead{grid-column:1/5;position:sticky;top:7rem;align-self:start}
.pdet__lead .num{display:block;margin-bottom:var(--s-4)}
.pdet__body{grid-column:6/12}
@media (max-width:900px){.pdet__lead{grid-column:1/-1;position:static;margin-bottom:var(--s-6)}
  .pdet__body{grid-column:1/-1}}

/* ---------- FACTS ---------- */
.facts{margin-top:clamp(2rem,3.5vw,3rem);border-top:1px solid var(--rule)}
.fact{display:grid;grid-template-columns:minmax(0,10rem) 1fr;gap:var(--gutter);
  padding-block:var(--s-4);border-bottom:1px solid var(--rule)}
.fact dt{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);padding-top:.25em}
.fact dd{font-size:14px;color:var(--ink)}
.fact:has(+ .fact--cont){border-bottom:0;padding-bottom:0}
.fact--cont{padding-top:.2rem}
.fact--cont dd{grid-column:2}
@media (max-width:560px){.fact{grid-template-columns:1fr;gap:.35rem}
  .fact--cont dd{grid-column:1}}

/* ---------- BIO ---------- */
.bio__block+.bio__block{margin-top:clamp(2.5rem,4.5vw,4rem);padding-top:clamp(2.5rem,4.5vw,4rem);
  border-top:1px solid var(--rule)}

/* ---------- POSTS ---------- */
.posts{border-top:1px solid var(--rule)}
.post{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  padding-block:clamp(2rem,4vw,3.4rem);border-bottom:1px solid var(--rule);
  align-items:start;transition:color var(--d-standard)}
.post:hover{color:var(--ox-700)}
.post__meta{grid-column:1/3;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.post__t{grid-column:3/8}
.post__x{grid-column:8/12;font-size:14px}
.post__go{grid-column:12/13;justify-self:end;font-family:var(--font-mono);
  font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:.6em}
@media (max-width:900px){
  .post{grid-template-columns:1fr;gap:var(--s-4)}
  .post__meta,.post__t,.post__x,.post__go{grid-column:1/-1}
  .post__meta{flex-direction:row;align-items:center;gap:1rem}
  .post__go{justify-self:start}}

/* ---------- ARTICLE ---------- */
.article{color:var(--ink-soft);font-size:clamp(1.02rem,1.05vw,1.14rem);line-height:1.72}
.article>*+*{margin-top:1.25em}
.article h2{font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.12;letter-spacing:-0.028em;
  margin-top:2.4em;margin-bottom:.1em}
.article .lead{color:var(--ink);font-size:clamp(1.2rem,1.75vw,1.5rem);line-height:1.42;
  max-width:none;margin-bottom:.6em}
.article ul{padding-left:0}
.article li{position:relative;padding-left:1.6em;margin-top:.6em}
.article li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;
  background:var(--ox-700);opacity:.6}
.article strong{color:var(--ink);font-weight:600}
.article em{font-style:italic}