/* SteelPro landing: the chooser. Two arms side by side, the company in one line above and below.
   Tokens match the homepage-refresh branch (logo yellow #fdcf08). */
:root {
  --ink: #0b0d10;
  --charcoal: #14171b;
  --line: #2a2e34;
  --paper: #f4f4f2;
  --muted: #9aa0a8;
  --accent: #fdcf08;
  --on-accent: #0b0d10;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.dot { color: var(--accent); margin: 0 10px; }

.preview-bar {
  background: var(--accent); color: var(--on-accent);
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 6px 16px;
}

/* ---------- top: logo, one line of company facts, language ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
}
.logo img { height: 44px; width: auto; display: block; }
.top-line { color: var(--muted); white-space: nowrap; }
.top-tools { justify-self: end; }
.lang {
  background: none; border: 1px solid var(--line); color: var(--paper);
  padding: 8px 12px; cursor: pointer;
}
.lang:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- the two arms ---------- */
.arms {
  flex: 1 0 auto;
  display: flex;
  min-height: 520px;
  gap: 2px;
  background: var(--line);
}
.arm {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow 600ms var(--ease);
  outline: none;
}
.arm-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transform: scale(1.02);
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
  filter: saturate(.85) brightness(.85);
}
.arm-steel .arm-img { object-position: 60% 50%; }
.arm-studio .arm-img { object-position: 50% 50%; }
.arm-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(11,13,16,.95) 0%, rgba(11,13,16,.65) 38%, rgba(11,13,16,.15) 75%),
    linear-gradient(90deg, rgba(11,13,16,.35), rgba(11,13,16,0) 60%);
  transition: opacity 600ms var(--ease);
}
.arm-body {
  display: flex; flex-direction: column; gap: 16px;
  padding: 48px clamp(20px, 2.4vw, 40px) 56px;
  max-width: 620px;
}
.arm-no { color: var(--accent); }
.arm-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(64px, 9vw, 148px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.arm-text { font-size: 18px; line-height: 1.55; color: #d3d6da; max-width: 46ch; min-height: calc(1.55em * 3); }
.arm-tags { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); }
.arm-tags span { border: 1px solid rgba(244,244,242,.18); padding: 5px 9px; }
.arm-cta {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  height: 52px; padding: 0 24px;
  font: 500 15px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(244,244,242,.45);
  transition: background 250ms, color 250ms, border-color 250ms;
}
.arrow { display: inline-block; transition: transform 300ms var(--ease); }

/* hover / focus: the chosen arm opens up, the other one steps back */
@media (hover: hover) {
  .arms:hover .arm { flex-grow: .8; }
  .arms .arm:hover { flex-grow: 1.25; }
  .arms:hover .arm:not(:hover) .arm-img { filter: saturate(.4) brightness(.45); }
}
.arm:hover .arm-img, .arm:focus-visible .arm-img { transform: scale(1.06); filter: saturate(1) brightness(.95); }
.arm:hover .arm-cta, .arm:focus-visible .arm-cta { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.arm:hover .arrow, .arm:focus-visible .arrow { transform: translateX(5px); }
.arm:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

/* ---------- bottom: the one-line pitch + contact ---------- */
.bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap;
  padding: 20px 32px;
  border-top: 1px solid var(--line);
}
.bottom-statement { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; }
.bottom-contact { color: var(--muted); }
.bottom-contact a:hover { color: var(--accent); }

/* ---------- small screens: stack the arms ---------- */
@media (max-width: 860px) {
  .top { grid-template-columns: auto 1fr; padding: 12px 16px; }
  .top-line { display: none; }
  .arms { flex-direction: column; min-height: 0; }
  .arm { min-height: 62vh; flex: none; }
  .arm-body { padding: 32px 16px 36px; gap: 12px; }
  .arm-text { font-size: 16px; min-height: 0; }
  .bottom { padding: 20px 16px; }
  .bottom-statement { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .arm, .arm-img, .arrow { transition: none; }
}

/* Georgian: Oswald / Plex have no Georgian glyphs and Georgian has no capitals */
:lang(ka) { --font-display: "Noto Sans Georgian", "Sylfaen", "BPG Arial", "Oswald", sans-serif; --font-body: "Noto Sans Georgian", "Sylfaen", "BPG Arial", "Source Sans 3", sans-serif; --font-mono: "Noto Sans Georgian", "IBM Plex Mono", monospace; }
:lang(ka) * { text-transform: none !important; }
:lang(ka) .arm-title { font-size: clamp(44px, 6.5vw, 112px); line-height: 1.2; }  /* Georgian letters have long tails: 0.9 line-height made them hit the text below */
.top-tools .nav-lang { font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; color: inherit; opacity: .75; border: 1px solid currentColor; padding: 5px 8px; text-decoration: none; }
.top-tools .nav-lang:hover { opacity: 1; }

/* ---------- theme toggle (header stays dark in both themes) ---------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper); cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.top-tools { display: flex; align-items: center; gap: 10px; }

/* ---------- light theme: same palette as the steel pages; top and bottom bars stay dark for the logo ---------- */
[data-theme="light"] {
  --ink: #e4e0d8; --charcoal: #d9d4ca; --panel: #eeebe5; --line: #c6c0b4;
  --paper: #16181c; --muted: #5b5f66; --accent: #92400e; --on-accent: #ffffff;
}
[data-theme="light"] .top, [data-theme="light"] .bottom {
  --ink: #0b0d10; --charcoal: #14171b; --panel: #1b1f24; --line: #2a2e34;
  --paper: #f4f4f2; --muted: #9aa0a8; --accent: #fdcf08; --on-accent: #0b0d10;
  background: var(--ink); color: var(--paper);
}
/* The photo panels keep the dark treatment in light mode too: with no box behind it, text over a
   full-strength photo is only readable as light text on a shaded image. */
[data-theme="light"] .arms {
  --ink: #0b0d10; --charcoal: #14171b; --panel: #1b1f24; --line: #2a2e34;
  --paper: #f4f4f2; --muted: #9aa0a8; --accent: #fdcf08; --on-accent: #0b0d10;
  color: var(--paper);
}