/* ============================================================
   INTELLIGENTAE V2 — DESIGN SYSTEM (SANS-SERIF EDITION)
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; }

/* ── TOKENS ── */
:root {
  /* Light palette (Default) */
  --ink:         #FFFFFF;
  --ink-mid:     #F8F9FA;
  --ink-soft:    #F0F2F5;
  --white:       #07090D;
  --off-white:   #1A202C;
  --muted:       #4A5568;
  --subtle:      #E2E8F0;
  --accent:      #1C3557;
  --accent-dim:  rgba(28,53,87,0.12);
  --border:      rgba(0,0,0,0.1);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max:         1320px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --theme-transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease;
}

[data-theme="dark"] {
  /* Dark palette */
  --ink:         #07090D;
  --ink-mid:     #0C1018;
  --ink-soft:    #111820;
  --white:       #FFFFFF;
  --off-white:   #E8EAF0;
  --muted:       #6B7A90;
  --subtle:      #2A3345;
  --accent:      #C8A96E;
  --accent-dim:  rgba(200,169,110,0.12);
  --border:      rgba(255,255,255,0.06);
}

/* ── BASE ── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--ink);
  color: var(--off-white);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  transition: var(--theme-transition);
}

*, *::before, *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ── TYPOGRAPHY ── */
h1, h2 {
  font-family: var(--font);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
}

h1 { font-size: clamp(3rem, 6vw, 6.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.4rem); }

p {
  font-size: clamp(0.92rem, 1.3vw, 1rem);
  color: var(--muted);
  line-height: 1.8;
}

/* ── SCROLL REVEAL ── */
.reveal, .reveal-block {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible, .reveal-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  height: 72px;
  display: flex;
  align-items: center;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s;
}

.nav.scrolled {
  background: var(--ink);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-text {
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.3);
  transition: color 0.3s, text-shadow 0.3s;
}

.nav.scrolled .logo-text {
  color: var(--white);
  text-shadow: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.nav-links a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.3);
  transition: color 0.3s, text-shadow 0.3s;
}

.nav-links a:hover { color: #FFFFFF; }

.nav.scrolled .nav-links a {
  color: var(--muted);
  font-weight: 400;
  text-shadow: none;
}

.nav.scrolled .nav-links a:hover { color: var(--white); }

.nav-cta {
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.55rem 1.4rem !important;
  transition: border-color 0.3s, background 0.3s, text-shadow 0.3s !important;
}

.nav.scrolled .nav-cta {
  color: var(--white) !important;
  border-color: var(--border);
}

.nav-cta:hover {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  /* Column, bottom-aligned: hero copy sits above the credibility strip, which holds
     the bottom edge. Previously a single bottom-aligned child, hence the change. */
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transition: transform 12s ease-out;
  will-change: transform;
}

.hero-bg.loaded { transform: scale(1); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,15,28,0.82) 0%,
    rgba(8,15,28,0.55) 28%,
    rgba(8,15,28,0.08) 55%,
    transparent 100%
  );
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(10,18,30,0.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  /* Bottom padding is now the gap to the credibility strip, not to the viewport
     edge, so it is smaller than the original clamp(4rem, 8vh, 7rem). */
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 5vh, 4rem);
}

.hero-eyebrow {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.8rem;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
}

