/* =========================================================
   Iron Built — Site theme layer
   Loads LAST on every page, after every other stylesheet.

   It does three things:
     1. Stops all motion, site-wide.
     2. Raises the type scale — body copy reads large.
     3. Gives every card, panel and form the same modern
        surface: soft radius, thin border, quiet shadow.
   ========================================================= */

/* ═════════════════════════════════════════════════════════
   1. NO MOTION — ANYWHERE
   Nothing on this site slides, fades, drifts or auto-plays.
   Hover and open states switch over instantly.
   ═════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

html { scroll-behavior: auto !important; }

/* Hover lifts and nudges removed; colour and shadow carry the state. */
a:hover, a:focus-visible,
button:hover, button:focus-visible,
.sec-card:hover, a.sec-card:hover,
.sec-card:hover .sec-card__media img,
a.sec-card:hover .sec-card__media img,
.sec-list li:hover::before,
.sec-btn:hover, .sec-video__play:hover span,
.order-card:hover, .oddeven-card:hover,
.rmc-card:hover, .calc-btn:hover,
.footer-nav__col a:hover,
.social-links a:hover, .social-links a:focus-visible,
.related-card:hover, .benefit-grid article:hover,
.button:hover, .header-button:hover, .header-button:hover span,
.top-strip__fb:hover, .site-nav__close:hover,
.home-arrow:hover, .banner-dot:hover {
  transform: none !important;
}

/* Anything a scroll-reveal script may have left hidden stays visible. */
.reveal, .motion-reveal, [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ═════════════════════════════════════════════════════════
   2. TYPE SCALE — LARGER THROUGHOUT
   Copy is sized to be read, not to fit around a picture.
   ═════════════════════════════════════════════════════════ */

:root { --theme-font: Manrope, "Segoe UI", system-ui, sans-serif; }

/* Base — matches about-iron-built-rmc.html reference design */
body { font-size: 1.05rem; line-height: 1.7; }

/* ─── Reference-sourced section pages ────────────────────── */
.sec-prose { font-size: 1.05rem !important; line-height: 1.75 !important; }
.sec-prose p,
.sec-prose li { font-size: 1.05rem !important; line-height: 1.75 !important; }
.sec-prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.sec-prose h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important; }
.sec-prose h4 { font-size: 1.1rem !important; }

/* Page section title — e.g. "Health & Safety" h1 */
.sec-title { font-size: clamp(1.5rem, 2.4vw, 2.2rem) !important; line-height: 1.18 !important; }
.sec-eyebrow { font-size: .8rem !important; letter-spacing: .13em !important; }
.sec-note { font-size: .95rem !important; }
.sec-list li { font-size: 1.05rem !important; line-height: 1.72 !important; }

.sec-card__title { font-size: 1.1rem !important; line-height: 1.3 !important; }
.sec-card__text { font-size: .97rem !important; line-height: 1.62 !important; }
.sec-card__more { font-size: .82rem !important; letter-spacing: .09em !important; }

.sec-btn { font-size: .95rem !important; padding: 12px 24px !important; }
.sec-panel { font-size: 1.05rem !important; }
.sec-acc__district { font-size: 1.05rem !important; }
.sec-acc__count { font-size: .9rem !important; }
.sec-acc__list li { font-size: .97rem !important; }
.sec-figure figcaption { font-size: .85rem !important; }

/* ─── Order / product pages ──────────────────────────────── */
.order-form label,
.calc-field label { font-size: .875rem !important; font-weight: 700 !important; }

.order-form input,
.order-form select,
.order-form textarea,
.calc-field input { font-size: 1rem !important; }

.calc-btn { font-size: .97rem !important; }
.calc-dims { font-size: 1.05rem !important; }
.calc-note,
.calc-trucks { font-size: .9rem !important; }

