/* ============================================================
   MOP & POP — Dubai Holiday Home Cleaning
   Visual language: Dubai Design System (cool ink, single blue
   accent, Space Grotesk / Hanken Grotesk / IBM Plex Mono,
   hairline borders, near-zero shadow, editorial restraint).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------------- Design tokens ---------------- */
:root{
  /* Ink scale */
  --ink-900:#15171c;
  --ink-700:#3c404b;
  --ink-500:#6b7180;
  --ink-300:#9aa0ad;

  /* Lines & neutral surfaces */
  --line-300:#e4e6ec;
  --line-200:#eef0f4;
  --surface-panel:#f5f6f9;
  --paper:#ffffff;
  --paper-warm:#fbfbfc;

  /* Accent — single decisive blue */
  --accent-600:#2b5fa8;
  --accent-700:#1c4a87;
  --accent-200:#cfdef2;
  --accent-100:#dfeafa;
  --accent-50:#eef3fb;
  --accent-on-dark:#7ba6e0;

  /* Status */
  --pos-600:#1f7a4d; --pos-50:#e9f5ee;
  --neg-600:#b4472f; --neg-50:#fbeee9;

  /* Semantic */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-300);
  --text-on-inverse:#dfe3ea;

  /* Type */
  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tracking-display:-0.025em;
  --tracking-label:0.18em;
  --leading-body:1.62;

  /* Radius / border / shadow */
  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:8px;
  --radius-pill:999px;
  --rule-accent:3px;
  --shadow-card:0 1px 3px rgba(21,23,28,0.06);
  --shadow-raised:0 18px 50px -28px rgba(21,23,28,0.30);

  /* Layout */
  --container:1180px;
  --gutter:clamp(20px, 5vw, 56px);
  --section-pad:clamp(64px, 9vw, 120px);
}

/* ---------------- Reset / base ---------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:600;letter-spacing:var(--tracking-display);line-height:1.04;margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent-200);color:var(--ink-900);}
:focus-visible{outline:2px solid var(--accent-600);outline-offset:3px;border-radius:2px;}

/* ---------------- Layout helpers ---------------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-pad);}
.section--tight{padding-block:clamp(48px,6vw,80px);}
.section--dark{background:var(--ink-900);color:var(--text-on-inverse);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--panel{background:var(--paper-warm);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--accent-700);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent-600);display:inline-block;}
.section--dark .eyebrow{color:var(--accent-on-dark);}
.section--dark .eyebrow::before{background:var(--accent-on-dark);}

.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px);}
.section-head h2{font-size:clamp(28px,4.2vw,46px);margin-top:18px;}
.section-head .lead{font-size:clamp(16px,1.6vw,19px);color:var(--text-muted);margin-top:18px;max-width:60ch;}
.section--dark .section-head .lead{color:#aeb5c2;}

.accent{color:var(--accent-600);}
.section--dark .accent{color:var(--accent-on-dark);}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--accent-600);--fg:#fff;--bd:var(--accent-600);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:-0.01em;
  padding:13px 22px;border-radius:var(--radius-md);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;}
.btn:hover{background:var(--accent-700);border-color:var(--accent-700);}
.btn:active{transform:translateY(1px);}
.btn--ghost{--bg:transparent;--fg:var(--ink-900);--bd:var(--line-300);}
.btn--ghost:hover{--bg:var(--surface-panel);background:var(--surface-panel);border-color:var(--ink-300);color:var(--ink-900);}
.btn--lg{padding:16px 28px;font-size:16px;}
.btn--block{width:100%;}
.section--dark .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.22);}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);color:#fff;}
.btn--wa{--bg:#1f9d5b;--bd:#1f9d5b;}
.btn--wa:hover{--bg:#188049;border-color:#188049;background:#188049;}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--accent-700);font-size:15px;}
.link-arrow svg{width:16px;height:16px;transition:transform .18s ease;}
.link-arrow:hover svg{transform:translateX(3px);}
.section--dark .link-arrow{color:var(--accent-on-dark);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line-300);box-shadow:0 1px 0 rgba(21,23,28,.02);}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-0.03em;color:var(--ink-900);}
.brand__mark{width:30px;height:30px;flex:none;}
.brand b{color:var(--accent-600);font-weight:600;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{font-size:15px;font-weight:500;color:var(--ink-700);transition:color .15s ease;}
.nav__links a:hover{color:var(--accent-700);}
.nav__cta{display:flex;align-items:center;gap:14px;}
.nav__phone{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--ink-700);letter-spacing:.01em;}
.nav__phone:hover{color:var(--accent-700);}
.nav__toggle{display:none;width:44px;height:44px;border:1px solid var(--line-300);border-radius:var(--radius-md);background:#fff;align-items:center;justify-content:center;}
.nav__toggle svg{width:22px;height:22px;color:var(--ink-900);}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden;}
.hero::before{ /* faint top accent rule echoing the DS cover */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent-600),var(--accent-200) 60%,transparent);
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;}
.hero__pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-700);background:var(--accent-50);border:1px solid var(--accent-100);
  padding:6px 13px;border-radius:var(--radius-pill);
}
.hero__pill .dot{width:6px;height:6px;border-radius:50%;background:var(--pos-600);box-shadow:0 0 0 3px var(--pos-50);}
.hero h1{font-size:clamp(40px,6.4vw,72px);line-height:0.99;margin-top:24px;letter-spacing:-0.03em;}
.hero h1 em{font-style:normal;color:var(--accent-600);}
.hero__sub{font-size:clamp(16px,1.7vw,19px);color:var(--text-muted);margin-top:24px;max-width:53ch;}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-300);}
.hero__trust .stars{color:var(--accent-600);font-size:15px;letter-spacing:2px;}
.hero__trust span{font-size:13.5px;color:var(--text-muted);}
.hero__trust b{color:var(--ink-900);font-weight:600;}
.hero__sync{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-muted);}
.hero__sync svg{width:15px;height:15px;color:var(--accent-600);}

