/* ============================================================
   The Method — page-specific styles
   Reuses tokens/classes from styles.css (--primary, --secondary,
   --text, --bg-cream, --font-display, --font-body, .h2-heading,
   .h3-heading, .body-copy, .body-copy-sm, .btn, .light-heading, .light-copy)
   ============================================================ */

.method-label{
  font-family: var(--font-body); font-size: clamp(14px,1vw,16px);
  color: var(--secondary); font-weight:600; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 0 0 16px;
}

/* ============================================================
   SECTION 1 — HERO (full-bleed photo)
   ============================================================ */
.method-hero-photo{
  position: relative; overflow: hidden;
  min-height: 90vh; display:flex; align-items:center;
  padding: 0 var(--pad-desktop);
}
.method-hero-photo-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: center 30%; z-index:0;
}
.method-hero-photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(105deg, rgba(20,18,15,0.62) 0%, rgba(20,18,15,0.4) 40%, rgba(20,18,15,0.08) 70%);
}
.method-hero-photo-inner{
  position:relative; z-index:2; max-width:620px;
  display:flex; flex-direction:column; gap:24px; padding: 160px 0;
}
.method-hero-photo-label{ color: var(--bg-cream); }
.method-hero-photo-title{
  font-family: var(--font-display); font-size: clamp(32px,4.2vw,56px); font-weight:700;
  line-height:1.2; margin:0; color: var(--white);
}
.method-hero-photo-title em{ font-style:italic; font-weight:500; color: var(--bg-cream); }
.method-hero-photo-sub{ color: var(--bg-cream); max-width:520px; }
.method-hero-buttons{ display:flex; gap:16px; margin-top: 16px; flex-wrap:wrap; }

/* ============================================================
   SECTION 2 — THE 4-PART METHOD
   ============================================================ */
.method-framework{ padding: 160px var(--pad-desktop); }
.method-framework-head{ max-width: 900px; margin-bottom: 80px; }
.method-framework-intro{
  border-left: 3px solid var(--secondary); padding-left: 24px; margin-top: 20px; max-width: 640px;
}
.method-steps{ display:flex; gap: 52px; }
.method-step{
  flex:1; padding-right: 52px; border-right: 1px solid #E4E4E4;
  display:flex; flex-direction:column; gap: 10px;
}
.method-step:last-child{ border-right:none; padding-right:0; }
.method-step-icon{ font-size: 28px; color: var(--secondary); margin: 4px 0 8px; }

/* ============================================================
   SECTION 3 — PHILOSOPHY QUOTE + WHY IT WORKS
   ============================================================ */
.method-philosophy{ background: var(--secondary); padding: 100px var(--pad-desktop); }
.method-philosophy-head{ max-width: 780px; margin: 0 auto 60px; text-align:center; }
.method-quote{ font-size: clamp(28px,3.4vw,48px); }
.method-quote em{ font-style:italic; font-weight:500; }
.method-quote-attr{ margin-top: 8px; font-weight:600; }
.method-philosophy-text{ margin-top: 24px; }
.method-pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.method-pillar{
  background: var(--white); border-radius: 20px; padding: 32px;
  display:flex; flex-direction:column; gap: 10px;
}
.method-pillar-title{ margin:0; font-family: var(--font-display); font-size: clamp(18px,1.6vw,22px); color: var(--text); }
.method-pillar .body-copy-sm{ color: var(--text); }

/* ============================================================
   SECTION 4 — BUILT FOR REAL LIFE (horizontal filmstrip)
   ============================================================ */
.method-experience{ padding: 100px var(--pad-desktop); }
.method-experience-head{ display:block; max-width: 640px; margin: 0 0 60px; }
.method-experience-head .h2-heading{ margin: 0 0 20px; max-width:none; }
.method-experience-head .h2-heading i{ font-style: normal; }
.method-experience-intro{ text-align:left; max-width:none; margin: 0; }
.method-exp-icon{ font-size: 26px; color: var(--secondary); margin-bottom: 8px; }

