/* ============================================================================
   Studio Within — styles
   Warm ivory + pastels, gold accent, celestial "light within" motif.
   ========================================================================== */

:root{
  /* Brand palette (CI) */
  --warm-ivory:#F5F0E6;
  --ivory-2:#FBF8F1;
  --dusty-pink:#E8A5B8;
  --lavender:#B8A5D9;
  --soft-blue:#8FB0CC;
  --sage-green:#8FBAA3;
  --charcoal:#2E3238;
  --gold:#C9A227;
  --gold-soft:#D8B458;

  /* Working text colours (AA-checked against ivory) */
  --ink:#2E3238;
  --ink-soft:#565B62;
  --ink-mute:#767b82;
  --line:rgba(46,50,56,.14);

  /* Type */
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --script:'Dancing Script', 'Segoe Script', cursive;
  --sans:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --wrap:1180px;
  --gutter:clamp(1.15rem, 4vw, 3rem);
  --radius:18px;
  --shadow-soft:0 18px 50px -24px rgba(46,50,56,.35);

  --topbar-h:104px;   /* tall over the hero to give the detailed logo room */
}

/* ---- reset / base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--warm-ivory);
  line-height:1.65;
  font-size:clamp(1.0625rem,.6vw + .95rem,1.1875rem); /* >=17px on mobile */
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img{height:auto} /* width/height attrs are aspect hints, never fixed sizes */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}
em{font-style:italic}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--charcoal);color:#fff;padding:.6rem 1rem;border-radius:10px;transition:top .2s}
.skip-link:focus{top:12px}

:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---- topbar --------------------------------------------------------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:1.5rem;
  padding-inline:var(--gutter);
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s;
}
.topbar--solid{
  height:70px;   /* shrinks on scroll; the small logo lives here */
  background:rgba(251,248,241,.86);
  backdrop-filter:saturate(1.1) blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;height:100%;flex:0 0 auto;position:relative}
