/* ============================================================
   Aukai — aukai.ai homepage
   One stylesheet, built on the brand design tokens. Rebuilt clean
   from the Claude Design reference (Aukai Home v4); no inline styles.
   ============================================================ */

/* ----------------------------------------------------------------
   Tokens (from the Aukai design system: colors + typography)
   ---------------------------------------------------------------- */
:root {
  /* Brand palette */
  --aukai-deep-ocean: #14304A;
  --aukai-white:      #FFFFFF;
  --aukai-pounamu:    #436855;
  --aukai-lagoon:     #5BA8AE;
  --aukai-aurum:      #C29551;
  --aukai-kokowai:    #9B4226;
  --aukai-pahoehoe:   #232830;

  /* Deep Ocean family */
  --ocean-900: #0C2138;
  --ocean-800: #14304A;
  --ocean-700: #1D3F5E;

  /* Slate / ink. Caption tokens darkened to WCAG AA on white and paper-50. */
  --slate-700: #3A4B5C;
  --slate-600: #647486;
  --slate-400: #6A737B;
  --ink-900:   #232830;
  --ink-700:   #3D434C;

  /* Paper / parchment */
  --paper-50:  #FAF8F3;
  --border-warm: #E2DCCF;
  --border-cool: #DCE3E8;

  /* Aurum. --aukai-aurum is the brand gold: kept for large display type, non-
     text accents (rules, borders, backgrounds), and text on dark grounds.
     --aurum-text is the AA-safe gold, used only where aurum sets text on light
     grounds (where the brand gold falls below contrast minimums). */
  --aurum-text: #8D6C3B;
  --aurum-600: #A67C3C;
  --aurum-100: #EFE2CC;

  /* Type families + weights */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', Helvetica, Arial, sans-serif;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(91,168,174,0.18), 0 0 0 1px #5BA8AE;

  /* Layout */
  --wrap: 1296px;
  --gutter: clamp(24px, 5vw, 72px);
  --header-h: 77px;
}

/* ----------------------------------------------------------------
   Base + reset
   ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--aukai-white);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }

/* <picture> wraps content images (WebP + JPEG). Collapse its box so the inner
   <img> is laid out as if it were the direct child of the tile/frame — the
   grid + flex chains size the image, not the inline <picture> element. */
picture { display: contents; }

a { color: var(--aukai-deep-ocean); text-decoration: none; }
a:hover { color: var(--ocean-700); }

/* Every anchor target clears the fixed header. */
section[id], [id].anchor-offset { scroll-margin-top: 82px; }

/* Visible keyboard focus, everywhere. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--aukai-white); color: var(--aukai-deep-ocean);
  padding: 10px 18px; border-radius: 10px;
  font: var(--w-medium) 14px/1 var(--font-sans);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

.wrap { max-width: var(--wrap); margin: 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------
   Shared type roles
   ---------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font: var(--w-medium) 12px/1.2 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-400); margin: 0 0 20px;
}
.eyebrow--on-dark { color: rgba(255,255,255,0.5); }

.h-hero {
  margin: 0; font-family: var(--font-serif); font-weight: var(--w-light);
  font-size: clamp(48px, 6vw, 80px); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--aukai-deep-ocean);
}
.h-section {
  margin: 0 0 12px; font-family: var(--font-serif); font-weight: var(--w-light);
  font-size: clamp(32px, 3.5vw, 44px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--aukai-deep-ocean); text-wrap: pretty;
}
.h-section--on-dark { color: var(--aukai-white); }
.h-problem {
  margin: 0 0 44px; font-family: var(--font-serif); font-weight: var(--w-light);
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--aukai-deep-ocean); text-wrap: pretty;
}
.h-highlight {
  margin: 0 0 44px; font-family: var(--font-serif); font-weight: var(--w-light);
  font-size: clamp(30px, 3.2vw, 40px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--aukai-deep-ocean); max-width: 820px; text-wrap: pretty;
}
.h-closing {
  margin: 0; font-family: var(--font-serif); font-weight: var(--w-light);
  font-size: clamp(40px, 4.6vw, 60px); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--aukai-white); text-wrap: pretty;
}
.h-sub {
  margin: 0 0 6px; font: var(--w-light) 22px/1.3 var(--font-serif); color: var(--ink-900);
}
.lead { margin: 0; font: var(--w-light) 15px/1.6 var(--font-sans); color: var(--slate-600); }
.pull {
  font: var(--w-light) 19px/1.45 var(--font-serif); font-style: italic; color: var(--ink-900);
}

/* ----------------------------------------------------------------
   Section grounds + rhythm
   ---------------------------------------------------------------- */
