/* Hester Grading — red clay, iron and bone. The palette is the job: Georgia
   clay under a blade, weathered steel, and the pale dust everything ends up
   wearing. Deliberately not TradeForge's dark theme; this is the client's face,
   not ours. */
:root{
  --clay:#9A3F22; --clay-deep:#6E2C17; --iron:#3A3733; --earth:#211D19;
  --bone:#F4EFE7; --bone-dim:#D9D1C4; --ink:#221F1B; --ink-soft:#55504A;
  --rule:rgba(34,31,27,0.14);
  --display:"Saira Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--clay-deep)}

.bar{background:var(--earth);padding:14px 22px}
.wordmark{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--bone);text-decoration:none}
.wordmark span{color:var(--clay)}

/* The hero carries the whole first impression, so it does the work: a heavy
   slab of earth, the name, and in one line what they actually do. */
.hero{background:
    linear-gradient(180deg, rgba(33,29,25,0.86), rgba(33,29,25,0.94)),
    repeating-linear-gradient(103deg, #3a2a20 0 22px, #33241b 22px 44px);
  color:var(--bone);padding:76px 22px 68px}
.hero-in{max-width:960px;margin:0 auto}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:0.22em;
  font-size:0.82rem;color:var(--clay);margin:0 0 14px}
h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,7.5vw,4.6rem);line-height:0.95;margin:0 0 18px;
  letter-spacing:0.01em;text-wrap:balance}
.lede{font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:44ch;color:var(--bone-dim);margin:0 0 28px}
.cta{display:inline-block;background:var(--clay);color:#fff;text-decoration:none;
  font-family:var(--display);text-transform:uppercase;letter-spacing:0.09em;font-weight:700;
  padding:14px 30px;border-radius:2px;font-size:1.05rem}
.cta:hover{background:var(--clay-deep)}
.cta.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px rgba(244,239,231,0.4);margin-left:10px}

main{max-width:960px;margin:0 auto;padding:0 22px}
section{padding:58px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}
h2{font-family:var(--display);text-transform:uppercase;letter-spacing:0.06em;
  font-size:clamp(1.6rem,3.6vw,2.2rem);margin:0 0 8px;line-height:1.05}
.sub{color:var(--ink-soft);margin:0 0 30px;max-width:58ch}

.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px;background:var(--rule)}
.work div{background:var(--bone);padding:26px 22px}
.work h3{font-family:var(--display);text-transform:uppercase;letter-spacing:0.05em;
  font-size:1.2rem;margin:0 0 8px;color:var(--clay-deep)}
.work p{margin:0;color:var(--ink-soft);font-size:0.97rem}

.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:720px){.two{grid-template-columns:1fr}}

.areas{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.areas li{font-family:var(--display);text-transform:uppercase;letter-spacing:0.07em;
  font-size:0.9rem;background:var(--earth);color:var(--bone);padding:7px 14px;border-radius:2px}

.callout{background:var(--earth);color:var(--bone);padding:30px 26px;border-left:5px solid var(--clay)}
.callout p{margin:0;color:var(--bone-dim)}
.callout strong{color:var(--bone)}

.contact a{font-family:var(--display);font-size:1.35rem;letter-spacing:0.03em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-block;margin-bottom:6px}
.contact a:hover{color:var(--clay-deep)}

.prose{max-width:720px;margin:0 auto;padding:48px 22px 70px}
.prose h1{color:var(--ink);font-size:clamp(2rem,5vw,2.8rem);margin-bottom:6px}
.prose h2{margin-top:32px}
.prose .updated{color:var(--ink-soft);font-size:0.9rem;margin:0 0 26px}

.foot{background:var(--earth);color:var(--bone-dim);padding:30px 22px;text-align:center;font-size:0.92rem}
.foot a{color:var(--bone);text-decoration:none;margin:0 12px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:0.08em;font-size:0.86rem}
.foot p{margin:16px 0 0;opacity:0.6;font-size:0.85rem}

:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- generated pages: area heroes, FAQ, linked area chips --- */
.hero-sm{padding:56px 22px 48px}
.hero-sm h1{font-size:clamp(2.1rem,6vw,3.4rem)}

.areas li a{color:var(--bone);text-decoration:none;display:block;margin:-7px -14px;padding:7px 14px}
.areas li:hover{background:var(--clay-deep)}

/* A definition list is the honest markup for question-and-answer, and it is
   what FAQPage describes. */
.faq{margin:0}
.faq dt{font-family:var(--display);text-transform:uppercase;letter-spacing:0.04em;
  font-size:1.08rem;color:var(--clay-deep);margin:22px 0 6px}
.faq dt:first-of-type{margin-top:0}
.faq dd{margin:0;color:var(--ink-soft);max-width:62ch}