@font-face {
  font-family: 'Gopher';
  src: url('assets/fonts/Gopher-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gopher';
  src: url('assets/fonts/Gopher-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gopher';
  src: url('assets/fonts/Gopher-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gopher';
  src: url('assets/fonts/Gopher-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────
   AHAMSUTRA MEDIA LAB  ·  Landing Page
   Aesthetic: Editorial Minimalism with Eastern Soul
   Palette : Onyx + Saffron Gold + Warm Cream
   Type    : Cormorant Garamond / Syne / DM Sans
───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {}

:root {
  --onyx: #0f0e0c;
  --deep: #080706;
  --charcoal: #1a1816;
  --cream: #faf8f4;
  --parchment: #f3f0ea;
  --linen: #ebe7df;
  --gold: #c9892e;
  --gold-l: #e0a84f;
  --gold-dim: rgba(201, 137, 46, .12);
  --gold-glow: rgba(201, 137, 46, .07);
  --ash: #8a8278;
  --muted: rgba(250, 248, 244, .55);
  --rule-d: rgba(250, 248, 244, .08);
  --rule-l: rgba(15, 14, 12, .1);
  --fd: 'Gopher', Georgia, serif;
  --fh: 'Gopher', system-ui, sans-serif;
  --fb: 'Gopher', system-ui, sans-serif;
  --ease-in: cubic-bezier(.22, 1, .36, 1);
  --ease-sm: cubic-bezier(.4, 0, .2, 1);
  --ease-ex: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: var(--fb);
  background: var(--deep);
  color: var(--cream);
  overflow-x: hidden;
  cursor: none
}

body.noscroll {
  overflow: hidden
}

a,
button {
  cursor: none
}

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

/* ── SCROLL PROGRESS ── */
#sp {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-l));
  z-index: 10000;
  transition: width .1s linear
}

/* ── CUSTOM CURSOR ── */
#cd,
#cr {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

#cd {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transition: width .15s, height .15s, opacity .2s
}

#cr {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 137, 46, .5);
  transition: width .4s var(--ease-sm), height .4s var(--ease-sm), opacity .3s
}

/* ── SPLASH SCREEN ── */
#splash {
  position: fixed;
  inset: 0;
  background: var(--deep);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201, 137, 46, .05) 0%, transparent 65%);
}

.sp-inner {
  text-align: center;
  position: relative;
  z-index: 1
}

.sp-logo {
  width: clamp(200px, 45vw, 500px);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px)
}

/* ── NAVIGATION ── */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 28px 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(-40px);
}

#nav.scrolled {
  background: rgba(8, 7, 6, .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 72px;
  border-bottom-color: rgba(201, 137, 46, .12);
}

.nav-left,
.nav-right {
  flex: 1;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none
}

.nav-hero-logo {
  height: 108px;
  width: auto;
  flex-shrink: 0;
  transition: transform .3s
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none
}

.nav-links a {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, .6);
  text-decoration: none;
  transition: color .25s;
}

.nav-links a:hover {
  color: var(--gold-l)
}

.nav-cta {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--gold);
  border: none;
  padding: 10px 22px;
  text-decoration: none;
  display: inline-block;
  transition: background .25s, transform .2s;
  position: relative;
  overflow: hidden;
  border-radius: 40px;
}

.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-l);
  transform: translateX(-101%);
  transition: transform .35s var(--ease-sm)
}

.nav-cta:hover::after {
  transform: translateX(0)
}

.nav-cta span {
  position: relative;
  z-index: 1
}

.nav-cta:hover {
  transform: translateY(-1px)
}

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

.nav-hbg span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--cream);
  transition: all .3s
}

.nav-hbg.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg)
}

.nav-hbg.open span:nth-child(2) {
  opacity: 0
}

.nav-hbg.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}

/* Mobile Nav */
#mnav {
  position: fixed;
  inset: 0;
  background: var(--onyx);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  transform: translateX(100%);
  transition: transform .55s var(--ease-ex);
}

#mnav.open {
  transform: translateX(0)
}

#mnav a {
  font-family: var(--fd);
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 300;
  color: var(--cream);
  text-decoration: none;
  transition: color .2s;
  opacity: 0;
  transform: translateX(40px);
  transition: color .2s, opacity .4s var(--ease-in), transform .4s var(--ease-in);
}

