/* ============================================================
   L.A. WINDOW CLEANERS & SOLUTIONS — Premium Design System v2
   ONE accent (teal). ONE heading system. Consistent everywhere.
   ============================================================ */

:root {
  /* Brand — single, consistent palette */
  --navy:        #0E2A47;   /* primary text + dark sections */
  --navy-2:      #143656;   /* lighter navy panels */
  --navy-deep:   #081a2e;   /* footer */
  --teal:        #1690CE;   /* THE accent — clean azure blue (not green, not neon) */
  --teal-2:      #11719E;   /* accent hover/darker */
  --teal-soft:   rgba(22,144,206,.12);
  --whatsapp:    #25D366;
  --whatsapp-2:  #1faa52;

  --ink:    #0A1B2E;   /* near-black navy — titles */
  --body:   #2f3e4d;   /* dark, readable body */
  --muted:  #475a6c;   /* secondary text — darkened for readability */
  --line:   #e7edf3;
  --bg:     #ffffff;
  --bg-alt: #f4f8fb;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 30px;
  --shadow-sm: 0 2px 8px rgba(14,42,71,.06);
  --shadow:    0 14px 40px rgba(14,42,71,.09);
  --shadow-lg: 0 30px 70px rgba(14,42,71,.16);
  --maxw: 1180px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); color:var(--body); background:var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip; }

