/* ============================================================
   THE CARE LEAGUE — global stylesheet
   ============================================================ */

:root{
  --ink:#0A2318;          /* deep forest green — primary brand */
  --ink-2:#123122;        /* lifted green for cards on dark */
  --ink-3:#1B412D;        /* hairline / border on dark */
  --gold:#C39A4B;         /* brand gold */
  --gold-lt:#DFC084;      /* gold for small text on dark */
  --cream:#FAF7F0;        /* page background */
  --sand:#EFE9DC;         /* alt band background */
  --line:#DDD3C0;         /* hairline on light */
  --body:#3A3830;         /* body copy on light */
  --muted:#6E6858;

  /* ---- TYPEFACES ----------------------------------------------------
     Matched to preview.thecareleague.com. That site called three LOCAL
     macOS fonts (Bodoni 72, Iowan Old Style, Arial Bold), so each stack
     below asks for the Apple font FIRST, then falls back to a web font
     that looks nearly identical for everyone else.
       --display : big headings          Bodoni 72   -> Bodoni Moda
       --serif   : body copy, pull-quotes Iowan Old Style -> Source Serif 4
       --sans    : nav, buttons, labels   Arial Bold  (universal already)
     -------------------------------------------------------------------- */
  --display:"Bodoni 72","Bodoni Moda",Didot,"Playfair Display",Georgia,serif;
  --serif:"Iowan Old Style","Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,"Helvetica Neue",sans-serif;

  --max:1180px;
  --gut:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--ink);margin:0 0 .5em;line-height:1.12;letter-spacing:-.005em}
h4{font-family:var(--sans);font-weight:700;color:var(--ink);margin:0 0 .5em;line-height:1.3}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem)}
h4{font-size:1.05rem;letter-spacing:.01em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.6;color:var(--body)}

