/*
Theme Name: CellMission
Theme URI: https://cellmission.ae
Author: CellMission
Author URI: https://cellmission.ae
Description: Custom WordPress theme for CellMission — Dubai device repair service centers, on-site and pickup & drop-off repair for phones, laptops, tablets and gaming consoles.
Version: 6.65.0-dots-overlaid-on-slide
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cellmission
*/

:root{
  --red:#E4262E;
  --red-dark:#B81820;
  --red-tint:#FCEAEB;
  --ink:#17181B;
  --ink-soft:#232427;
  --gray-light:#F2F1F1;
  /* Real PageSpeed fix: the previous --gray-mid (#6E7075) measured 4.96:1
     against white — a hair over the 4.5:1 AA minimum — but only
     4.40:1 against --gray-light (#F2F1F1), which is what it actually
     sits on in several places (e.g. the inactive "By Pickup" pricing
     tab, which PageSpeed flagged by name). Darkened so every real
     use of this color passes AA with a safe margin: 5.85:1 on
     --gray-light, 6.60:1 on white. */
  --gray-mid:#5B5D61;
  --gray-border:#E1E0E0;
  --white:#FFFFFF;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); color:var(--ink); background:var(--white); line-height:1.55; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
svg{ max-height:56px; } /* safety net: keeps icon SVGs from rendering at their raw intrinsic size if a more specific rule fails to load; components with legitimately larger graphics (.promo-graphic, .hero-visual-fallback svg) override this. */
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.1; letter-spacing:-0.01em;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
main{display:block;}
.screen-reader-text{position:absolute; left:-9999px;}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Section label ---------- */
/* Quiet, plain-case label with a single accent dot — replaces the old
mono/uppercase/underlined "ticket" treatment, which repeated the exact
same loud chrome above every section on every page. The heading below
it is what should carry attention; this just points at it. */
.ticket{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:15px; font-weight:600;
  /* Real PageSpeed fix: var(--red) (#E4262E) only measures 4.04:1 on
     the light-gray section background (--gray-light) these labels
     sit on — under the 4.5:1 AA minimum for text. --red-dark is the
     same brand red family already in the palette (used for hover/
     active states) and clears 5.84:1 here, so the label keeps its
     color identity while actually being readable. */
  color:var(--red-dark);
}
.ticket::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--red-dark); flex-shrink:0;
}
.dark-bg .ticket{ color:#FF9B9E; }
.dark-bg .ticket::before{ background:#FF9B9E; }

/* Large faint watermark numeral, used behind a section heading */
.eyebrow-num{
  font-family:var(--display); font-weight:700; font-size:120px; line-height:1;
  position:absolute; top:-30px; left:-6px; z-index:0;
  color:transparent; -webkit-text-stroke:1px var(--gray-border);
  user-select:none; pointer-events:none;
}
.dark-bg .eyebrow-num{ -webkit-text-stroke:1px rgba(255,255,255,.12); }

/* ---------- Sticky action rail ---------- */
.rail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px;
  z-index:60;
  /* Requested specifically: this floating rail shouldn't be visible
  the instant a page loads — it competes with the homepage's own
  WhatsApp booking button right at the top. Starts hidden, fades in
  once scrolled past the hero, via .rail-visible below (toggled by
  a scroll listener). Hidden with opacity + pointer-events rather than
  display:none so the fade transition actually has something to
  animate, and so it can never intercept a tap while invisible. */
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.rail.rail-visible{ opacity:1; pointer-events:auto; }
.rail a{
  width:46px; height:46px; border-radius:50%;
  background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
  box-shadow:0 6px 16px rgba(228,38,46,.35);
  transition:transform .15s ease, background .15s ease;
}
.rail a:hover{ background:var(--red-dark); transform:scale(1.06); }
.rail a:active{ background:var(--red-dark); transform:scale(.96); }
.rail svg{ width:20px; height:20px; }

/* ---------- Bottom mobile nav ---------- */
.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--white); border-top:1px solid var(--gray-border);
  box-shadow:0 -6px 20px rgba(23,24,27,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
.bn-inner{ display:flex; align-items:flex-end; justify-content:space-around; padding:10px 6px 8px; }
.bn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--gray-mid); font-size:11px; font-weight:700; text-align:center;
  padding:2px 2px 0;
}
.bn-item svg{ width:23px; height:23px; }
.bn-item.active{ color:var(--red); }
.bn-item.bn-primary{ color:var(--ink); margin-top:-30px; }
.bn-item.bn-primary .bn-icon{
  width:54px; height:54px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  border:4px solid var(--white); box-shadow:0 8px 18px rgba(228,38,46,.4);
  margin-bottom:2px;
}
.bn-item.bn-primary .bn-icon svg{ width:22px; height:22px; }
@media (max-width:859px){
  .bottom-nav{ display:block; }
  body{ padding-bottom:74px; }
  .rail{ top:auto; bottom:100px; transform:none; }
  .rail a:nth-child(3){ display:none; }
}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--gray-border);
}
.headbar{ display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px; }
.logo{ display:flex; align-items:center; gap:2px; font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); position:absolute; left:50%; transform:translateX(-50%); }
.logo img, .logo .custom-logo{ max-height:40px; max-width:180px; width:auto; height:auto; object-fit:contain; }
.logo .custom-logo-link{ display:flex; align-items:center; }
.logo .dot{ color:var(--red); }

/* Wraps an uploaded logo image in a small white pill when it sits on a
dark background (footer, promo banners) — an uploaded logo can't
"become white" the way the text wordmark does just by inheriting a
white text color, so this keeps it visible regardless of the logo's
own colors, instead of risking it disappearing into a dark background
it was never designed against. Has no effect when the text fallback
is showing (no image inside), since the fallback text already has its
own correct white color from .banner-logo/.foot-logo. */
.brand-mark-chip{ display:inline-flex; }
.brand-mark-chip img{ background:#fff; padding:6px 10px; border-radius:8px; max-height:32px; width:auto; display:block; }
.headbar{ position:relative; }
nav.primary-nav{ display:none; }
.navlinks{ display:flex; gap:32px; font-size:14.5px; font-weight:500; }
.navlinks a{ color:var(--gray-mid); transition:color .15s ease; }
.navlinks a:hover{ color:var(--ink); }
.head-cta{ display:none; }
.head-icons{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.head-search button, .head-track{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); background:none; border:none;
  transition:background .15s ease;
  transition:background .15s ease;
}
.head-search button:hover, .head-track:hover{ background:var(--gray-light); }
.head-search button:active, .head-track:active{ background:var(--gray-border); }
.head-search svg, .head-track svg{ width:20px; height:20px; }
.lang-switch{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:var(--ink); font-weight:700; font-size:13px; transition:background .15s ease; }
.lang-switch:hover{ background:var(--gray-light); }
.lang-switch-mobile{ display:block; text-align:center; padding:14px 0; font-size:16px; border-bottom:1px solid var(--gray-border); color:var(--red); font-weight:700; }
.head-search{ display:flex; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14.5px; padding:13px 24px;
  border-radius:999px; border:1.5px solid transparent;
  transition:all .15s ease; white-space:nowrap;
}
.btn-primary{ background:var(--red); color:var(--white); box-shadow:0 6px 16px rgba(228,38,46,.28); }
.btn-primary:hover{ background:var(--red-dark); color:var(--white); box-shadow:0 8px 20px rgba(228,38,46,.34); transform:translateY(-1px); }
.btn-primary:active{ background:var(--red-dark); box-shadow:0 2px 8px rgba(228,38,46,.3); transform:translateY(0) scale(.97); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); }
.btn-outline:active{ background:var(--ink); color:var(--white); transform:scale(.97); }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:var(--white); }
.btn-outline-light:hover{ background:var(--white); color:var(--ink); }
.burger{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gray-border); border-radius:8px; background:none; color:var(--ink); }
.burger svg{ width:20px; height:20px; }
.burger:active{ background:var(--gray-light); }