#mnav.open a {
  opacity: 1;
  transform: translateX(0)
}

#mnav.open a:nth-child(1) {
  transition-delay: .05s
}

#mnav.open a:nth-child(2) {
  transition-delay: .1s
}

#mnav.open a:nth-child(3) {
  transition-delay: .15s
}

#mnav.open a:nth-child(4) {
  transition-delay: .2s
}

#mnav.open a:nth-child(5) {
  transition-delay: .25s
}

#mnav.open a:nth-child(6) {
  transition-delay: .3s
}

#mnav.open a:nth-child(7) {
  transition-delay: .35s
}

#mnav a:hover {
  color: var(--gold-l)
}

/* ── SCROLL REVEAL ── */
.rv {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .9s var(--ease-in), transform .9s var(--ease-in)
}

.rv.vis {
  opacity: 1;
  transform: translateY(0)
}

.rv1 {
  transition-delay: .1s
}

.rv2 {
  transition-delay: .2s
}

.rv3 {
  transition-delay: .3s
}

.rv4 {
  transition-delay: .4s
}

.rv5 {
  transition-delay: .5s
}

.rv6 {
  transition-delay: .6s
}

/* Line clip */
.lw {
  overflow: hidden;
  display: block
}

.lr {
  display: block;
  transform: translateY(108%);
  transition: transform .9s var(--ease-in)
}

.lr.vis {
  transform: translateY(0)
}

/* ── MARQUEE ── */
.mqb {
  width: 100%;
  overflow: hidden;
  background: var(--gold);
  padding: 13px 0
}

.mqb.reverse {
  background: var(--onyx);
  border-top: 1px solid rgba(201, 137, 46, .15);
  border-bottom: 1px solid rgba(201, 137, 46, .15);
}

.mqt {
  display: flex;
  width: max-content;
  animation: mq 28s linear infinite
}

.mqt.reverse {
  animation-direction: reverse;
}

.mqt span {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--onyx);
  white-space: nowrap;
  padding: 0 28px
}

.mqt.reverse span {
  color: var(--gold);
}

.mqt .sep {
  color: rgba(15, 14, 12, .3);
  padding: 0 4px;
  letter-spacing: 0
}

.mqt.reverse .sep {
  color: rgba(201, 137, 46, .35);
}

@keyframes mq {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ─────────────────────────────────────────────────────────
   SECTION 1  ·  HERO / MANIFESTO
───────────────────────────────────────────────────────── */
#s1 {
  min-height: 100vh;
  background: var(--onyx);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 72px 100px;
  position: relative;
  overflow: hidden;
}

#s1::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 92% 8%, rgba(201, 137, 46, .08) 0%, transparent 55%),
    radial-gradient(ellipse 35% 45% at 5% 88%, rgba(201, 137, 46, .05) 0%, transparent 50%);
  pointer-events: none;
}

.s1-inner {
  max-width: 980px;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.s1-label {
  font-family: var(--fh);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: .05em;
  color: var(--gold);
  margin-bottom: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s .2s;
}

.s1-label::before,
.s1-label::after {
  display: none;
}

.s1-label.vis {
  opacity: 1
}

.s1-additional-heading {
  font-family: var(--fd);
  font-size: 30px;
  font-weight: 300;
  color: var(--cream);
  margin-top: 48px;
  letter-spacing: .02em;
  line-height: 1.1;
  max-width: 860px;
}

.poem {
  display: flex;
  flex-direction: column;
  gap: 3px
}

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

.stanza+.stanza {
  margin-top: 10px;
}

.pl {
  overflow: hidden;
  line-height: 1.18
}

.pl .lr {
  font-family: var(--fd);
  font-size: clamp(18px, 2.5vw, 36px);
  font-weight: 300;
  color: var(--cream);
}

.pl.sm .lr {
  font-size: clamp(13px, 1.5vw, 18px);
  color: rgba(250, 248, 244, .45);
  font-family: var(--fh);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px
}

.pl.it .lr {
  font-style: italic
}

.pl.sp {
  margin-top: 0
}

.pl.gd .lr {
  color: var(--gold-l)
}

.golden-line .lr {
  color: var(--gold) !important;
}

.white-line .lr {
  color: #ffffff !important;
}

.pl.em .lr {
  font-style: italic;
  color: var(--gold-l)
}

.scroll-ind {
  position: absolute;
  bottom: 44px;
  left: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .6s;
}

.scroll-ind.vis {
  opacity: 1
}

.si-txt {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, .25);
  writing-mode: vertical-rl
}

