/* =========================================================
   SERNA TECHNICAL CENTER — PREMIUM PLUMBING VISUAL SYSTEM
   Original 3D decorative assets, global plumbing backdrop,
   readable content surfaces, and strategic visual placement.
   ========================================================= */

:root {
  --premium-surface: rgba(255, 252, 246, .88);
  --premium-surface-strong: rgba(255, 252, 246, .96);
  --premium-dark: rgba(5, 27, 45, .92);
  --premium-blue: rgba(8, 101, 154, .90);
  --premium-border: rgba(7, 27, 45, .10);
  --premium-shadow: 0 28px 70px rgba(7, 27, 45, .14);
  --premium-soft-shadow: 0 18px 44px rgba(7, 27, 45, .10);
}

html {
  background: #f6f1e7;
}

body {
  min-height: 100%;
  position: relative;
  background: #f6f1e7 !important;
  overflow-x: hidden;
}

/* One consistent background behind the entire site. */
body::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(248, 244, 236, .48), rgba(248, 244, 236, .58)),
    url('../assets/images/site-background-premium.webp') center top / cover no-repeat !important;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 14%, transparent 86%, rgba(255,255,255,.08));
}

/*body > * {
  position: relative;
  z-index: 1;
}*/

/* Header */
.site-header {
  background: rgba(248, 244, 236, .94) !important;
  border-bottom: 1px solid rgba(7, 27, 45, .08) !important;
  backdrop-filter: blur(20px) saturate(1.08);
}

.site-header.is-scrolled {
  box-shadow: 0 16px 42px rgba(7, 27, 45, .11) !important;
}

.brand img {
  filter: drop-shadow(0 8px 14px rgba(7,27,45,.12));
}

.nav-link,
.dropdown-toggle {
  font-weight: 700;
}

.nav-cta {
  box-shadow: 0 16px 30px rgba(11,132,210,.20);
}

main {
  background: transparent !important;
}

/* Clear previous section background images/pseudo-elements. */
.hero,
.subhero,
.section,
.section-cream,
.section-paper,
.section-navy,
.section-blue,
[class*="pipe-section"],
[class*="subpage-pipe"] {
  background-image: none !important;
}

.hero::before,
.hero::after,
.section::before,
.section::after,
.subhero::before,
.subhero::after,
[class*="pipe-section"]::before,
[class*="pipe-section"]::after,
[class*="subpage-pipe"]::before,
[class*="subpage-pipe"]::after {
  background-image: none !important;
}

/* Section surfaces let the global background show through. */
.hero {
  background: rgba(248, 244, 236, .30) !important;
}

.subhero,
.section-cream,
.section-paper,
.pipe-section-2,
.pipe-section-4,
.pipe-section-5,
.pipe-section-6,
.pipe-section-8,
.contact-details-section,
.tuition-details-section {
  background: rgba(248, 244, 236, .68) !important;
  backdrop-filter: blur(1.5px);
}

.section-navy,
.pipe-section-3 {
  background: linear-gradient(135deg, rgba(5,27,45,.94), rgba(9,49,75,.91)) !important;
}

.section-blue,
.pipe-section-7 {
  background: linear-gradient(135deg, rgba(8,77,122,.93), rgba(8,126,185,.89)) !important;
}

/* All decorative images */
.decor,
.subpage-decor,
.footer-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 24px 30px rgba(7,27,45,.18));
}

.section > .container,
.hero > .container,
.subhero > .container {
  position: relative;
  z-index: 3;
}

/* Hero */
.page-index .hero {
  min-height: 800px;
  isolation: isolate;
}

.page-index .hero-grid {
  min-height: 800px;
  padding-top: 82px;
  padding-bottom: 98px;
}

.page-index .hero-copy {
  max-width: 700px;
  padding: 34px 36px 38px;
  border: 1px solid rgba(7,27,45,.07);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,252,246,.88), rgba(255,252,246,.72));
  box-shadow: var(--premium-shadow);
  backdrop-filter: blur(8px);
}

.page-index .hero-copy > p {
  max-width: 620px;
}

.page-index .hero-meta {
  border-top: 0;
  gap: 12px;
}

.page-index .hero-meta div {
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(7,27,45,.08);
}

