/* =========================================================
   Ishavasyam.org — Space Research Organisation
   Stylesheet
   ========================================================= */

/* Self-hosted (SIL Open Font License 1.1; licences in /assets/fonts): Cormorant Garamond (display),
   Inter (body — the same file the Space Station page uses, so it is cached across pages) and
   Noto Serif Devanagari 600 (Sanskrit). Variable woff2 subsets from Google Fonts. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Devanagari";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-devanagari-600-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

:root {
  --background-primary: #050619;
  --background-secondary: #11143b;
  --background-card: #0e0d2a;
  --accent-violet: #553c9a;
  --orbital-purple: #6a55a5;
  --gold-primary: #d7b567;
  --gold-cta: #e8c96f;
  --gold-hover: #f1d995;
  --text-heading: #f6f2e9;
  --text-body: #c5c0d2;
  --border-gold: rgba(215, 181, 103, 0.3);

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-devanagari: "Noto Serif Devanagari", "Noto Sans Devanagari", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--background-primary);
  color: var(--text-heading);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ==== ISHAVASYAM.ORG site shell ==================================================
   Identical in assets/css/home.css and styles.css — tests/site.test.mjs fails if they drift.
   System A, full bleed: sections, hero art, the 3D scene and page-wide rules span the viewport.
   System B, content grid: every logo, heading, paragraph, control and footer line sits in
   .container — one max width and one fluid gutter (18px at 320, ~22px at 390, 24px at 430,
   40px from ~715px up), widened to the safe area on notched screens. */
:root {
  --site-max: 1240px;
  --site-gutter: clamp(18px, 5.6vw, 40px);
  --site-gutter-l: max(var(--site-gutter), env(safe-area-inset-left, 0px));
  --site-gutter-r: max(var(--site-gutter), env(safe-area-inset-right, 0px));
  --site-header-h: 64px;
}
.container {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-left: var(--site-gutter-l);
  padding-right: var(--site-gutter-r);
}
/* Header: brand on the left content edge, navigation centred on the site axis, action on the
   right content edge. Both pages switch between the collapsed menu and this layout at 1024px —
   the same breakpoint as the Space Station desktop hero, and the narrowest width at which the
   six-item Space Station navigation still fits centred beside its logo. */
@media (min-width: 1024px) {
  .site-header .container.header-shell {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
  }
  .site-header .header-shell > :first-child { grid-column: 1; justify-self: start; }
  .site-header .header-shell > .primary-nav { grid-column: 2; }
  .site-header .header-shell > :last-child { grid-column: 3; justify-self: end; }
}
/* ==== end site shell ============================================================== */

/* Visually-hidden but accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--gold-primary);
  color: var(--background-primary);
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--gold-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Section scaffolding ---------- */
/* Mobile ≈64-80px, tablet ≈80-96px, desktop ≈96-120px */
section {
  position: relative;
  padding-block: clamp(4rem, 3vw + 3.5rem, 7.5rem);
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.section-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  color: var(--text-heading);
  max-width: 42rem;
}

.section-intro {
  max-width: 46rem;
  color: var(--text-body);
  font-size: 1.05rem;
  margin-top: 1.75rem;
}

.section-head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head.center {
  text-align: center;
  margin-inline: auto;
}

.section-head.center .section-heading,
.section-head.center .section-intro {
  margin-inline: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-cta));
  color: var(--background-primary);
  border: 1px solid transparent;
  box-shadow: 0 8px 30px -10px rgba(215, 181, 103, 0.55);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-cta), var(--gold-hover));
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -8px rgba(241, 217, 149, 0.6);
}

.btn-secondary {
  background: rgba(246, 243, 234, 0.04);
  color: var(--text-heading);
  border: 1px solid rgba(215, 181, 103, 0.45);
  backdrop-filter: blur(6px);
}

.btn-secondary:hover {
  border-color: var(--gold-hover);
  background: rgba(246, 243, 234, 0.08);
  transform: translateY(-2px);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--site-header-h);
  display: flex;
  align-items: center;
  background: transparent;
  /* a faint full-bleed rule: the header band spans the viewport, as on the Space Station page */
  border-bottom: 1px solid rgba(215, 181, 103, 0.1);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(5, 7, 24, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(215, 181, 103, 0.16);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: var(--text-heading);
}

