.elementor-kit-12{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Barlow Condensed";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Barlow Condensed";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;font-family:"Inter", Sans-serif;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-kit-12 h1{font-family:"Barlow Condensed", Sans-serif;}.elementor-kit-12 h2{font-family:"Barlow Condensed", Sans-serif;}.elementor-kit-12 h3{font-family:"Barlow Condensed", Sans-serif;}.elementor-kit-12 h4{font-family:"Barlow Condensed", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ================================================================
   STM Cranes — Design Tokens & Component CSS
   Paste the full contents of this file into:
   Elementor → Site Settings → Custom CSS
   ================================================================ */

/* ==========================================================================
   STM CRANES — stmcranes.ae
   Switzerland Transport & Maintenance LLC
   Design DNA: Deep Construction Blue + Construction Yellow, industrial,
   high contrast, bold headings, mobile-first.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Blues */
  --blue-950: #06101F;
  --blue-900: #0A1B33;
  --blue-800: #0E2748;
  --blue-700: #143764;
  --blue-600: #1B4B87;
  --blue-500: #2563AE;

  /* Construction yellow */
  --yellow: #FFC20E;
  --yellow-600: #E5A800;
  --yellow-700: #B88600;
  --yellow-100: #FFF6DA;
  /* Same gold hue, darkened only for small text on light backgrounds so it
     clears WCAG AA (4.5:1). Not a new accent colour. */
  --gold-ink: #8C6400;

  /* Neutrals */
  --ink: #0E1726;
  --body: #3D4859;
  --muted: #6B7688;
  --line: #DFE4EB;
  --line-soft: #EDF0F4;
  --bg: #FFFFFF;
  --bg-alt: #F5F7FA;
  --white: #FFFFFF;

  /* Status */
  --danger: #C62828;
  --ok: #1E8E4E;

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --s10: 120px;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  /* Industrial geometry: near-square corners, not rounded "startup" cards */
  --radius: 2px;
  --radius-lg: 3px;

  /* Effects — restrained, no decorative glow */
  --shadow-sm: 0 1px 2px rgba(6,16,31,.07);
  --shadow: 0 8px 24px rgba(6,16,31,.10);
  --shadow-lg: 0 22px 56px rgba(6,16,31,.20);

  --header-h: 68px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue-950); text-decoration: underline; }
ul, ol { margin: 0 0 var(--s5); padding-left: 1.25em; }
li { margin-bottom: var(--s2); }
p { margin: 0 0 var(--s5); }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.06;
  margin: 0 0 var(--s4);
  font-weight: 700;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.5rem, 7.4vw, 4.35rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; }
h2 { font-size: clamp(2rem, 5vw, 3.05rem); font-weight: 800; text-transform: uppercase; }
h3 { font-size: clamp(1.32rem, 2.9vw, 1.62rem); font-weight: 700; letter-spacing: 0; }
h4 { font-size: 1.16rem; font-weight: 700; }
h2 + p.lede, h1 + p.lede { margin-top: calc(var(--s4) * -1 + var(--s2)); }

/* Gold rule under section headings — industrial, consistent, no decoration */
.section-head h2::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--yellow); margin-top: var(--s4);
}
.section-head.center h2::after { margin-left: auto; margin-right: auto; }

.lede { font-size: 1.14rem; line-height: 1.6; color: var(--body); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--sans);
  font-size: .8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .18em; color: var(--gold-ink);
  margin: 0 0 var(--s4);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--yellow); flex: none; }
.eyebrow--light { color: var(--yellow); }

.section-head { max-width: 720px; margin-bottom: var(--s7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: var(--s8) 0; }
@media (min-width: 900px) { .section { padding: var(--s9) 0; } }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--blue-900); color: rgba(255,255,255,.82); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--yellow); }
.section--tight { padding-top: var(--s7); padding-bottom: var(--s7); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 640px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .g-3 { grid-template-columns: repeat(3, 1fr); }
                             .g-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }

.split { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1.35fr .9fr; gap: var(--s8); } }
@media (min-width: 960px) { .split--even { grid-template-columns: 1fr 1fr; } }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans);
  font-size: .92rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 15px 28px; min-height: 52px;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none !important;
  transition: transform .14s ease, background-color .16s ease, box-shadow .16s ease,
              color .16s ease, border-color .16s ease;
  text-align: center; line-height: 1.15;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.btn--primary {
  background: var(--yellow); color: var(--blue-950);
  box-shadow: inset 0 -4px 0 rgba(184,134,0,.85);
}
.btn--primary:hover { background: #FFD044; color: var(--blue-950); box-shadow: inset 0 -4px 0 var(--yellow-700); transform: translateY(-2px); }
.btn--primary:focus-visible { outline-color: var(--blue-950); }

.btn--dark { background: var(--blue-800); color: var(--white); }
.btn--dark:hover { background: var(--blue-700); color: var(--white); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--yellow); color: var(--white); transform: translateY(-2px); }

.btn--outline { background: transparent; color: var(--blue-900); border-color: var(--line); }
.btn--outline:hover { background: var(--blue-900); border-color: var(--blue-900); color: var(--white); transform: translateY(-2px); }

.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .ba__panel { transition: none !important; }
  .btn:hover, .card:hover { transform: none !important; }
}

/* ---------- 6. Header ---------------------------------------------------- */
.topbar {
  background: var(--blue-950); color: rgba(255,255,255,.75);
  font-size: .8rem; letter-spacing: .02em;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 38px; flex-wrap: wrap; }
.topbar a { color: var(--white); font-weight: 600; }
.topbar strong { color: var(--yellow); font-weight: 700; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; }
@media (max-width: 719px) { .topbar__item--hide { display: none; } .topbar .wrap { justify-content: center; } }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--blue-900);
  border-bottom: 3px solid var(--yellow);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none !important; }
/* Flexible logo slot. Reserves height and allows generous width so a future
   horizontal STM logo can drop in without changing header height or nav layout.
   When the real logo arrives, swap the inner contents for .brand__img. */
.brand__logo {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 44px; max-width: 280px;
}
@media (min-width: 1060px) { .brand__logo { max-width: 340px; } }
.brand__img { display: block; height: auto; max-height: 44px; max-width: 100%; width: auto; }
.brand__text { display: block; min-width: 0; }
.brand__mark {
  width: 44px; height: 44px; flex: none; border-radius: 3px;
  background: var(--yellow); color: var(--blue-950);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em;
}
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--white); text-transform: uppercase; letter-spacing: .01em; }
.brand__name span { color: var(--yellow); }
.brand__sub { display: block; font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 3px; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; min-width: 44px; min-height: 44px; padding: 0 11px;
  background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--white); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { display: none; }
.nav.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blue-900); border-bottom: 3px solid var(--yellow);
  padding: var(--s3) var(--s5) var(--s5);
  max-height: calc(100vh - var(--header-h) - 38px); overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.nav a {
  display: block; padding: 13px 0;
  color: rgba(255,255,255,.9); font-weight: 600; font-size: .96rem;
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--yellow); text-decoration: none; }
.nav .sub { padding: 0 0 var(--s3) var(--s4); border-left: 2px solid rgba(255,255,255,.14); margin-left: 2px; }
.nav .sub a { padding: 8px 0; font-size: .89rem; font-weight: 500; color: rgba(255,255,255,.7); }
.nav .sub-label { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); padding: 12px 0 4px; }
.header-cta { display: none; }

