/* ══════════════════════════════════════════════════════════════════════════════
   EXTREME ENERGY GROUP — one design system
   ------------------------------------------------------------------------------
   The corporate, editorial character of the approved baseline, applied to every
   component on the site — including the ones the baseline never had (capability
   detail pages, EPD records, CBAM status, sidebars, contact panel).

   This file replaces three competing stylesheets. The previous stack loaded the v2
   sheet and the baseline sheet together, which left 20 selectors defined twice with
   incompatible markup contracts and ~50 properties leaking across. Both classes of
   defect are structural, and both disappear here.

   Section 1  Design tokens
   Section 2  Baseline design system, unchanged
   Section 3  Later components, expressed in the baseline's language
   Section 4  Remaining utilities
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens the later components rely on ─────────────────────────────────── */
:root {
  --sans: Manrope, Arial, Helvetica, sans-serif;
  --serif: "Halant", Georgia, "Times New Roman", serif;
  --navy: var(--accent-900);
  --soft: var(--paper);
  --ivory: #fbfaf6;
  --green: #16a56b;
  --radius: 8px;
  --container: min(1180px, calc(100% - 40px));
}


/* ── 2. Baseline design system — unchanged ──────────────────────────────────── */
:root {
  --accent-100: oklch(0.965 0.025 245);
  --accent-200: oklch(0.925 0.045 245);
  --accent-300: oklch(0.868 0.065 245);
  --accent-400: oklch(0.780 0.085 245);
  --accent-500: oklch(0.685 0.095 245);
  --accent-600: oklch(0.590 0.092 245);
  --accent-700: oklch(0.482 0.075 245);
  --accent-800: oklch(0.383 0.055 245);
  --accent-900: oklch(0.290 0.040 245);
  --wine: var(--accent-700);
  --wine-dark: var(--accent-900);
  --rose: var(--accent-600);
  --cream: var(--accent-100);
  --paper: #f5f9fc;
  --ink: var(--accent-900);
  --muted: #5d7080;
  --line: var(--accent-200);
  --white: #ffffff;
  --teal: var(--accent-600);
  --blue: var(--accent-700);
  --gold: var(--accent-400);
  --shadow: 0 18px 55px rgba(25, 50, 72, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Halant", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--wine); color: white; padding: 10px 16px; }
.skip-link:focus { top: 16px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav-wrap { min-height: 82px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 225px; }
.brand-mark { width: 47px; height: 47px; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--wine), var(--rose)); display: grid; place-items: center; font-size: 23px; font-weight: 700; box-shadow: inset 0 0 0 7px rgba(255,255,255,.14); }
.brand-copy { line-height: 1; letter-spacing: .03em; }
.brand-copy strong { display: block; color: var(--wine); font-size: 20px; text-transform: uppercase; }
.brand-copy span { color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .22em; }
.main-nav { display:flex; align-items:center; justify-content:center; gap:clamp(15px,1.2vw,24px); flex:1 1 auto; min-width:0; }
.main-nav a { position:relative; font-weight:600; font-size:14px; line-height:1.2; color:var(--accent-800); padding:31px 0; white-space:nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 19px; height: 2px; background: var(--rose); transition: right .25s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--wine); }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.header-cta, .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:45px; padding:11px 21px; border:1px solid var(--rose); border-radius:4px; background:var(--rose); color:white; font-weight:700; font-size:15px; transition:transform .2s ease,background .2s ease,color .2s ease; }
.header-cta { flex:0 0 auto; white-space:nowrap; line-height:1.2; }
.header-cta:hover, .button:hover { transform: translateY(-2px); background: var(--wine); }
.button.secondary { background: transparent; color: var(--wine); border-color: var(--wine); }
.button.secondary:hover { background: var(--wine); color: white; }
.menu-toggle { display: none; width: 45px; height: 45px; border: 1px solid var(--line); background: white; color: var(--wine); font-size: 23px; border-radius: 4px; }

