/* ==========================================================================
   Biidaaban Renewable Energy
   Brand tokens are spec values from the official palette sheet.
   Email signatures have historically used #054692 — that is off-spec.
   ========================================================================== */

@font-face { font-family: Figtree; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/figtree-400.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/figtree-500.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/figtree-600.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/figtree-700.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/figtree-800.woff2) format('woff2'); }

:root {
  /* Brand — spec values, do not approximate */
  --biidaaban-blue:   #005496;
  --biidaaban-yellow: #FCAF17;
  --biidaaban-grey:   #8795A1;

  /* Derived surfaces */
  --blue-deep:  #003A69;
  --blue-ink:   #002744;
  --blue-night: #001B31;
  --blue-tint:  #EDF3F8;
  --blue-tint2: #DCE7F0;

  /* Data marks. Validated as a categorical pair against a white surface:
     chroma floor pass, CVD separation ΔE 22.2, normal-vision ΔE 22.0,
     both ≥3:1 contrast. Both segments are also directly labelled, so identity
     never rests on colour alone. */
  --seg-a: #005496;
  --seg-b: #3E9BD4;

  /* Text.
     --label is a darkened Biidaaban Grey. The spec grey (#8795A1) is 3.07:1 on
     white and fails WCAG AA as small label text, so it is reserved for non-text
     use and for the logo artwork itself. */
  --ink:      #0E1A24;
  --ink-mid:  #41545F;
  --ink-soft: #5B6C77;
  --label:    #626F7B;

  --paper:  #FFFFFF;
  --paper-2:#F5F7F9;
  --rule:   #DEE4EA;
  --rule-strong: #C3CDD6;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 52px);
  --section-y: clamp(76px, 9vw, 128px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 620ms;
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--biidaaban-blue);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.14; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:where(a, button, summary):focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--biidaaban-blue); color: #fff;
  padding: 12px 20px; font-weight: 600; font-size: .9rem;
  transition: top 180ms var(--ease-out);
}
.skip:focus { top: 16px; }

/* ----------------------------------------------------------- utilities -- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--paper-2); }

.kicker {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--label); margin: 0 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.kicker::before { content: ''; width: 26px; height: 3px; background: var(--biidaaban-yellow); flex: none; }
.kicker--onblue { color: rgba(255,255,255,.72); }

h2.h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); letter-spacing: -0.03em; max-width: 22ch; }
.sub { margin-top: 18px; color: var(--ink-mid); max-width: 62ch; font-size: clamp(1rem, 1.4vw, 1.12rem); }
.section--dark .sub { color: rgba(255,255,255,.78); }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --------------------------------------------------------------- reveal -- *
 * Hidden start states are gated behind .js, set by an inline script in <head>.
 * If that script never runs the page renders fully visible, not blank.
 * ------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, border-color 320ms ease;
}
.nav__inner { display: flex; align-items: center; gap: 26px; height: 76px; transition: height 320ms var(--ease-out); }
.nav.is-stuck, .nav.is-menu-open {
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--rule);
}
.nav.is-stuck .nav__inner { height: 66px; }

.nav__brand { display: block; margin-right: auto; padding-block: 8px; line-height: 0; }
.nav__brand img { height: 34px; width: auto; }
.nav__brand .on-light { display: none; }
.nav.is-stuck .on-dark, .nav.is-menu-open .on-dark { display: none; }
.nav.is-stuck .on-light, .nav.is-menu-open .on-light { display: block; }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; display: block; padding: 10px 14px;
  font-size: .92rem; font-weight: 500; text-decoration: none;
  color: rgba(255,255,255,.88); transition: color 220ms ease; white-space: nowrap;
}
.nav.is-stuck .nav__link { color: var(--ink-mid); }
.nav__link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--biidaaban-yellow); transform: scaleX(0); transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.nav__link:hover { color: #fff; }
.nav.is-stuck .nav__link:hover { color: var(--biidaaban-blue); }
.nav__link:hover::after, .nav__link[aria-current='true']::after { transform: scaleX(1); }
.nav__link[aria-current='true'] { color: #fff; font-weight: 600; }
.nav.is-stuck .nav__link[aria-current='true'] { color: var(--biidaaban-blue); }

.nav__cta {
  margin-left: 10px; padding: 11px 22px; font-size: .92rem; font-weight: 600;
  text-decoration: none; color: var(--blue-ink); background: var(--biidaaban-yellow);
  transition: background 220ms ease, transform 220ms var(--ease-out);
}
.nav__cta:hover { background: #FFC14A; transform: translateY(-1px); }

.nav__toggle { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: #fff; }
.nav.is-stuck .nav__toggle, .nav.is-menu-open .nav__toggle { color: var(--ink); }
.nav__toggle svg { width: 24px; height: 24px; margin-inline: auto; }
.nav__toggle .i-close { display: none; }
.nav__toggle[aria-expanded='true'] .i-close { display: block; }
.nav__toggle[aria-expanded='true'] .i-open { display: none; }

@media (max-width: 980px) {
  .nav__toggle { display: block; }
  /* Anchored to the bar, so it stays flush when the bar shrinks on scroll.
     Fade only — a transform here would shift it off that anchor. */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 220ms var(--ease-out), visibility 220ms;
    box-shadow: 0 24px 40px -24px rgba(0,39,68,.28);
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
  .nav__link { color: var(--ink) !important; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .nav__link::after { left: 0; right: auto; width: 26px; bottom: 8px; }
  .nav__cta { margin: 18px 0 0; text-align: center; }
}

