/* ============================================================
   BSS CONCRETE LLC — Formwork and Pour
   Light theme. Body: slab-dust. Accent: pump-chute amber.
   Palettes are pre-blended solids. No rgba. No text gradients.
   ============================================================ */

/* Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  margin:0;
  overflow-x:hidden;
  background:#EFEEE7;               /* pale grey of a finished slab at dawn */
  color:#262A2E;                    /* ink-slate text */
  font-size:16px;                   /* literal base */
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:#8a5f1a;text-decoration:none}
a:hover{color:#C98A2E;text-decoration:underline}
img{max-width:100%;display:block}

.skiphelp{position:absolute;left:-1000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Accessibility / noscript safety: reveal is folded to visible by default */
.no-script .fade-up,.no-script .fade-item{opacity:1;transform:none}
.fade-up,.fade-item{transition:opacity .6s ease-out,transform .6s ease-out}
.fade-up{opacity:1;transform:none}
.fade-item{opacity:1;transform:none}
.js .fade-up,.js .fade-item{opacity:0;transform:translateY(18px)}
.js .fade-up.in-view,.js .fade-item.in-view,.no-script .fade-up,.no-script .fade-item{opacity:1;transform:none}

/* ============================================================
   Brand and shared helpers not tied to nav
   ============================================================ */
.accent-color{color:#C98A2E}
.dust-text{color:#EFEEE7}
.seevisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.examplelabel{border:1px solid #DFDCD0;display:inline-block;padding:2px 10px;border-radius:999px;font-family:Verdana,Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#262B31;background:#F8F6EF}

/* ============================================================
   FORM PANEL HEADER (.formpanel)  plywood form face
   Student-free element selectors for nav areas.
   ============================================================ */
.formpanel{
  position:sticky;
  top:0;
  z-index:900;
  background:
    /* plywood grain */
    repeating-linear-gradient(90deg,#DED9C6 0 2px,#E7E2CF 2px 4px,#DCD6C0 4px 6px);
  border-bottom:6px solid #C98A2E;
  color:#262B31;                    /* rebar-slate paper text */
  box-shadow:0 3px 10px #CFCCC4;
  font-family:Verdana,Arial,sans-serif;
}
.formpanel .formface{
  display:flex;
  align-items:stretch;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
/* vertical stud strips — the whole height; drawn via backgrounds */
.formface{
  position:relative;
  min-height:78px;
}

/* wrap studied leaves with their own ply grain; discs bolt between */
.form-stud{
  display:none;
}
.formbrand{
  display:flex;align-items:center;
  padding:14px 34px 14px 6px;
}
.brandword{
  font-size:1.4rem;
  font-weight:bold;
  color:#262B31;
  text-shadow:0 0 0 transparent;
  letter-spacing:.02em;
  line-height:1.05;
}
.brandsub{
  font-family:Arial,Helvetica,sans-serif;
  font-size:.66rem;
  letter-spacing:.18em;
  color:#262B31;
  margin-top:4px;
  text-transform:uppercase;
}
.navbolts{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:16px;
}
.boltlink{
  position:relative;
  /* snap-tie disc */
  display:inline-block;
  padding:4px 8px;
  margin:2px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.94rem;
  color:#262B31;
  text-decoration:none;
  text-align:center;
  line-height:1.3;
  min-width:64px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 40%,#ffffff,#d9d3bd 70%,#bdb69a);
  box-shadow:inset 0 0 0 3px #9f987f,inset 0 0 0 5px #c8c1a6,0 2px 0 #6f6950;
}
.boltlink:hover{color:#a35f0e;background:radial-gradient(circle at 50% 40%,#f7e9cf,#e0be82 70%,#c8974f);box-shadow:inset 0 0 0 3px #9a6a1f,inset 0 0 0 5px #d9ad62,0 2px 0 #6f5320}
.boltlink.current{background:#C98A2E;color:#262B31;box-shadow:inset 0 0 0 3px #0d1c2b,inset 0 0 0 5px #e0a64d,0 2px 0 #5e3f13}
/* hex nut dot at centre of disc */
.boltlink::after{
  content:'';
  position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:7px;height:7px;
  /* hex nut as a pseudo disc with clip — drawn with background layers */
  background:#333a41;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}
.boltlink::before{
  content:'';
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:4px;height:12px;background:#6b6550;border-radius:2px;
}

/* chalk LEVEL LINE with a line-level bubble across whole header (decorative) */
.level-line{
  grid-column:1 / -1;
  height:3px;
  background:
    linear-gradient(#c9b98a,#c9b98a) center/100% 2px no-repeat,
    #9b8fb0;
  background-color:#b6a56f;         /* chalk */
  position:relative;
}
.level-line .bubble{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120px;height:9px;
  background:#5e6a12;
  border:1px solid #3a450b;
  border-radius:6px;
}
.level-line .bubble i{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:10px;height:5px;background:#f5efcf;border-radius:9px;
}

/* mobile toggler inside header */
.menubtn{
  display:none;
}

/* ============================================================
   Hero-pour chute (shared on index/services/contact where used)
   These bodies ride the shared chrome above a hero area.
   Homepage uses .hero pour. Keep simple default hero too.
   ============================================================ */
.pagehero{
  border-top:0;
  max-width:1200px;margin:0 auto;padding:40px 24px 16px;
  font-family:Georgia,serif;
}
.pagehero h1{
  font-size:2.6rem;line-height:1.1;color:#262B31;font-weight:700;
}
.pagehero .lede{
  max-width:760px;margin:18px 0 0;font-size:1.14rem;color:#3a4048;
}

/* generic decorative pour-chute band w/ CTA rows for services */
.bigband{
  max-width:1180px;margin:18px auto 0;padding:22px 26px;
  background:#F8F6EF;border:1px solid #DFDCD0;
}
.ctarow{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}

/* ============================================================
   SNAP-TIE BUTTONS (shared)
   ============================================================ */
.boltbtn{
  display:inline-block;
  padding:12px 20px;
  background:#C98A2E;               /* chute amber */
  color:#ecf1e2;
  border:1px solid #0d1c2b;
  box-shadow:0 3px 0 #5e4315,0 4px 0 #a26516,0 6px 12px #8a6a35;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:bold;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.86rem;
  text-decoration:none;
}
.boltbtn.soft{
  background:#262B31;color:#F8F6EF;
  border-color:#14181c;box-shadow:0 3px 0 #11151a,0 4px 0 #5f6b73,0 6px 12px #1d2f43;
}
.boltbtn:hover{filter:brightness(1.06);text-decoration:none;color:#ffffff}

/* ============================================================
   Shared section shell for secondary buckets / strips
   ============================================================ */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.belt{max-width:1180px;margin:42px auto;padding:0 24px}
.panel,.rackcard,.cta,.hourscard,.faq{background:#F8F6EF;border:1px solid #E0DCD1}
.brow,.biggoal{color:#262A2E}

/* DEEP bands rebar-slate with paper text where used */
.deepsection{
  background:#262B31;color:#F8F6EF;
}

/* ============================================================
   HOMEPAGE HERO POUR CHUTE (.pourchute)
   Home-specific (index) heavy hero. Secondary pages use .pagehero.
   ============================================================ */
.pourchute{
  max-width:1200px;margin:22px auto 0;padding:26px 24px 10px;
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
  align-items:center;
}
.pourleft .eyebrow{
  font-family:Arial,Helvetica,sans-serif;color:#9E5A40;letter-spacing:.2em;
  text-transform:uppercase;font-size:.8rem;font-weight:bold;margin:0 0 8px;
}
.pourleft h1{font-size:3.3rem;line-height:1.04;color:#262A2E;margin:0}
.pourleft h1 .gold{color:#C98A2E}
.pourleft p{margin:16px 0 0;max-width:560px;color:#33393f;font-size:1.08rem}
.pourcta{margin:20px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.pournote{margin:20px 0 0;font-family:Arial,Helvetica,sans-serif;font-size:.82rem;color:#6a6f76}
.pournote a{color:#a35f0e}

/* pump boom arm entering top-right with round hose; poured ribbon and shell */
.pourright{
  position:relative;min-height:380px;
  display:flex;align-items:flex-start;justify-content:flex-end;
}
.pumparm{position:absolute;top:0;right:8px;width:72%;height:150px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#141a22 0 10px,#4a5560 10px 12px,#141a22 12px 22px);
  border-radius:999px 0 0 999px;
  border:2px solid #0f1319;
  transform-origin:right center;
}
.pumparm:before{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;background:#C98A2E;border-radius:6px;border:2px solid #0d1c2b;}
.hose{position:absolute;top:118px;right:30px;width:22px;height:120px;
  border-radius:999px;pointer-events:none;
  background:radial-gradient(circle at 50% 12%,#d2602a,#7c2f12 70%,#5c270f);
  border:2px solid #3b1606;}
.hose:after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  width:30px;height:22px;background:#1d1108;border:2px solid #2d1c0b;border-radius:999px;}
.columnform{
  position:absolute;right:16px;top:56px;width:190px;height:300px;
  background:
    repeating-linear-gradient(90deg,#cbbd93 0 22px,#cfc199 22px 24px),#bfb284;
  background-size:100% 100%,100% 100%;
  border:3px solid #9c8c5f;
}
.columnform:before{ /* walers horizontal */
  content:'';position:absolute;left:-6px;right:-6px;top:40%;height:10px;
  background:#9c8c5f;border:1px solid #77683f;
}
.columnform:after{ /* vertical studs */
  content:'';position:absolute;top:-6px;bottom:-6px;left:55px;width:8px;
  background:#9c8c5f;border:1px solid #77683f;box-shadow:70px 0 0 #9c8c5f,-70px 0 0 #9c8c5f;
}
.snaptie{position:absolute;right:8px;left:8px;bottom:26px;height:16px;z-index:3;
  /* discs at 3 points */
}
.snaptie span{position:absolute;top:0;width:22px;height:22px;background:#d8cfa7;border:1px solid #9c8c5f;border-radius:999px;}
.snaptie span:nth-child(1){left:0}
.snaptie span:nth-child(2){left:calc(50% - 11px)}
.snaptie span:nth-child(3){right:0}
.ribbon{ /* solid poured concrete in the form column */
  position:absolute;right:34px;bottom:26px;left:30px;height:172px;
  background:#b9bac0;border-top:1px solid #999aa2;
  box-shadow:inset 0 18px 22px -12px #6b6d76;
}
.slugslump{position:absolute;left:-6px;bottom:-4px;
  width:88px;height:120px;background:#c2c3cb;border-radius:50% 50% 10px 10px;
  border:1px solid #8d8f97;transform:rotate(-6deg);
  background:linear-gradient(135deg,#cfd0d8,#a7a9b2 65%);
}
/* single gradient block allowed on decorations (not text) */
.slugplate{position:absolute;left:-22px;bottom:-16px;width:132px;height:14px;background:#6f6a52;border:1px solid #4e4a36;border-radius:4px}

/* ============================================================
   SECTION TITLES  (.sectionkick)
   ============================================================ */
.sectionhead{max-width:1200px;margin:0 auto;padding:10px 24px 4px}
.sectionhead .sectionkick{
  font-family:Arial,Helvetica,sans-serif;color:#9E5A40;letter-spacing:.2em;
  text-transform:uppercase;font-size:.78rem;font-weight:bold;margin:0 0 6px;
}
.sectionhead h2{font-size:2rem;color:#262A2E;line-height:1.12;margin:0;max-width:860px}
.sectionhead .sectionsub{color:#4a515a;margin:8px 0 0;max-width:780px;font-size:1.04rem}

/* ============================================================
   CURING RACK WALL (.curingracks) staggered test cylinders
   NOT a uniform grid. Each rack row / shelf designed separately.
   ============================================================ */
.curingracks{
  max-width:1200px;margin:8px auto 38px;padding:16px 24px 8px;
}
.rackrow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:6px 0 14px;
}
.rackcard{position:relative;padding:74px 20px 18px;background:#F8F6EF;border:1px solid #DFDCD0;overflow:hidden}
.rackcard.ambercard{border-top:10px solid #C98A2E}
.rackcard.deepcard{background:#262B31;color:#EFEEE7}
.rackcard.deepcard .cylname,.rackcard.deepcard p{color:#EFEEE7}
.rackcard .cyltag{
  position:absolute;top:16px;left:16px;right:16px;height:58px;
  background:#ffffff;border:1px solid #cfc8ae;
  text-align:center;display:flex;flex-direction:column;justify-content:center;
}
.rackcard .cyltag h3{margin:0 0 4px;color:#262B31;font-size:1.12rem}
.rackcard .cyltag .datechip{color:#9E5A40;font-family:Arial,Helvetica,sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.rackcard p{margin:0;color:#41474f;font-size:.98rem}
.curetag{position:absolute;right:-8px;top:-8px;width:44px;height:64px;background:#9E5A40;color:#fff;font-family:Arial;font-size:.56rem;transform:rotate(12deg);display:flex;align-items:center;justify-content:center;text-align:center}
.thermo{height:30px;background:linear-gradient(90deg,#ffd94d,#ffd94d 62%,#e0a64d);border:1px solid #ffffff;color:#1e1406;font-family:Verdana,sans-serif;font-size:.78rem;letter-spacing:.1em;margin:14px 0 0;padding:4px 6px;border-radius:0 0 8px 8px;text-align:center}

/* make stagger heights differ per card */
.rr-mid .rackcard:nth-child(1){transform:translateY(0)}
.rr-mid .rackcard:nth-child(2){transform:translateY(20px)}
.rr-mid .rackcard:nth-child(3){transform:translateY(6px)}
.rr-low .rackcard:nth-child(1){transform:translateY(16px)}
.rr-low .rackcard:nth-child(2){transform:translateY(4px)}
.rr-low .rackcard:nth-child(3){transform:translateY(0)}

/* gap note: real content slab under rack */
.footnote .wherestart{font-size:.9rem;color:#333}
.note-endlink{color:#a35f0e}

/* ============================================================
   READY MIX LINE accent strip (.readymix)
   ============================================================ */
.readymix{
  background:#C98A2E;color:#f6f3e4;
  padding:24px 0;
}
.readymix .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.readymix h2{margin:0 0 4px;font-size:1.7rem;color:#f8f6ef}
.readymix p{margin:0;color:#fff8e6;max-width:620px}
.readyline-lede{font-weight:bold}
.readytag{font-family:Arial,Helvetica,sans-serif;background:#262B31;color:#EFEEE7;padding:10px 18px;border-radius:6px;letter-spacing:.04em;font-size:.82rem}
.readytag strong{color:#C98A2E}

/* ============================================================
   PROCESS & strip helpers for services page
   ============================================================ */
.procsteps{max-width:1100px;margin:40px auto;padding:0 24px}
.procgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.proccard{background:#F8F6EF;border:1px solid #DFDCD0;border-top:6px solid #C98A2E;padding:18px}
.proccard h3{margin:0 0 8px;color:#262B31;font-size:1.02rem}
.proccard p{margin:0;color:#41474f;font-size:.9rem}
.gutter{height:0}
.cta{max-width:1180px;margin:44px auto;padding:26px;background:#262B31;color:#EFEEE7;border-radius:4px}
.cta h2{margin:0 0 10px;font-size:1.9rem;color:#ffffff}
.cta p{margin:0 0 18px;max-width:780px;color:#d5dae0}
.cta .boltbtn{background:#C98A2E;color:#20242a}

/* Services intro grid of 6 service anchors (services page) */
.servlist{max-width:1200px;margin:26px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.servitem{position:relative;background:#F8F6EF;border:1px solid #DFDCD0;padding:70px 22px 18px;overflow:hidden}
.servitem .pin{position:absolute;top:16px;left:16px;background:#C98A2E;color:#262B31;font-family:Arial;font-weight:bold;padding:4px 8px;border-radius:4px}
.servitem h3{margin:0 0 8px;color:#262B31}
.servitem p{margin:0;color:#41474f}

/* CTA band row bottom of services */

/* ============================================================
   CONTACT specifics
   ============================================================ */
.contactgrid{max-width:1200px;margin:30px auto 10px;padding:0 24px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
.softcard{background:#F8F6EF;border:1px solid #DFDCD0;padding:22px;border-top:6px solid #C98A2E}
.info{background:#262B31;color:#EFEEE7;border:1px solid #0e1116;padding:22px;border-top:6px solid #C98A2E}
.info h3{color:#ffffff;margin:0 0 12px}
.infostack .kv{margin:0 0 18px}
.infostack h4{color:#C98A2E;font-family:Arial;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;margin:0 0 4px}
.infostack p{margin:0;color:#EFEEE7;word-break:break-word}
.hourscard{margin-top:2px;background:#F8F6EF;border:1px solid #DFDCD0;padding:18px}
.hourscard h4{margin:0 0 8px;color:#262B31;font-family:Arial;text-transform:uppercase;font-size:.8rem;letter-spacing:.1em}

/* form fields */
.field{margin:0 0 14px}
.field label{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:.84rem;color:#262B31;margin:0 0 4px}
.fieldlabel .req{color:#9E5A40}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;padding:10px 12px;border:1px solid #c9c2a6;background:#ffffff;
  color:#262A2E;font-family:Georgia,serif;font-size:1rem;border-radius:3px;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid #C98A2E;border-color:#C98A2E}

.faqcard{max-width:1200px;margin:14px auto 0;padding:0 24px;display:grid;gap:14px}
.faq{background:#F8F6EF;border:1px solid #DFDCD0;padding:18px}
.faq h3{margin:0 0 6px;color:#262B31;font-size:1.04rem}
.faq p{margin:0;color:#41474f}

/* ============================================================
   TROWEL SLAB FOOTER (.trowelslab)
   ============================================================ */
.trowelslab{background:#262B31;color:#EFEEE7;border-top:6px solid #C98A2E;position:relative;margin-top:56px}
/* faint swirl furrows across the top tape — two pre-blended slate solids,
   no transparency, no opacity decimals  */
.trowelslab:before{content:'';position:absolute;top:6px;left:0;right:0;height:6px;
  background:repeating-linear-gradient(0deg,#23282e 0 3px,#2b323a 3px 7px)}
.jointfelt{height:12px;width:100%;position:absolute;top:0;left:0;background:#8f6f42}
.footwrap{max-width:1200px;margin:0 auto;padding:36px 24px 20px;display:grid;grid-template-columns:1.3fr 2fr;gap:30px}
.footbrand .brandwordfoot{font-size:1.7rem;color:#ffffff;font-weight:bold;letter-spacing:.02em}
.footbrand h4{color:#ffffff;margin:0 0 10px;font-size:1.5rem}
.footbrand p{color:#d5dbe2;max-width:360px;font-size:.98rem}
.footgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.footcol h5,ul{margin:0;padding:0;list-style:none}
.footcol h5{color:#C98A2E;font-family:Arial;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;margin:0 0 8px}
.footcol a{display:block;padding:3px 0;color:#cfe0ec;font-size:.95rem}
.footcol a:hover{color:#ffffff;text-decoration:underline}
.seledge{margin-top:22px;border-top:1px solid #3c4450;padding-top:14px;max-width:1200px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
  color:#c9d3de}
.seledge .kv{font-family:Arial,Helvetica,sans-serif;font-size:.8rem;letter-spacing:.05em;margin:0}
.seledge .kv a{color:#C98A2E}
.chips{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;margin-bottom:10px}

/* ============================================================
   Misc keyline / fine helpers
   ============================================================ */
@media screen and (max-width:860px){
  .pourchute{grid-template-columns:1fr;padding-top:10px}
  .pourright{min-height:300px}
  .curingracks .rackrow{grid-template-columns:1fr}
  .rackrow .rackcard{transform:none !important}
  .procgrid{grid-template-columns:1fr 1fr}
  .servlist{grid-template-columns:1fr}
  .contactgrid{grid-template-columns:1fr}
  .footwrap{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .sectionhead h2{font-size:1.7rem}
  .pourleft h1{font-size:2.3rem}
  .readymix .wrap{flex-direction:column;text-align:center}
}
@media screen and (max-width:560px){
  .brow{padding:0 10px}
  .footgrid{grid-template-columns:1fr}
  .formpanel{position:relative}
  .procgrid{grid-template-columns:1fr}
  .menubtn{display:inline-block;margin:14px 8px;padding:8px 14px;background:#262B31;color:#EFEEE7;
    border:1px solid #0f1419;font-family:Arial,Helvetica,sans-serif;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
  .navbolts.open{display:flex}
  .navbolts{display:none}
}

/* very narrow: keep toggle working; wide tablet we rely on two-row wrap
   which appears naturally on flex-wrap between 561 and 840 (see 860 mq) */
@media screen and (max-width:560px){
  .formface{flex-wrap:wrap}
  .brandword{font-size:1.1rem}
}

/* on brand/level top note:
   tablets two-row wrap already handled above; add breathing room   */
@media screen and (max-width:860px) and (min-width:561px){
  .pourright{min-height:330px}
}