/* ============================================================
   THE SAMPLE DECK — Espresso & Bronze rendition
   The structure is unchanged: real material, real spec, the room it
   became. What changed is the material the page itself is made of —
   espresso timber, copper metalwork, limestone text, copper as the
   one action. Shared by the homepage and the 8 service pages.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300..700;1,300..600&family=Marcellus&display=swap");

:root {
  /* Espresso: warm brown-black, drawn from walnut plank and dark timber.
     Deliberately warmer and deeper than the near-black this site once used. */
  --espresso:      #16110E;
  --espresso-up:   #211915;
  --espresso-deep: #0E0A08;
  --line:          #33271F;   /* hairline metal-in-shadow */
  --line-soft:     #241C17;

  /* One metal, three states of it. The gold-tan bronze this replaced read as
     a second, unrelated material; copper alone is what the palette is made of.
     Bright lights text, mid carries the action, dark recedes into structure. */
  --copper-bright: #FF8A45;   /* lit copper — labels, kickers, small caps. 8.01:1 on espresso */
  --copper:        #E86E28;   /* the action, fills only. Ink label 5.73:1 — the label is
                                 ink, not white, because a brighter orange cannot carry
                                 white at 11px and still clear AA */
  --copper-press:  #C8571B;
  --copper-dark:   #9A4A1C;   /* oxidised — recessive edges and rings */

  /* Limestone: the light. */
  --bone:          #EDE6DD;
  --bone-soft:     #B9AEA2;
  --bone-faint:    #8F8377;
  --white:         #FFFFFF;

  --text-lede: 19px;
  --text-subhead: 21px;  /* h3 / card title, between lede and stat */

  --shell: 1240px;
  --gut: 32px;

  --band: 116px;
  --band-tight: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--bone);
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Every heading in this world is Marcellus. Set it once here so a heading in a
   container without its own rule — a post h1, the thank-you panel — never falls
   back to the body sans. Component rules still set their own sizes. */
h1, h2, h3, h4 {
  font-family: Marcellus, "Times New Roman", serif;
  font-weight: 400; letter-spacing: .012em; color: var(--bone);
}

.shell, .container { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- Lettering ----------
   Marcellus is inscriptional — Roman letterforms cut for stone and cast
   in copper. Set open, never tight: luxury reads in the spacing, and
   negative tracking is what made the last rendition feel like software. */
.d-name {
  font-family: Marcellus, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.06;
}
.d-spec {
  font-family: Karla, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.d-num { font-family: Marcellus, serif; font-variant-numeric: tabular-nums; font-weight: 400; }


/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 30px;
  padding: 0 var(--gut); height: 84px;
  background: color-mix(in srgb, var(--espresso) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-logo { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.nav-logo img { width: 40px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links.util { margin-left: auto; gap: 22px; }
/* :not(.btn) matters — `.nav-links a` outranks `.btn-primary` on specificity,
   so without it the nav's Free Estimate button inherited bone-soft text on
   copper (2.03:1) and 4px padding instead of its own. */
.nav-links a:not(.btn) {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--bone-soft);
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav-links a:not(.btn):hover { color: var(--bone); border-bottom-color: var(--copper-bright); }
.nav-links a:not(.btn).active { color: var(--bone); border-bottom-color: var(--copper); }
.nav-links .btn { padding: 14px 26px; }
.nav-phone { font-variant-numeric: tabular-nums; letter-spacing: 0.1em !important; }
.nav-drop { position: relative; }
.nav-caret { font-size: 11px; }
.nav-menu {
  display: none; position: absolute; top: 100%; left: -18px; min-width: 252px;
  background: var(--espresso-up); border: 1px solid var(--line); padding: 10px 0;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: block; }
.nav-menu a { display: block; padding: 11px 22px; border: 0; letter-spacing: 0.13em; color: var(--bone-soft); }
.nav-menu a:hover { color: var(--copper); background: transparent; }
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line);
  width: 44px; height: 44px; cursor: pointer; padding: 0; place-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 1px; background: var(--bone); }

/* ---------- Controls ----------
   No offset press shadow, no heavy outline. A luxury control is a thin
   rule and a lot of air; the copper fill carries the one action. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 19px 40px; border: 1px solid transparent; border-radius: 0;
  font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary { background: var(--copper); color: var(--espresso); }
.btn-primary:hover { background: var(--copper-press); color: var(--bone); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--copper); }
.btn-ghost:hover { background: rgba(180, 85, 39, .16); color: var(--copper-bright); border-color: var(--copper-bright); }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

/* ---------- Hero ----------
   One photograph, and the type sits in it. No plate above it, no pattern behind
   it — the room is the whole first viewport, and the only thing laid over it is
   the gradient that keeps the sentence readable. */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88vh, 840px);
  display: flex; align-items: flex-end;
  background: var(--espresso-deep);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 82%;
  filter: saturate(.94) brightness(.86);
}
/* The scrim. Deep along the bottom where the type sits, easing to clear across
   the upper right so the windows and the tub stay in the picture. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* A wedge, not a wash: deep in the bottom-left corner where the sentence sits,
     clearing toward the top right so the windows and the tub stay lit. Measured
     against the composited photograph, not guessed. */
  background:
    linear-gradient(to top, var(--espresso-deep) 0%,
      color-mix(in srgb, var(--espresso-deep) 88%, transparent) 30%,
      color-mix(in srgb, var(--espresso-deep) 62%, transparent) 50%,
      color-mix(in srgb, var(--espresso-deep) 20%, transparent) 70%,
      transparent 90%),
    linear-gradient(to right, color-mix(in srgb, var(--espresso-deep) 58%, transparent) 0%,
      color-mix(in srgb, var(--espresso-deep) 18%, transparent) 46%,
      transparent 74%);
}
.hero-type {
  position: relative; z-index: 2;
  max-width: var(--shell); margin: 0 auto; width: 100%;
  padding: 0 var(--gut) var(--band-tight);
}
.hero-type h1 {
  margin: 0;
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.03; letter-spacing: .012em;
  text-wrap: balance; max-width: 15ch;
}
.hero-type h1 em { font-style: normal; color: var(--copper-bright); }
.hero-lede {
  margin: 24px 0 0; color: var(--bone);
  font-size: var(--text-lede); max-width: 46ch;
}
.hero-type .hero-ctas { margin-top: 36px; }
.hero-cap {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  color: var(--bone-faint);
  padding: 22px var(--gut);
}