/* ---------- Typography (consistent scale) ---------- */
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); line-height:1.05; font-weight:800; letter-spacing:-.035em; }
h1 { font-size:clamp(2.2rem,4.8vw,3.6rem); }
h2 { font-size:clamp(1.75rem,3.3vw,2.55rem); }
h3 { font-size:1.18rem; font-weight:700; letter-spacing:-.02em; }
p  { margin:0 0 1rem; }
a  { color:var(--teal-2); text-decoration:none; }
img,svg { display:block; max-width:100%; }
.i { width:1.15em; height:1.15em; flex-shrink:0; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:clamp(24px,2.6vw,38px) 0; }
.section--alt  { background:var(--bg-alt); }
.section--tight { padding-top:clamp(26px,3vw,44px); padding-bottom:clamp(26px,3vw,44px); }
.section--navy { background:linear-gradient(180deg,var(--navy),#0c2440); color:#c2d6e8; }
.section--navy h2,.section--navy h3 { color:#fff; }
.center { text-align:center; }

/* ---------- ONE heading system (eyebrow + h2 + underline) ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-2);
  background:var(--teal-soft); padding:6px 14px; border-radius:999px; margin-bottom:5px;
}
.eyebrow::before {
  content:""; width:13px; height:13px; flex-shrink:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.4l2.3 6.8 6.9 2.3-6.9 2.3L12 20.6l-2.3-6.8L2.8 11.5l6.9-2.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.4l2.3 6.8 6.9 2.3-6.9 2.3L12 20.6l-2.3-6.8L2.8 11.5l6.9-2.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--navy .eyebrow { color:#7fe3f2; background:rgba(22,144,206,.16); }
.sec-head { max-width:660px; margin:0 auto clamp(22px,3vw,34px); text-align:center; }
.sec-head h2 { position:relative; padding-bottom:13px; }
.sec-head h2::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:58px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--teal),#1aa0e0); }
.sec-head p { color:var(--muted); font-size:1.02rem; margin:18px auto 0; }
/* Left-aligned title accent — use on split/section titles so ALL titles match */
.t-accent { position:relative; padding-bottom:13px; margin-bottom:16px; }
.t-accent::after { content:""; position:absolute; left:0; bottom:0; width:58px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--teal),#1aa0e0); }
.section--navy .sec-head p { color:#a9c2d8; }

/* ---------- Buttons (consistent) ---------- */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  padding:14px 26px; border-radius:var(--r-sm); cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s; white-space:nowrap;
}
.btn::before { content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-20deg); transition:left .6s var(--ease); pointer-events:none; }
.btn:hover::before { left:150%; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn .i { width:1.05em; height:1.05em; position:relative; }
.btn--teal  { background:linear-gradient(135deg,#1aa0e0,var(--teal-2)); color:#fff; box-shadow:0 10px 26px rgba(22,144,206,.36); }
.btn--teal:hover { box-shadow:0 16px 34px rgba(22,144,206,.48); }
.btn--wa    { background:linear-gradient(135deg,#2bdc70,var(--whatsapp-2)); color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.34); }
.btn--wa:hover { box-shadow:0 16px 34px rgba(37,211,102,.46); }
.btn--amber  { background:linear-gradient(135deg,#fbbf24,#d97706); color:#fff; box-shadow:0 10px 26px rgba(217,119,6,.34); }
.btn--amber:hover { box-shadow:0 16px 34px rgba(217,119,6,.46); }
.btn--violet { background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; box-shadow:0 10px 26px rgba(124,58,237,.34); }
.btn--violet:hover { box-shadow:0 16px 34px rgba(124,58,237,.46); }
.btn--navy  { background:linear-gradient(135deg,#1a3a5e,var(--navy)); color:#fff; box-shadow:0 10px 24px rgba(10,27,46,.3); }
.btn--navy:hover { box-shadow:0 16px 32px rgba(10,27,46,.42); }
.btn--ghost { background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.btn--outline { background:#fff; border-color:var(--line); color:var(--ink); }
.btn--outline:hover { border-color:var(--teal); color:var(--teal-2); box-shadow:0 8px 20px rgba(22,144,206,.16); }
.btn--lg { padding:17px 32px; font-size:1.05rem; border-radius:12px; }
.btn--block { width:100%; }

/* ---------- Header / Nav (sticky, premium) ---------- */
#site-header { display:contents; }
.site-header { position:sticky; top:0; z-index:60; background:var(--navy-deep); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); transition:height .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.scrolled { box-shadow:0 8px 30px rgba(0,0,0,.35); border-bottom-color:rgba(22,144,206,.4); }
.nav { display:flex; align-items:center; justify-content:space-between; height:114px; transition:height .3s var(--ease); }
.site-header.scrolled .nav { height:88px; }
.nav .logo { display:flex; align-items:center; }
.nav .logo img { height:104px; width:auto; display:block; transition:height .3s var(--ease); }
.site-header.scrolled .logo img { height:74px; }
.nav .logo .mark { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--teal),var(--teal-2)); display:grid; place-items:center; color:#fff; box-shadow:0 6px 16px rgba(22,144,206,.4); }
.nav .logo .mark .i { width:22px; height:22px; }
.nav .logo small { display:block; font-size:.62rem; font-weight:600; letter-spacing:.18em; color:var(--teal); text-transform:uppercase; }
.nav ul { list-style:none; display:flex; gap:26px; }
.nav ul a { color:#cbdcec; font-weight:600; font-size:.92rem; transition:color .15s; }
.nav ul a:hover { color:#fff; }
.nav .actions { display:flex; gap:10px; align-items:center; }
.nav .actions .btn { padding:10px 16px; font-size:.86rem; }
.nav .burger { display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px; }

/* Services dropdown */
.nav .has-dd { position:relative; }
.nav .has-dd > a { display:inline-flex; align-items:center; gap:4px; }
.nav .caret { width:14px; height:14px; transition:transform .2s var(--ease); }
.nav .has-dd:hover .caret { transform:rotate(180deg); }
.nav .dd { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:262px; background:var(--navy-deep); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px; box-shadow:0 24px 50px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:1px; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:61; }
.nav .has-dd:hover .dd { opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px); }
.nav .dd a { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:10px; color:#cbdcec; font-size:.88rem; font-weight:600; white-space:nowrap; }
.nav .dd a:hover { background:rgba(22,144,206,.16); color:#fff; }
.nav .dd a .i { width:19px; height:19px; color:#7fd3f2; }
.nav .dd a.dd-overview { color:#7fd3f2; border-radius:8px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:5px; padding-bottom:12px; }
.nav .burger .i { width:26px; height:26px; }

/* ---------- Hero (premium gradient + glow) ---------- */
.hero { position:relative; background:var(--navy-deep); color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:#143656 center/cover no-repeat; z-index:0; opacity:.42; }
.hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(1000px 560px at 78% -5%, rgba(22,144,206,.13), transparent 62%),
             linear-gradient(115deg, rgba(8,26,46,.97) 0%, rgba(14,42,71,.86) 55%, rgba(14,42,71,.6) 100%); }
.hero__inner { position:relative; z-index:2; padding:clamp(72px,11vw,128px) 0 clamp(48px,7vw,76px); }
.hero h1 { color:#fff; max-width:800px; }
.hero .sub { color:#bcd3e8; font-size:1.18rem; max-width:600px; margin:18px 0 30px; }
.hero .cta-row { display:flex; gap:13px; flex-wrap:wrap; margin-bottom:40px; }

/* ---------- Hero two-column (custom, less templatey) ---------- */
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero__visual { position:relative; }
.hero__photo { aspect-ratio:4/5; border-radius:var(--r-xl); background:linear-gradient(135deg,#1b466b,#0a1f36); box-shadow:0 40px 80px rgba(0,0,0,.45); display:grid; place-items:center; color:#6a87a5; text-align:center; padding:24px; border:1px solid rgba(255,255,255,.08); }
.hero__badge { position:absolute; background:#fff; border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:11px; }
.hero__badge.b-rating { bottom:24px; left:-26px; }
.hero__badge.b-insured { top:30px; right:-20px; }
.hero__badge .hb-ico { width:40px; height:40px; border-radius:11px; background:var(--teal-soft); color:var(--teal-2); display:grid; place-items:center; }
.hero__badge .hb-ico .i { width:22px; height:22px; }
.hero__badge b { font-family:var(--font-display); color:var(--ink); font-size:.95rem; display:block; line-height:1.1; }
.hero__badge span { font-size:.74rem; color:var(--muted); }
.hero__badge.b-rating .stars { color:#fbbf24; display:flex; gap:1px; }
.hero__badge.b-rating .stars .i { width:13px; height:13px; }

/* ---------- Trust stats strip (glass) ---------- */
.stats { display:flex; flex-wrap:wrap; gap:14px; }
.stat { flex:1; min-width:150px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:20px 22px; text-align:center; backdrop-filter:blur(8px); }
.stat b { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:#fff; display:block; line-height:1; letter-spacing:-.02em; }
.stat span { font-size:.74rem; color:#9fbad2; text-transform:uppercase; letter-spacing:.09em; }

/* ---------- Social-proof moving marquee (navy ticker band under hero) ---------- */
.marquee { position:relative; overflow:hidden; background:var(--navy-deep); border-top:3px solid var(--teal); border-bottom:1px solid rgba(255,255,255,.08); }
.marquee::before, .marquee::after { content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.marquee::before { left:0; background:linear-gradient(90deg,var(--navy-deep),transparent); }
.marquee::after { right:0; background:linear-gradient(270deg,var(--navy-deep),transparent); }
.marquee__track { display:flex; align-items:center; width:max-content; animation:marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.m-item { display:inline-flex; align-items:center; gap:12px; padding:22px 0; font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:#e2eefb; white-space:nowrap; letter-spacing:-.01em; }
.m-item .i { width:27px; height:27px; color:#7fd3f2; }
.m-item b { font-weight:800; color:#fff; }
.m-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); margin:0 40px; flex-shrink:0; }
@media (max-width:600px){ .m-item { font-size:1.04rem; padding:18px 0; } .m-dot { margin:0 26px; } .marquee::before,.marquee::after { width:46px; } }

/* ---------- Sticky mobile call/WhatsApp bar ---------- */
.mobile-cta { display:none; }
@media (max-width:700px){
  .mobile-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:78; box-shadow:0 -6px 20px rgba(0,0,0,.22); }
  .mobile-cta a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; font-family:var(--font-display); font-weight:700; font-size:.96rem; color:#fff; }
  .mobile-cta a .i { width:20px; height:20px; }
  .mobile-cta .mc-call { background:linear-gradient(135deg,#1aa0e0,var(--teal-2)); }
  .mobile-cta .mc-wa { background:linear-gradient(135deg,#2bdc70,var(--whatsapp-2)); }
  .wa-widget { display:none; }
  body { padding-bottom:56px; }
}

/* ---------- Cards / grids ---------- */
.grid { display:grid; gap:22px; }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(22,144,206,.3); }
.card .ico { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--teal-soft); color:var(--teal-2); margin-bottom:18px; }
.card .ico .i { width:26px; height:26px; }
.card h3 { margin-bottom:9px; }
.card p { font-size:.93rem; color:var(--muted); margin-bottom:14px; }
.card .more { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-family:var(--font-display); font-size:.9rem; color:var(--teal-2); }
.card .more .i { width:1em; height:1em; transition:transform .2s; }
.card .more:hover .i { transform:translateX(4px); }

/* ---------- Service cards with image ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.svc { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; text-align:left; }
.svc:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(22,144,206,.3); }
.svc__img { aspect-ratio:16/11; background:linear-gradient(135deg,#1b466b,#0a1f36); display:grid; place-items:start center; color:#a9c2db; font-size:.76rem; font-weight:600; text-align:center; position:relative; padding:14px; overflow:hidden; }
.svc__img span { display:inline-flex; align-items:center; gap:7px; }
.svc__img span .i { width:18px; height:18px; opacity:.85; }
.svc__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc__ico { position:absolute; bottom:-27px; left:20px; width:56px; height:56px; border-radius:15px; background:linear-gradient(135deg,var(--teal),var(--teal-2)); box-shadow:0 10px 24px rgba(22,144,206,.34); display:grid; place-items:center; color:#fff; border:0; z-index:2; }
.svc__ico .i { width:30px; height:30px; }
.svc__body { padding:22px; display:flex; flex-direction:column; flex:1; }
.svc__body h3 { margin-bottom:7px; }
.svc__body p { font-size:.9rem; color:var(--muted); margin-bottom:11px; }
.svc__feats { list-style:none; margin:0 0 18px; padding:0; }
.svc__feats li { position:relative; padding:3px 0 3px 23px; font-size:.83rem; color:var(--body); line-height:1.4; }
.svc__feats li::before { content:""; position:absolute; left:0; top:7px; width:15px; height:15px; border-radius:50%; background:var(--teal-soft); }
.svc__feats li::after { content:""; position:absolute; left:4px; top:10px; width:8px; height:8px; background:var(--teal); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9 16.2-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9 16.2-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.svc__foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.svc__price { font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--ink); }
.svc__price small { display:block; font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.svc__foot .btn { padding:10px 16px; font-size:.84rem; }
.svc:hover .svc__foot .btn { border-color:var(--teal); color:var(--teal-2); }

/* ---------- Areas + map layout ---------- */
.areas-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:stretch; }
.areas-map { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12); min-height:420px; }
.areas-map iframe { width:100%; height:100%; min-height:420px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }
.areas-panel { display:flex; flex-direction:column; justify-content:center; }
.areas-panel h3 { color:#fff; margin-bottom:14px; }
.areas-panel .chips { justify-content:flex-start; }
.areas-sub-label { margin:24px 0 12px; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#7fd3f2; }

/* ---------- Pricing ---------- */
.price-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.price-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 22px 28px; text-align:center; box-shadow:var(--shadow-sm); position:relative; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(22,144,206,.32); }
.price-card.featured { border:1.5px solid var(--teal); box-shadow:0 28px 54px rgba(22,144,206,.22); transform:translateY(-10px); }
.price-card.featured:hover { transform:translateY(-14px); }
.price-assure { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; margin-top:30px; }
.price-assure span { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--ink); }
.price-assure .i { width:19px; height:19px; color:var(--teal-2); }
@media (max-width:980px){ .price-card.featured { transform:none; } }
.price-card .tag { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:linear-gradient(135deg,#1aa0e0,var(--teal-2)); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.02em; padding:5px 15px; border-radius:999px; box-shadow:0 6px 16px rgba(22,144,206,.4); }
.price-card .size { font-family:var(--font-display); font-weight:700; color:var(--muted); font-size:.92rem; }
.price-card .amt { font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--ink); margin:8px 0 0; letter-spacing:-.03em; line-height:1; }
.price-card .per { font-size:.8rem; color:var(--muted); margin-bottom:20px; }
.price-card ul { list-style:none; text-align:left; font-size:.86rem; color:var(--body); margin:0 0 22px; padding-top:18px; border-top:1px solid var(--line); }
.price-card li { padding:6px 0 6px 26px; position:relative; }
.price-card li::before { content:""; position:absolute; left:0; top:9px; width:17px; height:17px; border-radius:50%; background:var(--teal-soft); }
.price-card li::after { content:""; position:absolute; left:4px; top:13px; width:9px; height:9px; background:var(--teal); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9 16.2-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Packages showpiece ---------- */
.pkgs { display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:24px; align-items:stretch; max-width:1080px; margin:0 auto; }
.pkg { background:#fff; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.pkg:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pkg__ribbon { padding:11px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.pkg--core .pkg__ribbon { background:linear-gradient(135deg,#f59e0b,#d97706); }
.pkg--gold .pkg__ribbon { background:linear-gradient(135deg,var(--teal),var(--teal-2)); }
.pkg--platinum .pkg__ribbon { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.pkg__body { padding:32px 28px; flex:1; display:flex; flex-direction:column; }
.pkg__name { font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; }
.pkg__sub { color:var(--muted); font-size:.9rem; margin-bottom:18px; }
.pkg__price { display:flex; align-items:flex-end; gap:7px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.pkg__price .from { font-size:.78rem; color:var(--muted); padding-bottom:9px; }
.pkg__price .amt { font-family:var(--font-display); font-weight:800; font-size:3rem; color:var(--ink); line-height:1; letter-spacing:-.03em; }
.pkg__price .unit { font-size:.82rem; color:var(--muted); padding-bottom:9px; }
.pkg__list { list-style:none; flex:1; margin-bottom:22px; }
.pkg__list li { padding:8px 0 8px 30px; position:relative; font-size:.92rem; color:var(--body); }
.pkg__list li::before { content:""; position:absolute; left:0; top:9px; width:19px; height:19px; border-radius:50%; background:var(--teal-soft); -webkit-mask:none; }
.pkg__list li::after { content:""; position:absolute; left:5px; top:13px; width:9px; height:9px; background:var(--teal); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9 16.2-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.pkg__cta { display:flex; gap:8px; flex-direction:column; }
.pkg--gold { transform:scale(1.04); border:2px solid var(--teal); box-shadow:0 30px 70px rgba(22,144,206,.22); z-index:2; }
.pkg--gold:hover { transform:scale(1.04) translateY(-8px); }
.pkg__popular { position:absolute; top:50px; right:-1px; background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:8px 0 0 8px; }
.pkg__save { display:inline-block; background:var(--teal-soft); color:var(--teal-2); font-weight:700; font-size:.76rem; padding:4px 10px; border-radius:999px; margin-bottom:16px; font-family:var(--font-display); }
@media (max-width:980px){ .pkgs { grid-template-columns:1fr; max-width:440px; } .pkg--gold { transform:none; } .pkg--gold:hover { transform:translateY(-8px); } }

/* ---------- Package detail pages (themed via --pkg) ---------- */
.pkg-tag { display:inline-flex; align-items:center; gap:8px; background:var(--pkg,var(--teal)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:8px 17px; border-radius:999px; margin-bottom:16px; box-shadow:0 10px 26px color-mix(in srgb, var(--pkg,var(--teal)) 45%, transparent); }
.pkg-tag::before { display:none; }
.hero--pkg .hero__bg { background:radial-gradient(1000px 560px at 80% -10%, var(--pkg,var(--teal)), transparent 62%); opacity:.34; }
.pkg-price-head { font-family:var(--font-display); font-weight:800; color:#fff; }
.pkg-price-head .from { font-size:1rem; color:#bcd3e8; font-weight:600; }
.pkg-price-head b { font-size:2.6rem; letter-spacing:-.03em; }
.incl { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:920px; margin:0 auto; list-style:none; }
.incl li { display:flex; gap:15px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 22px; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; font-size:1rem; color:var(--ink); font-weight:500; }
.incl li:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--pkg,var(--teal)) 45%, transparent); }
.incl li .ic { width:44px; height:44px; border-radius:13px; background:var(--pkg,var(--teal)); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 20px color-mix(in srgb,var(--pkg,var(--teal)) 42%, transparent); }
.incl li .ic .i { width:21px; height:21px; }
.incl li.incl-prev { grid-column:1 / -1; justify-content:center; gap:13px; background:linear-gradient(135deg, color-mix(in srgb,var(--pkg,var(--teal)) 12%, #fff), #fff); border:1.5px solid var(--pkg,var(--teal)); font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--ink); }
@media (max-width:680px){ .incl { grid-template-columns:1fr; } }
.price-card.pkg-feat { border-color:var(--pkg,var(--teal)); }
.price-card.pkg-feat .tag { background:var(--pkg,var(--teal)); }
.price-card .amt.pkg-amt { color:var(--ink); }
.upgrade-band { background:linear-gradient(135deg, var(--pkg,var(--teal)), color-mix(in srgb, var(--pkg,var(--teal)) 70%, #000)); border-radius:var(--r-xl); padding:clamp(28px,4vw,46px); text-align:center; color:#fff; }
.upgrade-band h2 { color:#fff; }

/* ---------- Package showcase (alternating image + detail) ---------- */
.showcase { display:flex; flex-direction:column; gap:20px; max-width:940px; margin:0 auto; }
.showcase__row { display:flex; gap:30px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.showcase__row:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.showcase__row:nth-child(even) { flex-direction:row-reverse; }
.showcase__img { flex:0 0 300px; aspect-ratio:4/3; border-radius:12px; background:linear-gradient(135deg,#1b466b,#0a1f36); display:grid; place-items:center; color:#a9c2db; font-size:.78rem; font-weight:600; text-align:center; padding:12px; overflow:hidden; }
.showcase__img img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.showcase__txt { flex:1; }
.showcase__num { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--pkg,var(--teal)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.85rem; margin-bottom:10px; }
.showcase__txt h3 { margin-bottom:6px; }
.showcase__txt p { color:var(--body); font-size:.94rem; margin:0; }
@media (max-width:680px){ .showcase__row, .showcase__row:nth-child(even) { flex-direction:column; } .showcase__img { flex:0 0 auto; width:100%; } }

/* package selector */
.pkg-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:760px; margin:0 auto 26px; }
.pkg-switch a { display:block; text-align:center; padding:22px 16px; border-radius:var(--r); background:#fff; border:1.5px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.pkg-switch a:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(22,144,206,.4); }
.pkg-switch a.active { border-color:var(--pkg,var(--teal)); box-shadow:0 14px 30px color-mix(in srgb,var(--pkg,var(--teal)) 18%, transparent); }
.pkg-switch b { font-family:var(--font-display); font-size:1.15rem; color:var(--ink); display:block; }
.pkg-switch span { font-size:.82rem; color:var(--muted); display:block; margin:2px 0 8px; }
.pkg-switch .ps-price { font-family:var(--font-display); font-weight:800; color:var(--pkg,var(--teal)); }
@media (max-width:600px){ .pkg-switch { grid-template-columns:1fr; } }

/* ---------- Package comparison table ---------- */
.cmp-wrap { overflow-x:auto; max-width:940px; margin:0 auto; }
.cmp { width:100%; min-width:620px; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.cmp th, .cmp td { padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); }
.cmp tbody tr:last-child td { border-bottom:0; }
.cmp thead th { background:var(--bg-alt); vertical-align:bottom; }
.cmp tbody td:first-child, .cmp thead th:first-child { text-align:left; font-weight:600; color:var(--ink); }
.cmp .pname { font-family:var(--font-display); font-weight:800; font-size:1.18rem; color:var(--ink); display:block; }
.cmp .pprice { font-size:.82rem; color:var(--muted); }
.cmp .pdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-bottom:7px; }
.cmp .col-gold { background:rgba(22,144,206,.06); border-left:2px solid var(--teal); border-right:2px solid var(--teal); position:relative; }
.cmp thead .col-gold { background:rgba(22,144,206,.12); }
.cmp .best { display:inline-block; background:var(--teal); color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:8px; }
.cmp .yes { color:var(--teal-2); }
.cmp .yes .i { width:22px; height:22px; }
.cmp .no { color:#cbd5e0; font-size:1.2rem; font-weight:600; }
.cmp tfoot td { padding:20px 16px; }
.cmp .row-foot a { width:100%; }
/* colour-capped headers + themed checks per column */
.cmp thead th:nth-child(2) { border-top:4px solid #f59e0b; }
.cmp thead th:nth-child(3) { border-top:4px solid var(--teal); }
.cmp thead th:nth-child(4) { border-top:4px solid #8b5cf6; }
.cmp td:nth-child(2).yes { color:#d97706; }
.cmp td:nth-child(4).yes { color:#7c3aed; }
.cmp .pname { font-size:1.32rem; }
.cmp .pdot { width:11px; height:11px; }
.cmp tbody tr:nth-child(even) td:not(.col-gold) { background:#fafbfd; }
.cmp .col-gold { box-shadow:0 0 0 1px rgba(22,144,206,.15) inset; }
.cmp thead .col-gold { box-shadow:none; }

/* package value points */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value-grid .vp { text-align:center; padding:8px; }
.value-grid .vp .ic { width:58px; height:58px; margin:0 auto 14px; border-radius:16px; background:var(--teal-soft); color:var(--teal-2); display:grid; place-items:center; }
.value-grid .vp .ic .i { width:28px; height:28px; }
@media (max-width:760px){ .value-grid { grid-template-columns:1fr; } }

/* ---------- Legal / prose ---------- */
.prose { max-width:780px; margin:0 auto; }
.prose h2 { font-size:1.3rem; margin:30px 0 10px; }
.prose h3 { font-size:1.05rem; margin:20px 0 8px; }
.prose p, .prose li { color:var(--body); font-size:.98rem; line-height:1.8; }
.prose ul { padding-left:22px; margin:0 0 16px; }
.prose li { margin-bottom:6px; }
.prose a { color:var(--teal-2); }
.prose .upd { color:var(--muted); font-size:.88rem; margin-bottom:24px; }

/* ---------- Trust badges ---------- */
.badges { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.badge { text-align:center; padding:30px 18px; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); transition:transform .25s var(--ease), background .25s; }
.badge:hover { transform:translateY(-4px); background:rgba(255,255,255,.08); }
.badge .bico { width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:rgba(22,144,206,.16); color:var(--teal); }
.badge .bico .i { width:26px; height:26px; }
.badge b { color:#fff; font-family:var(--font-display); display:block; font-size:1rem; margin-bottom:4px; }
.badge span { font-size:.82rem; color:#9fbad2; }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:6px; }
.step { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 24px 26px; box-shadow:var(--shadow-sm); text-align:center; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; display:flex; flex-direction:column; align-items:center; }
.step:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(22,144,206,.3); }
.step__ico { width:62px; height:62px; margin:0 auto 16px; border-radius:18px; background:var(--teal-soft); color:var(--teal-2); display:grid; place-items:center; }
.step__ico .i { width:30px; height:30px; }
.step h3 { margin-bottom:8px; }
.step p { font-size:.9rem; color:var(--muted); margin-bottom:18px; }
.step__num { margin-top:auto; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#1aa0e0,var(--teal-2)); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.92rem; box-shadow:0 6px 14px rgba(22,144,206,.4); }

/* ---------- FAQ ---------- */
.faq { max-width:780px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
.faq summary { cursor:pointer; font-family:var(--font-display); font-weight:700; color:var(--ink); padding:20px 24px; list-style:none; position:relative; padding-right:54px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); color:var(--teal); font-size:1.4rem; font-weight:400; }
.faq details[open] summary::after { content:"–"; }
.faq .ans { padding:0 24px 22px; color:#33485e; font-size:.96rem; }

/* ---------- Area chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.chip { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#cfe0ee; padding:11px 20px; border-radius:999px; font-weight:600; font-size:.9rem; transition:background .2s, transform .2s, color .2s; }
.chip:hover { background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-2px); }
.chip .i { width:1em; height:1em; color:var(--teal); }
.chip:hover .i { color:#fff; }

/* ---------- Feature split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.split .ph { aspect-ratio:4/3; border-radius:var(--r-lg); background:linear-gradient(135deg,#143656,#081a2e); display:grid; place-items:center; color:#6a87a5; font-size:.85rem; text-align:center; box-shadow:var(--shadow-lg); padding:20px; }
/* When a real photo is dropped in (.ph--img) it fills the slot — no placeholder chrome */
.split .ph--img { padding:0; overflow:hidden; color:transparent; }
.split .ph--img img { width:100%; height:100%; object-fit:cover; display:block; }
.split .ph--img:hover img { transform:scale(1.04); }
.flist { list-style:none; }
.flist li { padding:9px 0 9px 32px; position:relative; }
.flist li::before { content:""; position:absolute; left:0; top:13px; width:20px; height:20px; border-radius:50%; background:var(--teal); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m9 16.2-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/14px no-repeat; background-repeat:no-repeat; }
.imgph { background:linear-gradient(135deg,#143656,#081a2e); color:#6a87a5; display:grid; place-items:center; font-size:.82rem; text-align:center; border-radius:var(--r); aspect-ratio:4/3; padding:16px; overflow:hidden; }
.imgph img { width:100%; height:100%; object-fit:cover; display:block; }
.imgph:hover img { transform:scale(1.04); }

/* ---------- Premium contact form ---------- */
.contact-split { display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:stretch; }
.contact-info { background:linear-gradient(160deg,var(--navy),#0c2440); color:#c2d6e8; border-radius:var(--r-lg); padding:34px 32px; }
.contact-info h3 { color:#fff; margin-bottom:6px; }
.contact-info .ci-row { display:flex; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.contact-info .ci-row:last-child { border-bottom:0; }
.contact-info .ci-ico { width:44px; height:44px; border-radius:12px; background:rgba(22,144,206,.16); color:var(--teal); display:grid; place-items:center; flex-shrink:0; }
.contact-info .ci-ico .i { width:20px; height:20px; }
.contact-info .ci-row b { color:#fff; display:block; font-family:var(--font-display); font-size:.95rem; }
.contact-info .ci-row span { font-size:.88rem; color:#9fbad2; }
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow); }
.form-head { display:flex; align-items:center; gap:13px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.form-head .fh-ico { width:46px; height:46px; border-radius:12px; background:var(--teal-soft); color:var(--teal-2); display:grid; place-items:center; flex-shrink:0; }
.form-head .fh-ico .i { width:24px; height:24px; }
.form-head h3 { font-size:1.2rem; margin-bottom:2px; }
.form-head p { font-size:.85rem; color:var(--muted); margin:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1 / -1; }
.field label { font-family:var(--font-display); font-weight:600; font-size:.84rem; color:var(--ink); }
.field input, .field select, .field textarea {
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fbfdfe; transition:border-color .2s, box-shadow .2s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); background:#fff; }
.field textarea { resize:vertical; min-height:110px; }
.form-card .btn { margin-top:6px; }
.form-note { font-size:.78rem; color:var(--muted); margin-top:12px; text-align:center; }

/* ---------- CTA band ---------- */
.ctaband { background:linear-gradient(135deg,var(--teal),var(--teal-2)); border-radius:var(--r-xl); padding:clamp(36px,5vw,60px); text-align:center; color:#fff; position:relative; overflow:hidden; }
.ctaband::before { content:""; position:absolute; top:-40%; right:-10%; width:340px; height:340px; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); }
.ctaband h2 { color:#fff; position:relative; }
.ctaband p { position:relative; }

/* ---------- Socials ---------- */
.socials { display:flex; gap:10px; flex-wrap:wrap; }
.socials a { width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#bcd3e8; display:grid; place-items:center; transition:background .2s, color .2s, transform .2s; }
.socials a:hover { background:var(--teal); color:#fff; transform:translateY(-3px); border-color:var(--teal); }
.socials a .i { width:19px; height:19px; }

/* ---------- WhatsApp embedded chat widget ---------- */
.wa-widget { position:fixed; bottom:22px; right:22px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.wa-launch { width:60px; height:60px; border-radius:50%; background:var(--whatsapp); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .2s var(--ease); animation:wa-pulse 2.8s infinite; border:0; cursor:pointer; }
.wa-launch:hover { transform:scale(1.08); }
.wa-launch .i { width:32px; height:32px; }
.wa-panel { width:300px; max-width:calc(100vw - 44px); background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.28); overflow:hidden; transform-origin:bottom right; transform:scale(.6) translateY(20px); opacity:0; pointer-events:none; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.wa-widget.open .wa-panel { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
.wa-head { background:var(--whatsapp); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px; }
.wa-head .av { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; }
.wa-head .av .i { width:24px; height:24px; }
.wa-head b { font-family:var(--font-display); font-size:.95rem; display:block; }
.wa-head span { font-size:.74rem; opacity:.85; }
.wa-body { padding:18px; background:#e9f3ec; }
.wa-bubble { background:#fff; border-radius:4px 14px 14px 14px; padding:12px 14px; font-size:.88rem; color:#3a4d61; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.wa-bubble small { display:block; color:#9aa7b2; font-size:.66rem; margin-top:6px; }
.wa-cta { display:flex; align-items:center; justify-content:center; gap:9px; margin:14px 0 2px; background:var(--whatsapp); color:#fff; padding:13px; border-radius:12px; font-family:var(--font-display); font-weight:700; font-size:.92rem; transition:background .2s; }
.wa-cta:hover { background:var(--whatsapp-2); }
.wa-cta .i { width:20px; height:20px; }
@keyframes wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------- Animation: staggered reveals ---------- */
[data-reveal].in { transition-delay:var(--d,0s); }

/* ---------- Footer ---------- */
.site-footer { position:relative; overflow:hidden; background:linear-gradient(180deg,#0a1f33,var(--navy-deep)); color:#aabfd2; padding:48px 0 0; border-top:3px solid var(--teal); }
.site-footer::before { content:""; position:absolute; top:-120px; left:-80px; width:420px; height:420px; background:radial-gradient(circle,rgba(22,144,206,.16),transparent 68%); pointer-events:none; }
.site-footer::after { content:""; position:absolute; top:-100px; right:-60px; width:360px; height:360px; background:radial-gradient(circle,rgba(22,144,206,.10),transparent 70%); pointer-events:none; }
.site-footer .wrap { position:relative; z-index:1; }
.foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:44px; align-items:start; }
.site-footer h4 { padding-bottom:12px; margin-bottom:18px; position:relative; }
.site-footer h4::after { content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--teal); border-radius:2px; }
.site-footer .foot-logo { display:block; margin:-78px 0 -64px -18px; }
.site-footer .foot-logo img { height:348px; width:auto; display:block; max-width:100%; }
.site-footer .f-brand p { font-size:.92rem; line-height:1.75; max-width:340px; margin-top:0; }
.site-footer h4 { color:#fff; font-size:.78rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:.1em; }
.site-footer ul { list-style:none; }
.site-footer li { margin-bottom:11px; font-size:.92rem; }
.site-footer .f-links a { color:#aabfd2; transition:color .15s, padding .15s; }
.site-footer .f-links a:hover { color:var(--teal); padding-left:4px; }
.site-footer .f-contact li { display:flex; gap:10px; align-items:center; }
.site-footer .f-contact .i { width:16px; height:16px; color:var(--teal); }
.site-footer .f-hours { margin-top:20px; }
.site-footer .f-hours .row { display:flex; justify-content:space-between; font-size:.88rem; padding:4px 0; }
.site-footer .f-hours .row span:last-child { color:#cfe0ee; font-weight:600; }
.foot-trust { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:26px 0; margin-top:20px; border-top:1px solid rgba(255,255,255,.08); }
.foot-trust span { display:inline-flex; align-items:center; gap:9px; font-size:.85rem; font-weight:600; color:#dcebff; color:#cfe0ee; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:10px 18px; border-radius:999px; }
.foot-trust .i { width:18px; height:18px; color:var(--teal); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:#7e96ad; }
.foot-bottom a { color:#93acc4; }
.foot-bottom a:hover { color:var(--teal); }

/* crumbs — removed site-wide */
.crumbs { display:none !important; }

/* reveal */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }

/* ---------- Entrance & ambient animations ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes floatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes popIn { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
.hero .eyebrow { animation:fadeUp .7s var(--ease) both; }
.hero h1 { animation:fadeUp .7s var(--ease) .08s both; }
.hero .sub { animation:fadeUp .7s var(--ease) .18s both; }
.hero .cta-row { animation:fadeUp .7s var(--ease) .28s both; }
.hero .stats { animation:fadeUp .7s var(--ease) .38s both; }
.hero__visual { animation:fadeUp .9s var(--ease) .2s both; }
.hero__badge.b-rating { animation:popIn .5s var(--ease) .7s both, floatY 4.5s ease-in-out 1.3s infinite; }
.hero__badge.b-insured { animation:popIn .5s var(--ease) .85s both, floatY 5s ease-in-out 1.5s infinite; }
/* card image zoom on hover */
.svc__img img, .imgph img, .ph img { transition:transform .5s var(--ease); }
.svc:hover .svc__img img { transform:scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero .eyebrow, .hero h1, .hero .sub, .hero .cta-row, .hero .stats, .hero__visual, .hero__badge { animation:none !important; opacity:1 !important; transform:none !important; }
  .wa-launch { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
/* ---------- Tablet & below (≤980px) ---------- */
@media (max-width:980px){
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .svc-grid { grid-template-columns:repeat(2,1fr); }
  .areas-layout { grid-template-columns:1fr; }
  .steps,.badges { grid-template-columns:repeat(2,1fr); }
  .price-grid { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; gap:32px; }
  .contact-split { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }

  /* Header: lock to a constant compact height so the menu always aligns */
  .nav, .site-header.scrolled .nav { height:72px; }
  .nav .logo img, .site-header.scrolled .logo img { height:50px; }
  .site-footer .foot-logo { margin:0 0 -8px -16px; }
  .site-footer .foot-logo img { height:240px; }

  /* Compact icon-only Call/WhatsApp in burger mode (prevents header overflow) */
  .nav .actions { gap:8px; }
  .nav .actions .btn { padding:11px 13px; }
  .nav .actions .btn .lbl { display:none; }

  .nav ul { display:none; }
  .nav .burger { display:block; }
  .nav.open ul { display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; background:var(--navy-deep); padding:18px 22px; gap:13px; border-bottom:1px solid rgba(255,255,255,.1); box-shadow:0 14px 34px rgba(0,0,0,.4); max-height:calc(100vh - 72px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .nav.open ul > li > a { padding:9px 0; font-size:1rem; display:block; }
  .nav .caret { display:none; }
  /* Mobile dropdowns are always-open & static — neutralise the desktop hover animation */
  .nav .dd,
  .nav .has-dd:hover .dd { position:static; transform:none !important; opacity:1; visibility:visible; min-width:0; background:transparent; border:0; box-shadow:none; padding:6px 0 4px 14px; gap:2px; transition:none; }
  .nav .dd a { padding:9px 10px; font-size:.9rem; }

  /* Map: shorter so it doesn't dominate small screens */
  .areas-map, .areas-map iframe { min-height:340px; }
}
/* ---------- Phone (≤600px) ---------- */
@media (max-width:600px){
  .grid--3,.grid--4,.grid--2,.badges,.steps,.price-grid,.svc-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; }
  .nav .actions .btn span.lbl { display:none; }

  .wrap { padding:0 18px; }

  /* Hero: full-width stacked CTAs + compact 3-across stats */
  .hero .cta-row .btn { flex:1 1 100%; }
  .hero .stats { gap:9px; }
  .stat { min-width:0; flex:1 1 0; padding:15px 8px; }
  .stat b { font-size:1.5rem; }
  .stat span { font-size:.64rem; letter-spacing:.05em; }

  /* Footer logo sized for phones */
  .site-footer { padding-top:54px; }
  .site-footer .foot-logo { margin:0 0 -6px -12px; }
  .site-footer .foot-logo img { height:188px; }
  .foot-bottom { justify-content:flex-start; }

  /* Shorter map on phones */
  .areas-map, .areas-map iframe { min-height:300px; }

  /* Comfortable section headings */
  .sec-head { margin-bottom:clamp(18px,5vw,28px); }
}

/* ---------- Small phone (≤380px) ---------- */
@media (max-width:380px){
  .wrap { padding:0 14px; }
  .stat b { font-size:1.3rem; }
  .stat span { font-size:.58rem; }
  .btn--lg { padding:15px 22px; font-size:1rem; }
}

/* ============================================================
   v3 — Enhanced motion, hierarchy & UX  (global)
   ============================================================ */

/* Anchor offset so the sticky header never covers jumped-to sections */
[id] { scroll-margin-top:104px; }
@media (max-width:980px){ [id] { scroll-margin-top:84px; } }

/* Visible keyboard focus (accessibility) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, .chip:focus-visible {
  outline:3px solid var(--teal); outline-offset:3px; border-radius:8px;
}

/* Scroll progress bar (sits above the header) */
.scroll-prog { position:fixed; top:0; left:0; height:3px; width:0; z-index:90;
  background:linear-gradient(90deg,var(--teal),#5cc6f5); box-shadow:0 0 12px rgba(22,144,206,.7);
  transition:width .08s linear; pointer-events:none; }

/* Generic scroll-reveal — JS only applies it to below-fold elements, so no flash.
   Directional variants: .rl (from left) .rr (from right) .rs (scale up). */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.rl { transform:translateX(-36px); }
.reveal.rr { transform:translateX(36px); }
.reveal.rs { transform:scale(.93); }
.reveal.in { opacity:1; transform:none; }

/* Section-title underline draws in as the heading reveals */
.sec-head h2::after { transition:transform .6s .15s var(--ease); }
.sec-head.reveal h2::after { transform:translateX(-50%) scaleX(0); }
.sec-head.reveal.in h2::after { transform:translateX(-50%) scaleX(1); }
.t-accent::after { transform-origin:left center; transition:transform .55s .12s var(--ease); }
.reveal .t-accent::after, .t-accent.reveal::after { transform:scaleX(0); }
.reveal.in .t-accent::after, .t-accent.reveal.in::after { transform:scaleX(1); }

/* Hierarchy polish */
.hero h1 { text-wrap:balance; text-shadow:0 2px 34px rgba(0,0,0,.28); }
.hero .sub { color:#d2e3f3; }
.sec-head h2, .sec-head p { text-wrap:balance; }
h2,h3 { text-wrap:balance; }

/* Stat strip micro-interaction */
.stat { transition:transform .25s var(--ease), background .25s, border-color .25s; }
.stat:hover { transform:translateY(-4px); background:rgba(255,255,255,.12); border-color:rgba(22,144,206,.4); }
.stat b { font-variant-numeric:tabular-nums; }

/* Ambient drifting glow in the hero (not on themed package heroes) */
.hero:not(.hero--pkg)::after { content:""; position:absolute; z-index:1; width:560px; height:560px;
  right:-130px; top:-170px; border-radius:50%;
  background:radial-gradient(circle, rgba(22,144,206,.20), transparent 65%);
  animation:heroGlow 16s ease-in-out infinite; pointer-events:none; }
@keyframes heroGlow { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-46px,34px) scale(1.14); } }

/* FAQ — animated open + stronger open-state hierarchy */
.faq summary { transition:color .18s; }
.faq summary:hover { color:var(--teal-2); }
.faq summary::after { transition:transform .25s var(--ease), color .2s; }
.faq details[open] { border-color:rgba(22,144,206,.34); box-shadow:0 12px 32px rgba(14,42,71,.12); }
.faq details[open] summary { color:var(--teal-2); }
.faq details[open] .ans { animation:faqIn .32s var(--ease); }
@keyframes faqIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* Active nav link */
.nav ul a.active { color:#fff; }
.nav ul > li > a.active { box-shadow:inset 0 -2px 0 var(--teal); padding-bottom:5px; }

/* Card arrow nudge already exists; add lift cue to service learn-more */
.svc:hover .svc__foot .btn .i { transform:translateX(3px); }
.svc__foot .btn .i { transition:transform .2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .sec-head.reveal h2::after, .sec-head.reveal.in h2::after { transform:translateX(-50%) scaleX(1) !important; }
  .reveal .t-accent::after { transform:scaleX(1) !important; }
  .hero:not(.hero--pkg)::after { animation:none !important; }
  .scroll-prog { display:none !important; }
  .faq details[open] .ans { animation:none !important; }
  .stat:hover { transform:none; }
}

/* ============================================================
   Mini package CTA — compact bundle upsell (service pages)
   ============================================================ */
.pkg-cta { max-width:980px; margin:0 auto; }
.pkg-cta__head { text-align:center; max-width:620px; margin:0 auto 26px; }
.pkg-cta__head .t-accent { display:inline-block; padding-bottom:13px; }
.pkg-cta__head .t-accent::after { left:50%; transform:translateX(-50%); }
.pkg-cta__head p { color:var(--muted); margin-top:16px; }
.pkg-cta__opts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pkg-mini { position:relative; display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid var(--line); border-top:4px solid var(--pkg-c,var(--teal)); border-radius:var(--r); padding:24px 22px 20px; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.pkg-mini:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.pkg-mini b { font-family:var(--font-display); font-size:1.32rem; color:var(--ink); line-height:1.1; }
.pkg-mini > span { color:var(--muted); font-size:.9rem; }
.pkg-mini .pkg-mini__feat { color:var(--body); font-size:.82rem; line-height:1.45; margin-top:4px; }
.pkg-mini .pkg-mini__price { font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--pkg-c,var(--teal-2)); margin-top:8px; }
.pkg-mini em { margin-top:12px; font-style:normal; font-weight:700; font-family:var(--font-display); font-size:.9rem; color:var(--pkg-c,var(--teal-2)); display:inline-flex; align-items:center; gap:6px; }
.pkg-mini em .i { width:1em; height:1em; transition:transform .2s var(--ease); }
.pkg-mini:hover em .i { transform:translateX(4px); }
.pkg-mini--core { --pkg-c:#d97706; }
.pkg-mini--gold { --pkg-c:var(--teal-2); border-color:var(--teal); box-shadow:0 12px 28px rgba(22,144,206,.16); }
.pkg-mini--platinum { --pkg-c:#7c3aed; }
.pkg-mini__tag { position:absolute; top:-11px; right:14px; background:var(--teal); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px; box-shadow:0 6px 14px rgba(22,144,206,.4); }

/* ============================================================
   Polish pass — micro-interactions & motion (v38)
   ============================================================ */
/* Hero light-sweep (clean-glass shine drifting across the backdrop) */
.hero__bg::after { content:""; position:absolute; inset:-40% -20%; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.06) 46%, rgba(127,211,242,.22) 50%, rgba(255,255,255,.06) 54%, transparent 62%);
  transform:translateX(-65%); animation:heroSheen 8.5s var(--ease) 1.5s infinite; }
@keyframes heroSheen { 0%{ transform:translateX(-65%); } 60%,100%{ transform:translateX(65%); } }

/* Trailing-icon nudge on buttons (last element child = arrow/chevron; labelled
   Call/WhatsApp buttons end in a <span>, so their leading icons stay put) */
.btn .i:last-child { transition:transform .2s var(--ease); }
.btn:hover .i:last-child { transform:translateX(3px); }

/* Branded social hovers (brand glyphs already in the sprite) */
.socials a[aria-label="Facebook"]:hover  { background:#1877F2; border-color:#1877F2; color:#fff; }
.socials a[aria-label="Instagram"]:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:transparent; color:#fff; }
.socials a[aria-label="Google"]:hover    { background:#EA4335; border-color:#EA4335; color:#fff; }
.socials a[aria-label="LinkedIn"]:hover  { background:#0A66C2; border-color:#0A66C2; color:#fff; }
.socials a[aria-label="TikTok"]:hover    { background:#010101; border-color:#25F4EE; color:#fff; }

/* Comparison table — ticks pop in (staggered) as the table reveals into view */
.cmp-wrap.in .yes .i { animation:popIn .4s var(--ease) backwards; }
.cmp-wrap.in tbody tr:nth-child(1) .yes .i  { animation-delay:.04s; }
.cmp-wrap.in tbody tr:nth-child(2) .yes .i  { animation-delay:.10s; }
.cmp-wrap.in tbody tr:nth-child(3) .yes .i  { animation-delay:.16s; }
.cmp-wrap.in tbody tr:nth-child(4) .yes .i  { animation-delay:.22s; }
.cmp-wrap.in tbody tr:nth-child(5) .yes .i  { animation-delay:.28s; }
.cmp-wrap.in tbody tr:nth-child(6) .yes .i  { animation-delay:.34s; }
.cmp-wrap.in tbody tr:nth-child(7) .yes .i  { animation-delay:.40s; }
.cmp-wrap.in tbody tr:nth-child(8) .yes .i  { animation-delay:.46s; }
.cmp-wrap.in tbody tr:nth-child(9) .yes .i  { animation-delay:.52s; }
.cmp-wrap.in tbody tr:nth-child(10) .yes .i { animation-delay:.58s; }
.cmp-wrap.in tbody tr:nth-child(11) .yes .i { animation-delay:.64s; }

@media (prefers-reduced-motion: reduce) {
  .hero__bg::after { animation:none !important; opacity:0; }
  .btn:hover .i:last-child { transform:none !important; }
  .cmp-wrap.in .yes .i { animation:none !important; }
}
@media (max-width:700px){ .pkg-cta__opts { grid-template-columns:1fr; } }

/* ---------- Skip link (a11y) ---------- */
.skip-link { position:fixed; top:-60px; left:14px; z-index:200; background:var(--teal); color:#fff; font-weight:700; font-size:.9rem; padding:11px 18px; border-radius:0 0 10px 10px; transition:top .2s var(--ease); }
.skip-link:focus { top:0; }