.page-index .hero-visual::before {
  background: linear-gradient(145deg, rgba(215,238,242,.94), rgba(191,225,235,.78)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.page-index .hero-photo {
  box-shadow: 0 38px 90px rgba(5,22,36,.25);
}

.page-index .stc-coin-embed {
  z-index: 8 !important;
}

.decor-hero-valve {
  width: clamp(150px, 15vw, 250px);
  left: -42px;
  bottom: 28px;
  transform: rotate(-7deg);
  opacity: .95;
}

/* Existing sections */
.decor-why {
  width: clamp(190px, 22vw, 340px);
  right: -70px;
  bottom: 12px;
  transform: rotate(5deg);
  opacity: .88;
}

.decor-program {
  width: clamp(180px, 20vw, 320px);
  right: -48px;
  top: 34px;
  transform: rotate(7deg);
  opacity: .74;
  mix-blend-mode: screen;
}

.decor-experience {
  width: clamp(170px, 19vw, 300px);
  left: -52px;
  bottom: -20px;
  transform: rotate(-6deg);
  opacity: .90;
}

.decor-admissions {
  width: clamp(180px, 20vw, 320px);
  right: -58px;
  top: 24px;
  transform: rotate(4deg);
  opacity: .84;
}

.decor-tuition {
  width: clamp(170px, 19vw, 300px);
  left: -54px;
  bottom: 0;
  transform: rotate(-5deg);
  opacity: .80;
}

.decor-support {
  width: clamp(170px, 19vw, 290px);
  right: -48px;
  bottom: -12px;
  transform: rotate(5deg);
  opacity: .72;
  mix-blend-mode: screen;
}

.decor-faq {
  width: clamp(160px, 18vw, 280px);
  left: -42px;
  top: 46px;
  transform: rotate(-5deg);
  opacity: .72;
}

/* Cards */
.editorial-card,
.feature,
.process,
.process-card,
.program-price-card,
.faq-item,
.article-card,
.form-card,
.side-nav,
.contact-panel,
.support-card,
.tag-box {
  border-color: var(--premium-border) !important;
  box-shadow: var(--premium-soft-shadow);
}

.editorial-card,
.feature,
.process,
.process-card,
.program-price-card,
.faq-item,
.article-card,
.form-card,
.side-nav {
  background: var(--premium-surface) !important;
  backdrop-filter: blur(8px);
}

.editorial-card:hover,
.feature:hover,
.process-card:hover,
.toolkit-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--premium-shadow);
}

.program-image,
.lab-photo {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--premium-shadow);
}

/* New lab showcase */
.section-lab-showcase {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(224,242,245,.84), rgba(248,244,236,.82)) !important;
}

.section-lab-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(47,199,215,.16), transparent 26%),
    radial-gradient(circle at 88% 76%, rgba(242,161,31,.12), transparent 24%);
  pointer-events: none;
}

.lab-heading {
  max-width: 870px;
  margin-bottom: 44px;
}

.lab-gallery {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: 330px 270px;
  gap: 22px;
}

.lab-photo,
.lab-stat {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}

.lab-photo-large {
  grid-row: 1 / 3;
}

.lab-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(5,27,45,.72));
}

.lab-photo-caption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #fff;
}

.lab-photo-caption strong,
.lab-photo-caption span {
  display: block;
}

.lab-photo-caption strong {
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.lab-photo-caption span {
  color: rgba(255,255,255,.78);
}

.lab-stat {
  padding: 30px;
  background: linear-gradient(145deg, rgba(7,27,45,.98), rgba(11,61,91,.96));
  color: #fff;
  box-shadow: var(--premium-shadow);
}

.lab-stat > span {
  font: 700 .74rem 'Space Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aqua);
}

.lab-stat strong {
  display: block;
  margin: 15px 0 12px;
  font: 700 1.6rem/1.2 'Fraunces', Georgia, serif;
}

.lab-stat p {
  color: rgba(255,255,255,.70);
}

.lab-stat .text-link {
  color: var(--orange);
}

.decor-lab-valve {
  width: clamp(170px, 20vw, 310px);
  right: -56px;
  top: 28px;
  transform: rotate(7deg);
  opacity: .82;
}

.decor-lab-sink {
  width: clamp(160px, 18vw, 280px);
  left: -56px;
  bottom: -24px;
  transform: rotate(-6deg);
  opacity: .70;
}

/* New toolkit section */
.section-toolkit {
  background: rgba(248,244,236,.72) !important;
  overflow: hidden;
}

.toolkit-heading {
  max-width: 880px;
  margin-bottom: 46px;
}

.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.toolkit-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 290px;
  padding: 26px;
  border: 1px solid var(--premium-border);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(239,248,250,.88));
  box-shadow: var(--premium-soft-shadow);
  transition: .35s ease;
}

