@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=Tajawal:wght@300;400;500;700;800&family=Rubik:wght@300..800&family=Heebo:wght@300..800&display=swap');

/* ============================================================
   حضانة حكايات - Design System
   Radius system  : cards 24px | pills full | inputs 14px | tiles 32px
   Colour rule    : each page owns ONE signature colour from the
                    brand palette, exposed as --sig. Every accent on
                    that page derives from --sig. The palette itself
                    is fixed by the logo and is not negotiable.
   ============================================================ */

:root{
  /* This site LOOKS light only, deliberately - but it DECLARES support for
     both schemes. Android in-app browsers (WhatsApp, Instagram, Facebook all
     open links in a WebView) darken any page that doesn't offer its own dark
     theme, and `only light` is exactly what they treat as "safe to darken":
     links shared on WhatsApp opened dark on Android. Declaring `light dark`
     tells WebView, Chrome's Auto Dark Theme and Samsung Internet that the page
     handles dark itself, so they leave it alone - and every colour below is
     the same in both schemes, so dark-mode visitors see the light site.
     Form controls and the scrollbar are pinned light separately (below), since
     browsers would otherwise draw those dark once dark is declared. */
  color-scheme: light dark;

  /* brand palette, sampled from the logo artwork */
  --pink:#e8117c;
  --blue:#0d71b9;
  --yellow:#fbe900;
  --green:#8ac63f;
  --orange:#f7911f;
  --cyan:#4fc7f3;
  --purple:#652c90;
  --teal:#23b574;

  /* Deep variants: used wherever a brand colour is a solid fill behind white
     text. Each one clears WCAG AA 4.5:1 against #fff; the pure colours above
     stay for dots, borders, blobs and tint backgrounds. */
  --pink-d:#c60c68;
  --blue-d:#0b5f9c;
  --green-d:#4e7620;
  --orange-d:#9c5809;
  --cyan-d:#0f7ea8;
  --purple-d:#552476;
  --teal-d:#12784f;

  /* surfaces */
  --bg:#fffcf5;
  --bg-2:#fff7e9;
  --surface:#ffffff;
  --ink:#2c2621;
  --ink-2:#6b6158;
  --line:#efe4d2;

  --sig:var(--pink);
  /* The logo palette is bright by design. Pure green/orange/cyan/teal fail
     contrast as text, so text uses a darkened mix while fills stay pure.
     --mix flips to white in dark mode so the same formula lightens instead. */
  --mix:#0d0d0d;

  --r-card:24px;
  --r-tile:32px;
  --r-input:14px;

  --shadow-s:0 2px 8px rgba(94,74,50,.06);
  --shadow-m:0 12px 32px -12px rgba(94,74,50,.18);
  --shadow-l:0 32px 64px -28px rgba(94,74,50,.28);

  --font-display:'Baloo Bhaijaan 2','Rubik',system-ui,sans-serif;
  --font-body:'Tajawal','Rubik',system-ui,sans-serif;

  --nav-h:74px;
  --ease:cubic-bezier(.16,1,.3,1);
}

html[lang="he"]{
  --font-display:'Rubik','Baloo Bhaijaan 2',system-ui,sans-serif;
  --font-body:'Heebo','Rubik',system-ui,sans-serif;
}



body{
  --sig-soft:color-mix(in srgb,var(--sig) 12%,transparent);
  --sig-text:color-mix(in srgb,var(--sig) 58%,var(--mix));
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  color-scheme:light dark;    /* see :root - declared, not used: the site stays light */
  background-color:#fffcf5;   /* explicit, so no browser default ever shows through */
  color:#2c2621;
  scrollbar-color:#cfc3ae #fffcf5;   /* light scrollbar even when the OS is dark */
}
/* Form controls, pinned light: once a page declares dark support, browsers
   draw native inputs, selects and their pop-ups dark in dark mode. */
input,textarea,select,option,button{color-scheme:light}
/* Dark mode, identical to light. Some WebViews decide "this page supports dark"
   by finding a prefers-color-scheme rule, not only from color-scheme - so the
   rule exists, and it changes nothing. */
@media (prefers-color-scheme: dark){
  html{background-color:#fffcf5;color:#2c2621}
  body{background-color:#fffcf5;color:#2c2621}
}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is required, otherwise the HTML height attribute wins over the
   CSS width and the image renders at the wrong aspect ratio */
img{display:block;max-width:100%;height:auto}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
/* WebKit paints the native button face over any author background while
   appearance is auto, so every <button> we style - chips, age tabs, CTAs -
   would silently ignore its own colour on Safari and iOS. Reset it once. */
button{appearance:none;-webkit-appearance:none;background:none;border:none}

/* ---------- feeling native on a phone ---------- */
/* no grey/blue flash over every tapped control - each one carries its own
   :active press state instead (see "press feedback" below) */
html{-webkit-tap-highlight-color:transparent}
/* taps fire immediately rather than waiting to see if it's a double-tap zoom */
button,a,[role="button"],summary,label,.gal figure{touch-action:manipulation}
/* holding a control shouldn't select its label or pop the copy callout.
   Controls only: addresses, phone numbers and body text stay selectable. */
button,.btn,.chip,.nav__link,.age,.acc__btn,.langtog,.burger{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
:focus-visible{outline:3px solid var(--sig);outline-offset:3px;border-radius:6px}

/* language visibility: both languages ship in the HTML, CSS picks one */
html[lang="ar"] [data-lang="he"],
html[lang="he"] [data-lang="ar"]{display:none !important}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.2;letter-spacing:0}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{max-width:66ch}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);line-height:1.8}
.sig{color:var(--sig-text)}

/* ---------- layout ---------- */
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section--tint{background:var(--bg-2)}
.stack>*+*{margin-top:1.1rem}
.grid{display:grid;gap:1.5rem}
.center{text-align:center}
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head.center{margin-inline:auto}
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--sig-text);margin-bottom:.4rem;display:block;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  height:var(--nav-h);display:flex;align-items:center;gap:1.25rem;
  width:min(1240px,100% - 2rem);margin-inline:auto;
}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand img{height:44px;width:auto}
.brand__txt{font-family:var(--font-display);font-weight:800;font-size:1.15rem;line-height:1.1}
.brand__txt small{display:block;font-size:.68rem;font-weight:500;color:var(--ink-2)}

