/* ==========================================================================
   LP Evans Solicitors & Advocates — design system
   ========================================================================== */

:root{
  --ink:#0B0D0F;
  --ink-2:#12161A;
  --ink-3:#1B2126;
  --paper:#FAF8F5;
  --paper-2:#F1ECE4;
  --paper-3:#E4DCD0;
  --brass:#B3893C;         /* rules, borders, decoration, large numerals */
  --brass-ink:#856419;     /* small text on light, and fills behind white text */
  --brass-lite:#D9B46A;    /* text on dark grounds */
  --text:#171A1D;
  --text-mute:#5A6169;
  --text-invert:#F5F2EC;
  --text-invert-mute:#A7ADB4;
  --line:#DED6C9;
  --line-dark:rgba(255,255,255,.12);

  --font-display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --font-text:"Libre Caslon Text",Georgia,serif;
  --font-ui:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,48px);
  --s-section:clamp(72px,9vw,132px);
  --radius:2px;
  --shadow:0 24px 60px -30px rgba(11,13,15,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-ui);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.08}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
[id]{scroll-margin-top:110px}
.section{padding-block:var(--s-section)}
.page-head + .section{padding-top:clamp(56px,7vw,88px)}
.section--tight{padding-block:clamp(52px,6vw,84px)}
.dark{background:var(--ink);color:var(--text-invert)}
.dark h1,.dark h2,.dark h3{color:var(--text-invert)}
.tint{background:var(--paper-2)}

/* --- type ---------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass-ink);margin:0 0 20px;display:flex;
  align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);flex:none}
.dark .eyebrow{color:var(--brass-lite)}
.dark .eyebrow::before{background:var(--brass-lite)}

.h-xl{font-size:clamp(2.9rem,7.4vw,5.4rem)}
.h-lg{font-size:clamp(2.2rem,4.6vw,3.5rem)}
.h-md{font-size:clamp(1.65rem,2.7vw,2.3rem)}
.h-sm{font-size:clamp(1.25rem,1.9vw,1.5rem)}
.lede{font-size:clamp(1.1rem,1.55vw,1.28rem);line-height:1.6;color:var(--text-mute)}
.dark .lede{color:var(--text-invert-mute)}
.prose{max-width:66ch}
.prose p+p{margin-top:0}
.measure{max-width:56ch}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:16px 28px;border:1px solid transparent;border-radius:var(--radius);
  background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--brass{background:var(--brass-ink);color:#fff}
.btn--brass:hover{background:#6F5412}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{background:var(--ink);color:var(--text-invert);border-color:var(--ink)}
.dark .btn--ghost:hover{background:var(--text-invert);color:var(--ink);border-color:var(--text-invert)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--brass-ink);
}
.link-arrow svg{transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* --- emergency bar ------------------------------------------------------- */
.alertbar{
  background:var(--ink-3);color:var(--text-invert);font-size:13.5px;
  border-bottom:1px solid var(--line-dark);
}
.alertbar .wrap{display:flex;gap:2px 22px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding-block:4px;text-align:center}
.alertbar strong{font-weight:600}
.alertbar a{color:var(--brass-lite);text-decoration:none;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
.alertbar a:hover{text-decoration:underline}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--brass-lite);flex:none;
  box-shadow:0 0 0 0 rgba(217,180,106,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(217,180,106,0)}100%{box-shadow:0 0 0 0 rgba(217,180,106,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

/* --- header -------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid var(--line-dark);transition:box-shadow .3s var(--ease)}
.site-head.is-stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand img{height:30px;width:auto}
@media (min-width:640px){.brand img{height:36px}}


.nav{display:none;align-items:center;gap:30px}
.nav a{font-size:13.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--text-invert-mute);position:relative;padding-block:6px;
  transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass-lite);transition:right .3s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text-invert)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
@media (min-width:1040px){.nav{display:flex}.head-cta{display:inline-flex}}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:1px solid var(--line-dark);
  border-radius:var(--radius);cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--text-invert);transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:1040px){.burger{display:none}}

.drawer{
  position:fixed;inset:0;z-index:70;background:var(--ink);
  display:flex;flex-direction:column;padding:96px var(--gutter) 40px;
  transform:translateY(-100%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s;
  overflow-y:auto;
}
.drawer.is-open{transform:none;visibility:visible}
.drawer a{font-family:var(--font-display);font-size:clamp(1.7rem,7vw,2.4rem);
  color:var(--text-invert);text-decoration:none;padding-block:12px;
  border-bottom:1px solid var(--line-dark)}
.drawer a:hover{color:var(--brass-lite)}
.drawer .btn{margin-top:32px;align-self:stretch;font-family:var(--font-ui);
  font-size:14px;line-height:1;color:#fff;border-bottom:0}
.drawer .btn:hover{color:#fff}
.drawer-close{position:absolute;top:18px;right:var(--gutter)}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:var(--text-invert);overflow:hidden;
  isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% center;
  filter:saturate(.66) contrast(1.18) brightness(.8)}
/* Deep on the left where the type sits, near-clear on the right so the room keeps its
   contrast — a flat scrim over the whole frame is what makes a hero look washed out. */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.1) 26%,rgba(8,9,11,0) 55%,rgba(8,9,11,.55) 100%),
    linear-gradient(97deg,rgba(8,9,11,.97) 0%,rgba(8,9,11,.93) 30%,rgba(8,9,11,.62) 55%,rgba(8,9,11,.12) 100%)}
