/* ==========================================================================
   BABRI STONE — COMPONENTS
   ========================================================================== */

/* ---- Hero ----
   Height is driven by --vh (locked in px by main.js on load), not a live
   100svh, because iOS Safari keeps recalculating viewport units while its
   address bar collapses/expands during scroll — even with svh — which is
   what reads as the hero image "zooming" in and out. Locking the pixel
   height once removes that recalculation entirely. 100svh remains only as
   the pre-JS fallback (identical value on first paint, so there's no jump). */
.hero {
  position: relative;
  height: 100svh;
  height: calc(var(--vh) * 100);
  min-height: 100svh;
  min-height: calc(var(--vh) * 100);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
}
.hero-page {
  /* Inner-page heroes use auto height with a min-height floor rather than a
     locked viewport height. A locked height + vertically-centered content +
     overflow:hidden on .hero is a clipping trap: as soon as a page's
     breadcrumb + eyebrow + heading + lede + actions stack is taller than
     that fixed box (very common on narrow phones, where buttons also go
     full-width), the overflow is centered and the top/bottom get cropped
     — the breadcrumb sliced off, the actions crowded against the image
     edge. Auto height guarantees every page's text is always fully shown,
     never trimmed, regardless of copy length or screen width. */
  height: auto;
  min-height: 56svh;
  min-height: calc(var(--vh) * 56);
  align-items: center;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,13,11,0.42) 0%, rgba(15,13,11,0.18) 30%, rgba(15,13,11,0.34) 60%, rgba(12,10,9,0.94) 100%),
    linear-gradient(90deg, rgba(12,10,9,0.28) 0%, transparent 35%, transparent 65%, rgba(12,10,9,0.28) 100%);
}
.hero-page .hero-media::after {
  background: linear-gradient(100deg, rgba(20,18,16,0.92) 0%, rgba(20,18,16,0.68) 55%, rgba(20,18,16,0.4) 100%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brass-light) 38%, #ead7a8 50%, var(--brass-light) 62%, transparent 100%);
  background-size: 220% 100%;
  opacity: 0.5;
  z-index: 1;
}
.home-page .hero::after,
.inner-page .hero::after {
  /* Light ambient motion only: opacity changes, never position, scale,
     image crop, or layout. This cannot create a parallax/zoom effect. */
  animation: heroRuleBreath 7s ease-in-out infinite;
}
@keyframes heroRuleBreath {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.50; }
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* .hero-content is combined with .wrap on the same element (see markup),
     so its horizontal side must stay var(--space-md) here — a bare 0 in
     this shorthand would zero out .wrap's side padding entirely and pin
     the breadcrumb, heading, and buttons flush to the screen edges. This
     was happening on every single inner page. */
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
}
.hero-page .hero-content { padding: calc(var(--space-2xl) + var(--space-sm)) var(--space-md) var(--space-2xl); }

/* Premium hero entrance: plays once on page load. The hero imagery itself
   never scales, translates, or responds to scrolling. */
.hero-content > * {
  opacity: 0;
  animation: heroTextRise 0.9s var(--ease) forwards;
}
.home-page .hero-eyebrow { animation-delay: 0.15s; }
.home-page .hero h1 { animation-delay: 0.28s; }
.home-page .hero .lede { animation-delay: 0.42s; }
.home-page .hero-actions { animation-delay: 0.56s; }
.inner-page .hero-content > * {
  opacity: 1;
  animation: none;
}
@keyframes heroTextRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content > * { opacity: 1; animation: none; }
  .hero::after { animation: none; }
  .service-card .media::after { transition: none; }
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-light);
  display: flex; align-items: center; gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.hero-eyebrow::before { content:''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--brass-light), transparent); }
