/* =========================================================================
   O'zbekneftgaz — "Energy of the Depths" redesign
   Design system extracted from the concept and generalised for a multi-page,
   server-rendered site. Dark, cinematic, amber-on-ink.
   ========================================================================= */

:root {
  --bg: #07090D;
  --surface: #0E141B;
  --surface-2: #131A24;
  --amber: #FF9E2C;
  --gold: #FFC65C;
  --cyan: #35D6ED;
  --ivory: #F4F1EA;
  --muted: rgba(244, 241, 234, .6);
  --faint: rgba(244, 241, 234, .42);
  --hair: rgba(244, 241, 234, .09);
  --danger: #FF6A5A;
  --maxw: 1560px;
  --pad: clamp(18px, 3.5vw, 56px);
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
::selection { background: var(--amber); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; }

body {
  color: var(--ivory);
  font-family: 'Manrope', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
  line-height: 1.5;
}
a { color: inherit; }

.u-mono { font-variant-numeric: tabular-nums; }
.display { font-family: 'Unbounded', sans-serif; }

@keyframes ungMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes ungGrain { 0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}100%{transform:translate(-1%,3%)} }
@keyframes ungPulse { 0%{transform:scale(1);opacity:.85}80%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0} }
@keyframes ungFlow { to { background-position: 52px 0; } }
@keyframes ungDashMove { to { stroke-dashoffset: -190; } }
@keyframes ungHint { 0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes ungSpin { to { transform: rotate(360deg); } }

/* --- Skip link --- */
.skip {
  position: fixed; left: 14px; top: -56px; z-index: 400;
  background: var(--amber); color: var(--bg);
  padding: 11px 18px; font: 700 13px 'Manrope'; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 14px; }

/* --- Grain overlay --- */
#ungGrainEl {
  position: fixed; inset: -22%; z-index: 90; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: ungGrain 1.2s steps(3) infinite;
}

/* --- Custom cursor --- */
#curDot, #curRing { position: fixed; border-radius: 50%; z-index: 300; pointer-events: none; opacity: 0; }
#curDot { left: -3px; top: -3px; width: 6px; height: 6px; background: var(--amber); }
#curRing { left: -19px; top: -19px; width: 38px; height: 38px; border: 1px solid rgba(244,241,234,.5); }

/* --- Header --- */
#ungHeader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .45s, border-color .45s;
}
#ungHeader.scrolled {
  background: rgba(7,9,13,.8); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(244,241,234,.08);
}
.hdr-inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 22px; padding: 0 var(--pad); height: 74px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ivory); }
.brand-name { font: 700 14.5px 'Unbounded'; letter-spacing: .02em; }
.brand-tag { font: 600 9px 'Manrope'; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.navlinks { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.navlinks a {
  font: 600 12.5px 'Manrope'; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,241,234,.72); text-decoration: none; transition: color .3s;
}
.navlinks a:hover, .navlinks a.active { color: var(--gold); }
.hdr-right { display: flex; align-items: center; gap: 16px; }
.langsw { display: flex; gap: 2px; }
.lang-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--faint); font: 700 12px 'Manrope'; letter-spacing: .08em;
  padding: 7px 7px 5px; cursor: pointer; text-decoration: none;
}
.lang-btn.on { color: var(--ivory); border-bottom-color: var(--amber); }
.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; background: none;
  border: 1px solid rgba(244,241,234,.22); cursor: pointer; padding: 0;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ivory); }

/* --- Mobile menu --- */
#ungMenu {
  position: fixed; inset: 0; z-index: 140;
  background: linear-gradient(180deg,#0B1017,#080B10);
  transform: translateY(-102%); pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px clamp(24px,7vw,90px) 60px; transition: transform .5s ease;
}
#ungMenu.open { transform: translateY(0); pointer-events: auto; }
#ungMenu nav { display: flex; flex-direction: column; gap: 8px; }
#ungMenu a {
  font: 700 clamp(28px,7vw,52px) 'Unbounded'; color: var(--ivory);
  text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--hair);
}
#ungMenu a:hover { color: var(--gold); }

@media (max-width: 920px) { .navlinks { display: none; } .burger { display: inline-flex; } }