.hero .wrap{position:relative;padding-block:clamp(76px,11vw,124px)}
.hero .eyebrow{font-size:clamp(14px,1.35vw,17px);letter-spacing:.26em;gap:20px;
  color:var(--brass-lite);margin-bottom:26px}
.hero .eyebrow::before{width:56px}
/* keep the caption on one line on narrow screens */
@media (max-width:520px){
  .hero .eyebrow{font-size:12.5px;letter-spacing:.15em;gap:12px}
  .hero .eyebrow::before{width:26px}
}
.hero h1{max-width:14ch}
.hero h1 em{font-style:normal;color:var(--brass-lite)}
.hero .lede{max-width:52ch;margin-top:26px;color:#D6D2CA}
.hero .btn-row{margin-top:40px}

.trustbar{border-top:1px solid var(--line-dark);background:rgba(11,13,15,.72);
  backdrop-filter:blur(6px);position:relative}
.trustbar ul{list-style:none;margin:0;padding:22px 0;display:grid;gap:14px 34px;
  grid-template-columns:repeat(2,minmax(0,1fr));font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-invert-mute)}
.trustbar li{display:flex;align-items:center;gap:10px}
.trustbar li::before{content:"";width:5px;height:5px;background:var(--brass-lite);
  transform:rotate(45deg);flex:none}
@media (min-width:820px){.trustbar ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- section heading ----------------------------------------------------- */
.sec-head{display:grid;gap:22px;margin-bottom:clamp(38px,5vw,60px)}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:end;gap:48px}
}

/* --- practice areas ------------------------------------------------------ */
/* separated cards with real depth, rather than a flush hairline grid */
.areas{display:grid;gap:clamp(14px,1.6vw,22px);background:transparent;border:0}
.dark .areas{background:transparent;border:0}
@media (min-width:640px){.areas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.areas{grid-template-columns:repeat(3,1fr)}}

.area{position:relative;display:block;text-decoration:none;background:var(--ink-2);
  color:var(--text-invert);min-height:300px;overflow:hidden;isolation:isolate;
  box-shadow:0 2px 5px rgba(11,13,15,.20), 0 22px 44px -12px rgba(11,13,15,.62);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.area:hover,.area:focus-visible{transform:translateY(-8px);
  box-shadow:0 6px 12px rgba(11,13,15,.26), 0 40px 70px -16px rgba(11,13,15,.78)}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.66);transition:transform .8s var(--ease),filter .6s var(--ease);
  z-index:-2}
.area::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,13,15,.12) 0%,rgba(11,13,15,.55) 46%,rgba(11,13,15,.92) 100%)}
.area:hover img,.area:focus-visible img{transform:scale(1.06);filter:grayscale(.2) brightness(.78)}
.area__body{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:30px 28px 28px;min-height:300px}
.area h3{font-size:1.55rem}
.area p{font-size:14.5px;line-height:1.55;color:var(--text-invert-mute);margin:10px 0 0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .35s var(--ease),margin .5s var(--ease)}
.area:hover p,.area:focus-visible p{max-height:120px;opacity:1;margin-top:12px}
.area__num{position:absolute;top:24px;right:26px;font-family:var(--font-ui);font-size:11px;
  letter-spacing:.2em;color:var(--brass-lite)}