@media (min-width: 1060px) {
  .nav-toggle { display: none; }
  .nav { display: block; }
  .nav > ul { display: flex; align-items: center; gap: var(--s5); }
  .nav > ul > li { border: 0; position: relative; }
  .nav > ul > li > a { padding: 22px 0; font-size: .88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .nav > ul > li.has-sub > a::after { content: "▾"; font-size: .7em; margin-left: 6px; opacity: .6; }
  .nav .sub {
    display: block; position: absolute; top: 100%; left: -18px;
    min-width: 288px; padding: var(--s3) 0; margin: 0;
    background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--yellow);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav > ul > li:hover .sub, .nav > ul > li:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav .sub a { padding: 10px 20px; color: var(--body); font-size: .9rem; font-weight: 500; }
  .nav .sub a:hover { background: var(--bg-alt); color: var(--blue-700); }
  .nav .sub-label { display: none; }
  .header-cta { display: inline-flex; margin-left: var(--s5); padding: 12px 20px; min-height: 44px; font-size: .85rem; }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate;
  background: var(--blue-900);
  color: rgba(255,255,255,.85);
  padding: var(--s8) 0 var(--s7);
  overflow: hidden;
}
@media (min-width: 900px) { .hero { padding: var(--s10) 0 var(--s9); } }
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  object-fit: cover; width: 100%; height: 100%;
  opacity: .38; filter: grayscale(.45) contrast(1.08);
}
/* Navy overlay guarantees text contrast whatever photograph is dropped in */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(6,16,31,.97) 0%, rgba(6,16,31,.90) 42%, rgba(10,27,51,.72) 100%);
}
/* Gold baseline anchoring the hero to the page */
.hero { border-bottom: 4px solid var(--yellow); }
.hero__stripe {
  position: absolute; top: 0; bottom: 0; right: -60px; width: 190px; z-index: -1;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 18px, transparent 18px 40px);
  opacity: .16; transform: skewX(-12deg);
}
.hero h1 { color: var(--white); max-width: 16ch; text-shadow: 0 2px 18px rgba(6,16,31,.5); }
.hero__sub { font-size: 1.12rem; line-height: 1.62; max-width: 56ch; color: rgba(255,255,255,.86); margin-bottom: var(--s6); }
.hero__inner { max-width: 760px; }
.hero .btn-row { margin-bottom: var(--s6); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--s5);
}
.hero__proof li {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.92);
  letter-spacing: .01em;
}
.hero__proof li::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--yellow); transform: rotate(45deg);
}

/* Hero layout: single column by default; two columns when a form is present.
   On mobile the form stacks naturally below the hero copy and CTAs. */
.hero__grid { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 1060px) {
  .hero--form .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr); gap: var(--s8); align-items: center; }
  .hero--form .hero__inner { max-width: none; }
  .hero--form h1 { max-width: 15ch; }
  .hero--form .hero__sub { max-width: 52ch; }
}

/* Quick Lift Quote panel — reads as a works document, not a generic contact form */
.hero-form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-form__head {
  background: var(--blue-950);
  border-bottom: 4px solid var(--yellow);
  padding: var(--s5) var(--s5) var(--s4);
}
.hero-form__title {
  font-size: 1.5rem; margin-bottom: 5px; color: var(--white);
  text-transform: uppercase; letter-spacing: .01em;
}
.hero-form__sub { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.72); margin: 0; }
.hero-form__grid { display: grid; gap: var(--s3); padding: var(--s5); }
.hero-form .field label {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--blue-900);
}
.hero-form .field input, .hero-form .field select, .hero-form .field textarea { padding: 12px 13px; }
.hero-form .field textarea { min-height: 0; }
.hero-form__note { font-size: .83rem; line-height: 1.5; color: var(--muted); margin: 2px 0 0; }
.hero-form__note a { font-weight: 800; color: var(--blue-900); }
@media (min-width: 560px) and (max-width: 1059px) {
  .hero-form__grid { grid-template-columns: 1fr 1fr; }
  .hero-form__grid > .field:nth-last-child(3),
  .hero-form__grid > .btn,
  .hero-form__grid > .hero-form__note { grid-column: 1 / -1; }
}

.hero--compact { padding: var(--s7) 0 var(--s7); }
@media (min-width: 900px) { .hero--compact { padding: var(--s8) 0; } }
.hero--compact h1 { max-width: 20ch; }

