/* ==========================================================================
   Empower Life Skills, LLC — global stylesheet
   Palette and type follow the Website Builder Checklist:
   warm sand ground, soft slate blue, sage green, dark slate text, sans-serif.
   All text/background pairs below meet WCAG 2.1 AA at their used size.
   ========================================================================== */

:root{
  /* color — taken from the Empower Life Skills logo files */
  --cream:      #F7F3E8;   /* page ground, matches logo background */
  --cream-deep: #EFE8D6;   /* alternating band */
  --card:       #FFFFFF;
  --green:      #133B3A;   /* logo bar 1 — primary text, dark sections */
  --green-mid:  #2F5351;   /* logo bar 2 — secondary text, 7.6:1 on cream */
  --green-soft: #456B68;   /* captions, 5.3:1 on cream */
  --gold:       #C89C3D;   /* logo bar 3 — accent fills, rules, badge. NOT for text on cream */
  --gold-mid:   #DAB66C;   /* logo bar 4 — gold text on green, 6.4:1 */
  --gold-pale:  #EDE0C0;   /* logo bar 5 */
  --gold-text:  #7E5E15;   /* darkened gold for small text on cream, 5.4:1 */
  --line:       #DCD2BC;
  --line-soft:  #E8E0CD;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shell: 1140px;
  --gut: clamp(20px, 5vw, 56px);
  --sect: clamp(64px, 8vw, 112px);
  --r: 4px;
  --r-sm: 3px;
}

/* Back-compat aliases so existing rules keep working */
:root{
  --sand: var(--cream);
  --sand-deep: var(--cream-deep);
  --slate: var(--green);
  --slate-soft: var(--green-mid);
  --ink-faint: var(--green-soft);
  --blue: var(--green);
  --blue-dark: #0C2B2A;
  --sage: var(--gold-text);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--slate);
  font-family:var(--font);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{margin:0; font-weight:650; line-height:1.12}
h1{font-size:clamp(2.15rem,4.8vw,3.5rem); letter-spacing:-0.031em; line-height:1.06}
h2{font-size:clamp(1.62rem,3.1vw,2.45rem); letter-spacing:-0.026em; line-height:1.1}
h3{font-size:1.2rem; letter-spacing:-0.014em; line-height:1.32}
h4{font-size:1rem; letter-spacing:-0.006em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em; padding-left:1.15em}
li{margin-bottom:.42em}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
img{max-width:100%; display:block}

.shell{max-width:var(--shell); margin:0 auto; padding-inline:var(--gut)}
.narrow{max-width:74ch}
.lede{font-size:clamp(1.04rem,1.55vw,1.16rem); color:var(--slate-soft); max-width:62ch; text-wrap:pretty}
.eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sage); margin:0 0 .85rem;
}
.muted{color:var(--slate-soft)}

