/* =========================================================================
   Kindertally — shared styling for sub-pages (contact, about, policies, faq)
   Same palette, same typography, same warmth.
   ========================================================================= */
:root{
  --cream:        #FBF8F3;
  --cream-deep:   #F4EEE3;
  --paper:        #FFFDF8;
  --navy:         #1F3247;
  --navy-soft:    #47607A;
  --ink:          #17222E;
  --blush:        #EA8E7F;
  --blush-deep:   #BE5241;
  --coral:        #F5A095;
  --sage:         #9FD4B3;
  --sage-deep:    #5FA57B;
  --apricot:      #FFC17A;
  --apricot-deep: #E89B3F;
  --lilac:        #C4B2E8;
  --plum:         #815F99;
  --butter:       #F8E390;
  --gold:         #E3B24D;

  --shadow-sm:   0 2px 6px -2px rgba(44,62,80,.08), 0 1px 2px rgba(44,62,80,.06);
  --shadow-warm: 0 18px 40px -24px rgba(190,82,65,.45), 0 6px 14px -8px rgba(44,62,80,.12);
  --shadow-lift: 0 32px 60px -26px rgba(190,82,65,.55), 0 12px 22px -10px rgba(44,62,80,.18);
  --shadow-xl:   0 48px 80px -32px rgba(190,82,65,.45), 0 18px 32px -14px rgba(44,62,80,.20);
  --radius-s: 14px;
  --radius-m: 22px;
  --radius-l: 34px;
  --ease-spring: cubic-bezier(.22,1.2,.36,1);
  --ease-smooth: cubic-bezier(.2,.8,.2,1);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-hand:    "Caveat", "Brush Script MT", cursive;
  --f-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  --wrap: 980px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: rgba(232,155,142,.25) }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px; line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><g transform='translate(3 3)'><path d='M3 2 L7 8 L2 8 Z' fill='%23E89B8E' stroke='%2322364A' stroke-width='1'/><path d='M21 2 L17 8 L22 8 Z' fill='%23E89B8E' stroke='%2322364A' stroke-width='1'/><circle cx='12' cy='12' r='10' fill='%23FFFDF8' stroke='%2322364A' stroke-width='1.3'/><circle cx='8.5' cy='11' r='1.4' fill='%2322364A'/><circle cx='15.5' cy='11' r='1.4' fill='%2322364A'/><ellipse cx='12' cy='14.5' rx='1.4' ry='1' fill='%2322364A'/><path d='M9 17 Q 12 19 15 17' stroke='%2322364A' stroke-width='1.2' fill='none' stroke-linecap='round'/></g></svg>") 8 8, auto;
}
a, button, summary, input, select, textarea, .btn, .btn-primary, .btn-nav, .card, [role=button]{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><g transform='translate(4 4)'><path d='M3 2 L7 9 L2 9 Z' fill='%23FFC98A' stroke='%2322364A' stroke-width='1'/><path d='M23 2 L19 9 L24 9 Z' fill='%23FFC98A' stroke='%2322364A' stroke-width='1'/><circle cx='13' cy='13' r='11' fill='%23E89B8E' stroke='%2322364A' stroke-width='1.4'/><circle cx='9' cy='11' r='1.6' fill='%23FFFDF8'/><circle cx='17' cy='11' r='1.6' fill='%23FFFDF8'/><circle cx='9.2' cy='11.3' r='0.8' fill='%2322364A'/><circle cx='17.2' cy='11.3' r='0.8' fill='%2322364A'/><ellipse cx='13' cy='15.5' rx='1.6' ry='1.1' fill='%2322364A'/><path d='M10 18 Q 13 21 16 18' stroke='%2322364A' stroke-width='1.3' fill='none' stroke-linecap='round'/></g></svg>") 10 10, pointer;
}
/* warm ambient aurora behind every page — slow, dreamy drift.
   Matches index.html so the whole site shares one breathing background. */
body::before{
  content:"";
  position:fixed; inset:-10%;
  pointer-events:none; z-index:-2;
  background-image:
    radial-gradient(900px 560px at 10% 0%,   rgba(232,155,142,.28), transparent 60%),
    radial-gradient(760px 520px at 100% 20%, rgba(168,213,186,.28), transparent 60%),
    radial-gradient(620px 420px at 50% 110%, rgba(255,201,138,.32), transparent 60%),
    radial-gradient(540px 380px at 90% 80%,  rgba(200,184,232,.22), transparent 60%);
  filter: blur(4px);
  animation: pageAura 28s ease-in-out infinite alternate;
}
@keyframes pageAura{
  0%   { transform: translate3d(0,0,0) scale(1) }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.04) }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02) }
}
/* paper-grain wash sits on top of the aura for tactility */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.24  0 0 0 0 0.31  0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .45;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none }
}

