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

:root {
  /* Primary brand colors */
  --roha-structure: #007E76;        /* Healing Teal */
  --roha-headline: #007E76;         /* Healing Teal */
  --roha-primary-action: #003854;   /* Trustworthy Navy */
  --roha-primary-action-hover: #007E76;

  --roha-link: #0075A8;
  --roha-premium-accent: #501195;

  /* Backgrounds */
  --roha-background: #FFFFFF;
  --roha-section-soft: #F7FAF9;
  --roha-warm-tint: rgba(233, 243, 158, 0.25);

  /* Text colors */
  --roha-body-text: #566B75;
  --roha-dark-text: #000000;

  /* Accent colors (use sparingly) */
  --roha-accent-yellow: #F6F222;
  --roha-accent-orange: #FF8739;
  --roha-accent-ruby: #A92724;
  --roha-soothing-cream: #E9F39E;

  /* Legacy variables for backward compatibility */
  --forest: #003854;
  --forest-mid: #007E76;
  --forest-light: #0075A8;
  --sage: #007E76;
  --sage-light: #B8D4D0;
  --cream: #F7FAF9;
  --cream-dark: #E8EFEC;
  --warm-white: #FFFFFF;
  --gold: #007E76;
  --gold-light: #B8D4D0;
  --charcoal: #000000;
  --text-mid: #566B75;
  --text-muted: #8A9BA3;
  --section-pad: clamp(5rem, 10vw, 9rem);
  --green: #007E76;
  --gl: #007E76;
  --pl: #0075A8;
  --black: #003854;
  --white: #FFFFFF;
  --muted: rgba(86, 107, 117, 0.5);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto Serif', Georgia, serif;
  font-weight: 300;
  font-size: 17px;
  background: var(--roha-background);
  color: var(--roha-body-text);
  overflow-x: hidden;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
/* See theme-default.css: `clip` avoids making <body> a scroll container,
   which breaks scrolling and sticky positioning in Safari. */
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

/* --- TYPOGRAPHY SYSTEM --- */
h1, h2, h3, h4, h5, h6, .logo, .stat-number, .hero-slide-content h1 {
  font-family: 'Poppins', sans-serif;
}
.serif-display {
  font-family: 'Roboto Serif', Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

/* ========== NAVBAR ========== */
.navbar {
  position: fixed; top:0; left:0; width:100%; height:72px;
  background: rgba(0, 56, 84, 0.97);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 48px;
  z-index: 1000;
  transition: all 0.35s ease;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.navbar.scrolled {
  background: rgba(0, 56, 84, 0.98);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  height: 62px;
  box-shadow: 0 2px 32px rgba(0,0,0,0.18);
}
.logo {
  color: white;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo span { color: var(--roha-accent-yellow); font-weight: 300; font-style: italic; font-family: 'Roboto Serif', serif; }
.right-nav { display:flex; align-items:center; gap:20px; }
.nav-links {
  display: flex; align-items: center; gap: 28px;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 0.55s cubic-bezier(0.2, 0.9, 0.4, 1.1), opacity 0.35s ease;
}
.nav-links.active { max-width: 750px; opacity: 1; }
.nav-links a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.25s;
  position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--roha-structure);
  transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover { color: var(--roha-structure); }
.icon-btn, .menu-toggle-btn {
  background:none; border:none; color:white;
  font-size:1.25rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: color 0.2s;
}
.icon-btn:hover, .menu-toggle-btn:hover { color: var(--roha-structure); }
.menu-toggle-btn { font-size:1.8rem; }
.expand-menu-btn {
  background:none; border:none; color:white;
  font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition: color 0.2s;
  font-family: 'Poppins', sans-serif;
}
.expand-menu-btn:hover { color: var(--roha-structure); }
@media (max-width:800px) {
  .navbar { padding: 0 20px; }
  .nav-links.active { max-width: 420px; }
  .nav-links a { font-size:0.65rem; }
  .logo { font-size:1rem; }
}

/* ========== SIDEBAR ========== */
.sidebar-offcanvas {
  position:fixed; top:0; right:-100%; width:340px; max-width:100%;
  height:100vh; height:100dvh; /* dvh: iOS toolbar no longer hides the bottom */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--roha-primary-action); z-index:1100;
  transition: right 0.4s ease-in-out;
  box-shadow: -8px 0 40px rgba(0,0,0,0.3);
  padding: 2rem 1.6rem;
  display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar-offcanvas.open { right:0; }
.sidebar-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.55); z-index:1050;
  visibility:hidden; opacity:0; transition:0.3s ease;
}
.sidebar-overlay.active { visibility:visible; opacity:1; }
.sidebar-header {
  display:flex; justify-content:space-between; align-items:center;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 1rem; margin-bottom: 2rem;
}
.sidebar-header h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--roha-structure); font-size:1.1rem; font-weight:700;
  letter-spacing:-0.01em; margin:0;
}
.close-sidebar {
  background:none; border:none; color:white;
  font-size:1.8rem; cursor:pointer; transition:0.2s;
  line-height:1;
}
.close-sidebar:hover { color:var(--roha-structure); transform:rotate(90deg); }
.sidebar-menu { list-style:none; padding:0; }
.sidebar-menu li { margin-bottom:0.5rem; }
.sidebar-menu a {
  color: rgba(255,255,255,0.75);
  text-decoration:none;
  font-family: 'Poppins', sans-serif;
  font-size:0.85rem; font-weight:500;
  display:flex; align-items:center; gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition: all 0.2s;
}
.sidebar-menu a i { width:26px; color:var(--roha-structure); }
.sidebar-menu a:hover { color:var(--roha-structure); padding-left:8px; }
.sidebar-contact {
  margin-top:auto; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.1);
  font-family:'Roboto Serif',serif; font-size:0.8rem; color:rgba(255,255,255,0.55);
}
.sidebar-contact p { margin-bottom:0.5rem; }
.sidebar-contact i { width:22px; color:var(--roha-structure); margin-right:8px; }
.social-sidebar { display:flex; gap:1rem; margin-top:1rem; }
.social-sidebar a { color:rgba(255,255,255,0.55); transition:0.2s; font-size:1.1rem; }
.social-sidebar a:hover { color:var(--roha-structure); }

