/* JRPkids staging prototype. Logo-derived palette and typography from approved logo. */
:root {
  --canvas:#faf8f5;
  --surface:#fff;
  --ink:#1a1a2e;
  --muted:#6b6b7a;
  --jrp-blue:#A4D8E1;
  --jrp-blue-dark:#2A7A8A;
  --jrp-pink:#F4A6C0;
  --jrp-pink-dark:#C87A95;
  --jrp-white:#FFFFFF;
  --sage:#5a9d7a;
  --gold:#d4a82a;
  --lavender:#7a6ad8;
  --border:#e8e4dc;

  /* New logo colors (from latest supplied logo) */
  --logo-pink:#EC4899;        /* glossy pink cloud */
  --logo-pink-light:#FCE7F3;  /* pink highlight/gloss */
  --logo-blue:#38BDF8;        /* light blue accents on cloud */
  --logo-blue-dark:#0EA5E9;   /* darker blue for text on light bg */
  --logo-jrp-pink:#F43F5E;    /* bright pink "JRP" text */
  --logo-kids-blue:#06B6D4;   /* light blue "Kids" text */
  --logo-event-white:#FFFFFF; /* white "Event Services" text */
  --logo-bg-purple:#A78BFA;   /* light purple gradient start */
  --logo-bg-teal:#22D3EE;     /* teal blue gradient end */

  --display: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(1.25rem,5vw,5rem);
  --spotlight-x:50vw;
  --spotlight-y:50vh;
  --gradient-logo: linear-gradient(135deg, #6A5ACD, #4A90D9, #00BFFF, #FF6F91);
  --gradient-logo-bg: linear-gradient(135deg, var(--logo-bg-purple), var(--logo-bg-teal));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font:1rem/1.6 var(--sans); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--display); line-height:1.04; letter-spacing:-.03em; }
h1 { font-size:clamp(3rem,8vw,7rem); }
h2 { font-size:clamp(2rem,5vw,4rem); }
h3 { font-size:1.5rem; }
em { color:var(--jrp-pink); }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--jrp-blue); outline-offset:3px; }
.skip-link { position:fixed; z-index:20; top:.75rem; left:.75rem; transform:translateY(-150%); background:var(--ink); color:#fff; padding:.65rem 1rem; }
.skip-link:focus { transform:none; }
.cursor-light { position:fixed; z-index:-1; inset:0; pointer-events:none; opacity:0; background:radial-gradient(34rem circle at var(--spotlight-x) var(--spotlight-y),rgba(244,166,192,.18),transparent 60%); transition:opacity .3s; }
.cursor-light.is-active { opacity:1; }
.site-header { position:sticky; top:0; z-index:10; min-height:72px; padding:.75rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1rem; background:rgba(250,248,245,.94); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); }
.wordmark { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; text-decoration:none; }
.wordmark-mark { font:700 1.35rem/1 var(--display); letter-spacing:-.06em; }
.wordmark-mark span { color:var(--jrp-pink); }
.wordmark-note,.eyebrow { color:var(--muted); font-size:.69rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.desktop-nav { display:flex; gap:clamp(.6rem,2vw,1.75rem); align-items:center; }
.desktop-nav a,.mobile-nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font-size:.8rem; font-weight:700; }
.nav-cta,.button-primary { background:var(--jrp-pink)!important; border-color:var(--jrp-pink)!important; color:#fff!important; }
.menu-toggle { display:none; min-height:44px; padding:.5rem .75rem; border:1px solid var(--ink); background:transparent; }
.mobile-nav { position:fixed; top:72px; right:0; left:0; display:flex; flex-direction:column; padding:1rem var(--gutter) 2rem; background:var(--surface); border-bottom:1px solid var(--border); }
.mobile-nav a { font:1.4rem var(--display); }
.page-shell { padding:clamp(3.5rem,9vw,8rem) var(--gutter); max-width:1500px; margin:auto; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); align-items:center; gap:clamp(2rem,6vw,7rem); min-height:calc(100vh - 72px); }
.hero-logo { display:block; width:min(100%,14rem); height:auto; margin:0 0 1.5rem; }
.lead { max-width:56ch; font-size:clamp(1.05rem,1.8vw,1.35rem); color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.75rem 1.2rem; background:transparent; border:1px solid var(--ink); text-decoration:none; font-weight:700; }
.button:hover { background:var(--ink); color:#fff; }
.button-primary { background:var(--jrp-pink)!important; border-color:var(--jrp-pink)!important; color:#fff!important; }
.button-primary:hover { background:var(--jrp-pink-dark); border-color:var(--jrp-pink-dark); }

/* Glossy highlight utility for logo-derived bubble/cloud aesthetic */
.glossy {
  position:relative;
  overflow:hidden;
}
.glossy::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.05) 40%, transparent 60%);
  pointer-events:none;
  border-radius:inherit;
}

