/* BernMar Construction — site.css
   Direction: chandos.com mechanics — near-greyscale ground, statement type,
   letterbox photo bands, turquoise as accent only.
   Tokens: brand turquoise is GRAPHIC ONLY (fails AA as text);
   --accent is the AA-safe dark teal for text/hover states. */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink: #161a1c;
  --body: #3d454b;
  --muted: #6c757c;
  --canvas: #ffffff;
  --surface: #f2f4f4;
  --hairline: #dfe4e5;
  --brand: #2ab3bb;        /* logo turquoise — graphic use only (2.5:1 on white) */
  --accent: #127076;       /* AA-safe teal for text/hover (5.8:1 on white) */
  --accent-ink: #0b565b;   /* hover deepen */
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --radius: 6px;           /* one radius scale */
  --shadow-soft: 0 10px 30px rgba(22, 26, 28, 0.10);  /* one shadow scale: none | soft */
  --container: 1120px;
  --section: clamp(64px, 9vw, 112px);
  --header-h: 96px;
  --header-h-shrunk: 74px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
::selection { background: var(--brand); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.4vw, 64px); }
h2 { font-size: clamp(32px, 4vw, 46px); }
h3 { font-size: clamp(22px, 2.6vw, 28px); }
p { margin: 0 0 1em; max-width: 68ch; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: var(--section); }
.section--tint { background: var(--surface); }

/* ---------- header: sticky, two-threshold shrink (design-standards §13) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  overflow-anchor: none;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow 0.25s ease;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height 0.25s ease;
}
.site-header.shrunk { box-shadow: var(--shadow-soft); }
.site-header.shrunk .bar { height: var(--header-h-shrunk); }
.brand-link { display: inline-flex; align-items: center; }
.brand-link img {
  height: 58px;
  width: auto;
  transition: height 0.25s ease;
}
.site-header.shrunk .brand-link img { height: 44px; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 2px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  min-height: 44px;
  line-height: 24px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
  content: "";
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-soft);
    display: none;
  }
  .main-nav.open { display: block; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 16px;
  }
  .main-nav a { display: block; padding: 12px 2px; font-size: 17px; }
}

/* ---------- buttons (one primary, one secondary) ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  min-height: 44px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---------- statement type (the signature element) ---------- */
.statement {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0;
}
.statement .st-line { display: block; }
.statement--mid { font-size: clamp(34px, 5.2vw, 68px); }

.statement-cta { margin-top: clamp(30px, 4vw, 48px); }

.hero-statement { padding: clamp(72px, 11vw, 140px) 0 clamp(48px, 7vw, 88px); }
.hero-statement .lede {
  margin-top: 28px;
  font-size: 18px;
  color: var(--muted);
  max-width: 60ch;
}
.hero-statement .actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* diamond separator — the one recurring accent device */

/* ---------- letterbox photo bands ---------- */
.band { position: relative; background: var(--surface); }
.band img { display: block; width: 100%; height: auto; }

.band-phrase {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(52px, 9vw, 120px);
  line-height: 0.95;
  margin: 0 0 28px;
  padding-inline: 16px;
  pointer-events: none;
}
.band-phrase + .band { position: relative; }

.about-story { max-width: 68ch; }

/* ---------- concrete + ICF block (home) ---------- */
/* Photos sit beside the copy in a narrower right column and are shown WHOLE:
   no fixed-aspect box, no cover crop, natural 4:3 at whatever width the column
   gives them. The two stacked photos still run taller than the copy, so the
   text column is vertically centred against them rather than sitting up at the
   top with a pocket of white beneath. The heading lives inside the copy column
   so it centres with the paragraphs. (Levi, 2026-08-10; replaces the
   out-of-flow cover-cropped column from 2026-08-09) */
.icf-grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3.2vw, 44px); margin-top: 28px; }
.icf-copy > h2 { margin-top: 0; }
.icf-grid .lede { margin-bottom: 18px; }
.icf-photos { display: grid; gap: 14px; align-content: center; }
.icf-photos img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (min-width: 900px) {
  .icf-grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 400px); align-items: center; }
}