.brand-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.primary-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-body);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.25s var(--ease);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--text-heading);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* same header-action geometry as the Space Station page (40px); the gold pill stays Philosophy's own */
.header-actions .btn {
  min-height: 40px;
  padding: 0.5rem 1.15rem;
  font-size: 0.87rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-heading);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .primary-nav {
    position: fixed;
    inset-block-start: var(--site-header-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--background-primary);
    border-bottom: 1px solid rgba(215, 181, 103, 0.18);
    padding: 0.5rem var(--site-gutter-r) 1.5rem var(--site-gutter-l);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }

  body.nav-open .primary-nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .primary-nav a:not(.btn) {
    width: 100%;
    padding-block: 0.9rem;
    border-bottom: 1px solid rgba(200, 194, 219, 0.08);
    font-size: 1rem;
  }

  .header-actions .btn-primary {
    display: none;
  }

  .primary-nav a.btn-primary.mobile-cta {
    display: inline-flex;
    width: 100%;
    margin-top: 0.75rem;
    color: var(--background-primary);
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Lock background scrolling while the mobile menu is open */
  body.nav-open {
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .mobile-cta {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--site-header-h) + 2.5rem) 4rem;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* The text-safe zone follows the shared content column (its centre sits 18rem inside the left
     content edge) instead of darkening the browser edges, so the artwork reaches both viewport
     edges on wide screens rather than sitting in a dark frame. */
  --text-x: calc(max(0px, (100% - var(--site-max)) / 2) + var(--site-gutter-l) + 18rem);
  background:
    radial-gradient(ellipse 58rem 46rem at var(--text-x) 56%, rgba(5, 7, 24, 0.84) 0%, rgba(5, 7, 24, 0.6) 42%, rgba(5, 7, 24, 0) 74%),
    linear-gradient(90deg, rgba(5, 7, 24, 0.5) 0%, rgba(5, 7, 24, 0.18) 42%, rgba(5, 7, 24, 0) 62%),
    linear-gradient(0deg, rgba(5, 7, 24, 0.85) 0%, rgba(5, 7, 24, 0) 28%),
    linear-gradient(180deg, rgba(5, 7, 24, 0.5) 0%, rgba(5, 7, 24, 0) 18%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-hover);
  margin-bottom: 1.25rem;
  display: inline-block;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 6vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  text-wrap: balance;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--gold-hover);
  margin-top: 1.1rem;
  text-wrap: balance;
}

.hero-description {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--text-body);
  max-width: 34rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

.scroll-indicator {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-body);
  opacity: 0.75;
}

.scroll-indicator .chevron {
  width: 14px;
  height: 14px;
  border-right: 1.5px solid var(--gold-primary);
  border-bottom: 1.5px solid var(--gold-primary);
  transform: rotate(45deg);
  animation: scroll-bounce 2.2s var(--ease) infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

@media (max-width: 767px) {
  .hero {
    align-items: flex-end;
    padding-block-end: 3.5rem;
  }
  .hero-media img {
    object-position: 77% 14%;
  }
  /* Phones: sized to the hero, the art put Vishnu's face (~38% down the source) in the same band
     as the heading. Instead the art box is one screen tall — whatever height the text gives the
     hero — and lifted by 10%, so the face sits ~28% down the screen; the text never starts above
     40% of the screen, and the art fades out beneath it. */
  .hero {
    padding-top: max(calc(var(--site-header-h) + 2.5rem), 40vh);
    padding-top: max(calc(var(--site-header-h) + 2.5rem), 40svh);
  }
  .hero-media {
    bottom: auto;
    top: -10vh;
    top: -10svh;
    height: 100vh;
    height: 100svh;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
}
/* the phone crop (see philosophy.html) is centred on the same region object-position 77% selected */
@media (max-width: 767px) and (orientation: portrait) {
  .hero-media img { object-position: 50% 14%; }
  .hero-scrim {
    background:
      linear-gradient(0deg, rgba(5, 7, 24, 0.97) 10%, rgba(5, 7, 24, 0.55) 45%, rgba(5, 7, 24, 0.35) 65%, rgba(5, 7, 24, 0.7) 100%);
  }
  .hero-content { max-width: 100%; }
  .hero-ctas .btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-media img { object-position: 68% 22%; }
}

/* Portrait tablets: the art is scaled to the viewport height, so only the horizontal focal point
   matters. Vishnu's face sits at ~78% of the source width; 83% places it at ~72% of the screen,
   clear of the text column, instead of cut by the right edge. */
@media (min-width: 768px) and (orientation: portrait) {
  .hero-media img { object-position: 83% 24%; }
}

/* ---------- Vision ---------- */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.vision-text .section-heading {
  margin-bottom: 1.75rem;
}

.vision-text p + p {
  margin-top: 1.1rem;
}

.vision-text p {
  color: var(--text-body);
  font-size: 1.05rem;
  max-width: 62ch;
}

.vision-motif {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision-motif svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

@media (min-width: 900px) {
  .vision-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
  }
}

/* Ambient nebula backdrop, used on multiple sections */
.section-vision,
.section-approach {
  background: radial-gradient(60% 60% at 15% 10%, rgba(85, 60, 154, 0.22), transparent 60%),
              radial-gradient(50% 50% at 90% 90%, rgba(128, 100, 199, 0.14), transparent 60%),
              var(--background-primary);
}

/* ---------- Guru Vandana ---------- */
.section-guru {
  background: var(--background-secondary);
  border-block: 1px solid rgba(215, 181, 103, 0.14);
}

.guru-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  text-align: center;
}

.guru-portrait {
  display: flex;
  justify-content: center;
  position: relative;
}

/* Gently oval frame — width scales with viewport, height follows from the
   aspect-ratio (desktop ≈380-440px, tablet ≈320-360px, mobile ≈240-290px) */
.guru-frame {
  position: relative;
  width: clamp(240px, 20vw + 160px, 420px);
  aspect-ratio: 5 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient glow sits behind the frame and is free to bleed past its edge */
.guru-frame::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 217, 149, 0.28) 0%, rgba(215, 181, 103, 0.1) 45%, rgba(215, 181, 103, 0) 70%);
  filter: blur(1px);
}

