/* =========================================
   GLOBAL RESET (removes white edges)
========================================= */
html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* prevents bottom gap from inline images or default spacing */
img{ display:block; max-width:100%; height:auto; }

/* =========================================
   FOOTER COLORS (SOLID) - Prototype Match
========================================= */
:root{
  --purple-dark: #0D001D;     /* main footer solid */
  --purple-bar:  #6E2EBC;     /* bottom legal bar */
  --cta-yellow:  #fdc332;     /* CTA left */
  --cta-title:   #6E2EBC;     /* CTA heading */
  --btn-purple:  #6E2EBC;

  --text: #ffffff;
  --text-muted: rgba(255,255,255,.75);
  --line: rgba(255,255,255,.18);

  --hover: #fdc332;           /* hover color */

  --container-max: 1200px;
}

/* =========================
   HEADER + HERO (Home)
========================= */
:root{
  --purple: #6E2EBC;
  --header-max: 1200px;

  /* fixed heights (stable, prevents layout bugs) */
  --topbar-h: 74px;
  --header-h: 78px;
}

/* Prevent horizontal overflow from transforms */
html, body { overflow-x: hidden; }

/* ---------- Top purple bar ---------- */
.topbar{
  width: 100%;
  height: var(--topbar-h);
  background: var(--purple);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transition: transform .22s ease;
}

.topbar-inner{
  max-width: var(--header-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between; /* LEFT + RIGHT */
  gap: 18px;
}

/* LEFT: CONTACT INFO */
.topbar-contact{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  white-space: nowrap;
}

.topbar-contact-link{
  color: #fff;
  text-decoration: none;
  font-weight: 500;

  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.topbar-contact-link:hover{
  text-decoration: none;
  opacity: 0.85;
}

.topbar-contact i{
  font-size: 14px;
  opacity: .9;
}

.topbar-sep{
  color: rgba(255,255,255,.55);
  font-weight: 400;
}

/* RIGHT: CTA */
.topbar-cta{
  background: #fff;
  color: var(--purple);
  text-decoration: none;
  font-weight: 400;
  padding: 12px 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease, transform .15s ease;
}
.topbar-cta:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

/* hide topbar when scrolled */
body.is-scrolled .topbar{
  transform: translateY(-100%);
}

/* ---------- Responsive: Topbar contact ---------- */
@media (max-width: 768px){
  .topbar-contact{ display: none; }
  .topbar-inner{ justify-content: center; }
}

/* ---------- Primary header (fixed, overlays hero) ---------- */
.main-header{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 59;
  background: transparent;
  transition: top .22s ease, background-color .18s ease, box-shadow .18s ease;
}

/* when scrolled: header moves to top, becomes white */
body.is-scrolled .main-header{
  top: 0;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.main-header-inner{
  max-width: var(--header-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  align-items: center;
  gap: 18px;
}

.main-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.main-logo img{
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
}

/* Nav */
.main-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.nav-link{
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color .18s ease, opacity .18s ease;
  opacity: .95;
}

/* Hover on transparent header (COLOR ONLY) */
.nav-link:hover{
  color: rgba(255,255,255,.75);
}

/* Active link */
.nav-link.is-active{
  opacity: 1;
}

body.is-scrolled .nav-link{
  color: var(--purple);
  opacity: 1;
}

/* Hover on white header (COLOR ONLY) */
body.is-scrolled .nav-link:hover{
  color: #4b18c9;
}

/* Account */
.main-account{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.account-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color .18s ease, opacity .18s ease;
  opacity: .95;
}

/* Hover on transparent header (COLOR ONLY) */
.account-link:hover{
  color: rgba(255,255,255,.75);
}

body.is-scrolled .account-link{
  color: var(--purple);
  opacity: 1;
}

/* Hover on white header (COLOR ONLY) */
body.is-scrolled .account-link:hover{
  color: #4b18c9;
}

/* =========================================================
   MOBILE MENU (SLIDE DOWN / UP)
   - Hidden on desktop
   - Shows at 992 and below
========================================================= */

/* Hidden by default (desktop) */
.mnav,
.mnav-btn{
  display: none;
}

/* Hamburger button */
.mnav-btn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease;
  align-items: center;
  justify-content: center;
}

.mnav-btn:hover{
  background: rgba(255,255,255,.12);
}
body.is-scrolled .mnav-btn:hover{
  background: rgba(110,46,188,.08);
}

.mnav-bars{
  width: 22px;
  height: 14px;
  position: relative;
  display: block;
  box-shadow: 0 6px 0 0 #fff; /* middle bar */
  border-radius: 999px;
}

.mnav-bars::before,
.mnav-bars::after{
  content:"";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transition: background .18s ease;
}
.mnav-bars::before{ top: 0; }
.mnav-bars::after{ bottom: 0; }

/* On scrolled header (white bg) hamburger becomes purple */
body.is-scrolled .mnav-bars{ box-shadow: 0 6px 0 0 var(--purple); }
body.is-scrolled .mnav-bars::before,
body.is-scrolled .mnav-bars::after{ background: var(--purple); }

/* Mobile menu wrapper */
.mnav{
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

/* overlay */
.mnav-overlay{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease;
  cursor: pointer;
}

/* Panel slides DOWN to open and UP to close */
.mnav-panel{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);

  transform: translateY(-110%);
  transition: transform .26s ease;

  padding: 16px 18px 14px;
}

/* Open state */
.mnav.is-open{
  pointer-events: auto;
}
.mnav.is-open .mnav-overlay{
  opacity: 1;
}
.mnav.is-open .mnav-panel{
  transform: translateY(0);
}

/* Prevent background scroll when menu open */
body.mnav-open{ overflow: hidden; }

/* Top row */
.mnav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0 10px;
}

.mnav-brand img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* Modern X button */
.mnav-close{
  width: 44px;
  height: 44px;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  background: rgba(110,46,188,.08);
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.mnav-close:hover{
  transform: translateY(-1px);
  background: rgba(110,46,188,.14);
  box-shadow: 0 10px 20px rgba(110,46,188,.18);
}

/* X lines (modern) */
.mnav-x{
  width: 18px;
  height: 18px;
  position: relative;
  display: block;
}

.mnav-x::before,
.mnav-x::after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--purple);
  border-radius: 999px;
  transform-origin: center;
  transition: transform .18s ease;
}

.mnav-x::before{ transform: translate(-50%,-50%) rotate(45deg); }
.mnav-x::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.mnav-close:hover .mnav-x::before{ transform: translate(-50%,-50%) rotate(55deg); }
.mnav-close:hover .mnav-x::after{ transform: translate(-50%,-50%) rotate(-55deg); }

/* Links */
.mnav-links{
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0,0,0,.08);
}

.mnav-link{
  padding: 15px 2px;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: color .15s ease, background .15s ease;
}

.mnav-link:hover{
  color: var(--purple);
  background: rgba(110,46,188,.06);
}

/* CTA */
.mnav-cta{
  margin-top: 14px;
  height: 48px;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease, transform .15s ease;
}
.mnav-cta:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

