/* ==================================================================
   0. FONTS  — self-hosted, SIL Open Font License
   ------------------------------------------------------------------
   Figtree and Stack Sans Headline were loaded from fonts.googleapis.com
   until 2026-07-28. That put a DNS lookup and a TLS handshake to a third
   party on the critical path before first paint, and the stylesheet had to
   arrive before the browser even learned the font URLs. Serving them from
   this origin removes both round trips and the dependency.

   Figtree ships as a VARIABLE font: one file covers 400-900, which is why
   there is a single roman block with a weight range instead of six.
   The unicode-range splits are Google's own — latin-ext is only fetched if
   a page actually uses a character from it, which none currently do.
   Refresh with tools/fetch-fonts.py.
   ================================================================== */
@font-face{font-family:'Figtree';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/figtree-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/figtree-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/figtree-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Stack Sans Headline';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/stack-sans-headline-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Stack Sans Headline';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/stack-sans-headline-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==================================================================
   1. TOKENS  — change the palette here and the whole site follows
   ================================================================== */
:root{
  /* Mallee palette: warm paper, eucalypt, ochre, clay, blush, sky, bark */
  --cream:#FFFCE2;
  --ink:#1E2A24;
  --eucalypt:#2E6F5B;
  --ochre:#F0A93E;
  --clay:#D2643F;
  --blush:#EFA9A0;
  --sky:#7BA7D6;
  --bark:#4A3222;
  --wattle:#D8DE4A;
  --skin:#F0C9A4;
  /* service-area map. --land is deliberately NOT --cream: the land needs to
     read as a drawn shape, not as the page showing through. */
  --water:#DCE9F6;
  --coast:#8AA79C;
  --land:#F5EFD6;
  --land-arid:#F0DCAE;              /* Murray Mallee — dry scrub */
  --land-green:#CDE0B2;             /* Hills, Barossa, Fleurieu — high rainfall */
  --land-range:#A9CB92;             /* the crest of the ranges — elevation tint */
  /* Hero colour field. Eucalypt rather than a blue: it is the brand's own
     primary, it matches the mark, and the palette had no blue in it outside
     --sky, which is the map's water. */
  --hero-deep:var(--eucalypt);
  --hero-mid:#4E9077;

  --nav-h:64px;
  --banner-h:0px;                    /* JS measures the promo banner */
  --top-h:calc(var(--nav-h) + var(--banner-h));
  --edge:4px;                       /* card border weight */
  --r-card:45px;
  --r-panel:32px;
  --pad-sec:clamp(20px,5vw,60px);
  --pad-panel:clamp(24px,4vw,50px);
  --footer-h:460px;                 /* JS overwrites with the real height */
  --card-min:min(600px,72svh);      /* no-JS floor; JS equalises to the real tallest */

  --f-display:"Figtree",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  /* headline face — hero title only */
  --f-headline:"Stack Sans Headline","Figtree",ui-sans-serif,system-ui,sans-serif;
}

/* ==================================================================
   2. RESET / BASE
   ================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  padding-bottom:var(--footer-h);
  background:var(--eucalypt);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.display{font-weight:900;letter-spacing:-.055em;line-height:.88;text-wrap:balance}

/* ==================================================================
   3. BUTTONS
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7em 1.35em;
  border:3px solid var(--ink);border-radius:999px;
  background:var(--ochre);color:var(--ink);
  font-weight:800;font-size:clamp(.95rem,.9rem + .2vw,1.1rem);letter-spacing:-.015em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 4px 0 var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn--ghost{background:var(--cream)}
.btn--alt{background:var(--eucalypt);color:var(--cream)}
.btn--wide{width:100%;justify-content:center}

/* ==================================================================
   4. NAV
   ================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:flex-start;gap:1rem;
  padding:0 clamp(14px,3vw,36px);
  background:var(--ink);color:var(--cream);
}
/* Brand hard left; nav links, phone and referral button together hard right.
   The capacity pill used to sit centred between them and supply this auto
   margin. It was 227px of bar (281px on Riverland) restating one area's figure
   next to a dateline that names them all, so it now lives only in the burger
   menu and the menu picks up the margin. Auto margin rather than
   space-between: the latter would spread the menu and the button apart, and
   they need to read as one group. Inert below 980, where .nav__menu is
   absolutely positioned. */
.nav__menu{margin-left:auto}
.brand{font-weight:800;letter-spacing:-.045em;line-height:.82;text-decoration:none;display:block}
.nav .brand{display:flex;align-items:center;gap:.38rem}
.brand__mark{flex:none;display:block;width:38px;height:38px}
.brand span{display:block}
.brand .b1{font-size:clamp(1.15rem,1rem + .8vw,1.7rem)}
.brand .b2{font-size:clamp(.7rem,.62rem + .35vw,.92rem);font-weight:600;letter-spacing:-.01em;opacity:.82}
.nav__menu{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);list-style:none;padding:0}
/* :not(.btn) so the CTA keeps its own padding, size and border */
.nav__menu a:not(.btn){
  text-decoration:none;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(.95rem,.9rem + .35vw,1.25rem);
  padding:.2em 0;border-bottom:2px solid transparent;
}
.nav__menu a:not(.btn):hover{border-bottom-color:var(--ochre)}
.nav__menu .nav__cta-mobile{display:none}
.nav__burger{
  display:none;width:42px;height:36px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;align-items:stretch;
}
.nav__burger i{display:block;height:5px;border-radius:3px;background:var(--cream);transition:transform .3s,opacity .2s}
.nav.is-open .nav__burger i:nth-child(1){transform:translateY(11px) rotate(45deg)}
.nav.is-open .nav__burger i:nth-child(2){opacity:0}
.nav.is-open .nav__burger i:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

