/* General Power — v5: ISO on light, plus richer homepage motion.
   Every effect is disabled under prefers-reduced-motion at the end of the file. */

/* ============================================================
   ISO CARDS ON A LIGHT SECTION
   ============================================================ */
.section--alt .iso-card,
.section .iso-card {
  background: #fff;
  border: 1px solid var(--border);
}
.section--alt .iso-card:hover,
.section .iso-card:hover { border-color: var(--brand-blue); }
.iso-card__img {
  height: 190px;
  filter: drop-shadow(0 8px 18px rgba(10,22,40,.10));
  transition: transform 420ms var(--ease-out);
}
.iso-card:hover .iso-card__img { transform: scale(1.05) rotate(-1.5deg); }

/* ============================================================
   1. HERO — layered entrance + slow drift
   ============================================================ */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.page-home .hero__eyebrow { animation: heroRise 800ms var(--ease-out) 120ms both; }
.page-home .hero__title   { animation: heroRise 900ms var(--ease-out) 260ms both; }
.page-home .hero__sub     { animation: heroRise 900ms var(--ease-out) 420ms both; }
.page-home .hero__ctas    { animation: heroRise 900ms var(--ease-out) 560ms both; }

/* accent word gets a soft glow pulse */
@keyframes accentGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(242,165,163,0); }
  50%      { text-shadow: 0 0 34px rgba(242,165,163,.35); }
}
.page-home .hero__title span { animation: accentGlow 6s var(--ease-in-out) 1.6s infinite; }

/* very slow cinematic push on the hero footage */
@keyframes heroDrift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.13) translate3d(-1.2%, -1%, 0); }
  100% { transform: scale(1.06) translate3d(0, 0, 0); }
}
.page-home .hero__media video,
.page-home .hero__media img { animation: heroDrift 34s var(--ease-in-out) infinite; will-change: transform; }

/* engineering grid slowly slides, suggesting movement of current */
@keyframes gridPan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 72px 72px, 72px 72px; }
}
.page-home .hero__grid { animation: gridPan 26s linear infinite; }

/* ============================================================
   2. SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-red));
  z-index: 60;
  transition: width 90ms linear;
  pointer-events: none;
}

/* ============================================================
   3. SECTION HEADINGS — rule draws itself in
   ============================================================ */
.section-head .eyebrow::before {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out) 120ms;
}
.reveal.is-visible .eyebrow::before,
.section-head.is-visible .eyebrow::before { transform: scaleX(1); }
.rule-red { transform-origin: left; transform: scaleX(0); transition: transform 720ms var(--ease-out) 200ms; }
.reveal.is-visible .rule-red { transform: scaleX(1); }

/* ============================================================
   4. COUNTERS — lift as they land
   ============================================================ */
@keyframes counterPop {
  0%   { transform: translateY(10px); opacity: .35; }
  60%  { transform: translateY(-3px); opacity: 1; }
  100% { transform: none; }
}
.counter-tile.is-visible .counter-tile__num { animation: counterPop 900ms var(--ease-out) both; }
.counter-tile { transition: border-color 400ms var(--ease-out); }
.counter-tile:hover { border-color: var(--brand-red); }

/* ============================================================
   5. CAPABILITY CARDS — float + sheen sweep
   ============================================================ */
.cap-card--media { position: relative; }
.cap-card--media::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.cap-card--media:hover::after { opacity: 1; animation: sheen 900ms var(--ease-out); }
@keyframes sheen { from { left: -60%; } to { left: 115%; } }

/* ============================================================
   7. INDUSTRY CARDS — gentle idle float, lift on hover
   ============================================================ */