.hero h1 { color: var(--ivory); max-width: 15ch; text-shadow: 0 2px 24px rgba(0,0,0,0.18); }
.hero .lede { color: rgba(247,243,234,0.86); max-width: 46ch; font-size: 1.15rem; margin-bottom: var(--space-lg); }
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* Static, at-rest scroll affordance — a quiet bordered circle rather than a
   looping blink/bounce. It only moves in response to user interaction
   (hover/focus), never on its own, so it reads as considered rather than
   busy and costs nothing while idle. */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(247,243,234,0.4);
  color: rgba(247,243,234,0.85);
  background: rgba(247,243,234,0.04);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero-scroll-cue svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  border-color: var(--brass-light);
  background: rgba(247,243,234,0.1);
  transform: translateX(-50%) translateY(-2px);
}
.hero-scroll-cue:hover svg { transform: translateY(2px); }
@media (max-width: 700px) { .hero-scroll-cue { display: none; } }

@media (max-width: 700px) {
  /* Scoped away from .hero-page: inner-page heroes stay auto-height (set
     above) so their text stack is never forced into — and clipped by — a
     box sized for the taller full-bleed home hero. */
  .hero:not(.hero-page) { min-height: 92svh; min-height: calc(var(--vh) * 92); }
  .hero-content { padding: var(--space-2xl) var(--space-md) var(--space-xl); }
  .hero-page .hero-content { padding: calc(var(--space-xl) + var(--space-md)) var(--space-md) var(--space-xl); }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ---- Trust & Credibility strip ----
   Six approved credibility points. Equal-height cells, hairline dividers. */
.trust-strip {
  border-top: 1px solid var(--stone-soft);
  border-bottom: 1px solid var(--stone-soft);
  background: var(--paper);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 0;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: var(--space-lg) var(--space-sm);
  border-left: 1px solid var(--stone-soft);
}
.trust-item:first-child { border-left: none; }
.trust-item svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--brass); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke 0.3s var(--ease), transform 0.3s var(--ease);
}
.trust-item:hover svg { stroke: var(--brass-dark); transform: translateY(-2px); }
.trust-item h4 { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.trust-item p { margin: 0; font-size: 0.8rem; color: var(--taupe); line-height: 1.45; }
@media (max-width: 1040px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-item:nth-child(3n+1) { border-left: none; }
  .trust-item:nth-child(n+4) { border-top: 1px solid var(--stone-soft); }
}
@media (max-width: 620px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: var(--space-md) var(--space-xs); }
  .trust-item:nth-child(3n+1) { border-left: 1px solid var(--stone-soft); }
  .trust-item:nth-child(2n+1) { border-left: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--stone-soft); }
}

/* ---- Moving material ticker -------------------------------------------
   The solid ink background lives on the outer, unmasked .material-ticker-
   wrap. The fade-to-transparent edge mask is applied to the inner (static,
   non-transformed) .material-ticker nav instead — so the fade shape stays
   fixed at the bar's physical left/right edges rather than travelling with
   the scrolling track, and the mask only ever erases the (transparent)
   text layer, never the background. Every name is a real, always-clickable
   link — the duplicate second group exists only to make the loop seamless
   and is hidden from assistive tech / keyboard tab order.
   ------------------------------------------------------------------------- */
.material-ticker-wrap {
  background: var(--ink);
  border-top: 1px solid rgba(199, 169, 104, 0.18);
  border-bottom: 1px solid rgba(199, 169, 104, 0.18);
}
.material-ticker {
  position: relative;
  overflow: hidden;
  color: var(--brass-light);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.material-ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: materialTicker 34s linear infinite;
}
.material-ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.35rem;
  padding: 0.9rem 1.35rem;
  white-space: nowrap;
}
.material-ticker a {
  position: relative;
  color: var(--brass-light);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-style: italic;
  line-height: 1;
  transition: color 0.25s var(--ease);
}
.material-ticker a:hover,
.material-ticker a:focus-visible {
  color: var(--ivory);
  outline: none;
}
.material-ticker span {
  color: var(--brass-light);
  opacity: 0.55;
  font-size: 0.8rem;
}
.material-ticker:hover .material-ticker-track,
.material-ticker:focus-within .material-ticker-track {
  animation-play-state: paused;
}
@keyframes materialTicker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .material-ticker-track { animation: none; }
}
/* ---- Two column intro / split ---- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
/* grid children default to min-width:auto; without this a wide descendant
   (e.g. the material detail dl) stretches the track and overflows the page */