/* accessibility ---------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--green); color:var(--cream);
  padding:.8em 1.2em; z-index:200; text-decoration:none; border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold-text); outline-offset:3px; border-radius:2px}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-block; font-size:.92rem; font-weight:650; line-height:1.25;
  letter-spacing:-.006em; padding:.78em 1.4em; border-radius:var(--r-sm);
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:inherit;
  transition:background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dark); border-color:var(--blue-dark); color:#fff}
.btn-outline{border-color:var(--slate); color:var(--slate); background:transparent}
.btn-outline:hover{background:var(--slate); color:#fff}
.btn-light{background:#fff; color:var(--slate); border-color:#fff}
.btn-light:hover{background:var(--sand-deep); color:var(--slate); border-color:var(--sand-deep)}

/* header ----------------------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:100;
  background:rgba(247,243,232,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -3px 0 -2px var(--gold);
}
.masthead .shell{display:flex; align-items:center; gap:1.25rem; min-height:74px}
.brandblock{display:flex; align-items:center; gap:1rem; margin-right:auto; min-width:0}
.logo{display:block; text-decoration:none; flex:none}
.logo img{height:42px; width:auto; display:block}
.vendor{
  display:inline-flex; align-items:center; gap:.45rem; flex:none;
  background:var(--gold); color:var(--green);
  font-size:.7rem; font-weight:700; letter-spacing:.08em;
  padding:.38em .7em; border-radius:var(--r-sm); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.vendor span{
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:.78;
}
@media(max-width:1080px){.vendor{display:none}}
@media(max-width:520px){.logo img{height:32px}}
@media(max-width:380px){.logo img{height:28px}}
.mainnav ul{display:flex; gap:1.45rem; list-style:none; margin:0; padding:0}
.mainnav a{
  text-decoration:none; color:var(--slate); font-size:.9rem; font-weight:550;
  letter-spacing:-.008em; padding:.35em 0; border-bottom:1.5px solid transparent; display:block;
  transition:color .14s ease, border-color .14s ease;
}
.mainnav a:hover{border-color:var(--blue); color:var(--blue)}
.mainnav a[aria-current="page"]{border-color:var(--sage); color:var(--sage)}
.navtoggle{display:none; background:none; border:1.5px solid var(--line); border-radius:var(--r);
  padding:.5em .8em; font-family:inherit; font-size:.9rem; font-weight:650; color:var(--slate); cursor:pointer}
@media(max-width:960px){
  .mainnav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:1rem var(--gut) 1.4rem;
    max-height:calc(100vh - 76px); overflow-y:auto;
    box-shadow:0 12px 24px rgba(44,58,68,.10);
  }
  .mainnav.open{display:block}
  .mainnav ul{flex-direction:column; gap:0}
  .mainnav a{padding:.85em 0; border-bottom:1px solid var(--line-soft); font-size:1rem}
  .navtoggle{display:block; order:3}
  .masthead .btn{order:2; padding:.65em 1.1em; font-size:.88rem}
}
@media(max-width:520px){
  /* The referral CTA stays reachable on phones — it shrinks, it never disappears. */
  .masthead .shell{gap:.6rem; min-height:66px}
  .masthead .btn{padding:.6em .8em; font-size:.8rem}
  .logo-text{font-size:.92rem}
  .logo-mark{width:30px; height:30px}
  .mainnav{max-height:calc(100vh - 66px)}
}
@media(max-width:380px){
  .logo-text span{display:none}
  .masthead .btn{font-size:.76rem; padding:.55em .7em}
}

/* sections --------------------------------------------------------------- */
.sect{padding:var(--sect) 0}
.sect-tight{padding:clamp(48px,6vw,76px) 0}
.sect-deep{background:var(--sand-deep)}
.sect-dark{background:var(--slate); color:var(--sand)}
.sect-dark .eyebrow{color:var(--gold-mid)}
.sect-dark .lede,.sect-dark .muted{color:rgba(246,242,235,.78)}
.sect-dark a{color:var(--gold-mid)}
.head-split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,5vw,64px); align-items:end}
.head-split .lede{margin:0}
@media(max-width:880px){.head-split{grid-template-columns:1fr; align-items:start}}

/* hero ------------------------------------------------------------------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(44px,6vw,72px)}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(32px,5vw,64px); align-items:center}
.hero h1{max-width:15ch}
.hero .lede{margin-top:1.4rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.langbar{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:baseline; font-size:.94rem; color:var(--slate-soft);
}
.langbar b{display:block; font-size:1.12rem; color:var(--slate); font-weight:650}
.langbar small{
  display:block; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage); font-weight:700;
}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}}

/* page banner (interior pages) ------------------------------------------- */
.banner{background:var(--sand-deep); padding:clamp(44px,6vw,76px) 0 clamp(36px,5vw,60px); border-bottom:1px solid var(--line)}
.banner h1{max-width:18ch}
.banner .lede{margin-top:1.1rem}
.crumbs{font-size:.85rem; color:var(--slate-soft); margin:0 0 1.2rem}
.crumbs a{color:var(--slate-soft)}

/* image placeholders ----------------------------------------------------- */
.hero-photo{margin:0}
.hero-photo img{
  width:100%; height:auto; border-radius:var(--r);
  box-shadow:0 1px 0 rgba(44,58,68,.10), 0 22px 44px -22px rgba(44,58,68,.42);
  background:var(--sand-deep);
}
.photo{
  background:var(--sand-deep); border:1px dashed var(--line);
  border-radius:var(--r); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; color:var(--slate-soft); font-size:.86rem; line-height:1.5;
}
.photo-wide{aspect-ratio:16/9}
.sect-deep .photo{background:var(--card)}

/* cards ------------------------------------------------------------------ */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px)}
@media(max-width:940px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}}
@media(max-width:680px){.grid-2,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);
  box-shadow:0 1px 2px rgba(44,58,68,.04);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover{border-color:var(--gold); box-shadow:0 6px 18px -10px rgba(19,59,58,.24)}
