/* ==========================================================================
   APIS Group — apisgroup.net
   Design system & global styles
   --------------------------------------------------------------------------
   Hybrid aesthetic: Caverion warmth + KST editorial authority.
   Fonts: Fraunces (display serif) + Geist (technical sans).
   ========================================================================== */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --navy: #0A2E55;
  --navy-deep: #061C36;
  --navy-darker: #04101F;
  --green: #22C74A;
  --green-deep: #149A38;

  /* Neutrals */
  --ink: #0E0E0E;
  --ink-soft: #2A2A2A;
  --gray-700: #4A5560;
  --gray-500: #5F6B77;   /* was 3.59:1 on cream, now 4.63:1 */
  --gray-300: #C9CDD2;
  --gray-200: #E2E4E7;
  --gray-100: #F1F2F4;
  --cream: #F4F6F9;          /* cool blue-gray surface (was warm cream) */
  --cream-deep: #E8ECF1;     /* slightly darker cool surface */
  --surface-tint: #EDF1F5;   /* subtle blue-tinted neutral */
  --white: #FFFFFF;

  /* Type */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Fluid type scale */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.4rem, 1.2rem + 1vw, 1.875rem);
  --fs-2xl: clamp(1.85rem, 1.4rem + 2vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.5vw, 4rem);
  --fs-4xl: clamp(3rem, 1.8rem + 5.5vw, 5.75rem);
  --fs-display: clamp(3.25rem, 1.6rem + 7vw, 7.5rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(12, 42, 69, 0.06), 0 2px 6px rgba(12, 42, 69, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 42, 69, 0.08), 0 12px 28px rgba(12, 42, 69, 0.06);
  --shadow-lg: 0 12px 32px rgba(12, 42, 69, 0.12), 0 24px 64px rgba(12, 42, 69, 0.08);
}

/* ---------- 3. BASE ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
}

::selection { background: var(--navy); color: var(--white); }

/* ---------- 4. UTILITIES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-wide { max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow.on-dark { color: rgba(255,255,255,0.72); }
.eyebrow.on-green { color: rgba(255,255,255,0.92); }

.serif { font-family: var(--font-display); font-feature-settings: "ss01"; }
.sans { font-family: var(--font-body); }

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.muted { color: var(--gray-700); }
.lead {
  font-size: var(--fs-md);
  color: var(--gray-700);
  max-width: 56ch;
  line-height: 1.55;
}

.hex {
  display: inline-block;
  width: 0.62em;
  height: 0.7em;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  vertical-align: 0.05em;
  margin: 0 0.05em;
}

/* Section paddings */
.section { padding: var(--sp-12) 0; }
.section-lg { padding: var(--sp-16) 0; }
.section-cream { background: var(--cream); }
.section-white { background: var(--white); }
.section-navy { background: var(--navy-deep); color: var(--white); }
.section-green { background: var(--green-deep); color: var(--white); }
.section-ink { background: var(--ink); color: var(--white); }

/* ---------- 5. TOP UTILITY BAR ---------- */
.top-bar {
  background: var(--navy-darker);
  color: rgba(255,255,255,0.78);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.top-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
}
.top-bar a {
  color: rgba(255,255,255,0.78);
  transition: color var(--t-fast) var(--ease-out);
}
.top-bar a:hover { color: var(--white); }
.top-bar__left, .top-bar__right { display: flex; gap: var(--sp-5); align-items: center; }
.top-bar__lang { display: flex; gap: var(--sp-2); align-items: center; }
.top-bar__lang button {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.4rem;
  border-radius: 2px;
}
.top-bar__lang button.active { color: var(--white); }
.top-bar__lang span { opacity: 0.4; }

/* Locations dropdown (replaces EN/SQ switcher) */
.top-bar__loc { position: relative; }
.top-bar__loc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.78);
  font-family: inherit; font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 4px 6px; border-radius: 3px; line-height: 1;
  transition: color var(--t-fast) var(--ease-out);
}
.top-bar__loc-btn:hover { color: var(--white); }
.top-bar__loc-pin { opacity: 0.7; flex: none; }
.top-bar__loc-caret { opacity: 0.7; flex: none; transition: transform var(--t-fast) var(--ease-out); }
.top-bar__loc.is-open .top-bar__loc-caret { transform: rotate(180deg); }
.top-bar__loc-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 196px; list-style: none; margin: 0; padding: 6px;
  background: var(--white); border-radius: 10px;
  box-shadow: 0 12px 36px rgba(8,28,48,0.22), 0 2px 8px rgba(8,28,48,0.12);
  border: 1px solid rgba(20,66,106,0.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
.top-bar__loc.is-open .top-bar__loc-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.top-bar__loc-menu li { margin: 0; }
.top-bar__loc-menu button {
  display: flex; align-items: center; width: 100%; gap: 8px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.85rem; letter-spacing: 0.01em;
  color: var(--navy-deep); padding: 9px 10px; border-radius: 6px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.top-bar__loc-menu button:hover { background: rgba(20,66,106,0.06); color: var(--navy); }
.top-bar__loc-menu button[aria-selected="true"] { color: var(--navy); font-weight: 500; }
.top-bar__loc-menu button[aria-selected="true"]::after {
  content: ""; margin-left: auto; flex: none;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

@media (max-width: 720px) {
  .top-bar__left { display: none; }
  .top-bar__inner { justify-content: flex-end; }
}

/* ---------- 6. HEADER / NAV ---------- */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.nav__brand img { height: 40px; width: auto; display: block; }
.nav__brand-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--green);
  letter-spacing: -0.005em;
  display: none;
}
@media (min-width: 900px) { .nav__brand-text { display: inline; } }

.nav__primary {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}
.nav__primary a {
  font-size: 0.94rem;
  font-weight: 450;
  color: var(--ink);
  padding: 0.5rem 0;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__primary a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--green);
  transition: right var(--t-med) var(--ease-out);
}
.nav__primary a:hover::after,
.nav__primary a.is-active::after { right: 0; }

.nav__cta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

@media (max-width: 1080px) {
  .nav__primary, .nav__cta { display: none; }
}

/* Hamburger */
.nav__burger {
  display: none;
  position: relative;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__burger span {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav__burger span:nth-child(1) { transform: translateY(-7px); }
.nav__burger span:nth-child(2) { transform: translateY(0); }
.nav__burger span:nth-child(3) { transform: translateY(7px); }
.nav__burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 1080px) { .nav__burger { display: flex; } }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: var(--header-h, 64px);      /* measured from the real header, not guessed */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy-deep);
  color: var(--white);
  z-index: 99;                     /* header stays above; drawer starts below it */
  padding: 1.35rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(-100%);
  /* Hidden outright when closed. Without this the drawer's bottom edge lands
     on the header's bottom and bleeds over the utility bar, which has no
     stacking context of its own. Visibility is switched only after the slide
     finishes, so the closing animation is still seen. */
  visibility: hidden;
  transition: transform var(--t-med) var(--ease-out),
              visibility 0s linear var(--t-med);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;    /* stop the page behind scrolling with it */
}
.mobile-drawer.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.mobile-drawer ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-drawer a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--white);
}
.mobile-drawer a:hover { color: var(--green); }
.mobile-drawer__cta { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  transition: all var(--t-med) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary { background: var(--green); color: var(--navy); }   /* v1.3: navy on green = 6.08:1 AA; white on green fails at 2.25:1 */
.btn-primary:hover { background: var(--green-deep); color: var(--white); }  /* green-deep + white = 3.68:1, acceptable for a large UI element */

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--gray-300);
}
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }

.btn-ghost-light {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 0.92rem;
  font-weight: 500;
  transition: gap var(--t-med) var(--ease-out);
}
.btn-link:hover { gap: 0.7rem; }
.btn-link svg { width: 14px; height: 14px; }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; }

/* Sticky mobile CTA */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 50;
  background: var(--green);
  color: var(--white);
  padding: 1rem 1.4rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-weight: 500;
}
@media (max-width: 720px) { .sticky-cta { display: block; } }

