/* ValveTech project page (Figma "PROJECT PAGE · D5 · VALVETECH FULL" 701:2633, desktop 1600).
   Sizes in --u: 1vw below 1920 (1600 frame: 1u = 16px); from 1920 the content keeps its 1600 pixel sizes.
   Colours: #131313 page, #181818 card, #242424 raised/border, #FAFAFA (+ 50/30/16 %), #70E844. */

:root {
  --u: 1vw;
  --pad: 4vw;
  --ease: cubic-bezier(.602, .018, .392, 1.001); /* Home IX2 hover easing */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --w: #fafafa;
  --w50: rgba(250, 250, 250, .5);
  --w30: rgba(250, 250, 250, .3);
  --w16: rgba(250, 250, 250, .16);
  --g: #70e844;
  --card: #181818;
  --raised: #242424;
  --gap: max(12px, calc(2 * var(--u)));
  --radius: max(20px, calc(2 * var(--u)));
  --cpad: max(20px, calc(2 * var(--u)));
  --ic: max(48px, calc(3.5 * var(--u)));
  --sec: max(64px, calc(10 * var(--u)));
}
@media screen and (min-width: 1920px) {
  :root { --u: .8333vw; }
}
@media screen and (max-width: 991px) {
  :root { --pad: 32px; }
}
@media screen and (max-width: 479px) {
  :root { --pad: 16px; }
}

/* ---------- Header / hero ---------- */
.hs1.vt-hero {
  height: auto;
  justify-content: flex-start;
  align-items: stretch;
  padding-bottom: 0;
  overflow: visible; /* mobile menu may open below the hero */
  overflow-x: clip;  /* the 200% marquee track */
}
.vt-hero .hs1w1 {
  padding-left: var(--pad);
  padding-right: var(--pad);
}
/* Nav hover as on Home (IX2 "L1 Hover In": text to green + glow, 400 ms) */
.vt-hero .hs1c3 .l2 { transition: color .4s var(--ease); }
.vt-hero .hs1c3 .hs1c4 { transition: opacity .4s var(--ease); }
.vt-hero .hs1c3:hover .l2 { color: var(--g); }
.vt-hero .hs1c3:hover .hs1c4 { opacity: 1; }

.vt-hero-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13.2vw var(--pad) 0;
  text-align: center;
}
.vt-h1 { display: flex; flex-direction: column; align-items: center; }
.vt-line { display: block; overflow: hidden; padding-top: .06em; margin-top: -.06em; }
.vt-line-i { display: block; }
.vt-sub {
  margin-top: 1.15vw;
  max-width: 100%;
  line-height: 1.2;
}
.vt-marquee {
  overflow: hidden; /* clip only; the wrapper itself scrolls */
  margin-top: 12.65vw;
  animation: vt-marquee 10s linear infinite;
  will-change: transform;
}
@media screen and (min-width: 1920px) {
  /* Home shrinks .h1 to 8vw and the marquee to 2vw here; hero gaps follow (x 2/3) */
  .vt-hero-c { padding-top: 8.8vw; }
  .vt-sub { margin-top: .77vw; }
  .vt-marquee { margin-top: 8.4vw; }
}
@keyframes vt-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* hero intro: title lines slide up, then subtitle and marquee fade in */
.vt-js .vt-line-i { transform: translateY(105%); animation: vt-up .9s var(--ease-out) forwards; }
.vt-js .vt-line:nth-child(2) .vt-line-i { animation-delay: .12s; }
.vt-js .vt-sub { opacity: 0; animation: vt-fade .8s var(--ease-out) .35s forwards; }
.vt-js .vt-marquee { opacity: 0; animation: vt-marquee 10s linear infinite, vt-fade .8s var(--ease-out) .5s forwards; }
@keyframes vt-up { to { transform: translateY(0); } }
@keyframes vt-fade { to { opacity: 1; } }

