/* SHADOE TRACK -- shadoe-track-joist-band-offset-brochure-1998 */
:root{
  --canvas:#ffffff; --surface:#f2efe9; --text:#1f2a2e; --accent:#8c5a2b; --rule:#cfc8bb;
  --sans:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --perf:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Crect width='40' height='10' fill='%231f2a2e'/%3E%3Ccircle cx='10' cy='5' r='2.6' fill='%23f2efe9'/%3E%3Ccircle cx='30' cy='5' r='2.6' fill='%23f2efe9'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:400 17px/1.65 var(--sans)}
img,svg{max-width:100%;height:auto}
a{color:var(--accent)}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell{max-width:1240px;margin:0 auto;padding:0 24px}
.rule{height:10px;background-image:var(--perf);background-repeat:repeat-x;background-size:40px 10px}

/* header */
.util-bar{background:var(--text);color:#fff;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.util-bar .shell{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:11px;padding-bottom:11px}
.head .shell{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;padding-top:22px;padding-bottom:20px}
.brand{font:700 30px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 19px;list-style:none;margin:0;padding:0}
.nav a{font-size:14.5px;color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

/* banner */
.banner{position:relative;width:100vw;margin-inline:calc(50% - 50vw);height:480px;overflow:hidden;
  background:var(--surface) center/cover no-repeat}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-in{position:absolute;left:0;right:0;bottom:0}
.banner-in .shell{padding-bottom:38px}
.banner-panel{background:rgba(0,0,0,.30);padding:24px 30px 26px;max-width:min(660px,62%)}
.banner h1{margin:0;font:700 44px/1.12 var(--sans);color:#fff}
.banner p{margin:10px 0 0;font-size:18px;color:#fff}

/* sections */
.sect{padding:56px 0}
.sect h2{margin:0 0 8px;font:700 30px/1.2 var(--sans)}
.lede{margin:0 0 26px;max-width:68ch;color:var(--text)}
.offset-row{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.offset-row.flip{grid-template-columns:5fr 7fr}
.offset-row.flip .fig{order:-1}
.fig{margin:0;background:var(--surface);border:1px solid var(--rule)}
.fig img{display:block;width:100%}
.body-copy p{max-width:68ch}

/* advantage list */
.adv-list{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.adv-list li{break-inside:avoid;padding:12px 0 12px 22px;border-bottom:1px solid var(--rule);position:relative;max-width:44ch}
.adv-list li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;background:var(--accent)}

/* step band */
.step-band{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0;padding:0;list-style:none}
.step-band h3{margin:14px 0 6px;font:700 22px/1.25 var(--sans)}
.step-band figure{margin:0;background:var(--surface);border:1px solid var(--rule)}
.step-band p{margin:0;font-size:16px}

/* resource grid */
.res-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr .95fr;gap:0;border:1px solid var(--rule)}
.res-cell{padding:26px;border-right:1px solid var(--rule)}
.res-cell:last-child{border-right:0}
.res-cell h3{margin:0 0 12px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.formula{margin:0;font:700 19px/1.45 var(--sans)}
.worked{margin:10px 0 0;font-size:15px}
.res-cell ul{margin:0;padding-left:18px;font-size:16px}
.res-cell ul li{margin-bottom:6px}
.chart-head{width:100%;border-collapse:collapse;font-size:13px}
.chart-head th,.chart-head td{border:1px solid var(--rule);padding:5px 6px;text-align:center;font-variant-numeric:tabular-nums}
.chart-head th{background:var(--surface);font-weight:600}

/* territory table */
.territory-table{width:100%;border-collapse:collapse}
.territory-table caption{text-align:left;padding-bottom:14px;color:var(--text)}
.territory-table th,.territory-table td{border-bottom:1px solid var(--rule);padding:15px 14px 15px 0;text-align:left;vertical-align:top}
.territory-table thead th{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid var(--text)}
.territory-table td.co{font-weight:700}

/* chart frames */
.chart-frame{overflow-x:auto;border:1px solid var(--rule);margin:0 0 40px}
.chart{border-collapse:collapse;font-size:13px;min-width:760px;width:100%}
.chart caption{text-align:left;padding:16px 16px 12px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.chart th,.chart td{border:1px solid var(--rule);padding:7px 9px;text-align:center;font-variant-numeric:tabular-nums}
.chart thead th{background:var(--surface);font-weight:600}
.chart tbody th{background:var(--surface);font-weight:700;position:sticky;left:0}

/* detail pages */
.page-title{padding:44px 0 22px}
.page-title h1{margin:0;font:700 40px/1.15 var(--sans);max-width:18ch}
.page-title p{margin:12px 0 0;max-width:68ch}
.facts-rail{background:var(--surface);border:1px solid var(--rule);padding:26px;margin-top:40px;
  display:grid;grid-template-columns:1fr 1fr;gap:26px}
.facts-rail h2{margin:0 0 10px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.facts-rail ul{margin:0;padding-left:18px}
.rel-links{padding:36px 0 60px}
.rel-links h2{margin:0 0 14px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rel-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0}
.numbered{margin:0;padding:0;list-style:none;counter-reset:s}
.numbered li{position:relative;padding:0 0 22px 52px;counter-increment:s;max-width:68ch}
.numbered li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;
  background:var(--accent);color:#fff;font-weight:700;text-align:center;line-height:34px}
.note{border-left:3px solid var(--accent);padding-left:16px;margin:22px 0;max-width:66ch}
.formula-block{border:1px solid var(--rule);background:var(--surface);padding:26px;max-width:60ch}

/* footer */
.site-foot{background:var(--surface);border-top:1px solid var(--rule);padding:46px 0 0;margin-top:24px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.foot-cols h2{margin:0 0 12px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:8px}
.foot-cols a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.foot-cols a:hover{border-bottom-color:var(--accent)}
.foot-mark{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  padding:26px 0;margin-top:38px;border-top:1px solid var(--rule)}
.foot-mark .wm{font:700 20px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.foot-mark .desc{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* 404 */
.gone{padding:80px 0 100px}
.gone h1{margin:0 0 14px;font:700 40px/1.15 var(--sans)}

@media (max-width:1080px){ .shell{padding:0 18px} .offset-row{gap:34px} }
@media (max-width:760px){
  .head .shell{padding-top:18px;padding-bottom:16px}
  .brand{font-size:24px}
  .nav{font-size:13px;gap:6px 16px}
  .nav a{font-size:13px}
  .banner{height:240px}
  .banner h1{font-size:28px}
  .banner p{font-size:16px}
  .banner-in .shell{padding-bottom:20px}
  .banner-panel{max-width:none;padding:14px 16px 16px}
  .offset-row,.offset-row.flip{grid-template-columns:1fr;gap:22px}
  .offset-row.flip .fig{order:0}
  .adv-list{columns:1}
  .step-band{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr 1fr}
  .res-cell{border-right:0;border-bottom:1px solid var(--rule)}
  .res-cell:nth-child(odd){border-right:1px solid var(--rule)}
  .facts-rail{grid-template-columns:1fr}
  .page-title h1{font-size:30px}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .res-grid{grid-template-columns:1fr}
  .res-cell,.res-cell:nth-child(odd){border-right:0}
  .foot-cols{grid-template-columns:1fr}
  .rule{height:6px;background-size:24px 6px}
  .territory-table thead{display:none}
  .territory-table td{display:block;padding:4px 0;border-bottom:0}
  .territory-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
}