@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800&display=swap');

/* ============================================================
   ADISO – styles.css
   ============================================================
   TABLE OF CONTENTS
   ──────────────────
   1.  CUSTOM PROPERTIES (design tokens)
   2.  BASE / RESET
   3.  TYPOGRAPHY HELPERS  (eyebrow, section headers, roles)
   4.  ANIMATION SYSTEM    (keyframes + utility classes)
   5.  BUTTONS & CTAs
   6.  NAV
   7.  HERO
   8.  EXPLAINER
   9.  CTA STRIP (black)
  10.  PLATFORM OVERVIEW   (home – 3-column tiles)
  11.  WHO IS ADISO FOR
  12.  MODULAR BY DESIGN
  13.  MEET THE ADISO TEAM  (home)
  14.  CONTACT CTA BANNER
  15.  FOOTER
  16.  ABOUT PAGE
  17.  CONTACT PAGE
  18.  KIWISAVER PAGE
  19.  PLATFORM PAGE
  20.  CASE STUDIES PAGE
  21.  MODALS             (Book a Demo)
  22.  RESPONSIVE
   ============================================================ */


/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */

:root {
  --teal:    #2f9a86;
  --heroTop: #0b1f1c;
  --heroBot: #2a5b55;
  --text:    #3a3a3a;
  --muted:   #6b7280;
  --grey-bg: #f6f7f7;
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */

*  { box-sizing: border-box; }

html { background: #000; }

body {
  margin: 0;
  font-family: Barlow, sans-serif;
  background: #fff;
  color: #fff;
}

h4 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  color: #333;
  margin: 0;
}

svg,
svg path { fill: currentColor; }

/* Never animate whole sections */
section.fade-in,
footer.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Global section breathing room */
section { padding: 25px 0; }


/* ============================================================
   3. TYPOGRAPHY HELPERS
   ============================================================ */

/* ── Shared eyebrow style ── */
.hero .eyebrow,
.platform .eyebrow,
.adiso-eyebrow,
.who-for-eyebrow,
.contact-eyebrow,
.footer-eyebrow,
.about-eyebrow,
.ks-eyebrow,
.platform-eyebrow,
.partners-eyebrow,
.platform-commitment-eyebrow,
.platform-features-eyebrow {
  display: block;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Shared section-title colour ── */
.platform h2,
.explainer h2,
.who-for-title,
.adiso-modular-title,
.adiso-team-title,
.contact-copy h2 {
  color: var(--text);
}

/* ── Body copy colour across sections ── */
.explainer p,
.platform-card p,
.who-for-intro,
.adiso-modular-intro,
.adiso-team-intro,
.contact-copy p,
.copy p {
  color: var(--text);
}

/* ── Role / job-title line (home, about, contact) ── */
.team-role,
.adiso-team-card > span,
.contact-name span,
.contact-profile span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #7d8694;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.25;
}

/* ── Page intro shared block ── */
.page-intro-full {
  width: 100%;
  background: #fff;
  padding: 120px 0 90px;
}

.page-intro-full .page-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.page-intro-full .page-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.page-intro-full .page-title,
.page-intro-full h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 22px;
  color: var(--text);
  text-align: center;
}

.page-intro-full .page-intro-paragraph,
.page-intro-full .about-intro-paragraph {
  max-width: 520px;
  margin: 0 auto;
  color: var(--text);
}

/* ── Section header (generic centred block) ── */
.section-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-header .eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 32px;
  color: #1a1a1a;
}


/* ============================================================
   4. ANIMATION SYSTEM
   ============================================================ */

/* ── Keyframes ── */

@keyframes heroBgZoom {
  to { transform: scale(1); }
}

@keyframes heroWordIn {
  to { opacity: 1; transform: translateY(0); }
}

/* heroBtnWrapIn: slide-up + fade on the wrapper element — forwards fill is safe
   here because nothing hovers the wrapper, leaving the button free for hover */