.split > * { min-width: 0; }
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-md); width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-lifted); }
.split-media.ratio-4-3 img { aspect-ratio: 4/3; }
.split-media.ratio-3-4 img { aspect-ratio: 3/4; }
.split-stat {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--ink);
  color: var(--ivory);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lifted);
}
.split-stat .num { font-family: var(--font-display); font-size: 2.2rem; color: var(--brass-light); line-height: 1; display: block; margin-bottom: 0.2rem; }
.split-stat .label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-soft); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .split-stat { position: static; margin-top: 1rem; display: inline-block; }
}

/* ---- Feature / checklist ---- */
.check-list { list-style: none; padding: 0; margin: var(--space-md) 0; display: flex; flex-direction: column; gap: 0.7rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.97rem; }
.check-list svg { width: 17px; height: 17px; fill: none; stroke: var(--brass); stroke-width: 2; flex-shrink: 0; margin-top: 3px; }

/* ---- Cards: services / featured projects ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.service-card {
  background: var(--paper);
  border: 1px solid var(--stone-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lifted); border-color: var(--brass-light); }
.service-card .media { aspect-ratio: 4/3; overflow: hidden; background: var(--ivory-deep); position: relative; }
.service-card .media img { width: 100%; height: 100%; object-fit: cover; }
.service-card .media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 35%, rgba(255,255,255,0.16) 50%, transparent 65%);
  background-size: 220% 100%;
  background-position: 120% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), background-position 0.8s var(--ease);
}
.service-card:hover .media::after { opacity: 1; background-position: -20% 0; }
.service-card .body { padding: var(--space-md) var(--space-md) var(--space-lg); }
.service-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.service-card p { color: var(--taupe); font-size: 0.92rem; margin-bottom: 0.8rem; }
.service-card .card-link { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); display: inline-flex; align-items: center; gap: 0.35rem; }
.service-card .card-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.3s var(--ease); }
.service-card:hover .card-link svg { transform: translateX(3px); }

/* Simple text-only chip list (used for residential/commercial capability lists) */
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin: var(--space-lg) 0; }
.chip {
  border: 1px solid var(--stone-soft);
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.chip svg { width: 20px; height: 20px; stroke: var(--brass); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; }
.chip span { font-size: 0.93rem; font-weight: 500; }
@media (max-width: 900px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } .card-grid { grid-template-columns: repeat(2, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chip-grid { grid-template-columns: 1fr; } .card-grid, .card-grid.cols-4, .card-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---- Process steps ---- */
.process-list { display: flex; flex-direction: column; }
.process-step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--stone-soft);
}
.process-step:last-child { border-bottom: 1px solid var(--stone-soft); }
.process-step .num { font-family: var(--font-display); font-style: italic; font-size: 2.1rem; color: var(--brass); line-height: 1; }
.process-step h3 { margin-bottom: 0.35rem; }
.process-step p { color: var(--taupe); margin: 0; max-width: 60ch; }
@media (max-width: 640px) {
  .process-step { grid-template-columns: 50px 1fr; gap: var(--space-md); }
  .process-step .num { font-size: 1.6rem; }
}

/* ---- Babri Standard commitments ---- */
.standard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(203,192,172,0.18);
  border: 1px solid rgba(203,192,172,0.18);
}
.standard-item {
  background: var(--ink);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
}
.standard-item svg { width: 22px; height: 22px; stroke: var(--brass-light); fill: none; stroke-width: 1.4; flex-shrink: 0; }
.standard-item p { margin: 0; color: var(--ivory); font-size: 0.98rem; }
@media (max-width: 700px) { .standard-grid { grid-template-columns: 1fr; } }

