/* ==========================================================================
   Variant: Light — the same system on paper. Dark type, brass accent, and
   two deliberate dark anchors (the CTA band and the footer) so the page has
   weight rather than floating.
   ========================================================================== */
:root{
  --paper:#FBFAF7;
  --paper-2:#F2EEE7;
  --paper-3:#E5DED2;
  --line:#DCD5C8;
  --brass:#9C7628;
  --brass-ink:#7E5F16;      /* 5.6:1 on paper, 5.9:1 behind white — passes AA */
  --brass-lite:#B3893C;
  --text:#16191D;
  --text-mute:#5C636C;
}

/* --- dark sections become paper --------------------------------------- */
.dark{background:var(--paper-2);color:var(--text)}
.dark h1,.dark h2,.dark h3{color:var(--text)}
.dark .lede{color:var(--text-mute)}
.dark .eyebrow{color:var(--brass)}
.dark .eyebrow::before{background:var(--brass)}
.dark .btn--ghost:hover{background:var(--text);color:var(--paper);border-color:var(--text)}

/* --- top bar + header --------------------------------------------------- */
.alertbar{background:var(--text);color:#F6F3EE;border-bottom:0}
.alertbar a{color:var(--brass-lite)}
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.site-head.is-stuck{box-shadow:0 10px 30px -22px rgba(22,25,29,.5)}
.brand img{filter:invert(1)}
.nav a{color:var(--text-mute)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a::after{background:var(--brass)}
.burger{border-color:var(--line)}
.burger span{background:var(--text)}
.drawer{background:var(--paper)}
.drawer a{color:var(--text);border-bottom-color:var(--line)}
.drawer a:hover{color:var(--brass)}

/* --- hero: same frame, inverted scrim ----------------------------------- */
.hero{background:var(--paper);color:var(--text)}
.hero__bg img{filter:saturate(.5) contrast(1.02) brightness(1.14)}
.hero__bg::after{
  background:
    linear-gradient(180deg,rgba(251,250,247,.8) 0%,rgba(251,250,247,.16) 30%,rgba(251,250,247,0) 62%,rgba(251,250,247,.92) 100%),
    linear-gradient(97deg,rgba(251,250,247,.985) 0%,rgba(251,250,247,.95) 32%,rgba(251,250,247,.68) 58%,rgba(251,250,247,.2) 100%)}
.hero h1{color:var(--text)}
.hero h1 em{color:var(--brass)}
.hero .lede{color:var(--text-mute)}
.hero .eyebrow{color:var(--brass)}
.hero .eyebrow::before{background:var(--brass)}
.btn--ghost{border-color:var(--text);color:var(--text)}
.hero .btn--ghost:hover{background:var(--text);color:var(--paper)}

.trustbar{background:rgba(251,250,247,.9);border-top:1px solid var(--line)}
.trustbar ul{color:var(--text-mute)}
.trustbar li::before{background:var(--brass)}

/* --- practice areas: image over a white card, caption always visible ---- */
.areas{background:transparent;border:0}
.area{background:#fff;color:var(--text);min-height:0;
  box-shadow:0 2px 4px rgba(22,25,29,.10), 0 16px 34px -14px rgba(22,25,29,.40)}
.area:hover,.area:focus-visible{box-shadow:0 3px 7px rgba(22,25,29,.09),
  0 26px 50px -20px rgba(22,25,29,.38)}
.area::after{display:none}
.area img{position:relative;height:210px;filter:grayscale(.75) contrast(1.04) brightness(.92);z-index:0}
.area:hover img,.area:focus-visible img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.area__body{min-height:0;padding:24px 26px 28px;justify-content:flex-start}
.area h3{color:var(--text)}
.area p{color:var(--text-mute);max-height:none;opacity:1;margin-top:10px}
/* the six areas aren't a sequence — the numbering only earned its place as a
   marker on the dark image cards, so it goes here rather than floating */
.area__num{display:none}

/* --- stats -------------------------------------------------------------- */
.stats{background:var(--line);border-color:var(--line)}
.stat{background:var(--paper)}
.stat dt{color:var(--brass)}
.stat dd{color:var(--text-mute)}

/* --- split media -------------------------------------------------------- */
.split__media img{filter:grayscale(.3) contrast(1.02)}

/* --- enquiry form on paper ---------------------------------------------- */
.field label{color:var(--text-mute)}
.field input,.field select,.field textarea{background:#fff;border-color:var(--line);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--brass)}
.field select option{background:#fff;color:var(--text)}
.form .consent,.form-note{color:var(--text-mute)}
.form .consent a,.form-note a{color:var(--brass)!important}
.form-status{color:var(--brass)}
.info-list dt,.info-list .k{color:var(--brass)}
.info-list a:hover{color:var(--brass)}

/* --- page heads --------------------------------------------------------- */
.page-head{background:var(--paper-2);color:var(--text)}
.page-head::after{border-color:var(--line)}
.crumbs{color:var(--text-mute)}

/* --- the two deliberate dark anchors ------------------------------------ */
.cta.dark{background:#16191D;color:#F6F3EE}
.cta.dark h2{color:#F6F3EE}
.cta.dark .lede{color:#ADB3BA}
.cta.dark .eyebrow{color:var(--brass-lite)}
.cta.dark .eyebrow::before{background:var(--brass-lite)}
.cta.dark .btn--ghost{border-color:#F6F3EE;color:#F6F3EE}
.cta.dark .btn--ghost:hover{background:#F6F3EE;color:#16191D}

.site-foot{background:#16191D;color:#A9AFB6;border-top:0}
.site-foot .foot-grid h4{color:#F6F3EE}
.site-foot a:hover{color:var(--brass-lite)}
.callbar{background:#16191D}

/* --- biography modal on paper ------------------------------------------- */
.bio{background:var(--paper);border-color:var(--line)}
.bio__head{background:var(--paper-2)}
.bio__close{background:var(--paper)}

/* --- typographic hero on paper ------------------------------------------ */
.hero--type{background:var(--paper)}
.hero--type::before{background-image:repeating-linear-gradient(90deg,
  rgba(22,25,29,.07) 0 1px, transparent 1px var(--col, 9.09%))}
.hero--type .lede{color:var(--text-mute)}
.hero--type h1 em{color:var(--brass)}
.hero-index{border-top-color:var(--line)}
.hero-index li{border-right-color:var(--line)}
.hero-index a{color:var(--text-mute)}
.hero-index a:hover{background:var(--paper-2);color:var(--text)}
.hero-index .t{color:var(--text)}

/* --- split hero on paper ------------------------------------------------- */
.hero--split{background:var(--paper);color:var(--text)}
.hero--split h1{color:var(--text)}
.hero--split h1 em{color:var(--brass)}
.hero--split .lede{color:var(--text-mute)}
.hero--split .hero__media img{filter:saturate(.9) contrast(1.03)}
.hero--split .hero__media::after{
  background:linear-gradient(180deg,rgba(251,250,247,.35) 0%,rgba(251,250,247,0) 30%)}
@media (min-width:960px){
  .hero--split .hero__media::after{
    background:linear-gradient(90deg,rgba(251,250,247,.95) 0%,rgba(251,250,247,.2) 14%,rgba(251,250,247,0) 32%)}
}

/* --- banner hero on paper ------------------------------------------------ */
.hero--banner{background:var(--paper)}
.hero--banner .hero__bg img{opacity:.3;filter:grayscale(1) contrast(1.12) brightness(1.05)}
.hero--banner .hero__bg::after{
  background:
    linear-gradient(180deg,rgba(251,250,247,.8) 0%,rgba(251,250,247,.1) 30%,rgba(251,250,247,.15) 62%,rgba(251,250,247,.95) 100%),
    linear-gradient(94deg,rgba(251,250,247,.9) 0%,rgba(251,250,247,.55) 42%,rgba(251,250,247,.1) 80%)}

/* --- mega-menu and header actions on paper ------------------------------- */
.mega{background:var(--paper);border-color:var(--line);
  box-shadow:0 30px 60px -34px rgba(22,25,29,.35)}
.mega__item:hover{background:var(--paper-2)}
.mega__n{color:var(--brass)}
.mega__t{color:var(--text)}
.mega__d{color:var(--text-mute)}
.mega__aside{border-color:var(--line)}
.mega__aside p{color:var(--text-mute)}
.mega__aside .link-arrow{color:var(--brass)}
.drawer__subs{border-color:var(--line)}
.drawer__sub{color:var(--text-mute)!important}
.page-head--area .hero__bg::after{
  background:linear-gradient(96deg,rgba(242,238,231,.96) 0%,rgba(242,238,231,.8) 48%,rgba(242,238,231,.45) 100%)}
.page-head--area .hero__bg img{opacity:.32}
.trust-rating a{color:var(--text-mute)}
.trust-rating a:hover{color:var(--text)}
.trust-rating strong{color:var(--brass)}

/* --- areas index on paper ------------------------------------------------- */
.areas-index__h{color:var(--brass)}
.tile{background:#fff;border-color:var(--line);box-shadow:0 2px 6px rgba(22,25,29,.07)}
.tile:hover,.tile:focus-visible{box-shadow:0 8px 22px -6px rgba(22,25,29,.18)}
.tile__more{color:var(--brass)}

/* --- court map on paper --------------------------------------------------- */
.cm__lines line{stroke:var(--brass)}
.cm__dot{fill:var(--brass)}
.cm__dot--hub{stroke:var(--brass)}
.cm__label{fill:var(--text-mute)}
.courtmap figcaption{border-top-color:var(--line);color:var(--text-mute)}
.courtmap figcaption strong{color:var(--brass)}