/* ==========================================================================
   al3ahd – App CSS (clean, organized)
   - Brand tokens
   - Base / layout
   - Topbar (promo + typewriter)
   - Header (sticky) + Navigation (desktop)
   - Mobile Drawer (off-canvas) + Overlay
   - Buttons & CTAs
   - Hero (premium)
   - Sections, Cards, Grids, Quotes, CTA
   - Utilities, Animations, Responsiveness
   ========================================================================== */


/* ==========================================================================
   1) Brand Tokens
   ========================================================================== */
:root{
  --c-brand:#e84545;       /* primary red */
  --c-dark:#212529;        /* dark text */
  --c-wa:#1BD741;          /* WhatsApp green (hover/pulse) */
  --c-bg:#ffffff;
  --c-muted:#6b7280;
  --c-border:#e5e7eb;

  --shadow:0 8px 24px rgba(2,6,23,.08);
  --shadow-md:0 12px 30px rgba(2,6,23,.12);
  --shadow-xl:0 30px 70px rgba(2,6,23,.18);

  --radius:12px;

  /* dynamic offsets (JS updates these) */
  --topbar-h:0px;
  --header-h:72px;

  /* hero extras */
  --c-ink:#0b1320;
}


/* ==========================================================================
   2) Base / Layout
   ========================================================================== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--c-bg); color:var(--c-dark);
  font: 400 16px/1.7 "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }
.screen-reader-text{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
:focus-visible{ outline:2px solid var(--c-brand); outline-offset:2px }

/* containers */
.container-fluid{ padding-inline:24px }
@media (min-width:1200px){ .container-fluid{ padding-inline:40px } }

/* page offset under sticky bars */
.site-content{ padding-top: 0px !important; }

/* lock background when drawer open */
body.no-scroll{ overflow:hidden }

/* subtle scrolled state */
body.scrolled .header{ box-shadow:0 6px 24px rgba(0,0,0,.06); background:#fff }

/* Force Bootstrap fixed-top to behave as sticky for our header */
#header.fixed-top{
  position: sticky !important;
  top: var(--topbar-h, 0px) !important;
}

/* horizontal scroll guards */
html, body, .site{ overflow-x:hidden }


/* ==========================================================================
   3) Topbar (Promo + Typewriter)
   ========================================================================== */
.topbar{
  position: sticky; top:0; z-index:1002;
  color:#fff; background:var(--c-brand);
  box-shadow:0 6px 18px rgba(232,69,69,.25);
  padding-top:max(6px, env(safe-area-inset-top, 0));
  transition: transform .25s ease, opacity .2s ease;
  will-change: transform, opacity, height, padding;
}
.topbar__inner{
  min-height:40px; display: grid; grid-template-columns: 1fr auto; gap:12px; padding-block:6px
}
.topbar__text{
  font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: .84rem !important;
} 
.topbar__actions{ position:relative; z-index:2 }
.topbar__close{
  position:relative; z-index:3;
  background:transparent; color:#fff; border:0; cursor:pointer;
  font-size:22px; line-height:1; padding:6px 10px; border-radius:8px
}

/* collapse animation (JS toggles classes) */
.topbar.is-collapsing{ overflow:hidden; animation: topbar-collapse .28s ease forwards }
@keyframes topbar-collapse{
  from{ height: var(--tb-h, 40px); padding-top: var(--tb-pt, 6px); padding-bottom: var(--tb-pb, 6px); opacity:1; transform:none }
  to  { height: 0;                 padding-top: 0;                 padding-bottom: 0;                 opacity:0; transform: translateY(-6px) }
}
.topbar.is-hidden{ display:none }

/* typewriter caret */
.topbar__text .tw-cursor{
  display:inline-block; width:1px; height:1.15em; background:#fff; margin-inline-start:3px;
  animation: tw-blink 1s step-end infinite;
}
@keyframes tw-blink{ 50%{ opacity:0 } }

/* WhatsApp icon button (icon-only) – pulse never blocks clicks */
.btn--wa,
.header__ctas .btn--wa-icon{
  position:relative; width:38px; height:38px; padding:0;
  border-radius:999px; display:inline-grid; place-items:center;
  background:#fff; color:var(--c-brand); border:1px solid rgba(255,255,255,.4);
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--wa svg, .header__ctas .btn--wa-icon svg{ width:18px; height:18px; display:block }
.btn--wa:hover, .header__ctas .btn--wa-icon:hover{
  background:var(--c-wa); color:#fff; transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(27,215,65,.35)
}
.btn--wa::after, .header__ctas .btn--wa-icon::after{ pointer-events:none }
@media (prefers-reduced-motion:no-preference){
  .btn--wa::after, .header__ctas .btn--wa-icon::after{
    content:""; position:absolute; inset:0; border-radius:999px;
    box-shadow:0 0 0 0 rgba(27,215,65,.0);
    animation: wa-pulse 2.2s ease-out infinite;
  }
  @keyframes wa-pulse{
    0%{   box-shadow:0 0 0 0 rgba(27,215,65,.45) }
    70%{  box-shadow:0 0 0 16px rgba(27,215,65,.0) }
    100%{ box-shadow:0 0 0 0 rgba(27,215,65,.0) }
  }
}

/* tiny screens layout */
@media (max-width:600px){
  .topbar__inner{ display:grid; grid-template-columns: 1fr auto; gap:10px }
}
@media (max-width:420px){ .topbar__text{ font-size:.95rem } }

#header.fixed-top{
  position: -webkit-sticky !important;
  position: sticky !important;
  top: var(--topbar-h, 0px) !important;
}

/* ==========================================================================
   4) Header (Sticky Glass)
   ========================================================================== */
.header{
   position: -webkit-sticky;
   position: sticky;
   top: var(--topbar-h, 0px);
   z-index:1001;
   background: rgba(255,255,255,.95);
   backdrop-filter: saturate(160%) blur(8px);
   box-shadow: 0 8px 24px rgba(2,6,23,.06);
   overflow: visible !important;
   contain: layout;
}
.header::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(15,23,42,.10), transparent);
}
.header__inner{
  min-height: clamp(66px, 7.5vw, 86px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:6px; flex:0 0 auto;
}

/* logo sizing */
.logo img{         
    max-height: 90px;
    width: 170px;
    object-fit: cover; 
}
@media (max-width:480px){ .logo img{ max-height:78px } }
@media (max-width:365px){ .logo img{ max-height:72px } .header__inner{ min-height:64px } }


/* ==========================================================================
   5) Navigation (Desktop)
   ========================================================================== */

.navmenu .menu{
  display:flex; align-items:center; gap:18px; font-weight:600
}
.navmenu .menu > li > a{
  display:inline-block; padding:10px 8px; border-radius:8px;
  color:var(--c-dark); line-height:1.2;
}
.navmenu .menu > li > a:hover{ color:var(--c-brand) }

/* dropdowns */
.menu .menu-item-has-children{ position:relative }
.menu .menu-item-has-children > ul{
  position:absolute; inset-block-start:100%; inset-inline-start:0;
  min-width:220px; background:#fff; border:1px solid var(--c-border);
  border-radius:10px; box-shadow:var(--shadow); padding:8px; display:none; z-index:1000; margin:0;
}
.menu .menu-item-has-children:hover > ul{ display:block }
.menu .menu-item-has-children > ul a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--c-dark); font-weight:500
}
.menu .menu-item-has-children > ul a:hover{ background:#f8fafc }

/* active link (fallback if WP classes missing) */
.navmenu .menu > li.current-menu-item > a,
.navmenu .menu > li.current_page_item > a,
.navmenu .menu > li.current-menu-ancestor > a,
.navmenu .menu > li > a.is-active{
  color:var(--c-brand); position:relative;
}
.navmenu .menu > li.current-menu-item > a::after,
.navmenu .menu > li.current_page_item > a::after,
.navmenu .menu > li.current-menu-ancestor > a::after,
.navmenu .menu > li > a.is-active::after{
  content:""; position:absolute; inset-inline:10% 10%; inset-block-end:2px;
  height:2px; border-radius:2px; background:currentColor;
}


/* ==========================================================================
   6) Mobile Drawer (Off-canvas) + Overlay
   ========================================================================== */

/* hamburger (shown only on mobile) */
.hamburger{
  display:none; position:relative; width:40px; height:40px;
  border:1px solid var(--c-border); border-radius:10px; background:#fff; color:var(--c-dark)
}
.hamburger__bar{ position:absolute; left:8px; right:8px; height:2px; background:currentColor; border-radius:2px }
.hamburger__bar:nth-child(1){ top:12px } .hamburger__bar:nth-child(2){ top:18px } .hamburger__bar:nth-child(3){ top:24px }
@media (max-width:1199px){ .hamburger{ display:inline-block } }

/* Desktop safety – normal inline nav */
@media (min-width:1200px){
  #navmenu{ position:static !important; inset:auto !important; width:auto !important; height:auto !important; padding:0 !important;
            background:transparent !important; border:0 !important; transform:none !important; transition:none !important;
            overflow:visible !important; z-index:auto !important }
  #navmenu .menu{ display:flex !important; gap:18px; align-items:center }
  #navOverlay{ display:none !important }
}