.hero { position: relative; min-height: 670px; display: grid; align-items: center; overflow: hidden; background: #102638; }
.hero-slides, .hero-slide, .hero-overlay { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity .8s ease; background-size: cover; background-position: center; transform: scale(1.02); }
.hero-slide.active { opacity: 1; }
.hero-overlay { background: linear-gradient(90deg, rgba(12,31,47,.9) 0%, rgba(18,48,72,.73) 42%, rgba(18,48,72,.12) 76%, rgba(12,31,47,.3) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 660px; padding: 92px 0 112px; color: white; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--cream); font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--rose); }
.hero h1 { margin: 0; font-size: clamp(46px, 6vw, 74px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.hero h1 em { color: var(--rose); font-style: normal; }
.hero p { max-width: 610px; margin: 24px 0 30px; color: rgba(255,255,255,.88); font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-actions .secondary { color: white; border-color: rgba(255,255,255,.72); }
.hero-actions .secondary:hover { background: white; color: var(--wine); }
.hero-dots { position: absolute; z-index: 3; right: max(30px, calc((100vw - 1180px)/2)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.hero-dot { width: 9px; height: 28px; border: 0; border-radius: 8px; background: var(--cream); opacity: .9; transition: height .25s ease, background .25s ease; }
.hero-dot.active { height: 55px; background: var(--rose); }
.hero-tagline { margin-top: 31px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.home-alt { background: var(--paper); padding: 95px 0 78px; position: relative; overflow: hidden; }
.home-alt::after { content: ""; position: absolute; width: 380px; height: 380px; border: 1px solid rgba(74,139,187,.28); border-radius: 50%; right: -130px; top: -170px; }
.alt-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.home-alt h1 { margin: 0; color: var(--ink); font-size: clamp(46px, 5vw, 68px); line-height: 1.06; }
.home-alt h1 em { color: var(--rose); font-style: normal; }
.home-alt p { color: var(--muted); font-size: 20px; margin: 24px 0 28px; }
.alt-image { position: relative; padding: 28px 0 0 28px; }
.alt-image img { width: 100%; height: 540px; object-fit: cover; border-radius: 160px 8px 90px 8px; box-shadow: var(--shadow); }
.alt-image::before { content: ""; position: absolute; inset: 0 42px 42px 0; border: 2px solid var(--rose); border-radius: 160px 8px 90px 8px; }
.alt-note { position: absolute; left: -18px; bottom: 55px; width: 210px; padding: 18px; background: white; border-left: 4px solid var(--rose); box-shadow: var(--shadow); }
.alt-note strong { display: block; color: var(--wine); font-size: 25px; }
.alt-note span { font-size: 14px; color: var(--muted); }

.section { padding: 92px 0; }
.section.soft { background: var(--paper); }
.section.wine { background: var(--wine-dark); color: white; }
.section-head { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.kicker { color: var(--rose); font-size: 13px; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; margin-bottom: 12px; }
h2 { margin: 0; font-size: clamp(35px, 4vw, 50px); line-height: 1.12; letter-spacing: -.018em; }
h3 { margin: 0; font-size: 26px; line-height: 1.25; }
.section-head p { margin: 17px auto 0; color: var(--muted); font-size: 18px; }
.section-head.left p { margin-left: 0; }
.section.wine .section-head p, .section.wine .muted { color: rgba(255,255,255,.7); }
.accent-line { width: 55px; height: 3px; background: var(--rose); margin-top: 18px; }

.entity-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 25px; }
.entity-card, .content-card { position: relative; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 30px; box-shadow: 0 10px 35px rgba(25,50,72,.07); overflow: hidden; }
.entity-card::before, .content-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.entity-card.blue::before, .content-card.blue::before { background: var(--blue); }
.entity-card.teal::before, .content-card.teal::before { background: var(--teal); }
.entity-card .tag, .content-card .tag { color: var(--rose); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.entity-card p, .content-card p { color: var(--muted); margin: 13px 0 0; }
.entity-card a, .text-link { display: inline-flex; gap: 9px; align-items: center; margin-top: 18px; color: var(--wine); font-weight: 700; border-bottom: 1px solid var(--rose); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; min-height: 480px; object-fit: cover; border-radius: 120px 8px 120px 8px; box-shadow: var(--shadow); }
.split-media::after { content: ""; position: absolute; right: -19px; bottom: -19px; width: 45%; height: 47%; border-right: 3px solid var(--rose); border-bottom: 3px solid var(--rose); border-radius: 0 0 100px 0; }
.split-copy p { color: var(--muted); font-size: 18px; }
.check-list { display: grid; gap: 14px; margin: 25px 0 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 27px 1fr; gap: 12px; align-items: start; }
.check-list li::before { content: "✓"; width: 23px; height: 23px; display: grid; place-items: center; background: var(--cream); color: var(--wine); border-radius: 50%; font-size: 13px; font-weight: 800; margin-top: 2px; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); background: white; color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.metric { padding: 33px 25px; text-align: center; border-right: 1px solid var(--line); }
.metric:last-child { border: 0; }
.metric strong { display: block; color: var(--rose); font-size: 53px; line-height: 1; }
.metric span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }

.service-toolbar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-button { border: 1px solid var(--line); background: white; color: var(--ink); padding: 10px 17px; border-radius: 4px; font-weight: 700; }
.filter-button.active, .filter-button:hover { background: var(--wine); color: white; border-color: var(--wine); }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { background: white; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card.hidden { display: none; }
.service-thumb { height: 172px; position: relative; background: #eee; overflow: hidden; }
.service-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .service-thumb img { transform: scale(1.05); }
.service-number { position: absolute; left: 18px; bottom: 14px; width: 43px; height: 43px; display: grid; place-items: center; background: var(--rose); color: white; border-radius: 50%; font-weight: 700; }
.service-body { padding: 24px; }
.service-body h3 { font-size: 23px; }
.standard { margin: 12px 0; color: var(--rose); font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.service-body p { color: var(--muted); font-size: 15.5px; margin: 0; }

.page-hero {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(10,30,46,.66) 0%, rgba(10,30,46,.46) 52%, rgba(10,30,46,.58) 100%),
    var(--hero-image, var(--page-image, url("../images/extreme/energy-efficiency.webp")))
    var(--hero-position, center) / cover no-repeat;
}
.page-hero::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.32); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; padding: 58px 0; }
.page-hero h1 { max-width: 980px; margin: 0 auto; font-size: clamp(36px, 4.2vw, 54px); line-height: 1.06; text-wrap: balance; }
.page-hero p { max-width: 720px; margin: 15px auto 0; color: rgba(255,255,255,.9); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.breadcrumbs { margin-bottom: 10px; color: var(--cream); font-size: 13px; text-transform: uppercase; letter-spacing: .13em; }

.prose { max-width: 820px; }
.prose p { color: var(--muted); font-size: 18px; }
.prose h2 { margin-top: 45px; }
.prose h3 { margin-top: 32px; }
.quote-box { background: var(--paper); border-left: 4px solid var(--rose); padding: 25px 28px; color: var(--ink); font-size: 20px; }
.three-columns { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }

.process { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); }
.process-item { counter-increment: step; display: grid; grid-template-columns: 55px 1fr; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.process-item::before { content: counter(step, decimal-leading-zero); color: var(--rose); font-size: 16px; font-weight: 700; }
.process-item strong { display: block; font-size: 20px; }
.process-item span { color: var(--muted); }
.independence-line { margin: 24px 0; display: flex; align-items: center; gap: 15px; color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.independence-line::before, .independence-line::after { content: ""; flex: 1; border-top: 1px dashed var(--gold); }

.sector-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sector-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 18px; }
.sector-list li::before { content: ""; display: inline-block; width: 11px; height: 2px; background: var(--rose); margin: 0 13px 5px 0; }

.faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border: 0; background: transparent; text-align: left; color: var(--ink); font-size: 22px; font-weight: 700; }
.faq-question span { color: var(--rose); font-size: 28px; transition: transform .2s ease; }
.faq-item.open .faq-question span { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; color: var(--muted); transition: max-height .35s ease; }
.faq-answer p { margin: 0; padding: 0 45px 23px 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
.contact-panel { background: var(--wine-dark); color: white; border-radius: 8px; padding: 40px; position: relative; overflow: hidden; }
.contact-panel::after { content: ""; position: absolute; width: 200px; height: 200px; border: 35px solid rgba(91,157,205,.22); border-radius: 50%; right: -80px; bottom: -80px; }
.contact-panel p { color: rgba(255,255,255,.75); }
.contact-details { display: grid; gap: 17px; position: relative; z-index: 1; }
.contact-details a { color: var(--cream); }
.contact-entities { display: grid; gap: 19px; }
.contact-entity { border: 1px solid var(--line); padding: 25px; border-radius: 7px; }
.contact-entity h3 { font-size: 23px; }
.contact-entity p { margin: 10px 0 0; color: var(--muted); }
.contact-entity .tag { color: var(--rose); font-size: 11px; font-weight: 700; letter-spacing: .13em; }

.cta-band { position: relative; overflow: hidden; padding: 72px 0; background: linear-gradient(110deg, var(--accent-900), var(--accent-700)); color: white; }
.cta-band::after { content: ""; position: absolute; inset: 0; opacity: .12; background: url("../images/extreme/hero-sustainability.webp") center/cover; }
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.cta-inner h2 { font-size: 42px; }
.cta-inner p { color: rgba(255,255,255,.74); margin: 8px 0 0; }

.site-footer { background: #132b3e; color: white; padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr 1fr; gap: 44px; padding-bottom: 52px; }
.footer-brand p { color: rgba(255,255,255,.66); max-width: 330px; }
.footer-title { color: var(--cream); font-size: 18px; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; color: rgba(255,255,255,.7); font-size: 15px; }
.footer-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.5); font-size: 13px; }
.brand-spine { display: flex; height: 5px; }
.brand-spine span:nth-child(1) { width: 34%; background: var(--gold); }
.brand-spine span:nth-child(2) { width: 33%; background: var(--blue); }
.brand-spine span:nth-child(3) { width: 33%; background: var(--teal); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.center { text-align: center; }
.mt-30 { margin-top: 30px; }
.muted { color: var(--muted); }

@media (max-width: 1020px) {
  .main-nav { position: fixed; inset: 82px 0 0; display: block; padding: 25px 30px; background: white; transform: translateX(100%); transition: transform .3s ease; }
  .menu-open .main-nav { transform: none; }
  .main-nav a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .main-nav a::after { display: none; }
  .menu-toggle { display: block; }
  .header-cta { display: none; }
  .hero-dots { right: 18px; }
  .alt-grid, .split, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: initial; }
  .entity-grid, .card-grid, .services-grid, .three-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  body { font-size: 16px; }
  .container { width: min(100% - 28px, 1180px); }
  .brand { min-width: 0; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy span { font-size: 10px; }
  .hero { min-height: 720px; }
  .hero-content { padding: 75px 18px 105px 0; }
  .hero p { font-size: 18px; }
  .hero-dots { top: auto; bottom: 24px; right: 50%; transform: translateX(50%); display: flex; }
  .hero-dot, .hero-dot.active { width: 34px; height: 8px; }
  .hero-dot.active { width: 58px; }
  .home-alt { padding-top: 65px; }
  .alt-grid { gap: 42px; }
  .alt-image img { height: 420px; }
  .alt-note { left: 0; }
  .section { padding: 68px 0; }
  .entity-grid, .card-grid, .services-grid, .three-columns, .two-columns { grid-template-columns: 1fr; }
  .split { gap: 45px; }
  .split-media img { min-height: 360px; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:nth-child(3) { border-bottom: 1px solid var(--line); }
  .page-hero { min-height: 305px; }
  .page-hero .container { padding: 52px 12px; }
  .page-hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .page-hero::after { inset: 12px; }
  .cta-inner { display: block; text-align: center; }
  .cta-inner .button { margin-top: 25px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: block; text-align: center; }
  .footer-bottom span { display: block; margin-top: 6px; }
}

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

/* ── 3. Later components, expressed in the baseline's language ──────────────── */
/* Approved additions mapped onto the exact Version 1 design system. */

/* Global wrapper compatibility */
.brand .brand-copy,.brand .brand-copy span { height: auto; background: transparent; }
.footer-top { display: grid; grid-template-columns: 1.35fr .8fr .8fr 1fr; gap: 44px; padding-bottom: 52px; }
.footer-wordmark { display: none; }
.copyright { padding: 0 0 22px; color: rgba(255,255,255,.5); font-size: 13px; }
.footer-bottom { align-items: center; }
.footer-bottom > *:last-child { text-align: right; }
.footer-bottom a { color: var(--cream); }

/* Four-slide hero — image treatment identical to the base version:
   the background sits on the slide itself with the base's static scale(1.02),
   no animated zoom. Height is the smallest that clears the longest slide copy. */
/* 693px / 720px are the base version's own MEASURED hero heights. The base sizes itself
   from one in-flow copy block; here the copy lives inside each absolutely-positioned
   slide (spec §2: image, text and buttons change together), so the same height is set
   explicitly — the rendered result is identical to the base. */
.hero[data-hero-slider] { min-height: 693px; height: auto; position: relative; overflow: hidden; }
.hero[data-hero-slider] .hero-slide {
  display: grid;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-image: var(--slide-image);
  transform: scale(1.02);
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.hero[data-hero-slider] .hero-slide.active {
  visibility: visible; opacity: 1; transform: scale(1);
  transition: opacity .9s ease, visibility 0s;
}
.hero[data-hero-slider] .hero-slide::before,
.hero[data-hero-slider] .hero-slide::after { content: none; }
.hero[data-hero-slider] .hero-slide .hero-overlay { z-index: 1; }
.hero[data-hero-slider] .hero-slide .container { position: relative; z-index: 2; }
.hero[data-hero-slider] .hero-slide .hero-content { opacity: 0; transform: translateY(18px); transition: opacity .55s .18s ease, transform .55s .18s ease; }
.hero[data-hero-slider] .hero-slide.active .hero-content { opacity: 1; transform: none; }
.hero[data-hero-slider] .hero-content h1,
.hero[data-hero-slider] .hero-content h2 { margin: 0; font-size: clamp(46px, 6vw, 74px); line-height: 1.02; letter-spacing: -.025em; color: #fff; }
.hero[data-hero-slider] .hero-content h1 em { color: var(--rose); font-style: normal; }
.hero[data-hero-slider] .hero-content p { font-family: inherit; font-weight: 400; }

/* indicators: active one is taller, blue, and shows the time left on the slide */
.hero[data-hero-slider] .hero-dots button {
  width: 9px; height: 28px; border-radius: 8px; position: relative; overflow: hidden;
  background: var(--cream); padding: 0; cursor: pointer;
  transition: height .25s ease, width .25s ease, background .25s ease;
}
.hero[data-hero-slider] .hero-dots button.active { height: 55px; background: rgba(255,255,255,.34); }
.hero-dot-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--rose); border-radius: 8px; }
@keyframes heroDotProgressY { from { height: 0 } to { height: 100% } }
@keyframes heroDotProgressX { from { width: 0 } to { width: 100% } }
.hero[data-hero-slider] .hero-dot.active .hero-dot-fill {
  animation: heroDotProgressY var(--hero-interval, 6s) linear forwards;
}
.hero[data-hero-slider].is-paused .hero-dot.active .hero-dot-fill { animation-play-state: paused; }

@media (max-width: 650px) {
  .hero[data-hero-slider] .hero-dot-fill { width: 0; height: 100%; }
  .hero[data-hero-slider] .hero-dot.active .hero-dot-fill { animation-name: heroDotProgressX; }
}

@media (prefers-reduced-motion: reduce) {
  .hero[data-hero-slider] .hero-slide,
  .hero[data-hero-slider] .hero-slide .hero-content { transition: none; }
  .hero[data-hero-slider] .hero-slide { transform: none; }
  .hero[data-hero-slider] .hero-dot.active .hero-dot-fill { animation: none; height: 100%; width: 100%; }
}

/* Small approved entity logos, without changing Version 1 card geometry */
.entity-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.entity-logo { height: 52px; display: flex; align-items: center; margin: -5px 0 18px; }
.entity-logo img { width: auto; max-width: 190px; max-height: 48px; object-fit: contain; object-position: left center; }
.entity-card { min-height: 0; display: block; }
.entity-card .mandate { display: block; color: var(--rose); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 5px; }
.entity-card .text-link { align-self: auto; }

/* Current content grids expressed with Version 1 card sizing */
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); background: white; color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.metrics-grid > div { min-height: 0; padding: 33px 25px; text-align: center; border-right: 1px solid var(--line); }
.metrics-grid > div:last-child { border: 0; }
.metrics-grid strong { display: block; color: var(--rose); font: 700 53px/1 inherit; }
.metrics-grid span { display: block; max-width: none; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.section.dark { background: var(--wine-dark); color: white; }
.section.dark .section-head p { color: rgba(255,255,255,.7); }

.capability-toolbar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.capability-toolbar .filter-button { padding: 10px 17px; border-radius: 4px; }
.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.capability-card { background: white; border: 1px solid var(--line); border-radius: 7px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.capability-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.capability-card.hidden { display: none; }
.capability-media { height: 172px; position: relative; overflow: hidden; }
.capability-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.capability-card:hover .capability-media img { transform: scale(1.05); }
.capability-number { position: absolute; left: 18px; bottom: 14px; width: 43px; height: 43px; display: grid; place-items: center; background: var(--rose); color: #fff; border-radius: 50%; font-weight: 700; }
.capability-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.capability-body h3 { font-size: 23px; }
.capability-body .standard { margin: 12px 0; color: var(--rose); font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.capability-body p { color: var(--muted); font-size: 15.5px; margin: 0; flex: 1; }

/* Page-specific crops stay within one shared corporate hero system. */
.page-hero::before { display: none; }
.capabilities-hero { --hero-position: center 48%; }
.about-hero { --hero-position: center 45%; }
.about-hero h1 { max-width: 940px; }
.about-hero p { max-width: 820px; }

/* Service detail pages retain V2 content but use V1 editorial scale */
.detail-hero { min-height: 370px; color: #fff; background: linear-gradient(90deg,rgba(13,39,59,.72),rgba(13,39,59,.38)), var(--detail-image) center/cover; position: relative; display: grid; align-items: center; overflow: hidden; }
.detail-hero::before { display: none; }
.detail-hero::after { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.32); pointer-events:none; }
.detail-hero .container { position:relative; z-index:1; }
.detail-grid { display: grid; grid-template-columns: 110px 1fr; gap: 34px; padding: 62px 0; }
.detail-number { font-size: 66px; color: var(--accent-400); }
.detail-grid h1 { margin: 0; font-size: clamp(45px,6vw,66px); line-height: 1.05; }
.detail-grid .lead { font-size: 19px; line-height: 1.55; max-width: 760px; color: rgba(255,255,255,.88); }
.detail-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.detail-meta span { border-radius: 4px; padding: 8px 14px; }
.content-layout { display: grid; grid-template-columns:minmax(0,1fr) 310px; gap: 70px; align-items:start; }
.sidebar { top: 110px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 28px; }
.sidebar h2 { font-size: 26px; }
.sidebar li { padding: 12px 0; }
.boundary-note,.status-callout,.article-alert { background: var(--paper); border-left: 4px solid var(--rose); padding: 22px 25px; }

/* Assurance, governance and evidence cards */
.assurance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.assurance-card,.governance-card,.insight-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 30px; box-shadow: 0 10px 35px rgba(25,50,72,.07); }
.assurance-card { border-left: 4px solid var(--rose); }
.assurance-card > span { font-size: 34px; color: var(--rose); }
.assurance-card > strong { color: var(--rose); }
.assurance-card.cbam-status { grid-column: 1/-1; background: #fffaf0; border-left: 5px solid var(--gold); }
.status-badge { margin: 0 0 14px; }
.governance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.governance-card { box-shadow: none; }
.process-item > span { width: 45px; height: 45px; }

.sector-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.sector-grid span { min-height: 78px; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 14px; font-weight: 700; font-size: 18px; background: #fff; }
.logo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.logo-cell { height: 125px; background: #fff; border: 1px solid var(--line); display: flex; align-items:center; justify-content:center; padding: 22px; }
.logo-cell img { max-height: 72px; max-width: 88%; object-fit: contain; }
.epd-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.epd-card { border:1px solid var(--line); border-radius:8px; padding:32px; background:#fff; }
.epd-card h3 { font-size:30px; margin-top:16px; }
.epd-card dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0; }
.epd-card dl div { background:var(--paper); padding:15px; }
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.video-grid iframe { width:100%; aspect-ratio:16/9; border:0; box-shadow:var(--shadow); }

/* Insights, contact and FAQ are V1 editorial components */
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.insight-card { min-height:0; display:flex; flex-direction:column; box-shadow:none; }
.insight-card.featured { grid-column:span 2; background:var(--wine-dark); color:#fff; }
.article-section { padding:92px 0; border-top:1px solid var(--line); }
.article-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:72px; align-items:start; }
.article-layout aside { position:sticky; top:110px; }
.contact-channels { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.contact-channel { border-top:1px solid rgba(255,255,255,.25); padding-top:13px; }
.contact-channel strong,.contact-channel a { display:block; }
.contact-entities { grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.contact-entity { background:#fff; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field.full,.form-help { grid-column:1/-1; }
.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #bfcfda; padding:14px; border-radius:4px; }
.form-field textarea { min-height:170px; }
.faq-help-card {
  max-width:760px;
  margin:52px auto 0;
  padding:34px 46px 40px;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:5px solid var(--accent-600);
  border-radius:10px;
}
.faq-help-card h2 { margin:0; font-size:clamp(30px,4vw,40px); color:var(--wine); }
.faq-help-card p { margin:12px 0 26px; color:var(--muted); font-size:18px; }
.faq-help-card .button { width:100%; }
.faq-answer[hidden] { display:none; }
.faq-answer:not([hidden]) { max-height:none; }

/* Approved global communication controls */
.whatsapp { position:fixed; right:26px; bottom:25px; width:62px; height:62px; background:#16a56b; color:#fff; border-radius:50%; display:grid; place-items:center; z-index:90; box-shadow:0 12px 35px rgba(0,0,0,.24); transition:.2s; }
.whatsapp:hover { transform:translateY(-4px) scale(1.03); }
.whatsapp svg { width:35px; fill:currentColor; }
.help-card,.representative,.assurance-intro,.role-clarity,.evidence-preview { display:flex; align-items:center; justify-content:space-between; gap:45px; }
.help-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:36px; }
.priority-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.priority-grid a { padding:25px; min-height:190px; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; }
.proof-banner { background:var(--wine-dark); color:#fff; padding:34px; border-radius:8px; min-width:390px; }

@media (max-width:1020px) {
  .footer-top { grid-template-columns:repeat(2,1fr); }
  .entity-grid.three,.capability-grid,.assurance-grid,.governance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .entity-grid.three .entity-card:last-child,.assurance-card.cbam-status { grid-column:1/-1; }
  .content-layout,.article-layout { grid-template-columns:1fr; }
  .sidebar,.article-layout aside { position:static; }
  .priority-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:650px) {
  .footer-top,.entity-grid.three,.capability-grid,.assurance-grid,.governance-grid,.epd-grid,.video-grid,.insight-grid,.contact-channels,.contact-entities,.form-grid { grid-template-columns:1fr; }
  .entity-grid.three .entity-card:last-child,.assurance-card.cbam-status,.insight-card.featured,.form-field.full,.form-help { grid-column:auto; }
  .metrics-grid { grid-template-columns:1fr; }
  .metrics-grid>div { border-right:0; border-bottom:1px solid var(--line); }
  .sector-grid,.logo-grid { grid-template-columns:repeat(2,1fr); }
  .detail-hero { min-height:305px; }
  .detail-hero::after { inset:12px; }
  .detail-grid { grid-template-columns:1fr; gap:10px; padding:52px 14px; }
  .detail-number { font-size:48px; }
  .help-card,.representative,.assurance-intro,.role-clarity,.evidence-preview { display:block; }
  .help-card .button,.representative .button { margin-top:20px; }
  .proof-banner { min-width:0; }
  .priority-grid { grid-template-columns:1fr; }
  .hero[data-hero-slider] .hero-content h1,.hero[data-hero-slider] .hero-content h2 { font-size:clamp(43px,13vw,62px); }
  .faq-help-card { margin-top:38px; padding:28px 24px 30px; }
  .faq-help-card p { font-size:16px; }
  .about-hero h1 { font-size:clamp(34px,10vw,46px); }
}

/* ── Batch 1 · Header (spec §1, §15) ──────────────────────────────────────────
   The base version has no fixed header height: .nav-wrap carries min-height 82px and
   the brand block is 47px tall. site.css overrides the header to a fixed 104px, which
   left the brand stranded across the bar. Both are returned to the base's behaviour. */
.site-header { height: auto; }
.nav-wrap { min-height: 82px; }

.brand { display: flex; flex-direction: row; align-items: center; gap: 11px;
  min-width: 0; line-height: 1; }
.brand img { width: 133px; height: auto; object-fit: contain; display: block; }
.brand-suffix { font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--ink);
  text-transform: uppercase; white-space: nowrap; }
.brand-inverse .brand-suffix { color: var(--cream); }
.footer-brand .brand { margin-bottom: 18px; }

.main-nav { gap:clamp(15px,1.2vw,24px); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.social-link { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--wine); border: 1px solid var(--line); border-radius: 50%;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.social-link:hover { background: var(--wine); border-color: var(--wine); color: #fff; }
.social-link svg { width: 19px; height: 19px; fill: currentColor; }

@media (max-width:1240px) {
  .main-nav { gap:13px; }
  .main-nav a { font-size:13px; }
  .brand img { width:120px; }
  .header-cta { padding-inline:16px; font-size:14px; }
  .social-link { display:none; }
}

@media (max-width: 1020px) {
  /* backdrop-filter on .site-header makes the header the containing block for
     its position:fixed children, collapsing the drawer to the header's height.
     Drop it while the drawer is open — the drawer covers the page anyway. */
  .menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* the mobile drawer has to carry the CTA and LinkedIn, not hide them */
  .nav-actions { display: none; }
  .menu-open .nav-actions { display: flex; position: fixed; left: 24px; right: 24px; bottom: 26px;
    z-index: 60; gap: 12px; }
  .menu-open .nav-actions .header-cta { display: inline-flex; flex: 1; }
  .menu-open .nav-actions .social-link { background: #fff; }
  .brand-suffix { font-size: 11px; letter-spacing: .2em; }
  .main-nav { padding-bottom: 110px; overflow-y: auto; }
}

/* Hero veil: the base version's gradient, unchanged. */


/* site.css leaks three values onto the base hero. Restored to the base exactly:
   eyebrow inline-flex at line-height 1.65 (21px), buttons at the base's 49px,
   and vertical rhythm driven only by the base's own margins. */
.hero[data-hero-slider] .hero-content .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  line-height: 1.65; margin: 0 0 18px; color: var(--cream);
  font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.hero[data-hero-slider] .hero-content .eyebrow::before {
  content: ""; width: 34px; height: 2px; background: var(--rose); flex: 0 0 34px;
}
.hero[data-hero-slider] .hero-actions { margin-top: 0; }
.hero[data-hero-slider] .hero-actions .button {
  line-height: 1.65; min-height: 45px; padding: 11px 21px; font-size: 15px; gap: 9px;
}
.hero[data-hero-slider] .hero-tagline { margin-top: 31px; }

/* site.css sets `font: 800 13px/1.3 var(--sans)` on every kicker; the base leaves them
   inheriting the body serif at its own weight and line-height. v1-base already restores
   size, weight, letter-spacing and colour — family and line-height are restored here. */
.eyebrow, .kicker, .entity-card .tag, .content-card .tag, .mandate, .standard {
  font-family: inherit;
  line-height: inherit;
}
.capability-body .standard { line-height: 1.5; }

/* Hero height tracks the BASE version's own measured curve. The base sizes itself from a
   single in-flow copy block; here the copy sits inside absolutely-positioned slides
   (spec §2), so the same curve is declared explicitly:
     base  >=1221px: 693   1200px: 687   700-1180px: 670   <=650px: 720   360px: 733  */
@media (max-width: 1220px) { .hero[data-hero-slider] { min-height: 687px; } }
@media (max-width: 1180px) { .hero[data-hero-slider] { min-height: 670px; } }
@media (max-width:  650px) { .hero[data-hero-slider] { min-height: 720px; } }
@media (max-width:  520px) { .hero[data-hero-slider] { min-height: 740px; } }

/* ══════════════════════════════════════════════════════════════════════════════
   BASE FIDELITY LAYER
   site.css is still needed for components the base version never had (capability
   detail pages, EPD cards, article layouts). But it also sets properties v1-base.css
   never declares, so those leak through and change the base design. Every value
   below is the base version's own, restored. Measured, not guessed — see
   /root/work/probe.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Typography: the base is a SERIF site; site.css was rendering it in Manrope ── */
body {
  font-family: "Halant", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}
p { font-family: inherit; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: "Halant", Georgia, "Times New Roman", serif; }
h3 { letter-spacing: normal; }
.entity-card h3, .content-card h3, .service-body h3, .capability-body h3,
.footer-title, .contact-entity h3 { letter-spacing: normal; }

/* ── Buttons: base line-height is the body's 1.65, giving a 48.75px control ── */
.button { line-height: 1.65; }
.header-cta { line-height: 1.2; white-space: nowrap; }

/* ── Header: the base spreads brand / nav / CTA with space-between ── */
.main-nav { margin-left: 0; justify-content: center; gap: clamp(16px, 1.35vw, 28px); }
.main-nav a {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
.menu-toggle { margin-left: 0; }
.brand span { background: transparent; height: auto; }

/* ── Section rhythm ── */
.section-head .kicker, .split-copy .kicker, .representative .kicker { margin-bottom: 12px; }
.section-head p { font-size: 18px; }
.split-copy p { margin: 18px 0; font-size: 18px; }
.split-media img { height: auto; min-height: 480px; }
.entity-card { min-height: auto; }
.entity-card .tag, .content-card .tag { margin: 0; }

/* ── Check list: the base lays it out on a grid, site.css absolutely positions it ── */
.check-list li { position: static; padding: 0; font-family: inherit; font-size: 17px; line-height: 1.65; }
.check-list li::before {
  position: static; width: 23px; height: 23px; top: auto; left: auto;
  border-radius: 50%; background: var(--cream); color: var(--wine);
  font-family: inherit; font-size: 13px; font-weight: 800;
}

/* ── Standards line and footer ── */
.standard { line-height: 1.5; }
.footer-brand p { margin: 17px 0; }
.footer-links { color: rgba(255,255,255,.7); font-size: 15px; }
.footer-links a { font-size: 15px; color: inherit; }

/* Final four: selectors where site.css outranks the plain element rules above. */
h3, .entity-card h3, .content-card h3 { font-size: 26px; line-height: 1.25; }
.hero-content p {
  font-family: inherit; font-weight: 400;
  font-size: 20px; line-height: 1.55;
}
.site-footer .footer-links a { color: rgba(255,255,255,.7); }
.site-footer .footer-links a:hover { color: #fff; }

/* Defect carried over from the base: the closed mobile drawer sits at translateX(100%),
   doubling every page's scroll width at phone size (390 → 780). A fixed element cannot be
   clipped by an ancestor's overflow, so the offset itself is removed: the drawer fades in
   place instead of sliding. It covers the whole screen either way, so nothing reads
   differently — and the horizontal scrollbar is gone. */
html, body { overflow-x: clip; }
@media (max-width: 1020px) {
  .main-nav {
    transform: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .menu-open .main-nav {
    transform: none;
    visibility: visible;
    opacity: 1;
    transition: opacity .28s ease, visibility 0s;
  }
  .main-nav a { font-size: 17px; white-space: normal; }
}

/* Enquiry form: honeypot, consent row and inline status */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent label { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--muted); cursor: pointer; }
.form-consent input { margin-top: 5px; flex: 0 0 auto; }
.form-status { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 4px; font-size: 15px; }
.form-status.is-ok { background: var(--cream); color: var(--wine); border-left: 4px solid var(--rose); }
.form-status.is-error { background: #fdecec; color: #8a2a2a; border-left: 4px solid #c0392b; }


/* ── 4. Remaining utilities, carried over in the baseline's language ────────── */
.bullet-list { list-style: disc; padding-left: 24px; margin: 25px 0; }
.bullet-list li { margin-bottom: 10px; color: var(--muted); }

.center-action { text-align: center; margin-top: 42px; }

.contact-form .button { justify-self: start; }

.epd-id { font-size: 12px; letter-spacing: .13em; font-weight: 700;
  text-transform: uppercase; color: var(--rose); }

.split-media.framed { position: relative; padding: 0 28px 28px 0; }
.split-media.framed::after { content: ""; position: absolute; right: 0; bottom: 0;
  width: 45%; height: 47%; border-right: 3px solid var(--rose);
  border-bottom: 3px solid var(--rose); border-radius: 0 0 100px 0; }
.split-media.framed img { border-radius: 120px 8px 120px 8px; }

.section.ivory { background: var(--ivory); }
.ivory .governance-card { background: #fff; }

.legal-copy { max-width: 900px; }
.legal-copy h2 { margin-top: 45px; }

.button.light { background: #fff; color: var(--wine); border-color: #fff; }
.button.light:hover { background: var(--cream); border-color: var(--cream); color: var(--wine-dark); }

.process-wrap { max-width: 1100px; }
.assurance-capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; }
.cbam-notice { margin-top:28px; padding:24px; border:1px solid var(--line); border-left:4px solid var(--gold); background:var(--soft); }
.cbam-notice h3 { margin:12px 0 8px; font-size:24px; }
.cbam-notice p { margin-bottom:0; }
.governance-links { display:flex; flex-wrap:wrap; gap:18px 34px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.governance-links a { color:var(--wine); font-weight:700; border-bottom:1px solid var(--rose); }
@media (max-width:650px) { .assurance-capability-grid { grid-template-columns:1fr; } }

.assurance-framework {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:24px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent-600);
  background:var(--soft);
}
.assurance-framework span {
  min-width:0;
  padding:17px 19px;
  color:var(--ink);
  font-weight:600;
  line-height:1.35;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.assurance-framework span:nth-child(2n) { border-right:0; }
.assurance-framework span:nth-last-child(-n+2) { border-bottom:0; }
@media (max-width:650px) {
  .assurance-framework { grid-template-columns:1fr; }
  .assurance-framework span,
  .assurance-framework span:nth-child(2n),
  .assurance-framework span:nth-last-child(-n+2) { border-right:0; border-bottom:1px solid var(--line); }
  .assurance-framework span:last-child { border-bottom:0; }
}

.reference-note { font-size: 15px; margin-top: 22px; color: var(--muted); }
.role-note { margin-top:24px; padding:22px 24px; border-left:3px solid var(--teal); background:var(--soft); }
.role-note strong { color:var(--wine); }
.role-note p { margin:7px 0 0; }
.experience-media .section-head { max-width:760px; }

.sources { font-size: 15px; border-top: 1px solid var(--line); padding-top: 22px;
  margin-top: 34px; color: var(--muted); }
.sources a { text-decoration: underline; color: var(--wine); }

/* ── Notes 1 and 8 ──────────────────────────────────────────────────────────── */

/* Entity cards: the three copy lengths differ, so the call to action is pinned to
   the foot of the card and the three baselines align at every viewport. */
.entity-card { display: flex; flex-direction: column; }
.entity-card p { flex: 1; }
.entity-card a, .entity-card .text-link { margin-top: auto; align-self: flex-start; }

/* Consent row. Two defects here: the field wrapper stacks as a column, and the
   text-input rule (`width:100%`) was also stretching the checkbox to full width,
   leaving the label 51px wide and one word per line. */
.form-field input[type="checkbox"], .form-field input[type="radio"] {
  width: auto; padding: 0; border: 0; border-radius: 0;
}
.form-consent { display: block; }
.form-consent label { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.form-consent label span { flex: 1; font-size: 15px; color: var(--muted); line-height: 1.55; }
.form-consent a { color:var(--wine); text-decoration:underline; }
.form-consent input { margin-top: 5px; flex: 0 0 auto; }

/* Focus sectors: the baseline's underlined list, in two columns */
.sector-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 650px) { .sector-columns { grid-template-columns: 1fr; } }

/* Route-help panel: a quiet, subordinate card rather than a full-width band, so it
   no longer competes with the closing call to action directly beneath it. */
.route-help .split { grid-template-columns: 1.15fr .85fr; align-items: start; }
.help-panel { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--rose);
  border-radius: 8px; padding: 32px; box-shadow: var(--shadow); }
.help-panel h3 { margin: 0 0 12px; font-size: 24px; color: var(--wine); }
.help-panel p { margin: 0 0 22px; color: var(--muted); font-size: 17px; }
.help-panel .button { width: 100%; }
.sidebar-help { margin-top: 28px; box-shadow: none; }
@media (max-width: 1020px) { .route-help .split { grid-template-columns: 1fr; } }

/* Client marks: equal optical weight, and a line for clients whose logo we do not hold */
/* Client marks: one continuous bar, greyscale until hovered — the marks read as a
   single band rather than a grid of unevenly weighted boxes. The set is rendered
   twice so the loop closes seamlessly at -50%. */
.logo-marquee { position: relative; overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; align-items: center; gap: clamp(46px, 5vw, 86px);
  width: max-content; animation: logoScroll 46s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-cell { flex: 0 0 auto; display: grid; place-items: center; height: 76px; }
.logo-cell img { max-height: 58px; max-width: 190px; width: auto; height: auto;
  object-fit: contain; filter: grayscale(1) opacity(.62); transition: filter .35s ease; }
.logo-cell:hover img { filter: grayscale(0) opacity(1); }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .logo-cell[aria-hidden="true"] { display: none; }
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
}
.logo-note { margin: 26px 0 0; font-size: 15px; color: var(--muted); }

/* the bar reads as one band: no card chrome on the cells inside it */
.logo-marquee .logo-cell { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }

/* Contact: Premium information hierarchy, expressed in the original visual system. */
.contact-grid { display:grid; grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr); gap:72px; align-items:start; }
.contact-contact-col { display:grid; gap:20px; }
.contact-form-col .section-head { margin-bottom:34px; }
.contact-entities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.contact-entity { background:#fff; border:1px solid var(--line); border-left:3px solid var(--rose);
  border-radius:6px; padding:23px 21px; display:flex; flex-direction:column; }
.contact-entity h3 { font-size: 21px; line-height: 1.25; margin: 0 0 14px; color: var(--wine); }
.contact-entity p { margin: 0 0 10px; color: var(--muted); font-size: 16px; }
.contact-entity small { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 1020px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-entities { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 650px) { .contact-entities { grid-template-columns: 1fr; } }

/* ══ Related capabilities rail ═══════════════════════════════════════════════
   A horizontal shelf at the foot of every service page. Snap points, quiet
   easing, arrows that disable at the ends, and drag on pointer devices. */
.related-rail-section { overflow: hidden; }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 38px; }
.rail-head h2 { margin: 0; }
.rail-head .kicker { margin-bottom: 12px; }

.rail-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.rail-btn { width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--wine);
  border-radius: 50%; cursor: pointer; transition: background .22s ease, color .22s ease,
  border-color .22s ease, opacity .22s ease; }
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover:not(:disabled) { background: var(--wine); border-color: var(--wine); color: #fff; }
.rail-btn:disabled { opacity: .32; cursor: default; }
.rail-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 6px;
  scrollbar-width: none; -ms-overflow-style: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; }
.rail.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }

.rail-card { flex: 0 0 clamp(268px, 25vw, 322px); scroll-snap-align: start; }
.rail-card .capability-media { height: 168px; display: block; position: relative; overflow: hidden; }
.rail-card h3 { font-size: 21px; margin: 0 0 10px; }
.rail-card h3 a { color: var(--wine); }
.rail-card h3 a:hover { color: var(--rose); }
.rail-card p { font-size: 15.5px; }

@media (max-width: 650px) {
  .rail-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rail { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  .rail-card .capability-media img { transition: none; }
}

/* ── Contact typography: a phone number must never break across two lines, and the
   entity titles should settle into even lines rather than a ragged three. ── */
.contact-entity a[href^="tel:"],
.contact-entity a[href^="mailto:"],
.contact-channel a[href^="tel:"],
.contact-channel a[href^="mailto:"],
.contact-channel a[href*="wa.me"] { white-space: nowrap; }

.contact-entity h3 { text-wrap: balance; font-size: 20px; line-height: 1.22; }
.contact-entity p { text-wrap: pretty; }
.contact-panel h2 { text-wrap: balance; }
.contact-channel strong { white-space: nowrap; }

/* keep the outbound arrow tied to the last word instead of orphaning it */
.contact-channel a, .contact-entity a { overflow-wrap: normal; }

/* Service-detail headings sit one step below the primary inner-page title. */
.detail-hero h1, .detail-grid h1 { font-size: clamp(34px, 4vw, 50px); }

/* ── Regional presence ───────────────────────────────────────────────────────
   Cairo and Riyadh are operating bases; Muscat is a representative centre and
   is styled as subordinate to them so the page never reads as four entities. */
.presence-map { margin: 0 0 42px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); background: var(--ink); }
.presence-map img, .presence-map picture { display: block; width: 100%; height: auto; }
.presence-grid { align-items: stretch; }
.presence-item { border: 1px solid var(--line); border-top: 3px solid var(--rose); background: white; border-radius: 7px; padding: 26px 26px 28px; }
.presence-item h3 { margin: 10px 0 0; font-size: 22px; line-height: 1.2; }
.presence-item p { margin: 13px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.62; text-wrap: pretty; }
.presence-item strong { color: var(--ink); font-weight: 700; }
.presence-item .tag { color: var(--rose); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.presence-item.is-representation { border-top-color: var(--accent-300); background: transparent; border-style: dashed; }
.presence-item.is-representation .tag { color: var(--accent-600); }
.presence-note { margin: 34px auto 0; max-width: 860px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.contact-entity.is-representation { border-style: dashed; }
.contact-entity.is-representation .tag { display: block; margin-bottom: 8px; color: var(--accent-600); text-transform: uppercase; }
.contact-entity small { display: block; margin-top: 11px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 880px) {
  .presence-grid { grid-template-columns: 1fr; }
  .presence-map { margin-bottom: 30px; }
}

/* screen-reader-only text: keeps the heading outline complete without adding
   a visible heading the baseline design never had */
.sr-only { 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; }


/* Bilingual language control and Arabic RTL */
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--wine);background:#fff;font-size:13px;font-weight:800;white-space:nowrap;line-height:1}
.language-switch:hover{border-color:var(--rose);color:var(--rose);background:var(--paper)}
[dir="rtl"] body{font-family:Tahoma,Arial,"Segoe UI",sans-serif;text-align:right}
[dir="rtl"] .main-nav,[dir="rtl"] .nav-actions,[dir="rtl"] .hero-actions,[dir="rtl"] .cta-inner,[dir="rtl"] .rail-head,[dir="rtl"] .rail-nav{direction:rtl}
[dir="rtl"] .brand{direction:ltr}
[dir="rtl"] .section-head.left{margin-right:0;margin-left:auto;text-align:right}
[dir="rtl"] .section-head.left p{margin-right:0;margin-left:auto}
[dir="rtl"] .eyebrow{letter-spacing:.04em;text-transform:none}
[dir="rtl"] .eyebrow::before{order:2}
[dir="rtl"] .kicker,[dir="rtl"] .breadcrumbs,[dir="rtl"] .entity-card .tag,[dir="rtl"] .contact-entity .tag{letter-spacing:.04em;text-transform:none}
[dir="rtl"] .entity-card::before,[dir="rtl"] .content-card::before{left:auto;right:0}
[dir="rtl"] .check-list li{grid-template-columns:27px 1fr}
[dir="rtl"] .quote-box,[dir="rtl"] .boundary-note,[dir="rtl"] .status-callout{border-left:0;border-right:4px solid var(--rose)}
[dir="rtl"] .service-number,[dir="rtl"] .capability-number{left:auto;right:18px}
[dir="rtl"] .faq-question{text-align:right}
[dir="rtl"] .faq-answer p{padding:0 0 23px 45px}
[dir="rtl"] .sector-list li::before{margin:0 0 5px 13px}
[dir="rtl"] .form-status,[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right}
[dir="rtl"] .rail{direction:ltr}
[dir="rtl"] .rail-card{direction:rtl;scroll-snap-align:start}
[dir="rtl"] .social-link{direction:ltr}

/* The Arabic form keeps its translated labels while preserving the same
   responsive field rhythm and touch targets as the English form. */
.enquiry-form{display:grid;gap:20px}
.enquiry-form .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.enquiry-form label{display:flex;flex-direction:column;gap:8px;font-weight:700}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{width:100%;min-height:50px;border:1px solid #bfcfda;padding:13px 14px;border-radius:4px;background:#fff;color:var(--ink)}
.enquiry-form textarea{min-height:170px;resize:vertical}
.enquiry-form .consent{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px;font-size:15px;font-weight:400;color:var(--muted)}
.enquiry-form .consent input{width:18px;min-height:18px;margin-top:4px}
.enquiry-form .consent a{color:var(--wine);text-decoration:underline}
.enquiry-form .button{justify-self:start}

@media (max-width:1020px){
  /* The language control remains available before the drawer is opened. */
  .nav-actions{display:flex;margin-inline-start:auto;gap:8px}
  .nav-actions .header-cta,.nav-actions .social-link{display:none}
  .menu-open .nav-actions{display:flex;position:static;inset:auto;z-index:auto;gap:8px}
  .menu-open .nav-actions .header-cta,.menu-open .nav-actions .social-link{display:none}
  .language-switch{min-width:68px;min-height:42px;padding-inline:10px}
  [dir="rtl"] .main-nav{text-align:right}
}

@media (max-width:650px){
  .nav-wrap{min-height:72px;gap:9px}
  .main-nav{inset:72px 0 0;padding:20px 22px 96px}
  .brand img{width:108px}
  .brand-suffix{font-size:9px;letter-spacing:.14em}
  .menu-toggle{width:42px;height:42px}
  .language-switch{min-width:62px;font-size:12px}
  .hero[data-hero-slider] .hero-content{padding-inline:0 28px}
  [dir="rtl"] .hero[data-hero-slider] .hero-content{padding-inline:28px 0}
  [dir="rtl"] .hero[data-hero-slider] .hero-content h1,
  [dir="rtl"] .hero[data-hero-slider] .hero-content h2{font-size:clamp(36px,10.5vw,48px);line-height:1.16}
  .hero-actions .button{width:100%}
  .page-hero h1,.detail-hero h1,.detail-grid h1{font-size:clamp(31px,9.2vw,42px);line-height:1.18}
  .detail-meta{align-items:flex-start}
  .contact-panel{padding:28px 24px}
  .enquiry-form .form-row{grid-template-columns:1fr}
  .enquiry-form .button{width:100%}
  .rail-card{flex-basis:min(84vw,322px)}
  .rail-nav{width:100%;justify-content:flex-end}
  .cta-band{padding:56px 0}
  .cta-inner h2{font-size:34px}
}

@media (max-width:390px){
  .brand img{width:96px}
  .brand{gap:6px}
  .brand-suffix{display:none}
  .language-switch{min-width:58px;padding-inline:8px}
  .hero[data-hero-slider] .hero-content{padding-inline:0 20px}
  [dir="rtl"] .hero[data-hero-slider] .hero-content{padding-inline:20px 0}
}

.assurance-governance-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
  margin-top: 48px;
  padding: clamp(30px, 4.2vw, 52px);
  overflow: hidden;
  border: 1px solid var(--accent-200);
  border-radius: 8px;
  background: linear-gradient(135deg, #f7fbfe 0%, #eef6fb 100%);
}

.assurance-governance-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(
    var(--accent-500),
    var(--accent-700)
  );
}

.governance-copy {
  position: relative;
  z-index: 1;
}

.governance-copy h2 {
  font-size: clamp(31px, 3.1vw, 43px);
  line-height: 1.12;
  text-wrap: balance;
}

.governance-copy p {
  margin: 17px 0 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.governance-contact {
  margin-top: 3px;
}

.governance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.governance-card {
  display: flex;
  min-height: 248px;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(25, 50, 72, .07);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.governance-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-400);
  box-shadow: var(--shadow);
}

.governance-number {
  color: var(--rose);
  font: 700 12px/1 var(--sans);
  letter-spacing: .12em;
}

.governance-card strong {
  display: block;
  margin-top: 21px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
}

.governance-card p {
  margin: 13px 0 22px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.governance-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--wine);
  font-weight: 700;
  font-size: 15px;
}

.governance-link b {
  font-size: 20px;
  font-weight: 400;
  transition: transform .2s ease;
}

.governance-card:hover .governance-link b {
  transform: translateX(4px);
}

.governance-section .assurance-governance-panel {
  margin-top: 0;
}

[dir="rtl"] .assurance-governance-panel::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .governance-card:hover .governance-link b {
  transform: translateX(-4px);
}

@media (max-width: 900px) {
  .assurance-governance-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 650px) {
  .assurance-governance-panel {
    margin-top: 36px;
    padding: 28px 22px;
  }

  .governance-actions {
    grid-template-columns: 1fr;
  }

  .governance-card {
    min-height: 0;
    padding: 24px 21px;
  }

  .governance-contact {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .governance-card,
  .governance-link b {
    transition: none;
  }

  .governance-card:hover,
  .governance-card:hover .governance-link b {
    transform: none;
  }
}