.nav{display:flex;align-items:center;gap:.15rem;margin-inline-start:auto}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:.3rem;
  padding:.55rem .8rem;border-radius:999px;font-weight:700;font-size:.95rem;
  font-family:var(--font-display);white-space:nowrap;
  background:none;border:0;cursor:pointer;transition:background .2s,color .2s;
}
.nav__link[aria-expanded="true"]{background:var(--sig-soft);color:var(--sig-text)}
@media (hover:hover) and (pointer:fine){.nav__link:hover{background:var(--sig-soft);color:var(--sig-text)}}
.nav__link[aria-current="page"]{color:var(--sig-text)}
.nav__link svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}

.menu{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;
  min-width:270px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-l);padding:.55rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav__item.open .menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu a{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:14px;
  font-weight:600;font-size:.94rem;transition:background .18s;
}
@media (hover:hover) and (pointer:fine){.menu a:hover{background:var(--bg-2)}}
.menu a .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

.hdr__side{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.langtog{
  display:flex;border:1.5px solid var(--line);border-radius:999px;padding:2px;background:var(--surface);
}
.langtog button{
  border:0;background:none;cursor:pointer;padding:.28rem .68rem;border-radius:999px;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--ink-2);
  transition:background .2s,color .2s;
}
.langtog button.on{background:var(--sig-d);color:#fff}
.themetog{
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;background:var(--surface);
}
.themetog svg{width:18px;height:18px}
.burger{display:none;width:42px;height:42px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  padding:1.2rem;overflow-y:auto;
  /* reaching the end of the menu mustn't drag the page underneath */
  overscroll-behavior:contain;
  transform:translateY(-100%);transition:transform .38s var(--ease);
}
.drawer.open{transform:translateY(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.drawer__grp{margin-top:1.4rem}
.drawer__grp h4{font-size:.85rem;color:var(--ink-2);margin-bottom:.5rem;font-weight:700}
.drawer__grp a{
  display:flex;align-items:center;gap:.7rem;padding:.75rem .6rem;border-radius:16px;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--line);
}
.drawer__grp a .dot{width:10px;height:10px;border-radius:50%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:1rem;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn--primary{background:var(--sig-d);color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--sig) 70%,transparent)}
@media (hover:hover) and (pointer:fine){.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px color-mix(in srgb,var(--sig) 70%,transparent)}}
.btn--primary:active{transform:translateY(0) scale(.98)}
.btn--ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{border-color:var(--sig);color:var(--sig-text);transform:translateY(-2px)}}
.btn--ghost:active{transform:translateY(0) scale(.98)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{margin-bottom:1rem}
.hero h1 .line2{display:block;color:var(--sig)}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.9rem}

/* the blobs echo the logo's speech bubbles */
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;z-index:0}
.hero__art{position:relative;display:grid;place-items:center;min-height:380px}
.hero__art > img{width:min(100%,470px);position:relative;z-index:2;filter:drop-shadow(0 24px 44px rgba(94,74,50,.22))}

/* pointer drift: site.js writes each layer's transform directly. Driving them
   from a CSS variable on .hero__art recalculated every descendant per frame */
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;transition:transform .5s var(--ease)}
.hero__art > img{transition:transform .6s var(--ease)}

/* three real rooms as instant prints, taped to the page - still, not a
   slideshow, and in the same paper-and-scribble register as the doodles */
.snaps{
  position:relative;z-index:2;width:min(100%,460px);aspect-ratio:1/1;
  transition:transform .6s var(--ease);
}
.snap{
  position:absolute;display:block;margin:0;width:50%;
  background:#fff;padding:9px 9px 0;color:inherit;text-decoration:none;
  border:3px solid var(--ink);border-radius:6px;
  box-shadow:6px 6px 0 var(--c);
  transition:rotate .22s var(--ease),translate .22s var(--ease),box-shadow .22s var(--ease);
}
.snap img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.snap__cap{
  display:block;
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.2;
  color:var(--cd);text-align:center;padding:.5rem 0 .6rem;
}
/* each print is a link now: press it down on finger-down, like the clay buttons */
.snap:active{translate:0 3px;box-shadow:3px 3px 0 var(--c);transition-duration:.1s}
.snap:focus-visible{outline:3px solid var(--cd);outline-offset:4px}
/* a strip of tape across the top edge */
.snap::before{
  content:"";position:absolute;z-index:1;top:-13px;left:50%;
  width:76px;height:24px;translate:-50% 0;rotate:-4deg;
  background:color-mix(in srgb,var(--yellow) 68%,transparent);
  border:1px solid rgba(44,38,33,.10);
}
/* captions sit at the bottom of each print, so a print lying lower must lie
   BEHIND the one above it - otherwise it covers that print's caption */
.s1{inset-inline-start:0;top:0;rotate:-6deg;z-index:3}
.s2{inset-inline-end:0;top:10%;rotate:6deg;z-index:2}
.s2::before{rotate:5deg}
.s3{inset-inline-start:25%;bottom:0;rotate:-2deg;z-index:1}
@media (hover:hover) and (pointer:fine){
  .snap:hover{rotate:0deg;translate:0 -7px;z-index:5;box-shadow:9px 10px 0 var(--c)}
}
.bubbles span{
  position:absolute;border-radius:50%;opacity:.85;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-18px) rotate(6deg)}
}