@keyframes heroBtnWrapIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpSoft {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes itemFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes staggerFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes platformFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ksPointIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes teamFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes productFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroSlideInRight {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes platformVideoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kiwisaverVideoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cs-soonbar-fadein-9f3k2 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ctaStripColorMix {
  0%   { background-color: #2f9a86; }
  25%  { background-color: #1e5aa8; }
  50%  { background-color: #0d1b2a; }
  75%  { background-color: #c26a1b; }
  90%  { background-color: #000000; }
  100% { background-color: #2f9a86; }
}

/* ── Fade-in utility (JS-triggered) ── */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scoped to html.js so non-JS users always see content */
html.js .fade-in {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: opacity 0.7s ease, transform 0.7s ease !important;
  will-change: opacity, transform;
}

html.js .fade-in.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Stagger group (scroll-triggered) ── */
.stagger-item {
  opacity: 1;   /* visible by default (safe fallback) */
  transform: none;
}

.stagger-item.animate {
  opacity: 0;
  transform: translateY(24px);
  animation: staggerFadeUp 0.7s ease forwards;
}

.stagger-item.animate:nth-child(1) { animation-delay: 0.10s; }
.stagger-item.animate:nth-child(2) { animation-delay: 0.25s; }
.stagger-item.animate:nth-child(3) { animation-delay: 0.40s; }
.stagger-item.animate:nth-child(4) { animation-delay: 0.55s; }
.stagger-item.animate:nth-child(5) { animation-delay: 0.70s; }
.stagger-item.animate:nth-child(6) { animation-delay: 0.85s; }

/* When JS activates via .stagger-group */
.stagger-group.is-visible .stagger-item {
  animation: staggerFadeUp 0.7s ease forwards;
}

.stagger-group.is-visible .stagger-item:nth-child(1) { animation-delay: 0.10s; }
.stagger-group.is-visible .stagger-item:nth-child(2) { animation-delay: 0.25s; }
.stagger-group.is-visible .stagger-item:nth-child(3) { animation-delay: 0.40s; }
.stagger-group.is-visible .stagger-item:nth-child(4) { animation-delay: 0.55s; }
.stagger-group.is-visible .stagger-item:nth-child(5) { animation-delay: 0.70s; }
.stagger-group.is-visible .stagger-item:nth-child(6) { animation-delay: 0.85s; }

/* ── Generic animate-item ── */
.animate-item {
  opacity: 0;
  transform: translateY(24px);
  animation: itemFadeUp 0.6s ease forwards;
}

/* ── Fade-up on page load ── */
.fade-up-on-load {
  opacity: 0;
  animation: fadeInUpSoft 0.8s ease-out forwards;
}

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .stagger-item,
  .animate-item,
  .fade-up-on-load,
  html.js .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ── Hover lift utility ── */
.hover-lift {
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  filter: saturate(0.8);
}


/* ============================================================
   5. BUTTONS & CTAs
   ============================================================ */

/* ── Primary teal CTA button ── */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  background: var(--teal);
  color: #fff;
  border: 2px solid var(--teal);
  font-family: Barlow, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease;
  will-change: transform, filter;
}

.cta-button:hover {
  transform: translateY(-4px);
  filter: saturate(0.75);
}

/* ── Outline variant ── */
.cta-button.outline {
  background: transparent;
  color: var(--teal);
}

/* ── Shared .cta (used on contact CTA banner) ── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  font-family: Barlow, sans-serif;
  text-transform: uppercase;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.25s ease;
  will-change: transform, filter;
}

.cta.cta-primary {
  background: var(--teal);
  color: #fff;
  border: 2px solid var(--teal);
}

.cta.cta-secondary {
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--teal);
}

.cta:hover {
  transform: translateY(-4px);
  filter: saturate(0.8);
}

/* ── Light outline button (used on teal CTA strip) ── */
.cta-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              background-color 0.35s ease,
              color 0.35s ease;
}

.cta-outline-light:hover {
  background: #fff;
  color: var(--teal);
  transform: translateY(-4px);
}

/* ── Global button text normalisation ── */
button,
.cta-button,
.cta {
  font-family: Barlow, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Icon circle (contact links, about page) ── */
.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.icon-circle svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  display: block;
}


/* ============================================================
   6. NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 10003;
  background: #000;
  height: 52px;
}

#siteNav {
  transition: opacity 0.8s ease;
}

#siteNav.nav-fade-out {
  opacity: 0;
  pointer-events: none;
}

.nav-inner {
  width: 1200px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 52px;
  background: transparent;
}

/* Prevent any overflow clipping that would block dropdowns or the hamburger */
header.nav,
#siteNav,
.nav-inner,
nav.menu {
  overflow: visible !important;
}

/* Nav must not clip the hamburger's tap area */
.nav,
.nav-inner {
  overflow: visible !important;
  isolation: auto;
}

/* Hamburger — hidden on desktop, shown on mobile */
.menu-toggle {
  display: none;
  position: relative;
  z-index: 10004;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Hamburger → X animation */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #111;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile menu header — hidden, hamburger X handles close */
.mobile-menu-header {
  display: none;
}

.mobile-logo img {
  height: 32px;
}

.mobile-close {
  display: none;
}

/* Menu links area */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 24px 40px;
  gap: 48px;
  flex: 1;
}

.mobile-menu-links a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.mobile-menu-links a:hover {
  opacity: 0.75;
}

.mobile-menu-links a[aria-current="page"] {
  color: var(--teal);
}

/* Contact button in mobile menu */
.mobile-contact-btn {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff;
  padding: 12px 0 !important;
  width: 240px;
  text-align: center;
  display: block;
}

/* Book a Demo button in mobile menu */
.mobile-demo-btn {
  background: var(--teal) !important;
  color: #fff !important;
  border: 2px solid var(--teal);
  padding: 12px 0 !important;
  width: 240px;
  text-align: center;
  margin-top: 0 !important;
  display: block;
}

.logo img {
  height: 32px;
  width: auto;
  display: block;
}

.menu {
  position: relative;
  margin-left: auto;
  display: flex;
  gap: 44px;
  align-items: center;
  height: 52px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.menu a,
.dd-toggle {
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.menu a:hover,
.dd-toggle:hover {
  opacity: 0.9;
}

/* Contact button in nav */
.menu .contact {
  background: var(--teal);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-radius: 0;
  color: #fff;
}

/* ── Dropdown ── */
.dropdown {
  position: relative;
  display: inline-block;
}

.chev {
  font-size: 12px;
  opacity: 0.9;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 10px 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  z-index: 10001;
}

.dropdown-menu a {
  display: block;
  padding: 14px 18px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dropdown-menu a.disabled,
.dropdown-menu a.is-muted,
.dropdown-menu a.muted {
  color: #9a9a9a;
  font-weight: 500;
  pointer-events: none;
  cursor: default;
}

/* Show on hover / focus / JS toggle */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
  display: block;
}


/* ============================================================
   7. HERO
   ============================================================ */

.hero {
  background: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 86px 20px 98px;
}

/* Slow zoom background image */
.hero-bg {
  position: absolute;
  inset: -18% 0 0 0;
  background-size: cover;
  background-position: center top;
  transform: scale(1.08);
  transform-origin: center;
  will-change: transform;
  filter: saturate(0.95) contrast(0.95);
  z-index: 0;
  animation: heroBgZoom 6s ease-out both;
  animation-play-state: paused;
}

.hero.hero-ready .hero-bg {
  animation-play-state: running;
}

/* Gradient overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--heroTop), var(--heroBot));
  opacity: 0.86;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Title */
.hero h1 {
  font-size: 48px;
  margin: 0 0 30px;
  font-weight: 600;
}

/* ── Animated word-by-word headline ── */
.hero-animated {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-animated .line {
  display: flex;
  justify-content: center;
  gap: 0.35em;
}

.hero-animated .word {
  opacity: 0;
  transform: translateY(14px);
  animation: heroWordIn 0.8s cubic-bezier(.22,.61,.36,1) forwards;
  animation-play-state: paused;
}

.hero.hero-ready .hero-animated .word {
  animation-play-state: running;
}

/* Desktop word delays — use nth-of-type so <br.hero-mobile-break> siblings don't affect count */
/* Line 1: The · AI · Operating · System */
.hero-animated .line:nth-child(1) span:nth-of-type(1) { animation-delay: 0.0s; }
.hero-animated .line:nth-child(1) span:nth-of-type(2) { animation-delay: 0.27s; }
.hero-animated .line:nth-child(1) span:nth-of-type(3) { animation-delay: 0.53s; }
.hero-animated .line:nth-child(1) span:nth-of-type(4) { animation-delay: 0.8s; }
/* Line 2: for · Financial · Advice */
.hero-animated .line:nth-child(2) span:nth-of-type(1) { animation-delay: 1.07s; }
.hero-animated .line:nth-child(2) span:nth-of-type(2) { animation-delay: 1.33s; }
.hero-animated .line:nth-child(2) span:nth-of-type(3) { animation-delay: 1.6s; }

/* ── Hero CTA buttons ── */
.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 52px;
}

/*
  The `animation: forwards` fill-mode locks whichever properties the keyframe
  touches, permanently overriding hover transitions on those same properties.
  Fix: split the entry into two layers —
    1. A wrapper <span> handles the translateY slide-up (forwards is safe here,
       nothing hovers the wrapper).
    2. The button itself only animates opacity (forwards only locks opacity:1,
       leaving transform completely free for hover).
  The transition is declared on the base state so mouse-out also animates.
*/

/* Wrapper — slides up then stays put */
.hero-buttons .hero-cta-wrap {
  display: inline-flex;
  opacity: 0;
  transform: translateY(10px);
  animation: heroBtnWrapIn 0.7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-play-state: paused;
}

.hero.hero-ready .hero-buttons .hero-cta-wrap {
  animation-play-state: running;
}

.hero-buttons .hero-cta-wrap:nth-child(1) { animation-delay: 2.4s; }
.hero-buttons .hero-cta-wrap:nth-child(2) { animation-delay: 2.7s; }

/* Button — no animation here so hover transition works freely */
.hero-buttons .hero-cta {
  padding: 14px 24px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  min-width: 190px;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease;
  will-change: transform, filter;
}

/* Hover lift */
.hero-buttons .hero-cta:hover {
  transform: translateY(-2px);
  filter: saturate(0.75);
}

@media (prefers-reduced-motion: reduce) {
  .hero-buttons .hero-cta-wrap {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ============================================================
   8. EXPLAINER
   ============================================================ */

.explainer {
  background: #fff;
  color: #000;
  padding: 100px 20px;
}

.explainer-inner {
  width: 1200px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 84px;
}

.copy { flex: 1; }
.video { flex: 1; }

.copy h2 {
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

.copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
}

.explainer a {
  text-decoration: none !important;
  font-weight: 700 !important;
  color: var(--teal) !important;
}

.explainer a:hover {
  text-decoration: none;
}

/* ── Video wrapper ── */
.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  animation: productFadeIn 1.8s ease 0.4s both;
}

.video-wrapper-link {
  display: block;
  text-decoration: none;
}

.video-wrapper-link .video-wrapper {
  transition: transform 300ms cubic-bezier(.22,.61,.36,1), box-shadow 300ms cubic-bezier(.22,.61,.36,1);
}

.video-wrapper-link:hover .video-wrapper {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

@media (min-width: 768px) {
  .video-wrapper-link:has(.hero-screenshot-img) {
    animation: heroSlideInRight 1.0s cubic-bezier(.22,.61,.36,1) 0.3s both;
  }
  .video-wrapper-link .video-wrapper {
    opacity: 1;
    animation: none;
  }
}

.video-wrapper iframe,
.explainer .video-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Legacy placeholder */
.video-box {
  border: 1px solid #000;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-box span {
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #111;
}


/* ============================================================
   9. CTA STRIP (black / page-wide)
   ============================================================ */

.cta-strip {
  background: #000;
  padding: 28px 40px;
}

.cta-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.cta-strip p {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

/* ── Teal animated strip ── */
.cta-strip-teal {
  background-color: var(--teal);
  padding: 48px 40px;
  animation: ctaStripColorMix 6s linear infinite;
  animation-play-state: paused;
}

.cta-strip-teal:hover {
  animation-play-state: running;
}

.cta-strip-teal-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.cta-strip-teal-copy { max-width: 560px; }

.cta-strip-teal-lead {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.cta-strip-teal-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.cta-strip-teal-action { margin-left: 32px; }


/* ============================================================
   10. PLATFORM OVERVIEW  (home – 3-column tiles)
   ============================================================ */

.adiso-platform {
  padding: 80px 0;
}

.adiso-platform-overview {
  background: #f5f6f6;
  padding: 80px 0;
  color: #2b2b2b;
  position: relative;
  overflow: hidden;
}

.adiso-platform-overview::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/circuit-overlay.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.02;
  mix-blend-mode: multiply;
  filter: invert(1);
  pointer-events: none;
  z-index: 0;
}

.adiso-platform-overview > * {
  position: relative;
  z-index: 1;
}

.adiso-platform-overview .container,
.adiso-platform-overview-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.adiso-platform-overview .platform-header {
  margin-bottom: 65px;
}

.adiso-platform-overview .adiso-platform-title,
.adiso-platform-overview .adiso-modular-title,
.adiso-platform-overview .platform-header .platform-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 8px 0 65px;
  color: var(--text);
}

.platform-col-btn {
  align-self: center;
  margin-top: auto;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), background-color 0.25s ease, color 0.25s ease;
}

.platform-col p:last-of-type {
  margin-bottom: 48px;
}

.platform-col-btn:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-4px);
  filter: none;
}

.platform-image-link {
  display: block;
  text-decoration: none;
}

.platform-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #dde0e3;
  border-radius: 10px;
}

.platform-col p {
  line-height: 1.45;
}

.adiso-platform-overview h3,
.adiso-platform-overview .platform-col h3 {
  color: var(--teal);
}

.adiso-platform-overview p,
.adiso-platform-overview .platform-col p {
  color: #6f7478;
  font-size: calc(1rem - 2px);
  line-height: 1.38;
  padding: 0 12px;
  margin-top: auto;
  margin-bottom: 0;
}

.adiso-platform-overview .platform-col p:last-of-type {
  margin-bottom: 36px;
}

/* ── Platform grid ── */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px 48px;
}

/* ── Platform column card ── */
.platform-col {
  background: #fff;
  border-radius: 18px;
  padding: 32px 32px 52px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1), background-color 320ms ease;
}

.platform-col:hover {
  background: #eaeced;
  transform: translateY(-4px);
  z-index: 6;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.platform-col h3 {
  margin: 0 0 6px;
  font-size: 26px;
  text-align: center;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-features .platform-col h3 {
  color: #2F9A86;
  min-height: 3.2em !important;
  display: flex;
  align-items: center;
}

/* ── Image within tile ── */
.platform-image {
  background: transparent;
  padding: 8px 0;
  margin: 10px 0 14px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: visible;
  border-radius: 14px;
  position: relative;
  z-index: 1;
  aspect-ratio: 1126 / 704;
}

.platform-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  border-radius: 14px;
  display: block;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), box-shadow 600ms cubic-bezier(.22,.61,.36,1);
}

.platform-col:hover .platform-image img {
  transform: scale(1.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

/* Clickable platform images */
.platform-image a { display: block; }

/* ── Icon-style tile (no crop, no shadow) ── */
.platform-image--icon {
  aspect-ratio: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px;
}

.platform-image--icon img {
  width: 96%;
  height: auto;
  object-fit: unset;
  box-shadow: none !important;
  filter: grayscale(1) brightness(0.40);
  transition: filter 400ms ease, transform 600ms cubic-bezier(.22,.61,.36,1);
}

.platform-col:hover .platform-image--icon img {
  box-shadow: none !important;
  transform: scale(1.06);
  filter: none;
}

/* ── Screenshot frame ── */
.screenshot-frame {
  background: #f6f7f8;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
}

.screenshot-frame img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* ── Screenshot placeholder ── */
.platform-placeholder {
  width: 100%;
  height: 220px;
  border: 1.5px solid #cfd6d3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #5f6f6a;
  background: #fff;
}

/* ── Home platform section (non-overview tiles) ── */
.platform {
  background: var(--grey-bg);
  padding: 80px 40px;
  color: #000;
}

.platform-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.platform h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 48px;
}

.platform-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  text-align: left;
  color: #000;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
}

.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.platform-card h3 {
  font-size: 22px;
  margin: 0 0 20px;
  color: var(--teal);
  font-weight: 700;
}

.platform-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.platform-cta {
  text-align: center;
  margin-top: 48px;
}

/* ── Fade card animation ── */
.fade-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   11. WHO IS ADISO FOR
   ============================================================ */

.who-for {
  background: #fff;
  color: #000;
  padding: 80px 0;
}

.who-for-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: stretch;
  gap: 40px;
  justify-content: space-between;
}

.who-for-left {
  flex: 0 0 42%;
  max-width: 42%;
  display: flex;
  align-items: stretch;
}

.who-for-right {
  flex: 1;
}

.who-for-image {
  width: 100%;
  height: 100%;
}

.who-for-image img,
.who-for .who-for-image img,
.who-for-left .who-for-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
}

.who-for .who-for-image img:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}

/* Legacy screenshot placeholder */
.who-for-screenshot {
  width: 100%;
  max-width: 420px;
  height: 168px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.10em;
  margin: 0 auto 34px;
  background: #fff;
}

.who-for-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  margin-bottom: 28px;
}

.who-for-logos img { max-width: 50%; height: auto; }

.who-for-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  align-self: center;
}

.who-for-title {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
}

.who-for-intro {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}

.who-for-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 24px;
}

.who-for-list li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: #555;
}

/* Stagger override for who-for list items */
html.js .who-for-list li.fade-in.is-visible {
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,.61,.36,1) !important;
}

.who-for-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  position: absolute;
  left: 0;
  top: 8px;
}

.green-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 14px 24px;
}

.green-list li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 10px;
  line-height: 1.5;
  font-weight: 600;
  color: #3a3a3a;
}

.green-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  position: absolute;
  left: 0;
  top: 7px;
}


/* ============================================================
   12. MODULAR BY DESIGN
   ============================================================ */

.adiso-modular {
  background: #ffffff;
  padding: 80px 0;
  color: #000;
}

.adiso-modular-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.adiso-modular-copy { max-width: 560px; }

.adiso-modular-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 20px;
}

.adiso-modular-intro {
  font-size: 16px;
  line-height: 1.55;
  color: #222;
  margin-bottom: 32px;
  max-width: 520px;
}

/* ── Modular tools grid ── */
.modular-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: center;
}

.modular-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 16px;
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--teal);
  font-family: Barlow, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  line-height: 1.3;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              color 0.25s ease,
              border-color 0.25s ease,
              background-color 0.25s ease;
}

.modular-tool-btn:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-4px);
}

/* KiwiSaver button: dark green filled by default */
.modular-tools-grid .modular-tool-btn:nth-child(1) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* When any button in the grid is hovered → KiwiSaver reverts to outline */
.modular-tools-grid:has(.modular-tool-btn:hover) .modular-tool-btn:nth-child(1) {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}

/* KiwiSaver hovered → stays teal filled */
.modular-tools-grid .modular-tool-btn:nth-child(1):hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Slower, smoother fade-in for modular tool buttons */
html.js .modular-tool-btn.fade-in {
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1) !important;
}

/* Override fade-in !important lock so hover lift and color transitions work */
html.js .modular-tool-btn.fade-in.is-visible:hover {
  transform: translateY(-4px) !important;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              color 0.25s ease,
              border-color 0.25s ease,
              background-color 0.25s ease !important;
}

/* Modular section container */
.modular-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.modular-inner {
  display: flex;
  gap: 48px;
}

/* ── Module image link hover ── */
.module-image-link {
  display: inline-block;
}

.module-image-link img {
  display: block;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
}

.module-image-link:hover img {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   13. MEET THE ADISO TEAM  (home section)
   ============================================================ */

.adiso-team {
  background: #fff;
  padding: 64px 40px 43px;
  color: #000;
}

.adiso-team-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.adiso-team-inner .adiso-eyebrow {
  text-align: center;
}

.adiso-team-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
  text-align: center;
}

.adiso-team-intro {
  max-width: 460px;
  font-size: 16px;
  line-height: 1.55;
  color: #222;
  margin: 0 auto 48px;
  text-align: center;
}