/* ---------- 8. HERO ---------- */
.hero {
  background: var(--navy-deep);
  color: var(--white);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 10vw, 9rem);
  position: relative;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(8, 28, 48, 0.95) 0%, rgba(12, 42, 69, 0.85) 45%, rgba(12, 42, 69, 0.55) 100%),
    linear-gradient(to bottom, transparent 60%, rgba(8, 28, 48, 0.95) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 80% 30%, rgba(62, 181, 74, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 90%, rgba(21, 66, 106, 0.4), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
/* Hero grid overlay intentionally removed (build v11) — was producing a visible grid lattice on the hero photo. */
.hero__inner { position: relative; z-index: 2; }
.hero__eyebrow { color: rgba(255,255,255,0.62); margin-bottom: 1.5rem; }
.hero__headline {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2.6rem, 1.4rem + 5.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  max-width: 17ch;
  margin-bottom: 2rem;
}
.hero__headline em {
  font-style: italic;
  font-weight: 320;
  color: rgba(255,255,255,0.78);
}
.hero__sub {
  font-size: var(--fs-md);
  max-width: 56ch;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  margin-bottom: 2.5rem;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-6);
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero__meta-item .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 360;
  color: var(--green);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
  font-variation-settings: "SOFT" 50;
}
.hero__meta-item .label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

/* Hero variant for inner pages */
.hero-inner {
  background: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.hero-inner__eyebrow { color: var(--gray-700); margin-bottom: 1.5rem; }
.hero-inner__title {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: var(--fs-4xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.hero-inner__sub {
  font-size: var(--fs-md);
  max-width: 60ch;
  color: var(--gray-700);
  line-height: 1.55;
}
.breadcrumb {
  font-size: 0.82rem;
  color: #4A6987;   /* 5.30:1 on cream — gray-500 was 3.59:1 and failed AA */
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
}
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb span { margin: 0 0.5rem; opacity: 1; color:#4A6987; }  /* opacity .5 gave 1.76:1 */

/* ---------- 9. SECTION HEADER ---------- */
.section-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-8);
  align-items: end;
  margin-bottom: var(--sp-10);
}
.section-header__title {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
  font-variation-settings: "SOFT" 40;
}
.section-header__title em { font-style: italic; color: var(--gray-500); font-weight: 340; }
.section-header__intro {
  font-size: var(--fs-md);
  color: var(--gray-700);
  line-height: 1.55;
  max-width: 56ch;
}
.section-header.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.section-header.center .section-header__intro { margin: 0 auto; }
@media (max-width: 880px) {
  .section-header { grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
}

/* ---------- 10. SOLUTION PILLARS (numbered editorial cards) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pillar {
  background: var(--white);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
  min-height: 320px;
  transition: background var(--t-med) var(--ease-out);
}
.pillar:hover { background: var(--cream); }
.pillar__num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 320;
  color: var(--navy);
  line-height: 1;
  font-variation-settings: "SOFT" 60;
}
.pillar__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 420;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.pillar__desc { font-size: 0.95rem; color: var(--gray-700); line-height: 1.55; }
.pillar__arrow { margin-top: auto; color: var(--green); }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pillars { grid-template-columns: 1fr; } }
/* 3-up variant — fills the row evenly when a section has exactly three pillars */
.pillars--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .pillars--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .pillars--3 { grid-template-columns: 1fr; } }


/* ---------- 11. DISCIPLINES GRID ---------- */
.disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.discipline {
  background: var(--white);
  padding: 1.6rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: all var(--t-med) var(--ease-out);
  font-size: 0.98rem;
  color: var(--ink);
  font-weight: 450;
}
.discipline__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  transition: all var(--t-med) var(--ease-out);
}
.discipline:hover {
  background: var(--navy-deep);
  color: var(--white);
}
.discipline:hover .discipline__icon { background: var(--green); color: var(--white); }
.discipline svg { width: 14px; height: 14px; }

/* ---------- 12. INDUSTRIES (chip grid) ---------- */
.industries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.industry {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all var(--t-med) var(--ease-out);
  cursor: pointer;
}
.industry:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.industry__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gray-500);
  letter-spacing: 0.05em;
}
.industry__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 420;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}

/* ---------- 13. LIFECYCLE BAND ---------- */
.lifecycle {
  background: var(--cream);
  padding: var(--sp-12) 0;
  position: relative;
  overflow: hidden;
}
.lifecycle__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-10);
  align-items: start;
}
.lifecycle__steps { display: flex; flex-direction: column; gap: 0; }
.lifecycle__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--cream-deep);
  align-items: start;
}
.lifecycle__step:last-child { border-bottom: none; }
.lifecycle__step-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 420;
  color: var(--green);
  font-variation-settings: "SOFT" 50;
}
.lifecycle__step h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy-deep);
  margin-bottom: 0.4rem;
  font-weight: 440;
}
.lifecycle__step p { font-size: 0.95rem; color: var(--gray-700); line-height: 1.55; }
@media (max-width: 880px) {
  .lifecycle__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- 14. SUSTAINABILITY (green-dominant block) ---------- */
.sustain {
  background: var(--green-deep);
  color: var(--white);
  padding: var(--sp-12) 0;
  position: relative;
  overflow: hidden;
}
.sustain::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -20%;
  width: 480px; height: 480px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 65%);
  pointer-events: none;
}
.sustain__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
  position: relative;
}
.sustain__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 360;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.sustain__title em { font-style: italic; color: rgba(255,255,255,0.7); font-weight: 340; }
.sustain__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.sustain__metric {
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: var(--sp-4);
}
.sustain__metric .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 340;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
  font-variation-settings: "SOFT" 50;
}
.sustain__metric .label { font-size: 0.9rem; color: rgba(255,255,255,0.85); line-height: 1.4; }
@media (max-width: 880px) {
  .sustain__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- 15. PROJECTS / CASE STUDIES ---------- */
.projects {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-4);
  height: 640px;
}
.project {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-deep);
  cursor: pointer;
  transition: transform var(--t-med) var(--ease-out);
}
.project:hover { transform: translateY(-3px); }
.project:hover .project__photo img { transform: scale(1.04); }
.project:nth-child(1) { grid-row: 1 / 3; }
.project__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.project__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
/* gradient fallback if image fails / is missing */
.project__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.project__bg.bg-1 { background: linear-gradient(135deg, #1a3a5c 0%, #0A2E55 50%, #2D5A82 100%); }
.project__bg.bg-2 { background: linear-gradient(135deg, #149A38 0%, #22C74A 100%); }
.project__bg.bg-3 { background: linear-gradient(135deg, #061C36 0%, #0A2E55 100%); }
.project__bg.bg-4 { background: linear-gradient(135deg, #4A5560 0%, #2A2A2A 100%); }
.project__bg.bg-5 { background: linear-gradient(135deg, #149A38 0%, #0A2E55 100%); }
.project__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 28, 48, 0.92) 0%, rgba(8, 28, 48, 0.45) 55%, rgba(8, 28, 48, 0.15) 100%);
  z-index: 1;
}
.project__content {
  position: absolute;
  inset: 0;
  padding: var(--sp-5);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--white);
}
.project__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  backdrop-filter: blur(6px);
}
.project__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 420;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.project:nth-child(1) .project__title { font-size: 2rem; }
.project__meta { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-top: 0.4rem; }
@media (max-width: 980px) {
  .projects { grid-template-columns: 1fr 1fr; height: auto; }
  .projects > .project { aspect-ratio: 4/3; }
  .project:nth-child(1) { grid-row: auto; grid-column: 1 / 3; }
}
@media (max-width: 580px) {
  .projects { grid-template-columns: 1fr; }
  .project:nth-child(1) { grid-column: auto; }
}

/* ---------- 16. INSIGHTS ---------- */
.insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.insight {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--gray-300);
  cursor: pointer;
}
.insight__category {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.insight__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 420;
  color: var(--navy-deep);
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: color var(--t-fast);
}
.insight:hover .insight__title { color: var(--green-deep); }
.insight__date { font-size: 0.82rem; color: var(--gray-500); margin-top: auto; }
@media (max-width: 880px) { .insights { grid-template-columns: 1fr; } }

/* ---------- 17. CTA BAND ---------- */
.cta-band {
  background: var(--ink);
  color: var(--white);
  padding: var(--sp-12) 0;
  position: relative;
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  position: relative;
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 340;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "SOFT" 30;
}
.cta-band__title em { font-style: italic; color: rgba(255,255,255,0.5); font-weight: 300; }
.cta-band__contact { display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.95rem; }
.cta-band__contact a { display: inline-flex; align-items: center; gap: 0.6rem; }
.cta-band__contact a:hover { color: var(--green); }
.cta-band__contact .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 0.3rem;
}
.cta-band__contact-row {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cta-band__contact-row:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 880px) {
  .cta-band__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- 18. FORMS ---------- */
.form-section { padding: var(--sp-12) 0; background: var(--white); }
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-10);
  align-items: start;
}
.form-aside, .form-main { min-width: 0; }
@media (max-width: 980px) { .form-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.form-aside h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--navy-deep);
  margin-bottom: 0.8rem;
  font-weight: 420;
  line-height: 1.15;
}
.form-aside p { font-size: 0.95rem; color: var(--gray-700); line-height: 1.55; margin-bottom: var(--sp-4); }
.form-aside ul { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--sp-4); }
.form-aside ul li {
  font-size: 0.9rem;
  color: var(--gray-700);
  padding-left: 1.2rem;
  position: relative;
}
.form-aside ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px; height: 8px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.form {
  background: var(--cream);
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.form-row.full { grid-template-columns: 1fr; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-fieldset {
  border: none;
  margin-bottom: var(--sp-6);
  padding: 0;
}
.form-fieldset legend {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-700);
  margin-bottom: var(--sp-4);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gray-300);
  width: 100%;
  display: block;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.field label {
  font-size: 0.82rem;
  color: var(--gray-700);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.field label .req { color: var(--green-deep); margin-left: 0.15rem; }
.field input,
.field select,
.field textarea {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--font-body);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(21, 66, 106, 0.12);
}
.field textarea { min-height: 130px; resize: vertical; }

.field-file {
  background: var(--white);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.field-file:hover { border-color: var(--navy); }
.field-file input { display: none; }
.field-file__label { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

.field-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.field-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--green-deep);
  flex-shrink: 0;
}
.field-check a { color: var(--navy); text-decoration: underline; }

.form-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--gray-300);
}
.form-submit__note { font-size: 0.82rem; color: var(--gray-500); }