/* ========== HERO ========== */
.h-hero-wrapper {
  position:relative; height:100vh; height:100svh; width:100%;
  overflow:hidden; background:var(--roha-primary-action);
}
.h-hero-slider { width:100%; height:100%; position:relative; overflow:hidden; }
.h-hero-track {
  display:flex; width:400%; height:100%;
  transition: transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: transform;
}
.h-hero-slide {
  width:25%; height:100%; flex-shrink:0;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding: 0 clamp(32px, 8vw, 100px);
}
/* Slide backgrounds with grain overlay */
.h-hero-slide::before {
  content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:1; opacity:0.5;
}


.slide-bg-0{

  background: var(--roha-gradient-01);

}

.slide-bg-1 {

  background: var(--roha-gradient-02);

}

.slide-bg-2 {

  background: var(--roha-gradient-03);

}

.slide-bg-3 {

  background: var(--roha-gradient-04);

}

.hero-slide-content {
  max-width: 650px; position:relative; z-index:2;
}
.hero-chapter {
  display: inline-flex; align-items:center; gap:14px;
  margin-bottom: 2.2rem;
}
.hero-chapter-line { width:40px; height:1px; background:rgba(255,255,255,0.2); }
.hero-chapter-badge {
  font-family: 'Poppins', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 4px 14px;
}
.hero-slide-content h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
  letter-spacing: -0.03em;
  color: white;
}
.hero-slide-content h1 em {
  font-style: normal;
  font-family: 'Roboto Serif', serif;
  font-weight: 300;
  font-style: italic;
  color: var(--roha-accent-yellow);
}
.hero-sub {
  font-family: 'Roboto Serif', serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  display: flex; align-items:center; gap:12px;
  margin-top: 0.5rem;
}
.hero-sub::before { content:''; width:20px; height:1px; background:rgba(255,255,255,0.3); }

.hero-deco-num {
  position:absolute; right:-20px; bottom:-40px;
  font-size:28vw; font-weight:800; line-height:1;
  color:rgba(255,255,255,0.015);
  pointer-events:none; user-select:none;
  letter-spacing:-10px;
  font-family: 'Poppins', sans-serif;
}
.hero-s-in { opacity:0; transform:translateX(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
.hero-s-in.d1 { transition-delay:.1s; }
.hero-s-in.d2 { transition-delay:.22s; }
.hero-s-in.d3 { transition-delay:.34s; }
.h-hero-slide.active .hero-s-in { opacity:1; transform:translateX(0); }

/* Hero slide image (inset photo, right side of gradient) */
.hero-slide-image {
  position: absolute;
  top: 50%;
  right: clamp(24px, 6vw, 90px);
  width: clamp(280px, 36vw, 620px);
  aspect-ratio: 16 / 11;
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 40px 90px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(-50%) translateX(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: .15s;
}
.hero-slide-image img { width:100%; height:100%; object-fit:cover; display:block; }
.h-hero-slide.active .hero-slide-image { opacity:1; transform: translateY(-50%) translateX(0); }

/* Arrow animations */
.arr-row { display:flex; gap:4px; }
.arr-row span { display:block; width:6px; height:6px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); animation:aBounce 1.4s ease-in-out infinite; }
.arr-row span:nth-child(2) { animation-delay:.15s; opacity:.6; }
.arr-row span:nth-child(3) { animation-delay:.3s; opacity:.35; }
@keyframes aBounce { 0%,100%{transform:rotate(-45deg) translate(0,0); opacity:1;} 50%{transform:rotate(-45deg) translate(4px,4px); opacity:.4;} }
.arr-down { display:flex; flex-direction:column; align-items:center; gap:4px; }
.arr-down span { display:block; width:20px; height:20px; border-right:5px solid #fff; border-bottom:5px solid #fff; transform:rotate(45deg); animation:aBounceD 1.4s ease-in-out infinite; }
.arr-down span:nth-child(2) { animation-delay:.15s; opacity:.6; }
.arr-down span:nth-child(3) { animation-delay:.3s; opacity:.35; }
@keyframes aBounceD { 0%,100%{transform:rotate(45deg) translate(0,0); opacity:1;} 50%{transform:rotate(45deg) translate(0,4px); opacity:.4;} }

.hero-scroll-arrow {
  position:absolute; right:clamp(24px,5vw,52px); bottom:44px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--muted); font-family:'Poppins',sans-serif; font-size:9px;
  letter-spacing:2px; text-transform:uppercase; z-index:10;
}
.hero-down-hint {
  position:absolute; right:clamp(24px,5vw,52px); bottom:80px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#fff; font-family:'Poppins',sans-serif; font-size:12px;
  letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; z-index:15; transition: opacity 0.5s;
}
.hero-down-hint:hover { opacity:0.7; }

/* Hero Timeline */
.hero-timeline {
  position:fixed; bottom:0; left:0; right:0; z-index:600;
  padding: 0 clamp(24px,5vw,52px) 28px;
  background: linear-gradient(to top, rgba(0,56,84,.85) 0%, transparent 100%);
  transition: opacity 0.4s ease, visibility 0.4s ease;
  opacity:1; visibility:visible;
}
.hero-timeline.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.hero-tl-track {
  position:relative; display:flex; align-items:center;
  height:2px; background:rgba(255,255,255,.08); border-radius:2px;
}
.hero-tl-fill {
  height:2px; border-radius:2px;
  background: var(--roha-gradient-primary);
  transition: width 0.5s cubic-bezier(0.77,0,0.175,1);
  position:absolute; left:0; top:0;
}
.hero-tl-dots {
  position:absolute; top:50%; transform:translateY(-50%);
  left:0; right:0; display:flex; justify-content:space-between;
}
.hero-tl-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.18);
  cursor:pointer; transition: background .4s, border-color .4s, transform .3s;
  position:relative;
}
.hero-tl-dot.reached { background:var(--roha-structure); border-color:var(--roha-structure); }
.hero-tl-dot.active { transform:scale(1.5); box-shadow:0 0 0 4px rgba(0,126,118,.18); }
.dot-label {
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  pointer-events:none; opacity:0; transition:opacity .2s;
}
.hero-tl-dot.active .dot-label, .hero-tl-dot:hover .dot-label { opacity:1; }
.hero-tl-dot.active .dot-label { color:var(--text-muted); font-weight:600; }
/* Keep the first/last labels on screen (dots sit at the track edges) */
.hero-tl-dot:first-child .dot-label { left:0; transform:none; }
.hero-tl-dot:last-child .dot-label { left:auto; right:0; transform:none; }