@media (max-width:980px){
  .nav__cta{display:none}
  /* Only the brand and the burger stay in flow here — the pill and the button
     are hidden and the menu is fixed — so the burger needs the auto margin the
     pill was providing. */
  .nav__burger{display:flex;margin-left:auto}
  .nav__menu{
    /* Anchored to the nav, not to a variable, so it stays correct whether or
       not the promo banner is showing. .nav is fixed, so absolute resolves
       against it. */
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:18px;
    padding:26px clamp(14px,4vw,28px) 34px;
    background:var(--ink);
    transform:translateY(-130%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
  }
  .nav.is-open .nav__menu{transform:none}
  .nav__menu a:not(.btn){font-size:1.5rem}
  .nav__menu .nav__cta-mobile{display:inline-flex;margin-top:6px}
}

/* ---- header phone ------------------------------------------------------
   Sits with the referral CTA as one right-hand group, but deliberately
   quieter than it: outlined in cream rather than filled with ochre, so the
   button stays the single loudest thing in the bar.

   Below 1200 the digits drop and the glyph carries the link. That band is
   already tight enough that the capacity pill has to shrink (see above), and
   a second full pill is what tips it into wrapping. The number is never
   actually lost: the aria-label carries it for assistive tech, and below 980
   the glyph stays in the bar as the tap-to-call target while the menu spells
   it out with the hours. Calling matters most on a phone, so this is the one
   control that does NOT retreat into the burger. */
.nav__tel{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.55em .95em;
  border:3px solid var(--cream);border-radius:999px;
  color:var(--cream);text-decoration:none;white-space:nowrap;
  font-weight:800;font-size:clamp(.9rem,.86rem + .18vw,1.02rem);letter-spacing:-.015em;
  transition:background .16s ease,color .16s ease;
}
.nav__tel:hover{background:var(--cream);color:var(--ink)}
.nav__tel-ico{flex:none;display:block}
@media (max-width:1200px){
  .nav__tel{padding:.5em;border-width:2px}
  .nav__tel-num{display:none}
}
@media (max-width:980px){
  /* The burger took margin-left:auto when the pill left the bar. The phone now
     leads the right-hand group, so the auto margin moves to it — otherwise the
     two split to opposite ends of the bar. */
  .nav__tel{order:1;margin-left:auto}
  .nav__burger{order:2;margin-left:0}
}
/* In the burger menu the number is spelled out in full, with the hours. Hidden
   above 980 where the bar link already shows it. */
.nav__tel-item{display:none}
@media (max-width:980px){
  .nav__tel-item{display:block;margin-top:2px}
  .nav__tel-hours{display:block;opacity:.62;font-weight:600;font-size:.95rem;margin-top:2px}
}

/* ==================================================================
   5. PAGE SHELL  (sits above the fixed, reveal-on-scroll footer)
   ================================================================== */
.page{position:relative;z-index:1;background:var(--cream)}
section{scroll-margin-top:calc(var(--top-h) + 16px)}
.panel{background:var(--cream);border-radius:var(--r-panel);padding:var(--pad-panel)}

/* ==================================================================
   6. HERO
   ================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--cream);
  padding:calc(var(--top-h) + clamp(34px,6vw,70px)) var(--pad-sec) clamp(24px,4vw,40px);
  /* Fills the viewport so the ticker sits just below the fold and is
     revealed on the first scroll. */
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;
}
/* Hero colour field.
   Colours and cycle lengths sampled from the original (see CREDITS.md):
   flat cream left, WHITE top-right corner, deep blue bottom-right, and a
   boundary that ripples on a ~1.9s and a ~3.2s beat. Each layer's X and Y
   periods are deliberately mismatched, so the combined path is a Lissajous
   and never reads as an obvious loop. */
.hero__bg{
  /* themeable: the hero runs blue, page headers run lime (see .pagehead below) */
  --field-deep:var(--hero-deep);
  --field-mid:var(--hero-mid);
  --field-pale:#A9CFB9;
  --field-step:#EDF2E6;
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(135deg,
    var(--cream) 0%, var(--cream) 56%,
    var(--field-step) 71%,
    var(--field-pale) 86%,
    var(--field-deep) 100%);
}
.hero__bg .b{position:absolute;display:block;will-change:transform}
.hero__bg .b i{
  display:block;width:100%;height:100%;border-radius:50%;
  filter:blur(70px);will-change:transform;
}
/* deep blue mass, bottom-right */
.hero__bg .b1{width:92vw;height:82vw;right:-30vw;bottom:-44vw;animation:bx1 3.2s ease-in-out infinite alternate}
.hero__bg .b1 i{background:radial-gradient(circle,var(--field-deep) 0%,var(--field-deep) 30%,transparent 70%);animation:by1 4.6s ease-in-out infinite alternate}
/* mid blue, the fast beat */
.hero__bg .b2{width:62vw;height:56vw;right:-18vw;bottom:-16vw;animation:bx2 1.9s ease-in-out infinite alternate}
.hero__bg .b2 i{background:radial-gradient(circle,var(--field-mid) 0%,var(--field-mid) 32%,transparent 72%);opacity:.7;animation:by2 2.7s ease-in-out infinite alternate}
/* cream, eats back into the blue from the top-right */
.hero__bg .b3{width:58vw;height:52vw;right:-12vw;top:-20vw;animation:bx3 2.4s ease-in-out infinite alternate}
.hero__bg .b3 i{background:radial-gradient(circle,var(--cream) 0%,rgba(255,252,226,.92) 42%,rgba(255,252,226,0) 70%);animation:by3 3.4s ease-in-out infinite alternate}

@keyframes bx1{from{transform:translateX(0)}to{transform:translateX(-13vw)}}
@keyframes by1{from{transform:translateY(0) scale(1)}to{transform:translateY(-9vw) scale(1.1)}}
@keyframes bx2{from{transform:translateX(4vw)}to{transform:translateX(-14vw)}}
@keyframes by2{from{transform:translateY(3vw) scale(.94)}to{transform:translateY(-8vw) scale(1.12)}}
@keyframes bx3{from{transform:translateX(2vw)}to{transform:translateX(-10vw)}}
@keyframes by3{from{transform:translateY(-3vw) scale(1.06)}to{transform:translateY(11vw) scale(.92)}}
.hero__inner{position:relative;z-index:1;width:100%;max-width:1360px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px)}
/* Copy-only hero since the illustration came out — it gets more width than
   the 660px it had when it was sharing the row with the artwork. */
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,22px);max-width:min(100%,52rem)}
/* Headline 143px and sub 38px at >=1440px, scaling to 58px / 20px on phones.
   The sub is deliberately the same ink as the headline rather than an accent
   colour — a second colour here fights the hero field behind it. */