/* ----------------------------------------------------------------- hero -- */
/* Copy is anchored to the bottom so the plant and harbour remain the visual
   subject. The poster holds the composition while the video loads, then the
   footage fades in without flashing or shifting the layout. */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--blue-night); color: #fff; isolation: isolate; overflow: hidden;
}
.hero__media,
.hero__poster,
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { z-index: -3; background: var(--blue-night); overflow: hidden; }
.hero__poster { display: block; }
.hero__poster img,
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
}
.hero__video {
  opacity: 0; transform: scale(1.012); transition: opacity 700ms ease;
  pointer-events: none;
}
.hero__video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* A light overall wash so the moving image still reads, plus a contrast
   pool anchored under the copy. A single heavy left-to-right ramp buries the
   berth and the water — this keeps the frame open and pays for legibility only
   where the type actually sits. No warm cast; the footage carries the colour. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    /* top band: buys the nav its contrast without touching the rest */
    linear-gradient(to bottom, rgba(0,20,37,.58) 0%, rgba(0,20,37,.22) 12%, rgba(0,20,37,0) 22%),
    /* left bias, so the headline holds against the brightest concrete */
    linear-gradient(100deg, rgba(0,27,49,.42) 0%, rgba(0,27,49,.20) 40%, rgba(0,27,49,0) 66%),
    /* the working scrim: dense under the copy, clear by mid-frame */
    linear-gradient(to top,
      rgba(0,20,37,.94) 0%, rgba(0,24,44,.82) 26%, rgba(0,31,56,.44) 50%,
      rgba(0,39,68,.16) 72%, rgba(0,39,68,.06) 100%);
}

/* 45° hairlines — the diagonal of the mark's diamond, at the threshold of
   visibility. Masked away from the right so it never sits on the plant. */
.hero__lattice {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.06) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 40%, transparent 62%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 40%, transparent 62%);
}

.hero__inner { padding-top: 132px; padding-bottom: 34px; position: relative; z-index: 1; }

/* The mark and wordmark are separate files so the pinwheel can carry the
   entrance on its own axis — the logo settles into place rather than fading. */
.hero__lockup {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(30px, 4vw, 44px);
}
.hero__mark { width: clamp(76px, 9.5vw, 124px); height: auto; }
.hero__word { width: clamp(206px, 26vw, 340px); height: auto; }

