:root{
  --board:#26302C; --board-hi:#2F3B36; --frame:#5A3B22; --ledge:#6B4728;
  --chalk:#F2F0E6; --chalk-dim:#C7CEC3; --yellow:#F6D86B; --pink:#F2A7B8; --blue:#9FD3F0; --green:#9FE0B4;
  --paper:#FFFFFF; --ink:#26302C; --pin-red:#E2453C; --pin-blue:#3A7BD5; --pin-yellow:#E9B92F;
  --hand:'Kalam','Comic Sans MS',cursive; --sans:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme: dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* The site is a blackboard in both themes, so dark values match light ones. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --board:#26302C; --chalk:#F2F0E6; --paper:#FFFFFF; --ink:#26302C; } }
:root[data-theme="dark"]{ --board:#26302C; --chalk:#F2F0E6; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--frame); color:var(--chalk); font-family:var(--hand); font-size:20px; line-height:1.5; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:40; background:var(--board)}
img{max-width:100%; display:block}
a{color:var(--yellow)}
a:hover{color:var(--paper)}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
.kn{font-family:'Noto Sans Kannada',var(--sans); font-weight:700}
.trust{display:inline-flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin:0 0 18px; font-size:20px; color:var(--chalk-dim)}
.trust .kn{color:var(--yellow); font-size:22px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Board and frame */
.board{
  border:18px solid var(--frame); border-bottom:0;
  background-color:var(--board);
  background-image:
    radial-gradient(ellipse 60% 40% at 18% 8%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 50% 35% at 82% 55%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(ellipse 45% 30% at 30% 85%, rgba(255,255,255,.035), transparent 70%);
}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,36px)}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:rgba(38,48,44,.97); border-bottom:2px dashed rgba(242,240,230,.3)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--chalk)}
.brand img{width:52px; height:52px; border-radius:50%}
.brand span{font-size:26px; font-weight:700; line-height:1.1}
.nav{display:flex; align-items:center; gap:4px 22px; font-size:21px}
.nav a[aria-current="page"]{color:var(--yellow)}
.nav a{color:var(--chalk); text-decoration:none; padding:8px 0; position:relative}
.nav a:not(.cta)::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:3px; border-radius:3px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.nav a:not(.cta):hover::after{transform:scaleX(1)}
.nav .cta{background:var(--yellow); color:var(--ink); padding:8px 18px; border-radius:6px; font-weight:700}
.menu-btn{display:none; font:inherit; font-size:20px; font-weight:700; color:var(--chalk); background:transparent; border:2px solid var(--chalk); border-radius:6px; padding:6px 14px; cursor:pointer}
@media (max-width: 1180px){
  .menu-btn{display:block}
  .nav{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--board); border-bottom:2px dashed rgba(242,240,230,.3); padding:6px clamp(18px,4vw,36px) 18px; display:none}
  .nav.open{display:flex; animation:menuDown .35s ease both}
  .nav a{padding:12px 0; border-bottom:1px dashed rgba(242,240,230,.18)}
  .nav .cta{margin-top:12px; text-align:center; border-bottom:0}
}
@keyframes menuDown{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:40px 48px; padding-top:clamp(36px,6vw,64px); padding-bottom:clamp(48px,7vw,80px)}
.hero-text{flex:1 1 520px; min-width:0; position:relative; z-index:2}
.datebox{display:inline-block; border:2px solid rgba(242,240,230,.85); padding:6px 16px; font-size:20px; line-height:1.4; margin-bottom:24px}
.hero h1{margin:0 0 6px; font-weight:700; font-size:clamp(46px,8.5vw,96px); line-height:1.02}
.hero h1 .line{display:block}
.word{display:inline-block; white-space:nowrap}
.ul{display:block; width:min(440px,90%); height:24px; margin:4px 0 22px}
.ul path{fill:none; stroke:var(--yellow); stroke-width:5; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:0}
.lead{margin:0 0 30px; font-size:clamp(20px,2.4vw,25px); font-weight:300; max-width:27em}
.btns{display:flex; flex-wrap:wrap; gap:14px}
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:22px; padding:11px 26px; border-radius:6px; transition:transform .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn-chalk{background:var(--chalk); color:var(--ink)}
.btn-chalk:hover{color:var(--ink); box-shadow:0 8px 0 rgba(0,0,0,.25)}
.btn-line{color:var(--green); border:2px solid var(--green); padding:9px 24px}
.btn-line:hover{color:var(--board); background:var(--green)}
.hero-photo{flex:1 1 380px; min-width:0; display:flex; justify-content:center; padding:20px 10px; z-index:2}

