/* ABM Carpentry stylesheet
   Design tokens first, then components. Palette is taken from the company
   logo: forest green, timber brown, brass rule. Light and dark themes are
   both defined; every component styles through tokens, never raw colours. */

/* ══════════════════════════════════════════════════════════════
   ABM CARPENTRY
   Palette taken from the company logo: forest green, timber
   brown, brass rule. Neutrals biased green, never cream.
   Structural motif: a brass tick-scale (a real ruler) drawn in
   CSS, marking measured edges.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens: light ────────────────────────────────────────── */
:root{
  --paper:        #f2f2ec;
  --paper-2:      #e9e9e1;
  --surface:      #ffffff;
  --surface-2:    #fbfbf8;

  --ink:          #14170f;
  --ink-2:        #3a4034;
  --stone:        #5f6458;

  --forest:       #2a4230;
  --forest-deep:  #1a291d;
  --timber:       #8a4a22;
  --brass:        #a97c2b;
  --brass-lit:    #c9973d;
  /* brass dark enough for small text on the light ground (AA at 12px) */
  --brass-text:   #85601f;

  --panel:        #1a291d;   /* dark brand panel, both themes */
  --panel-2:      #223528;
  --panel-ink:    #eceee6;
  --panel-ink-2:  #a8b3a4;
  --panel-line:   rgba(236,238,230,.16);

  --line:         rgba(20,23,15,.15);
  --line-soft:    rgba(20,23,15,.08);
  --shadow:       0 1px 2px rgba(20,23,15,.05), 0 8px 28px -12px rgba(20,23,15,.18);
  --shadow-lift:  0 2px 6px rgba(20,23,15,.07), 0 22px 48px -18px rgba(20,23,15,.28);

  --tick:         rgba(169,124,43,.55);
  --tick-major:   rgba(169,124,43,.95);

  --font-display: "Avenir Next Condensed","Franklin Gothic Medium","Roboto Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --font-body:    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:   "Iowan Old Style","Charter","Palatino Linotype",Georgia,serif;

  --wrap: 1240px;
  --gut:  clamp(1.15rem, 4.5vw, 3.5rem);
  --r:    4px;   /* joinery is square-edged: minimal radius */
}

/* ── Tokens: dark ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root{
    --paper:      #0f120d;
    --paper-2:    #161a13;
    --surface:    #171c15;
    --surface-2:  #1c2119;

    --ink:        #e9ebe2;
    --ink-2:      #bcc2b6;
    --stone:      #929a8c;

    --forest:     #4e7359;
    --forest-deep:#101410;
    --timber:     #c47a45;
    --brass:      #c9973d;
    --brass-lit:  #dcae56;
    --brass-text: #d3a54f;

    --panel:      #141911;
    --panel-2:    #1b2118;

    --line:       rgba(233,235,226,.16);
    --line-soft:  rgba(233,235,226,.08);
    --shadow:     0 1px 2px rgba(0,0,0,.5), 0 8px 28px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 22px 48px -18px rgba(0,0,0,.8);

    --tick:       rgba(201,151,61,.5);
    --tick-major: rgba(201,151,61,.95);
  }
}
/* Viewer toggle must beat the media query in both directions */
:root[data-theme="dark"]{
  --paper:#0f120d; --paper-2:#161a13; --surface:#171c15; --surface-2:#1c2119;
  --ink:#e9ebe2; --ink-2:#bcc2b6; --stone:#929a8c;
  --forest:#4e7359; --forest-deep:#101410; --timber:#c47a45;
  --brass:#c9973d; --brass-lit:#dcae56; --brass-text:#d3a54f;
  --panel:#141911; --panel-2:#1b2118;
  --line:rgba(233,235,226,.16); --line-soft:rgba(233,235,226,.08);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 22px 48px -18px rgba(0,0,0,.8);
  --tick:rgba(201,151,61,.5); --tick-major:rgba(201,151,61,.95);
}
:root[data-theme="light"]{
  --paper:#f2f2ec; --paper-2:#e9e9e1; --surface:#ffffff; --surface-2:#fbfbf8;
  --ink:#14170f; --ink-2:#3a4034; --stone:#5f6458;
  --forest:#2a4230; --forest-deep:#1a291d; --timber:#8a4a22;
  --brass:#a97c2b; --brass-lit:#c9973d; --brass-text:#85601f;
  --panel:#1a291d; --panel-2:#223528;
  --line:rgba(20,23,15,.15); --line-soft:rgba(20,23,15,.08);
  --shadow:0 1px 2px rgba(20,23,15,.05), 0 8px 28px -12px rgba(20,23,15,.18);
  --shadow-lift:0 2px 6px rgba(20,23,15,.07), 0 22px 48px -18px rgba(20,23,15,.28);
  --tick:rgba(169,124,43,.55); --tick-major:rgba(169,124,43,.95);
}