/* The clip boundary + single gold border live on their own layer so the
   glow (on the parent) is never clipped and the border never gets scaled
   by any image transform below */
.guru-frame picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-primary);
  box-shadow: 0 18px 46px -16px rgba(0, 0, 0, 0.65);
  background: var(--background-secondary);
}

.guru-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased right of centre to crop toward the book/shell at the lower-left
     edge of the source photograph while keeping the face, raised hand and
     full seated posture in view */
  object-position: 54% 50%;
}

.guru-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guru-mantra {
  font-family: var(--font-devanagari);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--gold-hover);
  font-weight: 600;
  line-height: 1.5;
}

.guru-heading {
  margin-top: 1.5rem;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--text-heading);
}

.guru-text {
  margin-top: 1.25rem;
  max-width: 34rem;
  color: var(--text-body);
  font-size: 1.05rem;
}

.guru-closing {
  margin-top: 1rem;
  max-width: 30rem;
  color: var(--gold-primary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
}

@media (min-width: 900px) {
  .guru-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
    text-align: left;
  }
  .guru-content {
    align-items: flex-start;
  }
  .guru-portrait {
    justify-content: flex-end;
  }
}

/* ---------- Meaning of Ishavasyam (subsection of Guru Vandana) ---------- */
.guru-divider {
  border: none;
  height: 1px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 640px;
  background: linear-gradient(90deg, transparent, var(--border-gold) 50%, transparent);
}

.meaning-panel {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  background: rgba(5, 6, 25, 0.35);
  text-align: center;
}

.meaning-heading {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--text-heading);
}

.meaning-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  text-align: left;
}

.meaning-verse {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border-gold);
}

.meaning-verse p {
  font-family: var(--font-devanagari);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.9;
  color: var(--gold-primary);
}

.meaning-verse cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-body);
}

.meaning-text p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 62ch;
}

.meaning-text p + p {
  margin-top: 1.25rem;
}

.meaning-connection {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-primary);
  font-size: 1.05rem;
}

@media (min-width: 800px) {
  .meaning-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* ---------- Research ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

.research-card {
  background: linear-gradient(160deg, rgba(85, 60, 154, 0.16), var(--background-card));
  border: 1px solid rgba(215, 181, 103, 0.18);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  height: 100%;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.research-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 181, 103, 0.5);
  background: linear-gradient(160deg, rgba(85, 60, 154, 0.24), var(--background-card));
}

.research-card .icon {
  display: block;
  width: 42px;
  height: 42px;
  color: var(--gold-primary);
  margin-bottom: 1.25rem;
}

.research-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text-heading);
  margin-bottom: 0.7rem;
}

.research-card p {
  color: var(--text-body);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ---------- Approach ---------- */
.section-approach {
  background: var(--background-secondary);
  position: relative;
  overflow: hidden;
}

/* Decorative orbital lines: must stay behind and never cross the content */
.orbit-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
}

.section-approach .container {
  position: relative;
  z-index: 1;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  border-left: 1px solid var(--border-gold);
  padding-left: 1.4rem;
}

.step .step-number {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-primary);
  letter-spacing: 0.05em;
}

.step .step-description {
  margin-top: 0.6rem;
  color: var(--text-body);
  font-size: 0.98rem;
  line-height: 1.6;
}

.integrity-panel {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--gold-primary);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(215, 181, 103, 0.08), rgba(85, 60, 154, 0.12));
  text-align: center;
}

.integrity-panel p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--gold-hover);
  max-width: 44rem;
  margin-inline: auto;
  line-height: 1.55;
}

/* ---------- Closing CTA ---------- */
.section-connect {
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(128, 100, 199, 0.28), transparent 65%),
    linear-gradient(180deg, var(--background-primary), var(--background-secondary));
}

.connect-heading {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  max-width: 42rem;
  margin-inline: auto;
  text-wrap: balance;
}

.connect-description {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  color: var(--text-body);
  font-size: 1.05rem;
}

.section-connect .btn {
  margin-top: 2.3rem;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.connect-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-body);
  opacity: 0.75;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(215, 181, 103, 0.14);
  padding-block: 3rem 2rem;
  background: var(--background-primary);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-brand .brand-name {
  font-size: 1.15rem;
}

.footer-tagline {
  color: var(--gold-primary);
  font-size: 0.85rem;
  margin-top: 0.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-statement {
  color: var(--text-body);
  max-width: 34rem;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-links a {
  color: var(--text-body);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--gold-primary);
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(200, 194, 219, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-body);
  opacity: 0.75;
}

@media (min-width: 800px) {
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Philosophy → Engineering bridge (added with the /philosophy move) ---------- */
.section-bridge {
  background: var(--background-primary);
  border-top: 1px solid rgba(215, 181, 103, 0.14);
}

.section-bridge .bridge-link {
  margin-top: 2rem;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}