/* =========================================================
   Hire a Wifey — We Take Care of Home
   Hervey Bay, QLD

   Palette sampled from the supplied brand assets:
   logo pink #DF718A, uniform piping #E23F80, logo ink #1E1A1B.
   Type system carried over from the Marie Larsson build:
   Montserrat + Sacramento + Bodoni Moda, pill buttons,
   rounded cards, photo sections with scrims.
   ========================================================= */

:root{
  --pink:#DF718A;          /* brand pink, straight off the logo */
  --pink-btn:#EFA9B8;      /* soft fill */
  --pink-deep:#C0395F;     /* strong / hover / pink text on light */
  --pink-hot:#E23F80;      /* uniform piping — the lead accent after dark */
  --pink-cta:#D8306F;      /* same pink, darkened just enough for white button text */
  --night:#141112;         /* page ground for the dark spine */
  --night-2:#1C1819;       /* raised cards on night */
  --night-line:rgba(242,236,228,.14);
  --blush:#FBEEF0;         /* light sections */
  --blush-2:#F5DCE1;       /* lines */
  --white:#FFFFFF;
  --ink:#1E1A1B;           /* text */
  --ink-soft:#4E4649;
  --grey:#8B8286;
  --cream:#F2ECE4;
  --dark:#2C2B28;
  --dark-2:#1E1A1B;
  --line:rgba(30,26,27,.12);
  --line-soft:rgba(30,26,27,.08);

  --font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-script:"Sacramento",cursive;
  --font-mast:"Bodoni Moda",Georgia,serif;

  --wrap:1200px;
  --ease:cubic-bezier(.33,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:96px}
body{
  font-family:var(--font);color:var(--cream);background:var(--night);max-width:100%;
  line-height:1.75;font-size:15px;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
:focus-visible{outline:2px solid var(--pink-deep);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--ink);
  padding:.9rem 1.4rem;border-radius:0 0 12px 0;font-weight:700;font-size:.8rem}
.skip-link:focus{left:0}

/* ---------- shared type ---------- */
.script{font-family:var(--font-script);color:var(--pink);line-height:1;font-weight:400}
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
  color:var(--pink-deep);display:inline-block;
}
.section-title{
  font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.18;
}
.section-title .pk{color:var(--pink-deep)}
.section-head{text-align:center;max-width:700px;margin:0 auto clamp(1.8rem,3vw,2.6rem)}
.section-head .script{font-size:clamp(2.4rem,5vw,3.8rem);display:block;margin-bottom:-.35rem}
.section-sub{color:var(--ink-soft);max-width:60ch;margin:1.1rem auto 0;font-weight:400}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-align:center;
  font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1.15em 2.1em;border:1px solid currentColor;border-radius:100px;cursor:pointer;
  background:transparent;transition:.35s var(--ease);
}
.btn-pink{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.btn-pink:hover{background:var(--pink-deep);border-color:var(--pink-deep);color:var(--white)}
.btn-ink{color:var(--ink);background:rgba(255,255,255,.85);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--white)}
.btn-cream{color:var(--cream);border-color:rgba(239,232,220,.6)}
.btn-cream:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-block{width:100%}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:.7rem;line-height:0}
.logo .logo-mark{height:58px;width:auto;transition:height .35s var(--ease)}
.site-header.scrolled .logo .logo-mark{height:44px}

/* ================= HEADER ================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;padding:1rem 0;
  background:linear-gradient(rgba(15,13,14,.93),rgba(15,13,14,.93)),image-set(url(../images/dark-texture.webp) type("image/webp"), url(../images/dark-texture.jpg) type("image/jpeg")) center 45%/cover;
  transition:padding .35s var(--ease),box-shadow .35s var(--ease);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-header.scrolled{
  background:linear-gradient(rgba(12,10,11,.97),rgba(12,10,11,.97)),image-set(url(../images/dark-texture.webp) type("image/webp"), url(../images/dark-texture.jpg) type("image/jpeg")) center 45%/cover;
  padding:.6rem 0;box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
}
.nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:nowrap;white-space:nowrap}
.nav a{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.9);transition:color .25s}
.nav a:not(.nav-cta):hover{color:var(--pink)}
.nav-cta{background:var(--pink);border:1px solid var(--pink);color:var(--ink)!important;padding:.9em 1.5em;border-radius:100px;transition:.35s var(--ease);font-weight:800}
.nav-cta:hover{background:var(--pink-cta);border-color:var(--pink-cta);color:#fff!important}
.hamburger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:2px;background:var(--white);transition:.3s var(--ease)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* the open panel is white, so the close cross has to flip to ink */
.hamburger[aria-expanded="true"] span{background:var(--ink)}
/* keep the floating buttons out of the way while the menu is open */
body.nav-open .call-fab,body.nav-open .mobile-cta{opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.nav-scrim{position:fixed;inset:0;background:rgba(20,18,17,.5);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:55}
.nav-scrim.show{opacity:1;pointer-events:auto}

/* ================= HERO ================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;text-align:center;
  color:var(--cream);background:var(--night);padding:6.4rem 0 2.4rem;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* soft white halo behind the copy column keeps the headline crisp
   while the edges of the photo still read as a photo */
.hero-bg img{filter:grayscale(.3) contrast(1.04) brightness(.58)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(66% 54% at 50% 40%,rgba(20,17,18,.46),rgba(20,17,18,.78) 70%,rgba(20,17,18,.95)),
  linear-gradient(180deg,rgba(20,17,18,.86),rgba(20,17,18,.46) 34%,rgba(20,17,18,.95))}
.hero-inner{position:relative;z-index:2;max-width:880px;margin-inline:auto}

.hero-title{display:block;margin-bottom:.2rem}
.h1-lead{
  display:block;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:rgba(242,236,228,.72);
  font-size:clamp(.68rem,1.4vw,.88rem);margin-bottom:.7rem;
}
.h1-brand{
  display:block;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.005em;
  color:var(--white);font-size:clamp(2.5rem,7.8vw,5.6rem);line-height:.96;
  text-shadow:0 0 46px rgba(226,63,128,.5), 0 4px 30px rgba(0,0,0,.6);
}
.h1-seo{
  display:block;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--pink-hot);
  font-size:clamp(.6rem,1.2vw,.76rem);margin:.55rem 0 0;line-height:1.55;
}
/* --- the promise, set vertically down the hero's side margins ---------
   .hero-inner caps at 880px inside a 1200px wrap, so on a wide screen there
   are 150-280px of dead margin either side. The line runs there instead of
   under the copy, and the centred copy is dropped at the same breakpoint so
   it reads once, not twice. The left rail keeps its text for screen readers;
   the right is decoration. Below 1180px there is no room, so the rails go and
   the centred line comes back. */
.hero-rail{display:none}
@media(min-width:1180px){
  .hero-rail{
    display:block;position:absolute;top:50%;z-index:2;
    writing-mode:vertical-rl;white-space:nowrap;pointer-events:none;
    font-family:var(--font-script);color:var(--pink);
    font-size:clamp(2.1rem,3vw,3.3rem);line-height:1;
    opacity:.78;text-shadow:0 2px 22px rgba(0,0,0,.8);
  }
  /* a hairline above and below turns a floating word into a set rule */
  .hero-rail::before,.hero-rail::after{
    content:"";display:block;width:1px;height:clamp(36px,6vw,84px);
    margin-inline:auto;background:linear-gradient(var(--pink),transparent);
    opacity:.5;
  }
  .hero-rail::before{margin-bottom:.9rem;transform:scaleY(-1)}
  .hero-rail::after{margin-top:.9rem}
  .hero-rail-l{left:clamp(2rem,4vw,4.5rem);transform:translateY(-50%) rotate(180deg)}
  .hero-rail-r{right:clamp(2rem,4vw,4.5rem);transform:translateY(-50%)}
  /* it is in the margins now — the centred copy would be a second reading */
  .hero-inner .hero-script{display:none}
}
.hero-script{font-family:var(--font-script);color:var(--pink);font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1;margin:.25rem 0 0}
/* the wink: small, once, and never repeated */
.hero-wink{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:rgba(242,236,228,.6)}
.hero-wink svg{width:13px;height:13px;fill:var(--pink-hot)}
.hero-kicker{margin:0;color:var(--pink-hot)}
.hero-lead{font-size:1rem;font-weight:400;color:rgba(242,236,228,.84);max-width:54ch;margin:0 auto}

