/* Surf Coast Family Hub: watercolour theme over the base site styles.
   Paper, ink and type follow the AI Automation Vic scene; colours keep the Hub's own teal, blush and mustard. */
:root{
  --paper:#FAF8F3; --ink:#0B1F44; --ink-w:2.6; --ink-t:1.8; --header-h:76px;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --taupe-d:#0B1F44; --ink-soft:#2c3a5c; --muted:#4f5a70;
}
body{font-family:var(--body);color:var(--ink);background:linear-gradient(rgba(250,248,243,.82),rgba(250,248,243,.82)),url(/img/grain.webp) 0 0/190px 190px var(--paper)}
h1,h2,h3,h4{font-family:var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(44px,7.6vw,96px);font-weight:860;line-height:.95;letter-spacing:-.03em}
h2{font-size:clamp(32px,4.6vw,54px);font-weight:820;line-height:1.02}
h3{font-weight:760}
.lead{color:var(--muted)}
.btn{border-radius:12px;font-family:var(--body);font-weight:700;min-height:50px;padding:0 22px;transition:transform .15s,box-shadow .15s,background .15s}
.btn-sm{min-height:42px;padding:0 16px;border-radius:10px}
.btn-primary{background:var(--teal-dd);box-shadow:0 12px 26px -12px rgba(11,31,68,.6)}
.btn-primary:hover{background:var(--ink);transform:translateY(-2px)}
.btn-paper{background:rgba(255,250,240,.62);color:var(--ink);border-color:rgba(11,31,68,.55)}
.btn-paper:hover{background:rgba(255,250,240,.92);border-color:var(--ink);color:var(--ink)}
header{background:rgba(250,248,243,.9);border-bottom-color:rgba(11,31,68,.08)}
.nav ul a{font-weight:600;color:var(--ink)}
.demo{background:var(--ink)}
section{background:transparent}
section[style*="--cream"]{background:transparent!important}

/* ── scene: Jan Juc in watercolour ─────────────────── */
.scene-bay{position:relative;padding:0;--bay-b:-11%}
.scene-bay .stage{position:relative;overflow:hidden;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:540px;background:#F9D6B4}
.anim .scene-bay{height:300vh;height:300svh}
.anim .scene-bay .stage{position:sticky;top:var(--header-h);min-height:0}
.bay{position:absolute;inset:0;pointer-events:none}
.bay-canvas{position:absolute;left:50%;bottom:var(--bay-b);width:max(108vw,calc((100vh - var(--header-h)) * 1.45));width:max(108vw,calc((100svh - var(--header-h)) * 1.45));aspect-ratio:2400/1500;transform:translateX(-50%)}
@media (max-aspect-ratio:1/1){.scene-bay{--bay-b:-5%}.bay-canvas{transform:translateX(-32%)}}
.ly{position:absolute}
.anim .ly{will-change:transform}
.ly img.p{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.ly .dk,.ly .v-coral,.ly .v-dusk,.ly .lights{opacity:0}
.ly img:not([src]){visibility:hidden}
.bob{position:absolute;inset:0;transform-origin:50% 82%}
.ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:var(--ink-w);stroke-linecap:round;stroke-linejoin:round;opacity:.8;display:block;max-width:none}
.ink .t{stroke-width:var(--ink-t)}
.ly-sun .ink{opacity:.4}
.stars{position:absolute;left:0;top:-16%;width:100%;height:66%;opacity:0}
.stars i{position:absolute;width:.26%;aspect-ratio:1;border-radius:50%;background:#FFF9EC;box-shadow:0 0 6px 1px rgba(255,249,236,.65)}
.bay-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,30,98,0) 30%,rgba(38,30,98,.3));opacity:0}
.grain{position:absolute;inset:0;background:url(/img/grain.webp) 0 0/190px 190px;opacity:.26;pointer-events:none}
.gt{position:absolute;left:0;width:100%;height:0}
.gull{position:absolute;right:0;top:0;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8;max-width:none}
.gull .g2{opacity:0}
.gt:nth-child(1){transform:translateX(-58%)}.gt:nth-child(2){transform:translateX(-22%)}.gt:nth-child(3){transform:translateX(-71%)}

