@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
    
  OPEX Management Consultancy Service

	About:  Empowering students, professionals, and organizations through Lean, Risk, and Continuity—delivered via training, advisory, and strategic execution.

	We’re a principle-led management consultancy specializing in Lean Six Sigma, Business Continuity, and Integrated Risk Solutions—delivered through structured training, strategic implementation, and value-driven advisory.

	Whether you're a student, professional, or enterprise leader, our programs foster advancement through measurable results, practical application, and transformation-ready thinking.

	From certification training and feasibility analysis to safety-aligned optimization and technical strategy—we equip learners and leaders to navigate complexity with confidence and purpose.
	
	Author: Ricardo Pablo Rabang. Principal Consultant, ricardo.rabang@opex.ph

	Developer: Cross-Functional Advisor | Strategic Design & Technical Oversight, tech@opex.ph

	opex.css:  Base Stylesheet

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

:root {
/* ─────────────Primary Colors ───────────── */
  --oxford-blue: 0, 33, 71;           /* --oxford-blue: #002147; */
  --cadmium-green: 0, 107, 60;        /* --cadmium-green: #006B3C; */

/* ─────────────Overlay Greens ───────────── */
  --cadmium-green-80: 26, 128, 80;    /* --cadmium-green-80: #1A8050; */
  --cadmium-green-60: 51, 149, 100;   /* --cadmium-green-60: #339564; */
  --cadmium-green-40: 77, 170, 120;   /* --cadmium-green-40: #4DAA78; */

  --mint-green: 152, 255, 152;        /* --mint-green: #98FF98; */
  --pistachio: 168, 198, 134;         /* --pistachio: #A8C686; */
  --sage: 178, 172, 136;              /* --sage: #B2AC88; */
  --celadon: 172, 225, 175;           /* --celadon: #ACE1AF; */
  --seafoam-green: 159, 226, 191;     /* --seafoam-green: #9FE2BF; */
  --chartreuse-tint: 191, 255, 0;     /* --chartreuse-tint: #BFFF00; */

  /* ─────────────High Contrasts with font colors over Oxford Blue ───────────── */
  --lilac-soft: 241, 233, 255;        /* --lilac-soft: #F1E9FF */
  --lilac-rich: 200, 162, 200;        /* --lilac-rich: #C8A2C8; */
  --dusty-lilac: 170, 140, 190;        /* --dusty-lilac: #AA8CBE */
  --classic-gold: 255, 215, 0;        /* --classic-gold: #FFD700; */
  --amber-glow: 248, 183, 85;     /* --amber-glow: #f8b755; */
  --legacy-linen: 245, 230, 208;   /* --legacy-linen: #F5E6D0; */
  --ivory-blush:  255, 240, 220;	    /* --ivory-blush: #FFF0DC; */
  --ivory: 255, 255, 240;             /* --ivory: #FFFFF0; */
  --pearl-cream:  255, 245, 230;	    /* --pearl-cream: #FFF5E6; */
  --soft-gold-mist:  255, 238, 210;	    /* --soft-gold-mist: #FFEED2; */
  --champagne: 247, 231, 206;         /* --champagne: #F7E7CE; */
  --luminous-champagne:  255, 235, 215; /* --luminous-champagne: #FFEBD7; */
  --pale-rose: 250, 218, 221;         /* --pale-rose: #FADADD; */
  --porcelain-pink: 255, 245, 250;         /* --pale-rose: #FFF5FA; */
  --moonstone-gray: 206, 210, 210;    /* --moonstone-gray: #CED2D2; */
  --muted-rosewood: 180, 110, 120; /* --muted-rosewood:	#B46E78	; */
  --antique-coral: 210, 120, 100; /* --antique-coral:	#D27864	; */
  --slate-lavender: 150, 160, 190; /* --slate-lavender:	#96A0BE	; */
  --burnished-clay: 190, 130, 100; /* --burnished-clay:	#BE8264	; */
  

/* ───────────────────────────── Shadow Tones ───────────────────────────── */
  --charcoal-core: 51, 51, 51;            /* --charcoal-core: #333333; */
  --graphite-veil: 68, 68, 68;            /* --graphite-veil: #444444; */
  --slate-murmur: 102, 102, 102;          /* --slate-murmur: #666666; */
  --headline-rest: 72, 78, 85;            /* --headline-rest: #484E55; // dusk tone before brilliance */

/* ───────────────────────────── Accent Colors ───────────────────────────── */
  --soft-gold: 255, 224, 102;         /* --soft-gold: #FFE066; */
  --golden-haze: 250, 230, 160;         /* --golden-haze: #FAE6A0; */
  --butter-gleam: 245, 225, 140;        /* --butter-gleam: #F5E18C; */
  --sunlit-cream: 240, 220, 130;        /* --sunlit-cream: #F0DC82; */
  --champagne-gold: 235, 215, 120;      /* --champagne-gold: #EBD778; */
  --honey-veil: 230, 210, 110;          /* --honey-veil: #E6D26E; */
  --azure-radiance: 0, 123, 255;      /* --azure-radiance: #007BFF; */
  --sky-blue-crayola: 121, 172, 217;  /* --sky-blue-crayola: #79ACD9; */

/* ────────────────── Soft Presence Tier — Anti-Flashy Whites ────────────────── */
--anti-flash-white: 243, 244, 246;   /* #F3F4F6 — Anti-Flash White
  Emotional tone: Crisp, cool, and slightly clinical.
  Ideal use case: High-contrast text, utility UI elements, minimalist surfaces.
  Legacy intent: A precision white—engineered for clarity, but softened in this tier to avoid glare.
*/

--ghost-white:    248, 248, 255;   /* #F8F8FF — Ghost White
  Emotional tone: Ethereal, cool, and distant.
  Ideal use case: Hover states, subtle accents, frosted overlays.
  Legacy intent: A breath of clarity—used sparingly to evoke lightness without glare.
*/

--white-smoke:    245, 245, 245;   /* #F5F5F5 — White Smoke
  Emotional tone: Neutral, modern, and quiet.
  Ideal use case: Backgrounds, card surfaces, border contrast.
  Legacy intent: A soft canvas—invites content without competing for attention.
*/

--isabelline:     244, 240, 236;   /* #F4F0EC — Isabelline
  Emotional tone: Warm, vintage, and comforting.
  Ideal use case: Typography on dark backgrounds, muted highlights.
  Legacy intent: A whisper of parchment—evokes heritage and softness.
*/

--alabaster:      242, 240, 230;   /* #F2F0E6 — Alabaster
  Emotional tone: Earthy, grounded, and organic.
  Ideal use case: Section dividers, quiet callouts, soft shadows.
  Legacy intent: A mineral calm—anchors design with natural grace.
*/

--soft-white:     240, 240, 240;   /* #F0F0F0 — Cultured
  Emotional tone: Refined, versatile, and balanced.
  Ideal use case: Default text on deep backgrounds, layout scaffolding.
  Legacy intent: Your neutral baseline—built for clarity, tuned for resonance.
*/

/* ────────────────── Soft Presence Tier — Reflective Overlays ────────────────── */
--iris-deep: 93, 52, 155;           /* --iris-deep: #5D349B; */
--iris-bold: 93, 63, 211;   /* #5D3FD3 — Iris Bold
  Emotional tone: Confident, luminous, and forward-looking.
  Ideal use case: Accent gradients, call-to-action highlights, expressive UI moments.
  Legacy intent: A radiant violet—evokes clarity and momentum, bridging softness and strength.
*/
--iris-bold-40: 160, 140, 230;   /* --iris-bold-40: #A08CE6; Softer iris tone */
--iris-bold-70: 126, 102, 220;   /* --iris-bold-70: #7E66DC; Mid iris tone */

--periwinkle-overlay: 176, 179, 228;   /* #B0B3E4 — Periwinkle Overlay
  Emotional tone: Serene, luminous, quietly optimistic.
  Ideal use case: Tooltip backgrounds, onboarding overlays, soft-focus UI accents.
  Legacy intent: A tonal bridge—carrying lilac’s softness toward oxford blue’s clarity, designed to evoke calm and gentle forward motion.
*/

--muted-plum-overlay: 102, 78, 111;   /* #664E6F — Muted Plum Overlay
  Emotional tone: Reflective, intimate, dusk-like.
  Ideal use case: Modal overlays, introspective CTAs, poetic annotation layers.
  Legacy intent: A contemplative veil—echoing oxford blue’s gravity while threading warmth and mystery into lilac’s softness.
*/

 --midnight-lavender-overlay: 72, 61, 139;   /* #483D8B — Midnight Lavender Overlay
  Emotional tone: Enigmatic, celestial, contemplative.
  Ideal use case: Hero overlays, footer gradients, legacy-toned callouts.
  Legacy intent: A twilight bridge—carrying oxford blue’s depth into lilac’s dreamspace, evoking quiet awe and cosmic resonance.
*/

 --ash-mauve-overlay: 153, 138, 170;   /* #998AAA — Ash Mauve Overlay
  Emotional tone: Gentle, wistful, archival.
  Ideal use case: Annotation highlights, semantic shadows, soft-focus cards.
  Legacy intent: A softened echo—lilac’s memory refracted through oxford blue’s lens, designed for emotional clarity and legacy annotation.
*/

/* ───────────────────────────── Status Colors ─────────────────────────────  */
--error-red: 192, 57, 43;           /* --error-red: #c0392b; */
--warning-yellow: 243, 156, 18;     /* --warning-yellow: #f39c12; */
--success-green: 9, 121, 105;       /* --success-green: #097969; */


/* ─ Monochrome Accents (subtle UI elements, contrast layering, and accessibility)─ */
  --graphite-mist: 110, 110, 110;     /* --graphite-mist: #6E6E6E; */
  --iron-focus: 60, 60, 60;           /* --iron-focus: #3C3C3C; */
  --white-smoke: 245, 245, 245;       /* --white-smoke: #F5F5F5; */
  --light-gray: 204, 204, 204;        /* --light-gray: #cccccc; */
  --absolute-black: 0, 0, 0; /* --absolute-black: 0, 0%, 0%; */
  --absolute-white: 255, 255, 255; /*  --absolute-white: 0, 0%, 100%; */
 
/* ─── Utility & Layout (spacing, padding, and structural rhythm) ─── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --title-spacing: 0.2rem;
  --container-padding-3: 0.5rem;
  --container-padding-2: 0.8rem;
  --container-padding: 1rem;
  --card-radius: 0.5rem;
}

/* ─────────────────────────────  General & Utility Styles ───────────────────────── */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: rgb(var(--lilac-soft));
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.font-smooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bg-lilac-soft {
  background-color: rgb(var(--lilac-soft));
}

.bg-oxford-blue {
  background-color: rgb(var(--oxford-blue));
}

.no-scroll {
  overflow: hidden;
}

/* ─────────────────────────────  Header Styles ───────────────────────── */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 50;
  background-color: rgb(var(--lilac-soft));
  color: rgb(var(--oxford-blue));
  box-shadow:
    /* Deep ambient shadow */
    0 10px 15px -3px rgba(var(--absolute-black), 0.1),
    /* Hover edge shadow */
    0 4px 6px -4px rgba(var(--absolute-black), 0.1);
}