/* --- Generic section scaffolding --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.kicker {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font: 700 11px 'Manrope'; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.kicker::before { content: ""; width: 40px; height: 1px; background: var(--amber); flex: none; }
.h2 { margin: 0; font: 700 clamp(27px,4vw,56px)/1.06 'Unbounded'; letter-spacing: -.01em; color: var(--ivory); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 800 12.5px 'Manrope'; letter-spacing: .16em; text-transform: uppercase;
  padding: 16px 24px; border: 1px solid var(--amber); background: var(--amber);
  color: #0B0E13; transition: background .3s, border-color .3s, color .3s; cursor: pointer;
}
.btn:hover { background: var(--gold); border-color: var(--gold); }
.btn.ghost { background: transparent; color: var(--ivory); border-color: rgba(244,241,234,.28); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

/* --- Hero --- */
#hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden; background: var(--bg);
}
#flowWrap { position: absolute; inset: -6% -4%; pointer-events: none; }
#flowCanvas { width: 100%; height: 100%; display: block; }
.hero-veil-1 { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 110%, rgba(255,158,44,.13), transparent 55%); }
.hero-veil-2 { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,9,13,.6) 0%, rgba(7,9,13,0) 32%, rgba(7,9,13,0) 60%, rgba(7,9,13,.85) 100%); }
#heroContent { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 130px var(--pad) 60px; }
#heroKick { display: flex; align-items: center; gap: 14px; margin: 0 0 28px;
  font: 700 clamp(10px,.95vw,12px) 'Manrope'; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
#heroKick::before { content: ""; width: 44px; height: 1px; background: var(--amber); flex: none; }
#heroTitle { margin: 0; font: 900 clamp(38px,8.2vw,130px)/1.03 'Unbounded';
  letter-spacing: -.01em; text-transform: uppercase; color: var(--ivory); max-width: 14ch; }
#heroTitle .accent { background-image: linear-gradient(115deg, var(--gold), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 34px; margin-top: clamp(30px,5vh,56px); }
#heroSub { margin: 0; max-width: 540px; font: 400 clamp(15px,1.25vw,18px)/1.65 'Manrope'; color: rgba(244,241,234,.78); }
#heroCtas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.hero-foot-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 var(--pad) 26px; }
.hero-scroll { display: flex; align-items: center; gap: 12px; font: 700 10.5px 'Manrope'; letter-spacing: .3em; text-transform: uppercase; color: rgba(244,241,234,.5); }
#ungHintLine { display: block; width: 1px; height: 44px; background: linear-gradient(var(--amber), transparent); animation: ungHint 2.2s ease-in-out infinite; }
.hero-coord { font: 600 10.5px 'Manrope'; letter-spacing: .22em; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --- Stats band --- */
#stats { position: relative; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--bg); }
.stats-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px,9vh,96px) var(--pad) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); margin-top: 44px; }
.stat-cell { padding: 8px clamp(0px,2vw,34px) 46px; }
.stat-cell + .stat-cell { border-left: 1px solid var(--hair); }
.stat-num { display: block; font: 700 clamp(40px,4.6vw,80px)/1 'Unbounded'; letter-spacing: -.02em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.stat-num.tbd { font-size: clamp(20px,2.2vw,30px); color: var(--faint); }
.stat-label { margin: 16px 0 0; font: 600 12px 'Manrope'; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,241,234,.55); }
#seismic { display: block; width: 100%; height: 72px; opacity: .9; }

/* --- Intro --- */
#intro { background: var(--bg); }
.intro-inner { max-width: 1300px; margin: 0 auto; padding: clamp(90px,14vh,170px) var(--pad); }
.intro-state { margin: 0; font: 700 clamp(25px,3.5vw,52px)/1.24 'Unbounded'; letter-spacing: -.01em; color: var(--ivory); max-width: 24ch; }
.intro-copy { margin: 36px 0 0; max-width: 620px; font: 400 clamp(15px,1.2vw,18px)/1.7 'Manrope'; color: rgba(244,241,234,.66); }

