/* ==========================================================================
   MOA Media
   Restrained, high-whitespace layout. Type is deliberately small against
   very large negative space. Colour is used sparingly: paper and shell
   carry almost everything, mint appears once per page.
   All tokens live in :root.
   ========================================================================== */

:root{
  /* Colour */
  --paper:     #FFFFFF;
  --shell:     #F7F9F8;  /* the off-white the whole site sits on */
  --mint:      #54E79E;  /* BRAND mint. Buttons and the single accent band */
  --mint-deep: #2DB87A;  /* BRAND darker mint. Hover states only */
  --mint-link: #178A55;  /* darkened tint, small inline links only */
  --mint-pale: #EDFBF4;  /* pale wash behind the route map */
  --ink:       #0F1117;  /* BRAND ink. Headlines, body copy, footer */
  --soft:      #9AA3A0;  /* de-emphasised words inside headlines */
  --muted:     #6B7370;  /* captions and small print */
  --line:      #E8ECEA;
  --line-ink:  rgba(255,255,255,.13);

  /* Type: brand system */
  --display-font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm. The whitespace is the design. */
  --sec:    clamp(110px, 15vw, 210px);
  --wrap:   1180px;
  --narrow: 760px;
  --gut:    clamp(22px, 5vw, 56px);
  --r:      10px;
  --r-card: 18px;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}

h1,h2,h3,h4{
  margin:0 0 .5em;font-family:var(--display-font);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);
}
/* emphasised words in a headline, set in brand mint */
h1 em,h2 em,h3 em,h4 em{font-style:normal;font-weight:600;color:var(--mint)}

:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:3px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:13px 18px;z-index:200}
.skip:focus{left:14px;top:14px}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{width:100%;max-width:var(--narrow);margin-inline:auto;padding-inline:var(--gut)}

.sec{padding-block:var(--sec)}
.sec--shell{background:var(--shell)}
.center{text-align:center}

/* One screen per section. Copy is kept short enough to fit, and the section
   centres itself in the viewport rather than stacking up. */
