:root{
  --brand:#02ADB5; --brand-deep:#017F88; --brand-soft:#D8F2F3;
  --ink:#393D46; --ink-2:#6B7280; --mist:#EEF6F7; --surface:#FFFFFF;
  --line:#E2EAEC; --vital:#FF5D73; --page:#FFFFFF;
  --shadow:0 18px 40px -24px rgba(2,60,64,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#2BC6CE; --brand-deep:#7FE3E8; --brand-soft:#0E3034;
    --ink:#E7EEF0; --ink-2:#9FB0B4; --mist:#11191C; --surface:#151E22;
    --line:#223136; --page:#0C1316; --vital:#FF7E90;
    --shadow:0 18px 40px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --brand:#2BC6CE; --brand-deep:#7FE3E8; --brand-soft:#0E3034;
  --ink:#E7EEF0; --ink-2:#9FB0B4; --mist:#11191C; --surface:#151E22;
  --line:#223136; --page:#0C1316; --vital:#FF7E90;
  --shadow:0 18px 40px -24px rgba(0,0,0,.7);
}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--page);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.font-display{font-family:Outfit,system-ui,sans-serif;letter-spacing:-.02em}
img{max-width:100%}
::selection{background:var(--brand);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}

.wrap{width:min(1180px,92vw);margin-inline:auto}
.grain{background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

.trace{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.6s linear infinite}
@keyframes draw{to{stroke-dashoffset:-1400}}
.blip{animation:blip 1.1s ease-in-out infinite}
@keyframes blip{0%,100%{transform:scale(1);opacity:.85}45%{transform:scale(1.28);opacity:1}}
.heart{animation:beat 1.1s ease-in-out infinite;transform-origin:center}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.13)}34%{transform:scale(1)}52%{transform:scale(1.07)}}
.ring{animation:ring 2.8s ease-out infinite}
.ring2{animation-delay:.95s}
.ring3{animation-delay:1.9s}
@keyframes ring{0%{r:26;opacity:.5}100%{r:48;opacity:0}}
.floaty{animation:floaty 6s ease-in-out infinite}
.floaty2{animation-delay:-2.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.drop{animation:drop 2.6s ease-in infinite}
@keyframes drop{0%{transform:translateY(0);opacity:0}20%{opacity:1}70%{transform:translateY(26px);opacity:1}85%,100%{transform:translateY(28px);opacity:0}}
.inflate{animation:inflate 3.2s ease-in-out infinite;transform-origin:center}
@keyframes inflate{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.05)}}
.roll{animation:roll 8s linear infinite;transform-origin:center}
@keyframes roll{to{transform:rotate(360deg)}}
.dash{stroke-dasharray:5 7;animation:dashmove 1.5s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-24}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.solution:hover,.solution:focus-within{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--brand)}
.solution .stage{background:linear-gradient(160deg,var(--brand-soft),var(--mist));border-radius:16px}

.photo{background:linear-gradient(150deg,var(--brand-soft),var(--mist));position:relative;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;display:block}

details summary::-webkit-details-marker{display:none}
details summary{list-style:none;cursor:pointer}
details[open] .chev{transform:rotate(45deg)}
.chev{transition:transform .3s cubic-bezier(.22,1,.36,1)}

.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .3s,background .3s,color .3s,border-color .3s}
.btn-primary{background:var(--brand);color:#fff;padding:.9rem 1.6rem;box-shadow:0 12px 26px -14px var(--brand)}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);padding:.85rem 1.5rem}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

.nav{backdrop-filter:blur(14px);background:color-mix(in srgb,var(--page) 84%,transparent);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.stuck{border-color:var(--line);box-shadow:0 10px 30px -26px rgba(0,0,0,.5)}
.navlink{position:relative;font-weight:500;color:var(--ink);opacity:.82;transition:opacity .2s,color .2s}
.navlink:hover{opacity:1;color:var(--brand)}
.navlink::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.navlink:hover::after{transform:scaleX(1);transform-origin:left}
#menu{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
#menu.open{max-height:460px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- expanding cards (About) ---- */
.exp-row{display:flex;flex-direction:column;gap:14px}
.exp{background:var(--ink);border:1px solid var(--ink);border-radius:20px;overflow:hidden;color:#fff;
     position:relative;transition:border-color .35s,box-shadow .35s,background .35s}
:root[data-theme="dark"] .exp,
:root:not([data-theme="light"]) .exp{background:#20272C;border-color:#2C353B}
.exp.active{border-color:var(--brand);box-shadow:var(--shadow)}
.exp::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);
     transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.exp.active::after{transform:scaleY(1)}
.exp-head{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:20px 22px;cursor:pointer;background:none;color:inherit}
.exp-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
     background:rgba(255,255,255,.1);transition:background .35s}
.exp.active .exp-icon{background:var(--brand)}
.exp-icon svg{stroke:#fff}
.exp-title{font-family:Outfit,sans-serif;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;color:#fff}
.exp-plus{margin-left:auto;color:var(--brand);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.exp.active .exp-plus{transform:rotate(45deg)}
.exp-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1)}
.exp.active .exp-body{max-height:400px}
.exp-body p{margin:0;padding:0 22px 24px 82px;color:rgba(255,255,255,.72);line-height:1.75}

@media (max-width:1023px){
  .exp-body p{padding-left:22px}
}

@media (min-width:1024px){
  .exp-row{flex-direction:row;align-items:stretch;height:300px;gap:16px}
  .exp{flex:0 1 108px;display:flex;align-items:stretch;
       transition:flex .55s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s,background .35s}
  .exp.active{flex:1 1 0}
  .exp-head{flex-direction:column;align-items:flex-start;justify-content:flex-start;
            padding:28px 24px;width:108px;flex:0 0 108px;height:100%}
  .exp.active .exp-head{width:230px;flex:0 0 230px;padding-right:12px}
  .exp-plus{display:none}
  .exp-title{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:20px;white-space:nowrap;font-size:1.04rem}
  .exp.active .exp-title{writing-mode:horizontal-tb;transform:none;margin-top:20px;
                         font-size:1.5rem;line-height:1.2;white-space:normal}
  .exp-body{max-height:none;width:0;opacity:0;overflow:hidden;
            transition:width .55s cubic-bezier(.22,1,.36,1),opacity .3s}
  .exp.active .exp-body{width:auto;flex:1 1 0;opacity:1;transition-delay:.15s}
  .exp-body p{padding:30px 34px 30px 0;max-width:46ch;font-size:1.02rem}
}

/* ---- wellness rows ---- */
.tip{overflow:hidden}
.tip .photo{min-height:260px}
.tip .photo img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.tip:hover .photo img{transform:scale(1.05)}
.tip:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.tip-chip{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft)}
@media (min-width:1024px){
  .tip .photo{min-height:340px}
  .tip.flip .media{order:2}
  .tip.flip .copy{order:1}
}