/* =====================================================================
   A MASONRY COMPANY  —  "POURED & SET" BRUTALIST DESIGN SYSTEM
   Shared across every page. Heavy, tactile, industrial-craft.
   Type: Archivo Black (slab) / Manrope (body) / Spline Sans Mono (spec)
   ===================================================================== */
:root{
  --c-light: #D6D5CF;   /* light concrete */
  --c-mid:   #B4B2A9;   /* mid concrete */
  --c-warm:  #C9C4B8;   /* warm concrete */
  --c-grey:  #6E6C64;   /* deep grey */
  --c-black: #2C2B27;   /* near-black slab */
  --c-ink:   #1C1B18;   /* darkest ink */

  --yellow:    #F2C200; /* caution accent — sparing */
  --yellow-dk: #D6AB00;

  --line:   #9C9A90;    /* hairline on light concrete */
  --line-d: rgba(255,255,255,.14); /* hairline on dark */
  --dim-d:  #B7B4A9;    /* muted text on dark (AA on near-black) */
  --dim-l:  #4A4840;    /* muted text on light (AA on light concrete) */
  --mono-d: #C2BFB4;    /* mono labels on dark slab (AA: 7.0:1 on #2C2B27) */
  --gold-d: #6A5400;    /* darker gold for stars on light concrete (AA 4.96:1) */

  --slab: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;

  --shell: 1280px;
  --gut: clamp(1.15rem, 4.5vw, 3.4rem);
  --ease: cubic-bezier(.2,.7,.2,1);

  /* the concrete texture — layered aggregate speckle + a faint poured wash. */
  --aggregate:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,.05) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 62% 47%, rgba(0,0,0,.045) 0 .9px, transparent 1.4px),
    radial-gradient(circle at 83% 78%, rgba(255,255,255,.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 88%, rgba(0,0,0,.04) 0 1px, transparent 1.5px),
    radial-gradient(circle at 8% 70%, rgba(255,255,255,.22) 0 .8px, transparent 1.3px);
  --aggregate-size: 27px 31px, 41px 37px, 53px 49px, 33px 29px, 47px 43px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--c-light);
  color:var(--c-ink);
  font-family:var(--body); font-size:1.04rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:var(--aggregate);
  background-size:var(--aggregate-size);
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; }
::selection{ background:var(--yellow); color:#000; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--gut); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--yellow); color:#000; font-family:var(--mono); font-weight:600; font-size:13px; padding:10px 16px; text-decoration:none; }
.skip:focus{ top:10px; }

/* shared slab-texture surfaces */
.tex{ background-image:var(--aggregate); background-size:var(--aggregate-size); }
.tex-dark{
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 58%, rgba(255,255,255,.04) 0 .9px, transparent 1.4px),
    radial-gradient(circle at 88% 18%, rgba(0,0,0,.4) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 12% 82%, rgba(255,255,255,.035) 0 .8px, transparent 1.3px);
  background-size:37px 41px, 53px 47px, 31px 35px, 49px 43px;
}

/* reveal — slab settles in */
html.js [data-rise]{ opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
html.js [data-rise].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js [data-rise]{ opacity:1 !important; transform:none !important; } }

/* the signature: a thick caution-stripe edge */
.edge{ height:12px; background:repeating-linear-gradient(45deg, var(--yellow) 0 18px, var(--c-black) 18px 36px); }
.edge--thin{ height:7px; }