.header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.01rem var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ───────────────────────────── Scroll-to-Top Button ───────────────────────── */ 
.grecaptcha-badge {
  bottom: 90px !important;
  z-index: 1000; /* optional, to ensure visibility */
}

#scroll-to-topbtn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

#scroll-to-topbtn.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity 0.2s ease;
  /* pointer-events: none; */
}

.scroll-img.default {
  opacity: 1;
}

.scroll-img.hover {
  opacity: 0;
}

#scroll-to-topbtn:hover .scroll-img.default {
  opacity: 0;
}

#scroll-to-topbtn:hover .scroll-img.hover {
  opacity: 1;
}

/* ───────────────────────────── Logo Styles ───────────────────────── */

.logo-container {
  position: relative;
  width: 180px;
  height: 65px;
  margin: 0.2rem 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
}

/* revised */
.logo-container .logo-hover {
  opacity: 0;
  transform: scaleX(1);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  /* transform-origin: center; /* or left/right depending on visual intent */
  transform-origin: left; /* or left/right depending on visual intent */
}

.logo-container:hover .logo-hover {
  opacity: 1;
  /* 
  transform: scaleX(0.85);
  */
  transform: scaleX(0.75);
  filter: brightness(1.05);
}

.logo-container:hover .logo-main {
  opacity: 0;
}

