/* ============================================================
   TW CUSTOMS — forged dark industrial
   steel-blue (brand) × copper (craft) on brushed gunmetal
   ============================================================ */

:root {
  --bg-0: #07090b;
  --bg-1: #0c0f12;
  --bg-2: #12161b;
  --line: rgba(150, 170, 190, 0.14);

  --steel: #4da8da;
  --steel-hi: #7cc6ee;
  --steel-glow: rgba(77, 168, 218, 0.35);

  --copper: #c07a3d;
  --copper-hi: #e59a5c;
  --copper-deep: #8a4f22;

  --text: #cfd6dd;
  --text-dim: #8b96a2;

  --chrome-grad: linear-gradient(178deg, #f4f7fa 0%, #cfd8e0 38%, #7e8b98 52%, #b9c4cf 60%, #eef2f6 100%);

  --font-display: "Michroma", sans-serif;
  --font-body: "Barlow", sans-serif;
  --font-cond: "Barlow Condensed", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--copper-deep); color: #fff; }

/* ---------- fixed scene layers ---------- */
/* Sits UNDER the WebGL canvas. The brand already lives on brushed gunmetal —
   it's the business card the logo was cut from — so the page rests on the same
   material instead of flat black: fine brush scratches, lit by a forge glow
   from below and a steel rim from above, mirroring the 3D scene's own lights.
   Done in gradients rather than an image: a noise tile that reads this subtly
   still costs ~126KB, and gradients cost nothing and never tile-repeat. */
.plate {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-0);
  /* Light pools sit RIGHT, where the 3D cuff lives — the copy column stays dark
     so text contrast is never traded away for atmosphere. */
  /* Intensities are contrast-budgeted, not eyeballed: --text-dim (#8b96a2) on
     the warm pool measures 4.88:1, clearing WCAG AA's 4.5. At 0.30 it fell to
     4.13 and failed. A third full-screen haze layer was cut for the same
     reason — being global, it taxed contrast on every section at once. */
  background-image:
    radial-gradient(100% 70% at 78% 108%, rgba(255, 118, 38, 0.22), transparent 60%),
    radial-gradient(75% 60% at 88% -8%, rgba(77, 168, 218, 0.14), transparent 62%),
    /* brush scratches — coprime periods so they never resolve into bands */
    repeating-linear-gradient(0deg, rgba(220, 236, 248, 0.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(220, 236, 248, 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg, rgba(220, 236, 248, 0.025) 0 1px, transparent 1px 17px);
}

#forge {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* eased off since the plate below now supplies its own depth — the old
     0.55 corner falloff was swallowing the forge glow entirely */
  background:
    radial-gradient(125% 95% at 50% 42%, transparent 48%, rgba(4, 5, 7, 0.38) 100%),
    linear-gradient(to bottom, rgba(4, 5, 7, 0.32), transparent 18%, transparent 84%, rgba(4, 5, 7, 0.42));
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.6s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

main { position: relative; z-index: 4; }

/* ---------- type helpers ---------- */
.chrome {
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.copper-ital {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 400;
  background: linear-gradient(160deg, var(--copper-hi), var(--copper) 55%, var(--copper-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
}

/* background-clip:text only paints inside the element's box, and headings run a
   tight line-height (1.14) — so descenders (the g in "Forged", y in "by") fell
   outside the box and simply weren't drawn. Pad the paint box out and cancel it
   with an equal negative margin, so the fix costs nothing in layout. */
.chrome,
.copper-ital {
  padding-top: 0.18em;
  padding-bottom: 0.18em;
  margin-top: -0.18em;
  margin-bottom: -0.18em;
}

.label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.4rem;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.14;
  text-wrap: balance;
}

h2 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); margin-bottom: 1.6rem; }
h2 .copper-ital { font-size: 0.92em; }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* stagger siblings */
.reveal.is-in:nth-child(2) { transition-delay: 0.08s; }
.reveal.is-in:nth-child(3) { transition-delay: 0.16s; }
.reveal.is-in:nth-child(4) { transition-delay: 0.24s; }
.reveal.is-in:nth-child(5) { transition-delay: 0.32s; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(8, 10, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
/* the real logo mark — it carries its own chrome shading, so no fill/recolour,
   just a soft glow to seat it against the dark nav */
.nav__anvil {
  width: auto;
  height: 34px;
  display: block;
  filter: drop-shadow(0 0 9px rgba(77, 168, 218, 0.4));
}
.nav__word {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav__word em { font-style: normal; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
}
.nav__links a {
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.25s;
}
.nav__links a:hover { color: var(--steel-hi); }

/* hairline divider between the text links and the contact icons */
.nav__sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 -0.35rem;
}

.nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--text-dim);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.nav__icon svg { width: 19px; height: 19px; display: block; }
.nav__icon:hover {
  color: var(--steel-hi);
  border-color: rgba(77, 168, 218, 0.35);
  background: rgba(77, 168, 218, 0.08);
}
.nav__icon:focus-visible {
  outline: none;
  color: var(--steel-hi);
  border-color: var(--steel);
  box-shadow: 0 0 0 3px var(--steel-glow);
}

.nav__cta {
  color: var(--steel-hi) !important;
  border: 1px solid rgba(77, 168, 218, 0.45);
  padding: 0.45rem 1.1rem;
  border-radius: 3px;
  transition: background 0.25s, box-shadow 0.25s;
}
.nav__cta:hover {
  background: rgba(77, 168, 218, 0.12);
  box-shadow: 0 0 18px var(--steel-glow);
}

@media (max-width: 640px) {
  /* text links collapse, but keep call + Facebook reachable — on a phone
     they're the two things a visitor actually wants */
  .nav__links a:not(.nav__cta):not(.nav__icon) { display: none; }
  .nav__links { gap: 0.4rem; }
  .nav__sep { display: none; }
  .nav__cta { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
}

/* Anvil + wordmark + 2 icons + CTA needs ~493px; most phones are 360-430.
   Drop the wordmark and keep the anvil — the mark still reads as the brand,
   and the name is in the hero anyway. Without this the CTA gets clipped
   (body has overflow-x: hidden, so it wouldn't even scroll into view). */
@media (max-width: 520px) {
  .nav__word { display: none; }
  .nav__brand { gap: 0; }
}

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4rem) 4rem;
  position: relative;
}

.hero__inner { max-width: 780px; }

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--steel);
  margin-bottom: 1.8rem;
}
.tick {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: linear-gradient(to right, var(--steel), transparent);
  box-shadow: 0 0 8px var(--steel-glow);
}