/* Polaroids and pins */
.polaroid{position:relative; margin:0; background:var(--paper); color:var(--ink); padding:12px 12px 16px; box-shadow:0 16px 30px rgba(0,0,0,.45); transform:rotate(var(--r,0deg)); transition:transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .35s ease}
.polaroid:hover{transform:rotate(0deg) translateY(-6px) scale(1.02); box-shadow:0 26px 40px rgba(0,0,0,.5)}
.polaroid img{width:100%; object-fit:cover}
.polaroid figcaption{padding-top:10px; text-align:center; font-size:22px; line-height:1.25}
.polaroid figcaption small{display:block; font-size:18px; color:#4A544F}
.tape{position:absolute; top:-14px; left:50%; width:118px; height:30px; margin-left:-59px; background:rgba(240,226,180,.88); transform:rotate(-4deg)}
.pin{position:absolute; top:-11px; left:50%; width:24px; height:24px; margin-left:-12px; border-radius:50%; background:var(--pin,var(--pin-red)); box-shadow:inset -4px -4px 0 rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.45); z-index:2}
.hero .polaroid{width:100%; max-width:520px; padding-bottom:56px; --r:2.5deg}
.hero .polaroid img{height:clamp(240px,34vw,360px)}
.hero .polaroid figcaption{position:absolute; left:0; right:0; bottom:12px}

