/* ==========================================================================
   Bendel Law P.A. — Boca Raton, Florida
   Design system: "Boca Noir" — brand blue #016EDC on near-black #17171A
   ========================================================================== */

:root{
  --ink:      #17171A;   /* brand near-black */
  --ink-2:    #1B1B1F;
  --ink-3:    #212127;
  --ink-4:    #2A2A31;
  --line:     rgba(244,242,237,.10);
  --line-2:   rgba(244,242,237,.18);
  --bone:     #F4F2ED;
  --mute:     #90909A;
  --mute-2:   #6E6E78;
  --brand:      #016EDC; /* brand blue: fills, rules, buttons */
  --brand-lift: #4FA6F7; /* tint for small text on dark (brand blue fails AA there) */
  --brand-deep: #0156AC;
  --brand-veil: rgba(1,110,220,.14);

  --display: "Abhaya Libre", Georgia, "Times New Roman", serif;
  --body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --slab:    "Abhaya Libre", Georgia, serif;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1240px;
  --sec: clamp(5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--brand); color:#fff; }

:focus-visible{
  outline:2px solid var(--brand-lift);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:1480px; margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:.75rem 1.25rem;
  font:600 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* --------------------------------------------------------------- type ---- */

h1,h2,h3,h4{ margin:0; font-weight:400; }

.d1,.d2,.d3{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:.005em;
  font-weight:700;
}
.d1{ font-size:clamp(2.4rem, 6.2vw, 5rem); }
.d2{ font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.08; }
.d3{ font-size:clamp(1.4rem, 2.4vw, 1.95rem); line-height:1.18; }

.eyebrow{
  font:500 11px/1 var(--body);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-lift);
  display:inline-block;
}
.eyebrow.muted{ color:var(--mute-2); }

.lede{
  font-size:clamp(1rem, 1.35vw, 1.1rem);
  color:var(--mute);
  max-width:58ch;
  line-height:1.75;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.prose p{ color:var(--mute); max-width:68ch; }
.prose strong{ color:var(--bone); font-weight:500; }

/* ---------------------------------------------------- reflection rule ---- */
/* Derived from the horizon lines beneath the palm in the Bendel Law mark. */

.reflect{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; margin:0; }
.reflect i{ display:block; height:1px; background:var(--line-2); }
.reflect i:nth-child(1){ width:120px; }
.reflect i:nth-child(2){ width:74px; opacity:.7; }
.reflect i:nth-child(3){ width:38px; opacity:.45; }
.reflect.left{ align-items:center; }

/* -------------------------------------------------------------- button --- */

.btn{
  --bg:var(--brand); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  font:600 12.5px/1 var(--body);
  letter-spacing:.09em; text-transform:uppercase;
  padding:1.05rem 1.6rem;
  border:1px solid var(--bg);
  border-radius:2px;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  cursor:pointer;
}
.btn span{ position:relative; z-index:1; }
.btn svg{ position:relative; z-index:1; flex:none; transition:transform .4s var(--ease); }
.btn::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--bone);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); color:var(--ink); box-shadow:0 14px 34px -16px rgba(1,110,220,.85); }
.btn:hover::after{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(3px); }