/* ---------- More builds: arrow-stepped gallery ---------- */
.gal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.gal-nav { display: flex; align-items: center; gap: 14px; }
.gal-nav button {
  width: 42px; height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.gal-nav button:hover { background: var(--ink); color: #fff; }
.gal-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal-count { font-size: 15px; color: var(--muted); min-width: 62px; text-align: center; }
.gal { position: relative; margin-top: 26px; aspect-ratio: 4 / 3; background: var(--ink); }
.gal-item { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.5s ease; }
.gal-item.on { opacity: 1; z-index: 1; }
.gal-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .gal { aspect-ratio: 4 / 3; } .gal-nav button { width: 46px; height: 46px; } }

/* ---------- home hero carousel: 4 photos, click-through ---------- */
.home-hero { background: #fff; }
.home-hero .carousel { position: relative; background: var(--ink); overflow: hidden; }
/* every slide is stacked in one 2:1 box and the incoming one fades in ON TOP.
   Fading the outgoing slide out at the same time dips both to part opacity and
   flashes the dark backdrop between photos. Every hero file is exported at
   exactly 2:1, so object-fit has nothing left to crop. */
.home-hero .slides { position: relative; aspect-ratio: 37 / 20; }   /* 1.85:1, matches the exported files */
.home-hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.home-hero .slide.on { opacity: 1; z-index: 1; }
.home-hero .slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* scrim only across the lower band, so the buildings stay clean */
.home-hero .carousel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(20,24,26,0) 0%, rgba(20,24,26,0.55) 62%, rgba(20,24,26,0.72) 100%);
  pointer-events: none;
  z-index: 1;
}
/* headline: low and deliberately smaller than a statement head, kept to the
   left 60% so it never sits over a building */
.home-hero .hero-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding-bottom: clamp(14px, 1.8vw, 28px);
  pointer-events: none;
}
/* the photo is full-bleed, so the headline hugs the photo's own left edge
   instead of the centred 1120px column, which strands it mid-picture on a
   wide screen. (Levi, 2026-08-09) */