/* --- Operations (horizontal pipe) --- */
#ops { position: relative; background: var(--surface); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; }
.ops-inner { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(80px,11vh,120px) 0 clamp(60px,8vh,90px); }
.ops-head { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ops-prog { font: 700 clamp(18px,2vw,26px) 'Unbounded'; color: var(--ivory); font-variant-numeric: tabular-nums; }
.ops-prog span { color: rgba(244,241,234,.35); }
#opsTrack { position: relative; display: flex; gap: clamp(24px,4vw,72px); padding: 34px var(--pad); width: max-content; will-change: transform; margin-top: clamp(36px,6vh,64px); }
.op-panel { position: relative; z-index: 1; flex: 0 0 auto; width: min(76vw,740px); display: flex; flex-direction: column; gap: 20px; }
.op-head { display: flex; align-items: baseline; gap: 16px; }
.op-num { font: 700 clamp(36px,4.2vw,62px)/1 'Unbounded'; color: transparent; -webkit-text-stroke: 1px rgba(244,241,234,.28); transition: -webkit-text-stroke .5s; }
.op-panel h3 { margin: 0; font: 700 clamp(19px,2.1vw,30px) 'Unbounded'; letter-spacing: -.01em; color: var(--ivory); }
.op-art { position: relative; height: min(38vh,380px); background: linear-gradient(155deg,#131A24,#0A0E14); border: 1px solid var(--hair); overflow: hidden; }
.op-art .tag { position: absolute; right: 14px; bottom: 10px; font: 600 10px 'Manrope'; letter-spacing: .26em; color: rgba(244,241,234,.35); }
.op-copy-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.op-copy { margin: 0; max-width: 52ch; font: 400 15px/1.65 'Manrope'; color: rgba(244,241,234,.66); }
.op-metric { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hair); padding: 12px 16px; font: 700 12px 'Manrope'; letter-spacing: .06em; color: var(--gold); white-space: nowrap; }
.op-metric::before { content: ""; width: 6px; height: 6px; background: var(--amber); display: inline-block; transform: rotate(45deg); }
@media (max-width: 920px) { #opsTrack { flex-direction: column; width: auto !important; transform: none !important; } .op-panel { width: 100%; } }

/* --- Depth --- */
#depth { position: relative; background: var(--bg); }
#depthWrap { position: relative; height: 340vh; }
#depthStage { position: relative; height: 100vh; overflow: hidden; }
.depth-radial { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 88%, rgba(255,158,44,.1), transparent 70%); }
.stratum { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(244,241,234,.1); will-change: transform; }
.stratum span { position: absolute; left: var(--pad); top: 12px; display: flex; gap: 16px; align-items: baseline; }
.stratum .s-name { font: 700 11px 'Manrope'; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,241,234,.55); }
.stratum .s-depth { font: 600 11px 'Manrope'; color: rgba(244,241,234,.3); font-variant-numeric: tabular-nums; }
#drillCol { position: absolute; left: 50%; top: 0; height: 82%; width: 2px; margin-left: -1px; z-index: 2; }
#drillLine { width: 100%; height: 100%; background: linear-gradient(rgba(255,198,92,.9), var(--amber)); transform: scaleY(1); transform-origin: top; }
#resGlow { position: absolute; left: 50%; bottom: 2%; width: min(48vw,540px); height: 210px; transform: translateX(-50%); background: radial-gradient(50% 62% at 50% 58%, rgba(255,198,92,.5), rgba(255,158,44,.15) 55%, transparent 78%); filter: blur(6px); z-index: 2; }
.depth-copy { position: absolute; left: var(--pad); top: 14%; z-index: 3; padding-top: 26px; }
.depth-copy h2 { margin: 14px 0 0; font: 700 clamp(26px,3.6vw,50px)/1.06 'Unbounded'; letter-spacing: -.01em; color: var(--ivory); }
.depth-copy .sub { margin: 14px 0 0; font: 400 15px/1.6 'Manrope'; color: rgba(244,241,234,.6); max-width: 34ch; }
.depth-copy .lbl { margin: clamp(20px,5vh,46px) 0 6px; font: 700 10.5px 'Manrope'; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); }
#depthNum { font: 700 clamp(38px,5vw,86px)/1 'Unbounded'; letter-spacing: -.02em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.depth-marks { position: absolute; right: var(--pad); top: 15%; bottom: 8%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; z-index: 3; }
.depth-mark { display: flex; align-items: center; gap: 10px; font: 600 12px 'Manrope'; letter-spacing: .1em; color: rgba(244,241,234,.3); font-variant-numeric: tabular-nums; transition: color .3s; }
.depth-mark-dot { display: inline-block; width: 18px; height: 1px; background: rgba(244,241,234,.25); transition: background .3s; }
#depthChip { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 10px; background: rgba(7,9,13,.72); border: 1px solid rgba(255,158,44,.4); padding: 12px 18px; white-space: nowrap; }
#depthChip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
#depthChip span { font: 700 12px 'Manrope'; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* --- Map --- */
#map { background: var(--bg); border-top: 1px solid var(--hair); }
.map-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(90px,13vh,150px) var(--pad); }
.map-legend { display: flex; gap: 26px; flex-wrap: wrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 9px; font: 600 12px 'Manrope'; color: rgba(244,241,234,.6); }
#mapBox { position: relative; margin-top: 48px; border: 1px solid var(--hair); background: linear-gradient(180deg,#0B1017,#080B10); padding: clamp(10px,2vw,28px); }
.map-node { transform-box: fill-box; transform-origin: center; cursor: pointer; }
.map-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.map-pulse { transform-box: fill-box; transform-origin: center; animation: ungPulse 3.2s ease-out infinite; }
.route-flow { stroke-dasharray: 3 16; opacity: 0; transition: opacity .9s; animation: ungDashMove 7s linear infinite; }
#mapTip { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: opacity .25s; background: rgba(7,9,13,.94); border: 1px solid rgba(255,158,44,.4); padding: 12px 16px; min-width: 180px; z-index: 5; }
#mapTip .n { margin: 0; font: 700 13.5px 'Manrope'; color: var(--ivory); }
#mapTip .ty { margin: 6px 0 0; font: 600 10.5px 'Manrope'; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* --- ESG --- */
#esg { background: var(--surface); border-top: 1px solid var(--hair); position: relative; overflow: hidden; }
.esg-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(80px,12vh,140px) var(--pad); }
.esg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(24px,3vw,48px); margin-top: 52px; }
.esg-card { border-top: 1px solid rgba(244,241,234,.16); padding-top: 22px; }
.esg-card .n { font: 700 12px 'Unbounded'; color: var(--amber); }
.esg-card p { margin: 14px 0 0; font: 600 clamp(16px,1.4vw,20px)/1.5 'Manrope'; color: var(--ivory); }