.js .hero__mark { animation: markIn 1200ms var(--ease-out) 120ms both; }
.js .hero__word { animation: wordIn 900ms var(--ease-out) 480ms both; }
@keyframes markIn {
  from { opacity: 0; transform: rotate(-90deg) scale(.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes wordIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

.hero__eyebrow {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.86); margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ''; width: 30px; height: 3px; margin-top: .72em;
  background: var(--biidaaban-yellow); flex: none;
}

.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 700;
  letter-spacing: -0.038em; line-height: 1.04; max-width: none;
}
.hero__headline-line { display: block; white-space: nowrap; }
.hero__stop { color: var(--biidaaban-yellow); }
@media (max-width: 700px) { .hero__headline-line { white-space: normal; } }
.hero__description {
  margin: clamp(20px, 2.5vw, 28px) 0 0; max-width: 76ch;
  font-size: clamp(.92rem, 1.25vw, 1.02rem); line-height: 1.62;
  color: rgba(255,255,255,.82);
}
.hero__actions { margin-top: clamp(30px, 3.6vw, 42px); display: flex; gap: 14px; flex-wrap: wrap; }

.js .hero__eyebrow { animation: riseIn 800ms var(--ease-out) 640ms both; }
.js .hero h1        { animation: riseIn 800ms var(--ease-out) 740ms both; }
.js .hero__description { animation: riseIn 800ms var(--ease-out) 820ms both; }
.js .hero__actions  { animation: riseIn 800ms var(--ease-out) 900ms both; }
.js .hero__meaning  { animation: riseIn 800ms var(--ease-out) 1020ms both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero__mark, .js .hero__word, .js .hero__eyebrow,
  .js .hero h1, .js .hero__description, .js .hero__actions,
  .js .hero__meaning { animation: none !important; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms var(--ease-out);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform 260ms var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn--solid { background: var(--biidaaban-yellow); color: var(--blue-ink); }
.btn--solid:hover { background: #FFC14A; }
.btn--ghost { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.hero__meaning {
  position: relative; z-index: 1; padding-bottom: clamp(26px, 4vw, 40px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: .86rem; color: rgba(255,255,255,.74);
}
.hero__meaning b { font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -0.01em; }
.hero__meaning .dash { width: 32px; height: 1px; background: rgba(255,255,255,.45); }

/* ------------------------------------------------------------ stat band -- */
.stats {
  position: relative; z-index: 2; margin-top: -1px;
  border-top: 1px solid var(--biidaaban-blue);
  background: var(--biidaaban-blue); color: #fff;
}
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: clamp(34px, 4vw, 50px) clamp(20px, 2.4vw, 30px); border-left: 1px solid rgba(255,255,255,.16); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n {
  font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1; color: var(--biidaaban-yellow); font-variant-numeric: tabular-nums;
}
/* margin-inline-start:0 kills the browser's default dd indent */
.stat__l { margin: 12px 0 0; font-size: .875rem; line-height: 1.45; color: rgba(255,255,255,.82); max-width: 24ch; }
@media (max-width: 700px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-inline: 0; }
  .stat + .stat { border-top: 1px solid rgba(255,255,255,.16); }
}

/* -------------------------------------------------------------- company -- */
.section--company { padding-bottom: 0; }
.company__intro { max-width: 80ch; }
.company-background {
  margin-top: clamp(32px, 4vw, 48px); padding: clamp(32px, 4vw, 48px) 0;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(38px, 6vw, 76px); align-items: start;
  border-top: 1px solid var(--rule-strong);
}
.company-background__copy { max-width: 68ch; }
.company-background__copy p {
  margin: 0; font-size: 1rem; color: var(--ink-mid); line-height: 1.72;
}
.company-background__copy p + p { margin-top: 1.1em; }
.name-story {
  position: relative; padding: clamp(26px, 3vw, 34px);
  border-top: 4px solid var(--biidaaban-yellow); background: var(--blue-tint);
}
.name-story__word {
  margin: 0; font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -.035em; color: var(--biidaaban-blue);
}
.name-story__pronunciation {
  margin: 4px 0 18px; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--label);
}
.name-story p:last-child { margin: 0; font-size: .92rem; line-height: 1.58; color: var(--ink-mid); }
@media (max-width: 840px) {
  .company-background { grid-template-columns: 1fr; gap: 30px; }
  .name-story { max-width: 62ch; }
}

.company-row {
  display: block; margin: 0; padding: clamp(36px, 4.8vw, 58px) 0;
  border-top: 1px solid var(--rule-strong);
}
.management-band {
  background: transparent; color: var(--ink);
}
.company-row.management-band { padding-bottom: clamp(24px, 3vw, 32px); }
.management-band__heading h3 {
  margin-top: 11px; max-width: none; font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  line-height: 1.2; color: var(--ink);
}
.management-band__body {
  margin-top: clamp(26px, 3.2vw, 36px); padding: 0; background: transparent;
}
.management-band__leaders {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 72px); align-items: stretch; position: relative;
}
.management-band__leaders::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--rule-strong); transform: translateX(-.5px);
}
.executive {
  display: grid; grid-template-columns: minmax(148px, .78fr) minmax(0, 1.22fr);
  gap: clamp(22px, 2.7vw, 30px); align-items: start; min-width: 0; padding: 0;
}
.executive__portrait {
  margin: 0; min-width: 0; background: var(--blue-tint);
  border-bottom: 4px solid var(--biidaaban-yellow); overflow: hidden;
}
.executive__portrait picture { display: block; }
.executive__portrait img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
.executive__copy { min-width: 0; padding-top: 4px; }
.executive__role {
  margin: 0 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--biidaaban-blue);
}
.executive h4 { margin: 0 0 12px; font-size: 1.3rem; color: var(--ink); }
.executive p:last-child,
.management-band__team { margin: 0; font-size: .94rem; line-height: 1.68; color: var(--ink-mid); }
.management-band__team-wrap {
  margin-top: clamp(28px, 3.5vw, 40px); padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule-strong); display: block;
}
.management-band__team a {
  color: var(--biidaaban-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.management-band__team a:hover { color: var(--blue-deep); }
@media (max-width: 900px) {
  .management-band__leaders { grid-template-columns: 1fr; gap: 0; }
  .management-band__leaders::after { display: none; }
  .executive { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
  .executive + .executive {
    margin-top: 32px; padding: 32px 0 0; border-top: 1px solid var(--rule-strong);
  }
}
@media (max-width: 620px) {
  .company-row { padding-block: 32px; }
  .executive { grid-template-columns: 1fr; gap: 22px; }
  .executive__portrait { width: min(100%, 320px); }
  .executive + .executive { margin-top: 28px; padding-top: 28px; }
}

.partners-heading {
  margin: 0; padding: 0;
}
.partners-heading h3 {
  margin-top: 11px; font-size: clamp(1.45rem, 2.5vw, 1.9rem); line-height: 1.22;
}
.partners-heading > p:last-child {
  margin: 16px 0 0; max-width: 76ch; color: var(--ink-mid); font-size: .96rem; line-height: 1.68;
}

.partner__role {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--biidaaban-blue);
}
.partners-grid {
  margin: clamp(28px, 3.5vw, 40px) 0 0; display: grid; grid-template-columns: 1fr; gap: 0;
}
.partner-card {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(30px, 4.5vw, 52px);
  align-items: center; padding: clamp(28px, 3.5vw, 38px) 0; border-top: 1px solid var(--rule);
}
.partner-card:first-child { padding-top: 0; border-top: 0; }
.partner-card:last-child { padding-bottom: 0; }
.partner-card__mark {
  min-height: 132px; padding: 22px; display: grid; place-items: center;
  border: 1px solid var(--rule); background: #fff;
}
.partner-card__mark img { width: 100%; max-width: 112px; height: auto; }
.partner-card__mark--mcbc {
  min-height: 0; padding: 0; align-content: center; justify-items: center; gap: 8px;
  border: 0; background: transparent;
}
.partner-card__mark--mcbc .partner-card__mcfn { max-width: 104px; }
.partner-card__mark--mcbc .partner-card__mcbc { max-width: 104px; }
.partner-card__mark--dark { background: #002E4F; border-color: #002E4F; }
.partner-card__mark--dark img { max-width: 138px; }
.partner-card > div:last-child { max-width: 88ch; }
.partner-card h3 { margin: 0 0 10px; font-size: 1.16rem; line-height: 1.34; }
.partner-card p:not(.partner__role) { margin: 0; color: var(--ink-mid); font-size: .94rem; line-height: 1.62; }
.partner-card p:not(.partner__role) + p { margin-top: .85em; }
@media (max-width: 640px) {
  .partner-card { grid-template-columns: 1fr; gap: 20px; }
  .partner-card__mark { min-height: 104px; }
  .partner-card__mark--mcbc {
    min-height: 0; grid-template-columns: repeat(2, minmax(0, 96px));
    justify-content: start; align-items: center; gap: 20px;
  }
  .partner-card__mark--mcbc .partner-card__mcfn,
  .partner-card__mark--mcbc .partner-card__mcbc { max-width: 96px; }
}

.land-acknowledgement {
  display: grid; grid-template-columns: minmax(220px, .66fr) minmax(0, 1.34fr);
  gap: clamp(38px, 6vw, 76px); align-items: start;
  padding: clamp(32px, 4vw, 46px); background: var(--blue-ink); color: #fff;
}
#facility .land-acknowledgement { margin-top: clamp(40px, 5vw, 64px); }
.land-acknowledgement .section-label { color: var(--biidaaban-yellow); }
.land-acknowledgement h3 {
  margin-top: 11px; max-width: 13ch; font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: #fff;
}
.land-acknowledgement p {
  margin: 0; max-width: 70ch; font-size: .96rem; line-height: 1.72; color: rgba(255,255,255,.82);
}
.land-acknowledgement a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 16px;
  color: #fff; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.land-acknowledgement a:hover { color: var(--biidaaban-yellow); }
.land-acknowledgement svg { width: 15px; height: 15px; transition: transform 220ms var(--ease-out); }
.land-acknowledgement a:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
  .land-acknowledgement { grid-template-columns: 1fr; gap: 22px; }
  .land-acknowledgement h3 { max-width: none; }
}
@media (max-width: 620px) { .land-acknowledgement { padding: 28px 24px 32px; } }

/* ------------------------------------------------------------- facility -- */
.shot { margin: clamp(36px, 4.5vw, 56px) 0 clamp(30px, 3.5vw, 44px); }
.shot img { width: 100%; height: auto; aspect-ratio: 1600 / 970; object-fit: cover; background: var(--blue-tint); }
.shot figcaption { margin-top: 12px; font-size: .84rem; color: var(--ink-soft); }

.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards--3 { grid-template-columns: 1fr; } }
.card { background: var(--paper); padding: 32px 30px 36px; transition: background 260ms ease; }
.card:hover { background: var(--blue-tint); }
.card__tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--biidaaban-blue); margin-bottom: 14px;
}
.card h3 { font-size: 1.15rem; margin-bottom: 10px; line-height: 1.3; }
.card p { font-size: .95rem; color: var(--ink-mid); line-height: 1.6; margin: 0; }

