/* ============================================================
   TENERCO — Corporate site
   Brand: orange #EE8745 → magenta #B93167  |  deep plum ink + warm white
   Type: Poppins (primary) + IBM Plex Mono (micro-labels / ticker)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* brand */
  --orange:#EE8745;
  --orange-deep:#E8722E;
  --rose:#D9576A;
  --magenta:#B93167;
  --grad: linear-gradient(140deg,#EE8745 0%,#E0635E 45%,#B93167 100%);
  --grad-soft: linear-gradient(140deg,rgba(238,135,69,.16),rgba(185,49,103,.16));

  /* neutrals */
  --ink:#17111A;          /* near-black plum, dark sections */
  --ink-2:#211A28;        /* raised panel on dark */
  --ink-3:#2E2536;        /* hairline on dark */
  --paper:#FBF8F5;        /* warm white page */
  --paper-2:#F2ECE6;      /* alt warm panel */
  --paper-3:#E7DFD7;      /* warm hairline */

  --text:#1C1620;
  --text-soft:#4A434F;
  --muted:#857C8A;
  --muted-d:#A99FB0;      /* muted on dark */
  --line:rgba(28,22,32,.10);
  --line-d:rgba(255,255,255,.12);

  --maxw:1320px;
  --pad: clamp(20px,5vw,64px);
  --sec: clamp(72px,10vw,140px);

  --r-lg:22px;
  --r-md:14px;
  --r-sm:8px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 1px 2px rgba(28,22,32,.04),0 18px 50px -28px rgba(28,22,32,.30);
  --shadow-card:0 2px 4px rgba(28,22,32,.05),0 40px 80px -40px rgba(28,22,32,.40);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--magenta);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad)}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:var(--orange)}

h1,h2,h3{font-weight:600;line-height:1.04;letter-spacing:-.02em}
.display{font-size:clamp(2.6rem,6.6vw,6.2rem);font-weight:600;line-height:.98;letter-spacing:-.035em}
.h2{font-size:clamp(2rem,4.2vw,3.6rem);letter-spacing:-.028em}
.h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.02em}
.lead{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:300;line-height:1.5;color:var(--text-soft)}
.muted{color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:15px 26px;border-radius:100px;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -12px rgba(185,49,103,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(185,49,103,.7)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-2px)}
.btn-ghost.on-dark{border-color:var(--line-d);color:#fff}
.btn-ghost.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}

.tlink{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:15px;color:var(--text)}
.tlink .arrow{transition:transform .4s var(--ease)}
.tlink:hover .arrow{transform:translateX(5px)}
.tlink.on-dark{color:#fff}
.tlink .arrow{color:var(--magenta)}
.tlink.on-dark .arrow{color:var(--orange)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .4s var(--ease);
}
.nav-logo{height:30px;width:auto;transition:opacity .3s}
.nav-logo.light{position:absolute;opacity:1}
.nav-logo.dark{opacity:0}
.nav-logo-wrap{position:relative;display:flex;align-items:center;height:30px;flex:0 0 auto}
.nav-menu{display:flex;align-items:center;gap:4px}
.nav-menu a{
  font-size:14.5px;font-weight:400;color:rgba(255,255,255,.86);
  padding:9px 14px;border-radius:100px;position:relative;transition:color .3s,background .3s;
}
.nav-menu a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-cta{
  font-size:14.5px;font-weight:500;padding:11px 22px;border-radius:100px;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);
  transition:all .3s;
}
.nav-cta:hover{background:#fff;color:var(--ink)}

/* scrolled state -> solid white */
.nav.scrolled{background:rgba(251,248,245,.88);backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(28,22,32,.5)}
.nav.scrolled .nav-inner{padding-block:12px}
.nav.scrolled .nav-logo.light{opacity:0}
.nav.scrolled .nav-logo.dark{opacity:1}
.nav.scrolled .nav-menu a{color:var(--text-soft)}
.nav.scrolled .nav-menu a:hover{color:var(--text);background:rgba(28,22,32,.05)}
.nav.scrolled .nav-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav.scrolled .nav-cta:hover{background:var(--magenta);border-color:var(--magenta)}
.nav.scrolled .burger span{background:var(--text)}

.burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;background:transparent;border:none}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .25s}

/* mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  transform:translateY(-100%);transition:transform .55s var(--ease);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{
  font-size:clamp(1.7rem,7vw,2.6rem);font-weight:500;color:#fff;
  padding:12px 0;border-bottom:1px solid var(--ink-3);letter-spacing:-.02em;
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-menu a span{color:var(--orange);font-size:.5em;font-family:'IBM Plex Mono',monospace}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media image-slot{width:100%;height:100%;position:absolute;inset:0;z-index:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:transparent}
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(23,17,26,.55) 0%,rgba(23,17,26,.30) 35%,rgba(23,17,26,.55) 70%,rgba(23,17,26,.95) 100%);
}
.hero-grad{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 80% 0%,rgba(238,135,69,.22),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(185,49,103,.28),transparent 55%);mix-blend-mode:screen;pointer-events:none}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(40px,7vw,90px)}
.hero h1{color:#fff;max-width:16ch;margin-top:18px}
.hero .lead{color:rgba(255,255,255,.82);max-width:46ch;margin-top:24px;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-corner{position:absolute;z-index:2;top:clamp(96px,12vh,140px);right:var(--pad);text-align:right;color:rgba(255,255,255,.6);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;line-height:1.8}

.scrollcue{position:absolute;left:var(--pad);bottom:26px;z-index:2;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.scrollcue .line{width:1px;height:38px;background:linear-gradient(var(--orange),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{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}}

/* credential strip (replaces product ticker) */
.credbar{position:relative;z-index:3;background:var(--ink);border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
.credbar-inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(4,1fr)}
.cred{padding:30px 0 32px;padding-left:clamp(20px,2.5vw,40px);border-left:1px solid var(--ink-3);display:flex;flex-direction:column;gap:9px}
.cred:first-child{border-left:0;padding-left:0}
.cred .k{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.cred .v{color:#fff;font-size:clamp(1.02rem,1.25vw,1.18rem);font-weight:500;letter-spacing:-.01em;line-height:1.25;max-width:20ch}
@media (max-width:860px){.credbar-inner{grid-template-columns:1fr 1fr}.cred{padding-block:24px}.cred:nth-child(3){border-left:0;padding-left:0}.cred:nth-child(odd){border-left:0;padding-left:0}.cred:nth-child(even){padding-left:clamp(20px,2.5vw,40px);border-left:1px solid var(--ink-3)}}
@media (max-width:460px){.credbar-inner{grid-template-columns:1fr}.cred,.cred:nth-child(even){border-left:0;padding-left:0;padding-block:20px;border-top:1px solid var(--ink-3)}.cred:first-child{border-top:0}}

/* ticker (legacy / unused) */
.ticker{position:relative;z-index:3;background:var(--ink);border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);overflow:hidden}
.ticker-track{display:flex;gap:0;width:max-content;animation:scrollx 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:18px;padding:16px 34px;color:rgba(255,255,255,.82);font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ticker-item .dot{width:5px;height:5px;border-radius:50%;background:var(--grad)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============================================================
   STATEMENT + STATS
   ============================================================ */
.statement{position:relative}
.statement .big{font-size:clamp(1.7rem,3.4vw,3rem);font-weight:300;line-height:1.22;letter-spacing:-.02em;max-width:20ch}
.statement .big b{font-weight:600}
.statement-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,90px);align-items:start}
.statement-side{padding-top:10px}
.statement-side p{color:var(--text-soft);font-size:1.05rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(50px,7vw,90px);border-top:1px solid var(--line);padding-top:clamp(32px,4vw,56px)}
.stat .num{font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.stat .num span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{margin-top:12px;color:var(--muted);font-size:.95rem;max-width:18ch}

/* ============================================================
   DESKS
   ============================================================ */
.desks{background:var(--paper-2)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,70px)}
.sec-head .h2{max-width:16ch;margin-top:18px}
.sec-head p{color:var(--text-soft);max-width:40ch}

.desk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center;margin-bottom:clamp(70px,9vw,130px)}
.desk:last-child{margin-bottom:0}
.desk.flip .desk-text{order:2}
.desk.flip .desk-frame{order:1}
.desk-index{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.16em;color:var(--magenta)}
.desk-text h3{font-size:clamp(1.9rem,3.2vw,2.8rem);margin:14px 0 0;letter-spacing:-.03em}
.desk-text .url{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--muted);margin-top:8px}
.desk-text p{color:var(--text-soft);margin-top:20px;max-width:46ch}
.desk-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tag{font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:100px;background:rgba(28,22,32,.05);color:var(--text-soft);border:1px solid var(--line)}
.desk-text .tlink{margin-top:30px}

