/* ═══════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════ */
    :root {
      --g50: #FBF7EF;
      --g100: #F2E6C8;
      --g200: #DEBB80;
      --g300: #C49A50;
      --g400: #AE852F;
      --g500: #8E6A22;
      --g600: #6B4E18;
      --r50: #F9F0F2;
      --r100: #EDD4D8;
      --r200: #C9909A;
      --r300: #A66874;
      --r400: #86525F;
      --r500: #6B3F4A;
      --r600: #4E2D36;
      --cream: #FAFAF5;
      --warm: #F5F0EA;
      --ivory: #FEFCF7;
      --ink: #1E1A18;
      --ink2: #3D3530;
      --ink3: #6B5E58;
      --ink4: #A09088;
      --ink5: #D4C8C0;
      --ff-head: 'Cormorant Garamond', Georgia, serif;
      --ff-body: 'Jost', sans-serif;
      --shadow-sm: 0 2px 12px rgba(174, 133, 47, .10);
      --shadow-md: 0 6px 32px rgba(174, 133, 47, .14);
      --shadow-lg: 0 16px 60px rgba(134, 82, 95, .14);
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--ff-body);
      background: var(--ivory);
      color: var(--ink);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Subtle noise texture overlay */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0.025;
      z-index: 9999;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

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

    a {
      text-decoration: none;
    }

    ul {
      list-style: none;
    }

    /* ═══════════════════════════════════
   UTILITY
═══════════════════════════════════ */
    .eyebrow {
      display: inline-block;
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--g400);
      margin-bottom: .9rem;
    }

    .eyebrow-rose {
      color: var(--r400);
    }

    .section-title {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--ink);
    }

    .section-title em {
      font-style: italic;
      color: var(--g400);
    }

    .section-sub {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 540px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .85rem 2rem;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: all .25s;
    }

    .btn-primary {
      background: var(--r400);
      color: #fff;
      box-shadow: 0 4px 20px rgba(134, 82, 95, .30);
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .btn-primary:hover {
      background: var(--r500);
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 12px 32px rgba(134, 82, 95, .45);
    }

    .btn-primary:active {
      transform: translateY(-1px) scale(1.01);
    }

    .btn-outline {
      background: transparent;
      color: var(--g400);
      border: 1.5px solid var(--g300);
      transition: all 0.3s ease;
    }

    .btn-outline:hover {
      background: var(--g50);
      border-color: var(--g400);
      color: var(--g500);
      transform: translateY(-2px);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: transparent;
      color: var(--ink2);
      padding: 0;
      font-family: var(--ff-body);
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .06em;
      border-bottom: 1.5px solid var(--g300);
      border-radius: 0;
      padding-bottom: .1rem;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .btn-ghost:hover {
      color: var(--g400);
      border-color: var(--g400);
      gap: .7rem;
    }

    .btn-ghost::after {
      content: '\f054';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 0.75rem;
      transition: transform 0.3s ease;
    }

    .btn-ghost:hover::after {
      transform: translateX(4px);
    }

    /* ═══════════════════════════════════
   NAV
═══════════════════════════════════ */
    nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 999;
      height: 100px;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(254, 252, 247, .94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(222, 187, 128, .35);
      transition: box-shadow .3s;
    }

    nav.scrolled {
      box-shadow: var(--shadow-sm);
    }

    .nav-logo {
      font-family: var(--ff-head);
      font-size: 1.35rem;
      font-weight: 500;
      color: var(--ink);
      letter-spacing: .03em;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .nav-logo-wrap {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      text-align: center;
    }

    .nav-logo-img {
      display: block;
      height: 70px;
      max-height: 90px;
      width: auto;
      object-fit: contain;
      margin: 0;
      padding: 0;
    }

    .nav-logo-tagline {
      font-family: var(--ff-body);
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: var(--ink3);
      line-height: 1.4;
      display: block;
    }

    .nav-logo em {
      font-style: italic;
      color: var(--g400);
    }

    /* Mobile-only items hidden on desktop by default */
    .mobile-only {
      display: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      transition: color .2s;
      position: relative;
    }

    .nav-links a {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink3);
      text-decoration: none;
      transition: color .2s;
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 1.5px;
      background: var(--g400);
      transform: scaleX(0);
      transition: transform .2s;
    }

    .nav-links a:hover {
      color: var(--g400);
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    /* Mobile-only link hidden on desktop */
    .mobile-only-link {
      display: none;
    }

    .nav-cta {
      background: var(--r400) !important;
      color: #fff !important;
      padding: .5rem 1.4rem;
      border-radius: 4px;
      font-size: .72rem !important;
      letter-spacing: .1em !important;
      transition: background .2s !important;
    }

    .nav-cta::after {
      display: none !important;
    }

    .nav-cta:hover {
      background: var(--r500) !important;
    }

    /* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
    #hero {
      margin-top: 100px; /* start exactly below the fixed navbar */
      min-height: calc(100vh - 100px);
      display: grid;
      grid-template-columns: 1fr auto; /* let hero-content occupy all remaining space, hero-visual wraps image exactly */
      align-items: center; /* center hero content vertically */
      padding: 40px 5%; /* compact padding so all components fit in vertical view */
      gap: 4.5rem; /* modern elegant gap between text and image, eliminating empty space */
      position: relative;
      overflow: visible;
      background: var(--ivory);
    }

    #hero::before {
      content: '';
      position: absolute;
      top: -120px;
      right: -120px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle at center, rgba(222, 187, 128, .22) 0%, transparent 65%);
      pointer-events: none;
    }

    #hero::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle at center, rgba(134, 82, 95, .10) 0%, transparent 65%);
      pointer-events: none;
    }

    .hero-grid-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .04;
      background-image:
        linear-gradient(var(--g400) 1px, transparent 1px),
        linear-gradient(90deg, var(--g400) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding-top: 0; /* remove extra top padding so header lines up centered */
      align-self: center;
    }

    .hero-greeting {
      font-family: var(--ff-body);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: .7rem;
    }

    .hero-subtitle-line {
      font-family: var(--ff-head);
      font-size: 1.4rem;
      font-weight: 400;
      font-style: italic;
      color: var(--ink3);
      display: block;
      margin-bottom: 1.2rem;
      margin-top: 15px;
    }

    .hero-greeting {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 300;
      font-style: italic;
      color: var(--ink3);
      margin-bottom: .4rem;
      display: block;
    }

    .hero-content h1 {
      font-family: var(--ff-head);
      font-size: clamp(3rem, 5.5vw, 5rem);
      font-weight: 300;
      line-height: 1.08;
      color: var(--ink);
      margin-bottom: 1.4rem;
    }

    .hero-content h1 em {
      font-style: italic;
      color: var(--g400);
    }

    .hero-content h1 strong {
      font-weight: 600;
    }

    /* New hero subtitle line */
    .hero-subtitle-line {
      font-family: var(--ff-head);
      font-size: clamp(1rem, 1.8vw, 1.3rem);
      font-weight: 300;
      font-style: italic;
      color: var(--r400);
      margin-bottom: 1rem;
      display: block;
      letter-spacing: .02em;
    }

    .hero-tagline {
      font-size: 1.05rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 580px; /* stretched more to the right to fill space elegantly */
      margin-bottom: 2.2rem;
      font-weight: 300;
    }

    .hero-btns {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 3rem;
    }

    .hero-visual {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: flex-end; /* push image to the right to remove left whitespace */
      align-items: center;
    }

    .hero-img-frame {
      position: relative;
      width: 420px; /* slightly wider to fill more space beautifully and look premium */
      max-width: 100%;
      overflow: visible;
      margin-bottom: 12px;
      margin-top: 6px; /* reduce vertical offsets to keep visual tighter */
      transform: translateX(-40px); /* slightly move hero visual to left on desktop */
    }

    .hero-img-frame::before {
      content: '';
      position: absolute;
      top: 8px; /* slightly smaller offset so background sits closer to image */
      right: -4px; /* reduce horizontal bleed to remove visible empty whitespace */
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      background: var(--g100);
      border-radius: 2px;
      z-index: -1;
    }

    .hero-photo {
      width: 100%;
      aspect-ratio: 3/4;
      background: linear-gradient(160deg, var(--g200) 0%, var(--g300) 50%, var(--r300) 100%);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .hero-photo-silhouette {
      width: 55%;
      opacity: .28;
    }

    .hero-nametag {
      position: absolute;
      bottom: -24px;
      left: -28px;
      background: var(--ivory);
      border-left: 3px solid var(--g400);
      padding: 1rem 1.4rem;
      box-shadow: var(--shadow-md);
      z-index: 10;
    }

    .hero-nametag-hi {
      font-family: var(--ff-head);
      font-size: 1rem;
      font-weight: 300;
      font-style: italic;
      color: var(--ink3);
      display: block;
    }

    .hero-nametag-name {
      font-family: var(--ff-head);
      font-size: 1.6rem;
      font-weight: 500;
      color: var(--ink);
      display: block;
      line-height: 1.1;
    }

    .hero-nametag-role {
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--r400);
      display: block;
      margin-top: .3rem;
    }

    /* ═══════════════════════════════════
   STATS BAND
═══════════════════════════════════ */
    .hero-stats-band {
      width: 100%;
      background: var(--ivory);
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
      padding: 3.5rem 5%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative;
      z-index: 3;
      animation: fadeUp .7s .5s ease both;
    }

    .hero-stats-band .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1.5rem 2rem;
      position: relative;
    }

    .hero-stats-band .stat-item+.stat-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
      bottom: 20%;
      width: 1px;
      background: var(--g200);
    }

    .hero-stats-band .hero-stat-num {
      font-family: var(--ff-head);
      font-size: 3.5rem;
      font-weight: 500;
      color: var(--g400);
      line-height: 1;
      display: block;
      margin-bottom: .4rem;
    }

    .hero-stats-band .hero-stat-label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .16em;
      color: var(--ink4);
      text-transform: uppercase;
      display: block;
    }

    .hero-stats-band .hero-stat-desc {
      font-family: var(--ff-head);
      font-size: .95rem;
      font-weight: 300;
      font-style: italic;
      color: var(--ink3);
      margin-top: .3rem;
      display: block;
    }

    /* ═══════════════════════════════════
   MISSION STRIP
═══════════════════════════════════ */
    .mission-strip {
      background: var(--r400);
      padding: 1.6rem 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .mission-strip p {
      font-family: var(--ff-head);
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .95);
      text-align: center;
    }

    .mission-strip p em {
      font-style: normal;
      font-weight: 600;
      color: #fff;
    }

    /* ═══════════════════════════════════
    VISION & MISSION SECTION
    ═══════════════════════════════════ */
    #vision-mission {
      padding: 80px 5%;
      background: var(--ivory);
      border-bottom: 1px solid var(--g200);
    }

    .vm-grid {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .vm-card {
      padding: 2.5rem;
      border: 1px solid var(--g200);
      position: relative;
    }

    .vm-mission {
      background: var(--g50);
    }

    .vm-vision {
      background: var(--r50);
    }

    .vm-label {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: 1rem;
    }

    .vm-vision .vm-label {
      color: var(--r400);
    }

    .vm-card h3 {
      font-family: var(--ff-head);
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.4;
      margin-bottom: 1rem;
    }

    .vm-card p {
      font-size: .9rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    @media (max-width: 768px) {
      .vm-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ═══════════════════════════════════
   WHY "DESIGN YOUR LIFE" SECTION
   ═══════════════════════════════════ */
    #why-design {
      padding: 100px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
      position: relative;
      overflow: hidden;
    }

    #why-design::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(174, 133, 47, .07) 0%, transparent 65%);
      pointer-events: none;
    }

    .why-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 4rem;
    }

    .why-header h2 {
      margin-bottom: .8rem;
    }

    .why-header .section-sub {
      margin: 0 auto;
    }

    .why-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr); /* ← swapped the fr values */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;  /* ← fixes image height */
}

.why-layout {
  align-items: stretch;  /* ← change from center */
}

.why-aside {
  display: flex;
}

.why-aside img {
  height: 100%;          /* ← change from auto */
  min-height: 420px;
  object-position: 80% center;
}

    .why-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }

.why-aside {
  display: flex;
  align-items: stretch;
  min-height: 0;          /* prevent grid blowout */
}

.why-aside img {
  width: 100%;
  height: 100%;           /* ← was: auto */
  min-height: 420px;      /* ensures image has presence */
  max-height: 760px;
  display: block;
  object-fit: cover;
  object-position: 80% center;   /* ← keeps face visible, not cropped */
  box-shadow: 0 18px 45px rgba(134, 82, 95, 0.12);
}

/* ═══════════════════════════════════
   Chevron (Font Awesome) styles
   Applies to: .fas.fa-chevron-left and .fas.fa-chevron-right
════════════════════════════════════ */
.fas.fa-chevron-left,
.fas.fa-chevron-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(30, 26, 24, 0.06);
  color: var(--ink);
  font-size: 0.95rem;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(30, 26, 24, 0.06);
  transition: background .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
  cursor: pointer;
  user-select: none;
}

/* Cancel the button-like circle styling on chevrons if they are wrapped inside actual <button> elements
   This prevents the "double-circle" bug and concentric translation shifts on hover. */
