/* ============================================================
   COLORZ CORPORATE'S — Design System
   
   Colour philosophy extracted from backgrounds:
   
   bg2.png (Hero) — Cinematic teal-left / amber-gold-right stage
     → White title (left dark zone), gold-amber accents, teal highlights
   
   secondbg.png (Light sections) — Apricot peach, white botanicals
     → Deep burgundy headings, warm espresso body text
     → Cards: white with crimson-left border + amber-gold accent
   
   newbg.png (Dark sections) — Deep teal / burnt amber, gold botanicals
     → Ivory/cream headings, warm amber body
     → Cards: teal-tinted glass with amber-gold border
============================================================ */

:root {
  /* ── Core brand ── */
  --crimson:       #7A1020;   /* pulled from: dark maroon, deepened           */
  --crimson-deep:  #4A0812;   /* shadow/depth version                         */
  --gold:          #C8922A;   /* warm gold — echoes amber glow in both bgs    */
  --gold-bright:   #F0B840;   /* bright gold for dark sections                */
  --gold-pale:     #F7E4A8;   /* pale gold tint                               */

  /* ── secondbg.png extracted ── */
  --apricot:       #F4C89A;   /* mid-tone of the peach bg                     */
  --apricot-dark:  #C8845A;   /* deeper apricot for text                      */
  --espresso:      #3D1A0A;   /* very dark warm brown — headings on light bg  */
  --mocha:         #6B3820;   /* warm brown — body text on light bg           */
  --latte:         #9A6045;   /* lighter warm brown — muted text on light bg  */

  /* ── newbg.png extracted ── */
  --teal-deep:     #0D3A38;   /* the dark teal left zone                      */
  --teal-mid:      #1A5550;   /* mid teal                                     */
  --amber-glow:    #C06818;   /* the burnt amber-orange right zone            */
  --amber-light:   #E8A060;   /* lighter amber for readable body text         */
  --ivory:         #FDF5E8;   /* warm ivory — headings on dark teal/amber bg  */
  --ivory-muted:   rgba(253,245,232,0.72);  /* muted ivory body text          */
  --ivory-dim:     rgba(253,245,232,0.45);  /* dimmed ivory sub-text          */

  /* ── Utility ── */
  --white:         #FFFFFF;
  --cream:         #FAF0E6;
}

/* ============================================================
   BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--espresso);
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: 'Playfair Display', serif; }
p,li,span,a  { font-family: 'DM Sans', sans-serif; }
img { max-width: 100%; height: auto; display: block; }

/* Section label — gold on both light and dark */
.section-label {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}

/* Gold ornament divider */
.ornament {
  display: flex; align-items: center;
  gap: 12px; justify-content: center; margin: 16px 0;
}
.ornament::before, .ornament::after {
  content: ''; flex: 1; max-width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament-icon { color: var(--gold); font-size: 0.8rem; }

/* ============================================================
   NAVBAR
============================================================ */
.navbar { padding: 12px 0; transition: all 0.3s ease; background: transparent; }
.navbar.scrolled {
  background: url("images/otherbg.png") 50% 20% /cover !important;
  border-bottom: 1px solid rgba(200,146,42,0.30);
  box-shadow: 0 4px 32px rgba(0,0,0,0.45);
}
.navbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.navbar-brand .brand-logo-wrapper img { width: 32px; }
.logo-company-name { margin-left: 6px; }
.navbar-brand .brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--ivory); line-height: 1.2; display: block;
}
.navbar-brand .brand-sub {
  font-size: 0.5rem; color: var(--gold-bright);
  letter-spacing: 0.18em; text-transform: uppercase; display: block;
}
.nav-link {
  color: var(--ivory) !important; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px !important; transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--gold-bright) !important; }