.btn.ghost{ --bg:transparent; --fg:var(--bone); border-color:var(--line-2); }
.btn.ghost::after{ background:var(--brand); }
.btn.ghost:hover{ color:#fff; box-shadow:none; }

/* -------------------------------------------------------------- header --- */

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.1rem;
  transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(23,23,26,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:.65rem;
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand img{ height:79px; width:auto; }
.brand b{
  font:500 10.5px/1.35 var(--body); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); display:none;
}

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font:500 11.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); position:relative; padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brand); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--bone); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]{ color:var(--bone); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hdr .btn{ padding:.8rem 1.15rem; font-size:11.5px; }

.burger{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
}
.burger i{ display:block; width:22px; height:1.5px; background:var(--bone); position:relative; transition:background .3s; }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--bone);
  transition:transform .4s var(--ease);
}
.burger i::before{ top:-7px; } .burger i::after{ top:7px; }
body.menu-open .burger i{ background:transparent; }
body.menu-open .burger i::before{ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger i::after{ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:.25rem;
  padding:6rem var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease);
  visibility:hidden;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer a{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.75rem,8vw,2.75rem); line-height:1.25;
  border-bottom:1px solid var(--line); padding-block:.5rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.menu-open .drawer a{ opacity:1; transform:none; }
.drawer a:nth-child(1){ transition-delay:.14s }
.drawer a:nth-child(2){ transition-delay:.20s }
.drawer a:nth-child(3){ transition-delay:.26s }
.drawer a:nth-child(4){ transition-delay:.32s }
.drawer a:nth-child(5){ transition-delay:.38s }
.drawer a:hover{ color:var(--brand-lift); }
.drawer .drawer__call{
  margin-top:2rem; font-family:var(--body); font-size:13px; letter-spacing:.16em;
  border:0; color:var(--brand-lift); transition-delay:.44s;
}

/* ---------------------------------------------------------------- hero --- */
/* Centred on a single axis: eyebrow, headline, lede, CTA, locator, portrait. */

.hero{
  /* portrait height: as tall as the viewport allows, but never wide enough
     to run off the right edge (the cut-out is square). */
  --figh:clamp(380px, min(88vh, 51vw), 900px);   /* portrait height; also drives nothing else */
  position:relative;
  min-height:100svh;
  display:flex; align-items:stretch;
  padding-top:clamp(6.5rem,13vh,9rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__grid{
  flex:1; display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.hero::after{ /* floor light, rising from the bottom edge */
  content:""; position:absolute; left:50%; bottom:-18%; z-index:-3;
  width:124vw; height:100vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(1,110,220,.20) 0%,
    rgba(1,110,220,.10) 38%,
    rgba(1,110,220,.035) 58%,
    transparent 74%);
  pointer-events:none;
}
.hero__grid{ position:relative; z-index:2; }

.hero__copy{ max-width:none; }
.hero__eyebrow{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 1.7rem;
  font:500 14px/1.6 var(--body); letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-lift);
}
.hero__eyebrow::before{
  content:""; flex:none; width:clamp(22px,3vw,44px); height:1px; background:var(--brand); opacity:.85;
}
.hero__copy .d1{ font-size:clamp(3rem,5.2vw,4.95rem); margin-bottom:1.5rem; }
.hero__copy .lede{ font-size:clamp(1.32rem,1.62vw,1.53rem); max-width:38ch; margin:0 0 2.4rem; }
.hero__loc{
  display:flex; align-items:flex-start; gap:.9rem; margin-top:1.8rem;
  font:400 14px/1.65 var(--body); letter-spacing:.13em; text-transform:uppercase; color:var(--mute-2);
}
.hero__loc::before{ content:""; flex:none; width:26px; height:1px; margin-top:.82em; background:var(--brand); }

.hero__copy .btn{ font-size:16px; padding:1.25rem 1.9rem; }
.hero__copy .btn svg{ width:16px; height:16px; }

.hero__stage{
  position:relative; align-self:stretch;
  display:flex; align-items:flex-end; justify-content:center;
}

.hero__figure{           /* height-driven: fills whatever the copy leaves over */
  position:relative; z-index:-1;
  height:var(--figh); width:auto; max-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.5) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.5) 90%,transparent 100%);
}
.hero__figure img{ height:100%; width:auto; max-width:none; }
/* ------------------------------------------------------------- marquee --- */

