/* De Matcha Kar — site CSS. Part 1 = the v206 anchor verbatim; part 2 = live additions (planner,
   sub pages). Do not edit part 1 by hand: rebuild with scripts/build_home.py from a new anchor. */

:root {
  --lilac:#bda7ef;
  --lilac-2:#d9ccf8;
  --lilac-3:#eee8fb;
  --green:#7f9554;
  --green-dark:#56683b;
  --green-soft:#dbe4c3;
  --pink:#f38ebd;
  --hot-pink:#e83e9b;
  --cream:#fbf8f3;
  --ink:#171719;
  --silver:#c8c9cf;
  --silver-dark:#7c7f86;
  --white:#fff;
  --line:rgba(23,23,25,.13);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(180deg,#f9f5ff 0,#fbf8f3 19%,#f7f2ff 58%,#fbf8f3 100%);
  font-family:Inter,Arial,Helvetica,sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}

.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(18px);
  background:rgba(248,245,255,.88);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1220px;margin:auto;padding:11px 24px;
  display:flex;align-items:center;gap:24px;
}
.nav-logo{width:76px;flex:0 0 auto}
.navlinks{margin-left:auto;display:flex;gap:18px;overflow:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.14em;font-weight:800;white-space:nowrap;
}
.book-btn{
  text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.13em;font-weight:900;
  padding:10px 14px;border-radius:999px;background:var(--lilac);border:1px solid var(--ink);
}

.hero{
  position:relative;overflow:hidden;
  min-height:790px;
  background:
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.24), transparent 22rem),
    linear-gradient(180deg, var(--lilac-3) 0%, #d8caf7 100%);
}
.hero-inner{
  max-width:1220px;min-height:790px;margin:auto;padding:76px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  position:relative;z-index:3;
}
.hero-copy{position:relative;z-index:4}
.hero-logo{width:min(520px,82vw);filter:drop-shadow(0 18px 28px rgba(85,65,120,.12))}
.eyebrow{
  margin:18px 0 0;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:900;color:var(--green-dark)
}
.hero-copy h1{
  margin:18px 0 12px;font-size:clamp(44px,6.2vw,82px);line-height:.92;letter-spacing:-.06em;
  font-family:"Arial Narrow",Arial,sans-serif;text-transform:uppercase;font-weight:950;color:var(--hot-pink);
}
.hero-copy p{max-width:600px;font-size:18px}
.hero-chrome-copy{
  position:relative;
  display:inline-block;
  margin:18px 0 0;
  max-width:620px;
  padding:13px 18px 12px;
  border:2px solid var(--ink);
  border-radius:16px 28px 18px 24px;
  background:var(--lilac-2);
  box-shadow:6px 6px 0 var(--green);
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:clamp(28px,3vw,40px) !important;
  line-height:1.02;
  font-style:normal;
  font-weight:950;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:#5d3ea8;
  transform:rotate(-1.4deg);
}
.hero-chrome-copy::after{
  content:"✦";
  position:absolute;
  right:-15px;
  top:-16px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--hot-pink);
  color:var(--ink);
  font-family:Arial,sans-serif;
  font-size:16px;
  line-height:1;
  transform:rotate(10deg);
}
@media(max-width:620px){
  .hero-chrome-copy{
    margin-top:14px;
    padding:11px 14px 10px;
    font-size:25px !important;
    box-shadow:4px 4px 0 var(--green);
    transform:rotate(-1deg);
  }
  .hero-chrome-copy::after{
    width:29px;
    height:29px;
    right:-11px;
    top:-13px;
    font-size:13px;
  }
}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.hero-tags span{
  border:1px solid rgba(23,23,25,.75);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.64);
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em
}

