/* ============================================================
   THE POLITE SOLUTION — "ALTITUDE" THEME (v11, 2026-10-14)
   Primary design reference: Montfort (Awwwards) — a misty sky the page
   travels through, tracked light capitals, hairline UI, glass panels.
   Supporting references: Roveia (media panel scaling up on scroll, smooth
   scroll), Oryzo (pinned product scene), Ezera (stacked glass cards),
   Terminal Industries (scroll-lit statements).

   The sky itself is drawn by sky.js (WebGL). Each section chooses its time of
   day with --sky-tone (0 = bright day, 1 = deep navy night); text colours below
   follow the same tones. The logo file is untouched: its white background
   sits on a white plate in the navbar/footer and dissolves into the white
   cloud of the opening animation.
   Loaded after styles.css; overrides only presentation, never content.
============================================================ */

/* ---------- 0. Display face: Jost (self-hosted, SIL OFL 1.1) ---------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/jost-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jost-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jost-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens (logo navy #042064, logo sky #54ACE4 / #4C99CA) ---------- */
:root {
  --ink: #042064;
  --ink-2: #0E2B6E;
  --day-body: #2B3D63;
  --day-muted: #56688C;
  --sky-blue: #54ACE4;
  --sky-deep: #2C7DB6;
  --night-text: #F3F8FE;
  --night-body: rgba(223, 235, 249, 0.80);
  --night-muted: rgba(186, 207, 233, 0.66);
  --line-day: rgba(4, 32, 100, 0.14);
  --line-night: rgba(255, 255, 255, 0.16);
  --glass-day: rgba(255, 255, 255, 0.46);
  --glass-day-strong: rgba(255, 255, 255, 0.72);
  --glass-night: rgba(10, 28, 72, 0.42);
  --ease-sky: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sky-io: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: 'Jost', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* existing system variables, retuned to the logo palette */
  --font-heading: var(--font-display);
  --brand-navy: #042064;
  --brand-navy-light: #0E2B6E;
  --cyan-primary: #2C7DB6;
  --cyan-bright: #54ACE4;
  --text-primary: #0B1E4F;
  --text-secondary: #2B3D63;
  --text-muted: #56688C;
  --text-navy: #042064;
}

/* ---------- 2. Canvas: the live sky replaces every page background ---------- */
html { background: #FFFFFF; scroll-behavior: auto; }
body {
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary);
}
.sky-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
  pointer-events: none;
}
main, .footer, .breadcrumbs-nav { position: relative; z-index: 1; }
.ambient-glow-wrapper, .depth-veil, .three-bg-canvas { display: none !important; }
/* the v10 blueprint grids belong to the old look */
.principles-section::before, .tech-section::before, .about-section::before { display: none !important; }
main > section, .hero-section, .subpage-hero, .thingify-flagship-section, .principles-section,
.vision-section, .future-section, .contact-section, .about-section, .tech-section {
  background: transparent !important;
}

/* no WebGL: a CSS sky; night sections carry their own night background */
html.sky-fallback body {
  background: linear-gradient(180deg, #A9C8E6 0%, #D6E5F2 45%, #F4F8FC 100%) fixed !important;
}
html.sky-fallback :is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) {
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%) 0 0 / 420px 380px,
    radial-gradient(1px 1px at 68% 42%, rgba(255, 255, 255, 0.8) 50%, transparent 51%) 0 0 / 300px 260px,
    radial-gradient(1.5px 1.5px at 84% 78%, #fff 50%, transparent 51%) 0 0 / 520px 440px,
    linear-gradient(180deg, #04174A 0%, #031038 100%) !important;
}

::selection { background: rgba(84, 172, 228, 0.32); color: inherit; }

/* ---------- 3. Time of day per section (read by sky.js) ---------- */
.hero-section, .subpage-hero, main > section { --sky-tone: 0; }
.hero-section ~ .thingify-flagship-section,
.hero-section ~ .vision-section,
.hero-section ~ .future-section,
.hero-section ~ .contact-section,
.footer { --sky-tone: 1; }

/* ---------- 4. Typography ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); letter-spacing: 0; }
p { color: var(--day-body); }

.section-title,
.hero-title,
.flagship-heading,
.whats-next-card h3 {
  font-family: var(--font-display);
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.12;
  color: var(--ink);
}
.section-title { font-size: clamp(1.9rem, 3.9vw, 3.5rem); margin-bottom: 22px; }
.section-subtitle { font-size: 1.08rem; color: var(--day-muted); line-height: 1.8; }

.gradient-text, .gradient-text-cyan, .gradient-text-violet {
  background: linear-gradient(100deg, #2C7DB6 0%, #3E95CF 45%, #042064 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* section labels: hairline + tracked capitals instead of pills */
.section-tag {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  color: var(--sky-deep) !important;
  margin-bottom: 22px;
}
.section-tag::before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  order: -2;
}
.section-tag i { font-size: 0.82em; opacity: 0.85; order: -1; }

/* secondary headings inside section headers (inner pages) */
.section-header h2:not(.section-title):not(.vision-quote-statement) {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.15;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem) !important;
  color: var(--ink) !important;
}

/* ---------- 5. Navbar: floating glass bar ---------- */
.navbar {
  position: sticky;
  top: 12px;
  margin: 12px auto 0;
  width: calc(100% - 32px);
  max-width: 1280px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px -26px rgba(4, 32, 100, 0.45) !important;
  transition: background-color 0.6s var(--ease-sky), border-color 0.6s var(--ease-sky), box-shadow 0.6s var(--ease-sky), transform 0.5s var(--ease-sky);
}
.navbar.scrolled { background: rgba(255, 255, 255, 0.66) !important; }
.nav-container { height: 72px; padding: 0 14px 0 12px; max-width: none; }
.nav-list { gap: 4px; }
.nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 10px 14px;
  background: none !important;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-sky);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--ink) !important; }
.nav-dropdown-toggle::after { right: 30px; }
/* nested inside the glass navbar a second backdrop blur misrenders in Chromium, so menus are near-opaque instead */
.nav-dropdown-menu {
  background: #FAFCFF !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 50px -28px rgba(4, 32, 100, 0.45) !important;
}
.nav-dropdown-link { font-family: var(--font-display); letter-spacing: 0.04em; color: var(--ink) !important; }
.btn-nav-cta {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px !important;
  box-shadow: none !important;
}
.btn-nav-cta:hover { background: var(--sky-deep) !important; border-color: var(--sky-deep) !important; }

/* the logo plate (logo itself untouched) */
.brand-logo-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(4, 32, 100, 0.06) !important;
  box-shadow: 0 10px 24px -14px rgba(4, 32, 100, 0.4) !important;
  border-radius: 13px !important;
}
.brand-logo-img { height: 46px; }

