/* ==========================================================================
   Kinspire Allied Health — static rebuild
   One stylesheet for the whole site. No frameworks, no build step.
   Tokens follow the Kinspire design pack.
   ========================================================================== */

:root{
  /* brand */
  --green:#91AA27;
  --green-d:#7C9221;
  --green-x:#5F7118;
  --lime:#BBDB34;
  --deep:#445B4C;
  --char:#3B3B3B;

  /* neutrals */
  --ink:#2F2F2F;
  --body:#4A4A4A;
  --muted:#6B6B6B;   /* 4.96:1 on the tint, 5.33:1 on white */
  --line:#E4E4E0;
  --tint:#F5F8ED;
  --paper:#FAFAF7;
  --white:#fff;

  /* type — matches the live site's Verdana stack.
     To move to the brand pack, swap --font-head to Quicksand and
     --font-body to Inter, and load them in each page head. */
  --font-head:Verdana, Helvetica, Arial, sans-serif;
  --font-body:Verdana, Helvetica, Arial, sans-serif;

  --shadow-s:0 2px 8px rgba(59,59,59,.06);
  --shadow-m:0 14px 32px rgba(59,59,59,.13), 0 3px 8px rgba(59,59,59,.06);
  --shadow-l:0 34px 80px rgba(59,59,59,.22), 0 10px 24px rgba(59,59,59,.10);

  --r-s:10px; --r-m:16px; --r-l:22px; --r-pill:999px;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--body);background:var(--white);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--green-x);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);font-weight:700;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.05rem,4.3vw,3.3rem);line-height:1.08}
h2{font-size:clamp(1.55rem,2.7vw,2.25rem);line-height:1.2}
h3{font-size:1.14rem;line-height:1.35}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.section{padding:86px 0}
.section--tint{background:var(--tint)}
.section--paper{background:var(--paper)}
.stack>*+*{margin-top:18px}
.center{text-align:center}
.lede{font-size:1.1rem;line-height:1.75;color:var(--body)}

/* A link sitting inside a sentence must not be distinguished by colour alone:
   the brand green against body charcoal is about 2:1, well under the 3:1 that
   colour-only differentiation requires. Underlining is the fix. Buttons, cards
   and chips are excluded, because their shape already marks them as links. */
.prose a:not([class]), .lede a:not([class]), .art-body a:not([class]),
.consent a, p a:not([class]){
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:.07em;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green-x);
  background:var(--tint);border:1px solid rgba(145,170,39,.28);
  padding:7px 15px;border-radius:var(--r-pill);
}
.section-head{max-width:780px;margin:0 auto 52px;text-align:center}
.section-head h2{margin:16px 0 12px}
.section-head p{color:var(--muted)}

/* visually hidden, but reachable by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--char);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;
  padding:13px 24px;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,color .22s,border-color .22s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--lime{background:var(--lime);color:#39450F;box-shadow:0 8px 22px rgba(187,219,52,.34)}
.btn--lime:hover{background:#c8e847;transform:translateY(-2px);box-shadow:0 12px 30px rgba(187,219,52,.44)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(145,170,39,.3)}
.btn--green:hover{background:var(--green-d);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--green-x);border-color:rgba(145,170,39,.5)}
.btn--ghost:hover{background:var(--tint);border-color:var(--green)}
.btn--glass{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(255,255,255,.26);border-color:#fff}
.btn .i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   HEADER  (Option 2)
   Transparent over a hero; solid charcoal on every other page.
   ========================================================================== */
.hdr{position:relative;z-index:600;font-family:var(--font-head)}
.hdr a{text-decoration:none}
.hdr--over{position:absolute;top:0;left:0;right:0}