/* ---------- 19. PAGE LAYOUTS ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-10);
  align-items: start;
}
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; gap: var(--sp-6); } }

.prose { max-width: 68ch; font-size: 1.04rem; line-height: 1.65; color: var(--ink-soft); }
.prose h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--navy-deep);
  margin: 2.5rem 0 1rem;
  font-weight: 420;
  letter-spacing: -0.01em;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy-deep);
  margin: 2rem 0 0.7rem;
  font-weight: 440;
}
.prose p { margin-bottom: 1.2rem; }
.prose ul { margin: 1rem 0 1.5rem 1.4rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1rem; margin-bottom: 0.5rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.6rem;
  width: 7px; height: 7px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Sticky page-side nav */
.side-nav {
  position: sticky;
  top: 100px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.side-nav__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-500);
  margin-bottom: 0.4rem;
}
.side-nav a {
  color: var(--gray-700);
  padding: 0.5rem 0;
  border-left: 2px solid var(--gray-200);
  padding-left: 1rem;
  transition: all var(--t-fast);
}
.side-nav a.is-active, .side-nav a:hover { color: var(--navy-deep); border-left-color: var(--green); }

/* ---------- 20. CARDS (services blocks) ---------- */
.service-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.service-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  align-items: center;
  transition: all var(--t-med) var(--ease-out);
  cursor: pointer;
}
.service-block:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}
.service-block__num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gray-500);
  font-weight: 360;
}
.service-block__content h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy-deep);
  margin-bottom: 0.3rem;
  font-weight: 440;
}
.service-block__content p { font-size: 0.92rem; color: var(--gray-700); line-height: 1.5; }
.service-block__arrow { color: var(--green); }

/* ---------- 21. FOOTER (base) ---------- */
.footer { background: var(--navy-darker); color: rgba(255,255,255,0.7); padding: var(--sp-12) 0 var(--sp-5); }
.footer__col-title { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--white); margin-bottom: var(--sp-4); }
.footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col a { color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: color var(--t-fast); }
.footer__col a:hover { color: var(--green); }
.footer__bottom { margin-top: var(--sp-5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); font-size: 0.82rem; color: rgba(255,255,255,0.55); padding-top: var(--sp-4); }
.footer__bottom-left { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer__bottom a { color: rgba(255,255,255,0.7); }
.footer__bottom a:hover { color: var(--white); }
.footer__noox { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.78rem; }
.footer__noox a { font-weight: 600; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; }

/* ---------- 22. ANIMATION ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Progressive enhancement: .reveal is visible by default. Only the
   .js-enhanced class (set by an inline script in <head> before paint)
   activates the hide-then-fade-in behaviour. If JS is blocked or fails,
   content stays visible — no blank page. */
.reveal { opacity: 1; }
.js-enhanced .reveal { opacity: 0; }
.js-enhanced .reveal.is-visible { animation: fadeUp 800ms var(--ease-out) both; }
.js-enhanced .reveal[data-delay="1"].is-visible { animation-delay: 100ms; }
.js-enhanced .reveal[data-delay="2"].is-visible { animation-delay: 200ms; }
.js-enhanced .reveal[data-delay="3"].is-visible { animation-delay: 300ms; }
.js-enhanced .reveal[data-delay="4"].is-visible { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .js-enhanced .reveal { opacity: 1; }
}

/* ---------- 23. ACCESSIBILITY ---------- */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--navy-deep);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  z-index: 200;
}
.skip-link:focus { top: 1rem; }

/* ---------- 24. FEATURE IMAGE STRIP ---------- */
.feature-strip {
  position: relative;
  height: clamp(360px, 50vw, 560px);
  overflow: hidden;
  background: var(--navy-deep);
}
.feature-strip__photo,
.feature-strip__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-strip__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8, 28, 48, 0.78) 0%, rgba(8, 28, 48, 0.4) 50%, rgba(8, 28, 48, 0.65) 100%);
}
.feature-strip__content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
}
.feature-strip__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 360;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: 1.5rem;
}
.feature-strip__title em { font-style: italic; color: rgba(255,255,255,0.7); font-weight: 320; }
.feature-strip__sub {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.85);
  max-width: 52ch;
  line-height: 1.55;
  margin-bottom: 2rem;
}

/* ---------- 25. PILLAR ICONS (small SVG bubbles) ---------- */
.pillar__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.pillar__icon svg { width: 20px; height: 20px; }
.pillar:hover .pillar__icon { background: var(--green); color: var(--white); }

/* ---------- 26. SUSTAIN PHOTO ---------- */
.sustain__visual {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5/4;
  background: rgba(255,255,255,0.06);
}
.sustain__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sustain__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(45, 144, 56, 0.3) 100%);
}

/* ---------- 27. PROJECT GALLERY (projects.html) ---------- */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
}
.project-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: all var(--t-med) var(--ease-out);
  cursor: pointer;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.project-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
  position: relative;
}
.project-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(8, 28, 48, 0.65);
  backdrop-filter: blur(8px);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
}
.project-card__body { padding: 1.4rem 1.4rem 1.6rem; flex-grow: 1; display: flex; flex-direction: column; }
.project-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 440;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.project-card__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gray-500);
  letter-spacing: 0.04em;
  margin-bottom: 0.85rem;
}
.project-card__desc { font-size: 0.92rem; color: var(--gray-700); line-height: 1.5; margin-bottom: 1rem; flex-grow: 1; }
.project-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gray-500);
  padding-top: 0.85rem;
  border-top: 1px solid var(--gray-200);
}
.project-card__footer .arrow { color: var(--green); }

