/* =========================================================
   OlgaPhoenix.com — home.css
   Page-unique styles for the homepage ( / ).
   Shared tokens, reset, nav, and footer live in base.css.
   Class prefixes: .op-home-*, .op-fw__*, .op-mission__*,
   .op-sober__*, .op-beliefs__*, .op-cta-final__*
========================================================= */

/* =============================================
   SECTION 1 — HERO
============================================= */
.op-home-hero {
  position: relative;
  width: 100%;
  height: 220vh;
  min-height: 1400px;
  overflow: hidden;
  background-size: cover;
  background-position: 75% 0%;
  background-repeat: no-repeat;
  background-color: var(--color-black);
}
.op-home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,8,5,0.55)  0%,
    rgba(10,8,5,0.35) 12%,
    rgba(10,8,5,0.10) 22%,
    rgba(10,8,5,0.10) 32%,
    rgba(10,8,5,0.40) 50%,
    rgba(10,8,5,0.75) 62%,
    rgba(10,8,5,0.93) 74%,
    rgba(10,8,5,0.98) 100%
  );
  z-index: 1;
}

.op-home-hero__content {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 140px;
}
.op-home-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,235,210,0.70);
  margin-bottom: 10px;
}
.op-home-hero__eyebrow span { margin: 0 6px; opacity: 0.45; }
.op-home-hero__name {
  font-family: var(--font-display);
  font-weight: 300;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.02em;
  margin-bottom: 48px;
  width: 100%;
}
.op-home-hero__name .line-olga {
  display: block;
  font-size: clamp(92px, 16vw, 182px);
}
.op-home-hero__name .line-phoenix {
  display: block;
  font-size: clamp(96px, 20.4vw, 222px);
}
.op-home-hero__subhead {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: rgba(245,238,220,0.78);
  max-width: 680px;
  margin: 0 auto 52px;
}
.op-home-hero__ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.op-cta-primary {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 0.5px solid rgba(255,255,255,0.50);
  padding: 13px 30px;
  transition: background 0.25s;
}
.op-cta-primary:hover { background: rgba(255,255,255,0.09); }
.op-cta-secondary {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(238,225,198,0.72);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(238,225,198,0.30);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.op-cta-secondary:hover { color: rgba(238,225,198,1); border-color: rgba(238,225,198,0.6); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.op-home-hero__eyebrow { animation: fadeUp 0.9s ease both; animation-delay: 0.25s; }
.op-home-hero__name    { animation: fadeUp 1.0s ease both; animation-delay: 0.45s; }
.op-home-hero__subhead { animation: fadeUp 0.9s ease both; animation-delay: 0.70s; }
.op-home-hero__ctas    { animation: fadeUp 0.9s ease both; animation-delay: 0.90s; }

@media (max-width: 768px) {
  .op-home-hero { height: auto; min-height: 100vh; }
  .op-home-hero__content { position: static; padding: 160px 24px 100px; }
  .op-home-hero__subhead { font-size: 16px; }
  .op-home-hero__ctas { flex-direction: column; gap: 20px; }
}

/* =============================================
   SECTION 3 — MEET OLGA
============================================= */
.op-home-meet {
  background: var(--color-ivory);
  padding: var(--section-padding) 24px 120px;
  text-align: center;
}
.op-home-meet__eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-bottom: var(--eyebrow-margin);
}
.op-home-meet__headline {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--color-dark);
  max-width: 900px;
  margin: 0 auto 64px;
}
.op-home-meet__headline .reg {
  font-style: normal;
  font-weight: 400;
  color: var(--color-dark);
}
.op-home-meet__headline .ital {
  font-style: italic;
  font-weight: 300;
  color: var(--color-dark);
}
.op-home-meet__body {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-dark);
  max-width: 720px;
  margin: 0 auto 64px;
  letter-spacing: 0.02em;
}
.op-home-meet__body p + p { margin-top: 48px; }
.op-home-meet__cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a1510;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(13,11,8,0.35);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.op-home-meet__cta:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* Scroll reveal — Meet Olga headline */
.op-reveal-headline .word {
  display: inline;
  color: #c8c4be;
  transition: color 1.8s ease;
}
.op-reveal-headline .word.is-lit {
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .op-home-meet { padding: 80px 24px; }
  .op-home-meet__body { font-size: 17px; }
}