/* The credentials, lifted out of the hero so the sentence sits low in the frame
   and the room keeps its light. A quiet strip, copper-ruled, between the
   photograph and the trades. */
.cred-strip { background: var(--espresso-deep); border-bottom: 1px solid var(--line); }
.cred-strip .shell { display: flex; flex-wrap: wrap; gap: 44px; padding-top: 26px; padding-bottom: 26px; border-top: 2px solid var(--copper); }
.cred-strip .shell > div { display: grid; gap: 6px; }
.cred-strip strong { font-family: Marcellus, serif; font-weight: 400; font-size: 26px; line-height: 1; }
@media (max-width: 620px) { .cred-strip .shell { gap: 24px; } }

/* ---------- The deck ---------- */
.deck { padding: var(--band) 0; }
.sec-head, .section-head { margin-bottom: 54px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.h-sec, .sec-head h2, .section-head h2 {
  margin: 0; font-family: Marcellus, serif; font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px);
  line-height: 1.08; letter-spacing: 0.012em;
  max-width: 26ch; text-wrap: balance;
}
.sec-head p, .section-head p { margin: 0; color: var(--bone-soft); max-width: 48ch; }

.deck-body { display: grid; grid-template-columns: 320px 1fr; border: 1px solid var(--line); background: var(--espresso-up); }
.chip-rail { border-right: 1px solid var(--line); display: grid; grid-auto-rows: 1fr; }
.chip-btn {
  display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 18px;
  width: 100%; padding: 16px 20px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; text-align: left;
  font-family: inherit; color: var(--bone-soft); transition: background-color .3s ease, color .3s ease;
}
.chip-btn:last-child { border-bottom: 0; }
.chip-btn img { width: 64px; height: 64px; object-fit: cover; filter: saturate(.9); }
.chip-btn span { display: block; }
.chip-btn .cn { font-family: Marcellus, serif; font-size: 17px; line-height: 1.15; letter-spacing: .01em; }
.chip-btn .cs { font-family: Karla, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--bone-faint); }
.chip-btn:hover { background: rgba(180, 85, 39, .08); color: var(--bone); }
.chip-btn[aria-selected="true"] { background: var(--espresso-deep); color: var(--bone); box-shadow: inset 3px 0 0 var(--copper); }
.chip-btn[aria-selected="true"] .cs { color: var(--copper-bright); }

.deck-view { display: grid; grid-template-columns: 1fr 1fr; }
.deck-spec { padding: 46px 44px 40px; display: flex; flex-direction: column; }
.deck-spec h3 { margin: 6px 0 0; font-family: Marcellus, serif; font-weight: 400; font-size: 31px; line-height: 1.1; letter-spacing: .012em; }
.deck-spec .lede { color: var(--bone-soft); margin: 18px 0 34px; }
.spec-rows { margin: 0 0 34px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.spec-rows div { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.spec-rows dt { color: var(--bone-faint); font-size: 15px; }
.spec-rows dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--bone); font-size: 15px; }
.proof strong { color: var(--copper-bright); }
.deck-shot { border-left: 1px solid var(--line); position: relative; min-height: 400px; }
.deck-shot img { width: 100%; height: 100%; object-fit: cover; }
.deck-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px;
  background: linear-gradient(to top, rgba(14,10,8,.9), rgba(14,10,8,0));
  color: var(--bone-soft);
}

