/* =====================================================================
   Sue Stanley — site stylesheet
   Aesthetic: editorial / refined wellness
   Cream + terracotta clay + champion gold · Fraunces × Hanken Grotesk
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bone:      #F4EEE3;   /* primary warm background */
  --bone-2:    #ECE2D2;   /* alternate section bg     */
  --paper:     #FBF7EF;   /* cards / form fields      */
  --ink:       #211C17;   /* near-black warm text     */
  --ink-soft:  #5C5246;   /* secondary text           */
  --clay:      #B0512B;   /* primary accent           */
  --clay-deep: #8C3D1E;   /* hover / pressed          */
  --gold:      #B0853F;   /* champion accent (sparse) */
  --pine:      #28362D;   /* deep band / footer       */
  --pine-soft: #3A4A3F;
  --line:      rgba(33,28,23,.14);
  --line-2:    rgba(33,28,23,.08);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;        /* 17px, readable for 40+ */
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle paper grain over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08;
  letter-spacing:-.01em; color:var(--ink); }
.display{
  font-size:clamp(2.9rem, 8.5vw, 6.4rem);
  font-weight:340;
  font-optical-sizing:auto;
  line-height:.96;
  letter-spacing:-.02em;
}
.h-sec{ font-size:clamp(2rem, 4.6vw, 3.4rem); font-weight:380; }
.h-mid{ font-size:clamp(1.45rem, 2.6vw, 2rem); font-weight:440; }
em,.italic{ font-style:italic; }
p{ max-width:62ch; }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--clay);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--clay); display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.gold{ color:var(--gold); }
.eyebrow.gold::before{ background:var(--gold); }
.eyebrow.light{ color:#E7C892; }
.eyebrow.light::before{ background:#E7C892; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter); }
section{ position:relative; z-index:2; }
.pad{ padding-block:clamp(64px, 9vw, 132px); }
.pad-sm{ padding-block:clamp(48px,6vw,84px); }
.bone-2{ background:var(--bone-2); }
.lead{ font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.6; color:var(--ink);
  max-width:46ch; }
.muted{ color:var(--ink-soft); }
.rule{ height:1px; background:var(--line); border:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:var(--radius);
  border:1px solid var(--ink); cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease);
}
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-primary{ background:var(--clay); border-color:var(--clay); color:#fff; }
.btn-primary:hover{ background:var(--clay-deep); border-color:var(--clay-deep); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bone); }
.btn-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--pine); border-color:#fff; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease),
             box-shadow .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(244,238,227,.92);
  backdrop-filter:saturate(140%) blur(10px);
  padding:.85rem var(--gutter);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -24px rgba(0,0,0,.4);
}
.brand{ font-family:var(--serif); font-weight:500; font-size:1.45rem;
  letter-spacing:.01em; line-height:1; display:flex; flex-direction:column; }
.brand small{ font-family:var(--sans); font-size:.56rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--clay);
  margin-top:.35em; }
.nav{ display:flex; align-items:center; gap:2.2rem; }
.nav a.link{ font-size:.82rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; position:relative; padding-block:.3em; }
.nav a.link::after{ content:""; position:absolute; left:0; bottom:0; height:1px;
  width:0; background:var(--clay); transition:width .35s var(--ease); }
.nav a.link:hover::after, .nav a.link.active::after{ width:100%; }
.nav .btn{ padding:.7em 1.3em; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer;
  width:34px; height:26px; position:relative; }
.nav-toggle span{ position:absolute; left:0; height:2px; width:100%;
  background:var(--ink); transition:.3s var(--ease); }