/* =============================================
   SECTION 4 — SIGNATURE FRAMEWORKS
============================================= */
.op-fw { background: var(--color-white); padding: var(--section-padding) var(--section-padding-h) 120px; display: block; scroll-margin-top: 90px; }
.op-fw__label { font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-eyebrow); margin-bottom: var(--eyebrow-margin); display: block; }
.op-fw__line { width: 100%; height: 1px; background: var(--color-divider); margin: 0; }
.op-fw__row { padding: 68px 0 52px; border-bottom: 1px solid var(--color-divider); position: relative; display: block; }
.op-fw__title { font-family: var(--font-serif); font-size: clamp(35px, 4.4vw, 56px); font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: var(--color-dark); margin: 0 0 12px 0; padding-right: 80px; line-height: 1.1; display: block; }
.op-fw__title .rm { font-size: 0.55em; vertical-align: super; }
.op-fw__desc { font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--color-dark); max-width: 664px; display: block; }
.op-fw__arrow { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: block; width: 44px; height: 44px; }
.op-fw__arrow svg { width: 44px; height: 44px; }
.op-fw__row:hover .op-fw__arrow { transform: translateY(-50%) translate(4px, -4px); transition: transform 0.25s ease; }

@media (max-width: 768px) {
  .op-fw { padding: 80px 24px; }
  .op-fw__title { padding-right: 48px; }
}

/* =============================================
   SECTION 5 — GLOBAL REACH
============================================= */
.op-home-global {
  position: relative;
  background-image: url('/images/image_4.jpg');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  padding: var(--section-padding) var(--section-padding-h) 120px;
  text-align: center;
}
.op-home-global__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.82);
  z-index: 0;
}
.op-home-global__eyebrow,
.op-home-global__grid {
  position: relative;
  z-index: 1;
}
.op-home-global__eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,245,225,0.5);
  margin-bottom: var(--eyebrow-margin);
  display: block;
}
.op-home-global__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 0.5px solid rgba(255,255,255,0.12);
  border-left: 0.5px solid rgba(255,255,255,0.12);
}
.op-home-global__stat {
  padding: 60px 40px;
  border-right: 0.5px solid rgba(255,255,255,0.12);
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.op-home-global__number {
  font-family: var(--font-display);
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 300;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 16px;
  display: block;
  letter-spacing: -0.02em;
}
.op-home-global__label {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,245,225,0.80);
  line-height: 1.6;
  display: block;
}
@media (max-width: 768px) {
  .op-home-global__grid { grid-template-columns: repeat(2, 1fr); }
  .op-home-global { padding: 80px 24px; }
}

/* =============================================
   SECTION 6 — THE MISSION
============================================= */
.op-mission {
  background: var(--color-ivory);
  padding: 120px 0 0 80px;
  text-align: center;
  overflow: hidden;
}
.op-mission__eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-bottom: var(--eyebrow-margin);
  display: block;
}
.op-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-align: left;
  margin-right: 0;
}
.op-mission__title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark);
  max-width: 900px;
  margin: 0 auto 80px;
  text-align: center;
  letter-spacing: -0.02em;
}
.op-mission__title .reg { font-style: normal; }
.op-mission__title .ital { font-style: italic; }
.op-mission__left { padding: 68px 80px 0 0; }
.op-mission__sub {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-dark);
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}
.op-mission__sub em { font-style: italic; }
.op-mission__body {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-dark);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.op-mission__body p + p { margin-top: 32px; }
.op-mission__right { padding: 68px 0 0 60px; }
.op-mission__headline {
  font-family: var(--font-serif);
  font-size: clamp(32.5px, 4.5vw, 52.5px);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-dark);
  line-height: 1.1;
}
.op-mission__headline-line { display: block; padding: 44px 0; }
.op-mission__headline-line:first-child {
  padding-top: 0;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 44px;
}
.op-mission__headline-line:nth-child(2) {
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 44px;
}
.op-mission__headline-line:last-child { padding-bottom: 0; }
@media (max-width: 768px) {
  .op-mission { padding: 80px 24px; }
  .op-mission__grid { grid-template-columns: 1fr; text-align: center; }
  .op-mission__left { border-right: none; padding: 0; }
  .op-mission__right { padding-left: 0; }
}