.mobile-menu{
  display:none; position:fixed; inset:60px 0 0 0; background:var(--white); z-index:49;
  padding:28px 24px; overflow-y:auto;
}
.mobile-menu.open{ display:block; }
.mobile-menu ul{ list-style:none; }
.mobile-menu a{ display:block; padding:14px 0; font-size:16px; font-weight:600; border-bottom:1px solid var(--gray-border); }
.mobile-menu .btn{ width:100%; margin-top:24px; }
.mm-heading{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-mid); margin-top:22px; }
.mm-heading:first-child{ margin-top:0; }
.mm-list a{ padding:12px 0; font-size:15px; }

/* ---------- Hero (legacy — kept for any page still referencing it) ---------- */
.hero{
  position:relative; color:var(--white); overflow:hidden; padding-top:64px;
  background:var(--ink);
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(700px 420px at 12% 0%, rgba(228,38,46,.16), transparent 60%);
}
.hero-grid{ position:relative; z-index:2; padding-bottom:120px; display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1.05fr 0.95fr; gap:56px; } }
.hero-eyebrow{ margin-bottom:20px; }
.hero-eyebrow .ticket{ color:#FF6B6F; border-bottom-color:#FF6B6F; }
.hero h1{ font-size:clamp(34px,6vw,60px); max-width:14ch; color:var(--white); }
.hero h1 .accent{ color:var(--red); }
.hero p.lead{ margin-top:20px; max-width:46ch; color:rgba(255,255,255,.78); font-size:17px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* ---------- Hero visual panel ---------- */
.hero-visual{
  position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  background:linear-gradient(155deg, var(--ink-soft) 0%, #2A0B0D 100%);
  border:1px solid rgba(255,255,255,.08);
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .hero-visual-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.hero-visual .hero-visual-fallback svg{ width:62%; max-width:260px; }
.hero-visual-badge{
  position:absolute; left:18px; bottom:18px;
  display:flex; align-items:center; gap:10px;
  background:rgba(23,24,27,.75); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:10px 16px 10px 10px;
}
.hero-visual-badge .dot{ width:34px; height:34px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-visual-badge .dot svg{ width:16px; height:16px; color:var(--white); }
.hero-visual-badge span{ font-size:13px; font-weight:600; color:var(--white); }
@media (max-width:899px){ .hero-visual{ aspect-ratio:16/10; } }

.stat-row{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--gray-border);
  margin-top:-72px;
  border-radius:14px; overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.stat-card{ background:var(--red-tint); padding:26px 22px; }
.stat-card.red{ background:var(--red); color:var(--white); }
.stat-num{ font-family:var(--display); font-size:30px; font-weight:700; color:var(--red-dark); }
.stat-card.red .stat-num{ color:var(--white); }
.stat-label{ font-size:13.5px; color:var(--gray-mid); margin-top:4px; }
.stat-card.red .stat-label{ color:rgba(255,255,255,.85); }
@media (min-width:700px){ .stat-row{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Promo hero (card carousel) ---------- */
.promo-hero{ padding-top:0; }
.promo-carousel{ position:relative; }
.promo-scroller{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.promo-scroller::-webkit-scrollbar{ display:none; }
/* Full-bleed photo hero, capped to roughly one phone screen's height
(min() against a vh figure, with an svh fallback line for browsers
that support it, so mobile address-bar resizing doesn't jump the
layout). Text and the category icon row both sit ON TOP of the photo
(absolutely positioned against this box), not stacked below it —
that's what keeps the whole hero within that capped height instead of
growing with the content. */
.promo-card{
  scroll-snap-align:start; scroll-snap-stop:always; flex:0 0 100%; max-width:none;
  position:relative; overflow:hidden;
  height:min(58vh, 460px);
  height:min(58svh, 460px);
  min-height:380px;
  background:var(--ink);
}
.promo-card.promo-card--no-media{
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
}
.promo-card-media{ position:absolute; inset:0; line-height:0; overflow:hidden; }
.promo-card-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
/* Dark gradient behind the overlaid text/icons for legibility — fully
transparent at the top of the photo so the photo itself stays clean,
solid by the bottom where the category row sits. */
.promo-card-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,12,.82) 0%, rgba(10,10,12,.5) 38%, rgba(10,10,12,0) 68%);
}
.promo-card-content{
  position:absolute; left:0; right:0; bottom:66px; z-index:2; text-align:center;
  padding:0 20px;
}
.promo-card.promo-card--no-media .promo-card-content{ position:static; padding:28px 24px; }
@media (min-width:640px){
  .promo-card-content{ bottom:84px; padding:0 40px; }
  .promo-card.promo-card--no-media .promo-card-content{ padding:40px 40px; }
}
.promo-eyebrow{
  display:inline-block; background:var(--red); color:var(--white);
  font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px;
  margin-bottom:8px;
}
.promo-card h3{ color:var(--white); font-size:clamp(20px,4.2vw,32px); max-width:20ch; margin-left:auto; margin-right:auto; font-family:var(--display); font-weight:700; line-height:1.14; letter-spacing:-0.01em; }
.promo-card p{ color:rgba(255,255,255,.85); font-size:13.5px; margin-top:6px; max-width:36ch; margin-left:auto; margin-right:auto; }
/* "Book via WhatsApp" trigger, now inside the slide itself (was its
own block below the whole carousel) — sized down from the standalone
version to fit the overlay without dominating the heading/text above
it, same red used everywhere else on the card. */
.promo-card-whatsapp-trigger{
  margin:14px auto 0; max-width:300px; padding:12px 18px; font-size:13.5px;
  box-shadow:0 6px 16px rgba(228,38,46,.35);
}
/* Category icon row: the former standalone top-menu section, now
overlaid flush with the bottom edge of the hero photo instead of
taking up its own space above the carousel. */
.promo-card-categories{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:stretch;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
}
.promo-card.promo-card--no-media .promo-card-categories{ position:static; }
.promo-cat-item{
  flex:1; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; color:var(--white); font-size:10.5px; font-weight:600; line-height:1.15;
}
.promo-cat-item + .promo-cat-item::before{
  content:''; position:absolute; left:0; top:12%; bottom:12%; width:1px;
  background:rgba(255,255,255,.3);
}
.promo-cat-icon{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.promo-cat-icon svg{ width:19px; height:19px; }
@media (min-width:640px){
  .promo-card-categories{ padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .promo-cat-item{ font-size:12.5px; gap:6px; }
  .promo-cat-icon{ width:27px; height:27px; }
  .promo-cat-icon svg{ width:22px; height:22px; }
}

.promo-arrow{
  display:none; position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; z-index:4;
  align-items:center; justify-content:center;
  background:var(--white); color:var(--ink); border:1px solid var(--gray-border);
  box-shadow:0 10px 20px rgba(23,24,27,.12);
  transition:background .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.promo-arrow:hover{ background:var(--gray-light); transform:translateY(-52%) scale(1.06); box-shadow:0 12px 24px rgba(23,24,27,.16); }
.promo-arrow:active{ background:var(--gray-border); transform:translateY(-50%) scale(.94); }
.promo-arrow svg{ width:20px; height:20px; }
.promo-arrow.prev{ left:8px; }
.promo-arrow.next{ right:8px; }
@media (min-width:700px){ .promo-arrow{ display:flex; } }

/* Moved back onto the photo itself, overlaid above the category icon
row — this theme is still using .promo-carousel{position:relative}
with .promo-dots as its direct sibling to .promo-scroller, so the
dots already sit correctly over whichever slide is in view without
needing to move in the markup, only in position/color: white/translucent
dots (not gray-on-white) so they actually show up against the dark
photo scrim, sized up slightly to stay legible there. */
.promo-dots{
  position:absolute; left:0; right:0; bottom:60px; z-index:3;
  display:flex; justify-content:center; gap:4px;
}
@media (min-width:640px){ .promo-dots{ bottom:78px; } }
/* Real accessibility fix: the dot itself is small, but the tap target
needs to be a proper size. The button's own box is 24x24 (a proper tap
target) with the small visible dot drawn as a centered ::after, so the
dot still looks the same size on screen. */
.promo-dots button{
  position:relative; width:24px; height:24px; padding:0; border:none;
  background:none; cursor:pointer;
}
/* Real request: all dots the same uniform round size — no stretched
pill shape for the active one — with a soft scale-pop on the active
dot (eased, matching the carousel's own glide timing) so the change
reads as a smooth transition rather than an instant color flip. */
.promo-dots button::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1);
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.45);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.promo-dots button.active::after{ background:var(--red); transform:translate(-50%,-50%) scale(1.3); }
.promo-copy{ margin-top:0; }
/* One deliberate entrance moment for the page — the hero content
fades and lifts in on load, giving the site a moment of life on
arrival without scattering the same effect down every section.
Already covered by the global prefers-reduced-motion rule above,
which forces every animation-duration near-zero for those visitors. */
@keyframes cm-hero-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.promo-copy > *{ animation:cm-hero-in .6s ease both; }
.promo-copy > *:nth-child(2){ animation-delay:.08s; }
.promo-copy > *:nth-child(3){ animation-delay:.16s; }
.promo-copy > *:nth-child(4){ animation-delay:.24s; }
.promo-copy h1{ font-size:clamp(32px,5.5vw,50px); max-width:14ch; font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-0.015em; }
.promo-copy p{ margin-top:14px; max-width:52ch; color:var(--gray-mid); font-size:15.5px; }
.promo-copy .btn{ margin-top:22px; }

.promo-lower{ margin-top:32px; display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
/* Scoped specifically to the homepage's WhatsApp-form-then-promo-lower
adjacency, rather than changing .promo-lower's own margin-top globally
— that class is shared across four other templates that don't have
this form before them, so a blanket change here would have tightened
spacing on pages where it was never an issue. Targets the actual
outer wrap sibling directly (added as its own class) rather than the
ID nested inside it, which isn't the real adjacent element. */
.whatsapp-quickform-outer-wrap + .promo-lower{ margin-top:10px; }
.promo-image{ order:-1; border-radius:20px; overflow:hidden; }
/* Real fix: object-fit:cover plus a forced max-height was cropping the
top/bottom off the illustration to force it into a fixed box — the
opposite of what's wanted. height:auto respects the image's own actual
shape, so the whole thing always shows, uncropped, at whatever height
that naturally works out to. */
.promo-image img{ width:100%; height:auto; display:block; }
.promo-image svg{ width:100%; height:auto; display:block; }

/* Dedicated container for the small circular topic illustrations (service/
sell pages) — genuinely square content, unlike the homepage hero photo/
illustration that .promo-image was built for. Reusing .promo-image's
fixed wide-short height on a square SVG left it letterboxed — small and
stranded in a lot of empty space either side. Same reliable technique
already proven for the homepage hero illustration: width:100% with
height:auto lets the SVG's own 1:1 viewBox determine its height
naturally, rather than trying to stretch it to fill a separately-sized
parent box — that approach kept fighting a global svg{max-height:56px}
safety-net rule elsewhere in this file in ways that were unreliable to
fully override. */
.topic-illustration{ width:100%; max-width:460px; margin:0 auto; }
.topic-illustration svg{ width:100%; height:auto; max-height:none; display:block; }
@media (min-width:860px){
  .promo-lower{ grid-template-columns:1.05fr 0.95fr; gap:48px; }
  .promo-image{ order:0; }
  /* The homepage hero carousel itself (.promo-scroller/.promo-card)
  intentionally keeps its one-full-width-slide-at-a-time behavior at
  every screen size now — a full-bleed photo slide is the point of the
  new design, so it isn't switched to a multi-column grid on desktop
  the way the old small cards were. Arrows and dots stay visible here
  for exactly that reason. */
}

/* ---------- Quick Access ---------- */
.qa-section{ background:var(--gray-light); border-radius:24px; padding:32px 20px; }
.qa-section h2{ font-size:22px; padding:0 4px; }
.qa-grid{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qa-tile{
  display:flex; align-items:center; gap:14px;
  background:var(--white); border-radius:16px; padding:18px 16px;
  font-weight:700; font-size:14.5px; color:var(--ink);
  transition:box-shadow .15s ease, transform .15s ease;
  box-shadow:0 1px 3px rgba(23,24,27,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.qa-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(23,24,27,.08); }
.qa-tile:active{ transform:translateY(0) scale(.98); box-shadow:0 2px 6px rgba(23,24,27,.06); }
.qa-tile svg{ width:24px; height:24px; color:var(--red); flex-shrink:0; }
.qa-tile.wide{ grid-column:1 / -1; justify-content:center; text-align:center; }

/* ---------- Tabs + plan carousel ---------- */
.tabs-row{ display:inline-flex; background:var(--gray-light); border-radius:999px; padding:4px; margin-top:56px; }
.tab-btn{ padding:11px 22px; border-radius:999px; font-weight:700; font-size:14px; color:var(--gray-mid); border:none; background:none; }
.tab-btn.active{ background:var(--white); color:var(--ink); box-shadow:0 4px 10px rgba(0,0,0,.06); }
.plan-scroller{ display:flex; gap:16px; overflow-x:auto; margin-top:24px; padding-bottom:8px; scrollbar-width:none; }
.plan-scroller::-webkit-scrollbar{ display:none; }
.plan-card{ flex:0 0 240px; border:1px solid var(--gray-border); border-radius:18px; padding:22px; background:var(--white); box-shadow:0 1px 3px rgba(23,24,27,.04); transition:box-shadow .15s ease, transform .15s ease; }
.plan-card:hover{ box-shadow:0 14px 26px rgba(23,24,27,.08); transform:translateY(-2px); }
.plan-card:active{ box-shadow:0 2px 6px rgba(23,24,27,.06); transform:translateY(0) scale(.98); }
.plan-icon{ width:46px; height:46px; border-radius:12px; background:var(--red-tint); display:flex; align-items:center; justify-content:center; }
.plan-icon svg{ width:22px; height:22px; color:var(--red); }
.plan-card h3{ font-family:var(--body); font-size:16px; margin-top:16px; }
.plan-price-label{ font-size:12.5px; color:var(--gray-mid); margin-top:14px; }
.plan-price{ font-family:var(--display); font-size:18px; font-weight:700; margin-top:2px; }
.plan-arrow{ width:40px; height:40px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; margin-top:16px; }
.plan-arrow svg{ width:16px; height:16px; color:var(--white); }

/* ---------- Promo banner ---------- */
.banner-promo{
  background:linear-gradient(120deg, var(--red) 0%, var(--red-dark) 65%, var(--ink) 130%);
  border-radius:22px; padding:36px 26px; position:relative; overflow:hidden;
}
.banner-promo .banner-logo{ font-family:var(--display); font-weight:700; font-size:19px; color:var(--white); }
.banner-promo .banner-logo .dot{ color:#FFD1D3; }
.banner-promo h3{ color:var(--white); font-size:clamp(22px,4vw,28px); margin-top:18px; max-width:16ch; }
.banner-promo .btn{ margin-top:24px; background:var(--white); color:var(--ink); }
.banner-promo .btn:hover{ background:var(--gray-light); }

/* ---------- Discover devices ---------- */
/* Screen Guard Fitting — dedicated homepage section */
.screen-guard-banner{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.screen-guard-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.screen-guard-list li{ position:relative; padding-inline-start:26px; font-size:14.5px; color:var(--ink); }
.screen-guard-list li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:var(--red); font-weight:700; }
/* Real fix, not just a bigger number: max-width:420px never actually
applied on mobile — the .wrap padding around it (24px each side) was
the actual limit, capping this to roughly 342px regardless of what
max-width said. A negative-margin breakout alone didn't resolve this
either — confirmed by direct measurement that CSS Grid items don't
reliably honor a negative-margin overflow the way normal block
elements do, silently clamping it back to the track width. Moving the
breakout styling onto an inner wrapper (one level below the actual
grid item) sidesteps that Grid-specific constraint entirely — verified
this by measuring the actual rendered width before and after. */
.screen-guard-visual{ width:100%; }
.screen-guard-visual-inner{ width:calc(100% + 48px); max-width:480px; margin:0 -24px; }
.screen-guard-visual-inner svg{ max-height:none; }
@media (min-width:860px){
  .screen-guard-banner{ grid-template-columns:1.1fr 0.9fr; gap:48px; }
  .screen-guard-visual-inner{ width:100%; max-width:100%; margin:0; }
}

/* Trust stats bar — real numbers only (see cellmission_trust_stats()) */
.trust-stats{ padding:8px 0 40px; }
.trust-stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink); border-radius:20px; overflow:hidden; }
.trust-stats-count-1{ grid-template-columns:1fr; }
.trust-stats-count-3{ grid-template-columns:1fr 1fr; }
.trust-stat{ background:var(--ink); padding:28px 16px; text-align:center; }
.trust-stat-value{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(26px,5vw,36px); color:var(--white); }
.trust-stat-label{ display:block; margin-top:6px; font-size:13px; color:rgba(255,255,255,.82); }
@media (min-width:640px){
  .trust-stats-grid{ grid-template-columns:repeat(4,1fr); }
  .trust-stats-count-1{ grid-template-columns:1fr; }
  .trust-stats-count-2{ grid-template-columns:1fr 1fr; }
  .trust-stats-count-3{ grid-template-columns:repeat(3,1fr); }
}

.discover-heading{ font-size:clamp(24px,4vw,34px); }
/* Real contrast fix: --gray-border (#E1E0E0) is meant for hairlines, not
text — on a white background it fails WCAG contrast outright. gray-mid
still reads as visually "muted" next to the full-black heading text,
but is actually legible. */
.discover-heading .muted{ color:var(--gray-mid); }
.discover-scroller{ display:flex; gap:16px; overflow-x:auto; margin-top:28px; padding-bottom:8px; scrollbar-width:none; }
.discover-scroller::-webkit-scrollbar{ display:none; }
.discover-tile{ flex:0 0 140px; text-align:center; display:block; }
.discover-tile-img{
  width:140px; height:140px; border-radius:18px; background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.discover-tile-img svg{ width:56px; height:56px; color:var(--red); }
.discover-tile span{ display:block; margin-top:12px; font-weight:700; font-size:14.5px; transition:color .2s ease; }
/* Now a real link (was a non-clickable div) — hover/active feedback so
it reads as clickable, matching the lift-and-glow pattern used on the
promo-arrow and cert-card elsewhere in this theme. */
.discover-tile:hover .discover-tile-img{ background:var(--red-tint); transform:translateY(-3px); box-shadow:0 8px 20px rgba(228,38,46,.14); }
.discover-tile:hover span{ color:var(--red); }
.discover-tile:active .discover-tile-img{ transform:translateY(0) scale(.96); }
.discover-link{ display:inline-block; margin-top:24px; color:var(--red); font-weight:700; font-size:14.5px; }

/* ---------- Get Support ---------- */
.support-section{ background:var(--gray-light); border-radius:24px; padding:32px 20px; }
.support-grid{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.support-tile{
  background:var(--white); border-radius:16px; padding:26px 18px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  font-weight:700; font-size:14.5px; color:var(--ink);
  transition:box-shadow .15s ease, transform .15s ease;
  box-shadow:0 1px 3px rgba(23,24,27,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.support-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(23,24,27,.08); }
.support-tile:active{ transform:translateY(0) scale(.98); box-shadow:0 2px 6px rgba(23,24,27,.06); }
.support-tile svg{ width:26px; height:26px; color:var(--red); }
.support-tile.wide{ grid-column:1 / -1; }
@media (min-width:640px){ .qa-grid, .support-grid{ grid-template-columns:repeat(3,1fr); } .qa-tile.wide, .support-tile.wide{ grid-column:auto; } }

/* ---------- FAQ accordion ---------- */
.faq-list{ margin-top:28px; border-top:1px solid var(--gray-border); }
.faq-item{ border-bottom:1px solid var(--gray-border); padding:18px 0; }
.faq-item summary{
  cursor:pointer; list-style:none; font-weight:700; font-size:15.5px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--red-tint); color:var(--red); font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:14px; color:var(--gray-mid); font-size:14.5px; max-width:64ch; }

/* Staff dashboard order rows (reuses .cert-card as a <details> element) */
.cert-card summary::-webkit-details-marker{ display:none; }
.cert-card summary{ outline:none; }

/* ---------- Staff Dashboard ---------- */
.staff-header{ background:var(--ink); color:var(--white); border-radius:16px; padding:20px 22px; margin-top:16px; }
.staff-header .role-badge{ display:inline-block; background:var(--red); color:var(--white); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:999px; margin-left:8px; }
.staff-header p{ color:rgba(255,255,255,.6); font-size:13.5px; margin-top:4px; }

.staff-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
@media (min-width:640px){ .staff-stats{ grid-template-columns:repeat(5,1fr); } }
.staff-stat{ background:var(--gray-light); border-radius:12px; padding:14px 12px; text-align:center; }
.staff-stat .num{ font-family:var(--display); font-weight:700; font-size:22px; color:var(--ink); }
.staff-stat .label{ font-size:11px; color:var(--gray-mid); margin-top:2px; line-height:1.3; }

.staff-filter{ margin-top:24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.staff-filter label{ font-size:13px; font-weight:700; color:var(--gray-mid); }
.staff-filter select{ border:1.5px solid var(--gray-border); border-radius:8px; padding:8px 12px; font-size:16px; }
.staff-filter-form{ margin-top:22px; background:var(--gray-light); border-radius:14px; padding:18px; }

.staff-list{ margin-top:16px; border:1px solid var(--gray-border); border-radius:14px; overflow:hidden; }
.staff-row{ border-bottom:1px solid var(--gray-border); background:var(--white); }
.staff-row:last-child{ border-bottom:none; }
.staff-row summary{ cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; list-style:none; }
.staff-row summary::-webkit-details-marker{ display:none; }
.staff-row .ref{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink); }
.staff-row .cust{ font-weight:700; font-size:14px; }
.staff-row .meta{ color:var(--gray-mid); font-size:13px; }
.staff-row .status-badge{ margin-left:auto; }
.staff-row[open]{ background:var(--gray-light); }

.status-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }

/* Order progress timeline (customer-facing: Track Repair, My Account) */
.order-timeline{ width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; margin-top:18px; padding:2px 2px 8px; box-sizing:border-box; -webkit-overflow-scrolling:touch; }
.ot-track{ display:flex; align-items:flex-start; min-width:min-content; }
.ot-step{ display:flex; flex-direction:column; align-items:center; flex:0 0 78px; width:78px; box-sizing:border-box; position:relative; text-align:center; }
/* Each step draws only its own two connector half-segments — from its own left edge to its dot center, and from its dot center to its own right edge — so a line segment is never wider than the single step box that owns it, and can never spill into a neighbor or outside the card. Together, one step's right half plus the next step's left half form one complete connecting line. */
.ot-step:not(:first-child)::before{ content:""; position:absolute; top:11px; left:0; width:50%; height:2px; background:var(--gray-border); }
.ot-step:not(:last-child)::after{ content:""; position:absolute; top:11px; right:0; width:50%; height:2px; background:var(--gray-border); }
.ot-step.ot-done:not(:first-child)::before, .ot-step.ot-current:not(:first-child)::before{ background:var(--red); }
.ot-step.ot-done:not(:last-child)::after{ background:var(--red); }
.ot-dot{ width:24px; height:24px; border-radius:50%; background:var(--gray-light); border:2px solid var(--gray-border); display:flex; align-items:center; justify-content:center; color:var(--white); position:relative; z-index:1; flex-shrink:0; }
.ot-dot svg{ width:13px; height:13px; }
.ot-step.ot-done .ot-dot{ background:var(--red); border-color:var(--red); }
.ot-step.ot-current .ot-dot{ background:var(--white); border-color:var(--red); border-width:3px; box-shadow:0 0 0 4px var(--red-tint); }
.ot-label{ margin-top:8px; font-size:10.5px; font-weight:600; color:var(--gray-mid); line-height:1.25; padding:0 3px; word-break:break-word; }
.ot-step.ot-current .ot-label{ color:var(--ink); font-weight:700; }
.ot-step.ot-done .ot-label{ color:var(--ink); }
@media (min-width:480px){
  .ot-step{ flex-basis:88px; width:88px; }
  .ot-label{ font-size:11px; }
}
.status-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sb-new{ background:#EEF1FF; color:#4A5CC7; }
.sb-progress{ background:#FFF4E0; color:#B4780A; }
.sb-attention{ background:var(--red-tint); color:var(--red-dark); }
.sb-done{ background:#E5F7EC; color:#1E8A4C; }
.sb-cancelled{ background:var(--gray-light); color:var(--gray-mid); }

.staff-detail{ padding:0 16px 18px; }
.staff-detail .divider{ border-top:1px solid var(--gray-border); padding-top:14px; margin-top:14px; }
.staff-log{ margin-top:16px; padding-top:16px; border-top:1px solid var(--gray-border); }
.staff-log-title{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-mid); }
.staff-log-entry{ font-size:12.5px; margin-top:8px; }
.staff-log-entry .who{ font-weight:700; }
.staff-log-entry .when{ color:var(--gray-mid); }
/* 88px top+bottom stacks to ~176px of blank space between any two
sections — fine on a wide desktop screen, but reads as a big empty gap
on a narrow phone. Tighter on mobile, same roomy 88px from 640px up. */
section{ padding:48px 0; }
@media (min-width:640px){ section{ padding:88px 0; } }
.light-bg{ background:var(--gray-light); }
.dark-bg{ background:var(--ink); color:var(--white); }
.section-head{ max-width:640px; }
.section-intro{ position:relative; z-index:1; }
.section-head h2{ font-size:clamp(26px,4vw,38px); margin-top:16px; }
.section-head p{ margin-top:16px; color:var(--gray-mid); font-size:16px; }
.dark-bg .section-head p{ color:rgba(255,255,255,.68); }

/* ---------- Intro / about ---------- */
.about-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.about-stats{ display:flex; gap:40px; margin-top:56px; flex-wrap:wrap; }
.about-stats .stat-num{ font-size:34px; color:var(--red); }
.about-stats .stat-label{ font-family:var(--body); }

/* ---------- Services grid ---------- */
.svc-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--gray-border); border-left:1px solid var(--gray-border); }
@media (min-width:640px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-item{ border-right:1px solid var(--gray-border); border-bottom:1px solid var(--gray-border); padding:32px 20px; text-align:center; transition:background .15s ease; }
.svc-item:hover{ background:var(--white); }
.svc-icon{ width:44px; height:44px; margin:0 auto 16px; color:var(--red); }
.svc-item span{ font-size:14.5px; font-weight:600; }
.svc-item.total{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--ink); color:var(--white); }
.svc-item.total .stat-num{ font-size:36px; color:var(--red); }

/* ---------- Brands strip ---------- */
.brand-row{ margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; }
.brand-pill{ border:1px solid var(--gray-border); border-radius:999px; padding:10px 20px; font-weight:600; font-size:14px; color:var(--ink); background:var(--white); }
.fineprint{ margin-top:20px; font-size:12.5px; color:var(--gray-mid); }

/* ---------- Labs / capability carousel ---------- */
.lab-scroller{ margin-top:48px; display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.lab-scroller::-webkit-scrollbar{ display:none; }
.lab-card{ flex:0 0 260px; background:var(--ink-soft); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; }
.lab-visual{ height:150px; background:linear-gradient(135deg, rgba(228,38,46,.35), rgba(228,38,46,.05)); display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.lab-visual svg{ width:56px; height:56px; color:var(--red); }
.lab-visual.has-photo svg{ display:none; }
.lab-body{ padding:18px 18px 22px; }
.lab-body h3{ font-size:16px; font-family:var(--body); font-weight:700; color:var(--white); }
.lab-body span{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:rgba(255,255,255,.6); }

/* ---------- Certifications (USP cards) ---------- */
.cert-grid{ margin-top:40px; display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:560px){ .cert-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .cert-grid{ grid-template-columns:repeat(4,1fr); gap:22px; } }
/* A thin gradient accent bar across the top (::before) and a soft
red-tinted glow on hover, instead of a flat gray border and a plain
gray shadow, give these cards some real presence instead of blending
into the page. Eased with the same cubic-bezier curve used on the
carousel controls, for a consistently "premium" feel across the page
rather than the default linear easing. */
.cert-card{
  position:relative; border:1px solid var(--gray-border); border-radius:18px;
  padding:30px 24px 26px; background:var(--white); overflow:hidden;
  box-shadow:0 2px 8px rgba(23,24,27,.05);
  transition:box-shadow .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), border-color .3s ease;
}
.cert-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.cert-card:hover{
  box-shadow:0 18px 34px rgba(228,38,46,.14); transform:translateY(-6px);
  border-color:rgba(228,38,46,.18);
}
.cert-card:hover::before{ transform:scaleX(1); }
.cert-card:active{ box-shadow:0 6px 14px rgba(228,38,46,.12); transform:translateY(-2px) scale(.99); }
.cert-badge{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  box-shadow:0 8px 18px rgba(228,38,46,.28);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.cert-card:hover .cert-badge{ transform:scale(1.08) rotate(-4deg); }
.cert-badge svg{ width:26px; height:26px; color:var(--white); }
.cert-card h3{ font-size:16.5px; font-family:var(--body); font-weight:700; }
.cert-card p{ margin-top:8px; font-size:14px; color:var(--gray-mid); line-height:1.5; }

/* ---------- Split CTA ---------- */
.cta-split{ background:linear-gradient(180deg, var(--red-tint), var(--white)); }
.cta-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:32px; padding-bottom:56px; border-bottom:1px solid var(--gray-border); }
.cta-top h2{ font-size:clamp(26px,4vw,36px); max-width:12ch; }
.cta-top p{ margin-top:16px; max-width:42ch; color:var(--gray-mid); }
.feature-list{ margin-top:56px; display:grid; gap:36px; }
@media (min-width:700px){ .feature-list{ grid-template-columns:1fr 1fr; } }
.feature{ display:flex; gap:16px; }
.feature .bullet{ width:10px; height:10px; border-radius:50%; background:var(--red); margin-top:8px; flex-shrink:0; }
.feature h3{ font-family:var(--body); font-size:17px; font-weight:700; }
.feature p{ margin-top:8px; color:var(--gray-mid); font-size:14.5px; }

/* ---------- Contact form ---------- */
.contact-wrap{ display:grid; gap:48px; }
@media (min-width:900px){ .contact-wrap{ grid-template-columns:0.9fr 1.1fr; } }
.contact-info h2{ font-size:clamp(28px,4vw,38px); }
.contact-info p{ margin-top:18px; color:var(--gray-mid); max-width:44ch; }
.contact-direct{ margin-top:28px; }
.contact-direct a{ font-weight:700; color:var(--red); }
.form-grid{ display:grid; gap:18px; }

/* Booking form — center and emirate selection (both simple dropdowns, matching every other select in this form) */
.field-note{ margin-top:8px; font-size:12.5px; color:var(--gray-mid); }
.booking-conditional.hidden{ display:none; }
/* Generic hide utility — the existing .hidden rule above is scoped
specifically to .booking-conditional, so it wouldn't have hidden
anything else that used the class alone. */
.hidden{ display:none; }
@media (min-width:560px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; }
.field label .req{ color:var(--red); }
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--gray-border); border-radius:10px;
  padding:14px 16px; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(228,38,46,.1); }
.field textarea{ resize:vertical; min-height:110px; }
.form-submit{ margin-top:8px; }
.form-notice{ padding:14px 18px; border-radius:10px; margin-bottom:18px; font-size:14px; font-weight:600; }
.form-notice.success{ background:#E9F7EC; color:#1E7A34; }
.form-notice.error{ background:var(--red-tint); color:var(--red-dark); }

/* ---------- Generic page / blog content ---------- */
.page-content, .single-content{ padding:88px 0; }
.page-content .wrap, .single-content .wrap{ max-width:820px; }
.page-content h1, .single-content h1{ font-size:clamp(28px,4vw,42px); margin-bottom:24px; }
.page-content .entry-content > *, .single-content .entry-content > *{ margin-bottom:18px; }
/* Blog — post cards (Blog listing, category/tag archives, and the homepage "Latest from the Blog" teaser all share this) */
.post-grid{ display:grid; gap:24px; }
@media (min-width:640px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .post-grid{ grid-template-columns:1fr 1fr 1fr; } }
.post-card{ display:block; color:inherit; text-decoration:none; background:var(--white); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md, 0 2px 8px rgba(23,24,27,.07)); border:1px solid var(--gray-border); transition:box-shadow .15s, transform .15s; }
.post-card:hover{ box-shadow:0 6px 20px rgba(23,24,27,.1); transform:translateY(-2px); }
.post-card:active{ box-shadow:0 2px 6px rgba(23,24,27,.08); transform:translateY(0) scale(.98); }
.post-card-image{ aspect-ratio:16/10; background:var(--gray-light); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.post-card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card-image svg{ width:44px; height:44px; color:var(--gray-mid); }
.post-card-body{ padding:18px 20px 22px; }
.post-card-category{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); background:var(--red-tint); padding:4px 10px; border-radius:999px; }
.post-card-title{ margin-top:10px; font-size:17px; line-height:1.35; }
.post-card-excerpt{ margin-top:8px; font-size:14px; color:var(--gray-mid); line-height:1.5; }
.post-card-meta{ margin-top:14px; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray-mid); }
.post-pagination{ margin-top:40px; display:flex; justify-content:center; gap:16px; }
.post-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:999px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; }
.post-pagination .page-numbers.current{ background:var(--red); color:#fff; }
.post-byline{ margin-top:12px; display:flex; align-items:center; gap:8px; color:var(--gray-mid); font-size:13.5px; }
.post-cta-banner{ margin-top:48px; padding:28px 26px; background:var(--ink); color:#fff; border-radius:16px; }
.post-cta-banner h3{ font-size:19px; }
.post-cta-banner p{ margin-top:8px; color:rgba(255,255,255,.75); font-size:14.5px; }
.post-cta-banner .btn{ margin-top:16px; width:auto; padding:11px 24px; }

/* ---------- Blog post comments (comments.php + cellmission_comment_template()) ---------- */
.post-comments{ margin-top:48px; padding-top:40px; border-top:1px solid var(--gray-border); }
.comments-title{ font-size:20px; }
.comments-closed-note{ color:var(--gray-mid); font-size:14px; }
.comment-list{ list-style:none; margin:28px 0 0; padding:0; }
.comment-list .children{ list-style:none; margin:20px 0 0 20px; padding:0; border-left:2px solid var(--gray-border); padding-left:20px; }
.comment-body{ display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--gray-border); }
.comment-list > li:first-child > .comment-body{ padding-top:0; }
.comment-avatar{ flex:none; }
.comment-avatar img{ width:48px; height:48px; border-radius:50%; display:block; background:var(--gray-light); }
.comment-main{ flex:1; min-width:0; }
.comment-meta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.comment-author{ font-weight:700; font-size:14.5px; color:var(--ink); }
.comment-author a{ color:inherit; text-decoration:none; }
.comment-date{ font-size:12.5px; color:var(--gray-mid); }
.comment-date a{ color:inherit; text-decoration:none; }
.comment-date a:hover{ text-decoration:underline; }
.comment-awaiting-moderation{ margin-top:8px; font-size:13px; font-style:italic; color:var(--red-dark); background:var(--red-tint); display:inline-block; padding:4px 10px; border-radius:8px; }
.comment-content{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--ink); }
.comment-content p{ margin-bottom:10px; }
.comment-content p:last-child{ margin-bottom:0; }
.comment-reply{ margin-top:8px; }
.comment-reply a, a.comment-reply-link, a.comment-reply-login{
  display:inline-block; font-size:13px; font-weight:700; color:var(--red);
  text-decoration:none; cursor:pointer;
}
.comment-reply a:hover, a.comment-reply-link:hover, a.comment-reply-login:hover{ color:var(--red-dark); text-decoration:underline; }

/* Reply form — identical field styling to every other form on the site (.field / .btn), inside #respond which WordPress's comment_form() always wraps itself in */
#respond{ margin-top:32px; padding:20px; background:var(--gray-light); border-radius:14px; }
.comment-reply-title{ font-size:17px; }
.comment-reply-title small a{ margin-left:10px; font-size:12.5px; font-weight:600; color:var(--gray-mid); }
.comment-form{ margin-top:18px; }
.comment-form .comment-form-comment textarea{ width:100%; }
.comment-form .form-submit{ margin-top:4px; }
.comment-notes, .logged-in-as{ font-size:13px; color:var(--gray-mid); margin-bottom:14px; }
.archive-card h2{ font-size:19px; }
.archive-card a{ color:var(--ink); }
.archive-card p{ margin-top:10px; color:var(--gray-mid); font-size:14.5px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--ink); color:rgba(255,255,255,.85); padding-top:80px; }
.foot-top{ display:grid; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:900px){ .foot-top{ grid-template-columns:1fr 1fr; } }
.foot-logo{ font-family:var(--display); font-weight:700; font-size:26px; color:var(--white); }
.foot-logo .dot{ color:var(--red); }
.foot-about{ margin-top:18px; max-width:44ch; color:rgba(255,255,255,.6); font-size:14.5px; }
.foot-contact-list{ margin-top:28px; display:grid; gap:18px; }
.foot-contact-item{ display:flex; gap:14px; }
.foot-icon{ width:40px; height:40px; border-radius:50%; background:rgba(228,38,46,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.foot-icon svg{ width:18px; height:18px; color:var(--red); }
.foot-contact-item .label{ font-size:13px; color:rgba(255,255,255,.5); }
.foot-contact-item .value{ font-weight:600; margin-top:2px; }
.foot-social{ display:flex; gap:10px; margin-top:28px; }
.foot-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.foot-social a:hover{ background:rgba(255,255,255,.1); }
.foot-social svg{ width:16px; height:16px; }

.newsletter h3{ font-family:var(--display); font-size:22px; color:var(--white); }
.newsletter p{ margin-top:12px; color:rgba(255,255,255,.6); font-size:14.5px; max-width:40ch; }
.newsletter-form{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:220px; padding:14px 18px; border-radius:999px; border:1.5px solid rgba(255,255,255,.2); background:transparent; color:var(--white); font-size:16px; }
/* Real PageSpeed fix: rgba(255,255,255,.4) on the dark footer only
   measures ~3.8:1 — under the 4.5:1 AA minimum. .6 clears 7:1. */
.newsletter-form input::placeholder{ color:rgba(255,255,255,.6); }
.newsletter-form input:focus{ outline:none; border-color:var(--red); }

.foot-bottom{ padding:36px 0 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:22px; font-size:13.5px; color:rgba(255,255,255,.6); }
.foot-links a{ transition:color .15s ease; }
.foot-links a:hover{ color:var(--white); }
/* Real PageSpeed fix: this is the exact element PageSpeed flagged
   ("© 2026 CellMission. All rights reserved.") — rgba(255,255,255,.4)
   on the dark footer measures only ~3.8:1, under the 4.5:1 AA
   minimum. .6 clears 7:1. */
.foot-copy{ font-size:12.5px; color:rgba(255,255,255,.6); }

@media (min-width:860px){
  .logo{ position:static; transform:none; font-size:22px; }
  nav.primary-nav{ display:flex; align-items:center; gap:40px; }
  .head-cta{ display:flex; }
  .burger{ display:none; }
}

/* Devices archive page */
.cm-device-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cm-device-pill{ display:inline-block; padding:9px 16px; background:var(--white); border:1px solid var(--gray-border); border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; transition:all .15s; }
.cm-device-pill:hover{ background:var(--red-tint); border-color:var(--red); color:var(--red-dark); }
.cm-device-pill:active{ background:var(--red-tint); border-color:var(--red); color:var(--red-dark); transform:scale(.96); }

/* Booking form — brand/model autocomplete (a real "type to filter"
dropdown that only appears while typing, never a permanently-visible
list — matches the request specifically) */
.cm-autocomplete-field{ position:relative; }
.cm-autocomplete-results{ display:none; position:absolute; top:100%; left:0; right:0; z-index:20; background:var(--white); border:1.5px solid var(--gray-border); border-radius:12px; margin-top:4px; max-height:220px; overflow-y:auto; box-shadow:0 8px 24px rgba(23,24,27,.12); }
.cm-autocomplete-results.show{ display:block; }
.cm-autocomplete-item{ padding:11px 16px; font-size:14.5px; cursor:pointer; transition:background .1s ease; }
.cm-autocomplete-item:hover{ background:var(--gray-light); }
.cm-autocomplete-item:active{ background:var(--gray-border); }
.cm-autocomplete-item + .cm-autocomplete-item{ border-top:1px solid var(--gray-border); }

/* Homepage YouTube videos section */
.cm-video-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.cm-video-thumb{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; cursor:pointer; background:var(--ink); }
.cm-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; background:rgba(228,38,46,.92); border-radius:50%; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; padding-left:4px; transition:transform .15s; }
.cm-video-thumb:hover .cm-video-play{ transform:translate(-50%,-50%) scale(1.08); }
.cm-video-card iframe{ width:100%; aspect-ratio:16/9; border-radius:12px; border:0; display:block; }

/* WhatsApp booking CTA — mobile-only, sitting directly below the hero
with deliberately minimal gap (margin-top kept small, no extra section
padding above it) as specifically requested. Real WhatsApp green
(#25D366) is used here rather than the site's own red — it's the
one place on the site borrowing another brand's color intentionally,
since instant WhatsApp recognition matters more here than strict
palette consistency. */
.whatsapp-hero-cta{ margin-top:14px; }
@media (min-width:860px){ .whatsapp-hero-cta-mobile-only{ display:none; } }
.whatsapp-hero-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; background:#25D366; color:#fff;
  padding:14px 20px; border-radius:14px;
  font-weight:700; font-size:14.5px; text-decoration:none;
  box-shadow:0 4px 14px rgba(37,211,102,.35);
  transition:box-shadow .15s ease, transform .15s ease;
}
.whatsapp-hero-btn:hover{ box-shadow:0 6px 18px rgba(37,211,102,.45); transform:translateY(-1px); }
.whatsapp-hero-btn:active{ box-shadow:0 2px 8px rgba(37,211,102,.3); transform:translateY(0) scale(.98); }

/* WhatsApp quick-booking form — positioned right after the hero's
slide carousel, mobile only. Styled in the site's own red/black/white
theme rather than WhatsApp's green, per direct request — only the
final send button keeps a small WhatsApp-recognizable touch (the logo
icon), not the whole component. */
@media (min-width:860px){ .whatsapp-quickform-mobile-only{ display:none; } }
#whatsappQuickFormWrap{ margin-top:14px; }
/* The trigger button — this is what's actually visible by default;
the form itself (below) only appears once this is tapped, per direct
request that it shouldn't just be sitting open on page load. Kept in
the site's own red rather than WhatsApp green, matching the same
reasoning as the rest of this component — the logo icon alone carries
the WhatsApp recognition, not the button's whole color. */
.whatsapp-quickform-trigger{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--red); color:var(--white);
  padding:14px 20px; border-radius:14px; border:none;
  font-weight:700; font-size:14.5px; cursor:pointer;
  box-shadow:0 6px 16px rgba(228,38,46,.3);
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.whatsapp-quickform-trigger:hover{ background:var(--red-dark); box-shadow:0 8px 20px rgba(228,38,46,.38); transform:translateY(-1px); }
.whatsapp-quickform-trigger:active{ background:var(--red-dark); box-shadow:0 2px 8px rgba(228,38,46,.3); transform:translateY(0) scale(.98); }
.whatsapp-quickform{
  background:var(--white); border-radius:20px; padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  margin:10px 0 0;
}
.whatsapp-quickform-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.whatsapp-quickform-tab{
  flex:1; text-align:center; padding:11px 8px; border-radius:10px;
  background:var(--gray-light); color:var(--gray-mid);
  font-size:12.5px; font-weight:700; border:none; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.whatsapp-quickform-tab.active{ background:var(--ink); color:var(--white); }
.whatsapp-quickform .field{ margin-top:12px; }
.whatsapp-quickform .field:first-of-type{ margin-top:0; }
.whatsapp-quickform .field label{ font-size:12.5px; }
.whatsapp-quickform-submit{
  width:100%; margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--red); color:var(--white);
  padding:14px 20px; border-radius:999px; border:none;
  font-weight:700; font-size:14.5px; cursor:pointer;
  box-shadow:0 6px 16px rgba(228,38,46,.3);
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.whatsapp-quickform-submit:hover{ background:var(--red-dark); box-shadow:0 8px 20px rgba(228,38,46,.38); transform:translateY(-1px); }
.whatsapp-quickform-submit:active{ background:var(--red-dark); box-shadow:0 2px 8px rgba(228,38,46,.3); transform:translateY(0) scale(.98); }

/* Stat highlights — redesigned after direct feedback that the first
version (icon in a colored circle, on a white card) read as generic;
that specific pattern is one of the most recognizable "default AI
design" tells. Rebuilt around bold typographic stats as the actual
visual hero of each cell, joined as one dark unit with a thin divider
rather than two separate floating cards — and deliberately reuses
this site's own already-established language (monospace numbers,
uppercase red labels — the same shape .ticket uses everywhere else)
rather than introducing a new pattern. */
.stat-highlights{
  display:grid; grid-template-columns:1fr 1fr;
  background:linear-gradient(155deg, #1D1E22 0%, var(--ink) 55%, #0E0F11 100%);
  border-radius:18px; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
}
.stat-highlights-standalone{ margin-top:14px; }
.stat-cell{
  padding:20px 18px; display:flex; flex-direction:column; gap:3px;
  transition:background .15s ease;
}
.stat-cell:first-child{ border-inline-end:1px solid rgba(255,255,255,.14); }
.stat-cell:hover{ background:rgba(255,255,255,.04); }
.stat-num{ font-family:var(--mono); font-size:27px; font-weight:800; color:var(--white); letter-spacing:-.02em; line-height:1; }
.stat-label{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--red); margin-top:6px; }
.stat-desc{ font-size:11.5px; color:rgba(255,255,255,.5); margin-top:2px; line-height:1.35; }