.brand-logo{height:clamp(54px,6.6vw,78px);width:auto;transition:height .35s ease, opacity .35s ease}
.topbar--solid .brand-logo{height:clamp(30px,3.6vw,44px)}   /* small on the sticky menu */
.brand-logo--white{filter:drop-shadow(0 2px 8px rgba(20,18,26,.5))}
.brand-logo--charcoal,
.brand-logo--gold{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.brand-logo--charcoal{filter:drop-shadow(0 1px 3px rgba(251,248,241,.55))}
/* Scrolled (sticky) menu: small gold logo on the ivory bar, either hero */
.topbar--solid .brand-logo--white{opacity:0}
.topbar--solid .brand-logo--charcoal{opacity:0}
.topbar--solid .brand-logo--gold{opacity:1}
/* Bright (child) hero at the top: dark nav + charcoal logo so it reads on pastel */
body.hero-bright .topbar:not(.topbar--solid) .brand-logo--white{opacity:0}
body.hero-bright .topbar:not(.topbar--solid) .brand-logo--charcoal{opacity:1}
body.hero-bright .topbar:not(.topbar--solid) .nav-link{color:var(--ink);text-shadow:none}
body.hero-bright .topbar:not(.topbar--solid) .nav-link:hover{color:var(--gold)}
body.hero-bright .topbar:not(.topbar--solid) .nav-cta{background:var(--charcoal);color:#fff}
body.hero-bright .topbar:not(.topbar--solid) .hamburger span{background:var(--charcoal);box-shadow:none}

.topnav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav-link{
  font-size:1.05rem;font-weight:700;letter-spacing:.005em;color:#fff;
  text-shadow:0 1px 10px rgba(20,18,26,.45);
  padding:.4rem 0;position:relative;white-space:nowrap;
  transition:color .25s;
}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:currentColor;transition:right .3s ease}
.nav-link:hover::after{right:0}
.topbar--solid .nav-link{color:var(--ink);text-shadow:none}
.topbar--solid .nav-link:hover{color:var(--gold)}

.nav-cta{
  font-size:.9rem;font-weight:700;letter-spacing:.01em;
  color:var(--charcoal);background:var(--warm-ivory);
  padding:.62rem 1.15rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 20px -8px rgba(20,18,26,.5);
  transition:transform .25s, background .25s, color .25s;
}
.nav-cta:hover{transform:translateY(-2px);background:var(--gold);color:#fff}
.topbar--solid .nav-cta{background:var(--charcoal);color:#fff}
.topbar--solid .nav-cta:hover{background:var(--gold)}

.hamburger{display:none}
.mobile-nav{display:none}

/* ============================================================================
   HERO — the two-video "light within" reveal
   ========================================================================== */
.hero{
  position:relative;
  min-height:640px;      /* fallback for browsers without svh */
  min-height:100svh;     /* fills the viewport on modern browsers */
  display:flex;
  overflow:hidden;
  background:var(--charcoal);
  isolation:isolate;
}
.hero-stage{position:absolute;inset:0;z-index:0;
  background-position:62% 50%;background-size:cover;background-repeat:no-repeat;
  background-image:image-set(url("../images/hero-adult-poster.webp") type("image/webp"),
                             url("../images/hero-adult-poster.jpg") type("image/jpeg"));
}
.hero[data-state="child"] .hero-stage{
  background-image:image-set(url("../images/hero-child-poster.webp") type("image/webp"),
                             url("../images/hero-child-poster.jpg") type("image/jpeg"));
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
  opacity:0;transition:opacity .7s ease;
  will-change:opacity;
}
.hero-video.is-active{opacity:1}

/* Adaptive scrim: darken centre for white text (adult); soften/lift for child */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s ease}
.hero.is-playing .hero-scrim{opacity:0} /* keep the film pure while it plays */
.hero[data-state="adult"] .hero-scrim{
  background:
    radial-gradient(120% 85% at 38% 52%, rgba(14,13,20,.62) 0%, rgba(14,13,20,.28) 42%, rgba(14,13,20,0) 70%),
    linear-gradient(to bottom, rgba(14,13,20,.45) 0%, rgba(14,13,20,0) 22%, rgba(14,13,20,0) 62%, rgba(14,13,20,.35) 100%);
}
.hero[data-state="child"] .hero-scrim{
  background:
    radial-gradient(66% 82% at 43% 47%, rgba(251,248,241,.95) 0%, rgba(251,248,241,.85) 26%, rgba(250,246,238,.5) 50%, rgba(250,246,238,0) 73%),
    linear-gradient(to bottom, rgba(20,18,26,.18) 0%, rgba(20,18,26,0) 16%);
}

/* Centre column */
.hero-center{
  position:relative;z-index:3;
  margin:auto;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-top:var(--topbar-h);
  transition:opacity .9s ease .05s, transform .9s ease .05s;
}
.hero.is-playing .hero-center{opacity:0;transform:translateY(14px);pointer-events:none}

.hero-copy{display:none;max-width:min(92vw,56rem)}
.hero[data-state="adult"] .hero-copy--adult{display:block}
.hero[data-state="child"] .hero-copy--child{display:block}

.hero-title{
  font-size:clamp(2.7rem,7.2vw,5.2rem);
  line-height:1.02;
  letter-spacing:-.015em;
}
.hero-title .lux{
  font-family:var(--script);
  font-weight:600;
  letter-spacing:.005em;
  padding-inline:.06em;
  font-size:1.06em;line-height:1;
}
.hero-sub{
  font-family:var(--sans);
  font-size:clamp(1.05rem,.35vw + 1rem,1.32rem);
  line-height:1.6;
  max-width:40ch;margin:1.5rem auto 0;
  font-weight:400;
}

/* State colours */
.hero[data-state="adult"] .hero-title{color:#F7F2E8;text-shadow:0 2px 30px rgba(10,9,15,.55)}
.hero[data-state="adult"] .hero-title .lux{color:var(--gold-soft);text-shadow:0 0 26px rgba(201,162,39,.5)}
.hero[data-state="adult"] .hero-sub{color:rgba(247,242,232,.9);text-shadow:0 1px 16px rgba(10,9,15,.5)}

.hero[data-state="child"] .hero-title{color:var(--charcoal);text-shadow:0 1px 2px rgba(251,248,241,.95),0 2px 24px rgba(251,248,241,.92)}
.hero[data-state="child"] .hero-title .lux{color:#8E5E96;text-shadow:0 1px 2px rgba(251,248,241,.95),0 1px 18px rgba(251,248,241,.95)}
.hero[data-state="child"] .hero-sub{color:#3b3f45;text-shadow:0 1px 2px rgba(251,248,241,.95),0 1px 14px rgba(251,248,241,.9)}

/* Reveal animation for the copy after a video settles */
.hero-copy--adult,.hero-copy--child{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* The gentle switch control */
.hero-switch{
  margin-top:2.1rem;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.66rem 1.25rem .66rem 1.05rem;
  border-radius:999px;
  font-size:.92rem;font-weight:700;letter-spacing:.01em;
  border:1.5px solid rgba(247,242,232,.55);
  color:#F7F2E8;
  background:rgba(20,18,26,.22);
  backdrop-filter:blur(6px);
  transition:transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s;
}
.hero-switch:hover{transform:translateY(-2px);background:rgba(20,18,26,.36);border-color:rgba(247,242,232,.85)}
.hero-switch-glyph{display:grid;place-items:center;width:20px;height:20px;opacity:.95}
.hero-switch-glyph svg{width:16px;height:16px}
.hero[data-state="child"] .hero-switch{
  border-color:rgba(46,50,56,.45);color:var(--charcoal);background:rgba(251,248,241,.8);
  box-shadow:0 8px 22px -12px rgba(46,50,56,.5);
}
.hero[data-state="child"] .hero-switch:hover{background:rgba(251,248,241,.95);border-color:rgba(46,50,56,.75)}

/* Scroll cue */
.hero-scrollcue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:3;width:26px;height:42px;border-radius:999px;
  border:1.5px solid rgba(247,242,232,.5);
  display:grid;place-items:start center;padding-top:7px;
  transition:opacity .5s ease, border-color .3s;
}
.hero[data-state="child"] .hero-scrollcue{border-color:rgba(46,50,56,.4)}
.hero-scrollcue-bar{width:2.5px;height:9px;border-radius:2px;background:rgba(247,242,232,.85);animation:cue 1.7s ease-in-out infinite}
.hero[data-state="child"] .hero-scrollcue-bar{background:rgba(46,50,56,.7)}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(12px);opacity:1}}
.hero.is-playing .hero-scrollcue{opacity:0;pointer-events:none}

/* Hide the switch/cue until JS is present (no-JS can't operate them) */
html:not(.js) .hero-switch,
html:not(.js) .hero-scrollcue-bar{animation:none}
html:not(.js) .hero-switch{display:none}

/* ---- positioning bar (fold-safety one-liner) ------------------------------ */
.positioning{background:var(--ivory-2);border-bottom:1px solid var(--line)}
.positioning .wrap{padding-block:clamp(1.1rem,2.4vw,1.7rem)}
.positioning-line{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1vw + .82rem,1.42rem);
  font-weight:400;color:var(--ink);text-align:center;line-height:1.45;
  max-width:52ch;margin-inline:auto;
}
.positioning-line em{font-style:italic;color:var(--gold)}
.positioning-place{white-space:nowrap}
.positioning-mark{
  display:inline-block;vertical-align:-.18em;
  width:1.15em;height:1.15em;margin-right:.5em;
  background:url("../images/brand/mark-gold.png") center/contain no-repeat;
  opacity:.9;
}


/* ---- responsive ----------------------------------------------------------- */
@media (max-width:860px){
  :root{--topbar-h:88px}
  .topnav{display:none}
  .nav-cta{display:none}
  .mobile-nav a{font-size:1.08rem}
  .hamburger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:44px;height:44px;border-radius:10px;
  }
  .hamburger span{display:block;width:24px;height:2px;border-radius:2px;background:#fff;
    box-shadow:0 1px 6px rgba(20,18,26,.5);transition:transform .3s, opacity .3s, background .3s;margin-inline:auto}
  .topbar--solid .hamburger span{background:var(--charcoal);box-shadow:none}
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-nav{
    display:flex;flex-direction:column;gap:.2rem;
    position:fixed;inset:var(--topbar-h) 0 auto 0;z-index:99;
    background:rgba(251,248,241,.97);backdrop-filter:blur(12px);
    padding:1rem var(--gutter) 1.6rem;
    box-shadow:var(--shadow-soft);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .3s, opacity .3s;
  }
  .mobile-nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .mobile-nav[hidden]{display:flex} /* JS toggles .is-open, keep in flow */
  .mobile-nav a{padding:.85rem .4rem;font-weight:600;border-bottom:1px solid var(--line)}
  .mobile-nav a:last-child{border-bottom:0}
  .mobile-cta{margin-top:.6rem;background:var(--charcoal);color:#fff;text-align:center;border-radius:999px;font-weight:700}
}

@media (max-width:520px){
  :root{--topbar-h:74px}
  .brand-logo{height:clamp(46px,13vw,58px)}
  .hero-video{object-position:67% 50%}
  .hero-stage{background-position:67% 50%}
  .hero-title{font-size:clamp(2.4rem,10vw,3.2rem)}
  .hero-switch{margin-top:1.6rem}
}

/* ============================================================================
   SHARED: sections, buttons, headings
   ========================================================================== */
.section{padding-block:clamp(3.5rem,7vw,7rem)}
.section-head{max-width:46rem;margin:0 auto clamp(2rem,4vw,3.5rem);text-align:center}
.section-title{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;color:var(--ink)}
.section-title em{font-style:normal;font-family:var(--script);color:var(--gold);font-weight:600;font-size:1.12em;padding-inline:.05em}
.section-lead{margin-top:1rem;color:var(--ink-soft);font-size:clamp(1.05rem,.4vw+1rem,1.2rem);line-height:1.65}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.eyebrow-mark{width:1.15em;height:1.15em;opacity:.95}
.section-head .eyebrow{justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;letter-spacing:.005em;
  border:1.6px solid transparent;cursor:pointer;transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#2c2510;box-shadow:0 12px 26px -14px rgba(201,162,39,.9)}
.btn--gold:hover{background:#b8901f;color:#241f0d}
.btn--outline{border-color:rgba(46,50,56,.28);color:var(--ink)}
.btn--outline:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost{color:var(--gold);padding-inline:.2rem;border-radius:6px;font-weight:700}
.btn--ghost:hover{color:#a97f16}
.btn--full{width:100%}

/* ---- Three doors ---------------------------------------------------------- */
.door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.7rem)}
.door-card{display:flex;flex-direction:column;background:var(--ivory-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease}
.door-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(46,50,56,.45)}
.door-media{display:block;aspect-ratio:5/3.4;overflow:hidden;background:var(--warm-ivory)}
.door-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.door-card:hover .door-img{transform:scale(1.04)}
.door-body{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.5rem 1.6rem}
.door-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.door-title{font-family:var(--serif);font-size:1.6rem;color:var(--ink);line-height:1.1}
.door-blurb{color:var(--ink-soft);font-size:1rem;line-height:1.55;flex:1}
.door-cue{font-weight:700;color:var(--ink);margin-top:.3rem}
.door-card:hover .door-cue{color:var(--gold)}

/* ---- What happens in a session ------------------------------------------- */
.session-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.session-media{position:relative;padding-bottom:2.5rem;padding-right:2.5rem}
.session-media picture{display:block}
.session-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-soft);display:block}
.session-photo-2{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:5px solid var(--warm-ivory);box-shadow:0 18px 40px -20px rgba(46,50,56,.5)}
.session-steps{list-style:none;margin-top:1.8rem;display:flex;flex-direction:column;gap:1.3rem}
.session-step{display:flex;gap:1.1rem;align-items:flex-start}
.session-n{flex:0 0 auto;font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--gold);
  width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid rgba(201,162,39,.4);display:grid;place-items:center}