.nav-toggle span:nth-child(1){ top:2px; }
.nav-toggle span:nth-child(2){ top:12px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-open .nav-toggle span:nth-child(1){ top:12px; transform:rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ top:12px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(120px,16vh,180px); padding-bottom:clamp(40px,6vw,80px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:center; }
.hero-copy .display{ margin:.25em 0 .35em; }
.hero-copy .display .accent{ color:var(--clay); font-style:italic; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-figure{ position:relative; justify-self:end; }
.hero-figure img{ width:min(420px,100%); aspect-ratio:681/1024; object-fit:cover;
  border-radius:var(--radius); position:relative; z-index:2;
  box-shadow:0 40px 80px -40px rgba(33,28,23,.55); }
.hero-figure::before{ content:""; position:absolute; z-index:1;
  inset:auto -22px -22px auto; width:78%; height:78%;
  background:var(--clay); border-radius:var(--radius); }
.hero-figure .tag{ position:absolute; z-index:3; left:-18px; top:30px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.7rem 1rem; box-shadow:0 18px 40px -28px rgba(0,0,0,.6);
  font-size:.74rem; letter-spacing:.04em; }
.hero-figure .tag b{ font-family:var(--serif); font-size:1.5rem; font-weight:500;
  color:var(--clay); display:block; line-height:1; }

/* ---------- Stats band ---------- */
.stats{ background:var(--pine); color:#EDE6D8; }
.stats .grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(34px,4vw,52px) clamp(16px,2vw,30px); text-align:center;
  border-left:1px solid rgba(255,255,255,.12); }
.stat:first-child{ border-left:0; }
.stat .num{ font-family:var(--serif); font-weight:400; color:#E7C892;
  font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; }
.stat .lbl{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:#C9BFAE; margin-top:.7rem; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,84px);
  align-items:center; }
.split.flip .fig{ order:2; }
.split .fig{ position:relative; }
.split .fig img{ width:100%; border-radius:var(--radius);
  box-shadow:0 36px 70px -42px rgba(33,28,23,.5); }
.split .fig.framed::after{ content:""; position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,.55); border-radius:2px; pointer-events:none; }
.copy-block > * + *{ margin-top:1.15rem; }
.copy-block .h-sec + .lead{ margin-top:1.4rem; }
.signature{ font-family:var(--serif); font-style:italic; font-size:2rem;
  color:var(--clay); margin-top:.4rem; }

/* ---------- Quote band (image bg) ---------- */
.quote-band{ position:relative; color:#fff; isolation:isolate;
  display:grid; place-items:center; text-align:center;
  padding-block:clamp(90px,13vw,170px); }
.quote-band img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; }
.quote-band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(28,25,20,.55), rgba(28,25,20,.72)); }
.quote-band blockquote{ font-family:var(--serif); font-weight:340;
  font-size:clamp(1.7rem,4vw,3rem); line-height:1.18; max-width:18ch;
  letter-spacing:-.01em; }
.quote-band cite{ display:block; font-family:var(--sans); font-style:normal;
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:#E7C892; margin-top:1.6rem; }

/* ---------- Timeline ---------- */
.timeline{ position:relative; margin-top:3rem; padding-left:0; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px;
  width:1px; background:var(--line); }
.tl-item{ position:relative; padding:0 0 2.4rem 2.6rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:0; top:.55rem;
  width:15px; height:15px; border-radius:50%; background:var(--bone);
  border:2px solid var(--clay); }
.tl-item .yr{ font-family:var(--serif); font-size:1.35rem; color:var(--clay);
  line-height:1; }
.tl-item h4{ font-family:var(--sans); font-weight:700; font-size:1rem;
  letter-spacing:.01em; margin:.35rem 0 .25rem; }
.tl-item p{ color:var(--ink-soft); font-size:.98rem; }

/* ---------- Accolades ---------- */
.accolades{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr);
  gap:0; border-top:1px solid var(--line); margin-top:2.4rem; }
.accolades li{ display:flex; gap:1rem; align-items:flex-start;
  padding:1.3rem 1.2rem 1.3rem 0; border-bottom:1px solid var(--line); }
.accolades li .mk{ font-family:var(--serif); color:var(--gold);
  font-size:1.2rem; line-height:1.2; flex:none; }
.accolades li span{ font-size:1rem; }

