:root{--leading:28px;--half:14px;--edge:clamp(20px,5vw,72px);--measure:58ch;--site-frame:max(20px,calc((100% - 1240px) / 2 + 20px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-bg);text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--edge)}
a{text-decoration:none}
/* Images keep their intrinsic proportions by default. Components that present
   photography opt into the shared cover treatment below. This avoids an image
   unexpectedly setting the height of a card or section. */
img{display:block;max-width:100%;height:auto}
.hero-media img,.hero-slider .hero-slide,.pcard .pic img,.gallery .pic img,.media-frame img,.project-feature__media img,.service-card__media img{width:100%;height:100%;object-fit:cover}

/* — site loader — */
.site-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--color-bg);opacity:1;visibility:visible;transition:opacity .38s ease,visibility .38s ease}
.site-loader.is-hiding{opacity:0;visibility:hidden;pointer-events:none}
.site-loader__content{display:grid;place-items:center;gap:16px}
.site-loader__logo{width:clamp(96px,18vw,168px);height:clamp(96px,18vw,168px);object-fit:contain;filter:drop-shadow(0 14px 26px rgba(38,42,96,.2));animation:bms-loader-pulse 1.35s ease-in-out infinite}
.site-loader__label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
@keyframes bms-loader-pulse{0%,100%{transform:scale(.92);opacity:.72}50%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.site-loader,.site-loader__logo{transition:none;animation:none}}

/* — nav — */
.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(10px,2vw,var(--space-4));padding:14px max(20px,calc((100% - 1200px) / 2 + 20px));background:color-mix(in srgb,var(--color-bg) 72%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-nav.scrolled{border-color:var(--color-divider)}
.nav-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-heading);letter-spacing:.02em;text-transform:uppercase;color:var(--color-text);margin-right:auto;flex:none}
.nav-brand__name{font-weight:700;font-size:22px;line-height:1.14;max-width:17ch}
.nav-brand img{width:32px;height:32px;object-fit:contain;flex:none}
.nav-brand__name{display:block}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);flex-wrap:nowrap}
.nav-links a{color:color-mix(in srgb,var(--color-text) 82%,transparent);font-size:14px;position:relative;white-space:nowrap}
.nav-links .btn{white-space:nowrap;flex:none}
@media (max-width:1180px){.nav-brand{gap:10px}.nav-brand__name{font-size:19px}.nav-brand img{width:30px;height:30px}}
.nav-links a:hover,.nav-links a[aria-current='page']{color:var(--color-accent)}
.nav-toggle{display:none;background:none;border:0;color:var(--color-text);cursor:pointer;padding:6px}
.lang-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:color-mix(in srgb,var(--color-text) 82%,transparent);border:1px solid var(--color-divider);padding:6px 12px;border-radius:999px}
.lang-pill:hover{color:var(--color-accent);border-color:var(--color-accent)}
@media (max-width:1100px){
  .nav-links{position:fixed;inset:56px 0 0 0;flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--edge) 24px;background:var(--color-bg);border-top:1px solid var(--color-divider);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .nav-links a{padding:13px 0;width:100%;border-bottom:1px solid var(--color-divider)}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-toggle{display:inline-flex}
}

/* — reveal-on-scroll — */
.reveal,[data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in,[data-stagger].in>*{opacity:1;transform:translateY(0)}
[data-stagger].in>*:nth-child(1){transition-delay:0ms}
[data-stagger].in>*:nth-child(2){transition-delay:70ms}
[data-stagger].in>*:nth-child(3){transition-delay:140ms}
[data-stagger].in>*:nth-child(4){transition-delay:210ms}
[data-stagger].in>*:nth-child(5){transition-delay:280ms}
[data-stagger].in>*:nth-child(6){transition-delay:350ms}
[data-stagger].in>*:nth-child(7){transition-delay:420ms}
[data-stagger].in>*:nth-child(8){transition-delay:490ms}

/* — sections — */
.section{padding:calc(3 * var(--leading)) 0}
.section.tight{padding:calc(1.5 * var(--leading)) 0}
.section.dark{position:relative;overflow:hidden}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--color-brand-blue) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-brand-blue) 16%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 85%);pointer-events:none}
.eyebrow{position:relative;display:block;font-size:13px;line-height:var(--half);letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent);margin:0 0 calc(var(--leading) - var(--half))}
.eyebrow::before{content:"";position:absolute;left:-64px;top:calc(50% - .5px);width:44px;height:1px;background:var(--color-accent)}
@media (max-width:1280px){.eyebrow::before{display:none}}
.lede{font-size:17px;line-height:var(--leading);max-width:var(--measure);color:color-mix(in srgb,var(--color-text) 88%,transparent);margin:0}
.section.dark .lede,.section.dark p{color:var(--color-text-muted)}
.section.dark h1,.section.dark h2,.section.dark h3{color:var(--color-heading)}
h1.hero-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(38px,5.6vw,72px);line-height:1.08;letter-spacing:-.015em;margin:0}
.grad-text{color:var(--color-accent)}
.center{text-align:center;margin-inline:auto}

/* — hero (page top, non-home) — */
.page-hero{padding:calc(3.5 * var(--leading)) 0 calc(2.5 * var(--leading))}
.hero-flags{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--half);font-size:14px;color:var(--color-text-muted)}

/* — home hero — */
.home-hero{position:relative;overflow:hidden;padding:calc(4.5 * var(--leading)) 0 calc(3 * var(--leading))}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.72) 62%,var(--color-surface) 99%)}
.hero-media img{filter:saturate(1) brightness(1.2) contrast(.98)}
.hero-slider .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-slider .hero-slide.is-active{opacity:1}
.home-hero .wrap{position:relative;z-index:2;width:100%;max-width:none;margin:0;padding-inline:var(--site-frame)}
.hero-caption{position:absolute;z-index:2;right:var(--site-frame);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.03em;color:var(--color-accent);padding:9px 16px;border-radius:999px;border:1px solid var(--color-divider);background:rgba(255,255,255,.92)}
.hero-caption__dot{width:6px;height:6px;border-radius:50%;background:var(--color-brand-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand-blue) 28%,transparent)}
[dir="rtl"] .hero-caption{right:auto;left:var(--edge)}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;color:var(--color-accent);border:1px solid var(--color-divider);padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.9)}
.hero-kicker i{width:6px;height:6px;border-radius:50%;background:var(--color-accent);display:inline-block;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 30%,transparent)}
.home-hero h1{margin-top:var(--half)}
.home-hero .lede{margin-top:calc(1.2 * var(--leading))}
.actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--leading)}

