/* ==========================================================================
   Gres Noble Tile & Stone — Design Tokens
   Modern luxury showroom aesthetic: warm ivory/stone/charcoal, brass accent.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2?v=1786839524") format("woff2-variations"),
       url("../fonts/Geist-Variable.woff2?v=1786839524") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — architectural material palette: limestone, travertine, charcoal, brass */
  --color-ivory: #F5F2EC;
  --color-ivory-deep: #EFEAE0;
  --color-limestone: #E7E1D7;
  --color-charcoal: #242321;
  --color-charcoal-deep: #302E2A;
  --color-warm-brown: #6D6962;
  --color-taupe: #928D84;
  --color-taupe-light: #B7B2A7;
  --color-brass: #A58A5C;
  --color-brass-deep: #8C7249;
  --color-brass-soft: #BBA377;
  --color-border: #DCD4C4;
  --color-border-strong: #CBC0AA;
  --color-card: #FFFFFF;
  --color-white: #FFFFFF;

  --color-background: var(--color-ivory);
  --color-foreground: var(--color-charcoal);
  --color-muted-foreground: var(--color-warm-brown);

  /* Typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* Shadows — soft, warm-tinted, never cool grey */
  --shadow-sm: 0 1px 3px rgba(36, 35, 33, 0.07);
  --shadow-md: 0 6px 16px rgba(36, 35, 33, 0.08);
  --shadow-lg: 0 16px 32px rgba(36, 35, 33, 0.12);
  --shadow-xl: 0 28px 56px rgba(36, 35, 33, 0.18);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-sm: 180ms;
  --duration-md: 320ms;
  --duration-lg: 480ms;

  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 10px;

  --container-width: 1240px;
  --header-height: 96px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-brass-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Typography — sans carries most of the page; serif is used sparingly
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-charcoal);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 2.4vw + 1.5rem, 3.1rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 1.4vw + 1.3rem, 2.35rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

.serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0;
}
h1.serif, .hero-headline { font-weight: 500; font-optical-sizing: auto; }

p { max-width: 62ch; color: var(--color-warm-brown); }
p.lede { font-size: 1.1rem; color: var(--color-warm-brown); line-height: 1.65; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--color-brass);
}
.eyebrow.center::before { display: none; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-2xl); } }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--compact { padding-block: var(--space-xl); }
.section--panel { background: var(--color-limestone); }
.section--dark { background: var(--color-charcoal-deep); color: var(--color-ivory); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-ivory); }
.section--dark p { color: rgba(245, 242, 236, 0.72); }

.section-head { max-width: 620px; margin-bottom: var(--space-2xl); }
.section-head.center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 550;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform var(--duration-sm) var(--ease-standard),
              box-shadow var(--duration-sm) var(--ease-standard),
              background-color var(--duration-sm) var(--ease-standard),
              border-color var(--duration-sm) var(--ease-standard),
              color var(--duration-sm) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--color-charcoal); color: var(--color-ivory); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-charcoal-deep); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--color-charcoal); border: 1.5px solid var(--color-charcoal); }
.btn-outline:hover { background: var(--color-charcoal); color: var(--color-ivory); }

.btn-outline-light { background: transparent; color: var(--color-ivory); border: 1.5px solid rgba(245,242,236,0.55); }
.btn-outline-light:hover { border-color: var(--color-ivory); background: rgba(245,242,236,0.1); }

.btn-ghost { color: var(--color-charcoal); font-weight: 600; padding: 0.4rem 0; }
.btn-ghost:hover { color: var(--color-brass-deep); }

.nav-quote {
  display: none;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--color-brass);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-white);
  background: var(--color-brass);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-sm) var(--ease-standard), box-shadow var(--duration-sm) var(--ease-standard), transform var(--duration-sm) var(--ease-standard);
}
.nav-quote:hover { background: var(--color-brass-deep); border-color: var(--color-brass-deep); box-shadow: var(--shadow-md); transform: translateY(-1px); }
@media (min-width: 960px) { .nav-quote { display: inline-flex; align-items: center; } }

.btn-block { width: 100%; }
.btn-lg { padding: 1rem 1.9rem; font-size: 0.98rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 242, 236, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--duration-md) var(--ease-standard),
              border-color var(--duration-md) var(--ease-standard),
              transform 340ms var(--ease-standard);
  will-change: transform;
}
/* Tucked away while reading downward; slides back on any upward scroll. */
.site-header.is-tucked { transform: translateY(-100%); }
/* Never trap the menu off-screen. */
.site-header.is-tucked .mobile-menu.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: box-shadow var(--duration-md) var(--ease-standard), border-color var(--duration-md) var(--ease-standard); }
  .site-header.is-tucked { transform: none; }
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--color-border); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); height: var(--header-height); }

.brand { display: flex; align-items: center; gap: 0.7rem; line-height: 1.1; }
.brand-mark { flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.brand-wordmark {
  height: auto;
  width: 100%;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
@media (min-width: 640px) {
  .brand-wordmark { max-width: 220px; }
}
@media (min-width: 960px) {
  .brand-wordmark { max-width: 250px; }
}
.footer-brand .brand-wordmark { max-width: 186px; }
@media (min-width: 640px) {
  .footer-brand .brand-wordmark { max-width: 206px; }
}
.brand-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-charcoal);
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brass-deep);
  font-weight: 600;
}

.nav-links { display: none; align-items: center; gap: var(--space-lg); }
.nav-links a {
  /* Matches the eyebrow system used throughout: small, uppercase, letter-spaced.
     Reads as architectural signage rather than default web nav. */
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-warm-brown);
  position: relative;
  padding-block: 4px;
  white-space: nowrap;
  transition: color var(--duration-sm) var(--ease-standard);
}
.nav-links a:hover { color: var(--color-charcoal); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--color-brass);
  transition: right var(--duration-md) var(--ease-standard);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--color-charcoal); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.nav-call {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-charcoal);
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--color-brass);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: border-color var(--duration-sm) var(--ease-standard), background-color var(--duration-sm) var(--ease-standard), color var(--duration-sm) var(--ease-standard);
}
.nav-call:hover { background: var(--color-brass); color: var(--color-white); }
.nav-call .icon { color: var(--color-brass); width: 17px; height: 17px; }
.nav-call:hover .icon { color: var(--color-white); }

.nav-toggle { display: inline-flex; cursor: pointer; padding: var(--space-sm); }

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}
/* The call button only appears once the row can hold it without wrapping. */
@media (min-width: 1140px) {
  .nav-call { display: inline-flex; }
  .nav-links { gap: var(--space-xl); }
  .nav-actions { gap: var(--space-md); }
}
@media (min-width: 1320px) {
  .nav-links { gap: var(--space-2xl); }
}

