:root {
   --bg-cream: #f3e8d3;
   --bg-cream-light: #f8f0dc;
   --text-dark: #2d2418;
   --text-medium: #5c4a30;
   --accent-green: #055650;
   --accent-gold: #c79b5c;
   --line: #c9b894;
}

* {
   box-sizing: border-box;
}

body {
   font-family: 'Poppins', sans-serif;
   background-color: var(--bg-cream);
   color: var(--text-dark);
   margin: 0;
   padding: 0;
   line-height: 1.6;
}

h1,
h2,
h3,
.serif {
   font-family: 'Playfair Display', serif;
   color: var(--text-dark);
}

/* ============ SECTION 1-A: HERO PROFILE ============ */
.hero-section {
   padding: 300px 0;
   position: relative;
   background-color: var(--bg-cream);
   background-image: url('section1-a-bg.png');
   background-size: cover;
   background-position: 100% 100%;
   background-repeat: no-repeat;
   overflow: hidden;
}

/* Tablet & mobile: hide bg image (portrait col handled by Bootstrap d-lg-none) */
@media (max-width: 991px) {
   .hero-section {
      background-image: none;
   }
}

.hero-name {
   font-family: 'Playfair Display', serif;
   font-size: 3rem;
   font-weight: 600;
   line-height: 1.15;
   color: var(--accent-green);
   margin-bottom: 14px;
}

.hero-name-suffix {
   font-style: italic;
   font-weight: 500;
}

.hero-tagline {
   font-family: 'Playfair Display', serif;
   font-size: 2rem;
   color: var(--accent-gold);
   font-style: italic;
   margin-bottom: 22px;
   line-height: 1.5;
}

.tagline-pipes {
   color: var(--text-medium);
   font-style: normal;
   font-size: 1.4rem;
}

.hero-paragraph {
   font-size: 0.95rem;
   color: var(--text-medium);
   line-height: 1.75;
   max-width: 460px;
   margin-bottom: 32px;
}

.hero-contacts {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

.contact-pill {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background-color: #fff;
   border-radius: 50px;
   padding: 10px 22px 10px 10px;
   text-decoration: none;
   box-shadow: 0 4px 14px rgba(60, 75, 50, 0.08);
   transition: all 0.3s ease;
}

.contact-pill:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(60, 75, 50, 0.15);
   text-decoration: none;
}

.contact-icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background-color: var(--accent-green);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 0.95rem;
   flex-shrink: 0;
}

.contact-body {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
}

.contact-label {
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 1.5px;
   color: var(--accent-gold);
}

.contact-value {
   font-size: 0.85rem;
   color: var(--text-dark);
   font-weight: 500;
}

.hero-portrait {
   width: 100%;
   max-width: 420px;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 6px;
}

/* ============ SECTION 2: MY JOURNEY ============ */
.journey-section {
   padding: 500px 0;
   position: relative;
   background-color: var(--bg-cream);
   background-image: url('section2-bg.png');
   background-size: cover;
   background-position: center right;
   background-repeat: no-repeat;
   overflow: hidden;
}

/* Tablet & mobile: hide bg image (portrait col handled by Bootstrap d-lg-none) */
@media (max-width: 991px) {
   .journey-section {
      background-image: none;
   }
}

.journey-ornament {
   color: var(--accent-gold);
   font-size: 1.4rem;
   margin-bottom: 18px;
}

.journey-eyebrow {
   font-family: 'Playfair Display', serif;
   font-style: italic;
   font-size: 1.5rem;
   color: var(--accent-gold);
   margin-bottom: 10px;
}

.journey-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.6rem;
   font-weight: 600;
   line-height: 1.2;
   color: var(--accent-green);
   margin-bottom: 22px;
}

.journey-text {
   font-size: 0.95rem;
   color: var(--text-medium);
   line-height: 1.8;
   max-width: 520px;
   margin-bottom: 28px;
}

.journey-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.btn-pill {
   display: inline-flex;
   align-items: center;
   padding: 11px 26px;
   border-radius: 50px;
   font-weight: 500;
   font-size: 0.9rem;
   text-decoration: none;
   transition: all 0.3s ease;
}