a{ color:inherit; text-decoration:none }
img,svg{ display:block; max-width:100% }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer }

/* Skip link */
.skip{
  position:absolute; top:0; left:0;
  transform:translateY(-120%);
  background:var(--navy); color:var(--cream);
  padding:12px 18px; border-radius:0 0 12px 0;
  font-weight:600; z-index:1000;
  transition:transform .2s;
}
.skip:focus{ transform:translateY(0); outline:2px solid var(--apricot) }

/* Global focus-visible ring — brand-warm, never invisible */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-nav:focus-visible,
.brand:focus-visible,
.nav-links a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible{
  outline: 3px solid var(--apricot-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Type scale */
h1,h2,h3{
  font-family:var(--f-display);
  color:var(--navy);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.2rem, 5.4vw, 3.8rem); font-weight:400; letter-spacing:-.02em }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin-top:1.4em }
h3{ font-size:clamp(1.1rem, 1.7vw, 1.3rem); margin-top:1.2em }
p{ margin:0 0 1em; text-wrap:pretty }
ul,ol{ margin:0 0 1em; padding-left:1.4em }
ul li, ol li{ margin-bottom:.35em }
em.hand{ font-family:var(--f-hand); font-style:normal; font-weight:600; color:var(--blush-deep); font-size:1.25em }
.eyebrow{
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.76rem;
  color:var(--blush-deep);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor }

/* Layout */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 clamp(18px, 4vw, 28px);
}

/* Promo bar */
.promo{
  background:var(--navy); color:var(--cream);
  text-align:center; font-size:.86rem;
  padding:9px 16px;
  padding-top: calc(9px + var(--safe-t));
  letter-spacing:.03em;
  line-height:1.35;
  text-wrap:balance;
}
.promo span{ color:var(--apricot); font-weight:600 }
@media (max-width:520px){ .promo{ font-size:.74rem; letter-spacing:.01em; padding:7px 10px } }
@media (max-width:360px){ .promo{ font-size:.68rem; padding:6px 8px } }