.home-hero .hero-title .wrap {
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(20px, 3.4vw, 60px);
}
.home-hero .hero-title h1 {
  margin: 0;
  /* wide enough to stay TWO lines as the type scales up, so the block still
     fits the ground band at the bottom of every slide and never covers a
     building. Widen the measure before shrinking the type. */
  max-width: 44ch;
  color: #fff;
  font-size: clamp(26px, 4.6vw, 78px);
  line-height: 1.05;
}
/* dots sit opposite the headline */
.home-hero .dots {
  position: absolute;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(20px, 2.8vw, 36px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-hero .dots button {
  width: 11px; height: 11px;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.home-hero .dots button.on { background: #fff; }
.home-hero .dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.home-hero .hero-under { padding: clamp(26px, 3.4vw, 44px) 24px clamp(8px, 1.4vw, 18px); }
.home-hero .hero-under .lede { max-width: 58ch; }
/* phones: a 2:1 hero is only about 195px tall at 390px wide, so a headline
   big enough to read would cover the building. Drop it under the photo. */
/* Phones: show the WHOLE photo, never a zoomed crop. The frame keeps its
   1.85 shape so nothing is cut, and the hero becomes one dark panel: photo on
   top, then white headline, description and buttons underneath it. That gets
   both of the things Levi asked for, the full picture AND white type, which a
   cropped overlay cannot do at once on a 414px screen. (Levi, 2026-08-09) */
@media (max-width: 640px) {
  .home-hero { background: var(--ink); }
  .home-hero .carousel { background: var(--ink); }
  .home-hero .slides { aspect-ratio: 37 / 20; }
  .home-hero .carousel::after { display: none; }
  .home-hero .hero-title { position: static; padding: 22px 0 0; }
  .home-hero .hero-title h1 { max-width: 24ch; color: #fff; font-size: clamp(24px, 6.4vw, 30px); }
  .home-hero .hero-title .wrap { padding-inline: 24px; }
  .home-hero .dots { position: absolute; top: calc(100vw / 1.85 - 28px); right: 22px; bottom: auto; }
  .home-hero .hero-under { padding: 14px 24px 30px; }   /* was hard against the left edge */
  .home-hero .hero-under .lede { color: rgba(255, 255, 255, 0.82); }
  .home-hero .hero-under .actions { margin-top: 20px; }
  .home-hero .hero-under .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.85); }
}

/* page-head hero: full-bleed letterbox with title over (Morton pattern) */
.page-head {
  position: relative;
  background: var(--ink);
}
.page-head img {
  display: block;
  width: 100%;
  height: auto;
}
/* scrim removed: the page title sits under the photo now, not over it */
.page-head-title { padding: clamp(26px, 3.4vw, 46px) 0 clamp(18px, 2.2vw, 30px); }
/* DESKTOP: the title sits on the photo, as it did originally. */
@media (min-width: 641px) {
  .page-hero { position: relative; }
  .page-hero .page-head-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 0 0 clamp(20px, 3.4vw, 40px);
  }
  .page-hero .page-head-title h1 { color: #fff; }
  .page-hero .page-head-title .town-line { color: rgba(255, 255, 255, 0.88); }
  .page-hero .page-head { position: relative; }
  .page-hero .page-head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    background: linear-gradient(to bottom, rgba(20,24,26,0) 0%, rgba(20,24,26,0.62) 72%, rgba(20,24,26,0.76) 100%);
    pointer-events: none;
  }
}
.page-head-title h1 { margin: 0; color: var(--ink); font-size: clamp(28px, 3.6vw, 50px); line-height: 1.06; }
.page-head-title .town-line { color: var(--muted); margin: 8px 0 0; font-size: 15px; }

/* ---------- fixed-aspect photo boxes (swap-ready: any proportion drops in) ---------- */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.ph img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* bias cover-crops upward so rooflines survive (design-standards 14) */
  object-position: center 22%;
}
.ph--card { aspect-ratio: 4 / 3; }
.ph--wide { aspect-ratio: 3 / 2; }
.ph--panel { aspect-ratio: 3 / 4; }
.ph--small { aspect-ratio: 4 / 3; max-width: 420px; }

/* ---------- service board (Marawood four-panel) ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--hairline);
}
.board .panel {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--ink);
  overflow: hidden;
  aspect-ratio: 3 / 4.4;
}
.board .panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.board .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 15, 0.72), rgba(10, 14, 15, 0) 55%);
}
.board .panel .panel-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 20px;
}
.board .panel h3 { color: #fff; margin: 0 0 4px; font-size: clamp(20px, 2vw, 26px); }
.board .panel p { color: rgba(255, 255, 255, 0.82); font-size: 14px; margin: 0; max-width: none; }
.board .panel .panel-more {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, padding-left 0.25s ease;
}
.board .panel:hover .panel-more { padding-left: 6px; }
@media (max-width: 900px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .board .panel { aspect-ratio: 4 / 3.6; }
}
@media (max-width: 520px) {
  .board { grid-template-columns: 1fr; }
  .board .panel { aspect-ratio: 16 / 9; }
}

/* ---------- project cards (repeating pattern: new project = one new block) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; }
.card a, .card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card a:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.card .ph { border-radius: var(--radius) var(--radius) 0 0; }
.card--photo .card-body { height: auto; }  /* no caption below, so the aspect-ratio
   box must size itself instead of resolving height:100% against an auto-height card */
.card--photo .ph { border-radius: var(--radius); }
.card .card-copy { padding: 18px 6px 20px; }
.card h3 { margin: 0 0 4px; font-size: 23px; }
.card .town { color: var(--muted); font-size: 14px; margin: 0; }
.card .sector-tag { color: var(--accent); font-size: 14px; font-weight: 600; margin: 8px 0 0; }

/* ---------- work pairs: always stacked, finished first (no slider) ---------- */
.ba { margin: 0; }
.ba .ba-item { margin: 0; }
.ba .ba-item + .ba-item { margin-top: 28px; }
.ba .ba-item img { display: block; width: 100%; height: auto; background: var(--surface); }
.ba figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.ba--small { max-width: 720px; margin-inline: auto; }

/* ---------- split rows (photo + copy) ---------- */
/* Photo column takes the larger share. The text beside a project pair is a
   heading, one sentence and a link, so it does not need the majority of the
   row, and at 55/45 the stacked pair rendered only ~454px wide on a 1440
   screen. 40/60 puts it at ~605px, which is 78% more area for the photo with
   no change to the measure of the copy. (Levi, 2026-08-11) */
.split {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.split--flip { grid-template-columns: 60fr 40fr; }
@media (max-width: 860px) {
  .split, .split--flip { grid-template-columns: 1fr; }
}

/* ---------- testimonial band (Frey pattern; renders only when content.js has quotes) ---------- */
/* three tinted sections in a row stack their 112px paddings into a dead field */
.section--flush-t { padding-top: clamp(10px, 1.4vw, 20px); }
.project-intro { margin: 14px 0 0; max-width: 62ch; color: var(--body); }
.section--flush-b { padding-bottom: clamp(52px, 5.6vw, 82px); }
.section--testimonials { padding-top: clamp(14px, 1.8vw, 26px); padding-bottom: clamp(26px, 3.2vw, 46px); }
#faq { padding-top: clamp(56px, 6.4vw, 88px); }

.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  margin-top: 36px;
}
.testimonials--one { grid-template-columns: 1fr; max-width: 780px; }
.testimonials .testimonial { margin: 0; max-width: none; padding-top: 28px; }
.testimonials .testimonial blockquote { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.32; }
.testimonial-cite {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
}
@media (max-width: 820px) { .testimonials { grid-template-columns: 1fr; } }

.testimonial { border-top: 3px solid var(--brand); padding-top: 40px; max-width: 780px; }
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.2;
  color: var(--ink);
}
.testimonial cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
}

