:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --ink: #0e1014;
  --ink-soft: #444a55;
  --muted: #8a8f99;
  --accent: #6b4ef2;
  --accent-soft: #efeaff;
  --border: #e6e6e2;
  --shadow: 0 12px 40px rgba(14, 16, 20, 0.08);
  --radius: 18px;
  --header-h: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Body is a flex column so the menu bar occupies its own row and the active
   tab panel fills the remaining space below it. This implements rule 3c —
   the top menu bar is excluded from the area the rest of the screen uses,
   so cards/cells never overlap the header. */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Header / Tabs ---------- */
.site-header {
  flex: 0 0 var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

/* Per instruction.md rule 1.b: on wide screens, the logo and tab list
   should roughly align with the page's card column rather than sitting
   flush against the screen edges. The header bar's background still spans
   full width; only the contents are capped to a card-column width. */
.header-inner {
  width: 100%;
  max-width: 1044px;          /* 980px card max-width + 32px padding × 2 */
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-mark {
  height: 40px;
  width: auto;
  display: block;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.tab:hover { color: var(--ink); }

.tab.active {
  background: var(--ink);
  color: #fff;
}

/* ---------- Tab panels ---------- */
/* Each active panel fills the entire remaining viewport below the header,
   becomes a flex column itself so its inner scroller (snap-container for
   Intro, static-page for the rest) can size to that remaining space. */
.tab-panel { display: none; }
.tab-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}

/* Contact uses Zoom Background.png as a single cover image per contact
   rule 1, with a translucent off-white overlay so the white card and ink
   text stay readable regardless of the source image's contrast. News
   used to have a tiled-logo bg (former news rule 2), but it didn't look
   right and was removed — News now falls back to plain `var(--bg)`. */
#panel-contact {
  background:
    linear-gradient(rgba(250, 250, 247, 0.55), rgba(250, 250, 247, 0.55)),
    url("res/Zoom Background (original).png") center / cover no-repeat;
}

/* Static panels (People/Contact) scroll inside their own panel — Intro
   doesn't, because the snap-container is its scroller. */
#panel-people.active,
#panel-contact.active {
  overflow-y: auto;
}

/* ---------- Intro: floating-cells canvas ---------- */
/* Absolutely positioned inside #panel-intro so it fills the panel only —
   it does NOT extend behind the menu bar (rule 3c). */
#cells-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 20% 10%, #f1ecff 0%, transparent 60%),
    radial-gradient(1000px 700px at 85% 85%, #e6f0ff 0%, transparent 55%),
    var(--bg);
}

