/* ============================================================
   STEENBLIK CO. LLC — Dimensional Stone and Masonry
   DARK QUARRY-SLATE theme · Chisel-Slate accent
   Palette:
     --quarry-slate   #171512  deep quarry body
     --bedrock-panel  #211E19  raised panels
     --deeper-quarry  #12100E  footer
     --plaque         #1D1A16  hero text slab
     --course-mortar  #2E2A24  hairlines
     --chisel-slate   #7FA3B8  primary accent (steel-blue slate)
     --quartz-bone    #E9E2D4  secondary text
     --bone-text      #EDEAE3
     --near-white     #F5F2EA  headlines
     --body-text      #D3CEC4  legal body
     --oxide-rust     #B0562F  sparing tertiary mark
   The motif is a STONE QUARRY AND MASONRY YARD built in CSS.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
:root{
  --quarry-slate:#171512;
  --bedrock-panel:#211E19;
  --deeper-quarry:#12100E;
  --plaque:#1D1A16;
  --course-mortar:#2E2A24;
  --chisel-slate:#7FA3B8;
  --quartz-bone:#E9E2D4;
  --bone-text:#EDEAE3;
  --near-white:#F5F2EA;
  --body-text:#D3CEC4;
  --oxide-rust:#B0562F;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Georgia","Hoefler Text","Times New Roman",serif;
  font-size:16px;
  line-height:1.7;
  background-color:#171512;
  color:#EDEAE3;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Trebuchet MS","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
  color:#F5F2EA;
  margin:0 0 0.6em;
  font-weight:700;
  line-height:1.2;
}

p{margin:0 0 1em}

a{color:#7FA3B8;text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- COPIED/NAVIGATION ---------- */

.coping-nav{
  position:sticky;
  top:0;
  z-index:50;
  background-color:#171512;
}

.coping-nav .coping-course{
  display:flex;
  gap:2px;
  height:16px;
  padding:0 12px;
  background-color:#171512;
  overflow:hidden;
}

.coping-nav .coping-course i{
  display:block;
  flex:1 1 auto;
  height:16px;
  background-color:#211E19;
  border-radius:7px 7px 0 0;
}

.coping-nav .coping-course i:nth-child(odd){
  flex:0 0 54px;
}

.coping-nav .nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  border-top:2px solid #2E2A24;
}

.coping-nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:21px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-weight:700;
  letter-spacing:0.16em;
  color:#7FA3B8;
  text-transform:uppercase;
}

.coping-nav .chisel-glyph{
  position:relative;
  width:16px;
  height:16px;
}

.coping-nav .chisel-glyph::before{
  content:"";
  position:absolute;
  left:0;top:4px;
  width:14px;height:10px;
  background-color:#EDEAE3;
  clip-path:polygon(0 20%,100% 50%,80% 80%,6% 60%);
}

.coping-nav .chisel-glyph::after{
  content:"";
  position:absolute;
  right:-1px;top:10px;
  width:3px;height:3px;
  background-color:#B0562F;
}

.coping-nav .nav-links{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.12em;
  color:#E9E2D4;
}

.coping-nav .nav-links a{
  color:#E9E2D4;
  font-weight:600;
}

.coping-nav .nav-links a:hover{
  color:#7FA3B8;
  text-decoration:underline;
  text-underline-offset:5px;
}

.coping-nav .nav-links .dash{
  color:#2E2A24;
  font-size:14px;
}

.coping-nav .nav-toggle{
  display:none;
  background:none;
  border:1px solid #2E2A24;
  color:#EDEAE3;
  font-size:13px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:8px 14px;
  cursor:pointer;
}

@media (max-width:820px){
  .coping-nav .nav-toggle{display:block}
  .coping-nav .nav-links{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    width:100%;
    padding:0 28px 18px;
  }
  .coping-nav .nav-links.open{display:flex}
  .coping-nav .nav-links .dash{display:none}
  .coping-nav .nav-row{flex-wrap:wrap}
}

/* ---------- HERO: ASHLAR-WALL ---------- */

.ashlar-hero{
  position:relative;
  background-color:#171512;
  padding:70px 24px 80px;
  overflow:hidden;
}

.ashlar-hero .hero-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  min-height:430px;
}

.ashlar-hero .stone-wall{
  position:absolute;
  top:0;right:0;
  width:45%;
  height:100%;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:2px;
  padding:2px;
}

.ashlar-hero .stone-wall .row{
  display:flex;
  gap:2px;
}

.ashlar-hero .stone-wall .stone{
  background-color:#211E19;
  flex:1 1 auto;
  height:100%;
  border-radius:3px;
}

.ashlar-hero .stone-wall .stone.slate{
  background-color:#7FA3B8;
}

.ashlar-hero .stone-wall .stone.tick{
  position:relative;
}

