/* ==========================================================
   Lumina. Powered by light.
   Site stylesheet. Brand tokens from the Lumina Brand Guidelines
   and the "Apple-inspired display design" canvas.

   Lumen (#54E6A0) is used on dark grounds only. Lumen Core carries
   buttons, links and the full stop. Nothing is hard-coded that a
   token already carries.
   ========================================================== */

:root {
  /* Greens */
  --lumen: #54E6A0;        /* accent and glow, dark grounds only */
  --lumen-core: #1FC07A;   /* interactive, buttons, links, the full stop */
  --eucalyptus: #0F9D63;   /* icons, large numerals, graphics on light */
  --eucalyptus-deep: #0B7A4C; /* text-weight green on light grounds */
  --canopy: #0E4733;       /* deep full-bleed story sections */
  /* Neutrals */
  --ink: #0B1419;
  --ink-deep: #06130C;     /* label on a Lumen Core fill */
  --paper: #F4F7F4;
  --mist: #EAF1EC;
  --white: #FFFFFF;
  /* Derived text tones */
  --ink-80: rgba(11, 20, 25, 0.80);
  --ink-70: rgba(11, 20, 25, 0.72);
  --ink-60: rgba(11, 20, 25, 0.62);
  --ink-50: rgba(11, 20, 25, 0.55);
  --paper-85: rgba(244, 247, 244, 0.85);
  --paper-80: rgba(244, 247, 244, 0.82);
  --paper-70: rgba(244, 247, 244, 0.72);
  --paper-60: rgba(244, 247, 244, 0.62);
  --paper-40: rgba(244, 247, 244, 0.40);
  --line-dark: rgba(244, 247, 244, 0.14);
  --line-light: rgba(11, 20, 25, 0.10);
  --line-light-strong: rgba(11, 20, 25, 0.14);
  --line-field: rgba(11, 20, 25, 0.46); /* form field boundary, needs 3:1 */
  --error: #973D2A;
  --error-surface: #FFF3EF;
  --error-line: rgba(151, 61, 42, 0.35);

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  --container: 1280px;
  --gutter: clamp(2rem, 6vw, 5rem);
  --band-y: clamp(5rem, 10vw, 8.5rem);
  --radius: 20px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 70px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: var(--eucalyptus-deep); text-decoration: none; }
a:hover { color: var(--canopy); }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(31, 192, 122, 0.32); }
:focus-visible { outline: 3px solid var(--eucalyptus-deep); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--lumen-core); color: var(--ink-deep);
  padding: .6rem 1rem; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 .5em;
}
h1 {
  font-size: clamp(3rem, 6.5vw, 5.8rem);
  line-height: .98;
  letter-spacing: -0.035em;
}
h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
h3 { font-size: 1.22rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; }
.dot { color: var(--eucalyptus-deep); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eucalyptus-deep);
  margin: 0 0 1.4rem;
}
.lead {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  max-width: 32em;
}
.lead--wide { max-width: 36em; }
.sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 1.2rem;
  color: var(--ink-70);
}
.muted { color: var(--ink-70); }
.small { font-size: .92rem; }
.fine { font-size: .88rem; color: var(--ink-60); max-width: 64ch; }
.measure { max-width: 38em; }
.prose { max-width: 62ch; font-size: 1.15rem; line-height: 1.75; color: rgba(11, 20, 25, 0.85); }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container { width: min(100% - var(--gutter), var(--container)); margin-inline: auto; }
.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--mist { background: var(--mist); color: var(--ink); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--canopy { background: var(--canopy); color: var(--paper); }

/* Dark-ground overrides. Lumen appears here and nowhere else. */
.band--ink .eyebrow, .band--canopy .eyebrow { color: var(--lumen); }
.band--ink .dot, .band--canopy .dot { color: var(--lumen-core); }
.band--ink a, .band--canopy a { color: var(--lumen); }
.band--ink a:hover, .band--canopy a:hover { color: var(--paper); }
.band--ink .muted, .band--canopy .muted { color: var(--paper-80); }
.band--ink .sub, .band--canopy .sub { color: var(--paper-80); }
.band--ink .fine, .band--canopy .fine { color: var(--paper-60); }
.band--ink .prose, .band--canopy .prose { color: var(--paper-85); }

/* The focus ring follows the same ground rule as the rest of the palette. */
.band--ink :focus-visible, .band--canopy :focus-visible,
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--lumen); }

