/* =====================
   RESET & BASE
   ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Light is the default/system-light appearance, matching museas.com */
:root {
  color-scheme: light;
  --bg:          #ffffff;
  --surface:     transparent;
  --border:      rgba(17,33,43,0.12);
  --card-border: transparent;
  --text:        #242424;
  --heading:     #242424;
  --copy:        #535f69;
  --muted:       #666a6e;
  --muted2:      #535f69;
  --accent:      #22313d;
  --pill-bg:     #242424;
  --pill-text:   #ffffff;
  --footer-bg:   #203442;
  --footer-text: #e9edf0;
  --band-tint:   #fff5f9;
  --partner:     #b01a3a;
  --partner-ink: #fff5f9;
  --placeholder: #f2f3f4;
  --card-bg:     #f6f6f7;
  --card-btn:    #ffffff;
  --gilt:        #a8873c;
  --quote:       #414c56;
  --nav-bg:      rgba(255,255,255,0.75);
  --radius:      16px;
  --radius-pill: 100px;
  --nav-h:       80px;
  --max-w:       1500px;
  --gap:         clamp(40px, 8vw, 100px);
  /* 10vw reaches exactly 150px (10% of --max-w) right as the viewport
     hits 1500px, so above that the container and its padding both hold
     steady at "10% of the 1500px design" instead of growing forever the
     way raw `%` padding would (which resolves against the viewport, not
     this container). Locked back to 24px under 600px so mobile is
     unaffected, matching the earlier "desktop/tablet only" padding ask. */
  --pad:         clamp(24px, 10vw, 150px);
  --font-body:   'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:     'Inter Variable', 'Inter', -apple-system, sans-serif;
}
@media (max-width: 600px) {
  :root { --pad: 24px; }
}

/* Dark appearance, matching museas.com under prefers-color-scheme: dark */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:          #141414;
    --surface:     rgba(255,255,255,0.04);
    --border:      rgba(255,255,255,0.08);
    --card-border: rgba(255,255,255,0.08);
    --text:        #ffffff;
    --heading:     #e3e3e3;
    --copy:        #bdc4c9;
    --muted:       #b4bbc2;
    --muted2:      #8b9cad;
    --accent:      #91a9ba;
    --pill-bg:     #e3e3e3;
    --pill-text:   #141414;
    --footer-bg:   #11212b;
    --footer-text: #cdd6db;
    --band-tint:   #2b0d19;
    --partner:     #d75f7c;
    --partner-ink: #2b0d19;
    --placeholder: rgba(255,255,255,0.04);
    --card-bg:     rgba(255,255,255,0.05);
    --card-btn:    rgba(255,255,255,0.09);
    --gilt:        #d3b06a;
    --quote:       #ccd3d8;
    --nav-bg:      rgba(20,20,20,0.75);
  }
}

/* Manual overrides via the nav theme toggle win over system preference,
   regardless of source order, because an attribute selector on :root
   is more specific than a plain :root matched inside a media query. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #ffffff;
  --surface:     transparent;
  --border:      rgba(17,33,43,0.12);
  --card-border: transparent;
  --text:        #242424;
  --heading:     #242424;
  --copy:        #535f69;
  --muted:       #666a6e;
  --muted2:      #535f69;
  --accent:      #22313d;
  --pill-bg:     #242424;
  --pill-text:   #ffffff;
  --footer-bg:   #203442;
  --footer-text: #e9edf0;
  --band-tint:   #fff5f9;
  --partner:     #b01a3a;
  --partner-ink: #fff5f9;
  --placeholder: #f2f3f4;
  --card-bg:     #f6f6f7;
  --card-btn:    #ffffff;
  --gilt:        #a8873c;
  --quote:       #414c56;
  --nav-bg:      rgba(255,255,255,0.75);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #141414;
  --surface:     rgba(255,255,255,0.04);
  --border:      rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.08);
  --text:        #ffffff;
  --heading:     #e3e3e3;
  --copy:        #bdc4c9;
  --muted:       #b4bbc2;
  --muted2:      #8b9cad;
  --accent:      #91a9ba;
  --pill-bg:     #e3e3e3;
  --pill-text:   #141414;
  --footer-bg:   #11212b;
  --footer-text: #cdd6db;
  --band-tint:   #2b0d19;
  --partner:     #d75f7c;
  --partner-ink: #2b0d19;
  --placeholder: rgba(255,255,255,0.04);
  --card-bg:     rgba(255,255,255,0.05);
  --card-btn:    rgba(255,255,255,0.09);
  --gilt:        #d3b06a;
  --quote:       #ccd3d8;
  --nav-bg:      rgba(20,20,20,0.75);
}

html { scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--copy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4, h5 {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2; /* headings must not inherit the body's 1.6 */
  color: var(--heading);
}