/* ── Base ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.96;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.85rem, 9.2vw, 5.6rem); }
h2{ font-size:clamp(2.1rem, 6vw, 3.5rem); }
h3{ font-size:clamp(1.2rem, 2.6vw, 1.4rem); line-height:1.1; letter-spacing:.02em; }
p{ margin:0; }

:focus-visible{
  outline:2.5px solid var(--brass-lit);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--panel); color:var(--panel-ink);
  padding:.85rem 1.25rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ── The rule: a measured brass edge ──────────────────────── */
.rule{
  height:11px; width:100%;
  background:
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px) bottom left/100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--tick-major) 0 1px, transparent 1px 40px) bottom left/100% 11px no-repeat;
}
.rule--short{ width:54px; height:11px; flex:0 0 auto; }

/* ── Eyebrow label ────────────────────────────────────────── */
.eyebrow{
  display:flex; align-items:flex-end; gap:.85rem;
  font-family:var(--font-body);
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-text);
  margin:0 0 1.15rem;
}
.eyebrow > span{ line-height:1.1; }
/* keep the label on one line on small phones so the tick rule isn't stranded */
@media (max-width:430px){
  .eyebrow{ letter-spacing:.115em; gap:.55rem; }
  .eyebrow .rule--short{ width:34px; }
}
/* below 360px the decorative rule is dropped rather than left hanging */
@media (max-width:359px){ .eyebrow .rule--short{ display:none; } }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display);
  font-size:1.06rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  text-decoration:none; cursor:pointer;
  padding:1.02rem 1.75rem;
  min-height:54px;
  border:1.5px solid transparent;
  border-radius:var(--r);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--timber); color:#fff; border-color:var(--timber); }
.btn--primary:hover{ background:#6f3a19; border-color:#6f3a19; }
/* On the dark ground timber is lightened, so the button flips to dark
   text and brightens on hover, white would only reach 3.4:1 there. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--primary{ color:#14170f; }
  :root:not([data-theme="light"]) .btn--primary:hover{ background:#d4895a; border-color:#d4895a; }
}
:root[data-theme="dark"] .btn--primary{ color:#14170f; }
:root[data-theme="dark"] .btn--primary:hover{ background:#d4895a; border-color:#d4895a; }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--line-soft); }

.btn--onDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--onDark:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

.btn--brass{ background:var(--brass-lit); color:#1a291d; border-color:var(--brass-lit); }
.btn--brass:hover{ background:#e0b658; border-color:#e0b658; }

.btn--block{ width:100%; }

/* ── Header ───────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
  border-bottom:1px solid transparent;
}
.hdr__in{
  display:flex; align-items:center; gap:1.5rem;
  height:78px;              /* 44px badge + 17px clear top and bottom */
}
.hdr.is-stuck{
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px -8px rgba(0,0,0,.22);
}
@supports not (backdrop-filter: blur(1px)){
  .hdr.is-stuck{ background:var(--paper); }
}

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; min-width:0; }
/* Full badge, never cropped. Two versions are stacked in the same box: the
   reversed one while the header floats over the dark hero, the normal one
   once it sticks to the light bar. object-fit:contain guarantees the aspect
   ratio is preserved whatever height the breakpoint sets. */
