/* Homepage sections (index only). Built from the approved concepts:
   hero illustration + before/after timeline (c1), services + how it works (c4), safe AI (c3).
   Every class starts with h- so nothing clashes with site.css or the themes. */
:root{--h-coral:#ff7a59;--h-violet:#7c5cff;--h-sky:#2fa3ff;--h-lilac:#cfcdf3;--h-sand:#f4f5f8;--h-ink:#110f31;--h-muted:#4a4866;--h-line:#e7e3d8}

/* ---------- hero: copy left, illustration right, faded Mount behind ---------- */
.hero .wrap.h-hero{grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;min-height:0;padding-block:72px 130px}
.h-hero .copy{max-width:560px}
.h-art{container-type:inline-size;width:100%;min-width:0}
/* the stage is sized in em, 1em = 1/56 of its width, so it scales as one piece */
.h-stage{position:relative;font-size:calc(100cqw / 56);width:56em;height:47em;color:var(--h-ink);line-height:1.3}
.h-links{position:absolute;inset:0;width:100%;height:100%}
.h-card{position:absolute;background:#fff;border-radius:1.2em;padding:1.1em 1.3em;box-shadow:0 1.2em 2.6em rgba(5,4,25,.35);display:flex;gap:1em;align-items:center;font-size:1.3em;line-height:1.3;white-space:nowrap}
.h-card b{display:block;font-size:1.05em}
.h-card small{display:block;color:var(--h-muted);font-size:.85em}
.h-ico{flex:none;width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center}
.h-ico svg{width:1.3em;height:1.3em;fill:none;stroke:var(--h-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h-card.c-inv{left:0;top:2.5em}
.h-card.c-spray{left:12em;top:36.5em}
.h-card.c-saved{left:23em;top:.5em}
.h-bubble{position:absolute;border-radius:50%;border:.7em solid #fff;overflow:hidden;box-shadow:0 1em 2.4em rgba(5,4,25,.4)}
.h-bubble img{width:100%;height:100%;object-fit:cover;display:block}
.h-bubble.ph-tradie{left:45.5em;top:0;width:10.5em;height:10.5em}
.h-bubble.ph-office{left:0;top:30em;width:9.5em;height:9.5em}
.h-laptop{position:absolute;left:5em;top:10em;width:38em}
.h-screen{background:#1d1b45;border-radius:1.4em 1.4em 0 0;padding:1em}
.h-app{background:var(--paper);border-radius:.6em;display:grid;grid-template-columns:3.6em 1fr;height:23em;overflow:hidden}
.h-side{background:var(--h-sand);padding:1.2em .9em;display:flex;flex-direction:column;gap:1em}
.h-side i{display:block;height:1.8em;border-radius:.5em;background:#e4dfd2}
.h-side i:first-child{background:var(--gold)}
.h-main{padding:1.4em 1.6em;min-width:0}
.h-app-top{display:flex;justify-content:space-between;align-items:baseline;font-size:1.25em}
.h-app-top b{font-size:1.15em}
.h-app-top span{color:var(--h-muted);font-size:.85em}
.h-waiting{font-size:1.05em;color:var(--h-muted);margin:.6em 0 1em}
.h-row{display:flex;align-items:center;gap:1em;background:#fff;border:1px solid var(--h-line);border-radius:.8em;padding:.8em 1em;margin-bottom:.7em;font-size:1.1em;line-height:1.3}
.h-dot{flex:none;width:.8em;height:.8em;border-radius:50%}
.h-row>div{flex:1;min-width:0}
.h-row b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-row small{color:var(--h-muted);font-size:.85em}
.h-tag{display:inline-block;background:#efedfd;color:#4b3bb0;border-radius:99em;padding:0 .6em;font-size:.8em;font-weight:600;margin-right:.3em}
.h-btn{flex:none;border-radius:99em;padding:.45em 1em;font-size:.9em;font-weight:600;background:var(--gold);color:var(--h-ink)}
.h-btn.out{background:none;border:1px solid #cfcbe0}
.h-base{height:1.6em;background:linear-gradient(#d9d6e8,#b9b5d0);border-radius:0 0 1.6em 1.6em;margin:0 -2.4em;position:relative}
.h-base::after{content:"";position:absolute;left:50%;top:0;width:7em;height:.6em;transform:translateX(-50%);background:#a8a3c3;border-radius:0 0 .6em .6em}
.h-mobile{position:absolute;left:40em;top:14em;width:14.5em;height:28em;background:#1d1b45;border-radius:2.2em;padding:.8em;box-shadow:0 1.4em 3em rgba(5,4,25,.45)}
.h-mscreen{background:var(--paper);border-radius:1.6em;height:100%;overflow:hidden;font-size:1.05em;line-height:1.35}
.h-mhead{background:var(--navy);color:#fff;padding:1.4em 1em .8em;font-weight:600;font-size:1.05em}
.h-mhead small{display:block;font-weight:400;color:#bdf0c9;font-size:.8em}
.h-chat{padding:.9em .8em;display:flex;flex-direction:column;gap:.6em}
.h-msg{max-width:88%;padding:.6em .8em;border-radius:1em;background:#efedfd}
.h-msg.me{align-self:flex-end;background:var(--navy);color:#fff}
.h-booked{background:#e7f6ec;border:1px solid #b7e2c4;border-radius:.8em;padding:.6em .8em;font-weight:600;color:#14532d}
@container (max-width:520px){
 .h-stage{font-size:calc(100cqw / 44);width:44em;height:42em}
 .h-laptop{left:0;top:8em;width:44em}
 .h-mobile,.h-card.c-saved,.h-bubble.ph-office,.h-links{display:none}
 .h-bubble.ph-tradie{left:34em;width:9.5em;height:9.5em}
 .h-card.c-inv{top:1em}
 .h-card.c-spray{display:none}
 .h-stage{height:34em}
}
@media(max-width:900px){
 .hero .wrap.h-hero{grid-template-columns:1fr;gap:40px;padding-block:56px 110px}
 .h-art{max-width:600px;justify-self:center}
}
/* one-time fade in, no looping */
@media(prefers-reduced-motion:no-preference){
 .h-art{animation:h-rise .8s ease-out .15s both}
 @keyframes h-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ---------- before / after: same day, two timelines ---------- */
.h-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;max-width:960px;margin:48px auto 0}
.h-cmp>*{min-width:0}
.h-tl{background:#fff;border-radius:22px;padding:28px;box-shadow:0 12px 32px rgba(17,15,49,.07)}
.h-tl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.h-tl h3{font-size:18px}
.h-chip{border-radius:99px;padding:4px 12px;font-size:13px;font-weight:600}
.h-tl ol{list-style:none;border-left:2px solid var(--h-line);margin:0 0 0 6px;padding:0}
.h-tl li{position:relative;padding:0 0 16px 22px;font-size:15px;line-height:1.5;color:var(--h-muted)}
.h-tl li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #cbc6b8}
.h-tl li b{color:var(--h-ink);font-weight:600;margin-right:6px}
.h-tl li.end{padding-bottom:0}
.h-tl li.end::before{border-color:var(--c);background:var(--c)}
.h-end{margin-top:14px;border-radius:14px;padding:14px 16px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.h-end span:last-child{font-size:22px;letter-spacing:-.02em}
.h-arrow{width:56px;height:56px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.h-arrow svg{width:24px;stroke:var(--gold);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.h-note{text-align:center;color:var(--body);margin:36px 0 0;font-size:16px}
@media(max-width:760px){.h-cmp{grid-template-columns:1fr}.h-arrow{margin:0 auto;transform:rotate(90deg)}.h-tl{padding:22px}}

/* ---------- services: four cards with a mini screen on top ---------- */
.h-svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.h-svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--h-line);border-radius:24px;padding:14px 14px 24px;box-shadow:0 10px 30px -22px rgba(17,15,49,.3);color:var(--h-ink);text-decoration:none;transition:transform .2s,box-shadow .2s;min-width:0}
.h-svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,15,49,.1)}
.h-svc h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:20px 10px 8px}
.h-svc p{color:var(--body);font-size:15.5px;line-height:1.55;margin:0 10px}
.h-more{margin:14px 10px 0;padding-top:4px;color:#9a7400;font-weight:600;font-size:15px;margin-top:auto}
.h-svc p{margin-bottom:14px}
.h-mini{height:168px;border-radius:16px;background:var(--h-sand);padding:16px;position:relative;overflow:hidden;font-size:12px;line-height:1.45}
.h-pane{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 16px -10px rgba(17,15,49,.35)}
.h-pane>b{font-size:12px}
.h-to{color:var(--h-muted);font-size:11px;border-bottom:1px solid var(--h-line);padding-bottom:5px;margin-bottom:7px}
.h-ln{height:6px;border-radius:4px;background:#e7e4f3;margin:6px 0}
.h-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;margin-top:6px}
.h-badge.gold{background:#fff1c2;color:#6b5000}.h-badge.sky{background:#dbefff;color:#0c4f87}
.h-q{background:#fff;border-radius:14px 14px 14px 4px;padding:8px 11px;width:fit-content;max-width:80%;box-shadow:0 4px 12px -8px rgba(17,15,49,.3)}
.h-a{background:var(--navy);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 11px;width:fit-content;max-width:85%;margin:8px 0 0 auto}
.h-agenda{margin:0;padding:0}
.h-agenda li{list-style:none;display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--h-line)}
.h-agenda li:last-child{border:0}
.h-agenda time{font-weight:700;color:#5536d6;min-width:36px}
.h-hub{position:absolute;inset:0}
.h-hub>svg{position:absolute;inset:0}
.h-node{position:absolute;background:#fff;border-radius:10px;padding:6px 10px;font-weight:600;font-size:11.5px;box-shadow:0 4px 12px -8px rgba(17,15,49,.35)}
.h-node i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.h-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;padding:3px;background:conic-gradient(#ffc700,#ff7a59,#7c5cff,#2fa3ff,#ffc700)}
.h-core>span{display:grid;place-items:center;height:100%;border-radius:50%;background:#fff}
@media(max-width:1080px){.h-svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.h-svcs{grid-template-columns:1fr}}

/* ---------- safe AI: portrait in a frame with an offset lilac shape, then 5 promises ---------- */
.wrap.h-safe{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.h-safe>*{min-width:0}
.h-frame{position:relative;margin:0 18px 18px 0;max-width:440px}
.h-frame::before{content:"";position:absolute;inset:0;transform:translate(18px,18px);background:var(--h-lilac);border-radius:28px}
.h-frame img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px}
.h-fchip{position:absolute;z-index:2;bottom:30px;right:-26px;display:flex;align-items:center;gap:10px;background:#fff;color:var(--h-ink);border-radius:14px;padding:10px 14px;font-size:13.5px;line-height:1.3;box-shadow:0 14px 34px -12px rgba(11,10,36,.45)}
.h-fchip b{display:block;font-size:14px}
.h-fchip small{display:block;color:var(--h-muted);font-size:12px}
.h-fdot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e3f2ff;color:#0a6fc2;font-weight:700}
.h-safe .lead{margin-bottom:30px}
.h-promises{list-style:none;counter-reset:p;display:grid;gap:20px;margin:0;padding:0}
.h-promises li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.h-promises li::before{content:counter(p);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold);font-weight:700}
.h-promises b{display:block;font-size:17px}
.h-promises span{color:var(--body);font-size:15.5px;line-height:1.55}
@media(max-width:960px){.wrap.h-safe{grid-template-columns:1fr;gap:56px}.h-frame{margin-inline:auto;width:calc(100% - 18px)}}
@media(max-width:640px){.h-fchip{right:12px;bottom:16px;font-size:12.5px;padding:8px 11px}}

/* ---------- how it works: three dots on one line ---------- */
.h-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center;margin-top:48px}
.h-track::before{content:"";position:absolute;top:21px;left:16.6%;right:16.6%;height:2px;background:repeating-linear-gradient(90deg,var(--navy) 0 10px,transparent 10px 18px)}
.h-step{min-width:0}
.h-sdot{position:relative;width:44px;height:44px;margin:0 auto 22px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 8px var(--h-sand)}
.h-step:nth-child(2) .h-sdot{background:var(--h-lilac)}
.h-step:nth-child(3) .h-sdot{background:var(--navy);color:#fff}
.h-step h3{font-size:21px;margin-bottom:8px}
.h-step p{color:var(--body);max-width:300px;margin:0 auto}
.h-cta{text-align:center;margin:40px 0 0}
@media(max-width:900px){
 .h-track{grid-template-columns:1fr;text-align:left;gap:28px}
 .h-track::before{top:22px;bottom:22px;left:21px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--navy) 0 10px,transparent 10px 18px)}
 .h-step{display:grid;grid-template-columns:44px 1fr;gap:0 20px}
 .h-sdot{margin:0;grid-row:span 2}
 .h-step p{margin:0;max-width:none}
}

/* no decorative shapes on the homepage photos */
.jobs-head figure::after,.jobs-head figure::before{content:none!important}

/* "Who I help" — full-width expanding panels */
.who .wrap{margin-bottom:44px}
.wh{display:flex;gap:8px;height:min(560px,70vh);padding:0 8px}
.wh-p{position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;background-color:var(--navy);background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;text-decoration:none;transition:flex .55s cubic-bezier(.2,.8,.2,1)}
.wh-p::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,36,.15) 0%,rgba(11,10,36,.35) 45%,rgba(11,10,36,.92) 100%);transition:background .4s}
.wh-p.on{flex:3.4 1 0}
/* closed panels on desktop: title runs up the side */
@media(min-width:901px){.wh-p:not(.on) .wh-in{left:auto;right:auto;left:50%;bottom:24px;transform:translateX(-50%)}.wh-p:not(.on) .wh-t{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:19px}}
.wh-p.on::before{background:linear-gradient(180deg,rgba(11,10,36,0) 30%,rgba(11,10,36,.9) 100%)}
.wh-n{position:absolute;top:18px;left:20px;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.wh-in{position:absolute;left:20px;right:20px;bottom:22px;display:grid;gap:8px}
.wh-t{font-size:clamp(17px,1.4vw,22px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.wh-ex,.wh-tag{max-height:0;opacity:0;overflow:hidden;transition:opacity .35s .1s,max-height .4s}
.wh-ex{font-size:16px;line-height:1.5;color:#e6e5f6;max-width:46ch}
.wh-tag{font-size:13px;font-weight:600;color:var(--gold)}
.wh-p.on .wh-ex{max-height:120px;opacity:1}.wh-p.on .wh-tag{max-height:40px;opacity:1}
.wh-p:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:900px){
 .wh{flex-direction:column;height:auto;padding:0 16px;gap:10px}
 .wh-p{flex:none;height:92px;transition:height .45s cubic-bezier(.2,.8,.2,1)}
 .wh-p.on{flex:none;height:300px}
 .wh-n{top:16px}.wh-in{left:18px;right:18px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){.wh-p,.wh-ex,.wh-tag{transition:none}}

/* ---------- four ways, spruced: 2×2 bigger cards, each with its own logo-ring colour ---------- */
.h-svcs{grid-template-columns:repeat(2,1fr);gap:22px;counter-reset:svc}
.h-svc{display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto auto 1fr auto;column-gap:26px;padding:28px;border:0;border-radius:26px;box-shadow:0 1px 2px rgba(17,15,49,.05),0 18px 40px -28px rgba(17,15,49,.35);counter-increment:svc;--tint:#fff1ec;--acc:#ff7a59}
.h-svc:nth-child(2){--tint:#e9f4ff;--acc:#2fa3ff}.h-svc:nth-child(3){--tint:#f0ecff;--acc:#7c5cff}.h-svc:nth-child(4){--tint:#fff6d4;--acc:#e0a800}
.h-svc .h-mini{grid-column:2;grid-row:1/5;height:auto;min-height:230px;background:var(--tint);border-radius:20px;padding:22px;font-size:13.5px;transition:transform .25s}
.h-svc::before{content:"0" counter(svc);grid-column:1;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--acc);margin:4px 0 0}
.h-svc h3{grid-column:1;font-size:24px;margin:10px 0 10px;letter-spacing:-.02em}
.h-svc p{grid-column:1;font-size:16px;margin:0 0 18px}
.h-svc .h-more{grid-column:1;margin:auto 0 0;color:var(--navy);display:inline-flex;align-items:center;gap:8px}
.h-svc .h-more::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.h-svc:hover .h-mini{transform:scale(1.02)}
.h-svc .h-pane{padding:16px;border-radius:14px;box-shadow:0 14px 30px -16px rgba(17,15,49,.35)}
.h-svc .h-pane>b{font-size:14.5px}.h-svc .h-to{font-size:12.5px}.h-svc .h-ln{height:7px}
.h-svc .h-badge{font-size:12.5px;padding:5px 11px}
.h-svc .h-q,.h-svc .h-a{padding:10px 13px;font-size:14px}
.h-svc .h-agenda li{padding:7px 0;font-size:13.5px}
.h-svc .h-node{font-size:12.5px;padding:7px 11px}
.h-svc .h-core{width:56px;height:56px}
@media(max-width:1000px){.h-svcs{grid-template-columns:1fr}}
@media(max-width:600px){.h-svc{grid-template-columns:1fr;padding:20px}.h-svc .h-mini{grid-column:1;grid-row:auto;order:-1;min-height:200px;margin-bottom:18px}.h-svc::before,.h-svc h3,.h-svc p,.h-svc .h-more{grid-column:1}}

/* four ways with Figma illustrations (navy + gold) */
.h-svc{display:flex;flex-direction:column;grid-template-columns:none;padding:0 0 28px;overflow:hidden;--acc:#9a7400}
.h-svc .h-ill{display:block;width:100%;height:auto;aspect-ratio:1960/1120;object-fit:cover;object-position:center top;background:#fff;border-bottom:1px solid #eef0f4;margin-bottom:22px}
.h-svc::before{margin:0 28px;color:#9a7400}
.h-svc h3,.h-svc p,.h-svc .h-more{margin-left:28px;margin-right:28px}
.h-svc h3{margin-top:8px}
.h-svc .h-more::after{background:var(--gold)}
.h-svc:hover .h-ill{transform:none}
@media(max-width:600px){.h-svc{padding-bottom:22px}.h-svc::before,.h-svc h3,.h-svc p,.h-svc .h-more{margin-left:20px;margin-right:20px}}
@media(max-width:1000px) and (min-width:641px){.h-svcs{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.h-svcs{grid-template-columns:1fr}}

/* four ways: one navy section, open rows, live animated illustrations */
#services{background:linear-gradient(180deg,#f1f0fc 0%,#e9e8fa 100%);color:var(--ink);overflow:hidden;padding-block:clamp(96px,11vw,150px)}
#services .eyebrow{color:#7a5d00}#services .h2{color:var(--ink)}#services .lead{color:var(--body)}
.fw-rows{display:grid;gap:0;margin-top:64px}
.fw-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,8vw,120px);align-items:center;padding:clamp(56px,7vw,96px) 0;border-top:1px solid rgba(17,15,49,.08)}
.fw-row:first-child{border-top:0}
.fw-row:nth-child(even){grid-template-columns:.95fr 1.05fr}
.fw-row:nth-child(even) .fx{order:2}
.fw-txt{display:grid;gap:14px;align-content:center;min-width:0}
.fw-n{font-size:13px;font-weight:700;letter-spacing:.16em;color:#7a5d00;display:flex;align-items:center;gap:10px}.fw-n::after{content:"";width:28px;height:2px;border-radius:2px;background:var(--gold);opacity:.6}
.fw-row h3{font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink)}
.fw-txt p{margin:0;color:var(--body);font-size:16.5px;line-height:1.6;max-width:46ch}
.fw-txt ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:7px}
.fw-txt li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink)}
.fw-txt li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23110f31' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
.fw-more{justify-self:start;margin-top:8px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.fw-more span{display:inline-block;transition:transform .2s}.fw-more:hover span{transform:translateX(4px)}
@media(max-width:900px){.fw-row,.fw-row:nth-child(even){grid-template-columns:1fr;gap:28px;padding:40px 0}.fw-row:nth-child(even) .fx{order:0}}

/* shared illustration bits */
.fx{position:relative;min-width:0;color:var(--ink)}
.fx svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 1 process */
.fx-memo{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px 16px 12px 12px;box-shadow:0 18px 40px -20px rgba(17,15,49,.28);width:max-content;max-width:100%;margin-bottom:26px}
.fx-mic{flex:none;width:38px;height:38px;border-radius:50%;background:#ff7a59;color:#fff;display:grid;place-items:center}.fx-mic svg{width:20px}
.fx-q{font-size:15px;font-weight:500;min-width:0}
.fx-wave{display:flex;gap:3px;align-items:center;flex:none}.fx-wave i{width:3px;border-radius:2px;background:#110f31;opacity:.35;height:8px}
.fx-wave i:nth-child(2n){height:16px}.fx-wave i:nth-child(3n){height:22px}.fx-wave i:nth-child(5n){height:12px}
.fx-time{font-size:13px;font-weight:600;color:var(--body);flex:none}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fx-steps li{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;color:var(--ink)}
.fx-steps li:not(:last-child)::after{content:"";position:absolute;top:34px;right:-14px;width:14px;height:2px;background:rgba(17,15,49,.25)}
.fx-tile{width:68px;height:68px;border-radius:22px;background:#fff;display:grid;place-items:center;margin-bottom:6px;box-shadow:0 14px 30px -14px rgba(17,15,49,.28)}
.fx-tile svg{width:30px}.fx-tile.c1{color:#ff7a59}.fx-tile.c2{color:#7c5cff}.fx-tile.c3{color:#1f8f5a}.fx-tile.c4{background:var(--gold);color:#110f31}
.fx-steps b{font-size:14.5px;line-height:1.3}.fx-steps small{font-size:12.5px;color:var(--body)}
.fx-badge{display:inline-block;margin-top:24px;background:var(--gold);color:#110f31;font-weight:700;font-size:14.5px;padding:9px 16px;border-radius:999px}
/* 2 chat */
.fx-chat{padding:0 0 64px 0}
.fx-win{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(17,15,49,.32);max-width:440px;margin-left:auto}
.fx-head{display:flex;align-items:center;gap:12px;background:#1c1950;color:#fff;padding:14px 18px}
.fx-av{width:42px;height:42px;border-radius:50%;padding:3px;background:conic-gradient(#ffc700,#ff7a59,#7c5cff,#2fa3ff,#ffc700);flex:none}
.fx-av svg{display:block;width:100%;height:100%;border-radius:50%;background:#fff;padding:7px 5px;stroke:none}
.fx-head b{display:block;font-size:15px}.fx-head small{font-size:12px;color:#cfcdf3}.fx-head small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#59d98c;margin-right:6px}
.fx-msgs{display:grid;gap:9px;padding:16px}
.fx-msgs p{margin:0;font-size:14.5px;line-height:1.45;padding:9px 13px;border-radius:16px;background:#f4f5f8;max-width:82%;justify-self:start}
.fx-msgs p.me{background:#110f31;color:#fff;justify-self:end}
.fx-pop{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px 18px 12px 12px;box-shadow:0 20px 40px -18px rgba(17,15,49,.32)}
.fx-ck{width:36px;height:36px;border-radius:50%;background:#e3f4ea;color:#1f8f5a;display:grid;place-items:center}.fx-ck svg{width:20px}
.fx-pop b{display:block;font-size:15px}.fx-pop small{font-size:12.5px;color:var(--body)}
/* 3 workshop */
.fx-workshop{padding:26px 20px 30px}
.fx-workshop img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -30px rgba(17,15,49,.32)}
.fx-note{position:absolute;width:150px;padding:12px 14px;border-radius:5px;font-size:14px;font-weight:600;color:#110f31;box-shadow:0 12px 24px -12px rgba(17,15,49,.28)}
.fx-note.n1{background:#ffef99;left:0;top:6px;rotate:-4deg}.fx-note.n2{background:#d6ebff;right:0;top:0;rotate:5deg}.fx-note.n3{background:#ffd9d1;right:6px;bottom:54px;rotate:-3deg}
.fx-pill{position:absolute;left:34px;bottom:8px;background:var(--gold);color:#110f31;font-weight:700;font-size:14.5px;padding:9px 16px;border-radius:999px;box-shadow:0 12px 24px -12px rgba(17,15,49,.28)}
/* 4 pupmanager */
.fx-pm img{display:block;width:100%;height:auto}
.fx-cap{position:absolute;left:0;bottom:6%;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 20px 40px -18px rgba(17,15,49,.32);display:grid;gap:1px;max-width:230px}
.fx-cap small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9a7400}.fx-cap b{font-size:18px}.fx-cap span{font-size:13px;color:var(--body)}

/* animation: plays once when the illustration scrolls into view */
@media(prefers-reduced-motion:no-preference){
 .fxjs .fx .a{opacity:0;translate:0 16px;transition:opacity .55s ease calc(var(--i,0)*.32s),translate .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.32s)}
 .fxjs .fx .fx-note.a{translate:0 -24px}
 .fxjs .fx .fx-pop.a,.fxjs .fx .fx-badge.a,.fxjs .fx .fx-pill.a,.fxjs .fx .fx-cap.a{translate:0 0;scale:.85;transition:opacity .45s ease calc(var(--i,0)*.32s),scale .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0)*.32s)}
 .fxjs .fx.play .a{opacity:1;translate:0 0;scale:1}
 .fxjs .fx.play .fx-wave i{animation:fxw 1s ease-in-out 3 alternate}
 .fxjs .fx.play .fx-wave i:nth-child(odd){animation-delay:.15s}
}
@keyframes fxw{to{transform:scaleY(.4)}}
@media(max-width:560px){.fx-steps{grid-template-columns:repeat(2,1fr);row-gap:22px}.fx-steps li:nth-child(2)::after{display:none}.fx-q{font-size:13.5px}.fx-wave{display:none}.fx-note{width:120px;font-size:12.5px}.fx-cap{max-width:190px}}

/* quote with Richard & Aljke standing on the bottom edge of the band */
.q-sec{padding-bottom:0!important}
.wrap.quote.q2{max-width:1100px;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:end;text-align:left}
.q-pic{margin:0;align-self:end}
.q-pic img{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
.q-txt{padding-bottom:clamp(80px,9vw,120px)}
.q2 blockquote{font-size:clamp(22px,2.4vw,30px)}
@media(max-width:800px){.wrap.quote.q2{grid-template-columns:1fr;gap:28px;text-align:center}.q-pic{order:2}.q-pic img{max-width:280px}.q-txt{padding-bottom:0}}

/* connect your systems: app nodes joined to a hub, data dots flow along the lines once */
.fx-connect{aspect-ratio:520/300;max-width:560px;width:100%;margin:0 auto}
.fx-lines{position:absolute;inset:0;width:100%;height:100%}
.fx-lines path{fill:none;stroke:#110f31;stroke-opacity:.22;stroke-width:2;stroke-dasharray:5 7}
.fx-node{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:10px 14px;font-size:14.5px;font-weight:600;box-shadow:0 12px 26px -14px rgba(17,15,49,.35);white-space:nowrap}
.fx-node i{width:10px;height:10px;border-radius:50%}
.fx-hub{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;padding:4px;background:conic-gradient(#ffc700,#ff7a59,#7c5cff,#2fa3ff,#ffc700);box-shadow:0 16px 30px -14px rgba(17,15,49,.45)}
.fx-hub svg{display:block;width:100%;height:100%;border-radius:50%;background:#fff;padding:14px 11px;stroke:none}
.fx-connect .fx-badge{position:absolute;left:50%;bottom:-6%;translate:-50% 0;margin:0;white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
 .fxjs .fx-connect .fx-badge.a{translate:-50% 0}
 .fxjs .fx-connect.play .fx-lines path{animation:fxflow 1.2s linear .6s 4}
}
@keyframes fxflow{to{stroke-dashoffset:-24}}
@media(max-width:560px){.fx-node{font-size:12px;padding:7px 10px}.fx-hub{width:58px;height:58px;margin:-29px 0 0 -29px}}

/* the payoff: home for tea */
.h-family{position:relative;margin:28px 0 0;border-radius:24px;overflow:hidden;aspect-ratio:2/1;box-shadow:0 24px 50px -30px rgba(17,15,49,.4)}
.h-family img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.h-family figcaption{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:10px 20px 10px 10px;font-weight:600;font-size:16px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.h-family figcaption b{background:#1f9d55;color:#fff;border-radius:999px;padding:6px 12px;font-size:14px}
@media(max-width:700px){.h-family{aspect-ratio:4/3}.h-family figcaption{left:12px;right:12px;bottom:12px;font-size:14px}}

/* why AI, and why now */
#why{padding-block:clamp(88px,10vw,130px)}
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,7vw,100px);align-items:start}
.why>*{min-width:0}
.why-head{position:sticky;top:110px}
.why-head .eyebrow,.why-head .h2,.why-head .lead{text-align:left;margin-left:0}
.why-head .h2{max-width:16ch}
.why-head .btn{margin-top:26px}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.why-list li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-top:1px solid #e6e8ee}
.why-list li:first-child{border-top:0;padding-top:4px}
.why-ic{width:48px;height:48px;border-radius:50%;background:#fff6d4;display:grid;place-items:center}
.why-ic svg{width:24px;height:24px;fill:none;stroke:#110f31;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-list h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:2px 0 6px}
.why-list p{margin:0;color:var(--body);font-size:16px;line-height:1.6}
@media(max-width:900px){.why{grid-template-columns:1fr;gap:28px}.why-head{position:static}}

/* before/after banner: late night at the laptop fades into home with the kids */
.h-ba{position:relative;margin:0 0 56px;aspect-ratio:21/8;border-radius:28px;overflow:hidden;background:#0b0a24;box-shadow:0 30px 60px -36px rgba(17,15,49,.45)}
.h-ba-l,.h-ba-r{position:absolute;top:0;bottom:0;background-size:cover;background-repeat:no-repeat}
.h-ba-r{left:0;right:0;background-position:right 30%}
.h-ba-l{left:0;width:62%;background-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 100%);mask-image:linear-gradient(90deg,#000 50%,transparent 100%)}
.h-ba-t{position:absolute;bottom:22px;display:flex;align-items:center;gap:10px;border-radius:999px;padding:8px 16px 8px 8px;font-weight:600;font-size:15px;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.h-ba-t b{border-radius:999px;padding:5px 11px;font-size:13.5px}
.h-ba-t.l{left:22px;background:rgba(11,10,36,.8);color:#fff}.h-ba-t.l b{background:#c94a3a;color:#fff}
.h-ba-t.r{right:22px;background:#fff;color:var(--ink)}.h-ba-t.r b{background:#1f9d55;color:#fff}
@media(max-width:700px){.h-ba{aspect-ratio:4/3;margin-bottom:36px}.h-ba-l{width:66%}.h-ba-t{font-size:12.5px;bottom:12px;padding:6px 12px 6px 6px}.h-ba-t.l{left:10px}.h-ba-t.r{right:10px}.h-ba-t b{font-size:12px;padding:4px 8px}}
@media(max-width:420px){.h-ba-t{flex-direction:column;align-items:flex-start;gap:4px;border-radius:14px}}

/* single blended image version */
.h-ba{aspect-ratio:2336/900}
.h-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:700px){.h-ba{aspect-ratio:2/1}}
@media(max-width:520px){.h-ba-t{background:none!important;box-shadow:none;padding:0;bottom:10px}.h-ba-t>span{display:none}.h-ba-t b{font-size:12px;padding:5px 10px;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}}

/* before/after cards with their photo fading to white downwards */
.h-tl.h-tl-photo{position:relative;overflow:hidden;padding-top:250px}
.h-tl-pic{position:absolute;left:0;right:0;top:0;height:300px;background-size:cover;background-position:center 30%;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);pointer-events:none}
.h-tl-photo>*:not(.h-tl-pic){position:relative}
@media(max-width:700px){.h-tl.h-tl-photo{padding-top:190px}.h-tl-pic{height:250px}}
/* softer, calmer photos and a longer, smoother fade */
.h-tl-pic{filter:saturate(.55) brightness(1.06) contrast(.88);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.25) 65%,transparent 92%)!important;mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.25) 65%,transparent 92%)!important;background-position:center 35%}
/* no fade: a clean photo across the top of each card */
.h-tl-pic{-webkit-mask-image:none!important;mask-image:none!important;height:220px}
.h-tl.h-tl-photo{padding-top:248px}
@media(max-width:700px){.h-tl-pic{height:190px}.h-tl.h-tl-photo{padding-top:214px}}
.h-tl-pic[style*="family-mount"]{background-position:center 62%!important}
.h-tl-pic[style*="family-mount"]{background-size:125% auto!important;background-position:50% 72%!important}

/* hero illustration builds itself once on load */
@media(prefers-reduced-motion:no-preference){
 .h-art{animation:h-rise .5s ease-out both}
 .h-stage .h-laptop{animation:hx-up .7s cubic-bezier(.2,.8,.2,1) .15s both}
 .h-stage .h-app-top{animation:hx-fade .4s ease .55s both}
 .h-stage .h-waiting{animation:hx-fade .4s ease .7s both}
 .h-stage .h-row{animation:hx-left .5s cubic-bezier(.2,.8,.2,1) both}
 .h-stage .h-waiting+.h-row{animation-delay:.9s}.h-stage .h-waiting+.h-row+.h-row{animation-delay:1.15s}.h-stage .h-waiting+.h-row+.h-row+.h-row{animation-delay:1.4s}
 .h-stage .h-mobile{animation:hx-right .7s cubic-bezier(.2,.8,.2,1) 1.6s both}
 .h-stage .h-msg,.h-stage .h-booked{animation:hx-pop .4s cubic-bezier(.3,1.5,.5,1) both}
 .h-stage .h-chat>*:nth-child(1){animation-delay:2.1s}.h-stage .h-chat>*:nth-child(2){animation-delay:2.8s}.h-stage .h-chat>*:nth-child(3){animation-delay:3.4s}.h-stage .h-chat>*:nth-child(4){animation-delay:3.9s}
 .h-stage .h-bubble{animation:hx-pop .5s cubic-bezier(.3,1.5,.5,1) both}
 .h-stage .ph-tradie{animation-delay:1.9s}.h-stage .ph-office{animation-delay:2.3s}
 .h-stage .h-card{animation:hx-pop .5s cubic-bezier(.3,1.5,.5,1) both}
 .h-stage .c-inv{animation-delay:2.6s}.h-stage .c-saved{animation-delay:3.1s}.h-stage .c-spray{animation-delay:4.3s}
 .h-stage .h-links{animation:hx-fade .6s ease 1.8s both}
 .h-stage .h-links path{animation:fxflow 1.2s linear 2s 3}
 .h-btn.sent{background:#1f9d55!important;color:#fff!important;border-color:#1f9d55!important;animation:hx-pop .35s cubic-bezier(.3,1.5,.5,1)}
 .h-row.done{opacity:.55;transition:opacity .6s}
}
@keyframes hx-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hx-left{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes hx-right{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes hx-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes hx-fade{from{opacity:0}to{opacity:1}}

/* living hero: after the intro, cards take turns lighting up (like the Friendly Manager hero) */
.h-stage.live .h-card,.h-stage.live .h-bubble{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease}
.h-stage.live .h-card{opacity:.55}
.h-stage.live .h-card.on{opacity:1;transform:scale(1.05);box-shadow:0 18px 40px -12px rgba(0,0,0,.55),0 0 0 2px rgba(255,199,0,.55)}
.h-card .swap{transition:opacity .35s ease}
.h-card .swap.out{opacity:0}
.h-row{transition:opacity .5s ease}
.h-row.fresh{animation:hx-left .5s cubic-bezier(.2,.8,.2,1) both}