.hero-headline .line {
  display: block;
  font-family: var(--font);
  font-size: clamp(3.2rem, 6.5vw, 7rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.hero-headline .line.accent {
  color: #C9A84C;
  font-weight: 400;
  font-style: italic;
}

.hero-headline .line.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-sub {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 300;
  /* Raised from 0.55 alpha. The replacement support sentence carries four of the
     brief's positioning claims, and at 0.55 it was not readable against the bright
     upper half of the hero photograph. WCAG 2.2 AA is a brief requirement. */
  color: rgba(232,234,240,0.78);
  max-width: 54ch;
  line-height: 1.75;
  margin-bottom: 2.8rem;
}

.hero-actions {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.hero-cta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 1rem 2.4rem;
  transition: border-color 0.35s, background 0.35s, color 0.35s;
}

.hero-cta--primary {
  background: var(--accent);
  border-color: var(--accent);
}

.hero-cta--primary:hover {
  background: var(--accent);
  border-color: #FFFFFF;
  opacity: 0.9;
}

.hero-cta:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* ── HERO CREDIBILITY STRIP ──
   Four proof points along the bottom of the hero. The values are client-signed-off
   verbatim; only their presentation is ours. The band is semi-transparent rather
   than solid so the photograph still reads behind it. */
.hero-proof {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  display: grid;
  /* A zero track floor lets the four columns shrink and the values wrap, rather
     than forcing a minimum width that pushes the page into a horizontal scroll
     just above the 768px breakpoint. The strip drops to two columns below it.
     Reveal animation comes from the shared .reveal class on the element. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  background: rgba(8, 15, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-proof-item {
  padding: clamp(1.1rem, 2.2vh, 1.6rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-proof-item:first-child {
  border-left: none;
  padding-left: 0;
}

.hero-proof-label {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}

.hero-proof-value {
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  font-weight: 300;
  line-height: 1.35;
  color: #FFFFFF;
}

/* Anchored to the bottom of the copy block, which sits directly above the
   credibility strip, so the two can never overlap at any breakpoint. */
.hero-scroll-hint {
  position: absolute;
  bottom: 0.5rem;
  right: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: scrollPulse 2.5s ease-in-out infinite;
}

.scroll-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================================
   MANIFESTO BAND
   ============================================================ */
.manifesto {
  background: var(--ink-mid);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem clamp(1.5rem, 5vw, 4rem);
}

.manifesto-inner {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.manifesto-text {
  font-family: var(--font);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 200;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.manifesto-accent {
  color: var(--off-white);
  font-weight: 300;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}

.panel--dark { background: var(--ink-mid); }

.panel-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  min-height: 500px;
}

.panel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.18;
  transition: opacity 0.5s var(--ease);
}

.panel:hover .panel-image::after { opacity: 0.06; }

.panel-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 6vw, 5.5rem);
  background: var(--ink-soft);
}

.panel--dark .panel-content { background: var(--ink-mid); }

.panel-eyebrow {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.panel-content h2 { margin-bottom: 0; }

.panel-divider {
  width: 36px;
  height: 1px;
  background: var(--accent);
  margin: 2rem 0;
  opacity: 0.55;
}

.panel-content p + p { margin-top: 0.9rem; }

.panel-quote {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 300;
  font-style: italic;
  color: var(--off-white);
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  margin-top: 2.4rem;
  line-height: 1.6;
}

/* Lead variant: the same quote treatment sitting at the TOP of a panel body,
   directly under the divider. The base rule's 2.4rem top margin is tuned for a
   quote that closes a section; here the divider already supplies the gap above,
   so the space is moved below to separate the quote from the body copy. */
.panel-quote--lead {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* Activity blocks */
.activity-block {
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}

.activity-block:last-of-type { border-bottom: none; }

.activity-title {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white) !important;
  margin-bottom: 0.5rem !important;
}

.panel-note {
  font-size: 0.85rem;
  color: var(--subtle);
  font-style: italic;
  margin-top: 1rem;
  line-height: 1.65;
}

/* ============================================================
   SELECTED SITUATIONS
   ============================================================ */
.situations {
  background: var(--ink);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.situations-inner { max-width: 100%; margin: 0 auto; }

.situations-header { margin-bottom: 3.5rem; text-align: center; }

.situations-header h2 { margin-top: 1rem; }

.situations-sub {
  margin-top: 1rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9rem;
  color: var(--muted);
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.activity-card {
  background: var(--ink-soft);
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--border);
  transition: background 0.4s, border-color 0.4s;
}

.activity-card:hover {
  background: var(--ink-mid);
  border-color: var(--accent-dim);
}

.activity-num {
  display: block;
  font-size: 3.2rem;
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.4rem;
  letter-spacing: -0.04em;
  opacity: 0.4;
  transition: opacity 0.4s;
}

.activity-card:hover .activity-num { opacity: 0.7; }

.activity-sector {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white);
  margin-bottom: 1.2rem;
}

.activity-card p {
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  color: var(--muted);
  line-height: 1.8;
}

.activity-card p + p {
  margin-top: 0.9rem;
}

/* ============================================================
   AREAS OF ACTIVITY
   ============================================================ */
.areas {
  background: var(--ink-mid);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}

.areas-inner {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.areas-left p + p { margin-top: 1.1rem; }

.areas-left p {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--off-white);
  line-height: 1.8;
}

.sector-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sector-list li {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--border);
}

.sector-list li:first-child { border-top: 1px solid var(--border); }

.sector-icon {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.15rem;
  flex-shrink: 0;
  width: 24px;
}

.sector-name {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem !important;
  line-height: 1.4 !important;
}

.sector-desc {
  font-size: 0.92rem !important;
  color: var(--off-white) !important;
  line-height: 1.75 !important;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ink) 0%,
    transparent 100%
  );
}

.about-inner {
  position: relative;
  z-index: 2;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
}

.about-content { max-width: 580px; }
.about-content p + p { margin-top: 0.9rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--ink-mid);
  padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}

.contact-inner { max-width: 100%; margin: 0 auto; }

.contact-headline {
  font-family: var(--font);
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  font-weight: 200;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-top: 1.2rem;
  max-width: 26ch;
}

.contact-divider {
  width: 40px;
  height: 1px;
  background: var(--accent);
  margin: 2.6rem 0 1.6rem;
  opacity: 0.6;
}

.contact-note {
  font-size: 0.88rem;
  color: var(--subtle);
  font-style: italic;
  margin-bottom: 2rem;
}

