/* ==========================================================================
   ehrenkind.com · Design System
   Based on the Ehrenkind CD Manual (2025). Mobile first.
   1 Fonts · 2 Tokens · 3 Base and type · 4 Components · 5 Sections · 6 Motion

   TYPE SYSTEM (only these six styles exist on the page):
   display  Recoleta  44 to 112 px   hero headline, brand word
   h2       Recoleta  32 to 60 px    section headlines, big numbers, quotes
   h3       Recoleta  22 to 28 px    card titles, sub headlines, FAQ questions
   body     Figtree   17 px          all running text
   small    Figtree   15 px          captions, meta lines, buttons, footer
   label    Figtree   12 px caps     eyebrows, badges, column titles
   ========================================================================== */

/* 1 Fonts (self-hosted, see README for license rules) */
@font-face{font-family:"Recoleta";src:url("../fonts/recoleta-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Recoleta";src:url("../fonts/recoleta-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* 2 Tokens: colors from CD Manual p. 21 to 30.
   --berry is the CD Berry #E2718F darkened to #B8506F so white button text meets WCAG AA (4.76:1). Approved by Peter, 21 Oct 2026. */
:root{
  --white:#FFFFFF; --cream:#F7F4ED; --sand:#EDEBDD; --stone:#E3DED8;
  --ink:#3A3531; --ink-soft:#6B5643; --muted:#8C7560;
  --berry:#B8506F; --berry-dark:#9E4361; --gold:#D7AC6E;
  --line:rgba(58,53,49,.15); --line-dark:rgba(247,244,237,.2);

  --serif:"Recoleta", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display:clamp(44px,7.2vw,112px);
  --t-h2:clamp(32px,4.4vw,60px);
  --t-h3:clamp(22px,2vw,28px);
  --t-body:17px;
  --t-small:15px;
  --t-label:12px;

  --gutter:clamp(20px,5vw,72px);
  --max:1360px;
  --sec:clamp(64px,10vw,160px);
  --ease:cubic-bezier(.2,.7,.1,1);
}

/* 3 Base and type */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--t-body)/1.6 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0;color:var(--ink-soft);text-wrap:pretty}
h1,h2,h3,blockquote,summary,.display{font-family:var(--serif);font-weight:400;letter-spacing:.02em;margin:0;color:var(--ink);text-wrap:balance}
h1,.display{font-size:var(--t-display);line-height:1.04}
h2,.h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.1;letter-spacing:.02em}
h3,.h3{font-size:var(--t-h3);line-height:1.2}
.small{font-size:var(--t-small);line-height:1.5;color:var(--ink-soft)}
.eyebrow,.label{display:block;font:500 var(--t-label)/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow + h2,.eyebrow + h1{margin-top:18px}
.nowrap{white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* 4 Components */
/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:.6em;font:500 var(--t-small)/1 var(--sans);letter-spacing:.02em;text-decoration:none;border-radius:999px;padding:17px 30px;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.btn-berry{background:var(--berry);color:#fff}
.btn-berry:hover{background:var(--berry-dark)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--berry);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--berry)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .25s}
.link:hover{color:var(--berry)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;color:#fff;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo-svg{width:150px;height:auto;display:block}
.site-header nav{display:none;gap:36px;font:500 var(--t-small)/1 var(--sans)}
.site-header nav a{text-decoration:none;opacity:.9;transition:opacity .2s,color .2s}
.site-header nav a:hover{opacity:1;color:var(--berry)}
.site-header .btn{padding:13px 22px}
.site-header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
@media(min-width:960px){.site-header nav{display:flex}}

/* Star rating: fill width = real value / 5 */
.srate{position:relative;display:inline-block;line-height:0;vertical-align:-2px;flex:none}
.srate svg{width:16px;height:16px;margin-right:2px;fill:currentColor}
.srate .s-bg{display:block;white-space:nowrap;color:rgba(58,53,49,.18)}
.srate .s-fg{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:var(--gold)}
.rating{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:var(--t-small);line-height:1.3;color:var(--ink-soft);white-space:nowrap}

/* Chips (certifications) */
.chip{font:500 var(--t-small)/1 var(--sans);padding:11px 18px;border:1px solid rgba(58,53,49,.25);border-radius:999px;background:#fff;color:var(--ink);white-space:nowrap}

/* Badge */
.badge{position:absolute;top:16px;left:16px;background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px}

/* Numbers (stats and proof) */
.num{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1;letter-spacing:.01em;color:var(--ink)}
.figure{border-top:1px solid var(--line);padding-top:22px;text-decoration:none;display:block}
.figure .srate{display:block;margin-top:14px}
.figure .small{display:block;margin-top:12px}
a.figure:hover .small{text-decoration:underline}

/* 5 Sections */
.sec{padding:var(--sec) 0}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(32px,6vw,80px)}
.sec-head p{max-width:34em}
@media(min-width:900px){.sec-head{grid-template-columns:1.2fr 1fr;align-items:end;gap:48px}}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;background:#6b5d4f}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform:scale(1.08);animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,25,20,.5) 0%,rgba(30,25,20,.28) 34%,rgba(30,25,20,0) 58%,rgba(30,25,20,0) 82%,rgba(30,25,20,.35) 100%)}
.hero-content{position:relative;z-index:2;width:100%;padding-top:clamp(160px,24vh,260px)}
.hero h1{color:#fff;max-width:11ch;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--sand)}
.hero .lead{max-width:17.5em;color:rgba(255,255,255,.92)}
.hero-foot{position:relative;z-index:2;width:100%;padding-bottom:28px}
.hero-foot .eyebrow{color:rgba(255,255,255,.85)}
@media(min-width:900px){.hero-media img{object-position:50% 50%}.hero-content{padding-top:24vh}.hero .lead{max-width:30em}.hero-foot{padding-bottom:40px}}

/* Stats */
.stats{background:var(--cream);padding:clamp(48px,7vw,88px) 0}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:40px}}

/* Story statement */
.statement{padding:clamp(72px,12vw,180px) 0}
.statement h2,.statement p{margin-left:0}
@media(min-width:900px){.statement{text-align:center}.statement h2,.statement p{margin-left:auto}}
.statement .eyebrow{margin-bottom:28px}
.statement h2{max-width:20ch;margin-right:auto}
.statement p{max-width:38em;margin-top:28px;margin-right:auto}

/* Team image */
.team{position:relative;margin:0}
.team img{width:100%;height:clamp(320px,52vw,720px);object-fit:cover}
.team figcaption{position:absolute;left:var(--gutter);bottom:24px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* Name and Montessori */
.name-sec{padding-bottom:0}
.name-sec + .sec{padding-top:clamp(56px,8vw,120px)}
.name-sec .grid2{display:grid;gap:48px}
.name-sec .display span{color:var(--berry)}
.name-sec .txt h3{margin-bottom:12px}
.name-sec .txt div + div{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
@media(min-width:900px){.name-sec .grid2{grid-template-columns:1.1fr 1fr;gap:96px;align-items:center}}

/* Products */
.products{display:grid;gap:56px 28px;grid-template-columns:1fr}
.p-card{text-decoration:none;display:block}
.p-media{position:relative;overflow:hidden;background:var(--cream);aspect-ratio:4/5;border-radius:4px}
.p-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.p-card:hover .p-media img{transform:scale(1.045)}
.p-info{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-top:20px}
.p-info > div{min-width:0}
.p-info h3{margin-bottom:6px}
.p-go{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(58,53,49,.25);display:grid;place-items:center;font-size:var(--t-small);transition:all .3s var(--ease)}
.p-card:hover .p-go{background:var(--berry);border-color:var(--berry);color:#fff}
@media(min-width:700px){.products{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){
  .products{grid-template-columns:repeat(3,1fr);gap:72px 32px}
  .p-feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
  .p-feature .p-media{aspect-ratio:auto;flex:1;min-height:680px}
}

/* Teaser */
.teaser{display:grid;gap:20px;margin-top:clamp(64px,8vw,110px);padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center}
.teaser .eyebrow{margin-bottom:12px}
.teaser p{max-width:34em}
.teaser .btn{justify-self:start}
@media(min-width:900px){.teaser{grid-template-columns:1fr 1.3fr auto;gap:48px}}

/* Materials */
.materials{background:var(--cream)}
.mat-grid{display:grid;gap:56px;grid-template-columns:1fr}
.mat-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.mat-item .label{margin:24px 0 10px}
.mat-item h3{margin-bottom:10px}
.certs{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(56px,7vw,96px);padding-top:36px;border-top:1px solid var(--line);align-items:center}
.certs .eyebrow{width:100%;margin-bottom:6px}
@media(min-width:900px){.mat-grid{grid-template-columns:repeat(3,1fr);gap:36px}.mat-item:nth-child(2){margin-top:96px}.certs .eyebrow{width:auto;margin:0 16px 0 0}}

/* Reviews */
.reviews{text-align:center}
.quote-mark{font-family:var(--serif);font-size:var(--t-h2);line-height:.6;color:var(--berry);display:block;height:28px}
.review-stage{position:relative;max-width:900px;margin:40px auto 0;min-height:240px}
.review{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.review.active{opacity:1;transform:none;position:relative;pointer-events:auto}
.review blockquote{font-size:var(--t-h2);line-height:1.18;margin:24px 0}
.review cite{font-style:normal}
.dots{display:flex;justify-content:center;gap:10px;margin-top:36px}
.dots button{width:28px;height:2px;border:0;background:rgba(58,53,49,.2);cursor:pointer;padding:0;transition:background .3s}
.dots button[aria-current="true"]{background:var(--ink)}
.review-sum{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:48px}

/* Europe (dark) */
.dark{background:var(--ink)}
.dark h2,.dark h3,.dark .num{color:#fff}
.dark p,.dark .small{color:rgba(247,244,237,.75)}
.dark .eyebrow{color:var(--gold)}
.dark .figure{border-color:var(--line-dark)}
.dark .srate .s-bg{color:rgba(247,244,237,.22)}
.g-grid{display:grid;gap:28px;grid-template-columns:1fr}
.g-grid img{width:100%;height:100%;object-fit:cover;border-radius:4px;aspect-ratio:4/3}
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 24px;margin:clamp(56px,7vw,96px) 0}
@media(min-width:900px){.g-grid{grid-template-columns:1.4fr 1fr}.proof{grid-template-columns:repeat(4,1fr)}}

/* Band */
.band{position:relative;min-height:clamp(460px,70vh,760px);display:flex;align-items:center;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,25,20,.62),rgba(30,25,20,.1) 70%)}
.band .wrap{position:relative;z-index:2;width:100%}
.band h2{color:#fff;max-width:13ch;margin:18px 0 20px}
.band p{max-width:30em;color:rgba(255,255,255,.9)}
.band .eyebrow{color:rgba(255,255,255,.8)}
@media(max-width:899px){
  .band{display:block;min-height:0;background:var(--ink)}
  .band img{position:relative;inset:auto;height:auto;aspect-ratio:4/5;object-position:74% 50%}
  .band::after{display:none}
  .band .wrap{padding-top:44px;padding-bottom:64px}
}

/* FAQ */
.faq-grid{display:grid;gap:32px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:var(--t-h3);line-height:1.25}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .pm{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(58,53,49,.25);position:relative}
.faq-list .pm::before,.faq-list .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--ink);transform:translate(-50%,-50%)}
.faq-list .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.faq-list details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq-list details p{padding:0 0 28px;max-width:46em}
@media(min-width:900px){.faq-grid{grid-template-columns:1fr 1.6fr;gap:80px}}

/* Final call to action */
.final{background:var(--cream);text-align:center;padding:clamp(72px,12vw,180px) 0}
.final h2{max-width:16ch;margin:18px auto 36px}

/* Wave (CD p. 41) */
.wave{display:block;width:100%;height:clamp(40px,6vw,90px)}

/* Footer */
footer{padding:72px 0 40px}
footer .small,footer li{font-size:var(--t-small);line-height:1.5;color:var(--ink-soft)}
.f-grid{display:grid;gap:40px;grid-template-columns:1fr}
.f-grid .label{margin-bottom:16px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-grid a{text-decoration:none}
.f-grid a:hover{color:var(--berry)}
.f-logo{color:var(--ink)}
.f-logo .logo-svg{width:170px;margin-bottom:18px}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.f-bottom a{text-decoration:none}
@media(min-width:900px){.f-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Legal pages (privacy, terms, legal notice, 404) */
.legal-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;color:var(--ink)}
.legal{max-width:calc(46em + 2 * var(--gutter));padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(64px,8vw,120px)}
.legal h1{margin:16px 0 28px}
.legal h2{margin:40px 0 12px}
.legal p + p{margin-top:12px}
.legal .center{text-align:center}

/* 6 Motion and accessibility */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--berry);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:10px 16px}