/* ═══════════════════════════════════════════════════════════════
   NaviCare Coordination — redesign (v3)
   Shared by index / about / referral / feedback

   Concept: wayfinding. The logo is a ship's wheel and cogs, the home
   hero is the Esplanade from day to night, so the inner pages open on a
   nautical chart of the Cairns coast with a route plotted across it.
   The charts are generated artwork (assets/chart-*.webp) — sharp,
   ~80 KB each, and they need nothing special from the server.

   Layout: sticky white header · dark chart hero per page · light
   content sections that alternate white / sea-wash · shared footer.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* colour */
  --sea:#0B2B31;          /* chart ground, dark bands */
  --ink:#0F3238;          /* text */
  --ink-soft:#4B686E;     /* secondary text */
  --teal:#118E9E;         /* brand teal, from the wordmark */
  --teal-deep:#0C6F7B;    /* hover / pressed */
  --teal-bright:#7DCDD6;  /* teal on dark */
  --sand:#E9B872;         /* waypoints — the Esplanade's golden hour */
  --paper:#FFFFFF;
  --wash:#EFF6F6;
  --line:#D6E5E7;

  /* type */
  --font-display:"Marcellus","Trajan Pro",Georgia,"Times New Roman",serif;
  --font-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --gutter:clamp(1rem,4vw,3.5rem);
  --max:1200px;
  --radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* home hero: driven by the video's real brightness (site.js)
     0 = daytime (dark ink)   1 = night (white ink) */
  --night-top:0;
  --night-mid:0;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.12;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
p{text-wrap:pretty}

.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 .5rem 0;
  font-size:.9rem;text-decoration:none;
}
.skip:focus{left:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);
}
.eyebrow::before{
  content:"";width:.55rem;height:.55rem;border-radius:50%;
  border:2px solid currentColor;flex:none;
}

/* ══ BUTTONS ════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.8rem 1.4rem;
  border:1.5px solid var(--teal);border-radius:999px;
  background:var(--teal);color:#fff;
  font:600 .98rem/1 var(--font-body);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-1px)}
.btn svg{width:1.05em;height:1.05em;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--wash);border-color:var(--teal);color:var(--ink)}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:var(--wash);border-color:var(--wash);color:var(--ink)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ══ HEADER ═════════════════════════════════════════════════ */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-head.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(15,50,56,.06)}
.site-head__bar{
  max-width:var(--max);margin-inline:auto;
  padding:.6rem var(--gutter);
  display:flex;align-items:center;gap:1.5rem;
}
.site-head .logo img{height:clamp(3.6rem,5.4vw,4.75rem);width:auto}