.si-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: sip 2.2s ease-in-out infinite
}

@keyframes sip {

  0%,
  100% {
    opacity: .2;
    transform: scaleY(.5) translateY(-25%)
  }

  50% {
    opacity: .7;
    transform: scaleY(1) translateY(0)
  }
}


/* ─────────────────────────────────────────────────────────
   SECTION 3  ·  WHAT IS AHAMSUTRA
───────────────────────────────────────────────────────── */
#s3 {
  background: var(--cream);
  color: var(--onyx);
  padding: 128px 72px
}

.s3-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 88px;
  align-items: start
}

.s3-left {
  position: sticky;
  top: 120px
}

.sec-label {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold)
}

.sec-n {
  font-family: var(--fd);
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 300;
  color: rgba(201, 137, 46, .08);
  line-height: 1;
  letter-spacing: -.03em;
  margin-top: -8px;
}

.sec-h {
  font-family: var(--fd);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--onyx);
  margin-top: -28px;
}

.sec-h em {
  font-style: italic;
  color: var(--gold)
}

.sec-h.gold-l em {
  color: var(--gold-l);
}

.s3-right p {
  font-family: var(--fb);
  font-size: 15.5px;
  line-height: 1.88;
  color: #3a3530;
  margin-bottom: 22px
}

.s3-right p strong {
  font-weight: 500;
  color: var(--onyx)
}

.skt {
  border-left: 3px solid var(--gold);
  padding: 18px 22px;
  margin: 28px 0;
  background: rgba(201, 137, 46, .06);
}

.skt-margin {
  margin-top: -8px;
}

.skt-w {
  font-family: var(--fd);
  font-size: 26px;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 4px
}

.skt-m {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--ash);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500
}

/* ─────────────────────────────────────────────────────────
   SECTION 4  ·  OUR APPROACH
───────────────────────────────────────────────────────── */
#s4 {
  background: var(--parchment);
  padding: 128px 72px;
  color: var(--onyx)
}

.s4-inner {
  max-width: 1200px;
  margin: 0 auto
}

.s4-hdr {
  margin-bottom: 80px
}

.s4-hdr .sec-h {
  color: var(--onyx)
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(201, 137, 46, .1);
  border: 1px solid rgba(201, 137, 46, .15);
}

.step {
  padding: 40px 32px;
  background: var(--parchment);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background .4s var(--ease-sm);
}

.step::before {
  content: '→';
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-family: var(--fd);
  font-size: 20px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s, transform .3s;
}

.step:hover::before {
  opacity: 1;
  transform: translateX(0)
}

.step:hover {
  border-color: rgba(201, 137, 46, .28);
  background: var(--cream)
}

.step-n {
  font-family: var(--fd);
  font-size: 56px;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 8px;
  line-height: 1;
  letter-spacing: -.02em;
}

.step-t {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
  line-height: 1.2;
  position: relative;
}

.step-t em {
  font-style: italic;
  color: #000;
}

.step-d {
  font-family: var(--fb);
  font-size: 13.5px;
  line-height: 1.78;
  color: #5a544e;
  position: relative
}

/* ─────────────────────────────────────────────────────────
   SECTION 5  ·  WHAT WE DO
───────────────────────────────────────────────────────── */
#s5 {
  background: var(--charcoal);
  color: var(--cream);
  padding: 128px 72px
}

#s5 .sec-h {
  color: var(--cream);
}

.s5-inner {
  max-width: 1200px;
  margin: 0 auto
}

.s5-hdr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 72px;
  align-items: end
}

.s5-hdr-r {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted)
}

.sgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;
  background: rgba(201, 137, 46, .12);
  border: 1px solid rgba(201, 137, 46, .15);
}