/* --- News grid --- */
.news-section { background: var(--bg); border-top: 1px solid var(--hair); }
.news-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(90px,13vh,150px) var(--pad); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: clamp(20px,2.4vw,36px); margin-top: 48px; }
.news-card { background: var(--surface); border: 1px solid var(--hair); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .35s, transform .35s; overflow: hidden; }
.news-card:hover { border-color: rgba(255,158,44,.4); transform: translateY(-4px); }
.news-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(150deg,#1A2230,#0A0E14); }
.news-thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.news-card:hover .news-thumb img { transform: scale(1.06); }
.news-thumb .glyph { position: absolute; z-index: 0; right: 16px; bottom: 6px; font: 700 clamp(50px,6vw,92px)/1 'Unbounded'; color: transparent; -webkit-text-stroke: 1px rgba(255,158,44,.3); }
.news-thumb .veil { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,9,13,.55)); }
.news-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 26px; flex: 1; }
.news-date { font: 700 11px 'Manrope'; letter-spacing: .22em; color: var(--faint); font-variant-numeric: tabular-nums; }
.news-card h3 { margin: 0; font: 700 clamp(16px,1.35vw,20px)/1.42 'Manrope'; color: var(--ivory); }
.news-excerpt { margin: 0; font: 400 14px/1.6 'Manrope'; color: rgba(244,241,234,.6); }
.news-more { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font: 800 12px 'Manrope'; letter-spacing: .18em; text-transform: uppercase; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font: 700 9.5px 'Manrope'; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255,158,44,.3); padding: 4px 8px; }

