/* =========================================================
   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:#7C9296;
  --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);color:#fff}
.btn--accent:hover{background:var(--accent-deep);transform:translateY(-2px)}
.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,.nav__trig[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__caret{width:.78em;height:.78em;transition:transform var(--t2) var(--ease)}
.nav__trig[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
.nav__has{position:relative}
.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)}
.drop__all{display:flex;align-items:center;gap:.4rem;margin:.5rem .75rem 0;padding-top:.65rem;
  border-top:1px solid var(--rule-soft);font-weight:600;font-size:.88rem;color:var(--accent-deep)}
.drop__all .ic{width:.95em;height:.95em;transition:transform var(--t2) var(--ease)}
.drop__all:hover .ic{transform:translateX(4px)}

.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}
.burger span{display:flex;flex-direction:column;gap:4px;width:16px}
.burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:width var(--t2) var(--ease)}
.burger i:last-child{width:11px}
.burger:hover i:last-child{width:16px}

/* ---------- MOBILE SHEET ---------- */
.sheet{position:fixed;inset:0;z-index:300}
.sheet[hidden]{display:none}
.sheet__panel{position:absolute;inset:0;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)}
.sheet__nav ul ul{padding:0 0 1rem;display:grid;gap:.05rem}
.sheet__nav ul ul a{display:block;padding:.45rem 0;min-height:44px;font-size:1rem;color:var(--on-dark-2)}
.sheet__nav ul ul a:hover{color:#fff}
.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,700px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav-h,104px) + 2rem) 0 clamp(5rem,10vw,7rem);
}
.hero__vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:56% 38%}
.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:2;
  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}
.feat__n{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.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)}
.lcard__n{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--lc,var(--accent));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(--sc,var(--accent));
  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 ----------
   Two behaviours, chosen once in main.js block 12:
   .is-live   precise pointer + motion allowed : automatic marquee, the
              duplicate row makes the loop seamless
   .is-manual touch, or reduced motion         : no animation at all, native
              horizontal scrolling with snap, duplicate row removed so the
              same six 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__note{display:block;margin-top:.5rem;font-size:.88rem;color:var(--muted)}
.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{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);background:var(--sand);
  border:1px solid var(--rule-soft);border-radius:16px;overflow:hidden}
.tcard figure{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__flag{margin:0 0 .85rem;align-self:flex-start;
  font-size:.66rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--rule);border-radius:100px;padding:.28rem .6rem}
.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{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(--tc,var(--accent));
  font-size:.76rem;font-weight:600;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(--muted)}

/* ---------- 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}
}