.section { padding: clamp(56px, 7vw, 96px) var(--gutter); }
.section--white { background: var(--aukai-white); }
.section--paper { background: var(--paper-50); }
.section--paper.section--ruled { border-top: 0.5px solid var(--border-cool); }
.section--ocean { background: var(--aukai-deep-ocean); }
.section--tall { padding: clamp(64px, 8vw, 110px) var(--gutter); }

/* Feature grounds (Deep Ocean with a background image + scrim). The ocean
   ground is set so the section reads correctly even before the image loads. */
.feature { position: relative; overflow: hidden; background: var(--aukai-deep-ocean); }
.feature__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.feature__scrim { position: absolute; inset: 0; }
.feature__inner { position: relative; max-width: var(--wrap); margin: 0 auto; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--w-medium) 15px/1 var(--font-sans); letter-spacing: 0.02em;
  padding: 16px 30px; border-radius: 10px; border: 0.5px solid transparent;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.btn--sm { font-size: 14px; padding: 11px 20px; }
.btn--primary { background: var(--aukai-deep-ocean); color: var(--aukai-white); }
.btn--primary:hover { background: var(--ocean-700); color: var(--aukai-white); }
.btn--secondary { color: var(--aukai-deep-ocean); border-color: var(--border-cool); }
.btn--secondary:hover { background: var(--paper-50); }
.btn--onwhite { background: var(--aukai-white); color: var(--aukai-deep-ocean); }
.btn--onwhite:hover { background: var(--aurum-100); color: var(--aukai-deep-ocean); }
.btn--gold { background: var(--aukai-aurum); color: var(--aukai-deep-ocean); border: none; padding: 17px 34px; }
.btn--gold:hover { background: var(--aurum-600); }

/* ----------------------------------------------------------------
   Model chips + marquee
   ---------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border: 0.5px solid var(--border-cool);
  border-radius: 999px; background: var(--aukai-white);
  font: var(--w-medium) 12px/1 var(--font-sans); letter-spacing: 0.02em;
  color: var(--ink-700); white-space: nowrap;
}
.chip__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--aukai-deep-ocean); flex: none;
}
.chip__mark svg { width: 13px; height: 13px; fill: var(--aukai-white); }
.chip__mark span { font: var(--w-light) 12px/1 var(--font-serif); color: var(--aukai-white); }
.chip--plain { padding: 8px 16px; font-size: 12.5px; }

.marquee { margin-top: 48px; position: relative; overflow: hidden; }
.marquee__track {
  display: flex; gap: 12px; width: max-content;
  animation: aukai-marquee 42s linear infinite;
}
.marquee .chip {
  padding: 8px 18px 8px 8px; font-size: 13px; color: var(--slate-700);
}
.marquee .chip__mark { width: 26px; height: 26px; }
.marquee .chip__mark svg { width: 15px; height: 15px; }
.marquee .chip__mark span { font-size: 13px; }
@keyframes aukai-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------
   Header
   ---------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 20px var(--gutter);
  background: var(--aukai-deep-ocean);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 0.5px solid rgba(255,255,255,0.14);
  transition: background 0.3s ease;
}
.site-header.is-past { background: rgba(12,33,56,0.55); }
.site-header__logo img { height: 24px; }
.site-header nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.hero {
  background: var(--aukai-white);
  padding: calc(var(--header-h) + clamp(64px, 8vw, 110px)) 0 clamp(40px, 4vw, 56px);
  overflow: hidden;
}
.hero__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.hero__rotline {
  margin: 20px 0 0; font-family: var(--font-serif); font-weight: var(--w-light);
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--aukai-deep-ocean);
}
.hero__rotate {
  display: inline-block; color: var(--aurum-text);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero__sub {
  margin: 26px auto 0; max-width: 560px;
  font: var(--w-regular) clamp(17px, 1.6vw, 20px)/1.5 var(--font-serif); color: var(--ink-700);
}
.hero__sub .accent { color: var(--aurum-text); }
.hero__cta { display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* ----------------------------------------------------------------
   Output wall (mosaic)
   ---------------------------------------------------------------- */
