/* ============================================================================
   Shannon Malseed — Mental Fitness Coach
   Shared design system. Warm editorial aesthetic.
   Cream + terracotta + sage green · Playfair Display (serif) + DM Sans (sans).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root{
  --bg:#fffcf3;          /* cream base */
  --bg2:#ffffff;         /* white cards */
  --bg-warm:#fdf0df;     /* warm section */
  --bg-taupe:#e4d6cd;    /* taupe section */
  --bg-soft:#f7f7f8;     /* cool light section */

  --accent:#7D251C;      /* terracotta */
  --accent-hover:#5e1c15;
  --green:#2D3B2D;       /* deep sage (header / dark bands) */
  --green-mid:#3d5240;
  --green-light:#4a6b4f;

  --ink:#2c2c2c;         /* headings */
  --body:#474747;        /* body text */
  --muted:#6f6f6f;       /* secondary text */
  --line:#e8e1d6;        /* warm hairline */
  --line2:#eae6e1;       /* card border */

  --gold:#7D251C;        /* legacy alias → accent (used by inline styles) */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --maxw:1100px;
  --readw:720px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.read{ max-width:var(--readw); margin-left:auto; margin-right:auto; }

/* ---------- TYPE HELPERS ---------- */
.eyebrow{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.kicker{
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px; font-weight:600;
}
.serif{ font-family:var(--serif); }
.gold{ color:var(--accent); }
.ital{ font-style:italic; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; color:var(--ink); letter-spacing:0; }
h1{ font-size:clamp(40px,6vw,72px); line-height:1.18; }
h2{ font-size:clamp(28px,4vw,44px); line-height:1.22; }
h3{ font-size:clamp(21px,3vw,27px); line-height:1.28; }

p{ font-size:17px; }
.lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(21px,2.8vw,30px); line-height:1.4; color:var(--accent);
  font-weight:400;
}
.sub{
  font-size:clamp(17px,2.2vw,21px); line-height:1.55; color:var(--body);
  font-weight:400;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; box-shadow:none;
  transition:background .35s ease, box-shadow .35s ease;
}
/* fades in once you scroll past the hero so links never get lost over cream */
.nav.scrolled{
  background:#241610;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{
  font-family:var(--serif); font-size:20px; letter-spacing:.01em;
  text-decoration:none; color:#fff; white-space:nowrap;
}
.brand b{ font-weight:500; }
.brand span{ color:var(--bg-taupe); }
.navlinks{ display:flex; align-items:center; gap:32px; }
.navlinks a{
  text-decoration:none; color:rgba(255,255,255,.78); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  transition:color .15s ease;
}
.navlinks a:hover, .navlinks a.active{ color:#fff; }
.navlinks a.active{ color:var(--bg-taupe); }
.nav .btn{ padding:12px 24px; font-size:11.5px; }

.navtoggle{ display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px; }
.navtoggle svg{ width:24px; height:24px; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; cursor:pointer; border:0; border-radius:2px;
  font-family:var(--sans); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  color:#fff; background:var(--accent); padding:18px 40px;
  transition:background .25s ease, transform .12s ease;
}
.btn:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.btn-ghost{
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); padding:17px 39px;
}
.btn-ghost:hover{ background:var(--accent); color:#fff; }
.btn-block{ display:block; width:100%; text-align:center; }
.btns{ display:flex; flex-wrap:wrap; gap:16px; }
.btns.center{ justify-content:center; }

/* ---------- SECTIONS ---------- */
section{ padding:clamp(60px,9vw,100px) 0; background:var(--bg); }
section.tight{ padding:clamp(44px,6vw,68px) 0; }
/* warm editorial alternation */
section:nth-of-type(even){ background:var(--bg-warm); }
.center{ text-align:center; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 50px; }
.section-head p{ color:var(--muted); margin-top:16px; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--green);
  text-align:center; padding:clamp(88px,13vw,140px) 0 clamp(72px,10vw,104px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% -10%, rgba(125,37,28,.28) 0%, transparent 60%);
  pointer-events:none;
}
/* ---- Hero background video ---- */
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center; z-index:0; pointer-events:none;
  filter:saturate(.55);
}
/* face video (about page) keeps the original framing that centres the eyes */
.hero-bg.face{ object-position:center 28%; }
.hero-video::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* darken + rich dark brown tint to match the site vibe and keep text legible */
  background:
    linear-gradient(180deg, rgba(18,11,7,.80) 0%, rgba(18,11,7,0) 30%),
    linear-gradient(180deg, rgba(48,32,21,.62) 0%, rgba(26,17,10,.86) 100%),
    rgba(90,28,20,.2);
}
/* homepage cycling hero: lighter wash + slightly brighter footage so the riding reads clearly.
   scoped with :not(.short) so the about-page face video keeps its moodier treatment */
