/* ==========================================================================
   Miss Kelly Play — the universe build
   Palette, radii, shadows and type taken from the reference site so this
   version sits beside it as the same brand. The hero is new.
   ========================================================================== */

:root{
  --cream:#FFF9F1;
  --cream-deep:#FBEFDE;
  --pink:#FF4F93;
  --pink-soft:#FFD9E9;
  --blue:#3E7CD9;
  --blue-soft:#DCE9FB;
  --sky:#7DD2F0;
  --sky-soft:#E2F5FC;
  --yellow:#FFC24B;
  --yellow-soft:#FFF1D2;
  --orange:#FF8A3D;
  --orange-soft:#FFE5D2;
  --lavender:#B7A6E8;
  --lavender-soft:#ECE6FA;
  --turquoise:#3DC4B9;
  --turquoise-soft:#DBF5F2;
  --green:#47C272;
  --green-soft:#DDF5E4;
  --ink:#33284A;
  --ink-soft:#5E5372;   /* deepened: the old value landed at 4.47 on the tinted cards */

  /* Measured text-safe partners. On cream, yellow reads 1.6:1, turquoise 2.6:1
     and sky 1.9:1, all far under the floor, so wherever those colours carry
     words these stand in for them. */
  --yellow-ink:#8A5A00;     /* 5.8:1 on cream */
  --turquoise-ink:#0A6A63;  /* 5.6:1 on its own soft tint, where 0E7C74 fell to 4.42 */
  --sky-ink:#0B6E90;        /* 5.2:1 on cream */
  --pink-ink:#B81655;       /* 6.0:1 on cream, 5.0:1 on the pink-soft chips */
  /* White on the brand pink measures 3.09:1, under the 4.5 a button label
     needs. Buttons and the skip link carry this deeper pink instead; the
     brand pink itself still fills every decorative and large-type use. */
  --pink-btn:#DE1F68;       /* 4.7:1 against white */
  --pink-btn-hover:#C81A5F;
  --green-ink:#1F8046;      /* 5.0:1 on cream */

  --r-card:1.75rem;
  --r-card-lg:2.5rem;
  --r-pill:999px;
  --r-image:2.5rem;

  --shadow-soft:0 2px 10px rgba(51,40,74,.06), 0 14px 32px rgba(51,40,74,.08);
  --shadow-soft-lg:0 8px 24px rgba(51,40,74,.10), 0 28px 60px rgba(51,40,74,.14);
  --shadow-button:0 6px 0 0 rgba(0,0,0,.12);
  --shadow-sticker:0 10px 0 0 rgba(51,40,74,.08), 0 18px 30px rgba(51,40,74,.16);

  /* Fredoka and Nunito carry no Greek, so the reference site silently drops to
     a system face on its Greek pages. Comfortaa and Fira Sans are appended as
     per-glyph fallbacks: Latin still renders in Fredoka and Nunito, Greek picks
     up a rounded partner instead of Segoe UI, and the two languages match. */
  --display:"Fredoka","Comfortaa","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Fira Sans","Segoe UI",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --wrap:1200px;
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,.5vw + 14.6px,17.5px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0}

/* ==========================================================================
   THE UNIVERSE
   A fixed layer behind everything: rainbows, planets, clouds, letters and
   stars, in four depths that drift on their own and shift with the scroll.
   Nothing here is an image file; it is all drawn in the page.
   ========================================================================== */
.universe{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Each parallax layer is two identical tiles stacked. The drive translates the
   layer and wraps at one tile height, so the universe never runs out however
   far the visitor scrolls. */
.u-layer{position:absolute;left:-6%;right:-6%;top:0;height:220vh;will-change:transform}
.u-layer.u-1{height:100%;will-change:auto}
.u-layer.u-1 > *{position:absolute}
.u-tile{position:absolute;left:0;right:0;top:0;height:110vh}
.u-tile.t2{top:110vh}
.u-tile > *{position:absolute}

.u-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 64% 72% at 50% 48%,
    rgba(255,249,241,.74) 0%, rgba(255,249,241,.46) 46%, rgba(255,249,241,0) 76%)}