/* =====================
   NAV
   ===================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  justify-content: center;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width: 100%;
  max-width: calc(var(--max-w) + 2 * var(--pad));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--pad);
}
.nav-logo { justify-self: start; }
.nav-links { justify-self: center; }
.nav-right { justify-self: end; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
}
/* Logo artwork is black on transparent, so invert to white on dark and
   leave black on light — same technique Astronoma uses for its own logo
   and Apple badges. */
.nav-logo-img { height: 58px; width: auto; display: block; }
@media (prefers-color-scheme: dark) {
  .nav-logo-img { filter: invert(1); }
}
:root[data-theme="light"] .nav-logo-img { filter: none; }
:root[data-theme="dark"] .nav-logo-img { filter: invert(1); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-mobile a[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* Partner pill shows filled while on the partner page */
.btn-partner[aria-current="page"] {
  background: var(--partner);
  color: var(--partner-ink);
}

.nav-right { display: flex; align-items: center; gap: 20px; }

.nav-toggle {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: none;
  align-items: center;
  padding: 8px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s ease;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { display: block; }

/* Icon reflects the effective theme: sun shows when dark is active (click for light) */
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .theme-icon-sun { display: block; }
  .theme-toggle .theme-icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

.nav-mobile {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  left: 0;
  height: calc(100vh - var(--nav-h));
  background: var(--bg);
  z-index: 99;
  display: none;
  flex-direction: column;
  padding: 32px var(--pad);
  gap: 4px;
  overflow-y: auto;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--heading);
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 861px) {
  .nav-mobile { display: none !important; }
}
/* Mobile nav: only the logo, theme toggle, and hamburger stay in the bar —
   text links and the Partner/Download pills move into the menu. */
@media (max-width: 860px) {
  .nav-links,
  .nav-right .btn-download { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 400px) {
  .nav-logo { font-size: 17px; }
}

/* =====================
   BUTTONS
   ===================== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn-pill:hover { transform: translateY(-1px); opacity: 0.92; }

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(24,34,66,0.2);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-download:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (prefers-color-scheme: dark) {
  .btn-download { border-color: rgba(255,255,255,0.22); }
}
:root[data-theme="light"] .btn-download { border-color: rgba(24,34,66,0.2); }
:root[data-theme="dark"] .btn-download { border-color: rgba(255,255,255,0.22); }

/* Partner reuses btn-download's shape but with the brand's own burgundy/rose
   accent (the same hue already used for the partner CTA band elsewhere) —
   !important on the border needed to beat .btn-download's own theme-toggle
   overrides above, which win on specificity otherwise. */
.btn-partner {
  color: var(--partner);
  border-color: var(--partner) !important;
  background: transparent;
}
.btn-partner:hover {
  background: var(--partner);
  color: var(--partner-ink);
  border-color: var(--partner) !important;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  width: fit-content;
}
.link-arrow svg { width: 12px; height: 12px; }

/* =====================
   HERO
   ===================== */
.hero { padding: 64px var(--pad) 0; }
.hero-inner { max-width: var(--max-w); margin: 0 auto; }

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.15;
  max-width: 900px;
}
.hero h1 .dim { color: var(--muted); }

/* Lede + badges sit side by side below the hero video, badges pushed to
   the far edge via space-between (mirrors the reference layout). */
.hero-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(64px, 8vw, 104px);
  margin-bottom: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.hero-lede {
  flex: 1 1 420px;
  max-width: 680px;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.5;
  color: var(--copy);
}

/* The badge column takes the remaining half of the row and centers its
   badges within it (rather than shrink-wrapping against the right edge). */
.hero-badges { display: flex; flex-direction: column; align-items: center; gap: 30px; flex: 1 1 320px; align-self: center; }
@media (max-width: 700px) {
  .hero-info { flex-direction: column; align-items: flex-start; gap: 48px; }
  /* In column direction the row flex-bases (420px/320px) would become
     minimum HEIGHTS, opening a huge void between lede and badges. */
  .hero-lede, .hero-badges { flex: 0 0 auto; }
  .hero-badges { align-items: center; width: 100%; }
}

.hero-media {
  position: relative;
  margin-top: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/8;
  /* Black, not var(--surface): subpixel rounding can leave a hairline
     between the iframe raster and the rounded clip edge, and whatever is
     behind shows through — black matches the video so the seam vanishes. */
  background: #000;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.media-placeholder { background: var(--placeholder); }

/* Video fills hero-media the way the image did (cover-cropped, same
   rounded box). Cover math (container 16:8 vs the video's real 426:240
   native ratio, from Vimeo's oEmbed data) is pre-computed into plain
   width/height/top percentages — deliberately NOT using `aspect-ratio`
   on this absolutely-positioned element, because Safari doesn't reliably
   resolve aspect-ratio + inset + margin:auto on out-of-flow elements
   (verified: Chromium renders it correctly, which is why testing here
   passed while it still broke in a real Safari); plain percentages are
   the maximally-compatible fallback. Also avoids `transform` for
   centering: Safari has a separate, long-standing bug where a
   transformed child can escape a parent's overflow:hidden +
   border-radius clip, which reads as "full screen, ignores the rounded
   corners." If the container ratio or video ratio ever changes, these
   three numbers need recalculating: scale = max(containerRatio/videoRatio, 1),
   height% = scale*100, top% = -(height% - 100)/2. */
.hero-video-fallback { position: absolute; inset: 0; background: #000; z-index: 0; }
.hero-video-iframe {
  position: absolute;
  top: -6.34%;
  /* 1% horizontal overscan: the cover-crop math leaves vertical headroom,
     and overshooting the clip box kills subpixel edge gaps for good. */
  left: -0.5%;
  width: 101%;
  height: 112.68%;
  z-index: 1;
  background: #000;
  border: none;
}

/* Homepage rhythm: image-rich sections get extra vertical breathing room
   (~1.4x the shared --gap), scoped via the body class the build stamps.
   Short, text-only sections (stats, final CTA) get less — adjacent section
   paddings stack, and 1.4x on both sides of a two-line section reads as
   dead space rather than air. */
.page-home .hero { padding-top: 88px; }
.page-home .hero-media { margin-top: 64px; }
.page-home .features-grid {
  padding-top: calc(var(--gap) * 0.9);
  padding-bottom: calc(var(--gap) * 0.6);
}
/* Less on top: the stats band above already draws a hard visual edge */
.page-home .reviews {
  padding-top: calc(var(--gap) * 0.8);
  padding-bottom: calc(var(--gap) * 1.4);
}
.page-home .cta-band { padding: calc(var(--gap) * 1.4) 0; }
.page-home .stats {
  padding-top: calc(var(--gap) * 1.6);
  padding-bottom: calc(var(--gap) * 1.6);
}

/* =====================
   PAGE HEADER (About hub, feature subpages, Collaborate)
   ===================== */
.page-header { padding: 140px var(--pad) 40px; max-width: calc(var(--max-w) + 2 * var(--pad)); margin: 0 auto; }
.page-header .eyebrow {
  font-family: var(--font-ui);
  color: var(--muted2);
  font-size: 17px;
  margin-bottom: 12px;
}
.page-header h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  color: var(--heading);
  line-height: 1;
}
.page-header h2 {
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  color: var(--text);
  margin-top: 8px;
  font-weight: 400;
}
.page-header p.lede {
  margin-top: 28px;
  max-width: 640px;
  font-size: 19px;
  color: var(--copy);
}
.page-header p.lede + p.lede { margin-top: 16px; }

@media (max-width: 700px) {
  .page-header { padding-top: 88px; }
}

/* =====================
   FEATURE CARDS (home + about hub)
   ===================== */
/* Zigzag bento: two-column rows alternating wide/narrow (7:5 then 5:7)
   on a 12-col grid. An odd card out (home's 5th) closes the section
   full-width — with a wider image crop so it doesn't tower. Pure CSS,
   order-driven, no per-card classes needed. */
.features-grid {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--gap) var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.feature-card:nth-child(4n+1) { grid-column: span 7; }
.feature-card:nth-child(4n+2) { grid-column: span 5; }
.feature-card:nth-child(4n+3) { grid-column: span 5; }
.feature-card:nth-child(4n)   { grid-column: span 7; }
.feature-card:last-child:nth-child(odd) { grid-column: span 12; }
.feature-card:last-child:nth-child(odd) .feature-img { aspect-ratio: 21/8; }

@media (max-width: 980px) {
  /* Even two-up on tablet; the odd card still closes full-width */
  .feature-card:nth-child(n) { grid-column: span 6; }
  .feature-card:last-child:nth-child(odd) { grid-column: span 12; }
}
@media (max-width: 640px) {
  .feature-card:nth-child(n),
  .feature-card:last-child:nth-child(odd) { grid-column: span 12; }
  .feature-card:last-child:nth-child(odd) .feature-img { aspect-ratio: 16/9; }
}

.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { transform: translateY(-2px); }

/* "See more" as a soft rounded chip inside the card instead of a bare
   underlined link. */
.feature-card .link-arrow {
  border-bottom: none;
  background: var(--card-btn);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.feature-card .link-arrow:hover {
  background: var(--pill-bg);
  color: var(--pill-text);
  border-color: var(--pill-bg);
}
.feature-card h3 {
  font-size: 22px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-icon { height: 20px; width: auto; opacity: 0.9; }
@media (prefers-color-scheme: dark) {
  .card-icon { filter: invert(1); }
}
:root[data-theme="light"] .card-icon { filter: none; }
:root[data-theme="dark"] .card-icon { filter: invert(1); }
.feature-card p { color: var(--copy); font-size: 17px; flex: 1; }
.feature-img {
  width: calc(100% + 56px);
  margin: -28px -28px 8px;
  max-width: none;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* =====================
   PAGE MEDIA & GALLERIES (about subpages)
   ===================== */
.page-media {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 24px auto 0;
  padding: 0 var(--pad);
}
.page-media img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.gallery-grid {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: 20px var(--pad) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.gallery-grid img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16/9;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-grid img:hover,
.gallery-grid img:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}
/* Section navigator on about subpages: every section as a capsule chip,
   the current page as a filled pill. */
.subpage-nav {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: 56px var(--pad) var(--gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.subnav-label {
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 14px;
}
.subnav-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.subnav-chip:hover { border-color: var(--text); }
.subnav-chip img { height: 15px; width: auto; }
@media (prefers-color-scheme: dark) {
  .subnav-chip img { filter: invert(1); }
}
:root[data-theme="light"] .subnav-chip img { filter: none; }
:root[data-theme="dark"] .subnav-chip img { filter: invert(1); }
.subnav-chip.is-active {
  background: var(--pill-bg);
  color: var(--pill-text);
  border-color: var(--pill-bg);
}
/* Icon contrast flips inside the filled active pill */
.subnav-chip.is-active img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  .subnav-chip.is-active img { filter: none; }
}
:root[data-theme="light"] .subnav-chip.is-active img { filter: invert(1); }
:root[data-theme="dark"] .subnav-chip.is-active img { filter: none; }

/* =====================
   STATS
   ===================== */
/* The portrait ring (not a background fill) marks this section */
.stats {
  position: relative;
  overflow: hidden;
  padding: var(--gap) var(--pad);
  text-align: center;
}
.stats h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 56px;
}
.stats h2, .stats-row { position: relative; z-index: 1; }

/* Artist portraits drifting in the side zones (kept clear of the centered
   text). Decorative: the container is aria-hidden and every img has an
   empty alt. */
.stats-orbs > * {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.9;
  animation: orb-drift 12s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) { .stats-orbs > * { opacity: 0.75; } }
:root[data-theme="light"] .stats-orbs > * { opacity: 0.9; }
:root[data-theme="dark"] .stats-orbs > * { opacity: 0.75; }
@keyframes orb-drift {
  from { transform: translate(0, -8px); }
  to   { transform: translate(6px, 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .stats-orbs > * { animation: none; }
}
/* A ring of portraits around the text: a strip above the heading (1-4),
   the side bands (5-8), and a strip below the numbers (9-13). Center
   positions stay in the top/bottom 20% so they never touch the text. */
.stats-orbs > :nth-child(1)  { width: 120px; height: 120px; left: 6%;   top: 12%;    animation-duration: 13s; }
.stats-orbs > :nth-child(2)  { width: 64px;  height: 64px;  left: 47%;  top: 5%;     animation-duration: 11s; animation-delay: -6s; }
.stats-orbs > :nth-child(3)  { width: 52px;  height: 52px;  right: 30%; top: 10%;    animation-duration: 8s;  animation-delay: -2s; }
.stats-orbs > :nth-child(4)  { width: 110px; height: 110px; right: 5%;  top: 13%;    animation-duration: 14s; animation-delay: -5s; }
.stats-orbs > :nth-child(5)  { width: 84px;  height: 84px;  left: 12%;  top: 44%;    animation-duration: 15s; animation-delay: -9s; }
.stats-orbs > :nth-child(6)  { width: 64px;  height: 64px;  left: 4%;   top: 64%;    animation-duration: 10s; animation-delay: -8s; }
.stats-orbs > :nth-child(7)  { width: 72px;  height: 72px;  right: 12%; top: 42%;    animation-duration: 12s; animation-delay: -4s; }
.stats-orbs > :nth-child(8)  { width: 88px;  height: 88px;  right: 4%;  top: 62%;    animation-duration: 13s; animation-delay: -10s; }
.stats-orbs > :nth-child(9)  { width: 76px;  height: 76px;  left: 21%;  bottom: 7%;  animation-duration: 12s; animation-delay: -1s; }
.stats-orbs > :nth-child(10) { width: 96px;  height: 96px;  left: 51%;  bottom: 5%;  animation-duration: 14s; animation-delay: -3s; }
.stats-orbs > :nth-child(11) { width: 70px;  height: 70px;  right: 17%; bottom: 6%;  animation-duration: 11s; animation-delay: -2s; }
.stats-orbs > :nth-child(12) { width: 44px;  height: 44px;  left: 9%;   bottom: 20%; animation-duration: 10s; animation-delay: -5s; }
.stats-orbs > :nth-child(13) { width: 48px;  height: 48px;  right: 7%;  bottom: 21%; animation-duration: 12s; animation-delay: -8s; }
/* Tablet: thin the ring to ten */
@media (max-width: 1000px) {
  .stats-orbs > :nth-child(2),
  .stats-orbs > :nth-child(12),
  .stats-orbs > :nth-child(13) { display: none; }
}
/* Phones: six, downsized so the corners stay airy */
@media (max-width: 700px) {
  .stats-orbs > :nth-child(3),
  .stats-orbs > :nth-child(5),
  .stats-orbs > :nth-child(7),
  .stats-orbs > :nth-child(10) { display: none; }
  .stats-orbs > :nth-child(1) { width: 76px; height: 76px; }
  .stats-orbs > :nth-child(4) { width: 70px; height: 70px; }
  .stats-orbs > :nth-child(8) { width: 64px; height: 64px; }
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
}
.stat-num {
  font-family: var(--font-ui);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-top: 10px;
}

/* =====================
   REVIEWS / EDITORIAL
   ===================== */
.reviews {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--gap) var(--pad);
}
.reviews-head { text-align: center; margin-bottom: 48px; }
/* Both source SVGs draw their text at the same internal scale (every glyph
   is a `matrix(201.429,0,0,201.429,...)` transform in both files), but each
   viewBox is cropped tightly to its own icon+text bounds — art-lovers.svg's
   two stacked icons make for a taller box (489) than best-spatial.svg's
   apple+laurel mark (421). Sizing both to the same CSS height would spread
   the shorter viewBox over the same pixel span, magnifying its text.
   Scaling each in proportion to its own viewBox height (56/489 = 48/421)
   keeps units-per-pixel equal across both, so the text — not the box —
   comes out the same size. */
.editorial-badge { width: auto; }
.editorial-badge--art-lovers { height: 66px; }
.editorial-badge--best-spatial { height: 57px; }
/* Match the badge artwork to the heading color: invert(x%) remaps the
   SVGs' pure black to x-gray — 14% = #242424, 89% = #e3e3e3. */
.editorial-badge { filter: invert(14%); }
@media (prefers-color-scheme: dark) {
  .editorial-badge { filter: invert(89%); }
}
:root[data-theme="light"] .editorial-badge { filter: invert(14%); }
:root[data-theme="dark"] .editorial-badge { filter: invert(89%); }
/* Laurel + section title above the story cards; leading matches the hero */
.reviews-laurel { display: block; height: 54px; width: auto; margin: 0 auto 24px; }
.reviews-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto 56px;
}
@media (prefers-color-scheme: dark) {
  .reviews-laurel { filter: invert(1); }
}
:root[data-theme="light"] .reviews-laurel { filter: none; }
:root[data-theme="dark"] .reviews-laurel { filter: invert(1); }
.reviews-score {
  font-family: var(--font-ui);
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}
.reviews-stars {
  color: var(--gilt);
  font-size: 34px;
  letter-spacing: 12px;
  margin-top: 12px;
  /* recenter: letter-spacing trails the last star */
  padding-left: 12px;
}
.reviews-count { color: var(--muted); font-size: 17px; margin-top: 10px; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Gallery plaques: quiet card fill, gilded star row, serif quote, and a
   small-caps placard credit — like a museum wall label. */
.review-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.review-stars {
  color: var(--gilt);
  font-size: 17px;
  letter-spacing: 5px;
  margin-bottom: 16px;
}
.review-card blockquote {
  font-family: Georgia, 'Iowan Old Style', 'Palatino', 'Times New Roman', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--quote);
  flex: 1;
}
.review-card figcaption {
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* =====================
   CTA BANDS
   ===================== */
.cta-band {
  background: var(--band-tint);
  padding: var(--gap) 0;
}
.cta-band-inner {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 7vw, 110px);
}
.cta-band h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; }
.cta-band-icon { height: clamp(72px, 9vw, 120px); width: auto; flex-shrink: 0; }
@media (prefers-color-scheme: dark) {
  .cta-band-icon { filter: invert(1); }
}
:root[data-theme="light"] .cta-band-icon { filter: none; }
:root[data-theme="dark"] .cta-band-icon { filter: invert(1); }
.cta-band-right { max-width: 340px; }
.cta-band-right p { font-size: 19px; color: var(--copy); margin-bottom: 22px; }
/* Stack and center once the three-across row gets cramped */
@media (max-width: 800px) {
  .cta-band-inner { flex-direction: column; text-align: center; gap: 28px; }
  .cta-band h3 br { display: none; }
  .cta-band-right { max-width: 420px; }
}

.cta-final {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--gap) var(--pad);
  text-align: center;
}
.cta-final h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 12px; }
.cta-final .cta-sub { color: var(--copy); margin-bottom: 28px; }

/* =====================
   PARTNER / COLLABORATE SECTIONS
   ===================== */
.partner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.partner-stat {
  text-align: center;
  flex: 1 1 220px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 36px 24px;
  font-size: 16px;
  color: var(--copy);
}
.partner-stat-icon {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto 16px;
}
@media (prefers-color-scheme: dark) {
  .partner-stat-icon { filter: invert(1); }
}
:root[data-theme="light"] .partner-stat-icon { filter: none; }
:root[data-theme="dark"] .partner-stat-icon { filter: invert(1); }

/* Decorative row of museum-architecture line drawings above the closing CTA */
.buildings-frieze {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--gap) var(--pad) 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}
/* Mask-rendered so the artwork takes the partner accent in both themes */
.frieze-icon {
  height: clamp(64px, 9vw, 110px);
  background: var(--partner);
  mask: var(--icon) no-repeat center / contain;
  -webkit-mask: var(--icon) no-repeat center / contain;
}

.partner-section {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--gap) var(--pad);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .partner-section { grid-template-columns: 1fr; } }
/* No divider between the intro stat cards and the first section */
.collab-intro + .partner-section { border-top: none; }
.partner-section .eyebrow { font-family: var(--font-ui); color: var(--partner); font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.partner-section h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 16px; }
.partner-section p { color: var(--copy); margin-bottom: 12px; }
.partner-section p:last-child { margin-bottom: 0; }
.partner-section p strong { color: var(--heading); font-weight: 600; }
.watch-btn { margin-top: 10px; }
.watch-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Homepage: showcase pointer under the lede/badges row */
.hero-showcase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: clamp(8px, 1.5vw, 16px);
}
.hero-showcase p { color: var(--copy); margin: 0; }
.hero-showcase p strong { color: var(--heading); font-weight: 600; }
.hero-showcase .watch-btn { margin-top: 0; }