/* ---------- Programs ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  margin-top:3rem; }
.card{ background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover{ transform:translateY(-6px);
  box-shadow:0 30px 55px -34px rgba(33,28,23,.4); }
.card .ph{ aspect-ratio:4/3; overflow:hidden; }
.card .ph img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease); }
.card:hover .ph img{ transform:scale(1.06); }
.card .body{ padding:1.5rem 1.4rem 1.6rem; display:flex; flex-direction:column;
  flex:1; }
.card h3{ font-size:1.3rem; font-weight:460; }
.card p{ color:var(--ink-soft); font-size:.95rem; margin:.6rem 0 1.2rem; flex:1; }
.card .more{ font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--clay); display:inline-flex; gap:.5em;
  align-items:center; }
.card:hover .more .arw{ transform:translateX(5px); }
.card .more .arw{ transition:transform .35s var(--ease); }

/* ---------- CTA band ---------- */
.cta{ background:var(--clay); color:#fff; text-align:center; }
.cta .h-sec{ color:#fff; max-width:20ch; margin-inline:auto; }
.cta p{ margin:1.1rem auto 2rem; max-width:48ch; color:#FBE7DC; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--pine); color:#CDC3B2; position:relative; z-index:2; }
.site-footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:2.4rem; padding-block:clamp(54px,7vw,80px); }
.site-footer .brand-f{ font-family:var(--serif); font-size:1.7rem; color:#fff;
  line-height:1; }
.site-footer .brand-f small{ display:block; font-family:var(--sans); font-size:.6rem;
  letter-spacing:.32em; text-transform:uppercase; color:#E7C892; margin-top:.6em; }
.site-footer p{ font-size:.96rem; margin-top:1rem; max-width:34ch; }
.site-footer h5{ font-family:var(--sans); font-weight:700; font-size:.76rem;
  letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.site-footer ul{ list-style:none; }
.site-footer ul li{ margin-bottom:.6rem; }
.site-footer ul a{ font-size:.96rem; color:#CDC3B2;
  transition:color .3s var(--ease); }
.site-footer ul a:hover{ color:#E7C892; }
.socials{ display:flex; gap:.7rem; margin-top:1.2rem; }
.socials a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.22);
  border-radius:50%; display:grid; place-items:center;
  transition:.3s var(--ease); }
.socials a:hover{ background:#E7C892; border-color:#E7C892; color:var(--pine); }
.socials svg{ width:17px; height:17px; }
.site-footer .bottom{ border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-block:1.5rem; font-size:.82rem; color:#9D9486; }
.site-footer .bottom a{ color:#9D9486; }
.site-footer .bottom a:hover{ color:#E7C892; }

/* ---------- Contact page ---------- */
.contact-hero{ padding-top:clamp(130px,17vh,190px); }
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,6vw,80px); align-items:start; }
.form-card{ background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(24px,3.5vw,44px);
  box-shadow:0 30px 70px -50px rgba(33,28,23,.45); }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-size:.76rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
.field label .req{ color:var(--clay); }
.field input, .field textarea, .field select{
  width:100%; background:var(--bone); border:1px solid var(--line);
  border-radius:var(--radius); padding:.85em 1em; font-size:1rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:150px; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(176,81,43,.14); }
.field input.err, .field textarea.err{ border-color:#B0512B;
  box-shadow:0 0 0 3px rgba(176,81,43,.16); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.84rem; color:var(--ink-soft); margin-top:.4rem; }

.alert{ border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1.6rem;
  font-size:.95rem; border:1px solid; display:flex; gap:.7rem; align-items:flex-start; }
.alert svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.alert-ok{ background:#EDF3EC; border-color:#9DBE9A; color:#2E4A2C; }
.alert-err{ background:#FBEDE7; border-color:#D9A48C; color:#8C3D1E; }
.err-list{ list-style:none; font-size:.95rem; }
.err-list li{ margin-top:.2rem; }

.contact-aside .panel{ background:var(--pine); color:#E7DECF;
  border-radius:var(--radius); padding:clamp(24px,3vw,36px); }
.contact-aside .panel h3{ color:#fff; font-size:1.5rem; }
.contact-aside .panel .row{ display:flex; gap:.85rem; align-items:flex-start;
  margin-top:1.4rem; }
.contact-aside .panel .row svg{ width:20px; height:20px; color:#E7C892;
  flex:none; margin-top:3px; }
.contact-aside .panel .row .k{ font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:#B7AD9C; }
.contact-aside .panel .row a, .contact-aside .panel .row span{ color:#fff;
  font-size:1.02rem; }
.contact-aside .panel .row a:hover{ color:#E7C892; }
.contact-aside .panel .socials{ margin-top:1.8rem; }
.contact-aside .aside-img{ margin-top:1.4rem; border-radius:var(--radius);
  overflow:hidden; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    background:var(--bone); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:1.8rem; padding:3rem var(--gutter);
    transform:translateX(110%); transition:transform .45s var(--ease);
    box-shadow:-30px 0 60px -40px rgba(0,0,0,.5); z-index:60; }
  .nav-open .nav{ transform:none; }
  .nav-toggle{ display:block; z-index:61; }
  .nav a.link{ font-size:1rem; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(20,17,13,.4);
    opacity:0; visibility:hidden; transition:.4s var(--ease); z-index:55; }
  .nav-open .nav-backdrop{ opacity:1; visibility:visible; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ justify-self:start; margin-top:.5rem; }
  .stats .grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); }
  .split{ grid-template-columns:1fr; }
  .split.flip .fig{ order:0; }
  .cards{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .site-footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  body{ font-size:1rem; }
  .stats .grid{ grid-template-columns:1fr 1fr; }
  .accolades{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .site-footer .top{ grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; justify-content:center; }
}