.logo{flex:none;display:block;line-height:0;text-decoration:none;transition:opacity .25s}
.logo:hover{opacity:.8}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.2rem);margin-left:auto}
.nav a{
  position:relative;
  font-size:1rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding-block:.4rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-head .btn{min-height:2.75rem;padding:.65rem 1.15rem;font-size:.93rem}

.menu-btn{
  display:none;flex:none;
  width:2.9rem;height:2.9rem;margin-left:auto;
  place-content:center;gap:5px;
  border:1px solid var(--line);border-radius:50%;
  background:var(--paper);cursor:pointer;
}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══ MOBILE MENU PANEL ═════════════════════════════════════ */
.panel{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  padding:1.25rem var(--gutter) 2rem;
  background:var(--paper);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s linear .35s;
}
.panel[data-open="true"]{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.panel__top{display:flex;align-items:center;justify-content:space-between}
.panel__top .logo img{height:3.6rem;width:auto}
.panel__close{
  width:2.9rem;height:2.9rem;display:grid;place-content:center;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;
}
.panel__close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.panel__links{display:flex;flex-direction:column;gap:.2rem;margin-top:2.5rem}
.panel__links a{
  font-family:var(--font-display);font-size:clamp(2rem,9vw,2.6rem);
  color:var(--ink);text-decoration:none;padding:.35rem 0;
  border-bottom:1px solid var(--line);
}
.panel__links a[aria-current="page"]{color:var(--teal)}
.panel__contact{margin-top:auto;display:grid;gap:.35rem;font-size:1rem;color:var(--ink-soft)}
.panel__contact a{color:var(--ink);font-weight:600;text-decoration:none}

/* ══ HOME HERO (video) ═════════════════════════════════════ */
/* The home page uses the same sticky header as every other page, so the
   logo, nav and button never move when you click between pages. The video
   fills the rest of the first screen below it. */
.hero{
  --head-h:calc(clamp(3.6rem,5.4vw,4.75rem) + 1.2rem + 1px);
  position:relative;
  min-height:calc(100svh - var(--head-h));
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(1rem,2.2vw,1.75rem) var(--gutter) clamp(1.25rem,3vw,2.25rem);
  overflow:hidden;isolation:isolate;
}
.bg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;pointer-events:none;
}
/* soft vignette so the header and buttons always have something to sit on */
.bg-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(11,43,49,.38) 0%,rgba(11,43,49,0) 34%);
}
.hero__head{
  display:flex;align-items:center;gap:1.5rem;
  width:100%;max-width:1900px;margin-inline:auto;
}
/* the client asked for the large logo on the landing page */
.hero .logo img{height:clamp(5.5rem,10vw,9.5rem);width:auto}
.hero .nav a{color:color-mix(in srgb,#FFFFFF calc(var(--night-top) * 100%),var(--ink));transition:color .6s linear}
.hero .nav a::after{background:currentColor}
.hero .menu-btn{background:rgba(255,255,255,.85);border-color:transparent}

.stage{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.9rem,2vh,1.4rem);
  padding-top:clamp(1rem,9vh,6rem);
  width:100%;min-width:0;
}
.wordmark{
  position:relative;
  width:min(46vw,820px);max-width:100%;
  aspect-ratio:735 / 207;line-height:0;
}
.wordmark img{width:100%;height:100%;object-fit:contain}
@supports (mask-image:url("wordmark.webp")) or (-webkit-mask-image:url("wordmark.webp")){
  .wordmark{
    -webkit-mask:url("wordmark.webp") center / contain no-repeat;
    mask:url("wordmark.webp") center / contain no-repeat;
    background-color:var(--wordmark-ink,#118E9E);
    transition:background-color .6s linear;
  }
  .wordmark img{visibility:hidden}
}
body.has-video .wordmark{--wordmark-ink:color-mix(in srgb,#FFFFFF calc(var(--night-mid) * 100%),#118E9E)}
body.no-sampling .wordmark{--wordmark-ink:#FFFFFF}

.tagline{
  max-width:34ch;
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:500;line-height:1.45;
  color:color-mix(in srgb,#FFFFFF calc(var(--night-mid) * 100%),var(--ink));
  text-shadow:
    0 1px 14px rgba(0,0,0,calc(var(--night-mid) * .45)),
    0 0 18px rgba(255,255,255,calc((1 - var(--night-mid)) * .55));
  transition:color .6s linear;
}
body.no-sampling .tagline,body.no-sampling .hero .nav a{color:#fff}
body.ink-snap .hero .nav a,body.ink-snap .wordmark,body.ink-snap .tagline{transition:none!important}

.chips{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  width:min(100%,36rem);margin-top:.4rem;
}
.chip{
  min-width:0;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.6rem;padding:.7rem .9rem;
  border-radius:12px;background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(11,43,49,.12);
  font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink);
}
.chip--badge{padding:.4rem .7rem}
.chip--badge img{width:100%;max-width:8.4rem;height:auto}
.chip svg{flex:none;width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.8}

/* ── Trust strip: one frosted panel, three equal parts ── */
.trust{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(100%,54rem);margin-top:.5rem;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.75);border-radius:18px;
  box-shadow:0 18px 44px rgba(11,43,49,.2);
  overflow:hidden;
}
.trust__item{
  display:flex;align-items:center;gap:.85rem;min-width:0;
  padding:1rem 1.15rem;text-align:left;
  transition:background .3s var(--ease);
}
.trust__item + .trust__item{border-left:1px solid var(--line)}
.trust__item:hover{background:rgba(239,246,246,.9)}
.trust__icon{
  flex:none;width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-content:center;
  background:var(--teal);color:#fff;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 14%,transparent);
  transition:transform .4s var(--ease);
}
.trust__item:hover .trust__icon{transform:rotate(-8deg) scale(1.06)}
.trust__icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8}
.trust__text{display:grid;gap:.15rem;min-width:0}
.trust__text strong{font-size:.97rem;font-weight:700;line-height:1.25;color:var(--ink)}
.trust__text small{font-size:.82rem;line-height:1.35;color:var(--ink-soft)}
.trust__item--badge{flex-direction:column;justify-content:center;gap:.3rem}
.trust__item--badge img{height:46px;width:auto;max-width:100%}
.trust__item--badge small{font-size:.74rem;letter-spacing:.02em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.trust__icon--ndis,.trust__text--ndis{display:none}
.trust__icon--ndis{background:none;box-shadow:none;padding:0}
.trust__icon--ndis img{width:100%;height:100%;border-radius:50%}

.hero .btn-row{justify-content:center;margin-top:.6rem}
.hero .btn--ghost{background:rgba(255,255,255,.92);border-color:transparent}
.hero .btn--ghost:hover{background:#fff}

.scroll-cue{
  justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;text-decoration:none;opacity:.9;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.scroll-cue svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* ══ CHART HERO (inner pages) ═══════════════════════════════ */
.chart-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--sea) center / cover no-repeat;
  color:#fff;
  padding-block:clamp(4rem,11vw,8.5rem) clamp(3.5rem,9vw,7rem);
}
.chart-hero--about{background-image:url("gears-about.webp")}
.chart-hero--referral{background-image:url("gears-referral.webp")}
.chart-hero--feedback{background-image:url("gears-feedback.webp")}
/* The chart is a looping video: the water drifts, the coast holds still.
   The still image above stays as the poster / fallback. It breathes very
   slowly and lags the scroll a little (--px, set in site.js). */
.chart-video,.cta-video{
  position:absolute;inset:-4% 0;width:100%;height:108%;
  object-fit:cover;z-index:-3;pointer-events:none;
}
.chart-video{
  transform:translate3d(0,var(--px,0px),0) scale(1.02);
  animation:breathe 26s ease-in-out infinite alternate;
}
@keyframes breathe{from{scale:1}to{scale:1.07}}
/* keeps the copy side calm; the coast stays visible on the right */
.chart-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,43,49,.92) 0%,rgba(11,43,49,.7) 36%,rgba(11,43,49,.1) 70%,rgba(11,43,49,0) 100%);
}
.route{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.route__ghost{fill:none;stroke:rgba(233,184,114,.4);stroke-width:4;stroke-dasharray:2 16;stroke-linecap:round}
.route__line{fill:none;stroke:var(--sand);stroke-width:5;stroke-linecap:round}
/* a bright pulse that keeps travelling the course after it's drawn */
.route__comet{fill:none;stroke:#FFE7BF;stroke-width:7;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 10px rgba(233,184,114,.9))}
.route__ripple{fill:none;stroke:var(--sand);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-out infinite}
.route__mark{fill:var(--sea);stroke:var(--sand);stroke-width:4}
.route__end{fill:var(--sand)}
.route__pulse{fill:none;stroke:var(--sand);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

.chart-hero .eyebrow{color:var(--teal-bright)}
.chart-hero h1{max-width:14ch;margin-top:1rem}
.chart-hero .lede{
  max-width:58ch;margin-top:1.25rem;
  font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.7;
  color:rgba(255,255,255,.86);
}
.chart-hero .btn-row{margin-top:2rem}
.chart-note{
  position:absolute;right:var(--gutter);bottom:1rem;
  font-size:.72rem;letter-spacing:.08em;color:rgba(200,232,236,.55);
}

/* ══ SECTIONS ═══════════════════════════════════════════════ */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--wash{background:var(--wash)}
.section__head{max-width:46rem;display:grid;gap:.9rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section__head p{color:var(--ink-soft);max-width:60ch}
.prose{display:grid;gap:1rem;max-width:62ch;color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:600}

/* split: text left, feature right */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.split > *{min-width:0}

/* ── Route of three stops (a real sequence: understand → implement → use) */
.stops{
  position:relative;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);
}
.stops::before{
  content:"";position:absolute;top:1.35rem;left:1.35rem;right:12%;
  border-top:2px dashed color-mix(in srgb,var(--teal) 45%,transparent);
}
.stop{position:relative;display:grid;gap:.75rem;align-content:start}
.stop__pin{
  width:2.7rem;height:2.7rem;border-radius:50%;
  display:grid;place-content:center;
  background:var(--paper);border:2px solid var(--teal);color:var(--teal);
  font:600 1rem/1 var(--font-body);
  box-shadow:0 0 0 6px var(--paper);
}
.section--wash .stop__pin{box-shadow:0 0 0 6px var(--wash)}
.stop:last-child .stop__pin{background:var(--teal);color:#fff}
.stop h3{margin-top:.5rem}
.stop p{color:var(--ink-soft)}

/* ── Who we support: tag cloud */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.tags li{
  padding:.55rem 1rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:.95rem;font-weight:500;color:var(--ink);
}
.section--wash .tags li{background:var(--paper)}

/* ── You at the centre: hub diagram */
.hub{width:100%;max-width:520px;margin-inline:auto;height:auto;overflow:visible}
.hub__ring{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 7}
.hub__spoke{stroke:color-mix(in srgb,var(--teal) 40%,transparent);stroke-width:1.5}
.hub__node{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.hub__node--nc{fill:var(--wash);stroke:var(--teal)}
.hub__label{font:600 19px var(--font-body);fill:var(--ink);text-anchor:middle}
.hub__core{fill:var(--teal)}
.hub__core-ring{fill:none;stroke:var(--teal);stroke-width:1.5;opacity:.35}
.hub__you{font:400 34px var(--font-display);fill:#fff;text-anchor:middle}
.hub__you-sub{font:600 12px var(--font-body);letter-spacing:.18em;fill:rgba(255,255,255,.85);text-anchor:middle}

/* ── Values: three large statements */
.values{list-style:none;display:grid;border-top:1px solid var(--line)}
.values li{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;
  padding-block:1.1rem;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2;
}
.values li span{width:.7rem;height:.7rem;border-radius:50%;background:var(--sand);box-shadow:0 0 0 4px color-mix(in srgb,var(--sand) 25%,transparent)}

/* ── The NaviCare difference */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.trio article{padding:1.75rem clamp(1rem,2.5vw,2rem) 0 0;display:grid;gap:.6rem;align-content:start}
.trio article + article{border-left:1px solid var(--line);padding-left:clamp(1rem,2.5vw,2rem)}
.trio h3{font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--teal)}
.trio p{color:var(--ink-soft)}

.pullquote{
  margin-top:clamp(2.5rem,5vw,4rem);
  max-width:40ch;
  font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.25;
  color:var(--ink);
}
.pullquote strong{font-weight:400;color:var(--teal)}

/* ── CTA band on the chart */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--sea) url("chart-referral.webp") 70% center / cover no-repeat;
  color:#fff;border-radius:calc(var(--radius) * 1.5);
  padding:clamp(2.25rem,5vw,4rem);
  display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:2rem;align-items:center;
}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,43,49,.92),rgba(11,43,49,.55))}
.cta-video{inset:0;height:100%}
.cta-band h2{max-width:18ch}
.cta-band p{margin-top:.75rem;color:rgba(255,255,255,.82);max-width:48ch}

/* ── Home: three routes into the site */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.route-card{
  display:grid;grid-template-rows:auto auto 1fr auto;gap:.7rem;
  padding:clamp(1.5rem,2.5vw,2rem);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);text-decoration:none;color:var(--ink);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.route-card:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,50,56,.08)}
