/* ═══════════════════════════════════════════════════
   METHODOLOGY.CSS
   ═══════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────── */
.meth-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,80px);
  align-items: end;
  min-height: 70vh;
  padding: clamp(7rem,12vh,9rem) clamp(2rem,5.5vw,5.5rem) clamp(3rem,5vh,4rem);
  background: var(--white);
}
.meth-hero .hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  filter: grayscale(20%) contrast(1.05);
}

/* ── PAGE HERO generic shared ─────────────────────── */
.page-h1 {
  font-family: var(--fs);
  font-size: clamp(2.4rem,4.5vw,4.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--black);
  margin-bottom: 20px;
}
.page-sub {
  font-size: clamp(14px,1.1vw,16px);
  font-weight: 500;
  line-height: 1.75;
  color: rgba(13,13,13,.70);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── THE 60/40 METHOD ─────────────────────────────── */
.method {
  background: var(--surf);
  padding: clamp(5rem,10vw,8rem) 0;
}
.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: rgba(13,13,13,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 56px;
}
.method-card {
  background: var(--white);
  padding: clamp(36px,5vw,56px);
  display: flex;
  flex-direction: column;
}
.method-card.dark { background: var(--dark); }
.method-pct {
  font-family: var(--fd);
  font-size: clamp(4rem,8vw,7rem);
  line-height: .85;
  letter-spacing: -.02em;
  color: rgba(13,13,13,.18);
  margin-bottom: 20px;
}
.method-card.dark .method-pct { color: rgba(245,197,24,.35); }
.method-title {
  font-family: var(--fd);
  font-size: clamp(1.6rem,2.5vw,2.4rem);
  line-height: .93;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 14px;
}
.method-card.dark .method-title { color: var(--gold); }
.method-body {
  font-size: clamp(13.5px,1.05vw,15px);
  font-weight: 500;
  line-height: 1.75;
  color: rgba(13,13,13,.65);
}
.method-card.dark .method-body { color: rgba(255,255,255,.65); }
.method-body strong { color: var(--black); font-weight: 700; }
.method-card.dark .method-body strong { color: var(--white); }
.method-note {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(13,13,13,.78);
  text-align: center;
  padding: 24px 0;
}
.method-note strong { color: var(--goldd); }

/* ── FOUR PRINCIPLES ──────────────────────────────── */
.approach {
  background: var(--white);
  padding: clamp(5rem,10vw,8rem) 0;
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3px;
  background: rgba(13,13,13,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 56px;
}
.approach-card {
  background: var(--surf);
  padding: clamp(28px,3.5vw,40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.approach-icon { font-size: 28px; line-height: 1; }
.approach-h3 {
  font-family: var(--fd);
  font-size: clamp(1.1rem,1.6vw,1.5rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
}
.approach-p {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(13,13,13,.60);
}

/* ── TWO PATHS ────────────────────────────────────── */
.paths {
  background: var(--dark);
  padding: clamp(5rem,10vw,8rem) 0;
}
.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 56px;
}
.path-card {
  background: var(--dark);
  padding: clamp(36px,5vw,56px);
  display: flex;
  flex-direction: column;
}
.path-age {
  font-family: var(--fd);
  font-size: clamp(3rem,5vw,5rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.path-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
  margin-bottom: 20px;
}
.path-body {
  font-size: clamp(13.5px,1.05vw,15px);
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255,255,255,.65);
}
.path-body strong { color: var(--white); font-weight: 700; }

/* ── LEVEL SYSTEM ─────────────────────────────────── */
.meth-levels {
  background: var(--surf);
  padding: clamp(5rem,10vw,8rem) 0;
}
.levels-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(13,13,13,.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 56px;
}
.level-row {
  background: var(--white);
  display: grid;
  grid-template-columns: 100px 180px 1fr;
  align-items: center;
  gap: 24px;
  padding: clamp(24px,3.5vw,36px) clamp(24px,4vw,44px);
  transition: background .2s var(--e1);
}
.level-row:hover { background: var(--surf); }
.level-code {
  font-family: var(--fd);
  font-size: clamp(2rem,3.5vw,3rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--goldd);
}
.level-name {
  font-family: var(--fd);
  font-size: clamp(1.2rem,2vw,1.8rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
}
.level-desc {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(13,13,13,.55);
  line-height: 1.55;
}
.levels-note {
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(13,13,13,.72);
  text-align: center;
}
.levels-note strong { color: var(--goldd); }

/* ── GUARANTEE ────────────────────────────────────── */
.guarantee {
  background: var(--white);
  padding: clamp(5rem,10vw,8rem) 0;
}
.guarantee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  background: rgba(13,13,13,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 56px;
}
.guarantee-card {
  background: var(--surf);
  padding: clamp(32px,4vw,48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guarantee-h3 {
  font-family: var(--fd);
  font-size: clamp(1.2rem,1.8vw,1.6rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
}
.guarantee-p {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(13,13,13,.60);
}

/* ── SECTION HELPERS ──────────────────────────────── */
.sec-ey {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.sec-h2 {
  font-family: var(--fd);
  font-size: clamp(2.5rem,5vw,5rem);
  line-height: .93;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
}
.sec-h2.inv { color: var(--white); }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1023px) {
  .meth-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-img { max-height: 360px; }
  .method-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr 1fr; }
  .paths-grid { grid-template-columns: 1fr; }
  .guarantee-grid { grid-template-columns: 1fr; }
  .level-row { grid-template-columns: 80px 140px 1fr; gap: 16px; }
}
@media (max-width: 767px) {
  .meth-hero { padding: 88px 20px 32px; }
  .approach-grid { grid-template-columns: 1fr; }
  .level-row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .level-code { font-size: 2rem; }
}