.brand__badge{
  position:relative; flex:0 0 auto;
  height:44px; aspect-ratio:273/300;
}
.brand__badge img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  transition:opacity .28s ease;
}
.brand__badge .is-onLight{ opacity:0; }
.hdr.is-stuck .brand__badge .is-onLight{ opacity:1; }
.hdr.is-stuck .brand__badge .is-onDark{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .brand__badge img{ transition:none; } }
@media (min-width:900px){ .brand__badge{ height:58px; } }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--font-display); font-weight:700;
  font-size:1.18rem; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;               /* never break the wordmark */
  color:var(--ink);
}
@media (min-width:900px){ .brand__name{ font-size:1.36rem; letter-spacing:.06em; } }
.brand__sub{
  font-size:.6rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--brass); margin-top:.2rem;
}
/* Over the hero photo, before the header sticks */
.hdr:not(.is-stuck) .brand__name{ color:#fff; }
.hdr:not(.is-stuck) .brand__sub{ color:var(--brass-lit); }
.hdr:not(.is-stuck) .nav a{ color:rgba(255,255,255,.9); }
.hdr:not(.is-stuck) .nav a:hover{ color:#fff; }
.hdr:not(.is-stuck) .hdr__tel{ color:#fff; }
.hdr:not(.is-stuck) .icon-btn{ color:#fff; border-color:rgba(255,255,255,.35); }

.nav{ display:none; gap:2rem; }
.nav a{
  text-decoration:none; color:var(--ink-2);
  font-size:.86rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:.4rem 0; position:relative;
  transition:color .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.hdr__tel{
  display:none; text-decoration:none; font-weight:700;
  font-family:var(--font-display); font-size:1.1rem; letter-spacing:.03em;
  color:var(--ink); align-items:center; gap:.45rem;
}
.hdr__cta{ display:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:0 0 auto;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r);
  cursor:pointer; padding:0;
}
.icon-btn:hover{ background:var(--line-soft); }

@media (min-width:900px){
  .hdr__in{ height:96px; gap:2.25rem; }   /* 58px badge + 19px clear */
  .nav{ display:flex; }
  .hdr__tel{ display:inline-flex; }
  .hdr__cta{ display:inline-flex; padding:.8rem 1.4rem; min-height:48px; font-size:.98rem; }
  .icon-btn--menu{ display:none; }
  .icon-btn--tel{ display:none; }
}

/* ── Mobile menu ──────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:95;
  background:var(--panel); color:var(--panel-ink);
  display:flex; flex-direction:column;
  padding:1.15rem var(--gut) 2.5rem;
  transform:translateY(-100%);
  pointer-events:none;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
/* author-level so the hidden attribute actually removes it ,
   .menu{display:flex} would otherwise defeat the UA [hidden] rule */
.menu[hidden]{ display:none; }
.menu.is-open{ transform:none; pointer-events:auto; }
.menu__top{ display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:1.5rem; }
.menu__brand{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:.06em; text-transform:uppercase; }
.menu .icon-btn{ color:var(--panel-ink); border-color:var(--panel-line); }
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{
  text-decoration:none; color:var(--panel-ink);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:2rem; letter-spacing:.02em;
  padding:.72rem 0; border-bottom:1px solid var(--panel-line);
}
.menu__nav a:hover{ color:var(--brass-lit); }
.menu__foot{ margin-top:auto; padding-top:2rem; display:grid; gap:.85rem; }
.menu__tel{
  font-family:var(--font-display); font-size:1.9rem; font-weight:700; letter-spacing:.02em;
  color:var(--brass-lit); text-decoration:none;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{ position:relative; isolation:isolate; background:var(--forest-deep); }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 62%;
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(12,17,10,.93) 0%, rgba(12,17,10,.8) 34%, rgba(12,17,10,.42) 62%, rgba(12,17,10,.28) 100%),
    linear-gradient(to bottom, rgba(12,17,10,.72) 0%, rgba(12,17,10,.1) 26%, rgba(12,17,10,.12) 62%, rgba(12,17,10,.78) 100%);
}
.hero__in{
  min-height:min(94svh, 900px);
  padding-top:clamp(7.5rem, 20vw, 11rem);
  padding-bottom:clamp(2.5rem, 6vw, 4rem);
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
}
.hero__copy{ max-width:62ch; }
.hero .eyebrow{ color:var(--brass-lit); }
.hero h1{ color:#fff; margin-bottom:1.35rem; }
.hero__sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(1.09rem, 2.4vw, 1.32rem);
  line-height:1.55; max-width:44ch; margin-bottom:2.15rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__cta .btn{ flex:1 1 auto; min-width:min(100%, 200px); }
@media (min-width:600px){
  .hero__cta .btn{ flex:0 0 auto; }
}
@media (min-width:900px){
  .hero h1{ max-width:15ch; }
  .hero__sub{ max-width:40ch; }
}

/* Trust strip under the hero */
.trust{ background:var(--panel); color:var(--panel-ink); }
.trust__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--panel-line);
}
.trust__item{
  display:flex; align-items:center; gap:.6rem;
  padding:1.05rem .35rem;
  font-size:.83rem; font-weight:600; letter-spacing:.045em; text-transform:uppercase;
  border-bottom:1px solid var(--panel-line);
}
.trust__item:nth-child(odd){ border-right:1px solid var(--panel-line); }
.trust__item svg{ flex:0 0 auto; color:var(--brass-lit); }
@media (min-width:820px){
  .trust__grid{ grid-template-columns:repeat(4,1fr); }
  .trust__item{ border-bottom:0; border-right:1px solid var(--panel-line); padding:1.25rem .5rem; justify-content:center; }
  .trust__item:last-child{ border-right:0; }
}

/* ── Section frame ────────────────────────────────────────── */
.sec{ padding-block:clamp(4.25rem, 10vw, 8rem); scroll-margin-top:80px; }
@media (min-width:900px){ .sec{ scroll-margin-top:98px; } }
.sec--alt{ background:var(--paper-2); }
.sec__head{ max-width:56ch; margin-bottom:clamp(2.5rem, 5vw, 3.75rem); }
.sec__head h2{ margin-bottom:1.1rem; }
.sec__lede{ color:var(--stone); font-size:clamp(1.03rem,1.9vw,1.16rem); max-width:52ch; }

/* ── Services ─────────────────────────────────────────────── */
.svcs{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .svcs{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .svcs{ grid-template-columns:repeat(3,1fr); } }

.svc{
  background:var(--surface);
  padding:clamp(1.6rem,3vw,2.25rem);
  display:flex; flex-direction:column; gap:.85rem;
  text-decoration:none; color:inherit;
  position:relative;
  transition:background-color .2s ease;
}
.svc::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--timber); transform:scaleX(0); transform-origin:left;
  transition:transform .26s ease;
}
.svc:hover{ background:var(--surface-2); }
.svc:hover::after{ transform:scaleX(1); }
.svc__ico{
  width:42px; height:42px; color:var(--forest);
  stroke:currentColor; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .svc__ico{ color:var(--brass); } }
:root[data-theme="dark"] .svc__ico{ color:var(--brass); }
.svc h3{ color:var(--ink); }
.svc p{ color:var(--stone); font-size:.98rem; line-height:1.6; }
.svc__go{
  margin-top:auto; padding-top:.5rem;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--timber); display:inline-flex; align-items:center; gap:.4rem;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .svc__go{ color:var(--brass-lit); } }