/* browser frame */
.browser{
  border-radius:var(--r-md);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-card);border:1px solid var(--line);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.desk-frame:hover .browser{transform:translateY(-8px);box-shadow:0 50px 90px -45px rgba(28,22,32,.5)}
.browser-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#f4f1ee;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.browser-url{flex:1;background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 14px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-soft);display:flex;align-items:center;gap:8px}
.browser-url .lock{width:11px;height:11px;color:var(--muted)}
.browser-body{aspect-ratio:16/10;position:relative;background:var(--ink)}
.browser-body image-slot{width:100%;height:100%}

/* coming soon desk */
.desk.soon .browser-body{display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#241a2b,#17111a)}
.soon-inner{text-align:center;color:#fff;padding:30px}
.soon-inner .badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:7px 15px;border-radius:100px;border:1px solid rgba(255,255,255,.25);color:var(--orange);margin-bottom:18px}
.soon-inner h4{font-size:1.6rem;font-weight:600;letter-spacing:-.02em}
.soon-inner p{color:var(--muted-d);font-size:.95rem;margin-top:8px}
.soon-mark{width:54px;height:auto;margin:0 auto 18px;opacity:.9}

/* ============================================================
   COMMODITIES (dark)
   ============================================================ */
.commodities{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.commodities .glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 85% 10%,rgba(238,135,69,.14),transparent 60%),radial-gradient(50% 50% at 5% 95%,rgba(185,49,103,.18),transparent 60%);pointer-events:none}
.commodities .wrap{position:relative;z-index:1}
.commodities .sec-head p{color:var(--muted-d)}
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-3);border:1px solid var(--ink-3);border-radius:var(--r-md);overflow:hidden}
.comm-cell{
  background:var(--ink);padding:clamp(26px,3vw,40px);min-height:230px;
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  position:relative;transition:background .45s var(--ease);overflow:hidden;
}
.comm-cell:hover{background:var(--ink-2)}
.comm-cell.wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-height:auto;gap:40px;flex-wrap:wrap}
.comm-cell.wide .cw-left{max-width:30ch}
.comm-cell.wide .badge2{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.22);color:var(--orange);white-space:nowrap}
.comm-cell::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad);transition:width .5s var(--ease)}
.comm-cell:hover::before{width:100%}
.comm-cell .no{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted-d);letter-spacing:.14em}
.comm-cell h4{font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:600;letter-spacing:-.02em}
.comm-cell .spec{color:var(--muted-d);font-size:.92rem;margin-top:8px;line-height:1.5}
.comm-cell .grades{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.comm-cell .grades span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.7);border:1px solid var(--ink-3);padding:4px 9px;border-radius:6px}

/* ============================================================
   GLOBAL PRESENCE
   ============================================================ */
.global{background:var(--ink);color:#fff;position:relative;border-top:1px solid var(--ink-3)}
.global-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.global h2{margin-top:18px}
.global p{color:var(--muted-d);margin-top:22px;max-width:42ch}
.global .btn-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.map-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:0;aspect-ratio:4/3;background:transparent}
.map-wrap image-slot{width:100%;height:100%}
.map-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.map-pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(238,135,69,.6)}
.pin::after{content:attr(data-c);position:absolute;left:16px;top:-4px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.85);white-space:nowrap}
.pin{animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(238,135,69,.55)}70%{box-shadow:0 0 0 14px rgba(238,135,69,0)}100%{box-shadow:0 0 0 0 rgba(238,135,69,0)}}