.adiso-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.adiso-team-card {
  background: #f4f5f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1),
              box-shadow 420ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.adiso-team-link:hover .adiso-team-card,
.adiso-team-link:focus-visible .adiso-team-card {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
}

.adiso-team-card img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 16px;
  display: block;
}

.adiso-team-card h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.adiso-team-cta { text-align: center; margin-top: 48px; }


/* ============================================================
   14. CONTACT CTA BANNER
   ============================================================ */

.contact-cta {
  background: var(--grey-bg);
  padding: 72px 40px;
  color: #000;
}

.contact-cta-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.contact-copy { 
  max-width: 620px;
  text-align: center;
}

.contact-copy h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
}

.contact-cta .contact-copy h2 {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

.contact-actions {
  display: flex;
  gap: 12px;
  padding-top: 32px;
  margin-left: 0;
  justify-content: center;
}

/* Hide line break on mobile for better text flow */
@media (max-width: 900px) {
  .contact-cta-heading br {
    display: none;
  }
}

/* ============================================================
   15. FOOTER
   ============================================================ */
.site-footer {
  background: #111;
  color: #fff;
  padding: 72px 40px 32px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}
/* ── Brand column ── */
.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 460px;
}
.site-footer .footer-logo,
.footer-logo {
  display: block;
  height: 43px;
  width: auto;
  margin-bottom: 44px;
}
.site-footer .footer-eyebrow {
  display: block;
  color: var(--teal);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
/* ── Signup form ── */
.site-footer .footer-signup {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 540px !important;
}
.site-footer .footer-signup input {
  all: unset !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  height: 52px !important;
  min-width: 0 !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #333 !important;
  font-family: Barlow, sans-serif !important;
  font-size: 14px !important;
}
.site-footer .footer-signup input::placeholder {
  color: #777 !important;
}
.site-footer .footer-signup button {
  all: unset !important;
  box-sizing: border-box !important;
  height: 52px !important;
  padding: 0 28px !important;
  background: var(--teal) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
/* ── Link columns ── */
.footer-links {
  display: flex;
  gap: 56px;
}
.footer-col h4 {
  margin-bottom: 14px;
  font-size: 16.25px;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.footer-col a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 16.25px;
  margin-bottom: 10px;
  opacity: 0.85;
}
.footer-col a:hover { opacity: 1; }
/* ── Legal bar ── */
.footer-legal {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid #222;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.75;
}
.footer-legal a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
  opacity: 1;
}
.footer-legal a:hover { text-decoration: underline; }

/* ── Footer Mobile Styles ── */
@media (max-width: 900px) {
  .site-footer {
    text-align: center;
    padding: 60px 20px 20px !important;
  }
  
  .footer-inner {
    flex-direction: column;
    align-items: center !important;
    gap: 40px;
    width: 100%;
  }
  
  .site-footer .footer-brand {
    align-items: center !important;
    width: 100%;
  }
  
  .site-footer .footer-logo,
  .footer-logo {
    margin: 0 auto 14px !important;
  }
  
  .site-footer .footer-eyebrow {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .site-footer .footer-signup {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    align-items: center !important;
    margin-bottom: 40px !important;
  }
  
  .site-footer .footer-signup input {
    width: 60% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .site-footer .footer-signup button {
    width: 60% !important;
  }
  
  .footer-links {
    flex-direction: column !important;
    gap: 30px !important;
    width: 100%;
    align-items: center !important;
  }
  
  .footer-col {
    text-align: center !important;
    width: 100%;
  }
  
  .footer-col h4,
  .footer-col a {
    text-align: center !important;
    display: block;
  }
  
  .footer-legal {
    flex-direction: column;
    gap: 10px;
    text-align: center !important;
    width: 100%;
  }
  
  .footer-legal span {
    display: block;
    text-align: center !important;
  }
}
/* ============================================================
   16. ABOUT PAGE
   ============================================================ */

/* ── About hero ── */
.about-hero {
  width: 100%;
  background: #fff;
  padding: 84px 0 90px;
}

.about-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.about-title {
  margin: 0 0 22px;
  font-size: 48px;
  font-weight: 600;
  color: var(--text);
}

/* ── About intro ── */
.about-intro {
  background: #fff;
  padding: 120px 40px 90px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.about-intro-text,
.about-intro-paragraph {
  max-width: 520px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* ── About team grid ── */
.about-team-heading {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 80px;
  font-size: 40px;
  font-weight: 600;
  color: var(--text);
}

.about-team {
  background: #f2f2f2;
  width: 100%;
  padding: 60px 0;
}

.about-team-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* First team section (4 cards - Brett, Andy, Brad, Jacob) - 2x2 grid on desktop */
section.about-team:first-of-type .about-team-inner,
.about-team:has(#brett) .about-team-inner {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Desktop: cards are 90% width */
section.about-team:first-of-type .team-card,
.about-team:has(#brett) .team-card {
  width: 90%;
  margin: 0 auto;
}

.team-card {
  width: 100%;
  margin: 0;
}

.team-card {
  background: #fff;
  border-radius: 18px;
  padding: 16px 22px 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms cubic-bezier(.22,.61,.36,1);
  opacity: 0;
  animation: teamFadeIn 1.2s ease forwards;
}

.team-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
  transform: translateY(-4px);
}

/* About page team card on white background */
.about-team[style*="background:#ffffff"] .team-card {
  background: #f6f7f8;
  border-radius: 16px;
  padding: 14px 18px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
}

.team-photo img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 20px;
}

.team-meta h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #444;
}

/* Founders section (Brett, Andy, Brad, Jacob) — 25% larger names */
.about-team:not([style]) .team-meta h3 {
  font-size: 1.375rem;
}

.team-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.team-bio p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6f6f6f;
}

/* Spacing when no icons */
.team-card:not(:has(.team-icons)) .team-role {
  margin-bottom: 18px;
}

/* Stagger fade (JS-triggered, safe) */
.js .about-team .stagger-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.js .about-team .stagger-item.is-visible {
  opacity: 1;
  transform: none;
}

/* Contact icon in about page - ensure LinkedIn icons are white */
.about-team .contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--teal) !important;
  text-decoration: none !important;
}

.about-team .contact-icon svg,
.about-team .contact-icon svg path {
  width: 16px !important;
  height: 16px !important;
  fill: #fff !important;
  color: #fff !important;
  display: block !important;
}

.about-team .contact-icon span.icon-bg {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Bruce grayscale */
#bruce img {
  filter: grayscale(100%) contrast(1.05) brightness(1.02);
}

/* About page intro text colour */
.about-intro-paragraph,
.about-page p.about-intro,
.about-page .intro-text {
  color: var(--text);
}

/* Adiso team card on about page */
.about-page .adiso-team-card span {
  color: #9ca3af !important;
}


/* ============================================================
   17. CONTACT PAGE
   ============================================================ */

main.contact-page {
  background: #fff;
  width: 100%;
  padding-top: 125px;
}

main.contact-page > section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

main.contact-page > section:first-child {
  padding-top: 0;
  margin-top: 0;
}