.hero__title {
  font-size: clamp(2.5rem, 7.2vw, 5.6rem);
  margin-bottom: 1.8rem;
}
.hero__title > span { display: block; }
.hero__title .copper-ital { font-size: 0.95em; }

.hero__sub {
  max-width: 34rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  color: var(--text-dim);
  margin-bottom: 2.4rem;
}

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero__scroll span {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--steel));
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}
.hero__scroll p {
  font-family: var(--font-cond);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  border-radius: 3px;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
}
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }
.btn__icon { width: 1.15em; height: 1.15em; }

.btn--forge {
  color: #0a0703;
  background: linear-gradient(165deg, var(--copper-hi), var(--copper) 55%, var(--copper-deep));
  box-shadow: 0 4px 22px rgba(192, 122, 61, 0.35), inset 0 1px 0 rgba(255, 230, 200, 0.55);
}
.btn--forge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(192, 122, 61, 0.5), inset 0 1px 0 rgba(255, 230, 200, 0.55);
}

.btn--ghost {
  color: var(--steel-hi);
  border: 1px solid rgba(77, 168, 218, 0.4);
  background: rgba(77, 168, 218, 0.05);
}
.btn--ghost:hover {
  background: rgba(77, 168, 218, 0.13);
  box-shadow: 0 0 24px var(--steel-glow);
  transform: translateY(-2px);
}

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.9rem 0;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  animation: ticker-roll 28s linear infinite;
}
.ticker__track span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.ticker__track i {
  font-style: normal;
  color: var(--copper);
  font-size: 0.6rem;
}
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

/* ---------- shared panel ---------- */
.panel {
  background: linear-gradient(170deg, rgba(16, 20, 25, 0.82), rgba(10, 13, 16, 0.9));
  border: 1px solid var(--line);
  border-radius: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: relative;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(180, 200, 220, 0.35), transparent);
}