/* ============================================================
   NEWS
   ============================================================ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.card-media{aspect-ratio:16/10;background:var(--ink)}
.card-media image-slot{width:100%;height:100%}
.card-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.card-meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);display:flex;gap:12px}
.card-meta .d{color:var(--muted)}
.card-body h4{font-size:1.18rem;font-weight:600;letter-spacing:-.02em;margin-top:14px;line-height:1.25}
.card-body .tlink{margin-top:auto;padding-top:22px;font-size:14px}

/* ============================================================
   CAREERS + CONTACT
   ============================================================ */
.split-cta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cta-cell{background:var(--paper);padding:clamp(36px,5vw,64px);display:flex;flex-direction:column;gap:22px;min-height:340px;justify-content:flex-end;position:relative;overflow:hidden;transition:background .4s}
.cta-cell.accent{background:var(--ink);color:#fff}
.cta-cell.accent .lead{color:var(--muted-d)}
.cta-cell .eyebrow{margin-bottom:auto}
.cta-cell h3{font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.025em}
.cta-cell .glow2{position:absolute;inset:0;background:var(--grad);opacity:.0;transition:opacity .5s;pointer-events:none}
.cta-cell.accent::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:var(--grad);filter:blur(60px);opacity:.4}

/* single full-width careers band */
.careers-band{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(30px,5vw,70px);background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(40px,6vw,80px);position:relative;overflow:hidden}
.careers-band::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:var(--grad);filter:blur(80px);opacity:.32;pointer-events:none}
.careers-band .cb-text{position:relative;z-index:1}
.careers-band h3{font-size:clamp(1.8rem,3.2vw,2.8rem);letter-spacing:-.03em;margin-top:16px}
.careers-band .lead{color:var(--muted-d);margin-top:18px;max-width:42ch}
.careers-band .cb-aside{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;align-items:flex-start;justify-self:end}
.careers-band .cb-aside .btn{align-self:flex-start}
.careers-band .cb-aside .note{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
@media (max-width:860px){.careers-band{grid-template-columns:1fr;gap:28px}.careers-band .cb-aside{justify-self:start}}

/* standalone page header offset (nav clearance on dark) */
.page-lead{padding-top:clamp(150px,17vh,220px)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:#fff;padding-top:clamp(64px,8vw,110px)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(30px,4vw,60px);padding-bottom:60px;border-bottom:1px solid var(--ink-3)}
.footer-brand img{height:34px;width:auto;max-width:none}
.footer-brand p{color:var(--muted-d);margin-top:22px;max-width:34ch;font-size:.95rem}
.footer-brand .slogan{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-top:26px}
.fcol h5{font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);margin-bottom:20px;font-weight:500}
.fcol a{display:block;color:rgba(255,255,255,.82);padding:8px 0;font-size:.98rem;transition:color .25s,padding-left .3s}
.fcol a:hover{color:var(--orange);padding-left:5px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px 0 40px}
.footer-bottom .legal{color:var(--muted-d);font-size:.85rem;display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom .legal a:hover{color:#fff}
.footer-bottom .copy{color:var(--muted-d);font-size:.85rem}

/* ============================================================
   REVEAL ANIM
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ticker-track,.scrollcue .line,.pin{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   COMMODITIES — SUB HERO (hub + category pages)
   ============================================================ */
.subhero{position:relative;min-height:62vh;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.subhero .hero-media{position:absolute;inset:0;z-index:0}
.subhero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:transparent}
.subhero .hero-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(23,17,26,.6) 0%,rgba(23,17,26,.42) 42%,rgba(23,17,26,.93) 100%)}
.subhero-grad{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 85% 0%,rgba(238,135,69,.20),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(185,49,103,.26),transparent 55%);mix-blend-mode:screen;pointer-events:none}
.subhero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(122px,16vh,180px) var(--pad) clamp(40px,6vw,74px)}
.crumb{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:6px}
.crumb a{color:rgba(255,255,255,.62);transition:color .3s}
.crumb a:hover{color:var(--orange)}
.crumb .sep{opacity:.45}
.crumb .here{color:var(--orange)}
.subhero h1{color:#fff;max-width:18ch;margin-top:16px}
.subhero .lead{color:rgba(255,255,255,.82);max-width:56ch;margin-top:22px;font-weight:300}
.subhero .cat-tags{margin-top:26px}
.subhero .tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.86)}

