/* ============================================================
   SO CAL BOBCAT & SKAGGS CONCRETE CUTTING
   Shared stylesheet — used by every page on the site.
   Edit colors, fonts and spacing here once and every page updates.
   ============================================================ */

:root{
  --ink:#12141a;
  --slab:#1c2028;
  --steel:#5a6272;
  --line:#d8d4cc;
  --dust:#f3f1ed;
  --paper:#ffffff;
  --cut:#eb4707;
  --cut-dark:#c53c05;

  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;

  --wrap:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4,.display{
  font-family:var(--display);text-transform:uppercase;
  line-height:.98;letter-spacing:.01em;font-weight:700;
}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:1.4rem;font-weight:600;letter-spacing:.02em}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cut);font-weight:500;margin-bottom:14px;
}

/* ---------- SKIP LINK ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:10px 16px;z-index:300}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--ink);color:#fff;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{text-decoration:none}
.topbar a:hover{color:var(--cut)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand .mark{width:40px;height:40px;flex:none;background:var(--cut);display:grid;place-items:center;
  color:#fff;font-family:var(--display);font-weight:700;font-size:1.15rem}
.brand .name{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.05;text-transform:uppercase}
.brand .name span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  color:var(--steel);text-transform:uppercase;font-weight:400;margin-top:3px}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{text-decoration:none;font-size:.85rem;font-weight:500;padding:4px 0;
  border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a[aria-current=page]{border-bottom-color:var(--cut)}
.navcall{background:var(--cut);color:#fff;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;
  padding:11px 20px;white-space:nowrap}
.navcall:hover{background:var(--cut-dark)}
.navtoggle{display:none;background:none;border:1px solid var(--line);padding:9px 13px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;cursor:pointer;text-transform:uppercase}
@media(max-width:960px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:10px 24px 18px}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px solid var(--dust);width:100%}
  .navtoggle{display:block}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;text-decoration:none;font-family:var(--display);
  text-transform:uppercase;font-weight:700;font-size:1.05rem;letter-spacing:.04em;padding:15px 30px}
.btn-primary{background:var(--cut);color:#fff}
.btn-primary:hover{background:var(--cut-dark)}
.btn-ghost{border:1px solid rgba(255,255,255,.42);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{border:1px solid var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:#fff}

/* ---------- HERO (video) ---------- */
.hero{position:relative;background:var(--slab);color:#fff;overflow:hidden;min-height:clamp(480px,72vh,720px);
  display:flex;align-items:center}
