/* ==========================================================================
   Concrete Master — stylesheet, modern layout / original brand palette
   Sans-only type system (matches the logo), full-bleed video hero, bento
   photo layouts, lightbox gallery and a shared quote-request modal.
   Palette from brand guidelines v0.3. See brand/brand-guidelines.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Material palette — unchanged since v0.2 */
  --hivis:      #A4E019;
  --hivis-lift: #B4EE33;
  --hivis-tint: #EAF3D2;
  --field:      #556F0B;
  --iron:       #2E2B27;
  --iron-soft:  #35302A;
  --aggregate:  #6E685E;
  --poured:     #CFCBC1;
  --formwork:   #F2EFE8;
  --surface:    #FBF9F4;
  --sunk:       #E7E3DA;
  --warn:       #A33B22;

  /* Semantic aliases used throughout this file */
  --ink:        var(--iron);
  --ink-soft:   #4B453C;
  --stone:      var(--aggregate);
  --line:       var(--poured);
  --cream:      var(--formwork);
  --card:       var(--surface);
  --sand:       var(--sunk);

  /* Sans-only — same stacks as v0.2, no serif anywhere */
  --display: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-hero: clamp(2.6rem, 6vw, 4.6rem);
  --t-h2:   clamp(1.85rem, 4.2vw, 2.7rem);
  --t-h3:   clamp(1.08rem, 1.8vw, 1.22rem);
  --t-lede: clamp(1.05rem, 1.9vw, 1.2rem);

  --measure: 62ch;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(3.25rem, 6.5vw, 5.5rem);
  --maxw: 1240px;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(46,43,39,0.05), 0 12px 32px -12px rgba(46,43,39,0.18);
  --shadow-lift: 0 1px 2px rgba(46,43,39,0.06), 0 22px 44px -14px rgba(46,43,39,0.26);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
body.no-scroll { overflow: hidden; }

img, video, canvas { max-width: 100%; display: block; }

a { color: var(--field); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--hivis);
  outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--hivis); color: var(--iron); padding: 0.75rem 1.25rem;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   2. Type primitives
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h2 { font-size: var(--t-h2); }
h3 {
  font-family: var(--ui); font-size: var(--t-h3); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25;
}

p { margin: 0; max-width: var(--measure); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--field);
  margin: 0;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hivis); flex-shrink: 0; }
.lede { font-size: var(--t-lede); line-height: 1.6; color: var(--ink-soft); }
.fine { font-size: 0.92rem; color: var(--stone); }
.todo { border-bottom: 2px dotted var(--warn); color: var(--warn); font-style: italic; }

.accent { color: var(--field); }
.section--iron .accent, .hero .accent { color: var(--hivis); }