.method-strip-wrap{ display:flex; flex-direction:column; gap:28px; }
.method-strip{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 4px 4px 12px; margin: 0 -4px;
  scrollbar-width:none;
}
.method-strip::-webkit-scrollbar{ display:none; }
.method-strip-card{
  flex: 0 0 300px; scroll-snap-align:start;
  background: var(--white); border: 1px solid #EEEEEE; border-radius: 20px; padding: 32px;
  display:flex; flex-direction:column; gap: 10px;
}
.method-strip-card--stat{
  flex-basis: 360px; background: var(--secondary); border:none; justify-content:center; gap:24px;
}
.method-stat-text{
  font-family: var(--font-display); font-size: clamp(19px,1.7vw,22px); color: var(--white);
  margin:0; line-height:1.4;
}
.method-stat-text em{ font-style:italic; }
.method-strip-card--stat .btn-primary{ align-self:flex-start; background: var(--white); color: var(--secondary); }
.method-strip-card--stat .btn-primary:hover{ background: var(--bg-cream); }

.method-strip-nav{ display:flex; align-items:center; justify-content:center; gap:20px; }
.method-strip-nav.is-hidden{ display:none; }
.method-strip-dot.is-hidden{ display:none; }
.method-strip-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid #DDDDDD; background:var(--white);
  color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.method-strip-arrow:hover{ background: var(--secondary); border-color: var(--secondary); color: var(--white); }