/* The section glow sits behind content on dark grounds. */
.band--glow { position: relative; overflow: hidden; }
.band--glow > .container { position: relative; z-index: 1; }
.glow { position: absolute; inset: 0; pointer-events: none; }
.glow--top-right { background: radial-gradient(1000px 600px at 82% 0%, rgba(84, 230, 160, .13), transparent 62%); }
.glow--top-left { background: radial-gradient(1000px 600px at 15% 0%, rgba(84, 230, 160, .12), transparent 62%); }
.glow--bottom { background: radial-gradient(900px 520px at 50% 115%, rgba(84, 230, 160, .15), transparent 65%); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--narrow { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.split--top { align-items: start; }
.section-head { max-width: 44em; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin-bottom: .2em; }
.section-head .lead { margin-bottom: 0; }
.section-head > :last-child { margin-bottom: 0; }
.after-grid { margin-top: 2.5rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 20, 25, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(244, 247, 244, 0.1);
  color: var(--paper);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-height: var(--header-h); padding-block: .7rem;
}
.brand { display: inline-flex; flex: none; }
.brand img { height: 24px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  color: var(--paper-70); font-weight: 500; font-size: .94rem;
  white-space: nowrap; padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--lumen-core); }
.nav .btn { margin-left: .4rem; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-dark);
  color: var(--paper); border-radius: 10px; padding: .55rem .7rem; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .site-header .bar { position: relative; }
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line-dark);
    padding: .5rem 0 1.25rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line-dark); font-size: 1.1rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line-dark); color: var(--lumen); }
  .nav .btn { margin: 1rem 0 0; justify-content: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  padding: 1.05rem 2rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.btn--primary { background: var(--lumen-core); color: var(--ink-deep); }
.btn--primary:hover { background: var(--lumen); color: var(--ink-deep); transform: translateY(-2px); }
/* The dark-ground and nav link colours are more specific than .btn--primary,
   so restate the label colour or it inherits Lumen on a Lumen Core fill. */
.band--ink .btn--primary, .band--canopy .btn--primary, .nav .btn--primary,
.band--ink .btn--primary:hover, .band--canopy .btn--primary:hover, .nav .btn--primary:hover {
  color: var(--ink-deep);
}
.btn--ghost { border-color: var(--line-light-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--eucalyptus-deep); color: var(--eucalyptus-deep); }
.band--ink .btn--ghost, .band--canopy .btn--ghost {
  border-color: rgba(244, 247, 244, 0.3); color: var(--paper);
}
.band--ink .btn--ghost:hover, .band--canopy .btn--ghost:hover {
  border-color: var(--lumen); color: var(--lumen);
}
.btn--small { padding: .6rem 1.25rem; font-size: .92rem; }
.btn svg { width: 16px; height: 16px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 2.2rem; }

.text-link {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.text-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.text-link--sm { font-size: .94rem; }
.text-link--sm svg { width: 15px; height: 15px; }

/* ---------- Hero ---------- */
.hero { padding-block: 0; }
.hero .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(4rem, 7vw, 6rem);
}
.hero h1 {
  font-size: clamp(3.6rem, 8vw, 7rem);
  line-height: .96;
  margin-bottom: 1.6rem;
}
.hero .lead-xl {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--paper-85);
  max-width: 30em;
  margin-bottom: 1.1rem;
}
.hero .lead-xl + .muted { max-width: 34em; color: var(--paper-60); margin-bottom: 0; }

.page-hero { padding-block: clamp(6rem, 11vw, 9rem); }
.page-hero h1 { max-width: 12em; margin-bottom: 1.6rem; }
.page-hero .lead-xl {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--paper-80);
  max-width: 36em;
  margin-bottom: 1.2rem;
}
.page-hero .lead-xl:last-child, .page-hero .muted:last-child { margin-bottom: 0; }
.page-hero .muted { max-width: 38em; color: var(--paper-60); }

/* ---------- Hero power demo ----------
   Two screens side by side. The toggle cuts mains power: the backlit
   screen goes dark, the Lumina display keeps its image. */