/* the value proposition — §25's core message, sitting where the promise box was */
.hero-value{margin:1rem auto .95rem;max-width:760px}
.hero-value .hero-kicker{margin-bottom:.7rem}
.hero-value-line{
  font-family:var(--font);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.02;color:var(--cream);
  font-size:clamp(1.7rem,4.4vw,3.1rem);
  text-shadow:0 4px 26px rgba(0,0,0,.6);
}
.hero-value-line .pk{color:var(--pink-hot)}

/* the film sits between the value line and the pills */
.hero-film{margin:.9rem auto 0;width:min(820px,100%)}
.hero-film .film{
  width:100%;display:block;border-radius:16px;background:#000;
  border:1px solid rgba(242,236,228,.24);aspect-ratio:16/9;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.9);
}
.hero-film .film{cursor:pointer}
.hero-film .film:focus-visible{outline:3px solid var(--pink-hot);outline-offset:3px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* a taller film costs vertical room, so on short desktop viewports the copy
   around it tightens rather than letting the CTAs fall below the fold */
@media (min-width:861px) and (max-height:1100px){
  /* the sticky header sits ~90px deep, so the lead line has to clear it */
  .hero{padding:6rem 0 1.8rem}
  .hero-value{margin:.6rem auto .6rem}
  .hero-value-line{font-size:clamp(1.7rem,3.4vw,2.4rem)}
  .hero-film{margin-top:.6rem;width:min(700px,100%)}
  .hero-script{font-size:2.05rem}
}

/* trust strip under the hero CTAs */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:1.3rem;list-style:none}
.trust li{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(242,236,228,.07);border:1px solid var(--night-line);border-radius:100px;
  padding:.48rem .95rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(242,236,228,.86);
}
.trust li svg{width:13px;height:13px;fill:var(--pink-hot);flex:none}


/* ================= TRUST BAR ================= */
/* §4's eight trust points, lifted out of the hero so the headline and the
   film can breathe. First thing under the fold. */
.trustbar{background:var(--night-2);padding:clamp(1.4rem,3vw,2rem) 0;border-block:1px solid var(--night-line)}
.trustbar .trust{margin-top:0}
.trustbar .trust li{background:transparent;border-color:rgba(242,236,228,.2)}
/* ================= SECTION BREAK ================= */
.section-break{position:relative;height:clamp(84px,11vw,130px);overflow:hidden;
  background:linear-gradient(rgba(26,23,22,.86),rgba(26,23,22,.86)),image-set(url(../images/dark-texture.webp) type("image/webp"), url(../images/dark-texture.jpg) type("image/jpeg")) center 42%/cover;
  display:flex;align-items:center;justify-content:center}
.sb-ornament{display:flex;align-items:center;gap:1.1rem}
.sb-line{width:clamp(40px,10vw,90px);height:1px;background:rgba(239,232,220,.55)}
.sb-dot{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(223,113,138,.25)}

/* ================= 5. INTRO ================= */
.intro{background:var(--white);padding:clamp(3.4rem,7vw,5.6rem) 0}
.intro-body{max-width:70ch;margin:0 auto;text-align:center}
.intro-body p{color:var(--ink-soft);margin-bottom:1.2rem}
.intro-turn{font-size:1.15rem;color:var(--ink)!important;font-weight:500}
.intro-turn strong{color:var(--pink-deep);font-weight:700}
.intro-actions{margin-top:1.6rem}

/* ================= 6. FEATURE ================= */
.feature{position:relative;background:var(--dark);color:var(--cream);padding:clamp(3.6rem,8vw,6.5rem) 0;overflow:hidden}
.feature-bg{position:absolute;inset:0;z-index:0}
.feature-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:grayscale(.3) brightness(.5) contrast(1.05)}
.feature-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,39,36,.78),rgba(40,39,36,.68) 45%,rgba(40,39,36,.9))}
.feature-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.feature-grid>*{min-width:0}
.feature-copy .eyebrow{margin-bottom:1.1rem;color:var(--pink)}
.feature-copy h2{font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:500;text-transform:uppercase;letter-spacing:.05em;line-height:1.16;margin-bottom:1.3rem;color:var(--cream);max-width:18ch}
.feature-copy h2 .pk{color:var(--pink)}
.feature-copy p{color:rgba(239,232,220,.86);font-weight:400;max-width:50ch;margin-bottom:1.2rem}
.feature-offer{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(239,232,220,.34);backdrop-filter:blur(4px);border-radius:100px;
  padding:.75rem 1.15rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#EDA0B0;margin-bottom:1.6rem}
.feature-media{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:center}
.feature-media>*{min-width:0}
.feature-media img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.feature-media .fm-1{aspect-ratio:3/4;margin-top:3rem;box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
.feature-media .fm-2{aspect-ratio:3/4;margin-bottom:3rem;box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}

/* ================= 7. GOOD HANDS ================= */
.goodhands{background:var(--blush);padding:clamp(3.4rem,7vw,5.6rem) 0}
.goodhands-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.4rem,6vw,4.5rem);align-items:center}
.goodhands-grid>*{min-width:0}
.goodhands .eyebrow{margin-bottom:1rem}
.goodhands .section-title{margin-bottom:1.2rem;max-width:16ch}
.goodhands p{color:var(--ink-soft);max-width:52ch;margin-bottom:1.6rem}
.badge-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.8rem}
.badge-grid>*{min-width:0}
.badge-grid li{
  display:flex;align-items:center;gap:.75rem;background:var(--white);border:1px solid var(--blush-2);
  border-radius:14px;padding:.85rem 1rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink);line-height:1.4;
}
.badge-ic{width:34px;height:34px;border-radius:50%;background:var(--blush);display:grid;place-items:center;flex:none}
.badge-ic svg{width:18px;height:18px;fill:var(--pink-deep)}
.goodhands-media{background:var(--white);border:1px solid var(--blush-2);border-radius:20px;padding:1.2rem;
  box-shadow:0 36px 60px -40px rgba(30,26,27,.4)}
.goodhands-media img{border-radius:12px}
.goodhands-media figcaption{font-size:.76rem;color:var(--ink-soft);text-align:center;margin-top:.9rem;line-height:1.6}

/* ================= 8. SERVICES ================= */
.services{background:var(--white);padding:clamp(3.4rem,7vw,5.6rem) 0}
/* two columns, not four: an open card runs to 20+ chips, and a narrow column
   turns that into a tower with three empty columns beside it */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;align-items:start}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr}}
.svc-grid>*{min-width:0}
.svc{
  background:var(--white);border:1px solid var(--blush-2);border-radius:18px;
  padding:1.25rem 1.35rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.svc:hover{box-shadow:0 26px 46px -30px rgba(30,26,27,.42);border-color:var(--pink)}
.svc:not([open]):hover{transform:translateY(-4px)}
.svc-ic{width:44px;height:44px;border-radius:50%;background:var(--blush);display:grid;place-items:center;flex:none}
.svc-ic svg{width:22px;height:22px;fill:var(--pink-deep)}
.svc h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink);line-height:1.4;margin:0}

/* --- each service is a dropdown ---------------------------------------
   Native <details> so it opens with no JS, carries the right semantics for
   a screen reader and stays keyboard-operable on its own. */
.svc-head{
  display:flex;align-items:center;gap:.85rem;cursor:pointer;
  list-style:none;                       /* Firefox marker */
}
.svc-head::-webkit-details-marker{display:none}
.svc-head:focus-visible{outline:3px solid var(--pink-hot);outline-offset:4px;border-radius:12px}
.svc-chev{flex:none;margin-left:auto;line-height:0;transition:transform .35s var(--ease)}
.svc-chev svg{width:18px;height:18px;fill:var(--pink-deep)}
.svc[open] .svc-chev{transform:rotate(180deg)}
.svc-body{padding-top:1rem}

/* animate the open/close where the browser can interpolate to auto;
   everywhere else it simply snaps, which is the correct fallback */
