@font-face {
  font-family: 'Contralto Big';
  src: url('../assets/fonts/contralto-big-demi-bold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Lato Hair';
  src: url('../assets/fonts/Lato-Hairline.ttf') format('truetype');
  font-weight: 100;
  font-display: swap;
}

/* ── Design Tokens ── */
:root {
  --bg:       #F6F2EC;
  --bg-sage:  #E4ECEB;
  --bg-linen: #EAE3D7;
  --bg-pearl: #F2F5F3;
  --bg-soft:  #F4F0EA;
  --bg-warm:  #EAE3D7;
  --bg-blue:  #E4ECEB;
  --surface:  #FFFFFF;
  --ink:      #111E6F;
  --ink-soft: #5A4E64;
  --accent:        #D9795A;
  --accent-strong: #C96848;
  --nav-bg:   rgba(246,242,236,.93);
  --border:   rgba(17,30,111,.09);
  --shadow:   rgba(100,60,40,.11);
  --navy-solid: #0B1452;
  --on-navy:  #F4F1E4;
  --fd: 'Contralto Big','Playfair Display',Georgia,serif;
  --fb: 'Lato','Helvetica Neue',sans-serif;
}
:root[data-theme=dark] {
  --bg:       #0A1145;
  --bg-sage:  #091040;
  --bg-linen: #0C1444;
  --bg-pearl: #0B1240;
  --bg-soft:  #0C1444;
  --bg-warm:  #10194F;
  --bg-blue:  #0B1240;
  --surface:  #141D57;
  --ink:      #F3F0E2;
  --ink-soft: rgba(243,240,226,.60);
  --accent:        #FFB68F;
  --accent-strong: #FFA478;
  --nav-bg:   rgba(8,14,58,.90);
  --border:   rgba(255,255,255,.11);
  --shadow:   rgba(0,0,0,.50);
  --navy-solid: #070E36;
  --on-navy:  #F4F1E4;
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);font-family:var(--fb);font-weight:400;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .5s ease,color .5s ease;}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}
button{font-family:var(--fb);}
::selection{background:var(--accent);color:#fff;}

/* ── Animations (keyframes only) ── */
@keyframes floatY    {0%,100%{transform:translateY(0)    }50%{transform:translateY(-22px)}}
@keyframes fadeIn    {from{opacity:0}                      to{opacity:1}}
@keyframes modalPop  {from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes waPulse   {0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ── Scroll-reveal (driven by IntersectionObserver in JS, not animation-timeline) ── */
[data-reveal]{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ══════════════════════════════════════════
   HERO — Video background
══════════════════════════════════════════ */
#hero-section{
  position:relative;
  overflow:visible;
  background:var(--bg);
  isolation:isolate;
}
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.hero-video-wrap video{
  width:100%;height:100%;
  object-fit:cover;
  opacity:.16;
  filter:saturate(.55) brightness(1.08);
}
.hero-video-wrap::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    160deg,
    rgba(246,242,236,.30) 0%,
    rgba(246,242,236,.60) 55%,
    var(--bg) 100%
  );
}
:root[data-theme=dark] .hero-video-wrap video{opacity:.10;}
:root[data-theme=dark] .hero-video-wrap::after{
  background:linear-gradient(160deg,rgba(10,17,69,.35) 0%,rgba(10,17,69,.70) 55%,var(--bg) 100%);
}

/* hero content z-index */
.hero-inner{position:relative;z-index:1;}

/* ── Hero photo — no border, transparent PNG bleeds naturally ── */
.hero-photo-wrap{
  position:relative;
  margin-bottom:-100px;
  padding-bottom:100px;
  /* no overflow:hidden — transparent PNG must not be clipped */
}
.hero-photo-wrap::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:200px;
  background:linear-gradient(to bottom,transparent 0%,var(--bg-sage) 95%);
  pointer-events:none;
  z-index:2;
}

/* ── Section fades ── */
.s-fade{
  height:72px;
  margin:0;
  position:relative;
  z-index:0;
  pointer-events:none;
}