main.contact-page .contact-intro {
  padding-top: 0;
  padding-bottom: 40px;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

main.contact-page .contact-direct {
  margin-bottom: 90px;
}

.contact-page { background: #fff; color: #000; }

.contact-intro {
  padding: 0 40px 80px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.contact-intro h1 {
  font-size: 48px;
  margin-bottom: 18px;
}

.contact-title {
  margin-top: 6px;
  color: var(--text);
}

.contact-intro-text,
main.contact-page p.contact-intro-text {
  display: block !important;
  max-width: 760px !important;
  margin: 0 auto 56px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  color: var(--text) !important;
  padding-left: 140px;
  padding-right: 140px;
}

.contact-intro-text strong,
main.contact-page p.contact-intro-text strong {
  display: inline;
  font-weight: 700 !important;
}

/* ── Direct contact area ── */
.contact-direct {
  display: flex;
  justify-content: center;
  gap: 80px;
  align-items: center;
  flex-wrap: nowrap;
}

.contact-person {
  flex: 0 0 auto;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease;
}

.contact-person:hover {
  transform: translateY(-4px);
  filter: saturate(0.85);
}

.contact-person img {
  width: 175px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.contact-page .contact-person .contact-name > strong {
  font-size: 120%;
  color: #555;
  display: block;
}

.contact-page .contact-person .contact-name > span {
  font-size: 80%;
  color: #b0b0b0;
  font-size: 11px !important;
  color: #9ca3af !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: block;
  margin-top: 6px;
}

.contact-details {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 33px;
  align-items: flex-start;
}

/* Center and add extra spacing to the Book a Demo button */
.contact-details .cta-button {
  align-self: center;
  margin-top: 8px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #555;
  text-decoration: none;
}

/* ── Contact page CTA button ── */
.contact-page .cta-button.outline {
  border: 2px solid var(--teal) !important;
  background: transparent !important;
  color: var(--teal) !important;
}

.contact-page .cta-button {
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease !important;
}

.contact-page .cta-button:hover {
  transform: translateY(-4px) !important;
  filter: saturate(0.85) !important;
}

/* ── Send button (in form) ── */
.contact-page .contact-form .cta-button {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  background-color: var(--teal) !important;
  color: #fff !important;
  font-family: Barlow, sans-serif !important;
  font-size: 0.8em !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease !important;
}

.contact-page .contact-form .cta-button:hover {
  transform: translateY(-4px) !important;
  filter: saturate(0.8) !important;
  box-shadow: none !important;
}

/* ── Fade-in items (contact page) ── */
.contact-page .fade-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.contact-page .fade-item.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger animation (contact elements) */
@media (prefers-reduced-motion: no-preference) {
  .contact-page .contact-person,
  .contact-page .contact-details .contact-link,
  .contact-page .contact-details .cta-button,
  .contact-page .contact-address,
  .contact-page .contact-form {
    opacity: 1;
    transform: none;
  }
}

/* ── Icon colour ── */
.contact-page .icon-circle svg,
.contact-page .icon-circle svg *,
.contact-page .icon-circle path {
  fill: #fff !important;
  stroke: #fff !important;
}

/* ── Lower grey section ── */
main.contact-page .contact-lower,
.contact-lower {
  position: relative;
  background: none;
  z-index: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 40px 160px !important;
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 160px !important;
  align-items: start !important;
}

.contact-lower::before,
main.contact-page .contact-lower::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: #f4f4f4 !important;
  z-index: -1 !important;
}

main.contact-page .contact-lower > *,
.contact-lower > * {
  position: relative;
  z-index: 1;
}

.contact-address { 
  max-width: 420px;
  padding-left: 100px;
}

.map-icon { margin-bottom: 18px; }

.address-text {
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 26px;
}

/* ── Contact form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form label {
  display: block;
  margin-bottom: 0;
}

.contact-form label span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #ddd;
  font-family: Barlow, sans-serif;
  background: #fff;
  margin-bottom: 12px;
}

.contact-form textarea { resize: vertical; }

.contact-form .cta-button { margin-top: 10px; }

/* ── Intro text page colours ── */
.contact-page p,
.contact-page .contact-intro,
.contact-page .contact-copy p {
  color: var(--text);
}


/* ============================================================
   18. KIWISAVER PAGE
   ============================================================ */

/* ── Shared container ── */
.ks-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Hero ── */
html.js .ks-hero .ks-intro.fade-in {
  transition-delay: 500ms !important;
}

.ks-hero {
  background: #fff;
  padding: 80px 0 80px;
  color: var(--text);
  text-align: center;
}

.ks-title {
  display: block;
  font-size: 48px;
  font-weight: 600;
  max-width: 620px;
  margin: 0 auto 0;
  line-height: 1.15;
  color: var(--text);
  text-align: center;
}

.ks-intro {
  display: block;
  max-width: 740px;
  margin: 40px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  text-align: center;
  background: #e8f5f2;
  padding: 28px 44px;
  border-radius: 10px;
}

/* ── KiwiSaver benefits strip ── */
.ks-benefits-strip {
  background: #1a2e2a;
  padding: 28px 40px;
  overflow: hidden;
}

.ks-benefits-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

/* Hide items initially when JS is active so they can animate in */
html.js .ks-benefits-inner.stagger-group .stagger-item {
  opacity: 0;
  transform: translateY(28px);
}

.ks-benefit-item {
  padding: 32px 24px 28px;
  position: relative;
  cursor: default;
  transition: transform 0.35s ease, background 0.35s ease;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.ks-benefit-item:last-child {
  border-right: none;
}

.ks-benefit-item:hover {
  transform: translateY(-4px);
  background: rgba(76,175,138,0.07);
}

.ks-benefit-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #4caf8a;
  color: #4caf8a;
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  margin: 0 auto 20px;
  transition: background 0.35s ease, color 0.35s ease;
}

.ks-benefit-item:hover .ks-benefit-num {
  background: #4caf8a;
  color: #1a2e2a;
}

.ks-benefit-value {
  font-size: 36px;
  font-weight: 700;
  color: #4caf8a;
  margin-bottom: 10px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.ks-benefit-label {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ── KiwiSaver audience rows (adviser / client) ── */
.ks-audience-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ks-audience-rows {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.ks-audience-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
  padding: 60px 0;
}

.ks-audience-rows > .ks-audience-row:first-child {
  padding-top: 80px;
}

.ks-audience-divider {
  border-top: 1px solid #e8ede9;
}

.ks-audience-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 40px 40px 0;
  border-right: 1px solid #e8ede9;
}

.ks-audience-icon svg {
  width: 100px;
  height: 100px;
}

.ks-audience-icon-label {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: #4caf8a;
  text-align: center;
  text-transform: uppercase;
}

.ks-audience-content {
  padding: 0 0 0 60px;
}

/* Green circle with tick bullets for audience lists */
.ks-audience-content .green-list {
  margin-top: 28px;
}

.ks-audience-content .green-list li {
  padding-left: 34px;
  font-size: 17px;
  margin-bottom: 14px;
}

.ks-audience-content .green-list li::before {
  content: "✓";
  background: #4caf8a;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  top: 2px;
  line-height: 20px;
  text-align: center;
}

/* ── Value section ── */
.ks-value {
  background: var(--grey-bg);
  padding: 53px 0 80px;
  color: var(--text);
}

.ks-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Value points with image grid ── */
.ks-points-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.ks-point-row {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: center;
}

.ks-point-image {
  width: 100%;
}

.ks-point-image img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ks-point-image img:hover {
  transform: scale(1.15);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.ks-point-image .feature-img-placeholder {
  height: 240px;
}

/* Reverse order: video first, then points */
.ks-video {
  order: 1;
  margin-bottom: 60px;
}

.ks-points {
  order: 2;
}

/* ── Value points ── */
.ks-points {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ks-point {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  opacity: 1;
  transform: none;
}

.ks-point-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ks-point-content h2,
.ks-point-content h3 {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

.ks-point-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}

/* Stagger fade-in for KiwiSaver points */
@media (prefers-reduced-motion: no-preference) {
  .ks-value .ks-point {
    opacity: 0;
    transform: translateY(16px);
    animation: ksPointIn 0.7s cubic-bezier(.22,.61,.36,1) forwards;
  }

  .ks-value .ks-point:nth-child(1) { animation-delay: 0.00s; }
  .ks-value .ks-point:nth-child(2) { animation-delay: 0.25s; }
  .ks-value .ks-point:nth-child(3) { animation-delay: 0.50s; }
  .ks-value .ks-point:nth-child(4) { animation-delay: 0.75s; }
  .ks-value .ks-point:nth-child(5) { animation-delay: 1.00s; }
  .ks-value .ks-point:nth-child(6) { animation-delay: 1.25s; }
}

/* ── KiwiSaver video ── */
.ks-video {
  align-self: stretch;
  height: 100%;
  display: flex;
  align-items: center;
}

.ks-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  opacity: 0;
  animation: platformVideoFade 1.8s ease 0.4s both;
  border-radius: 18px;
  overflow: hidden;
}

.ks-video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

/* Remove outer outline on KiwiSaver value video */
section.ks-value .ks-video .ks-video-frame {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

section.ks-value .ks-video .ks-video-frame iframe {
  border: 0 !important;
  outline: 0 !important;
}

/* KiwiSaver page with scoped animation */
section.ks-value .ks-video-frame {
  animation-name: kiwisaverVideoFade;
}

/* ── Onboarding section ── */
.ks-onboarding {
  background: #fff;
  padding: 90px 40px 100px;
  color: var(--text);
}

.ks-onboarding-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.ks-onboarding-visuals {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.ks-onboarding-image {
  display: block;
  width: 90%;
  max-width: 504px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.ks-onboarding-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}

.ks-onboarding-copy { max-width: 520px; }

.ks-onboarding-copy .eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ks-onboarding-copy h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--text);
}

.ks-onboarding-copy p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 18px;
  color: var(--text);
  max-width: 520px;
}

.ks-onboarding-copy p:last-of-type {
  margin-bottom: 32px;
}

/* Force 2-column desktop (KiwiSaver onboarding section) */
@media (min-width: 901px) {
  section.kiwisaver-onboarding > .ks-onboarding-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
  }
  section.kiwisaver-onboarding .ks-onboarding-visuals { order: 1; }
  section.kiwisaver-onboarding .ks-onboarding-copy    { order: 2; }
}

/* ── KiwiSaver tile grid ── */
.ks-tile-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 80px;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.ks-grid-tile {
  width: 100%;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(16px);
}

.ks-grid-tile.t1 { animation-delay: 0.0s; }
.ks-grid-tile.t2 { animation-delay: 0.5s; }
.ks-grid-tile.t3 { animation-delay: 1.0s; }
.ks-grid-tile.t4 { animation-delay: 1.5s; }

/* Intro text colour */
.kiwisaver-page p,
.kiwisaver-page .intro-text,
.kiwisaver-page .ks-intro,
.kiwisaver-page .ks-onboarding-copy p,
section.ks-hero p.ks-intro {
  color: var(--text) !important;
}


/* ============================================================
   19. PLATFORM PAGE
   ============================================================ */

/* ── Intro ── */
.page-intro-full .page-eyebrow,
.page-intro-full .page-title {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ── Section spacing ── */
section.adiso-platform-overview { padding-top: 100px !important; padding-bottom: 100px !important; }
section.adiso-modular            { padding-top: 100px !important; padding-bottom: 100px !important; }
section.who-for                  { padding-top: 100px !important; padding-bottom: 100px !important; }
section.adiso-team               { padding-top: 100px !important; padding-bottom: 100px !important; }
section.platform-features        { padding-top: 90px  !important; padding-bottom: 115px !important; }
section.platform-commitment      { padding-top: 100px !important; padding-bottom: 105px !important; }
section.ks-onboarding            { padding-bottom: 100px !important; }

/* ── Key features ── */
.platform-features {
  background: #fff;
  padding: 80px 40px;
  color: var(--text);
}

.adiso-platform-overview .platform-image--icon img {
  width: 72% !important;
}

.platform-features .platform-image--icon img {
  width: 64% !important;
  margin-top: 0 !important;
}

.platform-features-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.platform-features-inner .platform-eyebrow {
  text-align: center;
}

.platform-features-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 42px;
  color: var(--text);
  text-align: center;
}

.platform-features-intro {
  max-width: 620px;
  margin: 0 auto 60px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  text-align: center;
}

/* Feature grid */
.platform-feature-grid,
.platform-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 56px;
}

/* Feature card */
.platform-feature-card {
  background: #f3f4f4;
  border-radius: 12px;
  padding: 24px 24px 22px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform, box-shadow;
}

.platform-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.platform-feature-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #4a4a4a;
  line-height: 1.25;
}

.platform-feature-card p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #8a8a8a;
}

/* Feature media (image frame) */
.platform-feature-media {
  margin: 0;
  border: 1px solid #d6d6d6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.platform-feature-media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Kill inner shadow on hover (card already has shadow) */
.platform-features .platform-feature-media,
.platform-features .platform-feature-media img {
  box-shadow: none !important;
}

.platform-features .platform-feature-card:hover .platform-feature-media img {
  transform: scale(1.03);
}

/* ── Commitment section ── */
.platform-commitment {
  background: #fff;
  padding: 90px 40px;
  color: var(--text);
}

.platform-commitment-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.platform-commitment-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.platform-commitment-image {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  overflow: visible;
  border-radius: 18px;
  border: none;
  padding: 0;
  background: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.platform-commitment-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
}

.platform-commitment-image img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 18px;
  animation: fadeInUpSoft 0.8s ease-out forwards;
}

.platform-commitment-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 22px;
  color: var(--text);
}

.platform-commitment-copy {
  max-width: 460px;
  margin-left: -40px;
}

.platform-commitment-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 18px;
  max-width: 520px;
}

.platform-commitment-copy .cta-button {
  margin-top: 18px;
}

/* Intro text colour */
.platform-page p,
.platform-page .intro-text,
.platform-page .platform-intro {
  color: var(--text);
}


/* ============================================================
   20. CASE STUDIES PAGE
   ============================================================ */

/* ── Coming soon bar ── */
.cs-soonbar-wrapper-9f3k2 {
  width: 100%;
  background-color: #3f3f3f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 126px;
}

.cs-soonbar-inner-9f3k2 {
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 42px 20px;
  line-height: 1.4;
  opacity: 0;
  animation: cs-soonbar-fadein-9f3k2 1.6s ease forwards;
}

/* ── Case study rows ── */
.case-study {
  background: #fff;
  padding: 100px 40px;
}

.case-study-alt {
  background: var(--grey-bg);
}

.case-study-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.case-study-logo img {
  max-width: 90%;
  height: auto;
  display: block;
}

/* Case Studies title override */
body .page-intro-full .page-intro-inner h1.page-title {
  font-size: 48px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* ── Partners section ── */
.partners {
  background: var(--grey-bg);
  padding: 100px 40px;
  text-align: center;
}

.partners-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.partners-title {
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--text);
}

.partners-intro {
  max-width: 520px;
  margin: 0 auto 56px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 58px;
  margin-top: 84px;
  margin-bottom: 72px;
}

.partners-logos img { max-height: 70px; width: auto; }

/* Logo size & position balance */
.partners-logos img[src*="Lifetime"] {
  transform: translateX(15%) scale(1.15) !important;
}

.partners-logos img[src*="BNOL"] {
  transform: translateX(15%) scale(0.85) !important;
}

.partners-cta { margin-top: 94px; }

.partners-cta .cta-button {
  padding: 14px 28px;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease;
}

.partners-cta .cta-button:hover {
  filter: saturate(0.85);
  transform: translateY(-4px);
}


/* ============================================================
   21. MODALS  (Book a Demo)
   ============================================================ */

.demo-modal,
#demoModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.demo-modal.active,
#demoModal.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.demo-modal-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.4s ease !important;
}

.demo-modal.active .demo-modal-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
}

.demo-modal-content {
  position: relative !important;
  max-width: 480px !important;
  width: 90% !important;
  background: #fff !important;
  padding: 36px 32px !important;
  border-radius: 8px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
  font-family: Barlow, sans-serif !important;
  z-index: 2 !important;
  transform: translateY(30px) !important;
  opacity: 0 !important;
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), opacity 0.4s ease !important;
}

.demo-modal.active .demo-modal-content {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.demo-modal-content h2 {
  font-size: 28px !important;
  margin-bottom: 18px !important;
  color: var(--text) !important;
}

.demo-form label span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--teal) !important;
  margin-bottom: 3px !important;
}

.demo-form input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #ddd !important;
  margin-bottom: 8px !important;
  font-family: Barlow, sans-serif !important;
}

.demo-form button {
  width: 100% !important;
  height: 48px !important;
  background: var(--teal) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease !important;
}

.demo-form button:hover {
  transform: translateY(-4px) !important;
  filter: saturate(0.85) !important;
}

.demo-close {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  background: none !important;
  border: none !important;
  font-size: 28px !important;
  cursor: pointer !important;
}

