/* ===== WonderArt Studio — MAGENTA theme + all hero variants, layered on the shared Wonderland shell (styles.css) ===== */
:root{ --lead:#D80078; --lead-ink:#A8005C; --lead-tint:#FCE4F1; }
.lockup__logo{ height:112px; width:auto; display:block; margin:-20px 0; }
@media (max-width:600px){ .lockup__logo{ height:72px; margin:-12px 0; } }
.mob__close{ position:absolute; top:22px; right:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.02); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hero::after{ display:none !important; }
.art .kicker, .art .kicker--dark{ color:var(--lead-ink); }
.art .kicker__dot, .art .kicker__dot--dark{ background:var(--lead); }
.art .h2 em, .art .hero__h1 em, .art .finale__h2 em{ color:var(--lead-ink); font-style:italic; }
.art-section{ padding:84px 0; }
/* sister buttons equal width */
.sister__cta .cta{ min-width:244px; justify-content:center; }

/* ============ HERO: FULL-BLEED ============ */
.art-fb{ position:relative; min-height:86vh; display:flex; align-items:center; overflow:hidden; }
.art-fb__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.art-fb__scrim{ position:absolute; inset:0; background:linear-gradient(100deg,rgba(22,8,28,.76),rgba(22,8,28,.46) 45%,rgba(22,8,28,.06) 80%); }
.art-fb__panel{ position:relative; max-width:560px; margin-left:6vw; background:rgba(255,250,252,.16); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); border:1px solid rgba(255,255,255,.3); border-radius:22px; padding:34px 38px; }
.art-fb .kicker{ color:#ffd9ec; } .art-fb .kicker__dot{ background:#ff8fc6; }
.art-fb .hero__h1{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.4); margin:14px 0 16px; }
.art-fb .hero__h1 em{ color:#ff9ed0; }
.art-fb .hero__sub{ color:rgba(255,255,255,.93); max-width:480px; }
.art-fb .cta--ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
@media(max-width:600px){ .art-fb__panel{ margin:0 18px; padding:26px 24px; } }

/* ============ HERO: COLLAGE ============ */
.art-collage{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; background:radial-gradient(ellipse 60% 70% at 80% 50%,var(--lead-tint),transparent 70%); }
.art-collage__copy{ position:relative; z-index:5; max-width:480px; }
.art-collage .hero__h1{ font-size:clamp(38px,5vw,62px); margin:16px 0 18px; }
.art-collage__art{ position:absolute; right:1%; top:0; bottom:0; width:55%; z-index:1; }
.cphoto{ position:absolute; background:#fff; padding:10px 10px 12px; border-radius:6px; box-shadow:0 18px 40px rgba(20,20,40,.18); }
.cphoto img{ display:block; border-radius:3px; object-fit:cover; }
.cphoto--1{ width:300px; top:9%; left:16%; transform:rotate(-5deg); z-index:3; } .cphoto--1 img{ width:280px; height:200px; }
.cphoto--2{ width:210px; top:47%; left:1%; transform:rotate(4deg); z-index:4; } .cphoto--2 img{ width:190px; height:230px; }
.cphoto--3{ width:230px; top:31%; left:52%; transform:rotate(6deg); z-index:2; } .cphoto--3 img{ width:210px; height:160px; }
.cphoto--4{ width:175px; top:63%; left:43%; transform:rotate(-7deg); z-index:5; } .cphoto--4 img{ width:155px; height:155px; }
.csticker{ position:absolute; z-index:6; width:62px; height:62px; border-radius:50%; background:var(--lead); display:flex; align-items:center; justify-content:center; top:19%; left:45%; box-shadow:0 10px 24px rgba(216,0,120,.4); transform:rotate(-12deg); }
.csticker svg{ width:30px; height:30px; fill:#fff; }
@media(max-width:900px){ .art-collage__art{ display:none; } .art-collage{ min-height:auto; padding:80px 0 60px; } }

/* ============ HERO: BENTO ============ */
.art-bento{ padding:120px 0 60px; }
.art-bento__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px; }
.art-bento__grid>*{ border-radius:20px; overflow:hidden; position:relative; }
.bcopy{ grid-column:span 2; grid-row:span 2; background:#fff; border:1px solid var(--line); padding:34px; display:flex; flex-direction:column; justify-content:center; }
.bcopy .hero__h1{ font-size:clamp(28px,3vw,40px); margin:14px 0 14px; }
.bimg img{ width:100%; height:100%; object-fit:cover; }
.bimg__cap{ position:absolute; left:10px; bottom:10px; background:rgba(255,255,255,.9); color:var(--lead-ink); font-weight:600; font-size:11.5px; padding:4px 11px; border-radius:99px; }
.bcta{ background:var(--lead); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; text-decoration:none; }
.bcta b{ font-family:var(--font-serif); font-size:1.3rem; display:block; margin-bottom:4px; }
.bcta span{ font-size:12.5px; opacity:.9; }
.art-bento .tall{ grid-row:span 2; } .art-bento .wide{ grid-column:span 2; }
@media(max-width:820px){ .art-bento__grid{ grid-template-columns:repeat(2,1fr); } .bcopy{ grid-column:span 2; } .art-bento .wide{ grid-column:span 2; } }

/* ============ HERO: FRAMED ============ */
.art-framed{ padding:40px 0 50px; background:var(--cream-2); }
.art-framed__inner{ background:#fff; border:1px solid var(--line); border-radius:30px; padding:34px; display:grid; grid-template-columns:1fr 1.1fr; gap:42px; align-items:center; box-shadow:0 30px 70px rgba(168,0,92,.10); }
.art-framed .hero__h1{ font-size:clamp(32px,4vw,50px); margin:14px 0 16px; }
.art-framed__media{ height:62vh; min-height:430px; border-radius:22px; overflow:hidden; position:relative; }
.art-framed__media img{ width:100%; height:100%; object-fit:cover; }
.art-framed__media .tag{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.9); color:var(--lead-ink); font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:99px; }
@media(max-width:820px){ .art-framed__inner{ grid-template-columns:1fr; gap:22px; padding:18px; } .art-framed__media{ height:44vh; min-height:300px; order:-1; } }

/* ============ HERO: FLOATING (rotating pieces) ============ */
.art-floaty{ position:relative; min-height:90vh; display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; overflow:hidden; background:radial-gradient(ellipse 70% 70% at 75% 45%,var(--lead-tint),transparent 68%); }
.art-floaty__copy{ max-width:470px; justify-self:end; position:relative; z-index:5; }
.art-floaty .hero__h1{ font-size:clamp(36px,4.8vw,58px); margin:16px 0 18px; }
.art-floaty__stage{ position:relative; height:80vh; min-height:520px; }
.fpiece{ position:absolute; background:#fff; padding:8px; border-radius:12px; box-shadow:0 22px 46px rgba(20,20,40,.20); }
.fpiece img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:7px; }
.fpiece--1{ width:240px; height:180px; top:6%; left:20%; animation:floatA 7s ease-in-out infinite; }
.fpiece--2{ width:180px; height:210px; top:40%; left:2%; animation:floatB 8.5s ease-in-out infinite; }
.fpiece--3{ width:200px; height:150px; top:30%; left:50%; animation:floatC 7.6s ease-in-out infinite; }
.fpiece--4{ width:160px; height:160px; top:64%; left:38%; animation:floatB 9s ease-in-out infinite reverse; }
@keyframes floatA{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-20px) rotate(3deg)} }
@keyframes floatB{ 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(-24px) rotate(-3deg)} }
@keyframes floatC{ 0%,100%{transform:translateY(-6px) rotate(-2deg)} 50%{transform:translateY(16px) rotate(5deg)} }
@media(prefers-reduced-motion:reduce){ .fpiece{ animation:none!important; } }
@media(max-width:820px){ .art-floaty{ grid-template-columns:1fr; min-height:auto; padding:60px 0; } .art-floaty__copy{ justify-self:start; } .art-floaty__stage{ order:-1; height:360px; min-height:0; } .fpiece--1{ left:6%; } .fpiece--3{ left:54%; } }