/* ── Navigation ── */
.nav-root{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,56px);
  background:var(--nav-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background .5s ease,border-color .5s ease;
}
.navlink{position:relative;}
.navlink::after{
  content:'';position:absolute;left:0;bottom:-5px;
  width:0;height:1px;background:var(--accent);
  transition:width .3s ease;
}
.navlink:hover::after{width:100%;}
.logo-dark {display:inline;}
.logo-light{display:none;}
:root[data-theme=dark] .logo-dark {display:none;}
:root[data-theme=dark] .logo-light{display:inline;}

/* theme toggle */
.th-toggle{
  position:relative;width:62px;height:30px;border-radius:9999px;
  border:1px solid var(--border);background:var(--bg-sage);
  cursor:pointer;flex:none;transition:background .4s ease;overflow:hidden;
  padding:0;
}
.th-toggle .knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;
  transition:transform .45s cubic-bezier(.68,-.4,.27,1.4),background .4s ease;
}
:root[data-theme=dark] .th-toggle{background:#1b2566;}
:root[data-theme=dark] .th-toggle .knob{transform:translateX(32px);background:#0B1452;}
.th-toggle .ic-sun {opacity:1;transition:opacity .3s;}
.th-toggle .ic-moon{position:absolute;opacity:0;transition:opacity .3s;}
:root[data-theme=dark] .th-toggle .ic-sun {opacity:0;}
:root[data-theme=dark] .th-toggle .ic-moon{opacity:1;}

/* ── Mobile menu ── */
#mobile-menu{
  display:none;              /* hidden by default — JS adds .open */
  position:fixed;inset:0;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-direction:column;
  padding:90px clamp(24px,7vw,48px) 40px;
  animation:fadeIn .28s ease;
  overflow-y:auto;
}
#mobile-menu.open{display:flex;}

/* ── Buttons ── */
.btn{
  font-weight:700!important;
  cursor:pointer;
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-accent{
  background:#D9795A;
  color:#fff;
  border:none;
}
.btn-accent:hover{background:#C96848;}
.btn-navy{
  background:#0B1452;
  color:#fff;
  border:none;
}

/* ── Theme toggle labels ── */
.th-lbl{
  color:var(--ink-soft);
  transition:color .3s,font-weight .3s;
  font-family:var(--fb);
  pointer-events:none;
}
.th-lbl-day {font-weight:700;color:var(--ink);}
.th-lbl-night{font-weight:400;}
:root[data-theme=dark] .th-lbl-day {font-weight:400;color:var(--ink-soft);}
:root[data-theme=dark] .th-lbl-night{font-weight:700;color:var(--ink);}

/* ── Specialty accordion ── */
.spec-bar{transition:box-shadow .4s ease;}
.spec-bar:hover{box-shadow:0 14px 40px var(--shadow);}
.spec-desc{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease,margin .4s ease;
  margin-top:0;
}
.spec-desc span[style]{text-align:justify;}
.spec-bar.open .spec-desc{max-height:400px;opacity:1;margin-top:16px;}
.spec-bar.open .spec-arrow{transform:rotate(90deg);background:#111E6F;color:#fff;}
.spec-arrow{transition:transform .4s ease,background .3s ease,color .3s ease;}
/* Desktop: hover to open, mouseout to close (precise pointer only) */
@media(hover:hover) and (pointer:fine){
  .spec-bar:hover .spec-desc{max-height:400px;opacity:1;margin-top:16px;}
  .spec-bar:hover .spec-arrow{transform:rotate(90deg);background:#111E6F;color:#fff;}
}

/* ── Cards ── */
.diff-card{transition:transform .35s ease,box-shadow .35s ease;}
.diff-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px var(--shadow);}

/* ── Reviews carousel ── */
#reviews-track{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;padding:8px 4px 20px;}
#reviews-track::-webkit-scrollbar{display:none;}
.review-card{flex:0 0 calc(33.333% - 16px);scroll-snap-align:start;background:var(--surface);border-radius:18px;padding:clamp(22px,2.4vw,32px);box-shadow:0 6px 24px var(--shadow);border:1px solid var(--border);transition:transform .3s ease,box-shadow .3s ease;}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px var(--shadow);}
.reviews-arrow{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);color:var(--ink);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px var(--shadow);transition:transform .2s ease,box-shadow .2s ease;position:absolute;top:50%;transform:translateY(-50%);z-index:2;}
.reviews-arrow:hover{box-shadow:0 8px 24px var(--shadow);}
.reviews-arrow-l{left:-22px;}
.reviews-arrow-r{right:-22px;}
@media(max-width:980px){
  .review-card{flex:0 0 min(80vw,340px);}
  .reviews-arrow{display:none;}
}

/* ── Floating WhatsApp ── */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:140;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;box-shadow:0 8px 28px rgba(0,0,0,.22);
  cursor:pointer;border:none;
  animation:waPulse 2.6s infinite;
  transition:transform .3s ease;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float .lbl{
  position:absolute;right:72px;white-space:nowrap;
  background:var(--surface);color:var(--ink);
  font-weight:700;font-size:12px;letter-spacing:.04em;
  padding:9px 15px;border-radius:9999px;
  box-shadow:0 6px 20px var(--shadow);
  opacity:0;transform:translateX(8px);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;
}
.wa-float:hover .lbl{opacity:1;transform:translateX(0);}

/* ── Modals ── */
.modal-overlay{
  display:none;
  position:fixed;inset:0;z-index:120;
  background:rgba(7,14,54,.60);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  padding:24px;
}
.modal-overlay.open{display:flex;animation:fadeIn .3s ease;}
.modal-box{
  position:relative;background:var(--surface);
  border-radius:22px;width:100%;max-width:560px;
  padding:clamp(28px,5vw,52px);
  box-shadow:0 40px 100px rgba(0,0,0,.32);
  animation:modalPop .4s cubic-bezier(.2,.9,.25,1.2);
  max-height:88vh;overflow-y:auto;
}
#lead-popup-overlay{
  display:none;
  position:fixed;inset:0;z-index:130;
  background:rgba(7,14,54,.58);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  padding:24px;
}
#lead-popup-overlay.open{display:flex;animation:fadeIn .35s ease;}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media(max-width:980px){
  [data-desk-nav]{display:none!important;}
  [data-burger]{display:flex!important;}
  [data-hero-grid]{grid-template-columns:1fr!important;gap:0!important;}
  [data-hero-photo]{order:-1;max-width:320px!important;margin:0 auto!important;}
  [data-about-grid]{grid-template-columns:1fr!important;}
  [data-spec-grid]{grid-template-columns:1fr!important;}
  [data-contact-grid]{grid-template-columns:1fr!important;}
  [data-diff-grid]{grid-template-columns:1fr 1fr!important;}
  [data-trust]{flex-direction:column!important;gap:12px!important;align-items:flex-start!important;}
  .spec-inner{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;}
  .hero-photo-wrap{margin-bottom:0;padding-bottom:0;}
  .hero-photo-wrap::after{display:none;}
  .s-fade{height:48px;}
  /* ensure mobile menu overlays nav on mobile */
  #mobile-menu{z-index:100;}
}
@media(max-width:640px){
  [data-diff-grid]{grid-template-columns:1fr!important;}
  [data-foot]{flex-direction:column!important;gap:20px!important;text-align:center!important;}
  .spec-bar.open .spec-desc{max-height:560px!important;}
  /* hero badge hidden on very small screens */
  .hero-badge{display:none!important;}
  /* stack hero buttons */
  .hero-ctas{flex-direction:column!important;align-items:flex-start!important;}
  .hero-ctas a,.hero-ctas button{width:100%!important;justify-content:center!important;}
  /* enforce minimum page margins */
  section,#hero-section{padding-left:24px!important;padding-right:24px!important;}
}
@media(max-width:400px){
  .wa-float .lbl{display:none;}
  .th-lbl{display:none!important;}
}