/* ==========================================================
   Your Running Realtor · Beth Graham
   Official BHHS palette:
   Black #000000 · White #FFFFFF · Cabernet #670038 · Spruce #004B45
   Cobalt #005D7D · Espresso #2A2223 · Earth #72595E · Dove #AA979C
   Pearl #F5F1F2 · Rose #ECE3E5 · Blush #C299AF
   ========================================================== */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --cabernet:#670038;
  --spruce:#004B45;
  --cobalt:#005D7D;
  --espresso:#2A2223;
  --earth:#72595E;
  --dove:#AA979C;
  --pearl:#F5F1F2;
  --rose:#ECE3E5;
  --blush:#C299AF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}
body{
  font-family:'Lora',Georgia,serif;
  background:var(--pearl);
  color:var(--espresso);
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3,.display{
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
  line-height:1.02;
  color:var(--cabernet);
}
a{color:var(--cobalt);}
a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:2px;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* ---------- top bar ---------- */
.topbar{
  background:var(--espresso);
  color:var(--rose);
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;gap:16px;flex-wrap:wrap;}
.topbar a{color:var(--rose);text-decoration:none;}
.topbar a:hover{color:var(--white);}

/* ---------- header / nav ---------- */
header.site{
  background:var(--pearl);
  border-bottom:1px solid var(--rose);
  position:sticky;top:0;z-index:50;
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:20px;flex-wrap:wrap;}
.logo{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:26px;letter-spacing:.02em;color:var(--espresso);text-decoration:none;text-transform:uppercase;line-height:1;}
.logo em{font-style:normal;color:var(--cabernet);}
nav.main{display:flex;gap:26px;flex-wrap:wrap;}
nav.main a{
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--espresso);
  padding:4px 0;border-bottom:2px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--blush);color:var(--cabernet);}
nav.main a[aria-current="page"]{border-bottom-color:var(--cabernet);color:var(--cabernet);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:15px 30px;border-radius:3px;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--cabernet);color:var(--white);box-shadow:0 4px 0 var(--espresso);}
.btn-primary:hover{box-shadow:0 6px 0 var(--espresso);}
.btn-ghost{border:2px solid var(--cobalt);color:var(--cobalt);margin-left:14px;}
.btn-ghost:hover{background:var(--cobalt);color:var(--white);}
.btn-light{background:var(--white);color:var(--cabernet);box-shadow:0 4px 0 rgba(0,0,0,.35);}

/* ---------- hero (home) ---------- */
.hero{padding:84px 0 72px;position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;}
.eyebrow{
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt);margin-bottom:18px;display:block;
}
.hero h1{font-size:clamp(52px,7.5vw,96px);font-weight:800;text-transform:uppercase;letter-spacing:.005em;}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--cabernet);}
.hero p.lede{margin:26px 0 34px;font-size:19px;max-width:52ch;color:var(--earth);}

/* ---------- race bib card ---------- */
.bib-card{
  background:var(--white);
  border:2px solid var(--espresso);
  border-radius:10px;
  padding:30px 28px 26px;
  text-align:center;
  box-shadow:8px 8px 0 var(--blush);
  position:relative;
  transform:rotate(1.5deg);
  max-width:340px;
  justify-self:center;
}
.bib-card::before,.bib-card::after,
.bib-card .pin-l,.bib-card .pin-r{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--pearl);border:2px solid var(--espresso);
}
.bib-card::before{top:10px;left:10px;}
.bib-card::after{top:10px;right:10px;}
.bib-card .pin-l{bottom:10px;left:10px;}
.bib-card .pin-r{bottom:10px;right:10px;}
.bib-card .race{
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dove);
}
.bib-card .number{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:96px;line-height:1;color:var(--cabernet);margin:6px 0 2px;
}
.bib-card .name{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:30px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--espresso);
}
.bib-card .tag{font-size:14px;font-style:italic;color:var(--earth);margin-top:6px;}
.bib-card .stripe{
  margin:16px -28px -26px;background:var(--cabernet);color:var(--rose);
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;padding:10px 0;border-radius:0 0 8px 8px;
}