/* — stat band — */
.statband{background:var(--color-surface-2);padding:calc(2.2 * var(--leading)) 0}
.home-hero + .statband .wrap{max-width:none;margin:0;padding-inline:var(--site-frame)}
.statband .inner{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:calc(1.4 * var(--leading)) var(--leading)}
.stat b{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(32px,3.2vw,48px);color:var(--color-heading);font-feature-settings:"tnum" 1}
.stat span{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}
@media (max-width:640px){.statband .inner{grid-template-columns:repeat(2,1fr)}}

/* — clients ticker — */
.clients{padding:calc(1.6 * var(--leading)) 0 calc(2.4 * var(--leading))}
.ticker-row{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);margin-top:14px}
.ticker-chip{display:inline-flex;align-items:center;font-family:var(--font-heading);font-weight:var(--font-heading-weight);white-space:nowrap;border-radius:999px}
.ticker-row.primary .ticker-chip{font-size:17px;padding:10px 20px;color:var(--color-accent);border:1px solid color-mix(in srgb,var(--color-brand-blue) 55%,transparent);background:var(--color-surface)}
.ticker-row.secondary .ticker-chip{font-size:13.5px;padding:7px 15px;color:color-mix(in srgb,var(--color-text) 68%,transparent);border:1px solid var(--color-divider)}

/* — marquee — */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.marquee-track{display:flex;gap:36px;width:max-content;animation:marquee 28s linear infinite}
.marquee-track span{font-size:14px;color:color-mix(in srgb,var(--color-text) 62%,transparent);white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-row .marquee-track{gap:14px;animation-duration:50s}
.ticker-row.secondary .marquee-track{animation-duration:40s;animation-direction:reverse}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}
.meta.center{text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin:0}

/* — marquee section heading (Trusted by leading brands / Working across) — */
.marquee-head{text-align:center;margin-bottom:22px}
.marquee-head .eyebrow::before{display:none}
.marquee-head h2{margin:4px 0 0;font-size:22px}
.marquee-head .lede{margin:8px auto 0;max-width:52ch}

/* — client logo marquee — */
.client-logos:hover .marquee-track{animation-play-state:paused}
.client-logos .marquee-track{animation-duration:90s}
.client-logo-item{flex:0 0 auto;width:180px;height:76px;padding:10px 14px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:var(--radius-md);box-shadow:0 1px 3px rgba(15,23,42,.08)}
.client-logo-item img{display:block;width:auto;height:auto;max-width:140px;max-height:48px;object-fit:contain}
@media (max-width:640px){.client-logo-item{width:130px;height:60px;padding:8px 10px}.client-logo-item img{max-width:110px;max-height:38px}}

/* — grids/cards — */
.grid{display:grid;gap:var(--space-4)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.pcard{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-sm);transition:transform .35s,box-shadow .35s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pcard .pic{aspect-ratio:4/3;overflow:hidden}
.pcard .pic img{transition:transform .5s}
.pcard:hover .pic img{transform:scale(1.06)}
.pcard .body{padding:var(--space-4)}
.pcard h3{margin:0 0 6px;font-size:19px;color:var(--color-text)}
.pcard p{margin:0;font-size:14px;color:color-mix(in srgb,var(--color-text) 75%,transparent)}
.pcard .go{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--color-bg) 70%,transparent);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-size:16px;transform:translateX(4px);opacity:0;transition:opacity .3s,transform .3s}
.pcard:hover .go{opacity:1;transform:translateX(0)}

/* — projects index — */
.projects-heading{max-width:64ch;margin-bottom:32px}
.projects-heading h2{margin:0 0 10px}
.project-feature{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:stretch;height:clamp(520px,40vw,560px);min-height:0;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-md)}
.project-feature__media{position:relative;display:block;min-height:0;overflow:hidden;background:var(--color-section)}
.project-feature__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.82))}
.project-feature__media img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project-feature:hover .project-feature__media img{transform:scale(1.045)}
.project-feature__label{position:absolute;z-index:1;left:22px;bottom:20px;padding:7px 12px;border:1px solid var(--color-divider);border-radius:999px;background:#fff;color:var(--color-accent);box-shadow:var(--shadow-sm);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.project-feature__body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(30px,3.25vw,40px);align-self:center}
.project-feature__location{margin:0 0 10px;color:var(--color-accent);font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.project-feature__body h2{margin:0 0 14px;font-size:clamp(28px,3vw,40px);color:var(--color-heading)}
.project-feature__body>p:not(.project-feature__location){margin:0;color:var(--color-text-muted);font-size:16px;line-height:1.7}
.project-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin:22px 0 16px;padding:0;list-style:none}
.project-metrics li{min-width:0;padding:14px 10px;border:1px solid var(--color-divider);border-radius:var(--radius-sm);text-align:center;background:color-mix(in srgb,var(--color-bg) 68%,transparent)}
.project-metrics strong{display:block;color:var(--color-heading);font-family:var(--font-heading);font-size:18px}
.project-metrics span{display:block;margin-top:3px;color:var(--color-text-muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.project-feature__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.project-feature__tags span{padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--color-accent) 10%,transparent);color:var(--color-accent);font-size:12px;font-weight:600}
.projects-note{margin:22px 0 0;color:var(--color-text-muted);font-size:14px;text-align:center}
@media (max-width:960px){.project-feature{grid-template-columns:1fr;height:auto;min-height:0}.project-feature__media{height:clamp(230px,72vw,320px)}.project-feature__body{padding:30px}.project-feature__label{left:18px;bottom:16px}}
@media (max-width:440px){.project-feature__body{padding:24px 20px}.project-feature__body h2{font-size:clamp(26px,9vw,34px)}.project-feature__body>p:not(.project-feature__location){font-size:15px}.project-metrics{gap:7px}.project-metrics li{padding:12px 5px}.project-metrics strong{font-size:16px}.project-metrics span{font-size:10px}.project-feature__tags{gap:6px;margin-bottom:20px}.project-feature__tags span{padding:5px 8px;font-size:11px}}

/* — numbered service list — */
.numlist{display:flex;flex-direction:column}
.numrow{display:flex;align-items:center;justify-content:space-between;gap:var(--leading);padding:22px 0;color:var(--color-text);position:relative}
.numrow+.numrow::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent)}
.numrow h3{margin:0 0 4px;font-size:20px;transition:color .2s}
.numrow p{margin:0;font-size:14.5px;color:color-mix(in srgb,var(--color-text) 75%,transparent);max-width:56ch}
.numrow .arrow{font-size:20px;color:var(--color-accent);flex:none;transform:translateX(0);transition:transform .3s}
.numrow:hover h3{color:var(--color-accent)}
.numrow:hover .arrow{transform:translateX(6px)}