/* ========== STATS BAR ========== */
.stats-bar {
  background: var(--roha-primary-action);
  padding: clamp(1.5rem,4vw,2.5rem) clamp(2rem,6vw,5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
}
.stat-item {
  text-align:center; padding:clamp(1rem,3vw,2rem) 1.5rem;
  border-right:1px solid rgba(255,255,255,0.08);
}
.stat-item:last-child { border-right:none; }
.stat-number {
  display:block;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.5rem,5vw,3.8rem);
  font-weight: 700; color: var(--roha-structure); line-height:1;
  letter-spacing:-0.03em;
}
.stat-label {
  display:block; margin-top:0.5rem;
  font-family:'Poppins',sans-serif;
  font-size:0.65rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}

/* ========== SECTION SYSTEM ========== */
section { padding: var(--section-pad) clamp(2rem,8vw,5rem); }

.section-eyebrow {
  display:inline-flex; align-items:center; gap:0.8rem;
  font-family:'Poppins',sans-serif;
  font-size:0.65rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color: var(--roha-structure); margin-bottom:1.4rem;
}
.section-eyebrow::before { content:''; width:2.5rem; height:2px; background:var(--roha-structure); border-radius:2px; }

h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem,4vw,3.6rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--roha-headline);
}
h2 em {
  font-style: italic;
  font-family: 'Roboto Serif', serif;
  font-weight: 300;
  color: var(--roha-structure);
}
.lead {
  font-family: 'Roboto Serif', serif;
  font-size: 1.05rem; font-weight: 300; line-height:1.9;
  color: var(--roha-body-text); max-width: 580px; margin-top:1.2rem;
}

/* ========== NARRATIVE PULL QUOTE ========== */
.pull-quote {
  font-family: 'Roboto Serif', serif;
  font-size: clamp(1.3rem,2.5vw,1.9rem);
  font-weight: 300; font-style: italic;
  line-height: 1.55; color: var(--roha-primary-action);
  border-left: 3px solid var(--roha-structure);
  padding-left: 1.8rem;
  margin: 2.5rem 0;
}

.pull-quote-attribution { margin-top:1rem; font-family:'Poppins',sans-serif; font-style:normal; }
.pull-quote-name { display:block; font-weight:600; font-size:0.95rem; }
.pull-quote-role { display:block; font-size:0.8rem; opacity:0.8; margin-top:0.2rem; }

/* ========== MISSION ========== */
.mission { background: var(--roha-background); }
.mission-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,7rem); align-items:center; }
.mission-text-body {
  font-family: 'Roboto Serif', serif;
  font-size:1.05rem; line-height:1.9; color:var(--roha-body-text);
  margin-top:1.2rem;
}
.mission-visual { position:relative; height:480px; }
.mission-card.large {
  position:absolute; top:0; left:0; width:78%; height:72%;
  background: var(--roha-primary-action); padding:2.5rem;
  display:flex; align-items:flex-end;
}
.mission-card.large blockquote {
  font-family:'Roboto Serif',serif; font-size:1.35rem;
  font-style:italic; font-weight:300; color:white; line-height:1.6;
}
.mission-quote-attribution { margin-top:1.2rem; font-family:'Poppins',sans-serif; color:white; }
.mission-quote-name { display:block; font-weight:600; font-size:0.95rem; }
.mission-quote-role { display:block; font-size:0.8rem; opacity:0.8; margin-top:0.2rem; }
.mission-card.accent {
  position:absolute; bottom:0; right:0; width:52%;
  background:var(--roha-section-soft); padding:1.8rem;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.mission-card.accent span {
  font-family:'Poppins',sans-serif; font-size:3rem; font-weight:700;
  color:var(--roha-primary-action); letter-spacing:-0.04em; line-height:1;
}
.mission-card.accent p {
  font-family:'Roboto Serif',serif; font-size:0.85rem;
  color:var(--roha-body-text); margin-top:0.5rem; line-height:1.6;
}
.mission-pill {
  position:absolute; top:52%; right:-1.2rem;
  background:var(--roha-structure); color:white;
  padding:0.5rem 1.1rem;
  font-family:'Poppins',sans-serif; font-size:0.65rem;
  font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
}
.btn-primary {
  display: inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',sans-serif; font-size:0.75rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none;
  background: var(--roha-primary-action); color:white;
  padding: 0.85rem 1.8rem;
  border:2px solid var(--roha-primary-action);
  transition: all 0.25s;
  margin-top:2rem;
}
.btn-primary:hover { background: var(--roha-primary-action-hover); border-color: var(--roha-primary-action-hover); }

/* ========== NARRATIVE CHAPTER BREAK ========== */
.chapter-break {
  padding: clamp(3rem,6vw,5rem) clamp(2rem,8vw,5rem);
  background: var(--roha-section-soft);
  border-top: 1px solid var(--cream-dark);
  border-bottom: 1px solid var(--cream-dark);
  display:flex; align-items:center; gap:3rem;
  overflow:hidden;
}
.chapter-break-number {
  font-family:'Poppins',sans-serif; font-size:clamp(4rem,10vw,8rem);
  font-weight:800; color:var(--cream-dark);
  letter-spacing:-0.04em; line-height:1;
  flex-shrink:0;
}
.chapter-break-text {}
.chapter-break-label {
  font-family:'Poppins',sans-serif; font-size:0.95rem;
  font-weight:700; 
  /* letter-spacing:0.22em; */
  text-transform:uppercase; color:var(--text-muted);
  margin-bottom:0.6rem;
}
.chapter-break-label em {
  font-style:italic; font-family:'Roboto Serif',serif;
  font-weight:300; color:var(--roha-primary-action);
}

.chapter-break-title {
  font-family:'Poppins',sans-serif; font-size:clamp(1.3rem,2.5vw,2rem);
  font-weight:700; color:var(--roha-dark-text); line-height:1.2;
  letter-spacing:-0.02em;
}
.chapter-break-title em {
  font-style:italic; font-family:'Roboto Serif',serif;
  font-weight:300; color:var(--roha-primary-action);
}

/* ========== BUILDING / FEATURES ========== */
.building { background: var(--roha-background); }
.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--cream-dark);
  margin-top:3rem; overflow:hidden;
}
.feature-cell {
  padding:2.2rem; border-right:1px solid var(--cream-dark);
  border-bottom:1px solid var(--cream-dark);
  transition: background 0.35s, transform 0.35s;
  position:relative; overflow:hidden;
}
.feature-cell:hover { background:var(--roha-primary-action); transform:none; }
.feature-cell:hover h3, .feature-cell:hover p { color:white; }
.feature-icon {
  width:46px; height:46px;
  background:var(--roha-primary-action); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem; font-size:1.2rem;
  transition: background 0.35s;
}
.feature-cell:hover .feature-icon { background:rgba(255,255,255,0.15); }
.feature-cell h3 {
  font-family:'Poppins',sans-serif; font-size:0.95rem;
  font-weight:600; letter-spacing:-0.01em; margin-bottom:0.6rem;
  transition: color 0.35s;
  color: var(--roha-primary-action);
}
.feature-cell p {
  font-family:'Roboto Serif',serif; font-size:0.9rem;
  font-weight:300; color:var(--roha-body-text); line-height:1.75;
  transition: color 0.35s;
}