.strip{ border-block:1px solid var(--line); padding-block:1.35rem; overflow:hidden; background:var(--ink-2); }
.strip__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.strip:hover .strip__track{ animation-play-state:paused; }
.strip__group{ display:flex; align-items:center; flex:none; }
.strip__item{
  display:flex; align-items:center; gap:1.9rem; padding-inline:1.9rem;
  font:400 11.5px/1 var(--body); letter-spacing:.17em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap;
}
.strip__item::after{ content:""; width:4px; height:4px; background:var(--brand); opacity:.85; transform:rotate(45deg); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------ sections --- */

.sec{ padding-block:var(--sec); position:relative; }
.sec--tight{ padding-block:clamp(3.5rem,7vw,6rem); }
.sec--alt{ background:var(--ink-2); }
.sec--line{ border-top:1px solid var(--line); }

.statement{ text-align:center; }
.statement .reflect{ margin-bottom:2.25rem; }
.statement .d2{ margin-bottom:1.5rem; }
.statement .lede{ margin-inline:auto; max-width:60ch; }

/* split heading block */
.split{ text-align:center; }
.split__aside{ margin:0 auto clamp(2.5rem,5vw,4rem); }
.split__aside .eyebrow{ margin-bottom:1rem; }
.split__aside .d2{ margin-bottom:1.25rem; }
.split__aside p{ color:var(--mute); font-size:1rem; max-width:58ch; margin-inline:auto; }
.plist{ text-align:left; }

/* practice list */
.plist{ border-top:1px solid var(--line); }
.prow{
  display:grid; grid-template-columns:auto minmax(0,1.25fr) minmax(0,1.1fr) auto;
  gap:clamp(1rem,2.4vw,2rem); align-items:center;
  padding-block:1.25rem;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:color .35s var(--ease);
}
.prow::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.prow::after{
  content:""; position:absolute; inset:0 -1.25rem; z-index:-1;
  background:var(--ink-3); opacity:0; transition:opacity .35s var(--ease);
}
.prow:hover::before{ transform:scaleX(1); }
.prow:hover::after{ opacity:1; }
.prow h3{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.05rem,1.9vw,1.4rem); letter-spacing:.01em; }
.prow p{ color:var(--mute); font-size:.925rem; margin:0; }
.prow__img{
  width:104px; height:70px; flex:none; overflow:hidden;
  border-radius:2px; border:1px solid var(--line); background:var(--ink-3);
}
.prow__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.7) contrast(1.05);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.prow:hover .prow__img img{ transform:scale(1.07); filter:grayscale(.1) brightness(.95) contrast(1.02); }

.prow__go{
  width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; color:var(--mute); flex:none;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.prow:hover .prow__go{ background:var(--brand); border-color:var(--brand); color:#fff; transform:rotate(-45deg); }

/* situation picker: the reader names their situation in their own words,
   Joseph answers in his. Enacts the closing line underneath it. */

.pick__head{ text-align:center; margin:0 auto clamp(2.5rem,5vw,4rem); }
.pick__head .d2{ white-space:nowrap; font-size:clamp(1.2rem,6vw,3.6rem); }
.pick__head .lede{ max-width:56ch; margin:1rem auto 0; }

.pick__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem); align-items:start;
}

.pick__tabs{ border-top:1px solid var(--line); }
.pick__tab{
  position:relative; width:100%; display:grid; gap:.45rem;
  padding:1.4rem 1.25rem 1.4rem 1.6rem;
  background:none; border:0; border-bottom:1px solid var(--line);
  text-align:left; cursor:pointer; color:var(--mute);
  transition:color .3s var(--ease), background .35s var(--ease);
}
.pick__tab::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.pick__tab:hover{ color:var(--bone); }
.pick__tab[aria-selected="true"]{ color:var(--bone); background:var(--ink-3); }
.pick__tab[aria-selected="true"]::before{ transform:scaleY(1); }
.pick__q{
  font-family:var(--display); font-weight:400; text-transform:none;
  font-size:clamp(1.05rem,1.65vw,1.28rem); line-height:1.3;
}
.pick__area{
  font:500 10.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute-2); transition:color .3s var(--ease);
}
.pick__tab[aria-selected="true"] .pick__area{ color:var(--brand-lift); }

