/*
Theme Name: PeacefulTech
Theme URI: https://peacefultech.ae/
Author: PeacefulTech
Author URI: https://peacefultech.ae/
Description: PeacefulTech is a bright, glossy WordPress theme for cleaning and technical services companies in Dubai. It ships with a full image hero slider, animated reveal effects, dedicated service pages, an About page and a Contact page with form and map. Light blue and green pastel palette with a glossy finish.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peacefultech
*/

/* ============================================================
   PEACEFULTECH — light, fresh, glossy pastel theme
   Palette from logo: azure blue + lime green on white
============================================================ */
@property --accent  { syntax:'<color>'; inherits:true; initial-value:#29abe2; }
@property --accent2 { syntax:'<color>'; inherits:true; initial-value:#74c13a; }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --bg:#eef8fd;
  --bg2:#ffffff;
  --blue:#29abe2;
  --blue-d:#1488bd;
  --blue-l:#7fd2f2;
  --green:#74c13a;
  --green-d:#57a525;
  --green-l:#aee07a;
  --accent:#29abe2;
  --accent2:#74c13a;
  --ink:#0e3346;
  --body:#3d5a68;
  --muted:#6e8a98;
  --line:rgba(20,120,160,.14);
  --grad:linear-gradient(100deg,#29abe2 0%,#3bb6c9 45%,#74c13a 100%);
  --ease:cubic-bezier(.7,0,.2,1);

  /* typography — headings: Sora (display) · body & UI: Arial / Helvetica */
  --font-head:'Sora', Arial, Helvetica, sans-serif;
  --font-body:Arial, Helvetica, 'Segoe UI', Roboto, sans-serif;
  --fs-hero:clamp(2.5rem, 6vw, 4rem);
  --fs-h2:clamp(2rem, 3.6vw, 2.5rem);
  --fs-h3:clamp(1.5rem, 2.2vw, 1.75rem);
  --fs-body:1rem;
  --fs-nav:0.9375rem;
  --fs-small:0.8125rem;
  --fs-btn:0.9375rem;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--body);
  font-family:var(--font-body); font-size:var(--fs-body);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--blue); color:#fff; }

.bgfx{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 40% at 84% 6%, rgba(41,171,226,.14), transparent 62%),
    radial-gradient(42% 38% at 6% 28%, rgba(116,193,58,.12), transparent 60%),
    radial-gradient(50% 45% at 92% 78%, rgba(116,193,58,.10), transparent 64%),
    var(--bg); }

/* ---------- shared text bits ---------- */
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kick{ font-size:var(--fs-small); letter-spacing:.34em; text-transform:uppercase; font-weight:600; color:var(--blue-d);
  display:inline-flex; align-items:center; gap:12px; margin-bottom:16px; }
.kick::before{ content:''; width:30px; height:2px; border-radius:2px; background:var(--grad); }
.h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; line-height:1.07;
  font-size:var(--fs-h2); color:var(--ink); }
.sub{ margin-top:16px; font-weight:300; font-size:var(--fs-body); line-height:1.7; color:var(--body); }
.sec-head{ max-width:760px; margin:0 auto clamp(44px,5vw,72px); text-align:center; }
.sec-head .kick{ justify-content:center; }

.wrap{ max-width:1300px; margin:0 auto; padding:0 clamp(22px,6vw,90px); }
.sec{ position:relative; z-index:10; padding:clamp(72px,9vw,128px) 0; }
.sec--alt{ background:linear-gradient(180deg,#ffffff,#eaf6fb); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.glass{ background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  border:1px solid rgba(41,171,226,.16); box-shadow:0 16px 40px rgba(18,110,150,.10), inset 0 1px 0 #fff;
  backdrop-filter:blur(8px); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-btn); letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; padding:15px 28px; border-radius:42px; transition:.32s var(--ease); white-space:nowrap; }
