/* ================================================================
   TCI v25 — LOCKED BRAND PALETTE + MULTI-COLOR ICON DETAILS ONLY.
   IMPORTANT: Primary site palette is frozen to the muted tan from
   the highlighted "I" in the TCI logo. Cool colors are restricted
   to small icon details and do not alter buttons, headings, tabs,
   process blocks, rules, forms, or other brand accents.
   ================================================================ */
:root{
  --copper:#9A7655;
  --copper2:#B08C67;
  --champagne:#D2C1A9;
  --line:#3A2C20;
  --tci-blue:#6F89A8;
  --tci-teal:#6F9A96;
  --tci-violet:#81769A;
  --tci-steel:#9AA3B2;
}

/* Hard lock the site-wide primary accent so it cannot drift gold/orange. */
.head-cta,
.btn.primary,
.form-submit,
.process-step .num{background:var(--copper2)!important}
.mode-switch a.active{color:var(--champagne)!important;border-bottom-color:var(--copper2)!important}
.kicker,.eyebrow,.section-label,.form-section-label,.role-group-title,.scope-key,.badge{color:var(--champagne)!important}
.hero h1 em,.section-title em,.page-title em,.footer-title em{color:var(--copper2)!important}
.section-copy.leftbar{border-left-color:var(--copper2)!important}
.head-phone,.hero-phone,.footer-email-row,.footer-email-row a{color:var(--copper2)!important}
.head-phone svg,.hero-phone svg,.contact-line svg{stroke:var(--copper2)!important}
.role-tag:hover{border-color:var(--copper2)!important}

/* Neutralize the old per-card orange/gold icon overrides. */
.icon-grid .icon-box{
  border-color:#46505F!important;
  background:#101319!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important;
}
.icon-grid .icon-box svg *{
  stroke:var(--tci-steel);
  fill:none;
}

/* Client / contractor icon set — 2–3 restrained colors per icon. */
.icon-grid .benefit-card:nth-child(1) .icon-box svg circle:nth-of-type(1){stroke:var(--copper2)!important}
.icon-grid .benefit-card:nth-child(1) .icon-box svg circle:nth-of-type(2){stroke:var(--tci-teal)!important}
.icon-grid .benefit-card:nth-child(1) .icon-box svg path{stroke:var(--tci-blue)!important}

.icon-grid .benefit-card:nth-child(2) .icon-box svg path:nth-of-type(1){stroke:var(--tci-blue)!important}
.icon-grid .benefit-card:nth-child(2) .icon-box svg path:nth-of-type(2){stroke:var(--copper2)!important}

.icon-grid .benefit-card:nth-child(3) .icon-box svg path:nth-of-type(1){stroke:var(--tci-teal)!important}
.icon-grid .benefit-card:nth-child(3) .icon-box svg path:nth-of-type(2){stroke:var(--tci-violet)!important}

.icon-grid .benefit-card:nth-child(4) .icon-box svg path:nth-of-type(1){stroke:var(--tci-blue)!important}
.icon-grid .benefit-card:nth-child(4) .icon-box svg rect:nth-of-type(1),
.icon-grid .benefit-card:nth-child(4) .icon-box svg rect:nth-of-type(2){stroke:var(--copper2)!important}
.icon-grid .benefit-card:nth-child(4) .icon-box svg path:nth-of-type(2),
.icon-grid .benefit-card:nth-child(4) .icon-box svg rect:nth-of-type(3){stroke:var(--tci-teal)!important}

/* Specialist page has two extra cards. These add color without touching the main palette. */
.icon-grid .benefit-card:nth-child(5) .icon-box svg rect{stroke:var(--tci-blue)!important}
.icon-grid .benefit-card:nth-child(5) .icon-box svg path:nth-of-type(1){stroke:var(--copper2)!important}
.icon-grid .benefit-card:nth-child(5) .icon-box svg circle{stroke:var(--tci-teal)!important}

.icon-grid .benefit-card:nth-child(6) .icon-box svg path:nth-of-type(1){stroke:var(--tci-violet)!important}
.icon-grid .benefit-card:nth-child(6) .icon-box svg path:nth-of-type(2){stroke:var(--copper2)!important}

/* Keep the icon cards themselves visually subordinate to the locked brand color. */
.icon-grid .benefit-card{border-color:#171B22!important}