@supports (interpolate-size: allow-keywords){
  .svc{interpolate-size:allow-keywords}
  .svc::details-content{
    block-size:0;overflow:hidden;content-visibility:hidden;
    transition:block-size .38s var(--ease),content-visibility .38s allow-discrete;
  }
  .svc[open]::details-content{block-size:auto;content-visibility:visible}
}
@media(prefers-reduced-motion:reduce){
  .svc-chev{transition:none}
  .svc::details-content{transition:none}
}
.svc p{font-size:.85rem;color:var(--ink-soft);font-weight:400;line-height:1.7}
/* the brief's task lists run to 20+ items — chips stay scannable where prose doesn't */
.tasks{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.tasks li{
  background:var(--blush);border:1px solid var(--blush-2);border-radius:100px;
  padding:.32rem .7rem;font-size:.7rem;font-weight:600;color:var(--ink-soft);line-height:1.5;
}
.svc:hover .tasks li{border-color:var(--blush-2)}
.svc-ask{background:var(--blush);border-color:var(--pink)}
.svc-ask .svc-ic{background:var(--white)}
.svc-ask strong{color:var(--pink-deep)}
.svc-actions{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:2rem}

/* ================= 9. BUILD YOUR VISIT ================= */
.build{position:relative;color:var(--cream);background:#3E3D38;padding:clamp(3.6rem,8vw,6.5rem) 0;overflow:hidden}
.build-bg{position:absolute;inset:0;z-index:0}
.build-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:grayscale(.3) brightness(.44) contrast(1.05)}
.build-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,39,36,.8),rgba(40,39,36,.72) 45%,rgba(40,39,36,.92))}
.build-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.build-grid>*{min-width:0}
.build .eyebrow{color:var(--pink);margin-bottom:.9rem}
.build-title{font-weight:300;letter-spacing:.02em;color:var(--cream);font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:1.2rem}
.build-copy p{color:rgba(239,232,220,.85);max-width:52ch;margin-bottom:1.1rem}
.build-actions{margin-top:1.4rem}

.prices-mast{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em 1.1rem;margin-bottom:.6rem}
.prices-word{
  font-family:var(--font-mast);font-weight:400;text-transform:uppercase;color:var(--pink);
  font-size:clamp(3.4rem,9vw,7rem);line-height:.86;letter-spacing:-.03em;
}
.prices-sub{font-family:var(--font-mast);font-style:italic;font-weight:400;color:var(--pink);font-size:clamp(1.15rem,2.4vw,1.85rem)}

/* phone frame holding the example to-do list */
.prices-reel{display:flex;flex-direction:column;align-items:center;gap:1rem}
.reel-frame{
  width:min(320px,100%);aspect-ratio:9/16;border-radius:28px;overflow:hidden;
  border:1px solid rgba(239,232,220,.28);background:var(--blush);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 8px rgba(62,61,56,.55);
  display:flex;flex-direction:column;
}
.todo{background:var(--blush);height:100%;display:flex;flex-direction:column;padding:2.2rem 1.6rem;color:var(--ink)}
.todo-kicker{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--pink-deep)}
.todo-title{font-family:var(--font-script);font-size:2.7rem;line-height:1;color:var(--ink);margin:.2rem 0 1.7rem}
.todo-list{list-style:none;display:grid;gap:1.05rem}
.todo-list li{position:relative;padding-left:1.95rem;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.5}
/* ticked checkbox: rounded box + a real check drawn from two borders */
.todo-list li::before{
  content:"";position:absolute;left:0;top:.08em;width:19px;height:19px;
  border-radius:5px;border:2px solid var(--pink);
}
.todo-list li::after{
  content:"";position:absolute;left:5px;top:calc(.08em + 5px);width:9px;height:5px;
  border-left:2.5px solid var(--pink-deep);border-bottom:2.5px solid var(--pink-deep);
  transform:rotate(-45deg);
}
.todo-foot{margin-top:auto;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--blush-2);padding-top:.9rem}
.todo-foot b{color:var(--pink-deep)}
.reel-caption{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pink);font-weight:700;text-align:center}

/* ================= 10. WHO WE HELP ================= */
.audience{background:var(--blush);padding:clamp(3.4rem,7vw,5.6rem) 0}
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.aud-grid>*{min-width:0}
.aud{background:var(--white);border:1px solid var(--blush-2);border-radius:18px;padding:1.6rem 1.5rem}
.aud h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--pink-deep);margin-bottom:.6rem}
.aud p{font-size:.88rem;color:var(--ink-soft);line-height:1.7}

/* ================= 11. REGULAR SERVICE ================= */
.regular{background:var(--white);padding:clamp(3.4rem,7vw,5.6rem) 0 0}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.trio-grid>*{min-width:0}
.trio-item{text-align:center;padding:clamp(2.6rem,5vw,4rem) 2rem;border-right:1px solid var(--line-soft)}
.trio-item:last-child{border-right:0}
.trio-item .script{font-size:clamp(2.4rem,4.5vw,3.2rem);display:block;margin-bottom:.2rem}
.trio-item h3{font-size:1.15rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.trio-item .sub{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:1.2rem}
.trio-item p{color:var(--ink-soft);font-weight:400;max-width:32ch;margin:0 auto}
.trio-item.active{background:var(--blush);border-right:0}
.regular .svc-actions{margin:2.2rem 0 0;padding-bottom:clamp(3.4rem,7vw,5.6rem)}

/* ================= 12. WHY CHOOSE ================= */
.why{background:var(--blush);padding:clamp(3.4rem,7vw,5.6rem) 0}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.2rem,6vw,4.5rem);align-items:center}
.why-grid>*{min-width:0}
.why .section-title{margin:.9rem 0 1rem}
.why p{color:var(--ink-soft);max-width:44ch;margin-bottom:1.6rem}
.why-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.4rem}
.why-list>*{min-width:0}
.why-list li{position:relative;padding-left:1.6rem;font-size:.88rem;font-weight:500;color:var(--ink);line-height:1.6}
.why-list li::after{
  content:"";position:absolute;left:0;top:.42em;width:10px;height:6px;
  border-left:2.5px solid var(--pink-deep);border-bottom:2.5px solid var(--pink-deep);
  transform:rotate(-45deg);
}

/* ================= 13/14. NDIS + DVA ================= */
.funding{background:var(--white);padding:clamp(3.4rem,7vw,5.6rem) 0}
.funding-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.funding-grid>*{min-width:0}
.fund-card{background:var(--blush);border:1px solid var(--blush-2);border-radius:20px;padding:clamp(1.6rem,3.5vw,2.4rem)}
.fund-card h3{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--pink-deep);margin-bottom:1rem;line-height:1.5}
.fund-card p{font-size:.9rem;color:var(--ink-soft);margin-bottom:1rem;line-height:1.7}
.fund-card .btn{margin-top:.4rem}

/* ================= 15. SERVICE AREA ================= */
.area{position:relative;padding:clamp(3.2rem,7vw,5rem) 0;color:var(--cream);background:var(--dark-2);overflow:hidden;text-align:center}
.area-bg{position:absolute;inset:0;z-index:0}
.area-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.area-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,27,.74),rgba(30,26,27,.62) 50%,rgba(30,26,27,.82))}
.area .wrap{position:relative;z-index:2}
/* copy on the left, the reel beside it — stacked, the suburbs list and a
   4:5 window together run past two screens */
.area-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.area-grid>*{min-width:0}
.area .area-copy{text-align:left}
.area .area-copy .suburbs{justify-content:flex-start;margin-left:0}
.area .area-copy p{margin-left:0;margin-right:0}
.area .area-copy .area-actions{justify-content:flex-start}
.area-reel{display:flex;flex-direction:column}
@media(max-width:860px){
  .area-grid{grid-template-columns:1fr}
  .area .area-copy{text-align:center}
  .area .area-copy .suburbs{justify-content:center;margin-inline:auto}
  .area .area-copy p{margin-inline:auto}
  .area .area-copy .area-actions{justify-content:center}
}
.area .script{font-size:clamp(2.2rem,5vw,3.4rem);display:block;margin-bottom:-.2rem;color:var(--pink)}
.area h2{font-weight:500;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--cream);margin-bottom:1.1rem}
.area p{color:rgba(239,232,220,.88);max-width:62ch;margin:0 auto 1.4rem}
.suburbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;list-style:none;max-width:800px;margin:0 auto}
.suburbs li{border:1px solid rgba(239,232,220,.34);border-radius:100px;padding:.42rem .95rem;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(239,232,220,.92)}
.area-note{font-size:.85rem;margin-top:1.4rem!important;color:rgba(239,232,220,.75)!important}
.area-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}

/* ================= 16. HOW IT WORKS ================= */
.how{background:var(--white);padding:clamp(3.4rem,7vw,5.6rem) 0}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.steps>*{min-width:0}
.steps li{text-align:center;padding:1.4rem 1rem;border-radius:18px;background:var(--blush);border:1px solid var(--blush-2)}
.step-n{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto .9rem;border-radius:50%;
  background:var(--pink);color:var(--ink);font-family:var(--font-mast);font-size:1.35rem;font-weight:600;
}
.steps h3{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:.5rem;color:var(--ink);line-height:1.5}
.steps p{font-size:.84rem;color:var(--ink-soft);line-height:1.65}