.method-strip-dots{ display:flex; gap:8px; }
.method-strip-dot{ width:8px; height:8px; border-radius:50%; background:#DADFEA; border:none; padding:0; cursor:pointer; transition: background .2s, transform .2s; }
.method-strip-dot.is-active{ background: var(--secondary); transform: scale(1.3); }

/* ============================================================
   SECTION 5 — TESTIMONIALS (big editorial quote, arrows + dots)
   ============================================================ */
.method-testimonials{ padding: 100px var(--pad-desktop); text-align:center; }
.method-testimonials .h2-heading{ margin: 0 auto 16px; }
.method-testimonials-sub{ max-width: 480px; margin: 0 auto 60px; text-align:center; }

.method-testimonial-wrap{ position:relative; max-width: 720px; margin:0 auto; }
.method-testimonial-mark{
  font-family: var(--font-display); font-size: 90px; color: var(--primary); opacity:.35;
  line-height:1; margin-bottom:-30px; user-select:none;
}
.method-testimonial-carousel{ position:relative; min-height: 190px; }
.method-testimonial-card{
  position:absolute; inset:0; opacity:0; transition: opacity .6s ease; pointer-events:none;
}
.method-testimonial-card.is-active{ opacity:1; pointer-events:auto; }
.method-testimonial-quote{
  font-family: var(--font-display); font-style: italic; font-weight:500;
  font-size: clamp(22px,2.4vw,30px); line-height:1.4; color: var(--text); margin:0 0 24px;
}
.method-testimonial-attr{
  font-family: var(--font-body); font-size:14px; color: var(--secondary);
  text-transform:uppercase; letter-spacing:.06em; margin:0;
}
.method-testimonial-attr strong{
  display:block; font-family: var(--font-display); font-size:16px; font-weight:700;
  color: var(--text); text-transform:none; letter-spacing:0; margin-bottom:2px;
}
.method-testimonial-nav{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:40px; }
.method-testimonial-arrow{
  width:40px; height:40px; border-radius:50%; border:1px solid #DDDDDD; background: var(--white);
  color: var(--secondary); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.method-testimonial-arrow:hover{ background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.method-testimonial-dots{ display:flex; gap:8px; }
.method-testimonial-dot{ width:8px; height:8px; border-radius:50%; background:#DADFEA; border:none; padding:0; cursor:pointer; transition: transform .3s ease, background-color .3s ease; }
.method-testimonial-dot.is-active{ background: var(--secondary); transform: scale(1.3); }

/* ============================================================
   SECTION 6 — WORLD DESIGNED TO DISTRACT US (white bg, icon cards)
   ============================================================ */
.method-problem{ background: var(--white); padding: 200px var(--pad-desktop); }
.method-problem-heading{ text-align:center; max-width: 900px; margin: 0 auto 24px; }
.method-problem-heading i{ font-style: italic; }
.method-problem-text{ text-align:center; max-width: 640px; margin: 0 auto 80px; }
.method-problem-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.method-problem-item{
  background: var(--white); border: 1px solid #EEEEEE; border-radius: 20px;
  padding: 32px; display:flex; flex-direction:column; gap: 12px;
}
.method-problem-icon{ font-size: 22px; color: var(--secondary); margin-bottom: 4px; }

/* ============================================================
   SECTION 7 — FINAL CTA
   ============================================================ */
.method-cta{ background: var(--bg-cream); padding: 200px var(--pad-desktop); text-align:center; }
.method-cta .method-label{ text-align:center; }
.method-cta .h2-heading{ margin: 0 auto 20px; max-width: 640px; }
.method-cta .h2-heading i{ font-style:italic; }
.method-cta-text{ max-width: 420px; margin: 0 auto 40px; text-align:center; }
.method-cta-buttons{ display:flex; justify-content:center; gap: 16px; margin-bottom: 48px; flex-wrap:wrap; }
.btn-outline-dark{ background: transparent; color: var(--secondary); border: 1px solid var(--secondary); }
.btn-outline-dark:hover{ background: var(--secondary); color: var(--white); }
.method-badges{ display:flex; justify-content:center; gap: 12px; flex-wrap:wrap; }
.method-badge{
  background: #F0F3FF; color: var(--text); font-family: var(--font-body);
  font-size: clamp(13px,0.9vw,14px); padding: 10px 20px; border-radius: 999px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .method-framework{ padding: 100px var(--pad-mobile); }
  .method-steps{ flex-direction:column; gap: 40px; }
  .method-step{ border-right:none; padding-right:0; border-bottom: 1px solid #E4E4E4; padding-bottom: 32px; }
  .method-step:last-child{ border-bottom:none; padding-bottom:0; }
  .method-philosophy{ padding: 80px var(--pad-mobile); }
  .method-pillars{ grid-template-columns:1fr; }
  .method-experience{ padding: 80px var(--pad-mobile); }
  .method-testimonials{ padding: 80px var(--pad-mobile); }
  .method-testimonial-carousel{ min-height: 230px; }
  .method-problem{ padding: 100px var(--pad-mobile); }
  .method-problem-grid{ grid-template-columns:1fr 1fr; }
  .method-cta{ padding: 100px var(--pad-mobile); }
}

@media (max-width: 900px){
  .method-hero-photo{ min-height:100vh; padding: 0 var(--pad-mobile); }
  .method-hero-photo-img{ object-position: 15% center; }
  .method-hero-photo::before{
    background: linear-gradient(180deg, rgba(20,18,15,0.68) 0%, rgba(20,18,15,0.6) 55%, rgba(20,18,15,0.78) 100%);
  }
  .method-hero-photo-inner{ padding: 120px 0; }
  .method-hero-buttons{ flex-direction:column; }

  .method-strip-card{ flex-basis: 78vw; }
  .method-strip-card--stat{ flex-basis: 82vw; }
  .method-strip-arrow{ display:none; }
}

@media (max-width: 720px){
  .method-problem-grid{ grid-template-columns:1fr; }
  .method-cta-buttons{ flex-direction:column; }

  /* ---------- section 4 — built for real life: center on mobile ---------- */
  .method-experience-head{ margin-left:auto; margin-right:auto; text-align:center; }
  .method-experience-head .h2-heading{ text-align:center; }
  .method-experience-intro{ text-align:center; }
}