/* ============================================================
   The JS Fencing - site.css
   Palette derived from the client logo (oxblood monogram, milled
   plank, cream wordmark). Every pair below is WCAG-checked; see
   tools/palette2.py for the contrast matrix.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#15100C;          /* canvas, warm near-black with a brown undertone */
  --ink-2:#1F1813;        /* raised card */
  --ink-3:#2B2119;        /* deeper well */
  --line:#3A2D22;         /* hairline */
  --line-2:#4A3A2C;

  --accent:#8A1A1A;       /* his monogram oxblood. FILLS ONLY - 2.02:1 on canvas */
  --accent-hi:#A62222;
  --accent-ink:#FFFFFF;   /* white ON the accent = 9.36:1. Inverts the mold rule,
                             which assumed a BRIGHT accent needing dark ink. */
  --accent-t:#D7A574;     /* milled-redwood tan. accent-coloured TEXT = 8.57:1 */
  --accent-t-dim:#A8825C;

  --paper:#F1E8DD;        /* body text on dark, 15.59:1 */
  --muted:#B3A493;        /* secondary text, 7.78:1 */

  --wrap:1200px;
  --gut:24px;
  --r:3px;
  --shadow:0 18px 46px rgba(0,0,0,.44);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 17px/1.65 Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* The width/height attributes on <img> are presentational hints. Any rule that
   sets width but not height leaves the height hint in force, so the image
   renders at its attribute height in px and skews badly once the column is
   narrower than the attribute width. height:auto here kills that sitewide;
   the attributes still reserve the right box via the mapped aspect-ratio.
   Rules that intentionally size an image (.hero-bg, .brand, .gal, .about-collage)
   are more specific and still win. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.12;margin:0;letter-spacing:-.012em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--accent-t);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:96px 0}