/* — service tiles (fancier grid) — */
.svc-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.svc-tile{position:relative;display:flex;flex-direction:column;padding:28px 26px;border-radius:var(--radius-lg);background:var(--color-bg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s,box-shadow .3s}
.svc-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.svc-tile .num{position:absolute;top:-10px;right:16px;font-family:var(--font-heading);font-size:72px;font-weight:var(--font-heading-weight);color:color-mix(in srgb,var(--color-accent) 13%,transparent);line-height:1;user-select:none;z-index:0}
.svc-tile h3{margin:0 0 8px;font-size:20px;position:relative;z-index:1}
.svc-tile p{margin:0 0 16px;font-size:14.5px;color:color-mix(in srgb,var(--color-text) 78%,transparent);position:relative;z-index:1;flex:1}
.svc-tile .more-link{font-size:13px;color:var(--color-accent);position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.svc-tile:hover .more-link{gap:10px}
.svc-tile.cta{background:color-mix(in srgb,var(--color-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 40%,transparent)}
@media (max-width:720px){.svc-grid2{grid-template-columns:1fr}}

/* — location cards — */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:900px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.loc-grid{grid-template-columns:1fr}}
.loc-card{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-sm);transition:transform .3s}
.loc-card:hover{transform:translateY(-4px)}
.loc-card img{width:100%;height:auto;aspect-ratio:8/5.6;object-fit:cover;background:var(--color-neutral-900)}
.loc-flag{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--color-bg) 70%,transparent);color:var(--color-text);padding:4px 10px;border-radius:999px;z-index:2}
.loc-flag.new{background:var(--color-accent);color:var(--color-accent-900)}
.loc-body{padding:var(--space-4)}
.loc-body h3{margin:0 0 4px;font-size:19px}
.loc-body p{margin:0;font-size:14px;color:color-mix(in srgb,var(--color-text) 75%,transparent)}

/* — gallery — */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:720px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface)}
.gallery .pic{aspect-ratio:4/3;overflow:hidden}
.gallery img{transition:transform .5s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{padding:10px 12px;font-size:12.5px;color:color-mix(in srgb,var(--color-text) 62%,transparent)}

/* — split — */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--leading) clamp(24px,5vw,88px);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev>*:first-child{order:2}
@media (max-width:820px){.split,.split.rev{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
.media-frame{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-sm)}
.split h2{font-size:32px;margin:0 0 var(--half)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{font-size:15px;padding-left:26px;position:relative;color:color-mix(in srgb,var(--color-text) 88%,transparent)}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}

/* — timeline — */
.timeline{display:flex;flex-direction:column;margin-top:var(--half)}
.tl{display:grid;grid-template-columns:110px 1fr;gap:var(--leading);padding:18px 0;position:relative}
.tl+.tl::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent)}
.tl b{font-family:var(--font-heading);font-weight:var(--font-heading-weight);color:var(--color-accent);font-size:17px}
.tl p{margin:0;font-size:15px;color:color-mix(in srgb,var(--color-text) 82%,transparent);max-width:60ch}
@media (max-width:560px){.tl{grid-template-columns:1fr}}

/* — service detail cards — */
.svc-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--leading) clamp(24px,5vw,80px);padding:calc(2 * var(--leading)) 0;align-items:start;position:relative}
.svc-detail+.svc-detail::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent)}
.svc-detail .media-frame img{aspect-ratio:4/3}
.svc-detail h2{font-size:26px;margin:0 0 8px}
.svc-detail .summary{font-size:15px;color:color-mix(in srgb,var(--color-text) 80%,transparent);margin:0 0 14px}
.svc-detail ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.svc-detail li{font-size:14px;padding-left:20px;position:relative;color:color-mix(in srgb,var(--color-text) 85%,transparent)}
.svc-detail li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--color-accent)}
@media (max-width:820px){.svc-detail{grid-template-columns:1fr}.svc-detail ul{grid-template-columns:1fr}}

/* — FM Services: Hard/Soft category panels + Operations capability grid — */
.fm-subhead{max-width:70ch}
.fm-subhead h3{margin:0 0 8px;font-size:23px;color:var(--color-heading)}
.fm-subhead p{margin:0;font-size:15px;color:var(--color-text-muted)}

.fm-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:28px}
.fm-panel{position:relative;padding:30px 28px;border-radius:var(--radius-lg);background:var(--color-surface-raised);border:1px solid var(--color-divider);border-top:3px solid var(--color-divider);box-shadow:var(--shadow-sm);transition:border-color .25s ease,box-shadow .25s ease}
.fm-panel:hover{box-shadow:var(--shadow-md)}
.fm-panel--hard{border-top-color:color-mix(in srgb,var(--color-brand-blue) 65%,transparent)}
.fm-panel--hard:hover{border-color:color-mix(in srgb,var(--color-brand-blue) 34%,var(--color-divider));border-top-color:color-mix(in srgb,var(--color-brand-blue) 65%,transparent)}
.fm-panel--soft{border-top-color:color-mix(in srgb,var(--color-accent) 60%,transparent)}
.fm-panel--soft:hover{border-color:color-mix(in srgb,var(--color-accent) 34%,var(--color-divider));border-top-color:color-mix(in srgb,var(--color-accent) 60%,transparent)}
.fm-panel__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--color-divider)}
.fm-panel__icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:14px;color:#fff}
.fm-panel--hard .fm-panel__icon{background:linear-gradient(145deg,var(--color-brand-blue),var(--color-accent))}
.fm-panel--soft .fm-panel__icon{background:linear-gradient(145deg,var(--color-accent),var(--color-brand-blue))}
.fm-panel__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fm-panel__head h4{margin:0 0 4px;font-size:19px;color:var(--color-heading)}
.fm-panel__head p{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-text-muted)}

.fm-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fm-row+.fm-row{border-top:1px solid var(--color-divider)}
.fm-row a{display:flex;align-items:flex-start;gap:14px;padding:14px 2px;border-radius:var(--radius-md);color:inherit;padding-inline-start:2px;transition:background-color .2s ease,padding-inline-start .2s ease}
.fm-row a:hover{background:color-mix(in srgb,var(--color-accent) 6%,transparent);padding-inline-start:10px}
.fm-row__icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;margin-top:1px;border-radius:10px;border:1px solid color-mix(in srgb,var(--color-accent) 24%,transparent);background:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));color:var(--color-accent)}
.fm-row__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fm-row h5{margin:0 0 3px;font-size:15px;font-weight:600;color:var(--color-heading)}
.fm-row p{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-text-muted)}
@media (max-width:760px){.fm-panels{grid-template-columns:1fr}}