.mobile-menu {
  display: none; flex-direction: column; gap: 0;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-ivory);
}
.mobile-menu.is-open { display: flex; }
/* Padding on the link, not gap between links: closes the dead space and gives
   each row a real 44px+ target instead of a bare 26px line box. */
.mobile-menu a {
  font-size: 1.02rem; font-weight: 600; color: var(--color-charcoal);
  padding-block: 0.62rem;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu a:last-child { border-bottom: 0; }
@media (min-width: 960px) { .mobile-menu { display: none !important; } }

.mobile-call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 1px;
  background: var(--color-border);
  box-shadow: 0 -6px 20px rgba(42,37,33,0.12);
}
.mobile-call-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: 0.95rem; font-weight: 700; font-size: 0.92rem;
}
.mobile-call-bar .mcb-call { background: var(--color-charcoal); color: var(--color-ivory); }
.mobile-call-bar .mcb-quote { background: var(--color-brass); color: var(--color-white); }
@media (min-width: 960px) { .mobile-call-bar { display: none; } }
body.has-mobile-bar { padding-bottom: 64px; }
@media (min-width: 960px) { body.has-mobile-bar { padding-bottom: 0; } }

/* ==========================================================================
   Hero — split layout, image-forward
   ========================================================================== */

.hero { background: var(--color-ivory); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  /* Capped so the hero photo isn't stretched far past its native height —
     a taller box forces object-fit: cover to upscale and go soft. */
  .hero-grid { grid-template-columns: 0.8fr 1.2fr; min-height: calc(100vh - var(--header-height)); max-height: 660px; }
}

.hero-copy { padding-block: var(--space-2xl); }
@media (min-width: 960px) { .hero-copy { padding-block: var(--space-3xl); padding-right: var(--space-2xl); } }

.hero-headline {
  font-size: clamp(2.4rem, 3.4vw + 1.5rem, 3.9rem);
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.06;
}
.hero-sub { margin-top: var(--space-lg); font-size: 1.1rem; color: var(--color-warm-brown); max-width: 46ch; }
.hero-cta { margin-top: var(--space-xl); }
.hero-cta .btn-primary { background: var(--color-brass); box-shadow: var(--shadow-sm); }
.hero-cta .btn-primary:hover { background: var(--color-brass-deep); }
.hero-cta .btn-primary .icon { width: 17px; height: 17px; transition: transform var(--duration-sm) var(--ease-standard); }
.hero-cta .btn-primary:hover .icon { transform: translateX(3px); }
.hero-cta .btn-outline { border-color: var(--color-brass); }
.hero-cta .btn-outline:hover { background: var(--color-brass); color: var(--color-white); border-color: var(--color-brass); }
.hero-location {
  margin-top: var(--space-xl);
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: 0.85rem; color: var(--color-taupe); font-weight: 500;
}
.hero-location .icon { width: 16px; height: 16px; color: var(--color-brass); }

.hero-media { position: relative; height: 320px; }
@media (min-width: 960px) { .hero-media { height: 100%; min-height: 520px; } }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* One slow settle on load — no loop, no bounce. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: heroSettle 2600ms var(--ease-standard) both; }
}
@keyframes heroSettle { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(245,242,236,0.16) 0%, rgba(245,242,236,0) 14%),
    linear-gradient(to top, var(--color-ivory) 0%, rgba(245,242,236,0.5) 6%, rgba(245,242,236,0) 14%);
}
@media (min-width: 960px) {
  .hero-media::before {
    background:
      linear-gradient(to right, var(--color-ivory) 0%, rgba(245,242,236,0.55) 6%, rgba(245,242,236,0) 16%),
      linear-gradient(to top, var(--color-ivory) 0%, rgba(245,242,236,0.55) 5%, rgba(245,242,236,0) 12%);
  }
}
.hero-media .media-tag {
  position: absolute; bottom: var(--space-md); left: var(--space-md);
  background: rgba(36,35,33,0.72); color: var(--color-ivory);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border-radius: 999px;
}

/* ==========================================================================
   Image-first cards (services)
   ========================================================================== */

.media-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-md) var(--ease-standard), transform var(--duration-md) var(--ease-standard);
}
.media-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.media-card .media-frame { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.media-card .media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-lg) var(--ease-standard); }
.media-card:hover .media-frame img { transform: scale(1.045); }
.media-card .media-body { padding: var(--space-lg); }
.media-card h3 { margin-bottom: var(--space-xs); }
.media-card p { font-size: 0.92rem; color: var(--color-warm-brown); margin: 0; }
.media-card .media-tag {
  position: absolute; bottom: var(--space-sm); left: var(--space-sm);
  background: rgba(36,35,33,0.68); color: var(--color-ivory);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.32rem 0.6rem; border-radius: 999px;
}

/* ==========================================================================
   Featured work / masonry gallery
   ========================================================================== */

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.filter-btn {
  padding: 0.5rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--color-border-strong);
  font-size: 0.82rem; font-weight: 600; color: var(--color-warm-brown); cursor: pointer;
  transition: all var(--duration-sm) var(--ease-standard); background: var(--color-card);
}
.filter-btn:hover { border-color: var(--color-brass); color: var(--color-charcoal); }
.filter-btn.is-active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-ivory); }

.masonry {
  columns: 1;
  column-gap: var(--space-lg);
}
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-md) var(--ease-standard);
}
.masonry-item:hover { box-shadow: var(--shadow-lg); }
/* height:auto is required — the width/height attributes on these <img> tags
   (present so the browser can reserve space and avoid layout shift) would
   otherwise be taken as literal pixel heights and stretch the photo. */
.masonry-item img { width: 100%; height: auto; display: block; transition: transform var(--duration-lg) var(--ease-standard); }
.masonry-item.tall img { aspect-ratio: 3/4; object-fit: cover; }
.masonry-item.wide img { aspect-ratio: 16/9; object-fit: cover; }
.masonry-item:hover img { transform: scale(1.04); }
.masonry-item .item-caption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(0deg, rgba(36,35,33,0.78) 0%, rgba(36,35,33,0) 100%);
  color: var(--color-ivory);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--duration-sm) var(--ease-standard), transform var(--duration-sm) var(--ease-standard);
}
.masonry-item:hover .item-caption, .masonry-item:focus-visible .item-caption { opacity: 1; transform: translateY(0); }
.masonry-item .item-caption strong { display: block; font-size: 0.92rem; }
.masonry-item .item-caption span { font-size: 0.72rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
.masonry-item .zoom-hint {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(245,242,236,0.9); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--duration-sm) var(--ease-standard);
}
.masonry-item:hover .zoom-hint { opacity: 1; }
.masonry-item .zoom-hint .icon { width: 15px; height: 15px; color: var(--color-charcoal); }