.supply-accordion {
  margin-top: clamp(36px, 4.5vw, 56px); display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.supply-accordion__column {
  min-width: 0; display: grid; align-content: start;
  gap: clamp(14px, 2vw, 20px);
}
.supply-toggle {
  border: 1px solid var(--rule); background: var(--paper-2);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
@media (hover: hover) {
  .supply-toggle:hover { background: var(--blue-tint); border-color: var(--rule-strong); }
}
.supply-toggle[open] {
  background: var(--paper); border-color: rgba(0, 84, 150, .44);
  box-shadow: inset 0 3px 0 var(--biidaaban-blue);
}
.supply-toggle summary {
  min-height: 86px; padding: 20px 22px; display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 18px; gap: 16px;
  align-items: center; cursor: pointer; list-style: none;
}
.supply-toggle summary::-webkit-details-marker { display: none; }
.supply-toggle summary:focus-visible { outline: 2px solid var(--biidaaban-yellow); outline-offset: 2px; }
.supply-toggle__tag {
  display: block; font-size: .69rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--biidaaban-blue);
}
.supply-toggle summary strong {
  display: block; font-size: 1rem; line-height: 1.35; color: var(--ink);
  transition: color 180ms ease;
}
.supply-toggle summary:hover strong { color: var(--biidaaban-blue); }
.supply-toggle__icon {
  justify-self: end; width: 9px; height: 9px;
  border-right: 2px solid var(--biidaaban-blue);
  border-bottom: 2px solid var(--biidaaban-blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms ease;
}
.supply-toggle[open] .supply-toggle__icon { transform: rotate(225deg) translate(-2px, -2px); }
.supply-toggle > p {
  margin: 0; padding: 0 56px 24px 142px; font-size: .9rem;
  color: var(--ink-mid); line-height: 1.62; max-width: none;
}
@media (max-width: 760px) {
  .supply-accordion { grid-template-columns: 1fr; gap: 14px; }
  .supply-accordion__column { display: contents; }
  .supply-toggle--product { order: 1; }
  .supply-toggle--compliance { order: 2; }
  .supply-toggle--carbon { order: 3; }
  .supply-toggle--structure { order: 4; }
  .supply-toggle--operations { order: 5; }
  .supply-toggle--domestic { order: 6; }
  .supply-toggle summary { padding: 18px; grid-template-columns: 104px minmax(0, 1fr) 18px; }
  .supply-toggle > p { padding: 0 48px 22px 138px; }
}
@media (max-width: 460px) {
  .supply-toggle summary { padding: 16px; grid-template-columns: 92px minmax(0, 1fr) 14px; gap: 12px; }
  .supply-toggle > p { padding: 0 42px 20px 120px; }
}

/* plant data panel */
.panel {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--paper); border: 1px solid var(--rule);
  padding: 0;
}
.panel__h {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--biidaaban-blue); margin: 0;
}
.panel__summary {
  padding: clamp(24px, 3vw, 32px) clamp(26px, 3.5vw, 42px);
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 18px;
  gap: 20px; align-items: center; cursor: pointer; list-style: none;
}
.panel__summary::-webkit-details-marker { display: none; }
.panel__summary:focus-visible { outline: 2px solid var(--biidaaban-yellow); outline-offset: -2px; }
.panel__summary strong { font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.plant-data__icon {
  justify-self: end; width: 9px; height: 9px;
  border-right: 2px solid var(--biidaaban-blue);
  border-bottom: 2px solid var(--biidaaban-blue);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms ease;
}
.plant-data[open] .plant-data__icon { transform: rotate(225deg) translate(-2px, -2px); }
.plant-data[open] .panel__summary { border-bottom: 1px solid var(--rule); }
.panel__grid {
  margin: clamp(28px, 3vw, 36px) clamp(26px, 3.5vw, 42px) clamp(30px, 3.5vw, 42px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
}
@media (max-width: 820px) { .panel__grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .panel__summary { grid-template-columns: 88px minmax(0, 1fr) 14px; gap: 14px; }
  .panel__summary strong { font-size: .96rem; }
  .panel__grid { grid-template-columns: 1fr; }
}
.metric { background: var(--paper); padding: 0 clamp(18px, 2vw, 26px); }
.metric:first-child { padding-left: 0; }
.metric:last-child { padding-right: 0; }
@media (max-width: 1000px) {
  .metric { padding: clamp(18px, 2vw, 26px); }
  .metric:first-child, .metric:last-child { padding-inline: clamp(18px, 2vw, 26px); }
}

.metric__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--label); margin: 0 0 12px;
}
/* sized so the longest value ("~170,000 L/day") holds one line in a third column */
.metric__value {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.05; color: var(--ink); margin: 0; text-wrap: nowrap;
}
.metric__unit { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); margin-left: 2px; }
.metric__note { margin: 14px 0 0; font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }

