/* ===================================================================
   CARTFIT.AI · company.css
   section 03 — company / about
   left: belief + facts (all left-aligned) · right: pseudo-3D speed bars
   load order matters — see index.html
   =================================================================== */

/* =================================================================
   03 / COMPANY
   ================================================================= */
.company {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(24px, 3.5vh, 48px);
}

.co-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(36px, 4vw, 80px);
  min-height: 0;
}

/* --- left: text, all left-aligned --- */
.co-lead { display: flex; flex-direction: column; min-width: 0; }
.co-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  margin-bottom: 30px;
}
.co-eyebrow__rule {
  display: inline-block; width: 72px; height: 1px;
  background: var(--line-3);
}
.co-statement {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 66px);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--fg-0);
}
.co-statement .co-line { display: block; white-space: nowrap; }
.co-statement .co-line.is-decoding {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.co-en {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 22px;
  opacity: 0;
  transform: translateY(8px);
}
.company.is-active .co-en {
  animation: coPoetic .7s cubic-bezier(.2,.6,.2,1) .45s forwards;
}
@keyframes coPoetic { to { opacity: 1; transform: none; } }
@keyframes coRule { to { transform: scaleX(1); } }

/* secondary — facts (under the statement, left column) */
.co-facts {
  margin-top: clamp(26px, 3.4vh, 44px);
  display: flex; flex-direction: column; gap: 14px;
}
.co-facts__rule { display: none; }
.co-facts__p {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(12px, 1.02vw, 14.5px);
  letter-spacing: 0.03em;
  color: var(--fg-2);
  display: flex; flex-direction: column; gap: 9px;
}
.co-facts__line { display: block; white-space: nowrap; line-height: 1.5; }
.co-facts__line strong { font-weight: 500; color: var(--fg-1); }
.co-facts__p strong { font-weight: 500; color: var(--fg-1); }

/* --- right: tilted flat speed-lanes (per provided sketch) --- */
.co-graphic {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 26px; min-width: 0; align-self: stretch;
}
.co-plane {
  --g: #b6ff00; --g2: #6aff1f;
  position: relative;
  width: 100%;
  height: clamp(320px, 50vh, 460px);
  transform: perspective(900px) rotateX(56deg) rotateZ(-32deg);
  transform-origin: 55% 48%;
}
.co-plane .lane {
  position: absolute; left: 18%;
  height: clamp(16px, 3vw, 42px);
  border-radius: 1px;
  transform: skewX(-28deg);
  filter: drop-shadow(0 0 18px rgba(182,255,0,.16));
  animation: laneFloat 6s ease-in-out infinite alternate;
}
.lane.g1 { top:16%; width:82%; background:linear-gradient(90deg,transparent,rgba(182,255,0,.22),var(--g),rgba(182,255,0,.72)); }
.lane.g2 { top:24%; left:8%; width:76%; height:clamp(12px,2.4vw,32px); background:linear-gradient(90deg,transparent,var(--g2),var(--g)); animation-delay:-1s; }
.lane.g3 { top:34%; left:0; width:93%; height:clamp(8px,1.6vw,22px); background:linear-gradient(90deg,transparent,rgba(182,255,0,.18),var(--g)); animation-delay:-2.2s; }
.lane.w1 { top:44%; left:22%; width:56%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),#fff); filter:none; animation-delay:-.5s; }
.lane.w2 { top:56%; left:36%; width:48%; height:clamp(12px,2.6vw,34px); background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),#f7f7f3); filter:none; animation-delay:-3.1s; }
.lane.short { top:63%; left:48%; width:24%; height:clamp(14px,2.8vw,36px); background:linear-gradient(90deg,var(--g),rgba(182,255,0,.7)); animation-delay:-1.8s; }
.lane.d1 { top:8%; left:5%; width:94%; height:4px; background:rgba(255,255,255,.28); filter:none; }
.lane.d2 { top:70%; left:16%; width:72%; height:5px; background:rgba(255,255,255,.18); filter:none; animation-delay:-4s; }
.lane.d3 { top:78%; left:2%; width:82%; height:3px; background:rgba(182,255,0,.45); filter:none; }
@keyframes laneFloat {
  from { transform: skewX(-28deg) translateX(-10px); }
  to   { transform: skewX(-28deg) translateX(18px); }
}

.co-graphic__cap { position: absolute; inset: 0; pointer-events: none; }
.co-callout {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-1); white-space: nowrap;
}
.co-callout__sq {
  width: 7px; height: 7px; border: 1px solid var(--accent); flex: none;
}
.co-callout__ln { width: 26px; height: 1px; background: var(--line-3); flex: none; }
.co-callout--tr, .co-callout--br { flex-direction: row-reverse; }
.co-callout--tl { top: 15%; left: -3%; }
.co-callout--tr { top: 5%;  right: -1%; }
.co-callout--bl { bottom: 27%; left: -1%; }
.co-callout--br { bottom: 12%; right: -3%; }

@media (prefers-reduced-motion: reduce) {
  .co-en { opacity: 1; transform: none; }
  .company.is-active .co-en { animation: none; }
  .co-plane .lane { animation: none; }
}

/* EN mode — latin copy runs longer; allow line wrapping */
html[lang="en"] .co-statement .co-line { white-space: normal; }
html[lang="en"] .co-facts__line { white-space: normal; }

/* =================================================================
   responsive — company
   ================================================================= */
@media (max-width: 768px) {
  .company { gap: 28px; }
  .co-body {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
  }
  .co-statement .co-line { white-space: normal; }
  .co-facts__p { white-space: normal; gap: 14px; line-height: 1.9; }
  .co-facts__line { white-space: normal; }
  .co-plane { height: 300px; transform: perspective(760px) rotateX(56deg) rotateZ(-30deg); }
  .co-graphic__cap { gap: 8px 20px; }
}