/* ============ HERO: SPLIT ============ */
.art-asplit{ display:grid; grid-template-columns:1fr 1fr; min-height:84vh; align-items:center; }
.art-asplit__copy{ padding:60px 6vw 60px 0; max-width:560px; justify-self:end; }
.art-asplit .hero__h1{ font-size:clamp(34px,4.2vw,52px); margin:16px 0 18px; }
.art-asplit__media{ height:84vh; }
.art-asplit__media img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:820px){ .art-asplit{ grid-template-columns:1fr; } .art-asplit__media{ height:46vh; order:-1; } .art-asplit__copy{ padding:30px 0; } }

/* ============ SHARED SECTIONS ============ */
.art-msg{ text-align:center; padding:60px 0; }
.art-msg .inner{ max-width:720px; margin:0 auto; }
.art-msg blockquote{ font-family:var(--font-serif); font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.4; color:var(--ink); margin:14px 0 0; }
.art-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:36px; }
.art-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:all .25s cubic-bezier(.4,0,.15,1); }
.art-card:hover{ transform:translateY(-5px); box-shadow:0 18px 44px rgba(168,0,92,.10); border-color:var(--lead); }
.art-card img{ width:100%; height:190px; object-fit:cover; display:block; }
.art-card .body{ padding:22px 24px 26px; }
.art-card h3{ font-family:var(--font-serif); font-size:1.25rem; margin:0 0 8px; color:var(--ink); }
.art-card p{ font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0; }
.art-philo{ background:var(--cream-2); text-align:center; padding:90px 0; }
.art-philo blockquote{ font-family:var(--font-serif); font-style:italic; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.22; color:var(--lead-ink); max-width:840px; margin:0 auto; letter-spacing:-.01em; }
.art-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.art-split__media img{ width:100%; height:100%; object-fit:cover; min-height:400px; display:block; }
.art-split__copy{ padding:64px 6vw; display:flex; flex-direction:column; justify-content:center; }
@media(max-width:820px){ .art-split{ grid-template-columns:1fr; } .art-split__media img{ height:44vh; min-height:0; } }

