/* ============================================================
   Aotearium Ltd — company site

   Five modules: 01 Vision · 02 Mission · 03 Solutions ·
                 04 Company · 05 Contact

   WHAT TIES THEM TOGETHER
   - one typeface (Inter) at every size; hierarchy comes from
     weight, size and letter-spacing, never from a second family
   - one accent colour (the LoyalStash green)
   - the same hairline eyebrow opens every module
   - the same container, the same left edge, the same rhythm

   WHAT SEPARATES THEM
   - background:   tinted → paper → tinted → paper → tinted (a strict ABABA;
                   an earlier draft gave Solutions its own near-identical warm
                   grey, which read as a mistake rather than a third ground)
   - type size:    one heading size across all five (40px desktop)
   - content form: bare statement → ruled list → cards →
                   lone statement → single focal link
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand green is shared with LoyalStash — the visual through-line
     between the parent company and the solutions it ships. */
  --brand:        #00514B;
  --brand-soft:   #E8F1EF;
  --brand-line:   #C4DBD6;
  --brand-wash:   #F1F6F4;

  --paper:        #FBFAF7;
  --surface:      #FFFFFF;
  --surface-2:    #F3F1EC;

  --ink:          #0C1A18;
  --ink-2:        #2C3E3B;
  --muted:        #5C6B68;
  --line:         #E5E2DA;

  /* One heading size for all five modules. They are peers in the page
     structure, so they are peers in the type scale too — emphasis comes from
     ground, form and space instead. */
  --type-h: clamp(27px, 3.4vw, 40px);

  --radius:       14px;
  --radius-lg:    22px;
  --container:    1200px;

  --shadow-sm:    0 1px 2px rgba(12, 26, 24, .05);
  --shadow-md:    0 12px 32px -12px rgba(12, 26, 24, .16);

  --ease:         cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:      #4FB8A9;
    --brand-soft: #122926;
    --brand-line: #1F3D38;
    --brand-wash: #0D1B19;

    --paper:      #0A1312;
    --surface:    #101D1B;
    --surface-2:  #101A18;

    --ink:        #E9F0EE;
    --ink-2:      #C3D2CF;
    --muted:      #93A5A1;
    --line:       #1E302D;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:  0 14px 34px -14px rgba(0, 0, 0, .6);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }

/* One family — hierarchy by weight and tracking. */
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
dl, dd, dt { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 500;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

/* Every module shares this rhythm — the connective tissue.
   Kept tight on purpose. Two things to remember when touching this:
   1. The modules are already separated by a change of ground and a hairline
      border, so the padding does not have to carry the separation on its own.
   2. Every boundary stacks TWO of these values (one module's bottom plus the
      next one's top), so the gap a reader actually sees is double what is
      written here. 72px reads as ~144px between modules. */
.module { padding: clamp(48px, 5.6vw, 72px) 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--brand-wash) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--brand-wash); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--brand);
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-word {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* Five peers at rest. Hover gives affordance; .is-current (set by the
   scrollspy in index.html) shows which module you are reading. There is no
   filled CTA here on purpose — every item is an in-page anchor of the same
   kind, so promoting one to a solid button would promise a conversion the
   page does not have. */
.nav { display: flex; align-items: center; gap: 30px; }
.nav > a {
  position: relative;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 1px;
  transition: color .18s var(--ease);
}
.nav > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s var(--ease);
}
.nav > a:hover { color: var(--ink); }
.nav > a:hover::after { transform: scaleX(1); }

.nav > a.is-current { color: var(--brand); }
.nav > a.is-current::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav > a::after { transition: none; }
}

/* ---------- Mobile menu ---------- */
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: -9px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle-bars {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }
  .nav-toggle-bars i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .24s var(--ease), opacity .16s var(--ease);
  }
  .nav-toggle-bars i:nth-child(1) { top: 0; }
  .nav-toggle-bars i:nth-child(2) { top: 6px; }
  .nav-toggle-bars i:nth-child(3) { top: 12px; }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The panel is only hidden where JS can reveal it again. */
  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 14px;
    background: var(--brand-wash);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease),
                visibility 0s linear .2s;
  }
  .js .site-header[data-nav-open="true"] .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease),
                visibility 0s;
  }

  .nav > a {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav > a:last-child { border-bottom: 0; }
  /* The sliding underline reads as a link indicator in a row, not in a stack. */
  .nav > a::after { display: none; }
  .nav > a.is-current { color: var(--brand); }

  /* No JS: no panel, so let the five links wrap in the header instead. */
  html:not(.js) .nav { flex-wrap: wrap; gap: 10px 18px; }
  html:not(.js) .nav-toggle { display: none; }
}

@media (max-width: 640px) {
  .js .nav { padding-inline: 20px; }
}

/* ---------- The eyebrow — opens all five modules ----------
   A hairline and the label, no numerals: still one shared marker
   across the five modules, without reading as an enumerated list. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--brand-line);
}

/* ---------- Module head: two columns ----------
   Heading left, supporting prose right. Each column keeps a readable measure
   (45-75 characters) on its own, so the full width gets used without ever
   stretching a line of text past the point where it becomes hard to read.

   TOP-aligned, not bottom-aligned. With `end`, whichever column happened to be
   taller decided where the other one started, so the alignment changed from
   module to module — the heading sank whenever the prose ran long. Aligning to
   the top gives every module one shared top edge regardless of content length.
   The eyebrow spans both columns because it labels the whole module. */