/* --- Page header (sub-pages) --- */
.page-head { padding: calc(74px + clamp(60px,10vh,120px)) 0 clamp(30px,5vh,60px); border-bottom: 1px solid var(--hair); background: var(--surface); position: relative; overflow: hidden; }
.page-head .h1 { margin: 16px 0 0; font: 900 clamp(34px,6vw,84px)/1 'Unbounded'; text-transform: uppercase; letter-spacing: -.01em; }
.page-head .lead { margin: 20px 0 0; max-width: 60ch; font: 400 clamp(15px,1.2vw,18px)/1.6 'Manrope'; color: var(--muted); }
.breadcrumbs { font: 600 11px 'Manrope'; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.breadcrumbs a { color: var(--gold); text-decoration: none; }

/* --- Article --- */
.article-wrap { max-width: 820px; margin: 0 auto; padding: clamp(40px,6vh,72px) var(--pad) clamp(70px,10vh,120px); }
.article-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--hair); margin-bottom: 34px; }
.article-body { font: 400 clamp(16px,1.15vw,18px)/1.75 'Manrope'; color: rgba(244,241,234,.82); }
.article-body h1, .article-body h2, .article-body h3 { font-family: 'Unbounded'; color: var(--ivory); line-height: 1.2; margin: 1.8em 0 .6em; }
.article-body h2 { font-size: clamp(22px,2.4vw,32px); }
.article-body h3 { font-size: clamp(18px,1.9vw,24px); }
.article-body a { color: var(--gold); }
.article-body img { border: 1px solid var(--hair); margin: 1.4em 0; }
.article-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--amber); color: var(--muted); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.source-line { margin-top: 44px; padding: 18px 22px; border: 1px solid rgba(255,158,44,.3); background: rgba(255,158,44,.05); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font: 500 13.5px 'Manrope'; color: var(--muted); }
.source-line a { color: var(--gold); font-weight: 700; text-decoration: none; }
.article-meta { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.other-langs { display: flex; gap: 10px; align-items: center; }
.other-langs a { color: var(--gold); text-decoration: none; font: 700 12px 'Manrope'; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid transparent; }
.other-langs a:hover { border-bottom-color: var(--gold); }

/* --- Leadership --- */
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: clamp(20px,2.2vw,32px); padding: clamp(40px,6vh,72px) 0 clamp(70px,10vh,120px); }
.lead-card { background: var(--surface); border: 1px solid var(--hair); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s; }
.lead-card:hover { border-color: rgba(255,158,44,.35); }
.lead-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(160deg,#1A2230,#0A0E14); }
.lead-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lead-photo .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 clamp(30px,4vw,54px) 'Unbounded'; color: rgba(255,158,44,.3); }
.lead-info { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lead-name { font: 700 17px 'Manrope'; color: var(--ivory); }
.lead-pos { font: 600 13px/1.4 'Manrope'; color: var(--gold); }
.lead-dept { font: 500 12px 'Manrope'; color: var(--faint); margin-top: 2px; }
.lead-contact { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; font: 500 12.5px 'Manrope'; color: var(--muted); }
.lead-contact a { color: var(--muted); text-decoration: none; }
.lead-contact a:hover { color: var(--gold); }

/* --- Tenders --- */
.tender-list { display: flex; flex-direction: column; gap: 14px; padding: clamp(40px,6vh,72px) 0 clamp(70px,10vh,120px); }
.tender-row { background: var(--surface); border: 1px solid var(--hair); padding: 24px clamp(20px,2.4vw,32px); display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; transition: border-color .3s; }
.tender-row:hover { border-color: rgba(255,158,44,.35); }
.tender-main { min-width: 0; }
.tender-title { margin: 0 0 8px; font: 700 clamp(16px,1.4vw,21px)/1.35 'Manrope'; color: var(--ivory); }
.tender-company { font: 600 12px 'Manrope'; letter-spacing: .04em; color: var(--gold); }
.tender-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; white-space: nowrap; }
.tender-deadline { font: 600 13px 'Manrope'; color: var(--muted); font-variant-numeric: tabular-nums; }
.tender-deadline b { color: var(--ivory); font-weight: 700; }
.status-pill { font: 700 10px 'Manrope'; letter-spacing: .16em; text-transform: uppercase; padding: 5px 11px; border: 1px solid; }
.status-pill.open { color: var(--cyan); border-color: rgba(53,214,237,.5); }
.status-pill.closed { color: var(--faint); border-color: var(--hair); }
@media (max-width: 620px) { .tender-row { grid-template-columns: 1fr; } .tender-side { align-items: flex-start; } }