/* Capped and centred: on a full-width container the 41/46% screens would
   otherwise balloon to over 1000px tall. */
.power-demo { display: grid; gap: 2.2rem; max-width: 620px; margin-inline: auto; }
.power-screens {
  display: flex; gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: flex-start; justify-content: center;
}
.screen--backlit { width: 41%; }
.screen--lumina { width: 46%; }
.screen-frame {
  position: relative; aspect-ratio: 280 / 560; overflow: hidden;
  border-radius: 16px; background: #05090d;
  border: 1px solid var(--line-dark);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .65);
}
.screen-ad {
  position: absolute; inset: 0;
  background: linear-gradient(130deg, #3b82f6, #8b5cf6 34%, #ec4899 62%, #f59e0b);
  background-size: 300% 300%;
  animation: adshift 7s ease-in-out infinite;
  filter: saturate(1.1) brightness(1.05);
}
.screen-cut {
  position: absolute; inset: 0; background: #04080b;
  opacity: 0; transition: opacity .45s var(--ease);
}
.screen--lumina .screen-frame {
  aspect-ratio: auto; background: none; border: 0; border-radius: 18px;
  box-shadow: 0 40px 90px -26px rgba(0, 0, 0, .7);
}
.screen-caption {
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  margin: 1rem 0 .45rem; color: var(--paper-85);
}
.screen--lumina .screen-caption { color: var(--paper); }
.screen-note { font-size: .85rem; color: rgba(244, 247, 244, .5); margin: .55rem 0 0; }
.screen-note--keeps { color: var(--lumen); }

/* The power meter: bars draw while powered, a flat line when cut. */
.meter { display: flex; gap: 4px; align-items: flex-end; height: 16px; }
.meter span {
  width: 3px; height: 16px; background: rgba(244, 247, 244, .5);
  transform-origin: bottom; animation: drawbar 1.1s ease-in-out infinite;
}
.meter--flat { display: flex; align-items: center; }
.meter--flat span {
  width: 100%; height: 2px; background: rgba(244, 247, 244, .16);
  animation: none;
}
.meter--steady span { background: var(--lumen); }

.badge-off {
  position: absolute; top: 12px; right: 12px;
  background: var(--lumen); color: var(--ink-deep);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  padding: .42rem .85rem; border-radius: 999px;
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
  transform: translateY(6px) scale(.96);
}

.power-control {
  display: flex; align-items: center; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.switch {
  width: 74px; height: 40px; flex: none; position: relative;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lumen-core); transition: background .3s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 4px; left: 38px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper); transition: left .3s var(--ease);
}
.switch[aria-pressed="true"] { background: rgba(244, 247, 244, .16); }
.switch[aria-pressed="true"]::after { left: 4px; }
.power-label { font-size: .95rem; color: var(--paper-70); }
.power-label strong { font-family: var(--font-display); font-weight: 600; color: var(--paper); }

/* Power cut. Driven by JS on the section. */
.is-cut .screen-cut { opacity: 1; }
.is-cut .badge-off { opacity: 1; transform: none; }
.is-cut .hero-scrim { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; background: rgba(3, 7, 9, .58);
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}

@media (max-width: 560px) {
  .power-screens { gap: 1rem; }
  .power-control { justify-content: flex-start; }
  .power-label { white-space: normal; }
}

/* The hero product shot. The real product on a clean white ground, as the
   design brief requires. No invented rooms, no composited installs. */
.display-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  width: min(100%, 420px);
  margin-inline: auto;
}
.display-card img { width: 100%; border-radius: 8px; }
.hero-visual { position: relative; display: grid; place-items: center; }
.hero-visual::before {
  content: ""; position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(84, 230, 160, .18),
              rgba(84, 230, 160, .05) 55%, transparent 72%);
  filter: blur(8px); pointer-events: none;
}

/* The power demo on a light ground. It lives in "The shift" (Paper), so the
   dark-ground tones above have to be restated for ink on paper. */
