/* Steady Roots Behavioral Services — stylesheet
   System: two-zone editorial. Forest stage for hero/spotlight, cream paper for content.
   Serif display headlines, grotesk body. One action color (gold), one decoration color
   (terracotta, stroke-only: squiggles, doodles, frame borders). Flat, matte, 8px radius. */

:root{
  /* zone A — forest stage */
  --stage:#2F4A3A; --stage-deep:#24392D; --stage-text:#F4EDE2;
  /* zone B — cream paper */
  --paper:#FAF6EF; --card:#FFFFFF; --wash:#F4EDE2;
  /* text */
  --ink:#1F2A23; --stone:#4A5A4F; --ash:#9AA79E; --fog:#E6DFD3;
  /* action + decoration */
  --gold:#E8C07D; --gold-deep:#D9AE62; --terra:#D9926A; --moss:#5C8D6E; --sage:#A8C9A3;
  --r:8px; --r-frame:24px; --max:1200px; --gap:64px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.007em;
     color:var(--stone);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.01em}
a{color:var(--moss)}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:720px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:#fff;padding:10px 16px;border-radius:var(--r);z-index:100}

/* ============ NAV ============ */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--fog)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
     max-width:var(--max);margin:0 auto;padding:14px 24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-name{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--ink);line-height:1.05}
.brand-name em{font-style:normal;color:var(--moss)}
.brand-sub{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;
           text-transform:uppercase;color:var(--stone);font-weight:400;margin-top:3px}
nav ul{display:flex;gap:28px;list-style:none}
nav a{text-decoration:none;color:var(--ink);font-size:.95rem}
nav a:hover,nav a[aria-current="page"]{color:var(--moss)}
.nav-cta{display:none}
.menu-toggle{display:none}
@media(min-width:900px){.nav-cta{display:inline-block}}
@media(max-width:899px){
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
         flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--fog)}
  nav ul.open{display:flex}
  nav ul li{padding:11px 0;border-bottom:1px solid var(--fog)}
  .menu-toggle{display:block;background:none;border:none;font-size:1.5rem;color:var(--ink);cursor:pointer}
}

/* ============ BUTTONS ============ */
.btn{display:inline-block;background:var(--gold);color:var(--ink);padding:12px 24px;
     border-radius:var(--r);text-decoration:none;font-size:1rem;font-family:var(--sans);
     border:1.5px solid var(--gold);cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.stage .btn.ghost{color:var(--stage-text);border-color:var(--stage-text)}
.stage .btn.ghost:hover{background:var(--stage-text);color:var(--stage)}
.btn.small{padding:9px 18px;font-size:.9rem}

/* ============ EYEBROW + SQUIGGLE ============ */
.eyebrow{display:inline-block;position:relative;font-family:var(--sans);font-size:1rem;
         letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
         padding-bottom:12px;margin-bottom:20px;background:none;border:none}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:62%;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 5 Q7.5 0 15 5 T30 5 T45 5 T60 5' fill='none' stroke='%23D9926A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom}
.stage .eyebrow{color:var(--stage-text)}

/* ============ ZONE A: STAGE ============ */
.stage{background:radial-gradient(ellipse at 50% 40%,var(--stage) 0%,var(--stage-deep) 100%);
       color:var(--stage-text);position:relative;overflow:hidden}
.stage::before{content:"";position:absolute;inset:-40% -20%;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 45%,transparent 0 78px,rgba(255,255,255,.035) 78px 80px)}
.stage>*{position:relative}
.stage h1,.stage h2,.stage h3{color:var(--stage-text)}
.stage p{color:#D8E0D8}
.hero{padding:96px 0 88px;text-align:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.04;max-width:16ch;margin:0 auto 20px;
         color:var(--gold)}
.hero .lede{font-size:1.15rem;line-height:1.55;max-width:38em;margin:0 auto 32px;color:var(--stage-text)}
.hero-actions{display:flex;flex-wrap:wrap;gap:20px 24px;justify-content:center}
.hero-frame{max-width:760px;margin:88px auto 0}

/* ============ ZONE B: SECTIONS ============ */
section{padding:var(--gap) 0}
section.tight{padding:40px 0}
.alt{background:var(--wash)}
.sec-head{text-align:center;max-width:700px;margin:0 auto 40px}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;margin-bottom:16px}
.sec-head p{font-size:1.15rem;color:var(--stone);max-width:36em;margin:0 auto}
.split{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split h2{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.15;margin-bottom:16px}
.split p{margin-bottom:14px;max-width:34em}
.prose h2{font-size:1.8rem;margin:40px 0 12px}
.prose p,.prose li{max-width:65ch}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:8px}
.prose b{color:var(--ink);font-weight:700}
.role{color:var(--moss);font-size:.95rem;margin-bottom:18px;letter-spacing:.01em}