.navbar-toggler { border-color: rgba(200,146,42,0.5); padding: 4px 8px; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(240,184,64,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(13,58,56,0.97);  /* teal-deep from newbg */
    border: 1px solid rgba(200,146,42,0.2);
    border-radius: 8px; margin-top: 8px;
    padding: 12px 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  }
  .nav-link { padding: 10px 16px !important; border-radius: 4px; }
  .nav-link:hover { background: rgba(200,146,42,0.12); }
  .nav-cta { margin: 8px 16px 4px !important; display: block; text-align: center; }
}
.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--espresso) !important; border-radius: 4px;
  font-weight: 700 !important; padding: 7px 18px !important;
  margin-left: 8px; transition: opacity 0.2s, transform 0.2s;
}
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); color: var(--espresso) !important; }

/* ============================================================
   BUTTONS
============================================================ */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--espresso); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.08em;
  padding: 13px 28px; border: none; border-radius: 4px;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none; display: inline-block; white-space: nowrap;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,146,42,0.45);
  color: var(--espresso);
}
.btn-gold:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.btn-submit { text-align: center; cursor: pointer; font-size: 0.9rem; letter-spacing: 0.1em; padding: 15px; }

.btn-outline-cream {
  background: transparent; color: var(--ivory); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.08em;
  padding: 12px 28px; border: 1px solid rgba(253,245,232,0.45);
  border-radius: 4px; transition: all 0.2s;
  text-decoration: none; display: inline-block; white-space: nowrap;
}
.btn-outline-cream:hover {
  background: rgba(253,245,232,0.12);
  border-color: rgba(253,245,232,0.75); color: var(--ivory);
}

/* ============================================================
   HERO — bg2.png
   Dark teal-left zone → text sits on left → white + gold-bright
   Decorative circle echoes the amber glow arc in the image
============================================================ */
.hero {
  min-height: 100vh;
  background: url("images/bg2.png") center/cover no-repeat;
  display: flex; align-items: center;
  overflow: hidden; padding-top: 70px; position: relative;
}
/* Subtle left gradient to ensure text legibility */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(5,25,24,0.60) 0%,
    rgba(5,25,24,0.35) 45%,
    transparent 75%
  );
  pointer-events: none;
}
.hero-deco-circle {
  position: absolute; right: -100px; top: 50%;
  transform: translateY(-50%);
  width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(200,146,42,0.20); pointer-events: none;
}
.hero-deco-circle::before {
  content: ''; position: absolute; inset: 32px;
  border-radius: 50%; border: 1px solid rgba(200,146,42,0.13);
}
.hero-deco-circle::after {
  content: ''; position: absolute; inset: 64px;
  border-radius: 50%; border: 1px solid rgba(200,146,42,0.08);
}
.hero .container { position: relative; z-index: 1; padding-bottom: 60px; }

/* Hero text — white/ivory on the dark teal-left zone */
.hero-tagline {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);        /* bright gold label — pops on teal dark */
  margin-bottom: 18px; opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 900; line-height: 1.08;
  color: var(--ivory);              /* warm ivory — not cold white, matches amber glow */
  margin-bottom: 14px;
  opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards;
  font-style: italic;
}
.hero-title em {
  font-style: italic;
  color: var(--gold-bright);        /* bright amber-gold em — echoes stage lights */
}
.hero-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.45rem);
  font-weight: 300; font-style: italic;
  color: rgba(253,245,232,0.75);    /* soft ivory — warm tone, not stark white */
  margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards;
}
.hero-desc {
  font-size: 0.93rem;
  color: rgba(253,245,232,0.62);    /* dimmed ivory — secondary on dark */
  max-width: 540px; line-height: 1.82; margin-bottom: 36px;
  opacity: 0; animation: fadeUp 0.8s ease 0.7s forwards;
}
.hero-btns { opacity: 0; animation: fadeUp 0.8s ease 0.85s forwards; }

/* ============================================================
   SECTION INTRO HELPERS
============================================================ */
/* Sub-paragraph under headings in DARK sections */
.section-intro-dark {
  color: var(--ivory-dim);
  max-width: 500px; margin: 0 auto;
  font-size: 0.93rem; line-height: 1.8;
}

