/* transformersbuyers.com — stylesheet

   This is a REBUILD. The old site was a JavaScript SPA whose 31,866 sitemap
   URLs resolved to only 1,050 real pages; the other 30,816 served a byte-
   identical copy of the home page, all canonicalised back to `/`. That is why
   /locations/south-carolina.html fell to position 81. Every page this generator
   emits is real, prerendered, and unique.

   DARK THEME SITE-WIDE: near-black charcoal ground with a high-visibility
   COPPER accent (#C2703D) — the colour convention of generator and
   switchgear equipment itself, and the colour of the owner's own Kohler and CAT
   gensets in the photographs. Deliberately NOT the orange of
   industrialbearingbuyers.com and NOT the navy/amber of surplusbearingbuyers.com,
   so the three properties do not read as one template.

   Type: Barlow Condensed (headings, ALL CAPS) + Source Sans 3 (body) +
   Roboto Mono (kickers, kW/kVA spec chips).

   Motifs kept from the layout that works: dark photographic hero, the quote
   form boxed beside the copy with a yellow top border, square yellow bullet
   markers, mono all-caps eyebrow kickers, charcoal cards with hairline borders,
   ONE round yellow floating call button. Zero JavaScript on content pages.
*/

:root{
  --ink-900:#0E0E0F;   /* page ground */
  --ink-850:#131315;   /* alternate band */
  --ink-800:#191A1C;   /* cards */
  --ink-700:#232427;   /* hairlines on dark */
  --ink-600:#33353A;
  --cu:#C2703D;
  --volt-deep:#9C5527;
  --volt-wash:rgba(242,195,0,.13);
  --steel:#8FB0C6;     /* tertiary: cool steel-blue, links + meta */
  --white:#ffffff;
  --paper:#F4F2EF;     /* warm off-white for body copy */
  --paper-mute:#B9B4AD;
  --paper-dim:#8C8781;
  --line:#26272A;
  --wrap:1240px;
  --ease:cubic-bezier(.23,1,.32,1);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.34);
  --shadow-lift:0 2px 6px rgba(0,0,0,.46),0 18px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink-900);color:var(--paper-mute);
  font-family:'Source Sans 3',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;line-height:1.74;font-weight:400;
}

h1,h2,h3,h4{
  font-family:'Barlow Condensed','Oswald',system-ui,sans-serif;
  font-weight:600;line-height:1.06;letter-spacing:.012em;
  margin:0 0 .5em;color:var(--white);text-transform:uppercase;
}
h1{font-size:clamp(2.5rem,5vw,4.05rem);letter-spacing:.004em}
h2{font-size:clamp(1.78rem,3.2vw,2.6rem);margin-top:0}
h3{font-family:'Source Sans 3',system-ui,sans-serif;font-size:1.14rem;
  font-weight:600;letter-spacing:0;line-height:1.38;text-transform:none;
  color:var(--white)}
h4{font-family:'Source Sans 3',system-ui,sans-serif;font-size:1rem;
  font-weight:600;text-transform:none;color:var(--white)}
p{margin:0 0 1.1em}

a{color:var(--steel);text-decoration:none}
a:hover{color:var(--cu);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--cu);outline-offset:2px;border-radius:2px;
}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* yellow mono all-caps eyebrow above every H2 */
.kicker,.seclabel,.hero__kick,.qf__kick{
  display:block;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.76rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cu);margin:0 0 12px;
}

/* ------------------------------------------------------------- utility bar */
.ubar{background:#000;color:var(--paper-dim);font-size:.84rem;
  font-family:'Roboto Mono',ui-monospace,monospace}
.ubar__in{
  max-width:var(--wrap);margin:0 auto;padding:8px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ubar a{color:var(--cu);font-weight:600}
.ubar a:hover{color:var(--cu)}

/* ---------------------------------------------------------- masthead + nav */
.mast{background:var(--ink-900);border-bottom:1px solid var(--line)}
.mast__in{
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand:hover{text-decoration:none}
.brand img{width:42px;height:42px;flex:none}
.brand__txt{display:block;line-height:1.02;min-width:0}
.brand__sm{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.14rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);
}
.brand__lg{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.14rem;
  font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  font-style:italic;color:var(--cu);
}
.mast__cta{display:flex;align-items:center;gap:14px}
.mast__tag{font-size:.82rem;color:var(--paper-dim);text-align:right;
  line-height:1.5;font-family:'Roboto Mono',ui-monospace,monospace}
.mast__tag b{color:var(--paper);font-weight:600}

.nav{background:var(--ink-850);border-bottom:1px solid var(--line)}
.nav__in{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
}
.nav__in::-webkit-scrollbar{display:none}
.nav a{
  padding:13px 13px;font-family:'Barlow Condensed',sans-serif;font-size:.88rem;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--paper-mute);
  white-space:nowrap;border-bottom:3px solid transparent;
  transition:color .14s var(--ease);
}
.nav a:hover{color:var(--white);text-decoration:none}
.nav a[aria-current=page]{color:var(--white);border-bottom-color:var(--cu)}