.band--paper .screen-caption { color: var(--ink); }
.band--paper .screen-note { color: var(--ink-60); }
.band--paper .screen-note--keeps { color: var(--eucalyptus-deep); }
.band--paper .meter span { background: rgba(11, 20, 25, .45); }
.band--paper .meter--flat span { background: rgba(11, 20, 25, .14); }
.band--paper .meter--steady span { background: var(--eucalyptus); }
.band--paper .power-label { color: var(--ink-70); }
.band--paper .power-label strong { color: var(--ink); }
.band--paper .switch[aria-pressed="true"] { background: rgba(11, 20, 25, .18); }
.band--paper .badge-off { background: var(--lumen-core); }
.band--paper .screen-frame { border-color: rgba(11, 20, 25, .12); }

/* CTA on a light ground. The brief puts the invitation on Mist. */
.cta--light h2 { color: var(--ink); }
.cta--light .lead { color: var(--ink-70); }

/* ---------- Feature rows and cards ---------- */
.feature-list { display: grid; gap: 1.1rem; }
.feature {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line-light);
  border-radius: var(--radius); padding: 1.6rem 1.7rem;
}
.feature .leaf { width: 26px; height: 26px; flex: none; color: var(--eucalyptus); margin-top: .15rem; }
.feature h3 { margin: 0 0 .35rem; }
.feature p { margin: 0; color: var(--ink-70); font-size: .98rem; }

.card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  display: flex; flex-direction: column; gap: .55rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(11, 20, 25, .28); }
.card h3 { font-weight: 600; font-size: 1.2rem; margin: 0; }
.card p { margin: 0; font-size: .94rem; color: var(--ink-70); }
.card .shine { font-size: .88rem; color: var(--ink-60); }
.card .shine strong { color: var(--ink); font-weight: 600; }
.card .text-link { margin-top: auto; padding-top: .5rem; }
.card--panel {
  border: 1px solid var(--line-light); padding: 1.7rem 1.8rem;
  gap: .6rem;
}
.card--panel:hover { transform: none; box-shadow: none; }
.card--panel h3 { font-size: 1.3rem; }
.card--panel p { font-size: .98rem; color: var(--ink-80); }
.card--stat {
  border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem); gap: 0;
}
.card--stat:hover { transform: none; box-shadow: none; }
.card--stat h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 500;
  line-height: 1.15; margin: 0 0 .8rem;
}
.card--stat p { font-size: 1.0625rem; }
/* The two sustainability models lead the range section. */
.card--lead { gap: .5rem; }
.card--lead h3 { font-size: 1.35rem; }
.card--lead .text-link { margin-top: 1.2rem; }

/* Lumen is allowed to glow here: dark ground only. */
.hero .sub { color: var(--lumen); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.1rem;
}
.card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.card-grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 1.2rem; }

/* Comparison pair. The Lumina side sits on canopy. */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.2rem; margin-top: 2.5rem;
}
.compare > div { background: var(--white); border-radius: var(--radius); padding: 1.8rem 1.7rem; }
.compare h3 { font-size: 1.25rem; margin: 0 0 .9rem; }
.compare p { margin: 0 0 .7rem; color: var(--ink-70); font-size: .97rem; }
.compare p:last-child { margin-bottom: 0; }
.compare .is-lumina { background: var(--canopy); color: var(--paper); }
.compare .is-lumina p { color: var(--paper-80); }

/* Proof points: three rules under a heading. */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(4rem, 8vw, 6.5rem);
}
.proof > div { border-top: 2px solid var(--line-light-strong); padding-top: 1.5rem; }
.proof h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; margin: 0 0 .5rem; }
.proof p { margin: 0; color: var(--ink-70); }

/* Context list. Who it is for. */
.contexts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem) clamp(1.8rem, 4vw, 3.5rem);
}
.contexts > div { border-top: 1px solid var(--line-light-strong); padding-top: 1.3rem; }
.contexts h3 { font-size: 1.14rem; margin: 0 0 .4rem; }
.contexts p { margin: 0; font-size: .94rem; color: var(--ink-70); }

/* Numbered steps. */
.steps { display: grid; gap: 1.6rem; }
.step { display: flex; gap: 1.2rem; align-items: flex-start; }
.step .n {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--eucalyptus-deep); border: 1px solid rgba(15, 157, 99, .35);
  border-radius: 999px; width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center; flex: none;
}
.step h3 { margin: 0 0 .3rem; }
.step p { margin: 0; color: var(--ink-70); font-size: .98rem; }