.session-step-title{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin-bottom:.15rem}
.session-step-desc{color:var(--ink-soft);line-height:1.55}

/* ---- Affirmations + scratch panel ---------------------------------------- */
.affirm{background:var(--ivory-2)}
.scratch{position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;
  aspect-ratio:16/6.2;min-height:220px;box-shadow:var(--shadow-soft);
  margin-bottom:clamp(1rem,2vw,1.7rem)}
.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;
  background:radial-gradient(120% 140% at 50% 35%, #fff6e2 0%, #f6ead0 42%, #efdcbb 100%)}
.scratch-message{font-family:var(--serif);font-size:clamp(1.8rem,4.5vw,3.2rem);color:var(--ink);line-height:1.05}
.scratch-message .lux{font-family:var(--script);color:var(--gold);font-size:1.1em;padding-inline:.05em}
.scratch-sub{margin-top:.6rem;color:var(--ink-soft);font-size:clamp(.98rem,1.4vw,1.15rem)}
.scratch-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block}
.scratch-canvas:active{cursor:grabbing}
.scratch-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(247,242,232,.9);pointer-events:none;transition:opacity .4s ease}
.scratch-hint-dot{width:.7rem;height:.7rem;border-radius:50%;border:2px solid currentColor;animation:cue 1.6s ease-in-out infinite}
.scratch.is-done .scratch-hint{opacity:0}
html:not(.js) .scratch-canvas,html:not(.js) .scratch-hint{display:none}