.sc {
  background: var(--charcoal);
  padding: 40px 32px;
  transition: background .4s var(--ease-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden
}

.sc:hover {
  background: rgba(201, 137, 46, .07);
  border-color: rgba(201, 137, 46, .28)
}

.sc::after {
  content: '→';
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-family: var(--fd);
  font-size: 20px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s, transform .3s;
}

.sc:hover::after {
  opacity: 1;
  transform: translateX(0)
}

.sc-t {
  font-family: var(--fd);
  font-size: 34px;
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 14px;
  position: relative;
  line-height: 1.15;
  letter-spacing: -.01em
}

.sc-d {
  font-family: var(--fb);
  font-size: 14.5px;
  line-height: 1.82;
  color: var(--muted)
}

/* ─────────────────────────────────────────────────────────
   SECTION 6  ·  FLAGSHIP INITIATIVE
───────────────────────────────────────────────────────── */
#s6 {
  background: var(--onyx);
  color: var(--cream);
  padding: 128px 72px;
  position: relative;
  overflow: hidden
}

#s6::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 55% at 80% 50%, rgba(201, 137, 46, .08) 0%, transparent 60%);
  pointer-events: none;
}

.s6-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center
}

.s6-tag {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 137, 46, .1);
  border: 1px solid rgba(201, 137, 46, .2);
  padding: 5px 12px;
}

.s6-t {
  font-family: var(--fd);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 18px;
}

.s6-t em {
  font-style: italic;
  color: var(--gold-l)
}

.s6-sub {
  font-family: var(--fd);
  font-size: 19px;
  font-style: italic;
  color: rgba(250, 248, 244, .55);
  margin-bottom: 28px
}

.s6-d {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 40px
}

.s6-d p.margin-bottom {
  margin-bottom: 20px;
}

.s6-d p.margin-bottom-small {
  margin-bottom: 15px;
}

.s6-d ul {
  list-style: none;
  margin-left: 20px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s6-d ul li {
  display: flex;
  align-items: center;
}

.s6-d ul li span.gold-plus {
  color: var(--gold);
  margin-right: 12px;
}

.s6-d blockquote {
  font-family: var(--fd);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-l);
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  margin: 0;
}

.s6-vis {
  aspect-ratio: 6726 / 3466;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 137, 46, .18);
}

.s6-vis::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(8, 7, 6, .18) 0%,
      transparent 40%,
      rgba(8, 7, 6, .32) 100%);
  pointer-events: none;
}

.s6-vis-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.s6-vis:hover .s6-vis-img {
  transform: scale(1.04);
}

/* ─────────────────────────────────────────────────────────
   SECTION 7  ·  PHILOSOPHY
───────────────────────────────────────────────────────── */
#s7 {
  background: var(--cream);
  color: var(--onyx);
  padding: 128px 72px
}

.s7-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin: 0;
  margin-top: -32px;
}

.pillar {
  padding-top: 32px;
  position: relative
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .9s var(--ease-in);
}

.pillar.vis::before {
  width: 100%
}

.p-n {
  font-family: var(--fd);
  font-size: 13px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 14px
}

.p-t {
  font-family: var(--fd);
  font-size: 25px;
  font-weight: 400;
  color: var(--onyx);
  margin-bottom: 16px;
  line-height: 1.18
}

.p-t em {
  font-style: italic;
  color: var(--gold)
}

.p-d {
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.82;
  color: #5c5650
}

.philo-intro {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}

.philo-q {
  text-align: left;
  margin: 0;
}

.philo-q blockquote {
  font-family: var(--fd);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 300;
  font-style: italic;
  color: var(--onyx);
  line-height: 1.05;
  max-width: 1000px;
  margin: 0 0 32px 0;
  letter-spacing: -.02em;
}

.philo-q .philo-sub {
  font-family: var(--fd);
  font-size: 18px;
  font-style: italic;
  color: var(--ash);
  margin: 0 0 10px 0;
  text-align: left;
  line-height: 1;
}

.philo-practice {
  text-align: left;
  margin: 0;
  margin-top: -10px;
}

.philo-practice-intro {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ash);
  margin-bottom: 60px;
}

.philo-cycle {
  font-family: var(--fb);
  font-size: 20px;
  line-height: 1.7;
  color: var(--gold);
  margin: 15px auto 24px;
  text-align: center;
  max-width: 900px;
}

.philo-practice-section {
  text-align: center;
  margin: 0;
}

