/* iron.css — the material layer: steel-plate surfaces, bevelled red beams, rivets, brushed-steel logo. */

/* dark sections are steel plates: brushed lines + a soft top light */
.dark { background-image: linear-gradient(180deg, #262626 0%, #1F1F1F 42%, #1A1A1A 100%); }
.process, .closer, .footer, .page-hero, .cta-band { position: relative; }
.process::before, .closer::before, .footer::before, .page-hero::after, .cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 11px),
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
}
.process > .container, .closer > .container, .footer > .container, .page-hero > .container, .cta-band > .container { position: relative; z-index: 1; }

/* rivets in the four corners of a plate */
.process .container::before, .closer .container::before, .cta-band .container::before {
  content: ""; position: absolute; inset: -34px -42px; pointer-events: none; z-index: -1; opacity: .9;
  background:
    radial-gradient(circle at 6px 6px, #6A6A6A 3.5px, #2A2A2A 4px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 6px) 6px, #6A6A6A 3.5px, #2A2A2A 4px, transparent 5.5px),
    radial-gradient(circle at 6px calc(100% - 6px), #6A6A6A 3.5px, #2A2A2A 4px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #6A6A6A 3.5px, #2A2A2A 4px, transparent 5.5px);
}
@media (max-width: 720px) { .process .container::before, .closer .container::before, .cta-band .container::before { inset: -20px -10px; } }

/* every red beam element is a bevelled steel section */
.eyebrow::before, .prose h2::before {
  background: linear-gradient(180deg, #D0433C 0, var(--red) 30%, var(--red) 65%, var(--red-deep) 68%, #5C0D12 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.footer .beam-line { background: linear-gradient(180deg, #D0433C 0, var(--red) 30%, var(--red) 65%, var(--red-deep) 68%, #5C0D12 100%); inline-size: 60%; block-size: 8px; box-shadow: 0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.footer .beam-line::after { content: ""; position: absolute; inset-inline-end: -10px; inset-block: 0; inline-size: 10px; background: #5C0D12; clip-path: polygon(0 0, 100% 100%, 0 100%); }
html[dir="rtl"] .footer .beam-line::after { clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* pressed-steel buttons */
.btn:not(.btn-ghost):not(.btn-white) { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.28), 0 1px 0 #4A0A0E; }
.btn:not(.btn-ghost):not(.btn-white):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.28), 0 12px 30px -12px rgba(163,25,32,.55); }
.nav-cta, .wa-float { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.28), 0 10px 30px -10px rgba(0,0,0,.5); }

/* the brushed-steel logo render (footer) */
.brand-steel img { block-size: 104px; inline-size: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.footer .brand-steel { gap: 16px; }

/* steel edge on light cards */
.card { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(20,20,20,.06); }

/* iso members: a hairline highlight on the top faces reads as machined edges */
.build-svg .solid.plate .f { stroke: #0F0F0F; }