/* ---------- Main ---------- */
.vt-main {
  padding: max(40px, calc(6 * var(--u))) var(--pad) max(64px, calc(6 * var(--u)));
  color: var(--w);
  font-family: Poppins, sans-serif;
}
.vt-main :where(h2, h3, p, ul, ol, dl, dd, figure) {
  margin: 0;
  padding: 0;
}
.vt-main :where(ul, ol) { list-style: none; }
.vt-sec { margin-top: var(--sec); }
.vt-h2 {
  color: var(--w);
  font-family: Badrock, Arial, sans-serif;
  font-size: max(36px, calc(4 * var(--u)));
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: max(24px, calc(2 * var(--u)));
}
.vt-sec-48 > .vt-h2 { margin-bottom: max(28px, calc(3 * var(--u))); }
.vt-cover { display: block; width: 100%; height: 100%; object-fit: cover; }

/* meta row */
.vt-meta {
  display: flex;
  align-items: flex-start;
  font-size: max(11px, calc(.8 * var(--u)));
  line-height: 1.2;
  text-transform: uppercase;
}
.vt-meta-col:first-child { width: calc(15.5 * var(--u)); flex: none; }
.vt-meta-label { color: var(--w50); margin-bottom: max(10px, calc(1.0625 * var(--u))); }
.vt-meta-val { color: var(--w); }
.vt-dot { margin: 0 .55em; }
.vt-stage { display: flex; align-items: center; gap: max(10px, calc(.75 * var(--u))); }
.vt-meter { display: flex; gap: 4px; }
.vt-seg {
  position: relative;
  width: max(16px, calc(1.125 * var(--u)));
  height: 4px;
  border-radius: 2px;
  background: var(--w16);
  overflow: hidden;
}
.vt-seg.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g);
  border-radius: inherit;
  transform-origin: left center;
}
.vt-js .vt-seg.is-on::after { transform: scaleX(0); transition: transform .5s var(--ease-out); }
.vt-js .vt-meta.is-in .vt-seg.is-on::after { transform: scaleX(1); }
.vt-js .vt-meta.is-in .vt-seg.is-on:nth-child(2)::after { transition-delay: .15s; }
.vt-js .vt-meta.is-in .vt-seg.is-on:nth-child(3)::after { transition-delay: .3s; }
.vt-js .vt-meta.is-in .vt-seg.is-on:nth-child(4)::after { transition-delay: .45s; }
.vt-js .vt-meta.is-in .vt-seg.is-on:nth-child(1)::after { transition-delay: .3s; }

/* photo band */
.vt-band {
  margin-top: calc(3 * var(--u));
  height: calc(40 * var(--u));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

/* overview */
.vt-overview {
  display: grid;
  grid-template-columns: calc(43.75 * var(--u)) 1fr;
  column-gap: calc(3 * var(--u));
  align-items: start;
}
.vt-product {
  height: calc(38.75 * var(--u));
  padding: calc(2.5 * var(--u)) calc(3.75 * var(--u));
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: radial-gradient(circle, var(--w16) 1.25px, transparent 1.75px);
  background-size: 32px 32px;
  background-position: 17px 17px;
}
.vt-product img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vt-specs .vt-h2 { margin-bottom: calc(2.25 * var(--u)); }
.vt-spec-list { border-bottom: 1px solid var(--raised); }
.vt-spec {
  display: grid;
  grid-template-columns: calc(15.5 * var(--u)) 1fr;
  align-items: center;
  border-top: 1px solid var(--raised);
  padding: max(12px, calc(1 * var(--u))) 0;
  min-height: calc(3.25 * var(--u));
}
.vt-spec dt {
  color: var(--w50);
  font-size: max(11px, calc(.8 * var(--u)));
  line-height: 1.2;
  text-transform: uppercase;
}
.vt-spec dd {
  color: var(--w);
  font-size: max(15px, calc(1.2 * var(--u)));
  line-height: 1;
}
.vt-pill {
  display: inline-flex;
  margin-top: calc(2 * var(--u));
  grid-column-gap: calc(2 * var(--u));
  transition: transform .4s var(--ease);
}
.vt-pill .hs4c5 { transition: transform .4s var(--ease); }
.vt-pill .hs4i2 { transition: transform .4s var(--ease); }
.vt-pill:hover { transform: translateY(-3px); }
.vt-pill:hover .hs4i2 { transform: translateX(3px); }

/* cards + icon circles */
.vt-card {
  background: var(--card);
  border-radius: var(--radius);
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.vt-card:hover { transform: translateY(-4px); }
.vt-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ic);
  height: var(--ic);
  border-radius: 999px;
  background: var(--raised);
  position: relative;
  z-index: 1;
}
.vt-ic img { width: 57.15%; height: 57.15%; display: block; }