.sec.tight{padding:70px 0}
.sec.alt{background:linear-gradient(180deg,#191309 0%,var(--ink-2) 100%)}
.sec.well{background:var(--ink-3)}

/* ---------- section furniture ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font:600 12px/1 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-t);margin:0 0 18px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.h-sec{font-size:clamp(30px,4.1vw,46px);margin:0 0 18px;max-width:20ch}
.lede{font-size:18px;color:var(--muted);max-width:62ch;margin:0 0 34px}
.sec-head{margin-bottom:52px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto;max-width:760px}
.sec-head.center .h-sec,.sec-head.center .lede{margin-left:auto;margin-right:auto;max-width:none}
.sec-head.center .kicker::before{display:none}

/* the brush underline under one word of a display heading */
.brush{position:relative;white-space:nowrap;display:inline-block}
.brush::after{
  content:"";position:absolute;left:-1%;right:-1%;bottom:.02em;height:.17em;
  background:var(--accent);border-radius:52% 48% 50% 50%/100% 100% 55% 60%;
  opacity:1;z-index:-1;transform:rotate(-.4deg);
}
.brush > span{position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r);border:1px solid transparent;
  font:600 15px/1 Inter,sans-serif;letter-spacing:.01em;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-1{background:var(--accent);color:var(--accent-ink)}
.btn-1:hover{background:var(--accent-hi)}
.btn-2{background:transparent;color:var(--paper);border-color:var(--line-2)}
.btn-2:hover{border-color:var(--accent-t);color:var(--accent-t)}
.btn-3{background:var(--paper);color:#1a1410}
.btn-3:hover{background:#fff}
.btn svg{width:17px;height:17px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:13px}

.tlink{
  display:inline-flex;align-items:center;gap:8px;color:var(--accent-t);
  font:600 14px/1 Inter,sans-serif;letter-spacing:.02em;
}
.tlink svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
#nav{
  position:sticky;top:0;z-index:60;
  background:rgba(21,16,12,.90);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
#nav.scrolled{background:rgba(21,16,12,.985);box-shadow:0 10px 30px rgba(0,0,0,.36)}
.nav-in{display:flex;align-items:center;gap:20px;height:82px}
.brand{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
.brand img{height:44px;width:auto}
.brand-tx{display:flex;flex-direction:column;line-height:1.06;min-width:0}
.brand-tx b{font:700 17px/1.1 'Playfair Display',serif;letter-spacing:-.01em;white-space:nowrap}
.brand-tx span{font:500 10px/1.3 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-t-dim);white-space:nowrap}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links > *{position:relative}
.nav-links a.top{
  display:block;padding:9px 13px;border-radius:var(--r);
  font:500 14.5px/1 Inter,sans-serif;color:var(--paper);white-space:nowrap;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav-links a.top:hover,.nav-links .has:hover > a.top{color:var(--accent-t);background:rgba(255,255,255,.04)}
.nav-links a.top[aria-current]{color:var(--accent-t)}
.has > a.top::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.drop{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transition:.19s var(--ease);
}
.drop.wide{min-width:520px;columns:2;column-gap:6px}
.has:hover .drop,.has:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:9px 13px;border-radius:2px;font:500 14px/1.35 Inter,sans-serif;color:var(--muted);break-inside:avoid;transition:.15s var(--ease)}
.drop a:hover{background:rgba(138,26,26,.18);color:var(--paper)}

.nav-cta{display:flex;align-items:center;gap:14px;flex:none;margin-left:16px}
.nav-tel{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.nav-tel span{font:500 10px/1 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.nav-tel b{font:700 16px/1.25 Inter,sans-serif;color:var(--paper);white-space:nowrap}
.nav-tel:hover b{color:var(--accent-t)}
.nav-cta .btn{padding:12px 20px;font-size:14px}

#burger{
  display:none;width:44px;height:44px;flex:none;margin-left:auto;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;position:relative;
}
#burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--paper);transition:.25s var(--ease)}
#burger span:nth-child(1){top:15px}
#burger span:nth-child(2){top:21px}
#burger span:nth-child(3){top:27px}
#burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

#mmenu{
  position:fixed;inset:82px 0 0;z-index:55;background:var(--ink);
  overflow-y:auto;padding:22px var(--gut) 46px;
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:.24s var(--ease);
}
#mmenu.open{transform:none;opacity:1;visibility:visible}
#mmenu a{display:block;padding:14px 2px;border-bottom:1px solid var(--line);font:500 17px/1.3 Inter,sans-serif}
#mmenu details > summary{
  list-style:none;cursor:pointer;padding:14px 2px;border-bottom:1px solid var(--line);
  font:600 17px/1.3 Inter,sans-serif;display:flex;justify-content:space-between;align-items:center;
}
#mmenu details > summary::-webkit-details-marker{display:none}
#mmenu details > summary::after{content:"+";color:var(--accent-t);font:400 22px/1 Inter,sans-serif}
#mmenu details[open] > summary::after{content:"\2013"}
#mmenu details a{padding-left:16px;font-size:15.5px;color:var(--muted)}
#mmenu .m-cta{margin-top:26px;display:grid;gap:11px}
#mmenu .m-cta .btn{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(21,16,12,.90) 0%,rgba(21,16,12,.74) 30%,rgba(21,16,12,.30) 58%,rgba(21,16,12,.44) 100%),
    linear-gradient(180deg,rgba(21,16,12,.62) 0%,rgba(21,16,12,0) 30%,rgba(21,16,12,.72) 100%);
}
.hero-in{position:relative;z-index:2;padding:110px var(--gut) 90px;width:100%}
.hero h1{font-size:clamp(38px,5.6vw,70px);max-width:15ch;margin:0 0 22px;font-weight:800}
.hero .lede{font-size:19px;color:#DCD0C2;max-width:52ch;margin-bottom:34px}
.hero .btn-row{margin-bottom:44px}

.hero-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px;
  background:rgba(31,24,19,.80);border:1px solid var(--line-2);border-radius:var(--r);
  font:500 13px/1 Inter,sans-serif;color:var(--paper);backdrop-filter:blur(6px);
}
.chip svg{width:15px;height:15px;color:var(--accent-t);flex:none}
.chip b{font-weight:700}

.stars{display:inline-flex;gap:2px;color:var(--accent-t)}
.stars svg{width:14px;height:14px}

/* est. seal */
.seal{
  position:absolute;right:var(--gut);bottom:56px;z-index:3;
  width:118px;height:118px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(21,16,12,.74);backdrop-filter:blur(8px);
  display:grid;place-content:center;text-align:center;gap:2px;
}
.seal b{font:800 15px/1 'Playfair Display',serif;color:var(--accent-t);letter-spacing:.04em}
.seal span{font:600 8.5px/1.4 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- credibility bar (milled plank) ---------- */
.credbar{position:relative;background:var(--ink-3);border-block:1px solid var(--line);overflow:hidden}
.credbar-bg{position:absolute;inset:0;opacity:.16;z-index:0}
.credbar-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05)}
.credbar-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-3) 0%,rgba(43,33,25,.35) 30%,rgba(43,33,25,.35) 70%,var(--ink-3) 100%)}
.credbar .wrap{position:relative;z-index:1}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:34px 0}
.cred-i{padding:6px 26px;border-left:1px solid var(--line)}
.cred-i:first-child{border-left:0;padding-left:0}
.cred-i b{display:block;font:800 27px/1.15 'Playfair Display',serif;color:var(--accent-t);margin-bottom:5px}
.cred-i span{font:500 13px/1.45 Inter,sans-serif;color:var(--muted);display:block}