/* =============================================
   SECTION 7 — SOBER WORTHY FREE
============================================= */
.op-sober {
  background: transparent;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
}
.op-sober__image { position: relative; overflow: hidden; }
.op-sober__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.op-sober__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 80px 120px 80px;
  text-align: center;
}
.op-sober__eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-bottom: var(--eyebrow-margin);
  display: block;
}
.op-sober__title {
  font-family: var(--font-serif);
  font-size: clamp(77px, 10vw, 138px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--color-dark);
  letter-spacing: -0.02em;
  margin-bottom: 36px;
}
.op-sober__title .reg { font-style: normal; }
.op-sober__title .ital { font-style: italic; }
.op-sober__body {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-dark);
  margin-bottom: 48px;
  text-align: center;
}
.op-sober__body .reg { font-style: normal; font-weight: 400; }
.op-sober__body .ital { font-style: italic; font-weight: 400; }
.op-sober__cta {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: rgba(13,11,8,0.35);
  text-underline-offset: 5px;
  text-decoration-thickness: 0.5px;
  display: inline;
  transition: color 0.2s;
}
.op-sober__cta:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
@media (max-width: 768px) {
  .op-sober { grid-template-columns: 1fr; }
  .op-sober__content { padding: 80px 24px; }
}

/* =============================================
   SECTION 8 — CORE BELIEFS
============================================= */
.op-beliefs {
  position: relative;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  padding: var(--section-padding) var(--section-padding-h);
  overflow: hidden;
}
.op-beliefs__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, 0.78);
  z-index: 0;
}
.op-beliefs__inner { position: relative; z-index: 1; }
.op-beliefs__list { width: 100%; }
.op-beliefs__eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: rgba(245, 235, 210, 0.80);
  margin-bottom: var(--eyebrow-margin);
  display: block;
}
.op-beliefs__rule {
  border: none;
  border-top: 0.5px solid rgba(255, 255, 255, 0.35);
  margin: 0;
  width: 100%;
}
.op-beliefs__item {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 36px 0;
  min-height: 160px;
}
.op-beliefs__number {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
  min-width: 44px;
  flex-shrink: 0;
}
.op-beliefs__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.15;
  text-transform: uppercase;
}
.op-beliefs__text .ital {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 768px) {
  .op-beliefs { padding: 80px 24px; }
  .op-beliefs__item { gap: 18px; min-height: 0; }
}

/* =============================================
   SECTION 9 — FINAL CTA
============================================= */
.op-cta-final {
  background: var(--color-ivory);
  padding: var(--section-padding) var(--section-padding-h);
  text-align: center;
  position: relative;
}
.op-cta-final__eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin-bottom: var(--eyebrow-margin);
  display: block;
}
.op-cta-final__stage {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  gap: 32px;
  margin-bottom: 48px;
}
.op-cta-final__img {
  width: 180px;
  height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.op-cta-final__img--left { align-self: flex-end; }
.op-cta-final__img--right { align-self: flex-start; }
.op-cta-final__headline {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--color-dark);
  letter-spacing: -0.02em;
}
.op-cta-final__headline .reg { font-style: normal; }
.op-cta-final__headline .ital { font-style: italic; }
.op-cta-final__line { display: block; margin-bottom: 28px; }
.op-cta-final__line:last-child { margin-bottom: 0; }
.op-cta-final__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-dark);
  max-width: 560px;
  margin: 0 auto 52px;
}
.op-cta-final__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.op-cta-final__btn-primary {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-dark);
  text-decoration: none;
  border: 0.5px solid rgba(13,11,8,0.50);
  padding: 14px 32px;
  transition: background 0.25s, color 0.25s;
}
.op-cta-final__btn-primary:hover {
  background: var(--color-dark);
  color: var(--color-ivory);
}
.op-cta-final__btn-secondary {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: rgba(13,11,8,0.35);
  text-underline-offset: 5px;
  text-decoration-thickness: 0.5px;
  transition: color 0.2s;
}
.op-cta-final__btn-secondary:hover { color: var(--color-gold); }
@media (max-width: 768px) {
  .op-cta-final { padding: 80px 24px; }
  .op-cta-final__stage { grid-template-columns: 1fr; }
  .op-cta-final__img { display: none; }
  .op-cta-final__buttons { flex-direction: column; gap: 20px; }
}