.btn .arr{ transition:transform .3s; } .btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ color:#fff; background:linear-gradient(135deg,#34b6ea 0%,#1f9fd6 46%,#69bf46 100%);
  box-shadow:0 14px 30px rgba(41,171,226,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-primary:hover{ transform:translateY(-3px); filter:brightness(1.06);
  box-shadow:0 20px 44px rgba(41,171,226,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.btn-ghost:hover{ background:rgba(255,255,255,.22); border-color:#fff; }
.btn-white{ color:var(--blue-d); background:#fff; box-shadow:0 14px 30px rgba(0,40,70,.18), inset 0 1px 0 #fff; }
.btn-white:hover{ transform:translateY(-3px); }
.btn-outline{ color:var(--blue-d); border:1px solid rgba(20,120,160,.3); background:rgba(255,255,255,.7); }
.btn-outline:hover{ border-color:var(--blue); background:#fff; transform:translateY(-3px); }

.pill{ display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-btn); letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; padding:14px 26px; border-radius:40px; color:#fff;
  background:linear-gradient(135deg,#34b6ea,#1f9fd6 50%,#69bf46);
  box-shadow:0 12px 28px rgba(41,171,226,.4), inset 0 1px 0 rgba(255,255,255,.5); transition:.3s var(--ease); }
.pill:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.pill.alt{ background:linear-gradient(135deg,#86d24f,#5aa525); box-shadow:0 12px 28px rgba(116,193,58,.4), inset 0 1px 0 rgba(255,255,255,.5); }

/* ============================================================
   HEADER
============================================================ */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:60; padding:16px clamp(18px,4vw,54px);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(6,30,44,.40), transparent); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
body.scrolled .hdr, body.inner .hdr{ padding-top:11px; padding-bottom:11px; background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line); box-shadow:0 10px 34px rgba(18,110,150,.12); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .badge{ height:42px; width:42px; flex:0 0 auto; border-radius:12px; background:#fff; padding:4px;
  box-shadow:0 6px 16px rgba(0,40,70,.18), inset 0 1px 0 #fff; display:grid; place-items:center; }
.brand .badge img{ width:100%; height:100%; object-fit:contain; }
.brand .bw{ display:flex; flex-direction:column; line-height:1; }
.brand .bw b{ font-family:var(--font-head); font-weight:800; font-size:18px; letter-spacing:.01em; color:#fff; transition:color .4s; }
.brand .bw b em{ font-style:normal; color:var(--green-l); }
.brand .bw small{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:3px; transition:color .4s; }
body.scrolled .brand .bw b, body.inner .brand .bw b{ color:var(--ink); }
body.scrolled .brand .bw b em, body.inner .brand .bw b em{ color:var(--green-d); }
body.scrolled .brand .bw small, body.inner .brand .bw small{ color:var(--muted); }

.nav{ display:flex; align-items:center; gap:26px; }
.nav-link{ position:relative; font-size:var(--fs-nav); font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.88); padding:6px 0; transition:color .3s; cursor:pointer; }
body.scrolled .nav-link, body.inner .nav-link{ color:var(--body); }
.nav-link:hover, .nav-link.current{ color:#fff; } body.scrolled .nav-link:hover, body.inner .nav-link:hover, body.scrolled .nav-link.current, body.inner .nav-link.current{ color:var(--blue-d); }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--grad); transition:width .35s var(--ease); }
.nav-link:hover::after, .nav-link.current::after{ width:100%; }

.nav-drop{ position:relative; }
.drop{ position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,8px); min-width:300px; padding:10px; border-radius:16px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(18px); border:1px solid var(--line); opacity:0; visibility:hidden;
  transition:.3s var(--ease); box-shadow:0 30px 60px rgba(18,80,120,.22); list-style:none; }
.nav-drop:hover .drop, .nav-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.drop a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; font-size:13.5px; color:var(--body); transition:.25s; }
.drop a:hover{ background:rgba(41,171,226,.10); color:var(--ink); }
.drop a .sw{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--grad); }

/* dashboard managed menu (Appearance > Menus) — mirrors the designed nav */
.nav-menu{ display:flex; align-items:center; gap:26px; }
.nav-menu li{ position:relative; }
.nav-menu a{ position:relative; display:inline-block; font-size:var(--fs-nav); font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.88); padding:6px 0; transition:color .3s; }
.nav-menu .menu-item-has-children > a{ padding-right:16px; }
.nav-menu .menu-item-has-children > a::before{ content:'▾'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:10px; }
body.scrolled .nav-menu a, body.inner .nav-menu a{ color:var(--body); }
.nav-menu a:hover, .nav-menu .current-menu-item > a{ color:#fff; }
body.scrolled .nav-menu a:hover, body.inner .nav-menu a:hover,
body.scrolled .nav-menu .current-menu-item > a, body.inner .nav-menu .current-menu-item > a{ color:var(--blue-d); }
.nav-menu > li > a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--grad); transition:width .35s var(--ease); }
.nav-menu > li > a:hover::after, .nav-menu > li.current-menu-item > a::after{ width:100%; }
.nav-menu .sub-menu{ position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,8px); min-width:260px; padding:10px; border-radius:16px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(18px); border:1px solid var(--line); opacity:0; visibility:hidden;
  transition:.3s var(--ease); box-shadow:0 30px 60px rgba(18,80,120,.22); list-style:none; }
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav-menu .sub-menu a{ display:block; padding:11px 12px; border-radius:11px; font-size:13.5px; color:var(--body); text-transform:none; letter-spacing:0; font-weight:500; }
.nav-menu .sub-menu a::after{ display:none; }
.nav-menu .sub-menu a:hover{ background:rgba(41,171,226,.10); color:var(--ink); }

.hdr-right{ display:flex; align-items:center; gap:16px; }
.hdr-phone{ font-size:var(--fs-nav); font-weight:600; letter-spacing:.02em; color:#fff; white-space:nowrap; display:flex; align-items:center; gap:7px; }
body.scrolled .hdr-phone, body.inner .hdr-phone{ color:var(--ink); }
.hdr-phone .pi{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#fff;
  background:linear-gradient(150deg,#34b6ea,#1f9fd6); box-shadow:0 4px 12px rgba(41,171,226,.45); }
.btn-talk{ font-size:var(--fs-btn); letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:11px 22px; border-radius:40px;
  color:#fff; background:linear-gradient(135deg,#34b6ea,#1f9fd6 55%,#69bf46);
  box-shadow:0 10px 24px rgba(41,171,226,.42), inset 0 1px 0 rgba(255,255,255,.5); transition:.3s var(--ease); }
.btn-talk:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.burger span{ width:24px; height:2px; border-radius:2px; background:#fff; transition:.3s; }
body.scrolled .burger span, body.inner .burger span{ background:var(--ink); }

/* ============================================================
   PRELOADER
============================================================ */
.loader{ position:fixed; inset:0; z-index:200; background:linear-gradient(160deg,#eef8fd,#ffffff);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition:opacity .7s ease, visibility .7s; }
.loader.gone{ opacity:0; visibility:hidden; }
.loader .lbadge{ width:78px; height:78px; border-radius:20px; background:#fff; padding:8px; box-shadow:0 16px 40px rgba(18,110,150,.2); animation:pop 1.6s ease-in-out infinite; }
.loader .lbadge img{ width:100%; height:100%; object-fit:contain; }
@keyframes pop{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.loader .lw{ font-family:var(--font-head); font-weight:800; font-size:clamp(26px,7vw,40px); color:var(--ink); }
.loader .lw em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.loader .lbar{ width:min(60vw,240px); height:3px; background:rgba(41,171,226,.16); border-radius:3px; overflow:hidden; }
.loader .lbar i{ display:block; height:100%; width:0; background:var(--grad); transition:width .3s; }
.loader small{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   HERO — image slider
============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; z-index:20; background:#0b2e42; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s var(--ease), visibility 1.1s; }
.hero-slide.is-active{ opacity:1; visibility:visible; }
.hero-slide .bg{ position:absolute; inset:0; overflow:hidden; }
.hero-slide .bg-shift{ position:absolute; inset:-44px; will-change:transform; transition:transform .35s ease-out; }
.hero-slide .bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.hero-slide.is-active .bg img{ animation:kenburns 8s var(--ease) forwards; }
@keyframes kenburns{ from{ transform:scale(1.05); } to{ transform:scale(1.18); } }
.hero-slide .bg::after{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(106deg, rgba(7,38,55,.90) 0%, rgba(11,66,96,.62) 40%, rgba(22,110,86,.30) 78%, rgba(116,193,58,.12) 100%),
    linear-gradient(0deg, rgba(6,30,44,.86) 0%, rgba(6,30,44,.05) 46%); }
.hero-slide .frost{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  -webkit-backdrop-filter:blur(6px) saturate(.9) brightness(.93); backdrop-filter:blur(6px) saturate(.9) brightness(.93);
  -webkit-mask:radial-gradient(circle 170px at var(--mx,50%) var(--my,130%), rgba(0,0,0,0) 52px, rgba(0,0,0,.5) 118px, #000 170px);
  mask:radial-gradient(circle 170px at var(--mx,50%) var(--my,130%), rgba(0,0,0,0) 52px, rgba(0,0,0,.5) 118px, #000 170px);
  transition:opacity .5s ease; }
.hero.wiping .hero-slide.is-active .frost{ opacity:1; }
.hero-slide.img-fail .bg{ background:linear-gradient(135deg,#1f9fd6,#0b2e42 60%,#57a525); }
.hero-slide.img-fail .bg img{ display:none; }

.hero-inner{ position:relative; z-index:3; height:100%; max-width:1300px; margin:0 auto;
  padding:0 clamp(22px,6vw,90px); display:flex; flex-direction:column; justify-content:center; perspective:1200px; }
.hero-inner .holder{ max-width:760px; will-change:transform; transition:transform .35s ease-out; }
.s-tag{ font-size:var(--fs-small); font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#cdeefb;
  margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.s-tag::before{ content:''; width:34px; height:2px; border-radius:2px; background:linear-gradient(90deg,#5bc6ee,#9fd96a); }
.title{ font-family:var(--font-head); font-weight:800; color:#fff; font-size:var(--fs-hero); line-height:1.0;
  letter-spacing:-.02em; margin-bottom:18px; text-shadow:0 4px 34px rgba(0,10,20,.45); }
.title .line{ display:block; overflow:hidden; }
.title .line .line-i{ display:block; will-change:transform; }
.title-char{ display:inline-block; white-space:pre; will-change:transform, opacity; }
.title .grad{ background:linear-gradient(100deg,#8fe0ff 0%,#5bc6ee 38%,#aee07a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.title .line-i.grad .title-char{ background:linear-gradient(120deg,#8fe0ff,#5bc6ee 45%,#aee07a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.s-desc{ font-size:var(--fs-body); font-weight:300; line-height:1.65; color:rgba(235,247,255,.92); max-width:560px; margin-bottom:26px; }
.s-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.s-stats{ display:flex; gap:clamp(22px,3.4vw,52px); margin-top:34px; flex-wrap:wrap; }
.s-stats .st b{ font-family:var(--font-head); font-size:clamp(20px,2.1vw,28px); font-weight:700; display:block; color:#fff; }
.s-stats .st b em{ font-style:normal; color:var(--green-l); }
.s-stats .st span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(220,240,255,.72); }

.rail{ position:absolute; left:clamp(14px,3.4vw,40px); top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:20px; pointer-events:none; }
.rail .vline{ width:2px; height:84px; border-radius:2px; background:linear-gradient(#9fd96a,transparent); }
.rail .vtext{ writing-mode:vertical-rl; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:rgba(225,243,255,.72); }

.h-arrows{ position:absolute; z-index:6; right:clamp(18px,4vw,54px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; }
.h-arrows button{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px); transition:.3s var(--ease); }
.h-arrows button:hover{ background:#fff; color:var(--blue-d); transform:scale(1.06); }
.h-dots{ position:absolute; z-index:6; left:50%; transform:translateX(-50%); bottom:clamp(80px,11vh,120px); display:flex; gap:12px; }
.h-dots button{ width:11px; height:11px; border-radius:50%; border:2px solid rgba(255,255,255,.6); transition:.3s var(--ease); }
.h-dots button.on{ width:30px; border-radius:8px; background:#fff; border-color:#fff; }
.h-bar{ position:absolute; z-index:6; left:0; right:0; bottom:0; padding:0 clamp(22px,6vw,90px) clamp(22px,4vh,34px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; pointer-events:none; }
.counter{ font-family:var(--font-head); display:flex; align-items:baseline; gap:8px; color:#fff; }
.counter .cur{ font-size:32px; font-weight:700; line-height:1; }
.counter .tot{ font-size:14px; color:rgba(225,243,255,.7); }
.progress{ width:min(34vw,340px); height:3px; background:rgba(255,255,255,.24); margin-top:12px; border-radius:3px; overflow:hidden; }
.progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#5bc6ee,#aee07a); border-radius:3px; }
.h-addr{ text-align:right; font-size:12.5px; line-height:1.8; color:rgba(225,243,255,.82); }
.h-addr b{ color:#fff; font-weight:600; }
.hint{ position:absolute; z-index:5; left:50%; bottom:24px; transform:translateX(-50%); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(225,243,255,.7); display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; animation:bob 2.4s ease-in-out infinite; }
.hint .mouse{ width:22px; height:34px; border:1px solid rgba(255,255,255,.5); border-radius:14px; position:relative; }
.hint .mouse::after{ content:''; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px; background:#aee07a; transform:translateX(-50%); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,10px)} }
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }
.spark{ position:absolute; z-index:4; color:#fff; pointer-events:none; opacity:0; filter:drop-shadow(0 0 8px rgba(143,224,255,.8)); animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(.6) rotate(0deg); } 50%{ opacity:.9; transform:scale(1) rotate(45deg); } }

/* ============================================================
   TRUST STRIP
============================================================ */
.trust{ position:relative; z-index:12; margin-top:-1px; background:#fff; border-bottom:1px solid var(--line); }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:30px; padding-bottom:30px; }
.tcell{ display:flex; align-items:center; gap:14px; }
.tcell .ic{ width:48px; height:48px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(150deg,rgba(41,171,226,.16),rgba(116,193,58,.18)); border:1px solid rgba(41,171,226,.2); box-shadow:inset 0 1px 0 #fff; }
.tcell b{ display:block; font-family:var(--font-head); font-size:15px; color:var(--ink); }
.tcell span{ font-size:var(--fs-small); color:var(--muted); }

/* ============================================================
   ABOUT + STATS
============================================================ */
.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.about-copy p{ margin-top:18px; font-weight:300; font-size:var(--fs-body); line-height:1.75; color:var(--body); max-width:540px; }
.about-copy .checks{ list-style:none; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; max-width:520px; }
.about-copy .checks li{ font-size:var(--fs-nav); color:var(--ink); display:flex; align-items:center; gap:10px; font-weight:500; }
.about-copy .checks li::before{ content:'✓'; width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#fff; background:linear-gradient(150deg,#34b6ea,#5aa525); }
.about-copy .pill{ margin-top:28px; }
.about-media{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:5/4; border:1px solid rgba(41,171,226,.2); box-shadow:0 34px 70px rgba(18,90,130,.20), inset 0 1px 0 #fff; }
.about-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); transition:transform 1s var(--ease); }
.about-media:hover img{ transform:scale(1.05); }
.about-media .ribbon{ position:absolute; top:18px; left:18px; z-index:2; padding:10px 16px; border-radius:30px; font-size:12px; font-weight:700; letter-spacing:.04em; color:#fff; background:linear-gradient(135deg,#34b6ea,#5aa525); box-shadow:0 10px 24px rgba(41,171,226,.4); }
.about-media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 60%,rgba(7,38,55,.18)); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(46px,5vw,70px); }
.stat{ padding:30px 22px; border-radius:20px; text-align:center; }
.stat b{ display:block; font-family:var(--font-head); font-weight:800; line-height:1; font-size:clamp(28px,3.6vw,46px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ display:block; margin-top:10px; font-size:var(--fs-small); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   SERVICES — sticky-stacking panels
============================================================ */
.services{ position:relative; z-index:10; background:var(--bg); }
.svc-head{ margin:0 auto; padding:clamp(70px,10vw,140px) clamp(22px,7vw,130px) clamp(10px,3vw,40px); text-align:center; max-width:820px; }
.svc-block{ position:sticky; top:0; min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr 1.25fr; gap:clamp(24px,3.5vw,58px);
  align-items:center; align-content:center; padding:clamp(56px,8vh,118px) clamp(22px,7vw,130px);
  background:
    radial-gradient(70% 60% at 84% 10%, rgba(41,171,226,.12), transparent 60%),
    radial-gradient(60% 60% at 6% 90%, rgba(116,193,58,.12), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f0f9fd 70%, #eaf6fb 100%);
  border-top:1px solid rgba(41,171,226,.18); border-radius:34px 34px 0 0; box-shadow:0 -24px 60px rgba(18,90,130,.14); }
.svc-block:first-of-type{ border-radius:0; box-shadow:none; border-top:none; }
.svc-block:nth-of-type(even) .svc-media{ order:-1; }
.svc-num{ font-family:var(--font-head); font-size:var(--fs-small); font-weight:700; letter-spacing:.18em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-title{ font-family:var(--font-head); font-weight:700; color:var(--ink); line-height:1.08; font-size:var(--fs-h3); margin:12px 0 14px; letter-spacing:-.01em; }
.svc-desc{ font-weight:300; font-size:var(--fs-body); line-height:1.65; color:var(--body); max-width:380px; margin-bottom:24px; }
.svc-list{ list-style:none; }
.svc-list li a{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-radius:13px;
  color:var(--ink); font-size:var(--fs-nav); font-weight:500; letter-spacing:.02em; border:1px solid transparent; transition:.3s var(--ease); }
.svc-list li a .dotc{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--grad); margin-right:2px; }
.svc-list li a .tx{ flex:1; }
.svc-list li a .ar{ opacity:0; transform:translateX(-8px); transition:.3s var(--ease); color:var(--blue-d); }
.svc-list li a::before{ content:''; position:absolute; inset:0; border-radius:13px; opacity:0; background:linear-gradient(120deg, rgba(41,171,226,.12), rgba(116,193,58,.10)); box-shadow:inset 0 1px 0 #fff; transition:.3s var(--ease); }
.svc-list li a:hover{ border-color:rgba(41,171,226,.3); transform:translateX(6px); box-shadow:0 12px 28px rgba(18,90,130,.12); }
.svc-list li a:hover::before{ opacity:1; }
.svc-list li a:hover .ar{ opacity:1; transform:translateX(0); }
.svc-list li a span, .svc-list li a .ar{ position:relative; z-index:1; }
.svc-media{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(41,171,226,.2); box-shadow:0 30px 60px rgba(18,90,130,.20), inset 0 1px 0 #fff; }
.svc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease), filter .5s; filter:saturate(1.06) contrast(1.02); }
.svc-media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 74% 8%, rgba(41,171,226,.16), transparent 60%), linear-gradient(180deg, transparent 62%, rgba(7,38,55,.22)); }
.svc-media::before{ content:''; position:absolute; top:0; left:-60%; width:55%; height:100%; z-index:2; background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-18deg); transition:left .85s var(--ease); pointer-events:none; }
.svc-media:hover img{ transform:scale(1.06); }
.svc-media:hover::before{ left:120%; }
.svc-media .tagchip{ position:absolute; left:16px; bottom:16px; z-index:3; padding:8px 14px; border-radius:30px; font-size:var(--fs-small); font-weight:700; letter-spacing:.05em; color:#fff; background:rgba(11,46,66,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); }
.svc-media.img-fail img{ display:none; }
.svc-media.img-fail{ background:linear-gradient(140deg,#1f9fd6,#0b2e42 60%,#57a525); }

/* ============================================================
   WHY CHOOSE US
============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wcard{ padding:32px 28px; border-radius:22px; transition:.35s var(--ease); }
.wcard:hover{ transform:translateY(-8px); border-color:rgba(41,171,226,.34); box-shadow:0 26px 54px rgba(18,90,130,.16); }
.wcard .ico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px; font-size:24px; background:linear-gradient(150deg,rgba(41,171,226,.18),rgba(116,193,58,.2)); border:1px solid rgba(41,171,226,.24); box-shadow:inset 0 1px 0 #fff; }
.wcard h3{ font-family:var(--font-head); font-size:18px; color:var(--ink); margin-bottom:10px; }
.wcard p{ font-size:var(--fs-body); line-height:1.65; color:var(--body); }

/* ============================================================
   PROCESS
============================================================ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.step{ padding:30px 24px; border-radius:20px; transition:.35s var(--ease); position:relative; }
.step:hover{ transform:translateY(-8px); border-color:rgba(41,171,226,.34); box-shadow:0 24px 50px rgba(18,90,130,.16); }
.step .n{ font-family:var(--font-head); font-size:26px; font-weight:800; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.step h3{ font-family:var(--font-head); font-size:17px; color:var(--ink); margin:14px 0 9px; }
.step p{ font-size:var(--fs-body); line-height:1.6; color:var(--body); }

/* ============================================================
   WORK / PROJECTS
============================================================ */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.work-card{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(41,171,226,.18); display:block; box-shadow:0 18px 44px rgba(18,90,130,.12); }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); filter:saturate(1.06) contrast(1.02); }
.work-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(7,34,50,.86)); }
.work-card .info{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2; }
.work-card .cat{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#aee07a; font-weight:600; }
.work-card h3{ font-family:var(--font-head); font-size:18px; color:#fff; margin-top:6px; }
.work-card .go{ opacity:0; transform:translateY(8px); transition:.35s var(--ease); color:#cdeefb; font-size:13px; margin-top:8px; display:inline-block; }
.work-card:hover img{ transform:scale(1.08); }
.work-card:hover .go{ opacity:1; transform:translateY(0); }

/* ============================================================
   TESTIMONIALS
============================================================ */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tst{ padding:32px; border-radius:22px; }
.tst .stars{ color:#f6b73c; letter-spacing:3px; font-size:15px; margin-bottom:16px; }
.tst .q{ font-size:var(--fs-body); line-height:1.7; color:var(--ink); }
.tst .who{ display:flex; align-items:center; gap:13px; margin-top:24px; }
.tst .av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; color:#fff; background:linear-gradient(150deg,#34b6ea,#5aa525); flex:0 0 auto; box-shadow:0 8px 20px rgba(41,171,226,.3); }
.tst .who b{ display:block; color:var(--ink); font-size:14.5px; } .tst .who span{ color:var(--muted); font-size:12.5px; }

/* ============================================================
   CHIPS (service areas)
============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:980px; margin:0 auto; }
.chip{ padding:12px 22px; border-radius:30px; font-size:var(--fs-nav); font-weight:500; letter-spacing:.01em; color:var(--ink); transition:.3s var(--ease); }
.chip:hover{ transform:translateY(-3px); border-color:rgba(41,171,226,.4); color:var(--blue-d); }

/* ============================================================
   CTA BAND
============================================================ */
.cta{ position:relative; z-index:10; text-align:center; padding:clamp(74px,9vw,124px) 0; overflow:hidden; background:linear-gradient(135deg,#29abe2 0%,#1f9fd6 44%,#74c13a 100%); }
.cta::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 80% at 18% 12%, rgba(255,255,255,.28), transparent 55%), radial-gradient(50% 70% at 90% 90%, rgba(255,255,255,.18), transparent 55%); }
.cta .wrap{ position:relative; z-index:2; }
.cta .h2{ color:#fff; max-width:780px; margin:0 auto; }
.cta .sub{ color:rgba(255,255,255,.92); max-width:580px; margin:18px auto 0; font-weight:400; }
.cta .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.cta .offer{ display:inline-block; margin-bottom:18px; padding:9px 18px; border-radius:30px; font-size:var(--fs-small); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1b6b8c; background:#fff; box-shadow:0 10px 26px rgba(0,40,70,.2); }

/* ============================================================
   FOOTER
============================================================ */
.foot{ position:relative; z-index:10; background:#0b2e42; color:#cfe6f2; padding:clamp(60px,7vw,92px) 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:40px; }
.foot .fb .fbrand{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.foot .fb .fbrand .badge{ height:44px; width:44px; border-radius:12px; background:#fff; padding:5px; box-shadow:inset 0 1px 0 #fff; }
.foot .fb .fbrand .badge img{ width:100%; height:100%; object-fit:contain; }
.foot .fb .fbrand b{ font-family:var(--font-head); font-weight:800; font-size:20px; color:#fff; }
.foot .fb .fbrand b em{ font-style:normal; color:var(--green-l); }
.foot .fb p{ color:rgba(207,230,242,.72); font-size:var(--fs-body); line-height:1.75; max-width:330px; }
.foot .social{ display:flex; gap:10px; margin-top:18px; }
.foot .social a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); transition:.3s var(--ease); }
.foot .social a:hover{ background:linear-gradient(150deg,#34b6ea,#5aa525); border-color:transparent; transform:translateY(-3px); }
.foot h4{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.foot li{ margin-bottom:11px; }
.foot .fcol a{ color:rgba(207,230,242,.72); font-size:var(--fs-nav); transition:color .25s; } .foot .fcol a:hover{ color:var(--green-l); }
.foot .addr{ font-size:var(--fs-nav); color:rgba(207,230,242,.72); line-height:1.85; } .foot .addr b{ color:#fff; font-weight:600; }
.foot .addr a:hover{ color:var(--green-l); }
.foot-bottom{ margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:rgba(207,230,242,.6); font-size:13px; }
.foot-bottom a:hover{ color:#fff; }

/* floating action stack — WhatsApp + back to top */
.fab{ position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; align-items:center; gap:12px; }
.wa-float{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg,#5cd06b,#25a544); color:#fff; box-shadow:0 12px 28px rgba(37,165,68,.45); transition:transform .3s var(--ease), filter .3s var(--ease); animation:wapulse 2.6s ease-in-out infinite; }
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ transform:scale(1.08); filter:brightness(1.05); }
@keyframes wapulse{ 0%,100%{ box-shadow:0 12px 28px rgba(37,165,68,.45); } 50%{ box-shadow:0 12px 40px rgba(37,165,68,.75); } }
.to-top{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--blue-d);
  background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:0 10px 24px rgba(18,90,130,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s var(--ease); }
.to-top svg{ width:20px; height:20px; }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ color:#fff; background:linear-gradient(135deg,#34b6ea,#1f9fd6 55%,#69bf46); border-color:transparent; transform:translateY(-2px); }
@media (max-width:560px){ .fab{ right:14px; bottom:14px; gap:10px; } .wa-float{ width:50px; height:50px; } .to-top{ width:42px; height:42px; } }

/* mobile menu */
.menu{ position:fixed; inset:0; z-index:120; background:linear-gradient(160deg,#0b2e42,#0e4258); display:flex; flex-direction:column; justify-content:center; padding:0 28px; opacity:0; visibility:hidden; transition:.4s var(--ease); overflow-y:auto; }
.menu.open{ opacity:1; visibility:visible; }
.menu a{ font-family:var(--font-head); font-size:clamp(20px,5vw,32px); font-weight:700; padding:8px 0; color:#fff; display:flex; gap:14px; align-items:baseline; }
.menu a .ix{ font-size:13px; color:var(--green-l); font-family:var(--font-body); }
.menu .mclose{ position:absolute; top:22px; right:24px; font-size:30px; color:#fff; }
.menu .mfoot{ margin-top:30px; font-size:13px; color:rgba(207,230,242,.7); line-height:1.9; }
.menu .mfoot b{ color:#fff; }

/* ============================================================
   REVEAL + scroll effects
============================================================ */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.left{ transform:translateX(-60px); } .reveal.right{ transform:translateX(60px); }
.reveal.left.in, .reveal.right.in{ transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }
.reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.40s }

/* ============================================================
   INNER PAGE — banner / breadcrumb
============================================================ */
.page-hero{ position:relative; min-height:clamp(360px,52vh,520px); display:flex; align-items:flex-end; overflow:hidden; background:#0b2e42; }
.page-hero .ph-bg{ position:absolute; inset:0; }
.page-hero .ph-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kenburns 14s var(--ease) forwards; }
.page-hero .ph-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(106deg, rgba(7,38,55,.92) 0%, rgba(11,66,96,.6) 48%, rgba(22,110,86,.34) 100%), linear-gradient(0deg, rgba(6,30,44,.9) 0%, rgba(6,30,44,.1) 52%); }
.page-hero .wrap{ position:relative; z-index:3; padding-top:140px; padding-bottom:clamp(34px,5vw,62px); }
.page-hero .crumb{ font-size:var(--fs-small); letter-spacing:.04em; color:rgba(205,238,251,.8); display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.page-hero .crumb a:hover{ color:#fff; } .page-hero .crumb .sep{ opacity:.5; } .page-hero .crumb .cur{ color:var(--green-l); }
.page-hero .eyebrow{ font-size:var(--fs-small); letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:#cdeefb; display:inline-flex; align-items:center; gap:12px; margin-bottom:14px; }
.page-hero .eyebrow::before{ content:''; width:30px; height:2px; border-radius:2px; background:linear-gradient(90deg,#5bc6ee,#9fd96a); }
.page-hero h1{ font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; line-height:1.04; font-size:clamp(2.1rem,5vw,3.6rem); color:#fff; max-width:16ch; text-shadow:0 4px 34px rgba(0,10,20,.4); }
.page-hero .lead{ margin-top:18px; max-width:600px; font-weight:300; font-size:clamp(15px,1.4vw,18px); line-height:1.65; color:rgba(232,245,255,.9); }

/* feature rows (alternating left / right) */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.feature + .feature{ margin-top:clamp(54px,7vw,104px); }
.feature.flip .feat-media{ order:-1; }
.feat-media{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:5/4; border:1px solid rgba(41,171,226,.2); box-shadow:0 30px 64px rgba(18,90,130,.18), inset 0 1px 0 #fff; }
.feat-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); transition:transform 1s var(--ease); }
.feat-media:hover img{ transform:scale(1.06); }
.feat-media::before{ content:''; position:absolute; top:0; left:-60%; width:55%; height:100%; z-index:2; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); transition:left .85s var(--ease); }
.feat-media:hover::before{ left:120%; }
.feat-media .tagchip{ position:absolute; left:16px; bottom:16px; z-index:3; padding:8px 14px; border-radius:30px; font-size:var(--fs-small); font-weight:700; color:#fff; background:rgba(11,46,66,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); }
.feat-copy h2{ font-family:var(--font-head); font-weight:800; font-size:var(--fs-h2); color:var(--ink); line-height:1.1; letter-spacing:-.02em; }
.feat-copy h3{ font-family:var(--font-head); font-weight:700; font-size:var(--fs-h3); color:var(--ink); margin-top:8px; }
.feat-copy p{ margin-top:16px; font-weight:300; font-size:var(--fs-body); line-height:1.75; color:var(--body); }
.feat-copy .checks{ list-style:none; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; }
.feat-copy .checks li{ font-size:var(--fs-nav); color:var(--ink); display:flex; align-items:flex-start; gap:10px; font-weight:500; line-height:1.4; }
.feat-copy .checks li::before{ content:'✓'; width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#fff; background:linear-gradient(150deg,#34b6ea,#5aa525); }
.feat-copy .pill, .feat-copy .btn{ margin-top:28px; }

/* generic richtext (page content) */
.richtext{ max-width:820px; }
.richtext p{ margin-top:16px; font-weight:300; font-size:var(--fs-body); line-height:1.8; color:var(--body); }
.richtext h2{ font-family:var(--font-head); color:var(--ink); font-size:var(--fs-h2); margin-top:34px; }
.richtext h3{ font-family:var(--font-head); color:var(--ink); font-size:var(--fs-h3); margin-top:26px; }
.richtext ul{ margin-top:16px; padding-left:0; } .richtext ul li{ position:relative; padding-left:28px; margin-top:10px; font-size:var(--fs-body); color:var(--body); }
.richtext ul li::before{ content:'✓'; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:#fff; background:linear-gradient(150deg,#34b6ea,#5aa525); }
.richtext a{ color:var(--blue-d); font-weight:600; } .richtext a:hover{ text-decoration:underline; }

/* values / mini cards grid */
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mini{ padding:30px 26px; border-radius:20px; transition:.35s var(--ease); }
.mini:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(18,90,130,.14); }
.mini .ico{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:23px; margin-bottom:16px; background:linear-gradient(150deg,rgba(41,171,226,.18),rgba(116,193,58,.2)); border:1px solid rgba(41,171,226,.24); }
.mini h3{ font-family:var(--font-head); font-size:17px; color:var(--ink); margin-bottom:9px; }
.mini p{ font-size:var(--fs-body); line-height:1.65; color:var(--body); }

/* ============================================================
   CONTACT
============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start; }
.formcard{ padding:clamp(24px,3vw,40px); border-radius:24px; }
.cform{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.field input, .field textarea, .field select{ background:rgba(255,255,255,.9); border:1px solid rgba(20,120,160,.2); border-radius:12px; padding:14px 16px; color:var(--ink); font-family:inherit; font-size:15px; transition:.3s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(41,171,226,.12); }
.field textarea{ resize:vertical; min-height:140px; }
.form-note{ grid-column:1/-1; padding:14px 16px; border-radius:12px; font-size:14px; font-weight:600; }
.form-note.ok{ background:rgba(116,193,58,.14); color:var(--green-d); border:1px solid rgba(116,193,58,.3); }
.form-note.err{ background:rgba(226,80,80,.12); color:#c0392b; border:1px solid rgba(226,80,80,.3); }
.cinfo .ci{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.cinfo .ci .ic{ width:48px; height:48px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; font-size:21px; background:linear-gradient(150deg,rgba(41,171,226,.18),rgba(116,193,58,.2)); border:1px solid rgba(41,171,226,.24); }
.cinfo .ci b{ display:block; color:var(--ink); font-size:15px; margin-bottom:5px; font-family:var(--font-head); }
.cinfo .ci span, .cinfo .ci a{ color:var(--body); font-size:var(--fs-body); line-height:1.7; display:block; }
.cinfo .ci a:hover{ color:var(--blue-d); }
.map{ border:1px solid var(--line); border-radius:22px; overflow:hidden; margin-top:clamp(40px,5vw,64px); box-shadow:0 20px 50px rgba(18,90,130,.12); }
.map iframe{ display:block; width:100%; height:360px; border:0; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px){ .rail{ display:none; } .hint{ display:none; } }
@media (max-width:980px){
  .nav, .hdr-phone, .btn-talk{ display:none; } .burger{ display:flex; }
  .trust .wrap{ grid-template-columns:1fr 1fr; gap:20px; }
  .about-grid{ grid-template-columns:1fr; gap:30px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .svc-block{ position:relative; min-height:auto; grid-template-columns:1fr; gap:24px; padding:56px 22px; border-radius:0; box-shadow:none; }
  .svc-block:nth-of-type(even) .svc-media{ order:0; }
  .svc-media{ aspect-ratio:16/10; } .svc-desc{ max-width:none; }
  .why-grid, .mini-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .work-grid, .tst-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .h-arrows{ display:none; }
  .feature{ grid-template-columns:1fr; gap:28px; } .feature.flip .feat-media{ order:0; }
  .feat-media{ aspect-ratio:16/10; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .trust .wrap{ grid-template-columns:1fr; }
  .about-copy .checks, .feat-copy .checks{ grid-template-columns:1fr; }
  .why-grid, .mini-grid, .steps, .work-grid, .tst-grid, .foot-grid{ grid-template-columns:1fr; }
  .s-stats .st:nth-child(3){ display:none; }
  .h-addr{ display:none; }
  .cform{ grid-template-columns:1fr; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   CARD SLIDER (.pt-slider)
============================================================ */
.pt-slider{ position:relative; }
.pts-vp{ overflow:hidden; }
.pts-track{ display:flex; gap:22px; transition:transform .6s var(--ease); will-change:transform; }
.pts-card{ flex:0 0 calc((100% - 44px)/3); border-radius:20px; overflow:hidden; display:block; transition:.35s var(--ease); }
.pts-card:hover{ transform:translateY(-6px); box-shadow:0 26px 54px rgba(18,90,130,.16); }
.pts-pic{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.pts-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:saturate(1.05) contrast(1.02); }
.pts-card:hover .pts-pic img{ transform:scale(1.07); }
.pts-body{ padding:22px 24px 26px; }
.pts-cat{ font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; color:var(--blue-d); font-weight:700; }
.pts-body h3{ font-family:var(--font-head); font-size:18px; color:var(--ink); margin:8px 0 10px; line-height:1.3; }
.pts-body p{ font-size:var(--fs-body); line-height:1.6; color:var(--body); }
.pts-more{ display:inline-block; margin-top:14px; font-size:var(--fs-nav); font-weight:600; color:var(--blue-d); }
.pts-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:30px; }
.pts-btn{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--blue-d);
  background:#fff; border:1px solid rgba(20,120,160,.2); box-shadow:0 10px 26px rgba(18,90,130,.12); transition:.3s var(--ease); }
.pts-btn:hover{ background:linear-gradient(135deg,#34b6ea,#1f9fd6 55%,#69bf46); color:#fff; transform:translateY(-2px); border-color:transparent; }
.pts-btn:disabled{ opacity:.4; cursor:default; transform:none; background:#fff; color:var(--blue-d); }
@media (max-width:980px){ .pts-card{ flex-basis:calc((100% - 22px)/2); } }
@media (max-width:600px){ .pts-card{ flex-basis:100%; } }

/* ============================================================
   SERVICE PAGE — extended sections
============================================================ */

/* hero call to action + quick stats */
.page-hero .ph-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.page-hero .ph-quick{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.page-hero .ph-quick .q{ padding:12px 20px; border-radius:16px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); min-width:120px;
  opacity:0; transform:translateY(16px); animation:phq .7s var(--ease) forwards; }
.page-hero .ph-quick .q:nth-child(1){ animation-delay:.25s; }
.page-hero .ph-quick .q:nth-child(2){ animation-delay:.36s; }
.page-hero .ph-quick .q:nth-child(3){ animation-delay:.47s; }
.page-hero .ph-quick .q:nth-child(4){ animation-delay:.58s; }
.page-hero .ph-quick .q b{ display:block; font-family:var(--font-head); font-weight:800; font-size:20px; color:#fff; line-height:1; }
.page-hero .ph-quick .q span{ display:block; margin-top:6px; font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase; color:rgba(214,240,252,.82); }
@keyframes phq{ to{ opacity:1; transform:none; } }

/* overview action row */
.feat-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:28px; }
.feat-actions .pill{ margin-top:0; }
.phone-pill{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--blue-d); display:inline-flex; align-items:center; gap:8px; }
.phone-pill:hover{ color:var(--green-d); }

/* what's included grid */
.incl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.incl{ display:flex; align-items:center; gap:14px; padding:20px 22px; border-radius:16px; transition:.35s var(--ease); }
.incl:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(18,90,130,.14); border-color:rgba(41,171,226,.34); }
.incl-check{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700;
  color:#fff; background:linear-gradient(150deg,#34b6ea,#5aa525); box-shadow:0 6px 16px rgba(41,171,226,.4); }
.incl-tx{ font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--ink); line-height:1.3; }

/* detailed content + sticky side card */
.rich-split{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.rich-copy .richtext{ max-width:none; margin-top:8px; }
.rich-copy .pill{ margin-top:30px; }
.rich-side{ position:sticky; top:96px; }
.side-card{ padding:30px 28px; border-radius:22px; }
.side-card h3{ font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--ink); margin-bottom:18px; }
.side-checks{ list-style:none; display:grid; gap:13px; margin:0; }
.side-checks li{ font-size:var(--fs-nav); color:var(--ink); display:flex; align-items:flex-start; gap:11px; font-weight:500; line-height:1.4; }
.side-checks li::before{ content:'✓'; flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#fff; background:linear-gradient(150deg,#34b6ea,#5aa525); }
.side-cta{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.side-call{ font-size:var(--fs-nav); font-weight:600; color:var(--blue-d); }
.side-call:hover{ text-decoration:underline; }

/* image gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px; }
.gcell{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(41,171,226,.18);
  box-shadow:0 18px 44px rgba(18,90,130,.14), inset 0 1px 0 #fff; }
.gcell:first-child{ grid-column:span 2; grid-row:span 2; }
.gcell img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); transition:transform 1s var(--ease); }
.gcell:hover img{ transform:scale(1.08); }
.gcell::before{ content:''; position:absolute; top:0; left:-60%; width:55%; height:100%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); transition:left .85s var(--ease); }
.gcell:hover::before{ left:130%; }
.gcell figcaption{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(0deg, rgba(7,38,55,.5), transparent 55%); opacity:0; transition:opacity .4s var(--ease); }
.gcell:hover figcaption{ opacity:1; }
.gtag{ padding:7px 14px; border-radius:30px; font-size:var(--fs-small); font-weight:700; color:#fff;
  background:rgba(11,46,66,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); }
.gcell.img-fail img{ display:none; }
.gcell.img-fail{ background:linear-gradient(140deg,#1f9fd6,#0b2e42 60%,#57a525); }

/* FAQ accordion */
.faq{ max-width:880px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ border-radius:16px; overflow:hidden; transition:box-shadow .35s var(--ease), border-color .35s var(--ease); }
.faq-item[open]{ box-shadow:0 22px 48px rgba(18,90,130,.14); border-color:rgba(41,171,226,.34); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q{ line-height:1.4; }
.faq-ic{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:20px; font-weight:600;
  color:#fff; background:linear-gradient(150deg,#34b6ea,#1f9fd6 55%,#69bf46); transition:transform .35s var(--ease); }
.faq-item[open] .faq-ic{ transform:rotate(45deg); }
.faq-a{ padding:0 24px 24px; }
.faq-a p{ font-weight:300; font-size:var(--fs-body); line-height:1.75; color:var(--body); }
.faq-item[open] .faq-a{ animation:faqOpen .4s var(--ease); }
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* keyword chips become links on service pages */
a.chip{ cursor:pointer; }
a.chip:hover{ background:linear-gradient(160deg, rgba(41,171,226,.14), rgba(116,193,58,.14)); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .incl-grid{ grid-template-columns:1fr 1fr; }
  .rich-split{ grid-template-columns:1fr; }
  .rich-side{ position:static; }
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; }
}
@media (max-width:560px){
  .incl-grid{ grid-template-columns:1fr; }
  .gallery{ grid-auto-rows:150px; }
  .gcell:first-child{ grid-column:span 2; grid-row:span 1; }
  .page-hero .ph-quick .q{ flex:1 1 calc(50% - 14px); min-width:0; }
}