/* ==========================================================================
   Editorial — an LP Evans design in the Herbert Smith Freehills manner.
   What is borrowed is structure and voice: a two-tone headline, a featured
   strip of headline links, split colour panels, and offset slabs of colour
   layered around content. What stays LP Evans is brass, and the fact that
   every claim on the page is a case the firm has published.
   ========================================================================== */
:root{
  --ink:#143A57;            /* navy ground, brightened */
  --ink-2:#1B4A6E;
  --ink-3:#24608C;
  --paper:#FFFFFF;
  --paper-2:#F1F4F7;
  --paper-3:#DDE4EA;
  --line:#D3DCE4;
  --line-dark:rgba(190,214,235,.20);
  --brass:#F0A83C;         /* bright amber; carries INK text at 8:1, not white */
  --brass-ink:#8A5F14;     /* 5.63:1 on white, 5.10 on the tint */
  --brass-lite:#FFC15E;    /* the lead line, HSF's amber slot */
  --text:#0E2C43;
  --text-mute:#4E6379;
  --text-invert:#FFFFFF;
  --text-invert-mute:#C3D3E0;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-text:"Archivo",Georgia,serif;
  --font-ui:"Archivo","Inter",system-ui,sans-serif;
  --radius:0px;
  --shadow:0 24px 60px -30px rgba(12,34,51,.35);
}