/* ---------- split feature (mill story) ---------- */
/* grid and flex children default to min-width:auto, so a wide child (a spec
   table, a long unbroken string) expands the track instead of scrolling
   inside it. This is what pushed whole pages sideways at 390px. */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center}
.split > *,.about-grid > *,.form-wrap > *,.pillar,.tile,.linkgrid a,.cred-i{min-width:0}
.prose{min-width:0;overflow-wrap:anywhere}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-media img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.split-media .tag{
  position:absolute;left:-14px;bottom:26px;background:var(--accent);color:var(--accent-ink);
  padding:13px 19px;border-radius:var(--r);max-width:250px;box-shadow:var(--shadow);
}
.split-media .tag b{display:block;font:700 15px/1.25 Inter,sans-serif;margin-bottom:3px}
.split-media .tag span{font:400 12.5px/1.45 Inter,sans-serif;opacity:.9}
.qbox{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:0 0 26px}
.qbox p{font:500 italic 20px/1.55 'Playfair Display',serif;color:var(--paper);margin:0}

.ticks{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:13px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--muted)}
.ticks svg{width:19px;height:19px;color:var(--accent-t);flex:none;margin-top:2px}
.ticks b{color:var(--paper);font-weight:600}

.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
.hcard{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 24px;transition:border-color .22s var(--ease)}
.hcard:hover{border-color:var(--accent-t-dim)}
.hcard svg{width:100%;height:auto;display:block;margin-bottom:16px}
.hcard h3{font-size:18px;margin:0 0 5px}
.hcard .rule-t{display:block;font:600 12.5px/1.4 Inter,sans-serif;color:var(--accent-t);margin-bottom:9px}
.hcard p{font:400 13px/1.55 Inter,sans-serif;color:var(--muted);margin:0}
.prose .hgrid{grid-template-columns:repeat(2,1fr)}
@media (max-width:1040px){.hgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hgrid{grid-template-columns:1fr}}

/* ---------- material plate ----------
   Stands in for a photograph on the 21 type pages where no honest photo of
   that fence type exists. The backdrop is a tight crop of board grain from
   one of the client's own jobs: real material, but cropped and darkened far
   enough that it can never read as "a photo of this fence type". */