/* ---------- TOP STRIP ---------- */
.strip{ background:var(--c-black); color:var(--c-light); }
.strip .shell{ display:flex; align-items:center; gap:.5rem 1.5rem; flex-wrap:wrap; padding-block:.55rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; }
.strip .yk{ color:var(--yellow); font-weight:600; text-transform:uppercase; letter-spacing:.12em; }
.strip .sep{ opacity:.3; }
.strip a{ color:var(--yellow); text-decoration:none; font-weight:600; margin-left:auto; }
.strip a:hover{ color:#fff; }
@media (max-width:680px){ .strip .hide-sm{ display:none; } .strip a{ margin-left:0; } }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:60; background:var(--c-black); border-bottom:3px solid var(--yellow); }
.nav .shell{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:74px; }
.brand{ display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--c-light); }
.brand .mk{ width:44px; height:44px; flex:none; }
.brand b{ font-family:var(--slab); font-size:1.12rem; letter-spacing:-.005em; text-transform:uppercase; line-height:.92; display:block; }
.brand small{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-d); margin-top:5px; }
.nlinks{ display:none; gap:2.1rem; list-style:none; margin:0; padding:0; }
@media (min-width:980px){ .nlinks{ display:flex; } }
.nlinks a{ font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--dim-d); padding-bottom:3px; border-bottom:2px solid transparent; }
.nlinks a:hover{ color:var(--yellow); border-bottom-color:var(--yellow); }
.nlinks a[aria-current="page"]{ color:var(--yellow); border-bottom-color:var(--yellow); }
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--slab); text-transform:uppercase; letter-spacing:0; font-size:.9rem; text-decoration:none; cursor:pointer; border:0; border-radius:0; transition:transform .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease); }
.btn--yellow{ background:var(--yellow); color:var(--c-ink); padding:.78rem 1.2rem; font-size:.92rem; }
.btn--yellow:hover{ background:#fff; transform:translateY(-2px); }
.btn--slab{ background:var(--c-black); color:var(--c-light); padding:.78rem 1.2rem; font-size:.92rem; border:2px solid var(--c-black); }
.btn--slab:hover{ background:transparent; color:var(--c-black); }
.btn--out{ background:transparent; color:var(--c-light); border:2px solid var(--line-d); padding:.78rem 1.2rem; font-size:.92rem; }
.btn--out:hover{ border-color:var(--yellow); color:var(--yellow); }
.nav .btn--yellow{ display:none; }
@media (min-width:980px){ .nav .btn--yellow{ display:inline-flex; } }
.burger{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:transparent; border:2px solid var(--line-d); color:var(--c-light); cursor:pointer; }
@media (min-width:980px){ .burger{ display:none; } }
.burger span, .burger span::before, .burger span::after{ display:block; width:24px; height:3px; background:currentColor; }
.burger span{ position:relative; }
.burger span::before, .burger span::after{ content:""; position:absolute; left:0; transition:transform .25s var(--ease), top .25s var(--ease); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.nav.open .burger span{ background:transparent; }
.nav.open .burger span::before{ top:0; transform:rotate(45deg); }
.nav.open .burger span::after{ top:0; transform:rotate(-45deg); }
/* mobile drawer */
.drawer{ position:fixed; inset:74px 0 0; z-index:55; background:var(--c-black); transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease); padding:2.2rem var(--gut) 2.5rem; display:flex; flex-direction:column; gap:.2rem; }
.drawer.tex-dark{ background-color:var(--c-black); }
.drawer.open{ opacity:1; visibility:visible; transform:none; }
body.lock{ overflow:hidden; }
.drawer a.dl{ font-family:var(--slab); font-size:1.85rem; text-transform:uppercase; text-decoration:none; color:var(--c-light); padding:.6rem 0; border-bottom:1px solid var(--line-d); letter-spacing:-.01em; line-height:1.04; }
.drawer a.dl:hover{ color:var(--yellow); }
.drawer a.dl[aria-current="page"]{ color:var(--yellow); }
.drawer .dfoot{ margin-top:auto; display:flex; flex-direction:column; gap:1rem; padding-top:1.6rem; }
.drawer .dcall{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-d); text-decoration:none; }
.drawer .dcall b{ display:block; font-family:var(--slab); font-size:1.7rem; color:var(--yellow); letter-spacing:-.005em; margin-top:.3rem; }
@media (min-width:980px){ .drawer{ display:none; } }