/* core features */
.vt-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.vt-feature {
  padding: var(--cpad);
  min-height: calc(15.125 * var(--u));
}
.vt-feature-t {
  margin-top: max(20px, calc(2 * var(--u)));
  color: var(--w);
  font-size: max(18px, calc(1.6 * var(--u)));
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
}
.vt-text {
  margin-top: max(8px, calc(.75 * var(--u)));
  color: var(--w50);
  font-size: max(14px, calc(1 * var(--u)));
  font-weight: 300;
  line-height: 1.2;
}

/* how it works */
.vt-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gap);
}
.vt-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--ic) / 2);
  left: calc(var(--ic) / 2);
  right: calc((100% - 4 * var(--gap)) / 5 - var(--ic) / 2);
  height: 1px;
  background: var(--raised);
}
.vt-step-b { max-width: calc(15.3125 * var(--u)); }
.vt-step-n {
  margin-top: max(20px, calc(2 * var(--u)));
  color: var(--w30);
  font-size: max(11px, calc(.8125 * var(--u)));
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
}
.vt-step-t {
  margin-top: max(6px, calc(.5 * var(--u)));
  color: var(--w);
  font-size: max(18px, calc(1.375 * var(--u)));
  font-weight: 500;
  line-height: 1.5;
}
.vt-step-p {
  margin-top: max(4px, calc(.4 * var(--u)));
  color: var(--w50);
  font-size: max(14px, calc(1 * var(--u)));
  font-weight: 300;
  line-height: 1.5;
}
.vt-step .vt-ic { transition: transform .4s var(--ease); }
.vt-step:hover .vt-ic { transform: translateY(-3px); }

/* use cases */
.vt-uses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.vt-use {
  display: flex;
  align-items: center;
  gap: max(16px, calc(1.5 * var(--u)));
  padding: var(--cpad);
  font-size: max(15px, calc(1.2 * var(--u)));
  font-weight: 400;
  line-height: 1.2;
}

/* gallery */
.vt-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.vt-g {
  aspect-ratio: 720 / 440;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.vt-g img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.vt-g.vt-g-render img { object-fit: contain; }
.vt-g:hover img { transform: scale(1.03); }

/* next project */
.vt-next {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(26.25 * var(--u));
  padding: max(32px, calc(3 * var(--u)));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  color: var(--w);
  text-decoration: none;
  isolation: isolate;
  transition: transform .4s var(--ease);
}
.vt-next-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform .8s var(--ease);
}
.vt-next-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(19, 19, 19, .5);
}
.vt-next-label {
  font-size: max(11px, calc(.8 * var(--u)));
  line-height: 1.2;
  text-transform: uppercase;
}
.vt-next-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.vt-next-t {
  font-family: Badrock, Arial, sans-serif;
  font-size: max(48px, calc(8 * var(--u)));
  line-height: 1;
  text-transform: uppercase;
}
.vt-next-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(56px, calc(5.5 * var(--u)));
  height: max(56px, calc(5.5 * var(--u)));
  border-radius: 999px;
  background: var(--g);
}
.vt-next-arrow svg {
  width: 36%;
  height: auto;
  overflow: visible;
  transition: transform .4s var(--ease);
}
.vt-next:hover { transform: translateY(-4px); }
.vt-next:hover .vt-next-img { transform: scale(1.03); }
.vt-next:hover .vt-next-arrow svg { transform: translateX(4px); }