/* ───────────────────────────── Hamburger Button Styles ───────────────────────── */
.hamburger-button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-button:hover .dot {
  background-color: rgb(var(--oxford-blue));
}

.hamburger-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}

.dot {
  height: 0.35rem;
  width: 0.35rem;
  background-color: rgb(var(--cadmium-green));
  border-radius: 9999px;
  transition: background-color 0.2s ease-in-out;
}

/* ─────────────────────────────  Sliding Menu Styles ───────────────────────── */
.menu-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 16rem;
  background-color: rgb(var(--lilac-soft));
  color: rgb(var(--oxford-blue));
  box-shadow: 0 25px 50px -12px rgba(var(--absolute-black), 0.25);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 60;
}

.menu-nav.is-open {
  transform: translateX(0);
}

.menu-close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgb(var(--graphite-mist));
  font-size: 1.5rem;
}

.menu-close-button:hover {
  color: rgb(var(--iron-focus));
}

.menu-list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  padding: 1rem var(--container-padding);
  padding-top: 0.5rem;
  gap: 0.5rem;
}

.menu-item {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: rgb(var(--cadmium-green));
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  font-style: italic;
  font-family: 'Lora', serif;
}

.menu-item:hover {
  color: rgb(var(--oxford-blue));
}

.menu-item.active {
  color: rgb(var(--oxford-blue));
}