/* ============================================================
   IMPACT SECTION — secondbg.png (warm apricot-peach)
   
   Design: The peach is warm and luminous.
   → Headings: deep espresso-burgundy (pulled from crimson-deep)
   → Body: mocha warm brown
   → Cards: pure white with thick crimson left-border, gold accent num
   → People strip: crimson-deep bg, gold border, ivory text
============================================================ */
.section-impact {
  background: url("images/secondbg.png") center/cover no-repeat;
  padding: 80px 0; position: relative;
}
/* Top accent: crimson-to-gold gradient line — ties both colours together */
.section-impact::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--crimson), var(--gold), var(--crimson));
}
.section-impact .container { position: relative; z-index: 1; }
.section-impact .section-label { color: var(--gold); }

.impact-heading h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  color: var(--espresso);           /* deep espresso on apricot — maximum contrast */
  line-height: 1.1;
}
.impact-heading h2 em {
  color: var(--crimson);            /* crimson italic — rich & warm on peach */
  font-style: italic;
}
.impact-intro-text {
  color: var(--mocha);              /* warm mocha body on apricot */
  font-size: 0.93rem; line-height: 1.85;
}

/* Impact cards — white cards float above peach bg */
.impact-card {
  background: rgba(255,255,255,0.94);
  border-radius: 10px; padding: 28px 22px;
  box-shadow:
    0 2px 0 rgba(122,16,32,0.05),
    0 6px 28px rgba(60,26,10,0.12);
  border-left: 5px solid var(--crimson);
  transition: transform 0.3s, box-shadow 0.3s; height: 100%;
}
.impact-card.gold-border { border-left-color: var(--gold); }
.impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(60,26,10,0.18);
}

/* Number counter */
.impact-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900;
  color: var(--crimson);            /* crimson number on white card */
  line-height: 1; display: block; margin-bottom: 6px;
}
.impact-num.gold-num { color: var(--gold); }
.impact-num.counter-animating { animation: counterPulse 0.3s ease infinite alternate; }
.impact-num.counter-done { animation: counterPop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes counterPulse { from{transform:scale(1)} to{transform:scale(1.05)} }
@keyframes counterPop { 0%{transform:scale(1.1)} 60%{transform:scale(0.96)} 100%{transform:scale(1)} }

.impact-card h5 {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--espresso);           /* espresso label on white card */
  margin-bottom: 8px;
}
.impact-card p {
  font-size: 0.83rem;
  color: var(--latte);              /* warm latte body on white card */
  line-height: 1.72; margin: 0;
}

/* People strip — crimson block inside light section */
.people-strip {
  background: var(--crimson-deep);
  border: 1px solid rgba(200,146,42,0.25);
  border-radius: 12px; padding: 36px; margin-top: 52px;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
}
.people-strip-text h3 {
  font-size: 1.4rem; font-weight: 700;
  color: var(--ivory);              /* ivory on crimson-deep */
  margin-bottom: 8px;
}
.people-strip-text p {
  font-size: 0.88rem;
  color: rgba(253,245,232,0.62);    /* dimmed ivory on crimson-deep */
  margin: 0; line-height: 1.72;
}
.people-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.people-tag {
  background: rgba(253,245,232,0.08);
  border: 1px solid rgba(200,146,42,0.30);
  color: var(--gold-pale);          /* pale gold text on crimson-deep */
  padding: 7px 14px; border-radius: 100px; font-size: 0.8rem;
}
.people-tag i { color: var(--gold-bright); }

/* ============================================================
   SERVICES SECTION — newbg.png (teal-deep / amber glow)
   
   Design: Richly atmospheric — deep teal left, amber right.
   → Headings: warm ivory
   → em accents: gold-bright (matches amber glow)
   → Cards: teal-tinted glass, amber-gold top border on hover
   → Icon boxes: teal-mid background, gold-bright icon
   → Body text in cards: amber-light (pulls the amber from bg)
============================================================ */
.section-services {
  background: url("images/newbg.png") center/cover no-repeat;
  padding: 80px 0; position: relative; overflow: hidden;
}
.section-services::before {
  content: ''; position: absolute; inset: 0;
  /* Subtle teal overlay leans into the bg's dominant teal zone */
  background: rgba(8,30,28,0.3);
}
.section-services .container { position: relative; z-index: 1; }
.section-services .section-label { color: var(--gold-bright); }
.section-services h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  color: var(--ivory); line-height: 1.1;
}
.section-services h2 em {
  color: var(--gold-bright);        /* amber-gold em — echoes the right-side glow */
}