/* ============ PHOTO FRAMES ============ */
.photo{margin:0;border:2px solid var(--terra);border-radius:var(--r-frame);overflow:hidden;
       background:var(--card);box-shadow:0 24px 48px rgba(217,146,106,.16)}
.photo img{display:block;width:100%;height:auto;object-fit:cover}
.photo.tall img{aspect-ratio:9/11}
.photo.portrait{max-width:340px;margin:0 auto}
.photo.portrait img{aspect-ratio:5/6}
.art-panel svg{width:100%;height:auto;display:block}

/* ============ CARDS ============ */
.cards{display:grid;gap:16px}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards.two{grid-template-columns:1fr}
@media(min-width:760px){.cards.two{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--fog);border-radius:var(--r);padding:24px;
      transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.04)}
.card h3{font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.card p{font-size:.97rem}
.card ul{margin-top:10px;padding-left:18px;font-size:.95rem}
.card li{margin-bottom:6px}
.ic{width:40px;height:40px;border-radius:var(--r);background:var(--wash);color:var(--moss);
    display:grid;place-items:center;margin-bottom:14px}
.ic svg{width:20px;height:20px}
.card.good{border-top:3px solid var(--moss)}
.card.bad{border-top:3px solid var(--terra)}
.tiny{font-size:.85rem;color:var(--ash);margin-top:12px}
.tiny.center{text-align:center}

/* ============ VALUES + STEPS ============ */
.values{list-style:none;display:grid;gap:10px;margin-top:20px}
.values li{display:flex;gap:12px;align-items:flex-start;color:var(--stone);font-size:.97rem}
.values b{color:var(--ink);font-weight:700;margin-right:4px}
.dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--gold);margin-top:8px}
.steps{display:grid;gap:24px;counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--card);border:1px solid var(--fog);border-radius:var(--r);padding:24px}
.step .num{font-family:var(--serif);font-weight:700;font-size:2.2rem;color:var(--terra);
           line-height:1;margin-bottom:12px}
.step h3{font-family:var(--sans);font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.95rem}

/* ============ FAQ ============ */
details{background:var(--card);border:1px solid var(--fog);border-radius:var(--r);
        padding:18px 22px;margin-bottom:10px}
summary{cursor:pointer;font-family:var(--sans);font-weight:700;color:var(--ink);font-size:1.02rem;
        list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--terra);font-size:1.5rem;line-height:1;font-weight:400}
details[open] summary::after{content:"\2013"}
details p{margin-top:12px;font-size:.97rem}

/* ============ DOWNLOAD ============ */
.download{background:var(--card);border:1px solid var(--fog);border-radius:var(--r);
          padding:24px;display:grid;gap:20px;align-items:center}
@media(min-width:720px){.download{grid-template-columns:96px 1fr auto}}
.download .thumb{background:var(--wash);border-radius:var(--r);display:grid;place-items:center;
                 padding:14px;height:100px}
.download h3{font-family:var(--sans);font-size:1.05rem;margin-bottom:6px}
.download p{font-size:.95rem}

/* ============ FORMS ============ */
form.panel{background:var(--card);border:1px solid var(--fog);border-radius:var(--r);padding:28px}
.field{margin-bottom:16px}
label{display:block;font-size:.85rem;color:var(--ink);margin-bottom:6px;font-weight:700}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--fog);border-radius:var(--r);
      font-family:inherit;font-size:.97rem;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
