:root{
  --cream:#F1F5ED;
  --cream-deep:#E7EDE2;
  --ink:#242304;
  --body:#63624F;
  --blue:#1A729B;
  --navy:#2C6082;
  --dark:#16190D;
  --rule:rgba(36,35,4,.14);
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;background:var(--cream);color:var(--body);
  font-family:var(--sans);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);text-transform:uppercase;font-weight:500;margin:0;letter-spacing:.01em}
h1{font-size:clamp(38px,6vw,66px);line-height:1.08}
h2{font-size:clamp(27px,3.4vw,42px);line-height:1.16;margin-bottom:26px}
h3{font-size:20px;line-height:1.3}
h4{font-size:15px;letter-spacing:.09em}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{
  font-family:var(--sans);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;font-weight:400;
}
.eyebrow.on-dark{color:#B9CBD6}
section{padding:88px 0}
.lede{font-size:21px;line-height:1.6}

/* ---------- top bar ---------- */
.topbar{background:var(--dark);color:#C9CDBF;font-size:13px;letter-spacing:.04em}
.topbar .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;min-height:48px;flex-wrap:wrap}
.topbar-left{display:flex;gap:26px;flex-wrap:wrap}
.topbar-item{display:flex;gap:8px;align-items:center}
.topbar a{color:#fff;font-weight:700;letter-spacing:.06em}
.topbar svg{width:14px;height:14px;flex:none;opacity:.75}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(241,245,237,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:84px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:44px;width:auto}
.brand .kicker{
  border-left:1px solid var(--rule);padding-left:14px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--body);line-height:1.35;max-width:150px
}
nav.main{display:flex;align-items:center;gap:6px}
nav.main a{
  font-family:var(--serif);text-transform:uppercase;font-size:13px;letter-spacing:.06em;
  color:#fff;background:var(--navy);padding:12px 15px;border-radius:2px;white-space:nowrap
}
nav.main a:hover{background:var(--ink);text-decoration:none}
.btn{
  display:inline-block;font-family:var(--serif);text-transform:uppercase;letter-spacing:.07em;
  font-size:15px;padding:16px 30px;border-radius:2px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;transition:.18s ease;white-space:nowrap
}
.header-cta{padding:14px 22px;font-size:13.5px}
.btn:hover{background:transparent;color:var(--ink);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn.light:hover{background:transparent;color:#fff}
.menu-toggle:hover,.menu-toggle[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.menu-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:2px;padding:9px 12px;cursor:pointer;color:var(--ink);font-family:var(--serif);text-transform:uppercase;font-size:13px;letter-spacing:.08em}

/* ---------- hero ---------- */
.hero{padding:76px 0 68px;border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:64px;align-items:center}
.hero h1{margin-bottom:22px}
.hero .rule{width:64px;height:2px;background:var(--blue);margin:0 0 26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.portrait{margin:0;background:#fff;padding:14px;border:1px solid var(--rule);box-shadow:0 22px 44px rgba(36,35,4,.09)}
.portrait img{width:100%;height:auto}
.portrait figcaption{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--body);
  text-align:center;padding:14px 6px 6px;line-height:1.5
}

/* ---------- stats ---------- */
.stats{background:var(--dark);color:#D7DCCC;padding:52px 0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;text-align:center}
.stat .num{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);color:#fff;line-height:1.05}
.stat .lab{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;color:#A9B29A}

/* ---------- story ---------- */
.story .wrap{max-width:920px}
.story p{font-size:19px}
.dropcap::first-letter{
  font-family:var(--serif);float:left;font-size:120px;line-height:.75;
  padding:0 14px 0 0;color:var(--blue)
}
.callout{
  background:#fff;border-left:3px solid var(--blue);padding:30px 34px;margin:38px 0;
  box-shadow:0 14px 30px rgba(36,35,4,.06)
}
.callout h4{margin-bottom:10px;color:var(--blue);letter-spacing:.16em}
.callout p:last-child{margin-bottom:0}
.pullquote{
  font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.34;color:var(--ink);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:34px 0;margin:44px 0;text-align:center
}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--body);margin-top:18px}

/* ---------- results ---------- */
.results{background:var(--cream-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.results .head{max-width:760px;margin-bottom:44px}
.verdicts{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.verdict{background:#fff;border:1px solid var(--rule);padding:38px 34px}
.verdict .amt{font-family:var(--serif);font-size:52px;line-height:1;color:var(--ink)}
.verdict h3{margin:16px 0 12px}
.verdict p:last-child{margin-bottom:0}
.verdict .meta{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-top:18px}
.fineprint{font-size:13.5px;line-height:1.6;color:var(--body);margin-top:26px;font-style:italic}

/* ---------- practice ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:22px}
.card{background:#fff;border:1px solid var(--rule);padding:32px 28px}
.card .ic{width:34px;height:34px;color:var(--blue);margin-bottom:18px}
.card h3{font-size:17px;margin-bottom:10px;min-height:2.6em}
.card p{font-size:16px;margin:0}

/* ---------- beyond ---------- */
.beyond{background:var(--dark);color:#C6CCB8}
.beyond h2{color:#fff}
.beyond .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;display:grid;grid-template-columns:96px 1fr;gap:20px}
.timeline li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.timeline .yr{font-family:var(--serif);color:#fff;font-size:17px;letter-spacing:.04em}
.timeline .what{font-size:16.5px;line-height:1.55}

/* ---------- credentials ---------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:22px}
.creds h4{color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:16px}
.creds ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.55}
.creds li{padding:7px 0;border-bottom:1px solid rgba(36,35,4,.06)}
.creds li span{display:block;font-size:13.5px;color:var(--blue)}

/* ---------- contact ---------- */
.contact{background:var(--cream-deep);border-top:1px solid var(--rule)}
.contact-head{max-width:780px}
.contact-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
/* Office cards.
   Each .office is display:contents, so its three parts (h3, .office-meta, .roster)
   become direct cells of the .offices grid, laid out column by column: row 1 holds
   the three headings, row 2 the address/phone blocks, row 3 the rosters. Each row
   therefore sizes to the tallest cell in it, which lines the ATTORNEYS divider and
   heading up across all three cards even though Aiken has no phone or fax lines and
   even when a heading wraps to two lines at narrow widths.
   The rosters are align-self:start, so a short roster stops at its own content
   instead of stretching to the height of the tallest card. row-gap is 0 and the
   shared borders are suppressed, so the three cells read as one white card. */
.offices{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;
  grid-auto-flow:column;column-gap:26px;row-gap:0;margin-top:44px
}
.office{display:contents}
.office h3{
  font-size:17px;margin:0;
  background:#fff;border:1px solid var(--rule);border-bottom:0;padding:32px 34px 14px
}
.office-meta{
  background:#fff;border:1px solid var(--rule);border-top:0;border-bottom:0;
  padding:0 34px 20px;display:flex;flex-direction:column
}
.roster{
  background:#fff;border:1px solid var(--rule);border-top:0;padding:0 34px 32px;
  align-self:start;margin:0
}
.office p{font-size:16px;margin:0 0 8px}
/* Hours is the last line of every meta block, so pinning it to the bottom keeps it
   on one line across the three cards and stops the slack in a card with no phone or
   fax lines from pooling as a single void just above the divider. */
.office-meta p:last-child{margin:auto 0 0}
.office .tel{font-family:var(--serif);font-size:26px;color:var(--ink);letter-spacing:.02em;margin:14px 0 8px}
.site-link{
  margin-top:26px;background:#fff;border:1px solid var(--rule);padding:30px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap
}
.site-link p{margin:0;max-width:620px}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:#A9B29A;padding:64px 0 30px;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13)}
footer.site img.logo{height:34px;width:auto;margin-bottom:22px}
footer.site h4{color:#fff;margin-bottom:14px;letter-spacing:.14em;font-size:13px}
footer.site a{color:#D7DCCC}
.legal{padding-top:26px;font-size:12.5px;line-height:1.7;color:#8B937E}
.legal p{margin:0 0 10px}

@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .portrait{max-width:340px}
  .stats .grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .verdicts,.cards,.creds,.beyond .wrap,footer.site .cols{grid-template-columns:1fr}
  /* the three office cards stay on one row: only the padding tightens */
  .office h3{padding:26px 22px 12px}
  .office-meta{padding:0 22px 18px}
  .roster{padding:0 22px 26px}
  .office .tel{font-size:22px}
  .creds{gap:26px}
  nav.main{position:absolute;top:100%;right:0;left:0;background:var(--cream);flex-direction:column;
    align-items:stretch;padding:14px 26px 22px;border-bottom:1px solid var(--rule);display:none}
  nav.main.open{display:flex;box-shadow:0 18px 34px rgba(36,35,4,.16);border-bottom-color:rgba(36,35,4,.30)}
  nav.main a{text-align:center}
  .menu-toggle{display:block}
  header.site .wrap{position:relative;flex-wrap:wrap}
  .header-cta{display:none}
}
@media (max-width:640px){
  section{padding:62px 0}
  body{font-size:17px;overflow-x:hidden}
  .wrap{padding:0 20px}
  .brand .kicker{display:none}
  .brand img{height:38px}
  .cards,.creds{gap:18px}
  .topbar{font-size:12px}
  .topbar .wrap{justify-content:center;text-align:center;padding:8px 20px}
  .topbar-left{gap:14px;justify-content:center}
  .hero{padding:52px 0 54px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center;padding:15px 18px;font-size:14px}
  .portrait{max-width:100%}
  .stats .grid{grid-template-columns:1fr 1fr;gap:24px}
  .callout{padding:24px 22px}
  .verdict,.card,.site-link{padding:26px 22px}
  /* one column: each card is its own head + roster pair stacked in source order */
  .offices{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .roster{margin-bottom:18px}
  .office:last-child .roster{margin-bottom:0}
  .contact-cta{flex-direction:column;align-items:stretch}
  .contact-cta .btn,.site-link .btn{text-align:center;padding:15px 18px;font-size:14px}
  .verdict .amt{font-size:42px}
  .timeline li{grid-template-columns:1fr;gap:6px}
}

/* ---------- legal pages (privacy policy, terms of use) ---------- */
.legal-hero{background:var(--cream-deep);border-bottom:1px solid var(--rule);padding:64px 0 56px}
.legal-hero .wrap{max-width:860px}
.legal-hero h1{font-size:clamp(30px,4.4vw,48px)}
.legal-hero .updated{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin:18px 0 0}
.legal-body{padding:70px 0 88px}
.legal-body .wrap{max-width:860px}
.legal-body h2{font-size:clamp(21px,2.4vw,27px);margin:46px 0 14px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-size:16px;margin:26px 0 8px;letter-spacing:.06em}
.legal-body ul{margin:0 0 1.15em;padding-left:22px}
.legal-body li{margin-bottom:9px}
.legal-body .note{
  background:#fff;border-left:3px solid var(--blue);padding:24px 28px;margin:32px 0;
  box-shadow:0 14px 30px rgba(36,35,4,.06)
}
.legal-body .note p:last-child{margin-bottom:0}
.back-link{display:inline-block;margin-top:40px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- tablet: two columns instead of one long stack ---------- */
@media (min-width:641px) and (max-width:1000px){
  /* .offices is deliberately NOT in this list: the three office cards must stay
     on a single row, never 2 + 1. */
  .cards,.creds,.verdicts,footer.site .cols{grid-template-columns:1fr 1fr}
  .creds{gap:26px 34px}
  .offices{column-gap:18px}
}
/* portrait is a 228px source: never ask it to upscale much */
@media (max-width:1000px){
  .portrait{max-width:320px}
}
@media (max-width:640px){
  .portrait{max-width:300px;margin:0 auto}
}

/* ---------- SC RPC 7.2(i) results disclaimer ----------
   Must be sufficiently large, clearly legible, prominently placed and conspicuous,
   and on the same page as the result. Deliberately NOT .fineprint. */
.results-disclaimer{
  font-size:16px;
  line-height:1.62;
  font-style:normal;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-left:4px solid var(--blue);
  padding:18px 22px;
  margin:24px 0 0;
}
.stats .results-disclaimer{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid var(--blue);
  color:#E4E9DA;
  text-align:left;
  margin-top:36px;
}
/* SC RPC 7.2(d) responsible lawyer, 7.2(h) principal place of practice */
.adv-responsibility{
  font-size:13.5px;
  line-height:1.8;
  color:#A9B29A;
}

/* SC RPC 7.2(f) fee and cost disclosure, sits with the contingent fee statement */
.fee-disclosure{
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-left:4px solid var(--blue);
  padding:18px 22px;
  margin:22px 0 0;
  max-width:780px;
}

/* office attorney rosters.
   The divider is drawn by ::before rather than border-top so it stays inset by
   the card padding now that .roster is its own grid cell. */
.roster::before{content:"";display:block;border-top:1px solid var(--rule);margin-bottom:18px}
.roster h4{font-size:12.5px;letter-spacing:.12em;color:var(--body);margin-bottom:12px}
.roster ul{list-style:none;margin:0;padding:0}
.roster li{font-size:15px;line-height:1.45;color:var(--ink);margin-bottom:12px}
.roster li:last-child{margin-bottom:0}
.roster li span{display:block;font-size:13.5px;color:var(--body);margin-top:2px}

/* Review marker. Delete the .todo markup once Paige supplies the letterhead data. */
.todo{background:#FFE9A8;color:#3A2E00;padding:1px 6px;font-weight:700;font-style:normal}

/* Which attorney covers South Carolina. Sits under the office cards. */
.sc-counsel{
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-left:4px solid var(--blue);
  padding:18px 22px;
  margin:26px 0 0;
}

/* Accolades: names set in a distinct typeface, with links to each organization's selection criteria */
.creds cite.award{font-family:var(--serif);font-style:italic;font-size:17.5px;color:var(--ink)}
.creds li span a.criteria{text-decoration:underline;text-underline-offset:2px}
.creds li span a.criteria{white-space:nowrap}