.btn-pill-gold {
   background: linear-gradient(135deg, var(--accent-gold) 0%, #a07835 100%);
   color: #fff;
   box-shadow: 0 4px 14px rgba(199, 155, 92, 0.3);
}

.btn-pill-gold:hover {
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(199, 155, 92, 0.45);
   text-decoration: none;
}

.btn-pill-outline {
   background-color: transparent;
   color: var(--accent-green);
   border: 1.5px solid var(--accent-green);
}

.btn-pill-outline:hover {
   background-color: var(--accent-green);
   color: #fff;
   transform: translateY(-2px);
   text-decoration: none;
}

.journey-portrait {
   width: 100%;
   max-width: 360px;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 6px;
}

/* Serenity Prayer Card */
.prayer-card {
   background-color: transparent;
   border: 2px solid var(--accent-gold);
   border-radius: 16px;
   padding: 38px 32px 32px;
   text-align: center;
}

.prayer-ornament-top,
.prayer-ornament-bot {
   color: var(--accent-gold);
   font-size: 1.2rem;
   opacity: 0.85;
}

.prayer-ornament-top {
   margin-bottom: 16px;
}

.prayer-ornament-bot {
   margin-top: 18px;
}

.prayer-title {
   font-family: 'Playfair Display', serif;
   font-size: 1.7rem;
   font-weight: 600;
   font-style: italic;
   color: var(--accent-green);
   margin-bottom: 22px;
}

.prayer-text {
   /* font-family: 'Playfair Display', serif; */
   font-size: 1rem;
   line-height: 1.85;
   color: var(--text-medium);
   margin-bottom: 22px;
   font-style: italic;
}

.prayer-amen {
   font-family: 'Playfair Display', serif;
   font-size: 1rem;
   font-style: italic;
   color: var(--accent-gold);
   margin-bottom: 0;
   letter-spacing: 1px;
   font-weight: 600;
}

@media (max-width: 991px) {
   .journey-title {
      font-size: 2rem;
   }
}

@media (max-width: 575px) {
   .journey-section {
      padding: 60px 0;
   }

   .journey-title {
      font-size: 1.7rem;
   }

   .prayer-card {
      padding: 35px 22px 30px;
   }

   .prayer-title {
      font-size: 1.4rem;
   }

   .prayer-text {
      font-size: 0.9rem;
   }
}

/* ============ SECTION 3: ROLE ============ */
.role-section {
   padding: 200px 0;
   position: relative;
   background-color: var(--bg-cream);
   background-image: url('section3-bg.png');
   background-size: cover;
   background-position: center right;
   background-repeat: no-repeat;
   overflow: hidden;
}

/* Tablet & mobile: hide bg image (portrait col handled by Bootstrap d-lg-none) */
@media (max-width: 991px) {
   .role-section {
      background-image: none;
   }
}

.role-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.4rem;
   font-weight: 600;
   line-height: 1.25;
   color: var(--accent-green);
   margin-bottom: 28px;
}

.role-text {
   font-size: 0.95rem;
   color: var(--text-medium);
   line-height: 1.85;
   max-width: 480px;
   margin-bottom: 22px;
}

.role-text:last-child {
   margin-bottom: 0;
}

.role-portrait {
   width: 100%;
   max-width: 360px;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 6px;
}

@media (max-width: 991px) {
   .role-title {
      font-size: 1.9rem;
   }
}

@media (max-width: 575px) {
   .role-section {
      padding: 60px 0;
   }

   .role-title {
      font-size: 1.6rem;
   }
}

/* ============ SECTION 4: PERSPECTIVE ============ */
.perspective-section {
   padding: 500px 0;
   position: relative;
   background-color: var(--bg-cream);
   background-image: url('section4-bg.png');
   background-size: cover;
   background-position: center right;
   background-repeat: no-repeat;
   overflow: hidden;
}

/* Tablet & mobile: hide bg image (portrait col handled by Bootstrap d-lg-none) */
@media (max-width: 991px) {
   .perspective-section {
      background-image: none;
   }
}

.perspective-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.4rem;
   font-weight: 600;
   line-height: 1.25;
   color: var(--accent-green);
   margin-bottom: 24px;
}

.perspective-text {
   font-size: 0.95rem;
   color: var(--text-medium);
   line-height: 1.85;
   max-width: 480px;
   margin-bottom: 22px;
}

.perspective-lead {
   font-size: 0.95rem;
   color: var(--text-dark);
   font-weight: 500;
   margin-bottom: 14px;
}

.perspective-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.perspective-list li {
   font-size: 0.93rem;
   color: var(--text-medium);
   line-height: 1.6;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
}

.perspective-list li i {
   color: var(--accent-gold);
   font-size: 0.7rem;
   margin-right: 14px;
   flex-shrink: 0;
}

.perspective-portrait {
   width: 100%;
   max-width: 360px;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 6px;
}