.fm-ops{margin-top:56px;padding:clamp(26px,3.5vw,40px) clamp(22px,4vw,44px);border-radius:var(--radius-lg);border:1px solid var(--color-divider);background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-brand-blue) 10%,var(--color-surface-raised)));display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:clamp(22px,4vw,48px);align-items:center}
.fm-ops__head h2,.fm-ops__head h3{margin:0 0 8px;font-size:22px;color:var(--color-heading)}
.fm-ops__head p{margin:0;font-size:14px;line-height:1.55;color:var(--color-text-muted)}
.fm-ops__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.fm-ops__item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-md);background:var(--color-surface-raised);border:1px solid var(--color-divider);font-size:13.5px;font-weight:600;color:var(--color-heading);scroll-margin-top:108px;transition:border-color .2s ease,transform .2s ease}
.fm-ops__item:hover{border-color:color-mix(in srgb,var(--color-accent) 35%,var(--color-divider));transform:translateY(-2px)}
.fm-ops__icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}
.fm-ops__icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){.fm-ops{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fm-panel,.fm-row a,.fm-ops__item{transition:none}.fm-ops__item:hover{transform:none}}

/* — services.html detail page: group anchors + descriptive operations tiles — */
.fm-group-heading{scroll-margin-top:108px}
.fm-ops--detailed{align-items:start}
.fm-ops__item--detailed{align-items:flex-start}
.fm-ops__item--detailed h3{margin:0 0 3px;font-size:13.5px;font-weight:600;color:var(--color-heading)}
.fm-ops__item--detailed p{margin:0;font-size:12px;line-height:1.5;color:var(--color-text-muted);font-weight:400}

/* — Why BMS: compact centered value-point grid — */
.why-bms-head{max-width:640px;margin:0 auto;text-align:center}
.why-bms-head .eyebrow::before{display:none}
.why-bms-head h2{margin:8px 0 0}
.why-bms-head .lede{margin:14px auto 0}

.why-bms-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:calc(2 * var(--leading));text-align:center}
.why-bms-item{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 var(--space-3)}
.why-bms-item+.why-bms-item::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--color-divider)}
.why-bms-icon{display:grid;place-items:center;width:72px;height:72px;flex:0 0 72px;border-radius:50%;border:1px solid color-mix(in srgb,var(--color-accent) 26%,transparent);background:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));color:var(--color-accent);margin-bottom:16px;transition:transform .25s ease,border-color .25s ease}
.why-bms-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why-bms-item:hover .why-bms-icon{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-accent) 50%,transparent)}
.why-bms-item h3{margin:0 0 6px;font-size:16.5px;color:var(--color-heading)}
.why-bms-item p{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-text-muted)}
.why-bms-cta{text-align:center;margin-top:calc(1.6 * var(--leading))}
@media (max-width:860px){.why-bms-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(1.4 * var(--leading))}.why-bms-item+.why-bms-item::before{display:none}}
@media (max-width:520px){.why-bms-grid{grid-template-columns:1fr;row-gap:28px}}
@media (prefers-reduced-motion:reduce){.why-bms-icon{transition:none}.why-bms-item:hover .why-bms-icon{transform:none}}

/* — icon service catalogue — */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:20px;align-items:stretch}
.service-card{position:relative;display:flex;flex-direction:column;height:100%;min-height:230px;padding:24px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised);color:var(--color-text);box-shadow:var(--shadow-sm);overflow:hidden;scroll-margin-top:108px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
.service-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-2));opacity:.88}
.service-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--color-accent) 52%,var(--color-divider));box-shadow:var(--shadow-md)}
.service-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}
.service-card__icon{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);border-radius:15px;background:color-mix(in srgb,var(--color-accent) 11%,var(--color-bg));color:var(--color-accent)}
.service-card__icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-card__number{font-family:var(--font-heading);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--color-text-muted)}
.service-card h3{margin:0 0 10px;color:var(--color-heading);font-size:clamp(18px,1.45vw,21px);line-height:1.25}
.service-card p{margin:0;color:var(--color-text-muted);font-size:14.5px;line-height:1.65}
.service-card .more-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;color:var(--color-accent);font-size:13px;font-weight:700;transition:gap .25s ease}
.service-card:hover .more-link{gap:10px}

/* Service card client photography */

.service-card__media {
  position: relative;
  overflow: hidden;

  margin: -24px -24px 22px;

  aspect-ratio: 16 / 9;

  background: var(--color-surface);
}

.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(15, 23, 48, 0) 45%,
    rgba(15, 23, 48, 0.16) 100%
  );

  pointer-events: none;
}

.service-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;
}

.service-card:hover .service-card__media img {
  transform: scale(1.045);
}

@media (max-width: 520px) {
  .service-card__media {
    margin: -22px -22px 20px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width:780px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:218px}}
@media (max-width:520px){.service-grid{grid-template-columns:1fr}.service-card{min-height:0;padding:22px}}
@media (prefers-reduced-motion:reduce){.service-card,.service-card .more-link{transition:none}.service-card:hover{transform:none}}

/* — cards (careers etc) — */
.card{transition:transform .3s,box-shadow .3s}
[data-tilt]:hover{transform:translateY(-4px)}
.card .meta{font-size:13px;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin:6px 0 0}
.card .more{display:inline-block;margin-top:10px;font-size:13px;color:var(--color-accent)}