/* ---------- 28. FILTER BAR (projects, news) ---------- */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.85rem 0;
  margin-bottom: var(--sp-6);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.filter-bar__item {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.filter-bar__item:hover { color: var(--navy-deep); }
.filter-bar__item.is-active { background: var(--navy-deep); color: var(--white); }

/* ---------- 29. ARTICLE / NEWS CARDS ---------- */
.featured-article {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
  background: var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-8);
}
.featured-article__media {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.featured-article__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-article__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-article__category {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-link);
  margin-bottom: 1rem;
}
.featured-article__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  color: var(--navy-deep);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.featured-article__excerpt { font-size: 1rem; color: var(--gray-700); line-height: 1.55; margin-bottom: 1.5rem; }
.featured-article__meta { font-size: 0.85rem; color: var(--gray-500); }
@media (max-width: 880px) {
  .featured-article { grid-template-columns: 1fr; }
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-5);
}
.article-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--t-med) var(--ease-out);
}
.article-card:hover { transform: translateY(-3px); }
.article-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  background: var(--cream);
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__category {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-link);
  margin-bottom: 0.5rem;
}
.article-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 440;
  color: var(--navy-deep);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: 0.5rem;
  transition: color var(--t-fast);
}
.article-card:hover .article-card__title { color: var(--green-deep); }
.article-card__meta { font-size: 0.82rem; color: var(--gray-500); margin-top: auto; }

/* ---------- 30. INDUSTRY DEEP-DIVE CARDS (industries.html) ---------- */
.industry-deep {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--gray-200);
  align-items: center;
}
.industry-deep:last-child { border-bottom: none; }
.industry-deep__media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream);
}
.industry-deep__media img { width: 100%; height: 100%; object-fit: cover; }
.industry-deep:nth-child(even) .industry-deep__media { order: 2; }
.industry-deep__num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--green);
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 380;
}
.industry-deep h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.industry-deep p { font-size: 1rem; color: var(--gray-700); line-height: 1.6; margin-bottom: 1rem; }
.industry-deep ul { display: flex; flex-direction: column; gap: 0.5rem; }
.industry-deep ul li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding-left: 1.2rem;
  position: relative;
}
.industry-deep ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 7px; height: 7px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media (max-width: 880px) {
  .industry-deep { grid-template-columns: 1fr; }
  .industry-deep:nth-child(even) .industry-deep__media { order: 0; }
}

/* ---------- 31. METRIC TILES (sustainability.html) ---------- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.metric-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1040px) { .metric-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .metric-grid--6 { grid-template-columns: repeat(2, 1fr); } }
.sdg-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
@media (max-width: 820px) { .sdg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .sdg-grid { grid-template-columns: repeat(3, 1fr); } }
/* Official UN SDG tile — number + caps title + white pictogram, fluid via container queries */
.sdg-tile {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  color: #fff;
  border-radius: 2px;
  padding: 9%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sdg-tile__head { display: flex; align-items: flex-start; gap: 4cqw; }
.sdg-tile__num {
  font-weight: 800;
  font-size: 29cqw;
  line-height: 0.78;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.sdg-tile__title {
  font-weight: 700;
  font-size: 9cqw;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  padding-top: 1.5cqw;
}
.sdg-tile__icon {
  width: 40cqw;
  height: auto;
  margin-top: auto;
  align-self: flex-start;
}
.metric-tile {
  background: var(--white);
  padding: 1.8rem 1.5rem;
}
.metric-tile .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 360;
  color: var(--navy-deep);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
  font-variation-settings: "SOFT" 50;
}
.metric-tile .label {
  font-size: 0.92rem;
  color: var(--gray-700);
  line-height: 1.45;
}
.metric-tile .badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--green-deep);
  margin-top: 0.6rem;
  text-transform: uppercase;
}

/* ---------- 32. LEGAL / PROSE PAGE LAYOUT ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}
.legal-layout .legal-prose,
.legal-layout .side-nav { min-width: 0; }
@media (max-width: 880px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .legal-layout .side-nav { position: static; margin-bottom: var(--sp-4); }
}

.legal-prose { max-width: 70ch; font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
.legal-prose h2 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--navy-deep);
  margin: 2.5rem 0 1rem;
  font-weight: 440;
  letter-spacing: -0.005em;
  scroll-margin-top: 100px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-deep);
  margin: 1.6rem 0 0.6rem;
}
.legal-prose p { margin-bottom: 1rem; }
.legal-prose ul, .legal-prose ol { margin: 0.8rem 0 1.2rem 1.4rem; }
.legal-prose ul li, .legal-prose ol li { margin-bottom: 0.4rem; }
.legal-prose ul li { list-style: none; position: relative; padding-left: 1rem; }
.legal-prose ul li::before {
  content: "";
  position: absolute;
  left: -0.4rem; top: 0.6rem;
  width: 6px; height: 6px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.legal-prose ol { list-style-position: outside; padding-left: 1rem; }
.legal-prose strong { color: var(--navy-deep); font-weight: 600; }
.legal-prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--green-deep); }
.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.legal-prose table th, .legal-prose table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.legal-prose table th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-700);
  background: var(--cream);
}
.legal-prose .legal-meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gray-500);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 2rem;
}

/* ==========================================================================
   33. MEGA MENU
   Dark sidebar + 3 columns of links. APIS-distinct treatment:
   - Navy sidebar with subtle green hex motif background
   - Fraunces italic headline (vs KST's sans-bold)
   - Green accent dividers and overview arrows
   - Horizontal dividers between items, generous spacing
   ========================================================================== */
.has-mega { position: static; }  /* parent <li> — mega panel is full-width */
.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 24px 60px -20px rgba(8, 28, 48, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              visibility 0s linear var(--t-fast);
  z-index: 90;
  overflow: hidden;  /* clip the sidebar */
}
.has-mega:hover > .mega-panel,
.has-mega:focus-within > .mega-panel,
.has-mega.is-open > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.has-mega > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 0.4em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform var(--t-fast);
}
.has-mega:hover > a::after,
.has-mega.is-open > a::after { transform: rotate(180deg); opacity: 1; }

.mega-panel__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  min-height: 380px;
}

/* ---- Dark sidebar ---- */
.mega-side {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 60%, var(--navy-darker) 100%);
  color: var(--white);
  padding: 2.4rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Hex pattern background motif (APIS-distinct, picks up green i-dot) */
.mega-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(62, 181, 74, 0.18), transparent 45%),
    radial-gradient(circle at 20% 90%, rgba(21, 66, 106, 0.6), transparent 50%);
  pointer-events: none;
}
/* Hex grid silhouette (very subtle) */
.mega-side::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0.04;
  pointer-events: none;
}
.mega-side > * { position: relative; z-index: 1; }

.mega-side__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.5rem;
}
.mega-side__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1rem;
  font-variation-settings: "SOFT" 30;
}
.mega-side__title em {
  font-style: italic;
  color: rgba(255,255,255,0.7);
  font-weight: 320;
}
.mega-side__lead {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.6rem;
}
.mega-side__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--white);
  border-bottom: 1px solid var(--green);
  padding-bottom: 0.4rem;
  transition: gap var(--t-fast), color var(--t-fast);
  align-self: flex-start;
}
.mega-side__cta:hover { gap: 0.7rem; color: var(--green); }

.mega-side__stats {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.mega-side__stat {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
}
.mega-side__stat strong {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1rem;
  font-weight: 460;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.3rem;
}

/* ---- Three columns of links ---- */
.mega-cols {
  display: contents;  /* let columns participate in parent grid */
}
.mega-col {
  padding: 2.4rem 1.6rem 2rem;
  border-left: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
}
.mega-col__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px solid var(--green);
}
.mega-col__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.mega-col__overview {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap var(--t-fast), color var(--t-fast);
}
.mega-col__overview:hover { gap: 0.55rem; color: var(--green-deep); }

.mega-col__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 440;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  line-height: 1.15;
}
.mega-col__title em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 380;
}

.mega-col ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-col ul li {
  border-bottom: 1px solid var(--gray-200);
}
.mega-col ul li:last-child { border-bottom: none; }
.mega-col ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  color: var(--gray-700);
  padding: 0.7rem 0;
  transition: color var(--t-fast), padding-left var(--t-fast);
  border-left: 2px solid transparent;
  padding-left: 0;
}
.mega-col ul li a:hover {
  color: var(--navy-deep);
  padding-left: 0.6rem;
  border-left-color: var(--green);
}
.mega-col ul li a .badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: rgba(62, 181, 74, 0.1);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-left: auto;
}