/* composition bars — 2px surface gap between fills, both segments labelled */
.bar { display: flex; gap: 2px; height: 10px; margin-top: 18px; }
.bar__seg { display: block; border-radius: 2px; }
.bar__seg--a { background: var(--seg-a); }
.bar__seg--b { background: var(--seg-b); }
.bar__key { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.bar__key li {
  display: flex; align-items: center; gap: 9px;
  font-size: .82rem; color: var(--ink-mid); font-variant-numeric: tabular-nums;
}
.key { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.key--a { background: var(--seg-a); }
.key--b { background: var(--seg-b); }

/* process sequence — a real ordered flow, not decoration */
.flow { margin-top: 18px; counter-reset: step; }
.flow li {
  position: relative; padding: 7px 0 7px 26px;
  font-size: .84rem; color: var(--ink-mid); line-height: 1.4;
  counter-increment: step;
}
.flow li::before {
  content: counter(step); position: absolute; left: 0; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue-tint); color: var(--biidaaban-blue);
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
}
.flow li:not(:last-child)::after {
  content: ''; position: absolute; left: 7.5px; top: 26px; bottom: -2px;
  width: 1px; background: var(--blue-tint2);
}

/* ----------------------------------------------------------- production -- */
.section-label {
  margin: 0; font-size: .71rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--biidaaban-blue);
}
/* One year of production, separated from the offering cards by open space. */
.figures {
  margin-top: clamp(36px, 4.5vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
}
.figure {
  background: var(--blue-tint); border-top: 3px solid var(--biidaaban-blue);
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.4vw, 30px) clamp(28px, 3.2vw, 36px);
  transition: background 260ms ease;
}
.figure:hover { background: var(--blue-tint2); }
.figure__n {
  margin: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 700; letter-spacing: -0.038em;
  line-height: 1; color: var(--biidaaban-blue);
}
.figure__u {
  font-size: .34em; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-mid); white-space: nowrap;
}
.figure__l { margin: 14px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-mid); }
@media (max-width: 860px) { .figures { grid-template-columns: 1fr; } }

