/* ==========================================================================
   TIGER STRUK — Section Layouts + Responsive
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------- */

.hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-height) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(22, 96, 145, .10), transparent 65%),
    var(--c-white);
}

.hero__stack {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-white);
}

.hero__stack .line {
  display: block;
  overflow: hidden;
}

.hero__stack .line > span {
  display: block;
  transform: translateY(110%);
  animation: hero-rise .9s var(--ease-out) forwards;
}
.hero__stack .line:nth-child(2) > span { animation-delay: .12s; }
.hero__stack .line:nth-child(3) > span { animation-delay: .24s; }

.hero__stack .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--c-steel);
}

@keyframes hero-rise { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero__stack .line > span { transform: none; animation: none; }
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.hero__foot .lead { max-width: 46ch; }

.hero__actions {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.hero__scroll {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-silver);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 56px;
  background: var(--c-orange);
  animation: scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes scroll-pulse {
  50% { transform: scaleY(.45); transform-origin: top; }
}

/* ---- Generic section header ------------------------------------------------ */

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: var(--space-block);
}

.section__head .display,
.section__head .h2 { margin-top: 1rem; max-width: 16ch; }

.section__head .lead { flex-shrink: 1; }

/* ---- Result card (end-to-end highlight) ------------------------------------- */

.result-card {
  margin-top: var(--space-block);
  background: var(--c-navy);
  color: var(--c-ink-inv);
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.result-card .h2 { color: var(--c-white); margin-top: 1rem; }
.result-card > div > p { margin-top: 1.2rem; color: var(--c-ink-inv-soft); max-width: 50ch; }

.result-card__steps { display: grid; gap: 0; }

.result-card__steps li {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-top: 1px solid var(--c-line-inv);
}
.result-card__steps li:first-child { border-top: 0; }

.result-card__steps .n {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--c-orange);
}
.result-card__steps .t {
  font-weight: 700;
  color: var(--c-white);
}
.result-card__steps .d {
  font-size: .9rem;
  color: var(--c-ink-inv-soft);
}

/* ---- Stats band -------------------------------------------------------------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  margin-top: var(--space-block);
}

/* ---- Editorial / products split ------------------------------------------------ */

.editorial { max-width: 110ch; }
.editorial p { margin-top: 1.2rem; color: var(--c-ink-soft); font-size: var(--fs-body-lg); }
.editorial p:first-of-type { margin-top: 1.4rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  margin-top: var(--space-block);
}

/* ---- Panels (Quote + Careers) ---------------------------------------------------- */

.panel-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

/* ---- Locations --------------------------------------------------------------------- */

.loc-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  margin-top: var(--space-block);
}

.loc__facility p {
  margin-top: 1rem;
  color: var(--c-ink-soft);
  max-width: 42ch;
}

.loc__meta {
  margin-top: 1.6rem;
  display: grid;
  gap: .9rem;
  font-size: .93rem;
}
.loc__meta div { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; }
.loc__meta dt {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-silver);
  padding-top: .15em;
}
.loc__meta dd { color: var(--c-ink-soft); }
.loc__meta a { color: var(--c-steel); font-weight: 600; }
.loc__meta a:hover { color: var(--c-orange); }

.loc__zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-content: start;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .service-row {
    grid-template-columns: 60px 1fr auto;
  }
  .service-row__copy { grid-column: 2 / -1; grid-row: 2; }

  .stats-grid,
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .result-card,
  .panel-grid,
  .loc-grid { grid-template-columns: 1fr; }

  .loc__zones { grid-template-columns: repeat(2, 1fr); }

  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav__links{
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;

    min-height: calc(100vh - var(--nav-height));
    max-height: calc(100vh - var(--nav-height));

    overflow-y: auto;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    background: var(--c-white);
    border-bottom: 1px solid var(--c-line);
    padding: .8rem 4vw 1.4rem;

    transform: translateX(-100%);
    pointer-events: none;
}

.nav__links.is-open{
    transform: translateX(0);
    pointer-events: auto;
}
  .nav__links a:not(.btn) { padding-block: .75rem; font-size: 1.05rem; }
  .nav__links .btn { margin-top: .9rem; justify-content: center; }
  .nav__toggle { display: flex; }
  .nav.is-open { background: var(--c-white); }

  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__scroll { display: none; }

  .section__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

  .service-row { grid-template-columns: 48px 1fr; }
  .service-row__link { grid-column: 2; justify-self: start; }

  .stats-grid,
  .feature-grid,
  .loc__zones {grid-template-columns: repeat(2, 1fr);}

  .footer__cols {grid-template-columns: repeat(2, 1fr); }
}

/* ---- Homepage brand hero (navy + handshake) -------------------------------- */

.hero--brand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 540px at 15% -5%, rgba(22, 96, 145, .5), transparent 70%),
    linear-gradient(118deg, #0A2C5C 0%, var(--c-navy) 55%, #00112E 100%);
  border-bottom: 4px solid var(--c-orange);
  color: var(--c-ink-inv);
}

.hero--brand .hero__stack { color: var(--c-white); }
.hero__stack .outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(233, 239, 245, .75);
}
.hero--brand .tag { color: var(--c-ink-inv-soft); }
.hero--brand .lead { color: var(--c-ink-inv-soft); }
.hero--brand .hero__scroll { color: var(--c-ink-inv-soft); }

/* Homepage handshake: larger than inner pages so it fills the tall hero
   and reads as a feature, not a corner accent. Sits low-right of the
   headline so "REINFORCEMENT" stays clear of the steel hand. */
.hero--brand .page-hero__art {
  width: min(50%, 500px);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 34%),
    linear-gradient(to top, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 34%),
    linear-gradient(to top, #000 94%, transparent 100%);
}

@media (max-width: 900px) {
  .hero--brand .page-hero__art { opacity: .25; }
}