.glove-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border: 1px solid var(--brass-light);
  border-radius: 50%;
  margin-bottom: var(--space-md);
}
.glove-badge svg { width: 28px; height: 28px; stroke: var(--brass-light); fill: none; stroke-width: 1.3; }

/* ---- Testimonials ----
   Flex-wrap rather than a fixed grid so an odd count (7 approved quotes)
   centres its final row instead of leaving an orphan hanging left. */
.testimonial-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}
.testimonial-card {
  background: var(--paper);
  border: 1px solid var(--stone-soft);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: calc((100% - 2 * var(--space-lg)) / 3);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lifted);
  border-color: var(--stone);
}
.testimonial-card .stars { display: flex; gap: 3px; margin-bottom: var(--space-sm); }
.testimonial-card .stars svg { width: 15px; height: 15px; fill: var(--brass); }
.testimonial-card blockquote { margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: 1.12rem; font-style: italic; line-height: 1.5; flex: 1 1 auto; }
.testimonial-card cite { font-style: normal; font-size: 0.85rem; color: var(--taupe); font-family: var(--font-mono); }
@media (max-width: 900px) {
  .testimonial-card { max-width: calc((100% - var(--space-lg)) / 2); }
}
@media (max-width: 620px) {
  .testimonial-card { max-width: 100%; flex-basis: 100%; }
}

/* ---- FAQ accordion ---- */
.faq-list { border-top: 1px solid var(--stone-soft); }
.faq-item { border-bottom: 1px solid var(--stone-soft); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-md) 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-question .icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
.faq-question .icon::before, .faq-question .icon::after {
  content: '';
  position: absolute;
  background: var(--brass);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-question .icon::before { width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-question .icon::after { width: 1.5px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-question[aria-expanded="true"] .icon::after { opacity: 0; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-answer p { color: var(--taupe); padding-bottom: var(--space-md); max-width: 68ch; }

/* ---- CTA band ---- */
.cta-band {
  position: relative;
  color: var(--ivory);
  text-align: center;
  overflow: hidden;
}
.cta-band .hero-media img { object-position: center; }
.cta-band-content {
  position: relative;
  z-index: 1;
  /* Same .wrap-combo footgun as .hero-content above: this element also
     carries the .wrap class in markup, so the shorthand must keep
     var(--space-md) on the sides rather than a bare 0. */
  padding: var(--space-2xl) var(--space-md);
}
.cta-band h2 { color: var(--ivory); max-width: 24ch; margin: 0 auto var(--space-md); }
.cta-band p { color: rgba(247,243,234,0.85); max-width: 52ch; margin: 0 auto var(--space-lg); }
.cta-band .hero-actions { justify-content: center; }

/* ---- Section divider (signature grain motif) ---- */
.grain-divider { width: 100%; height: 46px; overflow: hidden; opacity: 0.5; }
.grain-divider svg { width: 100%; height: 100%; }

/* ---- Page header (interior pages) ---- */
.page-intro { padding: var(--space-2xl) 0 var(--space-lg); }
.breadcrumb { font-family: var(--font-mono); font-size: 0.75rem; color: var(--taupe); letter-spacing: 0.04em; margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--taupe); }
.breadcrumb a:hover { color: var(--brass); }

/* ---- Stat row ---- */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); text-align: center; }
.stat-row .stat-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--brass);
  background: var(--gradient-brass);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}
@supports not (background-clip: text) { .stat-row .stat-num { -webkit-text-fill-color: initial; color: var(--brass); } }
.stat-row .stat-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2,1fr); gap: var(--space-lg) var(--space-md); } }

/* ---- Before & After ----
   Each project is presented as a matching Before → After pair. */
