/* Magaya Mining brand layer — loaded last on every page so it overrides page styles.
   Source: Magaya Mining Brand Guidelines (fonts §5.4, colours §4).
   Fonts are bundled locally (SIL Open Font License, see fonts/OFL-LICENSE.txt). */

@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Archivo Black has one weight; map every bold request to it so browsers never fake-bold it */
@font-face{font-family:"Archivo Black";src:url("fonts/archivo-black-latin-400-normal.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url("fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url("fonts/ibm-plex-sans-condensed-latin-700-normal.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

/* Brand tokens. Yellow on black = #EDC817; yellow behind black text/logo = #EAC401; off-white #F9F9F9; black #000 / #040402 */
:root{
  --y:#EDC817; --y-light:#EAC401; --w:#F9F9F9; --b:#000; --b2:#040402;
  --muted:#d6d6d0; /* light text on black — replaces off-palette grey */
  --display-serious:"Archivo Black","Arial Black",Arial,sans-serif;
  --display-light:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  --display:var(--display-serious);
}
/* Headline font follows the tone of the page (set on <html data-tone>) */
html[data-tone="light"]{--display:var(--display-light)}
html[data-tone="serious"] :is(h1,h2,h3){letter-spacing:-.005em}
html[data-tone="light"] :is(h1,h2){font-weight:700}

body{font-family:"Poppins","Segoe UI",Arial,sans-serif}

/* Impact strip sits on yellow with black text: use the black-logo-on-white yellow */
.glance,.impact-strip{background:var(--y-light)}

/* ---------- Mobile navigation (added by assets/site.js) ---------- */
.nav-toggle{display:none}
@media (max-width:850px){
  .site-header{position:sticky;top:0}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;justify-self:end;margin-right:10px;padding:10px 12px;border:1px solid #000;background:transparent;color:#000;font:700 12px "Poppins","Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
  .nav-toggle:focus-visible{outline:3px solid var(--y-light);outline-offset:2px}
  .nav-toggle .bars{width:18px;height:12px;display:inline-block;background:linear-gradient(#000 0 0) 0 0/100% 2px no-repeat,linear-gradient(#000 0 0) 0 50%/100% 2px no-repeat,linear-gradient(#000 0 0) 0 100%/100% 2px no-repeat}
  .site-header.has-toggle{grid-template-columns:1fr auto auto!important}
  .site-header.nav-open .site-nav{display:flex!important;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--b2);padding:8px 0 16px;border-bottom:3px solid var(--y);font-size:14px;white-space:normal;max-height:calc(100vh - var(--head));overflow:auto;z-index:1001}
  .site-header.nav-open .site-nav>a,.site-header.nav-open .drop-trigger{display:block;width:100%;text-align:left;padding:14px 20px;color:var(--w);border-bottom:1px solid #ffffff1a}
  .site-header.nav-open .dropdown{position:static}
  .site-header.nav-open .drop-trigger{display:none}
  .site-header.nav-open .drop-menu{position:static!important;display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;background:transparent!important;border:0!important;padding:0!important;min-width:0!important;width:auto!important}
  .site-header.nav-open .drop-menu a{display:block;padding:14px 20px;color:var(--y)!important;border-bottom:1px solid #ffffff1a;background:transparent!important}
  .partner-nav{padding:10px 12px!important;font-size:11px!important}
}
@media (max-width:420px){.nav-toggle .label{display:none}}

/* ---------- Homepage on phones and small tablets ---------- */
@media (max-width:850px){
  #home.home-screen{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important}
  #home .hero-copy{position:relative!important;left:auto!important;top:auto!important;width:auto!important;padding:48px 20px 40px;z-index:2}
  #home .hero-copy h1{font-size:clamp(34px,10vw,56px)}
  #home .actions{flex-wrap:wrap;gap:10px}
  #home .glance{position:relative!important;margin-top:0!important;z-index:3}
  main{height:auto;overflow:visible}
  .ops-layout{height:auto!important}
  .map-card{height:clamp(340px,95vw,520px)!important;min-height:340px}
  .who-copy,.who-copy h2{max-width:100%;overflow-wrap:anywhere}
  .who-copy{width:auto!important;left:20px!important;right:20px!important}
  img,svg,video{max-width:100%}
}

/* ---------- Narrow phones ---------- */
@media (max-width:560px){
  .top-tier,.bottom-tier{grid-template-columns:1fr!important}
  .connect-grid{grid-template-columns:1fr!important}
  .person-info{min-width:0}
  .person-info h3,.person-info small{overflow-wrap:anywhere}
}
@media (max-width:850px){body{overflow-x:clip}}

/* Archivo Black runs wider than the old narrow face: keep long headlines clear of controls */
@media (min-width:851px){
  .ops-screen .section-head h2{font-size:clamp(28px,2.9vw,46px);padding-right:250px}
}
@media (max-width:850px){
  .site-header.nav-open .drop-menu a{font-size:14px;font-weight:800;text-transform:uppercase}
}

/* Light sections: brand off-white, and yellow never sits on white (brand guidelines §5.4 colour) */
.photos{background:var(--w)!important}
.photos .eyebrow,.photos .kicker,.photos small{color:#000!important}
.esg-categories article .eyebrow{color:#000!important}

/* Vision & Mission headline: one line at every width, clear of the statements below */
.vm-scene .section-head h2{font-size:clamp(17px,3.3vw,52px)!important;white-space:nowrap;line-height:1.1}

/* Operations figures: two columns side by side, label above figure */
.impact-strip .impact-sites{display:grid!important;grid-template-columns:1fr 1fr;gap:0;margin-top:8px}
.impact-strip .impact-sites>div{display:flex;flex-direction:column;gap:6px;padding:0 14px;min-width:0}
.impact-strip .impact-sites>div:first-child{padding-left:0;border-right:1px solid #0004}
.impact-strip .impact-sites span{font-size:9px;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.04em}
.impact-strip .impact-sites b{font-size:clamp(24px,2vw,36px)!important;line-height:1;min-width:0}
.impact-strip .impact-sites>div{justify-content:space-between}
/* Operations labels on one line */
.impact-strip .impact-sites span{white-space:nowrap;letter-spacing:.02em}
/* Phones: title across the top, then partnerships | employees, then operations full width so both labels fit at a readable size */
@media (max-width:850px){
  #home .impact-strip .glance-title{grid-column:1 / -1;min-height:0;border-right:0;border-bottom:1px solid #0003}
  #home .impact-strip>div:last-child{grid-column:1 / -1;border-right:0;border-top:1px solid #0003}
  .impact-strip .impact-sites>div{max-width:220px}
}

/* Homepage timeline pop-up: year label inside each card (it was clipped above), titles sized to fit narrow cards */
.journey-timeline .journey-year{top:10px!important;left:10px!important;height:auto!important;padding:4px 8px;background:#000;color:var(--y);font-size:13px}
.journey-timeline .journey-year i{display:none}
.journey-info h3{font-size:clamp(13px,1.1vw,17px)!important;line-height:1.15;overflow-wrap:normal}
.journey-timeline .journey-info{padding:14px}

/* Timeline: equal spacing between years (2023, 2024, 2025, 2026).
   The two 2025 milestones sit either side of the 2025 position, joined by a yellow band.
   Centres as % of the track: 2023 9, 2024 32.82, 2025 pair 56.64 / 67.17, 2026 91 — equal gaps 2023→2024→first 2025, and second 2025→2026. */
@media (min-width:851px){
  .timeline-track{display:block!important;position:relative}
  .timeline-track .milestone{position:absolute!important;top:0;bottom:0;width:20%;margin-left:-10%}
  .timeline-track .milestone:nth-child(1){left:9%}
  .timeline-track .milestone:nth-child(2){left:32.82%}
  .timeline-track .milestone:nth-child(3){left:56.64%}
  .timeline-track .milestone:nth-child(4){left:67.17%}
  .timeline-track .milestone:nth-child(5){left:91%}
  /* keep the first and last expanded cards inside the page */
  .timeline-track .milestone:nth-child(3):before{content:"";position:absolute;left:50%;width:52.65%;top:50%;height:8px;transform:translateY(-50%);background:var(--y);border-radius:4px;z-index:3;pointer-events:none}
}
@media (max-width:850px){
  .timeline-track .milestone:nth-child(3){padding-bottom:10px}
}
.journey-timeline{gap:16px!important}
.journey-timeline article:nth-child(4){margin-left:-12px}
/* 2023 Walden photo: keep the new tanks in view */
img[src*="timeline-2023-walden"]{object-position:50% 85%}
img[src*="timeline-2025-pickstone"]{object-position:50% 45%}
img[src*="timeline-2024-amatola"]{object-position:50% 50%}

/* Our Story: one-line heading, paragraph underneath, whole timeline on one laptop screen */
@media (min-width:1000px){
  .story{padding-top:18px!important;padding-bottom:8px!important;min-height:0!important}
  .story-head{max-width:none!important}
  .story-head h1{margin:4px 0 8px!important;font-size:clamp(30px,3vw,44px)!important;white-space:nowrap}
  .story-head h1 br{display:none}
  .story-head .story-intro{max-width:1180px!important;margin:0 0 6px!important;font-size:12.5px!important;line-height:1.5!important}
  .story-head .story-hint{font-size:10.5px!important;margin:0!important}
  .timeline-track{height:clamp(458px,calc(100vh - 262px),500px)!important;margin-top:4px!important}
}

/* Our Story: larger timeline photos and roomier expanded cards for longer paragraphs */
@media (min-width:851px){
  .timeline-track .story-card{width:min(235px,18.5vw)!important;height:168px!important}
  .timeline-track .milestone:nth-child(odd) .story-card{bottom:calc(50% + 52px)!important}
  .timeline-track .milestone:nth-child(even) .story-card{top:calc(50% + 52px)!important}
  .timeline-track .milestone:nth-child(odd) .stem{top:calc(50% - 52px)!important;height:52px!important}
  .timeline-track .milestone:nth-child(even) .stem{height:52px!important}
  /* the two 2025 cards lean apart so they clear each other's labels */
  .timeline-track .milestone:nth-child(3) .story-card{transform:translateX(calc(-50% - 95px))}
  .timeline-track .milestone:nth-child(4) .story-card{transform:translateX(calc(-50% + 95px))}
  /* Expanded card always covers the spot the photo sat in, so the cursor never falls off it (no flicker) */
  .timeline-track .story-card:is(:hover,:focus){width:min(430px,33vw)!important;height:340px!important}
  .timeline-track .milestone:nth-child(odd) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(172px)!important}
  .timeline-track .milestone:nth-child(even) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(-172px)!important}
  .timeline-track .milestone:nth-child(1) .story-card:is(:hover,:focus){transform:translateX(-117px) translateY(172px)!important}
  .timeline-track .milestone:nth-child(5) .story-card:is(:hover,:focus){transform:translateX(calc(-100% + 117px)) translateY(172px)!important}
  .timeline-track .story-detail{padding:60px 20px 18px!important;background:linear-gradient(transparent,#000c 22%,#000 45%)!important}
  .timeline-track .story-detail h2{font-size:22px!important}
  .timeline-track .story-detail p{font-size:12.5px!important;line-height:1.55!important}
}

/* The hidden caption text overflowed above resting photos and caught the mouse near the line: make it non-interactive */
.story-detail{pointer-events:none}

/* Corporate Governance: names and titles only until professional headshots are ready */
.leadership .person .avatar,.profile-card .avatar{display:none!important}
.leadership .person{grid-template-columns:1fr!important;cursor:default;text-align:center}
.leadership .person:hover{transform:none}
.leadership .person-info{padding:18px 16px!important;align-self:center}
.leadership .person small{font-size:10px!important;letter-spacing:.06em;line-height:1.45}
.profile-modal{display:none!important}

/* Phone: Who We Are slide 03 — feature cards flow under the copy instead of overlapping it */
@media(max-width:850px){
 /* Each slide grows to fit its text, so nothing scrolls inside the slide or slides under the figures strip */
 #who-we-are.who-screen{height:auto!important;min-height:calc(100vh - var(--head));overflow:hidden}
 #who-we-are .who-track{height:auto!important;align-items:stretch}
 #who-we-are .who-slide{height:auto!important;min-height:calc(100vh - var(--head));overflow:visible!important}
 #who-we-are .who-slide .who-copy{padding-bottom:84px}
 /* Arrows sit at the bottom beside the slide numbers instead of over the text */
 #who-we-are .edge-arrow{top:auto!important;bottom:14px;transform:none!important;width:44px;height:44px;font-size:20px}
 #who-we-are .who-prev{left:16px}
 #who-we-are .who-next{right:16px}
 .who-slide .feature-strip{position:relative!important;bottom:auto!important;margin:0 0 70px}
 .who-slide:is(.s3,.s4) .who-copy{padding-bottom:20px!important}
}
/* Phone: keep "Relationships" whole instead of breaking mid-word */
@media(max-width:560px){.who-slide.s4 .who-copy h2{overflow-wrap:normal!important;font-size:clamp(24px,7.4vw,34px)!important}}

/* Our Story on phones: photo on top, paragraph underneath (text no longer covers the photo), no sideways scroll */
@media(max-width:850px){
 .story{overflow-x:clip}
 .timeline-track .story-card,.timeline-track .story-card:is(:hover,:focus){height:auto!important;width:100%!important;overflow:hidden!important;transform:none!important}
 .timeline-track .story-card img{position:static!important;display:block;width:100%;height:190px;object-fit:cover}
 .timeline-track .story-detail{position:static!important;padding:14px 16px 16px!important;background:#000!important}
}

/* Our Model on phones: compact tap-to-open blocks, each with its number and title, and a yellow arrow pointing to the next step */
@media(max-width:850px){
 #our-model.model-screen:after{display:none}
 #our-model .model-sequence{display:flex!important;flex-direction:column;align-items:stretch!important;gap:34px;height:auto!important;padding:0 16px 32px}
 #our-model .model-stage{width:100%;align-self:stretch!important;box-sizing:border-box;height:auto!important;min-height:0;padding:15px 52px 15px 16px!important;border:0;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;overflow:visible;-webkit-tap-highlight-color:transparent}
 #our-model .model-stage:hover{height:auto!important;background:var(--y)}
 #our-model .model-stage b{grid-column:1;font-size:13px}
 #our-model .model-stage h3{grid-column:2;margin:0!important;font-size:17px;line-height:1.2}
 #our-model .model-stage .model-detail{grid-column:1 / -1;display:none;opacity:1}
 #our-model .model-stage.open .model-detail{display:block}
 #our-model .model-stage .model-detail h4{margin:14px 0 6px!important;font-size:15px}
 #our-model .model-stage:after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 26px/1 Arial,sans-serif}
 #our-model .model-stage.open:after{content:"\2212";top:14px;transform:none}
 #our-model .model-stage .step-arrow{top:auto!important;bottom:-31px!important;right:calc(50% - 10px)!important;color:var(--y);font-size:26px!important;transform:rotate(90deg)!important}
 #our-model .model-stage:focus-visible{outline:3px solid #fff;outline-offset:2px}
}

/* Vision & Mission and Strategic Goals on phones.
   One photo behind the whole section (no misaligned second copy), a black gradient that fades down from the top,
   and the dark see-through boxes kept, now as tap-to-open blocks like Our Model (no arrows, as these are not steps). */
@media(max-width:850px){
 #vision-mission.vm-screen{background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.76) 16%,rgba(0,0,0,.44) 45%,rgba(0,0,0,.26) 70%,rgba(0,0,0,.5) 100%),url('vision-bg.jpg') center/cover no-repeat!important;padding:0 0 32px!important}
 #vision-mission .vm-backdrop,#vision-mission .vm-tank-front{display:none!important}
 #vision-mission .vm-scene{height:auto!important;background:none!important;overflow:visible;padding:44px 16px 22px}
 #vision-mission .vm-scene .section-head{position:static!important;text-align:left;visibility:visible!important;animation:none!important;transform:none!important}
 #vision-mission .vm-scene .section-head .eyebrow{display:block;color:var(--y);margin-bottom:8px}
 #vision-mission .vm-scene .section-head h2{font-size:clamp(30px,8.5vw,40px)!important;margin:0!important;text-align:left;white-space:normal!important}
 #vision-mission .vm-grid{display:flex!important;flex-direction:column;gap:10px;background:none!important;padding:0 16px!important;margin:0!important;text-shadow:none!important}
 #vision-mission .goal-strip{display:flex!important;flex-direction:column;gap:10px;background:none!important;border:0!important;padding:0 16px!important;margin:0!important;width:auto!important;min-height:0!important}
 #vision-mission .strategy-title{display:block;background:none!important;color:var(--y)!important;border:0!important;padding:0!important;margin:26px 16px 10px!important}
 #vision-mission .vm-grid article,#vision-mission .goal-strip article{position:relative;width:100%;box-sizing:border-box;min-height:0!important;height:auto!important;margin:0!important;padding:15px 52px 15px 16px!important;background:rgba(0,0,0,.74)!important;color:#F9F9F9!important;border:1px solid rgba(255,255,255,.14)!important;border-left:3px solid var(--y)!important;box-shadow:none!important;transform:none!important;animation:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
 #vision-mission .vm-grid article .eyebrow,#vision-mission .goal-strip article h3{display:block;margin:0!important;padding:0!important;border:0!important;color:var(--y)!important;font-family:var(--display);font-size:16px!important;line-height:1.25!important;letter-spacing:.02em!important;text-transform:uppercase;font-weight:700}
 #vision-mission .vm-grid article p,#vision-mission .goal-strip article p{display:none;margin:10px 0 0!important;color:#F9F9F9!important;font-size:14px!important;line-height:1.55!important;opacity:1!important}
 #vision-mission .vm-grid article.open p,#vision-mission .goal-strip article.open p{display:block}
 #vision-mission .vm-grid article:after,#vision-mission .goal-strip article:after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 26px/1 Arial,sans-serif;color:var(--y)}
 #vision-mission .vm-grid article.open:after,#vision-mission .goal-strip article.open:after{content:"\2212";top:14px;transform:none}
 #vision-mission .vm-grid article:focus-visible,#vision-mission .goal-strip article:focus-visible{outline:3px solid #fff;outline-offset:2px}
 /* Strategic Goals: one solid box, goals separated by thin gold lines, each still taps open */
 #vision-mission .goal-strip{gap:0!important;margin:0 16px!important;padding:0!important;background:rgba(0,0,0,.74)!important;border:1px solid rgba(255,255,255,.14)!important;border-left:3px solid var(--y)!important}
 #vision-mission .goal-strip article{background:none!important;border:0!important}
 #vision-mission .goal-strip article+article{border-top:1px solid var(--y)!important}
}

/* Tablet only: heading at the top, Vision & Mission in the middle, a taller Strategic Goals box at the bottom */
@media(min-width:561px) and (max-width:850px){
 #vision-mission.vm-screen{display:flex!important;flex-direction:column;min-height:calc(100vh - var(--head))!important;padding-bottom:40px!important}
 #vision-mission .vm-scene{padding-top:clamp(64px,8vh,110px)!important;padding-bottom:0!important}
 #vision-mission .vm-scene .section-head h2{font-size:clamp(40px,5.6vw,47px)!important}
 #vision-mission .vm-grid{margin-top:auto!important;margin-bottom:auto!important;padding-top:28px!important;padding-bottom:28px!important}
 #vision-mission .strategy-title{margin-top:0!important}
 #vision-mission .goal-strip article{padding-top:22px!important;padding-bottom:22px!important}
}

/* Laptops and tablets held sideways: let these homepage sections grow when their content is taller than one screen,
   so nothing is cut off (Partner form button, figures strip, Strategic Goals text). Large screens look the same. */
@media(min-width:851px){
 #partner.partner-screen{height:auto!important;min-height:calc(100vh - var(--head));grid-template-rows:auto auto!important;row-gap:28px;overflow:visible!important;padding-bottom:48px!important}
 #home .glance{height:auto!important;min-height:122px}
 #vision-mission.vm-screen{height:auto!important;min-height:calc(100vh - var(--head));overflow:hidden}
 #vision-mission .goal-strip article{min-height:0}
}
/* Tablets held sideways and small laptops: Strategic Goals in two rows (4 + 3) so the longer goals are not cut off */
@media(min-width:851px) and (max-width:1199px){
 #vision-mission .goal-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;max-height:none!important}
 #vision-mission.vm-screen{grid-template-rows:minmax(190px,1fr) auto 36px auto!important}
 #vision-mission .goal-strip article{height:auto!important;max-height:none!important}
 #vision-mission .goal-strip article{overflow:visible!important;border-bottom:1px solid rgba(255,255,255,.12)}
}

/* Our Story timeline: 2011 to today, scrolling sideways on laptops (8 milestones).
   Overrides the earlier 5-milestone positions. Centres are in "slots" (one slot = the gap between years);
   the two 2025 milestones and the two 2026 milestones sit close together, joined by a gold band. */
@media(min-width:851px){
 .timeline-frame{position:relative;margin:0 -4vw;--slot:clamp(260px,23vw,320px)}
 .timeline-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#EDC81766 transparent;outline:none;padding:0 4vw}
 .timeline-scroll:focus-visible{outline:2px solid #EDC817;outline-offset:-2px}
 .timeline-scroll::-webkit-scrollbar{height:6px}
 .timeline-scroll::-webkit-scrollbar-thumb{background:#EDC81766;border-radius:3px}
 .timeline-scroll .timeline-track{width:calc(var(--slot) * 6.9);min-width:calc(var(--slot) * 6.9);margin-left:0!important;margin-right:0!important}
 .timeline-track .milestone{width:var(--slot)!important;margin-left:calc(var(--slot) / -2)!important}
 .timeline-track .milestone:nth-child(1){left:calc(var(--slot) * .5)!important}
 .timeline-track .milestone:nth-child(2){left:calc(var(--slot) * 1.5)!important}
 .timeline-track .milestone:nth-child(3){left:calc(var(--slot) * 2.5)!important}
 .timeline-track .milestone:nth-child(4){left:calc(var(--slot) * 3.5)!important}
 .timeline-track .milestone:nth-child(5){left:calc(var(--slot) * 4.5)!important}
 .timeline-track .milestone:nth-child(6){left:calc(var(--slot) * 4.94)!important}
 .timeline-track .milestone:nth-child(7){left:calc(var(--slot) * 5.94)!important}
 .timeline-track .milestone:nth-child(8){left:calc(var(--slot) * 6.38)!important}
 /* gold bands joining each close pair */
 .timeline-track .milestone:nth-child(3):before{content:none!important}
 .timeline-track .milestone:is(:nth-child(5),:nth-child(7)):before{content:"";position:absolute;left:50%;width:44%;top:50%;height:8px;transform:translateY(-50%);background:var(--y);border-radius:4px;z-index:3;pointer-events:none}
 /* cards in each pair lean apart; reset the old lean on 3 and 4 */
 .timeline-track .milestone:is(:nth-child(3),:nth-child(4)) .story-card{transform:translateX(-50%)}
 .timeline-track .milestone:is(:nth-child(5),:nth-child(7)) .story-card{transform:translateX(calc(-50% - 95px))}
 .timeline-track .milestone:is(:nth-child(6),:nth-child(8)) .story-card{transform:translateX(calc(-50% + 95px))}
 /* expanded cards: the old "last card" rule now belongs to card 8, which sits below the line */
 .timeline-track .milestone:nth-child(5) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(172px)!important}
 .timeline-track .milestone:nth-child(8) .story-card:is(:hover,:focus){transform:translateX(calc(-100% + 117px)) translateY(-172px)!important}
 .timeline-track .story-card:is(:hover,:focus){height:360px!important}
 .timeline-track .milestone:nth-child(odd) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(192px)!important}
 .timeline-track .milestone:nth-child(even) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(-192px)!important}
 .timeline-track .milestone:nth-child(1) .story-card:is(:hover,:focus){transform:translateX(-117px) translateY(192px)!important}
 .timeline-track .milestone:nth-child(5) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(192px)!important}
 .timeline-track .milestone:nth-child(8) .story-card:is(:hover,:focus){transform:translateX(calc(-100% + 117px)) translateY(-192px)!important}
 .timeline-track .story-detail p{font-size:12px!important;line-height:1.5!important}
 .timeline-track .time-label b{white-space:nowrap}
 /* arrow buttons at each end of the timeline */
 .timeline-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid #EDC817;background:#000c;color:#EDC817;font-size:20px;line-height:1;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
 .timeline-nav:hover:not(:disabled),.timeline-nav:focus-visible{background:#EDC817;color:#000}
 .timeline-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
 .timeline-nav:disabled{opacity:.25;cursor:default}
 .timeline-nav.prev{left:12px}
 .timeline-nav.next{right:12px}
 .timeline-nav[hidden]{display:none}
}
@media(prefers-reduced-motion:reduce){.timeline-scroll{scroll-behavior:auto}}
/* Our Story timeline: more room at the end so the last milestone (Carry Mine) is not squashed into the corner */
@media(min-width:851px){
 .timeline-scroll .timeline-track{width:calc(var(--slot) * 7.7)!important;min-width:calc(var(--slot) * 7.7)!important}
 .timeline-track .milestone:nth-child(6){left:calc(var(--slot) * 5.1)!important}
 .timeline-track .milestone:nth-child(7){left:calc(var(--slot) * 6.1)!important}
 .timeline-track .milestone:nth-child(8){left:calc(var(--slot) * 6.7)!important}
 .timeline-track .milestone:is(:nth-child(5),:nth-child(7)):before{width:60%!important}
 .timeline-track .milestone:nth-child(8) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(-192px)!important}
}

/* Vision & Mission on laptops and tablets held sideways: darker boxes, and a dark gradient from the left over the photo */
@media(min-width:851px){
 #vision-mission .vm-grid article,#vision-mission .goal-strip,#vision-mission .strategy-title{background-color:rgba(0,0,0,.8)!important}
 /* one gradient layer over the whole photo, including the front tanks, under the heading and boxes */
 /* the back photo had its own top shading that the front-tanks copy did not, which left hard edges round the tanks:
    remove it and put all the shading in this one layer over both copies */
 #vision-mission .vm-backdrop:after{display:none!important}
 #vision-mission.vm-screen:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 30%,transparent 55%),linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.52) 30%,rgba(0,0,0,.32) 58%,rgba(0,0,0,.14) 82%,rgba(0,0,0,.05) 100%)}
 #vision-mission .vm-scene .section-head{z-index:3}
}

/* "Follow us" social links (Contact page and homepage Connect section). Gold on black only. */
.social-follow{margin:28px 0 8px}
.social-follow h3{margin:0 0 12px;color:#EDC817;font-family:"Poppins","Segoe UI",Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.social-links{display:flex;flex-wrap:wrap;gap:10px}
.social-links a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:#000;border:1px solid rgba(237,200,23,.45);color:#F9F9F9;text-decoration:none;font-size:14px;font-weight:600;transition:border-color .2s,background .2s}
.social-links a svg{width:20px;height:20px;flex:none;color:#EDC817}
.social-links a:hover{border-color:#EDC817;background:#111}
.social-links a:focus-visible{outline:2px solid #EDC817;outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.connect-screen .social-connect{position:relative;z-index:3;margin-top:26px}
@media(max-width:560px){.social-links a{flex:1 1 100%;justify-content:flex-start}}
/* Vision & Mission heading: larger on laptops and tablets held sideways */
@media(min-width:851px){#vision-mission .vm-scene .section-head{left:0!important;right:0!important}#vision-mission .vm-scene .section-head h2{font-size:clamp(46px,5.6vw,92px)!important;white-space:nowrap;text-align:center;max-width:none!important;margin-left:auto!important;margin-right:auto!important}}
/* Phones: thin black lines between the three "What a partnership can look like" steps */
@media(max-width:850px){
 #partner .process>span{border-right:0!important;border-left:0!important}
 #partner .process>span+span{border-top:1px solid #000!important;padding-top:16px!important;margin-top:4px}
}
/* Tablets held upright: the homepage opening fills the whole screen (figures strip at the bottom),
   so the Who We Are section only appears after scrolling */
@media(min-width:561px) and (max-width:850px){
 #home.home-screen{min-height:calc(100vh - var(--head))!important;min-height:calc(100svh - var(--head))!important}
 #home .hero-copy{margin-top:0;margin-bottom:auto;padding-top:clamp(40px,6vh,72px)!important;padding-bottom:48px!important}
 #home .glance{margin-top:0!important}
}

/* Our Story timeline, 2021 to today (7 milestones). Overrides the earlier 8-milestone positions.
   Close pairs: 2025 (4 & 5) and 2026 (6 & 7), each joined by a gold band. */
@media(min-width:851px){
 .timeline-scroll .timeline-track{width:calc(var(--slot) * 6.7)!important;min-width:calc(var(--slot) * 6.7)!important}
 .timeline-track .milestone:nth-child(1){left:calc(var(--slot) * .5)!important}
 .timeline-track .milestone:nth-child(2){left:calc(var(--slot) * 1.5)!important}
 .timeline-track .milestone:nth-child(3){left:calc(var(--slot) * 2.5)!important}
 .timeline-track .milestone:nth-child(4){left:calc(var(--slot) * 3.5)!important}
 .timeline-track .milestone:nth-child(5){left:calc(var(--slot) * 4.1)!important}
 .timeline-track .milestone:nth-child(6){left:calc(var(--slot) * 5.1)!important}
 .timeline-track .milestone:nth-child(7){left:calc(var(--slot) * 5.7)!important}
 .timeline-track .milestone:nth-child(n):before{content:none!important}
 .timeline-track .milestone:is(:nth-child(4),:nth-child(6)):before{content:""!important;position:absolute;left:50%;width:60%!important;top:50%;height:8px;transform:translateY(-50%);background:var(--y);border-radius:4px;z-index:3;pointer-events:none}
 .timeline-track .milestone:nth-child(n) .story-card{transform:translateX(-50%)}
 .timeline-track .milestone:is(:nth-child(4),:nth-child(6)) .story-card{transform:translateX(calc(-50% - 60px))}
 .timeline-track .milestone:is(:nth-child(5),:nth-child(7)) .story-card{transform:translateX(calc(-50% + 60px))}
 .timeline-track .milestone:nth-child(odd) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(192px)!important}
 .timeline-track .milestone:nth-child(even) .story-card:is(:hover,:focus){transform:translateX(-50%) translateY(-192px)!important}
 .timeline-track .milestone:nth-child(1) .story-card:is(:hover,:focus){transform:translateX(-117px) translateY(192px)!important}
}
/* Who We Are, slide 02 (Our Story): larger yellow label; fit the longer four-paragraph story on laptops */
#who-we-are .who-slide.s2 .who-copy .eyebrow{font-size:clamp(13px,1.05vw,16px)!important;letter-spacing:.2em}
@media(min-width:851px){
 #who-we-are .who-slide.s2 .who-copy{padding-top:5vh!important;padding-bottom:9vh!important}
 #who-we-are .who-slide.s2 .who-copy h2{font-size:clamp(34px,3.6vw,58px)!important;margin-bottom:.35em!important}
 #who-we-are .who-slide.s2 .who-copy p{font-size:clamp(14px,1.15vw,18.5px)!important;line-height:1.55!important;margin:0 0 .75em!important;max-width:960px}
 #who-we-are .who-slide.s2 .who-copy .story-link{margin-top:clamp(18px,3.5vh,40px)!important}
}
@media(max-width:850px){#who-we-are .who-slide.s2 .who-copy p{font-size:16px!important;line-height:1.6!important}#who-we-are .who-slide.s2 .who-copy .story-link{margin-top:24px!important}}

/* Operations map: satellite sites as smaller off-white dots; key explains the two marker types */
.map-site-marker.satellite{width:18px;height:18px;background:#F9F9F9;border:3px solid #000;box-shadow:0 0 0 3px rgba(249,249,249,.55),0 4px 12px #0007;z-index:1}
.map-site-marker.satellite:focus-visible{outline:2px solid #EDC817;outline-offset:3px}
.map-key{flex-wrap:wrap}
.map-key i.sat{width:10px;height:10px;background:#F9F9F9;border:2px solid #000;box-shadow:0 0 0 1px #F9F9F9}
.map-key i:not(.sat){width:14px;height:14px;background:#EDC817;border:2px solid #000;box-shadow:0 0 0 2px #EDC81777}
.map-key i.sat{width:12px;height:12px}
@media(max-width:560px){.map-key{gap:8px 12px;padding:7px 9px}}
/* Satellite sites: black dot with a soft gold glow */
.map-site-marker.satellite{background:#000!important;border:2px solid #EDC817!important;box-shadow:0 0 0 3px rgba(237,200,23,.35),0 0 14px 4px rgba(237,200,23,.55)!important}
.map-key i.sat{background:#000!important;border:2px solid #EDC817!important;box-shadow:0 0 6px 2px rgba(237,200,23,.6)!important}
/* Satellite sites (final): small black dot, off-white edge, soft gold glow */
.map-site-marker.satellite{width:14px!important;height:14px!important;background:#000!important;border:0!important;box-shadow:0 0 0 3px #F9F9F9,0 0 12px 7px rgba(237,200,23,.5)!important}
.map-key i.sat{width:10px!important;height:10px!important;background:#000!important;border:0!important;box-shadow:0 0 0 2px #F9F9F9,0 0 7px 4px rgba(237,200,23,.6)!important}

/* Corporate Governance: five officers in the second row on laptops; centred rows on smaller screens */
@media(min-width:1100px){#directors .bottom-tier{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(min-width:561px) and (max-width:1099px){
 #directors .bottom-tier{display:flex!important;flex-wrap:wrap;justify-content:center}
 #directors .bottom-tier .person{flex:0 1 calc(33.333% - 12px)}
}
/* Corporate Governance: names line up across each row (text starts at the same height in every card) */
#directors .leadership .person{align-items:start!important;align-content:start!important}
#directors .leadership .person-info{align-self:start!important;padding-top:26px!important}
#directors .leadership .person-info h3{min-height:0;margin-bottom:8px!important}
#exploreOperation.is-hidden,#opImg.is-hidden{display:none!important}

/* Operations map: bigger map; main sites shown as small round site photos that grow on hover or tap */
@media(min-width:851px){
 #operations.ops-screen{height:auto!important;min-height:calc(100vh - var(--head))}
 #operations .section-head{height:auto!important;margin-bottom:18px}
 #operations .ops-layout{height:clamp(560px,calc(100vh - var(--head) - 190px),860px)!important;grid-template-columns:2.1fr .8fr!important}
}
@media(max-width:850px){#operations .map-card{height:clamp(420px,125vw,640px)!important}}
.map-site-marker.has-photo{width:46px;height:46px;padding:0;overflow:visible;background:#000;border:3px solid #EDC817;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 6px 16px #0008;transition:width .25s ease,height .25s ease,box-shadow .25s ease;z-index:3}
.map-site-marker.has-photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.map-site-marker.has-photo b{position:absolute;right:-7px;bottom:-7px;min-width:20px;height:20px;padding:0 3px;border-radius:10px;background:#EDC817;color:#000;border:2px solid #000;font-size:9px;line-height:16px;text-align:center}
.map-site-marker.has-photo span{bottom:auto!important;top:calc(100% + 8px);background:#000!important;border:1px solid #EDC817!important;color:#F9F9F9!important;font-weight:700}
.map-site-marker.has-photo:is(:hover,:focus-visible){width:124px;height:124px;z-index:20;box-shadow:0 0 0 4px rgba(237,200,23,.35),0 14px 30px #000a}
.map-site-marker.has-photo:is(:hover,:focus-visible) span{opacity:1}
.map-site-marker.has-photo:focus-visible{outline:2px solid #F9F9F9;outline-offset:3px}
@media(hover:none){.map-site-marker.has-photo.is-open{width:110px;height:110px;z-index:20}.map-site-marker.has-photo.is-open span{opacity:1}}
@media(prefers-reduced-motion:reduce){.map-site-marker.has-photo{transition:none}}

/* Satellite sites: name label beside the dot when hovered, focused or clicked/tapped */
.map-site-marker.satellite span{left:calc(100% + 8px)!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;padding:3px 7px!important;background:#000!important;border:1px solid rgba(237,200,23,.6)!important;color:#F9F9F9!important;font-size:10px!important;font-weight:700!important;letter-spacing:.02em}
.map-site-marker.satellite:is(:hover,:focus-visible,.is-open){z-index:25!important}
.map-site-marker.satellite:is(:hover,:focus-visible,.is-open) span{opacity:1!important;border-color:#EDC817!important}
/* Bigger invisible hover/tap area round each satellite dot (the dot itself stays small) */
.map-site-marker.satellite::before{content:"";position:absolute;inset:-14px;border-radius:50%}
/* Engineering & Innovation placeholder: two cards side by side on laptops */
@media(min-width:851px){.eng-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Our Story page: simple heading "Our story" with "How we started" underneath (no intro paragraph) */
.story-head-simple h1{color:#EDC817!important;font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,3.6vw,54px)!important;line-height:.95!important;margin:6px 0 8px!important;white-space:normal!important}
.story-head-simple .story-sub{margin:0!important;color:#F9F9F9;font-family:var(--display);text-transform:uppercase;font-weight:700;letter-spacing:.04em;font-size:clamp(15px,1.3vw,20px);line-height:1.1}
@media(min-width:1000px){.story-head-simple{margin-bottom:6px}.story-head-simple + .timeline-frame .timeline-track,.story .timeline-track{margin-top:10px!important}}
/* Our Story timeline: 6 milestones (2021 to 2026, Carry Mine removed) */
@media(min-width:851px){.timeline-scroll .timeline-track{width:calc(var(--slot) * 5.7)!important;min-width:calc(var(--slot) * 5.7)!important}
 .timeline-track .milestone:nth-child(6):before{content:none!important}
 .timeline-track .milestone:nth-child(6) .story-card{transform:translateX(-50%)}}
/* Connect section: three cards now (Engineering & Innovation removed) */
@media(min-width:851px){#connect .connect-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* Tablets (upright): Who We Are slides — larger heading and text to fill the slide */
@media(min-width:561px) and (max-width:850px){
 #who-we-are .who-copy{padding-top:56px!important}
 #who-we-are .who-copy .eyebrow{font-size:14px!important}
 #who-we-are .who-copy h2{font-size:clamp(46px,8.2vw,70px)!important;line-height:1!important;margin-bottom:.45em!important}
 #who-we-are .who-copy p,#who-we-are .who-slide.s2 .who-copy p{font-size:clamp(18px,2.6vw,23px)!important;line-height:1.6!important;margin-bottom:.9em!important}
 #who-we-are .who-copy .story-link{font-size:15px!important;padding:16px 24px!important}
 #who-we-are .feature-strip h3{font-size:19px!important}
 #who-we-are .feature-strip p{font-size:15px!important;line-height:1.5!important}
}
@media(min-width:561px) and (max-width:850px){
 #who-we-are .who-slide{display:flex!important;flex-direction:column;justify-content:center}
 #who-we-are .who-slide .who-copy{padding-bottom:40px!important}
 #who-we-are .who-slide .feature-strip{margin-bottom:84px!important}
}
@media(min-width:561px) and (max-width:850px){#who-we-are .who-slide.s2 .who-copy{padding-bottom:84px!important}}
/* Tablets (upright): slide 02 (Our Story) has the longest text — slightly smaller heading and paragraphs for breathing space */
@media(min-width:561px) and (max-width:850px){
 #who-we-are .who-slide.s2 .who-copy h2{font-size:clamp(38px,6.6vw,56px)!important}
 #who-we-are .who-slide.s2 .who-copy p{font-size:clamp(16px,2.25vw,19.5px)!important;line-height:1.6!important;margin-bottom:1em!important}
 #who-we-are .who-slide.s2 .who-copy .story-link{margin-top:28px!important}
}
/* Tablets and phones: the odd last box in "What makes us different" (Commercial Relationships) spans the full width */
@media(max-width:850px){#who-we-are .feature-strip.five article:last-child{grid-column:1 / -1}}
/* Tablets (upright): Our Model — content centred in the screen, blocks aligned with the text, larger type */
@media(min-width:561px) and (max-width:850px){
 #our-model.model-screen{display:flex!important;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--head))!important;padding:48px 0!important}
 #our-model .model-copy{width:auto!important;padding:0 6vw 36px!important}
 #our-model .model-copy h2{font-size:clamp(44px,7.4vw,62px)!important}
 #our-model .model-copy p{font-size:clamp(17px,2.4vw,21px)!important;line-height:1.6!important;max-width:none!important}
 #our-model .model-sequence{padding:0 6vw!important;gap:40px!important}
 #our-model .model-stage{padding:20px 60px 20px 22px!important}
 #our-model .model-stage b{font-size:15px!important}
 #our-model .model-stage h3{font-size:21px!important}
 #our-model .model-stage .step-arrow{bottom:-36px!important;font-size:28px!important}
 #our-model .model-stage .model-detail p{font-size:16px!important}
}

/* Phones: the whole opening (headline, buttons and figures strip) fits on one screen; same design, tighter spacing */
@media(max-width:560px){
 #home.home-screen{min-height:calc(100svh - var(--head))!important;height:calc(100svh - var(--head))!important;overflow:hidden}
 #home .hero-copy{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,3svh,40px) 20px clamp(14px,2.5svh,32px)!important}
 #home .hero-copy h1{font-size:clamp(28px,min(9.6vw,5.4svh),44px)!important;line-height:1!important;margin:0 0 .3em!important}
 #home .hero-copy>p{font-size:clamp(12.5px,min(3.7vw,2.05svh),16px)!important;line-height:1.5!important;margin:0!important}
 #home .actions{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;margin-top:clamp(12px,2.2svh,22px)!important}
 #home .actions a,#home .actions .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal;font-size:clamp(10px,2.8vw,12px)!important;padding:clamp(10px,1.6svh,14px) 8px!important;line-height:1.2}
 #home .glance{flex:none}
 #home .impact-strip .glance-title{padding:clamp(8px,1.4svh,14px) 16px!important}
 #home .impact-strip .glance-title h2{font-size:clamp(14px,2.1svh,18px)!important}
 #home .glance>div,#home .impact-strip .glance-item{padding:clamp(8px,1.4svh,14px) 16px!important}
 #home .glance-item h3{font-size:clamp(10px,1.45svh,12px)!important;margin:0 0 4px!important;line-height:1.2}
 #home .glance-item b{font-size:clamp(19px,3svh,26px)!important}
 #home .glance-item small{margin-top:3px!important;font-size:clamp(9px,1.25svh,11px)!important}
 #home .impact-strip .impact-sites{margin-top:4px!important}
 #home .impact-strip .impact-sites b{font-size:clamp(19px,3svh,26px)!important}
}
@media(max-width:560px){#home .glance,#home .glance>div,#home .impact-strip .glance-item{min-height:0!important;height:auto!important;grid-auto-rows:auto!important}#home .glance-item{justify-content:flex-start!important}}
/* Phones and tablets: Who We Are arrows and slide numbers stay visible at the bottom of the screen while reading a slide */
@media(max-width:850px){
 #who-we-are.nav-pinned .edge-arrow{position:fixed!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;z-index:60}
 #who-we-are.nav-pinned .dots{position:fixed!important;left:0;right:0;justify-content:center;bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;z-index:59;transform:none!important}
 #who-we-are .nav-backdrop{display:none}
 #who-we-are.nav-pinned::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(84px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.92) 45%);z-index:58;pointer-events:none}
}
/* Phones: more breathing room in the Who We Are slides, and the last line/button always clears the arrows */
@media(max-width:560px){
 #who-we-are .who-copy{padding-top:44px!important;padding-bottom:120px!important}
 #who-we-are .who-copy h2{margin-bottom:.55em!important}
 #who-we-are .who-copy p{font-size:15px!important;line-height:1.7!important;margin:0 0 1.1em!important}
 #who-we-are .who-copy .story-link{margin-top:22px!important}
 #who-we-are .who-slide .feature-strip{margin-bottom:110px!important}
}
/* Phones and tablets: each Who We Are slide keeps its own height; the section follows the slide on show */
@media(max-width:850px){
 #who-we-are .who-track{align-items:flex-start!important;transition:transform .95s cubic-bezier(.22,1,.36,1),height .4s ease}
 #who-we-are .who-slide{min-height:0!important}
}
@media(min-width:561px) and (max-width:850px){#who-we-are .who-slide{min-height:calc(100vh - var(--head))!important}}
/* Phones: slide 02 (Our Story) — smaller paragraphs so the timeline button shows with the text */
@media(max-width:560px){
 #who-we-are .who-slide.s2 .who-copy{padding-top:28px!important}
 #who-we-are .who-slide.s2 .who-copy h2{font-size:clamp(26px,8vw,32px)!important;margin-bottom:.45em!important}
 #who-we-are .who-slide.s2 .who-copy p{font-size:13px!important;line-height:1.55!important;margin:0 0 .8em!important}
 #who-we-are .who-slide.s2 .who-copy .story-link{margin-top:14px!important}
}
/* What makes us different: three boxes (Aggregated Processing Plants, Financing, Technical Support) */
.feature-strip.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:850px){#who-we-are .feature-strip.three{grid-template-columns:1fr 1fr!important}#who-we-are .feature-strip.three article:last-child{grid-column:1 / -1}}

/* Corporate Governance: director photo cards that open a larger profile on click */
#directors .leadership .person{display:grid!important;grid-template-columns:38% 1fr!important;align-items:stretch!important;text-align:left!important;cursor:pointer;transition:transform .2s,border-color .2s;min-height:150px}
#directors .leadership .person:hover,#directors .leadership .person:focus-visible{transform:translateY(-4px)!important;border-color:#EDC817}
#directors .leadership .person:focus-visible{outline:2px solid #EDC817;outline-offset:3px}
#directors .leadership .person .avatar{display:block!important;width:auto;height:auto;margin:0;border-radius:0;border:0;border-right:1px solid rgba(237,200,23,.35);background:#222;min-height:150px}
#directors .leadership .person .avatar:before,#directors .leadership .person .avatar:after,.profile-card .avatar:before,.profile-card .avatar:after{content:none!important}
#directors .leadership .person-info{align-self:center!important;padding:14px 14px!important}
#directors .leadership .person-info h3{font-size:clamp(15px,1.15vw,19px)!important;margin:0 0 6px!important}
#directors .leadership .person small{font-size:9.5px!important;line-height:1.45}
#directors .top-tier .person{min-height:170px}
#directors .top-tier .person .avatar{min-height:170px}
.profile-modal{display:none!important}
.profile-modal.open{display:flex!important;animation:pv-fade .25s ease}
.profile-card{animation:pv-grow .3s cubic-bezier(.22,1,.36,1)}
.profile-card .avatar{display:block!important;background:#222;min-height:420px}
.profile-card .close{position:absolute;right:12px;top:8px;z-index:2;background:none;border:0;color:#F9F9F9;font-size:32px;cursor:pointer}
.profile-detail{display:flex;flex-direction:column;justify-content:center}
@keyframes pv-fade{from{opacity:0}to{opacity:1}}
@keyframes pv-grow{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
@media(max-width:700px){.profile-card{grid-template-columns:1fr!important;width:92vw}.profile-card .avatar{min-height:0;aspect-ratio:4/5;max-height:46vh}.profile-detail{padding:24px!important}.profile-detail h2{font-size:28px!important}}
@media(max-width:560px){#directors .leadership .person{grid-template-columns:34% 1fr!important;min-height:120px}#directors .leadership .person .avatar{min-height:120px}}
#directors .leadership .person{align-items:stretch!important;align-content:stretch!important}
#directors .leadership .person .avatar{align-self:stretch!important;height:auto!important}
#directors .bottom-tier .person{grid-template-columns:34% 1fr!important;min-height:190px}
#directors .leadership .person-info{align-self:center!important;padding-top:14px!important}
/* Real headshots (added as they arrive) */
#directors .leadership .person[data-name="Zweli Lunga"] .avatar,.profile-card[data-person="Zweli Lunga"] .avatar{background:#d9d7da url('director-zweli-lunga.jpg') center 18%/cover no-repeat}
/* Bigger photo panels so headshots fit (laptops and desktops) */
@media(min-width:851px){
 #directors .top-tier .person{grid-template-columns:44% 1fr!important;min-height:250px}
 #directors .top-tier .person .avatar{min-height:250px}
 #directors .bottom-tier .person{grid-template-columns:44% 1fr!important;min-height:240px}
 #directors .bottom-tier .person .avatar{min-height:240px}
 #directors .bottom-tier .person-info{padding:12px 10px!important}
 #directors .bottom-tier .person-info h3{font-size:clamp(13px,1vw,17px)!important}
}
#directors .leadership .person .avatar{background-position:center 18%!important}
/* Tablets: one card per row, portrait photo panel */
@media(min-width:561px) and (max-width:850px){
 #directors .leadership .person,#directors .bottom-tier .person,#directors .top-tier .person{grid-template-columns:30% 1fr!important;min-height:280px}
 #directors .leadership .person .avatar{min-height:280px}
}
/* Phones: taller photo panel */
@media(max-width:560px){
 #directors .leadership .person,#directors .bottom-tier .person{grid-template-columns:36% 1fr!important;min-height:165px}
 #directors .leadership .person .avatar{min-height:165px}
}
/* Expanded profile: photo panel matches the headshot shape (4:5) so nothing is cropped */
@media(min-width:701px){
 .profile-card{width:min(900px,90vw)!important;grid-template-columns:336px 1fr!important}
 .profile-card .avatar{min-height:0!important;aspect-ratio:4/5;align-self:start}
}
@media(max-width:700px){
 .profile-card .avatar{max-height:none!important;width:min(100%,calc(46vh * .8));margin:0 auto;aspect-ratio:4/5}
}
.profile-card .avatar{background-position:center top!important}
.profile-card .close{width:40px;height:40px;line-height:38px;padding:0;background:rgba(0,0,0,.65)!important;border-radius:50%;font-size:28px}
#directors .leadership .person[data-name="Tristan Schutte"] .avatar,.profile-card[data-person="Tristan Schutte"] .avatar{background:#a7a4ad url('director-tristan-schutte.jpg') center 18%/cover no-repeat}
#directors .leadership .person[data-name="Engelbert Mudzimba"] .avatar,.profile-card[data-person="Engelbert Mudzimba"] .avatar{background:#c9ccd6 url('director-engelbert-mudzimba.jpg') center 18%/cover no-repeat}
#directors .leadership .person[data-name="Sheldon Schutte"] .avatar,.profile-card[data-person="Sheldon Schutte"] .avatar{background:#9aa3c2 url('director-sheldon-schutte.jpg') center 18%/cover no-repeat}
#directors .leadership .person[data-name="Duncan Ruck"] .avatar,.profile-card[data-person="Duncan Ruck"] .avatar{background:#a3add3 url('director-duncan-ruck.jpg') center 18%/cover no-repeat}
#directors .leadership .person[data-name="Christopher van Zyl"] .avatar,.profile-card[data-person="Christopher van Zyl"] .avatar{background:#a5aac9 url('director-christopher-van-zyl.jpg') center 18%/cover no-repeat}
#directors .leadership .person[data-name="Leonet Mavura"] .avatar,.profile-card[data-person="Leonet Mavura"] .avatar{background:#dcdcdc url('director-leonet-mavura.jpg') center 18%/cover no-repeat}
/* ESG: no photo, dark grey gradient background */
#esg.esg-screen{background:radial-gradient(ellipse at 50% 50%,#4a4a47 0%,#2b2b29 45%,#0b0b0b 100%)!important}
#esg.esg-screen:before{background:none!important}