/* ===== WonderCo styles. Change colours/fonts here only. ===== */
:root{
  --cream:#EBE4D6; --mustard:#D2C447; --rust:#D2491C; --sky:#8386BF; --olive:#5A7A08;
  --ink:#5A2A0C; --brown:#A44A12; --white:#FFFBF2;
  --radius:28px; --max:1120px;
  --display:'Chewy','Baloo 2',cursive; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--cream);color:var(--ink);font:400 1.05rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;color:var(--brown);letter-spacing:.01em}
h1{font-size:clamp(2.6rem,7vw,4.6rem)} h2{font-size:clamp(2rem,4.5vw,3rem)} h3{font-size:1.7rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:72px 0}
.lead{font-size:1.2rem;max-width:62ch}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid rgba(90,42,12,.08)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--display);font-size:1.9rem;color:var(--brown);text-decoration:none}
.logo img{height:46px} /* when you add logo.png, replace the text in the header with <img src="/assets/img/logo.png" alt="WonderCo"> */
.nav{display:flex;gap:6px;align-items:center}
.nav a{text-decoration:none;font-weight:800;padding:8px 14px;border-radius:99px;transition:background .2s}
.nav a:hover{background:rgba(210,196,71,.55)}
.nav .btn{background:var(--rust);color:#fff}.nav .btn:hover{background:var(--brown)}
.menu-btn{display:none;background:none;border:0;font:800 1rem var(--body);padding:10px;color:var(--ink)}
@media(max-width:760px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--cream);flex-direction:column;padding:12px 20px 20px;border-bottom:2px solid rgba(90,42,12,.1)}
  .nav.open{display:flex}.nav a{width:100%;text-align:center}
}

/* buttons */
.btn{display:inline-block;background:var(--rust);color:#fff;font:800 1.05rem var(--body);padding:14px 28px;border-radius:99px;border:0;text-decoration:none;cursor:pointer;transition:transform .15s,background .2s}
.btn:hover{background:var(--brown);transform:translateY(-2px)}
.btn.alt{background:var(--white);color:var(--brown)}

/* hero */
.hero{position:relative;min-height:78vh;display:grid;align-items:end;padding:0;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;background:var(--sky)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(60,28,8,.78),rgba(60,28,8,.05) 65%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:56px;padding-top:120px}
.hero h1{color:var(--mustard)} .hero p{color:var(--white);max-width:52ch;margin:14px 0 26px;font-size:1.25rem}
.hero .btn+.btn{margin-left:10px}

/* incursions: alternating colour blocks */
.inc{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.inc .photo{min-height:320px;position:relative}
.inc .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inc .txt{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:flex-start}
.inc.c1{background:var(--mustard)}.inc.c2{background:var(--rust);color:var(--white)}.inc.c3{background:var(--sky);color:var(--white)}
.inc.c2 h3,.inc.c3 h3{color:var(--mustard)}
.inc:nth-child(even) .photo{order:2}
.inc .photo{background:rgba(255,255,255,.25)}
.inc a.more{font-weight:800}
@media(max-width:760px){.inc{grid-template-columns:1fr}.inc:nth-child(even) .photo{order:0}.inc .txt{padding:28px}}

/* about + trust strip */
.about{background:var(--olive);color:var(--white);border-radius:var(--radius)}
.about h2{color:var(--mustard)} .about .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.trust{list-style:none;display:grid;gap:12px;padding:0}
.trust li{background:rgba(255,251,242,.12);padding:14px 18px;border-radius:18px;font-weight:700}
@media(max-width:760px){.about .wrap{grid-template-columns:1fr}}

/* form */
.book{background:var(--white);border-radius:var(--radius);padding:48px;max-width:860px;margin:0 auto}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
form .full{grid-column:1/-1}
label{display:grid;gap:6px;font-weight:800;font-size:.95rem}
input,select,textarea{font:inherit;padding:12px 14px;border:2px solid rgba(90,42,12,.2);border-radius:14px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--rust);outline:none}
.hp{position:absolute;left:-9999px}
.msg{display:none;padding:14px;border-radius:14px;background:var(--mustard);font-weight:800}
@media(max-width:640px){form{grid-template-columns:1fr}.book{padding:28px 20px}}

/* floating CTA */
.float-cta{position:fixed;left:50%;bottom:16px;transform:translate(-50%,0);z-index:60;box-shadow:0 8px 24px rgba(90,42,12,.3);transition:transform .3s,opacity .3s}
.float-cta.hide{transform:translate(-50%,90px);opacity:0;pointer-events:none}

/* suburb pages / footer */
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.areas a{display:block;background:var(--white);padding:8px 16px;border-radius:99px;text-decoration:none;font-weight:700}
.areas a:hover{background:var(--mustard)}
.site-footer{background:var(--brown);color:var(--cream);padding:48px 0 90px;margin-top:72px}
.site-footer a{color:var(--mustard)}
.site-footer .wrap{display:grid;gap:10px}

/* the one animation: reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* ===== v2 additions ===== */
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{background:rgba(255,251,242,.55);color:var(--ink);font-weight:800;font-size:.85rem;padding:3px 12px;border-radius:99px}
.inc .btn{padding:10px 22px;font-size:.95rem;margin-top:4px}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{background:var(--white);border-radius:var(--radius);padding:28px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mustard);font:1.6rem var(--display);color:var(--brown);margin-bottom:12px}
.steps h3{font-size:1.4rem;margin-bottom:6px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.faq details{background:var(--white);border-radius:18px;padding:16px 22px;margin-bottom:12px}
.faq summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font:1.5rem var(--display);color:var(--rust);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px}
.crumbs{font-size:.9rem;margin-bottom:14px}.crumbs a{font-weight:700}
.cur{display:grid;gap:12px;margin:24px 0}
.cur div{background:var(--white);border-left:10px solid var(--sky);border-radius:14px;padding:14px 18px}
.cur b{color:var(--brown)}
.pagehead{border-radius:0 0 var(--radius) var(--radius);padding:56px 0 48px}
.pagehead.c1{background:var(--mustard)}.pagehead.c2{background:var(--rust);color:var(--white)}.pagehead.c3{background:var(--sky);color:var(--white)}
.pagehead.c2 h1,.pagehead.c3 h1{color:var(--mustard)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media(max-width:760px){.cols{grid-template-columns:1fr}}
.cols ul,.learn{padding-left:1.2em}.learn li{margin-bottom:6px}
.btn.small{padding:6px 16px;font-size:.85rem;background:transparent;border:2px solid var(--cream);color:var(--cream)}
.btn.small:hover{background:var(--cream);color:var(--brown)}
.band{background:var(--mustard);border-radius:var(--radius);padding:36px;text-align:center}
.contactline a{font-weight:800}