/* =========================================================
   INSPIRED KIDS FAMILY DAY CARE — Round 3
   main.css : tokens, base, components, sections
   Mobile-first. Larger layouts live in responsive.css
   ========================================================= */

/* ---------- FONT : Parkinsans, one variable file, 300-800 ---------- */
@font-face{
  font-family:"Parkinsans";
  src:url("../fonts/parkinsans-variable.woff2") format("woff2");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  /* surfaces : warm, not white */
  --sand:#F1EBE0;
  --sand-2:#E7DDCC;
  --paper:#FCFAF6;
  --ink:#152A2E;
  --ink-2:#1E3B41;
  --body:#4C6367;
  --muted:#4F6266;      /* meets AA at small sizes on paper, sand and sand-2 */
  --rule:rgba(21,42,46,.16);
  --rule-soft:rgba(21,42,46,.09);
  --on-dark:#DEEAEA;
  --on-dark-2:#9DB4B6;

  /* accents : the logo supplies colour, the UI only seasons with it */
  --accent:#0E86BE;
  --accent-deep:#0A6E9D;
  --accent-br:#00ADEF;
  --pink:#EF2194;
  --yellow:#F7DE00;

  /* spacing scale */
  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem;
  --sec:clamp(2.75rem,5.4vw,6.25rem);
  --gut:clamp(1.15rem,3.6vw,2.5rem);
  --wrap:1280px;

  /* shape */
  --r-media:26px;
  --r-card:20px;
  --r-sm:12px;
  --pill:100px;

  --ease:cubic-bezier(.22,.68,.24,1);
  --t1:200ms; --t2:400ms; --t3:750ms;
  --sh:0 2px 6px rgba(21,42,46,.05),0 18px 44px -24px rgba(21,42,46,.4);
  --sh-lg:0 40px 90px -44px rgba(21,42,46,.55);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--sand);color:var(--body);
  font-family:"Parkinsans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;font-size:clamp(1.03rem,.99rem + .25vw,1.19rem);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,picture{max-width:100%}
img{display:block;height:auto}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.06;text-wrap:balance}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* anchor targets clear the bar; --nav-h is measured in main.js, the fallback
   only applies for the split second before the script runs */