/* ---------- Trades ---------- */
.trades { padding: 0 0 var(--band); }
.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trade { display: grid; grid-template-rows: auto 1fr; background: var(--espresso); transition: background-color .35s ease; }
.trade img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; filter: saturate(.88) brightness(.9); transition: filter .5s ease; }
.trade-label { display: flex; align-items: center; gap: 14px; padding: 22px 22px 24px; }
.trade-label .d-spec { color: var(--copper-bright); font-size: 11px; }
.trade-label b { font-family: Marcellus, serif; font-weight: 400; font-size: 17px; line-height: 1.15; letter-spacing: .012em; }
.trade-label .arw { margin-left: auto; color: var(--bone-faint); transition: transform .35s ease, color .35s ease; }
.trade:hover { background: var(--espresso-up); box-shadow: inset 0 3px 0 var(--copper); }
.trade:hover img { filter: saturate(1) brightness(1); }
.trade:hover .arw { color: var(--copper); transform: translateX(6px); }

/* ---------- Featured work ---------- */
.work { background: var(--espresso-deep); padding: var(--band) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* The chips already carry their own counts, so this line would only repeat
   them on screen. It exists so filtering is not a silent change for anyone
   listening to the page rather than looking at it. */
.g-status, .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line); background: var(--espresso-up); }
.g-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.88); transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .6s ease; }
.g-card:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.g-veil { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(14,10,8,.95), rgba(14,10,8,0)); }
.g-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px; display: grid; gap: 7px; }
.g-cat { font-family: Karla, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .24em; color: var(--copper-bright); }
.g-card:hover { border-color: var(--copper); }
.g-title { font-family: Marcellus, serif; font-size: 19px; line-height: 1.15; letter-spacing: .012em; color: var(--bone); }
.work-foot { text-align: center; margin-top: 50px; }

/* ---------- Before / after ---------- */
.ba-section { padding: var(--band) var(--gut); display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize; border: 1px solid var(--line); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 50%)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bone); left: 50%; }
.ba-handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; background: var(--espresso-deep); border: 1px solid var(--copper);
  border-radius: 50%; display: grid; place-items: center;
}
.ba-handle span::after { content: "\2194"; color: var(--bone); }
.ba-tag {
  position: absolute; top: 16px; padding: 8px 14px;
  background: color-mix(in srgb, var(--espresso-deep) 85%, transparent);
  border: 1px solid var(--line); color: var(--bone-soft);
  font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .24em;
}
.ba-tag-b { right: 16px; }
.ba-tag-a { left: 16px; color: var(--copper-bright); border-color: var(--copper-dark); }

/* ---------- Reviews ---------- */
.reviews { padding: 0 0 var(--band); }
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.score { display: flex; align-items: center; gap: 18px; }
.score b { font-family: Marcellus, serif; font-weight: 400; font-size: clamp(29px, 3.3vw, 45px); line-height: 1; }
.stars { color: var(--copper); font-size: 17px; letter-spacing: 4px; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rev {
  background: var(--espresso-up); border: 1px solid var(--line); padding: 34px 32px 30px;
  display: flex; flex-direction: column; gap: 16px;
}
.rev-top { display: flex; align-items: center; gap: 14px; }
.rev-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  border: 1px solid var(--copper-dark); color: var(--copper-bright);
  display: grid; place-items: center; font-family: Marcellus, serif; font-size: 17px;
}
.rev-name b { display: block; font-family: Marcellus, serif; font-weight: 400; font-size: 17px; letter-spacing: .012em; }
.rev-name span { color: var(--bone-faint); font-size: 13px; }
.rev p { margin: 0; color: var(--bone-soft); font-size: 15px; flex: 1; font-style: italic; }
.rev .src { color: var(--bone-faint); }

/* ---------- Close ---------- */
.close-band, .cta-band { background: var(--espresso-deep); padding: var(--band) 0; text-align: center; border-top: 1px solid var(--line); }
.close-band h2, .cta-band h2 {
  margin: 0 auto; max-width: 22ch; color: var(--bone);
  font-family: Marcellus, serif; font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px); line-height: 1.1; letter-spacing: .012em;
}
.close-band p, .cta-band p { margin: 24px auto 40px; max-width: 52ch; color: var(--bone-soft); }
.close-band a.tel, .cta-band a[href^="tel"] { color: var(--copper); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Footer ---------- */
.footer { background: var(--espresso-deep); color: var(--bone-soft); padding: 82px 0 0; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut) 56px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
.footer h3 { font-family: Karla, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .26em; color: var(--copper-bright); margin: 0 0 20px; }
/* 13px to match .footer p — links were inheriting the 17px body size, so the
   Visit column mixed two sizes in one block. */
.footer a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 13px; color: var(--bone-soft); transition: color .25s ease; }
.footer a:hover { color: var(--copper); }
.footer p { margin: 0 0 14px; font-size: 13px; }
.footer-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 22px; }
.footer-mark img { width: 46px; height: auto; }
/* any footer logo, wrapped or not, stays a mark rather than a banner */
.footer-inner > div > img { width: 46px; height: auto; }
.footer-socials { display: flex; gap: 14px; margin-top: 14px; }
.footer-socials a { width: 44px; height: 44px; min-height: 44px; }
.footer-social { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid !important; place-items: center; padding: 0 !important; }
.footer-social:hover { border-color: var(--copper); color: var(--copper-bright); }
.footer-bar { border-top: 1px solid var(--line); }
.footer-bar div { max-width: var(--shell); margin: 0 auto; padding: 22px var(--gut); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--bone-faint); }

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.section { padding: var(--band) 0; }