.masonry-item--video { cursor: default; }
.masonry-item--video video { width: 100%; display: block; background: var(--color-charcoal-deep); }
.masonry-item--video .zoom-hint { display: none; }
.masonry-item--video .item-caption {
  position: static; opacity: 1; transform: none;
  background: var(--color-card); color: var(--color-charcoal);
  padding: var(--space-sm) var(--space-md);
}
.masonry-item--video .item-caption span { color: var(--color-warm-brown); opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30, 29, 27, 0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-xl);
}
.lightbox.is-open { display: flex; }
.lightbox-content { max-width: 1100px; width: 100%; max-height: 88vh; }
.lightbox-content img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--radius-sm); margin-inline: auto; }
.lightbox-caption { color: var(--color-ivory); text-align: center; margin-top: var(--space-md); }
.lightbox-caption strong { display: block; font-size: 1rem; }
.lightbox-caption span { font-size: 0.8rem; color: rgba(245,242,236,0.65); text-transform: uppercase; letter-spacing: 0.05em; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; color: var(--color-ivory); cursor: pointer;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(245,242,236,0.1);
  transition: background var(--duration-sm) var(--ease-standard);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(245,242,236,0.2); }
.lightbox-close { top: var(--space-lg); right: var(--space-lg); }
.lightbox-prev { left: var(--space-lg); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-lg); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
  .lightbox { padding: var(--space-md); }
}

/* ==========================================================================
   Editorial material feature section
   ========================================================================== */

.material-feature {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}
.material-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.material-feature::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(30,29,27,0.82) 0%, rgba(30,29,27,0.25) 55%, rgba(30,29,27,0.05) 100%);
}
.material-feature-content { position: relative; z-index: 1; padding: var(--space-2xl); color: var(--color-ivory); max-width: 640px; }
.material-feature .eyebrow { color: var(--color-brass-soft); }
.material-feature .eyebrow::before { background: var(--color-brass-soft); }
.material-feature h2 { color: var(--color-ivory); }
.material-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.material-chip-row .chip {
  padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid rgba(245,242,236,0.35);
  font-size: 0.82rem; font-weight: 500; color: var(--color-ivory);
}

/* ==========================================================================
   Split feature sections (kitchens, bathrooms)
   ========================================================================== */

.split {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split-media { order: 1; }
.split-text { order: 2; }
@media (min-width: 900px) {
  .split--reverse .split-media { order: 2; }
  .split--reverse .split-text { order: 1; }
}
.split-media .frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); position: relative; aspect-ratio: 5/4; }
.split-media .frame img { width: 100%; height: 100%; object-fit: cover; }

/* Brand plate: the About section is about who we are, not another job photo.
   Coursing keeps the motif tied to the trade — the compass/star mark was
   rejected by the client and must not come back. */
.split-media .frame--brand {
  background-color: var(--color-limestone);
  display: grid;
  place-items: center;
  padding: var(--space-2xl);
}
.split-media .frame--brand::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg fill='none' stroke='%23BBA377' stroke-width='1.2' stroke-opacity='0.45'%3E%3Crect x='0' y='0' width='80' height='40'/%3E%3Crect x='80' y='0' width='80' height='40'/%3E%3Crect x='-40' y='40' width='80' height='40'/%3E%3Crect x='40' y='40' width='80' height='40'/%3E%3Crect x='120' y='40' width='80' height='40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 66px;
  -webkit-mask-image: radial-gradient(115% 95% at 50% 50%, rgba(0,0,0,0) 34%, rgba(0,0,0,0.95) 100%);
          mask-image: radial-gradient(115% 95% at 50% 50%, rgba(0,0,0,0) 34%, rgba(0,0,0,0.95) 100%);
}
/* Who We Are carries no photograph: nothing in the library reads as "us"
   rather than "the work", and an enlarged wordmark read as a title card when
   the mark already sits in the header. Type and measure carry it instead —
   statement left, detail right, divided by a drafting hairline. */
/* With no photograph, the section has to hold its own on type alone: more
   air than a standard band, a statement-scale headline, and a reading column
   set to a proper measure. Standfirst first, detail after. */
/* limestone made this band jump out of the page between two ivory sections.
   ivory-deep is the palette's secondary tint — separation without a slab. */
#who-we-are { background-color: var(--color-ivory-deep); }
@media (min-width: 900px) {
  #who-we-are { padding-block: calc(var(--space-3xl) * 1.45); }
}

.intro-split {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-lg); align-items: start;
}
@media (min-width: 900px) {
  .intro-split {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: calc(var(--space-3xl) * 1.1);
  }
  .intro-body { padding-left: var(--space-2xl); border-left: 1px solid var(--color-border-strong); }
}

.intro-head h2 {
  /* Same scale as every other section heading — the section earns presence
     from space and hierarchy, not from a one-off size. */
  margin: 0;
  text-wrap: balance;
}

/* Standfirst: the opening statement is the one people actually read. */
.intro-body p.lede {
  font-size: clamp(1.12rem, 0.4vw + 1rem, 1.28rem);
  line-height: 1.58;
  color: var(--color-charcoal);
  max-width: 46ch;
}
.intro-body p { max-width: 56ch; }
.intro-body p + p { margin-top: var(--space-lg); }

/* Client reviews. On mobile the three stacked full-width and read as a plain
   list; now they're a swipeable rail, one at a time, with arrows. Desktop gets
   all three side by side and the controls disappear. */
.reviews-rail { position: relative; }

.quote-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(var(--space-lg) * -1);
  padding-inline: var(--space-lg);
  padding-block: var(--space-xs);
}
.quote-row::-webkit-scrollbar { display: none; }

.quote-item {
  flex: 0 0 88%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.quote-item blockquote {
  margin: 0; flex: 1;
  font-size: 1rem; line-height: 1.6; font-weight: 400;
  color: var(--color-warm-brown);
}
.quote-item blockquote p { margin: 0; }

.quote-stars { display: flex; gap: 3px; color: var(--color-brass); margin-bottom: var(--space-sm); }
.quote-stars svg { width: 15px; height: 15px; }

.quote-author { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.quote-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-limestone); border: 1px solid var(--color-border-strong);
  font-size: 0.82rem; font-weight: 600; color: var(--color-brass-deep);
}
.quote-name { font-size: 0.88rem; font-weight: 600; color: var(--color-charcoal); line-height: 1.25; }
.quote-date { font-size: 0.78rem; color: var(--color-taupe); line-height: 1.25; }