.hero video,.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(12,14,18,.92) 0%,rgba(12,14,18,.72) 45%,rgba(12,14,18,.42) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:70px;padding-bottom:70px;width:100%}
.hero h1{font-size:clamp(2.6rem,7vw,5.6rem);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--cut)}
.hero p.lede{margin-top:22px;max-width:50ch;font-size:1.12rem;color:#d9dce2}
.herocta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* page hero (non-video, inner pages) */
.pagehero{background:var(--slab);color:#fff;position:relative;overflow:hidden}
.pagehero::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 74px)}
.pagehero .wrap{position:relative;z-index:2;padding-top:74px;padding-bottom:74px}
.pagehero h1{font-size:clamp(2.3rem,6vw,4.2rem);max-width:18ch}
.pagehero p{margin-top:18px;max-width:56ch;color:#b9bfca;font-size:1.06rem}

/* ---------- PROOF STRIP ---------- */
.proof{background:var(--ink);color:#fff}
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding-top:0;padding-bottom:0}
.proof .cell{padding:34px 24px 34px 0}
.proof .n{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;color:#fff}
.proof .n small{font-size:.42em;letter-spacing:.04em}
.proof .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8d95a2;margin-top:9px}
@media(max-width:780px){.proof .wrap{grid-template-columns:repeat(3,1fr)}.proof .cell{padding:26px 12px 26px 0}}
@media(max-width:520px){.proof .wrap{grid-template-columns:1fr}.proof .cell{padding:20px 0}}

/* ---------- SECTIONS ---------- */
section{padding:84px 0}
.sec-dust{background:var(--dust)}
.sec-ink{background:var(--ink);color:#fff}
.sec-head{max-width:62ch;margin-bottom:50px}
.sec-head p{margin-top:16px;color:var(--steel);font-size:1.05rem}
.sec-ink .sec-head p{color:#a6adb8}

/* ---------- SERVICES GRID ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.svc article{background:var(--paper);padding:32px 28px;display:flex;flex-direction:column}
.svc .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--cut);margin-bottom:14px}
.svc h3{margin-bottom:12px}
.svc p{font-size:.95rem;color:var(--steel);line-height:1.6}
.svc ul{margin-top:16px;padding:0;list-style:none}
.svc li{font-size:.88rem;padding:6px 0 6px 16px;position:relative;border-top:1px solid var(--dust)}
.svc li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:2px;background:var(--cut)}

/* ---------- CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chips span{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;border:1px solid var(--line);
  padding:7px 13px;color:var(--steel);background:var(--paper)}
.sec-ink .chips span{border-color:rgba(255,255,255,.2);color:#c6cbd3;background:transparent}

/* ---------- PROJECT CARDS ---------- */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.projects a.card,.projects .card{background:var(--paper);border:1px solid var(--line);
  text-decoration:none;display:block;color:inherit}
.projects .shot{aspect-ratio:16/10;overflow:hidden;background:var(--dust)}
.projects .shot img,.projects .shot video{width:100%;height:100%;object-fit:cover}
.projects .ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:20px;
  background:repeating-linear-gradient(45deg,#e7e4de 0 12px,#edebe6 12px 24px);
  color:var(--steel);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.projects .meta{padding:20px 22px}
.projects .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cut);margin-bottom:8px}
.projects .meta strong{font-family:var(--display);text-transform:uppercase;font-size:1.2rem;
  font-weight:600;display:block;letter-spacing:.02em}
.projects .meta span{font-size:.88rem;color:var(--steel);display:block;margin-top:6px}

/* ---------- TESTIMONIALS ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.quotes blockquote{background:var(--paper);border:1px solid var(--line);padding:30px 28px;position:relative}
.quotes blockquote::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--cut)}
.quotes p{font-size:1rem;line-height:1.65}
.quotes footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--dust);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.quotes footer b{display:block;color:var(--ink);font-weight:500;margin-bottom:3px}

/* ---------- BUILD NOTE (visible reminder, delete when filled) ---------- */
.buildnote{background:#fffbe8;border:1px dashed #d9b23a;padding:16px 18px;
  font-family:var(--mono);font-size:.78rem;line-height:1.6;color:#7a5f10;margin-bottom:26px}

/* ---------- TRUST / WHY GRID ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px}
.why h3{margin-bottom:11px;font-size:1.22rem}
.why p{font-size:.96rem;color:var(--steel)}
.sec-ink .why p{color:#a6adb8}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--display);text-transform:uppercase;font-size:1.18rem;font-weight:600;
  letter-spacing:.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cut);font-family:var(--body);font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:14px;color:var(--steel);font-size:.98rem;max-width:70ch}

/* ---------- CTA BAND ---------- */
.cta{background:var(--cut);color:#fff;padding:64px 0}
.cta h2{max-width:20ch}
.cta p{margin-top:14px;max-width:52ch;color:#ffe4d8;font-size:1.06rem}
.cta .row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.cta .btn-white{background:#fff;color:var(--cut)}
.cta .btn-white:hover{background:var(--ink);color:#fff}
.cta .btn-outline{border:1px solid rgba(255,255,255,.6);color:#fff}
.cta .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- CONTACT ---------- */
.contactgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px}
@media(max-width:880px){.contactgrid{grid-template-columns:1fr;gap:40px}}
.infoblock{margin-bottom:28px}
.infoblock .lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cut);margin-bottom:8px}
.infoblock .val{font-size:1.04rem;line-height:1.55}
.infoblock .val a{text-decoration:none;border-bottom:1px solid var(--line)}
.infoblock .val a:hover{border-bottom-color:var(--cut)}
.bigphone{font-family:var(--display);font-size:2.4rem;font-weight:700;text-decoration:none;display:inline-block}
.bigphone:hover{color:var(--cut)}

form{background:var(--paper);border:1px solid var(--line);padding:30px 28px}
.field{margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.two{grid-template-columns:1fr;gap:0}}
label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin-bottom:7px}
input,select,textarea{width:100%;font-family:var(--body);font-size:.98rem;padding:12px 14px;
  border:1px solid var(--line);background:#fdfdfc;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cut);outline-offset:1px;border-color:var(--cut)}
textarea{min-height:130px;resize:vertical}
button[type=submit]{width:100%;background:var(--cut);color:#fff;border:0;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:1.1rem;
  letter-spacing:.04em;padding:15px}
button[type=submit]:hover{background:var(--cut-dark)}
.formnote{font-size:.8rem;color:var(--steel);margin-top:12px;line-height:1.5}

/* Honeypot — hidden from people, still reachable by bots that fill everything. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important;pointer-events:none}

/* ---------- FORM STATUS (see form.js) ---------- */
.formstatus{font-size:.92rem;line-height:1.6;margin-top:16px}
.formstatus:empty{display:none}
.formstatus a{color:inherit;font-weight:600}
.formstatus.is-pending{color:var(--steel)}
.formstatus.is-ok{border-left:3px solid var(--cut);background:var(--dust);
  color:var(--ink);padding:16px 18px;margin-top:0}
.formstatus.is-error{border-left:3px solid var(--cut);background:#fdf0ea;
  color:var(--ink);padding:14px 16px}
button[type=submit]:disabled{background:var(--steel);cursor:default}
/* glass pages put forms on dark video — keep these legible there too */
body.glass .formstatus.is-ok,
body.glass .formstatus.is-error{background:rgba(0,0,0,.34);color:#f2f4f7}
body.glass .formstatus.is-pending{color:#c9d0d8}

/* ---------- FOOTER ---------- */
footer.site{background:var(--ink);color:#fff;padding:56px 0 28px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
@media(max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr}}
footer.site h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cut);margin-bottom:14px;font-weight:500}
footer.site a{color:#c6cbd3;text-decoration:none;display:block;padding:4px 0;font-size:.92rem}
footer.site a:hover{color:#fff}
footer.site p{color:#98a0ac;font-size:.92rem}
.lic{font-family:var(--mono);font-size:.76rem;color:#98a0ac;letter-spacing:.04em;line-height:1.9;margin-top:14px}
.social{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.social a{border:1px solid rgba(255,255,255,.22);padding:8px 14px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;display:inline-block}
.social a:hover{border-color:var(--cut);color:#fff}
.footbottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.05em;color:#7b8390}

/* ---------- MAP BLOCK (placeholder until Google embed is added) ---------- */
.mapblock{
  border:1px solid var(--line);
  background:var(--paper);
  display:grid;place-items:center;
  padding:56px 24px;
}
.mapinner{text-align:center;max-width:460px}
.mapaddr{
  font-family:var(--display);text-transform:uppercase;
  font-size:1.6rem;line-height:1.15;font-weight:600;letter-spacing:.02em;
}
.maphours{margin-top:14px;color:var(--steel);font-size:.94rem;line-height:1.7}
.maprow{display:flex;gap:12px;margin-top:26px;justify-content:center;flex-wrap:wrap}
.maprow .btn{font-size:.95rem;padding:12px 22px}


/* ============================================================
   GLASS MODE — fixed background video, content scrolls over it
   Applied only to the home page via <body class="glass">.
   To turn it off, remove class="glass" from index.html's <body>.
   ============================================================ */

body.glass{background:var(--ink);position:relative}

/* the fixed video layer that sits behind everything */
.bgvideo{
  position:fixed;inset:0;z-index:-2;
  width:100%;height:100%;overflow:hidden;
}
.bgvideo video{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
/* darkening layer so text stays readable over any frame */
.bgvideo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,16,.55) 0%,rgba(10,12,16,.45) 45%,rgba(10,12,16,.5) 100%);
}

/* hero sits directly on the video — no panel, no background */
body.glass .hero{
  background:transparent;min-height:clamp(520px,86vh,860px);
}
/* On desktop the hero shows the fixed background video through it, so its own
   video and scrim are hidden. Scoped to >760px so phones (which have no fixed
   background video) can still play the hero clip. */
@media(min-width:761px){
  body.glass .hero video,
  body.glass .hero .scrim{display:none}
}

/* every scrolling section becomes a translucent dark panel */
body.glass section,
body.glass .proof,
body.glass .cta,
body.glass footer.site{
  background:rgba(16,19,25,.42);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  border-top:1px solid rgba(255,255,255,.08);
  color:#fff;
}
body.glass .cta{
  background:rgba(200,60,8,.82);
  border-top:1px solid rgba(255,255,255,.16);
}
body.glass .sec-dust,
body.glass .sec-ink{background:rgba(16,19,25,.42)}

/* Panels are translucent, so text gets a soft shadow to stay readable
   over whatever frame of video is behind it. */
body.glass h1,body.glass h2,body.glass h3,body.glass h4,
body.glass p,body.glass li,body.glass summary,body.glass .n,body.glass .l{
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* headings and body copy on glass */
body.glass h2,body.glass h3,body.glass h4{color:#fff}
body.glass .sec-head p{color:#dde2e8}
body.glass .why p{color:#dde2e8}

/* nav and top bar go translucent too */
body.glass .nav{
  background:rgba(14,16,21,.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
body.glass .nav .brand .name{color:#fff}
body.glass .nav .brand .name span{color:#c3cad3}
body.glass .navlinks a{color:#f0f2f5}
body.glass .navtoggle{color:#fff;border-color:rgba(255,255,255,.25)}
@media(max-width:960px){
  body.glass .navlinks{background:rgba(14,16,21,.96)}
  body.glass .navlinks a{border-bottom-color:rgba(255,255,255,.1)}
}
body.glass .topbar{background:rgba(10,12,16,.86);backdrop-filter:blur(12px)}

/* service cards — glass tiles instead of solid white */
body.glass .svc{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
body.glass .svc article{background:rgba(18,22,29,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.glass .svc h3{color:#fff}
body.glass .svc p{color:#d7dce3}
body.glass .svc li{color:#eaedf1;border-top-color:rgba(255,255,255,.08)}

/* project cards */
body.glass .projects .card{
  background:rgba(18,22,29,.6);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
body.glass .projects .meta strong{color:#fff}
body.glass .projects .meta span{color:#d7dce3}
body.glass .projects .shot{background:rgba(255,255,255,.05)}

/* chips */
body.glass .chips span{
  border-color:rgba(255,255,255,.28);color:#e2e6ec;background:rgba(255,255,255,.08);
}

/* FAQ */
body.glass .faq details{border-top-color:rgba(255,255,255,.14)}
body.glass .faq details:last-child{border-bottom-color:rgba(255,255,255,.14)}
body.glass .faq summary{color:#fff}
body.glass .faq details p{color:#dde2e8}

/* buttons that assumed a light background */
body.glass .btn-dark{border-color:rgba(255,255,255,.45);color:#fff}
body.glass .btn-dark:hover{background:#fff;color:var(--ink)}

/* proof strip loses its solid fill — it's a panel now */
body.glass .proof .l{color:#c3cad3}

/* footer */
body.glass footer.site p{color:#c3cad3}
body.glass footer.site a{color:#dde2e8}

/* Safari and older browsers with no backdrop-filter get solid panels
   instead of see-through ones, so text never sits on raw video. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.glass section,
  body.glass .proof,
  body.glass footer.site,
  body.glass .nav{background:rgba(16,19,25,.96)}
  body.glass .svc article,
  body.glass .projects .card{background:rgba(20,24,31,.96)}
}

/* Phones: fixed-position video is unreliable on iOS and eats battery.
   Fall back to a static dark background and hide the video entirely. */
/* PHONES
   position:fixed video is unreliable on iOS (Safari pauses it, and it costs
   battery), so on small screens the background video becomes absolute instead
   of fixed — it sits at the top of the page and scrolls away rather than
   staying pinned. Panels below it fall back to solid dark so text stays
   readable once the video has scrolled past. */
@media(max-width:760px){
  body.glass{background:var(--ink)}
  .bgvideo{
    position:absolute;top:0;left:0;right:0;
    height:70vh;                /* covers the hero area, then scrolls away */
    bottom:auto;
  }
  .bgvideo::after{
    background:linear-gradient(180deg,rgba(10,12,16,.5) 0%,rgba(10,12,16,.65) 70%,rgba(16,19,25,1) 100%);
  }
  /* below the video, panels go solid — nothing to see through to */
  body.glass section,
  body.glass .proof,
  body.glass footer.site,
  body.glass .nav{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(16,19,25,.94);
  }
  body.glass .cta{background:rgba(200,60,8,.96)}
  body.glass .sec-dust,
  body.glass .sec-ink{background:rgba(16,19,25,.94)}
  body.glass .svc article,
  body.glass .projects .card{
    background:rgba(22,26,34,.96);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  body.glass .hero{
    min-height:clamp(440px,66vh,600px);
    background:transparent;
  }
  /* the hero's own video stays hidden on mobile too — the absolute background
     video above is doing the work */
  body.glass .hero video,
  body.glass .hero .scrim{display:none}
}

/* Respect reduced-motion: stop the background video from autoplaying */
@media (prefers-reduced-motion:reduce){
  .bgvideo video{display:none}
  .bgvideo{background:var(--slab)}
}


/* ---------- GLASS: inner-page elements ---------- */

/* inner page hero sits on the video like the home hero does */
body.glass .pagehero{background:transparent}
body.glass .pagehero::after{display:none}

/* forms become glass panels */
body.glass form{
  background:rgba(18,22,29,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.14);
}
body.glass label{color:#c3cad3}
body.glass input,
body.glass select,
body.glass textarea{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
body.glass input::placeholder,
body.glass textarea::placeholder{color:#9aa3b0}
body.glass select option{background:#151920;color:#fff}
body.glass .formnote{color:#c9d0d8}

/* contact info blocks */
body.glass .infoblock .val{color:#eef1f4}
body.glass .infoblock .val a{border-bottom-color:rgba(255,255,255,.25)}
body.glass .bigphone{color:#fff}
body.glass .bigphone:hover{color:var(--cut)}

/* map block */
body.glass .mapblock{
  background:rgba(18,22,29,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.14);
}
body.glass .mapaddr{color:#fff}
body.glass .maphours{color:#c9d0d8}

/* testimonial blockquotes, if that section is ever turned on */
body.glass .quotes blockquote{
  background:rgba(18,22,29,.62);
  backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.14);
}
body.glass .quotes p{color:#eef1f4}
body.glass .quotes footer{
  color:#a8b0bc;border-top-color:rgba(255,255,255,.12);
}
body.glass .quotes footer b{color:#fff}

/* no-backdrop-filter fallback for the new pieces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.glass form,
  body.glass .mapblock,
  body.glass .quotes blockquote{background:rgba(20,24,31,.96)}
}

/* phones: no fixed video on inner pages either */
@media(max-width:760px){
  body.glass .pagehero{background:var(--slab)}
  body.glass .pagehero::after{display:block}
  body.glass form,
  body.glass .mapblock{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,24,31,.94)}
}


/* ---------- MUTED TEXT ----------
   Use class="muted" for secondary copy instead of an inline color, so it can
   adapt between the light and glass themes. */
.muted{color:var(--steel)}
body.glass .muted{color:#d7dce3}
body.glass .muted a{color:#fff}