/* Service cards — teal-tinted glass panels */
.service-card {
  background: rgba(13,58,56,0.45);  /* teal-deep tint — pulls from bg left zone */
  border: 1px solid rgba(200,146,42,0.22);
  border-radius: 10px; padding: 30px 24px; height: 100%;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
  position: relative; overflow: hidden;
  backdrop-filter: blur(4px);
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(0); transition: transform 0.35s;
}
.service-card:hover {
  background: rgba(13,58,56,0.65);
  border-color: rgba(200,146,42,0.50);
  transform: translateY(-5px);
}
.service-card:hover::before { transform: scaleX(1); }

/* Service icon box — teal-mid bg */
.service-icon {
  width: 52px; height: 52px;
  background: rgba(26,85,80,0.70);  /* teal-mid */
  border: 1px solid rgba(200,146,42,0.40);
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px; transition: background 0.3s;
}
.service-card:hover .service-icon { background: rgba(26,85,80,0.90); }
.service-icon i {
  font-size: 1.25rem;
  color: var(--gold-bright);        /* bright amber-gold icon — pops on teal */
}
.service-card h4 {
  font-size: 1rem; font-weight: 700;
  color: var(--ivory);              /* ivory title on teal glass */
  margin-bottom: 10px;
}
.service-card p {
  font-size: 0.86rem;
  color: var(--amber-light);        /* warm amber body — echoes the bg amber glow */
  line-height: 1.78; margin: 0;
}

/* ============================================================
   MENU SECTION — secondbg.png (warm apricot-peach)
   
   Design: Image cards with deep maroon gradient overlay.
   → Section heading: espresso deep on peach
   → Description: mocha warm brown
   → Card image overlays: crimson-deep gradient (pulls crimson from brand)
   → Card title text: ivory on crimson gradient
============================================================ */
.section-menu {
  background: url("images/secondbg.png") center/cover no-repeat;
  padding: 80px 0; position: relative;
}
.section-menu::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--apricot-dark), var(--gold));
}
.section-menu .container { position: relative; z-index: 1; }
.section-menu .section-label { color: var(--gold); }

h2.menu-section-title {
  color: var(--espresso);           /* espresso heading on peach bg */
  font-size: clamp(1.8rem, 4vw, 3rem);
}
.menu-description {
  color: var(--mocha);              /* mocha body on peach bg */
  max-width: 520px; margin: 0 auto; font-size: 0.93rem; line-height: 1.8;
}

/* Menu cards */
.menu-card {
  position: relative; background: var(--white);
  border: 1px solid rgba(122,16,32,0.15);
  overflow: hidden; cursor: pointer; height: 100%;
  box-shadow: 0 6px 24px rgba(60,26,10,0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border-radius: 8px;
}
.menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(60,26,10,0.25);
}
.menu-image { position: relative; overflow: hidden; }
.menu-image img {
  width: 100%; height: 240px; object-fit: cover;
  transition: transform 0.4s ease;
}
.menu-card:hover .menu-image img { transform: scale(1.07); }
/* Crimson-deep gradient overlay on card images */
.menu-image::before {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 55%;
  background: linear-gradient(
    to top,
    rgba(74,8,18,0.92) 0%,
    rgba(122,16,32,0.50) 55%,
    transparent 100%
  );
  z-index: 1;
}
.menu-image h4 {
  position: absolute; z-index: 2; bottom: 14px; left: 0;
  color: var(--ivory);              /* warm ivory on crimson gradient */
  text-align: center; width: 100%;
  font-size: 1rem; margin: 0; padding: 0 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  letter-spacing: 0.02em;
}

