/* Raquel Resendes — styles */
:root{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%}
[hidden]{display:none!important}
:root {
    --ink: #2F455C;
    --ink-soft: #E7E9EC;
    --gold: #C9A227;
    --cream: #FAF7F2;
    --charcoal: #26313D;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--cream); color: var(--ink); }
  a { color: var(--ink); text-decoration: none; }
  a:hover { color: var(--gold); }
  .hero-text-col { max-width: 560px; width: 100%; }
  @media (max-width: 760px) {
    .hero-text-col { max-width: 100% !important; }
  }
  .rr-tab { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 8px; cursor: pointer; background: #FFFFFF; border: 1px solid rgba(47,69,92,0.14); }
  .rr-tab.rr-tab-active { background: var(--ink); border-color: var(--ink); }
  .rr-tab-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; line-height: 1; background: var(--cream); color: var(--ink); }
  .rr-tab.rr-tab-active .rr-tab-num { background: var(--gold); color: var(--charcoal); }
  .rr-tab-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .rr-tab.rr-tab-active .rr-tab-label { color: var(--cream); }
  .rr-panel { display: none; }
  .rr-panel.rr-panel-active { display: block; }
  .rr-ph {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Allura', cursive; color: rgba(250,247,242,0.55);
  }
  .rr-fees-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .rr-fees-price { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 36px; }
  @media (max-width: 640px) {
    .rr-fees-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .rr-fees-price { font-size: 26px; }
  }

  /* Nav: active section highlight + tighter mobile spacing */
  .rr-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; row-gap: 10px; }
  .rr-nav-link { font-size: 14px; font-weight: 500; letter-spacing: 0.4px; }
  .rr-nav-link.rr-nav-active { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
  /* Contact keeps its own inline colour (cream on the desktop button), which
     would otherwise win over .rr-nav-active. Force gold — text and its
     underline — whenever the Contact section is active, on every screen size. */
  .rr-nav a[href="#rr-contact"].rr-nav-active { color: var(--gold) !important; }
  @media (max-width: 760px) {
    .rr-header { padding-left: 24px !important; padding-right: 24px !important; padding-top: 14px !important; padding-bottom: 14px !important; justify-content: center !important; }
    .rr-nav { gap: 14px; row-gap: 8px; width: 100%; justify-content: center; }
    /* Logo/wordmark row and nav row both stay fixed in place (never
       disappear or collapse) and are centered, same as the rest of the
       header content. */
    .rr-header-logo { width: 100%; justify-content: center; }
    /* Contact: on mobile it should read as a plain nav link like the others
       (Fees, etc.) instead of a filled button. Desktop keeps the button. */
    .rr-nav a[href="#rr-contact"] {
      display: inline !important;
      padding: 0 !important;
      background: transparent !important;
      color: var(--ink) !important;
      font-weight: 500 !important;
      border-radius: 0 !important;
    }
    /* ...but once the Contact section itself is in view, highlight it gold
       and underlined, same as any other active nav link (e.g. Fees). */
    .rr-nav a[href="#rr-contact"].rr-nav-active {
      color: var(--gold) !important;
      font-weight: 700 !important;
      text-decoration: underline !important;
      text-underline-offset: 4px !important;
    }
  }

  /* Hero photo: fixed min-width was forcing horizontal overflow on narrow phones */
  .rr-hero-photo-wrap { min-width: 420px; }
  @media (max-width: 760px) {
    .rr-hero-photo-wrap { min-width: 0; }
    /* Small screens: no hero photo, plain charcoal (dark blue) background */
    .rr-hero-photo-wrap { display: none !important; }
  }

  /* My Approach: "who it's for" / "what you'll take away" cards */
  .rr-approach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  @media (max-width: 700px) {
    .rr-approach-grid { grid-template-columns: 1fr; }
    .rr-approach-card { text-align: center; }
    .rr-approach-list { max-width: 320px; margin: 0 auto; text-align: left; }
  }

  /* Trainings intro badges */
  .rr-badges-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  @media (max-width: 700px) {
    .rr-badges-row { justify-content: center; }
  }

  /* Mentoring: duration / format / languages */
  .rr-mentoring-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .rr-stat-card { padding: 24px; }
  .rr-stat-value { font-size: 22px; }
  @media (max-width: 560px) {
    .rr-mentoring-stats { gap: 8px; }
    .rr-stat-card { padding: 14px 6px; }
    .rr-stat-value { font-size: 15px; }
  }

  /* Testimonials */
  .rr-testimonials-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  @media (max-width: 780px) {
    .rr-testimonials-grid { grid-template-columns: 1fr; }
  }