.placeholder-art,.card-art,.portrait-placeholder {
  background:
    radial-gradient(circle at 72% 18%,var(--jrp-pink) 0 8%,transparent 8.5%),
    radial-gradient(circle at 28% 75%,var(--jrp-blue) 0 14%,transparent 14.5%),
    linear-gradient(135deg,var(--jrp-blue),var(--jrp-pink));
}
.hero-slider { min-height:480px; position:relative; border:1px solid var(--ink); overflow:hidden; }
.hero-slide { min-height:480px; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.65)); }
.hero-slide:nth-child(2) { background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(164,216,225,.75)); }
.hero-slide:nth-child(3) { background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(244,166,192,.75)); }
.hero-slide span { font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.hero-slide strong { font:clamp(2rem,4vw,4rem)/1 var(--display); max-width:8ch; }
.slider-controls { position:absolute; display:flex; align-items:center; justify-content:space-between; gap:.5rem; right:1rem; bottom:1rem; left:1rem; }
.slider-controls button { min-height:44px; border:1px solid var(--ink); background:var(--canvas); padding:.5rem .7rem; }
.slider-controls span { background:var(--canvas); padding:.5rem; font-size:.75rem; }
.kinetic-strip { overflow:hidden; position:relative; padding:1rem var(--gutter); color:var(--surface); background:var(--gradient-logo); font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.kinetic-static { display:block; background:linear-gradient(90deg,var(--jrp-white),var(--jrp-blue),var(--jrp-pink),var(--jrp-white)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 3s linear infinite; }
.kinetic-animated { position:absolute; inset:0 auto 0 var(--gutter); display:flex; align-items:center; animation:marquee 18s linear infinite; }
.kinetic-strip:hover .kinetic-animated,.kinetic-strip:focus .kinetic-animated { animation-play-state:paused; }
@media (max-width:600px) { .kinetic-animated { display:none; } .kinetic-static { display:block; } }
@media (prefers-reduced-motion:reduce) { .kinetic-static { animation:none; color:var(--surface); } .kinetic-animated { display:none; } }
.section-grid,.areas,.packages,.values { border-top:1px solid var(--border); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:2rem; }
.card-grid,.package-grid,.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.service-card,.package-card { padding:1.5rem; background:var(--surface); border:1px solid var(--border); }
.service-card p:last-child,.package-card p { color:var(--muted); }
.card-art { display:block; width:100%; aspect-ratio:1.5; margin-bottom:1.25rem; }
.card-art.coral { background:linear-gradient(130deg,var(--jrp-pink),var(--jrp-pink-dark)); }
.card-art.gold { background:linear-gradient(130deg,var(--gold),#b89223); }
.card-art.lavender { background:linear-gradient(130deg,var(--lavender),#5a50b8); }
.card-art.blue { background:linear-gradient(130deg,var(--jrp-blue),var(--jrp-blue-dark)); }
.areas { background:var(--ink); color:#fdf6ec; }
.areas h2 { max-width:14ch; }
.areas p { color:#c4c0ba; }
.text-link { display:inline-flex; margin-top:1rem; min-height:44px; align-items:center; color:inherit; font-weight:700; }
.page-hero { max-width:1000px; padding-bottom:2rem; }
.notice { padding:1rem; border-left:4px solid var(--gold); background:#fff6dc; color:var(--ink); }
.package-card { border-top:5px solid var(--gold); }
.package-card strong { display:block; margin-top:1rem; font-size:.82rem; color:var(--jrp-pink); }
.filter-group { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1rem; padding:0; border:0; }
.filter-group legend { width:100%; margin-bottom:.4rem; font-weight:800; }
.filter-group button { min-height:44px; padding:.5rem .9rem; background:transparent; border:1px solid var(--border); border-radius:99px; }
.filter-group button[aria-pressed="true"] { background:var(--jrp-pink); color:#fff; border-color:var(--jrp-pink); }
.results-status { font-size:.85rem; font-weight:700; color:var(--muted); }
.portfolio-card button { width:100%; min-height:44px; border:1px solid var(--border); padding:.75rem; background:var(--surface); text-align:left; }
.portfolio-card button:hover { border-color:var(--jrp-pink); }
.portfolio-card .card-art { aspect-ratio:1.25; }
.portfolio-card strong,.portfolio-card small { display:block; }
.portfolio-card small { margin-top:.5rem; color:var(--muted); }
.art-fairytale .card-art,.art-fairytale { background:linear-gradient(135deg,var(--lavender),var(--gold)); }
.art-superhero .card-art,.art-superhero { background:linear-gradient(135deg,var(--jrp-pink),var(--lavender)); }
.art-birthday .card-art,.art-birthday { background:linear-gradient(135deg,var(--sage),var(--gold)); }
.art-seasonal .card-art,.art-seasonal { background:linear-gradient(135deg,var(--gold),var(--jrp-pink)); }
.project-dialog { width:min(620px,92vw); margin:auto; padding:0; border:1px solid var(--ink); background:var(--surface); }
.project-dialog::backdrop { background:rgba(26,26,46,.7); }
.dialog-inner { padding:2rem; }
.dialog-close { float:right; min-height:44px; padding:.5rem .75rem; border:1px solid var(--ink); background:transparent; }
.dialog-art { clear:both; height:200px; margin:1rem 0; }
.about-layout,.inquiry { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1fr); gap:clamp(2rem,7vw,8rem); align-items:center; min-height:calc(100vh - 72px); }
.portrait-placeholder { aspect-ratio:3/4; display:grid; place-items:center; border-radius:48% 48% 12% 12%; color:var(--ink); font:clamp(3rem,7vw,6rem)/.8 var(--display); text-align:center; background:var(--gradient-logo); }
.form-panel { padding:clamp(1rem,3vw,2rem); background:var(--surface); border:1px solid var(--border); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-grid label,.consent { display:grid; gap:.4rem; font-size:.9rem; font-weight:700; }
.form-grid .full { grid-column:1/-1; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; min-height:46px; padding:.65rem; background:#fff; border:1px solid var(--border); }
.form-grid select[multiple] { height:10rem; }
.form-grid small { color:var(--muted); font-weight:400; }
.consent { grid-template-columns:auto 1fr; margin:1.25rem 0; color:var(--muted); }
.consent input { width:20px; height:20px; }
.form-error { color:#b42318; font-weight:700; }
.form-success { margin-top:1rem; padding:1rem; color:#155c3c; background:#e6f4ed; }
.form-success button { min-height:44px; margin-left:.5rem; border:0; border-bottom:1px solid; background:transparent; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:2rem var(--gutter); border-top:1px solid var(--border); font-size:.85rem; }
.site-footer p { margin:0; color:var(--muted); }
.site-footer > a:last-child { min-height:44px; display:inline-flex; align-items:center; }
@media (prefers-reduced-motion:no-preference) { [data-reveal].is-visible { animation:reveal .5s ease-out both; } }
@media (max-width:800px) { .desktop-nav { display:none; }.menu-toggle { display:inline-flex; align-items:center; gap:.5rem; }.hero,.about-layout,.inquiry { grid-template-columns:1fr; min-height:auto; }.hero-logo { margin-inline:auto; }.card-grid,.package-grid { grid-template-columns:1fr; }.portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.hero-slider,.hero-slide { min-height:360px; }.site-footer { align-items:flex-start; flex-direction:column; }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; } }
@media (max-width:480px) { .portfolio-grid { grid-template-columns:1fr; }.page-shell { padding-block:3rem; }.section-heading { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; transform:none!important; }.cursor-light { display:none!important; }.kinetic-animated { display:none!important; } }
@keyframes marquee { to { transform:translateX(-42%); } }
@keyframes reveal { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes shimmer { to { background-position:200% center; } }