/* ================= SLIDER ================= */
.gallery{background:var(--blush);padding:clamp(3rem,6vw,4.6rem) 0}
.slider{--per:3;--gap:1.2rem;position:relative;padding:0 clamp(2.6rem,5vw,3.6rem)}
.slider-viewport{overflow:hidden;border-radius:18px}
.slider-track{display:flex;gap:var(--gap);list-style:none;margin:0;padding:0;
  transition:transform .75s cubic-bezier(.45,.05,.25,1);will-change:transform;touch-action:pan-y}
.slider.dragging .slider-track{transition:none}
.slide{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));border-radius:16px;overflow:hidden;
  position:relative;box-shadow:0 20px 44px -30px rgba(30,26,27,.5)}
.slide img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;user-select:none;transition:transform .8s var(--ease)}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .85rem;
  background:linear-gradient(180deg,rgba(30,26,27,0),rgba(30,26,27,.8));
  color:#fff;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;text-align:center}
.slide:hover img{transform:scale(1.04)}
.slider-btn{position:absolute;top:calc(50% - 22px);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--blush-2);background:rgba(255,255,255,.94);color:var(--pink-deep);
  font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -14px rgba(30,26,27,.4);transition:.3s var(--ease)}
.slider-btn:hover{background:var(--pink-deep);color:var(--white);border-color:var(--pink-deep)}
.slider-prev{left:.2rem} .slider-next{right:.2rem}
.slider-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}
.slider-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--blush-2);cursor:pointer;transition:.3s var(--ease)}
.slider-dots button[aria-selected="true"]{background:var(--pink-deep);width:26px;border-radius:5px}

/* ================= 17. TIME BACK ================= */
.timeback{position:relative;padding:clamp(3.4rem,7vw,5.6rem) 0;color:var(--ink);background:var(--blush);overflow:hidden;text-align:center}
.timeback-bg{position:absolute;inset:0;z-index:0}
.timeback-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.timeback-bg::after{content:"";position:absolute;inset:0;background:rgba(251,238,240,.88)}
.timeback .wrap{position:relative;z-index:2}
.timeback .script{font-size:clamp(2.2rem,5vw,3.4rem);display:block;margin-bottom:-.25rem;color:var(--pink-deep)}
.timeback h2{font-weight:500;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--ink);margin-bottom:1.6rem}
.timeback-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:820px;margin:0 auto 1.8rem}
.timeback-list li{background:rgba(255,255,255,.86);border:1px solid var(--blush-2);border-radius:100px;
  padding:.55rem 1.1rem;font-size:.76rem;font-weight:600;color:var(--ink)}
.timeback-line{font-size:1.05rem;color:var(--ink-soft);margin-bottom:.6rem}
.timeback-tag{font-family:var(--font-script);font-size:clamp(2rem,4.4vw,3rem);color:var(--pink-deep);line-height:1;margin-bottom:1.6rem}

/* ================= 18. REVIEWS ================= */
.quotes{background:var(--white);padding:clamp(3.4rem,7vw,5.6rem) 0}
.quote-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.quote-row>*{min-width:0}
.qcard{background:var(--blush);border:1px solid var(--blush-2);border-radius:18px;padding:1.6rem 1.5rem}
.qcard .stars{color:var(--pink);letter-spacing:.24em;font-size:.9rem;margin-bottom:.8rem}
.qcard p{font-size:.95rem;color:var(--ink-soft);font-style:italic;margin-bottom:1rem;line-height:1.7}
.qcard cite{font-style:normal;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700}
/* empty slots must read as placeholders, never as real reviews */
.qcard.is-empty{border-style:dashed;background:var(--white)}
.qcard.is-empty .stars{color:var(--blush-2)}
.qcard.is-empty p,.qcard.is-empty cite{color:var(--grey)}
.placeholder-note{text-align:center;margin-top:1.4rem;font-size:.78rem;color:var(--grey);font-style:italic;max-width:70ch;margin-inline:auto}

/* ================= 19. FAQ ================= */
.faq{background:var(--blush);padding:clamp(3.4rem,7vw,5.6rem) 0}
.faq-list{max-width:820px;margin:0 auto}
.faq-list details{border-bottom:1px solid var(--line);padding:.3rem 0}
.faq-list summary{cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;position:relative;
  font-weight:600;font-size:.95rem;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  color:var(--pink-deep);font-size:1.4rem;font-weight:400}
.faq-list details[open] summary::after{content:"−"}
.faq-list details[open] summary{color:var(--pink-deep)}
.faq-list details p{color:var(--ink-soft);font-weight:400;padding:0 2rem 1.1rem 0;margin:0;max-width:70ch}
.faq-list details p a{color:var(--pink-deep);border-bottom:1px solid var(--pink-deep)}

/* ================= 20. ENQUIRY ================= */
.booking{position:relative;background:var(--dark);color:var(--cream);padding:clamp(3.6rem,8vw,6.5rem) 0;overflow:hidden}
.booking-bg{position:absolute;inset:0;z-index:0}
.booking-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:grayscale(.3) brightness(.46) contrast(1.05)}
.booking-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,39,36,.8),rgba(40,39,36,.7) 45%,rgba(40,39,36,.92))}
.booking-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,4.5rem)}
.booking-grid>*{min-width:0}
.booking .section-title{color:var(--cream)}
.booking-info .script{font-size:clamp(2.2rem,5vw,3.4rem);display:block;margin-bottom:-.2rem}
.booking-info .section-title{margin-bottom:1.1rem}
.booking-lead{color:rgba(239,232,220,.86);font-weight:400;max-width:48ch;margin-bottom:1.6rem}
.booking-lead a{color:var(--pink);border-bottom:1px solid var(--pink)}
.call-btn{display:inline-flex;align-items:center;gap:.65rem;background:var(--pink);color:var(--ink);
  font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1.05em 1.7em;border-radius:100px;transition:.3s var(--ease);margin-bottom:1.8rem;
  box-shadow:0 14px 30px -14px rgba(223,113,138,.7)}
.call-btn:hover{background:var(--pink-cta);color:#fff;transform:translateY(-2px)}
.call-btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.contact-list>div{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(239,232,220,.2)}
.contact-list>div:first-child{border-top:1px solid rgba(239,232,220,.2)}
.contact-list dt{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);padding-top:.2rem;font-weight:700}
.contact-list dd{font-weight:500;overflow-wrap:anywhere}
.contact-list dd a:hover{color:var(--pink)}

.booking-form{background:var(--white);border:1px solid var(--blush-2);border-radius:22px;padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:0 40px 60px -40px rgba(0,0,0,.45);color:var(--ink)}
.form-eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-deep);font-weight:800;margin-bottom:1.3rem}
.field{margin-bottom:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-row>*{min-width:0}
.field label{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem;font-weight:700}
.req{color:var(--pink-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:.9em 1.05em;font-family:var(--font);font-size:.88rem;color:var(--ink);font-weight:500;
  background:var(--white);border:1px solid var(--line);border-radius:10px;transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--grey);font-weight:400}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink-deep);box-shadow:0 0 0 3px rgba(192,57,95,.2)}