/* ============================================================
   TESTIMONIALS SECTION — newbg.png (teal-deep / amber glow)
   
   Design: Same dark atmospheric bg as Services.
   → Quote icon: amber-glow tone
   → Quote text: warm ivory
   → Author name: gold-bright
   → Role: amber-light
   → Stars: gold
============================================================ */
.section-testimonials {
  background: url("images/newbg.png") center/cover no-repeat;
  padding: 80px 0; position: relative; overflow: hidden;
}
.section-testimonials::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,30,28,0.3);
}
.section-testimonials .container { position: relative; z-index: 1; }
.section-testimonials .section-label { color: var(--gold-bright); }
.section-testimonials h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  color: var(--ivory); line-height: 1.1;
}
.section-testimonials h2 em { color: var(--gold-bright); }

/* Testimonial cards use .service-card — override text for testimonials */
.testimonial-card-item {
  background: rgba(13,58,56,0.42) !important;
  backdrop-filter: blur(4px);
}
.testimonial-card-item p { color: var(--ivory-muted) !important; }

.testimonial-rating .fas.fa-star {
  color: var(--gold-bright);        /* bright gold stars on teal card */
  margin-right: 3px;
}
.quote-icon {
  font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1;
  color: rgba(192,104,24,0.35);     /* amber-glow tinted quote mark */
  display: block; margin-bottom: -10px;
}
.testimonial-text {
  font-size: 0.93rem;
  color: var(--ivory-muted);        /* warm ivory-muted quote on teal glass */
  line-height: 1.80; margin-bottom: 0;
}
.testimonial-author { display: flex; margin-top: 18px; align-items: center; gap: 10px; }
.testimonial-author-info h5 {
  font-size: 0.93rem;
  color: var(--gold-bright);        /* bright gold name on teal dark */
  margin-bottom: 2px;
}
.testimonial-author-info span {
  font-size: 0.78rem;
  color: var(--amber-light);        /* amber-light role — warm against teal */
}

/* ============================================================
   LEADERSHIP SECTION — secondbg.png (warm apricot-peach)
   
   Design: Clean, premium feel on the warm peach.
   → Heading: espresso deep
   → Body: mocha warm
   → Leader card: white card, crimson-deep header gradient
   → Belief boxes: white with gold/apricot border
   → Maroon belief box: crimson-deep bg
============================================================ */
.section-leadership {
  background: url("images/secondbg.png") center/cover no-repeat;
  padding: 80px 0; position: relative;
}
.section-leadership::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--apricot-dark), var(--gold));
}
.section-leadership .container { position: relative; z-index: 1; }
.section-leadership .section-label { color: var(--gold); }

.leader-text h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  color: var(--espresso); line-height: 1.1; margin-bottom: 20px;
}
.leader-text h2 em { color: var(--crimson); font-style: italic; }
.leader-text p { font-size: 0.95rem; color: var(--mocha); line-height: 1.85; margin-bottom: 16px; }

/* Leader card */
.leader-card {
  background: rgba(255,255,255,0.95); border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(122,16,32,0.08),
    0 10px 44px rgba(60,26,10,0.15);
  max-width: 400px; margin: 0 auto;
}
.leader-header {
  background: linear-gradient(150deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  padding: 40px 32px 28px; text-align: center;
}
.leader-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  border: 3px solid var(--gold-bright);
  background: var(--crimson-deep);
  margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
}
.leader-avatar i { font-size: 3rem; color: rgba(253,245,232,0.28); }
.leader-header h3 {
  font-size: 1.45rem; font-weight: 700;
  color: var(--ivory);              /* ivory name on crimson header */
  margin-bottom: 4px;
}
.leader-header .title {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-bright);        /* gold-bright role on crimson */
}
.leader-body { padding: 28px 32px; }
.leader-body p {
  font-size: 0.92rem;
  color: var(--mocha);              /* mocha on white card body */
  line-height: 1.82; text-align: center;
}
.leader-tag {
  text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.05rem;
  color: var(--crimson);            /* crimson quote — warm on white */
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--apricot);
}

