/* ===========================================================
   MNC Support Care & Maintenance
   Brand: mint-teal puzzle house + NDIS purple + green tick
   =========================================================== */

:root{
  /* Brand */
  --teal:#149a90;          /* decorative fills, rules, large icons */
  --teal-deep:#0e7a72;     /* text + button fills (AA on white) */
  --teal-ink:#0b6a63;      /* small links */
  --teal-mint:#a9e2dd;
  --teal-tint:#eef8f6;
  --teal-tint-2:#e2f2ef;
  --purple:#7a2e9d;
  --purple-soft:#f4ecf9;
  --green:#2b9c59;
  --amber:#e0a300;

  /* Neutrals */
  --ink:#1c3034;
  --ink-soft:#33484c;
  --muted:#566c70;
  --line:#dfeae9;
  --line-strong:#c6dbd8;
  --white:#ffffff;

  /* Shape */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;

  /* The only shadows in the system: lifted surfaces that float above
     the page (sticky header, dropdown, drawer, hero photo). */
  --lift:0 1px 2px rgba(12,58,54,.05), 0 10px 30px -14px rgba(12,58,54,.28);
  --lift-lg:0 2px 6px rgba(12,58,54,.06), 0 26px 60px -28px rgba(12,58,54,.42);

  --wrap:1160px;
  --measure:760px;         /* text column inside a full-width wrap */
  --ease:cubic-bezier(.22,.68,.28,1);
  /* Long, decelerating curve for anything that travels a distance.
     Nothing in the system uses a linear or ease-in-out snap. */
  --ease-soft:cubic-bezier(.16,.84,.32,1);
  --ease-spring:cubic-bezier(.34,1.3,.5,1);
}

*{box-sizing:border-box}
/* Components below set display on .btn, .wizard__nav and friends, which would
   otherwise beat the user-agent rule for [hidden]. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

h1,h2,h3,h4{font-family:"Poppins",sans-serif;line-height:1.16;margin:0 0 .5em;font-weight:700;letter-spacing:-.018em}
h1{font-size:clamp(2.15rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.65rem,3.1vw,2.35rem)}
h3{font-size:1.24rem;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--teal-ink);text-decoration:none}
/* height:auto lets the CSS aspect-ratio win over the HTML height attribute,
   while the attribute still reserves layout space before the image loads. */
img{max-width:100%;height:auto;display:block}
strong{font-weight:700}

:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tint{background:var(--teal-tint)}
.section--tight{padding:64px 0}

/* Anchors clear the sticky header */
:target,[id]{scroll-margin-top:92px}

/* Eyebrow: small rule + label, replaces the plain uppercase caption */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:"Poppins",sans-serif;font-weight:600;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);flex:none}

/* Section heads are left-aligned with a measured column */
.section__head{max-width:660px;margin:0 0 48px}
.section__head h2{margin-bottom:.45rem}
.section__head p{color:var(--muted);font-size:1.08rem;margin:0;max-width:58ch}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head--center .eyebrow{justify-content:center}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:400}
.skip-link:focus{left:12px;top:12px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:1rem;
  padding:.82rem 1.5rem;border-radius:var(--r-sm);cursor:pointer;
  border:2px solid transparent;position:relative;
  transition:background .28s var(--ease-soft),color .28s var(--ease-soft),
             border-color .28s var(--ease-soft),transform .32s var(--ease-spring),
             box-shadow .32s var(--ease-soft);
  text-align:center;line-height:1.25;
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn--primary{background:var(--teal-deep);color:#fff;box-shadow:0 0 0 rgba(12,58,54,0)}
.btn--primary:hover{background:#0a6259;box-shadow:0 10px 22px -12px rgba(12,58,54,.75)}
.btn--ghost{background:transparent;color:var(--teal-deep);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--teal-deep);background:var(--teal-tint)}
.btn--white{background:#fff;color:var(--teal-deep)}
.btn--white:hover{background:var(--teal-tint)}
/* On dark bands the ghost button needs light edges */
.ctaband .btn--ghost,.enquire .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.ctaband .btn--ghost:hover,.enquire .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* Text link with a sliding arrow */
.arrow-link{
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.96rem;
  color:var(--teal-deep);display:inline-flex;align-items:center;gap:.45rem;
}
.arrow-link::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .25s var(--ease);
}
.arrow-link:hover::after{transform:translateX(4px) rotate(-45deg)}

/* ===== Topbar ===== */
.topbar{background:var(--teal-deep);color:#e6f6f4;font-size:.88rem}
.topbar__inner{display:flex;gap:1.5rem;align-items:center;padding:9px 24px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:.45rem;color:#e6f6f4;transition:color .2s}
.topbar__item svg{width:15px;height:15px;fill:currentColor;opacity:.85}
.topbar__fb{margin-left:auto}
.topbar__item:hover{color:#fff}
.topbar a.topbar__item{position:relative}
.topbar a.topbar__item::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.topbar a.topbar__item:hover::after{transform:scaleX(1)}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:200;border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
/* The frosted layer lives on a pseudo-element so backdrop-filter never
   becomes a containing block for the fixed mobile drawer. */
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.5) blur(10px);
  backdrop-filter:saturate(1.5) blur(10px);
}
.header.is-scrolled{box-shadow:var(--lift);border-color:transparent}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 24px;transition:padding .3s var(--ease)}
.header.is-scrolled .header__inner{padding:8px 24px}

/* Scroll progress hairline */
.header__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--teal);opacity:0;transition:opacity .3s}
.header.is-scrolled .header__progress{opacity:1}