.contact-email {
  display: inline-block;
  font-size: clamp(0.95rem, 1.8vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--off-white);
  border-bottom: 1px solid rgba(200,169,110,0.35);
  padding-bottom: 0.3rem;
  transition: color 0.3s, border-color 0.3s;
}

.contact-email:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--border);
  padding: 2.4rem clamp(1.5rem, 5vw, 4rem);
}

.footer-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.footer-logo {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--off-white);
}

.footer-legal, .footer-copy {
  font-size: 0.7rem;
  color: var(--subtle);
  letter-spacing: 0.04em;
}

/* ============================================================
   PARALLAX
   ============================================================ */
.parallax-img { will-change: background-position; }

/* ============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .panel-image { height: 420px; min-height: 0; }

  .panel--image-left .panel-image { order: -1; }

  .activity-grid { grid-template-columns: 1fr; }

  .areas-inner { grid-template-columns: 1fr; }

  .nav-links { gap: 1.6rem; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--ink);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    z-index: 999;
  }

  .nav-links.open { display: flex; }

  .nav-links a { font-size: 0.9rem; letter-spacing: 0.16em; }

  .hero { height: 100svh; }

  .panel-image { height: 300px; }

  .hero-scroll-hint { display: none; }

  /* Two columns rather than four. The border-left/first-child pairing is rewritten
     for a 2-up grid: every odd item is now a row start. */
  .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-proof-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .hero-proof-item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }

  .contact-headline { max-width: 100%; }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .hero-headline .line { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .manifesto-text { font-size: 1.15rem; }
  .sit-num { font-size: 2.6rem; }
}


/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  flex-shrink: 0;
  margin-left: 0.8rem;
  color: rgba(255,255,255,0.7);
}

.nav.scrolled .theme-toggle {
  border-color: var(--accent-dim);
  color: var(--muted);
}

.theme-toggle:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}

.nav.scrolled .theme-toggle:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s, transform 0.4s;
}

.icon-sun  { display: block; }
.icon-moon { display: none; }

[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* Dark mode mobile nav overlay */
[data-theme="dark"] .nav-links {
  background: rgba(13,17,23,0.98);
}

/* ============================================================
   SHORT VIEWPORTS
   Keys on height, not orientation: a handheld in landscape and a short desktop
   window have the same problem. The hero's 700px floor plus the credibility strip
   is over 1.5 screens on a 430px-tall viewport, which buries the proof points the
   strip exists to surface. Height collapses to content instead.
   ============================================================ */
@media (max-height: 520px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: 96px;
  }

  .hero-headline .line { font-size: clamp(2rem, 7vh, 3.2rem); }
  .hero-scroll-hint { display: none; }
}

/* ============================================================
   REDUCED MOTION
   The reveal system hides elements at opacity:0 and JS adds .visible. A visitor
   who has asked for reduced motion must still see the content, so the hidden
   state is neutralised outright rather than merely shortening the transition.
   Required by the beta brief (WCAG 2.2 AA, respect prefers-reduced-motion).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal-block,
  .hero-headline .line,
  .hero-proof,
  .hero-bg {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   PHOTOGRAPHY
   Moved out of inline style attributes so each image can be offered as WebP with a
   JPEG fallback. The plain url() is declared first and image-set() second: a browser
   that does not understand image-set() discards that declaration and keeps the JPEG,
   which is the fallback mechanism — no @supports needed.

   Paths are relative to this stylesheet, hence ../images.

   The three panel photographs were PNGs carrying a .jpg extension and weighed about
   2MB each. They are now actual JPEGs. Re-encoding and resizing to displayed width
   took the five images the page uses from 7.9MB to 1.4MB, or 815KB where WebP is
   served.
   ============================================================ */
.bg-hero {
  background-image: url('../images/hero-v2.jpg');
  background-image: image-set(url('../images/hero-v2.webp') type('image/webp'),
                              url('../images/hero-v2.jpg') type('image/jpeg'));
}

.bg-platform {
  background-image: url('../images/platform-v2.jpg');
  background-image: image-set(url('../images/platform-v2.webp') type('image/webp'),
                              url('../images/platform-v2.jpg') type('image/jpeg'));
}

.bg-operating-model {
  background-image: url('../images/operating-model.jpg');
  background-image: image-set(url('../images/operating-model.webp') type('image/webp'),
                              url('../images/operating-model.jpg') type('image/jpeg'));
}

.bg-structure {
  background-image: url('../images/structure-v2.jpg');
  background-image: image-set(url('../images/structure-v2.webp') type('image/webp'),
                              url('../images/structure-v2.jpg') type('image/jpeg'));
}

.bg-about {
  background-image: url('../images/about-v2.jpg');
  background-image: image-set(url('../images/about-v2.webp') type('image/webp'),
                              url('../images/about-v2.jpg') type('image/jpeg'));
}