/* ---------- Intro: snap container ---------- */
.snap-container {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.snap-container::-webkit-scrollbar { width: 0; }
.snap-container { scrollbar-width: none; }

.snap-section {
  /* Explicit calc instead of `height: 100%` — the percentage chain through
     flex containers resolves unevenly in some browsers, which mis-aligns
     scroll-snap stops and lets card N+1 peek up under the menu bar. */
  height: calc(100vh - var(--header-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 56px 64px;
  max-width: 980px;
  width: 100%;
  max-height: calc(100vh - var(--header-h) - 64px);
  overflow-y: auto;
  animation: cardIn 0.45s ease both;
}

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

.headline {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  font-weight: 600;
}

.subheadline {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 720px;
}

.section-title {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  font-weight: 600;
}

.body-copy {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 780px;
}

/* ---------- CTAs ---------- */
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn {
  appearance: none;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
  font-family: inherit;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #25272d; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--ink); }

/* ---------- Section 2: stats ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 8px 0 32px;
}

.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
}

.stat-value {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-value-text {
  font-size: 20px;
  line-height: 1.15;
}

.stat-desc {
  font-size: 13px;
  color: var(--ink-soft);
}

.citations {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 18px;
}

/* Section 2 — PC-mode compaction (per `instruction.md` intro rule 3 added
   2026-05-28: "for the intro page, second card, in PC mode (none-mobile
   mode), i want the text to the top and bottom edge of the cards distance
   to be shorter. so that no scroll bar for the card is needed."). Applies
   only above 820px so the tablet/mobile blocks keep their own compaction. */
@media (min-width: 821px) {
  .problem-card {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .problem-card .section-title { margin-bottom: 16px; }
  .problem-card .stat-row { margin: 4px 0 18px; }
  .problem-card .body-copy { margin-bottom: 12px; }
  .problem-card .citations { margin-top: 10px; }
}

/* ---------- Section 3: pillars ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.pillar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
}

.pillar-title {
  font-size: 15px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pillar p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Section 4: offers ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 16px;
}

.offer-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.offer-card h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.offer-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  flex: 1;
}

.offer-card .btn { align-self: flex-start; }

.offer-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.offer-badge.available {
  background: #e9f7ee;
  color: #1d7a3d;
}

.offer-badge.upcoming {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Section 5: differentiation list ---------- */
.diff-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 14px;
}

.diff-list li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--ink-soft);
}

.diff-list strong { color: var(--ink); }

/* ---------- Section 6: vision ---------- */
.vision-card {
  text-align: center;
  padding: 80px 64px;
}

.vision-text {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 auto 24px;
  max-width: 760px;
}

.vision-tag {
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---------- Static pages (People, News, Contact) ---------- */
.static-page {
  padding: 48px 32px;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.static-page .card { max-height: none; }

.placeholder-note {
  color: var(--muted);
  font-style: italic;
}

/* ---------- Team page ---------- */
.team-page {
  flex-direction: column;
  align-items: stretch;
  /* Override the `justify-content: center` inherited from `.static-page`.
     That rule was meant to horizontally-center a single row child, but in
     this column-direction child it becomes vertical centering, which makes
     overflowing content disappear above the scroll origin. */
  justify-content: flex-start;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.team-section .section-title {
  margin-bottom: 24px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 2px rgba(14, 16, 20, 0.04);
}

.person-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  background: var(--accent-soft);
}

.person-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.person-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}

.person-title {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.person-bio {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}

.person-bio li { margin: 0; }

.person-link {
  margin-top: auto;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.person-link:hover,
.person-link:focus-visible {
  border-bottom-color: var(--accent);
}

/* ---------- News page ---------- */
.news-page {
  flex-direction: column;
  align-items: stretch;
  /* Same fix as `.team-page` — override the inherited `justify-content:
     center` so vertical overflow doesn't get hidden above the scroll top. */
  justify-content: flex-start;
  gap: 24px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.news-heading {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.news-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-card {
  padding: 32px 36px;
  max-width: none;
}

.news-card .section-title {
  margin: 0;
}

/* Section 1 hero — text on the left, O2.png on the right (desktop).
   In mobile mode the layout stacks vertically with the image below the text
   (per `Web barebones.md` Section 1 instruction). */
.hero-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero-text {
  flex: 1 1 0;
  min-width: 0;
}

.hero-text .subheadline {
  margin-bottom: 0;
}

.hero-image {
  flex: 0 0 auto;
  width: 38%;
  max-width: 340px;
  height: auto;
  border-radius: 12px;
  background: var(--accent-soft);
  object-fit: cover;
}

.contact-info {
  display: grid;
  gap: 14px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin-top: 8px;
}

.contact-info a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
  word-break: break-all;
}

.contact-info a:hover,
.contact-info a:focus-visible {
  border-bottom-color: var(--accent);
}

.contact-info .copyright {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .site-header { padding: 0 20px; }
  .card { padding: 36px 28px; }
  .vision-card { padding: 48px 28px; }
  .stat-row, .pillar-grid, .offer-grid { grid-template-columns: 1fr; }
  .tab { padding: 8px 14px; font-size: 13px; }
}

/* ---------- Mobile mode (narrow viewport OR touch device) ----------
   Per instruction.md rule 5: smaller logo and rearranged/compacted card
   content so each Intro card fits the viewport without inner scrolling. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) and (max-width: 820px) {
  :root { --header-h: 60px; }

  .header-inner { padding: 0 14px; }
  .brand-mark { height: 32px; }
  .tabs { padding: 3px; gap: 2px; }
  .tab { padding: 6px 12px; font-size: 12px; }

  .snap-section { padding: 14px; height: calc(100vh - var(--header-h)); }
  .card {
    padding: 22px 20px;
    border-radius: 14px;
    max-height: calc(100vh - var(--header-h) - 28px);
  }

  .headline { font-size: clamp(26px, 7vw, 34px); margin: 0 0 12px; line-height: 1.12; }
  .subheadline { font-size: 14px; margin: 0 0 18px; }
  .section-title { font-size: clamp(20px, 5.6vw, 26px); margin: 0 0 12px; line-height: 1.2; }
  .body-copy { font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
  .citations { font-size: 11px; margin-top: 10px; }

  /* Section 2 stats — compact tile, single-column */
  .stat-row { gap: 8px; margin: 4px 0 14px; }
  .stat { padding: 10px 12px; border-radius: 10px; }
  .stat-value { font-size: 22px; margin-bottom: 2px; }
  .stat-value-text { font-size: 14px; line-height: 1.2; }
  .stat-desc { font-size: 11px; line-height: 1.35; }

  /* Section 3 pillars — single-column, compact */
  .pillar-grid { gap: 8px; margin-top: 12px; }
  .pillar { padding: 12px 14px; border-radius: 10px; }
  .pillar-title { font-size: 13px; margin: 0 0 4px; }
  .pillar p { font-size: 12px; line-height: 1.45; }

  /* Section 4 offers — single-column, compact */
  .offer-grid { gap: 10px; margin-top: 8px; }
  .offer-card { padding: 16px 14px; gap: 8px; border-radius: 12px; }
  .offer-card h3 { font-size: 17px; }
  .offer-card p { font-size: 12px; line-height: 1.45; }
  .offer-badge { font-size: 10px; padding: 4px 8px; letter-spacing: 0.06em; }

  /* Section 5 differentiation list */
  .diff-list { gap: 8px; }
  .diff-list li { padding: 10px 14px; font-size: 13px; border-radius: 8px; }

  /* Section 6 vision */
  .vision-card { padding: 28px 20px; }
  .vision-text { font-size: clamp(18px, 4.6vw, 24px); margin: 0 auto 14px; }
  .vision-tag { font-size: 13px; }

  /* Section 1 hero — stack the O2 image under the text in mobile mode
     (per `Web barebones.md` Section 1: "in mobile view, O2 png should be
     under all text"). Image height capped so the stacked card still fits a
     phone-portrait viewport. */
  .hero-content { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-image { width: 100%; max-width: 100%; max-height: 140px; border-radius: 10px; }

  .cta-row { gap: 8px; }
  .btn { padding: 10px 16px; font-size: 13px; }

  /* Static pages tighten edges */
  .static-page { padding: 24px 16px; }
  .contact-info { font-size: 16px; gap: 10px; }
}