.route-card__icon{
  width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-content:center;
  background:var(--wash);color:var(--teal);
}
.route-card__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.route-card p{color:var(--ink-soft)}
.route-card__go{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--teal)}
.route-card__go svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s var(--ease)}
.route-card:hover .route-card__go svg{transform:translateX(4px)}

/* ── Ticker: the areas we support, drifting past */
.ticker{
  overflow:hidden;background:var(--sea);color:#fff;
  border-block:1px solid rgba(125,205,214,.18);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  padding-block:1.05rem;
  animation:tick 48s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.5rem);white-space:nowrap}
.ticker i{flex:none;width:.5rem;height:.5rem;border-radius:50%;border:2px solid var(--sand)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── Scroll reveal. Added by site.js only to things below the fold at load,
   so the first screen is always complete. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* stops: the dashed course draws across, then the pins drop in */
.stops.reveal{opacity:1;transform:none}
.stops::before{transform-origin:left;transition:transform 1.4s var(--ease) .1s}
.stops.reveal::before{transform:scaleX(0)}
.stops.reveal.in::before{transform:none}
.stops.reveal .stop{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stops.reveal.in .stop{opacity:1;transform:none}
.stops.reveal.in .stop:nth-child(2){transition-delay:.45s}
.stops.reveal.in .stop:nth-child(3){transition-delay:.9s}
.stops.reveal .stop__pin{transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.stops.reveal.in .stop__pin{transform:none}
.stops.reveal.in .stop:nth-child(1) .stop__pin{transition-delay:.15s}
.stops.reveal.in .stop:nth-child(2) .stop__pin{transition-delay:.6s}
.stops.reveal.in .stop:nth-child(3) .stop__pin{transition-delay:1.05s}
.stop:last-child .stop__pin{animation:beacon 2.8s ease-out 2s infinite}
@keyframes beacon{0%{box-shadow:0 0 0 6px var(--paper),0 0 0 6px color-mix(in srgb,var(--teal) 50%,transparent)}100%{box-shadow:0 0 0 6px var(--paper),0 0 0 22px transparent}}

/* hub: ring turns, the core breathes, people's input travels in to "You" */
.hub__spin{transform-box:view-box;transform-origin:300px 280px;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hub__pulse{fill:var(--sand)}
.hub__core-ring{transform-box:fill-box;transform-origin:center;animation:core 3.6s ease-out infinite}
.hub__core-ring--b{animation-delay:1.8s}
@keyframes core{0%{opacity:.5;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}

/* values: the sand markers take turns to glow */
.values li span{animation:glow 4.5s ease-in-out infinite}
.values li:nth-child(2) span{animation-delay:1.5s}
.values li:nth-child(3) span{animation-delay:3s}
@keyframes glow{0%,60%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--sand) 25%,transparent)}30%{box-shadow:0 0 0 10px color-mix(in srgb,var(--sand) 0%,transparent),0 0 18px var(--sand)}}

/* home cards: the icon comes alive on hover */
.route-card:hover .route-card__icon svg{animation:turn 1.2s var(--ease)}
@keyframes turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* preview only: link out to the live Astalty form */
.embed-link{
  margin-top:1.5rem;padding:2rem 1.5rem;border-radius:12px;
  background:var(--wash);border:1px solid var(--line);
  display:grid;justify-items:start;gap:1.1rem;color:var(--ink-soft);
}

/* ══ FORM PAGES ═════════════════════════════════════════════ */
.form-layout{
  display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius) * 1.25);
  padding:clamp(1.25rem,3vw,2.5rem);
  box-shadow:0 20px 50px rgba(15,50,56,.07);
}
.form-card h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.form-card > p{color:var(--ink-soft);margin-top:.5rem}
.embed{margin-top:1.5rem}
.embed iframe{display:block;width:100%;min-width:100%;border:0;background:transparent;height:1755px}
.form-note{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;
  background:var(--wash);font-size:.92rem;color:var(--ink-soft);
}
/* shown in the preview only, where the Astalty form can't be embedded */
.embed-placeholder{
  margin-top:1.5rem;padding:2.5rem 1.5rem;border:1.5px dashed var(--teal-bright);border-radius:12px;
  background:var(--wash);text-align:center;color:var(--ink-soft);font-size:.95rem;
}

