
/* ============================================================
 * v2.8 — Hero image restore + Section Visual Rhythm
 * Fixes: hero bg killed by v2.5 transparent !important,
 * stats strip unstyled, locations white-on-beige broken,
 * all sections uniform beige (no visual hierarchy)
 * ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. HERO — restore background image
   (v2.5 set .hsn-hero{background:transparent !important}
    overriding .hsn-hero--fullbg{background:var(--hsn-hero-bg)})
   ══════════════════════════════════════════════════════════ */
.hsn-hero--fullbg{
  background:var(--hsn-hero-bg) center/cover no-repeat !important;
}

/* Fix ::before — override v2.5 shape (42vw blob) to full-bleed gradient */
.hsn-hero--fullbg::before{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  min-width:unset !important;
  min-height:unset !important;
  right:0 !important;
  top:0 !important;
  border-radius:0 !important;
  background:linear-gradient(
    108deg,
    rgba(7,13,31,.93) 0%,
    rgba(11,27,58,.80) 40%,
    rgba(11,27,58,.50) 65%,
    rgba(15,91,216,.14) 100%
  ) !important;
  z-index:1 !important;
}

/* Bottom fade to page background */
.hsn-hero--fullbg::after{
  content:"" !important;
  position:absolute !important;
  inset:auto 0 -1px 0 !important;
  height:220px !important;
  background:linear-gradient(180deg,transparent 0%,rgba(7,13,31,.45) 40%,var(--hsn-bg) 100%) !important;
  z-index:2 !important;
  pointer-events:none !important;
}

/* ══════════════════════════════════════════════════════════
   2. STATS STRIP — elevated floating card
   ══════════════════════════════════════════════════════════ */
.hsn-stats-wrap{
  position:relative;
  z-index:10;
  margin-top:-4rem;
  padding-bottom:3.5rem;
}

.hsn-stats{
  background:#fff !important;
  border:1px solid rgba(201,169,97,.22) !important;
  border-radius:20px !important;
  box-shadow:0 24px 64px -16px rgba(11,27,58,.22),0 4px 16px rgba(11,27,58,.07) !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  overflow:hidden !important;
}

.hsn-stat{
  padding:2.25rem 2rem !important;
  text-align:center !important;
  border-right:1px solid rgba(201,169,97,.14) !important;
  border-bottom:none !important;
}
.hsn-stat:last-child{border-right:none !important}

.hsn-stat__num{
  display:block !important;
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:2.9rem !important;
  font-weight:700 !important;
  color:#0B1B3A !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
  margin-bottom:.45rem !important;
}

.hsn-stat__lbl{
  display:block !important;
  font-size:.67rem !important;
  font-weight:700 !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase !important;
  color:#7682a8 !important;
}