.hero h1{
  font-family:var(--f-headline);
  font-weight:700;
  font-size:clamp(3.1rem,1.4rem + 9.4vw,9rem);
  letter-spacing:-.06em;
  line-height:.9;
}
.hero h1 .w{display:inline-block}
.hero__sub{
  font-size:clamp(1.25rem,.854rem + 1.69vw,2.375rem);
  font-weight:500;letter-spacing:-.01em;line-height:1.05;color:var(--ink);
  text-wrap:balance;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.burst{transform-box:view-box;transform-origin:center;animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==================================================================
   7. TICKER
   ================================================================== */
.ticker{background:var(--wattle);border-top:var(--edge) solid var(--ink);border-bottom:var(--edge) solid var(--ink);overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:marquee 40s linear infinite;padding:.42em 0}
.ticker__track span{
  font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1rem + 2.2vw,3.4rem);
  padding-right:.5em;white-space:nowrap;
}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ==================================================================
   8. SERVICES  (sticky stacking cards)
   ================================================================== */
.services{background:var(--bark);padding:var(--pad-sec)}
.services__inner{max-width:1360px;margin:0 auto;display:flex;align-items:flex-start;gap:clamp(24px,4vw,70px)}
.services__head{
  position:sticky;top:calc(var(--top-h) + 34px);flex:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,24px);
}
.services__title{font-size:clamp(2.6rem,1rem + 5.4vw,5rem)}
.services__list{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:clamp(40px,6vw,110px);
  padding:clamp(10px,2vw,24px) 0 clamp(20px,4vw,60px);
}
.card{
  position:sticky;top:calc(var(--top-h) + 34px);
  background:var(--card-bg);color:var(--card-fg,var(--ink));
  border:var(--edge) solid var(--ink);border-radius:var(--r-card);
  padding:clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;gap:.3rem;
  /* Uniform height so stacked cards cover each other exactly —
     without it, the taller card peeks out below the ones on top. */
  min-height:var(--card-min,0px);
}
.card--sky{--card-bg:var(--sky)}
.card--eucalypt{--card-bg:var(--eucalypt);--card-fg:var(--cream)}
.card--ochre{--card-bg:var(--ochre)}
.card--blush{--card-bg:var(--blush)}
.card--wattle{--card-bg:var(--wattle)}
.card--clay{--card-bg:var(--clay);--card-fg:var(--cream)}
.card__num{font-size:clamp(1.5rem,1rem + 1.6vw,2.4rem);font-weight:900;letter-spacing:-.05em;line-height:1;opacity:.6}
.card__art{width:min(58%,240px,26svh);margin:-.3rem auto .1rem}
.card__title{font-size:clamp(1.6rem,1rem + 2.2vw,2.8rem);font-weight:900;letter-spacing:-.045em;line-height:.94}
.card__desc{font-size:clamp(.95rem,.92rem + .28vw,1.15rem);font-weight:500;max-width:46ch;opacity:.9;margin-top:.3rem;line-height:1.35}
.card__extra{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:.9rem;
}
.card__extra li{
  border:2px solid currentColor;border-radius:999px;
  padding:.3em .85em;font-weight:700;font-size:clamp(.82rem,.78rem + .18vw,.98rem);letter-spacing:-.01em;
}

/* ==================================================================
   9. REACH — who we work with / where we work
   ================================================================== */