.visual-stage{position:relative;height:580px}
.chrome-panel{
  position:absolute;inset:40px 34px 42px 48px;border-radius:44px;
  background:
    linear-gradient(90deg,#777a81 0%,#f8f9fb 14%,#a6a8ae 30%,#ffffff 48%,#96999f 66%,#f7f8fa 84%,#74777d 100%);
  box-shadow:0 28px 62px rgba(61,52,84,.19);
  border:1px solid rgba(40,40,45,.18);
  overflow:hidden;
}
.chrome-panel::before{
  content:"";position:absolute;inset:18px;border-radius:32px;
  background:
    radial-gradient(circle at 62% 24%, rgba(255,255,255,.58), transparent 12rem),
    linear-gradient(180deg, rgba(245,245,247,.52), rgba(178,180,186,.28));
  border:1px solid rgba(255,255,255,.58);
}
.hero-smiley{
  position:absolute;width:230px;right:-8px;top:28px;z-index:5;
  filter:drop-shadow(0 20px 30px rgba(66,55,87,.16));
}
.hero-keychain{
  position:absolute;left:0;bottom:22px;z-index:5;width:210px;height:300px;
}
.key-ring{
  position:absolute;left:65px;top:0;width:92px;height:92px;border:16px solid transparent;border-radius:50%;
  background:
    linear-gradient(#f8f9fb,#f8f9fb) padding-box,
    linear-gradient(90deg,#74777d,#fff,#85888f,#fff,#74777d) border-box;
}
.key-chain{position:absolute;left:104px;top:88px;width:14px;height:92px;border-radius:12px;background:linear-gradient(90deg,#777,#fff,#85888f)}
.charm-heart{
  position:absolute;left:55px;top:165px;width:116px;height:102px;background:var(--pink);
  clip-path:path("M58 101 C20 73 0 50 0 25 C0 6 14 0 28 0 C43 0 52 8 58 18 C64 8 73 0 88 0 C102 0 116 6 116 25 C116 50 96 73 58 101");
  filter:drop-shadow(0 10px 14px rgba(75,53,72,.18));
}
.charm-dot{position:absolute;right:4px;top:164px;width:62px;height:62px;border-radius:50%;background:var(--green-soft);border:4px solid var(--green)}

.cow-spot{
  position:absolute;z-index:2;background:var(--green);border-radius:53% 47% 61% 39%/45% 58% 42% 55%;
}
.hero .spot-a{width:160px;height:95px;left:-48px;top:96px;transform:rotate(-11deg)}
.hero .spot-b{width:112px;height:70px;right:3%;bottom:34px;transform:rotate(4deg);background:var(--green-dark)}
.hero .spot-c{width:72px;height:54px;left:48%;bottom:10px;transform:rotate(-5deg)}

.chrome-strip{
  border-block:1px solid rgba(30,30,35,.24);
  background:linear-gradient(90deg,#767980,#fff 16%,#92959b 34%,#fff 50%,#81848a 68%,#fff 86%,#74777d);
  padding:13px 0;overflow:hidden;white-space:nowrap;
}
.chrome-strip div{
  width:100%;text-align:center;font-family:"Arial Narrow",Arial,sans-serif;font-size:20px;font-weight:950;text-transform:uppercase;letter-spacing:.01em;
}

.brand-break{
  max-width:1220px;margin:0 auto;padding:90px 24px 24px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
}
.brand-break h2{
  margin:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(48px,7vw,92px);
  line-height:.84;letter-spacing:-.07em;text-transform:uppercase;color:var(--hot-pink);
}
.brand-break .smiley-small{width:150px}
.brand-break p{max-width:680px;font-size:18px}

main{max-width:1220px;margin:auto;padding:30px 24px 110px}
.section{position:relative;padding:72px 0;border-bottom:1px solid var(--line)}
.section h2{
  margin:0 0 28px;max-width:940px;font-family:"Arial Narrow",Arial,sans-serif;
  font-size:clamp(42px,5.6vw,74px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase;color:var(--hot-pink)
}
.section h3{margin:30px 0 10px;font-size:clamp(20px,2vw,27px);line-height:1.15;color:var(--hot-pink)}
.section p{max-width:880px}
.target-audience{
  position:relative;
  display:inline-block;
  max-width:100%;
  margin:18px 0 10px;
  padding:18px 24px 20px;
  color:var(--hot-pink);
  font-weight:800;
  line-height:1.5;
  border:2px solid rgba(175,146,222,.95);
  border-radius:36px;
  background:rgba(255,250,253,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.target-audience::after{
  content:"";
  position:absolute;
  inset:10px 14px auto auto;
  width:14px;
  height:14px;
  border:2px solid rgba(175,146,222,.9);
  border-radius:50%;
  opacity:.9;
}
@media(max-width:700px){
  .target-audience{padding:16px 18px 18px;border-radius:30px}
  .target-audience::after{width:12px;height:12px;inset:10px 12px auto auto}
}
.section ul{
  list-style:none;padding:0;margin:28px 0 0;max-width:980px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
}
.section li{
  position:relative;padding:16px 18px 16px 44px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.68)
}
.section li::before{content:"✦";position:absolute;left:17px;top:15px;color:var(--green-dark)}

.section[data-section="the-experience"]{
  margin-top:35px;padding:58px;border-radius:34px;
  background:linear-gradient(140deg,rgba(236,230,252,.96),rgba(255,255,255,.94) 50%,rgba(222,232,197,.78));
  border:1px solid var(--line);
}
.section[data-section="the-experience"]::after{
  content:"";position:absolute;right:24px;top:24px;width:86px;height:58px;background:var(--green);
  border-radius:55% 45% 62% 38%/44% 56% 44% 56%;transform:rotate(9deg);
}
.section[data-section="zo-verloopt-de-experience"] .flow-step{
  padding-top:20px;border-top:1px solid var(--line);max-width:860px
}
.section[data-section="the-phone-drop-point"]{
  padding:56px;border-radius:34px;background:var(--lilac-3)
}
.section[data-section="the-phone-drop-point"]::before{
  content:"";position:absolute;left:22px;bottom:22px;width:88px;height:60px;background:var(--green-dark);
  border-radius:48% 52% 42% 58%/55% 45% 55% 45%;transform:rotate(-12deg);opacity:.9
}
.section[data-section="make-it-yours"]{
  padding:58px;border-radius:34px;
  background:linear-gradient(120deg,#a88edc 0 56%,#c9b8ee 56% 100%);
}
.section[data-section="make-it-yours"] h2,.section[data-section="make-it-yours"] h3,.section[data-section="make-it-yours"] p{max-width:840px}
.section[data-section="prijzen"]{
  padding:58px;border-radius:34px;background:
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(234,226,252,.98) 58%,rgba(205,207,213,.86));
  border:1px solid var(--line)
}
.section[data-section="bookings"]{border-left:8px solid var(--lilac);padding-left:40px}
.section[data-section="ode-aan-de-veluwe"]::after{
  content:"";position:absolute;right:0;bottom:22px;width:126px;height:84px;background:var(--green);
  border-radius:57% 43% 48% 52%/45% 55% 45% 55%;transform:rotate(11deg)
}

.sip-section{
  max-width:1220px;
  margin:40px auto 0;
  padding:0 24px 0;
}
.sip-card{
  position:relative;
  overflow:hidden;
  padding:54px 58px;
  border-radius:34px 34px 0 0;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,255,255,.32), transparent 12rem),
    linear-gradient(135deg, #d8caf7 0%, #bda7ef 62%, #c9c9cf 100%);
  border:1px solid rgba(23,23,25,.12);
  border-bottom:0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:32px;
}
.sip-card::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:18px;
  width:108px;
  height:70px;
  background:var(--green-dark);
  border-radius:52% 48% 59% 41% / 43% 57% 43% 57%;
  transform:rotate(7deg);
  opacity:.95;
}
.sip-card h2{
  margin:0;
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:clamp(56px,7vw,96px);
  line-height:.84;
  letter-spacing:-.07em;
  text-transform:uppercase;
  color:var(--hot-pink);
}
.sip-card p{
  max-width:620px;
  margin:16px 0 0;
  font-size:16px;
}

.footer{
  background:
    linear-gradient(180deg, #f3edfdf2 0%, #ede4fb 100%);
  border-top:1px solid rgba(23,23,25,.10);
}
.footer-inner{
  max-width:1220px;
  margin:auto;
  padding:30px 24px 52px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:20px;
}
.footer-logo{
  width:min(250px, 52vw);
  height:auto;
}
.footer-note{
  font-size:13px;
  line-height:1.5;
  color:rgba(23,23,25,.72);
  max-width:320px;
}
.footer-meta{
  text-align:right;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:900;
  color:var(--ink);
}
.footer-meta div + div{
  margin-top:8px;
}
.footer-meta .footer-ig{
  color:var(--green-dark);
}

@media(max-width:620px){
  .sip-section{
    padding:0 16px 0;
    margin-top:26px;
  }
  .sip-card{
    grid-template-columns:1fr;
    padding:34px 24px;
    border-radius:24px 24px 0 0;
  }
    .footer-inner{
    grid-template-columns:1fr;
    padding:24px 16px 38px;
    gap:18px;
  }
  .footer-brand{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
  .footer-meta{
    text-align:left;
  }
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero{min-height:auto}
  .visual-stage{height:500px}
  .brand-break{grid-template-columns:1fr}
  .section ul{grid-template-columns:1fr}
}

.mirror-message{
  position:absolute;
  z-index:6;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%) rotate(-2deg);
  width:76%;
  text-align:center;
  pointer-events:none;
  font-family:"Brush Script MT","Snell Roundhand","Segoe Script","Apple Chancery",cursive;
  font-size:clamp(42px,5.2vw,72px);
  line-height:.92;
  letter-spacing:.01em;
  font-weight:700;
  color:#d1458f;
  text-shadow:
    0 1px 0 rgba(255,255,255,.75),
    0 2px 0 rgba(255,214,232,.85),
    0 6px 12px rgba(209,69,143,.18);
}
.mirror-message .gloss{
  display:inline-block;
  padding:0 .06em;
  background:linear-gradient(180deg,#fff7fb 0%, #ffc9e2 10%, #ff6fb2 34%, #e54f9c 56%, #bc2b7e 78%, #8f185c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 8px rgba(188,43,126,.20));
}
.mirror-message span{
  display:block;
  margin-top:9px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.24em;
  font-style:normal;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(86,104,59,.78);
}

@media(max-width:620px){
  .mirror-message{
    font-size:clamp(30px,8.2vw,50px);
    width:80%;
    top:45%;
  }
}

.hero-headline{
  max-width:650px;
  margin:22px 0 16px !important;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:"Arial Narrow",Arial,sans-serif !important;
  text-transform:uppercase;
  letter-spacing:-.065em !important;
  line-height:.88 !important;
  font-weight:950;
  text-wrap:balance;
}
.hero-headline > span:first-child{
  display:block;
  font-size:clamp(46px,5.6vw,78px);
}
.hero-headline-sub{
  display:block;
  font-size:clamp(34px,4.1vw,58px);
  letter-spacing:-.055em;
  color:var(--green-dark);
  margin-top:4px;
}
@media(max-width:620px){
  .hero-headline{
    max-width:92vw;
    gap:4px;
    margin-top:18px !important;
  }
  .hero-headline > span:first-child{
    font-size:clamp(38px,12vw,58px);
  }
  .hero-headline-sub{
    font-size:clamp(29px,9.2vw,44px);
    margin-top:2px;
  }
}

.hero-headline-sub .calling-black{
  color:var(--hot-pink);
}
.hero-headline-sub .pickup-green{
  color:var(--green-dark);
}

/* ===== V14 mobile + brand cleanup ===== */

/* Mirror composition: smiley supports, text leads, logo is a sticker */
.hero-smiley{
  width:150px;
  right:16px;
  top:18px;
  z-index:7;
  filter:drop-shadow(0 12px 18px rgba(66,55,87,.14));
}
.mirror-message{
  top:46%;
  width:70%;
  left:55%;
  transform:translate(-50%,-50%) rotate(-2deg);
  z-index:8;
  font-size:clamp(62px,6.5vw,92px);
}
.mirror-message .gloss{
  background:linear-gradient(
    180deg,
    #ffe0ef 0%,
    #ff9dcb 14%,
    #ff69b4 34%,
    #ec3f98 55%,
    #c61f79 76%,
    #8f0f55 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 5px rgba(109,19,66,.22));
}
.mirror-message span:last-child{
  color:#c61f79;
  letter-spacing:.12em;
  font-size:.26em;
  margin-top:10px;
}

/* Keep decorative spots deliberate, not floating through content */
.hero .spot-b{
  width:82px;
  height:52px;
  right:4%;
  bottom:22px;
  opacity:.88;
}
.hero .spot-c{
  width:54px;
  height:40px;
  left:53%;
  bottom:14px;
  opacity:.82;
}

/* Bottom CTA: lilac first, chrome second, only one subtle cow spot */
.sip-section{
  margin-top:42px;
  padding-bottom:0;
}
.sip-card{
  min-height:300px;
  border-radius:32px 32px 0 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.24), transparent 11rem),
    linear-gradient(180deg,#d7c9f6 0%,#bda7ef 100%);
  border:1px solid rgba(23,23,25,.12);
  border-top:7px solid transparent;
  border-image:linear-gradient(90deg,#7b7e84,#fff,#8d9097,#fff,#74777d) 1;
}
.sip-card::after{
  right:-24px;
  bottom:34px;
  width:86px;
  height:56px;
  background:var(--green-dark);
  opacity:.88;
}

/* Footer: logo has room and never crops */
.footer{
  background:linear-gradient(180deg,#f4effc 0%,#ece4f8 100%);
}
.footer-inner{
  padding-top:34px;
}
.footer-logo{
  width:190px;
  max-width:100%;
}

/* Mobile-specific cleanup visible in supplied screenshots */
@media(max-width:620px){
  .nav{
    padding:9px 12px;
    gap:14px;
  }
  .nav-logo{
    width:62px;
  }
  .navlinks{
    gap:14px;
  }
  .navlinks a{
    font-size:9px;
    letter-spacing:.11em;
  }
  .book-btn{
    display:block;
    padding:9px 11px;
    font-size:9px;
    letter-spacing:.10em;
  }

  /* Remove orphaned "pink detail" / tag pills from the mobile hero */
  .hero-tags{
    display:none;
  }

  .hero-inner{
    padding:42px 16px 34px;
    gap:18px;
  }
  .visual-stage{
    height:430px;
    margin-top:6px;
  }
  .chrome-panel{
    inset:22px 30px 22px 30px;
    border-radius:28px;
  }
  .chrome-panel::before{
    inset:13px;
    border-radius:21px;
  }
  .hero-smiley{
    width:112px;
    right:20px;
    top:10px;
  }
  .mirror-message{
    left:55%;
    top:43%;
    width:66%;
    font-size:clamp(46px,12vw,62px);
    line-height:.88;
  }
  .mirror-message span:last-child{
    font-size:.24em;
    margin-top:8px;
  }
  .mirror-logo-sticker{
    width:78px;
    right:44px;
    bottom:44px;
  }
  .hero-keychain{
    transform:scale(.62);
    transform-origin:left bottom;
    left:6px;
    bottom:-14px;
  }
  .hero .spot-b{
    width:68px;
    height:44px;
    right:2%;
    bottom:12px;
  }
  .hero .spot-c{
    display:none;
  }

  .sip-section{
    margin-top:24px;
    padding:0 16px;
  }
  .sip-card{
    min-height:auto;
    grid-template-columns:1fr;
    padding:34px 26px 30px;
    border-radius:24px 24px 0 0;
  }
  .sip-card h2{
    font-size:clamp(48px,13vw,68px);
    line-height:.86;
  }
  .sip-card p{
    font-size:15px;
    line-height:1.55;
    margin-top:18px;
  }
    .sip-card::after{
    right:-22px;
    bottom:26px;
    width:70px;
    height:45px;
  }

  .footer-inner{
    padding:26px 18px 40px;
    text-align:center;
  }
  .footer-brand{
    align-items:center;
    text-align:center;
  }
  .footer-logo{
    width:150px;
    margin:0 auto;
  }
  .footer-note{
    max-width:300px;
    margin:0 auto;
    font-size:12px;
  }
  .footer-meta{
    text-align:center;
    margin-top:4px;
  }
}

/* V17: bottom smiley uses original colors */
.sip-card img{
  width:132px;
  height:auto;
  display:block;
  position:relative;
  z-index:2;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:drop-shadow(0 8px 14px rgba(55,45,70,.10)) !important;
  background:transparent;
}
@media(max-width:620px){
  .sip-card img{
    width:104px;
    margin-top:12px;
  }
}

/* Founder section */
.section[data-section="founder"]{
  margin:54px 0 20px;
  padding:0;
  border:0;
}
.founder-shell{
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  min-height:760px;
  border:1px solid var(--line);
  border-radius:36px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(237,230,252,.98) 60%,rgba(219,228,195,.84));
  box-shadow:0 24px 70px rgba(72,55,102,.10);
}
.founder-photo-wrap{
  position:relative;
  min-height:680px;
  background:var(--cream);
  overflow:hidden;
}
.founder-photo-wrap::after{
  content:"FOUNDER";
  position:absolute;
  left:22px;
  bottom:22px;
  padding:9px 14px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:rgba(242,235,255,.92);
  font-size:10px;
  line-height:1;
  letter-spacing:.16em;
  font-weight:950;
}
.founder-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.founder-copy{
  padding:64px 58px 58px;
  align-self:center;
}
.section[data-section="founder"] .founder-copy h2{
  margin-bottom:26px;
}
.founder-copy .founder-lede{
  font-size:18px;
  line-height:1.65;
}
.founder-copy .founder-signoff{
  display:inline-block;
  margin:4px 0 14px;
  font-weight:900;
  font-size:18px;
}
.founder-copy .why-matcha{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.founder-copy .final-line{
  margin-top:22px;
  font-size:19px;
}
@media(max-width:860px){
  .founder-shell{grid-template-columns:1fr;min-height:0}
  .founder-photo-wrap{min-height:560px;max-height:720px}
  .founder-copy{padding:42px 34px 46px}
}
@media(max-width:620px){
  .section[data-section="founder"]{margin-top:34px}
  .founder-shell{border-radius:28px}
  .founder-photo-wrap{min-height:470px}
  .founder-copy{padding:34px 24px 38px}
  .founder-copy .founder-lede,.founder-copy .founder-signoff,.founder-copy .final-line{font-size:16px}
  .founder-xoxo{font-size:42px}
}

.matcha-girlies{color:var(--hot-pink);}
.founder-xoxo{
  position:relative;
  margin:16px 0 4px;
  display:inline-block;
  font-family:"Brush Script MT","Snell Roundhand","Segoe Script","Apple Chancery",cursive;
  font-size:52px;
  line-height:.92;
  font-weight:800;
  letter-spacing:-.035em;
  transform:rotate(-4deg);
  background:linear-gradient(180deg,#ffd8ea 0%,#ff7fbe 18%,#ff3f9f 48%,#dd2788 72%,#9d155f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:.55px rgba(122,22,78,.72);
  filter:drop-shadow(5px 5px 0 rgba(189,167,239,.78));
}
.founder-xoxo::before{
  content:"✦";
  position:absolute;
  right:-30px;
  top:-8px;
  color:var(--green-dark);
  -webkit-text-stroke:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1;
  transform:rotate(12deg);
  filter:none;
}
.founder-xoxo::after{
  content:"";
  position:absolute;
  left:7%;
  right:-10%;
  bottom:-8px;
  height:7px;
  border-radius:58% 42% 62% 38% / 52% 48% 52% 48%;
  background:linear-gradient(90deg,#c31f78,#ff4fa7 55%,#f38ebd);
  transform:rotate(-3deg);
  opacity:.9;
}

.section[data-section="onze-belofte"]{
  overflow:visible;
}
.section[data-section="onze-belofte"] > h2{
  margin-bottom:30px;
}
.promise-note-card{
  position:relative;
  max-width:930px;
  padding:38px 46px 34px;
  border:1px solid rgba(23,23,25,.12);
  border-radius:30px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.6), transparent 9rem),
    linear-gradient(180deg,#fffafd 0%,#f7e5ef 100%);
  box-shadow:0 18px 42px rgba(73,55,93,.09);
}
.promise-note-card::before{
  content:"";
  position:absolute;
  left:22px;
  top:38px;
  bottom:38px;
  width:4px;
  border-radius:999px;
  background:var(--hot-pink);
  opacity:.75;
}
.promise-note-card::after{
  content:"";
  position:absolute;
  left:18px;
  top:31px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--hot-pink);
  box-shadow:0 calc(100% + 270px) 0 var(--hot-pink);
  opacity:.75;
}
.promise-note-card p{
  position:relative;
  z-index:2;
  max-width:800px;
  margin-left:12px;
}
.promise-pin{
  position:absolute;
  z-index:6;
  width:235px;
  height:auto;
  right:-10px;
  top:-42px;
  overflow:visible;
  filter:drop-shadow(0 8px 10px rgba(55,52,65,.14));
  transform:rotate(2deg);
}
.promise-pin .charm-swing-a{transform-origin:147px 47px;animation:pinCharmA 4.8s ease-in-out infinite alternate;}
.promise-pin .charm-swing-b{transform-origin:176px 47px;animation:pinCharmB 5.4s ease-in-out infinite alternate;}
.promise-pin .charm-swing-c{transform-origin:204px 47px;animation:pinCharmC 4.4s ease-in-out infinite alternate;}
@keyframes pinCharmA{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes pinCharmB{from{transform:rotate(1deg)}to{transform:rotate(-2deg)}}
@keyframes pinCharmC{from{transform:rotate(-1deg)}to{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){
  .promise-pin .charm-swing-a,.promise-pin .charm-swing-b,.promise-pin .charm-swing-c{animation:none}
}
@media(max-width:760px){
  .promise-note-card{
    padding:76px 26px 30px 34px;
    border-radius:24px;
  }
  .promise-note-card::before{
    left:17px;
    top:72px;
    bottom:30px;
  }
  .promise-note-card::after{
    display:none;
  }
  .promise-note-card p{
    margin-left:3px;
  }
  .promise-pin{
    width:190px;
    right:4px;
    top:-26px;
  }
}


/* Compact editorial rhythm — preserve all copy, remove unnecessary visual gaps */
main{padding-top:22px;padding-bottom:78px}
.section{padding-top:52px;padding-bottom:52px}
.section h2{margin-bottom:18px}
.section h3{margin-top:24px;margin-bottom:7px}
.section p{margin-top:0;margin-bottom:8px}
.section p:last-child{margin-bottom:0}
.section ul{margin-top:14px;margin-bottom:8px}
.section li{padding-top:13px;padding-bottom:13px}
.section hr{margin:22px 0 0}
.intro p{margin-bottom:7px}
.section[data-section="the-experience"]{margin-top:24px;padding:46px}
.section[data-section="zo-verloopt-de-experience"] .flow-step{padding-top:16px;margin-top:24px}
.section[data-section="the-phone-drop-point"]{padding:44px}
.section[data-section="make-it-yours"]{padding:46px}
.section[data-section="prijzen"]{padding:46px}
.section[data-section="bookings"]{padding-left:32px}
.promise-note-card{padding:32px 42px 30px}
.promise-note-card p{margin-top:0;margin-bottom:8px}
.founder-copy{padding:48px 46px 44px}
.section[data-section="founder"] .founder-copy h2{margin-bottom:18px}
.founder-copy p{margin-top:0;margin-bottom:9px}
.founder-copy .founder-signoff{margin:2px 0 10px}
.founder-copy .why-matcha{margin-top:14px;padding-top:14px}
.founder-copy .final-line{margin-top:14px}
.founder-xoxo{margin-top:10px}
.target-audience{margin-top:12px;margin-bottom:4px}
@media(max-width:760px){
  main{padding-top:16px;padding-bottom:60px}
  .section{padding-top:40px;padding-bottom:40px}
  .section h2{margin-bottom:15px}
  .section h3{margin-top:21px;margin-bottom:6px}
  .section p{margin-bottom:7px}
  .section ul{margin-top:12px}
  .section[data-section="the-experience"],
  .section[data-section="the-phone-drop-point"],
  .section[data-section="make-it-yours"],
  .section[data-section="prijzen"]{padding:32px 24px}
  .promise-note-card{padding:64px 24px 25px 30px}
  .founder-copy{padding:32px 24px 34px}
}



/* V79: add-on name purple + bold; everything after dash black + regular */
.addon-name{
  color:#5d3ea8;
  font-weight:900;
}
.addon-copy{
  color:var(--ink);
  font-weight:400;
}
.addon-line{
  color:var(--ink);
  font-weight:400;
}


/* V80: stacked Indomie group pricing */
.indomie-prices{
  display:block;
  margin-top:6px;
}
.indomie-prices span{
  display:block;
  color:var(--ink);
  font-weight:400;
  line-height:1.45;
}


/* V103: Make it yours — keep prices visually secondary */
.section[data-section="make-it-yours-2"] h3 .addon-copy{
  font-size:clamp(13px,1.15vw,16px);
  line-height:1.3;
  letter-spacing:0;
}
.section[data-section="make-it-yours-2"] .indomie-prices{
  font-size:14px;
  line-height:1.4;
}
@media(max-width:620px){
  .section[data-section="make-it-yours-2"] h3 .addon-copy{font-size:13px;}
  .section[data-section="make-it-yours-2"] .indomie-prices{font-size:13px;}
}

/* V89: numbered experience flow — organic lilac cow-spot numbers */
.section[data-section="zo-verloopt-de-experience"]{
  counter-reset: matcha-flow;
}

.section[data-section="zo-verloopt-de-experience"] h3.flow-step{
  counter-increment: matcha-flow;
  position:relative;
  min-height:58px;
  display:flex;
  align-items:center;
  padding:18px 0 14px 78px;
  border-top:1px solid var(--line);
}

.section[data-section="zo-verloopt-de-experience"] h3.flow-step::before{
  content:counter(matcha-flow);
  position:absolute;
  left:4px;
  top:10px;
  width:54px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--lilac);
  color:var(--ink);
  border:2px solid rgba(93,62,168,.45);
  border-radius:58% 42% 63% 37% / 44% 61% 39% 56%;
  box-shadow:4px 4px 0 rgba(127,149,84,.22);
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:24px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
  transform:rotate(-4deg);
}

.section[data-section="zo-verloopt-de-experience"] h3.flow-step:nth-of-type(3n+2)::before{
  border-radius:43% 57% 39% 61% / 62% 41% 59% 38%;
  transform:rotate(4deg);
}

.section[data-section="zo-verloopt-de-experience"] h3.flow-step:nth-of-type(3n)::before{
  border-radius:64% 36% 54% 46% / 39% 57% 43% 61%;
  transform:rotate(-1.5deg);
}

@media(max-width:620px){
  .section[data-section="zo-verloopt-de-experience"] h3.flow-step{
    min-height:52px;
    padding-left:66px;
    padding-top:15px;
    padding-bottom:12px;
  }

  .section[data-section="zo-verloopt-de-experience"] h3.flow-step::before{
    left:0;
    top:9px;
    width:46px;
    height:42px;
    font-size:21px;
    box-shadow:3px 3px 0 rgba(127,149,84,.20);
  }
}



/* V110: refined silver heart beside Girls support girls title */
.girls-support-girls-heading{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.girls-support-girls-heading .silver-heart-charm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9em;
  line-height:1;
  font-weight:900;
  background:linear-gradient(180deg,#ffffff 0%,#e9ebef 14%,#a5a8af 32%,#ffffff 50%,#979aa1 68%,#eceef2 84%,#757980 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 8px rgba(66,55,87,.16));
  transform:translateY(.02em);
}
.girls-support-girls-heading .silver-heart-charm::before{
  content:none;
}
@media(max-width:620px){
  .girls-support-girls-heading{gap:10px;}
  .girls-support-girls-heading .silver-heart-charm{font-size:.78em;}
}


/* V134: lilac cards for “Inbegrepen in jullie experience” */
.section[data-section="the-experience"] li{
  background:var(--lilac-2);
  border-color:rgba(93,62,168,.22);
}




/* V148: Matcha Girlies Menu photo gallery */
.menu-gallery-wrap{
  margin-top:28px;
  position:relative;
}
.menu-gallery-kicker{
  margin:0 0 12px !important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-dark);
}
.menu-gallery{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:4px 2px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--lilac) transparent;
}
.menu-gallery::-webkit-scrollbar{height:7px}
.menu-gallery::-webkit-scrollbar-thumb{background:var(--lilac);border-radius:99px}
.menu-gallery-card{
  flex:0 0 min(340px,78vw);
  scroll-snap-align:start;
  margin:0;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(23,23,25,.13);
  background:var(--lilac-3);
  box-shadow:0 12px 34px rgba(72,55,102,.10);
}
.menu-gallery-card img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
@media(min-width:900px){
  .menu-gallery-card{flex-basis:350px}
}
@media(max-width:620px){
  .menu-gallery-wrap{margin-top:22px}
  .menu-gallery{gap:13px;padding-bottom:14px}
  .menu-gallery-card{flex-basis:82vw;border-radius:22px}
}


.booking-kader{
  position:relative;
  overflow:hidden;
  margin:28px 0 34px;
  padding:30px 24px 26px;
  border-radius:30px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.62), transparent 10rem),
    linear-gradient(135deg, rgba(238,232,251,.98), rgba(217,204,248,.98) 54%, rgba(219,228,195,.92));
  border:1px solid rgba(23,23,25,.12);
  box-shadow:0 18px 40px rgba(93,62,168,.10);
}
.booking-kader > *{position:relative;z-index:2}
.booking-kader .spot{
  position:absolute;
  border-radius:58% 42% 54% 46% / 45% 60% 40% 55%;
  z-index:1;
  opacity:.96;
}
.booking-kader .spot-a{
  width:170px;height:120px;top:-28px;right:-24px;
  background:rgba(127,149,84,.24);
  transform:rotate(-12deg);
}
.booking-kader .spot-b{
  width:124px;height:94px;left:-18px;bottom:38px;
  background:rgba(93,62,168,.16);
  transform:rotate(18deg);
}
.booking-kader .spot-c{
  width:84px;height:68px;right:20%;bottom:-10px;
  background:rgba(243,142,189,.18);
  transform:rotate(-20deg);
}
.booking-kader .eyebrow{
  display:inline-block;
  margin:0 0 8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(23,23,25,.10);
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.booking-kader h3{
  margin:0 0 8px;
  font-size:clamp(1.45rem,2.4vw,2.15rem);
  line-height:1.05;
}
.booking-kader .booking-note{
  margin:0 0 22px;
  max-width:62ch;
}
.booking-kader-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  align-items:start;
}
.booking-panel{
  padding:18px 18px 16px;
  border-radius:24px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(23,23,25,.10);
  backdrop-filter:blur(10px);
}
.booking-panel h4{
  margin:0 0 14px;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.booking-fields{
  display:grid;
  gap:14px;
}
.booking-field strong{
  display:block;
  margin-bottom:8px;
  font-size:.95rem;
}
.booking-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.booking-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(23,23,25,.10);
  font-size:.92rem;
  line-height:1.2;
}
.booking-pill.is-lilac{
  background:var(--lilac);
  border-color:rgba(93,62,168,.24);
}
.booking-pill.is-soft{
  background:rgba(255,255,255,.78);
}
.booking-linebox{
  min-height:44px;
  padding:12px 14px;
  border-radius:18px;
  background:#fff;
  border:1px dashed rgba(23,23,25,.18);
  font-size:.93rem;
}
.booking-linebox.placeholder{color:rgba(23,23,25,.55)}
.booking-textbox{
  min-height:70px;
  padding:14px;
  border-radius:18px;
  background:#fff;
  border:1px dashed rgba(23,23,25,.18);
  font-size:.93rem;
  color:rgba(23,23,25,.58);
}
.booking-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:-2px 0 14px;
  font-size:.88rem;
}
.legend-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.legend-dot{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(23,23,25,.14);
  background:#fff;
}
.legend-dot.is-booked{background:var(--lilac)}
.booking-month-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.booking-month{
  padding:13px 12px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(23,23,25,.09);
}
.booking-month strong{
  display:block;
  margin-bottom:9px;
  font-size:.93rem;
}
.booking-slots{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.booking-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(23,23,25,.10);
  font-size:.79rem;
}
.booking-slot.booked{
  background:var(--lilac);
  border-color:rgba(93,62,168,.24);
}
.booking-helper{
  margin-top:12px;
  font-size:.86rem;
  opacity:.76;
}
@media(max-width:980px){
  .booking-kader-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .booking-kader{padding:24px 18px 20px}
  .booking-month-grid{grid-template-columns:1fr}
}


.booking-date-select{display:block}
.booking-date-select strong{display:block;margin-bottom:8px}
.booking-date-select select{
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(23,23,25,.14);
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-weight:700;
}


/* V205 — native expandable sections: works without JavaScript */
main{
  padding-top:22px;
}
.accordion-native{
  margin:0 auto 12px !important;
  padding:0 !important;
  max-width:1080px;
  border:1px solid rgba(23,23,25,.12);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(72,55,96,.06);
}
.accordion-summary{
  list-style:none;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px;
  cursor:pointer;
  background:
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.62), transparent 8rem),
    linear-gradient(110deg, rgba(238,232,251,.98), rgba(217,204,248,.84) 63%, rgba(219,228,195,.72));
  user-select:none;
}
.accordion-summary::-webkit-details-marker{
  display:none;
}
.accordion-summary::marker{
  display:none;
  content:"";
}
.accordion-summary-title{
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:clamp(20px,2.3vw,30px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.accordion-summary-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(23,23,25,.12);
  font-size:28px;
  line-height:1;
  transition:transform .2s ease, background .2s ease;
}
.accordion-native[open] .accordion-summary{
  border-bottom:1px solid rgba(23,23,25,.10);
}
.accordion-native[open] .accordion-summary-icon{
  transform:rotate(45deg);
  background:var(--green-soft);
}
.accordion-native-content{
  padding:34px 28px 42px;
  background:rgba(255,255,255,.94);
}
.accordion-native-content > h2:first-child{
  display:none;
}
.accordion-native[data-section="founder"] .founder-copy > h2:first-child{
  display:none;
}
@media(max-width:620px){
  main{padding-top:15px}
  .accordion-native{
    margin-left:12px !important;
    margin-right:12px !important;
    margin-bottom:9px !important;
    border-radius:18px;
  }
  .accordion-summary{
    min-height:62px;
    padding:15px 17px;
    gap:12px;
  }
  .accordion-summary-title{
    font-size:18px;
    letter-spacing:-.025em;
  }
  .accordion-summary-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
    font-size:24px;
  }
  .accordion-native-content{
    padding:25px 18px 31px;
  }
}


/* ============================================================================================================
   Part 2 — live additions on top of the anchor. Same tokens, same shapes: the planner fields reuse the anchor's
   pill / linebox / textbox look; sub pages (bevestiging, mijn booking, privacy, fouten) reuse section styling.
   ============================================================================================================ */

/* the one inline style of the anchor, moved here for the CSP */
.welcome-cta{color:#5d3ea8}

/* text links that must look exactly like the surrounding bold text */
.inline-cta{color:inherit;text-decoration:none}
.inline-cta:hover,.inline-cta:focus-visible{text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:3px solid #5d3ea8;outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- planner: pills become buttons / selects */
button.booking-pill{font:inherit;font-size:.92rem;line-height:1.2;color:var(--ink);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
button.booking-pill:hover{border-color:rgba(93,62,168,.45)}
button.booking-pill:active{transform:scale(.97)}
button.booking-pill[aria-pressed="true"]{background:var(--lilac);border-color:rgba(93,62,168,.4)}
button.booking-pill[aria-pressed="true"]::before{content:"✓";margin-right:6px;font-weight:900}

select.booking-pill,select.booking-linebox{
  -webkit-appearance:none;appearance:none;font:inherit;font-size:.92rem;line-height:1.2;color:var(--ink);cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23171719' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
select.booking-pill{font-weight:inherit}
select.booking-pill.is-lilac{background-color:var(--lilac)}
select.booking-linebox{width:100%;background-color:#fff}
select.booking-linebox:disabled{cursor:not-allowed;opacity:.8}
select.booking-linebox.placeholder,select.booking-pill.placeholder{color:rgba(23,23,25,.55)}
select.booking-pill.placeholder{color:var(--ink)}

input.booking-linebox{width:100%;font:inherit;font-size:.93rem;color:var(--ink);border-style:solid;
  border-color:rgba(23,23,25,.14)}
textarea.booking-textbox{display:block;width:100%;font:inherit;font-size:.93rem;color:var(--ink);resize:vertical;
  line-height:1.5}
textarea.booking-textbox::placeholder,input.booking-linebox::placeholder{color:rgba(23,23,25,.55)}
.booking-linebox[aria-invalid="true"],.booking-textbox[aria-invalid="true"],
.booking-date-select select[aria-invalid="true"],select.booking-pill[aria-invalid="true"]{
  border:2px solid #c2185b}

.booking-date-select option.is-booked{background:var(--lilac);color:var(--ink)}
.booking-field-error{margin:6px 2px 0;font-size:.82rem;font-weight:700;color:#b0125a}
.booking-field-error:empty{display:none}

.booking-contact{margin-top:18px}
.booking-contact .booking-field strong{margin-bottom:6px}

.booking-summary{margin-top:16px;padding:14px 16px;border-radius:18px;background:var(--lilac-3);
  border:1px solid rgba(93,62,168,.18);font-size:.9rem;line-height:1.5}
.booking-summary p{margin:0}
.booking-summary p + p{margin-top:6px}
.booking-summary .summary-total{font-weight:900;font-size:1.02rem}
.booking-summary .summary-muted{opacity:.78}

.booking-agree{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.86rem;line-height:1.45;
  cursor:pointer}
.booking-agree input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:#5d3ea8}
.booking-agree a{font-weight:700}

.booking-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:50px;
  margin-top:16px;font:inherit;font-size:12px;letter-spacing:.13em;font-weight:900;text-transform:uppercase;
  color:var(--ink);cursor:pointer;background:var(--lilac);border:1px solid var(--ink);border-radius:999px;
  padding:12px 18px}
.booking-submit:hover{background:#ad93ea}
.booking-submit[disabled]{opacity:.6;cursor:progress}
.booking-error{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:#ffe3ef;color:#8a0d45;
  font-size:.88rem;font-weight:700}
.booking-error[hidden]{display:none}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.booking-done{padding:6px 2px}
.booking-done h4{margin:0 0 10px;font-size:1.3rem;text-transform:none;letter-spacing:0}

/* ---------------------------------------------------------------- sub pages (same shell as the home page) */
.page-shell{max-width:980px;margin:0 auto;padding:56px 24px 72px}
.page-card{position:relative;overflow:hidden;padding:40px 38px;border-radius:34px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(85,65,120,.08)}
.page-card > *{position:relative;z-index:2}
.page-card .eyebrow{display:inline-block;margin:0 0 10px;padding:6px 12px;border-radius:999px;
  background:var(--lilac-3);border:1px solid rgba(23,23,25,.10);font-size:.73rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.page-card h1{margin:0 0 14px;font-family:"Arial Narrow",Arial,sans-serif;font-size:clamp(34px,5vw,58px);
  line-height:.98;letter-spacing:-.01em;text-transform:uppercase}
.page-card h2{margin:30px 0 8px;font-size:clamp(20px,2vw,26px);line-height:1.15;color:var(--hot-pink)}
.page-card p,.page-card li{max-width:760px}
.page-card .spot{position:absolute;z-index:1;border-radius:58% 42% 54% 46%/45% 60% 40% 55%}
.page-card .spot-a{width:170px;height:120px;top:-34px;right:-30px;background:rgba(127,149,84,.22);
  transform:rotate(-12deg)}
.page-card .spot-b{width:110px;height:84px;left:-26px;bottom:-24px;background:rgba(243,142,189,.18);
  transform:rotate(18deg)}
.detail-list{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:8px 18px;margin:18px 0;padding:18px 20px;
  border-radius:22px;background:var(--lilac-3);border:1px solid rgba(93,62,168,.16)}
.detail-list dt{font-weight:800}
.detail-list dd{margin:0}
.pay-box{margin:18px 0;padding:18px 20px;border-radius:22px;background:#fff;border:1px solid rgba(93,62,168,.22)}
.pay-box h2{margin:0 0 8px;font-size:1.05rem}
.pay-box p{margin:0 0 8px}
.pay-box .detail-list{margin:12px 0 0}
.page-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;
  border-radius:999px;border:1px solid var(--ink);background:var(--lilac);color:var(--ink);font:inherit;font-size:11px;
  font-weight:900;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.pill-btn.is-ghost{background:#fff}
.pill-btn:hover{background:#ad93ea}
.pill-btn.is-ghost:hover{background:var(--lilac-3)}
.flash{max-width:980px;margin:18px auto 0;padding:12px 18px;border-radius:18px;background:var(--lilac-3);
  border:1px solid rgba(93,62,168,.2);font-weight:700}
.flash.is-error{background:#ffe3ef;border-color:rgba(194,24,91,.3)}
.form-stack{display:grid;gap:12px;max-width:520px;margin-top:16px}
.form-stack label{font-weight:800;font-size:.95rem}
.form-stack input[type=email],.form-stack input[type=text],.form-stack textarea{width:100%;min-height:48px;
  padding:12px 14px;border-radius:18px;border:1px solid rgba(23,23,25,.16);background:#fff;font:inherit;color:var(--ink)}
.steps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;padding:0;list-style:none}
.steps li{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.85rem;
  font-weight:800}
.steps li.is-done{background:var(--lilac)}
.steps li::before{content:none}

@media(max-width:620px){
  .page-shell{padding:28px 14px 48px}
  .page-card{padding:28px 20px;border-radius:26px}
  .detail-list{grid-template-columns:1fr;gap:2px}
  .detail-list dd{margin-bottom:10px}
  select.booking-pill{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  button.booking-pill{transition:none}
}

/* ============================================================================================================
   Part 3 — home page 28-09-2026. The hero follows the reference Soraya sent: the logo, and right underneath it
   (close, centred) the branding photo. Below that the Creative Studio cards, the price table and the socials.
   Same tokens and shapes as the anchor; every rule that competes with a `.section …` rule repeats a class so
   it actually wins.
   ============================================================================================================ */

/* ---- hero: logo, photo, caption in one centred column --------------------------------------------------- */
.hero-brand{
  min-height:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:38px 24px 52px;text-align:center
}
.hero-brand > *{position:relative;z-index:3}
.hero-logo-band{position:relative;display:inline-flex;justify-content:center;max-width:100%}
.hero-logo-band .hero-logo{position:relative;z-index:3;width:min(430px,76vw)}
.hero-logo-band .cow-spot{z-index:1}
.hero-brand .spot-b{width:84px;height:54px;left:-46px;top:14px;right:auto;bottom:auto;
  transform:rotate(-12deg);background:var(--green-dark);opacity:.9}
.hero-brand .spot-c{width:58px;height:42px;right:-34px;bottom:6px;left:auto;transform:rotate(9deg);opacity:.85}

.hero-portrait{position:relative;display:inline-flex;max-width:100%;margin-top:2px}
.hero-portrait-img{
  display:block;width:auto;max-width:min(430px,82vw);height:min(52vh,470px);
  object-fit:cover;object-position:50% 28%;
  border-radius:30px;border:3px solid #fff;box-shadow:0 24px 44px rgba(85,65,120,.24)
}
.hero-brand .hero-smiley{width:104px;right:-26px;bottom:-22px;top:auto;z-index:7}

.hero-caption{max-width:720px}
.hero-caption .eyebrow{margin-top:20px}
.hero-caption .hero-headline{max-width:none;align-items:center;margin:14px 0 10px !important}

/* ---- Creative Studio: one card per workshop -------------------------------------------------------------- */
.studio-groupsize{margin:4px 0 0;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;
  color:var(--green-dark)}
/* two columns from tablet up: four workshops then sit as a neat 2×2 instead of a row of three plus a lonely one */
.studio-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:24px 0 6px}
@media(min-width:760px){.studio-grid{grid-template-columns:1fr 1fr}}
.studio-card{display:flex;flex-direction:column;padding:0 26px 22px;border-radius:28px;overflow:hidden;
  background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 16px 30px rgba(85,65,120,.09)}
/* the workshop photo bleeds to the card edges; the card's own radius clips the top corners */
.studio-photo{display:block;width:calc(100% + 52px);max-width:none;margin:0 -26px 20px;aspect-ratio:16/10;object-fit:cover}
.studio-card h3{margin:0 0 10px;font-size:clamp(19px,1.8vw,25px);line-height:1.12}
.studio-card p{margin:0;max-width:none}
.studio-card .studio-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:auto 0 0;
  padding-top:18px}
.studio-price-main{font-family:"Arial Narrow",Arial,sans-serif;font-size:27px;font-weight:950;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.studio-price-alt{font-size:.84rem;font-weight:800;color:var(--green-dark)}

/* ---- prices ---------------------------------------------------------------------------------------------- */
.price-table{width:100%;max-width:760px;margin:20px 0 0;border-collapse:separate;border-spacing:0;overflow:hidden;
  border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.74)}
.price-table th,.price-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
.price-table thead th{background:var(--lilac-3);text-transform:uppercase;letter-spacing:.13em;font-size:11px;
  font-weight:900;color:var(--green-dark)}
.price-table tbody th{font-weight:800}
.price-table tbody td{font-family:"Arial Narrow",Arial,sans-serif;font-size:22px;font-weight:950;letter-spacing:-.02em;
  white-space:nowrap}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.price-note{margin:10px 0 0;font-size:.88rem;font-weight:700;opacity:.82}
.addon-name{font-weight:800}
.addon-copy{opacity:.82}

/* ---- socials --------------------------------------------------------------------------------------------- */
.section .socials-list{grid-template-columns:1fr;max-width:420px;gap:10px;margin-top:18px}

@media(max-width:620px){
  .hero-brand{padding:26px 16px 38px;gap:4px}
  .hero-logo-band .hero-logo{width:min(320px,80vw)}
  .hero-portrait-img{height:auto;width:min(360px,84vw);max-width:none;border-radius:24px}
  .hero-brand .hero-smiley{width:78px;right:-12px;bottom:-14px}
  .hero-brand .spot-b{width:58px;height:38px;left:-20px;top:10px}
  .hero-brand .spot-c{width:42px;height:30px;right:-14px}
  .studio-card{padding:0 20px 20px;border-radius:24px}
  .studio-photo{width:calc(100% + 40px);margin:0 -20px 18px}
  .price-table th,.price-table td{padding:11px 12px}
  .price-table tbody td{font-size:19px}
  .price-table thead th{font-size:10px;letter-spacing:.08em}
}