/* ---------- craft ---------- */
.craft {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 14vh clamp(1.2rem, 5vw, 4rem);
}
/* Desktop only: the cuff sweeps LEFT through this section, and with the panel
   also on the left it ended up half-hidden behind the frosted glass. Sending
   the panel right gives the piece the empty half of the screen, and alternates
   against the hero's left-aligned copy. Mobile stacks full-width, so it's
   irrelevant there. */
@media (min-width: 1025px) {
  .craft { justify-content: flex-end; }
}
.craft__panel {
  max-width: 560px;
  padding: clamp(2rem, 4vw, 3.4rem);
  /* flex items default to min-width:auto, so the 3-across .craft__facts row
     set a min-content floor the panel couldn't shrink below — it overflowed
     390px viewports by ~66px and body's overflow-x:hidden cut the copy
     mid-word. Let it shrink; the facts row wraps below. */
  min-width: 0;
}
.craft__panel p { color: var(--text-dim); margin-bottom: 1.1rem; }
.craft__panel strong { color: var(--text); }

.craft__facts {
  list-style: none;
  display: flex;
  gap: 2.4rem;
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.craft__facts li { display: flex; flex-direction: column; gap: 0.2rem; }
.craft__facts strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.craft__facts span {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ---------- work ---------- */
.work {
  padding: 16vh clamp(1.2rem, 5vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
}
.work__head { margin-bottom: 3.2rem; }
.work__lead {
  margin-top: 1.2rem;
  max-width: 46rem;
  color: var(--text-dim);
  font-size: 1.02rem;
  /* the 3D cuff drifts behind this line on scroll — same treatment as the
     testimonial, so it stays readable over polished metal */
  text-shadow: 0 1px 3px rgba(7, 9, 11, 0.95), 0 0 18px rgba(7, 9, 11, 0.85);
}
.work__lead strong { color: var(--text); font-weight: 500; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

.work__card {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  /* column + figcaption's margin-top:auto keeps every Order Now button on the
     same baseline even when a title wraps to two lines on narrow cards */
  display: flex;
  flex-direction: column;
  background: rgba(12, 15, 19, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s;
}
.work__card:hover { transform: translateY(-6px); }
.work__card[data-tone="copper"]:hover { box-shadow: 0 18px 44px rgba(192, 122, 61, 0.22); }
.work__card[data-tone="steel"]:hover { box-shadow: 0 18px 44px rgba(77, 168, 218, 0.2); }

.work__img {
  aspect-ratio: 4 / 3.4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.work__card[data-tone="copper"] .work__img {
  background:
    radial-gradient(80% 90% at 30% 25%, rgba(229, 154, 92, 0.32), transparent 60%),
    linear-gradient(150deg, #241812, #120c08 65%);
}
.work__card[data-tone="steel"] .work__img {
  background:
    radial-gradient(80% 90% at 70% 25%, rgba(77, 168, 218, 0.28), transparent 60%),
    linear-gradient(150deg, #101820, #0a0e13 65%);
}
.work__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 3px, rgba(255, 255, 255, 0.016) 3px 4px);
}
.work__img img {
  width: 100%;
  height: 100%;
  /* .work__img is a flex container, and a flex item won't shrink below its
     intrinsic size by default — the 800px source overflowed the ~250px card
     and got clipped, showing a zoomed centre crop instead of the photo. */
  min-width: 0;
  object-fit: cover;
  display: block;
  /* shot on a workbench in daylight — knock the warmth back a touch so the
     photos sit in the site's cooler dark palette instead of glowing */
  filter: saturate(0.94) brightness(0.96);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s;
}
.work__card:hover .work__img img {
  transform: scale(1.045);
  filter: saturate(1) brightness(1.02);
}

.work__card figcaption {
  padding: 1.1rem 1.2rem 1.25rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.work__card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #e6ebf0;
  margin-bottom: 0.3rem;
}
.work__card figcaption span {
  font-size: 0.88rem;
  color: var(--text-dim);
}

.work__price {
  margin: 0.85rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--copper-hi);
}
.work__price em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: 0.35rem;
}

/* full-width inside the card, and tighter than the page-level buttons so the
   long "Order Now" + icon doesn't wrap at the 250px grid minimum */
.work__buy {
  justify-content: center;
  padding: 0.72rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  gap: 0.45rem;
}

.work__buy-note {
  margin: 1.8rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dim);
  /* the 3D cuff drifts behind this block on scroll, same as .work__quote —
     keep the words readable over polished metal without boxing them in */
  position: relative;
  text-shadow: 0 1px 3px rgba(7, 9, 11, 0.95), 0 0 18px rgba(7, 9, 11, 0.85);
}
.work__buy-note strong { color: var(--text); font-weight: 500; }
.work__buy-note a { color: var(--steel-hi); }

.work__quote {
  margin: 4rem auto 0;
  max-width: 620px;
  text-align: center;
}
.work__quote p {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}
/* the 3D cuff drifts behind this block on scroll — keep the words readable
   over polished metal without boxing the quote in a panel */
.work__quote p,
.work__quote cite {
  text-shadow: 0 1px 3px rgba(7, 9, 11, 0.95), 0 0 18px rgba(7, 9, 11, 0.85);
}
.work__quote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-cond);
  font-style: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--copper);
}
.work__quote cite a {
  color: inherit;
  text-decoration-color: rgba(192, 122, 61, 0.45);
  text-underline-offset: 3px;
}
.work__quote cite a:hover { color: var(--copper-hi); }