/* Social row */
.mnav-social{
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.mnav-social-link{
  font-size: 12px;
  color: rgba(0,0,0,.35);
  text-decoration: none;
  font-weight: 700;
}
.mnav-social-link:hover{
  color: var(--purple);
}

/* ---------- Hero slider (sits behind fixed header) ---------- */
.hero{
  position: relative;
}

/* hero starts at top of page; fixed bars overlay it */
.hero-slider{
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-track{
  display: flex;
  transform: translate3d(0,0,0);
  transition: transform .85s ease;
  will-change: transform;
}

.hero-slide{
  width: 100%;
  flex: 0 0 100%;
  position: relative;

  /* FULL COVER behind header */
  min-height: 680px;
  height: 100vh;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* prevents white flash if tab suspends and images repaint */
  background-color: #111;
}

/* overlay */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

/* Content sits BELOW fixed bars (no white gap, no bugs) */
.hero-content{
  position: relative;
  z-index: 2;
  max-width: var(--header-max);
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;

  /* push content down below the fixed bars */
  padding-top: calc(var(--topbar-h) + var(--header-h) + 70px);
  padding-bottom: 90px;
}

/* Card */
.hero-card{
  width: min(620px, 92%);
  background: rgba(255,255,255,.95);
  border-radius: 10px;
  padding: 26px 26px 64px;
  position: relative;
}

.hero-card h1{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 600;
  color: var(--purple);
}

.hero-card p{
  margin: 0 0 18px;
  color: rgba(0,0,0,.62);
  line-height: 1.5;
  font-size: 14px;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple);
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  padding: 11px 16px;
  border-radius: 6px;
  transition: filter .15s ease, transform .15s ease;
}
.hero-btn:hover{
  filter: brightness(.92);
  transform: translateY(-1px);
}

/* Bottom-right arrows aligned to card */
.hero-nav{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
}

/* Card */
.hero-card{
  box-sizing: border-box;
  max-width: 100%;
}

/* Prevent control row from forcing overflow */
.hero-nav{
  box-sizing: border-box;
  max-width: 100%;
}

/* =========================
   HERO TIMER RING (25s)
========================= */
.hero-progress{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-progress-svg{
  width: 44px;
  height: 44px;
  display: block;
  transform: rotate(-90deg); /* start from top */
}

.hero-progress-track{
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-width: 2.6;
}

.hero-progress-bar{
  fill: none;
  stroke: var(--purple);
  stroke-width: 2.6;
  stroke-linecap: round;

  /* 2πr where r≈15.5 => ~97.39 */
  stroke-dasharray: 97.39;
  stroke-dashoffset: 97.39; /* empty */
  transition: stroke .18s ease;
}

/* If you ever want the ring to invert color on white bg (optional):
body.is-scrolled .hero-progress-track{ stroke: rgba(0,0,0,.12); }
*/

.hero-arrow{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.hero-arrow:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

/* =========================================
   RESPONSIVE - 992 / 768 / 480
   (MOBILE: MENU + HERO SAFE)
========================================= */
@media (max-width: 992px){
  /* Hide desktop nav, show hamburger, hide login link (login is inside mobile menu too) */
  .main-nav{ display: none; }
  .account-link{ display: none; }
  .mnav-btn{ display: inline-flex; }
  .mnav{ display: block; }

  .main-header-inner{
    grid-template-columns: 180px 1fr 90px;
    gap: 12px;
  }

  .hero-slide{ min-height: 620px; height: 88vh; }
  .hero-content{
    padding-top: calc(var(--topbar-h) + var(--header-h) + 55px);
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-card{
    width: min(620px, 92%);
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-card h1{ font-size: 30px; }
}

@media (max-width: 768px){
  .topbar-inner{ justify-content: center; }

  .main-header-inner{
    grid-template-columns: 1fr auto;
    height: 100%;
  }

  /* HERO: stop forcing wide desktop behavior */
  .hero-slide{
    min-height: 640px;
    height: auto;
  }

  .hero-content{
    padding-top: calc(var(--topbar-h) + var(--header-h) + 55px);
    padding-bottom: 28px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* CARD: vertical, full width, no overflow */
  .hero-card{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 16px 18px;
  }

  .hero-card h1{ font-size: 26px; }
  .hero-card p{ font-size: 13.5px; }

  /* CONTROLS: NOT overlayed (prevents clipping/overflow) */
  .hero-nav{
    position: static;
    margin-top: 14px;
    right: auto;
    bottom: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    max-width: 100%;
  }

  .hero-progress,
  .hero-progress-svg{
    width: 40px;
    height: 40px;
  }

  .hero-arrow{
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  /* mobile menu spacing */
  .mnav-panel{
    padding: 14px 14px 12px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  .mnav-link{
    font-size: 15.5px;
    padding: 14px 2px;
  }
  .mnav-cta{
    height: 46px;
  }
}

@media (max-width: 480px){
  .topbar-inner{ padding: 0 12px; }
  .topbar-cta{ width: 100%; justify-content: center; }

  .main-header-inner{ padding-left: 12px; padding-right: 12px; }
  .main-logo img{ width: 48px; height: 48px; }

  .hero-slide{
    min-height: 620px;
    height: auto;
  }

  .hero-content{
    padding-top: calc(var(--topbar-h) + var(--header-h) + 55px);
    padding-bottom: 22px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-card{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 14px 16px;
  }

  .hero-card h1{ font-size: 22px; }
  .hero-card p{ font-size: 13px; }

  .hero-btn{
    padding: 10px 14px;
  }

  .hero-nav{
    position: static;
    margin-top: 12px;
    right: auto;
    bottom: auto;
    justify-content: flex-end;
    gap: 8px;
    max-width: 100%;
  }

  .hero-progress,
  .hero-progress-svg{
    width: 38px;
    height: 38px;
  }

  .hero-arrow{
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  /* mobile menu sizing */
  .mnav-brand img{ width: 40px; height: 40px; }
  .mnav-close{ width: 42px; height: 42px; border-radius: 12px; }
  .mnav-link{ font-size: 15px; }
  .mnav-social-link{ font-size: 11.5px; }
}

/* ================================
   NAV ACCOUNT: Avatar + Username
   (Fix: avatar circle now applies in MOBILE DROPDOWN too)
================================= */

.account-user{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* APPLY TO ANY .nav-avatar (header + mobile menu) */
.nav-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--purple, #6e2ebc);
  color: #fff;

  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 34px;
}

.nav-username{
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

/* Mobile menu user row */
.mnav-user{
  display: flex;
  align-items: center;
  gap: 10px;
}
.mnav-user .nav-username{
  font-weight: 700;
}

/* Optional: hide username on very small header widths */
@media (max-width: 768px){
  .account-user .nav-username{
    display: none;
  }
}

/* ================================
   DESKTOP ACCOUNT DROPDOWN
================================= */

.account-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.account-dd-btn{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.dd-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: .9;
}

.account-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  min-width: 190px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  padding: 8px;
  z-index: 9999;
  display: none;
}

.account-dd.is-open .account-menu{
  display: block;
}

.account-menu-item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 10px;

  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 14px;
}

.account-menu-item:hover{
  background: rgba(110,46,188,.10);
}

.account-menu-item.is-danger{
  color: #b00020;
}
.account-menu-item.is-danger:hover{
  background: rgba(176,0,32,.08);
}

/* ================================
   FINDING BALANCE INFO SECTION
   (MATCH SITE 1200 + 18px PATTERN)
   - MOTION: scroll reveal (left then right) + border/soft settle
================================ */
.split-info{
  width: 100%;
  background: #fff;
  padding: 64px 18px;
  box-sizing: border-box;
}

.split-info-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1.1fr .9fr;

  border: 1px solid var(--purple);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

/* Left */
.split-info-left{
  padding: 54px 56px;
  background: #fff;
  box-sizing: border-box;
}

.split-info-left h2{
  margin: 0 0 18px;
  color: var(--purple);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.05;
  font-size: clamp(34px, 3.2vw, 56px);
}

.split-info-left p{
  margin: 0;
  max-width: 520px;
  color: rgba(0,0,0,.48);
  font-size: 15px;
  line-height: 1.65;
}

/* Right */
.split-info-right{
  background: #eef2ff;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.split-info-right img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================
   SCROLL REVEAL MOTION (Split Info only)
   - Left: fade + up
   - Right: fade + up (delayed)
   - No resizing / no layout changes
========================================= */

.split-info-left,
.split-info-right{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* right side follows slightly after */
.split-info-right{
  transition-delay: 160ms;
}

/* revealed state */
.split-info.is-revealed .split-info-left,
.split-info.is-revealed .split-info-right{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .split-info-left,
  .split-info-right{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   RESPONSIVE (MATCH YOUR SITE)
========================= */
@media (max-width: 992px){
  .split-info-inner{
    grid-template-columns: 1fr;
  }

  .split-info-left{
    padding: 44px 40px;
  }

  .split-info-right{
    min-height: 320px;
  }
}

@media (max-width: 768px){
  .split-info{
    padding: 54px 14px;
  }

  .split-info-left{
    padding: 38px 26px;
  }

  .split-info-right{
    min-height: 300px;
  }
}

@media (max-width: 480px){
  .split-info{
    padding: 44px 12px;
  }

  .split-info-left{
    padding: 30px 18px;
  }

  .split-info-left p{
    font-size: 14px;
  }

  .split-info-right{
    min-height: 240px;
  }
}

/* ================================
        SUPPORT PILLARS SECTION
   - MOTION: scroll reveal (section only)
   - HOVER: slide up + wiggle left/right, then returns on hover off
================================= */
.pillars{
  width: 100%;
  background: var(--purple);
  padding: 68px 0 58px;
}

.pillars-inner{
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 18px;
}

.pillars-title{
  margin: 0;
  text-align: center;
  color: #fff;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.2px;
  font-size: clamp(26px, 3.2vw, 42px);
}

.pillars-grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

.pillar-card{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  aspect-ratio: 1 / 1;

  /* smooth return when hover ends */
  transform: translate3d(0,0,0);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.pillar-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay tint */
.pillar-card::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: .88;
}

/* soft bottom fade like the prototype */
.pillar-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 70%);
  z-index: 1;
}

.pillar-card p{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.15;
  z-index: 2;
}

/* EXACT overlay tones */
.pillar-card.is-teal::after{
  background: linear-gradient(to bottom, rgba(0,255,220,.65), rgba(0,180,160,.90));
}
.pillar-card.is-coral::after{
  background: linear-gradient(to bottom, rgba(255,85,85,.65), rgba(220,40,40,.92));
}
.pillar-card.is-gold::after{
  background: linear-gradient(to bottom, rgba(255,214,80,.55), rgba(240,170,0,.92));
}
.pillar-card.is-violet::after{
  background: linear-gradient(to bottom, rgba(160,130,255,.55), rgba(120,70,255,.92));
}
.pillar-card.is-dark::after{
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.70));
}

.pillars-sub{
  margin: 34px 0 0;
  text-align: center;
  color: rgba(255,255,255,.92);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
}

/* =========================================
   SCROLL REVEAL MOTION (Pillars only)
   - Title: fade + up
   - Cards: fade + up with stagger (delay set by JS)
   - Sub: fade + up with small delay
========================================= */

.pillars-title,
.pillar-card,
.pillars-sub{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* sub comes a hair later */
.pillars-sub{
  transition-delay: 160ms;
}

/* revealed */
.pillars.is-revealed .pillars-title,
.pillars.is-revealed .pillar-card,
.pillars.is-revealed .pillars-sub{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   HOVER: slide up + wiggle (only after reveal)
   - Slide up happens immediately
   - Wiggle is short, then rests at the lifted position
   - On hover off: returns smoothly to place
========================================= */

/* keyframes wiggle around the lifted position */
@keyframes pillarWiggle{
  0%   { transform: translate3d(0, -10px, 0); }
  20%  { transform: translate3d(6px, -10px, 0); }
  40%  { transform: translate3d(-6px, -10px, 0); }
  60%  { transform: translate3d(5px, -10px, 0); }
  80%  { transform: translate3d(-4px, -10px, 0); }
  100% { transform: translate3d(0, -10px, 0); }
}

/* apply only when section is revealed (prevents weird hover before entering view) */
.pillars.is-revealed .pillar-card:hover{
  /* slide up baseline */
  transform: translate3d(0, -10px, 0);

  /* wiggle overlays the same transform values */
  animation: pillarWiggle 420ms ease-in-out 1;
}

/* =========================================
   Reduced motion: no reveal animation, no wiggle
========================================= */
@media (prefers-reduced-motion: reduce){
  .pillars-title,
  .pillar-card,
  .pillars-sub{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .pillars.is-revealed .pillar-card:hover{
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================
   RESPONSIVE (992 / 768 / 480)
========================================= */
@media (max-width: 992px){
  .pillars{ padding: 60px 0 50px; }
  .pillars-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .pillars-sub{ font-size: 17px; }
}

@media (max-width: 768px){
  .pillars{ padding: 54px 0 46px; }
  .pillars-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .pillar-card p{ bottom: 16px; font-size: 12.5px; }
  .pillars-sub{ margin-top: 28px; font-size: 16px; }
}

@media (max-width: 480px){
  .pillars{ padding: 46px 0 42px; }

  .pillars-grid{
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
  }

  .pillars-sub{
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
  }
}

/* ================================
   FULL IMAGE STATEMENT SECTION
   - Hover: background zoom
   - Motion: text fade + up on scroll reveal
================================= */
.image-statement{
  width: 100%;
  min-height: 520px;
  margin-top: 70px;

  padding: 80px 0;

  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;

  background: #111;
}

/* Background image layer (animatable) */
.image-statement::before{
  content: "";
  position: absolute;
  inset: 0;

  background: url("/images/Woman-On-Call.jpg") center/cover no-repeat;

  transform: scale(1);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* Hover zoom effect */
.image-statement:hover::before{
  transform: scale(1.06);
}

/* Dark fade overlay (right side) */
.image-statement::after{
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.78) 100%
  );

  pointer-events: none;
}

/* Inner content container */
.image-statement-inner{
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 18px;

  width: 100%;
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: flex-end;
}

/* Text styling */
.image-statement-inner h2{
  margin: 0;
  color: #fff;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.15;
  max-width: 520px;
  word-wrap: break-word;
}

/* =========================================
   SCROLL REVEAL MOTION (Text only)
   - Fade + slight upward move
========================================= */

.image-statement-inner h2{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* Revealed state */
.image-statement.is-revealed .image-statement-inner h2{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .image-statement::before{
    transform: none !important;
    transition: none !important;
  }

  .image-statement-inner h2{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================
   RESPONSIVE - 992 / 768 / 480
========================================= */
@media (max-width: 992px){
  .image-statement{
    min-height: 500px;
    padding: 70px 0;
    margin-top: 60px;
  }

  .image-statement-inner h2{
    font-size: 38px;
    max-width: 480px;
  }
}

@media (max-width: 768px){
  .image-statement{
    min-height: 460px;
    padding: 60px 0;
    margin-top: 55px;
  }

  .image-statement::after{
    background: linear-gradient(
      to right,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,.58) 60%,
      rgba(0,0,0,.82) 100%
    );
  }

  .image-statement-inner{
    justify-content: center;
    text-align: center;
  }

  .image-statement-inner h2{
    font-size: 34px;
    max-width: 560px;
  }
}

@media (max-width: 480px){
  .image-statement{
    min-height: 420px;
    padding: 50px 0;
    margin-top: 45px;
  }

  .image-statement::after{
    background: linear-gradient(
      to right,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.62) 45%,
      rgba(0,0,0,.86) 100%
    );
  }

  .image-statement-inner{
    padding: 0 12px;
  }

  .image-statement-inner h2{
    font-size: 28px;
    line-height: 1.18;
    max-width: 100%;
  }
}

/* ================================
        CLARITY CALL SECTION
   (Includes Booking Modal Styles)
================================= */
.clarity-call{
  width: 100%;
  background: #f9f5ff;
  padding: 90px 0;
  text-align: center;
}

.clarity-call-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  width: 100%;
  box-sizing: border-box;
}

/* Main paragraph */
.clarity-call p{
  margin: 0 auto 18px;
  max-width: 860px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(0,0,0,.55);
  font-weight: 400;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Bold emphasis line */
.clarity-bold{
  margin: 0 auto 40px;
  max-width: 860px;
}

.clarity-bold strong{
  font-weight: 700;
  color: rgba(0,0,0,.70);
  display: inline;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Button (works for <a> OR <button>) */
.clarity-btn{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--purple);
  color: #fff;
  font-weight: 400;
  font-size: 18px;

  padding: 14px 34px;
  border-radius: 6px;
  text-decoration: none;

  border: 0;
  cursor: pointer;

  max-width: 100%;
  box-sizing: border-box;

  transition: filter .15s ease, transform .15s ease;
}

.clarity-btn:hover{
  filter: brightness(.92);
  transform: translateY(-1px);
}

.clarity-btn:active{
  transform: translateY(0);
}

.clarity-btn:focus-visible{
  outline: 3px solid rgba(107,43,209,.28);
  outline-offset: 3px;
}

/* =========================================
   CLARITY CALL BOOKING MODAL (Popup Calendar)
   Uses: #hyuClarityModal + .hyu-modal*
========================================= */
.hyu-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.hyu-modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.hyu-modal-backdrop{
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.55);
  cursor: pointer;
}

.hyu-modal-dialog{
  position: relative;
  width: min(92vw, 980px);
  max-height: 90vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.hyu-modal-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.hyu-modal-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: rgba(0,0,0,.85);
}

.hyu-modal-close{
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: filter .15s ease, transform .15s ease;
}

.hyu-modal-close:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

.hyu-modal-close{
  transition:
  background .25s ease,
  color .25s ease,
  transform .15s ease,
  filter .15s ease;
}

.hyu-modal-close:hover{
  background: var(--purple);
  color: #fff;
  transform: translateY(-1px);
}

.hyu-modal-close:hover i{
  color:#fff;
}

.hyu-modal-close:active{
  transform: translateY(0);
}

.hyu-modal-close:focus-visible{
  outline: 3px solid rgba(107,43,209,.28);
  outline-offset: 3px;
}

.hyu-modal-body{
  padding: 0;
  overflow: hidden;
}

/* Calendly widget container sizing */
.hyu-modal-body .calendly-inline-widget{
  width: 100%;
  min-width: 320px;
  height: 72vh;
  max-height: 720px;
  overflow: hidden;
}

/* lock scroll when modal open */
html.hyu-modal-lock,
body.hyu-modal-lock{
  overflow: hidden !important;
}

/* =========================================
   SCROLL REVEAL MOTION (Clarity Call)
========================================= */
.clarity-call p,
.clarity-bold,
.clarity-btn{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* Stagger delays */
.clarity-bold{ transition-delay: 140ms; }
.clarity-btn{ transition-delay: 260ms; }

/* Revealed state */
.clarity-call.is-revealed p,
.clarity-call.is-revealed .clarity-bold,
.clarity-call.is-revealed .clarity-btn{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .clarity-call p,
  .clarity-bold,
  .clarity-btn{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hyu-modal-close,
  .clarity-btn{
    transition: none !important;
  }
}

/* =========================================
   RESPONSIVE - 992 / 768 / 480
========================================= */
@media (max-width: 992px){
  .clarity-call{ padding: 80px 0; }
  .clarity-call-inner{ padding: 0 18px; }
  .clarity-call p{ font-size: 19px; }
  .clarity-bold{ margin-bottom: 36px; }

  .hyu-modal-dialog{ width: min(94vw, 980px); }
  .hyu-modal-body .calendly-inline-widget{ height: 620px; }
}

@media (max-width: 768px){
  .clarity-call{ padding: 70px 0; }
  .clarity-call-inner{ padding: 0 14px; }
  .clarity-call p{ font-size: 18px; }

  .clarity-btn{
    font-size: 17px;
    padding: 13px 30px;
  }

  .hyu-modal-top{ padding: 12px 14px; }
  .hyu-modal-title{ font-size: 17px; }
  .hyu-modal-body .calendly-inline-widget{ height: 600px; }
}

@media (max-width: 480px){
  .clarity-call{ padding: 60px 0; }
  .clarity-call-inner{ padding: 0 12px; }

  .clarity-call p{
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .clarity-bold{ margin-bottom: 32px; }

  .clarity-btn{
    width: 100%;
    max-width: 260px;
    font-size: 16px;
    padding: 12px 22px;
  }

  .hyu-modal-dialog{
    width: 94vw;
    max-height: 92vh;
    border-radius: 14px;
  }

  .hyu-modal-close{
    width: 38px;
    height: 38px;
  }

  .hyu-modal-body .calendly-inline-widget{
    height: 560px;
    min-width: 0;
  }
}

/* ================================
   NEWS & ARTICLES (Homepage)
   - Consistent width with other sections (matches Finding Balance)
   - No overflow
   - Responsive: 992 / 768 / 480
   - MOTION REMOVED (no reveal, no opacity/transform)
================================= */

.news-section{
  width: 100%;
  background: #fff;
  padding: 70px 0 80px;    
  overflow: hidden;
}

.news-inner{
  max-width: var(--header-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 18px;        
}

.news-title{
  margin: 0 0 26px;
  text-align: center;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--purple);
}

/* Grid stays inside the container */
.news-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.news-card{
  width: 100%;
  min-width: 0;
}

.news-card-link{
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.news-img{
  position: relative;
  width: 100%;
  height: 320px;
  background: #111;
  overflow: hidden;
}

.news-img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.news-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.40) 55%,
    rgba(0,0,0,.70) 100%
  );
  pointer-events: none;
}

.news-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.70);
}

.news-body{
  position: relative;
  background: #fff;
  padding: 18px 18px 18px;
}

/* Title overlays into the image area like your prototype */
.news-body h3{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;

  position: absolute;
  left: 18px;
  right: 18px;
  top: -92px;
  z-index: 3;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-body p{
  margin: 0 0 12px;
  color: rgba(0,0,0,.60);
  font-size: 13px;
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-readmore{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.70);
}

/* Bottom bar stays inside the SAME container width */
.news-bottom-bar{
  margin-top: 34px;
  width: 100%;
  max-width: 100%;
  background: var(--purple);
  border-radius: 10px;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
}

.news-bottom-text{
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

.news-bottom-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 8px;
  background: #fff;
  color: rgba(0,0,0,.80);
  white-space: nowrap;
}

/* =========================
   RESPONSIVE - 992 / 768 / 480
========================= */

@media (max-width: 992px){
  .news-section{ padding: 60px 0 70px; }
  .news-inner{ padding: 0 18px; }

  .news-title{ font-size: 34px; }
  .news-grid{ gap: 18px; }
  .news-img{ height: 290px; }
  .news-bottom-text{ font-size: 17px; }
}

@media (max-width: 768px){
  .news-section{ padding: 55px 0 65px; }
  .news-inner{ padding: 0 14px; }

  .news-title{ font-size: 30px; margin-bottom: 22px; }

  .news-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .news-img{ height: 300px; }
  .news-body h3{ top: -88px; }

  .news-bottom-bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px;
  }

  .news-bottom-btn{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px){
  .news-section{ padding: 50px 0 58px; }
  .news-inner{ padding: 0 12px; }

  .news-title{ font-size: 26px; }

  .news-img{ height: 260px; }

  .news-body{ padding: 16px; }

  .news-body h3{
    left: 16px;
    right: 16px;
    top: -84px;
    font-size: 17px;
  }

  .news-bottom-text{ font-size: 16px; }

  .news-bottom-btn{
    font-size: 15px;
    padding: 11px 14px;
  }
}

/* ================================
   NEWS & ARTICLES (LIVE DATA)
   - FIXED CONTAINER WIDTH (matches other sections)
   - NO duplicate blocks
   - CTA bar aligns perfectly
   - Responsive: 992 / 768 / 480
   - FIX: white title on image + colored tags
================================= */

.news-section,
.news-section *,
.news-section *::before,
.news-section *::after{
  box-sizing: border-box;
}

.news-section{
  width: 100%;
  background: #fff;
  padding: 70px 18px;
  overflow: hidden;
}

/* IMPORTANT: inner has NO side padding */
.news-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0;
}

/* Title */
.news-title{
  text-align: center;
  font-size: 44px;
  font-weight: 600;
  color: var(--purple);
  margin: 0 0 55px;
}

/* Grid */
.news-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
}

/* Card */
.news-card{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  min-width: 0;
}

.news-card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Image */
.news-img{
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  flex: 0 0 auto;
}

/* (Keeps the title readable if it sits over the image in your build) */
.news-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.55));
  pointer-events: none;
}

.news-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tag (base) */
.news-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 2;
  background: rgba(255,255,255,.90);
  color: rgba(0,0,0,.80);
}

/* TAG COLORS (match your DB values: teal / red / gold) */
.news-tag.tag-teal{
  background: rgba(0, 199, 170, .95);
  color: #ffffff;
}

.news-tag.tag-red{
  background: rgba(232, 67, 67, .95);
  color: #ffffff;
}

.news-tag.tag-gold{
  background: rgba(247, 184, 52, .95);
  color: #241600;
}

/* Optional fallback */
.news-tag.tag-default{
  background: rgba(255,255,255,.90);
  color: rgba(0,0,0,.80);
}

/* Body */
.news-body{
  padding: 22px 20px 26px;
  flex: 1 1 auto;
  min-width: 0;
}

.news-body h3{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;                 /* <-- FIX */
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.news-body p{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0,0,0,.62);
}

/* Read More */
.news-readmore{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.75);
}

/* Bottom Purple Bar (CTA) */
.news-bottom-bar{
  margin-top: 55px;
  width: 100%;
  background: var(--purple);
  border-radius: 12px;
  padding: 34px 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  overflow: hidden;
}

.news-bottom-text{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
}

.news-bottom-btn{
  background: #fff;
  color: var(--purple);
  font-weight: 400;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Empty state */
.news-empty{
  grid-column: 1 / -1;
  width: 100%;
}

.news-empty p{
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: rgba(0,0,0,.55);
}

/* =========================
   Responsive
========================= */

@media (max-width: 992px){
  .news-section{ padding: 80px 18px; }

  .news-title{
    font-size: 38px;
    margin-bottom: 45px;
  }

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

  .news-img{ height: 210px; }

  .news-bottom-bar{
    padding: 30px 28px;
    margin-top: 45px;
  }

  .news-bottom-text{ font-size: 18px; }
  .news-bottom-btn{ padding: 13px 22px; }
}

@media (max-width: 768px){
  .news-section{ padding: 70px 14px; }

  .news-title{
    font-size: 34px;
    margin-bottom: 40px;
  }

  .news-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .news-body h3{ font-size: 19px; }

  .news-bottom-bar{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 28px 20px;
    gap: 16px;
  }

  .news-bottom-text{ font-size: 18px; }

  .news-bottom-btn{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px){
  .news-section{ padding: 60px 12px; }

  .news-title{
    font-size: 28px;
    margin-bottom: 34px;
  }

  .news-img{ height: 190px; }

  .news-body{ padding: 20px 16px 22px; }
  .news-body h3{ font-size: 18px; }

  .news-bottom-bar{
    padding: 24px 16px;
    border-radius: 12px;
  }

  .news-bottom-text{
    font-size: 16px;
    line-height: 1.45;
  }

  .news-bottom-btn{
    max-width: 260px;
    padding: 12px 18px;
  }
}

/* =========================================================
   HEADER (SECOND HEADER ONLY)
   - Same exact sizing + layout as index secondary header
   - Solid white background + shadow
   - Purple links + hover animation
   - No transparent mode, no scroll behavior
========================================================= */

body.page-articles{
  padding-top: var(--header-h);
}

/* Header always solid white */
body.page-articles .main-header{
  top: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
}

/* Prevent scroll state from changing */
body.page-articles.is-scrolled .main-header{
  top: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
}

/* Links purple */
body.page-articles .nav-link{
  color: var(--purple) !important;
  opacity: 1 !important;
}

body.page-articles .nav-link:hover{
  color: #4b18c9 !important;
}

body.page-articles .nav-link.is-active{
  font-weight: 800;
}

/* Account link purple */
body.page-articles .account-link{
  color: var(--purple) !important;
  opacity: 1 !important;
}

body.page-articles .account-link:hover{
  color: #4b18c9 !important;
}

/* =========================================================
   MOBILE MENU (page-articles)
   - Hidden on desktop
   - Shows at 992 and below
   - Slides down/up
========================================================= */

/* Hidden by default (desktop) */
body.page-articles .mnav,
body.page-articles .mnav-btn{
  display: none;
}

/* Hamburger button */
body.page-articles .mnav-btn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease;
  align-items: center;
  justify-content: center;
}

body.page-articles .mnav-btn:hover{
  background: rgba(110,46,188,.08);
}

body.page-articles .mnav-bars{
  width: 22px;
  height: 14px;
  position: relative;
  display: block;
  box-shadow: 0 6px 0 0 var(--purple); /* middle bar */
  border-radius: 999px;
}

body.page-articles .mnav-bars::before,
body.page-articles .mnav-bars::after{
  content:"";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--purple);
}
body.page-articles .mnav-bars::before{ top: 0; }
body.page-articles .mnav-bars::after{ bottom: 0; }

/* Mobile menu wrapper */
body.page-articles .mnav{
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

/* Overlay */
body.page-articles .mnav-overlay{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease;
  cursor: pointer;
}

/* Panel slides DOWN to open and UP to close */
body.page-articles .mnav-panel{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);

  transform: translateY(-110%);
  transition: transform .26s ease;

  padding: 16px 18px 14px;
}

/* Open state */
body.page-articles .mnav.is-open{
  pointer-events: auto;
}
body.page-articles .mnav.is-open .mnav-overlay{
  opacity: 1;
}
body.page-articles .mnav.is-open .mnav-panel{
  transform: translateY(0);
}

/* Prevent background scroll when menu open */
body.page-articles.mnav-open{ overflow: hidden; }

/* Top row */
body.page-articles .mnav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0 10px;
}

body.page-articles .mnav-brand img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* Modern X button */
body.page-articles .mnav-close{
  width: 44px;
  height: 44px;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  background: rgba(110,46,188,.08);
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

body.page-articles .mnav-close:hover{
  transform: translateY(-1px);
  background: rgba(110,46,188,.14);
  box-shadow: 0 10px 20px rgba(110,46,188,.18);
}

/* X lines */
body.page-articles .mnav-x{
  width: 18px;
  height: 18px;
  position: relative;
  display: block;
}

body.page-articles .mnav-x::before,
body.page-articles .mnav-x::after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--purple);
  border-radius: 999px;
  transform-origin: center;
  transition: transform .18s ease;
}

body.page-articles .mnav-x::before{ transform: translate(-50%,-50%) rotate(45deg); }
body.page-articles .mnav-x::after{ transform: translate(-50%,-50%) rotate(-45deg); }

body.page-articles .mnav-close:hover .mnav-x::before{ transform: translate(-50%,-50%) rotate(55deg); }
body.page-articles .mnav-close:hover .mnav-x::after{ transform: translate(-50%,-50%) rotate(-55deg); }

/* Links */
body.page-articles .mnav-links{
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0,0,0,.08);
}

body.page-articles .mnav-link{
  padding: 15px 2px;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: color .15s ease, background .15s ease;
}

body.page-articles .mnav-link:hover{
  color: var(--purple);
  background: rgba(110,46,188,.06);
}

/* Social row */
body.page-articles .mnav-social{
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

body.page-articles .mnav-social-link{
  font-size: 12px;
  color: rgba(0,0,0,.35);
  text-decoration: none;
  font-weight: 700;
}

body.page-articles .mnav-social-link:hover{
  color: var(--purple);
}

/* =========================
   Responsive Header Layout
========================= */

@media (max-width: 992px){
  body.page-articles .main-header-inner{
    grid-template-columns: 180px 1fr 140px;
    gap: 12px;
  }

  /* desktop nav off */
  body.page-articles .main-nav{ display: none; }

  /* Hide ONLY the logged-out Login <a> */
  body.page-articles .main-account > a.account-link{
    display: none;
  }

  /* KEEP the logged-in avatar button visible */
  body.page-articles .account-dd,
  body.page-articles .account-dd-btn{
    display: inline-flex !important;
    align-items: center;
  }

  /* hamburger on */
  body.page-articles .mnav-btn{ display: inline-flex; }
  body.page-articles .mnav{ display: block; }
}

/* IMPORTANT FIX:
   At 768/480 the page-articles header must remain a SINGLE ROW (logo + hamburger)
   because primary nav is hidden (no wrapping nav rows). */
@media (max-width: 768px){
  body.page-articles{
    padding-top: var(--header-h); /* keep it equal */
  }

  body.page-articles .main-header{
    height: var(--header-h) !important;
    padding-bottom: 0 !important;
  }

  body.page-articles .main-header-inner{
    height: 100%;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
  }

  body.page-articles .main-logo img{
    width: 48px;
    height: 48px;
    display: block;
  }

  /* mobile menu spacing */
  body.page-articles .mnav-panel{
    padding: 14px 14px 12px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }

  body.page-articles .mnav-link{
    font-size: 15.5px;
    padding: 14px 2px;
  }

  body.page-articles .mnav-btn{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px){
  body.page-articles{
    padding-top: var(--header-h); /* keep it equal */
  }

  body.page-articles .main-header-inner{
    padding: 0 12px;
  }

  body.page-articles .main-logo img{
    width: 46px;
    height: 46px;
  }

  body.page-articles .mnav-brand img{
    width: 40px;
    height: 40px;
  }

  body.page-articles .mnav-close{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  body.page-articles .mnav-btn{
    width: 42px;
    height: 42px;
  }

  body.page-articles .mnav-link{
    font-size: 15px;
  }

  body.page-articles .mnav-social-link{
    font-size: 11.5px;
  }
}


/* =========================================================
   ARTICLES PAGE FILTERS + SEARCH (ENGAGING)
   - Pill filters w/ active state
   - Search bar + button styled to match brand
   - Accurate button sizing + text sizing
   - Button radius MUST be 6px
   - Optimized for 992 / 768 / 480
   - Keeps your existing HTML structure
========================================================= */

.page-articles .articles-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

/* If your filters are links or buttons, this will style both */
.page-articles .articles-filters a,
.page-articles .articles-filters button{
  appearance: none;
  border: 1px solid rgba(110,46,188,.22);
  background: rgba(110,46,188,.06);
  color: rgba(0,0,0,.65);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  padding: 11px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.page-articles .articles-filters a:hover,
.page-articles .articles-filters button:hover{
  background: rgba(110,46,188,.10);
  border-color: rgba(110,46,188,.35);
  transform: translateY(-1px);
}

/* Active filter (use .is-active on the active item) */
.page-articles .articles-filters .is-active{
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* Search row */
.page-articles .articles-search{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  position: relative; /* required for the icon */
}

/* Search input */
.page-articles .articles-search input[type="search"]{
  width: min(460px, 100%);
  min-height: 44px;                 /* matches buttons */
  padding: 12px 14px 12px 42px;     /* room for icon */
  border-radius: 6px;               /* REQUIRED */
  border: 1px solid rgba(0,0,0,.12);
  font-size: 14px;
  outline: none;
  background: #fff;
  box-sizing: border-box;

  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Optional inline icon (pure CSS; no HTML change) */
.page-articles .articles-search::before{
  content: "\f002"; /* Font Awesome search icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 22px; /* stable across wrap/line-height */
  transform: translateY(-50%);
  color: rgba(0,0,0,.35);
  pointer-events: none;
}

/* Focus state */
.page-articles .articles-search input[type="search"]:focus{
  border-color: rgba(110,46,188,.55);
  box-shadow: 0 0 0 3px rgba(110,46,188,.15);
}

/* Search button (styles common button/link in that row) */
.page-articles .articles-search button,
.page-articles .articles-search input[type="submit"],
.page-articles .articles-search .articles-search-btn{
  appearance: none;
  border: 0;
  border-radius: 6px;          /* REQUIRED */
  padding: 12px 18px;          /* matches your input padding height */
  background: var(--purple);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;              /* keeps text visually centered */
  cursor: pointer;
  min-height: 44px;            /* matches input */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  transition: filter .15s ease, transform .15s ease;
}

.page-articles .articles-search button:hover,
.page-articles .articles-search input[type="submit"]:hover,
.page-articles .articles-search .articles-search-btn:hover{
  filter: brightness(.93);
  transform: translateY(-1px);
}

/* =========================================================
   ARTICLES: RESET BUTTON/LINK (FIX)
   - Secondary button style
   - Same sizing + radius as Search
========================================================= */

/* Reset as <a> */
.page-articles .articles-search a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;            /* matches Search */
  padding: 12px 16px;
  border-radius: 6px;          /* REQUIRED */

  border: 1px solid rgba(110,46,188,.28);
  background: rgba(110,46,188,.06);
  color: var(--purple);

  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;

  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease;
}

.page-articles .articles-search a:hover{
  background: rgba(110,46,188,.10);
  border-color: rgba(110,46,188,.40);
  transform: translateY(-1px);
}

.page-articles .articles-search a:active{
  transform: translateY(0);
}

/* Reset as <button type="reset"> */
.page-articles .articles-search button[type="reset"],
.page-articles .articles-search .articles-reset-btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 12px 16px;
  border-radius: 6px;          /* REQUIRED */

  border: 1px solid rgba(110,46,188,.28);
  background: rgba(110,46,188,.06);
  color: var(--purple);

  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;

  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.page-articles .articles-search button[type="reset"]:hover,
.page-articles .articles-search .articles-reset-btn:hover{
  background: rgba(110,46,188,.10);
  border-color: rgba(110,46,188,.40);
  transform: translateY(-1px);
}

/* =========================
   RESPONSIVE - 992 / 768 / 480
========================= */

@media (max-width: 992px){
  .page-articles .articles-filters{ gap: 10px; }
  .page-articles .articles-search{ gap: 10px; }

  .page-articles .articles-search input[type="search"]{
    width: min(520px, 100%);
  }
}

@media (max-width: 768px){
  .page-articles .articles-search{
    gap: 10px;
  }

  .page-articles .articles-search input[type="search"]{
    width: 100%;
  }

  .page-articles .articles-search button,
  .page-articles .articles-search input[type="submit"],
  .page-articles .articles-search .articles-search-btn,
  .page-articles .articles-search a,
  .page-articles .articles-search button[type="reset"],
  .page-articles .articles-search .articles-reset-btn{
    width: 100%;
  }

  /* Icon stays aligned when input becomes full-width */
  .page-articles .articles-search::before{
    top: 22px;
  }
}

@media (max-width: 480px){
  .page-articles .articles-filters{
    gap: 8px;
    margin-bottom: 16px;
  }

  .page-articles .articles-filters a,
  .page-articles .articles-filters button{
    font-size: 12.5px;
    padding: 10px 12px;
  }

  .page-articles .articles-search{
    margin-bottom: 26px;
  }

  .page-articles .articles-search input[type="search"]{
    font-size: 13.5px;
    padding: 12px 12px 12px 40px;
  }

  .page-articles .articles-search button,
  .page-articles .articles-search input[type="submit"],
  .page-articles .articles-search .articles-search-btn,
  .page-articles .articles-search a,
  .page-articles .articles-search button[type="reset"],
  .page-articles .articles-search .articles-reset-btn{
    font-size: 13.5px;
    padding: 12px 14px;
  }

  .page-articles .articles-search::before{
    left: 12px;
  }
}

/* =========================================================
       NEWS GRID (ARTICLES PAGE)
       - Matches homepage section width behavior (1200px)
       - SECTION owns the side padding (18px)
       - INNER is max-width 1200px with padding:0
========================================================= */

.page-articles .news-section{
  width: 100%;
  background: #fff;
  padding: 120px 18px 90px;   
  overflow: hidden;
  box-sizing: border-box;
}

.page-articles .news-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0;                  
  box-sizing: border-box;
}

.page-articles .news-title{
  font-size: 44px;
  font-weight: 600;
  color: var(--purple);
  text-align: center;
  margin-bottom: 45px;
}

/* Grid */
.page-articles .news-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
}

/* Card */
.page-articles .news-card{
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  background: #fff;
}

.page-articles .news-card-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Image */
.page-articles .news-img{
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #111;
}

.page-articles .news-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay gradient */
.page-articles .news-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.55) 100%
  );
  pointer-events: none;
}

/* Tag */
.page-articles .news-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 3;
}

/* Tag colors */
.news-tag.tag-teal{ background: rgba(0,199,170,.95); color:#fff; }
.news-tag.tag-red{ background: rgba(232,67,67,.95); color:#fff; }
.news-tag.tag-gold{ background: rgba(247,184,52,.95); color:#241600; }
.news-tag.tag-default{ background: rgba(255,255,255,.90); color: rgba(0,0,0,.75); }

/* Headline overlay */
.page-articles .news-img .news-headline{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Body */
.page-articles .news-body{
  padding: 18px 18px 22px;
}

/* Excerpt */
.page-articles .news-body p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0,0,0,.62);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button */
.page-articles .news-readmore{
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.75);
}

/* Pagination */
.page-articles .news-bottom-bar{
  margin-top: 55px;
  background: var(--purple);
  padding: 26px;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.page-articles .news-bottom-btn{
  background: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(0,0,0,.8);
}

/* Responsive Grid */
@media (max-width: 992px){
  .page-articles .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .page-articles .news-section{ padding: 120px 14px 90px; } 
  .page-articles .news-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .page-articles .news-section{ padding: 120px 12px 90px; } 
  .page-articles .news-img{ height: 200px; }
  .page-articles .news-img .news-headline{ font-size: 17px; bottom: 16px; }
  .page-articles .news-body{ padding: 16px 16px 20px; }
}

/* =========================================================
   SINGLE ARTICLE PAGE (article.php)
========================================================= */

body.page-article{
  padding-top: var(--header-h);
}

.article-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 18px;
}

.article-hero{
  width: 100%;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 30px;
}

.article-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-title{
  font-size: 42px;
  font-weight: 800;
  color: var(--purple);
  margin: 0 0 18px;
}

.article-meta{
  font-size: 14px;
  color: rgba(0,0,0,.55);
  margin-bottom: 28px;
}

.article-content{
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0,0,0,.70);
}

@media (max-width: 768px){
  .article-title{
    font-size: 32px;
  }

  .article-hero{
    height: 320px;
  }
}

@media (max-width: 480px){
  .article-title{
    font-size: 26px;
  }

  .article-hero{
    height: 240px;
  }
}

/* =========================
   HYU ARTICLE ENGAGEMENT (REFERENCE-LIKE UI)
   Scoped: only #hyuEngagement .hyu-*
   Responsive: 992 / 768 / 480
========================= */

#hyuEngagement{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Bar */
#hyuEngagement .hyu-engagement-bar{
  position: relative; /* REQUIRED for reactions popover positioning */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}

/* Like wrap (anchors popover to the Like area, not the entire bar) */
#hyuEngagement .hyu-like-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* Like button */
#hyuEngagement .hyu-like-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#6a2dbf;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  box-shadow:none;
}
#hyuEngagement .hyu-like-btn i{ color: currentColor; }
#hyuEngagement .hyu-like-btn:hover{
  transform:none;
  box-shadow:none;
}
#hyuEngagement .hyu-like-btn.is-liked{
  background:rgba(106,45,191,.08);
  border-color:rgba(106,45,191,.28);
}