/* ---------- CTA band ---------- */
.cta {
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.cta h2 { color: #fff; margin-inline: auto; }
.cta p { color: rgba(255, 255, 255, 0.78); margin-inline: auto; }
.cta .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.cta .btn--primary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cta .btn--ghost:hover { border-color: #fff; color: #fff; }
.cta .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 56px 0 32px;
}
.site-footer .foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 800px) { .site-footer .foot-grid { grid-template-columns: 1fr; } }
.site-footer img.foot-logo { width: 240px; height: auto; margin-bottom: 18px; }
.site-footer h2, .site-footer h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}
.site-footer p, .site-footer li { font-size: 15px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--body); }
.site-footer a:hover { color: var(--accent); }
.foot-signoff { margin-top: 24px; color: var(--muted); font-size: 15px; }
.foot-legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
}
.foot-legal a { color: var(--muted); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  min-height: 48px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.hidden-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0 0 28px; padding: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.contact-list .k { font-weight: 600; color: var(--ink); display: block; font-size: 14px; }
.contact-list .v { font-size: 17px; }
.map-embed {
  border: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  display: block;
}

/* ---------- reveal system (brief: quiet statement reveals + IO fades) ---------- */
/* ---------- misc ---------- */
/* Levi, 2026-08-09: no lead-paragraph style anywhere. Every paragraph is
   body size; .lede survives only as a colour/spacing hook. */
.lede { font-size: inherit; color: var(--body); }
.small-note { font-size: 14px; color: var(--muted); }
.rule-top { border-top: 1px solid var(--hairline); padding-top: clamp(28px, 4vw, 44px); }
.stack > * + * { margin-top: 0; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.two-col { columns: 2; column-gap: 48px; }
@media (max-width: 760px) { .two-col { columns: 1; } }

/* 404 */
.error-page { text-align: center; padding: clamp(80px, 14vw, 160px) 0; }
.error-page .big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(90px, 18vw, 200px);
  line-height: 1;
  color: var(--ink);
  margin: 0;
}


/* ---------- full-size photo plates (home) ---------- */
.wrap--wide { max-width: 1600px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.plates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.plates .plate { margin: 0; }
.plates .plate img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
}
.plates .plate figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .plates { grid-template-columns: 1fr; }
}


