/* V15 customer journey: one question, one screen, one next action. */
.proof-strip,
.fast-track,
.steel-universe,
.cut-deliver,
.delivery-band,
.fabrication,
.audience-section {
  display: none;
}

html { scroll-behavior: smooth; }
body { background: #050708; }

.site-header {
  border-top: 3px solid var(--orange);
  background: rgba(3,5,6,.92);
  backdrop-filter: blur(18px);
}

.desktop-nav { gap: clamp(10px, 1.35vw, 24px); }
.desktop-nav a {
  position: relative;
  padding-inline: 8px;
  font-size: clamp(.72rem, .76vw, .86rem);
  white-space: nowrap;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 2px;
  background: var(--orange);
  transition: right .25s var(--ease);
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { right: 0; }

.header-actions .button-small {
  flex: 0 0 auto;
  padding-inline: 16px;
  font-size: .86rem;
  white-space: nowrap;
}

.hero {
  min-height: 100svh;
  padding-bottom: 90px;
}
.hero-lower { display: none; }
.hero-copy { padding-top: clamp(42px, 9vh, 110px); }
.hero h1 { max-width: 760px; }
.hero-subhead { max-width: 560px; }

.journey-screen {
  position: relative;
  min-height: 100svh;
  padding: clamp(86px, 10vh, 124px) clamp(18px, 4vw, 70px) clamp(72px, 9vh, 110px);
  overflow: hidden;
  color: #fff;
  background: #050708;
}

.journey-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background:
    radial-gradient(circle at 50% 0, rgba(255,82,0,.18), transparent 31%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
  mask-image: linear-gradient(to bottom, #000, transparent 74%);
}

.journey-heading {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
  margin: 0 auto clamp(38px, 5vh, 62px);
  text-align: center;
}
.journey-heading .eyebrow { justify-content: center; color: var(--orange); }
.journey-heading h2 {
  margin: 0;
  font-family: "Roboto Condensed Local", "Arial Narrow", sans-serif;
  font-size: clamp(4rem, 6.7vw, 7.4rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.journey-heading h2 span { color: var(--orange); }
.journey-heading > p:last-child {
  max-width: 800px;
  margin: 22px auto 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
}

.confidence-grid {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,.38);
}

.confidence-card {
  min-width: 0;
  padding: 0 20px 26px;
  border-right: 1px solid rgba(255,255,255,.17);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
  transition: background .3s, transform .3s var(--ease);
}
.confidence-card:last-child { border-right: 0; }
.confidence-card:hover { background: rgba(255,82,0,.07); }
.confidence-photo {
  height: clamp(150px, 17vw, 245px);
  margin: 0 -20px 22px;
  background-image:
    linear-gradient(to bottom, transparent 55%, #050708 100%),
    var(--journey-image);
  background-size: cover;
  background-position: center;
  filter: saturate(.75) contrast(1.08);
  transition: filter .35s, transform .45s var(--ease);
}
.confidence-photo-processing { background-position: 78% center; }
.confidence-card:hover .confidence-photo { filter: saturate(1) contrast(1.08); transform: scale(1.025); }
.journey-number {
  display: inline-grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-size: .67rem;
  font-weight: 900;
}
.confidence-card h3,
.service-journey-card h3 {
  margin: 15px 0 0;
  font-family: "Roboto Condensed Local", "Arial Narrow", sans-serif;
  font-size: clamp(1.12rem, 1.45vw, 1.55rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.confidence-card i {
  width: 28px;
  height: 2px;
  display: block;
  margin: 14px auto;
  background: var(--orange);
}
.confidence-card p {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: clamp(.76rem, .86vw, .9rem);
  line-height: 1.52;
}

.confidence-foundation {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 28px clamp(18px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 34px;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(3,5,6,.9), rgba(3,5,6,.55), rgba(3,5,6,.9)),
    url("assets/hero-industrial-wide.webp") center 68% / cover;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 0;
}
.confidence-foundation div span,
.confidence-foundation div strong { display: block; }
.confidence-foundation div span {
  color: var(--orange);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.confidence-foundation div strong {
  margin-top: 5px;
  color: rgba(255,255,255,.76);
  font-size: .83rem;
  line-height: 1.55;
}
.confidence-foundation blockquote {
  margin: 0;
  padding-inline: 32px;
  border-inline: 1px solid rgba(255,82,0,.6);
  font-family: "Roboto Condensed Local", "Arial Narrow", sans-serif;
  font-size: clamp(1.4rem, 2vw, 2.15rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.confidence-foundation blockquote em { color: var(--orange); font-style: normal; }

.journey-next {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: 34px auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
.journey-next span { color: var(--orange); font-size: 1.3rem; transition: transform .25s; }
.journey-next:hover { color: #fff; }
.journey-next:hover span { transform: translateY(4px); }

.services-screen { background: #080a0b; }
.service-journey-grid {
  position: relative;
  z-index: 1;
  width: min(1420px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.service-journey-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 220px 1fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 6px;
  color: #fff;
  background: #060809;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.service-journey-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,82,0,.72);
  box-shadow: 0 26px 70px rgba(0,0,0,.38);
}
.service-photo {
  background-image:
    linear-gradient(to bottom, transparent 57%, #060809 100%),
    var(--journey-image);
  background-size: cover;
  background-position: center;
  filter: saturate(.78) contrast(1.07);
  transition: filter .35s, transform .55s var(--ease);
}
.service-photo-processing { background-position: 72% center; }
.service-photo-stairs { background-position: 15% center; }
.service-journey-card:hover .service-photo { filter: saturate(1) contrast(1.07); transform: scale(1.025); }
.service-journey-card > div:last-child {
  position: relative;
  padding: 24px 28px 26px 76px;
}
.service-journey-card .journey-number {
  position: absolute;
  left: 25px;
  top: 25px;
}
.service-journey-card h3 { margin: 0; font-size: clamp(1.5rem, 2vw, 2.15rem); }
.service-journey-card p {
  margin: 8px 0 20px;
  color: rgba(255,255,255,.65);
  font-size: .91rem;
  line-height: 1.5;
}
.service-journey-card a {
  color: var(--orange);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.service-journey-card a span { display: inline-block; margin-left: 9px; font-size: 1.1rem; transition: transform .2s; }
.service-journey-card a:hover span { transform: translateX(5px); }

/* Reframe the existing process as the fourth chapter. */
.process {
  min-height: 100svh;
  padding: clamp(90px, 11vh, 130px) max(5vw, 40px) clamp(72px, 9vh, 100px);
  display: grid;
  align-content: center;
  background:
    radial-gradient(circle at 10% 40%, rgba(255,82,0,.1), transparent 30%),
    #050708;
}
.process-header {
  width: min(1320px, 100%);
  margin-inline: auto;
}
.process-header h2 {
  font-family: "Roboto Condensed Local", "Arial Narrow", sans-serif;
  font-size: clamp(4rem, 6.7vw, 7rem);
  line-height: .88;
  text-transform: uppercase;
}
.process-steps { width: min(1320px, 100%); margin: 70px auto 0; }

@media (max-width: 1180px) {
  .confidence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .confidence-card:nth-child(3) { border-right: 0; }
  .confidence-card:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.17); }
  .confidence-photo { height: 210px; }
}

@media (max-width: 900px) {
  .journey-screen { min-height: 0; }
  .service-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confidence-foundation { grid-template-columns: 1fr; text-align: center; }
  .confidence-foundation blockquote { padding: 24px 0; border-inline: 0; border-block: 1px solid rgba(255,82,0,.6); }
}

@media (max-width: 680px) {
  .hero { min-height: 100svh; padding-bottom: 72px; }
  .hero-copy { padding-top: 34px; }
  .hero-subhead { max-width: 94%; line-height: 1.55; }
  .hero-cta-row { display: grid; grid-template-columns: 1fr; }
  .hero .button-primary,
  .hero .button-ghost { width: 100%; min-width: 0; }

  .journey-screen { padding: 74px 16px 68px; }
  .journey-heading { margin-bottom: 30px; text-align: left; }
  .journey-heading .eyebrow { justify-content: flex-start; }
  .journey-heading h2 { font-size: clamp(3.7rem, 16vw, 5.3rem); }
  .journey-heading > p:last-child { margin-left: 0; font-size: .98rem; }

  .confidence-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    border: 0;
    overflow: visible;
    background: transparent;
  }
  .confidence-card,
  .confidence-card:nth-child(3) {
    display: grid;
    grid-template-columns: 42% 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 18px;
    padding: 0 18px 0 0;
    border: 1px solid rgba(255,255,255,.17);
    text-align: left;
    overflow: hidden;
  }
  .confidence-card:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.17); }
  .confidence-photo {
    grid-row: 1 / 5;
    height: 100%;
    min-height: 188px;
    margin: 0;
    background-image: linear-gradient(90deg, transparent 58%, #050708 100%), var(--journey-image);
  }
  .confidence-card .journey-number { margin-top: 18px; }
  .confidence-card h3 { margin-top: 9px; font-size: 1.32rem; }
  .confidence-card i { margin: 9px 0; }
  .confidence-card p { padding-bottom: 16px; font-size: .78rem; }

  .confidence-foundation { margin-top: 14px; padding: 24px 20px; }

  .service-journey-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-journey-card { grid-template-rows: 190px 1fr; }
  .service-journey-card > div:last-child { padding: 22px 20px 24px 70px; }

  .process { min-height: 0; padding: 78px 20px 68px; }
  .process-header { grid-template-columns: 1fr; }
  .process-header h2 { font-size: clamp(3.5rem, 15vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .confidence-card,
  .confidence-photo,
  .service-journey-card,
  .service-photo,
  .journey-next span { transition: none; }
}