.wall { padding: clamp(32px, 4vw, 64px) var(--gutter) clamp(56px, 7vw, 96px); }
.wall__head { text-align: center; margin-bottom: 40px; }
.wall__head .eyebrow { margin-bottom: 14px; }
.wall__head p { margin: 0; font: var(--w-light) 16px/1.5 var(--font-sans); color: var(--slate-600); }
.wall__head .fine { margin-top: 8px; font-size: 13px; color: var(--slate-400); }

.mosaic {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  grid-auto-flow: dense; gap: 20px;
}
.tile { display: flex; flex-direction: column; }
.tile--feature { grid-column: span 2; grid-row: span 2; }
.tile__frame {
  position: relative; flex: 1; display: flex; overflow: hidden;
  border-radius: 10px; border: 0.5px solid var(--border-cool);
}
/* The <picture> around content images must behave as the flex item the bare
   <img> used to be — display:contents breaks the img's width-constrained aspect
   sizing (it falls back to natural height), so give picture a real flex box. */
.tile__frame picture { display: flex; flex: 1; min-width: 0; }
.tile__frame img, .tile__frame video {
  /* height:auto lets the width/height attributes drive a width-constrained
     aspect box (matching the design's bare-img packing); object-fit:cover then
     fills when the shared grid row is taller than the media. */
  width: 100%; height: auto; flex: 1; min-width: 0; min-height: 280px; object-fit: cover;
}
.tile--feature .tile__frame img, .tile--feature .tile__frame video { min-height: 320px; }
.tile__caption {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 0;
}
.tile__caption .k { font: var(--w-medium) 12px/1.3 var(--font-sans); letter-spacing: 0.02em; color: var(--ink-700); }
.tile__caption .v { font: var(--w-light) 12px/1.3 var(--font-sans); color: var(--slate-400); }

/* Text-card tiles inside the wall */
.tile__card {
  flex: 1; border: 0.5px solid var(--border-cool); border-radius: 10px; padding: 26px;
  display: flex; flex-direction: column;
}
.tile__card--paper { background: var(--paper-50); justify-content: space-between; gap: 18px; }
.tile__card--white { background: var(--aukai-white); }
.tile__quote { margin: 0; font: var(--w-light) 19px/1.45 var(--font-serif); font-style: italic; color: var(--ink-900); }
.tile__meta { border-top: 0.5px solid var(--border-warm); padding-top: 14px; }
.tile__meta span { font: var(--w-light) 12.5px/1.4 var(--font-sans); color: var(--slate-600); }
.card-label {
  font: var(--w-medium) 11px/1.3 var(--font-sans); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate-400); margin-bottom: 16px;
}
.card-rows { display: flex; flex-direction: column; }
.card-rows .row {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-top: 0.5px solid var(--border-cool);
}
.card-rows .row .a { font: var(--w-light) 14px/1.4 var(--font-sans); color: var(--ink-900); }
.card-rows .row .b { font: var(--w-light) 13px/1.4 var(--font-sans); color: var(--slate-400); }
.card-copy { margin: 0; font: var(--w-light) 15px/1.55 var(--font-sans); color: var(--ink-900); }
.card-foot { display: flex; justify-content: space-between; gap: 16px; border-top: 0.5px solid var(--border-warm); padding-top: 14px; }
.card-foot .note { font: var(--w-light) 12.5px/1.4 var(--font-sans); color: var(--slate-600); }
.card-foot .tag { font: var(--w-medium) 12.5px/1.4 var(--font-sans); color: var(--aukai-pounamu); }

/* Scaled-formats tile */
.formats { display: grid; grid-template-columns: 2fr 1.1fr; gap: 10px; align-items: end; flex: 1; }
.formats__col { display: grid; gap: 10px; }
.formats .fr { border-radius: 10px; overflow: hidden; border: 0.5px solid var(--border-cool); }
.formats .fr img { width: 100%; object-fit: cover; }