/* ---------- age groups (signature interaction) ---------- */
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.age{
  position:relative;cursor:pointer;border:2px solid var(--line);background:var(--surface);
  border-radius:var(--r-tile);padding:1.5rem 1.1rem;text-align:center;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  font-family:var(--font-display);
}
@media (hover:hover) and (pointer:fine){.age:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}}
.age[aria-selected="true"]{border-color:var(--c);box-shadow:var(--shadow-m);transform:translateY(-6px)}
.age__ico{
  width:66px;height:66px;margin:0 auto .7rem;border-radius:50%;
  display:grid;place-items:center;background:var(--c);
  transition:transform .25s var(--ease);
}
.age[aria-selected="true"] .age__ico{transform:scale(1.08) rotate(-6deg)}
@media (hover:hover) and (pointer:fine){.age:hover .age__ico{transform:scale(1.08) rotate(-6deg)}}
.age__ico svg{width:42px;height:42px}
.age__name{display:block;font-weight:800;font-size:1.2rem;line-height:1.3}
.age__age{display:block;font-size:.85rem;color:var(--ink-2);font-family:var(--font-body);font-weight:500;line-height:1.5;margin-top:.15rem}

.agepanel{
  margin-top:1.2rem;border-radius:var(--r-tile);padding:clamp(1.5rem,3vw,2.4rem);
  background:var(--surface);border:2px solid var(--c);box-shadow:var(--shadow-m);
}
.agepanel__in{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center}
.agepanel__ico{width:96px;height:96px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex-shrink:0}
.agepanel__ico svg{width:54px;height:54px}
.agepanel h3{color:color-mix(in srgb,var(--c) 62%,var(--mix));margin-bottom:.25rem}
/* the age panel swapping content: a UI response, parents click through all four */
.fadein{animation:fadein .2s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Two-column sections. The ratio comes in as --sp so the mobile rule below
   can still override it; an inline grid-template-columns could not be beaten. */
.split{display:grid;gap:1.5rem;grid-template-columns:var(--sp,1fr 1fr)}
.split--center{align-items:center}
.split--start{align-items:start}

/* ---------- age finder ---------- */
.finder{
  background:var(--surface);border:2px solid var(--line);border-radius:var(--r-tile);
  padding:clamp(1.4rem,3vw,2.2rem);margin-bottom:1.2rem;text-align:center;
  transition:border-color .4s var(--ease);
}
.finder__q{font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,2.2vw,1.5rem)}
.finder__val{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.2;margin:.35rem 0 .1rem;
  color:color-mix(in srgb,var(--fc,var(--pink)) 62%,var(--mix));
  transition:color .35s var(--ease);
}
.finder input[type=range]{
  -webkit-appearance:none;appearance:none;width:min(100%,520px);height:14px;
  border-radius:999px;border:2.5px solid var(--line);
  background:linear-gradient(to right,
    var(--fc,var(--pink)) 0 var(--fill,40%), var(--bg-2) var(--fill,40%) 100%);
  margin:1.1rem auto .4rem;display:block;cursor:pointer;direction:ltr;
}
.finder input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:38px;height:38px;border-radius:50%;
  background:var(--fc,var(--pink));border:4px solid var(--surface);cursor:grab;
  box-shadow:var(--shadow-m);transition:transform .2s var(--ease),background .35s var(--ease);
}
.finder input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.finder input[type=range]::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;background:var(--fc,var(--pink));
  border:4px solid var(--surface);cursor:grab;box-shadow:var(--shadow-m);
}
.finder__scale{
  display:flex;justify-content:space-between;width:min(100%,520px);margin:0 auto;
  font-size:.85rem;color:var(--ink-2);direction:ltr;
}
.finder__res{
  margin:1rem auto 0;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;max-width:none;
}
.finder__res b{color:color-mix(in srgb,var(--fc,var(--pink)) 62%,var(--mix))}

/* ---------- confetti ---------- */
.pop{position:fixed;width:11px;height:11px;border-radius:50%;pointer-events:none;z-index:70}
@keyframes popout{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}
}

/* the creature in the panel keeps a gentle idle bob so the section feels alive.
   Only the panel's: a bob on the selected TAB icon owned its transform, so the
   selected pose below never showed and selecting a hovered tab snapped from the
   hover pose to the keyframe's first frame. The tab is already marked by its
   border and lift. */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@media (hover:hover) and (pointer:fine){.age:hover .age__ico{transform:scale(1.12) rotate(-8deg)}}
.agepanel__ico{animation:bob 3s ease-in-out infinite}

/* ---------- cards ---------- */
.cards{display:grid;gap:1.25rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.4rem,2.4vw,2rem);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
/* no hover lift on .card--lift: every one on the site is a plain div, and a
   card that rises under the cursor says "click me" when nothing happens */
.card__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:1rem}
.card__ico svg{width:26px;height:26px}
.card h3{margin-bottom:.45rem}
.card p{color:var(--ink-2);font-size:.97rem}

/* tinted feature tiles, used to break up all-white card grids */
.tile{border-radius:var(--r-tile);padding:clamp(1.6rem,3vw,2.2rem);color:#fff;position:relative;overflow:hidden}
.tile h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:.5rem}
.tile p{color:rgba(255,255,255,.92)}
.tile__deco{position:absolute;inset-inline-end:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14)}

/* Light brand colours (green, orange, cyan, teal, yellow) cannot carry white
   text at WCAG AA. Those blocks opt into dark ink instead. */