/* =================================
   LEFT BUTTON REACTION COLORS
================================= */

#hyuEngagement .hyu-like-btn.r-like{
  color:#6a2dbf; /* purple */
}

#hyuEngagement .hyu-like-btn.r-love{
  color:#e53935; /* red */
}

#hyuEngagement .hyu-like-btn.r-support{
  color:#8e44ad; /* deep purple */
}

#hyuEngagement .hyu-like-btn.r-insight{
  color:#f4b400; /* gold */
}

#hyuEngagement .hyu-like-btn.r-celebrate{
  color:#00a86b; /* green */
}

/* Optional: make the background tint match the reaction when liked */
#hyuEngagement .hyu-like-btn.is-liked.r-like{
  background: rgba(106,45,191,.08);
  border-color: rgba(106,45,191,.28);
}
#hyuEngagement .hyu-like-btn.is-liked.r-love{
  background: rgba(229,57,53,.08);
  border-color: rgba(229,57,53,.28);
}
#hyuEngagement .hyu-like-btn.is-liked.r-support{
  background: rgba(142,68,173,.08);
  border-color: rgba(142,68,173,.28);
}
#hyuEngagement .hyu-like-btn.is-liked.r-insight{
  background: rgba(244,180,0,.10);
  border-color: rgba(244,180,0,.35);
}
#hyuEngagement .hyu-like-btn.is-liked.r-celebrate{
  background: rgba(0,168,107,.10);
  border-color: rgba(0,168,107,.35);
}