/* ---------- Scroll reveal ---------- */
.vt-js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.vt-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* once revealed, hover lifts use the short transition */
.vt-js .vt-card[data-reveal].is-done,
.vt-js .vt-next[data-reveal].is-done {
  transition: transform .4s var(--ease), background-color .4s var(--ease);
  transition-delay: 0s;
}
.vt-js .vt-card.is-done:hover,
.vt-js .vt-next.is-done:hover { transform: translateY(-4px); }

/* ---------- Footer: page margins ---------- */
.hs8 { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Tablet ---------- */
@media screen and (max-width: 991px) {
  .vt-sub { font-size: max(12px, 1.6vw); }
  .vt-overview { grid-template-columns: 1fr; row-gap: 48px; }
  .vt-product { height: auto; aspect-ratio: 700 / 620; padding: 6% 8%; }
  .vt-specs .vt-h2 { margin-bottom: 24px; }
  .vt-spec { grid-template-columns: 34% 1fr; min-height: 0; }
  .vt-spec dd { line-height: 1.25; }
  .vt-pill { margin-top: 32px; }
  .vt-band { height: auto; aspect-ratio: 16 / 9; margin-top: 32px; }
  .vt-features { grid-template-columns: repeat(2, 1fr); }
  .vt-feature { min-height: 0; }
  /* steps become a vertical sequence; the line runs through the icon centres */
  .vt-steps { grid-template-columns: 1fr; row-gap: 32px; }
  .vt-steps::before { display: none; }
  .vt-step { position: relative; display: flex; align-items: flex-start; gap: 24px; }
  .vt-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--ic) / 2);
    top: calc(var(--ic) / 2);
    width: 1px;
    height: calc(100% + 32px);
    background: var(--raised);
  }
  .vt-step-b { max-width: 520px; padding-top: 2px; }
  .vt-step-n { margin-top: 0; }
  .vt-next { height: auto; min-height: 320px; }
  .hs8 { margin-top: 0; }
}

/* ---------- Phone ---------- */
@media screen and (max-width: 767px) {
  .vt-meta { flex-direction: column; gap: 20px; }
  .vt-meta-col:first-child { width: auto; }
  .vt-features, .vt-uses, .vt-gallery { grid-template-columns: 1fr; }
  .vt-band { aspect-ratio: 4 / 3; }
}
@media screen and (max-width: 479px) {
  .vt-hero .hs1w1 { padding-left: var(--pad); padding-right: var(--pad); }
  .vt-sub { font-size: 12px; padding: 0 8px; }
  .vt-spec { grid-template-columns: 1fr; row-gap: 6px; }
  .vt-pill { padding: 4px 4px 4px 20px; border-radius: 999px; grid-column-gap: 16px; }
  .vt-pill .t4 { font-size: 30px; top: 2px; }
  .vt-pill .hs4c5 { width: 44px; height: 44px; padding: 8px; }
  .vt-next { min-height: 280px; padding: 32px 24px 24px; }
  .vt-next-row { align-items: flex-end; }
  .hs8 { padding-left: var(--pad); padding-right: var(--pad); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vt-marquee, .vt-js .vt-marquee { animation: none; opacity: 1; }
  .vt-js .vt-line-i { animation: none; transform: none; }
  .vt-js .vt-sub { animation: none; opacity: 1; }
  .vt-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .vt-js .vt-seg.is-on::after { transform: none; transition: none; }
  .vt-card, .vt-next, .vt-pill, .vt-g img, .vt-next-img, .vt-step .vt-ic { transition: none; }
  .vt-card:hover, .vt-next:hover, .vt-pill:hover, .vt-step:hover .vt-ic { transform: none; }
}