.before-after-section { background: var(--ivory-deep); }
.before-after-pairs { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
.before-after-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}
.ba-cell { margin: 0; position: relative; }
.ba-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(247,243,234,.94);
  color: var(--ink);
  border: 1px solid rgba(185,154,96,.45);
}
.ba-label-after { background: rgba(30,28,25,.92); color: var(--ivory); border-color: rgba(185,154,96,.65); }
.ba-pair-divider { display: flex; align-items: center; justify-content: center; color: var(--brass-dark); font-family: var(--font-display); font-size: 1.35rem; position: relative; }
.ba-pair-divider::before { content: ''; position: absolute; height: 1px; width: 34px; background: var(--stone); opacity: .65; }
.ba-pair-divider span { position: relative; z-index: 1; padding: .35rem; background: var(--ivory-deep); }
.ba-shot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.ba-shot:hover { box-shadow: var(--shadow-lifted); transform: translateY(-3px); }
.ba-shot:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.ba-shot picture { display: block; }
.ba-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ba-cell figcaption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); text-align: center; margin-top: 0.7rem; }
@media (max-width: 900px) {
  /* Keep each Before → After project paired side-by-side on tablet. */
  .before-after-pair { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); gap: .55rem; }
  .ba-pair-divider { font-size: 1rem; }
  .ba-pair-divider::before { width: 24px; }
  .ba-label { top: 9px; left: 9px; font-size: .6rem; }
}
@media (max-width: 620px) {
  .before-after-pair { grid-template-columns: 1fr; gap: .75rem; }
  .ba-pair-divider { min-height: 22px; }
  .ba-pair-divider::before { width: 1px; height: 24px; }
  .ba-pair-divider span { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ba-shot { transition: none; }
  .ba-shot:hover { transform: none; }
}

/* ---- Material showcase (image + spec panel) ----
   Replaces the old 5-image grid: one large, luxurious slab photo with a
   zoom affordance, paired with an icon-labelled spec panel. Alternates
   sides via .material-showcase-reverse for visual rhythm down the page. */
.material-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.material-showcase-reverse { direction: rtl; }
.material-showcase-reverse > * { direction: ltr; }

.material-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lifted);
  background: var(--ivory-deep);
}
/* Reusable pill-style material/category label. Base style here; specific
   contexts (card corner, image overlay) extend with their own class. */
.swatch-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dark);
  border: 1px solid var(--stone);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

/* material-frame-tag and material-zoom-icon intentionally use a solid,
   slightly-more-opaque background instead of backdrop-filter: blur(). Both
   sit directly on top of the slab photo while it's being dragged during a
   swipe, and backdrop-filter forces the browser to resample everything
   behind it on every frame — on the material showcase, where the photo
   underneath is actively animating, that was a real source of dropped
   frames and sluggish-feeling swipes. A solid tint looks almost identical
   and costs nothing to composite. */
.material-frame-tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  background: rgba(247, 243, 234, 0.96);
  border-color: transparent;
}
.material-zoom {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  display: block;
  width: 100%;
  position: relative;
  cursor: zoom-in;
  /* Clips the swipe-carousel's translateX (see .material-swipe-* below) to
     this frame's own box, so a photo sliding in/out never bleeds past its
     container width. This is also what makes the body-level overflow-x
     hack below unnecessary — see base.css. */
  overflow: hidden;
  /* Let the frame handle its own horizontal swipe gesture (photo carousel)
     while still allowing the page to scroll vertically through it and
     permitting native pinch zoom to recenter normally. */
  touch-action: pan-y pinch-zoom;
}
.material-zoom:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* Quiet hover polish for inner-page material imagery. No scale or crop shift. */
.inner-page .material-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  background-size: 220% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity 0.25s var(--ease), background-position 0.9s var(--ease);
}
.inner-page .material-zoom:hover::after,
.inner-page .material-zoom:focus-visible::after {
  opacity: 1;
  background-position: -20% 0;
}
.material-zoom picture,
.material-zoom img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Swipeable photo strip: the picture itself carries the slide+fade so
   swiping between a material's photos feels like a smooth carousel
   instead of an instant, jarring swap. */