.reach{background:var(--sky);padding:var(--pad-sec)}
.reach__panel{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px)}
.reach h2{font-size:clamp(1.9rem,1rem + 3.2vw,3.4rem);margin-bottom:clamp(16px,2vw,26px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.chips li{
  border:3px solid var(--ink);border-radius:999px;background:var(--chip,var(--wattle));
  padding:.42em 1em;font-weight:700;font-size:clamp(.9rem,.86rem + .22vw,1.08rem);letter-spacing:-.015em;
}
.chips--alt li{--chip:var(--blush)}
.reach__note{
  margin-top:18px;font-weight:700;letter-spacing:-.02em;color:var(--eucalypt);
  font-size:clamp(1rem,.94rem + .4vw,1.32rem);
}

/* ==================================================================
   10. ABOUT — bento
   ================================================================== */
.about{background:var(--ochre);padding:var(--pad-sec)}
.about__panel{max-width:1360px;margin:0 auto}
.bento{display:grid;grid-template-columns:2fr 3fr;gap:14px}
.bento__right{display:flex;flex-direction:column;gap:14px}
.block{border-radius:25px;padding:clamp(20px,2.6vw,35px);display:flex;flex-direction:column;justify-content:center}
.block--head{background:var(--eucalypt);color:var(--cream)}
.block--head h2{font-size:clamp(2.1rem,1rem + 4vw,4.2rem)}
.block--story{background:var(--bark);color:var(--cream);flex:3}
.block--story p{font-size:clamp(1rem,.92rem + .5vw,1.42rem);font-weight:500;line-height:1.26}
.block--story p + p{margin-top:.85em}
.block--quote{background:var(--ochre);flex:1;border:var(--edge) solid var(--ink)}
.block--quote p{font-size:clamp(1.25rem,.9rem + 1.5vw,2.1rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--bark)}
.block--cta{background:var(--sky);flex:1;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.block--cta p{font-size:clamp(1.25rem,.9rem + 1.5vw,2.1rem);font-weight:700;letter-spacing:-.04em;line-height:1}

/* ==================================================================
   11. TESTIMONIALS
   ================================================================== */
.quotes{background:var(--blush);padding:var(--pad-sec)}
.quotes__panel{max-width:1360px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);align-items:center}
.quotes__head{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,22px)}
.quotes h2{font-size:clamp(2.2rem,1rem + 4.6vw,5rem);text-align:center;color:var(--bark)}
.gbadge{
  display:inline-flex;align-items:center;gap:clamp(8px,1.1vw,14px);
  background:#fff;border-radius:999px;
  padding:.5em clamp(14px,1.5vw,22px);
  box-shadow:0 3px 0 rgba(30,42,36,.14);
}
.gbadge__g{width:1.55em;height:1.55em;flex:none}
.gbadge__score{font-weight:800;letter-spacing:-.02em;color:#202124;font-size:clamp(1rem,.92rem + .4vw,1.35rem)}
.gbadge__stars{color:#E3B22B;letter-spacing:.1em;line-height:1;font-size:clamp(1rem,.9rem + .5vw,1.45rem)}
.quotes__row{display:flex;gap:clamp(16px,2.4vw,33px);width:100%;justify-content:center;flex-wrap:wrap}
.quote{
  flex:1 1 260px;max-width:400px;
  border:var(--edge) solid var(--ink);border-radius:44px;
  padding:clamp(22px,2.6vw,40px) clamp(20px,2.2vw,34px);
  background:var(--q-bg);color:var(--q-fg,var(--ink));
  display:flex;flex-direction:column;gap:20px;justify-content:space-between;
}
.quote--ochre{--q-bg:var(--ochre);--q-fg:var(--bark)}
.quote--eucalypt{--q-bg:var(--eucalypt);--q-fg:var(--cream)}
.quote--sky{--q-bg:var(--sky)}
.quote__stars{font-size:clamp(1rem,.9rem + .5vw,1.35rem);letter-spacing:.14em;line-height:1}
.quote p{font-size:clamp(1rem,.9rem + .62vw,1.45rem);font-weight:700;letter-spacing:-.025em;line-height:1.12;text-wrap:pretty}
.quote__by{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.quote__name{font-weight:800;font-size:clamp(.9rem,.85rem + .2vw,1rem);letter-spacing:-.01em}
.quote__tag{
  border:2px solid var(--ink);border-radius:999px;background:var(--cream);color:var(--eucalypt);
  padding:.35em .9em;font-weight:800;font-size:clamp(.8rem,.76rem + .18vw,.95rem);letter-spacing:-.01em;
}

/* ==================================================================
   12. CONTACT
   ================================================================== */
.contact{background:var(--cream);padding:var(--pad-sec)}
.contact__panel{
  max-width:1360px;margin:0 auto;background:var(--blush);
  border-radius:var(--r-panel);padding:var(--pad-panel);
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,32px);
}
.contact h2{font-size:clamp(2.2rem,1rem + 4.6vw,5rem);color:var(--bark);text-align:center}
.contact__lede{max-width:46ch;text-align:center;font-weight:600;font-size:clamp(1rem,.94rem + .4vw,1.3rem);color:var(--bark)}
.contact__btn{width:min(100%,420px);justify-content:center;font-size:clamp(1rem,.95rem + .3vw,1.25rem);padding:.85em 1.4em}
.contact__alt{font-weight:600;font-size:clamp(.95rem,.9rem + .3vw,1.15rem);color:var(--bark);text-align:center}
.contact__alt a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.site-footer__fine a{text-decoration:underline;text-underline-offset:2px}

/* ==================================================================
   12b. REFERRAL MODAL  (native <dialog> — free focus trap, ESC, top layer)
   ================================================================== */
.modal{
  width:min(1120px,94vw);
  height:min(1040px,92vh);
  height:min(1040px,92svh);
  max-width:none;max-height:none;
  padding:0;
  border:var(--edge) solid var(--ink);border-radius:var(--r-panel);
  background:var(--cream);color:var(--ink);
  overflow:hidden;
}
.modal::backdrop{background:rgba(30,42,36,.6)}
/* Scroll lock is declarative on purpose. Doing it in JS means restoring it in a
   'close' handler, and that event does not fire reliably everywhere — a missed
   one leaves the page permanently unscrollable. This cannot get stuck. */
html:has(dialog[open]){overflow:hidden}

.modal[open]{display:flex;flex-direction:column}
.modal__bar{
  flex:none;display:flex;align-items:center;gap:clamp(10px,2vw,18px);
  padding:12px clamp(14px,2vw,22px);
  background:var(--ochre);border-bottom:3px solid var(--ink);
}
.modal__title{
  margin-right:auto;font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.05rem,.95rem + .6vw,1.6rem);
}
.modal__ext{font-weight:700;font-size:clamp(.8rem,.76rem + .2vw,.95rem);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.modal__close{
  flex:none;width:42px;height:42px;padding:0;
  border:3px solid var(--ink);border-radius:999px;background:var(--cream);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .15s ease,background .15s ease;
}
.modal__close:hover{background:#fff;transform:scale(1.06)}
.modal__frame{flex:1;width:100%;border:0;background:var(--cream)}
@media (max-width:760px){
  .modal{width:100vw;height:100vh;height:100svh;border-radius:0;border-width:0}
}

/* ==================================================================
   13. FOOTER  (fixed behind the page, revealed at the end of scroll)
   ================================================================== */
.site-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:0;
  background:var(--eucalypt);color:var(--cream);
  padding:clamp(26px,4vw,44px) var(--pad-sec) clamp(20px,3vw,32px);
  display:flex;flex-direction:column;gap:clamp(18px,3vw,34px);
}
.site-footer__row{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.site-footer__links{display:flex;gap:clamp(14px,2vw,28px);list-style:none;padding:0}
.site-footer__links a{text-decoration:none;font-weight:600;letter-spacing:-.02em;font-size:clamp(1.05rem,.95rem + .5vw,1.5rem)}
.site-footer__links a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer__big{
  font-size:clamp(3rem,.4rem + 13.5vw,13.5rem);
  font-weight:900;letter-spacing:-.06em;line-height:.86;
  color:var(--ink);text-align:center;
}
.site-footer__fine{font-size:clamp(.78rem,.75rem + .12vw,.9rem);font-weight:500;opacity:.8;text-align:center;text-wrap:balance;max-width:80ch;margin-inline:auto}

/* ==================================================================
   14. REVEAL ON SCROLL
   ================================================================== */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .hero h1 .w{opacity:0;transform:translateY(.28em);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 90ms)}
.js .hero h1.is-in .w{opacity:1;transform:none}

/* ==================================================================
   15. BREAKPOINTS
   ================================================================== */
@media (max-width:1100px){
  :root{--card-min:min(560px,70svh)}
  .hero__inner{flex-direction:column;align-items:center;text-align:center}
  .hero__copy{align-items:center;max-width:620px}
  .hero__actions{justify-content:center}
  .services__inner{flex-direction:column;align-items:stretch}
  .services__head{position:static;align-items:center;text-align:center}
  .reach__panel{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .block--head{min-height:170px}
}
@media (max-width:760px){
  :root{--r-card:30px;--r-panel:24px;--edge:3px;--card-min:0px}
  .form__row{flex-direction:column}
  .quote{border-radius:30px;max-width:none}
  .block--cta{flex-direction:column;align-items:flex-start}
  .site-footer__row{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track,.burst,.hero__bg .b,.hero__bg .b i{animation:none}
  .js .reveal,.js .hero h1 .w{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

/* ==================================================================
   16. SERVICES PAGE  (services.html)
   ================================================================== */
.pagehead{
  position:relative;overflow:hidden;background:var(--cream);
  padding:calc(var(--top-h) + clamp(40px,6vw,84px)) var(--pad-sec) clamp(26px,3vw,44px);
}
.pagehead__inner{
  position:relative;z-index:1;max-width:1000px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,24px);
}
.pagehead h1{
  font-family:var(--f-headline);font-weight:700;
  letter-spacing:-.06em;line-height:.9;
  font-size:clamp(2.6rem,1.2rem + 6vw,6rem);
}
.pagehead__lede{font-size:clamp(1.05rem,.95rem + .55vw,1.5rem);font-weight:500;max-width:54ch;line-height:1.3}
.jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;padding:0;margin-top:.4em}
.jump a{
  display:inline-block;text-decoration:none;font-weight:700;
  border:3px solid var(--ink);border-radius:999px;background:var(--wattle);
  padding:.42em 1em;font-size:clamp(.86rem,.82rem + .22vw,1.02rem);
  transition:background .15s ease,transform .15s ease;
}
.jump a:hover{background:var(--ochre);transform:translateY(-2px)}

.svc{padding:clamp(28px,4vw,56px) var(--pad-sec);background:var(--cream)}
.svc + .svc{border-top:3px solid rgba(30,42,36,.12)}
.svc__inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.svc:nth-of-type(even) .svc__art{order:2}
.svc__art{
  border:var(--edge) solid var(--ink);border-radius:var(--r-card);
  background:var(--art-bg,var(--sky));
  padding:clamp(16px,2.2vw,30px);display:grid;place-items:center;
}
.svc__art svg{width:min(100%,290px);height:auto}
.svc__num{font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);font-weight:900;opacity:.45;letter-spacing:-.05em;line-height:1}
.svc h2{font-size:clamp(1.85rem,1.2rem + 2.5vw,3.3rem);font-weight:900;letter-spacing:-.045em;line-height:.94;margin:.12em 0 .35em}
.svc__body{font-size:clamp(1rem,.95rem + .4vw,1.28rem);font-weight:500;line-height:1.42;max-width:54ch}
.svc__list{margin:1.15em 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5em}
.svc__list li{padding-left:1.55em;position:relative;font-weight:600;font-size:clamp(.95rem,.9rem + .3vw,1.14rem);line-height:1.35}
.svc__list li::before{content:"→";position:absolute;left:0;top:0;color:var(--eucalypt);font-weight:800}
.svc__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5em}

.steps{background:var(--bark);padding:var(--pad-sec)}
.steps__panel{max-width:1180px;margin:0 auto}
.steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(20px,3vw,32px)}
.step{border:var(--edge) solid var(--ink);border-radius:25px;padding:clamp(18px,2.2vw,28px);background:var(--step-bg,var(--wattle))}
.step h3{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:.4em}
.step p{font-weight:500;font-size:clamp(.92rem,.88rem + .28vw,1.08rem);line-height:1.35}
.step__n{font-weight:900;opacity:.45;font-size:1.1rem;letter-spacing:-.04em}

@media (max-width:900px){
  .svc__inner{grid-template-columns:1fr;gap:clamp(18px,3vw,30px)}
  .svc:nth-of-type(even) .svc__art{order:0}
  .svc__art svg{width:min(78%,260px)}
}
/* The colour field is a hero device. On the shorter page header it needs
   dialling back, and fading out so it doesn't cut hard at the section edge. */
.pagehead .hero__bg{
  --field-deep:#8FAF14;
  --field-mid:#C3D723;
  --field-pale:#DCE86F;
  --field-step:#F2F5D9;
  opacity:.62;
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 45%,transparent 96%);
}

/* ==================================================================
   17. LOCATIONS  (locations.html, locations/*.html)
   ================================================================== */
.locwrap{max-width:900px;margin:0 auto}
.locwrap__h{font-size:clamp(1.7rem,1.2rem + 2vw,2.8rem);font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:clamp(18px,2.4vw,30px)}
.crumbs{font-weight:600;font-size:clamp(.85rem,.8rem + .2vw,1rem);opacity:.72;display:flex;gap:.5em;flex-wrap:wrap;justify-content:center}
.crumbs a{text-decoration:underline;text-underline-offset:3px}

.locgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.6vw,18px);list-style:none;padding:0;margin:0}
.loccard{
  display:flex;flex-direction:column;gap:.25em;
  border:var(--edge) solid var(--ink);border-radius:25px;
  background:var(--wattle);padding:clamp(18px,2.2vw,26px);
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.loccard:hover{background:var(--ochre);transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)}
.loccard__name{font-weight:900;letter-spacing:-.035em;font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.05}
.loccard__region{font-weight:600;font-size:clamp(.85rem,.8rem + .2vw,1rem);opacity:.72}
.loccard--soon{background:rgba(30,42,36,.06);border-style:dashed;cursor:default}
.loccard--soon:hover{background:rgba(30,42,36,.06);transform:none;box-shadow:none}
.locnote{margin-top:clamp(18px,2.4vw,28px);font-weight:700;text-align:center;color:var(--eucalypt);font-size:clamp(.95rem,.9rem + .35vw,1.2rem)}
/* NOTE: these sit on the CREAM .panel nested inside .steps, not on the bark
   section background. The "--dark" suffix names the section, which is the wrong
   thing to colour against — cream here is invisible. */