/* Breadcrumbs */
.crumbs { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: var(--s5); }
.crumbs a { color: rgba(255,255,255,.78); }
.crumbs a:hover { color: var(--yellow); }
.crumbs span { padding: 0 7px; opacity: .5; }

/* ---------- 8. Trust strip ---------------------------------------------- */
.trustbar { background: var(--yellow); }
.trustbar .wrap { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .trustbar .wrap { grid-template-columns: repeat(4, 1fr); } }
.trustbar__item {
  padding: var(--s5) var(--s4);
  border-right: 1px solid rgba(10,27,51,.13);
  border-bottom: 1px solid rgba(10,27,51,.13);
  text-align: center;
}
@media (min-width: 900px) { .trustbar__item { border-bottom: 0; } .trustbar__item:last-child { border-right: 0; } }
@media (max-width: 899px) { .trustbar__item:nth-child(2n) { border-right: 0; }
                            .trustbar__item:nth-last-child(-n+2) { border-bottom: 0; } }
.trustbar__num { font-family: var(--display); font-size: 2.35rem; font-weight: 800; line-height: 1; color: var(--blue-950); }
.trustbar__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(10,27,51,.72); margin-top: 7px; }

/* ---------- 9. Cards ----------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s6) var(--s5) var(--s5);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line); }
.card:hover::before { transform: scaleX(1); }
.card:focus-within { border-color: var(--yellow); }
.card h3 { margin-bottom: var(--s3); }
.card p { font-size: .95rem; line-height: 1.6; margin-bottom: var(--s4); }
.card p:last-child { margin-bottom: 0; }

/* Fleet cards: the capacity number is the strongest element in the card */
.card--fleet { padding-top: var(--s5); }
.fleet-cap {
  display: flex; align-items: baseline; gap: var(--s2);
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 2px solid var(--line);
}
.fleet-cap__num {
  font-family: var(--display); font-weight: 800; line-height: .86;
  font-size: clamp(3.4rem, 9vw, 4.4rem);
  color: var(--blue-950); letter-spacing: -.03em;
}
.fleet-cap__unit {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--gold-ink);
}
.card--fleet:hover .fleet-cap { border-bottom-color: var(--yellow); }
.fleet-cap__cta { margin-top: auto; }
/* The whole card is the tap target, not just this text row — the card looks
   clickable, so it must be clickable. The link keeps a 44px-tall hit area of its
   own for keyboard/AT users and for cards that are not fully covered. */
.card__link {
  margin-top: auto; font-weight: 700; font-size: .87rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blue-700);
  display: inline-flex; align-items: center; min-height: 44px;
}
.card__link::after { content: " →"; }
.card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Inline links inside card copy stay clickable above the card-wide overlay */
.card p a { position: relative; z-index: 2; }
.card__icon {
  width: 52px; height: 52px; margin-bottom: var(--s4); border-radius: 3px;
  background: var(--blue-900); color: var(--yellow);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.5rem; font-weight: 800;
}
.card--flat:hover { transform: none; }
.card--dark { background: var(--blue-800); border-color: var(--blue-700); color: rgba(255,255,255,.8); }
.card--dark h3 { color: var(--white); }

/* Numbered process */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { counter-increment: step; margin: 0; padding-top: var(--s5); border-top: 3px solid var(--line); position: relative; }
.steps li::before {
  content: "0" counter(step);
  font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--yellow); display: block; margin-bottom: var(--s3);
}
.steps h3 { font-size: 1.22rem; margin-bottom: var(--s2); }
.steps p { font-size: .94rem; margin: 0; }

