/* Section-specific layout */

section { padding-block: var(--sp-8); }
#hero.hero-construx { padding-block: 0; }

.section-head {
  margin-bottom: var(--sp-6);
  max-width: 640px;
}
.section-head h2 { font-size: 36px; margin-top: var(--sp-2); }
.section-head p { color: var(--ivory-dim); margin-top: var(--sp-3); }

/* ---------- hero ---------- */
/* Full-bleed, back-to-front: background photo, then the wordmark, then a
   SECOND copy of the same photo masked to its lower portion only — because
   both photo layers share identical background-size/position, they line up
   as one continuous image, so the foreground layer visually swallows the
   wordmark's base (towers "in front") while the background layer keeps its
   top half readable against the sky. A duotone grade (.hero-grade) tints
   shadows navy / highlights brass via mix-blend-mode, then a flat darkening
   gradient (.hero-image-overlay) sits on top for contrast and headline
   legibility. The hero fills the true viewport (100vh) — the nav floats
   over it transparently (see .site-nav) rather than pushing it down, which
   is why the top edge needs its own subtle darkening. Entrance is driven by
   JS adding .hero-loaded to <body> (see hero-motion.js); scroll parallax
   moves the wordmark slower than the photo layers (which move in lockstep
   with each other, so the seam never shows). Both are skipped under
   prefers-reduced-motion via the global override in base.css and the guard
   in hero-motion.js. */
.hero-construx {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding: 0;
}

.hero-bg-parallax,
.hero-fg-parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform; /* JS-driven scroll parallax only — kept separate
    from .hero-bg/.hero-fg's own entrance transition below so the two never
    fight over the same transform. Both layers always receive the exact
    same parallax offset so their shared photo stays pixel-locked. */
}
.hero-bg-parallax { z-index: 0; }
.hero-fg-parallax { z-index: 2; }

.hero-bg,
.hero-fg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/hero.webp');
  background-size: cover;
  background-position: center 38%;
  /* Colour grade: slightly desaturated, contrast lifted a touch — the
     duotone tint and darkening live on the overlay layers above, so this
     stays a plain grade, not a filter effect. */
  filter: saturate(0.82) contrast(1.1);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease) .15s, transform 1s var(--ease) .15s;
}
.hero-loaded .hero-bg,
.hero-loaded .hero-fg { opacity: 1; transform: translateY(0); }

.hero-fg {
  /* Reveals only the lower portion of the (identical) photo, so it reads as
     the towers rising in front of the wordmark rather than a duplicated
     image. Alpha-based mask: transparent hides, opaque shows. */
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, black 58%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, black 58%);
}

.hero-wordmark-layer {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  pointer-events: none;
  will-change: transform; /* JS-driven scroll parallax only — kept separate
    from .hero-wordmark's own entrance transition below so the two never
    fight over the same transform. */
}
.hero-wordmark {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700; /* Space Grotesk's heaviest cut — the family has no 800 */
  font-size: clamp(4.75rem, 16vw, 13.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ivory);
  /* Etched into the scene rather than pasted on top: overlay blend reads
     the photo's own luminosity through the letters — bright against the lit
     sky/structures, darker where the photo is dark — instead of faking it
     with a gradient fill. Only blends with what's stacked below it (the
     background photo), not the darkening/grade layers stacked above. */
  mix-blend-mode: overlay;
  user-select: none;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
/* Settles just short of full opacity — a whisper of transparency so it
   reads as part of the photo's scene rather than pasted on top. */
.hero-loaded .hero-wordmark { opacity: 0.9; transform: scale(1); }

/* Duotone grade: navy bleeds into the shadows, brass into the highlights.
   soft-light keeps it a tint rather than a wash — blends only with the
   photo layers and wordmark stacked beneath it, not the card/meta above. */
.hero-grade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(160deg,
    rgba(200, 155, 74, 0.4) 0%,
    rgba(200, 155, 74, 0.08) 26%,
    rgba(4, 18, 26, 0) 50%,
    rgba(4, 18, 26, 0.45) 100%);
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    /* centred bottom punch, under the headline */
    radial-gradient(70% 70% at 50% 100%, rgba(4, 18, 26, 0.8) 0%, rgba(4, 18, 26, 0) 60%),
    /* strong bottom darkening, sky/mid stays clear */
    linear-gradient(180deg, rgba(4, 18, 26, 0) 44%, rgba(4, 18, 26, 0.6) 68%, rgba(4, 18, 26, 0.96) 100%),
    /* subtle top darkening, for the floating nav + wordmark top */
    linear-gradient(180deg, rgba(4, 18, 26, 0.32) 0%, rgba(4, 18, 26, 0) 18%);
}

/* No card panel — the headline sits directly on the photo, legible thanks
   to the centred bottom darkening above. translateX(-50%) isn't used for
   centring (width: min(...) + margin-inline: auto instead) so the whole
   `transform` property stays free for the JS scroll parallax on this outer
   div; the inner .hero-headline keeps its own entrance transition, same
   split as the wordmark/photo layers. */