.eyebrow{
  font-family:var(--sans);font-size:.71rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.1rem;display:block;
}
.eyebrow.on-dark{color:var(--gold-lt)}
.serif-em{font-style:italic;color:var(--gold)}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-size:.79rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:1.05em 2em;border:1px solid var(--gold);
  background:var(--gold);color:var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  cursor:pointer;
}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--ink)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn.dark:hover{background:transparent;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(10,35,24,.97);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--ink-3);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{width:38px;height:38px;object-fit:contain}
.brand span{
  font-family:var(--display);font-size:1.12rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  font-size:.79rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:#CFCFC4;text-decoration:none;transition:color .16s ease;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links .btn{padding:.85em 1.5em;font-size:.72rem;color:var(--ink)}
.nav-links .btn:hover{color:var(--gold)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--ink-3);
  color:var(--cream);padding:9px 13px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;font-family:var(--sans);
}
@media(max-width:940px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:76px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--ink-3);
    padding:8px var(--gut) 26px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--ink-3);font-size:.86rem}
  .nav-links .btn{margin-top:18px;justify-content:center;border-bottom:1px solid var(--gold)}
}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,118px) 0}
section.tight{padding:clamp(48px,6vw,80px) 0}
.dark{background:var(--ink);color:#D6D6CB}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.dark h4{color:var(--cream)}
.dark .lead{color:#C6C6BA}
.alt{background:var(--sand)}

.sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,62px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- hero ---------- */
.hero{
  background:var(--ink);color:#D6D6CB;
  padding:clamp(72px,11vw,140px) 0 clamp(64px,9vw,120px);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-14%;top:-18%;
  width:min(620px,72vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(195,154,75,.16),transparent 66%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;max-width:900px}
.hero h1{color:var(--cream)}
.hero .lead{color:#C6C6BA;max-width:660px}
.hero-crest{width:88px;margin-bottom:28px;opacity:.95}
.hero-strip{
  border-top:1px solid var(--ink-3);margin-top:clamp(44px,6vw,72px);
  padding-top:26px;display:flex;flex-wrap:wrap;gap:12px 34px;
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-lt);
}

/* page hero (interior pages) */
.page-hero{background:var(--ink);color:#C6C6BA;padding:clamp(58px,8vw,96px) 0 clamp(44px,6vw,72px)}
.page-hero h1{color:var(--cream);font-size:clamp(2.2rem,5.2vw,3.7rem)}
.page-hero .lead{color:#C6C6BA;max-width:700px;margin-bottom:0}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);
  padding:clamp(24px,3vw,34px);
}
.card h3{margin-bottom:.35em}
.card .kicker{
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:1rem;
}
.dark .card{background:var(--ink-2);border-color:var(--ink-3)}
.dark .card p{color:#BEBEB2}

.num{
  font-family:var(--display);font-size:2.4rem;line-height:1;
  color:var(--gold);opacity:.55;display:block;margin-bottom:.35em;
}

/* service list */
.svc-list{list-style:none;margin:0;padding:0}
.svc-list li{
  position:relative;padding:0 0 0 20px;margin-bottom:.5em;
  font-size:.94rem;line-height:1.5;
}
.svc-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--gold);border-radius:50%;
}
.dark .svc-list li{color:#C6C6BA}

/* two-column service list inside a card */
.svc-list.cols{columns:2;column-gap:26px}
.svc-list.cols li{break-inside:avoid}
@media(max-width:520px){.svc-list.cols{columns:1}}

/* ---------- split (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split img{width:100%;height:100%;object-fit:cover;max-height:560px}

/* ---------- quote ---------- */
.quote{
  font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1.32;color:var(--cream);font-style:italic;margin:0 0 1rem;
}
.quote-mark{font-family:var(--display);font-size:3.4rem;color:var(--gold);line-height:.6;display:block;margin-bottom:.2em}

.tcard{background:#fff;border:1px solid var(--line);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column}
.tcard blockquote{
  margin:0 0 1.4rem;font-family:var(--serif);font-size:1.14rem;
  line-height:1.5;color:var(--ink);font-style:italic;flex:1;
}
.tcard cite{
  font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:78px 1fr;gap:clamp(16px,3vw,34px);
  padding:clamp(24px,3.4vw,36px) 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.dark .step{border-color:var(--ink-3)}
.step-n{font-family:var(--display);font-size:1.9rem;color:var(--gold);line-height:1}
.step h3{margin-bottom:.3em}
.step p{margin:0}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:8px}}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px);align-items:stretch}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{
  background:#fff;border:1px solid var(--line);
  padding:clamp(28px,3.2vw,38px);display:flex;flex-direction:column;
}
.tier.feature{background:var(--ink);border-color:var(--gold);color:#C6C6BA;position:relative}
.tier.feature h3,.tier.feature .price{color:var(--cream)}
.tier.feature .svc-list li{color:#C6C6BA}
.tier .flag{
  position:absolute;top:0;left:0;background:var(--gold);color:var(--ink);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 14px;
}
.tier.feature{padding-top:clamp(48px,5vw,58px)}
.price{font-family:var(--display);font-size:2.7rem;color:var(--ink);line-height:1;margin:.4em 0 .1em}
.price small{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.tier.feature .price small{color:#A9A99C}
.tier .btn{margin-top:auto;justify-content:center}
.tier .svc-list{margin:1.4rem 0 2rem}

/* ---------- commitment strip ---------- */
.commit{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.2vw,28px)}
@media(max-width:900px){.commit{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.commit{grid-template-columns:1fr}}
.commit div h4{color:var(--gold-lt);letter-spacing:.13em;text-transform:uppercase;font-size:.78rem;margin-bottom:.6em}
.commit div p{font-size:.92rem;margin:0;color:#BEBEB2}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);text-align:center}
.cta-band h2{color:var(--cream);max-width:18ch;margin-left:auto;margin-right:auto}
.cta-band p,.cta-band .lead{color:#C6C6BA}
.cta-band .eyebrow{color:var(--gold-lt)}
.cta-band .btn-row{justify-content:center}

/* ---------- contact ---------- */
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:14px 0;border-bottom:1px solid var(--ink-3);font-size:1rem}
.contact-list a{color:var(--gold-lt);text-decoration:none}
.contact-list a:hover{color:var(--gold)}
.contact-list .lbl{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.dark .contact-list .lbl{color:#8B8B7E}

/* form */
.field{margin-bottom:18px}
.field label{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:.98rem;color:var(--body);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
.field textarea{min-height:130px;resize:vertical}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#9A9A8D;padding:clamp(52px,7vw,84px) 0 34px;border-top:1px solid var(--ink-3)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,4vw,52px)}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.foot-brand img{width:52px}
.foot-brand span{font-family:var(--display);font-size:1.15rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cream)}
.site-foot h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.7em;font-size:.92rem}
.site-foot a{color:#9A9A8D;text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.foot-bottom{
  border-top:1px solid var(--ink-3);margin-top:clamp(34px,5vw,56px);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:.76rem;letter-spacing:.06em;
}

/* utility */
.mb0{margin-bottom:0}
.center{text-align:center}
.gold{color:var(--gold)}


/* ============================================================
   EDITORIAL PHOTOGRAPHY
   ============================================================ */

/* full-bleed image band with text laid over it */
.figure-band{
  position:relative;min-height:clamp(360px,52vw,600px);
  display:flex;align-items:flex-end;
  background:var(--ink) center/cover no-repeat;
  padding:0;overflow:hidden;
}
.figure-band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,35,24,.92) 0%,rgba(10,35,24,.55) 45%,rgba(10,35,24,.15) 100%);
}
.figure-band .wrap{position:relative;z-index:1;padding-top:clamp(48px,7vw,90px);padding-bottom:clamp(40px,6vw,74px);width:100%}
.figure-band h2{color:var(--cream);max-width:18ch;margin-bottom:.35em}
.figure-band p{color:#D6D6CB;max-width:56ch;margin-bottom:0}
.figure-band .eyebrow{color:var(--gold-lt)}

/* left-weighted variant so the subject on the right stays visible */
.figure-band.subject-right{background-position:right center}
.figure-band.subject-right::before{
  background:linear-gradient(to right,rgba(10,35,24,.94) 0%,rgba(10,35,24,.78) 42%,rgba(10,35,24,.20) 78%,rgba(10,35,24,.05) 100%);
}
.figure-band.subject-right{align-items:center}
.figure-band.subject-right .wrap>div{max-width:520px}
@media(max-width:700px){
  .figure-band.subject-right::before{
    background:linear-gradient(to top,rgba(10,35,24,.94) 0%,rgba(10,35,24,.7) 55%,rgba(10,35,24,.35) 100%);
  }
  .figure-band.subject-right{align-items:flex-end}
}

/* hero with a photograph behind it */
.hero.has-photo,.page-hero.has-photo{background:var(--ink) center 30%/cover no-repeat;position:relative}
.hero.has-photo::before,.page-hero.has-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(105deg,rgba(10,35,24,.96) 0%,rgba(10,35,24,.88) 42%,rgba(10,35,24,.55) 72%,rgba(10,35,24,.35) 100%);
}
.hero.has-photo::after{display:none}
.page-hero.has-photo .wrap{position:relative;z-index:1}
.hero.has-photo .hero-inner{position:relative;z-index:1}
@media(max-width:760px){
  .hero.has-photo::before,.page-hero.has-photo::before{
    background:linear-gradient(to top,rgba(10,35,24,.97) 0%,rgba(10,35,24,.9) 55%,rgba(10,35,24,.6) 100%);
  }
}

/* framed photo inside a split block */
.photo-frame{position:relative}
.photo-frame img{width:100%;height:100%;object-fit:cover;max-height:600px}
.photo-frame figcaption{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;
}
.dark .photo-frame figcaption{color:#8B8B7E}