/* The premium shell (3 Nov 2026): what every page on workaid.io shares. The night header and footer, the final
   call to action, the flat buttons, the type scale and their tokens. It comes after the three shared sheets and
   before each page's own sheet (premium.css on the homepage, finance-team.css on the enquiry page, articles.css on
   the article pages and the 404). Teal keeps its hue: #2E7D78 is only 2.7:1 on navy, so dark grounds use the
   lighter --accent-on-dark with a dark label (R6 in the premium-design skill). No id selectors here: article pages
   load this sheet, and an article's heading id must never pick up a page rule. */
:root {
  --night: #0C1C2C;
  --night-strip: #081522;
  --accent-on-dark: #4FC4BA;
  --accent-on-dark-hover: #6BD3CA;
  --accent-text: #2A7C75;
  --accent-on-wash: #256B6A;
  --on-night: #C7D3DC;
  --on-night-line: rgba(255,255,255,.14);
  --section-space: clamp(88px, 10vw, 144px);
}
body { background: var(--white); }

/* Type. Outfit stays at 500, as the site's rule has it. Size carries the hierarchy. */
h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -.02em; }
.eyebrow { font-size: 13px; letter-spacing: .14em; color: var(--accent-text); margin-bottom: 20px; }
.lede { font-size: 20px; line-height: 1.55; max-width: 54ch; color: var(--charcoal); }
.section-head { max-width: 860px; margin-bottom: 64px; }
.section-head .lede { max-width: 54ch; }

/* Buttons: flat, one fill per ground. */
.btn { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--primary { background: var(--teal); box-shadow: none; }
.btn--primary:hover { background: var(--teal-hover); box-shadow: none; }

/* Header: dark and quiet, so the hero starts at the very top of the window. */
.header { background: var(--night); border-bottom: 1px solid var(--on-night-line); backdrop-filter: none; }
.nav a { color: var(--on-night); }
.nav a:hover { color: var(--white); }
.nav a::after { background: var(--accent-on-dark); }
.header .btn--dark { height: 44px; background: var(--accent-on-dark); color: var(--night); }
.header .btn--dark:hover { background: var(--accent-on-dark-hover); color: var(--night); }
.nav-toggle { background: transparent; border-color: var(--on-night-line); color: var(--white); }
.header :focus-visible { outline-color: var(--white); }
@media (max-width: 1100px) {
  .nav.is-open { background: var(--night); border-bottom: 1px solid var(--on-night-line); }
  .nav.is-open a { color: var(--white); border-color: var(--on-night-line); }
}

/* Final call: full bleed, centred, one very large line. */
.final { padding: 0; background: var(--night); }
.final .panel-cta { background: none; padding: clamp(96px, 12vw, 176px) 0; text-align: center; border-radius: 0; overflow: visible; }
.final .panel-cta h2 { max-width: 14em; margin: 0 auto 24px; font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.02em; font-weight: 500; }
.final .panel-cta p { max-width: 54ch; margin: 0 auto 40px; font-size: 19px; line-height: 1.55; color: var(--on-night); }
.final .btn--primary { background: var(--accent-on-dark); color: var(--night); }
.final .btn--primary:hover { background: var(--accent-on-dark-hover); color: var(--night); }
.final :focus-visible { outline-color: var(--white); }

/* Footer */
.footer { background: var(--night); border-top: 1px solid var(--on-night-line); color: var(--on-night); }
.footer__brand p { color: var(--on-night); }
.footer h4 { color: var(--white); }
.footer a { color: var(--on-night); }
.footer a:hover { color: var(--white); }
.footer :focus-visible { outline-color: var(--white); }

/* Phone */
@media (max-width: 768px) {
  .lede { font-size: 18px; }
  .section-head { margin-bottom: 40px; }
  .btn { height: 52px; }
  .header__cta .btn { height: 44px; font-size: 13px; }
  .final .panel-cta h2 { font-size: 46px; }
  .final .panel-cta p { font-size: 18px; }
  .final .btn { width: 100%; }
}