/* =====================
   COLLABORATE HERO
   ===================== */
.collab-hero {
  position: relative;
  min-height: clamp(420px, 70vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #17070d;
  padding: calc(var(--nav-h) + 40px) var(--pad) 64px;
}
.collab-hero-blobs {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 45% at 22% 30%, rgba(176,26,58,0.85), transparent 70%),
    radial-gradient(45% 50% at 78% 24%, rgba(120,10,45,0.8), transparent 70%),
    radial-gradient(50% 55% at 60% 80%, rgba(196,38,64,0.7), transparent 70%),
    radial-gradient(35% 40% at 30% 78%, rgba(60,4,24,0.9), transparent 70%);
  filter: blur(40px);
  animation: collab-drift 9s ease-in-out infinite alternate;
}
@keyframes collab-drift {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(13deg) scale(1.26); }
  100% { transform: rotate(-10deg) scale(1.1); }
}
/* Two extra light-fields drifting at their own tempo turn the single
   slow zoom into layered haze. Transform/opacity only — compositor work,
   no per-frame repaints, safe on mobile. */
.collab-hero-blobs::before,
.collab-hero-blobs::after {
  content: '';
  position: absolute;
  inset: -10%;
}
.collab-hero-blobs::before {
  background:
    radial-gradient(32% 38% at 70% 62%, rgba(240,98,130,0.68), transparent 70%),
    radial-gradient(26% 32% at 24% 50%, rgba(255,142,164,0.48), transparent 70%);
  filter: blur(52px);
  animation: haze-drift 10s ease-in-out infinite alternate;
}
.collab-hero-blobs::after {
  background: radial-gradient(55% 34% at 50% 34%, rgba(255,190,202,0.4), transparent 72%);
  filter: blur(64px);
  animation: haze-pulse 13s ease-in-out infinite alternate;
}
@keyframes haze-drift {
  from { transform: translate3d(-12%, -7%, 0) scale(1); }
  to   { transform: translate3d(12%, 8%, 0) scale(1.24); }
}
@keyframes haze-pulse {
  from { transform: translate3d(11%, 5%, 0); opacity: 0.2; }
  50%  { opacity: 1; }
  to   { transform: translate3d(-11%, -6%, 0); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .collab-hero-blobs,
  .collab-hero-blobs::before,
  .collab-hero-blobs::after { animation: none; }
}
.collab-hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
/* The visor artwork is black; the hero is always dark, so always invert. */
.collab-hero-visor {
  width: 76px;
  height: auto;
  margin: 0 auto 24px;
  display: block;
  filter: invert(1);
  opacity: 0.9;
}
.collab-hero h1 {
  color: #ffffff;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.2;
}
.collab-hero p {
  color: rgba(255,255,255,0.85);
  margin-top: 20px;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}
.collab-intro { padding-top: 48px; }

.partner-media {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16/10;
  object-fit: cover;
}

/* Audio guide language pills */
.audio-caption { font-family: var(--font-ui); font-size: 14px; color: var(--muted2); margin-bottom: 12px; }
.audio-caption strong { color: var(--text); font-weight: 600; }
.audio-langs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.audio-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.audio-lang:hover { border-color: var(--text); }
.audio-lang svg { width: 11px; height: 11px; flex-shrink: 0; display: block; }
.audio-lang .pause-icon { display: none; }
.audio-lang.is-playing {
  background: var(--pill-bg);
  color: var(--pill-text);
  border-color: var(--pill-bg);
}
.audio-lang.is-playing .play-icon { display: none; }
.audio-lang.is-playing .pause-icon { display: block; }
.audio-more { font-family: var(--font-ui); font-size: 14px; color: var(--muted2); padding: 8px 6px; }

/* 3D model viewer. Square so the tall vase fills the frame instead of
   letterboxing inside a wide strip; the height cap keeps it from towering
   over the viewport once the two-column layout stacks on tablet/mobile
   (aspect-ratio sets the height from the width, max-height then clamps it —
   the canvas just gets wider than tall, nothing distorts).
   height:auto is load-bearing: model-viewer's shadow :host declares a fixed
   150px fallback height, which blocks aspect-ratio from resolving unless an
   author height wins over it. */
.model-wrap model-viewer {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  max-height: min(540px, 62vh);
  border-radius: var(--radius);
  background: var(--placeholder);
  --poster-color: transparent;
}
.model-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted2);
}
.model-wrap .audio-caption { margin-top: 12px; margin-bottom: 0; }

