@font-face{font-family:'Roboto Slab';src:url('fonts/RobotoSlab-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Slab';src:url('fonts/RobotoSlab-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter 18pt';src:url('fonts/Inter_18pt-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter 18pt';src:url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F4EFE6;color:#1A1F24;
  font-family:'Inter 18pt','Inter','Segoe UI',Arial,sans-serif;font-weight:500;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Roboto Slab',Rockwell,Georgia,serif;font-weight:900;
  line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.15rem;font-weight:700}
h4{font-size:.95rem;font-weight:700}
p{margin:0 0 1em}
a{color:#1A1F24;text-decoration:none}
a:hover{color:#B85C38}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#B85C38;margin:0 0 .8em}
.eyebrow.stone{color:#8B8680}
.rule{height:3px;background:#B85C38;border:0;width:64px;margin:0 0 1.4em}

/* ---- utility bar ---- */
.util{background:#1A1F24;color:#F4EFE6;font-size:.8rem;font-weight:500}
.util .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
  padding-top:9px;padding-bottom:9px}
.util a{color:#F4EFE6}
.util a:hover{color:#B85C38}
.util .sep{flex:1}
.util b{font-weight:600}
.util .hot{color:#E8A88C}

/* ---- header ---- */
header{background:#F4EFE6;border-bottom:1px solid rgba(26,31,36,.14);
  position:sticky;top:0;z-index:50}
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:16px;padding-bottom:16px}
.logo img{width:250px}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
nav a.on{color:#B85C38;box-shadow:inset 0 -3px 0 #B85C38}
.btn{display:inline-block;background:#B85C38;color:#F4EFE6;padding:12px 22px;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid #B85C38;transition:.15s}
.btn:hover{background:#1A1F24;border-color:#1A1F24;color:#F4EFE6}
.btn.ghost{background:transparent;color:#1A1F24;border-color:#1A1F24}
.btn.ghost:hover{background:#1A1F24;color:#F4EFE6}
.btn.lite{background:transparent;color:#F4EFE6;border-color:#F4EFE6}
.btn.lite:hover{background:#F4EFE6;color:#1A1F24}
.btn.sm{padding:9px 16px;font-size:.7rem}

/* ---- hero ---- */
.hero{background:#1A1F24;color:#F4EFE6;padding:76px 0 84px;position:relative;
  overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border:26px solid rgba(184,92,56,.16);pointer-events:none}
.hero h1{max-width:16ch}
.hero .lede{font-size:1.15rem;max-width:52ch;color:#D8D2C6;margin-bottom:1.9em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---- two lanes ---- */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(26,31,36,.14);
  margin:0 0 0}
.lane{background:#F4EFE6;padding:44px 38px}
.lane.dark{background:#1A1F24;color:#F4EFE6}
.lane.dark .eyebrow{color:#E8A88C}
.lane h2{font-size:1.55rem}
.lane p{color:#4A5058;margin-bottom:1.4em}
.lane.dark p{color:#CFC9BD}
.lane ul{margin:0 0 1.6em;padding-left:1.1em;color:#4A5058;font-size:.95rem}
.lane.dark ul{color:#CFC9BD}
.lane li{margin-bottom:.4em}

/* ---- sections ---- */
section{padding:72px 0}
section.tight{padding:52px 0}
section.alt{background:#EDE7DB}

/* ---- category tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.tile{background:#F4EFE6;border:1px solid rgba(26,31,36,.16);padding:28px 26px 26px;
  display:flex;flex-direction:column;transition:.15s}
.tile:hover{border-color:#B85C38;transform:translateY(-2px)}
.tile .num{font-family:'Roboto Slab',serif;font-weight:900;font-size:.8rem;color:#B85C38;
  letter-spacing:.16em;margin-bottom:14px}
.tile h3{margin-bottom:.5em}
.tile p{font-size:.9rem;color:#5A6069;flex:1;margin-bottom:1.2em}
.tile .go{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#B85C38}

/* ---- generic table ---- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{background:#1A1F24;color:#F4EFE6;text-align:left;padding:11px 14px;
  font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
td{padding:10px 14px;border-bottom:1px solid rgba(26,31,36,.13);vertical-align:top}
tr:nth-child(even) td{background:rgba(26,31,36,.03)}
.mono{font-family:Consolas,'Courier New',monospace;font-size:.86rem}

/* ---- NEED chips ---- */
.need{display:inline-block;border:1px dashed #B85C38;background:rgba(184,92,56,.07);
  color:#8E4425;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:2px}
.needblock{border:1px dashed #B85C38;background:rgba(184,92,56,.06);padding:16px 18px;
  font-size:.86rem;color:#8E4425;margin:0 0 20px}
.needblock b{font-weight:600}

/* ---- line card ---- */
.linecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.lcgroup{border-top:3px solid #B85C38;padding-top:16px}
.lcgroup h4{margin-bottom:.7em;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{border:1px dashed rgba(26,31,36,.3);background:rgba(255,255,255,.5);
  color:#8B8680;font-size:.74rem;padding:12px 14px;min-width:96px;text-align:center}

/* ---- catalog layout ---- */
.catalog{display:grid;grid-template-columns:236px 1fr;gap:38px;align-items:start}
.facets{position:sticky;top:96px;font-size:.87rem}
.fgroup{border-bottom:1px solid rgba(26,31,36,.15);padding:16px 0}
.fgroup:first-child{padding-top:0}
.fgroup h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8B8680;margin-bottom:.9em}
.fgroup label{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
.fgroup input{accent-color:#B85C38;margin:0}
.fgroup .cnt{margin-left:auto;color:#8B8680;font-size:.78rem}
.fclear{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#B85C38;cursor:pointer;background:none;border:0;padding:14px 0 0;font-family:inherit}
.resultbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:2px solid #1A1F24;padding-bottom:10px;margin-bottom:18px;flex-wrap:wrap}
.resultbar .n{font-family:'Roboto Slab',serif;font-weight:700;font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.card{border:1px solid rgba(26,31,36,.16);background:#FBF8F2;padding:16px;
  display:flex;flex-direction:column;transition:.12s}
.card:hover{border-color:#B85C38}
.card .sku{font-family:Consolas,monospace;font-size:.74rem;color:#8B8680;margin-bottom:8px}
.card .nm{font-size:.88rem;font-weight:600;line-height:1.35;margin-bottom:10px;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pill{font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 7px;border:1px solid}
.pill.stock{color:#2F6B44;border-color:#2F6B44}
.pill.quote{color:#B85C38;border-color:#B85C38}
.card .ask{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#B85C38}
.empty{padding:50px 0;color:#8B8680;text-align:center}

/* ---- product detail ---- */
.pdp{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:start}
.shot{background:#FBF8F2;border:1px solid rgba(26,31,36,.16);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;padding:44px}
.shot svg{width:100%;height:auto}
.crumb{font-size:.78rem;color:#8B8680;margin-bottom:22px}
.crumb a{color:#8B8680}
.crumb a:hover{color:#B85C38}
.pdp h1{font-size:clamp(1.5rem,2.5vw,2.05rem);margin-bottom:.35em}
.pdp .sku{font-family:Consolas,monospace;color:#8B8680;font-size:.86rem;margin-bottom:18px}
.buybox{border:2px solid #1A1F24;padding:22px;margin:22px 0 28px;background:#FBF8F2}
.buybox .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.buybox .note{font-size:.84rem;color:#5A6069;margin:0}
.speclist{margin:0 0 26px;border-top:1px solid rgba(26,31,36,.15)}
.speclist div{display:flex;gap:18px;padding:9px 0;border-bottom:1px solid rgba(26,31,36,.11);
  font-size:.9rem}
.speclist dt{width:190px;flex:none;color:#8B8680;font-weight:600;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.speclist dd{margin:0}
.dl{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.dlbtn{display:flex;align-items:center;gap:10px;border:1px solid rgba(26,31,36,.28);
  padding:12px 16px;font-size:.83rem;font-weight:600;background:#FBF8F2}
.dlbtn:hover{border-color:#B85C38;color:#B85C38}
.dlbtn span{font-family:Consolas,monospace;font-size:.7rem;color:#8B8680}
.ladder{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rung{border:1px solid rgba(26,31,36,.18);background:#FBF8F2;padding:12px 14px;font-size:.85rem}
.rung:hover{border-color:#B85C38}
.rung b{display:block;font-family:'Roboto Slab',serif;font-weight:700;font-size:1rem}
.rung.here{background:#1A1F24;color:#F4EFE6;border-color:#1A1F24}
.rung .s{font-family:Consolas,monospace;font-size:.72rem;color:#8B8680}
.rung.here .s{color:#A9A29A}

/* ---- form ---- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label.lbl{font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#8B8680}
input,select,textarea{font-family:inherit;font-size:.95rem;font-weight:500;color:#1A1F24;
  background:#FBF8F2;border:1px solid rgba(26,31,36,.28);padding:11px 13px;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid #B85C38;outline-offset:-1px;
  border-color:#B85C38}
textarea{min-height:130px;resize:vertical}
.help{font-size:.8rem;color:#8B8680}
fieldset{border:0;padding:0;margin:0 0 28px}
legend{font-family:'Roboto Slab',serif;font-weight:700;font-size:1.05rem;padding:0 0 14px}
.checkrow{display:flex;flex-wrap:wrap;gap:10px 22px}
.checkrow label{display:flex;align-items:center;gap:8px;font-size:.92rem;cursor:pointer}
.checkrow input{accent-color:#B85C38}

/* ---- side panel ---- */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:start}
.panel{background:#1A1F24;color:#F4EFE6;padding:32px 30px}
.panel h3{color:#F4EFE6}
.panel p,.panel li{color:#CFC9BD;font-size:.92rem}
.panel a{color:#E8A88C}
.panel ul{padding-left:1.1em;margin:0 0 1.2em}
.panel .big{font-family:'Roboto Slab',serif;font-weight:900;font-size:1.6rem;color:#F4EFE6;
  display:block;margin:.2em 0 .1em}

/* ---- proof strip ---- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;
  background:rgba(26,31,36,.14)}
.proof div{background:#F4EFE6;padding:26px 22px}
.proof b{font-family:'Roboto Slab',serif;font-weight:900;font-size:1.5rem;display:block;
  margin-bottom:.25em}
.proof p{font-size:.87rem;color:#5A6069;margin:0}

/* ---- footer ---- */
footer{background:#1A1F24;color:#CFC9BD;padding:56px 0 0;font-size:.9rem}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px}
footer h4{color:#F4EFE6;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1.1em}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.5em}
footer a{color:#CFC9BD}
footer a:hover{color:#E8A88C}
.fbar{border-top:1px solid rgba(244,239,230,.16);padding:18px 0 26px;font-size:.8rem;
  color:#8B8680;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.frule{height:3px;background:#B85C38;width:64px;margin-bottom:20px}

@media(max-width:920px){
  .catalog{grid-template-columns:1fr}
  .facets{position:static}
  .pdp{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .lanes{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .formgrid{grid-template-columns:1fr}
  nav ul{gap:16px}
  .logo img{width:196px}
}
@media(max-width:560px){
  .fgrid{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:flex-start}
}