.ashlar-hero .stone-wall .stone.tick::after{
  content:"";
  position:absolute;
  right:8px;top:14%;
  width:3px;height:12px;
  background-color:#B0562F;
  transform:rotate(24deg);
}

.ashlar-hero .text-slab{
  position:relative;
  z-index:2;
  max-width:640px;
  background-color:#1D1A16;
  border:2px solid #E9E2D4;
  padding:44px 44px 48px;
}

.ashlar-hero .eyebrow{
  display:inline-block;
  background-color:#7FA3B8;
  color:#171512;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:5px 12px;
  margin-bottom:22px;
}

.ashlar-hero h1{
  font-size:50px;
  margin-bottom:20px;
}

.ashlar-hero h1 .stone-col{
  color:#7FA3B8;
}

.ashlar-hero .subcopy{
  color:#E9E2D4;
  font-size:17px;
  margin-bottom:28px;
}

.ashlar-hero .hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.btn{
  display:inline-block;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:13px 26px;
  border-radius:2px;
  cursor:pointer;
}

.btn-primary{
  background-color:#7FA3B8;
  color:#171512;
  border:1px solid #7FA3B8;
}

.btn-primary:hover{background-color:#8FB3C8;text-decoration:none}

.btn-outline{
  background-color:transparent;
  color:#F5F2EA;
  border:1px solid #E9E2D4;
}

.btn-outline:hover{border-color:#7FA3B8;color:#7FA3B8;text-decoration:none}

/* ---------- SECTION BASE ---------- */

.home-page .section{
  padding:80px 24px;
}

.home-page .section-accent{background-color:#171512}
.home-page .section-panel{background-color:#211E19}

.home-page .section-heading{
  color:#7FA3B8;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:15px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* ---------- TEMPLATE CARDS ---------- */

.template-cards .cards{display:flex;flex-direction:column;gap:14px}

.card-intro{
  color:#E9E2D4;
  font-size:17px;
  max-width:860px;
  margin-bottom:28px;
}

.template-row{
  position:relative;
  background-color:#211E19;
  border:1px solid #2E2A24;
  padding:34px 40px;
  display:grid;
  grid-template-columns:96px 1fr 120px;
  gap:34px;
  align-items:center;
}

.template-row .corner{
  position:absolute;
  width:18px;height:18px;
  border:2px solid #E9E2D4;
}

.template-row .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.template-row .corner.tr{top:10px;right:10px;border-left:none;border-bottom:none}
.template-row .corner.bl{bottom:10px;left:10px;border-right:none;border-top:none}
.template-row .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}

.template-row .template-num{
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:56px;
  font-weight:700;
  color:#B0562F;
  text-align:center;
}

.template-row .template-body h3{
  color:#F5F2EA;
  font-size:22px;
  margin-bottom:8px;
}

.template-row .template-body p{
  color:#E9E2D4;
  font-size:15px;
}

.ashlar-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
  justify-content:center;
}

.ashlar-stack .blk{
  height:22px;
  width:78px;
  margin:0 auto;
  background-color:#171512;
  border:1px solid #2E2A24;
  border-radius:2px;
}

.ashlar-stack .blk.slate{background-color:#7FA3B8;border-color:#7FA3B8}

@media (max-width:760px){
  .template-row{
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
  }
  .ashlar-stack{display:none}
}

/* ---------- HOIST METRIC BAND ---------- */

.hoist-band{
  background-color:#211E19;
  border-top:1px solid #E9E2D4;
  border-bottom:1px solid #E9E2D4;
  padding:56px 24px;
}

.hoist-band .metrics{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}

.hoist-band .metric{
  text-align:center;
  padding:0 20px;
}

.hoist-band .metric .num{
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:52px;
  font-weight:700;
  color:#7FA3B8;
}

.hoist-band .metric .label{
  margin-top:8px;
  color:#E9E2D4;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

@media (max-width:760px){
  .hoist-band .metrics{grid-template-columns:repeat(2,1fr);gap:28px 0}
}

/* ---------- STATEMENT BAND ---------- */

.statement-band .statement{
  position:relative;
  padding-left:26px;
  max-width:900px;
  margin:0 auto;
  text-align:left;
}

.statement-band .statement::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:6px;
  width:4px;
  background-color:#7FA3B8;
}

.statement-band .statement blockquote{
  margin:0;
  font-family:"Georgia",serif;
  font-size:26px;
  line-height:1.5;
  color:#F5F2EA;
  font-style:italic;
}

.statement-band .statement .attr{
  margin-top:18px;
  color:#7FA3B8;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.statement-band .statement .statement-sub{
  margin-top:16px;
  color:#D3CEC4;
  font-size:15px;
  max-width:820px;
  padding-left:26px;
}

/* ---------- CTA BAND ---------- */

.cta-band{
  text-align:center;
}

.cta-band h2{
  color:#7FA3B8;
  font-size:34px;
}

.cta-band p{
  color:#E9E2D4;
  font-size:17px;
  max-width:640px;
  margin:0 auto 30px;
}

/* ---------- FOOTER: KEYSTOCK ---------- */

.keystock-footer{
  background-color:#12100E;
  position:relative;
  z-index:1;
}

.keystock-footer .edge-strip{
  display:flex;
  gap:2px;
  height:16px;
  padding:0 12px;
  overflow:hidden;
}

.keystock-footer .edge-strip el{
  display:block;
  flex:1 1 auto;
  height:16px;
  background-color:#211E19;
}

.keystock-footer .edge-strip el:nth-child(even){
  flex:0 0 34px;
}

.keystock-footer .foot-inner{
  text-align:center;
  padding:46px 24px 20px;
}

.keystock-footer .foot-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:0.16em;
  color:#7FA3B8;
  text-transform:uppercase;
  margin-bottom:22px;
}

.keystock-footer .foot-brand .fk-chisel{
  position:relative;
  width:18px;height:18px;
}

.keystock-footer .foot-brand .fk-chisel::before{
  content:"";
  position:absolute;
  left:0;top:5px;
  width:15px;height:11px;
  background-color:#EDEAE3;
  clip-path:polygon(0 20%,100% 50%,80% 80%,6% 60%);
}

.keystock-footer .foot-brand .fk-chisel::after{
  content:"";
  position:absolute;
  right:0;top:12px;
  width:3px;height:3px;
  background-color:#B0562F;
}

.keystock-footer .foot-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  font-family:"Trebuchet MS",Arial,sans-serif;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.12em;
  margin-bottom:26px;
}

.keystock-footer .foot-nav a{color:#E9E2D4;padding:6px 12px}
.keystock-footer .foot-nav a:hover{color:#7FA3B8;text-decoration:underline}
.keystock-footer .foot-nav .sep{color:#2E2A24;line-height:32px}

.plumb-bob{
  width:1px;
  height:34px;
  background-color:#B0562F;
  margin:0 auto 22px;
  position:relative;
}

.plumb-bob::after{
  content:"";
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:9px solid #B0562F;
}

.keystock-footer .legal-line{
  color:#D3CEC4;
  font-size:13px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  padding-bottom:26px;
}

.keystock-footer .legal-line a{color:#7FA3B8}

/* ---------- REVEAL ---------- */

.fade-up{opacity:1;transform:none}

/* ---------- CONTACT FORM ---------- */

.contact-form{
  background-color:#211E19;
  border:1px solid #2E2A24;
  padding:36px;
}

.contact-form .field{
  margin-bottom:22px;
}

.contact-form label{
  display:block;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#E9E2D4;
  margin-bottom:8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  background-color:#171512;
  border:1px solid #2E2A24;
  color:#F5F2EA;
  font-family:"Georgia",serif;
  font-size:16px;
  padding:12px 14px;
  border-radius:2px;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#7FA3B8;
}

.contact-form textarea{min-height:150px;resize:vertical}

.form-note{
  color:#7FA3B8;
  font-size:13px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  margin-top:10px;
}

/* ---------- SECONDARY PAGE ARCH ---------- */

.page-hero{
  background-color:#171512;
  padding:64px 24px 48px;
  border-bottom:1px solid #2E2A24;
}

.page-hero .eyebrow{
  display:inline-block;
  background-color:#7FA3B8;
  color:#171512;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:5px 12px;
  margin-bottom:18px;
}

.page-hero h1{font-size:44px}
.page-hero p{color:#E9E2D4;font-size:17px;max-width:760px}

.page-body{background-color:#171512;padding:64px 24px}

.page-body h2{
  color:#7FA3B8;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:26px;
  margin-top:48px;
  padding-top:18px;
  border-top:1px solid #2E2A24;
}

.page-body h3{color:#F5F2EA;font-size:20px;margin-top:28px}

.page-body p{color:#D3CEC4}

.page-body ul{
  color:#D3CEC4;
  padding-left:22px;
}

.page-body li{margin-bottom:8px}

/* ---------- CONTACT PAGE ---------- */

.contact-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:44px;
  align-items:start;
}

@media (max-width:820px){.contact-layout{grid-template-columns:1fr}}

.info-card{
  background-color:#211E19;
  border:1px solid #2E2A24;
  padding:28px;
  margin-bottom:24px;
}

.info-card h3{
  color:#7FA3B8;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:17px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.info-card p{color:#E9E2D4;margin-bottom:6px}
.info-card .detail{color:#D3CEC4}

.faq-item{border:1px solid #2E2A24;margin-bottom:12px;background-color:#211E19}

.faq-item .faq-q{
  padding:18px 22px;
  cursor:pointer;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-weight:700;
  font-size:16px;
  color:#F5F2EA;
}

.faq-item .faq-a{
  display:none;
  padding:0 22px 20px;
  color:#D3CEC4;
}

.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q{color:#7FA3B8}