/* ---- Tablet: stack sidebar atop, columns wrap to 2 ---- */
@media (max-width: 1180px) {
  .mega-panel__inner {
    grid-template-columns: 280px 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .mega-side { grid-row: 1 / 3; }
  .mega-cols { display: contents; }
  .mega-col:nth-child(4) { grid-column: 2 / 4; border-top: 1px solid var(--gray-200); }
}
@media (max-width: 980px) {
  /* On mobile, mega panels are hidden — the drawer accordion handles it */
  .mega-panel,
  .mega-overlay,
  .has-mega > .mega-panel { display: none !important; }
  .has-mega > a::after { display: none; }
}

/* ==========================================================================
   33b. MOBILE DRAWER ACCORDION
   When mega-menu sections are present in the drawer, allow tap-to-expand
   ========================================================================== */
.drawer-group {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.drawer-group__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 380;
  letter-spacing: -0.01em;
  padding: 1rem 0;
  cursor: pointer;
  text-align: left;
}
.drawer-group__toggle .icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}
.drawer-group__toggle .icon::before,
.drawer-group__toggle .icon::after {
  content: "";
  position: absolute;
  background: var(--green);
  transition: transform var(--t-fast);
}
.drawer-group__toggle .icon::before {
  left: 4px; right: 4px; top: 50%; height: 2px; transform: translateY(-50%);
}
.drawer-group__toggle .icon::after {
  top: 4px; bottom: 4px; left: 50%; width: 2px; transform: translateX(-50%);
}
.drawer-group.is-open .drawer-group__toggle .icon::after { transform: translateX(-50%) rotate(90deg); }
.drawer-group__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-med) var(--ease-out);
}
.drawer-group.is-open .drawer-group__panel { max-height: 1200px; }
.drawer-group__panel-inner {
  padding-bottom: 0.85rem;
}
.drawer-group__subtitle {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  padding: 1rem 0 0.5rem;
}
.drawer-group__panel ul {
  display: flex;
  flex-direction: column;
}
.drawer-group__panel ul li a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.drawer-group__panel ul li a:hover { color: var(--white); }
.drawer-group__overview {
  display: block;
  padding: 0.6rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--green);
}
.drawer-group__overview:hover { color: var(--white); }

/* ==========================================================================
   34. SOCIAL MEDIA ICONS (footer)
   ========================================================================== */
.footer__social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  transition: all var(--t-fast) var(--ease-out);
}
.footer__social a:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}
.footer__social a svg { width: 18px; height: 18px; }

/* ==========================================================================
   35. DISCIPLINES PAGE
   Category groups with image cards
   ========================================================================== */
.discipline-group {
  margin-bottom: var(--sp-10);
}
.discipline-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: var(--sp-5);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--navy-deep);
}
.discipline-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
}
.discipline-group__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.discipline-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: all var(--t-med) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.discipline-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.discipline-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--cream);
  position: relative;
}
.discipline-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.discipline-card:hover .discipline-card__media img { transform: scale(1.05); }
.discipline-card__body {
  padding: 1.2rem 1.3rem 1.4rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.discipline-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 460;
  color: var(--navy-deep);
  letter-spacing: -0.005em;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}
.discipline-card__desc {
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.5;
  flex-grow: 1;
}
.discipline-card__arrow {
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--t-fast);
}
.discipline-card:hover .discipline-card__arrow { gap: 0.7rem; }

/* ==========================================================================
   36. THREE-COLUMN CONTENT (division detail pages)
   ========================================================================== */
.three-col-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.three-col-content ul { padding: 0; list-style: none; margin: 0; }
.serif-h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
@media (max-width: 980px) {
  .three-col-content { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ==========================================================================
   37. LEGAL PROSE LAYOUT (TOC sidebar + content)
   ========================================================================== */
.legal-prose-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-6);
  max-width: 1100px;
  margin: 0 auto;
}
.legal-toc {
  position: sticky;
  top: 100px;
  align-self: start;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--gray-300); }
.legal-toc ul li { margin: 0; }
.legal-toc ul li a {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gray-700);
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.legal-toc ul li a:hover {
  color: var(--navy-deep);
  border-left-color: var(--green);
}
.legal-prose { max-width: 70ch; }
.legal-prose p { font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 980px) {
  .legal-prose-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc ul { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; padding: 0.5rem 0; }
  .legal-toc ul li a { padding: 0.4rem 0.8rem; border: 1px solid var(--gray-300); border-radius: var(--radius-pill); }
  .legal-toc ul li a:hover { border-color: var(--green); }
}

/* ==========================================================================
   38. SITEMAP PAGE
   ========================================================================== */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.sitemap-list { list-style: none; padding: 0; margin: 0; }
.sitemap-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--gray-200); }
.sitemap-list li:last-child { border-bottom: 0; }
.sitemap-list a {
  font-size: 0.95rem;
  color: var(--gray-700);
  display: inline-block;
  transition: color var(--t-fast);
}
.sitemap-list a:hover { color: var(--green-deep); }
.sitemap-list--nested li ul { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem 0; }
.sitemap-list--nested li ul li { padding: 0.25rem 0; border: 0; }
.sitemap-list--nested li ul li a { font-size: 0.88rem; color: var(--gray-500); }
@media (max-width: 980px) {
  .sitemap-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ==========================================================================
   39. FOOTER CONTACT COLUMN (single email/phone + social under address)
   ========================================================================== */
.footer__col--contact .footer__address {
  font-style: normal;
  margin-bottom: 1.25rem;
}
.footer__col--contact .footer__address p {
  margin: 0 0 0.9rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray-300);
}
.footer__col--contact .footer__address strong {
  color: var(--white);
  font-weight: 500;
}
.footer__col--contact .footer__address a {
  color: var(--gray-300);
  transition: color var(--t-fast);
}
.footer__col--contact .footer__address a:hover {
  color: var(--green);
}
.footer__col--contact .footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.footer__col--contact .footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.footer__col--contact .footer__social a:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}
.footer__col--contact .footer__social svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   40. HOME PAGE IMAGE-CARD GRID (divisions + industries sections)
   ========================================================================== */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.home-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-fast);
  color: var(--ink);
}
.home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -10px rgba(15, 32, 56, 0.18);
  border-color: var(--green);
}
.home-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--gray-100);
}
.home-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.home-card:hover .home-card__media img {
  transform: scale(1.04);
}
.home-card__body {
  padding: 1.25rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.home-card__desc {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 1rem 0;
  flex: 1;
}
.home-card__arrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 500;
}
@media (max-width: 980px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 580px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER REBUILD (overrides earlier .footer rules)
   ========================================================================== */
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__brand img {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: var(--sp-4);
}
.footer__tagline {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  max-width: 32ch;
  margin: 0 0 var(--sp-4) 0;
}
.footer__address {
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0 0 var(--sp-4) 0;
}
.footer__address p { margin: 0 0 0.7rem 0; }
.footer__address strong { color: rgba(255,255,255,0.95); font-weight: 600; }
.footer__address a {
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer__address a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}
.footer__brand .footer__social {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-6); }
  .footer__brand { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 720px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ==========================================================================
   MEGA PANEL — SBU pills + corporate-functions note
   ========================================================================== */
.mega-panel__sbu-pills {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mega-panel__sbu-pills .sbu-pill {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
}
.mega-panel__sbu-pills .sbu-pill strong {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--green);
  background: rgba(43,168,74,0.12);
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 3.2rem;
  text-align: center;
}
.mega-panel__sbu-pills .sbu-pill span {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.85);
}
.mega-col__title--gap { margin-top: var(--sp-5); }
.mega-col__title--static {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--navy-deep);
  display: block;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--gray-200);
}
.mega-col__note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: var(--sp-3);
  font-style: italic;
}
.eyebrow--on-dark {
  color: rgba(255,255,255,0.85);
}

/* Ghost light button used in mobile drawer */
.btn-ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}