/* ───────────────────────────── Main Content & Section Styles ───────────────────────── */
.section-content {
  padding: 1.25rem var(--container-padding) 2rem;
}

.main-content {
  max-width: 1280px;
  margin: 0 auto;
  color: rgb(var(--oxford-blue));
  line-height: 1.625;
}

.section-1 {
  background-color: rgb(var(--oxford-blue));
  color: rgb(var(--absolute-white));
}

.section-2 {
  background-color: rgb(var(--lilac-soft));
  color: rgb(var(--oxford-blue));
}

.section-3 {
  /* background-color: rgb(var(--periwinkle-overlay)); */
  background-color: rgb(var(--ghost-white)); 
}

.main-head {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  margin-bottom: 0;
  line-height: 1.2;
  transform: scale(0.90);  

  /* Original
  opacity: 0.7;
  color: rgb(var(--charcoal-core)); 
  color: rgb(var(--soft-gold));
  */

  opacity: 0.70;
  color: rgb(var(--headline-rest)); 
  transition: opacity 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
}

.main-head.active {
  opacity: 1;
  /* Oirginal
  color: rgb(var(--amber-glow));
  color: rgb(var(--classic-gold));
   */
  color: rgb(var(--amber-glow));
  font-weight: 700;
  transform: scale(1.0);
}

.main-sub-head {
  font-family: 'Lora', serif;
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  font-weight: normal;
  margin-bottom: 1.5rem;
  /* 
  color: rgb(var(--anti-flash-white)); 
  color: rgb(var(--soft-white));
  color: rgb(var(--butter-gleam));
  */
  color: rgb(var(--butter-gleam));
  font-style: italic;
  line-height: 1.25;
}

/* ───────────────────────────── Button Styles ───────────────────────── */
.standard-button {
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  color: rgb(var(--white-smoke));
  background-color: rgb(var(--azure-radiance));
  padding: 0.75rem 1.5rem;
  display: inline-block;
  text-decoration: none;
  width: 60%;
  box-sizing: border-box;
  margin-top: 40px;
  margin-bottom: 10px;
  border-radius: 0.5rem;
  text-align: center;
  vertical-align: middle;
  line-height: normal;
  transition: background-color 0.3s ease;
}

.standard-button:hover {
  background-color: rgb(var(--sky-blue-crayola));
  color: rgb(var(--absolute-black));
  font-weight: 500;
}

#assessment-button {
  /* In alignment with main-head and main-sub-head,
     this button steps forward—centered, intentional,
     inviting the user to begin their journey.
     A quiet symmetry, a gesture of welcome.
     Legacy lives in the placement of every pixel. */
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ───────────────────────────── Carousel Styles ───────────────────────── */
.section-1-grid {
  display: flex;
  flex-direction: column; /* updated from column-reverse */
  gap: 1rem;
  align-items: center;
  padding: 1rem var(--container-padding);
  position: relative;
}