.program-context h3 {
  margin-top: 11px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.25;
}
.program-context > p:last-child {
  margin: 11px 0 0; max-width: 64ch; color: var(--ink-mid); line-height: 1.68;
}
.program-context {
  margin-top: clamp(50px, 6.5vw, 82px); padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid var(--rule-strong);
}
.reg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 900px) { .reg { grid-template-columns: 1fr; } }
.reg > div {
  background: var(--paper); padding: 28px 26px 30px;
  display: flex; flex-direction: column;
}
.reg h4 { font-size: 1.02rem; margin-bottom: 10px; }
.reg .code { display: block; font-size: .71rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--biidaaban-blue); margin-bottom: 10px; }
.reg p { font-size: .92rem; color: var(--ink-mid); line-height: 1.58; margin: 0; }
.source-link {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 44px; margin-top: auto; padding-top: 14px;
  color: var(--biidaaban-blue); font-size: .84rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
.source-link:hover { color: var(--blue-deep); }
.program-note {
  margin: 16px 0 0; max-width: none; font-size: .8rem; line-height: 1.55;
  color: var(--ink-soft); font-style: italic;
}

/* --------------------------------------------------------------- policy -- */
.section--dark { background: linear-gradient(165deg, var(--blue-ink) 0%, var(--blue-deep) 100%); color: #fff; }
.section--dark h2.h2 { color: #fff; }
.pol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(38px, 4.5vw, 56px); }
@media (max-width: 900px) { .pol { grid-template-columns: 1fr; } }
.pol > div { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); padding: 30px 28px 34px; transition: border-color 250ms ease, background 250ms ease; }
.pol > div:hover { border-color: var(--biidaaban-yellow); background: rgba(255,255,255,.08); }
.pol h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--biidaaban-yellow); }
.pol p { font-size: .92rem; color: rgba(255,255,255,.8); line-height: 1.6; margin: 0; }