@media (max-width: 991px) {
   .perspective-title {
      font-size: 1.9rem;
   }
}

@media (max-width: 575px) {
   .perspective-section {
      padding: 60px 0;
   }

   .perspective-title {
      font-size: 1.6rem;
   }
}

/* ============ SECTION 5: EDUCATION ============ */
.education-section {
   padding: 300px 0;
   position: relative;
   background-color: var(--bg-cream);
   background-image: url('section5-bg.png');
   background-size: cover;
   background-position: center right;
   background-repeat: no-repeat;
   overflow: hidden;
}

/* Tablet & mobile: hide bg image (portrait col handled by Bootstrap d-lg-none) */
@media (max-width: 991px) {
   .education-section {
      background-image: none;
   }
}

.education-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.4rem;
   font-weight: 600;
   line-height: 1.25;
   color: var(--accent-gold);
   margin-bottom: 26px;
}

.edu-card {
   display: flex;
   align-items: center;
   gap: 16px;
   background-color: #fff;
   border-radius: 12px;
   padding: 14px 20px;
   margin-bottom: 12px;
   max-width: 440px;
   box-shadow: 0 3px 12px rgba(60, 75, 50, 0.06);
   transition: all 0.3s ease;
}

.edu-card:hover {
   transform: translateX(4px);
   box-shadow: 0 6px 18px rgba(60, 75, 50, 0.12);
}

.edu-card-icon {
   width: 42px;
   height: 42px;
   border-radius: 8px;
   background-color: rgba(5, 86, 80, 0.08);
   color: var(--accent-green);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   flex-shrink: 0;
}

.edu-card-text {
   font-size: 0.9rem;
   color: var(--text-dark);
   font-weight: 500;
   line-height: 1.35;
}

.education-lead {
   font-size: 0.95rem;
   color: var(--text-dark);
   font-weight: 500;
   margin: 24px 0 12px;
}

.education-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.education-list li {
   font-size: 0.93rem;
   color: var(--text-medium);
   line-height: 1.6;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
}

.education-list li i {
   color: var(--accent-gold);
   font-size: 0.85rem;
   margin-right: 14px;
   width: 18px;
   text-align: center;
   flex-shrink: 0;
}

.education-portrait {
   width: 100%;
   max-width: 360px;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 6px;
}

@media (max-width: 991px) {
   .education-title {
      font-size: 1.9rem;
   }
}

@media (max-width: 575px) {
   .education-section {
      padding: 60px 0;
   }

   .education-title {
      font-size: 1.6rem;
   }

   .edu-card {
      padding: 12px 16px;
   }
}

/* ============ SECTION 6: BUSINESS LINES ============ */
.business-section {
   padding: 90px 0;
   position: relative;
   background-color: var(--bg-cream);
   background-image: url('section6-bg.png');
   background-size: cover;
   background-position: center right;
   background-repeat: no-repeat;
   overflow: hidden;
}

/* Tablet & mobile: hide bg image (portrait col handled by Bootstrap d-lg-none) */
@media (max-width: 991px) {
   .business-section {
      background-image: none;
   }
}

.business-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.4rem;
   font-weight: 600;
   line-height: 1.25;
   color: var(--accent-gold);
   margin-bottom: 22px;
}

.business-text {
   font-size: 0.95rem;
   color: var(--text-medium);
   line-height: 1.85;
   max-width: 480px;
   margin-bottom: 22px;
}

.business-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.business-list li {
   font-size: 0.95rem;
   color: var(--text-dark);
   line-height: 1.6;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
}

.business-list li i {
   color: var(--accent-gold);
   font-size: 0.95rem;
   margin-right: 14px;
   width: 22px;
   text-align: center;
   flex-shrink: 0;
}

.business-portrait {
   width: 100%;
   max-width: 360px;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 6px;
}

/* Contact pills (large variant for section 6) */
.contact-pill-lg {
   display: flex;
   align-items: center;
   gap: 14px;
   background-color: rgba(255, 255, 255, 0.55);
   border: 1px solid rgba(199, 155, 92, 0.4);
   border-radius: 50px;
   padding: 10px 22px 10px 10px;
}

.contact-icon-lg {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background-color: var(--accent-green);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   flex-shrink: 0;
}

/* Reuse .contact-body, .contact-label, .contact-value from section 1-A */