:root[data-theme="dark"] .svc__go{ color:var(--brass-lit); }
.svc__go svg{ transition:transform .22s ease; }
.svc:hover .svc__go svg{ transform:translateX(4px); }

/* ── Work / gallery ───────────────────────────────────────── */
.work__bar{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:1.9rem;
}
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter{
  font-family:var(--font-body);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.62rem 1.05rem; min-height:42px;
  background:transparent; color:var(--stone);
  border:1.5px solid var(--line); border-radius:100px;
  cursor:pointer; transition:all .18s ease;
}
.filter:hover{ color:var(--ink); border-color:var(--ink-2); }
.filter[aria-pressed="true"]{ background:var(--forest); border-color:var(--forest); color:#fff; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .filter[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); color:#14170f; }
}
:root[data-theme="dark"] .filter[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); color:#14170f; }

.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:34vw;
  grid-auto-flow:dense;
  gap:10px;
}
@media (min-width:760px){
  .gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:15.5vw; gap:14px; }
}
@media (min-width:1300px){ .gallery{ grid-auto-rows:200px; } }

.tile{
  position:relative; overflow:hidden; border-radius:var(--r);
  padding:0; border:0; cursor:pointer; background:var(--paper-2);
  display:block; width:100%; height:100%;
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .62s cubic-bezier(.2,.6,.2,1);
}
.tile:hover img, .tile:focus-visible img{ transform:scale(1.055); }
.tile__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,17,10,.88) 0%, rgba(12,17,10,.25) 42%, rgba(12,17,10,0) 72%);
  opacity:.85; transition:opacity .3s ease;
}
.tile:hover .tile__veil{ opacity:1; }
.tile__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.85rem .95rem;
  text-align:left; color:#fff;
}
.tile__cap b{
  display:block;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.88rem,2vw,1.06rem); letter-spacing:.03em; line-height:1.08;
}
.tile__cap span{
  display:block; margin-top:.22rem;
  font-size:.71rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brass-lit);
}
.tile__zoom{
  position:absolute; top:.7rem; right:.7rem;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  display:grid; place-items:center; color:#fff;
  opacity:0; transform:scale(.85); transition:opacity .24s ease, transform .24s ease;
}
.tile:hover .tile__zoom, .tile:focus-visible .tile__zoom{ opacity:1; transform:none; }