@media (hover:none){.area p{max-height:120px;opacity:1;margin-top:12px}}

/* --- split media --------------------------------------------------------- */
.split{display:grid;gap:clamp(34px,5vw,72px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--wide-l{grid-template-columns:1.15fr 1fr}}
.split__media{position:relative}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.55) contrast(1.03)}
.split__media::before{content:"";position:absolute;inset:auto -18px -18px auto;width:58%;height:58%;
  border:1px solid var(--brass);z-index:-1}
.split--rev .split__media{order:-1}
@media (min-width:900px){.split--rev .split__media{order:1}}

/* --- stats --------------------------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--line-dark);border-block:1px solid var(--line-dark)}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink);padding:34px 28px}
.stat dt{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3rem);color:var(--brass-lite);
  line-height:1}
.stat dd{margin:12px 0 0;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-invert-mute)}

/* --- case cards ---------------------------------------------------------- */
.cases{display:grid;gap:20px}
@media (min-width:700px){.cases{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{background:#fff;border:1px solid var(--line);padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.case:hover{border-color:var(--brass);transform:translateY(-3px);box-shadow:var(--shadow)}
.case__tag{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-ink);display:flex;align-items:center;gap:9px}
.case__tag.is-live{color:#A8452F}
.case__tag::before{content:"";width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
.case h3{font-size:1.2rem;font-family:var(--font-display)}
.case__meta{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.case p{font-size:15px;line-height:1.6;color:var(--text-mute);margin:0}
.case-note{margin-top:26px;font-size:13px;color:var(--text-mute);font-style:italic}

/* --- team ---------------------------------------------------------------- */
.team{display:grid;gap:26px}
@media (min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.team{grid-template-columns:repeat(3,1fr)}}
.person{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.person__img{aspect-ratio:4/3.4;background:#fff;overflow:hidden;position:relative;
  border-bottom:1px solid var(--line)}
.person__img::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(241,236,228,.55))}
.person__img img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:grayscale(1) contrast(1.04);transition:transform .7s var(--ease)}
.person--linked:hover .person__img img{transform:scale(1.035)}
.person__body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.person h3{font-size:1.3rem}
.person__role{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-ink)}
.person p{font-size:14.5px;line-height:1.6;color:var(--text-mute);margin:0}
.person__contact{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;font-size:14px}
.person__contact a{text-decoration:none;color:var(--text-mute);word-break:break-word}
.person__contact a:hover{color:var(--brass)}

/* --- accordion / service detail ------------------------------------------ */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line);scroll-margin-top:120px}
.acc__btn{width:100%;background:none;border:0;padding:26px 46px 26px 0;cursor:pointer;
  display:flex;align-items:baseline;gap:18px;text-align:left;position:relative;
  font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--text)}
.acc__btn:hover{color:var(--brass)}
.acc__btn .idx{font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;color:var(--brass-ink);
  flex:none;transform:translateY(-4px)}
.acc__btn::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.acc__btn[aria-expanded="true"]::after{transform:translateY(-30%) rotate(225deg)}
.acc__panel{overflow:hidden;height:0;transition:height .4s var(--ease)}
.acc__panel .inner{padding:0 0 34px;max-width:74ch;color:var(--text-mute)}
.acc__panel h3{font-family:var(--font-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);margin:26px 0 10px}

/* --- contact ------------------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(38px,5vw,64px)}
@media (min-width:920px){.contact-grid{grid-template-columns:1fr 1.05fr}}
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.info-list dt,.info-list .k{font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lite);margin-bottom:7px}
.info-list a{text-decoration:none}
.info-list a:hover{color:var(--brass-lite)}
.info-list .v{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.35}

.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-invert-mute)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;font:inherit;font-size:16px;color:var(--text-invert);
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--radius);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brass);background:rgba(255,255,255,.07)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass-lite) 50%),linear-gradient(135deg,var(--brass-lite) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:var(--ink-2);color:var(--text-invert)}
.form .consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;
  color:var(--text-invert-mute);line-height:1.5}
.form .consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brass)}
.form-note{font-size:13px;color:var(--text-invert-mute)}
.form-status{font-size:14px;padding:12px 0;color:var(--brass-lite)}

@media (min-width:560px){.two-up{display:grid;grid-template-columns:1fr 1fr;gap:18px}}

/* --- CTA band ------------------------------------------------------------ */
.cta{background:var(--ink-2);border-top:1px solid var(--line-dark);text-align:center}
.cta .wrap{padding-block:clamp(62px,8vw,96px)}
.cta h2{max-width:20ch;margin-inline:auto}
.cta .lede{max-width:56ch;margin:20px auto 0}
.cta .btn-row{justify-content:center;margin-top:36px}