/* Dashboard mock (the "built like software" proof) */
.mock{
  position:relative;background:#fff;border:1px solid var(--line-300);border-radius:12px;
  box-shadow:var(--shadow-raised);overflow:hidden;
}
.mock__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line-200);background:var(--paper-warm);}
.mock__dot{width:9px;height:9px;border-radius:50%;background:var(--line-300);}
.mock__title{margin-left:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);}
.mock__body{padding:18px;}
.mock__row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-500);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;}
.job{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:13px;border:1px solid var(--line-200);border-radius:var(--radius-md);margin-bottom:10px;transition:border-color .2s ease, transform .2s ease;}
.job:hover{border-color:var(--accent-200);transform:translateY(-1px);}
.job__time{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-900);text-align:center;line-height:1.3;}
.job__time small{display:block;font-weight:400;color:var(--ink-300);font-size:10px;}
.job__main{min-width:0;}
.job__title{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink-900);letter-spacing:-0.01em;}
.job__meta{font-size:12px;color:var(--ink-500);display:flex;align-items:center;gap:7px;margin-top:2px;}
.job__src{display:inline-flex;align-items:center;gap:4px;}
.chip{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-pill);white-space:nowrap;}
.chip--done{color:var(--pos-600);background:var(--pos-50);}
.chip--prog{color:var(--accent-700);background:var(--accent-50);}
.chip--queue{color:var(--ink-500);background:var(--surface-panel);}
.mock__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-200);}
.mock__foot .label{font-size:12px;color:var(--ink-500);}
.mock__foot .val{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-900);}
.mock__photos{display:flex;gap:6px;}
.mock__photo{width:34px;height:34px;border-radius:var(--radius-sm);object-fit:cover;background:linear-gradient(135deg,var(--accent-50),var(--accent-100));border:1px solid var(--line-200);position:relative;}
.mock__photo::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(43,95,168,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(43,95,168,.10) 1px,transparent 1px);background-size:8px 8px;border-radius:inherit;}
.mock__badge{position:absolute;top:-14px;right:18px;z-index:2;background:var(--ink-900);color:#fff;border-radius:var(--radius-pill);padding:8px 15px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-raised);}
.mock__badge .pulse{width:7px;height:7px;border-radius:50%;background:#5fd08e;box-shadow:0 0 0 0 rgba(95,208,142,.6);animation:pulse 2.2s infinite;}
.mock__badge span{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,208,142,.5);}70%{box-shadow:0 0 0 7px rgba(95,208,142,0);}100%{box-shadow:0 0 0 0 rgba(95,208,142,0);}}
@media (prefers-reduced-motion:reduce){.mock__badge .pulse{animation:none;}}