/* ---------- HERO ---------- */
.hero{ position:relative; background:var(--c-black); color:var(--c-light); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; opacity:.9;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 58%, rgba(255,255,255,.04) 0 .9px, transparent 1.4px),
    radial-gradient(circle at 88% 18%, rgba(0,0,0,.5) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 12% 82%, rgba(255,255,255,.035) 0 .8px, transparent 1.3px);
  background-size:37px 41px, 53px 47px, 31px 35px, 49px 43px;
  pointer-events:none;
}
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .hero__grid{ grid-template-columns:1.15fr .85fr; align-items:stretch; } }
.hero__copy{ padding:clamp(2.6rem,6vw,5.5rem) 0 clamp(2.8rem,6vw,5rem); }
.hero__tag{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); border:1px solid var(--line-d); padding:.45rem .85rem; margin-bottom:1.8rem; }
.hero h1{ font-family:var(--slab); font-size:clamp(3rem,11vw,7.4rem); line-height:.92; letter-spacing:-.02em; text-transform:uppercase; }
.hero h1 .y{ color:var(--yellow); }
.hero h1 .out{ -webkit-text-stroke:3px var(--c-light); color:transparent; text-shadow:none; }
.hero__sub{ max-width:44ch; color:var(--dim-d); font-size:1.12rem; line-height:1.6; margin:1.9rem 0 2.2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__phone{ display:inline-flex; align-items:center; gap:.9rem; background:var(--yellow); color:var(--c-ink); text-decoration:none; padding:.95rem 1.4rem; transition:transform .12s var(--ease), background-color .12s var(--ease); }
.hero__phone:hover{ background:#fff; transform:translateY(-2px); }
.hero__phone .l{ font-family:var(--mono); font-weight:500; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; display:block; opacity:.75; }
.hero__phone .n{ font-family:var(--slab); font-size:1.4rem; line-height:1.05; letter-spacing:-.01em; display:block; margin-top:.22rem; }
.hero__img{ position:relative; min-height:300px; border-left:none; }
@media (min-width:900px){ .hero__img{ border-left:4px solid var(--yellow); } }
.hero__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.06) brightness(.92); }
.hero__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--c-black) 0%, rgba(44,43,39,.18) 38%, rgba(44,43,39,.04) 100%); }
@media (max-width:899px){ .hero__img{ min-height:340px; order:-1; } .hero__img::after{ background:linear-gradient(0deg, var(--c-black) 2%, rgba(44,43,39,.1) 60%); } }
.hero__stamp{ position:absolute; right:1.2rem; bottom:1.4rem; z-index:3; font-family:var(--mono); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink); background:var(--yellow); padding:.4rem .7rem; }
.hero__edge{ position:absolute; left:0; right:0; bottom:0; z-index:4; }

/* ---------- PAGE HEAD (interior pages) ---------- */
.phead{ position:relative; background:var(--c-black); color:var(--c-light); overflow:hidden; }
.phead .shell{ position:relative; z-index:2; padding-block:clamp(2.8rem,6vw,4.6rem); }
.phead__kick{ font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); display:flex; align-items:center; gap:.6rem; }
.phead__kick::before{ content:""; width:28px; height:2px; background:var(--yellow); }
.phead h1{ font-family:var(--slab); font-size:clamp(2.6rem,9vw,5.6rem); text-transform:uppercase; line-height:.94; letter-spacing:-.02em; margin:1.1rem 0 .4rem; }
.phead h1 .y{ color:var(--yellow); }
.phead h1 .out{ -webkit-text-stroke:3px var(--c-light); color:transparent; }
.phead__sub{ max-width:52ch; color:var(--dim-d); font-size:1.1rem; line-height:1.6; margin:1.4rem 0 0; }
.phead__edge{ position:absolute; left:0; right:0; bottom:0; z-index:4; }
.crumb{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim-d); }
.crumb a{ color:var(--dim-d); text-decoration:none; }
.crumb a:hover{ color:var(--yellow); }
.crumb b{ color:var(--c-light); font-weight:600; }