.bay-copy{position:relative;z-index:2;padding-top:clamp(26px,6.4vh,76px)}
.bay-copy h1{max-width:9.4em;margin:0;font-size:clamp(40px,6vw,84px)}
.bay-copy h1 span{color:var(--teal-dd)}
.bay-copy .lede{color:#17284F;font-weight:500;font-size:clamp(17px,1.9vw,21px);max-width:27em;margin:18px 0 24px;line-height:1.5}
.bay-copy .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.bay-copy .trust{display:none}
.bay-copy .trust li::before{color:var(--teal-dd)}
.bay-dusk,.scroll-cue{display:none}
.anim .bay-dusk{display:block;position:absolute;left:0;right:0;top:clamp(34px,11vh,120px);z-index:2;text-align:center;color:#FFF3DF;opacity:0;pointer-events:none}
.bay-dusk-h{font:850 clamp(36px,6.4vw,84px)/1 var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;letter-spacing:-.02em;margin:0 0 14px}
.bay-dusk p:last-child{font-size:clamp(17px,1.8vw,21px);max-width:26em;margin:0 auto;color:#F1E4F2}
.anim .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:4px;position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);z-index:2;font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.scroll-cue svg{width:18px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.anim .ink path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:inkdraw 1.5s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * 30ms + 200ms)}
@keyframes inkdraw{0%{stroke-dashoffset:1;opacity:0}5%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.anim .bay.drawn .ink path{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
.bay.drawn .ink .f1,.bay.drawn .ink .f2{display:none}
.bay.drawn[data-f="1"] .ink .f0,.bay.drawn[data-f="2"] .ink .f0{display:none}
.bay.drawn[data-f="1"] .ink .f1,.bay.drawn[data-f="2"] .ink .f2{display:inline}
.anim .bay.drawn .ink path.rp{animation:rip 4.6s ease-in-out infinite alternate}
.anim .bay.drawn .ink path.rp2{animation-duration:6.2s;animation-direction:alternate-reverse}
@keyframes rip{from{transform:translateX(-14px);opacity:.25}to{transform:translateX(14px);opacity:1}}
.anim .bob{animation:bob 4.8s ease-in-out infinite alternate}
.anim .ly-boata .bob{animation-duration:6s}
.anim .ly-surf2 .bob{animation-duration:3.6s;animation-delay:-1.2s}
@keyframes bob{from{transform:translateY(-1.4%) rotate(-1.8deg)}to{transform:translateY(1.4%) rotate(2deg)}}
.anim .stars i{animation:twinkle 2.4s ease-in-out infinite alternate;animation-delay:var(--t)}
@keyframes twinkle{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
.anim .gt{left:-100%;transform:none;animation:gullfly var(--d) linear infinite;animation-delay:var(--t)}
@keyframes gullfly{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(212%,0,0)}}
.anim .gull{animation:gulldrift 3.4s ease-in-out infinite alternate}
@keyframes gulldrift{from{transform:translateY(-40%)}to{transform:translateY(60%)}}
.anim .gull .g1{animation:flap .62s steps(1) infinite}
.anim .gull .g2{animation:flap .62s steps(1) infinite;animation-delay:-.31s}
@keyframes flap{0%{opacity:1}50%{opacity:0}}
.ly .lights{transition:opacity .5s}
.bay.night .ly .lights{opacity:1;animation:lightson 1.6s steps(1) both}
@keyframes lightson{0%{clip-path:inset(0 100% 0 0)}10%{clip-path:inset(0 82% 0 0)}16%{clip-path:inset(0 100% 0 0)}24%{clip-path:inset(0 82% 0 0)}45%{clip-path:inset(0 64% 0 0)}70%{clip-path:inset(0 55% 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* the painting ends on a ragged edge of paper */
.paper-top{position:relative;height:0;z-index:3}
.edge-wrap{position:absolute;left:0;right:0;top:-58px;height:120px;overflow:hidden;pointer-events:none}
.paper-edge{position:absolute;left:50%;top:0;width:max(100%,1200px);height:100%;transform:translateX(-50%);max-width:none}
.pe-fill{fill:var(--paper)}
.pe-rim{fill:none;stroke:rgba(74,52,116,.4);stroke-width:2.5}
#find{position:relative;z-index:4}
.finder{background:var(--ink);margin-top:10px;box-shadow:0 30px 60px -30px rgba(11,31,68,.6)}
.chip[aria-pressed=true]{background:var(--mustard);border-color:var(--mustard);color:var(--ink)}

/* paper cards */
.svc,.card,.calc,.fact,.steps li,form,.note,.match{border-radius:16px}
.svc,.card,form,.calc{background:#fffdf8;box-shadow:0 1px 2px rgba(11,31,68,.05),0 18px 40px -22px rgba(11,31,68,.35);border:1px solid rgba(11,31,68,.07)}
.assess,.fees{background:transparent}
.crisis{background:var(--teal-dd)}
footer{background:var(--ink);color:#e6e9f2}
footer h4{color:#fff}
footer a{color:#f2d3c6}

@media (prefers-reduced-motion:reduce){.anim .ink path{animation:none;stroke-dashoffset:0;opacity:1}}
@media (max-width:640px){
  .bay-copy .trust{display:none}
  .scene-bay .stage{min-height:600px}
}