/* --- Pagination --- */
.pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 40px; }
.pager a, .pager span { font: 700 12px 'Manrope'; letter-spacing: .12em; text-transform: uppercase; padding: 12px 18px; border: 1px solid var(--hair); text-decoration: none; color: var(--ivory); }
.pager a:hover { border-color: var(--gold); color: var(--gold); }
.pager .cur { border-color: var(--amber); color: var(--amber); }
.pager .disabled { color: var(--faint); border-color: transparent; }

/* --- Empty state --- */
.empty { padding: clamp(50px,10vh,110px) 0; text-align: center; color: var(--muted); font: 500 16px 'Manrope'; }

/* --- Marquee --- */
.marq-band { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; background: var(--bg); padding: 20px 0; }
.ung-marq { display: flex; width: max-content; animation: ungMarquee 36s linear infinite; }
.marq-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; }
.marq-group span.w { font: 700 clamp(13px,1.05vw,16px) 'Unbounded'; letter-spacing: .06em; color: rgba(244,241,234,.32); text-transform: uppercase; }
.marq-group span.d { width: 7px; height: 7px; background: var(--amber); transform: rotate(45deg); flex: none; opacity: .6; }

/* --- Contact --- */
#contact { background: var(--bg); }
.contact-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(90px,13vh,160px) var(--pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(40px,6vw,110px); }
.contact-row { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--hair); padding: 18px 0; }
.contact-row.last { border-bottom: 1px solid var(--hair); }
.contact-row .l { font: 700 11px 'Manrope'; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.contact-row .v, .contact-row a { font: 600 15px 'Manrope'; color: var(--ivory); text-decoration: none; text-align: right; }
.contact-row a:hover { color: var(--gold); }
form#ungForm { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 700 11px 'Manrope'; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,241,234,.55); }
.field input, .field textarea { background: transparent; border: none; border-bottom: 1px solid rgba(244,241,234,.18); color: var(--ivory); font: 500 17px 'Manrope'; padding: 10px 2px; transition: border-color .3s; border-radius: 0; }
.field textarea { line-height: 1.6; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--amber); }
.f-err { min-height: 15px; font: 600 11.5px 'Manrope'; color: var(--danger); }
#formStatus { margin: 0; min-height: 22px; font: 600 14px 'Manrope'; color: var(--gold); }

/* --- Footer --- */
#ungFooter { background: var(--surface); border-top: 1px solid var(--hair); position: relative; overflow: hidden; }
.foot-word-wrap { padding: clamp(60px,9vh,100px) 0 0; overflow: hidden; white-space: nowrap; text-align: center; }
#footWord { display: inline-block; font: 900 clamp(52px,10.2vw,192px)/.95 'Unbounded'; letter-spacing: -.015em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(244,241,234,.22); background: linear-gradient(180deg, var(--gold), var(--amber)) no-repeat left bottom; background-size: 100% 0%; -webkit-background-clip: text; background-clip: text; transition: background-size .8s cubic-bezier(.22,.75,.2,1); }
#footWord:hover { background-size: 100% 100%; }
.foot-cols { max-width: var(--maxw); margin: clamp(48px,7vh,84px) auto 0; padding: 44px var(--pad) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 38px; border-top: 1px solid var(--hair); }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col .ch { font: 700 11px 'Manrope'; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.foot-col a { font: 500 14px 'Manrope'; color: rgba(244,241,234,.7); text-decoration: none; width: fit-content; }
.foot-col a:hover { color: var(--gold); }
.foot-concept { font: 500 12px/1.6 'Manrope'; color: var(--faint); }
.foot-bar { max-width: var(--maxw); margin: 44px auto 0; padding: 22px var(--pad) 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--hair); }
.foot-copy { font: 500 12.5px 'Manrope'; color: var(--faint); }
.foot-top { font: 700 12px 'Manrope'; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-decoration: none; }

/* --- Reveal helper (JS adds .in) ---
   Only hide when JS is active (html.js, set inline in <head>); without JS the
   content stays visible instead of being stuck invisible forever. */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
html.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #ungGrainEl, #ungHintLine, .map-pulse, .route-flow, .ung-marq { animation: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  #footWord { background-size: 100% 100%; }
}