.crumbs {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 26px 0; color: var(--bone-faint);
  font-family: Karla, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; font-size: 11px;
}
.crumbs a { color: var(--bone-soft); }
.crumbs a:hover { color: var(--copper); }
.crumbs span[aria-hidden] { color: var(--line); }

.service-hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
  padding: 34px var(--gut) var(--band);
}
.service-hero h1 {
  margin: 0; font-family: Marcellus, serif; font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px);
  line-height: 1.08; letter-spacing: .012em; text-wrap: balance;
}
.service-hero .lede {
  color: var(--bone-soft); font-size: var(--text-lede); margin: 26px 0 38px; max-width: 46ch;
  padding-top: 26px; border-top: 1px solid var(--copper);
}
.service-hero img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }

.service-body { padding-bottom: var(--band-tight); }
.service-body > * { max-width: 820px; }
.service-body h2 {
  font-family: Marcellus, serif; font-weight: 400; font-size: 31px;
  line-height: 1.12; letter-spacing: .012em; margin: 64px 0 22px;
}
.service-body p { color: var(--bone-soft); margin: 0 0 20px; }

.scope-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
  margin: 30px 0 10px; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
.scope-grid li {
  padding: 15px 0 15px 26px; border-bottom: 1px solid var(--line-soft);
  font-size: 15px; color: var(--bone-soft); position: relative;
}
.scope-grid li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 7px; height: 7px; background: var(--copper); border-radius: 50%;
}

.svc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc-gallery figure { margin: 0; background: var(--espresso); display: grid; grid-template-rows: auto 1fr; }
.svc-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.9) brightness(.9); }
.svc-gallery figcaption {
  padding: 18px 20px 20px; color: var(--bone-faint);
  font-family: Karla, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; font-size: 11px;
}

.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; padding: 26px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 22px; align-items: center;
  font-family: Marcellus, serif; font-size: 19px; line-height: 1.2; letter-spacing: .012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--copper); font-size: 19px; line-height: 1; font-family: Karla, sans-serif; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--bone-soft); margin: 0 0 26px; max-width: 68ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .deck-body { grid-template-columns: 260px 1fr; }
  .deck-view { grid-template-columns: 1fr; }
  .deck-shot { border-left: 0; border-top: 1px solid var(--line); }
  .trade-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .service-hero { gap: 40px; }
}
@media (max-width: 1040px) {
  .nav { height: auto; flex-wrap: wrap; gap: 12px; padding: 14px var(--gut); }
  .nav-toggle { display: grid; order: 2; }
  .nav-links.util { order: 1; margin-left: auto; }
  .nav-links.main { display: none; }
  .nav[data-open="true"] .nav-links.main {
    display: flex; order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; border-top: 1px solid var(--line); padding-top: 8px;
  }
  .nav-links.main > a, .nav-drop > a { padding: 13px 0; border-bottom: 0; }
  .nav-drop .nav-menu { position: static; display: block; border: 0; padding: 0 0 8px 18px; min-width: 0; }
  .nav-menu a { padding: 10px 0; }
  .nav-phone { display: none; }
}
@media (max-width: 860px) {
  :root { --band: 76px; --gut: 20px; }
  .hero { border-bottom: 0; }
  .deck-body { grid-template-columns: 1fr; }
  .chip-rail { border-right: 0; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; }
  .chip-btn { grid-template-columns: 1fr; width: 160px; flex: none; border-bottom: 0; border-right: 1px solid var(--line-soft); gap: 10px; }
  .chip-btn img { width: 100%; height: 78px; }
  .chip-btn[aria-selected="true"] { box-shadow: inset 0 3px 0 var(--copper); }
  .deck-spec { padding: 34px var(--gut) 30px; }
  .g-grid, .rev-grid { grid-template-columns: repeat(2, 1fr); }
  .ba-section { grid-template-columns: 1fr; gap: 34px; }
  .trade-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .service-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: var(--band-tight); }
  .svc-gallery, .scope-grid { grid-template-columns: 1fr; }
  .service-body h2 { margin-top: 46px; }
}

