/* ==========================================================================
   Abra Diesel — site stylesheet
   Palette sampled from the company logo (red #E81820 / navy #102070) and the
   gold rule used on the current site's hero. Neutral greys, card structure and
   type pairing follow the Al-Bahar reference: condensed grotesque headings
   (Univers Bold Condensed → Archivo Narrow) over Open Sans body.
   ========================================================================== */

:root {
  /* brand — from the logo */
  --navy:        #0f1f63;
  --navy-deep:   #0a1546;
  --navy-mid:    #1a2c7a;
  --navy-line:   #24357f;
  --red:         #e11b22;
  --red-dark:    #b8141a;
  --gold:        #f0b323;

  /* neutrals — Al-Bahar system */
  --ink:         #212121;
  --grey:        #6d6d6d;
  --grey-soft:   #8b8b8b;
  --line:        #dcdcdc;
  --line-soft:   #eaeaea;
  --bg-grey:     #f4f4f4;
  --bg-grey-2:   #eaeaea;
  --white:       #ffffff;

  --font-head: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.1rem, 4vw, 3rem);
  --maxw: 1300px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* section heading block — plain and corporate, no decoration beyond the rule */
.sec-head { margin-bottom: 2.25rem; }
.sec-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  color: var(--navy);
}
.sec-head .kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.sec-head p {
  color: var(--grey);
  max-width: 60ch;
  margin-top: 0.85rem;
}
.sec-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--gold);
  margin-top: 1.15rem;
}
.sec-head.on-dark h2 { color: #fff; }
.sec-head.on-dark p { color: rgba(255,255,255,0.78); }
.sec-head.on-dark .kicker { color: var(--gold); }

.section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.section--grey { background: var(--bg-grey); }
.section--navy { background: var(--navy); color: rgba(255,255,255,0.85); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border: 2px solid transparent;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn-red    { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-navy   { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); }
.btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* ==========================================================================
   Utility bar + header
   ========================================================================== */
.utility {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.82);
  font-size: 0.78rem;
}
.utility .wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; padding-block: 0.5rem; flex-wrap: wrap;
}
.utility a { text-decoration: none; }
.utility a:hover { color: #fff; }
.utility-group { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.utility .iso {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* UAE identity badge — placed at the far right of the trust strip. The flag
   is drawn in CSS so it stays crisp and cannot vary like a platform emoji. */
.utility .wrap::after {
  content: "Based in Sharjah · Serving the UAE";
  order: 99;
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.28rem 0.68rem 0.28rem 2.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  background:
    linear-gradient(#f51d32, #f51d32) 0.68rem 50% / 0.42rem 1.02rem no-repeat,
    linear-gradient(to bottom, #00843d 0 33.333%, #fff 33.333% 66.666%, #000 66.666%) 1.1rem 50% / 1.38rem 1.02rem no-repeat,
    rgba(255,255,255,0.055);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 800px) { .utility .hide-sm { display: none; } }

.site-header { position: sticky; top: 0; z-index: 60; background: #fff; }

/* row 1 — identity and contact */
.header-main { background: #fff; border-bottom: 1px solid var(--line); }
.header-main .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 5.25rem;
}
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 58px; width: auto; display: block; }

.header-tagline {
  flex: 1;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.06rem; line-height: 1.22;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--navy);
}
.header-tagline span { color: var(--red); }

.header-cta { display: flex; align-items: center; gap: 1rem; flex: none; }
.header-phone {
  text-decoration: none;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.32rem; line-height: 1.1; color: var(--navy);
  white-space: nowrap;
}
.header-phone small {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey);
}
.header-phone:hover { color: var(--red); }

/* row 2 — navigation strip */
.header-nav { background: var(--navy); }
.header-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header-nav ul { list-style: none; display: flex; align-items: stretch; }
.header-nav a {
  display: block; padding: 0.85rem 1.05rem;
  text-decoration: none; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.97rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.92);
  border-bottom: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.header-nav li:first-child a { padding-left: 0; }
.header-nav a:hover, .header-nav a[aria-current="page"] {
  background: rgba(255,255,255,0.08); border-bottom-color: var(--gold); color: #fff;
}
.header-nav li:first-child a:hover { padding-left: 1.05rem; margin-left: -1.05rem; }
.nav-wa {
  text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
}
.nav-wa:hover { color: #fff; }

@media (max-width: 1180px) { .header-tagline { display: none; } }
@media (max-width: 1050px) {
  .header-nav { display: none; }
  .header-main .wrap { justify-content: space-between; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 700px) {
  .header-cta .btn { display: none; }
  .header-main .wrap { min-height: 4.5rem; gap: 0.75rem; }
  .logo img { height: 46px; }
}
@media (max-width: 420px) {
  .header-phone { font-size: 1.05rem; }
  .header-phone small { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--navy-deep); overflow: hidden; }
.hero-slides::after {
  z-index: 2;
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,21,70,0.96) 0%,
      rgba(10,21,70,0.90) 30%,
      rgba(10,21,70,0.58) 58%,
      rgba(10,21,70,0.26) 100%),
    linear-gradient(180deg,
      rgba(10,21,70,0.35) 0%,
      rgba(10,21,70,0) 26%,
      rgba(10,21,70,0) 74%,
      rgba(10,21,70,0.45) 100%);
}
.hero .wrap { position: relative; z-index: 3; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.75rem, 5.5vw, 4.25rem); }
.hero-kicker {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  color: #fff;
  max-width: 17ch;
}
.hero h1 .rule {
  display: block;
  width: 90px; height: 5px;
  background: var(--gold);
  margin-top: 1.25rem;
}
.hero p {
  color: rgba(255,255,255,0.86);
  max-width: 50ch;
  font-size: 1.06rem;
  margin-top: 1.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }

/* division tabs across the hero foot — the Al-Bahar carousel-tab pattern */
.hero-tabs { position: relative; z-index: 3; background: rgba(10,21,70,0.9); border-top: 1px solid rgba(255,255,255,0.18); }
.hero-tabs .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-inline: var(--gutter); }
.hero-tab {
  display: block;
  padding: 1.35rem 1.1rem;
  text-decoration: none;
  color: rgba(255,255,255,0.88);
  border-left: 1px solid rgba(255,255,255,0.16);
  border-top: 4px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.hero-tab:first-child { border-left: none; }
.hero-tab b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  text-transform: uppercase;
  color: #fff;
}
.hero-tab span { font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.hero-tab:hover { background: rgba(255,255,255,0.09); border-top-color: var(--gold); }
@media (max-width: 900px) {
  .hero-tabs .wrap { grid-template-columns: 1fr 1fr; }
  .hero-tab:nth-child(odd) { border-left: none; }
  .hero-tab:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.16); }
}
@media (max-width: 520px) { .hero-tabs { display: none; } }

/* ==========================================================================
   Credentials strip
   ========================================================================== */
.creds { background: var(--bg-grey-2); border-bottom: 1px solid var(--line); }
.creds .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.cred { padding: 1.6rem 1.3rem; position: relative; }
.cred + .cred::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem;
  width: 1px; background: var(--line);
}
.cred b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
  line-height: 1.15;
  white-space: nowrap;
}
.cred b span, .cred span span { font: inherit; color: inherit; }
.cred span { font-size: 0.85rem; color: var(--grey); }
@media (max-width: 820px) {
  .creds .wrap { grid-template-columns: 1fr 1fr; }
  .cred:nth-child(odd)::before { display: none; }
}
@media (max-width: 440px) { .creds .wrap { grid-template-columns: 1fr; } .cred::before { display: none !important; } }

/* ==========================================================================
   Service cards (the four divisions)
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  box-shadow: 0 14px 32px rgba(15,31,99,0.14);
  transform: translateY(-3px);
  border-color: var(--navy);
}
.card figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-deep); }
.card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover figure img { transform: scale(1.05); }
.card-body { padding: 1.4rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.32rem; color: var(--navy); }
.card-body h3::after {
  content: ""; display: block; width: 42px; height: 3px;
  background: var(--red); margin-top: 0.7rem;
}
.card-body p { font-size: 0.93rem; color: var(--grey); margin-top: 0.85rem; flex: 1; }
.card-body .more {
  margin-top: 1.2rem;
  font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--red);
}
.card:hover .more { text-decoration: underline; }
@media (max-width: 1050px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   Argument panel (navy)
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
.split p + p { margin-top: 1.05rem; }
.split strong { color: #fff; }
.pillars { list-style: none; margin-top: 2rem; display: grid; gap: 1px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.18); }
.pillars li { background: var(--navy); padding: 1.25rem 1.35rem; }
.pillars b {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.12rem; text-transform: uppercase; color: #fff;
}
.pillars b::before {
  content: ""; display: inline-block;
  width: 10px; height: 10px; background: var(--gold);
  margin-right: 0.65rem; vertical-align: 0.06em;
}
.pillars p { font-size: 0.92rem; margin-top: 0.35rem; color: rgba(255,255,255,0.78); }
.split-figs { display: grid; gap: 1.25rem; }
.split-figs img { border: 1px solid rgba(255,255,255,0.2); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   ISO scope
   ========================================================================== */