/* — forms — */
.form{display:flex;flex-direction:column;gap:var(--space-3);max-width:560px;margin-top:var(--leading)}
.field label{display:block;font-size:13px;margin-bottom:5px;color:color-mix(in srgb,var(--color-text) 75%,transparent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hint{display:block;font-size:12px;margin-top:4px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.form-note{font-size:12.5px;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin:0}
/* Honeypot. Positioned off-screen rather than display:none, because some bots
   skip fields that are explicitly hidden. Real visitors never see or tab into
   it; anything that fills it in is treated as spam by the endpoint. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{padding:12px 16px;border-radius:var(--radius-md);font-size:14px}
.alert-ok{background:var(--color-success-bg);color:var(--color-success);border:1px solid color-mix(in srgb,var(--color-success) 24%,transparent)}
.alert-err{background:var(--color-error-bg);color:var(--color-error);border:1px solid color-mix(in srgb,var(--color-error) 24%,transparent)}

.rule{height:1px;border:0;margin:0;background:linear-gradient(to right,transparent,var(--color-divider) 48px calc(100% - 48px),transparent)}

/* — floating WhatsApp — */
.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:40;width:56px;height:56px;display:inline-grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .2s ease,box-shadow .2s ease}
.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.whatsapp-float svg{width:30px;height:30px;fill:currentColor}
.whatsapp-float:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}
@media (max-width:600px){.whatsapp-float{right:18px;bottom:18px;width:52px;height:52px}.whatsapp-float svg{width:28px;height:28px}}

/* BMS light/dark visual system
   -------------------------------------------------------------------------- */
html { background: var(--color-bg); }
body { min-height: 100vh; color: var(--color-text); }
.wrap { max-width: 1240px; }

/* Header */
.site-nav {
  min-height: 72px;
  gap: clamp(10px,1.5vw,22px);
  padding: 12px var(--site-frame);
  background: var(--color-nav);
  border-bottom-color: color-mix(in srgb,var(--color-divider) 75%,transparent);
  box-shadow: 0 1px 0 rgba(38,42,96,.04);
  backdrop-filter: saturate(150%) blur(16px);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.site-nav.scrolled {
  border-color: var(--color-divider);
  box-shadow: 0 10px 30px rgba(22,24,38,.08);
}
.nav-brand { order: 1; color: var(--color-heading); }
.nav-brand img {
  width: 44px;
  height: 44px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav-links { order: 2; }
.nav-links a { color: var(--color-text-muted); font-weight: 500; }
.nav-links .btn-primary {
  color: #ffffff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.nav-links .btn-primary:hover {
  color: #ffffff;
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
}
.nav-links .btn-primary:active {
  color: #ffffff;
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(0);
}
.nav-links > a:not(.btn):not(.lang-pill)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,var(--color-accent),var(--color-brand-blue));
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav-links > a:not(.btn):not(.lang-pill):hover::after,
.nav-links > a[aria-current="page"]::after { transform: scaleX(1); }
.lang-pill { background: var(--color-surface-raised); }
.nav-toggle { order: 4; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-divider); border-radius: 10px; }

/* Section rhythm and typography */
.section { padding: clamp(72px,7.5vw,108px) 0; background: var(--color-bg); }
.section.tight { padding: clamp(44px,5vw,64px) 0; }
/* Page rhythm.
   Sections alternate white / #F4F9FE down the page regardless of which classes
   the markup happens to use, so no two bands of the same tint ever sit next to
   each other. `nth-of-type` counts among sibling <section>s, which is what the
   pages are built from. The deeper #E8F1FB is reserved for the three fixed
   anchors: the stat band, the closing CTA and the footer. */
body > section:nth-of-type(even),
body > main > section:nth-of-type(even) { background: var(--color-surface); }
body > section:nth-of-type(odd),
body > main > section:nth-of-type(odd) { background: var(--color-bg); }
.section:not(.dark) h1,
.section:not(.dark) h2,
.section:not(.dark) h3 { color: var(--color-heading); }
.section:not(.dark) .lede { color: var(--color-text-muted); }
.eyebrow { color: var(--color-accent); font-weight: 600; }
.eyebrow::before { background: linear-gradient(90deg,var(--color-brand-blue),var(--color-accent)); }
.grad-text { color: var(--color-accent); }
.lede { font-size: clamp(16px,1.5vw,18px); }

/* Feature band. Kept as `.section.dark` for markup compatibility across all
   16 pages, but it is a light blue band — there is no dark theme. */
.section.dark { color: var(--color-text); }
body > section.section.dark:last-of-type,
body > main > section.section.dark:last-of-type { background: var(--color-surface-2); }
.section.dark .grad-text { color: var(--color-accent); }
.section.dark .eyebrow { color: var(--color-accent); }
.section.dark .btn-secondary {
  color: var(--color-accent);
  background: #fff;
  border-color: var(--color-brand-blue);
}
.section.dark .btn-secondary:hover { background: var(--color-surface); }

/* Hero */
.home-hero {
  min-height: clamp(560px,64vh,700px);
  display: flex;
  align-items: center;
  color: var(--color-text);
  background: var(--color-surface);
  padding: clamp(48px,5vw,84px) 0 clamp(92px,10vw,144px);
}
.hero-media::after {
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,.64) 55%,rgba(255,255,255,.46) 78%,rgba(255,255,255,.40) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 78%,var(--color-surface) 100%);
}
.hero-media img { object-position: center 16%; filter: saturate(1) brightness(1.2) contrast(.98); }
[dir="rtl"] .hero-media::after {
  background:
    linear-gradient(270deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,.64) 55%,rgba(255,255,255,.46) 78%,rgba(255,255,255,.40) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 78%,var(--color-surface) 100%);
}
.home-hero h1 { color: var(--color-heading); max-width: 15ch; }
.home-hero .grad-text { color: var(--color-accent); }
.home-hero .lede { max-width: 62ch; color: var(--color-text); }
.hero-kicker { color: var(--color-accent); border-color: var(--color-divider); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); }
.hero-note { max-width: 52ch; margin-top: calc(.6 * var(--leading)); font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.hero-flags { color: var(--color-text-muted); }

/* Statistics */
.statband { background: var(--color-surface-2); }
.stat b { letter-spacing: -.02em; }

/* Cards and content surfaces */
.pcard,
.loc-card,
.media-frame,
.gallery figure,
.card,
.svc-tile {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.pcard,
.loc-card,
.card,
.svc-tile { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.pcard:hover,
.loc-card:hover,
[data-tilt]:hover,
.svc-tile:hover {
  border-color: color-mix(in srgb,var(--color-accent) 30%,var(--color-divider));
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}
.pcard h3,
.loc-body h3,
.svc-tile h3,
.card-title { color: var(--color-heading); }
.pcard p,
.loc-body p,
.svc-tile p,
.card .meta { color: var(--color-text-muted); }
.pcard .go { color: var(--color-accent); background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); }
.svc-tile { background: var(--color-surface-raised); }
.svc-tile.cta {
  background: linear-gradient(145deg,var(--color-surface),color-mix(in srgb,var(--color-brand-blue) 12%,var(--color-surface-raised)));
  border-color: color-mix(in srgb,var(--color-accent) 28%,var(--color-divider));
}
.loc-card img { background: var(--color-surface); }
.loc-flag { color: var(--color-heading); background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); }
.loc-flag.new { color: #ffffff; background: var(--color-accent); }
.gallery figcaption { color: var(--color-text-muted); background: var(--color-surface-raised); }
.section.dark .gallery figure { border-color: var(--color-divider); background: #fff; }
.section.dark .gallery figcaption { color: var(--color-text-muted); background: #fff; }
.ticks li,
.svc-detail .summary,
.svc-detail li,
.tl p { color: var(--color-text-muted); }

/* Client bands */
.ticker-row.primary .ticker-chip {
  color: var(--color-accent);
  border-color: color-mix(in srgb,var(--color-brand-blue) 40%,var(--color-divider));
  background: var(--color-surface);
}
.ticker-row.secondary .ticker-chip { color: var(--color-text-muted); background: var(--color-surface-raised); }

/* Forms */
.form { max-width: 640px; }
.input {
  min-height: 44px;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border-color: var(--color-divider);
  box-shadow: inset 0 1px 2px rgba(22,24,38,.03);
}
.input:hover { border-color: color-mix(in srgb,var(--color-accent) 38%,var(--color-divider)); }
.field label { color: var(--color-text-muted); font-weight: 500; }
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  left: auto;
  right: auto;
}

/* =========================================================
   BMS FOOTER
   Single clean footer system. The skyline remains a true
   background image and the footer stays dark in both themes.
   ========================================================= */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  --footer-text: var(--color-text);
  --footer-muted: var(--color-text-muted);
  --footer-accent: var(--color-accent);
  --footer-divider: var(--color-divider);

  color: var(--footer-text);
  border-top: 1px solid var(--color-divider);
  background-color: var(--color-surface-2);
  background-image:
    linear-gradient(180deg, rgba(232, 241, 251, 0.93), rgba(219, 233, 249, 0.95)),
    url("img/footer-background.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center bottom;
  background-size: cover, cover;

  padding: clamp(56px, 5vw, 76px) 0 24px;
}

.site-footer .wrap {
  position: relative;
  z-index: 1;
}

/* Main footer columns */
.site-footer .foot-grid {
  display: grid;
  grid-template-columns:
    minmax(250px, 1.35fr)
    minmax(170px, 0.85fr)
    minmax(140px, 0.7fr)
    minmax(250px, 1.2fr);
  gap: clamp(28px, 3.2vw, 54px);
  align-items: start;
  padding-bottom: 38px;
}

.site-footer .foot-grid > div {
  min-width: 0;
}

/* Brand */
.site-footer .foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.site-footer .foot-brand:hover {
  color: var(--color-accent);
}

.site-footer .foot-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
  background: transparent;
}

.site-footer .foot-grid > div:first-child > p {
  max-width: 34ch;
  margin: 16px 0 0;
  color: var(--footer-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* Phone + email under the company description */
.site-footer .foot-primary-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}

.site-footer .foot-primary-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  color: var(--footer-muted);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}

.site-footer .foot-primary-contact a:hover {
  color: var(--color-accent);
}

.site-footer .foot-primary-contact svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--footer-accent);
}