.material-zoom picture {
  transition: transform 0.14s var(--ease), opacity 0.14s var(--ease);
}
.material-swipe-out-left { transform: translateX(-38px); opacity: 0; }
.material-swipe-out-right { transform: translateX(38px); opacity: 0; }
.material-swipe-in-left { transition: none; transform: translateX(-38px); opacity: 0; }
.material-swipe-in-right { transition: none; transform: translateX(38px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .material-zoom picture { transition: none; }
}
.material-zoom img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.material-zoom-icon {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 26, 23, 0.68);
  color: var(--ivory);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.material-zoom-icon svg { width: 18px; height: 18px; }
.material-zoom:hover .material-zoom-icon { background: var(--gradient-brass); transform: scale(1.08); }

/* ---- Material thumbnails ----
   Small photo strip attached under the main slab image: a close-up plus a
   few real installations. Clicking swaps the large image in place; the
   active thumbnail is outlined in brass. */
.material-thumbs {
  display: flex;
  gap: var(--space-2xs);
  margin: var(--space-sm) var(--space-md) var(--space-md);
}
.material-thumb {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  opacity: 0.72;
}
.material-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.material-thumb:hover { opacity: 1; }
.material-thumb:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.material-thumb.is-active {
  border-color: var(--brass);
  opacity: 1;
}

.material-info .eyebrow { margin-bottom: var(--space-xs); }
/* Material titles should not carry category/industry labels. */
.material-info > .eyebrow,
.material-info > .material-category-label { display: none !important; }

.material-spec-list { margin: var(--space-lg) 0; }
.material-spec-row {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--stone-soft);
}
.material-spec-row:first-child { border-top: 1px solid var(--stone-soft); }
.material-spec-row dt {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.3rem;
  padding-left: 1.1em;
}
.material-spec-row dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 7px;
  height: 7px;
  border: 1.4px solid var(--brass);
  transform: rotate(45deg);
}
.material-spec-row dd { margin: 0; font-size: 0.95rem; color: var(--ink); }