/* ----------------------------------------------------------------
   Proof
   ---------------------------------------------------------------- */
.prose { margin: 0 0 40px; font: var(--w-light) 15px/1.6 var(--font-sans); color: var(--slate-600); max-width: 640px; }
/* Headline and its setup copy read as one row, the copy centering on the three
   headline lines. The trailing space is a step up from the 40px .prose margin it
   replaces, so "Proven globally." below reads as a section-internal break rather
   than a continuation of the copy — while staying under the section's own
   clamp(56px,7vw,96px) padding, which has to remain the largest gap in play. */
.proof__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
  margin-bottom: clamp(56px, 6vw, 80px);
}
.proof__head > .h-problem { margin-bottom: 0; }
/* The same quiet card the wall's text tiles use — white surface, hairline, token
   radius, the tile's own 26px padding — here lifting off the paper ground. Values
   are mirrored rather than shared: .tile__card carries wall-specific flex sizing
   this must not inherit. The founders name-story card takes the same treatment,
   so the two share this rule. */
.proof__card, .founders__card {
  background: var(--aukai-white); border: 0.5px solid var(--border-cool);
  border-radius: 10px; padding: 26px;
}
.proof__card > .prose { margin: 0; }
.proof__globally { margin: 0 0 6px; font: var(--w-light) 24px/1.3 var(--font-serif); color: var(--ink-900); }
/* Four fixed columns rather than auto-fit: auto-fit would drop to three and
   leave one tile stranded on its own row. Four, then a clean two-by-two. */
.logo-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 44px;
}
.logo-grid .cell {
  background: var(--aukai-white); border: 0.5px solid var(--border-cool); border-radius: 10px;
  padding: 26px 22px; min-height: 106px;
  display: flex; align-items: center; justify-content: center;
}
/* height:auto with both attributes set keeps the ratio, so a mark that outgrows
   a narrow tile scales down instead of squashing. Centring in an equal-height
   row is what makes the space above and below each mark equal. */
.logo-grid .cell img { opacity: 0.8; max-width: 100%; height: auto; }
.logo-grid .cell .wordmark { font: var(--w-medium) 15px/1 var(--font-sans); letter-spacing: 0.05em; color: var(--slate-700); }
.proof__line { margin: 0 0 44px; font: var(--w-regular) 16px/1.6 var(--font-serif); color: var(--ink-700); }

.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.quote-card {
  background: var(--aukai-white); border: 0.5px solid var(--border-cool);
  border-top: 2px solid var(--aukai-aurum); border-radius: 10px; padding: 30px;
  box-shadow: 0 1px 3px rgba(20,48,74,0.06);
}
.quote-card p { margin: 0 0 18px; font: var(--w-light) 17px/1.55 var(--font-serif); font-style: italic; color: var(--ink-900); }
.quote-card .by { font: var(--w-light) 13px/1.4 var(--font-sans); color: var(--slate-600); }
.quote-card .by strong { font-weight: var(--w-medium); color: var(--ink-900); }

/* ----------------------------------------------------------------
   Numbered list (Transformation, Solution)
   ---------------------------------------------------------------- */
.numlist { border-top: 0.5px solid rgba(255,255,255,0.16); list-style: none; margin: 0; padding: 0; }
.numlist li {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 30px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.16);
}
.numlist .n { font: var(--w-light) 16px/1.5 var(--font-serif); color: var(--aukai-aurum); }
.numlist .n--reef { color: var(--aukai-lagoon); }
.numlist h3 { margin: 0 0 6px; font: var(--w-light) 22px/1.3 var(--font-serif); color: var(--aukai-white); }
.numlist p { margin: 0; font: var(--w-light) 14.5px/1.6 var(--font-sans); color: rgba(255,255,255,0.66); }
.section-intro--italic { margin: 0 0 48px; font: var(--w-light) 20px/1.5 var(--font-serif); font-style: italic; color: rgba(255,255,255,0.8); max-width: 620px; }