/* Column headings and normal footer links */
.site-footer .foot-grid h6 {
  margin: 0 0 15px;
  color: var(--footer-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.site-footer .foot-grid ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .foot-grid li {
  margin: 0;
  padding: 0;
}

.site-footer .foot-grid a {
  color: var(--footer-muted);
  font-size: 14px;
  line-height: 1.5;
  transition: color .2s ease;
}

.site-footer .foot-grid a:hover {
  color: var(--color-accent);
}

/* Office addresses */
.site-footer .foot-office-list {
  gap: 22px;
}

.site-footer .foot-office-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-footer .foot-office-list strong {
  display: block;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.site-footer .foot-office-list span {
  display: block;
  max-width: 31ch;
  color: var(--footer-muted);
  font-size: 13.5px;
  line-height: 1.62;
}

/* Divider and copyright row */
.site-footer .rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--footer-divider) 6%,
    var(--footer-divider) 94%,
    transparent
  );
}

.site-footer .foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 22px;
  color: var(--footer-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Tablet: balanced 2 x 2 grid */
@media (max-width: 980px) {
  .site-footer {
    background-size: auto 100%, auto 100%;
    background-position: center bottom, center bottom;
    padding: 56px 0 24px;
  }

  .site-footer .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 46px;
    padding-bottom: 36px;
  }

  .site-footer .foot-grid > div:first-child > p {
    max-width: 40ch;
  }

  .site-footer .foot-office-list span {
    max-width: 38ch;
  }
}

/* Mobile: one readable column */
@media (max-width: 640px) {
  .site-footer {
    background-size: auto 100%, auto 100%;
    background-position: center bottom, center bottom;
    padding: 48px 0 24px;
  }

  .site-footer .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }

  .site-footer .foot-grid > div:first-child > p,
  .site-footer .foot-office-list span {
    max-width: 100%;
  }

  .site-footer .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 20px;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .site-footer {
    padding: 42px 0 22px;
  }

  .site-footer .foot-grid {
    gap: 28px;
  }

  .site-footer .foot-brand {
    font-size: 15px;
  }

  .site-footer .foot-brand img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .site-footer .foot-primary-contact a {
    font-size: 13px;
  }
}

/* Responsive navigation and spacing */
@media (max-width:1180px) {
  .nav-brand { gap: 10px; }
  .nav-brand__name { font-size: 19px; }
  .nav-brand img { width: 40px; height: 40px; }
}
@media (max-width:1100px) {
  body.nav-open { overflow: hidden; }
  .site-nav { min-height: 64px; padding-block: 10px; }
  .nav-links {
    position: absolute;
    inset: auto 0 auto 0;
    top: 100%;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    gap: 0;
    padding: 10px var(--edge) 22px;
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { padding: 14px 0; }
  .nav-links > a:not(.btn):not(.lang-pill)::after { display: none; }
  .nav-links .lang-pill { width: auto; align-self: flex-start; margin-top: 12px; padding: 7px 14px; }
  .nav-links .btn { width: 100%; margin: 12px 0 0 !important; }
    }
/* Tablet: the copy column takes up proportionally more of the frame here, so
   the veil holds longer before easing off. The city is still clearly visible on
   the right, but no text run ends up over a thin overlay. */
@media (max-width:1024px) and (min-width:641px) {
  .hero-media::after {
    background:
      linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.74) 78%,rgba(255,255,255,.62) 100%),
      linear-gradient(180deg,rgba(255,255,255,0) 78%,var(--color-surface) 100%);
  }
  [dir="rtl"] .hero-media::after {
    background:
      linear-gradient(270deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.74) 78%,rgba(255,255,255,.62) 100%),
      linear-gradient(180deg,rgba(255,255,255,0) 78%,var(--color-surface) 100%);
  }
}
@media (max-width:640px) {
  .section { padding: 64px 0; }
  .section.tight { padding: 42px 0; }
  .home-hero { min-height: 620px; padding: 88px 0 72px; }
  .hero-media img { object-position: 62% center; }
  .hero-caption { display: none; }
  .hero-media::after,
  [dir="rtl"] .hero-media::after {
    background: linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.62) 85%,rgba(255,255,255,.56) 100%);
  }
  h1.hero-title { font-size: clamp(38px,12vw,54px); }
  .split h2 { font-size: clamp(28px,8vw,34px); }
  .actions { gap: 10px; }
}
@media (max-width:420px) {
  .nav-brand { gap: 9px; }
  .nav-brand__name { font-size: 15px; }
  .nav-brand img { width: 38px; height: 38px; }
  .nav-toggle { width: 38px; height: 38px; }
  .actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal,[data-stagger] > * { opacity: 1; transform: none; }
}