@media (max-width:1199px){
  #navmenu{
    position: fixed !important;
    inset: calc(var(--topbar-h) + var(--header-h)) 0 0 auto !important;
    width: min(346px, 92vw) !important;
    height: calc(100dvh - (var(--topbar-h) + var(--header-h))) !important;
    background: rgba(255,255,255,.95) !important;
    border-inline-start: 1px solid var(--c-border) !important;
    padding: 20px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    z-index: 1101 !important;                 /* above overlay */
    transform: translate3d(100%,0,0) !important; /* hidden LTR */
    transition: transform .28s cubic-bezier(.2,.65,.2,1) !important;
    visibility: visible !important;
  }
  html[dir="rtl"] #navmenu{
    inset: calc(var(--topbar-h) + var(--header-h)) auto 0 0 !important;
    height: calc(100dvh - (var(--topbar-h) + var(--header-h))) !important;
    border-inline-start: 0 !important;
    border-inline-end: 1px solid var(--c-border) !important;
    transform: translate3d(-100%,0,0) !important;
  }

  #navmenu.nav-open{ transform: translate3d(0,0,0) !important; }
  html[dir="rtl"] #navmenu.nav-open{ transform: translate3d(0,0,0) !important; }

  /* make sure the list appears when open */
  .navmenu .menu{ display: none !important; }
  #navmenu.nav-open .menu{ display: block !important; }
}
#navOverlay{ z-index: 1000 !important; }  /* overlay below the drawer */

/* overlay (under drawer, above page) */
#navOverlay{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  opacity: 0; pointer-events: none;
  z-index: 1000 !important;
  transition: opacity .22s ease;
}
#navOverlay.is-active{ opacity:1; pointer-events:auto }


/* ==========================================================================
   7) Buttons & Header CTAs
   ========================================================================== */
.header__ctas{ display:flex; align-items:center; gap:8px }
.header__ctas .btn{ padding:.55rem .9rem; font-size:15px; border-radius:999px; line-height:1.2 }

.btn{
  --bg:var(--c-brand); --fg:#fff; --hover: color-mix(in srgb, var(--c-brand), transparent 15%);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.1rem; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1px solid transparent; font-weight:700; transition:.2s ease;
}
.btn:hover{ background:var(--hover); transform:translateY(-1px); box-shadow:var(--shadow) }
.btn--primary{ --bg:var(--c-brand) }
.btn--ghost{ --bg:transparent; --fg:var(--c-dark); border-color:var(--c-border) }
.btn--ghost:hover{ background:#f8fafc }

/* tiny phones: keep only main CTA */
@media (max-width:420px){ .header__ctas .btn--ghost{ display:none } }
@media (max-width:365px){
  .hamburger{ width:38px; height:38px }
  .header__ctas .btn--primary{ padding:.44rem .66rem; font-size:13.2px }
}

.header.is-scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.06); background:#fff }

/* ==========================================================================
   8) Hero (Premium)
   ========================================================================== */
.hero--premium{
  position:relative;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(232,69,69,.10), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 60%, #f7f8fb 100%);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.hero__blob{
  position:absolute; width:42vw; height:42vw; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(232,69,69,.25), rgba(232,69,69,0) 60%);
  filter: blur(30px); inset-inline-start:-18vw; inset-block-start:-8vw; opacity:.6;
}
.hero__ring{
  position:absolute; width:52vw; height:52vw; border-radius:999px;
  border: 1px solid rgba(232,69,69,.18);
  inset-inline-end:-25vw; inset-block-start:-10vw;
}
.hero__dots{
  position:absolute; inset-inline-end:10vw; inset-block-end:8vw; width:220px; height:140px; opacity:.25;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 14px 14px; color:#e84545;
}

/* hero layout */
.hero__inner{
  position:relative; z-index:1;
  display:grid; align-items:center; gap:36px;
  padding-block: clamp(30px, 7vw, 86px);
  grid-template-columns: 1.05fr .95fr;
}
@media (max-width:992px){ .hero__inner{ grid-template-columns:1fr; gap:22px } }

/* badge + title */
.hero__badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem;
  border:1px solid rgba(232,69,69,.25); color:#e84545; font-weight:800; border-radius:999px;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(150%) blur(6px);
  box-shadow:0 6px 20px rgba(2,6,23,.06);
}
.hero__badge-dot{ width:8px;height:8px;border-radius:50%;background:#e84545; display:inline-block }
.hero__title{
  margin:10px 0 6px; color:var(--c-ink);
  font-weight:900; letter-spacing:.2px; line-height:1.12;
  font-size: clamp(28px, 4.6vw, 46px);
}
.hero__sub{ margin:0 0 14px; color:#434a5a; font-weight:600 }

/* rating row */
.hero__rating{ display:flex; align-items:center; gap:8px; margin:0 0 12px }
.stars{ color:#FBBF24; letter-spacing:2px; font-size:15px }
.rate-text{ color:var(--c-muted); font-weight:700 }

/* chips */
.hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px }
.hero__chips li{
  background:#fff; border:1px solid var(--c-border); color:var(--c-ink);
  padding:.40rem .7rem; border-radius:999px; font-weight:800; font-size:.88rem;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}

/* hero CTAs */
.hero__ctas{ display:flex; gap:10px; margin:0 0 18px }
.hero__ctas .btn--primary{ background:var(--c-brand) }
.hero__ctas .btn--ghost{ background:#fff; border:1px solid var(--c-border) }
@media (max-width:520px){
  .hero__ctas .btn{ padding:.5rem .85rem; font-size:14px }
  .hero__ctas .btn--ghost{ display:none }
}

/* glass card (hero quote) */
.card--glass{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--shadow-md);
  backdrop-filter: saturate(160%) blur(8px);
}
.hero__quote{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px; align-items:end; border-radius:14px; padding:12px;
}
.hero__quote label{ display:grid; gap:6px; font-weight:800; color:var(--c-ink); font-size:.92rem }
.hero__quote select, .hero__quote input{
  border:1px solid var(--c-border); border-radius:10px; padding:.6rem .7rem; font:inherit; background:#fff;
}
.hero__quote-actions{ display:flex; align-items:center; gap:12px; grid-column:1 / -1 }
.hero__quote .muted{ color:var(--c-muted) }
@media (max-width:992px){ .hero__quote{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .hero__quote{ grid-template-columns:1fr } }

/* media frame */
.media-frame{
  position:relative; border-radius:18px; overflow:hidden; isolation:isolate;
  box-shadow: var(--shadow-xl);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(232,69,69,.10), transparent 60%),
    #fff;
  border:1px solid rgba(15,23,42,.06);
}
.media-frame::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(232,69,69,.10), transparent 40%);
  mix-blend-mode:multiply; pointer-events:none;
}
.media-frame img{ display:block; width:100%; height:auto }

/* =======================================================
   Hero — premium motion & reveals (lightweight)
   ======================================================= */

/* base: start hidden; JS will add .is-in to animate */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:.001; transform: translateY(14px); }
  .reveal.is-in{ opacity:1; transform:none; transition:
      opacity .6s cubic-bezier(.2,.65,.2,1),
      transform .6s cubic-bezier(.2,.65,.2,1); }
  /* stagger via CSS var set by JS */
  .reveal.is-in{ transition-delay: var(--rv-delay, 0ms); }
}

/* micro-press on interactive items */
.hero__ctas .btn{
  transform: translateZ(0);
}
.hero__ctas .btn:active{
  transform: translateY(1px) scale(.995);
}

/* media frame tilt highlight */
.media-frame{
  will-change: transform;
  transform-style: preserve-3d;
}
.media-frame__shine{
  content:""; position:absolute; inset:-20% -20%;
  background: radial-gradient(45% 45% at var(--mx,50%) var(--my,50%), rgba(232,69,69,.18), transparent 60%);
  pointer-events:none; mix-blend-mode:multiply; transition: opacity .25s ease;
  opacity:.55;
}

/* parallax background bits (blob/ring/dots) */
.hero__blob, .hero__ring, .hero__dots{ will-change: transform; }

/* small breathing animation as a baseline */
@media (prefers-reduced-motion:no-preference){
  .hero__media .media-frame{ animation: hero-float 9s ease-in-out infinite alternate; }
  @keyframes hero-float{ from{ transform: translateY(0) } to{ transform: translateY(10px) } }
}

/* make sure no accidental overflow from transforms */
.hero--premium, .hero__bg{ overflow-x:hidden }