textarea{min-height:110px;resize:vertical}
.row{display:grid;gap:16px}
@media(min-width:520px){.row{grid-template-columns:1fr 1fr}}
.note{font-size:.82rem;color:var(--ash);margin-top:12px}
.hp{position:absolute;left:-9999px}
.info dl{display:grid;gap:16px;margin-top:20px}
.info dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.info dd{font-size:1.02rem;color:var(--ink)}
.contact-grid{display:grid;gap:40px}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1.1fr}}

/* ============ PAGE HEAD (cream) ============ */
.pagehead{padding:72px 0 56px;text-align:center;border-bottom:1px solid var(--fog)}
.pagehead h1{font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.06;margin-bottom:14px}
.pagehead p{font-size:1.15rem;max-width:36em;margin:0 auto}

/* ============ CTA BAND (stage) ============ */
.cta-band{text-align:center;padding:80px 0}
.cta-band h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;margin-bottom:14px;color:var(--gold)}
.cta-band p{font-size:1.1rem;margin-bottom:28px}

/* ============ DOODLES ============ */
.doodle{display:block;margin:0 auto;color:var(--terra)}
.doodle svg{width:100%;height:auto;display:block}
.doodle.arrow{max-width:90px;margin:8px auto 0}
.doodle.spiral{max-width:64px}
.doodle.sprig{max-width:120px}
.doodle.growth{max-width:200px}
.foot-doodle .doodle.growth{margin:0}

/* ============ FOOTER (cream) ============ */
footer{background:var(--paper);border-top:1px solid var(--fog);padding:56px 0 32px;font-size:.95rem}
.footgrid{display:grid;gap:32px}
@media(min-width:760px){.footgrid{grid-template-columns:1.4fr 1fr 1fr}}
.footgrid h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
             color:var(--ink);margin-bottom:14px;font-weight:700}
.footgrid ul{list-style:none}
.footgrid li{margin-bottom:8px;color:var(--stone)}
.footgrid a{color:var(--stone);text-decoration:none}
.footgrid a:hover{color:var(--ink)}
.motto{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--ink);margin-top:4px}
.fmini{color:var(--stone);font-size:.9rem;margin-top:10px;max-width:32em}
.fineprint{border-top:1px solid var(--fog);margin-top:36px;padding-top:20px;font-size:.8rem;
           color:var(--ash);max-width:75ch}
.foot-doodle{margin:28px 0 0;color:var(--terra);max-width:220px}