.affirm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.7rem)}
.affirm-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4.3;
  display:flex;align-items:flex-end;justify-content:center;box-shadow:var(--shadow-soft);
  transition:transform .35s ease, box-shadow .35s ease}
.affirm-card:hover{transform:translateY(-6px);box-shadow:0 32px 60px -30px rgba(46,50,56,.5)}
.affirm-card>picture{position:absolute;inset:0;display:block}
.affirm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* soft light rising from the base so the words always read, wherever the art sits */
.affirm-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top, rgba(251,248,241,.92) 0%, rgba(251,248,241,.6) 26%, rgba(251,248,241,0) 58%)}
.affirm-lines{position:relative;z-index:1;text-align:center;
  padding:1.5rem 1.4rem clamp(1.8rem,8%,2.6rem);display:flex;flex-direction:column;gap:.18rem}
.affirm-line{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.affirm-line--lead{color:var(--gold)}

/* ---- Studio gallery ------------------------------------------------------- */
.studio-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:clamp(.7rem,1.4vw,1.1rem)}
.studio-tile{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft)}
.studio-tile picture{display:block;width:100%;height:100%}
.studio-tile img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease}
.studio-tile:hover img{transform:scale(1.05)}
.studio-tile--tall{grid-row:span 2}
.studio-tile--wide{grid-column:span 2}