/* --- rail controls --- */
.rail-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md); margin-top: var(--space-lg);
}
.rail-btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-charcoal);
  transition: background var(--duration-sm) var(--ease-standard),
              border-color var(--duration-sm) var(--ease-standard),
              opacity var(--duration-sm) var(--ease-standard);
}
.rail-btn svg { width: 17px; height: 17px; }
.rail-btn:hover { border-color: var(--color-brass); background: var(--color-ivory-deep); }
.rail-btn[disabled] { opacity: 0.32; cursor: default; }
.rail-btn[disabled]:hover { border-color: var(--color-border-strong); background: transparent; }

.rail-dots { display: flex; gap: 7px; }
.rail-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-border-strong); cursor: pointer;
  transition: background var(--duration-sm) var(--ease-standard),
              transform var(--duration-sm) var(--ease-standard);
}
.rail-dots button[aria-current="true"] { background: var(--color-brass); transform: scale(1.35); }

@media (min-width: 760px) { .quote-item { flex-basis: 46%; } }

/* Desktop: three across, no rail, no controls. */
@media (min-width: 1000px) {
  .quote-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .quote-item { flex-basis: auto; }
  .rail-controls { display: none; }
}

.review-source { margin-top: var(--space-xl); text-align: center; font-size: 0.82rem; color: var(--color-taupe); }
.review-source a { color: var(--color-brass-deep); text-underline-offset: 3px; }

/* contain, not cover — a wordmark must never be cropped */
.split-media .frame--brand img {
  position: relative; z-index: 1;
  width: auto; height: auto;
  max-width: 70%; max-height: 44%;
  object-fit: contain;
}
.split-media .frame .media-tag {
  position: absolute; bottom: var(--space-md); left: var(--space-md);
  background: rgba(36,35,33,0.7); color: var(--color-ivory);
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 999px;
}
.split-text ul.mini-list { margin-top: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem var(--space-lg); }
.split-text ul.mini-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--color-warm-brown); }
.split-text ul.mini-list .icon { color: var(--color-brass); flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; }

/* ==========================================================================
   Why us cards
   ========================================================================== */

.value-card { padding: var(--space-xl); background: var(--color-card); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.value-card .icon-wrap {
  width: 44px; height: 44px; border-radius: 10px; background: var(--color-limestone);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md);
}
.value-card .icon-wrap .icon { color: var(--color-brass-deep); }
.value-card h3 { margin-bottom: var(--space-xs); font-size: 1.05rem; }
.value-card p { font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   Process
   ========================================================================== */

.process-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); counter-reset: step; }
@media (min-width: 700px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }
.process-step { position: relative; padding-top: var(--space-sm); border-top: 2px solid var(--color-brass); }
.process-step .step-num { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-brass-deep); display: block; margin: var(--space-sm) 0 var(--space-xs); }
.process-step h4 { margin-bottom: var(--space-xs); }
.process-step p { font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   Service area (compact)
   ========================================================================== */

.area-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xl); padding: var(--space-2xl); background: var(--color-limestone); border-radius: var(--radius-lg);
}
.area-strip .area-copy { max-width: 480px; }
.area-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); max-width: 460px; }
.area-tags .chip { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--color-card); border: 1px solid var(--color-border-strong); font-size: 0.8rem; font-weight: 500; color: var(--color-warm-brown); }

/* ==========================================================================
   Final CTA — image background, warm overlay (never pure black)
   ========================================================================== */

.final-cta { position: relative; overflow: hidden; }
.final-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Light at the top so the photograph reads; denser behind the copy for contrast. */
.final-cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,35,33,0.34) 0%, rgba(36,35,33,0.70) 42%, rgba(36,35,33,0.80) 100%);
}
.final-cta-content { position: relative; z-index: 1; color: var(--color-ivory); text-align: center; padding-block: var(--space-4xl); }
.final-cta-content h2 { color: var(--color-ivory); }
/* Full-opacity ivory — at 17.6px this needs the full 4.5:1 against the scrim. */
.final-cta-content p { color: var(--color-ivory); }
/* Gold primary here matches the hero CTA and reads on the photograph. */
.final-cta .btn-primary { background: var(--color-brass); color: var(--color-white); }
.final-cta .btn-primary:hover { background: var(--color-brass-deep); }

/* ==========================================================================
   Cards / reviews
   ========================================================================== */

.card {
  background: var(--color-card); border-radius: var(--radius-md); padding: var(--space-xl);
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
}
.review-card blockquote { font-size: 1.02rem; color: var(--color-charcoal); line-height: 1.5; }
.review-stars { display: flex; gap: 2px; color: var(--color-brass); }
.review-meta { margin-top: var(--space-md); font-size: 0.84rem; color: var(--color-taupe); font-weight: 600; }

/* ==========================================================================
   Placeholder tag (general use, honest labeling)
   ========================================================================== */

.placeholder-tag {
  position: absolute; bottom: var(--space-sm); left: var(--space-sm);
  background: rgba(36,35,33,0.68); color: var(--color-ivory);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.32rem 0.6rem; border-radius: 999px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--color-charcoal-deep); color: rgba(245,242,236,0.68); padding-block: var(--space-2xl) var(--space-xl); }
.footer-grid { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand-name { color: var(--color-ivory); }
.footer-brand p { margin-top: var(--space-md); font-size: 0.9rem; max-width: 34ch; color: rgba(245,242,236,0.6); }
.footer-heading { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.42); margin-bottom: var(--space-md); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-sm); font-size: 0.9rem; }
.footer-links a:hover, .footer-contact a:hover { color: var(--color-ivory); }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-sm); font-size: 0.9rem; }
.footer-bottom {
  margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(245,242,236,0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md);
  font-size: 0.78rem; color: rgba(245,242,236,0.42);
}

/* ==========================================================================
   Reveal (restrained — fade + tiny lift only)
   ========================================================================== */

/* Text settles with opacity and a barely-there lift — no 12px "fade-up". */
[data-reveal] {
  opacity: 0; transform: translateY(4px);
  transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Photography reveals as an unmasking rather than a slide: the frame holds
   still and the image is uncovered, which reads as intentional art direction. */
.tile[data-reveal],
.material-band[data-reveal],
.masonry-item[data-reveal],
.split-media[data-reveal] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 22% 0);
  transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tile[data-reveal] img,