/* Feature list with ticks */
.ticks { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.ticks li { position: relative; padding-left: 30px; margin-bottom: var(--s3); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 16px; height: 9px; border-left: 3px solid var(--yellow-600); border-bottom: 3px solid var(--yellow-600);
  transform: rotate(-45deg);
}
.ticks--light li::before { border-color: var(--yellow); }
.ticks--light li { color: rgba(255,255,255,.85); }

/* ---------- 10. Spec table ---------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); }
.tbl { min-width: 620px; font-size: .95rem; background: var(--white); }
.tbl th, .tbl td { padding: 14px var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  background: var(--blue-900); color: var(--white);
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
}
.tbl tbody tr:nth-child(even) { background: var(--bg-alt); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td strong { color: var(--ink); }

/* Comparison */
.compare .yes { color: var(--ok); font-weight: 700; }
.compare .no  { color: var(--danger); font-weight: 700; }
.compare thead th:nth-child(2) { background: var(--yellow); color: var(--blue-950); }

/* ---------- 10b. Before / After ------------------------------------------ */
.ba { display: grid; gap: var(--s5); align-items: stretch; }
@media (min-width: 760px) {
  .ba { grid-template-columns: 1fr auto 1fr; gap: var(--s5); align-items: center; }
}
/* Directional connector: challenge → solution */
.ba__arrow { display: none; }
@media (min-width: 760px) {
  .ba__arrow {
    display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--yellow);
  }
  .ba__arrow::after {
    content: ""; width: 13px; height: 13px;
    border-top: 3px solid var(--blue-950); border-right: 3px solid var(--blue-950);
    transform: rotate(45deg); margin-left: -4px;
  }
}
.ba__panel {
  position: relative; margin: 0; height: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ba__panel--after { border-color: var(--yellow); box-shadow: var(--shadow); }
.ba__panel img {
  display: block; width: 100%; height: 260px; object-fit: cover;
  background: var(--blue-950); /* keeps the panel on-brand while the image loads */
}
@media (min-width: 760px) { .ba__panel img { height: 320px; } }
.ba__tag {
  position: absolute; top: 0; left: 0; z-index: 1;
  padding: 11px var(--s5);
  background: var(--blue-950); color: var(--white);
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .13em;
}
.ba__tag--after { background: var(--yellow); color: var(--blue-950); }
.ba__panel figcaption {
  padding: var(--s5); font-size: .95rem; line-height: 1.55; color: var(--body);
  border-top: 1px solid var(--line-soft);
}
.ba__cta { margin-top: var(--s7); text-align: center; }

/* ---------- 10c. Why us (hybrid) ----------------------------------------- */
.why { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .why { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--s8); } }
.why__media { border-radius: var(--radius); overflow: hidden; position: relative; }
.why__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(6,16,31,.16), transparent 55%);
}
.why__media img {
  display: block; width: 100%; height: 320px; object-fit: cover;
  background: var(--blue-950);
}
@media (min-width: 900px) { .why__media img { height: 460px; } }
.why__body > .lede { margin-bottom: var(--s4); }
.why__body .btn-row { margin-top: var(--s5); }

.why__metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: var(--s7);
  background: rgba(255,255,255,.1);
  border-top: 4px solid var(--yellow);
  overflow: hidden;
}
@media (min-width: 900px) { .why__metrics { grid-template-columns: repeat(4, 1fr); } }
.why__metric {
  background: var(--blue-950); padding: var(--s6) var(--s4); text-align: center;
  position: relative;
}
.why__metric-num {
  font-family: var(--display); font-weight: 800; line-height: .9;
  font-size: clamp(2.5rem, 6.4vw, 3.5rem);
  color: var(--yellow); margin-bottom: var(--s3); letter-spacing: -.02em;
}
.why__metric-label {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); line-height: 1.4;
}

/* ---------- 10c-ii. Fleet: additional equipment --------------------------- */
.fleet-extra { margin-top: var(--s7); }
.fleet-extra .eyebrow { margin-bottom: var(--s4); }
.fleet-extra__card { border-top: 4px solid var(--yellow); }
@media (min-width: 760px) {
  .fleet-extra__card { flex-direction: row; align-items: flex-start; gap: var(--s5); }
  .fleet-extra__card .card__icon { margin-bottom: 0; flex: none; }
}
.fleet-extra__card .btn-row { margin-top: var(--s4); }

