/* ============================================================
   GNP Steel Trusses — Cinematic site
   Static HTML/CSS/JS. Smooth scroll (Lenis) + GSAP ScrollTrigger.
   Brand: navy/blue + amber accent, Montserrat + Inter.
   ============================================================ */

:root {
  /* Brand core (mirrors southern-barn-builders --pc-*) */
  --navy:        #14304f;
  --navy-dark:   #0c1e33;
  --navy-deep:   #081625;
  --navy-light:  #26456f;
  --blue:        #3d6bb4;
  --blue-dark:   #2a5390;
  --blue-light:  #6d93c9;
  --sky:         #b8d0ec;
  --sky-soft:    #eaf1fa;

  --amber:       #e9a23b;
  --amber-dark:  #c77d1f;
  --amber-light: #f5c97e;

  --white:       #ffffff;
  --offwhite:    #f7f9fc;
  --cream:       #fbf6ec;
  --ink:         #0f172a;
  --muted:       #64748b;
  --line:        rgba(255,255,255,0.12);
  --line-dark:   rgba(12,30,51,0.10);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis handles smoothing */
}

body {
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--white);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: var(--navy-dark); }

/* Lenis smooth-scroll wiring */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Typography helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.74rem;
  color: var(--amber-light);
}
.eyebrow.on-light { color: var(--amber-dark); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
section { position: relative; }

/* ---------- Scroll progress bar ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--amber));
  z-index: 200;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; z-index: 150;
  transition: padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.scrolled {
  padding: 14px 32px;
  background: rgba(8,22,37,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-emblem { height: 40px; width: auto; display: block; }
.site-header.scrolled .brand-emblem { height: 34px; transition: height .4s var(--ease); }
.brand-mark {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 70%);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: -0.04em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; letter-spacing: -0.01em; text-transform: uppercase; }
.brand-tag  { font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sky); opacity: .85; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a.link { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; opacity: .82; transition: opacity .25s; }
.nav a.link:hover { opacity: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  padding: 13px 24px; border-radius: 100px; border: 0; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-amber { background: linear-gradient(135deg, var(--amber-light), var(--amber) 55%, var(--amber-dark)); color: var(--navy-dark); box-shadow: 0 8px 26px rgba(233,162,59,0.32); }
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(233,162,59,0.45); }
.btn-ghost { background: rgba(255,255,255,0.06); color: var(--white); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,0.13); transform: translateY(-2px); }
.btn-solid { background: linear-gradient(135deg, var(--blue), var(--blue-dark) 60%, var(--navy)); color: var(--white); box-shadow: 0 8px 26px rgba(42,83,144,0.4); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(42,83,144,0.55); }

.nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; }

/* ---------- HERO ---------- */
.hero { height: 100svh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.hero__media img { width: 100%; height: 116%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,22,37,0.55) 0%, rgba(8,22,37,0.08) 30%, rgba(8,22,37,0.55) 72%, rgba(8,22,37,0.97) 100%),
    linear-gradient(105deg, rgba(12,30,51,0.78) 0%, rgba(12,30,51,0.10) 60%);
}
.hero__inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px 9vh; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.025em; line-height: 0.96;
  font-size: clamp(2.9rem, 8.5vw, 7.2rem);
  max-width: 16ch;
  text-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.hero h1 .accent { color: var(--amber-light); }
.hero__sub { margin-top: 26px; max-width: 52ch; font-size: clamp(1rem, 1.5vw, 1.22rem); color: rgba(255,255,255,0.86); }
.hero__cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta {
  margin-top: 52px; display: flex; gap: 40px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px;
}
.hero__meta div span { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--white); }
.hero__meta div small { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky); }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--amber), transparent); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Statement (pinned editorial) ---------- */
/* Text sits in the UPPER area with a tall empty zone beneath it. That empty
   zone is what the Process section overlaps (margin-top below) — so the
   overlap tightens the gap WITHOUT ever covering the last line of copy. */
.statement { min-height: auto; display: grid; place-items: start center; padding: 16vh 0 34vh; background: var(--navy-deep); }
.statement .container { text-align: center; }
.statement p {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1.06;
  font-size: clamp(1.9rem, 5.2vw, 4.4rem);
  max-width: 18ch; margin: 0 auto;
}
.statement .word { display: inline-block; opacity: 0.16; transition: opacity .2s; }
.statement .word.lit { opacity: 1; }
.statement .lead-tag { margin-bottom: 30px; }