.aside{display:grid;gap:1rem;position:sticky;top:7.5rem}
.aside-card{
  padding:1.5rem;border-radius:var(--radius);
  background:var(--wash);border:1px solid var(--line);
  display:grid;gap:.6rem;
}
.aside-card h3{font-size:1.3rem}
.aside-card p,.aside-card li{color:var(--ink-soft);font-size:.98rem}
.aside-card ul{list-style:none;display:grid;gap:.4rem}
.aside-card li{display:flex;gap:.6rem;align-items:baseline}
.aside-card li::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--teal);transform:translateY(-.1rem)}
.aside-card--dark{background:var(--sea);border-color:var(--sea);color:#fff}
.aside-card--dark p{color:rgba(255,255,255,.8)}
.aside-card--consent{background:#FFF8EC;border-color:#F1DDB9}
.contact-lines{display:grid;gap:.5rem;margin-top:.25rem}
.contact-lines a,.contact-lines span{
  display:flex;align-items:center;gap:.65rem;
  color:#fff;text-decoration:none;font-weight:600;overflow-wrap:anywhere;
}
.contact-lines span{font-weight:400;color:rgba(255,255,255,.8)}
.contact-lines svg{flex:none;width:18px;height:18px;stroke:var(--teal-bright);fill:none;stroke-width:1.8}
.contact-lines a:hover{color:var(--teal-bright)}
.reg{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.reg img{height:52px;width:auto;border-radius:6px}
.reg p{font-size:.9rem}

/* ══ FOOTER ═════════════════════════════════════════════════ */
.site-foot{background:var(--wash);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 1.75rem}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.9fr);
  gap:clamp(1.75rem,4vw,3rem);
}
.foot-grid > *{min-width:0}
.foot-brand img{height:5.5rem;width:auto}
.foot-brand p{margin-top:1rem;color:var(--ink-soft);max-width:28ch}
.foot-grid h4{font:600 .78rem/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.foot-grid a,.foot-grid p{display:block;color:var(--ink-soft);text-decoration:none;font-size:.97rem;line-height:1.9}
.foot-grid a:hover{color:var(--teal)}
.foot-email{overflow-wrap:anywhere}
.foot-badge img{height:54px;width:auto;border-radius:6px}
.foot-badge p{margin-top:.6rem;line-height:1.5;font-size:.9rem}
.foot-base{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.86rem;color:var(--ink-soft);
}

/* ══ LOAD-IN ═══════════════════════════════════════════════
   Content is visible at rest; this only adds a gentle rise once JS runs. */
.js .rise{opacity:0;transform:translateY(14px)}
.js body.ready .rise{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js body.ready .rise:nth-child(2){transition-delay:.08s}
.js body.ready .rise:nth-child(3){transition-delay:.16s}
.js body.ready .rise:nth-child(4){transition-delay:.24s}
.js body.ready .rise:nth-child(5){transition-delay:.32s}

/* ══ BREAKPOINTS ════════════════════════════════════════════ */
@media (max-width:980px){
  .nav,.site-head .btn,.hero .nav{display:none}
  .menu-btn{display:grid}
  .split{grid-template-columns:1fr}
  .form-layout{grid-template-columns:1fr}
  .aside{position:static}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
  .routes{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
}
@media (max-width:760px){
  .stops{grid-template-columns:1fr;gap:1.5rem}
  .stops::before{top:1.35rem;bottom:1.35rem;left:1.35rem;right:auto;border-top:0;border-left:2px dashed color-mix(in srgb,var(--teal) 45%,transparent);transform-origin:top}
  .stops.reveal::before{transform:scaleY(0)}
  .stop{grid-template-columns:2.7rem minmax(0,1fr);column-gap:1rem}
  .stop__pin{grid-row:span 2}
  .stop h3{margin-top:.35rem}
  .trio{grid-template-columns:1fr}
  .trio article + article{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .trio article{padding-block:1.5rem}
  .chart-hero::before{background:linear-gradient(180deg,rgba(11,43,49,.78),rgba(11,43,49,.6))}
  .chart-note{display:none}
}
@media (max-width:640px){
  .wordmark{width:min(88vw,820px)}
  /* Phones: three matching tiles side by side — icon on top, a short bold
     label under it. The NDIS tile uses the round heart logo plus real text,
     because the small print inside the full badge image is unreadable here. */
  .hero .trust{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
    width:100%;max-width:24rem;margin-inline:auto;
    background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;
  }
  .trust__item,
  .trust__item + .trust__item{
    flex-direction:column;justify-content:flex-start;align-items:center;gap:.5rem;
    padding:.85rem .45rem .8rem;text-align:center;
    background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);border-radius:14px;
    box-shadow:0 8px 22px rgba(11,43,49,.16);
  }
  .trust__icon{width:2.4rem;height:2.4rem;box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 14%,transparent)}
  .trust__icon svg{width:18px;height:18px}
  .trust__text{gap:.2rem;justify-items:center}
  .trust__text strong{font-size:.84rem;line-height:1.22}
  .trust__text small{font-size:.72rem;line-height:1.3}
  .trust__badge-full,.trust__badge-reg{display:none}
  .trust__icon--ndis,.trust__text--ndis{display:grid}
  .trust__text--ndis small{font-variant-numeric:tabular-nums}
  .chips{gap:.4rem}
  .chip{flex-direction:column;gap:.3rem;padding:.6rem .4rem;font-size:.8rem;min-height:0}
  .foot-grid{grid-template-columns:1fr}
  .hero .btn-row{gap:.5rem}
  .hero .btn-row .btn{flex:0 0 auto;min-height:2.75rem;padding:.6rem 1.05rem;font-size:.9rem}
}
/* ══ PHONES ═════════════════════════════════════════════════
   Videos: phones load a portrait crop (site.js / navPick) and skip the
   parallax + slow zoom, which cost battery for little gain on a small
   screen. Blur over a playing video is dropped too, for smooth scrolling. */
@media (max-width:700px){
  .chart-video{animation:none;transform:none;inset:0;height:100%}
  .chart-hero--about{background-image:url("gears-about-m.webp")}
  .chart-hero--referral{background-image:url("gears-referral-m.webp")}
  .chart-hero--feedback{background-image:url("gears-feedback-m.webp")}
  .chart-hero{padding-block:3.25rem 3rem}
  .chart-hero .lede{font-size:1.02rem}
  .hero{background:var(--sea) url("hero-poster-m.webp") center / cover}
  .trust{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)}
  .site-head{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .stage{padding-top:1.75rem}
  .hub__label{font-size:22px}
  .foot-grid a{padding-block:.3rem;line-height:1.5}
  .panel__contact a{padding-block:.55rem}
  .contact-lines a{padding-block:.45rem}
  .cta-band{padding:2rem 1.4rem}
  .cta-band .btn{flex:1 1 12rem}
  .section{padding-block:3.25rem}
}

@media (max-height:600px) and (orientation:landscape){
  .hero{min-height:auto}
  .stage{padding-top:1rem}
  .scroll-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rise{opacity:1;transform:none}
  .bg-video,.chart-video,.cta-video{display:none}
  .hero{background:var(--sea) url("chart-about.webp") center / cover}
  .reveal,.stops.reveal .stop{opacity:1;transform:none}
  .stops.reveal::before{transform:none}
  .ticker__track{animation:none}
}

@media print{
  .site-head,.panel,.bg-video,.route,.menu-btn{display:none!important}
  .chart-hero{background:none;color:#000}
}