@keyframes idleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.industry-card { transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.industry-card:nth-child(3n+1) { animation: idleFloat 7s var(--ease-in-out) infinite; }
.industry-card:nth-child(3n+2) { animation: idleFloat 7s var(--ease-in-out) .9s infinite; }
.industry-card:nth-child(3n)   { animation: idleFloat 7s var(--ease-in-out) 1.8s infinite; }
.industry-card:hover { animation-play-state: paused; transform: translateY(-8px); box-shadow: var(--shadow-xl); }

/* ============================================================
   8. TECHNOLOGY TILES — settle in, then lift
   ============================================================ */
.tech-grid__item { opacity: 0; transform: translateY(18px) scale(.97); }
.tech-grid.is-visible .tech-grid__item { animation: tileIn 620ms var(--ease-out) both; }
.tech-grid.is-visible .tech-grid__item:nth-child(1) { animation-delay: 40ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(2) { animation-delay: 110ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(3) { animation-delay: 180ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(4) { animation-delay: 250ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(5) { animation-delay: 320ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(6) { animation-delay: 390ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(7) { animation-delay: 460ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(8) { animation-delay: 530ms; }
.tech-grid.is-visible .tech-grid__item:nth-child(9) { animation-delay: 600ms; }
@keyframes tileIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* ============================================================
   9. ISO CARDS — staggered entrance
   ============================================================ */
.iso-grid.is-visible .iso-card { animation: tileIn 700ms var(--ease-out) both; }
.iso-grid.is-visible .iso-card:nth-child(1) { animation-delay: 80ms; }
.iso-grid.is-visible .iso-card:nth-child(2) { animation-delay: 220ms; }
.iso-grid.is-visible .iso-card:nth-child(3) { animation-delay: 360ms; }

/* ============================================================
   10. BUTTONS — sheen on primary CTA
   ============================================================ */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -70%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn-primary:hover::after { animation: sheen 720ms var(--ease-out); }

/* ============================================================
   11. PARALLAX (JS-driven, tiny translate only)
   ============================================================ */
[data-parallax] { will-change: transform; }

/* ============================================================
   REDUCED MOTION — switch everything off
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-home .hero__eyebrow,
  .page-home .hero__title,
  .page-home .hero__sub,
  .page-home .hero__ctas,
  .page-home .hero__title span,
  .page-home .hero__media video,
  .page-home .hero__media img,
  .page-home .hero__grid,
  .counter-tile.is-visible .counter-tile__num,
  .industry-card,
  .tech-grid.is-visible .tech-grid__item,
  .iso-grid.is-visible .iso-card,
  .btn-primary:hover::after,
  .cap-card--media:hover::after {
    animation: none !important;
  }
  .tech-grid__item, .iso-card { opacity: 1 !important; transform: none !important; }
  .section-head .eyebrow::before, .rule-red { transform: scaleX(1) !important; transition: none !important; }
  .iso-card:hover .iso-card__img { transform: none !important; }
  .scroll-progress { display: none; }
  [data-parallax] { transform: none !important; }
}

/* ============================================================
   TECHNOLOGY — continuous right-to-left slide
   ============================================================ */
.tech-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--space-2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tech-slide__track {
  display: flex;
  width: max-content;
  animation: techSlide 42s linear infinite;
  will-change: transform;
}
.tech-slide:hover .tech-slide__track,
.tech-slide:focus-within .tech-slide__track { animation-play-state: paused; }
.tech-slide__group { display: flex; align-items: center; flex: 0 0 auto; }

.tech-slide__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 104px;
  margin: 0 var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.tech-slide__item:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.tech-slide__item img {
  max-height: 52px;
  max-width: 160px;
  width: auto; height: auto;
  object-fit: contain;                 /* proportional, never stretched */
  filter: grayscale(1);
  opacity: .8;
  transition: filter 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.tech-slide__item:hover img { filter: none; opacity: 1; }

/* travels exactly one group width, so the loop is seamless */
@keyframes techSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px) {
  .tech-slide__item { width: 178px; height: 88px; margin: 0 8px; }
  .tech-slide__item img { max-height: 42px; max-width: 124px; }
  .tech-slide__track { animation-duration: 30s; }
}

@media (prefers-reduced-motion: reduce) {
  .tech-slide { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .tech-slide__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .tech-slide__group { flex-wrap: wrap; justify-content: center; }
  .tech-slide__group:nth-child(2) { display: none; }
  .tech-slide__item { margin: 6px; }
}

/* ============================================================
   ISO — continuous right-to-left slide (matches technology strip)
   ============================================================ */
.iso-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--space-2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.iso-slide__track {
  display: flex;
  width: max-content;
  animation: techSlide 46s linear infinite;
  will-change: transform;
}
.iso-slide:hover .iso-slide__track,
.iso-slide:focus-within .iso-slide__track { animation-play-state: paused; }
.iso-slide__group { display: flex; align-items: stretch; flex: 0 0 auto; }

.iso-slide .iso-card {
  flex: 0 0 auto;
  width: 320px;
  margin: 0 var(--space-3);
  animation: none;          /* the track carries the motion now */
  opacity: 1;
  transform: none;
}
.iso-slide .iso-card__img { height: 168px; }

@media (max-width: 640px) {
  .iso-slide .iso-card { width: 250px; margin: 0 8px; }
  .iso-slide .iso-card__img { height: 138px; }
  .iso-slide__track { animation-duration: 34s; }
}

@media (prefers-reduced-motion: reduce) {
  .iso-slide { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .iso-slide__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .iso-slide__group { flex-wrap: wrap; justify-content: center; }
  .iso-slide__group[aria-hidden="true"] { display: none; }
  .iso-slide .iso-card { margin: 6px; }
}

/* ============================================================
   PROJECT CARD — client logo variant
   A logo must never be cover-cropped like a photograph; contain it
   on white so the mark stays whole and correctly proportioned.
   ============================================================ */
.project-card__media--logo {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.project-card__media--logo img {
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 80%;
  object-fit: contain;
}
.project-card:hover .project-card__media--logo img { transform: none; }

/* ============================================================
   VALUE CARDS — light variant (overrides the dark v4 treatment)
   White plate, dark type, icon shown in its natural line-art.
   ============================================================ */
#values .value-card {
  background: #fff;
  border: 1px solid var(--border);
  min-height: 250px;
  padding: var(--space-8) var(--space-6);
  transition: border-color 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out),
              transform 320ms var(--ease-out);
}
#values .value-card:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
/* no photo layer and no dark scrim on the light variant */
#values .value-card::after { content: none; }
#values .value-card__bg { display: none; }

#values .value-card__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: none;                 /* keep the supplied dark line-art as drawn */
  opacity: 1;
  margin-bottom: var(--space-5);
  transition: transform 320ms var(--ease-out);
}
#values .value-card:hover .value-card__icon { transform: scale(1.08); }

#values .value-card__num { color: var(--brand-red); }
#values .value-card h3 { color: var(--ink); }
#values .value-card p { color: var(--text-muted); }

/* ============================================================
   LEADERSHIP CARD — founder portrait
   ============================================================ */
.leader-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
.leader-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;      /* keep the head comfortably in frame */
  transition: transform 700ms var(--ease-out);
}
.card:hover .leader-card__media img { transform: scale(1.04); }
.leader-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,0) 55%, rgba(10,22,40,.72) 100%);
  pointer-events: none;
}
.leader-card__badge {
  position: absolute; left: var(--space-6); bottom: var(--space-5);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #F2A5A3;
}
@media (prefers-reduced-motion: reduce) {
  .leader-card__media img { transition: none !important; }
  .card:hover .leader-card__media img { transform: none !important; }
}

/* ============================================================
   SMALL-SCREEN CTA WRAPPING
   Long button labels (e.g. "Contact Our Engineering Team") are wider than a
   375px viewport with nowrap, which pushed the page into horizontal scroll.
   Allow wrapping and tighten padding below 430px only — desktop is unchanged.
   ============================================================ */
@media (max-width: 430px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .btn-lg { padding: 15px 20px; font-size: var(--fs-sm); }
  .hero__ctas .btn, .page-hero .btn { width: 100%; }
}

/* ============================================================
   CONTACT — RFQ two-column layout must collapse on mobile
   The inline grid-template-columns: 1fr 1.4fr did not respond to width,
   forcing the form off-screen on phones.
   ============================================================ */
@media (max-width: 860px) {
  .page-contact #rfq .grid[style*="1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }
}
@media (max-width: 430px) {
  .form-row { grid-template-columns: 1fr !important; }
  .page-contact .form input,
  .page-contact .form select,
  .page-contact .form textarea { max-width: 100%; }
  .lightbox img { padding: var(--space-4); }
}

/* ============================================================
   LEADERSHIP — text-only card (no portrait)
   ============================================================ */
.leader-card--text {
  padding: var(--space-10) var(--space-8);
  border-left: 3px solid var(--brand-red);
  background: #fff;
}
.leader-card--text .leader-card__role {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: var(--space-4);
}
.leader-card--text h3 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.leader-card--text .leader-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--brand-blue);
  margin: 0 0 var(--space-5);
}
.leader-card--text .leader-card__bio {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0;
  max-width: 46ch;
}