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

        :root {
          --cream: #f5f0e8;
          --cream-dark: #ede5d5;
          --warm-brown: #6b4f3a;
          --dark-brown: #3a2a1e;
          --forest-green: #3d5a3e;
          --forest-green-light: #4e7050;
          --text-body: #5a4535;
          --text-light: #8a7060;
          --section-divider: #c8b89a;
          --font-serif: 'Cormorant Garamond', Georgia, serif;
          --font-body: 'EB Garamond', Georgia, serif;
        }

        html { scroll-behavior: smooth; }
        body {
          font-family: var(--font-body);
          background: var(--cream);
          color: var(--text-body);
          overflow-x: hidden;
        }

        /* ====== PAGE ====== */
        .page { margin-top: 61px; }

        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(24px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* ====== HERO: PHOTO + NAME ====== */
        .profile-hero {
          padding: 52px 24px 0;
          max-width: 860px; margin: 0 auto;
          display: grid;
          grid-template-columns: 320px 1fr;
          gap: 64px;
          align-items: end;
          animation: fadeUp 0.9s ease both;
        }

        /* Photo */
        .profile-photo-wrap {
          position: relative;
        }
        .profile-photo {
          width: 100%;
          aspect-ratio: 3/4;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 8px 12px 40px rgba(58,42,30,0.15);
        }
        .profile-photo img {
          width: 100%; height: 100%;
          object-fit: cover; object-position: center top;
          display: block;
          filter: sepia(0.08) brightness(0.97);
          transition: transform 0.6s ease;
        }
        .profile-photo:hover img { transform: scale(1.03); }

        /* Floating credential pill */
        .profile-credential {
          position: absolute;
          bottom: -16px; right: -16px;
          background: #fff;
          border-radius: 12px;
          padding: 14px 18px;
          box-shadow: 0 6px 24px rgba(58,42,30,0.12);
          display: flex; flex-direction: column; gap: 3px;
          min-width: 140px;
        }
        .credential-number {
          font-family: var(--font-serif);
          font-size: 1.9rem; font-weight: 300;
          color: var(--dark-brown); line-height: 1;
        }
        .credential-label {
          font-family: var(--font-body);
          font-size: 0.82rem; color: var(--text-light);
          letter-spacing: 0.04em; line-height: 1.35;
        }

        /* Name & intro */
        .profile-intro { padding-bottom: 8px; }

        .profile-eyebrow {
          font-family: var(--font-body);
          font-size: 0.8rem; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--text-light);
          margin-bottom: 14px;
          display: flex; align-items: center; gap: 12px;
        }
        .profile-eyebrow::before {
          content: ''; display: block;
          height: 1px; width: 32px; background: var(--section-divider);
        }

        .profile-name {
          font-family: var(--font-serif);
          font-size: clamp(2.8rem, 6vw, 4.4rem);
          font-weight: 300; color: var(--dark-brown);
          letter-spacing: 0.02em; line-height: 1.08;
          margin-bottom: 0.3em;
        }

        .profile-role {
          font-family: var(--font-serif); font-style: italic;
          font-size: clamp(1.05rem, 2vw, 1.3rem);
          color: var(--warm-brown); line-height: 1.55;
          margin-bottom: 28px;
        }

        .profile-tagline {
          font-family: var(--font-body);
          font-size: clamp(0.97rem, 1.5vw, 1.07rem);
          color: var(--text-body); line-height: 1.85;
          border-left: 2px solid var(--section-divider);
          padding-left: 18px;
          font-style: italic;
        }

        /* ====== DIVIDER ====== */
        .divider-diamond {
          display: flex; align-items: center; justify-content: center;
          margin: 56px auto; width: 100%; max-width: 400px; padding: 0 24px;
        }
        .divider-diamond .line { flex: 1; height: 1px; background: var(--section-divider); }
        .divider-diamond .diamond {
          width: 8px; height: 8px; background: var(--section-divider);
          transform: rotate(45deg); margin: 0 12px; flex-shrink: 0;
        }

        /* ====== MY STORY ====== */
        .story-wrap {
          max-width: 680px; margin: 0 auto; padding: 0 24px;
        }

        .story-heading {
          font-family: var(--font-serif);
          font-size: clamp(1.6rem, 3vw, 2.2rem);
          font-weight: 400; color: var(--dark-brown);
          letter-spacing: 0.03em; margin-bottom: 28px;
        }

        .story-body p {
          font-family: var(--font-body);
          font-size: clamp(0.97rem, 1.5vw, 1.08rem);
          color: var(--text-body); line-height: 1.9;
          margin-bottom: 1.3em;
        }
        .story-body p strong { font-weight: 500; color: var(--dark-brown); }
        .story-body p em { font-style: italic; }

        /* Pull quote */
        .pull-quote {
          margin: 40px 0;
          padding: 28px 32px;
          border-left: 3px solid var(--forest-green);
          background: rgba(61,90,62,0.04);
          border-radius: 0 10px 10px 0;
        }
        .pull-quote p {
          font-family: var(--font-serif); font-style: italic;
          font-size: clamp(1.1rem, 2vw, 1.35rem);
          color: var(--warm-brown); line-height: 1.65;
          margin: 0 !important;
        }

        /* ====== VALUES ====== */
        .values-wrap {
          background: var(--cream-dark);
          padding: 72px 24px;
          margin-top: 72px;
        }
        .values-inner { max-width: 860px; margin: 0 auto; }

        .section-heading {
          font-family: var(--font-serif);
          font-size: clamp(1.7rem, 3.5vw, 2.4rem);
          font-weight: 400; color: var(--dark-brown);
          letter-spacing: 0.04em; text-align: center;
          display: inline-flex; align-items: center; gap: 20px;
          width: 100%;
        }
        .section-heading::before,
        .section-heading::after {
          content: ''; flex: 1; display: block;
          height: 1px; background: var(--section-divider); min-width: 24px;
        }

        .values-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px; margin-top: 48px;
        }

        .value-card {
          background: #fff; border-radius: 14px;
          padding: 28px 24px 32px;
          box-shadow: 0 4px 20px rgba(58,42,30,0.06);
          transition: transform 0.3s, box-shadow 0.3s;
        }
        .value-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(58,42,30,0.11); }

        .value-icon { font-size: 1.7rem; margin-bottom: 14px; }
        .value-title {
          font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500;
          color: var(--dark-brown); margin-bottom: 8px;
        }
        .value-desc {
          font-family: var(--font-body); font-size: 0.95rem;
          color: var(--text-light); line-height: 1.75;
        }

        /* ====== FORMATION ====== */
        .formation-wrap {
          max-width: 680px; margin: 0 auto; padding: 72px 24px 0;
        }

        .formation-list {
          margin-top: 36px;
          display: flex; flex-direction: column; gap: 0;
          border-top: 1px solid var(--section-divider);
        }

        .formation-item {
          display: flex; align-items: flex-start; gap: 20px;
          padding: 22px 0;
          border-bottom: 1px solid var(--section-divider);
          transition: background 0.2s;
        }

        .formation-year {
          flex-shrink: 0; min-width: 52px;
          font-family: var(--font-serif); font-size: 0.9rem;
          color: var(--text-light); letter-spacing: 0.04em;
          padding-top: 3px;
        }

        .formation-dot {
          flex-shrink: 0; width: 8px; height: 8px;
          border-radius: 50%; background: var(--section-divider);
          margin-top: 7px; transition: background 0.2s;
        }
        .formation-item:hover .formation-dot { background: var(--forest-green); }

        .formation-text {}
        .formation-title {
          font-family: var(--font-body); font-size: 1rem;
          color: var(--dark-brown); line-height: 1.4; margin-bottom: 3px;
          font-weight: 500;
        }
        .formation-institution {
          font-family: var(--font-body); font-size: 0.9rem;
          color: var(--text-light); font-style: italic;
        }

        /* ====== PERSONAL NOTE ====== */
        .personal-wrap {
          max-width: 680px; margin: 72px auto 0; padding: 0 24px;
          text-align: center;
        }
        .personal-note {
          font-family: var(--font-serif); font-style: italic;
          font-size: clamp(1.1rem, 2.2vw, 1.45rem);
          color: var(--warm-brown); line-height: 1.75;
          font-weight: 300;
        }
        .personal-signature {
          display: inline-block;
          margin-top: 20px;
          font-family: var(--font-serif);
          font-size: 1.5rem; font-weight: 400;
          color: var(--dark-brown); letter-spacing: 0.04em;
        }

        /* ====== CTA ====== */
        .cta-wrap {
          text-align: center; padding: 72px 24px 80px;
          max-width: 560px; margin: 0 auto;
        }
        .cta-wrap h2 {
          font-family: var(--font-serif);
          font-size: clamp(1.5rem, 3vw, 2.2rem);
          font-weight: 400; color: var(--dark-brown);
          margin-bottom: 12px; letter-spacing: 0.02em;
        }
        .cta-wrap p {
          font-family: var(--font-serif); font-style: italic;
          font-size: 1.05rem; color: var(--text-light);
          line-height: 1.7; margin-bottom: 32px;
        }
        .cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

        .btn-primary {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 15px 32px;
          background: var(--forest-green); color: #fff;
          font-family: var(--font-body); font-size: 1.02rem;
          letter-spacing: 0.07em; border: none; border-radius: 100px;
          cursor: pointer; text-decoration: none;
          transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
          box-shadow: 0 4px 20px rgba(61,90,62,0.25);
        }
        .btn-primary:hover {
          background: var(--forest-green-light);
          transform: translateY(-2px); box-shadow: 0 8px 28px rgba(61,90,62,0.3);
        }
        .btn-secondary {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 14px 32px;
          background: transparent; color: var(--forest-green);
          font-family: var(--font-body); font-size: 1.02rem;
          letter-spacing: 0.07em;
          border: 1.5px solid var(--forest-green); border-radius: 100px;
          cursor: pointer; text-decoration: none;
          transition: background 0.3s, color 0.3s, transform 0.2s;
        }
        .btn-secondary:hover {
          background: var(--forest-green); color: #fff; transform: translateY(-2px);
        }

        /* ====== SCROLL REVEAL ====== */
        .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
        .reveal.visible { opacity: 1; transform: none; }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }

        /* ====== RESPONSIVE ====== */
        @media (max-width: 767px) {
          .nav-links { display: none; }
          .nav-hamburger { display: flex; }

          .profile-hero {
            grid-template-columns: 1fr; gap: 36px;
            padding: 36px 20px 0;
          }
          .profile-photo { aspect-ratio: 4/5; max-width: 280px; }
          .profile-photo-wrap { display: flex; justify-content: center; }
          .profile-credential { right: calc(50% - 200px); }
          .profile-intro { padding-bottom: 0; }

          .story-wrap, .formation-wrap { padding: 0 20px; }
          .personal-wrap { padding: 0 20px; }

          .values-grid { grid-template-columns: 1fr; }
          .cta-btns { flex-direction: column; align-items: stretch; }
          .btn-primary, .btn-secondary { justify-content: center; }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
          .profile-hero { grid-template-columns: 260px 1fr; gap: 40px; }
          .values-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (min-width: 1024px) {
          nav { padding: 18px 48px; }
        }