/* ---------- 10d. Service-area tiers --------------------------------------- */
.area-primary {
  padding: var(--s6) var(--s5);
  border: 0; border-top: 5px solid var(--yellow);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow-lg);
}
.area-primary::before { display: none; }
.area-primary:hover { transform: none; }
.area-primary p { font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.84); max-width: 68ch; }
@media (min-width: 900px) {
  .area-primary { padding: var(--s7); margin-bottom: var(--s6); }
  .area-primary h3 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
}
.area-primary .btn-row { margin-top: var(--s5); }

.area-tier {
  display: inline-block; margin-bottom: var(--s3);
  padding: 6px 12px; border-radius: var(--radius);
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.area-tier--primary { background: var(--yellow); color: var(--blue-950); }
/* Secondary tiers read as quieter labels so Al Ruwais stays visually dominant */
.card .area-tier--regular,
.card .area-tier--regional,
.card .area-tier--project {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.card .area-tier--regular { color: var(--gold-ink); border-color: var(--yellow-600); }

/* ---------- 11. FAQ ------------------------------------------------------ */
/* Navy panel: questions white when closed, gold when open, answers white on navy. */
.faq {
  background: var(--blue-950);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s5) 56px var(--s5) var(--s5); position: relative;
  font-family: var(--display); font-size: 1.3rem; font-weight: 700; line-height: 1.26;
  color: var(--white);
  transition: color .18s ease, background-color .18s ease;
}
/* Gold marker on the open question */
.faq details[open] summary::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--yellow);
}
.faq details[open] { background: rgba(255,255,255,.03); }
.faq summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--yellow); background: rgba(255,255,255,.04); }
.faq summary::after {
  content: ""; position: absolute; right: var(--s5); top: calc(var(--s5) + 6px);
  width: 14px; height: 14px;
  border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: calc(var(--s5) + 11px); }
.faq details[open] summary { color: var(--yellow); }
.faq__body {
  padding: 0 var(--s5) var(--s5);
  color: rgba(255,255,255,.88);
}
.faq__body p, .faq__body li { color: rgba(255,255,255,.88); }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body a { color: var(--yellow); text-decoration-color: rgba(255,194,14,.5); }
.faq__body a:hover { color: var(--white); }
.faq__body strong { color: var(--white); }
/* Placeholder chips stay legible on the navy panel */
.faq__body .ph { background: rgba(255,194,14,.16); color: var(--yellow); border-color: rgba(255,194,14,.4); }

/* ---------- 12. CTA band ------------------------------------------------- */
.cta-band {
  background: var(--blue-950); color: rgba(255,255,255,.84);
  position: relative; overflow: hidden;
  padding: var(--s8) 0;
  border-top: 4px solid var(--yellow);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,194,14,.09) 0 16px, transparent 16px 36px);
  pointer-events: none;
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: var(--white); margin-bottom: var(--s3); }
.cta-band p { font-size: 1.08rem; max-width: 62ch; margin-bottom: var(--s6); }
.cta-band__inner { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } .cta-band p { margin-bottom: 0; } }

/* Yellow variant */
.cta-band--yellow { background: var(--yellow); color: rgba(10,27,51,.82); }
.cta-band--yellow::before { background: repeating-linear-gradient(135deg, rgba(10,27,51,.07) 0 16px, transparent 16px 36px); }
.cta-band--yellow h2 { color: var(--blue-950); }