/* ============================================================
   22. RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {

  .explainer-inner     { flex-direction: column; }
  .platform-feature-grid,
  .platform-features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Nav — show hamburger, hide desktop menu */
  .menu-toggle {
    display: flex;
  }

  nav.menu { display: none; }
  
  /* Ensure fade-in content is always visible on mobile */
  .about-hero .fade-in,
  .about-intro .fade-in,
  .ks-hero .fade-in,
  .page-intro-full .fade-up-on-load {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Nav (legacy gap rule kept for any remaining inline menus) */
  .menu { gap: 18px; flex-wrap: wrap; }

  /* Page intros - reduce top padding on all non-home pages */
  .contact-intro,
  .page-intro-full,
  .ks-hero {
    padding-top: 35px !important;
  }
  
  /* About page mobile - match contact page padding (50% reduction) */
  .about-hero {
    padding-top: 63px !important;
  }
  
  /* Contact page mobile - reduce top padding by 50% */
  main.contact-page {
    padding-top: 32px !important;
  }

  /* Grids → single column */
  .platform-grid            { grid-template-columns: 1fr; }
  .who-for-inner            { flex-direction: column; gap: 60px; }
  .who-for-left             { flex: none; max-width: 100%; }
  .adiso-modular-inner      { grid-template-columns: 1fr; }
  .modular-tools-grid       { grid-template-columns: 1fr; }
  .adiso-team-grid          { grid-template-columns: repeat(2, 1fr); }
  .about-team-inner         { grid-template-columns: 1fr; }
  .ks-value-grid            { grid-template-columns: 1fr; gap: 48px; }
  .ks-tile-grid             { grid-template-columns: 1fr; gap: 28px; }
  .platform-commitment-inner { grid-template-columns: 1fr; gap: 48px; }
  
  /* Platform commitment section mobile - add padding, make image 80vw, keep text left-aligned, center button */
  .platform-commitment {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  .platform-commitment-copy {
    margin-left: 0 !important;
    text-align: center !important;
  }
  
  .platform-commitment-copy p,
  .platform-commitment-copy h2,
  .platform-commitment-copy .platform-commitment-eyebrow {
    text-align: left !important;
  }
  
  .platform-commitment-image {
    width: 80vw !important;
    max-width: 80vw !important;
  }
  
  .platform-commitment-copy .cta-button {
    margin-top: 25px !important;
  }
  .case-study-inner         { grid-template-columns: 1fr; gap: 60px; }
  
  /* About team heading mobile */
  .about-team-heading {
    padding: 0 24px;
    font-size: 32px;
    text-align: center;
  }

  /* About page - mobile only: cards 80vw wide and centered */
  .about-team-inner {
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .team-card {
    width: 80vw !important;
    max-width: 80vw !important;
    margin: 0 !important;
  }

  /* Contact */
  .contact-cta-inner        { flex-direction: column; }
  .contact-direct           { flex-wrap: wrap !important; gap: 40px !important; }
  
  main.contact-page .contact-lower,
  .contact-lower            { 
    grid-template-columns: 1fr !important;
    gap: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 120px !important;
  }
  .contact-intro-text       { padding-left: 0 !important; padding-right: 0 !important; }
  
  /* Reorder: address first (row 1), form second (row 2) on mobile */
  main.contact-page .contact-address,
  .contact-address { 
    order: 1 !important;
    padding-left: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 40px !important;
  }
  
  main.contact-page .contact-form,
  .contact-form    { 
    order: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  main.contact-page .contact-form input,
  main.contact-page .contact-form textarea,
  .contact-form input,
  .contact-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Footer */
  .site-footer {
    text-align: center;
    padding: 60px 20px 20px !important;
  }
  
  .footer-inner {
    flex-direction: column;
    align-items: center !important;
    gap: 40px;
    width: 100%;
  }
  
  .site-footer .footer-brand {
    align-items: center !important;
    width: 100%;
  }
  
  .site-footer .footer-logo,
  .footer-logo {
    margin: 0 auto 14px !important;
  }
  
  .site-footer .footer-eyebrow {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .site-footer .footer-signup {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    align-items: center !important;
    margin-bottom: 40px !important;
  }
  
  .site-footer .footer-signup input {
    width: 60% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .site-footer .footer-signup button {
    width: 60% !important;
  }
  
  .footer-links {
    flex-direction: column !important;
    gap: 30px !important;
    width: 100%;
    align-items: center !important;
  }
  
  .footer-col {
    text-align: center !important;
    width: 100%;
  }
  
  .footer-col h4,
  .footer-col a {
    text-align: center !important;
    display: block;
  }
  
  .footer-legal {
    flex-direction: column;
    gap: 10px;
    text-align: center !important;
    width: 100%;
  }
  
  .footer-legal span {
    display: block;
    text-align: center !important;
  }

  /* CTA strip */
  .cta-strip-teal-inner     { flex-direction: column; align-items: flex-start; }
  .cta-strip-teal-action    { margin-top: 12px; }

  /* Partners */
  .partners-logos           { flex-direction: column; gap: 32px; }
  .partners-title           { font-size: 36px; }

  /* KiwiSaver */
  .ks-hero    { padding: 63px 0 70px !important; }
  .ks-title   { font-size: 40px !important; }
  .ks-intro   { max-width: 460px !important; }
  .ks-container  { padding: 0 24px; }
  
  /* KiwiSaver value section - reduce top padding by 33% on mobile */
  .ks-value {
    padding-top: 36px !important;
  }
  
  /* KiwiSaver onboarding section mobile adjustments */
  .ks-onboarding {
    padding: 70px 40px 70px !important;
  }
  
  .ks-onboarding-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
  }
  
  /* Add 50px padding below the onboarding image on mobile */
  .ks-onboarding-image {
    margin-bottom: 50px;
  }
  
  /* Add 23px spacing above the Meet Our Team button on mobile */
  .ks-onboarding-copy .cta-button {
    margin-top: 23px;
  }

  /* Platform */
  .platform-commitment-title { font-size: 36px; }
  
  /* Platform page mobile - match top padding to other pages */
  .page-intro-full {
    padding-top: 63px !important;
  }
  
  /* Platform feature card titles - increase by 33% and allow wider */
  .platform-feature-card h3 {
    font-size: 24px !important;
    max-width: 100% !important;
  }
  
  /* Green CTA section - center everything on mobile */
  .cta-strip-teal-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .cta-strip-teal-copy {
    max-width: 100% !important;
    text-align: center !important;
  }
  
  .cta-strip-teal-action {
    margin-left: 0 !important;
    margin-top: 20px !important;
  }

  /* Page intro */
  .page-intro-full .page-title { font-size: 36px; }

  /* CTA buttons — equal width on mobile */
  .contact-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .contact-actions .cta {
    width: 220px;
    text-align: center;
    justify-content: center;
  }

  /* Contact CTA heading line break */
  .contact-cta-heading br {
    display: none;
  }
  
  /* Homepage hero - mobile only adjustments */
  /* Hide KiwiSaver Tool button, center How It Works button */
  .hero-buttons {
    justify-content: center !important;
    margin-top: 48px !important;
  }
  
  .hero-buttons .hero-cta-wrap:nth-child(2) {
    display: none !important;
  }
  
  /* Make hero text bigger and allow natural wrapping to 3 lines */
  .hero h1,
  .hero-animated {
    font-size: 44px !important;
    width: 75% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* On mobile, allow words to wrap naturally */
  .hero-animated .line {
    flex-wrap: wrap !important;
  }
  
  /* Reduce explainer section top padding by 33% (from ~80px to ~53px) */
  .explainer {
    padding-top: 53px !important;
  }
  
  /* Make explainer video full width on mobile */
  .explainer-inner {
    flex-direction: column !important;
  }
  
  .video,
  .explainer .video {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .video-wrapper,
  .explainer .video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Reverse who-for columns on mobile - image first, then text */
  .who-for-inner {
    flex-direction: column-reverse !important;
  }
  
  /* Reduce who-for top padding by 25% (from 90px to 67.5px) */
  .who-for {
    padding-top: 67px !important;
  }
  
  /* Reduce adiso-team top padding by 25% (from 80px to 60px) and bottom padding (to 27px) */
  .adiso-team,
  section.adiso-team {
    padding-top: 60px !important;
    padding-bottom: 27px !important;
  }
}

@media (max-width: 768px) {
  .ks-tile-grid { grid-template-columns: 1fr; gap: 28px; }
  .adiso-team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   NEW SECTIONS: HOW ADISO HELPS / AVA / SECURITY (Homepage)
   ============================================================ */

/* ── How Adiso Helps ── */
.adiso-helps {
  background: #ffffff;
  padding: 80px 0;
}

.adiso-helps-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.adiso-helps-title {
  font-size: 40px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 48px;
  line-height: 1.2;
}

.adiso-helps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
}

.adiso-helps-card {
  background: var(--grey-bg);
  padding: 32px 28px;
  transition: transform 0.32s cubic-bezier(.22,.61,.36,1);
}

.adiso-helps-card:hover {
  transform: translateY(-4px);
}

.adiso-helps-card h3 {
  font-size: 23px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

.adiso-helps-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ── Meet Ava ── */
.ava-section {
  background: var(--grey-bg);
  padding: 80px 0;
}

.ava-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 64px;
}

.ava-image {
  flex: 0 0 440px;
  max-width: 440px;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ava-image:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
}

.ava-img-screenshot {
  width: 102.1%;
  height: auto;
  display: block;
  margin: -1.05%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ava-img-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22));
  transition: opacity 0.5s ease;
}

.ava-image:hover .ava-img-screenshot {
  opacity: 1;
  transform: scale(1);
}

.ava-image:hover .ava-img-logo {
  opacity: 0;
}

.ava-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: #dde0e4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 24px;
}

.ava-copy {
  flex: 1;
}

.ava-copy h2 {
  font-size: 36px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 20px;
  line-height: 1.2;
}

.ava-copy p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 16px;
}

.ava-copy ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

/* ── Security ── */
.security-section {
  background: #fff;
  padding: 80px 0;
}

.security-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 64px;
}

.security-copy {
  flex: 1;
}

.security-copy h2 {
  font-size: 36px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 20px;
  line-height: 1.2;
}

.security-copy p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 16px;
}

.security-copy ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.9;
}

.security-badge {
  flex: 0 0 430px;
  max-width: 430px;
  background: var(--grey-bg);
  padding: 52px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-badge-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 20px;
}

.security-badge-item {
  font-size: 19px;
  font-weight: 600;
  color: #555;
  line-height: 1.4;
  position: relative;
  padding-left: 36px;
}

/* Stagger override — restore transition for security items that use fade-in */
html.js .security-badge-item.fade-in.is-visible {
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,.61,.36,1) !important;
}

.security-badge-item::before {
  content: "✓";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 2px;
}

/* ============================================================
   SUB-PAGE CONTENT (Platform & Tools feature pages)
   ============================================================ */

.sub-page-content {
  background: #fff;
  padding: 60px 0 80px;
}

.sub-page-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}

.sub-page-block {
  padding: 40px 0;
  border-bottom: 1px solid #e8eaec;
}

.sub-page-block:first-child {
  padding-top: 0;
}

.sub-page-block:last-child {
  border-bottom: none;
}

.sub-page-block h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.3;
}

.sub-page-block p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 12px;
}

.sub-page-block p:last-child {
  margin-bottom: 0;
}

.sub-page-block ul {
  margin: 8px 0 12px;
  padding-left: 22px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
}

.sub-page-closing-cta {
  background: transparent;
  padding: 60px 40px;
  text-align: center;
}

.sub-page-closing-cta h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
}

.sub-page-closing-cta p {
  font-size: 16px;
  color: var(--muted);
  margin: 0 auto 40px;
  line-height: 1.6;
  max-width: 560px;
}

/* ============================================================
   MOBILE NAV: Group labels + sub-links
   ============================================================ */

/* ── Mobile nav section wrapper (toggle + group) ── */
.mobile-nav-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* ── Platform / Tools toggle button ── */
.mobile-nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  line-height: 1;
}

.mobile-nav-toggle:hover {
  opacity: 0.75;
}

.mobile-nav-toggle.active {
  color: var(--teal);
}

.mobile-toggle-icon {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
}

.mobile-nav-toggle.active .mobile-toggle-icon {
  transform: rotate(180deg);
}

/* ── Collapsible sub-link group ── */
.mobile-nav-group {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  width: 100%;
}

.mobile-nav-group.open {
  display: flex;
}