.iso-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.iso-scope {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--red);
  padding: 1.75rem 1.85rem;
}
.iso-scope blockquote {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.32rem);
  line-height: 1.45;
  text-transform: none;
  color: var(--ink);
}
.iso-facts {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.5rem;
  font-size: 0.86rem;
}
.iso-facts dt {
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grey);
}
.iso-facts dd { color: var(--ink); font-weight: 600; }
.iso-links { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 900px) { .iso-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .iso-facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   Service index
   ========================================================================== */
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem clamp(1.75rem, 3.5vw, 3rem); }
.index-col h3 {
  font-size: 1.12rem; color: var(--navy);
  padding-bottom: 0.65rem; border-bottom: 2px solid var(--navy);
  margin-bottom: 0.3rem;
}
.index-col ul { list-style: none; }
.index-col li { border-bottom: 1px solid var(--line-soft); }
.index-col a {
  display: block; padding: 0.6rem 0;
  text-decoration: none; font-size: 0.94rem; color: var(--ink);
}
.index-col a::before {
  content: "›"; color: var(--red); font-weight: 700;
  margin-right: 0.6rem; display: inline-block;
  transition: transform 0.14s ease;
}
.index-col a:hover { color: var(--red); }
@media (max-width: 860px) { .index-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .index-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Brands
   ========================================================================== */
.brand-card-mask { position: relative; overflow: hidden; }
.brand-card-mask::before, .brand-card-mask::after {
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0;
  width: clamp(28px, 6vw, 84px); pointer-events: none;
}
.brand-card-mask::before { left: 0; background: linear-gradient(90deg, var(--bg-grey), transparent); }
.brand-card-mask::after { right: 0; background: linear-gradient(270deg, var(--bg-grey), transparent); }
.brand-card-ticker { display: flex; width: max-content; }
.brand-card-set { display: flex; flex: none; gap: 1rem; padding-right: 1rem; }
.brand-card {
  display: grid; grid-template-rows: 58px auto 1fr; align-content: start;
  width: clamp(250px, 28vw, 315px); min-height: 222px;
  padding: 1.35rem 1.4rem 1.45rem;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy);
  box-shadow: 0 10px 24px rgba(10,21,70,0.06);
}
.brand-card img { display: block; width: 132px; height: 46px; object-fit: contain; object-position: left center; }
.brand-card img[src$="cummins.svg"] { width: 68px; }
.brand-card img[src$="john-deere.svg"] { width: 94px; height: 54px; }
.brand-card b { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--navy); text-transform: uppercase; }
.brand-card p { font-size: 0.88rem; color: var(--grey); margin-top: 0.5rem; line-height: 1.55; }
.brand-rest {
  margin-top: 1.75rem; padding: 1.35rem 1.5rem;
  background: #fff; border: 1px solid var(--line);
}
.brand-rest h4 { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--grey); font-family: var(--font-body); margin-bottom: 0.7rem; }
.brand-rest p { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); line-height: 2; }
.disclaimer {
  margin-top: 1.5rem; font-size: 0.85rem; color: var(--grey);
  max-width: 78ch; border-left: 3px solid var(--gold); padding-left: 1rem;
}
@media (max-width: 580px) {
  .brand-card { width: 246px; min-height: 210px; padding: 1.15rem 1.2rem 1.25rem; }
}

/* ==========================================================================
   Industries
   ========================================================================== */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ind-grid { grid-template-columns: 1fr; } }
.ind-grid a {
  display: block; height: 100%;
  padding: 1.35rem 1.35rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none; background: #fff;
  transition: background 0.16s ease;
}
.ind-grid a:hover { background: var(--bg-grey); }
.ind-grid b { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: var(--navy); display: block; }
.ind-grid span { font-size: 0.85rem; color: var(--grey); }
.ind-grid a:hover b { color: var(--red); }

/* ==========================================================================
   CTA band + contact
   ========================================================================== */
.cta-band { background: var(--red); color: #fff; }
.cta-band .wrap {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); color: #fff; }
.cta-band p { color: rgba(255,255,255,0.9); margin-top: 0.4rem; max-width: 52ch; }
.cta-band .btn-white { background: #fff; color: var(--red); }
.cta-band .btn-white:hover { background: var(--navy); color: #fff; }

.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,3.5rem); }
.contact-list { list-style: none; }
.contact-list li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.contact-list dt, .contact-list .k {
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--grey); padding-top: 0.2rem;
}
.contact-list a { color: var(--red); text-decoration: none; font-weight: 600; }
.contact-list a:hover { text-decoration: underline; }
.map-embed { border: 1px solid var(--line); width: 100%; height: 100%; min-height: 340px; object-fit: cover; background: var(--bg-grey); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .contact-list li { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0,4.5fr) repeat(3, minmax(0,2.5fr));
  gap: 2.5rem; padding-block: 3.25rem 2.5rem;
}
.site-footer h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.15em; color: var(--gold);
  margin-bottom: 1rem; text-transform: uppercase;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-about img {
  height: 52px; width: auto; display: block;
  background: #fff;
  padding: 0.55rem 0.85rem;
  border-radius: 2px;
}
.footer-about p { margin-top: 1.1rem; max-width: 42ch; color: rgba(255,255,255,0.68); font-size: 0.88rem; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-block: 1.4rem;
  font-size: 0.76rem; color: rgba(255,255,255,0.5); line-height: 1.85;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Motion — restrained
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker, .hero h1, .hero p, .hero-actions {
    opacity: 0; transform: translateY(14px); animation: heroIn 0.85s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .hero h1 { animation-delay: 0.10s; }
  .hero p { animation-delay: 0.22s; }
  .hero-actions { animation-delay: 0.34s; }
  @keyframes heroIn { to { opacity: 1; transform: none; } }
  .hero-tabs { opacity: 0; animation: heroIn 0.8s ease 0.5s forwards; }
}

/* ==========================================================================
   MOTION LAYER
   All effects are gated behind prefers-reduced-motion at the bottom of the file.
   ========================================================================== */

/* --- hero slideshow: cross-fade + slow Ken Burns drift ------------------- */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.24) contrast(1.05) saturate(0.9);
}
.hero-slide:nth-child(1) { opacity: 1; }
.hero-slide:nth-child(1) img { object-position: 58% 52%; }
.hero-slide:nth-child(2) img { object-position: 52% 46%; }
.hero-slide:nth-child(3) img { object-position: 50% 55%; }
.hero-slide:nth-child(4) img { object-position: 55% 50%; }

/* progress ticks for the slideshow */
.hero-progress {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 6px;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.hero-progress i {
  flex: 1; height: 3px;
  background: rgba(255,255,255,0.22);
  position: relative; overflow: hidden;
}
.hero-progress i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
}

/* --- scroll reveal (JS-driven, works in every browser) ------------------- */
.r { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); }
.js-reveal .r { opacity: 0; transform: translateY(22px); }
.r.in { opacity: 1; transform: none; }
.r-1 { transition-delay: 0.08s; } .r-2 { transition-delay: 0.16s; }
.r-3 { transition-delay: 0.24s; } .r-4 { transition-delay: 0.32s; }
/* directional variants */
.r-left  { transform: translateX(-26px); }
.r-right { transform: translateX(26px); }
.r-left.in, .r-right.in { transform: none; }
.r-scale { transform: scale(0.965); }
.r-scale.in { transform: none; }

/* the gold rule under section headings draws itself in */
.sec-head::after { transform-origin: left; transition: transform 0.7s ease 0.2s; }
.js-reveal .sec-head::after { transform: scaleX(0); }
.sec-head.in::after { transform: scaleX(1); }

/* --- animated counters --------------------------------------------------- */
.cred b { font-variant-numeric: tabular-nums; }

/* --- gallery marquee ----------------------------------------------------- */
.gallery { background: var(--navy-deep); overflow: hidden; padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.gallery .wrap { padding-bottom: 1.9rem; }
.gallery .sec-head { margin-bottom: 0; }
.marquee {
  display: flex; gap: 14px;
  width: max-content;
  will-change: transform;
}
.marquee + .marquee { margin-top: 14px; }
.marquee figure {
  width: clamp(210px, 22vw, 310px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex: none;
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
}
.marquee img {
  width: 100%; height: 100%; object-fit: cover;
  filter: none;
  transition: transform 0.5s ease, filter 0.4s ease;
}
.marquee figure:hover img { transform: scale(1.07); filter: saturate(1.03) brightness(1.02); }
.marquee figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.85rem 0.85rem 0.7rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(10,21,70,0) 0%, rgba(10,21,70,0.86) 70%);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.marquee figure:hover figcaption { opacity: 1; transform: none; }
.marquee-mask { position: relative; overflow: hidden; }
.marquee-mask::before, .marquee-mask::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 130px);
  z-index: 2; pointer-events: none;
}
.marquee-mask::before { left: 0;  background: linear-gradient(90deg, var(--navy-deep), transparent); }
.marquee-mask::after  { right: 0; background: linear-gradient(270deg, var(--navy-deep), transparent); }