#hyuEngagement .hyu-like-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* =========================
            Popover
========================= */
#hyuEngagement .hyu-react-pop{
  position: absolute;
  left: 0;
  top: -86px;                 /* higher because it’s bigger */
  display: flex;
  align-items: center;
  gap: 12px;                  /* a little more breathing room */
  padding: 12px 14px;         /* bigger “pill” like LinkedIn */
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);

  /* NO SHADOW */
  box-shadow: none;

  opacity: 0;
  pointer-events: none;

  /* smoother entrance */
  transform: translateY(12px) scale(.98);
  transition:
    opacity .22s ease,
    transform .22s cubic-bezier(.2,.9,.2,1);

  z-index: 50;
  will-change: transform, opacity;
}

#hyuEngagement .hyu-react-pop.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Ensure circle content is perfectly centered */
#hyuEngagement .hyu-react-circle{
  display:flex;
  align-items:center;
  justify-content:center;
}

#hyuEngagement .hyu-react-btn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  line-height:1;
}

#hyuEngagement .hyu-react-circle{
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:15px;

  transform: translateY(0) scale(1);
  transition: transform .30s cubic-bezier(.22,.8,.2,1);
  will-change: transform;
}

#hyuEngagement .hyu-react-btn:hover .hyu-react-circle{
  transform: translateY(-12px) scale(1.30);
}

/* brand-friendly reaction colors */
#hyuEngagement .hyu-react-circle.like{ background:#6a2dbf; }      /* purple */
#hyuEngagement .hyu-react-circle.love{ background:#e53935; }      /* red */
#hyuEngagement .hyu-react-circle.support{ background:#8e44ad; }   /* deep purple */
#hyuEngagement .hyu-react-circle.insight{ background:#f4b400; }   /* gold */
#hyuEngagement .hyu-react-circle.celebrate{ background:#00a86b; } /* green */

/* =========================
   RIGHT-SIDE REACTION SUMMARY (LinkedIn-like icons)
========================= */

#hyuEngagement .hyu-react-summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:4px;
}

#hyuEngagement .hyu-react-mini{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}
#hyuEngagement .hyu-react-mini i{
  font-size:10px;
  color:#fff;
  line-height:1;
}

/* summary colors (match popover intent, still brand-friendly) */
#hyuEngagement .hyu-react-mini.like{ background:#6a2dbf; }
#hyuEngagement .hyu-react-mini.love{ background:#e53935; }
#hyuEngagement .hyu-react-mini.support{ background:#8e44ad; }
#hyuEngagement .hyu-react-mini.insight{ background:#f4b400; }
#hyuEngagement .hyu-react-mini.celebrate{ background:#00a86b; }

/* Meta */
#hyuEngagement .hyu-engagement-meta{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
  color:rgba(0,0,0,.70);
  font-weight:700;
  text-align:right;
}
#hyuEngagement .hyu-dot{ opacity:.45; }