/* Nav */
header.nav{
  position:sticky; top:0; z-index:50;
  padding:12px 0;
  padding-top: calc(12px + var(--safe-t));
  background:rgba(251,248,243,.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid rgba(44,62,80,.06);
  transition:background .3s, box-shadow .3s, padding .3s;
}
header.nav.scrolled{
  background:rgba(251,248,243,.92);
  box-shadow:0 10px 30px -18px rgba(44,62,80,.2);
  padding:8px 0;
  padding-top: calc(8px + var(--safe-t));
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.1rem, 2vw, 1.3rem);
  color:var(--navy);
}
.brand .pip-mini{
  width:clamp(34px, 5vw, 42px);
  height:clamp(34px, 5vw, 42px);
  flex-shrink:0;
  filter: drop-shadow(0 6px 12px rgba(232,155,142,.35));
}
footer .brand .pip-mini{
  width:36px; height:36px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.brand small{
  font-family:var(--f-hand);
  color:var(--blush-deep);
  font-size:1.02rem;
  margin-left:2px;
  transform:rotate(-6deg);
  display:inline-block;
}
.nav-links{ display:flex; gap:28px; font-size:.92rem; color:var(--navy-soft) }
.nav-links a{ position:relative; padding:4px 0; transition:color .25s }
.nav-links a:hover{ color:var(--blush-deep) }
.nav-links a::after{
  content:""; position:absolute;
  left:0; right:0; bottom:0;
  height:2px; background:var(--blush);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
}
.nav-links a:hover::after{ transform:scaleX(1) }
.nav-links a[aria-current="page"]{ color:var(--blush-deep); font-weight:600 }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1) }
@media (max-width:860px){ .nav-links{ display:none } .brand small{ display:none } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:14px 24px; min-height:48px;
  border-radius:999px;
  font-weight:600;
  transition:transform .3s var(--ease-spring), background .3s, box-shadow .35s var(--ease-smooth);
  white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn-primary{
  background:linear-gradient(180deg, #2A3F56 0%, var(--navy) 100%);
  color:var(--cream);
  box-shadow:
    0 14px 30px -14px rgba(44,62,80,.7),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn-primary::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%);
  transform:translateX(-140%);
  transition:transform .8s var(--ease-smooth);
  pointer-events:none; z-index:-1;
}
@media (hover:hover){
  .btn-primary:hover{
    transform:translateY(-2px) rotate(-.3deg);
    background:linear-gradient(180deg, #D05946 0%, var(--blush-deep) 100%);
    box-shadow:
      0 24px 44px -14px rgba(190,82,65,.7),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -2px 0 rgba(0,0,0,.22);
  }
  .btn-primary:hover::before{ transform:translateX(140%) }
}
.btn-nav{
  padding:10px 18px; min-height:42px;
  background:linear-gradient(180deg, #EE9C8E 0%, var(--blush) 100%);
  color:#fff;
  border-radius:999px;
  font-weight:600; font-size:.9rem;
  box-shadow:0 10px 24px -12px rgba(234,142,127,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s var(--ease-spring), background .3s, box-shadow .3s;
  position:relative; overflow:hidden; isolation:isolate;
  white-space:nowrap;
  flex-shrink:0;
}
@media (max-width:520px){
  .btn-nav{ padding:9px 14px; font-size:.84rem; min-height:40px }
  .btn-nav .btn-nav-long{ display:none }
}
@media (max-width:340px){
  .btn-nav{ padding:8px 12px; font-size:.8rem }
}
.btn-nav::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-140%);
  transition:transform .7s var(--ease-smooth);
  pointer-events:none;
}
@media (hover:hover){
  .btn-nav:hover{
    background:linear-gradient(180deg, #C96150 0%, var(--blush-deep) 100%);
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 16px 30px -10px rgba(190,82,65,.55), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .btn-nav:hover::before{ transform:translateX(140%) }
}
.btn-secondary{
  background:linear-gradient(180deg, #EE9C8E 0%, var(--blush) 100%);
  color:#fff;
  box-shadow:0 10px 24px -12px rgba(234,142,127,.9), inset 0 1px 0 rgba(255,255,255,.25);
}
@media (hover:hover){
  .btn-secondary:hover{
    background:linear-gradient(180deg, #D05946 0%, var(--blush-deep) 100%);
    transform:translateY(-2px);
    box-shadow:0 16px 30px -10px rgba(190,82,65,.55);
  }
}

/* Page hero */
.page-hero{
  padding:clamp(50px, 8vw, 90px) 0 clamp(30px, 4vw, 50px);
  text-align:center;
  position:relative;
}
.page-hero > .wrap > *{
  animation: heroRise .9s var(--ease-smooth) both;
}
.page-hero > .wrap > *:nth-child(1){ animation-delay:.05s }
.page-hero > .wrap > *:nth-child(2){ animation-delay:.18s }
.page-hero > .wrap > *:nth-child(3){ animation-delay:.30s }
.page-hero > .wrap > *:nth-child(4){ animation-delay:.42s }
@keyframes heroRise{
  from{ opacity:0; transform:translateY(22px) }
  to  { opacity:1; transform:none }
}
.page-hero .eyebrow{ justify-content:center; margin-bottom:14px }
.page-hero .eyebrow::before{ display:none }
.page-hero h1{ max-width:22ch; margin:0 auto }
.page-hero .lead{
  color:var(--navy-soft);
  font-size:clamp(1.02rem, 1.3vw, 1.15rem);
  max-width:52ch; margin:18px auto 0;
}
.page-hero .swoop{
  position:relative; display:inline-block;
  font-style:italic;
  color:var(--blush-deep);
  font-variation-settings:"opsz" 144;
}
.page-hero .swoop::after{
  content:"";
  position:absolute; left:-4%; right:-4%; bottom:-6px;
  height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M2 10 C 60 2, 120 14, 180 6 S 290 4, 298 8' stroke='%23EA8E7F' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  opacity:0;
  animation: swoopIn .7s var(--ease-smooth) .9s forwards;
}
@keyframes swoopIn{ from{ opacity:0; clip-path: inset(0 100% 0 0) } to{ opacity:1; clip-path: inset(0 0 0 0) } }

/* Prose container */
.prose{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 28px);
  color:var(--ink);
}
.prose h2{ color:var(--navy); font-weight:500 }
.prose h3{ color:var(--navy); font-weight:500; font-size:1.1rem }
.prose p, .prose li{ color:var(--ink); font-size:1.02rem; line-height:1.72 }
.prose a{ color:var(--blush-deep); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px }
.prose a:hover{ color:var(--navy) }
.prose hr{
  border:0; height:1px;
  background:repeating-linear-gradient(90deg, var(--blush) 0 6px, transparent 6px 12px);
  margin:44px 0;
}

/* Card (for contact, about beats) */
.card{
  background:var(--paper);
  border:1px solid rgba(44,62,80,.06);
  border-radius:var(--radius-l);
  padding:clamp(24px, 4vw, 36px);
  box-shadow:var(--shadow-warm);
  margin: 18px 0;
  transition:transform .4s var(--ease-spring), box-shadow .4s, border-color .3s;
}
@media (hover:hover){
  .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgba(190,82,65,.12) }
}

/* Grid for about page, contact cards */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr } }

/* FAQ accordion (pretty) */
.faq-item{
  border-bottom:1px solid rgba(44,62,80,.14);
  padding:2px 0;
  transition:background .25s;
}
.faq-item:first-child{ border-top:1px solid rgba(44,62,80,.14) }
.faq-item[open]{ background:linear-gradient(180deg, rgba(255,253,248,.6), transparent) }
.faq-q{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:20px 4px; min-height:60px;
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.02rem, 1.4vw, 1.15rem);
  color:var(--navy);
  transition:color .2s, padding-left .3s var(--ease-smooth);
}
.faq-q:hover{ padding-left:10px }
.faq-q::-webkit-details-marker{ display:none }
.faq-q:hover{ color:var(--blush-deep) }
.faq-q .pm{
  flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--navy);
  display:grid; place-items:center; position:relative;
  transition:background .3s, border-color .3s, transform .3s;
}
.faq-q .pm::before,.faq-q .pm::after{
  content:""; position:absolute;
  background:var(--navy);
  transition:transform .3s, background .3s;
}
.faq-q .pm::before{ width:12px; height:1.8px }
.faq-q .pm::after{ width:1.8px; height:12px }
.faq-item[open] .faq-q .pm{ background:var(--blush); border-color:var(--blush); transform:rotate(180deg) }
.faq-item[open] .faq-q .pm::before, .faq-item[open] .faq-q .pm::after{ background:#fff }
.faq-item[open] .faq-q .pm::after{ transform:scaleY(0) }
.faq-a{
  padding:0 4px 24px;
  color:var(--navy-soft);
  font-size:.98rem;
  max-width:640px;
  animation: fadeIn .35s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }

/* Final CTA */
.final-cta{
  margin:72px 0 0;
  padding:56px 24px;
  text-align:center;
  background:
    radial-gradient(520px 320px at 30% 40%, rgba(234,142,127,.38), transparent 65%),
    radial-gradient(420px 280px at 75% 60%, rgba(159,212,179,.45), transparent 65%),
    radial-gradient(380px 240px at 50% 110%, rgba(196,178,232,.28), transparent 65%),
    linear-gradient(180deg, var(--apricot) 0%, var(--coral) 100%);
  border-radius:clamp(24px, 4vw, 40px);
  position:relative; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(190,82,65,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.final-cta::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(700px 360px at 50% 0%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;
  mix-blend-mode:screen;
}
.final-cta h2{ color:var(--navy); font-size:clamp(1.6rem, 3.5vw, 2.4rem); margin:0 0 12px }
.final-cta p{ color:var(--navy); opacity:.8; max-width:38ch; margin:0 auto 24px }
.final-cta .hand{ font-family:var(--f-hand); color:var(--blush-deep); font-size:1.4em; font-weight:700 }

/* Footer */
footer{
  margin-top: clamp(60px, 8vw, 100px);
  background:var(--navy);
  color:var(--cream);
  padding:clamp(36px, 6vw, 52px) 0 20px;
}
footer .wrap{ max-width:1100px }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px }
@media (max-width:720px){ .foot-grid{ grid-template-columns:1fr } }
.foot-col h4{
  font-family:var(--f-display);
  font-weight:500; font-size:1rem;
  color:var(--cream); margin:0 0 14px;
}
.foot-col ul{ list-style:none; padding:0; margin:0 }
.foot-col li{ margin-bottom:8px }
.foot-col a{ color:rgba(251,248,243,.78); font-size:.92rem; transition:color .2s }
.foot-col a:hover{ color:var(--apricot) }
.foot-bottom{
  margin-top:28px; padding-top:20px;
  border-top:1px solid rgba(251,248,243,.12);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.8rem; color:rgba(251,248,243,.55);
}
.foot-col .brand{ color:var(--cream); margin-bottom:12px }

/* Payment method icons — Visa / Mastercard / Maestro / Amex / PayPal / Apple Pay / Klarna / Clearpay */
.foot-payment{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 4px }
.foot-payment .pay-label{ font-size:.85rem; color:rgba(251,248,243,.6); margin-right:8px }
.pay-ic{
  display:inline-flex;
  width:36px; height:24px;
  vertical-align:middle;
  line-height:0;
}
.pay-ic svg{
  width:100%; height:100%;
  display:block;
  border-radius:5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
.foot-payment .secure{ margin-left:8px; font-size:.85rem; color:rgba(251,248,243,.6) }
@media (max-width:540px){
  .pay-ic{ width:32px; height:21px }
}

/* Paw trail */
.paw-trail{
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--apricot), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: .8;
  animation: pawFade 700ms ease-out forwards;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
@keyframes pawFade{
  0%   { opacity: .8; transform: translate(-50%,-50%) scale(1) }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(.3) translateY(8px) }
}

/* Reveal on scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s var(--ease-smooth), transform .75s var(--ease-smooth);
}
[data-reveal].in{ opacity:1; transform:none }
[data-reveal][data-reveal-delay="1"]{ transition-delay:.08s }
[data-reveal][data-reveal-delay="2"]{ transition-delay:.16s }
[data-reveal][data-reveal-delay="3"]{ transition-delay:.24s }
[data-reveal][data-reveal-delay="4"]{ transition-delay:.32s }

/* FAQ open state — warm left accent on sub-pages */
.faq-item[open]{ background:linear-gradient(90deg, rgba(234,142,127,.07) 0%, transparent 100%); border-radius:8px }
.faq-item[open] .faq-q{ color:var(--blush-deep); padding-left:10px }

/* Card hover — consistent lift on sub-pages */
@media (hover:hover){
  .card:hover{ transform:translateY(-4px) }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important }
  [data-reveal]{ opacity:1; transform:none }
}

/* Floating ambient shapes — sprinkled in body of every page */
.floaty{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.floaty span{
  position: absolute;
  display: block;
  font-size: clamp(14px, 1.4vw, 22px);
  color: var(--blush-deep, #BE5241);
  opacity: 0.10;
  animation: floatUp linear infinite;
  user-select: none;
  will-change: transform, opacity;
}
.floaty span:nth-child(1){ left: 6%;  top: 110%; animation-duration: 22s; animation-delay: 0s;   color: var(--blush-deep, #BE5241) }
.floaty span:nth-child(2){ left: 18%; top: 110%; animation-duration: 18s; animation-delay: 3s;   color: var(--apricot-deep, #E5B279); opacity:.08 }
.floaty span:nth-child(3){ left: 32%; top: 110%; animation-duration: 26s; animation-delay: 6s;   color: var(--sage-deep, #6BAF89);  opacity:.10 }
.floaty span:nth-child(4){ left: 48%; top: 110%; animation-duration: 20s; animation-delay: 1s;   color: var(--blush, #F5A69B);      opacity:.09 }
.floaty span:nth-child(5){ left: 62%; top: 110%; animation-duration: 24s; animation-delay: 8s;   color: var(--apricot, #FFC79A);    opacity:.08 }
.floaty span:nth-child(6){ left: 76%; top: 110%; animation-duration: 19s; animation-delay: 4s;   color: var(--blush-deep, #BE5241); opacity:.07 }
.floaty span:nth-child(7){ left: 88%; top: 110%; animation-duration: 23s; animation-delay: 11s;  color: var(--sage, #9FD4B3);       opacity:.09 }
.floaty span:nth-child(8){ left: 26%; top: 110%; animation-duration: 28s; animation-delay: 14s;  color: var(--apricot-deep, #E5B279); opacity:.08 }
@keyframes floatUp{
  0%   { transform: translateY(0) rotate(0deg);     opacity: 0 }
  10%  { opacity: var(--floaty-opacity, .1) }
  50%  { transform: translateY(-60vh) rotate(180deg); }
  90%  { opacity: var(--floaty-opacity, .1) }
  100% { transform: translateY(-120vh) rotate(360deg); opacity: 0 }
}
@media (prefers-reduced-motion: reduce){
  .floaty{ display: none }
}