/* ---------- process ---------- */
.process {
  padding: 16vh clamp(1.2rem, 5vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
}
.process__head { margin-bottom: 3.2rem; }

.process__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 2.2rem 1.8rem 2rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(12, 15, 19, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--steel), transparent 80%);
  opacity: 0.7;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--steel-hi);
  border: 1px solid rgba(77, 168, 218, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(77, 168, 218, 0.18) inset, 0 0 12px var(--steel-glow);
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #e6ebf0;
  margin-bottom: 0.7rem;
}
.step p { color: var(--text-dim); font-size: 0.96rem; }

/* ---------- order ---------- */
.order {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14vh clamp(1.2rem, 5vw, 4rem);
}
.order__panel {
  max-width: 640px;
  padding: clamp(2.2rem, 5vw, 3.8rem);
  text-align: center;
}
.order__panel .label { text-align: center; }
.order__lead { color: var(--text-dim); max-width: 32rem; margin: 0 auto 2.2rem; }

.order__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* ---------- build request form ---------- */
.order__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
  text-align: left;
  margin-bottom: 2.4rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-cond);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--steel);
}
.field__opt {
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: rgba(7, 9, 11, 0.6);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field select {
  appearance: none;
  cursor: pointer;
  /* chevron drawn inline so the control needs no external asset */
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%),
                    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.32rem, calc(100% - 0.8rem) 1.32rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field select option { background: var(--bg-1); color: var(--text); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(139, 150, 162, 0.6); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(7, 9, 11, 0.85);
  border-color: var(--steel);
  box-shadow: 0 0 0 3px var(--steel-glow);
}
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--copper);
}

