/* ==========================================================================
   PLAIN — a fourth direction for LP Evans.
   The other three sell authority. This one sells reassurance.
   The reader is assumed to be frightened, not procuring legal services: big
   comfortable type, short measures, plenty of air, plain English, and a page
   that opens by telling them what to do rather than how good the firm is.
   Deep green on bone. No brass, no navy, no signal red, no serif.
   ========================================================================== */
:root{
  --ink:#152A22;
  --ink-2:#1A3128;
  --ink-3:#224034;
  --paper:#F7F5EF;
  --paper-2:#EFEDE5;
  --paper-3:#E3E0D6;
  --line:#DCD9CE;
  --line-dark:rgba(232,240,236,.16);
  --green:#1F4A38;          /* 9.19:1 on paper, 10.02:1 behind white */
  --green-lit:#8FBFA8;
  --brass:#1F4A38;
  --brass-ink:#1F4A38;
  --brass-lite:#8FBFA8;
  --text:#152A22;
  --text-mute:#4E5953;      /* 6.69:1 on paper */
  --text-invert:#F7F5EF;
  --text-invert-mute:#C8D4CD;
  --font-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --font-text:"Figtree",Georgia,serif;
  --font-ui:"Figtree",system-ui,sans-serif;
  --radius:10px;
  --wrap:1180px;
  --shadow:0 20px 50px -30px rgba(21,42,34,.30);
}
body{font-family:var(--font-ui);background:var(--paper);color:var(--text);font-size:17px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.018em;line-height:1.14}
p{line-height:1.68}
.wrap{max-width:var(--wrap)}

.pl-h{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:20ch;margin:0 0 clamp(30px,4vw,46px)}
.pl-h--inv{color:var(--text-invert)}