/* ----------------------------------------------------------------- news -- */
.section--restart {
  padding-block: clamp(58px, 7vw, 92px);
  background: var(--paper-2); border-top: 1px solid var(--rule);
}
.news {
  margin-top: clamp(32px, 4vw, 44px); display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(22px, 3.5vw, 40px);
  align-items: center; border: 1px solid var(--rule); padding: clamp(28px, 3.5vw, 38px);
  text-decoration: none; transition: border-color 250ms ease, background 250ms ease;
}
.news { background: var(--paper); }
.news:hover { border-color: var(--biidaaban-blue); background: var(--blue-tint); }
@media (max-width: 880px) { .news { grid-template-columns: 1fr; gap: 14px; align-items: start; } }
.news__source { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.news h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.32; }
.news p { margin: 10px 0 0; font-size: .93rem; color: var(--ink-mid); line-height: 1.6; }
.news__go { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; color: var(--biidaaban-blue); white-space: nowrap; }
.news__go svg { width: 15px; height: 15px; transition: transform 260ms var(--ease-out); }
.news:hover .news__go svg { transform: translateX(3px); }

/* -------------------------------------------------------------- careers -- */
.careers { background: var(--paper); border-top: 1px solid var(--rule); }
.careers__grid {
  display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 7vw, 88px); align-items: start;
}
.careers h2.h2 { max-width: 15ch; }
.careers__body { max-width: 68ch; }
.careers__body p { margin: 0; color: var(--ink-mid); line-height: 1.72; }
.careers__body p + p { margin-top: 1em; }
.careers__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  margin-top: 18px; color: var(--biidaaban-blue); font-size: 1.05rem;
  font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.careers__link:hover { color: var(--blue-deep); }
