/* Shared by the form page and the school page: colours, base styles, buttons and the lead form. */

/* Every colour comes from the logo, the uniform or the painted rooms */
:root{
  --sun:#FFDD1A;      /* logo yellow */
  --chilli:#D8261A;   /* logo red, uniform red */
  --ink:#191C6E;      /* logo motto navy */
  --milk:#FFFDF4;
  --leaf:#34D67F;     /* jungle room */
  --bubble:#FF96C8;   /* pink classroom */
  --grape:#5B2BE0;    /* purple room */
  --splash:#74D7FF;   /* ship mural sea */
  --tang:#FF8A00;     /* sand room wall */

  --display:'Shrikhand','Modak',Georgia,serif;
  --body:'Hind Vadodara','Segoe UI',system-ui,-apple-system,sans-serif;
  --hand:'Kalam','Hind Vadodara','Segoe Print',cursive;

  --gut:clamp(18px,5vw,72px);
  --page-r:clamp(28px,5vw,68px);
  --section-y:clamp(72px,9vw,132px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sun);color:var(--ink);font:500 clamp(1.02rem,.96rem + .3vw,1.2rem)/1.5 var(--body);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--sun)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hand{font-family:var(--hand);font-weight:700;line-height:1.2}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.72em 1.25em .66em;border:3px solid var(--ink);border-radius:999px;background:var(--milk);color:var(--ink);font:700 1.05rem/1.15 var(--body);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:translate .12s,box-shadow .12s;white-space:nowrap}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn:hover{translate:0 -2px;box-shadow:0 7px 0 var(--ink)}
.btn:active{translate:0 4px;box-shadow:0 1px 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--milk);box-shadow:0 5px 0 var(--chilli)}
.btn-ink:hover{box-shadow:0 7px 0 var(--chilli)}
.btn-ink:active{box-shadow:0 1px 0 var(--chilli)}

/* ---------- The lead form ---------- */
.lead{display:block;color:var(--ink)}
.ages{margin:0;padding:0;border:0;min-width:0}
.ages legend{padding:0;font-weight:700;font-size:1.16rem;line-height:1.2;margin-bottom:10px}
.age-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,2vw,10px);max-width:400px}
.age{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.age input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.age span{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;color:var(--t);font:400 clamp(1.7rem,8.4vw,2.35rem)/1 var(--display);transition:scale .2s cubic-bezier(.3,1.7,.5,1);
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.4) 8%,transparent 22%),
    radial-gradient(circle at 50% 46%,transparent 56%,rgba(10,10,60,.26) 100%),
    var(--c)}
.age-care span{font:700 clamp(.72rem,3.1vw,.84rem)/1 var(--body)}
.age:hover span{scale:1.07}
.age input:checked + span{box-shadow:0 0 0 3px var(--milk),0 0 0 6px var(--ink);animation:pick .45s cubic-bezier(.3,1.7,.5,1)}
.age input:focus-visible + span{outline:3px solid var(--ink);outline-offset:7px}
@keyframes pick{0%{scale:.82}60%{scale:1.14}100%{scale:1}}
.age-class{margin-top:12px;font-weight:700;line-height:1.25}
.age-class:empty{display:none}

.lead-more{display:grid;gap:12px;margin-top:14px}
.lead[data-step="1"] .lead-more{display:none}
.field{display:grid;gap:4px;font-weight:700;font-size:.98rem;line-height:1.2}
.field input{width:100%;min-width:0;height:52px;padding:0 14px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:600 1.08rem var(--body)}
.field input[aria-invalid="true"]{border-color:var(--chilli)}
.field input:focus-visible{outline:3px solid var(--chilli);outline-offset:1px;border-radius:14px}
.phone-input{display:flex;align-items:center;gap:8px}
.phone-input b{flex:none;font-weight:700;font-size:1.08rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lead-send{width:100%;height:56px;white-space:normal;margin-top:2px}
.lead-send[disabled]{opacity:.7;cursor:wait}
.lead-err{padding:.6em .85em .5em;border-radius:12px;background:var(--chilli);color:#fff;font-weight:600;line-height:1.28}
.lead-err a{color:#fff;font-weight:700}
.lead-consent{font-size:.84rem;font-weight:500;line-height:1.3}

/* ---------- Thank-you ---------- */
.thanks h2{font:400 clamp(2.5rem,11vw,3.6rem)/1 var(--display);color:var(--chilli)}
.thanks h2:focus{outline:none}
.thanks p{margin-top:.6em;font-weight:600;line-height:1.35}
.thanks-actions{display:grid;gap:14px;margin-top:20px;max-width:440px}
.thanks-actions .btn{width:100%;white-space:normal;min-height:54px}
.thanks-again{justify-self:center;padding:4px;border:0;background:none;font-weight:600;font-size:.94rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- The ask, sliding up from the bottom ---------- */
.ask{position:fixed;inset:auto 0 0;width:min(100%,520px);max-width:none;max-height:92dvh;margin:0 auto;padding:22px clamp(18px,4vw,28px) calc(18px + env(safe-area-inset-bottom));overflow-y:auto;border:0;border-radius:28px 28px 0 0;background:var(--milk);color:var(--ink)}
.ask[open]{animation:ask-up .42s cubic-bezier(.2,1.2,.4,1)}
.ask::backdrop{background:rgba(25,28,110,.55)}
@keyframes ask-up{from{transform:translateY(100%)}}
.ask-kicker{font:700 1.3rem/1.15 var(--hand);color:var(--grape)}
.ask h2{margin:.12em 3rem .5em 0;font:400 clamp(1.95rem,7.6vw,2.5rem)/1.02 var(--display);color:var(--chilli)}
.ask-x{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--sun);color:var(--ink);cursor:pointer}
.ask-x svg{width:20px;height:20px}
.ask-later{display:block;margin:12px auto 0;padding:6px 10px;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}