/* Dark mode */
[data-theme="dark"] .hsn-stats{
  background:var(--hsn-surface) !important;
  border-color:var(--hsn-border) !important;
  box-shadow:0 24px 64px -16px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .hsn-stat{border-color:var(--hsn-border) !important}
[data-theme="dark"] .hsn-stat__num{color:var(--hsn-gold) !important}
[data-theme="dark"] .hsn-stat__lbl{color:var(--hsn-muted) !important}

/* ══════════════════════════════════════════════════════════
   3. SECTION BACKGROUNDS — visual rhythm
   Light → Cream → Dark → Light → Dark → Cream → Dark → Light
   ══════════════════════════════════════════════════════════ */

/* Story: clean white editorial */
.hsn-section:has(.hsn-story){
  background:var(--hsn-surface) !important;
  border-top:none !important;
}
/* Services: warm cream tint */
.hsn-section:has(.hsn-card){
  background:var(--hsn-surface-soft,#fbf7ee) !important;
}
/* Principles: white + gold accent border */
.hsn-principles{
  background:var(--hsn-surface) !important;
  border-top:3px solid rgba(201,169,97,.28) !important;
}
/* Fix heading invisible (PHP emits style="color:#fff" for dark sections, but this one is now light) */
.hsn-principles .hsn-section-head,
.hsn-principles .hsn-section-label{
  color:var(--hsn-text) !important;
}
.hsn-principles .hsn-section-label{color:var(--hsn-gold) !important}
.hsn-principles .hsn-section-title,
.hsn-principles .hsn-section-head h2{color:var(--hsn-text) !important}
.hsn-principles .hsn-section-copy{color:var(--hsn-text-soft) !important}

/* Principle cards */
.hsn-principle{
  background:var(--hsn-surface) !important;
  border:1px solid var(--hsn-border,#ebe5d8) !important;
  border-radius:18px !important;
  padding:2rem 1.5rem !important;
  transition:border-color .25s !important;
}
.hsn-principle:hover{border-color:rgba(201,169,97,.4) !important}

.hsn-principle__num{
  display:block !important;
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:2.5rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  color:var(--hsn-gold,#C9A961) !important;
  opacity:.55 !important;
  margin-bottom:.85rem !important;
}
.hsn-principle__title{
  display:block !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  color:var(--hsn-text,#1a2540) !important;
  margin-bottom:.6rem !important;
  letter-spacing:-.01em !important;
}
.hsn-principle__text{
  font-size:.88rem !important;
  color:var(--hsn-text-soft,#3d4866) !important;
  line-height:1.65 !important;
  margin:0 !important;
}

/* Dark mode */
[data-theme="dark"] .hsn-principles{background:var(--hsn-bg) !important}
[data-theme="dark"] .hsn-principle{background:var(--hsn-surface) !important;border-color:var(--hsn-border) !important}
[data-theme="dark"] .hsn-principle__title{color:var(--hsn-text) !important}
[data-theme="dark"] .hsn-principle__text{color:var(--hsn-text-soft) !important}
/* Proof: warm cream */
.hsn-section:has(.hsn-proof){
  background:var(--hsn-surface-soft,#fbf7ee) !important;
  border-top:1px solid rgba(201,169,97,.15) !important;
}
/* Contact: white */
.hsn-section:has(.hsn-contact-v2){
  background:var(--hsn-surface) !important;
  border-top:1px solid var(--hsn-border,#ebe5d8) !important;
}

/* Dark mode — collapse to single surface color */
[data-theme="dark"] .hsn-section:has(.hsn-story),
[data-theme="dark"] .hsn-section:has(.hsn-card),
[data-theme="dark"] .hsn-section:has(.hsn-principles__grid),
[data-theme="dark"] .hsn-section:has(.hsn-proof),
[data-theme="dark"] .hsn-section:has(.hsn-contact-v2){
  background:var(--hsn-bg) !important;
}

/* ══════════════════════════════════════════════════════════
   4. LOCATIONS — dark navy section + styled cards
   Section emits white inline text on beige bg (broken).
   Fix: give the section a dark background.
   ══════════════════════════════════════════════════════════ */
.hsn-locations{
  background:linear-gradient(165deg,#071224 0%,#0c2248 55%,#0b1b3a 100%) !important;
  position:relative !important;
}

/* Location cards — glass-dark style */
.hsn-location{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  padding:1.75rem 1.5rem !important;
  transition:background .25s,border-color .25s !important;
}
.hsn-location:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(201,169,97,.35) !important;
}

.hsn-location__flag{
  display:block !important;
  font-size:2.5rem !important;
  line-height:1 !important;
  margin-bottom:.9rem !important;
}

.hsn-location__country{
  display:block !important;
  font-size:.67rem !important;
  font-weight:700 !important;
  letter-spacing:2.5px !important;
  text-transform:uppercase !important;
  color:var(--hsn-gold,#C9A961) !important;
  margin-bottom:.3rem !important;
}

.hsn-location__city{
  display:block !important;
  font-size:1.1rem !important;
  font-weight:700 !important;
  color:#fff !important;
  margin-bottom:.55rem !important;
}

.hsn-location__addr{
  display:block !important;
  font-size:.78rem !important;
  color:rgba(255,255,255,.48) !important;
  line-height:1.55 !important;
}

/* Grid: 4 cols on desktop, responsive */
.hsn-locations__grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:1.25rem !important;
}

/* ══════════════════════════════════════════════════════════
   5. STORY PANEL — gold accent border
   ══════════════════════════════════════════════════════════ */
.hsn-story__panel{
  border-left:3px solid rgba(201,169,97,.4) !important;
}

/* ══════════════════════════════════════════════════════════
   6. METRICS BAND — typography refinement
   ══════════════════════════════════════════════════════════ */
.hsn-metrics{
  border-top:3px solid rgba(201,169,97,.3) !important;
}
.hsn-metric strong{
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:1.6rem !important;
  color:var(--hsn-gold,#C9A961) !important;
  line-height:1.15 !important;
}
.hsn-metric p,.hsn-metric span:not(.hsn-section-label){
  color:rgba(255,255,255,.68) !important;
  font-size:.88rem !important;
  line-height:1.6 !important;
}

/* ══════════════════════════════════════════════════════════
   7. PROOF SECTION — accent and logo chip polish
   ══════════════════════════════════════════════════════════ */
.hsn-proof__box{
  border-top:3px solid rgba(201,169,97,.35) !important;
}
/* Logo chips com ícone + label */
.hsn-logo-chip{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.55rem !important;
  min-height:100px !important;
  padding:1.25rem 1rem !important;
  border:1px solid rgba(201,169,97,.2) !important;
  border-radius:18px !important;
  background:var(--hsn-surface-soft,#fbf7ee) !important;
  transition:border-color .2s,background .2s,transform .2s !important;
  cursor:default !important;
}
.hsn-logo-chip:hover{
  border-color:rgba(201,169,97,.5) !important;
  background:rgba(201,169,97,.07) !important;
  transform:translateY(-2px) !important;
}
.hsn-logo-chip i{
  font-size:1.5rem !important;
  color:var(--hsn-gold,#C9A961) !important;
  display:block !important;
}
.hsn-chip-label{
  font-size:.72rem !important;
  font-weight:700 !important;
  color:var(--hsn-secondary,#0F5BD8) !important;
  text-align:center !important;
  letter-spacing:.2px !important;
  line-height:1.35 !important;
}
[data-theme="dark"] .hsn-logo-chip{
  background:var(--hsn-surface) !important;
  border-color:var(--hsn-border) !important;
}
[data-theme="dark"] .hsn-chip-label{color:var(--hsn-text) !important}

/* ══════════════════════════════════════════════════════════
   8. REDEES CARDS — gold left accent
   ══════════════════════════════════════════════════════════ */
.hsn-redees__card{
  border-left:2px solid rgba(201,169,97,.35) !important;
  border-top:none !important;
  border-right:none !important;
  border-bottom:none !important;
}

/* ══════════════════════════════════════════════════════════
   9. MOBILE responsive fixes
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   10. TRAJECTORY SECTION — dark navy (heading was white-on-beige)
   ══════════════════════════════════════════════════════════ */
.hsn-timeline-sec{
  background:linear-gradient(165deg,#071224 0%,#0c2248 60%,#0b1b3a 100%) !important;
  color:#fff !important;
  border-top:3px solid rgba(201,169,97,.3) !important;
}
.hsn-timeline-sec .hsn-section-label{color:var(--hsn-gold) !important}
.hsn-timeline-sec .hsn-section-title{color:#fff !important}
.hsn-timeline__year{
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:2.4rem !important;
  font-weight:700 !important;
  color:var(--hsn-gold,#C9A961) !important;
  line-height:1 !important;
  margin-bottom:.6rem !important;
  letter-spacing:-.03em !important;
}
.hsn-timeline__title{
  font-size:.8rem !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:rgba(201,169,97,.8) !important;
  margin:0 0 .75rem !important;
}
.hsn-timeline__text{
  font-size:.9rem !important;
  color:rgba(255,255,255,.68) !important;
  line-height:1.7 !important;
  margin:0 !important;
}
.hsn-timeline{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:1.5rem !important;
  margin-top:2.5rem !important;
}
.hsn-timeline__item{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:20px !important;
  padding:2rem !important;
  transition:border-color .25s !important;
}
.hsn-timeline__item:hover{border-color:rgba(201,169,97,.35) !important}
@media(max-width:760px){.hsn-timeline{grid-template-columns:1fr !important}}

/* ══════════════════════════════════════════════════════════
   11. BUSINESSES SECTION — card initial + LP modal
   ══════════════════════════════════════════════════════════ */

/* Business card initial letter decoration */
.hsn-biz-card-initial{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:5.5rem !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.14) !important;
  letter-spacing:-.05em !important;
  user-select:none !important;
  pointer-events:none !important;
  line-height:1 !important;
}
/* Make card media relative for the initial to position correctly */
.hsn-business-card__media{
  position:relative !important;
}

/* ── Landing Page Modal ── */
.hsn-biz-lp[hidden]{display:none !important}
.hsn-biz-lp{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:1rem !important;
}
.hsn-biz-lp__backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(4,15,30,.75) !important;
  backdrop-filter:blur(8px) !important;
}
.hsn-biz-lp__wrap{
  position:relative !important;
  z-index:1 !important;
  width:min(1000px,calc(100vw - 2rem)) !important;
  max-height:calc(100vh - 2rem) !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:300px 1fr !important;
  background:#fff !important;
  border-radius:28px !important;
  box-shadow:0 50px 120px rgba(0,0,0,.38) !important;
}
.hsn-biz-lp__close{
  position:absolute !important;
  top:1rem !important;
  right:1rem !important;
  width:40px !important;
  height:40px !important;
  border:0 !important;
  background:rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  color:#fff !important;
  font-size:1.5rem !important;
  line-height:1 !important;
  cursor:pointer !important;
  z-index:10 !important;
  backdrop-filter:blur(4px) !important;
  transition:background .2s !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.hsn-biz-lp__close:hover{background:rgba(255,255,255,.3) !important}

/* Left visual panel */
.hsn-biz-lp__visual{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  padding:2rem !important;
  background:linear-gradient(135deg,#071224,#0b1b3a) !important;
  overflow:hidden !important;
  min-height:480px !important;
}
.hsn-biz-lp__initial{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:clamp(6rem,14vw,10rem) !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.10) !important;
  letter-spacing:-.05em !important;
  user-select:none !important;
  pointer-events:none !important;
  line-height:1 !important;
}
.hsn-biz-lp__logo-img{
  position:relative !important;
  z-index:2 !important;
  max-height:64px !important;
  max-width:180px !important;
  object-fit:contain !important;
  margin-bottom:auto !important;
  filter:brightness(0) invert(1) !important;
}
.hsn-biz-lp__visual-cat{
  position:relative !important;
  z-index:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  background:rgba(201,169,97,.16) !important;
  border:1px solid rgba(201,169,97,.35) !important;
  color:var(--hsn-gold,#C9A961) !important;
  padding:.35rem .9rem !important;
  border-radius:99px !important;
  font-size:.68rem !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  align-self:flex-start !important;
}

/* Right content panel */
.hsn-biz-lp__content{
  overflow-y:auto !important;
  padding:2.5rem !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1.5rem !important;
}
.hsn-biz-lp__header{display:flex !important;flex-direction:column !important;gap:.55rem !important}
.hsn-biz-lp__cat{
  font-size:.68rem !important;
  font-weight:700 !important;
  letter-spacing:2.5px !important;
  text-transform:uppercase !important;
  color:var(--hsn-gold,#C9A961) !important;
}
.hsn-biz-lp__title{
  font-family:var(--hsn-serif,'Playfair Display',serif) !important;
  font-size:clamp(1.9rem,3.5vw,2.6rem) !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  color:var(--hsn-text,#1a2540) !important;
  margin:0 !important;
}
.hsn-biz-lp__tagline{
  font-size:.97rem !important;
  color:var(--hsn-text-soft,#3d4866) !important;
  line-height:1.65 !important;
  font-style:italic !important;
  margin:0 !important;
  padding-top:.6rem !important;
  border-top:1px solid var(--hsn-border,#ebe5d8) !important;
}
.hsn-biz-lp__desc{
  font-size:.9rem !important;
  color:var(--hsn-text-soft,#3d4866) !important;
  line-height:1.75 !important;
}
.hsn-biz-lp__services{display:flex !important;flex-wrap:wrap !important;gap:.5rem !important}
.hsn-biz-chip{
  display:inline-flex !important;
  align-items:center !important;
  background:rgba(15,91,216,.07) !important;
  border:1px solid rgba(15,91,216,.15) !important;
  color:var(--hsn-secondary,#0F5BD8) !important;
  padding:.38rem .8rem !important;
  border-radius:99px !important;
  font-size:.75rem !important;
  font-weight:700 !important;
}
.hsn-biz-lp__cta{display:flex !important;gap:.75rem !important;flex-wrap:wrap !important;padding-top:.25rem !important}

/* ── Mobile ── */
@media(max-width:700px){
  .hsn-biz-lp__wrap{grid-template-columns:1fr !important}
  .hsn-biz-lp__visual{min-height:180px !important;padding:1.5rem !important}
  .hsn-biz-lp__initial{font-size:5rem !important}
  .hsn-biz-lp__content{padding:1.75rem !important}
  .hsn-biz-lp__title{font-size:1.75rem !important}
}

/* ══════════════════════════════════════════════════════════
   12. MOBILE responsive fixes
   ══════════════════════════════════════════════════════════ */
@media(max-width:880px){
  .hsn-stats{grid-template-columns:repeat(2,1fr) !important}
  .hsn-stat{border-right:none !important;border-bottom:1px solid rgba(201,169,97,.12) !important}
  .hsn-stat:nth-child(odd){border-right:1px solid rgba(201,169,97,.12) !important}
  .hsn-stat:nth-last-child(-n+2){border-bottom:none !important}
  .hsn-locations__grid{grid-template-columns:repeat(2,1fr) !important}
  .hsn-stats-wrap{margin-top:-2rem}
}
@media(max-width:500px){
  .hsn-stats{grid-template-columns:1fr 1fr !important}
  .hsn-stat__num{font-size:2.2rem !important}
  .hsn-locations__grid{grid-template-columns:1fr 1fr !important}
}