@media (max-width: 1040px) {
  .hero { min-height: min(84vh, 720px); }
  .hero-type h1 { font-size: clamp(38px, 5.6vw, 60px); max-width: 18ch; }
}
@media (max-width: 620px) {
  .g-grid, .rev-grid { grid-template-columns: 1fr; }
  /* Portrait phones: the room needs room, so the scrim carries more of the frame
     and the type block tightens rather than the photo shrinking. */
  .hero { min-height: 88vh; }
  .hero-img { object-position: center 78%; }
  .hero::after {
    background: linear-gradient(to top, var(--espresso-deep) 0%,
      color-mix(in srgb, var(--espresso-deep) 92%, transparent) 34%,
      color-mix(in srgb, var(--espresso-deep) 55%, transparent) 66%,
      color-mix(in srgb, var(--espresso-deep) 20%, transparent) 100%);
  }
  .hero-type { padding-bottom: 52px; }
  .hero-type h1 { max-width: none; }
  .hero-type .hero-ctas { margin-top: 28px; }
  .hero-cap { padding: 14px var(--gut); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   MIGRATION LAYER — the remaining templates
   The blog posts, project pages, products, services and contact still carry
   inline <style> blocks written against the incumbent token names. Rather than
   rewrite 36 files of inline CSS, those names are re-pointed at the espresso
   palette here. Transitional: delete this block once the inline styles are
   rewritten against the deck tokens directly.
   ============================================================ */
:root {
  --text-primary:   var(--bone);
  --text-secondary: var(--bone-soft);
  --text-muted:     var(--bone-faint);
  --text-accent:    var(--copper-bright);
  --accent:         var(--copper);
  --accent-hover:   var(--copper-press);
  --border-subtle:  var(--line-soft);
  --border-default: var(--line);
  --border-strong:  var(--line);
  --surface-page:   var(--espresso);
  --surface-raised: var(--espresso-up);
  --surface-sunken: var(--espresso-up);
  --surface-ink:    var(--espresso-deep);
  --ink-900:        var(--espresso-deep);
  --ink-800:        var(--espresso-up);
  --ink-700:        var(--line);
  --ink-500:        var(--bone-faint);
  --ink-400:        var(--bone-faint);
  --ink-300:        var(--bone-soft);
  --ink-100:        var(--bone-soft);
  --ink-50:         var(--bone);
  --font-display:   Marcellus, "Times New Roman", serif;
  --font-sans:      Karla, "Helvetica Neue", Arial, sans-serif;
  --text-display-sm: 31px;
  --text-xl:  26px;
  --text-lg:  19px;
  --text-md:  17px;
  --text-sm:  15px;
  --text-xs:  11px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-label: 0.22em;
  --tracking-wide: 0.22em;
}

/* ---------- Page hero (blog index, portfolio, contact, products) ---------- */
.page-hero { padding: 40px var(--gut) var(--band-tight); }
.page-hero h1 {
  margin: 0; font-family: Marcellus, serif; font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px); line-height: 1.08; letter-spacing: .012em;
  max-width: 24ch; text-wrap: balance;
}
.page-hero p { color: var(--bone-soft); max-width: 56ch; margin: 22px 0 0; font-size: var(--text-lede); }

/* ---------- Long-form reading ---------- */
.post { max-width: 780px; margin: 0 auto; padding-bottom: var(--band); }
.post h1 { font-size: clamp(29px, 3.3vw, 45px); line-height: 1.08; margin: 0 0 12px; }
.post h2 {
  font-family: Marcellus, serif; font-weight: 400; font-size: 31px;
  line-height: 1.14; letter-spacing: .012em; margin: 56px 0 18px; color: var(--bone);
}
.post h3 { font-family: Marcellus, serif; font-weight: 400; font-size: var(--text-subhead); letter-spacing: .012em; margin: 34px 0 10px; color: var(--bone); }
.post p { color: var(--bone-soft); font-size: 17px; line-height: 1.75; }
.post strong { color: var(--bone); font-weight: 600; }
.post a { color: var(--copper-bright); border-bottom: 1px solid var(--copper-dark); }
.post a:hover { border-bottom-color: var(--copper-bright); }
.post ul, .post ol { color: var(--bone-soft); padding-left: 20px; }
.post li { margin: 0 0 10px; }
.post-hero-img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--line); margin: 34px 0 44px; filter: saturate(.9) brightness(.92); }
.post-meta, .blog-meta {
  font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--bone-faint);
}
.post-summary { color: var(--bone-soft); }
.post-cta {
  border: 1px solid var(--line);
  background: var(--espresso-up); padding: 40px; margin-top: 60px; display: grid; gap: 14px;
}
.post-cta h3 { color: var(--copper-bright); }
.post-cta h3 { margin: 0; font-family: Marcellus, serif; font-weight: 400; font-size: 26px; letter-spacing: .012em; }
.post-cta p { margin: 0; color: var(--bone-soft); }
.post-faq > div { margin: 0 0 22px; }
.post-faq h3 { margin: 0 0 8px; font-size: 19px; }