/* ============================================================
   LOGO / STAT STRIP
   ============================================================ */
.stripe{border-block:1px solid var(--line-300);background:var(--paper-warm);}
.stripe__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:30px clamp(16px,2.2vw,30px);border-left:1px solid var(--line-300);}
.stat:first-child{border-left:0;}
.stat__num{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,38px);color:var(--ink-900);letter-spacing:-0.03em;line-height:1;}
.stat__num .accent{color:var(--accent-600);}
.stat__cap{font-size:13px;color:var(--text-muted);margin-top:9px;}

/* ============================================================
   WRONG / RIGHT
   ============================================================ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);}
.compare__card{border:1px solid var(--line-300);border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,34px);background:#fff;}
.compare__card--right{border-color:var(--accent-200);background:var(--accent-50);}
.compare__tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.compare__card--wrong .compare__tag{color:var(--neg-600);}
.compare__card--right .compare__tag{color:var(--accent-700);}
.compare__card h3{font-size:21px;margin:14px 0 16px;}
.compare__list li{display:flex;gap:11px;padding:9px 0;font-size:15px;color:var(--text-body);border-top:1px solid var(--line-200);}
.compare__card--right .compare__list li{border-top-color:var(--accent-100);}
.compare__list li:first-child{border-top:0;}
.compare__list svg{width:18px;height:18px;flex:none;margin-top:2px;}
.compare__card--wrong .compare__list svg{color:var(--neg-600);}
.compare__card--right .compare__list svg{color:var(--pos-600);}

/* ============================================================
   STEPS — HOW IT WORKS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);counter-reset:step;}
.step{position:relative;padding-top:26px;border-top:2px solid var(--ink-900);}
.step__n{counter-increment:step;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent-700);letter-spacing:.1em;}
.step__n::before{content:"0" counter(step);}
.step__icon{width:40px;height:40px;border:1px solid var(--line-300);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:18px 0 16px;background:#fff;}
.step__icon svg{width:21px;height:21px;color:var(--accent-600);}
.step h3{font-size:18px;margin-bottom:9px;}
.step p{font-size:14.5px;color:var(--text-muted);}
.steps--dark .step{border-top-color:rgba(255,255,255,.25);}
.steps--dark .step__icon{background:transparent;border-color:rgba(255,255,255,.16);}
.steps--dark .step__icon svg{color:var(--accent-on-dark);}
.steps--dark .step h3{color:#fff;}
.steps--dark .step p{color:#aeb5c2;}
.steps--dark .step__n{color:var(--accent-on-dark);}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,18px);}
.svc{position:relative;background:#fff;border:1px solid var(--line-300);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.svc:hover{border-color:var(--accent-200);transform:translateY(-3px);box-shadow:var(--shadow-raised);}
.svc__media{position:relative;overflow:hidden;height:188px;background:var(--surface-panel);}
.svc__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.svc:hover .svc__img{transform:scale(1.05);}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,23,28,.30),rgba(21,23,28,0) 46%);}
.svc__body{padding:0 24px 26px;}
.svc__icon{width:48px;height:48px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--line-200);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;position:relative;margin:-24px 0 16px;z-index:2;}
.svc__icon svg{width:23px;height:23px;color:var(--accent-700);}
.svc h3{font-size:18px;margin-bottom:9px;}
.svc p{font-size:14.5px;color:var(--text-muted);}
.svc__tag{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent-600);border:1px solid var(--accent-700);padding:4px 9px;border-radius:var(--radius-pill);box-shadow:var(--shadow-card);}

/* ============================================================
   PRICING
   ============================================================ */