.locnote--dark{color:var(--bark);opacity:.9;text-align:left}
.locnear{margin-top:.8em}
.locnear__lede{font-weight:700;color:var(--ink);font-size:clamp(1rem,.94rem + .35vw,1.25rem)}

.locsvc{padding:clamp(18px,2.4vw,28px) 0;border-top:3px solid rgba(30,42,36,.12)}
.locsvc:first-of-type{border-top:0;padding-top:0}
.locsvc h2{font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin-bottom:.4em}
.locsvc p{font-size:clamp(1rem,.95rem + .35vw,1.2rem);font-weight:500;line-height:1.42;max-width:62ch}
.locsvc__more{margin-top:.6em}
.locsvc__more a{font-weight:700;text-decoration:underline;text-underline-offset:3px}

.faqs{background:var(--cream)}
.faq{border-bottom:3px solid rgba(30,42,36,.14);padding:clamp(12px,1.6vw,18px) 0}
.faq summary{
  cursor:pointer;font-weight:800;letter-spacing:-.025em;list-style:none;
  font-size:clamp(1.02rem,.96rem + .5vw,1.35rem);
  display:flex;justify-content:space-between;gap:1em;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:900;font-size:1.3em;line-height:1;color:var(--eucalypt)}
.faq[open] summary::after{content:"−"}
.faq p{margin-top:.7em;font-weight:500;line-height:1.45;max-width:62ch;font-size:clamp(.98rem,.93rem + .3vw,1.15rem)}

/* ---- service-area map (drawn from coordinates, not an embed) ---- */
.mapsec{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(20px,3vw,36px)}
.mapfig{margin:0}
.svgmap{
  width:100%;height:auto;display:block;
  background:var(--cream);
  border:var(--edge) solid var(--ink);border-radius:var(--r-card);
  padding:clamp(10px,1.6vw,20px);
}
.svgmap__lbl{
  font-family:var(--f-display);font-size:19px;font-weight:700;
  fill:var(--ink);letter-spacing:-.02em;paint-order:stroke;
  stroke:var(--cream);stroke-width:5px;stroke-linejoin:round;
}
.svgmap__lbl--on{font-size:22px;font-weight:900}
.svgmap__river{
  font-family:var(--f-display);font-size:16px;font-weight:600;
  fill:var(--sky);letter-spacing:.02em;
}
.mapfig figcaption{
  margin-top:.9em;text-align:center;font-weight:600;
  font-size:clamp(.9rem,.86rem + .25vw,1.05rem);opacity:.75;
}

/* ==================================================================
   18. CONTACT FORM  (modal + inline on the homepage)
   ================================================================== */
.cform{width:min(100%,620px);display:flex;flex-direction:column;gap:16px}
.cform__row{display:flex;gap:16px}
.cform__row > *{flex:1;min-width:0}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-weight:700;font-size:clamp(.9rem,.86rem + .18vw,1.05rem);letter-spacing:-.01em}
.field input,.field select,.field textarea{
  width:100%;background:var(--cream);color:var(--ink);
  border:2px solid var(--ink);border-radius:10px;padding:13px;
  font-weight:600;font-size:clamp(.98rem,.94rem + .22vw,1.15rem);letter-spacing:-.01em;
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(30,42,36,.42);font-weight:500}
.field input:invalid:not(:placeholder-shown){border-color:var(--clay)}
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__cap span b{font-variant-numeric:tabular-nums}
.cform__note{font-weight:700;min-height:1.4em;font-size:.95rem}
.cform__note[data-state="ok"]{color:var(--eucalypt)}
.cform__note[data-state="err"]{color:var(--clay)}
.cform__fine{font-size:.85rem;font-weight:500;opacity:.7;line-height:1.35}

.contactsec{background:var(--sky);padding:var(--pad-sec)}
.contactsec__panel{
  max-width:1180px;margin:0 auto;background:var(--cream);
  border-radius:var(--r-panel);padding:var(--pad-panel);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.contactsec h2{font-size:clamp(2rem,1.2rem + 3.4vw,4rem);font-weight:900;letter-spacing:-.05em;line-height:.92}
.contactsec__lede{margin-top:.7em;font-weight:500;font-size:clamp(1rem,.95rem + .4vw,1.25rem);line-height:1.4;max-width:40ch}
.contactsec__alt{margin-top:1.1em;font-weight:700;font-size:clamp(.95rem,.9rem + .3vw,1.12rem)}
.contactsec__alt a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .contactsec__panel{grid-template-columns:1fr}
  .cform__row{flex-direction:column}
}