/* depth 1: the big soft colour fields */
.u-blob{border-radius:50%;filter:blur(70px)}
.u-1 .b1{width:46vw;height:46vw;left:-12vw;top:-6vw;background:var(--pink-soft);opacity:.85}
.u-1 .b2{width:40vw;height:40vw;right:-10vw;top:18vh;background:var(--sky-soft);opacity:.9}
.u-1 .b3{width:36vw;height:36vw;left:16vw;top:62vh;background:var(--yellow-soft);opacity:.9}
.u-1 .b4{width:32vw;height:32vw;right:8vw;top:88vh;background:var(--lavender-soft);opacity:.85}

/* depth 2: rainbows and planets */
.u-rainbow{opacity:.5}
.u-planet{border-radius:50%}
.u-ring{position:absolute;inset:-26% -8%;border:3px solid currentColor;border-radius:50%;
  transform:rotate(-22deg);opacity:.55}

/* depth 3: clouds */
.u-cloud{opacity:.9;color:#fff}

/* depth 4: letters, numbers and stars, the closest and liveliest */
.u-letter{font-family:var(--display);font-weight:600;line-height:1;
  display:grid;place-items:center;border-radius:34% 66% 60% 40% / 55% 40% 60% 45%;
  color:#fff;box-shadow:var(--shadow-soft)}
.u-star{color:var(--yellow)}
.u-spark{border-radius:50%}

@keyframes u-float{0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  50%{transform:translate3d(var(--dx,6px),var(--dy,-16px),0) rotate(calc(var(--rot,0deg) + var(--spin,6deg)))}}
@keyframes u-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(var(--dx,4vw),var(--dy,3vh),0) scale(1.08)}}
@keyframes u-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@keyframes u-spin{to{transform:rotate(360deg)}}

.in-motion .u-blob{animation:u-drift var(--dur,90s) ease-in-out var(--delay,-20s) infinite}
.in-motion .u-letter,.in-motion .u-planet,.in-motion .u-cloud,.in-motion .u-rainbow{
  animation:u-float var(--dur,16s) ease-in-out var(--delay,-4s) infinite}
.in-motion .u-star,.in-motion .u-spark{animation:u-twinkle var(--dur,7s) ease-in-out var(--delay,-2s) infinite}

/* ==========================================================================
   SHELL
   ========================================================================== */
.wrap{width:min(var(--wrap),100% - 2.6rem);margin-inline:auto;position:relative;z-index:2}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--pink-btn);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 var(--r-card) 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}

.h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.06}
.h2{font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.14}
.h3{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.24}
.h4{font-size:clamp(1.02rem,1.4vw,1.2rem)}

.lede{font-size:clamp(1.04rem,1.1vw,1.18rem);color:var(--ink-soft);max-width:60ch;margin:1rem 0 0}
.eyebrow{display:inline-block;border-radius:var(--r-pill);background:#fff;padding:.45rem 1.05rem;
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-ink);box-shadow:var(--shadow-soft)}

/* the squiggle under a highlighted word, from the reference site */
.squiggle{position:relative;display:inline-block;white-space:nowrap}
.squiggle::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.14em;height:.3em;
  background:currentColor;opacity:.32;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c14-9 26 5 40-1s26-8 38 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c14-9 26 5 40-1s26-8 38 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}

.blob-frame{border-radius:42% 58% 63% 37% / 41% 45% 55% 59%}
.blob-frame-alt{border-radius:60% 40% 45% 55% / 55% 60% 40% 45%}

.row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1;
  padding:.9rem 1.85rem;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease-back), box-shadow .2s ease, background-color .2s ease, color .2s ease}