.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand); }
.section--iron { background: var(--iron); color: var(--formwork); }
.section--iron .eyebrow { color: var(--hivis); }
.section--iron .eyebrow::before { background: var(--hivis); }
.section--iron h2 { color: var(--formwork); }
.section--iron .fine { color: #B9B2A5; }
.section--iron p { color: #DCD6CA; }

.section-head { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.5rem; max-width: 60ch; }
.section-head--split {
  max-width: none; flex-direction: row; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem;
}
.section-head--split > div:first-child { display: flex; flex-direction: column; gap: 0.8rem; max-width: 46ch; }
.section-head--split .lede { max-width: 40ch; margin-top: 0; }
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }
#blog .section-head--split { flex-direction: column; align-items: flex-start; max-width: 60ch; }
#blog .section-head--split > div:first-child { max-width: none; }
#blog .section-head--split .lede { max-width: 60ch; }
/* Two thirds of the content width instead of the default 60ch, for heads that
   sit above something full-width and look pinched at the narrower measure.
   max() rather than a media query: below ~46ch the fraction would be narrower
   than the text needs, so the floor takes over and it fills the container. */
.section-head--wide { max-width: max(46ch, 66.667%); }
.section-head--wide p { max-width: none; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  padding: 0.95rem 1.85rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--primary { background: var(--hivis); color: var(--iron); }
.btn--primary:hover { background: var(--hivis-lift); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.section--iron .btn--ghost, .hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.section--iron .btn--ghost:hover, .hero .btn--ghost:hover { border-color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--cream); }
.btn--block { display: flex; width: 100%; justify-content: center; text-align: center; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; font-size: 0.95rem; color: var(--field); text-decoration: none;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.link-arrow:hover svg { transform: translateX(3px); }
.section--iron .link-arrow, .hero .link-arrow { color: #fff; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.masthead { background: rgba(242,239,232,0.94); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.85rem; }

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand__logo { height: 30px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__list { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  font-family: var(--ui); font-weight: 600; font-size: 0.95rem;
  color: var(--ink-soft); text-decoration: none;
  padding: 0.6rem 0; display: inline-flex; align-items: center; gap: 0.3rem; border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--field); }
.nav__caret { width: 13px; height: 13px; flex-shrink: 0; transition: transform 180ms ease; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: 100%; left: -1rem; min-width: 232px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  list-style: none; margin: 0; padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  box-shadow: var(--shadow-lift);
}
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a { display: block; padding: 0.55rem 0.9rem; color: var(--ink); text-decoration: none; font-size: 0.92rem; border-radius: 8px; }
.nav__sub a:hover { background: var(--sand); color: var(--field); }
.nav__sub a mark {
  background: var(--hivis); color: var(--iron); font-family: var(--ui);
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15em 0.45em; border-radius: 999px; margin-left: 0.4rem; font-weight: 700;
}

.nav__toggle {
  display: none; background: none; border: 2px solid var(--line);
  color: var(--ink); font-family: var(--ui); font-weight: 700;
  font-size: 0.9rem; padding: 0.55rem 0.9rem; border-radius: 999px; cursor: pointer;
}

.nav__expand { display: none; }

.nav__contact { display: none; }

@media (max-width: 1040px) {
  .masthead .wrap { flex-wrap: wrap; }
  .nav__toggle { display: block; }
  .nav {
    display: none; width: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: 1rem; max-height: calc(100vh - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; width: 100%; }
  .nav__item { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); }
  .nav__link { flex: 1; display: block; padding: 0.85rem 0; }
  .nav__caret { display: none; }
  .nav__expand {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: none; border: 0; color: var(--ink-soft); cursor: pointer;
  }
  .nav__expand svg { width: 16px; height: 16px; transition: transform 220ms ease; }
  .nav__item.is-open .nav__expand svg { transform: rotate(180deg); }
  .nav__sub {
    flex-basis: 100%; position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 0 1rem;
    max-height: 0; overflow: hidden; transition: max-height 260ms ease;
  }
  .nav__item.is-open .nav__sub { max-height: 320px; padding-bottom: 0.6rem; }
  .nav__sub a { color: var(--ink-soft); padding: 0.4rem 0; }
  .nav__sub a:hover { background: transparent; color: var(--field); }
  .masthead .btn { width: 100%; justify-content: center; }
  .nav__contact {
    display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); text-align: center;
  }
  .nav__contact a { color: var(--field); font-weight: 700; font-size: 1rem; text-decoration: none; }
}

/* --------------------------------------------------------------------------
   5. Hero — full-bleed video
   -------------------------------------------------------------------------- */

.hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero__media { position: absolute; inset: 0; background: var(--iron); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(190deg, rgba(46,43,39,0.18) 0%, rgba(46,43,39,0.5) 55%, rgba(46,43,39,0.92) 100%); }
.hero__inner { position: relative; width: 100%; padding-block: clamp(3rem, 8vw, 5rem); display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.hero__kicker { color: #F0EAD8; }
.hero__kicker::before { background: var(--hivis); }
.hero h1 { font-size: var(--t-hero); max-width: 20ch; color: #fff; }
.hero__sub { font-size: var(--t-lede); color: #E4DFD2; max-width: 66ch; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.3rem; }

.trust-float { position: relative; z-index: 5; margin-top: -52px; }
.trust-float__card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 1.3rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem; justify-content: space-between;
}
.trust-float__item { display: flex; align-items: center; gap: 0.7rem; }
.trust-float__icon { width: 38px; height: 38px; border-radius: 999px; background: var(--hivis-tint); color: var(--field); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-float__icon svg { width: 19px; height: 19px; }
.trust-float__item span { font-weight: 700; font-size: 0.92rem; color: var(--ink); }

@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero__inner { padding-top: 2.75rem; padding-bottom: 80px; gap: 1.1rem; }
  .trust-float__card { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   7. About teaser
   -------------------------------------------------------------------------- */

.about-teaser .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-teaser__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); }
.about-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__copy { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.95rem 0.5rem 0.6rem; font-size: 0.86rem; font-weight: 600; }
.chip svg { width: 15px; height: 15px; color: var(--field); flex-shrink: 0; }

@media (max-width: 860px) {
  .about-teaser .wrap { grid-template-columns: 1fr; }
  .about-teaser__media { order: -1; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------------------
   8. Bento grids — services & gallery
   -------------------------------------------------------------------------- */

.bento { display: grid; gap: 1rem; grid-auto-flow: dense; }
.bento--services { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }

/* Extra bottom padding on the services section gives the floating CTA bar
   below room to overlap upward into it. */
#services { padding-bottom: 220px; }
.cta-float { position: relative; z-index: 5; margin-top: -70px; margin-bottom: -24px; }
.bento .tile--big { grid-column: span 2; grid-row: span 2; }
/* For a 5-tile bento (1 big + 4 small) the 3-column desktop grid is one
   cell short of a clean 3x3 -- dense packing leaves the last cell empty.
   Stretching one small tile to span 2 rows uses up that extra cell so the
   grid fills exactly, with no invented 6th tile. Only at the 3-column
   width: at 2 columns the 4 small tiles already pack evenly on their own
   (reset below), and at 1 column every tile is already full width. */
.bento .tile--tall { grid-row: span 2; }

/* Gallery mosaic — mirrored two-column layout: big-then-pair on the left,
   pair-then-big on the right. */
.gallery-mosaic { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.gallery-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.gallery-col__feature { aspect-ratio: 4 / 3; min-width: 0; }
.gallery-col__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gallery-col__pair .tile { aspect-ratio: 1 / 1; min-width: 0; }

/* Mobile — unwrap the column/pair wrappers so all six tiles become direct
   flex children of the mosaic, then scroll-snap them one at a time. Native
   touch scrolling gives free swipe support, no JS needed. */
@media (max-width: 760px) {
  .gallery-mosaic {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gallery-mosaic::-webkit-scrollbar { display: none; }
  .gallery-col, .gallery-col__pair { display: contents; }
  .gallery-mosaic .tile { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; }
}

.tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  display: block; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  cursor: pointer; border: 0; margin: 0; padding: 0; background: none; font: inherit;
  -webkit-appearance: none; appearance: none; width: 100%; height: 100%;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease; }
.tile:hover img { transform: scale(1.045); }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(46,43,39,0.85) 0%, rgba(46,43,39,0.05) 55%, rgba(46,43,39,0) 100%); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.2rem; color: #fff; }
.tile__body h3 { color: #fff; margin-bottom: 0.25rem; }
.tile__body p { color: #E4DFD2; font-size: 0.88rem; }
.tile--big .tile__body h3 { font-size: 1.3rem; }

.tile__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(46,43,39,0); transition: background-color 200ms ease;
}
.tile:hover .tile__hint, .tile:focus-visible .tile__hint { background: rgba(46,43,39,0.32); }
.tile__hint-icon {
  width: 46px; height: 46px; border-radius: 999px; background: var(--hivis); color: var(--iron);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.85); transition: opacity 200ms ease, transform 200ms ease;
}
.tile:hover .tile__hint-icon, .tile:focus-visible .tile__hint-icon { opacity: 1; transform: scale(1); }
.tile__hint-icon svg { width: 20px; height: 20px; }

.blog-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.blog-card {
  display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.blog-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.blog-card:hover .blog-card__media img { transform: scale(1.045); }
.blog-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease; }
.blog-card__body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.blog-card__cat { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--field); margin: 0; }
.blog-card__body h3 { font-size: 1.15rem; line-height: 1.32; }
.blog-card__excerpt { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0; flex: 1; }
.blog-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.blog-card__meta time { font-size: 0.82rem; color: var(--stone); font-weight: 600; }
.blog-card__meta .link-arrow { font-size: 0.88rem; }
.blog-more { display: flex; justify-content: center; margin-top: 2.25rem; }

@media (max-width: 900px) {
  .bento--services { grid-template-columns: repeat(2, 1fr); }
  .bento--services .tile--tall { grid-row: span 1; }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bento--services { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento--services .tile { aspect-ratio: 4 / 3; }
  .bento--services .tile--big { grid-column: span 1; grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   9. Commercial band
   -------------------------------------------------------------------------- */

.commercial-band {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 340px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lift);
}
.commercial-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.commercial-band__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(46,43,39,0.92) 0%, rgba(46,43,39,0.65) 48%, rgba(46,43,39,0.2) 100%); }
.commercial-band__body { position: relative; padding: clamp(1.75rem, 4vw, 2.75rem); max-width: 560px; display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; color: #fff; }
.commercial-band__body h2 { color: #fff; }
.commercial-band__body p { color: #E4DFD2; }

/* --------------------------------------------------------------------------
   9b. Final CTA — full-content band with image
   -------------------------------------------------------------------------- */

.final-cta {
  display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift);
}
.final-cta__media { position: relative; min-height: 420px; display: flex; align-items: center; }
.final-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.final-cta__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(46,43,39,0.92) 0%, rgba(46,43,39,0.78) 55%, rgba(46,43,39,0.35) 100%); }
.final-cta__copy { position: relative; padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; color: #fff; }
.final-cta__copy .eyebrow { color: var(--hivis); }
.final-cta__copy .eyebrow::before { background: var(--hivis); }
.final-cta__copy h2 { color: #fff; font-size: var(--t-h2); }
.final-cta__copy p { color: #E4DFD2; }
.final-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.final-cta .btn--ghost:hover { border-color: #fff; }

.final-cta__form { background: var(--card); padding: clamp(1.75rem, 4vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 860px) {
  .final-cta { grid-template-columns: 1fr; }
  .final-cta__media { min-height: 320px; }
}

/* --------------------------------------------------------------------------
   10. CTA bars
   -------------------------------------------------------------------------- */

.cta-bar { background: var(--iron); border-radius: var(--radius); padding: clamp(0.75rem, 1.8vw, 1rem) clamp(1.75rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; color: #fff; box-shadow: var(--shadow-lift); }
.cta-bar > div:first-child { flex: 1 1 360px; }
.cta-bar > .btn, .cta-bar > .hero__actions { flex-shrink: 0; }
.cta-bar h2, .cta-bar h3 { color: #fff; margin: 0; }
.cta-bar p { color: #DCD6CA; margin-top: 0.3rem; }
.cta-bar .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-bar .btn--ghost:hover { border-color: #fff; }

.cta-bar--hivis { background: var(--hivis); color: var(--iron); }
.cta-bar--hivis h2, .cta-bar--hivis h3 { color: var(--iron); }
.cta-bar--hivis p { color: #45551A; }
.cta-bar--hivis .btn--primary { background: var(--hivis); color: var(--iron); border-color: var(--iron); }
.cta-bar--hivis .btn--primary:hover { background: var(--hivis-lift); }

@media (max-width: 640px) {
  .cta-bar { flex-direction: column; align-items: stretch; text-align: left; }
  .cta-bar > div:first-child { flex: 0 0 auto; }
  .cta-bar > .btn { width: 100%; justify-content: center; }
  .cta-bar > .hero__actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   11. Why us — icon rows
   -------------------------------------------------------------------------- */

.why-grid { display: grid; gap: 1.5rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.why-grid--steps { grid-template-columns: 1fr; gap: 1.4rem; }
.why { display: flex; gap: 1rem; align-items: flex-start; }
/* Usually holds an SVG; the font sizing is for the numbered variant used in
   the contact page's "what happens next" list. */
.why__icon { width: 44px; height: 44px; border-radius: 999px; background: var(--hivis-tint); color: var(--field); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 1.02rem; }
.why__icon svg { width: 21px; height: 21px; }
.why__copy h3 { margin-bottom: 0.25rem; }
.why__copy p { color: var(--ink-soft); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   11b. Service grid — icon cards
   -------------------------------------------------------------------------- */

.svc-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.svc-grid--wide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.svc-card { background: var(--card); border-radius: var(--radius); padding: 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.9rem; }
.svc-card__icon { width: 46px; height: 46px; border-radius: 999px; background: var(--hivis-tint); color: var(--field); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-card__icon svg { width: 22px; height: 22px; }
.svc-card h3 { margin-bottom: 0.1rem; }
.svc-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   12. Process — horizontal timeline
   -------------------------------------------------------------------------- */

.timeline { display: grid; column-gap: 1rem; grid-template-columns: repeat(6, 1fr); position: relative; }
.timeline::before { content: ""; position: absolute; top: 25px; left: 5%; right: 5%; height: 2px; background: var(--line); z-index: 0; }
.timeline__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.timeline__num {
  width: 50px; height: 50px; border-radius: 999px; background: var(--card); border: 2px solid var(--hivis);
  color: var(--field); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
}
.timeline__step-body { display: flex; flex-direction: column; gap: 0.35rem; }
.timeline__step h3 { font-size: 0.98rem; }
.timeline__step p { font-size: 0.88rem; color: var(--ink-soft); }

@media (max-width: 940px) {
  .timeline { display: flex; flex-direction: column; gap: 1.6rem; }
  .timeline::before { top: 0; bottom: 0; left: 25px; right: auto; width: 2px; height: auto; }
  .timeline__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */

.reviews-carousel { display: flex; align-items: center; gap: 1rem; }

/* Three cards fill the viewport exactly, so at rest there is nothing to fade
   and no mask is applied — all three read at full strength, edge to edge.
   The mask is switched on by JS only while the track is sliding, where it
   stops a card being guillotined as it crosses the boundary, and comes off
   again the moment the transition ends. */
.reviews-viewport { flex: 1; overflow: hidden; --fade: clamp(16px, 2.5vw, 36px); }
.reviews-viewport.is-sliding {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.reviews-track { display: flex; align-items: stretch; gap: 1.4rem; }
.reviews-track .review { flex: 0 0 100%; min-width: 0; }
@media (min-width: 640px) {
  .reviews-track .review { flex-basis: calc((100% - 2.8rem) / 3); }
}
.reviews-nav {
  display: none; width: 44px; height: 44px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  border: 0; color: var(--ink); align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background-color 160ms ease;
}
.reviews-nav:hover { background: var(--sand); }
.reviews-nav svg { width: 18px; height: 18px; }
@media (min-width: 640px) {
  .reviews-nav { display: flex; }
}
.reviews-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; }
.reviews-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: width 200ms ease, background-color 200ms ease; }
.reviews-dot.is-active { background: var(--field); width: 22px; }

.review { background: var(--card); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.7rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.9rem; }
.review--solo { max-width: 640px; }
.review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.review__stars { color: var(--field); font-size: 0.95rem; letter-spacing: 0.15em; }
.review__date { font-size: 0.78rem; color: var(--stone); }
.review__service {
  align-self: flex-start; display: inline-block; background: var(--hivis-tint); color: var(--field);
  font-size: 0.74rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px;
}
.review blockquote {
  margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.review__more { align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -0.3rem; color: var(--field); font-weight: 700; font-size: 0.86rem; cursor: pointer; }
.review__more:hover { text-decoration: underline; }
.review__by { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
/* Holds the HomeStars mark. The background colour still shows while the
   image loads, and stays the fallback if it ever 404s. */
.review__avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--field); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__by div { display: flex; flex-direction: column; }
.review__by strong { font-size: 0.9rem; color: var(--ink); }
.review__by span { font-size: 0.8rem; color: var(--stone); }

/* Off-canvas — full review text, opened by "Read full review" */
.offcanvas { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; }
.offcanvas.is-open { visibility: visible; pointer-events: auto; }
.offcanvas__backdrop { position: absolute; inset: 0; background: rgba(46,43,39,0.55); opacity: 0; transition: opacity 260ms ease; }
.offcanvas.is-open .offcanvas__backdrop { opacity: 1; }
.offcanvas__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw);
  background: var(--card); box-shadow: var(--shadow-lift); padding: 2.4rem clamp(1.4rem, 4vw, 2rem) 2rem;
  overflow-y: auto; transform: translateX(100%); transition: transform 320ms ease;
  display: flex; flex-direction: column; gap: 1rem;
}
.offcanvas.is-open .offcanvas__panel { transform: translateX(0); }
.offcanvas__close {
  position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 999px;
  background: var(--sand); border: 0; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.offcanvas__close svg { width: 16px; height: 16px; }
.offcanvas__panel blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Service area — pinned GTA map
   -------------------------------------------------------------------------- */

/* Map and panel sit side by side from 900px up. Stacked, a landscape monitor
   pushes the panel under the fold — beside the map it stays in view.
   Full section width: the panel now carries a search field, two columns of
   areas and a fallback card, which needs more room than the old 210px rail. */
.area-map {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(0.85rem, 2.2vw, 1.4rem);
  display: grid; gap: 1rem; align-items: start;
}
/* stretch, not start: the panel then matches the map's height and the fallback
   card can sit against its bottom edge rather than floating mid-column. */
@media (min-width: 900px) {
  .area-map {
    grid-template-columns: minmax(0, 1fr) minmax(352px, 31%);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: stretch;
  }
}
/* Static map export, tinted to the palette. isolation keeps the multiply blend
   off the card behind it; the pins sit above ::after so they stay full strength. */
.area-map__stage {
  position: relative; isolation: isolate;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--sand);
  /* So the pin labels can size against the map instead of the viewport —
     see the note on .area-pin[data-name]::after. */
  container-type: inline-size;
}
.area-map__base {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) contrast(0.92) brightness(1.06);
}
.area-map__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--poured); mix-blend-mode: multiply; opacity: 0.5;
}
.area-map__pins { position: absolute; inset: 0; }

/* --x/--y are percentages of the map image, so they hold at any rendered size.
   The dot is sized as a percentage of the map too, not in rem: a fixed-size dot
   on a fluid map changes its footprint relative to the printed place names, so
   the clearance measured against those names would only be right at one width.
   The clamp keeps it visible on phones and from ballooning on wide screens.
   Percentage margins resolve against width for both axes, so half the dot in
   each direction centres it on its coordinate. */
.area-map__stage { --dot: clamp(8px, 1.85%, 18px); }
/* The element is only a positioning box; ::before draws the dot. Keeping them
   separate means the hover scale applies to the dot alone and leaves the ::after
   label at its true size. */
.area-pin {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--dot); height: auto; aspect-ratio: 1;
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
}
.area-pin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--hivis); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px rgba(46,43,39,0.38);
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.area-pin:hover, .area-pin.is-active { z-index: 3; }
.area-pin:hover::before,
.area-pin.is-active::before {
  transform: scale(1.4);
  background: var(--hivis-lift);
  box-shadow: 0 0 0 1px rgba(46,43,39,0.45), 0 0 0 7px rgba(164,224,25,0.35);
}

/* Newmarket falls ~14km north of this crop, so instead of a dot it gets an arrow
   at the top edge, sitting where Highway 404 — the road to it — leaves the map.
   Reads as "keep going this way" rather than pretending to be a location.
   Declared after the hover rules above so it can drop the ring box-shadow, which
   clip-path would not follow; drop-shadow traces the triangle instead. */
.area-pin--edge {
  width: calc(var(--dot) * 1.35);
  margin: calc(var(--dot) * -0.675) 0 0 calc(var(--dot) * -0.675);
}
.area-pin--edge::before {
  border: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 0 1.5px rgba(46,43,39,0.65));
}
.area-pin--edge:hover::before,
.area-pin--edge.is-active::before {
  box-shadow: none;
  filter: drop-shadow(0 0 1.5px rgba(46,43,39,0.75)) drop-shadow(0 0 5px rgba(164,224,25,0.95));
}

/* Areas with no name printed on the map export name themselves. They stay
   visible so the map reads without hovering, but sit back in grey so they
   don't compete with the labels printed into the export; hovering the pin or
   its button darkens them to full ink. The halo keeps them legible over the
   busier parts of the map without needing a chip behind them. */
.area-pin[data-name]::after {
  content: attr(data-name);
  position: absolute; left: 100%; top: 50%;
  margin-left: 0.45rem; transform: translateY(-50%);
  color: var(--stone);
  text-shadow: 0 0 3px var(--cream), 0 0 3px var(--cream), 0 0 6px var(--cream);
  font-weight: 700; line-height: 1.45; white-space: nowrap;
  pointer-events: none;
  transition: color 140ms ease;
  /* Sized against the map, not the viewport. The map's width doesn't track
     the viewport monotonically: at 900px the layout goes two-column and the
     panel claims its 352px minimum, so the map is briefly *narrower* than it
     was on a large phone and only catches up past ~1200px. A viewport media
     query therefore can't keep these labels in proportion — cqw can, and it
     holds regardless of what the grid does later. The rem value is the
     fallback for anything without container queries. */
  font-size: 0.74rem;
  font-size: clamp(8px, 1.7cqw, 12px);
}
.area-pin[data-name]:hover::after,
.area-pin[data-name].is-active::after { color: var(--iron); }

/* The gap to the dot scales with the map for the same reason the type does. */
.area-pin[data-name]::after { margin-left: clamp(0.25rem, 0.7cqw, 0.45rem); }

/* Where the yard is. Sits over the map's bottom-right corner, clear of every
   pin on this crop (the nearest, Pickering, is top-right). */
.area-map__hq {
  position: absolute; right: 3%; bottom: 4%; z-index: 4;
  /* Centred, not flex-start: against a three-line address a top-aligned icon
     reads as floating above the block rather than belonging to it. */
  display: flex; align-items: center; gap: 0.7rem;
  max-width: min(64%, 268px);
  padding: 0.75rem 0.9rem;
  background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
}
.area-map__hq-icon {
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  background: var(--hivis-tint); color: var(--field);
  display: flex; align-items: center; justify-content: center;
}
.area-map__hq-icon svg { width: 17px; height: 17px; }
/* Scoped to the copy block on purpose: a bare `.area-map__hq span` also
   matches the icon span and, being the more specific selector, would drop it
   out of flex layout and knock the glyph off centre in its circle. */
.area-map__hq > div strong { display: block; font-size: 0.86rem; color: var(--ink); line-height: 1.3; }
.area-map__hq > div span { display: block; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; margin-top: 0.1rem; }
@media (max-width: 520px) {
  .area-map__hq { right: 2.5%; bottom: 3%; padding: 0.55rem 0.65rem; gap: 0.5rem; max-width: 72%; }
  .area-map__hq-icon { width: 26px; height: 26px; }
  .area-map__hq-icon svg { width: 13px; height: 13px; }
  .area-map__hq strong { font-size: 0.76rem; }
  .area-map__hq span { font-size: 0.68rem; }
}

/* --------------------------------------------------------------------------
   14c. Service area — the panel beside the map
   -------------------------------------------------------------------------- */

.area-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.area-panel > h3 { font-size: 1.15rem; }

.area-search { position: relative; display: flex; align-items: center; }
.area-search svg {
  position: absolute; left: 0.85rem; width: 17px; height: 17px;
  color: var(--stone); pointer-events: none;
}
.area-search input {
  width: 100%; font-family: var(--ui); font-size: 0.92rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem 0.7rem 2.5rem;
}
.area-search input::placeholder { color: var(--stone); }
.area-search input::-webkit-search-cancel-button { cursor: pointer; }

.area-list__empty { font-size: 0.9rem; color: var(--ink-soft); margin: 0.2rem 0 0; }

/* Buttons carry the names the map no longer does, and are the keyboard path to
   the city pages — the pins are aria-hidden and unfocusable.
   Two columns at every width: the search field above can hide arbitrary rows,
   so a column count that divides 12 evenly buys nothing once filtering starts.
   minmax(0,1fr) stops the longest label ("Richmond Hill") widening its column. */
.area-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
.area-list li[hidden] { display: none; }

.area-btn {
  display: flex; align-items: center; gap: 0.55rem;
  width: 100%;
  background: var(--sand); color: var(--ink); text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  font-size: 0.88rem; font-weight: 700; line-height: 1.2;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* Two columns hold at phone width, but only if the longest label ("Richmond
   Hill") still fits one line in half of it. */
@media (max-width: 430px) {
  .area-btn { padding: 0.6rem 0.6rem; font-size: 0.8rem; gap: 0.4rem; }
}
.area-btn__dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--hivis); transition: background-color 140ms ease; }
/* Chevron drawn from two borders rather than an inline SVG — it appears on
   every one of these buttons on two pages, and carries no meaning of its own. */
.area-btn::after {
  content: ""; flex: none; margin-left: auto;
  width: 0.4rem; height: 0.4rem;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45; transition: opacity 140ms ease;
}
.area-btn:hover,
.area-btn.is-active { background: var(--hivis-tint); border-color: var(--field); color: var(--field); }
.area-btn:hover::after,
.area-btn.is-active::after { opacity: 0.9; }
.area-btn:hover .area-btn__dot,
.area-btn.is-active .area-btn__dot { background: var(--field); }

/* Fallback for anyone whose town isn't on the list. */
.area-help {
  display: flex; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap;
  background: var(--hivis-tint); border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: auto;
}
.area-help__icon {
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  background: var(--card); color: var(--field);
  display: flex; align-items: center; justify-content: center;
}
.area-help__icon svg { width: 17px; height: 17px; }
/* Basis wide enough to hold "Don't see your area?" on one line in the narrowest
   panel this grid produces; below that the button wraps to its own row. */
.area-help__copy { flex: 1 1 148px; }
.area-help__copy strong { display: block; font-size: 0.88rem; color: var(--ink); }
.area-help__copy span { display: block; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.15rem; }
.area-help .btn { flex: 0 1 auto; align-self: center; margin-left: auto; padding-inline: 1rem; }
/* Below this the card is too narrow to hold the button on the same row, so it
   wraps — and a wrapped button hugging the right edge reads as stranded.
   Give it the full row instead. */
@media (max-width: 480px) {
  .area-help .btn { flex: 1 0 100%; margin-left: 0; justify-content: center; }
}

/* --------------------------------------------------------------------------
   14d. Service area — reassurance strip under the map
   -------------------------------------------------------------------------- */

.area-facts {
  display: grid; gap: 1.1rem 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.area-fact { display: flex; align-items: center; gap: 0.8rem; padding-inline: clamp(0.5rem, 2vw, 1.5rem); }
/* Divider between items on the same row only — the last column and any item
   that starts a row must not draw one. */
.area-fact + .area-fact { border-left: 1px solid var(--line); }
@media (max-width: 700px) { .area-fact + .area-fact { border-left: 0; } }
.area-fact__icon {
  width: 46px; height: 46px; flex: none; border-radius: 999px;
  background: var(--hivis-tint); color: var(--field);
  display: flex; align-items: center; justify-content: center;
}
.area-fact__icon svg { width: 22px; height: 22px; }
/* Scoped to the copy block — see the note on .area-map__hq above. */
.area-fact > div strong { display: block; font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
.area-fact > div span { display: block; font-size: 0.87rem; color: var(--ink-soft); line-height: 1.4; margin-top: 0.15rem; }
.area-fact a { font-weight: 700; text-decoration: none; }
.area-fact a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

/* Header sits beside the question list rather than above it — the intro
   column gets a fixed comfortable measure and the list takes the rest. */
.faq-split { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; }
.faq-split .section-head { margin-bottom: 0; max-width: none; }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } }

.faq { display: flex; flex-direction: column; gap: 0.8rem; max-width: 880px; }
.faq details { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 0 1.3rem; }
.faq summary { cursor: pointer; list-style: none; padding-block: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-weight: 700; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--field); flex-shrink: 0; font-family: var(--display); }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 1.3rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   16. Modal — quote form
   -------------------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(46,43,39,0.6); backdrop-filter: blur(2px); }
.modal__panel {
  position: relative; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  padding: 2rem clamp(1.4rem, 4vw, 2.4rem) 2.2rem;
}
.modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 999px;
  background: var(--sand); border: 0; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal__close svg { width: 16px; height: 16px; }
.modal__head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.4rem; padding-right: 2rem; }
.modal__head p { color: var(--ink-soft); }

.form__row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--ui); font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; width: 100%;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   17. Lightbox
   -------------------------------------------------------------------------- */

.lightbox { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(17,14,11,0.92); }
.lightbox__figure { position: relative; z-index: 1; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; }
.lightbox__img { max-width: 100%; max-height: 74vh; border-radius: var(--radius-sm); object-fit: contain; box-shadow: var(--shadow-lift); }
.lightbox__caption { color: #F0EAD8; text-align: center; font-size: 0.95rem; }
.lightbox__caption strong { color: #fff; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: fixed; width: 46px; height: 46px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 140ms ease;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,0.24); }
.lightbox__close { top: 1.25rem; right: 1.25rem; z-index: 2; }
.lightbox__prev { top: 50%; left: 1.25rem; transform: translateY(-50%); z-index: 2; }
.lightbox__next { top: 50%; right: 1.25rem; transform: translateY(-50%); z-index: 2; }
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .lightbox__prev, .lightbox__next { width: 40px; height: 40px; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
  .lightbox__close { top: 0.5rem; right: 0.5rem; }
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.foot { background: var(--iron); color: #B9B2A5; font-size: 0.92rem; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding-block: clamp(2.75rem, 5vw, 3.75rem); }
.foot h3 { color: var(--formwork); font-family: var(--ui); font-size: 0.95rem; margin-bottom: 0.9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.foot a { color: #B9B2A5; text-decoration: none; }
.foot a:hover { color: var(--hivis); }
.foot__brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.foot__brand img { height: 26px; width: auto; }
.foot__bar { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: 0.85rem; }
.foot__bar a { color: #B9B2A5; }

/* --------------------------------------------------------------------------
   19. Interior page hero
   Shorter than the homepage hero: no video, no 88vh, and it sits under a
   breadcrumb rather than carrying the whole first screen.
   -------------------------------------------------------------------------- */

.hero--page { min-height: 0; }
.hero--page .hero__inner { padding-block: clamp(3rem, 7vw, 4.75rem); gap: 1.1rem; }
.hero--page h1 { font-size: clamp(2.2rem, 4.8vw, 3.5rem); max-width: 18ch; }
.hero--page .hero__sub { max-width: 56ch; }
.hero--page .hero__scrim { background: linear-gradient(190deg, rgba(46,43,39,0.5) 0%, rgba(46,43,39,0.62) 55%, rgba(46,43,39,0.88) 100%); }

.crumbs { position: relative; z-index: 2; background: var(--sand); border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0.7rem 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--field); }
.crumbs li + li::before { content: "/"; color: var(--stone); margin-right: 0.4rem; }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   20. Gallery page — filters and masonry
   The mosaic on the homepage is a fixed six-photo composition. This grid has
   to take an arbitrary number of photos in mixed orientations, so it runs on
   CSS columns and keeps each photo's own aspect ratio instead of cropping.
   -------------------------------------------------------------------------- */

.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 2rem; }
.filter-chip {
  font-family: var(--ui); font-weight: 700; font-size: 0.88rem; line-height: 1;
  background: var(--card); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.62rem 1.1rem; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip[aria-pressed="true"] { background: var(--hivis); border-color: var(--hivis); color: var(--iron); }
.filter-chip__count { font-size: 0.78rem; opacity: 0.62; margin-left: 0.35rem; }

.masonry { columns: 3; column-gap: 1rem; }
.masonry .tile { height: auto; margin-bottom: 1rem; break-inside: avoid; display: block; }
.masonry .tile img { height: auto; }
.masonry .tile[hidden] { display: none; }

/* The caption is part of the tile on this page — with 36 photos of similar
   subjects, "which job is this" is the thing a visitor actually wants. */
.tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem 0.95rem;
  background: linear-gradient(0deg, rgba(46,43,39,0.88) 0%, rgba(46,43,39,0) 100%);
  color: #fff; text-align: left; font-size: 0.86rem; font-weight: 600; line-height: 1.35;
}
.tile__caption span { display: block; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hivis); margin-bottom: 0.2rem; }

.gallery-empty { padding: 2.5rem 0; color: var(--ink-soft); }

@media (max-width: 900px) { .masonry { columns: 2; } }
@media (max-width: 520px) { .masonry { columns: 1; } }

.lightbox__counter { color: #B9B2A5; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }

/* --------------------------------------------------------------------------
   21. About page — story blocks and figures
   -------------------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.stack p { color: var(--ink-soft); }

.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.story + .story { margin-top: var(--section-y); }
.story--flip .story__media { order: 2; }
/* Fixed ratio so a 2:3 photo and a 4:5 photo don't give two story blocks
   wildly different heights. */
.story__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem 1rem; background: linear-gradient(0deg, rgba(46,43,39,0.85) 0%, rgba(46,43,39,0) 100%); color: #E4DFD2; font-size: 0.84rem; }

@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story--flip .story__media { order: -1; }
  .story__media { aspect-ratio: 16 / 10; }
}

.facts { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fact { background: var(--card); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--shadow); }
.fact strong { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--field); margin-bottom: 0.45rem; }
.fact span { font-size: 0.92rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   22. Contact page — detail cards and the form/aside split
   -------------------------------------------------------------------------- */

.contact-cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.contact-card { background: var(--card); border-radius: var(--radius); padding: 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.contact-card__icon { width: 46px; height: 46px; border-radius: 999px; background: var(--hivis-tint); color: var(--field); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card h3 { margin-bottom: 0.1rem; }
.contact-card p, .contact-card address { font-size: 0.95rem; color: var(--ink-soft); font-style: normal; line-height: 1.55; }
.contact-card a { font-weight: 700; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-card__big { font-family: var(--display); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; }

.contact-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; }
.contact-form { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.hours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours strong { font-weight: 700; }
.hours span { color: var(--ink-soft); }

@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   23. Blog — listing pagination, post hero, article typography
   -------------------------------------------------------------------------- */

.blog-state { padding: 2.5rem 0; color: var(--ink-soft); }

.blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2.5rem; }
.blog-pagination__btn {
  font-family: var(--ui); font-weight: 700; font-size: 0.9rem; line-height: 1;
  min-width: 2.6rem; padding: 0.62rem 0.9rem;
  background: var(--card); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.blog-pagination__btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.blog-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.blog-pagination__btn.is-active { background: var(--hivis); border-color: var(--hivis); color: var(--iron); }

/* Post detail hero — same hero--page shell as every other interior page, but
   the photo is set at runtime (one template renders every post) so it's a
   plain background-image div instead of a <picture><img>. */
.post-hero-date { color: #E4DFD2; font-size: 0.92rem; font-weight: 600; margin: 0; }

.article { max-width: 720px; margin-inline: auto; }
.article-back {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.75rem;
  font-weight: 700; font-size: 0.95rem; color: var(--field); text-decoration: none;
}
.article-back svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.article-back:hover svg { transform: translateX(-3px); }
.article-excerpt { margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); }

.article-content { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; }
.article-content > * { max-width: none; }
.article-content > * + * { margin-top: 1.25rem; }
.article-content h2 { font-family: var(--display); font-size: 1.5rem; color: var(--ink); margin-top: 2.25rem; }
.article-content h3 { font-family: var(--ui); font-size: 1.12rem; color: var(--ink); margin-top: 1.75rem; }
.article-content ul, .article-content ol { display: flex; flex-direction: column; gap: 0.55rem; padding-left: 1.4rem; }
.article-content a { color: var(--field); font-weight: 700; }
.article-content strong { color: var(--ink); }
.article-content blockquote { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--hivis); color: var(--ink-soft); font-style: italic; }
.article-content img { border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.article-content code { background: var(--sand); border-radius: 4px; padding: 0.15em 0.4em; font-size: 0.9em; }