/* Featured spans, dropped while a filter is active so the grid stays tidy */
.gallery:not(.is-filtered) .t-big{  grid-column:span 2; grid-row:span 2; }
.gallery:not(.is-filtered) .t-wide{ grid-column:span 2; }
@media (min-width:760px){
  .gallery:not(.is-filtered) .t-tall{ grid-row:span 2; }
}
.tile[hidden]{ display:none; }

.work__foot{
  margin-top:2.25rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem;
  padding-top:1.75rem; border-top:1px solid var(--line);
}
.work__foot p{ color:var(--stone); font-size:1rem; margin-right:auto; max-width:40ch; }

/* ── Lightbox ─────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:120;
  background:rgba(8,11,7,.96);
  display:none; align-items:center; justify-content:center;
  padding:clamp(.75rem,3vw,2.5rem);
}
.lb.is-open{ display:flex; }
.lb__fig{ margin:0; max-width:1200px; width:100%; display:flex; flex-direction:column; gap:1rem; align-items:center; }
.lb__img{
  max-width:100%; max-height:74svh; width:auto; height:auto;
  object-fit:contain; border-radius:var(--r);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.lb__cap{ text-align:center; color:#fff; }
.lb__cap b{
  display:block; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:1.35rem; letter-spacing:.03em;
}
.lb__cap span{
  display:block; margin-top:.3rem; color:var(--brass-lit);
  font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
.lb__count{ color:rgba(255,255,255,.55); font-size:.8rem; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.lb__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background-color .18s ease;
}
.lb__btn:hover{ background:rgba(255,255,255,.24); }
.lb__prev{ left:clamp(.5rem,2vw,2rem); }
.lb__next{ right:clamp(.5rem,2vw,2rem); }
.lb__close{
  position:absolute; top:clamp(.75rem,2vw,1.6rem); right:clamp(.75rem,2vw,1.6rem);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; display:grid; place-items:center; cursor:pointer;
}
.lb__close:hover{ background:rgba(255,255,255,.24); }
@media (max-width:620px){
  .lb__btn{ top:auto; bottom:1rem; transform:none; width:46px; height:46px; }
  .lb__img{ max-height:62svh; }
}

/* ── Why us ───────────────────────────────────────────────── */
.why__grid{ display:grid; gap:clamp(2.25rem,5vw,4rem); align-items:center; }
@media (min-width:980px){ .why__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.why__media{ position:relative; }
.why__media img{ width:100%; border-radius:var(--r); box-shadow:var(--shadow-lift); }
.why__stamp{
  position:absolute; right:-10px; bottom:-16px;
  background:var(--panel); color:var(--panel-ink);
  padding:1rem 1.15rem; border-radius:var(--r);
  border-left:3px solid var(--brass);
  max-width:64%;
}
.why__stamp b{
  display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:.04em; line-height:1.1;
}
.why__stamp span{ display:block; margin-top:.28rem; font-size:.78rem; color:var(--panel-ink-2); line-height:1.4; }

.reasons{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.reason{
  display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.05rem;
  padding:1.35rem 0; border-bottom:1px solid var(--line);
}
.reason:first-child{ padding-top:0; }
.reason__tick{
  grid-row:span 2; width:26px; height:26px; margin-top:.15rem;
  color:var(--brass); stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.reason h3{ color:var(--ink); }
.reason p{ color:var(--stone); font-size:.99rem; }

/* ── Process ──────────────────────────────────────────────── */
.steps{ display:grid; gap:0; counter-reset:step; position:relative; }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); } }
.step{
  background:var(--paper);
  padding:1.85rem 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.7rem;
}
.sec--alt .step{ background:var(--paper-2); }
@media (min-width:860px){
  .step{ padding:2.1rem clamp(1.1rem,2vw,1.6rem) 2.25rem; border-top:0; }
  .step:first-child{ padding-left:0; }
  .step:last-child{ padding-right:0; }
}
.step__n{
  font-family:var(--font-display); font-weight:700;
  font-size:2.9rem; line-height:.85; color:var(--brass);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:.7rem;
}
.step__n .rule--short{ margin-bottom:.5rem; }
.step h3{ color:var(--ink); }
.step p{ color:var(--stone); font-size:.97rem; }