/* Belief boxes */
.belief-box {
  background: rgba(255,255,255,0.90);
  border: 1px solid var(--apricot);
  border-radius: 8px; padding: 16px 18px; height: 100%;
}
.belief-box--maroon {
  background: var(--crimson-deep);  /* crimson-deep belief box */
  border-color: rgba(200,146,42,0.30);
}
.belief-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--latte); margin-bottom: 5px;
}
.belief-box--maroon .belief-label { color: var(--gold-bright); }
.belief-value { font-size: 0.88rem; color: var(--espresso); font-weight: 500; }
.belief-value-italic {
  font-size: 0.86rem; font-style: italic; font-weight: 500;
  color: var(--ivory);              /* ivory italic on crimson-deep */
}

/* ============================================================
   CONTACT SECTION — newbg.png (teal-deep / amber glow)
   
   Design: Same atmospheric teal/amber as Services/Testimonials.
   → Heading: ivory
   → em: gold-bright
   → Contact cards: teal-tinted glass, gold border
   → Icons: gold-bright on teal-mid bg
   → Labels: gold
   → Tagline block: amber-glow tinted border
============================================================ */
.section-contact {
  background: url("images/newbg.png") center/cover no-repeat;
  padding: 80px 0 30px; position: relative;
}
.section-contact::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,30,28,0.3);
}
.section-contact .container { position: relative; z-index: 1; }
.section-contact .section-label { color: var(--gold-bright); }
.section-contact h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  color: var(--ivory); line-height: 1.1;
}
.section-contact h2 em { color: var(--gold-bright); }

/* Contact info cards */
.contact-card {
  background: rgba(13,58,56,0.40);  /* teal-deep glass */
  border: 1px solid rgba(200,146,42,0.22);
  border-radius: 10px; padding: 24px 22px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: background 0.3s, border-color 0.3s;
  backdrop-filter: blur(4px);
}
.contact-card:hover {
  background: rgba(13,58,56,0.62);
  border-color: rgba(200,146,42,0.42);
}
.contact-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(26,85,80,0.70);  /* teal-mid icon bg */
  border: 1px solid rgba(200,146,42,0.40);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.contact-icon i {
  color: var(--gold-bright);        /* gold-bright icon on teal */
  font-size: 1.1rem;
}
.contact-card h5 {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-bright);        /* gold label on teal card */
  margin-bottom: 5px;
}
.contact-card p, .contact-card a {
  font-size: 0.91rem;
  color: var(--ivory-muted);        /* ivory-muted on teal glass */
  margin: 0; line-height: 1.6; text-decoration: none;
}
.contact-card a:hover { color: var(--gold-bright); }

/* Tagline block — amber-glow tinted border */
.tagline-block {
  background: rgba(192,104,24,0.08);
  border: 1px solid rgba(192,104,24,0.28);
  border-radius: 10px; padding: 24px;
}
.tagline-quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.25rem;
  color: var(--gold-bright);        /* gold-bright italic quote — echoes amber glow */
  line-height: 1.6; margin: 0;
}
.tagline-sub {
  font-size: 0.8rem;
  color: var(--ivory-dim);          /* dimmed ivory sub-line */
  margin-top: 10px; margin-bottom: 0;
}