@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* split reverse (image right on desktop) */
@media(min-width:900px){.split.rev>:first-child{order:2}.split.rev>:last-child{order:1}}
.stage .split p,.stage .values li{color:#D8E0D8}
.stage .values b{color:var(--stage-text)}
.stage .dot{background:var(--gold)}

/* services page */
.svc + .svc{padding-top:0}
.svc .sec-head{margin-bottom:32px}

/* hero spacing (higher specificity so .photo{margin:0} can't override) */
.hero .hero-actions{gap:20px 28px;margin-bottom:0}
.hero figure.hero-frame{margin:96px auto 0}
@media(max-width:600px){.hero figure.hero-frame{margin-top:64px}}

/* all buttons match the gold primary */
.btn.ghost,.stage .btn.ghost{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.ghost:hover,.stage .btn.ghost:hover{background:var(--gold-deep);color:var(--ink);border-color:var(--gold-deep)}

/* bigger hero photo */
.hero figure.hero-frame{max-width:1080px}

/* ===== full-bleed photo hero ===== */
.hero-photo{position:relative;isolation:isolate;min-height:78vh;display:grid;place-items:center;
  padding:120px 0 108px;text-align:center;overflow:hidden}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:-2}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
/* forest scrim so the type stays readable over any photo */
.hero-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(31,42,35,.82) 0%,rgba(47,74,58,.68) 45%,rgba(31,42,35,.86) 100%)}
.hero-photo::before{display:none}
.hero-photo h1{color:var(--gold);text-shadow:0 2px 18px rgba(0,0,0,.35);max-width:18ch}
.hero-photo .lede{color:#F4EDE2;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-photo .eyebrow{color:#F4EDE2}
.hero-photo .hero-actions{margin-top:8px}
@media(max-width:700px){.hero-photo{min-height:70vh;padding:88px 0 76px}}

/* ===== edge-bleed section photos ===== */
/* fills its half of the row, runs off the page edge, no frame or shadow */
.split{align-items:stretch}
.split > .photo.bleed{border:none;border-radius:0;box-shadow:none;background:none;
  align-self:stretch;min-height:520px;position:relative}
.split > .photo.bleed img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 50%;aspect-ratio:auto}
@media(min-width:900px){
  /* break out of the 1200px container to touch the viewport edge */
  .split > .photo.bleed.left{margin-left:calc((100% - 50vw) - 24px);border-radius:0 var(--r-frame) var(--r-frame) 0}
  .split > .photo.bleed.right{margin-right:calc((100% - 50vw) - 24px);border-radius:var(--r-frame) 0 0 var(--r-frame)}
  .split > div{display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:899px){
  .split > .photo.bleed{min-height:340px;margin-left:-24px;margin-right:-24px;border-radius:0}
}

/* routines photo is a tall portrait — favor the upper-middle so both faces stay in frame */
.split > .photo.bleed.right img{object-position:center 32%}

/* ===== routine photo grid — staggered mosaic, no two tiles alike ===== */
.routine-row{display:grid;gap:20px;margin:8px auto 56px;max-width:1160px;
  grid-template-columns:1fr;align-items:start}
.routine-row figure{margin:0}
.routine-row img{display:block;width:100%;height:260px;object-fit:cover;
  border-radius:var(--r-frame);border:2px solid var(--terra)}
.routine-row figure:nth-child(1) img{object-position:38% 22%}
.routine-row figure:nth-child(2) img{object-position:52% 42%}
.routine-row figure:nth-child(3) img{object-position:50% 28%}
.routine-row figure:nth-child(4) img{object-position:60% 55%}
.routine-row figure:nth-child(5) img{object-position:46% 60%}

/* tablet: two up, every other one dropped a little */
@media(min-width:640px){
  .routine-row{grid-template-columns:1fr 1fr;gap:22px}
  .routine-row figure:nth-child(1) img{height:330px}
  .routine-row figure:nth-child(2) img{height:280px}
  .routine-row figure:nth-child(3) img{height:300px}
  .routine-row figure:nth-child(4) img{height:262px}
  .routine-row figure:nth-child(5) img{height:290px}
  .routine-row figure:nth-child(2),
  .routine-row figure:nth-child(4){margin-top:40px}
}

/* small desktop: three up */
@media(min-width:900px){.routine-row{grid-template-columns:repeat(3,1fr)}}

/* desktop: all five across — portraits narrow and tall, landscapes wide and short,
   tops staggered so the row reads as a composition instead of five equal boxes */
@media(min-width:1080px){
  .routine-row{grid-template-columns:.86fr 1fr .84fr 1.32fr 1.06fr}
  .routine-row figure:nth-child(1){margin-top:0}
  .routine-row figure:nth-child(2){margin-top:62px}
  .routine-row figure:nth-child(3){margin-top:20px}
  .routine-row figure:nth-child(4){margin-top:100px}
  .routine-row figure:nth-child(5){margin-top:46px}
  .routine-row figure:nth-child(1) img{height:380px}
  .routine-row figure:nth-child(2) img{height:280px}
  .routine-row figure:nth-child(3) img{height:344px}
  .routine-row figure:nth-child(4) img{height:240px}
  .routine-row figure:nth-child(5) img{height:300px}
}
.routine-list{max-width:620px;margin:0 auto}

/* ===== About: name header, bio column, credential strip ===== */
.namehead{padding:76px 0 44px}
.namehead .eyebrow{margin-bottom:14px}
.namehead h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;margin-bottom:12px}
.namehead .role{color:var(--moss);font-size:1.02rem;margin-bottom:0}