/* contact modal: a scrolling body rather than the referral modal's iframe */
.modal--contact{height:auto;max-height:92svh;width:min(680px,94vw)}
.modal__body{overflow-y:auto;padding:clamp(20px,3vw,34px);display:flex;justify-content:center}
@media (max-width:760px){.modal--contact{height:100svh;max-height:none}}

/* chips that are links fill their whole pill */
.chips li:has(a){padding:0}
.chips li a{
  display:block;color:inherit;text-decoration:none;
  padding:.42em 1em;border-radius:999px;
  transition:background .15s ease;
}
.chips li a:hover{background:rgba(30,42,36,.12)}
.locsvc__links a{text-decoration:underline;text-underline-offset:3px;font-weight:800}
.locnote--dark a{color:var(--bark);text-decoration:underline;text-underline-offset:3px}

/* ---- location page: expandable service cards ------------------------- */
.svccard{
  border:var(--edge) solid var(--ink);border-radius:24px;
  background:var(--cream);
  transition:box-shadow .16s ease,transform .16s ease;
}
.svccard + .svccard{margin-top:14px}
.svccard:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.svccard[open]{box-shadow:0 5px 0 var(--ink)}
.svccard > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  padding:clamp(12px,1.6vw,18px);
}
.svccard > summary::-webkit-details-marker{display:none}
.svccard > summary:focus-visible{outline:3px solid var(--clay);outline-offset:-3px;border-radius:21px}
.svccard__art{
  flex:none;width:clamp(60px,7vw,88px);aspect-ratio:1;
  background:var(--art-bg,var(--sky));
  border:3px solid var(--ink);border-radius:16px;
  display:grid;place-items:center;overflow:hidden;
}
.svccard__art svg{width:88%;height:88%}
.svccard__t{display:flex;flex-direction:column;gap:.12em;margin-right:auto;min-width:0}
.svccard__h{font-weight:900;letter-spacing:-.035em;line-height:1.02;font-size:clamp(1.02rem,.92rem + .7vw,1.55rem)}
.svccard__s{font-weight:600;opacity:.6;font-size:clamp(.85rem,.82rem + .2vw,1rem)}
.svccard__chev{
  flex:none;width:32px;height:32px;border-radius:999px;
  border:3px solid var(--ink);background:var(--cream);position:relative;
}
.svccard__chev::before,.svccard__chev::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:2px;
}
.svccard__chev::before{width:13px;height:3px;transform:translate(-50%,-50%)}
.svccard__chev::after{width:3px;height:13px;transform:translate(-50%,-50%);transition:opacity .18s ease}
.svccard[open] .svccard__chev::after{opacity:0}
.svccard__body{padding:0 clamp(12px,1.6vw,18px) clamp(16px,2vw,22px)}
.svccard__body p{font-size:clamp(.98rem,.94rem + .3vw,1.16rem);font-weight:500;line-height:1.45;max-width:64ch}
.svccard__body .locsvc__more{margin-top:.85em}
@media (max-width:560px){
  .svccard > summary{gap:12px;padding:12px}
  .svccard__art{width:54px;border-radius:13px}
}

/* ---- AT sub-service index on the parent page ------------------------- */
.subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.6vw,16px)}
.subcard{
  display:flex;flex-direction:column;gap:.5em;justify-content:space-between;
  border:var(--edge) solid var(--ink);border-radius:22px;background:var(--wattle);
  padding:clamp(16px,2vw,22px);text-decoration:none;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.subcard:hover{background:var(--ochre);transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)}
.subcard__h{font-weight:900;letter-spacing:-.035em;line-height:1.05;font-size:clamp(1.02rem,.95rem + .5vw,1.35rem)}
.subcard__go{font-weight:700;font-size:clamp(.85rem,.82rem + .2vw,.98rem);opacity:.75}
.card__extra--links{margin-top:1.1em}

/* ---- about page timeline -------------------------------------------- */
.timeline{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,16px);margin-top:clamp(18px,2.4vw,26px)}
.tl{
  display:flex;gap:clamp(14px,2vw,22px);align-items:flex-start;
  border:var(--edge) solid var(--ink);border-radius:22px;
  background:var(--art-bg,var(--wattle));padding:clamp(16px,2vw,24px);
}
.tl__when{
  flex:none;font-weight:900;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(.9rem,.85rem + .35vw,1.1rem);
  min-width:5.5em;padding-top:.15em;opacity:.8;
}
.tl__org{font-weight:900;letter-spacing:-.035em;line-height:1.05;font-size:clamp(1.05rem,.95rem + .6vw,1.5rem)}
.tl__role{font-weight:700;opacity:.75;margin-top:.15em;font-size:clamp(.9rem,.86rem + .25vw,1.05rem)}
.tl__desc{margin-top:.6em;font-weight:500;line-height:1.4;font-size:clamp(.95rem,.92rem + .28vw,1.1rem);max-width:62ch}
@media (max-width:640px){
  .tl{flex-direction:column;gap:.4em}
  .tl__when{min-width:0}
}

/* Wide screens: the card is far wider than it is tall once shrunk, so run the
   art alongside the text instead of stacked. Two grid children only — an art
   that spans several auto rows has its extra height distributed between them,
   which is what was pushing the number away from the title. */
@media (min-width:1000px){
  .card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(24px,3vw,52px);
    align-items:center;
  }
  .card__text{order:-1}
  .card__art{width:min(30vw,230px,30svh);margin:0;align-self:center}
}
.card__text{display:flex;flex-direction:column;gap:.3rem}

/* ---- brand lockup ---------------------------------------------------- */
/* One cached SVG rather than 19.8KB inlined into all 64 pages. The nav and
   footer are both dark, so the cream variant is the correct one. */
.brand__logo{height:clamp(30px,3.2vw,40px);width:auto;display:block}
.brand__logo--footer{height:clamp(38px,4vw,52px)}

/* ---- current capacity pill ------------------------------------------- */
.cap{
  display:inline-flex;align-items:center;gap:.4em;
  background:var(--wattle);color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;
  padding:.34em .95em;white-space:nowrap;
  font-weight:700;font-size:clamp(.72rem,.66rem + .22vw,.86rem);letter-spacing:-.01em;
}
.cap b{font-weight:900}
.cap__ico{flex:none;display:block;opacity:.72}
/* The pill is a burger-menu item only, so there is no narrow-bar variant to
   maintain, no width band where it has to shrink to survive, and no need to
   hide its label — the menu has room for the words. */
.nav__cap{display:none}
@media (max-width:980px){
  .nav__cap{display:block;margin-bottom:4px}
  .cap--menu{font-size:.9rem}
}