.pick__panels{
  position:relative; padding-left:clamp(0px,1.5vw,1.5rem);
  display:grid; grid-template-rows:auto auto;   /* panels stack in one cell so */
}                                               /* switching never shifts the layout */
.pick__panel{ grid-area:1 / 1; }
.pick__panel[hidden]{ display:block; visibility:hidden; pointer-events:none; }
.pick__panel.is-on{ animation:pickIn .5s var(--ease) both; }
@keyframes pickIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.pick__panel p{
  color:var(--mute); font-size:clamp(1rem,1.15vw,1.08rem); line-height:1.85; margin:0;
}
.pick__more{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem;
  font:500 11.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-lift);
}
.pick__more svg{ transition:transform .35s var(--ease); }
.pick__more:hover svg{ transform:translateX(4px); }
.pick__sig{
  grid-area:2 / 1;
  margin-top:2rem; padding-top:1.35rem; border-top:1px solid var(--line);
  font:400 11.5px/1.6 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2);
}
.pick__sig b{ color:var(--bone); font-weight:500; }

.pick__close{
  margin:clamp(2.75rem,5vw,4rem) auto 0; max-width:72ch;
  text-align:center; color:var(--mute); font-size:1rem; line-height:1.8;
}

/* bio split */
.bio{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:center; }
.bio__img{
  position:relative;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
}
.bio__img img{ width:100%; }
/* home page uses the white-background studio shot, so it reads as a framed
   portrait rather than a cut-out fading into the page */
.bio > .bio__img{
  -webkit-mask-image:none; mask-image:none;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  max-width:700px;
}
.bio .d2{ font-size:clamp(1.7rem,2.85vw,2.5rem); margin-bottom:1.5rem; }
.bio__sig{
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font:400 11.5px/1.6 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2);
}
.bio__sig b{ color:var(--bone); font-weight:500; }

/* review marquee: one row, looping right to left, pauses on hover/focus */

.rrow{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.rrow__track{ display:flex; width:max-content; animation:slide 130s linear infinite; }
.rrow:hover .rrow__track,
.rrow:focus-within .rrow__track{ animation-play-state:paused; }
.rrow__group{ display:flex; align-items:stretch; gap:1.25rem; padding-right:1.25rem; flex:none; }

.rcard{
  width:clamp(290px,25vw,370px); flex:none;
  background:var(--ink-3); border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.5rem,2.2vw,1.9rem); margin:0;
  display:flex; flex-direction:column; gap:1.05rem;
  transition:border-color .4s var(--ease);
}
.rcard:hover{ border-color:var(--line-2); }
.rcard__stars{ display:flex; gap:3px; color:var(--brand-lift); }
.rcard blockquote{ margin:0; color:var(--bone); font-size:.94rem; line-height:1.75; font-weight:300; }
.rcard figcaption{
  margin-top:auto; padding-top:.3rem;
  font:500 11.5px/1.5 var(--body); letter-spacing:.13em; text-transform:uppercase;
}
.rcard figcaption span{ display:block; color:var(--mute-2); font-weight:400; letter-spacing:.1em; }

/* shared disclaimer note */
.tnote{ margin-top:2rem; color:var(--mute-2); font-size:.78rem; letter-spacing:.02em; max-width:70ch; }


/* article cards */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.card{
  background:var(--ink-3); border:1px solid var(--line); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.card__img{ aspect-ratio:16/10; overflow:hidden; }
.card__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.8);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.card:hover .card__img img{ transform:scale(1.05); filter:grayscale(.15) contrast(1.02) brightness(.92); }
.card__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__tag{ font:500 10px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--brand-lift); }
.card h3{ font-family:var(--display); text-transform:uppercase; font-size:1.05rem; line-height:1.25; }
.card p{ color:var(--mute); font-size:.9rem; margin:0; }
.card__meta{ margin-top:auto; padding-top:.9rem; font:400 10.5px/1 var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--mute-2); }