.hero-video:not(.short) .hero-bg{ filter:saturate(.72) brightness(1.0); }
.hero-video:not(.short)::after{
  background:
    radial-gradient(115% 78% at 50% 44%, rgba(10,6,3,.60) 0%, rgba(10,6,3,0) 68%),
    linear-gradient(180deg, rgba(18,11,7,.60) 0%, rgba(18,11,7,0) 24%),
    linear-gradient(180deg, rgba(28,18,11,.12) 0%, rgba(20,13,8,.66) 100%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero .eyebrow{ color:var(--bg-taupe); }
.hero h1{
  color:#fff; margin:26px auto 0; max-width:16ch;
  font-size:clamp(42px,6.6vw,84px); line-height:1.05; letter-spacing:-.02em;
}
/* in-sentence emphasis: italic only, same ink — carries rhythm, not a highlight */
.hero h1 .ital, .hero h1 em{ font-style:italic; font-weight:400; }
/* final payoff phrase keeps one touch of taupe */
.hero h1 .gold{ color:var(--bg-taupe); font-style:italic; }
.hero .sub{ color:rgba(255,255,255,.84); margin:26px auto 0; max-width:42ch; }
.hero .btns{ margin-top:40px; }
.hero.short{ padding:clamp(72px,10vw,108px) 0; }
/* about-page video hero wants more breathing room top + bottom */
.hero-video.short{ padding:clamp(116px,16vw,180px) 0; }
.hero.short h1{ max-width:22ch; }
.hero .rlist{ color:rgba(255,255,255,.6); }
.hero .rlist b{ color:var(--bg-taupe); }
.hero .rlist .dot{ color:rgba(255,255,255,.3); }

/* ---------- STATEMENT (Jamie-Sea style: copy + photos, fully responsive) ----------
   Mobile-first. Stacked by default; photos go 3-across when there's room,
   collapse to a single vertical column when tight; side-by-side on big desktop. */
.statement .wrap{ max-width:1240px; }
.statement-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:start; }
.statement-copy .kicker{ margin-bottom:24px; }
.bigstate{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(28px,4vw,50px); line-height:1.08; color:var(--ink);
  letter-spacing:-.015em; margin-bottom:30px;
}
.bigstate-sub{
  color:var(--muted); font-size:clamp(15px,1.15vw,18px); line-height:1.55;
  margin-bottom:1.1em; max-width:54ch;
}
.bigstate-sub:last-child{ margin-bottom:0; }
.bigstate-sub strong{ color:var(--ink); font-weight:600; }
.bigstate-sub em{ font-style:italic; }

.statement-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.statement-photos .portrait{ aspect-ratio:3/4; padding:0; }
.statement-photos .portrait img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* to render black & white instead, add: filter:grayscale(1); */
}

/* tight widths (narrow half-screen + phones): show two photos side-by-side, drop the third */
@media (max-width:600px){
  .statement-photos{ grid-template-columns:1fr 1fr; gap:12px; max-width:440px; margin:0 auto; }
  .statement-photos .portrait:nth-child(3){ display:none; }
}