/* --- footer -------------------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--text-invert-mute);font-size:14.5px;
  border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;gap:40px;padding-block:clamp(54px,7vw,76px)}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h3{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-invert);margin-bottom:18px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--brass-lite)}
.foot-brand img{height:42px;margin-bottom:20px}
.foot-legal{border-top:1px solid var(--line-dark);padding-block:24px;display:flex;
  flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:12.5px}
.foot-legal a{text-decoration:none}
.foot-credit{border-top:1px solid var(--line-dark);padding-block:16px;font-size:11.5px;
  color:var(--text-invert-mute);opacity:.75}
.foot-credit a{text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:var(--brass-lite)}
.socials{display:flex;gap:14px;margin-top:20px}
.socials a{width:38px;height:38px;border:1px solid var(--line-dark);display:grid;place-items:center;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.socials a:hover{border-color:var(--brass);color:var(--brass-lite)}

/* --- page hero (inner pages) --------------------------------------------- */
.page-head{background:var(--ink);color:var(--text-invert);position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;
  border:1px solid var(--line-dark);border-radius:50%}
.page-head .wrap{position:relative;padding:clamp(56px,8vw,92px) var(--gutter) clamp(60px,8vw,96px)}
.page-head .lede{max-width:60ch;margin-top:22px}
.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-invert-mute);
  margin-bottom:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--brass-lite)}

/* --- article ------------------------------------------------------------- */
.article{max-width:70ch}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:44px 0 16px}
.article h3{font-family:var(--font-ui);font-size:15px;font-weight:700;letter-spacing:.06em;
  margin:34px 0 12px}
.article ol,.article ul{padding-left:1.25em;color:var(--text-mute)}
.article li{margin-bottom:12px}
.article a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}

.callout{background:var(--paper-2);border-left:2px solid var(--brass);padding:26px 28px;
  margin:34px 0;font-size:15.5px;color:var(--text-mute)}

/* --- sticky mobile call -------------------------------------------------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;
  grid-template-columns:1fr 1fr;background:var(--ink-2);border-top:1px solid var(--line-dark);
  transform:translateY(100%);transition:transform .35s var(--ease)}
.callbar.is-on{transform:none}
.callbar a{padding:15px 8px;text-align:center;text-decoration:none;color:var(--text-invert);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.callbar a+a{background:var(--brass-ink);color:#fff}
@media (min-width:1040px){.callbar{display:none}}
body{padding-bottom:0}
@media (max-width:1039px){body.has-callbar{padding-bottom:52px}}

/* --- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* --- expandable biography ------------------------------------------------ */
.person__more{color:var(--brass-ink);
  align-self:flex-start;margin-top:4px;padding:0;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:12.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.person__more svg{transition:transform .3s var(--ease)}
.person__more:hover svg{transform:translateX(6px)}
/* the whole card opens the bio, so the card must look clickable — and cards
   without a published bio must not */
.person__more::after{content:"";position:absolute;inset:0}
.person{position:relative}
.person--linked{cursor:pointer;transition:border-color .3s var(--ease),
  transform .3s var(--ease),box-shadow .3s var(--ease)}
.person--linked:hover{border-color:var(--brass);transform:translateY(-3px);
  box-shadow:var(--shadow)}
.person--linked:focus-within{border-color:var(--brass)}
.person__contact{position:relative;z-index:1}

.bio{
  width:min(880px,calc(100vw - 32px));max-height:min(880px,calc(100vh - 48px));
  padding:0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--text);box-shadow:0 40px 90px -40px rgba(11,13,15,.6);
  overflow:hidden;
}
.bio::backdrop{background:rgba(8,9,11,.72);backdrop-filter:blur(3px)}
.bio__inner{max-height:inherit;overflow-y:auto;overscroll-behavior:contain}
.bio__close{
  position:absolute;top:10px;right:12px;z-index:2;width:42px;height:42px;line-height:1;
  font-size:26px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-mute);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.bio__close:hover{color:var(--text);border-color:var(--brass)}