.pricing__wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;}
.price-table{border:1px solid var(--line-300);border-radius:var(--radius-lg);overflow:hidden;background:#fff;}
.price-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:20px 24px;border-top:1px solid var(--line-200);transition:background .15s ease;}
.price-row:first-child{border-top:0;}
.price-row:hover{background:var(--accent-50);}
.price-row__name{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink-900);}
.price-row__desc{font-size:13px;color:var(--text-muted);margin-top:2px;}
.price-row__amt{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--ink-900);letter-spacing:-0.02em;white-space:nowrap;}
.price-row__amt small{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--ink-500);letter-spacing:.04em;}
.price-aside h3{font-size:22px;margin-bottom:14px;}
.price-aside .incl li{display:flex;gap:10px;font-size:15px;padding:8px 0;border-top:1px solid var(--line-200);color:var(--text-body);}
.price-aside .incl li:first-child{border-top:0;}
.price-aside .incl svg{width:18px;height:18px;color:var(--pos-600);flex:none;margin-top:2px;}
.price-note{margin-top:22px;padding:16px 18px;background:var(--accent-50);border-left:3px solid var(--accent-600);border-radius:var(--radius-sm);font-size:14px;color:var(--ink-700);}
.price-note b{color:var(--ink-900);}

/* ============================================================
   PLATFORM (dark)
   ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);overflow:hidden;}
.feat{background:var(--ink-900);padding:30px clamp(20px,2.4vw,30px);}
.feat__icon{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.feat__icon svg{width:21px;height:21px;color:var(--accent-on-dark);}
.feat h3{font-size:17px;color:#fff;margin-bottom:8px;}
.feat p{font-size:14px;color:#9aa1ae;}

/* ============================================================
   WHY US
   ============================================================ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.why{padding-top:24px;border-top:1px solid var(--line-300);}
.why__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-700);}
.why h3{font-size:19px;margin:12px 0 9px;}
.why p{font-size:14.5px;color:var(--text-muted);}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,20px);}
.quote{background:#fff;border:1px solid var(--line-300);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:18px;}
.quote .stars{color:var(--accent-600);letter-spacing:2px;font-size:14px;}
.quote p{font-size:15.5px;color:var(--text-body);line-height:1.55;}
.quote__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line-200);}
.quote__avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-50);color:var(--accent-700);font-family:var(--font-display);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;}
.quote__name{display:block;font-weight:600;font-size:14.5px;color:var(--ink-900);}
.quote__role{display:block;font-size:12.5px;color:var(--text-muted);}

/* ============================================================
   COVERAGE
   ============================================================ */
.coverage{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.coverage .tag{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-700);background:#fff;border:1px solid var(--line-300);padding:8px 14px;border-radius:var(--radius-pill);transition:border-color .15s ease,color .15s ease;}
.coverage .tag:hover{border-color:var(--accent-200);color:var(--accent-700);}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line-300);}
.faq__item{border-bottom:1px solid var(--line-300);}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:0;text-align:left;padding:24px 4px;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.7vw,19px);color:var(--ink-900);letter-spacing:-0.01em;}
.faq__q .ic{width:22px;height:22px;flex:none;position:relative;}
.faq__q .ic::before,.faq__q .ic::after{content:"";position:absolute;background:var(--accent-600);border-radius:2px;transition:transform .25s ease, opacity .2s ease;}
.faq__q .ic::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-50%);}
.faq__q .ic::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-50%);}
.faq__item.is-open .ic::after{transform:translateX(-50%) scaleY(0);opacity:0;}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq__a p{padding:0 40px 24px 4px;font-size:15.5px;color:var(--text-muted);max-width:74ch;}