.toolkit-card:nth-child(2),
.toolkit-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(9,49,75,.98), rgba(8,97,142,.94));
  color: #fff;
}

.toolkit-card img {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(7,27,45,.22));
}

.toolkit-card div > span {
  font: 700 .74rem 'Space Mono', monospace;
  letter-spacing: .14em;
  color: var(--coral);
}

.toolkit-card h3 {
  margin-top: 12px;
  font-size: 1.55rem;
}

.toolkit-card p {
  margin-bottom: 0;
}

.toolkit-card:nth-child(2) p,
.toolkit-card:nth-child(3) p {
  color: rgba(255,255,255,.70);
}

/* Subpages */
.subhero {
  position: relative;
  overflow: hidden;
  background: rgba(248,244,236,.70) !important;
  min-height: 510px;
  display: grid;
  align-items: center;
}

.subhero-grid {
  position: relative;
  z-index: 3;
}

.subhero .tag-box {
  background: rgba(7,27,45,.93) !important;
  box-shadow: var(--premium-shadow);
}

.subpage-decor-primary {
  width: clamp(240px, 29vw, 430px);
  right: -54px;
  bottom: -48px;
  transform: rotate(5deg);
  opacity: .86;
}

main .section .subpage-decor-secondary {
  width: clamp(190px, 23vw, 350px);
  left: -64px;
  bottom: -24px;
  transform: rotate(-6deg);
  opacity: .70;
}

.content-grid,
.form-card,
.article-card,
.contact-panel,
.side-nav {
  position: relative;
  z-index: 3;
}

/* Final CTA */
.final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #df5339, #f19b21) !important;
}

.final-cta::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -90px;
  width: 340px;
  height: 340px;
  background: url('../assets/decor/pipe-valve-3d.svg') center / contain no-repeat;
  opacity: .22;
  transform: rotate(8deg);
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 2;
}

/* Footer — always dark and readable */
.site-footer,
footer.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #061827, #0a2f49) !important;
  color: #fff !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 30%, rgba(47,199,215,.10), transparent 26%),
    radial-gradient(circle at 92% 70%, rgba(242,161,31,.08), transparent 25%);
  pointer-events: none;
}

.footer-decor-left {
  width: 260px;
  left: -88px;
  bottom: -58px;
  transform: rotate(-8deg);
  opacity: .34;
}

.footer-decor-right {
  width: 250px;
  right: -72px;
  top: 34px;
  transform: rotate(8deg);
  opacity: .28;
}

.site-footer .container,
.site-footer .footer-grid,
.site-footer .footer-bottom {
  position: relative;
  z-index: 3;
}

.site-footer .brand strong {
  color: #fff !important;
}

.site-footer .brand small,
.site-footer p {
  color: rgba(255,255,255,.70) !important;
}

.site-footer h3 {
  color: #91e9ef !important;
}

.site-footer .footer-col a,
.site-footer > * > div > a {
  color: rgba(255,255,255,.83) !important;
}

.site-footer .footer-col a:hover,
.site-footer > * > div > a:hover {
  color: #fff !important;
}

.site-footer .footer-bottom {
  color: rgba(255,255,255,.58) !important;
  border-top-color: rgba(255,255,255,.12) !important;
}

.site-footer .socials a {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.20) !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .page-index .hero-copy {
    padding: 28px;
  }

  .decor-hero-valve,
  .decor-why,
  .decor-program,
  .decor-experience,
  .decor-admissions,
  .decor-tuition,
  .decor-support,
  .decor-faq {
    opacity: .58;
  }

  .toolkit-card {
    grid-template-columns: 170px 1fr;
  }
}

@media (max-width: 820px) {
  body::before {
    background-size: 1250px auto !important;
    background-position: center top !important;
  }

  .page-index .hero-copy {
    padding: 24px;
  }

  .lab-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 480px 320px auto;
  }

  .lab-photo-large {
    grid-row: auto;
  }

  .toolkit-grid {
    grid-template-columns: 1fr;
  }

  .toolkit-card {
    grid-template-columns: 180px 1fr;
  }

  .decor,
  .subpage-decor {
    opacity: .36 !important;
  }

  .subhero {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .page-index .hero-copy {
    border-radius: 24px;
    padding: 20px;
  }

  .toolkit-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .toolkit-card img {
    max-height: 200px;
  }

  .lab-gallery {
    grid-template-rows: 390px 270px auto;
  }

  .decor,
  .subpage-decor,
  .footer-decor {
    display: none;
  }
}