.crumbs{padding:13px 0 0;font-size:.84rem;color:var(--paper-dim);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumbs a{color:var(--paper-mute)}
.crumbs span[aria-current]{color:var(--cu);font-weight:600}
.hero .crumbs{color:var(--paper-dim)}
.hero .crumbs a{color:var(--paper-mute)}
.hero .crumbs span[aria-current]{color:var(--cu)}

/* --------------------------------------------------------------------- hero
   Dark photographic band. Left: kicker/H1/lede/CTAs/promises. Right: the quote
   form boxed on the charcoal with an YELLOW TOP BORDER. */
.hero{
  position:relative;background:var(--ink-900);color:var(--paper);
  padding:0 0 54px;overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  z-index:0;
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,14,15,.95) 0%,rgba(14,14,15,.88) 46%,rgba(14,14,15,.7) 100%);
}
.hero__in{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:start;
}
/* eyebrow is a plain yellow mono line with a rule, not a pill — the pill was
   the other site's motif; this keeps the family without cloning it. */
.hero__kick{
  margin:30px 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--ink-700);max-width:44ch;
}
.hero h1{color:var(--white);margin-bottom:18px;max-width:19ch}
.hero h1 em{font-style:italic;color:var(--cu)}
.hero__lede{font-size:1.14rem;line-height:1.7;color:var(--paper-mute);
  max-width:56ch;margin-bottom:26px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero__fig{margin:26px 0 0}
.hero__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.hero__fig figcaption{font-size:.85rem;color:var(--paper-dim);padding-top:9px}

/* promise row — SQUARE yellow markers */
.hero__promise{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.93rem;font-weight:500;color:var(--paper);
}
.chip::before{
  content:'';width:9px;height:9px;flex:none;background:var(--cu);
}

/* -------------------------------------------- quote form: boxed, yellow top */
.qf{
  background:var(--ink-800);border:1px solid var(--ink-700);
  border-top:4px solid var(--cu);
  padding:26px 26px 24px;margin-top:30px;color:var(--paper-mute);
  box-shadow:var(--shadow);
}
.qf h2{font-size:1.5rem;margin-bottom:8px;letter-spacing:.01em}
.qf__sub{font-size:.96rem;color:var(--paper-dim);margin-bottom:18px}
.qf label{display:block;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper-mute);margin:14px 0 6px}
.qf input,.qf select,.qf textarea{
  width:100%;padding:11px 12px;font:inherit;font-size:1rem;
  background:#0B0B0C;color:var(--paper);
  border:1px solid var(--ink-600);border-radius:3px;
}
.qf input::placeholder,.qf textarea::placeholder{color:#6A6660}
.qf input:focus,.qf select:focus,.qf textarea:focus{border-color:var(--cu)}
.qf textarea{min-height:92px;resize:vertical}
.qf__row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.qf__hp{position:absolute;left:-9999px}
.qf__alt{font-size:.92rem;color:var(--paper-dim);margin:14px 0 0}

.btn{
  display:inline-block;background:var(--cu);color:#141414;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;
  border:0;border-radius:3px;cursor:pointer;width:100%;margin-top:20px;
  transition:background .14s var(--ease),box-shadow .14s var(--ease);
}
.btn:hover{background:var(--volt-deep);color:#141414;
  text-decoration:none;box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(1px)}
.hero__cta .btn{width:auto;margin-top:0}
.btn-out{
  display:inline-block;padding:15px 24px;
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);border:1.5px solid rgba(255,255,255,.34);border-radius:3px;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.btn-out:hover{border-color:var(--cu);background:var(--volt-wash);
  color:var(--white);text-decoration:none}
.mast__cta .btn{width:auto;margin:0;padding:12px 20px;font-size:.9rem}

/* ------------------------------------------------------------- stats band */
.stats{background:#000;border-top:1px solid var(--ink-700)}
.stats__in{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stats div{
  padding:26px 18px;text-align:center;border-right:1px solid var(--ink-700);
}
.stats div:last-child{border-right:0}
.stats b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:2.35rem;
  font-weight:600;line-height:1.06;color:var(--cu);
}
.stats span{
  display:block;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-dim);margin-top:6px;
}

/* ------------------------------------------------------------------ bands
   Dark theme site-wide: `band` is the page ground, `band--alt` is one step up,
   separated by a hairline rule rather than a colour jump. */
.band{padding:58px 0;background:var(--ink-900)}
.band--alt{background:var(--ink-850);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band--dark{background:#000;color:var(--paper-mute)}
.band--dark h2,.band--dark h3{color:var(--white)}
.band--dark p{color:var(--paper-mute)}
.band--cta{background:#000;color:var(--paper-mute);
  border-top:3px solid var(--cu)}
.band--cta h2{color:var(--white)}
.band p{max-width:70ch;color:var(--paper-mute)}
.band p strong{color:var(--white);font-weight:600}
.lede-lg p{font-size:1.1rem;color:var(--paper)}

.split{display:grid;grid-template-columns:1.5fr 1fr;gap:42px;align-items:start}
.split--flip{grid-template-columns:1fr 1.5fr}
.split figure{margin:0}
.split figure img,figure img{border-radius:3px}
figure figcaption{font-size:.85rem;color:var(--paper-dim);padding-top:9px}

/* charcoal feature/link cards with a hairline border and a yellow top edge on
   hover — squarer and darker than the sibling sites' white rounded cards */
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:18px}
.tcard{
  background:var(--ink-800);border:1px solid var(--ink-700);border-radius:3px;
  padding:22px 22px 20px;position:relative;
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.tcard::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--cu);opacity:0;transition:opacity .16s var(--ease);
}
.tcard:hover{border-color:var(--ink-600);transform:translateY(-2px)}
.tcard:hover::before{opacity:1}
.tcard h3{margin-bottom:7px}
.tcard h3 a{color:var(--white)}
.tcard h3 a:hover{color:var(--cu)}
.tcard p{font-size:.96rem;color:var(--paper-mute);margin:0;max-width:none}

.speclist{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  gap:0 32px}
.speclist li{
  padding:12px 0 12px 26px;position:relative;
  border-bottom:1px solid var(--line);color:var(--paper-mute);font-size:1rem;
}
/* square yellow markers */
.speclist li::before{
  content:'';position:absolute;left:2px;top:21px;width:9px;height:9px;
  background:var(--cu);
}

/* chip grid for cities / states */
.rail{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:9px}
.rail li{display:block}
.rail a{
  display:block;padding:11px 14px;font-size:.96rem;font-weight:500;
  color:var(--paper);background:var(--ink-800);
  border:1px solid var(--ink-700);border-radius:3px;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.rail a:hover{border-color:var(--cu);color:var(--white);
  text-decoration:none}

/* 50-state index. Cards at that count become an unreadable grey field, so the
   states hub uses a denser rail and hangs each state's own metro pages beneath
   its name. */
.rail--states{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:8px}
.rail--states a{padding:9px 13px}
.rail--states li{background:var(--ink-800);border:1px solid var(--ink-700);
  border-radius:3px;padding:0 0 2px}
.rail--states li a{border:0;background:transparent;padding:9px 13px 4px;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase;
  font-size:.92rem}
.rail--states li a:hover{color:var(--cu)}
.rail__sub{display:block;padding:0 13px 8px;font-size:.81rem;
  color:var(--paper-dim);line-height:1.55}
.rail__sub a{display:inline;padding:0;border:0;background:none;
  font-size:.81rem;font-weight:500;color:var(--steel)}
.rail__sub a:hover{color:var(--cu);text-decoration:underline}

.inline-links{display:flex;flex-wrap:wrap;gap:9px}
.inline-links a{
  font-size:.94rem;font-weight:500;padding:9px 15px;
  background:var(--ink-800);border:1px solid var(--ink-700);border-radius:3px;
  color:var(--paper);
}
.inline-links a:hover{border-color:var(--cu);color:var(--white);
  text-decoration:none}

/* numbered steps */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:26px}
.steps li{counter-increment:s;padding-top:8px}
.steps li::before{
  content:counter(s,decimal-leading-zero);display:block;
  font-family:'Barlow Condensed',sans-serif;font-size:2.4rem;font-weight:600;
  line-height:1;color:var(--cu);margin-bottom:8px;
}

.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{
  cursor:pointer;padding:16px 0;font-weight:600;font-size:1.05rem;
  color:var(--white);list-style:none;
  display:flex;justify-content:space-between;gap:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--cu);font-weight:600}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--cu)}