/* ---------- finished-photo grids (2026-09-16, Mark's office-meeting round) ----------
   Agricultural groups and the residential page: finished photos only, side by
   side in a compact grid. Fixed 4:3 boxes (.ph) so mixed source proportions sit
   level; three across on desktop, two on phones, same as the projects masonry.
   No per-building headings on the agricultural groups; residential tiles carry
   a one-line building-type label. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: 22px;
}
.photo-grid .pg-item { margin: 0; min-width: 0; }
.photo-grid figcaption {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
/* one sub-label over a group of photos (the poultry barn pair, v73) */
.pg-sub { font-size: 18px; font-weight: 600; color: var(--ink); margin: 18px 0 0; }
.pg-sub + .photo-grid { margin-top: 12px; }
@media (max-width: 640px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
  .photo-grid figcaption { font-size: 14px; margin-top: 8px; }
}


/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; margin-top: 8px; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }

/* click the question to drop the answer down. Native details/summary, no JS. */
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 44px 26px 0;
  position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary h3 { margin: 0; font-size: 21px; }
.faq-item > summary:hover h3 { color: var(--accent); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* chevron, rotates when open */
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transform-origin: center;
}
.faq-item[open] > summary::after { margin-top: -3px; transform: rotate(-135deg); }
.faq-a { padding: 0 44px 26px 0; }
.faq-item p { margin: 0; color: var(--body); max-width: 68ch; }

.lede-xl {
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 34ch;
}

.hero-statement--tight { padding: clamp(46px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); }
.hero-statement--tight h1 { margin: 0; }
.hero-statement--tight .lede { margin-top: 20px; }  /* gallery page: Levi flagged too much
   white space around this hero, 2026-08-20 */
.town-line--dark { color: var(--muted); margin: 10px 0 0; font-size: 15px; }

/* single measured column for text-only intros (agricultural etc.) */
/* intro text with a photo alongside it. Desktop only: on a phone the photo
   would just push the copy down, so it is hidden under 900px. (Levi, 2026-08-09) */
.intro-split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.intro-photo { margin: 0; }
.intro-photo img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .intro-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .intro-split .intro-col { max-width: none; }
}
@media (max-width: 899px) { .intro-photo { display: none; } }

/* the three intro paragraphs share one measure and one size so the block
   reads as a unit. Set well below .lede-xl's display size: at 29px it was
   shouting. (Levi, 2026-08-09) */
.intro-col { max-width: 68ch; }
.intro-col .lede-xl {
  max-width: none;
  font-size: inherit;
  line-height: 1.6;
}
/* desktop only: a touch larger so the copy column stands up to the photo beside
   it instead of running short. All three paragraphs stay equal in size, so this
   is not a lead-paragraph style. (Levi, 2026-08-09) */
@media (min-width: 900px) {
  .intro-col .lede-xl { font-size: 18.5px; line-height: 1.62; }
  .intro-col .lede-xl + .lede-xl { margin-top: 22px; }
}
.intro-col .lede-xl + .lede-xl { margin-top: 20px; }

/* clickable picture plates */
.plate--link a { display: block; color: inherit; text-decoration: none; }
.plate--link img { transition: opacity 0.2s ease; }
.plate--link a:hover img,
.plate--link a:focus-visible img { opacity: 0.9; }
.plate--link figcaption { font-size: 19px; color: var(--ink); font-weight: 600; margin-top: 14px; }
.plate--link a:hover figcaption { color: var(--accent); }