/* ---------- credentials strip ---------- */
.creds{background:var(--cabernet);color:var(--rose);padding:22px 0;}
.creds ul{
  list-style:none;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;
}
.creds li{display:flex;align-items:center;gap:10px;}
.creds li::before{content:"";width:8px;height:8px;background:var(--blush);border-radius:50%;flex-shrink:0;}

/* ---------- the route (signature) ---------- */
.route{position:relative;padding:40px 0 0;}
.route::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  border-left:3px dashed var(--blush);z-index:0;
}
.mile{position:relative;z-index:1;padding:72px 0;}
.mile-marker{
  width:88px;height:88px;border-radius:50%;
  background:var(--white);border:3px solid var(--cabernet);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:0 auto 40px;box-shadow:0 0 0 8px var(--pearl);
  font-family:'Big Shoulders Display',sans-serif;
}
.mile-marker .mm-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dove);}
.mile-marker .mm-num{font-size:38px;font-weight:800;color:var(--cabernet);line-height:1;}
.mile h2{font-size:clamp(38px,4.5vw,58px);font-weight:800;text-transform:uppercase;text-align:center;margin-bottom:14px;}
.mile .sub{
  text-align:center;color:var(--earth);font-style:italic;font-size:18px;
  max-width:60ch;margin:0 auto 44px;
}
.mile-cta{text-align:center;margin-top:40px;position:relative;}

/* ---------- about grid ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;position:relative;background:var(--pearl);}
.about-grid .col p{margin-bottom:18px;}
.about-grid strong{color:var(--cabernet);}
.photo-slot{
  background:var(--white);border:2px dashed var(--blush);border-radius:8px;
  min-height:340px;display:flex;align-items:center;justify-content:center;
  color:var(--dove);font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:14px;
  text-align:center;padding:20px;
}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;background:var(--pearl);}
.card{
  background:var(--white);border:1px solid var(--rose);border-radius:8px;
  padding:32px 28px;border-top:5px solid var(--cabernet);
}
.card.spruce{border-top-color:var(--spruce);}
.card.cobalt{border-top-color:var(--cobalt);}
.card h3{font-size:26px;font-weight:800;text-transform:uppercase;margin-bottom:12px;}
.card.spruce h3{color:var(--spruce);}
.card.cobalt h3{color:var(--cobalt);}
.card p{font-size:16px;color:var(--earth);}
.card .pace{
  margin-top:18px;font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cabernet);
}
.card.spruce .pace{color:var(--spruce);}
.card.cobalt .pace{color:var(--cobalt);}

/* ---------- military (spruce) ---------- */
.military{background:var(--spruce);color:var(--rose);position:relative;z-index:1;padding:88px 0;}
.military .mile-marker{border-color:var(--blush);box-shadow:0 0 0 8px var(--spruce);background:#00332F;}
.military .mile-marker .mm-label{color:var(--dove);}
.military .mile-marker .mm-num{color:var(--blush);}
.military h2{color:var(--white);}
.military .sub{color:var(--blush);}
.military-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.military p{margin-bottom:18px;}
.military strong{color:var(--white);}
.mil-points{list-style:none;display:grid;gap:16px;}
.mil-points li{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-left:4px solid var(--blush);border-radius:6px;padding:16px 20px;font-size:16px;
}
.mil-points li strong{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:15px;margin-bottom:4px;}

/* ---------- community ---------- */
.community-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;background:var(--pearl);}
.event{background:var(--white);border:1px solid var(--rose);border-radius:8px;padding:26px 22px;text-align:center;border-bottom:4px solid var(--blush);}
.event h3{font-size:21px;font-weight:800;text-transform:uppercase;margin-bottom:8px;}
.event p{font-size:14.5px;color:var(--earth);}
.community-note{text-align:center;margin-top:34px;font-style:italic;color:var(--earth);position:relative;background:var(--pearl);}

/* ---------- finish line ---------- */
.finish{position:relative;z-index:1;padding:96px 0 88px;background:var(--pearl);}
.finish-tape{
  height:26px;
  background:repeating-conic-gradient(var(--black) 0% 25%, var(--white) 0% 50%) 0 0/26px 26px;
  border-top:3px solid var(--black);border-bottom:3px solid var(--black);
  margin-bottom:72px;
}
.finish h2{font-size:clamp(44px,6vw,74px);font-weight:800;text-transform:uppercase;text-align:center;}
.finish .sub{text-align:center;color:var(--earth);font-style:italic;font-size:18px;max-width:58ch;margin:14px auto 44px;}
.contact-panel{
  max-width:680px;margin:0 auto;background:var(--white);border:1px solid var(--rose);
  border-radius:10px;padding:44px 40px;text-align:center;box-shadow:0 10px 30px rgba(103,0,56,.10);
}
.contact-panel .big-cta{margin-bottom:26px;}
.contact-lines{display:grid;gap:8px;font-size:17px;}
.contact-lines span{font-family:'Big Shoulders Display',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--dove);display:block;}

/* ---------- page hero (subpages) ---------- */
.page-hero{background:var(--cabernet);color:var(--rose);padding:76px 0 64px;}
.page-hero.spruce{background:var(--spruce);}
.page-hero.cobalt{background:var(--cobalt);}
.page-hero .eyebrow{color:var(--blush);}
.page-hero h1{color:var(--white);font-size:clamp(46px,6.5vw,84px);font-weight:800;text-transform:uppercase;}
.page-hero p.lede{margin-top:20px;font-size:19px;max-width:60ch;color:var(--rose);}

/* ---------- generic sections ---------- */
.section{padding:76px 0;}
.section.alt{background:var(--white);}
.section h2{font-size:clamp(34px,4vw,50px);font-weight:800;text-transform:uppercase;margin-bottom:16px;}
.section .kicker{
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt);display:block;margin-bottom:12px;
}
.section p{margin-bottom:18px;max-width:72ch;}
.section strong{color:var(--cabernet);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}

/* ---------- split-course timeline (services/military pages) ---------- */
.course{list-style:none;position:relative;max-width:760px;margin:0 auto;}
.course::before{content:"";position:absolute;top:6px;bottom:6px;left:31px;border-left:3px dashed var(--blush);}
.course li{position:relative;padding:0 0 40px 96px;}
.course li:last-child{padding-bottom:0;}
.course .step{
  position:absolute;left:0;top:0;width:64px;height:64px;border-radius:50%;
  background:var(--white);border:3px solid var(--cabernet);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Big Shoulders Display',sans-serif;box-shadow:0 0 0 6px var(--pearl);
}
.course .step .s-label{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dove);}
.course .step .s-num{font-size:26px;font-weight:800;color:var(--cabernet);line-height:1;}
.course h3{font-size:24px;font-weight:800;text-transform:uppercase;margin-bottom:6px;}
.course p{color:var(--earth);font-size:16px;max-width:60ch;}
.course.spruce::before{border-left-color:var(--spruce);}
.course.spruce .step{border-color:var(--spruce);}
.course.spruce .step .s-num{color:var(--spruce);}
.course.spruce h3{color:var(--spruce);}

/* ---------- stat chips ---------- */
.chips{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 6px;}
.chip{
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--rose);color:var(--cabernet);
  border:1px solid var(--blush);border-radius:999px;padding:8px 18px;
}

/* ---------- pull quote ---------- */
.pull{
  border-left:5px solid var(--cabernet);background:var(--white);
  padding:28px 32px;border-radius:0 8px 8px 0;max-width:720px;margin:34px 0;
  font-size:20px;font-style:italic;color:var(--espresso);
}
.pull .who{
  display:block;margin-top:12px;font-style:normal;
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dove);
}