.material-band[data-reveal] img,
.masonry-item[data-reveal] img,
.split-media[data-reveal] img {
  transform: scale(1.04);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tile[data-reveal].is-visible,
.material-band[data-reveal].is-visible,
.masonry-item[data-reveal].is-visible,
.split-media[data-reveal].is-visible { clip-path: inset(0 0 0 0); }
.tile[data-reveal].is-visible img,
.material-band[data-reveal].is-visible img,
.masonry-item[data-reveal].is-visible img,
.split-media[data-reveal].is-visible img { transform: scale(1); }
/* hover scale must still win once the tile has settled */
.tile[data-reveal].is-visible:hover img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .tile[data-reveal], .material-band[data-reveal],
  .masonry-item[data-reveal], .split-media[data-reveal] {
    opacity: 1; transform: none; transition: none; clip-path: none;
  }
  .tile[data-reveal] img, .material-band[data-reveal] img,
  .masonry-item[data-reveal] img, .split-media[data-reveal] img {
    transform: none; transition: none;
  }
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */

.page-hero { padding-block: var(--space-2xl) var(--space-xl); background: var(--color-limestone); }
.page-hero .eyebrow { color: var(--color-brass-deep); }
.page-hero p.lede { max-width: 60ch; }
/* Sets scope expectations before anyone reads a service list. */
.page-hero .scope-note {
  margin-top: var(--space-sm);
  font-size: 0.95rem;
  color: var(--color-warm-brown);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-brass);
}

/* ==========================================================================
   Service detail rows
   ========================================================================== */

.service-detail:not(:last-of-type) { margin-bottom: var(--space-3xl); padding-bottom: var(--space-3xl); border-bottom: 1px solid var(--color-border); }
.service-detail .service-block-label { font-size: 0.78rem; font-weight: 700; color: var(--color-brass-deep); letter-spacing: 0.08em; }
.service-included { margin-top: var(--space-lg); }
.service-included h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-taupe); margin-bottom: var(--space-sm); }

/* ==========================================================================
   Materials strip (services page)
   ========================================================================== */

.material-card { text-align: center; padding: var(--space-xl) var(--space-md); background: var(--color-card); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.material-card .icon-wrap { width: 50px; height: 50px; border-radius: 50%; background: var(--color-limestone); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: var(--space-sm); }
.material-card .icon-wrap .icon { color: var(--color-brass-deep); }
.material-card p { font-size: 0.85rem; margin-inline: auto; }
.grid-5 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* ==========================================================================
   Quote / contact form
   ========================================================================== */

.form-card { background: var(--color-card); border-radius: var(--radius-lg); padding: var(--space-2xl); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
@media (min-width: 620px) { .form-row.two-col { grid-template-columns: 1fr 1fr; } }

.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-charcoal); margin-bottom: var(--space-xs); }
.field .req { color: var(--color-brass-deep); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%; padding: 0.8rem 1rem; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 0.95rem; background: var(--color-ivory); color: var(--color-charcoal);
  transition: border-color var(--duration-sm) var(--ease-standard);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-brass); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F7F6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.5rem; }
.field-hint { font-size: 0.78rem; color: var(--color-taupe); margin-top: var(--space-xs); }

.upload-zone {
  border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--space-xl); text-align: center; cursor: pointer;
  transition: border-color var(--duration-sm) var(--ease-standard), background var(--duration-sm) var(--ease-standard);
  position: relative;
}
.upload-zone:hover, .upload-zone.is-dragover { border-color: var(--color-brass); background: var(--color-limestone); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone .icon { color: var(--color-brass); width: 30px; height: 30px; margin-inline: auto; margin-bottom: var(--space-sm); }
.upload-zone p { margin: 0; font-size: 0.88rem; }
.upload-zone .upload-hint { font-size: 0.78rem; color: var(--color-taupe); margin-top: var(--space-3xs); }

.upload-previews { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.upload-previews .thumb { position: relative; width: 74px; height: 74px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); }
.upload-previews .thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-previews .thumb button {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(36,35,33,0.75); color: var(--color-ivory); display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.form-note { font-size: 0.82rem; color: var(--color-taupe); margin-top: var(--space-md); }
.form-status { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); font-size: 0.9rem; display: none; }
.form-status.is-visible { display: block; }
.form-status.success { background: #EEF3E7; color: #46592C; }
.form-status.error { background: #FBEAE5; color: #8A3B29; }

/* ==========================================================================
   Contact panels (contact page)
   ========================================================================== */

.contact-panel { text-align: center; padding: var(--space-xl) var(--space-lg); }
.contact-panel .icon-wrap { width: 50px; height: 50px; border-radius: 50%; background: var(--color-limestone); display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: var(--space-md); }
.contact-panel .icon-wrap .icon { color: var(--color-brass-deep); }

.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
.hours-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.hours-table tr.is-today td { color: var(--color-brass-deep); font-weight: 700; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-xs { margin-top: var(--space-xs); }
.mt-md { margin-top: var(--space-md); }
/* ==========================================================================
   Homepage editorial sections
   Image-led, minimal copy. One featured element carries each section;
   supporting items stay quiet so the photography does the talking.
   ========================================================================== */

/* --- Image tile: shared base for service mosaic + work showcase --- */
/* This photo library is predominantly portrait (3:4 up to 1:1). Tile boxes are
   kept square-ish on purpose — landscape boxes discarded ~50% of every frame
   under object-fit: cover, cropping out the actual work. */
.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-limestone);
  aspect-ratio: 4 / 5;
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-md) var(--ease-standard);
}
@media (min-width: 680px) {
  .tile { aspect-ratio: 1 / 1; }
  .tile--featured { aspect-ratio: 4 / 3; }
}
@media (min-width: 1000px) {
  /* Grid rows take over so featured tiles can span cleanly. */
  .tile, .tile--featured { aspect-ratio: auto; }
}
.tile:hover { box-shadow: var(--shadow-lg); }
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-standard);
}
.tile:hover img { transform: scale(1.035); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(28,27,25,0.80) 0%, rgba(28,27,25,0.30) 46%, rgba(28,27,25,0.02) 100%);
}
.tile-label { position: relative; z-index: 1; color: var(--color-ivory); }
.tile-label h3 { color: var(--color-ivory); font-size: 1.08rem; letter-spacing: -0.005em; }
.tile-label p {
  color: rgba(245,242,236,0.80); font-size: 0.84rem; margin: 0.2rem 0 0; max-width: 34ch;
}