/* ========== ESG ========== */
.esg { background:var(--roha-primary-action); color:white; }
.esg-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,5rem); align-items:start; }
.esg .section-eyebrow { color:var(--sage-light); }
.esg .section-eyebrow::before { background:var(--sage-light); }
.esg h2 em { color:var(--roha-structure); }
.esg .lead { color:rgba(255,255,255,0.62); font-family:'Roboto Serif',serif; }
.esg-pillars { margin-top:2.5rem; }
.esg-pillar {
  padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,0.09);
  display:flex; gap:1.4rem; align-items:flex-start;
}
.pillar-num {
  font-family:'Poppins',sans-serif; font-size:1.2rem; font-weight:800;
  color:var(--roha-structure); letter-spacing:-0.02em; min-width:28px;
  padding-top:2px;
}
.esg-pillar h4 {
  font-family:'Poppins',sans-serif; font-size:0.85rem;
  font-weight:700; letter-spacing:0.02em; color:white;
  margin-bottom:0.3rem;
}
.esg-pillar p {
  font-family:'Roboto Serif',serif; font-size:0.9rem;
  font-weight:300; color:rgba(255,255,255,0.6); line-height:1.7;
}
.esg-forest-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  padding:2.5rem; position:relative; overflow:hidden;
  margin-top:2rem;
}
.tree-count {
  font-family:'Poppins',sans-serif; font-size:clamp(3rem,6vw,4.5rem);
  font-weight:800; color:var(--roha-structure); letter-spacing:-0.04em; line-height:1;
  display:block;
}
.esg-forest-card h3 {
  font-family:'Poppins',sans-serif; font-size:1rem; font-weight:600;
  color:white; margin:0.5rem 0;
}
.esg-forest-card p {
  font-family:'Roboto Serif',serif; font-size:0.9rem;
  font-weight:300; color:rgba(255,255,255,0.6); line-height:1.7;
}
.esg-badge {
  display:inline-block; margin-top:1.2rem;
  background:rgba(0,126,118,0.8); border:1px solid rgba(0,126,118,0.3);
  color:var(--roha-structure);
  font-family:'Poppins',sans-serif; font-size:0.7rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.5rem 1rem;
}

/* ========== MILESTONES / TIMELINE ========== */
.milestones { background:var(--roha-background); }
.timeline { margin-top:3rem; position:relative; }
.timeline::before {
  content:''; position:absolute; left:120px; top:0; bottom:0;
  width:1px; background:var(--cream-dark);
}
.timeline-item {
  display:grid; grid-template-columns:110px 1fr;
  gap:2rem; margin-bottom:3rem; position:relative;
}
.timeline-left { text-align:right; padding-top:4px; position:relative; }
.timeline-date {
  font-family:'Poppins',sans-serif; font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
  display:block;
}
.timeline-dot {
  position:absolute; right:-2.35rem; top:6px;
  width:12px; height:12px;
  background:var(--cream-dark); border:2px solid var(--cream-dark);
  border-radius:50%;
}
.timeline-dot.gold { background:var(--roha-structure); border-color:var(--roha-structure); box-shadow:0 0 0 4px rgba(0,126,118,0.15); }
.timeline-right {
  padding-left: 20px;
}
.timeline-tag {
  font-family:'Poppins',sans-serif; font-size:0.65rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--roha-structure); margin-bottom:0.4rem;
}
.timeline-right h3 {
  font-family:'Poppins',sans-serif; font-size:1.1rem;
  font-weight:700; letter-spacing:-0.01em; margin-bottom:0.4rem;
  color:var(--roha-dark-text);
}
.timeline-right p {
  font-family:'Roboto Serif',serif; font-size:0.92rem;
  font-weight:300; color:var(--roha-body-text); line-height:1.7;
}

/* ========== NEWS ========== */
.news { background:var(--roha-section-soft); }
.news-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.news-all-link {
  font-family:'Poppins',sans-serif; font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--roha-structure); text-decoration:none;
  transition:gap 0.2s; display:flex; align-items:center; gap:8px;
}
.news-all-link:hover { gap:14px; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.news-card {
  background:var(--roha-background); padding:2.2rem;
  transition:background 0.3s;
  border-bottom:3px solid transparent;
}
.news-card:hover { background:var(--roha-primary-action); border-bottom-color:var(--roha-structure); }
.news-card:hover * { color:rgba(255,255,255,0.85) !important; }
.news-card:hover .news-read-link { color:var(--roha-structure) !important; }
.news-card-image {
  aspect-ratio:4/3; border-radius:0 0 6px 64px; overflow:hidden;
  margin:-2.2rem -2.2rem 1.4rem;
}
.news-card-image img { width:100%; height:100%; object-fit:cover; display:block; }
.news-card-tag {
  font-family:'Poppins',sans-serif; font-size:0.62rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--roha-structure); margin-bottom:0.8rem;
  transition:color 0.3s;
}
.news-card-title {
  font-family:'Poppins',sans-serif; font-size:1rem; font-weight:700;
  letter-spacing:-0.01em; line-height:1.35; margin-bottom:0.8rem;
  color:var(--roha-dark-text); transition:color 0.3s;
}
.news-card p {
  font-family:'Roboto Serif',serif; font-size:0.88rem;
  font-weight:300; color:var(--roha-body-text); line-height:1.7;
  transition:color 0.3s;
}
.news-card-footer {
  margin-top:1.2rem; display:flex; justify-content:space-between; align-items:center;
}
.news-date {
  font-family:'Poppins',sans-serif; font-size:0.65rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
  transition:color 0.3s;
}
.news-read-link {
  font-family:'Poppins',sans-serif; font-size:0.7rem; font-weight:700;
  letter-spacing:0.08em; color:var(--roha-structure);
  text-decoration:none; transition:color 0.3s;
}