/* ---------- Blog index ---------- */
.blog-feature { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid var(--line); margin-bottom: var(--band-tight); background: var(--espresso-up); }
.blog-feature img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; min-height: 340px; filter: saturate(.9) brightness(.9); }
.blog-feature-body { padding: 46px; display: grid; gap: 18px; align-content: center; }
.blog-feature-body h2 { font-family: Marcellus, serif; font-weight: 400; font-size: 31px; line-height: 1.14; letter-spacing: .012em; margin: 0; }
.blog-feature-body p { margin: 0; color: var(--bone-soft); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: var(--band); align-items: start; }
.blog-card { border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; background: var(--espresso-up); transition: border-color .3s ease; }
.blog-card:hover { border-color: var(--copper-dark); }
.blog-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.9) brightness(.88); transition: filter .5s ease; }
.blog-card:hover img { filter: saturate(1) brightness(1); }
.blog-card-body { padding: 28px 26px 30px; display: grid; gap: 12px; align-content: start; }
.blog-card-body h3 { margin: 0; font-family: Marcellus, serif; font-weight: 400; font-size: var(--text-subhead); line-height: 1.2; letter-spacing: .012em; }
.blog-card-body h3 a { color: var(--bone); }
.blog-card-body h3 a:hover { color: var(--copper-bright); }
.blog-card-body p { margin: 0; color: var(--bone-soft); font-size: 15px; }

/* ---------- Project pages ---------- */
.proj-hero { padding: 30px 0 var(--band-tight); }
.proj-hero h1 { margin: 8px 0 0; font-family: Marcellus, serif; font-weight: 400; font-size: clamp(29px, 3.3vw, 45px); line-height: 1.08; letter-spacing: .012em; }
.proj-cat, .proj-meta {
  font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--copper-bright);
}
.proj-meta { color: var(--bone-faint); }
.proj-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.proj-gallery figure { margin: 0; background: var(--espresso); }
.proj-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.9) brightness(.9); transition: filter .5s ease; }
.proj-gallery figure:hover img { filter: saturate(1) brightness(1); }
.proj-gallery figcaption { padding: 16px 18px; color: var(--bone-faint); font-family: Karla, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; }
.proj-cta { border: 1px solid var(--line); background: var(--espresso-up); padding: 40px; margin-top: var(--band-tight); }
.proj-nav { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: var(--band-tight) 0; border-top: 1px solid var(--line); }

/* ---------- Products ---------- */
.prod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: var(--band-tight) 0; border-top: 1px solid var(--line); }
.prod-row:first-of-type { border-top: 0; }
.prod-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.prod-row.flip > .prod-media { order: 2; }
.prod-row h2 { font-family: Marcellus, serif; font-weight: 400; font-size: 31px; line-height: 1.12; letter-spacing: .012em; margin: 10px 0 16px; }
.prod-row p { color: var(--bone-soft); }
.prod-badge {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--copper-dark);
  color: var(--copper-bright); font-family: Karla, sans-serif; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .22em;
}
.spec-table { width: 100%; border-collapse: collapse; margin: 22px 0 26px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.spec-table th { color: var(--bone-faint); font-weight: 400; }
.spec-table td { color: var(--bone); font-variant-numeric: tabular-nums; }
.tier { border: 1px solid var(--line); background: var(--espresso-up); padding: 34px 30px; }
.tier h3 { font-family: Marcellus, serif; font-weight: 400; font-size: 26px; letter-spacing: .012em; margin: 0 0 12px; }
.tier p { color: var(--bone-soft); margin: 0; font-size: 15px; }

/* ---------- Services index ---------- */
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: var(--band-tight) 0; border-top: 1px solid var(--line); }
.svc-row:first-of-type { border-top: 0; }
.svc-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.svc-row.flip > .svc-media { order: 2; }
.svc-row h2 { font-family: Marcellus, serif; font-weight: 400; font-size: 31px; line-height: 1.12; letter-spacing: .012em; margin: 10px 0 14px; }
.svc-row p { color: var(--bone-soft); }
.svc-row ul { margin: 18px 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc-row li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; color: var(--bone-soft); }
.process { background: var(--espresso-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.process-step { padding: 40px 32px; background: var(--espresso-up); border: 1px solid var(--line); }
.process-step .num { font-family: Marcellus, serif; font-size: 31px; color: var(--copper-bright); letter-spacing: .012em; }
.process-step h3 { font-family: Marcellus, serif; font-weight: 400; font-size: var(--text-subhead); letter-spacing: .012em; margin: 14px 0 10px; }
.process-step p { font-size: 15px; color: var(--bone-soft); margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; padding-bottom: var(--band); }
.form { display: grid; gap: 22px; }
.form label {
  display: grid; gap: 10px; font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--bone-faint);
}
.form input, .form select, .form textarea {
  font-family: Karla, sans-serif; font-size: 17px; color: var(--bone);
  background: var(--espresso-up); border: 1px solid var(--line);
  padding: 16px 18px; border-radius: 0; width: 100%;
  transition: border-color .25s ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--bone-faint); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--copper); outline-offset: 3px; border-color: var(--copper); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.aside-card { border: 1px solid var(--line); background: var(--espresso-up); }
.aside-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.9) brightness(.9); }
.aside-body { padding: 32px 30px; }
.aside-body p { margin: 0 0 16px; color: var(--bone-soft); font-size: 15px; }
.aside-body strong { color: var(--bone); }
.thanks { display: none; padding: 56px 44px; border: 1px solid var(--line); background: var(--espresso-up); text-align: center; }
.thanks h2 { font-family: Marcellus, serif; font-weight: 400; font-size: 31px; letter-spacing: .012em; margin: 0 0 12px; }
.thanks p { color: var(--bone-soft); margin: 0; }