/* Contact form */
.contact-form-wrap {
  background: rgba(13,58,56,0.38);
  border: 1px solid rgba(200,146,42,0.22);
  border-radius: 12px; padding: 36px 32px;
  backdrop-filter: blur(4px);
}
.form-title {
  font-size: 1.15rem;
  color: var(--ivory);              /* ivory form title on teal glass */
  margin-bottom: 22px;
}
.form-label {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(253,245,232,0.55);    /* muted ivory label */
  margin-bottom: 6px;
}
.form-control, .form-select {
  background: rgba(13,58,56,0.45);
  border: 1px solid rgba(200,146,42,0.25);
  border-radius: 6px;
  color: var(--ivory);              /* ivory typed text on teal input */
  padding: 11px 14px; font-size: 0.9rem;
  transition: border-color 0.2s, background 0.2s;
}
.form-control::placeholder { color: rgba(253,245,232,0.28); }
.form-control:focus, .form-select:focus {
  background: rgba(13,58,56,0.65);
  border-color: rgba(200,146,42,0.55);
  box-shadow: 0 0 0 3px rgba(200,146,42,0.12);
  color: var(--ivory); outline: none;
}
.form-select option { background: var(--teal-deep); color: var(--ivory); }

/* Status messages */
.form-status {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; border-radius: 8px;
  margin-bottom: 18px; font-size: 0.88rem; line-height: 1.5;
}
.form-status--success {
  background: rgba(30,140,90,0.15);
  border: 1px solid rgba(30,140,90,0.35); color: #7EE8AE;
}
.form-status--error {
  background: rgba(200,50,50,0.15);
  border: 1px solid rgba(200,50,50,0.35); color: #F5A0A0;
}
.emailjs-note {
  font-size: 0.73rem; color: rgba(253,245,232,0.28);
  margin: 0; line-height: 1.5; text-align: center;
}
.emailjs-note a { color: var(--gold-bright); }

/* Footer */
.footer-container {
  margin-top: 56px; border-top: 1px solid rgba(200,146,42,0.20); padding-top: 20px;
}
.footer-text {
  color: var(--gold);               /* gold footer text on dark teal */
  font-size: 0.75rem; text-align: center; line-height: 1.7;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.08s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.16s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.24s; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.32s; }
.reveal-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.40s; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 991px) {
  .section-impact, .section-services, .section-menu,
  .section-testimonials, .section-leadership, .section-contact { padding: 64px 0; }
  .hero { padding-top: 80px; }
  .hero .container { padding-bottom: 40px; }
  .people-strip { flex-direction: column; gap: 24px; }
  .leader-card { max-width: 100%; }
  .contact-form-wrap { padding: 28px 24px; }
}
@media (max-width: 767px) {
  .section-impact, .section-services, .section-menu,
  .section-testimonials, .section-leadership, .section-contact { padding: 52px 0; }
  .hero { min-height: 100svh; padding-top: 75px; background-attachment: scroll; }
  .hero-deco-circle { display: none; }
  .hero-title { font-size: clamp(2rem, 10vw, 3rem); }
  .hero-desc { font-size: 0.88rem; }
  .hero-btns { flex-direction: column; align-items: flex-start; }
  .btn-gold, .btn-outline-cream { width: 100%; text-align: center; }
  .impact-card { padding: 20px 16px; }
  .impact-card p { display: none; }
  .people-strip { padding: 24px; }
  .people-strip-text h3 { font-size: 1.2rem; }
  .people-tag { font-size: 0.75rem; padding: 6px 12px; }
  .service-card { padding: 24px 18px; }
  .menu-image img { height: 200px; }
  .quote-icon { font-size: 2.8rem; }
  .leader-card { margin-bottom: 8px; }
  .leader-header { padding: 32px 24px 22px; }
  .leader-body { padding: 22px 24px; }
  .leader-text h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .belief-box { padding: 14px; }
  .belief-value, .belief-value-italic { font-size: 0.82rem; }
  .contact-form-wrap { padding: 22px 16px; }
  .contact-card { padding: 18px 16px; gap: 12px; }
  .contact-icon { width: 38px; height: 38px; }
  .tagline-block { padding: 18px; }
  .tagline-quote { font-size: 1.1rem; }
  h2.menu-section-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}
@media (max-width: 400px) {
  .impact-num { font-size: 1.8rem; }
  .impact-card h5 { font-size: 0.74rem; }
  .navbar-brand .brand-name { font-size: 0.9rem; }
  .navbar-brand .brand-sub  { font-size: 0.44rem; }
}