/* ============================================================
   COMMODITIES — CATEGORY BLOCKS (hub)
   ============================================================ */
.cat-stack{display:flex;flex-direction:column;gap:clamp(26px,3.4vw,44px)}
.cat-block{display:block;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.cat-block:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent}
.cat-head{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:start;padding:clamp(28px,3.4vw,46px);border-bottom:1px solid var(--line)}
.cat-no{font-family:'IBM Plex Mono',monospace;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;padding-top:4px}
.cat-meta{max-width:62ch}
.cat-meta h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.025em}
.cat-meta .cat-desc{color:var(--text-soft);margin-top:12px;max-width:56ch}
.cat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cat-go{display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:14.5px;color:var(--text);white-space:nowrap;padding-top:4px}
.cat-go .pill{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);color:var(--text);transition:background .4s var(--ease),border-color .4s,color .4s,transform .4s}
.cat-go .pill svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.cat-block:hover .cat-go .pill{background:var(--grad);border-color:transparent;color:#fff}
.cat-block:hover .cat-go .pill svg{transform:translateX(3px)}

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.prod{padding:clamp(24px,2.6vw,34px);border-left:1px solid var(--line);transition:background .4s}
.prod:first-child{border-left:0}
.cat-block:hover .prod{background:linear-gradient(180deg,rgba(238,135,69,.035),transparent)}
.prod h4{font-size:1.16rem;font-weight:600;letter-spacing:-.02em}
.prod p{color:var(--text-soft);font-size:.94rem;margin-top:8px;line-height:1.5;max-width:34ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chips span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-soft);border:1px solid var(--line);padding:4px 9px;border-radius:6px;background:var(--paper)}

/* ============================================================
   COMMODITIES — PRODUCT DETAIL (sub-pages)
   ============================================================ */
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center;margin-bottom:clamp(58px,8vw,110px)}
.pdetail:last-child{margin-bottom:0}
.pdetail.flip .pd-text{order:2}
.pdetail.flip .pd-media{order:1}
.pd-index{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.16em;color:var(--magenta)}
.pd-text h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:14px 0 0;letter-spacing:-.03em}
.pd-text p{color:var(--text-soft);margin-top:18px;max-width:48ch}
.pd-text .chips{margin-top:24px}
.pd-media{border-radius:var(--r-md);overflow:hidden;border:0;aspect-ratio:4/3;background:transparent;box-shadow:var(--shadow-soft)}
.pd-media image-slot{width:100%;height:100%}

/* generic dark CTA band (reused on sub-pages) */
.cta-band{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(30px,5vw,70px);background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(40px,6vw,80px);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:var(--grad);filter:blur(80px);opacity:.32;pointer-events:none}
.cta-band .cb-text{position:relative;z-index:1}
.cta-band h3{font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.03em;margin-top:16px}
.cta-band .lead{color:var(--muted-d);margin-top:18px;max-width:42ch}
.cta-band .cb-aside{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;align-items:flex-start;justify-self:end}
.cta-band .cb-aside .note{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
@media (max-width:860px){.cta-band{grid-template-columns:1fr;gap:26px}.cta-band .cb-aside{justify-self:start}}

@media (max-width:860px){
  .cat-head{grid-template-columns:auto 1fr}
  .cat-go{grid-column:1/-1;justify-content:flex-start}
  .prod-grid{grid-template-columns:1fr}
  .prod{border-left:0;border-top:1px solid var(--line)}
  .prod:first-child{border-top:0}
}
@media (max-width:720px){
  .pdetail{grid-template-columns:1fr;gap:26px}
  .pdetail.flip .pd-text{order:1}.pdetail.flip .pd-media{order:2}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-menu{display:none}
  .nav-right .nav-cta{display:none}
  .burger{display:flex}
  .statement-grid{grid-template-columns:1fr;gap:34px}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .comm-grid{grid-template-columns:repeat(2,1fr)}
  .global-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .desk{grid-template-columns:1fr;gap:28px}
  .desk.flip .desk-text{order:1}.desk.flip .desk-frame{order:2}
  .stats{grid-template-columns:1fr 1fr}
  .comm-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .split-cta{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .hero-corner{display:none}
}
@media (max-width:460px){
  .stats{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}