button .fas.fa-chevron-left,
button .fas.fa-chevron-right,
button:hover .fas.fa-chevron-left,
button:hover .fas.fa-chevron-right,
button:focus .fas.fa-chevron-left,
button:focus .fas.fa-chevron-right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.25s ease !important;
  color: inherit !important;
  border-radius: 0 !important;
  cursor: inherit !important;
  pointer-events: none !important;
}

.fas.fa-chevron-left:focus,
.fas.fa-chevron-right:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(142, 106, 34, 0.10);
}

/* remove square outline on focus/focus-visible */
.fas.fa-chevron-left:focus,
.fas.fa-chevron-right:focus,
.fas.fa-chevron-left:focus-visible,
.fas.fa-chevron-right:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 6px rgba(142, 106, 34, 0.10);
  border-radius: 50%;
}

/* suppress native button inner focus in Firefox and global button outline when it contains chevrons */
button::-moz-focus-inner {
  border: 0;
}

/* optional: remove tap highlight on mobile for icon buttons */
.fas.fa-chevron-left,
.fas.fa-chevron-right {
  -webkit-tap-highlight-color: transparent;
}

/* Directional hover motion + color accent */
.fas.fa-chevron-left:hover {
  background: var(--g400);
  color: #fff;
  transform: translateX(-6px) scale(1.03);
  box-shadow: 0 14px 36px rgba(134, 82, 95, 0.18);
}

.fas.fa-chevron-right:hover {
  background: var(--g400);
  color: #fff;
  transform: translateX(6px) scale(1.03);
  box-shadow: 0 14px 36px rgba(134, 82, 95, 0.18);
}

/* Small variant */
.fas.fa-chevron-left.small,
.fas.fa-chevron-right.small {
  width: 34px;
  height: 34px;
  font-size: 0.8rem;
}

/* Disabled / inactive state */
.fas.chevron-disabled,
.fas[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  transform: none !important;
}

/* Optional dark variant for overlay controls */
.chevron--dark.fas.fa-chevron-left,
.chevron--dark.fas.fa-chevron-right {
  background: rgba(0,0,0,0.45);
  color: #fff;
}


    /* Responsive: back to single column on tablet */
    @media (max-width: 980px) {
      .why-layout {
        grid-template-columns: 1fr;
      }

      .why-aside {
        order: 2;
      }
    }

    /* Mobile: single column */
    @media (max-width: 600px) {
      .why-grid {
        grid-template-columns: 1fr;
      }
    }

    .why-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2rem 1.8rem;
      position: relative;
      overflow: hidden;
      transition: transform .25s, box-shadow .25s;
    }

    .why-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .why-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--g400), var(--r400));
      transform: scaleX(0);
      transition: transform .3s;
      transform-origin: left;
    }

    .why-card:hover::before {
      transform: scaleX(1);
    }

    .why-card-icon {
      width: 44px;
      height: 44px;
      background: var(--g50);
      border: 1px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      margin-bottom: 1.2rem;
    }

    .why-card-icon i {
      color: var(--g400);
    }

    .why-card h3 {
      font-family: var(--ff-head);
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: .6rem;
      line-height: 1.3;
    }

    .why-card h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .why-card p {
      font-size: .84rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    /* ═══════════════════════════════════
   ABOUT (short)
═══════════════════════════════════ */
    section[id="about"],
    section[id="my-story"] {
      padding: 90px 5%;
      background: var(--ivory);
    }

    .about-wrap {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 5rem;
      align-items: center;
    }

    .about-img-col {
      position: relative;
    }

    .about-photo {
      width: 100%;
      aspect-ratio: 4/5;
      background: linear-gradient(150deg, var(--g100) 0%, var(--g200) 55%, var(--r200) 100%);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .about-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      position: relative;
      z-index: 1;
    }

    .about-photo svg {
      width: 50%;
      opacity: .22;
      fill: var(--g600);
      position: absolute;
      z-index: 0;
    }

    .about-photo img+svg {
      display: none;
    }

    .about-img-col::before {
      content: '';
      position: absolute;
      top: 18px;
      left: -18px;
      width: 100%;
      height: 100%;
      background: var(--g50);
      border: 1px solid var(--g200);
      z-index: -1;
      border-radius: 2px;
    }

    .about-quote-card {
      position: absolute;
      bottom: 20px;
      left: -28px;
      background: var(--r400);
      padding: 1.3rem 1.6rem;
      max-width: 220px;
      box-shadow: var(--shadow-md);
      z-index: 10;
    }

    .about-quote-card p {
      font-family: var(--ff-head);
      font-size: 1rem;
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .92);
      line-height: 1.55;
      margin-bottom: .5rem;
    }

    .about-quote-card cite {
      font-size: .65rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      font-style: normal;
    }

    .about-text-col {
      padding-bottom: 1rem;
    }

    .about-text-col .section-title {
      margin-bottom: 1.4rem;
    }

    .about-para {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 1rem;
    }

    .about-para strong {
      color: var(--ink2);
      font-weight: 500;
    }

    .about-beliefs {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      margin: 1.6rem 0 2rem;
    }

    .about-belief {
      display: flex;
      align-items: center;
      gap: .8rem;
      font-size: .88rem;
      color: var(--ink3);
      font-weight: 300;
      line-height: 1.5;
    }

    .belief-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--g400);
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════
   WHO I HELP
═══════════════════════════════════ */
    #who-i-help {
      background: var(--g50);
      padding: 90px 5%;
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
    }

    .who-header {
      text-align: center;
      max-width: 580px;
      margin: 0 auto 3.5rem;
    }

    .who-header h2 {
      margin-bottom: .7rem;
    }

    .who-header .section-sub {
      margin: 0 auto;
      text-align: center;
    }

    .who-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      max-width: 1100px;
      margin: 0 auto;
    }

    .who-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2.4rem 2rem;
      position: relative;
      transition: transform .25s, box-shadow .25s;
    }

    .who-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .who-card-num {
      font-family: var(--ff-head);
      font-size: 4rem;
      font-weight: 300;
      color: var(--g100);
      line-height: 1;
      position: absolute;
      top: .8rem;
      right: 1.2rem;
    }

    .who-icon-wrap {
      width: 50px;
      height: 50px;
      background: var(--g50);
      border: 1px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      margin-bottom: 1.2rem;
    }

    .who-icon-wrap i {
      color: var(--g400);
    }

    .who-card h3 {
      font-family: var(--ff-head);
      font-size: 1.45rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .6rem;
      line-height: 1.25;
    }

    .who-card h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .who-card p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: 1.5rem;
    }

    /* ═══════════════════════════════════
   MASTERPIECE MINDSET SECTION
═══════════════════════════════════ */
    #masterpiece {
      padding: 100px 5%;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    #masterpiece::before {
      content: '';
      position: absolute;
      top: -200px;
      left: -200px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .08) 0%, transparent 60%);
      pointer-events: none;
    }

    #masterpiece::after {
      content: '';
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(134, 82, 95, .10) 0%, transparent 60%);
      pointer-events: none;
    }

    .masterpiece-inner {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .masterpiece-header {
      max-width: 700px;
      margin-bottom: 3.5rem;
    }

    .masterpiece-header .eyebrow {
      color: var(--g300);
    }

    .masterpiece-header h2 {
      font-family: var(--ff-head);
      font-size: clamp(2.2rem, 4.5vw, 3.8rem);
      font-weight: 300;
      color: #fff;
      line-height: 1.12;
      margin-bottom: 1.2rem;
    }

    .masterpiece-header h2 em {
      font-style: italic;
      color: var(--g300);
    }

    .masterpiece-header p {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .6);
      line-height: 1.75;
      max-width: 600px;
    }

    .masterpiece-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .08);
      margin-bottom: 4rem;
    }

    .masterpiece-card {
      background: rgba(255, 255, 255, .03);
      padding: 2.4rem 2.2rem;
      display: flex;
      flex-direction: column;
      gap: .8rem;
      transition: background .25s;
      position: relative;
    }

    .masterpiece-card:hover {
      background: rgba(255, 255, 255, .06);
    }

    .masterpiece-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--g400), var(--r400));
      opacity: 0;
      transition: opacity .25s;
    }

    .masterpiece-card:hover::before {
      opacity: 1;
    }

    .masterpiece-card-from {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .25);
      margin-bottom: .2rem;
    }

    .masterpiece-card-arrow {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      color: var(--g400);
      margin: .3rem 0;
      display: block;
    }

    .masterpiece-card h3 {
      font-family: var(--ff-head);
      font-size: 1.35rem;
      font-weight: 400;
      color: rgba(255, 255, 255, .9);
      line-height: 1.25;
      margin-bottom: .4rem;
    }

    .masterpiece-card h3 em {
      font-style: italic;
      color: var(--g300);
    }

    .masterpiece-card p {
      font-size: .84rem;
      color: rgba(255, 255, 255, .45);
      line-height: 1.75;
      font-weight: 300;
    }

    /* Pull quote inside masterpiece */
    .masterpiece-pull {
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding-top: 3rem;
      text-align: center;
    }

    .masterpiece-pull blockquote {
      font-family: var(--ff-head);
      font-size: clamp(1.3rem, 2.5vw, 2rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .8);
      line-height: 1.5;
      max-width: 750px;
      margin: 0 auto 1.5rem;
    }

    .testi-wrap {
      max-width: 1250px;
      margin: 0 auto;
    }

    .testi-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .testi-header h2 {
      margin-bottom: .5rem;
    }

    /* --- Carousel Layout Wrappers --- */
    .testi-carousel-container {
      position: relative;
      width: 100%;
    }

    .testi-carousel-track-wrapper {
      overflow: hidden;
      width: 100%;
      padding: 10px 0;
    }

    .testi-carousel-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      gap: 1.5rem;
      cursor: grab; /* Visual grab indication */
    }

    /* --- Slide Proportions --- */
    .testi-slide {
      flex-shrink: 0;
      width: calc((100% - 1.5rem) / 2); /* Shows exactly 2 cards side-by-side on Desktop */
    }

    /* --- Absolute Floating Navigation Buttons --- */
    .carousel-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #ffffff;
      border: 1px solid rgba(174, 133, 47, 0.15);
      color: var(--g400);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 15;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: 0 4px 12px rgba(174, 133, 47, 0.08);
    }

    /* Remove tap highlight on icon */
    .carousel-nav .fas {
      -webkit-tap-highlight-color: transparent;
      pointer-events: none; /* let the button handle all events */
    }

    .carousel-nav.prev-btn {
      left: -52px; /* Floats elegantly on the outer left edge gutter */
    }

    .carousel-nav.next-btn {
      right: -52px; /* Floats elegantly on the outer right edge gutter */
    }

    /* Directional hover on the BUTTON, not the icon */
    .carousel-nav.prev-btn:hover {
      background: var(--g400);
      border-color: var(--g400);
      color: #fff;
      transform: translateY(-50%) translateX(-4px);
      box-shadow: 0 8px 24px rgba(174, 133, 47, 0.22);
    }

    .carousel-nav.next-btn:hover {
      background: var(--g400);
      border-color: var(--g400);
      color: #fff;
      transform: translateY(-50%) translateX(4px);
      box-shadow: 0 8px 24px rgba(174, 133, 47, 0.22);
    }

    /* Ensure the Font Awesome icon inside the button becomes white on button hover */
    .carousel-nav.prev-btn:hover .fas,
    .carousel-nav.next-btn:hover .fas,
    .carousel-nav:hover .fas {
      color: #fff;
    }

    /* Small variant */
    .carousel-nav.small {
      width: 34px;
      height: 34px;
      font-size: 0.8rem;
    }

    /* Disabled state */
    .carousel-nav[aria-disabled="true"],
    .carousel-nav.chevron-disabled {
      opacity: 0.45;
      pointer-events: none;
      transform: translateY(-50%) !important; /* keep vertical centering, kill motion */
    }

    /* Dark overlay variant */
    .carousel-nav.chevron--dark {
      background: rgba(0, 0, 0, 0.45);
      border-color: transparent;
      color: #fff;
    }

    /* --- Pagination Dots --- */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 2rem;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--g200);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .dot.active {
      background: var(--g400);
      transform: scale(1.3);
      width: 18px; /* Elegant pill-shape active dot */
      border-radius: 4px;
    }

    /* --- Premium Lightbox Modal Styling --- */
    .testi-lightbox {
      display: none;
      position: fixed;
      z-index: 99999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(26, 26, 26, 0.95);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      animation: fadeIn 0.3s ease;
    }

    .lightbox-content {
      max-width: 85%;
      max-height: 80%;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      border: 1.5px solid rgba(255, 255, 255, 0.1);
    }

    #lightboxCaption {
      color: #ccc;
      margin-top: 15px;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
    }

    .lightbox-close {
      position: absolute;
      top: 25px;
      right: 35px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.25s ease;
    }

    .lightbox-close:hover {
      color: var(--g400);
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Hide arrow controls on tablets/mobile screens to prevent screen overlap */
    @media (max-width: 900px) {
      .carousel-nav {
        display: none;
      }
    }

    .masterpiece-pull blockquote em {
      font-style: normal;
      color: var(--g300);
      font-weight: 500;
    }

    .masterpiece-pull .pull-cta {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 2rem;
    }

    .btn-gold {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .85rem 2rem;
      border-radius: 4px;
      cursor: pointer;
      transition: all .25s;
      background: var(--g400);
      color: #fff;
      border: none;
      box-shadow: 0 4px 20px rgba(174, 133, 47, .30);
    }

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

    .btn-outline-light {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .85rem 2rem;
      border-radius: 4px;
      cursor: pointer;
      transition: all .25s;
      background: transparent;
      color: rgba(255, 255, 255, .7);
      border: 1.5px solid rgba(255, 255, 255, .2);
    }

    .btn-outline-light:hover {
      border-color: var(--g300);
      color: var(--g300);
    }

    /* ═══════════════════════════════════
   SERVICES
═══════════════════════════════════ */
    #services {
      padding: 90px 5%;
      background: var(--ivory);
    }

    .services-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }

    .services-header {
      margin-bottom: 3.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: end;
    }

    .services-header h2 {
      margin-bottom: .5rem;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      background: var(--g200);
      border: 1px solid var(--g200);
    }

    .svc-card {
      background: var(--ivory);
      padding: 2.6rem 2.2rem;
      display: flex;
      flex-direction: column;
      gap: .8rem;
      transition: background .2s;
      position: relative;
    }

    .svc-card:hover {
      background: var(--g50);
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      transition: all 0.3s ease;
    }

    .svc-card--accent {
      background: var(--g50);
    }

    .svc-card--accent:hover {
      background: var(--g100);
    }

    .svc-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--g400), var(--r400));
      opacity: 0;
      transition: opacity .2s;
    }

    .svc-card:hover::before,
    .svc-card--accent::before {
      opacity: 1;
    }

    .svc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .4rem;
    }

    .svc-num {
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .16em;
      color: var(--g400);
      text-transform: uppercase;
    }

    .svc-icon {
      font-size: 1.6rem;
    }

    .svc-icon i {
      color: var(--g400);
    }

    .svc-card h3 {
      font-family: var(--ff-head);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.2;
      margin-bottom: .2rem;
    }

    .svc-card h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .svc-card>p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: .5rem;
    }

    .svc-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .45rem;
      margin-bottom: auto;
      padding-bottom: 1.2rem;
    }

    .svc-list li {
      font-size: .82rem;
      color: var(--ink3);
      font-weight: 300;
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .svc-list li::before {
      content: '';
      width: 14px;
      height: 1.5px;
      background: var(--g400);
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════ */
    #testimonials {
      padding: 90px 5%;
      background: var(--warm);
      border-top: 1px solid var(--g200);
    }

    .testi-card {
      background: #ffffff; /* Premium pure white card background */
      border: 1px solid rgba(174, 133, 47, 0.08); /* Soft gold-tint border */
      padding: 2.2rem 1.8rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.2rem;
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      border-radius: 12px; /* Elegant rounded corners */
      height: 100%; /* Ensures cards fill slide height perfectly */
      box-shadow: 0 10px 30px rgba(174, 133, 47, 0.03); /* Soft branding shadow */
      position: relative;
      overflow: hidden;
    }

    .testi-card:hover {
      box-shadow: 0 20px 40px rgba(174, 133, 47, 0.08); /* Deepened soft shadow on hover */
      transform: translateY(-5px);
    }

    /* Elegant floating quotation mark decoration */
    .card-quote-mark {
      position: absolute;
      top: 10px;
      right: 20px;
      font-family: var(--ff-head, 'Cormorant Garamond', serif);
      font-size: 6rem;
      line-height: 1;
      color: rgba(174, 133, 47, 0.06);
      pointer-events: none;
      user-select: none;
      font-weight: 600;
    }

    .testi-stars {
      font-size: .8rem;
      letter-spacing: .15em;
      color: var(--g400);
      z-index: 2;
    }


    .testi-text {
      font-family: var(--ff-body, 'Jost', sans-serif); /* Changed to body font for supreme legibility */
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--ink3);
      line-height: 1.7;
      flex: 1; /* Automatically stretches to equalize internal height spacing */
      z-index: 2;
      margin: 0;
    }



    .testi-author {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding-top: 1.2rem;
      border-top: 1px solid rgba(174, 133, 47, 0.08);
      margin-top: auto;
      z-index: 2;
    }


    .testi-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(174, 133, 47, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid rgba(174, 133, 47, 0.15);
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .testi-avatar-svg {
      width: 20px;
      height: 20px;
      color: var(--g400);
      stroke-width: 2px;
      transition: all 0.3s ease;
    }

    .testi-card:hover .testi-avatar-svg {
      transform: scale(1.1);
    }

    .testi-author-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .testi-name {
      font-size: .84rem;
      font-weight: 600;
      color: var(--ink2);
      display: block;
    }

    .testi-role {
      font-size: .7rem;
      color: var(--ink4);
      display: block;
    }

    /* --- Card Image Preview Component --- */
    .testi-card--image .testi-text {
      margin-bottom: 0.2rem;
    }

    .testi-img-preview {
      position: relative;
      width: 100%;
      height: 240px;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      border: 1.5px solid rgba(174, 133, 47, 0.12);
      margin: 0.4rem 0 0.8rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.02);
      z-index: 2;
    }

    .testi-img-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.4s ease;
    }

    .testi-img-preview:hover img {
      transform: scale(1.04);
    }

    .img-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(174, 133, 47, 0.5); /* Transparent branding overlay */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      opacity: 0;
      transition: opacity 0.3s ease;
      gap: 6px;
    }

    .testi-img-preview:hover .img-overlay {
      opacity: 1;
    }

    .img-overlay i {
      font-size: 1.5rem;
    }

    .img-overlay span {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* --- Premium Lightbox Modal --- */
    .testi-lightbox {
      display: none;
      position: fixed;
      z-index: 99999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(26, 26, 26, 0.95);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      animation: fadeIn 0.3s ease;
    }

    .lightbox-content {
      max-width: 85%;
      max-height: 80%;
      border-radius: 4px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }

    #lightboxCaption {
      color: #ccc;
      margin-top: 15px;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
    }

    .lightbox-close {
      position: absolute;
      top: 25px;
      right: 35px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.25s ease;
    }

    .lightbox-close:hover {
      color: var(--g400);
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* --- Responsive Breakpoints for Testimonials Carousel --- */
    @media (max-width: 1024px) {
      .testi-slide {
        width: calc((100% - 1.5rem) / 2); /* Shows 2 cards side-by-side on Tablets */
      }
    }

    @media (max-width: 768px) {
      .testi-slide {
        width: 100%; /* Shows exactly 1 card at a time on Mobile to match JS logic */
      }
    }

    /* ═══════════════════════════════════
   FINAL CTA
═══════════════════════════════════ */
    #final-cta {
      padding: 100px 5%;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: var(--ivory);
    }

    #final-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      height: 900px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .30);
      pointer-events: none;
    }

    #final-cta::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .22);
      pointer-events: none;
    }

    .final-cta-inner {
      position: relative;
      z-index: 1;
    }

    #final-cta .eyebrow {
      display: block;
      margin-bottom: 1rem;
    }

    #final-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2.2rem, 5vw, 4rem);
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1rem;
      line-height: 1.1;
    }

    #final-cta h2 em {
      font-style: italic;
      color: var(--g400);
    }

    #final-cta p {
      font-size: 1.05rem;
      color: var(--ink3);
      font-weight: 300;
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
      font-family: var(--ff-head);
      font-style: italic;
    }

    .final-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   CONTACT