/* --- What We Do: one featured service, five supporting --- */
.service-mosaic { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 680px) {
  .service-mosaic { grid-template-columns: repeat(2, 1fr); }
  .service-mosaic .tile--featured { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .service-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(300px, 28vw, 400px); }
  .service-mosaic .tile--featured { grid-column: span 2; grid-row: span 2; }
}
.tile--featured { padding: var(--space-xl); }
.tile--featured .tile-label h3 { font-size: 1.7rem; font-family: var(--font-serif); font-weight: 500; letter-spacing: 0; }
.tile--featured .tile-label p { font-size: 0.95rem; margin-top: 0.35rem; max-width: 42ch; }

/* --- Materials: a single band, labels only --- */
.material-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 880px) { .material-band { grid-template-columns: repeat(4, 1fr); } }
.material-panel {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
}
.material-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.material-panel::after {
  content: ""; position: absolute; inset: 0; background: rgba(28,27,25,0.42);
  transition: background var(--duration-md) var(--ease-standard);
}
.material-panel:hover::after { background: rgba(28,27,25,0.30); }
.material-panel span {
  position: relative; z-index: 1;
  color: var(--color-ivory); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}

/* --- Selected Work: one large project, supporting images around it --- */
.work-showcase { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 680px) { .work-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .work-showcase { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(300px, 28vw, 400px); }
  .work-showcase .tile--featured { grid-column: span 2; grid-row: span 2; }
}
.work-showcase .tile { cursor: pointer; }
/* Captions stay quiet until intent is shown. */
.work-showcase .tile-label { opacity: 0; transform: translateY(6px); transition: opacity var(--duration-md) var(--ease-standard), transform var(--duration-md) var(--ease-standard); }
.work-showcase .tile:hover .tile-label,
.work-showcase .tile:focus-visible .tile-label { opacity: 1; transform: translateY(0); }
.work-showcase .tile--featured .tile-label { opacity: 1; transform: none; }
@media (hover: none) { .work-showcase .tile-label { opacity: 1; transform: none; } }

/* --- Craftsmanship: five quiet steps --- */
.craft-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 560px) { .craft-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .craft-steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); } }
.craft-step { border-top: 1.5px solid var(--color-border-strong); padding-top: var(--space-md); }
.craft-step .step-n {
  display: block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--color-brass-deep);
}
.craft-step h3 { font-size: 1rem; margin-top: 0.35rem; }
.craft-step p { font-size: 0.85rem; margin-top: 0.2rem; color: var(--color-taupe); }

.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.divider { height: 1px; background: var(--color-border); border: none; margin-block: var(--space-2xl); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-brass); color: var(--color-white);
  padding: 0.75rem 1.25rem; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.placeholder-note {
  background: var(--color-limestone); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--space-lg); font-size: 0.88rem; color: var(--color-warm-brown);
}

/* ==========================================================================
   Micro-interactions — slow, small, and only on intent.
   Nothing loops; nothing moves more than a few pixels.
   ========================================================================== */

/* Eyebrow rule draws itself in rather than appearing */
.eyebrow::before { transform-origin: left center; transform: scaleX(0); transition: transform 800ms var(--ease-standard) 120ms; }
[data-reveal].is-visible .eyebrow::before,
.is-visible > .eyebrow::before,
.section-head .eyebrow::before { transform: scaleX(1); }

/* Materials band: label opens up and takes a hairline under it */
.material-panel span {
  transition: letter-spacing 600ms var(--ease-standard), color 400ms var(--ease-standard);
  position: relative;
}
.material-panel span::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 1px;
  background: var(--color-brass-soft);
  transition: left 600ms var(--ease-standard), right 600ms var(--ease-standard);
}
.material-panel:hover span { letter-spacing: 0.28em; }
.material-panel:hover span::after { left: 0; right: 0; }
.material-panel img { transition: transform 1200ms var(--ease-standard); }
.material-panel:hover img { transform: scale(1.05); }

/* Craft steps: the rule above each step draws left to right, staggered */
.craft-step { position: relative; border-top-color: transparent; }
.craft-step::before {
  content: ""; position: absolute; top: -1.5px; left: 0; right: 0; height: 1.5px;
  background: var(--color-border-strong);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--ease-standard);
}
.craft-step.is-visible::before { transform: scaleX(1); }
.craft-steps .craft-step:nth-child(2)::before { transition-delay: 90ms; }
.craft-steps .craft-step:nth-child(3)::before { transition-delay: 180ms; }
.craft-steps .craft-step:nth-child(4)::before { transition-delay: 270ms; }
.craft-steps .craft-step:nth-child(5)::before { transition-delay: 360ms; }
.craft-step .step-n { transition: color 400ms var(--ease-standard); }
.craft-step:hover .step-n { color: var(--color-brass); }

/* Outline buttons fill from the left instead of snapping */
.btn-outline { position: relative; overflow: hidden; z-index: 0; }
.btn-outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-charcoal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease-standard);
}
.hero-cta .btn-outline::before { background: var(--color-brass); }
.btn-outline:hover::before { transform: scaleX(1); }
.btn-outline:hover { background: transparent; }

/* Work tiles: a brass hairline sweeps under the caption on intent */
.work-showcase .tile .tile-label::after {
  content: ""; display: block; height: 1px; margin-top: 0.5rem;
  background: var(--color-brass-soft);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease-standard);
}
.work-showcase .tile:hover .tile-label::after,
.work-showcase .tile:focus-visible .tile-label::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before, .craft-step::before { transform: scaleX(1); transition: none; }
  .material-panel span, .material-panel span::after, .material-panel img,
  .btn-outline::before, .work-showcase .tile .tile-label::after { transition: none; }
  .btn-outline::before { display: none; }
  .craft-step { border-top-color: var(--color-border-strong); }
}

/* Fallback hand-off shown after submit while no server endpoint is configured */
.form-handoff {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-brass);
  border-radius: var(--radius-md);
  background: var(--color-ivory-deep);
}
.form-handoff p { margin: 0 0 var(--space-md); font-size: 0.9rem; font-weight: 600; color: var(--color-charcoal); }
.form-handoff .cta-row { gap: var(--space-sm); }
.form-handoff .btn { font-size: 0.86rem; padding: 0.62rem 1.05rem; }

/* Footer: four columns once there is room, plus a service-area band */
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 0.8fr 1.1fr; gap: var(--space-xl); } }
.footer-links a, .footer-contact span, .footer-contact a { transition: color var(--duration-sm) var(--ease-standard); }
.footer-links a:hover { color: var(--color-brass-soft); }
.footer-area {
  padding-top: var(--space-lg); margin-top: var(--space-xl);
  border-top: 1px solid rgba(245,242,236,0.12);
}
.footer-area .footer-heading { display: block; margin-bottom: var(--space-xs); }
.footer-area p { margin: 0; max-width: none; font-size: 0.82rem; line-height: 1.8; color: rgba(245,242,236,0.55); }

