/* ===== Refined Shine — Minimal Design System v3 (Blue + White, solid colors only) ===== */
:root{
  --navy:#0B1442;        /* deep royal navy — dark backgrounds */
  --royal:#2F4FE0;       /* vivid royal blue — primary accent/buttons */
  --royal-deep:#1B2A6B;  /* darker royal blue — alternate section bg */
  --sky:#6C9BFF;         /* bright sky blue — highlight accent on dark backgrounds */
  --green:#12A66B;       /* reserved for the WhatsApp button only */
  --lime:#7CFFB2;        /* unused, kept for backward compatibility */
  --paper:#F3F6FC;       /* light section background */
  --white:#FFFFFF;
  --ink:#0B1442;
  --ink-soft:rgba(11,20,66,0.64);
  --line:rgba(11,20,66,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family:'Inter', sans-serif; background:var(--paper); color:var(--ink); overflow-x:hidden; cursor:none; }
::selection{background:var(--royal); color:#fff;}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; line-height:1.03; letter-spacing:-0.015em; color:var(--ink);}
a,button{cursor:none;}
img{max-width:100%; display:block;}

.eyebrow{ font-family:'Inter', sans-serif; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--royal); display:flex; align-items:center; gap:10px; margin-bottom:18px; font-weight:700; }
.eyebrow::before{content:''; width:28px; height:2px; background:var(--royal);}
.eyebrow.on-dark{ color:var(--sky); }
.eyebrow.on-dark::before{ background:var(--sky); }

.cursor-glow{ position:fixed; width:320px; height:320px; border-radius:50%; pointer-events:none; z-index:999; background:radial-gradient(circle, rgba(124,255,178,0.14) 0%, rgba(47,79,224,0.06) 40%, transparent 70%); transform:translate(-50%,-50%); left:-500px; top:-500px; }
.cursor-dot{ position:fixed; width:9px; height:9px; border-radius:50%; background:var(--royal); pointer-events:none; z-index:1000; transform:translate(-50%,-50%); left:-500px; top:-500px; }
@media (hover:none){ .cursor-glow, .cursor-dot{display:none;} body{cursor:auto;} a,button{cursor:pointer;} }

.site-header{ position:sticky; top:0; left:0; right:0; z-index:200; background:var(--navy); }
.top-ribbon{ background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:9px 5vw; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; gap:16px; }
.ribbon-contact{ display:flex; align-items:center; gap:22px; }
.ribbon-contact a{ color:rgba(255,255,255,0.9); text-decoration:none; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.ribbon-contact a:hover{ color:var(--sky); }
.ribbon-contact svg{ width:14px; height:14px; flex-shrink:0; }
.ribbon-reviews{ display:inline-flex; align-items:center; gap:6px; background:#F4B400; color:var(--navy); text-decoration:none; padding:6px 14px; border-radius:20px; font-weight:700; font-size:12px; white-space:nowrap; }
.ribbon-reviews svg{ width:13px; height:13px; }
.ribbon-actions{ display:flex; align-items:center; gap:10px; }
.ribbon-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:#fff; padding:6px 14px; border-radius:20px; font-weight:700; font-size:12px; white-space:nowrap; }
.ribbon-btn svg{ width:13px; height:13px; }
.ribbon-btn.wa{ background:#25D366; }
.ribbon-btn.call{ background:#E4402C; }
@media (max-width:900px){
  .ribbon-contact{ display:none; }
  .top-ribbon{ justify-content:center; padding:8px 4vw; }
}

/* floating ServiceMarket rating badge, sits above the WhatsApp float button */
.rating-float{ position:fixed; right:22px; bottom:130px; z-index:180; width:66px; height:66px; border-radius:50%; background:var(--royal); color:#fff; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:'Inter',sans-serif; box-shadow:0 10px 24px rgba(47,79,224,0.5); text-align:center; line-height:1; transition:transform 0.25s ease; border:2px solid rgba(255,255,255,0.4); }
.rating-float:hover{ transform:scale(1.08); }
.rating-float .rf-star{ color:#F4B400; font-size:17px; }
.rating-float .rf-num{ font-size:15px; font-weight:800; }
@media (max-width:820px){ .rating-float{ right:16px; bottom:184px; width:54px; height:54px; } .rating-float .rf-star{ font-size:14px; } .rating-float .rf-num{ font-size:12px; } }

nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:14px 5vw; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 20px rgba(11,20,66,0.06); }
.logo-chip img{ height:78px; display:block; }
.navlinks{ display:flex; gap:34px; list-style:none; }
.navlinks a{ color:var(--ink); text-decoration:none; font-size:15px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.02em; text-transform:none; opacity:0.85; transition:color 0.25s, opacity 0.25s; }
.navlinks a:hover, .navlinks a.active{ opacity:1; color:var(--royal); }
.book-btn{ font-family:'Inter', sans-serif; font-weight:700; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; color:#fff; background:var(--royal); border:none; padding:12px 24px; border-radius:3px; cursor:none; text-decoration:none; box-shadow:0 10px 24px rgba(47,79,224,0.3); }
.magnetic{ position:relative; transition:transform 0.25s ease; display:inline-block; }

.btn-primary{ background:var(--royal); color:#fff; border:none; padding:17px 32px; border-radius:3px; font-family:'Inter', sans-serif; font-weight:700; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; cursor:none; text-decoration:none; display:inline-block; box-shadow:0 12px 30px rgba(47,79,224,0.35); }
.btn-primary.alt{ background:var(--royal-deep); box-shadow:0 12px 30px rgba(27,42,107,0.35); }
.btn-ghost{ border:1.5px solid rgba(255,255,255,0.45); color:#fff; background:transparent; padding:16px 32px; border-radius:3px; font-family:'Inter', sans-serif; font-weight:700; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; display:inline-block; }
.btn-ghost.on-light{ border-color:var(--line); color:var(--ink); }

.marquee-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:150; padding:14px 0; overflow:hidden; background:var(--navy); }
.marquee{ display:flex; width:max-content; animation:scroll-left 42s linear infinite; }
.marquee span{ font-family:'Inter', sans-serif; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.75); padding:0 24px; white-space:nowrap; display:flex; align-items:center; gap:24px; }
.marquee span::after{ content:'✦'; color:var(--sky); font-size:9px; }
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.hero-banner{ position:relative; min-height:64vh; display:flex; align-items:flex-end; background-size:cover; background-position:center; overflow:hidden; }
.hero-banner::before{ content:''; position:absolute; inset:0; background:rgba(11,20,66,0.78); }
.hero-banner-content{ position:relative; z-index:2; padding:0 6vw 70px; max-width:900px; color:#fff; }
.hero-banner-content h1{ font-size:clamp(40px,6.4vw,88px); color:#fff; margin-top:10px; }
.hero-banner-content p{ font-size:17px; color:rgba(255,255,255,0.82); max-width:540px; margin-top:18px; }

.img-card{ position:relative; border-radius:12px; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 24px 50px rgba(11,20,66,0.18); }
.img-card::before{ content:''; position:absolute; inset:0; background:rgba(11,20,66,0.6); }
.img-card .img-card-body{ position:relative; z-index:2; }

.services-toolbar{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:50px 6vw 30px; position:relative; z-index:2; }
.services-toolbar input{ flex:1; min-width:220px; padding:15px 20px; border-radius:3px; border:1.5px solid var(--line); background:var(--white); font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); cursor:text; }
.services-toolbar input:focus{ outline:2px solid var(--royal); outline-offset:2px; }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:28px; padding:0 6vw 140px; position:relative; z-index:2; }
.service-card{ aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; transition:transform 0.3s ease, box-shadow 0.3s ease; text-decoration:none; }
.service-card:hover{ transform:translateY(-8px) scale(1.01); box-shadow:0 30px 60px rgba(11,20,66,0.28); }
.service-card h3{ font-size:23px; color:#fff; margin-bottom:8px; }
.service-card p{ font-size:14px; color:rgba(255,255,255,0.78); line-height:1.5; margin-bottom:16px; }
.service-card .book-link{ align-self:flex-start; font-family:'Inter', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:var(--royal); text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:6px; box-shadow:0 8px 20px rgba(47,79,224,0.35); }
.service-card .book-link::after{ content:'→'; transition:transform 0.2s ease; }
.service-card:hover .book-link::after{ transform:translateX(4px); }

.modal-overlay{ position:fixed; inset:0; background:rgba(11,20,66,0.7); backdrop-filter:blur(4px); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:var(--white); border-radius:14px; max-width:480px; width:100%; padding:38px; position:relative; }
.modal-box .close-btn{ position:absolute; top:18px; right:18px; background:none; border:none; font-size:20px; color:var(--ink-soft); cursor:pointer; }
.modal-box h3{ font-size:27px; margin-bottom:6px; }
.modal-box .modal-service{ font-family:'Inter', sans-serif; font-size:14px; color:var(--royal); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:20px; display:block; font-weight:700; }
.form-field{ margin-bottom:16px; }
.form-field label{ font-family:'Inter', sans-serif; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:6px; }
.form-field input, .form-field textarea, .form-field select{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:5px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:var(--paper); cursor:text; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:2px solid var(--royal); outline-offset:1px; }
.form-field textarea{ resize:vertical; min-height:80px; }
.form-submit{ width:100%; margin-top:6px; text-align:center; border:none; }
.form-note{ font-size:14px; color:var(--ink-soft); margin-top:12px; text-align:center; }
.form-success{ text-align:center; padding:20px 0 6px; }
.form-success .success-icon{ width:58px; height:58px; border-radius:50%; background:var(--royal); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 10px 24px rgba(47,79,224,0.4); }
.form-success h3{ font-size:24px; margin-bottom:10px; }
.form-success p{ color:var(--ink-soft); font-size:14px; margin-bottom:22px; line-height:1.5; }
.form-error-msg{ color:#C4453B; font-size:14px; margin-top:10px; text-align:center; display:none; }

.cta-section{ min-height:56vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px 6vw 140px; position:relative; background:var(--navy); z-index:2; color:#fff; }
.cta-section .eyebrow{ color:var(--sky); justify-content:center; }
.cta-section .eyebrow::before{ background:var(--sky); }
.cta-section h2{ font-size:clamp(38px,5.6vw,76px); max-width:900px; margin-bottom:34px; color:#fff; }
.cta-section h2 em{ font-style:italic; color:var(--sky); }
.cta-section .btn-primary{ background:#fff; color:var(--navy); box-shadow:0 12px 30px rgba(0,0,0,0.25); }

footer{ background:var(--paper); border-top:1px solid var(--line); padding:70px 6vw 30px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; position:relative; z-index:2; }
.foot-col h4{ font-family:'Inter', sans-serif; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; color:var(--royal); margin-bottom:16px; font-weight:700; }
.foot-col a, .foot-col p{ color:var(--ink-soft); text-decoration:none; font-size:16px; display:block; margin-bottom:12px; }
.foot-col a{ display:flex; align-items:flex-start; gap:10px; }
.foot-icon{ width:16px; height:16px; flex-shrink:0; margin-top:3px; opacity:0.7; }
.foot-col a:hover{ color:var(--royal); }
.foot-bottom{ width:100%; border-top:1px solid var(--line); margin-top:40px; padding-top:24px; font-family:'Inter', sans-serif; font-size:15px; color:var(--ink-soft); display:flex; justify-content:space-between; }

/* mobile hamburger menu */
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:210; }
.hamburger span{ width:24px; height:2px; background:var(--ink); display:block; transition:all 0.3s ease; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ position:fixed; inset:0; background:var(--navy); z-index:250; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; transform:translateY(-100%); transition:transform 0.4s ease; }
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav a{ color:#fff; text-decoration:none; font-family:'Inter', sans-serif; font-size:19px; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; }
.mobile-nav a.book-btn{ padding:14px 28px; }

@media (min-width:821px){ .mobile-nav{ display:none; } }

/* floating widgets — WhatsApp, scroll-to-top, pinned socials */
.float-btn{ position:fixed; z-index:180; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(11,20,66,0.28); text-decoration:none; cursor:pointer; transition:transform 0.25s ease, opacity 0.25s ease; }
.float-btn:hover{ transform:translateY(-3px) scale(1.05); }
.float-btn svg{ width:26px; height:26px; }

.whatsapp-float{ right:22px; bottom:74px; background:#25D366; }
.scroll-top-float{ right:22px; bottom:206px; background:var(--royal); opacity:0; pointer-events:none; transform:translateY(10px); }
.scroll-top-float.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

.social-pinned{ position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:180; display:flex; flex-direction:column; gap:10px; }
.social-pinned a{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; opacity:0.9; transition:opacity 0.25s ease, transform 0.25s ease; box-shadow:0 6px 16px rgba(11,20,66,0.25); }
.social-pinned a:hover{ opacity:1; transform:scale(1.1); }
.social-pinned a svg{ width:17px; height:17px; }
.social-pinned a.ig{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-pinned a.fb{ background:#1877F2; }
.social-pinned a.li{ background:#0A66C2; }
.social-pinned a.yt{ background:#FF0000; }

.whatsapp-float{ animation:whatsappBuzz 2.6s ease-in-out infinite; }
@keyframes whatsappBuzz{
  0%, 100%{ transform:rotate(0); }
  4%{ transform:rotate(-14deg); }
  8%{ transform:rotate(11deg); }
  12%{ transform:rotate(-8deg); }
  16%{ transform:rotate(6deg); }
  20%{ transform:rotate(-3deg); }
  24%{ transform:rotate(0); }
}
.whatsapp-float:hover{ animation-play-state:paused; }

@media (max-width:820px){
  .social-pinned{ left:8px; gap:8px; }
  .social-pinned a{ width:30px; height:30px; }
  .social-pinned a svg{ width:14px; height:14px; }
  .whatsapp-float{ right:16px; bottom:80px; width:48px; height:48px; }
  .scroll-top-float{ right:16px; bottom:250px; width:48px; height:48px; }
}

/* ===== Loading screen ===== */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--paper); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px; transition:opacity 0.6s ease, visibility 0.6s ease; }
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ height:110px; width:auto; }
.loader-bar{ width:190px; height:4px; background:var(--line); border-radius:4px; overflow:hidden; position:relative; }
.loader-bar::after{ content:''; position:absolute; top:0; bottom:0; width:40%; background:var(--royal); border-radius:4px; animation:loaderSweep 1.1s ease-in-out infinite; }
@keyframes loaderSweep{ 0%{left:-40%;} 100%{left:100%;} }

/* ===== Glassmorphism text panel — guarantees legibility over any photo ===== */
.glass-box{
  background:rgba(11,20,66,0.5);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:36px 42px;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
  display:inline-block;
}
.glass-box.tight{ padding:22px 24px; border-radius:14px; }
.glass-box.full{ display:block; }
.glass-box.on-light{ background:rgba(255,255,255,0.7); border-color:rgba(11,20,66,0.1); }
.glass-box.on-light h1, .glass-box.on-light h2, .glass-box.on-light h3, .glass-box.on-light p{ color:var(--ink); }
@media (max-width:600px){ .glass-box{ padding:24px 22px; border-radius:14px; } }

@media (max-width:820px){
  .navlinks{display:none;}
  .hamburger{display:flex;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .top-ribbon{ font-size:12px; padding:7px 4vw; }
  .top-ribbon .star-extra{ display:none; }
  /* mobile browsers miscalculate 100vh due to the address bar */
  .carousel-wrap, .carousel, .card{ height:100vh; height:100dvh; }
  /* hero-banner: switch from viewport-height to a fixed aspect ratio on mobile.
     A tall, narrow, viewport-height box forces "cover" to crop a wide photo down
     to a thin sliver — that's what caused the extreme zoomed-in crop. A fixed
     ratio keeps the crop sane and predictable regardless of screen height. */
  .hero-banner{ min-height:0; height:auto; aspect-ratio:4/5; align-items:flex-end; }
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .social-pinned{ display:none; }
}