.bio{max-width:680px}
.bio p{margin-bottom:16px}
.lede-serif{font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:var(--ink);
  margin-bottom:22px}
@media(max-width:599px){.lede-serif{font-size:1.15rem}}

.facts{display:grid;gap:0;max-width:960px;margin:0 auto;
  border-top:1px solid var(--fog);border-left:1px solid var(--fog);
  grid-template-columns:1fr}
@media(min-width:600px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts > div{padding:22px 24px;border-bottom:1px solid var(--fog);border-right:1px solid var(--fog)}
.facts dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ash);margin-bottom:7px}
.facts dd{margin:0;font-family:var(--serif);font-size:1.05rem;line-height:1.35;color:var(--ink)}

.statement{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.25;
  color:var(--gold);margin-top:28px;padding-top:26px;border-top:1px solid rgba(232,192,125,.32)}
.stage p.statement{color:var(--gold)}

/* About: point-of-view band — paragraph rhythm and a heading that doesn't shout */
.pov p{margin-bottom:18px;font-size:1.05rem;line-height:1.65;max-width:60ch}
.pov .sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.pov p.statement{max-width:22ch;margin-left:0}

/* callout under the routine list: available-but-not-standard note */
.note.aside{max-width:620px;margin:26px auto 0;font-size:.92rem;line-height:1.6;
  color:var(--stone);border-left:3px solid var(--gold);padding:4px 0 4px 18px}

/* contact form: sensitive-info warning sits above the message box */
.formwarn{background:#FBF3E4;border:1px solid var(--gold);border-radius:var(--r);
  padding:12px 14px;font-size:.86rem;line-height:1.55;color:var(--stone);margin:4px 0 18px}
.formwarn strong{color:var(--ink)}

/* ============================================================
   MOTION
   Three pieces, all opt-out: the logo drawing itself on the home
   page, the footer mark growing when it scrolls in, and sections
   settling in. Hidden states are only applied by JS (.reveal is
   added at runtime), so nothing can get stuck invisible if a
   script fails. The reduced-motion block at the bottom turns the
   whole thing off and shows every finished state instead.
   ============================================================ */

/* ---- 1. logo draws itself (home page only) ---- */
.brand.intro .lm-ground,
.brand.intro .lm-root,
.brand.intro .lm-stem{stroke-dasharray:1;stroke-dashoffset:1}
.brand.intro .lm-leaf{opacity:0}
.brand.intro .lm-seed{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:50% 50%}
.brand.intro .lm-leaf1{transform-box:fill-box;transform-origin:100% 100%}
.brand.intro .lm-leaf2{transform-box:fill-box;transform-origin:0% 100%}
.brand.intro .brand-name{opacity:0;transform:translateX(-6px)}

.brand.intro .lm-ground{animation:lm-draw .45s ease-out forwards}
.brand.intro .lm-root{animation:lm-draw .6s ease-out .25s forwards}
.brand.intro .lm-root.r2{animation-delay:.37s}
.brand.intro .lm-root.r3{animation-delay:.47s}
.brand.intro .lm-stem{animation:lm-draw .5s ease-out .55s forwards}
.brand.intro .lm-leaf1{animation:lm-unfurl-l .5s cubic-bezier(.34,1.3,.5,1) 1s forwards}
.brand.intro .lm-leaf2{animation:lm-unfurl-r .5s cubic-bezier(.34,1.3,.5,1) 1.15s forwards}
.brand.intro .lm-seed{animation:lm-pop .45s cubic-bezier(.34,1.6,.5,1) 1.35s forwards}
.brand.intro .brand-name{animation:lm-word .55s ease-out 1.45s forwards}

