/* "Bold Light": the Dark site's layout, logo and copy on a light ground (Ahmed + Dr. Wael,
   12-10-2026: Dad wanted a light background). Navy #15122E ink on #FAF9FC, Dad's pink
   deepened to #D6146C wherever white text sits on it (5:1, his #FF2E88 is 3.5:1), his yellow
   box kept with navy text, navy CTA card and footer, logo in solid navy because the logo's
   own colours are the purple + green he ruled out. Loaded after site.css. */
:root {
  --night: #15122e;
  --night-2: #ffffff;
  --ink: #15122e;
  --paper: #faf9fc;
  --orange: #d6146c;      /* accent = deep pink */
  --yellow: #ffe14d;
  --muted: #4a4766;
  --ghost: rgba(21, 18, 46, 0.12);
  --line: rgba(21, 18, 46, 0.16);
  --pink: #d6146c;
  --glow: #ff2e88;
  --hard: 6px 6px 0 var(--pink);
}
html, body { background: var(--paper); }
body {
  color: var(--ink); font-family: "Rubik", "IBM Plex Sans", sans-serif;
  background-image: repeating-linear-gradient(135deg, rgba(21, 18, 46, 0.03) 0 2px, transparent 2px 24px);
}
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Rubik", sans-serif; }
.num-ltr { font-family: "Rubik", sans-serif; font-weight: 800; }

/* header: white pill, logo in navy */
.pill { background: rgba(255, 255, 255, 0.94); border-color: var(--night); box-shadow: 4px 4px 0 var(--pink); }
.plate img { width: 104px; filter: brightness(0); }
.menu { background: var(--pink); color: #fff; }
.btn-call { background: var(--pink); color: #fff; border-color: var(--pink); }
.btn-quote.btn-call { min-height: 44px; padding: 0 16px; font-size: 0.95rem; gap: 6px; }
@media (max-width: 760px) { .btn-quote.btn-call .num-ltr { display: none; } }

/* hero: soft pink glow, huge navy «عمال النظافة», phrase on a skewed yellow box */
.hero { background: transparent; color: var(--ink); padding-bottom: clamp(90px, 14vh, 150px); }
.hero > .b1 {
  position: absolute; z-index: 0; width: 900px; height: 900px; inset-inline-start: -380px; top: -320px;
  border-radius: 50%; background: radial-gradient(circle, var(--glow) 0, rgba(255, 46, 136, 0) 65%); opacity: 0.22;
  pointer-events: none;
}
.hero > .b2 { display: none; }
.hero-line { display: block; }
.hero-line .lead { display: block; font-size: clamp(3.4rem, 15vw, 8.4rem); line-height: 1.02; letter-spacing: -0.03em; }
html[lang="ar"] .hero-line .lead { line-height: 1.2; }
.hero-line .flip, .hero-line .still {
  display: inline-block; margin-top: 18px; font-size: clamp(1.9rem, 6.4vw, 4.6rem);
  background: var(--yellow); color: var(--night); padding: 0.06em 0.45em 0.16em; transform: skew(-6deg);
  box-shadow: 5px 5px 0 var(--night);
}
.hero-line .still { display: none; }
.no-flip .hero-line .still, .no-js .hero-line .still { display: inline-block; }
.no-flip .hero-line .flip, .no-js .hero-line .flip { display: none; }
.hero-line .face { color: var(--night); justify-content: center; }
.hero-sub { color: var(--muted); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.btn-ghost { color: var(--ink); border-color: var(--night); }
.btn-call.btn-big {
  min-height: 70px; padding: 0 30px; border-radius: 18px; font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  border: 0; box-shadow: 0 10px 0 rgba(21, 18, 46, 0.22);
}
.btn:hover { box-shadow: 4px 4px 0 var(--pink); }
.hero > .spark { position: absolute; z-index: 1; pointer-events: none; }
.hero > .spark svg { display: block; width: 100%; height: 100%; }
.hero > .k1 { width: 70px; height: 70px; inset-inline-end: 14vw; top: 150px; fill: var(--yellow); stroke: var(--night); stroke-width: 3px; }
.hero > .k2 { width: 34px; height: 34px; inset-inline-end: 22vw; top: 120px; fill: var(--pink); }
.hero > .k3 { width: 42px; height: 42px; inset-inline-start: 48vw; bottom: 70px; fill: var(--yellow); stroke: var(--night); stroke-width: 3px; }
.sticker { border-color: var(--night); box-shadow: 4px 4px 0 var(--pink); }
.sticker.s0 { background: var(--pink); color: #fff; }
.sticker.s1 { background: var(--yellow); color: var(--night); }
.sticker.s2 { background: #fff; color: var(--night); }
@media (min-width: 1100px) { .hero > .stickers { top: auto; bottom: 90px; } }

/* tape: pink band */
.tape { background: var(--pink); color: #fff; border: 0; border-image: none; padding-block: 18px; }
.tape-run i { color: var(--yellow); }

/* sections on the light ground; cards white with a navy edge */
.tile { background: #fff; color: var(--ink); border-color: var(--night); }
.tile-0, .tile-4 { background: var(--pink); color: #fff; }
.tile-2 { background: var(--yellow); color: var(--night); }
.tile-3 { background: #fff; color: var(--ink); }
.ico { color: inherit; }
.fill-claim .hl { background-image: linear-gradient(var(--yellow), var(--yellow)); }
.fill-after { color: var(--muted); }
.num { color: #fff; -webkit-text-stroke-color: var(--night); text-shadow: 5px 5px 0 var(--pink); }
.cta-card { background: var(--night); color: #fff; border-color: var(--night); box-shadow: 10px 10px 0 var(--pink); }
.cta p { color: rgba(255, 255, 255, 0.86); }
.cta-card .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.foot { background: var(--night); }
.foot-cols h2 { color: var(--yellow); }

/* inner pages */
.svc { background: #fff; color: var(--ink); border-color: var(--night); }
.svc-1 { background: var(--yellow); color: var(--night); }
.svc-2 { background: var(--pink); color: #fff; }
.facts li { background: #fff; border: 2px solid var(--line); color: var(--ink); }
.quote fieldset { background: #fff; border-color: var(--night); }
.field input, .field select, .field textarea { background: #fff; color: var(--night); border-color: var(--night); }
.chip span:hover { background: rgba(21, 18, 46, 0.05); }
.chip input:checked + span { background: var(--yellow); color: var(--night); border-color: var(--night); }
.form-error { color: var(--pink); }
.progress li.done, .progress li.now { border-color: var(--pink); color: var(--ink); }
.wa-card { color: var(--night); }
.wa-card li a { background: #fff8ec; }
.wa-btn { background: var(--pink); border-color: #fff; box-shadow: 4px 4px 0 var(--yellow); }
.skip { color: var(--night); }
.foot-tag, .foot-cols a, .foot-legal { color: #fff; }
.foot-tag span { color: var(--yellow); }
.btn-call { white-space: nowrap; }
@media (max-width: 420px) { .btn-call.btn-big { padding: 0 20px; font-size: 1.05rem; } }
.pause { color: var(--ink); border-color: var(--line); }

/* operating standards: white cards with a pink number */
.standards { background: transparent; color: var(--ink); }
.standards .lede { color: var(--muted); }
.std li { background: #fff; border-color: var(--line); }
.std p { color: var(--muted); }
.std-n { color: var(--pink); }