/* ================================================================
   ETHICARE RESOURCING — shared site shell (header, footer, base, forms)
   Used by every page on the static (Netlify) site.
   ================================================================ */
:root{
  /* content widths + reading measures (Ethicare Design System, part 4) */
  --w-prose:760px; --w-wide:920px; --w-shell:1180px;
  --m-prose:64ch; --m-lead:50ch;

  --teal:#02615D; --green:#02615D; --sage:#72A471; --sage-text:#2F5E49; --lime:#A6C84A;
  --nz:#72A471; --au:#B32C62; --au-text:#B32C62;
  --mint:#C9DED3; --soft:#E6F1ED; --soft-green:#E6F1ED; --warm:#FCFBF8;
  --white:#fff; --text:#333333; --muted:#555555;
  --display:'Work Sans',sans-serif; --body:'Manrope',sans-serif;
  /* ---- design tokens (system of record — spacing / radius / shadow / motion) ---- */
  /* rhythm scale (part 5) — between-element and between-section spacing */
  --sp-2xs:4px; --sp-xs:8px; --sp-s:16px; --sp-m:24px; --sp-l:40px; --sp-xl:64px;
  --sp-section:clamp(56px,7vw,78px);
  /* --sp-major is an alias of --sp-section (375 live declarations reference it) — never redefine
     it independently, or section rhythm forks again. --sp-hero is the one band deliberately larger
     than a section gap; --sp-minor is the fluid form of --sp-xl; --sp-card is card interior. */
  --sp-major:var(--sp-section); --sp-hero:clamp(72px,10vw,120px); --sp-minor:clamp(44px,6vw,64px);
  --sp-card:clamp(28px,3.4vw,40px); --pad:24px; --gap:24px;
  --r-xs:6px; --r-sm:12px; --r-md:14px; --r-lg:20px; --r-xl:24px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(1,49,47,.05); --sh-md:0 16px 38px rgba(1,49,47,.09); --sh-lg:0 26px 54px rgba(1,49,47,.12);
  --sh-focus:0 0 0 7px rgba(167,201,87,.55); --sh-photo:0 16px 38px rgba(0,0,0,.22);
  /* ---- editorial type scale (refinement pass, Aug 2026) ----------------------
     ONE ladder with deliberate gaps between rungs. The site's problem was never
     the sizes themselves, it was six of them sitting within 2px of each other
     (14.5 / 15 / 15.5 / 16 / 16.5 / 17), which reads as a dashboard rather than
     an edited page. Every step below is at least 2px clear of its neighbour and
     the display sizes are deliberately far from the supporting ones.
     Applied page by page — declare sizes with these names, never a literal. */
  --t-display:clamp(38px,5.6vw,64px);  /* hero / page-opening editorial headline */
  --t-h1:clamp(36px,4.8vw,56px);       /* page title */
  --t-h2:clamp(30px,3.4vw,42px);       /* section heading */
  --t-h3:clamp(21px,1.9vw,26px);         /* card + subsection heading */
  --t-lead:clamp(18px,1.55vw,20px);    /* standfirst — one clear step above body */
  --t-body:17px;                       /* the ONLY body size */
  --t-meta:15px;                       /* metadata, captions, footnotes */
  --t-eyebrow:13px;
  /* added by the global type pass, 22 Aug 2026 — sizes the brief needs that the
     ladder had no name for. Accordion titles sit deliberately below --t-h2 so they
     read as interactive, not as another section heading. */
  --t-h4:19px;
  --t-button:15.5px;
  --t-accordion:clamp(17px,1.3vw,19px);
  /* sequence numerals (01/02/03) — deliberately between H3 and H2 so a step reads as
     a step, not as a heading and not as display type */
  --t-numeral:clamp(26px,2.6vw,32px);
  /* reading measures. Page width is not reading width: prose stops at --w-read
     even when its container is --w-shell. --w-prose stays for legacy callers. */
  --w-read:640px;
  --w-lead:700px;
                    /* uppercase label */
  --lh-display:1.04; --lh-head:1.12; --lh-lead:1.5; --lh-body:1.6;
  --ls-display:-.026em; --ls-head:-.018em;
  /* editorial rhythm — a major band breathes noticeably more than a utility one */
  --sp-editorial:clamp(84px,9vw,132px);
  --lime-light:#C6E084; /* the ONLY accessible lime on dark teal */
  /* structural rules on tinted/dark-adjacent surfaces — measured 3.0:1+ on every brand
     surface. Pale hairlines (--mint) are for card edges only; they vanish on a tint. */
  --rule-tint:rgba(2,97,93,.65);
  /* the colour carrying nearly all small text on light surfaces — used 905x site-wide
     with no name until now, which is why it kept being retyped. AA on cream/sage/sand. */
  --fern-text:#2F5E49;
  --ease:.25s ease;

  /* ---- ALIASES (transitional) ----------------------------------------------
     The destination guides and their chapter pages use a more explicit naming
     scheme. Both vocabularies now resolve to the same values, so a token only
     ever has to be changed in one place — the block above.
     Preferred names going forward are the ones on the LEFT of this section.
     Migrate pages onto them over time; delete the legacy names above only once
     nothing references them.
     ------------------------------------------------------------------------ */
  --font-heading:var(--display);
  --font-body:var(--body);
  --ethicare-teal:var(--teal);
  --accent-lime:var(--lime);
  --accent-fern:var(--nz);
  --accent-apricot:var(--au);
  --surface-white:var(--white);
  --surface-sage:var(--soft);
  --surface-warm:var(--warm);
  --nz-highlight:var(--soft-green);
  --text-muted:var(--muted);
  --rule:var(--mint);
  /* —— Section 18 foundation (D08/D09/D10): additive role tokens; legacy --t-*/--sp-* retained.
     Widths reuse --w-shell(1180), --w-lead(700 reading col), --w-prose(760 heading max). Inert until components migrate. —— */
  --space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--space-56:56px;--space-64:64px;--space-72:72px;--space-80:80px;
  --gutter:40px;--w-hero-intro:620px;--w-home-h1:960px;--band-pad:64px;--section-gap:72px;
  --r-card:16px;--r-input:var(--r-sm);--r-panel:var(--r-lg);
  --control-h:48px;--input-px:16px;--btn-px:24px;--textarea-h:144px;--header-h:80px;--header-h-compact:68px;
  --ls-heading:-.02em;--ls-card-title:-.01em;--ls-eyebrow:.08em;
  --fs-home-h1:5rem;--lh-home-h1:1.05;--fs-country-h1:4rem;--lh-country-h1:1.1;--fs-employer-h1:3.5rem;--lh-employer-h1:1.1;
  --fs-page-title:3rem;--lh-page-title:1.16;--fs-tool-title:2.75rem;--lh-tool-title:1.18;--fs-section:2.5rem;--lh-section:1.2;
  --fs-article-h:1.875rem;--lh-article-h:1.27;--fs-card-title:1.375rem;--lh-card-title:1.27;
  --fs-home-lead:1.375rem;--lh-home-lead:1.55;--fs-lead:1.25rem;--lh-lead-r:1.6;--fs-body:1.0625rem;--lh-body-r:1.65;--fs-card-body:1rem;--lh-card-body:1.625;
  --fs-label:.9375rem;--lh-label:1.47;--fs-button:1rem;--lh-button:1.5;--fs-caption:.875rem;--lh-caption:1.57;--fs-eyebrow:.8125rem;--lh-eyebrow:1.54;
  --fs-quote:1.75rem;--lh-quote:1.36;--fs-vacancy-h1:2.625rem;--lh-vacancy-h1:1.19;--fs-apply-intro:2rem;--lh-apply-intro:1.25;--fs-budget:3rem;--lh-budget:1.16;
}
/* Section 18 responsive token overrides (tablet <=1199, mobile <=767, tiny <=374) */
@media(max-width:1199px){:root{--gutter:32px;--band-pad:48px;--section-gap:56px;--fs-home-h1:4rem;--fs-country-h1:3rem;--fs-employer-h1:3rem;--fs-page-title:2.625rem;--fs-tool-title:2.5rem;--fs-section:2.125rem;--fs-article-h:1.75rem;--fs-home-lead:1.25rem;--fs-lead:1.1875rem;--fs-quote:1.625rem;--fs-vacancy-h1:2.375rem}}
@media(max-width:767px){:root{--gutter:20px;--band-pad:40px;--section-gap:40px;--btn-px:20px;--fs-home-h1:3rem;--fs-country-h1:2.5rem;--fs-employer-h1:2.5rem;--fs-page-title:2.25rem;--fs-tool-title:2.125rem;--fs-section:1.875rem;--fs-article-h:1.625rem;--fs-card-title:1.25rem;--fs-home-lead:1.125rem;--fs-lead:1.125rem;--fs-body:1rem;--fs-quote:1.5rem;--fs-vacancy-h1:2rem;--fs-apply-intro:1.75rem;--fs-budget:2.5rem}}
@media(max-width:374px){:root{--gutter:16px;--fs-home-h1:2.625rem;--fs-country-h1:2.25rem;--fs-employer-h1:2.25rem}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
body{font-family:var(--body);font-size:var(--t-body);line-height:var(--lh-body);color:var(--text);background:var(--warm);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,details:focus-visible{outline:3px solid #02615D;outline-offset:2px;box-shadow:0 0 0 2px #FCFBF8,var(--sh-focus)}
::selection{background:#D9E4C9;color:#02615D}
h1,h2,h3,h4,blockquote{text-wrap:balance}
p,li,figcaption,dd,summary{text-wrap:pretty}
.shell{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------------- HEADER ---------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,251,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--mint)}
.site-header .shell{display:flex;align-items:center;gap:24px;height:72px;max-width:var(--w-shell,1180px)}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand img{width:36px;height:36px;object-fit:contain}
.brand span{font-family:var(--display);font-weight:600;font-size:18px;color:var(--teal);letter-spacing:-.01em}
.brand span strong{font-weight:600;color:var(--green)}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--teal);padding:9px 13px;border-radius:var(--r-sm);transition:background .15s ease,color .15s ease}
.site-nav a:hover{background:var(--soft-green);color:var(--teal)}
.site-nav a[aria-current="page"]{color:var(--teal);background:var(--soft-green)}
.site-nav a.muted{color:var(--muted)}
.site-nav .nav-cta{background:var(--teal);color:#fff;margin-left:8px;padding:10px 18px}
.site-nav .nav-cta:hover{background:#014E4B;color:#fff}
.nav-toggle{display:none;flex:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--mint);border-radius:var(--r-sm);background:#fff;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.nav-toggle span{width:20px;height:2px;background:var(--teal);border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1199px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;background:var(--warm);border-bottom:1px solid var(--mint);padding:14px 24px 22px;margin:0;transform:translateY(-130%);transition:transform .25s ease;box-shadow:var(--sh-md);max-height:calc(100svh - 68px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.nav-open{overflow:hidden}
  .site-nav.open{transform:translateY(0)}
  .site-nav a{padding:13px 12px;font-size:16px;line-height:24px;min-height:48px}
  .site-nav .nav-cta{margin:8px 0 0;text-align:center}
}

/* ---------------- FOOTER ---------------- */
.site-footer{background:#01312F;color:rgba(255,255,255,.82);margin-top:0}
.site-footer .shell{padding-top:54px;padding-bottom:30px}
.f-cols{display:grid;grid-template-columns:1.5fr .9fr .9fr .9fr;gap:40px}
.f-contact{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.f-contact a,.f-contact span{font-family:var(--body);font-weight:500;color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;line-height:1.5}
.f-contact a:hover{color:#fff}
.f-contact .f-k{display:block;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C9DED3;margin-bottom:4px}
.brand.light span{color:#fff}.brand.light span strong{color:#A6C84A}
.f-brand p{font-family:var(--body);font-size:14px;line-height:1.55;color:rgba(255,255,255,.78);max-width:42ch;margin-top:16px}
.f-col :is(h2,h4){font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#C9DED3;margin-bottom:16px}
.f-col a{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;color:rgba(255,255,255,.82);padding:6px 0;transition:color .15s ease}
.f-col a:hover{color:#fff}
.f-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--display);font-weight:600;font-size:12.5px;color:rgba(255,255,255,.82)}
@media (max-width:980px){.f-cols{grid-template-columns:1fr 1fr;gap:24px}.f-brand{grid-column:1/-1}}
@media (max-width:600px){.f-cols{grid-template-columns:1fr}}

/* footer social — mirrored from shell.css. MUST live in both sheets: pages that
   load site.css only (move.html, and any shell-less page) rendered the LinkedIn
   and Facebook SVGs unconstrained — full-width black glyphs in the footer. */
.f-social{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.f-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 15px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:rgba(255,255,255,.88);font-family:'Work Sans',sans-serif;font-weight:600;font-size:13.5px;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.f-social a:hover{background:rgba(255,255,255,.10);border-color:#A6C84A;color:#fff}
.f-social svg{width:16px;height:16px;flex:none;fill:currentColor}
@media(max-width:600px){.f-social a{font-size:13px;padding:9px 13px}}


/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;font-family:var(--display);font-weight:600;font-size:16px;padding:14px 28px;border-radius:var(--r-sm);cursor:pointer;border:none;transition:transform var(--ease),background var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover{background:#014E4B}
.btn-secondary{background:#fff;border:1.5px solid var(--sage);color:var(--teal)}.btn-secondary:hover{background:var(--soft-green)}
.btn-lime{background:#2F5E49;color:#fff}.btn-lime:hover{background:#72A471}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
/* ---------------- CARD (canonical) ---------------- */
.card{background:#fff;border:1px solid var(--mint);border-radius:var(--r-lg);padding:var(--sp-card);box-shadow:var(--sh-sm);transition:transform var(--ease),box-shadow var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}

/* ---------------- FORM PAGES ---------------- */
.formwrap{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,96px) 24px}
/* Canonical eyebrow — the 28px lime rule + fern-text label, defined ONCE here and
   mirrored in shell.css. Before this, neither central sheet carried a ::before, so
   every page hand-rolled the dash and 428 pages patched its colour back with
   !important. Country pages override --eyebrow-ink/--eyebrow-rule (AU: clay + apricot);
   the literal fallbacks are the NZ/default canonical, so an unset page is still correct.
   Page-level rules still win on cascade order, so this only reaches pages with no rule. */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow-ink,#2F5E49);margin-bottom:16px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--eyebrow-rule,#A6C84A);flex:none}

.formwrap h1{font-family:var(--display);font-weight:600;font-size:clamp(40px,6vw,56px);color:var(--teal);letter-spacing:-.02em;line-height:1.1;margin-bottom:24px}
.formwrap .lead{font-size:18px;color:var(--muted);line-height:1.7;max-width:760px;margin-bottom:8px}
.ec-form{margin-top:40px;display:grid;gap:24px}
.ec-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--display);font-weight:600;font-size:14px;color:var(--green)}
.field label .req{color:var(--au-text,#A34438)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:15.5px;color:var(--text);background:#fff;border:1.5px solid var(--mint);border-radius:var(--r-sm);padding:13px 15px;transition:border-color .15s ease}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#2F5E49;outline:none}
.field .hint{font-size:12.5px;color:var(--muted)}
.field-file input{padding:11px 14px;background:var(--soft);cursor:pointer}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice label{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--teal);background:#fff;border:1.5px solid var(--mint);border-radius:var(--r-pill);padding:10px 18px;cursor:pointer}
.choice input{accent-color:var(--teal)}
.choice label:has(input:checked){border-color:var(--teal);background:var(--soft-green)}
.ec-form .actions{margin-top:4px}
.formnote{font-size:13px;color:var(--muted);margin-top:16px;padding-top:16px;border-top:1px solid var(--mint)}
@media (max-width:600px){.ec-form .row2{grid-template-columns:1fr}.btn{width:100%}}

/* page intro band (form pages) */
.intro-band{background:transparent;color:var(--text);position:relative;z-index:1;padding-top:clamp(44px,6vw,72px)}
.intro-band .formwrap{padding-bottom:clamp(34px,5vw,52px)}
.intro-band h1{color:var(--teal)}
.intro-band .eyebrow{color:#2F5E49}
.intro-band .lead{color:var(--muted)}

/* ---- elevated form card ---- */
.formcard-sec{background:var(--warm);padding:0 20px clamp(44px,6vw,80px)}
.formcard{max-width:920px;margin:clamp(-122px,-9.5vw,-74px) auto 0;background:#fff;border:1px solid var(--mint);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:clamp(30px,4vw,52px);position:relative;z-index:2}
.formcard .ec-form{margin-top:4px}
.field input,.field select,.field textarea{border-radius:var(--r-sm);padding:14px 16px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.field input::placeholder,.field textarea::placeholder{color:#555555}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#2F5E49}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:var(--sh-focus)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F5E4E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field-file input{padding:9px 14px;background:var(--soft-green);border:1.5px dashed var(--sage);border-radius:var(--r-sm);cursor:pointer;font-family:var(--body);font-size:14px;color:var(--muted)}
.field-file input::file-selector-button{font-family:var(--display);font-weight:600;font-size:13.5px;color:#fff;background:var(--teal);border:0;border-radius:var(--r-sm);padding:10px 17px;margin-right:14px;cursor:pointer;transition:background .15s ease}
.field-file input::file-selector-button:hover{background:#014E4B}
.choice label{padding:11px 17px;transition:border-color .15s ease,background .15s ease}
.choice label:hover{border-color:#2F5E49}
.ec-form .actions{margin-top:8px}
.ec-form .actions .btn{min-width:230px}
@media (max-width:600px){.formcard{margin-top:-60px;padding:24px 20px;border-radius:var(--r-lg)}.ec-form .actions .btn{width:100%}}


/* nav dropdowns */
.site-nav .navitem{position:relative;display:flex;align-items:center}
.site-nav .navitem>a{display:inline-flex;align-items:center;gap:4px}
.site-nav .cv{font-size:10px;opacity:.82}
.subnav{position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid #C9DED3;border-radius:var(--r-sm);box-shadow:var(--sh-md);padding:8px;display:none;flex-direction:column;gap:4px;z-index:60}
.site-nav .navitem:hover .subnav,.site-nav .navitem:focus-within .subnav,.site-nav .navitem.open .subnav{display:flex}
.subnav a{padding:10px 14px;border-radius:var(--r-sm);font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:14px;color:#333333;text-decoration:none}
.subnav a:hover{background:#E4E9E5;color:#02615D}
@media (max-width:1199px){
  .site-nav .navitem{flex-direction:column;align-items:stretch}
  .subnav{position:static;display:none;box-shadow:none;border:none;border-radius:0;padding:0 0 6px 12px;min-width:0;background:transparent}
  .site-nav .navitem.open .subnav{display:flex}
  .subnav a{font-size:15px;color:#555555;padding:11px 12px}
}

/* nav mega (professions) */
.subnav.mega{flex-direction:row;gap:8px 24px;min-width:430px;padding:14px 16px}
.site-nav .navitem:hover .subnav.mega,.site-nav .navitem:focus-within .subnav.mega,.site-nav .navitem.open .subnav.mega{display:flex}
.megacol{display:flex;flex-direction:column;min-width:180px}
.megah{font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2F5E49;padding:6px 14px 8px}
@media (max-width:1199px){
  .subnav.mega{flex-direction:column;min-width:0;padding:0 0 6px 12px;gap:0}
  .megacol{min-width:0}
  .megah{padding:10px 12px 4px;color:#02615D}
}

/* premium header */
.site-header .shell{height:var(--header-h,80px)}
@media(max-width:1199px){.site-header .shell{height:var(--header-h-compact,68px)}}
.site-header{border-bottom-color:#E4E9E5}
.site-nav a{letter-spacing:.01em}
.site-nav .nav-cta{letter-spacing:.02em}

/* nav subheads + steps */
.subnav .subhead{display:block;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#2F5E49;padding:11px 14px 4px}
.subnav a.step{padding-top:7px;padding-bottom:7px;padding-left:22px;font-size:13.5px;color:#02615D}

/* professions mega 3-group */
.subnav.mega3{min-width:600px}
.subnav.mega3 .megacol{min-width:178px}
@media (max-width:1199px){.subnav.mega3{min-width:0}}

/* NZ two-column mega (steps | guides) */
.subnav.nzmega{min-width:520px}
.subnav.nzmega .megacol{min-width:230px}
.subnav.nzmega .megacol .step{padding-left:14px}
@media (max-width:1199px){.subnav.nzmega{min-width:0}.subnav.nzmega .megacol .step{padding-left:22px}}
.f-base a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s ease}
.f-base a:hover{color:#fff;text-decoration:underline}
.f-base .f-sep{margin:0 9px;opacity:.9}

/* a11y: skip link */
.skip-link{position:absolute;top:-52px;left:16px;z-index:2000;background:var(--teal);color:#fff;font-family:var(--display);font-weight:600;font-size:14px;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0}
#main-content{outline:none}

/* region mega-menu — ported from shell.css so site.css pages render the full panel */
.regionmega .mega-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.regionmega .megah{padding:0 0 14px}
.regionmega .rj{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.regionmega .rj a{display:flex;gap:8px;align-items:baseline;padding:7px 0;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:14px;color:#333333;text-decoration:none}
.regionmega .rj .n{font-weight:700;font-size:11px;flex:none;opacity:.92}
.regionmega .subhead{display:block;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#2F5E49;padding:12px 0 6px}
.regionmega .pg{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.regionmega .pg a{padding:5px 0;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:13.5px;color:#333333;text-decoration:none}
/* the pathway checker lives in both country megas (beside "Explore …") and in the footer
   Candidates column on every page — it is a routing tool, not a nav section of its own */
.regionmega .explore.tool{margin-right:20px}
.regionmega .explore{display:inline-block;margin-top:16px;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap}
.nzmega .megah,.nzmega .rj .n,.nzmega .explore{color:#2F5E49}
.nzmega .rj a:hover,.nzmega .pg a:hover{color:#2F5E49}
.aumega .megah,.aumega .rj .n,.aumega .explore{color:#B32C62}
.aumega .rj a:hover,.aumega .pg a:hover{color:#B32C62}
@media(min-width:1200px){
  .site-nav .navitem{align-self:stretch}
  .subnav.regionmega{position:fixed;left:0;right:0;top:80px;min-width:0;padding:34px 0;background:#fff;border:none;border-top:1px solid #E4E9E5;border-bottom:1px solid #C9DED3;border-radius:0;box-shadow:var(--sh-lg)}
  .regionmega .mega-inner{max-width:920px;margin:0 auto;padding:0 24px}
}
@media(max-width:1199px){
  .subnav.regionmega{min-width:0;padding:0 0 6px 12px}
  .regionmega .mega-inner{display:block}
  .regionmega .rj,.regionmega .pg{grid-template-columns:1fr}
  .regionmega .megah{padding:10px 0 4px}
}

@media(max-width:1199px){.site-nav .cv{font-size:13px}/* the pathway checker lives in both country megas (beside "Explore …") and in the footer
   Candidates column on every page — it is a routing tool, not a nav section of its own */
.regionmega .explore.tool{margin-right:20px}
.regionmega .explore{margin:8px 0 8px}}


/* ---------- ARTICLE ONWARD ("Read next") — insights library ---------- */
.art-next{margin-top:40px;padding-top:34px;border-top:1px solid var(--mint)}
.art-next .an-lbl{display:block;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-text);margin-bottom:16px}
.art-next .an-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.art-next .an-card{display:flex;flex-direction:column;gap:8px;padding:22px 24px 20px;border:1px solid #E4E9E5;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.art-next .an-card:hover{border-color:var(--mint);box-shadow:var(--sh-md);transform:translateY(-2px)}
.art-next .an-cat{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-text)}
.art-next .an-ttl{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.3;letter-spacing:-.01em;color:var(--teal)}
.art-next .an-sub{font-size:14.5px;line-height:1.6;color:var(--muted)}
.art-next .an-go{margin-top:auto;padding-top:4px;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--sage-text)}
.art-next .an-card:hover .an-go{color:var(--teal)}
.art-next .an-go::after{content:" →";color:#2F5E49;display:inline-block;transition:transform .18s ease}
.art-next .an-card:hover .an-go::after{transform:translateX(3px)}
.art-next .an-hub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding:18px 24px;border-radius:var(--r-lg);background:var(--soft-green)}
.art-next .an-hub p{font-family:var(--display);font-weight:600;font-size:15px;color:var(--teal);margin:0}
.art-next .an-hub a{display:inline-flex;align-items:center;min-height:24px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--teal);text-decoration:none;white-space:nowrap}
.art-next .an-hub a:hover{text-decoration:underline;text-underline-offset:3px}
.art-next .an-hub a::before{content:"← ";color:#2F5E49}
@media(max-width:760px){.art-next .an-grid{grid-template-columns:1fr}}


/* ==========================================================================
   HEADER & FOOTER TAP TARGETS — 44px floor (Aug 2026)
   Both site-wide furniture blocks were under the 44px minimum: header brand
   34px, top-level nav links ~37px, CTA ~39px, dropdown and mega links smaller
   still; footer column links 37px, contact links 20px, Privacy Policy 15px.
   Type sizes, padding and colour are untouched — only the hit box grows, so
   nothing moves except the header hover pill and the footer column rhythm.
   Keep this block LAST: it must win over the compressed-nav padding above.
   ========================================================================== */
.brand{min-height:44px}
.site-nav>a,.site-nav .navitem>a{display:inline-flex;align-items:center;min-height:44px}
.site-nav .nav-cta{min-height:44px}
.subnav a{display:flex;align-items:center;min-height:44px}
.regionmega .rj a{align-items:center;min-height:44px}
.regionmega .pg a{display:flex;align-items:center;min-height:44px}
.regionmega .explore{display:inline-flex;align-items:center;min-height:44px}
.site-footer .f-col a{display:flex;align-items:center;min-height:44px}
.site-footer .f-contact a{display:inline-flex;align-items:center;min-height:44px}
.site-footer .f-base a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}

/* mobile: wide data tables scroll rather than squash (added 19 Aug) */
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){.tblscroll table{min-width:560px}}


/* ── Header nav spacing, 22 Aug 2026 (rev 2) ───────────────────────────────
   Seven direct links replaced eight items plus two mega-menus, so the old
   gap:4px is no longer necessary. Spacing comes from GAP; padding stays real so
   the hover pill, the active marker and the click target keep their size.
   D10: full navigation shows at 1200px and up; the compact hamburger takes over below. */
@media (min-width:1200px){
  .site-nav{gap:12px}
  .site-nav>a{padding:10px 12px;font-size:15px}
  .site-nav>a[aria-current="page"]::after{left:12px;right:12px}
  .site-nav .nav-cta{margin-left:28px;padding:11px 22px}
  .site-nav .nav-cta::before{left:-28px;height:24px}
}


/* ── Global type system application, 22 Aug 2026 ───────────────────────────
   Baseline binding of the ladder to elements, so a page gets the system without
   declaring anything. Page-level rules still win (later in the cascade), so this
   is a floor rather than a straitjacket — the page-by-page pass removes the
   per-page literals that currently override it.
   Spacing uses the EXISTING --sp scale rather than adding new tokens:
     eyebrow→heading --sp-xs · heading→lead --sp-m · para→para --sp-s
     copy→CTA --sp-m/l · intro→content --sp-l · h3→body --sp-s */
h1{font-size:var(--t-h1);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
h2{font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
h3{font-size:var(--t-h3);line-height:1.25}
h4{font-size:var(--t-h4);line-height:1.28}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead)}
.btn,button.btn,a.btn{font-size:var(--t-button)}
.faq summary,details>summary{font-size:var(--t-accordion);line-height:1.3}
/* prose stops at a reading measure; headings, photography and tools do not */
.reading>p,.reading>ul,.reading>ol,.wrap.reading>p{max-width:var(--w-read)}
.reading>.lead,.wrap.reading>.lead{max-width:var(--w-lead)}


/* ── Internal spacing relationships, 22 Aug 2026 ───────────────────────────
   Brief §15. Mapped onto the existing --sp scale rather than adding tokens:
     eyebrow→heading 12px  (xs + 2xs, top of the 8–12 band)
     H1/H2→lead      --sp-m  24px   (band 20–28)
     para→para       --sp-s  16px   (band 16–20)
     copy→CTA        --sp-m  24px   (band 24–32)
     intro→content   --sp-l  40px   (band 32–48)
     H3→body         --sp-s  16px   (band 12–16)
   §16 matters as much as §14: elements of one thought stay connected, so these
   are deliberately small next to the section band. */
.eyebrow{margin-bottom:calc(var(--sp-xs) + var(--sp-2xs))}
h1,h2{margin-bottom:var(--sp-m)}
h3,h4{margin-bottom:var(--sp-s)}
p{margin-bottom:var(--sp-s)}
p:last-child{margin-bottom:0}
.lead{margin-bottom:var(--sp-m)}
.btn-row{margin-top:var(--sp-m)}
.intro{margin-bottom:var(--sp-l)}

/* ---- a11y contrast corrections (WCAG 2.2 AA pass, 25 Aug 2026) ----
   Seasonal cards set #fff over the light accents: apricot measured 2.26:1 and
   fern 2.89:1, and the .85-opacity labels fell to 2.02. Text on the LIGHT fills
   goes to #01312F (apricot 6.28, fern 4.90); the deep-teal winter card keeps
   #fff (7.32). Selected on the inline fill so no chapter markup changes. */
.season:is([style*="#D9A084"],[style*="#d9a084"],[style*="#D98AA9"],[style*="#72A471"],[style*="#72a471"],[style*="#A6C84A"],[style*="#a6c84a"]){color:#01312F}
.season:is([style*="#D9A084"],[style*="#d9a084"],[style*="#D98AA9"],[style*="#72A471"],[style*="#72a471"],[style*="#A6C84A"],[style*="#a6c84a"]) :is(.m,.tl){opacity:1}

/* 2.5.8 Target Size (Minimum): breadcrumb and chapter-nav links measured 21px
   tall. Both parents are flex/grid with align-items:center, so a min-height
   raises the hit area without touching inline flow or type size. */
nav.wf-crumb a,nav.ch-nav a,nav.crumb a{min-height:24px;display:flex;align-items:center}
/* The country-landing breadcrumbs are classless inline-styled navs, so the
   class list above could not reach them and their links measured 21px at
   320px. Select on the accessible name instead — that is stable whether or
   not the nav is classed, the same select-by-condition logic prose-links.css
   uses. inline-flex so it stays on the crumb line. */
nav[aria-label="Breadcrumb"] a{min-height:24px;display:inline-flex;align-items:center}

/* The .side-cta panel is currently display:none on the chapter pages. Its pill
   was lime with deep-teal text (3.83:1, and lime is never a fill per the brand
   standard), so re-enabling it would have shipped an AA failure. Cream on the
   dark panel instead: 7.07:1, and it matches the light-pill-on-dark idiom.
   Needs the attribute selector + !important to beat the page-level rule. */
.side-cta a[href]{background:#FCFBF8!important;color:#02615D!important}

.navitem .ar{font-size:.78em;font-weight:600;margin-left:.18em;vertical-align:.08em}

/* Move is the differentiator, not just another nav item — a soft lime pill marks it
   without competing with the solid-teal Contact CTA. Desktop only: in the stacked
   mobile panel a pill reads as a button and confuses the hierarchy. Selected on the
   href so no page markup changes (the header is hand-maintained on ~400 pages).
   Teal #02615D on the blended tint measures ~6.5:1 — clears AA. */
@media(min-width:1200px){
.site-nav .navitem>a[href="/move"]{border:1.5px solid #72A471;border-radius:999px;padding-left:15px;padding-right:15px;color:#02615D;transition:border-color .15s ease,background .15s ease}
.site-nav .navitem>a[href="/move"]:hover{border-color:#02615D;background:rgba(2,97,93,.06)}
}


/* ==========================================================================
   LEGIBILITY FLOORS (2 Sep 2026) — corrected at source so every page inherits.
   Previously these lived only in readable.css, linked on eight journey pages;
   the 13.5px card copy and ~85-character measure were still the default
   everywhere else. Selectors are prefixed with `main` so they beat page-level
   class rules (0,1,2 vs 0,1,1) without !important and regardless of load order.
   Mirrored in site.css and shell.css — per the rule that a component token
   added to one sheet must be added to both.
   - MEASURE: prose capped at 66ch. Long lines are the hardest part of reading
     with dyslexia (losing your place on the return sweep).
   - SIZE: nothing below 16px in cards, lists and answers.
   - LEADING: 1.6 minimum inside cards; clearer gaps between paragraphs.
   ========================================================================== */
main .reading>p:not([class]),main .reading>ul,main .reading>ol,main .reading>dl{max-width:66ch}
main .reading>p:not([class]){font-size:17px;line-height:1.75}
main .reading>p+p{margin-top:6px}
main .how p,main .pick p,main .rel p,main .dl-card p,main .star-i p,main .regstep p{font-size:16px;line-height:1.6}
main .qcard li,main .fit li,main .ticks li{font-size:16px;line-height:1.65}
main .faq .ans,main .faq .ans p{font-size:16.5px;line-height:1.7}
main .lead{font-size:18.5px;line-height:1.7}
main .crumb{font-size:14px}
main .tl .lab{font-size:13px}
main .how h3,main .rel h3{font-size:18px}
main p,main li,main dd{letter-spacing:.006em;text-wrap:pretty;hyphens:none;overflow-wrap:break-word}

/* Profession and destination page vocabularies (added 2 Sep 2026). The floors
   above name guide-page classes only, so these families were still rendering
   card and fact copy at 13.5–14.5px. Same rules, wider selector list. */
main .pcard p,main .fcard p,main .fact .v,main .season p,main .tool .td{font-size:16px;line-height:1.6}
main .fcard h3{font-size:18px}
main .ans p,main .ans li{font-size:16.5px;line-height:1.7}
main .wf-step p,main .wf-hub p,main .locator figcaption,main figcaption{font-size:15px;line-height:1.6}
main .editorial{line-height:1.75}

/* narrow-screen header (<=400px): the brand is 42px mark + a nowrap wordmark,
   so at 306px the row needed 345px and the 44px toggle overflowed. Same
   compression idea as the 981-1250px block above, applied at the bottom end. */
@media(max-width:767px){.brand img{width:32px;height:32px}.brand span{font-size:16px}}
@media(max-width:400px){.site-header .shell{gap:12px;padding-left:16px;padding-right:16px}.site-header .brand span{font-size:16px}.site-header .brand img{width:32px;height:32px}}

/* ==========================================================================
   WHITE PAGE (Sep 2026) — the page itself is white; colour comes from the teal,
   the photographs and deliberate tinted bands (Soft Sage NZ / Pale Eucalyptus AU).
   html:root outranks the :root token blocks inlined on individual pages.
   ========================================================================== */
html:root{--warm:#FFFFFF;--surface-warm:#FFFFFF}
html body{background:#FFFFFF}
html .site-header{background:#FFFFFF}
@media (max-width:980px){html .site-nav{background:#FFFFFF}}

/* 8 Oct 2026 — header fit. With nine items the full nav wrapped onto two lines between
   1200px and about 1450px ("New / Zealand", "Plan / Ethicare"), on most laptops. Labels
   never wrap; below 1440px the spacing tightens instead. */
@media (min-width:1200px){
  .site-nav a{white-space:nowrap}
}
@media (min-width:1200px) and (max-width:1439px){
  .site-nav{gap:2px}
  .site-nav>a,.site-nav .navitem>a{padding:10px 9px;font-size:14.5px}
  .site-nav>a[aria-current="page"]::after{left:9px;right:9px}
  .site-nav .nav-cta{margin-left:14px;padding:11px 18px}
  .site-nav .nav-cta::before{left:-14px}
}
@media (min-width:1200px) and (max-width:1299px){
  .site-header .brand span{font-size:16px}
  .site-nav>a,.site-nav .navitem>a{padding:10px 7px;font-size:14px}
}

/* ---------------------------------------------------------------------------
   MEGA PANEL (9 Oct 2026) — tiles on the left, icon rows on the right.
   Markup: _header.html (.has-mega > .subnav.mpanel). Desktop = a full-width
   white card under the header; inside the mobile menu it stacks.
   --------------------------------------------------------------------------- */
.site-header .ic{display:block;flex:none}
.subnav.mpanel a{white-space:normal;letter-spacing:0}
.mp-tile{display:flex;text-decoration:none;color:#1F2A27}
.mp-ti{display:grid;place-items:center;color:#02615D;background:#F3F7F4;transition:background .15s ease,color .15s ease}
.mp-tile.is-primary .mp-ti{background:#02615D;color:#fff}
.mp-tl{font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;color:#1F2A27}
.mp-h{display:block;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;color:#02615D;letter-spacing:-.01em}
.mp-col{display:flex;flex-direction:column;min-width:0}
.subnav.mpanel .mp-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;box-sizing:border-box;text-decoration:none}
.mp-ri{display:grid;place-items:center;color:#02615D;background:#F3F7F4;transition:background .15s ease}
.mp-rt{display:flex;flex-direction:column;min-width:0}
.mp-rn{font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;color:#1F2A27;line-height:1.3}
.mp-rd{font-family:'Manrope',ui-sans-serif,sans-serif;font-weight:500;color:#566660;line-height:1.35}
.mp-chev{color:#02615D}
.subnav.mpanel a:focus-visible{outline:3px solid #02615D;outline-offset:2px}

@media (min-width:1200px){
  .site-nav .navitem.has-mega{position:static}
  .subnav.mpanel{position:absolute;left:0;right:0;top:100%;min-width:0;padding:10px 24px 28px;background:transparent;border:0;border-radius:0;box-shadow:none;display:none}
  .site-nav .navitem:hover>.subnav.mpanel,.site-nav .navitem:focus-within>.subnav.mpanel,.site-nav .navitem.open>.subnav.mpanel{display:block}
  .mp-in{max-width:1180px;margin:0 auto;background:#fff;border:1px solid #E4E9E5;border-radius:20px;box-shadow:0 28px 60px -24px rgba(1,49,47,.30),0 2px 6px rgba(1,49,47,.06);padding:36px 40px 32px;display:grid;grid-template-columns:auto 1fr;gap:48px;max-height:calc(100vh - 120px);overflow-y:auto}
  .mp-tiles{display:grid;grid-template-columns:repeat(2,148px);gap:22px 20px;align-content:start}
  .subnav.mpanel .mp-tile{flex-direction:column;align-items:center;gap:12px;padding:0;background:none;border-radius:0;text-align:center}
  .mp-ti{width:148px;height:96px;border-radius:16px}
  .mp-tl{font-size:15px;line-height:1.3;max-width:148px}
  .subnav.mpanel .mp-tile:hover{background:none}
  .mp-tile:hover .mp-ti{background:#02615D;color:#fff}
  .mp-tile.is-primary:hover .mp-ti{background:#014E4B}
  .mp-tile:hover .mp-tl{text-decoration:underline;text-underline-offset:3px;color:#02615D}
  .mp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px 36px;align-content:start}
  .mp-h{font-size:20px;line-height:1.2;margin:0 0 12px 10px}
  .mp-h2{margin-top:18px}
  .subnav.mpanel .mp-row{gap:16px;padding:9px 10px;border-radius:14px;color:#1F2A27}
  .mp-ri{width:48px;height:48px;border-radius:12px}
  .mp-rn{font-size:15.5px}
  .mp-rd{font-size:13.5px;margin-top:2px}
  .subnav.mpanel .mp-row:hover{background:#F3F7F4}
  .mp-row:hover .mp-ri{background:#fff}
  .mp-row:hover .mp-rn{color:#02615D}
  .mp-chev{transition:transform .15s ease}
  .mp-row:hover .mp-chev{transform:translateX(3px)}
}
@media (max-width:1199px){
  .subnav.mpanel{padding:4px 0 14px;flex-direction:column}
  .site-nav .navitem.open>.subnav.mpanel{display:block}
  .mp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
  .subnav.mpanel .mp-tile{flex-direction:row;align-items:center;gap:10px;padding:8px;min-height:56px;border:1px solid #E4E9E5;border-radius:12px;background:#fff}
  .mp-ti{width:36px;height:36px;border-radius:10px}
  .mp-ti .ic{width:20px;height:20px}
  .mp-tl{font-size:14px;line-height:1.25}
  .mp-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#2F5E49;margin:14px 0 4px 4px}
  .subnav.mpanel .mp-row{gap:12px;padding:8px 4px;min-height:56px;border-radius:10px;color:#1F2A27}
  .mp-ri{width:40px;height:40px;border-radius:10px}
  .mp-ri .ic{width:20px;height:20px}
  .mp-rn{font-size:15px}
  .mp-rd{font-size:13px}
  .mp-chev{display:none}
}

.subnav.mpanel .mp-row-s{padding-top:6px;padding-bottom:6px}
.mp-row-s .mp-ri{width:40px;height:40px;border-radius:10px}

/* Menu feature blocks (9 Oct 2026) — added by nav.js; desktop only */
.mp-feat{display:none}
@media (min-width:1200px){
  .mp-in.has-feat{max-width:1320px;grid-template-columns:auto 1fr 272px;gap:40px}
  .mp-in.has-feat .mp-cols{grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:8px 28px}
  .mp-feat{display:flex;flex-direction:column;border-radius:18px;background:#F3F7F4;overflow:hidden;align-self:start}
  .mpf-img{display:block;height:150px;background:#E3ECE5}
  .mpf-img img{display:block;width:100%;height:100%;object-fit:cover}
  .mpf-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
  .mpf-eb{font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2F5E49}
  .mpf-t{font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:18px;line-height:1.25;color:#1F2A27}
  .mpf-p{font-family:'Manrope',ui-sans-serif,sans-serif;font-weight:500;font-size:13.5px;line-height:1.45;color:#566660}
  .subnav.mpanel a.mpf-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:10px 18px;border-radius:999px;background:#02615D;color:#fff;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:14px;text-decoration:none}
  .subnav.mpanel a.mpf-btn:hover{background:#014E4B;color:#fff}
  .mpf-jobs{display:flex;flex-direction:column;gap:6px;margin:2px 0}
  .subnav.mpanel a.mpf-job{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:10px 12px;border-radius:12px;background:#fff;text-decoration:none}
  .subnav.mpanel a.mpf-job:hover{background:#E6F1ED}
  .mpf-jt{font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:600;font-size:14px;line-height:1.3;color:#1F2A27}
  .mpf-jl{font-family:'Manrope',ui-sans-serif,sans-serif;font-weight:500;font-size:12.5px;color:#566660}
}


/* ===========================================================================
   html body BREATHING SPACE (9 Oct 2026)
   html body Loaded last on every page,html body so it settles spacing without touching each
   html body template. More room between sections,html body between cards,html body and inside cards.
   html body Values that a page sets inline (style="padding:…") still win,html body so sections
   html body deliberately set to zero stay that way. Phones keep their own spacing,
   html body with a gentler lift.
   html body =========================================================================== */

/* -- between sections ---------------------------------------------------- */
@media (min-width:900px){
  html body section.section,
  html body section.sec,
  html body section.rt-sec,
  html body section.rt-band,
  html body section.eband,
  html body section.bigquote{padding-top:clamp(104px,10vw,148px);padding-bottom:clamp(104px,10vw,148px)}
  html body section.rt-sec.ea{padding-top:72px;padding-bottom:56px}

  /* homepage */
  html body .ed{padding:clamp(120px,14vh,168px) 0}
  html body .ed-tight{padding:clamp(96px,11vh,124px) 0}

  /* room between a section's heading and what follows it */
  html body .section .wrap > .lead,html body .sec .wrap > .lead{margin-bottom:clamp(40px,4vw,60px)}
  html body .work-head,html body .roles-head,html body .wd-head,html body .dream .lead-row{margin-bottom:clamp(44px,4.4vw,64px)!important}
  html body .whatwedo .wrapx{padding-top:clamp(88px,11vh,128px);padding-bottom:clamp(96px,12vh,136px)}
  html body .whatwedo h2{margin-bottom:20px}
  html body .whatwedo .wd-lede{margin-bottom:clamp(44px,4.4vw,60px)}
  html body .whatwedo .wd-after{margin-top:32px}
}
@media (min-width:600px) and (max-width:899.98px){
  html body section.section,
  html body section.sec,
  html body section.rt-sec{padding-top:72px;padding-bottom:72px}
}

/* -- between cards ------------------------------------------------------- */
@media (min-width:760px){
  html body .rt-grid,html body .rt-two,html body .cards,html body .family-grid,html body .related-grid,html body .weigh-grid,html body .how-grid,
  html body .pts,html body .ins-grid,html body .tradeoffs,html body .reg-cols,html body .tiers,html body .boards,html body .pick-grid,html body .fit,
  html body .wd-grid,html body .roles-grid{gap:32px}
  html body .acts{gap:28px}
}

/* -- inside cards -------------------------------------------------------- */
@media (min-width:760px){
  html body .rt-grid > .rt-card,
  html body .cards > .card,
  html body .weigh-grid > .weigh,
  html body .how-grid > .how,
  html body .tradeoffs > .trade,
  html body .related-grid > .rel,
  html body .ins-grid > .ins-card,
  html body .pick-grid > .pick,
  html body .wd-grid > .wd-card{padding:36px 34px}
  html body .acts > .act{padding:34px 32px 30px}
}

/* -- reading rhythm ------------------------------------------------------ */
html body main p{line-height:1.7}


/* Menu, more room (9 Oct 2026). Sophie: "is it too busy now? does it need more space". The country
   panels hide their "Create my pack" tile (it is in Plan Ethicare and on the homepage; hidden here
   rather than removed so the pages need no rewrite), so three tiles: the main one runs full width. More padding, more air between rows. */
@media (min-width:1200px){
  .mp-in{padding:44px 44px 40px;gap:44px}
  .mp-in.has-feat{gap:44px}
  .mp-tiles{grid-template-columns:repeat(2,126px);gap:24px 16px}
  .mp-ti{width:126px;height:84px}
  .mp-tl{max-width:126px}
  .mp-tiles:is([aria-label="Australia"],[aria-label="New Zealand"]) > .mp-tile.is-primary{grid-column:1/-1}
  .mp-tiles:is([aria-label="Australia"],[aria-label="New Zealand"]) > .mp-tile.is-primary .mp-ti{width:100%}
  .mp-tiles:is([aria-label="Australia"],[aria-label="New Zealand"]) > .mp-tile.is-primary .mp-tl{max-width:none}
  .mp-cols{gap:14px 32px}
  .mp-h{margin-bottom:16px}
  .mp-row{padding:13px 12px}
  .mp-rd{display:none}   /* one line per row: the names say enough, and the panel breathes */
  .mp-h{margin-bottom:18px}
  .mp-cols{row-gap:20px}
}

.mp-tiles:is([aria-label="Australia"],[aria-label="New Zealand"]) > .mp-tile[href="/my-pack"]{display:none}

/* ===========================================================================
   CONTRAST FIXES (9 Oct 2026 audit). Each line is text that measured under the
   WCAG AA 4.5:1 minimum against its own background. "html body" so it outranks
   page styles without !important.
   =========================================================================== */
html body .art-crumb{color:rgba(255,255,255,.86)}
html body .f-brand .brand span{color:#fff}
html body .f-brand .brand strong{color:#A6C84A}
html body .cbar .ct{color:#01312F}
html body .lb > b{color:#2F5E49}
html body .ch-rail .lb b{opacity:1}
html body .submap figcaption,html body .suburbs figcaption{color:#566660}
html body .efm .fn a,html body .fn > a{color:#02615D!important}
html body .scard .foot .readlink{color:#01312F}
html body .h-grid .eyebrow{color:#A34438}
html body .mp-fine{color:#C8DFDB}
html body .au > span{color:#C8DFDB}
html body .takeaway a{color:#fff}
/* links inside running text get an underline, not colour alone (WCAG 1.4.1) */
html body main :is(p,li,dd,td) > a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html body main .v > a,html body main .takeaway a,html body main figcaption > a{text-decoration:underline;text-underline-offset:3px}
html body :is(.tblscroll,.rates,.feetable-wrap)[tabindex]:focus-visible{outline:3px solid #02615D;outline-offset:2px;border-radius:6px}
html body .pp .pn{color:#2F5E49}
html body .s > cite{color:#2F5E49}
html body main .takeaway p a,html body main .v a{text-decoration:underline!important;text-underline-offset:3px}
html body .takeaway p a,html body .v > a,html body :is(.wrap,.rt-wrap,.shell) :is(p,li,figcaption) > a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html body :is(main,article,section) p > a:not([class]){text-decoration-line:underline;text-underline-offset:3px}

/* About and For Employers: simple lists, one link per row (10 Oct 2026, after Capital One's "More"). */
@media (min-width:1200px){
  html body .subnav.slist{min-width:320px;padding:0;gap:0;border:1px solid #E4E9E5;border-top:3px solid #02615D;border-radius:0 0 16px 16px;box-shadow:0 24px 50px -22px rgba(1,49,47,.32);overflow:hidden;background:#fff}
  html body .subnav.slist a{display:block;min-height:0;padding:19px 26px;border-radius:0;border-bottom:1px solid #E4E9E5;font-family:'Work Sans',ui-sans-serif,sans-serif;font-weight:500;font-size:17px;line-height:1.3;color:#02615D;background:#fff}
  html body .subnav.slist a:last-child{border-bottom:0}
  html body .subnav.slist a:hover,html body .subnav.slist a:focus-visible{background:#F3F7F4;color:#014E4B}
  html body .subnav.slist a:focus-visible{outline:3px solid #02615D;outline-offset:-3px}
  html body .navitem.nav-emp .subnav.slist{left:auto;right:0}
}

/* Stage line above the footer (12 Oct 2026): where this page sits in the 8 stages, and the next one. */
html body .stageline{background:#F7F4EE;border-top:1px solid #E4E9E5}
html body .stageline .sl-in{max-width:1180px;margin:0 auto;padding:22px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
html body .stageline .sl-dots{display:flex;gap:5px;flex:none}
html body .stageline .sl-dots i{display:block;width:18px;height:4px;border-radius:2px;background:#D5DED8}
html body .stageline .sl-dots i.done{background:#7FA99B}
html body .stageline .sl-dots i.on{background:#02615D}
html body .stageline .sl-now{margin:0;font-family:'Work Sans',ui-sans-serif,sans-serif;font-size:15px;color:#2B2B2B}
html body .stageline .sl-k{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#2F5E49;margin-right:6px}
html body .stageline .sl-t{font-weight:600}
html body .stageline .sl-acts{margin:0 0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
html body .stageline a{font-family:'Work Sans',ui-sans-serif,sans-serif;font-size:15px;color:#02615D;text-decoration:none}
html body .stageline .sl-next{font-weight:600;border-bottom:2px solid #A6C84A;padding-bottom:1px}
html body .stageline .sl-next:hover{border-bottom-color:#02615D}
html body .stageline .sl-all{font-weight:500;text-decoration:underline;text-underline-offset:3px}
html body .stageline .sl-last{font-size:15px;color:#555}
html body .stageline a:focus-visible{outline:3px solid #02615D;outline-offset:3px;border-radius:2px}
@media (max-width:760px){html body .stageline .sl-in{padding:20px;flex-direction:column;align-items:flex-start}html body .stageline .sl-acts{margin:0;flex-direction:column;align-items:flex-start;gap:10px}}

/* iPhone zooms in on any form field under 16px and leaves the page zoomed, which cut the
   pathway checker off at both edges on Sophie's phone (14 Oct 2026). 16px on small screens. */
@media (max-width:760px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}