/* ── Sub-links inside groups ── */
.mobile-menu-links .mobile-sub-link {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  opacity: 0.8;
  text-transform: none !important;
}

.mobile-menu-links .mobile-sub-link:hover {
  opacity: 1;
}

.mobile-menu-links .mobile-sub-link[aria-current="page"] {
  color: var(--teal);
  opacity: 1;
}

/* Responsive: new sections */
@media (max-width: 900px) {
  .adiso-helps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ava-section-inner,
  .security-section-inner {
    flex-direction: column;
    gap: 40px;
  }
  .ava-image {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .security-badge {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .adiso-helps-grid {
    grid-template-columns: 1fr;
  }
  .adiso-helps-title {
    font-size: 30px;
  }
  .ava-copy h2,
  .security-copy h2 {
    font-size: 28px;
  }
  .sub-page-block h2 {
    font-size: 20px;
  }
}

/* Mobile menu: scroll support + top padding to clear hamburger */
@media (max-width: 900px) {
  .mobile-menu-links {
    gap: 36px;
    justify-content: flex-start;
    padding-top: 80px;
    overflow-y: auto;
  }
}

@media (max-width: 560px) {
  .adiso-platform-overview .platform-header .platform-title { font-size: 34px; }
}
.sub-page-closing-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Alternating feature sections (sub-pages) ── */
.feature-section {
  padding: 88px 40px;
}
.feature-section.bg-white {
  background: #fff;
}
.feature-section.bg-grey {
  background: var(--grey-bg);
}
.feature-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 72px;
}
.feature-section-inner.reverse {
  flex-direction: row-reverse;
}
.feature-section-content {
  flex: 1;
  min-width: 0;
}
.feature-section-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
  line-height: 1.25;
}
.feature-section-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 30px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.feature-section-content p {
  color: #555;
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.feature-section-content p:last-child {
  margin-bottom: 0;
}
.feature-section-content ul {
  margin: 10px 0 16px 20px;
  padding: 0;
  color: #555;
  font-size: 16px;
  line-height: 1.75;
}
.feature-section-content ul li {
  margin-bottom: 6px;
}
.feature-section-image {
  flex: 0 0 360px;
}

.feature-section-image img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-section-image img:hover {
  transform: scale(1.15);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.feature-section-image img.no-hover-pop:hover {
  transform: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.feature-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #e8ecf0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #c4cdd6;
}
.feature-img-placeholder span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8b4be;
}
@media (max-width: 960px) {
  .feature-section-inner,
  .feature-section-inner.reverse {
    flex-direction: column;
    gap: 40px;
  }
  .feature-section-image {
    flex: none;
    width: 100%;
  }
  .feature-section {
    padding: 60px 24px;
  }
  .feature-section-content h2 {
    font-size: 26px;
  }
}

/* ── KiwiSaver "Capture" section 2×2 grid ── */
.ks-capture-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: auto auto;
  column-gap: 72px;
}

.ks-capture-grid.reverse {
  grid-template-columns: 360px 1fr;
}

.ks-capture-grid.reverse .ks-capture-text-top,
.ks-capture-grid.reverse .ks-capture-text-bottom {
  grid-column: 2;
}

.ks-capture-grid.reverse .ks-capture-image-cell,
.ks-capture-grid.reverse .ks-capture-cta-cell {
  grid-column: 1;
}

.ks-capture-text-top {
  grid-column: 1;
  grid-row: 1;
}