/* call band */
.band{
  border-top:1px solid var(--line);
  background:
    radial-gradient(60% 120% at 50% 120%, rgba(1,110,220,.16), transparent 70%),
    var(--ink);
  text-align:center;
}
.band .d2{ margin:1.75rem 0 1.25rem; }
.band .lede{ margin:0 auto 2.25rem; }
.band__num{
  display:flex; justify-content:center; align-items:baseline; gap:.75rem; margin-top:1.75rem;
  font:400 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2);
}
.band__num b{ font-family:var(--display); font-size:1.45rem; letter-spacing:.02em; color:var(--bone); font-weight:400; }

/* ------------------------------------------------------------ subpages --- */

.phero{ padding-top:clamp(9rem,18vh,13rem); padding-bottom:clamp(3rem,6vw,4.5rem); position:relative; overflow:hidden; }
.phero::after{
  content:""; position:absolute; left:50%; top:-10%; width:110vw; height:60vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(1,110,220,.11), transparent 65%);
  pointer-events:none; z-index:-1;
}
.phero{ text-align:center; }
.phero .eyebrow{ margin-bottom:1.25rem; }
.phero .d1{ font-size:clamp(2.3rem,4.8vw,3.9rem); margin:0 auto 1.5rem; max-width:19ch; }
.phero .lede{ margin-inline:auto; }
.crumb{ font:400 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-bottom:1.75rem; }
.crumb a:hover{ color:var(--brand-lift); }

/* practice-area cards */