.faq p{padding:0 0 16px;color:var(--paper-mute);max-width:74ch}

figure{margin:0}
.spec{background:var(--volt-wash);color:var(--cu);padding:1px 6px;
  border-radius:2px;font-weight:600;
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:.94em}
.pn{font-family:'Roboto Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-weight:600}

/* spec strip under the hero — yellow values on the charcoal ground */
.specstrip{display:flex;flex-wrap:wrap;margin:0 0 24px;
  border-top:1px solid var(--ink-700);
  border-bottom:1px solid var(--ink-700)}
.specstrip div{flex:1 1 auto;padding:11px 20px 11px 0}
.specstrip b{display:block;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-dim)}
.specstrip span{font-size:1rem;font-weight:600;color:var(--cu)}

.pull{
  margin:28px 0;padding:0 0 0 22px;border-left:4px solid var(--cu);
  font-family:'Barlow Condensed',sans-serif;font-size:1.28rem;font-weight:400;
  line-height:1.5;letter-spacing:.01em;color:var(--white);max-width:52ch;
}
.pull p{margin:0;color:var(--white);max-width:none}

/* ------------------------------------------------------- floating call fab */
.callfab{
  position:fixed;right:20px;bottom:20px;width:62px;height:62px;
  border-radius:50%;background:var(--cu);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.55);z-index:60;
  transition:background .14s var(--ease);
}
.callfab:hover{background:var(--volt-deep)}
.callfab svg{width:28px;height:28px;fill:#141414}

/* ----------------------------------------------------------------- footer */
.foot{background:#000;color:var(--paper-mute);padding:54px 0 28px;
  font-size:.95rem;border-top:1px solid var(--line)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot h3{font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cu);margin-bottom:14px}
.foot h3 a{color:var(--cu)}
.foot p{color:var(--paper-dim);max-width:42ch}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:7px}
.foot li a{color:var(--paper-mute);font-size:.93rem}
.foot li a:hover{color:var(--cu)}
.foot__wide{margin-top:34px;padding-top:24px;
  border-top:1px solid var(--ink-700)}