/* --- brand name ticker --------------------------------------------------- */
.ticker-mask { position: relative; overflow: hidden; }
.ticker {
  display: flex; gap: 0; width: max-content;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink);
  line-height: 2.6;
}
.ticker span { white-space: nowrap; }
.ticker span::after { content: "·"; color: var(--red); margin-inline: 0.85rem; }
.ticker-mask::before, .ticker-mask::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.ticker-mask::before { left: 0;  background: linear-gradient(90deg, #fff, transparent); }
.ticker-mask::after  { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.brand-logo-ticker { align-items: stretch; line-height: 1; }
.brand-logo-set { display: flex; flex: none; gap: 0.8rem; padding-right: 0.8rem; }
.brand-logo-item {
  display: grid; place-items: center; flex: none;
  width: clamp(138px, 15vw, 178px); height: 96px;
  padding: 1rem 1.15rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.brand-logo-item::after { display: none; }
.brand-logo-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-logo-item img[src$="cummins.svg"],
.brand-logo-item img[src$="mitsubishi.svg"],
.brand-logo-item img[src$="onan.svg"],
.brand-logo-item img[src$="zexel.png"] { max-width: 66px; }
.brand-logo-mask::before, .brand-logo-mask::after { width: clamp(30px, 6vw, 84px); }
@media (max-width: 580px) {
  .brand-logo-item { width: 132px; height: 78px; padding: 0.8rem 0.9rem; }
}

/* --- misc micro-interactions -------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
.hero-tab { position: relative; }
.hero-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: rgba(255,255,255,0.06);
  transition: height 0.28s ease;
}
.hero-tab:hover::after { height: 100%; }
.index-col a { transition: color 0.16s ease, padding-left 0.16s ease; }
.index-col a:hover { padding-left: 0.3rem; }
.ind-grid a { position: relative; overflow: hidden; }
.ind-grid a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--red); transition: width 0.3s ease;
}
.ind-grid a:hover::after { width: 100%; }
.card figure { position: relative; }
.card figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,21,70,0) 55%, rgba(10,21,70,0.55) 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.card:hover figure::after { opacity: 1; }

/* --- animation definitions (motion-safe only) ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide {
    animation: heroFade 32s infinite;
  }
  .hero-slide img { animation: kenburns 32s infinite; }
  .hero-slide:nth-child(1), .hero-slide:nth-child(1) img { animation-delay:  0s; }
  .hero-slide:nth-child(2), .hero-slide:nth-child(2) img { animation-delay:  8s; }
  .hero-slide:nth-child(3), .hero-slide:nth-child(3) img { animation-delay: 16s; }
  .hero-slide:nth-child(4), .hero-slide:nth-child(4) img { animation-delay: 24s; }

  @keyframes heroFade {
    0%     { opacity: 0; }
    3%     { opacity: 1; }
    25%    { opacity: 1; }
    28%    { opacity: 0; }
    100%   { opacity: 0; }
  }
  @keyframes kenburns {
    0%   { transform: scale(1.0)  translate3d(0,0,0); }
    28%  { transform: scale(1.09) translate3d(-1.2%, -0.8%, 0); }
    100% { transform: scale(1.09) translate3d(-1.2%, -0.8%, 0); }
  }

  .hero-progress i::after { animation: tick 32s infinite; }
  .hero-progress i:nth-child(1)::after { animation-delay:  0s; }
  .hero-progress i:nth-child(2)::after { animation-delay:  8s; }
  .hero-progress i:nth-child(3)::after { animation-delay: 16s; }
  .hero-progress i:nth-child(4)::after { animation-delay: 24s; }
  @keyframes tick {
    0%   { transform: scaleX(0); }
    25%  { transform: scaleX(1); }
    26%  { transform: scaleX(1); opacity: 1; }
    30%  { opacity: 0; }
    100% { transform: scaleX(0); opacity: 0; }
  }

  .marquee { animation: slide 64s linear infinite; }
  .marquee.rev { animation-direction: reverse; }
  .marquee-mask:hover .marquee { animation-play-state: paused; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .ticker { animation: slide 46s linear infinite; }
  .brand-logo-ticker { animation-duration: 90s; }
  .brand-card-ticker { animation: slide 58s linear infinite; }
  .brand-card-mask:hover .brand-card-ticker { animation-play-state: paused; }
  .ticker-mask:hover .ticker { animation-play-state: paused; }
}

/* --- reduced motion: everything static and visible ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sec-head::after { transform: scaleX(1) !important; transition: none !important; }
  .hero-slide { opacity: 0; }
  .hero-progress { display: none; }
  .marquee, .ticker { animation: none !important; }
  .marquee { flex-wrap: wrap; width: 100%; justify-content: center; }
  .ticker { flex-wrap: wrap; width: 100%; }
  .brand-logo-mask { overflow-x: auto; }
  .brand-logo-ticker { flex-wrap: nowrap; width: max-content; }
  .brand-logo-set[aria-hidden="true"] { display: none; }
  .brand-card-mask { overflow-x: auto; }
  .brand-card-ticker { width: max-content; }
  .brand-card-set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   BUILD-OUT SECTIONS
   ========================================================================== */

/* --- §6 Repair or replace: two-column contrast ------------------------- */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.contrast > div { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; }
.contrast > div + div { border-left: 1px solid var(--line); }
.contrast .side {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 0.85rem;
}
.contrast h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); color: var(--ink); }
.contrast .ours h3 { color: var(--navy); }
.contrast .ours { background: var(--bg-grey); border-top: 4px solid var(--red); }
.contrast .theirs { border-top: 4px solid var(--line); }
.contrast p { font-size: 0.96rem; color: var(--grey); margin-top: 0.9rem; }
.contrast .ours p { color: var(--ink-soft, #3d4145); }
.measure-note {
  margin-top: 1.75rem; padding: 1.35rem 1.5rem;
  background: var(--navy); color: rgba(255,255,255,0.88);
  border-left: 5px solid var(--gold);
}
.measure-note b { color: #fff; font-family: var(--font-head); font-size: 1.2rem; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.measure-note p { font-size: 0.97rem; }
@media (max-width: 760px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast > div + div { border-left: none; border-top: 1px solid var(--line); }
}

/* --- §8 How we work: 5-step process ------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; }
.step {
  position: relative; padding: 2.75rem 1.15rem 1.5rem;
  border-top: 3px solid var(--line);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 1.05rem; left: 1.15rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--red); letter-spacing: 0.04em;
}
.step::after {
  content: ""; position: absolute; top: -3px; left: 0; width: 0; height: 3px;
  background: var(--red); transition: width 0.6s ease;
}
.steps.in .step::after { width: 100%; }
.steps.in .step:nth-child(2)::after { transition-delay: 0.12s; }
.steps.in .step:nth-child(3)::after { transition-delay: 0.24s; }
.steps.in .step:nth-child(4)::after { transition-delay: 0.36s; }
.steps.in .step:nth-child(5)::after { transition-delay: 0.48s; }
.step h3 { font-size: 1.14rem; color: var(--navy); }
.step p { font-size: 0.9rem; color: var(--grey); margin-top: 0.5rem; }
.steps-line {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); text-transform: uppercase;
  color: var(--navy); text-align: center;
}
.steps-line em { font-style: normal; color: var(--red); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }

/* --- §10 capability grid ------------------------------------------------ */
.caps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.caps a {
  display: block; padding: 1rem 1.1rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none; background: #fff;
  font-size: 0.95rem; color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.caps a::before { content: "›"; color: var(--red); font-weight: 700; margin-right: 0.55rem; }
.caps a:hover { background: var(--navy); color: #fff; }
.caps a:hover::before { color: var(--gold); }
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .caps { grid-template-columns: 1fr; } }

/* --- §15 emergency band ------------------------------------------------- */
.emergency { background: var(--navy-deep); color: rgba(255,255,255,0.85); border-top: 4px solid var(--gold); }
.emergency .wrap {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.emergency .icon {
  width: 58px; height: 58px; flex: none;
  border: 3px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--gold);
}
.emergency h2 { color: #fff; font-size: clamp(1.4rem, 2.8vw, 2rem); }
.emergency p { margin-top: 0.4rem; max-width: 60ch; font-size: 0.97rem; }
@media (max-width: 820px) {
  .emergency .wrap { grid-template-columns: 1fr; }
  .emergency .icon { display: none; }
}

/* --- §16 FAQ accordion -------------------------------------------------- */
.faq { max-width: 900px; }
.faq details {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.faq details[open] { background: var(--bg-grey); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 3rem 1.15rem 0;
  position: relative;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.14rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--red); }
.faq .answer { padding: 0 3rem 1.35rem 0; color: var(--grey); font-size: 0.97rem; }
.faq .answer p + p { margin-top: 0.8rem; }
.faq .answer a { color: var(--red); font-weight: 600; }
.faq details[open] summary { color: var(--red); }

/* --- §17 enquiry form --------------------------------------------------- */
.enquiry-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
.enquiry-form { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); padding: clamp(1.5rem, 3vw, 2.25rem); }
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 0.45rem;
}
.field label .opt { color: var(--grey); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 0.8rem 0.9rem; border: 1px solid var(--line); background: #fff;
  border-radius: 0;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,31,99,0.12);
}
.field .hint { font-size: 0.84rem; color: var(--grey); margin-top: 0.35rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.86rem; color: var(--grey); margin-top: 1rem; }
.form-status { display: none; padding: 0.95rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.95rem; }
.form-status.show { display: block; }
.form-status.ok    { background: #e8f2e8; border-left: 4px solid #2e7d32; color: #1b4d1f; }
.form-status.error { background: #fdeaea; border-left: 4px solid var(--red); color: #8a1319; }
.enquiry-aside ul { list-style: none; margin-top: 1.25rem; }
.enquiry-aside li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.96rem; color: var(--grey); }
.enquiry-aside li b { color: var(--ink); display: block; font-family: var(--font-head); font-size: 1.02rem; text-transform: uppercase; }
@media (max-width: 900px) { .enquiry-grid { grid-template-columns: 1fr; } }

/* --- §18 full-width map ------------------------------------------------- */
.map-band { position: relative; background: var(--bg-grey-2); border-top: 1px solid var(--line); }
.map-frame { width: 100%; height: clamp(340px, 45vh, 460px); border: 0; display: block; filter: grayscale(0.25); background: var(--bg-grey-2); }
.map-placeholder {
  width: 100%; height: clamp(340px, 45vh, 460px);
  display: grid; place-items: center; text-align: center;
  background: var(--navy-deep); color: rgba(255,255,255,0.8); padding: 2rem;
}
.map-placeholder b { display: block; font-family: var(--font-head); font-size: 1.3rem; text-transform: uppercase; color: #fff; margin-bottom: 0.5rem; }

/* The card floats over the map. The wrap is stretched across the band rather
   than sitting after the iframe with zero height — otherwise the absolutely
   positioned card escapes the section and lands on top of the footer. */
.map-band > .wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  pointer-events: none;
}
.map-overlay { display: contents; }
.map-card {
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red);
  padding: 1.5rem 1.6rem;
  max-width: 400px;
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(10,21,70,0.18);
  max-height: calc(100% - 2rem);
  overflow-y: auto;
}
.map-card h3 { font-size: 1.28rem; color: var(--navy); }
.map-card address { font-style: normal; margin-top: 0.8rem; font-size: 0.96rem; color: var(--ink); line-height: 1.65; }
.map-card .landmark { color: var(--red); font-weight: 600; }
.map-card .pluscode { font-size: 0.88rem; color: var(--grey); }
.map-card .map-hint { margin-top: 0.8rem; font-size: 0.9rem; color: var(--grey); }
.map-card .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.15rem; }
.map-card .actions .btn { padding: 0.7rem 1.1rem; font-size: 0.76rem; }

/* Below the fold-out point the card sits under the map instead of over it. */
@media (max-width: 900px) {
  .map-band > .wrap { position: static; display: block; pointer-events: auto; padding-block: 0; }
  .map-card { max-width: none; margin-top: -1px; max-height: none; box-shadow: none; }
}

/* --- mobile nav + sticky action bar ------------------------------------- */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  background: var(--navy); border: 0; cursor: pointer; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--navy-deep); color: #fff;
  padding: 5.5rem var(--gutter) 2rem;
  overflow-y: auto;
  transform: translateY(-100%); transition: transform 0.32s cubic-bezier(.2,.7,.3,1);
  visibility: hidden;
}
.mobile-nav.open { transform: none; visibility: visible; }
.mobile-nav h4 {
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.16em; color: var(--gold); margin: 1.5rem 0 0.75rem;
}
.mobile-nav ul { list-style: none; }
.mobile-nav a {
  display: block; padding: 0.75rem 0; text-decoration: none; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; text-transform: uppercase;
}
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav .mn-actions { display: grid; gap: 0.7rem; margin-top: 1.75rem; }
.mobile-nav .btn { justify-content: center; }

.action-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.action-bar div { display: grid; grid-template-columns: repeat(3, 1fr); }
.action-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.65rem 0.4rem; text-decoration: none; color: #fff;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-left: 1px solid rgba(255,255,255,0.14);
}
.action-bar a:first-child { border-left: none; }
.action-bar a svg { width: 17px; height: 17px; fill: var(--gold); }
.action-bar a:active { background: rgba(255,255,255,0.1); }