/* Chalk doodles */
.doodle{position:absolute; z-index:1; pointer-events:none; opacity:.55}
.doodle path,.doodle circle{fill:none; stroke:var(--chalk); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.d1{top:8%; right:4%; width:70px}
.d2{bottom:10%; left:46%; width:86px}
.d3{top:52%; left:2%; width:64px}
@media (max-width: 760px){ .d2,.d3{display:none} .d1{top:3%; right:3%; width:48px} }

/* Eraser intro */
.wipe{position:absolute; inset:0; z-index:5; pointer-events:none; background-color:var(--board);
  background-image:radial-gradient(ellipse 30% 20% at 30% 40%, rgba(242,240,230,.16), transparent 70%), radial-gradient(ellipse 35% 25% at 70% 60%, rgba(242,240,230,.13), transparent 70%), radial-gradient(ellipse 25% 18% at 55% 25%, rgba(242,240,230,.1), transparent 70%)}
.duster{position:absolute; z-index:6; top:42%; left:0; width:150px; height:76px; pointer-events:none}
.duster::before{content:""; position:absolute; inset:0 0 26px; background:#9A6A3A; border-radius:10px 10px 4px 4px; box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.duster::after{content:""; position:absolute; left:4px; right:4px; bottom:0; height:28px; background:#55595A; border-radius:0 0 6px 6px}

/* Sections */
.sec{border-top:2px dashed rgba(242,240,230,.28); padding:clamp(52px,8vw,88px) 0}
.h2{margin:0; font-weight:700; font-size:clamp(34px,5vw,50px); line-height:1.15}
.h2 .sub{color:var(--chalk-dim); font-weight:400}
.h2wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 28px; margin-bottom:2px; padding:4px 0 8px}
.topic{color:var(--green); font-size:22px}
.h2ul{display:block; width:min(360px,80%); height:18px; margin:2px 0 32px}
.h2ul path{fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:0}

/* Notice board */
.notice{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-start}
.notice-list{flex:1 1 520px; min-width:0; font-size:clamp(22px,2.6vw,28px); line-height:1.45; min-height:9.5em}
.notice-list p{margin:0 0 12px}
.notice-list .n{color:var(--yellow)}
.caret{display:inline-block; width:3px; height:1em; background:var(--chalk); margin-left:3px; vertical-align:-0.12em; animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.attend{flex:0 1 320px; min-width:0; border:2px solid rgba(242,240,230,.85); padding:16px 22px; font-size:22px}
.attend div+div{border-top:2px solid rgba(242,240,230,.4); margin-top:8px; padding-top:8px}

/* Reasons */
.reasons{display:flex; flex-wrap:wrap; gap:26px 56px; margin:0; padding:0; list-style:none}
.reasons li{flex:1 1 380px; min-width:0; font-size:clamp(22px,2.6vw,28px); display:flex; gap:14px; align-items:flex-start}
.tick{flex:none; width:38px; height:38px; margin-top:2px}
.tick path{fill:none; stroke:var(--yellow); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:0}

/* Classes */
.classes{display:flex; flex-wrap:wrap; gap:56px 40px; justify-content:center; padding-top:16px}
.classes .polaroid{flex:1 1 300px; max-width:360px}
.classes .polaroid img{height:230px}
.classes .polaroid p{margin:8px 4px 0; font-family:var(--sans); font-size:15px; line-height:1.5; color:#3F4944; text-align:center}

/* Walls */
.walls{display:flex; flex-wrap:wrap; gap:40px 56px; align-items:center}
.walls-text{flex:1 1 360px; min-width:0}
.walls-text p{margin:0 0 14px; font-size:clamp(21px,2.4vw,25px)}
.walls .polaroid{flex:1 1 520px; min-width:0; --r:-1.5deg}
.walls .polaroid img{height:clamp(220px,32vw,380px)}
.arrow{width:160px; height:70px; display:block; margin-top:10px}
.arrow path{fill:none; stroke:var(--pink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:260; stroke-dashoffset:0}
@media (max-width: 860px){ .arrow{display:none} }

/* Safety */
.safety{display:flex; flex-wrap:wrap; gap:48px 32px; justify-content:center; padding-top:16px}
.safety .polaroid{flex:1 1 240px; max-width:300px}
.safety .polaroid img{height:240px}
.lane{position:relative; height:170px; margin-top:56px; border-bottom:3px dashed rgba(242,240,230,.55); overflow:hidden}
.lane-label{position:absolute; left:0; top:0; font-size:22px; color:var(--chalk)}
.lane-label strong{display:block; color:var(--yellow); font-size:26px}
.bus{position:absolute; bottom:4px; left:calc(100% - 300px); width:270px}
.bus *{vector-effect:non-scaling-stroke}
.bus .s{fill:none; stroke:var(--chalk); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.bus .y{fill:none; stroke:var(--yellow); stroke-width:3}
.bus text{fill:var(--yellow); font-family:var(--hand); font-weight:700; font-size:26px}
.wheel{transform-box:fill-box; transform-origin:center}
.puff{position:absolute; bottom:22px; width:16px; height:16px; border:2px solid rgba(242,240,230,.6); border-radius:50%; opacity:0}
@media (max-width: 640px){ .lane{height:200px} .bus{width:200px; left:calc(100% - 210px)} }

/* Principal */
.desk{display:flex; flex-wrap:wrap; gap:32px 48px; align-items:flex-start}
.desk-msg{flex:1 1 520px; min-width:0}
.desk-msg blockquote{margin:0 0 16px; font-size:clamp(24px,3vw,32px); line-height:1.35}
.desk-msg cite{font-style:normal; color:var(--yellow); font-size:22px}
.people{flex:0 1 340px; min-width:0; margin:0; padding:0; list-style:none; font-size:22px}
.people li{padding:10px 0; border-bottom:2px dashed rgba(242,240,230,.3)}
.people span{display:block; color:var(--chalk-dim); font-size:18px}

/* Gallery */
.gallery{display:flex; flex-wrap:wrap; gap:44px 30px; justify-content:center; padding-top:16px}
.gbtn{flex:1 1 250px; max-width:330px; border:0; padding:0; background:none; cursor:zoom-in; font:inherit; color:inherit; text-align:inherit}
.gbtn .polaroid img{height:210px}

/* Contact */
.contact{display:flex; flex-wrap:wrap; gap:36px 56px}
.contact-info{flex:1 1 420px; min-width:0}
.contact-info p{margin:0 0 16px; font-size:clamp(21px,2.4vw,24px)}
.phones{font-family:var(--sans); font-size:17px; line-height:2; margin:0 0 26px}
.phones a{color:var(--chalk)}
.phones span{color:var(--chalk-dim); display:inline-block; min-width:110px}
.map{flex:1 1 400px; min-width:0; min-height:300px; border:3px dashed rgba(242,240,230,.6); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:24px; color:var(--chalk-dim)}
.map svg{width:64px; height:64px}
.map svg path,.map svg circle{fill:none; stroke:var(--pink); stroke-width:3}

/* Ledge */
.ledge{background:var(--ledge); border-left:18px solid var(--frame); border-right:18px solid var(--frame); height:30px; display:flex; align-items:flex-start; gap:26px; padding-left:clamp(24px,8vw,90px)}
.ledge i{display:block; height:11px; margin-top:-5px; border-radius:4px}
.footer{background:var(--frame); color:#EADCC8; font-family:var(--sans); font-size:14px; padding:16px 0 22px}
.footer .wrap{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
.footer a{color:#FFFFFF}

/* Lightbox */
.lb{position:fixed; inset:0; z-index:50; background:rgba(16,20,18,.88); display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 20px) 16px calc(env(safe-area-inset-bottom,0px) + 20px)}
.lb[hidden]{display:none}
.lb .polaroid{max-width:min(900px,100%); --r:-1deg; animation:lbIn .45s cubic-bezier(.2,1.3,.4,1) both}
.lb .polaroid img{max-height:70vh; object-fit:contain; height:auto}
.lb-close{position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:16px; font:inherit; font-size:20px; font-weight:700; color:var(--ink); background:var(--chalk); border:0; border-radius:6px; padding:8px 16px; cursor:pointer}
@keyframes lbIn{from{opacity:0; transform:scale(.7) rotate(-8deg)}to{opacity:1; transform:scale(1) rotate(var(--r))}}

@media (max-width: 640px){
  body{font-size:19px}
  .board{border-width:8px}
  .ledge{border-left-width:8px; border-right-width:8px}
  .brand img{width:42px; height:42px}
  .brand span{font-size:21px}
  .btn{font-size:20px}
  .classes .polaroid img,.safety .polaroid img{height:210px}
}

/* ============ Animations (only when JS is running) ============ */
.js .hero .wipe{animation:wipe 1.25s .25s cubic-bezier(.6,0,.4,1) forwards}
.js .hero .duster{animation:dust 1.25s .25s cubic-bezier(.6,0,.4,1) forwards}
@keyframes wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%); visibility:hidden}}
@keyframes dust{0%{transform:translateX(-170px) rotate(-8deg)}25%{transform:translateX(25vw) rotate(6deg) translateY(-30px)}50%{transform:translateX(50vw) rotate(-6deg) translateY(40px)}75%{transform:translateX(75vw) rotate(6deg) translateY(-20px)}99%{opacity:1}100%{transform:translateX(105vw) rotate(0); opacity:0; visibility:hidden}}
.no-js .wipe,.no-js .duster{display:none}

.js .hero .datebox{opacity:0; animation:pop .5s 1.35s cubic-bezier(.3,1.6,.5,1) forwards}
.js .hero h1 .ch{display:inline-block; opacity:0; animation:chalkIn .45s forwards; animation-delay:calc(1.5s + var(--i) * 48ms)}
.js .hero .ul path{stroke-dashoffset:520; animation:draw 1s forwards; animation-delay:var(--after,2.8s)}
.js .hero .lead,.js .hero .btns{opacity:0; animation:rise .7s forwards; animation-delay:calc(var(--after,2.8s) + .3s)}
.js .hero .btns{animation-delay:calc(var(--after,2.8s) + .5s)}
.js .hero .polaroid{opacity:0; animation:dropSwing 1.3s 1.7s cubic-bezier(.25,1,.4,1) forwards}
.js .hero .tape{opacity:0; animation:slap .35s 2.7s ease-out forwards}
.js .doodle path,.js .doodle circle{stroke-dasharray:300; stroke-dashoffset:300; animation:draw 2s forwards; animation-delay:var(--dd,3.2s)}
.js .doodle{animation:bob 5s ease-in-out infinite; animation-delay:4s}

@keyframes chalkIn{0%{opacity:0; transform:translateY(10px) rotate(-8deg) scale(1.3); filter:blur(4px)}60%{opacity:1; filter:blur(0)}100%{opacity:1; transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
@keyframes pop{0%{opacity:0; transform:scale(.4) rotate(-10deg)}100%{opacity:1; transform:scale(1) rotate(0)}}
@keyframes slap{0%{opacity:0; transform:rotate(-4deg) scale(1.6)}100%{opacity:1; transform:rotate(-4deg) scale(1)}}
@keyframes dropSwing{0%{opacity:0; transform:translateY(-420px) rotate(-22deg)}45%{opacity:1; transform:translateY(18px) rotate(calc(var(--r) + 7deg))}65%{transform:translateY(-6px) rotate(calc(var(--r) - 4deg))}82%{transform:translateY(2px) rotate(calc(var(--r) + 2deg))}100%{opacity:1; transform:translateY(0) rotate(var(--r))}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}

/* Scroll-triggered */
.js [data-anim]{will-change:transform,opacity}
.js [data-anim="rise"]{opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s)}
.js [data-anim="rise"].in{opacity:1; transform:none}
.js [data-anim="write"]{clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.6,0,.3,1); transition-delay:var(--d,0s)}
.js [data-anim="write"].in{clip-path:inset(0 0 0 0)}
.js [data-anim="write"] + .h2ul path, .js .h2wrap[data-anim] ~ .h2ul path{stroke-dashoffset:420}
.js .h2ul.in path{animation:draw .9s .2s forwards}
.js [data-anim="slide"]{opacity:0; transform:translateX(-70px) rotate(-2deg); transition:opacity .7s ease, transform .8s cubic-bezier(.2,1.2,.3,1); transition-delay:var(--d,0s)}
.js [data-anim="slide"].in{opacity:1; transform:none}
.js [data-anim="slide"] .tick path{stroke-dashoffset:40}
.js [data-anim="slide"].in .tick path{animation:draw .5s forwards; animation-delay:calc(var(--d,0s) + .5s)}
.js [data-anim="drop"]{opacity:0}
.js [data-anim="drop"].in{animation:dropSwing 1.25s cubic-bezier(.25,1,.4,1) forwards; animation-delay:var(--d,0s)}
.js [data-anim="drop"] .pin{transform:scale(0)}
.js [data-anim="drop"].in .pin{animation:pinIn .45s cubic-bezier(.3,1.8,.5,1) forwards; animation-delay:calc(var(--d,0s) + .9s)}
.js .polaroid.done{animation:none !important; opacity:1 !important}
.js .polaroid.done .pin{animation:none; transform:scale(1)}
.js .notice-list:not(.typing) p{visibility:hidden}
@keyframes pinIn{to{transform:scale(1)}}
.js [data-anim="arrow"] path{stroke-dashoffset:260}
.js [data-anim="arrow"].in path{animation:draw 1.1s .3s forwards}
.js [data-anim="pop"]{opacity:0; transform:scale(.6) rotate(-6deg); transition:opacity .5s ease, transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay:var(--d,0s)}
.js [data-anim="pop"].in{opacity:1; transform:none}
.js .lane .bus{left:-300px}
.js .lane.in .bus{animation:drive 3.4s cubic-bezier(.25,.6,.25,1) forwards}
.js .lane.in .wheel{animation:spin .45s linear 7.5}
.js .lane.in .bus-body{animation:bounce .3s ease-in-out 11}
.js .lane.in .puff{animation:puff 1s ease-out 4 both}
.js .lane .lane-label{opacity:0; transform:translateY(-14px)}
.js .lane.in .lane-label{animation:rise .6s 3.1s forwards}
@keyframes drive{from{left:-300px}to{left:calc(100% - 300px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{50%{transform:translateY(-3px)}}
@keyframes puff{0%{opacity:.8; transform:translate(0,0) scale(.5)}100%{opacity:0; transform:translate(-60px,-24px) scale(2.2)}}
@media (max-width: 640px){ @keyframes drive{from{left:-300px}to{left:calc(100% - 210px)}} }

@media (prefers-reduced-motion: reduce){
  .wipe,.duster{display:none !important}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js [data-anim],.js .hero *{opacity:1 !important; transform:none; clip-path:none !important}
  .js .hero .polaroid{transform:rotate(var(--r))}
  .js .ul path,.js .h2ul path,.js .tick path,.js .arrow path,.js .doodle path,.js .doodle circle{stroke-dashoffset:0 !important}
  .js .lane .bus{left:calc(100% - 300px)}
}

/* ===== Multi-page additions ===== */
.page-hero .wrap{display:block; padding-top:clamp(30px,5vw,56px); padding-bottom:clamp(34px,5vw,60px)}
.page-hero h1{font-size:clamp(44px,7vw,84px)}
.crumbs{font-size:18px; color:var(--chalk-dim); margin:0 0 10px}
.crumbs a{color:var(--chalk-dim)}
.page-hero .lead{margin-bottom:0}
.js .page-hero .crumbs{opacity:0; animation:rise .6s 1.3s forwards}

.split{display:flex; flex-wrap:wrap; gap:40px 56px; align-items:center}
.split > *{flex:1 1 420px; min-width:0}
.split .polaroid img{height:clamp(220px,30vw,360px)}
.prose p{margin:0 0 16px; font-size:clamp(20px,2.3vw,24px)}
.ph{color:var(--chalk-dim)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:24px}
.card{display:block; border:2px solid rgba(242,240,230,.65); border-radius:6px; padding:22px 24px; text-decoration:none; color:var(--chalk); transition:transform .3s cubic-bezier(.3,1.4,.5,1), background .3s ease, border-color .3s ease}
.card:hover{transform:rotate(-1deg) translateY(-5px); background:rgba(255,255,255,.04); border-color:var(--yellow); color:var(--chalk)}
.card svg{width:46px; height:46px; margin-bottom:8px}
.card svg path,.card svg circle,.card svg rect{fill:none; stroke:var(--c,var(--yellow)); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.card h3{margin:0 0 4px; font-size:28px; line-height:1.2}
.card p{margin:0 0 12px; font-size:19px; color:var(--chalk-dim); line-height:1.4}
.card .go{color:var(--yellow); font-weight:700}

.staff-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:48px 28px; padding-top:18px}
.staff-grid .polaroid{margin:0}
.face{height:230px; background:#E7E3D6; display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.face svg{width:70%; height:auto}
.face svg path,.face svg circle{fill:#C9C3B2}
.staff-grid figcaption strong{display:block; font-size:24px}
.staff-grid .role{display:block; font-family:var(--sans); font-size:14px; color:#5A635E; margin-top:2px}
.lead-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.chalk-list{list-style:none; margin:0; padding:0; font-size:clamp(20px,2.3vw,24px)}
.chalk-list li{padding:6px 0 6px 30px; position:relative}
.chalk-list li::before{content:"–"; position:absolute; left:4px; color:var(--yellow)}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:28px}
.steps li{border:2px dashed rgba(242,240,230,.5); border-radius:6px; padding:20px 22px; font-size:21px; line-height:1.4}
.steps .num{display:block; font-size:44px; font-weight:700; color:var(--yellow); line-height:1}

.form{display:grid; gap:18px; max-width:720px}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.form label{display:block; font-size:20px; margin-bottom:6px}
.form input,.form select,.form textarea{width:100%; font-family:var(--sans); font-size:17px; padding:12px 14px; border-radius:6px; border:2px solid rgba(242,240,230,.65); background:rgba(0,0,0,.22); color:var(--chalk)}
.form textarea{min-height:110px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--yellow); outline-offset:1px; border-color:var(--yellow)}
.form select option{color:#1A1A1A; background:#FFFFFF}
.form .btn{border:0; cursor:pointer; font-family:var(--hand); justify-self:start}
.form-note{font-family:var(--sans); font-size:14px; color:var(--chalk-dim); margin:0}

.cta-box{border:3px dashed var(--yellow); border-radius:8px; padding:clamp(24px,4vw,40px); display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between}
.cta-box h2{margin:0 0 6px; font-size:clamp(30px,4vw,42px); line-height:1.15}
.cta-box p{margin:0; color:var(--chalk-dim)}

.strip{display:flex; flex-wrap:wrap; gap:44px 30px; justify-content:center; padding-top:16px}
.strip .polaroid{flex:1 1 260px; max-width:340px}
.strip .polaroid img{height:220px}
.more{margin-top:40px; text-align:center}

.foot{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px 40px; padding:36px 0 18px}
.foot h2{font-family:var(--hand); font-size:24px; color:#FFFFFF; margin:0 0 10px; font-weight:700}
.foot ul{list-style:none; margin:0; padding:0; line-height:2}
.foot p{margin:0 0 8px; line-height:1.6}
.foot a{color:#FFFFFF}
.foot-brand{display:flex; gap:12px; align-items:center; margin-bottom:10px}
.foot-brand img{width:48px; height:48px; border-radius:50%}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18); padding:14px 0 6px; display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between}
.footer .wrap{display:block}
.staff-grid .polaroid img{height:230px}
.staff-grid .polaroid img{object-position:center top}