/* Rule-topped list. */
.rule-list { display: grid; gap: 1.2rem; }
.rule-list > div { border-top: 1px solid var(--line-light); padding-top: 1rem; }
.rule-list h3 { font-size: 1.12rem; margin: 0 0 .25rem; }
.rule-list p { margin: 0; font-size: .94rem; color: var(--ink-70); }

/* ---------- Product imagery ---------- */
.product-shot { display: grid; justify-items: center; }
.product-shot img {
  width: min(72%, 340px); border-radius: 18px;
  box-shadow: 0 44px 90px -30px rgba(11, 20, 25, .4);
}
.product-shot--sm img { width: min(70%, 330px); }

/* Image slots. Real artwork drops in here; the dashed box is the brief. */
.slot {
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--line-light-strong); border-radius: var(--radius-sm);
  padding: 1rem; color: var(--ink-60);
  font-family: var(--font-display); font-size: .78rem;
  letter-spacing: .05em; line-height: 1.5;
  background: rgba(11, 20, 25, 0.02);
}
.band--ink .slot, .band--canopy .slot, .card--dark .slot {
  border-color: var(--line-dark); color: var(--paper-60);
  background: rgba(244, 247, 244, 0.03);
}
.slot--mark { height: 150px; margin-bottom: 1.4rem; }

/* The Proudly Supporting lockup. Bush Heritage's rules: minimum 200px, clear
   space equal to the height of the logotype, and never boxed, stretched,
   recoloured or added to. The clear space below is set from the mark's own
   height, so it holds at every viewport. */
.partner-mark {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: clamp(1rem, 2vw, 1.6rem) auto clamp(2.4rem, 5vw, 3.4rem);
}
.slot--photo { height: clamp(320px, 52vh, 560px); border-radius: 0; border-left: 0; border-right: 0; }
.slot--phone { width: min(42%, 240px); aspect-ratio: 9 / 19; border-radius: 30px; }
/* Real screenshots of the Lumina app, in a restrained device frame. */
.phone-shot {
  width: min(42%, 240px); border-radius: 26px; overflow: hidden;
  border: 6px solid var(--ink); background: var(--ink);
  box-shadow: 0 26px 60px -24px rgba(11, 20, 25, .45);
}
.phone-shot img { width: 100%; display: block; }
.phone-shot--offset { margin-top: 2.5rem; }
.slot--phone-offset { margin-top: 2.5rem; }
.slot--badge { width: 150px; height: 48px; border-radius: 10px; }
.app-shots { display: flex; gap: clamp(1.2rem, 2.5vw, 2rem); justify-content: center; align-items: flex-start; }
.store-badges { display: flex; gap: .9rem; flex-wrap: wrap; }

/* Partner panel. Carries the Bush Heritage mark. */
.partner {
  background: var(--white); border: 1px solid var(--line-light);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
}
.partner p { margin: 0; font-size: .92rem; color: var(--ink-60); }
.card--dark.partner {
  background: rgba(244, 247, 244, .06); border-color: var(--line-dark);
}
.card--dark.partner p { color: var(--paper-60); }

/* ---------- Technology light demo ----------
   The slider raises the room light. The backlit screen washes out,
   the Lumina display gains contrast. */