#hyuEngagement .hyu-login-hint{ font-weight:700; }
#hyuEngagement .hyu-login-hint a{
  color:#6a2dbf;
  font-weight:900;
  text-decoration:none;
  border-bottom:1px solid rgba(106,45,191,.35);
}
#hyuEngagement .hyu-login-hint a:hover{
  border-bottom-color:rgba(106,45,191,.75);
}

#hyuEngagement .hyu-eng-msg{
  margin-top:10px;
  font-weight:800;
  color:rgba(0,0,0,.72);
}
#hyuEngagement .hyu-eng-msg.is-error{ color:#b3261e; }
#hyuEngagement .hyu-eng-msg.is-ok{ color:#1a7f37; }

/* Comments */
#hyuEngagement .hyu-comments{ margin-top:16px; }
#hyuEngagement .hyu-comments-title{
  margin:0 0 10px;
  font-size:20px;
  font-weight:900;
  color:#111;
}

/* Form */
#hyuEngagement .hyu-comment-form{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:16px;
  padding:12px;
  box-shadow:none;
}

#hyuEngagement .hyu-composer{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}

/* Contenteditable editor */
#hyuEngagement .hyu-editor{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:12px 14px;
  outline:none;
  min-height:110px;
  line-height:1.5;
  font-family:inherit;
  box-sizing:border-box;
}
#hyuEngagement .hyu-editor:focus{
  border-color:rgba(106,45,191,.35);
  box-shadow:none;
}
#hyuEngagement .hyu-editor.is-empty:before{
  content: attr(data-placeholder);
  color: rgba(0,0,0,.45);
  font-weight:600;
}
#hyuEngagement .hyu-editor img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  margin-top:10px;
  display:block;
}

#hyuEngagement .hyu-composer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:2px;
}

#hyuEngagement .hyu-composer-tools{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

#hyuEngagement .hyu-tool-btn{
  border:0;
  background:transparent;
  padding:8px 8px;
  border-radius:0;
  cursor:pointer;
  line-height:1;
  color:rgba(0,0,0,.72);
  box-shadow:none;
  transition:color .12s ease;
}
#hyuEngagement .hyu-tool-btn i{ font-size:15px; }
#hyuEngagement .hyu-tool-btn:hover{
  background:transparent;
  color:#6a2dbf;
}
#hyuEngagement .hyu-tool-btn:hover i{
  color:#6a2dbf;
}

#hyuEngagement .hyu-tool-sep{
  width:1px;
  height:18px;
  background:rgba(0,0,0,.12);
  margin:0 2px;
}

#hyuEngagement .hyu-composer-actions{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

#hyuEngagement .hyu-post-btn{
  background:#6a2dbf;
  color:#fff;
  border:1px solid #6a2dbf;
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition:filter .12s ease;
  box-shadow:none;
}
#hyuEngagement .hyu-post-btn:hover{
  filter:brightness(1.05);
  transform:none;
  box-shadow:none;
}

#hyuEngagement .hyu-cancel-btn{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.14);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:none;
}

/* Emoji popover */
#hyuEngagement .hyu-emoji-pop{
  position:absolute;
  left:12px;
  bottom:58px;
  display:none;
  gap:6px;
  padding:10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  z-index:20;
}
#hyuEngagement .hyu-emoji-pop.is-open{ display:flex; }
#hyuEngagement .hyu-emoji-pop button{
  border:0;
  background:transparent;
  border-radius:0;
  padding:8px 10px;
  cursor:pointer;
  font-size:18px;
  box-shadow:none;
}
#hyuEngagement .hyu-emoji-pop button:hover{
  background:transparent;
  color:#6a2dbf;
}

/* List */
#hyuEngagement .hyu-comments-list{ margin-top:14px; }
#hyuEngagement .hyu-empty{
  margin-top:10px;
  color:rgba(0,0,0,.65);
  font-weight:800;
}

/* Comment cards (avatar + body) */
#hyuEngagement .hyu-comment{
  display:flex;
  gap:12px;
  padding:14px 14px;
  margin:12px 0;
  border:none;
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}

#hyuEngagement .hyu-c-avatar{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(106,45,191,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
#hyuEngagement .hyu-c-avatar-letter{
  font-weight:900;
  color:#6a2dbf;
}

#hyuEngagement .hyu-c-body{
  min-width:0;
  flex:1 1 auto;
}

#hyuEngagement .hyu-c-top{
  display:flex;
  align-items:baseline;
  justify-content:flex-start; 
  gap:10px;
  flex-wrap:nowrap;         
}

#hyuEngagement .hyu-comment-name{
  font-weight:900;
  color:#111;
}

#hyuEngagement .hyu-comment-date{
  margin-left:0;
}

#hyuEngagement .hyu-comment-text{
  margin-top:8px;
  color:rgba(0,0,0,.82);
  line-height:1.55;
}

/* Posted comment images (NOT editor images) */
#hyuEngagement .hyu-comment-text img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
  margin-top:10px;
}

/* Desktop cap so comments don't look huge */
@media (min-width: 992px){
  #hyuEngagement .hyu-comment-text img{
    max-width:220px;
  }
}

/* Action row under comment */
#hyuEngagement .hyu-c-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:14px;
}

#hyuEngagement .hyu-c-like{
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(0,0,0,.70);
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
  transition:color .12s ease;
}
#hyuEngagement .hyu-c-like i{ font-size:16px; }
#hyuEngagement .hyu-c-like.is-liked{ color:#6a2dbf; }
#hyuEngagement .hyu-c-like:disabled{
  opacity:.55;
  cursor:not-allowed;
}

#hyuEngagement .hyu-reply-btn{
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(0,0,0,.70);
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
  transition:color .12s ease;
}
#hyuEngagement .hyu-reply-btn i{ font-size:16px; }

#hyuEngagement .hyu-reply-btn:hover,
#hyuEngagement .hyu-c-like:hover{
  background:transparent;
  color:#6a2dbf;
}

/* =========================
            REPLIES
========================= */
#hyuEngagement .hyu-replies{
  position:relative;
  margin-top:10px;

  /* ONE consistent indent for ALL replies */
  padding-left:54px;

  /* we draw our own single line */
  border-left:0;
}

/* Single vertical thread line (only once) */
#hyuEngagement .hyu-replies:before{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  bottom:0;
  width:2px;
  background: rgba(106,45,191,.18);
  border-radius:2px;
}

/* IMPORTANT: prevent deeper replies from creating more indents/lines */
#hyuEngagement .hyu-replies .hyu-replies{
  padding-left:0;
  margin-top:10px;
}
#hyuEngagement .hyu-replies .hyu-replies:before{
  content:none;
}

/* Reply items stay “inline” (no extra card look) */
#hyuEngagement .hyu-replies .hyu-comment{
  margin:10px 0 0;
  background:transparent;
  border:0;
  border-radius:0;
  padding:10px 0 0;
  box-shadow:none;
}

/* =========================
   RESPONSIVE: 992
========================= */
@media (max-width: 992px){
  #hyuEngagement .hyu-engagement-bar{
    padding:12px 12px;
  }

  #hyuEngagement .hyu-engagement-meta{
    margin-left:0;
    text-align:left;
    justify-content:flex-start;
    width:100%;
  }

  /* popover anchors to like wrap; no need for hard left offset */
  #hyuEngagement .hyu-react-pop{
    left: 0;
    top: -64px;
  }
}

/* =========================
   RESPONSIVE: 768
========================= */
@media (max-width: 768px){
  #hyuEngagement .hyu-like-btn{
    width:100%;
    justify-content:center;
  }

  /* keep wrapper full width when button becomes full width */
  #hyuEngagement .hyu-like-wrap{
    width:100%;
    justify-content:center;
  }

  #hyuEngagement .hyu-composer-actions{
    width:100%;
    justify-content:flex-end;
    margin-left:0;
  }

  #hyuEngagement .hyu-emoji-pop{
    left:10px;
    bottom:66px;
  }

  /* Popover: keep it easy to reach on mobile */
  #hyuEngagement .hyu-react-pop{
    left: 50%;
    transform: translate(-50%, 8px);
  }
  #hyuEngagement .hyu-react-pop.is-open{
    transform: translate(-50%, 0);
  }
  
    /* Replies: keep ONE indent on mobile too */
  #hyuEngagement .hyu-replies{ padding-left:42px; }
  #hyuEngagement .hyu-replies:before{ left:16px; }
  #hyuEngagement .hyu-replies .hyu-replies{ padding-left:0; }
}

/* =========================
   RESPONSIVE: 480
========================= */
@media (max-width: 480px){
  #hyuEngagement{
    margin-top: 18px;
    padding-top: 14px;
  }

  #hyuEngagement .hyu-engagement-bar{
    border-radius:14px;
    padding:10px 10px;
    gap:10px;
  }

  #hyuEngagement .hyu-like-btn{
    padding:10px 12px;
  }

  #hyuEngagement .hyu-comments-title{
    font-size:18px;
  }

  #hyuEngagement .hyu-comment{
    padding:12px 12px;
    border-radius:14px;
  }

  #hyuEngagement .hyu-c-avatar{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  /* Popover: slightly tighter on very small screens */
  #hyuEngagement .hyu-react-pop{
    gap:8px;
    padding:9px 10px;
    top: -62px;
  }
  #hyuEngagement .hyu-react-circle{
    width:38px;
    height:38px;
    font-size:15px;
  }
  
    /* Replies: keep ONE indent on very small screens */
  #hyuEngagement .hyu-replies{ padding-left:36px; }
  #hyuEngagement .hyu-replies:before{ left:14px; }
  #hyuEngagement .hyu-replies .hyu-replies{ padding-left:0; }
}

#hyuEngagement .hyu-edit-btn{
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(0,0,0,.70);
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
  transition:color .12s ease;
}
#hyuEngagement .hyu-edit-btn i{ font-size:16px; }
#hyuEngagement .hyu-edit-btn:hover{ color:#6a2dbf; }

#hyuEngagement .hyu-is-hidden{ display:none !important; }
#hyuEngagement .hyu-load-more{
  background: transparent;
  border: 0;
  padding: 10px 0;
  font-weight: 700;
  color: #6b2bd1;
  cursor: pointer;
}

/* =========================
   reply collapsing
========================= */
#hyuEngagement .hyu-is-hidden-reply{ display:none !important; }

#hyuEngagement .hyu-view-more-replies{
  background: transparent;
  border: 0;
  padding: 8px 0 0;
  font-weight: 700;
  color: #6b2bd1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ================================
   ABOUT PAGE BANNER
   - Large image banner
   - Dark overlay ONLY on image
   - Solid teal shape block (no overlay)
   - Text left + centered
   - Responsive: 992 / 768 / 480
================================ */

.about-banner{
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
  background: url("images/about/Blue-Sky.jpg") center/cover no-repeat;
}

/* Teal Shape Block (NO overlay on it) */
.about-banner::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: #12d6cf;
  z-index: 1;
}

/* Overlay ONLY on the IMAGE area */
.about-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 120px);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Inner container */
.about-banner-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* Left-centered heading */
.about-banner-inner h1{
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 500;
  color: #fff;
  margin: 0;
}

/* =========================
   992
========================= */
@media (max-width: 992px){
  .about-banner{ height: 380px; }
  .about-banner::after{ height: 110px; }
  .about-banner-overlay{ height: calc(100% - 110px); }
  .about-banner-inner{ padding: 0 18px; }
  .about-banner-inner h1{ font-size: clamp(2.6rem, 6vw, 4rem); }
}

/* =========================
   768
========================= */
@media (max-width: 768px){
  .about-banner{ height: 340px; }
  .about-banner::after{ height: 100px; }
  .about-banner-overlay{ height: calc(100% - 100px); }
  .about-banner-inner{ padding: 0 14px; }
  .about-banner-inner h1{ font-size: clamp(2.2rem, 7vw, 3.3rem); }
}

/* =========================
   480
========================= */
@media (max-width: 480px){
  .about-banner{ height: 300px; }
  .about-banner::after{ height: 92px; }
  .about-banner-overlay{ height: calc(100% - 92px); }
  .about-banner-inner{ padding: 0 12px; }
  .about-banner-inner h1{ font-size: clamp(1.9rem, 8.2vw, 2.7rem); }
}

/* ================================
   ABOUT INTRO (IMAGE + TEXT)
   - Matches site standard: section owns 18px padding
   - Inner is max-width with padding: 0
   - Uses minmax(0,fr) to prevent width push / inconsistency
   - Motion: scroll reveal (image + text) + soft shadow settle
================================ */

.about-intro{
  width: 100%;
  background: #fff;
  padding: 70px 18px 0;
  box-sizing: border-box;
}

.about-intro-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

/* keep grid children from forcing layout width */
.about-intro-media,
.about-intro-copy{
  min-width: 0;
}

/* Image card */
.about-intro-media{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;

  /* base (revealed) shadow */
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);

  box-sizing: border-box;
}

.about-intro-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-intro-copy{
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
}

.about-intro-copy p{
  margin: 0 0 18px 0;
  color: #8a8a8a;
  font-size: 16px;
  line-height: 1.7;
}

.about-intro-copy p strong{
  color: #6f6f6f;
  font-weight: 700;
}

/* =========================================
   SCROLL REVEAL MOTION (subtle + elegant)
   - Image: fade + up
   - Text: fade + up (delayed)
   - Shadow “settle” (tightens slightly)
   - No width/layout changes
========================================= */

.about-intro-media,
.about-intro-copy{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* start with a slightly “looser” shadow then settle */
.about-intro-media{
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1),
    box-shadow 750ms cubic-bezier(.2,.8,.2,1);
}

/* delay only on text block (120–180ms) */
.about-intro-copy{
  transition-delay: 160ms;
}