/* ---------- SPEC SHEET (by the numbers) ---------- */
.spec{ background:var(--c-black); color:var(--c-light); border-top:none; }
.spec .shell{ padding-block:clamp(2.4rem,5vw,3.4rem); }
.spec__head{ font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-d); display:flex; align-items:center; gap:.7rem; margin-bottom:1.8rem; }
.spec__head::before{ content:""; width:30px; height:2px; background:var(--yellow); }
.spec__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
@media (min-width:760px){ .spec__grid{ grid-template-columns:repeat(4,1fr); } }
.spec__cell{ background:var(--c-black); padding:1.5rem 1.4rem; position:relative; }
.spec__cell .v{ font-family:var(--slab); font-size:clamp(2.2rem,5.4vw,3.1rem); line-height:.95; letter-spacing:-.015em; display:flex; align-items:baseline; }
.spec__cell .v .y{ color:var(--yellow); }
.spec__cell .k{ font-family:var(--mono); font-weight:500; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-d); margin-top:.8rem; display:block; }
.spec__cell .u{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--mono-d); display:block; margin-top:.3rem; }

/* ---------- SERVICE STACK (the signature) ---------- */
.svc{ background:var(--c-light); }
.svc .shell{ padding-block:clamp(3.4rem,7vw,5.5rem); }
.sec-kick{ font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim-l); display:flex; align-items:center; gap:.6rem; }
.sec-kick::before{ content:""; width:28px; height:2px; background:var(--yellow); }
.svc h2{ font-family:var(--slab); font-size:clamp(2.2rem,7vw,4.2rem); text-transform:uppercase; line-height:.98; letter-spacing:-.02em; margin:1rem 0 .6rem; }
.svc__lead{ color:var(--dim-l); max-width:50ch; margin:0 0 2.8rem; font-size:1.08rem; }
.svc__stack{ border-top:3px solid var(--c-ink); }
.sblock{ display:grid; grid-template-columns:auto 1fr; gap:0 1.4rem; align-items:start; padding:1.7rem 0; border-bottom:1px solid var(--line); position:relative; cursor:default; transition:background-color .2s var(--ease), padding-left .2s var(--ease); }
@media (min-width:760px){ .sblock{ grid-template-columns:auto 1fr auto; align-items:center; gap:0 2.2rem; padding:1.9rem 0; } }
.sblock:hover{ background:var(--c-warm); padding-left:1.1rem; }
.sblock .no{ font-family:var(--slab); font-size:clamp(2.4rem,6vw,3.8rem); line-height:.9; color:var(--c-ink); letter-spacing:-.02em; -webkit-text-stroke:0; }
.sblock:hover .no{ color:var(--gold-d); }
.sblock__body h3{ font-family:var(--slab); font-size:clamp(1.35rem,3.6vw,2.1rem); text-transform:uppercase; line-height:1.02; letter-spacing:-.015em; }
.sblock__body p{ margin:.6rem 0 0; color:var(--dim-l); font-size:.98rem; line-height:1.55; max-width:54ch; }
.sblock__spec{ grid-column:1 / -1; margin-top:.9rem; font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim-l); display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
@media (min-width:760px){ .sblock__spec{ grid-column:auto; margin-top:0; flex-direction:column; gap:.25rem; text-align:right; border-left:1px solid var(--line); padding-left:2.2rem; align-self:stretch; justify-content:center; min-width:160px; } }
.sblock__spec b{ color:var(--c-ink); font-weight:600; }