/* overlay plates: white caption ON the photo over a bottom scrim */
.plate--overlay a { position: relative; display: block; }
.plate--overlay a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(20,24,26,0) 0%, rgba(20,24,26,0.62) 68%, rgba(20,24,26,0.78) 100%);
  pointer-events: none;
}
.plate--overlay figcaption,
.plates .plate--overlay figcaption {
  color: #fff;
  margin-top: 0;
}
.plate--overlay figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 18px 22px;        /* desktop: roomy, as Levi preferred */
  color: #fff;
}
.plate--overlay .plate-title { display: block; font-size: 23px; font-weight: 700; line-height: 1.14; color: #fff; }
.plate--overlay .plate-desc { display: block; font-size: 15px; line-height: 1.3; color: rgba(255, 255, 255, 0.86); margin-top: 4px; }

/* phones: the long barn title wraps to two lines, which pushed the whole block
   up off the dirt and onto the building. Smaller, tighter, lower. */
@media (max-width: 640px) {
  .plate--overlay figcaption { padding: 9px 16px 11px; }
  .plate--overlay .plate-title { font-size: 17px; line-height: 1.1; }
  .plate--overlay .plate-desc { font-size: 12.5px; line-height: 1.22; margin-top: 2px; }
  .plate--overlay a::after { height: 32%; }
}
.plate--overlay a:hover figcaption, .plate--overlay a:hover .plate-title { color: #fff; }

/* ---------- phones: headings come before their photos ---------- */
/* .split--flip puts the photo first in the markup so desktop can alternate
   sides. Stacked on a phone that buries the project name under the picture,
   so the text block is pulled back to the top. (Levi, 2026-08-09) */
@media (max-width: 900px) {
  /* align-items: stretch is REQUIRED here, not cosmetic. .split sets
     align-items:center for the desktop grid; once this rule flips the same
     element to a column flex container, "center" stops meaning "centre
     vertically" and starts meaning "shrink each child to its content width".
     A .ph box holds its image with position:absolute, so its content width is
     0 and the whole photo collapses to 0x0 and vanishes on phones. The ba()
     pairs survive only because their images are in normal flow. Caught on the
     Cavendish photo, 2026-08-12. */
  .split--flip { display: flex; flex-direction: column; align-items: stretch; }
  .split--flip > div:last-child { order: -1; }
}

/* Phones: /commercial and /residential show their hero photo again a couple of
   sections down, so at phone width it is just an extra scroll between the title
   and the actual work. /agricultural keeps its photo because a paragraph sits
   under it. Desktop is untouched. (Levi, 2026-08-09) */
@media (max-width: 640px) {
  .page-hero--no-phone-photo .page-head { display: none; }
  /* the page title must clearly outrank the project headings under it. At 414px
     the old scale made h1 28px and each h2 32px, so the page looked subordinate
     to its own sections. (Levi, 2026-08-09) */
  .page-head-title h1 { font-size: clamp(31px, 8.2vw, 40px); }
  h2 { font-size: clamp(23px, 5.6vw, 30px); }
  h3 { font-size: clamp(19px, 4.6vw, 23px); }
}

/* ---------- Photo gallery: uncaptioned masonry + click-to-enlarge ----------
   Added 2026-08-20. Captions came off every tile because they were still
   reading as duplication; the photos now do the work on their own and open
   full size on click. Pattern borrowed from the Mauldin gallery, recoloured. */
.gallery-masonry { columns: 3 300px; column-gap: 28px; }
.gallery-masonry .plate { break-inside: avoid; margin: 0 0 28px; }
.gallery-masonry img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.plate-link { display: block; text-decoration: none; }
.plate-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .plate-link:hover img { opacity: 0.92; } }
@media (max-width: 760px) {
  .gallery-masonry { columns: 2 200px; column-gap: 18px; }
  .gallery-masonry .plate { margin-bottom: 18px; }
}
.lightbox {
  position: fixed; inset: 0; background: rgba(17, 21, 24, 0.94);
  display: none; align-items: center; justify-content: center; z-index: 300; padding: 32px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius); }
.lightbox-close {
  position: absolute; top: 18px; right: 24px; background: none; border: 0;
  color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 8px;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(17, 21, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius); color: #fff; font-size: 34px; line-height: 1;
  padding: 10px 16px 14px; cursor: pointer;
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (hover: hover) { .lightbox-nav:hover { background: rgba(17, 21, 24, 0.85); } }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }