/* ===========================================================
   MAVIMEX Energy · Website
   Palette: deep green · black · cream + gold accent.
   =========================================================== */
@import url('colors_and_type.css');

:root{
  --navy-900:#040806;   /* near-black deep green (page) */
  --navy-800:#07100b;
  --navy-700:#0b1a11;
  --navy-600:#112a1a;
  --line:rgba(31,224,63,.18);
  --line-strong:rgba(31,224,63,.42);
  --gold:#1fe03f;        /* gold — primary accent       */
  --gold-300:#7cf08c;
  --gold-100:#e3fbe6;
  --green:#17a63a;       /* brand sea green             */
  --green-soft:#53d06a;
  --cream:#eef3ef;
  --txt:#eef3ef;
  --txt-dim:rgba(238,243,239,.66);
  --txt-faint:rgba(238,243,239,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);background:var(--navy-900);color:var(--txt);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.kicker{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-weight:700;letter-spacing:2.4px;text-transform:uppercase;font-size:11.5px;}
.kicker::before{content:"";width:22px;height:1.5px;background:var(--gold);}
h2.title{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.015em;margin:18px 0 16px;color:#fff;}
h2.title em{font-style:normal;color:var(--gold);}
.lead{font-size:1.08rem;color:var(--txt-dim);max-width:680px;line-height:1.7;}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(8,19,24,.85);backdrop-filter:saturate(150%) blur(12px);border-bottom-color:var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff;}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.4);border:1px solid var(--line-strong);}
.brand b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.05;display:block;white-space:nowrap;}
.brand small{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-300);font-weight:600;margin-top:5px;}
.nav-links{display:flex;gap:26px;}
.nav-links a{text-decoration:none;color:var(--txt-dim);font-weight:500;font-size:14.5px;position:relative;padding:6px 0;transition:color .25s;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{text-decoration:none;background:var(--gold);color:#1a1a1a;font-weight:700;font-size:13px;letter-spacing:.6px;padding:11px 18px;border-radius:999px;transition:background .25s,transform .15s;white-space:nowrap;}
.nav-cta:hover{background:var(--gold-300);}
.nav-cta:active{transform:scale(.97);}
.nav-right{display:flex;align-items:center;gap:18px;}
.lang{position:relative;}
.lang-btn{display:flex;align-items:center;gap:7px;background:rgba(122,170,206,.1);border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:border-color .25s,background .25s;}
.lang-btn:hover{border-color:var(--gold);background:rgba(122,170,206,.16);}
.lang-btn img{width:18px;height:13px;border-radius:2px;object-fit:cover;}
.lang-caret{font-size:9px;opacity:.7;}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:var(--navy-700);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:50;}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;background:transparent;color:var(--txt);font-size:13px;cursor:pointer;text-align:left;font-family:var(--font-sans);}
.lang-opt:hover{background:rgba(122,170,206,.12);}
.lang-opt.active{color:var(--gold);font-weight:600;}
.lang-opt img{width:20px;height:14px;border-radius:2px;object-fit:cover;}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
/* Seven links plus the brand and CTA get tight before the burger takes
   over, and German runs longer than English. */
@media(max-width:1200px){ .nav-links{gap:20px;} }
@media(max-width:1060px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .nav-cta{display:none;}
}
.burger span{width:24px;height:2px;background:var(--gold);display:block;transition:.3s;}

/* ===================== HERO ===================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(1200px 700px at 70% 20%,rgba(31,224,63,.10),transparent 60%),linear-gradient(180deg,var(--navy-800),var(--navy-900));}
.hero .mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);}
.hero-sub{font-size:1.12rem;color:var(--txt-dim);max-width:560px;line-height:1.65;margin:0 0 32px;}
.hero-sub.center{margin-left:auto;margin-right:auto;text-align:center;}
.ctas{display:flex;gap:14px;flex-wrap:wrap;}
.ctas.center{justify-content:center;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:1.1px;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;font-family:var(--font-sans);transition:transform .15s,background .25s,color .25s,border-color .25s;}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:#1a1a1a;box-shadow:0 10px 30px -8px rgba(31,224,63,.5);}
.btn-gold:hover{background:var(--gold-300)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-300)}
.btn .arrow{transition:transform .25s}.btn:hover .arrow{transform:translateX(4px)}
.hero-stats{display:flex;gap:36px;margin-top:46px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap;}
.hero-stats.center{justify-content:center;}
.hero-stats div b{display:block;font-family:var(--font-display);font-size:2.1rem;color:var(--gold-300);line-height:1;font-weight:700;}
.hero-stats div span{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--txt-faint);font-weight:600;}

/* ===================== GLOBE ===================== */
/* ===================== HERO LOCKUP (logo: W + globe + i) ===================== */
.hero-inner{position:relative;text-align:center;width:100%;padding:124px 0 84px;}
.hero-inner .kicker{justify-content:center;}
.lockup{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,16px);margin:18px 0 6px;}
/* Hero mark — the MAVIMEX mark, with halo + slow accent ring */
.hero-mark{position:relative;display:flex;align-items:center;justify-content:center;margin:20px auto 4px;width:min(560px,82vw);aspect-ratio:1060/624;}
.mark-halo{position:absolute;inset:-8% -2%;background:radial-gradient(ellipse at 54% 46%,rgba(31,224,63,.35),transparent 62%);filter:blur(26px);}
.mark-ring{position:absolute;top:50%;left:54%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(31,224,63,.32);animation:rot 64s linear infinite;}
.mark-ring::after{content:"";position:absolute;inset:-10%;border-radius:50%;border:1px solid rgba(31,224,63,.16);}
.mark-img{position:relative;width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));}
@keyframes rot{to{transform:translate(-50%,-50%) rotate(360deg)}}
.wd-letter{font-family:var(--font-display);font-weight:800;font-size:clamp(120px,21vw,280px);line-height:.82;background:linear-gradient(158deg,#d6ffdc 0%,#6ff07f 38%,#1fe03f 66%,#0a7a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(7px 9px 0 rgba(0,0,0,.45));user-select:none;}
.logo-globe{position:relative;flex:none;width:clamp(120px,21vw,280px);aspect-ratio:1/1;}
.logo-globe .globe-glow{position:absolute;inset:-14%;background:radial-gradient(circle,rgba(31,224,63,.35),transparent 62%);filter:blur(18px);}
.logo-ring{position:absolute;inset:-3%;border-radius:50%;border:1px solid var(--line-strong);}
.lockup-name{font-family:var(--font-sans);font-weight:600;letter-spacing:clamp(4px,1vw,11px);text-transform:uppercase;color:var(--gold-300);font-size:clamp(13px,1.6vw,19px);margin:2px 0 22px;}
.hero-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.015em;margin:6px auto 22px;max-width:760px;color:#fff;}
.hero-h1 em{font-style:normal;color:var(--gold);}

.globe-stage{position:relative;aspect-ratio:1/1;width:min(100%,440px);margin:0 auto;}
.globe-glow{position:absolute;inset:-16%;background:radial-gradient(circle,rgba(31,224,63,.3),transparent 60%);filter:blur(22px);}
.ring{position:absolute;inset:-7%;border-radius:50%;border:1px solid var(--line-strong);}
.ring.r2{inset:-15%;border-style:dashed;border-color:rgba(31,224,63,.2);animation:rot 64s linear infinite reverse;}
.ring.r3{inset:-24%;border-color:rgba(31,224,63,.1);}
@keyframes rot{to{transform:rotate(360deg)}}
.globe-shell{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 36% 30%,#0f3a1a 0%,#0a2612 42%,#06160b 72%,#030805 100%);box-shadow:inset 0 0 70px rgba(0,0,0,.6),0 0 100px rgba(31,224,63,.45),0 30px 80px -20px rgba(0,0,0,.7);}
.globe-img{position:absolute;inset:0;width:200%;background:url('assets/world-texture.svg') 0 50%/50% 100% repeat-x;animation:spin 30s linear infinite;}
.globe-shadow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(205,255,214,.28) 0,transparent 42%),radial-gradient(circle at 74% 80%,rgba(0,0,0,.55) 0,transparent 64%);}
@keyframes spin{to{background-position:-100% 50%}}

/* ===================== CLOCKS ===================== */
.clocks{background:linear-gradient(180deg,var(--navy-900),var(--navy-800));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0 76px;}
.clocks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px;}
.clocks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.globe-band{display:flex;justify-content:center;margin:8px 0 52px;}
#globediv{width:min(540px,88vw);height:min(540px,88vw);}
@media(max-width:560px){#globediv{width:min(360px,90vw);height:min(360px,90vw);}}
.ck{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:18px;padding:24px 18px;text-align:center;transition:transform .3s,border-color .3s,background .3s;}
.ck:hover{transform:translateY(-5px);border-color:var(--gold);background:rgba(31,224,63,.05);}
.face{position:relative;width:120px;height:120px;margin:0 auto 16px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#1c3744,var(--navy-900) 72%);border:2px solid var(--gold);box-shadow:inset 0 4px 16px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.4);}
.tick{position:absolute;left:50%;top:5px;width:2px;height:7px;background:var(--gold-300);transform-origin:50% 55px;}
.tick.maj{height:11px;width:3px;background:var(--gold);}
.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:6px;}
.hand.hr{width:4.5px;height:30px;background:var(--gold);}
.hand.mn{width:3px;height:46px;background:var(--gold-300);}
.hand.sc{width:1.4px;height:50px;background:#fff;opacity:.85;}
.cap{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--navy-900);}
.city{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.25;color:#fff;}
.tz{color:var(--gold-300);font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;margin-top:3px;}
.digi{color:var(--txt-faint);font-family:var(--font-mono);font-size:12.5px;margin-top:7px;letter-spacing:.8px;}

/* ===================== SECTIONS ===================== */
.section{padding:110px 0;}
.section.light{background:var(--cream);color:#16222b;}
.section.light h2.title{color:var(--navy-800)}
.section.light .lead{color:#4a565b}
.section.light .kicker{color:#0c8527}
.section.light .kicker::before{background:#0c8527}

/* services */
/* Flex, not grid: with five pillars the trailing row centres instead of
   leaving a hole. Card count can change without touching breakpoints. */
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:52px;}
.svc{flex:1 1 300px;max-width:380px;position:relative;border-radius:20px;padding:34px 30px;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden;transition:transform .3s,border-color .3s,background .3s;}
.svc:hover{transform:translateY(-7px);border-color:var(--gold);background:rgba(31,224,63,.05);}
.svc .num{font-family:var(--font-display);color:var(--gold);font-size:14px;letter-spacing:3px;font-weight:700;}
.svc h3{font-family:var(--font-display);font-size:1.55rem;color:#fff;margin:14px 0 14px;font-weight:700;}
.svc p{color:var(--txt-dim);margin:0 0 20px;font-size:15px;line-height:1.65;}
.svc ul{list-style:none;padding:0;margin:0;}
.svc li{position:relative;padding:8px 0 8px 24px;color:var(--txt-dim);font-size:14px;border-top:1px solid rgba(255,255,255,.05);}
.svc li:first-child{border-top:0}
.svc li::before{content:"→";position:absolute;left:0;color:var(--gold);}

/* operations pillars */
.ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px;}
.pillar{padding:28px 24px;border-radius:16px;background:#fff;border:1px solid #e6e1d4;transition:transform .3s,box-shadow .3s;}
.pillar:hover{transform:translateY(-5px);box-shadow:0 24px 50px -24px rgba(20,49,62,.3);}
.pillar .pn{font-family:var(--font-display);color:var(--gold);font-weight:700;font-size:13px;letter-spacing:2px;}
.pillar h4{font-family:var(--font-display);font-size:1.2rem;color:var(--navy-800);margin:10px 0 8px;}
.pillar p{color:#5a6469;font-size:14px;line-height:1.6;margin:0;}

/* about split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.about-card{position:relative;aspect-ratio:1/1;border-radius:24px;background:radial-gradient(circle at 50% 40%,var(--navy-700),var(--navy-900));display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 40px 80px -40px rgba(0,0,0,.6);}
.about-card.mission{flex-direction:column;align-items:flex-start;justify-content:center;padding:48px;gap:0;}
.about-card.mission .mq{font-family:var(--font-display);font-size:120px;line-height:.6;color:var(--gold);opacity:.5;}
.about-card.mission p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;color:#fff;margin:8px 0 22px;}
.about-card.mission .sig{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-300);font-weight:700;}
.about-card.mission .hubs{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);width:100%;}
.about-card.mission .hubs span{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt-dim);font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:999px;}
.values{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;}
.value{padding:20px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);}
.value h5{font-family:var(--font-display);color:var(--gold-300);font-size:1.05rem;margin:0 0 6px;}
.value p{color:var(--txt-dim);font-size:13.5px;line-height:1.55;margin:0;}

/* training */
.train-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;margin-top:48px;padding:0;list-style:none;}
.train-grid li{padding:16px 20px;border-left:3px solid var(--gold);background:rgba(255,255,255,.03);color:var(--txt);font-weight:500;border-radius:0 10px 10px 0;transition:background .25s,transform .25s;}
.train-grid li:hover{background:rgba(31,224,63,.08);transform:translateX(4px);}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;margin-top:52px;}
.cinfo .item{padding:18px 0;border-top:1px solid var(--line);}
.cinfo .item:first-child{border-top:0}
.cinfo small{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:5px;}
.cinfo p{margin:0;font-size:1.05rem;color:var(--txt);}
.cform{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:34px;}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.cform label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--txt-dim);margin-bottom:7px;}
.cform input,.cform select,.cform textarea{width:100%;padding:13px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#fff;font-size:15px;font-family:var(--font-sans);}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(31,224,63,.18);}
.cform textarea{resize:vertical;min-height:120px;}
.cform .ok{margin-top:14px;padding:13px 15px;border-radius:10px;background:rgba(53,124,69,.14);border:1px solid rgba(53,124,69,.45);color:#1f5c30;font-size:14px;}
.cform .err{margin-top:14px;padding:13px 15px;border-radius:10px;background:rgba(150,45,45,.10);border:1px solid rgba(150,45,45,.40);color:#7d2020;font-size:14px;}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===================== FOOTER ===================== */
.footer{background:var(--navy-900);padding:70px 0 28px;border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;}
.footer h5{font-family:var(--font-display);color:var(--gold-300);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 16px;}
.footer a,.footer p{color:var(--txt-dim);font-size:14px;line-height:1.8;text-decoration:none;}
.footer a{display:block;padding:3px 0;transition:color .25s;}
.footer a:hover{color:var(--gold)}
.footer .brand{margin-bottom:16px}
.footer-bottom{margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--txt-faint);}

/* ===================== RESPONSIVE ===================== */
@media(max-width:920px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:44px;}
  .globe-stage{order:-1;width:min(80%,360px);}
  .svc-grid,.ops-grid{grid-template-columns:1fr;}
  .clocks-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .burger{display:flex;order:3;}
  .nav-right{gap:10px;}
  .nav-cta{display:none;}
  .train-grid,.cform .row{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr 1fr;}
  .about-card.mission{aspect-ratio:auto;padding:32px;}
}
@media(max-width:560px){
  .container{padding:0 18px;}
  .section{padding:72px 0;}
  .hero-inner{padding:104px 0 64px;}
  .hero-mark{width:90vw;}
  .hero-stats{gap:22px;justify-content:space-between;}
  .hero-stats div b{font-size:1.7rem;}
  .clocks-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .face{width:104px;height:104px;}
  .values{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
  .ctas.center{flex-direction:column;}
  .ctas.center .btn{width:100%;justify-content:center;}
  .lockup-name{letter-spacing:3px;}
  .about-card.mission .mq{font-size:84px;}
}
@media(max-width:380px){
  .clocks-grid{grid-template-columns:1fr;}
}

/* Turnstile renders a fixed 300px widget that will not shrink. The form is a
   grid item, so its automatic minimum size took that 300px plus padding and
   forced the whole page 68px wider than a small phone — every section then
   scrolled sideways.

   Space for the widget is viewport - 36 (container padding) - form padding.
   With the default 34px form padding that needs a 404px viewport, so the
   padding tightens first and the widget is only scaled where 300px genuinely
   cannot fit. The wrapper's overflow stops the fixed width propagating back
   out; its height is set because transform does not affect layout. */
.contact-grid > *{min-width:0;}
.ts-wrap{max-width:100%;}
@media(max-width:404px){ .cform{padding:26px 16px;} }
@media(max-width:368px){
  .ts-wrap{overflow:hidden;height:62px;}
  .ts-wrap .cf-turnstile{transform:scale(.88);transform-origin:left top;}
}
@media(max-width:336px){
  .ts-wrap{height:56px;}
  .ts-wrap .cf-turnstile{transform:scale(.80);}
}

/* The brand name is set nowrap, which kept the header row from fitting on a
   narrow phone. Scoped to .nav so the footer's copy of .brand is untouched. */
@media(max-width:430px){
  .nav .container{padding-left:16px;padding-right:16px;}
  .nav .brand{min-width:0;gap:10px;}
  .nav .brand img{width:36px;height:36px;}
  .nav .brand b{font-size:.9rem;white-space:normal;}
  .nav .brand small{font-size:9px;letter-spacing:1.6px;margin-top:3px;}
}

/* ===== GROUP COMPANIES ===== */
/* Each mark sits on the ground it was drawn for: white for the two light
   logos, black for the marks whose silver and gold lose their metal on white.
   Identical tiles, and every logo scaled up until it touches an edge, so the
   three read as one size and no tile carries dead space. Padding is kept small
   for the same reason. object-fit:contain does the scaling, so nothing is
   cropped or stretched whatever the shape of the artwork. */
.grp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;}
.grp{background:#fff;border-radius:18px;overflow:hidden;height:200px;
     display:flex;align-items:center;justify-content:center;padding:14px;
     transition:transform .3s,box-shadow .3s;}
/* Two reasons a tile goes black. Some marks are silver and grey on
   black, so at the same measured size they read smaller than the vivid blue
   and navy marks beside them; less padding scales them up to match by eye.
   MAV IMEX is a different case: its artwork is a full black square, so a
   white tile would frame it in a visible white border. */
.grp.on-black{background:#0a0a0a;padding:6px;}
.grp:hover{transform:translateY(-3px);box-shadow:0 22px 48px -20px rgba(0,0,0,.65);}
.grp img{width:100%;height:100%;object-fit:contain;display:block;}
@media(max-width:1060px){ .grp-grid{grid-template-columns:repeat(2,1fr);} .grp{height:220px;} }
@media(max-width:640px){
  .grp-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
  .grp{height:240px;padding:16px;}
  .grp.on-black{padding:8px;}
}

/* ============================================================
   MULTILINGUAL SUPPORT — 24 languages
   ============================================================ */

/* The menu now holds 24 entries, so it scrolls instead of running off-screen.
   overscroll-behavior stops the page scrolling once the list hits its end. */
.lang-menu{max-height:min(68vh,410px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.lang-menu::-webkit-scrollbar{width:8px;}
.lang-menu::-webkit-scrollbar-thumb{background:rgba(122,170,206,.28);border-radius:4px;}
.lang-opt img{flex:0 0 auto;}
.lang-opt span{white-space:nowrap;}
/* Divides the NATO/EU block from the wider markets — a rule, not a label, so
   the page states the grouping visually without asserting it in words. */
.lang-sep{height:1px;margin:5px 12px;background:var(--line);}

/* Inter and Playfair Display ship Latin, Greek, Cyrillic and Vietnamese only.
   Without these the seven non-Latin locales fall back to whatever the browser
   picks, which on Windows is usually a poor match. System stacks — zero bytes. */
html[lang="ar"],html[lang="fa"],html[lang="ur"]{
  --font-sans:'Segoe UI','Noto Sans Arabic','Geeza Pro',Tahoma,Arial,sans-serif;
  --font-display:'Noto Naskh Arabic','Times New Roman',Georgia,serif;
}
html[lang="ur"]{
  --font-sans:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Segoe UI',Tahoma,sans-serif;
}
html[lang="hi"]{
  --font-sans:'Nirmala UI','Kohinoor Devanagari','Noto Sans Devanagari',sans-serif;
  --font-display:'Noto Serif Devanagari','Nirmala UI',Georgia,serif;
}
html[lang="zh-Hans"]{
  --font-sans:'Microsoft YaHei','PingFang SC','Hiragino Sans GB','Noto Sans SC',sans-serif;
  --font-display:'Source Han Serif SC','Songti SC','SimSun',serif;
}
html[lang="zh-Hant"]{
  --font-sans:'Microsoft JhengHei','PingFang TC','Noto Sans TC',sans-serif;
  --font-display:'Source Han Serif TC','Songti TC','PMingLiU',serif;
}
html[lang="ko"]{
  --font-sans:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --font-display:'Nanum Myeongjo','Apple SD Gothic Neo',Georgia,serif;
}

/* ===== RIGHT-TO-LEFT (ar / fa / ur) =====
   Flex and grid mirror themselves off [dir]; only the hand-placed offsets,
   one-sided borders and directional glyphs below need explicit flipping. */
[dir="rtl"] .lang-menu{right:auto;left:0;}
[dir="rtl"] .lang-opt{text-align:right;}
[dir="rtl"] .nav-links a::after{left:auto;right:0;}
[dir="rtl"] .svc li{padding:8px 24px 8px 0;}
[dir="rtl"] .svc li::before{content:"\2190";left:auto;right:0;}
[dir="rtl"] .train-grid li{border-left:0;border-right:3px solid var(--gold);border-radius:10px 0 0 10px;}
[dir="rtl"] .train-grid li:hover{transform:translateX(-4px);}
[dir="rtl"] .btn .arrow{transform:scaleX(-1);}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(4px);}
[dir="rtl"] .cform .hp{left:auto;right:-9999px;}
/* Clock faces, the globe and the mark ring are geometric, not directional —
   mirroring them would put the numerals and continents backwards. */
[dir="rtl"] .ck,[dir="rtl"] .face,[dir="rtl"] #globediv{direction:ltr;}

/* Arabic, Persian and Urdu are cursive scripts — the letters join up. The
   positive tracking on kickers/buttons/labels prises those joins apart, and the
   negative tracking on display headings crushes them; both read as broken text.
   Reset it only on elements that carry translated copy — the Latin brand lockup,
   timezone codes and numerals keep their spacing. */
html[lang="ar"] .kicker,   html[lang="fa"] .kicker,   html[lang="ur"] .kicker,
html[lang="ar"] h2.title,  html[lang="fa"] h2.title,  html[lang="ur"] h2.title,
html[lang="ar"] .hero-h1,  html[lang="fa"] .hero-h1,  html[lang="ur"] .hero-h1,
html[lang="ar"] .nav-cta,  html[lang="fa"] .nav-cta,  html[lang="ur"] .nav-cta,
html[lang="ar"] .btn,      html[lang="fa"] .btn,      html[lang="ur"] .btn,
html[lang="ar"] .hero-stats div span,
html[lang="fa"] .hero-stats div span,
html[lang="ur"] .hero-stats div span,
html[lang="ar"] .about-card.mission .sig,
html[lang="fa"] .about-card.mission .sig,
html[lang="ur"] .about-card.mission .sig,
html[lang="ar"] .about-card.mission .hubs span,
html[lang="fa"] .about-card.mission .hubs span,
html[lang="ur"] .about-card.mission .hubs span,
html[lang="ar"] .cinfo small, html[lang="fa"] .cinfo small, html[lang="ur"] .cinfo small,
html[lang="ar"] .cform label, html[lang="fa"] .cform label, html[lang="ur"] .cform label,
html[lang="ar"] .footer h5,   html[lang="fa"] .footer h5,   html[lang="ur"] .footer h5,
html[lang="ar"] .ck .city,    html[lang="fa"] .ck .city,    html[lang="ur"] .ck .city{
  letter-spacing:normal;
}

/* The mission card is a square with overflow:hidden — and overflow≠visible
   zeroes a box's automatic minimum size, so the card cannot grow with its
   content. In languages whose quote runs longer and whose uppercased pills are
   wider (el, bg, ru), the sixth hub pill fell past the edge and was clipped.
   min-height:max-content restores growth; the square stays as the floor. */
.about-card.mission{aspect-ratio:auto;min-height:100%;height:auto;}

/* ============================================================
   MAVIMEX Energy overrides
   The hero mark was sized for the wide hero wordmark (1060x624,
   ring offset to sit on its globe). The MAVIMEX mark is a round
   disc, so the stage is square and the halo/ring are centred.
   Neon green is illegible on the light contact section, so the
   accents there drop to the deep brand green.
   ============================================================ */
.hero-mark{width:min(360px,64vw);aspect-ratio:1/1;margin:26px auto 14px;}
.mark-halo{inset:-18%;background:radial-gradient(circle at 50% 50%,rgba(31,224,63,.34),transparent 64%);}
.mark-ring{left:50%;width:118%;animation-name:mark-rot;}
/* site.css defines @keyframes rot twice; the later one drops the
   translate(-50%,-50%), which pushed this ring off-centre. */
@keyframes mark-rot{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.mark-img{border-radius:50%;filter:drop-shadow(0 0 34px rgba(31,224,63,.35)) drop-shadow(0 18px 40px rgba(0,0,0,.6));}
@media(max-width:560px){ .hero-mark{width:min(280px,70vw);} }

.section.light h2.title em,
.section.light .cinfo small,
.section.light .pn{color:#0c8527;}
.section.light .cform input:focus,
.section.light .cform select:focus,
.section.light .cform textarea:focus{border-color:#0c8527;box-shadow:0 0 0 3px rgba(12,133,39,.18);}

/* Strategic partners: one-colour logo marks drawn through CSS masks so the four
   very different logos read as a set; they take the accent colour on hover. */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.partner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px;padding:30px 24px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);transition:transform .25s,border-color .25s,background .25s;}
.partner:hover{transform:translateY(-4px);border-color:var(--gold);background:rgba(255,255,255,.04);}
.plogo{width:100%;height:96px;background-color:var(--txt-dim);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:background-color .25s;}
.partner:hover .plogo{background-color:var(--gold);}
.partner span{font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--txt-faint);text-align:center;}
@media(max-width:920px){ .partners{grid-template-columns:repeat(2,1fr);} }
@media(max-width:420px){ .partners{gap:12px;} .partner{padding:22px 14px 16px;} .plogo{height:72px;} }

/* Registered-company details: near-invisible trigger, type-on-demand output, not selectable. */
#lglB{background:none;border:0;color:inherit;font:inherit;font-size:11px;opacity:.22;cursor:pointer;padding:0 3px;transition:opacity .25s;}
#lglB:hover{opacity:.65;}
#lglT{font-family:ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.03em;opacity:.5;user-select:none;-webkit-user-select:none;-moz-user-select:none;}
#ppB{background:none;border:0;color:inherit;font:inherit;font-size:11px;opacity:.22;cursor:pointer;padding:0 3px;transition:opacity .25s;}
#ppB:hover{opacity:.65;}
#ppT{font-family:ui-monospace,Consolas,monospace;font-size:10px;line-height:1.7;letter-spacing:.03em;opacity:.5;user-select:none;-webkit-user-select:none;-moz-user-select:none;white-space:pre-wrap;max-width:760px;margin:10px 0 0;}
#ppT:empty{display:none;}