/* ---- about portrait --------------------------------------------------- */
.portrait{
  flex:none;width:clamp(180px,26vw,300px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  border:var(--edge) solid var(--ink);
  background:var(--wattle);
  box-shadow:0 6px 0 var(--ink);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.aboutlede{display:flex;align-items:center;gap:clamp(22px,4vw,56px);flex-wrap:wrap}
.aboutlede__t{flex:1 1 320px;min-width:0}
/* Stack on narrow screens, but leave the body copy left-aligned — three
   paragraphs of centred prose is hard to read. Only the portrait centres. */
@media (max-width:640px){
  .aboutlede{flex-direction:column;align-items:stretch}
  .aboutlede .portrait{align-self:center}
}

/* ==================================================================
   22. GUIDES  — long-form referrer-facing articles
   ================================================================== */
.prose{max-width:68ch}
.prose h2{
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.06;margin:clamp(30px,3.4vw,48px) 0 .5em;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:clamp(1.08rem,1rem + .5vw,1.32rem);font-weight:800;
  letter-spacing:-.02em;margin:1.6em 0 .35em;
}
.prose p{margin:0 0 1em;font-weight:500;line-height:1.55}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.35em}
.prose li{margin-bottom:.5em;font-weight:500;line-height:1.5}
.prose li::marker{color:var(--eucalypt);font-weight:900}
.prose strong{font-weight:800}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.prose a:hover{color:var(--eucalypt)}
/* Pulled-out practical point. Not a warning — a "read this bit" marker. */
.prose__note{
  background:var(--cream);border:var(--edge) solid var(--ink);
  border-radius:var(--r-panel);box-shadow:0 5px 0 var(--ink);
  padding:clamp(16px,2.2vw,26px);margin:0 0 1.4em;
}
.prose__note p:last-child{margin-bottom:0}
.prose__note b{font-weight:900}

.guidemeta{
  display:flex;flex-wrap:wrap;gap:.5em 1.1em;align-items:center;
  font-weight:700;font-size:clamp(.82rem,.78rem + .2vw,.95rem);
  opacity:.72;margin-bottom:clamp(20px,2.6vw,32px);
}
.guidecard{
  display:flex;flex-direction:column;gap:.35em;height:100%;
  background:var(--cream);border:var(--edge) solid var(--ink);
  border-radius:var(--r-panel);box-shadow:0 5px 0 var(--ink);
  padding:clamp(18px,2.4vw,28px);text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.guidecard:hover{background:var(--wattle);transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.guidecard__h{font-weight:900;letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.1rem,1rem + .6vw,1.45rem)}
.guidecard__d{font-weight:500;font-size:clamp(.9rem,.86rem + .25vw,1.05rem);line-height:1.4;opacity:.82}
.guidecard__for{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--eucalypt)}

/* ---- What We Do cards are links -------------------------------------
   A stretched pseudo-element rather than wrapping the whole <article> in an
   <a>: the cards are position:sticky and the JS height-equaliser selects
   .card, and both would have had to change. This keeps the markup and the
   layout exactly as they were.
   .card is already positioned (sticky), so inset:0 resolves against it. */
.card__link{text-decoration:none;color:inherit}
.card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}
.card__link:focus-visible{outline:none}
.card:has(.card__link:focus-visible){outline:3px solid var(--clay);outline-offset:4px}
.card:has(.card__link:hover) .card__title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:3px}
/* A visible affordance — without it the card looks like static copy. */
.card__title::after{content:" \2192";white-space:nowrap;opacity:.55;font-size:.85em}
.card:has(.card__link:hover) .card__title::after{opacity:1}

/* ---- by-request areas -------------------------------------------------
   The Riverland is serviced on demand, not on a scheduled run. It stays on
   the map — removing it would hide real coverage — but it is marked, and the
   capacity pill stops advertising a date on those pages. Advertising a
   response time for an area that has no regular run would be exactly the kind
   of claim s133 of the National Law is concerned with. */
.reqnote{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.4em;
  margin-top:1em;padding:.7em 1.15em;
  background:var(--cream);border:3px solid var(--clay);border-radius:var(--r-panel);
  font-weight:600;font-size:clamp(.9rem,.86rem + .25vw,1.05rem);line-height:1.4;
  text-align:left;
}
.reqnote b{font-weight:900;color:var(--clay)}
.reqnote a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;font-weight:800}
.svgmap__req{
  font-family:var(--f-display);font-size:15px;font-weight:800;
  fill:var(--clay);letter-spacing:.02em;paint-order:stroke;
  stroke:var(--land-arid);stroke-width:5px;stroke-linejoin:round;
}
/* The pill still shows — it just says what is true here. */
[data-service="by-request"] .cap{background:var(--cream);border-color:var(--clay)}

/* ---- per-area wait tracker --------------------------------------------
   Sits under the lede on location and combination pages. The confirmation
   date is shown deliberately: a reader can judge how fresh the figure is
   without having to trust it. --unknown is the safe state, not an error
   state, so it is styled as information rather than as a warning. */
.wait{
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  margin:1.15em auto 0;padding:.85em 1.5em 1em;
  max-width:min(100%,32rem);
  background:var(--wattle);border:3px solid var(--ink);border-radius:var(--r-panel);
  line-height:1.35;text-align:center;
}
/* Small label, large figure. The figure is the one thing a referrer opened the
   page for, and at body size next to its own label it read as a caption. */
.wait__hd{
  display:flex;align-items:center;gap:.4em;
  font-weight:800;font-size:clamp(.8rem,.76rem + .12vw,.9rem);opacity:.72;
}
.wait__ico{flex:none;display:block}
.wait__val{
  font-weight:900;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(1.6rem,1.3rem + 1.3vw,2.3rem);
}
.wait__foot{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.15em .7em;margin-top:.4em;
  font-weight:700;font-size:clamp(.82rem,.79rem + .12vw,.92rem);
}
.wait__when{opacity:.62}
.wait a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;font-weight:800}
/* Not knowing is information, not an error — so it steps down to the quieter
   cream-and-bark treatment rather than shouting an absent number in wattle. */
.wait--unknown{background:var(--cream);border-color:var(--bark)}
.wait--unknown .wait__val{color:var(--bark)}


/* ---- pro bono banner ---------------------------------------------------
   Sits directly under the fixed nav, so it is fixed too and its height feeds
   --top-h. JS measures it rather than a hardcoded value because the copy
   wraps to two and then three lines as the viewport narrows, and everything
   below (page heads, sticky cards, scroll anchors) offsets by --top-h. */
.promo{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:59;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.15em .5em;
  padding:.48em clamp(14px,3vw,36px);
  background:#007FFF;color:#fff;text-decoration:none;
  border-bottom:3px solid var(--ink);
  font-weight:600;line-height:1.28;text-align:center;
  font-size:clamp(.76rem,.72rem + .2vw,.9rem);
  transition:background .16s ease,transform .28s cubic-bezier(.3,.8,.3,1);
}
/* Slides up behind the nav once you start scrolling. The nav sits at z-index
   60 and this at 59, so it disappears under it rather than over it. The page
   offset (--top-h) deliberately does NOT change: the banner is fixed and
   overlays, so nothing reflows when it goes. */