.careers__link svg { width: 15px; height: 15px; flex: none; transition: transform 220ms var(--ease-out); }
.careers__link:hover svg { transform: translateX(3px); }
@media (max-width: 820px) {
  .careers__grid { grid-template-columns: 1fr; gap: 28px; }
  .careers h2.h2 { max-width: 20ch; }
}

/* -------------------------------------------------------------- contact -- */
.contact { background: var(--blue-ink); color: #fff; }
.contact h2.h2 { color: #fff; }
/* .sub defaults to --ink-mid, which is close to unreadable on the dark ground */
.contact .sub { color: rgba(255,255,255,.82); }
.contact__panel {
  margin-top: clamp(38px, 4.5vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 48px);
  padding-top: clamp(30px, 3.5vw, 42px); border-top: 1px solid rgba(255,255,255,.22);
}
.contact__item { min-width: 0; }
@media (max-width: 900px) { .contact__panel { grid-template-columns: 1fr; gap: 30px; } }
.contact__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.58); margin: 0 0 6px;
}
.contact__address-link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.5;
  text-decoration: none;
}
.contact__address-link svg {
  width: 15px; height: 15px; flex: none; transition: transform 220ms var(--ease-out);
}
.contact__address-link:hover { color: var(--biidaaban-yellow); }
.contact__address-link:hover svg { transform: translateX(3px); }

/* Contact hit areas are padded to 44px. The rule is drawn by ::after so the
   padding does not push it away from the text. */
.mailto {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 600; padding: 13px 0;
  transition: color 220ms ease;
}
.mailto::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: rgba(255,255,255,.34); transition: background 220ms ease;
}
.mailto svg { width: 15px; height: 15px; flex: none; transition: transform 260ms var(--ease-out); }
.mailto:hover { color: var(--biidaaban-yellow); }
.mailto:hover::after { background: var(--biidaaban-yellow); }
.mailto:hover svg { transform: translateX(3px); }
.mailto--directory {
  max-width: 100%; font-size: clamp(.96rem, 1.45vw, 1.12rem);
  letter-spacing: -0.015em; overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- footer -- */
.footer { background: var(--paper); border-top: 1px solid var(--rule); padding-block: clamp(48px, 6vw, 72px); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo { width: 232px; height: auto; }
.footer__brand p { margin-top: 18px; font-size: .93rem; color: var(--ink-mid); max-width: 42ch; line-height: 1.6; }
.footer h3 { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 16px; }
.footer nav li + li { margin-top: 4px; }
.footer nav a {
  display: inline-block; padding: 10px 0; font-size: .93rem; color: var(--ink-mid);
  text-decoration: none; box-shadow: inset 0 -1px 0 transparent; transition: color 200ms ease, box-shadow 200ms ease;
}
.footer nav a:hover { color: var(--biidaaban-blue); box-shadow: inset 0 -1px 0 var(--biidaaban-blue); }

/* Optically matched, not mathematically: the crest is 4:3, the HOPA lockup 4:1. */
.footer__national-lockup { width: 243px; max-width: 100%; margin-top: 30px; }
.footer__marks { width: 100%; display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
.footer__marks img { height: 44px; width: auto; opacity: .85; }
.footer__marks .m-dark { background: #0E2947; padding: 12px 15px; height: 26px; box-sizing: content-box; opacity: 1; }
.footer__bottom {
  margin-top: clamp(34px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center;
}
/* Sentence case, not the old label caps — it is a tagline, and the comma reads
   as shouting in uppercase. */
.footer__tag { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; color: var(--biidaaban-blue); }
.footer__copy { font-size: .84rem; color: var(--ink-soft); }