/* =========================================================
   Dr. Maureen Mbondiah Premium Website V13
   Design direction: V9-inspired, rich cards, smooth motion,
   compact headings, clean spacing, teal/gold/cream palette.
========================================================= */

:root{
  --teal:#003f37;
  --teal-2:#00594f;
  --gold:#caa637;
  --gold-2:#f3df91;
  --cream:#fffaf0;
  --paper:#fffdf7;
  --muted:#56635f;
  --ink:#172522;
  --line:rgba(0,63,55,.14);
  --shadow:0 24px 70px rgba(0,63,55,.14);
  --radius:28px;
  --max:1180px;
  --font:'Plus Jakarta Sans','Manrope','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 38%, rgba(202,166,55,.23), transparent 23rem),
    radial-gradient(circle at 94% 39%, rgba(0,89,79,.24), transparent 26rem),
    linear-gradient(120deg,#fffaf0 0%,#f8f7ed 52%,#eaf6f3 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{line-height:1.75;color:#3f4c49;font-size:1rem}
ul{padding-left:1.1rem}
li{margin:.4rem 0;line-height:1.5}
.site-bg-motion{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.motion-orb{position:absolute;border-radius:999px;filter:blur(1px);opacity:.48;animation:floatOrb 14s ease-in-out infinite}
.motion-orb.one{width:310px;height:310px;background:rgba(202,166,55,.22);left:-80px;top:34%}
.motion-orb.two{width:420px;height:420px;background:rgba(0,89,79,.20);right:-90px;top:28%;animation-delay:-5s}
.motion-orb.three{width:170px;height:170px;background:rgba(255,255,255,.55);left:55%;top:58%;animation-delay:-8s}
.motion-line{position:absolute;left:-10%;right:-10%;top:58%;height:120px;border-top:14px solid rgba(202,166,55,.18);border-radius:50%;transform:rotate(-7deg);animation:waveMove 11s ease-in-out infinite}
@keyframes floatOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-28px,0) scale(1.05)}}
@keyframes waveMove{0%,100%{transform:translateX(0) rotate(-7deg)}50%{transform:translateX(45px) rotate(-5deg)}}