.tile--ink,.quote--ink{color:#231f1b}
.tile--ink p,.quote--ink p,.quote--ink blockquote{color:rgba(35,31,27,.9)}
.quote--ink cite{color:rgba(35,31,27,.78)}
.tile--ink .card__ico{background:rgba(0,0,0,.12);color:#231f1b}
.tile--ink .tile__deco,.quote--ink .quote__mark{background:rgba(0,0,0,.07)}
.quote--ink .quote__mark{background:none;opacity:.18}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat__n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;color:color-mix(in srgb,var(--c,var(--sig)) 72%,var(--mix))}
.stat__l{color:var(--ink-2);font-size:.95rem;margin-top:.3rem}

/* ---------- day timeline ---------- */
.tl{position:relative;padding-inline-start:2.4rem}
.tl::before{content:"";position:absolute;inset-inline-start:11px;top:8px;bottom:8px;width:3px;background:var(--line);border-radius:2px}
.tl__item{position:relative;padding-bottom:1.9rem}
.tl__item::before{
  content:"";position:absolute;inset-inline-start:-2.4rem;top:6px;width:25px;height:25px;
  border-radius:50%;background:var(--c);border:4px solid var(--bg);
  transform:translateX(0);
}
html[dir="rtl"] .tl__item::before{inset-inline-start:-2.4rem}
.tl__time{font-family:var(--font-display);font-weight:800;color:color-mix(in srgb,var(--c) 62%,var(--mix));font-size:1.05rem;
  /* inline-block so the LTR clock range still sits at the RTL start edge;
     as a block, dir="ltr" pushed it to the far left of the row */
  display:inline-block;direction:ltr}
.tl__item h4{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:.15rem}
.tl__item p{color:var(--ink-2);font-size:.96rem}

/* ---------- accordion (rules / faq) ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.acc+.acc{margin-top:.75rem}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:.9rem;text-align:start;
  padding:1.15rem 1.35rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
}
.acc__num{
  width:32px;height:32px;border-radius:50%;background:var(--sig-soft);color:var(--sig-text);
  display:grid;place-items:center;font-size:.9rem;flex-shrink:0;
}
.acc__btn .chev{margin-inline-start:auto;width:16px;height:16px;transition:transform .3s var(--ease);flex-shrink:0}
.acc[open] .chev,.acc__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc__body{padding:0 1.35rem 1.35rem calc(1.35rem + 32px + .9rem);color:var(--ink-2)}
html[dir="rtl"] .acc__body{padding-inline:calc(1.35rem + 32px + .9rem) 1.35rem}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}

/* ---------- quote / wisdom ---------- */
.quote{
  border-radius:var(--r-tile);padding:clamp(2rem,5vw,3.5rem);
  background:var(--sig-d);color:#fff;position:relative;overflow:hidden;
}
.quote__mark{position:absolute;inset-inline-start:1.5rem;top:.2rem;font-size:7rem;opacity:.2;font-family:var(--font-display);line-height:1}
.quote blockquote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.55;position:relative;z-index:1;max-width:36ch;
}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;opacity:.9;font-size:1rem;font-weight:500}

/* ---------- real photographs ----------
   Framed to match the clay language: thick border, solid offset edge, and a
   caption that sits inside the frame rather than floating under it. */
.photo{
  margin:0;border:3px solid var(--line);border-radius:var(--r-tile);overflow:hidden;
  background:var(--surface);
  box-shadow:0 7px 0 -1px color-mix(in srgb,var(--line) 85%,transparent),
             0 20px 30px -18px rgba(94,74,50,.4);
}
.photo img{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover}
.photo figcaption{
  padding:.7rem 1.1rem;font-family:var(--font-display);font-weight:700;
  font-size:.93rem;color:var(--ink-2);
}
.photo--tall img{aspect-ratio:3/4}
.photo--wide img{aspect-ratio:16/10}

/* a loose mosaic of room shots; the staggered offsets keep it from reading
   as a plain grid, and it collapses to one column on a phone */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.mosaic .photo:nth-child(2){margin-top:2.2rem}
.mosaic .photo:nth-child(3){margin-top:1.1rem}
@media (max-width:900px){
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .photo:nth-child(n){margin-top:0}
}
@media (max-width:620px){ .mosaic{grid-template-columns:1fr} }

/* room-by-room tour: one card per class, tinted with that class's colour.
   Each card carries its own creature so the room and the age group read as
   the same thing on the building page and on the home age panel. */