.field [aria-invalid="true"]{border-color:#B4553F;box-shadow:0 0 0 3px rgba(180,85,63,.16)}
.field textarea{resize:vertical}
.booking-form .btn{margin-top:.4rem}
.form-status{margin-top:.9rem;font-size:.86rem;font-weight:600;color:var(--pink-deep);min-height:1.2em}
.form-fineprint{margin-top:.8rem;font-size:.72rem;color:var(--grey);font-weight:400;line-height:1.6}
.form-fineprint a{color:var(--pink-deep);border-bottom:1px solid var(--pink-deep)}

/* ================= 21. IMAGINE ================= */
.imagine{background:var(--white);padding:clamp(3.6rem,8vw,6rem) 0;text-align:center}
.imagine-inner{max-width:760px;margin:0 auto}
.imagine .script{font-size:clamp(2.4rem,5.4vw,3.8rem);display:block;margin-bottom:.6rem;color:var(--pink-deep)}
.imagine-lines{font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.8;color:var(--ink);font-weight:500;margin-bottom:1.4rem}
.imagine-turn{font-size:clamp(1rem,2vw,1.2rem);color:var(--ink-soft);margin-bottom:1.6rem}
.imagine-turn strong{color:var(--pink-deep);font-weight:700}
.imagine-body{color:var(--ink-soft);max-width:58ch;margin:0 auto 1.8rem}
.imagine-tag{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;margin-bottom:1.8rem}
.imagine-tag .pk{color:var(--pink-deep)}
.imagine-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ================= 22. RECRUITMENT ================= */
.recruit{position:relative;background:var(--dark);color:var(--cream);padding:clamp(3.4rem,7vw,5.6rem) 0;overflow:hidden}
.recruit-bg{position:absolute;inset:0;z-index:0}
.recruit-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:grayscale(.35) brightness(.42)}
.recruit-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,39,36,.84),rgba(40,39,36,.9))}
.recruit-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.recruit-inner>*{min-width:0}
.recruit .script{font-size:clamp(2.2rem,5vw,3.4rem);display:block;margin-bottom:-.2rem;color:var(--pink)}
.recruit h2{font-weight:500;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--cream);margin-bottom:1rem}
.recruit p{color:rgba(239,232,220,.86);max-width:54ch;margin-bottom:1.1rem}
.recruit-points{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.recruit-points li{border:1px solid rgba(239,232,220,.34);border-radius:100px;padding:.45rem 1rem;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(239,232,220,.92)}
.recruit-cta{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.recruit-shirt{width:min(260px,70%);border-radius:16px;background:var(--white);padding:.6rem}

/* ================= FLOATING CALL BUTTON ================= */
.call-fab{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:.6rem;
  filter:drop-shadow(0 14px 26px rgba(223,113,138,.5))}
.call-fab-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  background:#fff;color:var(--pink-deep);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;transition:max-width .4s var(--ease),opacity .3s var(--ease),padding .4s var(--ease);
  padding:0;line-height:1;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.call-fab-ic{position:relative;width:58px;height:58px;flex:none;border-radius:50%;background:var(--pink);
  display:grid;place-items:center;transition:transform .3s var(--ease),background .3s var(--ease)}
.call-fab-ic svg{width:28px;height:28px;fill:var(--ink);position:relative;z-index:2;transition:fill .3s var(--ease)}
.call-fab-ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pink);z-index:1;
  animation:fab-pulse 2.4s cubic-bezier(.3,0,.3,1) infinite}
@keyframes fab-pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
.call-fab:hover .call-fab-ic{transform:scale(1.06);background:var(--pink-cta)}
.call-fab:hover .call-fab-ic svg{fill:#fff}
.call-fab:hover .call-fab-label{max-width:240px;opacity:1;padding:.85em 1.2em}
.call-fab:focus-visible{outline:none}
.call-fab:focus-visible .call-fab-ic{box-shadow:0 0 0 4px rgba(223,113,138,.5)}

/* ================= STICKY MOBILE CTA ================= */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:68;display:none;gap:.55rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--blush-2);
  box-shadow:0 -10px 30px -18px rgba(30,26,27,.5);
  transform:translateY(110%);transition:transform .4s var(--ease);
}
.mobile-cta.show{transform:none}
.mobile-cta a{
  display:flex;align-items:center;justify-content:center;gap:.4rem;border-radius:100px;
  padding:1em .6rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
}
.mobile-cta .mc-book{background:var(--pink-cta);color:#fff;flex:1.6}
.mobile-cta .mc-call{background:var(--white);color:var(--ink);border:1px solid var(--ink);flex:1}
.mobile-cta svg{width:15px;height:15px;flex:none;fill:currentColor}

/* ================= FOOTER ================= */
.site-footer{background:var(--blush);color:var(--ink);padding:2.8rem 0 2rem;border-top:1px solid var(--blush-2)}
.footer-inner{display:grid;grid-template-columns:1.2fr .9fr .7fr;gap:2rem;align-items:start}
.footer-inner>*{min-width:0}
.footer-logo{height:76px;width:auto}
.footer-blurb{font-size:.86rem;color:var(--ink-soft);margin:1rem 0 .7rem;max-width:40ch}
.footer-services{font-size:.74rem;color:var(--grey);line-height:1.9;max-width:44ch}
.footer-h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--pink-deep);margin-bottom:.7rem}
.footer-contact{font-size:.86rem;color:var(--ink-soft);font-weight:500;line-height:2;overflow-wrap:anywhere}
.footer-contact a:hover{color:var(--pink-deep)}
.footer-trust{font-size:.72rem;color:var(--grey);line-height:1.8;margin:.9rem 0 1.1rem;font-weight:600}
.footer-cta{font-size:.68rem;padding:1em 1.8em}
.footer-nav{display:flex;flex-direction:column;gap:.55rem}
.footer-nav a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;transition:color .25s}
.footer-nav a:hover{color:var(--pink-deep)}
.footer-legal{grid-column:1/-1;text-align:center;font-size:.7rem;color:var(--ink);font-weight:500;
  border-top:1px solid var(--blush-2);padding-top:1.6rem;margin-top:.8rem;letter-spacing:.03em}

/* ================= reveal ================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}



/* A full-bleed band between the service list and "build your own visit". The
   image already carries its own logo and a bright ground, so nothing is set
   over it — it reads as a photograph, not a header. */
.svc-banner{margin:0;background:var(--night)}
.svc-banner img{width:100%;display:block;aspect-ratio:1920/714;object-fit:cover}
@media(max-width:760px){
  /* a 2.7:1 band is a sliver on a phone — crop tighter to the figure */
  .svc-banner img{aspect-ratio:16/10;object-position:72% center}
}

/* the Wifey who turns up to take down what you need — sits beside the contact
   details rather than above the form, so the form stays the first thing a
   visitor reaches on a phone */
.contact-photo{margin:1.6rem 0 0;display:flex;align-items:center;gap:1rem}
.contact-photo img{
  width:120px;height:150px;flex:none;object-fit:cover;object-position:center 18%;
  border-radius:16px;border:1px solid var(--night-line);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.9);
}
.contact-photo figcaption{
  font-size:.8rem;line-height:1.6;color:rgba(242,236,228,.7);max-width:22ch;
}
@media(max-width:560px){
  .contact-photo img{width:96px;height:120px}
  .contact-photo figcaption{font-size:.74rem}
}

/* --- photographic grounds for the two plain light bands ----------------
   Both sections are flat white or blush and run long. A photograph veiled
   almost to nothing gives them warmth without competing with the type: the
   veil is set so body copy keeps well clear of 4.5:1 against it. The images
   are decorative, so they are CSS backgrounds rather than <img> — nothing for
   a screen reader to announce.

   isolation:isolate matters. A z-index:-1 pseudo-element paints behind its
   parent's own background unless the parent makes a stacking context, and
   these sections both set a background colour. */
.quotes,.faq{position:relative;isolation:isolate}
/* the standalone FAQ page is a single band, so its ground has to cover the
   viewport rather than a short section */
.faq-page{min-height:100vh}
/* every standalone page has to clear the fixed header; only the FAQ,
   which carries a photographic ground, needs to fill the viewport —
   forcing that on a short page just opens dead space above the footer */
.faq-page,.subpage{padding-top:clamp(5rem,10vw,7rem)}
/* the header is a fixed dark bar; on a standalone light page it needs the
   shadow it otherwise only gets once you scroll, or it floats */
body:has(.faq-page) .site-header,body:has(.subpage) .site-header{
  box-shadow:0 10px 30px -18px rgba(0,0,0,.55);
}
.faq-page .section-sub a,.subpage .section-sub a{color:var(--pink-deep);border-bottom:1px solid currentColor}
.quotes::before,.faq::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-position:center;background-size:cover;
}
@media(max-width:760px){
  /* a 2:3 frame behind a very tall section crops to almost nothing useful on a
     phone; letting it scale to width keeps the room readable as texture */
  .quotes::before,.faq::before{background-size:180% auto;background-position:center top}
}
.quotes::before{
  background-image:
    linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.96)),
    image-set(url(../images/bg-kitchen.webp) type("image/webp"),
              url(../images/bg-kitchen.jpg) type("image/jpeg"));
}
.faq::before{
  background-image:
    linear-gradient(rgba(251,238,240,.90),rgba(251,238,240,.94)),
    image-set(url(../images/bg-bathroom.webp) type("image/webp"),
              url(../images/bg-bathroom.jpg) type("image/jpeg"));
}