/* ---------- Portfolio filters ----------
   Targets `.filters button`, which is what projects.js actually renders — an
   earlier `.filter-chip` rule matched nothing and left these as raw browser
   buttons (grey #EFEFEF on a dark page). */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.filters button, .filter-chip {
  min-height: 44px;
  background: transparent; color: var(--bone-soft); border: 1px solid var(--line);
  padding: 13px 24px; border-radius: 0; cursor: pointer;
  font-family: Karla, "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.filters button:hover, .filter-chip:hover { color: var(--bone); border-color: var(--copper); }
.filters button.active, .filter-chip.active { background: var(--copper); color: var(--espresso); border-color: var(--copper); }
/* Count sits inside the chip so the bar shows where the work is before you click. */
.filters button .f-count {
  margin-left: 9px; padding-left: 9px; border-left: 1px solid currentColor;
  opacity: .6; font-variant-numeric: tabular-nums;
}
.filters button.active .f-count { opacity: .75; }
.filters button[disabled] { opacity: .35; cursor: not-allowed; }

/* On a phone six stacked chips filled the whole first screen and pushed the
   first photograph below the fold — on the one page whose job is the work.
   The chips become the same horizontally scrolling strip the deck rail uses
   below 860px, bleeding into the gutter so the cut edge shows it scrolls. */
@media (max-width: 620px) {
  .filters {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 26px calc(var(--gut) * -1) 32px; padding: 0 var(--gut) 6px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button, .filter-chip { flex: none; padding: 13px 18px; }
}

@media (max-width: 860px) {
  .blog-feature, .blog-grid, .proj-gallery, .process-grid,
  .prod-row, .svc-row, .contact-grid, .form .row2 { grid-template-columns: 1fr; }
  .prod-row.flip > .prod-media, .svc-row.flip > .svc-media { order: 0; }
  .prod-row, .svc-row { gap: 30px; }
  .contact-grid { gap: 44px; }
  .post-cta, .proj-cta, .thanks { padding: 30px 24px; }
  .blog-feature-body { padding: 30px 24px; }
}

/* ---------- Ported from per-page inline blocks ----------
   These four had no deck equivalent. Everything else in those blocks
   duplicated selectors deck.css already owns and was overriding them,
   so the inline blocks were removed and these moved here. */
.prod-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.showroom-cta { background: var(--espresso-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0; }
.compare div { border: 1px solid var(--line); padding: 30px 28px; background: var(--espresso-up); }
.compare h3 { margin: 0 0 12px; font-size: var(--text-subhead); color: var(--copper-bright); }

.post-img2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0; }
.post-img2 img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border: 1px solid var(--line); filter: saturate(.9) brightness(.92); }

@media (max-width: 860px) {
  .compare, .post-img2 { grid-template-columns: 1fr; }
}

/* ============================================================
   PROJECT LIGHTBOX
   Regression fix: these rules lived only in the retired site.css, so after the
   world change the overlay still opened but rendered completely unstyled —
   clicking a project looked like nothing happened, and the before/after slider
   inside it had no frame, so only the top image showed.
   ============================================================ */
#project-overlay {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  /* The ground is 97% opaque, so the 6px backdrop-filter behind it was
     invisible — while still forcing a full-viewport GPU blur over thirteen
     large photographs every time the lightbox opened. */
  background: color-mix(in srgb, var(--espresso-deep) 98%, transparent);
  color: var(--bone); padding: 44px clamp(20px, 5vw, 72px);
  display: flex; flex-direction: column; gap: 30px;
}
.ov-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 26px; }
.ov-top h2 {
  margin: 0; font-family: Marcellus, serif; font-weight: 400;
  font-size: clamp(29px, 3.3vw, 45px); line-height: 1.08; letter-spacing: .012em;
}
/* Was a copper eyebrow above the title. The house voice does not put a
   coloured caps label over a heading, so it reads as a caption underneath. */
.ov-meta {
  margin: 10px 0 0; font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--bone-faint);
}
.ov-ba-label {
  margin: 0 0 10px; font-family: Karla, sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--copper-bright);
}
.ov-close {
  width: 48px; height: 48px; flex: none; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
  color: var(--bone-soft); font-size: 19px; display: grid; place-items: center;
  transition: border-color .25s ease, color .25s ease;
}
.ov-close:hover { border-color: var(--copper); color: var(--copper-bright); }
.ov-close svg, .ov-step svg { display: block; }
#project-overlay :focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.ov-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
/* Grid items default to min-width:auto, so the scrolling thumb strip sized its
   own column to all 18 photos and pushed the whole dialog off-screen. */
.ov-main, .ov-side { min-width: 0; }
/* The frame is fixed and the photograph is contained inside it. `cover` at
   68vh was cutting roughly a third off every portrait shot — on a page whose
   entire job is showing the finished work. */