/* night: the bar turns to dark glass, the white logo plate stays */
html.sky-night .navbar {
  background: rgba(6, 18, 52, 0.46) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.6) !important;
}
html.sky-night .nav-link, html.sky-night .nav-link.active { color: var(--night-text) !important; }
html.sky-night .mobile-toggle span { background-color: var(--night-text); }
html.sky-night .btn-nav-cta { background: #FFFFFF !important; border-color: #FFFFFF !important; color: var(--ink) !important; }
html.sky-night .btn-nav-cta:hover { background: var(--sky-blue) !important; border-color: var(--sky-blue) !important; }
html.sky-night .nav-dropdown-menu { background: #071436 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
html.sky-night .nav-dropdown-link { color: var(--night-text) !important; }
html.sky-night .nav-dropdown-link:hover { background: rgba(255, 255, 255, 0.08) !important; }
html.sky-night .brand-logo-container { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 34px -6px rgba(84, 172, 228, 0.55) !important; }

/* ---------- 6. Buttons (tracked capitals, hairline outlines) ---------- */
.btn {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 28px;
  gap: 12px;
  box-shadow: none !important;
}
.btn i { font-size: 0.9em; }
.btn-primary {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover { background: var(--sky-deep) !important; border-color: var(--sky-deep) !important; color: #FFFFFF !important; }
.btn-secondary, .btn-outline {
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(4, 32, 100, 0.34) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover, .btn-outline:hover { background: rgba(255, 255, 255, 0.78) !important; border-color: var(--ink) !important; color: var(--ink) !important; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-sky);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ---------- 7. Night sections (home: Thingify, vision, what's next, contact; every footer) ---------- */
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) :is(h1, h2, h3, h4) { color: var(--night-text) !important; }
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) p { color: var(--night-body) !important; }
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) .section-tag { color: var(--sky-blue) !important; }
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) .btn-primary,
.vision-featured-card .btn-primary, .flagship-banner-hero .btn-primary {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--ink) !important;
}
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) .btn-primary:hover,
.vision-featured-card .btn-primary:hover, .flagship-banner-hero .btn-primary:hover {
  background: var(--sky-blue) !important;
  border-color: var(--sky-blue) !important;
  color: #021137 !important;
}
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) :is(.btn-secondary, .btn-outline),
.vision-featured-card :is(.btn-secondary, .btn-outline), .flagship-banner-hero :is(.btn-secondary, .btn-outline) {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  color: var(--night-text) !important;
}
:is(.hero-section ~ .thingify-flagship-section, .hero-section ~ .vision-section, .hero-section ~ .future-section, .hero-section ~ .contact-section, .footer) :is(.btn-secondary, .btn-outline):hover,
.vision-featured-card :is(.btn-secondary, .btn-outline):hover, .flagship-banner-hero :is(.btn-secondary, .btn-outline):hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* ---------- 8. Hero: Montfort-style centred wordmark over the clouds ---------- */
.hero-section {
  min-height: calc(100svh - 84px);
  padding: clamp(40px, 9vh, 96px) 0 0;
  align-items: flex-start;
  overflow: visible;
}
.hero-grid { grid-template-columns: 1fr !important; gap: clamp(56px, 11vh, 120px); justify-items: center; }
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1120px;
  translate: 0 calc(var(--hero-p, 0) * -70px) !important;
  opacity: calc(1 - var(--hero-p, 0) * 1.35);
}
.hero-badge-capsule {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  gap: 14px;
  margin-bottom: 30px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-badge-tag {
  background: none !important;
  color: var(--sky-deep) !important;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  padding: 0;
  position: relative;
}
.hero-badge-tag::before { content: ''; display: inline-block; width: 34px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; opacity: 0.7; }
.hero-badge-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--day-muted);
}
.hero-title {
  font-size: clamp(2.5rem, 6.1vw, 6.4rem) !important;
  letter-spacing: 0.085em !important;
  line-height: 1.04 !important;
  margin: 0 0 18px !important;
  color: var(--ink) !important;
  text-shadow: 0 1px 30px rgba(255, 255, 255, 0.6);
}
.hero-title .word-mask { padding: 0.04em 0.02em 0.1em; }
.hero-tagline-sub {
  font-family: var(--font-display);
  font-weight: 300 !important;
  font-size: clamp(1.15rem, 2vw, 1.7rem) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #2C7DB6 0%, #3E95CF 40%, #042064 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 26px !important;
}
.hero-description { max-width: 700px; margin: 0 auto 28px !important; font-size: 1.1rem; color: var(--day-body); }
.hero-flagship-callout {
  max-width: 760px;
  text-align: left;
  align-items: center;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background: var(--glass-day) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px -30px rgba(4, 32, 100, 0.45) !important;
  padding: 16px 22px !important;
  margin-bottom: 34px !important;
}
.hero-flagship-callout .flagship-icon {
  color: var(--sky-deep) !important;
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(44, 125, 182, 0.35);
  font-size: 1rem !important;
  margin: 0 !important;
}
.hero-flagship-callout p { font-size: 0.95rem !important; color: var(--day-body) !important; }
.hero-actions { justify-content: center; margin-bottom: 46px !important; }
.hero-proof-bar {
  border-top: 1px solid var(--line-day) !important;
  gap: 0 !important;
  justify-content: center;
  width: min(820px, 100%);
  padding-top: 0 !important;
}
.proof-item {
  flex: 1;
  align-items: center;
  padding: 18px 12px 0;
  position: relative;
}
.proof-item + .proof-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--line-day);
}
.proof-label { font-family: var(--font-display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.26em; color: var(--day-muted) !important; }
.proof-val { font-family: var(--font-display); font-weight: 400 !important; font-size: 1.02rem; letter-spacing: 0.04em; color: var(--ink) !important; margin-top: 6px; }

/* scroll cue (no text): a falling light on a hairline */
.hero-section::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100svh - 150px);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(4, 32, 100, 0) 0%, rgba(4, 32, 100, 0.5) 50%, rgba(4, 32, 100, 0) 100%) 0 -56px / 1px 112px no-repeat, rgba(4, 32, 100, 0.12);
  animation: tpsCue 2.4s var(--ease-sky-io) infinite;
  opacity: calc(1 - var(--hero-p, 0) * 6);
  pointer-events: none;
  display: none;
}
@keyframes tpsCue { to { background-position: 0 56px, 0 0; } }

/* the "Innovation Core" becomes a wide window into the 3D roadmap that scales up as it arrives (Roveia) */
.hero-visual-stage {
  width: 100%;
  max-width: 1180px;
  translate: none !important;
  scale: var(--stage-scale, 1) !important;
  transform-origin: 50% 0;
  margin-bottom: clamp(70px, 12vh, 140px);
}
.hero-stage-card {
  max-width: none !important;
  width: 100%;
  border-radius: 30px !important;
  padding: 22px 22px 18px !important;
  background: rgba(255, 255, 255, 0.36) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 50px 90px -50px rgba(4, 32, 100, 0.55) !important;
}
.stage-header { border-bottom-color: var(--line-day) !important; padding: 0 6px 14px; }
.stage-badge, .stage-footer-label { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.26em !important; font-size: 0.7rem !important; color: var(--ink) !important; }
.stage-footer-title { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0.06em; color: var(--ink) !important; }
.stage-3d-viewport {
  height: clamp(360px, 54vh, 540px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0.1) 100%) !important;
  box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.5) !important;
}
.stage-3d-viewport::before { opacity: 0.55; background-size: 32px 32px !important; }
.stage-footer { padding: 0 6px; }

/* ---------- 9. About: lead statement + glass pillars ---------- */
.about-section, .principles-section, .vision-section, .future-section, .contact-section, .thingify-flagship-section, .tech-section {
  padding-top: clamp(80px, 13vh, 150px);
  padding-bottom: clamp(80px, 13vh, 150px);
}
.about-intro-grid { gap: 56px !important; align-items: start; }
.about-lead-text {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem) !important;
  line-height: 1.38 !important;
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.about-body-text {
  border-left: 1px solid var(--line-day) !important;
  padding-left: 32px !important;
  color: var(--day-body) !important;
  background: none !important;
}