.plate{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  aspect-ratio:1/1;display:grid;place-content:center;text-align:center;padding:40px;
  background:linear-gradient(158deg,var(--ink-2) 0%,#241C15 100%)}
.plate-bg{position:absolute;inset:0;z-index:0}
.plate-bg img{width:100%;height:100%;object-fit:cover;opacity:.46}
.plate-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(118% 92% at 50% 40%,rgba(21,16,12,.30) 0%,rgba(21,16,12,.86) 74%)}
.plate-in{position:relative;z-index:1;display:grid;justify-items:center}
.plate svg{width:94px;height:94px;color:var(--accent-t);filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.plate .rule{width:52px;height:2px;background:var(--accent);margin:28px 0 18px}
.plate b{font:700 23px/1.25 'Playfair Display',serif;color:var(--paper);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.plate em{font:400 13.5px/1.5 Inter,sans-serif;font-style:normal;color:var(--muted);margin-top:10px;max-width:30ch}
.plate .stamp{position:absolute;left:16px;top:14px;z-index:1;
  font:600 9.5px/1 Inter,sans-serif;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-t-dim)}

/* emblem tiles pick up the same material so the mosaic does not read as half empty */
.tile.plain{position:relative}
.tile.plain > .texbox{position:absolute;inset:0;z-index:0;overflow:hidden}
.tile.plain > .texbox img{width:100%;height:100%;object-fit:cover;opacity:.30}
.tile.plain > .texbox::after{content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(31,24,19,.58) 0%,rgba(21,16,12,.90) 70%)}
.tile.plain .tile-emblem,.tile.plain .tile-body{position:relative;z-index:1}

/* ---------- services mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,auto);gap:18px}
.tile{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--ink-2);
  display:flex;flex-direction:column;min-height:210px;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.tile:hover{border-color:var(--accent-t-dim);transform:translateY(-3px)}
.tile.w2{grid-column:span 2}
.tile.h2{grid-row:span 2}
/* photo tiles: the image is absolute so it can never stretch the row */
.tile > .imgbox{position:absolute;inset:0;z-index:0}
.tile > .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.tile:hover > .imgbox img{transform:scale(1.045)}
.tile > .imgbox::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,16,12,.20) 0%,rgba(21,16,12,.72) 42%,rgba(21,16,12,.96) 100%)}
.tile-body{position:relative;z-index:1;margin-top:auto;padding:22px}
.tile-emblem{position:relative;z-index:1;padding:26px 22px 0}
.tile-emblem svg{width:46px;height:46px;color:var(--accent-t)}
.tile h3{font-size:20px;margin:0 0 7px}
.tile p{font:400 14px/1.55 Inter,sans-serif;color:var(--muted);margin:0 0 13px}
.tile .tlink{font-size:13px}
.tile.plain{background:linear-gradient(160deg,var(--ink-2) 0%,#241C15 100%)}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:border-color .22s var(--ease)}
.pillar:hover{border-color:var(--accent-t-dim)}
.pillar .n{font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;color:var(--accent-t-dim);display:block;margin-bottom:18px}
.pillar svg{width:34px;height:34px;color:var(--accent-t);margin-bottom:16px}
.pillar h3{font-size:19px;margin:0 0 10px}
.pillar p{font:400 14.5px/1.6 Inter,sans-serif;color:var(--muted);margin:0}

/* ---------- about collage ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-collage{position:relative;height:520px;width:100%}
.about-collage img{position:absolute;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);object-fit:cover}
.about-collage img:nth-child(1){width:66%;height:62%;top:0;left:0;transform:rotate(-2.2deg)}
.about-collage img:nth-child(2){width:56%;height:50%;bottom:0;right:0;transform:rotate(2.6deg)}
.stat-row{display:grid;grid-template-columns:repeat(3,auto);gap:38px;margin-top:34px;justify-content:start}
.stat b{display:block;font:800 38px/1 'Playfair Display',serif;color:var(--accent-t)}
.stat > span{display:block;font:500 12.5px/1.4 Inter,sans-serif;color:var(--muted);letter-spacing:.03em}
.stat b span{font:inherit;color:inherit;letter-spacing:inherit}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);aspect-ratio:4/3;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 15px 13px;
  background:linear-gradient(180deg,transparent,rgba(21,16,12,.93));
  font:500 12.5px/1.4 Inter,sans-serif;color:var(--paper);
  opacity:0;transform:translateY(6px);transition:.22s var(--ease);
}
.gal figure:hover figcaption{opacity:1;transform:none}

#lightbox{position:fixed;inset:0;z-index:120;background:rgba(10,7,5,.94);display:none;place-content:center;padding:36px}
#lightbox.open{display:grid}
#lightbox img{max-width:min(1180px,94vw);max-height:86vh;width:auto;border-radius:var(--r);border:1px solid var(--line-2)}
#lightbox .lb-cap{text-align:center;color:var(--muted);font:500 13.5px/1.5 Inter,sans-serif;margin-top:15px}
#lightbox button{position:absolute;background:rgba(31,24,19,.9);border:1px solid var(--line-2);color:var(--paper);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:19px;display:grid;place-content:center}
#lb-x{top:24px;right:24px}
#lb-p{left:24px;top:50%;transform:translateY(-50%)}
#lb-n{right:24px;top:50%;transform:translateY(-50%)}

/* ---------- reviews ---------- */
.rev-head{display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 34px;margin-bottom:34px}
.rev-score{display:flex;align-items:center;gap:18px}
.rev-score .big{font:800 54px/1 'Playfair Display',serif;color:var(--accent-t)}
.rev-score .meta span{display:block;font:500 13.5px/1.5 Inter,sans-serif;color:var(--muted)}
.rev-head .btn{margin-left:auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.rev-card .stars{margin-bottom:14px}
.rev-card .who{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.rev-card .av{width:38px;height:38px;border-radius:50%;background:var(--accent);display:grid;place-content:center;flex:none;font:700 15px/1 Inter,sans-serif;color:var(--accent-ink)}
.rev-card .who b{display:block;font:600 14.5px/1.3 Inter,sans-serif;color:var(--paper)}
.rev-card .who em{font:400 12.5px/1.3 Inter,sans-serif;color:var(--muted);font-style:normal}

/* ---------- faq ---------- */
.faq{max-width:880px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font:600 18px/1.45 Inter,sans-serif;color:var(--paper);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:31px;width:9px;height:9px;
  border-right:1.5px solid var(--accent-t);border-bottom:1.5px solid var(--accent-t);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:35px}
.faq .ans{padding:0 44px 26px 0;color:var(--muted);font-size:16px}

/* ---------- form ---------- */
.form-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:start}
#leadForm{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:34px}
.fld{margin-bottom:17px}
.fld label{display:block;font:600 12.5px/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 15px;background:var(--ink);color:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r);
  font:400 15.5px/1.4 Inter,sans-serif;transition:border-color .18s var(--ease);
}
.fld textarea{min-height:112px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent-t);outline:none}
.fld input::placeholder,.fld textarea::placeholder{color:#6E6155}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
#leadForm .btn{width:100%;margin-top:8px}
.fine{font:400 12.5px/1.55 Inter,sans-serif;color:var(--muted);margin-top:14px;text-align:center}
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,18px);z-index:130;
  background:var(--accent);color:var(--accent-ink);padding:15px 26px;border-radius:var(--r);
  font:600 15px/1 Inter,sans-serif;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:.26s var(--ease);
}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list svg{width:21px;height:21px;color:var(--accent-t);flex:none;margin-top:3px}
.contact-list b{display:block;font:600 12px/1 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.contact-list a,.contact-list span{font-size:16.5px;color:var(--paper)}
.contact-list a:hover{color:var(--accent-t)}

/* ---------- cta band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--accent);color:var(--accent-ink);text-align:center;padding:76px 0}
.cta-band h2{font-size:clamp(28px,3.8vw,42px);margin:0 0 14px;color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 30px;font-size:17.5px}
.cta-band .btn-row{justify-content:center}

/* ---------- inner page header ---------- */
.phead{position:relative;padding:132px 0 62px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1B1410 0%,var(--ink) 100%);overflow:hidden}
.phead.shot{padding:150px 0 92px}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.phead-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(21,16,12,.93) 0%,rgba(21,16,12,.80) 34%,rgba(21,16,12,.42) 66%,rgba(21,16,12,.56) 100%),
  linear-gradient(180deg,rgba(21,16,12,.80) 0%,rgba(21,16,12,.15) 42%,rgba(21,16,12,.88) 100%)}