.rmc-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important; line-height: 1.22 !important; }
.why-intro { font-size: 1.05rem !important; line-height: 1.75 !important; }
.arrow-list li { font-size: 1.05rem !important; line-height: 1.7 !important; }

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer__heading { font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important; }
.footer-nav__col h3 { font-size: 1.05rem !important; margin-bottom: 12px !important; }
.footer-nav__col li { font-size: .97rem !important; line-height: 1.5 !important; margin-bottom: 7px !important; }
.site-footer__bar { font-size: .9rem !important; }

/* ═════════════════════════════════════════════════════════
   3. MODERN SURFACES
   One card language across every page: 16px radius, a thin
   line, a quiet shadow that deepens on hover.
   ═════════════════════════════════════════════════════════ */

:root {
  --theme-radius: 16px;
  --theme-line: #e2e5ea;
  --theme-shadow: 0 2px 10px rgba(18, 24, 31, .05);
  --theme-shadow-lg: 0 18px 44px rgba(18, 24, 31, .12);
  --theme-accent: #f37321;
}

.sec-card,
.sec-panel,
.sec-figure,
.sec-show__media,
.sec-video,
.order-card,
.oddeven-card,
.rmc-card,
.order-form-wrap,
.sec-table-wrap {
  border-radius: var(--theme-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--theme-shadow) !important;
}

.sec-card:hover,
a.sec-card:hover,
.order-card:hover,
.oddeven-card:hover,
.rmc-card:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