.rooms{display:grid;gap:1.4rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.room{
  background:var(--surface);border:3px solid var(--ink);border-radius:24px;
  padding:clamp(1.2rem,3vw,1.8rem);box-shadow:6px 6px 0 var(--c);
}
.room__head{display:flex;gap:1rem;align-items:center;margin-bottom:.9rem}
.room__ico{
  flex-shrink:0;width:64px;height:64px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 18%, #fff);
  border:3px solid var(--ink);border-radius:50%;
}
.room__ico svg{width:38px;height:38px}
.room__name{margin:0;color:var(--cd);font-size:clamp(1.3rem,3vw,1.7rem)}
.room__age{margin:.15rem 0 0;font-size:.9rem;font-weight:600;opacity:.75}
.room__text{margin:0 0 1.1rem;max-width:62ch}
/* a longer write-up: paragraphs sit closer together, her bold in the class
   colour, and the closing line set apart as the class's own motto */
.room__body{margin-bottom:1.3rem;max-width:62ch}
.room__body .room__text{margin:0 0 .75rem}
.room__body strong{color:var(--cd);font-weight:800}
.room__tag{
  margin:1rem 0 0;padding:.7rem 1rem;border-radius:14px;
  font-family:var(--font-display);font-weight:800;line-height:1.5;color:var(--cd);
  background:color-mix(in srgb,var(--c) 14%,#fff);
}
.room__shots{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.room__soon{
  margin:0;font-size:.92rem;font-weight:600;color:var(--cd);
  background:color-mix(in srgb, var(--c) 12%, #fff);
  border-radius:14px;padding:.75rem 1rem;display:inline-block;
}
@media (max-width:620px){
  .room__shots{grid-template-columns:1fr}
  .room__ico{width:52px;height:52px}
  .room__ico svg{width:30px;height:30px}
}

/* ---------- the team ---------- */
/* the cards arrive at wildly different heights, so they flow in columns rather
   than a grid - nothing gets stretched or cropped to match a neighbour */
.mates{columns:3;column-gap:1.2rem;margin-top:1.6rem}
.mate{
  break-inside:avoid;margin:0 0 1.2rem;background:var(--surface);
  border:3px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:5px 5px 0 var(--green);
}
.mate img{display:block;width:100%;height:auto}
.mate figcaption{padding:.9rem 1.1rem 1.1rem}
.mate__name{margin:0;font-size:1.15rem;color:var(--green-d)}
.mate__role{
  margin:.1rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.04em;
  color:var(--orange-d);
}
.mate__line{margin:.4rem 0 0;font-size:.92rem;line-height:1.6;color:#4a423a}

/* the director sits above the rest, photo beside her words */
.mate--lead{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;gap:clamp(1rem,3vw,2rem);
  box-shadow:7px 7px 0 var(--pink);margin-bottom:0;
}
.mate--lead img{height:100%;object-fit:cover;max-height:460px}
.mate--lead figcaption{padding:clamp(1.2rem,3vw,2rem)}
.mate--lead .mate__name{font-size:clamp(1.4rem,3vw,2rem);color:var(--pink-d)}
.mate--lead .mate__role{color:var(--pink-d);font-size:.9rem}
.mate--lead .mate__line{font-size:1.02rem}

/* Sahera's qualifications - one list, two homes (management page, her team card) */
.creds{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.creds li{display:flex;align-items:flex-start;gap:.6rem;font-weight:600;line-height:1.5}
.creds li svg{width:20px;height:20px;flex-shrink:0;margin-top:.15em;color:var(--orange-d)}
.creds-card{
  background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-card);
  padding:clamp(1.2rem,3vw,1.7rem);box-shadow:6px 6px 0 var(--orange);
}
.creds-card h3{margin:0 0 .9rem;color:var(--orange-d)}
.creds__label{margin:1rem 0 .5rem;font-weight:800;font-family:var(--font-display);color:var(--pink-d)}
.mate--lead .creds li{font-size:.95rem}
.mate--lead .creds li svg{color:var(--pink-d)}

.mates__intro{
  margin:clamp(2rem,4vw,2.8rem) 0 0;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--green-d);
}
@media (max-width:900px){ .mates{columns:2} }
@media (max-width:620px){
  .mates{columns:1}
  .mate--lead{grid-template-columns:1fr}
  .mate--lead img{max-height:320px}
}

/* ---------- gallery ---------- */
.gal{columns:3;column-gap:1rem}
.gal figure{break-inside:avoid;margin-bottom:1rem;border-radius:var(--r-card);overflow:hidden;position:relative;cursor:pointer;background:var(--surface);border:1px solid var(--line)}
.gal img{width:100%;height:auto;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){.gal figure:hover img{transform:scale(1.05)}}
.gal figcaption{padding:.8rem 1rem;font-size:.92rem;font-weight:600;font-family:var(--font-display)}
.gal__ph{aspect-ratio:var(--ar,4/3);display:grid;place-items:center;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff))}
.gal__ph svg{width:52px;height:52px;opacity:.85}
.gal-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem;justify-content:center}
/* class chips carry their group's colour and creature, so the gallery reads
   the same way as the age panel and the room tour */
.chip--room{display:inline-flex;align-items:center;gap:.4rem}
.chip--room .chip__ico{width:22px;height:22px;display:block;flex-shrink:0}
.chip--room .chip__ico svg{width:100%;height:100%}
#galfilter .chip--room.on{background:var(--cd);border-color:var(--cd);color:#fff}
#galfilter .chip--room.on .chip__ico{color:#fff}

/* one titled section per class, shown when no single chip is selected */
.gal-group + .gal-group{margin-top:clamp(2rem,4vw,3rem)}
.gal-group__h{
  display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--cd);
}
.gal-group__h::before{
  content:"";width:14px;height:14px;border-radius:50%;
  background:var(--c);border:2px solid var(--ink);flex-shrink:0;
}
.gal-group__n{
  font-family:var(--font-body);font-size:.8rem;font-weight:700;
  background:color-mix(in srgb, var(--c) 20%, #fff);color:var(--cd);
  border-radius:999px;padding:.1rem .55rem;
}
.chip{
  padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
  cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:.93rem;transition:background-color .2s,border-color .2s,color .2s,transform .12s var(--ease);
}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--sig)}}
.chip.on{background:var(--sig-d);color:#fff;border-color:var(--sig-d)}

.lb{position:fixed;inset:0;z-index:80;background:rgba(20,14,10,.94);display:none;place-items:center;padding:2rem}
.lb.open{display:grid}
.lb img{max-width:92vw;max-height:84vh;border-radius:16px}
.lb__cap{color:#fff;text-align:center;margin-top:1rem;font-family:var(--font-display);font-weight:600}
.lb__x{position:absolute;top:1.2rem;inset-inline-end:1.2rem;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb__x svg{width:22px;height:22px}

/* empty state, shown when a gallery category has no photos yet */
.empty{
  text-align:center;padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;border:2px dashed var(--line);
  border-radius:var(--r-tile);color:var(--ink-2);
}
.empty svg{width:56px;height:56px;margin:0 auto 1rem;opacity:.5}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-weight:700;font-size:.94rem;font-family:var(--font-display)}
.field input,.field textarea,.field select{
  /* iOS zooms into any field under 16px and never zooms back out. This only
     held by coincidence (phone body text happens to be 16px) - now it's pinned */
  font-size:max(16px,1em);
  padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-input);
  background:var(--surface);transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:.75}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--sig);box-shadow:0 0 0 4px color-mix(in srgb,var(--sig) 18%,transparent);
}
.field .help{font-size:.85rem;color:var(--ink-2)}
.field .err{font-size:.85rem;color:#d32d2d;display:none}
.field.bad input,.field.bad textarea{border-color:#d32d2d}
.field.bad .err{display:block}
.formnote{padding:1rem 1.2rem;border-radius:var(--r-input);background:var(--sig-soft);color:var(--sig-text);font-weight:600;display:none}
.formnote.show{display:block}

/* ---------- contact rows ---------- */
.ctc{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
@media (hover:hover) and (pointer:fine){.ctc:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--sig-d)}}
.ctc__ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex-shrink:0}
.ctc__ico svg{width:23px;height:23px}
/* these must be block: as inline spans the label and value ran together and
   the bidi algorithm reordered the phone digits */
