/* ===========================================================================
   S Deatherage Law — design system
   Built from the firm's own identity: the SD monogram supplies the graphic
   language, and the logo's heavy grotesque supplies the type. Deliberately
   no serif anywhere; the wordmark has none, and neither should the site.
   =========================================================================== */

:root{
  /* Brand — sampled from the logo artwork */
  --pine:#173254;
  --pine-deep:#102943;
  --pine-soft:#264B76;
  --brass:#2A57C9;      /* royal, on light grounds */
  --brass-lift:#1C3E9E;  /* the same blue, darker, for hover on light grounds */
  --shirt:#7391E8;      /* the same blue lifted, for dark grounds — from the shirt in the portrait */

  /* Neutrals, warmed slightly off blue-grey so the ground reads as chosen */
  --paper:#FFFFFF;
  --paper-2:#F4F6F9;
  --rule:#DCE3EA;
  --ink:#16202B;
  --ink-2:#44525F;
  --ink-3:#78838F;
  --on-dark:#FFFFFF;
  --on-dark-2:#D3DCE6;

  --measure:68ch;
  --page:1180px;
  --gut:clamp(20px,5vw,48px);

  /* Type scale */
  --t-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --t-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-disp:'Archivo','Public Sans',system-ui,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D1520; --paper-2:#141F2D; --rule:#26364A;
    --ink:#E7EAEE; --ink-2:#A2AEBC; --ink-3:#75818F;
    --pine:#1C3A5C; --pine-deep:#132B45; --pine-soft:#2B527E;
    --brass:#7391E8; --brass-lift:#9FB4F2;
    --on-dark:#FFFFFF; --on-dark-2:#D3DCE6;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1520; --paper-2:#141F2D; --rule:#26364A;
  --ink:#E7EAEE; --ink-2:#A2AEBC; --ink-3:#75818F;
  --pine:#1C3A5C; --pine-deep:#132B45; --pine-soft:#2B527E;
  --brass:#7391E8; --brass-lift:#9FB4F2;
  --on-dark:#FFFFFF; --on-dark-2:#D3DCE6;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--t-body); font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* ---- Display type: the logo's voice ---- */
h1,h2,h3,h4,.disp{
  font-family:var(--t-disp); font-weight:700;
  font-stretch:112%;                 /* Archivo variable width — echoes the wordmark */
  letter-spacing:-0.018em; line-height:1.04;
  text-wrap:balance; margin:0; color:inherit;
}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.12rem,1.8vw,1.35rem);font-stretch:100%;letter-spacing:-0.01em}
h4{font-size:1rem;font-stretch:100%;letter-spacing:0}
p{margin:0}