/* ── Quote ────────────────────────────────────────────────── */
.quote{ background:var(--panel); color:var(--panel-ink); position:relative; overflow:hidden; }
.quote__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
@media (min-width:980px){ .quote__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
.quote .eyebrow{ color:var(--brass-lit); }
.quote h2{ color:#fff; margin-bottom:1.1rem; }
.quote__lede{ color:var(--panel-ink-2); font-size:clamp(1.03rem,1.9vw,1.16rem); max-width:46ch; margin-bottom:2.25rem; }

.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.45rem; }
.field label{
  font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--panel-ink-2);
}
.field label .req{ color:var(--brass-lit); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:1.02rem;
  color:#fff; background:rgba(255,255,255,.06);
  border:1.5px solid var(--panel-line); border-radius:var(--r);
  padding:.92rem 1rem; min-height:54px; width:100%;
  transition:border-color .18s ease, background-color .18s ease;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b3a4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:18px;
  padding-right:2.75rem;
}
.field select option{ background:#1a291d; color:#fff; }
.field textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(236,238,230,.42); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brass-lit); background:rgba(255,255,255,.1); outline:none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:none; }
.field.is-bad input, .field.is-bad textarea{ border-color:#e0765c; }
.field__err{ font-size:.82rem; color:#f0a08c; min-height:0; }
.field:not(.is-bad) .field__err{ display:none; }
@media (min-width:560px){ .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } }

.form__note{ font-size:.86rem; color:var(--panel-ink-2); line-height:1.5; }
.form__status{ font-size:.95rem; line-height:1.5; padding:.9rem 1.05rem; border-radius:var(--r); display:none; }
.form__status.is-on{ display:block; }
.form__status.is-ok{ background:rgba(201,151,61,.15); border:1px solid rgba(201,151,61,.45); color:#f0dcb4; }
.form__status.is-err{ background:rgba(224,118,92,.14); border:1px solid rgba(224,118,92,.45); color:#f0a08c; }

.aside{ display:grid; gap:1.75rem; }
.aside__card{ border:1px solid var(--panel-line); border-radius:var(--r); padding:1.6rem; background:var(--panel-2); }
.aside__card h3{ color:#fff; margin-bottom:1.1rem; font-size:1.12rem; }
.next{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; counter-reset:n; }
.next li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; counter-increment:n; }
.next li::before{
  content:counter(n);
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  width:24px; height:24px; border-radius:50%; margin-top:.12rem;
  background:var(--brass); color:#14170f;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.next li span{ color:var(--panel-ink-2); font-size:.95rem; line-height:1.5; }
.next li b{ color:var(--panel-ink); font-weight:600; }

.direct{ display:grid; gap:.65rem; }
.direct a{
  display:flex; align-items:center; gap:.85rem;
  text-decoration:none; color:var(--panel-ink);
  padding:.95rem 1.1rem; min-height:58px;
  border:1px solid var(--panel-line); border-radius:var(--r);
  background:var(--panel-2);
  transition:border-color .18s ease, background-color .18s ease;
}
.direct a:hover{ border-color:var(--brass); background:rgba(201,151,61,.09); }
.direct svg{ color:var(--brass-lit); flex:0 0 auto; }
.direct b{ display:block; font-family:var(--font-display); font-size:1.14rem; font-weight:700; letter-spacing:.03em; }
.direct span{ display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--panel-ink-2); }
/* an email address is content, not a label, keep its real case and let it wrap */
.direct .email{ text-transform:none; letter-spacing:.01em; font-size:.82rem; overflow-wrap:anywhere; }

/* ── Footer ───────────────────────────────────────────────── */
.ftr{ background:var(--panel); color:var(--panel-ink); border-top:1px solid var(--panel-line); }
.ftr__grid{
  display:grid; gap:2.5rem;
  padding-block:clamp(3rem,6vw,4.5rem);
}
@media (min-width:760px){ .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:1060px){ .ftr__grid{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:3rem; } }
.ftr h4{ font-size:.78rem; letter-spacing:.15em; color:var(--brass-lit); margin-bottom:1.15rem; }
/* --brass is too dark on the footer's dark ground; the lifted tone clears AA */
.ftr .brand__sub{ color:var(--brass-lit); }
/* the header lockup drops its strapline on the narrowest phones */
@media (max-width:430px){ .hdr .brand__sub{ display:none; } }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ftr a:not(.btn){ color:var(--panel-ink-2); text-decoration:none; font-size:.95rem; overflow-wrap:anywhere; }
.ftr a:not(.btn):hover{ color:#fff; }
.ftr__blurb{ color:var(--panel-ink-2); font-size:.95rem; line-height:1.6; max-width:38ch; margin-top:1.1rem; }
/* Footer uses the reversed badge, so it needs no light plate behind it */
.ftr__logo{ margin-bottom:1.4rem; }
.ftr__logo img{
  display:block; width:auto;
  height:clamp(112px, 15vw, 150px);
}
.ftr__areas{ color:var(--panel-ink-2); font-size:.92rem; line-height:1.7; }
.ftr__bottom{
  border-top:1px solid var(--panel-line);
  padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center;
  font-size:.83rem; color:var(--panel-ink-2);
}
.ftr__bottom p{ margin-right:auto; }

/* ── Sticky mobile CTA ────────────────────────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:1fr 1.25fr; gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
@supports not (backdrop-filter: blur(1px)){ .dock{ background:var(--paper); } }
.dock.is-on{ transform:none; }
.dock .btn{ padding:.85rem 1rem; min-height:52px; font-size:1rem; }
@media (min-width:900px){ .dock{ display:none; } }
body{ padding-bottom:0; }
@media (max-width:899px){ body.has-dock{ padding-bottom:78px; } }

/* ── Reveal ───────────────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
  .tile img, .svc__go svg, .hero__media img{ transition:none !important; }
}
.no-scroll{ overflow:hidden; }

/* ── <picture> wrappers ───────────────────────────────────
   <picture> is an inline box. These rules make it transparent to layout so
   the responsive sources lay out exactly as the plain <img> tags did. */
.tile picture,
.hero__media picture,
.why__media picture,
.ftr__logo picture{ display:block; width:100%; height:100%; }
.why__media picture,
.ftr__logo picture{ height:auto; width:auto; }
.brand__badge picture{ display:contents; }

/* honeypot, off-screen, never focusable, no layout impact */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ══════════════════════════════════════════════════════════════
   SERVICE PAGES
   Additive only, nothing here touches the homepage. Same tokens,
   same type scale, same brass rule motif.
   ══════════════════════════════════════════════════════════════ */

/* ── Page banner (compact cousin of the homepage hero) ────── */
.pagehead{ position:relative; isolation:isolate; background:var(--forest-deep); }
.pagehead__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.pagehead__media picture{ display:block; width:100%; height:100%; }
.pagehead__media img{ width:100%; height:100%; object-fit:cover; }
.pagehead__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(12,17,10,.94) 0%, rgba(12,17,10,.82) 42%, rgba(12,17,10,.45) 100%),
    linear-gradient(to bottom, rgba(12,17,10,.7) 0%, rgba(12,17,10,.25) 40%, rgba(12,17,10,.7) 100%);
}
.pagehead__in{
  padding-top:clamp(6.5rem, 16vw, 9.5rem);
  padding-bottom:clamp(2.75rem, 6vw, 4.25rem);
  display:flex; flex-direction:column; align-items:flex-start;
}
.pagehead h1{
  color:#fff; max-width:18ch; margin:.35rem 0 1.1rem;
  font-size:clamp(2.3rem, 6.4vw, 4rem);
}
.pagehead__sub{
  color:rgba(255,255,255,.9); max-width:52ch;
  font-size:clamp(1.03rem, 2.1vw, 1.2rem); line-height:1.6; margin-bottom:1.9rem;
}
.pagehead__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.crumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.crumbs a{ color:var(--brass-lit); text-decoration:none; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs li{ color:rgba(255,255,255,.62); display:flex; align-items:center; gap:.45rem; }
.crumbs li+li::before{ content:"›"; color:rgba(255,255,255,.4); }

/* ── Article + sidebar ────────────────────────────────────── */
.prose-grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:start; }
@media (min-width:1000px){ .prose-grid{ grid-template-columns:minmax(0,1fr) 340px; } }

.prose{ max-width:68ch; }
.prose > * + *{ margin-top:1.15rem; }
.prose h2{
  font-size:clamp(1.6rem, 3.4vw, 2.15rem);
  margin-top:2.9rem; color:var(--ink);
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-size:1.12rem; margin-top:1.9rem; color:var(--ink);
  letter-spacing:.03em;
}
.prose p{ color:var(--ink-2); font-size:1.05rem; line-height:1.72; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--timber); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .prose a{ color:var(--brass-lit); } }
:root[data-theme="dark"] .prose a{ color:var(--brass-lit); }

.prose ul{ list-style:none; margin:1.15rem 0 0; padding:0; display:grid; gap:.7rem; }
.prose ul li{
  position:relative; padding-left:1.75rem;
  color:var(--ink-2); font-size:1.03rem; line-height:1.62;
}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:1px;
  background:var(--brass); transform:rotate(45deg);
}
.prose ol{ margin:1.15rem 0 0; padding:0; list-style:none; counter-reset:s; display:grid; gap:1.1rem; }
.prose ol li{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:.9rem;
  color:var(--ink-2); font-size:1.03rem; line-height:1.62;
}
.prose ol li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:var(--brass-text); font-variant-numeric:tabular-nums; line-height:1.5;
}

