/* ==========================================================================
   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:#0C2233;            /* deep navy ground */
  --ink-2:#123049;
  --ink-3:#1B4363;
  --paper:#FFFFFF;
  --paper-2:#F1F4F7;
  --paper-3:#DDE4EA;
  --line:#D3DCE4;
  --line-dark:rgba(190,214,235,.20);
  --brass:#9A6C20;         /* 4.63:1 behind white */
  --brass-ink:#8A5F14;     /* 5.63:1 on white, 5.10 on the tint */
  --brass-lite:#F0A83C;     /* the lead line, HSF's amber slot */
  --text:#0C2233;
  --text-mute:#4E6379;
  --text-invert:#FFFFFF;
  --text-invert-mute:#B7C9D8;
  --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:#fff}
.btn-solid:focus-visible{outline-offset:3px}
.btn-solid:hover{background:var(--brass-ink);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:#fff}
.btn--brass:hover{background:var(--brass-ink)}

/* --- header ------------------------------------------------------------- */
.alertbar{background:var(--ink-3)}
.site-head{background:var(--ink)}
.nav a{letter-spacing:.09em;font-size:12.5px;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(12,34,51,.95) 0%,rgba(12,34,51,.78) 46%,rgba(12,34,51,.42) 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(12,34,51,.6);border-top:1px solid var(--line-dark)}

/* --- 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)}