/* ==========================================================
   Empire One Group — main stylesheet
   ========================================================== */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
}

:root {
  --blue: #24609C;
  --blue-hover: #1D507F;
  --mid: #132B45;
  --deep: #0D2034;
  --gold: #8A7A4E;
  --goldtext: #74663F;
  --golddark: #C9B886;
  --porc: #F4F6F9;
  --ink: #2A3B4D;
  --muted: #4F6075;
  --line: #DCE2EA;
  --ondark: #C6D1DD;
  --field: #B7C2CF;
  --wrap: 1240px;
  --gutter: 32px;
  --header-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;
  max-width: 100%;
}
body {
  margin: 0;
  font-family: Jost, "Segoe UI", Calibri, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); }
a:hover { color: var(--mid); }
h1, h2, h3, p, blockquote { margin: 0; }
/* Soft wrapping for long body copy; keep display headings intact on desktop */
p, blockquote { overflow-wrap: break-word; }
button { font: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--blue); color: #fff; padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.on-dark :focus-visible, .hero :focus-visible, .band :focus-visible { outline-color: var(--golddark); }

/* Shared page rail — header, hero, sections (same on every page) */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding-top: 112px; padding-bottom: 112px; }
#sectors { padding-bottom: 120px; }
.bg-porc { background: var(--porc); }
.bg-white { background: #fff; }

/* ---------- Type helpers ---------- */
.eyebrow {
  margin: 0 0 20px; font-size: 13px; letter-spacing: .28em;
  color: var(--goldtext); font-weight: 500; text-transform: uppercase;
}
.eyebrow--light { color: var(--golddark); }
.page-hero .eyebrow { margin-bottom: 24px; }
.h2 {
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; font-weight: 400;
  color: var(--mid); text-transform: uppercase;
}
.h2--sm { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; }
.lead { font-size: 22px; line-height: 1.6; font-weight: 300; color: var(--ink); }
.body-muted { font-size: 17px; line-height: 1.7; color: var(--muted); }

.text-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 45px;
  color: var(--blue); font-size: 16px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--blue);
}
.text-link:hover { color: var(--mid); border-bottom-color: var(--mid); }
.ext {
  color: var(--blue); text-decoration: none; display: inline-flex; align-items: center;
  gap: 5px; min-height: 33px; border-bottom: 1px solid transparent;
}
.ext:hover { border-bottom-color: var(--blue); color: var(--blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px; font-size: 16px; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease;
}
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 15px; }
.btn--primary { background: var(--blue); color: #fff; border: 0; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; }
.btn--light { background: #fff; color: var(--mid); }
.btn--light:hover { background: #E9EEF4; color: var(--mid); }
.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; font-weight: 400; }
.btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--outline { border-color: var(--blue); background: #fff; color: var(--blue); min-height: 48px; padding: 0 24px; font-size: 15px; }
.btn--outline:hover { background: #E9EEF4; }

/* ---------- Header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; gap: 16px 40px; padding-top: 12px; padding-bottom: 12px; }
.page-about .site-header__inner, .page-contact .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
.brand {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  margin-right: auto; min-width: 0;
}
.brand__mark { height: 44px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brand__word { height: 18px; width: auto; max-width: 100%; }
.brand__group { font-size: 10px; letter-spacing: .32em; color: var(--blue); font-weight: 500; }

.main-nav { display: flex; align-items: center; gap: 4px 28px; flex: none; }
.navlink {
  color: var(--mid); text-decoration: none; font-size: 15px;
  padding: 12px 4px; border-bottom: 1px solid transparent;
}
.navlink:hover { color: var(--blue); border-bottom-color: var(--gold); }
.navlink[aria-current="page"] { color: var(--blue); border-bottom-color: var(--gold); }

.menu-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--mid); align-items: center; justify-content: center; padding: 0; cursor: pointer;
  flex: none; margin-left: 8px; z-index: 80; position: relative;
}
.menu-toggle__bars {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 22px;
}
.menu-toggle__bar {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transform-origin: center; transition: transform .35s var(--ease-out), opacity .25s ease, width .35s var(--ease-out);
}
.menu-open .menu-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle__bar:nth-child(2) { opacity: 0; width: 0; }
.menu-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.main-nav__eyebrow { display: none; }
.menu-backdrop { display: none; }

/* ---------- Hero (home) ---------- */
.hero { background: var(--mid); color: #fff; position: relative; overflow-x: clip; }
.hero__inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px; padding-top: 104px; }
.hero__copy { flex: 1 1 560px; min-width: 0; max-width: 100%; padding-bottom: 96px; }
.hero__kicker { margin: 0 0 28px; font-size: 13px; letter-spacing: .28em; color: var(--golddark); font-weight: 500; }
.hero h1 {
  max-width: 100%;
  font-size: clamp(40px, 5.4vw, 78px); line-height: 1.04; font-weight: 400;
  letter-spacing: .01em; text-transform: uppercase;
  overflow-wrap: break-word; word-break: normal; hyphens: none;
}
.hero__sub { margin-top: 32px; max-width: 560px; font-size: 20px; line-height: 1.6; font-weight: 300; color: var(--ondark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.hero__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; align-items: flex-end; }
.hero__art svg { width: 100%; max-width: 560px; height: auto; }
.hero__art-m { display: none !important; }

.stats { border-top: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.stat { padding: 28px 24px 30px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.12); }
.stat__num { font-size: 40px; font-weight: 300; }
.stat__label { margin-top: 6px; font-size: 15px; color: var(--ondark); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--mid); color: #fff; }
.page-hero__inner { padding-top: 40px; padding-bottom: 80px; }
.page-about .page-hero__inner { padding-bottom: 96px; }
.breadcrumb { font-size: 14px; color: var(--ondark); margin-bottom: 64px; }
.page-about .breadcrumb { margin-bottom: 72px; }
.breadcrumb a { color: var(--ondark); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb span { margin: 0 8px; }
.page-hero h1 {
  max-width: none; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.06;
  font-weight: 400; text-transform: uppercase;
}
.page-hero__sub { margin-top: 24px; max-width: 640px; font-size: 20px; line-height: 1.6; font-weight: 300; color: var(--ondark); }
.page-about .page-hero h1 { max-width: 900px; }
.page-about .page-hero__sub { margin-top: 28px; max-width: 680px; }
.page-contact .page-hero__sub { max-width: 620px; }

/* ---------- Logo marquee ---------- */
.logos { background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; max-width: 100%; }
.logos__head { padding-top: 56px; padding-bottom: 20px; text-align: center; }
.logos__head .eyebrow { margin: 0; }
.marquee {
  overflow: hidden; padding: 12px 0 56px; width: 100%; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.track { display: flex; width: max-content; max-width: none; animation: eo-scroll 70s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.track li {
  flex: none; width: 210px; height: 120px; padding: 0 26px;
  display: flex; align-items: center; justify-content: center;
}
.track img { width: 100%; height: 92px; object-fit: contain; }
@keyframes eo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Text fallback when a company logo file is not available yet */
.logo-text {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 76px; padding: 0 6px;
  font-size: 15px; line-height: 1.25; font-weight: 500; letter-spacing: .04em;
  color: var(--mid); text-transform: uppercase;
}
.co-card__logo .logo-text { height: 100px; font-size: 17px; }

/* ---------- Split layout ---------- */
.split { display: flex; flex-wrap: wrap; gap: 48px 96px; }
.split__aside { flex: 1 1 360px; min-width: 0; }
.split__main { flex: 1.4 1 480px; min-width: 0; }
.split--center { align-items: center; gap: 56px 96px; }
.split--center > .split__main { flex: 1.3 1 460px; }

/* ---------- Sectors (home) ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.sectors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.sector {
  display: flex; flex-direction: column; gap: 14px; padding: 32px;
  background: #fff; border: 1px solid var(--line); min-height: 240px;
}
.sector__num { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
.sector__title { font-size: 22px; color: var(--mid); font-weight: 500; }
.sector__toggle { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.sector__head { display: flex; flex-direction: column; gap: 14px; }
.sector__panel { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.sector__toggle svg { display: none; color: var(--blue); flex: none; transition: transform .2s ease; }
.sector__desc { font-size: 16px; line-height: 1.55; color: var(--muted); }
.sector__cos {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14px; color: var(--mid);
}
.sector--cta { justify-content: space-between; gap: 24px; background: var(--mid); color: #fff; border-color: var(--mid); }
.sector--cta span { font-size: 22px; line-height: 1.35; }
.sector--cta .btn { align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15px; }

/* ---------- Record ---------- */
.record { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--line); }
.record__item { padding: 36px 28px 8px; }
.record__item:first-child { padding-left: 0; }
.record__num { font-size: clamp(44px, 4.4vw, 64px); font-weight: 300; color: var(--blue); line-height: 1; }
.record__label { margin-top: 14px; font-size: 17px; color: var(--ink); }
.record__src { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* ---------- Chairperson ---------- */
.portrait {
  flex: 1 1 380px; min-width: 0; max-width: 460px; width: 100%;
  height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: #fff;
}
.quote { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.3; font-weight: 300; color: var(--mid); }
.person__name { font-size: 18px; font-weight: 500; color: var(--mid); }
.person__role { margin-top: 4px; font-size: 15px; color: var(--muted); }
.chair-foot { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }

.message { font-size: 18px; line-height: 1.75; color: var(--ink); }
.message p + p { margin-top: 22px; }

/* ---------- Vision / mission / values ---------- */
.vm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 96px; padding-bottom: 72px; border-bottom: 1px solid var(--line); }
.vm .eyebrow { margin-bottom: 18px; }
.vm__text { font-size: 26px; line-height: 1.45; font-weight: 300; color: var(--mid); }
.values-label { margin-top: 64px; margin-bottom: 28px; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px; }
.values h3 { margin-bottom: 10px; font-size: 20px; font-weight: 500; color: var(--mid); }
.values p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- CSR ---------- */
.csr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 40px; }
.csr > div { padding: 24px 0; border-top: 1px solid var(--line); }
.csr h3 { margin-bottom: 8px; font-size: 19px; font-weight: 500; color: var(--mid); }
.csr p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- Group structure ---------- */
.structure { background: #fff; border: 1px solid var(--line); }
.structure__row { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 22px 28px; }
.structure__row + .structure__row { border-top: 1px solid var(--line); }
.structure__sector { flex: 0 1 300px; font-size: 17px; font-weight: 500; color: var(--mid); }
.structure__cos { flex: 1 1 400px; font-size: 16px; color: var(--muted); }
.structure__cos .ext { min-height: 0; }

/* ---------- Contact band ---------- */
.band { background: var(--blue); color: #fff; }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-top: 88px; padding-bottom: 88px; }
.band__copy { flex: 1 1 520px; min-width: 0; }
.band h2 { margin-bottom: 14px; font-size: clamp(30px, 3vw, 42px); font-weight: 400; text-transform: uppercase; line-height: 1.15; }
.band p { font-size: 18px; line-height: 1.6; color: #E1EAF4; }
.band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.band .btn--ghost { border-color: rgba(255,255,255,.55); }

/* ---------- Companies page ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
  min-height: 44px; padding: 0 18px; font-size: 15px; cursor: pointer;
  border: 1px solid #C9D2DD; background: #fff; color: var(--mid);
}
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { border-color: var(--mid); background: var(--mid); color: #fff; }
.count { margin: 0 0 28px; font-size: 15px; color: var(--muted); }
.co-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 20px;
}
.co-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); min-height: 280px; }
.co-card[hidden] { display: none; }
.co-card__logo {
  height: 170px; padding: 24px 32px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.co-card__logo img { width: 100%; height: 118px; object-fit: contain; }
.co-card__body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.co-card__sector { font-size: 12px; letter-spacing: .2em; color: var(--goldtext); font-weight: 500; text-transform: uppercase; }
.co-card__name { font-size: 18px; font-weight: 500; color: var(--mid); line-height: 1.3; }
.co-card .ext { margin-top: auto; align-self: flex-start; min-height: 41px; font-size: 15px; font-weight: 500; gap: 6px; }

/* ---------- Contact page ---------- */
.contact-grid { display: flex; flex-wrap: wrap; gap: 56px 96px; padding-top: 96px; padding-bottom: 96px; }
.contact-grid__form { flex: 1.4 1 520px; min-width: 0; }
.contact-grid__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--field); border-radius: 0; padding: 0 16px; height: 54px; width: 100%;
}
.field input { height: 56px; }
.field textarea { height: auto; padding: 14px 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field__error { font-size: 13px; color: #B3261E; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form__note { font-size: 13px; color: var(--muted); }
.form .btn--primary { min-height: 54px; padding: 0 36px; }
.hp { position: absolute; left: -9999px; }
.thanks { padding: 40px; background: var(--porc); border: 1px solid var(--line); }
.thanks h2 { margin-bottom: 12px; font-size: 28px; font-weight: 400; color: var(--mid); text-transform: uppercase; }
.thanks p { margin-bottom: 24px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.info .eyebrow { margin-bottom: 14px; }
.info p:not(.eyebrow) { font-size: 18px; line-height: 1.7; color: var(--mid); }
.info > div:nth-child(2) p:not(.eyebrow) { line-height: 1.9; }
.info a.tel { color: var(--mid); text-decoration: none; }
.map { aspect-ratio: 4 / 3; width: 100%; border: 0; background: #E3E8EF; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); color: var(--muted); }
.site-footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 48px 40px; padding-top: 72px; padding-bottom: 40px;
}
.site-footer__logo { width: 150px; height: auto; }
.footer-label { display: block; font-size: 12px; letter-spacing: .24em; color: var(--goldtext); font-weight: 500; margin-bottom: 14px; }
.footer-address { font-size: 15px; line-height: 1.7; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--ink); }
.footer-col .footer-label { margin-bottom: 2px; }
.foot { color: var(--ink); text-decoration: none; }
.foot:hover { color: var(--blue); text-decoration: underline; }
.social { display: flex; gap: 8px; margin-top: 6px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 22px; padding-bottom: 36px; border-top: 1px solid var(--line); font-size: 13px;
}
.site-footer__bottom a { color: var(--muted); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--blue); text-decoration: underline; }

/* ==========================================================
   Light polish + motion (subtle; never leaves content hidden)
   ========================================================== */
.site-header { transition: box-shadow .35s var(--ease), background-color .35s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(19,43,69,.08); }
.navlink { transition: color .2s ease, border-color .2s ease; }
.btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
    transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { box-shadow: 0 8px 20px rgba(36, 96, 156, .22); }
.btn--light:hover { box-shadow: 0 8px 20px rgba(19, 43, 69, .12); }
.btn svg, .text-link svg { transition: transform .25s var(--ease); }
.btn:hover svg, .text-link:hover svg { transform: translateX(3px); }
.text-link { transition: color .2s ease, border-color .2s ease; }
.chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.sector, .co-card { transition: border-color .25s ease, transform .25s var(--ease); }
.sector:not(.sector--cta):hover, .co-card:hover { border-color: #C9D2DD; }
@media (hover: hover) and (pointer: fine) {
  .co-card:hover { transform: translateY(-2px); }
}

/* Hero / page-hero entrance — CSS-only, always ends fully visible */
@media (prefers-reduced-motion: no-preference) {
  .hero__kicker { animation: eo-rise .7s var(--ease-out) both; }
  .hero h1 { animation: eo-rise .85s var(--ease-out) .06s both; }
  .hero__sub { animation: eo-rise .85s var(--ease-out) .14s both; }
  .hero__actions { animation: eo-rise .85s var(--ease-out) .22s both; }
  .hero__art { animation: eo-fade 1s var(--ease-out) .18s both; }
  .hero__art svg { animation: eo-rise .9s var(--ease-out) .28s both; }
  .stat { animation: eo-rise .65s var(--ease-out) both; }
  .stat:nth-child(1) { animation-delay: .32s; }
  .stat:nth-child(2) { animation-delay: .4s; }
  .stat:nth-child(3) { animation-delay: .48s; }

  .page-hero .breadcrumb { animation: eo-rise .55s var(--ease-out) both; }
  .page-hero h1 { animation: eo-rise .75s var(--ease-out) .06s both; }
  .page-hero__sub { animation: eo-rise .75s var(--ease-out) .14s both; }
}

@keyframes eo-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes eo-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scroll reveals — only after JS adds html.eo-motion; failsafe reveals all */
@media (prefers-reduced-motion: no-preference) {
  html.eo-motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change: opacity, transform;
  }
  html.eo-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.eo-motion [data-reveal][data-reveal-delay="1"].is-in { transition-delay: .06s; }
  html.eo-motion [data-reveal][data-reveal-delay="2"].is-in { transition-delay: .12s; }
  html.eo-motion [data-reveal][data-reveal-delay="3"].is-in { transition-delay: .18s; }
}

/* ==========================================================
   Tablet / compact desktop (menu collapses; layout stays airy)
   ========================================================== */
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .menu-toggle { display: inline-flex !important; }
  .site-header__inner { flex-wrap: nowrap; }
  .site-header .btn--sm:not(.nav-cta) { display: none !important; }

  /* Desktop links are replaced by the slide-in drawer */
  .main-nav { display: none !important; }

  /* Dim overlay behind the drawer */
  .menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(13, 32, 52, .48);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  body.menu-locked .menu-backdrop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .35s var(--ease);
  }

  /* Slide-in drawer from the right (a direct child of <body>, above everything) */
  .mobile-nav {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001;
    width: min(340px, 88vw); height: 100%; height: 100dvh;
    flex-direction: column; align-items: stretch;
    padding: 18px 28px calc(32px + env(safe-area-inset-bottom));
    background: #fff;
    transform: translate3d(100%, 0, 0); visibility: hidden;
    transition: transform .4s var(--ease-out), visibility 0s linear .4s;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  body.menu-locked .mobile-nav {
    transform: translate3d(0, 0, 0); visibility: visible;
    transition: transform .4s var(--ease-out);
    box-shadow: -16px 0 48px rgba(19, 43, 69, .18);
  }
  .mobile-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 20px; }
  .mobile-nav__eyebrow {
    font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--goldtext); font-weight: 500;
  }
  .mobile-nav__close {
    width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: transparent;
    color: var(--mid); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .mobile-nav__links { display: flex; flex-direction: column; }
  .mobile-nav__link {
    display: block; padding: 18px 0; border-bottom: 1px solid var(--line);
    font-size: 18px; color: var(--mid); text-decoration: none;
  }
  .mobile-nav__link:hover, .mobile-nav__link[aria-current="page"] { color: var(--blue); border-bottom-color: var(--gold); }
  .mobile-nav__cta { margin-top: auto; width: 100%; min-height: 52px; flex: none; }

  body.menu-locked { overflow: hidden; touch-action: none; }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav, .menu-backdrop, .menu-toggle__bar { transition: none; }
  }

}

@media (min-width: 901px) {
  .mobile-nav, .menu-backdrop { display: none !important; }
  .main-nav .nav-cta { display: none; }
}

/* ==========================================================
   Phone — values taken from the "Home – mobile" design (390px):
   16px side margins, 56px section spacing
   ========================================================== */
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 77px; }

  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .section, #sectors { padding-top: 56px; padding-bottom: 56px; }
  .eyebrow { margin-bottom: 16px; font-size: 12px; letter-spacing: .26em; }

  /* Header: 76px tall */
  .site-header__inner,
  .page-about .site-header__inner, .page-contact .site-header__inner { padding-top: 16px; padding-bottom: 16px; }
  .brand { gap: 10px; min-width: 0; }
  .brand__text { gap: 4px; }
  .brand__mark { height: 34px; }
  .brand__word { height: 14px; }
  .brand__group { font-size: 8px; }
  .menu-toggle { margin-left: 0; margin-right: -10px; }

  /* Hero */
  .hero__inner { padding-top: 52px; gap: 0; }
  .hero__copy { flex: 1 1 100%; width: 100%; padding-bottom: 0; }
  .hero__kicker { margin-bottom: 20px; font-size: 12px; letter-spacing: .26em; }
  .hero h1 { font-size: 38px; line-height: 1.06; letter-spacing: 0; }
  .hero__sub { margin-top: 22px; max-width: none; font-size: 17px; line-height: 1.6; }
  .hero__actions { flex-direction: column; gap: 12px; margin-top: 30px; }
  .hero__actions .btn { width: 100%; min-height: 52px; }
  .hero__actions .btn--ghost { min-height: 54px; }
  .hero__art { flex: 1 1 100%; width: 100%; margin-top: 36px; }
  .hero__art-d { display: none !important; }
  .hero__art .hero__art-m { display: block !important; width: 100%; max-width: none; height: auto; }

  /* Stats: three rows */
  .stats__grid { grid-template-columns: 1fr; }
  .stat, .stat:first-child {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 20px 0;
  }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .stat__num { font-size: 28px; white-space: nowrap; flex: none; }
  .stat__label { margin: 0; font-size: 14px; text-align: right; }

  /* Group of companies: auto-scrolling logo slider (same as desktop, phone sizes) */
  .logos { padding-bottom: 36px; }
  .logos__head { padding-top: 40px; padding-bottom: 18px; }
  .logos__head .eyebrow { margin: 0; }
  .marquee { padding: 0; }
  .track { animation-duration: 45s; }
  .track li { width: 158px; height: 84px; padding: 0 14px; }
  .track img { width: 130px; height: 84px; }

  /* Headings & copy */
  .h2, .h2--sm { font-size: 30px; line-height: 1.1; }
  .split .h2 { margin-bottom: 20px; }
  .lead { font-size: 18px; line-height: 1.6; }
  .body-muted { font-size: 16px; }
  .text-link { margin-top: 18px !important; min-height: 44px; }
  .split { gap: 0; }
  .split__aside, .split__main { flex-basis: 100%; }

  /* Sectors: accordion list */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .section-head .text-link { margin-top: 0 !important; }
  .sectors-grid { gap: 0; border: 1px solid var(--line); background: #fff; }
  .sector { min-height: 0; padding: 0; border: 0; gap: 0; }
  .sector + .sector { border-top: 1px solid var(--line); }
  .sector__toggle {
    all: unset; box-sizing: border-box; cursor: pointer; pointer-events: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 20px;
  }
  .sector__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  .sector__toggle svg { display: block; color: var(--blue); flex: none; transition: transform .2s ease; }
  .sector__head { flex-direction: row; align-items: baseline; gap: 12px; }
  .sector__num { font-size: 13px; letter-spacing: 0; }
  .sector__title { font-size: 19px; }
  .sector__panel { display: none; padding: 0 20px 20px; gap: 0; }
  .sector.is-open .sector__toggle { padding-bottom: 0; }
  .sector.is-open .sector__panel { display: block; }
  .sector.is-open .sector__toggle svg { transform: rotate(180deg); }
  .sector__desc { margin: 12px 0 10px; font-size: 15px; line-height: 1.55; }
  .sector__cos { flex-direction: column; align-items: flex-start; border-top: 0; padding-top: 0; gap: 2px; font-size: 15px; }
  .sector__cos > * { min-height: 36px; display: flex; align-items: center; }
  .sector--cta { padding: 24px 20px; border-top: 1px solid var(--line); }
  .sector--cta span { font-size: 19px; }

  /* Record */
  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; border-top: 0; }
  .record__item, .record__item:first-child { padding: 0; }
  .record__num { font-size: 36px; line-height: normal; }
  .record__label { margin-top: 6px; font-size: 15px; line-height: 1.45; }
  .record__src { margin-top: 4px; font-size: 13px; }
  .section > .wrap > .h2[style*="margin-bottom:56px"] { margin-bottom: 28px !important; }

  /* Chairperson */
  .split--center { gap: 32px; }
  .portrait { max-width: 100%; }
  .quote { font-size: 26px; line-height: 1.32; }
  .chair-foot { margin-top: 22px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .person__name { font-size: 16px; }
  .person__role { margin-top: 2px; font-size: 14px; }
  .message { font-size: 17px; }

  /* Vision / values / responsibility */
  .vm { gap: 36px; padding-bottom: 40px; }
  .vm__text { font-size: 21px; }
  .values-label { margin-top: 40px; }
  .values { gap: 24px; }
  .csr { margin-top: 28px; }
  .csr > div { padding: 20px 0; }

  /* Group structure */
  .structure__row { padding: 18px 20px; flex-direction: column; gap: 6px; }
  .structure__sector, .structure__cos { flex-basis: auto; }

  /* Contact band */
  .band__inner { padding-top: 52px; padding-bottom: 52px; gap: 0; }
  .band h2 { margin-bottom: 12px; font-size: 28px; line-height: normal; }
  .band p { margin-bottom: 24px; font-size: 16px; }
  .band__actions { flex-direction: column; gap: 12px; width: 100%; }
  .band__actions .btn { width: 100%; min-height: 52px; }

  /* Inner page heroes */
  .page-hero__inner, .page-about .page-hero__inner { padding-top: 32px; padding-bottom: 56px; }
  .breadcrumb, .page-about .breadcrumb { margin-bottom: 40px; }
  .page-hero .eyebrow { margin-bottom: 20px; }
  .page-hero h1 { font-size: 38px; }
  .page-hero__sub, .page-about .page-hero__sub { margin-top: 22px; font-size: 17px; }

  /* Companies (one card per row, as in the design grid) */
  .chips { gap: 8px; }
  .chip { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .bg-porc > .wrap[style*="padding-top:56px"] { padding-top: 40px !important; padding-bottom: 56px !important; }

  /* Contact */
  .contact-grid { padding-top: 56px; padding-bottom: 56px; gap: 48px; }
  .form .btn--primary { width: 100%; }
  .info p:not(.eyebrow) { font-size: 17px; }

  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: 44px; padding-bottom: 32px; }
  .site-footer__grid > div:first-child, .footer-address { grid-column: 1 / -1; }
  .site-footer__logo { width: 120px; }
  .footer-address { font-size: 14px; }
  .site-footer__bottom { padding-top: 18px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); font-size: 12px; }

  .sector:not(.sector--cta):hover, .co-card:hover { border-color: var(--line); }
}

@media (max-width: 359px) {
  .hero h1, .page-hero h1 { font-size: 32px; }
  .stat__num { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__kicker, .hero h1, .hero__sub, .hero__actions, .hero__art, .hero__art svg, .stat,
  .page-hero .breadcrumb, .page-hero h1, .page-hero__sub { animation: none; }
  .btn:hover, .co-card:hover { transform: none; }
  html.eo-motion [data-reveal] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ==========================================================
   Hero background video (home + inner pages)
   Layout is unchanged - the video sits behind the design's
   midnight panel with a brand scrim so the type stays legible.
   ========================================================== */
.has-video { position: relative; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--mid); pointer-events: none; }
.hero-media__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(19,43,69,.90) 0%, rgba(19,43,69,.74) 45%, rgba(19,43,69,.50) 100%),
    linear-gradient(0deg, rgba(19,43,69,.55) 0%, rgba(19,43,69,0) 35%);
}
.page-hero.has-video .hero-media::after {
  background: linear-gradient(90deg, rgba(19,43,69,.92) 0%, rgba(19,43,69,.80) 50%, rgba(19,43,69,.58) 100%);
}
/* stats bar sits on a slightly deeper band so the numbers stay crisp */
.hero.has-video .stats { background: rgba(13,32,52,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@media (max-width: 640px) {
  .hero-media::after,
  .page-hero.has-video .hero-media::after {
    background: linear-gradient(180deg, rgba(19,43,69,.80) 0%, rgba(19,43,69,.72) 55%, rgba(19,43,69,.86) 100%);
  }
}

/* ---------- Thank-you page ---------- */
.thankyou { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
.thankyou__inner { width: 100%; padding-top: 96px; padding-bottom: 96px; }
.thankyou__tick { margin-bottom: 32px; }
.thankyou__tick circle { stroke-dasharray: 214; stroke-dashoffset: 214; animation: eo-draw-c 1s var(--ease-out) .1s forwards; }
.thankyou__tick path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: eo-draw-c .6s var(--ease-out) .8s forwards; }
@keyframes eo-draw-c { to { stroke-dashoffset: 0; } }
.thankyou__redirect { margin-top: 28px; font-size: 15px; color: var(--ondark); }
.thankyou__redirect strong { color: #fff; font-weight: 500; }
.thankyou__bar { margin-top: 14px; width: 220px; max-width: 100%; height: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.thankyou__bar span { display: block; height: 100%; background: var(--golddark); transform-origin: left; animation: eo-bar 5s linear forwards; }
@keyframes eo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 640px) {
  .thankyou { min-height: calc(100vh - var(--header-h) - 72px); }
  .thankyou__inner { padding-top: 56px; padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .thankyou__tick circle, .thankyou__tick path { animation: none; stroke-dashoffset: 0; }
  .thankyou__bar span { animation: none; transform: scaleX(1); }
}