.carousel-selector-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.carousel-selector {
  display: block;
  margin: 0 0 0.75rem auto;
  padding: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  /* original
  color: rgb(var(--classic-gold));
  */
  color: rgb(var(--amber-glow)); 
  background-color: transparent;
  border: 1px solid rgb(var(--lilac-soft));
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-selector:hover,
.carousel-selector:focus {
  background-color: rgb(var(--lilac-soft));
  color: rgb(var(--oxford-blue));
  outline: none;
}

.carousel-container {
  width: 90%;
  height: 80vh;
  overflow: hidden;
  position: relative;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(var(--absolute-black), 0.1);
  margin-left: auto;
}

.carousel-slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(var(--azure-radiance));
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 1.5rem;
  z-index: 10;
}

.carousel-nav-btn:hover {
  background-color: rgb(var(--sky-blue-crayola));
}

.carousel-nav-btn.prev {
  left: 1rem;
}

.carousel-nav-btn.next {
  right: 1rem;
}

.arrow {
  color: rgb(var(--white-smoke));
}

.arrow:hover {
  color: rgb(var(--absolute-black));
}

.carousel-indicators {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.indicator-dot {
  background-color: rgb(var(--oxford-blue));
  border: 1px solid rgb(var(--anti-flash-white));
  border-radius: 50%;
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  margin: 0 1px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  outline: none;
  display: inline-block;
  vertical-align: middle;
}

.indicator-dot:hover {
  background-color: rgb(var(--cadmium-green));
}

.indicator-dot.active {
  /* original
  background-color: rgb(var(--classic-gold));
  */
  background-color: rgb(var(--amber-glow));  
}

.indicator-dot:focus-visible {
  /* original
  box-shadow: 0 0 0 2px rgb(var(--classic-gold));
  */
  box-shadow: 0 0 0 2px rgb(var(--amber-glow));
}

.carousel-caption-wrapper {
  position: absolute;
  bottom: 48px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  z-index: 10;
}

.caption-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-caption {
  max-width: 600px;
  width: 90%;
  padding: 4rem;
  background-color: rgba(var(--oxford-blue), 0.8);
  box-shadow: 0 10px 15px -3px rgba(var(--absolute-black), 0.1),
              0 4px 6px -4px rgba(var(--absolute-black), 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel-item.active .carousel-caption {
  opacity: 1;
  visibility: visible;
}

.caption-headline {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
  text-align: center;
  /*
  color: rgb(var(--classic-gold));
  */
  color: rgb(var(--amber-glow));
}

.caption-paragraph {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  padding-bottom: 12px;
  color: rgb(var(--anti-flash-white));
  text-align: center;
}

.caption-toggle-btn {
  font-size: 0.7rem;
  color: rgb(var(--white-smoke));
  background-color: rgb(var(--azure-radiance));
  border: none;
  border-radius: 0.5rem;
  margin-top: 6px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
  z-index: 20;
}

.caption-toggle-btn:hover {
  background-color: rgb(var(--sky-blue-crayola));
  color: rgb(var(--absolute-black));
}

.caption-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ───────────────────────────── Carousel Indicator Previews ───────────────────────── */
.carousel-indicator-preview {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  background-color: rgb(var(--lilac-soft));
  color: rgb(var(--absolute-white));
  padding: 0.5rem 1rem 3rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(var(--absolute-black), 0.2);
  display: block;
  text-align: center;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
}

.carousel-indicator-preview img {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.carousel-indicator-thumb {
  height: auto;
  max-width: 120px;
  width: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
  display: block;
  margin: 0 auto;
}

.carousel-indicator-title {
  color: rgb(var(--oxford-blue));
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  word-wrap: break-word;
  margin-block: 1rem;
  text-align: center;
}

.carousel-indicator-caption {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--cadmium-green));
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  text-align: left;
  overflow: visible;
  margin-top: 1rem;
  height: auto;
  max-height: auto;
}

/* ───────────────────────────── Consent Modal Styles ───────────────────────── */
#consent-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(var(--lilac-soft));
  z-index: 9999;
  padding: 1rem;
  border-top: 4px solid transparent;
  border-image: linear-gradient(to right, rgb(var(--cadmium-green)), rgb(var(--cadmium-green-40))) 1;
  border-image-repeat: stretch; /* Ensures gradient flows smoothly across the top border */
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(100%);
  opacity: 0;
}

#consent-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, rgb(var(--cadmium-green)), rgb(var(--cadmium-green-40)));
}