.card h3{margin-bottom:.5rem; text-wrap:balance}
.card p:last-child{margin-bottom:0}
.card .tag{
  display:block; font-size:.65rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sage); margin-bottom:.7rem;
}
.card-num{
  font-size:.68rem; font-weight:700; color:var(--blue); letter-spacing:.15em;
  text-transform:uppercase; display:block; margin-bottom:.7rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--line-soft);
}

/* scaffolding signature -------------------------------------------------- */
.rig{margin-top:clamp(36px,5vw,60px)}
.posts{
  display:flex; align-items:flex-end; gap:5px;
  height:clamp(112px,15vw,180px); border-bottom:3px solid var(--gold);
}
.post{flex:1; transform-origin:bottom}
.stages{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); margin-top:1.9rem}
.stage{border-top:2px solid var(--line); padding-top:1rem}
.stage b{display:block; font-size:1.14rem; font-weight:650; margin-bottom:.35rem; letter-spacing:-.01em}
.stage .step{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage); display:block; margin-bottom:.5rem;
}
.stage p{margin:0; font-size:.96rem; color:var(--slate-soft)}
.sect-dark .stage{border-top-color:rgba(246,242,235,.24)}
.sect-dark .stage p{color:rgba(246,242,235,.76)}
.sect-dark .stage .step{color:var(--gold-mid)}
.sect-dark .posts{border-bottom-color:var(--gold)}
@media(max-width:720px){.stages{grid-template-columns:1fr; gap:1.2rem}}

/* pillar rows ------------------------------------------------------------ */
.pillars{margin-top:clamp(36px,5vw,56px); border-top:1px solid var(--line)}
.pillar{
  display:grid; grid-template-columns:2.9rem 1fr 1.1fr; gap:clamp(16px,3vw,44px);
  padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line); align-items:start;
}
.pillar-n{
  display:flex; align-items:center; justify-content:center;
  width:2.9rem; height:2.9rem; flex:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 1px 2px rgba(19,59,58,.06);
  font-weight:700; color:var(--green); font-size:.95rem;
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.pillar p{margin:.55rem 0 0; color:var(--slate-soft); font-size:1rem}
.pillar ul{list-style:none; padding:0; margin:0}
.pillar li{position:relative; padding:.45rem 0 .45rem 1.2rem; border-top:1px solid var(--line-soft); font-size:.97rem}
.pillar li:first-child{border-top:none}
.pillar li::before{content:""; position:absolute; left:0; top:1.05em; width:7px; height:7px; background:var(--sage); border-radius:50%}
@media(max-width:860px){
  .pillar{grid-template-columns:2.9rem 1fr}
  .pillar-detail{grid-column:2}
}

/* tiers ------------------------------------------------------------------ */
.tiers{display:grid; gap:14px; margin-top:clamp(32px,4vw,52px)}
.tier{
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--blue);
  border-radius:var(--r); padding:clamp(20px,2.6vw,30px);
  display:grid; grid-template-columns:230px 1fr; gap:clamp(16px,3vw,40px);
}
.tier{border-left-color:var(--green)}
.tier:nth-child(2){border-left-color:var(--green-mid); margin-left:clamp(0px,3vw,44px)}
.tier:nth-child(3){border-left-color:var(--gold); margin-left:clamp(0px,6vw,88px)}
.tier b{font-size:1.08rem; font-weight:650; letter-spacing:-.018em}
.tier .role{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-soft); margin-top:.35rem;
}
.tier p{margin:0; color:var(--slate-soft); font-size:.98rem}
@media(max-width:760px){
  .tier{grid-template-columns:1fr; gap:.8rem}
  .tier:nth-child(2),.tier:nth-child(3){margin-left:0}
}

/* steps ------------------------------------------------------------------ */
.lane{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,34px); box-shadow:0 1px 2px rgba(44,58,68,.04);
}
.lane h3{margin-bottom:1.2rem}
.steps{counter-reset:s; list-style:none; padding:0; margin:0}
.steps li{
  counter-increment:s; position:relative; padding:1rem 0 1rem 3.1rem;
  border-bottom:1px solid var(--line-soft); margin:0;
}
.steps li:last-child{border-bottom:none; padding-bottom:0}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:.95rem;
  width:1.85rem; height:1.85rem; border-radius:50%; background:var(--blue); color:#fff;
  font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}