/* ================= ABOUT US =================
   Opens the About group: the origin story and what a visit covers, against a
   photograph of a Wifey at work. Light, because it follows the dark hero and
   trust bar. */
.about{background:var(--blush);color:var(--ink);padding:clamp(3.4rem,7vw,5.6rem) 0}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-grid>*{min-width:0}
.about .section-title{color:var(--ink);text-align:left;margin-bottom:1rem}
.about .section-title .pk{color:var(--pink-deep)}
.about .eyebrow{color:var(--pink-deep);display:block;margin-bottom:.6rem}
.about-lead{font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.6;margin-bottom:.9rem}
.about-copy p{font-size:.92rem;line-height:1.75;color:var(--ink-soft)}
.about-sub{margin-top:1.1rem;font-size:.62rem!important;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--ink)!important}
.about-list{margin-top:.8rem}
.about-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

.about-media{margin:0;border-radius:22px;overflow:hidden;
  box-shadow:0 34px 64px -36px rgba(30,26,27,.5)}
.about-media img,.about-media .about-video{
  width:100%;display:block;aspect-ratio:4/5;object-fit:cover;cursor:pointer;
}
.about-video:focus-visible{outline:3px solid var(--pink-hot);outline-offset:3px}

@media(max-width:860px){
  .about-grid{grid-template-columns:1fr}
  /* the photograph leads on a phone, where the copy would otherwise push it
     off the first screen entirely */
  .about-media{order:-1;max-width:460px;margin-inline:auto}
  .about-media img,.about-media .about-video{aspect-ratio:4/5}
  .about .section-title{text-align:center}
  .about .eyebrow{text-align:center}
  .about-actions{justify-content:center}
}
@media(max-width:560px){
  .about-list{grid-template-columns:1fr}
}

/* ================= THE REEL =================
   Seven clips from the road, played one at a time in a single window like a
   story: tap through, or let each run into the next. The testimonial sits on
   the footage rather than beside it.

   No suburb labels. The clips are tagged Gold Coast suburbs and this is a
   Hervey Bay page — naming them would put the section in direct contradiction
   with the list of suburbs immediately above it.

   Without JavaScript every clip and every quote is still on the page, stacked;
   `reel-ready` is what collapses them into one window, so the fallback is the
   content rather than an empty box. */
.reel{position:relative;max-width:420px;margin:0 auto;width:100%}
.reel-track{list-style:none;margin:0;display:grid;gap:1rem}

