/* Archipelago Landing — Bootstrap-first CSS
   Simplified: use a single solid background color across the landing.
   Keep component utilities (badges, spacing) minimal and neutral. */

/* (removed unused .badge-soft to simplify code) */

/* Brand-accent gradient for highlighted word in hero */
.text-brand-gradient {
  background-image: linear-gradient(90deg, #0d6efd 0%, #20c997 50%, #0d6efd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Safari/WebKit */
  -webkit-text-fill-color: transparent;
}

/* Fallback: if background-clip: text isn't supported, use normal text color */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-brand-gradient { color: inherit !important; }
}

/* Single solid background color token (can be overridden in :root) */
:root { --landing-bg: #ffffff; }

/* Apply the solid background globally on landing pages */
body { background-color: var(--landing-bg); }

/* (removed unused .hero-gradient-bg and .solid-page-bg wrappers) */

/* Light gradient page background — tasteful, subtle texture */
.page-aurora-bg {
  /* Base color fallback */
  background-color: var(--landing-bg);
  /* Layered background: very subtle noise + gentle radial accents + soft vertical gradient */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(1200px 800px at -10% -10%, rgba(13,110,253,0.08), transparent 60%),
    radial-gradient(1000px 700px at 110% 0%, rgba(32,201,151,0.08), transparent 55%),
    radial-gradient(800px 600px at 50% 120%, rgba(111,66,193,0.10), transparent 50%),
    linear-gradient(180deg, #f9fbff 0%, #ffffff 60%, #f7faf9 100%);
  background-size: 160px 160px, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll;
  background-blend-mode: multiply, normal, normal, normal, normal;
}

/* (removed unused .bg-ocean-highlight) */

/* (removed unused .hero-surface helpers) */

@media (max-width: 767.98px) {
  /* No special handling needed when pseudo-elements are disabled */
}

/* No motion-based effects used for the gradient text; no reduced-motion override needed */

/* Fallback for Bootstrap < 5.3 where bg-light-subtle may not exist */
.bg-light-subtle { background-color: #f8f9fa !important; }

/* (removed unused .hero-surface positioning) */

/* (removed unused .bg-ocean and .bg-ocean-alt utilities) */

/* (removed unused .bg-subscribe-solid) */

/* ——— Landing page spacing utilities ———
   Use .lp-stack on a wrapper to ensure consistent vertical rhythm between
   stacked sections or blocks, regardless of each section's internal padding. */
.lp-stack > * + * {
  margin-top: var(--lp-stack-gap, 2rem);
}

@media (min-width: 768px) {
  .lp-stack > * + * { margin-top: var(--lp-stack-gap-md, 3rem); }
}

@media (min-width: 1200px) {
  .lp-stack > * + * { margin-top: var(--lp-stack-gap-lg, 4rem); }
}

/* ——— Footer ——— */
.landing-footer {
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* (removed unused .landing-footer .footer-logo) */

/* Muted link style consistent with subtle theme */
.link-muted {
  color: rgba(11,34,57,0.7);
  text-decoration: none;
}

.link-muted:hover,
.link-muted:focus {
  color: rgba(13,110,253,0.95);
  text-decoration: underline;
}

/* ——— Enhanced, tasteful hero background ———
   Scoped to the hero section only so it won't leak elsewhere. Designed to
   look great with Bootstrap content dropped inside.
*/
.hero-aurora-bg {
  position: relative;
  overflow: hidden; /* crop the soft glows */
  border-radius: 1.25rem; /* soft card-like surface */
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-inline: clamp(1rem, 3vw, 2.5rem);

  /* Layered subtle gradients for depth */
  background:
    radial-gradient(1200px 600px at 20% -20%, rgba(13, 110, 253, 0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(32, 201, 151, 0.18), transparent 55%),
    radial-gradient(800px 400px at 50% 120%, rgba(111, 66, 193, 0.22), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);

  /* Subtle inner border to separate from page */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.06),
    0 10px 30px rgba(0,0,0,0.06);
}

/* Fine grain texture using an embedded SVG noise (very subtle) */
.hero-aurora-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* ——— About section reveal on scroll ——— */
/* Only apply initial hidden state when JS is enabled for no-JS accessibility */
.js .about-reveal .about-col-left,
.js .about-reveal .about-col-right {
  opacity: 0;
  will-change: transform, opacity;
}

.js .about-reveal .about-col-left {
  transform: translateX(-28px);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
}

.js .about-reveal .about-col-right {
  transform: translateX(28px);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 80ms, opacity 700ms ease 80ms; /* slight stagger */
}

.js .about-reveal.in-view .about-col-left,
.js .about-reveal.in-view .about-col-right {
  opacity: 1;
  transform: none;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .js .about-reveal .about-col-left,
  .js .about-reveal .about-col-right {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ——— Quotes marquee section ——— */
/* Unified, Bootstrap-friendly styles (consolidated to avoid duplicates) */
/* Subtle band background (kept only if used via an external wrapper) */
/* .quotes-band intentionally removed if unused in templates */

.quote-marquee {
  position: relative;
  overflow: hidden;
  /* Edge fading for a smoother scroll reveal */
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.quote-track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
  width: max-content; /* allow continuous width */
  animation: quoteScroll 40s linear infinite;
}

@keyframes quoteScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual quote cards */
.quote-card {
  flex: 0 0 auto;
  min-width: clamp(240px, 28vw, 520px);
  max-width: 520px;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-radius: .875rem;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.quote-card blockquote {
  margin: 0;
  /* retain refined rhythm from earlier variant */
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.4;
  color: #0b2239;
}

.quote-card figcaption { color: #6c757d; }

/* Subtle lift on hover for desktops */
.quote-card:hover {
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.06),
    0 12px 30px rgba(0,0,0,0.08);
}

/* Pause on hover/focus within for usability */
.quote-marquee:hover .quote-track,
.quote-marquee:focus-within .quote-track { animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .quote-track { animation: none; }
}

/* Gentle light sweep for a living surface (reduced-motion safe) */
.hero-aurora-bg::before {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 140%; height: 220%;
  background: radial-gradient(40% 20% at 20% 50%, rgba(255,255,255,0.6), transparent 60%);
  transform: translateX(-10%);
  animation: heroSweep 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroSweep {
  0%   { transform: translateX(-10%); opacity: .65; }
  100% { transform: translateX(10%);  opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora-bg::before { animation: none; opacity: .4; }
}

/* Ensure text remains legible on top of gradients */
.hero-aurora-bg .display-5,
.hero-aurora-bg .display-6,
.hero-aurora-bg h1,
.hero-aurora-bg h2,
.hero-aurora-bg p,
.hero-aurora-bg .text-muted,
.hero-aurora-bg .lead {
  color: #0b2239; /* deep slate for contrast */
}

/* Keep brand gradient text vibrant on the new surface */
.hero-aurora-bg .text-brand-gradient { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35)); }

/* ——— About section polish ———
   A calmer, lighter surface than the hero. Scoped to About only. */
.about-reef-bg {
  position: relative;
  border-radius: 1rem;
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(700px 280px at 0% -10%, rgba(13,110,253,0.08), transparent 60%),
    radial-gradient(600px 260px at 110% 0%, rgba(32,201,151,0.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),
    0 6px 20px rgba(0,0,0,0.05);
}

.about-reef-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Checklist bullet — subtle, accessible */
.about-check {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  color: #0d6efd;
  background: radial-gradient(80% 80% at 30% 20%, rgba(13,110,253,0.15), rgba(13,110,253,0.05)) , #ffffff;
  border: 1px solid rgba(13,110,253,0.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* Quote styling inside About */
.about-reef-bg blockquote {
  position: relative;
  border-left: 4px solid rgba(13,110,253,0.3);
}

.about-reef-bg blockquote::before {
  content: "\201C"; /* Left double quotation mark */
  position: absolute;
  left: -0.6rem;
  top: -0.8rem;
  font-size: 2.5rem;
  color: rgba(13,110,253,0.25);
  line-height: 1;
}

.about-reef-bg .lead,
.about-reef-bg .text-secondary,
.about-reef-bg h2,
.about-reef-bg .blockquote-footer {
  color: #0b2239;
}

/* (duplicate rules consolidated above) */

/* ——— Contact section redesign — visually distinct from About ——— */
.contact-cove-bg {
  position: relative;
  overflow: hidden; /* allow accent rail */
  border-radius: 0; /* flat band look (About uses rounded/card) */
  padding-block: clamp(2.25rem, 4vw, 4.5rem);
  /* Ensure comfortable space from the left accent rail and viewport edges */
  padding-inline: clamp(1rem, 3vw, 2rem);
  /* Flat, airy tint different from About's card-like surface */
  background:
    linear-gradient(180deg, #f1f6ff 0%, #f4fffb 100%);
  box-shadow: none;
}

/* Soft noise, extremely subtle to avoid card-like feel */
.contact-cove-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

/* Accent rail on the left to differentiate section rhythm */
.contact-cove-bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(6px, 0.8vw, 10px);
  background: linear-gradient(180deg, rgba(13,110,253,0.6), rgba(32,201,151,0.6));
}

/* Contact form refinements */
.contact-form .form-control,
.contact-form .form-select,
.contact-form .form-check-input {
  border-color: rgba(0,0,0,0.15);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: rgba(13,110,253,0.45);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,0.15);
}

.contact-form .form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(13,110,253,0.15);
  border-color: rgba(13,110,253,0.45);
}

.contact-cove-bg .text-secondary,
.contact-cove-bg h2,
.contact-cove-bg .form-text {
  color: #0b2239;
}

/* Ensure the white form card stands out on the tinted band */
.contact-form {
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
}

@media (min-width: 992px) {
  /* Give the band a bit more breathing room on wide screens */
  .contact-cove-bg { padding-block: 5rem; }
}