/* =========================================================
   Saudi Arabia coverage map — locations page
   The panel keeps its own dark palette in both themes so the
   map reads the same way the hero does.
   ========================================================= */


/* =========================================================
   Project detail page
   ========================================================= */
.proj-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.proj-facts li{
  padding:16px 18px;border:1px solid var(--color-divider);border-radius:var(--radius-md);
  background:var(--color-surface-raised);box-shadow:var(--shadow-sm);
}
.proj-facts b{display:block;font-family:var(--font-heading);font-size:20px;color:var(--color-heading);line-height:1.2}
.proj-facts span{display:block;margin-top:4px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}
.step-num{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  font-family:var(--font-heading);font-size:14px;font-weight:700;letter-spacing:.04em;
  color:var(--color-accent);
  border:1px solid color-mix(in srgb,var(--color-accent) 26%,transparent);
  background:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));
}
.numrow .step-body{display:flex;align-items:flex-start;gap:16px}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.spec-card{
  --spec-pad:clamp(20px,2.6vw,28px);
  padding:var(--spec-pad);border:1px solid var(--color-divider);border-radius:var(--radius-lg);
  background:var(--color-surface-raised);box-shadow:var(--shadow-sm);overflow:hidden;
}
.spec-card__media{
  position:relative;overflow:hidden;
  margin:calc(var(--spec-pad) * -1) calc(var(--spec-pad) * -1) var(--spec-pad);
  aspect-ratio:16/9;background:var(--color-surface);
}
.spec-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.spec-card:hover .spec-card__media img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.spec-card__media img{transition:none}.spec-card:hover .spec-card__media img{transform:none}}
.spec-card h3{margin:0 0 4px;font-size:19px;color:var(--color-heading)}
.spec-card > p{margin:0 0 16px;font-size:14px;color:var(--color-text-muted)}
.spec-card dl{margin:0;display:flex;flex-direction:column}
.spec-card div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0}
.spec-card div + div{border-top:1px solid var(--color-divider)}
.spec-card dt{font-size:14px;color:var(--color-text-muted)}
.spec-card dd{margin:0;font-size:14.5px;font-weight:600;color:var(--color-heading);text-align:end}
@media (max-width:760px){.proj-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.spec-grid{grid-template-columns:1fr}}
@media (max-width:420px){.proj-facts{grid-template-columns:1fr}}

/* — FM row click affordance (rows link to dedicated service pages) — */
.fm-row a{position:relative}
.fm-row__go{margin-inline-start:auto;align-self:center;flex:none;font-size:15px;line-height:1;color:var(--color-accent);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.fm-row a:hover .fm-row__go,.fm-row a:focus-visible .fm-row__go{opacity:1;transform:translateX(0)}
.fm-row a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* — Renewable Energy Solutions: compact 3-up subsection — */
.re-subhead__icon{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--color-accent) 24%,transparent);background:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));color:var(--color-accent)}
.re-subhead__icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.re-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:24px}
.re-card{display:flex;flex-direction:column;padding:24px 22px;border-radius:var(--radius-lg);background:var(--color-surface-raised);border:1px solid var(--color-divider);border-top:3px solid color-mix(in srgb,var(--color-brand-blue) 65%,transparent);box-shadow:var(--shadow-sm);color:inherit;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.re-card:hover{border-color:color-mix(in srgb,var(--color-accent) 34%,var(--color-divider));border-top-color:color-mix(in srgb,var(--color-brand-blue) 65%,transparent);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.re-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.re-card__icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--color-accent) 24%,transparent);background:color-mix(in srgb,var(--color-accent) 9%,var(--color-bg));color:var(--color-accent)}
.re-card__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.re-card h4{margin:0 0 6px;font-size:16.5px;color:var(--color-heading)}
.re-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-text-muted)}
.re-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:13px;font-weight:700;color:var(--color-accent);transition:gap .25s ease}
.re-card:hover .re-card__more{gap:10px}
@media (max-width:960px){.re-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.re-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.re-card,.re-card__more,.fm-row__go{transition:none}.re-card:hover{transform:none}}

/* — Dedicated service pages: shared template — */
.svc-crumb{margin:0 0 14px;font-size:13px;color:var(--color-text-muted)}
.svc-crumb a{color:var(--color-text-muted);text-decoration:underline;text-underline-offset:3px}
.svc-crumb a:hover{color:var(--color-accent)}
.svc-crumb span{margin:0 6px;opacity:.6}
.svc-hero__icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:15px;border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);background:color-mix(in srgb,var(--color-accent) 11%,var(--color-bg));color:var(--color-accent)}
.svc-hero__icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-scope{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.svc-scope li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:color-mix(in srgb,var(--color-text) 86%,transparent)}
.svc-scope li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
@media (max-width:640px){.svc-scope{grid-template-columns:1fr}}
.svc-media--placeholder{display:grid;place-items:center;align-content:center;gap:8px;height:100%;min-height:120px;padding:20px;text-align:center;border:1px dashed color-mix(in srgb,var(--color-accent) 38%,var(--color-divider));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-accent) 5%,var(--color-bg));color:var(--color-text-muted)}
.svc-media--placeholder svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--color-accent);opacity:.8}
.svc-media--placeholder span{font-size:12.5px;line-height:1.45;max-width:26ch}
.svc-related{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.svc-related a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--color-divider);background:var(--color-surface-raised);font-size:13.5px;font-weight:600;color:var(--color-heading);transition:border-color .2s ease,color .2s ease}
.svc-related a:hover{border-color:color-mix(in srgb,var(--color-accent) 40%,var(--color-divider));color:var(--color-accent)}
.svc-related a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.media-frame--placeholder{aspect-ratio:21/9;background:transparent;box-shadow:none;border-radius:var(--radius-lg)}
@media (max-width:640px){.media-frame--placeholder{aspect-ratio:16/9}}

/* — Services section: compact "How we work" editorial intro — */
.services-intro{max-width:62ch;position:relative;padding-inline-start:18px}
.services-intro::before{content:"";position:absolute;inset-block:4px auto;inset-inline-start:0;width:3px;height:calc(100% - 8px);border-radius:2px;background:linear-gradient(180deg,var(--color-accent),color-mix(in srgb,var(--color-brand-blue) 45%,transparent))}
.services-intro h2{margin:6px 0 0}
.services-intro .lede{margin-top:12px}
@media (max-width:520px){.services-intro{padding-inline-start:14px}}

/* — Clients: one section, split by market, reusing .marquee / .client-logo-item — */
.clients-showcase .marquee-head{margin-bottom:30px}
.client-market+.client-market{margin-top:34px}
.client-market__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.client-market__head::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
.client-market__head::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--color-divider),transparent)}
.client-market h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
/* Two identical tracks side by side. Each travels its own full width PLUS the
   flex gap, so the second lands exactly where the first began — no visible jump. */