.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand__mark{width:50px;height:50px;object-fit:contain;transition:transform .35s var(--ease)}
.header.is-scrolled .brand__mark{width:42px;height:42px}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.04)}
.brand__text{display:flex;flex-direction:column;line-height:1.12;font-family:"Poppins",sans-serif}
.brand__text strong{font-size:1.1rem;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.brand__text span{font-size:.82rem;color:var(--teal-deep);font-weight:600}

/* ===== Primary nav ===== */
.nav{display:flex;align-items:center}
.nav__menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__menu>li{position:relative}
.nav__menu>li>a{
  font-family:"Poppins",sans-serif;font-weight:500;color:var(--ink);
  padding:.55rem .8rem;font-size:.97rem;display:inline-block;position:relative;
  transition:color .22s var(--ease);
}
/* Underline grows from the left on hover, sits permanently on the current page */
.nav__menu>li>a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;height:2px;
  background:var(--teal);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav__menu>li>a:hover{color:var(--teal-deep)}
.nav__menu>li>a:hover::after{transform:scaleX(1)}
.nav__menu>li>a.is-active{color:var(--teal-deep);font-weight:600}
.nav__menu>li>a.is-active::after{transform:scaleX(1)}
.nav__cta>a::after{display:none}
.nav__cta .btn{background:var(--purple);color:#fff;padding:.6rem 1.2rem;font-size:.95rem;margin-left:.5rem}
.nav__cta .btn:hover{background:#682487;color:#fff}

/* Dropdown */
.nav__menu li.has-sub>a{padding-right:1.5rem}
.nav__menu li.has-sub>a::before{
  content:"";position:absolute;right:.65rem;top:50%;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.55;transition:transform .28s var(--ease),opacity .2s;
}
.nav__menu li.has-sub:hover>a::before,
.nav__menu li.has-sub:focus-within>a::before{transform:translateY(-20%) rotate(-135deg);opacity:1}
.nav__sub{
  list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 6px);left:0;min-width:270px;
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--teal);
  border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--lift);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .28s var(--ease),visibility .28s;z-index:220;
}
.nav__menu li.has-sub:hover .nav__sub,
.nav__menu li.has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{
  display:block;padding:.6rem .75rem;font-size:.94rem;color:var(--ink);border-radius:var(--r-xs);
  font-family:"Poppins",sans-serif;font-weight:500;
  transition:background .2s,color .2s,padding-left .24s var(--ease);
}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--teal-tint);color:var(--teal-deep);padding-left:1.05rem}
.nav__sub-toggle{display:none}

/* Hamburger */
.nav__toggle{
  display:none;flex-direction:column;justify-content:center;gap:6px;
  background:none;border:0;cursor:pointer;padding:10px;margin-right:-6px;
  width:46px;height:46px;z-index:320;position:relative;
}
.nav__toggle span{
  display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .34s var(--ease),opacity .18s var(--ease),background .2s;
}

