/* ============================================================
   FINAL IRON — Custom Iron Work, Los Angeles
   Brand system derived from the business cards:
   black + charcoal metal, metallic silver, copper/bronze accent.
   Cinzel (crest/eyebrows) · Oswald (display) · Barlow (text).
   ============================================================ */

:root {
  /* Surfaces — warm near-black metal → charcoal */
  --black:      #0b0a08;
  --charcoal:   #131110;
  --charcoal-2: #1a1715;
  --panel:      #17130f;
  --steel:      #221d18;
  --line:       #2c2620;
  --line-2:     #3a322a;

  /* Ink — warm off-white / warm grays */
  --text:       #ece7df;
  --text-dim:   #b3aa9c;
  --text-mute:  #857b6d;

  /* Copper / bronze — primary accent (from the cards) */
  --copper:     #c2884e;
  --copper-hi:  #dcab72;
  --copper-2:   #a06a37;
  --copper-deep:#7c4f27;
  --copper-glow: rgba(194,136,78,0.34);
  --on-copper:  #140d06;

  /* Metallic silver — headings / wordmark */
  --silver:     #d6d5d2;
  --silver-hi:  #f2f0ec;
  --silver-mid: #9d9a94;
  --silver-lo:  #6f6c66;

  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.035) inset, 0 20px 44px -24px rgba(0,0,0,0.95);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--copper); text-decoration: none; transition: color .2s; }
a:hover { color: var(--copper-hi); }
button { font-family: inherit; cursor: pointer; }

/* black-metal texture behind dark plated sections */
.plate {
  background-color: var(--charcoal);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 8px),
    radial-gradient(120% 120% at 82% -12%, rgba(220,171,114,0.05), transparent 58%);
}

/* ---- Typography ---- */
.display {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--silver);
  background: linear-gradient(178deg, var(--silver-hi) 8%, var(--silver) 40%, var(--silver-mid) 78%, var(--silver-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.kicker {
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 13px;
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper));
  display: inline-block;
}
.lede { color: var(--text-dim); font-size: 1.16rem; }

/* ---- Copper ornamental divider (diamond in a hairline) ---- */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--copper); margin: 0;
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(120px, 22vw);
  background: linear-gradient(90deg, transparent, var(--copper-2));
}
.ornament::after { background: linear-gradient(90deg, var(--copper-2), transparent); }
.ornament .diamond { width: 8px; height: 8px; transform: rotate(45deg); background: var(--copper); box-shadow: 0 0 12px var(--copper-glow); flex: none; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 62px); }
.section-head .display { font-size: clamp(34px, 5.2vw, 58px); margin-top: 16px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Oswald", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 16px; padding: 16px 27px;
  border: 1px solid transparent; border-radius: 2px;
  transition: transform .18s var(--ease), background .2s, box-shadow .25s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--copper-hi), var(--copper) 55%, var(--copper-2));
  color: var(--on-copper);
  box-shadow: 0 10px 26px -10px var(--copper-glow), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.btn-primary:hover { color: var(--on-copper); box-shadow: 0 16px 38px -10px var(--copper-glow), 0 0 24px -6px var(--copper-glow); transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--copper); color: var(--copper-hi); }
.btn-block { width: 100%; justify-content: center; }

/* copper accent dot with soft glow */
.dot-arc { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-hi); box-shadow: 0 0 10px var(--copper), 0 0 18px var(--copper-glow); }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}