/* Closing note under the gallery grid */
.work-note {
  border-left: 3px solid var(--color-brass);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-ivory-deep);
  border-radius: var(--radius-md);
  max-width: 720px;
}
.work-note p { margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   Phone layout — different decisions, not a squeezed desktop.
   ========================================================================== */
@media (max-width: 700px) {

  /* Desktop's 72px vertical rhythm is far too generous on a 375px screen. */
  .section { padding-block: 2.75rem; }
  .section-head { margin-bottom: var(--space-xl); }
  .page-hero { padding-block: var(--space-xl) var(--space-lg); }

  /* Filter chips become a swipeable rail instead of stacking into rows,
     so the grid itself stays above the fold. */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--space-lg) * -1);
    padding-inline: var(--space-lg);
    padding-bottom: var(--space-xs);
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; scroll-snap-align: start; }

  /* Two columns halves an extremely long portfolio scroll. */
  .masonry { columns: 2; column-gap: var(--space-sm); }
  .masonry-item { margin-bottom: var(--space-sm); }
  .masonry-item .item-caption { opacity: 1; transform: none; padding: var(--space-md) var(--space-sm) var(--space-sm); }
  .masonry-item .item-caption strong { font-size: 0.76rem; line-height: 1.3; }
  .masonry-item .item-caption span { font-size: 0.62rem; }
  .masonry-item .zoom-hint { display: none; }

  /* All four materials visible at once — nothing hides behind a swipe. The
     2x2 read cramped at 3:4; 4:5 is the shape the rest of the mobile layout
     already uses and it suits the mixed portrait/landscape sources better. */
  .material-band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
  .material-panel { aspect-ratio: 4 / 5; }
  .material-panel span { font-size: 0.68rem; letter-spacing: 0.14em; }

  /* Steps sit as a numbered list — the 5-across rule makes no sense here. */
  .craft-steps { gap: var(--space-md); }
  .craft-step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-md); align-items: baseline; padding-top: var(--space-sm); }
  .craft-step .step-n { grid-row: 1 / span 2; font-size: 0.8rem; }
  .craft-step h3 { font-size: 0.98rem; margin-top: 0; }
  .craft-step p { margin-top: 0.1rem; }

  /* The hero photo is 16:9. A 375x320 box cropped a third of its width away,
     so match the frame closer to the source and let the whole scene read. */
  .hero-media { height: auto; aspect-ratio: 16 / 10; }

  /* Tighter type so headlines don't eat the viewport */
  /* The header already separates the hero; 2rem on top left a dead band
     between the wordmark and the eyebrow. */
  .hero-copy { padding-block: var(--space-md) var(--space-2xl); }
  .hero-sub { font-size: 1rem; margin-top: var(--space-md); }
  .hero-cta { margin-top: var(--space-lg); }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero-location { margin-top: var(--space-lg); }
  p.lede { font-size: 1rem; }

  /* Footer stacks with real separation instead of one long ribbon */
  .footer-grid { gap: var(--space-xl); }
  .footer-area p { font-size: 0.78rem; }
}

/* Phone/email links in the footer need a real thumb-sized tap target. */
.footer-contact a[href^="tel:"],
.footer-contact a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
@media (max-width: 700px) {
  /* Same rule for every in-body phone link, not just the footer. */
  a[href^="tel:"]:not(.btn):not(.mcb-call):not(.nav-call) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ==========================================================================
   Surface depth — the flat limestone fill was what read as "empty".
   Plaster grain + a soft light fall gives the panels material presence
   without adding a single word or image.
   ========================================================================== */

.section--panel, .page-hero { position: relative; isolation: isolate; }
.section--panel > *, .page-hero > * { position: relative; z-index: 1; }

.section--panel::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* light falling from upper-left, as it would across a plastered wall */
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(146,141,132,0.16) 0%, rgba(146,141,132,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px;
  opacity: 1;
}
/* keep the grain whisper-quiet — it should be felt, not seen */
.section--panel::before { mix-blend-mode: multiply; opacity: 0.5; }
.page-hero::before { mix-blend-mode: multiply; opacity: 0.45; }

/* Hairline rules at the container edges — architectural drafting, not decoration */
.section--panel::after {
  content: "";
  position: absolute; inset-block: 0; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  width: min(var(--container-width), 100%);
  border-left: 1px solid rgba(146,141,132,0.14);
  border-right: 1px solid rgba(146,141,132,0.14);
}
@media (max-width: 760px) { .section--panel::after { display: none; } }

/* --- Cards: give them a lit edge and a warmer surface --- */
.value-card, .material-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  box-shadow: 0 1px 2px rgba(36,35,33,0.04), 0 10px 24px -18px rgba(36,35,33,0.35);
  transition: box-shadow var(--duration-md) var(--ease-standard), transform var(--duration-md) var(--ease-standard);
}
/* brass hairline across the top, drawn on reveal */
.value-card::before, .material-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-brass) 0%, var(--color-brass-soft) 60%, rgba(187,163,119,0) 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--ease-standard);
}
.value-card.is-visible::before, .material-card.is-visible::before { transform: scaleX(1); }
.value-card:hover, .material-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(36,35,33,0.05), 0 18px 34px -20px rgba(36,35,33,0.45);
}
.value-card .icon-wrap, .material-card .icon-wrap {
  transition: background var(--duration-md) var(--ease-standard);
}
.value-card:hover .icon-wrap, .material-card:hover .icon-wrap { background: var(--color-ivory-deep); }

@media (prefers-reduced-motion: reduce) {
  .value-card::before, .material-card::before { transform: scaleX(1); transition: none; }
  .value-card, .material-card { transition: none; }
}

/* ==========================================================================
   Craftsmanship steps — read as a drafted process, not five stray labels.
   The numerals already existed; they are simply given the weight they deserve.
   ========================================================================== */
.craft-step { padding-top: var(--space-lg); }

/* node on the drawn rule, like a dimension marker */
.craft-step::after {
  content: "";
  position: absolute; top: -4.5px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-brass);
  transform: scale(0); transform-origin: center;
  transition: transform 520ms var(--ease-standard) 260ms;
}
.craft-step.is-visible::after { transform: scale(1); }

/* the numeral becomes the anchor */
.craft-step .step-n {
  font-family: var(--font-serif);
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--color-brass);
  opacity: 0.28;
  transition: opacity var(--duration-md) var(--ease-standard), color var(--duration-md) var(--ease-standard);
}
.craft-step:hover .step-n { opacity: 0.7; }
.craft-step h3 { margin-top: var(--space-sm); }
.craft-step p { margin-top: 0.25rem; max-width: 26ch; }