/* ===== Hero ===== */
.hero{background:linear-gradient(168deg,#f3faf9 0%,#eaf6f4 52%,#fff 100%);border-bottom:1px solid var(--line);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center;padding-top:68px;padding-bottom:76px}
.hero__copy h1{margin-bottom:.6rem;font-size:clamp(2.05rem,3.9vw,2.95rem)}
.lead{font-size:1.06rem;color:var(--muted);max-width:48ch;line-height:1.6}
.hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.7rem 0 1.6rem}
.hero__badges{display:flex;align-items:center;gap:1rem;max-width:430px;padding-left:1.1rem;border-left:2px solid var(--teal-mint)}
.hero__badges img{width:58px;height:58px;object-fit:contain;flex:none}
.hero__badges p{margin:0;font-size:.92rem;color:var(--muted)}

/* ---- Hero collage: banner top-left, place shot under it, the tall
       portrait filling the right column across both rows. Every tile
       shares the same white frame, radius and shadow so it reads as one
       object rather than three loose photos. ---- */
.hero__media{
  position:relative;display:grid;gap:14px;
  grid-template-columns:1.1fr .9fr;
  grid-template-areas:"banner portrait" "place portrait";
}
.hero__media>*{min-width:0}
.hero__photo{
  margin:0;position:relative;min-width:0;
  background:#fff;padding:8px;border-radius:var(--r-md);
  box-shadow:var(--lift-lg);
}
.hero__photo img{
  display:block;width:100%;height:100%;border-radius:calc(var(--r-md) - 6px);
}
/* The client banner carries its own logo and copy, so it is never cropped */
.hero__photo--banner{grid-area:banner}
.hero__photo--banner img{height:auto}
/* Fixed ratio here sets the second row, which in turn sets how tall the
   portrait tile beside it runs. */
.hero__photo--place{grid-area:place;aspect-ratio:16/9}
.hero__photo--place img{
  /* The source is a tall shot with a lot of sky, so the crop sits low
     on the frame to keep the bridge and the water. */
  object-fit:cover;object-position:50% 82%;
}
.hero__photo--main{grid-area:portrait}
.hero__photo--main img{
  /* Cropped in and pushed right so he stays centred in the tall tile. */
  object-fit:cover;object-position:62% 18%;
}
.hero__photo--place figcaption{
  position:absolute;left:8px;right:8px;bottom:8px;
  padding:.55rem .75rem;border-radius:0 0 calc(var(--r-md) - 6px) calc(var(--r-md) - 6px);
  background:linear-gradient(to top,rgba(9,45,42,.82),rgba(9,45,42,0));
  color:#fff;font-family:"Poppins",sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.02em;
}

/* ===== Trust strip ===== */
.trust{background:var(--teal-deep);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__item{
  padding:26px 26px 26px 0;display:flex;flex-direction:column;gap:.15rem;
  border-left:1px solid rgba(255,255,255,.2);padding-left:26px;
}
.trust__item:first-child{border-left:0;padding-left:0}
.trust__item strong{font-family:"Poppins",sans-serif;font-size:1.08rem;font-weight:600}
.trust__item span{font-size:.9rem;color:#cfeae7}

/* ===== Service cards ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:border-color .45s var(--ease-soft),box-shadow .45s var(--ease-soft),transform .45s var(--ease-soft);
}
.card:hover{border-color:var(--teal-mint);box-shadow:var(--lift);transform:translateY(-6px)}
.card__img{aspect-ratio:16/10;overflow:hidden;background:var(--teal-tint)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-soft)}
.card:hover .card__img img{transform:scale(1.07)}
.card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.card__body h3{color:var(--ink);margin-bottom:.5rem;transition:color .3s var(--ease-soft)}
.card__body p{color:var(--muted);margin:0}
.card__body p+p{margin-top:1.2rem}
.card__body p:last-child{margin-top:auto;padding-top:1.2rem}

/* Whole-card link. The anchor sits on the heading for screen readers and
   its ::after covers the card so any part of it is clickable. */
.card--link .card__link{color:inherit;position:static}
.card--link .card__link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-md)}
.card--link:hover .card__body h3,
.card--link:focus-within .card__body h3{color:var(--teal-deep)}
.card--link:focus-within{border-color:var(--teal-mint);box-shadow:var(--lift)}
.card--link .card__link:focus-visible{outline:none}
.card--link:focus-within::before{
  content:"";position:absolute;inset:-3px;border-radius:calc(var(--r-md) + 3px);
  border:3px solid var(--purple);z-index:4;pointer-events:none;
}
/* The "Learn more" affordance is decorative now, so it animates with the card */
.card--link .arrow-link{cursor:pointer}
.card--link:hover .arrow-link::after{transform:translateX(4px) rotate(-45deg)}

/* ===== About block ===== */
.about__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.about__media{position:relative}
.about__media>img{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:4/3}
.about__media>img.about__ndis{
  position:absolute;right:-14px;bottom:-14px;width:118px;height:118px;
  background:#fff;border-radius:50%;padding:14px;object-fit:contain;
  box-shadow:var(--lift);aspect-ratio:auto;
}
.about__copy p{color:var(--muted)}

/* Tick list */
.ticks{list-style:none;padding:0;margin:1.5rem 0 1.9rem;display:grid;gap:.9rem}
.ticks li{position:relative;padding-left:2rem;color:var(--ink-soft)}
.ticks strong{color:var(--ink)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

/* ===== Enquire band ===== */
.enquire{position:relative;background-size:cover;background-position:center;color:#fff}
.enquire__overlay{position:absolute;inset:0;background:linear-gradient(92deg,rgba(11,106,99,.96) 12%,rgba(14,122,114,.82) 58%,rgba(14,122,114,.55) 100%)}
.enquire__inner{position:relative;padding:82px 24px}
.enquire__copy{max-width:620px}
.enquire__copy .eyebrow{color:#bfe8e3}
.enquire__copy .eyebrow::before{background:var(--teal-mint)}
.enquire__copy h2{color:#fff}
.enquire__copy p{color:#dcf1ee;font-size:1.1rem}
.enquire__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}

/* ===== Service area list ===== */
.area__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.area__copy p{color:var(--muted);font-size:1.07rem}
.area__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.area__list li{
  display:flex;align-items:center;gap:.7rem;padding:14px 0;
  border-bottom:1px solid var(--line);
  font-family:"Poppins",sans-serif;font-weight:500;color:var(--ink);font-size:1rem;
}
.area__list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}

/* ===== Reviews: Google-style cards ===== */
.greviews{max-width:900px}

/* Summary bar: Google mark, score, write-a-review */
.greviews__summary{
  display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 24px;margin-bottom:22px;
}
.section--tint .greviews__summary{border-color:var(--line-strong)}
.greviews__logo{flex:none;display:grid;place-items:center;width:40px;height:40px}
.greviews__logo svg{width:32px;height:32px}
.greviews__score{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.greviews__score>strong{font-family:"Poppins",sans-serif;font-size:1rem;color:var(--ink);line-height:1.2}
.greviews__rating{display:flex;align-items:center;gap:.55rem}
.greviews__rating b{font-family:"Poppins",sans-serif;font-size:1.16rem;color:#c47500;line-height:1}
.greviews__write{margin-left:auto;padding:.6rem 1.15rem;font-size:.93rem}

/* Gold star row, sized to the text around it */
.gstars{display:inline-flex;gap:2px;line-height:0}
.gstars svg{width:16px;height:16px;fill:#fbbc04;flex:none}

.greview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.greview{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 24px 26px;position:relative;
  transition:box-shadow .45s var(--ease-soft),transform .45s var(--ease-soft),border-color .45s var(--ease-soft);
}
.section--tint .greview{border-color:var(--line-strong)}
.greview:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:var(--teal-mint)}
.greview__head{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.greview__avatar{
  width:42px;height:42px;flex:none;border-radius:50%;background:var(--avatar,#1a73e8);
  color:#fff;display:grid;place-items:center;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:1.15rem;line-height:1;
}
.greview__who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.greview__who strong{font-family:"Poppins",sans-serif;font-size:1rem;color:var(--ink);font-weight:600}
.greview__who span{font-size:.82rem;color:var(--muted)}
.greview__g{margin-left:auto;flex:none;display:grid;place-items:center}
.greview__g svg{width:20px;height:20px;opacity:.9}
.greview .gstars{margin-bottom:.65rem}
.greview p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.62}

/* ===== Contact ===== */
.contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.contact__info p{color:var(--muted)}
.contact__list{list-style:none;padding:0;margin:1.7rem 0 0;display:grid;gap:0}
.contact__list li{display:flex;align-items:center;gap:1rem;padding:16px 0;border-bottom:1px solid var(--line)}
.contact__list li:first-child{border-top:1px solid var(--line)}
.contact__icon{width:40px;height:40px;flex:none;border-radius:var(--r-xs);background:var(--teal-tint);display:grid;place-items:center}
.contact__icon svg{width:19px;height:19px;fill:var(--teal-deep)}
.contact__list strong{display:block;font-family:"Poppins",sans-serif;font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.contact__list a,.contact__list span{color:var(--ink);font-size:1.04rem}
.contact__list a:hover{color:var(--teal-deep)}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:"Poppins",sans-serif;font-size:.86rem;font-weight:500;margin-bottom:.4rem;color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%;font:inherit;color:var(--ink);padding:.78rem .9rem;border:1.5px solid var(--line-strong);
  border-radius:var(--r-xs);background:#fcfefe;transition:border-color .18s,box-shadow .18s,background .18s;
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230e7a72'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:1.3rem;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--teal-deep);background:#fff;box-shadow:0 0 0 3px rgba(14,122,114,.14);
}
.field textarea{resize:vertical;min-height:120px}
.field span em{font-style:normal;color:var(--muted);font-weight:400;font-size:.82em}
.field input::placeholder,.field textarea::placeholder{color:#93a8ab}
.field.is-invalid input,.field.is-invalid textarea{border-color:#c9483d;background:#fffafa}

.form-note{margin:1rem 0 0;font-size:.95rem;font-weight:600;min-height:1.2em}
.form-note.ok{color:var(--green)}
.form-note.err{color:#b8342a}

/* Honeypot. Off-canvas rather than display:none so bots that skip hidden
   inputs still see it, and never focusable or announced for real users. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===========================================================
   Enquiry wizard
   =========================================================== */
.wizard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 32px 28px;display:flex;flex-direction:column;
}
.section--tint .wizard{border-color:var(--line-strong)}

/* ---- Progress rail ---- */
.wizard__progress{
  list-style:none;margin:0 0 26px;padding:0 0 22px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  border-bottom:1px solid var(--line);counter-reset:none;
}
.wizard__progress li{
  display:flex;align-items:center;gap:.5rem;position:relative;min-width:0;
  font-family:"Poppins",sans-serif;font-size:.84rem;font-weight:500;color:var(--muted);
  transition:color .4s var(--ease-soft);
}
/* Connector runs from this step's dot to the next one, and fills once the
   step is behind you. The last step has nothing to connect to. */
.wizard__progress li::before{
  content:"";position:absolute;left:38px;right:0;top:14px;height:2px;background:var(--line);z-index:0;
}
.wizard__progress li::after{
  content:"";position:absolute;left:38px;top:14px;height:2px;width:0;background:var(--teal);z-index:1;
  transition:width .6s var(--ease-soft);
}
.wizard__progress li.is-done::after{width:calc(100% - 38px)}
.wizard__progress li:last-child::before,.wizard__progress li:last-child::after{display:none}
.wizard__dot{
  position:relative;z-index:2;flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--line-strong);
  color:var(--muted);font-weight:600;font-size:.85rem;
  transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft),
             color .4s var(--ease-soft),transform .4s var(--ease-spring);
}
.section--tint .wizard__progress li::before,
.section--tint .wizard__dot{border-color:var(--line-strong)}
.wizard__label{position:relative;z-index:2;background:#fff;padding-right:.35rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wizard__progress li.is-current{color:var(--teal-deep);font-weight:600}
.wizard__progress li.is-current .wizard__dot{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;transform:scale(1.08)}
.wizard__progress li.is-done{color:var(--ink)}
.wizard__progress li.is-done .wizard__dot{
  background:var(--teal);border-color:var(--teal);color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size:.85rem;background-position:center;background-repeat:no-repeat;
}

/* ---- Panes: only one step is in flow, so the card height eases between steps ---- */
.wizard__panes{position:relative}
.wizard__step{border:0;margin:0;padding:0;min-width:0;display:none}
.wizard__step.is-current{display:block;animation:stepIn .48s var(--ease-soft) both}
.wizard__step.is-current.is-back{animation-name:stepInBack}
@keyframes stepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.wizard__legend{
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1.22rem;color:var(--ink);
  padding:0;margin:0 0 .3rem;letter-spacing:-.015em;line-height:1.25;
}
/* The legend takes focus on each step change so the move is announced.
   It is not an interactive control, so it does not draw a focus ring. */
.wizard__legend:focus,.wizard__legend:focus-visible{outline:none}
.wizard__hint{color:var(--muted);font-size:.95rem;margin:0 0 1.35rem}

/* ---- Choice tiles ---- */
.choices{display:grid;gap:12px}
.choices--row{grid-template-columns:repeat(2,1fr)}
.choice{display:block;cursor:pointer;position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__box{
  display:flex;align-items:center;gap:.9rem;height:100%;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  padding:15px 16px;background:#fcfefe;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft),
             box-shadow .3s var(--ease-soft),transform .3s var(--ease-soft);
}
.choice:hover .choice__box{border-color:var(--teal);background:#fff;transform:translateY(-2px);box-shadow:var(--lift)}
.choice input:focus-visible+.choice__box{outline:3px solid var(--purple);outline-offset:2px}
.choice input:checked+.choice__box{
  border-color:var(--teal-deep);background:var(--teal-tint);
  box-shadow:0 0 0 1px var(--teal-deep) inset;
}
.choice__icon{
  width:38px;height:38px;flex:none;border-radius:var(--r-xs);background:var(--teal-tint-2);
  display:grid;place-items:center;transition:background .3s var(--ease-soft)
}
.choice__icon svg{width:20px;height:20px;fill:var(--teal-deep)}
.choice input:checked+.choice__box .choice__icon{background:#fff}
.choice__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;line-height:1.35}
.choice__text strong{font-family:"Poppins",sans-serif;font-weight:600;font-size:.99rem;color:var(--ink)}
.choice__text span{font-size:.87rem;color:var(--muted)}
.choice__mark{
  width:22px;height:22px;flex:none;margin-left:auto;border-radius:50%;
  border:2px solid var(--line-strong);background:#fff;
  transition:background .28s var(--ease-soft),border-color .28s var(--ease-soft),transform .3s var(--ease-spring);
}
.choice input:checked+.choice__box .choice__mark{
  border-color:var(--teal-deep);background:var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/.8rem no-repeat;
  transform:scale(1.1);
}
.choices.is-invalid .choice__box{border-color:#c9483d}

/* ---- Review step ---- */
.wizard__summary{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.wizard__summary>div{
  display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.wizard__summary dt{
  font-family:"Poppins",sans-serif;font-size:.76rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin:0;
}
.wizard__summary dd{margin:0;color:var(--ink);font-size:1rem}
.wizard__summary dd .tagline{display:flex;flex-wrap:wrap;gap:.4rem}
.wizard__summary .tag{
  display:inline-block;background:var(--teal-tint);color:var(--teal-ink);
  border-radius:100px;padding:.25rem .7rem;font-size:.86rem;font-weight:600;
}
.wizard__summary dd.is-empty{color:var(--muted);font-style:italic}
.wizard__consent{margin:1.25rem 0 0;font-size:.86rem;color:var(--muted)}
.wizard__consent a{text-decoration:underline;text-underline-offset:3px}

/* ---- Success state ---- */
.wizard__done{text-align:center;padding:26px 0 10px;animation:stepIn .5s var(--ease-soft) both}
.wizard__done-icon{
  width:60px;height:60px;margin:0 auto 1rem;border-radius:50%;display:block;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/1.9rem no-repeat;
  animation:popIn .5s .1s var(--ease-spring) both;
}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.wizard__done h3{margin-bottom:.4rem}
.wizard__done p{color:var(--muted);margin:0 auto;max-width:44ch}
.wizard__done a{text-decoration:underline;text-underline-offset:3px}

/* ---- Nav ---- */
.wizard__nav{
  display:flex;align-items:center;gap:.75rem;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.wizard__count{font-size:.88rem;color:var(--muted);margin-right:auto}
.wizard__back+.wizard__count{margin-left:.25rem}
.wizard__nav .btn{padding:.75rem 1.4rem}

/* ===== Footer ===== */
.footer{background:var(--ink);color:#c3d3d4}
.footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding:58px 24px 40px}
.footer__brand{display:flex;gap:1rem;align-items:flex-start;max-width:420px}
.footer__brand img{width:48px;height:48px;background:#fff;border-radius:var(--r-xs);padding:5px;object-fit:contain;flex:none}
.footer__brand strong{font-family:"Poppins",sans-serif;color:#fff;font-size:1.04rem;display:block;margin-bottom:.35rem}
.footer__brand p{color:#93a9ab;font-size:.94rem;margin:0}
.footer__col-title{
  font-family:"Poppins",sans-serif;font-size:.74rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--teal-mint);margin:0 0 1rem;
}
.footer__nav,.footer__contact{display:flex;flex-direction:column;gap:.65rem;align-items:flex-start}
.footer__nav a,.footer__contact a,.footer__contact span{color:#c3d3d4;font-size:.97rem;position:relative}
.footer__nav a::after,.footer__contact a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--teal-mint);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.footer__nav a:hover,.footer__contact a:hover{color:var(--teal-mint)}
.footer__nav a:hover::after,.footer__contact a:hover::after{transform:scaleX(1)}
.footer__bar{border-top:1px solid rgba(255,255,255,.11)}
.footer__bar-inner{display:flex;justify-content:space-between;gap:12px;padding:18px 24px;font-size:.85rem;color:#879b9d;flex-wrap:wrap}
.footer__credit a{color:#b9cbcc;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.footer__credit a:hover{color:var(--teal-mint);border-color:var(--teal-mint)}

/* ===========================================================
   Inner pages
   =========================================================== */

/* The inner keeps the site's 1160px wrap so the heading lines up with every
   section below it. The text column is measured separately, not by shrinking
   the wrap, which is what used to push the whole header off-axis. */
.pagehero{background:linear-gradient(168deg,#f3faf9 0%,#eaf6f4 55%,#fff 100%);border-bottom:1px solid var(--line)}
.pagehero__inner{padding:56px 24px 64px}
.pagehero__copy{max-width:var(--measure)}
.pagehero h1{margin-bottom:.5rem;font-size:clamp(2rem,3.7vw,2.9rem);max-width:18ch}
.pagehero p{color:var(--muted);font-size:1.06rem;margin:0;max-width:56ch}
.pagehero .hero__actions{margin:1.6rem 0 0}
.pagehero--split .pagehero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pagehero--split .pagehero__copy{max-width:none}
.pagehero__media{position:relative}
.pagehero__media::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;
  border:2px solid var(--teal-mint);border-radius:var(--r-lg);
}
.pagehero__media img{position:relative;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--lift-lg)}
/* Portrait source photos need their subject pinned near the top of the frame. */
img[data-focus="top"]{object-position:50% 12%}

/* Breadcrumbs */
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:1.2rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.45rem;color:var(--line-strong)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* Prose */
.prose{max-width:68ch}
.prose h2{margin-top:0}
.prose h3{margin-top:1.9rem;color:var(--ink)}
.prose p,.prose li{color:var(--muted)}
.prose ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:0 0 1.3rem}
.prose strong{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* Split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--media-right .split__media{order:2}
.split__media img{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:4/3}
.split__copy p{color:var(--muted)}
.split__copy h2{margin-top:0}

/* ===== Value tiles: ruled columns, no boxes ===== */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 44px}
.tile{position:relative;padding-top:24px;border-top:2px solid var(--line)}
.tile::after{
  content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--teal);
  transition:width .8s var(--ease);transition-delay:inherit;
}
.tile.is-in::after{width:100%}
.tile__icon{width:30px;height:30px;margin-bottom:.9rem;display:grid;place-items:center}
.tile__icon svg{width:28px;height:28px;fill:var(--teal-deep)}
.tile h3{font-size:1.1rem;margin-bottom:.4rem}
.tile p{color:var(--muted);margin:0;font-size:.98rem}

/* ===== Steps: connected timeline, no boxes ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;counter-reset:step}
.steps--3{grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding-top:58px}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;
  background:var(--purple);color:#fff;display:grid;place-items:center;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1rem;z-index:2;
}
.step::after{
  content:"";position:absolute;top:19px;left:52px;right:-34px;height:2px;background:var(--line-strong);z-index:1;
}
.step:last-child::after{display:none}
.step h3{font-size:1.06rem;margin-bottom:.35rem}
.step p{color:var(--muted);margin:0;font-size:.96rem}

/* ===== Panel: tinted, ruled left edge ===== */
.panel{background:var(--teal-tint);border-left:3px solid var(--teal);border-radius:0 var(--r-md) var(--r-md) 0;padding:32px 34px}
.section--tint .panel{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal)}
.panel h3{margin-top:0;color:var(--ink)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.checks li{position:relative;padding-left:1.85rem;color:var(--ink-soft);font-size:.99rem}
.checks li::before{
  content:"";position:absolute;left:0;top:.4em;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/.78rem no-repeat;
}

/* ===== FAQ: ruled rows in one frame ===== */
.faq{max-width:860px;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 52px 20px 0;position:relative;
  font-family:"Poppins",sans-serif;font-weight:600;color:var(--ink);
  transition:color .2s;
}
.faq summary:hover{color:var(--teal-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:14px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--teal-deep);border-bottom:2.5px solid var(--teal-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details[open] summary{color:var(--teal-deep)}
.faq__body{padding:0 40px 22px 0;color:var(--muted);animation:faqOpen .35s var(--ease)}
.faq__body p:last-child{margin:0}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===== Stats: ruled row ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);text-align:left}
.stat{padding:30px 32px 6px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-family:"Poppins",sans-serif;font-size:clamp(2.1rem,4vw,2.8rem);color:var(--teal-deep);line-height:1.05;letter-spacing:-.03em;margin-bottom:.3rem}
.stat span{color:var(--muted);font-size:.97rem}

/* ===== Places: directory rows ===== */
.places{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.place{
  display:grid;grid-template-columns:170px 1fr;gap:1.1rem;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.place h3{margin:0;font-size:1.05rem;color:var(--ink);display:flex;align-items:baseline;gap:.55rem}
.place h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;transform:translateY(-2px)}
.place p{color:var(--muted);margin:0;font-size:.97rem}

/* ===== Related services: ruled rows with arrows ===== */
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.related a{
  display:block;padding:24px 40px 24px 0;border-top:2px solid var(--line);position:relative;
  transition:border-color .3s var(--ease),padding-left .3s var(--ease);
}
.related a:hover{border-color:var(--teal);padding-left:10px}
.related a::after{
  content:"";position:absolute;right:12px;top:34px;width:9px;height:9px;
  border-right:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep);
  transform:rotate(-45deg);transition:transform .28s var(--ease);
}
.related a:hover::after{transform:translateX(5px) rotate(-45deg)}
.related strong{display:block;font-family:"Poppins",sans-serif;font-size:1.08rem;color:var(--ink);margin-bottom:.3rem}
.related span{color:var(--muted);font-size:.96rem}

/* ===== CTA band ===== */
.ctaband{background:var(--teal-deep);color:#fff;position:relative;overflow:hidden}
.ctaband::after{
  content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
}
.ctaband__inner{padding:72px 24px;max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.ctaband .eyebrow{color:#bfe8e3;justify-content:center}
.ctaband .eyebrow::before{background:var(--teal-mint)}
.ctaband h2{color:#fff}
.ctaband p{color:#d3ecea;font-size:1.07rem;margin-bottom:0}
.ctaband__actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}

/* ===== Error page ===== */
.error{text-align:center;padding:120px 24px}
.error .eyebrow{justify-content:center}
.error h1{font-size:clamp(3.2rem,10vw,5.5rem);color:var(--teal-deep);letter-spacing:-.04em}
.error p{color:var(--muted);max-width:46ch;margin:0 auto 1.8rem}

/* ===========================================================
   Motion
   =========================================================== */

/* Scroll reveal. Longer travel on a decelerating curve so elements settle
   rather than pop, and the transform is cleared once it lands so nothing
   stays in its own stacking context. */
.js [data-reveal]{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-soft),transform .95s var(--ease-soft);
  will-change:opacity,transform;
}
.js [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

/* Hero entrance: same curve, staggered by data-lift, runs on load */
.js [data-lift]{opacity:0;transform:translate3d(0,22px,0)}
.js .hero.is-ready [data-lift]{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-soft),transform 1s var(--ease-soft);
}
.js .hero.is-ready [data-lift="1"]{transition-delay:.05s}
.js .hero.is-ready [data-lift="2"]{transition-delay:.14s}
.js .hero.is-ready [data-lift="3"]{transition-delay:.23s}
.js .hero.is-ready [data-lift="4"]{transition-delay:.32s}
.js .hero.is-ready [data-lift="5"]{transition-delay:.41s}
/* The media column arrives with a touch of scale so it feels like one piece */
.js .hero__media[data-lift]{transform:translate3d(0,26px,0) scale(.985);transform-origin:50% 70%}
.js .hero.is-ready .hero__media[data-lift]{transform:none}

/* Parallax drift, driven by main.js writing --shift */
[data-parallax]{transform:translate3d(0,var(--shift,0px),0)}

/* Section headings pick up a soft underline sweep as they land */
.section__head h2{position:relative}

/* Images inside revealed media blocks ease out of a slight scale */
.js .split__media[data-reveal] img,
.js .about__media[data-reveal]>img:first-child{
  transform:scale(1.04);transition:transform 1.4s var(--ease-soft);
}
.js .split__media[data-reveal].is-in img,
.js .about__media[data-reveal].is-in>img:first-child{transform:none}

/* Ruled list rows nudge on hover instead of sitting inert */
.area__list li,.place{transition:transform .35s var(--ease-soft),border-color .35s var(--ease-soft)}
.area__list li:hover,.place:hover{transform:translateX(4px);border-color:var(--teal-mint)}
.trust__item{transition:transform .4s var(--ease-soft)}
.trust__item:hover{transform:translateY(-3px)}
.stat{transition:transform .4s var(--ease-soft)}
.stat:hover{transform:translateY(-3px)}
.contact__list li{transition:transform .35s var(--ease-soft)}
.contact__list li:hover{transform:translateX(4px)}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1000px){
  .hero__inner{gap:44px}
  .split,.about__grid,.area__grid,.contact__grid{gap:44px}
}

@media (max-width:900px){
  .section{padding:68px 0}
  :target,[id]{scroll-margin-top:78px}

  .hero__inner{grid-template-columns:1fr;gap:40px;padding-top:52px;padding-bottom:64px}
  .hero__media{order:-1;max-width:640px}
  /* Stacked, the lead still needs a readable measure, just a wider one. */
  .lead{max-width:54ch}
  .about__grid,.area__grid,.contact__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .greview-grid{grid-template-columns:1fr}
  .greviews{max-width:none}
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__item{border-left:0;padding:20px 0;border-top:1px solid rgba(255,255,255,.2)}
  .trust__item:nth-child(-n+2){border-top:0}
  .trust__item:nth-child(even){padding-left:26px;border-left:1px solid rgba(255,255,255,.2)}
  .footer__inner{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}

  /* Inner pages keep the breadcrumb and heading first when they stack;
     only the homepage hero leads with its photo. */
  .pagehero--split .pagehero__inner{grid-template-columns:1fr;gap:36px}
  .pagehero--split .pagehero__media{max-width:520px}
  .pagehero h1{max-width:none}

  /* Wizard: the rail keeps its dots but drops the labels */
  .wizard{padding:26px 24px 24px}
  .wizard__label{display:none}
  .wizard__progress{gap:0}
  .choices--row{grid-template-columns:1fr}
  .wizard__summary>div{grid-template-columns:1fr;gap:.2rem}
  .split{grid-template-columns:1fr}
  .split--media-right .split__media{order:0}
  .split__media{max-width:560px}
  .tiles{grid-template-columns:1fr 1fr;gap:30px 36px}
  .places{grid-template-columns:1fr;gap:0}
  .stats{grid-template-columns:1fr;border-top:0}
  .stat{border-right:0;border-top:2px solid var(--ink);padding:22px 0 4px}
  .related{grid-template-columns:1fr;gap:0}

  /* Steps become a vertical timeline */
  .steps,.steps--3{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 30px 62px}
  .step:last-child{padding-bottom:0}
  .step::before{top:0;left:0}
  .step::after{top:48px;left:19px;right:auto;bottom:-4px;width:2px;height:auto}
  .step:last-child::after{display:none}

  /* ---- Mobile nav drawer ---- */
  .nav__toggle{display:flex}
  .nav__menu{
    position:fixed;inset:0 0 0 auto;width:min(400px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:#fff;padding:96px 28px 40px;gap:0;
    box-shadow:var(--lift-lg);z-index:300;
    transform:translateX(102%);
    transition:transform .42s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav__menu.open{transform:translateX(0)}
  .nav__menu>li{
    border-bottom:1px solid var(--line);
    opacity:0;transform:translateX(18px);
    transition:opacity .4s var(--ease),transform .4s var(--ease);
  }
  .nav__menu.open>li{opacity:1;transform:none}
  .nav__menu.open>li:nth-child(1){transition-delay:.10s}
  .nav__menu.open>li:nth-child(2){transition-delay:.15s}
  .nav__menu.open>li:nth-child(3){transition-delay:.20s}
  .nav__menu.open>li:nth-child(4){transition-delay:.25s}
  .nav__menu.open>li:nth-child(5){transition-delay:.30s}
  .nav__menu.open>li:nth-child(6){transition-delay:.35s}
  .nav__menu>li>a{
    display:block;padding:1rem .2rem;font-size:1.12rem;font-weight:600;width:100%;
  }
  .nav__menu>li>a::after{display:none}
  .nav__menu>li>a.is-active{color:var(--teal-deep)}
  .nav__menu>li>a.is-active::before{
    content:"";position:absolute;left:-28px;top:50%;transform:translateY(-50%);
    width:4px;height:26px;background:var(--teal);border-radius:0 3px 3px 0;
  }
  .nav__menu li.has-sub{display:flex;flex-wrap:wrap;align-items:center}
  .nav__menu li.has-sub>a{flex:1;padding-right:.2rem}
  .nav__menu li.has-sub>a::before{display:none}

  .nav__sub{
    position:static;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--teal-mint);border-radius:0;
    margin:0 0 0 .2rem;padding:0 0 0 .9rem;min-width:0;flex-basis:100%;
    display:block;
    /* max-height rather than the 0fr grid trick: that only collapses a
       grid's first row, which would leave the other links visible. */
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .34s var(--ease),opacity .25s var(--ease),margin .34s var(--ease);
  }
  .nav__menu li.has-sub.open .nav__sub{max-height:260px;opacity:1;margin-bottom:.9rem}
  .nav__sub a{padding:.6rem .2rem;font-size:1rem}
  .nav__sub a:hover,.nav__sub a:focus-visible{padding-left:.55rem}
  .nav__sub-toggle{
    display:grid;place-items:center;width:46px;height:46px;background:none;border:0;cursor:pointer;flex:none;
  }
  .nav__sub-toggle::before{
    content:"";width:9px;height:9px;border-right:2.5px solid var(--teal-deep);border-bottom:2.5px solid var(--teal-deep);
    transform:translateY(-2px) rotate(45deg);transition:transform .28s var(--ease);
  }
  .nav__sub-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(-135deg)}

  .nav__cta{border-bottom:0!important;margin-top:1.4rem}
  .nav__cta .btn{margin-left:0;width:100%;padding:.9rem 1.2rem;font-size:1.02rem}

  /* Scrim behind the drawer. The sticky header is its own stacking context,
     so it has to outrank the scrim or the drawer inside it gets dimmed too. */
  .nav__scrim{
    position:fixed;inset:0;background:rgba(16,44,42,.5);z-index:290;
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  }
  .nav__scrim.show{opacity:1;visibility:visible}
  body.is-locked .header{z-index:400}

  .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

@media (max-width:600px){
  body{font-size:16px}
  .section{padding:56px 0}
  .wrap{padding:0 20px}
  .cards{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr;gap:26px}
  .trust__grid{grid-template-columns:1fr}
  .trust__item{padding:18px 0;border-left:0!important;padding-left:0!important;border-top:1px solid rgba(255,255,255,.2)}
  .trust__item:first-child{border-top:0}
  .field-row{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;padding:44px 20px 32px}
  .footer__brand{max-width:none}
  .area__list{grid-template-columns:1fr;gap:0}
  .topbar__inner{gap:.9rem;font-size:.82rem;padding-top:10px;padding-bottom:10px}
  .topbar__fb{margin-left:0}
  .header__inner{padding:18px 20px}
  .hero__inner{padding-top:40px;padding-bottom:52px}
  /* Same collage as desktop, just tighter: the two landscape shots keep the
     left column and the portrait keeps the full-height right column. */
  .hero__media{gap:8px;grid-template-columns:1.14fr .86fr}
  .hero__photo{padding:5px}
  .hero__photo--place figcaption{left:6px;right:6px;bottom:6px;font-size:.72rem;padding:.45rem .6rem}
  .pagehero__media::before{inset:12px -12px -12px 12px}
  .hero__badges{max-width:none}
  .pagehero__inner{padding:40px 20px 48px}
  .panel{padding:26px 24px}

  /* Wizard on a phone: full-width buttons, count above them */
  .wizard{padding:22px 18px 20px}
  .wizard__legend{font-size:1.1rem}
  .choice__box{padding:13px 14px;gap:.75rem}
  .choice__icon{width:34px;height:34px}
  .wizard__nav{flex-wrap:wrap;gap:.6rem}
  .wizard__count{order:-1;width:100%;margin:0}
  .wizard__nav .btn{flex:1 1 0;min-width:0}
  .greviews__summary{padding:16px 18px;gap:.85rem}
  .greviews__write{margin-left:0;width:100%}
  .greview{padding:20px 20px 22px}
  .place{grid-template-columns:1fr;gap:.3rem}
  .place h3{min-width:0}
  .enquire__inner{padding:60px 20px}
  .ctaband__inner{padding:56px 20px}
  .error{padding:80px 20px}
  .about__media>img.about__ndis{width:88px;height:88px;padding:10px;right:-6px;bottom:-10px}
}

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],[data-lift]{opacity:1!important;transform:none!important}
  [data-parallax]{--shift:0px!important}
  .tile::after{width:100%}
  .wizard__step.is-current{animation:none}
}

@media print{
  .topbar,.header,.footer,.ctaband,.enquire,.nav__scrim{display:none}
  body{font-size:12pt}
  [data-reveal],[data-lift]{opacity:1;transform:none}
}