.ft__col li{ color:var(--ink-2); }
.ft__legal{ justify-content:center; text-align:center; }
.wa-fab{ position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.45); transition:transform .2s ease; }
.wa-fab:hover{ transform:scale(1.08); } .wa-fab svg{ width:32px; height:32px; fill:#fff; }
.pvbadge{ position:sticky; top:0; z-index:80; background:var(--ink); color:#fff; text-align:center; font-size:12.5px; font-weight:600; padding:7px; }
.pvbadge b{ color:#ff8fc6; }

/* ===================== REFINEMENTS — button system, hero sizing, magenta accents ===================== */
/* hero: full-size bg image kept as-is; only a touch of breathing inside the frosted panel */
.art-fb__panel{ padding:30px 36px; }

/* SECONDARY button = solid magenta + white text (no navy, no white outline) */
.art .cta--magenta{ position:relative; background:var(--lead) !important; color:#fff !important; border:none !important; animation:none !important; box-shadow:0 8px 22px rgba(216,0,120,.26); }
.art .cta--magenta::before, .art .cta--magenta::after{ display:none !important; }
.art .cta--magenta:hover{ background:var(--lead-ink) !important; filter:none; transform:translateY(-1px); }
.art .cta--magenta .cta__arrow{ background:rgba(255,255,255,.22); }
.art .cta--magenta:hover .cta__arrow{ background:rgba(255,255,255,.3); }
.art .cta--magenta:hover .cta__arrow svg{ color:#fff; }

/* ghost hover -> magenta (kill the navy/white-border flip) */
.art .cta--ghost:hover{ background:var(--lead) !important; border-color:var(--lead) !important; color:#fff !important; }
.art .cta--ghost:hover .cta__arrow{ background:rgba(255,255,255,.25) !important; }
.art .cta--ghost:hover .cta__arrow svg{ color:#fff !important; }

/* sister accent -> magenta (not navy/violet) */
.art .sister__row{ border-left-color:var(--lead) !important; }

/* header "Book a session" button — solid magenta still-state, small moving glow on hover */
.hd__book{ font-size:14px !important; padding:10px 20px !important; position:relative; overflow:hidden; }
.hd__book .cta__text{ position:relative; z-index:2; }
.hd__book::after{ content:""; position:absolute; top:0; left:-75%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; }
.art .hd__book:hover{ background:var(--lead) !important; transform:none !important; box-shadow:0 0 0 3px rgba(216,0,120,.18),0 8px 24px rgba(216,0,120,.36); }
.hd__book:hover::after{ animation:hdSheen .85s ease; }
@keyframes hdSheen{ 0%{ left:-75%; opacity:0; } 25%{ opacity:1; } 100%{ left:130%; opacity:0; } }
@media(max-width:820px){ .hd__book{ display:none !important; } }

/* what-we-make: flex so the last row centres instead of left-aligning */
.art-grid{ display:flex !important; flex-wrap:wrap; justify-content:center; }
.art-grid .art-card{ flex:1 1 300px; max-width:362px; }

/* frosted panel — balanced vertical rhythm between items (kicker->h1 14, h1->sub 16, sub->buttons 24) */
.art-fb__panel .kicker{ margin:0 0 14px; }
.art-fb .hero__h1{ margin:0 0 16px; }
.art-fb .hero__sub{ margin:0; }
.art-fb .hero__ctas{ margin-top:24px !important; }

/* MOBILE HERO — Variant A (Stacked): full image band on top, headline + 1 button on cream below */
@media(max-width:600px){
  .art-fb{ display:block; min-height:auto; }
  .art-fb__img{ position:relative; inset:auto; height:44vh; }
  .art-fb__scrim{ display:none; }
  .art-fb__panel{ position:relative; margin:0; max-width:none; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border:none; border-radius:0; padding:24px 22px 30px; }
  .art-fb .kicker{ display:none; }
  .art-fb .hero__h1{ color:var(--ink); text-shadow:none; }
  .art-fb .hero__h1 em{ color:var(--lead-ink); }
  .art-fb .hero__sub{ display:none; }
  .art-fb .cta--ghost{ display:none; }
  .art-fb .hero__ctas{ margin-top:18px !important; }
}