/* =====================
   CONTACT / FEEDBACK / RELEASE NOTES
   ===================== */
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================
   APPLE STORY CARDS (home reviews)
   ===================== */
.story-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 56px;
}
@media (max-width: 800px) { .story-cards { grid-template-columns: 1fr; } }

.story-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/10;
}
/* Both heroes have their focal art centered in the source frame, so the
   image is pinned by its left edge and oversized: scaling from the left
   pushes the subject toward the right half of the card, leaving quiet
   background behind the leading text. */
.story-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  transform: scale(1.15);
  transform-origin: 0% 50%;
  transition: transform 0.4s ease;
}
.story-card:hover > img { transform: scale(1.2); }

/* Bottom + left scrims keep white text legible on both the purple and gold art */
.story-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(20px, 3vw, 32px);
  background:
    linear-gradient(to right, rgba(0,0,0,0.28) 0%, transparent 45%),
    linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 45%, transparent 70%);
}
.story-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.story-card h3 {
  color: #ffffff;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  /* Narrow on purpose: two lines that stay over the quiet left background
     beat one long line running into the artwork. */
  max-width: 19ch;
  text-wrap: balance;
}
.story-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  background: rgba(255,255,255,0.92);
  color: #1d1d1f;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, transform 0.2s ease;
}
.story-card:hover .story-btn { background: #ffffff; transform: translateY(-1px); }
.contact-grid {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: 140px var(--pad) var(--gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .contact-grid { padding-top: 88px; } }

.contact-card h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 16px; }
.contact-card p { color: var(--copy); margin-bottom: 24px; }
.contact-card + .contact-card { border-top: 1px solid var(--border); padding-top: 40px; margin-top: 8px; }

.release-note {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.release-note summary {
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
  list-style: none;
}
.release-note summary::-webkit-details-marker { display: none; }
.release-note[open] summary { color: var(--accent); }
.release-note p { margin: 14px 0 0; color: var(--copy); font-size: 15px; }
.release-note ul { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.release-note li { color: var(--copy); font-size: 15px; padding-left: 16px; position: relative; }
.release-note li::before { content: '•'; position: absolute; left: 0; color: var(--accent); }
.release-note li strong { color: var(--heading); }

/* =====================
   404
   ===================== */
.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--pad);
}
.error-page h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 12px; }
.error-page p { color: var(--muted); margin-bottom: 28px; }
.error-img { width: min(280px, 60vw); margin-bottom: 40px; }