@media (max-width: 700px) {
  /* number sits beside the text on a phone, so keep it proportionate */
  .craft-step .step-n { font-size: 2rem; }
  .craft-step h3 { margin-top: 0; }
  .craft-step::after { top: -4.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-step::after { transform: scale(1); transition: none; }
  .craft-step .step-n { transition: none; }
}

/* ==========================================================================
   Interior page mastheads — the band was a wide flat void with the type
   pinned left. Give it a measure, a horizon line, and the brand's own
   diamond ornament as a quiet watermark.
   ========================================================================== */
.page-hero {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-bottom: 1px solid rgba(146,141,132,0.18);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }

/* hold the headline to a readable measure instead of full bleed */
.page-hero h1 { max-width: 18ch; }
.page-hero p.lede { max-width: 52ch; }
.page-hero .scope-note { max-width: 46ch; }

/* A running-bond tile course — the actual trade, drawn in hairlines and
   faded out so it reads as texture rather than a graphic. */
.page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(560px, 46vw);
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg fill='none' stroke='%23928D84' stroke-width='1'%3E%3Crect x='0' y='0' width='80' height='40'/%3E%3Crect x='80' y='0' width='80' height='40'/%3E%3Crect x='-40' y='40' width='80' height='40'/%3E%3Crect x='40' y='40' width='80' height='40'/%3E%3Crect x='120' y='40' width='80' height='40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 118px 59px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0) 92%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0) 92%);
}
@media (max-width: 860px) {
  .page-hero::after { width: 60vw; opacity: 0.4; }
  .page-hero h1 { max-width: none; }
}
@media (max-width: 700px) {
  .page-hero { padding-block: var(--space-xl) var(--space-lg); }
  .page-hero::after { display: none; }
}

/* ==========================================================================
   Raking light — a single soft sheen across the masthead, the way light
   crosses a polished slab. Static, no animation, no glow.
   ========================================================================== */
.page-hero { background-color: var(--color-limestone); }

/* stronger tile coursing so it actually registers as texture */
.page-hero::after {
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg fill='none' stroke='%238C8479' stroke-width='1.4' stroke-opacity='0.55'%3E%3Crect x='0' y='0' width='80' height='40'/%3E%3Crect x='80' y='0' width='80' height='40'/%3E%3Crect x='-40' y='40' width='80' height='40'/%3E%3Crect x='40' y='40' width='80' height='40'/%3E%3Crect x='120' y='40' width='80' height='40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 66px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.85), rgba(0,0,0,0) 88%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.85), rgba(0,0,0,0) 88%);
}

/* the sheen sits above the texture, below the type */
.page-hero .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -100% -50%;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,0.55) 47%,
    rgba(255,255,255,0.72) 51%,
    rgba(255,255,255,0.40) 56%,
    rgba(255,255,255,0) 70%);
}

/* Same treatment on the limestone panels so the whole system matches */
.section--panel { background-color: var(--color-limestone); }
.section--panel .container { position: relative; }
.section--panel .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% -40%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0) 64%);
}

/* ==========================================================================
   Footer — same material logic in the dark register: grain, a lit top edge,
   drafting rules between columns, and headings that carry the brass mark.
   ========================================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(187,163,119,0.28);
  padding-block: var(--space-3xl) var(--space-xl);
}
.site-footer > * { position: relative; z-index: 1; }

.site-footer::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
  opacity: 0.35;
}
/* tile coursing, echoing the mastheads */
.site-footer::after {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  width: min(520px, 44vw);
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg fill='none' stroke='%23BBA377' stroke-width='1.2' stroke-opacity='0.30'%3E%3Crect x='0' y='0' width='80' height='40'/%3E%3Crect x='80' y='0' width='80' height='40'/%3E%3Crect x='-40' y='40' width='80' height='40'/%3E%3Crect x='40' y='40' width='80' height='40'/%3E%3Crect x='120' y='40' width='80' height='40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 66px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0) 85%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0) 85%);
}

/* brass tick before each footer heading, matching the eyebrow system */
.footer-heading {
  display: flex; align-items: center; gap: var(--space-sm);
  color: rgba(245,242,236,0.55);
}
.footer-heading::before {
  content: ""; width: 16px; height: 1.5px; flex: 0 0 16px;
  background: var(--color-brass);
}

/* drafting rules between the columns */
@media (min-width: 768px) {
  .footer-grid > div + div {
    padding-left: var(--space-xl);
    border-left: 1px solid rgba(245,242,236,0.09);
  }
}

.footer-links a, .footer-contact a, .footer-contact span { color: rgba(245,242,236,0.72); }
.footer-links a { display: inline-block; padding-block: 3px; }
.footer-links a:hover { color: var(--color-brass-soft); }

/* The sheen pseudo-elements extend past their box by design; clip them so
   they can never create a horizontal scrollbar on a phone. */
.section--panel { overflow: hidden; }
/* overflow-x:hidden turns html/body into a scroll container, which silently
   disables position:sticky on the header — the nav scrolled away instead of
   staying put. overflow-x:clip crops identically WITHOUT creating that
   container, so sticky works again. `hidden` stays as the fallback for
   engines without clip support. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* Mobile action bar: keep both labels on one line and make sure the page
   actually reserves the bar's real height so it never covers content. */
.mobile-call-bar a {
  white-space: nowrap;
  font-size: 0.86rem;
  padding: 0.9rem 0.5rem;
  line-height: 1.2;
}
.mobile-call-bar .icon { width: 18px; height: 18px; }
@media (max-width: 359px) { .mobile-call-bar a { font-size: 0.78rem; } }
body.has-mobile-bar { padding-bottom: 72px; }
@media (min-width: 960px) { body.has-mobile-bar { padding-bottom: 0; } }

/* Honeypot — must be reachable in the DOM for bots but never seen or focusable
   by a person. display:none is avoided since some bots skip hidden inputs. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Mobile launch pass — touch and input ergonomics
   ========================================================================== */
@media (max-width: 700px) {
  /* iOS Safari force-zooms the viewport whenever a focused control is under
     16px. Every quote-form field was 15.2px, so tapping any of them jerked
     the page. 16px is the threshold, not a preference. */
  #quoteForm input,
  #quoteForm select,
  #quoteForm textarea {
    font-size: 16px;
  }

  /* Footer links were 29px tall — usable, but under the 44px target this
     project already holds itself to everywhere else. */
  .footer-links { gap: 0; }
  .footer-links a { padding-block: 0.66rem; }

  /* Filter chips sat at 40px, just short of the same bar. */
  .filter-btn { padding-block: 0.72rem; }
}