/* ==========================================================================
   Metal Ministry Inc — shared chrome
   Loaded on top of each division's own stylesheet. Holds only what both
   divisions share: the division switcher, the logo lockup and the group
   home page. Division palettes stay in their own stylesheets.
   ========================================================================== */

:root {
  --gg-navy-dk: #0f1830;
  --gg-navy: #17264f;
  --gg-navy-lt: #27396e;
  --gg-orange: #f26522;
  --gg-orange-dk: #c94e12;
  --gg-steel: #6b7480;
  --gg-paper: #f4f5f7;
  --gg-line: #d9dde4;
}

/* ---------------------------------------------------------- division bar */
.divbar {
  background: var(--gg-navy-dk);
  color: #c3cbd8;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.divbar__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 38px;
  flex-wrap: wrap;
}
.divbar a { color: inherit; text-decoration: none; }
.divbar__home {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #fff;
}
.divbar__home:hover { color: var(--gg-orange); }
.divbar__tabs { display: flex; gap: 0.35rem; margin-left: auto; }
.divbar__tab {
  padding: 0.42rem 0.85rem;
  border-radius: 2px;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}
.divbar__tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.divbar__tab.is-on {
  background: var(--gg-orange);
  border-color: var(--gg-orange);
  color: #fff;
  font-weight: 700;
}
.divbar__tel {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.divbar__tel:hover { color: var(--gg-orange); }

@media (max-width: 640px) {
  .divbar__in { min-height: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .divbar__tabs { margin-left: 0; order: 3; width: 100%; }
  .divbar__tab { flex: 1; text-align: center; }
  .divbar__tel { margin-left: auto; padding-left: 0; border-left: 0; }
}

/* -------------------------------------------- logo lockup (RMC division) */
.logo--img {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.logo--img .logo__mark { width: 40px; height: 40px; flex: none; }
/* The RMC stylesheet styles `.logo span` as the small strap line. The name is
   now wrapped in a span too, so put it back to the headline treatment. */
.logo--img .logo__txt {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin-top: 0;
  line-height: 1.05;
}
.logo--img .logo__txt > span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 3px;
  font-weight: 400;
}

.whatsapp {
    position: fixed;
    right: 6%;
    bottom: 1%;
    transition: 0.45s;
    padding: 12.5px;
    border-radius: 50px;
    z-index: 10000;
    /* left: 8% !important; */
    padding: 12px !important;
}

/* TMT division already ships .logo/.logo__mark; just size the new bitmap. */
.masthead .logo__mark,
.footer .logo__mark { width: 40px; height: 40px; }

/* ==========================================================================
   Icon sizing
   The RMC masthead call-to-action ships an inline SVG with a viewBox but no
   width or height, so it inherits the 300x150 replaced-element default and
   stretches to the whole flex line. Every other .ico in that stylesheet is
   sized by its own rule; this one never was.
   ========================================================================== */
.mast-cta { display: inline-flex; align-items: center; gap: 8px; }
.mast-cta .ico { width: 17px; height: 17px; flex: none; }
.masthead .ico,
.divbar .ico { width: 17px; height: 17px; flex: none; }

/* ==========================================================================
   LIGHT THEME
   Both divisions were drawn dark: navy mastheads, navy heroes, navy bands,
   navy footers. This layer flips every one of those surfaces to paper and
   repaints the text that sat on them. Loaded after each division's own
   stylesheet, so it wins without touching their source.

   Table heads and the docket header stay navy on purpose. A dark header row
   over light rows is how a rate card is read.
   ========================================================================== */
:root {
  --gg-ink: #16203a;        /* body text */
  --gg-ink-2: #4d5871;      /* secondary text */
  --gg-ink-3: #6b7793;      /* tertiary text */
  --gg-surface: #ffffff;    /* cards, masthead */
  --gg-page: #f5f7fa;       /* page ground */
  --gg-band: #eaeef5;       /* alternate bands, hero, footer */
  --gg-edge: #d8dee8;       /* hairlines */
}

body { background: var(--gg-page); color: var(--gg-ink); }

/* ------------------------------------------------------- division strip */
.divbar {
  background: var(--gg-surface);
  color: var(--gg-ink-2);
  border-bottom: 1px solid var(--gg-edge);
}
.divbar__home { color: var(--gg-navy); }
.divbar__tab { color: var(--gg-ink-2); }
.divbar__tab:hover { background: var(--gg-band); color: var(--gg-navy); }
.divbar__tel { color: var(--gg-navy); border-left-color: var(--gg-edge); }

/* ==========================================================  TMT division */
.masthead {
  background: var(--gg-surface);
  color: var(--gg-ink);
  border-bottom: 1px solid var(--gg-edge);
}
.masthead .logo__name { color: var(--gg-navy); }
.masthead .logo__sub { color: var(--gg-ink-3); }
.nav a { color: var(--gg-ink-2); }
.nav a:hover { color: var(--gg-orange-dk); }
.nav__toggle { color: var(--gg-navy); border-color: var(--gg-edge); }

.crumbs--dark { background: var(--gg-band); color: var(--gg-ink-2); }
.crumbs--dark a { color: var(--gg-ink-2); }
.crumbs--dark a:hover { color: var(--gg-orange-dk); }

.hero { background: var(--gg-band); color: var(--gg-ink); }
.hero::before { opacity: 0.16; }
.hero h1 { color: var(--gg-navy); }
.hero p, .hero .lede { color: var(--gg-ink-2); }

.section--dark { background: var(--gg-band); color: var(--gg-ink); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--gg-navy); }
.section--dark p, .section--dark li { color: var(--gg-ink-2); }
.section--dark .section__head p { color: var(--gg-ink-2); }
.section--dark .card {
  background: var(--gg-surface);
  border-color: var(--gg-edge);
  color: var(--gg-ink);
}
.section--dark .card p { color: var(--gg-ink-2); }
.section--dark a { color: var(--gg-navy); }
.section--dark a:hover { color: var(--gg-orange-dk); }

.cta-band { background: var(--gg-band); color: var(--gg-ink); border-top: 1px solid var(--gg-edge); }
.cta-band h2 { color: var(--gg-navy); }
.cta-band p { color: var(--gg-ink-2); }

.footer {
  background: var(--gg-band);
  color: var(--gg-ink-2);
  border-top: 3px solid var(--gg-orange);
}
.footer h4 { color: var(--gg-navy); }
.footer a { color: var(--gg-ink-2); }
.footer a:hover { color: var(--gg-orange-dk); }
.footer .logo__name { color: var(--gg-navy); }
.footer .logo__sub { color: var(--gg-ink-3); }
.footer__legal { color: var(--gg-ink-3); border-top-color: var(--gg-edge); }

.btn--dark { background: var(--gg-navy); color: #fff; }
.btn--dark:hover { background: var(--gg-navy-lt); }
.btn--ghost { color: var(--gg-navy); border-color: var(--gg-navy); }
.btn--ghost:hover { background: var(--gg-navy); color: #fff; }

.quote-box { background: var(--gg-surface); border-color: var(--gg-edge); }

@media (max-width: 760px) {
  .nav {
    background: var(--gg-surface);
    border-bottom-color: var(--gg-edge);
    box-shadow: 0 18px 30px -22px rgba(15, 24, 48, 0.5);
  }
  .nav a { border-bottom-color: var(--gg-edge); }
  .callbar__call { background: var(--gg-navy); color: #fff; }
}

/* ==========================================================  RMC division */
.masthead { background: var(--gg-surface); }
.masthead a { color: var(--gg-ink-2); }
.masthead a:hover { color: var(--gg-orange-dk); }
.masthead .logo { color: var(--gg-navy); }
.masthead .logo b { color: var(--gg-orange-dk); }
.masthead .logo__txt > span { color: var(--gg-ink-3); opacity: 1; }
.mast-nav a:not(.mast-cta) { opacity: 1; color: var(--gg-ink-2); }
.mast-cta { background: var(--gg-orange); color: #fff !important; }
.mast-cta:hover { background: var(--gg-orange-dk); }

.hero { background: var(--gg-band); }
.hero-art { opacity: 0.2; }
.hero::after {
  background: linear-gradient(100deg,
    rgba(234, 238, 245, 0.97) 0%,
    rgba(234, 238, 245, 0.90) 42%,
    rgba(234, 238, 245, 0.55) 100%);
}
.hero h1 { color: var(--gg-navy); }
.hero .lede { color: var(--gg-ink-2); }

.band-lt { background: var(--gg-surface); }
.band-dk { background: var(--gg-band); color: var(--gg-ink); }
.band-dk h2, .band-dk h3, .band-dk h4 { color: var(--gg-navy); }
.band-dk .lede, .band-dk p { color: var(--gg-ink-2); }
.band-dk a { color: var(--gg-navy); }
.band-dk a:hover { color: var(--gg-orange-dk); }
.band-dk .card {
  background: var(--gg-surface);
  border-color: var(--gg-edge);
  color: var(--gg-ink);
}
.band-dk .card:hover { background: #fbfcfe; }
.band-dk .card p { color: var(--gg-ink-2); }
.band-dk .card .ico { color: var(--gg-orange-dk); }
.band-dk .card .tag { color: var(--gg-orange-dk); }
.band-dk .fig {
  background: linear-gradient(160deg, #ffffff 0%, var(--gg-band) 100%);
  border-color: var(--gg-edge);
}
.band-dk .fig figcaption { border-top-color: var(--gg-edge); color: var(--gg-ink-2); }
.band-dk .links a { color: var(--gg-ink-2); }
.band-dk .links a:hover { color: var(--gg-orange-dk); }

.cta { background: var(--gg-band); color: var(--gg-ink); border-top: 1px solid var(--gg-edge); }
.cta h2 { color: var(--gg-navy); }
.cta p { color: var(--gg-ink-2); }
.cta-art { opacity: 0.8; }

.foot {
  background: var(--gg-band);
  color: var(--gg-ink-2);
  border-top: 3px solid var(--gg-orange);
}
.foot h4 { color: var(--gg-navy); }
.foot a { color: var(--gg-ink-2); }
.foot a:hover { color: var(--gg-orange-dk); }
.foot-base { color: var(--gg-ink-3); border-top-color: var(--gg-edge); }

.btn-dark { background: var(--gg-navy); color: #fff !important; }
.btn-dark:hover { background: var(--gg-navy-lt); }
.btn-sec { color: var(--gg-navy) !important; border-color: var(--gg-navy); }
.btn-sec:hover { background: var(--gg-navy); color: #fff !important; border-color: var(--gg-navy); }

.callbar a + a { background: var(--gg-navy) !important; color: #fff !important; }

/* ------------------------------------------------------------- contrast */
/* White on the logo orange is 3.15:1 — fine for a heading, thin for a
   0.8rem button label. Filled controls use the darker orange (5.8:1); the
   bright logo orange stays on rules, eyebrows and hover states. */
.divbar__tab.is-on {
  background: var(--gg-navy);
  border-color: var(--gg-navy);
  box-shadow: inset 0 -3px 0 var(--gg-orange);
}
.mast-cta { background: var(--gg-orange-dk); }
.mast-cta:hover { background: var(--gg-navy); }
.masthead .btn,
.nav .btn { background: var(--gg-orange-dk); color: #fff; }
.masthead .btn:hover,
.nav .btn:hover { background: var(--gg-navy); color: #fff; }

/* --------------------------------------------- TMT: text tokens retuned */
/* --zinc, --zinc-lt and --concrete are only ever used as text colours, and
   every surface they sat on is now light. Retuning the three tokens fixes
   about thirty rules at once. --white stays white: it is also a surface. */
:root {
  --zinc: #5f6a80;
  --zinc-lt: #4d5871;
  --concrete: #16203a;
}
.hero__meta strong { color: var(--gg-navy); }
.hero h1 em { color: var(--gg-orange-dk); }
.tag--dark { color: var(--gg-orange-dk); background: rgba(242, 101, 34, 0.14); }
.skip { background: var(--gg-orange-dk); }
.btn { background: var(--gg-orange-dk); }
.btn:hover { background: var(--gg-navy); color: #fff; }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gg-navy); }
.btn--ghost:hover { background: var(--gg-navy); color: #fff; box-shadow: inset 0 0 0 1.5px var(--gg-navy); }
.callbar__wa { background: var(--gg-orange-dk); }

/* ------------------------------------------------- light-theme follow-ups */
/* --concrete was a text colour in fifteen rules and a panel background in
   one. Retuning the token fixed the fifteen and broke the one. */
.section--concrete { background: #eef2f8; }

/* A navy table head is deliberate. Its label colour was --concrete, which is
   now ink, so name the colour outright. */
thead th { color: #ffffff; }

:root { --gg-ink-3: #5b667e; }

.tag--dark { color: #a83f08; background: rgba(242, 101, 34, 0.13); }

/* RMC buttons were drawn for a dark hero: light text with no fill on
   .btn-sec, dark text on amber for .btn-pri. Both need a light-page reading. */
.btn-pri {
  background: var(--gg-orange-dk);
  color: #fff !important;
  box-shadow: 0 6px 18px -8px rgba(201, 78, 18, 0.55);
}
.btn-pri:hover { background: var(--gg-navy); color: #fff !important; }
.btn-sec {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--gg-navy);
  color: var(--gg-navy) !important;
}
.btn-sec:hover {
  background: var(--gg-navy);
  border-color: var(--gg-navy);
  color: #fff !important;
}

.crumbs span { color: var(--gg-ink-3); }