/* ---------- PORTFOLIO ---------- */
.work{ background:var(--c-black); color:var(--c-light); }
.work .shell{ padding-block:clamp(3.4rem,7vw,5.5rem); }
.work .sec-kick{ color:var(--dim-d); }
.work h2{ font-family:var(--slab); font-size:clamp(2rem,6vw,3.8rem); text-transform:uppercase; line-height:.98; letter-spacing:-.02em; margin:1rem 0 .6rem; }
.work__lead{ color:var(--dim-d); max-width:48ch; margin:0 0 2.8rem; }
.work__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
@media (min-width:620px){ .work__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .work__grid{ grid-template-columns:repeat(3,1fr); } }
.pour{ position:relative; background:var(--c-black); overflow:hidden; aspect-ratio:1/1; }
.pour img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05) brightness(.95); transition:transform 1.1s var(--ease), filter .4s var(--ease); }
.pour:hover img{ transform:scale(1.06); filter:grayscale(0) contrast(1.05) brightness(.98); }
.pour__cap{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem 1rem; background:linear-gradient(0deg, rgba(28,27,24,.94) 0%, rgba(28,27,24,.55) 55%, transparent 100%); }
.pour__cap b{ display:block; font-family:var(--slab); font-size:1.05rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; }
.pour__cap span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim-d); display:block; margin-top:.5rem; }
.pour__tag{ position:absolute; top:0; left:0; font-family:var(--mono); font-weight:600; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink); background:var(--yellow); padding:.35rem .6rem; z-index:2; }

/* ---------- PROCESS LEDGER ---------- */
.proc{ background:var(--yellow); color:var(--c-ink); }
.proc .shell{ padding-block:clamp(3rem,6vw,4.6rem); }
.proc__head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.proc__head h2{ font-family:var(--slab); font-size:clamp(1.8rem,4.6vw,3rem); text-transform:uppercase; line-height:1; letter-spacing:-.02em; }
.proc__head p{ font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.04em; margin:0; color:#52450a; }
.proc__row{ display:grid; grid-template-columns:1fr; gap:0; border-top:3px solid var(--c-ink); }
@media (min-width:760px){ .proc__row{ grid-template-columns:repeat(4,1fr); } }
.pstep{ padding:1.6rem 1.4rem 1.6rem 0; border-bottom:1px solid rgba(28,27,24,.25); }
@media (min-width:760px){ .pstep{ border-bottom:0; border-right:1px solid rgba(28,27,24,.3); padding:1.8rem 1.4rem; } .pstep:first-child{ padding-left:0; } .pstep:last-child{ border-right:0; padding-right:0; } }
.pstep .no{ font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.1em; }
.pstep h3{ font-family:var(--slab); font-size:clamp(1.2rem,2.8vw,1.7rem); text-transform:uppercase; line-height:1.02; letter-spacing:-.015em; margin:.7rem 0 .55rem; }
.pstep p{ margin:0; font-size:.94rem; line-height:1.5; color:#3a3208; max-width:30ch; }

/* ---------- TRUST STRIP ---------- */
.trust{ background:var(--c-warm); color:var(--c-ink); border-top:3px solid var(--c-ink); }
.trust .shell{ padding-block:clamp(2.4rem,5vw,3.4rem); display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center; }
@media (min-width:880px){ .trust .shell{ grid-template-columns:auto 1fr; gap:3rem; } }
.trust h2{ font-family:var(--slab); font-size:clamp(1.7rem,3.8vw,2.5rem); text-transform:uppercase; line-height:1; letter-spacing:-.02em; }
.trust__list{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); min-width:0; }
@media (min-width:460px){ .trust__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:600px){ .trust__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.trust__list div{ background:var(--c-warm); padding:1.1rem 1.2rem; display:flex; gap:.7rem; align-items:flex-start; min-width:0; }
.trust__list svg{ flex:none; color:var(--yellow-dk); margin-top:1px; }
.trust__list b{ display:block; font-family:var(--slab); font-size:.82rem; text-transform:uppercase; letter-spacing:-.005em; line-height:1.12; }
.trust__list span{ font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; color:var(--dim-l); display:block; margin-top:.2rem; }

/* ---------- TESTIMONIAL ---------- */
.quote{ position:relative; background:var(--c-light); color:var(--c-ink); }
.quote .shell{ padding-block:clamp(3.2rem,7vw,5rem); }
.quote__mark{ font-family:var(--slab); font-size:6rem; line-height:.7; color:var(--gold-d); display:block; height:.55em; }
.quote blockquote{ margin:1.2rem 0 0; font-family:var(--slab); font-size:clamp(1.4rem,4vw,2.4rem); line-height:1.16; letter-spacing:-.015em; text-transform:uppercase; max-width:24ch; }
.quote cite{ display:block; margin-top:2rem; font-family:var(--mono); font-weight:500; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim-l); font-style:normal; }
.quote cite b{ color:var(--c-ink); font-weight:600; }
.quote .stars{ color:var(--gold-d); letter-spacing:.2em; font-size:1.1rem; margin-bottom:.6rem; }

/* quote grid (for testimonial pages) */
.qgrid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .qgrid{ grid-template-columns:repeat(2,1fr); } }
.qcard{ background:var(--c-light); padding:1.8rem 1.6rem; }
.qcard .stars{ color:var(--gold-d); letter-spacing:.18em; font-size:.95rem; margin-bottom:.7rem; }
.qcard blockquote{ margin:0; font-family:var(--body); font-weight:600; font-size:1.06rem; line-height:1.5; color:var(--c-ink); text-transform:none; max-width:none; }
.qcard cite{ display:block; margin-top:1.1rem; font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--dim-l); font-style:normal; }
.qcard cite b{ color:var(--c-ink); font-weight:600; }