/* big desktop: text left, photo row right */
@media (min-width:1100px){
  .statement-grid{ grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .statement-photos .portrait:nth-child(2){ margin-top:34px; }
  .bigstate-sub{ max-width:46ch; }
}

/* ---------- PROSE ---------- */
.prose p{ color:var(--body); line-height:1.85; margin-bottom:22px; }
.prose p .hl{ color:var(--accent); font-style:italic; }
.prose .lead{ margin-bottom:26px; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ---------- CARD GRID ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--bg2); border:1px solid var(--line2);
  border-radius:10px; padding:32px 30px;
  box-shadow:0 4px 18px rgba(44,44,44,.05);
}
.card h3{ margin-bottom:12px; }
.card p{ color:var(--muted); font-size:15.5px; line-height:1.72; }
.card p strong{ color:var(--ink); font-weight:600; }
.hl-accent{ color:var(--accent); font-weight:500; }
.card .ic{
  font-family:var(--serif); font-size:30px; color:var(--accent);
  display:block; margin-bottom:14px; line-height:1;
}

/* ---------- STEP / PHASE ITEMS ---------- */
.steps{ display:flex; flex-direction:column; gap:16px; max-width:780px; margin:0 auto; }
.stepitem{
  display:flex; gap:22px; align-items:flex-start;
  background:var(--bg2); border:1px solid var(--line2); border-left:3px solid var(--accent);
  border-radius:8px; padding:24px 26px;
  box-shadow:0 4px 18px rgba(44,44,44,.05);
}
.stepitem .n{
  font-family:var(--serif); font-size:40px; line-height:1; color:var(--accent);
  font-weight:500; min-width:48px;
}
.stepitem .t b{
  font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink);
  display:block; margin-bottom:5px;
}
.stepitem .t span{ color:var(--muted); font-size:15.5px; line-height:1.68; }

/* ---------- WHO I WORK WITH (blurred dark background) ---------- */
.who-bg{ position:relative; overflow:hidden; }
.who-bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('images/who-bg.png') center/cover no-repeat;
  filter:blur(5px) brightness(.5) saturate(.95);
  transform:scale(1.08); /* hide blurred edges */
}
.who-bg::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(18,15,12,.35); /* extra depth */
}
.who-bg .wrap{ position:relative; z-index:1; }
.who-bg .kicker{ color:var(--bg-taupe); }
.who-bg .section-head h2{ color:#fff; }
.who-bg .section-head p{ color:rgba(255,255,255,.85); }
.who-bg .hl-accent{ color:var(--bg-taupe); font-weight:600; }
/* softer, translucent cards so they don't dominate the photo */
.who-bg .card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);
  box-shadow:none;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.who-bg .card p{ color:rgba(255,255,255,.8); }
.who-bg .card p strong{ color:#fff; }
.who-bg .card .ic{ color:var(--bg-taupe); }

/* ---------- CHOOSE YOUR PATH ---------- */
.pathlead{ text-align:center; max-width:640px; margin:0 auto 40px; }
.path-h{ font-size:clamp(22px,3vw,30px); }
.paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1040px; margin:0 auto; }
.path{
  background:var(--bg2); border:1px solid var(--line2); border-radius:14px;
  padding:36px 34px; display:flex; flex-direction:column;
  box-shadow:0 6px 24px rgba(44,44,44,.06);
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.path:hover{ border-color:var(--accent); box-shadow:0 12px 34px rgba(125,37,28,.1); transform:translateY(-2px); }
.path-tag{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; font-weight:600; }
.path h3{ font-size:27px; margin-bottom:12px; }
.path p{ color:var(--muted); font-size:15.5px; line-height:1.72; margin-bottom:28px; }
.path-cta{
  margin-top:auto; align-self:flex-start; color:var(--accent); font-weight:600;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--accent); padding-bottom:4px; transition:color .2s ease, border-color .2s ease;
}
.path-cta:hover{ color:var(--accent-hover); border-color:var(--accent-hover); }
.path-foot{ text-align:center; color:var(--muted); font-size:15px; margin-top:32px; }
.path-foot a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); }
.path.soon{ background:var(--bg-soft); }
.path.soon .path-tag{ color:var(--muted); }
.path.soon h3{ color:var(--ink); }
@media (max-width:860px){ .paths{ grid-template-columns:1fr; max-width:520px; } }