/* ==========================================================================
   MEGA MENU — open-state for our flat HTML structure (panel is sibling of nav)
   ========================================================================== */
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.mega-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 28, 48, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), visibility 0s linear var(--t-fast);
  z-index: 80;
  pointer-events: none;
}
.mega-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Drawer accordion — match JS behaviour (toggles .is-open on .drawer-group) */

/* ==========================================================================
   MOBILE RESPONSIVE — comprehensive (v3)
   ========================================================================== */

/* -- Drawer typography harmonisation -- */
.mobile-drawer ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-drawer > ul > li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-drawer > ul > li:last-child {
  border-bottom: none;
}
/* Standalone top-level links (Projects, Contact) */
.mobile-drawer > ul > li > a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 380;
  letter-spacing: -0.01em;
  padding: 1rem 0;
  color: var(--white);
  border-bottom: 0;
}
.mobile-drawer > ul > li > a:hover { color: var(--green); }
/* Group toggle (Solutions, Divisions, Industries, About) — same size as standalone links */
.mobile-drawer .drawer-group__toggle {
  font-size: 1.4rem;
}
/* Inside expanded panels: overview link should be smaller */
.mobile-drawer .drawer-group__overview {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.4rem 0 0.7rem;
}

/* -- Mobile breakpoints: collapse multi-col grids to single column -- */
@media (max-width: 720px) {
  /* Footer columns */
  .footer__top {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }
  .footer__brand { grid-column: auto !important; max-width: none !important; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .footer__bottom-left {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
}

@media (max-width: 640px) {
  /* Top bar — hide secondary links, keep only phone + lang */
  .top-bar__left a:nth-child(2),
  .top-bar__left a:nth-child(3) { display: none; }
  .top-bar__left { gap: 0; }
  
  /* Hero typography scales down */
  .hero h1, .hero-inner__title {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
  }

  /* Nav__cta — hide proposal button (request-an-offer is enough) */
  .nav__cta .btn-ghost-dark { display: none; }
}

@media (max-width: 600px) {
  /* All multi-col card grids → single column */
  .home-grid,
  .contact-cards,
  .industries,
  .industry-grid,
  .projects__grid,
  .division-grid,
  .feature-grid,
  .units-grid,
  .insights-grid,
  .news-grid,
  .grid,
  .cards-grid,
  .three-col,
  .two-col {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
  
  /* Contact form aside — full width */
  .contact-layout,
  .form-layout {
    grid-template-columns: 1fr !important;
  }
  .form-aside,
  .form-main {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Section headers — stack title/intro instead of side-by-side */
  .section-header {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3);
  }
  .section-header__intro { max-width: none !important; }

  /* CTA bands — stack content/CTA */
  .cta-band__inner,
  .cta-band__content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-4) !important;
  }
  .cta-band__buttons {
    flex-direction: column;
    width: 100%;
  }
  .cta-band__buttons .btn { width: 100%; justify-content: center; }
  
  /* Mega panel SBU pills (in case they leak in) */
  .mega-panel__sbu-pills { display: none; }
  
  /* Tables — horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Container padding on small screens — slightly less to maximise content width */
  .container {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
  
  /* Buttons — full width inside narrow containers when in stacks */
  .hero__cta .btn,
  .hero-inner__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* -- Horizontal scroll-snap for very dense grids (optional escape hatch) -- */
@media (max-width: 600px) {
  /* Project cards: keep them in a horizontal carousel rather than vertical stack
     when the user wants to browse many at once. Apply to any .scroll-x grid. */
  .scroll-x {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-3);
    padding: 0 1.1rem;
    margin: 0 -1.1rem;
  }
  .scroll-x > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* -- Tap target minimum on mobile -- */
@media (max-width: 720px) {
  .top-bar__lang button,
  .nav__burger,
  .footer__social a {
    min-width: 44px;
    min-height: 44px;
  }
}

/* -- Contact card phone link styling -- */
.contact-card__phone {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.contact-card__phone:hover { color: var(--green-deep); }

/* -- Mobile drawer: ensure body scroll lock + smooth height -- */
@media (max-width: 980px) {
  .mobile-drawer {
    /* top offset comes from --header-h; keep only side/bottom padding here */
    padding: 1.35rem 1.4rem calc(2rem + env(safe-area-inset-bottom, 0px));
  }
  .mobile-drawer__cta {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
}

/* Form responsive overflow fix: ensure deep grids shrink on mobile */
.form, .form-fieldset, .form-row, .field {
  min-width: 0;
}
.field input,
.field select,
.field textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile drawer toggle: ensure children never intercept touch events */
.drawer-group__toggle * {
  pointer-events: none;
}
.drawer-group__toggle {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ---------- 24. CONTACT SOCIAL ROW & MAP (v9) ---------- */
.contact-social__inner {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact-social__title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 380;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
  margin: 0.4rem 0 0;
  line-height: 1.1;
}
.contact-social__icons {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.contact-social__icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 84px;
  height: 84px;
  padding: 0.7rem 0.5rem;
  border-radius: 14px;
  background: #ffffff;
  color: var(--navy-deep);
  text-decoration: none;
  border: 1px solid rgba(15, 32, 56, 0.08);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.contact-social__icon span {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.contact-social__icon:hover, .contact-social__icon:focus-visible {
  background: var(--navy-deep);
  color: #ffffff;
  border-color: var(--navy-deep);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -16px rgba(15, 32, 56, 0.4);
}
@media (max-width: 720px) {
  .contact-social__icons { gap: 0.5rem; }
  .contact-social__icon { width: 72px; height: 72px; }
  .contact-social__icon span { font-size: 0.7rem; }
}

/* Map iframe — replaces the old map-pin placeholder */
.map-block { padding: 0; overflow: hidden; background: var(--cream); }
.map-block::before, .map-block::after, .map-pin, .map-pin__dot, .map-pin__label { display: none !important; }
.map-block iframe { display: block; width: 100%; min-height: 380px; }
.map-block .map-note { padding: 1rem 1.25rem; margin: 0; background: #fff; border-top: 1px solid rgba(15, 32, 56, 0.06); font-size: 0.92rem; color: var(--ink-soft); }
.map-block .map-note a { color: var(--green); font-weight: 600; text-decoration: none; }
.map-block .map-note a:hover { text-decoration: underline; }


/* ---------- 25. EXCELLENCE CENTRES — distinct treatment from divisions ---------- */
/* Excellence Centres are group functions, not operational divisions.
   Visually quieter, narrower grid, lighter card treatment. */
.discipline-grid--excellence {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
}
.discipline-grid--excellence .discipline-card {
  background: linear-gradient(180deg, #ffffff 0%, #F8FAF7 100%);
  border: 1px solid rgba(43, 168, 74, 0.12);
}
.discipline-grid--excellence .discipline-card:hover {
  border-color: rgba(43, 168, 74, 0.3);
  box-shadow: 0 16px 32px -20px rgba(43, 168, 74, 0.25);
}
.discipline-grid--excellence .discipline-card__media {
  aspect-ratio: 16 / 8;
}
.discipline-grid--excellence .discipline-card__title {
  color: var(--navy-deep);
}
.discipline-grid--excellence .discipline-card__arrow {
  color: var(--green);
}

/* ---------- 40. RESPONSIVE HARDENING (inline-styled additions) ---------- */
/* Guard against any stray horizontal overflow from wide inline elements */
/* overflow-x: clip prevents horizontal scroll WITHOUT creating a scroll
   container (unlike `hidden`), so the sticky header keeps working. */
html, body { overflow-x: clip; }

/* ---------- 41. LEGAL & COMPLIANCE HUB (legal.html) ---------- */
.legal-index { display: flex; flex-direction: column; gap: var(--sp-7, 4.5rem); }
.legal-index__group-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-500);
  margin-bottom: 1.4rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gray-200);
}
.legal-index__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.legal-index__card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 0.4rem);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--white);
  text-decoration: none;
  position: relative;
  transition: border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.legal-index__card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.legal-index__card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-serif, serif);
  font-size: 1.15rem;
  font-weight: 420;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.legal-index__card-title svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gray-400, #9aa0aa);
  transition: transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.legal-index__card:hover .legal-index__card-title svg {
  transform: translateX(4px);
  color: var(--navy);
}
.legal-index__card-desc {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft, #4a4f57);
}
@media (max-width: 760px) {
  .legal-index__grid { grid-template-columns: 1fr; }
}

/* Project gallery: drop the 320px min track so it never overflows narrow phones */
@media (max-width: 640px) {
  .project-gallery { grid-template-columns: 1fr !important; }
}

/* Inline two-col overrides (services / contact / news) — stack on tablet & below */
@media (max-width: 820px) {
  .two-col[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }
  .two-col[style*="grid-template-columns"] .side-nav {
    position: static !important;
  }
}

/* Foundation image + SDG-intro grid (sustainability) — comfortable single column on small phones */
@media (max-width: 600px) {
  #csr [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-5) !important;
  }
}


/* ---------- 42. PROJECT DETAIL PAGES + CLICKABLE CARDS ---------- */
.project-card { position: relative; }
.project-card__link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.project-card__link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.project-detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); align-items: start; }
.project-detail__media { grid-column: 1 / -1; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(8, 28, 48, 0.12); }
.project-detail__media img { width: 100%; height: auto; display: block; }
.project-detail__body h2 { font-size: 1.7rem; margin-bottom: 1rem; }
.project-detail__body p { color: var(--navy-deep); line-height: 1.75; font-size: 1.05rem; }
.project-detail__scope { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.project-detail__scope span { font-family: "Geist Mono", monospace; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); background: rgba(20, 66, 106, 0.07); padding: 0.42rem 0.72rem; border-radius: 6px; }
.project-facts { background: var(--navy-darker); color: var(--white); border-radius: 14px; padding: 1.8rem; position: sticky; top: 96px; }
.project-facts h3 { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 1.1rem; }
.project-facts dl { margin: 0; }
.project-facts dl > div { display: flex; flex-direction: column; gap: 0.22rem; padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.project-facts dl > div:first-child { border-top: 0; padding-top: 0; }
.project-facts dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.project-facts dd { margin: 0; font-size: 0.97rem; color: var(--white); }
.project-facts .btn { width: 100%; justify-content: center; margin-top: 1.6rem; }
@media (max-width: 820px) {
  .project-detail { grid-template-columns: 1fr; }
  .project-facts { position: static; }
}

/* ---------- 43. SOLUTION DETAIL PAGES ---------- */
.section-tint { background: var(--gray-50, #F4F6F8); }
.lifecycle-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.lifecycle-nav__item { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--white); border: 1px solid rgba(20,66,106,0.1); border-radius: 12px; text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.lifecycle-nav__item:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,28,48,0.1); }
.lifecycle-nav__letter { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: "Geist Mono", monospace; font-size: 1rem; font-weight: 500; }
.lifecycle-nav__label { font-weight: 500; color: var(--navy-deep); font-size: 1.02rem; }
.lifecycle-nav__arrow { margin-left: auto; color: var(--green); font-size: 1.1rem; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.lifecycle-nav__item:hover .lifecycle-nav__arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) { .lifecycle-nav { grid-template-columns: 1fr; } }

/* FAQ accordion (AEO / FAQPage) */
.faq{max-width:840px;margin:2.25rem auto 0;}
.faq__item{border-bottom:1px solid var(--gray-200,#e2e4e7);}
.faq__item summary{list-style:none;cursor:pointer;padding:1.15rem 0;font-weight:600;color:var(--navy-deep,#0A2E55);font-size:1.06rem;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1;color:var(--green,#22C74A);flex:0 0 auto;}
.faq__item[open] summary::after{content:"\2212";}
.faq__item > div{padding:0 0 1.25rem 0;color:var(--ink-soft,#4a5568);line-height:1.65;font-size:1rem;max-width:72ch;}



/* ---- Region & language selector ------------------------------------- */
.top-bar__loc-menu{min-width:290px;padding:6px 0}
.top-bar__loc-menu::before{
  content:attr(data-menu-title);display:block;padding:9px 16px 7px;margin-bottom:2px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:#8494a6;border-bottom:1px solid rgba(21,66,106,.10);
}
.top-bar__loc-menu button[data-loc-set]{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
}
.loc-langs{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.loc-lang{
  font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:4px;
  background:rgba(21,66,106,.09);color:#0A2E55;line-height:1.5;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.loc-lang:hover{background:#0A2E55;color:#fff}
.loc-lang.is-active{background:#0A2E55;color:#fff}
.loc-lang.is-soon{opacity:.35;cursor:default;background:rgba(21,66,106,.07)}
.loc-lang.is-soon:hover{background:rgba(21,66,106,.07);color:#0A2E55}
.loc-lang:focus-visible{outline:2px solid #22C74A;outline-offset:1px}
.loc-lang-sep{opacity:.22;font-size:9px}


/* ---- News cards without a destination -------------------------------
   These summarise articles that are not yet published. Removing the
   hover affordances stops them reading as clickable links. */
.article-card.is-static,
.featured-article.is-static { cursor: default; }
.article-card.is-static:hover { transform: none; }
.article-card.is-static:hover .article-card__media img { transform: none; }
.article-card.is-static:hover .article-card__title { color: inherit; }
.featured-article.is-static:hover { transform: none; }

.news-status{
  margin: 0 0 22px; padding: 11px 15px; border-radius: 8px;
  background: rgba(21,66,106,.05); border: 1px solid rgba(21,66,106,.10);
  font-size: 13.5px; color: #4A6987;
}
.news-status a{ color:#0A2E55; font-weight:600; text-decoration:underline; }
.news-status a:hover{ color:#2A6FDB; }


/* ---- Guides & eBooks: unlocked library ------------------------------ */
.guide-library{
  margin: 26px 0 8px; padding: 22px 24px; border-radius: 12px;
  background: #F4F6F9; border: 1px solid rgba(21,66,106,.12);
}
.guide-library[hidden]{ display:none !important; }
.guide-library__title{ margin:0 0 6px; font-size:19px; font-weight:700; color:#0A2E55; }
.guide-library__note{ margin:0 0 16px; font-size:13.5px; color:#4A6987; }
.guide-library__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.guide-library__item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 14px; background:#fff; border:1px solid rgba(21,66,106,.10); border-radius:8px;
}
.guide-library__link{ color:#0A2E55; font-weight:600; font-size:14.5px; text-decoration:none; }
.guide-library__link:hover{ color:#2A6FDB; text-decoration:underline; }
.guide-library__link:focus-visible{ outline:2px solid #22C74A; outline-offset:2px; }
.guide-library__fmt{
  flex-shrink:0; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  padding:3px 8px; border-radius:4px; background:rgba(21,66,106,.08); color:#0A2E55;
}
@media (max-width:600px){ .guide-library{ padding:18px 16px; } }

.guide-library__item.is-pending{ opacity:.62; }
.guide-library__name{ font-size:14.5px; color:#4A6987; font-weight:500; }
.guide-library__item.is-pending .guide-library__fmt{ background:rgba(21,66,106,.06); color:#7A8CA0; }


/* ---- Mobile drawer: keep the page behind locked while open ----------- */
body.drawer-open { overflow: hidden; touch-action: none; }
body.drawer-open .site-header { box-shadow: 0 2px 10px rgba(8,28,48,.16); }
/* First item must never sit flush against the header edge */
.mobile-drawer > *:first-child { margin-top: 0; }
.mobile-drawer ul:first-child > li:first-child > a,
.mobile-drawer .drawer-group:first-child .drawer-group__toggle { padding-top: 0.35rem; }


/* ---- Mobile drawer: CTA buttons must stay buttons -------------------
   The generic `.mobile-drawer a` rule sets display:block with no side
   padding, which stripped the centring and inner padding from the
   Request-an-offer button. Restore proper button behaviour. */
.mobile-drawer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* centres the label horizontally */
  text-align: center;
  width: 100%;
  padding: 0.95rem 1.5rem;
  border-bottom: none;       /* the generic link rule adds a divider */
  font-family: var(--font-display);
  line-height: 1.2;
}
.mobile-drawer .btn:hover { color: var(--white); }
.mobile-drawer .btn-primary:hover { color: var(--white); }


/* ---- Mobile drawer CTA buttons --------------------------------------
   `.mobile-drawer a` (0,1,1) outranks `.btn` (0,1,0), so drawer buttons
   were inheriting the 1.85rem Fraunces nav-link styling and display:block,
   which left-aligned the label. This rule (0,2,1) restores proper button
   styling: Geist UI font, centred label, full-width tap target. */
.mobile-drawer a.btn,
.mobile-drawer button.btn {
  display: flex;
  align-items: center;
  justify-content: center;   /* horizontal centring */
  text-align: center;
  width: 100%;
  min-height: 52px;          /* comfortable touch target */
  padding: 0.95rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border-bottom: 0;          /* cancel the nav-link divider */
  border-radius: var(--radius-pill);
}
.mobile-drawer a.btn:hover { color: #fff; }


/* ==== Cookie consent ================================================= */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#061C36; color:#fff;
  border-top:3px solid #22C74A;
  box-shadow:0 -6px 26px rgba(8,28,48,.28);
  padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px));
}
.cc-banner__inner{ max-width:1180px; margin:0 auto; display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.cc-banner__text{ flex:1 1 460px; min-width:280px; }
.cc-banner__title{ margin:0 0 5px; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.01em; }
.cc-banner__body{ margin:0; font-size:13.2px; line-height:1.55; color:rgba(255,255,255,.80); }
.cc-banner__body a{ color:#A6C2DB; text-decoration:underline; }
.cc-banner__body a:hover{ color:#fff; }
.cc-banner__actions{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

.cc-btn{
  font-family:var(--font-body); font-size:13.5px; font-weight:600; line-height:1;
  padding:12px 20px; min-height:44px; border-radius:var(--radius-pill);
  cursor:pointer; border:1px solid transparent; transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.cc-btn--solid{ background:#22C74A; color:#0A2E55; }
.cc-btn--solid:hover{ background:#149A38; color:#fff; }
/* Reject must read with the same weight as accept — not a de-emphasised link */
.cc-btn--plain{ background:#fff; color:#0A2E55; }
.cc-btn--plain:hover{ background:#E8EEF4; }
.cc-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.42); }
.cc-btn--ghost:hover{ background:rgba(255,255,255,.12); }
.cc-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.cc-modal{ position:fixed; inset:0; z-index:1001; background:rgba(8,28,48,.62);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cc-modal__panel{ background:#fff; color:#0A2E55; border-radius:14px; padding:26px;
  width:min(560px,100%); max-height:86vh; overflow-y:auto; box-shadow:0 24px 60px rgba(8,28,48,.35); }
.cc-modal__title{ margin:0 0 16px; font-family:var(--font-body); font-size:18px; font-weight:700; }
.cc-row{ padding:14px 0; border-top:1px solid rgba(21,66,106,.10); }
.cc-row:first-of-type{ border-top:0; }
.cc-row__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cc-row__name{ font-size:14.5px; font-weight:600; }
.cc-row__always{ font-size:11.5px; font-weight:600; color:#4A6987;
  background:rgba(21,66,106,.07); padding:4px 9px; border-radius:5px; }
.cc-row__desc{ margin:6px 0 0; font-size:13px; line-height:1.55; color:#4A6987; }
.cc-switch{ position:relative; display:inline-block; width:44px; height:25px; flex:0 0 auto; }
.cc-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0;
  cursor:pointer; z-index:1; }
.cc-switch span{ position:absolute; inset:0; background:#C6D0DA; border-radius:999px; transition:background .18s ease; }
.cc-switch span::before{ content:""; position:absolute; width:19px; height:19px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .18s ease; }
.cc-switch input:checked + span{ background:#22C74A; }
.cc-switch input:checked + span::before{ transform:translateX(19px); }
.cc-switch input:focus-visible + span{ outline:2px solid #0A2E55; outline-offset:2px; }
.cc-modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }
.cc-modal__actions .cc-btn--plain{ background:#EDF1F6; }
.cc-modal__link{ margin:14px 0 0; font-size:12.5px; }
.cc-modal__link a{ color:#0A2E55; text-decoration:underline; }

/* Click-to-load placeholder for third-party embeds */
.cc-embed{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:280px; padding:28px; text-align:center;
  background:#F4F6F9; border:1px dashed rgba(21,66,106,.24); border-radius:10px; }
.cc-embed__note{ margin:0; max-width:430px; font-size:13.2px; line-height:1.6; color:#4A6987; }
.cc-footer-link{ cursor:pointer; }

@media (max-width:760px){
  .cc-banner{ padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px)); max-height:80vh; overflow-y:auto; }
  .cc-banner__inner{ gap:14px; }
  .cc-banner__actions{ width:100%; }
  .cc-banner__actions .cc-btn{ flex:1 1 auto; }
  .cc-modal__panel{ padding:20px; }
}


/* ---- Guides & eBooks card grid --------------------------------------
   Previously an inline repeat(3,1fr), which media queries cannot override,
   so three columns were forced onto phones and the titles were clipped.
   Mobile-first: one card per row, widening with the viewport. */
.guides-grid{
  display:grid;
  grid-template-columns:1fr;      /* one card per screen on phones */
  gap:1.25rem;
  margin-top:2.5rem;
}
.guides-grid > article{ min-width:0; }              /* let content shrink, not overflow */
.guides-grid h2, .guides-grid h3{ overflow-wrap:anywhere; hyphens:auto; }

@media (min-width:640px){
  .guides-grid{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
}
@media (min-width:1000px){
  .guides-grid{ grid-template-columns:repeat(3,1fr); gap:1.6rem; }
}


/* ---- Guides: card artwork ------------------------------------------- */
.guide-card__media{ position:relative; padding:0 !important; display:block !important; }
/* Absolute fill rather than height:100% — the panel's height comes from
   aspect-ratio, against which a percentage height is unreliable. */
.guide-card__img{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Fallback: a guide added without artwork keeps the dark panel and its text,
   never a broken-image icon. */
.guide-card__media:empty{ background:var(--navy-deep); }
.guide-card__img[alt]{ color:transparent; font-size:0; }


/* ---- v1.3 accessibility guard ---------------------------------------
   The brand book recommends green-deep #149A38 for links on white, but its
   own contrast table rates that 3.68:1 — "Large / UI only", below the 4.5:1
   AA threshold for body-size text. --green-link is the same hue darkened to
   4.56:1 so small links stay compliant. Large UI elements keep #149A38. */
:root{ --green-link:#168130; }   /* AA on white (4.98) and on cream (4.60) */
a.link-green, .text-green-link{ color:var(--green-link); }


/* ---- Feature strip on small screens ---------------------------------
   The band used a fixed height (clamp 360–560px) with overflow:hidden.
   Translated copy runs longer than the English original — Albanian and
   German especially — so the heading and paragraph were being clipped at
   the top and bottom edges. On narrow screens the band now grows with its
   content, and the scrim is strengthened because the text sits over the
   busiest, brightest part of the photograph (hi-vis clothing).
   feature-strip: mobile */
@media (max-width: 860px){
  .feature-strip{
    height: auto;
    min-height: 380px;
    padding: 3.25rem 0;
  }
  .feature-strip__content{
    height: auto;
    align-items: flex-start;
  }
  .feature-strip__overlay{
    /* vertical scrim: strongest where the copy sits */
    background: linear-gradient(180deg,
      rgba(6,28,54,0.90) 0%,
      rgba(6,28,54,0.80) 45%,
      rgba(6,28,54,0.92) 100%);
  }
  .feature-strip__title{
    font-size: clamp(1.65rem, 6.4vw, 2.3rem);
    max-width: none;
    margin-bottom: 1.1rem;
  }
  .feature-strip__title em{ color: rgba(255,255,255,0.88); }
  .feature-strip__sub{
    color: rgba(255,255,255,0.94);
    max-width: none;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 480px){
  .feature-strip{ padding: 2.75rem 0; min-height: 340px; }
  .feature-strip__title{ font-size: clamp(1.5rem, 7vw, 2rem); }
}