.clients-showcase{--client-gap:36px}
.clients-showcase .marquee{display:flex;flex-wrap:nowrap;gap:var(--client-gap);width:100%}
.clients-showcase .marquee-track{flex:0 0 auto;gap:var(--client-gap);animation-name:marquee-full;animation-duration:64s}
.clients-showcase .clients-pakistan-row .marquee-track{animation-direction:reverse}
.clients-showcase .marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-full{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--client-gap)))}}
@media (max-width:640px){.client-market+.client-market{margin-top:26px}.clients-showcase{--client-gap:14px}}

/* Reduced motion: stop the loop and let the row scroll by hand instead. */
@media (prefers-reduced-motion:reduce){
  .clients-showcase .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none}
  .clients-showcase .marquee-track{animation:none}
  .clients-showcase .marquee-track--dup{display:none}
}

/* =========================================================
   Locations page — Saudi Arabia operations map.
   Client-supplied map artwork presented in a BMS card. The image
   already carries its own title, city labels and legend, so the
   only thing added below it is the main-office distinction.
   ========================================================= */
.ksa-map{
  position:relative;overflow:hidden;margin:32px 0 0;
  padding:clamp(16px,2.4vw,30px);
  border:1px solid var(--color-divider);border-radius:var(--radius-lg);
  background:radial-gradient(90% 70% at 46% 34%,rgba(98,138,208,.10),transparent 62%),var(--color-surface);
}
.ksa-map__image{
  display:block;width:100%;max-width:820px;height:auto;margin-inline:auto;
  aspect-ratio:1120/959;object-fit:contain;
  border-radius:var(--radius-md);background:#fff;
  border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);
}
.ksa-map__caption{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:16px auto 0;max-width:70ch;text-align:start;
  font-size:13px;line-height:1.5;color:var(--color-text-muted);
}
.ksa-key{width:11px;height:11px;border-radius:50%;flex:none;background:var(--color-brand-blue);box-shadow:0 0 0 3px rgba(98,138,208,.22)}
.ksa-key--hq{background:var(--color-accent);box-shadow:0 0 0 3px rgba(30,90,168,.24)}
@media (max-width:560px){
  .ksa-map{padding:14px}
  .ksa-map__caption{font-size:12.5px;text-align:start;justify-content:flex-start}
}

/* — Locations page: supporting office cards — */
.loc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,34px)}
.loc-card{
  padding:clamp(22px,3vw,30px);
  border:1px solid var(--color-divider);border-radius:var(--radius-lg);
  background:var(--color-surface-raised);box-shadow:var(--shadow-sm);
}
.loc-card--wide{margin-top:22px}
.loc-card__tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.loc-card h3{margin:10px 0 10px;font-size:22px;color:var(--color-heading)}
.loc-card address{font-style:normal;font-size:15px;line-height:1.7;color:var(--color-text-muted)}
.loc-card__note{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--color-text-muted)}
.loc-card__contact{margin-top:16px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.loc-card__contact span{color:var(--color-text-muted)}
.loc-card__cols{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(16px,3vw,34px);align-items:start}
.loc-card__regions{margin:0;font-size:13.5px;line-height:1.75;color:var(--color-text-muted)}
.loc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loc-chips li{
  padding:7px 13px;border:1px solid var(--color-divider);border-radius:999px;
  background:var(--color-surface);font-size:13.5px;color:var(--color-heading);
  transition:border-color .2s ease,color .2s ease;
}
.loc-chips li:hover{border-color:color-mix(in srgb,var(--color-accent) 40%,var(--color-divider));color:var(--color-accent)}
@media (max-width:820px){.loc-split{grid-template-columns:1fr}}
@media (max-width:560px){.loc-card__cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.loc-chips li{transition:none}}

/* — Image focal points —
   Most site photographs are portrait (3:4 or taller) but sit in landscape
   boxes (.pic 4:3, .media-frame 4:3, .service-card__media 16:9), so
   object-fit:cover crops 40-65% of their height. The default centre crop
   cut the subject's head off in several of them. These rules move the
   crop window to the part of each frame that actually matters. */
img[src$="lift-coldstore.jpg"]{object-position:center 18%}
img[src$="rooftop-insulation.jpg"]{object-position:center 20%}
img[src$="foodsafety-isolators.jpg"]{object-position:center 35%}
img[src$="panel-wiring.jpg"]{object-position:center 10%}
img[src$="showroom-fitout.jpg"]{object-position:center 40%}
img[src$="drain-pipework.jpg"]{object-position:center 45%}
img[src$="bms-technician-rooftop-package-unit-control-panel-01.jpg"]{object-position:center 28%}
img[src$="refrigeration-technician-nitrogen-pressure-test-display-case-01.jpg"]{object-position:center 10%}
img[src$="technician-supermarket-display-shelf-light-replacement-01.jpg"]{object-position:center 30%}
img[src$="bms-technician-supermarket-display-fridge-fan-service-01.jpg"]{object-position:center 70%}
img[src$="bms-technicians-supermarket-chiller-led-light-installation-01.jpg"]{object-position:center 40%}
img[src$="bms-technicians-commercial-kitchen-equipment-repair-01.jpg"]{object-position:center 40%}
img[src$="nadah-plaza-cold-room-ceiling-light-installation.jpeg"]{object-position:center 33%}
img[src$="nadah-plaza-dixell-cool-mate-room-controller.jpeg"]{object-position:center 55%}
img[src$="nadah-plaza-condensing-unit-site-delivery.jpeg"]{object-position:center 12%}
img[src$="nadah-plaza-control-panel-wiring.jpeg"]{object-position:center 25%}
img[src$="civil-work.jpeg"]{object-position:center 42%}
img[src$="carpentry.jpeg"]{object-position:center 45%}
img[src$="refrigeration-condenser-coil-water-jet-cleaning-01.jpg"]{object-position:center 70%}
img[src$="nadah-plaza-copper-refrigerant-pipe-setout-01.jpeg"]{object-position:center 40%}
img[src$="nadah-plaza-control-panel-contactors-closeup.jpeg"]{object-position:center 5%}

/* Wide lead image on service pages that use a 21:9 photograph rather than the
   4:3 .media-frame default (solar, waste). Same surface treatment as
   .media-frame — only the ratio differs. */
.media-frame--wide{aspect-ratio:21/9}
/* services.html solar cards are 16:9 boxes holding 4:3 photographs — nudge the
   crop so the array, not the sky, keeps the frame. */
img[src$="residential-solar-villa-roof-panels-02.jpg"]{object-position:center 58%}
img[src$="remote-solar-desert-array-frames-02.jpg"]{object-position:center 55%}