/* Puzzlez Playschool — site styles
   Designed & developed by Sabarinath | linkedin.com/in/sabarinathsklm */
:root{
  /* Brand colours from the Puzzlez logo */
  --orange:#E85028;      /* "Puzzlez" lettering — accents, large type */
  --rust:#C93D17;        /* deeper orange — buttons & links (passes contrast with white) */
  --rust-dark:#A1300F;
  --mustard:#F0C040;     /* yellow block */
  --mustard-soft:#F5CE5C;
  --amber:#E88830;       /* star */
  --moss:#1A4598;        /* royal blue background */
  --blue-light:#4A80C8;
  --green:#286018;       /* green block */
  --ink:#0B1640;         /* navy "Playschool Nursery" text */
  --ink-2:#2E3A5E; --ink-3:#4A5578;
  --sand:#EDF3FC; --sand-line:#C9D8F0; --line:#E1E8F4; --white:#FFFFFF;
  --display:'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap:1200px; --r-lg:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--rust)}a:hover{color:var(--rust-dark)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;color:inherit}
h1{font-weight:800;font-size:clamp(40px,6vw,68px);letter-spacing:-.03em}
h2{font-weight:800;font-size:clamp(32px,4.2vw,46px);letter-spacing:-.02em}
h3{font-weight:700;font-size:clamp(22px,2.2vw,28px)}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--ink-2);max-width:560px}
.muted{color:var(--ink-3)}
.prose p+p{margin-top:16px}
.prose{max-width:620px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--body);transition:background .15s,color .15s}
.btn-primary{background:var(--rust);color:#fff}.btn-primary:hover{background:var(--rust-dark);color:#fff}
.btn-outline{border-color:var(--ink);color:var(--ink)}.btn-outline:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--rust)}.btn-light:hover{background:var(--sand);color:var(--rust-dark)}
.btn-ghost-light{border-color:#fff;color:#fff}.btn-ghost-light:hover{background:#fff;color:var(--rust)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.text-link{font-weight:700;font-size:18px}

/* Top bar */
.topbar{background:linear-gradient(90deg,#183F94,#2D63B4);color:#fff;font-size:14px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.topbar a{color:#fff;text-decoration:none}.topbar a:hover{text-decoration:underline;color:#fff}
.topbar .tb-left{display:flex;flex-wrap:wrap;gap:6px 24px}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand img{height:88px;width:88px}
.brand-text{font-family:var(--display);font-weight:800;font-size:26px;line-height:1}
.brand-text small{display:block;font-weight:500;font-size:15px;color:var(--ink-3)}
.nav{display:flex;align-items:center;gap:4px}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav a.nav-link,.nav button.nav-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;background:none;border:0;font-family:var(--body);cursor:pointer}
.nav a.nav-link:hover,.nav button.nav-link:hover{background:var(--sand)}
.nav a.nav-link[aria-current="page"]{color:var(--rust)}
.nav .btn{margin-left:10px;min-height:44px;padding:10px 22px}
.has-sub{position:relative}
.sub{list-style:none;margin:0;padding:10px;position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px rgba(11,22,64,.12);display:none}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:block}
.sub a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600}
.sub a span{font-weight:500;color:var(--ink-3);font-size:14px}
.sub a:hover{background:var(--sand)}
.caret{width:10px;height:10px}
.menu-toggle{display:none;min-height:44px;min-width:44px;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-family:var(--body);font-size:16px;color:var(--ink);cursor:pointer}
@media (max-width:1060px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:12px 24px 24px;flex-direction:column;align-items:stretch;box-shadow:0 16px 30px rgba(11,22,64,.1);max-height:calc(100vh - 90px);overflow:auto}
  .nav.open{display:flex}
  .nav>ul{flex-direction:column;align-items:stretch}
  .nav a.nav-link,.nav button.nav-link{width:100%;justify-content:space-between;font-size:18px;padding:12px 8px;border-radius:12px}
  .sub{position:static;display:block;box-shadow:none;border:0;padding:0 0 6px 10px;min-width:0}
  .has-sub button.nav-link{pointer-events:none}
  .has-sub .caret{display:none}
  .nav .btn{margin:12px 0 0}
  .brand img{height:64px;width:64px}
}