/* revealed state */
.about-intro.is-revealed .about-intro-media,
.about-intro.is-revealed .about-intro-copy{
  opacity: 1;
  transform: translateY(0);
}

/* shadow tightens when revealed */
.about-intro.is-revealed .about-intro-media{
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .about-intro-media,
  .about-intro-copy{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .about-intro-media{
    box-shadow: 0 8px 22px rgba(0,0,0,0.12) !important;
  }
}

/* Responsive */
@media (max-width: 992px){
  .about-intro{
    padding: 70px 18px 0;
  }

  .about-intro-inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-intro-copy{
    max-width: 100%;
  }
}

@media (max-width: 768px){
  .about-intro{
    padding: 70px 18px 0;
  }
}

@media (max-width: 480px){
  .about-intro{
    padding: 70px 18px 0;
  }
}

/* ================================
   ABOUT FOCUS (TEXT + IMAGE)
   - Section owns side padding (18px)
   - Inner is max-width with padding:0
   - Grid uses minmax(0,fr) like your standard
   - Motion: scroll reveal (copy + image) + soft shadow settle
================================ */

.about-focus{
  width: 100%;
  background: #fff;
  padding: 70px 18px;
  box-sizing: border-box;
}

.about-focus-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* prevent grid children from pushing width */
.about-focus-copy,
.about-focus-media{
  min-width: 0;
}

.about-focus-copy h2{
  margin: 0 0 18px;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  color: var(--purple);
}

.about-focus-list{
  margin: 0;
  padding-left: 0;
  list-style: none;

  display: grid;
  gap: 10px;

  color: rgba(0,0,0,.45);
  font-size: 15px;
  line-height: 1.6;
}

.about-focus-list li{
  position: relative;
  padding-left: 14px;
}

/* subtle bullet dot like your mock */
.about-focus-list li::before{
  content: ".";
  position: absolute;
  left: 0;
  top: -2px;
  color: rgba(0,0,0,.35);
  font-weight: 700;
}

/* Image card */
.about-focus-media{
  width: 100%;
  border-radius: 8px;
  overflow: hidden;

  /* revealed shadow */
  box-shadow: 0 10px 26px rgba(0,0,0,.10);

  box-sizing: border-box;
}

.about-focus-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================
   SCROLL REVEAL MOTION (subtle + elegant)
   - Copy: fade + up
   - Image: fade + up
   - Delay on copy
   - Shadow settles slightly
========================================= */

.about-focus-copy,
.about-focus-media{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* start with a slightly looser shadow */
.about-focus-media{
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1),
    box-shadow 750ms cubic-bezier(.2,.8,.2,1);
}

/* delay on text block */
.about-focus-copy{
  transition-delay: 160ms;
}

/* revealed state */
.about-focus.is-revealed .about-focus-copy,
.about-focus.is-revealed .about-focus-media{
  opacity: 1;
  transform: translateY(0);
}

/* shadow tightens when revealed */
.about-focus.is-revealed .about-focus-media{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .about-focus-copy,
  .about-focus-media{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .about-focus-media{
    box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  }
}

/* =========================
   Responsive (matches your pattern)
========================= */

@media (max-width: 992px){
  .about-focus{
    padding: 70px 18px;
  }

  .about-focus-inner{
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 768px){
  .about-focus{
    padding: 60px 14px;
  }
}

@media (max-width: 480px){
  .about-focus{
    padding: 50px 12px;
  }

  .about-focus-copy h2{
    font-size: 30px;
  }
}

/* ================================
   OUR PHILOSOPHY (STATEMENT BAR)
   - Full width color bar
   - Centered heading + copy
   - Matches site padding pattern (18/14/12)
   - MOTION: fade + slight up + small stagger
================================ */

.about-philosophy{
  width: 100%;
  background: #e74a43;  /* red from prototype */
  padding: 70px 18px;
  box-sizing: border-box;
}

.about-philosophy-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;

  text-align: center;
}

.about-philosophy-inner h2{
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.2px;
}

.about-philosophy-inner p{
  margin: 0 auto;
  max-width: 860px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

/* =========================================
   SCROLL REVEAL MOTION (Philosophy only)
   - Heading: fade + up
   - Paragraph: fade + up (delayed)
========================================= */

.about-philosophy-inner h2,
.about-philosophy-inner p{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* small delay on paragraph */
.about-philosophy-inner p{
  transition-delay: 160ms;
}

/* revealed state */
.about-philosophy.is-revealed .about-philosophy-inner h2,
.about-philosophy.is-revealed .about-philosophy-inner p{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .about-philosophy-inner h2,
  .about-philosophy-inner p{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive (match your site) */
@media (max-width: 768px){
  .about-philosophy{
    padding: 60px 14px;
  }

  .about-philosophy-inner p{
    font-size: 17px;
  }
}

@media (max-width: 480px){
  .about-philosophy{
    padding: 52px 12px;
  }

  .about-philosophy-inner p{
    font-size: 16px;
  }
}

/* ================================
   ABOUT SUPPORT (IMAGE + LIST)
   - Section owns padding (18px)
   - Inner is max-width 1200 with padding:0
   - Grid uses minmax(0,fr) to prevent width push
   - MOTION: fade + slight up + delay + shadow settle
================================ */

.about-support{
  width: 100%;
  background: #fff;
  padding: 80px 18px;
  box-sizing: border-box;
}

.about-support-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

/* prevent grid items from forcing layout width */
.about-support-media,
.about-support-copy{
  min-width: 0;
}

/* Image card */
.about-support-media{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;

  /* revealed shadow */
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);

  box-sizing: border-box;
}

.about-support-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Copy */
.about-support-copy h2{
  margin: 0 0 18px;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  color: var(--purple);
}

/* Dot list */
.about-support-list{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 10px;

  color: rgba(0,0,0,.45);
  font-size: 15px;
  line-height: 1.6;
}

.about-support-list li{
  position: relative;
  padding-left: 14px;
}

.about-support-list li::before{
  content: ".";
  position: absolute;
  left: 0;
  top: -2px;
  color: rgba(0,0,0,.35);
  font-weight: 700;
}

/* =========================================
   SCROLL REVEAL MOTION (About Support only)
   - Image: fade + up
   - Copy: fade + up (delayed)
   - Shadow settles (tightens slightly)
========================================= */

.about-support-media,
.about-support-copy{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* start with slightly looser shadow */
.about-support-media{
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1),
    box-shadow 750ms cubic-bezier(.2,.8,.2,1);
}

/* delay the text/list side */
.about-support-copy{
  transition-delay: 160ms;
}

/* revealed state */
.about-support.is-revealed .about-support-media,
.about-support.is-revealed .about-support-copy{
  opacity: 1;
  transform: translateY(0);
}

/* shadow tightens when revealed */
.about-support.is-revealed .about-support-media{
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .about-support-media,
  .about-support-copy{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .about-support-media{
    box-shadow: 0 8px 22px rgba(0,0,0,0.12) !important;
  }
}

/* =========================
   Responsive
========================= */

@media (max-width: 992px){
  .about-support{
    padding: 70px 18px;
  }

  .about-support-inner{
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 768px){
  .about-support{
    padding: 60px 14px;
  }
}

@media (max-width: 480px){
  .about-support{
    padding: 50px 12px;
  }

  .about-support-copy h2{
    font-size: 30px;
  }
}

/* ================================
   CORE VALUES (GRID) — EXACT LIKE DESIGN
   - Title centered
   - 3x2 grid: ALL tiles equal
   - Labels centered in each image
   - Uses your standard padding + container
   - MOTION (DIFFERENT): title reveal + staggered tile reveal
   - HOVER: per-tile image zoom (smooth return)
================================ */

.core-values{
  width: 100%;
  background: #f6f4fb;
  padding: 70px 18px;
  margin-bottom: 70px;
  box-sizing: border-box;
}

.core-values-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.core-values-title{
  margin: 0 0 34px;
  text-align: center;
  font-size: 34px;
  font-weight: 600;
  color: rgba(0,0,0,.55);
  letter-spacing: -0.2px;
}

.core-values-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: 6px;

  aspect-ratio: 3 / 2;
}

.core-card{
  position: relative;
  overflow: hidden;
  background: #111;
  min-width: 0;
  min-height: 0;
}

.core-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* HOVER MOTION (per tile) */
  transform: scale(1);
  transition: transform 650ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* Hover zoom effect (only the tile you're on) */
.core-card:hover img{
  transform: scale(1.06);
}

/* subtle dark overlay for readable white text */
.core-card-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}

.core-card h3{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  margin: 0;
  padding: 0 18px;
  width: 100%;
  text-align: center;

  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}

/* =========================================
   SCROLL REVEAL MOTION (Core Values only)
   - Title: fade + up
   - Cards: fade + up with stagger (delay set by JS)
   - No resizing, no grid changes
========================================= */

.core-values-title,
.core-card{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* revealed */
.core-values.is-revealed .core-values-title,
.core-values.is-revealed .core-card{
  opacity: 1;
  transform: translateY(0);
}

/* keep everything accessible */
@media (prefers-reduced-motion: reduce){
  .core-values-title,
  .core-card{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .core-card img{
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   Responsive (your pattern)
========================= */

@media (max-width: 992px){
  .core-values{ padding: 70px 18px; }

  .core-values-title{
    font-size: 30px;
    margin-bottom: 28px;
  }

  .core-values-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: 2 / 3;
  }

  .core-card h3{
    font-size: 26px;
  }
}

@media (max-width: 768px){
  .core-values{ padding: 60px 14px; }
}

@media (max-width: 480px){
  .core-values{ padding: 52px 12px; }

  .core-values-grid{
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .core-card{
    height: 220px;
  }

  .core-card h3{
    font-size: 24px;
  }
}

/* ================================
   SERVICES PAGE BANNER
   - Large image banner
   - Dark overlay ONLY on image
   - Solid yellow shape block (no overlay)
   - Text left + centered
   - Responsive: 992 / 768 / 480
================================ */

.services-banner{
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
  background: url("images/services/Featured-Services-Banner.jpg") center/cover no-repeat;
}

/* Shape Block (NO overlay on it) */
.services-banner::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: #FDC332;
  z-index: 1;
}

/* Overlay ONLY on the IMAGE area */
.services-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 120px);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Inner container */
.services-banner-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* Left-centered heading */
.services-banner-inner h1{
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 500;
  color: #fff;
  margin: 0;
}

/* =========================
   992
========================= */
@media (max-width: 992px){
  .services-banner{ height: 380px; }
  .services-banner::after{ height: 110px; }
  .services-banner-overlay{ height: calc(100% - 110px); }
  .services-banner-inner{ padding: 0 18px; }
  .services-banner-inner h1{ font-size: clamp(2.6rem, 6vw, 4rem); }
}

/* =========================
   768
========================= */
@media (max-width: 768px){
  .services-banner{ height: 340px; }
  .services-banner::after{ height: 100px; }
  .services-banner-overlay{ height: calc(100% - 100px); }
  .services-banner-inner{ padding: 0 14px; }
  .services-banner-inner h1{ font-size: clamp(2.2rem, 7vw, 3.3rem); }
}

/* =========================
   480
========================= */
@media (max-width: 480px){
  .services-banner{ height: 300px; }
  .services-banner::after{ height: 92px; }
  .services-banner-overlay{ height: calc(100% - 92px); }
  .services-banner-inner{ padding: 0 12px; }
  .services-banner-inner h1{ font-size: clamp(1.9rem, 8.2vw, 2.7rem); }
}

/* ================================
   FEATURED SERVICES INTRO SECTION
   - Uses SAME max-width behavior as site sections
   - Inner matches container max width (var--container-max)
   - Paragraph has controlled readable measure
   - Responsive: 992 / 768 / 480
================================ */

.services-intro{
  width: 100%;
  background: #fff;
  padding: 70px 18px;
  box-sizing: border-box;
}

.services-intro-inner{
  width: 100%;
  max-width: var(--container-max);  
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.services-intro-inner p{
  margin: 0 auto;
  max-width: var(--container-max);
  font-size: 20px;
  line-height: 1.75;
  font-weight: 400;
  color: rgba(0,0,0,.45);
  letter-spacing: 0.1px;
}

/* =========================
   Responsive Optimizations
========================= */

@media (max-width: 992px){
  .services-intro{
    padding: 70px 18px;
  }

  .services-intro-inner p{
    max-width: 900px;
    font-size: 19px;
  }
}

@media (max-width: 768px){
  .services-intro{
    padding: 70px 14px;
  }

  .services-intro-inner p{
    max-width: 100%;
    font-size: 18px;
    line-height: 1.7;
  }
}

@media (max-width: 480px){
  .services-intro{
    padding: 60px 12px;
  }

  .services-intro-inner p{
    font-size: 16px;
    line-height: 1.65;
  }
}

/* ================================
   FEATURED SERVICES: DROPDOWN (ACCORDION)
   - Teal header bar + chevron
   - Image reveal with dark overlay
   - Uses your container max behavior
   - Responsive: 992 / 768 / 480
================================ */

.svc-accordion{
  width: 100%;
  background: #fff;
  padding-bottom: 70px;
  box-sizing: border-box;
}

.svc-acc-item{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto 22px;
  border-radius: 0; 
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.08);
}

/* HEADER BAR */
.svc-acc-head{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 26px 26px;
  border: 0;
  cursor: pointer;
  background: #16d6d1; /* teal bar */
  color: #111;

  text-align: left;
}

.svc-acc-title{
  font-size: clamp(22px, 2.5vw, 40px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.svc-acc-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.svc-acc-ico i{
  font-size: 34px;
  color: #111;
  transition: transform .18s ease;
}

/* Rotate chevron when open */
.svc-acc-item.is-open .svc-acc-ico i{
  transform: rotate(180deg);
}

/* PANEL (collapsible) */
.svc-acc-panel{
  overflow: hidden;
  height: 0;
}

/* When open, we set height via JS for smooth expand */
.svc-acc-item.is-open .svc-acc-panel{
  height: auto; /* JS will manage animation */
}

/* IMAGE AREA */
.svc-acc-media{
  position: relative;
  width: 100%;
  min-height: 420px;
  background: #111;
}

.svc-acc-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark overlay like screenshot */
.svc-acc-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.25) 55%,
    rgba(0,0,0,.10) 100%
  );
  pointer-events: none;
}

/* Caption bottom-left */
.svc-acc-caption{
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  z-index: 2;

  color: rgba(255,255,255,.92);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;

  max-width: 980px;
}

/* =========================
   Responsive: 992 / 768 / 480
========================= */

@media (max-width: 992px){
  .svc-accordion{ padding: 0 18px; }
  .svc-acc-head{ padding: 22px 22px; }
  .svc-acc-ico{ width: 52px; height: 52px; flex-basis: 52px; }
  .svc-acc-ico i{ font-size: 32px; }

  .svc-acc-media{ min-height: 380px; }
  .svc-acc-caption{
    left: 22px; right: 22px; bottom: 22px;
    font-size: 20px;
  }
}

@media (max-width: 768px){
  .svc-accordion{ padding: 0 14px; }
  .svc-acc-head{ padding: 20px 18px; }

  .svc-acc-ico{ width: 48px; height: 48px; flex-basis: 48px; }
  .svc-acc-ico i{ font-size: 30px; }

  .svc-acc-media{ min-height: 340px; }
  .svc-acc-caption{
    left: 18px; right: 18px; bottom: 18px;
    font-size: 18px;
    line-height: 1.32;
  }
}

@media (max-width: 480px){
  .svc-accordion{ padding: 0 12px; }
  .svc-acc-head{ padding: 18px 14px; }

  .svc-acc-title{
    font-size: 20px;
    line-height: 1.12;
  }

  .svc-acc-ico{ width: 44px; height: 44px; flex-basis: 44px; }
  .svc-acc-ico i{ font-size: 26px; }

  .svc-acc-media{ min-height: 300px; }
  .svc-acc-caption{
    left: 14px; right: 14px; bottom: 14px;
    font-size: 16px;
  }
}

/* =========================================
   DROPDOWN #2 COLOR VARIANT (GOLD + CORAL)
   - Gold header bar
   - Coral title + chevron
   - NO extra padding inside image area
   - Breakpoints: 992 / 768 / 480 (ALWAYS)
========================================= */

/* Gold header bar */
.svc-head-gold{
  background: #FDC332; 
}

/* Coral title text */
.svc-title-coral{
  color: #E94941; 
}

/* Coral chevron */
.svc-ico-coral i{
  color: #E94941;
}

/* =========================================
   IMAGE AREA (NO TOP PADDING)
   - Dropdown #2 must match Dropdown #1
   - Image stays full height
========================================= */

/* If svc-pad-top still exists in HTML, neutralize it */
.svc-pad-top{
  padding-top: 0 !important;
  box-sizing: border-box;
}

/* Image remains perfectly full */
.svc-pad-top img{
  inset: 0 !important;
  height: 100% !important;
}

/* =========================
   RESPONSIVE — YOUR STANDARD
   992 / 768 / 480
========================= */

@media (max-width: 992px){
  .svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 768px){
  .svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 480px){
  .svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

/* =========================================
   DROPDOWN #3 COLOR VARIANT (PURPLE + WHITE)
   - Purple header bar
   - White title + chevron
   - NO extra padding inside image area
   - Breakpoints: 992 / 768 / 480 (ALWAYS)
========================================= */

/* Purple header bar */
.svc-head-purple{
  background: var(--purple);
}

/* White title text */
.svc-title-white{
  color: #fff;
}

/* White chevron */
.svc-ico-white i{
  color: #fff;
}

/* =========================================
   IMAGE AREA (NO TOP PADDING)
   - Dropdown #3 must match Dropdown #1
   - Image stays full height
========================================= */

/* If svc-pad-top exists in HTML, neutralize it */
.svc-head-purple.svc-pad-top,
.svc-acc-media.svc-pad-top{
  padding-top: 0 !important;
  box-sizing: border-box;
}

/* Image remains perfectly full */
.svc-head-purple.svc-pad-top img,
.svc-acc-media.svc-pad-top img{
  inset: 0 !important;
  height: 100% !important;
}

/* =========================
   RESPONSIVE — YOUR STANDARD
   992 / 768 / 480
========================= */

@media (max-width: 992px){
  .svc-head-purple.svc-pad-top,
  .svc-acc-media.svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-head-purple.svc-pad-top img,
  .svc-acc-media.svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 768px){
  .svc-head-purple.svc-pad-top,
  .svc-acc-media.svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-head-purple.svc-pad-top img,
  .svc-acc-media.svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 480px){
  .svc-head-purple.svc-pad-top,
  .svc-acc-media.svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-head-purple.svc-pad-top img,
  .svc-acc-media.svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

/* =========================================
   DROPDOWN #4 COLOR VARIANT (CORAL + GOLD)
   - Coral/Red header bar
   - Gold title + chevron
   - Matches screenshot exactly
   - Breakpoints: 992 / 768 / 480 (ALWAYS)
========================================= */

/* Coral header bar */
.svc-head-coral{
  background: #E94941; 
}

/* Gold title text */
.svc-title-gold{
  color: #FDC332; 
}

/* Gold chevron */
.svc-ico-gold i{
  color: #FDC332;
}

/* =========================================
   IMAGE AREA (NO TOP PADDING)
   - Dropdown #4 matches Dropdown #1
   - Image stays full height
========================================= */

/* Neutralize padding helper if it exists */
.svc-head-coral.svc-pad-top,
.svc-acc-media.svc-pad-top{
  padding-top: 0 !important;
}

/* Image stays full */
.svc-head-coral.svc-pad-top img,
.svc-acc-media.svc-pad-top img{
  inset: 0 !important;
  height: 100% !important;
}

/* =========================
   RESPONSIVE — YOUR STANDARD
   992 / 768 / 480
========================= */

@media (max-width: 992px){
  .svc-head-coral.svc-pad-top,
  .svc-acc-media.svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-head-coral.svc-pad-top img,
  .svc-acc-media.svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 768px){
  .svc-head-coral.svc-pad-top,
  .svc-acc-media.svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-head-coral.svc-pad-top img,
  .svc-acc-media.svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 480px){
  .svc-head-coral.svc-pad-top,
  .svc-acc-media.svc-pad-top{
    padding-top: 0 !important;
  }

  .svc-head-coral.svc-pad-top img,
  .svc-acc-media.svc-pad-top img{
    inset: 0 !important;
    height: 100% !important;
  }
}

/* ================================
   CONTACT PAGE BANNER
   - Large image banner
   - Dark overlay ONLY on image
   - Solid red shape block (no overlay)
   - Text left + centered
   - Responsive: 992 / 768 / 480
================================ */

.contact-banner{
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
  background: url("images/contact/Red-Sunset.jpg") center/cover no-repeat;
}

/* Shape Block (NO overlay on it) */
.contact-banner::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: #E94941;
  z-index: 1;
}

/* Overlay ONLY on the IMAGE area */
.contact-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 120px);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Inner container */
.contact-banner-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* Left-centered heading */
.contact-banner-inner h1{
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 500;
  color: #fff;
  margin: 0;
}

/* =========================
   992
========================= */
@media (max-width: 992px){
  .contact-banner{ height: 380px; }
  .contact-banner::after{ height: 110px; }
  .contact-banner-overlay{ height: calc(100% - 110px); }
  .contact-banner-inner{ padding: 0 18px; }
  .contact-banner-inner h1{ font-size: clamp(2.6rem, 6vw, 4rem); }
}

/* =========================
   768
========================= */
@media (max-width: 768px){
  .contact-banner{ height: 340px; }
  .contact-banner::after{ height: 100px; }
  .contact-banner-overlay{ height: calc(100% - 100px); }
  .contact-banner-inner{ padding: 0 14px; }
  .contact-banner-inner h1{ font-size: clamp(2.2rem, 7vw, 3.3rem); }
}

/* =========================
   480
========================= */
@media (max-width: 480px){
  .contact-banner{ height: 300px; }
  .contact-banner::after{ height: 92px; }
  .contact-banner-overlay{ height: calc(100% - 92px); }
  .contact-banner-inner{ padding: 0 12px; }
  .contact-banner-inner h1{ font-size: clamp(1.9rem, 8.2vw, 2.7rem); }
}

/* ================================
   CONTACT (SPLIT IMAGE + FORM) — MATCH DESIGN
   - Left image panel
   - Right form panel
   - Soft card radius + clean inputs
   - Uses your container + padding pattern
   - Phone flags: intl-tel-input (NO manual country HTML)
   - MOTION: scroll reveal (image + panel) + soft “settle”
================================ */

.contact-split{
  width: 100%;
  background: #fff;
  padding: 80px 18px;
  box-sizing: border-box;
}

.contact-split-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;

  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* LEFT image */
.contact-split-media{
  position: relative;
  min-height: 620px;
  background: #f2f2f2;
}

.contact-split-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RIGHT panel */
.contact-split-panel{
  padding: 44px 42px 42px;
  box-sizing: border-box;
  background: #fff;
}

.contact-title{
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.2px;
}

.contact-sub{
  margin: 0 0 26px;
  color: rgba(0,0,0,.50);
  font-size: 14px;
  line-height: 1.55;
}

/* Form layout */
.contact-form{
  width: 100%;
}

.contact-row{
  margin-bottom: 16px;
}

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

.contact-field{
  min-width: 0;
}

.contact-field label{
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

.contact-field input,
.contact-field textarea{
  width: 100%;
  box-sizing: border-box;

  border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: #fff;

  font-size: 12.5px;
  color: rgba(0,0,0,.75);

  padding: 11px 12px;
  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color: rgba(0,0,0,.30);
}

/* Focus */
.contact-field input:focus,
.contact-field textarea:focus{
  border-color: rgba(110,46,188,.55);
  box-shadow: 0 0 0 3px rgba(110,46,188,.14);
}

/* Textarea + counter */
.contact-field textarea{
  min-height: 140px;
  resize: none;
  padding: 12px;
}

.contact-counter{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(0,0,0,.32);
}

/* Button */
.contact-actions{
  margin-top: 10px;
}

.contact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--purple);
  color: #fff;
  border: 0;
  border-radius: 4px;

  font-weight: 700;
  font-size: 13px;

  padding: 12px 18px;
  cursor: pointer;

  transition: filter .15s ease, transform .15s ease;
}

.contact-btn:hover{
  filter: brightness(.92);
  transform: translateY(-1px);
}

/* =========================================
   MOTION (CONTACT SPLIT ONLY)
   - Image: fade + up
   - Panel: fade + up (delayed)
   - No width/layout changes
========================================= */

.contact-split-media,
.contact-split-panel{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* delay the right panel slightly */
.contact-split-panel{
  transition-delay: 160ms;
}

/* revealed */
.contact-split.is-revealed .contact-split-media,
.contact-split.is-revealed .contact-split-panel{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .contact-split-media,
  .contact-split-panel{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================
   PHONE INPUT (intl-tel-input) — MATCH YOUR FORM
   - Full width
   - Same height as your other inputs
   - Same focus ring
========================================= */

.iti{
  width: 100%;
}

.iti__tel-input{
  width: 100%;
}

/* force the plugin input to match your field */
.iti input[type="tel"]{
  width: 100%;
  height: 38px;
  padding: 10px 12px;
  box-sizing: border-box;

  border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: #fff;

  font-size: 12.5px;
  color: rgba(0,0,0,.75);

  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.iti input[type="tel"]::placeholder{
  color: rgba(0,0,0,.30);
}

.iti input[type="tel"]:focus{
  border-color: rgba(110,46,188,.55);
  box-shadow: 0 0 0 3px rgba(110,46,188,.14);
}

/* keep the flag/dial area visually consistent */
.iti__selected-flag{
  padding: 0 10px;
  border-right: 1px solid rgba(0,0,0,.15);
}

/* dropdown width safety */
.iti__country-list{
  max-width: 320px;
}

/* =========================
   Responsive (site pattern)
========================= */

@media (max-width: 992px){
  .contact-split{
    padding: 70px 18px;
  }

  .contact-split-inner{
    grid-template-columns: 1fr;
  }

  .contact-split-media{
    min-height: 380px;
  }

  .contact-split-panel{
    padding: 38px 34px 34px;
  }
}

@media (max-width: 768px){
  .contact-split{
    padding: 60px 14px;
  }

  .contact-split-panel{
    padding: 34px 22px 26px;
  }

  .contact-row-2{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px){
  .contact-split{
    padding: 52px 12px;
  }

  .contact-title{
    font-size: 26px;
  }
}

/* ================================
   GET IN TOUCH (CONTACT INFO STRIP) — Prototype Match
   - Full width background (flush both sides)
   - Inner uses same container + 18px pattern
   - 3 equal columns with equal gaps
   - Bottom margin on outer section
   - MOTION: title/sub reveal + staggered items
================================= */

.get-touch{
  width: 100%;
  background: #f6f4fb;
  padding: 70px 18px;
  margin-bottom: 70px;
  box-sizing: border-box;
}

.get-touch-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Top text */
.get-touch-title{
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.get-touch-sub{
  margin: 0 0 34px;
  color: rgba(0,0,0,.45);
  font-size: 14px;
  line-height: 1.55;
}

.get-touch-sub a{
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}
.get-touch-sub a:hover{
  text-decoration: underline;
}

/* 3 equal columns */
.get-touch-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}

/* Each item */
.get-touch-item{
  min-width: 0;
}

/* Icon square */
.get-touch-ico{
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid rgba(110,46,188,.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: transparent;
}

.get-touch-ico i{
  color: var(--purple);
  font-size: 18px;
}

/* Text */
.get-touch-item h3{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(0,0,0,.60);
}

.get-touch-item p{
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0,0,0,.45);
}

.get-touch-link{
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
  text-decoration: none;
  word-break: break-word;
}
.get-touch-link:hover{
  text-decoration: underline;
}

/* =========================================
   SCROLL REVEAL MOTION (Get In Touch only)
   - Title: fade + up
   - Sub: fade + up (delayed)
   - Items: fade + up with stagger (delay set by JS)
   - No resizing / no layout changes
========================================= */

.get-touch-title,
.get-touch-sub,
.get-touch-item{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 750ms cubic-bezier(.2,.8,.2,1),
    transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* sub is slightly delayed */
.get-touch-sub{
  transition-delay: 160ms;
}

/* revealed */
.get-touch.is-revealed .get-touch-title,
.get-touch.is-revealed .get-touch-sub,
.get-touch.is-revealed .get-touch-item{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .get-touch-title,
  .get-touch-sub,
  .get-touch-item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   Responsive
========================= */

@media (max-width: 992px){
  .get-touch{
    padding: 70px 18px;
    margin-bottom: 60px;
  }

  .get-touch-title{ font-size: 30px; }

  .get-touch-grid{
    grid-template-columns: 1fr;  /* stacks clean */
    gap: 22px;
  }
}

@media (max-width: 768px){
  .get-touch{
    padding: 60px 14px;
    margin-bottom: 55px;
  }
}

@media (max-width: 480px){
  .get-touch{
    padding: 52px 12px;
    margin-bottom: 45px;
  }

  .get-touch-title{ font-size: 28px; }
}

/* ================================
   CONTACT LOCATION (MAP ONLY)
   - No heading
   - No extra top padding
================================ */

.contact-location{
  width: 100%;
  background: #fff;

  /* REMOVE huge spacing */
  padding: 0 18px 80px;
  box-sizing: border-box;
}

.contact-location-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Map box */
.location-map{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
}

.location-map iframe{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 768px){
  .contact-location{
    padding: 0 14px 60px;
  }

  .location-map iframe{
    height: 320px;
  }
}

@media (max-width: 480px){
  .contact-location{
    padding: 0 12px 52px;
  }

  .location-map iframe{
    height: 260px;
  }
}


/* ================================
   RESOURCES PAGE BANNER
   - Large image banner
   - Dark overlay ONLY on image
   - Solid red shape block (no overlay)
   - Text left + centered
   - Responsive: 992 / 768 / 480
================================ */

.resource-banner{
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
  background: url("images/contact/ResourcesBanner.jpg") center/cover no-repeat;
}

/* Shape Block (NO overlay on it) */
.resource-banner::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: #E94941;
  z-index: 1;
}

/* Overlay ONLY on the IMAGE area */
.resource-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 120px);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Inner container */
.resource-banner-inner{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* Left-centered heading */
.resource-banner-inner h1{
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 500;
  color: #fff;
  margin: 0;
}

/* =========================
   992
========================= */
@media (max-width: 992px){
  .resource-banner{ height: 380px; }
  .resource-banner::after{ height: 110px; }
  .resource-banner-overlay{ height: calc(100% - 110px); }
  .resource-banner-inner{ padding: 0 18px; }
  .resource-banner-inner h1{ font-size: clamp(2.6rem, 6vw, 4rem); }
}

/* =========================
   768
========================= */
@media (max-width: 768px){
  .resource-banner{ height: 340px; }
  .resource-banner::after{ height: 100px; }
  .resource-banner-overlay{ height: calc(100% - 100px); }
  .resource-banner-inner{ padding: 0 14px; }
  .resource-banner-inner h1{ font-size: clamp(2.2rem, 7vw, 3.3rem); }
}

/* =========================
   480
========================= */
@media (max-width: 480px){
  .resource-banner{ height: 300px; }
  .resource-banner::after{ height: 92px; }
  .resource-banner-overlay{ height: calc(100% - 92px); }
  .resource-banner-inner{ padding: 0 12px; }
  .resource-banner-inner h1{ font-size: clamp(1.9rem, 8.2vw, 2.7rem); }
}

/* =================================
    RESOURCES DOWNLOAD SECTION
================================= */

.resource-downloads-section{
    padding:80px 20px;
    margin-bottom: 70px;
    background:#f8f8fb;
}

.resource-downloads-inner{
    width:100%;
    max-width:1200px;
    margin:auto;
}

.resource-downloads-head{
    text-align:center;
    margin-bottom:50px;
}

.resource-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(110,46,188,.08);
    color:#6E2EBC;
    font-size:13px;
    font-weight:700;
    margin-bottom:16px;
}

.resource-downloads-head h2{
    margin:0 0 14px;
    font-size:40px;
    line-height:1.15;
    font-weight:800;
    color:#18181b;
}

.resource-downloads-head p{
    max-width:700px;
    margin:auto;
    color:#6b7280;
    line-height:1.7;
    font-size:16px;
}

.resource-downloads-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.resource-download-card{
    background:#fff;
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.04);

    display:flex;
    flex-direction:column;
    gap:20px;

    transition:.3s;
}

.resource-download-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.resource-download-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:#6E2EBC;

    display:flex;
    align-items:center;
    justify-content:center;
}

.resource-download-icon i{
    font-size:28px;
    color:#fff;
}

.resource-download-content h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:800;
    color:#18181b;
}

.resource-download-content p{
    margin:0;
    color:#6b7280;
    line-height:1.7;
    margin-bottom:22px;
}

.resource-download-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 22px;
    border-radius:14px;

    background:#fdc332;
    color:#000;

    font-weight:700;
    text-decoration:none;

    transition:.3s;
}

.resource-download-btn:hover{
    background:#6E2EBC;
    color:#fff;
}

.resource-downloads-empty{
    background:#fff;
    border-radius:22px;
    padding:60px;
    text-align:center;
    border:1px dashed rgba(110,46,188,.25);
}

.resource-downloads-empty p{
    margin:0;
    font-size:16px;
    color:#6b7280;
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:992px){

.resource-downloads-grid{
    grid-template-columns:repeat(2,1fr);
}

.resource-downloads-head h2{
    font-size:34px;
}

}

@media(max-width:768px){

.resource-downloads-grid{
    grid-template-columns:1fr;
}

.resource-downloads-section{
    padding:60px 20px;
}

.resource-downloads-head h2{
    font-size:28px;
}

.resource-download-card{
    padding:24px;
}

}












/* ==================================================================
           CTA STRIP
           - CTA sits above footer using z-index
           - Footer pulls up underneath with negative margin
=================================================================== */
.support-cta{
  width: 100%;
  padding: 18px 0 0;
  background: transparent;
  position: relative;
  z-index: 5;
}

.support-cta .cta-card{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
}

.support-cta .cta-inner{
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 0;
  align-items: stretch;
}

/* reduce height */
.support-cta .cta-left{
  background: var(--cta-yellow);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.support-cta .cta-left h3{
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.05;
  color: var(--cta-title);
  font-weight: 600;
}

.support-cta .cta-left p{
  margin: 0 0 14px;
  color: rgba(0,0,0,.80);
  font-size: 20px;
  line-height: 1.45;
  max-width: 420px;
}

.support-cta .cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  width: fit-content;
  border-radius: 8px;
  background: var(--btn-purple);
  color: #fff;
  font-weight: 400;
  font-size: 13.5px;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}

.support-cta .cta-btn:hover{
  filter: brightness(.92);
  transform: translateY(-1px);
}

.support-cta .cta-right{
  background: #fff;
  min-height: 0;
}

.support-cta .cta-right img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================
       MAIN FOOTER (FULL WIDTH, SOLID)
       - Pulls upward so CTA overlaps it
========================================= */
.site-footer{
  width: 100%;
  margin: -58px 0 0;
  padding: 78px 0 0;
  background: var(--purple-dark);
  color: var(--text);
  position: relative;
  z-index: 1;
}

.site-footer .footer-top{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px 18px 18px;
  display: grid;
  grid-template-columns: 1.35fr .85fr .65fr;
  gap: 34px;
  align-items: start;
}

/* Brand row */
.site-footer .brand-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* LOGO: accurate sizing */
.site-footer .brand-logo{
  width: 150px;     
  height: 44px;      
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.site-footer .brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Bottom-align the whole left column with social links column */
.site-footer .footer-brand{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.site-footer .newsletter{
  margin-top: auto;    
}

.site-footer .brand-name{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.site-footer .brand-tagline{
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

/* Newsletter heading */
.site-footer .newsletter h4{
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* =========================================
       NEWSLETTER INPUT (Glass)
========================================= */
.site-footer .newsletter-form{
  --news-input-h: 48px;         
  position: relative;
  max-width: 520px;
  width: 100%;
}

.site-footer .newsletter-input{
  width: 100%;
  height: var(--news-input-h);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10); /* glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
  padding: 0 58px 0 14px;
  outline: none;
  box-sizing: border-box;
}

.site-footer .newsletter-input::placeholder{
  color: rgba(255,255,255,.65);
}

/* icon INSIDE input */
.site-footer .newsletter-send{
  position: absolute;
  right: 10px;

  /* Anchor to the input height (NOT the whole form height) */
  top: calc(var(--news-input-h) / 2);
  transform: translateY(-50%);

  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: filter .15s ease;
}

.site-footer .newsletter-send:hover{
  filter: brightness(.9);
}

/* =========================================
   NEWSLETTER MESSAGE 
   - Message below the input bar
   - Arrow stays aligned because it’s anchored to input height
========================================= */
.site-footer .newsletter-msg{
  display: block;
  width: 100%;
  max-width: 520px;     
  margin-top: 10px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;

  color: rgba(255,255,255,.92);
}

.site-footer .newsletter-msg{
  opacity: 1;
  transition: opacity .3s ease;
}

.site-footer .newsletter-msg.hide{
  opacity: 0;
}

/* Optional: color based on your JS data-type attribute */
.site-footer .newsletter-msg[data-type="success"]{
  color: rgba(185,255,204,.98);
}

.site-footer .newsletter-msg[data-type="error"]{
  color: rgba(255,185,185,.98);
}

.site-footer .newsletter-msg[data-type="info"]{
  color: rgba(255,255,255,.90);
}

/* Columns */
.site-footer .footer-col h5{
  margin: 6px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.site-footer .footer-links{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.site-footer .footer-links a{
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: color .15s ease, opacity .15s ease;
}

.site-footer .social-title{
  margin-top: 10px;
}

.site-footer .social-links{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer .social-links a{
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  transition: color .15s ease, opacity .15s ease;
}

/* HOVER: COLOR ONLY */
.site-footer .footer-links a:hover,
.site-footer .social-links a:hover{
  color: var(--hover);
  opacity: 1;
}

/* Divider line */
.site-footer .footer-divider{
  width: 100%;
  padding: 0 18px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-footer .footer-divider .line{
  height: 1px;
  width: 100%;
  background: var(--line);
}

/* Bottom row */
.site-footer .footer-bottom{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px 18px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.site-footer .footer-bottom a{
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease, opacity .15s ease;
}

.site-footer .footer-bottom a:hover{
  color: var(--hover);
  opacity: 1;
}

/* =========================================
        BOTTOM LEGAL BAR (FULL WIDTH)
========================================= */
.footer-legalbar{
  width: 100%;
  margin: 0;
  background: var(--purple-bar);
  padding: 14px 0;
}

.footer-legalbar .legal-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

.footer-legalbar a{
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: color .15s ease, opacity .15s ease;
}

/* HOVER: COLOR ONLY */
.footer-legalbar a:hover{
  color: rgba(255,255,255,.85);
  opacity: 1;
}

/* ================================================
   RESPONSIVE (992, 768, 480) — SAME BEHAVIOR
================================================ */

/* <= 992px */
@media (max-width: 992px){
  html, body{ overflow-x: hidden; }

  .support-cta .cta-inner{ grid-template-columns: 1fr; }
  .support-cta .cta-right{ min-height: 200px; }

  .site-footer{
    margin-top: -46px;
    padding-top: 66px;
  }

  .site-footer .footer-top{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer .newsletter h4{ font-size: 30px; }

  .site-footer .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .support-cta .cta-inner,
  .site-footer .footer-top,
  .site-footer .footer-bottom{
    min-width: 0;
  }
}

/* <= 768px */
@media (max-width: 768px){
  html, body{ overflow-x: hidden; }

  .support-cta .cta-card{ padding: 0 14px; }
  .site-footer .footer-top{ padding: 18px 14px 18px; }
  .site-footer .footer-divider{ padding: 0 14px; }
  .site-footer .footer-bottom{ padding: 14px 14px 18px; }
  .footer-legalbar .legal-inner{ padding: 0 14px; }

  .support-cta .cta-inner,
  .site-footer .footer-top,
  .site-footer .footer-bottom{
    min-width: 0;
  }
}

/* <= 480px */
@media (max-width: 480px){
  html, body{ overflow-x: hidden; }

  .support-cta .cta-card{ padding: 0 12px; }
  .site-footer .footer-top{ padding: 18px 12px 18px; }
  .site-footer .footer-divider{ padding: 0 12px; }
  .site-footer .footer-bottom{ padding: 14px 12px 18px; }
  .footer-legalbar .legal-inner{ padding: 0 12px; }

  .support-cta .cta-left h3{ font-size: 24px; }
  .site-footer .newsletter h4{ font-size: 26px; }
  .footer-legalbar .legal-inner{ gap: 16px; }

  .support-cta .cta-inner,
  .site-footer .footer-top,
  .site-footer .footer-bottom{
    min-width: 0;
  }
}