/* Iron Works site header + photo bands (29 Sep 2026 pass).
   Plain CSS, NOT Tailwind: the 4 standalone static pages (public/*.html) use the
   frozen stylesheet assets/index-C2vj6Rcw.css, which has none of the new utility
   classes. This file is linked from index.html (React pages) AND the static pages,
   so the header looks identical everywhere. Header markup lives in
   src/components/Layout.jsx; sync-static-chrome.mjs copies the rendered header and
   footer into the static pages at build time. */

:root {
  --iw-orange: #E67E22;
  --iw-orange-dk: #D35400;
  --iw-dark: #1A1A1A;
  --iw-navy: #2C3E50;
  --iw-font: 'Bebas Neue', sans-serif;
}

/* ---------- Header shell ---------- */
.iw-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--iw-dark);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.iw-header__inner {
  max-width: 80rem; margin: 0 auto;
  padding: 0 1rem;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 640px) { .iw-header__inner { padding: 0 1.5rem; } }
@media (min-width: 768px) { .iw-header__inner { height: 88px; } }
@media (min-width: 1024px) { .iw-header__inner { padding: 0 2rem; } }

/* ---------- Brand ---------- */
.iw-brand { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; text-decoration: none; }
.iw-brand__logo { display: block; height: 48px; width: auto; }
@media (min-width: 768px) { .iw-brand__logo { height: 64px; } }
.iw-brand__text { display: flex; flex-direction: column; gap: 3px; font-family: var(--iw-font); letter-spacing: .08em; line-height: 1; }
.iw-brand__name { color: #fff; font-size: 1.35rem; }
.iw-brand__sub { color: rgba(255,255,255,.62); font-size: .78rem; }
@media (min-width: 768px) {
  .iw-brand__name { font-size: 1.6rem; }
  .iw-brand__sub { font-size: .85rem; }
}

/* ---------- Desktop nav (5 items) ---------- */
.iw-nav { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1180px) { .iw-nav { display: flex; } }
.iw-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem;
  font-family: var(--iw-font); font-size: 1.2rem; letter-spacing: .07em; line-height: 1;
  color: rgba(255,255,255,.82); text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
@media (min-width: 1320px) { .iw-nav__link { padding: .55rem .95rem; } }
.iw-nav__link:hover, .iw-nav__item--drop:hover > .iw-nav__link { color: #fff; }
.iw-nav__link::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: 0; height: 2px;
  background: var(--iw-orange); transform: scaleX(0); transition: transform .15s;
}
.iw-nav__link:hover::after { transform: scaleX(1); }
.iw-nav__link[aria-current="page"], .iw-nav__link.is-active { color: var(--iw-orange); }
.iw-nav__link[aria-current="page"]::after, .iw-nav__link.is-active::after { transform: scaleX(1); }
.iw-nav__chev { width: 14px; height: 14px; opacity: .7; transition: transform .15s; }
.iw-nav__item--drop:hover .iw-nav__chev, .iw-nav__item--drop:focus-within .iw-nav__chev { transform: rotate(180deg); }

/* Services dropdown: hover or keyboard focus opens it (no JS, works on static pages) */
.iw-nav__item--drop { position: relative; }
.iw-drop {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  padding: .5rem 0; margin-top: 0;
  background: var(--iw-dark); border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--iw-orange);
  box-shadow: 0 16px 32px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.iw-nav__item--drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* hover bridge */
.iw-nav__item--drop:hover .iw-drop, .iw-nav__item--drop:focus-within .iw-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.iw-drop a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1.1rem;
  font-family: var(--iw-font); font-size: 1.1rem; letter-spacing: .06em; line-height: 1.1;
  color: rgba(255,255,255,.85); text-decoration: none; white-space: nowrap;
}
.iw-drop a:hover, .iw-drop a:focus-visible { background: var(--iw-navy); color: #fff; }
.iw-drop a[aria-current="page"] { color: var(--iw-orange); }
.iw-tag {
  font-family: var(--iw-font); font-size: .8rem; letter-spacing: .08em; line-height: 1;
  padding: .25rem .45rem; background: #C0392B; color: #fff;
}

/* ---------- Actions: call + quote + burger ---------- */
.iw-actions { display: flex; align-items: center; gap: .6rem; }
.iw-btn {
  display: none; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.1rem;
  font-family: var(--iw-font); font-size: 1.15rem; letter-spacing: .07em; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s;
}
@media (min-width: 768px) { .iw-btn { display: inline-flex; } }
.iw-btn svg { width: 18px; height: 18px; flex: none; }
.iw-btn--call { background: var(--iw-orange); color: var(--iw-dark); border: 2px solid var(--iw-orange); }
.iw-btn--call:hover { background: var(--iw-orange-dk); border-color: var(--iw-orange-dk); }
.iw-btn--quote { border: 2px solid var(--iw-orange); color: var(--iw-orange); }
.iw-btn--quote:hover { background: var(--iw-orange); color: var(--iw-dark); }
.iw-btn__long { display: none; }
@media (min-width: 1360px) { .iw-btn__long { display: inline; } }

.iw-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin-right: -6px;
  background: none; border: 0; color: #fff; cursor: pointer;
}
@media (min-width: 1180px) { .iw-burger { display: none; } }
.iw-burger svg { width: 28px; height: 28px; }
.iw-burger .iw-ico-close { display: none; }
.iw-burger[aria-expanded="true"] .iw-ico-open { display: none; }
.iw-burger[aria-expanded="true"] .iw-ico-close { display: block; }