/* honeypot — off-canvas rather than display:none so bots still see it */
.order__form input[name="_gotcha"],
.order-modal__form input[name="_gotcha"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.order__submit {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.6rem;
  border: 0;
  cursor: pointer;
  font-family: var(--font-cond);
}
.order__submit[disabled] { opacity: 0.55; cursor: progress; }

.form__status {
  grid-column: 1 / -1;
  text-align: center;
  min-height: 1.4rem;
  font-size: 0.94rem;
  color: var(--text-dim);
}
.form__status.is-ok { color: var(--steel-hi); }
.form__status.is-err { color: var(--copper-hi); }

.order__alt {
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}
.order__alt-head {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

@media (max-width: 620px) {
  .order__form { grid-template-columns: 1fr; }
  .craft__facts { flex-wrap: wrap; gap: 1.1rem 1.8rem; }
}

/* Phone hero: a full-viewport sandwich instead of a text brick with the piece
   dropped underneath. Kicker + headline hold the top, sub + CTAs anchor the
   bottom, and the cuff fills the band between them (js computeFrame measures
   the gap), sized to bleed slightly behind the copy so it reads as one
   composition. The scroll cue isn't needed on touch. */
@media (max-width: 760px) {
  .hero {
    align-items: stretch;
    padding-top: calc(4.2rem + 2vh);
    padding-bottom: max(2.2rem, 4vh);
  }
  .hero__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: none;
    align-items: center;
    text-align: center;
  }
  .hero__kicker { margin-bottom: 1.2rem; }
  /* the kicker's tick line reads as a leader on the left — mirror it on the
     right so the centred lockup stays symmetric */
  .hero__kicker::after {
    content: "";
    display: inline-block;
    width: 42px;
    height: 1px;
    background: linear-gradient(to left, var(--steel), transparent);
    box-shadow: 0 0 8px var(--steel-glow);
  }
  .hero__actions { justify-content: center; }
  .hero__title { margin-bottom: 0; }
  /* margin-top:auto is what opens the band — everything from here down rides
     the bottom edge of the viewport */
  .hero__sub {
    margin-top: auto;
    margin-bottom: 1.4rem;
    padding-top: 1rem;
  }
  /* the piece bleeds behind the copy edges — keep the words readable over metal */
  .hero__sub,
  .hero__actions {
    text-shadow: 0 1px 3px rgba(7, 9, 11, 0.95), 0 0 16px rgba(7, 9, 11, 0.85);
  }
  .hero__scroll { display: none; }
}

.order__note {
  margin-top: 1.8rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.order__note a { color: var(--steel-hi); text-decoration: none; }
.order__note a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  background: rgba(7, 9, 11, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4rem clamp(1.2rem, 5vw, 4rem) 2rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto 3rem;
  /* two even halves on desktop, single stack on phones — centred either way */
  text-align: center;
  justify-items: center;
}

/* full lockup here — it already contains the wordmark, so the separate
   .foot__word text it replaced would have said "TW Customs" twice */
.foot__logo {
  width: auto;
  height: 118px;
  max-width: 100%;
  display: block;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 0 14px rgba(77, 168, 218, 0.28));
}
.foot__tag {
  margin-top: 0.5rem;
  font-family: var(--font-cond);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
}

.foot__col h4 {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1rem;
}
.foot__col a,
.foot__col p {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.foot__col a:hover { color: var(--steel-hi); }

.foot__fine {
  text-align: center;
  font-family: var(--font-cond);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(140, 150, 160, 0.5);
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* agency credit — quieter than the copyright line above it */
.foot__credit {
  text-align: center;
  font-family: var(--font-cond);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(140, 150, 160, 0.35);
  margin-top: 0.7rem;
}
.foot__credit a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s;
}
.foot__credit a:hover { color: var(--steel-hi); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .grain { animation: none; }
  .hero__scroll span { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- order dialog (Work section) ---------- */
.order-modal {
  margin: auto;                 /* keep the UA centring after width/max-height */
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  width: min(620px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  background: linear-gradient(168deg, #12171d, #0a0d11 70%);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
  overflow: visible;
}
.order-modal::backdrop {
  background: rgba(5, 7, 9, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.order-modal__form {
  padding: 1.9rem 1.8rem 1.7rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  position: relative;
}
.order-modal__x {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
}
.order-modal__x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.order-modal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.35;
  margin: 0.35rem 0 0;
}
.order-modal__price {
  margin: 0.5rem 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--copper-hi);
}
.order-modal__price em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: 0.4rem;
}

.order-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}
/* State + ZIP share one grid cell so the address block stays compact */
.order-modal__row { flex-direction: row; gap: 0.8rem; }
.order-modal__pair { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.order-modal__pair:first-child { max-width: 6.5rem; }

.order-modal__submit { width: 100%; justify-content: center; margin-top: 1.5rem; }
.order-modal__fine {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 560px) {
  .order-modal__grid { grid-template-columns: 1fr; }
  .order-modal__form { padding: 1.6rem 1.2rem 1.4rem; }
}

/* the dialog is a top-layer element, so the reveal-on-scroll observer never
   sees it — make sure nothing inside is left at opacity 0 */
.order-modal .reveal { opacity: 1; transform: none; }

.order-modal__hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
}