.ov-main {
  position: relative;
  height: min(68vh, 760px);
  background: var(--espresso-deep);
  border: 1px solid var(--line);
}
.ov-main img { width: 100%; height: 100%; object-fit: contain; }
.ov-side p { color: var(--bone-soft); margin: 0 0 24px; font-size: var(--text-lede); }
/* One scrolling row rather than a 4-wide grid. An 18-photo job stacked five
   rows deep and pushed both buttons below the fold — and decoded eighteen
   full-size originals at once, which is 1.4MB before the visitor has paged. */
.ov-thumbs {
  display: flex; min-width: 0; max-width: 100%; gap: 10px; margin-bottom: 28px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  padding-bottom: 6px;
}
.ov-thumb {
  flex: 0 0 84px; height: 84px; padding: 0; background: none; cursor: pointer;
  border: 1px solid transparent; opacity: .5;
  transition: opacity .25s ease, border-color .25s ease;
}
.ov-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ov-thumb:hover { opacity: .85; }
.ov-thumb.active { opacity: 1; border-color: var(--copper); }
.ov-thumb:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; opacity: 1; }
.ov-ba { margin-bottom: 28px; }
.ov-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.ov-arrow {
  background: transparent; border: 0; cursor: pointer; padding: 8px 0;
  color: var(--bone-soft); font-family: Karla, sans-serif; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .22em;
  transition: color .25s ease;
}
.ov-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.ov-arrow-r { text-align: right; }
.ov-arrow:hover { color: var(--copper-bright); }
.ov-arrow svg { flex: none; }

@media (max-width: 860px) {
  #project-overlay { padding: 26px 18px; gap: 22px; }
  .ov-body { grid-template-columns: 1fr; gap: 28px; }
  .ov-close { width: 44px; height: 44px; }
  /* Stacked, the strip belongs under the photograph it pages — not below a
     paragraph, where it reads as a second gallery. */
  .ov-side { display: flex; flex-direction: column; }
  .ov-thumbs { order: -1; margin-bottom: 22px; }
}

/* ---- ABOUT: value cards ---- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value { background: var(--espresso); padding: 34px 30px 38px; }
.value .d-spec { color: var(--copper-bright); font-size: 11px; }
.value h3 { font-family: Marcellus, serif; font-weight: 400; font-size: var(--text-subhead); line-height: 1.15; letter-spacing: .012em; margin: 12px 0 10px; }
.value p { color: var(--bone-soft); font-size: 15px; margin: 0; }
@media (max-width: 980px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .value-grid { grid-template-columns: 1fr; } }

/* ---- classes replacing inline styles that referenced retired tokens ---- */
.chip-kicker { color: var(--copper-bright); }
.ba-lede     { color: var(--bone-soft); }
.proof-note  { color: var(--bone-faint); }

/* ---- Project overlay: paging through a project's photos ----
   Arrows sit on the image itself so the control is where the eye already is,
   with a counter so the visitor knows how deep the set goes. */
.ov-step {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--espresso-deep) 72%, transparent);
  color: var(--bone); border: 1px solid var(--line);
  cursor: pointer; padding: 0;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ov-step:hover { background: var(--copper); color: var(--espresso); border-color: var(--copper); }
.ov-prev { left: 14px; }
.ov-next { right: 14px; }
.ov-count {
  position: absolute; right: 14px; bottom: 14px;
  background: color-mix(in srgb, var(--espresso-deep) 78%, transparent);
  color: var(--bone-soft); border: 1px solid var(--line);
  padding: 6px 12px;
  font-family: Karla, sans-serif; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .ov-step { width: 44px; height: 44px; }
  .ov-prev { left: 8px; } .ov-next { right: 8px; }
}

/* ---------- Portfolio: the work sits high ----------
   This page exists to show finished jobs, so the header earns only what it
   needs. The hero tightens, the lede is capped so it cannot run to five lines,
   and the filter bar loses half its bottom margin — together that lifts the
   first row of photographs roughly 150px up the page. */
.gallery-band .page-hero { padding-top: 46px; }
.gallery-band .page-hero h1 { margin-bottom: 14px; }
.gallery-band .page-hero p { max-width: 62ch; margin-bottom: 26px; }
.gallery-band .filters { margin-bottom: 26px; }
@media (max-width: 860px) {
  .gallery-band .page-hero { padding-top: 30px; }
}

/* ============================================================
   MOBILE LEGIBILITY — last in the file on purpose
   The 11px label step reads as an engraved plate at desk distance and as a
   squint on a phone, and this audience skews older and out-of-state, reading
   on phones. Every label-step selector is restated once here at 12px rather
   than patched at each declaration, because several of them are declared far
   later in this file and would otherwise win on source order. Desktop
   lettering is untouched.
   ============================================================ */
@media (max-width: 620px) {
  .d-spec, .g-cat, .prod-badge, .ov-meta, .ov-count, .ov-ba-label,
  .filters button, .filter-chip, .nav-links a:not(.btn), .btn,
  .ov-arrow, .ov-arrow span, .hero-cap, .rev-name span, .footer-bar,
  .chip-btn .cs, .ba-tag, .footer h3, .trade-label .d-spec, .value .d-spec {
    font-size: 12px;
  }
}