/* Magaya Mining launch polish (1 Oct 2026).
   Loaded last on every page. Headlines use IBM Plex Sans Condensed (set by data-tone="light" on <html>).
   Below: comfortable form sizes, and a readable minimum for the smallest text. */

/* --- Partner with us form --- */
.compact-form{gap:16px 18px;align-items:start}
.compact-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;letter-spacing:.06em;color:#ecece6}
.compact-form input,.compact-form select,.compact-form textarea{font:400 16px/1.4 Poppins,"Segoe UI",Arial,sans-serif;min-height:50px;padding:12px 14px;margin-top:0;border:1px solid rgba(255,255,255,.3);border-radius:0;background:#141414;color:#fff;text-transform:none;letter-spacing:0}
.compact-form select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,#EDC817 50%),linear-gradient(135deg,#EDC817 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.compact-form textarea{min-height:120px;resize:vertical}
.compact-form input::placeholder,.compact-form textarea::placeholder{color:rgba(255,255,255,.45)}
.compact-form input:focus,.compact-form select:focus,.compact-form textarea:focus{outline:none;border-color:#EDC817;box-shadow:0 0 0 3px rgba(237,200,23,.25)}
.compact-form button{min-height:50px;padding:13px 24px;font-size:14px;letter-spacing:.06em}
#partnerForm .consent{flex-direction:row;align-items:flex-start;gap:12px;font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5}
#partnerForm .consent input{min-height:0;width:20px;height:20px;padding:0;margin-top:2px}
#partnerForm .form-status{font-size:15px}
.partner-note{font-size:12.5px;line-height:1.5}
.partner-screen{height:auto}
@media (max-width:700px){.compact-form{grid-template-columns:minmax(0,1fr)}.compact-form .wide{grid-column:auto}}

/* --- Readable minimum for small text (was 8–10 px) --- */
.routes small,.person small,.glance-item small,.impact-strip .glance-item small,.op-panel small,.leadership .person small{font-size:11px}
.routes p,.feature-strip p,.model-stage p,.process small,.metric p,.person p{font-size:13px;line-height:1.5}
.goal-strip p,.glance-item span,.ownership,.journey-note,.timeline span,.download-status,.profile-detail h4{font-size:12px}
.before-after figcaption{font-size:12px}

/* --- Figures strip: let the two site labels wrap instead of running into each other --- */
.impact-strip .impact-sites span{font-size:10.5px;white-space:normal;line-height:1.25}

/* --- Partner form: two roomy columns on desktop, so placeholders are not cut off --- */
.compact-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-form .wide,#partnerForm .consent,#partnerForm .form-status,#partnerForm .partner-note{grid-column:1/-1}
.compact-form button{grid-column:1/-1;justify-self:start}

/* --- Buttons: easier to read and tap --- */
.btn{font-size:12.5px;min-height:46px;padding:13px 22px;letter-spacing:.05em}

/* --- Header: hide the long company name before it runs into the menu --- */
@media (max-width:1699px){.brand-name{display:none}}

/* --- Phone menu: quicker, more reliable taps on iPhone --- */
@media (max-width:850px){
  .nav-toggle{min-width:48px;min-height:44px;justify-content:center}
  .site-nav a,.drop-menu a,.nav-toggle,.partner-nav,.btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(237,200,23,.35)}
  .site-header.nav-open .site-nav{justify-content:flex-start;max-height:calc(100vh - var(--head));max-height:calc(100dvh - var(--head));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .site-header.nav-open .site-nav>a,.site-header.nav-open .drop-menu a{display:flex!important;align-items:center;min-height:48px}
  .site-header.nav-open .drop-menu::before{content:"Connect";display:block;padding:18px 20px 6px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  html.menu-open,html.menu-open body{overflow:hidden}
}

/* --- Jump straight to a section when a menu link is tapped (the slow animated scroll felt unresponsive on iPhone) --- */
html{scroll-behavior:auto!important}
@media (max-width:850px){main{scroll-behavior:auto!important}}

/* --- Small phones: the long "Back to Previous Page" button overlapped the menu and stole taps --- */
@media (max-width:480px){
  .site-header{flex-wrap:nowrap}
}

/* --- Phones: keep the header on screen all the way down the page.
   iPhone Safari could drop the sticky header part-way down the homepage, so it is fixed to the top instead. --- */
@media (max-width:850px), (max-height:559px){
  :root{--head:58px}
  .site-header,main>.site-header{position:fixed!important;top:0;left:0;right:0;height:var(--head)!important;z-index:1000;-webkit-transform:translateZ(0);transform:translateZ(0)}
  body{padding-top:var(--head)}
  .screen{scroll-margin-top:0}
}

/* --- Phones: Corporate Governance as a neat, evenly spaced list (desktop unchanged) --- */
@media (max-width:850px){
  .directors-screen{height:auto!important;min-height:0!important;padding:36px 20px 44px}
  .directors-screen:before{display:none}
  .directors-screen .section-head{margin-bottom:20px}
  .leadership{height:auto!important;display:flex;flex-direction:column;gap:12px;margin:0;max-width:none}
  .top-tier,.bottom-tier{display:flex!important;flex-direction:column;gap:12px;width:100%!important;max-width:none;margin:0}
  .leadership .person,.top-tier .person{min-height:0!important}
  .leadership .person-info{padding:18px 16px!important}
}

/* --- iPad and laptop widths: the "Back to Previous Page" button wrapped onto four lines --- */
.partner-nav{white-space:nowrap}
@media (min-width:851px) and (max-width:1365px){
}

/* --- iPad landscape and small laptops: the header kept a 260–330 px column for the hidden company name,
   which pushed the menu off the edge. The logo column now shrinks to the logo. --- */
@media (min-width:851px) and (max-width:1499px){
  .site-header{grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:clamp(10px,1.4vw,22px)}
}
@media (min-width:851px) and (max-width:1000px){
  .site-header{padding-left:14px!important;padding-right:14px!important}
  .site-nav{gap:7px!important}
  .partner-nav{padding:12px 14px!important;font-size:10.5px}
}
@media (min-width:851px) and (max-width:900px){.site-nav{gap:5px!important}.site-nav a,.drop-trigger{font-size:9.5px!important}}

/* --- The header Back button always shows its full wording, "← Back to Previous Page".
   Where space is tight (smallest phones, 851–1000 px tablets) it sits neatly on two lines. --- */
.partner-nav[data-return-page]{white-space:nowrap}
@media (max-width:380px), (min-width:851px) and (max-width:1000px){
  .partner-nav[data-return-page]{white-space:normal!important;max-width:142px;line-height:1.15;text-align:center;padding:8px 12px!important}
}

/* --- Menu bar: larger, easier-to-read links on laptops and desktops --- */
@media (min-width:1200px) and (max-width:1499px){.site-nav>a,.site-nav .drop-trigger{font-size:13px!important;letter-spacing:.05em}}
@media (min-width:1500px){
  .site-nav{gap:24px!important}
  .site-nav>a,.site-nav .drop-trigger{font-size:14px!important;letter-spacing:.05em}
  .drop-menu{min-width:280px!important}
  .drop-menu a{font-size:12.5px!important;padding:14px 18px!important}
  .partner-nav{font-size:12px!important;padding:16px 22px!important}
}
@media (min-width:1800px){
  .site-nav{gap:30px!important}
  .site-nav>a,.site-nav .drop-trigger{font-size:15px!important}
  .drop-menu{min-width:300px!important}
  .drop-menu a{font-size:13px!important;padding:15px 20px!important}
  .partner-nav{font-size:12.5px!important;padding:16px 24px!important}
}

/* --- Company name in the header (wide screens): readable size --- */
@media (min-width:1700px){.brand-name{font-size:13px!important;letter-spacing:.05em!important;line-height:1.2}}
@media (min-width:1800px){.brand-name{font-size:14px!important}}

/* --- iPad and iPhone Safari: size one-screen sections to the VISIBLE screen.
   Safari's "100vh" is the height with its toolbars hidden, so sections built on it were about 100 px
   taller than the visible area and their bottoms spilled off screen. "svh" is the visible height. --- */
@supports (height:100svh){
  .screen,.who-screen,.vm-screen,.careers-screen,.news-screen,
  #home.home-screen,#who-we-are.who-screen,#who-we-are .who-slide,#vision-mission.vm-screen,#partner.partner-screen{min-height:calc(100svh - var(--head))!important}
  .timeline-track{height:clamp(458px,calc(100svh - 262px),500px)!important}
  @media (min-width:851px) and (min-height:560px){
    main{height:100svh}
    .screen,.who-screen,.vm-screen{height:calc(100svh - var(--head))}
    .vm-screen .vm-scene .vm-photo-plane{top:calc((100svh - var(--head) - 406px) * 1.08)}
  }
}