═══════════════════════════════════ */
    #contact {
      padding: 90px 5%;
      background: var(--ink);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 5rem;
      max-width: 1000px;
      margin: 0 auto;
      align-items: start;
    }

    .contact-info .eyebrow {
      color: var(--r200);
    }

    .contact-info h2 {
      font-family: var(--ff-head);
      font-size: 2.5rem;
      font-weight: 300;
      color: #fff;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .contact-info h2 em {
      font-style: italic;
      color: var(--g300);
    }

    .contact-info p {
      font-size: .9rem;
      color: rgba(255, 255, 255, .5);
      line-height: 1.8;
      margin-bottom: 2rem;
      font-weight: 300;
      font-style: italic;
      font-family: var(--ff-head);
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .contact-detail {
      display: flex;
      align-items: center;
      gap: .9rem;
      font-size: .85rem;
      color: rgba(255, 255, 255, .55);
    }

    .contact-detail-icon {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      flex-shrink: 0;
    }

    .contact-detail-icon i {
      color: var(--g300);
    }

    .social-row {
      display: flex;
      gap: .6rem;
    }

    .social-icon {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      color: var(--ink3);
      text-decoration: none;
      transition: background .2s, color .2s;
    }

    .social-icon:hover {
      background: rgba(134, 82, 95, .25);
      color: var(--g400);
    }

    .contact-form {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      padding: 2.5rem;
    }

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

    .form-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: 1rem;
    }

    .form-group label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      padding: .8rem 1rem;
      font-family: var(--ff-body);
      font-size: .87rem;
      color: #fff;
      outline: none;
      transition: border-color .2s;
      width: 100%;
      border-radius: 0;
      -webkit-appearance: none;
      appearance: none;
    }

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

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--g300);
    }

    .form-group select option {
      background: var(--ink2);
    }

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

    .form-submit {
      width: 100%;
      background: var(--r400);
      color: #fff;
      border: none;
      padding: 1rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s;
    }

    .form-submit:hover {
      background: var(--r500);
    }

    .form-privacy {
      font-size: .72rem;
      color: rgba(255, 255, 255, .25);
      text-align: center;
      margin-top: .8rem;
    }

    .form-privacy i {
      color: var(--g300);
    }

    /* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
    footer {
      background: #111;
      padding: 3rem 5% 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 2.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      margin-bottom: 1.5rem;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--ff-head);
      font-size: 1.2rem;
      font-weight: 500;
      color: #875361;
      letter-spacing: .02em;
      text-decoration: none;
      margin-bottom: 0.8rem;
    }

    .footer-logo-img {
      height: 100px;
      width: auto;
      object-fit: contain;
    }

    .footer-logo-tagline {
      font-family: var(--ff-body);
      font-size: 0.55rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink4);
      line-height: 1.3;
    }

    .footer-logo em {
      font-style: italic;
      color: var(--g400);
    }

    .footer-brand p {
      font-size: .8rem;
      color: rgba(255, 255, 255, .3);
      line-height: 1.7;
      max-width: 240px;
      font-weight: 300;
    }

    .footer-col h4 {
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .25);
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .footer-col a {
      display: block;
      font-size: .82rem;
      color: rgba(255, 255, 255, .4);
      margin-bottom: .5rem;
      transition: color .2s;
    }

    .footer-col a:hover {
      color: var(--g300);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 1rem;
      color: rgb(255 255 255 / 42%);
    }

    /* ═══════════════════════════════════
   ANIMATIONS
═══════════════════════════════════ */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-content>* {
      animation: fadeUp .7s ease both;
    }

    .hero-content .hero-greeting {
      animation-delay: .05s;
    }

    .hero-content h1 {
      animation-delay: .15s;
    }

    .hero-content .hero-subtitle-line {
      animation-delay: .22s;
    }

    .hero-content .hero-tagline {
      animation-delay: .28s;
    }

    .hero-content .hero-btns {
      animation-delay: .38s;
    }

    .hero-visual {
      animation: fadeUp .8s .25s ease both;
    }

    .fade-up-target {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
    }

    .fade-up-target.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger children in why-grid and masterpiece-grid */
    .why-card:nth-child(2) {
      transition-delay: .08s;
    }

    .why-card:nth-child(3) {
      transition-delay: .16s;
    }

    .why-card:nth-child(4) {
      transition-delay: .1s;
    }

    .why-card:nth-child(5) {
      transition-delay: .18s;
    }

    .why-card:nth-child(6) {
      transition-delay: .26s;
    }

    .masterpiece-card:nth-child(2) {
      transition-delay: .08s;
    }

    .masterpiece-card:nth-child(3) {
      transition-delay: .14s;
    }

    .masterpiece-card:nth-child(4) {
      transition-delay: .2s;
    }

    .why-card:nth-child(7) {
      transition-delay: .34s;
    }

    /* Active nav link */
    .nav-active {
      color: var(--g400) !important;
    }

    /* ═══════════════════════════════════
   ABOUT PAGE — HERO
═══════════════════════════════════ */
    .about-hero {
      padding: 140px 5% 80px;
      background: var(--g50);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--g200);
    }

    .about-hero::before {
      content: '';
      position: absolute;
      top: -150px;
      right: -150px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .12) 0%, transparent 60%);
      pointer-events: none;
    }

    .about-hero::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(134, 82, 95, .08) 0%, transparent 60%);
      pointer-events: none;
    }

    .about-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .about-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.4rem;
    }

    .about-hero-title em {
      font-style: italic;
      color: var(--g400);
    }

    .about-hero-sub {
      font-size: 1.05rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
    }

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

    .about-hero-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
    }

    .about-hero-visual {
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    @media (max-width: 900px) {

      /* FOOTER RESPONSIVE */
      footer {
        padding: 3rem 5% !important;
      }

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

      .footer-brand p {
        font-size: 0.9rem !important;
      }

      .footer-logo-img {
        height: 70px !important;
      }

      .footer-col h4 {
        font-size: 0.63rem !important;
      }

      .footer-brand {
        gap: 15px;
        display: flex;
        flex-direction: column;
      }

      .footer-col a {
        font-size: 0.64rem !important;
      }

      .footer-brand p[style*="font-size: 1rem"] {
        font-size: 0.64rem !important;
      }

      .footer-bottom {
        font-size: 0.8rem;
      }

      /* WHATSAPP FAB */
      .about-hero-visual {
        display: none;
      }
    }

    /* ═══════════════════════════════════
   ABOUT PAGE — INTRO SECTION
 ═══════════════════════════════════ */
    .about-intro {
      padding: 80px 5%;
      background: var(--g50);
    }

    .about-intro-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
      align-items: center;
    }

    .about-intro-img {
      position: relative;
    }

    .about-intro-img::before {
      content: '';
      position: absolute;
      top: -15px;
      left: -15px;
      width: 100%;
      height: 100%;
      background: var(--g200);
      border-radius: 4px;
      z-index: -1;
    }

    .about-intro-img img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: var(--shadow-md);
    }

    .about-intro-text h2 {
      font-family: var(--ff-head);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1.2rem;
      line-height: 1.2;
    }

    .about-intro-text h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .about-intro-text p {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.8;
      font-weight: 300;
      margin-bottom: 1rem;
    }

    .about-intro-text p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 900px) {
      .about-intro-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .about-intro-img {
        max-width: 400px;
        margin: 0 auto;
      }
    }

    /* ═══════════════════════════════════
   ABOUT PAGE — STORY TIMELINE
═══════════════════════════════════ */
    .story-section {
      padding: 80px 5%;
      background: var(--ivory);
    }

    .story-inner {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    /* Vertical connector line */
    .story-inner::before {
      content: '';
      position: absolute;
      left: 58px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, var(--g200), var(--g400), var(--r400), var(--g200));
    }

    .story-chapter {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 2.5rem;
      padding: 3rem 0;
      position: relative;
    }

    .story-chapter+.story-chapter {
      border-top: 1px solid var(--g100);
    }

    .story-chapter-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      position: relative;
      z-index: 1;
    }

    .story-chapter-num {
      width: 48px;
      height: 48px;
      background: var(--ivory);
      border: 2px solid var(--g200);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--g400);
      transition: all .3s;
    }

    .story-chapter:hover .story-chapter-num {
      background: var(--g400);
      border-color: var(--g400);
      color: #fff;
    }

    .story-chapter-label {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink4);
      text-align: center;
    }

    .story-chapter-content {
      padding-top: .5rem;
    }

    .story-chapter-title {
      font-family: var(--ff-head);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .story-chapter-title em {
      font-style: italic;
      color: var(--g400);
    }

    .story-chapter-content p {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 1rem;
    }

    .story-chapter-content p strong {
      color: var(--ink2);
      font-weight: 500;
    }

    /* Highlighted chapter (turning point) */
    .story-chapter--highlight {
      background: var(--g50);
      margin: 0 -2rem;
      padding: 3rem 2rem;
      border: 1px solid var(--g200);
      border-left: 3px solid var(--g400);
    }

    /* ═══════════════════════════════════
   ABOUT PAGE — PULL QUOTE
═══════════════════════════════════ */
    .about-pull-quote {
      background: var(--r400);
      padding: 4rem 5%;
      text-align: center;
    }

    .about-pull-quote blockquote {
      font-family: var(--ff-head);
      font-size: clamp(1.4rem, 3vw, 2.2rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .92);
      line-height: 1.5;
      max-width: 700px;
      margin: 0 auto 1rem;
    }

    .about-pull-quote blockquote em {
      font-style: normal;
      font-weight: 600;
      color: #fff;
    }

    .about-pull-quote cite {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      font-style: normal;
    }

    /* ═══════════════════════════════════
   ABOUT PAGE — CTA
═══════════════════════════════════ */
    .about-cta {
      padding: 100px 5%;
      text-align: center;
      background: var(--ivory);
      position: relative;
      overflow: hidden;
    }

    .about-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .25);
      pointer-events: none;
    }

    .about-cta-inner {
      position: relative;
      z-index: 1;
    }

    .about-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1.5rem;
      line-height: 1.15;
    }

    .about-cta h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .about-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   ABOUT PAGE — INTRO WITH IMAGE
 ═══════════════════════════════════ */
    .about-intro {
      padding: 80px 5%;
      background: var(--g50);
    }

    .about-intro-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
      align-items: center;
    }

    .about-intro-img {
      position: relative;
    }

    .about-intro-img img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: var(--shadow-md);
    }

    .about-intro-img::before {
      content: '';
      position: absolute;
      top: -15px;
      left: -15px;
      width: 100%;
      height: 100%;
      background: var(--g200);
      border-radius: 4px;
      z-index: -1;
    }

    .about-intro-text .eyebrow {
      margin-bottom: 0.5rem;
    }

    .about-intro-text h2 {
      font-family: var(--ff-head);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1.2rem;
      line-height: 1.2;
    }

    .about-intro-text h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .about-intro-text p {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.8;
      font-weight: 300;
      margin-bottom: 1rem;
    }

    /* Responsive: about intro */
    @media (max-width: 900px) {
      .about-intro-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .about-intro-img {
        max-width: 400px;
        margin: 0 auto;
      }
    }

    /* ═══════════════════════════════════
   SERVICES PAGE — HERO
 ═══════════════════════════════════ */
    .svc-hero {
      padding: 140px 5% 80px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    .svc-hero::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .10) 0%, transparent 60%);
      pointer-events: none;
    }

    .svc-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .svc-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1.4rem;
    }

    .svc-hero-title em {
      font-style: italic;
      color: var(--g300);
    }

    .svc-hero-sub {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.8;
      max-width: 500px;
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
    }

    /* ═══════════════════════════════════
   SERVICES PAGE — DETAIL SECTIONS
═══════════════════════════════════ */
    .svc-detail {
      padding: 90px 5%;
      background: var(--ivory);
      border-bottom: 1px solid var(--g200);
    }

    .svc-detail--alt {
      background: var(--g50);
    }

    .svc-detail-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .svc-detail-header {
      margin-bottom: 3rem;
    }

    .svc-detail-header--center {
      text-align: center;
    }

    .svc-detail-badge {
      display: inline-block;
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--r400);
      background: var(--r50);
      border: 1px solid var(--r100);
      padding: .35rem .9rem;
      margin-bottom: 1rem;
    }

    .svc-detail-header h2 {
      margin-bottom: .8rem;
    }

    /* Feature cards grid */
    .svc-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.2rem;
      margin-bottom: 2rem;
    }

    .svc-feature-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 1.8rem 1.6rem;
      display: flex;
      gap: 1.2rem;
      align-items: flex-start;
      transition: transform .25s, box-shadow .25s;
    }

    .svc-detail--alt .svc-feature-card {
      background: #fff;
    }

    .svc-feature-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-sm);
    }

    .svc-feature-card--wide {
      grid-column: 1 / -1;
    }

    .svc-feature-icon {
      width: 42px;
      height: 42px;
      min-width: 42px;
      background: var(--g50);
      border: 1px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: var(--g400);
    }

    .svc-feature-card h3 {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: .35rem;
      line-height: 1.3;
    }

    .svc-feature-card p {
      font-size: .84rem;
      color: var(--ink3);
      line-height: 1.7;
      font-weight: 300;
    }

    /* Bonus callout */
    .svc-bonus {
      background: var(--g50);
      border: 1px solid var(--g200);
      border-left: 3px solid var(--g400);
      padding: 1.4rem 1.8rem;
      display: flex;
      align-items: center;
      gap: 1.2rem;
    }

    .svc-detail--alt .svc-bonus {
      background: var(--ivory);
    }

    .svc-bonus-tag {
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #fff;
      background: var(--g400);
      padding: .3rem .7rem;
      white-space: nowrap;
    }

    .svc-bonus p {
      font-size: .88rem;
      color: var(--ink3);
      line-height: 1.65;
      font-weight: 300;
    }

    .svc-bonus p strong {
      color: var(--ink2);
      font-weight: 600;
    }

    /* ═══════════════════════════════════
   SERVICES PAGE — CONFIDENCE CLUB
═══════════════════════════════════ */
    .svc-club-tagline {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 300;
      font-style: italic;
      color: var(--r400);
      margin-top: 1rem;
    }

    .svc-club-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .svc-club-col {
      border: 1px solid var(--g200);
      background: var(--ivory);
      overflow: hidden;
    }

    .svc-club-col-header {
      background: var(--g50);
      border-bottom: 1px solid var(--g200);
      padding: 2rem 2rem 1.5rem;
      text-align: center;
    }

    .svc-club-col--rose .svc-club-col-header {
      background: var(--r50);
      border-bottom-color: var(--r100);
    }

    .svc-club-col-icon {
      font-size: 1.8rem;
      display: block;
      margin-bottom: .6rem;
      color: var(--g400);
    }

    .svc-club-col-header h3 {
      font-family: var(--ff-head);
      font-size: 1.35rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .3rem;
    }

    .svc-club-col-sub {
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--g400);
    }

    .svc-club-col--rose .svc-club-col-sub {
      color: var(--r400);
    }

    .svc-club-list {
      padding: 1.5rem 2rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      list-style: none;
    }

    .svc-club-list li {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      padding-left: 1rem;
      border-left: 2px solid var(--g200);
    }

    .svc-club-col--rose .svc-club-list li {
      border-left-color: var(--r200);
    }

    .svc-club-list li strong {
      font-size: .88rem;
      font-weight: 600;
      color: var(--ink2);
    }

    .svc-club-list li span {
      font-size: .82rem;
      color: var(--ink3);
      line-height: 1.7;
      font-weight: 300;
    }

    /* ═══════════════════════════════════
   SERVICES PAGE — CTA
═══════════════════════════════════ */
    .svc-page-cta {
      padding: 100px 5%;
      text-align: center;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    .svc-page-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .12);
      pointer-events: none;
    }

    .svc-page-cta-inner {
      position: relative;
      z-index: 1;
    }

    .svc-page-cta .eyebrow {
      color: var(--g300);
    }

    .svc-page-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: #fff;
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .svc-page-cta h2 em {
      font-style: italic;
      color: var(--g300);
    }

    .svc-page-cta p {
      font-size: 1rem;
      color: rgba(255, 255, 255, .5);
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }

    .svc-page-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   SERVICES PAGE — TESTIMONIALS
 ═══════════════════════════════════ */
    .svc-testimonials {
      padding: 90px 5%;
      background: var(--warm);
      border-top: 1px solid var(--g200);
    }

    .svc-testimonials-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .svc-testimonials-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .svc-testimonials-header h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 400;
      color: var(--ink);
    }

    .svc-testimonials-header h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .svc-testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .svc-testimonial-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .svc-testimonial-stars {
      font-size: .85rem;
      letter-spacing: .15em;
      color: var(--g400);
    }

    .svc-testimonial-text {
      font-family: var(--ff-head);
      font-size: .95rem;
      font-weight: 300;
      font-style: italic;
      color: var(--ink2);
      line-height: 1.75;
      flex: 1;
    }

    .svc-testimonial-author {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding-top: 1rem;
      border-top: 1px solid var(--g100);
    }

    .svc-testimonial-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-head);
      font-size: 1rem;
      font-weight: 500;
      color: var(--g600);
      flex-shrink: 0;
    }

    .svc-testimonial-info {
      display: flex;
      flex-direction: column;
    }

    .svc-testimonial-name {
      font-size: .85rem;
      font-weight: 600;
      color: var(--ink2);
    }

    .svc-testimonial-role {
      font-size: .72rem;
      color: var(--ink4);
    }

    @media (max-width: 900px) {
      .svc-testimonials-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ═══════════════════════════════════
   SERVICES PAGE — FAQ
 ═══════════════════════════════════ */
    .svc-faq {
      padding: 90px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
    }

    .svc-faq-inner {
      max-width: 800px;
      margin: 0 auto;
    }

    .svc-faq-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .svc-faq-header h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 400;
      color: var(--ink);
    }

    .svc-faq-header h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .svc-faq .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* .svc-faq .faq-item { */
    border: 1px solid var(--g200);
    border-bottom: none;
    overflow: hidden;
    }

    .svc-faq .faq-item:last-child {
      border-bottom: 1px solid var(--g200);
    }

    .svc-faq .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.2rem 1.4rem;
      background: var(--ivory);
      border: none;
      cursor: pointer;
      transition: background 0.25s;
    }

    .svc-faq .faq-question:hover {
      background: var(--g50);
    }

    .svc-faq .faq-question span:first-child {
      font-family: var(--ff-head);
      font-size: 1rem;
      font-weight: 500;
      color: var(--ink2);
      text-align: left;
    }

    .svc-faq .faq-toggle {
      font-size: 1.2rem;
      color: var(--g400);
      transition: transform 0.25s;
      flex-shrink: 0;
    }

    .svc-faq .faq-item.open .faq-toggle {
      transform: rotate(45deg);
    }

    .svc-faq .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      background: var(--ivory);
    }

    .svc-faq .faq-item.open .faq-answer {
      max-height: 1000px;
    }

    .svc-faq .faq-answer p {
      padding: 0 1.4rem 1.2rem;
      font-size: .9rem;
      color: var(--ink3);
      line-height: 1.7;
      font-weight: 300;
    }

    .svc-faq .faq-answer a {
      color: var(--g400);
      text-decoration: underline;
    }

    .svc-faq .faq-answer a:hover {
      color: var(--g500);
    }

    @media (max-width: 600px) {
      .svc-faq {
        padding: 60px 5%;
      }
    }


    /* ═══════════════════════════════════
   DISCOVERY PAGE — HERO
 ═══════════════════════════════════ */
    .disc-hero {
      padding: 140px 5% 70px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .disc-hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .12);
      pointer-events: none;
    }

    .disc-hero-inner {
      position: relative;
      z-index: 1;
    }

    .disc-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.2rem, 4.5vw, 3.8rem);
      font-weight: 300;
      color: #fff;
      line-height: 1.12;
      margin-bottom: 1rem;
    }

    .disc-hero-title em {
      font-style: italic;
      color: var(--g300);
    }

    .disc-hero-sub {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, .5);
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
    }

    /* ═══════════════════════════════════
   DISCOVERY PAGE — FORM
═══════════════════════════════════ */
    .disc-form-section {
      padding: 60px 5% 80px;
      background: var(--ivory);
    }

    .disc-form-wrap {
      max-width: 680px;
      margin: 0 auto;
    }

    /* Progress bar */
    .disc-progress {
      margin-bottom: 3rem;
    }

    .disc-progress-bar {
      height: 3px;
      background: var(--g100);
      position: relative;
      margin-bottom: 1.2rem;
    }

    .disc-progress-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: linear-gradient(90deg, var(--g400), var(--r400));
      width: 0%;
      transition: width .4s ease;
    }

    .disc-progress-steps {
      display: flex;
      justify-content: space-between;
    }

    .disc-progress-step {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--ivory);
      border: 2px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-head);
      font-size: .85rem;
      font-weight: 500;
      color: var(--ink4);
      transition: all .3s;
    }

    .disc-progress-step.active {
      background: var(--g400);
      border-color: var(--g400);
      color: #fff;
    }

    .disc-progress-step.done {
      background: var(--g200);
      border-color: var(--g300);
      color: var(--g500);
    }

    /* Steps */
    .disc-step {
      display: none;
    }

    .disc-step.active {
      display: block;
    }

    .disc-step-header {
      margin-bottom: 2rem;
    }

    .disc-step-label {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: .5rem;
    }

    .disc-step-header h2 {
      font-family: var(--ff-head);
      font-size: 1.8rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.25;
      margin-bottom: .5rem;
    }

    .disc-step-header h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .disc-step-header p {
      font-size: .9rem;
      color: var(--ink3);
      font-weight: 300;
    }

    /* Fields */
    .disc-field {
      margin-bottom: 1.2rem;
    }

    .disc-field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .disc-field label {
      display: block;
      font-size: .78rem;
      font-weight: 600;
      color: var(--ink2);
      margin-bottom: .4rem;
      letter-spacing: .02em;
    }

    .disc-field input,
    .disc-field textarea,
    .disc-field select {
      width: 100%;
      padding: .8rem 1rem;
      font-family: var(--ff-body);
      font-size: .88rem;
      color: var(--ink);
      background: #fff;
      border: 1.5px solid var(--g200);
      outline: none;
      transition: border-color .2s;
      box-sizing: border-box;
    }

    .disc-field input:focus,
    .disc-field textarea:focus,
    .disc-field select:focus {
      border-color: var(--g400);
    }

    .disc-field textarea {
      resize: vertical;
      min-height: 80px;
    }

    /* Path cards */
    .disc-path-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .disc-path-card {
      cursor: pointer;
    }

    .disc-path-card input {
      display: none;
    }

    .disc-path-card-inner {
      border: 1.5px solid var(--g200);
      background: #fff;
      padding: 1.5rem 1.2rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      transition: all .25s;
      height: 100%;
    }

    .disc-path-card-inner:hover {
      border-color: var(--g300);
    }

    .disc-path-card.selected .disc-path-card-inner,
    .disc-path-card input:checked~.disc-path-card-inner {
      border-color: var(--g400);
      background: var(--g50);
      box-shadow: 0 0 0 2px rgba(174, 133, 47, .15);
    }

    .disc-path-icon {
      font-size: 2rem;
    }

    .disc-path-card-inner strong {
      font-size: .9rem;
      color: var(--ink);
    }

    .disc-path-desc {
      font-size: .76rem;
      color: var(--ink3);
      line-height: 1.5;
      font-weight: 300;
    }

    /* Check / radio cards */
    .disc-audit-group {
      margin-bottom: 2rem;
    }

    .disc-audit-group h3 {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1rem;
    }

    .disc-check-list {
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }

    .disc-check {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding: .9rem 1.1rem;
      border: 1.5px solid var(--g200);
      background: #fff;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }

    .disc-check:hover {
      border-color: var(--g300);
    }

    .disc-check input:checked~span {
      color: var(--ink);
    }

    .disc-check:has(input:checked) {
      border-color: var(--g400);
      background: var(--g50);
    }

    .disc-check input {
      accent-color: var(--g400);
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .disc-check span {
      font-size: .84rem;
      color: var(--ink3);
      line-height: 1.5;
      font-weight: 300;
    }

    /* Reflection */
    .disc-reflection {
      background: var(--g50);
      border: 1px solid var(--g200);
      padding: 2rem;
      margin: 2rem 0;
    }

    .disc-reflection h3 {
      font-family: var(--ff-head);
      font-size: 1.3rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1rem;
    }

    .disc-reflection h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .disc-reflection-prompt {
      font-family: var(--ff-head);
      font-size: .95rem;
      font-style: italic;
      color: var(--ink3);
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }

    /* Final message */
    .disc-final-msg {
      text-align: center;
      padding: 1.5rem 0;
    }

    .disc-final-msg p {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.7;
      font-weight: 300;
    }

    .disc-final-msg p strong {
      color: var(--g400);
      font-weight: 600;
    }

    /* Nav buttons */
    .disc-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--g100);
    }

    .disc-privacy {
      text-align: center;
      font-size: .78rem;
      color: var(--ink4);
      margin-top: 1.2rem;
      font-weight: 300;
    }

    /* ═══════════════════════════════════
    MOBILE HAMBURGER MENU
    ═══════════════════════════════════ */
    .nav-hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: .5rem;
      z-index: 1001;
      flex-direction: column;
      gap: 5px;
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      transition: all .3s;
    }

    .nav-hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .nav-hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    @media (max-width: 900px) {

      /* Mobile Navigation */
      .nav-hamburger {
        display: flex;
      }

      /* Responsive Grid Adjustments */
      #hero {
        grid-template-columns: 1fr;
        margin-top: 100px; /* offset fixed nav on mobile */
        padding-top: 40px; /* clean mobile padding */
        gap: 2rem;
      }

      .hero-visual {
        order: -1;
      }

      .hero-img-frame {
        width: 280px;
        margin: 0 auto 40px;
        transform: translateX(0); /* keep it centered on mobile */
      }

      .hero-nametag {
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
      }

      .hero-stats-band {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .hero-stats-band .stat-item+.stat-item::before {
        display: none;
      }

      .hero-stats-band .stat-item {
        border-bottom: 1px solid var(--g200);
      }

      .hero-stats-band .stat-item:last-child {
        border-bottom: none;
      }

      .why-grid,
      .who-grid,
      .services-grid,
      .testi-grid {
        grid-template-columns: 1fr;
      }

      .masterpiece-grid {
        grid-template-columns: 1fr;
      }

      .contact-grid,
      .services-header {
        grid-template-columns: 1fr;
      }

      .about-wrap {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .about-img-col {
        order: -1;
      }

      .form-row,
      .cpf-row,
      .chat-form-row,
      .svc-detail-grid,
      .svc-club-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Form validation styles */
    .input-error {
      border-color: #c45a5a !important;
      animation: shake 0.3s ease;
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-4px);
      }

      75% {
        transform: translateX(4px);
      }
    }

    /* Focus states for accessibility */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
      outline: 2px solid var(--g400);
      outline-offset: 2px;
    }

    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    input:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    select:focus:not(:focus-visible) {
      outline: none;
    }

    /* Skip to content link for accessibility */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--g400);
      color: #fff;
      padding: 8px 16px;
      z-index: 10000;
      transition: top 0.3s;
    }

    .skip-link:focus {
      top: 0;
    }

    /* ═══════════════════════════════════
   MASTERCLASS PAGE — HERO
═══════════════════════════════════ */
    .mc-hero {
      padding: 140px 5% 80px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    .mc-hero::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .10) 0%, transparent 60%);
      pointer-events: none;
    }

    .mc-hero::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(134, 82, 95, .08) 0%, transparent 60%);
      pointer-events: none;
    }

    .mc-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .mc-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1.4rem;
    }

    .mc-hero-title em {
      font-style: italic;
      color: var(--g300);
    }

    .mc-hero-sub {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
    }

    /* ═══════════════════════════════════
   MASTERCLASS PAGE — COURSE OVERVIEW
═══════════════════════════════════ */
    .mc-overview {
      padding: 90px 5%;
      background: var(--ivory);
    }

    .mc-overview-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .mc-overview-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 4rem;
    }

    .mc-overview-header h2 {
      margin-bottom: .8rem;
    }

    .mc-overview-header .section-sub {
      margin: 0 auto;
    }

    .mc-courses-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .mc-course-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2.4rem 2rem;
      display: flex;
      flex-direction: column;
      gap: .8rem;
      position: relative;
      transition: transform .25s, box-shadow .25s;
    }

    .mc-course-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .mc-course-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--g400), var(--r400));
      opacity: 0;
      transition: opacity .25s;
    }

    .mc-course-card:hover::before {
      opacity: 1;
    }


    .mc-course-badge {
      display: inline-block;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--r400);
      background: var(--r50);
      border: 1px solid var(--r100);
      padding: .3rem .8rem;
      align-self: flex-start;
    }

    .mc-course-icon {
      font-size: 2rem;
      margin: .5rem 0;
      color: var(--g400);
    }

    .mc-course-card h3 {
      font-family: var(--ff-head);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.2;
    }

    .mc-course-card h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-course-card>p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    .mc-course-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin: .5rem 0 1rem;
      flex: 1;
    }

    .mc-course-features li {
      font-size: .82rem;
      color: var(--ink3);
      font-weight: 300;
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .mc-course-features li::before {
      content: '';
      width: 14px;
      height: 1.5px;
      background: var(--g400);
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════
   MASTERCLASS PAGE — CURRICULUM
═══════════════════════════════════ */
    .mc-curriculum {
      padding: 90px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
    }

    .mc-curriculum-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .mc-curriculum-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .mc-modules-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .mc-module {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2rem 1.8rem;
      transition: transform .25s, box-shadow .25s;
    }

    .mc-module:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .mc-module-num {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: 1rem;
    }

    .mc-module h3 {
      font-family: var(--ff-head);
      font-size: 1.3rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .7rem;
      line-height: 1.25;
    }

    .mc-module h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-module p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    /* ═══════════════════════════════════
   MASTERCLASS PAGE — TESTIMONIAL
═══════════════════════════════════ */
    .mc-testimonial {
      background: var(--r400);
      padding: 4rem 5%;
      text-align: center;
    }

    .mc-testimonial blockquote {
      font-family: var(--ff-head);
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .92);
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto 1rem;
    }

    .mc-testimonial blockquote em {
      font-style: normal;
      font-weight: 600;
      color: #fff;
    }

    .mc-testimonial cite {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      font-style: normal;
    }

    /* ═══════════════════════════════════
   MASTERCLASS PAGE — CTA
═══════════════════════════════════ */
    .mc-cta {
      padding: 100px 5%;
      text-align: center;
      background: var(--ivory);
      position: relative;
      overflow: hidden;
    }

    .mc-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .25);
      pointer-events: none;
    }

    .mc-cta-inner {
      position: relative;
      z-index: 1;
    }

    .mc-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .mc-cta h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-cta p {
      font-size: 1rem;
      color: var(--ink3);
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }

    .mc-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   CONTACT PAGE — HERO