/* --- type: bold grotesque, sentence case, tight ------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.021em;
  line-height:1.1}
.h-xl{font-size:clamp(2.4rem,5.4vw,3.9rem)}
.h-lg{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.h-md{font-size:clamp(1.5rem,2.4vw,2.05rem)}
.lede{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6}
body{font-family:var(--font-ui)}
.eyebrow{color:var(--brass-ink);letter-spacing:.16em;font-size:11.5px}
.eyebrow::before{background:var(--brass-ink);width:26px}
.dark .eyebrow,.hero .eyebrow{color:var(--brass-lite)}
.dark .eyebrow::before,.hero .eyebrow::before{background:var(--brass-lite)}

/* --- buttons: solid + outlined, always with an arrow -------------------- */
.btn-solid,.btn-line{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:15px 24px;border:2px solid transparent;transition:background .25s var(--ease),
  color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn-solid{background:var(--brass);color:#0C2233}
.btn-solid:hover{color:#0C2233}
.btn-solid:hover{background:var(--brass-lite);transform:translateY(-2px)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-line--light{border-color:rgba(255,255,255,.6);color:#fff}
.btn-line--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-solid svg,.btn-line svg{transition:transform .3s var(--ease)}
.btn-solid:hover svg,.btn-line:hover svg{transform:translateX(5px)}
.btn--brass{background:var(--brass);color:#0C2233}
.btn--brass:hover{background:var(--brass-lite);color:#0C2233}

/* --- header ------------------------------------------------------------- */
/* #FFC15E needed a darker bar to clear 4.5:1 */
.alertbar{background:var(--ink-2)}
.site-head{background:var(--ink)}
.nav a{letter-spacing:.06em;font-size:12px;font-weight:600}

/* --- hero: two-tone headline over a darkened frame ---------------------- */
.hero--ed{background:var(--ink);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.hero--ed .hero__bg{position:absolute;inset:0;z-index:-1}
.hero--ed .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 66%;
  opacity:.3;filter:grayscale(.7) contrast(1.1)}
.hero--ed .hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(16,45,68,.94) 0%,rgba(16,45,68,.78) 46%,rgba(16,45,68,.40) 100%)}
.hero--ed .wrap{position:relative;padding:clamp(70px,9vw,116px) var(--gutter) clamp(52px,6vw,76px)}
.hero__lead{font-family:var(--font-display);font-weight:700;color:var(--brass-lite);
  font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.021em;line-height:1.08;margin:0}
.hero--ed h1{font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;margin:0;max-width:15ch}
.hero__sub{margin:26px 0 0;max-width:52ch;font-size:clamp(1rem,1.35vw,1.13rem);
  line-height:1.6;color:var(--text-invert-mute)}
.hero--ed .btn-row{margin-top:38px;gap:14px}
.hero--ed .trustbar{background:rgba(11,32,49,.55);border-top:1px solid var(--line-dark)}
.hero--roll .trustbar ul{padding-block:18px}

/* --- featured strip: label, then headline links divided by rules -------- */
.featured{background:#fff;border-bottom:1px solid var(--line)}
.featured .wrap{display:grid;gap:26px;padding-block:34px}
@media (min-width:900px){.featured .wrap{grid-template-columns:150px 1fr;gap:40px}}
.fs__label{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--brass-ink);line-height:1.25;margin:0}
.fs__items{display:grid;gap:0}
@media (min-width:760px){.fs__items{grid-template-columns:repeat(3,1fr)}}
.fs__item{display:grid;gap:8px;align-content:start;padding:4px 26px;text-decoration:none;
  color:var(--ink);border-left:1px solid var(--line)}
.fs__item:first-child{border-left:0;padding-left:0}
@media (max-width:759px){.fs__item{border-left:0;border-top:1px solid var(--line);
  padding:18px 0 0}.fs__item:first-child{border-top:0;padding-top:0}}
.fs__ref{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute)}
.fs__head{font-family:var(--font-display);font-weight:700;font-size:15.5px;line-height:1.35}
.fs__item svg{color:var(--brass-ink);transition:transform .3s var(--ease)}
.fs__item:hover svg{transform:translateX(6px)}
.fs__item:hover .fs__head{color:var(--brass-ink)}

/* --- split colour panel -------------------------------------------------- */
.panel{background:#fff;padding-block:clamp(44px,6vw,72px)}
.panel__grid{display:grid;background:var(--ink-3);color:#fff}
@media (min-width:860px){.panel__grid{grid-template-columns:1fr 1fr}}
.panel__copy{padding:clamp(34px,4.5vw,56px);display:grid;gap:16px;align-content:center}
.panel__copy h2{font-size:clamp(1.5rem,2.6vw,2.15rem);color:#fff;max-width:18ch}
.panel__copy p{color:#CBDAE6;margin:0;max-width:46ch}
.panel__copy .btn-line{border-color:#fff;color:#fff;justify-self:start;margin-top:8px}
.panel__copy .btn-line:hover{background:#fff;color:var(--ink)}
.panel__media{position:relative;min-height:230px}
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05)}

/* --- offset slabs: the signature layered device -------------------------- */
.offset{background:var(--paper-2);padding-block:clamp(52px,7vw,96px)}
.offset__stage{position:relative;display:grid;gap:22px}
.offset__slab{display:none}
.offset__art{background:var(--ink);padding:26px}
.offset__card{background:#fff;padding:clamp(28px,3.4vw,44px);display:grid;gap:14px;
  align-content:center}
.offset__card h2{font-size:clamp(1.6rem,2.8vw,2.3rem);max-width:17ch}
.offset__card p{color:var(--text-mute);margin:0;max-width:52ch}
.offset__card .btn-line{justify-self:start;margin-top:8px}
@media (min-width:960px){
  .offset__stage{grid-template-columns:repeat(12,1fr);gap:0;align-items:center;
    padding-block:26px}
  .offset__slab{display:block;position:absolute;background:var(--ink-3);z-index:0}
  .offset__slab--tl{left:0;top:0;width:34%;height:78px}
  .offset__slab--br{right:0;bottom:0;width:26%;height:78px;background:var(--brass)}
  /* the card overlaps the art's left edge, so inset the plot to clear it */
  .offset__art{grid-column:6 / -1;grid-row:1;z-index:1;padding:44px 46px 44px 108px;
    box-shadow:var(--shadow)}
  .offset__card{grid-column:1 / 7;grid-row:1;z-index:2;margin-block:38px;
    box-shadow:var(--shadow)}
}

/* --- practice-area cards in the editorial voice -------------------------- */
.area{background:var(--ink-2)}
.area h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}
.tile h3{font-family:var(--font-display);font-weight:700}
.stat dt{font-family:var(--font-display);font-weight:700;color:var(--brass-lite)}
.case h3,.person h3,.svc h2 a,.bio__head h2{font-family:var(--font-display);font-weight:700}
.case__tag,.person__role{color:var(--brass-ink)}
.section.tint{background:var(--paper-2)}
.page-head.dark{background:var(--ink)}
.cta.dark{background:var(--ink-2)}
.site-foot{background:var(--ink)}
.cm__lines line{stroke:var(--brass-lite)}
.cm__dot{fill:var(--brass-lite)}
.cm__dot--hub{stroke:var(--brass-lite)}
.courtmap figcaption strong{color:var(--brass-lite)}

/* ==========================================================================
   Rolling banner
   ========================================================================== */
.hero--roll{padding:0;display:grid}
.hero--roll .slides{display:grid;grid-template-areas:"s"}
.slide{grid-area:s;position:relative;isolation:isolate;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 1.1s}
.slide.is-on{opacity:1;visibility:visible}
.slide__bg{position:absolute;inset:0;z-index:-1}
.slide__bg img{width:100%;height:100%;object-fit:cover;opacity:.34;
  filter:grayscale(.55) contrast(1.08);transform:scale(1.06);
  transition:transform 9s linear,opacity 1.1s var(--ease)}
.slide.is-on .slide__bg img{transform:scale(1)}
.slide__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(16,45,68,.94) 0%,rgba(16,45,68,.78) 46%,rgba(16,45,68,.40) 100%)}
.slide .wrap{position:relative;padding:clamp(70px,8vw,104px) var(--gutter) clamp(84px,8vw,108px)}
.slide__head{font-family:var(--font-display);font-weight:700;letter-spacing:-.021em;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;color:#fff;margin:0;max-width:16ch}
/* the copy eases up as each slide arrives */
.slide .hero__lead,.slide .slide__head,.slide .hero__sub,.slide .btn-row{
  opacity:0;transform:translateY(16px)}
.slide.is-on .hero__lead,.slide.is-on .slide__head,
.slide.is-on .hero__sub,.slide.is-on .btn-row{
  opacity:1;transform:none;transition:opacity .95s var(--ease),transform .95s var(--ease)}
.slide.is-on .slide__head{transition-delay:.12s}
.slide.is-on .hero__sub{transition-delay:.22s}
.slide.is-on .btn-row{transition-delay:.32s}

.roll__ui{position:relative;z-index:3;pointer-events:none}
.roll__ui .wrap{display:flex;align-items:center;gap:18px;padding-block:0;
  margin-top:-58px;pointer-events:none}
.roll__dots{display:flex;gap:10px;pointer-events:auto}
.dot{width:34px;height:26px;padding:0;background:none;border:0;cursor:pointer;
  display:grid;place-items:center}
.dot span{display:block;width:100%;height:3px;background:rgba(255,255,255,.34);
  transition:background .4s var(--ease)}
.dot.is-on span{background:var(--brass-lite)}
.dot:hover span{background:rgba(255,255,255,.7)}
.roll__pause{width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.32);color:#fff;pointer-events:auto;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.roll__pause:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.roll__pause .ic-play{display:none}
.roll__pause[aria-pressed="true"] .ic-pause{display:none}
.roll__pause[aria-pressed="true"] .ic-play{display:block}
@media (max-width:600px){.roll__ui .wrap{margin-top:-46px}}

@media (prefers-reduced-motion:reduce){
  .slide,.slide__bg img,.slide .hero__lead,.slide .slide__head,
  .slide .hero__sub,.slide .btn-row{transition:none;transform:none}
  .slide__bg img{transform:none}
}

/* ==========================================================================
   Slow transitions — between pages, and on bios and practice areas
   ========================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .42s var(--ease) both}
::view-transition-new(root){animation:vtIn .58s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}

/* bios */
.bio{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bio:not([open]){opacity:0;transform:translateY(18px) scale(.985)}
.bio[open]{opacity:1;transform:none}
.bio::backdrop{animation:cbFade .5s var(--ease) both}
@keyframes cbFade{from{opacity:0}to{opacity:1}}

/* practice-area accordion */
.acc__panel{transition:height .62s var(--ease)}
.acc__btn::after{transition:transform .5s var(--ease)}
.mega{transition:opacity .38s var(--ease)}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .bio,.bio:not([open]),.acc__panel{transition:none;transform:none;opacity:1}
}

/* .mega .btn--brass forces white in the base sheet to beat .nav a; editorial's
   amber fill carries ink text instead */
.mega .btn--brass,.mega .btn--brass:hover{color:#0C2233}

/* ==========================================================================
   Capabilities — every practice area on show with a real description.
   A list, not a picture grid: HSF sell breadth, and breadth is what LP Evans
   has once the casework is counted.
   ========================================================================== */
.caps{background:var(--paper)}
.caps__head{display:grid;gap:24px;margin-bottom:clamp(34px,4vw,52px)}
@media (min-width:960px){.caps__head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;align-items:end}}
.caps__intro p{color:var(--text-mute);margin:0}
.caps__intro p+p{margin-top:12px}

/* The cards were 300px of photograph carrying only a title, with the teaser
   hidden until hover — so the section read as pictures and the message was
   lost. Shorter, and every card now says what the area is without being
   touched. */
.caps .areas{margin-top:4px}
.caps .area{min-height:236px}
.caps .area__body{min-height:236px;padding:20px 22px 22px;gap:0}
.caps .area::after{
  background:linear-gradient(180deg,rgba(12,34,51,.18) 0%,rgba(12,34,51,.62) 42%,rgba(12,34,51,.94) 100%)}
.caps .area img{filter:grayscale(.8) brightness(.62)}
.caps .area:hover img,.caps .area:focus-visible img{filter:grayscale(.25) brightness(.72)}
.caps .area h3{font-size:clamp(1.15rem,1.5vw,1.32rem)}
/* the teaser is always on, not a hover reveal */
.caps .area p{max-height:none;opacity:1;margin-top:8px;font-size:13.5px;line-height:1.5;
  color:#C3D3E0;transition:none}
.caps .area__num{top:16px;right:18px}
.caps .area{background:var(--ink-2);
  box-shadow:0 2px 5px rgba(12,34,51,.10), 0 18px 38px -16px rgba(12,34,51,.40)}
.caps .area:hover,.caps .area:focus-visible{
  box-shadow:0 5px 12px rgba(12,34,51,.16), 0 32px 58px -18px rgba(12,34,51,.58)}
.caps .area h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}
.caps .area__num{color:var(--brass-lite)}

.caps__also{margin-top:clamp(30px,3.6vw,44px);display:grid;gap:14px}
.caps__also-label{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-mute);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--line);
  text-decoration:none;font-size:13.5px;font-weight:600;color:var(--text);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.chip:hover{border-color:var(--brass);background:var(--brass);color:#0C2233}
.about__map{background:var(--ink-2)}