.foot__wide ul{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 22px}
.foot__legal{margin-top:28px;padding-top:20px;
  border-top:1px solid var(--ink-700);font-size:.83rem;color:#6E6A65;
  max-width:none}
.foot a{color:var(--paper-mute)}
.foot a:hover{color:var(--cu)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:8px}
  .split,.split--flip{grid-template-columns:1fr;gap:26px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:28px}
  .mast__tag{display:none}
  .stats__in{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(1),.stats div:nth-child(2){
    border-bottom:1px solid var(--ink-700)}
}
@media (max-width:620px){
  body{font-size:16px}
  .qf__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .band{padding:38px 0}
  .hero{padding-bottom:36px}
  .specstrip div{flex:1 1 46%}
  .callfab{width:56px;height:56px;right:15px;bottom:15px}
  .ubar__in{font-size:.78rem;gap:12px}
  /* the phone number must never wrap: it is the primary action */
  .ubar a{white-space:nowrap;flex:none}
  .ubar span{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}


/* ---------------------------------------------------------------
   ADDED FOR transformersbuyers.com
   .qf__shot  the owner requires a PADMOUNT transformer photo inside the
              quote card on every page, so the card leads with one.
   .stgrid    /locations lists all 50 states with their metros inline; a
              plain grid keeps 50 cells readable without any JS.
   --------------------------------------------------------------- */
.qf__shot{
  display:block;width:100%;height:170px;object-fit:cover;
  border-radius:3px;margin:0 0 16px;border:1px solid var(--ink-700);
}
@media(max-width:900px){ .qf__shot{height:140px} }

.stgrid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.stcell{
  background:var(--ink-800);border:1px solid var(--ink-700);
  border-radius:3px;padding:16px 16px 12px;
}
.stcell h3{margin:0 0 8px;font-size:1.02rem}
.stcell h3 a{color:var(--cu);text-decoration:none}
.stcell h3 a:hover{text-decoration:underline}
.stcell .inline-links{gap:6px}
.stcell .inline-links a{font-size:.83rem;padding:4px 9px}