/* ---------- IDENTITY STATEMENT (standalone line) ---------- */
.identity-line h2{ font-size:clamp(28px,4.4vw,46px); line-height:1.25; max-width:none; margin:0 auto; }
.identity-line .read{ max-width:var(--maxw); }
section.identity-line.green-band{ background:var(--green); }
.green-band h2{ color:#fff; }
.green-band .band-red{ color:#fff; font-style:italic; }

/* ---------- WHY IT'S DIFFERENT (photo + copy) ---------- */
.different-grid{
  display:grid; grid-template-columns:0.85fr 1fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.different-photo img{
  width:100%; display:block; border-radius:14px;
  box-shadow:0 16px 40px rgba(44,44,44,.16);
}
.different-copy p{ line-height:1.72; margin-bottom:14px; }
.different-copy .lead{ line-height:1.08; margin-bottom:16px; }
@media (max-width:860px){
  .different-grid{ grid-template-columns:1fr; }
  .different-photo{ max-width:420px; margin:0 auto; }
}

/* ---------- QUOTE / TESTIMONIAL ---------- */
.quote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(23px,3.4vw,34px); line-height:1.38; color:var(--ink);
  max-width:26ch; margin:0 auto; text-align:center; font-weight:400;
}
.quote .who{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-top:28px; font-weight:600;
}
.tcard{
  background:var(--bg2); border:1px solid var(--line2);
  border-radius:10px; padding:30px 28px;
  box-shadow:0 4px 18px rgba(44,44,44,.05);
}
.tcard p{
  font-family:var(--serif); font-style:italic; font-size:18px;
  line-height:1.6; color:var(--ink); margin-bottom:18px;
}
.tcard .who{
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600;
}

/* ---------- STAT ROW ---------- */
.stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.stat{
  flex:1 1 200px; max-width:300px; text-align:center;
  background:var(--bg2); border:1px solid var(--line2); border-radius:10px; padding:30px 22px;
  box-shadow:0 4px 18px rgba(44,44,44,.05);
}
.stat b{ font-family:var(--serif); font-size:42px; color:var(--accent); display:block; line-height:1; }
.stat span{ color:var(--muted); font-size:14px; margin-top:10px; display:block; }

/* ---------- PRICING / OFFER CARD ---------- */
.offers{ display:grid; gap:24px; grid-template-columns:1fr; max-width:560px; margin-inline:auto; align-items:stretch; }
/* book-a-call line that replaced the offers section intro */
.bookfit{ font-family:var(--serif); font-size:clamp(20px,2.6vw,27px); line-height:1.4; }
.bookfit a{ color:var(--accent); text-decoration:none; border-bottom:2px solid rgba(125,37,28,.4); transition:border-color .2s; }
.bookfit a:hover{ border-bottom-color:var(--accent); }
.offer{
  background:var(--bg2);
  border:1px solid var(--line2); border-radius:12px;
  padding:38px 34px; display:flex; flex-direction:column; height:100%;
  box-shadow:0 6px 24px rgba(44,44,44,.06);
}
.offer.feature{ border:1px solid var(--accent); box-shadow:0 10px 34px rgba(125,37,28,.12); }
.offer .tag{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px; font-weight:600;
}
.offer h3{ font-size:28px; margin-bottom:8px; }
.offer .price{ font-family:var(--serif); font-size:22px; color:var(--ink); margin:6px 0 20px; }
.offer .price small{ color:var(--muted); font-size:14px; font-family:var(--sans); }
.offer .desc{ color:var(--muted); font-size:15.5px; line-height:1.72; margin-bottom:22px; }
.offer ul{ list-style:none; margin:0 0 28px; display:flex; flex-direction:column; gap:12px; }
.offer li{ position:relative; padding-left:28px; color:var(--body); font-size:15px; line-height:1.55; }
.offer li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }
.offer .btn{ margin-top:auto; }

/* ---------- FULL-BLEED OFFER BANDS (photographic) ---------- */
.offers-intro{ padding-bottom:0; }
.offer-band{
  position:relative; overflow:hidden;
  padding:clamp(84px,12vw,148px) 24px;
  text-align:center; color:#fff;
}
.offer-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('images/iym-band-bg.jpg') center/cover no-repeat;
  filter:blur(5px) brightness(.45) saturate(.95);
  transform:scale(1.08); /* hide blurred edges */
}
.offer-band.alt::before{ background-image:url('images/who-bg.png'); background-position:center 78%; }
.offer-band::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(18,15,12,.55) 0%, rgba(18,15,12,.42) 100%);
}
.offer-band-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }
.offer-band .tag{
  font-size:12px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--bg-taupe); margin-bottom:18px; font-weight:600;
}
.offer-band h2{
  font-family:var(--serif); color:#fff; font-weight:500;
  font-size:clamp(38px,6vw,68px); line-height:1.04; letter-spacing:-.01em;
  margin-bottom:14px;
}
.offer-band .band-sub{
  font-family:var(--serif); font-style:italic; color:rgba(255,255,255,.9);
  font-size:clamp(18px,2.4vw,24px); margin-bottom:22px;
}
.offer-band p{
  color:rgba(255,255,255,.82); font-size:16.5px; line-height:1.75;
  max-width:54ch; margin:0 auto 36px;
}
/* Jamie-style calm, desire-led outcome lines */
.band-outcomes{
  list-style:none; margin:0 auto 36px; padding:0; max-width:46ch;
  display:flex; flex-direction:column; gap:8px;
}
.band-outcomes li{
  color:rgba(255,255,255,.9); font-size:clamp(14px,1.5vw,16px); line-height:1.3;
}
.btn-outline{
  display:inline-flex; align-items:center; gap:14px;
  padding:17px 40px; border:1px solid rgba(255,255,255,.55); border-radius:999px;
  color:#fff; text-decoration:none;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-outline::after{ content:"→"; font-size:15px; letter-spacing:0; }
.btn-outline:hover{ background:#fff; color:var(--green); border-color:#fff; }

/* generic checklist */
.checks{ list-style:none; display:grid; gap:15px; max-width:660px; margin:0 auto; }
.checks li{ position:relative; padding-left:32px; color:var(--body); font-size:16px; line-height:1.62; }
.checks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; font-size:17px; }
.checks strong{ color:var(--ink); }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; }
.faq details{ border-bottom:1px solid var(--line); padding:6px 0; }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 42px 22px 4px; position:relative;
  font-family:var(--serif); font-size:20px; color:var(--ink); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:19px; color:var(--accent);
  font-size:26px; font-weight:300; transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .ans{ padding:0 4px 24px; color:var(--muted); font-size:16px; line-height:1.78; }