/* ========== NEWSLETTER ========== */
.newsletter { background:var(--roha-dark-text); padding:clamp(3rem,6vw,5rem) clamp(2rem,8vw,5rem); }
.newsletter-inner { max-width:560px; margin:0 auto; text-align:center; }
.newsletter h2 {
  color:white; font-family:'Poppins',sans-serif;
  font-size:clamp(1.6rem,3vw,2.5rem);
  font-weight:700; letter-spacing:-0.02em;
}
.newsletter h2 em {
  font-family:'Roboto Serif',serif; font-style:italic;
  font-weight:300; color:var(--roha-accent-yellow);
}
.newsletter p {
  font-family:'Roboto Serif',serif; font-size:0.95rem;
  font-weight:300; color:rgba(255,255,255,0.55); margin:1rem 0 1.8rem;
  line-height:1.7;
}
.newsletter-form { display:flex; }
.newsletter-form input {
  flex:1; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); border-right:none;
  padding:0.9rem 1.2rem; color:white;
  font-family:'Roboto Serif',serif; font-size:0.9rem;
  outline:none; transition: border-color 0.2s;
}
.newsletter-form input:focus { border-color:rgba(255,255,255,0.3); }
.newsletter-form input::placeholder { color:rgba(255,255,255,0.3); }
.newsletter-form button {
  background:var(--roha-structure); border:none;
  padding:0.9rem 1.8rem; cursor:pointer;
  font-family:'Poppins',sans-serif; font-size:0.72rem;
  font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:white; transition: background 0.2s;
}
.newsletter-form button:hover { background:var(--roha-primary-action-hover); }

/* ========== FOOTER ========== */
footer {
  background:var(--roha-primary-action); padding:clamp(2.5rem,5vw,4rem) clamp(2rem,6vw,4rem);
  color:rgba(255,255,255,0.5);
}
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.5rem; }
.footer-logo { display:block; height:40px; width:auto; margin-bottom:1rem; }
.footer-brand h3 {
  font-family:'Poppins',sans-serif; font-size:1rem; font-weight:700;
  color:white; letter-spacing:-0.01em; margin-bottom:0.8rem;
}
.footer-brand p {
  font-family:'Roboto Serif',serif; font-size:0.85rem;
  font-weight:300; line-height:1.7; color:rgba(255,255,255,0.5);
}
.footer-brand address {
  font-style:normal; font-family:'Roboto Serif',serif;
  font-size:0.8rem; line-height:1.8; color:rgba(255,255,255,0.4);
  margin-top:1rem;
}
.footer-brand address a { color:inherit; text-decoration:none; transition: color 0.2s; }
.footer-brand address a:hover { color:var(--roha-structure); }
.footer-social { display:flex; gap:0.75rem; margin-top:1.25rem; }
.footer-social-link {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7);
  font-size:0.85rem; text-decoration:none; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-social-link:hover { color:#fff; border-color:var(--roha-structure); background:var(--roha-structure); }
.footer-col h4 {
  font-family:'Poppins',sans-serif; font-size:0.65rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--roha-structure);
  margin-bottom:1rem;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.5rem; }
.footer-col ul li a {
  font-family:'Roboto Serif',serif; font-size:0.85rem;
  font-weight:300; color:rgba(255,255,255,0.5); text-decoration:none;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color:var(--roha-structure); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08); margin-top:2.5rem;
  padding-top:1.5rem; text-align:center;
  font-family:'Poppins',sans-serif; font-size:0.7rem;
  font-weight:500; letter-spacing:0.05em; color:rgba(255,255,255,0.3);
}

/* ========== FADE ANIMATIONS ========== */
.fade-up { opacity:0; transform:translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-delay-1 { transition-delay:0.12s; }
.fade-up-delay-2 { transition-delay:0.24s; }

/* ========== RESPONSIVE ========== */
@media (max-width:1300px) {
  .hero-slide-content { max-width: 52%; }
  .hero-slide-image { width: clamp(240px, 32vw, 420px); }
}
@media (max-width:900px) {
  section { padding: 3.5rem 1.6rem; }
  .mission-inner, .esg-inner { grid-template-columns:1fr; }
  .features-grid, .news-grid { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:1fr; padding:1.5rem; }
  .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.08); }
  .timeline::before { left:80px; }
  .timeline-item { grid-template-columns:70px 1fr; }
  .chapter-break { flex-direction:column; gap:1rem; }
  .chapter-break-number { font-size:clamp(3rem,15vw,5rem); }
  .h-hero-slide { padding:0 24px; }
  .hero-down-hint, .hero-scroll-arrow { right:24px; }
  .mission-visual { height:320px; }
  .news-all-link { font-size:0.65rem; }
  .hero-slide-content { max-width: 100%; }
  .hero-slide-image { display: none; }
}

.preview-section{
  background:var(--roha-background);
}

.preview-card{
  display:block;
  height:100%;
  padding:35px;
  background:#fff;
  border:1px solid #ece7dd;
  text-decoration:none;
  transition:all .4s ease;
  color:var(--roha-dark-text);
}

.preview-card:hover{
  transform:translateY(-10px);
  background:var(--roha-primary-action);
  color:white;
}

.preview-card:hover p,
.preview-card:hover span{
  color:rgba(255,255,255,.75);
}

.preview-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--roha-section-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  font-size:24px;
  color:var(--roha-primary-action);
}

.preview-card h3{
  font-family:'Poppins',sans-serif;
  margin-bottom:15px;
  font-weight:700;
}

.preview-card p{
  color:var(--roha-body-text);
  line-height:1.8;
}