/* ---------- Mobile menu ---------- */
.iw-mnav { background: #151515; border-top: 1px solid rgba(255,255,255,.1); max-height: calc(100vh - 72px); overflow-y: auto; }
.iw-mnav[hidden] { display: none; }
@media (min-width: 1180px) { .iw-mnav { display: none !important; } }
.iw-mnav__list { list-style: none; margin: 0 auto; padding: .5rem 1rem 1.25rem; max-width: 40rem; }
@media (max-width: 767px) { .iw-mnav__cta { padding-bottom: 84px; } } /* clear the fixed call bar */
.iw-mnav__list > li { border-bottom: 1px solid rgba(255,255,255,.08); }
.iw-mnav a.iw-mnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .95rem .25rem;
  font-family: var(--iw-font); font-size: 1.35rem; letter-spacing: .07em; line-height: 1;
  color: #fff; text-decoration: none;
}
.iw-mnav a.iw-mnav__link[aria-current="page"] { color: var(--iw-orange); }
.iw-mnav__sub { list-style: none; margin: -.35rem 0 .6rem; padding: 0 0 0 1rem; border-left: 2px solid rgba(230,126,34,.5); }
.iw-mnav__sub a.iw-mnav__link { padding: .6rem .25rem; font-size: 1.1rem; color: rgba(255,255,255,.78); }
.iw-mnav__cta { display: grid; gap: .6rem; padding-top: 1rem; }
.iw-mnav__cta a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1rem; font-family: var(--iw-font); font-size: 1.25rem; letter-spacing: .07em; line-height: 1;
  text-decoration: none;
}
.iw-mnav__cta svg { width: 20px; height: 20px; }
.iw-mnav__cta .is-call { background: var(--iw-orange); color: var(--iw-dark); }
.iw-mnav__cta .is-quote { border: 2px solid var(--iw-orange); color: var(--iw-orange); }

/* ---------- Photo band (hero + quote CTA backgrounds) ---------- */
.iw-photo { position: relative; overflow: hidden; isolation: isolate; background: var(--iw-dark); }
.iw-photo__img, .iw-photo__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.iw-photo__img { z-index: -2; }
.iw-photo__img img { object-fit: cover; }
.iw-photo__shade { position: absolute; inset: 0; z-index: -1; }
.iw-shade--even { background: linear-gradient(180deg, rgba(20,20,20,.74) 0%, rgba(20,20,20,.62) 50%, rgba(20,20,20,.82) 100%); }
.iw-shade--left { background: linear-gradient(90deg, rgba(20,20,20,.94) 0%, rgba(20,20,20,.86) 38%, rgba(20,20,20,.45) 70%, rgba(20,20,20,.25) 100%); }
@media (max-width: 767px) {
  .iw-shade--left { background: linear-gradient(180deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.86) 55%, rgba(20,20,20,.94) 100%); }
}

/* ---------- Footer bits ---------- */
.iw-foot-logo { display: block; height: 72px; width: auto; margin-bottom: 1rem; }
.iw-legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
  font-size: .75rem; line-height: 1.5;
}
.iw-legal p { color: rgba(255,255,255,.6); margin: 0; }
.iw-legal__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; }
.iw-legal__links a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .15s; }
.iw-legal__links a:hover { color: var(--iw-orange); }
.iw-legal__links a.iw-credit { color: rgba(255,255,255,.55); }
@media (min-width: 768px) {
  .iw-legal { flex-direction: row; justify-content: space-between; text-align: left; }
  .iw-legal__links { justify-content: flex-end; }
}

/* Static pages' closing CTA card (same look as the React PhotoBand card) */
.iw-cta-card { border: 1px solid rgba(230,126,34,.4); padding: 3.5rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .iw-cta-card { padding: 5rem 3rem; } }
.iw-cta-card p { color: rgba(255,255,255,.85); }

/* ---------- Blog (5 Oct 2026): light, high-contrast article body ---------- */
.iw-article { color: #23262b; font-size: 1.0625rem; line-height: 1.75; }
.iw-article > * + * { margin-top: 1.15rem; }
.iw-article p, .iw-article li { max-width: 70ch; }
.iw-article h2 { color: #1A1A1A; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; margin-top: 2.6rem; }
.iw-article h3 { color: #1A1A1A; font-size: 1.35rem; line-height: 1.2; letter-spacing: .03em; margin-top: 1.6rem; }
.iw-article a { color: #A84B0C; text-decoration: underline; text-underline-offset: 3px; }
.iw-article a:hover { color: #7A3608; }
.iw-article strong { color: #111; font-weight: 600; }
.iw-article ul, .iw-article ol { padding-left: 1.35rem; }
.iw-article ul { list-style: disc; }
.iw-article ol { list-style: decimal; }
.iw-article li + li { margin-top: .45rem; }
.iw-article li::marker { color: #C0621A; }
.iw-article__fig { margin: 2rem 0; }
.iw-article__fig--lead { margin-top: 0; }
.iw-article__fig img { display: block; width: 100%; background: #ddd; max-height: 540px; object-fit: cover; }
.iw-article__fig figcaption { font-size: .875rem; color: #555b63; margin-top: .55rem; line-height: 1.5; }
.iw-article__table { overflow-x: auto; margin: 1.6rem 0; border: 1px solid #d9d4cc; background: #fff; }
.iw-article__table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; min-width: 520px; }
.iw-article__table th, .iw-article__table td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid #e6e1d9; }
.iw-article__table thead th { background: #1A1A1A; color: #fff; font-weight: 600; }
.iw-article__table tbody th { font-weight: 600; color: #1A1A1A; background: #faf8f5; }
.iw-article__table tr:last-child th, .iw-article__table tr:last-child td { border-bottom: 0; }
.iw-article__faq, .iw-article__more, .iw-article__sources { border-top: 1px solid #ddd6cc; padding-top: .4rem; margin-top: 2.6rem; }
.iw-article__faq h3 + p { margin-top: .4rem; }
.iw-article__more ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.iw-article__more li + li { margin-top: 0; }
.iw-article__sources { font-size: .95rem; }
.iw-article__note { color: #555b63; font-size: .9rem; }
/* Blog cards (index + related posts) */
.iw-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ddd6cc; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.iw-card:hover { border-color: #E67E22; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.iw-card img { display: block; }
.iw-card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; }
.iw-card__date { font-size: .82rem; color: #5d636b; }
.iw-card__title { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.45rem; line-height: 1.1; color: #1A1A1A; }
.iw-card:hover .iw-card__title { color: #A84B0C; }
.iw-card__excerpt { font-size: .95rem; line-height: 1.55; color: #3b4047; }
.iw-card__more { font-size: .9rem; color: #A84B0C; text-decoration: underline; text-underline-offset: 3px; margin-top: .2rem; }
/* Homepage "Latest From The Blog" cards (5 Oct 2026): light cards with a real photo */
.iw-hpost { display: flex; align-items: center; background: #F6F4F0; border: 1px solid rgba(0,0,0,.08); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.iw-hpost:hover { box-shadow: 0 0 0 2px #E67E22; }
.iw-hpost picture, .iw-hpost > img { flex: 0 0 120px; }
.iw-hpost__img { display: block; width: 120px; height: 104px; object-fit: cover; }
.iw-hpost__body { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: .8rem 1rem; }
.iw-hpost__date { font-size: .8rem; color: #5d636b; }
.iw-hpost__title { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.2rem; line-height: 1.15; color: #1A1A1A; }
.iw-hpost:hover .iw-hpost__title { color: #A84B0C; }
@media (min-width: 640px) { .iw-hpost picture, .iw-hpost > img { flex-basis: 150px; } .iw-hpost__img { width: 150px; height: 112px; } }

/* Perf/a11y audit 6 Oct 2026: the warm-lead "we save your details" note that
   jbd-track.js injects inherits the near-black body text colour, which was
   invisible (1.15:1) on the dark contact form. */
.iw-dark-form [data-jbd-save-note] { color: rgba(255, 255, 255, 0.85); }

/* Brand-colour contrast, Josh OK 6 Oct 2026: small orange text on the slate
   (#2C3E50) cards uses a lighter orange, #EA9142 (4.5:1). Orange on black
   (#1A1A1A) already passes and is unchanged. */
[class*="bg-[#2C3E50]"] .text-\[\#E67E22\] { color: #EA9142; }
p a.text-\[\#E67E22\] { text-decoration: underline; text-underline-offset: 2px; }