/* ---- Mono: labels, figures, statutes ---- */
.sec-label{
  font-family:var(--t-disp);
  font-size:clamp(1.32rem,2.5vw,1.8rem);
  font-weight:700;font-stretch:112%;
  letter-spacing:.01em;text-transform:uppercase;
  color:var(--brass);margin:0;line-height:1.12;
}
.sec-dark .sec-label{color:var(--shirt)}
.label{
  font-family:var(--t-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.label-dim{color:var(--on-dark-2)}

a{color:var(--brass);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--brass-lift)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g14{gap:14px}.g20{gap:20px}.g28{gap:28px}.g44{gap:44px}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.05em}

/* ===========================  MASTHEAD  =========================== */
.mast{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.mast-in{display:flex;align-items:center;gap:28px;height:76px;max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{height:34px;width:auto}
.brand-txt{font-family:var(--t-disp);font-weight:700;font-stretch:112%;font-size:1.02rem;letter-spacing:-.01em;line-height:1;text-transform:uppercase}
.brand-txt em{font-style:normal;font-weight:400;color:inherit;opacity:.72}
.brand:hover .brand-txt{color:var(--brass)}

.nav{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav > li{position:relative}
.nav a{
  font-size:1.02rem;font-weight:400;color:var(--ink);text-decoration:none;
  padding-block:6px;display:inline-block;letter-spacing:.005em;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brass)}
.nav .cta{
  background:var(--pine);color:var(--paper);padding:9px 20px;border-radius:2px;
  font-weight:500;font-size:1.02rem;
}
:root[data-theme="dark"] .nav .cta,
:root:not([data-theme="light"]) .nav .cta{color:var(--on-dark)}
.nav .cta:hover{background:var(--pine-soft);color:#fff}

.sub{
  position:absolute;top:100%;left:-16px;min-width:246px;background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;box-shadow:0 14px 34px rgb(14 33 56 / 12%);
  padding:7px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;translate:0 -5px;transition:opacity .16s,translate .16s,visibility .16s;
}
li:hover > .sub,li:focus-within > .sub{opacity:1;visibility:visible;translate:0 0}
.sub a{display:block;padding:9px 18px;white-space:nowrap;font-size:.95rem;font-weight:400;color:var(--ink-2)}
.sub a:hover{background:var(--paper-2);color:var(--brass)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}

/* ===========================  HERO  =========================== */
/* The portrait was shot on a near-neutral black, so it composites into the dark
   panel with no visible edge. That is why the hero is dark.
   The ground is navy across the left two thirds, then runs down to a blue-black
   close to the portrait's own backdrop on the photo side. The photo bleeds to the
   viewport edge and its left edge is masked out, so there is no seam. */
.hero{
  position:relative;color:var(--on-dark);overflow:hidden;
  background:var(--pine);
  background-image:linear-gradient(102deg,var(--pine) 0%,var(--pine) 40%,#0C1220 74%,#0A0E16 100%);
}
@media (max-width:960px){
  .hero{background-image:linear-gradient(180deg,var(--pine) 0%,var(--pine) 52%,#0A0E16 92%)}
}
.hero::after{  /* monogram, oversized and cropped */
  content:"";position:absolute;right:-14%;top:-28%;width:min(62vw,760px);aspect-ratio:1;
  background:url("/assets/img/monogram.png") center/contain no-repeat;
  opacity:.05;pointer-events:none;
}
.hero-in{
  position:relative;z-index:1;max-width:var(--page);margin-inline:auto;
  padding:clamp(56px,8vw,104px) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:end;
}
.hero h1{color:#fff}
/* The headline is a full sentence, not a three-word phrase, so it is set
   smaller and tighter than the display scale would otherwise give it. */
/* The Environment · Energy · Business line is the brand statement, not a
   caption, so it is set near the headline's weight and in the accent blue
   that "intersection" uses. */
.brandline{
  font-family:var(--t-disp);
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  font-weight:700;font-stretch:112%;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--shirt);
  margin:0 0 4px;line-height:1.2;
}

.hero h1.hero-h1{
  font-size:clamp(1.85rem,3.5vw,3rem);
  line-height:1.1;letter-spacing:-.02em;max-width:19ch;
}
.hero h1.hero-h1 em{font-style:normal;color:var(--shirt)}
.hero-lede{color:var(--on-dark);max-width:46ch;font-size:1.06rem}
.hero-copy{padding-bottom:clamp(48px,7vw,90px)}
.hero-photo{align-self:end;margin-bottom:-1px;margin-right:calc(var(--gut) * -1)}
.hero-photo img{
  width:100%;max-width:580px;margin-left:auto;filter:saturate(.96) contrast(1.02);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 38%),linear-gradient(to top,transparent 0%,#000 14%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 38%),linear-gradient(to top,transparent 0%,#000 14%);
  mask-composite:intersect;
}
@media (max-width:960px){
  .hero-photo{margin-right:0}
  .hero-photo img{
    -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 16%);
    mask-image:linear-gradient(to top,transparent 0%,#000 16%);
  }
}

/* The record, as a sentence rather than three dashboard tiles. */
.record{border-top:1px solid rgb(255 255 255 / 12%);background:#0A1727;color:var(--on-dark)}
.record .wrap{padding-block:22px}
.record p{font-size:1.02rem;max-width:88ch}
.record b{
  font-family:var(--t-disp);font-weight:700;font-stretch:112%;
  color:#fff;font-size:1.22em;letter-spacing:-.02em;
}

/* ---- Recognition strip: third-party marks, deliberately quiet ----
   One flat grayscale artwork, so the theme is handled with a filter rather
   than a second file: brightness(0) flattens the marks to the ink, and the
   dark theme inverts that to the on-dark neutral. Opacity keeps them from
   competing with the firm's own wordmark. */
.creds{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.creds .wrap{padding-block:clamp(24px,3vw,34px)}
.creds img{margin-inline:auto;width:100%;max-width:800px;filter:brightness(0);opacity:.55}
.creds-inline{margin-block:26px}
.creds-inline img{width:100%;max-width:520px;filter:brightness(0);opacity:.55}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .creds img,
  :root:not([data-theme="light"]) .creds-inline img{filter:brightness(0) invert(1);opacity:.62}
}
:root[data-theme="dark"] .creds img,
:root[data-theme="dark"] .creds-inline img{filter:brightness(0) invert(1);opacity:.62}

/* ===========================  SECTIONS  =========================== */
.sec{padding-block:clamp(52px,7vw,88px);border-bottom:1px solid var(--rule)}
.sec:last-of-type{border-bottom:0}
.sec-dark{background:var(--pine);color:var(--on-dark);border-bottom:0;position:relative;overflow:hidden}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:#fff}
.cta-panel h2,.cta-panel h3{color:#fff}
.sec-dark p{color:var(--on-dark)}
.sec-tint{background:var(--paper-2)}

/* Asymmetric split: heading holds the left rail, content runs wider on the right. */
.split{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(22px,4vw,64px);align-items:start}
/* The rail is narrow, so the heading is set smaller there than the full-width scale. */
.split > div:first-child h2{font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.08}

/* The monogram's vertical bar, as the divider. Replaces the gradient rule. */
.bar{width:3px;height:34px;background:var(--brass);border:0;margin:0}

/* ---- Practice entries: staggered, not a uniform grid ---- */
.entries{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.entry{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);gap:clamp(14px,3vw,40px);
  padding-block:26px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background .16s;
}
.entry:hover{background:var(--paper-2)}
.entry-t{display:flex;flex-direction:column;gap:7px}
.entry-t h3{color:var(--ink)}
.entry:hover .entry-t h3{color:var(--brass)}
.entry p{color:var(--ink-2);font-size:1.05rem;line-height:1.55}

/* ---- Buttons ---- */
.btn{
  display:inline-block;font-weight:600;font-size:1rem;letter-spacing:.01em;
  padding:13px 26px;border-radius:2px;text-decoration:none;border:1px solid transparent;transition:.16s;
}
.btn-solid{background:var(--brass);color:#fff}
.btn-solid:hover{background:var(--brass-lift);color:#fff}
.btn-pine{background:var(--pine);color:#fff;border-color:var(--pine)}
.btn-pine:hover{background:var(--pine-soft);border-color:var(--pine-soft);color:#fff}
.btn-line{border-color:currentColor;color:inherit}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sec-dark .btn-line:hover{background:#fff;color:var(--pine);border-color:#fff}

/* ---- Page hero (interior pages) ---- */
.phero{background:var(--pine);color:var(--on-dark);position:relative;overflow:hidden;padding-block:clamp(46px,6vw,78px);border-bottom:1px solid var(--rule)}
.phero::after{
  content:"";position:absolute;right:-6%;top:50%;translate:0 -50%;width:min(38vw,380px);aspect-ratio:1;
  background:url("/assets/img/monogram.png") center/contain no-repeat;opacity:.055;pointer-events:none;
}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem)}
.phero .hero-lede{margin-top:14px}

/* ---- Body copy on interior pages ---- */
/* Section headings inside a page are not page titles; at the full display
   scale they were 43px, which also inflated their em-based top margin to
   91px between topics. */
.body h2{font-size:clamp(1.42rem,2.35vw,1.9rem);margin-top:1.35em;margin-bottom:.15em}
.body h3{font-size:clamp(1.05rem,1.5vw,1.22rem);margin-top:1.15em;margin-bottom:.1em;color:var(--brass)}
.body p,.body ul,.body ol{margin-top:.7em;max-width:var(--measure)}
.body ul,.body ol{margin-bottom:.2em}
.body ul,.body ol{padding-left:0;list-style:none}
.body ul li{position:relative;padding-left:22px;margin-top:.4em}
.body ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--brass)}
.body ol{counter-reset:n}
.body ol li{position:relative;padding-left:30px;margin-top:.4em;counter-increment:n}
.body ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.06em;
  font-family:var(--t-mono);font-size:.76rem;color:var(--brass);
}

.brief{
  background:var(--paper-2);border-left:3px solid var(--brass);
  padding:18px 22px;font-size:1.02rem;max-width:var(--measure);
}
.note{font-size:.86rem;color:var(--ink-3)}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--rule);max-width:var(--measure);margin-top:.5em}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-weight:600;font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);
  translate:0 -70%;rotate:45deg;transition:rotate .18s;
}
.faq details[open] summary::after{rotate:225deg;translate:0 -30%}
.faq details p{padding:0 0 16px;color:var(--ink-2);font-size:1.01rem;max-width:62ch}

/* ---- CTA panel ---- */
.cta-panel{background:var(--pine);color:var(--on-dark);padding:clamp(24px,3.4vw,36px);border-radius:3px;position:relative;overflow:hidden;margin-top:2.2em}
.cta-panel h2{color:#fff;font-size:1.35rem}
.cta-panel p{color:var(--on-dark);margin-top:8px;max-width:56ch}
.cta-panel .row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:20px}

/* ---- Articles ---- */
.art-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.art{display:grid;grid-template-columns:minmax(142px,.28fr) minmax(0,1.72fr);gap:clamp(12px,2.2vw,28px);
  padding-block:22px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.art:hover{background:var(--paper-2)}
.art time{font-size:1rem;color:var(--ink)}
.art h2,.art h3{color:var(--ink);font-size:1.16rem;font-stretch:100%;letter-spacing:-.01em}
.art:hover h2,.art:hover h3{color:var(--brass)}
.art-meta{font-size:.95rem;color:var(--ink)}

/* ---- Footer ---- */
.foot{background:var(--pine-deep);color:#fff;padding-block:52px 40px}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:var(--shirt)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot img{height:clamp(96px,11vw,132px);width:auto;margin-bottom:18px}
.foot-tag{font-family:var(--t-disp);font-weight:700;font-stretch:112%;font-size:1.14rem;letter-spacing:.02em;color:var(--shirt)}
.foot-sub{font-size:1rem;color:#fff;margin-top:6px}
.foot .foot-h{color:var(--shirt);font-size:1.08rem;font-family:var(--t-mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:1rem}
.foot-base{border-top:1px solid rgb(255 255 255 / 10%);margin-top:36px;padding-top:20px;font-size:.87rem;color:rgb(255 255 255 / 82%)}

/* ---- Forms ---- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;max-width:560px}
.field label{font-family:var(--t-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{
  font:inherit;font-size:.97rem;padding:11px 13px;border:1px solid var(--rule);
  border-radius:2px;background:var(--paper);color:var(--ink);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--brass);outline:none;box-shadow:0 0 0 3px rgb(42 87 201 / 16%)}

/* ===========================  RESPONSIVE  =========================== */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;padding-bottom:0}
  .hero-copy{padding-bottom:34px}
  .hero-photo img{max-width:400px;margin-inline:auto}
  .split,.entry,.art,.foot-grid{grid-template-columns:1fr;gap:14px}
  .foot-grid{gap:30px}
}
/* The full nav tightens before it collapses, so a half-width window still
   shows the links rather than a hamburger. */
@media (max-width:1040px){
  .mast-in{gap:18px}
  .nav{gap:17px}
  .nav a{font-size:.95rem}
  .nav .cta{padding:8px 15px;font-size:.95rem}
}
@media (max-width:768px){
  .burger{display:block;order:3}
  .nav{
    display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    gap:0;padding:10px var(--gut) 20px;
  }
  .nav.open{display:flex}
  .nav > li{border-bottom:1px solid var(--rule)}
  .nav a{padding:12px 0;display:block}
  .sub{position:static;opacity:1;visibility:visible;translate:0 0;border:0;box-shadow:none;
       padding:0 0 8px 14px;min-width:0;background:transparent}
  .nav .cta{display:inline-block;margin-top:12px;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.mast,.foot,.cta-panel{display:none}body{background:#fff;color:#000}}

/* Article disclaimer — set apart and quieter than the article itself. */
.disclaimer{
  max-width:var(--measure);margin-top:2.4em;padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:.87rem;line-height:1.6;color:var(--ink-3);
}
.disclaimer p+p{margin-top:.7em}