/* ===== BEC Concrete — shared styles =====
   Brand: graphite #232830 + construction amber #E89A3C + steel #2E3742 + warm sand #F4F0E9
   Fonts: Archivo (display) + Inter (body) */

:root{
  --ink:#232830; --ink-2:#181B20; --amber:#E89A3C; --amber-d:#9E5A12;
  --steel:#2E3742; --sand:#F4F0E9; --sand-2:#E9E3D7; --body:#23262B; --muted:#6B6E74;
  --amber-pale:#F6E6CE; --rule:#D9D3C7; --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;color:var(--body);background:var(--sand);-webkit-font-smoothing:antialiased;margin:0;}
h1,h2,h3,.font-display{font-family:'Archivo','Inter',system-ui,sans-serif;}
.tracking-tightish{letter-spacing:-0.025em;}

.hero-bg{
  background:
    radial-gradient(820px 480px at 82% 2%, rgba(232,154,60,0.22), transparent 60%),
    radial-gradient(680px 560px at 2% 96%, rgba(46,55,66,0.60), transparent 62%),
    linear-gradient(160deg,#272C34 0%,#232830 52%,#181B20 100%);
}
.grain{position:absolute;inset:0;opacity:.055;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.shadow-soft{box-shadow:0 1px 2px rgba(24,27,32,.06),0 10px 24px -8px rgba(24,27,32,.18);}
.shadow-card{box-shadow:0 1px 2px rgba(24,27,32,.05),0 18px 40px -16px rgba(24,27,32,.26);}
.shadow-cta{box-shadow:0 8px 24px -6px rgba(232,154,60,.5);}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;border-radius:9999px;
  transition:transform .25s var(--ease-spring),box-shadow .25s ease,background-color .2s ease;cursor:pointer;text-decoration:none;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:var(--amber);color:#221B10;padding:.9rem 1.6rem;}
.btn-primary:hover{background:#F2A94D;transform:translateY(-2px);box-shadow:0 12px 30px -6px rgba(232,154,60,.6);}
.btn-primary:focus-visible{outline:3px solid #F6D29A;outline-offset:3px;}
.btn-ghost{border:1.5px solid rgba(244,240,233,.38);color:var(--sand);padding:.85rem 1.5rem;}
.btn-ghost:hover{background:rgba(244,240,233,.08);border-color:rgba(244,240,233,.7);transform:translateY(-2px);}
.btn-ghost:focus-visible{outline:3px solid rgba(244,240,233,.6);outline-offset:3px;}

.svc-card{transition:transform .3s var(--ease-spring),box-shadow .3s ease,border-color .3s ease;}
.svc-card:hover{transform:translateY(-6px);border-color:var(--amber);}
.svc-ico{transition:transform .3s var(--ease-spring);}
.svc-card:hover .svc-ico{transform:scale(1.1) rotate(-4deg);}

.area-chip{transition:background-color .2s,color .2s,transform .2s;}
.area-chip:hover{background:var(--ink);color:var(--sand);transform:translateY(-2px);}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s var(--ease-spring);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

.skip-link{position:absolute;left:-999px;top:0;z-index:100;}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:.5rem;}

.field{width:100%;padding:.8rem 1rem;border:1.5px solid var(--rule);border-radius:.75rem;background:#fff;
  font-size:1rem;transition:border-color .2s,box-shadow .2s;font-family:inherit;}
.field:focus{border-color:var(--amber-d);box-shadow:0 0 0 3px rgba(232,154,60,.22);outline:none;}
.field.invalid{border-color:#C0433B;box-shadow:0 0 0 3px rgba(192,67,59,.15);}

/* inner-page hero banner */
.page-hero{position:relative;overflow:hidden;padding:8.5rem 0 3.5rem;}
@media(min-width:640px){.page-hero{padding:10rem 0 4.5rem;}}
.breadcrumb a{color:var(--amber);}
.breadcrumb a:hover{text-decoration:underline;}

/* services detail rows */
.svc-row{display:grid;gap:2rem;align-items:center;padding:2.2rem 0;border-top:1px solid var(--rule);}
@media(min-width:900px){.svc-row{grid-template-columns:1fr 1fr;gap:3.5rem;}.svc-row.flip .svc-row-media{order:2;}}
.svc-row-media{border-radius:1rem;overflow:hidden;}
.svc-row ul{margin:1rem 0 0;padding-left:1.1rem;}
.svc-row li{margin:.35rem 0;color:var(--muted);}
.svc-row li::marker{color:var(--amber-d);}
.step-num{font-family:'Archivo',sans-serif;font-weight:800;color:var(--amber-d);}