.faq .ans .hl{ color:var(--accent); font-style:italic; }

/* ---------- CTA BAND ---------- */
section.cta{
  background:var(--green); text-align:center; position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 0%, rgba(125,37,28,.25) 0%, transparent 65%);
  pointer-events:none;
}
.cta .wrap{ position:relative; z-index:1; }
.cta .kicker{ color:var(--bg-taupe); }
.cta h2{ color:#fff; max-width:20ch; margin:0 auto 16px; }
.cta p{ color:rgba(255,255,255,.78); max-width:48ch; margin:0 auto 32px; }
.cta .btn{ background:#fff; color:var(--green); }
.cta .btn:hover{ background:var(--bg-taupe); color:var(--green); }
.cta .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.cta .btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }

/* ---------- FORM CARD (Kit opt-in) ---------- */
.formcard{
  margin:0 auto; max-width:480px;
  background:var(--bg2);
  border:1px solid var(--line2); border-radius:12px;
  padding:32px 30px 26px; text-align:left;
  box-shadow:0 8px 28px rgba(44,44,44,.08);
}
.formcard .flabel{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px; display:block; font-weight:600;
}
.field{ display:flex; flex-direction:column; gap:14px; }
input[type=email]{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:16px 16px; outline:none; transition:border-color .15s ease;
}
input[type=email]::placeholder{ color:#9a948b; }
input[type=email]:focus{ border-color:var(--accent); }
.formcard .btn{ width:100%; }
.micro{ font-size:12.5px; color:var(--muted); text-align:center; margin-top:16px; }
.success{
  display:none; font-family:var(--serif); font-style:italic;
  font-size:17px; line-height:1.55; color:var(--ink); text-align:center;
}
.success .heart{ color:var(--accent); font-style:normal; }
.formcard.done .field, .formcard.done .flabel, .formcard.done .micro{ display:none; }
.formcard.done .success{ display:block; }

/* ---------- RESOURCE TILE ---------- */
.rtile{
  display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--line2); border-radius:12px;
  padding:34px 30px; height:100%;
  box-shadow:0 4px 18px rgba(44,44,44,.05);
}
.rtile .tag{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; font-weight:600; }
.rtile h3{ margin-bottom:12px; font-weight:600; }
.rtile h3 em{ font-style:italic; font-weight:inherit; }
.rtile p{ color:var(--muted); font-size:15.5px; line-height:1.72; margin-bottom:24px; }
.rtile .btn, .rtile .formcard{ margin-top:auto; }
.rtile.soon{ background:var(--bg-soft); box-shadow:none; }
.rtile.soon .tag{ color:var(--muted); }
/* photo-background resource cards (slightly blurred + darkened) */
.rtile.photo{ position:relative; overflow:hidden; border:none; color:#fff; }
.rtile.photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(0.8px) brightness(.55) saturate(.9); transform:scale(1.03);
}
.rtile.photo::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(20,15,11,.42) 0%, rgba(20,15,11,.72) 100%);
}
.rtile.photo > *{ position:relative; z-index:1; }
.rtile.photo .tag{ color:var(--bg-taupe); }
.rtile.photo h3{ color:#fff; }
.rtile.photo p{ color:rgba(255,255,255,.86); }
.rtile.photo .btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.rtile.photo .btn-ghost:hover{ background:#fff; color:var(--green); border-color:#fff; }
.rtile.r5::before{ background-image:url('freebies/5-rs-hero.jpg'); }
.rtile.rfs::before{ background-image:url('freebies/future-self-hero.jpg'); }
.rtile.rig::before{ background-image:url('images/who-bg.png'); }

/* ---------- DIVIDER LIST (R's etc) ---------- */
.rlist{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px;
  color:var(--muted); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
}
.rlist b{ color:var(--accent); font-weight:600; }
.rlist .dot{ color:var(--line); }

/* ---------- ABOUT MEDIA ---------- */
.aboutrow{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.portrait{
  border-radius:12px; border:1px solid var(--line2);
  background:var(--bg-taupe);
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 8px 28px rgba(44,44,44,.08);
}
.portrait.ph{ color:#8a7f73; font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:24px; }

/* ---------- FOOTER ---------- */
footer{
  text-align:center; padding:56px 0 60px; color:rgba(255,255,255,.6);
  font-size:13px; letter-spacing:.04em; background:#17120F;
}
footer .fbrand{ font-family:var(--serif); font-size:24px; color:#fff; margin-bottom:12px; }
footer .rlist{ color:rgba(255,255,255,.55); }
footer .flinks{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin:20px 0 22px; }
footer .flinks a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:13px; text-transform:uppercase; letter-spacing:.06em; transition:color .15s; }
footer .flinks a:hover{ color:var(--bg-taupe); }
footer .fnote{ color:rgba(255,255,255,.4); font-size:12px; margin-top:10px; }
footer a.ig{ color:var(--bg-taupe); text-decoration:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .offers{ grid-template-columns:1fr; }
  .aboutrow{ grid-template-columns:1fr; gap:32px; }
  .aboutrow .portrait{ max-width:360px; margin:0 auto; width:100%; }
}
@media (max-width:680px){
  .navlinks{
    position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0;
    background:var(--green); border-top:1px solid rgba(255,255,255,.12);
    padding:8px 0 16px; transform:translateY(-130%); transition:transform .25s ease;
    align-items:stretch;
  }
  .navlinks.open{ transform:translateY(0); }
  .navlinks a{ padding:15px 24px; font-size:15px; border-bottom:1px solid rgba(255,255,255,.1); }
  .navlinks .btn{ margin:14px 24px 4px; text-align:center; }
  .navtoggle{ display:block; }
}