/* ---------- AREA / MAP-LIKE LIST ---------- */
.area{ background:var(--c-light); }
.area .shell{ padding-block:clamp(3.4rem,7vw,5rem); }
.area__grid{ display:grid; grid-template-columns:1fr; gap:2.6rem; }
@media (min-width:880px){ .area__grid{ grid-template-columns:1fr 1fr; gap:4rem; align-items:start; } }
.towns{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-top:3px solid var(--c-ink); }
@media (min-width:520px){ .towns{ grid-template-columns:repeat(3,1fr); } }
.towns div{ background:var(--c-light); padding:1.1rem 1.2rem; font-family:var(--slab); font-size:.95rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; display:flex; align-items:center; gap:.6rem; }
.towns div::before{ content:""; width:9px; height:9px; flex:none; background:var(--yellow); }
.area__note{ font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--dim-l); margin-top:1.4rem; line-height:1.7; }
.mapbox{ position:relative; background:var(--c-black); border:3px solid var(--c-ink); aspect-ratio:4/3; overflow:hidden; }
.mapbox svg{ position:absolute; inset:0; width:100%; height:100%; }
.mapbox__stamp{ position:absolute; left:1rem; bottom:1rem; z-index:2; font-family:var(--mono); font-weight:600; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink); background:var(--yellow); padding:.35rem .6rem; }