.light-demo {
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -34px rgba(11, 20, 25, .45);
}
.light-stage { position: relative; background: #0A1216; }
.light-room {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #dfe9e2, #c9d8cd);
  transition: opacity .25s linear;
}
.light-screens {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.light-screens > div { width: min(34%, 300px); }
.light-frame {
  position: relative; aspect-ratio: 280 / 500; overflow: hidden;
  border-radius: 12px; background: #05090d; border: 6px solid #131d24;
  transition: box-shadow .25s linear;
}
.light-wash { position: absolute; inset: 0; transition: background .25s linear; }
.light-lumina-frame {
  position: relative; aspect-ratio: 280 / 500; overflow: hidden;
  border-radius: 12px; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .5);
}
.light-lumina-frame img { width: 100%; height: 100%; object-fit: cover; transition: filter .25s linear; }
/* The captions live on the chrome below the stage, on a constant white
   ground. They used to sit over the room wash, whose lightness moves with
   the slider, so no fixed text colour could hold contrast across the range. */
.light-captions {
  display: flex; justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  background: var(--white);
  padding: 1.5rem clamp(1.5rem, 4vw, 3rem) .2rem;
}
.light-captions > div { width: min(34%, 300px); }
.light-label {
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  margin: 0 0 .3rem; color: var(--ink);
}
.light-sublabel { font-size: .85rem; margin: 0; color: var(--ink-60); }
.light-controls {
  background: var(--white); padding: 1.6rem clamp(1.5rem, 4vw, 3rem);
  display: flex; align-items: center; gap: 1.2rem;
}
.light-controls svg { flex: none; }
.light-controls .icon-dim { width: 20px; height: 20px; color: var(--ink-50); }
.light-controls .icon-bright { width: 26px; height: 26px; color: var(--eucalyptus); }
.light-controls input[type="range"] {
  flex: 1; min-width: 0; height: 44px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.light-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--mist); border-radius: 999px;
}
.light-controls input[type="range"]::-webkit-slider-thumb {
  width: 24px; height: 24px; margin-top: -9px;
  appearance: none; -webkit-appearance: none;
  border: 3px solid var(--white); border-radius: 50%;
  background: var(--lumen-core);
  box-shadow: 0 5px 14px -5px rgba(11, 20, 25, .55);
}
.light-controls input[type="range"]::-moz-range-track {
  height: 6px; background: var(--mist); border: 0; border-radius: 999px;
}
.light-controls input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--white); border-radius: 50%;
  background: var(--lumen-core);
  box-shadow: 0 5px 14px -5px rgba(11, 20, 25, .55);
}
.light-value {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--ink); min-width: 7.5em;
}
@media (max-width: 560px) {
  .light-controls { flex-wrap: wrap; }
  .light-controls input[type="range"] { flex: 1 0 100%; order: -1; }
  /* At this width the screens are about 100px each, and a column that narrow
     cannot carry a sentence. Each heading names its own screen, so the captions
     stack full width instead of staying under the frame they describe. */
  .light-captions { flex-direction: column; gap: 1.1rem; padding-bottom: 1rem; }
  .light-captions > div { width: 100%; }
}

/* ---------- Range filter chips ---------- */
.chips { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.chip {
  border: 1px solid rgba(11, 20, 25, .18); background: var(--white); color: var(--ink);
  border-radius: 999px; padding: .55rem 1.15rem;
  font-family: var(--font-display); font-weight: 500; font-size: .9rem; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { border-color: var(--eucalyptus); }
.chip[aria-pressed="true"] {
  background: var(--lumen-core); color: var(--ink-deep); border-color: var(--lumen-core);
}
.filter-status { margin: -1.25rem 0 2.2rem; color: var(--ink-70); font-size: .92rem; }
.model > .card { height: 100%; }

.card-heading {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.18; letter-spacing: -.02em;
}

/* ---------- Founder note ---------- */
.signature {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 1.2rem; color: var(--ink);
}
.signature span {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .95rem; color: var(--ink-60); margin-top: .2rem;
}

/* ---------- CTA band ---------- */
.cta h2 {
  font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1;
  max-width: 14em; margin-bottom: 1.2rem;
}
.cta .lead { color: var(--paper-70); max-width: 34em; margin-bottom: 2.4rem; }
.cta--tall { padding-block: clamp(6rem, 12vw, 10rem); }
.cta--mid { padding-block: clamp(6rem, 12vw, 9rem); }
.cta--mid h2 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); max-width: 15em; }

/* ---------- Forms ---------- */
.form {
  display: grid; gap: 1.3rem;
  background: var(--white); border: 1px solid var(--line-light);
  border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.6rem);
}
.form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.3rem;
}
.field label, .field legend {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: .92rem; margin-bottom: .45rem; padding: 0;
}
.field input, .field textarea {
  width: 100%; background: var(--paper);
  border: 1px solid var(--line-field); border-radius: var(--radius-sm);
  padding: .85rem 1rem; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--eucalyptus-deep);
  box-shadow: 0 0 0 3px rgba(11, 122, 76, .22);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field fieldset { border: 0; padding: 0; margin: 0; }