/* --- Hero Quote: new layout helpers --- */
.hero__quote{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.hero__quote .span-2{ grid-column: span 2; }
@media (max-width: 992px){
  .hero__quote{ grid-template-columns: 1fr 1fr; }
  .hero__quote .span-2{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .hero__quote{ grid-template-columns: 1fr; }
}

/* Chip-like checkboxes */
.quote-flags{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; grid-column: 1 / -1;
}
.chip-check{ position:relative; display:inline-flex; align-items:center; }
.chip-check input{ position:absolute; opacity:0; pointer-events:none; }
.chip-check span{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem; border-radius:999px; font-weight:800; cursor:pointer;
  background:#fff; color:var(--c-ink); border:1px solid var(--c-border);
  box-shadow:0 6px 18px rgba(2,6,23,.05); transition:.2s ease;
}
.chip-check input:checked + span{
  background: var(--c-brand); color:#fff; border-color: transparent;
  box-shadow:0 10px 24px rgba(232,69,69,.25);
}
.chip-check span:hover{ transform: translateY(-1px); }


/* ========================= */
/* Why Us (premium section)  */
/* ========================= */
.section--why{ position:relative; isolation:isolate; }

.why__grid{
  display:grid; gap:24px;
  grid-template-columns: 1.1fr .9fr;      /* copy / media */
}
@media (max-width:992px){ .why__grid{ grid-template-columns: 1fr; } }

.why__copy{ align-self:center; }
.why__benefits{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top:10px; }
@media (max-width:560px){ .why__benefits{ grid-template-columns: 1fr; } }

.benefit{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:flex-start;
  background:#fff; border:1px solid var(--c-border); border-radius:12px; padding:12px;
  box-shadow:0 6px 18px rgba(2,6,23,.05);
}
.benefit__icon{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:#fff; color:var(--c-brand); border:1px solid var(--c-border);
}
.benefit strong{ display:block; font-weight:900; color:var(--c-dark); margin-bottom:4px }
.benefit span{ color:var(--c-muted); font-weight:700 }

.why__stats{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }
.stat{ flex:1 1 180px; padding:14px; text-align:center; background:#fff; border:1px solid var(--c-border); border-radius:12px; font-weight:800; box-shadow:0 6px 18px rgba(2,6,23,.05) }
.stat strong{ display:block; font-size:1.35rem; color:var(--c-brand) }
.stat span{ color:var(--c-muted); font-weight:700 }

/* Collage */
.why__media{
  position:relative; min-height: 420px;
}
.why__img{
  position:absolute; overflow:hidden; border-radius:16px; border:1px solid rgba(15,23,42,.06);
  box-shadow: 0 20px 50px rgba(2,6,23,.12); background:#fff;
}
.why__img img{ display:block; width:100%; height:auto; }
.why__img--a{ inset: 0 18% 26% 0; }
.why__img--b{ inset: 24% 0 2% 35%; }
.why__img--c{ inset: 56% 26% -8% 2%; }

@media (max-width:992px){
  .why__media{ min-height: 620px; }
  .why__img--a{ inset: 0 16% 48% 0; }
  .why__img--b{ inset: 34% 0 18% 40%; }
  .why__img--c{ inset: 68% 30% 0 4%; }
}
@media (max-width:560px){
  .why__media{ min-height: 520px; }
  .why__img--a{ inset: 0 12% 52% 0; }
  .why__img--b{ inset: 32% 0 20% 36%; }
  .why__img--c{ inset: 66% 26% 0 4%; }
}

/* Collage chip */
.why__chip{
  position:absolute; inset-inline-start: 6%; inset-block-end: 6%;
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.8); backdrop-filter:saturate(150%) blur(6px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px; padding:.45rem .8rem; font-weight:800; color:var(--c-dark);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
}
.chip__dot{ width:8px; height:8px; border-radius:50%; background:var(--c-brand); display:inline-block }

/* Reveal animations (re-use hero style) */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:.001; transform: translateY(14px); }
  .reveal.is-in{ opacity:1; transform:none; transition:
      opacity .6s cubic-bezier(.2,.65,.2,1),
      transform .6s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}

/* ==========================================================================
   9) Sections / Cards / Grids / Quotes / CTA
   ========================================================================== */
.section--pad{ padding-block: clamp(28px, 6vw, 72px) }
.section__head{ margin:0 0 18px }
.section__title{ margin:0 0 6px; font-weight:800; font-size: clamp(22px, 3.5vw, 34px); color:var(--c-dark) }
.section__sub{ margin:0 }

/* ==========================================================
   Home: Featured Services (Premium)
   upgrades the shortcode markup: .section--services-nav .cards .service-card
   ========================================================== */

/* Section backdrop */
.section--services-nav{
  position:relative; isolation:isolate;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(232,69,69,.06), transparent 50%),
    linear-gradient(180deg,#ffffff 0%, #fbfcff 60%, #f7f8fb 100%);
}

/* Headline accent */
.section--services-nav .section__head{
  position:relative;
}
.section--services-nav .section__title{
  background: linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--services-nav .section__title::after{
  content:""; display:block; width:64px; height:3px; border-radius:3px; margin-top:8px;
  background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
}

/* Grid layout (reuses cards--services …) */
.cards--services{ display:grid; gap:14px }
.cards--cols-6{ grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width:1200px){ .cards--cols-6{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width:768px){  .cards--cols-6{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:520px){  .cards--cols-6{ grid-template-columns: 1fr } }

/* Card: premium glass + hover lift */
.service-card{
  --lift: 10px;
  position:relative; display:grid; align-content:start; gap:8px;
  padding:16px 14px; border-radius:14px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  backdrop-filter: saturate(160%) blur(8px);
  transform: translateZ(0); transition: transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s ease, border-color .28s ease;
  overflow: clip;
}
.service-card::after{ /* glow on hover */
  content:""; position:absolute; inset:-30% -30%;
  background: radial-gradient(40% 40% at var(--mx,60%) var(--my,40%), rgba(232,69,69,.16), transparent 60%);
  mix-blend-mode:multiply; pointer-events:none; opacity:.0; transition: opacity .25s ease;
}

/* Icon chip */
.service-card__icon{
  width:48px; height:48px; padding:8px; border-radius:12px;
  background:#fff; border:1px solid var(--c-border);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

/* Title/link */
.service-card h3{ margin:6px 0 2px; font-size:1.05rem; line-height:1.2; }
.service-card h3 a{
  position:relative; font-weight:900; color:var(--c-dark);
}
.service-card h3 a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-3px; height:2px; width:0;
  background: currentColor; border-radius:2px; transition: width .25s ease;
}

/* Text */
.service-card p{ margin:0; color:#434a5a; font-weight:600 }

/* CTA */
.service-card .btn{ margin-top:8px; }

/* Hover / focus states */
@media (hover:hover){
  .service-card:hover{
    transform: translateY(calc(-1 * var(--lift)));
    box-shadow: 0 24px 58px rgba(2,6,23,.16);
    border-color: rgba(232,69,69,.28);
  }
  .service-card:hover::after{ opacity:.9; }
  .service-card:hover h3 a::after{ width: 42%; }
}
.service-card:focus-within{ outline: 2px solid var(--c-brand); outline-offset:2px }

/* Reveal animation (shared with hero/why) */
@media (prefers-reduced-motion:no-preference){
  .section--services-nav .service-card.reveal{ opacity:.001; transform: translateY(16px); }
  .section--services-nav .service-card.reveal.is-in{
    opacity:1; transform: translateY(0);
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}

/* Compact on tiny screens */
@media (max-width:400px){
  .service-card{ padding:14px 12px; }
  .service-card__icon{ width:42px; height:42px; }
}

/* Optional: subtle icon ring pulse to attract eye */
@media (prefers-reduced-motion:no-preference){
  .service-card__icon{ position:relative; }
  .service-card__icon::after{
    content:""; position:absolute; inset:0; border-radius:12px; box-shadow:0 0 0 0 rgba(232,69,69,.0);
    animation: svc-pulse 2.6s ease-out infinite;
  }
  @keyframes svc-pulse{
    0%{ box-shadow:0 0 0 0 rgba(232,69,69,.35) }
    70%{ box-shadow:0 0 0 16px rgba(232,69,69,.0) }
    100%{ box-shadow:0 0 0 0 rgba(232,69,69,.0) }
  }
}

/* ============ SVG duotone & flip ============ */
.service-card__icon{
  display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:12px;
  background:#fff; border:1px solid var(--c-border);
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  color: var(--c-brand);                     /* currentColor → primary */
}
.service-card__icon .svc-ico{ width:24px; height:24px; display:block }
.service-card__icon .svc-ico .a{ fill: currentColor; opacity:.95 }            /* primary layer */
.service-card__icon .svc-ico .b{ fill: color-mix(in srgb, currentColor, #000 22%); opacity:.85 } /* secondary layer */

/* Hover flip: icon container becomes brand, paths become white */
@media (hover:hover){
  .service-card:hover .service-card__icon{
    background: var(--c-brand);
    color:#fff;                               /* flips .a/.b to white duotone */
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(232,69,69,.35);
  }
  .service-card:hover .service-card__icon .svc-ico .b{
    fill: color-mix(in srgb, #fff, #000 15%);
  }
}

/* ============ Animated heading ============ */
.section--services-nav .section__title{
  position:relative; display:inline-block;
  background: linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--services-nav .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transform-origin: 0 50%;
  transition: width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--services-nav .section__title.is-in::after{ width:64px; }

.section--services-nav .section__sub{
  opacity:.001; transform: translateY(8px);
  transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
}
.section--services-nav .section__sub.is-in{
  opacity:1; transform:none;
}


/* ==========================================================
   Service Detail Page (premium)
   upgrades the shortcode markup: .section--service-detail .service
   ========================================================== */


.service__head .service__title{ font-size: clamp(28px, 4.2vw, 44px); font-weight:900; margin:0 0 6px }
.service__sub{ color:#434a5a; font-weight:600; margin:0 0 12px }
.service__ctas{ display:flex; gap:10px; flex-wrap:wrap }

.service__layout{ display:grid; gap:18px; grid-template-columns: 1.2fr .8fr }
@media (max-width:992px){ .service__layout{ grid-template-columns: 1fr } }

.steps{ counter-reset: step; display:grid; gap:10px; margin:10px 0 }
.steps li{ position:relative; padding-inline-start:36px; font-weight:700 }
.steps li::before{ counter-increment: step; content: counter(step); position:absolute; inset-inline-start:0; top:0; width:26px; height:26px; border-radius:999px; background:var(--c-brand); color:#fff; display:grid; place-items:center; font-size:.85rem }

.faq details{ border:1px solid var(--c-border); background:#fff; border-radius:12px; padding:10px 12px; margin:8px 0 }
.faq summary{ font-weight:800; cursor:pointer }
.faq__a{ color:var(--c-dark); font-weight:600; margin-top:6px }

.service__aside .card{ padding:14px; border:1px solid var(--c-border); border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(2,6,23,.05); margin-bottom:12px }
.service__aside .list{ display:grid; gap:6px; margin:0; padding:0; list-style:none }


/* ==========================================================
   Areas (Premium, identity background)
   ========================================================== */
.section--areas{
  position: relative; isolation: isolate; overflow: clip;
  background:
    radial-gradient(1200px 600px at 95% -10%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 60%, #f7f8fb 100%);
}

/* subtle map/grid layer */
.section--areas::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.10;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,69,69,.18) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(232,69,69,.18) 0 2px, transparent 2px),
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:
    180px 180px, 220px 220px,
    28px 18px,   28px 18px;
  background-position:
    10% 20%, 80% 70%,
    0 0,      0 9px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 55%, transparent 90%);
}

/* soft logo watermark */
:root{
  --al3ahd-logo-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'>\
  <path d='M128 18c60 0 110 50 110 110s-50 110-110 110S18 188 18 128 68 18 128 18zm0 28l-64 64 64 64 64-64-64-64z'/>\
  </svg>");
}

.section--areas .container-fluid::before{
  content:""; position:absolute; z-index:0; pointer-events:none; opacity:.10;
  width:min(380px, 42vw); height:min(380px, 42vw);
  left: min(40px, 4vw); top: 14px;
  background: color-mix(in srgb, var(--c-brand), white 86%);
  -webkit-mask-image: var(--al3ahd-logo-mask); mask-image: var(--al3ahd-logo-mask);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position: left 10% center; mask-position: left 10% center;
}

/* keep real content above layers */
.section--areas > .container-fluid,
.section--areas .section__head,
.section--areas .grid{ position: relative; z-index: 1; }

/* Heading animation (matches Services style) */
.section--areas .section__title{
  position:relative; display:inline-block;
  background: linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform: translateY(6px); opacity:.001;
  transition: transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--areas .section__title.is-in{ transform:none; opacity:1; }
.section--areas .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transform-origin:0 50%;
  transition: width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--areas .section__title.is-in::after{ width:64px; }

.section--areas .section__sub{
  transform: translateY(8px); opacity:.001;
  transition: transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--areas .section__sub.is-in{ transform:none; opacity:1; }

/* Search input */
.areas__search{ margin-top:10px }
#areasSearch{
  width:100%; max-width:520px; padding:.66rem .9rem; border-radius:10px;
  border:1px solid var(--c-border); font:inherit; background:#fff;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}

/* Grid & cards */
.grid--areas{ display:grid; gap:12px }
.grid--cols-6{ grid-template-columns:repeat(6, minmax(0,1fr)); }
@media (max-width:1200px){ .grid--cols-6{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:768px){  .grid--cols-6{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){  .grid--cols-6{ grid-template-columns:1fr } }

.area-card{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:14px 12px; border:1px solid rgba(15,23,42,.08); border-radius:12px;
  background: rgba(255,255,255,.78); backdrop-filter: saturate(160%) blur(8px);
  font-weight:800; color:var(--c-dark);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  transition: transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s ease, border-color .28s ease, color .25s ease;
  overflow: clip;
}
.area-card__pin{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  background:#fff; border:1px solid var(--c-border);
  box-shadow:0 6px 18px rgba(2,6,23,.06); color: var(--c-brand);
}
.pin-ico .a{ fill: currentColor; opacity:.95 }
.pin-ico .b{ fill: color-mix(in srgb, currentColor, #000 22%); opacity:.85 }

.area-card::after{ /* ambient red sheen */
  content:""; position:absolute; inset:-30% -30%;
  background: radial-gradient(40% 40% at var(--mx,60%) var(--my,40%), rgba(232,69,69,.14), transparent 60%);
  mix-blend-mode:multiply; pointer-events:none; opacity:0; transition:opacity .25s ease;
}

@media (hover:hover){
  .area-card:hover{
    transform: translateY(-8px);
    box-shadow:0 24px 58px rgba(2,6,23,.16);
    border-color: rgba(232,69,69,.28);
    color: var(--c-brand);
  }
  .area-card:hover .area-card__pin{
    background: var(--c-brand); color:#fff; border-color:transparent;
    box-shadow:0 14px 34px rgba(232,69,69,.35);
  }
  .area-card:hover::after{ opacity:.9; }
}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .area-card.reveal{ opacity:.001; transform: translateY(14px); }
  .area-card.reveal.is-in{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}


/* ==========================================================
   Steps (How it works) — Premium
   ========================================================== */
.section--steps{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--c-brand), transparent 90%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.section--steps::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:28px 18px, 28px 18px; background-position:0 0, 0 9px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 50%, transparent 85%);
}
.section--steps .section__title{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(6px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--steps .section__title.is-in{ transform:none; opacity:1; }
.section--steps .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background:var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transition: width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--steps .section__title.is-in::after{ width:64px; }
.section--steps .section__sub{
  transform:translateY(8px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--steps .section__sub.is-in{ transform:none; opacity:1; }

/* grid */
.steps-grid{
  counter-reset: step;
  display:grid; gap:12px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  margin:14px 0 4px;
}
@media (max-width:1200px){ .steps-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width:768px){  .steps-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:520px){  .steps-grid{ grid-template-columns: 1fr } }

.step-card{
  position:relative; display:grid; align-content:start; gap:6px;
  padding:14px; border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  transition: transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s ease, border-color .28s ease;
  overflow:clip;
}
.step-card__num{
  position:absolute; inset-inline-end:10px; inset-block-start:10px;
  width:28px; height:28px; border-radius:999px;
  background:var(--c-brand); color:#fff; display:grid; place-items:center;
  font-weight:900; font-size:.9rem; box-shadow:0 10px 24px rgba(232,69,69,.25);
}
.step-card__icon{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:#fff; border:1px solid var(--c-border); color:var(--c-brand);
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}
.step-ico .a{ fill: currentColor; opacity:.95 }
.step-ico .b{ fill: color-mix(in srgb, currentColor, #000 22%); opacity:.85 }

.step-card__title{ margin:6px 0 0; font-weight:900; font-size:1.02rem; color:var(--c-dark) }
.step-card__desc{ margin:0; color:#434a5a; font-weight:600 }

@media (hover:hover){
  .step-card:hover{
    transform: translateY(-8px);
    box-shadow:0 24px 58px rgba(2,6,23,.16);
    border-color: rgba(232,69,69,.28);
  }
  .step-card:hover .step-card__icon{
    background: var(--c-brand); color:#fff; border-color:transparent;
    box-shadow:0 14px 34px rgba(232,69,69,.35);
  }
}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .step-card.reveal{ opacity:.001; transform: translateY(14px); }
  .step-card.reveal.is-in{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}

/* CTA */
.steps__cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }


/* ==========================================================
   Fleet & Equipment — Premium
   ========================================================== */
.section--fleet{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--c-brand), transparent 90%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.section--fleet::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:28px 18px, 28px 18px; background-position:0 0, 0 9px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 50%, transparent 85%);
}

/* Heading animation (consistent) */
.section--fleet .section__title{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(6px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--fleet .section__title.is-in{ transform:none; opacity:1; }
.section--fleet .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transition: width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--fleet .section__title.is-in::after{ width:64px; }
.section--fleet .section__sub{
  transform:translateY(8px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--fleet .section__sub.is-in{ transform:none; opacity:1; }

/* Fleet grid */
.cards--fleet{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:992px){ .cards--fleet{ grid-template-columns: 1fr; } }

.fleet-card{
  position:relative; display:grid; align-content:start; gap:8px;
  padding:14px; border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  transition: transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s ease, border-color .28s ease;
  overflow:clip;
}
.fleet-card:hover{
  transform: translateY(-8px);
  box-shadow:0 24px 58px rgba(2,6,23,.16);
  border-color: rgba(232,69,69,.28);
}

/* media frame (matches hero look) */
.fleet-card .media-frame{
  position:relative; border-radius:14px; overflow:hidden; isolation:isolate;
  box-shadow: var(--shadow-xl, 0 30px 70px rgba(2,6,23,.18));
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(232,69,69,.10), transparent 60%),
    #fff;
  border:1px solid rgba(15,23,42,.06);
}
.fleet-card .media-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(232,69,69,.10), transparent 40%);
  mix-blend-mode:multiply;
}
.fleet-card__badge{
  position:absolute; inset-inline-start:10px; inset-block-start:10px;
  background: var(--c-brand); color:#fff; font-weight:900; font-size:.78rem;
  padding:.28rem .6rem; border-radius:999px; box-shadow:0 10px 20px rgba(232,69,69,.28);
}

.fleet-card__title{ margin:8px 0 0; font-weight:900; font-size:1.06rem; color:var(--c-dark) }
.fleet-card__desc{ margin:0; color:#434a5a; font-weight:600 }

/* Gear row */
.gear{
  display:grid; gap:10px; margin-top:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:768px){ .gear{ grid-template-columns:1fr; } }

.gear__item{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:12px; background:#fff; border:1px solid var(--c-border);
  box-shadow:0 8px 20px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gear__item:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 38px rgba(2,6,23,.14);
  border-color: rgba(232,69,69,.28);
}
.gear__icon{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px;
  background:#fff; border:1px solid var(--c-border); color:var(--c-brand);
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}
.fleet-ico .a{ fill: currentColor; opacity:.95 }
.fleet-ico .b{ fill: color-mix(in srgb, currentColor, #000 22%); opacity:.85 }
.gear__title{ margin:0; font-weight:900; color:var(--c-dark) }
.gear__desc{ margin:.15rem 0 0; color:#434a5a; font-weight:600 }

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .fleet-card.reveal, .gear__item.reveal{ opacity:.001; transform: translateY(14px); }
  .fleet-card.reveal.is-in, .gear__item.reveal.is-in{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}

/* ==========================================================
   Latest Articles — Premium blog cards
   ========================================================== */
.section--blog{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1200px 600px at 92% -12%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.section--blog::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:28px 18px, 28px 18px; background-position:0 0, 0 9px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 50%, transparent 85%);
}

/* Heading animation (consistent with site) */
.section--blog .section__title{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(6px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--blog .section__title.is-in{ transform:none; opacity:1; }
.section--blog .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transition: width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--blog .section__title.is-in::after{ width:64px; }
.section--blog .section__sub{
  transform:translateY(8px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--blog .section__sub.is-in{ transform:none; opacity:1; }

/* Grid */
.posts--grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:992px){ .posts--grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:560px){ .posts--grid{ grid-template-columns: 1fr } }

/* Card */
.post-card{
  position:relative; display:grid; grid-template-rows: auto 1fr; gap:10px;
  padding:14px; border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  transition: transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s ease, border-color .28s ease;
  overflow:clip;
}
.post-card:hover{
  transform: translateY(-8px);
  box-shadow:0 24px 58px rgba(2,6,23,.16);
  border-color: rgba(232,69,69,.28);
}

/* Media frame + sheen */
.post-card__media.media-frame{
  position:relative; border-radius:12px; overflow:hidden; isolation:isolate;
  background: #fff; border:1px solid rgba(15,23,42,.06);
  box-shadow: var(--shadow-xl, 0 30px 70px rgba(2,6,23,.18));
}
.post-card__img{ width:100%; height:auto; display:block; object-fit:cover; aspect-ratio: 16 / 10; }
.post-card__sheen{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(232,69,69,.12), transparent 40%),
    radial-gradient(30% 40% at var(--mx,60%) var(--my,40%), rgba(232,69,69,.18), transparent 60%);
  mix-blend-mode:multiply; opacity:.0; transition: opacity .25s ease;
}
@media (hover:hover){
  .post-card:hover .post-card__sheen{ opacity: .9; }
}

/* Category badge */
.post-card__badge{
  position:absolute; inset-inline-start:10px; inset-block-start:10px;
  background:var(--c-brand); color:#fff; font-weight:900; font-size:.78rem;
  padding:.28rem .6rem; border-radius:999px; box-shadow:0 10px 20px rgba(232,69,69,.28);
}

/* Body */
.post-card__title{ margin:2px 0 4px; font-weight:900; font-size:1.06rem; color:var(--c-dark) }
.post-card__title a{ color:inherit }
.post-card__excerpt{ margin:0; color:#434a5a; font-weight:600 }
.post-card__meta{ margin-top:8px; display:flex; align-items:center; gap:8px; color:var(--c-muted); font-weight:700 }
.post-card__meta .dot{ opacity:.6 }

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .post-card.reveal{ opacity:.001; transform: translateY(14px); }
  .post-card.reveal.is-in{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}

/* ==========================================================
   Testimonials — Premium Slider (RTL-safe, no overflow)
   ========================================================== */
.section--testi{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1200px 600px at 12% -12%, color-mix(in srgb, var(--c-brand), transparent 90%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.section--testi::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:28px 18px, 28px 18px; background-position:0 0, 0 9px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 50%, transparent 85%);
}

/* Heading animation */
.section--testi .section__title{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(6px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--testi .section__title.is-in{ transform:none; opacity:1; }
.section--testi .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transition:width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--testi .section__title.is-in::after{ width:64px; }
.section--testi .section__sub{
  transform:translateY(8px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--testi .section__sub.is-in{ transform:none; opacity:1; }

/* Slider core */
.t-slider{
  position:relative;
  margin-top:8px;
  padding-inline:44px;          /* arrow gutters on desktop */
  overflow:hidden;              /* ⭐ kill horizontal scroll */
  contain: layout paint;
  touch-action: pan-y;
}
@media (max-width:560px){ .t-slider{ padding-inline:16px; } }

/* Track — keep direction LTR in CSS; RTL handled in JS translation only */
.t-track{
  display:flex;
  gap:12px;
  will-change: transform;
  transition: transform .45s cubic-bezier(.2,.65,.2,1);
}

/* Slides — width assigned by JS; never overflow on tiny screens */
.t-slide{
  flex: 0 0 auto;
  width: auto;
  min-width: clamp(240px, 86vw, 420px);
}
@media (max-width:560px){ .t-slide{ min-width: 86vw; } }

/* Card */
.t-card{
  position:relative; display:grid; gap:10px;
  padding:14px; border-radius:14px; background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
}
.t-card__head{ display:flex; align-items:center; gap:10px; }
.t-avatar{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:900; color:#fff; background: var(--c-brand); box-shadow:0 10px 24px rgba(232,69,69,.25); }
.t-meta{ display:grid; line-height:1.2 }
.t-name{ font-weight:900; color:var(--c-dark) }
.t-sub{ color:var(--c-muted); font-weight:700 }
.t-badge{ margin-inline-start:auto; font-size:.78rem; font-weight:900; color:#fff; background: var(--c-brand); padding:.24rem .5rem; border-radius:999px; box-shadow:0 10px 20px rgba(232,69,69,.28); }
.t-rating{ color:#FBBF24; letter-spacing:1px; font-size:16px }
.t-text{ margin:0; color:#434a5a; font-weight:700 }
.t-source{ color:var(--c-brand); font-weight:900; align-self:start }
.t-source:hover{ text-decoration:underline }

/* Arrows + dots */
.t-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:10px; border:1px solid var(--c-border);
  background:#fff; color:var(--c-dark); display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  transition: transform .15s ease, box-shadow .25s ease;
  z-index:2;
  cursor: pointer;
}
.t-prev{ inset-inline-start:2px; } .t-next{ inset-inline-end:2px; }
.t-arrow:hover{ transform:translateY(-50%) scale(1.05); box-shadow:0 14px 34px rgba(2,6,23,.14); }
@media (max-width:560px){ .t-arrow{ display:none; } }

.t-dots{
  display:flex; gap:6px; justify-content:center; margin-top:10px; flex-wrap:wrap;
}
.t-dots button{
  width:8px; height:8px; border-radius:999px; border:0; background:#d1d5db; padding:0; cursor:pointer;
}
.t-dots button[aria-selected="true"]{ background: var(--c-brand); width:18px; border-radius:999px; }

/* Drag cursors */
.t-slider.is-dragging, .t-slider.is-dragging *{ cursor: grabbing !important; }
.t-slider, .t-slider *{ cursor: grab; }

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .t-slide{ opacity:.001; transform: translateY(14px); }
  .t-slide.is-in{ opacity:1; transform:none; transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1); }
}

/* Small phone polish */
@media (max-width:400px){
  .t-card{ padding:12px; }
  .t-avatar{ width:38px; height:38px; border-radius:10px; }
  .t-badge{ display:none; }
}



/* ==========================================================
   FAQ — Premium Accordion
   ========================================================== */
.section--faq{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1200px 600px at 88% -12%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.section--faq::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:28px 18px, 28px 18px; background-position:0 0, 0 9px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 55%, transparent 88%);
}

/* Heading animation (consistent) */
.section--faq .section__title{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(6px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--faq .section__title.is-in{ transform:none; opacity:1; }
.section--faq .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transition: width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--faq .section__title.is-in::after{ width:64px; }
.section--faq .section__sub{
  transform:translateY(8px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--faq .section__sub.is-in{ transform:none; opacity:1; }

/* Accordion cards */
.faq{ display:grid; gap:10px; margin-top:12px; }
.faq__item{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  backdrop-filter:saturate(160%) blur(8px);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.faq__item:focus-within{
  border-color: rgba(232,69,69,.28);
  box-shadow:0 22px 48px rgba(2,6,23,.14);
  transform: translateY(-2px);
}

/* Q button */
.faq__q{ margin:0; }
.faq__btn{
  all:unset; display:flex; align-items:center; gap:10px; cursor:pointer; width:100%;
  padding:14px 14px;
}
.faq__icon{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:#fff; border:1px solid var(--c-border); color:var(--c-brand);
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.chev .a{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition: transform .25s ease; }
.faq__text{ font-weight:900; color:var(--c-dark) }

/* A panel */
.faq__a{ padding:0 14px 12px; color:#434a5a; font-weight:700; }
.faq__a[hidden]{ display:none; }

/* Open state */
.faq__btn[aria-expanded="true"] .chev .a{ transform: rotate(180deg); }
.faq__btn[aria-expanded="true"] + .faq__a,
.faq__item.is-open .faq__a{ display:block; }

/* Reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  .faq__item.reveal{ opacity:.001; transform: translateY(14px); }
  .faq__item.reveal.is-in{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
    transition-delay: var(--rv-delay, 0ms);
  }
}

/* ==========================================================
   Contact & Locations — Premium
   ========================================================== */
.section--contact{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1200px 600px at 14% -12%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.section--contact::before{
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:
    linear-gradient( 25deg, rgba(33,37,41,.20) 1px, transparent 1px),
    linear-gradient(-25deg, rgba(33,37,41,.18) 1px, transparent 1px);
  background-size:28px 18px, 28px 18px; background-position:0 0, 0 9px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 55%, transparent 88%);
}

/* Heading animation (consistent) */
.section--contact .section__title{
  position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--c-dark) 0%, #9aa2b2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(6px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1);
}
.section--contact .section__title.is-in{ transform:none; opacity:1; }
.section--contact .section__title::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  height:3px; width:0; border-radius:3px; background: var(--c-brand);
  box-shadow: 0 6px 14px rgba(232,69,69,.25);
  transition:width .6s cubic-bezier(.2,.65,.2,1) .12s;
}
.section--contact .section__title.is-in::after{ width:64px; }
.section--contact .section__sub{
  transform:translateY(8px); opacity:.001;
  transition:transform .55s cubic-bezier(.2,.65,.2,1), opacity .55s cubic-bezier(.2,.65,.2,1) .05s;
}
.section--contact .section__sub.is-in{ transform:none; opacity:1; }

/* Layout */
.contact-wrap{
  display:grid; gap:12px; margin-top:12px;
  grid-template-columns: 0.9fr 1.1fr;
}
@media (max-width: 992px){ .contact-wrap{ grid-template-columns: 1fr; } }

.contact-card{
  padding:14px; border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
}
.contact-title{ margin:0 0 8px; font-weight:900; color:var(--c-dark) }
.contact-list{ display:grid; gap:8px; margin:0 0 10px }
.contact-list .ico{ font-size:18px }
.link-strong{ font-weight:900; color:var(--c-dark) }
.link{ color:var(--c-dark) }
.hrs{ color:#434a5a; font-weight:700 }
.quick-cta{ display:flex; gap:10px; flex-wrap:wrap }

/* Tabs */
.map-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px;
}
.map-tab{
  padding:.5rem .8rem; border-radius:999px; border:1px solid var(--c-border);
  background:#fff; color:var(--c-dark); font-weight:900;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.map-tab.is-active{ background: var(--c-brand); color:#fff; border-color: transparent; }

/* Panel */
.map-panel[hidden]{ display:none; }
.map-card{
  display:grid; gap:10px; padding:14px; border-radius:14px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
}
.map-meta{ display:grid; gap:6px }
.map-title{ margin:0; font-weight:900; color:var(--c-dark) }
.map-address{ margin:0; color:#434a5a; font-weight:700 }

/* Map frame (click-to-load) */
.map-frame{
  position:relative; border-radius:12px; overflow:hidden; min-height:260px;
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(232,69,69,.10), transparent 50%),
    #fff;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 30px 70px rgba(2,6,23,.18);
}
@media (max-width:520px){ .map-frame{ min-height:220px; } }
.map-load{
  all:unset; cursor:pointer; position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:14px; background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.85));
}
.map-load strong{ font-weight:900; color:var(--c-dark); display:block; }
.map-load small{ color:#434a5a; font-weight:700; opacity:.9 }
.map-load .dot{
  width:38px; height:38px; border-radius:999px; display:inline-grid; place-items:center;
  background:#fff; border:1px solid var(--c-border); color:var(--c-brand);
  box-shadow:0 10px 24px rgba(232,69,69,.25); margin-bottom:8px;
  position:relative;
}
@media (prefers-reduced-motion:no-preference){
  .map-load .dot::after{
    content:""; position:absolute; inset:0; border-radius:999px;
    animation: map-pulse 2.2s ease-out infinite;
    box-shadow:0 0 0 0 rgba(232,69,69,.35);
  }
  @keyframes map-pulse{
    0%{ box-shadow:0 0 0 0 rgba(232,69,69,.35) }
    70%{ box-shadow:0 0 0 18px rgba(232,69,69,0) }
    100%{ box-shadow:0 0 0 0 rgba(232,69,69,0) }
  }
}

/* Embed iframe */
.map-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Reveal (optional, match site) */
@media (prefers-reduced-motion:no-preference){
  .contact-card, .map-card{ opacity:.001; transform: translateY(14px); }
  .contact-card.is-in, .map-card.is-in{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
  }
}

/* ==========================================================
   Final CTA Band — Premium
   ========================================================== */
.section--finalcta{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(1400px 700px at 100% -20%, color-mix(in srgb, var(--c-brand), transparent 85%), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
  padding-block: clamp(24px, 7vw, 92px);
}

.fcta__bg{ position:absolute; inset:0; pointer-events:none; }
.fcta__blob{
  position:absolute; width:48vw; height:48vw; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(232,69,69,.25), rgba(232,69,69,0) 60%);
  filter: blur(34px); inset-inline-start:-18vw; inset-block-start:-10vw; opacity:.55;
}
.fcta__ring{
  position:absolute; width:60vw; height:60vw; border-radius:999px;
  border: 1px solid rgba(232,69,69,.18); inset-inline-end:-28vw; inset-block-start:-12vw;
}
.fcta__mesh{
  position:absolute; inset-inline-end:8vw; inset-block-end:-4vw; width:360px; height:220px; opacity:.22;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 14px 14px; color:#e84545;
}

.fcta__wrap{
  position:relative; z-index:1;
  padding: clamp(16px, 3vw, 22px);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 30px 70px rgba(2,6,23,.12);
  backdrop-filter: saturate(160%) blur(10px);
  text-align:center;
}

.fcta__eyebrow{
  display:inline-block; font-weight:900; color:var(--c-brand);
  background: rgba(232,69,69,.08); border:1px solid rgba(232,69,69,.25);
  padding:.28rem .6rem; border-radius:999px; box-shadow:0 8px 20px rgba(232,69,69,.18);
  margin: 0;
}
.fcta__title{
  margin:10px 0 6px; font-weight:900; letter-spacing:.2px; line-height:1.12;
  font-size: clamp(24px, 4.6vw, 44px); color: var(--c-dark);
  position:relative; display:inline-block;
}
.fcta__shine{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.0) 40%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.0) 60%, transparent 100%);
  transform: translateX(-120%); mix-blend-mode: screen; border-radius: 8px;
}
.fcta__sub{ margin:0 0 12px; color:#434a5a; font-weight:700 }

.fcta__actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;
}
.fcta__btn{ min-width: min(220px, 90%); }
.fcta__btn--call{ --bg: var(--c-brand); }
.fcta__btn--quote{ --bg: var(--c-brand); }
.fcta__btn--wa{ --bg:#fff; --fg:var(--c-wa); border-color: var(--c-wa); }
.fcta__btn .wa-ico{ display:inline-block; vertical-align:middle; }
.fcta__btn .wa-text{ margin-inline-start:6px; }

.fcta__trust{
  margin-top:12px; display:flex; gap:8px; justify-content:center; align-items:center;
}
.fcta__trust .stars{ color:#FBBF24; letter-spacing:2px; font-size:16px }
.fcta__trust .trust-text{ color:var(--c-muted); font-weight:800 }

/* Reveal + motion polish */
@media (prefers-reduced-motion:no-preference){
  .section--finalcta .fcta__wrap{ opacity:.001; transform: translateY(14px); }
  .section--finalcta.is-in .fcta__wrap{
    opacity:1; transform:none;
    transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1);
  }
  .section--finalcta .fcta__ring{ animation: f-ring 22s linear infinite; }
  .section--finalcta .fcta__blob{ animation: f-blob 16s ease-in-out infinite alternate; }
  .section--finalcta .fcta__shine{ animation: f-shine 3.6s ease-in-out infinite 1.2s; }
  @keyframes f-ring{ to{ transform: rotate(360deg); } }
  @keyframes f-blob{ from{ transform: translateY(0);} to{ transform: translateY(16px);} }
  @keyframes f-shine{
    0%{ transform: translateX(-120%); opacity:0; }
    15%{ opacity:1; }
    40%{ transform: translateX(120%); opacity:0; }
    100%{ transform: translateX(120%); opacity:0; }
  }
}

 /* ===== Premium Footer ===== */
  .site-footer{ position:relative; isolation:isolate; overflow:hidden;
    background:
      radial-gradient(1100px 580px at 100% -20%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
      linear-gradient(180deg,#fbfcff 0%, #f7f8fb 100%);
    padding-block: clamp(18px, 5vw, 36px);
    border-top:1px solid rgba(15,23,42,.06);
  }
  .footer__bg{ position:absolute; inset:0; pointer-events:none; }
  .footer__blob{ position:absolute; width:46vw; height:46vw; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(232,69,69,.22), rgba(232,69,69,0) 60%);
    filter: blur(30px); inset-inline-start:-18vw; inset-block-start:-12vw; opacity:.55;
  }
  .footer__ring{ position:absolute; width:60vw; height:60vw; border-radius:999px;
    border:1px solid rgba(232,69,69,.18); inset-inline-end:-28vw; inset-block-start:-18vw;
  }
  .footer__mesh{ position:absolute; inset-inline-end:8vw; inset-block-end:-4vw; width:280px; height:180px; opacity:.18;
    background-image: radial-gradient(currentColor 1.2px, transparent 1.2px); background-size:14px 14px; color:#e84545;
  }
  .footer__inner{ position:relative; z-index:1; display:grid; gap:12px;
    grid-template-columns: 1fr auto auto;
    align-items:center;
  }
  @media (max-width:900px){ .footer__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.footer__logo{
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
  }
  .footer__logo img{     
    max-width: 100%;
    min-height: 100%;
    object-fit: cover; 
  }
  .footer__tag{ margin:6px 0 0; color:#434a5a; font-weight:700 }

  .footer__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; color:var(--c-muted); font-weight:800 }
  @media (max-width:900px){ .footer__meta{ justify-content:center; } }
  .footer__sep{ opacity:.6 }
  .footer__actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap }
  @media (max-width:900px){ .footer__actions{ justify-content:center; } }

  /* ===== Premium Back-to-top (unchanged basics) ===== */
.fab{ position:fixed; z-index:1200; display:inline-flex; align-items:center; gap:8px;
  height:48px; padding-inline:14px; border-radius:999px; border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.86); color:var(--c-dark);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 14px 36px rgba(2,6,23,.16);
  transition: transform .18s ease, box-shadow .25s ease, opacity .18s ease; }
.fab--top{ inset-inline-end:max(16px, env(safe-area-inset-right)); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  opacity:0; pointer-events:none; }
.fab--top.is-on{ opacity:1; pointer-events:auto; }
.fab__icon{ display:inline-grid; place-items:center; width:26px; height:26px; color:var(--c-brand); }
.fab__label{ font-weight:900; color:var(--c-dark) }
html[dir="rtl"] .fab--top{ inset-inline-start:max(16px, env(safe-area-inset-left)); inset-inline-end:auto; }

/* ===== Two-Action CTA Dock ===== */
.dock{
  position:fixed; z-index:1200;
  inset-inline-end:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; gap:8px; align-items:center;
  padding:6px; border-radius:16px;
  background: rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 18px 46px rgba(2,6,23,.18);
  transform: translateY(12px); opacity:0;
  transition: transform .28s cubic-bezier(.2,.65,.2,1), opacity .28s cubic-bezier(.2,.65,.2,1);
}
.dock.is-in{ transform:none; opacity:1; }
html[dir="rtl"] .dock{ inset-inline-start:max(16px, env(safe-area-inset-left)); inset-inline-end:auto; }

/* Buttons inside dock */
.dock__btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  height:44px; padding-inline:12px; border-radius:12px; font-weight:900;
  border:1px solid transparent; background:#fff; color:var(--c-dark);
  box-shadow:0 10px 24px rgba(2,6,23,.10);
  transition: transform .16s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.dock__btn:focus-visible{ outline:2px solid var(--c-brand); outline-offset:3px; }
.dock__btn:hover{ transform: translateY(-2px); box-shadow:0 18px 36px rgba(2,6,23,.18); }

.dock__btn--call{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9)) padding-box,
    radial-gradient(140% 140% at 0% 0%, rgba(33,37,41,.12), rgba(33,37,41,.03)) border-box;
  border:1px solid rgba(15,23,42,.08);
}
.dock__btn--wa{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)) padding-box,
    radial-gradient(120% 120% at 100% 0%, rgba(232,69,69,.28), rgba(232,69,69,.05)) border-box;
  border:1px solid transparent;
  color:var(--c-dark);
}
.dock__btn--wa .dock__ico{ color:var(--c-brand); }

.dock__ico{ display:inline-grid; place-items:center; width:24px; height:24px; color:var(--c-brand); }
.dock__label{ color:var(--c-dark); }

.dock__btn .ripple{
  position:absolute; border-radius:50%; transform: scale(0); opacity:.28; background: currentColor; width:10px; height:10px; pointer-events:none;
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple{ to{ transform: scale(14); opacity:0; } }

/* Gentle WA pulse */
.dock__btn--wa .dock__pulse{
  position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(232,69,69,.26);
}
@media (prefers-reduced-motion:no-preference){
  .dock__btn--wa .dock__pulse{ animation: wa-pulse 2.2s ease-out infinite; }
  @keyframes wa-pulse{
    0%{ box-shadow:0 0 0 0 rgba(232,69,69,.26) }
    70%{ box-shadow:0 0 0 18px rgba(232,69,69,0) }
    100%{ box-shadow:0 0 0 0 rgba(232,69,69,0) }
  }
}

/* Compact mode (tiny phones: icon-only) */
@media (max-width:380px){
  .dock__label{ display:none; }
  .dock__btn{ padding-inline:10px; width:44px; justify-content:center; }
}

/* Keep above mobile drawer overlay */
body.no-scroll .dock, body.no-scroll .fab--top{ z-index:1300; }

/* Reading progress */
#readProgress{ position:fixed; inset-inline:0; top:0; height:3px; z-index:1201; background:transparent }
#readProgress > span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--c-brand), color-mix(in srgb, var(--c-brand), #fff 25%));
  width:0%;
  box-shadow:0 2px 10px rgba(232,69,69,.35);
}

/* Post hero */
.post-hero{ position:relative; overflow:clip; background:
  radial-gradient(1200px 600px at 88% -12%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
  linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%); }
.post-hero__bg{ position:absolute; inset:0; pointer-events:none; }
.post-hero__bg .blob{ position:absolute; width:42vw; height:42vw; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(232,69,69,.25), rgba(232,69,69,0) 60%);
  filter: blur(30px); inset-inline-start:-18vw; inset-block-start:-10vw; opacity:.6; }
.post-hero__bg .ring{ position:absolute; width:52vw; height:52vw; border-radius:999px; border:1px solid rgba(232,69,69,.18);
  inset-inline-end:-25vw; inset-block-start:-12vw; }
.post-hero__bg .mesh{ position:absolute; inset-inline-end:8vw; inset-block-end:-4vw; width:300px; height:180px; opacity:.22;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px); background-size:14px 14px; color:#e84545; }

.post-hero__inner{ position:relative; z-index:1; padding-block: clamp(22px, 6vw, 72px); display:grid; gap:14px; }
.post-head .post-eyebrow{ display:flex; align-items:center; gap:8px; color:var(--c-muted); font-weight:800; flex-wrap:wrap }
.post-head .chip{ display:inline-block; background:#fff; border:1px solid var(--c-border);
  padding:.28rem .6rem; border-radius:999px; font-weight:900; }
.post-head .sep{ opacity:.6 }
.post-title{ margin:6px 0; font-weight:900; font-size: clamp(26px, 4.4vw, 42px); color:var(--c-dark) }

.post-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.author{ display:inline-flex; align-items:center; gap:8px; font-weight:900; color:var(--c-dark) }
.author .avatar{ border-radius:50%; box-shadow:0 6px 16px rgba(2,6,23,.12) }

.post-media{ margin-top:6px; }

/* Layout below */
.post-grid{ display:grid; grid-template-columns: 300px 1fr; gap:16px; }
@media (max-width: 992px){ .post-grid{ grid-template-columns:1fr; } }

/* TOC */
.post-aside{ position:sticky; top: calc(var(--topbar-h) + var(--header-h) + 12px); height:max-content }
.toc{ padding:12px; border-radius:12px }
.toc__toggle{ all:unset; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  width:100%; padding:6px 0; font-weight:900; color:var(--c-dark) }
.toc__body{ margin-top:6px }
.toc__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.toc__list a{ display:block; padding:6px 8px; border-radius:8px; color:var(--c-dark); font-weight:700; border:1px solid transparent }
.toc__list a:hover{ color:var(--c-brand); border-color:var(--c-border) }

/* Content */
.post-entry{ min-width:0 }
.post-entry .entry-content{ color:#2b3342; font-weight:600 }
.post-entry .entry-content h2, .post-entry .entry-content h3{ color:var(--c-dark); font-weight:900; margin:1.2em 0 .4em }
.post-entry .entry-content img{ border-radius:14px; box-shadow:0 10px 26px rgba(2,6,23,.08); margin:10px auto; height:auto; max-width:100% }
.post-entry .entry-content blockquote{ margin:1em 0; padding:12px 14px; border-inline-start:4px solid var(--c-brand);
  background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(2,6,23,.06); }

/* Tags + share */
.post-tags{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap }
.post-tags .tag{ display:inline-block; padding:.28rem .6rem; border:1px solid var(--c-border); border-radius:999px; font-weight:900; background:#fff }
.share-inline .btn--sm{ padding:.4rem .7rem; font-size:14px }
.share-bottom{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap }
.share-bottom .label{ color:var(--c-muted); font-weight:800 }
.share-bottom .sbtn{ display:inline-block; padding:.35rem .6rem; border:1px solid var(--c-border); border-radius:999px; background:#fff; font-weight:900 }

/* Author card */
.author-card{ display:grid; grid-template-columns: 68px 1fr; gap:12px; margin-top:16px }
.author-card .author-media img{ border-radius:50% }
.author-bio{ margin:.2em 0 0; color:#434a5a; font-weight:700 }

/* Prev/Next */
.post-nav{ margin-top:16px; display:flex; justify-content:space-between; font-weight:900 }
.post-nav a{ color:var(--c-dark) }
.post-nav a:hover{ color:var(--c-brand) }

/* Related */
.cards--related{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:992px){ .cards--related{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .cards--related{ grid-template-columns:1fr } }
.r-card{ padding:0; overflow:hidden }
.r-thumb img{ display:block; width:100%; height:auto }
.r-body{ padding:12px }
.r-title{ margin:0 0 4px; font-size:1.02rem; font-weight:900 }
.r-meta{ color:var(--c-muted); font-weight:800 }

/* Reveal animation reuse */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:.001; transform: translateY(14px); }
  .reveal.is-in{ opacity:1; transform:none; transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1); }
}
/* Optional hard fallback for no-JS */
noscript .reveal { opacity: 1 !important; transform: none !important; }

/* Keep progress bar under sticky header/topbar if present */
#readProgress{ top: calc(var(--topbar-h, 0px)); }

/* Make sticky TOC account for header height */
.post-aside{ top: calc(var(--topbar-h) + var(--header-h) + 12px); }


/* ===== Blog Hero ===== */
.blog-hero{ position:relative; overflow:clip; background:
  radial-gradient(1200px 600px at 90% -12%, color-mix(in srgb, var(--c-brand), transparent 88%), transparent 50%),
  linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%); }
.blog-hero__bg{ position:absolute; inset:0; pointer-events:none; }
.blog-hero__bg .blob{ position:absolute; width:42vw; height:42vw; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(232,69,69,.25), rgba(232,69,69,0) 60%);
  filter: blur(30px); inset-inline-start:-18vw; inset-block-start:-10vw; opacity:.6; }
.blog-hero__bg .ring{ position:absolute; width:52vw; height:52vw; border-radius:999px; border:1px solid rgba(232,69,69,.18);
  inset-inline-end:-25vw; inset-block-start:-12vw; }
.blog-hero__bg .mesh{ position:absolute; inset-inline-end:8vw; inset-block-end:-4vw; width:300px; height:180px; opacity:.22;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px); background-size:14px 14px; color:#e84545; }
.blog-hero__inner{ position:relative; z-index:1; padding-block: clamp(26px, 6vw, 82px); }
.blog-head{ text-align:center; }
.blog-head .eyebrow{ display:inline-block; font-weight:900; color:var(--c-brand);
  background: rgba(232,69,69,.08); border:1px solid rgba(232,69,69,.25);
  padding:.28rem .6rem; border-radius:999px; box-shadow:0 8px 20px rgba(232,69,69,.18); margin:0; }
.blog-title{ margin:10px 0 6px; font-weight:900; font-size: clamp(26px, 4.6vw, 44px); color: var(--c-dark) }
.blog-sub{ margin:0; color:#434a5a; font-weight:700 }

/* ===== Filters ===== */
.filters{
  position:sticky; top: calc(var(--topbar-h) + var(--header-h) + 10px);
  padding:12px; border-radius:12px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  z-index: 5;
}
.filters.is-stuck{ box-shadow:0 18px 36px rgba(2,6,23,.12); }
.filters__grid{ display:grid; gap:10px; grid-template-columns: 1.2fr 1fr 1fr auto; align-items:end; }
@media (max-width: 992px){ .filters__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .filters__grid{ grid-template-columns: 1fr; } }
.field{ display:grid; gap:6px }
.label{ font-weight:900; color:var(--c-dark) }
.input, .select{
  border:1px solid var(--c-border); border-radius:10px; padding:.6rem .7rem; font:inherit; background:#fff; font-weight:600;
}
.filters__actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }

/* ===== Cards grid ===== */
.cards--blog{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top:12px; }
@media (max-width: 992px){ .cards--blog{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .cards--blog{ grid-template-columns: 1fr; } }

.b-card{ padding:0; overflow:hidden; border:1px solid var(--c-border); border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(2,6,23,.05) }
.b-thumb img{ display:block; width:100%; height:auto }
.b-body{ padding:12px }
.b-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--c-muted); font-weight:800 }
.b-meta .chip{ display:inline-block; background:#fff; border:1px solid var(--c-border); padding:.2rem .5rem; border-radius:999px; font-weight:900 }
.b-title{ margin:6px 0; font-weight:900; font-size:1.05rem; color:var(--c-dark) }
.b-excerpt{ margin:0; color:#2b3342; font-weight:600 }
.b-actions{ margin-top:10px }

/* Pagination */
.pagination ul{ display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:14px 0 0 }
.pagination a, .pagination span{
  display:inline-block; padding:.35rem .7rem; border:1px solid var(--c-border); border-radius:999px; background:#fff; font-weight:900; color:var(--c-dark);
}
.pagination .current{ border-color: transparent; background: var(--c-brand); color:#fff }

/* Empty */
.empty{ padding:16px; border-radius:12px; text-align:center }
.empty h3{ margin:0 0 6px; font-weight:900 }

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:.001; transform: translateY(14px); }
  .reveal.is-in{ opacity:1; transform:none; transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1); }
}

/* Chip bar under hero (archives) */
.chipbar{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.chipbar .chip{
  display:inline-block; background:#fff; border:1px solid var(--c-border);
  padding:.28rem .6rem; border-radius:999px; font-weight:900; color:var(--c-dark);
}
.chipbar .chip:hover{ color:var(--c-brand); }
.chipbar .chip.is-active{
  background: var(--c-brand); color:#fff; border-color: transparent;
  box-shadow:0 10px 24px rgba(232,69,69,.22);
}

/* ================================ */
/* ===== About — Hero ===== */
/* ================================ */
.about-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 90% -12%, rgba(232,69,69,.10), transparent 50%),
    linear-gradient(180deg,#fff 0%, #fbfcff 60%, #f7f8fb 100%);
}
.about-hero__bg{ position:absolute; inset:0; pointer-events:none; }
.about-hero__bg .blob{ position:absolute; width:42vw; height:42vw; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(232,69,69,.25), rgba(232,69,69,0) 60%);
  filter: blur(30px); inset-inline-start:-18vw; inset-block-start:-12vw; opacity:.6; }
.about-hero__bg .ring{ position:absolute; width:52vw; height:52vw; border-radius:999px; border:1px solid rgba(232,69,69,.18);
  inset-inline-end:-25vw; inset-block-start:-12vw; }
.about-hero__bg .mesh{ position:absolute; inset-inline-end:8vw; inset-block-end:-4vw; width:300px; height:180px; opacity:.22;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px); background-size:14px 14px; color:#e84545; }

.about-hero__inner{
  position:relative; z-index:1;
  display:grid; gap:28px; align-items:center;
  padding-block: clamp(26px, 6vw, 86px);
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width:992px){ .about-hero__inner{ grid-template-columns:1fr; } }

.about-title{ margin:10px 0 6px; font-weight:900; font-size: clamp(28px, 4.6vw, 46px); color: var(--c-ink) }
.about-sub{ margin:0; color:#434a5a; font-weight:700 }
.about-hero__ctas{ display:flex; gap:10px; margin-top:12px }

/* Tilt frame reuse */
.media-frame{ position:relative; border-radius:18px; overflow:hidden; isolation:isolate;
  box-shadow: var(--shadow-xl); background:#fff; border:1px solid rgba(15,23,42,.06); }
.media-frame__shine{ content:""; position:absolute; inset:-20% -20%;
  background: radial-gradient(45% 45% at var(--mx,50%) var(--my,50%), rgba(232,69,69,.14), transparent 60%);
  pointer-events:none; mix-blend-mode:multiply; }

/* ===== Who we are ===== */
.about-who__grid{ display:grid; gap:16px; grid-template-columns: .9fr 1.1fr; align-items:center; }
@media (max-width:992px){ .about-who__grid{ grid-template-columns:1fr; } }
.about-list{ display:grid; gap:8px; margin:12px 0 0; font-weight:800; color: var(--c-dark) }

/* ===== Stats ===== */
.about-stats{
  background: linear-gradient(180deg,#fff 0%, #f9fafb 100%);
  border-block:1px solid var(--c-border);
}
.about-stats__grid{
  display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:992px){ .about-stats__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .about-stats__grid{ grid-template-columns: 1fr; } }
.stat{
  text-align:center; padding:14px; background:#fff; border:1px solid var(--c-border);
  border-radius:14px; box-shadow:0 6px 18px rgba(2,6,23,.05);
}
.stat__num{ font-size: clamp(28px, 4.5vw, 40px); font-weight:900; color: var(--c-brand) }
.stat__label{ font-weight:800; color: var(--c-dark) }

/* ===== Values ===== */
.cards--values{ display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:992px){ .cards--values{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .cards--values{ grid-template-columns: 1fr; } }
.value-card{ text-align:center; }
.value-card__icon{
  display:inline-grid; place-items:center; width:58px; height:58px; border-radius:14px;
  color:#fff; background: var(--c-brand); margin-bottom:8px;
  box-shadow:0 10px 24px rgba(232,69,69,.25);
}
.value-card__icon svg{ width:26px; height:26px; display:block; }
.value-card:hover .value-card__icon{ background:#fff; color: var(--c-brand); border:1px solid var(--c-border); }

/* ===== Process ===== */
.process{ display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: p 0; }
@media (max-width:992px){ .process{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .process{ grid-template-columns: 1fr; } }
.process__step{
  padding:14px; border-radius:14px; background:#fff; border:1px solid var(--c-border);
  box-shadow:0 6px 18px rgba(2,6,23,.05);
}
.process__step .p-num{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background: var(--c-brand); color:#fff; font-weight:900; box-shadow:0 10px 24px rgba(232,69,69,.25);
  margin-inline-end:6px;
}

/* ===== CTA ===== */
.about-cta .cta h2{ font-weight:900 }
.about-cta .cta p{ font-weight:700 }

/* ===== Reveal safe (only when JS) ===== */
.js .reveal{ opacity:.001; transform: translateY(14px); }
.js .reveal.is-in{ opacity:1; transform:none; transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1); }


/* ==========================================================================
   10) Motion polish (respect reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* header entrance */
  .header{ transform:translateY(-8px); opacity:.001; transition:transform .45s ease, opacity .45s ease }
  .header.is-in{ transform:none; opacity:1 }
  .navmenu .menu > li{ transform:translateY(-6px); opacity:0; transition:transform .35s ease, opacity .35s ease }
  .header.is-in .navmenu .menu > li{ transform:none; opacity:1 }
  .header.is-in .navmenu .menu > li:nth-child(1){ transition-delay:.06s }
  .header.is-in .navmenu .menu > li:nth-child(2){ transition-delay:.12s }
  .header.is-in .navmenu .menu > li:nth-child(3){ transition-delay:.18s }
  .header.is-in .navmenu .menu > li:nth-child(4){ transition-delay:.24s }
  .header.is-in .navmenu .menu > li:nth-child(5){ transition-delay:.30s }

  /* hero micro-motions */
  .hero__blob{ animation: floaty 14s ease-in-out infinite alternate }
  .hero__ring{ animation: slow-rotate 22s linear infinite }
}
@keyframes floaty{ from{ transform:translateY(0) } to{ transform:translateY(18px) } }
@keyframes slow-rotate{ to{ transform:rotate(360deg) } }