/* Prevent any homepage content from causing horizontal overflow */
#main-content {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================================
   OITO-80 , home.css  (index.html only)
   ============================================================ */

/* ── HERO ── */
.hero {
  position: relative;
  height: 92vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 100vw;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; width: 100%; }
.hero-parallax {
  position: absolute;
  top: -15%;
  left: 0;
  right: 0;
  bottom: -15%;
  width: 100%;
  height: 130%;
  overflow: hidden;
}
.hero-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.15) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px 80px;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: ''; width: 28px; height: 2px;
  background: var(--blue); display: block; flex-shrink: 0;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 68px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 28px;
}
.hero-h1 .accent { color: var(--blue); display: block; }
.hero-body {
  font-size: 17px; font-weight: 300;
  line-height: 1.72; color: rgba(255,255,255,0.72);
  max-width: 500px; margin-bottom: 44px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute; bottom: 36px; right: 48px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  writing-mode: vertical-rl;
}
.scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:scaleY(.8); }
  50%      { opacity:1;  transform:scaleY(1); }
}

/* ── SERVICES STRIP ── */
.services-strip { background: var(--black); }
.services-strip-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5,1fr);
  border-left: 1px solid rgba(255,255,255,0.06);
}
.strip-item {
  padding: 44px 28px;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 10px;
  transition: background 0.3s;
  position: relative; overflow: hidden;
}
.strip-item::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 100%;
  height: 2px; background: var(--blue);
  transition: right 0.4s var(--ease);
}
.strip-item:hover::before { right: 0; }
.strip-item:hover { background: rgba(255,255,255,0.03); }
.strip-num { font-size: 10px; font-weight: 700; letter-spacing: .15em; color: rgba(255,255,255,.2); }
.strip-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--white); line-height: 1.1;
}
.strip-arrow {
  margin-top: auto; color: rgba(255,255,255,.2);
  font-size: 16px; transition: color .2s, transform .2s;
}
.strip-item:hover .strip-arrow { color: var(--blue); transform: translateX(4px); }

/* ── SPLIT ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
  /* Ensure sections are flush , no margin, no gap */
  margin: 0;
  padding: 0;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-media {
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.split-media:hover img { transform: scale(1.04); }
.split-content {
  padding: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;
}
.split-content.bg-gray  { background: var(--gray-f5); }
.split-content.bg-dark  { background: var(--black); }
.section-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.section-tag::before { content:''; width:20px; height:2px; background:var(--blue); flex-shrink:0; }
.split-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px,3vw,46px);
  font-weight: 800; text-transform: uppercase;
  line-height: .95; letter-spacing: .02em; margin-bottom: 22px;
}
.split-body {
  font-size: 16px; font-weight: 400;
  line-height: 1.8; color: #555; margin-bottom: 36px;
}
.split-content.bg-dark .split-h2 { color: var(--white); }
.split-content.bg-dark .split-body { color: rgba(255,255,255,.6); }

/* ── METRICS ── */
.metrics { background: var(--blue); padding: 72px 48px; }
.metrics-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 2px;
}
.metric { padding: 44px 36px; background: rgba(255,255,255,.05); text-align: center; }
.metric-num {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 800;
  color: var(--white); line-height: 1; margin-bottom: 8px;
}
.metric-unit { font-size: 26px; color: rgba(255,255,255,.4); }
.metric-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* ── FULL-WIDTH IMAGE BAND ── */
.img-band {
  position: relative; height: 62vh; min-height: 440px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.img-band-bg { position: absolute; inset: 0; }
.img-band-bg img { width:100%; height:100%; object-fit:cover; }
.img-band-overlay { position:absolute; inset:0; background:rgba(0,0,0,.62); }
.img-band-content { position:relative; z-index:2; text-align:center; padding:40px; }
.img-band-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px,5vw,64px);
  font-weight: 800; text-transform: uppercase;
  color: var(--white); line-height: .95; margin-bottom: 24px;
}
.img-band-body {
  font-size: 17px; font-weight: 300;
  color: rgba(255,255,255,.68);
  max-width: 460px; margin: 0 auto 36px; line-height: 1.7;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero-content { padding: 0 24px 60px; }
  .services-strip-inner { grid-template-columns: 1fr 1fr; }
  .strip-item { padding: 32px 20px; }
  .split, .split.reverse { grid-template-columns: 1fr; direction: ltr; }
  .split-media { min-height: 340px; }
  .metrics { padding: 60px 24px; }
  .metrics-inner { grid-template-columns: repeat(2,1fr); }
  .metric { padding: 32px 20px; }
  .split-content { padding: 56px 32px; }
}
@media (max-width: 640px) {
  /* Hero */
  .hero { height: 92vh; min-height: 500px; }
  .hero-h1 { font-size: 28px; line-height: 1; }
  .hero-content { padding: 0 20px 56px; width: 100%; box-sizing: border-box; }
  .hero-h1, .hero-body, .hero-eyebrow {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hero-parallax {
    transform: none !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-parallax img { width: 100%; height: 100%; object-fit: cover; }
  .hero-scroll { display: none; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  /* Services strip */
  .services-strip-inner { grid-template-columns: 1fr; }
  .strip-item { padding: 24px 20px; }
  /* Split */
  .split-content { padding: 40px 20px; }
  /* Metrics */
  .metrics { padding: 48px 20px; }
  .metrics-inner { grid-template-columns: 1fr 1fr; }
  .metric { padding: 24px 16px; }
  /* Image band */
  .img-band-content { padding: 24px 20px; }
  .img-band-body { max-width: 100%; }
}

/* ── Ensure split sections are flush , no gaps anywhere ── */
section.split, section.split.reverse {
  margin: 0;
  padding: 0;
}

/* Split media must always fill its grid cell regardless of animation state */
.split-media.reveal-left,
.split-media.reveal-right {
  /* Override reveal transform , only animate opacity for media cells
     to prevent layout gaps during animation */
  transform: none !important;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.split-media.reveal-left.in,
.split-media.reveal-right.in {
  opacity: 1;
}