.pillar-card, .principle-card, .eco-card, .roadmap-flow-card, .contact-info-card, .contact-form-card, .legal-doc-card {
  background: var(--glass-day) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 45%) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 26px !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 30px 60px -40px rgba(4, 32, 100, 0.5) !important;
}
.pillar-card:hover, .principle-card:hover, .eco-card:hover, .roadmap-flow-card:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 40px 70px -40px rgba(4, 32, 100, 0.6), 0 0 0 1px rgba(84, 172, 228, 0.35) !important;
}
.pillar-card { padding: 38px 32px !important; }
.pillar-icon-box, .eco-card-icon, .detail-icon {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(44, 125, 182, 0.32) !important;
  color: var(--sky-deep) !important;
  border-radius: 50% !important;
  box-shadow: none;
}
.pillar-title, .principle-title, .eco-card-title, .roadmap-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
}
.pillar-title { font-size: 1.32rem !important; }
.pillar-desc, .principle-desc, .eco-card-desc, .roadmap-desc { color: var(--day-body) !important; }

/* ---------- 10. Thingify — a night scene; on the home page it pins while the print builds (Oryzo) ---------- */
.flagship-heading { font-size: clamp(2.4rem, 5vw, 4.6rem) !important; color: #FFFFFF !important; letter-spacing: 0.09em; }
.flagship-subheading { font-family: var(--font-display); font-weight: 300 !important; letter-spacing: 0.04em; color: #9FD3F5 !important; font-size: 1.3rem !important; }
.flagship-text { color: var(--night-body) !important; }
.flagship-brand-title .section-tag { color: #9FD3F5 !important; }
.flagship-banner-hero > div > div[style*="inline-flex"] {
  background: rgba(84, 172, 228, 0.12) !important;
  border-color: rgba(84, 172, 228, 0.45) !important;
  color: #CFE9FA !important;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}
.flagship-feature-preview {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
}
.preview-stat-row .stat-label { font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.68rem !important; color: var(--night-muted) !important; }
.preview-stat-row .stat-value { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0.03em; }

/* on the home page the card dissolves into the night sky itself */
.hero-section ~ .thingify-flagship-section .flagship-banner-hero,
.hero-section ~ .vision-section .vision-featured-card {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible;
}
.hero-section ~ .thingify-flagship-section .flagship-banner-hero::before,
.hero-section ~ .thingify-flagship-section .flagship-banner-hero::after,
.hero-section ~ .vision-section .vision-featured-card::before,
.hero-section ~ .vision-section .vision-featured-card::after { display: none !important; }
.hero-section ~ .thingify-flagship-section .flagship-banner-hero { gap: clamp(40px, 6vw, 90px); grid-template-columns: 1fr 1fr; }
.hero-section ~ .thingify-flagship-section .thingify-print-stage { height: clamp(300px, 44vh, 430px); }
.hero-section ~ .thingify-flagship-section .flagship-feature-preview {
  background: rgba(8, 24, 64, 0.32) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 80px -20px rgba(84, 172, 228, calc(0.15 + var(--pin-p, 0) * 0.35)) !important;
}

/* pinned scene (desktop): the section is taller than the screen, its content stays put while the print builds */
@media (min-width: 1025px) and (min-height: 700px) {
  .hero-section ~ .thingify-flagship-section.is-pinned { height: 230vh; padding: 0 !important; }
  .hero-section ~ .thingify-flagship-section.is-pinned > .container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 70px;
  }
  .hero-section ~ .thingify-flagship-section.is-pinned .flagship-banner-hero { width: 100%; }
}

/* elsewhere (Products, Thingify overview) the card is a window into the night */
.flagship-banner-hero, .vision-featured-card {
  background:
    radial-gradient(1.2px 1.2px at 14% 22%, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 62% 14%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 86% 36%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 38% 70%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 74% 82%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 24% 88%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(70% 90% at 15% 0%, rgba(84, 172, 228, 0.22) 0%, transparent 60%),
    linear-gradient(160deg, #0A2468 0%, #04154A 55%, #020B2C 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 32px !important;
  box-shadow: 0 50px 100px -50px rgba(2, 11, 44, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.vision-featured-card h3 { font-family: var(--font-display); font-weight: 300 !important; text-transform: uppercase; letter-spacing: 0.07em; color: #FFFFFF !important; }
.vision-featured-card p { color: var(--night-body) !important; }
.vision-featured-card .section-tag { color: var(--sky-blue) !important; }

/* ---------- 11. Technology principles: stacked glass cards (Ezera) ---------- */
.principles-grid {
  display: flex !important;
  flex-direction: column;
  gap: 26px !important;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.principle-card {
  position: sticky;
  top: calc(118px + var(--stack-i, 0) * 22px);
  display: grid !important;
  grid-template-columns: minmax(150px, 0.32fr) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  align-items: start;
  min-height: 230px;
  padding: 44px 48px !important;
  scale: var(--stack-scale, 1);
  transform-origin: 50% 0;
  background: rgba(244, 249, 254, 0.9) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
}
.principle-card:nth-child(1) { --stack-i: 0; }
.principle-card:nth-child(2) { --stack-i: 1; }
.principle-card:nth-child(3) { --stack-i: 2; }
.principle-card:nth-child(4) { --stack-i: 3; }
.principle-card:nth-child(5) { --stack-i: 4; }
.principle-num {
  grid-row: 1 / span 2;
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: clamp(3.6rem, 7vw, 6.2rem) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.02em;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(4, 32, 100, 0.55);
  background: none !important;
  margin: 0 !important;
}
.principle-num .odo-strip span { -webkit-text-stroke: 1px rgba(4, 32, 100, 0.55); }
.principle-title { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; text-transform: uppercase; letter-spacing: 0.08em !important; font-weight: 300 !important; margin: 4px 0 14px !important; }
.principle-desc { font-size: 1.05rem !important; max-width: 560px; }
.principle-card::before { display: none !important; }
/* the card being covered dims slightly */
.principle-card { filter: brightness(calc(1 - var(--stack-dim, 0) * 0.08)); }

/* ---------- 12. Vision, what's next, contact (home: night) ---------- */
.vision-quote-statement {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: clamp(1.9rem, 4.2vw, 3.7rem) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.01em;
  max-width: 1020px !important;
}
.vision-supporting-text { color: var(--night-body) !important; }
.hero-section ~ .vision-section .vision-featured-card { padding-top: 40px !important; padding-bottom: 40px !important; }

.whats-next-card {
  background: var(--glass-day) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 30px !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 40px 80px -50px rgba(4, 32, 100, 0.5) !important;
}
.whats-next-card h3 { font-size: clamp(1.7rem, 3vw, 2.4rem) !important; }
.hero-section ~ .future-section .whats-next-card {
  background: var(--glass-night) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 50%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 80px -40px rgba(0, 0, 0, 0.6) !important;
}
.hero-section ~ .contact-section h2 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: clamp(2.1rem, 5vw, 4.4rem) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.12;
}
.hero-section ~ .contact-section { padding-bottom: clamp(110px, 18vh, 200px) !important; }

/* ---------- 13. Inner pages ---------- */
.breadcrumbs-nav { padding-top: 26px; }
.breadcrumbs-list, .breadcrumbs-list a {
  font-family: var(--font-display);
  font-size: 0.72rem !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--day-muted) !important;
}
.breadcrumbs-list .active-crumb { color: var(--ink) !important; font-weight: 500; }
.subpage-hero { padding: clamp(24px, 6vh, 70px) 0 clamp(50px, 9vh, 110px) !important; }
.subpage-hero .section-title { font-size: clamp(2.3rem, 5.6vw, 5.2rem) !important; letter-spacing: 0.08em; line-height: 1.06; }
.subpage-hero .section-subtitle { font-size: 1.12rem; max-width: 760px; }
.legal-doc-card { background: rgba(255, 255, 255, 0.78) !important; }
.legal-section-block h3 { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0.05em; color: var(--ink) !important; }

.eco-card { padding: 34px 30px !important; }
.eco-card-badge {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.64rem !important;
  background: rgba(84, 172, 228, 0.12) !important;
  color: var(--sky-deep) !important;
  border: 1px solid rgba(84, 172, 228, 0.35) !important;
}
.eco-card-title { font-size: 1.22rem !important; }

/* roadmap */
.roadmap-step-badge {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  background: none !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(4, 32, 100, 0.55);
  font-size: 2.6rem !important;
  box-shadow: none !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}
.roadmap-step-badge .odo-strip span { -webkit-text-stroke: 1px rgba(4, 32, 100, 0.55); }
.roadmap-arrow-indicator { color: var(--sky-deep) !important; }

/* contact page */
.contact-form-card, .contact-info-card { padding: 40px !important; }
.form-label { font-family: var(--font-display); font-weight: 500 !important; font-size: 0.7rem !important; letter-spacing: 0.24em; text-transform: uppercase; color: var(--day-muted) !important; }
.form-input, .form-textarea {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(4, 32, 100, 0.16) !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.form-input:focus, .form-textarea:focus {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--sky-deep) !important;
  box-shadow: 0 0 0 4px rgba(84, 172, 228, 0.18) !important;
  outline: none;
}
.detail-label { font-family: var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.68rem !important; color: var(--day-muted) !important; }
.detail-value { font-family: var(--font-display); font-weight: 400 !important; color: var(--ink) !important; letter-spacing: 0.02em; }

.contact-info-card h3, .contact-form-card h3, .contact-info-card h2, .contact-form-card h2 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink) !important;
}

/* corner registration marks (v10) only on hover, in logo sky */
.pillar-card::before, .eco-card::before, .roadmap-flow-card::before { opacity: 0; }

/* ---------- 14. Footer: night sky ---------- */
.footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding-top: 90px;
}
.footer::before, .footer::after { display: none !important; }
.footer-logo-container {
  background: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 50px -10px rgba(84, 172, 228, 0.6) !important;
}
.footer-tagline { font-family: var(--font-display); font-weight: 300 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #CFE9FA !important; }
.footer-links-col h4 { font-family: var(--font-display); font-weight: 500 !important; font-size: 0.72rem !important; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sky-blue) !important; }
.footer-links-list li a { color: var(--night-body) !important; font-family: var(--font-display); letter-spacing: 0.04em; }
.footer-links-list li a:hover { color: #FFFFFF !important; }
.footer-bottom-bar { border-top-color: rgba(255, 255, 255, 0.12) !important; }
.footer-copyright, .footer-sub-notice { color: var(--night-muted) !important; }
.footer-swoosh-path { stroke-width: 1.6; }

/* ---------- 15. Furniture: progress hairline, chapter rail, cursor light ---------- */
.scroll-progress { background: linear-gradient(90deg, var(--sky-blue), #FFFFFF) !important; height: 2px !important; }
.chapter-rail .cd-mark { background: var(--ink) !important; }
html.sky-night .chapter-rail .cd-mark { background: #FFFFFF !important; }
html.sky-night .chapter-rail::before { background: rgba(255, 255, 255, 0.2) !important; }
html.sky-night .chapter-rail .cd-label { color: var(--night-text) !important; background: rgba(6, 18, 52, 0.7) !important; }
.cursor-spotlight {
  width: 520px !important;
  height: 520px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 62%) !important;
  mix-blend-mode: soft-light;
  z-index: 1 !important;
}
html.sky-night .cursor-spotlight { background: radial-gradient(circle, rgba(84, 172, 228, 0.18) 0%, rgba(84, 172, 228, 0) 62%) !important; mix-blend-mode: screen; }

/* ---------- 16. Page transitions: arrive out of a cloud, leave into one ---------- */
@view-transition { navigation: none; }
/* 'backwards' fill: no filter/transform is left on <main> afterwards (a leftover filter would cut the glass panels off from the sky behind them) */
.page-fade-in { animation: tpsSkyIn 1.1s var(--ease-sky) 0.1s backwards !important; }
@keyframes tpsSkyIn { from { opacity: 0; filter: blur(10px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }
.cloud-wipe {
  position: fixed;
  inset: -10%;
  z-index: 9500;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(38% 30% at 22% 30%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(42% 34% at 78% 66%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 50%, rgba(232, 240, 248, 0.95) 100%);
  transform: scale(1.25);
  transition: opacity 0.42s var(--ease-sky-io), transform 0.6s var(--ease-sky);
}
html.cloud-leaving .cloud-wipe { opacity: 1; transform: scale(1); }
html.cloud-leaving main { filter: blur(8px); transition: filter 0.4s ease; }

/* ---------- 17. Opening animation: the logo appears out of a white cloud ---------- */
html.intro-pending.sky-live .intro-overlay,
html.intro-pending.sky-live .intro-overlay::before { background: transparent !important; }
html.intro-pending.sky-live .intro-overlay::before {
  background: radial-gradient(50% 42% at 50% 48%, #FFFFFF 0%, #FFFFFF 46%, rgba(255, 255, 255, 0) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transition: opacity 1s var(--ease-sky);
}
html.intro-pending .intro-guides { display: none; }
.intro-stage { width: min(640px, 82vw); }
.intro-logo-3d {
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none;
  background: transparent !important;
  opacity: 0;
  filter: blur(16px);
  scale: 1.12;
}
.intro-overlay.is-playing .intro-logo-3d {
  animation: tpsLogoMist 1.5s var(--ease-sky) 0.2s forwards !important;
}
@keyframes tpsLogoMist { to { opacity: 1; filter: blur(0); scale: 1; } }
.intro-overlay.is-playing .intro-logo { animation: tpsIntroWipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards; }
.intro-overlay.is-leaving .intro-logo-3d {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -30px rgba(4, 32, 100, 0.45) !important;
  transition: box-shadow 0.8s ease, border-radius 0.8s ease;
}
.intro-overlay.is-skipped .intro-logo-3d { opacity: 1; filter: none; scale: 1; animation: none !important; }
.intro-progress {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  letter-spacing: 0.3em !important;
  color: var(--ink) !important;
}
.intro-hint { font-family: var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.66rem !important; color: var(--day-muted) !important; }
/* everything waits behind the cloud until the logo lands */
html.intro-pending.sky-live main,
html.intro-pending.sky-live .footer,
html.intro-pending.sky-live .chapter-rail { opacity: 0; }
html.intro-pending main.page-fade-in { animation: none !important; }
/* failsafe: if the intro script never finishes, show the page anyway */
html.intro-pending.sky-live main,
html.intro-pending.sky-live .footer,
html.intro-pending.sky-live .navbar { animation: tpsFailsafeShow 0.6s ease 5.5s forwards; }
@keyframes tpsFailsafeShow { to { opacity: 1; } }
html.intro-pending.sky-live .navbar { opacity: 0; }
html.intro-pending.sky-live:has(.intro-overlay.is-leaving) .navbar { opacity: 1; transition: opacity 0.6s ease; }
html.intro-pending.sky-live:has(.intro-overlay.is-leaving) main { opacity: 1; transition: opacity 0.9s ease 0.2s; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1024px) {
  .navbar { width: calc(100% - 20px); top: 10px; margin-top: 10px; border-radius: 18px; }
  .nav-container { height: 64px; }
  .nav-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    top: 84px !important;
    left: 10px !important;
    right: 10px;
    width: auto !important;
    border-radius: 20px;
    background: #F7FAFE !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 30px 60px -30px rgba(4, 32, 100, 0.5) !important;
  }
  html.sky-night .nav-menu { background: #071436 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
  .nav-link { font-size: 0.84rem; }
  .hero-section ~ .thingify-flagship-section .flagship-banner-hero { grid-template-columns: 1fr; }
  .principle-card { grid-template-columns: 1fr; padding: 34px 32px !important; min-height: 0; }
  .principle-num { grid-row: auto; font-size: 3.4rem !important; margin-bottom: 10px !important; }
}
@media (max-width: 768px) {
  .brand-logo-img { height: 40px; }
  .hero-section { min-height: 0; padding-top: 34px; }
  .hero-title { letter-spacing: 0.06em !important; }
  .hero-badge-capsule { flex-direction: column; gap: 8px; }
  .hero-flagship-callout { padding: 14px 16px !important; }
  .hero-proof-bar { flex-direction: row; }
  .proof-item { padding: 14px 6px 0; }
  .proof-val { font-size: 0.9rem; }
  .proof-label { font-size: 0.58rem; letter-spacing: 0.18em; }
  .hero-visual-stage { scale: none !important; }
  .hero-stage-card { padding: 14px !important; border-radius: 24px !important; }
  .about-body-text { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line-day) !important; padding-top: 20px !important; }
  .principle-card { top: calc(90px + var(--stack-i, 0) * 14px); padding: 28px 24px !important; }
  .section-tag { letter-spacing: 0.22em; }
  .section-tag::before { width: 22px; }
  .btn { padding: 14px 22px; letter-spacing: 0.16em; }
  .contact-form-card, .contact-info-card { padding: 26px 20px !important; }
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-content { translate: none !important; opacity: 1 !important; }
  .hero-visual-stage { scale: none !important; }
  .principle-card { scale: none; filter: none; }
  .cloud-wipe { display: none; }
  .page-fade-in { animation: none !important; }
}

/* sticky elements (navbar, pinned Thingify scene, stacked cards) need the page itself to scroll:
   'clip' trims sideways overflow like 'hidden' without turning html/body into scroll containers */
html, body { overflow-x: clip !important; }

/* small phones: long tracked labels wrap instead of running off the screen */
@media (max-width: 640px) {
  main div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; letter-spacing: 0.12em; line-height: 1.5; max-width: 100%; }
  .nav-actions { gap: 8px; }
  .btn-nav-cta { padding: 10px 12px !important; letter-spacing: 0.1em; font-size: 0.62rem !important; white-space: nowrap; }
  .brand-logo-img { height: 36px; }
  .brand-logo-container { padding: 2px 6px !important; }
  .nav-container { padding: 0 8px; }
}

/* ============================================================
   v12 — 4K LOGO WITHOUT THE TAGLINE STRIP, TAGLINE AS TEXT, HERO NAME ON ONE LINE
   assets/brand/tps-logo-4k.png (3968×1656) is assets/logo-4k-original.png with only the
   "Something for Everyone" strip and some empty white margin left out: the star, swoosh,
   lettering and white background are the original pixels. The smaller tps-logo-*w.png
   files are straight downscales of it, used through srcset so each screen gets a sharp copy.
============================================================ */
.brand-logo-img,
.footer-logo-img {
  aspect-ratio: 3968 / 1656 !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.brand-logo-img { height: 52px !important; }
.footer-logo-img { height: 76px !important; }
.brand-logo-container { padding: 2px 8px !important; }
@media (max-width: 1024px) { .brand-logo-img { height: 46px !important; } }
@media (max-width: 480px) { .brand-logo-img { height: 38px !important; } }

/* the official tagline, set as type */
.brand-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
}
.hero-brand-tagline {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 2px 0 24px !important;
  font-size: clamp(0.72rem, 0.95vw, 0.9rem) !important;
  letter-spacing: 0.52em;
  color: var(--sky-deep) !important;
}
.hero-brand-tagline::before,
.hero-brand-tagline::after {
  content: '';
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
/* letter-spacing also trails the last letter; pull it back so the line stays centred */
.hero-brand-tagline::after { margin-left: -0.52em; }
.footer-brand-tagline {
  margin: 16px 0 4px;
  font-size: 0.74rem;
  letter-spacing: 0.4em;
  color: var(--sky-blue) !important;
}
@media (max-width: 768px) {
  .hero-brand-tagline { letter-spacing: 0.32em; gap: 12px; }
  .hero-brand-tagline::after { margin-left: -0.32em; }
  .hero-brand-tagline::before, .hero-brand-tagline::after { width: 22px; }
}

/* "The Polite Solution" keeps one line wherever it fits: the size is capped so the
   name never outgrows the 1120px column (it wrapped "Solution" between ~1580 and 1920px) */
.hero-title { font-size: clamp(2.5rem, 6vw, 5.7rem) !important; }
@media (min-width: 769px) { .hero-title { white-space: nowrap; } }

/* opening animation: same logo file, tagline appears as type beneath "Solution" */
.intro-stage { aspect-ratio: 3968 / 1656 !important; }
.intro-logo { object-fit: contain !important; object-position: center !important; }
.intro-comet { left: 23.7% !important; top: 26.1% !important; }
.intro-tagline {
  position: absolute;
  right: 2.1%;
  top: calc(100% + 4px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.62rem, 1.5vw, 0.86rem);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.intro-overlay.is-playing .intro-tagline { animation: tpsTaglineIn 0.55s var(--ease-sky) 1.15s forwards; }
@keyframes tpsTaglineIn {
  from { opacity: 0; letter-spacing: 0.9em; }
  to { opacity: 1; letter-spacing: 0.42em; }
}
.intro-overlay.is-leaving .intro-tagline { opacity: 0 !important; animation: none; transition: opacity 0.35s ease; }
.intro-overlay.is-skipped .intro-tagline { animation: none; }

/* very narrow phones (320px): let grid columns shrink below their longest word */
@media (max-width: 768px) {
  .ecosystem-cards-grid, .pillars-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .eco-card, .pillar-card { min-width: 0; }
  .eco-card-title, .eco-card-desc, .eco-card-badge { overflow-wrap: anywhere; }
}

/* ============================================================
   v13 — LOGO BACKGROUND FOLLOWS THE SKY
   Day (light sky): the logo's own white background is not shown as a box. sky.js adds a
   tiny inline SVG filter (#tps-logo-unwhite) that turns only the white/near-white pixels
   transparent at display time; every navy and sky-blue pixel keeps its exact colour and
   full opacity. The PNG files and the logo's proportions are untouched.
   Night (navy sky): the white plate fades in behind the logo, so it shows on its
   original white background. The switch follows html.sky-night, which sky.js sets from
   the section under the navbar while scrolling (a 0.6 s cross-fade).
============================================================ */
html.logo-unwhite .brand-logo-img,
html.logo-unwhite .intro-logo { filter: url(#tps-logo-unwhite) !important; }
.brand-logo-container {
  transition: background-color 0.6s var(--ease-sky), border-color 0.6s var(--ease-sky), box-shadow 0.6s var(--ease-sky), transform 0.45s var(--ease-sky) !important;
}
html.logo-unwhite:not(.sky-night) .brand-logo-container {
  background-color: rgba(255, 255, 255, 0) !important;
  border-color: rgba(255, 255, 255, 0) !important;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) !important;
}
html.sky-night .brand-logo-container { background-color: #FFFFFF !important; }

/* opening animation: the logo flies to the navbar without a white box (it lands in daylight) */
html.logo-unwhite .intro-overlay.is-leaving .intro-logo-3d {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   v14 — OPENING ANIMATION: THE LOGO ASSEMBLES FROM ITS WORDS
   intro.js adds four copies of the same logo image (.ip), each clipped to one element:
   star & swoosh, "THE", "POLITE", "SOLUTION". The clip shapes share edges and cover all of
   the artwork exactly once, so at rest the copies line up pixel-for-pixel; the original
   single image then takes over (at 1.72 s, after the existing sweep has finished behind it).
   Everything else in the intro (cloud, counter, comet, focus, sweep, sheen, tagline, cloud
   parting, glide to the navbar, skip) is unchanged — the sheen and tagline simply wait
   until the words have landed.
   Clip coordinates are % of the logo image (3968×1656, from the original at 4×).
============================================================ */
.intro-logo-3d { overflow: visible !important; }
.intro-pieces { position: absolute; inset: 0; pointer-events: none; --s: 1; }
.intro-pieces .ip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}
html.logo-unwhite .intro-pieces .ip { filter: url(#tps-logo-unwhite); }

/* star & swoosh (turns into place around the star itself, where the comet lands) */
.ip-mark {
  clip-path: polygon(0% 0%, 42.54% 0%, 42.54% 54.59%, 11.39% 54.59%, 11.39% 60.63%, 14.11% 60.63%, 14.11% 100%, 0% 100%);
  transform-origin: 23.7% 26.1%;
  --tx: calc(-4% * var(--s)); --ty: calc(-7% * var(--s)); --rot: -16deg; --sc: 0.84;
  --delay: 0.1s; --d: 1.05s;
}
.ip-the {
  clip-path: polygon(11.39% 54.59%, 42.54% 54.59%, 42.54% 80.43%, 14.11% 80.43%, 14.11% 60.63%, 11.39% 60.63%);
  transform-origin: 27% 68%;
  --tx: calc(-14% * var(--s)); --ty: calc(12% * var(--s)); --rot: 0deg; --sc: 1;
  --delay: 0.18s; --d: 1.15s;
}
.ip-polite {
  clip-path: inset(51.45% 0 19.57% 43.15%);
  transform-origin: 72% 66%;
  --tx: calc(15% * var(--s)); --ty: calc(-3% * var(--s)); --rot: 0deg; --sc: 1;
  --delay: 0.26s; --d: 1.22s;
}
.ip-solution {
  clip-path: inset(80.92% 0 0 61.69%);
  transform-origin: 81% 90%;
  --tx: calc(9% * var(--s)); --ty: calc(26% * var(--s)); --rot: 0deg; --sc: 1;
  --delay: 0.34s; --d: 1.26s;
}
@media (max-width: 640px) { .intro-pieces { --s: 0.6; } }

/* each word first shows on its own, apart from the others, then glides into its place */
@keyframes tpsPieceIn {
  0% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc)); animation-timing-function: linear; }
  24% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc)); animation-timing-function: cubic-bezier(0.65, 0, 0.18, 1); }
  100% { opacity: 1; transform: none; }
}
.intro-overlay.has-pieces.is-playing .intro-pieces .ip { animation: tpsPieceIn var(--d) var(--delay) both; }

/* hand-over to the single original image once every word has landed */
.intro-overlay.has-pieces .intro-logo { opacity: 0; }
.intro-overlay.has-pieces.is-playing .intro-logo {
  animation: tpsIntroWipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards, tpsPieceSwapIn 0.14s linear 1.72s forwards;
}
.intro-overlay.has-pieces.is-playing .intro-pieces { animation: tpsPieceSwapOut 0.14s linear 1.72s forwards; }
@keyframes tpsPieceSwapIn { to { opacity: 1; } }
@keyframes tpsPieceSwapOut { to { opacity: 0; visibility: hidden; } }

/* light sweep and tagline follow once the logo is complete */
.intro-overlay.has-pieces.is-playing .intro-sheen { animation: tpsIntroSheen 0.8s ease-in-out 1.85s forwards; }
.intro-overlay.has-pieces.is-playing .intro-tagline { animation: tpsTaglineIn 0.55s var(--ease-sky) 1.8s forwards; }

/* skipping jumps straight to the complete original logo */
.intro-overlay.is-skipped .intro-pieces { display: none; }
.intro-overlay.has-pieces.is-skipped .intro-logo { opacity: 1; animation: none; }

/* ============================================================
   v15 — WHITE GLASS HEADER EVERYWHERE, LOGO WITHOUT ITS WHITE BOX,
   SPACED WORD ASSEMBLY, LEADERSHIP CARDS (About)
============================================================ */

/* ---------- Header: stays white frosted glass over day and night sections ---------- */
.navbar,
html.sky-night .navbar {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 40px -24px rgba(4, 32, 100, 0.45) !important;
}
.navbar.scrolled,
html.sky-night .navbar.scrolled { background: rgba(255, 255, 255, 0.9) !important; }
html.sky-night .navbar { background: rgba(255, 255, 255, 0.93) !important; }
html.sky-night .nav-link,
html.sky-night .nav-link.active { color: var(--ink) !important; }
html.sky-night .mobile-toggle span { background-color: #0F172A; }
html.sky-night .btn-nav-cta { background: var(--ink) !important; border-color: var(--ink) !important; color: #FFFFFF !important; }
html.sky-night .btn-nav-cta:hover { background: var(--sky-deep) !important; border-color: var(--sky-deep) !important; }
html.sky-night .nav-dropdown-menu { background: #FAFCFF !important; border-color: rgba(255, 255, 255, 0.9) !important; }
html.sky-night .nav-dropdown-link { color: var(--ink) !important; }
html.sky-night .nav-dropdown-link:hover { background: rgba(4, 32, 100, 0.05) !important; }
@media (max-width: 1024px) {
  html.sky-night .nav-menu { background: #F7FAFE !important; border-color: rgba(255, 255, 255, 0.9) !important; }
}

/* ---------- Header logo: never a white box (the header is white glass at all times) ---------- */
html.logo-unwhite .brand-logo-container,
html.logo-unwhite.sky-night .brand-logo-container {
  background-color: rgba(255, 255, 255, 0) !important;
  border-color: rgba(255, 255, 255, 0) !important;
  box-shadow: none !important;
}

/* ---------- Footer: a white glass panel floating on the night sky (matches the header) ----------
   The logo sits on white glass here too, so — like the header — it never needs a white box:
   the display-time filter hides its white pixels and the artwork shows unchanged. */
.footer { padding: 70px 0 36px !important; }
.footer > .container {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 30px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 40px 90px -40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(84, 172, 228, 0.12);
  padding: 52px 44px 28px !important;
  width: calc(100% - 32px);
}
.footer-top-grid { margin-bottom: 36px !important; }
.footer .footer-tagline { color: var(--ink) !important; }
.footer .footer-brand-col p, .footer .footer-brand-col .footer-desc, .footer .container p { color: var(--day-body) !important; }
.footer .footer-links-col h4 { color: var(--sky-deep) !important; }
.footer .footer-links-list li a { color: var(--day-body) !important; }
.footer .footer-links-list li a:hover { color: var(--ink) !important; }
.footer .footer-bottom-bar { border-top-color: var(--line-day) !important; }
.footer .footer-copyright, .footer .footer-sub-notice { color: var(--day-muted) !important; }
.footer .footer-brand-tagline { color: var(--sky-deep) !important; }
html.logo-unwhite .footer-logo-img { filter: url(#tps-logo-unwhite); }
html.logo-unwhite .footer-logo-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .footer > .container { padding: 36px 22px 22px !important; width: calc(100% - 20px); border-radius: 24px; }
}

/* ---------- Opening animation: words first stand apart, evenly spaced, then gather ----------
   The star turns into place around itself (where the comet lands); "THE", "POLITE" and
   "SOLUTION" start lowered and spread out with clear gaps, then glide into the lockup. */
.intro-overlay.has-pieces.is-playing .intro-logo-3d { animation: tpsLogoMist 0.8s var(--ease-sky) 0.08s forwards !important; }
.ip-mark { --tx: 0%; --ty: 0%; --rot: -14deg; --sc: 0.88; --delay: 0.1s; --d: 1.6s; }
.ip-the { --tx: calc(4% * var(--s)); --ty: calc(16% * var(--s)); --rot: 0deg; --sc: 1; --delay: 0.15s; --d: 1.6s; }
.ip-polite { --tx: calc(13% * var(--s)); --ty: calc(16% * var(--s)); --rot: 0deg; --sc: 1; --delay: 0.2s; --d: 1.6s; }
.ip-solution { --tx: calc(13% * var(--s)); --ty: calc(30% * var(--s)); --rot: 0deg; --sc: 1; --delay: 0.25s; --d: 1.6s; }
@keyframes tpsPieceSpaced {
  0% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc)); animation-timing-function: ease-out; }
  28% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc)); animation-timing-function: linear; }
  52% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc)); animation-timing-function: cubic-bezier(0.65, 0, 0.18, 1); }
  100% { opacity: 1; transform: none; }
}
.intro-overlay.has-pieces.is-playing .intro-pieces .ip { animation: tpsPieceSpaced var(--d) var(--delay) both; }
.intro-overlay.has-pieces.is-playing .intro-logo {
  animation: tpsIntroWipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards, tpsPieceSwapIn 0.14s linear 1.9s forwards;
}
.intro-overlay.has-pieces.is-playing .intro-pieces { animation: tpsPieceSwapOut 0.14s linear 1.9s forwards; }
.intro-overlay.has-pieces.is-playing .intro-sheen { animation: tpsIntroSheen 0.8s ease-in-out 1.95s forwards; }
.intro-overlay.has-pieces.is-playing .intro-tagline { animation: tpsTaglineIn 0.55s var(--ease-sky) 1.95s forwards; }

/* ---------- About: leadership ---------- */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0 0 72px;
}
.leader-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: 40px 32px 34px;
  border-radius: 28px;
  color: #FFFFFF;
  background:
    radial-gradient(1.1px 1.1px at 16% 20%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 88% 62%, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 30% 84%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
    radial-gradient(80% 70% at 50% 0%, rgba(84, 172, 228, 0.22) 0%, transparent 65%),
    linear-gradient(165deg, #0A2468 0%, #04154A 58%, #020B2C 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 80px -46px rgba(2, 11, 44, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.5s var(--ease-sky), box-shadow 0.5s var(--ease-sky), border-color 0.4s ease;
}
.leader-card:hover {
  transform: translateY(-4px);
  border-color: rgba(84, 172, 228, 0.45);
  box-shadow: 0 50px 90px -46px rgba(2, 11, 44, 0.9), 0 0 0 1px rgba(84, 172, 228, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.leader-avatar {
  width: 82px;
  height: 82px;
  margin: 0 auto 22px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.leader-avatar--vm { background: linear-gradient(140deg, #22C58B 0%, #14B8A6 100%); }
.leader-avatar--kg { background: linear-gradient(140deg, #14B8A6 0%, #0EA5E9 100%); }
.leader-name {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 1.45rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  margin-bottom: 6px;
}
p.leader-role {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sky-blue) !important;
  margin-bottom: 16px;
}
p.leader-bio { color: var(--night-body) !important; font-size: 0.98rem; line-height: 1.7; max-width: 340px; margin: 0 auto; }
.leader-contact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.leader-contact-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.leader-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #9FD3F5 !important;
  text-decoration: none;
}
.leader-phone:hover { color: #FFFFFF !important; }
@media (max-width: 720px) {
  .leadership-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .leader-card { padding: 34px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) { .leader-card:hover { transform: none; } }

/* ============================================================
   v16 — LIQUID GLASS HEADER & FOOTER, COMPACT FOOTER, GRAVITY LINE
============================================================ */

/* ---------- Liquid glass (header + footer panel): white, but you can see the sky through it ----------
   translucent white gradient + strong backdrop blur/brightness, a top-edge highlight,
   inner light rim, soft depth shadow and a slow light reflection gliding across. */
.navbar,
html.sky-night .navbar,
.navbar.scrolled,
html.sky-night .navbar.scrolled,
.footer > .container {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.56) 55%, rgba(255, 255, 255, 0.66) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.06) !important;
  backdrop-filter: blur(26px) saturate(185%) brightness(1.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 24px rgba(255, 255, 255, 0.35),
    0 22px 50px -26px rgba(4, 32, 100, 0.5) !important;
}
/* over the night sky the glass brightens what is behind it, so it still reads white */
html.sky-night .navbar,
html.sky-night .navbar.scrolled,
.footer > .container {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.86) 100%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.5) !important;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.5) !important;
}
.navbar.scrolled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 24px rgba(255, 255, 255, 0.35), 0 26px 56px -24px rgba(4, 32, 100, 0.55) !important; }

.navbar::before,
.footer > .container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 140% at 12% -30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(90% 120% at 100% 130%, rgba(84, 172, 228, 0.16) 0%, rgba(84, 172, 228, 0) 55%);
}
.navbar::after,
.footer > .container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0.15) 52%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  mix-blend-mode: soft-light;
  animation: tpsGlassGlint 11s ease-in-out 3s infinite;
}
.footer > .container::after { animation-delay: 6s; }
@keyframes tpsGlassGlint {
  0%, 72% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
.footer > .container { position: relative; isolation: isolate; }
.navbar { isolation: isolate; }

/* ---------- Compact footer ---------- */
.footer { padding: 36px 0 24px !important; }
.footer-swoosh { top: -30px !important; }
.footer > .container { padding: 30px 36px 16px !important; border-radius: 26px; }
.footer-top-grid {
  grid-template-columns: 1.55fr 1fr 1fr 1fr !important;
  gap: 28px !important;
  margin-bottom: 20px !important;
  align-items: start;
}
.footer-logo-img { height: 56px !important; }
.footer-logo-container { margin-bottom: 0 !important; }
.footer .footer-brand-tagline { margin: 10px 0 2px; font-size: 0.66rem; }
.footer .footer-tagline { font-size: 0.86rem !important; letter-spacing: 0.1em; line-height: 1.5; margin-bottom: 8px !important; }
.footer .footer-desc { font-size: 0.86rem !important; line-height: 1.6 !important; max-width: 340px; }
.footer .footer-links-col h4 { margin: 4px 0 12px !important; }
.footer .footer-links-list { gap: 8px !important; }
.footer .footer-links-list li a { font-size: 0.9rem !important; }
.footer .footer-bottom-bar { padding-top: 14px !important; font-size: 0.8rem !important; gap: 8px !important; }
@media (max-width: 1024px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .footer-brand-col { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; max-width: none !important; }
  .footer-brand-col > a { grid-row: span 3; }
  .footer .footer-desc { max-width: none; }
}
@media (max-width: 600px) {
  .footer { padding: 28px 0 16px !important; }
  .footer > .container { padding: 24px 18px 14px !important; width: calc(100% - 20px); border-radius: 22px; }
  .footer-top-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
  .footer-brand-col { display: block; text-align: left; }
  .footer-logo-img { height: 48px !important; }
  .footer .footer-links-col:last-child { grid-column: span 2; }
  .footer .footer-links-col:last-child .footer-links-list { flex-direction: row; flex-wrap: wrap; gap: 6px 18px !important; }
  .footer .footer-bottom-bar { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Gravity line above the footer (gravity.js) ---------- */
main > section.gravity-section { --sky-tone: 1; }
.gravity-section {
  position: relative;
  height: clamp(300px, 48vh, 520px);
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.gravity-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: pan-y;
}
.gravity-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(84, 172, 228, 0.6); }
p.gravity-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--night-muted) !important;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
p.gravity-hint.is-used { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gravity-section { cursor: default; }
  p.gravity-hint { display: none; }
  .navbar::after, .footer > .container::after { animation: none; }
}

/* ---------- v17: seamless band above the footer ---------- */
/* no hairline or swoosh where the band meets the footer */
.footer { border-top: 0 !important; }
.footer-swoosh { display: none !important; }
/* the canvas fades out at its top and bottom edges, so nothing is ever cut by a hard edge */
.gravity-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.gravity-section { -webkit-touch-callout: none; }
.gravity-section.has-orb { cursor: none; }
p.gravity-hint { bottom: 16px; }
@media (max-width: 600px) {
  .gravity-section { height: clamp(300px, 50vh, 420px); }
}

/* ---------- v18: footer panel matched to the header ----------
   Same width, corner radius, edge gap, logo size and logo inset as the header; the brand
   column keeps the logo and "Something for Everyone" only. Liquid glass unchanged. */
.footer { padding: 22px 0 12px !important; }
.footer > .container {
  width: calc(100% - 32px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  padding: 10px 22px 0 21px !important;
}
.footer-top-grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 24px !important;
  margin-bottom: 0 !important;
  padding-bottom: 14px;
}
.footer-brand-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo-img { height: 52px !important; }
.footer .footer-brand-tagline { margin: 6px 0 0 !important; }
.footer .footer-links-col { padding-top: 12px; }
.footer .footer-links-col h4 { margin: 0 0 10px !important; }
.footer .footer-links-list { gap: 6px !important; }
@media (min-width: 701px) { .footer .footer-links-list li { line-height: 1.35; } }
.footer .footer-brand-tagline { white-space: nowrap; }
.footer .footer-bottom-bar { padding: 11px 0 12px !important; }
@media (max-width: 1024px) {
  .footer { padding: 18px 0 10px !important; }
  .footer > .container { width: calc(100% - 20px) !important; border-radius: 18px !important; padding: 10px 20px 0 21px !important; }
  .footer-top-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; gap: 18px !important; }
  .footer .footer-brand-tagline { font-size: 0.6rem !important; letter-spacing: 0.3em !important; }
  .footer-brand-col { grid-column: auto; display: flex; max-width: none !important; }
  .footer-brand-col > a { grid-row: auto; }
  .footer-logo-img { height: 46px !important; }
}
@media (max-width: 700px) {
  .footer > .container { padding: 8px 16px 0 17px !important; }
  .footer-top-grid { grid-template-columns: 1fr 1fr !important; gap: 14px 16px !important; padding-bottom: 12px; }
  .footer-brand-col { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
  .footer .footer-brand-tagline { margin: 0 !important; }
  .footer .footer-links-col { padding-top: 0; }
  .footer .footer-links-col:last-child { grid-column: 1 / -1; }
  .footer .footer-links-col:last-child .footer-links-list { flex-direction: row; flex-wrap: wrap; gap: 6px 20px !important; }
  .footer .footer-bottom-bar { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px !important; padding: 10px 0 11px !important; }
}
@media (max-width: 480px) {
  .footer-logo-img { height: 38px !important; }
}
@media (max-width: 400px) {
  .footer .footer-brand-tagline { white-space: normal; letter-spacing: 0.26em !important; line-height: 1.6; }
}

/* ---------- v20: footer brand lockup (replaces v19) ----------
   A larger logo with "Something for Everyone" tracked to the logo's width and centred under
   it. Desktop/tablet: the lockup sits centred in the brand column, so the space between the
   panel edge and the logo equals the space between the logo and the link columns, and it is
   centred against the link columns vertically. Phones: the logo on top, the tagline directly
   beneath it, both centred. The footer panel keeps its v18 size. */
.footer .footer-brand-col {
  width: max-content;
  justify-self: center;
  align-self: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer .footer-brand-col > a { display: block; line-height: 0; }
.footer-logo-img { height: 84px !important; width: auto; }
.footer .footer-brand-tagline {
  margin: 0 !important;
  white-space: nowrap;
  letter-spacing: 0.28em !important;
  margin-right: -0.28em !important;       /* cancel the trailing tracking so it centres */
  text-align: center;
}
@media (max-width: 1024px) {
  .footer-logo-img { height: 74px !important; }
  .footer .footer-brand-tagline { letter-spacing: 0.26em !important; margin-right: -0.26em !important; }
}
@media (max-width: 700px) {
  .footer .footer-brand-col {
    grid-column: 1 / -1;
    width: auto;
    justify-self: stretch;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0 6px;
  }
  .footer-logo-img { height: 58px !important; }
  .footer .footer-brand-tagline {
    padding: 0;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.3em !important;
    margin-right: -0.3em !important;
  }
}
@media (max-width: 374px) {
  .footer-logo-img { height: 52px !important; }
  .footer .footer-brand-tagline { letter-spacing: 0.24em !important; margin-right: -0.24em !important; }
}

/* ---------- v20: large screens (2200px+ CSS width: big monitors at 100% scaling, TVs) ----------
   Text is rem-based, so the root size scales it; the main widths, header and footer grow by
   the same factor so the layout keeps its proportions instead of shrinking into the middle. */
@media (min-width: 2200px) { :root { --xl: 1.2; } html { font-size: 19px; } }
@media (min-width: 2900px) { :root { --xl: 1.45; } html { font-size: 23px; } }
@media (min-width: 3600px) { :root { --xl: 1.75; } html { font-size: 28px; } }
@media (min-width: 2200px) {
  .container { max-width: calc(1240px * var(--xl)); }
  .navbar { max-width: calc(1280px * var(--xl)); border-radius: calc(20px * var(--xl)); }
  .nav-container { height: calc(72px * var(--xl)); }
  .brand-logo-img { height: calc(52px * var(--xl)) !important; }
  .footer > .container { max-width: calc(1280px * var(--xl)) !important; border-radius: calc(20px * var(--xl)) !important; }
  .footer-logo-img { height: calc(84px * var(--xl)) !important; }
  .hero-content { max-width: calc(1120px * var(--xl)); }
  .hero-visual-stage { max-width: calc(1180px * var(--xl)); }
  .principles-grid { max-width: calc(1040px * var(--xl)); }
  .vision-quote-statement { max-width: calc(1020px * var(--xl)) !important; }
  /* reading widths grow with the text so lines keep the same length */
  .hero-description { max-width: calc(700px * var(--xl)); }
  .section-header, .section-header[style*="text-align: left"] { max-width: calc(840px * var(--xl)); }
  .section-subtitle, .subpage-hero .section-subtitle { max-width: calc(760px * var(--xl)); }
  .hero-flagship-callout { max-width: calc(760px * var(--xl)); }
  .principle-desc { max-width: calc(560px * var(--xl)); }
  .vision-supporting-text { max-width: calc(740px * var(--xl)); }
  .whats-next-card { max-width: calc(860px * var(--xl)); }
  .whats-next-card p { max-width: calc(680px * var(--xl)); }
  p.leader-bio { max-width: calc(340px * var(--xl)); }
  main p[style*="max-width"] { max-width: calc(800px * var(--xl)) !important; }
}

/* ---------- v20: mobile menu fits short screens ----------
   On short screens (landscape phones) the open menu scrolls inside itself instead of running
   past the bottom edge, where its last links could not be reached. */
@media (max-width: 1024px) {
  .nav-menu {
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1024px) and (max-height: 500px) {
  .nav-menu { padding-top: 14px !important; padding-bottom: 14px !important; }
  .nav-list { gap: 8px !important; }
}

/* ---------- v20: contact-form anti-spam field (never visible) ---------- */
.form-hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form-hp > * { display: block; width: 1px !important; min-width: 0 !important; max-width: 1px; height: 1px; padding: 0 !important; border: 0 !important; }