@media (max-width: 1050px) { .nav-toggle { display: flex; } }
@media (max-width: 760px) {
  .action-bar { display: block; }
  body { padding-bottom: 62px; }
  .action-bar + * { margin-bottom: 0; }
}
@media (min-width: 1051px) { .mobile-nav { display: none; } }

/* --- footer expansion --------------------------------------------------- */
.footer-grid.wide { grid-template-columns: minmax(0,3.4fr) repeat(4, minmax(0,2fr)); }
@media (max-width: 1100px) { .footer-grid.wide { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px)  { .footer-grid.wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .footer-grid.wide { grid-template-columns: 1fr; } }

/* --- tight bullet lists in the contrast block ---------------------------- */
.contrast ul.tight { list-style: none; margin-top: 1rem; }
.contrast ul.tight li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem;
  font-size: 0.96rem; color: var(--grey); line-height: 1.55;
}
.contrast ul.tight li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; background: var(--line);
}
.contrast .ours ul.tight li { color: var(--ink); }
.contrast .ours ul.tight li::before { background: var(--red); }
.map-card .pluscode { font-family: var(--font-mono, monospace); font-size: 0.88rem; color: var(--grey); }
.map-card .map-hint { margin-top: 0.85rem; font-size: 0.9rem; color: var(--grey); }

/* ==========================================================================
   Interior service pages
   ========================================================================== */
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  padding: 0.75rem 1rem; background: #fff; color: var(--navy);
  font-weight: 700; text-decoration: none; box-shadow: 0 3px 18px rgba(0,0,0,0.22);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.page-hero { position: relative; min-height: 520px; overflow: hidden; background: var(--navy-deep); }