/* ---------- ESTIMATE / FORM ---------- */
.book{ position:relative; background:var(--c-black); color:var(--c-light); }
.book .shell{ padding-block:clamp(3.4rem,7vw,5.5rem); display:grid; grid-template-columns:1fr; gap:2.8rem; }
@media (min-width:920px){ .book .shell{ grid-template-columns:1fr .92fr; gap:4.5rem; align-items:start; } }
.book h2{ font-family:var(--slab); font-size:clamp(2.4rem,7vw,4.4rem); text-transform:uppercase; line-height:.96; letter-spacing:-.02em; }
.book h2 .y{ color:var(--yellow); }
.book__p{ color:var(--dim-d); max-width:44ch; margin:1.6rem 0 2rem; font-size:1.08rem; }
.book__call{ display:inline-flex; align-items:center; gap:.9rem; text-decoration:none; color:var(--c-light); }
.book__call .n{ font-family:var(--slab); font-size:clamp(1.7rem,4.4vw,2.3rem); color:var(--yellow); letter-spacing:-.015em; }
.book__call .l{ font-family:var(--mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim-d); }
.book__hours{ margin-top:1.8rem; font-family:var(--mono); font-size:.74rem; color:var(--dim-d); line-height:1.8; }
.book__hours b{ color:var(--c-light); }
.form{ background:var(--c-light); color:var(--c-ink); border:3px solid var(--c-ink); padding:clamp(1.6rem,3.5vw,2.4rem); position:relative; }
.form::before{ content:""; position:absolute; left:-3px; top:-3px; width:46px; height:46px; background:var(--yellow); }
.form .ft{ position:relative; z-index:1; font-family:var(--slab); text-transform:uppercase; font-size:1.25rem; letter-spacing:-.01em; line-height:1.1; margin:0 0 .4rem; }
.form .fk{ font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.05em; color:var(--dim-l); margin:0 0 1.6rem; text-transform:uppercase; }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-l); margin-bottom:.45rem; }
.field input, .field select, .field textarea{ width:100%; background:#fff; border:2px solid var(--c-grey); border-radius:0; color:var(--c-ink); font-family:var(--body); font-size:1rem; padding:.8rem .9rem; transition:border-color .15s var(--ease); }
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder, .field textarea::placeholder{ color:#7c7a70; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--c-ink); box-shadow:inset 0 0 0 2px var(--yellow); }
.fields-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px){ .fields-2{ grid-template-columns:1fr; } }
.form .btn--slab{ width:100%; justify-content:center; padding:1.05rem; font-size:1.1rem; margin-top:.5rem; }
.form .ftrust{ margin-top:1.1rem; font-family:var(--mono); font-size:.66rem; color:var(--dim-l); display:flex; gap:.5rem; align-items:center; }
.form .ftrust svg{ color:var(--gold-d); flex:none; }
.form.done .form__in{ display:none; }
.form__ok{ display:none; text-align:center; padding:1.6rem 0; }
.form.done .form__ok{ display:block; }
.form__ok .seal{ width:66px; height:66px; margin:0 auto 1rem; }
.form__ok h3{ font-family:var(--slab); font-size:1.6rem; text-transform:uppercase; letter-spacing:-.015em; line-height:1.05; }
.form__ok p{ color:var(--dim-l); max-width:34ch; margin:.6rem auto 0; }

/* ---------- CTA STRIP (cross-page funnel) ---------- */
.ctab{ background:var(--c-warm); color:var(--c-ink); border-top:3px solid var(--c-ink); }
.ctab .shell{ padding-block:clamp(2.6rem,5.5vw,3.8rem); display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center; }
@media (min-width:820px){ .ctab .shell{ grid-template-columns:1fr auto; gap:2.4rem; } }
.ctab h2{ font-family:var(--slab); font-size:clamp(1.7rem,4.4vw,3rem); text-transform:uppercase; line-height:1; letter-spacing:-.02em; }
.ctab p{ margin:.8rem 0 0; color:var(--dim-l); max-width:52ch; }
.ctab__btns{ display:flex; flex-wrap:wrap; gap:1rem; }
.ctab .btn--slab{ padding:1rem 1.5rem; font-size:1rem; }
.ctab .btn--out{ color:var(--c-ink); border-color:var(--c-ink); padding:1rem 1.5rem; font-size:1rem; }
.ctab .btn--out:hover{ border-color:var(--yellow-dk); color:var(--yellow-dk); }

/* ---------- HOME HIGHLIGHT CARDS ---------- */
.hl{ background:var(--c-light); }
.hl .shell{ padding-block:clamp(3.4rem,7vw,5rem); }
.hl__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-top:3px solid var(--c-ink); }
@media (min-width:760px){ .hl__grid{ grid-template-columns:repeat(2,1fr); } }
.hcard{ background:var(--c-light); padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:.7rem; transition:background-color .2s var(--ease); }
.hcard:hover{ background:var(--c-warm); }
.hcard .no{ font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.12em; color:var(--gold-d); text-transform:uppercase; }
.hcard h3{ font-family:var(--slab); font-size:clamp(1.4rem,3vw,2rem); text-transform:uppercase; line-height:1.02; letter-spacing:-.015em; }
.hcard p{ margin:0; color:var(--dim-l); font-size:.98rem; line-height:1.55; }
.hcard a.more{ margin-top:auto; padding-top:.5rem; font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink); text-decoration:none; border-bottom:2px solid var(--yellow); align-self:flex-start; }
.hcard a.more:hover{ color:var(--gold-d); }