.bio__head{
  display:grid;gap:22px;align-items:center;padding:34px clamp(24px,4vw,44px);
  border-bottom:1px solid var(--line);background:var(--paper-2);
}
@media (min-width:620px){.bio__head{grid-template-columns:150px 1fr;gap:30px}}
.bio__head img{width:150px;height:150px;object-fit:contain;object-position:center bottom;
  background:#fff;border:1px solid var(--line);filter:grayscale(1)}
.bio__head h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-top:6px}
.bio__contact{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:14.5px}
.bio__contact a{color:var(--text-mute);text-decoration:none}
.bio__contact a:hover{color:var(--brass)}

.bio__body{padding:clamp(26px,4vw,40px) clamp(24px,4vw,44px) clamp(34px,5vw,48px);
  max-width:76ch;color:var(--text-mute);font-size:16px;line-height:1.68}

.bio__quote{margin:30px 0;padding:26px 28px;background:var(--paper-2);
  border-left:2px solid var(--brass)}
.bio__quote blockquote{margin:0;font-family:var(--font-text);font-style:italic;
  font-size:1.05rem;line-height:1.6;color:var(--text)}
.bio__quote blockquote::before{content:"\201C"}
.bio__quote blockquote::after{content:"\201D"}
.bio__quote figcaption{margin-top:14px;font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass)}

.bio__cases{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.bio__cases h3{font-size:1.35rem;color:var(--text);margin-bottom:6px}
.bio__group{margin-top:24px}
.bio__group h4{font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-ink);margin:0 0 12px}
.bio__group ul{margin:0;padding-left:1.1em;display:grid;gap:11px}
.bio__group li{font-size:15px;line-height:1.6}
.bio__cases .case-note{margin-top:28px}

body.bio-open{overflow:hidden}

/* ==========================================================================
   Typographic hero — no photograph.
   A fine column grid stands in for imagery, and the practice areas run along
   the foot as an index, so the first screen states what the firm does rather
   than decorating it.
   ========================================================================== */
.hero--type{background:var(--ink);position:relative;overflow:hidden}
.hero--type .wrap{padding:clamp(76px,10vw,124px) var(--gutter) clamp(64px,8vw,96px)}
.hero--type::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.055) 0 1px, transparent 1px var(--col, 9.09%));
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 62%,transparent);
}
.hero--type::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--brass) 0%,var(--brass) 22%,transparent 22%)}
.hero--type .wrap{position:relative;z-index:2}
.hero--type h1{max-width:none;font-size:clamp(3rem,8vw,6.2rem);line-height:1.02;
  letter-spacing:-.025em;text-wrap:balance;grid-area:h}
.hero--type h1 em{font-style:normal;color:var(--brass-lite)}
.hero--type .eyebrow{grid-area:e}
.hero--type .lede{max-width:44ch;color:#CFCBC4;grid-area:l;margin:0}
.hero--type .btn-row{grid-area:b}
/* headline left, supporting copy set against it on the right, so the measure
   stays readable and the width is actually used */
.hero--type .wrap{display:grid;gap:34px 56px;
  grid-template-areas:"e" "h" "l" "b"}
@media (min-width:1040px){
  .hero--type .wrap{
    grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);
    grid-template-areas:"e e" "h h" "l b";
    align-items:start;gap:44px 56px}
  .hero--type .btn-row{flex-direction:column;align-items:stretch;align-self:start;gap:12px}
  .hero--type .btn-row .btn{width:100%}
}