/* buttons: soft, generous, easy to hit */
.pbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:var(--font-ui);font-size:16px;font-weight:600;padding:17px 28px;
  border-radius:var(--radius);border:1.5px solid transparent;min-height:54px;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.pbtn--solid{background:var(--green);color:#fff}
.pbtn--solid:hover{background:#173A2C}
.pbtn--quiet{border-color:var(--line);color:var(--text);background:#fff}
.pbtn--quiet:hover{border-color:var(--green);color:var(--green)}
.pbtn--onDark{background:var(--paper);color:var(--ink)}
.pbtn--onDark:hover{background:#fff}

/* header */
.alertbar{background:var(--ink);color:var(--text-invert)}
.alertbar a{color:var(--green-lit)}
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.brand img{filter:invert(1)}
.nav a{color:var(--text-mute);text-transform:none;letter-spacing:0;font-size:15.5px;font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a::after{background:var(--green)}
.burger{border-color:var(--line);border-radius:var(--radius)}
.burger span{background:var(--text)}
.drawer{background:var(--paper)}
.drawer a{color:var(--text);border-bottom-color:var(--line)}
.head-cta{background:var(--green);color:#fff;border-radius:var(--radius);border:0;font-size:14px}
.head-cta:hover{background:#173A2C}
.mega{background:var(--ink)}
.mega .mega__item{color:var(--text-invert);border-radius:var(--radius)}
.mega__n{color:var(--green-lit)}

/* ---- hero -------------------------------------------------------------- */
.pl-hero{padding-block:clamp(48px,6vw,84px) clamp(52px,6vw,88px)}
.pl-hero__grid{display:grid;gap:clamp(34px,4vw,56px);align-items:center}
@media (min-width:940px){.pl-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.pl-hero h1{font-size:clamp(2.1rem,4.4vw,3.35rem);margin:0 0 22px;max-width:16ch}
.pl-hero__sub{margin:0 0 30px;max-width:44ch;font-size:clamp(1.05rem,1.4vw,1.2rem);
  color:var(--text-mute)}
.pl-cta{display:flex;flex-wrap:wrap;gap:12px}
.pl-hero__free{margin:26px 0 0;max-width:46ch;font-size:15px;color:var(--text-mute);
  padding-left:16px;border-left:3px solid var(--green)}
.pl-hero__fig{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pl-hero__fig img{width:100%;height:auto;display:block;aspect-ratio:5/4;object-fit:cover;
  filter:saturate(.72) contrast(1.02)}

/* ---- what happens next -------------------------------------------------- */
.pl-steps{background:var(--paper-2);padding-block:clamp(56px,7vw,92px)}
.pstep__list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
@media (min-width:860px){.pstep__list{grid-template-columns:repeat(3,1fr);gap:34px}}
.pstep{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.pstep__n{margin:0;width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--green);color:#fff;font-family:var(--font-display);
  font-weight:600;font-size:16px}
.pstep h3{font-size:1.22rem;margin:6px 0 8px}
.pstep p{margin:0;color:var(--text-mute);font-size:15.5px}

/* ---- what we defend ----------------------------------------------------- */
.pl-areas{padding-block:clamp(56px,7vw,92px)}
.parea__grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
@media (min-width:700px){.parea__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.parea__grid{grid-template-columns:repeat(3,1fr)}}
.parea{background:var(--paper);padding:28px 26px 30px;text-decoration:none;color:var(--text);
  transition:background .25s var(--ease)}
.parea:hover{background:#fff}
.parea h3{font-size:1.24rem;margin:0 0 9px}
.parea:hover h3{color:var(--green)}
.parea p{margin:0;font-size:15px;color:var(--text-mute)}

/* ---- reassurance -------------------------------------------------------- */
.pl-reassure{background:var(--ink);color:var(--text-invert);padding-block:clamp(56px,7vw,96px)}
.pr__grid{display:grid;gap:38px;align-items:center}
@media (min-width:960px){.pr__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:60px}}
.pl-reassure p{color:var(--text-invert-mute);max-width:46ch;margin:0 0 28px}
.pl-reassure .cm__lines line{stroke:var(--green-lit)}
.pl-reassure .cm__dot{fill:var(--green-lit)}
.pl-reassure .cm__dot--hub{stroke:var(--green-lit)}
.pl-reassure .cm__label{fill:var(--text-invert-mute)}
.pl-reassure .courtmap figcaption{border-top-color:var(--line-dark);color:var(--text-invert-mute)}
.pl-reassure .courtmap figcaption strong{color:var(--green-lit)}

/* ---- quote -------------------------------------------------------------- */
.pl-quote{padding-block:clamp(56px,7vw,92px);text-align:left}
.pl-quote blockquote{margin:0 0 22px;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.28;max-width:24ch;letter-spacing:-.014em}
.pl-quote blockquote::before{content:"\201C"}
.pl-quote blockquote::after{content:"\201D"}
.pl-quote__by{margin:0;color:var(--text-mute);font-size:15.5px}
.pl-quote__by strong{color:var(--text)}
.pl-quote__by a{color:var(--green)}

/* shared components in this register */
.section.tint{background:var(--paper-2)}
.section.dark,.page-head.dark{background:var(--ink)}
.cta.dark{background:var(--ink-2)}
.site-foot{background:var(--ink)}
.eyebrow{color:var(--green);letter-spacing:.14em}
.eyebrow::before{background:var(--green)}
.dark .eyebrow,.page-head .eyebrow{color:var(--green-lit)}
.dark .eyebrow::before,.page-head .eyebrow::before{background:var(--green-lit)}
.btn,.btn--brass,.btn--ghost{border-radius:var(--radius)}
.btn--brass{background:var(--green);color:#fff}
.btn--brass:hover{background:#173A2C}
.person,.case,.tile,.quote,.aside-card,.area{border-radius:var(--radius);overflow:hidden}
.person__more,.link-arrow,.tile__more,.case__tag,.person__role{color:var(--green)}
.field input,.field select,.field textarea{border-radius:var(--radius)}