═══════════════════════════════════ */
    .contact-hero {
      padding: 140px 5% 0;
      background: var(--g50);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--g200);
    }

    .contact-hero::before {
      content: '';
      position: absolute;
      top: -150px;
      right: -150px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .12) 0%, transparent 60%);
      pointer-events: none;
    }

    .contact-hero-grid {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      gap: 3rem;
      align-items: end;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .contact-hero-inner {
      align-self: center;
      position: relative;
      z-index: 1;
    }

    .contact-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.4rem;
    }

    .contact-hero-title em {
      font-style: italic;
      color: var(--g400);
    }

    .contact-hero-sub {
      font-size: 1.05rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
    }

    /* Hero Portrait Column */
    .contact-hero-portrait {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    .contact-hero-portrait .contact-portrait-frame {
      max-width: 340px;
      width: 100%;
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      border-bottom: none;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06), 0 -2px 8px rgba(0, 0, 0, 0.03);
    }

    .contact-hero-portrait .contact-portrait-img {
      border-radius: 8px 8px 0 0;
      width: 100%;
      height: auto;
      display: block;
    }

    /* ═══════════════════════════════════
   CONTACT PAGE — CONTENT
═══════════════════════════════════ */
    .contact-page-section {
      padding: 90px 5%;
      background: var(--ivory);
    }

    .contact-page-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 5rem;
      max-width: 1100px;
      margin: 0 auto;
      align-items: start;
    }

    .contact-page-info h2 {
      margin-bottom: 1rem;
    }

    .contact-page-desc {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 2.5rem;
    }

    .contact-page-details {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: 2.5rem;
    }

    .contact-page-detail {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .contact-page-detail-icon {
      width: 42px;
      height: 42px;
      background: var(--g50);
      border: 1px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      color: var(--g400);
    }

    .contact-page-detail strong {
      display: block;
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink2);
      margin-bottom: .15rem;
    }

    .contact-page-detail span {
      font-size: .84rem;
      color: var(--ink3);
      font-weight: 300;
      line-height: 1.5;
    }

    .contact-page-social h4 {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink4);
      margin-bottom: 1rem;
    }

    .contact-page-social-row {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
    }

    .contact-social-btn {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .5rem 1rem;
      border: 1px solid var(--g200);
      font-size: .78rem;
      font-weight: 500;
      color: var(--g400);
      transition: all .2s;
      background: var(--g50);
    }

    .contact-social-btn:hover {
      border-color: var(--g400);
      color: var(--g400);
      background: var(--ivory);
    }

    .contact-social-btn i {
      color: var(--g400);
    }

    /* Coach Portrait in Info Column */
    .contact-portrait-wrap {
      margin-top: 3rem;
    }

    .contact-portrait-frame {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      border: 1px solid var(--g200);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .contact-portrait-frame::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);
      pointer-events: none;
    }

    .contact-portrait-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .contact-portrait-frame:hover .contact-portrait-img {
      transform: scale(1.03);
    }

    .contact-portrait-caption {
      margin-top: 1rem;
      font-family: var(--ff-head);
      font-size: 0.95rem;
      color: var(--ink4);
      line-height: 1.6;
      text-align: center;
      font-weight: 300;
    }

    .contact-portrait-caption em {
      font-style: italic;
      color: var(--g400);
    }

    /* Contact Page Form */
    .contact-page-form-wrap {
      position: relative;
    }

    .contact-page-form {
      background: var(--g50);
      border: 1px solid var(--g200);
      padding: 2.5rem;
    }

    .contact-page-form h3 {
      font-family: var(--ff-head);
      font-size: 1.6rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 2rem;
    }

    .cpf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .cpf-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: 1rem;
    }

    .cpf-group label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink4);
    }

    .cpf-group input,
    .cpf-group textarea,
    .cpf-group select {
      background: #fff;
      border: 1.5px solid var(--g200);
      padding: .8rem 1rem;
      font-family: var(--ff-body);
      font-size: .87rem;
      color: var(--ink);
      outline: none;
      transition: border-color .2s;
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
    }

    .cpf-group input:focus,
    .cpf-group textarea:focus,
    .cpf-group select:focus {
      border-color: var(--g400);
    }

    .cpf-group input::placeholder,
    .cpf-group textarea::placeholder {
      color: var(--ink4);
    }

    .cpf-group textarea {
      resize: vertical;
      min-height: 120px;
    }

    .cpf-group select option {
      background: #fff;
    }

    .cpf-submit {
      width: 100%;
      background: var(--r400);
      color: #fff;
      border: none;
      padding: 1rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s;
    }

    .cpf-submit:hover {
      background: var(--r500);
    }

    .cpf-privacy {
      font-size: .72rem;
      color: var(--ink4);
      text-align: center;
      margin-top: .8rem;
    }

    .cpf-privacy i {
      color: var(--g400);
    }

    /* Contact Quote Strip */
    .contact-quote-strip {
      background: var(--r400);
      padding: 4rem 5%;
      text-align: center;
    }

    .contact-quote-strip blockquote {
      font-family: var(--ff-head);
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .92);
      line-height: 1.6;
      max-width: 650px;
      margin: 0 auto 1rem;
    }

    .contact-quote-strip blockquote em {
      font-style: normal;
      font-weight: 600;
      color: #fff;
    }

    .contact-quote-strip cite {
      font-family: var(--ff-head);
      font-size: .85rem;
      color: rgba(255, 255, 255, .6);
      font-style: normal;
    }

    /* ═══════════════════════════════════
   CONTACT PAGE — FAQ
 ═══════════════════════════════════ */
    .contact-faq {
      padding: 80px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
    }

    .contact-faq-inner {
      max-width: 800px;
      margin: 0 auto;
    }

    .contact-faq-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .contact-faq-header h2 {
      font-family: var(--ff-head);
      font-size: clamp(1.8rem, 3.5vw, 2.5rem);
      font-weight: 400;
      color: var(--ink);
    }

    .contact-faq-header h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .contact-faq .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .contact-faq .faq-item {
      border: 1px solid var(--g200);
      border-bottom: none;
      overflow: hidden;
    }

    .contact-faq .faq-item:last-child {
      border-bottom: 1px solid var(--g200);
    }

    .contact-faq .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem 1.3rem;
      background: var(--ivory);
      border: none;
      cursor: pointer;
      transition: background 0.25s;
    }

    .contact-faq .faq-question:hover {
      background: var(--g50);
    }

    .contact-faq .faq-question span:first-child {
      font-family: var(--ff-head);
      font-size: .95rem;
      font-weight: 500;
      color: var(--ink2);
      text-align: left;
    }

    .contact-faq .faq-toggle {
      font-size: 1.1rem;
      color: var(--g400);
      transition: transform 0.25s;
      flex-shrink: 0;
    }

    .contact-faq .faq-item.open .faq-toggle {
      transform: rotate(45deg);
    }

    .contact-faq .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      background: var(--ivory);
    }

    .contact-faq .faq-item.open .faq-answer {
      max-height: 1000px;
    }

    .contact-faq .faq-answer p {
      padding: 0 1.3rem 1.1rem;
      font-size: .85rem;
      color: var(--ink3);
      line-height: 1.7;
      font-weight: 300;
    }


    /* ═══════════════════════════════════
   EVENTS PAGE — HERO
═══════════════════════════════════ */
    .events-hero {
      padding: 140px 5% 80px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    .events-hero::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .10) 0%, transparent 60%);
      pointer-events: none;
    }

    .events-hero::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(134, 82, 95, .08) 0%, transparent 60%);
      pointer-events: none;
    }

    .events-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .events-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1.4rem;
    }

    .events-hero-title em {
      font-style: italic;
      color: var(--g300);
    }

    .events-hero-sub {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
    }

    /* ═══════════════════════════════════
   EVENTS PAGE — UPCOMING
═══════════════════════════════════ */
    .events-upcoming {
      padding: 90px 5%;
      background: var(--ivory);
    }

    .events-upcoming-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .events-section-header {
      margin-bottom: 3rem;
    }

    .events-section-header h2 {
      margin-bottom: .5rem;
    }

    .events-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .event-card {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 2rem;
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2rem;
      transition: transform .25s, box-shadow .25s;
      position: relative;
    }

    .event-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .event-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--g400), var(--r400));
      opacity: 0;
      transition: opacity .25s;
    }

    .event-card:hover::before {
      opacity: 1;
    }

    .event-card-date {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: var(--g50);
      border: 1px solid var(--g200);
      padding: 1rem;
      align-self: start;
    }

    .event-day {
      font-family: var(--ff-head);
      font-size: 2.5rem;
      font-weight: 500;
      color: var(--g400);
      line-height: 1;
    }

    .event-month {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink4);
      margin-top: .3rem;
    }

    .event-card-body {
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }

    .event-type {
      display: inline-block;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--g500);
      background: var(--g50);
      border: 1px solid var(--g200);
      padding: .25rem .7rem;
      align-self: flex-start;
    }

    .event-type--kids {
      color: var(--r400);
      background: var(--r50);
      border-color: var(--r100);
    }

    .event-type--family {
      color: var(--g600);
      background: var(--g100);
      border-color: var(--g200);
    }

    .event-card-body h3 {
      font-family: var(--ff-head);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.25;
    }

    .event-card-body h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .event-card-body>p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: .76rem;
      color: var(--ink4);
      margin: .3rem 0;
    }

    .event-card-body .btn {
      align-self: flex-start;
      margin-top: .5rem;
    }

    /* ═══════════════════════════════════
   EVENTS PAGE — PAST
═══════════════════════════════════ */
    .events-past {
      padding: 90px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
    }

    .events-past-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .past-events-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.2rem;
    }

    .past-event {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 1.5rem 1.8rem;
      transition: box-shadow .2s;
    }

    .past-event:hover {
      box-shadow: var(--shadow-sm);
    }

    .past-event-date {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: .5rem;
    }

    .past-event h4 {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .3rem;
      line-height: 1.3;
    }

    .past-event p {
      font-size: .82rem;
      color: var(--ink4);
      font-weight: 300;
    }

    /* ═══════════════════════════════════
   EVENTS PAGE — CTA
═══════════════════════════════════ */
    .events-cta {
      padding: 100px 5%;
      text-align: center;
      background: var(--ivory);
      position: relative;
      overflow: hidden;
    }

    .events-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .25);
      pointer-events: none;
    }

    .events-cta-inner {
      position: relative;
      z-index: 1;
    }

    .events-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .events-cta h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .events-cta p {
      font-size: 1rem;
      color: var(--ink3);
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }

    .events-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   CHAT PAGE — HERO