.util{background:var(--char);color:#EDEDED;font-size:.8rem}
.hdr--over .util{background:rgba(0,0,0,.42);backdrop-filter:blur(8px)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:20px}
.util-l{display:flex;align-items:center;gap:24px}
.util a{color:#EDEDED;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.util a:hover{color:var(--lime)}
.util svg{width:14px;height:14px;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.util-r{opacity:.72}
@media(max-width:900px){.util-l{display:none}.util .wrap{justify-content:center}}

.nav{background:var(--char);position:relative;z-index:20}
.hdr--over .nav{background:transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:94px;gap:20px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:42px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.menu{display:flex;align-items:center;margin-left:auto;flex-wrap:nowrap;min-width:0}
.menu a{
  position:relative;font-size:.78rem;color:rgba(255,255,255,.95);padding:9px 11px;
  border-radius:8px;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.4);
  transition:background .2s;
}
.menu a:hover{background:rgba(255,255,255,.16)}
.menu a[aria-current="page"]{font-weight:700;color:#fff}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2.5px;border-radius:2px;background:var(--lime)}
.navcta{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.burger{
  display:none;width:46px;height:46px;border-radius:12px;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);align-items:center;justify-content:center;
  flex-direction:column;gap:4px;cursor:pointer;
}
.burger i{width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .22s,opacity .22s}
.hdr.is-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.is-open .burger i:nth-child(2){opacity:0}
.hdr.is-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none;background:var(--char)}
.hdr.is-open .drawer{display:block}
.drawer a{display:block;padding:15px 28px;color:#fff;font-size:.92rem;border-top:1px solid rgba(255,255,255,.08)}
.drawer a:hover{background:rgba(255,255,255,.08)}
@media(max-width:1320px){.menu a{font-size:.74rem;padding:9px 9px}}
@media(max-width:1180px){.menu{display:none}.burger{display:flex}}
@media(max-width:640px){.nav .wrap{height:74px}.brand img{height:32px}.btn{padding:11px 16px;font-size:.82rem}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:#2A2A2A;color:#fff}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 40%;animation:slowzoom 24s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(96deg,rgba(38,38,36,.94) 0%,rgba(43,44,38,.86) 32%,rgba(50,54,36,.55) 56%,rgba(62,70,28,.24) 78%,rgba(72,84,24,.12) 100%)}
.hero-glow{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(720px 440px at 84% 12%,rgba(187,219,52,.22),transparent 62%),
  radial-gradient(520px 380px at 6% 94%,rgba(145,170,39,.16),transparent 66%)}
.hero .wrap.hero-inner{position:relative;z-index:10;padding:196px 28px 148px;display:flex;align-items:center;gap:40px}
@media(max-width:1180px){.hero .wrap.hero-inner{padding-top:174px}}
@media(max-width:900px){.hero .wrap.hero-inner{padding-top:148px;padding-bottom:118px;flex-direction:column;align-items:flex-start}}
@media(max-width:640px){.hero .wrap.hero-inner{padding-top:130px}}

.hero-copy{max-width:680px;flex:1 1 auto}
.hero h1{color:#fff;margin:24px 0 0;text-shadow:0 2px 30px rgba(0,0,0,.32)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero-sub{margin-top:20px;color:rgba(255,255,255,.93);font-size:1.14rem;line-height:1.7;max-width:560px;text-shadow:0 1px 14px rgba(0,0,0,.34)}
.hero-sub b{color:#fff}
.hero .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(10px)}
.hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(187,219,52,.24)}
.hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-note{margin-top:16px;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-size:.86rem}
.hero-note svg{width:15px;height:15px;stroke:var(--lime);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-chips{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
.chip{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);color:#fff;
  padding:11px 17px 11px 13px;border-radius:14px;font-weight:700;font-size:.86rem;
  transition:background .22s,transform .22s,border-color .22s;
}
.chip:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);transform:translateY(-3px);text-decoration:none}
.chip svg{width:18px;height:18px;stroke:var(--lime);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* page hero for interior pages — no photo, solid brand band */
.pagehero{background:linear-gradient(140deg,var(--char) 0%,#33391F 58%,var(--green-x) 140%);color:#fff;padding:64px 0 70px}
.pagehero h1{color:#fff;margin-bottom:16px}
.pagehero p{color:rgba(255,255,255,.9);max-width:680px;font-size:1.08rem}
.pagehero .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;margin-bottom:20px}

/* ---------- speech-bubble video button ---------- */
.bubble-hold{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
@media(max-width:900px){.bubble-hold{margin-top:40px;align-items:flex-start}}
.bubble{position:relative;width:190px;height:190px;border:0;background:transparent;padding:0;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent}
@media(max-width:640px){.bubble{width:150px;height:150px}}
.bubble .ring{
  position:absolute;left:50%;top:47%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;border:2px solid rgba(187,219,52,.55);pointer-events:none;
  animation:ringpulse 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.bubble .ring:nth-of-type(2){animation-delay:.9s}
.bubble .ring:nth-of-type(3){animation-delay:1.8s}
@keyframes ringpulse{0%{transform:scale(.72);opacity:.85}70%{opacity:.12}100%{transform:scale(1.42);opacity:0}}
.bubble .shape{position:relative;z-index:2;width:100%;height:100%;overflow:visible;animation:breathe 3.4s ease-in-out infinite;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 0 16px rgba(145,170,39,.6)) drop-shadow(0 0 40px rgba(187,219,52,.34))}
  50%{filter:drop-shadow(0 0 26px rgba(145,170,39,.95)) drop-shadow(0 0 66px rgba(187,219,52,.6))}
}
.bubble:hover .shape{transform:scale(1.06)}
.bubble:active .shape{transform:scale(.99)}
.bubble:focus-visible{outline:none}
.bubble:focus-visible .shape{transform:scale(1.06)}
.bubble:focus-visible .bpath{stroke:#fff;stroke-width:4}
.bubble .play{transform-origin:98px 92px;animation:playpulse 1.9s ease-in-out infinite}
@keyframes playpulse{0%,100%{transform:scale(1);opacity:.96}50%{transform:scale(1.13);opacity:1}}
.bubble-label{color:#fff;font-size:.84rem;font-weight:700;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.bubble-label span{display:block;font-weight:400;opacity:.78;font-size:.76rem;margin-top:3px}

/* ---------- video modal ---------- */
.modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px}
.modal.is-open{display:flex}
.modal-bd{position:absolute;inset:0;background:rgba(20,22,16,.88);backdrop-filter:blur(6px)}
.modal-box{position:relative;width:min(1000px,100%);z-index:2}
.modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6);border:1px solid rgba(187,219,52,.35)}
.modal-frame iframe,.modal-frame video{width:100%;height:100%;border:0;display:block;background:#000}
.modal-close{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:rgba(255,255,255,.25)}
.pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:34px;background:linear-gradient(150deg,var(--char),#2A2E1C);color:#fff}
.pending strong{font-size:1.1rem;color:var(--lime)}
.pending span{font-size:.92rem;opacity:.82;max-width:440px;line-height:1.6}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trustbar{position:relative;z-index:30;margin-top:-62px}
.trust{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-l);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.trust-cell{display:flex;align-items:center;gap:13px;padding:24px 20px;border-right:1px solid #EFEFEC;transition:background .22s}
.trust-cell:last-child{border-right:none}
.trust-cell:hover{background:#FAFBF4}
.trust-ico{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(148deg,rgba(187,219,52,.32),rgba(145,170,39,.18))}
.trust-ico svg{width:21px;height:21px;stroke:var(--green-x);fill:none;stroke-width:2.05;stroke-linecap:round;stroke-linejoin:round}
.trust b{display:block;color:var(--ink);font-size:.92rem;line-height:1.25;font-family:var(--font-head)}
.trust small{display:block;font-size:.78rem;color:var(--muted);margin-top:3px;line-height:1.4}
@media(max-width:1040px){.trust{grid-template-columns:repeat(2,1fr)}.trust-cell:nth-child(2){border-right:none}.trust-cell:nth-child(-n+2){border-bottom:1px solid #EFEFEC}}
@media(max-width:600px){.trust{grid-template-columns:1fr}.trust-cell{border-right:none;border-bottom:1px solid #EFEFEC}.trust-cell:last-child{border-bottom:none}.trustbar{margin-top:-40px}}

/* ==========================================================================
   CARDS & GRIDS
   ========================================================================== */
.grid{display:grid;gap:26px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:30px;box-shadow:var(--shadow-s);transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(145,170,39,.4)}
.card h3{margin-bottom:10px}
.card p{color:var(--body);font-size:.95rem}
.card-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:linear-gradient(148deg,rgba(187,219,52,.3),rgba(145,170,39,.16))}
.card-ico svg{width:25px;height:25px;stroke:var(--green-x);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;font-size:.88rem;color:var(--green-x)}
.card-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.card:hover .card-link svg{transform:translateX(3px)}

/* ticked lists */
.ticks li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--body)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;
  background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7118' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  border:1px solid rgba(145,170,39,.35);
}

/* split feature row */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.split img{border-radius:var(--r-l);box-shadow:var(--shadow-m);width:100%}

/* ---------- team ---------- */
.person{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.person-photo{aspect-ratio:4/5;background:var(--tint);overflow:hidden}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.person-avatar{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:3rem;font-weight:700;color:var(--green-x);background:linear-gradient(150deg,var(--tint),rgba(187,219,52,.25))}
.person-body{padding:26px;flex:1 1 auto;display:flex;flex-direction:column}
.person-role{color:var(--green-x);font-weight:700;font-size:.84rem;margin:5px 0 14px}
.person-body p{font-size:.92rem;color:var(--body)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{background:var(--tint);border:1px solid rgba(145,170,39,.28);color:var(--green-x);font-size:.73rem;font-weight:700;padding:5px 11px;border-radius:var(--r-pill)}
.tag--flag{background:#FFF6E6;border-color:#E8C97A;color:#7A5B12}

/* ---------- forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:34px;box-shadow:var(--shadow-m)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.84rem;color:var(--ink);margin-bottom:7px;font-family:var(--font-head)}
.field .req{color:#B4442F}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(145,170,39,.16)}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.field-row{grid-template-columns:1fr}}
.consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px;font-size:.86rem;color:var(--body)}
.consent input{margin-top:4px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--green)}

/* ---------- callout / notes ---------- */
.callout{background:var(--tint);border-left:3px solid var(--green);border-radius:0 var(--r-m) var(--r-m) 0;padding:22px 26px}
.callout h3{margin-bottom:8px}
.note-pending{background:#FFF6E6;border-left:3px solid #E0A83A;border-radius:0 var(--r-m) var(--r-m) 0;padding:18px 22px;font-size:.9rem;color:#6B5316}
.note-pending b{color:#5A4410}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(140deg,var(--deep) 0%,#3C5344 45%,var(--green-x) 130%);color:#fff;padding:70px 0}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 28px}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- area links ---------- */
.arealist{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.arealist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.arealist{grid-template-columns:1fr}}
.arealist a{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:13px 16px;font-weight:700;font-size:.9rem;color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.arealist a:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-s);text-decoration:none}
.arealist svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.2;flex:0 0 auto}

/* ---------- article body (suburb + blog) ---------- */
.prose{max-width:760px}
.prose h2{margin:38px 0 14px;font-size:1.42rem}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}

/* ---------- blog ---------- */
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:28px;box-shadow:var(--shadow-s);transition:transform .22s,box-shadow .22s,border-color .22s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(145,170,39,.4);text-decoration:none}
.post time{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.post h3{margin:10px 0 10px;color:var(--ink)}
.post p{color:var(--body);font-size:.93rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--char);color:#C9C9C4;padding:66px 0 0;font-size:.9rem}
.foot h3{color:#fff;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-head)}
.foot a{color:#C9C9C4}
.foot a:hover{color:var(--lime);text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:52px}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-logo img{height:40px;width:auto;filter:brightness(0) invert(1);margin-bottom:18px}
.foot-blurb{line-height:1.75;margin-bottom:20px}
.foot li{margin-bottom:10px}
.foot-contact li{display:flex;gap:10px;align-items:flex-start}
.foot-contact svg{width:15px;height:15px;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:5px;flex:0 0 auto}
.foot-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:7px 14px;font-size:.78rem;font-weight:700;color:#fff}
.foot-badge svg{width:14px;height:14px;stroke:var(--lime);fill:none;stroke-width:2.2}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem}
.foot-bottom ul{display:flex;gap:20px;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero-bg img{transform:scale(1.04)}
}

/* ==========================================================================
   BRAND SURFACES — restored from the live site
   The lime gradient, the floating shapes and the wave were the things that made
   kinspire.com.au look like Kinspire. Rebuilt here rather than approximated:
   the keyframes and geometry come from the live site's own stylesheet.
   ========================================================================== */

/* ---------- the lime gradient band ---------- */
.section--lime{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--green) 0%,#A3C42E 45%,var(--lime) 100%);
  color:#fff;
}
.section--lime h2,.section--lime h3{color:#fff}
.section--lime p{color:rgba(255,255,255,.94)}
.section--lime .eyebrow{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}
.section--lime .section-head p{color:rgba(255,255,255,.9)}
.section--lime > .wrap{position:relative;z-index:3}

/* cards sitting on the lime need their own ground */
.section--lime .card{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.3);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(43,56,10,.22);
}
.section--lime .card h3{color:#fff}
.section--lime .card p{color:rgba(255,255,255,.92)}
.section--lime .card:hover{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.2)}
.section--lime .card-ico{background:rgba(255,255,255,.22)}
.section--lime .card-ico svg{stroke:#fff}
.section--lime .card-link{color:#fff}
.section--lime .ticks li{color:rgba(255,255,255,.94)}
.section--lime .ticks li::before{
  background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7118' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:rgba(255,255,255,.5);
}

/* ---------- floating shapes ---------- */
/* Soft translucent circles drifting behind a section. Purely decorative, so the
   layer is aria-hidden and never takes pointer events. */
.shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.shapes span{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 62%,transparent 72%);
  opacity:.1;
  animation:floatShape 12s infinite ease-in-out;
  will-change:transform,opacity;
}
/* on light sections the circles are green rather than white */
.section--tint .shapes span,
.section--paper .shapes span,
.section:not(.section--lime):not(.cta-band) .shapes span{
  background:radial-gradient(circle at 34% 30%,rgba(145,170,39,.55),rgba(187,219,52,.16) 62%,transparent 72%);
}

@keyframes floatShape{
  0%,100%{transform:translateY(0) translateX(0) rotate(0deg);opacity:.10}
  25%    {transform:translateY(-40px) translateX(20px) rotate(90deg);opacity:.30}
  50%    {transform:translateY(-20px) translateX(-30px) rotate(180deg);opacity:.15}
  75%    {transform:translateY(-60px) translateX(10px) rotate(270deg);opacity:.25}
}

.shapes .s1{width:80px;height:80px;left:10%;top:20%;animation-delay:0s}
.shapes .s2{width:120px;height:120px;right:15%;top:30%;animation-delay:2s}
.shapes .s3{width:60px;height:60px;left:70%;bottom:25%;animation-delay:4s}
.shapes .s4{width:100px;height:100px;left:20%;bottom:40%;animation-delay:6s}
.shapes .s5{width:200px;height:200px;right:6%;bottom:8%;animation-delay:3s;opacity:.07}
.shapes .s6{width:150px;height:150px;left:44%;top:6%;animation-delay:8s;opacity:.08}
@media(max-width:700px){.shapes .s2,.shapes .s5,.shapes .s6{display:none}}

/* ---------- the wave ---------- */
.wave{
  position:absolute;bottom:0;left:0;width:120%;height:150px;z-index:2;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C300,120 600,0 900,60 C1050,90 1200,30 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.16)'/%3E%3C/svg%3E") repeat-x;
  animation:waveMove 8s linear infinite;
}
.wave--light{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C300,120 600,0 900,60 C1050,90 1200,30 1200,60 L1200,120 L0,120 Z' fill='rgba(145,170,39,0.07)'/%3E%3C/svg%3E")}
@keyframes waveMove{0%{transform:translateX(0)}100%{transform:translateX(-100px)}}

/* the hero gets the wave too, tucked under the trust bar */
.hero .wave{z-index:5}

/* ---------- floating overlap cards (homepage) ---------- */
.floatcards{position:relative;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.floatcard{
  background:#fff;border-radius:var(--r-m);padding:20px 22px;
  box-shadow:0 22px 50px rgba(43,56,10,.24);
  width:250px;position:relative;
  animation:bob 6s ease-in-out infinite;
}
.floatcard + .floatcard{margin-top:-14px;margin-right:-58px;animation-delay:1.5s}
.floatcard b{display:block;font-family:var(--font-head);color:var(--ink);font-size:.98rem;line-height:1.3}
.floatcard small{display:block;color:var(--muted);font-size:.82rem;margin-top:6px;line-height:1.5}
.floatcard i{
  display:block;width:34px;height:34px;border-radius:50%;margin-top:14px;
  background:linear-gradient(140deg,var(--lime),var(--green));
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:900px){.floatcards{align-items:flex-start;margin-top:34px}
  .floatcard + .floatcard{margin-right:0;margin-left:44px}}

/* ---------- scroll reveal ---------- */
/* Elements start slightly low and faded; site.js adds .in when they enter view.
   If JS never runs, the .reveal class is never applied and content shows
   normally — the base state here is only set once JS confirms it is active. */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal-2{transition-delay:.09s}
html.js .reveal-3{transition-delay:.18s}
html.js .reveal-4{transition-delay:.27s}

/* ---------- richer interaction ---------- */
.card{position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--lime),var(--green));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.card:hover::after{transform:scaleX(1)}

.chip,.arealist a,.post,.trust-cell{will-change:transform}
.btn--lime,.btn--green{position:relative;overflow:hidden}
.btn--lime::after,.btn--green::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.btn--lime:hover::after,.btn--green:hover::after{opacity:1}

@media(prefers-reduced-motion:reduce){
  .shapes span,.wave,.floatcard{animation:none}
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* the float cards need air under the bubble label */
.bubble-hold .floatcards{margin-top:26px}
@media(max-width:1240px){.floatcard{width:225px}}

/* ==========================================================================
   PORTAL
   ========================================================================== */
.btn--portal{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(8px);padding:12px 18px;font-size:.84rem;
}
.btn--portal:hover{background:rgba(255,255,255,.24);border-color:#fff;transform:translateY(-2px)}
.btn--portal svg{width:15px;height:15px;stroke:var(--lime);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.btn--portal span{display:none}}
@media(max-width:560px){.btn--portal{display:none}}

.btn--xl{padding:17px 34px;font-size:1rem}
.btn.is-disabled{opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:none}
.eyebrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.callout h3{display:flex;align-items:center;gap:9px}
.callout h3 svg{width:19px;height:19px;stroke:var(--green-x);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
code{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:5px;font-size:.9em}

/* ==========================================================================
   HEADER v2 — official logo on a light bar
   The official mark is a charcoal wordmark with a green tree. It cannot sit on
   charcoal, so the bar is white. This also matches the live site.
   ========================================================================== */
.hdr{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.07)}
.hdr.hdr--over{position:relative;background:#fff}   /* never transparent now */
.hdr--over .util,.util{background:var(--char)}
.nav,.hdr--over .nav{background:#fff}
.brand img{filter:none;height:46px}                  /* official artwork, unaltered */
.menu a{color:var(--ink);text-shadow:none;font-weight:600}
.menu a:hover{background:var(--tint);color:var(--green-x)}
.menu a[aria-current="page"]{color:var(--green-x)}
.menu a[aria-current="page"]::after{background:var(--green)}
.burger{border-color:var(--line);background:var(--tint);backdrop-filter:none}
.burger i{background:var(--ink)}
.drawer{background:#fff;border-top:1px solid var(--line)}
.drawer a{color:var(--ink);border-top-color:var(--line)}
.drawer a:hover{background:var(--tint)}
.btn--portal{background:var(--tint);color:var(--green-x);border-color:rgba(145,170,39,.4)}
.btn--portal:hover{background:#eaf0d8;border-color:var(--green)}
.btn--portal svg{stroke:var(--green-x)}
.foot-logo img{filter:brightness(0) invert(1)}       /* footer stays dark */
@media(max-width:640px){.brand img{height:36px}}

/* sticky header */
.hdr{position:sticky;top:0;z-index:600}
@media(max-width:640px){.hdr .util{display:none}}

/* ---------- the book bar, directly under the header ---------- */
.bookbar{
  background:linear-gradient(100deg,var(--green) 0%,#A3C42E 60%,var(--lime) 130%);
  color:#fff;position:relative;overflow:hidden;
}
.bookbar .wrap{
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:14px 28px;flex-wrap:wrap;position:relative;z-index:2;
}
.bookbar p{font-family:var(--font-head);font-weight:700;font-size:1rem;color:#fff}
.bookbar small{display:block;font-weight:400;font-size:.84rem;opacity:.9;margin-top:2px}
.bookbar .btn{background:#fff;color:var(--green-x);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.bookbar .btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.bookbar .btn svg{stroke:var(--green-x)}
@media(max-width:560px){.bookbar .wrap{flex-direction:column;gap:12px;text-align:center}}

/* hero no longer sits under a transparent header */
.hero .wrap.hero-inner{padding-top:96px;padding-bottom:130px}
@media(max-width:900px){.hero .wrap.hero-inner{padding-top:72px;padding-bottom:104px}}

/* ==========================================================================
   SERVICE MAP
   ========================================================================== */
.mapwrap{margin:0}
.map{width:100%;height:auto;display:block;border-radius:var(--r-l);
     border:1px solid var(--line);box-shadow:var(--shadow-m);background:#DCE7F2}
.mapwrap figcaption{margin-top:14px;text-align:center;font-size:.88rem;color:var(--muted)}
.map-cbd circle{fill:#94A3B8}
.map-cbd text{fill:#64748B;font:600 11px var(--font-head);letter-spacing:.02em}
.map-dot{fill:var(--green);stroke:#fff;stroke-width:2.5;transition:r .2s}
.map-label{fill:var(--ink);font:700 12px var(--font-head);pointer-events:none}
.map-pin{cursor:pointer}
.map-pin:hover .map-dot{r:9}
.map-pin:focus-visible{outline:none}
.map-pin:focus-visible .map-dot{r:9;stroke:var(--green-x);stroke-width:3.5}

/* the flash — a ring expanding out of each marker */
.map-ping{
  fill:none;stroke:var(--green);stroke-width:2.5;transform-origin:center;
  animation:ping 3.4s cubic-bezier(.15,.6,.3,1) infinite;
}
.map-ping--2{stroke:var(--lime)}
@keyframes ping{
  0%  {transform:scale(.55);opacity:.9}
  70% {opacity:.06}
  100%{transform:scale(3.6);opacity:0}
}
/* transform-box so scaling happens about the circle, not the SVG origin */
.map-ping{transform-box:fill-box}
@media(max-width:640px){.map-label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.map-ping{animation:none;opacity:.25}}

/* ==========================================================================
   APP DOWNLOAD BAND
   ========================================================================== */
.appband{background:linear-gradient(150deg,var(--deep) 0%,#3C5344 48%,var(--green-x) 130%);
         color:#fff;position:relative;overflow:hidden;padding:82px 0}
.appband h2,.appband h3{color:#fff}
.appband p{color:rgba(255,255,255,.92)}
.appband .wrap{position:relative;z-index:3}
.appband .eyebrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff}
.appgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:900px){.appgrid{grid-template-columns:1fr;gap:40px}}
.appband .ticks li{color:rgba(255,255,255,.94)}
.appband .ticks li::before{
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7118' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:rgba(255,255,255,.45);
}
.appband .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.appband .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* the device */
.phone{
  position:relative;width:280px;margin:0 auto;
  border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#3A3A3A,#1C1C1C 55%,#333);
  box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12) inset;
  animation:bob 7s ease-in-out infinite;
}
.phone::before{  /* the notch */
  content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:104px;height:26px;background:#131313;border-radius:0 0 16px 16px;z-index:3;
}
.phone::after{   /* side button */
  content:"";position:absolute;right:-2px;top:132px;width:3px;height:56px;
  background:#4A4A4A;border-radius:3px;
}
.phone img{width:100%;border-radius:34px;display:block;background:#fff}
@media(max-width:900px){.phone{width:250px}}
@media(prefers-reduced-motion:reduce){.phone{animation:none}}

/* ==========================================================================
   STICKY CONTACT BAR
   ========================================================================== */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:700;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(43,56,10,.13);
  transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.7,.3,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.stickybar.is-up{transform:none}
.stickybar .wrap{display:flex;align-items:center;gap:14px;padding:11px 28px;justify-content:center}
.stickybar .sb-text{margin-right:auto;font-family:var(--font-head)}
.stickybar .sb-text b{display:block;color:var(--ink);font-size:.92rem}
.stickybar .sb-text small{color:var(--muted);font-size:.8rem}
.stickybar .btn{padding:11px 20px;font-size:.86rem}
@media(max-width:820px){.stickybar .sb-text{display:none}.stickybar .wrap{padding:10px 16px}}
@media(max-width:420px){.stickybar .btn{flex:1 1 0;padding:12px 8px;font-size:.82rem}}
/* keep the footer clear of the bar once it is up */
body.has-sticky .foot-bottom{padding-bottom:78px}

/* ==========================================================================
   LIVE AGENT (WhatsApp Business)
   ========================================================================== */
.agent{position:fixed;right:20px;bottom:96px;z-index:710;font-family:var(--font-head)}
@media(max-width:820px){.agent{bottom:86px;right:14px}}
.agent-tab{
  display:flex;align-items:center;gap:11px;cursor:pointer;border:0;
  background:#0F7A6C;color:#fff;padding:12px 18px 12px 14px;border-radius:var(--r-pill);
  box-shadow:0 14px 34px rgba(37,211,102,.42);font-weight:700;font-size:.88rem;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
}
.agent-tab:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(37,211,102,.55)}
.agent-tab svg{width:22px;height:22px;fill:#fff;flex:0 0 auto}
/* The status text is written by JS after load. Reserving the width stops
   the tab resizing under it, which was the only layout shift on the page. */
.agent-tab .agent-status{display:flex;align-items:center;gap:6px;font-weight:400;font-size:.76rem;min-width:15.5em}
.agent-tab .agent-status i{
  width:8px;height:8px;border-radius:50%;background:#EAFBEF;
  box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:live 2.2s ease-out infinite;
}
.agent-tab[data-state="away"] .agent-status i{background:#FFD9A0;animation:none}
@keyframes live{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media(max-width:520px){.agent-tab span.agent-label{display:none}.agent-tab{padding:13px}}

.agent-panel{
  position:absolute;right:0;bottom:calc(100% + 12px);width:312px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 28px 70px rgba(43,56,10,.3);overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
  transition:opacity .24s,transform .24s cubic-bezier(.2,.7,.3,1);
}
.agent.is-open .agent-panel{opacity:1;transform:none;pointer-events:auto}
.agent-head{background:#075E54;color:#fff;padding:15px 17px;display:flex;align-items:center;gap:11px}
.agent-head .avatar{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.agent-head .avatar img{width:26px;height:auto}
.agent-head b{display:block;font-size:.92rem}
.agent-head small{opacity:.85;font-size:.76rem;display:flex;align-items:center;gap:6px}
.agent-head small i{width:7px;height:7px;border-radius:50%;background:#5EF08F}
.agent-head[data-state="away"] small i{background:#FFD9A0}
.agent-body{padding:17px;background:#ECE5DD}
.agent-bubble{background:#fff;border-radius:4px 12px 12px 12px;padding:12px 14px;font-size:.88rem;line-height:1.55;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1);font-family:var(--font-body)}
.agent-bubble + .agent-bubble{margin-top:9px}
.agent-foot{padding:13px 17px 17px;background:#ECE5DD}
.agent-foot .btn{width:100%;background:#0F7A6C;color:#fff;box-shadow:none}
.agent-foot .btn:hover{background:#1FBB59;transform:none}
.agent-foot p{margin-top:9px;font-size:.74rem;color:#5B6157;text-align:center;line-height:1.5}
.agent-close{position:absolute;top:11px;right:11px;width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;cursor:pointer;font-size:.9rem;line-height:1}

/* ==========================================================================
   ABOUT — organic images and the tree timeline
   ========================================================================== */
/* Images shaped like the logo's bubbles rather than boxed off in rectangles. */
.blob{position:relative}
.blob img{width:100%;display:block;
  border-radius:58% 42% 46% 54% / 46% 52% 48% 54%;
  box-shadow:0 26px 60px rgba(43,56,10,.24);
}
.blob--alt img{border-radius:44% 56% 58% 42% / 54% 44% 56% 46%}
.blob::after{  /* a soft leaf echoing behind it */
  content:"";position:absolute;inset:-16px -16px auto auto;width:56%;height:56%;
  background:radial-gradient(circle at 35% 32%,rgba(187,219,52,.5),rgba(145,170,39,.12) 60%,transparent 72%);
  border-radius:58% 42% 46% 54% / 46% 52% 48% 54%;z-index:-1;
}
.blob--tint{background:none}

/* Text that wraps around the image rather than sitting beside a block. */
.wrapfloat{overflow:hidden}
.wrapfloat .blob{float:right;width:44%;margin:6px 0 22px 34px;shape-outside:ellipse(48% 48%)}
.wrapfloat.wrapfloat--left .blob{float:left;margin:6px 34px 22px 0}
@media(max-width:760px){.wrapfloat .blob{float:none;width:100%;margin:0 0 24px}}

/* ---------- the tree timeline ---------- */
/* A trunk down the middle with milestones hanging off it as leaf-bubbles,
   echoing the logo. On narrow screens the trunk moves left and every milestone
   stacks on one side. */
.tree{position:relative;max-width:900px;margin:0 auto;padding:12px 0 0}
.tree::before{  /* the trunk */
  content:"";position:absolute;left:50%;top:0;bottom:54px;width:6px;
  transform:translateX(-50%);border-radius:6px;
  background:linear-gradient(180deg,var(--lime),var(--green) 22%,var(--green-x));
}
.tree-node{position:relative;width:50%;padding:0 46px 46px 0;box-sizing:border-box}
.tree-node:nth-child(even){margin-left:50%;padding:0 0 46px 46px}
.tree-node .tree-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px 26px;box-shadow:var(--shadow-s);position:relative;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s;
}
.tree-node:hover .tree-card{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(145,170,39,.45)}
.tree-card h3{margin-bottom:7px}
.tree-card p{font-size:.94rem;color:var(--body)}
.tree-when{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-x);margin-bottom:9px}

/* the leaf-bubble on the trunk */
.tree-node .leaf{
  position:absolute;top:20px;right:-19px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--lime),var(--green));
  border-radius:50% 50% 50% 8%;                 /* circle with the bubble tail */
  box-shadow:0 6px 18px rgba(145,170,39,.5),0 0 0 5px #fff;
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:.85rem;z-index:2;
}
.tree-node:nth-child(even) .leaf{right:auto;left:-19px;border-radius:50% 50% 8% 50%}
/* a branch connecting the leaf to the card */
.tree-node .twig{position:absolute;top:38px;right:0;width:46px;height:2px;background:rgba(145,170,39,.4)}
.tree-node:nth-child(even) .twig{right:auto;left:0}

@media(max-width:820px){
  .tree::before{left:23px;transform:none}
  .tree-node,.tree-node:nth-child(even){width:100%;margin-left:0;padding:0 0 34px 62px}
  .tree-node .leaf,.tree-node:nth-child(even) .leaf{left:5px;right:auto;top:16px;border-radius:50% 50% 8% 50%}
  .tree-node .twig,.tree-node:nth-child(even) .twig{left:43px;right:auto;width:20px;top:34px}
}

/* ==========================================================================
   RESOURCES — visible covers
   ========================================================================== */
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:26px}
.cover{display:block;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.cover:hover{transform:translateY(-6px);text-decoration:none}
.cover-img{
  position:relative;aspect-ratio:210/297;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,var(--tint),#E4EDCE);
  border:1px solid var(--line);box-shadow:0 14px 32px rgba(43,56,10,.18);
  transition:box-shadow .25s;
}
.cover:hover .cover-img{box-shadow:0 22px 50px rgba(43,56,10,.3)}
.cover-img img{width:100%;height:100%;object-fit:cover;display:block}
.cover-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 16px}
.cover-fallback .cf-top{font-family:var(--font-head);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-x)}
.cover-fallback .cf-title{font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1.25;color:var(--ink)}
.cover-fallback .cf-mark{width:34px;height:auto;opacity:.55}
.cover-code{position:absolute;top:10px;right:10px;background:var(--green-x);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:.68rem;padding:4px 8px;border-radius:5px}
.cover-meta{margin-top:13px}
.cover-meta b{display:block;font-family:var(--font-head);font-size:.92rem;color:var(--ink);line-height:1.35}
.cover-meta small{display:block;color:var(--muted);font-size:.78rem;margin-top:4px}
.cover-flag{display:inline-block;margin-top:6px;background:#FFF6E6;border:1px solid #E8C97A;color:#7A5B12;
  font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}

/* ==========================================================================
   NAV DROPDOWN (Educator Program)
   ========================================================================== */
.has-sub{position:relative}
.has-sub > a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}
.subnav{
  position:absolute;top:100%;left:0;min-width:268px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:40;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav a{display:block;padding:10px 13px;border-radius:9px;font-size:.82rem;
  color:var(--ink);white-space:normal;line-height:1.4}
.subnav a small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px;font-weight:400}
.subnav a:hover{background:var(--tint);color:var(--green-x)}
/* the drawer renders the children indented instead */
.drawer .sub a{padding-left:48px;font-size:.86rem;color:var(--body)}

/* second book-bar action: outlined on the green, not a white-on-white pill */
.bookbar .bookbar-alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.75);box-shadow:none}
.bookbar .bookbar-alt:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px);box-shadow:none}

/* Decorative shapes must always sit behind content, not just on lime sections.
   Without this the drifting circles paint over text in any section that has
   them, because .shapes is positioned and the content is not. */
.section,.pagehero,.appband,.cta-band,.bookbar{position:relative}
.section > .wrap,
.pagehero > .wrap,
.appband > .wrap,
.cta-band > .wrap,
.bookbar > .wrap{position:relative;z-index:3}
.shapes{z-index:0}

/* .cover-img and .cover-meta are <span>s. Without an explicit block display the
   aspect-ratio and sizing are ignored (inline boxes don't take them), the image
   overflows, and the absolutely-positioned code badge anchors to the wrong box. */
.cover-img,.cover-meta{display:block}

/* footer socials — accounts that do not exist yet render as plain text, so the
   footer never links somewhere that 404s */
.foot-social{display:flex;flex-wrap:wrap;gap:8px 16px}
.foot-social li{margin-bottom:6px}
/* On the charcoal footer these need 4.5:1 to be readable. The old grey was
   3.2:1, and the "soon" tag dropped to 2.3:1 once its opacity was applied. */
.soc-soon{color:#B0B0AA;font-size:.86rem}
.soc-soon em{font-style:normal;font-size:.72rem;color:#A8A8A2}
.foot-badge{margin-bottom:6px}

/* ---------- price cards ---------- */
.price-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}
.price-head h3{margin-bottom:4px}
.price-sub{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-x)}
.section--lime .price-sub{color:rgba(255,255,255,.85)}
.price-tag{flex:0 0 auto;text-align:right}
.price-tag b{display:block;font-family:var(--font-head);font-size:1.6rem;line-height:1;color:var(--green-x)}
.price-tag small{display:block;font-size:.72rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.section--lime .price-tag b,.section--lime .price-tag small{color:#fff}
.section--tint .price-tag b{color:var(--green-x)}
@media(max-width:520px){.price-head{flex-direction:column;gap:10px}.price-tag{text-align:left}}

/* dropdown group heading */
.subnav-group{
  display:block;margin:8px 0 2px;padding:8px 13px 6px!important;
  font-size:.7rem!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-x)!important;border-top:1px solid var(--line);border-radius:0!important;
}
.subnav-group:hover{background:transparent!important;text-decoration:underline}

/* ---------- app screen gallery ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
@media(max-width:1080px){.shots{grid-template-columns:repeat(2,1fr);gap:40px}}
@media(max-width:560px){.shots{grid-template-columns:1fr}}
.shot{margin:0;text-align:center}
.shot figcaption{margin-top:20px}
.shot figcaption b{display:block;font-family:var(--font-head);font-size:1rem;color:var(--ink)}
.shot figcaption span{display:block;font-size:.88rem;color:var(--muted);margin-top:6px;line-height:1.55}
.phone--sm{width:100%;max-width:230px;border-radius:34px;padding:8px;animation:none}
.phone--sm::before{width:80px;height:20px;top:8px;border-radius:0 0 12px 12px}
.phone--sm::after{top:104px;height:42px}
.phone--sm img{border-radius:27px}

/* ==========================================================================
   BLOG — cards with images, plus a filtering sidebar
   ========================================================================== */
.bloglayout{display:grid;grid-template-columns:272px 1fr;gap:46px;align-items:start}
@media(max-width:960px){.bloglayout{grid-template-columns:1fr;gap:34px}}

.blogside{position:sticky;top:120px;display:flex;flex-direction:column;gap:26px}
@media(max-width:960px){.blogside{position:static}}
.side-block{padding-bottom:22px;border-bottom:1px solid var(--line)}
.side-block:last-child{border-bottom:0;padding-bottom:0}
.side-label{display:block;font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-x);margin-bottom:11px}
.blogside input[type="search"],.blogside select{
  width:100%;font-family:var(--font-body);font-size:.92rem;color:var(--ink);
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
}
.blogside input:focus,.blogside select:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(145,170,39,.16)}
.filters{display:flex;flex-wrap:wrap;gap:7px}
.filter{
  font-family:var(--font-head);font-size:.79rem;font-weight:700;cursor:pointer;
  padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;color:var(--body);transition:background .2s,border-color .2s,color .2s;
}
.filter:hover{border-color:var(--green);color:var(--green-x)}
.filter.is-on{background:var(--green-x);border-color:var(--green-x);color:#fff}
.side-recent{display:flex;flex-direction:column;gap:14px}
.side-recent a{display:block;font-family:var(--font-head);font-weight:700;font-size:.88rem;
  color:var(--ink);line-height:1.35}
.side-recent a:hover{color:var(--green-x);text-decoration:none}
.side-recent small{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}
.side-cta{background:var(--tint);border:1px solid rgba(145,170,39,.28);border-radius:var(--r-m);
  padding:22px;border-bottom:0}
.side-cta h3{font-size:1rem;margin-bottom:8px}
.side-cta p{font-size:.88rem;color:var(--body);margin-bottom:16px}
.side-cta .btn{width:100%;font-size:.85rem;padding:11px 16px}

.blogcount{font-size:.86rem;color:var(--muted);margin-bottom:20px}
.blogempty{padding:40px;text-align:center;color:var(--muted);background:var(--paper);
  border-radius:var(--r-m);border:1px dashed var(--line)}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:1180px){.posts{grid-template-columns:1fr}}

/* the card is an <a>, so its children are spans made block */
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s);padding:0;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);
  border-color:rgba(145,170,39,.45);text-decoration:none}
.post-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.post:hover .post-img img{transform:scale(1.05)}
.post-body{display:block;padding:24px}
.post-meta{display:flex;align-items:center;gap:11px;margin-bottom:11px;flex-wrap:wrap}
.post-cat{display:inline-block;background:var(--tint);border:1px solid rgba(145,170,39,.3);
  color:var(--green-x);font-family:var(--font-head);font-size:.7rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.post-meta time{font-size:.78rem;color:var(--muted)}
.post-title{display:block;font-family:var(--font-head);font-weight:700;font-size:1.1rem;
  line-height:1.32;color:var(--ink);margin-bottom:10px}
.post-ex{display:block;font-size:.92rem;color:var(--body);line-height:1.65;margin-bottom:14px}
.post .card-link{display:inline-flex}

/* organic image tiles used in the About lifespan row */
.blob--tile{margin:0}
.blob--tile img{aspect-ratio:4/3;object-fit:cover}
.blob--tile figcaption{margin-top:18px;font-size:.9rem;color:var(--body);line-height:1.6;text-align:center;padding:0 8px}
.blob--tile::after{inset:-12px -12px auto auto;width:46%;height:46%}

/* The gallery screenshots include the app's own status area, so a full-size
   notch covers the greeting. Keep a slim pill on the small frames. */
.phone--sm::before{width:58px;height:14px;top:8px;border-radius:0 0 9px 9px}

/* ---------- article pages ---------- */
.articlewrap{max-width:820px}
.crumbs{margin-bottom:22px;font-size:.88rem}
.art-h1{margin:16px 0 10px}
.art-meta{color:var(--muted);font-size:.9rem;margin-bottom:28px}
.art-hero{margin:0 0 34px}
.art-hero img{width:100%;border-radius:var(--r-l);box-shadow:var(--shadow-m)}
.art-body h2{margin:36px 0 12px;font-size:1.5rem}
.art-body h3{margin:28px 0 10px}
.art-body p{margin-bottom:16px}
.art-body ul{margin:0 0 18px;padding-left:0}
.art-body li{position:relative;padding-left:26px;margin-bottom:9px}
.art-body li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--green)}
.art-body blockquote{margin:24px 0;padding:18px 24px;background:var(--tint);
  border-left:3px solid var(--green);border-radius:0 var(--r-m) var(--r-m) 0}
.art-body img{border-radius:var(--r-m);margin:22px 0}
.art-body hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.art-body a{text-decoration:underline}

/* honeypot — off-screen rather than display:none, which some bots detect */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   ORGANIC IMAGE SHAPES
   Nothing on this site sits in a plain rectangle. Images take one of three
   shapes drawn from the brand: the speech bubble from the logo, a paint
   splash, and a soft leaf. All are clip-paths on a plain <img>, so they crop
   without needing pre-cut artwork.
   ========================================================================== */

.clipdefs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- the speech bubble ----------
   Body: the photograph, masked to the logo's round blob.
   Tail: a solid green spike stemming from the bottom left, drawn separately so
   it always reads as a tail rather than whatever the photo happens to show. */
.figpic{position:relative;margin:0}
.figpic .pic{position:relative;display:block;width:100%;aspect-ratio:1/1}
.figpic .pic img{width:100%;height:100%;object-fit:cover;display:block}

.shape-bubble img{
  -webkit-clip-path:url(#clipBubble); clip-path:url(#clipBubble);
}
.shape-bubble--flip{transform:scaleX(-1)}
.shape-bubble--flip img{transform:scaleX(-1)}

.shape-splash img{-webkit-clip-path:url(#clipSplash);clip-path:url(#clipSplash)}
.shape-leaf img{-webkit-clip-path:url(#clipLeaf);clip-path:url(#clipLeaf)}

.figpic--wide .pic{aspect-ratio:5/4}
/* a soft brand echo behind, so the cut shape reads as deliberate */
.figpic::before{
  content:"";position:absolute;z-index:-1;right:-4%;bottom:-4%;width:52%;height:52%;
  background:radial-gradient(circle at 40% 36%,rgba(187,219,52,.45),rgba(145,170,39,.12) 60%,transparent 74%);
  border-radius:58% 42% 46% 54% / 46% 52% 48% 54%;
}
.figpic figcaption{margin-top:16px;font-size:.9rem;color:var(--body);line-height:1.6;text-align:center}
.figpic figcaption b{font-family:var(--font-head);color:var(--ink)}

/* text flowing around a shaped image rather than beside a block */
.wrapfloat{overflow:hidden}
/* No shape-outside here. The tail juts down and left beyond any ellipse we
   could describe, so text flowed underneath it. Wrapping to the float's full
   box costs a little whitespace and guarantees nothing is ever covered. */
.wrapfloat .figpic{float:right;width:40%;margin:0 0 24px 40px}
.wrapfloat--left .figpic{float:left;margin:0 36px 20px 0}
@media(max-width:760px){.wrapfloat .figpic{float:none;width:78%;margin:0 auto 26px}}

/* ==========================================================================
   CONTRAST FIXES
   ========================================================================== */
/* "Why families choose us" — white text was sitting on a pale lime tint.
   Cards on a lime section now get a deep ground so the copy is legible. */
.section--lime .card{
  background:rgba(38,48,14,.62);
  border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(3px);
}
.section--lime .card h3{color:#fff}
.section--lime .card p,.section--lime .card li{color:rgba(255,255,255,.93)}
.section--lime .card:hover{background:rgba(38,48,14,.72);border-color:rgba(255,255,255,.38)}
.section--lime .card-ico{background:rgba(255,255,255,.16)}
.section--lime .card-ico svg{stroke:#EAF5C4}
.section--lime .card-link{color:#DCEB9A}
.section--lime .ticks li{color:rgba(255,255,255,.94)}

/* A card sitting on a lime band was green-on-green-on-green. Make it white
   so it reads as a distinct panel. */
.section--lime .card--panel{
  background:#fff;border-color:var(--line);backdrop-filter:none;
}
.section--lime .card--panel h3{color:var(--ink)}
.section--lime .card--panel p,.section--lime .card--panel li{color:var(--body)}
.section--lime .card--panel .card-ico{background:linear-gradient(148deg,rgba(187,219,52,.32),rgba(145,170,39,.18))}
.section--lime .card--panel .card-ico svg{stroke:var(--green-x)}
.section--lime .card--panel:hover{background:#fff}

/* ---------- download gate ---------- */
.cover{border:0;background:none;padding:0;text-align:left;font:inherit;cursor:pointer;width:100%}
.cover-get{
  position:absolute;left:0;right:0;bottom:0;padding:11px 12px;
  background:linear-gradient(to top,rgba(43,56,10,.92),rgba(43,56,10,.72) 70%,transparent);
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:.78rem;
  display:flex;align-items:center;justify-content:center;gap:7px;
  opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;
}
.cover-get svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2}
.cover:hover .cover-get,.cover:focus-visible .cover-get{opacity:1;transform:none}
.cover:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:14px}
.dlgate .dlbox{width:min(460px,100%)}
.dlgate .modal-close{top:-46px}
.dlgate .card{background:#fff}

/* ==========================================================================
   OVERSCROLL
   The header is sticky at top:0 and the body is white, so rubber-band
   scrolling past the top of the page exposed white above the dark utility
   bar. Painting <html> charcoal means the overscroll area matches the bar it
   sits behind. The footer is the same colour, so the bottom bounce matches too.
   ========================================================================== */
/* <picture> wraps the WebP sources. display:contents keeps it out of the
   layout entirely, so every existing rule that targets img still applies. */
picture{display:contents}

html{background:var(--char)}
body{background:var(--white)}
/* Safari and iOS paint the top bounce from the theme colour as well. */
@supports (overscroll-behavior:none){
  body{overscroll-behavior-y:none}
}

/* The bubble tail lives in the bottom-left of the box, so the box needs to be
   taller than it is wide or the tail gets squashed into a sliver. */
.figpic .pic.shape-bubble{aspect-ratio:6/5}
.figpic .pic.shape-bubble img{object-position:50% 30%}

/* ==========================================================================
   INLINE ICON SAFETY
   An <svg> with a viewBox and no width/height fills its container. Icons
   dropped straight into a heading had no sizing rule and rendered as huge
   black shapes. This sizes them to the text, and the last rule is a backstop
   so an unstyled icon can never blow up a layout again.
   ========================================================================== */
h1 > svg, h2 > svg, h3 > svg, h4 > svg,
.callout h3 > svg, .card h3 > svg{
  width:1.05em; height:1.05em; flex:0 0 auto;
  vertical-align:-.13em; margin-right:.42em;
  stroke:var(--green-x); fill:none;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.section--lime .card h3 > svg,
.cta-band h2 > svg,
.appband h2 > svg,
.appband h3 > svg{stroke:#DCEB9A}
/* Backstop: no inline icon anywhere may exceed its line. */
svg:not([class]):not([width]){max-width:1.6em;max-height:1.6em}
.clipdefs{max-width:0;max-height:0}