/* =========================================================
   LUMENS — gateway.css
   Neutral, sits between both brand worlds. Script logotype,
   sans body, split-screen choice with hover expansion.
========================================================= */
:root{
  --gw-bg: #141414;
  --gw-ink: #F2F1EE;
  --gw-line: rgba(242,241,238,0.16);
  --gw-social: #0B0B0B;
  --gw-industrial: #1C1B16;
  --gw-safety: #E8B930;
}

body.gw{
  background: var(--gw-bg);
  color: var(--gw-ink);
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  display:flex; flex-direction:column;
}
.gw .grain{ opacity: 0.05; mix-blend-mode: overlay; }

.gw-mark{
  position:absolute; top: 28px; left:0; right:0; z-index: 5;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  pointer-events:none;
}
.gw-logo{
  font-family: "Beau Rivage", cursive;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
}
.gw-logo-img{
  height: 40px;
  width: auto;
  max-height: 40px;
  display: block;
}
.gw-logo-sub{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(242,241,238,0.55);
}

.gw-split{
  flex:1;
  display:flex;
  min-height: 100vh;
}

.gw-panel{
  position:relative;
  flex: 1;
  display:flex; align-items:flex-end;
  padding: 48px clamp(24px, 4vw, 56px);
  overflow:hidden;
  transition: flex .55s cubic-bezier(.22,.61,.36,1);
}
.gw-split:hover .gw-panel{ flex: 0.82; }
.gw-split .gw-panel:hover{ flex: 1.28; }

.gw-panel--social{
  background:
    radial-gradient(120% 90% at 30% 100%, rgba(255,255,255,0.06), transparent 60%),
    var(--gw-social);
}
.gw-panel--industrial{
  background:
    repeating-linear-gradient(135deg, rgba(232,185,48,0.05) 0 2px, transparent 2px 26px),
    radial-gradient(120% 90% at 70% 100%, rgba(232,185,48,0.08), transparent 60%),
    var(--gw-industrial);
}

.gw-panel-inner{ max-width: 420px; }
.gw-panel-eyebrow{
  display:block; font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 0.16em; margin-bottom: 14px;
}
.gw-panel--social .gw-panel-eyebrow{ color: rgba(242,241,238,0.5); }
.gw-panel--industrial .gw-panel-eyebrow{ color: var(--gw-safety); }

.gw-panel-title{
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.gw-panel--industrial .gw-panel-title{ text-transform: uppercase; letter-spacing: 0; }

.gw-panel-sub{
  font-size: 14.5px; color: rgba(242,241,238,0.65); margin: 0 0 26px; max-width: 320px;
}
.gw-panel-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: 0.06em;
  padding: 12px 20px; border: 1px solid var(--gw-line);
  transition: border-color .3s, background .3s, color .3s, gap .3s;
}
.gw-panel-cta span{ transition: transform .3s; }
.gw-panel:hover .gw-panel-cta{ background: var(--gw-ink); color: var(--gw-social); border-color: var(--gw-ink); }
.gw-panel--industrial:hover .gw-panel-cta{ background: var(--gw-safety); color: #1C1B16; border-color: var(--gw-safety); }
.gw-panel:hover .gw-panel-cta span{ transform: translateX(3px); }

.gw-divider{
  position: relative; z-index: 2;
  display:flex; align-items:center; justify-content:center;
  width: 64px; background: var(--gw-bg);
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  color: rgba(242,241,238,0.4);
}

.gw-footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 18px clamp(20px, 4vw, 56px);
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: rgba(242,241,238,0.45);
  border-top: 1px solid var(--gw-line);
}
.gw-footer a:hover{ color: var(--gw-ink); }

@media (max-width: 760px){
  .gw-mark{ position:static; padding-top: 40px; }
  .gw-split{ flex-direction: column; min-height:auto; }
  .gw-split:hover .gw-panel, .gw-split .gw-panel:hover{ flex: none; }
  .gw-panel{ padding: 40px 24px; min-height: 46vh; }
  .gw-divider{ width:100%; padding: 10px 0; }
}