.promo--gone{transform:translateY(calc(-100% - var(--nav-h)))}
.promo b{font-weight:900}
.promo__cta{
  font-weight:800;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
}
.promo:hover{background:#0071E6}
.promo:focus-visible{outline:3px solid var(--cream);outline-offset:-5px}
/* Full sentence on desktop; on a phone it wrapped to three lines and took 11%
   of the viewport above the fold, so the narrow screens get the short form. */
.promo__short{display:none}
@media (max-width:600px){
  .promo{font-size:.84rem;padding:.5em 12px}
  .promo__long{display:none}
  .promo__short{display:inline}
}


/* ---- capacity dateline -------------------------------------------------
   Shares one band with the pro bono banner rather than stacking under it.
   Both are fixed at top:var(--nav-h); the promo sits on top at z-index 59 and
   already slides away on first scroll, so this only has to sit behind it at 58
   and fade in as it goes. Net cost in vertical space: nothing. The pro bono
   message keeps the landing moment, and capacity — which the pill could only
   ever quote one area of — becomes the thing pinned there while you read.

   Why this and not a second strip: nav 64px + promo + dateline is ~128px of
   fixed chrome on a desktop and ~164px on a phone, and the most crowded moment
   would be the one where someone has just arrived.

   It is hidden, not merely covered, at the top: the dateline is taller than the
   promo once the areas wrap, so the overhang would show below it. */
.dateline{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:58;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.15em .55em;
  padding:.48em clamp(14px,3vw,36px);
  background:var(--wattle);color:var(--ink);
  border-bottom:3px solid var(--ink);
  font-weight:600;line-height:1.28;text-align:center;
  font-size:clamp(.74rem,.7rem + .2vw,.86rem);letter-spacing:-.01em;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
/* Set by site.js off the same scroll flag that hides the promo, so the two can
   never both be showing and never both be gone. */
.dateline--on{opacity:1;visibility:visible}
.dateline b{font-weight:900}
.dateline__when{font-style:normal;opacity:.62;font-weight:700}
/* Separators are CSS so the stamped markup stays clean for capacity.py to
   rewrite — and so they vanish automatically when the line wraps to one item. */
.dateline__i + .dateline__i::before{content:"\00B7";opacity:.42;font-weight:800;margin-right:.5em}
/* The full list is the point of the strip, but it wraps to four lines under
   1200px, and the band then has to size to the taller of its two occupants —
   which put 83px of fixed chrome under the nav on a phone. Below that width the
   named areas give way to the spread, which is still true of every area at once
   and fits on one line. See dateline_html() for why the spread and not the
   soonest.

   1200 rather than a width picked for this element alone: it is already the
   breakpoint where the nav gets tight enough to shrink the pill, so the bar and
   the strip go compact together instead of at two different sizes. */
.dateline__brief{display:none}
@media (max-width:1200px){
  .dateline__i{display:none}
  .dateline__brief{display:inline}
}
@media (max-width:600px){
  .dateline{font-size:.78rem;padding:.5em 12px;gap:.1em .45em}
}
/* No transition for readers who asked for none: it snaps between the two. */
@media (prefers-reduced-motion:reduce){
  .dateline{transition:none}
}


/* Local paragraph on a location page. Added 2026-08-20: the 11 location pages
   shared 81% of their vocabulary pairwise, which is a ranking ceiling no amount
   of template polish fixes. This is the one block on the page that is genuinely
   about the place. Owner-written. */
.loclocal{margin-bottom:clamp(20px,2.6vw,34px)}
.loclocal p{font-size:clamp(1rem,.95rem + .3vw,1.14rem);font-weight:500;line-height:1.5}
.loclocal a{text-decoration:underline;text-underline-offset:3px;font-weight:800}

/* ---- comparison table -------------------------------------------------
   Added 2026-08-20. The site had 426 lists and zero tables. Comparison
   content — which assessment answers which question, and what telehealth
   can actually do — is the shape answer engines lift most reliably, and a
   list of six services does not encode the comparison at all.
   The wrapper scrolls, not the page: a 4-column table cannot fit 360px. */
.cmp{overflow-x:auto;border:var(--edge) solid var(--ink);border-radius:var(--r-panel);background:var(--cream)}
.cmp table{border-collapse:collapse;width:100%;min-width:680px;font-size:clamp(.88rem,.85rem + .2vw,1rem)}
.cmp caption{text-align:left;padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,26px) 0;font-weight:900;letter-spacing:-.02em;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.cmp th,.cmp td{padding:.72em clamp(12px,1.8vw,20px);text-align:left;vertical-align:top;border-bottom:2px solid rgba(30,42,36,.14)}
.cmp thead th{font-weight:900;font-size:.82em;letter-spacing:.04em;text-transform:uppercase;border-bottom:3px solid var(--ink);white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp th[scope=row]{font-weight:800}
.cmp th[scope=row] a{text-decoration:underline;text-underline-offset:3px}
.cmp .yes{color:var(--eucalypt);font-weight:800}
.cmp .part{color:var(--bark);font-weight:800}
.cmp .no{color:var(--clay);font-weight:800}

/* ---- phone -------------------------------------------------------------
   Added 2026-07-30. The site ran without a published number until now, which
   cost enquiries from people who will not fill in a form and left the
   local-pack NAP incomplete. */
/* .modal__body is a centring flex row, so a sibling of the form stretched to
   the full column height. Stack them, and match the form's 620px so the two
   line up. Scoped to the contact modal, which is in fact the ONLY dialog with
   a .modal__body — checked across all 110 pages 2026-08-20. The referral modal
   holds its iframe directly, so the base rule's row behaviour has no user.

   justify-content MUST be reset with it. The base rule centres on the main
   axis, which is horizontal in the base rule but VERTICAL once this one
   turns the column on — and centring a container that also scrolls puts half
   the overflow above the top edge, where scrollTop cannot reach it. On a
   794px viewport that hid the phone line and the top of the First/Last name
   row on every open, unreachable by scrolling. Found 2026-08-20 via the pro
   bono banner. flex-start keeps the overflow entirely below the fold, which
   is the half you can actually scroll to. */
.modal--contact .modal__body{flex-direction:column;align-items:center;justify-content:flex-start}
.modal__phone{
  width:min(100%,620px);
  margin:0 0 1.1em;padding:.7em 1em;
  background:var(--cream);border:3px solid var(--ink);border-radius:var(--r-panel);
  font-weight:700;font-size:clamp(.95rem,.9rem + .3vw,1.1rem);
}
/* The same offer repeated after the form. The modal scrolls, and someone who
   has read to the end of a nine-field form is exactly who is deciding not to
   fill it in — making them scroll back up to find the number loses the call.
   Only the margin flips; everything else is the top one. Added 2026-08-20. */
.modal__phone--foot{margin:1.1em 0 0}
.modal__phone a{
  font-weight:900;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap;
}
.modal__phone span{font-weight:600;opacity:.7;font-size:.88em;white-space:nowrap}
.site-footer__fine a[href^="tel:"]{white-space:nowrap}