.philo-practice-section h3 {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 300;
  color: var(--onyx);
  margin-bottom: 24px;
}

.philo-practice-section p {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ash);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.philo-practice-section ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 40px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: max-content;
}

.philo-practice-section ul li {
  font-family: var(--fb);
  font-size: 14px;
  color: #000;
  font-weight: 700;
  position: relative;
  padding-left: 24px;
}

.philo-practice-section ul li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: bold;
  font-size: 16px;
}

.philo-conclusion {
  margin-top: 40px;
}

.philo-conclusion p {
  font-family: var(--fd);
  font-size: 18px;
  font-style: italic;
  color: var(--onyx);
  line-height: 1.4;
  margin-bottom: 50px;
}

.philo-signature {
  font-family: var(--fd);
  font-size: 19px;
  font-weight: 300;
  color: var(--gold) !important;
  margin-bottom: 0 !important;
  max-width: none;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────
   SECTION 8  ·  COLLABORATION
───────────────────────────────────────────────────────── */
#s8 {
  background: var(--charcoal);
  color: var(--cream);
  padding: 150px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#s8::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 70% at 50% 50%, rgba(201, 137, 46, .07) 0%, transparent 60%);
}

.s8-in {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto
}

.s8-lbl {
  font-family: var(--fh);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.s8-lbl::before,
.s8-lbl::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold)
}

.s8-t {
  font-family: var(--fd);
  font-size: clamp(44px, 7.5vw, 88px);
  font-weight: 300;
  line-height: .95;
  color: var(--cream);
  margin-bottom: 32px;
}

.s8-t em {
  font-style: italic;
  color: var(--gold-l)
}

.s8-tagline {
  font-family: var(--fd);
  font-size: clamp(14px, 1.6vw, 19px);
  font-style: italic;
  color: rgba(250, 248, 244, .55);
  margin-bottom: 32px;
  letter-spacing: .01em;
  line-height: 1.5;
}

.s8-sub {
  font-family: var(--fd);
  font-size: 19px;
  font-style: italic;
  color: rgba(250, 248, 244, .5);
  margin-bottom: 52px;
  line-height: 1.6;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.btn-grp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap
}

.btn-p {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--gold);
  border: none;
  padding: 15px 38px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: transform .2s;
  border-radius: 40px;
}

.btn-p::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-l);
  transform: translateX(-101%);
  transition: transform .38s var(--ease-sm)
}

.btn-p:hover::after {
  transform: translateX(0)
}

.btn-p span {
  position: relative;
  z-index: 1
}

.btn-p:hover {
  transform: translateY(-2px)
}

.btn-o {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1.5px solid var(--gold);
  padding: 14px 38px;
  text-decoration: none;
  display: inline-block;
  transition: all .25s;
  border-radius: 40px;
}

.btn-o:hover {
  background: var(--gold);
  color: var(--onyx);
  transform: translateY(-2px)
}

/* ─────────────────────────────────────────────────────────
   FOOTER  ·  CONTACT
───────────────────────────────────────────────────────── */
footer {
  background: var(--deep);
  color: var(--cream);
  padding: 88px 72px 48px
}

.ft-in {
  max-width: 1200px;
  margin: 0 auto
}

.ft-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule-d)
}

.ft-logo-svg {
  height: 48px;
  width: auto;
  display: block;
}

.ft-brand p {
  font-family: var(--fb);
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(250, 248, 244, .42);
  max-width: 310px
}