═══════════════════════════════════ */
    .chat-hero {
      padding: 140px 5% 80px;
      background: var(--g50);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--g200);
    }

    .chat-hero::before {
      content: '';
      position: absolute;
      top: -150px;
      right: -150px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(134, 82, 95, .10) 0%, transparent 60%);
      pointer-events: none;
    }

    .chat-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .chat-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.4rem;
    }

    .chat-hero-title em {
      font-style: italic;
      color: var(--g400);
    }

    .chat-hero-sub {
      font-size: 1.05rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
    }

    /* ═══════════════════════════════════
   CHAT PAGE — CONTENT
═══════════════════════════════════ */
    .chat-section {
      padding: 90px 5%;
      background: var(--ivory);
    }

    .chat-section-inner {
      max-width: 900px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: start;
    }

    /* Chat bubble intro */
    .chat-bubble-intro {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .chat-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--g400);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-head);
      font-size: 1.2rem;
      font-weight: 500;
      flex-shrink: 0;
    }

    .chat-bubble {
      background: var(--g50);
      border: 1px solid var(--g200);
      padding: 1.2rem 1.4rem;
      position: relative;
      flex: 1;
    }

    .chat-bubble::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 14px;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 8px solid var(--g200);
    }

    .chat-bubble p {
      font-size: .88rem;
      color: var(--ink3);
      line-height: 1.7;
      font-weight: 300;
    }

    /* Chat form */
    .chat-form {
      background: var(--g50);
      border: 1px solid var(--g200);
      padding: 2rem;
    }

    .chat-form-header h3 {
      font-family: var(--ff-head);
      font-size: 1.3rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1.5rem;
    }

    .chat-form-header h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .chat-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .chat-form-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: 1rem;
    }

    .chat-form-group label {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink4);
    }

    .chat-form-group input,
    .chat-form-group textarea {
      background: #fff;
      border: 1.5px solid var(--g200);
      padding: .8rem 1rem;
      font-family: var(--ff-body);
      font-size: .87rem;
      color: var(--ink);
      outline: none;
      transition: border-color .2s;
      width: 100%;
    }

    .chat-form-group input:focus,
    .chat-form-group textarea:focus {
      border-color: var(--g400);
    }

    .chat-form-group input::placeholder,
    .chat-form-group textarea::placeholder {
      color: var(--ink4);
    }

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

    .chat-send-btn {
      width: 100%;
      background: var(--r400);
      color: #fff;
      border: none;
      padding: 1rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s;
    }

    .chat-send-btn:hover {
      background: var(--r500);
    }

    /* FAQ */
    .chat-faq-header {
      margin-bottom: 2rem;
    }

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

    .faq-item {
      border: 1px solid var(--g200);
      border-bottom: none;
      overflow: hidden;
    }

    .faq-item:last-child {
      border-bottom: 1px solid var(--g200);
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.2rem 1.4rem;
      background: var(--ivory);
      border: none;
      cursor: pointer;
      font-family: var(--ff-body);
      font-size: .88rem;
      font-weight: 400;
      color: var(--ink2);
      text-align: left;
      transition: background .2s;
    }

    .faq-question:hover {
      background: var(--g50);
    }

    .faq-toggle {
      font-family: var(--ff-head);
      font-size: 1.4rem;
      color: var(--g400);
      flex-shrink: 0;
      transition: transform .3s;
    }

    .faq-item.open .faq-toggle {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .35s ease;
      background: var(--g50);
    }

    .faq-item.open .faq-answer {
      max-height: 300px;
      padding: 1rem 1.4rem 1.4rem;
    }

    .faq-answer p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    .faq-answer a {
      color: var(--g400);
      font-weight: 500;
      border-bottom: 1px solid var(--g300);
    }

    .faq-answer a:hover {
      color: var(--g500);
    }

    /* Chat CTA */
    .chat-cta {
      padding: 100px 5%;
      text-align: center;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    .chat-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .12);
      pointer-events: none;
    }

    .chat-cta-inner {
      position: relative;
      z-index: 1;
    }

    .chat-cta .eyebrow {
      color: var(--g300);
    }

    .chat-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: #fff;
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .chat-cta h2 em {
      font-style: italic;
      color: var(--g300);
    }

    .chat-cta p {
      font-size: 1rem;
      color: rgba(255, 255, 255, .5);
      font-weight: 300;
      font-family: var(--ff-head);
      font-style: italic;
      max-width: 480px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }

    .chat-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .chat-cta .btn-outline {
      color: rgba(255, 255, 255, .7);
      border-color: rgba(255, 255, 255, .2);
    }

    .chat-cta .btn-outline:hover {
      border-color: var(--g300);
      color: var(--g300);
      background: transparent;
    }

    /* ═══════════════════════════════════
    RESPONSIVE — ALL NEW PAGES
    ═══════════════════════════════════ */
    @media (max-width: 900px) {
      .nav-hamburger {
        display: flex;
      }

      /* Mobile menu - full screen height with slide animation */
      .nav-links#navLinks {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        height: 100vh;
        background: var(--ivory);
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap: 0;
        border-bottom: 1px solid var(--g200);
        z-index: 998;
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        pointer-events: none;
        overflow-y: auto;
      }

      .nav-links#navLinks.open {
        transform: translateY(20px);
        opacity: 1;
        pointer-events: all;
      }

      .nav-links#navLinks li {
        border-bottom: 1px solid var(--g100);
      }

      .nav-links#navLinks a {
        display: block;
        padding: 1.2rem 0;
        text-align: center;
        color: var(--g400);
        font-weight: 500;
      }

      .nav-links#navLinks .nav-cta {
        display: block;
        text-align: center;
        margin-top: 0.5rem;
        background: var(--r400);
        color: #fff;
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
      }

      /* Grids to single column */
      .mc-courses-grid,
      .mc-modules-grid {
        grid-template-columns: 1fr;
      }

      .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
      }

      .contact-hero-inner {
        padding-bottom: 30px;
      }

      .contact-hero-sub {
        margin: 0 auto;
      }

      .contact-hero-portrait {
        order: -1;
      }

      .contact-hero-portrait .contact-portrait-frame {
        max-width: 260px;
        margin: 0 auto;
        border-radius: 8px;
        border-bottom: 1px solid var(--g200);
      }

      .contact-hero-portrait .contact-portrait-img {
        border-radius: 8px;
      }

      .event-card {
        grid-template-columns: 80px 1fr;
        gap: 1.2rem;
      }

      .past-events-grid {
        grid-template-columns: 1fr;
      }

      .chat-section-inner {
        grid-template-columns: 1fr;
      }

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

      .hero-banner {
        padding-top: 100px;
      }
    }

    @media (max-width: 600px) {

      .mc-hero,
      .events-hero,
      .chat-hero {
        padding: 120px 5% 60px;
      }

      .contact-hero {
        padding: 120px 5% 0;
      }

      .contact-hero-portrait .contact-portrait-frame {
        max-width: 220px;
      }

      .event-card {
        grid-template-columns: 1fr;
      }

      .event-card-date {
        flex-direction: row;
        gap: .5rem;
        justify-content: flex-start;
        padding: .7rem 1rem;
      }

      .event-day {
        font-size: 1.8rem;
      }
    }

    /* ═══════════════════════════════════
    BACK TO TOP BUTTON
    ═══════════════════════════════════ */
    .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: var(--g400);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      box-shadow: 0 4px 20px rgba(174, 133, 47, .35);
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.3s ease;
    }

    .back-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .back-to-top:hover {
      background: var(--g500);
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(174, 133, 47, .45);
    }

    @media (max-width: 600px) {
      .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
      }

      .hero-btns {
        flex-direction: column;
        gap: 1rem;
      }

      .hero-btns .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      .form-group input,
      .form-group textarea,
      .form-group select {
        padding: 0.9rem 1rem;
      }

      .form-group {
        margin-bottom: 1.2rem;
      }
    }

    /* ═══════════════════════════════════
    MOBILE OVERFLOW FIX - Prevent horizontal scroll
    ═══════════════════════════════════ */
    @media (max-width: 600px) {

      /* Hide decorative pseudo-elements that overflow */
      #hero::before,
      #hero::after,
      #why-design::before,
      #masterpiece::before,
      #masterpiece::after,
      .hero-img-frame::before,
      .about-img-col::before,
      .about-hero::before,
      .about-hero::after,
      .about-intro-img::before,
      .story-inner::before,
      .about-cta::before,
      .svc-hero::before,
      .svc-page-cta::before,
      .mc-hero::before,
      .mc-course-card::before,
      .mc-cta::before,
      .contact-hero::before,
      .events-hero::before,
      .event-card::before,
      .events-cta::before,
      .chat-hero::before,
      .chat-cta::before,
      .disc-hero::before {
        display: none !important;
      }

      /* Fix elements with negative positioning */
      .hero-nametag {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 1rem;
        box-shadow: none;
        border-left: none;
        border-top: 3px solid var(--g400);
        padding: 1.2rem;
        text-align: center;
      }

      .about-quote-card {
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
        position: relative;
        bottom: auto;
        margin-top: 1rem;
        max-width: 90%;
      }

      .about-img-col::before {
        display: none !important;
      }

      /* Ensure all sections stay within viewport */
      body {
        overflow-x: hidden;
      }
      section,
      main {
        max-width: 100vw;
        overflow-x: hidden;
      }

      /* COPYRIGHT TEXT */
      .copyrightText {
        width: 100%;
        color: #ffffff;
        padding: 10px 10px 10px;
        text-align: center;
        background: #af8630;
        word-spacing: 5px;
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
      }

      .copyrightText i {
        -webkit-text-stroke: 2px #ffffff;
        color: transparent;
        cursor: pointer;
      }

      .copyrightText i:hover {
        color: #ffffff;
        transition: 0.1s ease;
      }

      .copyrightText span {
        color: #ffffff;
      }
    }

    /* ═══════════════════════════════════
   BACK TO TOP BUTTON
═══════════════════════════════════ */
    .back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 44px;
      height: 44px;
      background: var(--g400);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 1rem;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity .3s, visibility .3s, transform .3s, background .2s;
      z-index: 900;
      box-shadow: 0 4px 16px rgba(174, 133, 47, .3);
    }

    .back-to-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .back-to-top:hover {
      background: var(--g500);
      transform: translateY(-3px);
    }

    /* ═══════════════════════════════════
   DESIGN MASTERCLASS PAGE
═══════════════════════════════════ */
    .mc-hero {
      padding: 140px 5% 80px;
      background: var(--g50);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--g200);
    }

    .mc-hero::before {
      content: '';
      position: absolute;
      top: -150px;
      right: -150px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .12) 0%, transparent 60%);
      pointer-events: none;
    }

    .mc-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .mc-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.4rem;
    }

    .mc-hero-title em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-hero-sub {
      font-size: 1.05rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
    }

    /* Course Overview */
    .mc-overview {
      padding: 80px 5%;
      background: var(--ivory);
    }

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

    .mc-overview-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 3.5rem;
    }

    .mc-overview-header h2 {
      margin-bottom: .8rem;
    }

    .mc-overview-header .section-sub {
      margin: 0 auto;
      text-align: center;
    }

    .mc-courses-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.8rem;
    }

    .mc-course-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2.5rem 2rem;
      position: relative;
      overflow: hidden;
      transition: transform .3s, box-shadow .3s;
      display: flex;
      flex-direction: column;
    }

    .mc-course-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--g400), var(--r400));
      opacity: 0;
      transition: opacity .3s;
    }

    .mc-course-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .mc-course-card:hover::before {
      opacity: 1;
    }


    .mc-course-badge {
      display: inline-block;
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--r400);
      margin-bottom: 1rem;
    }

    .mc-course-icon {
      width: 52px;
      height: 52px;
      background: var(--g50);
      border: 1px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.2rem;
      border-radius: 4px;
    }

    .mc-course-icon i {
      color: var(--g400);
    }

    .mc-course-card h3 {
      font-family: var(--ff-head);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .6rem;
      line-height: 1.25;
    }

    .mc-course-card h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-course-card>p {
      font-size: .88rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: 1.2rem;
    }

    .mc-course-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-bottom: 1.8rem;
      flex: 1;
    }

    .mc-course-features li {
      font-size: .82rem;
      color: var(--ink3);
      font-weight: 300;
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .mc-course-features li::before {
      content: '';
      width: 14px;
      height: 1.5px;
      background: var(--g400);
      flex-shrink: 0;
    }

    /* Curriculum / Modules */
    .mc-curriculum {
      padding: 80px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
    }

    .mc-curriculum-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .mc-curriculum-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 3.5rem;
    }

    .mc-curriculum-header h2 {
      margin-bottom: .8rem;
    }

    .mc-modules-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .mc-module {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2.2rem 2rem;
      transition: transform .25s, box-shadow .25s;
    }

    .mc-module:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .mc-module-num {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: .8rem;
    }

    .mc-module h3 {
      font-family: var(--ff-head);
      font-size: 1.3rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .6rem;
      line-height: 1.3;
    }

    .mc-module h3 em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-module p {
      font-size: .86rem;
      color: var(--ink3);
      line-height: 1.75;
      font-weight: 300;
    }

    /* MC Testimonial */
    .mc-testimonial {
      padding: 4rem 5%;
      background: var(--r400);
      text-align: center;
    }

    .mc-testimonial blockquote {
      font-family: var(--ff-head);
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .92);
      line-height: 1.55;
      max-width: 750px;
      margin: 0 auto 1rem;
    }

    .mc-testimonial blockquote em {
      font-style: normal;
      font-weight: 500;
      color: #fff;
    }

    .mc-testimonial cite {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      font-style: normal;
    }

    /* MC CTA */
    .mc-cta {
      padding: 80px 5%;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: var(--ivory);
    }

    .mc-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .25);
      pointer-events: none;
    }

    .mc-cta-inner {
      position: relative;
      z-index: 1;
    }

    .mc-cta .eyebrow {
      display: block;
      margin-bottom: 1rem;
    }

    .mc-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .mc-cta h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .mc-cta p {
      font-size: 1rem;
      color: var(--ink3);
      font-weight: 300;
      max-width: 480px;
      margin: 0 auto 2rem;
      font-family: var(--ff-head);
      font-style: italic;
    }

    .mc-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   EVENTS PAGE