.phead .wrap{position:relative;z-index:1}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.phead h1{font-size:clamp(32px,4.8vw,54px);max-width:19ch;margin:0 0 16px}
.phead .lede{margin-bottom:0}
.crumb{font:500 13px/1 Inter,sans-serif;color:var(--muted);margin-bottom:20px}
.crumb a:hover{color:var(--accent-t)}
.crumb span{opacity:.5;margin:0 7px}

/* ---------- prose ---------- */
.prose{max-width:74ch;min-width:0}
.prose h2{font-size:clamp(25px,3.1vw,33px);margin:52px 0 16px}
.prose h3{font-size:21px;margin:34px 0 12px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);font-size:16.5px}
.prose strong{color:var(--paper);font-weight:600}
.prose ul,.prose ol{padding-left:21px;margin:0 0 1.05em}
.prose li{margin-bottom:9px}
.prose a{color:var(--accent-t);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--paper)}

.note{background:var(--ink-2);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r);padding:22px 26px;margin:30px 0}
.note p:last-child{margin-bottom:0}
.note b{color:var(--accent-t)}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0;max-width:100%}
.tbl-wrap::-webkit-scrollbar{height:6px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.tbl-wrap .tbl{margin:0}
.tbl{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:600 12px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-t);background:var(--ink-2);white-space:nowrap}
.tbl td{white-space:normal}
.tbl-wrap.cols4 .tbl{table-layout:fixed;min-width:700px}
.tbl-wrap.cols4 .tbl th{white-space:normal}
.tbl-wrap.cols4 .tbl th:first-child,.tbl-wrap.cols4 .tbl td:first-child{width:23%}
.tbl-wrap.cols4 .tbl th:nth-child(2){width:14%}
.tbl-wrap.cols4 .tbl th:nth-child(3){width:16%}
.tbl td{color:var(--muted)}
.tbl td strong{color:var(--paper)}
.tbl tr:hover td{background:rgba(255,255,255,.017)}
.src{font:400 12.5px/1.5 Inter,sans-serif;color:#8A7C6E;margin-top:-14px}
.src a{color:#8A7C6E;text-decoration:underline}
.src a:hover{color:var(--accent-t)}

/* index / link grids */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.linkgrid a{
  display:flex;align-items:center;gap:13px;padding:17px 19px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);
  font:500 15px/1.35 Inter,sans-serif;transition:.2s var(--ease);
}
.linkgrid a:hover{border-color:var(--accent-t-dim);background:var(--ink-3);transform:translateX(3px)}
.linkgrid svg{width:19px;height:19px;color:var(--accent-t);flex:none}

/* ---------- footer ---------- */
footer{background:#100C09;border-top:1px solid var(--line);padding:72px 0 0}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:52px}
.ft-brand img{height:58px;width:auto;margin-bottom:20px}
.ft-brand p{font-size:14.5px;color:var(--muted);max-width:34ch}
footer h4{font:600 12px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-t);margin:0 0 18px}
.ft-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ft-links li,.ft-links a,.ft-links span{font:400 14.5px/1.5 Inter,sans-serif;color:var(--muted)}
.ft-links a:hover{color:var(--paper)}
.ft-base{
  border-top:1px solid var(--line);padding:24px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  font:400 13px/1.5 Inter,sans-serif;color:var(--muted);
}
.ft-base a:hover{color:var(--accent-t)}
.ft-base .sp{margin-left:auto}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============ responsive ============ */
@media (max-width:1320px){
  .nav-links a.top{padding:9px 10px;font-size:14px}
  .brand-tx b{font-size:16px}
  .nav-cta{margin-left:12px}
  .split,.about-grid,.form-wrap{gap:46px}
}
@media (max-width:1240px){
  /* the city line under the wordmark is the first thing to go */
  .brand-tx span{display:none}
  .nav-links a.top{padding:9px 8px;font-size:13.5px}
  .has > a.top::after{margin-left:5px}
}
@media (max-width:1140px){
  /* then the phone block, keeping the CTA button and the tel link in the menu */
  .nav-tel{display:none}
  .nav-cta{margin-left:8px}
  .nav-cta .btn{padding:11px 16px;font-size:13.5px}
}
@media (max-width:1040px){
  .nav-links,.nav-cta{display:none}
  #burger{display:block}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .tile.w2{grid-column:span 2}
  .tile.h2{grid-row:span 1}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .split,.about-grid,.form-wrap{grid-template-columns:1fr;gap:44px}
  .split.rev .split-media{order:0}
  .split > [style*="sticky"]{position:static!important;top:auto!important}
  /* both collage children are absolute, so the track collapses to 0 here */
  .about-collage{height:auto;position:static;width:100%;max-width:520px;margin:0 auto;display:grid;gap:16px}
  .about-collage img{position:static;width:100%;height:auto;transform:none}
  .gal{grid-template-columns:repeat(3,1fr)}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .linkgrid{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr;gap:36px}
  .cred-grid{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .cred-i:nth-child(3){border-left:0;padding-left:0}
  .seal{display:none}
}
@media (max-width:760px){
  .sec{padding:70px 0}
  .sec.tight{padding:52px 0}
  .hero{min-height:auto}
  .hero-in{padding:76px var(--gut) 66px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .rev-grid,.linkgrid{grid-template-columns:1fr}
  .stat-row{gap:26px}
  .phead{padding:104px 0 48px}
  .rev-head{padding:24px}
  .rev-head .btn{margin-left:0;width:100%}
}
@media (max-width:760px){
  .tbl-wrap .tbl{min-width:560px}
  .tbl-wrap.cols4 .tbl{min-width:720px}
  .tbl th,.tbl td{padding:12px 13px;font-size:14.5px}
}
@media (max-width:560px){
  :root{--gut:18px}
  body{font-size:16px}
  .nav-in{height:70px}
  .brand img{height:40px}
  .brand-tx b{font-size:15px}
  .brand-tx span{font-size:9px;letter-spacing:.12em}
  #mmenu{inset:70px 0 0}
  /* the h1 must hold a 15-char business name plus a real headline */
  .hero h1{font-size:33px;max-width:none}
  .hero .lede{font-size:16.5px}
  .h-sec{font-size:27px}
  .phead h1{font-size:29px}
  .mosaic{grid-template-columns:1fr}
  .tile.w2{grid-column:span 1}
  .pillars{grid-template-columns:1fr}
  .cred-grid{grid-template-columns:1fr;padding:26px 0}
  .cred-i{border-left:0;padding:14px 0;border-top:1px solid var(--line)}
  .cred-i:first-child{border-top:0;padding-top:0}
  .f2{grid-template-columns:1fr}
  #leadForm{padding:24px 20px}
  .ft-grid{grid-template-columns:1fr;gap:32px}
  .btn-row .btn{width:100%}
  .split-media .tag{left:0;right:0;bottom:-16px;max-width:none}
  .gal{grid-template-columns:1fr 1fr;gap:10px}
}