/* ---------- FOOTER ---------- */
.foot{ background:var(--c-ink); color:var(--c-light); }
.foot .shell{ padding-block:clamp(2.8rem,6vw,4.2rem); }
.foot__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.6rem; flex-wrap:wrap; padding-bottom:1.8rem; border-bottom:1px solid var(--line-d); }
.foot__brand{ display:flex; align-items:center; gap:1rem; }
.foot__keystone{ width:clamp(46px,9vw,62px); height:clamp(46px,9vw,62px); flex:none; }
.foot__mk{ font-family:var(--slab); font-size:clamp(2rem,5.4vw,3.1rem); text-transform:uppercase; line-height:.96; letter-spacing:-.02em; }
.foot__mk .y{ color:var(--yellow); }
.foot__call{ text-decoration:none; text-align:right; }
.foot__call .l{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim-d); display:block; margin-bottom:.25rem; }
.foot__call .n{ font-family:var(--slab); font-size:1.5rem; color:var(--yellow); letter-spacing:-.015em; }
.foot__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; padding-top:2.2rem; }
@media (min-width:720px){ .foot__cols{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.foot__cols h4{ font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin:0 0 .9rem; }
.foot__cols p, .foot__cols li{ color:var(--dim-d); font-size:.92rem; line-height:1.7; }
.foot__cols ul{ list-style:none; margin:0; padding:0; }
.foot__cols a{ color:var(--dim-d); text-decoration:none; }
.foot__cols a:hover{ color:var(--yellow); }
.colo{ margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--line-d); display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:.68rem; color:var(--dim-d); }
.colo p{ margin:0; }
.gwc-chip{ background:var(--c-light); padding:8px 13px; display:inline-flex; }

/* ---------- DEMO CHIP ---------- */
.specimen{ position:fixed; left:14px; bottom:14px; z-index:50; display:inline-flex; align-items:center; gap:10px; padding:9px 13px; background:var(--c-ink); border:2px solid var(--yellow); color:var(--c-light); text-decoration:none; box-shadow:0 16px 36px -24px rgba(0,0,0,.8); }
.specimen:hover{ background:#000; }
.specimen .stx b{ display:block; font-family:var(--mono); font-weight:600; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--yellow); }
.specimen .stx small{ font-family:var(--mono); font-size:9px; color:var(--c-mid); }
@media (max-width:560px){ .specimen{ left:10px; bottom:66px; } .specimen .stx small{ display:none; } }
@media print{ .specimen, .gwc-chip{ display:none; } }

/* ---------- STICKY CALL BAR ---------- */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{ display:block; position:fixed; bottom:0; left:0; right:0; z-index:58; background:var(--yellow); box-shadow:0 -4px 18px -6px rgba(0,0,0,.5); }
  .callbar a{ display:flex; align-items:center; justify-content:center; gap:.55rem; padding:1rem; text-decoration:none; color:var(--c-ink); font-family:var(--slab); font-weight:900; font-size:1.1rem; text-transform:uppercase; letter-spacing:.03em; }
  body{ padding-bottom:56px; }
}