/* ---------- Process scrollytelling ---------- */
.process { background: var(--navy-deep); }
.step {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; border-top: 1px solid var(--line);
}
.step__bg { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.step__bg img { width: 100%; height: 120%; object-fit: cover; }
.step__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,22,37,0.94) 0%, rgba(8,22,37,0.72) 45%, rgba(8,22,37,0.30) 100%); }
.step__num {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(4rem, 16vw, 13rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(184,208,236,0.45);
  letter-spacing: -0.04em;
}
.step__body { max-width: 560px; }
.step__body h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.04; margin: 8px 0 16px;
}
.step__body p { color: rgba(255,255,255,0.82); font-size: 1.06rem; }
.step__grid { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }

/* ---------- Process: self-erecting pole barn ---------- */
/* Pull the process up under the statement's empty lower half (both are the
   same navy, so it's seamless) — kills the dead screen that sat between the
   centered statement line and the bottom-anchored "How We Build" copy. */
.process { position: relative; background: var(--navy-deep); margin-top: -30vh; }
.process__sticky { position: relative; height: 100svh; min-height: 600px; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 6vh; }
.process__spacer { display: none; }
.process__sticky::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,22,37,0.22) 0%, rgba(8,22,37,0) 30%, rgba(8,22,37,0.35) 58%, rgba(8,22,37,0.92) 100%);
}
.barn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.process__overlay { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.process__overlay .eyebrow { margin-bottom: 18px; }
.pstep-stack { position: relative; min-height: 300px; }
.pstep { position: absolute; inset: 0; max-width: 560px; opacity: 0; transform: translateY(18px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.pstep.active { pointer-events: auto; }
.pstep.active { opacity: 1; transform: none; }
.pstep__num { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.22em; color: var(--amber-light); }
.pstep h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.02em; line-height: 1.02; margin: 12px 0 16px; }
.pstep p { color: rgba(255,255,255,0.86); font-size: 1.08rem; max-width: 46ch; }
.process__dots { list-style: none; display: flex; gap: 12px; margin-top: 34px; }
.process__dots li { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.16); transition: background .4s var(--ease); }
.process__dots li.on { background: var(--amber); }
.process__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.08); z-index: 3; }
.process__progress > i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--blue), var(--amber)); }

