@charset "utf-8";
/* boonesteel.com - rebuilt front end.
   Palette, type and band colours are the CMS's own (publicstyle.css,
   mbcsmbmcp.css and the per-page <style> block); the layout is not. */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:Teko;src:url(/assets/fonts/teko-300.woff) format("woff");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Teko;src:url(/assets/fonts/teko-400.woff) format("woff");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Rajdhani;src:url(/assets/fonts/rajdhani-400.woff) format("woff");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rajdhani;src:url(/assets/fonts/rajdhani-600.woff) format("woff");
  font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Nanum Gothic";src:url(/assets/fonts/nanum-400.woff) format("woff");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nanum Gothic";src:url(/assets/fonts/nanum-700.woff) format("woff");
  font-weight:700;font-style:normal;font-display:swap}

/* ----------------------------------------------------------------- tokens */
:root{
  --red:#c60400;
  --red-ink:#f4665f;          /* the brand red lightened to clear AA on ink */
  --ink:#10100a;              /* .fixed-pos, the scrolled header */
  --ink-2:#060705;            /* the CMS's submenu background */
  --paper:#fff;
  --mist:#f2f2f2;
  --rule:#d9d9d9;
  --body:"Nanum Gothic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:Teko,"Rajdhani",system-ui,"Segoe UI",Arial,sans-serif;
  --alt:Rajdhani,"Teko",system-ui,"Segoe UI",Arial,sans-serif;
  --shell:1200px;
  --gutter:clamp(18px,5vw,40px);
  --bar:74px;                 /* header height, phone */
  --gap:clamp(20px,3vw,34px);
}
@media (min-width:1180px){:root{--bar:100px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:#000;
  font:400 18px/1.55 var(--body);
  overflow-wrap:break-word;
}
img,picture,svg,iframe{max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6{margin:0 0 .35em;font-family:var(--display);font-weight:700;
  line-height:1.06;letter-spacing:.01em}
h1{font-size:clamp(40px,7vw,70px);color:#000}
h2{font-size:clamp(30px,5vw,50px);color:var(--red)}
h3{font-size:clamp(22px,3vw,28px);font-family:var(--alt);font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin-bottom:.5em}
a{color:var(--red);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.bsA11y{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.bsSkip{position:fixed;left:12px;top:-100px;z-index:2000;padding:12px 18px;
  background:var(--red);color:#fff;font-family:var(--alt);font-weight:600;
  transition:top .15s}
.bsSkip:focus{top:12px;text-decoration:none}

.bsIn{width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gutter)}

/* ----------------------------------------------------------------- header */
.bsBar{
  position:fixed;inset:0 0 auto;z-index:1200;height:var(--bar);
  background:transparent;
  transition:background-color .25s ease,box-shadow .25s ease;
}
.bsBar--solid,.bsNavOpen .bsBar{
  background:var(--ink);box-shadow:0 2px 18px rgba(0,0,0,.45)
}
.bsBarIn{
  display:flex;align-items:center;gap:16px;height:100%;
  width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gutter);
}
.bsLogo{display:block;flex:0 0 auto;line-height:0}
/* Sized against the bar's own arithmetic, not by eye: the seven root items
   measure 783px at 20px Rajdhani, so 240px of logo + 80px of gutter leaves
   ~90px of slack at the 1180px breakpoint for a wider fallback face. */
.bsLogo img{width:clamp(180px,42vw,250px);height:auto;display:block}

/* burger ---------------------------------------------------------------- */
.bsBurger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.45);
  border-radius:3px;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;
}
.bsBurger:hover{border-color:#fff;background:var(--red)}
.bsBurgerBox{display:block;width:22px;height:16px;position:relative}
.bsBurgerBox span{position:absolute;left:0;width:100%;height:2px;background:#fff;
  border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.bsBurgerBox span:nth-child(1){top:0}
.bsBurgerBox span:nth-child(2){top:7px}
.bsBurgerBox span:nth-child(3){top:14px}
.bsNavOpen .bsBurgerBox span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bsNavOpen .bsBurgerBox span:nth-child(2){opacity:0}
.bsNavOpen .bsBurgerBox span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer ---------------------------------------------------------------- */
.bsNav{
  position:fixed;top:0;right:0;z-index:1;
  width:min(360px,86vw);height:100dvh;height:100vh;
  padding:calc(var(--bar) + 12px) 0 32px;
  background:var(--ink);border-left:3px solid var(--red);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(102%);visibility:hidden;
  transition:transform .28s ease,visibility 0s linear .28s;
}
.bsNavOpen .bsNav{transform:none;visibility:visible;transition-delay:0s}
.bsMenu{list-style:none;margin:0;padding:0}
.bsMenu li{margin:0}
.bsMenu a,.bsGroup{
  display:block;padding:13px var(--gutter);
  font-family:var(--alt);font-size:22px;line-height:1.2;font-weight:600;
  color:#fff;text-decoration:none;letter-spacing:.02em
}
.bsMenu a:hover,.bsMenu a:focus-visible{background:var(--red);text-decoration:none}
.bsMenu a[aria-current=page]{color:#ffb3ae;box-shadow:inset 4px 0 0 var(--red)}
.bsGroup{font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:#9a9a94;padding-bottom:2px;font-weight:400}

.bsHasSub{position:relative}
.bsSubBtn{
  position:absolute;top:0;right:calc(var(--gutter) - 10px);
  width:52px;height:50px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border:0;background:none;color:#fff;
  cursor:pointer
}
.bsSubBtn svg{width:14px;height:9px;transition:transform .22s ease}
.bsSubBtn[aria-expanded=true] svg{transform:rotate(180deg)}
.bsSub{list-style:none;margin:0;padding:0 0 8px;display:none;
  background:var(--ink-2)}
.bsSubBtn[aria-expanded=true] + .bsSub,
.bsHasSub:focus-within > .bsSub{display:block}
.bsSub a{font-size:19px;padding-block:10px;padding-left:calc(var(--gutter) + 14px)}
.bsSubGroup > ul{list-style:none;margin:0;padding:0}
.bsSubGroup > ul a{padding-left:calc(var(--gutter) + 30px);font-size:18px;
  color:#e8e8e4}
.bsSubGroup > .bsGroup{padding-left:calc(var(--gutter) + 14px);padding-top:12px}

.bsNavCall{margin:26px var(--gutter) 0}
.bsNavCall a{display:block;padding:14px 10px;text-align:center;background:var(--red);
  color:#fff;font-family:var(--alt);font-weight:700;font-size:20px;
  letter-spacing:.04em;border-radius:3px}
.bsNavCall a:hover{background:#a30300;text-decoration:none}

.bsBackdrop{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.6);
  opacity:0;transition:opacity .28s ease}
.bsNavOpen .bsBackdrop{opacity:1}

/* desktop bar ----------------------------------------------------------- */
@media (min-width:1180px){
  .bsBurger,.bsNavCall{display:none}
  .bsNav{
    position:static;width:auto;height:auto;padding:0;margin-left:auto;
    background:none;border:0;overflow:visible;
    transform:none;visibility:visible;transition:none
  }
  .bsMenu{display:flex;align-items:center;gap:2px}
  .bsMenu > li > a,.bsHasSub > .bsTop{
    padding:10px 13px;font-size:20px;border:1px solid transparent;
    white-space:nowrap
  }
  .bsMenu > li > a:hover,.bsMenu > li > a:focus-visible{
    background:transparent;border-color:#fff
  }
  .bsMenu > li > a[aria-current=page]{color:#fff;box-shadow:none;
    border-bottom-color:var(--red);border-bottom-width:3px}
  .bsHasSub{display:flex;align-items:center}
  .bsSubBtn{position:static;width:26px;height:32px;margin-left:-8px}
  .bsSub{
    position:absolute;top:100%;left:0;min-width:250px;display:block;
    padding:8px 0;background:var(--ink-2);border-top:3px solid var(--red);
    box-shadow:0 14px 34px rgba(0,0,0,.5);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s
  }
  .bsHasSub:hover > .bsSub,
  .bsHasSub:focus-within > .bsSub,
  .bsSubBtn[aria-expanded=true] + .bsSub{
    opacity:1;visibility:visible;transform:none;transition-delay:0s
  }
  .bsSub a{padding:9px 18px;font-size:18px}
  .bsSubGroup > .bsGroup{padding:12px 18px 2px;font-size:13px}
  .bsSubGroup > ul a{padding-left:32px}
}
@media (min-width:1180px){
  .bsLogo img{width:240px}
}
@media (min-width:1400px){
  .bsLogo img{width:300px}
  .bsMenu > li > a,.bsHasSub > .bsTop{font-size:22px;padding-inline:16px}
}

/* ------------------------------------------------------------------- hero */
.bsHero{position:relative;background:var(--ink);isolation:isolate}
/* The bar is transparent over the hero (as the CMS's was), so the "background"
   for the white nav text is whatever pixels the photograph puts under it - and
   a DOM contrast sweep cannot see those: it climbs past the transparent header
   to <body> and reports white-on-white.  fp_heroink.py measures the real thing.
   Un-scrimmed, the Brass hero averages 4.18:1 and every hero has bright patches
   down at 1.8:1.  This gradient never drops below .45 alpha under the bar,
   which puts the WORST SINGLE PIXEL of the worst hero at 5.4:1. */
.bsHero::before{
  content:"";position:absolute;inset:0 0 auto;z-index:1;pointer-events:none;
  height:calc(var(--bar) + 56px);
  background:linear-gradient(to bottom,rgba(0,0,0,.58) 0,
             rgba(0,0,0,.45) var(--bar),rgba(0,0,0,0) 100%)
}
.bsHero--flat::before{display:none}
.bsHeroImg{
  display:block;width:100%;height:clamp(190px,26vw,400px);object-fit:cover
}
.bsHero--home .bsHeroImg{height:clamp(430px,46vw,615px)}
.bsHero--flat{height:clamp(150px,16vw,300px);background:#000}
.bsHero--home::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.12) 100%)
}
.bsHeroCopy{
  position:absolute;inset:var(--bar) 0 0;z-index:2;
  display:flex;align-items:center;pointer-events:none
}
.bsHeroCopy .bsIn{pointer-events:auto}
.bsHeroCopy h1{
  color:#fff;font-size:clamp(38px,6.4vw,80px);line-height:1;margin:0 0 .3em;
  text-shadow:0 2px 22px rgba(0,0,0,.55);max-width:16ch
}
.bsHeroCopy p{
  margin:0;color:#fff;font-family:var(--alt);font-weight:600;
  font-size:clamp(15px,1.9vw,25px);line-height:1.28;max-width:52ch;
  text-shadow:0 2px 16px rgba(0,0,0,.6)
}

/* ------------------------------------------------------------------ pages */
.bsPage{padding:clamp(36px,6vw,64px) 0 clamp(30px,5vw,56px)}
.bsPage .bsIn > .bsCol + .bsCol,
.bsPage .bsIn > .bsRow,
.bsPage .bsIn > .bsDl{margin-top:var(--gap)}
.bsRow{display:grid;grid-template-columns:var(--tracks);gap:var(--gap);
  align-items:start}
.bsCol > :last-child{margin-bottom:0}
.bsCol picture{display:block}
/* Only a LADDER image fills its column - those are the ones inside <picture>.
   A blanket `.bsPage img{width:100%}` also caught the CMS's 45x45 icons and
   drew them at 369px; the `[style*="vertical-align"]` escape hatch that was
   meant to spare them is exactly the kind of rule that looks right and is not
   worth trusting. Icons keep their own box and are merely capped. */
.bsPage picture img{width:100%;height:auto}
.bsPage img{max-width:100%;height:auto}
.bsPage .bsRow img{width:100%}

.bsDl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:2px 32px;margin:0;padding:0;border-top:2px solid var(--red)}
.bsDl dt{padding:16px 0 4px;font-family:var(--alt);font-weight:700;
  font-size:21px;text-align:center;align-self:center}
.bsDl dd{margin:0;padding:16px 0;border-bottom:1px solid var(--rule)}
.bsDl dt{border-bottom:1px solid var(--rule)}
.bsDl dt strong{font-weight:700}

.bsScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1em}
.bsScroll table{border-collapse:collapse;min-width:520px}
.bsScroll caption{
  caption-side:top;background:var(--red);color:#fff;text-align:left;
  padding:12px 14px;font-family:var(--alt);font-weight:700;font-size:20px;
  letter-spacing:.03em
}
.bsScroll th{text-align:left;font-family:var(--alt)}
/* Elfsight injects a non-interactive branding/share toolbar that escapes its
   own widget box - 460px wide inside a 356px phone viewport - which puts a
   horizontal scrollbar on /contact and /request-a-quote. `clip`, not `hidden`:
   clip leaves the OTHER axis alone, so the form's own dropdowns (the phone
   field's country list) can still escape vertically. */
[class*="elfsight-app-"]{overflow-x:clip}

.bsVideo{position:relative;aspect-ratio:16/9;background:#000}
.bsVideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ------------------------------------------------------------------ bands */
.bsBand{position:relative}
.bsSale{background:var(--red);color:#fff;padding:22px 0;text-align:center}
.bsSaleP{margin:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:6px 14px;
  font-family:var(--display);font-size:clamp(26px,4vw,40px);line-height:1.1}
.bsSaleP img{width:clamp(42px,5vw,65px);height:auto;flex:0 0 auto}
.bsSaleP strong{font-weight:700}
.bsSaleP span{font-weight:300}

.bsWelcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--paper)}
/* The photo must NOT drive the row height. Left in flow it sizes to its own
   4:2.33 ratio - 635px tall in a 1090px column on a wide screen - and the copy
   column, which needs 434, stretches to match and shows 200px of dead white.
   Taking the <picture> out of flow makes the copy set the height and lets the
   photo cover-crop into it; the sign sits in the middle 40% of the frame, so a
   centred crop never touches it (checked, not assumed). */
.bsWelcomeMedia{position:relative;min-height:340px}
.bsWelcomeMedia picture{position:absolute;inset:0}
.bsWelcomeMedia picture,.bsWelcomeMedia img{display:block;width:100%;height:100%;
  object-fit:cover}
.bsWelcomeCopy{display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,5vw,56px) var(--gutter)}
.bsWelcomeCopy > div{max-width:560px}
.bsWelcomeCopy h2{color:#000}
.bsWelcomeCopy p:last-child{margin-bottom:0}

/* Band backgrounds are CSS, not <img>: both are photographs/textures that
   tolerate a cover crop (unlike subfooter2, which is a composed layout and is
   laid out as a real two-column band instead).  The plain url() line is the
   fallback for a browser without image-set(); the narrow variant is swapped in
   below 900px so a phone does not fetch a 1500px file for a 375px band. */
.bsStaff{background:var(--ink) center/cover no-repeat;
  background-image:url(/assets/img/band-staff-1500.jpg);
  background-image:image-set(url(/assets/img/band-staff-1500.webp) type("image/webp"),
                             url(/assets/img/band-staff-1500.jpg) type("image/jpeg"));
  color:#fff;padding:clamp(44px,7vw,86px) 0}
.bsStaffIn{display:grid;grid-template-columns:minmax(0,350fr) minmax(0,400fr);
  gap:clamp(16px,3vw,40px);align-items:start;max-width:880px}
.bsStaffLead{margin:0;padding-top:18px;border-top:15px solid var(--red);
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,4.6vw,50px);line-height:1.08}
.bsStaffTail{margin:0;align-self:center;font-family:var(--display);
  font-size:clamp(22px,2.8vw,30px);line-height:1.15}

.bsServices{background:var(--mist);padding:clamp(40px,6vw,72px) 0}
.bsServicesIn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start}
.bsServices h2{color:#000;font-size:clamp(32px,4.4vw,48px)}
.bsServices p:last-child{margin-bottom:0}
.bsServiceList{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:14px 24px}
.bsServiceList li{display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3vw,36px);line-height:1.1}
.bsServiceList img{width:38px;height:auto;flex:0 0 auto}

.bsMetals{background:var(--ink) center/cover no-repeat;
  background-image:url(/assets/img/band-metals-1500.jpg);
  background-image:image-set(url(/assets/img/band-metals-1500.webp) type("image/webp"),
                             url(/assets/img/band-metals-1500.jpg) type("image/jpeg"));
  color:#fff;padding:clamp(46px,7vw,90px) 0;text-align:center}
.bsMetalsH{color:#fff;font-size:clamp(34px,6.6vw,80px);line-height:1.02;
  margin-bottom:.18em}
.bsMetalsSub{font-family:var(--alt);font-weight:600;letter-spacing:.03em;
  font-size:clamp(15px,2vw,25px);margin-bottom:2em}
/* min() on the track floor, not a bare 300px: a grid item's min-width is its
   min-CONTENT width, so a 300px floor plus the gutter is 336px on a 320px
   screen and the whole page gains 13px of horizontal scroll. */
.bsMetalsFacts{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:20px 32px}
.bsMetalsFacts li{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0;font-weight:700;font-size:clamp(16px,1.6vw,20px)}
.bsMetalsFacts img{width:44px;height:44px;flex:0 0 auto}
.bsMetalsFacts a{color:#fff}
.bsMetalsFacts a:hover{color:#ffd9d7}

/* ----------------------------------------------------------------- footer */
.bsFoot{background:var(--red);color:#fff;padding:clamp(30px,4vw,46px) 0;
  text-align:center}
.bsFoot img{width:clamp(230px,30vw,356px);height:auto;margin-bottom:18px}
.bsFoot p{margin:0;font-size:16px;line-height:1.7}
.bsFoot a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bsFoot a:hover{color:#ffe2e0}

/* ------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .bsStaffIn{grid-template-columns:minmax(0,1fr)}
  .bsStaffTail{align-self:start}
  .bsServicesIn{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .bsWelcome{grid-template-columns:minmax(0,1fr)}
  /* stacked: the photo is back in flow and sets its own band height */
  .bsWelcomeMedia{min-height:0}
  .bsWelcomeMedia picture{position:static}
  .bsWelcomeMedia img{height:clamp(200px,42vw,320px)}
  .bsRow{grid-template-columns:minmax(0,1fr)}
  .bsDl{grid-template-columns:minmax(0,1fr);gap:0}
  .bsDl dt{text-align:left;border-bottom:0;padding-bottom:0}
  .bsDl dd{padding-top:6px}
}
@media (max-width:900px){
  .bsStaff{background-image:url(/assets/img/band-staff-900.jpg);
    background-image:image-set(url(/assets/img/band-staff-900.webp) type("image/webp"),
                               url(/assets/img/band-staff-900.jpg) type("image/jpeg"))}
  .bsMetals{background-image:url(/assets/img/band-metals-900.jpg);
    background-image:image-set(url(/assets/img/band-metals-900.webp) type("image/webp"),
                               url(/assets/img/band-metals-900.jpg) type("image/jpeg"))}
}
@media (max-width:520px){
  body{font-size:17px}
  .bsScroll table{min-width:420px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}