.pagrid{           /* flex, not grid: a lone last card centres instead of orphaning left */
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1rem,1.8vw,1.5rem);
}
.pacard{
  flex:0 1 350px; max-width:360px;
  background:var(--ink-3); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column;
  scroll-margin-top:7rem;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.pacard:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.pacard__img{ aspect-ratio:16/10; overflow:hidden; }
.pacard__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.78) contrast(1.05);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.pacard:hover .pacard__img img{ transform:scale(1.05); filter:grayscale(.15) brightness(.92); }
.pacard__body{ padding:clamp(1.4rem,2vw,1.75rem); display:flex; flex-direction:column; gap:.85rem; flex:1; }
.pacard h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.15rem,1.7vw,1.35rem); line-height:1.2; letter-spacing:.01em;
}
.pacard p{ color:var(--mute); font-size:.92rem; line-height:1.75; margin:0; }
.pacard__btn{
  margin-top:auto;              /* pins to the card bottom, so buttons line up per row */
  align-self:flex-start;
  font-size:11px; padding:.85rem 1.3rem;
}
.toc{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.5rem; justify-content:center; }
.toc a{
  border:1px solid var(--line-2); border-radius:100px; padding:.55rem 1rem;
  font:500 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.toc a:hover{ color:#fff; background:var(--brand); border-color:var(--brand); }

/* ---- attorney profile: portrait beside the bio, one simple column ----- */

.profile{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr);
  gap:clamp(2rem,4.5vw,4rem); align-items:start;
}
.profile__img{
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
}
.profile__img img{ width:100%; }

.psocial{ display:flex; justify-content:center; gap:.7rem; margin-top:.5rem; }
.psocial a{
  width:40px; height:40px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; color:var(--mute);
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.psocial a:hover{ color:#fff; background:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
.profile__body p{ color:var(--mute); font-size:1.02rem; line-height:1.85; margin:0 0 1.15em; }

.facts{ margin:2.5rem 0 0; border-top:1px solid var(--line); }
.facts > div{
  display:grid; grid-template-columns:minmax(0,.35fr) minmax(0,1fr); gap:1.5rem;
  padding:.95rem 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.facts dt{
  font:500 11px/1.5 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
}
.facts dd{ margin:0; color:var(--bone); font-size:.94rem; line-height:1.6; font-weight:300; }
.contact__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem;
  max-width:900px; margin-inline:auto;
}
.cblock{ border:1px solid var(--line); background:var(--ink-3); border-radius:3px; padding:1.75rem; text-align:center; }
.cblock .eyebrow{ margin-bottom:1rem; }
.cblock p{ color:var(--mute); font-size:.95rem; }
.cblock a.big{
  display:block; margin-top:.35rem;
  font-family:var(--display); font-size:1.5rem; letter-spacing:.01em;
  transition:color .3s var(--ease);
}
.cblock a.big:hover{ color:var(--brand-lift); }
.map{ margin-top:1.5rem; border:1px solid var(--line); border-radius:3px; overflow:hidden; filter:grayscale(1) invert(.92) contrast(.9); }
.map iframe{ display:block; width:100%; height:420px; border:0; }

/* ---- long-form practice area pages ---------------------------------- */

.guide{ max-width:76ch; margin-inline:auto; }
.guide h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.2;
  margin:3rem 0 1.1rem; scroll-margin-top:7rem;
}
.guide h3{
  font-family:var(--body); font-weight:600; color:var(--bone);
  font-size:1.02rem; letter-spacing:.01em; margin:2rem 0 .75rem;
}
.guide p{ color:var(--mute); font-size:1.02rem; line-height:1.85; margin:0 0 1.15em; }
.guide ul,.guide ol{ color:var(--mute); font-size:1.02rem; line-height:1.85; padding-left:1.2rem; margin:0 0 1.4em; }
.guide li{ margin-bottom:.6rem; }
.guide li::marker{ color:var(--brand-lift); }
.guide strong{ color:var(--bone); font-weight:500; }
.guide a{ color:var(--brand-lift); }
.guide a:hover{ text-decoration:underline; }

.guide__lead{ font-size:clamp(1.08rem,1.4vw,1.2rem); color:var(--bone); font-weight:300; line-height:1.8; }

.guide__box{
  border:1px solid var(--line); border-left:2px solid var(--brand);
  background:var(--ink-3); border-radius:3px;
  padding:1.4rem 1.6rem; margin:2rem 0;
}
.guide__box p{ margin:0; font-size:.96rem; }
.guide__box p + p{ margin-top:.8rem; }

.guide__toc{
  border:1px solid var(--line); background:var(--ink-2); border-radius:3px;
  padding:1.5rem 1.75rem; margin:2.5rem 0 0;
}
.guide__toc b{
  display:block; font:500 11px/1 var(--body); letter-spacing:.2em;
  text-transform:uppercase; color:var(--brand-lift); margin-bottom:1rem;
}
.guide__toc ol{ margin:0; padding-left:1.1rem; columns:2; column-gap:2.5rem; }
.guide__toc li{ margin-bottom:.5rem; break-inside:avoid; }
.guide__toc a{ color:var(--mute); font-size:.92rem; }
.guide__toc a:hover{ color:var(--brand-lift); }

@media (max-width:760px){ .guide__toc ol{ columns:1; } }

.posthero{
  max-width:900px; margin-inline:auto;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
.posthero img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:grayscale(1) brightness(.82) contrast(1.04); }

.article{ max-width:74ch; margin-inline:auto; }
.article h2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.2rem,2vw,1.5rem); margin:2.5rem 0 1rem; }
.article ul{ color:var(--mute); padding-left:1.1rem; margin:0 0 1.15em; }
.article li{ margin-bottom:.5rem; }
.article li::marker{ color:var(--brand-lift); }
.article__meta{ display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center; font:400 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-bottom:2.5rem; }

/* -------------------------------------------------------------- footer --- */