.hero-index{position:relative;z-index:2;border-top:1px solid var(--line-dark)}
.hero-index ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.hero-index ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.hero-index ul{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hero-index li{border-right:1px solid var(--line-dark)}
.hero-index li:last-child{border-right:0}
.hero-index a{display:flex;flex-direction:column;gap:10px;padding:22px 20px 24px;
  text-decoration:none;color:var(--text-invert-mute);
  transition:background .3s var(--ease),color .3s var(--ease)}
.hero-index a:hover{background:rgba(255,255,255,.04);color:var(--text-invert)}
.hero-index .n{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.2em;color:var(--brass)}
.hero-index .t{font-family:var(--font-display);font-size:clamp(1rem,1.3vw,1.18rem);
  color:var(--text-invert);line-height:1.2}

/* ==========================================================================
   Split hero — type on a solid panel, photograph at full strength beside it.
   A scrim laid over people always reads as washed out; separating them keeps
   the image bright and the type at full contrast.
   ========================================================================== */
.hero--split{background:var(--ink);color:var(--text-invert);display:grid;
  grid-template-columns:1fr;grid-template-areas:"panel" "media" "trust"}
@media (min-width:960px){
  .hero--split{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    grid-template-areas:"panel media" "trust trust"}
}
.hero--split .hero__panel{grid-area:panel;display:flex;flex-direction:column;
  justify-content:center;
  padding:clamp(64px,9vw,104px) var(--gutter) clamp(56px,8vw,92px)}
@media (min-width:960px){
  /* line the type up with the header logo rather than the panel edge */
  .hero--split .hero__panel{
    padding-left:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));
    padding-right:clamp(28px,3vw,48px)}
}
.hero--split .hero__media{grid-area:media;position:relative;min-height:320px;overflow:hidden}
.hero--split .hero__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 34%;filter:saturate(.82) contrast(1.06)}
/* a short fade on the inner edge only, so the join reads as one surface */
.hero--split .hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,13,15,.5) 0%,rgba(11,13,15,0) 34%)}
@media (min-width:960px){
  .hero--split .hero__media::after{
    background:linear-gradient(90deg,rgba(11,13,15,.92) 0%,rgba(11,13,15,.25) 12%,rgba(11,13,15,0) 30%)}
}
.hero--split h1{font-size:clamp(2.7rem,5.2vw,4.4rem);line-height:1.04;max-width:13ch}
.hero--split h1 em{font-style:normal;color:var(--brass-lite)}
.hero--split .lede{max-width:46ch;margin-top:24px;color:#CFCBC4}
.hero--split .btn-row{margin-top:36px;gap:12px}
.hero--split .btn{padding-inline:22px;font-size:13px}
.hero--split .trustbar{grid-area:trust;background:transparent}

/* ==========================================================================
   Banner hero — the photograph faded back into the ground rather than sat
   behind a scrim. Reducing the image's own opacity over the ink keeps the
   blacks true; a grey veil over a bright photo is what reads as washed out.
   ========================================================================== */
.hero--banner{background:var(--ink)}
.hero--banner .hero__bg img{
  opacity:.42;filter:grayscale(1) contrast(1.22) brightness(1.02);
  object-position:center 72%}
/* on tall/narrow viewports keep the facade rather than the sky */
@media (max-width:760px){.hero--banner .hero__bg img{object-position:58% 60%}}
/* the clear window has to sit over the body of the building, not the roofline */
.hero--banner .hero__bg::after{
  background:
    linear-gradient(180deg,rgba(11,13,15,.9) 0%,rgba(11,13,15,.5) 16%,rgba(11,13,15,.08) 48%,
      rgba(11,13,15,.1) 78%,rgba(11,13,15,.6) 95%,rgba(11,13,15,.85) 100%),
    linear-gradient(94deg,rgba(11,13,15,.9) 0%,rgba(11,13,15,.62) 42%,rgba(11,13,15,.18) 78%,rgba(11,13,15,.06) 100%)}
.hero--banner .wrap{padding-block:clamp(66px,8vw,104px)}
.hero--banner h1{max-width:15ch}

/* --- SRA digital badge ---------------------------------------------------- */
/* Official embed: the SRA serves the badge, and it verifies live. Dimensions
   are the SRA's own (275x163, 59.1% ratio) — don't restyle the frame itself. */
.sra-badge{max-width:275px;margin-top:28px}
.sra-badge__ratio{position:relative;padding-bottom:59.1%;height:auto;overflow:hidden}
.sra-badge iframe{position:absolute;top:0;left:0;width:100%;height:100%;
  border:0;margin:0;padding:0;background-color:transparent}

/* visually hidden, still announced */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- touch targets -------------------------------------------------------- */
/* Card links sat at 15-23px tall. Anything a thumb has to hit gets 44px on
   touch devices; desktop keeps the tighter rhythm. */
@media (hover:none), (max-width:760px){
  .person__more{min-height:44px;align-items:center}
  .person__contact{gap:0}
  .person__contact a{display:inline-flex;align-items:center;min-height:44px}
  .info-list a{display:inline-flex;align-items:center;min-height:44px}
  .foot-grid a{display:inline-flex;align-items:center;min-height:40px}
  .foot-grid ul{gap:2px}
}

/* ==========================================================================
   Practice-area pages
   ========================================================================== */
.page-head--area{position:relative;isolation:isolate;overflow:hidden}
.page-head--area .hero__bg{position:absolute;inset:0;z-index:-1}
.page-head--area .hero__bg img{width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:grayscale(1) contrast(1.2)}
.page-head--area .hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(11,13,15,.95) 0%,rgba(11,13,15,.75) 48%,rgba(11,13,15,.4) 100%)}
.page-head--area::after{display:none}