.page-banner img {
  border-radius: 0 !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Inputs and buttons pick up the same rounding. */
.order-form input,
.order-form select,
.order-form textarea,
.calc-field input {
  border-radius: 10px !important;
  padding: 15px 18px !important;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus,
.calc-field input:focus {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px rgba(243, 115, 33, .16) !important;
  outline: none !important;
}

.sec-btn,
.calc-btn,
.order-form button[type="submit"] {
  border-radius: 10px !important;
}

.sec-slider__dot,
.banner-dot { border-radius: 999px !important; }

/* Accessible focus ring for keyboard users, everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

/* ═════════════════════════════════════════════════════════
   SMALL SCREENS — copy stays large, it only stops growing
   ═════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  body { font-size: 1rem; }

  .sec-prose,
  .sec-prose p,
  .sec-prose li,
  .why-intro,
  .arrow-list li { font-size: 1rem !important; }

  .sec-title { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }
  .sec-card__text { font-size: .95rem !important; }
  .footer-nav__col li { font-size: .9rem !important; }
  .footer-nav__col h3 { font-size: 1rem !important; }
}

/* ═════════════════════════════════════════════════════════
   4. TEXT VISIBILITY

   Colour is set on the CONTAINERS that hold body copy, never
   on bare h1–h6 / p / td selectors. A bare element selector
   here would outrank the white text a page inherits from a
   dark or coloured panel and black it out.
   ═════════════════════════════════════════════════════════ */

:root {
  --theme-ink:     #12181f;   /* headings                       */
  --theme-copy:    #232c36;   /* body copy on light surfaces    */
  --theme-copy-2:  #3d434c;   /* secondary copy, still readable */
  --theme-accent-ink: #9c3f06; /* orange dark enough to read as text */
}

/* Light-surface copy containers. Children that carry their own
   colour — a white heading on a red card — keep it. */
.sec-prose,
.sec-body,
.sec-narrow,
.source-content,
.page-body,
.rmc-body,
.content-section,
.intro-text,
.info-block__desc,
.editorial-grid,
.benefit-grid,
.contact-grid { color: var(--theme-copy); }

/* Secondary copy never drops below a readable ink. */
.sec-card__text,
.sec-note,
.sec-acc__count,
.calc-note,
.calc-trucks,
.related-card small,
.source-content > p,
.source-content > ul > li { color: var(--theme-copy-2); }

/* Accent text sits on pale backgrounds, so it needs a dark orange. */
.kicker,
.text-link,
.sec-eyebrow { color: var(--theme-accent-ink) !important; }

/* The eyebrow is light orange for the dark hero only. */
.eyebrow { color: var(--theme-accent-ink); }
.page-hero .eyebrow,
.proof-band .eyebrow,
.cta-band .eyebrow { color: #ff9b56; }

/* Skip link: dark plate, white label — white on orange was too pale. */
.skip-link { background: #12181f !important; color: #fff !important; }

/* The orange CTA band carries near-black text, which reads far
   better on that background than white did. */
.cta-band,
.cta-band p,
.cta-band h2 { color: #1a1206 !important; }

/* Copy on dark surfaces goes bright, not mid grey. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a { color: var(--footer-text, #ccd4dc) !important; }

.site-footer h2,
.site-footer h3,
.site-footer__heading { color: #fff !important; }

.site-footer a:hover,
.site-footer a:focus-visible { color: #ffa057 !important; }

.hero-summary { color: #fff !important; }

/* Links inside running text are underlined, so they read as links. */
.sec-prose a:not([class]),
.source-content a:not([class]) {
  color: var(--theme-accent-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.sec-prose a:not([class]):hover,
.source-content a:not([class]):hover { color: #12181f !important; }

/* Placeholders are dim by convention but still legible. */
::placeholder { color: #6a7480 !important; opacity: 1 !important; }

/* ═════════════════════════════════════════════════════════
   5. MODERN PAGE FURNITURE
   Consistent rhythm, dividers and section spacing so every
   page reads as one design rather than a set of imports.
   ═════════════════════════════════════════════════════════ */

.sec-body,
.page-body,
.rmc-body,
.order-grid { background: #f7f7f5; }

.sec-shell,
.page-body__shell,
.rmc-body__shell,
.sec-narrow { padding-block: clamp(56px, 7vw, 96px); }

/* Page banners sit flush and never letterbox awkwardly. */
.page-banner {
  background: #12181f;
  line-height: 0;
}

.page-banner img {
  max-height: 520px;
  margin-inline: auto;
}

/* Section rules read as a short accent bar, not a hairline. */
.sec-rule,
.rmc-card__rule {
  height: 4px !important;
  width: 72px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--theme-accent) !important;
}

/* Cards and panels share one padding rhythm. */
.sec-panel,
.rmc-card,
.order-card,
.oddeven-card { padding: clamp(24px, 3vw, 40px) !important; }

.sec-card__body { padding: clamp(20px, 2.4vw, 30px) !important; }

/* Images inside cards keep the card's rounded top. */
.sec-card__media,
.sec-figure { background: #eef0f3 !important; }

.sec-card__media img,
.sec-figure img { width: 100% !important; display: block !important; }

/* Tables read as a modern data surface. */
.sec-table-wrap table,
.source-content table { border-collapse: separate !important; border-spacing: 0 !important; }

.sec-table-wrap th,
.source-content th {
  background: #12181f !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.sec-table-wrap tbody tr:nth-child(even),
.source-content tbody tr:nth-child(even) { background: #fafbfc !important; }

/* ═════════════════════════════════════════════════════════
   6. CONTRAST BACKSTOPS
   Two brand surfaces carried white text at under 4.5:1.
   ═════════════════════════════════════════════════════════ */

/* Primary buttons: a deeper orange so the white label clears AA. */
.button,
.sec-btn:not(.sec-btn--ghost),
.calc-btn,
.btn-cta,
.header-button,
.header-cta,
.site-nav__cta,
.site-search button { background: #c2510c !important; color: #fff !important; }

.button:hover,
.sec-btn:not(.sec-btn--ghost):hover,
.calc-btn:hover,
.btn-cta:hover,
.header-button:hover,
.header-cta:hover,
.site-nav__cta:hover,
.site-search button:hover { background: #a8450a !important; color: #fff !important; }

/* A heading inside a coloured or dark panel keeps the panel's text colour. */
.text__block__highlight h1, .text__block__highlight h2,
.text__block__highlight h3, .text__block__highlight h4,
.fb__col__title h1, .fb__col__title h2,
.fb__col__title h3, .fb__col__title h4,
.info-block__card h1, .info-block__card h2,
.info-block__card h3, .info-block__card h4,
.product-red-card h1, .product-red-card h2,
.product-red-card h3, .product-red-card h4 { color: inherit !important; }