.ks-capture-image-cell {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.ks-capture-image-cell img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ks-capture-image-cell img:hover {
  transform: scale(1.15);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.ks-capture-image-cell .feature-img-placeholder {
  width: 100%;
}

.ks-capture-text-bottom {
  grid-column: 1;
  grid-row: 2;
  padding-top: 64px;
}

.ks-capture-text-bottom h3 {
  margin-top: 0;
  color: var(--teal);
}

.ks-capture-cta-cell {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 64px;
  gap: 22px;
}

.ks-cta-subtitle {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  color: #6b7280;
  text-align: center;
}

.ks-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 960px) {
  .ks-capture-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .ks-capture-text-top,
  .ks-capture-image-cell,
  .ks-capture-text-bottom,
  .ks-capture-cta-cell {
    grid-column: 1;
    grid-row: auto;
  }
  .ks-capture-text-bottom { padding-top: 32px; }
  .ks-capture-cta-cell { justify-content: flex-start; padding-top: 20px; }
}

/* ============================================================
   COMPREHENSIVE MOBILE OPTIMISATION PASS
   Covers: section spacing, typography, layout, components
   ============================================================ */

/* ── ≤ 900px: Primary mobile breakpoint ── */
@media (max-width: 900px) {

  /* Section padding reductions — all big sections tightened from ~100px to ~56px */
  section.adiso-platform-overview {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section.adiso-modular {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section.platform-features {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
  section.platform-commitment {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section.who-for {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .adiso-helps {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .ava-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .security-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .adiso-team,
  section.adiso-team {
    padding-top: 56px !important;
    padding-bottom: 24px !important;
  }

  /* Horizontal padding on inner containers */
  .platform-features-inner {
    padding: 0 20px !important;
  }
  .adiso-modular-inner {
    padding: 0 20px !important;
  }
  .adiso-helps-inner {
    padding: 0 20px !important;
  }
  .ava-section-inner {
    padding: 0 20px !important;
  }
  .security-section-inner {
    padding: 0 20px !important;
  }
  .platform-commitment-inner {
    padding: 0 20px !important;
  }

  /* Typography — section headings */
  .platform-features-title {
    font-size: 30px !important;
    margin-bottom: 28px !important;
  }
  .platform-features-intro {
    margin-bottom: 36px !important;
    font-size: 15px !important;
  }
  .adiso-modular-title {
    font-size: 30px !important;
  }
  .adiso-helps-title {
    font-size: 30px !important;
    margin-bottom: 32px !important;
  }
  .adiso-modular-copy {
    text-align: center !important;
  }
  .platform-commitment-title {
    font-size: 30px !important;
  }
  .adiso-helps-card h3 {
    font-size: 20px !important;
  }
  .adiso-helps-card {
    padding: 24px 20px !important;
  }

  /* ks-hero improvements */
  .ks-title {
    font-size: 32px !important;
    max-width: 100% !important;
    padding: 0 4px !important;
  }
  .ks-intro {
    max-width: 100% !important;
    padding: 20px 22px !important;
    font-size: 15px !important;
    margin-top: 28px !important;
  }
  .ks-hero {
    padding: 52px 0 52px !important;
  }
  .ks-container {
    padding: 0 20px !important;
  }

  /* Platform overview tiles — reset min-height on h3 so images align naturally */
  .platform-col h3 {
    min-height: auto !important;
    font-size: 22px !important;
  }
  .platform-col {
    padding: 22px 22px 28px !important;
  }

  /* Modular tool buttons — full width on mobile */
  .modular-tool-btn {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Feature image placeholders — cap height so they don't dominate */
  .feature-img-placeholder {
    min-height: 160px !important;
    height: 160px !important;
  }
  .ks-capture-image-cell .feature-img-placeholder {
    height: 180px !important;
    min-height: 180px !important;
  }

  /* Sub-page closing CTA — mobile padding */
  .sub-page-closing-cta {
    padding: 72px 24px 80px !important;
  }
  .sub-page-closing-cta h2 {
    font-size: 24px !important;
  }

  /* ks-capture sections — inner horizontal padding */
  .feature-section .ks-capture-grid {
    padding: 0 20px !important;
  }

  /* Teal CTA strip inner padding */
  .cta-strip-teal-inner {
    padding: 0 24px !important;
  }

  /* Platform col buttons */
  .platform-col-btn {
    margin-top: 16px !important;
    align-self: center !important;
  }
}

/* ── ≤ 600px: Small mobile ── */
@media (max-width: 600px) {

  /* Further typography reductions */
  .ks-title {
    font-size: 26px !important;
  }
  .ks-intro {
    font-size: 14px !important;
    padding: 16px 16px !important;
    margin-top: 20px !important;
  }
  .ks-hero {
    padding: 44px 0 44px !important;
  }
  .platform-features-title {
    font-size: 26px !important;
  }
  .adiso-modular-title {
    font-size: 26px !important;
  }
  .platform-commitment-title {
    font-size: 26px !important;
  }
  .sub-page-closing-cta h2 {
    font-size: 22px !important;
  }
  .ava-copy h2,
  .security-copy h2 {
    font-size: 24px !important;
  }
  .adiso-helps-title {
    font-size: 26px !important;
  }

  /* Hero text */
  .hero h1,
  .hero-animated {
    font-size: 36px !important;
    width: 92% !important;
  }

  /* Section paddings further reduced */
  section.adiso-platform-overview,
  section.adiso-modular,
  section.platform-features,
  section.platform-commitment,
  section.who-for {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .adiso-helps,
  .ava-section,
  .security-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .ks-hero {
    padding: 40px 0 40px !important;
  }
  section.platform-features {
    padding-bottom: 52px !important;
  }

  /* Stacked CTA buttons */
  .sub-page-closing-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .sub-page-closing-cta-buttons a {
    width: 220px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ks CTA buttons in capture grid */
  .ks-cta-buttons {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .ks-cta-buttons a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Platform col h3 and tiles */
  .platform-col h3 {
    font-size: 20px !important;
  }
  .platform-features .platform-col h3 {
    font-size: 20px !important;
  }

  /* Feature section heading at small screens */
  .feature-section-content h2 {
    font-size: 22px !important;
  }
  .feature-section-content h3 {
    font-size: 16px !important;
  }

  /* Feature sections tighter padding */
  .feature-section {
    padding: 44px 20px !important;
  }

  /* adiso-helps 1 column (already handled but reinforce gap) */
  .adiso-helps-grid {
    gap: 16px !important;
  }

  /* Sub-page closing CTA padding */
  .sub-page-closing-cta {
    padding: 64px 20px 72px !important;
  }

  /* Platform features grid: small screen gap */
  .platform-grid {
    gap: 24px !important;
    padding: 0 !important;
  }

  /* Commitment image: full width */
  .platform-commitment-image {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   HOMEPAGE SECTION STANDARDISATION — mobile
   Standard: 64px vertical padding, 24px horizontal inner
   All homepage sections (except hero) unified here.
   ============================================================ */

@media (max-width: 900px) {

  /* ── Vertical padding: all sections equal ── */
  .explainer,
  section.adiso-platform-overview,
  section.adiso-modular,
  .adiso-helps,
  .ava-section,
  .security-section,
  .who-for,
  .adiso-team,
  section.adiso-team,
  .sub-page-closing-cta {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* ── Horizontal inner padding: all containers equal ── */
  .explainer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .adiso-platform-overview-inner,
  .adiso-modular-inner,
  .adiso-helps-inner,
  .ava-section-inner,
  .security-section-inner,
  .who-for-inner,
  .adiso-team-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sub-page-closing-cta {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 600px) {

  /* ── Vertical padding: further reduced but equal ── */
  .explainer,
  section.adiso-platform-overview,
  section.adiso-modular,
  .adiso-helps,
  .ava-section,
  .security-section,
  .who-for,
  .adiso-team,
  section.adiso-team,
  .sub-page-closing-cta {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  /* ── Horizontal inner padding: small mobile ── */
  .explainer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .adiso-platform-overview-inner,
  .adiso-modular-inner,
  .adiso-helps-inner,
  .ava-section-inner,
  .security-section-inner,
  .who-for-inner,
  .adiso-team-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .sub-page-closing-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Homepage team grid: 2×2 on mobile ── */
@media (max-width: 768px) {
  .adiso-team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* ── Team title: 33% smaller on mobile only ── */
@media (max-width: 900px) {
  .adiso-team-title {
    font-size: 27px !important;
  }
}

/* ── Team section: full-width tiles on mobile ── */
@media (max-width: 900px) {
  /* Remove section's desktop horizontal padding; inner handles it */
  .adiso-team {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Inner container provides the side margin */
  .adiso-team-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Tighter gap so tiles fill more width */
  .adiso-team-grid {
    gap: 12px !important;
  }
  /* Card padding: reduce so content isn't cramped */
  .adiso-team-card {
    padding: 14px !important;
  }
  /* Name font: smaller on mobile */
  .adiso-team-card h3 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  /* Role font: slightly smaller */
  .adiso-team-card > span {
    font-size: 10px !important;
  }
}

/* ── Team title: hide forced break on mobile so it wraps to 2 lines ── */
@media (max-width: 900px) {
  .adiso-team-title br {
    display: none;
  }
}

/* ── Team intro paragraph: full width on mobile ── */
@media (max-width: 900px) {
  .adiso-team-intro {
    max-width: 100% !important;
  }
}

/* ── Section titles: unified 27px on mobile (matches team title) ── */
@media (max-width: 900px) {
  .adiso-modular-title,
  .ava-copy h2,
  .security-copy h2,
  .who-for-title,
  .copy h2,
  .sub-page-closing-cta h2,
  .adiso-helps-title {
    font-size: 27px !important;
  }
}

/* ── Team card role: single-line on mobile ── */
@media (max-width: 900px) {
  .adiso-team-card > span {
    font-size: 8px !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
  }
}

/* ── Who-for section: text above, image below on mobile ── */
@media (max-width: 900px) {
  .who-for-inner {
    flex-direction: column !important;
  }
}

/* ── Introducing Ava: text above, image below on mobile ── */
@media (max-width: 900px) {
  .ava-section-inner {
    flex-direction: column-reverse !important;
  }
}

/* ── Modular section: narrower buttons + reduced text spacing on mobile ── */
@media (max-width: 900px) {
  /* Gap between copy text and button grid */
  .adiso-modular-inner {
    row-gap: 23px !important;
  }
  /* Reduce bottom margin on intro paragraph */
  .adiso-modular-intro {
    margin-bottom: 16px !important;
  }
  /* Buttons: 75% wide and centred in column */
  .modular-tool-btn {
    width: 75% !important;
    justify-self: center !important;
    text-align: center !important;
  }
}

/* ── Platform section: reduce title-to-grid spacing on mobile ── */
@media (max-width: 900px) {
  .adiso-platform-overview .platform-header {
    margin-bottom: 19px !important;
  }
}

/* ── Platform section: reduce h2-to-grid spacing on mobile ── */
@media (max-width: 900px) {
  .adiso-platform-overview .adiso-modular-title,
  .adiso-platform-overview .adiso-platform-title {
    margin-bottom: 40px !important;
  }
}

/* ── Explainer inner: match other sections' side padding on mobile ── */
@media (max-width: 900px) {
  .explainer-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Explainer: halve gap above video on mobile ── */
@media (max-width: 900px) {
  .explainer-inner {
    gap: 42px !important;
  }
}

/* ── Explainer copy h2: 25% smaller on mobile ── */
@media (max-width: 900px) {
  .explainer .copy h2 {
    font-size: 20px !important;
  }
}

/* ── Hero: top/bottom padding on mobile ── */
@media (max-width: 900px) {
  .hero {
    padding-top: 57px !important;
    padding-bottom: 65px !important;
  }
}

/* Mobile break elements — hidden on desktop (flex-safe: display:none removes from flow) */
.hero-mobile-break { display: none !important; }

/* ── Hero: mobile layout — even line spacing, forced breaks ── */
@media (max-width: 900px) {
  /* Switch the h1 from flex-column to block so all text flows in one stream */
  .hero-animated {
    display: block !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }

  /* Make each .line span inline so they flow together — eliminates block-level gaps */
  .hero-animated .line {
    display: inline !important;
    flex-wrap: unset !important;
    gap: 0 !important;
  }

  /* Words flow as inline; natural whitespace between spans provides word spacing */
  .hero-animated .word {
    display: inline !important;
  }

  /* Show the forced line breaks on mobile — inline restores <br> natural behaviour */
  .hero-mobile-break {
    display: inline !important;
  }

  /* Line-at-a-time animation on mobile — words on the same visual line share a delay */
  html.js .hero-animated .word {
    opacity: 0;
    transform: translateY(10px);
    animation: heroWordIn 0.5s cubic-bezier(.22,.61,.36,1) forwards;
    animation-play-state: paused;
  }
  html.js .hero.hero-ready .hero-animated .word {
    animation-play-state: running;
  }
  /* Visual line 1 "The AI Operating" — line[1] words 1·2·3 */
  html.js .hero-animated .line:nth-child(1) span:nth-of-type(1),
  html.js .hero-animated .line:nth-child(1) span:nth-of-type(2),
  html.js .hero-animated .line:nth-child(1) span:nth-of-type(3) { animation-delay: 0.0s; }
  /* Visual line 2 "System for" — line[1] word 4 + line[2] word 1 */
  html.js .hero-animated .line:nth-child(1) span:nth-of-type(4),
  html.js .hero-animated .line:nth-child(2) span:nth-of-type(1) { animation-delay: 0.3s; }
  /* Visual line 3 "Financial Advice" — line[2] words 2·3 */
  html.js .hero-animated .line:nth-child(2) span:nth-of-type(2),
  html.js .hero-animated .line:nth-child(2) span:nth-of-type(3) { animation-delay: 0.6s; }

  /* Button queues after last line finishes (0.6s delay + 0.5s duration) */
  .hero-buttons .hero-cta-wrap:nth-child(1) { animation-delay: 1.2s; }
}


/* ── Security badges: 10% smaller text on mobile ── */
@media (max-width: 900px) {
  .security-badge-item {
    font-size: 17px !important;
  }
}

/* ── Ava: italic questions list ── */
.ava-copy ul em {
  font-style: italic;
}

/* ── KiwiSaver: more space between title and green intro box on mobile ── */
@media (max-width: 900px) {
  .ks-intro {
    margin-top: 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   KIWISAVER PAGE — MOBILE STANDARDISATION
   ═══════════════════════════════════════════════════════════════ */

/* ── KiwiSaver benefits strip — mobile ── */
@media (max-width: 700px) {
  .ks-benefits-strip {
    padding: 20px 20px;
  }
  .ks-benefits-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .ks-benefit-item {
    padding: 24px 16px 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .ks-benefit-item:nth-child(2),
  .ks-benefit-item:nth-child(4) {
    border-right: none;
  }
  .ks-benefit-item:nth-child(3),
  .ks-benefit-item:nth-child(4) {
    border-bottom: none;
  }
  .ks-benefit-value {
    font-size: 28px;
  }
}

/* ── KiwiSaver audience rows — mobile ── */
@media (max-width: 760px) {
  .ks-audience-rows {
    padding: 0 24px;
  }
  .ks-audience-row {
    grid-template-columns: 1fr;
    padding: 40px 0;
    gap: 11px;
  }
  .ks-audience-rows > .ks-audience-row:first-child {
    padding-top: 27px;
  }
  .ks-audience-rows > .ks-audience-row:last-child {
    padding-bottom: 0;
  }
  .ks-audience-icon {
    border-right: none;
    border-bottom: none;
    padding: 0 0 16px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
  }
  .ks-audience-icon svg {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }
  .ks-audience-content {
    padding: 0;
  }
  .ks-audience-content .green-list {
    margin-top: 20px;
    margin-left: 0;
  }
}

/* ── Section padding: match homepage 64px standard ── */
@media (max-width: 900px) {
  .ks-hero {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .kiwisaver-page .feature-section {
    padding: 64px 24px !important;
  }
  .kiwisaver-page .ks-audience-section {
    padding-top: 43px !important;
    padding-bottom: 54px !important;
  }
  .kiwisaver-page .sub-page-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .kiwisaver-page .sub-page-closing-cta {
    padding: 72px 24px 80px !important;
  }
}

@media (max-width: 600px) {
  .ks-hero {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .kiwisaver-page .feature-section {
    padding: 52px 20px !important;
  }
  .kiwisaver-page .ks-audience-section {
    padding-top: 35px !important;
    padding-bottom: 44px !important;
  }
  .kiwisaver-page .sub-page-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ── Internal ks-capture-grid spacing on mobile ── */
@media (max-width: 960px) {
  /* Space between "accurate modelling and advice" → screenshot */
  .ks-capture-image-cell {
    padding-top: 44px !important;
  }
  /* Space between screenshot → "Model multiple scenarios" */
  .ks-capture-text-bottom {
    padding-top: 48px !important;
  }
  /* Space between paragraph → buttons */
  .ks-capture-cta-cell {
    padding-top: 40px !important;
  }
}

/* ── KiwiSaver reverse grid: force single column on mobile ── */
@media (max-width: 960px) {
  .ks-capture-grid.reverse .ks-capture-text-top,
  .ks-capture-grid.reverse .ks-capture-image-cell,
  .ks-capture-grid.reverse .ks-capture-text-bottom,
  .ks-capture-grid.reverse .ks-capture-cta-cell {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ── KiwiSaver reverse grid: force 1-column layout on mobile ── */
@media (max-width: 960px) {
  .ks-capture-grid.reverse {
    grid-template-columns: 1fr !important;
  }
}

/* ── KiwiSaver: equalise ks-capture-grid width — no inner padding, section handles it ── */
@media (max-width: 900px) {
  .kiwisaver-page .feature-section .ks-capture-grid,
  .kiwisaver-page .feature-section .ks-capture-grid.reverse {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── KiwiSaver: 75% wide stacked buttons on mobile ── */
@media (max-width: 900px) {
  .kiwisaver-page .ks-cta-buttons,
  .kiwisaver-page .sub-page-closing-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  .kiwisaver-page .ks-cta-buttons .cta-button,
  .kiwisaver-page .sub-page-closing-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ── KiwiSaver CTA section: match section horizontal padding ── */
@media (max-width: 900px) {
  .kiwisaver-page .sub-page-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ════════════════════════════════════════════════
   TOOLS SUB-PAGES: mobile optimisation pass
   (mortgage-advice-tools, insurance-advice-tools,
    investment-property-modelling)
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Section vertical + horizontal padding */
  .tools-subpage .feature-section {
    padding: 64px 24px !important;
  }

  /* Inner container: no double-padding */
  .tools-subpage .feature-section-inner,
  .tools-subpage .feature-section-inner.reverse {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 !important;
  }

  /* Image fills width */
  .tools-subpage .feature-section-image {
    width: 100% !important;
    flex: none !important;
  }

  /* Heading sizes */
  .tools-subpage .feature-section-content h2 {
    font-size: 22px !important;
  }
  .tools-subpage .feature-section-content h3 {
    font-size: 16px !important;
  }

  /* Closing CTA section */
  .tools-subpage .sub-page-closing-cta {
    padding: 72px 24px 80px !important;
  }
  .tools-subpage .sub-page-closing-cta h2 {
    font-size: 24px !important;
  }

  /* Inner wrapper: match section padding */
  .tools-subpage .sub-page-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* CTA buttons: 75% wide, stacked, centred */
  .tools-subpage .sub-page-closing-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  .tools-subpage .sub-page-closing-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px) {
  .tools-subpage .feature-section {
    padding: 52px 20px !important;
  }
}

/* ── Tools subpages: fix button widths (override 220px global) + ks-cta-buttons ── */
@media (max-width: 900px) {
  /* Mid-page capture buttons */
  .tools-subpage .ks-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .tools-subpage .ks-cta-buttons a,
  .tools-subpage .ks-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Closing CTA buttons — override the global 220px rule */
  .tools-subpage .sub-page-closing-cta-buttons a,
  .tools-subpage .sub-page-closing-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Closing CTA vertical spacing */
  .tools-subpage .sub-page-closing-cta {
    padding-top: 72px !important;
    padding-bottom: 80px !important;
  }
  .tools-subpage .sub-page-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ── Platform page: collapse ks-point-row to single column on mobile ── */
@media (max-width: 900px) {
  .platform-page .ks-point-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .platform-page .ks-point-image {
    width: 100% !important;
  }
  .platform-page .ks-value {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ── Platform page: teal CTA strip — reduce horizontal padding on mobile ── */
@media (max-width: 900px) {
  .platform-page .cta-strip-teal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .platform-page .cta-strip-teal-inner {
    padding: 0 !important;
  }
}

/* ── Platform page: commitment section — full-width copy on mobile ── */
@media (max-width: 900px) {
  .platform-page .platform-commitment {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .platform-page .platform-commitment-inner {
    padding: 0 !important;
  }
  .platform-page .platform-commitment-copy {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .platform-page .platform-commitment-copy p {
    max-width: 100% !important;
  }
}

/* ── Platform page: key features section — fix padding + tile spacing ── */
@media (max-width: 900px) {
  .platform-page .platform-features {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .platform-page .platform-features-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .platform-page .platform-features-grid,
  .platform-page .platform-feature-grid {
    row-gap: 75px !important;
  }
}

/* ════════════════════════════════════════════════
   PLATFORM SUB-PAGES: mobile optimisation pass
   (client-contact-management, compliance-monitoring,
    marketing-segmentation, meetings-ai-support,
    opportunity-pipeline, tasks-workflow)
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Section padding */
  .platform-subpage .feature-section {
    padding: 64px 24px !important;
  }

  /* Inner container: no double-padding */
  .platform-subpage .feature-section-inner,
  .platform-subpage .feature-section-inner.reverse {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 !important;
  }

  /* Image fills width */
  .platform-subpage .feature-section-image {
    width: 100% !important;
    flex: none !important;
  }

  /* Heading sizes */
  .platform-subpage .feature-section-content h2 {
    font-size: 22px !important;
  }
  .platform-subpage .feature-section-content h3 {
    font-size: 16px !important;
  }

  /* Closing CTA section */
  .platform-subpage .sub-page-closing-cta {
    padding: 72px 24px 54px !important;
  }
  .platform-subpage .sub-page-closing-cta h2 {
    font-size: 24px !important;
  }

  /* Inner wrapper: match section padding */
  .platform-subpage .sub-page-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .platform-subpage .sub-page-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* CTA buttons: 75% wide, stacked, centred */
  .platform-subpage .sub-page-closing-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  .platform-subpage .sub-page-closing-cta-buttons a,
  .platform-subpage .sub-page-closing-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px) {
  .platform-subpage .feature-section {
    padding: 52px 20px !important;
  }
}

/* ── Global: reduce How It Works closing CTA bottom padding by 33% ── */
/* Applies to all pages: platform sub-pages, tools sub-pages, kiwisaver */
@media (max-width: 900px) {
  .sub-page-closing-cta {
    padding-bottom: 54px !important;
  }
  .kiwisaver-page .sub-page-closing-cta,
  .tools-subpage .sub-page-closing-cta,
  .platform-subpage .sub-page-closing-cta {
    padding-bottom: 54px !important;
  }
}

/* ── Platform page: lock teal CTA strip to teal on mobile (no color-cycling animation) ── */
@media (max-width: 900px) {
  .platform-page .cta-strip-teal {
    animation: none !important;
    background-color: var(--teal) !important;
  }
}

/* ── Platform page: Key Features tiles — additional 25% row spacing ── */
@media (max-width: 900px) {
  .platform-page .platform-features-grid,
  .platform-page .platform-feature-grid {
    row-gap: 94px !important;
  }
}

/* ── Global: See How It Works — top −25%, bottom +25% across all pages ── */
@media (max-width: 900px) {
  .sub-page-closing-cta,
  .kiwisaver-page .sub-page-closing-cta,
  .tools-subpage .sub-page-closing-cta,
  .platform-subpage .sub-page-closing-cta,
  .platform-page .sub-page-closing-cta {
    padding-top: 54px !important;
    padding-bottom: 68px !important;
  }
}

/* ── Platform page: teal CTA strip — reduce vertical padding 25%, halve button gap ── */
@media (max-width: 900px) {
  .platform-page .cta-strip-teal {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .platform-page .cta-strip-teal-action {
    margin-top: 10px !important;
  }
}

/* ── Platform sub-pages: mid-page ks-cta-buttons → 75% wide, stacked ── */
@media (max-width: 900px) {
  .platform-subpage .ks-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .platform-subpage .ks-cta-buttons a,
  .platform-subpage .ks-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Platform overview closing CTA buttons */
  .platform-page .sub-page-closing-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .platform-page .sub-page-closing-cta-buttons a,
  .platform-page .sub-page-closing-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ── Platform page: teal CTA strip — +33% vertical spacing ── */
@media (max-width: 900px) {
  .platform-page .cta-strip-teal {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ── Platform page: ks-value (numbered points) — mobile fixes ── */
@media (max-width: 900px) {
  /* Remove double horizontal padding — ks-container already provides 24px */
  .platform-page .ks-value {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Stack badge above title so paragraph starts flush left */
  .platform-page .ks-point {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Halve the heading size */
  .platform-page .ks-point-content h2,
  .platform-page .ks-point-content h3 {
    font-size: 15px !important;
  }

  /* Paragraph — no indent, flush left */
  .platform-page .ks-point-content p {
    margin-left: 0 !important;
    text-align: left !important;
  }
}

/* ── Platform sub-pages: equalise ks-capture-grid width — zero inner padding ── */
@media (max-width: 900px) {
  .platform-subpage .feature-section .ks-capture-grid,
  .platform-subpage .feature-section .ks-capture-grid.reverse {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
  }
  .platform-subpage .feature-section .ks-capture-grid > *,
  .platform-subpage .feature-section .ks-capture-grid.reverse > * {
    grid-column: 1 !important;
  }
}

/* ── Platform overview page: intro section padding ── */
@media (max-width: 900px) {
  .platform-page .ks-hero .ks-container,
  .platform-page .ks-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ── Platform page: ks-point title — +33% from 15px ── */
@media (max-width: 900px) {
  .platform-page .ks-point-content h2,
  .platform-page .ks-point-content h3 {
    font-size: 20px !important;
  }
}

/* ── Platform page: ks-point — badge inline with title, paragraph flush left ── */
@media (max-width: 900px) {
  .platform-page .ks-point {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .platform-page .ks-point-content {
    flex: 1 !important;
  }
  /* Pull paragraph left to start at the section edge, not the content indent */
  .platform-page .ks-point-content p {
    margin-left: calc(-36px - 12px) !important;
    width: calc(100% + 36px + 12px) !important;
    box-sizing: border-box !important;
  }
}

/* ── Final override: 75% buttons on all platform + tools + kiwisaver pages ── */
@media (max-width: 900px) {
  body.platform-subpage .sub-page-closing-cta-buttons a,
  body.platform-subpage .sub-page-closing-cta-buttons .cta-button,
  body.tools-subpage .sub-page-closing-cta-buttons a,
  body.tools-subpage .sub-page-closing-cta-buttons .cta-button,
  body.kiwisaver-page .sub-page-closing-cta-buttons a,
  body.kiwisaver-page .sub-page-closing-cta-buttons .cta-button {
    width: 75% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ── Platform page: ks-point paragraph — spacing below title/badge row ── */
@media (max-width: 900px) {
  .platform-page .ks-point-content p {
    margin-top: 12px !important;
  }
}

/* ════════════════════════════════════════════
   PLATFORM PAGE: feature tiles — grey base,
   crisp shadow, white on hover (desktop only)
   ════════════════════════════════════════════ */

/* Grey base + crisp shadow (all viewports) */
.platform-page .platform-features .platform-col {
  background: #eff1f2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.13), 0 1px 2px rgba(0,0,0,0.09) !important;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1),
              box-shadow 320ms cubic-bezier(.22,.61,.36,1),
              background-color 240ms ease !important;
}

/* Desktop hover: turn white, lift, stronger crisp shadow */
@media (min-width: 901px) {
  .platform-page .platform-features .platform-col:hover {
    background: #fff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.10) !important;
  }
}

/* Mobile: lock to grey, suppress hover colour change */
@media (max-width: 900px) {
  .platform-page .platform-features .platform-col,
  .platform-page .platform-features .platform-col:hover {
    background: #eff1f2 !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.13), 0 1px 2px rgba(0,0,0,0.09) !important;
  }
}

/* ── Platform page: ks-point — vertical align badge + title; more paragraph spacing ── */
@media (max-width: 900px) {
  .platform-page .ks-point {
    align-items: center !important;
  }
  .platform-page .ks-point-content p {
    margin-top: 20px !important;
  }
}

/* ── Platform page: ks-point — badge aligns with title only (flex-start, not center) ── */
@media (max-width: 900px) {
  .platform-page .ks-point {
    align-items: flex-start !important;
  }
}

/* ── Platform page: ks-point-num — nudge badge up to optically align with title ── */
@media (max-width: 900px) {
  .platform-page .ks-point-num {
    margin-top: -4px !important;
  }
}

/* ── Platform page: ks-point-num — nudge badge up further ── */
@media (max-width: 900px) {
  .platform-page .ks-point-num {
    margin-top: -8px !important;
  }
}

/* ── Platform page: teal CTA strip — white text always ── */
.platform-page .cta-strip-teal-lead {
  color: #fff !important;
}
.platform-page .cta-strip-teal-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 900px) {
  .platform-page .cta-strip-teal {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
}

/* ── Platform page: feature tiles — increase row-gap 33% on mobile ── */
@media (max-width: 900px) {
  .platform-page .platform-features-grid,
  .platform-page .platform-feature-grid {
    row-gap: 125px !important;
  }
}

/* ── Platform page: teal CTA strip — refined spacing pass ── */
@media (max-width: 900px) {

  /* Grey section above: add bottom padding so gap is grey, not white */
  .platform-page .adiso-modular {
    padding-bottom: 36px !important;
  }

  /* Teal strip: no top margin (use section-above padding instead);
     +33% inner padding (24→32px); −25% bottom margin (48→36px) */
  .platform-page .cta-strip-teal {
    margin-top: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-bottom: 36px !important;
  }

  /* Halve the gap between text and BOOK A DEMO button (10→5px) */
  .platform-page .cta-strip-teal-action {
    margin-top: 5px !important;
  }
}

/* ── Platform page: feature tiles — correct grid class, 125px row gap ── */
@media (max-width: 900px) {
  .platform-page .platform-features .platform-grid {
    row-gap: 125px !important;
  }
}

/* ── Platform page: modular section — double bottom padding on mobile ── */
@media (max-width: 900px) {
  .platform-page .adiso-modular {
    padding-bottom: 72px !important;
  }
}

/* ── Platform page: feature tiles — row-gap −50% ── */
@media (max-width: 900px) {
  .platform-page .platform-features .platform-grid {
    row-gap: 63px !important;
  }
}

/* ── Platform page: modular bottom padding +10% (72→79px) + tile row-gap −33% (63→42px) ── */
@media (max-width: 900px) {
  .platform-page .adiso-modular {
    padding-bottom: 79px !important;
  }
  .platform-page .platform-features .platform-grid {
    row-gap: 42px !important;
  }
}

/* ── Platform page: ks-points-grid — increase row gap 20% on mobile (48→58px) ── */
@media (max-width: 900px) {
  .platform-page .ks-points-grid {
    gap: 58px !important;
  }
}

/* ── Platform page: ks-points-grid — +10% row gap (58→64px) ── */
@media (max-width: 900px) {
  .platform-page .ks-points-grid {
    gap: 64px !important;
  }
}

/* =========================
   Form AJAX states
   ========================= */

/* Honeypot — must be hidden regardless of any form's input reset rules */
input[name="_gotcha"],
.footer-signup input[name="_gotcha"],
.site-footer .footer-signup input[name="_gotcha"],
.demo-form input[name="_gotcha"],
.contact-form input[name="_gotcha"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Inline error message */
.form-error {
  color: #d9534f;
  font-size: 0.85rem;
  margin-top: 0.75rem;
  font-family: "Barlow", sans-serif;
}

/* Modal success state */
.demo-modal-content .form-success {
  padding: 2rem 0 1rem;
  text-align: center;
}

.demo-modal-content .form-success p {
  color: #1a2e2a;
  font-size: 1.05rem;
  font-family: "Barlow", sans-serif;
  line-height: 1.6;
  margin: 0;
}

/* Contact page success state */
.contact-form-success {
  display: flex;
  align-items: center;
  min-height: 200px;
}

.contact-form-success p {
  color: #1a2e2a;
  font-size: 1.05rem;
  font-family: "Barlow", sans-serif;
  line-height: 1.6;
  margin: 0;
}

/* Footer newsletter success state */
.footer-signup-success {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-family: "Barlow", sans-serif;
  letter-spacing: 0.04em;
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}