.ctc__l{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.5}
.ctc__v{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.4;direction:ltr;text-align:start}
html[dir="rtl"] .ctc__v{text-align:right}
.ctc__v[data-native]{direction:rtl;text-align:right}

/* ---------- footer ---------- */
.ftr{background:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;margin-top:auto}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.ftr h4{font-family:var(--font-display);font-size:1rem;margin-bottom:.8rem}
.ftr ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem}
.ftr a{color:var(--ink-2);font-size:.95rem;transition:color .2s}
@media (hover:hover) and (pointer:fine){.ftr a:hover{color:var(--sig-text)}}
.ftr__bar{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:var(--ink-2)}
.social{display:flex;gap:.5rem;margin-top:.9rem}
.social a{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;transition:transform .2s var(--ease),background-color .2s,border-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){.social a:hover{background:var(--sig-d);border-color:var(--sig-d);color:#fff;transform:translateY(-3px)}}
.social svg{width:19px;height:19px}

/* ---------- page banner ---------- */
.banner{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,4rem);background:var(--bg-2);border-bottom:1px solid var(--line)}
.banner h1{margin-bottom:.5rem}
.crumb{font-size:.9rem;color:var(--ink-2);margin-bottom:.6rem}
@media (hover:hover) and (pointer:fine){.crumb a:hover{color:var(--sig-text)}}

/* ============================================================
   DOODLE + TEXTURE LAYER
   The logo is brush strokes and handprints, so the surfaces should not
   be perfectly smooth digital. A paper grain sits over the whole page,
   headlines get a hand-drawn underline, and sections are separated by
   torn-paper edges instead of straight lines.
   ============================================================ */

/* paper grain: one fixed, non-interactive layer so it never repaints on scroll */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* hand-drawn underline under the last word of a headline */
.scribble{position:relative;display:inline-block}
.scribble::after{
  content:"";position:absolute;inset-inline:-.12em;bottom:-.22em;height:.34em;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12c26-7 52-9 78-6s52 8 78 3' stroke='%23fbe900' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  z-index:-1;
}
.scribble--pink::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12c26-7 52-9 78-6s52 8 78 3' stroke='%23e8117c' stroke-width='7' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E")}

/* loose crayon marks scattered behind sections, purely decorative */
.doodle{position:absolute;pointer-events:none;z-index:0;opacity:.85}
.section,.hero,.banner{position:relative}
.section>.wrap,.banner>.wrap{position:relative;z-index:1}

/* torn-paper edge between a tinted section and the one above it */
.section--tint{position:relative}
.section--tint::before{
  content:"";position:absolute;top:-13px;left:0;right:0;height:14px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14c60-9 120 4 180-2s120-11 180-5 120 12 180 6 120-11 180-5 120 12 180 6 120-9 120-9v13z' fill='%23fff7e9'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ .doodle{display:none} }

/* ============================================================
   CLAYMORPHISM LAYER
   The recommended visual language for children's products: chunky
   borders, a solid offset edge that reads as thickness, and a real
   press that pushes the element down onto its shadow. This is what
   turns flat cards into something that feels like a toy.
   ============================================================ */

/* solid offset edge + soft ambient shadow */
.card,.acc,.finder,.ctc,.age{
  border-width:3px;border-style:solid;
  box-shadow:0 6px 0 -1px color-mix(in srgb,var(--line) 85%,transparent),
             0 16px 26px -16px rgba(94,74,50,.35);
}
@media (hover:hover) and (pointer:fine){.ctc:hover{
  transform:translateY(-5px);
  box-shadow:0 11px 0 -1px color-mix(in srgb,var(--sig) 30%,var(--line)),
             0 26px 34px -18px rgba(94,74,50,.4);
}}
.ctc:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 -1px color-mix(in srgb,var(--line) 85%,transparent),
             0 8px 14px -10px rgba(94,74,50,.3);
}
.age{box-shadow:0 6px 0 -1px color-mix(in srgb,var(--line) 85%,transparent),0 16px 26px -16px rgba(94,74,50,.3)}
@media (hover:hover) and (pointer:fine){.age:hover{transform:translateY(-6px);
  box-shadow:0 12px 0 -1px color-mix(in srgb,var(--c) 55%,var(--line)),0 26px 34px -18px rgba(94,74,50,.38)}}
.age:active{transform:translateY(2px);
  box-shadow:0 2px 0 -1px color-mix(in srgb,var(--line) 85%,transparent),0 8px 14px -10px rgba(94,74,50,.3)}
.age[aria-selected="true"]{
  border-color:var(--c);transform:translateY(-6px);
  box-shadow:0 12px 0 -1px color-mix(in srgb,var(--c) 75%,var(--mix)),
             0 26px 36px -18px rgba(94,74,50,.4);
}

/* buttons get a real thickness and press down onto it */
.btn{border:3px solid transparent}
.btn--primary{
  box-shadow:0 6px 0 0 color-mix(in srgb,var(--sig-d) 62%,#000),
             0 14px 22px -12px color-mix(in srgb,var(--sig-d) 75%,transparent);
}
@media (hover:hover) and (pointer:fine){.btn--primary:hover{transform:translateY(-2px);
  box-shadow:0 8px 0 0 color-mix(in srgb,var(--sig-d) 62%,#000),
             0 20px 28px -14px color-mix(in srgb,var(--sig-d) 75%,transparent)}}
.btn--primary:active{transform:translateY(5px);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--sig-d) 62%,#000),
             0 4px 10px -8px color-mix(in srgb,var(--sig-d) 75%,transparent)}
.btn--ghost{border-color:var(--line);
  box-shadow:0 6px 0 -1px color-mix(in srgb,var(--line) 85%,transparent)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{transform:translateY(-2px);
  box-shadow:0 8px 0 -1px color-mix(in srgb,var(--sig) 40%,var(--line))}}
.btn--ghost:active{transform:translateY(4px);box-shadow:0 1px 0 -1px var(--line)}

/* tiles read as thick slabs */
.tile{box-shadow:0 8px 0 -1px rgba(0,0,0,.22),0 22px 34px -18px rgba(94,74,50,.45)}
.quote{box-shadow:0 9px 0 -1px rgba(0,0,0,.22),0 26px 40px -20px rgba(94,74,50,.45)}

.chip{border-width:2.5px;box-shadow:0 4px 0 -1px color-mix(in srgb,var(--line) 85%,transparent)}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 -1px var(--line)}
.acc__btn:active{transform:translateY(1px)}

/* comfortable touch targets on phones */
@media (max-width:900px){
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .langtog button{min-height:40px}
  .themetog,.burger{width:44px;height:44px}
  .acc__btn{min-height:56px}
}

/* ---------- reveal on scroll ----------
   Visible by default. Only a page that has confirmed JS (html.js) hides them,
   so no-JS visitors and any failure of the observer still see all content. */
/* This is where a parent meets the nursery, usually for the first time, so it
   earns more motion than a tool would: each group arrives as a short cascade
   (site.js sets --i, 60ms apart), 500ms on a strong ease-out.
   It's an animation, not a transition, on purpose: a transition here was
   silently replaced by any element's own (the door cards' hover transition
   won, so they jumped in instead of fading). And it moves `translate`, not
   `transform`, so it never fights a hover lift. */
@keyframes rv-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
html.js .rv{opacity:0}
html.js .rv.in{opacity:1;animation:rv-in .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
/* animations never run when printing - print everything at rest */
@media print{html.js .rv{opacity:1;animation:none}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
}

@media (max-width:1000px){
  .nav{display:none}
  .burger{display:grid}
  /* brand and side cluster both refuse to shrink, so the header must shed
     items instead of forcing the page into horizontal overflow */
  .hdr__side > .btn{display:none}
  .hdr__in{gap:.6rem}
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__cta{justify-content:center}
  /* the mark must not eat the fold: cap it so the headline and CTA stay visible */
  .hero__art{min-height:0;order:-1}
  .hero__art > img{width:min(58%,240px)}
  /* above the headline there's no height to spare for a pile, so the prints
     fan out in a row like a hand of cards, the middle one in front */
  .snaps{width:min(94%,440px);aspect-ratio:auto;display:flex;justify-content:center;
         align-items:flex-start;padding-top:14px}
  .snap{position:relative;inset:auto;width:36%;margin-inline:-2.5%}
  .s1{rotate:-6deg;z-index:1;margin-top:12px}
  .s2{rotate:2deg;z-index:3}
  .s3{rotate:6deg;z-index:2;margin-top:16px}
  .bubbles span{transform:scale(.6)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .ages{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .gal{columns:2}
  .ftr__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{width:min(1180px,100% - 1.75rem)}
  .brand__txt{display:none}          /* the mark alone carries the brand here */
  .drawer .brand__txt{display:block}
  .langtog button{padding:.28rem .55rem;font-size:.8rem}
  /* keep headline, subtext and both CTAs inside the first screen */
  .hero{padding-block:1.1rem 2.25rem}
  .hero__grid{gap:1.1rem}
  .hero__art > img{width:min(44%,166px)}
  .snaps{width:min(100%,350px);margin-top:.4rem}
  .snap{width:37%;padding:5px 5px 0;border-width:2.5px;box-shadow:4px 4px 0 var(--c)}
  .snap__cap{font-size:.74rem;padding:.3rem 0 .4rem}
  .snap::before{width:46px;height:16px;top:-9px}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .ages{grid-template-columns:1fr}
  .agepanel__in{grid-template-columns:1fr;text-align:center;justify-items:center}
  .gal{columns:1}
  .ftr__grid{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .stats{grid-template-columns:1fr 1fr}
}

/* in-page anchors (the hero prints link to #rooms and #yards) land below the
   sticky header instead of under it */
.sec-head[id]{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}

/* ---------- press feedback ---------- */
/* the controls that had no :active state. With the tap flash gone this is the
   only sign a tap landed, so it shows on finger-down, not on release */
.nav__link:active,.menu a:active,.drawer__grp a:active,.langtog button:active{background:var(--sig-soft)}
.burger,.drawer__grp a{transition:transform .12s ease-out,background .15s}
.burger:active,.social a:active{transform:scale(.92)}
.gal figure:active{opacity:.82}   /* instant: its transform rides a slow .5s zoom */
.peek:active{opacity:.65}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  /* gentler, not zero: anything that MOVES (transform, translate, rotate, scale)
     changes instantly, while colour, opacity and shadow still ease - they carry
     press and state feedback without any motion. Keyframes collapse to an end state. */
  *,*::before,*::after{
    transition-property:opacity,color,background-color,border-color,outline-color,box-shadow,fill,stroke !important;
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  html.js .rv{opacity:1;transform:none}
  .bubbles span{animation:none}
  .snaps{transform:none}
  .agepanel__ico{animation:none}
  .bubbles,.hero__art > img{transform:none}
  .ctc:hover,.age:hover,.btn--primary:hover,.btn--ghost:hover{transform:none}
}

/* ---------- print ---------- */
@media print{
  .hdr,.ftr,.drawer,.lb{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   TAP-TO-EDIT  (only ever visible to a logged-in editor)
   Sahera browses the real site on her phone, turns editing on,
   taps any sentence, and changes it. Everything here is inert
   for a normal visitor: none of it renders without .hk-editing
   on <html>, which only edit.js adds after a valid login.
   ============================================================ */

/* floating control, thumb-reachable at the bottom of a phone screen */
.hk-fab{
  position:fixed;inset-inline-start:16px;bottom:16px;z-index:90;
  display:flex;gap:.5rem;align-items:center;
}
.hk-fab button{
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  border:3px solid transparent;border-radius:999px;padding:.85rem 1.35rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  min-height:52px;                      /* comfortable tap target */
  box-shadow:0 6px 0 0 rgba(0,0,0,.22),0 14px 24px -10px rgba(0,0,0,.4);
  transition:transform .15s var(--ease);
}
.hk-fab button:active{transform:translateY(4px);box-shadow:0 2px 0 0 rgba(0,0,0,.22)}
.hk-fab .hk-go{background:var(--pink-d);color:#fff}
.hk-fab .hk-save{background:var(--green-d);color:#fff}
.hk-fab .hk-cancel{background:var(--surface);color:var(--ink);border-color:var(--line)}
.hk-fab svg{width:20px;height:20px}

/* every editable phrase gets a dashed hint while editing is on */
html.hk-editing [data-edit]{
  outline:2px dashed color-mix(in srgb,var(--pink) 60%,transparent);
  outline-offset:3px;border-radius:4px;cursor:pointer;
  transition:background .15s;
}
html.hk-editing [data-edit]:active{background:var(--sig-soft)}
html.hk-editing [data-edit].hk-changed{
  outline:2px solid var(--green-d);
  background:color-mix(in srgb,var(--green) 16%,transparent);
}

/* bottom sheet: rises from the bottom, thumb-friendly */
.hk-sheet{
  position:fixed;inset:0;z-index:95;display:none;
  background:rgba(20,14,10,.45);
}
.hk-sheet.open{display:block}
.hk-sheet__panel{
  position:absolute;inset-inline:0;bottom:0;
  background:var(--bg);border-radius:26px 26px 0 0;
  padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;
  box-shadow:0 -12px 40px -12px rgba(0,0,0,.4);
  animation:hk-rise .28s var(--ease);
}
@keyframes hk-rise{from{transform:translateY(100%)}to{transform:none}}
.hk-sheet__grip{width:44px;height:5px;border-radius:99px;background:var(--line);margin:0 auto .9rem}
.hk-sheet__label{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin-bottom:.15rem}
.hk-sheet__which{font-size:.85rem;color:var(--ink-2);margin-bottom:.8rem}
.hk-sheet textarea{
  width:100%;min-height:130px;padding:.9rem 1rem;
  border:2.5px solid var(--line);border-radius:var(--r-input);
  background:var(--surface);font-size:16px;   /* 16px stops iOS zooming on focus */
  line-height:1.7;resize:vertical;
}
.hk-sheet textarea:focus{outline:0;border-color:var(--pink)}
.hk-sheet__row{display:flex;gap:.6rem;margin-top:.9rem}
.hk-sheet__row button{
  flex:1;min-height:52px;border-radius:999px;border:3px solid transparent;
  font-family:var(--font-display);font-weight:800;font-size:1rem;cursor:pointer;
}
.hk-ok{background:var(--pink-d);color:#fff}
.hk-no{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* toast */
.hk-toast{
  position:fixed;inset-inline:16px;bottom:84px;z-index:99;
  background:var(--ink);color:var(--bg);padding:1rem 1.2rem;border-radius:18px;
  font-family:var(--font-display);font-weight:700;text-align:center;
  box-shadow:var(--shadow-l);animation:hk-rise .25s var(--ease);
}
.hk-toast--bad{background:#b3261e;color:#fff}

@media (prefers-reduced-motion:reduce){
  .hk-sheet__panel,.hk-toast{animation:none}
}

/* login form inside the bottom sheet */
.hk-login label{display:block;font-family:var(--font-display);font-weight:700;margin:.7rem 0 .3rem}
.hk-login input{
  width:100%;padding:.85rem 1rem;font-size:16px;   /* 16px stops iOS zooming */
  border:2.5px solid var(--line);border-radius:var(--r-input);background:var(--surface);
}
.hk-login input:focus{outline:0;border-color:var(--pink)}
.hk-login .hk-err{color:#b3261e;font-weight:700;min-height:1.3em;margin-top:.5rem}

/* Google sign-in button, and the "or" divider under it */
.hk-gbtn{display:flex;justify-content:center;margin:.4rem 0 .2rem;min-height:0}
.hk-gbtn:not(:empty){margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}

/* ---------- "read more" link on home-page teasers ---------- */
.peek{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--sig-text);border-bottom:3px solid color-mix(in srgb,var(--sig) 45%,transparent);
  padding-bottom:2px;transition:border-color .2s;
}
/* the arrow steps forward on hover. It used to widen the gap, which reflowed the
   line every frame; `translate` composes with the RTL scaleX(-1) flip below.
   Both languages are RTL, so forward is left: -4px. */
@media (hover:hover) and (pointer:fine){
  .peek:hover{border-bottom-color:var(--sig)}
  .peek:hover svg{translate:-4px 0}
}
.peek svg{width:17px;height:17px;transition:translate .2s var(--ease)}
html[dir="rtl"] .peek svg{transform:scaleX(-1)}   /* arrow points the way we read */

/* compact grid of the remaining pages, so the home page can point at
   everything without turning into a wall of links */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
/* the last door (contact) spans the row. With six doors above it, that leaves
   no card alone in a row at 3 columns or at 2 - keep the count at six if doors
   are added or removed */
.doors > .door:last-child{grid-column:1/-1}
.door{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-card);
  padding:1.1rem 1.2rem;
  box-shadow:0 5px 0 -1px color-mix(in srgb,var(--line) 85%,transparent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
@media (hover:hover) and (pointer:fine){.door:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));
  box-shadow:0 9px 0 -1px color-mix(in srgb,var(--c) 45%,var(--line)),0 20px 26px -16px rgba(94,74,50,.35)}}
.door:active{transform:translateY(2px);box-shadow:0 2px 0 -1px var(--line)}
.door__ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.door__ico svg{width:22px;height:22px}
.door h3{font-size:1.05rem;margin-bottom:.15rem}
.door p{font-size:.9rem;color:var(--ink-2);line-height:1.6}
@media (max-width:900px){ .doors{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .doors{grid-template-columns:1fr} }

/* a trimmed timeline, for the day preview on the home page */
.tl--peek .tl__item{padding-bottom:1.2rem}
.tl--peek .tl__item p{display:none}