/* ============================================================
   CTA + FORM (dark)
   ============================================================ */
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.cta h2{font-size:clamp(30px,4.4vw,48px);color:#fff;}
.cta h2 em{font-style:normal;color:var(--accent-on-dark);}
.cta__sub{font-size:18px;color:#aeb5c2;margin-top:20px;max-width:46ch;}
.cta__list{margin-top:28px;display:grid;gap:12px;}
.cta__list li{display:flex;align-items:center;gap:11px;font-size:15px;color:#cfd4dd;}
.cta__list svg{width:18px;height:18px;color:var(--accent-on-dark);flex:none;}
.cta__contact{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

.form{background:#fff;border-radius:12px;padding:clamp(24px,2.6vw,34px);color:var(--ink-700);box-shadow:var(--shadow-raised);}
.form__head{margin-bottom:20px;}
.form__head h3,.form__success h3{color:var(--ink-900);} /* keep dark: white card inside a dark section */
.form__head h3{font-size:21px;}
.form__head p{font-size:14px;color:var(--text-muted);margin-top:6px;}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field--full{grid-column:1 / -1;}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);}
.field label .req{color:var(--accent-600);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--ink-900);
  background:var(--paper-warm);border:1px solid var(--line-300);border-radius:var(--radius-md);
  padding:11px 13px;transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;width:100%;
}
.field textarea{resize:vertical;min-height:92px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-600);background:#fff;box-shadow:0 0 0 3px var(--accent-50);}
.form__foot{margin-top:18px;}
.form__fine{font-size:12px;color:var(--text-muted);margin-top:12px;text-align:center;}
.form__success{display:none;text-align:center;padding:24px 8px;}
.form__success svg{width:46px;height:46px;color:var(--pos-600);margin:0 auto 14px;}
.form__success h3{font-size:22px;margin-bottom:8px;}
.form__success p{font-size:15px;color:var(--text-muted);}
.form.is-sent .form__body{display:none;}
.form.is-sent .form__success{display:block;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink-900);color:#9aa1ae;padding-block:clamp(48px,6vw,72px) 28px;border-top:1px solid rgba(255,255,255,.08);}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer .brand{color:#fff;}
.footer__blurb{font-size:14px;margin-top:16px;max-width:34ch;color:#9aa1ae;}
.footer__col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6e7686;font-weight:500;margin-bottom:16px;}
.footer__col a,.footer__col li,.footer__col span{display:block;font-size:14px;color:#c2c7d0;padding:5px 0;}
.footer__col a:hover{color:#fff;}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:24px;font-size:12.5px;color:#6e7686;font-family:var(--font-mono);letter-spacing:.02em;}
.footer__bottom a:hover{color:#c2c7d0;}

/* ============================================================
   DUBAI BANNER (photographic)
   ============================================================ */
.dubai-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(260px,34vw,400px);display:flex;align-items:flex-end;}
.dubai-band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dubai-band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,23,28,.90),rgba(21,23,28,.32) 58%,rgba(21,23,28,.12));}
.dubai-band__inner{position:relative;z-index:2;padding:clamp(24px,3vw,42px);max-width:640px;}
.dubai-band__inner .eyebrow{color:var(--accent-on-dark);}
.dubai-band__inner .eyebrow::before{background:var(--accent-on-dark);}
.dubai-band__inner h2{color:#fff;font-size:clamp(26px,3.4vw,40px);margin-top:16px;}
.dubai-band__inner p{color:#d3d8e0;margin-top:14px;font-size:16px;max-width:48ch;}

/* CTA night-skyline backdrop (overlay keeps text + white form legible) */
#quote{
  background-image:linear-gradient(rgba(21,23,28,.90),rgba(21,23,28,.93)),
    url('https://images.unsplash.com/photo-1526495124232-a04e1849168c?w=1600&q=78&auto=format&fit=crop');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__media{max-width:520px;margin-inline:auto;width:100%;}
  .svc-grid,.feat-grid,.why-grid,.quotes{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .pricing__wrap,.cta__grid{grid-template-columns:1fr;}
  .stripe__grid{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-300);}
  .stat:nth-child(3){border-left:0;}
  .footer__top{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav__links,.nav__phone{display:none;}
  .nav__toggle{display:inline-flex;}
  .nav__cta .btn:not(.nav__toggle){display:none;}
  .mobile-open .nav__links{display:flex;position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line-300);padding:8px var(--gutter) 20px;box-shadow:var(--shadow-raised);}
  .mobile-open .nav__links a{padding:14px 0;border-bottom:1px solid var(--line-200);font-size:17px;}
  .compare,.svc-grid,.feat-grid,.why-grid,.quotes,.form__grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero h1{font-size:clamp(34px,10vw,46px);}
}
@media (max-width:600px){
  /* avoid badge/title collision on narrow mock */
  .mock__title{display:none;}
  .mock__badge{top:-13px;right:12px;padding:7px 12px;}
}
@media (max-width:520px){
  .stripe__grid{grid-template-columns:1fr;}
  .stat{border-left:0;border-bottom:1px solid var(--line-300);}
  .stat:last-child{border-bottom:0;}
}