.module-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 0 72px;
  align-items: start;
}
.module-head .eyebrow {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .module-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.head-aside > * + * { margin-top: 26px; }
/* Consecutive paragraphs are one argument, so they sit closer than that. */
.head-aside p + p { margin-top: 20px; }

/* ---------- Shared prose ----------
   One style for the supporting text in every module's right column, whether it
   is a single sentence (Vision, Solutions, Company) or a two-paragraph argument
   (Mission). Same slot, same role, so it gets the same size and colour — the
   argument is distinguished by its length, not by shrinking the type. */
.lede,
.section-lede,
.head-aside p {
  font-size: clamp(16px, 1.4vw, 17.5px);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 58ch;
}
.module-head .lede,
.module-head .section-lede,
.module-head .head-aside p { max-width: none; }

/* All five module headings are styled by element, not by a per-module class —
   there is deliberately no .vision-statement / .mission-statement hook, because
   a class that styles nothing is the thing that made these drift apart before. */
.module h1,
.module h2 {
  font-size: var(--type-h);
  letter-spacing: -0.028em;
  line-height: 1.12;
  max-width: 20ch;
  margin-bottom: 0;
}
.module-head h1,
.module-head h2 { max-width: none; }

/* ═══════════ 01 · VISION ═══════════
   Tinted ground, biggest type on the page, nothing boxed. */
.module-vision {
  position: relative;
  background: var(--brand-wash);
  border-bottom: 1px solid var(--line);
  /* Opens the page, so the top is tighter than a between-modules gap — there
     is nothing above it to separate from except the header. */
  padding: clamp(28px, 3.2vw, 40px) 0 clamp(44px, 5vw, 64px);
}

.module-vision .lede { margin-bottom: 34px; }

/* ═══════════ 02 · MISSION ═══════════
   Plain paper, text-led. Commitments are a ruled list, deliberately
   NOT cards — that form is reserved for Solutions. */


.commitments {
  margin-top: 52px;
  max-width: 100%;
  border-top: 1px solid var(--line);
}
/* Same two-column rhythm as .module-head: label left, prose right. */
.commitments li {
  display: grid;
  grid-template-columns: 58px minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 24px 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 900px) {
  .commitments li {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px 24px;
  }
  .commitments h3, .commitments p { grid-column: 2; }
}
@media (max-width: 640px) {
  .commitments li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .commitments h3, .commitments p { grid-column: auto; }
}
.commitment-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 4px;
}
.commitments h3 {
  font-size: 19.5px;
  letter-spacing: -0.015em;
}
.commitments p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
}
@media (max-width: 900px) {
  .commitments h3 { margin-bottom: 8px; }
}

/* ═══════════ 03 · SOLUTIONS ═══════════
   Recessed ground so the white cards lift off it. Object-led. */
/* Same tinted ground as Vision and Contact — positions 1, 3 and 5 of the
   alternation must be identical, or the pattern reads as an accident. */
.module-solutions {
  background: var(--brand-wash);
  border-block: 1px solid var(--line);
}

.solution {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px;
  margin-top: 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.solution:first-of-type { margin-top: 46px; }
.solution:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-md);
}
@media (max-width: 820px) {
  .solution {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px 32px;
  }
}

.solution-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 28px;
}
@media (max-width: 820px) {
  .solution-media { width: 108px; padding: 16px; }
}
.solution-media img { width: 100%; height: auto; }
.solution-media-plain .glyph {
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
  color: var(--brand);
}
@media (max-width: 820px) {
  .solution-media-plain .glyph { font-size: 40px; }
}

.solution-body h3 {
  font-size: clamp(24px, 2.7vw, 30px);
  letter-spacing: -0.028em;
  margin-bottom: 6px;
}
.solution-tagline {
  font-size: 17px;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* problem → solution pairs */
.ps { max-width: 62ch; }
.ps dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}
.ps dd {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
}
.ps dd + dt { margin-top: 18px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 20px;
}
.chips li {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 8px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .18s var(--ease), gap .18s var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; gap: 11px; }

/* ═══════════ 05 · CONTACT ═══════════
   Tinted and centred — bookends the Vision module and closes the page. */
.module-contact {
  background: var(--brand-wash);
  border-top: 1px solid var(--line);
  text-align: center;
}
.module-contact .eyebrow { justify-content: center; }
/* Contact is the one module without the .module-head grid, so its h2 needs the
   spacing the grid's row gap provides everywhere else. */
.module-contact h2 { margin-bottom: 18px; }
.module-contact h2,
.module-contact .section-lede { margin-inline: auto; }

.mailto {
  display: inline-block;
  margin-top: 32px;
  font-size: clamp(23px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 2px solid var(--brand-line);
  padding-bottom: 5px;
  transition: border-color .2s var(--ease);
}
.mailto:hover { border-bottom-color: var(--brand); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 48px 0 56px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.footer-brand span { color: var(--ink); }
.footer-brand .brand-mark { width: 26px; height: 26px; }

.footer-copy {
  margin-left: auto;
  font-size: 14.5px;
  color: var(--muted);
}

.footer-legal {
  flex-basis: 100%;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .footer-copy { margin-left: 0; }
}

/* ---------- Reveal animation (JS-gated, so no-JS renders fully) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: .05s; }
.js .reveal:nth-child(3) { transition-delay: .1s; }
.js .reveal:nth-child(4) { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .module-contact { display: none; }
  body { background: #fff; color: #000; }
  .solution, .commitments li { break-inside: avoid; box-shadow: none; }
}