.story{position:relative;border-radius:20px;overflow:hidden;background:#000;
  border:1px solid rgba(242,236,228,.18);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.story-video{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;cursor:pointer}
.story-quote{
  position:absolute;left:0;right:0;bottom:0;top:32%;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:1.4rem clamp(1.1rem,3vw,1.8rem);
  background:linear-gradient(180deg,rgba(20,17,18,0) 0%,rgba(20,17,18,.62) 22%,
    rgba(20,17,18,.88) 48%,rgba(20,17,18,.96) 100%);
}
.story-quote .stars{color:var(--pink-hot);font-size:.9rem;letter-spacing:.12em;margin-bottom:.5rem}
.story-quote p{font-size:clamp(.86rem,1.6vw,1rem);line-height:1.6;color:var(--cream);
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.story-quote cite{display:block;margin-top:.45rem;font-style:normal;font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(242,236,228,.72)}

/* single-window mode, switched on only once the script is running */
.reel-ready .reel-track{display:block}
.reel-ready .story{display:none}
.reel-ready .story.is-on{display:block}

.reel-bars{display:none;gap:4px;margin-bottom:.55rem}
.reel-ready .reel-bars{display:flex}
.reel-bars span{flex:1;height:3px;border-radius:2px;background:rgba(242,236,228,.26);overflow:hidden}
.reel-bars span::after{content:"";display:block;height:100%;width:var(--p,0%);
  background:var(--pink-hot);border-radius:2px}

.reel-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;cursor:pointer;font:inherit;font-size:1.4rem;
  line-height:1;color:var(--cream);background:rgba(20,17,18,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(242,236,228,.3);transition:background .3s var(--ease)}
.reel-ready .reel-nav{display:grid;place-items:center}
.reel-nav:hover{background:var(--pink-cta);border-color:var(--pink-cta)}
.reel-nav:focus-visible{outline:3px solid var(--pink-hot);outline-offset:3px}
.reel-prev{left:-18px}
.reel-next{right:-18px}

.reel-note{max-width:420px;margin:.9rem auto 0;text-align:center;font-size:.74rem;
  font-style:italic;color:rgba(242,236,228,.55);line-height:1.6}

@media(max-width:560px){
  .reel{max-width:none}
  .reel-prev{left:6px}
  .reel-next{right:6px}
}

/* ================= LATEST / SOCIAL ================= */
/* the promo film — sits at the head of the Latest section */
.film{
  width:100%;display:block;border-radius:20px;background:#000;
  border:1px solid var(--night-line);aspect-ratio:16/9;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}

.social{background:var(--night);color:var(--cream);padding:clamp(3.4rem,7vw,5.6rem) 0}
.social .section-title{color:var(--cream)}
.social .section-title .pk{color:var(--pink-hot)}
.social .script{color:var(--pink)}
.social .section-sub{color:rgba(242,236,228,.72)}
.social .placeholder-note{color:rgba(242,236,228,.5)}

/* screen-reader-only label, used on the platform badges */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- the three channels, stated before the feed --- */
.channels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  list-style:none;margin:0 0 1.4rem;
}
.channels>*{min-width:0}
.channel{
  display:flex;align-items:center;gap:.7rem;height:100%;
  padding:.85rem 1.1rem;border-radius:100px;
  background:rgba(242,236,228,.05);border:1px solid var(--night-line);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.channel:hover{background:rgba(242,236,228,.09);border-color:var(--pink-hot);transform:translateY(-2px)}
.channel-ic{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink-hot);
}
.channel-ic svg{width:20px;height:20px;fill:#fff}
.channel-txt{display:flex;flex-direction:column;min-width:0}
.channel-name{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--cream);
}
.channel-handle{
  font-size:.78rem;color:rgba(242,236,228,.66);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.channel-go{margin-left:auto;color:var(--pink-hot);font-size:1.1rem;flex:none}

/* --- channel filter --- */
.feed-filter{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.4rem}
.fchip{
  font:inherit;cursor:pointer;
  padding:.5rem 1.1rem;border-radius:100px;
  background:transparent;border:1px solid var(--night-line);color:rgba(242,236,228,.8);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.fchip:hover{border-color:var(--pink-hot);color:var(--cream)}
.fchip.is-on{background:var(--pink-cta);border-color:var(--pink-cta);color:#fff}

/* --- the feed itself --- */
/* multi-column masonry: reels are 9:16 and photos are square, so a row grid
   would leave holes under every photo */
.feed{
  list-style:none;margin:0;
  columns:4;column-gap:1rem;
}
.post{break-inside:avoid;margin:0 0 1rem}
/* the author display rule would otherwise beat the UA [hidden] rule */
.post[hidden]{display:none}
.post-link{
  position:relative;display:block;overflow:hidden;border-radius:18px;
  border:1px solid var(--night-line);background:var(--night-2);
  box-shadow:0 24px 48px -32px rgba(0,0,0,.9);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.post-link:hover{transform:translateY(-5px);border-color:var(--pink-hot)}
.post-link img{width:100%;display:block;object-fit:cover}
.post-reel .post-link img{aspect-ratio:9/16}
.post-photo .post-link img{aspect-ratio:1/1}
.post-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,18,.45) 0%,rgba(20,17,18,0) 30%,rgba(20,17,18,.72) 62%,rgba(20,17,18,.94) 100%);
}
.post-badge{
  position:absolute;top:.7rem;left:.7rem;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(20,17,18,.62);backdrop-filter:blur(6px);
  border:1px solid rgba(242,236,228,.28);
}
.post-badge svg{width:15px;height:15px;fill:var(--cream)}
.post-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,17,18,.5);backdrop-filter:blur(6px);border:1px solid rgba(242,236,228,.4);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.post-link:hover .post-play{background:var(--pink-cta);border-color:var(--pink-cta);transform:translate(-50%,-50%) scale(1.08)}
.post-play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
.post-body{position:absolute;left:0;right:0;bottom:0;padding:.85rem .9rem;display:block}
.post-cap{
  color:var(--cream);font-size:.8rem;line-height:1.35;font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  /* a long caption must not climb up over the picture */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-when{
  display:block;margin-top:.35rem;font-size:.53rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:rgba(242,236,228,.78);text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.feed-empty{text-align:center;color:rgba(242,236,228,.6);font-size:.85rem;margin-top:.5rem}

/* --- follow footer --- */
.social-foot{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);
  margin-top:1.8rem;padding:clamp(1.2rem,3vw,1.8rem);
  background:var(--night-2);border:1px solid var(--night-line);border-radius:22px;
}
.social-foot>*{min-width:0}
.social-foot-copy{display:flex;flex-direction:column;gap:.55rem}
.social-handle{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;color:var(--cream)}
.social-handle svg{width:20px;height:20px;fill:var(--pink-hot);flex:none}
.social-blurb{font-size:.85rem;color:rgba(242,236,228,.66);max-width:52ch}
.social-foot-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.25rem}
.social-qr{flex:none;display:block;background:#fff;padding:.5rem;border-radius:16px;line-height:0;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.8);transition:transform .35s var(--ease)}
.social-qr:hover{transform:scale(1.03)}
.social-qr img{width:124px;height:124px;border-radius:8px}

/* =========================================================
   AFTER-DARK THEME
   A night-toned spine (intro, services, regular, why, how,
   gallery, reviews, imagine, footer) with four deliberately
   plain, light sections — trust, who we help, NDIS/DVA and
   the FAQ. Those four carry the claims people have to
   believe, so they stay sober while the rest turns the
   lights down.
   ========================================================= */

.intro,.services,.regular,.why,.how,.gallery,.imagine,.site-footer{
  background:var(--night);color:var(--cream);
}
.intro .section-title,.services .section-title,.regular .section-title,
.why .section-title,.how .section-title,.gallery .section-title,
.intro .section-title .pk,.services .section-title .pk,.regular .section-title .pk,
.why .section-title .pk,.imagine .pk{color:var(--pink-hot)}
.intro .section-sub,.services .section-sub,.regular .section-sub,
.gallery .section-sub{color:rgba(242,236,228,.72)}
.intro .section-sub strong,.services .section-sub strong,.regular .section-sub strong{color:var(--cream)}
.intro .script,.services .script,.regular .script,.how .script,
.gallery .script,.imagine .script{color:var(--pink)}
.why .eyebrow{color:var(--pink-hot)}

/* intro */
.intro-body p{color:rgba(242,236,228,.78)}
.intro-turn{color:var(--cream)!important}
.intro-turn strong{color:var(--pink-hot)}

/* service cards */
.services .svc{background:var(--night-2);border-color:var(--night-line)}
.services .svc:hover{border-color:var(--pink-hot);box-shadow:0 26px 46px -28px rgba(0,0,0,.8)}
.services .svc h3{color:var(--cream)}
.services .svc p{color:rgba(242,236,228,.72)}
.services .svc-ic{background:rgba(226,63,128,.14)}
.services .svc-ic svg{fill:var(--pink-hot)}
.services .svc-chev svg{fill:var(--pink-hot)}
.services .tasks li{background:rgba(242,236,228,.06);border-color:var(--night-line);color:rgba(242,236,228,.8)}
.services .svc-ask{background:rgba(226,63,128,.12);border-color:var(--pink-hot)}
.services .svc-ask .svc-ic{background:rgba(20,17,18,.6)}
.services .svc-ask strong{color:var(--pink-hot)}

/* weekly / fortnightly / one-off */
.regular .trio-item{border-right-color:var(--night-line)}
.regular .trio-item h3{color:var(--cream)}
.regular .trio-item .sub{color:rgba(242,236,228,.55)}
.regular .trio-item p{color:rgba(242,236,228,.72)}
.regular .trio-item.active{background:rgba(226,63,128,.12)}

/* why choose */
.why p{color:rgba(242,236,228,.78)}
.why-list li{color:var(--cream)}
.about .why-list li{color:var(--ink)}
.why-list li::after{border-color:var(--pink-hot)}
.about .why-list li::after{border-color:var(--pink-deep)}

/* how it works */
.how .steps li{background:var(--night-2);border-color:var(--night-line)}
.how .steps h3{color:var(--cream)}
.how .steps p{color:rgba(242,236,228,.72)}
.how .step-n{background:var(--pink-hot);color:#fff}

/* slider */
.gallery .slider-btn{background:rgba(28,24,25,.92);border-color:var(--night-line);color:var(--pink-hot)}
.gallery .slider-btn:hover{background:var(--pink-hot);color:#fff;border-color:var(--pink-hot)}
.gallery .slider-dots button{background:rgba(242,236,228,.22)}
.gallery .slider-dots button[aria-selected="true"]{background:var(--pink-hot)}

/* reviews */

/* time back — dark scrim instead of the blush wash */
.timeback{background:var(--night);color:var(--cream)}
.timeback-bg img{filter:grayscale(.3) contrast(1.1) brightness(.62)}
.timeback-bg::after{background:linear-gradient(180deg,rgba(20,17,18,.9),rgba(20,17,18,.74) 45%,rgba(20,17,18,.94))}
.timeback .script{color:var(--pink)}
.timeback h2{color:var(--cream)}
.timeback-list li{background:rgba(242,236,228,.07);border-color:var(--night-line);color:rgba(242,236,228,.9)}
.timeback-line{color:rgba(242,236,228,.78)}
.timeback-tag{color:var(--pink-hot)}

/* final sales */
.imagine-lines{color:var(--cream)}
.imagine-turn{color:rgba(242,236,228,.72)}
.imagine-turn strong{color:var(--pink-hot)}
.imagine-body{color:rgba(242,236,228,.72)}
.imagine-tag{color:var(--cream)}

/* footer */
.site-footer{border-top:1px solid var(--night-line)}
.footer-blurb{color:rgba(242,236,228,.74)}
.footer-services{color:rgba(242,236,228,.5)}
.footer-h{color:var(--pink-hot)}
.footer-contact{color:rgba(242,236,228,.82)}
.footer-contact a:hover{color:var(--pink-hot)}
.footer-trust{color:rgba(242,236,228,.55)}
.footer-nav a{color:rgba(242,236,228,.78)}
.footer-nav a:hover{color:var(--pink-hot)}
.footer-legal{color:rgba(242,236,228,.6);border-top-color:var(--night-line)}

/* the four light breathers keep their own footing */
.goodhands,.audience,.faq{background:var(--blush)}
.funding{background:var(--white)}

/* buttons pick up the hot accent on the dark spine */
.btn-pink{background:var(--pink-cta);border-color:var(--pink-cta);color:#fff}
.btn-pink:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.goodhands .btn-pink:hover,.audience .btn-pink:hover,.about .btn-pink:hover,
.faq .btn-pink:hover,.funding .btn-pink:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ink{color:var(--cream);background:transparent;border-color:rgba(242,236,228,.55)}
.btn-ink:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.faq .btn-ink,.funding .btn-ink,.goodhands .btn-ink,.audience .btn-ink,.about .btn-ink{
  color:var(--ink);background:rgba(255,255,255,.85);border-color:var(--ink)}
.faq .btn-ink:hover,.funding .btn-ink:hover,.goodhands .btn-ink:hover,.audience .btn-ink:hover,.about .btn-ink:hover{
  background:var(--ink);color:var(--white)}

/* section break ornament: the heart from their own uniform artwork */
.sb-dot{width:auto;height:18px;border-radius:0;background:none;box-shadow:none;
  -webkit-mask:url(../images/motif-heart.svg) center/contain no-repeat;
  mask:url(../images/motif-heart.svg) center/contain no-repeat;
  background-color:var(--pink-hot);aspect-ratio:100/70}
.sb-line{background:rgba(242,236,228,.4)}

/* ================= responsive ================= */
@media(max-width:1180px){
  .nav{gap:1rem}
  .nav a{font-size:.6rem;letter-spacing:.1em}
  .nav-cta{padding:.85em 1.2em}
  .logo .logo-mark{height:50px}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:940px){
  .nav a{font-size:.9rem;letter-spacing:.13em}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:1.5rem;background:var(--white);
    padding:2rem 2.4rem;transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.3);overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{font-size:.9rem;color:var(--ink);letter-spacing:.13em}
  .nav .nav-cta{width:100%;text-align:center;justify-content:center;display:flex;color:var(--ink)!important}
  .hamburger{display:flex;z-index:70}
  .trio-grid,.feature-grid,.goodhands-grid,.build-grid,.why-grid,.funding-grid,.recruit-inner,.booking-grid{grid-template-columns:1fr}
  .trio-item{border-right:0;border-bottom:1px solid var(--line-soft)}
  .feature-media{order:-1}
  .goodhands-media{max-width:520px;margin:0 auto}
  .prices-reel{margin-top:1.5rem}
  .recruit-cta{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}
  .recruit-shirt{width:min(180px,45%)}
  .slider{--per:2}
  .feed{columns:3}
  .social-foot{flex-direction:column;text-align:center;align-items:center}
  .social-foot-copy{align-items:center}
  .social-foot-btns{justify-content:center}
  .footer-inner{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  html{scroll-padding-top:78px}
  body{padding-bottom:74px}            /* room for the sticky CTA bar */
  .mobile-cta{display:flex}
  .call-fab{bottom:84px;right:14px}
  .call-fab-label{display:none}
  .call-fab-ic{width:50px;height:50px}
  .call-fab-ic svg{width:25px;height:25px}
  .slider{--per:1;padding:0 2.6rem}
  .badge-grid,.why-list{grid-template-columns:1fr}
  /* two columns is the most a phone can show without the captions squeezing */
  .feed{columns:2;column-gap:.7rem}
  .post{margin-bottom:.7rem}
  .post-link{border-radius:14px}
  /* square tiles leave too little room for a caption on a phone */
  .post-photo .post-link img{aspect-ratio:4/5}
  .post-cap{font-size:.72rem}
  .post-body{padding:.7rem .7rem .75rem}
  .post-when{font-size:.5rem;letter-spacing:.12em}
  .post-play{width:42px;height:42px}
  .post-play svg{width:18px;height:18px}
  .channels{grid-template-columns:1fr;gap:.5rem}
  .channel{padding:.7rem .9rem}
  .social-qr img{width:118px;height:118px}
  .footer-inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .footer-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem}
  .footer-blurb,.footer-services{max-width:none}
}
@media(max-width:560px){
  /* Mobile hero: headline, promise and both CTAs above the fold */
  .hero{padding:5.8rem 0 2.6rem;min-height:auto}
  .h1-brand{font-size:2.15rem;letter-spacing:.04em}
  .h1-lead{font-size:.7rem;letter-spacing:.12em}
  .h1-seo{font-size:.57rem;letter-spacing:.15em;margin-top:.45rem}
  .hero-script{font-size:2rem;margin-top:.3rem}
      .hero-actions{gap:.6rem}
  .hero-actions .btn{width:100%;padding:1.05em 1.6em}
  .hero-value{margin:.7rem auto .95rem}
  .hero-value-line{font-size:1.52rem}
  /* a centred crop of this frame is just bedding — neither Wifey is in it.
     Pulling the focal point left brings one of them into the phone view. */
  .hero-bg img{object-position:9% 42%}
  .hero-film{margin-top:1rem;width:100vw;margin-inline:calc(50% - 50vw)}
  .hero-film .film{border-radius:0;border-inline:0}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:0}
  .trust>*{min-width:0}
  .trust li{font-size:.53rem;letter-spacing:.06em;padding:.45rem .6rem;gap:.3rem;justify-content:center;text-align:center}
  .trust li svg{width:11px;height:11px}
  /* long service lists stay scannable as horizontal cards */
  .svc{padding:1.3rem 1.2rem;border-radius:16px}
  .tasks{gap:.3rem}
  .tasks li{font-size:.64rem;padding:.28rem .6rem}
  .svc-ic{width:38px;height:38px;margin-bottom:.8rem}
  .svc h3{margin-bottom:.6rem}
  .svc p{font-size:.82rem}
  .svc-grid,.aud-grid,.quote-row,.funding-grid{gap:.75rem}
  .steps{grid-template-columns:1fr;gap:.75rem}
  .steps li{display:grid;grid-template-columns:44px 1fr;gap:.1rem 1rem;text-align:left;padding:1.1rem 1.2rem}
  .step-n{margin:0;grid-row:span 2}
  .steps h3{align-self:center}
  .field-row{grid-template-columns:1fr;gap:0}
  .feature-media{grid-template-columns:1fr}
  .feature-media .fm-1,.feature-media .fm-2{margin:0;aspect-ratio:4/3}
  .contact-list>div{grid-template-columns:1fr;gap:.2rem}
  .area-actions .btn,.imagine-actions .btn,.svc-actions .btn{width:100%}
  .recruit-shirt{width:min(150px,40%)}
  .todo-title{font-size:2.2rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .slider-track,.slide img,.btn,.svc{transition:none}
  .call-fab-ic::before{animation:none;opacity:0}
  .mobile-cta{transition:none}
}

/* ================= SECTION FOLDS ==========================
   Five sections the brief wants present on the homepage but
   that were making it very long to scroll: the heading stands
   on its own and the body opens on demand, with a full page
   behind each for anyone who wants it whole.

   Native <details> again — it opens with no JS, is keyboard
   operable, and a screen reader announces the state. The
   heading is the <summary>, which is why the FAQ's own
   accordion rules had to be re-scoped to .faq-list: this
   section is now a <details> too.
   ========================================================= */
.fold-head{
  display:block;                         /* kills the list-item marker box */
  list-style:none;cursor:pointer;text-align:center;
  width:min(100% - 3rem,720px);margin-inline:auto;
}
.fold-head::-webkit-details-marker{display:none}
.fold-head .script{display:block;font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:-.35rem}
.fold-head .section-title{margin:0}

.fold-cue{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:clamp(1.1rem,2.4vw,1.6rem);padding:.62rem 1.4rem;
  border:1px solid var(--pink-deep);border-radius:100px;color:var(--pink-deep);
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.fold-lbl-open{display:none}
.sec-fold[open] .fold-lbl-shut{display:none}
.sec-fold[open] .fold-lbl-open{display:inline}
.fold-chev{width:14px;height:14px;flex:none;transition:transform .35s var(--ease)}
.sec-fold[open] .fold-chev{transform:rotate(180deg)}
.fold-head:hover .fold-cue{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.fold-head:focus-visible{outline:none}
.fold-head:focus-visible .fold-cue{outline:3px solid var(--pink-hot);outline-offset:3px}

.fold-body{padding-top:clamp(1.6rem,3.2vw,2.4rem)}

/* the link through to the section's own page */
.fold-page{text-align:center;margin-top:clamp(1.5rem,3vw,2.2rem)}
.fold-page a{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-deep);border-bottom:1px solid currentColor;padding-bottom:3px;
}
.fold-page a::after{content:" \2192";border:0}
.fold-page a:hover{color:var(--ink)}

/* the two folds that sit on the dark spine */
.regular .fold-cue,.how .fold-cue{border-color:rgba(242,236,228,.5);color:var(--cream)}
.regular .fold-head:hover .fold-cue,.how .fold-head:hover .fold-cue{
  background:var(--cream);border-color:var(--cream);color:var(--ink)}
.regular .fold-page a,.how .fold-page a{color:var(--pink-hot)}
.regular .fold-page a:hover,.how .fold-page a:hover{color:var(--cream)}
/* .regular carries its own bottom padding on the CTA row; with a link after
   it, the padding has to move to whatever is genuinely last */
.regular .fold-body .svc-actions{padding-bottom:0}
.regular .fold-page{padding-bottom:clamp(3.4rem,7vw,5.6rem)}

/* animate open/close where the browser can interpolate to auto */
@supports (interpolate-size: allow-keywords){
  .sec-fold{interpolate-size:allow-keywords}
  .sec-fold::details-content{
    block-size:0;overflow:hidden;content-visibility:hidden;
    transition:block-size .45s var(--ease),content-visibility .45s allow-discrete;
  }
  .sec-fold[open]::details-content{block-size:auto;content-visibility:visible}
}
@media(prefers-reduced-motion:reduce){
  .fold-cue,.fold-chev{transition:none}
  .sec-fold::details-content{transition:none}
}
@media(max-width:560px){
  .fold-cue{font-size:.63rem;letter-spacing:.14em;padding:.58rem 1.1rem}
}

/* a section lifted onto its own page keeps the homepage's own dressing;
   only the footing changes — a way back, and the padding the fold used to
   carry on the CTA row */
.page-back{margin-top:clamp(2rem,4vw,3rem)}
.regular.subpage .svc-actions{padding-bottom:0}
.regular.subpage .page-back{padding-bottom:clamp(3.4rem,7vw,5.6rem)}