/* ---------- CTA band (subpage footer CTA) ---------- */
.cta-band{background:var(--cabernet);color:var(--white);padding:64px 0;text-align:center;}
.cta-band.spruce{background:var(--spruce);}
.cta-band h2{color:var(--white);font-size:clamp(34px,4.5vw,54px);font-weight:800;text-transform:uppercase;margin-bottom:12px;}
.cta-band p{color:var(--rose);font-style:italic;margin-bottom:30px;}
.cta-band .btn-ghost{border-color:var(--white);color:var(--white);}
.cta-band .btn-ghost:hover{background:var(--white);color:var(--cabernet);}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.form-panel{background:var(--white);border:1px solid var(--rose);border-radius:10px;padding:38px 34px;}
.form-panel label{
  display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--earth);
  margin:18px 0 6px;
}
.form-panel label:first-of-type{margin-top:0;}
.form-panel input,.form-panel select,.form-panel textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--dove);border-radius:5px;
  font-family:'Lora',Georgia,serif;font-size:16px;background:var(--pearl);color:var(--espresso);
}
.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus{
  outline:3px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt);
}
.form-panel .btn{margin-top:24px;width:100%;text-align:center;border:0;cursor:pointer;font-size:17px;}
.info-stack{display:grid;gap:18px;}
.info-card{background:var(--white);border:1px solid var(--rose);border-left:5px solid var(--cabernet);border-radius:8px;padding:22px 24px;}
.info-card.cobalt{border-left-color:var(--cobalt);}
.info-card.spruce{border-left-color:var(--spruce);}
.info-card h3{font-size:20px;font-weight:800;text-transform:uppercase;margin-bottom:6px;}
.info-card p{font-size:16px;color:var(--earth);margin:0;}
.map-slot{
  background:var(--white);border:2px dashed var(--blush);border-radius:8px;
  min-height:220px;display:flex;align-items:center;justify-content:center;
  color:var(--dove);font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:13px;text-align:center;padding:16px;
}

/* ---------- footer ---------- */
footer{background:var(--espresso);color:var(--dove);padding:52px 0 40px;font-size:14px;}
footer .wrap{display:grid;gap:22px;}
footer .foot-brand{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;color:var(--rose);}
footer .foot-brand em{font-style:normal;color:var(--blush);}
footer p{max-width:90ch;line-height:1.7;}
footer nav{display:flex;gap:20px;flex-wrap:wrap;}
footer nav a{color:var(--rose);text-decoration:none;font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;}
footer nav a:hover{color:var(--white);}
footer .legal{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}
.eho{display:flex;align-items:center;gap:10px;font-family:'Big Shoulders Display',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;}
  .bib-card{justify-self:start;transform:rotate(0deg);}
  .about-grid,.military-grid,.two-col,.contact-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .community-grid{grid-template-columns:repeat(2,1fr);}
  .route::before{left:24px;}
  .mile-marker{margin-left:0;}
  .mile h2,.mile .sub{text-align:left;}
  .mile .sub{margin-left:0;}
  .mile-cta{text-align:left;}
  .btn-ghost{margin-left:0;margin-top:12px;}
}
@media (max-width:560px){
  .community-grid{grid-template-columns:1fr;}
  .creds ul{flex-direction:column;gap:10px;}
  .hero{padding:56px 0 48px;}
  .hero h1{font-size:52px;}
  .course li{padding-left:84px;}
}

/* ---------- photos ---------- */
.photo{
  width:100%;height:auto;border-radius:8px;
  border:1px solid var(--rose);
  box-shadow:8px 8px 0 var(--blush);
  display:block;
}

/* ---------- captioned figures ---------- */
figure.photo-fig{margin:34px 0 0;}
figure.photo-fig img{
  width:100%;height:auto;border-radius:8px;
  border:1px solid var(--rose);
  box-shadow:8px 8px 0 var(--blush);
  display:block;
}
figure.photo-fig figcaption{
  margin-top:18px;font-size:14.5px;font-style:italic;color:var(--earth);
  max-width:70ch;
}