/* ----------------------------------------------------------------
   Problem cards
   ---------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.pcard {
  background: var(--aukai-white); border: 0.5px solid var(--border-cool); border-radius: 10px;
  padding: 30px; box-shadow: 0 1px 3px rgba(20,48,74,0.06);
}
.pcard .n { font: var(--w-light) 15px/1 var(--font-serif); color: var(--aurum-text); margin-bottom: 16px; }
.pcard p { margin: 0; font: var(--w-light) 19px/1.5 var(--font-serif); color: var(--ink-900); }

/* ----------------------------------------------------------------
   Capabilities
   ---------------------------------------------------------------- */
.cap-intro { margin: 0 0 48px; font: var(--w-light) 15px/1.6 var(--font-sans); color: var(--slate-600); max-width: 560px; }
.cap-list { border-top: 0.5px solid var(--border-warm); }
.cap-row {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(24px, 4vw, 64px);
  padding: 36px 0; border-bottom: 0.5px solid var(--border-warm);
}
.cap-row h3 { margin: 0 0 10px; font: var(--w-light) 22px/1.3 var(--font-serif); color: var(--ink-900); }
.cap-row p { margin: 0; font: var(--w-light) 13.5px/1.6 var(--font-sans); color: var(--slate-600); }
.cap-chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.cap-close { margin: 44px 0 0; font: var(--w-light) 22px/1.45 var(--font-serif); font-style: italic; color: var(--ink-900); max-width: 560px; text-wrap: pretty; }

/* ----------------------------------------------------------------
   Demo
   ---------------------------------------------------------------- */
.demo__lead { margin: 0 0 20px; font: var(--w-regular) 16px/1.65 var(--font-serif); color: var(--ink-700); max-width: 640px; text-wrap: pretty; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.demo__player {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 0.5px solid var(--border-cool); background: var(--ocean-900);
}
.demo__video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--ocean-900); }
.demo__overlay {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, rgba(12,33,56,0.30), rgba(12,33,56,0.62));
  transition: background 0.2s ease;
}
.demo__overlay:hover { background: linear-gradient(180deg, rgba(12,33,56,0.22), rgba(12,33,56,0.52)); }
.demo__overlay[hidden] { display: none; }
.demo__overlay:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--aukai-lagoon); }
.demo__kicker { position: absolute; left: 20px; top: 18px; font: var(--w-medium) 11px/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.demo__playbtn { width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 0.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.demo__overlay:hover .demo__playbtn { background: rgba(255,255,255,0.24); }
.demo__playlabel { font: var(--w-medium) 13px/1 var(--font-sans); letter-spacing: 0.02em; color: var(--aukai-white); }

/* ----------------------------------------------------------------
   Lightbox (output-wall viewer)
   ---------------------------------------------------------------- */
.tile__frame img, .tile__frame video { cursor: pointer; transition: opacity 0.2s ease; }
.tile__frame img:hover, .tile__frame video:hover { opacity: 0.92; }
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(12,33,56,0.94);
}
.lightbox.is-open { display: flex; }
.lightbox__stage { display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 82vh; }
.lightbox__img, .lightbox__vid { max-width: 90vw; max-height: 82vh; object-fit: contain; display: block; }
.lightbox__vid[hidden], .lightbox__img[hidden] { display: none; }
.lightbox__cap { margin: 16px 0 0; max-width: 90vw; padding: 0 16px; text-align: center; font: var(--w-light) 14px/1.5 var(--font-sans); color: rgba(255,255,255,0.66); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: none; color: #fff;
  font-family: var(--font-serif); font-weight: var(--w-light); line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color 0.2s ease;
}
.lightbox__close { top: clamp(16px,3vw,28px); right: clamp(16px,3vw,28px); font-size: 34px; }
.lightbox__prev { left: clamp(10px,2.5vw,28px); top: 50%; transform: translateY(-50%); font-size: clamp(40px,6vw,68px); }
.lightbox__next { right: clamp(10px,2.5vw,28px); top: 50%; transform: translateY(-50%); font-size: clamp(40px,6vw,68px); }
.lightbox__close:hover, .lightbox__nav:hover { color: var(--aukai-aurum); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* ----------------------------------------------------------------
   Founders
   ---------------------------------------------------------------- */
.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 4vw, 64px); }
.founder { display: flex; gap: 22px; align-items: flex-start; }
.founder__photo { width: 76px; height: 76px; border-radius: 999px; object-fit: cover; border: 2px solid var(--aukai-aurum); flex: none; }
.founder h3 { margin: 0 0 4px; font: var(--w-light) 26px/1.2 var(--font-serif); color: var(--ink-900); }
.founder .title { font: var(--w-medium) 13px/1.4 var(--font-sans); letter-spacing: 0.02em; color: var(--slate-400); margin-bottom: 14px; }
.founder p { margin: 0; font: var(--w-light) 15px/1.6 var(--font-sans); color: var(--slate-600); }
/* The name story sits left of the currents image, which is contained at its
   native aspect (never cropped) — hence height:auto against the width/height
   attributes, rather than a fixed frame that would crop. */