.aside-card{background:var(--paper-2);border:1px solid var(--line);padding:26px 24px 28px}
.aside-card .v{font-family:var(--font-display);font-size:1.5rem;line-height:1.2;margin:0}
.aside-card .v a{text-decoration:none}
.aside-card .v a:hover{color:var(--brass-ink)}
.aside-card .aside-note{font-size:13.5px;color:var(--text-mute);margin:8px 0 0}
.aside-card .eyebrow{margin-bottom:14px}

.rel-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rel-grid{grid-template-columns:repeat(5,1fr)}}
.rel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);padding:22px 20px;text-decoration:none;font-family:var(--font-display);
  font-size:1.05rem;color:var(--text);transition:background .25s var(--ease),color .25s var(--ease)}
.rel:hover{background:#fff;color:var(--brass-ink)}
.rel svg{flex:none;color:var(--brass-ink)}

/* services index */
.svc-list{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.svc{display:grid;grid-template-columns:auto 1fr;gap:18px 26px;background:var(--paper);
  padding:30px 4px 32px;align-items:start}
@media (min-width:760px){.svc{grid-template-columns:64px 1fr;gap:22px 34px;padding:34px 4px 36px}}
.svc__n{font-family:var(--font-ui);font-size:12px;letter-spacing:.18em;color:var(--brass-ink);
  font-weight:700;margin:6px 0 0}
.svc h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-bottom:12px}
.svc h2 a{text-decoration:none}
.svc h2 a:hover{color:var(--brass-ink)}
.svc p{color:var(--text-mute);max-width:70ch;font-size:15.5px;margin-bottom:16px}

/* ==========================================================================
   Offence-type mega-menu
   ========================================================================== */
.head-cta{display:none;white-space:nowrap;padding:11px 18px;font-size:12.5px;
  letter-spacing:.06em}
@media (min-width:1040px){.head-cta{display:inline-flex}}

.has-mega{position:static}
.has-mega > a{display:inline-flex;align-items:center;gap:7px}
.has-mega > a::after{right:auto;width:0;transition:width .3s var(--ease)}
.has-mega > a:hover::after,.has-mega > a[aria-current="page"]::after{
  right:auto;width:calc(100% - 16px)}
.has-mega .caret{transition:transform .3s var(--ease);opacity:.7}
.has-mega[data-open="true"] .caret{transform:rotate(180deg)}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink-2);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);z-index:70}
.mega[hidden]{display:none}
.mega__inner{max-width:var(--wrap);margin-inline:auto;padding:34px var(--gutter) 38px;
  display:grid;gap:34px}