/* =====================
   FOOTER
   ===================== */
.footer {
  background: var(--footer-bg);
  padding: var(--gap) 0 48px;
}
.footer-inner {
  max-width: calc(var(--max-w) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--footer-text);
  margin-bottom: 2px;
}
.footer-logo img { height: 26px; width: auto; }
.footer-copy { font-family: var(--font-ui); font-size: 13px; color: var(--footer-text); opacity: 0.65; }
.footer-copy a { color: var(--footer-text); opacity: 1; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; transition: border-color 0.2s ease; }
.footer-copy a:hover { border-bottom-color: rgba(255,255,255,0.6); }

.footer-social { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.footer-social-link { display: inline-flex; color: var(--footer-text); opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; }
.footer-social-link:hover { opacity: 1; transform: translateY(-1px); }

.footer-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-family: var(--font-ui); font-size: 14px; color: var(--footer-text); opacity: 0.7; }
.footer-links a:hover { opacity: 1; }

/* The footer is always a dark navy band regardless of page theme, so its
   Download button needs fixed footer-contrast colors, not the page's
   theme-dependent --text/--surface (which would go dark-on-dark in light
   mode). Astronoma solves the equivalent ambient-context problem with
   !important on this same button; doing the same here. */
.footer .btn-download {
  color: var(--footer-text) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.footer .btn-download:hover {
  background: var(--footer-text) !important;
  color: var(--footer-bg) !important;
  border-color: var(--footer-text) !important;
}

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}