/* ============================================================
   HARMONIA — GLOBAL CLEAN CSS (SYSTEM FONT)
   ============================================================ */

/* -------------------------
   0) Brand tokens + font
------------------------- */
:root{
  --harmonia-ink:#2f4f4f;
  --harmonia-text-soft:#7a6454;

  --harmonia-teal:#1f8a8a;

  --harmonia-gold:#B68C62;
  --harmonia-gold-light:#e5c7a3;

  --harmonia-sand:#f7f0e7;
  --harmonia-sand-soft:#fbf6f0;

  --harmonia-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* -------------------------
   1) Global base + background
------------------------- */
html, body{
  min-height:100%;
  color:var(--harmonia-ink);
  font-family:var(--harmonia-font);
  background:transparent !important;
}

/* Fixed gradient behind everything */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    145deg,
    #2f4f4f 0%,
    #355757 25%,
    #3f6767 50%,
    #6f7f74 78%,
    #b68c62 100%
  );
  background-size:cover;
  background-repeat:no-repeat;
}

/* Make theme shells transparent so gradient shows */
#page,
.site,
.site-content,
.site-content-contain,
.site-main,
.entry-content,
#primary,
main,
.wp-block-group.has-background,
.wp-block-cover{
  background:transparent !important;
}

/* ONE global font override */
body, body *{
  font-family:var(--harmonia-font) !important;
}

/* -------------------------
   2) CTA buttons (gold pill)
------------------------- */
a.hero-cta,
.hero-cta,
.hero-cta-primary,
.hero-cta-secondary,
.wp-block-button__link,
a.wp-element-button,
button.wp-element-button,
button.button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  padding:0.9rem 2.6rem !important;
  border-radius:999px !important;

  font-size:0.95rem !important;
  font-weight:600 !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;

  color:#fff !important;
  background:linear-gradient(120deg,var(--harmonia-gold),var(--harmonia-gold-light)) !important;

  border:none !important;
  text-decoration:none !important;

  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  -webkit-text-fill-color:#fff !important;

  box-shadow:
    0 14px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.70) !important;

  transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

a.hero-cta:hover,
.hero-cta:hover,
.hero-cta-primary:hover,
.hero-cta-secondary:hover,
.wp-block-button__link:hover,
a.wp-element-button:hover,
button.wp-element-button:hover,
button.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  background:linear-gradient(120deg,#c69667,#eed1aa) !important;
  transform:translateY(-1px) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.32),
    0 0 0 1px rgba(255,255,255,0.90) !important;
}

.hero-cta-row,
.nt-final-cta{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
}

/* -------------------------
   3) Glass tiles
------------------------- */
.glass-tile,
.nt-box,
.area-card-inner,
.icon-card,
.hx-card,
.service-card,
.nt-expect-card,
.step,
.sk-brand-card,
.sk-icon-card,
.wte-card,
.nt-faq{
  border-radius:1.4rem;
  padding:1.7rem 1.7rem 1.6rem;
  background:
    radial-gradient(circle at top left,
      rgba(255,255,255,0.95),
      rgba(252,244,234,0.96)
    );
  box-shadow:
    0 18px 40px rgba(0,0,0,0.14),
    0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
  color:var(--harmonia-ink);
}

.glass-tile p,
.nt-box p,
.area-card-text,
.nt-final-text,
.nt-hero-text,
.nt-intro-card p,
.icon-card p,
.nt-expect-card p,
.step p,
.nt-faq p,
.centered-tile p{
  font-size:0.98rem;
  line-height:1.75;
  color:var(--harmonia-text-soft);
}

/* -------------------------
   4) Headings (gold on dark)
------------------------- */
.lux-h2,
.nt-section-heading,
.section-title,
.cherry-section-title,
.cherry-steps-title,
h2.has-text-align-center{
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;

  color:#cfa774 !important;
  background:none !important;
  -webkit-text-fill-color:#cfa774 !important;

  text-shadow:0 2px 6px rgba(0,0,0,0.35);
  margin-top:0;
  margin-bottom:1.75rem;
}

/* -------------------------
   5) Hero layout (site-wide)
------------------------- */
.harmonia-hero{
  padding:7.5rem 1.5rem 4.5rem;
  background:transparent !important;
}

.harmonia-hero-inner{
  max-width:1440px;
  margin:0 auto;
  border-radius:2.2rem;
  padding:2.4rem 2.6rem 2.6rem;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.16);
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:2.4rem;
  align-items:center;
}

/* HERO VIDEO FRAME */
.hero-video-frame{
  position:relative;
  width:100%;
  border-radius:1.9rem;
  overflow:hidden;
  background:#000;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.hero-video-frame::before{
  content:"";
  display:block;
  padding-top:56.25%;
}

/* ✅ FIX: make video fill frame + fade in */
.hero-video-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  opacity:0;
  transition:opacity 1s ease-in-out;
}
.hero-video-frame video.is-ready{
  opacity:1;
}

.harmonia-hero-content{
  max-width:540px;
  margin-left:auto;
}

@media (max-width:1024px){
  .harmonia-hero-inner{
    grid-template-columns:1fr;
    padding:2rem 1.8rem 2.3rem;
  }
  .harmonia-hero-content{
    max-width:100%;
    margin:1.4rem auto 0;
  }
}

@media (max-width:640px){
  .harmonia-hero{
    padding:8.5rem 1.1rem 3.5rem;
  }
  .hero-cta-row{
    flex-direction:column;
  }
  a.hero-cta,
  .hero-cta{
    width:100%;
  }
}

/* -------------------------
   6) Responsive grids
------------------------- */
.nt-icon-grid,
.nt-expect-grid,
.nt-steps,
.nt-area-grid,
.sk-brand-grid,
.sk-icon-grid,
.wte-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.6rem;
  max-width:1200px;
  margin:0 auto;
}
@media (max-width:960px){
  .nt-icon-grid,
  .nt-expect-grid,
  .nt-steps,
  .nt-area-grid,
  .sk-brand-grid,
  .sk-icon-grid,
  .wte-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .nt-icon-grid,
  .nt-expect-grid,
  .nt-steps,
  .nt-area-grid,
  .sk-brand-grid,
  .sk-icon-grid,
  .wte-grid{
    grid-template-columns:1fr;
  }
}

/* -------------------------
   7) Fix header gap (no padding hacks)
------------------------- */
body{ padding-top:0 !important; }
.harmonia-hero{ margin-top:0 !important; }

/* -------------------------
   8) Remove WP admin bar search button
------------------------- */
#wpadminbar #adminbarsearch,
#wpadminbar .adminbar-button{
  display:none !important;
}
/* ===== HERO VIDEO: remove black bars / force full-bleed cover ===== */
.hero-video-frame{
  position: relative;
  overflow: hidden;
}

/* If your theme sets video { max-width:100%; height:auto; } this overrides it */
.hero-video-frame video{
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center !important;

  display: block !important;
}

/* Keep the frame aspect ratio (adjust if you want it taller/shorter) */
.hero-video-frame::before{
  content: "" !important;
  display: block !important;
  padding-top: 60% !important; /* keep your current ratio */
}
/* Your site already uses these wrappers — center them */
.hero-cta-row,
.nt-final-cta{
  display:flex !important;
  justify-content:center !important;
  flex-wrap:wrap;
  gap:0.9rem;
}