@media (max-width: 900px) {
  .material-showcase,
  .material-showcase-reverse { grid-template-columns: minmax(0, 1fr); direction: ltr; gap: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .material-zoom img,
  .material-zoom-icon { transition: none; }
  .material-zoom:hover img { transform: none; }
}

/* ---- Image Viewer (materials + before/after) ----
   Namespaced .img-viewer, NOT .lightbox: gallery.css owns .lightbox for the
   portfolio gallery and is loaded after this file.
   Elegant full-screen viewer with dim overlay, close button, arrow navigation */
.img-viewer {
  position: fixed;
  inset: 0;
  /* Deliberately no explicit height here. `inset: 0` on a `position: fixed`
     element already stretches it edge-to-edge against the real, current
     viewport with no unit math involved — it recalculates live as the
     browser chrome shows/hides, so the dim backdrop always reaches the
     true bottom of the screen. The hero uses a locked --vh pixel value
     (see main.js) to stop iOS Safari's live vh recalculation from making
     the hero image visibly rescale mid-scroll; reusing that same locked
     value here caused the opposite problem — if the viewer was opened
     after the address bar had collapsed (making the real viewport taller
     than it was on page load), the overlay was sized to the shorter
     locked value and fell short of the actual screen, leaving page
     content exposed beneath it. */
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(28,26,23,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
.img-viewer.is-open { display: flex; opacity: 1; }
.img-viewer-content {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: viewerIn 0.36s var(--ease) both;
}
@keyframes viewerIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.img-viewer-content img {
  max-width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  will-change: transform, opacity;
  transform-origin: center center;
  transition: filter 0.25s var(--ease);
  /* The swipe/arrow crossfade (see main.js) briefly dips this image's
     opacity to 0 while its src is swapped underneath. The <img> itself
     has no background, so at that instant the transparent gap let the
     dim, blurred backdrop show through — which is actually a blurred
     glimpse of the real page content behind the fixed overlay (that's
     what backdrop-filter is blurring), briefly visible as a flash/glitch
     right in the middle of the swipe. A solid fill the same color as the
     overlay means that brief gap now reads as a smooth fade through a
     flat tone instead of a peek-through. */
  background: rgba(28,26,23,0.98);
}
/* Close button and arrows are anchored to .img-viewer (the full-viewport
   overlay), NOT to .img-viewer-content (which shrink-wraps the image and
   moves/resizes with every photo's aspect ratio). Pinning to the overlay
   keeps them locked to fixed screen corners, exactly like the portfolio
   .lightbox-close / .lightbox-nav pattern in gallery.css. */
.img-viewer-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 46px;
  height: 46px;
  background: rgba(28,26,23,0.55);
  border: 1px solid rgba(247,243,234,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
  color: var(--ivory);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.img-viewer-close:hover { background: var(--gradient-brass); }
.img-viewer-close:active { transform: scale(0.92); }
.img-viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(28,26,23,0.55);
  border: 1px solid rgba(247,243,234,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.img-viewer-arrow:hover { background: var(--gradient-brass); }
.img-viewer-arrow:active { transform: translateY(-50%) scale(0.92); }
.img-viewer-arrow.prev { left: var(--space-sm); }
.img-viewer-arrow.next { right: var(--space-sm); }
.img-viewer-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--ivory); stroke-width: 2; pointer-events: none; }
@media (min-width: 701px) {
  .img-viewer-close { top: var(--space-lg); right: var(--space-lg); }
  .img-viewer-arrow.prev { left: var(--space-lg); }
  .img-viewer-arrow.next { right: var(--space-lg); }
}
@media (max-width: 700px) {
  .img-viewer-arrow { width: 44px; height: 44px; }
}
/* On first open the viewer shows an already-loaded on-page copy of the
   photo instantly (see show() in main.js) rather than an empty frame,
   softly blurred with a small spinner while the real full-size version
   is still downloading underneath it, then sharpens into focus. */
.img-viewer-content.is-loading img { filter: blur(6px); }
.img-viewer-content.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid rgba(247,243,234,0.28);
  border-top-color: var(--ivory);
  border-radius: 50%;
  animation: imgViewerSpin 0.75s linear infinite;
  pointer-events: none;
}
@keyframes imgViewerSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .img-viewer-content { animation: none; }
  .img-viewer-content.is-loading img { filter: none; }
  .img-viewer-content.is-loading::after { animation-duration: 1.5s; }
}

/* ---- Team Grid ---- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.team-card { text-align: center; }
.team-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.team-card:hover .team-photo { box-shadow: var(--shadow-lifted); transform: translateY(-4px); }
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.team-card h3 { margin-bottom: 0.25rem; font-size: 1.2rem; }
.team-card .role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-sm);
}
.team-card p { font-size: 0.93rem; color: var(--taupe); margin-bottom: var(--space-sm); }
.team-card .responsibilities { font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ---- Blog Teaser / Article ---- */
.blog-preview {
  background: var(--paper);
  border: 1px solid var(--stone-soft);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}
.blog-preview h3 { font-size: 1.6rem; margin-bottom: var(--space-sm); }
.blog-preview .blog-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--taupe);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}
.blog-preview .excerpt { color: var(--ink-soft); margin-bottom: var(--space-md); line-height: 1.65; }
.blog-article { max-width: 800px; margin: 0 auto; }
.blog-article h2 { margin-top: var(--space-xl); margin-bottom: var(--space-md); font-size: 1.5rem; }
.blog-article h3 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); font-size: 1.2rem; font-weight: 600; }
.blog-article p { margin-bottom: var(--space-md); line-height: 1.7; color: var(--ink-soft); }
.blog-article em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .inner-page .hero::after, .inner-page .material-zoom::after { animation: none; transition: none; }
}

/* FINAL MOTION SAFETY — hero imagery never moves, scales, or responds to scroll. */
.hero-media,
.hero-media img {
  transform: none !important;
}
.hero-media img {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero::after,
  .inner-page .hero::after { animation: none !important; opacity: 0.42; }
}