@keyframes lm-draw{to{stroke-dashoffset:0}}
@keyframes lm-unfurl-l{from{opacity:0;transform:scale(.1) rotate(14deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes lm-unfurl-r{from{opacity:0;transform:scale(.1) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes lm-pop{to{opacity:1;transform:scale(1)}}
@keyframes lm-word{to{opacity:1;transform:none}}

/* ---- 2. footer mark grows through its three stages ---- */
.foot-doodle.play .g-line,
.foot-doodle.play .g-s1,
.foot-doodle.play .g-s2,
.foot-doodle.play .g-s3{stroke-dasharray:1;stroke-dashoffset:1}
.foot-doodle.play .g-pop{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:50% 90%}
.foot-doodle.play .g-line{animation:lm-draw .6s ease-out forwards}
.foot-doodle.play .g-s1{animation:lm-draw .4s ease-out .5s forwards}
.foot-doodle.play .g-s1d{animation:lm-pop .4s cubic-bezier(.34,1.6,.5,1) .8s forwards}
.foot-doodle.play .g-s2{animation:lm-draw .5s ease-out 1.05s forwards}
.foot-doodle.play .g-s2l{animation:lm-pop .45s cubic-bezier(.34,1.5,.5,1) 1.4s forwards}
.foot-doodle.play .g-s3{animation:lm-draw .6s ease-out 1.7s forwards}
.foot-doodle.play .g-s3a{animation:lm-pop .45s cubic-bezier(.34,1.5,.5,1) 2.1s forwards}
.foot-doodle.play .g-s3b{animation:lm-pop .45s cubic-bezier(.34,1.5,.5,1) 2.28s forwards}
.foot-doodle.play .g-s3d{animation:lm-pop .4s cubic-bezier(.34,1.6,.5,1) 2.5s forwards}

/* ---- 3. sections settle in on scroll ---- */
.js-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease-out,transform .6s ease-out}
.js-reveal.in{opacity:1;transform:none}

/* ---- opt-out: honor the OS setting, show every finished state ---- */
@media(prefers-reduced-motion:reduce){
  .brand.intro .lm-ground,.brand.intro .lm-root,.brand.intro .lm-stem,
  .foot-doodle.play .g-line,.foot-doodle.play .g-s1,
  .foot-doodle.play .g-s2,.foot-doodle.play .g-s3{stroke-dashoffset:0!important}
  .brand.intro .lm-leaf,.brand.intro .lm-seed,.brand.intro .brand-name,
  .foot-doodle.play .g-pop{opacity:1!important;transform:none!important}
  .brand.intro *,.foot-doodle.play *{animation:none!important}
  .js-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===== Services: topic cards + section footnotes ===== */
.tiles-head{font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ash);text-align:center;margin:0 0 18px}
.card.topic{display:flex;align-items:center;gap:14px;padding:18px 20px}
.card.topic .ic{margin:0;flex:0 0 auto}
.card.topic h3{margin:0;font-size:.98rem;line-height:1.35}
.svc-note{max-width:760px;margin:26px auto 0;text-align:left}
@media(min-width:760px){.cards .card.topic{min-height:84px}}

/* contact page: separate door for schools and daycares */
.schools-box{margin-top:28px;padding:20px 22px;background:var(--wash);
  border:1px solid var(--fog);border-radius:var(--r)}
.schools-box h3{font-family:var(--serif);font-size:1.12rem;margin-bottom:6px;color:var(--ink)}
.schools-box p{font-size:.93rem;margin-bottom:12px}
.schools-box p:last-child{margin-bottom:0}

/* seven nav items need a little more room between 900 and 1140 */
@media(min-width:900px) and (max-width:1139px){
  nav ul{gap:18px}
  nav a{font-size:.88rem}
  .nav-cta{padding:10px 16px;font-size:.9rem}
}

/* wide photo band (For Schools page header image) */
.band-photo{margin:0 auto;max-width:1160px}
.band-photo img{display:block;width:100%;height:520px;object-fit:cover;object-position:center 50%;
  border-radius:var(--r-frame);border:2px solid var(--terra)}
@media(max-width:899px){.band-photo img{height:320px}}

/* resources: "opening soon" card reads as forthcoming, not available */
.card.soon{border-color:var(--gold);background:linear-gradient(180deg,#FDF8EE 0%,var(--card) 60%)}
.card.soon .eyebrow{color:var(--terra);border-color:var(--gold)}
.card .eyebrow{margin-bottom:10px;font-size:.7rem;padding:4px 10px}
.cards.two .card h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:10px}