.founders__note {
  border-top: 0.5px solid var(--border-warm); margin-top: 44px; padding-top: 30px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.founders__note p { margin: 0; font: var(--w-regular) 17px/1.65 var(--font-serif); color: var(--ink-700); max-width: 680px; text-wrap: pretty; }
/* Give <picture> a real box so it — not its <source>, which display:contents
   would otherwise promote into a grid item of its own — takes the media column. */
.founders__note picture { display: block; min-width: 0; }
/* Rotator frame. Every master is 3:2, so the frame is 3:2 and object-fit: cover
   is a no-op on all but the two 1535px-wide star compasses, which lose a
   sub-pixel edge. Frames stack, so the incoming one can crossfade over the
   outgoing one; the first is in the markup and stands alone without JS. */
.founders__media {
  position: relative; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden;
}
.founders__media-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ----------------------------------------------------------------
   Position
   ---------------------------------------------------------------- */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-bottom: 16px; }
.pos-card { background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 26px; }
.pos-card h3 { margin: 0 0 10px; font: var(--w-medium) 15px/1.3 var(--font-sans); color: var(--aukai-white); }
.pos-card p { margin: 0; font: var(--w-light) 14px/1.6 var(--font-sans); color: rgba(255,255,255,0.66); }
.pos-band { background: rgba(194,149,81,0.08); border: 1px solid var(--aukai-aurum); border-radius: 10px; padding: 30px; margin-bottom: 44px; }
.pos-band .eyebrow { color: var(--aukai-aurum); margin-bottom: 12px; }
.pos-band h3 { margin: 0 0 8px; font: var(--w-light) 24px/1.3 var(--font-serif); color: var(--aukai-white); }
.pos-band p { margin: 0; font: var(--w-light) 14.5px/1.6 var(--font-sans); color: rgba(255,255,255,0.66); }
.pos-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; border-top: 0.5px solid rgba(255,255,255,0.16); padding-top: 32px; }
.pos-foot p { margin: 0; font: var(--w-regular) 18px/1.6 var(--font-serif); color: rgba(255,255,255,0.9); max-width: 480px; text-wrap: pretty; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--ondark { padding: 8px 16px; border: 0.5px solid rgba(255,255,255,0.3); border-radius: 999px; background: none; font: var(--w-medium) 12.5px/1 var(--font-sans); letter-spacing: 0.02em; color: rgba(255,255,255,0.85); }

/* ----------------------------------------------------------------
   Highlight (four pillars)
   ---------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.pillar { background: var(--aukai-white); border: 0.5px solid var(--border-cool); border-radius: 10px; padding: 28px; box-shadow: 0 1px 3px rgba(20,48,74,0.06); }
.pillar h3 { margin: 0 0 8px; font: var(--w-light) 20px/1.3 var(--font-serif); color: var(--ink-900); }
.pillar p { margin: 0; font: var(--w-light) 14px/1.6 var(--font-sans); color: var(--slate-600); }

/* ----------------------------------------------------------------
   Closing + demo form
   ---------------------------------------------------------------- */
.closing { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.closing__grid {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.closing__intro p { margin: 22px 0 0; font: var(--w-light) 16px/1.6 var(--font-sans); color: rgba(255,255,255,0.66); max-width: 520px; text-wrap: pretty; }
.form { display: flex; flex-direction: column; gap: 16px; }
/* The confirmation swap sets form.hidden. Without this, `display: flex` above
   ties the UA `[hidden] { display: none }` rule on specificity (0,1,0) and wins
   as author CSS — so the form stays on screen, button stuck on "Sending…",
   under the confirmation. Same guard as .demo__overlay[hidden]. */
.form[hidden] { display: none; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font: var(--w-medium) 12px/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.field input, .field textarea {
  background: rgba(255,255,255,0.07); border: 0.5px solid rgba(255,255,255,0.3); border-radius: 10px;
  padding: 13px 16px; font: var(--w-light) 15px/1.3 var(--font-sans); color: var(--aukai-white);
}
.field textarea { line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--aukai-lagoon); box-shadow: 0 0 0 3px rgba(91,168,174,0.18); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.4); }
.form__fine { margin: 14px 0 0; font: var(--w-light) 12.5px/1.5 var(--font-sans); color: rgba(255,255,255,0.5); }
.form__fine a { color: rgba(255,255,255,0.7); border-bottom: 1px solid var(--aukai-aurum); padding-bottom: 1px; }
.form__fine a:hover { color: var(--aukai-white); }
.form__error { margin: 4px 0 0; font: var(--w-medium) 12.5px/1.4 var(--font-sans); color: #F0C27A; }
.form__error[hidden] { display: none; }
/* Honeypot: visually and interaction hidden, still submitted if a bot fills it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-confirm { margin: 0; font: var(--w-light) clamp(22px, 2.2vw, 28px)/1.5 var(--font-serif); color: var(--aukai-white); text-wrap: pretty; }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.site-footer {
  background: var(--ocean-900); padding: 40px var(--gutter);
  border-top: 0.5px solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
}
.site-footer__mark img { height: 24px; opacity: 0.9; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.5vw, 32px); font: var(--w-light) 13px/1 var(--font-sans); }
.site-footer nav a, .site-footer .cookie-prefs {
  color: rgba(255,255,255,0.55); background: none; border: 0; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
}
.site-footer nav a:hover, .site-footer .cookie-prefs:hover { color: rgba(255,255,255,0.9); }
.site-footer__copy { font: var(--w-light) 13px/1 var(--font-sans); color: rgba(255,255,255,0.55); }

/* ----------------------------------------------------------------
   Reveal-on-scroll (progressive; base state visible without JS)
   ---------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0.22,0.61,0.36,1), transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .cap-row { grid-template-columns: 1fr; gap: 16px; }
  /* Below this the four tiles are too narrow to hold the Volvo wordmark at size;
     go two-by-two rather than let it shrink away. */
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Text above image; below this the text column is too narrow to set 17px serif. */
  .founders__note { grid-template-columns: 1fr; }
  /* Headline, then copy beneath it. */
  .proof__head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tile--feature { grid-column: auto; grid-row: auto; }
  .formats { grid-template-columns: 1fr; }

  /* Phone reshuffle. The DOM order separates the seven text cards at the 4-, 3-
     and 2-column layouts, but no single order can also separate them at one and
     two narrow columns — so below this breakpoint two text cards (the 4th and
     10th tiles) drop back two places each, landing the seven on gaps of >=3 —
     the minimum that clears both one column (no gap of 1) and two columns (no
     gap of 2). `order` sorts into bands, DOM order within a band, giving:
       1 2 T3 5 6 | T4 7 8 T9 11 12 | T10 13 14 T15 ...
     VISUAL ORDER THEREFORE DIVERGES FROM DOM ORDER HERE. Only text cards move,
     and the lightbox collects .tile__frame media (never text cards) in DOM
     order, so its prev/next still tracks what a phone visitor sees. Any future
     tile added or reordered invalidates these nth-child indices — re-check that
     no two .tile__card tiles touch at 4/3/2/1 columns before shipping. */
  .mosaic > .tile:nth-child(4),
  .mosaic > .tile:nth-child(n+7):nth-child(-n+9),
  .mosaic > .tile:nth-child(11),
  .mosaic > .tile:nth-child(12) { order: 1; }
  .mosaic > .tile:nth-child(10),
  .mosaic > .tile:nth-child(n+13) { order: 2; }
}

/* ----------------------------------------------------------------
   Reduced motion: rotator static on "brand", marquee static,
   films show posters, no reveal transitions.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}