/* ---- Barn parts (generated into #barn by app.js) ---- */
.barn #grid line { stroke: rgba(184,208,236,0.10); stroke-width: 1; }
.barn .draw { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.barn .pad { fill: rgba(184,208,236,0.06); stroke: rgba(184,208,236,0.20); stroke-width: 1; }
.barn .footing { fill: rgba(184,208,236,0.30); }
.barn .bp { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; }
.barn #b-blueprint { opacity: 0.7; }
.barn .post { fill: #8c98a8; stroke: rgba(255,255,255,0.18); stroke-width: 0.5; }
.barn .chord { stroke: var(--amber-light); stroke-width: 2.4; }
.barn .beam { stroke: var(--sky); stroke-width: 2.4; }
.barn .ridge { stroke: #fff; stroke-width: 2.6; }
.barn .purlin { stroke: rgba(184,208,236,0.7); stroke-width: 1.4; }
.barn .weld { fill: #fff; opacity: 0.85; }
.barn .panel { stroke: rgba(255,255,255,0.35); stroke-width: 1; }
.barn .panel.metal { fill: url(#metalGrad); }
.barn .panel.black { fill: url(#blackRoof); }
.barn .cap { stroke: #fff; stroke-width: 3; }
.barn .dimline { stroke: rgba(184,208,236,0.6); stroke-width: 1.2; }
.barn .dimtext { fill: var(--sky); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; }

/* ---- Stage backdrop scenes ---- */
.barn .scene { opacity: 0; }
.barn .sc-floor { stroke: rgba(184,208,236,0.22); stroke-width: 1.5; }
.barn .sc-fill { fill: rgba(184,208,236,0.16); stroke: rgba(184,208,236,0.32); stroke-width: 1.2; }
.barn .sc-edge { stroke: rgba(184,208,236,0.45); stroke-width: 2; stroke-linecap: round; }
.barn .sc-paper { fill: rgba(234,241,250,0.22); stroke: rgba(184,208,236,0.4); stroke-width: 1; }
.barn .sc-line { stroke: rgba(184,208,236,0.5); stroke-width: 1.2; }
.barn .sc-spark { fill: var(--amber-light); }
.barn .sc-steel { fill: none; stroke: var(--amber-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.barn .sc-glass { fill: rgba(184,208,236,0.30); stroke: rgba(184,208,236,0.5); stroke-width: 1; }
.barn .sc-wheel { fill: #11202f; stroke: rgba(184,208,236,0.55); stroke-width: 2.5; }
.barn .sc-motion { stroke: rgba(184,208,236,0.35); stroke-width: 2; stroke-linecap: round; }
.barn .sc-crane { stroke: var(--sky); stroke-width: 3; stroke-linecap: round; }
.barn .sc-cable { stroke: rgba(255,255,255,0.6); stroke-width: 1.2; }
.barn #weldArc { opacity: 0; }
.barn .weld-spark line { stroke: #cfe6ff; stroke-width: 2; stroke-linecap: round; }

/* ---- Tower crane (erects, lifts the trusses, then leaves) ---- */
.barn .crane-beam { fill: none; stroke: var(--sky); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.barn .crane-stay { fill: none; stroke: rgba(184,208,236,0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; }
.barn .crane-trolley { fill: var(--sky); }
.barn .crane-cable { stroke: rgba(255,255,255,0.62); stroke-width: 1.5; stroke-linecap: round; }

/* Static fallback (no GSAP / reduced motion): finished barn + stacked steps */
.process--static .process__sticky { position: relative; height: auto; display: block; padding: 12vh 0; }
.process--static .process__sticky::before { display: none; }
.process--static .barn { position: relative; height: 52vh; margin-bottom: 28px; }
.process--static .pstep-stack { min-height: 0; }
.process--static .pstep { position: relative; inset: auto; opacity: 1; transform: none; max-width: none; margin-bottom: 24px; }
.process--static .process__progress { display: none; }

/* ---------- What we build ---------- */
.build { background: var(--offwhite); color: var(--ink); padding: 14vh 0; }
.build .eyebrow { color: var(--amber-dark); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--navy-dark); font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.05; margin: 14px 0 14px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

.build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.build-card { min-height: 300px; }
.build-card {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 320px;
  display: flex; align-items: flex-end; color: #fff; isolation: isolate;
  box-shadow: 0 14px 40px rgba(12,30,51,0.16);
}
.build-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.build-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,22,37,0) 30%, rgba(8,22,37,0.86) 100%); }
.build-card:hover img { transform: scale(1.07); }
.build-card .bc-body { padding: 26px; }
.build-card h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: -0.01em; }
.build-card p { font-size: 0.92rem; color: rgba(255,255,255,0.82); margin-top: 6px; }

/* ---------- Horizontal gallery ---------- */
.gallery { background: var(--navy-deep); overflow: hidden; }
.gallery__pin { height: 100svh; display: flex; align-items: center; }
.gallery__track { display: flex; gap: 26px; padding: 0 8vw; will-change: transform; }
.gallery__intro { flex: 0 0 38vw; min-width: 320px; align-self: center; }
.gallery__intro h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.04; margin: 14px 0; }
.gallery__intro p { color: rgba(255,255,255,0.78); max-width: 40ch; }
.shot { flex: 0 0 clamp(280px, 34vw, 480px); height: 64vh; border-radius: 18px; overflow: hidden; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.shot:hover img { transform: scale(1.06); }
.shot figcaption { position: absolute; left: 18px; bottom: 16px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem; padding: 7px 13px; border-radius: 100px; background: rgba(8,22,37,0.6); backdrop-filter: blur(6px); border: 1px solid var(--line); }

/* ---------- Why / stats ---------- */
.why { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); padding: 14vh 0; }
.why .section-head h2 { color: var(--white); }
.why .section-head p { color: rgba(255,255,255,0.78); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 18px; }
.stat { border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px; background: rgba(255,255,255,0.03); }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1; background: linear-gradient(120deg, var(--amber-light), var(--amber) 60%, var(--amber-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl { margin-top: 12px; font-size: 0.9rem; color: rgba(255,255,255,0.78); }

.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.feature { padding: 26px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.feature .ficon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--navy)); margin-bottom: 16px; }
.feature h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.01em; }
.feature p { margin-top: 8px; font-size: 0.95rem; color: rgba(255,255,255,0.76); }

/* ---------- CTA ---------- */
.cta { position: relative; padding: 18vh 0; overflow: hidden; text-align: center; }
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,37,0.86), rgba(8,22,37,0.94)); }
.cta h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.025em; line-height: 1; }
.cta p { margin: 22px auto 34px; max-width: 46ch; color: rgba(255,255,255,0.84); font-size: 1.1rem; }
.cta__contacts { margin-top: 40px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; }
.cta__contacts a { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; letter-spacing: 0.01em; }
.cta__contacts a:hover { color: var(--amber-light); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); border-top: 1px solid var(--line); padding: 64px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--sky); margin-bottom: 16px; }
.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid a { color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.foot-grid a:hover { color: #fff; }
.foot-blurb { color: rgba(255,255,255,0.7); max-width: 38ch; margin-top: 14px; font-size: 0.95rem; }
.foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,0.55); font-size: 0.82rem; }
/* Discreet staff entry point to the gated /portal/ (employees only) */
.foot-dot { margin: 0 4px; opacity: 0.5; }
.foot-staff { color: inherit; opacity: 0.72; transition: opacity .25s var(--ease), color .25s var(--ease); }
.foot-staff:hover { opacity: 1; color: var(--amber-light); }
.foot-staff:focus-visible { outline: 2px solid var(--amber-light); outline-offset: 2px; border-radius: 3px; opacity: 1; }

/* ---------- Reveal animation base (JS adds .in) ---------- */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ============================================================
   "What We Build" cards as links (clickable -> gallery sections)
   ============================================================ */
a.build-card { cursor: pointer; text-decoration: none; }
a.build-card:focus-visible { outline: 2px solid var(--amber-light); outline-offset: 3px; }
.build-card .bc-body h3 { display: inline-flex; align-items: center; gap: 8px; }
.build-card .bc-body h3::after { content: "→"; font-size: 0.9em; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.build-card:hover .bc-body h3::after, a.build-card:focus-visible .bc-body h3::after { opacity: 1; transform: none; }

/* ============================================================
   Gallery subpage (gallery.html)
   ============================================================ */
.page-sub { background: var(--navy-deep); }
.page-sub .site-header { background: rgba(8,22,37,0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav a.link[aria-current="page"] { opacity: 1; color: var(--amber-light); }

.gal-hero { padding: calc(94px + 7vh) 0 6vh; border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 18% 0%, rgba(61,107,180,0.20), transparent 60%), var(--navy-deep); }
.gal-hero h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.0; font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 10px 0 0; }
.gal-hero__sub { margin-top: 18px; max-width: 54ch; font-size: clamp(1rem, 1.4vw, 1.18rem); color: rgba(255,255,255,0.82); }
.gal-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.gal-chip { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); transition: background .25s var(--ease), transform .25s var(--ease); }
.gal-chip:hover { background: rgba(255,255,255,0.13); transform: translateY(-2px); }
.gal-chip:focus-visible { outline: 2px solid var(--amber-light); outline-offset: 2px; }

.gal-cat { padding: 8vh 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.gal-head { max-width: 720px; margin-bottom: 34px; }
.gal-head h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.05; }
.gal-head p { color: rgba(255,255,255,0.74); margin-top: 12px; font-size: 1.04rem; }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.gal-item { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 40px rgba(0,0,0,0.35); background: var(--navy); isolation: isolate; margin: 0; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.gal-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,37,0) 52%, rgba(8,22,37,0.82) 100%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.gal-item figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.gal-item:hover img { transform: scale(1.06); }
.gal-item:hover::after, .gal-item:hover figcaption { opacity: 1; }
.gal-item:hover figcaption { transform: none; }
.gal-empty { color: rgba(255,255,255,0.7); font-size: 1.05rem; padding: 14px 0; grid-column: 1 / -1; }
.gal-empty a { color: var(--amber-light); text-decoration: underline; text-underline-offset: 3px; }

.gal-cta { text-align: center; padding: 12vh 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.gal-cta h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 4.5vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.05; }
.gal-cta p { margin: 16px auto 28px; max-width: 46ch; color: rgba(255,255,255,0.82); font-size: 1.08rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(5,12,20,0.95); backdrop-filter: blur(6px); padding: 4vh 4vw; }
.lightbox.open { display: flex; }
.lb-stage { max-width: 92vw; max-height: 88vh; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-stage img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lb-stage figcaption { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.lb-close { position: absolute; top: 16px; right: 22px; font-size: 2.4rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.82; transition: opacity .2s; }
.lb-close:hover { opacity: 1; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.8rem; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lb-nav:hover { background: rgba(255,255,255,0.18); }
.lb-prev { left: 2vw; } .lb-next { right: 2vw; }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--amber-light); outline-offset: 2px; }
@media (max-width: 720px) {
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .gal-item figcaption { opacity: 1; transform: none; font-size: 0.72rem; }
  .gal-item::after { opacity: 1; }
  .lb-nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .gal-cat { padding: 6vh 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .build-grid, .feature-row { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .step__grid { grid-template-columns: 1fr; gap: 8px; }
  .step__num { font-size: clamp(3.4rem, 22vw, 7rem); }
}
@media (max-width: 720px) {
  .container, .site-header, .hero__inner { padding-left: 20px; padding-right: 20px; }
  .nav { gap: 16px; }
  .nav .link { display: none; }
  .build-grid, .feature-row, .why-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero__meta { gap: 26px; }
  .gallery__intro { flex-basis: 78vw; }
  .shot { flex-basis: 76vw; height: 56vh; }
  .cta__contacts { gap: 18px; flex-direction: column; }
}

/* Process section on small screens */
@media (max-width: 720px) {
  .process__sticky::before { background: linear-gradient(180deg, rgba(8,22,37,0.30) 0%, rgba(8,22,37,0.86) 70%); }
  .process__overlay { align-self: flex-end; }
  .process__sticky { align-items: flex-end; padding-bottom: 8vh; }
  .pstep h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .pstep-stack { min-height: 210px; }
}

/* ============================================================
   Mobile optimization pass — layered after the base responsive
   rules so these win on phones/tablets.
   ============================================================ */

/* Gallery: the GSAP horizontal-scroll was never wired, so on touch
   turn the clipped row into a natively swipeable, snap-scrolling rail
   the user can actually pan through. */
@media (max-width: 980px) {
  .gallery__pin {
    height: auto; align-items: stretch;
    padding: 12vh 0 13vh;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px; /* keep snapped items off the screen edge */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery__pin::-webkit-scrollbar { display: none; }
  .gallery__track { padding: 0 20px; gap: 16px; }
  .gallery__intro { scroll-snap-align: start; align-self: center; }
  .shot { scroll-snap-align: center; }
}

@media (max-width: 720px) {
  /* Tighten desktop-sized vertical rhythm on phones */
  .build, .why { padding: 10vh 0; }
  .cta { padding: 12vh 0; }
  .statement { padding: 12vh 0; }
  .section-head { margin-bottom: 30px; }
  .feature-row { margin-top: 32px; }
  .site-header { padding: 16px 20px; }
  .site-header.scrolled { padding: 12px 20px; }
  .brand-emblem { height: 34px; }
  .brand-name { font-size: 0.92rem; }
  .brand-tag { font-size: 0.58rem; letter-spacing: 0.22em; }

  /* HERO — keep the headline clear of the fixed header and fit the
     whole stack comfortably on one screen. */
  .hero { min-height: 600px; }
  .hero__inner { padding-bottom: 9vh; }
  .hero h1 { font-size: clamp(2.25rem, 8.4vw, 3.1rem); line-height: 1.0; max-width: 18ch; }
  .hero__sub { margin-top: 16px; font-size: 1rem; max-width: 40ch; }
  .hero__cta { margin-top: 22px; gap: 10px; }
  .hero__meta { margin-top: 24px; gap: 16px 26px; padding-top: 16px; }
  .hero__meta div span { font-size: 1.42rem; }

  /* PROCESS — give the self-erecting barn real presence instead of a
     tiny shape adrift in empty space: pull the SVG up and scale it. */
  .barn { transform: scale(1.42); transform-origin: 50% 38%; }
  .process__sticky { padding-bottom: 7vh; }
  .pstep p { font-size: 1rem; }
  .shot { height: 54vh; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(2.0rem, 9vw, 2.5rem); }
  .hero__meta { gap: 14px 22px; }
  .hero__meta div span { font-size: 1.26rem; }
  .hero__meta div small { font-size: 0.62rem; letter-spacing: 0.12em; }
}

/* The statement's tall empty zone + Process overlap is a DESKTOP device for
   tightening the gap under a centered headline. On phones/tablets the headline
   is far taller and fills the screen on its own, so the overlap was clipping
   its last line — drop it there and use modest padding instead. */
@media (max-width: 980px) {
  .statement { padding: 13vh 0 11vh; }
  .process { margin-top: 0; }
}

/* Header + hero chrome from tablet down: this is a single-page scroll
   site with no drawer menu, so hide the inline nav links and keep the
   Quote button on ONE tidy line (it was wrapping into an oversized amber
   blob). Also drop the decorative scroll cue, which collided with the
   full-width hero stat row on phones/tablets. */
@media (max-width: 900px) {
  .nav .link { display: none; }
  .site-header .btn-amber { padding: 10px 16px; font-size: 0.72rem; letter-spacing: 0.05em; }
  .scroll-cue { display: none; }
}
/* Phones: the full word-mark lockup can't share a phone-width row with
   the CTA without wrapping (they met with zero gap at ~360px), so drop
   the header text and let the emblem — which reads "GNP" — carry the
   brand. The footer keeps its full lockup. */
@media (max-width: 520px) {
  .site-header .brand-text { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue::after { animation: none; }
  .hero__media, .step__bg { transform: none !important; }
}