.hero-headline-parallax {
  position: absolute;
  bottom: var(--sp-6);
  left: 0;
  right: 0;
  z-index: 5;
  width: min(700px, calc(100% - var(--sp-6) * 2));
  margin-inline: auto;
  will-change: transform;
}
.hero-headline {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s;
}
.hero-loaded .hero-headline { opacity: 1; transform: translateY(0); }

.hero-headline-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ivory);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* "the right factory" — Instrument Serif italic (from the global em rule
   in base.css), with a warm gold gradient fill layered on top here so it
   reads as a richer, more luxurious accent than flat brass-lit. Falls
   back to solid brass-lit (inherited from the base rule) if a browser
   doesn't support text background-clip. */
.hero-headline-text em {
  background: linear-gradient(135deg, #F3D08C 0%, var(--brass-lit) 45%, var(--brass) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-headline-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.hero-headline-cta { margin: 0; }
.hero-headline-cta--quiet { color: var(--ivory-dim); }

/* Gentle hover for the primary CTA only — scoped here rather than on the
   shared .btn--primary so the nav "Contact" pill and the RFQ form submit
   button keep their existing hover. */
.hero-headline-cta.btn--primary {
  transition: background .2s var(--ease), transform .25s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-headline-cta.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(200, 155, 74, 0.28);
}

.hero-meta {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 12px;
  color: var(--ivory-dim);
  text-align: right;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease) .65s, transform .8s var(--ease) .65s;
}
.hero-loaded .hero-meta { opacity: 1; transform: translateY(0); }

.hero-meta-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.hero-meta-rule {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}
.hero-meta-year {
  color: var(--brass-lit);
  letter-spacing: 0.04em;
}

/* ---------- source showcase ---------- */
.source-section {
  position: relative;
  overflow: hidden;
}

/* background: slow-drifting glow curves, full-bleed */
.source-glow {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.source-glow.is-live { opacity: 1; }
.source-glow svg { width: 100%; height: 100%; display: block; }
.glow-path {
  fill: none;
  stroke-width: 3;
  filter: blur(18px);
}
.glow-path--cyan {
  stroke: var(--cyan);
  opacity: .32;
  animation: source-drift-a 26s ease-in-out infinite;
}
.glow-path--brass {
  stroke: var(--brass);
  opacity: .2;
  animation: source-drift-b 34s ease-in-out infinite;
  animation-delay: -6s;
}
@keyframes source-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3.5%, -2%); }
}
@keyframes source-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-4%, 2.5%); }
}

.source-arc-wrap {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-4);
}

.source-arc-lines {
  position: absolute;
  left: 0; right: 0;
  bottom: 6%;
  height: 60%;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}
#source-arc-path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
  opacity: .55;
}

.source-arc {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.source-card {
  flex: 0 1 var(--w);
  min-width: 108px;
  margin-top: var(--y);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.source-card[data-ring="0"] { transition-delay: 0ms; }
.source-card[data-ring="1"] { transition-delay: 140ms; }
.source-card[data-ring="2"] { transition-delay: 280ms; }
.source-card[data-ring="3"] { transition-delay: 420ms; }
.source-arc.is-live .source-card {
  opacity: 1;
  transform: translateY(0);
}

.showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: default;
  transition: transform .6s var(--ease), border-color .4s var(--ease),
              box-shadow .5s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
}
.showcase-card::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(closest-side, rgba(22, 217, 255, .35), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.source-card--centre .showcase-card { border-color: rgba(200, 155, 74, .4); }

.showcase-media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}
.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dark blend at the top edge so the photo melts into the card rather
   than reading as a pasted-in rectangle */
.showcase-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--card) 0%, rgba(12, 45, 61, .55) 16%, rgba(12, 45, 61, 0) 42%);
  pointer-events: none;
}

.showcase-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.showcase-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}
.showcase-name {
  font-size: 17px;
  margin: 0;
}
.showcase-standards {
  font-size: 11px;
  color: var(--brass);
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 2px;
}

/* hover: lift, brighten, glow — dim the rest */
.showcase-card:hover,
.showcase-card:focus-visible {
  transform: translateY(-10px) scale(1.045);
  border-color: var(--brass-lit);
  box-shadow: 0 24px 48px -20px rgba(4, 18, 26, .7);
  z-index: 3;
}
.showcase-card:hover::after,
.showcase-card:focus-visible::after {
  opacity: 1;
}
.source-arc.is-hover-active .source-card:not(.is-hover-target) .showcase-card {
  opacity: .5;
  filter: blur(2px) saturate(.55);
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .source-card {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }
  .source-glow { opacity: 1; }
  .glow-path { animation: none; }
  #source-arc-path { stroke-dashoffset: 0 !important; }
}

/* ---------- why desk ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

/* ---------- rfq ---------- */
.rfq-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}

/* ---------- faq ---------- */
.faq-list { max-width: 760px; }