.btn-primary{background:var(--pink-btn);color:#fff;box-shadow:var(--shadow-button)}
.btn-primary:hover{transform:translateY(-2px);background:var(--pink-btn-hover);box-shadow:0 8px 0 0 rgba(0,0,0,.14)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 0 rgba(0,0,0,.12)}
.btn-secondary{background:#fff;color:var(--ink);border:2.5px solid rgba(51,40,74,.12);box-shadow:var(--shadow-soft)}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--pink);color:var(--pink-ink)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:var(--shadow-button)}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 8px 0 0 rgba(0,0,0,.14)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background-color .35s var(--ease), box-shadow .35s var(--ease)}
.nav.solid{background:rgba(255,249,241,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(51,40,74,.08),0 10px 30px rgba(51,40,74,.06)}
.nav-in{width:min(var(--wrap),100% - 2.6rem);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit;flex:0 0 auto}
.brand img{width:52px;height:52px;border-radius:50%;box-shadow:var(--shadow-soft)}
.brand b{font-family:var(--display);font-weight:600;font-size:1.12rem}
.nav-links{display:flex;gap:.1rem;margin-inline:auto}
.nav-links a{position:relative;text-decoration:none;color:var(--ink);font-family:var(--display);
  font-weight:500;font-size:.95rem;padding:.55rem .72rem;border-radius:var(--r-pill);white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s var(--ease)}
.nav-links a:hover{background:var(--pink-soft);color:var(--pink-ink)}
.nav-right{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.lang{display:inline-flex;background:#fff;border:2px solid rgba(51,40,74,.1);border-radius:var(--r-pill);padding:3px}
.lang-btn{font-family:var(--display);font-weight:600;font-size:.78rem;border:0;background:transparent;
  color:var(--ink-soft);padding:.4rem .7rem;border-radius:var(--r-pill);cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease)}
.lang-btn.is-on{background:var(--pink-btn);color:#fff}
.nav-cta{padding:.75rem 1.4rem;font-size:.95rem}
.burger{display:none;width:46px;height:46px;border:2px solid rgba(51,40,74,.1);border-radius:16px;
  background:#fff;cursor:pointer;padding:0;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2.6px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
.nav-links .nav-cta-mobile{display:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;z-index:2;padding:calc(var(--nav-h) + 2.4rem) 0 clamp(3rem,7vw,6rem)}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero-copy .h1{margin:1.15rem 0 0}
.hero-copy .h1 .hl{color:var(--turquoise-ink)}
.hero-copy .lede{margin-top:1.2rem}
.hero-copy .row{margin-top:1.9rem}

.hero-art{position:relative;margin-inline:auto;width:min(430px,100%)}
.kelly-frame{position:relative;padding:10px;background:linear-gradient(135deg,var(--yellow),var(--pink) 52%,var(--turquoise));
  box-shadow:var(--shadow-soft-lg)}
.kelly-inner{position:relative;overflow:hidden;background:var(--cream-deep);aspect-ratio:3/4}
.kelly-inner video,.kelly-inner img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.kelly-inner video{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}  /* absolute, or it stacks under the still and the overflow clips it away */
.kelly-inner.ready video{opacity:1}
.kelly-inner.ready img{opacity:0}
.kelly-inner img{transition:opacity .8s var(--ease)}

.speech{position:absolute;left:-4%;bottom:6%;z-index:3;max-width:15.5rem;
  background:#fff;border-radius:var(--r-card);padding:.95rem 1.15rem;
  box-shadow:var(--shadow-sticker);font-family:var(--display);font-weight:600;
  font-size:clamp(.94rem,1.1vw,1.06rem);color:var(--ink)}
.speech::after{content:"";position:absolute;right:16%;bottom:-13px;width:0;height:0;
  border:11px solid transparent;border-top-color:#fff;border-bottom:0}

.hero-badge{position:absolute;display:grid;place-items:center;border-radius:50%;
  box-shadow:var(--shadow-soft);font-family:var(--display);font-weight:600;color:#fff}
.hb-a{width:52px;height:52px;background:var(--pink);left:-7%;top:22%;font-size:1.2rem}
.hb-b{width:46px;height:46px;background:var(--turquoise);right:-4%;bottom:30%;font-size:1.05rem}
.hb-c{width:50px;height:50px;background:var(--yellow);right:6%;top:-4%;color:var(--ink)}
.hb-c svg{width:24px;height:24px}
.hb-d{width:44px;height:44px;background:#fff;color:var(--turquoise-ink);left:4%;top:-6%}
.hb-d svg{width:22px;height:22px}

.cue{display:flex;align-items:center;gap:.5rem;margin-top:2.2rem;color:var(--ink-soft);
  font-family:var(--display);font-weight:500;font-size:.85rem}
.cue svg{width:20px;height:24px}

/* ==========================================================================
   SECTIONS, each on its own soft colour band
   ========================================================================== */
.sec{position:relative;z-index:2;padding:clamp(3.4rem,7vw,6rem) 0}
/* The colour bands are translucent on purpose: the universe has to stay
   visible the whole way down, so each band tints it rather than covering it. */
.sec-tint{background:color-mix(in srgb, var(--tint,transparent) 74%, transparent)}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .sec-tint{background:var(--tint,transparent)}
}
.sec-head{max-width:60ch;margin-bottom:clamp(1.8rem,3.6vw,2.8rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .lede{margin-top:.9rem}
.sec-head.center .lede{margin-inline:auto}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease), transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- pillars ---------- */
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center}
.pillar{opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .55s var(--ease), transform .55s var(--ease-back)}
.reveal.in .pillar{opacity:1;transform:none}
.reveal.in .pillar:nth-child(1){transition-delay:.05s}
.reveal.in .pillar:nth-child(2){transition-delay:.13s}
.reveal.in .pillar:nth-child(3){transition-delay:.21s}
.reveal.in .pillar:nth-child(4){transition-delay:.29s}
.reveal.in .pillar:nth-child(5){transition-delay:.37s}
.reveal.in.done .pillar:nth-child(n){transition-delay:0s !important}
.pillar-ico{width:74px;height:74px;margin:0 auto .95rem;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#fff;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease-back)}
.pillar:hover .pillar-ico{transform:translateY(-6px) rotate(-6deg)}
.pillar-ico svg{width:34px;height:34px}
.pillar h3{font-size:1.16rem;color:var(--ct,var(--c));margin-bottom:.3rem}
.pillar p{margin:0;font-size:.94rem;color:var(--ink-soft);max-width:24ch;margin-inline:auto}

/* ---------- adventure cards ---------- */
.adv-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.adv{background:#fff;border-radius:var(--r-card-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s var(--ease)}
.adv.in{opacity:1;transform:none}
.adv:hover{box-shadow:var(--shadow-soft-lg)}
.adv-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tintc)}
.adv-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.adv:hover .adv-art img{transform:scale(1.05)}
.adv-wave{position:absolute;left:0;right:0;bottom:-1px;height:34px;color:var(--c)}
.adv-ico{position:absolute;left:1.2rem;top:1.2rem;width:50px;height:50px;border-radius:50%;
  background:var(--c);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.adv-ico svg{width:24px;height:24px}
.adv-body{padding:1.5rem 1.5rem 1.7rem;background:var(--tintc)}
.adv-body h3{color:var(--ct,var(--c));margin-bottom:.6rem}
.adv-body > p{margin:0 0 1rem;font-size:.95rem;color:var(--ink-soft)}
.tag-label{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem}
.chips{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{font-size:.8rem;font-weight:700;color:var(--ct,var(--c));background:#fff;
  border-radius:var(--r-pill);padding:.32rem .78rem;box-shadow:0 1px 4px rgba(51,40,74,.07)}
.adv-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.adv .btn{font-size:.9rem;padding:.75rem 1.3rem}
.adv-toggle{font-family:var(--display);font-weight:600;font-size:.85rem;background:#fff;
  border:2px solid rgba(51,40,74,.1);color:var(--ink);border-radius:var(--r-pill);
  padding:.72rem 1.2rem;cursor:pointer;transition:border-color .25s var(--ease), color .25s var(--ease)}
.adv-toggle:hover{border-color:var(--ct,var(--c));color:var(--ct,var(--c))}
.adv-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.adv-panel[data-open="true"]{grid-template-rows:1fr}
.adv-panel > div{overflow:hidden}
.adv-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
.adv-item{background:#fff;border-radius:var(--r-card);padding:1rem 1.1rem;box-shadow:0 1px 6px rgba(51,40,74,.07)}
.adv-item h4{font-size:1rem;margin-bottom:.3rem}
.adv-item p{margin:0 0 .6rem;font-size:.88rem;color:var(--ink-soft)}
.adv-item .btn{font-size:.82rem;padding:.6rem 1.1rem}

/* ---------- services ---------- */
.svc-list{display:grid;gap:clamp(1.8rem,3.6vw,3rem)}
.svc{display:grid;gap:clamp(1.4rem,3vw,2.8rem);align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.svc:nth-child(even) .svc-art{order:2}
.svc-art{position:relative;padding:9px;background:var(--c);box-shadow:var(--shadow-soft-lg)}
.svc-art img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.svc-body h3{color:var(--ct,var(--c));margin-bottom:.8rem}
.svc-body > p{margin:0 0 1.1rem;color:var(--ink-soft);max-width:56ch}
.svc-body .chips li{background:var(--tintc)}

/* ---------- about ---------- */
.about-grid{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.about-art{position:relative}
.about-art .frame{padding:10px;background:linear-gradient(140deg,var(--turquoise),var(--sky) 50%,var(--lavender));
  box-shadow:var(--shadow-soft-lg)}
.about-art img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}
.about-copy p{color:var(--ink-soft);margin:0 0 1rem;max-width:58ch}
.about-copy .lede{color:var(--ink);font-weight:700;margin-bottom:1.3rem}

/* ---------- collaborations ---------- */
.collab-grid{display:grid;gap:clamp(1.6rem,3.4vw,2.8rem);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.collab-copy p{color:var(--ink-soft);margin:0 0 1rem;max-width:58ch}
.collab-copy h3{margin:1.7rem 0 .9rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:2rem;font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.44em;width:1.05rem;height:.58rem;
  border-left:3px solid var(--turquoise);border-bottom:3px solid var(--turquoise);
  transform:rotate(-45deg);border-radius:2px}
.collab-side{background:#fff;border-radius:var(--r-card-lg);padding:clamp(1.5rem,3vw,2.1rem);
  box-shadow:var(--shadow-soft);align-self:start}
.chips-big{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0 0;padding:0}
.chips-big li{font-family:var(--display);font-weight:600;font-size:.88rem;color:#fff;
  background:var(--ct,var(--c));border-radius:var(--r-pill);padding:.52rem 1rem;box-shadow:var(--shadow-soft)}
.soon{margin-top:1.7rem;padding-top:1.4rem;border-top:2px dashed rgba(51,40,74,.14)}
.sticker{display:inline-block;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink);
  background:var(--yellow);padding:.55rem 1rem;border-radius:var(--r-pill);transform:rotate(-2.5deg);
  box-shadow:var(--shadow-soft)}
.soon p{margin:.9rem 0 0;color:var(--ink-soft);font-size:.95rem}

/* ---------- freebies ---------- */
.free-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.free{position:relative;background:#fff;border-radius:var(--r-card-lg);padding:1.9rem 1.4rem 1.6rem;
  box-shadow:var(--shadow-soft);text-align:center;
  opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), box-shadow .3s var(--ease)}
.reveal.in .free{opacity:1;transform:none}
.reveal.in .free:nth-child(1){transition-delay:.06s}
.reveal.in .free:nth-child(2){transition-delay:.15s}
.reveal.in .free:nth-child(3){transition-delay:.24s}
.reveal.in .free:nth-child(4){transition-delay:.33s}
.reveal.in.done .free:nth-child(n){transition-delay:0s !important}
.free:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft-lg)}
.free-ico{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:var(--c);
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-soft)}
.free-ico svg{width:30px;height:30px}
.free h3{font-size:1.1rem;color:var(--ct,var(--c));margin-bottom:.4rem}
.free p{margin:0 0 .9rem;font-size:.92rem;color:var(--ink-soft)}
.badge{display:inline-block;font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  background:var(--cream-deep);border-radius:var(--r-pill);padding:.34rem .8rem}

/* ---------- instagram + bridge ---------- */
.panel{background:#fff;border-radius:var(--r-card-lg);padding:clamp(2rem,4.4vw,3.2rem);
  box-shadow:var(--shadow-soft);text-align:center}
.panel p{color:var(--ink-soft);max-width:52ch;margin:.9rem auto 1.6rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:start;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.contact-mail{display:inline-block;margin-top:1.4rem;font-family:var(--display);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.2rem);color:var(--pink-ink);text-decoration:none;
  border-bottom:3px solid var(--pink-soft);transition:border-color .3s var(--ease)}
.contact-mail:hover{border-color:var(--pink)}
.contact-mascot{position:relative;width:clamp(150px,19vw,210px);margin:2rem 0 0}
.contact-mascot img{filter:drop-shadow(0 16px 26px rgba(51,40,74,.18))}
.mascot-bubble{position:absolute;left:66%;top:2%;white-space:nowrap;background:var(--yellow);
  color:var(--ink);font-family:var(--display);font-weight:600;font-size:.9rem;
  padding:.55rem 1rem;border-radius:var(--r-pill);box-shadow:var(--shadow-soft)}
.mascot-bubble::after{content:"";position:absolute;left:12%;bottom:-8px;width:0;height:0;
  border:9px solid transparent;border-top-color:var(--yellow);border-bottom:0}

.form{background:#fff;border-radius:var(--r-card-lg);padding:clamp(1.6rem,3.4vw,2.4rem);
  box-shadow:var(--shadow-soft-lg);display:grid;gap:1.05rem}
.field{display:grid;gap:.4rem}
.field-row{display:grid;gap:1.05rem;grid-template-columns:1fr 1fr}
.field label,.check label{font-family:var(--display);font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--cream);border:2.5px solid rgba(51,40,74,.1);border-radius:var(--r-card);
  padding:.8rem 1rem;width:100%;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease)}
.field textarea{resize:vertical;min-height:124px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink);
  background:#fff;box-shadow:0 0 0 4px var(--pink-soft)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--pink)}
.err{font-size:.84rem;color:var(--pink-ink);display:none}
.field.bad .err,.check.bad .err{display:block}
.check{display:grid;grid-template-columns:auto 1fr;gap:.25rem .7rem;align-items:start}
.check input{width:22px;height:22px;accent-color:var(--pink-btn);margin-top:.2rem}
.check .err{grid-column:2}
.btn-submit{width:100%;margin-top:.3rem}
.btn-submit[disabled]{opacity:.6;cursor:progress}
.form-state{border-radius:var(--r-card);padding:1.2rem 1.3rem}
.form-state h3{font-size:1.15rem;margin-bottom:.35rem}
.form-state p{margin:0;font-size:.95rem}
.form-state.ok{background:var(--turquoise-soft)}
.form-state.ok h3{color:var(--turquoise-ink)}
.form-state.bad{background:var(--pink-soft)}
.form-state.bad h3{color:var(--pink-ink)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;background:#fff;padding:clamp(2.6rem,5vw,4rem) 0 2rem;
  border-top:2px solid rgba(51,40,74,.07)}
.foot-in{display:grid;gap:1.7rem}
.foot-brand{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-brand img{width:58px;height:58px;border-radius:50%;box-shadow:var(--shadow-soft)}
.foot-brand p{margin:0;color:var(--ink-soft);font-size:.96rem;max-width:44ch}
.foot-links{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.foot-links a{color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:500;
  font-size:.95rem;border-bottom:2px solid transparent;transition:color .25s var(--ease), border-color .25s var(--ease)}
.foot-links a:hover{color:var(--pink-ink);border-color:var(--pink)}
.foot-legal{display:grid;gap:.6rem;max-width:62ch}
.foot-legal details{background:var(--cream);border-radius:var(--r-card);padding:.85rem 1.1rem}
.foot-legal summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:.94rem}
.foot-legal p{margin:.6rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.foot-legal .todo{font-weight:700;color:var(--pink-ink);font-size:.82rem}
.foot-copy{margin:0;font-size:.85rem;color:var(--ink-soft)}

/* ==========================================================================
   RESPONSIVE
   The coarse-pointer block sits first on purpose: it re-declares `display`, so
   below it would resurrect anything the width queries hide.
   ========================================================================== */
@media (pointer:coarse){
  .btn,.adv-toggle,.lang-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a,.foot-links a{min-height:44px;display:flex;align-items:center}
}

@media (max-width:1100px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:var(--nav-h);flex-direction:column;gap:0;
    padding:.9rem 1.4rem 1.4rem;background:var(--cream);box-shadow:0 18px 34px rgba(51,40,74,.14);
    border-top:2px solid rgba(51,40,74,.07)}
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem .3rem;font-size:1.02rem;border-bottom:2px solid rgba(51,40,74,.07);border-radius:0}
  .nav-links a:last-of-type{border-bottom:0}
  .burger{display:flex}
  .nav-right{margin-left:auto}
  .nav{background:rgba(255,249,241,.94);backdrop-filter:blur(12px)}
}

/* Greek is the longer language. The two long labels are shortened in the bar
   ("Η Miss Kelly", "Συνεργασίες"); measured, the Greek bar then needs about
   1100px, so it folds into the menu below 1160px, with room for the fallback
   font. (It used to fold below 1620px, which hid the menu on most laptops.)
   Original note: the same six links need noticeably more room.
   Measured, the Greek bar overruns 1440px and clears 1600px by only 16px, so it
   folds into the menu below 1620px instead of running off the edge. */
@media (max-width:1160px){
  html[lang="el"] .nav-links{display:none;position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;gap:0;padding:.9rem 1.4rem 1.4rem;background:var(--cream);
    box-shadow:0 18px 34px rgba(51,40,74,.14);border-top:2px solid rgba(51,40,74,.07)}
  html[lang="el"] .nav-links.open{display:flex}
  html[lang="el"] .nav-links a{padding:.85rem .3rem;font-size:1.02rem;border-radius:0;
    border-bottom:2px solid rgba(51,40,74,.07)}
  html[lang="el"] .nav-links a:last-of-type{border-bottom:0}
  html[lang="el"] .burger{display:flex}
  html[lang="el"] .nav-right{margin-left:auto}
  html[lang="el"] .nav{background:rgba(255,249,241,.94);backdrop-filter:blur(12px)}
}

@media (max-width:960px){
  .hero-grid,.svc,.svc:nth-child(even) .svc-art,.about-grid,.collab-grid,.contact-grid{grid-template-columns:1fr}
  .svc:nth-child(even) .svc-art{order:0}
  .hero-art{order:-1;width:min(340px,86%)}
  .adv-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center}
  .hero-copy .lede{margin-inline:auto}
  .hero-copy .row,.cue{justify-content:center}
}

@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .nav-cta{display:none}
  .brand b{display:none}
  .nav-links .nav-cta-mobile{display:inline-flex;align-self:flex-start;margin-top:1.1rem;
    padding:.85rem 1.5rem;font-size:1rem}
  .u-letter{display:none}   /* the closest layer crowds a small screen */
}

/* ==========================================================================
   PAUSED AND REDUCED MOTION
   The universe stops moving, but it never disappears: it is the brand's world,
   not an animation. Everything simply holds still.
   ========================================================================== */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important}
  .reveal,.reveal .pillar,.reveal .free,.adv{opacity:1;transform:none}
  /* Kelly's welcome loop is kept, by the owner's decision. Its crossfade needs
     its own timing back, since the blanket rule above would snap it. */
  .kelly-inner video,.kelly-inner img{transition-duration:.8s !important}
  .sticker{transform:rotate(-2.5deg)}
  .ticks li::before{transform:rotate(-45deg)}
  .u-layer{transform:none !important}
}