#consent-modal.visible {
  transform: translateY(0);
  opacity: 1;
}

.consent-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 95%;
  margin: 0 auto;
}

.consent-question {
  font-weight: 600;
  color: rgb(var(--oxford-blue));
  flex: 1 1 auto;
  margin-right: 1rem;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.consent-buttons {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
}

.consent-button {
  background-color: rgb(var(--azure-radiance));
  color: rgb(var(--white-smoke));
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin: 0.25rem;
  transition: transform 0.2s ease-in-out, background-color 0.3s ease;
}

.consent-button:hover,
.consent-button:focus {
  background-color: rgb(var(--sky-blue-crayola));
  color: rgb(var(--absolute-black));
  transform: scale(1.05);
  outline: none;
}

/* Classes for Analytics */  
.consent-note {
  font-size: 0.875rem;
  color: rgb(var(--oxford-blue));
  margin-top: 0.25rem;
  opacity: 0.85;
  list-style: none;
  padding-left: 0;
}

.consent-note li {
  margin-bottom: 0.25rem;
}

.no-scroll-consent {
  height: 100vh;
  overflow: hidden;
}

/* ───────────────────────────── Section & Footer Styles ───────────────────────── */
.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.25rem var(--container-padding);
}

.section-summary {
  background-color: rgb(var(--lilac-soft));
  padding: 0.25rem;
}

.section-divider {
  border: none;
  border-top: 1px solid rgb(var(--light-gray));
  margin-bottom: 0.5rem;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: flex-start;
}

.column-left {
  flex: 1;
  color: rgb(var(--cadmium-green));
  font-size: 1rem;
  font-weight: 500;
}

.column-right {
  flex: 2;
  font-size: 1rem;
}

.column-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.column-right li {
  margin: 0.5rem 0;
}

.column-right a {
  color: rgb(var(--oxford-blue));
  text-decoration: none;
  font-weight: 500;
  transition: font-weight 0.2s ease;
}

.column-right a:hover {
  font-weight: 600;
}

.footer-section {
  background-color: rgb(var(--oxford-blue));
  padding: 2rem var(--container-padding);
  text-align: center;
}

.footer-container {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-container img {
  max-width: 120px;
  height: auto;
}

.footer-container p,
.footer-container a {
  font-size: 0.875rem;
  color: rgb(var(--lilac-soft));
  margin: 0;
}

.footer-tagline {
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  font-family: 'Lora', serif;
  text-align: center;
}

.footer-business,
.footer-copyright {
  margin-bottom: 0.25rem;
  font-size: 0.5rem;
  line-height: 1.2;
  text-align: center;
}

.logo-over-blue {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  max-width: 160px;
}

.footer-links {
  line-height: 1.2;
  font-size: 1rem;
  font-weight: 500;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  /* original
  color: rgb(var(--soft-gold));
  */
  color: rgb(var(--amber-glow));
  font-weight: 600;
}

/* original
.footer-lastupdate {
  background: linear-gradient(
  90deg, 
  rgb(var(--cadmium-green)) 0%, 
  rgb(var(--cadmium-green)) 60%, 
  rgb(var(--light-gray)) 100%);
  padding: 0.5em 1em;
  font-size: 0.85em;
}

.footer-lastupdate {
	background: #006B3C;
  padding: 0.5em 1em;
  font-size: 0.85em;
}
*/

.footer-lastupdate {
  background: linear-gradient(to right, rgb(var(--cadmium-green)), rgb(var(--cadmium-green-40))); /* Gradient flows like legacy—deep to clear */
  padding: 0.5em 1em;
  font-size: 0.85em;
}

.footer-lastupdate-container {
  text-align: center;
}

.footer-lastupdate-text {
  color: rgb(var(--lilac-soft));
}

.footer-link.muted, .muted {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
  text-decoration: none;
}

.menu-link.disabled {
  pointer-events: none;
  cursor: default;
}

.footer-logo-disabled {
  pointer-events: none;
  cursor: default;
 } 

 /* ─────────────────────────────  card.opex.ph (for download-vcf.php)  ───────────────────────── */
 .error-message {
  color: #f44336;
  background: #fff;
  padding: 1em;
  border-radius: 6px;
  font-weight: 500;
  max-width: 480px;
  margin: 1em auto;
  text-align: center;
}