.field legend { margin-bottom: .6rem; }
.usecase { display: flex; gap: .55rem; flex-wrap: wrap; }
.usecase label {
  /* These are short category labels and must never break. Without nowrap the
     hyphens in "Out-of-home" are treated as break opportunities and it sets
     over three lines, stretching every pill in the row to match. flex: none
     keeps the pill at its content width so the row wraps instead. */
  display: inline-flex; flex: none; align-items: center; gap: .5rem;
  white-space: nowrap;
  background: var(--paper); border: 1px solid var(--line-light-strong);
  border-radius: 999px; padding: .5rem 1rem;
  font-family: var(--font-body); font-weight: 400; font-size: .92rem;
  margin: 0; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.usecase input { accent-color: var(--lumen-core); margin: 0; }
.usecase label:has(input:checked) {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.usecase label:has(input:focus-visible) { outline: 3px solid var(--eucalyptus-deep); outline-offset: 2px; }
.form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.form-actions .btn { font-size: 1.02rem; padding: 1rem 1.9rem; }
.form-note { font-size: .9rem; color: var(--ink-60); }
.usecase-hint { margin: .7rem 0 0; }
/* Optional marker. Nearly every field here is required, so the exception is
   what gets named. Nothing announces "optional" natively, so unlike a required
   marker this one is read out rather than hidden from assistive tech. */
.field .optional { font-weight: 400; font-size: .82rem; color: var(--ink-60); margin-left: .3rem; }
.form-done {
  background: var(--white); border: 1px solid rgba(31, 192, 122, .4);
  border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.6rem);
  animation: popIn .5s var(--ease) both;
}
.form-done h2 { font-size: 1.5rem; margin: 0 0 .6rem; }
.form-done p { margin: 0; color: var(--ink-70); }
.form-done:focus { outline: none; }
.form-error {
  background: var(--error-surface); border: 1px solid var(--error-line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.3rem; color: var(--ink);
}
.form-error h2 { color: var(--error); font-size: 1.5rem; margin: 0 0 .5rem; }
.form-error p { margin: 0 0 1.2rem; color: var(--ink-80); }
.form-error:focus { outline: 3px solid var(--error); outline-offset: 3px; }
.form-error .btn { padding: .75rem 1.3rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: #081014; color: var(--paper-60);
  border-top: 1px solid rgba(244, 247, 244, .08);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
}
.site-footer .top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.site-footer .about { max-width: 36ch; }
.site-footer .about p { margin: 1.2rem 0 0; font-size: .92rem; line-height: 1.6; }
.site-footer h2 {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
  margin: 0 0 1.1rem;
}
.site-footer ul { display: grid; gap: .65rem; }
.site-footer a { color: var(--paper-60); font-size: .95rem; }
.site-footer a:hover { color: var(--lumen); }
.site-footer .ack {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 2rem;
  border-top: 1px solid rgba(244, 247, 244, .08);
  font-size: .88rem; line-height: 1.7; max-width: 72ch;
}
.site-footer .bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; font-size: .85rem;
}
.site-footer .tagline {
  font-family: var(--font-display); font-weight: 500; color: rgba(244, 247, 244, .8);
}

/* ---------- Motion ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes drawbar { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes adshift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero copy rises on load, in sequence. */
.rise { animation: riseIn .9s var(--ease) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }
.rise-4 { animation-delay: .26s; }
.rise-5 { animation-delay: .32s; }
.rise-6 { animation-delay: .35s; }

/* Scroll reveal. JS adds .reveal-ready only when it will observe the
   element, so content is visible with JS off. */
[data-reveal].reveal-ready {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Never let the reveal hide content in a context that cannot scroll.
   Printing a page whose sections are waiting on an intersection would
   otherwise produce blank sheets. */
@media print {
  [data-reveal].reveal-ready { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .screen-ad, .meter span, .form-done { animation: none; }
  [data-reveal].reveal-ready {
    opacity: 1; transform: none; transition: none;
  }
  .btn:hover { transform: none; }
  .badge-off { transform: none; }
  .switch::after { transition: none; }
  .nav a, .btn, .screen-cut, .badge-off, .switch, .hero-scrim,
  .light-room, .light-frame, .light-wash, .light-lumina-frame img,
  .chip, .field input, .field textarea, .usecase label {
    transition-duration: .12s;
  }
}