/* ---- Meet Maryke ---------------------------------------------------------- */
.meet{position:relative;overflow:hidden;background:var(--warm-ivory)}
.meet-inner{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.meet-portrait{position:relative}
.meet-portrait picture{display:block}
.meet-arch{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:var(--radius);box-shadow:var(--shadow-soft);display:block}
.meet-badge{position:absolute;right:-14px;bottom:-14px;width:74px;height:74px;background:var(--ivory-2);border-radius:50%;
  display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.meet-badge img{width:60%}
.meet-copy p{color:var(--ink-soft);line-height:1.7;margin-top:1rem;max-width:52ch}
.pullquote{font-family:var(--script);font-size:clamp(1.6rem,3vw,2.3rem);color:var(--gold);margin:1.6rem 0 1.4rem;line-height:1.2}

/* ---- Contact (top of the cream -> white -> cream flow) -------------------- */
.contact{background:linear-gradient(to bottom, var(--warm-ivory) 0%, #ffffff 100%)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.contact-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0}
.contact-meta{list-style:none;display:flex;flex-direction:column;gap:.6rem;color:var(--ink-soft);font-size:.98rem}
.contact-meta strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:800;margin-bottom:.1rem}
.contact-meta a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(201,162,39,.4);text-underline-offset:3px}
.contact-meta a:hover{color:var(--gold)}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow-soft)}
.form-note{font-size:.92rem;color:var(--ink-mute);line-height:1.55;margin-bottom:1.3rem}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem;color:var(--ink)}
.field-opt{font-weight:400;color:var(--ink-mute)}
.field input,.field textarea{width:100%;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.field textarea{resize:vertical}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin:.4rem 0 1.2rem}
.consent input{margin-top:.2rem;flex:0 0 auto;width:1.1rem;height:1.1rem;accent-color:var(--gold)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-status{margin-top:1rem;font-size:.95rem;font-weight:600;min-height:1.2em}
.form-recaptcha{margin-top:.9rem;font-size:.74rem;line-height:1.5;color:var(--ink-mute)}
.form-recaptcha a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.form-recaptcha a:hover{color:var(--gold)}
.form-status.is-ok{color:#2f7a52}
.form-status.is-err{color:#b4453a}
.field.has-error input,.field.has-error textarea{border-color:#c66;box-shadow:0 0 0 3px rgba(198,102,102,.15)}

/* ---- Footer (cream -> white glow -> cream, ends on the horizon) ----------- */
.site-footer{
  /* continues the flow: large white band up top, easing down to the exact
     cream of the illustration's sky (#F7F1E7) so there is no seam at the image */
  background:linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff 28%,
    #F7F1E7 70%,
    #F7F1E7 100%);
  color:var(--ink-soft);padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:0}
.footer-main{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:2.2rem}
.footer-logo{height:54px;width:auto}
.footer-tag{margin-top:.9rem;color:#9a7a18;font-size:.9rem;letter-spacing:.02em}
.footer-scope{margin-top:1rem;max-width:46ch;font-size:.85rem;line-height:1.6;color:var(--ink-mute)}
.footer-h{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--ink);margin-bottom:1rem}
.footer-nav{display:flex;flex-direction:column;gap:.6rem}
.footer-nav a,.footer-contact a{color:var(--ink-soft);transition:color .2s}
.footer-nav a:hover,.footer-contact a:hover{color:#9a7a18}
.footer-contact{display:flex;flex-direction:column;gap:.55rem}
.footer-strong{font-weight:700;color:var(--ink)!important}
.footer-addr{color:var(--ink-mute);font-size:.92rem;line-height:1.5;margin-top:.3rem}
.footer-social{display:flex;gap:1rem;margin-top:.5rem}
.footer-fine{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;
  padding-block:1.2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-mute)}
.footer-fine a{color:var(--ink-soft)}
.footer-fine a:hover{color:#9a7a18}
.footer-fine-links{display:flex;align-items:center;gap:1.3rem}
.footer-credit{color:var(--ink-mute)}
.footer-credit a{color:#9a7a18;font-weight:700}
.footer-credit a:hover{color:#7d6210}
@media (max-width:560px){
  .footer-fine-links{flex-wrap:wrap;gap:.4rem 1.1rem}
}
.footer-scene{line-height:0;margin-top:0;font-size:0}
.footer-scene picture{display:block;line-height:0}
.footer-scene-img,.footer-scene img{width:100%;display:block;margin:0}

/* ============================================================================
   RESPONSIVE — content sections
   ========================================================================== */
@media (max-width:900px){
  .door-grid{grid-template-columns:1fr;max-width:32rem;margin-inline:auto}
  .door-media{aspect-ratio:16/8}
  .session-inner{grid-template-columns:1fr;gap:2rem}
  .session-media{max-width:30rem;margin-inline:auto;padding-right:1.8rem;padding-bottom:1.8rem}
  .meet-inner{grid-template-columns:1fr;gap:2rem}
  .meet-portrait{max-width:22rem}
  .meet-bg{opacity:.35}
  .meet-bg::after{background:linear-gradient(180deg,rgba(245,240,230,.5),var(--warm-ivory))}
  .contact-inner{grid-template-columns:1fr;gap:2rem}
  .affirm-grid{grid-template-columns:1fr 1fr}
  .studio-grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .studio-tile--tall{grid-row:auto}
  .studio-tile--wide{grid-column:auto}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .affirm-grid{grid-template-columns:1fr;max-width:24rem;margin-inline:auto}
  .studio-grid{grid-auto-rows:160px}
  .footer-main{grid-template-columns:1fr;gap:1.8rem}
  .footer-fine{justify-content:flex-start}
  .scratch{aspect-ratio:3/2.4}
  .contact-actions .btn{width:100%}
}

/* ============================================================================
   INNER PAGES
   ========================================================================== */
.page-hero{position:relative;overflow:hidden;background:var(--ivory-2);
  padding-top:calc(var(--topbar-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.page-hero-bg{position:absolute;inset:0;background:
  radial-gradient(60% 120% at 82% -10%, rgba(184,165,217,.28), transparent 60%),
  radial-gradient(50% 120% at 10% 120%, rgba(143,186,163,.22), transparent 60%)}
.page-hero-inner{position:relative;text-align:center;max-width:52rem}
.page-hero-inner{margin-inline:auto}
.page-hero-title{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.06;color:var(--ink)}
.page-hero-title em{font-style:normal;font-family:var(--script);color:var(--gold);font-size:1.1em;padding-inline:.04em}
.page-hero-sub{margin-top:1rem;color:var(--ink-soft);font-size:clamp(1.05rem,.5vw+1rem,1.28rem);line-height:1.6;max-width:44ch;margin-inline:auto}

.prose{max-width:44rem;margin-inline:auto;color:var(--ink-soft);font-size:1.1rem;line-height:1.75}
.prose.prose--wide{max-width:56rem}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;margin-top:2.4rem}
.prose h3{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.3rem;margin-top:1.8rem}
.prose p{color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(201,162,39,.5);text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem}
.prose ul li{position:relative;padding-left:1.7rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;border-radius:50%;
  background:radial-gradient(circle,var(--gold),rgba(201,162,39,.3))}
.prose blockquote{margin:2rem 0;padding-left:1.3rem;border-left:3px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);line-height:1.4}
.prose .pullquote{font-family:var(--script);font-style:normal;border:0;padding:0;color:var(--gold);
  font-size:clamp(1.7rem,3.4vw,2.6rem);text-align:center;margin:2.2rem 0}

.lead-in{font-size:1.25rem;line-height:1.6;color:var(--ink);font-family:var(--serif)}

/* Feature row: text + image, alternating */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;margin-block:clamp(2.5rem,5vw,4.5rem)}
.feature-row:nth-child(even) .feature-media{order:-1}
.feature-media img,.feature-media picture{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-soft);display:block}
.feature-copy h2{margin-top:0}

/* Pricing (Creative Art Circle) */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.price-card{background:var(--ivory-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.6rem;text-align:center;box-shadow:var(--shadow-soft);position:relative}
.price-card--feature{border-color:rgba(201,162,39,.5);box-shadow:0 24px 50px -26px rgba(201,162,39,.55)}
.price-name{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.price-amount{font-family:var(--serif);font-size:2.4rem;color:var(--gold);margin:.4rem 0 .1rem}
.price-save{font-size:.85rem;font-weight:700;color:var(--sage-green);text-transform:uppercase;letter-spacing:.06em}
.price-tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--gold);color:#2c2510;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:999px}

/* Info list (includes / details) */
.tick-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.5rem;margin-top:1.4rem}
.tick-list li{position:relative;padding-left:1.8rem;color:var(--ink-soft)}
.tick-list li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold)}

/* Two-up sub-section blocks (Programmes) */
.block{background:var(--ivory-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow-soft)}
.block+.block{margin-top:1.5rem}
.block h2{margin-top:0}

.callout{background:linear-gradient(135deg,rgba(184,165,217,.18),rgba(143,176,204,.14));border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);text-align:center;margin-top:2rem}
.callout .soon{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* Weekly schedule (Art Group Sessions) */
.schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);max-width:56rem;margin:2rem auto 0}
.schedule-grid .block{margin-top:0}
.sched-h{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--ink);margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.slot-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem}
.slot-list li{display:flex;flex-direction:column;gap:.12rem}
.slot-age{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.slot-when{color:var(--ink-soft);font-size:1.08rem}
.slot-when strong{color:var(--ink);font-weight:700}
@media(max-width:700px){.schedule-grid{grid-template-columns:1fr;max-width:28rem}}

@media (max-width:820px){
  .feature-row{grid-template-columns:1fr;gap:1.6rem}
  .feature-row:nth-child(even) .feature-media{order:0}
  .price-grid{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}
  .tick-list{grid-template-columns:1fr}
}

/* ---- Cookie bar ----------------------------------------------------------- */
.cookie-bar{
  position:fixed;left:50%;bottom:clamp(.8rem,2vw,1.5rem);transform:translateX(-50%) translateY(0);
  z-index:200;width:min(92vw,760px);
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;
  background:var(--ivory-2);border:1px solid var(--line);border-radius:16px;
  padding:1rem 1.2rem;box-shadow:0 24px 60px -20px rgba(46,50,56,.45);
  animation:cookieIn .5s ease both}
.cookie-bar[hidden]{display:none}
@keyframes cookieIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.cookie-text{font-size:.92rem;line-height:1.5;color:var(--ink-soft);flex:1 1 280px;margin:0}
.cookie-text a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cookie-text a:hover{color:var(--gold)}
.cookie-actions{display:flex;gap:.6rem;flex:0 0 auto}
.cookie-btn{padding:.55rem 1.1rem;border-radius:999px;font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s;border:1.5px solid transparent}
.cookie-btn--ghost{border-color:var(--line);color:var(--ink-soft)}
.cookie-btn--ghost:hover{border-color:var(--ink-soft);color:var(--ink)}
.cookie-btn--gold{background:var(--gold);color:#2c2510}
.cookie-btn--gold:hover{transform:translateY(-1px);background:#b8901f}

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-video{display:none} /* rely on the good static frame (stage background) */
  .hero-scrollcue{display:none}
  .scratch-canvas{display:none} /* show the message plainly */
}