.prose__note{
  border-left:3px solid var(--brass);
  background:var(--surface); padding:1.15rem 1.35rem; border-radius:var(--r);
  margin-top:1.6rem;
}
.prose__note p{ font-size:.99rem; margin:0; }

/* ── Sticky side card ─────────────────────────────────────── */
.sidecard{
  background:var(--panel); color:var(--panel-ink);
  border-radius:var(--r); padding:1.6rem; display:grid; gap:1.1rem;
}
@media (min-width:1000px){ .sidecard{ position:sticky; top:118px; } }
.sidecard h2{ font-size:1.2rem; color:#fff; margin:0; }
.sidecard p{ color:var(--panel-ink-2); font-size:.95rem; line-height:1.6; margin:0; }
.sidecard ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.sidecard ul li{
  color:var(--panel-ink-2); font-size:.93rem; line-height:1.5;
  padding-left:1.4rem; position:relative;
}
.sidecard ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; background:var(--brass-lit); transform:rotate(45deg);
}
.sidecard .btn{ width:100%; }
.sidecard__tel{
  font-family:var(--font-display); font-size:1.55rem; font-weight:700;
  letter-spacing:.03em; color:#fff; text-decoration:none; display:block;
}
.sidecard__tel:hover{ color:var(--brass-lit); }