section[id],[id^="care-"]{scroll-margin-top:calc(var(--nav-h,96px) + 1rem)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite symbol{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic{width:1.05em;height:1.05em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.vhid{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--accent-br);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:400;
  background:var(--ink);color:#fff;font-weight:600;padding:.85rem 1.6rem;border-radius:0 0 10px 10px;transition:top var(--t1)}
.skip:focus{top:0}

/* ---------- TYPE SCALE ---------- */
.h2{font-weight:600;font-size:clamp(1.95rem,1.2rem + 2.8vw,3.5rem);letter-spacing:-.03em;line-height:1.04}
.h2--light{color:var(--paper)}
.statement{
  font-weight:600;letter-spacing:-.032em;line-height:1.08;color:var(--ink);
  font-size:clamp(1.6rem,1rem + 2.3vw,2.95rem);
  max-width:24ch;margin:0 0 clamp(2rem,4vw,3rem);
}
.statement--tight{max-width:16ch;font-size:clamp(1.95rem,1.15rem + 3vw,4rem);line-height:1.02}
.statement em{font-style:normal;color:var(--accent)}
.eyebrow{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.15rem;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.eyebrow i{width:26px;height:1.5px;background:var(--accent);flex:0 0 auto}
.eyebrow--light{color:var(--on-dark-2)}
.eyebrow--light i{background:var(--accent-br)}

.chip{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;
  padding:.5rem 1.05rem;border-radius:var(--pill);
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.chip--light{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px)}
.chip i{width:4px;height:4px;border-radius:50%;background:var(--accent-br)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:600;font-size:1rem;line-height:1;padding:1.05rem 1.7rem;
  border-radius:var(--pill);border:1.5px solid transparent;min-height:54px;
  transition:background var(--t1) var(--ease),color var(--t1) var(--ease),
             border-color var(--t1) var(--ease),transform var(--t1) var(--ease);
}
.btn .ic{transition:transform var(--t2) var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--accent);transform:translateY(-2px)}
.btn--accent{background:var(--accent-deep);color:#fff}
/* hover keeps the accessible deep blue and signals with lift + shadow;
   reverting to the brighter accent would drop white text to ~4.06:1 */
.btn--accent:hover{background:#095E86;transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(10,110,157,.65)}
.btn--glass{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(255,255,255,.2);border-color:#fff}
.btn--outline{color:var(--paper);border-color:rgba(255,255,255,.45)}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn--wide{width:100%}

.tlink{
  display:inline-flex;align-items:flex-end;gap:.55rem;min-height:44px;
  font-weight:600;color:var(--ink);padding:.7rem 0 .25rem;
  border-bottom:1.5px solid var(--accent);
  transition:color var(--t1),border-color var(--t1);
}
.tlink .ic{transition:transform var(--t2) var(--ease)}
.tlink:hover{color:var(--accent-deep)}
.tlink:hover .ic{transform:translateX(5px)}
.tlink--light{color:var(--paper);border-color:var(--accent-br)}
.tlink--light:hover{color:var(--accent-br)}

/* ---------- UTILITY ---------- */
.util{background:var(--ink);color:var(--on-dark);font-size:.79rem;font-weight:500;position:relative;z-index:80}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px}
.util p{margin:0}
.util__r{display:flex;align-items:center;gap:1.5rem}
.util__r span{display:none;color:var(--on-dark-2)}
.util__r a{display:inline-flex;align-items:center;gap:.45rem;color:#fff;white-space:nowrap;padding:.3rem 0}
.util__r a:hover{color:var(--accent-br)}

/* ---------- NAV ----------
   Sticky, and it gets out of the way: scrolling down slides it up, scrolling
   up brings it back. transform never affects layout, so hiding it cannot
   leave a gap or shift the page. See main.js block 2 for the scroll logic. */
.nav{position:sticky;top:0;z-index:70;padding:.8rem 0;
  transition:padding var(--t2) var(--ease),transform 300ms var(--ease)}
.nav.is-away{transform:translateY(-110%)}
/* belt and braces: a focused control inside the bar always pulls it back,
   even if the script is not running */
.nav:focus-within{transform:none}
.nav::before{content:"";position:absolute;inset:0;background:var(--sand);opacity:0;
  box-shadow:0 10px 34px -26px rgba(21,42,46,.6);transition:opacity var(--t2) var(--ease)}
.nav__in{position:relative;display:flex;align-items:center;gap:1rem}
.nav__logo{flex:0 0 auto;background:var(--paper);border-radius:14px;padding:.55rem .8rem;box-shadow:var(--sh);
  transition:padding var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.nav__logo picture{display:block;width:112px;transition:width var(--t2) var(--ease)}
.nav__logo img{width:100%}
.nav__pill{display:none}
.nav__pill ul{display:flex;align-items:center;gap:.1rem}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font-weight:500;font-size:.98rem;color:var(--ink);padding:.7rem .95rem;border-radius:var(--pill)}
.nav__link::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.42rem;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
.nav__link:hover::after,.nav__link.is-here::after{transform:scaleX(1)}
.nav__caret{width:.78em;height:.78em;transition:transform var(--t2) var(--ease)}

.nav__has{position:relative}
/* Services is a link plus a separate chevron button: clicking the word goes
   to the overview page, clicking the chevron opens the dropdown. Same
   principle as the mobile sheet. */
.nav__pair{display:inline-flex;align-items:center}
.nav__svc{padding-right:.35rem}
.nav__caretbtn{display:inline-flex;align-items:center;justify-content:center;
  width:30px;min-height:44px;padding:0 .35rem 0 0;border:0;background:none;
  color:inherit;cursor:pointer}
.nav__caretbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.nav__caretbtn[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
.nav__cta{display:none;padding:.8rem 1.35rem;min-height:48px;font-size:.94rem}
.nav.is-stuck{padding:.5rem 0}
.nav.is-stuck::before{opacity:1}
.nav.is-stuck .nav__logo{padding:.35rem .6rem}
.nav.is-stuck .nav__logo picture{width:96px}

.drop{position:absolute;top:calc(100% + 10px);left:0;z-index:30;width:248px;
  background:var(--paper);border-radius:20px;border:1px solid var(--rule-soft);
  box-shadow:0 4px 10px rgba(21,42,46,.05),0 22px 46px -20px rgba(21,42,46,.4);
  padding:.7rem}
.drop[hidden]{display:none}
.drop.is-open{animation:dropIn 210ms var(--ease) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drop ul{display:grid;gap:1px}
.drop ul a{display:block;padding:.6rem .75rem;border-radius:11px;
  font-size:.95rem;font-weight:500;color:var(--ink);
  transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.drop ul a:hover{background:var(--sand);color:var(--accent-deep)}

.burger{display:inline-flex;align-items:center;gap:.55rem;margin-left:auto;background:var(--ink);color:var(--paper);
  font-weight:600;font-size:.88rem;padding:.8rem 1.15rem;border-radius:var(--pill);min-height:48px}
/* three bars that morph into an X when the sheet opens */
.burger__box{position:relative;display:block;width:18px;height:14px;flex:0 0 auto}
.burger i{position:absolute;left:0;display:block;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:transform 280ms var(--ease),opacity 180ms var(--ease),width 280ms var(--ease)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px;width:13px}
.burger i:nth-child(3){top:12px}
.burger:hover i:nth-child(2){width:18px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;width:18px}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- MOBILE SHEET ---------- */
.sheet{position:fixed;inset:0;z-index:300}
.sheet[hidden]{display:none}
.sheet__panel{position:absolute;inset:0;height:100vh;height:100dvh;
  max-height:100vh;max-height:100dvh;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--ink);color:var(--on-dark);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:1rem var(--gut) 2.2rem;opacity:0;transform:translateY(-10px);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.sheet.is-open .sheet__panel{opacity:1;transform:none}
.sheet__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.2rem 1.5rem}
.sheet__top img{width:124px;background:var(--paper);border-radius:10px;padding:.45rem .6rem}
.sheet__x{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  display:grid;place-items:center;color:#fff;flex:0 0 auto}
.sheet__x svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sheet__nav > ul > li{border-top:1px solid rgba(255,255,255,.14)}
.sheet__nav > ul > li > a{display:block;padding:.8rem 0;color:#fff;font-weight:600;
  font-size:clamp(1.5rem,6.5vw,2rem);letter-spacing:-.03em}
.sheet__nav > ul > li > a:hover{color:var(--accent-br)}
/* the parent row keeps Services as a link and puts the expander beside it,
   so the overview page stays reachable and the submenu is tap-controlled */
.sheet__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sheet__row > a{flex:1 1 auto;display:block;padding:.8rem 0;color:#fff;font-weight:600;
  font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);letter-spacing:-.02em}
.sheet__row > a:hover{color:var(--accent-br)}
.sheet__toggle{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.28);border-radius:50%;background:transparent;color:#fff;cursor:pointer;
  transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.sheet__toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.sheet__toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform 260ms var(--ease)}
.sheet__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sheet__sub{padding:0 0 1rem;display:grid;gap:.05rem}
.sheet__sub[hidden]{display:none}
.sheet__sub a{display:block;padding:.45rem 0;min-height:44px;font-size:1rem;color:var(--on-dark-2)}
.sheet__sub a:hover{color:#fff}
/* current page marker in the mobile sheet */
.sheet__nav [aria-current="page"]{color:#fff}
.sheet__nav > ul > li > a[aria-current="page"],
.sheet__row > a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent-br)}
.sheet__sub a[aria-current="page"]{color:#fff;font-weight:600}
.sheet__sub a[aria-current="page"]::before{content:"";display:inline-block;
  width:14px;height:2px;background:var(--accent-br);vertical-align:middle;margin-right:.5rem}
.sheet__foot{margin-top:auto;padding-top:1.8rem}
.sheet__tel{margin-top:1.3rem;display:grid;gap:.05rem}
.sheet__tel a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#fff}
.sheet__foot > p{margin:.6rem 0 0;font-size:.88rem;color:var(--on-dark-2)}
body.is-locked{overflow:hidden}

/* ---------- HERO ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  margin-top:calc(-1 * var(--nav-h,104px));
  min-height:clamp(540px,70vh,760px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav-h,104px) + 2rem) 0 clamp(5rem,10vw,7rem);
}
/* Framing for the current hero footage. No transform/scale is used: the
   video is sized with cover only, and object-position keeps the subjects
   centred rather than zooming in harder. */
.hero__vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(10,26,29,.55) 0%,rgba(10,26,29,.22) 34%,rgba(10,26,29,.52) 78%,rgba(10,26,29,.78) 100%),
    radial-gradient(120% 90% at 50% 55%,rgba(10,26,29,.42) 0%,rgba(10,26,29,.62) 100%);
}
.hero__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero__h1{
  color:#fff;font-weight:700;letter-spacing:-.042em;line-height:.98;
  font-size:clamp(2.5rem,1.2rem + 5vw,5.3rem);
  margin:0 0 1.05rem;text-shadow:0 2px 40px rgba(10,26,29,.4);
}
.hero__sub{color:rgba(255,255,255,.92);max-width:46ch;margin:0 0 1.8rem;
  font-size:clamp(1.05rem,.99rem + .45vw,1.24rem);line-height:1.55;text-shadow:0 1px 20px rgba(10,26,29,.45)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.vbtn{position:absolute;right:var(--gut);bottom:clamp(4.75rem,9vw,6rem);z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:1.5px solid rgba(255,255,255,.45);background:rgba(10,26,29,.4);backdrop-filter:blur(6px);
  transition:background var(--t1),border-color var(--t1)}
.vbtn:hover{background:rgba(10,26,29,.7);border-color:#fff}
.vbtn .ic{width:14px;height:14px}
.vbtn__y{display:none}
.vbtn[aria-pressed="true"] .vbtn__p{display:none}
.vbtn[aria-pressed="true"] .vbtn__y{display:block;margin-left:2px}

/* ---------- FEATURE STRIP (lifted over the hero) ---------- */
.feat{position:relative;z-index:3;margin-top:clamp(-5rem,-9vw,-3.5rem)}
.feat__card{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-lg);
  display:grid;padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,3vw,2.25rem)}
.feat__card li{display:flex;align-items:center;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--rule-soft)}
.feat__ico{width:32px;height:32px;flex:0 0 auto;background:var(--accent);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* url() inside a custom property resolves against this stylesheet, so the
   icon paths live here rather than in an inline style attribute. */
.feat__i--blue   .feat__ico{background:#0E86BE;-webkit-mask-image:url("../images/icons/ccs-approved.png");mask-image:url("../images/icons/ccs-approved.png")}
.feat__i--pink   .feat__ico{background:#D01A80;-webkit-mask-image:url("../images/icons/qualified-educators.png");mask-image:url("../images/icons/qualified-educators.png")}
.feat__i--yellow .feat__ico{background:#B08900;-webkit-mask-image:url("../images/icons/small-groups.png");mask-image:url("../images/icons/small-groups.png")}
.feat__i--green  .feat__ico{background:#5E8226;-webkit-mask-image:url("../images/icons/flexible-care.png");mask-image:url("../images/icons/flexible-care.png")}
.feat__i--warm   .feat__ico{background:#C0691A;-webkit-mask-image:url("../images/icons/home-like-settings.png");mask-image:url("../images/icons/home-like-settings.png")}
.feat__card li:last-child{border-bottom:0}
/* small functional text uses the deeper blue: the brighter accent is
   below AA at this size on cream */
.feat__n{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--accent-deep)}
.feat__card h2{font-size:1rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}

/* ---------- ABOUT ---------- */
.about{padding:var(--sec) 0 0}
.about > .wrap > .eyebrow{justify-content:center}
.about .statement{max-width:26ch;margin-inline:auto;text-align:center}
.phil{display:grid;gap:clamp(2.25rem,5vw,3.5rem)}
.phil__art{position:relative;padding-bottom:3.5rem}
.phil__shape{position:absolute;left:-2%;top:-3%;width:62%;aspect-ratio:1;border-radius:38% 62% 55% 45%/48% 40% 60% 52%;
  background:rgba(247,222,0,.32);z-index:0}
.phil__main{position:relative;z-index:1;margin:0;border-radius:var(--r-media);overflow:hidden;
  aspect-ratio:5/4;background:var(--sand-2);box-shadow:var(--sh)}
.phil__main img{width:100%;height:100%;object-fit:cover}
.phil__inset{position:absolute;z-index:2;right:0;bottom:0;width:44%;max-width:210px;margin:0;
  aspect-ratio:7/9;overflow:hidden;border-radius:var(--r-card);
  border:8px solid var(--sand);box-shadow:var(--sh)}
.phil__inset img{width:100%;height:100%;object-fit:cover}
.phil__h{font-weight:600;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.6rem,1.1rem + 1.7vw,2.6rem);margin-bottom:1.1rem;max-width:16ch}
.phil__copy p{max-width:48ch}
.phil__copy .tlink{margin-top:1rem}

/* ---------- CARE : the signature section ---------- */
.care{background:var(--ink);color:var(--on-dark);padding:var(--sec) 0;margin-top:var(--sec)}
.care__head{margin-bottom:clamp(2rem,4.5vw,3.25rem)}
.care__head .h2{margin-bottom:1.1rem}
.care__lede{color:var(--on-dark-2);max-width:52ch;margin:0}
.care__item{border-top:1px solid rgba(255,255,255,.16)}
.care__index > .care__item:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.care__row{display:flex;align-items:center;gap:1.1rem;width:100%;text-align:left;padding:1.15rem 0;
  transition:color var(--t1) var(--ease)}
.care__n{font-size:.78rem;font-weight:600;letter-spacing:.1em;color:var(--on-dark-2);transition:color var(--t1)}
.care__name{flex:1;font-weight:600;color:var(--paper);letter-spacing:-.025em;line-height:1.15;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,2.05rem)}
.care__ar{width:20px;height:20px;color:var(--on-dark-2);opacity:0;transform:translateX(-6px);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.care__item.is-on .care__n{color:#F7DE00}
.care__item.is-on .care__ar{opacity:1;transform:none;color:var(--accent-br)}
.care__row:hover .care__name{color:var(--accent-br)}
.care__pane{padding:0 0 1.4rem}
.care__item:not(.is-on) .care__pane{display:none}
.care__media{margin:0 0 1rem;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.care__media img{width:100%;height:100%;object-fit:cover}
.care__desc{margin:0;color:var(--on-dark-2);max-width:48ch;font-size:1rem}
.care__cta{margin-top:1.8rem}

/* ---------- WHY ---------- */
.why{padding:var(--sec) 0}
.why__grid{position:relative;display:grid;gap:var(--s4)}
.why__media{margin:0;border-radius:var(--r-media);overflow:hidden;aspect-ratio:3/2;background:var(--sand-2)}
.why__media img{width:100%;height:100%;object-fit:cover}
.why__panel{background:var(--paper);border-radius:var(--r-card);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--sh)}
.why__list{display:grid;gap:1.2rem}
.why__list li{padding-top:1.1rem;border-top:1px solid var(--rule-soft)}
.why__list h3{font-size:1.06rem;font-weight:600;margin-bottom:.3rem;letter-spacing:-.015em}
.why__list p{margin:0;font-size:.96rem;line-height:1.55;max-width:42ch}

/* ---------- MOVING RIBBON MEDIA FEATURE ----------
   One gentle full-width wave. The visible band is a thick stroke of the
   same path the text is set on, so the type is genuinely attached to the
   curve rather than sitting near it. JS regenerates the wave so its arc
   length matches the phrase exactly, then tiles it for a seamless loop. */
.rib{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(460px,60vh,640px);padding-top:clamp(2.25rem,5vw,4rem)}
.rib__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.rib__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(12,28,32,.34) 0%,
    rgba(12,28,32,.26) 26%,
    rgba(12,28,32,.58) 62%,
    rgba(12,28,32,.90) 100%)}

.rib__band{position:relative;width:100%;overflow:hidden;
  margin-block:clamp(1rem,2.5vw,2rem)}
.rib__svg{display:block;width:118%;margin-left:-9%;height:auto;overflow:visible}
.rib__svg--m{display:none}
.rib__shadow{fill:none;stroke:rgba(10,22,26,.28);stroke-width:118;
  stroke-linecap:butt;transform:translateY(9px)}
.rib__ink{fill:none;stroke:#F6E7C0;stroke-width:112;stroke-linecap:butt}
.rib__txt{fill:#1B2E33;font-family:"Parkinsans",sans-serif;font-weight:600;
  font-size:34px;letter-spacing:.004em;dominant-baseline:middle}
.rib__svg--m .rib__shadow{stroke-width:66;transform:translateY(5px)}
.rib__svg--m .rib__ink{stroke-width:62}
.rib__svg--m .rib__txt{font-size:19px}
.rib__move{will-change:transform}
.rib__svg.is-ready .rib__move{
  animation:ribFlow var(--rib-dur,26s) linear infinite}
@keyframes ribFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--rib-w,1600px)),0,0)}
}

.rib__facts{position:relative;padding-block:clamp(1.75rem,3.5vw,2.75rem) clamp(2rem,4vw,3rem)}
.rib__facts ul{display:grid;gap:1.5rem}
.rib__facts li{position:relative}
.rib__dot{display:block;width:7px;height:7px;border-radius:50%;margin-bottom:.7rem}
.rib__dot--blue{background:#3FB3E8}
.rib__dot--pink{background:#F2529F}
.rib__dot--green{background:#9DC45C}
.rib__dot--yellow{background:#F7DE00}
.rib__facts h3{color:#fff;font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);margin-bottom:.35rem}
.rib__facts p{margin:0;color:rgba(255,255,255,.74);font-size:.94rem;line-height:1.5;max-width:28ch}

/* ---------- LEARNING CARDS ---------- */
.learn{padding:var(--sec) 0}
.learn__head{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.learn__head p{max-width:46ch;margin:0}
.learn__grid{display:grid;gap:clamp(.8rem,1.8vw,1.15rem)}
.lcard{position:relative;background:var(--paper);border:1px solid var(--rule-soft);
  border-radius:var(--r-card);padding:1.5rem 1.4rem 1.6rem;overflow:hidden;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease),border-color var(--t2) var(--ease)}
.lcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--lc,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--rule)}
.lcard:hover::before{transform:scaleX(1)}
/* small numerals read as text, so they use ink rather than the per-card
   accent, which is too light at this size. Card accents remain elsewhere. */
.lcard__n{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--ink);margin-bottom:.9rem}
.lcard h3{font-size:1.08rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.4rem}
.lcard p{margin:0;font-size:.95rem;line-height:1.55}
.lcard--blue{--lc:#0E86BE}
.lcard--pink{--lc:#D01A80}
.lcard--green{--lc:#5E8226}
.lcard--yellow{--lc:#B08900}

/* ---------- MOMENTS ---------- */
.mom{padding:clamp(2.75rem,5.4vw,6.25rem) 0 var(--sec)}
.mom__head{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.mom__head p{max-width:44ch;margin:0}
.mom__head p{max-width:44ch;margin:0}
.mom__grid{display:grid;gap:clamp(.7rem,1.5vw,1.1rem)}
.mom__grid figure{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--sand-2)}
.mom__grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mom__grid figure:hover img{transform:scale(1.04)}
.mom__a{aspect-ratio:25/18}
.mom__b{aspect-ratio:19/25}
.mom__c{aspect-ratio:1}
.mom__d{aspect-ratio:25/18}

.brk{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(380px,48vh,520px);padding-block:clamp(3.25rem,6vw,5rem)}
.brk__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.brk__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(10,26,29,.35) 0%,rgba(10,26,29,.6) 55%,rgba(10,26,29,.78) 100%),
    linear-gradient(to right,rgba(10,26,29,.7) 0%,rgba(10,26,29,.42) 55%,rgba(10,26,29,.24) 100%)}
.brk__in{position:relative;display:grid;gap:clamp(1.5rem,3.5vw,3rem)}
.brk__t{margin:0;color:#fff;font-weight:600;letter-spacing:-.032em;line-height:1.06;
  font-size:clamp(1.8rem,1.1rem + 2.6vw,3.1rem)}
.brk__side p{color:rgba(255,255,255,.88);max-width:46ch;margin:0 0 1.5rem;font-size:1.02rem;line-height:1.6}
.brk__cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- GETTING STARTED ---------- */
.start{background:var(--sand-2);padding:var(--sec) 0}
.start__head{display:grid;gap:1.1rem;justify-items:start;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.start__head .h2{max-width:16ch}
.start__steps{display:grid;gap:clamp(.9rem,2vw,1.25rem);position:relative}
.scard{position:relative;background:var(--paper);border:1px solid var(--rule-soft);
  border-radius:var(--r-card);padding:1.6rem 1.5rem 1.7rem;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.scard__n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--sc-bg);color:var(--ink);
  font-size:.82rem;font-weight:600;letter-spacing:.06em;margin-bottom:1rem}
.scard h3{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.4rem}
.scard p{margin:0;font-size:.96rem;line-height:1.55;max-width:36ch}
.scard--yellow{--sc:#8F6F00;--sc-bg:rgba(247,222,0,.24)}
.scard--pink{--sc:#D01A80;--sc-bg:rgba(239,33,148,.11)}
.scard--green{--sc:#5E8226;--sc-bg:rgba(132,173,66,.18)}

/* ---------- TESTIMONIALS ----------
   Five client reviews, duplicated once (the copy aria-hidden) so the marquee
   loops without a visible jump. Two behaviours, chosen in main.js block 12:
   .is-live   default on every pointer type : automatic right-to-left marquee,
              paused on hover, on focus-within and while .is-held (touch)
   .is-manual reduced motion only           : no animation, native horizontal
              scrolling with snap, duplicate row hidden so the five reviews
              are not scrolled through twice                                */
.tst{background:var(--paper);padding:clamp(3rem,6vw,6.75rem) 0;
  border-block:1px solid var(--rule-soft);overflow:hidden}
.tst__head{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3rem)}
.tst__lede{margin:0;max-width:46ch}
.tst__viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none;padding-inline:var(--gut)}
.tst__viewport::-webkit-scrollbar{display:none}
.tst__track{display:flex;gap:clamp(.85rem,1.8vw,1.25rem);width:max-content}
.tst__row{display:flex;gap:clamp(.85rem,1.8vw,1.25rem);margin:0;padding:0;list-style:none}

/* automatic marquee */
.tst__viewport.is-live{overflow-x:hidden}
.tst__viewport.is-live .tst__track{animation:tstFlow var(--tst-dur,38s) linear infinite}
.tst__viewport.is-live:hover .tst__track,
.tst__viewport.is-live:focus-within .tst__track,
.tst__viewport.is-live.is-held .tst__track{animation-play-state:paused}
@keyframes tstFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--tst-w,50%)),0,0)}}

/* manual scrolling */
.tst__viewport.is-manual{scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  scroll-behavior:smooth}
.tst__viewport.is-manual .tst__track{animation:none;transform:none}
.tst__viewport.is-manual .tst__row[aria-hidden="true"]{display:none}
.tst__viewport.is-manual .tcard{scroll-snap-align:start}

.tcard{flex:0 0 auto;width:clamp(272px,80vw,392px);align-self:stretch;background:var(--sand);
  border:1px solid var(--rule-soft);border-radius:16px;overflow:hidden}
.tcard figure{height:100%;display:flex;flex-direction:column;margin:0;padding:1.5rem 1.5rem 1.4rem;height:100%;display:flex;flex-direction:column}
.tcard__mark{display:block;font-size:2.6rem;line-height:.7;font-weight:700;color:var(--tc,var(--accent));margin-bottom:.75rem}
.tcard__stars{display:flex;gap:.18rem;margin:0 0 .85rem}
.tcard__stars svg{width:17px;height:17px;fill:#B9741A;flex:0 0 auto}
.tcard blockquote{margin:0 0 1.4rem;flex:1}
.tcard blockquote p{margin:0;font-size:1rem;line-height:1.6;color:var(--body)}
.tcard figcaption{margin-top:auto;display:flex;align-items:center;gap:.7rem;
  padding-top:1rem;border-top:1px solid var(--rule-soft)}
.tcard__av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:var(--tc-bg,rgba(14,134,190,.12));color:var(--ink);
  font-size:.8rem;font-weight:700;letter-spacing:.04em}
.tcard__who{display:grid;gap:.1rem;min-width:0}
.tcard__who b{font-weight:600;font-size:.92rem;color:var(--ink)}
.tcard__who em{font-style:normal;font-size:.82rem;color:var(--muted)}
.tcard--blue{--tc:#0E86BE;--tc-bg:rgba(14,134,190,.12)}
.tcard--pink{--tc:#D01A80;--tc-bg:rgba(239,33,148,.11)}
.tcard--green{--tc:#5E8226;--tc-bg:rgba(132,173,66,.16)}
.tcard--yellow{--tc:#B08900;--tc-bg:rgba(247,222,0,.20)}

/* ---------- CARE ENQUIRY FORM ---------- */
.enq{padding:var(--sec) 0}
.enq__in{display:grid;gap:clamp(2rem,4vw,3rem)}
/* the intro is a column so the photograph can absorb whatever height is left
   once the copy is placed; see responsive.css for the two-column behaviour */
.enq__intro{display:flex;flex-direction:column;min-width:0}
.enq__intro h2{margin-bottom:.9rem}
.enq__intro > p{max-width:42ch}
.enq__pic{margin:1.75rem 0 0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--sand-2)}
.enq__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.enq__form{background:var(--paper);border:1px solid var(--rule-soft);border-radius:16px;
  padding:clamp(1.4rem,3.2vw,2.1rem);display:grid;gap:1rem}
.fld{display:grid;gap:.4rem;min-width:0}
.fld label{font-size:.86rem;font-weight:600;color:var(--ink);letter-spacing:.005em}
.fld__opt{font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--sand);
  border:1.5px solid var(--rule-soft);border-radius:12px;padding:.8rem .95rem;
  min-height:50px;transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.fld textarea{min-height:88px;resize:vertical;line-height:1.5}
.fld input::placeholder{color:var(--muted)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--rule)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);background:var(--paper);
  box-shadow:0 0 0 3px rgba(14,134,190,.16)}
.fld__sel{position:relative;display:grid}
.fld__sel select{appearance:none;-webkit-appearance:none;padding-right:2.6rem}
.fld__sel .ic{position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  width:1.05em;height:1.05em;color:var(--muted);pointer-events:none}
.fld.is-bad input,.fld.is-bad select{border-color:#D01A80;background:rgba(239,33,148,.04)}
.fld__err{font-size:.82rem;color:#B01570;min-height:0}
.fld__err:empty{display:none}
.enq__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem}
.enq__or{margin:0;font-size:.92rem;color:var(--muted)}
/* vertical padding on an inline link grows the tap area without changing
   the line box, so the sentence around it does not move */
.enq__or a{font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--accent);
  padding-block:.55rem}
.enq__msg{margin:0;padding:.9rem 1.1rem;border-radius:12px;font-size:.94rem;line-height:1.55;
  background:rgba(14,134,190,.09);border:1px solid rgba(14,134,190,.22);color:var(--ink)}
.enq__msg[hidden]{display:none}
.enq__msg a{font-weight:600;border-bottom:1.5px solid var(--accent)}

/* ---------- FAQ + CONTACT ---------- */
.ask{padding:var(--sec) 0}
.ask__in{display:grid;gap:var(--s4)}
.ask__faq .h2{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.qa{border-top:1px solid var(--rule)}
.qa:last-child{border-bottom:1px solid var(--rule)}
.qa h3{margin:0;font-size:inherit;line-height:inherit;font-weight:inherit}
.qa__q{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;width:100%;text-align:left;
  padding:1.3rem 0;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.4;
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);transition:color var(--t1) var(--ease)}
.qa__q:hover{color:var(--accent-deep)}
.qa__q span{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;margin-top:.2rem;color:var(--muted);
  transition:transform var(--t2) var(--ease),color var(--t1)}
.qa__q span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.qa__q[aria-expanded="true"] span{transform:rotate(45deg);color:#D01A80}
.qa__a{overflow:hidden}
.qa__a[hidden]{display:none}
.qa__a p{margin:0;padding:0 2.5rem 1.5rem 0;max-width:62ch}
.qa__a.is-anim{transition:height var(--t2) var(--ease)}

.ask__card{background:var(--ink);color:var(--on-dark);border-radius:var(--r-card);padding:clamp(1.6rem,4vw,2.5rem);align-self:start}
.ask__h{color:var(--paper);font-weight:600;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem);margin-bottom:1.75rem}
.ask__d{display:grid;gap:.3rem;margin-bottom:1.9rem}
.ask__d dt{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.ask__d dt:first-child{margin-top:0}
.ask__d dd{color:#fff;font-weight:500;line-height:1.55;font-size:1rem}
.ask__fine{display:block;margin-top:.5rem;font-size:.86rem;font-weight:400;color:var(--on-dark-2);max-width:36ch}
.ask__tel{display:flex;flex-wrap:wrap;gap:0 1.75rem}
.ask__tel a{display:inline-flex;align-items:center;min-height:42px;font-weight:600;color:#fff;
  border-bottom:1.5px solid transparent;transition:border-color var(--t1),color var(--t1)}
.ask__tel a:hover{color:var(--accent-br);border-color:var(--accent-br)}

/* ---------- RESOURCES + FINAL CTA ---------- */
.close{padding:0 0 0}
.res{display:grid;gap:var(--s4);padding-bottom:var(--sec)}
.res__head .h2{margin-bottom:1rem;max-width:12ch}
.res__head p{margin:0;font-size:.95rem;max-width:44ch}
.res__list li{border-top:1px solid var(--rule)}
.res__list li:last-child{border-bottom:1px solid var(--rule)}
.res__list a{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0;
  transition:padding-left var(--t2) var(--ease)}
.res__list a:hover{padding-left:.75rem}
.res__list b{font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(1.08rem,1rem + .6vw,1.45rem);transition:color var(--t1)}
.res__list .ic{width:20px;height:20px;color:var(--muted);transition:transform var(--t2) var(--ease),color var(--t1)}
.res__list a:hover b{color:var(--accent-deep)}
.res__list a:hover .ic{transform:translate(3px,-3px);color:#D01A80}

.fin{position:relative;isolation:isolate;background:var(--ink)}
.fin__media{margin:0;overflow:hidden;position:relative;z-index:0}
.fin__media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;aspect-ratio:3/2}
.fin__wrap{position:relative}
.fin__panel{background:var(--ink);color:var(--on-dark);padding:clamp(2rem,5vw,3.25rem) 0 clamp(2.5rem,6vw,4rem)}
.fin__h{color:var(--paper);font-weight:600;letter-spacing:-.035em;line-height:1.03;
  font-size:clamp(1.95rem,1.2rem + 3.1vw,3.6rem);margin-bottom:1rem;max-width:16ch}
.fin__panel p{color:var(--on-dark-2);max-width:44ch;margin-bottom:2rem}
.fin__cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink);color:var(--on-dark-2);padding:clamp(2.75rem,5.5vw,4.5rem) 0 1.75rem;
  border-top:1px solid rgba(255,255,255,.1)}
.foot__grid{display:grid;gap:var(--s4)}
.foot__brand img{width:150px;background:var(--paper);border-radius:10px;padding:.55rem .75rem;margin-bottom:1.1rem}
.foot__brand p{font-size:.95rem;line-height:1.6;margin:0;max-width:34ch}
/* one label treatment across every column, so the heads sit on one line */
.foot__col h2,.foot__contact h2{font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin:0 0 1rem;line-height:1.2}
.foot__col ul{display:grid}
/* the plain link lists only; the contact column styles its own rows below */
.foot__col:not(.foot__contact) li a{display:inline-flex;align-items:center;min-height:36px;
  font-size:.98rem;line-height:1.35;color:var(--on-dark-2);
  transition:color var(--t1) var(--ease),transform var(--t1) var(--ease)}
.foot__col:not(.foot__contact) li a:hover{color:#fff;transform:translateX(3px)}

/* contact : icon in its own fixed column so every row lines up */
.fcon{display:grid;gap:1.35rem}
.fcon__row{display:grid;grid-template-columns:21px 1fr;gap:.75rem;align-items:start}
.fcon__ic{width:19px;height:19px;margin-top:.2rem;flex:0 0 auto;
  fill:none;stroke:var(--on-dark-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fcon__row address,.fcon__hrs{margin:0;color:#fff;font-size:.98rem;line-height:1.5}
.fcon__link{display:block;transition:color var(--t1) var(--ease)}
.fcon__link:hover address{color:var(--accent-br)}
.fcon__link address{display:block}
.fcon__hint{display:flex;align-items:center;gap:.3rem;margin-top:.35rem;
  font-size:.82rem;color:var(--on-dark-2);transition:color var(--t1) var(--ease)}
.fcon__hint .ic{width:.85em;height:.85em}
.fcon__link:hover .fcon__hint{color:var(--accent-br)}
.fcon__tel{display:grid;gap:.1rem}
.fcon__tel a{display:inline-flex;align-items:center;min-height:34px;font-size:.98rem;font-weight:600;color:#fff;
  transition:color var(--t1) var(--ease),transform var(--t1) var(--ease)}
.fcon__tel a:hover{color:var(--accent-br);transform:translateX(3px)}
.fcon__hrs b{display:block;font-weight:600}
.fcon__hrs{color:var(--on-dark-2)}
.fcon__hrs b{color:#fff}

.foot__bar{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.foot__bar p{margin:0}
.foot__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--on-dark-2)}

/* ---------- REVEALS (classes added by JS only) ---------- */
.rv{opacity:0;transform:translateY(20px)}
.rv.is-in{opacity:1;transform:none;transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
.rv-mask img{clip-path:inset(0 0 100% 0);transform:scale(1.05)}
.rv-mask.is-in img{clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path 1s var(--ease),transform 1.4s var(--ease)}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .rv-mask img{clip-path:none!important;transform:none!important}
  .mom__grid figure:hover img,.btn:hover,.lcard:hover,.scard:hover{transform:none}
  .rib__svg.is-ready .rib__move{animation:none}
  /* main.js already picks manual mode here; this is the no-script safety net */
  .tst__viewport.is-live .tst__track{animation:none}
  .tst__viewport.is-live{overflow-x:auto}
}