.mega a,.mega p{text-transform:none;letter-spacing:normal;font-weight:400}
.mega .eyebrow,.mega .btn,.mega .link-arrow,.mega__n{text-transform:uppercase}
.mega .eyebrow{letter-spacing:.22em}
.mega .btn,.mega .link-arrow{letter-spacing:.08em;font-weight:600}
/* .nav a would otherwise win over .btn--brass on equal specificity */
.mega .btn--brass{color:#fff}
.mega .btn--brass:hover{color:#fff}
.mega__n{letter-spacing:.2em}
@media (min-width:1000px){.mega__inner{grid-template-columns:minmax(0,2.1fr) minmax(240px,.9fr);gap:48px}}
.mega__grid{display:grid;gap:2px 26px}
@media (min-width:700px){.mega__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.mega__grid{grid-template-columns:repeat(3,1fr)}}
.mega__item{display:grid;gap:4px;padding:14px 14px 16px;text-decoration:none;
  border-radius:var(--radius);transition:background .2s var(--ease)}
.mega__item:hover{background:rgba(255,255,255,.05)}
.mega__n{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.2em;color:var(--brass-lite)}
.mega__t{font-family:var(--font-display);font-size:1.15rem;color:var(--text-invert);line-height:1.2}
.mega__d{font-size:13px;line-height:1.5;color:var(--text-invert-mute)}
.mega__aside{border-top:1px solid var(--line-dark);padding-top:26px;display:grid;
  gap:14px;align-content:start}
@media (min-width:1000px){.mega__aside{border-top:0;border-left:1px solid var(--line-dark);
  padding:0 0 0 44px}}
.mega__aside p{font-size:14px;color:var(--text-invert-mute);margin:0}
.mega__aside .btn{justify-self:start;margin-top:6px}
.mega__aside .link-arrow{color:var(--brass-lite)}

/* drawer sub-list */
.drawer__subs{display:grid;padding:4px 0 14px 16px;border-bottom:1px solid var(--line-dark)}
.drawer__sub{font-family:var(--font-ui)!important;font-size:15px!important;
  letter-spacing:.04em;color:var(--text-invert-mute)!important;padding:11px 0!important;
  border-bottom:0!important;min-height:44px;display:flex;align-items:center}
.drawer__sub:hover{color:var(--brass-lite)!important}


/* --- verified third-party rating ------------------------------------------ */
.trustbar ul{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.trust-rating a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--text-invert-mute);text-transform:none;letter-spacing:.02em;font-size:13px}
.trust-rating a:hover{color:var(--text-invert)}
.trust-rating strong{color:var(--brass-lite);font-weight:700;letter-spacing:.06em}
.trust-rating span{opacity:.65;font-size:12px}

/* ==========================================================================
   Areas-of-practice index — a text-led tile grid rather than image cards.
   Breadth on show: every tile is a matter the firm's published casework
   evidences, and every tile links to a page that actually covers it.
   ========================================================================== */
.areas-index__h{font-size:clamp(2.1rem,4.4vw,3.2rem);color:var(--brass-ink);
  margin-bottom:22px;letter-spacing:-.02em}
.areas-index__intro{max-width:78ch;margin-bottom:clamp(34px,4vw,48px)}
.areas-index__intro p{color:var(--text-mute);font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.65}
.areas-index__intro p+p{margin-top:14px}

.tiles{display:grid;gap:20px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);
  padding:26px 26px 28px;text-decoration:none;color:var(--text);
  box-shadow:0 2px 6px rgba(11,13,15,.10);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:var(--brass);
  box-shadow:0 8px 22px -6px rgba(11,13,15,.24)}
.tile h3{font-size:clamp(1.3rem,1.9vw,1.55rem);line-height:1.2;padding-bottom:16px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.tile p{font-size:14.5px;line-height:1.6;color:var(--text-mute);margin:0 0 18px;flex:1}
.tile__more{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--brass-ink);
  text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.tile--sub h3{font-size:clamp(1.15rem,1.6vw,1.3rem)}

.tiles__split{font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-mute);margin:clamp(34px,4vw,46px) 0 20px;
  display:flex;align-items:center;gap:16px}
.tiles__split::after{content:"";height:1px;background:var(--line);flex:1}

/* ==========================================================================
   Court map — the firm's national reach, drawn from its own published cases.
   No borrowed geography: the shape is the distribution of real courts.
   ========================================================================== */
.courtmap{margin:0;position:relative}
.courtmap svg{width:100%;height:auto;display:block;overflow:visible}
.cm__lines line{stroke:var(--brass-lite);stroke-width:.8;opacity:.34}
.cm__dot{fill:var(--brass-lite);opacity:.9}
.cm__dot--hub{fill:none;stroke:var(--brass-lite);stroke-width:2}
.cm__label{fill:var(--text-invert-mute);font-family:var(--font-ui);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.courtmap figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:13.5px;color:var(--text-invert-mute);line-height:1.55}
.courtmap figcaption strong{color:var(--brass-lite);font-weight:600}

/* a pulse on the Old Bailey, and the reach drawing outward from it */
.cm__dot--hub{animation:cmPulse 3.2s ease-in-out infinite}
@keyframes cmPulse{0%,100%{r:8;opacity:1}50%{r:11;opacity:.5}}
.cm__lines line,.cm__dots circle,.cm__labels text{
  opacity:0;animation:cmIn .55s var(--ease) forwards;
  animation-delay:calc(var(--i) * 45ms + 120ms)}
.cm__lines line{animation-name:cmInLine}
@keyframes cmIn{to{opacity:.9}}
@keyframes cmInLine{to{opacity:.34}}
@media (prefers-reduced-motion:reduce){
  .cm__lines line,.cm__dots circle,.cm__labels text{animation:none;opacity:.9}
  .cm__lines line{opacity:.34}
  .cm__dot--hub{animation:none}
}