.sec--screen{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
@media(max-width:900px){
  .sec--screen{min-height:0}
}

/* --------------------------------------------------------------------------
   TYPE SCALE  (capped at 70px display, 18px body)
   -------------------------------------------------------------------------- */
.display{font-family:var(--display-font);font-size:clamp(2.3rem,5.4vw,4.375rem);line-height:1.06;letter-spacing:-.038em;font-weight:600}
.h-xl   {font-family:var(--display-font);font-size:clamp(1.9rem,3.7vw,3rem);line-height:1.12;letter-spacing:-.034em}
.h-lg   {font-family:var(--display-font);font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.24;letter-spacing:-.028em}
.h-md   {font-family:var(--display-font);font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.32;letter-spacing:-.02em}

.lead{font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.75;max-width:54ch;color:var(--muted)}
.center .lead{margin-inline:auto}
.small{font-size:.9rem;color:var(--muted);line-height:1.65}

.eyebrow{
  display:block;font-family:var(--font);
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:0 0 clamp(26px,3vw,40px);
}

.sec-head{margin-bottom:clamp(56px,7vw,104px);max-width:640px}
.sec-head.center{margin-inline:auto}
.sec-head .lead{margin-top:26px}

/* --------------------------------------------------------------------------
   BUTTONS  (small, quiet)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:.9rem;font-weight:500;line-height:1;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.btn--mint{background:var(--mint);color:var(--ink)}
.btn--mint:hover{background:var(--mint-deep)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#31363A}
.btn--outline{background:transparent;color:var(--ink);border-color:#CFD6D2}
.btn--outline:hover{border-color:var(--ink)}
.btn--square{border-radius:0}
.btn--sm{padding:11px 20px;font-size:.85rem}

.btns{display:flex;flex-wrap:wrap;gap:12px}
.btns.center{justify-content:center}
.after-btn{margin-top:22px;font-size:.85rem;color:var(--muted)}

.tlink{color:var(--mint-link);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(23,138,85,.35)}
.tlink:hover{border-bottom-color:var(--mint-link)}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s}
.hdr.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}

.mark{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.mark img{height:23px;width:auto;max-width:none}
.ftr .mark img{height:26px;width:auto;max-width:none}

.nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:.92rem;font-weight:400;color:var(--ink);transition:color .2s}
.nav ul a:hover{color:var(--muted)}
.nav ul a[aria-current="page"]{font-weight:500}
.nav-right{display:flex;align-items:center;gap:12px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;padding:0}
.burger i{display:block;position:relative;width:17px;height:1.5px;background:var(--ink)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink)}
.burger i::before{top:-6px}.burger i::after{top:6px}

@media(max-width:1080px){
  .burger{display:block}
  .nav ul{position:absolute;left:0;right:0;top:84px;display:none;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:6px var(--gut) 24px;border-bottom:1px solid var(--line)}
  .nav ul.open{display:flex}
  .nav ul a{padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav ul li:last-child a{border-bottom:none}
}
@media(max-width:560px){.nav{height:70px}.nav ul{top:70px}.mark img{height:20px}}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{
  background:var(--shell);text-align:center;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(130px,16vw,190px);
}
.hero .display{margin:0 auto;max-width:17ch}
.hero .lead{margin:clamp(34px,4vw,52px) auto 0;max-width:46ch}
.hero .btns{margin-top:clamp(38px,4.5vw,58px)}
.hero .eyebrow{margin-bottom:clamp(22px,2.5vw,32px)}
@media(max-width:900px){.hero{min-height:0;padding-block:clamp(90px,14vw,130px)}}

/* gradient hero, Drive page only */
.hero--grad{
  background:linear-gradient(105deg,#0B2418 0%,#1C5436 45%,#3FBE86 100%);
  color:#fff;text-align:left;
}
.hero--grad .display{color:#fff;margin-inline:0;max-width:18ch}
.hero--grad h1 em,.hero--grad h2 em{color:var(--mint)}
.hero--grad .lead{color:rgba(255,255,255,.78);margin-inline:0}
.hero--grad .eyebrow{color:rgba(255,255,255,.6)}

/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:var(--r-card);object-fit:cover}
.shot--bleed img{border-radius:0}
.shot--21x9 img{aspect-ratio:21/9}
.shot--16x9 img{aspect-ratio:16/9}
.shot--3x2  img{aspect-ratio:3/2}
.shot--4x3  img{aspect-ratio:4/3}
.shot--1x1  img{aspect-ratio:1/1}
.shot--3x4  img{aspect-ratio:3/4}
.shot figcaption{margin-top:16px;font-size:.82rem;color:var(--muted);letter-spacing:.02em}

/* full-screen media band */
.band{overflow:hidden}
/* Safari needs explicit width AND max-width on video, and will not stretch it
   from width:100% alone if the element has an intrinsic size. */
.band img,.band video{
  display:block;width:100%;max-width:100%;min-width:100%;
  height:100vh;height:100svh;max-height:820px;
  object-fit:cover;object-position:center;
  background:var(--ink);
}
.band--video{position:relative;line-height:0}
@media(max-width:900px){.band img,.band video{height:auto;max-height:none;min-height:0;aspect-ratio:3/2}}

/* image placeholders, quiet by design */
.ph{margin:0}
.ph__box{position:relative;width:100%;background:var(--shell);border:1px solid var(--line);border-radius:var(--r-card);display:grid;place-items:center;overflow:hidden}
.ph__tag{position:relative;z-index:1;text-align:center;padding:0 28px;max-width:34ch}
.ph__id{display:block;font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ph__what{display:block;font-size:.92rem;line-height:1.55;color:var(--ink)}
.ph__spec{display:block;font-size:.76rem;color:var(--muted);margin-top:9px}
.ph--21x9 .ph__box{aspect-ratio:21/9}
.ph--16x9 .ph__box{aspect-ratio:16/9}
.ph--4x3  .ph__box{aspect-ratio:4/3}
.ph--1x1  .ph__box{aspect-ratio:1/1}
.ph--3x4  .ph__box{aspect-ratio:3/4}
.sec--shell .ph__box{background:var(--paper)}

/* --------------------------------------------------------------------------
   STATS  (hairlines, no colour flood)
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,4vw,56px)}
.stat{border-top:1px solid var(--line);padding-top:28px}
.stat__n{font-family:var(--display-font);font-size:clamp(2rem,3.2vw,3rem);font-weight:600;line-height:1.05;letter-spacing:-.045em}
.stat__l{margin-top:14px;font-size:.88rem;color:var(--muted);line-height:1.5}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);gap:38px}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   CARDS  (borderless by default, so the page stays quiet)
   -------------------------------------------------------------------------- */
.cards{display:grid;gap:clamp(30px,3.5vw,56px)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.cards--4{grid-template-columns:repeat(2,1fr)}.cards--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.cards--2,.cards--3,.cards--4{grid-template-columns:1fr}}

.card{padding:0}
.card .h-md,.card .h-lg{margin-bottom:.6em}
.card p{font-size:.95rem;color:var(--muted);margin:0}
.card__ph{margin-bottom:clamp(24px,2.6vw,36px)}
.card__step{display:block;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:18px}
.card--boxed{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(28px,3vw,42px)}
.card--link{text-decoration:none;display:block;color:inherit;transition:opacity .2s}
.card--link:hover{opacity:.62}
.card__more{margin-top:20px;font-size:.88rem;font-weight:500;color:var(--mint-link)}
.card--num{border-top:1px solid var(--line);padding-top:28px}

/* --------------------------------------------------------------------------
   SPLIT
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}
.split--flip .split__a{order:2}
@media(max-width:900px){
  .split,.split--wide{grid-template-columns:1fr;gap:44px}
  .split--flip .split__a{order:0}
}

/* --------------------------------------------------------------------------
   LISTS
   -------------------------------------------------------------------------- */
.ticks{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px}
.ticks li{position:relative;padding-left:28px;font-size:.95rem;line-height:1.6;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--mint)}

.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.tags li{border:1px solid var(--line);border-radius:var(--r);padding:11px 20px;font-size:.88rem;color:var(--muted);transition:border-color .2s,color .2s}
.tags a{text-decoration:none}
.tags li:hover{border-color:var(--ink);color:var(--ink)}
/* suburb chips that drop their name into the availability field */
.tags--pick li{padding:0}
.tags--pick button{
  font-family:inherit;font-size:.88rem;color:var(--muted);background:none;border:0;
  padding:11px 20px;cursor:pointer;border-radius:var(--r);transition:color .2s;
}
.tags--pick li:hover button,.tags--pick button:focus-visible{color:var(--ink)}
.tags--pick li.picked{border-color:var(--mint);background:var(--mint-pale)}
.tags--pick li.picked button{color:var(--ink);font-weight:500}

/* --------------------------------------------------------------------------
   ROUTE MODULE
   -------------------------------------------------------------------------- */
.route{display:grid;grid-template-columns:minmax(280px,380px) 1fr;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
@media(max-width:900px){.route{grid-template-columns:1fr}}
.route__step{padding:26px clamp(24px,2.4vw,34px);border-bottom:1px solid var(--line)}
.route__step:last-child{border-bottom:none}
.route__step--on{background:var(--shell)}
.route__k{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:11px}
.route__t{font-family:var(--display-font);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.route__step p{font-size:.9rem;line-height:1.6;margin:0;color:var(--muted)}
.route__map{position:relative;background:var(--mint-pale);min-height:380px}
.route__map svg{position:absolute;inset:0;width:100%;height:100%}
.chip{position:absolute;background:#fff;border-radius:10px;padding:13px 18px;box-shadow:0 6px 24px rgba(15,17,23,.07)}
.chip b{display:block;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.chip span{display:block;font-family:var(--display-font);font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.chip--a{top:9%;left:8%}
.chip--b{top:9%;right:7%}
.chip--c{bottom:10%;left:13%}
.chip--d{bottom:10%;right:7%}
@media(max-width:560px){.chip{padding:10px 13px}.chip span{font-size:.9rem}}

/* --------------------------------------------------------------------------
   TABLE
   -------------------------------------------------------------------------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;min-width:660px}
table.cmp th,table.cmp td{padding:22px 24px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.55;color:var(--muted)}
table.cmp thead th{font-family:var(--display-font);font-size:.92rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);border-bottom-color:var(--ink)}
table.cmp thead th:first-child{font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
table.cmp tbody th{font-family:var(--font);font-size:.9rem;font-weight:500;color:var(--ink)}
table.cmp .moa{color:var(--ink);font-weight:500}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none}

/* On a phone a wide table is unusable, so each row becomes its own card and
   the column headings move inline via data-label. */
@media(max-width:760px){
  .tscroll{overflow:visible}
  table.cmp{min-width:0}
  table.cmp thead{display:none}
  table.cmp,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:100%}
  table.cmp tr{border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;margin-bottom:14px}
  table.cmp tr:last-child{margin-bottom:0}
  table.cmp th[scope="row"]{border:0;padding:0 0 14px;font-family:var(--display-font);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  table.cmp td{border:0;padding:11px 0;display:flex;justify-content:space-between;gap:18px;align-items:baseline;text-align:right}
  table.cmp td::before{content:attr(data-label);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);flex:none;text-align:left}
  table.cmp td+td{border-top:1px solid var(--line)}
  table.cmp .moa{background:transparent}
}

/* --------------------------------------------------------------------------
   PLANS
   -------------------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px);align-items:start}
.plans--4{grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.4vw,34px)}
@media(max-width:1100px){.plans--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
@media(max-width:620px){.plans--4{grid-template-columns:1fr}}
.plan{border-top:1px solid var(--line);padding-top:32px}
.plan--on{border-top:2px solid var(--mint)}
.plan__name{font-family:var(--display-font);font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.plan__price{font-family:var(--display-font);font-size:clamp(1.8rem,2.4vw,2.3rem);font-weight:600;line-height:1;letter-spacing:-.04em;margin:16px 0 6px}
.plan__price small{font-size:.82rem;font-weight:400;color:var(--muted);letter-spacing:0}
.plan__meta{font-size:.85rem;color:var(--muted)}
.plan .ticks{margin-bottom:32px}
.plan .btn{width:100%}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:28px 2px;font-family:var(--display-font);font-size:1.02rem;font-weight:500;letter-spacing:-.02em;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:15px;height:15px;transition:transform .3s cubic-bezier(.4,0,.2,1);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1117' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__a{padding:0 2px 30px;max-width:68ch;font-size:.95rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.form .f{margin-bottom:clamp(26px,2.6vw,34px)}
.form label{display:block;font-size:.82rem;font-weight:500;margin-bottom:10px;color:var(--ink)}
.form label .opt{font-weight:400;color:var(--muted)}
.form input,.form select,.form textarea{
  width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(15,17,23,.22);
  padding:10px 2px;border-radius:0;
}
.form textarea{min-height:80px;resize:vertical}
.form select{appearance:none;background:transparent}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}
@media(max-width:640px){.fpair{grid-template-columns:1fr}}
.form-ok{display:none;border:1px solid rgba(15,17,23,.2);border-radius:var(--r-card);padding:clamp(26px,3vw,38px)}
.form-ok.on{display:block}

.check{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;max-width:520px}
.check input{flex:1 1 240px;min-width:0;font-family:inherit;font-size:.98rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(15,17,23,.22);padding:13px 2px}
.check input:focus{outline:none;border-bottom-color:var(--ink)}
.check-out{display:none;margin-top:26px;font-size:.92rem;line-height:1.7;color:var(--muted);max-width:60ch}
.check-out.on{display:block}

/* --------------------------------------------------------------------------
   THE ONE MINT BAND  (closing call to action)
   -------------------------------------------------------------------------- */
.sec--mint{background:var(--mint)}
/* Nothing green may appear on the mint band. Every accent falls back to ink,
   because a green on green is unreadable. */
.sec--mint .lead,.sec--mint .after-btn,.sec--mint .card p{color:rgba(15,17,23,.68)}
.sec--mint .eyebrow,.sec--mint .card__step,.sec--mint .cite{color:rgba(15,17,23,.55)}
.sec--mint h1 em,.sec--mint h2 em,.sec--mint h3 em{color:rgba(15,17,23,.42)}
.sec--mint .card__more,.sec--mint .card__more a,
.sec--mint .form label,.sec--mint .form-ok h3,
.sec--mint .ticks li,.sec--mint .check-out{color:var(--ink)}
.sec--mint .ticks li::before{background:var(--ink)}
.sec--mint .form input,.sec--mint .form select,.sec--mint .form textarea{border-bottom-color:rgba(15,17,23,.3)}
.sec--mint .form input::placeholder,.sec--mint .form textarea::placeholder{color:rgba(15,17,23,.42)}
.sec--mint .form-ok{border-color:rgba(15,17,23,.28)}
.sec--mint .tlink{color:var(--ink);border-bottom-color:rgba(15,17,23,.35)}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.ftr{background:var(--ink);color:#8E9793;padding-block:clamp(80px,9vw,120px) 44px;font-size:.9rem}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
@media(max-width:900px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__top{grid-template-columns:1fr}}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ftr a{color:#8E9793;text-decoration:none;transition:color .2s}
.ftr a:hover{color:#fff}
.ftr h4{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#5C6562;margin-bottom:22px}
.ftr__blurb{max-width:28ch;margin-top:24px;line-height:1.7}
.ftr__social{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.ftr__social a{
  flex:0 0 auto;width:38px;height:38px;box-sizing:border-box;
  border:1px solid var(--line-ink);border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#B4BCB8;line-height:0;
  transition:border-color .2s,background-color .2s,color .2s;
}
.ftr__social a:hover{border-color:var(--mint);background:rgba(84,231,158,.1);color:var(--mint)}
/* width and height are also set on the element, so the icons stay 17px even
   before this stylesheet loads. fill:currentColor inherits the link colour. */
.ftr__social svg{width:17px;height:17px;max-width:17px;flex:none;display:block;fill:currentColor}
.ftr__top{align-items:start}
.ftr__wide{grid-column:1/-1;border-top:1px solid var(--line-ink);margin-top:14px;padding-top:34px}
.ftr__wide h4{margin-bottom:18px}
.ftr__wide ul{display:flex;flex-wrap:wrap;gap:10px 26px}

.ftr__base{margin-top:clamp(70px,8vw,110px);padding-top:32px;border-top:1px solid var(--line-ink);font-size:.8rem;line-height:1.7;color:#5C6562;display:grid;gap:14px}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.crumbs{font-size:.8rem;color:var(--soft);padding-top:26px}
.crumbs a{text-decoration:none;color:var(--soft)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin-inline:8px}

/* --------------------------------------------------------------------------
   SCROLL ANIMATION
   Content is visible by default. The script only switches the effect on once
   it has confirmed it can run, so nothing can ever be left invisible.
   -------------------------------------------------------------------------- */
.rise{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js-anim .rise{opacity:0;transform:translateY(26px)}
.js-anim .rise.in{opacity:1;transform:none}

/* staggered children inside a grid or list */
.js-anim .stagger>*{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js-anim .stagger.in>*{opacity:1;transform:none}
.js-anim .stagger.in>*:nth-child(1){transition-delay:0ms}
.js-anim .stagger.in>*:nth-child(2){transition-delay:90ms}
.js-anim .stagger.in>*:nth-child(3){transition-delay:180ms}
.js-anim .stagger.in>*:nth-child(4){transition-delay:270ms}
.js-anim .stagger.in>*:nth-child(5){transition-delay:360ms}
.js-anim .stagger.in>*:nth-child(6){transition-delay:450ms}
.js-anim .stagger.in>*:nth-child(n+7){transition-delay:540ms}

/* a photograph settling into place */
.js-anim .zoom img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.js-anim .zoom.in img{transform:none}

/* a hairline drawing itself */
.js-anim .draw{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js-anim .draw.in{transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .js-anim .rise,.js-anim .stagger>*,.js-anim .zoom img,.js-anim .draw{opacity:1;transform:none}
}

/* ==========================================================================
   MOADRIVE INTERACTIVE MODULE
   Scoped entirely under .moa-wrapper so nothing leaks into the rest of
   the site. Colours pulled to the brand tokens.
   ========================================================================== */
.moa-wrapper{
  --m-border:#E8ECEA; --m-ink:#0F1117; --m-mute:#6B7370;
  --m-green:#54E79E; --m-green-dark:#178A55; --m-red:#E25C4F; --m-water:#EDFBF4;
  font-family:var(--font); display:block; width:100%;
}
.moa-wrapper *{box-sizing:border-box}

.moa-grid{
  display:grid; grid-template-columns:340px 1fr;
  border:1px solid var(--m-border); border-radius:var(--r-card);
  overflow:hidden; background:#fff; width:100%;
}
.moa-tabs{border-right:1px solid var(--m-border);display:flex;flex-direction:column;background:var(--shell)}
.moa-tab{
  text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:24px 26px;border-bottom:1px solid var(--m-border);
  color:var(--m-mute);position:relative;transition:background .25s ease;width:100%;
}
.moa-tab:last-child{border-bottom:none}
.moa-tab::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--m-green);
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease;
}
.moa-tab-label{font-size:.66rem;letter-spacing:.22em;font-weight:600;text-transform:uppercase;color:#9AA3A0;display:block;margin-bottom:8px}
.moa-tab-title{font-family:var(--display-font);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--m-ink);display:block;transition:color .25s ease}
.moa-tab-desc{
  font-size:.88rem;line-height:1.6;color:var(--m-mute);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s ease,opacity .3s ease,margin .35s ease;
}
.moa-tab:hover{background:#EDFBF4}
.moa-tab.active{background:#fff}
.moa-tab.active::before{transform:scaleY(1)}
.moa-tab.active .moa-tab-desc{max-height:110px;opacity:1;margin-top:9px}
.moa-tab.active .moa-tab-title{color:var(--m-green-dark)}

.moa-stage{position:relative;min-height:500px;background:var(--m-water);overflow:hidden}
.moa-illo{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.99);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.moa-illo.active{opacity:1;transform:none;pointer-events:auto}
.moa-illo svg{width:100%;height:100%;display:block}

.moa-card{position:absolute;background:rgba(255,255,255,.95);border:1px solid var(--m-border);border-radius:10px;box-shadow:0 8px 24px -12px rgba(15,17,23,.25);padding:12px 15px}
.moa-card-label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#9AA3A0;margin:0 0 5px;display:block}
.moa-card-value{font-family:var(--display-font);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;color:var(--m-ink);margin:0;display:block}
.moa-card-value.green{color:var(--m-green-dark)}
.moa-card-value.amber{color:#B9791F}
.moa-card-value.red{color:var(--m-red)}

.moa-route-active{stroke:#54E79E;stroke-width:4.5;fill:none;stroke-linecap:round;stroke-dasharray:1 13;animation:moa-dashmove 1.1s linear infinite}
@keyframes moa-dashmove{to{stroke-dashoffset:-28}}
.moa-node-pulse{animation:moa-pulse 2.2s ease-out infinite;transform-origin:center}
@keyframes moa-pulse{0%{opacity:.5;transform:scale(.6)}70%{opacity:0}100%{opacity:0;transform:scale(2.6)}}
.moa-car{animation:moa-drive 4.2s linear infinite}
@keyframes moa-drive{0%{offset-distance:0%}100%{offset-distance:100%}}

@media(max-width:900px){
  .moa-grid{grid-template-columns:1fr}
  .moa-tabs{border-right:none;border-bottom:1px solid var(--m-border);flex-direction:row;overflow-x:auto}
  .moa-tab{min-width:210px;border-bottom:none;border-right:1px solid var(--m-border)}
  .moa-stage{min-height:380px}
}
@media(prefers-reduced-motion:reduce){
  .moa-route-active,.moa-node-pulse,.moa-car{animation:none!important}
}

/* small print used for stat attribution */
.cite{font-size:.78rem;color:#9AA3A0;line-height:1.6;margin-top:36px}
.cite a{color:#9AA3A0}

/* small print used for stat attribution */
.cite{font-size:.78rem;color:#9AA3A0;line-height:1.6;margin-top:36px}
.cite a{color:#9AA3A0}

/* --------------------------------------------------------------------------
   MOBILE PASS
   -------------------------------------------------------------------------- */
html,body{max-width:100%}
@media(max-width:760px){
  body{font-size:16px}
  .sec{padding-block:clamp(72px,14vw,110px)}
  .display{font-size:clamp(2.05rem,8.2vw,2.9rem)}
  .h-xl{font-size:clamp(1.7rem,6.4vw,2.2rem)}
  .h-lg{font-size:clamp(1.2rem,4.8vw,1.45rem)}
  .btns .btn{flex:1 1 auto;justify-content:center}
  .hero .btns{flex-direction:column;align-items:stretch}
  .hero .btns .btn{width:100%}
  .check{flex-direction:column;align-items:stretch}
  .check .btn{width:100%}
  .sec-head{margin-bottom:clamp(38px,9vw,56px)}
  .route__map{min-height:300px}
  .chip{position:static;box-shadow:none;border:0;padding:0;background:none}
  .route__map .chip{display:none}
  .route__map{min-height:220px}
  .stat__n{font-size:clamp(1.9rem,9vw,2.4rem)}
  .faq summary{gap:16px;font-size:1rem}
  .plan .btn{width:100%}
}
@media(max-width:420px){
  .nav-right .btn{padding:10px 14px;font-size:.82rem}
}

/* --------------------------------------------------------------------------
   LIVE MAP CARD
   -------------------------------------------------------------------------- */
.mapcard{
  position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;background:var(--mint-pale);aspect-ratio:4/3;text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.mapcard:hover{border-color:var(--mint);box-shadow:0 18px 46px rgba(15,17,23,.09);transform:translateY(-2px)}
.mapcard svg{position:absolute;inset:0;width:100%;height:100%}
.mapcard__cta{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.85rem;font-weight:500;
  padding:12px 24px;border-radius:var(--r);white-space:nowrap;
}
.mapcard:hover .mapcard__cta{background:var(--mint);color:var(--ink)}
.pin{transform-origin:center}
.pin circle.halo{animation:pin-pulse 2.6s ease-out infinite}
@keyframes pin-pulse{0%{opacity:.45;transform:scale(.5)}70%{opacity:0}100%{opacity:0;transform:scale(2.4)}}
@media(prefers-reduced-motion:reduce){.pin circle.halo{animation:none}}