.ftr{ border-top:1px solid var(--line); background:var(--ink-2); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; }
.ftr__top{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); text-align:center; justify-items:center; }
.ftr__brand img{ height:46px; margin:0 auto 1.25rem; }
.ftr__brand p{ color:var(--mute); font-size:.9rem; max-width:34ch; }
.ftr h4{ font:500 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--brand-lift); margin-bottom:1.35rem; }
.ftr ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; align-items:center; }
.ftr li a, .ftr address a{ color:var(--mute); font-size:.92rem; font-style:normal; transition:color .3s var(--ease); }
.ftr li a:hover, .ftr address a:hover{ color:var(--brand-lift); }
.ftr address{ color:var(--mute); font-size:.92rem; font-style:normal; line-height:1.8; }
.ftr__social{ display:flex; gap:.6rem; margin-top:1.5rem; justify-content:center; }
.ftr__social a{
  width:36px; height:36px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; color:var(--mute);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ftr__social a:hover{ color:#fff; background:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
.ftr__bot{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:center; text-align:center;
  font-size:.78rem; color:var(--mute-2);
}
.ftr__bot p{ margin:0; max-width:62ch; }

/* mobile sticky call */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:98; display:none;
  background:var(--brand); color:#fff;
  padding:.95rem; text-align:center;
  font:600 12.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase;
}

/* ------------------------------------------------------------- reveals --- */

.rv{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1x{ transition-delay:.08s } .rv.d2x{ transition-delay:.16s }
.rv.d3x{ transition-delay:.24s } .rv.d4x{ transition-delay:.32s }

/* hero load sequence */
.hero .hero__figure,
.hero__copy > *{ opacity:0; }
.hero.ready .hero__figure{ animation:figIn 1.5s var(--ease) .25s forwards; }
.hero.ready .hero__copy > *{ animation:riseIn 1s var(--ease) forwards; }
.hero.ready .hero__copy > *:nth-child(1){ animation-delay:.55s }
.hero.ready .hero__copy > *:nth-child(2){ animation-delay:.68s }
.hero.ready .hero__copy > *:nth-child(3){ animation-delay:.78s }
.hero.ready .hero__copy > *:nth-child(4){ animation-delay:.88s }
.hero.ready .hero__copy > *:nth-child(5){ animation-delay:.98s }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes figIn{ from{ opacity:0; transform:translateY(34px) scale(1.02); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------- responsive --- */

@media (max-width:1040px){
  .split{ grid-template-columns:1fr; }
  .bio{ grid-template-columns:1fr; }
  .cards,.contact__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pick__grid{ grid-template-columns:1fr; }
  .pick__panels{ padding-left:0; }
  .profile{ grid-template-columns:1fr; }
  .profile__side{ max-width:430px; margin-inline:auto; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .ftr__brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav{ display:none; }
  .brand img{ height:52px; }
  .burger{ display:flex; }
  .hdr .btn{ display:none; }
  .brand b{ display:none; }
  .hero{ min-height:auto; padding-top:clamp(6.5rem,14vh,9rem); }
  .hero__grid{ grid-template-columns:1fr; gap:2rem; text-align:center; }
  .hero__figure{ height:clamp(280px,min(46vh,82vw),520px); max-width:none; }
  .hero__copy{ max-width:none; }
  .hero__copy .lede{ max-width:44ch; margin-inline:auto; }
  .hero__eyebrow{ justify-content:center; }
  .hero__loc{ justify-content:center; line-height:1.6; }
  .hero__eyebrow::before,.hero__loc::before{ display:none; }
  .callbar{ display:block; }
  body{ padding-bottom:44px; }
  .prow{ grid-template-columns:auto 1fr auto; row-gap:.4rem; }
  .prow__img{ width:74px; height:56px; grid-column:1; grid-row:1; }
  .prow h3{ grid-column:2; grid-row:1; }
  .prow__go{ grid-column:3; grid-row:1; }
  .prow p{ grid-column:1 / -1; grid-row:2; }
}

@media (max-width:640px){
  .cards,.contact__grid{ grid-template-columns:1fr; }
  .facts > div{ grid-template-columns:1fr; gap:.3rem; }
  .ftr__top{ grid-template-columns:1fr; }
  .ftr__bot{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
  /* auto-scrolling rows become manually scrollable instead */
  .rrow{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .rrow__track{ animation:none !important; transform:none !important; }
  .hero .hero__figure,.hero__copy > *{ opacity:1; }
}