/* ---------- 13. Callouts ------------------------------------------------- */
.callout {
  border-left: 5px solid var(--yellow);
  background: var(--bg-alt);
  padding: var(--s5);
  margin: 0 0 var(--s5);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h4 { margin-bottom: var(--s2); }
.callout--urgent { border-left-color: var(--danger); }

/* Placeholder token — visible to client, easy to find */
.ph {
  background: var(--yellow-100); border: 1px dashed var(--yellow-700);
  color: var(--gold-ink); font-size: .88em; font-weight: 600;
  padding: 1px 7px; border-radius: 3px; white-space: nowrap;
}

/* Sidebar */
.side { display: grid; gap: var(--s5); align-content: start; }
@media (min-width: 960px) { .side { position: sticky; top: calc(var(--header-h) + 24px); } }
.side__box { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: var(--radius); padding: var(--s5); }
.side__box h3 { font-size: 1.28rem; }
.side__box--dark { background: var(--blue-900); border-color: var(--blue-800); border-top-color: var(--yellow); color: rgba(255,255,255,.82); }
.side__box--dark h3 { color: var(--white); }
.side__box p { font-size: .94rem; }
.side__phone {
  display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 800;
  color: var(--yellow); letter-spacing: .01em; margin-bottom: var(--s2); text-decoration: none !important;
}
.side__phone:hover { color: #FFD351; }

/* Area chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chips a, .chips span {
  display: inline-block; padding: 9px 15px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .87rem; font-weight: 600; color: var(--blue-800); text-decoration: none;
}
.chips a:hover { background: var(--blue-900); border-color: var(--blue-900); color: var(--white); text-decoration: none; }

/* ---------- 14. Forms ---------------------------------------------------- */
.form-grid { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .form-grid .col-2 { grid-column: span 2; } .form-grid { grid-template-columns: 1fr 1fr; } }
.field label {
  display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px var(--s4); min-height: 50px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--yellow-600); box-shadow: 0 0 0 3px rgba(255,194,14,.28);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.form-note { font-size: .84rem; color: var(--muted); }

/* ---------- 15. Footer --------------------------------------------------- */
.site-footer { background: var(--blue-950); color: rgba(255,255,255,.62); font-size: .93rem; padding: var(--s8) 0 0; }
.site-footer h4 {
  color: var(--white); font-family: var(--sans); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--s4);
}
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--yellow); text-decoration: none; }
.footer-grid { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s7); } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-brand .brand { margin-bottom: var(--s4); }
.footer-brand p { font-size: .92rem; line-height: 1.62; }
.footer-nap { list-style: none; padding: 0; margin: 0; }
.footer-nap li { display: flex; gap: 11px; margin-bottom: var(--s3); align-items: flex-start; }
.footer-nap b { color: var(--yellow); font-weight: 700; flex: none; width: 62px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.footer-bottom {
  margin-top: var(--s7); padding: var(--s5) 0; border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.45);
}

/* ---------- 16. Sticky mobile call bar ----------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--blue-950); border-top: 3px solid var(--yellow);
  box-shadow: 0 -4px 18px rgba(0,0,0,.2);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 8px; min-height: 56px;
  font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--white); text-decoration: none !important;
}
.callbar a:first-child { background: var(--yellow); color: var(--blue-950); }
@media (min-width: 1060px) { .callbar { display: none; } }
@media (max-width: 1059px) { body { padding-bottom: 59px; } }

/* ---------- 17. Prose (editorial body) ----------------------------------- */
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--s5); }
.prose li { line-height: 1.66; }
.prose strong { color: var(--ink); font-weight: 700; }

/* ---------- 18. Utilities ------------------------------------------------ */
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--s6); }
.small { font-size: .88rem; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.divider { height: 4px; width: 64px; background: var(--yellow); margin: var(--s5) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .site-header, .topbar, .callbar, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; font-size: 12pt; }
}


/* ── Elementor-specific overrides ─────────────────────────────── */

/* Remove default Elementor section padding so our .wrap handles spacing */
.elementor-section.elementor-section-stretched,
.elementor-section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Remove column padding so HTML widgets bleed edge-to-edge within sections */
.elementor-element.elementor-column > .elementor-widget-wrap {
  padding: 0 !important;
}

/* Elementor widgets: strip their default margin */
.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }/* End custom CSS */