.steps b{display:block; margin-bottom:.15rem}
.steps span{color:var(--slate-soft); font-size:.97rem}

/* checklist -------------------------------------------------------------- */
.checklist{list-style:none; padding:0; margin:1.2rem 0 0}
.checklist li{position:relative; padding:.55rem 0 .55rem 2rem; border-top:1px solid var(--line-soft)}
.checklist li:first-child{border-top:none}
.checklist li::before{
  content:""; position:absolute; left:.1rem; top:1.05em; width:11px; height:6px;
  border-left:2.5px solid var(--sage); border-bottom:2.5px solid var(--sage);
  transform:rotate(-45deg);
}

/* areas ------------------------------------------------------------------ */
.areas{margin:0; padding:0; list-style:none}
.areas li{padding:1.35rem 0; border-top:1px solid var(--line); margin:0}
.areas li:last-child{border-bottom:1px solid var(--line)}
.areas b{font-size:1.15rem; font-weight:650; letter-spacing:-.018em}
.areas p{margin:.3rem 0 0; color:var(--slate-soft); font-size:.97rem}

/* contact detail blocks -------------------------------------------------- */
.details{margin-top:clamp(24px,3vw,36px)}
.detail{padding:1.35rem 0; border-top:1px solid var(--line)}
.detail:last-child{border-bottom:1px solid var(--line)}
.detail .label{
  display:block; font-size:.65rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sage); margin-bottom:.42rem;
}
.detail p{margin:0; font-size:1rem}

/* map -------------------------------------------------------------------- */
.map{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  aspect-ratio:16/10; background:var(--sand-deep);
}
.map iframe{width:100%; height:100%; border:0; display:block}

/* forms ------------------------------------------------------------------ */
.formcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3.2vw,40px);
}
form{display:grid; gap:1.3rem}
fieldset{border:none; padding:0; margin:0; display:grid; gap:.65rem}
legend, .fieldlabel{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-soft); padding:0; margin-bottom:.2rem;
}
label{display:block; font-size:.85rem; font-weight:600; letter-spacing:-.004em; margin-bottom:.38rem}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--slate);
  background:var(--sand); border:1px solid var(--line); border-radius:var(--r);
  padding:.7em .8em; transition:border-color .14s ease, box-shadow .14s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--green); box-shadow:0 0 0 3px rgba(200,156,61,.30);
}
input:hover,select:hover,textarea:hover{border-color:var(--blue)}
textarea{min-height:120px; resize:vertical}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media(max-width:560px){.field-2{grid-template-columns:1fr}}
.choices{display:grid; gap:.5rem}
.choices label{
  display:flex; gap:.65rem; align-items:flex-start; font-weight:400; font-size:.98rem; margin:0;
  padding:.35rem 0; cursor:pointer;
}
input[type=checkbox],input[type=radio]{
  accent-color:var(--blue); width:18px; height:18px; flex:none; margin-top:.22rem; cursor:pointer;
}
.hint{font-size:.82rem; color:var(--ink-faint); margin:.32rem 0 0}
.req{color:var(--blue); font-weight:700}
.privacy-note{
  margin:0; font-size:.88rem; color:var(--slate-soft);
  background:var(--sand); border-left:3px solid var(--sage); padding:.9rem 1.1rem; border-radius:0 var(--r) var(--r) 0;
}

/* callout ---------------------------------------------------------------- */
.callout{
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--sage);
  border-radius:var(--r); padding:clamp(22px,2.8vw,32px);
}
.callout h3{margin-bottom:.5rem}
.callout p:last-child{margin-bottom:0}

/* CTA band --------------------------------------------------------------- */
.ctaband{background:var(--slate); color:var(--sand); padding:clamp(52px,6vw,84px) 0; text-align:center}
.ctaband h2{max-width:22ch; margin:0 auto}
.ctaband p{max-width:56ch; margin:1.1rem auto 0; color:rgba(246,242,235,.78)}
.ctaband .cta-row{justify-content:center}

