/* ================= ESG PAGE (from 01.07.2026 Figma) ================= */
/* Fluid: scale the fixed 1440 design to fill the viewport edge-to-edge */
.esg-scale{ width:1440px; margin:0 auto; zoom:calc(100vw / 1440px); }
.esg-page{ font-family:"Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Inter,Arial,sans-serif; background:#f2f2f2; }
/* Past the 16" cap the light content is centred; make the body match so the side
   margins blend instead of showing the near-black default (matches the business
   pages). The hero is already full-bleed and covers its own margins. */
body.page-esg{ background:#f2f2f2; }
.esg-hero .ab-hero__title{ max-width:1010px; }
.esg-swipe{ position:absolute; right:60px; bottom:40px; z-index:1; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; font:18px/18px "Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif; text-align:center; }
.esg-swipe span{ display:block; width:21px; height:40px; margin:0 auto 9px; border:1px solid #fff; border-radius:10px; }
.esg-swipe span::before{ content:""; display:block; width:1px; height:15px; margin:22px auto 0; background:#fff; }
.esg-swipe b{ font-weight:400; }

/* Figma frame 9:8620 — shared ESG overview preceding every tab. */
.esg-overview{ position:relative; width:100%; height:624px; overflow:hidden; background:#f2f2f2; }
.esg-overview::after{ content:""; position:absolute; top:230px; left:50%; z-index:1; width:1440px; height:393px; transform:translateX(-50%); background:#074158; mix-blend-mode:lighten; pointer-events:none; }
.esg-overview p{ position:absolute; top:50px; left:50%; z-index:2; width:1108px; margin:0; transform:translateX(-50%); color:#000; font-size:24px; font-weight:400; line-height:32px; text-align:center; }
.esg-overview__diagram{ position:absolute; top:248px; left:50%; z-index:0; width:1295.678px; height:490.999px; max-width:none; transform:translateX(-50%); }

/* The 9:8620 framing is now pinned to the 1440 stage (.esg-scale zooms it);
   the former min-width:1441px vw rules evaluate to the base rule at 1440. */

/* Tabs — Figma frame 302 / 331 / 332 */
.esg-tabs{ position:relative; display:flex; align-items:flex-start; justify-content:center; height:100px; background:transparent; }
.esg-tabs::before{ content:""; position:absolute; inset:0; background:#93e4dd; pointer-events:none; }
.esg-tab{ position:relative; top:31px; height:39px; padding:0; border:0; background:none; color:#021c25; cursor:pointer; font-size:30px; font-weight:400; line-height:39px; }
.esg-tab[data-tab="environment"]{ width:186px; }
.esg-tab[data-tab="social"]{ width:86px; margin-left:200px; }
.esg-tab[data-tab="governance"]{ width:170px; margin-left:200px; }
.esg-tab + .esg-tab::before{ content:""; position:absolute; top:0; bottom:0; width:1px; background:rgba(2,28,37,.65); }
.esg-tab[data-tab="social"]::before{ left:-100px; }
.esg-tab[data-tab="governance"]::before{ left:-100px; }
.esg-tab.is-active{ font-weight:700; color:#074158; }
.esg-tab__underline{ position:absolute; bottom:0; height:4px; background:#074158; width:300px; left:calc(50% - 478px); transition:transform .25s ease; }

/* Panels */
.esg-panel{ display:none; width:100%; padding:100px 61px 100px; max-width:none; margin:0 auto; }
.esg-panel.is-active{ display:block; }
.esg-intro2{ display:grid; align-items:start; margin-bottom:40px; }
.esg-panel[data-panel="environment"] .esg-intro2{ grid-template-columns:409px 850px; gap:59px; }
.esg-panel[data-panel="social"] .esg-intro2{ grid-template-columns:424px 771px; gap:123px; }
.esg-panel[data-panel="governance"] .esg-intro2{ grid-template-columns:517px 771px; gap:30px; }
.esg-h2{ font-size:60px; font-weight:700; color:#000; margin:0; letter-spacing:-.01em; }
.esg-intro2 p{ margin:0; font-size:20px; line-height:1.5; color:#111; }
/* Each tab is a 1318x402 band clipping its photo, and every tab places its photo
   differently — they are hand-positioned in the design, not cover-fitted:
     environment 9:8915  1352x901  at (-34, -384)
     social      9:8918  1545x1030 at (-84, -107)
     governance  9:8921  1318x560  at (0,   -40)
   max-width:none because app.css caps img at 100% and would squeeze the over-sized photo
   back to the band's width; object-fit:cover keeps gov.jpg (1920x1286, aspect 1.493)
   from stretching in a box cut for 1.5. */
.esg-photo{ position:relative; height:402px; border-radius:18px; overflow:hidden; margin-bottom:56px; }
.esg-photo img{ position:absolute; max-width:none; display:block; object-fit:cover; }

@media (min-width: 768px) {
  .esg-panel[data-panel="environment"] .esg-photo img{ left:-34px; top:-384px; width:1352px; height:901px; }
  .esg-panel[data-panel="social"]      .esg-photo img{ left:-84px; top:-107px; width:1545px; height:1030px; }
  .esg-panel[data-panel="governance"]  .esg-photo img{ left:0;     top:-40px;  width:1318px; height:560px; }
}

/* Cards used by Social and Governance. */
.esg-cards{ display:grid; grid-template-columns:repeat(3,355px); justify-content:space-between; width:1295px; margin-left:-17px; }
.esg-card{ position:relative; box-sizing:border-box; min-height:409px; border:2px solid #074158; border-radius:52px; padding:70px 45px 34px; }
.esg-card__ic{ position:absolute; top:-42px; left:50%; transform:translateX(-50%); width:84px; height:84px; border-radius:50%;
  background:#074158; display:grid; place-items:center; }
.esg-card__ic img{ width:46px; height:46px; object-fit:contain; }
.esg-card__dot{ position:absolute; top:44px; right:-11px; width:22px; height:22px; border-radius:50%; background:#ff5f1a; }
.esg-card h3{ margin:0 0 20px; text-align:center; font-size:30px; font-weight:700; color:#074158; }
.esg-card ul{ margin:0; padding:0; list-style:none; }
.esg-card li{ font-size:18px; line-height:1.4; color:#111; margin-bottom:18px; }
.esg-card li:last-child{ margin-bottom:0; }

/* Environment cards — Figma vectors 9:9198 / 9:9204. */
.esg-panel[data-panel="environment"] .esg-cards{ grid-template-columns:repeat(3,355px); column-gap:124px; justify-content:start; width:1319px; margin:0; }
.esg-panel[data-panel="environment"] .esg-card{ height:377.906px; min-height:0; border:0; border-radius:0; padding:65px 46px 24px; }
.esg-panel[data-panel="environment"] .esg-card__outline{ position:absolute; inset:0; z-index:0; display:block; width:355px; height:377.906px; overflow:visible; fill:none; stroke:#074158; stroke-width:11; stroke-linejoin:round; stroke-linecap:butt; pointer-events:none; }
.esg-panel[data-panel="environment"] .esg-card h3,.esg-panel[data-panel="environment"] .esg-card ul{ position:relative; z-index:1; }
.esg-panel[data-panel="environment"] .esg-card__ic{ top:-30px; width:75px; height:75px; }
.esg-panel[data-panel="environment"] .esg-card__ic img{ width:42px; height:42px; }
.esg-panel[data-panel="environment"] .esg-card__dot{ z-index:2; width:41px; height:41px; }
.esg-panel[data-panel="environment"] .esg-card__dot--top{ top:121px; right:-21px; }
.esg-panel[data-panel="environment"] .esg-card__dot--bottom{ top:auto; right:auto; bottom:50px; left:-15px; }
.esg-panel[data-panel="environment"] .esg-card h3{ margin-bottom:22px; line-height:32px; }
.esg-panel[data-panel="environment"] .esg-card li{ line-height:26px; margin-bottom:26px; }

/* Social cards — Figma vectors 9:9199 / 9:9205. */
.esg-panel[data-panel="social"] .esg-cards{ position:relative; grid-template-columns:repeat(3,355px); column-gap:123.75px; justify-content:start; width:1319px; min-height:377.906px; margin:0; }
.esg-panel[data-panel="social"] .esg-social-outline{ position:absolute; top:0; z-index:0; display:block; height:auto; fill:#074158; pointer-events:none; }
.esg-panel[data-panel="social"] .esg-social-outline--left{ left:0; width:839px; height:377.42px; }
.esg-panel[data-panel="social"] .esg-social-outline--right{ left:478.458px; width:839.461px; height:377.906px; }
.esg-panel[data-panel="social"] .esg-card{ z-index:1; height:377.906px; min-height:0; border:0; border-radius:0; padding:65px 46px 24px; }
.esg-panel[data-panel="social"] .esg-card__ic{ top:-30px; width:75px; height:75px; }
.esg-panel[data-panel="social"] .esg-card__ic img{ width:42px; height:42px; }
.esg-panel[data-panel="social"] .esg-card__dot{ z-index:2; width:41px; height:41px; }
.esg-panel[data-panel="social"] .esg-card__dot--top{ top:121px; right:-21px; }
.esg-panel[data-panel="social"] .esg-card__dot--bottom{ top:auto; right:auto; bottom:50px; left:-15px; }
.esg-panel[data-panel="social"] .esg-card h3,.esg-panel[data-panel="social"] .esg-card ul{ position:relative; z-index:1; }
.esg-panel[data-panel="social"] .esg-card h3{ margin-bottom:22px; line-height:32px; }
.esg-panel[data-panel="social"] .esg-card li{ line-height:26px; margin-bottom:26px; }

/* Environment reuses the exact Social card outline composition. */
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape{ position:relative; min-height:377.906px; }
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-card__outline{ display:none; }
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-social-outline{ position:absolute; top:0; z-index:0; display:block; height:auto; fill:#074158; pointer-events:none; }
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-social-outline--left{ left:0; width:839px; height:377.42px; }
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-social-outline--right{ left:478.458px; width:839.461px; height:377.906px; }
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-card--cut h3{ margin-bottom:14px; }
.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-card li{ font-size:16px; line-height:23px; }

/* Safety focus grid — Figma group 350 / 9:9147, assembled from its SVG vectors. */
.esg-hazards{ position:relative; width:940px; height:418px; margin:60px auto 0; }
.esg-hazards__grid{ position:absolute; inset:0 auto auto 35px; width:850px; height:418px; }
.esg-hazard{ position:absolute; width:200px; margin:0; text-align:center; }
.esg-hazard img{ display:block; width:80px; height:80px; margin:0 auto; object-fit:contain; }
.esg-hazard h3{ margin:18px 0 0; color:#000; font-size:20px; font-weight:700; line-height:28px; white-space:nowrap; }
.esg-hazard--height{ top:43px; left:-15px; }
.esg-hazard--lifting{ top:43px; left:235px; }
.esg-hazard--molten{ top:43px; left:485px; }
.esg-hazard--confined{ top:43px; left:735px; }
.esg-hazard--isolation{ top:250px; left:110px; }
.esg-hazard--machine{ top:250px; left:360px; }
.esg-hazard--vehicle{ top:250px; left:610px; }

/* Reports and Policies (Governance tab) */
.rp{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(161.69006505684388deg, rgba(80, 121, 137, 0.2) 0%, rgba(7, 65, 88, 0.2) 100%);
  padding:60px 61px 80px;
}
.rp::before,.rp::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-13.97%;
  bottom:-16.69%;
  width:51.62%;
  opacity:.05;
  pointer-events:none;
  background:url("/dist/images/esg/reports-paperclip-pattern.svg") center/100% 100% no-repeat;
}
.rp::before{ left:3.1%; }
.rp::after{ right:-.48%; }
.rp__h{ text-align:center; margin:0 0 44px; }
.rp__body{ max-width:none; margin:0 auto; display:grid; grid-template-columns:230px 1fr; gap:40px; }
.rp__filter-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.rp__filter-head span{ font-size:20px; color:#111; }
.rp__clear{ border:1px solid #021c25; background:none; border-radius:999px; padding:4px 14px; font-size:14px; cursor:pointer; }
.rp__years{ list-style:none; margin:0; padding:0 0 0 4px; border-left:1px solid rgba(2,28,37,.4); }
.rp__years li{ font-size:24px; color:#4a5a62; padding:8px 0 8px 16px; cursor:pointer; }
.rp__years li.is-active{ color:#074158; font-weight:700; }
.rp__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rp-card{ background:#fff; border-radius:12px; padding:28px; display:flex; flex-direction:column; min-height:170px; box-shadow:0 6px 20px rgba(2,28,37,.06); }
.rp-card h4{ margin:0 0 auto; font-size:22px; font-weight:400; color:#1b4d8f; }
/* Keep the leading “Demerger” label bold at every viewport. */
.rp-card h4 strong{ font-weight:700; }
.rp-dl{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; border-radius:8px;
  background:#1b4d8f; color:#fff; font-size:16px; margin-top:24px; }
.rp-dl:hover{ background:#123a70; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (<768px) — real phone layout, desktop untouched above.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .esg-scale{ zoom:1 !important; width:auto; }

  /* hero (base .ab-hero phone rules come from about-page.css) */
  .esg-hero .ab-hero__title{ max-width:none; }
  .esg-swipe{ font-size:14px; }

  /* overview */
  .esg-overview{ height:auto; padding:32px 16px 0; }
  .esg-overview p{ position:static; width:auto; transform:none; font-size:16px; line-height:24px; }
  .esg-overview__diagram{ position:static; display:block; width:100%; height:auto; margin:28px auto 0; transform:none; }

  /* tabs — compact strip, active state shown by weight/colour */
  .esg-tabs{ height:64px; justify-content:space-around; padding:0 8px; }
  .esg-tab{ top:0; height:64px; width:auto !important; margin-left:0 !important; font-size:16px; line-height:24px; }
  .esg-tab + .esg-tab::before{ display:none; }
  .esg-tab__underline{ display:none; }

  /* panels */
  .esg-panel{ padding:36px 16px 36px; }
  .esg-intro2,.esg-panel[data-panel="environment"] .esg-intro2,.esg-panel[data-panel="social"] .esg-intro2,.esg-panel[data-panel="governance"] .esg-intro2{ grid-template-columns:1fr; gap:16px; }
  .esg-h2{ font-size:36px; }
  .esg-intro2 p{ font-size:16px; }
  /* the band's crop is placed for the 1440 stage; let the photo flow at phone width */
  .esg-photo{ margin-bottom:44px; height:auto; }
  .esg-photo img{ position:static; width:100%; height:auto; }

  /* cards — one column; the 839px-wide Figma outline vectors can't shrink,
     so hide them and restore the simple rounded border */
  .esg-cards,.esg-panel[data-panel="environment"] .esg-cards,.esg-panel[data-panel="social"] .esg-cards{ grid-template-columns:1fr; width:auto; margin:0; row-gap:56px; min-height:0; }
  .esg-social-outline,.esg-panel[data-panel="social"] .esg-social-outline,.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-social-outline{ display:none; }
  .esg-panel[data-panel="environment"] .esg-card__outline{ display:none; }
  .esg-card,.esg-panel[data-panel="environment"] .esg-card,.esg-panel[data-panel="social"] .esg-card{ height:auto; min-height:0; border:2px solid #074158; border-radius:42px; padding:60px 28px 28px; }
  /* drop the decorative orange dots on phones */
  .esg-card__dot{ display:none !important; }
  /* Keep every badge glyph the same visual size. waste.svg bakes its own circle into a
     75-unit viewBox (unlike the tight ~44-unit energy/water glyphs), so at 42px its glyph
     reads half-size — fill the 75px badge so its circle aligns and its glyph matches. */
  .esg-card__ic img[src*="waste"]{ width:75px !important; height:75px !important; }
  .esg-card h3{ font-size:24px; }
  .esg-card li,.esg-panel[data-panel="environment"] .esg-cards.esg-cards--social-shape .esg-card li{ font-size:16px; line-height:24px; margin-bottom:16px; }

  /* safety hazards — 2-column grid, hide the 850px connector artwork */
  .esg-hazards{ position:static; display:grid; width:auto; height:auto; margin:44px 0 48px; grid-template-columns:repeat(2,1fr); gap:28px 8px; }
  .esg-hazards__grid{ display:none; }
  .esg-hazard{ position:static; width:auto; }
  .esg-hazard img{ width:64px; height:64px; }
  .esg-hazard h3{ margin-top:10px; font-size:15px; line-height:20px; white-space:normal; }
  .esg-panel[data-panel="social"]{ padding-bottom:48px; }

  /* reports and policies — extra bottom padding so it doesn't butt against the footer */
  .rp{ padding:36px 16px 88px; }
  /* Keep the paperclip artwork proportional on the tall single-column reports list. */
  .rp::before,.rp::after{ background-size:cover; }
  .rp__body{ grid-template-columns:1fr; gap:24px; }
  .rp__years{ display:flex; gap:16px; border-left:0; padding-left:0; }
  .rp__years li{ padding:4px 0; font-size:20px; }
  .rp__grid{ grid-template-columns:1fr; gap:16px; }
}

/* ── Full-bleed hero past the 16" cap ───────────────────────────────────── */
@media (min-width: 1729px) {
    .esg-page { overflow: visible; }
    .esg-hero { width: var(--bleed-w); margin-left: var(--bleed-left); margin-right: 0; }
    .esg-tabs::before { left: var(--bleed-left); right: auto; width: var(--bleed-w); }
}