═══════════════════════════════════ */
    .events-hero {
      padding: 140px 5% 80px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .events-hero::before {
      content: '';
      position: absolute;
      top: -150px;
      right: -150px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(174, 133, 47, .1) 0%, transparent 60%);
      pointer-events: none;
    }

    .events-hero-inner {
      max-width: 750px;
      position: relative;
      z-index: 1;
    }

    .events-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1.4rem;
    }

    .events-hero-title em {
      font-style: italic;
      color: var(--g300);
    }

    .events-hero-sub {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
    }

    /* Upcoming Events */
    .events-upcoming {
      padding: 80px 5%;
      background: var(--ivory);
    }

    .events-upcoming-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .events-section-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 3rem;
    }

    .events-section-header h2 {
      margin-bottom: .8rem;
    }

    .events-section-header .section-sub {
      margin: 0 auto;
      text-align: center;
    }

    .events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 1.5rem;
    }

    .event-card {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2.2rem 2rem;
      position: relative;
      overflow: hidden;
      transition: transform .25s, box-shadow .25s;
    }

    .event-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--g400), var(--r400));
      opacity: 0;
      transition: opacity .3s;
    }

    .event-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .event-card:hover::before {
      opacity: 1;
    }

    /* Past Events */
    .events-past {
      padding: 80px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
      border-bottom: 1px solid var(--g200);
    }

    .events-past-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .past-events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.5rem;
    }

    .past-event {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 1.8rem 1.6rem;
      transition: transform .25s, box-shadow .25s;
    }

    .past-event:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .past-event-date {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--g400);
      display: block;
      margin-bottom: .7rem;
    }

    .past-event h4 {
      font-family: var(--ff-head);
      font-size: 1.15rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .4rem;
      line-height: 1.3;
    }

    .past-event p {
      font-size: .82rem;
      color: var(--ink4);
      font-weight: 300;
    }

    /* Events CTA */
    .events-cta {
      padding: 80px 5%;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: var(--ivory);
    }

    .events-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 1px solid rgba(222, 187, 128, .25);
      pointer-events: none;
    }

    .events-cta-inner {
      position: relative;
      z-index: 1;
    }

    .events-cta .eyebrow {
      display: block;
      margin-bottom: 1rem;
    }

    .events-cta h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 300;
      color: var(--ink);
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .events-cta h2 em {
      font-style: italic;
      color: var(--g400);
    }

    .events-cta p {
      font-size: 1rem;
      color: var(--ink3);
      font-weight: 300;
      max-width: 480px;
      margin: 0 auto 2rem;
      font-family: var(--ff-head);
      font-style: italic;
    }

    .events-cta-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ═══════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════ */
    .contact-hero {
      padding: 140px 5% 0;
      background: var(--g50);
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--g200);
    }

    .contact-hero::before {
      content: '';
      position: absolute;
      top: -150px;
      right: -150px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(134, 82, 95, .1) 0%, transparent 60%);
      pointer-events: none;
    }

    .contact-hero-grid {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      gap: 3rem;
      align-items: end;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .contact-hero-inner {
      align-self: center;
      position: relative;
      z-index: 1;
    }

    .contact-hero-title {
      font-family: var(--ff-head);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.4rem;
    }

    .contact-hero-title em {
      font-style: italic;
      color: var(--g400);
    }

    .contact-hero-sub {
      font-size: 1.05rem;
      color: var(--ink3);
      line-height: 1.8;
      max-width: 560px;
      font-weight: 300;
    }

    /* Hero Portrait Column */
    .contact-hero-portrait {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    .contact-hero-portrait .contact-portrait-frame {
      max-width: 340px;
      width: 100%;
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      border-bottom: none;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06), 0 -2px 8px rgba(0, 0, 0, 0.03);
    }

    .contact-hero-portrait .contact-portrait-img {
      border-radius: 8px 8px 0 0;
      width: 100%;
      height: auto;
      display: block;
    }

    /* Contact Page Grid */
    .contact-page-section {
      padding: 80px 5%;
      background: var(--ivory);
    }

    .contact-page-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
      align-items: start;
    }

    .contact-page-info .section-title {
      margin-bottom: 1.2rem;
    }

    .contact-page-desc {
      font-size: .95rem;
      color: var(--ink3);
      line-height: 1.8;
      font-weight: 300;
      margin-bottom: 2rem;
    }

    .contact-page-details {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: 2.5rem;
    }

    .contact-page-detail {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .contact-page-detail-icon {
      width: 42px;
      height: 42px;
      background: var(--g50);
      border: 1px solid var(--g200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      border-radius: 4px;
    }

    .contact-page-detail-icon i {
      color: var(--g400);
    }

    .contact-page-detail strong {
      font-size: .78rem;
      font-weight: 600;
      color: var(--ink2);
      display: block;
      margin-bottom: .1rem;
    }

    .contact-page-detail span {
      font-size: .85rem;
      color: var(--ink3);
      font-weight: 300;
    }

    .contact-page-social {
      margin-top: 2rem;
    }

    .contact-page-social h4 {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink4);
      margin-bottom: 1rem;
    }

    .contact-page-social-row {
      display: flex;
      gap: .6rem;
      flex-wrap: wrap;
    }

    .contact-social-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .6rem 1.2rem;
      background: var(--g50);
      border: 1px solid var(--g200);
      font-size: .78rem;
      font-weight: 500;
      color: var(--ink3);
      border-radius: 4px;
      transition: all .2s;
    }

    .contact-social-btn:hover {
      background: var(--g100);
      color: var(--g500);
      border-color: var(--g300);
    }

    .contact-social-btn i {
      color: var(--g400);
    }

    /* Coach Portrait in Info Column */
    .contact-portrait-wrap {
      margin-top: 3rem;
    }

    .contact-portrait-frame {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      border: 1px solid var(--g200);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .contact-portrait-frame::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);
      pointer-events: none;
    }

    .contact-portrait-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .contact-portrait-frame:hover .contact-portrait-img {
      transform: scale(1.03);
    }

    .contact-portrait-caption {
      margin-top: 1rem;
      font-family: var(--ff-head);
      font-size: 0.95rem;
      color: var(--ink4);
      line-height: 1.6;
      text-align: center;
      font-weight: 300;
    }

    .contact-portrait-caption em {
      font-style: italic;
      color: var(--g400);
    }

    /* Contact Form */
    .contact-page-form-wrap {
      background: var(--ivory);
      border: 1px solid var(--g200);
      padding: 2.5rem;
      box-shadow: var(--shadow-sm);
    }

    .contact-page-form h3 {
      font-family: var(--ff-head);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 1.5rem;
    }

    .cpf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .cpf-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: 1rem;
    }

    .cpf-group label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink4);
    }

    .cpf-group input,
    .cpf-group textarea,
    .cpf-group select {
      background: var(--warm);
      border: 1px solid var(--g200);
      padding: .85rem 1rem;
      font-family: var(--ff-body);
      font-size: .87rem;
      color: var(--ink);
      outline: none;
      transition: border-color .2s;
      width: 100%;
      border-radius: 3px;
      -webkit-appearance: none;
      appearance: none;
    }

    .cpf-group input::placeholder,
    .cpf-group textarea::placeholder {
      color: var(--ink4);
    }

    .cpf-group input:focus,
    .cpf-group textarea:focus,
    .cpf-group select:focus {
      border-color: var(--g400);
    }

    .cpf-group textarea {
      resize: vertical;
      min-height: 120px;
    }

    .cpf-group select option {
      background: var(--ivory);
    }

    .cpf-submit {
      width: 100%;
      background: var(--r400);
      color: #fff;
      border: none;
      padding: 1rem;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s, transform .2s;
      border-radius: 4px;
    }

    .cpf-submit:hover {
      background: var(--r500);
      transform: translateY(-2px);
    }

    .cpf-privacy {
      font-size: .72rem;
      color: var(--ink4);
      text-align: center;
      margin-top: .8rem;
    }

    .cpf-privacy i {
      color: var(--g400);
      margin-right: .3rem;
    }

    /* Contact Quote Strip */
    .contact-quote-strip {
      background: var(--r400);
      padding: 4rem 5%;
      text-align: center;
    }

    .contact-quote-strip blockquote {
      font-family: var(--ff-head);
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(255, 255, 255, .92);
      line-height: 1.55;
      max-width: 700px;
      margin: 0 auto 1rem;
    }

    .contact-quote-strip blockquote em {
      font-style: normal;
      font-weight: 500;
      color: #fff;
    }

    .contact-quote-strip cite {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      font-style: normal;
    }

    /* ═══════════════════════════════════
   FAQ ACCORDION (shared)
═══════════════════════════════════ */
    .contact-faq {
      padding: 80px 5%;
      background: var(--g50);
      border-top: 1px solid var(--g200);
    }

    .contact-faq-inner {
      max-width: 800px;
      margin: 0 auto;
    }

    .contact-faq-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .contact-faq-header h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 400;
      color: var(--ink);
      margin-bottom: .5rem;
    }

    .contact-faq-header h2 em {
      font-style: italic;
      color: var(--g400);
    }

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

    .faq-item {
      border-bottom: 1px solid var(--g200);
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.4rem 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--ff-body);
      font-size: .95rem;
      font-weight: 500;
      color: var(--ink2);
      text-align: left;
      transition: color .2s;
    }

    .faq-question:hover {
      color: var(--g400);
    }

    .faq-toggle {
      font-size: 1.3rem;
      font-weight: 300;
      color: var(--g400);
      transition: transform .3s;
      flex-shrink: 0;
    }

    .faq-item.open .faq-toggle {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, padding .3s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 1000px;
      padding-bottom: 1.4rem;
    }

    .faq-answer p {
      font-size: .9rem;
      color: var(--ink3);
      line-height: 1.8;
      font-weight: 300;
    }

    /* ═══════════════════════════════════
   RESPONSIVE — MC, EVENTS, CONTACT
═══════════════════════════════════ */
    @media (max-width: 900px) {

      .mc-courses-grid,
      .mc-modules-grid {
        grid-template-columns: 1fr;
      }

      .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
      }

      .contact-hero-inner {
        padding-bottom: 30px;
      }

      .contact-hero-sub {
        margin: 0 auto;
      }

      .contact-hero-portrait {
        order: -1;
      }

      .contact-hero-portrait .contact-portrait-frame {
        max-width: 260px;
        margin: 0 auto;
        border-radius: 8px;
        border-bottom: 1px solid var(--g200);
      }

      .contact-hero-portrait .contact-portrait-img {
        border-radius: 8px;
      }

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

    @media (max-width: 600px) {

      .mc-hero,
      .events-hero {
        padding: 120px 5% 60px;
      }

      .contact-hero {
        padding: 120px 5% 0;
      }

      .contact-hero-portrait .contact-portrait-frame {
        max-width: 220px;
      }

      .mc-overview,
      .mc-curriculum,
      .mc-cta,
      .events-upcoming,
      .events-past,
      .events-cta,
      .contact-page-section,
      .contact-faq {
        padding: 60px 5%;
      }

      .past-events-grid {
        grid-template-columns: 1fr;
      }

      .contact-page-form-wrap {
        padding: 1.5rem;
      }
    }

    /* ═══════════════════════════════════
   PREMIUM FAQ SYSTEM (Global Override)
   ═══════════════════════════════════ */
    .faq-item {
      border-bottom: 1px solid var(--g100) !important;
      border-left: none !important;
      border-right: none !important;
      border-top: none !important;
      transition: background 0.3s ease;
      overflow: visible !important;
    }

    .faq-item:first-child {
      border-top: 1px solid var(--g100) !important;
    }


    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 32px 24px;
      background: none;
      border: none !important;
      cursor: pointer;
      font-family: var(--ff-head) !important;
      font-size: 1.35rem !important;
      font-weight: 400 !important;
      color: var(--ink) !important;
      text-align: left;
      transition: all 0.3s ease;
    }

    .faq-question:hover {
      color: var(--g400) !important;
    }

    .faq-toggle {
      font-family: var(--ff-body) !important;
      font-size: 1.5rem !important;
      font-weight: 300 !important;
      color: var(--g300) !important;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
      flex-shrink: 0;
    }

    .faq-item.open .faq-question {
      color: var(--g400) !important;
    }

    .faq-item.open .faq-toggle {
      transform: rotate(45deg) !important;
      color: var(--g400) !important;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease;
      opacity: 0;
    }

    .faq-item.open .faq-answer {
      max-height: 1000px;
      padding: 0 24px 40px;
      opacity: 1;
    }

    .faq-answer p {
      font-size: 1rem !important;
      color: var(--ink4) !important;
      line-height: 1.8 !important;
      font-weight: 300 !important;
      max-width: 85%;
    }

    .faq-answer ul {
      margin-top: 20px;
      padding-left: 20px;
    }

    .faq-answer li {
      font-size: 0.95rem;
      color: var(--ink4);
      margin-bottom: 12px;
      font-weight: 300;
    }

    .faq-answer strong {
      color: var(--ink2);
      font-weight: 500;
    }

    /* ═══════════════════════════════════
       EVENTS GRID & CARDS
    ═══════════════════════════════════ */
    .events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .event-card {
      background: var(--white);
      border: 1px solid var(--g200);
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .event-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .event-image {
      position: relative;
      aspect-ratio: 16/9;
      background: var(--g50);
    }

    .event-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .event-tag {
      position: absolute;
      top: 15px;
      right: 15px;
      background: var(--g400);
      color: var(--white);
      padding: 6px 12px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: 2px;
    }

    .event-content {
      padding: 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .event-date-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1rem;
      font-size: 0.75rem;
      color: var(--ink4);
      font-family: var(--ff-body);
    }

    .event-date-pill {
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .event-title {
      font-family: var(--ff-head);
      font-size: 1.25rem;
      margin-bottom: 0.8rem;
      color: var(--ink);
      line-height: 1.3;
    }

    .event-location {
      font-size: 0.82rem;
      color: var(--ink4);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .event-link {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--g400);
      text-decoration: none;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      transition: gap 0.2s;
    }

    .event-link:hover {
      gap: 12px;
    }

    .event-past-card {
      opacity: 0.8;
      filter: grayscale(0.2);
    }

    .event-past-card .event-tag {
      background: var(--ink4);
    }

    /* ═══════════════════════════════════
       GALLERY SKELETON
    ═══════════════════════════════════ */
    .gallery-skeleton {
      aspect-ratio: 1;
      background: var(--g100);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
    }

    .gallery-skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    /* ═══════════════════════════════════
       ACCESSIBILITY & FOCUS STYLES
       ═══════════════════════════════════ */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 5%;
      background: var(--g400);
      color: #fff !important;
      padding: 12px 24px;
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
      text-decoration: none;
      border-radius: 0 0 6px 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      z-index: 10000;
      transition: top 0.25s ease;
    }

    .skip-link:focus-visible {
      top: 0;
      outline: none;
    }

    /* Premium Focus Outline styles */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2.5px solid var(--g400) !important;
      outline-offset: 4px !important;
    }

    /* Dynamic hidden anchor for keyboard jumps */
    #main-content:focus {
      outline: none;
    }