/* footer ----------------------------------------------------------------- */
.sitefoot{background:var(--sand-deep); border-top:1px solid var(--line); padding:clamp(40px,5vw,60px) 0 2rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,52px)}
.sitefoot h4{font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--sage); margin-bottom:.85rem}
.sitefoot ul{list-style:none; padding:0; margin:0}
.sitefoot li{margin-bottom:.5rem; font-size:.93rem}
.sitefoot a{color:var(--slate); text-decoration:none}
.sitefoot a:hover{color:var(--blue); text-decoration:underline}
.sitefoot address{font-style:normal; font-size:.93rem; color:var(--slate-soft); line-height:1.7}
.foot-base{
  margin-top:clamp(30px,4vw,46px); padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.82rem; color:var(--ink-faint);
}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* motion ----------------------------------------------------------------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.rv.on{opacity:1; transform:none}
.post{transform:scaleY(0); transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.rig.on .post{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.post{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* print ------------------------------------------------------------------ */
@media print{
  .masthead,.ctaband,.navtoggle{display:none}
  body{background:#fff; font-size:11pt}
}

/* ─── refinement pass ───────────────────────────────────────────────────── */
/* Headings wrap on sense rather than on width, so no line ends on a stray
   one-word orphan. Supported browsers only; harmless elsewhere. */
h1,h2{text-wrap:balance}
h3{text-wrap:balance}

/* Section headers get a hairline above them, which reads as deliberate
   structure rather than sections just floating in whitespace. */
.head-split{position:relative; padding-top:clamp(20px,2.4vw,30px)}
.head-split::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:var(--line);
}
.sect-dark .head-split::before{background:rgba(246,242,235,.22)}
.banner .head-split{padding-top:0}
.banner .head-split::before{display:none}

/* Crisper optical alignment on the alternating bands */
.sect-deep + .sect-deep{padding-top:0}

/* Numerals line up in tables of steps, prices, phone numbers */
.steps li::before,.pillar-n,.card-num,.foot-base{font-variant-numeric:tabular-nums}

/* Links inside body copy get a precise underline rather than the default */
main p a:not(.btn){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:rgba(19,59,58,.4);
  transition:text-decoration-color .14s ease;
}
main p a:not(.btn):hover{text-decoration-color:currentColor}

/* Selection picks up the palette instead of the browser default blue */
::selection{background:rgba(200,156,61,.30); color:var(--green)}

/* ─── brand additions ───────────────────────────────────────────────────── */

/* The scaffolding rig mirrors the logo mark: five steps fading from the deep
   green through gold to pale. Individual bar colours are set in site.js by
   interpolating across these five stops. */
.rig-legend{
  display:flex; align-items:center; gap:.6rem; margin-top:1rem;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-soft);
}
.sect-dark .rig-legend{color:var(--gold-mid)}

/* Vendor number, repeated where credibility matters */
.vendor-inline{
  display:inline-flex; align-items:baseline; gap:.5rem;
  background:var(--gold); color:var(--green);
  font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  padding:.5em .85em; border-radius:var(--r-sm); font-size:.95rem;
}
.vendor-inline span{
  font-size:.63rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; opacity:.8;
}
.sect-dark .vendor-inline{background:var(--gold); color:var(--green)}
.sitefoot .vendor-inline{margin-top:.9rem}

/* Photo slots. Each carries the subject brief so whoever sources the image
   knows exactly what to look for. */
.photo{
  background:var(--cream-deep); border:1px dashed var(--line);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; color:var(--green-soft);
  font-size:.85rem; line-height:1.55; aspect-ratio:4/3;
}
.photo strong{display:block; color:var(--green); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:.5rem}
.photo-wide{aspect-ratio:16/9}
.photo-tall{aspect-ratio:3/4}
.card .photo{margin-bottom:1.1rem; aspect-ratio:16/10}

.media-split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center; margin-top:clamp(36px,5vw,56px);
}
.media-split.flip > :first-child{order:2}
@media(max-width:820px){
  .media-split{grid-template-columns:1fr}
  .media-split.flip > :first-child{order:0}
}

/* Gold rule used to separate major statements */
.goldrule{border:none; border-top:3px solid var(--gold); width:56px; margin:1.4rem 0}
.sect-dark .goldrule{border-top-color:var(--gold-mid)}

/* Real photography occupying a photo slot. Keeps the slot's aspect ratio so
   grids stay aligned, crops with object-fit rather than distorting. */
.photo-real{padding:0;border:none;background:var(--cream-deep);overflow:hidden;position:relative}
.photo-real img{width:100%;height:100%;object-fit:cover;display:block}