.preview-card span{
  display:inline-block;
  margin-top:15px;
  font-weight:600;
  color:var(--roha-primary-action);
}

.preview-card-large{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:220px;
}

.preview-contact-btn{
  padding:15px 30px;
  background:var(--roha-structure);
  color:#fff;
  font-weight:600;
}
/* =========================================================
   ROHA HEALTH BRAND OVERRIDES
   Healing Teal as the main structure/background colour.
   Trustworthy Navy as the main action colour.
   Only THREE gradients are used across the whole theme.
   ========================================================= */

:root {
  /* Core palette */
  --roha-healing-teal: #007E76;
  --roha-trustworthy-navy: #003854;
  --roha-professional-blue: #0075A8;
  --roha-excellent-purple: #501195;
  --roha-hopeful-lime: #6BD87B;
  --roha-soothing-cream: #E9F39E;
  --roha-curing-sage: #A4B8AC;
  --roha-calming-turquoise: #4EC7BE;
  --roha-serene-ocean: #005B66;
  --roha-gentle-lavender: #6B46B7;

  /* Requested usage */
  --roha-structure: #007E76;
  --roha-headline: #007E76;
  --roha-primary-action: #003854;
  --roha-primary-action-hover: #007E76;

  /* Background system */
  --roha-background: #007E76;
  --roha-header-bg: #007E76;
  --roha-footer-bg: #007E76;
  --roha-section-soft: #F7FAF9;
  --roha-card-bg: #FFFFFF;
  --roha-body-text: #566B75;
  --roha-dark-text: #003854;

  /* THE ONLY 3 GRADIENTS IN THIS THEME */
  --roha-gradient-primary: linear-gradient(90deg, #007E76 0%, #005B66 52%, #501195 100%);
  --roha-gradient-bright: linear-gradient(90deg, #6BD87B 0%, #0075A8 52%, #6B46B7 100%);
  --roha-gradient-hero: linear-gradient(120deg, #007E76 0%, #005B66 42%, #0075A8 68%, #501195 100%);

  --roha-gradient-01:
    radial-gradient(circle at 88% 0%, #65AF49 0%, rgba(101, 175, 73, 0) 30%),
    linear-gradient(135deg, #005B6E 0%, #007E76 35%, #009A54 58%, #005579 100%);
  --roha-gradient-02:
    linear-gradient(45deg, #005062 0%, #174A7C 38%, #392987 68%, #581B9C 100%);
  --roha-gradient-03:
    radial-gradient(circle at 62% 15%, rgba(0, 126, 118, 0.95) 0%, rgba(0, 126, 118, 0) 55%),
    linear-gradient(135deg, #264981 0%, #21587D 48%, #501195 100%);
  --roha-gradient-04:
    radial-gradient(circle at 47% 45%, rgba(0, 126, 118, 0.95) 0%, rgba(0, 126, 118, 0) 52%),
    linear-gradient(90deg, #313B86 0%, #005B66 35%, #215B7B 70%, #501195 100%);
}

body {
  background: var(--roha-background);
  color: rgba(255,255,255,0.86);
}

/* Header: gradient 1 (primary) */
.navbar,
.navbar.scrolled {
  background: var(--roha-gradient-primary);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.navbar.scrolled {
  box-shadow: 0 2px 28px rgba(0, 56, 84, 0.22);
}

.logo,
.nav-links a,
.icon-btn,
.menu-toggle-btn,
.expand-menu-btn {
  color: #FFFFFF;
}

.logo span,
.nav-links a:hover,
.icon-btn:hover,
.menu-toggle-btn:hover,
.expand-menu-btn:hover {
  color: var(--roha-soothing-cream);
}

.nav-links a::after {
  background: var(--roha-soothing-cream);
}

/* Primary actions: Trustworthy Navy, no gradient */
.btn-primary,
.newsletter-form button,
.preview-contact-btn {
  background: var(--roha-healing-teal);
  border-color: var(--roha-trustworthy-navy);
  color: #FFFFFF;
}

.btn-primary:hover,
.newsletter-form button:hover,
.preview-contact-btn:hover {
  background: var(--roha-healing-teal);
  border-color: var(--roha-healing-teal);
  color: #FFFFFF;
}

/* Hero: gradient 3 (hero) used everywhere in the hero, no per-slide variants */
.h-hero-wrapper {
  /* background: var(--roha-gradient-hero); */
}



.slide-bg-0{

  background: var(--roha-gradient-01);

}

.slide-bg-1 {

  background: var(--roha-gradient-02);

}

.slide-bg-2 {

  background: var(--roha-gradient-03);

}

.slide-bg-3 {

  background: var(--roha-gradient-04);

}

.hero-slide-content h1,
.hero-slide-content h1 em,
.hero-sub,
.hero-chapter-badge {
  color: #FFFFFF;
}

.hero-slide-content h1 em{
  color: var(--roha-accent-yellow) !important;
}
.hero-timeline {
  background: linear-gradient(to top, rgba(0,126,118,.88) 0%, transparent 100%);
}

.hero-tl-fill {
  background: var(--roha-gradient-primary);
}

.hero-tl-dot.reached {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.hero-tl-dot.active {
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}

/* Most large page backgrounds: gradient 1 (primary) */
.stats-bar,
.mission,
.building,
.milestones,
.preview-section,
.news {
  background: var(--roha-gradient-primary);
  color: #FFFFFF;
}

.esg,
.newsletter,
footer {
  background: var(--roha-trustworthy-navy);
  color: rgba(255,255,255,0.82);
}

/* Teal sections need white headings; white cards keep teal headlines */
.mission h2,
.building h2,
.milestones h2,
.preview-section h2,
.news h2,
.esg h2,
.newsletter h2,
.mission .section-eyebrow,
.building .section-eyebrow,
.milestones .section-eyebrow,
.preview-section .section-eyebrow,
.news .section-eyebrow {
  color: #FFFFFF;
}

.mission .section-eyebrow::before,
.building .section-eyebrow::before,
.milestones .section-eyebrow::before,
.preview-section .section-eyebrow::before,
.news .section-eyebrow::before {
  background: var(--roha-accent-yellow);
}

/* On the primary gradient (which shifts toward purple), the eyebrow accent
   colour and stat numbers shift to cream/yellow for contrast at every stop */
.section-eyebrow,
.stat-number,
.pillar-num,
.tree-count {
  color: var(--roha-accent-yellow);
}

.lead,
.mission-text-body,
.timeline-right p,
.news-card p {
  color: rgba(255,255,255,0.78);
}

/* Readability cards: flat white, no gradient */
.mission-card.accent{
  background: var(--sage-light);
  color: var(--roha-body-text);
  border-color: rgba(0,56,84,0.10);
}

.feature-cell,
.news-card,
.preview-card,
.chapter-break {
  background: #FFFFFF;
  color: var(--roha-body-text);
  border-color: rgba(0,56,84,0.10);
}

.mission-card.accent span,
.feature-cell h3,
.news-card-title,
.preview-card h3,
.chapter-break-title,
.timeline-right h3 {
  color: var(--roha-healing-teal);
}

.mission-card.accent p,
.feature-cell p,
.news-card p,
.preview-card p,
.preview-card span {
  color: var(--roha-body-text);
}

/* Hover states use Trustworthy Navy as the main action colour */
.feature-cell:hover,
.news-card:hover,
.preview-card:hover {
  background: var(--roha-trustworthy-navy);
  color: #FFFFFF;
}

.feature-cell:hover h3,
.feature-cell:hover p,
.news-card:hover *,
.preview-card:hover h3,
.preview-card:hover p,
.preview-card:hover span {
  color: rgba(255,255,255,0.88) !important;
}

.feature-icon,
.preview-icon {
  background: var(--roha-trustworthy-navy);
  color: #FFFFFF;
}

.feature-cell:hover .feature-icon,
.preview-card:hover .preview-icon {
  background: rgba(255,255,255,0.14);
  color: #FFFFFF;
}

/* Chapter break: flat cream-soft, no gradient */
.chapter-break {
  background: var(--roha-section-soft);
}

.chapter-break-number {
  color: rgba(0,126,118,0.12);
}

/* Stats and footer details */
.stat-number,
.footer-col h4,
.footer-col ul li a:hover,
.news-read-link,
.news-all-link,
.timeline-tag,
.timeline-dot.gold,
.pillar-num,
.tree-count,
.esg-badge {
  color: var(--roha-soothing-cream);
}

.timeline-dot.gold {
  background: var(--roha-soothing-cream);
  border-color: var(--roha-soothing-cream);
  box-shadow: 0 0 0 4px rgba(233,243,158,0.18);
}

.esg-badge {
  background: rgba(233,243,158,0.9);
  border-color: rgba(233,243,158,0.24);
}

footer .footer-brand h3,
footer .footer-brand p,
footer .footer-brand address,
footer .footer-col ul li a,
.footer-bottom {
  color: rgba(255,255,255,0.76);
}

footer .footer-social-link:hover {
  border-color: var(--roha-soothing-cream);
  background: var(--roha-soothing-cream);
  color: var(--roha-primary-action);
}

.footer-bottom,
.sidebar-header,
.sidebar-menu a,
.sidebar-contact {
  border-color: rgba(255,255,255,0.16);
}

/* Sidebar stays action-led in Trustworthy Navy, flat */
.sidebar-offcanvas {
  background: var(--roha-gradient-02);
}

.sidebar-header h3,
.sidebar-menu a i,
.sidebar-menu a:hover,
.sidebar-contact i,
.social-sidebar a:hover,
.close-sidebar:hover {
  color: var(--roha-soothing-cream);
}

/* Forms and secondary UI */
.newsletter-form input {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

.pull-quote {
  color: #FFFFFF;
  border-left-color: var(--roha-soothing-cream);
}


/* ## Colors # */
/* =========================================================
   ROHA TEXT COLOR UTILITIES
   Usage: class="text-yellow"
   ========================================================= */

.text-roha-structure {
  color: var(--roha-structure) !important;
}

.text-roha-headline {
  color: var(--roha-headline) !important;
}

.text-primary-action {
  color: var(--roha-primary-action) !important;
}

.text-primary-action-hover {
  color: var(--roha-primary-action-hover) !important;
}

.text-link {
  color: var(--roha-link) !important;
}

.text-premium-accent {
  color: var(--roha-premium-accent) !important;
}

.text-background {
  color: var(--roha-background) !important;
}

.text-section-soft {
  color: var(--roha-section-soft) !important;
}

.text-warm-tint {
  color: var(--roha-warm-tint) !important;
}

.text-body {
  color: var(--roha-body-text) !important;
}

.text-dark {
  color: var(--roha-dark-text) !important;
}

.text-yellow {
  color: var(--roha-accent-yellow) !important;
}

.text-yellow-cream {
  color: var(--roha-soothing-cream) !important;
}

.text-orange {
  color: var(--roha-accent-orange) !important;
}

.text-ruby {
  color: var(--roha-accent-ruby) !important;
}


/* Legacy color utilities */

.text-forest {
  color: var(--forest) !important;
}

.text-forest-mid {
  color: var(--forest-mid) !important;
}

.text-forest-light {
  color: var(--forest-light) !important;
}

.text-sage {
  color: var(--sage) !important;
}

.text-sage-light {
  color: var(--sage-light) !important;
}

.text-cream {
  color: var(--cream) !important;
}

.text-cream-dark {
  color: var(--cream-dark) !important;
}

.text-warm-white {
  color: var(--warm-white) !important;
}

.text-gold {
  color: var(--gold) !important;
}

.text-gold-light {
  color: var(--gold-light) !important;
}

.text-charcoal {
  color: var(--charcoal) !important;
}

.text-mid {
  color: var(--text-mid) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-green {
  color: var(--green) !important;
}

.text-gl {
  color: var(--gl) !important;
}

.text-pl {
  color: var(--pl) !important;
}

.text-black {
  color: var(--black) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-muted-transparent {
  color: var(--muted) !important;
}



/* =========================================================
   ROHA BACKGROUND COLOR UTILITIES
   Usage: class="bg-yellow"
   ========================================================= */

.bg-roha-structure {
  background: var(--roha-structure) !important;
}

.bg-roha-headline {
  background: var(--roha-headline) !important;
}

.bg-primary-action {
  background: var(--roha-primary-action) !important;
}

.bg-primary-action-hover {
  background: var(--roha-primary-action-hover) !important;
}

.bg-link {
  background: var(--roha-link) !important;
}

.bg-premium-accent {
  background: var(--roha-premium-accent) !important;
}

.bg-background {
  background: var(--roha-background) !important;
}

.bg-section-soft {
  background: var(--roha-section-soft) !important;
}

.bg-warm-tint {
  background: var(--roha-warm-tint) !important;
}

.bg-body {
  background: var(--roha-body-text) !important;
}

.bg-dark {
  background: var(--roha-dark-text) !important;
}

.bg-yellow {
  background: var(--roha-accent-yellow) !important;
}

.bg-yellow-cream {
  background: var(--roha-soothing-cream) !important;
}

.bg-orange {
  background: var(--roha-accent-orange) !important;
}

.bg-ruby {
  background: var(--roha-accent-ruby) !important;
}


/* Legacy background utilities */

.bg-forest {
  background: var(--forest) !important;
}

.bg-forest-mid {
  background: var(--forest-mid) !important;
}

.bg-forest-light {
  background: var(--forest-light) !important;
}

.bg-sage {
  background: var(--sage) !important;
}

.bg-sage-light {
  background: var(--sage-light) !important;
}

.bg-cream {
  background: var(--cream) !important;
}

.bg-cream-dark {
  background: var(--cream-dark) !important;
}

.bg-warm-white {
  background: var(--warm-white) !important;
}

.bg-gold {
  background: var(--gold) !important;
}

.bg-gold-light {
  background: var(--gold-light) !important;
}

.bg-charcoal {
  background: var(--charcoal) !important;
}

.bg-mid {
  background: var(--text-mid) !important;
}

.bg-text-muted {
  background: var(--text-muted) !important;
}

.bg-green {
  background: var(--green) !important;
}

.bg-gl {
  background: var(--gl) !important;
}

.bg-pl {
  background: var(--pl) !important;
}

.bg-black {
  background: var(--black) !important;
}

.bg-white {
  background: var(--white) !important;
}

.bg-muted {
  background: var(--muted) !important;
}

/* =========================================================
   MOBILE / TABLET RESPONSIVENESS
   Shared fixes for the header, sidebar, home page sections
   and footer. Page-specific fixes live in each page's
   components/<page>/<page>.css.
   ========================================================= */

/* The inline "MENU" expander can't fit beside the logo below desktop
   widths; the sidebar drawer carries the same links. */
@media (max-width: 991px) {
  .nav-links,
  .expand-menu-btn { display: none; }
}

/* Comfortable tap targets on the header controls */
.menu-toggle-btn { min-width: 44px; min-height: 44px; }
.close-sidebar { min-width: 44px; min-height: 44px; }

@media (max-width: 600px) {
  .navbar { padding: 0 16px; }
  .navbar .logo img { height: 40px; width: auto; }
  .sidebar-offcanvas { width: min(340px, 86vw); padding: 1.5rem 1.25rem; }
}

/* ----- Home: hero ----- */
@media (max-width: 600px) {
  .hero-chapter { margin-bottom: 1.4rem; gap: 10px; }
  .hero-chapter-line { width: 24px; }
  .hero-chapter-badge { font-size: 10.5px; letter-spacing: 2px; padding: 4px 12px; }
  .hero-slide-content h1 { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }
  .hero-sub { font-size: 0.95rem; align-items: flex-start; }
  .hero-sub::before { margin-top: 0.8em; flex-shrink: 0; }
  .hero-scroll-arrow { display: none; }
  .hero-down-hint { bottom: 96px; font-size: 11px; }
  .arr-down span { width: 14px; height: 14px; border-right-width: 4px; border-bottom-width: 4px; }
  .dot-label { font-size: 10px; }
  .hero-deco-num { display: none; }
}

/* ----- Home: stats bar (padding is set inline in stats.php) ----- */
@media (max-width: 900px) {
  .stats-bar { padding: 2.5rem 1.5rem !important; }
  .stat-label { font-size: 0.72rem; }
}

/* ----- Home: mission (absolutely positioned quote card) ----- */
@media (max-width: 900px) {
  .mission-visual { height: auto; }
  .mission-card.large { position: relative; width: 100%; height: auto; padding: 2rem 1.6rem; }
  .mission-card.large blockquote { font-size: 1.15rem; }
  .pull-quote { padding-left: 1.2rem; margin: 2rem 0; }
}

/* ----- Home: ESG pillars sit in a non-wrapping .d-flex row ----- */
@media (max-width: 900px) {
  .esg-pillars > .d-flex { flex-direction: column; }
  .esg-forest-card { padding: 1.8rem 1.4rem; }
}

/* ----- Home: news + preview cards ----- */
@media (max-width: 900px) {
  .news-card { padding: 1.8rem 1.4rem; }
  .news-card-image { margin: -1.8rem -1.4rem 1.2rem; }
  .news-card-tag, .news-date { font-size: 0.7rem; }
  .news-read-link { font-size: 0.78rem; padding: 0.5rem 0; }
  .preview-card { padding: 28px 22px; }
}
@media (max-width: 767px) {
  .preview-card-large { flex-direction: column; align-items: flex-start; gap: 1.2rem; min-height: 0; }
  .preview-card h3 { font-size: 1.35rem; }
  .preview-icon { width: 56px; height: 56px; font-size: 20px; }
}
/* "Read →" was cream (#E9F39E) on the white card; hover state is unchanged */
.news-card .news-read-link { color: var(--roha-healing-teal); }

/* ----- Home: newsletter (input's intrinsic width pushed the button off-screen) ----- */
.newsletter-form input { min-width: 0; }
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; gap: 0.6rem; }
  .newsletter-form input { border-right: 1px solid rgba(255,255,255,0.22); }
  .newsletter-form button { width: 100%; padding: 1rem; }
}

/* ----- Section eyebrows: keep them legible on small screens ----- */
@media (max-width: 600px) {
  .section-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; }
  .chapter-break { padding: 2.5rem 1.6rem; }
}

/* ----- Footer: brand full width, link columns side by side ----- */
@media (max-width: 560px) {
  footer { padding: 2.5rem 1.25rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-col ul li { margin-bottom: 0.25rem; }
  .footer-col ul li a { display: inline-block; padding: 0.35rem 0; }
  .footer-social-link { width: 40px; height: 40px; }
  .footer-col h4 { font-size: 0.7rem; }
  .footer-bottom { font-size: 0.75rem; }
}