/* ── Related services ─────────────────────────────────────── */
.related{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .related{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .related{ grid-template-columns:repeat(4,1fr); } }
.related a{
  background:var(--surface); padding:1.5rem 1.4rem;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.5rem;
  transition:background-color .2s ease;
}
.related a:hover{ background:var(--surface-2); }
.related h3{ font-size:1.05rem; color:var(--ink); }
.related p{ color:var(--stone); font-size:.92rem; line-height:1.55; margin:0; }
.related span{
  margin-top:auto; padding-top:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass-text);
}

/* ── FAQ accordion ────────────────────────────────────────
   Native <details>/<summary>: no JavaScript, keyboard-operable and
   screen-reader friendly for free, and open by default without JS. */
.faq{ display:grid; gap:0; border-top:1px solid var(--line); max-width:68ch; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.25rem 0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.02rem,2.1vw,1.16rem);
  letter-spacing:.02em; line-height:1.3; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; margin-left:auto; flex:0 0 auto;
  width:13px; height:13px; margin-top:.35em;
  border-right:2px solid var(--brass); border-bottom:2px solid var(--brass);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq summary:hover{ color:var(--timber); }
.faq summary:focus-visible{ outline:2.5px solid var(--brass-lit); outline-offset:2px; }
.faq__a{ padding:0 0 1.35rem; }
.faq__a p{ color:var(--ink-2); font-size:1.02rem; line-height:1.7; margin:0; }
.faq__a p + p{ margin-top:.8rem; }
.faq__a a{ color:var(--timber); text-decoration:underline; text-underline-offset:2px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .faq__a a{ color:var(--brass-lit); } }
:root[data-theme="dark"] .faq__a a{ color:var(--brass-lit); }
@media (prefers-reduced-motion: reduce){ .faq summary::after{ transition:none; } }

/* Links inside the form status message (the fallback phone and email) must be
   visible against both the success and error backgrounds. */
.form__status a{ color:inherit; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.form__status a:hover{ color:#fff; }
.form__status a:focus-visible{ outline:2px solid currentColor; outline-offset:2px; border-radius:2px; }

/* Footer link tap targets.
   The links were 18px tall, below the 24px WCAG 2.2 minimum and well below a
   comfortable thumb target. The list gap is traded for padding on the anchor
   itself, so the touch area grows while the visual rhythm barely moves. */
.ftr ul{ gap:0; }
.ftr li a:not(.btn){ display:inline-block; padding:.62rem 0; }
.ftr__areas{ line-height:1.9; }