.page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,21,70,0.98) 0%, rgba(10,21,70,0.92) 42%, rgba(10,21,70,0.48) 76%, rgba(10,21,70,0.25) 100%),
    linear-gradient(0deg, rgba(10,21,70,0.48), transparent 45%);
}
.page-hero__inner { position: relative; z-index: 2; padding-block: clamp(3.25rem, 7vw, 5.75rem); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-bottom: 2.2rem; color: rgba(255,255,255,0.72); font-size: 0.77rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs span[aria-current="page"] { color: var(--gold); }
.page-hero__kicker { color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.page-hero h1 { max-width: 17ch; margin-top: 0.8rem; color: #fff; font-size: clamp(2.35rem, 5.4vw, 4.3rem); }
.page-hero h1 .rule { display: block; width: 84px; height: 5px; margin-top: 1.2rem; background: var(--gold); }
.page-hero__deck { max-width: 62ch; margin-top: 1.35rem; color: rgba(255,255,255,0.9); font-size: clamp(1rem, 1.5vw, 1.12rem); }

.service-proof { background: var(--navy); color: #fff; border-top: 1px solid rgba(255,255,255,0.15); }
.service-proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.service-proof div > div { padding: 1.25rem 1.3rem; border-left: 1px solid rgba(255,255,255,0.16); }
.service-proof div > div:last-child { border-right: 1px solid rgba(255,255,255,0.16); }
.service-proof strong { display: block; color: #fff; font-family: var(--font-head); font-size: 1.08rem; line-height: 1.15; text-transform: uppercase; }
.service-proof span { display: block; margin-top: 0.24rem; color: rgba(255,255,255,0.68); font-size: 0.77rem; line-height: 1.4; }

.service-body { background: #fff; }
.content-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.service-aside { position: sticky; top: 9.75rem; display: grid; gap: 1.15rem; max-height: calc(100vh - 11rem); overflow-y: auto; overscroll-behavior: contain; }
.aside-card { border: 1px solid var(--line); border-top: 4px solid var(--gold); background: var(--bg-grey); padding: 1.35rem; }
.aside-card__eyebrow { margin-bottom: 0.8rem; color: var(--red); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.aside-card ul { list-style: none; }
.aside-card li { border-top: 1px solid var(--line); }
.aside-card li:first-child { border-top: 0; }
.aside-card nav a { display: block; padding: 0.55rem 0; color: var(--navy); font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; line-height: 1.25; text-decoration: none; text-transform: uppercase; }
.aside-card nav a:hover { color: var(--red); }
.aside-card--contact { border-top-color: var(--red); background: var(--navy-deep); color: rgba(255,255,255,0.76); }
.aside-card--contact h2 { color: #fff; font-size: 1.45rem; }
.aside-card--contact p:not(.aside-card__eyebrow) { margin-top: 0.75rem; font-size: 0.9rem; }
.aside-card--contact .btn { width: 100%; justify-content: center; margin-top: 1.15rem; padding-inline: 0.75rem; }

.prose { min-width: 0; max-width: 850px; }
.service-intro { margin-bottom: 2.6rem; padding: 1.5rem 1.7rem; border-left: 4px solid var(--red); background: var(--bg-grey); }
.service-intro p + p { margin-top: 0.9rem; }
.service-section { scroll-margin-top: 10.5rem; padding: 0 0 3.1rem; margin: 0 0 3.1rem; border-bottom: 1px solid var(--line); }
.service-section:last-child { margin-bottom: 0; border-bottom: 0; }
.service-section > h2 { margin-bottom: 1.25rem; color: var(--navy); font-size: clamp(1.75rem, 3.2vw, 2.45rem); }
.service-section > h2::after { content: ""; display: block; width: 54px; height: 4px; margin-top: 0.8rem; background: var(--gold); }
.prose h3 { margin: 2rem 0 0.75rem; color: var(--navy); font-size: 1.35rem; text-transform: none; }
.prose p { margin: 0.95rem 0; color: #333; }
.prose p:first-of-type { margin-top: 0; }
.prose a { color: var(--red-dark); font-weight: 600; text-underline-offset: 0.16em; }
.prose ul, .prose ol { margin: 1rem 0 1.3rem 1.35rem; }
.prose li { margin: 0.55rem 0; padding-left: 0.35rem; }
.prose strong { color: var(--ink); }
.prose code { padding: 0.1em 0.3em; background: var(--bg-grey); font-size: 0.9em; }

.service-photo { margin: 2rem 0 0; background: var(--navy-deep); }
.service-photo img { width: 100%; max-height: 470px; object-fit: cover; }
.service-photo figcaption { padding: 0.65rem 0.9rem; color: rgba(255,255,255,0.7); font-size: 0.72rem; }

.reference-gallery {
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  background: var(--navy-deep);
  color: #fff;
}
.reference-gallery__head { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; align-items: end; padding: 1.35rem 1.5rem; }
.reference-gallery__head p { grid-column: 1 / -1; margin: 0; color: var(--gold); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.reference-gallery__head h2 { margin: 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2.1rem); }
.reference-gallery__head span { color: rgba(255,255,255,0.58); font-size: 0.68rem; letter-spacing: 0.04em; text-align: right; text-transform: uppercase; }
.reference-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.18); }
.reference-gallery__grid--single { grid-template-columns: 1fr; }
.reference-gallery figure { min-width: 0; margin: 0; background: var(--navy-deep); }
.reference-gallery figure img { display: block; width: 100%; height: clamp(250px, 34vw, 410px); object-fit: cover; background: #101b40; }
.reference-gallery figcaption { display: grid; gap: 0.4rem; min-height: 106px; padding: 1rem 1.15rem 1.15rem; }
.reference-gallery figcaption strong { color: #fff; font-size: 0.84rem; line-height: 1.5; }
.reference-gallery figcaption span { color: rgba(255,255,255,0.52); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.p1-media-section { background: linear-gradient(180deg, var(--bg-grey), #fff); }
.p1-mapped-gallery { box-shadow: 0 18px 42px rgba(10,21,70,0.12); }
.p1-mapped-gallery figure img { aspect-ratio: 3 / 2; }
.theme-engine .reference-gallery { border-top-color: var(--red); }
.theme-engine .reference-gallery__head p { color: #ffb7ae; }

.table-wrap { width: 100%; margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--line); }
.data-table { width: 100%; min-width: 620px; border-collapse: collapse; line-height: 1.45; }
.data-table caption { padding: 0.65rem 1rem; background: var(--bg-grey); color: var(--grey); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; }
.data-table th, .data-table td { padding: 0.85rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--navy); color: #fff; font-family: var(--font-head); font-size: 0.96rem; letter-spacing: 0.02em; text-transform: uppercase; }
.data-table tbody th { color: var(--navy); background: var(--bg-grey); font-weight: 700; }
.data-table tr:last-child > * { border-bottom: 0; }
.data-table tr > *:last-child { border-right: 0; }

.service-faq { background: var(--navy-deep); }
.service-faq .sec-head h2 { color: #fff; }
.service-faq .sec-head .kicker { color: var(--gold); }
.faq-list { max-width: 950px; }
.faq-item { border-top: 1px solid rgba(255,255,255,0.18); color: #fff; }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.faq-item summary { position: relative; padding: 1.25rem 3rem 1.25rem 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.92rem; color: var(--gold); font-family: var(--font-body); font-size: 1.65rem; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item > div { max-width: 78ch; padding: 0 2.5rem 1.4rem 0; color: rgba(255,255,255,0.76); }
.faq-item > div p { margin: 0; }
.faq-item a { color: var(--gold); }

.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.related-card { position: relative; min-height: 160px; padding: 1.35rem 2.5rem 1.35rem 1.35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; color: var(--navy); text-decoration: none; }
.related-card span { display: block; margin-bottom: 0.55rem; color: var(--red); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.related-card strong { display: block; font-family: var(--font-head); font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; }
.related-card i { position: absolute; right: 1.2rem; bottom: 1rem; color: var(--red); font-size: 1.3rem; font-style: normal; }
.related-card:hover { background: var(--navy); color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 1050px) {
  .service-aside { top: 6.25rem; }
  .service-proof .wrap { grid-template-columns: repeat(2, 1fr); }
  .service-proof div > div:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.16); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
  .page-hero { min-height: 0; }
  .page-hero__shade { background: linear-gradient(90deg, rgba(10,21,70,0.97), rgba(10,21,70,0.75)); }
  .content-grid { grid-template-columns: 1fr; }
  .service-aside { position: static; max-height: none; overflow: visible; }
  .aside-card:first-child { display: none; }
  .aside-card--contact { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem; align-items: center; }
  .aside-card--contact .aside-card__eyebrow, .aside-card--contact h2, .aside-card--contact p { grid-column: 1; }
  .aside-card--contact .btn { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
  .prose { max-width: none; }
}
@media (max-width: 580px) {
  .breadcrumbs { margin-bottom: 1.5rem; }
  .page-hero__inner { padding-block: 2.5rem 3rem; }
  .page-hero h1 { font-size: clamp(2.1rem, 12vw, 3.15rem); }
  .page-hero .hero-actions { display: grid; }
  .page-hero .btn { justify-content: center; }
  .service-proof .wrap { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .service-proof div > div { padding: 1rem var(--gutter); }
  .service-proof strong { font-size: 0.93rem; }
  .service-proof span { display: none; }
  .aside-card--contact { display: block; }
  .aside-card--contact .btn { margin-top: 1.1rem; }
  .service-section { padding-bottom: 2.35rem; margin-bottom: 2.35rem; }
  .related-grid { grid-template-columns: 1fr; }
  .related-card { min-height: 120px; }
  .cta-actions { width: 100%; display: grid; }
  .cta-actions .btn { justify-content: center; }
  .reference-gallery__head { grid-template-columns: 1fr; padding: 1.15rem; }
  .reference-gallery__head span { text-align: left; }
  .reference-gallery__grid { grid-template-columns: 1fr; }
  .reference-gallery figure img { height: 260px; }
}

/* ==========================================================================
   Engine repair page family — a heavier, editorial variation
   ========================================================================== */
.theme-engine { background: var(--bg-grey); }
.theme-engine .page-hero { min-height: 610px; background: #07113a; isolation: isolate; }
.theme-engine .page-hero::before {
  content: ""; position: absolute; z-index: 3; left: 0; bottom: 0;
  width: clamp(90px, 15vw, 220px); height: 7px; background: var(--red);
}
.theme-engine .page-hero__image {
  z-index: -1; inset: 2rem 0 2rem 48%; width: 52%; height: calc(100% - 4rem);
  object-position: center; border-left: 6px solid var(--gold);
  box-shadow: -20px 20px 50px rgba(0,0,0,0.28);
}
.theme-engine .page-hero__shade {
  z-index: 0;
  background: linear-gradient(90deg, #07113a 0%, #07113a 45%, rgba(7,17,58,0.94) 52%, rgba(7,17,58,0.3) 82%, rgba(7,17,58,0.12) 100%);
}
.theme-engine .page-hero__inner { z-index: 1; padding-block: clamp(4rem, 8vw, 6.5rem); padding-right: calc(52% + 1.5rem); }
.theme-engine .page-hero h1 { max-width: 13ch; font-size: clamp(2.45rem, 5vw, 4.55rem); }
.theme-engine .page-hero__deck { max-width: 54ch; }
.theme-engine .page-hero__kicker { display: inline-block; padding: 0.38rem 0.65rem; background: var(--red); color: #fff; }

.theme-engine .service-proof { position: relative; z-index: 4; margin-bottom: -1.4rem; background: transparent; border: 0; transform: translateY(-1.4rem); }
.theme-engine .service-proof .wrap { gap: 0; filter: drop-shadow(0 12px 18px rgba(10,21,70,0.12)); }
.theme-engine .service-proof div > div { padding: 1.4rem 1.45rem; background: #fff; border-color: var(--line); border-top: 4px solid var(--red); }
.theme-engine .service-proof div > div:nth-child(even) { border-top-color: var(--gold); }
.theme-engine .service-proof strong { color: var(--navy); }
.theme-engine .service-proof span { color: var(--grey); }

.theme-engine .service-body { background: var(--bg-grey); }
.theme-engine .service-intro { background: #fff; border-left-width: 6px; box-shadow: 0 8px 24px rgba(10,21,70,0.06); }
.theme-engine .service-section {
  padding: clamp(1.6rem, 3.5vw, 2.5rem); margin-bottom: 1.4rem;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--navy);
  box-shadow: 0 7px 22px rgba(10,21,70,0.045);
}
.theme-engine .service-section:nth-child(even) { border-left-color: var(--red); }
.theme-engine .service-section > h2::after { background: var(--red); }
.theme-engine .service-photo { margin: 2rem 0 0; border-bottom: 5px solid var(--gold); }
.theme-engine .service-photo img { max-height: 520px; }
.theme-engine .aside-card:first-child { background: var(--navy-deep); border-color: var(--navy-deep); border-top-color: var(--gold); }
.theme-engine .aside-card:first-child .aside-card__eyebrow { color: var(--gold); }
.theme-engine .aside-card:first-child li { border-color: rgba(255,255,255,0.14); }
.theme-engine .aside-card:first-child nav a { color: #fff; }
.theme-engine .aside-card:first-child nav a:hover { color: var(--gold); }

.theme-engine .service-faq { background: #fff; }
.theme-engine .service-faq .sec-head h2 { color: var(--navy); }
.theme-engine .service-faq .sec-head .kicker { color: var(--red); }
.theme-engine .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; max-width: none; }
.theme-engine .faq-item { align-self: start; border: 1px solid var(--line); background: var(--bg-grey); color: var(--ink); }
.theme-engine .faq-item:last-child { border-bottom-color: var(--line); }
.theme-engine .faq-item summary { padding: 1.2rem 3.3rem 1.2rem 1.25rem; color: var(--navy); font-size: 1.15rem; }
.theme-engine .faq-item summary::after { right: 1.1rem; color: var(--red); }
.theme-engine .faq-item > div { padding: 0 1.25rem 1.25rem; color: var(--grey); }
.theme-engine .faq-item[open] { background: #fff; border-color: var(--navy); }

.theme-engine .related-services { background: var(--navy); }
.theme-engine .related-services .sec-head h2 { color: #fff; }
.theme-engine .related-services .sec-head p { color: rgba(255,255,255,0.72); }
.theme-engine .related-services .sec-head .kicker { color: var(--gold); }
.theme-engine .related-grid { border-color: rgba(255,255,255,0.18); }
.theme-engine .related-card { border-color: rgba(255,255,255,0.16); }
.theme-engine .related-card:hover { background: var(--red); }

@media (max-width: 1000px) {
  .theme-engine .page-hero__inner { padding-right: calc(46% + 1.5rem); }
  .theme-engine .page-hero__image { inset: 2rem 0 2rem 54%; width: 46%; }
}
@media (max-width: 850px) {
  .theme-engine .page-hero { min-height: 0; }
  .theme-engine .page-hero__image { inset: 0; width: 100%; height: 100%; border: 0; box-shadow: none; }
  .theme-engine .page-hero__shade { background: linear-gradient(90deg, rgba(7,17,58,0.98), rgba(7,17,58,0.68)); }
  .theme-engine .page-hero__inner { padding-right: var(--gutter); }
  .theme-engine .service-proof { margin-bottom: 0; transform: none; background: #fff; }
  .theme-engine .service-proof .wrap { filter: none; }
  .theme-engine .faq-list { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .theme-engine .service-proof div > div { background: #fff; }
  .theme-engine .service-section { padding: 1.4rem 1.2rem; }
  .theme-engine .service-photo { margin: 1.6rem -1.2rem -1.4rem; }
}

/* ==========================================================================
   INTERIOR PAGES — page header, prose, sidebar
   ========================================================================== */

.page-head { background: var(--navy); color: #fff; padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.crumbs { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; }
.crumbs a { color: rgba(255,255,255,0.85); text-decoration: none; }
.crumbs a:hover { color: var(--gold); text-decoration: underline; }
.crumbs i { font-style: normal; margin-inline: 0.5rem; color: rgba(255,255,255,0.4); }
.crumbs [aria-current] { color: var(--gold); }
.page-head h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  color: #fff; max-width: 22ch;
}
.page-head h1::after {
  content: ""; display: block; width: 72px; height: 4px;
  background: var(--gold); margin-top: 1.1rem;
}
.page-lead {
  margin-top: 1.1rem; max-width: 62ch;
  font-size: 1.05rem; color: rgba(255,255,255,0.85);
}

.page-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* --- prose ------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  color: var(--navy);
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 2px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  color: var(--ink); margin-top: 2rem;
}
.prose h4 { font-size: 1.02rem; color: var(--navy); margin-top: 1.5rem; }
.prose p { color: var(--ink); }
.prose strong { color: var(--navy); font-weight: 700; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--navy); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--red); }
.prose blockquote {
  border-left: 4px solid var(--gold);
  padding: 0.6rem 0 0.6rem 1.3rem;
  color: var(--grey); font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }
.prose code {
  background: var(--bg-grey); padding: 0.12em 0.4em;
  font-size: 0.92em; border: 1px solid var(--line);
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: #fff; }
.prose thead th {
  background: var(--navy); color: #fff; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.75rem 0.9rem; white-space: nowrap;
}
.prose tbody td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:nth-child(even) { background: var(--bg-grey); }
.prose tbody td:first-child { font-weight: 600; color: var(--navy); }

/* --- sidebar ------------------------------------------------------------ */
.page-aside { position: sticky; top: 7.5rem; display: grid; gap: 1.5rem; }
.toc { border: 1px solid var(--line); background: var(--bg-grey); padding: 1.25rem 1.35rem; }
.toc h2 {
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
  margin-bottom: 0.8rem;
}
.toc ul { list-style: none; }
.toc li { border-top: 1px solid var(--line); }
.toc li:first-child { border-top: 0; }
.toc a {
  display: block; padding: 0.5rem 0; font-size: 0.9rem;
  color: var(--ink); text-decoration: none; line-height: 1.35;
}
.toc a:hover { color: var(--red); }
.aside-cta { border: 1px solid var(--line); border-top: 4px solid var(--red); background: #fff; padding: 1.35rem; }
.aside-cta h2 { font-size: 1.2rem; color: var(--navy); }
.aside-cta p { font-size: 0.92rem; color: var(--grey); margin: 0.6rem 0 1rem; }
.aside-cta .btn { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.aside-hours { font-size: 0.82rem !important; color: var(--grey); margin: 0.9rem 0 0 !important; }

@media (max-width: 1000px) {
  .page-body { grid-template-columns: 1fr; }
  .page-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .page-aside { grid-template-columns: 1fr; } }

/* ==========================================================================
   INTERIOR PAGE COMPONENTS
   ========================================================================== */

/* --- page hero (interior pages) ---------------------------------------- */
.page-hero { position: relative; background: var(--navy-deep); overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.15) saturate(0.85); }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,21,70,0.96) 0%, rgba(10,21,70,0.88) 38%, rgba(10,21,70,0.5) 75%, rgba(10,21,70,0.3) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); color: #fff; max-width: 18ch; }
.page-hero h1 .rule { display: block; width: 84px; height: 5px; background: var(--gold); margin-top: 1.1rem; }
.page-hero > .wrap > p { max-width: 54ch; margin-top: 1.3rem; color: rgba(255,255,255,0.87); font-size: 1.04rem; }
.page-hero .crumbs { margin-bottom: 1.1rem; }
.crumbs { font-size: 0.8rem; color: rgba(255,255,255,0.7); }

/* --- numbered cost grid -------------------------------------------------- */
.cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cost-grid > div { background: #fff; padding: 1.5rem 1.35rem; }
.cost-grid .n { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--red); letter-spacing: 0.06em; }
.cost-grid h3 { font-size: 1.16rem; color: var(--navy); margin-top: 0.55rem; }
.cost-grid p { font-size: 0.92rem; color: var(--grey); margin-top: 0.65rem; }
@media (max-width: 1000px) { .cost-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .cost-grid { grid-template-columns: 1fr; } }

/* --- alternating bays ---------------------------------------------------- */
.bay { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.bay .wrap { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
.bay--flip .wrap > figure { order: 2; }
.bay figure { margin: 0; }
.bay figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); }
.bay-no { font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.bay-copy h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); color: var(--navy); margin-top: 0.5rem; }
.bay-copy h3::after { content: ""; display: block; width: 52px; height: 3px; background: var(--gold); margin-top: 0.8rem; }
.bay-copy > p { margin-top: 1rem; color: var(--grey); font-size: 0.98rem; }
.bay-change { background: #fff; border-left: 4px solid var(--red); padding: 0.9rem 1.1rem; color: var(--ink) !important; }
.bay-change strong { color: var(--navy); }
.bay-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; }
.bay-links a {
  display: block; padding: 0.42rem 0.85rem; background: #fff; border: 1px solid var(--line);
  text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--navy);
}
.bay-links a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 860px) {
  .bay .wrap { grid-template-columns: 1fr; }
  .bay--flip .wrap > figure { order: 0; }
}

/* --- numbered flow list -------------------------------------------------- */
.flow { list-style: none; counter-reset: f; }
.flow li {
  counter-increment: f; position: relative;
  padding: 0.75rem 0 0.75rem 2.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  font-size: 0.92rem; color: rgba(255,255,255,0.78);
}
.flow li::before {
  content: counter(f); position: absolute; left: 0; top: 0.8rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; font-size: 0.88rem;
}
.flow b { display: block; color: #fff; font-family: var(--font-head); font-size: 1.04rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* --- visit block --------------------------------------------------------- */
.visit { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: clamp(2rem,5vw,3.5rem); align-items: center; }
.visit .sec-head { margin-bottom: 1.25rem; }
.visit-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); }
ul.tick { list-style: none; margin: 1.25rem 0 1.75rem; }
ul.tick li { position: relative; padding-left: 1.8rem; margin-bottom: 0.6rem; color: var(--grey); font-size: 0.97rem; }
ul.tick li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 9px; height: 5px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }

/* --- contact page -------------------------------------------------------- */
.page-head { background: var(--navy); color: #fff; padding-block: clamp(2rem, 4.5vw, 3.25rem); }

.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.route {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-top: 4px solid var(--navy);
  padding: 1.5rem 1.5rem 1.65rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.route:hover { box-shadow: 0 14px 30px rgba(15,31,99,0.13); transform: translateY(-3px); }
.route--urgent { border-top-color: var(--red); background: var(--bg-grey); }
.route-tag { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); }
.route h2 { font-size: 1.5rem; color: var(--navy); margin-top: 0.5rem; }
.route-value { font-family: var(--font-head); font-weight: 700; font-size: 1.28rem; color: var(--ink); margin-top: 0.35rem; }
.route-note { font-size: 0.92rem; color: var(--grey); margin-top: 0.7rem; }

.contact-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.75rem; }
.contact-facts > div { background: #fff; padding: 1.4rem 1.35rem; }
.contact-facts h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.75rem; }
.contact-facts address { font-style: normal; font-size: 0.95rem; line-height: 1.75; color: var(--ink); }
.contact-facts p { font-size: 0.97rem; color: var(--ink); }
.contact-facts a { color: var(--red); font-weight: 600; text-decoration: none; }
.contact-facts a:hover { text-decoration: underline; }
.contact-facts .muted, .muted { color: var(--grey); font-size: 0.88rem; margin-top: 0.5rem; }
.contact-facts .plus { font-size: 0.88rem; color: var(--grey); }

.bring-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.bring-grid h3 { font-size: 1.2rem; color: var(--navy); padding-bottom: 0.6rem; border-bottom: 2px solid var(--navy); }
.bring-grid ul.tick { margin-top: 1rem; }
@media (max-width: 950px) { .routes, .contact-facts, .bring-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .routes, .contact-facts, .bring-grid { grid-template-columns: 1fr; } }

/* --- service request page ------------------------------------------------ */
.keypoint { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; background: var(--bg-grey); border-left: 5px solid var(--red); padding: clamp(1.5rem,3vw,2.25rem); }
.keypoint-mark { width: 54px; height: 54px; display: grid; place-items: center; background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; }
.keypoint h2 { font-size: clamp(1.35rem,2.6vw,1.9rem); color: var(--navy); }
.keypoint p { margin-top: 0.9rem; color: var(--ink); max-width: 74ch; }
@media (max-width: 620px) { .keypoint { grid-template-columns: 1fr; } .keypoint-mark { display: none; } }

.approve { list-style: none; counter-reset: ap; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.approve li { counter-increment: ap; position: relative; padding: 0.9rem 0 0.9rem 3rem; border-bottom: 1px solid var(--line); }
.approve li::before { content: counter(ap,decimal-leading-zero); position: absolute; left: 0; top: 1rem; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--red); }
.approve b { display: block; font-family: var(--font-head); font-size: 1.08rem; text-transform: uppercase; color: var(--navy); letter-spacing: 0.02em; }
.approve span { display: block; font-size: 0.92rem; color: var(--grey); margin-top: 0.25rem; }
@media (max-width: 800px) { .approve { grid-template-columns: 1fr; } }

.factors { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.18); }
.factors > div { background: var(--navy); padding: 1.15rem 1.2rem; }
.factors b { display: block; font-family: var(--font-head); font-size: 1.02rem; text-transform: uppercase; color: #fff; }
.factors span { display: block; font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-top: 0.35rem; }
@media (max-width: 1000px) { .factors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .factors { grid-template-columns: 1fr; } }
.honest { margin-top: 1.75rem; border-left: 5px solid var(--gold); padding: 1.2rem 1.4rem; background: rgba(255,255,255,0.06); }
.honest b { font-family: var(--font-head); font-size: 1.2rem; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.5rem; }
.honest p { color: rgba(255,255,255,0.85); font-size: 0.96rem; }

.cap-item { display: block; padding: 1rem 1.1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; font-size: 0.9rem; color: var(--grey); }
.cap-item b { display: block; font-family: var(--font-head); font-size: 1.05rem; text-transform: uppercase; color: var(--navy); margin-bottom: 0.3rem; }

/* --- certifications page ------------------------------------------------- */
.cert-layout { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,5vw,3.5rem); align-items: start; }
.cert-scope-big { background: var(--bg-grey); border-left: 5px solid var(--red); padding: clamp(1.5rem,3vw,2.25rem); margin-bottom: 1.5rem; }
.cert-scope-big blockquote { font-family: var(--font-head); font-size: clamp(1.2rem,2.4vw,1.6rem); line-height: 1.42; color: var(--ink); margin-top: 0.9rem; }
.cert-why { margin-top: 1.2rem; color: var(--grey); font-size: 0.96rem; }
.cert-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; border: 1px solid var(--line); }
.cert-table caption { text-align: left; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); padding-bottom: 0.7rem; }
.cert-table th { text-align: left; padding: 0.7rem 0.9rem; background: var(--bg-grey); color: var(--grey); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; width: 42%; border-bottom: 1px solid var(--line); vertical-align: top; }
.cert-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); }
.cert-table strong { color: var(--navy); }
@media (max-width: 900px) { .cert-layout { grid-template-columns: 1fr; } }

/* --- operations groups (pillar pages) ------------------------------------ */
.ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ops-group { background: #fff; padding: 1.4rem 1.35rem 1.5rem; display: flex; flex-direction: column; }
.ops-group h3 { font-size: 1.22rem; color: var(--navy); padding-bottom: 0.65rem; border-bottom: 2px solid var(--red); }
.ops-group ul { list-style: none; margin-top: 0.9rem; flex: 1; }
.ops-group li { position: relative; padding-left: 1rem; margin-bottom: 0.55rem; font-size: 0.9rem; color: var(--grey); line-height: 1.5; }
.ops-group li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--line); }
.ops-link { display: inline-block; margin-top: 1.1rem; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--red); text-decoration: none; }
.ops-link:hover { text-decoration: underline; }
@media (max-width: 1050px) { .ops { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ops { grid-template-columns: 1fr; } }

/* ==========================================================================
   HOMEPAGE ENRICHMENT — imagery and motion in the text-heavy sections
   ========================================================================== */

/* --- process steps with photographs ------------------------------------- */
.steps-visual { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: vs; }
.vstep { background: #fff; display: flex; flex-direction: column; }
.vstep figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--navy-deep); position: relative; }
.vstep figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .4s ease; filter: saturate(.85); }
.vstep:hover figure img { transform: scale(1.06); filter: saturate(1.05); }
.vstep figure::after {
  counter-increment: vs; content: counter(vs,decimal-leading-zero);
  position: absolute; left: 0; bottom: 0;
  background: var(--red); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: .3rem .7rem; letter-spacing: .05em;
}
.vstep-body { padding: 1rem 1.05rem 1.25rem; flex: 1; }
.vstep-body h3 { font-size: 1.06rem; color: var(--navy); line-height: 1.2; }
.vstep-body p { font-size: .87rem; color: var(--grey); margin-top: .45rem; }
@media (max-width: 1000px) { .steps-visual { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .steps-visual { grid-template-columns: 1fr; } }

/* --- figure pairs beside argument copy ---------------------------------- */
.fig-stack { display: grid; gap: 1rem; }
.fig-stack figure { margin: 0; position: relative; overflow: hidden; }
.fig-stack img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .6s ease; }
.fig-stack figure:hover img { transform: scale(1.04); }
.fig-stack figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem .9rem .7rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(10,21,70,0) 0%, rgba(10,21,70,.85) 75%);
}

/* --- capability grid with thumbnails ------------------------------------ */
.caps-visual { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.capcard {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.capcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,31,99,.14); border-color: var(--navy); }
.capcard figure { margin: 0; aspect-ratio: 3/2; overflow: hidden; background: var(--navy-deep); }
.capcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.capcard:hover img { transform: scale(1.07); }
.capcard span { display: block; padding: .8rem .95rem; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; color: var(--navy); }
.capcard:hover span { color: var(--red); }
@media (max-width: 900px) { .caps-visual { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .caps-visual { grid-template-columns: 1fr; } }

/* --- industries as image tiles ------------------------------------------ */
.ind-visual { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.indtile { position: relative; display: block; text-decoration: none; min-height: 190px; overflow: hidden; background: var(--navy-deep); }
.indtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .6s ease, opacity .3s ease; }
.indtile:hover img { transform: scale(1.08); opacity: .8; }
.indtile-body { position: relative; z-index: 2; padding: 1.15rem 1.2rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(10,21,70,.45) 0%, rgba(10,21,70,.88) 100%); }
.indtile b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: #fff; }
.indtile span { font-size: .84rem; color: rgba(255,255,255,.8); }
.indtile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--gold); transition: width .35s ease; z-index: 3; }
.indtile:hover::after { width: 100%; }
@media (max-width: 950px) { .ind-visual { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ind-visual { grid-template-columns: 1fr; } }

/* --- lightbox for gallery ------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,14,40,.94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem,4vw,3rem);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border: 1px solid rgba(255,255,255,.2); }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 1rem; font-size: .9rem; letter-spacing: .04em; }
.lightbox-close {
  position: absolute; top: 1.1rem; right: 1.3rem;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); background: none; color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: var(--red); border-color: var(--red); }
.marquee figure { cursor: zoom-in; }

/* --- callout toast (non-blocking, dismissible) --------------------------- */
.toast {
  position: fixed; left: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem);
  z-index: 150; max-width: 340px;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--red);
  box-shadow: 0 18px 44px rgba(10,21,70,.24);
  padding: 1.1rem 1.2rem 1.15rem 1.25rem;
  transform: translateY(150%); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .4s ease;
}
.toast.show { transform: none; opacity: 1; }
.toast b { display: block; font-family: var(--font-head); font-size: 1.1rem; text-transform: uppercase; color: var(--navy); }
.toast p { font-size: .89rem; color: var(--grey); margin: .35rem 0 .8rem; }
.toast .toast-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.toast .btn { padding: .55rem .9rem; font-size: .72rem; }
.toast-close {
  position: absolute; top: .4rem; right: .5rem; border: 0; background: none;
  font-size: 1.3rem; line-height: 1; color: var(--grey); cursor: pointer; padding: .2rem .4rem;
}
.toast-close:hover { color: var(--red); }
@media (max-width: 760px) { .toast { bottom: 76px; left: 1rem; right: 1rem; max-width: none; } }

/* --- counters / stat band ------------------------------------------------ */
.statband { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.statband-bg { position: absolute; inset: 0; }
.statband-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.statband .wrap { position: relative; z-index: 2; padding-block: clamp(2.5rem,5vw,3.75rem); }
.statgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.2); }
.statgrid > div { background: var(--navy); padding: 1.35rem 1.2rem; text-align: center; }
.statgrid b {
  display: block; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem,4vw,2.8rem); color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.statgrid b span { font: inherit; color: inherit; }
.statgrid span { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: .5rem; }
@media (max-width: 820px) { .statgrid { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .vstep figure img, .capcard img, .indtile img, .fig-stack img { transition: none !important; }
}

/* --- analytics consent --------------------------------------------------- */
.analytics-consent {
  position: fixed;
  z-index: 300;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: min(440px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy);
  box-shadow: 0 18px 44px rgba(10,21,70,.24);
}
.analytics-consent p { margin: 0 0 .85rem; }
.analytics-consent strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 1.05rem;
  text-transform: uppercase;
}
.analytics-consent span { display: block; color: var(--grey); font-size: .86rem; line-height: 1.5; }
.analytics-consent > div { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.analytics-consent .btn { padding: .58rem .9rem; font-size: .7rem; }
.analytics-decline,
.analytics-settings {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.analytics-decline { color: var(--grey); font-size: .8rem; }
.analytics-settings { color: inherit; font-size: inherit; }
.analytics-decline:hover,
.analytics-settings:hover { color: var(--red); }
@media (max-width: 760px) {
  .analytics-consent { right: 1rem; bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .analytics-consent { scroll-behavior: auto; }
}

/* Staff login — the way into the job-costing portal.
   Deliberately quiet: it belongs to the workshop, not to customers. On desktop
   it sits in the utility strip beside the opening hours; on phones the utility
   strip is hidden, so it appears only inside the hamburger menu. nofollow so it
   stays out of search results. */
.utility .staff-login {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.utility .staff-login:hover { color: #fff; text-decoration: underline; }

.mn-staff {
  display: block;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.mn-staff:hover { color: #fff; text-decoration: underline; }



/* ==========================================================================
   MOBILE CORRECTIONS  (must stay last in this file)
   --------------------------------------------------------------------------
   .page-hero is styled by two template blocks: the interior-page block near
   the end of this file re-declares `.page-hero h1` at the same specificity as
   the mobile rules in the @media blocks above it, so the later declaration won
   and all mobile hero tuning was silently dead. These rules re-assert it after
   both blocks. Keep this section at the bottom of the file.
   ========================================================================== */

@media (max-width: 580px) {
  /* Hero: shrink the headline and tighten padding so the call button stays
     above the fold on a 390px screen. */
  .page-hero h1 { font-size: clamp(1.85rem, 9.5vw, 2.6rem); max-width: 20ch; }
  .page-hero__inner,
  .page-hero .wrap { padding-block: 2rem 2.4rem; }
  .page-hero__deck,
  .page-hero > .wrap > p { font-size: 0.98rem; margin-top: 1rem; max-width: none; }
  .page-hero h1 .rule { margin-top: 0.9rem; }
  .breadcrumbs, .page-hero .crumbs { margin-bottom: 1rem; }

  /* Trust signals: "Established 2011" and the like were hidden entirely on
     phones. 99.8% of paid traffic is mobile, and these are the proofs a
     cautious buyer checks before calling - shrink them, do not remove them. */
  .service-proof span { display: block; font-size: 0.7rem; margin-top: 0.15rem; }
}

/* Mobile utility strip: keep the three actions visitors can use or verify
   immediately. The address, hours and staff link remain available in the
   navigation/contact content, but trying to fit all six items here caused the
   bar to wrap unpredictably and push past the viewport on narrow phones. */
@media (max-width: 800px) {
  .utility .hide-sm { display: none; }
}
@media (max-width: 520px) {
  .utility .wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "phone email iso";
    column-gap: 0.5rem;
    padding-block: 0;
  }
  .utility .wrap::after { display: none; }
  .utility-group { display: contents; }
  .utility a,
  .utility .iso { font-size: 0.68rem; line-height: 1.4; white-space: nowrap; }
  .utility a { padding-block: 0.55rem; }
  .utility a[href^="tel:"] { grid-area: phone; justify-self: start; }
  .utility a[href^="mailto:"] {
    grid-area: email; justify-self: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .utility .iso { display: block; grid-area: iso; justify-self: end; font-size: 0; }
  .utility .iso::after { content: "ISO 9001"; font-size: 0.68rem; }

  /* The same number remains prominent in the utility strip and action bar.
     Removing its third appearance here gives the logo and 46px menu target
     enough room without horizontal overflow at 320–430px. */
  .header-cta .header-phone { display: none; }
}
@media (max-width: 350px) {
  .utility a { font-size: 0.63rem; }
  .utility .iso::after { font-size: 0.63rem; }
  .utility .iso { letter-spacing: 0.015em; }
}

/* Mobile UX pass: preserve the workshop character while reducing unnecessary
   scrolling, making primary actions easier to tap and giving touch users
   direct control of the homepage galleries. Keep these overrides last. */
@media (max-width: 580px) {
  /* The navigation panel sits above the page, while the sticky header and its
     X control must remain above the panel so it can always be closed. */
  .site-header { z-index: 100; }
  body.nav-open .site-header { position: fixed; inset: 0 0 auto; }
  .mobile-nav { padding-top: calc(5.5rem + env(safe-area-inset-top, 0px)); }

  .section { padding-block: 2.5rem; }
  .sec-head { margin-bottom: 1.6rem; }

  /* Full-width buttons form a predictable thumb target on every hero type. */
  .hero .wrap { padding-block: 2.6rem 2.75rem; }
  .hero h1 { font-size: clamp(2rem, 9.5vw, 2.45rem); }
  .hero p { margin-top: 1.1rem; font-size: 0.98rem; }
  .hero .hero-actions { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
  .hero .hero-actions .btn,
  .page-hero .hero-actions .btn { width: 100%; justify-content: center; }

  /* Four trust signals work better as a compact 2x2 panel than four tall rows. */
  .creds .wrap { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .cred { min-width: 0; padding: 1rem var(--gutter); }
  .cred b { font-size: 1.08rem; white-space: normal; }
  .cred span { display: block; margin-top: 0.15rem; font-size: 0.74rem; line-height: 1.4; }
  .cred:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cred + .cred::before { top: 1rem; bottom: 1rem; }
  .cred:nth-child(odd)::before { display: none !important; }
  .cred:nth-child(even)::before { display: block !important; }

  /* Long interior-page names must not push the hero wider than the phone. */
  .breadcrumbs,
  .page-hero .crumbs {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .breadcrumbs a,
  .page-hero .crumbs a { display: inline-block; padding-block: 0.25rem; }

  /* Auto-moving rows cannot be paused with a hover on a phone. Present each as
     a native swipe gallery instead and remove the duplicated animation set. */
  .marquee-mask,
  .brand-card-mask,
  .brand-logo-mask {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .marquee-mask::-webkit-scrollbar,
  .brand-card-mask::-webkit-scrollbar,
  .brand-logo-mask::-webkit-scrollbar { display: none; }
  .marquee-mask::before,
  .marquee-mask::after,
  .brand-card-mask::before,
  .brand-card-mask::after,
  .brand-logo-mask::before,
  .brand-logo-mask::after { display: none; }
  .marquee,
  .ticker,
  .brand-card-ticker { animation: none !important; transform: none !important; }
  .marquee figure,
  .brand-card,
  .brand-logo-item { scroll-snap-align: start; }
  .marquee figure:nth-child(n + 7),
  .brand-card-set[aria-hidden="true"],
  .brand-logo-set[aria-hidden="true"] { display: none; }
  .marquee figure figcaption { opacity: 1; transform: none; }
}

@media (hover: none) {
  .card:hover,
  .route:hover,
  .capcard:hover { transform: none; }
  .card:hover figure img,
  .capcard:hover img,
  .vstep:hover figure img,
  .fig-stack figure:hover img,
  .indtile:hover img { transform: none; }
}

/* On phones, use the compact trust slot for UAE identity. The full ISO proof
   remains in the page-level certification and service-proof content. */
@media (max-width: 520px) {
  .utility .wrap { grid-template-areas: "phone email uae"; }
  .utility .iso { display: none; }
  .utility .wrap::after {
    content: "UAE";
    display: inline-flex;
    grid-area: uae;
    justify-self: end;
    align-items: center;
    min-height: 1.34rem;
    padding: 0.2rem 0.45rem 0.2rem 2rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background:
      linear-gradient(#f51d32, #f51d32) 0.45rem 50% / 0.3rem 0.76rem no-repeat,
      linear-gradient(to bottom, #00843d 0 33.333%, #fff 33.333% 66.666%, #000 66.666%) 0.75rem 50% / 1rem 0.76rem no-repeat,
      rgba(255,255,255,0.055);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
}