/* Wave divider (from the nursery rug) */
.wave{display:block;width:100%;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='36'%3E%3Cg fill='none' stroke-width='5'%3E%3Cpath d='M0 8 Q14 0 28 8 T56 8' stroke='%23E85028'/%3E%3Cpath d='M0 18 Q14 10 28 18 T56 18' stroke='%23F0C040'/%3E%3Cpath d='M0 28 Q14 20 28 28 T56 28' stroke='%231A4598'/%3E%3C/g%3E%3C/svg%3E") repeat-x}

/* Sections */
.section{padding:96px 0}
.section-sand{background:var(--sand)}
.section-ink{background:var(--ink);color:#fff}
.section-head{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:end;margin-bottom:48px}
.section-head h2{max-width:620px}
.section-head p{max-width:460px;color:var(--ink-2)}
@media (max-width:700px){.section{padding:64px 0}}

/* Hero */
.hero .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.hero-copy{flex:1 1 420px;min-width:0}
.hero-kicker{font-weight:600;color:var(--moss);margin-bottom:18px}
.hero .lead{margin-top:24px}
.hero .btn-row{margin-top:34px}
.facts{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:44px;font-size:15px}
.facts strong{display:block;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2}
.facts span{color:var(--ink-3)}
.hero-media{flex:1 1 460px;min-width:0;position:relative}
.hero-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:220px 220px 28px 28px}
.badge{position:absolute;left:-14px;bottom:28px;background:#fff;border-radius:20px;padding:14px 20px;box-shadow:0 10px 30px rgba(11,22,64,.14);display:flex;align-items:center;gap:12px;max-width:290px;font-size:14px;line-height:1.35}
.badge strong{display:block;font-size:15px}
@media (max-width:700px){.badge{left:12px}.hero .wrap{padding-top:40px}}

/* Page hero (inner pages) */
.page-hero{background:var(--sand)}
.page-hero .wrap{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:center;padding-top:64px;padding-bottom:64px}
.page-hero .ph-copy{flex:1 1 440px;min-width:0}
.page-hero .ph-copy .lead{margin-top:20px}
.page-hero .ph-media{flex:1 1 400px;min-width:0}
.page-hero .ph-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.crumbs{font-size:14px;margin-bottom:14px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.age-pill{display:inline-block;margin-top:18px;padding:8px 16px;border-radius:999px;background:#fff;font-weight:700;font-size:15px}

/* Split */
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.split.reverse{flex-wrap:wrap-reverse}
.split>*{flex:1 1 420px;min-width:0}
.split .round{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%}
.split .rect{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.split h2+p,.split h2+.prose{margin-top:24px}

/* Room cards */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:28px}
.room-card{display:block;text-decoration:none;color:var(--ink)}
.room-card img{width:100%;aspect-ratio:4/4.5;object-fit:cover;border-radius:var(--r-lg);transition:transform .25s}
.room-card:hover img{transform:scale(1.015)}
.room-card .rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding-bottom:14px;border-bottom:4px solid var(--mustard)}
.room-card.c2 .rc-head{border-color:var(--orange)}
.room-card.c3 .rc-head{border-color:var(--moss)}
.room-card .rc-head span{font-weight:600;color:var(--ink-3);white-space:nowrap}
.room-card p{margin-top:14px;color:var(--ink-2)}
.room-card:hover h3{color:var(--rust)}

/* Why list */
.why{display:flex;flex-wrap:wrap;gap:48px 72px}
.why>div{flex:1 1 340px;min-width:0}
.why img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);margin-top:36px}
.why-list{flex:1 1 480px!important}
.why-item{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.why-item:first-child{padding-top:0}.why-item:last-child{border-bottom:0;padding-bottom:0}
.why-item h3{font-size:24px;color:var(--mustard-soft)}
.why-item p{margin-top:10px;color:#D5DDF0}

/* Learning areas (room pages) */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.area{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.section-sand .area{border-color:var(--sand-line)}
.area h3{font-size:22px}
.area p{margin-top:10px;color:var(--ink-2)}
.area .dot{width:14px;height:14px;border-radius:50%;background:var(--mustard);margin-bottom:16px}
.area:nth-child(3n+2) .dot{background:var(--orange)}
.area:nth-child(3n) .dot{background:var(--moss)}

/* Photo grids */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg)}
.feature-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.feature-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.feature-grid figure{margin:0;display:flex;flex-direction:column}
.feature-grid figure img{flex:1;min-height:0}
.feature-grid figcaption{margin-top:10px;font-weight:600;color:var(--ink-3)}
@media (max-width:800px){.feature-grid{grid-template-columns:1fr}.feature-grid img{aspect-ratio:4/3;height:auto}}
.gallery{columns:3 280px;column-gap:20px}
.gallery button{display:block;width:100%;padding:0;border:0;background:none;margin:0 0 20px;cursor:zoom-in;break-inside:avoid;border-radius:var(--r-lg);overflow:hidden}
.gallery img{width:100%;height:auto;border-radius:var(--r-lg)}
.lightbox{position:fixed;inset:0;background:rgba(20,16,14,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-height:88vh;max-width:min(1200px,100%);width:auto;border-radius:16px}
.lightbox button{position:absolute;top:16px;right:16px;min-width:48px;min-height:48px;border-radius:999px;border:0;background:#fff;color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;padding:0 18px;font-family:var(--body)}

/* Video */
.video-block{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.video-block video{width:100%;aspect-ratio:16/9;object-fit:cover}

/* YouTube previews */
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.yt{display:block;text-decoration:none;color:var(--ink)}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--ink)}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yt-play svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .2s}
.yt:hover .yt-thumb img{transform:scale(1.03)}
.yt:hover .yt-play svg{transform:scale(1.1)}
.yt-meta{display:flex;flex-direction:column;margin-top:12px}
.yt-meta strong{font-family:var(--display);font-size:21px;line-height:1.2}
.yt-meta span{color:var(--rust);font-weight:600;font-size:15px}
.yt:hover .yt-meta strong{color:var(--rust)}
.yt-big .yt-thumb{border-radius:var(--r-lg)}
.yt-big .yt-play svg{width:88px;height:62px}

/* CTA band */
.cta{background:var(--rust);color:#fff;border-radius:36px;padding:64px 56px;display:flex;flex-wrap:wrap;gap:36px 64px;align-items:center;justify-content:space-between}
.cta>div:first-child{flex:1 1 420px;min-width:0}
.cta p{margin-top:16px;font-size:19px;color:#FFE8DF;max-width:520px}
@media (max-width:700px){.cta{padding:44px 26px;border-radius:26px}}

/* Team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.member .ph{aspect-ratio:1/1;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:42px;color:var(--rust);overflow:hidden}
.member .ph img{width:100%;height:100%;object-fit:cover}
.member h3{margin-top:18px;font-size:22px}
.member p{color:var(--ink-3);margin-top:4px}

/* Policies */
.policy-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.policy-group{border-top:4px solid var(--mustard);padding-top:20px}
.policy-group:nth-child(3n+2){border-color:var(--orange)}
.policy-group:nth-child(3n){border-color:var(--moss)}
.policy-group ul{list-style:none;margin:14px 0 0;padding:0}
.policy-group li{padding:10px 0;border-bottom:1px solid var(--line)}

/* Steps (vacancies/how to apply) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border-radius:20px;padding:26px;border:1px solid var(--sand-line)}
.steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--moss);color:#fff;font-weight:800;font-family:var(--display);margin-bottom:14px}
.steps h3{font-size:21px}.steps p{margin-top:8px;color:var(--ink-2)}

/* Forms */
.form-card{background:#fff;border-radius:28px;padding:40px;border:1px solid var(--sand-line)}
@media (max-width:600px){.form-card{padding:26px}}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid .full{grid-column:1/-1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--sand-line);border-radius:14px;padding:12px 14px;min-height:48px}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(26,69,152,.2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--ink-3);margin-top:14px}
.form-alert{padding:14px 18px;border-radius:14px;background:#FDE7DF;color:var(--rust-dark);font-weight:600;margin-bottom:20px;display:none}
.form-alert.show{display:block}

/* Contact */
.contact-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.contact-list strong{display:block;font-family:var(--display);font-size:20px}
.map{width:100%;height:380px;border:0;border-radius:var(--r-lg);display:block}

/* News cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .cb{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .date{font-size:14px;font-weight:700;color:var(--moss)}
.card h3{font-size:22px}
.card p{color:var(--ink-2)}

/* Footer */
.site-footer{background:var(--sand)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-top:72px;padding-bottom:40px}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h3{font-family:var(--body);font-size:17px;font-weight:700;margin-bottom:12px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.footer-grid address{font-style:normal;color:var(--ink-2)}
.footer-logo{height:120px;width:120px;margin-bottom:16px}
.footer-bottom{border-top:1px solid var(--sand-line);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:20px;padding-bottom:32px;font-size:14px;color:var(--ink-3)}
.social{display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink)}
.social a:hover{background:var(--rust);color:#fff}
.social svg{width:20px;height:20px}
.partners{display:flex;align-items:center;gap:20px;margin-top:18px}
.partners img{height:56px;width:auto}

.credit a{color:inherit;font-weight:600}
.credit a:hover{color:var(--rust)}

/* ---------- Page transitions (curtain), modelled on the WTD prototype ---------- */
:root{--ease:cubic-bezier(.76,0,.24,1);--soft:cubic-bezier(.22,1,.36,1)}
/* GPU-friendly wipe: the panel slides with transform while its contents slide the opposite way,
   so the text stays still on screen — same look as a clip-path wipe, without repainting every frame */
.curtain{position:fixed;inset:0;z-index:250;background:var(--ink);color:#fff;overflow:hidden;transform:translate3d(0,100%,0);visibility:hidden;pointer-events:none;will-change:transform;backface-visibility:hidden}
.ct-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;transform:translate3d(0,-100%,0);will-change:transform}
.curtain.in{visibility:visible;transform:translate3d(0,0,0);transition:transform .65s var(--ease)}
.curtain.in .ct-inner{transform:translate3d(0,0,0);transition:transform .65s var(--ease)}
.curtain.out{visibility:visible;transform:translate3d(0,-100%,0);transition:transform .75s var(--ease)}
.curtain.out .ct-inner{transform:translate3d(0,100%,0);transition:transform .75s var(--ease)}
.ct-k{font:600 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);opacity:0;transform:translateY(14px);transition:opacity .4s ease .15s,transform .6s var(--soft) .15s}
.ct-t{font:800 clamp(44px,8vw,112px)/1 var(--display);letter-spacing:-.03em;color:#fff;opacity:0;transform:translateY(24px);transition:opacity .45s ease .2s,transform .7s var(--soft) .2s}
.ct-t:after{content:".";color:var(--orange)}
.ct-k:before{content:"";display:block;width:56px;height:6px;margin:0 auto 18px;border-radius:6px;background:linear-gradient(90deg,var(--orange) 0 33%,var(--mustard) 33% 66%,var(--blue-light) 66%)}
.curtain.in .ct-k,.curtain.in .ct-t{opacity:1;transform:none}
.curtain.out .ct-k,.curtain.out .ct-t{opacity:0;transform:translateY(-20px);transition:opacity .3s ease,transform .5s var(--ease)}
/* arriving after a curtain: start covered (class set in <head><meta charset="utf-8"> before the page paints) */
.ct-arrive .curtain,.ct-arrive .ct-inner{visibility:visible;transform:none}
.ct-arrive .ct-k,.ct-arrive .ct-t{opacity:1;transform:none;transition:none}

/* Hero entrance: headline, text and buttons rise in one after another */
@keyframes pz-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.enter .hero-copy>*,.enter .ph-copy>*,.enter .hero-media,.enter .ph-media{animation:pz-up 1s var(--soft) both}
.enter .hero-copy>*:nth-child(2),.enter .ph-copy>*:nth-child(2){animation-delay:.1s}
.enter .hero-copy>*:nth-child(3),.enter .ph-copy>*:nth-child(3){animation-delay:.2s}
.enter .hero-copy>*:nth-child(4),.enter .ph-copy>*:nth-child(4){animation-delay:.3s}
.enter .hero-copy>*:nth-child(5),.enter .ph-copy>*:nth-child(5){animation-delay:.4s}
.enter .hero-copy>*:nth-child(n+6),.enter .ph-copy>*:nth-child(n+6){animation-delay:.5s}
.enter .hero-media,.enter .ph-media{animation-duration:1.2s;animation-delay:.25s}

/* Gentle reveals as you scroll */
.js-rv .rv{opacity:.25;transform:translateY(30px);transition:opacity .9s var(--soft),transform 1s var(--soft)}
.js-rv .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .curtain{display:none!important}
  .enter .hero-copy>*,.enter .ph-copy>*,.enter .hero-media,.enter .ph-media{animation:none}
  .js-rv .rv{opacity:1;transform:none;transition:none}
}


/* ---- preview routing (no JavaScript needed) ---- */
.pv-page{display:none;scroll-margin-top:0}
.pv-page:target,.pv-page:has(:target){display:block}
main:not(:has(:target)) > #page-index{display:block}
.pv-page [id]{scroll-margin-top:110px}
.pv-js .pv-page{display:none!important}
.pv-js .pv-page.pv-on{display:block!important}
/* mobile menu via checkbox */
.pv-check{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pv-toggle{display:none;min-height:44px;align-items:center;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:8px 18px;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer}
.pv-check:focus-visible + .pv-toggle{outline:3px solid var(--mustard);outline-offset:3px}
.pv-close{display:none}
.pv-check:checked + .pv-toggle .pv-open{display:none}
.pv-check:checked + .pv-toggle .pv-close{display:inline}
@media (max-width:1060px){
  .pv-toggle{display:inline-flex}
  .pv-check:checked ~ .nav{display:flex}
}
.pv-note{position:fixed;left:16px;bottom:16px;z-index:40;background:var(--ink);color:#fff;font-size:13px;line-height:1.4;padding:10px 14px;border-radius:14px;max-width:300px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.pv-note-x{position:absolute;opacity:0;pointer-events:none}
.pv-note label{color:var(--mustard-soft);font-weight:700;cursor:pointer;padding-left:6px}
.pv-note-x:checked + .pv-note{display:none}

/* Google reviews (homepage) */
.gr-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:32px}
.gr-score{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em}
.gr-count{color:var(--ink-3)}
.gr-stars{display:inline-flex;gap:3px}
.gr-stars svg{width:20px;height:20px;display:block}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.gr-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px}
.section-sand .gr-card{border-color:var(--sand-line)}
.gr-who{display:flex;align-items:center;gap:12px}
.gr-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px;background:var(--sand)}
.gr-initial{width:44px;height:44px;border-radius:50%;flex:0 0 44px;background:var(--sand);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:19px}
.gr-name{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2}
.gr-when{color:var(--ink-3);font-size:15px}
.gr-text{color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
.gr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
.gr-attrib{color:var(--ink-3);font-size:15px}
.gr-skeleton{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.gr-sk{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;min-height:200px}
.gr-sk span{display:block;height:12px;border-radius:999px;background:var(--sand);margin-bottom:12px;animation:gr-pulse 1.4s ease-in-out infinite}
.gr-sk span:nth-child(1){width:45%;height:44px;border-radius:50%;width:44px;margin-bottom:18px}
.gr-sk span:nth-child(3){width:85%}.gr-sk span:nth-child(4){width:70%}
@keyframes gr-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.gr-sk span{animation:none}}

/* Where to find us — compact two-column contact details */
.find-us{display:grid;grid-template-columns:1fr 1fr;gap:18px 36px;list-style:none;margin:28px 0 0;padding:0}
.find-us .fu-visit{grid-row:1/span 2}
.find-us .fu-label{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.find-us address,.find-us a,.find-us span.fu-value{font-style:normal;font-size:17px;line-height:1.45;color:var(--ink)}
.find-us a{font-weight:600;color:var(--rust)}
@media (max-width:560px){.find-us{grid-template-columns:1fr;gap:16px}.find-us .fu-visit{grid-row:auto}}


/* Homepage hero headline width — added 2026-11-04.
   On wide screens the hero copy column was too narrow for the H1, which set in
   four lines. Widening it to 600px lets the same 68px headline set in three.
   Scoped to 1200px and up, so smaller screens keep the original layout. */
@media (min-width:1200px){
  .hero-copy{flex-basis:600px}
}