.ft-col h4 {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.ft-col ul {
  list-style: none
}

.ft-col ul li {
  margin-bottom: 10px
}

.ft-col ul li a {
  font-family: var(--fb);
  font-size: 13px;
  color: rgba(250, 248, 244, .45);
  text-decoration: none;
  transition: color .2s
}

.ft-col ul li a:hover {
  color: var(--gold-l)
}

.ft-ci {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px
}

.ft-ci svg {
  width: 14px;
  height: 14px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px
}

.ft-ci a {
  font-family: var(--fb);
  font-size: 13px;
  color: rgba(250, 248, 244, .55);
  text-decoration: none;
  transition: color .2s;
  line-height: 1.5
}

.ft-ci a:hover {
  color: var(--gold-l)
}

.ft-bot {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.ft-copy {
  font-family: var(--fb);
  font-size: 11.5px;
  color: rgba(250, 248, 244, .25)
}

.ft-tl {
  font-family: var(--fd);
  font-size: 11.5px;
  font-style: italic;
  color: rgba(201, 137, 46, .9)
}

.ft-tl a {
  color: inherit;
  text-decoration: none;
}

.ft-social {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.ft-social a {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, .3);
  text-decoration: none;
  transition: color .2s;
}

.ft-social a:hover {
  color: var(--gold-l)
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media(max-width:1100px) {
  #nav {
    padding: 24px 48px
  }

  #nav.scrolled {
    padding: 14px 48px
  }

  .s3-inner,
  .s6-inner {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .s3-left {
    position: static
  }

  .s5-hdr {
    grid-template-columns: 1fr
  }

  .sgrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .pillars {
    gap: 36px
  }

  .ft-top {
    grid-template-columns: 1fr 1fr;
    gap: 44px
  }
}

@media(max-width:768px) {
  #nav {
    padding: 20px 28px
  }

  #nav.scrolled {
    padding: 14px 28px
  }

  .nav-links,
  .nav-cta {
    display: none
  }

  .nav-hbg {
    display: flex
  }

  #s1 {
    padding: 110px 28px 80px
  }

  .scroll-ind {
    left: 28px
  }

  #s2 {
    padding: 100px 28px
  }

  #s3,
  #s4,
  #s5,
  #s6,
  #s7,
  #s8 {
    padding: 88px 28px
  }

  footer {
    padding: 72px 28px 40px
  }

  .steps {
    grid-template-columns: 1fr
  }

  .sgrid {
    grid-template-columns: 1fr
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .ft-top {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .ft-bot {
    flex-direction: column;
    gap: 16px;
    text-align: center
  }

  .ft-social {
    justify-content: center
  }

  .s8-sub {
    margin-bottom: 40px
  }
}

@media(prefers-reduced-motion:reduce) {

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

/* ─────────────────────────────────────────────────────────
    MODAL CONTACT FORM
    ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  background: var(--charcoal);
  border: 1px solid rgba(201, 137, 46, .18);
  overflow-y: auto;
  transform: translateY(40px) scale(.96);
  opacity: 0;
  transition: transform .5s var(--ease-ex), opacity .4s;
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(250, 248, 244, .15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  z-index: 10;
  transition: all .25s;
}

.modal-close:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.modal-close svg {
  width: 18px;
  height: 18px;
  color: var(--cream);
}

.modal-close:hover svg {
  color: var(--onyx);
}

.modal-container {
  padding: 56px 48px;
}

.cf-intro {
  margin-bottom: 40px;
}

.cf-label {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.cf-title {
  font-family: var(--fd);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--cream);
  margin-bottom: 18px;
}

.cf-title em {
  font-style: italic;
  color: var(--gold-l);
}

.cf-desc {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 480px;
}

.cf-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-family: var(--fh);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, .45);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--cream);
  background: rgba(15, 14, 12, .4);
  border: 1px solid rgba(250, 248, 244, .1);
  padding: 14px 18px;
  outline: none;
  transition: border-color .25s, background .25s;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9892e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: none;
}

.form-group select option {
  background: var(--charcoal);
  color: var(--cream);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(250, 248, 244, .25);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  background: rgba(15, 14, 12, .6);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-footer {
  margin-top: 8px;
}

.submit-btn {
  font-family: var(--fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--gold);
  border: none;
  padding: 16px 40px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: none;
  transition: all .25s;
  border-radius: 40px;
}

.submit-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .25s;
}

.submit-btn:hover {
  background: var(--gold-l);
  transform: translateY(-2px);
}

.submit-btn:hover svg {
  transform: translateX(4px);
}

.cf-success {
  display: none;
  text-align: center;
  padding: 60px 20px;
}

.cf-success.active {
  display: block;
}

.cf-form.hidden {
  display: none;
}

.success-icon {
  width: 72px;
  height: 72px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.success-icon svg {
  width: 32px;
  height: 32px;
  color: var(--onyx);
}

.cf-success h3 {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 12px;
}

.cf-success p {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 32px;
}

.cf-success .btn-o {
  display: inline-block;
}

@media(max-width:600px) {
  .modal-container {
    padding: 40px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}