.btn-pill-green {
   background: linear-gradient(135deg, #0d6f63 0%, var(--accent-green) 100%);
   color: #fff;
   box-shadow: 0 4px 14px rgba(5, 86, 80, 0.3);
   padding: 12px 30px;
}

.btn-pill-green:hover {
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(5, 86, 80, 0.45);
   text-decoration: none;
}

.business-quote {
   max-width: 620px;
   margin: 0 auto;
   padding: 16px 22px;
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 14px;
   font-family: 'Playfair Display', serif;
   font-size: 1.05rem;
   color: var(--text-medium);
   line-height: 1.6;
}

.business-quote .quote-mark {
   color: var(--accent-gold);
   font-size: 1.4rem;
   vertical-align: middle;
   margin: 0 4px;
}

.business-quote .quote-highlight {
   color: var(--accent-gold);
   font-weight: 600;
   font-style: italic;
}

.business-tagline {
   font-family: 'Playfair Display', serif;
   font-size: 0.95rem;
   color: var(--accent-green);
   margin-top: 14px;
   margin-bottom: 0;
}

.business-tagline i {
   color: var(--accent-gold);
}

@media (max-width: 991px) {
   .business-title {
      font-size: 1.9rem;
   }
}

@media (max-width: 575px) {
   .business-section {
      padding: 60px 0;
   }

   .business-title {
      font-size: 1.6rem;
   }

   .contact-pill-lg {
      padding: 8px 18px 8px 8px;
   }
}

/* ============ SECTION 7: CONTACT ============ */
.contact-section {
   padding: 90px 0;
   position: relative;
   background-color: var(--bg-cream);
   overflow: hidden;
}

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

.contact-ornament {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1.5px solid var(--accent-gold);
   color: var(--accent-gold);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   margin-bottom: 18px;
}

.contact-title {
   font-family: 'Playfair Display', serif;
   font-size: 3rem;
   font-weight: 600;
   line-height: 1.1;
   color: var(--accent-gold);
   margin-bottom: 18px;
}

.contact-intro {
   font-size: 0.98rem;
   color: var(--text-medium);
   line-height: 1.75;
   max-width: 580px;
   margin: 0 auto 32px;
}

.contact-portrait-wrap {
   margin: 0 auto 30px;
}

.contact-portrait {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 10px;
   box-shadow: 0 12px 36px rgba(60, 75, 50, 0.15);
}

.contact-pills-row .contact-pill-lg {
   text-decoration: none;
   width: 100%;
   transition: all 0.3s ease;
}

.contact-pills-row .contact-pill-lg:hover {
   transform: translateY(-2px);
   text-decoration: none;
}

@media (max-width: 991px) {
   .contact-title {
      font-size: 2.4rem;
   }
}

@media (max-width: 575px) {
   .contact-section {
      padding: 60px 0;
   }

   .contact-title {
      font-size: 1.9rem;
   }
}

/* ============ SECTION 1-B: BANNER QUOTE ============ */
.banner-quote-section {
   position: relative;
   width: 100%;
   background-image: url(section1-b.png);
   background-size: 100% 100%;
   padding: 60px 0;
   overflow: hidden;
}

.banner-leaves {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 22%;
   max-width: 240px;
   background-size: contain;
   background-repeat: no-repeat;
   pointer-events: none;
   z-index: 0;
}

.banner-leaves-left {
   left: 0;
   /* background-image: url('banner-leaves-left.png'); */
   background-position: left center;
}

.banner-leaves-right {
   right: 0;
   /* background-image: url('banner-leaves-right.png'); */
   background-position: right center;
}

.banner-quote-section .container {
   position: relative;
   z-index: 1;
}

.banner-frame {
   max-width: 760px;
   margin: 0 auto;
   padding: 50px 40px;
   text-align: center;
   border-radius: 24px;
}

.banner-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.1rem;
   font-weight: 600;
   color: var(--accent-green);
   margin-bottom: 22px;
   line-height: 1.3;
}

.banner-quote {
   font-family: 'Playfair Display', serif;
   font-size: 1.25rem;
   color: var(--text-medium);
   margin-bottom: 0;
}

.banner-quote em {
   font-style: italic;
}

.banner-quote .quote-mark {
   color: var(--accent-gold);
   font-size: 1.5rem;
   vertical-align: middle;
   margin: 0 6px;
}

@media (max-width: 991px) {
   .hero-name {
      font-size: 2.3rem;
   }
}

@media (max-width: 575px) {
   .hero-section {
      padding: 50px 0;
   }

   .hero-name {
      font-size: 1.9rem;
   }

   .hero-contacts {
      flex-direction: column;
   }
}