/* Header */
.top-strip{
  background:var(--teal);
  color:#fff;
  font-size:.82rem;
  letter-spacing:.04em;
}
.top-strip__inner{
  max-width:var(--max);margin:auto;min-height:40px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.2rem;
}
.top-strip a{opacity:.95}
.top-strip__left,.top-strip__right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.social-mini{display:flex;gap:.45rem}
.social-mini a,.top-pill{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15)
}
.top-book{background:var(--gold);color:var(--teal);border-radius:999px;padding:.55rem .9rem;font-weight:900}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,247,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,63,55,.12);
}
.nav-wrap{
  max-width:var(--max);margin:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1.2rem;padding:.76rem 1.2rem;
}
.brand{display:flex;align-items:center;gap:.8rem;min-width:260px}
.dm-mark{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#0a786b,var(--teal));
  color:#fff;font-weight:1000;letter-spacing:.08em;position:relative;
  box-shadow:0 0 0 4px rgba(202,166,55,.25), 0 12px 28px rgba(0,63,55,.22);
  animation:dmPulse 4.5s ease-in-out infinite;
}
.dm-mark:before,.dm-mark:after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(202,166,55,.58)
}
.dm-mark:after{inset:-13px;border-color:rgba(202,166,55,.22);animation:dmRing 2.5s linear infinite}
@keyframes dmPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes dmRing{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.14);opacity:.1}}
.brand-text strong{
  display:block;font-size:1.02rem;letter-spacing:.34em;color:var(--teal);line-height:1.1;
}
.brand-text span{
  display:block;margin-top:.28rem;font-size:.68rem;letter-spacing:.26em;color:#a58422;font-weight:900;text-transform:uppercase;
}
.nav-menu{display:flex;align-items:center;gap:1.25rem}
.nav-menu a{font-weight:850;letter-spacing:.08em;font-size:.95rem;position:relative}
.nav-menu a:after{
  content:"";position:absolute;left:0;bottom:-.55rem;width:0;height:2px;background:var(--gold);transition:.25s ease
}
.nav-menu a:hover:after,.nav-menu a.is-active:after{width:100%}
.nav-actions{display:flex;align-items:center;gap:.7rem}
.mobile-toggle{
  display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fffdf7;color:var(--teal);font-size:1.25rem;align-items:center;justify-content:center
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border:0;border-radius:999px;padding:.88rem 1.25rem;
  font-weight:950;letter-spacing:.02em;cursor:pointer;transition:.25s ease;min-height:48px
}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 16px 35px rgba(0,63,55,.25)}
.btn-primary:hover{transform:translateY(-3px);background:#002d27}
.btn-gold{background:var(--gold);color:var(--teal);box-shadow:0 16px 35px rgba(202,166,55,.25)}
.btn-outline{background:#fffdf7;color:var(--teal);border:1px solid rgba(0,63,55,.18)}
.btn-link{font-weight:900;color:var(--teal);display:inline-flex;align-items:center;gap:.4rem}

/* Sections */
.container{max-width:var(--max);margin:auto;padding:0 1.2rem}
.section{padding:4.2rem 0}
.section-tight{padding:2.8rem 0}
.eyebrow{font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:#6d7774;font-weight:950;margin-bottom:.8rem}
h1,h2,h3{color:var(--teal);line-height:1.06;margin:0}
h1{font-size:clamp(3rem,8vw,6.5rem);letter-spacing:-.06em}
h2{font-size:clamp(1.75rem,3.2vw,3rem);letter-spacing:-.04em}
h3{font-size:clamp(1.1rem,1.8vw,1.45rem)}
.lead{font-size:clamp(1rem,1.6vw,1.18rem);max-width:720px}
.hero{min-height:calc(100vh - 132px);display:grid;align-items:center;padding:3rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3.2rem;align-items:center}
.hero-title{max-width:680px}
.typing-line{font-weight:900;color:var(--gold);min-height:1.7rem;letter-spacing:.12em;text-transform:uppercase;margin:1rem 0}
.hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.6rem}
.image-placeholder{
  position:relative;border:1px dashed rgba(0,63,55,.28);border-radius:34px;overflow:hidden;
  background:rgba(255,255,255,.38);min-height:340px;box-shadow:var(--shadow)
}
.image-placeholder img{width:100%;height:100%;object-fit:cover;opacity:.86}
.replace-label{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:rgba(255,253,247,.92);border:1px solid rgba(0,63,55,.14);border-radius:18px;
  padding:.9rem 1rem;text-align:center;font-weight:900;color:var(--teal);width:min(82%,520px)
}
.hero-mini-card{
  position:absolute;top:1.5rem;left:1.5rem;background:rgba(255,253,247,.88);border-radius:22px;
  padding:.9rem 1rem;border:1px solid rgba(0,63,55,.12);font-weight:900;color:var(--teal)
}

/* Rich cards with flip */
.grid{display:grid;gap:1.35rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flip-card{min-height:260px;perspective:1200px}
.flip-inner{position:relative;width:100%;height:100%;min-height:260px;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip-card:hover .flip-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  background:rgba(255,253,247,.78);border:1px solid rgba(0,63,55,.10);
  padding:1.35rem;box-shadow:0 18px 50px rgba(0,63,55,.09);overflow:hidden
}
.card-back{transform:rotateY(180deg);background:var(--teal);color:#fff}
.card-back h3,.card-back p,.card-back li{color:#fff}
.icon-badge{
  width:46px;height:46px;border-radius:16px;background:rgba(202,166,55,.18);
  color:var(--teal);display:grid;place-items:center;font-size:1.25rem;margin-bottom:1rem
}
.card h3{margin-bottom:.65rem}.card p{margin:0 0 .75rem}
.info-card{
  background:rgba(255,253,247,.80);border:1px solid rgba(0,63,55,.10);border-radius:var(--radius);
  padding:1.45rem;box-shadow:0 18px 50px rgba(0,63,55,.08);transition:.25s ease
}
.info-card:hover{transform:translateY(-6px)}
.package-card .price{font-size:1.8rem;font-weight:1000;color:var(--teal);margin:.75rem 0}
.package-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.tag{font-size:.78rem;border-radius:999px;background:rgba(0,63,55,.08);color:var(--teal);font-weight:900;padding:.35rem .65rem}

/* CTA and forms */
.cta-panel{
  border-radius:36px;padding:2rem;background:
  linear-gradient(135deg,rgba(0,63,55,.95),rgba(0,89,79,.92));
  color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.cta-panel h2,.cta-panel p{color:#fff}
.cta-panel:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(202,166,55,.18);right:-70px;top:-80px}
.form-card{background:rgba(255,253,247,.86);border:1px solid rgba(0,63,55,.12);border-radius:32px;padding:1.65rem;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem}
.form-group{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1.05rem}
.form-group.full{grid-column:1/-1}
label{font-weight:900;color:var(--teal)}
input,select,textarea{
  width:100%;border:1px solid rgba(0,63,55,.18);border-radius:18px;background:#fffdf7;color:var(--ink);
  padding:.92rem 1rem;font:inherit;outline:none;transition:.2s ease
}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(202,166,55,.15)}
.field-error{font-size:.82rem;color:#9b2e16;font-weight:850;display:none}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:#9b2e16;box-shadow:0 0 0 4px rgba(155,46,22,.11)}
.form-group.has-error .field-error{display:block;animation:shakeIn .22s ease}
@keyframes shakeIn{0%{transform:translateX(-4px)}50%{transform:translateX(4px)}100%{transform:translateX(0)}}
.form-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1rem}

/* Toast */
.toast-wrap{position:fixed;right:1rem;bottom:1rem;z-index:1000;display:grid;gap:.6rem}
.toast{background:var(--teal);color:#fff;border-radius:18px;padding:.9rem 1rem;box-shadow:var(--shadow);font-weight:850;animation:toastIn .35s ease}
.toast.success{background:#0e6c4f}.toast.error{background:#9b2e16}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Blog details */
.blog-shell{max-width:880px;margin:auto}
.blog-cover{border-radius:32px;overflow:hidden;margin:1.5rem 0;box-shadow:var(--shadow)}
.reaction-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:1.4rem 0}
.reaction-btn{border:1px solid var(--line);background:#fffdf7;border-radius:999px;padding:.7rem 1rem;font-weight:900;cursor:pointer}
.comments{margin-top:2rem}

/* Footer */
.site-footer{background:#002d27;color:#fff;margin-top:4rem;padding:3rem 0 1rem}
.site-footer h3,.site-footer p,.site-footer a{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2rem}
.footer-links{display:grid;gap:.65rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-login{opacity:.75;font-size:.9rem}

/* Admin */
.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:#f7f4eb}
.admin-sidebar{background:var(--teal);color:#fff;padding:1.2rem;position:sticky;top:0;height:100vh}
.admin-sidebar a{display:flex;align-items:center;gap:.55rem;color:#fff;padding:.72rem .85rem;border-radius:14px;margin:.15rem 0}
.admin-sidebar a:hover{background:rgba(255,255,255,.10)}
.admin-main{padding:1.5rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.table-card{background:#fff;border-radius:24px;padding:1rem;box-shadow:0 14px 40px rgba(0,63,55,.08);overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.85rem;border-bottom:1px solid #e8e2d4}
th{color:var(--teal);font-size:.83rem;text-transform:uppercase;letter-spacing:.06em}

/* Cursor trailer */
.cursor-dot{
  position:fixed;width:9px;height:9px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:2000;
  transform:translate(-50%,-50%);box-shadow:0 0 20px rgba(202,166,55,.75)
}
.cursor-ring{
  position:fixed;width:38px;height:38px;border-radius:50%;border:1px solid rgba(202,166,55,.65);
  pointer-events:none;z-index:1999;transform:translate(-50%,-50%);transition:.12s ease
}
.spark{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:1998;animation:sparkFade .6s ease forwards}
@keyframes sparkFade{to{opacity:0;transform:translateY(-18px) scale(.4)}}

/* Responsive */
@media (max-width: 980px){
  .top-strip__inner{justify-content:center}
  .brand{min-width:unset}
  .brand-text strong{font-size:.86rem;letter-spacing:.22em}
  .brand-text span{font-size:.62rem;letter-spacing:.16em}
  .mobile-toggle{display:flex}
  .nav-menu{
    position:absolute;left:1rem;right:1rem;top:calc(100% + .5rem);background:#fffdf7;border:1px solid var(--line);
    border-radius:24px;padding:1rem;display:none;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start
  }
  .nav-menu.is-open{display:flex}
  .nav-actions .btn{display:none}
  .hero{min-height:auto;padding:2.2rem 0}
  .hero-grid,.grid-2,.grid-3,.grid-4,.footer-grid,.form-grid{grid-template-columns:1fr}
  h1{font-size:3.2rem}
  .image-placeholder{min-height:260px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:relative;height:auto}
}
@media (max-width: 560px){
  .top-strip__left{display:none}
  .nav-wrap{padding:.65rem .9rem}
  .dm-mark{width:48px;height:48px}
  .brand-text strong{font-size:.76rem;letter-spacing:.14em}
  .brand-text span{font-size:.56rem}
  h1{font-size:2.65rem}
  h2{font-size:1.75rem}
  .section{padding:3rem 0}
  .cta-panel,.form-card,.info-card,.card-face{border-radius:22px}
  .stat-grid{grid-template-columns:1fr}
}


/* =========================================================
   V14 polish: cleaner footer, better fit above the fold,
   stronger CTA colour disruption, fixed spacing.
========================================================= */

.site-footer-clean{
  margin-top:3.2rem;
  padding:2.4rem 0 1rem;
}

.footer-clean-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr 1.1fr;
  gap:2rem;
  align-items:start;
}

.footer-brand{
  margin-bottom:1rem;
}

.footer-brand-block p{
  max-width:440px;
}

.footer-links.compact{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem 1rem;
}

.footer-newsletter .form-group{
  margin-bottom:.75rem;
}

.clean-bottom{
  margin-top:1.6rem;
  padding-top:1rem;
}

.hero{
  min-height:calc(100vh - 118px);
  padding:2.2rem 0 3.2rem;
}

.hero-grid{
  gap:2.4rem;
}

.hero-title{
  line-height:.92;
}

.hero .lead{
  max-width:660px;
  margin-top:1rem;
}

.hero-ctas{
  margin-top:1.25rem;
}

.section{
  padding:3.6rem 0;
}

.section-tight{
  padding:2.4rem 0;
}

.cta-panel{
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cta-panel .form-actions{
  margin-top:1.1rem;
}

.blog-body{
  font-size:1.04rem;
}

.reaction-btn:hover{
  transform:translateY(-2px);
  background:rgba(202,166,55,.16);
}

/* Better card content fit and no clipping */
.flip-card,
.flip-inner{
  min-height:300px;
}

.card-face{
  overflow:visible;
}

.flip-card:hover{
  z-index:5;
}

/* Better button spacing in footer and forms */
.footer-newsletter button{
  margin-top:.4rem;
}

@media (max-width: 980px){
  .footer-clean-grid{
    grid-template-columns:1fr;
  }

  .footer-links.compact{
    grid-template-columns:1fr 1fr;
  }

  .hero{
    min-height:auto;
  }
}

@media (max-width: 560px){
  .footer-links.compact{
    grid-template-columns:1fr;
  }

  .hero-title{
    font-size:2.45rem;
  }
}

/* =========================================================
   V15 Footer and comment initials polish
========================================================= */

.premium-footer{
  background:
    radial-gradient(circle at 8% 20%, rgba(202,166,55,.13), transparent 18rem),
    linear-gradient(135deg, #002d27 0%, #003f37 55%, #00231f 100%);
  padding: 3rem 0 1.1rem;
}

.footer-feature{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2rem;
  align-items:center;
  background:rgba(255,253,247,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:32px;
  padding:1.6rem;
  margin-bottom:2.3rem;
}

.footer-feature h2{
  color:#fff;
  font-size:clamp(1.55rem,2.7vw,2.4rem);
  margin:.25rem 0 .55rem;
}

.footer-feature p{
  color:rgba(255,255,255,.78);
  max-width:650px;
  margin:0;
}

.footer-kicker{
  display:inline-flex;
  color:var(--gold);
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
}

.footer-feature-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.8rem;
  align-items:end;
}

.footer-feature-form .form-group{
  margin:0;
}

.footer-feature-form label{
  color:rgba(255,255,255,.78);
}

.footer-feature-form input{
  background:#fffaf0;
  border:0;
}

.footer-columns{
  display:grid;
  grid-template-columns:1.45fr .85fr .95fr .85fr;
  gap:2.4rem;
  align-items:start;
}

.footer-about p{
  max-width:420px;
  color:rgba(255,255,255,.78);
}

.footer-logo-line{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1rem;
}

.footer-logo-line strong{
  display:block;
  color:#fff;
  letter-spacing:.22em;
  font-weight:1000;
  line-height:1.2;
}

.footer-logo-line small{
  display:block;
  margin-top:.28rem;
  color:var(--gold);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
}

.footer-dm{
  width:54px;
  height:54px;
  flex:0 0 54px;
}

.footer-socials{
  display:flex;
  gap:.55rem;
  margin-top:1.1rem;
}

.footer-socials a{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:900;
}

.footer-columns h3{
  color:var(--gold);
  font-size:.95rem;
  margin:0 0 .85rem;
}

.footer-link-list{
  display:grid;
  gap:.62rem;
}

.footer-link-list a{
  color:rgba(255,255,255,.82);
  transition:.2s ease;
}

.footer-link-list a:hover{
  color:#fff;
  transform:translateX(4px);
}

.premium-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:2.1rem;
  padding-top:1rem;
}

/* Comment initials cards */
.comments-list{
  display:grid;
  gap:.85rem;
}

.comment-card{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  background:rgba(255,253,247,.82);
  border:1px solid rgba(0,63,55,.10);
  border-radius:24px;
  padding:1rem;
  box-shadow:0 14px 40px rgba(0,63,55,.07);
}

.comment-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 48px;
  background:linear-gradient(135deg,var(--teal),#006458);
  color:#fff;
  font-weight:1000;
  border:3px solid rgba(202,166,55,.35);
  box-shadow:0 10px 24px rgba(0,63,55,.18);
}

.comment-content{
  flex:1;
  min-width:0;
}

.comment-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.3rem;
}

.comment-head strong{
  color:var(--teal);
}

.comment-head span{
  color:var(--muted);
  font-size:.85rem;
}

.comment-content p{
  margin:0;
}

@media (max-width:980px){
  .footer-feature,
  .footer-columns{
    grid-template-columns:1fr;
  }

  .footer-feature-form{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V16: separate newsletter section, reference-style footer,
   data-driven profile details, more premium spacing.
========================================================= */

.newsletter-section{
  padding:4.2rem 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(202,166,55,.18), transparent 20rem),
    linear-gradient(135deg,rgba(255,250,240,.7),rgba(221,241,237,.55));
}

.newsletter-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
  border-radius:34px;
  padding:2.4rem;
  background:rgba(255,253,247,.84);
  border:1px solid rgba(0,63,55,.12);
  box-shadow:0 24px 70px rgba(0,63,55,.12);
}

.newsletter-panel h2{
  font-size:clamp(1.7rem,3vw,2.6rem);
}

.newsletter-form{
  background:rgba(0,63,55,.05);
  border-radius:28px;
  padding:1.3rem;
}

.newsletter-form .btn{
  margin-top:.5rem;
}

.reference-footer{
  background:#002d27;
  padding:4rem 0 1.25rem;
}

.reference-footer-grid{
  display:grid;
  grid-template-columns:1.35fr .75fr .9fr .75fr .75fr;
  gap:2rem;
  align-items:start;
}

.footer-brand-title{
  color:#fff;
  letter-spacing:.26em;
  font-size:1rem;
  margin-bottom:1.25rem;
}

.reference-footer p{
  color:rgba(255,255,255,.78);
}

.footer-contact-lines{
  display:grid;
  gap:.55rem;
  margin-top:1rem;
}

.footer-contact-lines a{
  color:rgba(255,255,255,.85);
}

.reference-footer h3{
  color:var(--gold);
  margin:0 0 1rem;
  font-size:.95rem;
}

.reference-footer .footer-link-list{
  gap:.72rem;
}

.reference-footer .footer-link-list a{
  color:rgba(255,255,255,.84);
}

.reference-bottom{
  margin-top:3rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.14);
}

/* Extra spacing to stop sections feeling cramped */
.info-card,
.form-card,
.cta-panel{
  margin-bottom:.4rem;
}

.grid{
  row-gap:1.8rem;
}

.form-grid{
  gap:1.15rem 1.25rem;
}

.form-actions{
  gap:1rem;
}

@media(max-width:1100px){
  .reference-footer-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media(max-width:800px){
  .newsletter-panel,
  .reference-footer-grid{
    grid-template-columns:1fr;
  }

  .newsletter-panel{
    padding:1.5rem;
  }
}

/* =========================================================
   V18 Card Teal Redesign
   Correction from V17:
   - No whole sections should be Deep Teal / Forest Green.
   - Surroundings remain white, cream or soft teal.
   - Deep Teal / Forest Green appears on selected cards, CTAs,
     package cards and flip-card backs only.
========================================================= */

body{
  background:
    radial-gradient(circle at 9% 30%, rgba(202,166,55,.18), transparent 22rem),
    radial-gradient(circle at 92% 34%, rgba(0,63,55,.15), transparent 26rem),
    linear-gradient(120deg,#fffaf0 0%,#fffdf7 48%,#edf7f4 100%) !important;
}

.section,
.section-tight{
  background:transparent !important;
}

.section{padding:4.6rem 0}
.section-tight{padding:3.2rem 0}
.container{max-width:1200px}

/* Deep teal only on cards */
.grid > .info-card:nth-child(1),
.grid > .flip-card:nth-child(1) .card-face:not(.card-back),
.package-card:nth-child(1),
.package-card:nth-child(4){
  background:
    radial-gradient(circle at 90% 10%, rgba(202,166,55,.16), transparent 8rem),
    linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 26px 70px rgba(0,63,55,.23) !important;
}

.grid > .info-card:nth-child(1) h2,
.grid > .info-card:nth-child(1) h3,
.grid > .info-card:nth-child(1) p,
.grid > .info-card:nth-child(1) li,
.grid > .flip-card:nth-child(1) .card-face:not(.card-back) h3,
.grid > .flip-card:nth-child(1) .card-face:not(.card-back) p,
.package-card:nth-child(1) h3,
.package-card:nth-child(1) p,
.package-card:nth-child(1) li,
.package-card:nth-child(4) h3,
.package-card:nth-child(4) p,
.package-card:nth-child(4) li{
  color:#fff !important;
}

.grid > .info-card:nth-child(1) .icon-badge,
.grid > .flip-card:nth-child(1) .icon-badge,
.package-card:nth-child(1) .icon-badge,
.package-card:nth-child(4) .icon-badge{
  background:rgba(202,166,55,.26);
  color:#fff;
}

.package-card:nth-child(1) .price,
.package-card:nth-child(4) .price{
  color:#f3df91 !important;
}

/* Other cards remain light, rich and premium */
.info-card,
.card-face,
.form-card{
  background:rgba(255,253,247,.88);
  border:1px solid rgba(0,63,55,.12);
  box-shadow:0 20px 55px rgba(0,63,55,.09);
}

.info-card:hover,
.package-card:hover{
  transform:translateY(-7px);
}

.card-back{
  background:
    radial-gradient(circle at 15% 20%, rgba(202,166,55,.20), transparent 8rem),
    linear-gradient(145deg,#003f37,#002d27) !important;
}

.flip-card,
.flip-inner{
  min-height:330px;
}

.card-face{
  overflow:visible;
  padding:1.55rem;
}

/* CTAs are allowed to be deep teal because they are card blocks */
.cta-panel{
  background:
    radial-gradient(circle at 88% 12%, rgba(202,166,55,.22), transparent 12rem),
    linear-gradient(135deg,#003f37 0%,#00594f 100%) !important;
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
}

.cta-panel h2,
.cta-panel p{
  color:#fff;
}

/* Newsletter is its own light section/card */
.newsletter-section{
  padding:4.8rem 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(202,166,55,.15), transparent 20rem),
    linear-gradient(135deg,#fffaf0,#edf7f4) !important;
}

.newsletter-panel{
  background:
    linear-gradient(135deg,rgba(255,253,247,.94),rgba(255,253,247,.78));
  border:1px solid rgba(0,63,55,.14);
  box-shadow:0 26px 70px rgba(0,63,55,.12);
}

/* Hero stays light and premium */
.hero{
  min-height:calc(100vh - 118px);
  background:
    radial-gradient(circle at 10% 56%, rgba(202,166,55,.20), transparent 24rem),
    radial-gradient(circle at 94% 45%, rgba(0,63,55,.14), transparent 28rem),
    linear-gradient(120deg,#fffaf0 0%,#fffdf7 54%,#ebf5f2 100%) !important;
}

.hero-grid{gap:2.5rem}
.hero-title{font-size:clamp(3.2rem,7vw,6.1rem)}
.hero .lead{max-width:680px}

/* More breathing room */
.btn{
  gap:.6rem;
  padding:.92rem 1.35rem;
}

.form-actions{gap:1rem}
.form-grid{gap:1.25rem 1.35rem}
.grid{row-gap:1.9rem}

input, select, textarea{
  margin-bottom:.05rem;
}

/* Footer remains the reference-style dark footer */
.reference-footer{
  background:#002d27;
  padding:4rem 0 1.3rem;
}

.reference-footer-grid{
  display:grid;
  grid-template-columns:1.35fr .75fr .9fr .75fr .75fr;
  gap:2.1rem;
}

@media(max-width:980px){
  .section{padding:3.4rem 0}
  .section-tight{padding:2.6rem 0}
  .reference-footer-grid{grid-template-columns:1fr 1fr}
  .flip-card,.flip-inner{min-height:300px}
}

@media(max-width:620px){
  .reference-footer-grid{grid-template-columns:1fr}
  .hero-title{font-size:2.7rem}
}

/* =========================================================
   V19 CARD COLOUR SYSTEM
   ---------------------------------------------------------
   Purpose:
   - Keep page/section surroundings light and premium.
   - Make cards consistent Deep Teal / Forest Green by default.
   - Allow easy switching using utility classes:
       .card-teal  = Deep Teal / Forest Green card
       .card-white = White / cream card
       .card-gold  = Gold highlight card
   - Do not paint whole sections dark.
========================================================= */

/* Light surroundings remain untouched. */
.section,
.section-tight,
.hero,
.newsletter-section{
  background-color:transparent !important;
}

/* Default all major content cards to Deep Teal / Forest Green. */
.info-card,
.card-face,
.package-card,
.comment-card,
.form-card.theme-card{
  background:
    radial-gradient(circle at 90% 12%, rgba(202,166,55,.18), transparent 9rem),
    linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 26px 70px rgba(0,63,55,.22) !important;
}

/* Text inside teal cards. */
.info-card h1,
.info-card h2,
.info-card h3,
.info-card p,
.info-card li,
.card-face h1,
.card-face h2,
.card-face h3,
.card-face p,
.card-face li,
.package-card h1,
.package-card h2,
.package-card h3,
.package-card p,
.package-card li,
.comment-card p,
.comment-card strong{
  color:#ffffff !important;
}

/* Muted/secondary labels inside teal cards. */
.info-card .tag,
.package-card .tag,
.card-face .tag{
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
}

/* Icons inside teal cards. */
.info-card .icon-badge,
.package-card .icon-badge,
.card-face .icon-badge{
  background:rgba(202,166,55,.24) !important;
  color:#ffffff !important;
}

/* Prices in package cards. */
.package-card .price{
  color:#f3df91 !important;
}

/* Easy class: force teal card. */
.card-teal{
  background:
    radial-gradient(circle at 90% 12%, rgba(202,166,55,.18), transparent 9rem),
    linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* Easy class: force white/cream card. */
.card-white{
  background:rgba(255,253,247,.92) !important;
  color:var(--ink) !important;
  border:1px solid rgba(0,63,55,.12) !important;
  box-shadow:0 20px 55px rgba(0,63,55,.09) !important;
}

.card-white h1,
.card-white h2,
.card-white h3{
  color:var(--teal) !important;
}

.card-white p,
.card-white li{
  color:#3f4c49 !important;
}

.card-white .tag{
  background:rgba(0,63,55,.08) !important;
  color:var(--teal) !important;
}

.card-white .icon-badge{
  background:rgba(202,166,55,.18) !important;
  color:var(--teal) !important;
}

/* Easy class: force gold card. */
.card-gold{
  background:
    radial-gradient(circle at 88% 18%, rgba(0,63,55,.13), transparent 8rem),
    linear-gradient(135deg,#f3df91,#caa637) !important;
  color:#003f37 !important;
  border-color:rgba(0,63,55,.12) !important;
}

.card-gold h1,
.card-gold h2,
.card-gold h3,
.card-gold p,
.card-gold li{
  color:#003f37 !important;
}

/* Forms should remain readable unless specifically assigned .theme-card. */
.form-card:not(.theme-card){
  background:rgba(255,253,247,.92) !important;
  color:var(--ink) !important;
  border:1px solid rgba(0,63,55,.12) !important;
}

.form-card:not(.theme-card) h1,
.form-card:not(.theme-card) h2,
.form-card:not(.theme-card) h3{
  color:var(--teal) !important;
}

.form-card:not(.theme-card) p{
  color:#3f4c49 !important;
}

/* Hero title now uses the actual brand message, not "Becoming More". */
.hero-title{
  font-size:clamp(2.7rem,6vw,5.2rem) !important;
  line-height:.98 !important;
  letter-spacing:-.055em;
}

/* More balanced cards. */
.info-card,
.package-card,
.flip-card,
.card-face{
  min-height:300px;
}

.info-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.25rem;
}

/* Highlight sections that frame Dr. Maureen without dark backgrounds. */
.profile-highlight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
  align-items:stretch;
}

.highlight-list{
  display:grid;
  gap:.7rem;
  margin-top:1rem;
}

.highlight-list span{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  font-weight:800;
  line-height:1.5;
}

/* Keep hover motion. */
.info-card,
.package-card,
.card-face{
  transition:transform .28s ease, box-shadow .28s ease;
}

.info-card:hover,
.package-card:hover,
.flip-card:hover .card-face{
  transform:translateY(-6px);
}

/* Improve footer and newsletter spacing after card redesign. */
.newsletter-panel{
  margin-top:0;
}

/* Mobile */
@media(max-width:900px){
  .profile-highlight{
    grid-template-columns:1fr;
  }

  .info-card,
  .package-card,
  .flip-card,
  .card-face{
    min-height:auto;
  }
}

/* =========================================================
   V20 BALANCED CARD SYSTEM
   ---------------------------------------------------------
   Design correction:
   - Most cards are now white/cream.
   - Deep Teal / Forest Green is used only for disruption cards.
   - Static feature cards can flip without disappearing.
   - You can easily control every card colour using:
       .card-white
       .card-teal
       .card-gold
   - Sections stay light and spacious.
========================================================= */

/* Page remains premium, bright and calm. */
body{
  background:
    radial-gradient(circle at 8% 28%, rgba(202,166,55,.16), transparent 22rem),
    radial-gradient(circle at 94% 34%, rgba(0,63,55,.14), transparent 26rem),
    linear-gradient(120deg,#fffaf0 0%,#fffdf7 52%,#edf7f4 100%) !important;
}

/* No full deep teal sections. */
.section,
.section-tight,
.hero,
.newsletter-section{
  background-color:transparent !important;
}

/* Default card look: white/cream. */
.info-card,
.package-card,
.form-card:not(.theme-card),
.comment-card,
.card-face:not(.card-back){
  background:rgba(255,253,247,.92) !important;
  color:var(--ink) !important;
  border:1px solid rgba(0,63,55,.12) !important;
  box-shadow:0 22px 58px rgba(0,63,55,.09) !important;
}

/* Default card text. */
.info-card h1,
.info-card h2,
.info-card h3,
.package-card h1,
.package-card h2,
.package-card h3,
.card-face:not(.card-back) h1,
.card-face:not(.card-back) h2,
.card-face:not(.card-back) h3{
  color:var(--teal) !important;
}

.info-card p,
.info-card li,
.package-card p,
.package-card li,
.card-face:not(.card-back) p,
.card-face:not(.card-back) li{
  color:#3f4c49 !important;
}

/* Force Deep Teal / Forest Green card only where we intentionally assign it. */
.card-teal,
.info-card.card-teal,
.package-card.card-teal,
.card-face.card-teal{
  background:
    radial-gradient(circle at 90% 12%, rgba(202,166,55,.18), transparent 9rem),
    linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 28px 74px rgba(0,63,55,.24) !important;
}

.card-teal h1,
.card-teal h2,
.card-teal h3,
.card-teal p,
.card-teal li,
.card-teal strong{
  color:#ffffff !important;
}

/* Force white card. */
.card-white,
.info-card.card-white,
.package-card.card-white,
.card-face.card-white{
  background:rgba(255,253,247,.94) !important;
  color:var(--ink) !important;
  border:1px solid rgba(0,63,55,.12) !important;
}

.card-white h1,
.card-white h2,
.card-white h3{
  color:var(--teal) !important;
}

.card-white p,
.card-white li{
  color:#3f4c49 !important;
}

/* Force gold card for special highlights. */
.card-gold,
.info-card.card-gold,
.package-card.card-gold,
.card-face.card-gold{
  background:
    radial-gradient(circle at 88% 18%, rgba(0,63,55,.13), transparent 8rem),
    linear-gradient(135deg,#f3df91,#caa637) !important;
  color:#003f37 !important;
  border-color:rgba(0,63,55,.12) !important;
}

.card-gold h1,
.card-gold h2,
.card-gold h3,
.card-gold p,
.card-gold li{
  color:#003f37 !important;
}

/* Badges adapt to card colours. */
.icon-badge{
  background:rgba(202,166,55,.18) !important;
  color:var(--teal) !important;
}

.card-teal .icon-badge,
.card-back .icon-badge{
  background:rgba(202,166,55,.26) !important;
  color:#ffffff !important;
}

/* Flip cards fixed: no disappearing on hover. */
.flip-card{
  perspective:1200px;
  min-height:330px;
  overflow:visible;
}

.flip-inner{
  position:relative;
  width:100%;
  min-height:330px;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.7,.2,1);
}

.flip-card:hover .flip-inner{
  transform:rotateY(180deg);
}

.card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  padding:1.55rem;
  border-radius:var(--radius);
  overflow:visible;
}

.card-back{
  transform:rotateY(180deg);
  background:
    radial-gradient(circle at 15% 20%, rgba(202,166,55,.20), transparent 8rem),
    linear-gradient(145deg,#003f37,#002d27) !important;
  color:#ffffff !important;
}

.card-back h3,
.card-back p,
.card-back li{
  color:#ffffff !important;
}

/* On touch screens, do not hide content behind hover only. */
@media (hover:none){
  .flip-card .flip-inner{
    transform:none !important;
  }

  .card-face{
    position:relative;
  }

  .card-back{
    margin-top:1rem;
    transform:none;
  }
}

/* Hero is cleaner and less repetitive. */
.hero-title{
  font-size:clamp(2.6rem,5.7vw,4.9rem) !important;
  line-height:.98 !important;
  letter-spacing:-.055em;
}

.hero .eyebrow{
  max-width:720px;
}

/* Top nav: remove extra clutter and keep clear spacing. */
.nav-menu{
  gap:1.55rem;
}

.nav-book-btn{
  min-width:90px;
  border-radius:999px;
}

/* CTA panels: allowed as colour disruption blocks. */
.cta-panel{
  background:
    radial-gradient(circle at 88% 12%, rgba(202,166,55,.22), transparent 12rem),
    linear-gradient(135deg,#003f37 0%,#00594f 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.15);
}

.cta-panel h2,
.cta-panel p{
  color:#ffffff !important;
}

/* More spacing and cleaner rhythm. */
.section{padding:4.2rem 0}
.section-tight{padding:3rem 0}
.grid{row-gap:1.9rem}
.form-grid{gap:1.25rem 1.35rem}
.form-actions{gap:1rem; flex-wrap:wrap}

/* Compact data-driven content cards. */
.content-card{
  min-height:280px;
}

.content-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:22px;
  margin-bottom:1rem;
  background:rgba(0,63,55,.08);
}

/* Footer remains clean. */
.reference-footer{
  background:#002d27;
}

/* Mobile */
@media(max-width:760px){
  .section{padding:3.2rem 0}
  .section-tight{padding:2.4rem 0}
  .flip-card,
  .flip-inner{
    min-height:auto;
  }
}

/* =========================================================
   V21 SECTION-UNIFORM CARDS + FLIP FIX
   ---------------------------------------------------------
   - Every card in one section now uses the same colour.
   - Use .section-cards-white or .section-cards-teal on the grid.
   - Flip cards no longer disappear; front and back are fixed.
   - Overall page design, animations and light background stay unchanged.
========================================================= */

/* Section-level control: all cards inside this grid become white. */
.section-cards-white .card-face:not(.card-back),
.section-cards-white .info-card,
.section-cards-white .package-card{
  background:rgba(255,253,247,.94) !important;
  color:var(--ink) !important;
  border:1px solid rgba(0,63,55,.12) !important;
  box-shadow:0 22px 58px rgba(0,63,55,.09) !important;
}

.section-cards-white .card-face:not(.card-back) h1,
.section-cards-white .card-face:not(.card-back) h2,
.section-cards-white .card-face:not(.card-back) h3,
.section-cards-white .info-card h1,
.section-cards-white .info-card h2,
.section-cards-white .info-card h3,
.section-cards-white .package-card h1,
.section-cards-white .package-card h2,
.section-cards-white .package-card h3{
  color:var(--teal) !important;
}

.section-cards-white .card-face:not(.card-back) p,
.section-cards-white .card-face:not(.card-back) li,
.section-cards-white .info-card p,
.section-cards-white .info-card li,
.section-cards-white .package-card p,
.section-cards-white .package-card li{
  color:#3f4c49 !important;
}

/* Section-level control: all cards inside this grid become Deep Teal. */
.section-cards-teal .card-face:not(.card-back),
.section-cards-teal .info-card,
.section-cards-teal .package-card{
  background:
    radial-gradient(circle at 90% 12%, rgba(202,166,55,.18), transparent 9rem),
    linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 28px 74px rgba(0,63,55,.24) !important;
}

.section-cards-teal .card-face:not(.card-back) h1,
.section-cards-teal .card-face:not(.card-back) h2,
.section-cards-teal .card-face:not(.card-back) h3,
.section-cards-teal .card-face:not(.card-back) p,
.section-cards-teal .card-face:not(.card-back) li,
.section-cards-teal .info-card h1,
.section-cards-teal .info-card h2,
.section-cards-teal .info-card h3,
.section-cards-teal .info-card p,
.section-cards-teal .info-card li,
.section-cards-teal .package-card h1,
.section-cards-teal .package-card h2,
.section-cards-teal .package-card h3,
.section-cards-teal .package-card p,
.section-cards-teal .package-card li{
  color:#ffffff !important;
}

/* Robust flip behaviour */
.flip-card{
  position:relative;
  min-height:340px !important;
  perspective:1400px;
  overflow:visible !important;
}

.flip-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:340px !important;
  transition:transform .72s cubic-bezier(.2,.7,.2,1);
  transform-style:preserve-3d;
}

.flip-card:hover .flip-inner{
  transform:rotateY(180deg);
}

.card-face{
  position:absolute !important;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.55rem;
  min-height:340px !important;
  border-radius:var(--radius);
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform-style:preserve-3d;
  overflow:hidden !important;
}

.card-face.card-back{
  transform:rotateY(180deg);
  background:
    radial-gradient(circle at 12% 16%, rgba(202,166,55,.20), transparent 9rem),
    linear-gradient(145deg,#003f37,#002d27) !important;
  color:#ffffff !important;
}

.card-face.card-back h1,
.card-face.card-back h2,
.card-face.card-back h3,
.card-face.card-back p,
.card-face.card-back li{
  color:#ffffff !important;
}

.card-face.card-back .btn{
  margin-top:auto;
  align-self:flex-start;
}

/* Make long package cards taller so the back side has room. */
.package-flip,
.package-flip .flip-inner,
.package-flip .card-face{
  min-height:430px !important;
}

/* On mobile/touch, show cards stacked instead of hover flipping. */
@media (hover:none), (max-width:760px){
  .flip-card,
  .flip-inner,
  .card-face{
    min-height:auto !important;
  }

  .flip-inner{
    transform:none !important;
  }

  .card-face{
    position:relative !important;
    inset:auto;
  }

  .card-face.card-back{
    transform:none !important;
    margin-top:1rem;
  }
}

/* =========================================================
   V22 FINAL CARD FIX
   ---------------------------------------------------------
   This section intentionally changes ONLY the card system.
   Overall layout, motion background, cursor trailer and branding stay.
========================================================= */

/* Remove old automatic nth-child colour rules from earlier versions by overriding them. */
.section-cards-white .flip-card .card-face:not(.card-back),
.section-cards-white .info-card,
.section-cards-white .package-card{
    background:rgba(255,253,247,.94) !important;
    color:var(--ink) !important;
    border:1px solid rgba(0,63,55,.12) !important;
    box-shadow:0 22px 58px rgba(0,63,55,.09) !important;
}

.section-cards-white .flip-card .card-face:not(.card-back) h1,
.section-cards-white .flip-card .card-face:not(.card-back) h2,
.section-cards-white .flip-card .card-face:not(.card-back) h3,
.section-cards-white .info-card h1,
.section-cards-white .info-card h2,
.section-cards-white .info-card h3,
.section-cards-white .package-card h1,
.section-cards-white .package-card h2,
.section-cards-white .package-card h3{
    color:var(--teal) !important;
}

.section-cards-white .flip-card .card-face:not(.card-back) p,
.section-cards-white .flip-card .card-face:not(.card-back) li,
.section-cards-white .info-card p,
.section-cards-white .info-card li,
.section-cards-white .package-card p,
.section-cards-white .package-card li{
    color:#3f4c49 !important;
}

.section-cards-teal .flip-card .card-face:not(.card-back),
.section-cards-teal .info-card,
.section-cards-teal .package-card{
    background:
        radial-gradient(circle at 90% 12%, rgba(202,166,55,.18), transparent 9rem),
        linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 28px 74px rgba(0,63,55,.24) !important;
}

.section-cards-teal .flip-card .card-face:not(.card-back) h1,
.section-cards-teal .flip-card .card-face:not(.card-back) h2,
.section-cards-teal .flip-card .card-face:not(.card-back) h3,
.section-cards-teal .flip-card .card-face:not(.card-back) p,
.section-cards-teal .flip-card .card-face:not(.card-back) li,
.section-cards-teal .info-card h1,
.section-cards-teal .info-card h2,
.section-cards-teal .info-card h3,
.section-cards-teal .info-card p,
.section-cards-teal .info-card li,
.section-cards-teal .package-card h1,
.section-cards-teal .package-card h2,
.section-cards-teal .package-card h3,
.section-cards-teal .package-card p,
.section-cards-teal .package-card li{
    color:#ffffff !important;
}

.section-cards-white .tag{
    background:rgba(0,63,55,.08) !important;
    color:var(--teal) !important;
}

.section-cards-teal .tag{
    background:rgba(255,255,255,.14) !important;
    color:#ffffff !important;
}

/* Reliable flip card layout. */
.flip-card{
    position:relative !important;
    min-height:350px !important;
    perspective:1400px !important;
    overflow:visible !important;
}

.flip-inner{
    position:relative !important;
    width:100% !important;
    min-height:350px !important;
    transform-style:preserve-3d !important;
    transition:transform .72s cubic-bezier(.2,.7,.2,1) !important;
}

.flip-card:hover .flip-inner{
    transform:rotateY(180deg) !important;
}

.card-face{
    position:absolute !important;
    inset:0 !important;
    min-height:350px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:.55rem !important;
    border-radius:var(--radius) !important;
    padding:1.55rem !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform-style:preserve-3d !important;
    overflow:hidden !important;
}

.card-back{
    transform:rotateY(180deg) !important;
    background:
        radial-gradient(circle at 12% 16%, rgba(202,166,55,.20), transparent 9rem),
        linear-gradient(145deg,#003f37,#002d27) !important;
    color:#ffffff !important;
}

.card-back h1,
.card-back h2,
.card-back h3,
.card-back p,
.card-back li{
    color:#ffffff !important;
}

.card-back .btn{
    margin-top:auto !important;
    align-self:flex-start !important;
}

/* Package cards need extra height. */
.package-flip,
.package-flip .flip-inner,
.package-flip .card-face{
    min-height:440px !important;
}

/* Touch/mobile fallback: show both sides stacked, no disappearance. */
@media (hover:none), (max-width:760px){
    .flip-card,
    .flip-inner,
    .card-face{
        min-height:auto !important;
    }

    .flip-inner{
        transform:none !important;
    }

    .card-face{
        position:relative !important;
        inset:auto !important;
    }

    .card-back{
        transform:none !important;
        margin-top:1rem !important;
    }
}

/* =========================================================
   V23 SPACING, FITTING, FOOTER NEWSLETTER AND IMAGE MOTION
   ---------------------------------------------------------
   Changes only improve cards, spacing, page sections, footer newsletter,
   and image hover motion.
========================================================= */

:root{
    --card-min-h: 390px;
    --package-card-min-h: 500px;
}

/* Cleaner section spacing without making the page too loose. */
.section{padding:4.4rem 0 !important;}
.section-tight{padding:3.4rem 0 !important;}
.grid{gap:1.65rem !important; row-gap:2.05rem !important;}

/* Card sizing for cleaner modern layout. */
.flip-card{
    min-height:var(--card-min-h) !important;
    overflow:visible !important;
}

.flip-inner{
    min-height:var(--card-min-h) !important;
}

.card-face{
    min-height:var(--card-min-h) !important;
    padding:1.75rem !important;
    overflow:hidden !important;
}

/* Inner card layout gives content room and prevents crowding. */
.card-content{
    height:100%;
    display:flex;
    flex-direction:column;
    gap:.72rem;
}

.card-content h3{
    font-size:clamp(1.24rem,1.8vw,1.56rem) !important;
    line-height:1.12 !important;
    margin:0 !important;
}

.card-content p{
    font-size:1rem !important;
    line-height:1.72 !important;
    margin:0 !important;
}

.compact-list{
    margin:.2rem 0 0 !important;
    padding-left:1.1rem !important;
    display:grid !important;
    gap:.46rem !important;
}

.compact-list li{
    line-height:1.45 !important;
    font-size:.98rem !important;
}

.card-button{
    margin-top:auto !important;
    width:max-content !important;
}

/* Package cards need extra room. */
.package-flip,
.package-flip .flip-inner,
.package-flip .card-face{
    min-height:var(--package-card-min-h) !important;
}

.package-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

/* Keep same colour in section and prevent previous mixed-card rules. */
.section-cards-white .card-face:not(.card-back),
.section-cards-white .info-card,
.section-cards-white .package-card{
    background:rgba(255,253,247,.94) !important;
    color:var(--ink) !important;
}

.section-cards-teal .card-face:not(.card-back),
.section-cards-teal .info-card,
.section-cards-teal .package-card{
    background:
        radial-gradient(circle at 90% 12%, rgba(202,166,55,.18), transparent 9rem),
        linear-gradient(145deg,#003f37 0%,#002d27 100%) !important;
    color:#fff !important;
}

/* Image placeholders now have motion and cursor interaction. */
.image-placeholder{
    position:relative !important;
    transform-style:preserve-3d;
    transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
    overflow:hidden;
}

.image-placeholder::before{
    content:"";
    position:absolute;
    inset:-35%;
    background:conic-gradient(from 90deg, transparent, rgba(202,166,55,.18), transparent, rgba(0,63,55,.14), transparent);
    animation:imageAuraSpin 10s linear infinite;
    opacity:.85;
    pointer-events:none;
}

.image-placeholder::after{
    content:"";
    position:absolute;
    inset:1.1rem;
    border:1px solid rgba(202,166,55,.22);
    border-radius:28px;
    transform:translateZ(25px);
    pointer-events:none;
}

.image-placeholder img,
.image-placeholder .replace-label,
.image-placeholder .hero-mini-card{
    position:relative;
    z-index:2;
}

.image-placeholder:hover{
    transform:translateY(-8px) rotateX(2deg) rotateY(-3deg);
    box-shadow:0 34px 90px rgba(0,63,55,.18);
    border-color:rgba(202,166,55,.48);
}

.image-placeholder:hover .replace-label{
    transform:translateY(-4px) scale(1.02);
}

.replace-label{
    transition:transform .35s ease;
}

@keyframes imageAuraSpin{
    to{transform:rotate(360deg);}
}

/* Footer newsletter section. */
.footer-newsletter-card{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:1.5rem;
    align-items:center;
    padding:2rem;
    margin-bottom:3rem;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 60px rgba(0,0,0,.12);
}

.footer-newsletter-card h2,
.footer-newsletter-card p,
.footer-newsletter-card label{
    color:#fff !important;
}

.footer-newsletter-card .eyebrow{
    color:var(--gold-2) !important;
}

.footer-newsletter-form .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.footer-newsletter-form input{
    background:#fffaf0 !important;
    color:var(--ink) !important;
}

.footer-newsletter-form .btn{
    margin-top:.9rem;
}

/* On smaller screens, make cards natural height and show both faces stacked. */
@media (hover:none), (max-width:760px){
    :root{
        --card-min-h:auto;
        --package-card-min-h:auto;
    }

    .card-content{
        height:auto;
    }

    .footer-newsletter-card,
    .footer-newsletter-form .form-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   V24 CARD FIT + SEPARATE NEWSLETTER + STRONG IMAGE MOTION
========================================================= */

:root{
    --card-min-h: 430px;
    --package-card-min-h: 520px;
}

/* Make cards fit content better with clean spacing. */
.flip-card{
    min-height:var(--card-min-h) !important;
}

.flip-inner{
    min-height:var(--card-min-h) !important;
}

.card-face{
    min-height:var(--card-min-h) !important;
    padding:1.9rem !important;
}

.card-content{
    height:100%;
    display:flex;
    flex-direction:column;
    gap:.82rem;
}

.card-content h3{
    font-size:clamp(1.24rem,1.65vw,1.48rem) !important;
    line-height:1.16 !important;
}

.card-content p{
    line-height:1.68 !important;
    max-width:95%;
}

/* No small "more details" strip on card front. */
.card-content > .tag:not(.package-meta .tag){
    display:none !important;
}

/* Button on front of card. */
.btn-card-front{
    margin-top:auto !important;
    width:max-content !important;
    max-width:100% !important;
    background:rgba(0,63,55,.08) !important;
    color:var(--teal) !important;
    border:1px solid rgba(0,63,55,.12) !important;
    box-shadow:none !important;
}

.section-cards-teal .btn-card-front,
.card-teal .btn-card-front{
    background:rgba(255,255,255,.13) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.18) !important;
}

.card-back .btn{
    margin-top:auto !important;
}

.compact-list{
    gap:.56rem !important;
    padding-left:1.15rem !important;
}

.compact-list li{
    line-height:1.52 !important;
}

/* Package cards need room. */
.package-flip,
.package-flip .flip-inner,
.package-flip .card-face{
    min-height:var(--package-card-min-h) !important;
}

/* Standalone newsletter: same design you liked, but separated from footer. */
.standalone-newsletter{
    background:#002d27 !important;
    padding:4rem 0 !important;
    margin-top:2rem;
}

.newsletter-standalone-card{
    margin-bottom:0 !important;
    background:rgba(255,255,255,.08) !important;
}

.reference-footer{
    padding-top:4rem !important;
}

/* Stronger top image placeholder motion. */
.image-placeholder{
    --rx:0deg;
    --ry:0deg;
    --mx:50%;
    --my:50%;
    transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
    transition:transform .18s ease, box-shadow .28s ease, border-color .28s ease !important;
    will-change:transform;
}

.image-placeholder::before{
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(202,166,55,.35), transparent 12rem),
        conic-gradient(from 90deg, transparent, rgba(202,166,55,.22), transparent, rgba(0,63,55,.18), transparent) !important;
    animation:imageAuraSpin 8s linear infinite !important;
}

.image-placeholder:hover{
    transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-10px) scale(1.012) !important;
    box-shadow:0 38px 100px rgba(0,63,55,.22) !important;
}

.image-placeholder:hover .replace-label{
    transform:translateY(-6px) scale(1.025) !important;
}

/* Mobile: no flip hover issues. */
@media (hover:none), (max-width:760px){
    :root{
        --card-min-h:auto;
        --package-card-min-h:auto;
    }

    .standalone-newsletter{
        padding:3rem 0 !important;
    }
}

/* =========================================================
   V25 ICONS, BUTTONS, SECTION PARTIALS, WHITE NEWSLETTER
========================================================= */

/* Font Awesome icon baseline */
.fa-solid,
.fa-regular,
.fa-brands{
    line-height:1;
}

/* Fancy, visible icons on all card backgrounds */
.icon-badge{
    width:3.15rem !important;
    height:3.15rem !important;
    border-radius:1.05rem !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:1.2rem !important;
    background:linear-gradient(145deg,#f3df91,#caa637) !important;
    color:#003f37 !important;
    box-shadow:0 14px 32px rgba(202,166,55,.28) !important;
    border:1px solid rgba(255,255,255,.28) !important;
}

.section-cards-teal .icon-badge,
.card-teal .icon-badge,
.card-back .icon-badge,
.cta-panel .icon-badge{
    background:linear-gradient(145deg,#f8e9a8,#caa637) !important;
    color:#002d27 !important;
    box-shadow:0 14px 35px rgba(0,0,0,.22) !important;
}

/* Stronger, more premium buttons */
.btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.6rem !important;
    border-radius:999px !important;
    font-weight:900 !important;
    letter-spacing:.01em !important;
    min-height:3.05rem !important;
    padding:.88rem 1.35rem !important;
    transition:transform .24s ease, box-shadow .24s ease, background .24s ease !important;
}

.btn:hover{
    transform:translateY(-2px) !important;
}

.btn-primary,
.nav-book-btn{
    background:#003f37 !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 14px 34px rgba(0,63,55,.24) !important;
}

.btn-gold{
    background:linear-gradient(145deg,#f3df91,#caa637) !important;
    color:#003f37 !important;
    border:1px solid rgba(0,63,55,.10) !important;
    box-shadow:0 14px 34px rgba(202,166,55,.24) !important;
}

.btn-outline{
    background:rgba(255,253,247,.74) !important;
    color:#003f37 !important;
    border:1px solid rgba(0,63,55,.16) !important;
}

/* Card front buttons visible on white and forest green */
.btn-card-front{
    margin-top:auto !important;
    background:linear-gradient(145deg,#f3df91,#caa637) !important;
    color:#003f37 !important;
    border:1px solid rgba(0,63,55,.12) !important;
    box-shadow:0 10px 26px rgba(202,166,55,.20) !important;
}

.section-cards-teal .btn-card-front,
.card-teal .btn-card-front{
    background:#ffffff !important;
    color:#003f37 !important;
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.20) !important;
}

/* Teal card text and list visibility */
.section-cards-teal .compact-list li,
.card-teal .compact-list li,
.card-back .compact-list li{
    color:#ffffff !important;
}

.section-cards-teal .compact-list li::marker,
.card-teal .compact-list li::marker,
.card-back .compact-list li::marker{
    color:#f3df91 !important;
}

/* Newsletter: white standalone section, not full forest green band */
.standalone-newsletter{
    background:
        radial-gradient(circle at 15% 20%, rgba(202,166,55,.12), transparent 18rem),
        linear-gradient(135deg,#fffaf0,#edf7f4) !important;
    padding:4.2rem 0 !important;
    margin-top:0 !important;
}

.newsletter-standalone-card{
    max-width:1180px;
    margin:0 auto !important;
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:1.6rem;
    align-items:center;
    padding:2rem !important;
    border-radius:32px;
    background:rgba(255,253,247,.92) !important;
    border:1px solid rgba(0,63,55,.12) !important;
    box-shadow:0 26px 70px rgba(0,63,55,.10) !important;
}

.newsletter-standalone-card h2{
    color:#003f37 !important;
}

.newsletter-standalone-card p,
.newsletter-standalone-card label{
    color:#3f4c49 !important;
}

.newsletter-standalone-card .eyebrow{
    color:#9f8020 !important;
}

.footer-newsletter-form .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.footer-newsletter-form input{
    background:#fffaf0 !important;
    color:#263330 !important;
    border:1px solid rgba(0,63,55,.14) !important;
}

/* Image placeholders: make hover effect more obvious */
.image-placeholder{
    cursor:pointer;
}

.image-placeholder:hover img{
    transform:scale(1.025);
    filter:saturate(1.05) contrast(1.03);
}

.image-placeholder img{
    transition:transform .35s ease, filter .35s ease;
}

/* Mobile */
@media(max-width:860px){
    .newsletter-standalone-card,
    .footer-newsletter-form .form-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   V26 FOREST GREEN ICON VISIBILITY FIX
   ---------------------------------------------------------
   Fixes icons that were too dark on Forest Green cards.
   This only adjusts icons/buttons on cards and keeps the design intact.
========================================================= */

/* Make ALL icon containers bright enough on dark cards */
.section-cards-teal .icon-badge,
.card-teal .icon-badge,
.flip-card .card-back .icon-badge,
.card-face.card-teal .icon-badge{
    background:
        radial-gradient(circle at 28% 24%, #fff6c9 0%, #f3df91 42%, #caa637 100%) !important;
    color:#002d27 !important;
    border:1px solid rgba(255,255,255,.58) !important;
    box-shadow:
        0 14px 34px rgba(202,166,55,.35),
        0 0 0 7px rgba(243,223,145,.10) !important;
}

/* Force Font Awesome icon itself to be visible */
.section-cards-teal .icon-badge i,
.card-teal .icon-badge i,
.flip-card .card-back .icon-badge i,
.card-face.card-teal .icon-badge i{
    color:#002d27 !important;
    opacity:1 !important;
    font-size:1.25rem !important;
    filter:none !important;
}

/* White cards keep a soft premium badge */
.section-cards-white .icon-badge,
.card-white .icon-badge{
    background:
        radial-gradient(circle at 28% 24%, #ffffff 0%, #f7edc1 48%, #ead274 100%) !important;
    color:#003f37 !important;
    border:1px solid rgba(202,166,55,.24) !important;
    box-shadow:
        0 14px 34px rgba(202,166,55,.18),
        0 0 0 7px rgba(202,166,55,.06) !important;
}

.section-cards-white .icon-badge i,
.card-white .icon-badge i{
    color:#003f37 !important;
    opacity:1 !important;
    font-size:1.18rem !important;
}

/* Make icon badges more readable on hover/flip */
.flip-card:hover .icon-badge{
    transform:translateY(-2px) scale(1.03);
}

.icon-badge{
    transition:transform .28s ease, box-shadow .28s ease, background .28s ease !important;
}

/* Forest green card front buttons remain bright and readable */
.section-cards-teal .btn-card-front,
.card-teal .btn-card-front,
.card-face.card-teal .btn-card-front{
    background:linear-gradient(145deg,#fff6c9,#caa637) !important;
    color:#002d27 !important;
    border:1px solid rgba(255,255,255,.42) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.22) !important;
}

.section-cards-teal .btn-card-front i,
.card-teal .btn-card-front i,
.card-face.card-teal .btn-card-front i{
    color:#002d27 !important;
}

/* Button and icon spacing consistency */
.btn i{
    font-size:.95em;
    color:inherit !important;
}





/* =========================================================
   Premium Sigmasystems Footer Credit Animation
   Hover effect: glow, sweep, orbit sparks, lift and pulse
========================================================= */

.sigma-premium-link {
    --sigma-gold: #d6b33f;
    --sigma-cream: #fff7d6;
    --sigma-teal: #003f35;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    padding: 3px 8px;
    margin-inline: 2px;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: 0.02em;
    transform: translateY(0);
    transition:
        color 0.35s ease,
        transform 0.35s ease,
        text-shadow 0.35s ease;
}

.sigma-premium-link::before {
    content: "";
    position: absolute;
    inset: -5px -8px;
    z-index: -2;
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 50%, rgba(214, 179, 63, 0.35), transparent 28%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.20), transparent 32%),
        linear-gradient(135deg, rgba(214, 179, 63, 0.22), rgba(0, 63, 53, 0.1));
    opacity: 0;
    transform: scale(0.78);
    filter: blur(1px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.sigma-premium-link::after {
    content: "";
    position: absolute;
    left: -15%;
    top: -70%;
    width: 35%;
    height: 240%;
    z-index: 1;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.9),
        rgba(214, 179, 63, 0.75),
        transparent
    );
    transform: translateX(-120%) rotate(18deg);
    opacity: 0;
    pointer-events: none;
}

.sigma-word {
    position: relative;
    z-index: 3;
}

.sigma-word::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--sigma-gold), #ffffff, var(--sigma-gold), transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(214, 179, 63, 0.75);
    transition: width 0.35s ease;
}

.sigma-flare {
    position: absolute;
    right: -9px;
    top: 50%;
    width: 7px;
    height: 7px;
    z-index: 4;
    border-radius: 50%;
    background: var(--sigma-gold);
    box-shadow:
        0 0 0 rgba(214, 179, 63, 0),
        0 0 12px rgba(214, 179, 63, 0.95);
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
    pointer-events: none;
}

.sigma-orbit {
    position: absolute;
    z-index: 2;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sigma-gold);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(214, 179, 63, 0.85);
}

.sigma-orbit-one {
    left: -8px;
    top: -4px;
}

.sigma-orbit-two {
    right: -7px;
    bottom: -5px;
    background: #ffffff;
}

/* Hover State */
.sigma-premium-link:hover {
    color: var(--sigma-cream);
    transform: translateY(-4px) scale(1.06);
    text-shadow:
        0 0 10px rgba(214, 179, 63, 0.75),
        0 0 22px rgba(214, 179, 63, 0.38);
}

.sigma-premium-link:hover::before {
    opacity: 1;
    transform: scale(1);
    animation: sigmaAuraPulse 1.6s ease-in-out infinite;
}

.sigma-premium-link:hover::after {
    opacity: 1;
    animation: sigmaLightSweep 0.85s ease forwards;
}

.sigma-premium-link:hover .sigma-word::after {
    width: 115%;
}

.sigma-premium-link:hover .sigma-flare {
    opacity: 1;
    animation: sigmaFlarePop 1.1s ease-in-out infinite;
}

.sigma-premium-link:hover .sigma-orbit-one {
    opacity: 1;
    animation: sigmaOrbitOne 1.25s ease-in-out infinite;
}

.sigma-premium-link:hover .sigma-orbit-two {
    opacity: 1;
    animation: sigmaOrbitTwo 1.25s ease-in-out infinite;
}

/* Animations */
@keyframes sigmaLightSweep {
    0% {
        transform: translateX(-140%) rotate(18deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(420%) rotate(18deg);
        opacity: 0;
    }
}

@keyframes sigmaAuraPulse {
    0%, 100% {
        box-shadow:
            0 0 0 rgba(214, 179, 63, 0),
            0 0 18px rgba(214, 179, 63, 0.12);
    }

    50% {
        box-shadow:
            0 0 18px rgba(214, 179, 63, 0.22),
            0 0 34px rgba(214, 179, 63, 0.18);
    }
}

@keyframes sigmaFlarePop {
    0%, 100% {
        transform: translateY(-50%) scale(0.75);
        box-shadow:
            0 0 0 0 rgba(214, 179, 63, 0.38),
            0 0 12px rgba(214, 179, 63, 0.8);
    }

    50% {
        transform: translateY(-50%) scale(1.2);
        box-shadow:
            0 0 0 8px rgba(214, 179, 63, 0),
            0 0 20px rgba(214, 179, 63, 1);
    }
}

@keyframes sigmaOrbitOne {
    0% {
        transform: translate(0, 0) scale(0.65);
    }

    50% {
        transform: translate(10px, -8px) scale(1);
    }

    100% {
        transform: translate(0, 0) scale(0.65);
    }
}

@keyframes sigmaOrbitTwo {
    0% {
        transform: translate(0, 0) scale(0.65);
    }

    50% {
        transform: translate(-10px, 8px) scale(1);
    }

    100% {
        transform: translate(0, 0) scale(0.65);
    }
}

/* Mobile-friendly: keep it clean */
@media (max-width: 640px) {
    .sigma-premium-link {
        padding: 2px 5px;
    }

    .sigma-orbit,
    .sigma-flare {
        display: none;
    }
}




/* =========================================================
   Sigmasystems Digital Signature Hover Animation
   Style: premium scan, signature underline, digital dots
========================================================= */

.sigma-signature-link {
    --sigma-gold: #d6b33f;
    --sigma-cream: #fff8dc;
    --sigma-green: #003f35;

    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    margin-inline: 2px;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: 0.025em;
    isolation: isolate;
    overflow: visible;
    transition:
        color 0.35s ease,
        transform 0.35s ease,
        text-shadow 0.35s ease;
}

.sigma-signature-link::before {
    content: "";
    position: absolute;
    inset: -6px -10px;
    z-index: -2;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, rgba(214, 179, 63, 0.26), transparent 58%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(214, 179, 63, 0.18));
    opacity: 0;
    transform: scale(0.72);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.sigma-signature-link::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: -4px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--sigma-gold),
        #ffffff,
        var(--sigma-gold)
    );
    transform: scaleX(0);
    transform-origin: left;
    box-shadow: 0 0 14px rgba(214, 179, 63, 0.8);
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1);
}

.sigma-signature-word {
    position: relative;
    z-index: 3;
    display: inline-block;
}

.sigma-scan-line {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    width: 14px;
    z-index: 4;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.95),
        rgba(214, 179, 63, 0.95),
        transparent
    );
    opacity: 0;
    filter: blur(0.2px);
    transform: translateX(-18px) skewX(-14deg);
    pointer-events: none;
}

.sigma-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    z-index: 5;
    border-radius: 50%;
    background: var(--sigma-gold);
    opacity: 0;
    box-shadow: 0 0 12px rgba(214, 179, 63, 0.95);
    pointer-events: none;
}

.sigma-dot-1 {
    left: -5px;
    top: -4px;
}

.sigma-dot-2 {
    right: -4px;
    top: 50%;
}

.sigma-dot-3 {
    left: 50%;
    bottom: -8px;
    background: #ffffff;
}

/* Hover State */
.sigma-signature-link:hover {
    color: var(--sigma-cream);
    transform: translateY(-4px) scale(1.055);
    text-shadow:
        0 0 8px rgba(214, 179, 63, 0.85),
        0 0 24px rgba(214, 179, 63, 0.4);
}

.sigma-signature-link:hover::before {
    opacity: 1;
    transform: scale(1);
    animation: sigmaSignaturePulse 1.8s ease-in-out infinite;
}

.sigma-signature-link:hover::after {
    transform: scaleX(1);
}

.sigma-signature-link:hover .sigma-signature-word {
    animation: sigmaWordLift 0.8s ease both;
}

.sigma-signature-link:hover .sigma-scan-line {
    animation: sigmaScanAcross 0.95s ease forwards;
}

.sigma-signature-link:hover .sigma-dot-1 {
    animation: sigmaDotFloatOne 1.25s ease-in-out infinite;
}

.sigma-signature-link:hover .sigma-dot-2 {
    animation: sigmaDotFloatTwo 1.25s ease-in-out infinite;
}

.sigma-signature-link:hover .sigma-dot-3 {
    animation: sigmaDotFloatThree 1.25s ease-in-out infinite;
}

/* Animations */
@keyframes sigmaScanAcross {
    0% {
        opacity: 0;
        transform: translateX(-22px) skewX(-14deg);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(118px) skewX(-14deg);
    }
}

@keyframes sigmaWordLift {
    0% {
        transform: translateY(0);
        letter-spacing: 0.025em;
    }

    45% {
        transform: translateY(-2px);
        letter-spacing: 0.055em;
    }

    100% {
        transform: translateY(0);
        letter-spacing: 0.025em;
    }
}

@keyframes sigmaSignaturePulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(214, 179, 63, 0);
    }

    50% {
        box-shadow: 0 0 28px rgba(214, 179, 63, 0.22);
    }
}

@keyframes sigmaDotFloatOne {
    0%, 100% {
        opacity: 0.35;
        transform: translate(0, 0) scale(0.7);
    }

    50% {
        opacity: 1;
        transform: translate(8px, -7px) scale(1.1);
    }
}

@keyframes sigmaDotFloatTwo {
    0%, 100% {
        opacity: 0.35;
        transform: translate(0, -50%) scale(0.7);
    }

    50% {
        opacity: 1;
        transform: translate(-8px, -75%) scale(1.15);
    }
}

@keyframes sigmaDotFloatThree {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, 0) scale(0.65);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, 7px) scale(1.05);
    }
}

@media (max-width: 640px) {
    .sigma-signature-link {
        padding: 2px 5px;
    }

    .sigma-dot,
    .sigma-scan-line {
        display: none;
    }
}

.reaction-btn.is-active {
    background: var(--gold, #c89b3c);
    color: #ffffff;
    border-color: var(--gold, #c89b3c);
}

.reaction-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}