/* ============================================================================
   V4-SECTIONS.CSS
   ----------------------------------------------------------------------------
   Section rules for the V4 honeycomb rebuild.

   Imports nothing — drop in AFTER marketing-v2.css. Uses the tokens from
   :root in marketing-v2.css; introduces no new colors, fonts, or radii.

   Three categories of rules:

     1. Section rebuilds (services, process, portfolio) — replace the
        in-place rules from marketing-v2.css with constitutional-compliant
        versions. These re-use the same .ir-svc / .ir-proc / .ir-port
        class names where possible so the HTML stays close to the original.

     2. Section additions (testimonials-v2, learning-v2, plan-v2) — new
        class scopes that sit alongside the older rule blocks.

     3. Shared primitives (.hx, .hx-shade, .ir-photo-needed) — used by
        any new section.

   Constitutional rule, in CSS form:
     --hex-gap:    22px;
     --hex-col-x:  calc(var(--hex-w) * 0.75 + var(--hex-gap));
     --hex-col-y:  calc(var(--hex-h) * 0.5  + var(--hex-gap) * 0.5);
     --hex-row:    calc(var(--hex-h)        + var(--hex-gap));

   Every section below applies those three offsets. Same-size hexes only.
   ============================================================================ */

/* ---------------------------------------------------------------
   SHARED — flat-top hex primitive + photo-needed placeholder
   --------------------------------------------------------------- */

.hx {
  --hex-w: 275px;
  width: var(--hex-w);
  height: calc(var(--hex-w) * 0.8660254);
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
}
.hx > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hx-shade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0) 35%, rgba(29,24,28,0.62) 100%);
  pointer-events: none;
}

/* "Photo needed" placeholder — visually flagged so the owner can see
   exactly which slots need new imagery. */
.ir-photo-needed {
  position: absolute; inset: 0;
  background: url('/assets/marble.png') center/cover no-repeat, var(--granite);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
}
.ir-photo-needed::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0.55) 0%, rgba(29,24,28,0.82) 100%);
}
.ir-photo-needed-inner {
  position: relative;
  font-family: var(--font-body); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); line-height: 1.5;
}
.ir-photo-needed-inner::before {
  content: ""; display: block; width: 22px; height: 1px;
  background: var(--gold); margin: 0 auto 8px;
}
.ir-photo-needed-inner em {
  display: block; font-style: normal; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.04em; text-transform: none;
  color: var(--cream); margin-top: 4px;
}


/* ============================================================================
   1. SERVICES — REBUILT
   ----------------------------------------------------------------------------
   Before: edge-shared 6-hex tessellation (col-step = 0.75W, no gap).
   After:  same 6-hex layout with --hex-gap: 22px applied to BOTH x and y
           offsets — the visible breathing gap mandated by the DNA doc.
   ============================================================================ */

.ir-services {
  --hex-w: 275px;
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  --hex-col-x: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  --hex-col-y: calc(var(--hex-h) * 0.5  + var(--hex-gap) * 0.5);
  --hex-row:   calc(var(--hex-h)        + var(--hex-gap));

  position: relative;
  width: calc(var(--hex-col-x) * 3 + var(--hex-w));
  height: calc(var(--hex-row) + var(--hex-h));
  margin: 0 auto;
}
.ir-services .ir-svc { position: absolute; width: var(--hex-w); height: var(--hex-h); }

.ir-services .ir-svc-1 { left: 0;                                 top: 0; }
.ir-services .ir-svc-2 { left: 0;                                 top: var(--hex-row); }
.ir-services .ir-svc-3 { left: var(--hex-col-x);                  top: var(--hex-col-y); }
.ir-services .ir-svc-4 { left: calc(var(--hex-col-x) * 2);        top: 0; }
.ir-services .ir-svc-5 { left: calc(var(--hex-col-x) * 2);        top: var(--hex-row); }
.ir-services .ir-svc-6 { left: calc(var(--hex-col-x) * 3);        top: var(--hex-col-y); }


/* ============================================================================
   2. PROCESS — REBUILT
   ----------------------------------------------------------------------------
   Before: 5 cream-filled hexes with gold ring, edge-shared.
   After:  5 photographic hexes with overlaid step number + title.
           Same flat-top zigzag chain with 22 px gaps. Blurb row stays.

   To use: replace .ir-proc-cell HTML with a <div class="ir-proc-photo">
           that contains <img> + .ir-proc-overlay. Class .ir-proc-N is
           still the position selector — that part is unchanged.
   ============================================================================ */

.ir-process {
  --hex-w: 225px;
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  --hex-col-x: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  --hex-col-y: calc(var(--hex-h) * 0.5  + var(--hex-gap) * 0.5);

  position: relative;
  width: calc(var(--hex-col-x) * 4 + var(--hex-w));
  height: calc(var(--hex-h) + var(--hex-col-y) + 130px);
  margin: 0 auto;
}

.ir-proc-cell-v2 {
  position: absolute;
  width: var(--hex-w); height: var(--hex-h);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
  cursor: default;
}
.ir-proc-cell-v2 > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ir-proc-cell-v2::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0.10) 0%, rgba(29,24,28,0.85) 100%);
}
.ir-proc-overlay {
  position: absolute; left: 18%; right: 18%; bottom: 28%;
  text-align: center; z-index: 1;
}
.ir-proc-overlay .n {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 15px; color: var(--gold-light);
  display: block; margin-bottom: 4px; letter-spacing: 0.04em;
}
.ir-proc-overlay .t {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1;
  color: var(--cream);
}

.ir-process .ir-proc-1 { left: 0;                          top: 0; }
.ir-process .ir-proc-2 { left: var(--hex-col-x);           top: var(--hex-col-y); }
.ir-process .ir-proc-3 { left: calc(var(--hex-col-x) * 2); top: 0; }
.ir-process .ir-proc-4 { left: calc(var(--hex-col-x) * 3); top: var(--hex-col-y); }
.ir-process .ir-proc-5 { left: calc(var(--hex-col-x) * 4); top: 0; }

.ir-process .ir-proc-blurbs {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--hex-h) + var(--hex-col-y) + 28px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--gold);
}


/* ============================================================================
   3. PORTFOLIO — REBUILT
   ----------------------------------------------------------------------------
   Before: 7 different-sized hexes overlapping with z-index layering.
   After:  7 same-size hexes in a clean honeycomb tessellation, 22 px gaps.
           Layout: 3 "top" + 2 "offset middle" + 2 "bottom" — fully
           symmetric, no overlap.
   ============================================================================ */

.ir-portfolio-v2 {
  --hex-w: 250px;
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  --hex-col-x: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  --hex-col-y: calc(var(--hex-h) * 0.5  + var(--hex-gap) * 0.5);
  --hex-row:   calc(var(--hex-h)        + var(--hex-gap));

  position: relative;
  width: calc(var(--hex-col-x) * 4 + var(--hex-w));
  height: calc(var(--hex-row) + var(--hex-h));
  margin: 0 auto;
}
.ir-portfolio-v2 .ir-port-cell {
  position: absolute;
  width: var(--hex-w); height: var(--hex-h);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
  cursor: pointer;
  transition: transform 220ms ease, filter 220ms ease;
}
.ir-portfolio-v2 .ir-port-cell:hover { transform: scale(1.025); filter: brightness(1.05); z-index: 2; }
.ir-portfolio-v2 .ir-port-cell > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ir-portfolio-v2 .ir-port-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0) 35%, rgba(29,24,28,0.75) 100%);
}
.ir-portfolio-v2 .ir-port-cell .meta {
  position: absolute; left: 14%; right: 14%; bottom: 26%;
  z-index: 1; text-align: center;
}
.ir-portfolio-v2 .ir-port-cell .meta .eb {
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-bottom: 6px;
}
.ir-portfolio-v2 .ir-port-cell .meta .t {
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  color: var(--cream); line-height: 1.1;
}

/* 7-hex honeycomb cluster:
     row 1 (top, y=0):       hex 1, hex 3, hex 5
     row 2 (offset middle):  hex 2, hex 4
     row 3 (bottom):         hex 6, hex 7
   The 8th cell slot (top-right) holds the "see full gallery" CTA. */
.ir-portfolio-v2 .ir-port-1 { left: 0;                                top: 0; }
.ir-portfolio-v2 .ir-port-2 { left: var(--hex-col-x);                 top: var(--hex-col-y); }
.ir-portfolio-v2 .ir-port-3 { left: calc(var(--hex-col-x) * 2);       top: 0; }
.ir-portfolio-v2 .ir-port-4 { left: calc(var(--hex-col-x) * 3);       top: var(--hex-col-y); }
.ir-portfolio-v2 .ir-port-5 { left: calc(var(--hex-col-x) * 4);       top: 0; }
.ir-portfolio-v2 .ir-port-6 { left: 0;                                top: var(--hex-row); }
.ir-portfolio-v2 .ir-port-7 { left: calc(var(--hex-col-x) * 2);       top: var(--hex-row); }

.ir-portfolio-v2 .ir-port-cta {
  position: absolute;
  left: calc(var(--hex-col-x) * 3);
  top: var(--hex-row);
  width: calc(var(--hex-col-x) + var(--hex-w));
  padding: 22px 26px;
  background: var(--cream);
  border-top: 2px solid var(--gold);
  z-index: 1;
}
.ir-portfolio-v2 .ir-port-cta .ir-h4 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; margin-bottom: 6px;
}
.ir-portfolio-v2 .ir-port-cta .ir-p-sm { margin-bottom: 14px; }


/* ============================================================================
   4. TESTIMONIALS V2
   ----------------------------------------------------------------------------
   3 same-size project-photo hexes in a horizontal zigzag chain with 22 px
   gaps, sitting on the granite-marble section. Three quote columns aligned
   to the three hex centers.
   ============================================================================ */

.ir-testi-v2 { margin-top: 56px; }
.ir-testi-v2 .testi-cluster {
  --hex-w: clamp(225px, 21vw, 290px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  position: relative;
  width: calc(var(--hex-w) * 1.5 + var(--hex-gap) * 2 + var(--hex-w));
  height: calc(var(--hex-h) * 1.5 + var(--hex-gap) * 0.5);
  margin: 0 auto;
}
.ir-testi-v2 .testi-cluster .hx {
  position: absolute;
  --hex-w: clamp(225px, 21vw, 290px);
}
.ir-testi-v2 .testi-cluster .hx-a { left: 0; top: 0; }
.ir-testi-v2 .testi-cluster .hx-b {
  left: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5);
}
.ir-testi-v2 .testi-cluster .hx-c {
  left: calc(var(--hex-w) * 1.5 + var(--hex-gap) * 2);
  top: 0;
}

.ir-testi-v2 .testi-row {
  --testi-cluster-w: calc(clamp(225px, 21vw, 290px) * 2.5 + 44px);
  max-width: var(--testi-cluster-w);
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ir-testi-v2 .testi-block {
  text-align: center; position: relative; padding-top: 22px;
}
.ir-testi-v2 .testi-block::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 18px; background: var(--gold);
  transform: translateX(-50%);
}
.ir-testi-v2 .testi-block .stars { color: var(--sage); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.ir-testi-v2 .testi-block .quote {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 18px; line-height: 1.45;
  color: var(--cream); margin: 0 0 18px;
}
.ir-testi-v2 .testi-block .quote::before { content: "\201C"; color: var(--gold-light); margin-right: 2px; }
.ir-testi-v2 .testi-block .quote::after  { content: "\201D"; color: var(--gold-light); margin-left: 2px; }
.ir-testi-v2 .testi-block .who {
  font-family: var(--font-body); font-weight: 600;
  font-size: 12.5px; color: var(--cream);
}
.ir-testi-v2 .testi-block .where {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-top: 6px;
}


/* ============================================================================
   5. LEARNING V2
   ----------------------------------------------------------------------------
   3 hex thumbnails in a horizontal zigzag chain on the cream surface;
   article body row below.
   ============================================================================ */

.ir-learning-v2 { margin-top: 56px; }
.ir-learning-v2 .learning-cluster {
  --hex-w: clamp(250px, 23vw, 315px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  position: relative;
  width: calc(var(--hex-w) * 1.5 + var(--hex-gap) * 2 + var(--hex-w));
  height: calc(var(--hex-h) * 1.5 + var(--hex-gap) * 0.5);
  margin: 0 auto;
}
.ir-learning-v2 .learning-cluster .hx {
  position: absolute;
  --hex-w: clamp(250px, 23vw, 315px);
  cursor: pointer;
  transition: transform 220ms ease;
}
.ir-learning-v2 .learning-cluster .hx:hover { transform: scale(1.025); }
.ir-learning-v2 .learning-cluster .hx-a { left: 0; top: 0; }
.ir-learning-v2 .learning-cluster .hx-b {
  left: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5);
}
.ir-learning-v2 .learning-cluster .hx-c {
  left: calc(var(--hex-w) * 1.5 + var(--hex-gap) * 2);
  top: 0;
}

.ir-learning-v2 .hx-tag {
  position: absolute; left: 18%; right: 18%; bottom: 30%;
  text-align: center; z-index: 1;
}
.ir-learning-v2 .hx-tag .eb {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-bottom: 6px;
}
.ir-learning-v2 .hx-tag .read {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--cream);
}

.ir-learning-v2 .learning-row {
  --learn-cluster-w: calc(clamp(250px, 23vw, 315px) * 2.5 + 44px);
  max-width: var(--learn-cluster-w);
  margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.ir-learning-v2 .learn-block .ir-h3 {
  font-size: 22px; line-height: 1.18;
  margin: 0 0 12px;
}
.ir-learning-v2 .learn-block .ir-h3 em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-learning-v2 .learn-block .ir-p-sm { color: var(--fg2); margin-bottom: 16px; }
.ir-learning-v2 .learn-block .more {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 8px;
}
.ir-learning-v2 .learn-block .more::after { content: "\2192"; }
.ir-learning-v2 .learn-block .more:hover { color: var(--granite); }


/* ============================================================================
   6. PLAN V2
   ----------------------------------------------------------------------------
   Form on the left, granite sidebar on the right with 3 hexes in vertical
   zigzag (mirror of the locked hero).
   ============================================================================ */

.ir-plan-v2 {
  background: var(--cream-light);
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  max-width: 1100px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  position: relative;
}
.ir-plan-v2 > .form-side {
  padding: 40px 44px 44px;
  border-right: 1px solid var(--stone-200);
}
.ir-plan-v2 > .preview-side {
  background: url('/assets/marble.png') center/cover no-repeat, var(--granite);
  position: relative;
  padding: 40px 36px 44px;
  color: var(--cream);
  overflow: hidden;
}
.ir-plan-v2 > .preview-side::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0.68) 0%, rgba(29,24,28,0.88) 100%);
}
.ir-plan-v2 > .preview-side > * { position: relative; z-index: 1; }

.ir-plan-v2 .preview-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ir-plan-v2 .preview-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold-light);
}
.ir-plan-v2 .preview-side h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 26px; line-height: 1.15;
  color: var(--cream); margin: 0 0 6px;
}
.ir-plan-v2 .preview-side h3 em { font-style: italic; color: var(--gold-light); font-weight: 500; }
.ir-plan-v2 .preview-help {
  font-size: 13px; line-height: 1.55; color: var(--cream-deep);
  margin: 0 0 28px; max-width: 280px;
}

.ir-plan-v2 .preview-hexes {
  --hex-w: clamp(150px, 15vw, 200px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 18px;
  position: relative;
  width: calc(var(--hex-w) * 1.75 + var(--hex-gap));
  height: calc(var(--hex-h) * 2 + var(--hex-gap) + 96px);
  margin-top: 8px;
}
.ir-plan-v2 .preview-hexes .hx { position: absolute; --hex-w: clamp(150px, 15vw, 200px); }
.ir-plan-v2 .preview-hexes .hx-a { left: 0; top: 0; }
.ir-plan-v2 .preview-hexes .hx-b {
  left: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5);
}
.ir-plan-v2 .preview-hexes .hx-c {
  left: 0;
  top: calc(var(--hex-h) + var(--hex-gap));
}

.ir-plan-v2 .preview-step {
  position: absolute;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 13px; color: var(--gold-light); letter-spacing: 0.06em;
}
.ir-plan-v2 .preview-cap {
  position: absolute;
  font-family: var(--font-body); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--cream); white-space: nowrap;
}
.ir-plan-v2 .preview-sub { position: absolute; font-size: 10.5px; color: var(--cream-deep); white-space: nowrap; }

.ir-plan-v2 .cap-a-step { top: -2px; left: calc(var(--hex-w) + 14px); }
.ir-plan-v2 .cap-a-n    { top: 14px; left: calc(var(--hex-w) + 14px); }
.ir-plan-v2 .cap-a-s    { top: 36px; left: calc(var(--hex-w) + 14px); }
.ir-plan-v2 .cap-b-step { top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5 - 2px); left: calc(var(--hex-w) * 1.75 + var(--hex-gap) + 14px); }
.ir-plan-v2 .cap-b-n    { top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5 + 14px); left: calc(var(--hex-w) * 1.75 + var(--hex-gap) + 14px); }
.ir-plan-v2 .cap-b-s    { top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5 + 36px); left: calc(var(--hex-w) * 1.75 + var(--hex-gap) + 14px); }
.ir-plan-v2 .cap-c-step { top: calc(var(--hex-h) + var(--hex-gap) - 2px); left: calc(var(--hex-w) + 14px); }
.ir-plan-v2 .cap-c-n    { top: calc(var(--hex-h) + var(--hex-gap) + 14px); left: calc(var(--hex-w) + 14px); }
.ir-plan-v2 .cap-c-s    { top: calc(var(--hex-h) + var(--hex-gap) + 36px); left: calc(var(--hex-w) + 14px); }

.ir-plan-v2 .preview-foot {
  position: relative; margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgba(160, 123, 81, 0.4);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600;
}

.ir-plan-v2 .form-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ir-plan-v2 .form-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}
.ir-plan-v2 .form-side h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.12;
  color: var(--granite); margin: 0 0 6px;
}
.ir-plan-v2 .form-side h3 em { font-style: italic; color: var(--gold); font-weight: 500; }


/* ============================================================================
   SHARED — SERVICE-PAGE PATTERNS (used by V4 Roofing.html etc)
   ============================================================================ */

/* ============================================================================
 * SERVICE HERO — LOCKED 2026-05-22 (owner sign-off)
 * ----------------------------------------------------------------------------
 * Full spec: docs/marketing/V4_GRANITE_SAGE_DNA.md (SERVICE HERO section)
 * Used by EVERY sub-page (roofing, kitchen, bathroom, renovations, storm,
 * portfolio, about, contact, guides, financing, learning-center, portal).
 *
 * Constitutional rules:
 *   1. Grid is 77.5% cream LEFT / 22.5% granite RIGHT (mirror of homepage)
 *   2. Min-height 700px
 *   3. Three SAME-SIZE flat-top hex photos in zigzag honeycomb staggering
 *   4. Hex size: clamp(225px, 22vw, 315px) — original spec, NOT bumped
 *   5. 22px gaps between hexes (NOT edge-shared)
 *   6. --hex-inset-right: -50px → Hex A and C bleed off the RIGHT edge
 *   7. Hex B bridges INTO the cream area
 *   8. Content block: max-width 640px, centered both axes, text-align center
 *   9. H1 font-size: clamp(52px, 5.6vw, 84px) to fill the cream area
 * Voided arrangements: 50/50 grid, left-biased content, vertical-top alignment,
 * +30% hex bump, content max-width > 640px (collides with hex B), edge-shared
 * tessellation, floating hex cluster, different-sized hexes.
 * ============================================================================ */
.ir-svc-hero {
  display: grid;
  grid-template-columns: 77.5% 22.5%;
  min-height: 700px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.ir-svc-hero-content {
  /* Centered horizontally + vertically in the cream column.
     Max-width 640px is chosen so the block, when centered, never reaches
     hex B's left edge (which sits at ~x=901 in a 1104px cream column).
     Text inside the block is also centered. */
  padding: 60px 24px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  position: relative; z-index: 2;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}
.ir-svc-hero-content .ir-eyebrow { margin-bottom: 22px; justify-content: center; align-self: center; }
.ir-svc-hero-content .ir-h1 {
  /* Slightly bigger to fill more of the available cream area */
  font-size: clamp(52px, 5.6vw, 84px);
  line-height: 1.02;
}
.ir-svc-hero-content .ir-lead {
  max-width: 540px;
  margin: 26px auto 36px;
  font-size: 18px;
}
.ir-svc-hero-content .ir-cta-row { justify-content: center; }
.ir-svc-hero-marble {
  position: relative;
  background: url('/assets/marble.png') center/cover no-repeat;
}
.ir-svc-hero-marble::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(29,24,28,0.0) 0%, rgba(29,24,28,0.25) 100%);
}

/* Hex cluster — vertical zigzag, mirror of the locked homepage hero.
   Hex A (top) and hex C (bottom) bleed OFF the right edge of the page.
   Hex B (middle) bridges into the cream area to the left of the granite.

       cream                     |  marble
       text                      |  [hx-a]→ bleeds right
                          [hx-b] | (in cream, bridges boundary)
       text                      |  [hx-c]→ bleeds right

   Hex size: original spec preserved (no bump). */
.ir-svc-hero-hexes {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  --hex-w: clamp(225px, 22vw, 315px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;

  /* Negative inset = bleed off the right edge */
  --hex-inset-right: -50px;
}
.ir-svc-hero-hexes .hx {
  position: absolute;
  --hex-w: clamp(225px, 22vw, 315px);
}
.ir-svc-hero-hexes .hx-a {
  right: var(--hex-inset-right);
  top:   calc(50% - var(--hex-h) - var(--hex-gap) * 0.5);
}
.ir-svc-hero-hexes .hx-b {
  /* one column step LEFT of A — this is what bridges into the cream area */
  right: calc(var(--hex-inset-right) + var(--hex-w) * 0.75 + var(--hex-gap));
  top:   calc(50% - var(--hex-h) * 0.5);
}
.ir-svc-hero-hexes .hx-c {
  right: var(--hex-inset-right);
  top:   calc(50% + var(--hex-gap) * 0.5);
}


/* Spec band — three hex stat blocks. Used by the service page "by the
   numbers" section. */
.ir-spec-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding: 32px 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.ir-spec-block { text-align: center; }
.ir-spec-block .n {
  font-family: var(--font-display); font-weight: 500;
  font-size: 48px; line-height: 1; color: var(--gold);
  letter-spacing: -0.01em;
}
.ir-spec-block .l {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--granite); font-weight: 600;
  margin-top: 10px;
}
.ir-spec-block .s {
  font-size: 13px; color: var(--fg2);
  margin-top: 4px;
}


/* What's included — 6-cell list with hex bullet markers.
   Cells live on a 2-col grid; the marker is a small filled hex. */
.ir-included {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
  margin-top: 32px;
  max-width: 720px;
}
.ir-included-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: start;
  padding-top: 6px;
}
.ir-included-item::before {
  content: "";
  width: 14px; height: calc(14px * 0.8660254);
  margin-top: 6px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--gold);
}
.ir-included-item .t {
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; color: var(--granite); margin: 0 0 2px;
}
.ir-included-item .d {
  font-size: 13.5px; line-height: 1.5; color: var(--fg2);
}


/* FAQ accordion-style block — gold-rule separators */
.ir-faq {
  max-width: 820px;
  margin: 40px auto 0;
}
.ir-faq-item {
  border-bottom: 1px solid var(--stone-200);
  padding: 20px 0 22px;
}
.ir-faq-item:first-child { border-top: 1px solid var(--gold); }
.ir-faq-q {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: var(--granite); margin: 0 0 10px;
}
.ir-faq-q em { font-style: italic; color: var(--gold); }
.ir-faq-a { font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: 680px; }


/* ============================================================================
   SHARED — service-page patterns (used across roofing/kitchen/bathroom/etc)
   ============================================================================ */

/* ============================================================================
   TRUST BAR — REBUILT 2026-05-23 (marble divider system)
   ----------------------------------------------------------------------------
   Default marble is option 1. Service pages override via .is-marble-2 or
   .is-marble-3 modifier on the same element.
   NOT background-attachment: fixed — trust bar is a divider, not parallax.
   ============================================================================ */
.ir-trust-bar {
  background-image: url('/assets/marble-white-gold-1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--cream-light);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 22px 32px;
  position: relative;
  isolation: isolate;
}
.ir-trust-bar.is-marble-2 { background-image: url('/assets/marble-white-gold-2.jpg'); }
.ir-trust-bar.is-marble-3 { background-image: url('/assets/marble-white-gold-3.jpg'); }

.ir-trust-bar::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(255, 253, 247, 0.22) 0%,
    rgba(244, 238, 228, 0.30) 100%);
  pointer-events: none;
}

.ir-trust-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}


/* ============================================================================
   MARBLE DIVIDER — NEW 2026-05-23
   ----------------------------------------------------------------------------
   Slim content-less marble band. Drop between the home hero and the first
   .ir-section. Defaults to marble 1; takes .is-marble-2 / .is-marble-3.
   ============================================================================ */
.ir-marble-divider {
  /* Match the visual weight of .ir-trust-bar: same height, same image
     recipe, same cream-wash overlay. Locked 2026-05-24. */
  height: 104px;
  background-image: url('/assets/marble-white-gold-1.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--cream-light);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  position: relative;
  isolation: isolate;
}
.ir-marble-divider::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(255, 253, 247, 0.22) 0%,
    rgba(244, 238, 228, 0.30) 100%);
  pointer-events: none;
}
.ir-marble-divider.is-marble-2 { background-image: url('/assets/marble-white-gold-2.jpg'); }
.ir-marble-divider.is-marble-3 { background-image: url('/assets/marble-white-gold-3.jpg'); }
.ir-trust-cell {
  display: flex; align-items: center; gap: 14px;
}
.ir-trust-mark {
  width: 26px; height: calc(26px * 0.8660254);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--gold);
  flex-shrink: 0;
}
.ir-trust-cell .t {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; color: var(--granite);
  line-height: 1.1;
}
.ir-trust-cell .s {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; margin-top: 3px;
}


/* Tier cluster — 3 photographic hexes representing service tiers
   (eg. Insurance / Replacement / Repair). Same horizontal zigzag
   geometry as testimonials, but with per-hex pricing/scope copy below. */
.ir-tier-cluster {
  --hex-w: clamp(250px, 24vw, 315px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  position: relative;
  width: calc(var(--hex-w) * 1.5 + var(--hex-gap) * 2 + var(--hex-w));
  height: calc(var(--hex-h) * 1.5 + var(--hex-gap) * 0.5);
  margin: 56px auto 0;
}
.ir-tier-cluster .hx {
  position: absolute;
  --hex-w: clamp(250px, 24vw, 315px);
  cursor: default;
}
.ir-tier-cluster .hx-a { left: 0; top: 0; }
.ir-tier-cluster .hx-b {
  left: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5);
}
.ir-tier-cluster .hx-c {
  left: calc(var(--hex-w) * 1.5 + var(--hex-gap) * 2);
  top: 0;
}
.ir-tier-cluster .hx-label {
  position: absolute;
  left: 18%; right: 18%; bottom: 30%;
  text-align: center; z-index: 1;
}
.ir-tier-cluster .hx-label .eb {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-bottom: 6px;
}
.ir-tier-cluster .hx-label .nm {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: var(--cream); line-height: 1;
}
.ir-tier-row {
  --tier-cluster-w: calc(clamp(250px, 24vw, 315px) * 2.5 + 44px);
  max-width: var(--tier-cluster-w);
  margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.ir-tier-block {
  text-align: center;
  padding-top: 22px;
  position: relative;
}
.ir-tier-block::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 18px; background: var(--gold);
  transform: translateX(-50%);
}
.ir-tier-block .tier-nm {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: var(--granite); margin: 0 0 8px;
}
.ir-tier-block .tier-nm em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-tier-block .tier-desc { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0 0 16px; }
.ir-tier-block .tier-meta { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }

/* When the tier cluster sits inside a granite section, flip text to cream so
   it stays legible against the dark marble background. */
.ir-section-granite .ir-tier-block .tier-nm   { color: var(--cream); }
.ir-section-granite .ir-tier-block .tier-desc { color: var(--cream-deep); }
.ir-section-granite .ir-tier-block .tier-meta { color: var(--gold-light); }
.ir-section-granite .ir-tier-block::before    { background: var(--gold-light); }


/* Granite stripe continuation — wraps a regular section in a full-width
   container that paints a 22.5% marble stripe on the LEFT, matching the
   homepage hero's granite slab. Used to visually extend the hero granite
   down through following sections.

   Usage: <div class="ir-stripe-left"><section class="ir-section">...</section></div>
*/
.ir-stripe-left {
  position: relative;
  width: 100%;
  background: var(--cream);
}
.ir-stripe-left::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 22.5%;
  background: url('/assets/marble.png') center/cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.ir-stripe-left > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  /* Mobile: drop the stripe — section reverts to clean cream */
  .ir-stripe-left::before { display: none; }
}


/* Material comparison — 3 columns, cream surface, no photos
   (this section is intentionally typographic rather than photographic).
   The honeycomb rule applies to PHOTOGRAPHIC content; comparison tables
   are an editorial / data exception. */
.ir-material-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--gold);
}
.ir-material-col {
  padding: 32px 28px 32px;
  border-right: 1px solid var(--stone-200);
}
.ir-material-col:last-child { border-right: 0; }
.ir-material-col .eb {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.ir-material-col .eb::before {
  content: ""; width: 18px; height: 1px; background: var(--gold);
}
.ir-material-col h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.1;
  color: var(--granite); margin: 0 0 14px;
}
.ir-material-col h3 em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-material-col .lead { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0 0 22px; }
.ir-material-col dl {
  margin: 0; display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 16px;
}
.ir-material-col dt {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; align-self: center;
}
.ir-material-col dd {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; color: var(--granite); margin: 0;
  align-self: center;
}


/* Before / After hex pairs — 3 paired groups.
   WITHIN each pair: two hexes share a slanted edge (no gap, by design,
   to convey the "before → after" linkage).
   BETWEEN pairs: 22 px breathing gap, per the constitutional rule. */
.ir-ba-cluster {
  --hex-w: clamp(190px, 16vw, 225px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --pair-gap: 22px;            /* gap BETWEEN pairs */
  --pair-w: calc(var(--hex-w) * 1.75);   /* one pair = 1.75W wide */
  position: relative;
  width: calc(var(--pair-w) * 3 + var(--pair-gap) * 2);
  height: calc(var(--hex-h) * 1.5);
  margin: 56px auto 0;
}
.ir-ba-pair {
  position: absolute;
  width: var(--pair-w);
  height: calc(var(--hex-h) * 1.5);
}
.ir-ba-pair:nth-child(1) { left: 0; top: 0; }
.ir-ba-pair:nth-child(2) { left: calc(var(--pair-w) + var(--pair-gap)); top: 0; }
.ir-ba-pair:nth-child(3) { left: calc(var(--pair-w) * 2 + var(--pair-gap) * 2); top: 0; }
.ir-ba-pair .hx {
  position: absolute;
  --hex-w: clamp(190px, 16vw, 225px);
  width: var(--hex-w);
  height: var(--hex-h);
}
/* Within a pair: "before" sits top-left, "after" sits bottom-right, edge-shared. */
.ir-ba-pair .hx-before { left: 0;                       top: 0; }
.ir-ba-pair .hx-after  { left: calc(var(--hex-w) * 0.75); top: calc(var(--hex-h) * 0.5); }

.ir-ba-pair .ba-tag {
  position: absolute; left: 14%; right: 14%; bottom: 32%;
  text-align: center; z-index: 1;
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700;
}
.ir-ba-pair .hx-before .ba-tag { color: var(--gold-light); }
.ir-ba-pair .hx-after  .ba-tag { color: var(--cream); }
.ir-ba-pair .hx-before::after,
.ir-ba-pair .hx-after::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0.0) 30%, rgba(29,24,28,0.78) 100%);
}
.ir-ba-pair .hx-before::after { background: linear-gradient(180deg, rgba(29,24,28,0.35) 0%, rgba(29,24,28,0.85) 100%); }

.ir-ba-caption {
  position: absolute;
  bottom: -52px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream); font-weight: 600;
}
.ir-ba-caption em {
  display: block; font-family: var(--font-display); font-style: italic;
  font-weight: 500; font-size: 14px;
  color: var(--gold-light); letter-spacing: 0.02em;
  margin-top: 4px; text-transform: none;
}


/* CTA band — granite, single sage button + phone. Reused at the bottom
   of every service page right before the footer. Marble background is
   fixed-attached for a parallax scroll effect. */
.ir-cta-band {
  background: url('/assets/marble.png') center/cover no-repeat fixed, var(--granite);
  position: relative;
  padding: 96px 32px;
}
.ir-cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0.78) 0%, rgba(29,24,28,0.92) 100%);
}
.ir-cta-inner {
  position: relative;
  max-width: 880px; margin: 0 auto;
  text-align: center;
}
.ir-cta-inner .ir-eyebrow {
  justify-content: center;
  color: var(--gold-light);
}
.ir-cta-inner .ir-eyebrow::before { background: var(--gold-light); }
.ir-cta-inner h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4vw, 56px); line-height: 1.05;
  color: var(--cream); margin: 18px 0 14px;
  letter-spacing: -0.005em;
}
.ir-cta-inner h2 em { font-style: italic; color: var(--gold-light); font-weight: 500; }
.ir-cta-inner .lead {
  font-size: 16.5px; line-height: 1.55;
  color: var(--cream-deep);
  max-width: 600px; margin: 0 auto 28px;
}
.ir-cta-inner .cta-row {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.ir-cta-inner .fineprint {
  margin-top: 28px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600;
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
  .ir-services, .ir-process, .ir-portfolio-v2 {
    transform: scale(0.82); transform-origin: top center;
    margin-bottom: -80px;
  }
  .ir-plan-v2 { grid-template-columns: 1fr; }
  .ir-plan-v2 > .form-side { border-right: 0; border-bottom: 1px solid var(--stone-200); }

  .ir-svc-hero { grid-template-columns: 1fr; min-height: auto; }
  .ir-svc-hero-marble { display: none; }
  .ir-svc-hero-hexes { display: none; }
  .ir-svc-hero-content { padding: 80px 32px; }
}
@media (max-width: 900px) {
  .testi-cluster, .learning-cluster {
    width: 100% !important; height: auto !important;
    display: grid; grid-template-columns: 1fr; gap: 16px;
    justify-items: center;
  }
  .testi-cluster .hx, .learning-cluster .hx {
    position: relative !important; left: auto !important; top: auto !important;
    --hex-w: 240px !important;
  }
  .testi-row, .learning-row { grid-template-columns: 1fr !important; }
  .ir-spec-band { grid-template-columns: 1fr; gap: 24px; }
  .ir-included { grid-template-columns: 1fr; }

  .ir-trust-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ir-tier-cluster {
    width: 100% !important; height: auto !important;
    display: grid; grid-template-columns: 1fr; gap: 16px;
    justify-items: center;
  }
  .ir-tier-cluster .hx { position: relative !important; left: auto !important; top: auto !important; --hex-w: 240px !important; }
  .ir-tier-row { grid-template-columns: 1fr !important; }
  .ir-material-grid { grid-template-columns: 1fr; }
  .ir-material-col { border-right: 0; border-bottom: 1px solid var(--stone-200); }
  .ir-ba-cluster {
    width: 100% !important; height: auto !important;
    display: grid; grid-template-columns: 1fr; gap: 56px;
  }
  .ir-ba-pair { position: relative !important; left: 0 !important; top: 0 !important; margin: 0 auto; }
}
@media (max-width: 700px) {
  .ir-services, .ir-process, .ir-portfolio-v2 {
    transform: scale(0.55); margin-bottom: -260px;
  }
  .ir-process .ir-proc-blurbs { display: none; }
}


/* ============================================================================
   BATCH-2 SECTION PATTERNS — portfolio grid, filters, editorial split,
   team grid, newsletter, guide library. Added 2026-05-21.
   ============================================================================ */

/* Filter chip row — used by /portfolio and /learning-center.
   Inline horizontal scroll on narrow screens. */
.ir-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 40px auto 56px;
  max-width: 880px;
}
.ir-filter-chip {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--granite-mute);
  background: var(--cream);
  border: 1px solid var(--stone-200);
  border-radius: 2px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.ir-filter-chip:hover { border-color: var(--gold); color: var(--granite); }
.ir-filter-chip.is-active {
  border-color: var(--granite); background: var(--granite); color: var(--cream);
}


/* Large portfolio grid — N same-size hexes in 5-4-5 honeycomb,
   visible 22 px gaps. Fits 14 entries cleanly inside the 1280 content cap. */
.ir-portfolio-grid {
  --hex-w: 250px;
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 22px;
  --hex-col-x: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  --hex-col-y: calc(var(--hex-h) * 0.5  + var(--hex-gap) * 0.5);
  --hex-row:   calc(var(--hex-h)        + var(--hex-gap));

  position: relative;
  width: calc(var(--hex-col-x) * 4 + var(--hex-w));   /* 5 cols wide */
  height: calc(var(--hex-row) * 2 + var(--hex-h));    /* 3 hex rows */
  margin: 0 auto;
}
.ir-portfolio-grid .ir-port-cell {
  position: absolute;
  width: var(--hex-w); height: var(--hex-h);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
  cursor: pointer;
  transition: transform 220ms ease, filter 220ms ease;
}
.ir-portfolio-grid .ir-port-cell:hover { transform: scale(1.025); filter: brightness(1.05); z-index: 2; }
.ir-portfolio-grid .ir-port-cell > img,
.ir-portfolio-grid .ir-port-cell > .ir-photo-needed {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ir-portfolio-grid .ir-port-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0) 35%, rgba(29,24,28,0.78) 100%);
}
.ir-portfolio-grid .ir-port-cell .meta {
  position: absolute; left: 14%; right: 14%; bottom: 26%;
  z-index: 1; text-align: center;
}
.ir-portfolio-grid .ir-port-cell .meta .eb {
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-bottom: 6px;
}
.ir-portfolio-grid .ir-port-cell .meta .t {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; color: var(--cream); line-height: 1.1;
}

/* Row 1: top (cols 0,2,4,6,8 at y=0) */
.ir-portfolio-grid .pg-1  { left: 0;                                 top: 0; }
.ir-portfolio-grid .pg-3  { left: calc(var(--hex-col-x) * 1);        top: 0; }
.ir-portfolio-grid .pg-5  { left: calc(var(--hex-col-x) * 2);        top: 0; }
.ir-portfolio-grid .pg-7  { left: calc(var(--hex-col-x) * 3);        top: 0; }
.ir-portfolio-grid .pg-9  { left: calc(var(--hex-col-x) * 4);        top: 0; }

/* Row 2: offset middle (cols 1,3,5,7 at y=col-y) */
.ir-portfolio-grid .pg-2  { left: calc(var(--hex-col-x) * 0 + var(--hex-w) * 0.75 + var(--hex-gap)); top: var(--hex-col-y); }
.ir-portfolio-grid .pg-4  { left: calc(var(--hex-col-x) * 1 + var(--hex-w) * 0.75 + var(--hex-gap)); top: var(--hex-col-y); }
.ir-portfolio-grid .pg-6  { left: calc(var(--hex-col-x) * 2 + var(--hex-w) * 0.75 + var(--hex-gap)); top: var(--hex-col-y); }
.ir-portfolio-grid .pg-8  { left: calc(var(--hex-col-x) * 3 + var(--hex-w) * 0.75 + var(--hex-gap)); top: var(--hex-col-y); }

/* Row 3: same cols as row 1 at y=row */
.ir-portfolio-grid .pg-10 { left: 0;                                 top: var(--hex-row); }
.ir-portfolio-grid .pg-11 { left: calc(var(--hex-col-x) * 1);        top: var(--hex-row); }
.ir-portfolio-grid .pg-12 { left: calc(var(--hex-col-x) * 2);        top: var(--hex-row); }
.ir-portfolio-grid .pg-13 { left: calc(var(--hex-col-x) * 3);        top: var(--hex-row); }
.ir-portfolio-grid .pg-14 { left: calc(var(--hex-col-x) * 4);        top: var(--hex-row); }


/* Editorial split — hex left + italic title + prose right.
   Used by About > Our Story and Learning Center > Featured. */
.ir-editorial {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 80px;
  align-items: center;
  margin-top: 56px;
}
.ir-editorial-hex {
  position: relative;
  --hex-w: clamp(280px, 30vw, 420px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  width: var(--hex-w);
  height: var(--hex-h);
  margin: 0 auto;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
}
.ir-editorial-hex > img,
.ir-editorial-hex > .ir-photo-needed {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ir-editorial-body .ir-eyebrow { margin-bottom: 14px; }
.ir-editorial-body h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--granite); margin: 0 0 24px;
}
.ir-editorial-body h2 em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-editorial-body .lead {
  font-size: 17px; line-height: 1.6; color: var(--fg2);
  margin: 0 0 16px;
}
.ir-editorial-body .signed {
  margin-top: 22px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}


/* Team grid — 4-col hex headshots with name + title.
   Hexes are 180 px wide on desktop. */
.ir-team-grid {
  --hex-w: 180px;
  --hex-h: calc(var(--hex-w) * 0.8660254);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  max-width: 1100px;
  margin: 56px auto 0;
  justify-items: center;
}
.ir-team-cell { text-align: center; }
.ir-team-hex {
  width: var(--hex-w);
  height: var(--hex-h);
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
  margin: 0 auto 18px;
}
.ir-team-hex > img,
.ir-team-hex > .ir-photo-needed {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ir-team-cell .nm {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; color: var(--granite); line-height: 1.1;
  margin: 0 0 4px;
}
.ir-team-cell .rl {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
}


/* Newsletter band — single-row email capture on cream-light.
   Gold rule top + bottom, inline form. */
.ir-newsletter {
  background: var(--cream-light);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 56px 32px;
}
.ir-newsletter-inner {
  max-width: 880px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.ir-newsletter-copy h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3vw, 36px); line-height: 1.1;
  color: var(--granite); margin: 0 0 8px;
}
.ir-newsletter-copy h3 em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-newsletter-copy p { font-size: 14px; color: var(--fg2); margin: 0; max-width: 360px; }
.ir-newsletter-form {
  display: grid; grid-template-columns: 1fr auto; gap: 0;
  border: 1px solid var(--stone-300);
  background: var(--cream);
  padding: 4px;
}
.ir-newsletter-form input {
  border: 0; background: transparent; outline: none;
  padding: 14px 18px;
  font-family: var(--font-body); font-size: 14px; color: var(--granite);
}
.ir-newsletter-form button {
  background: var(--sage); color: var(--granite);
  border: 0; padding: 12px 22px;
  font-family: var(--font-body); font-size: 13px;
  font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 180ms ease;
}
.ir-newsletter-form button:hover { background: var(--sage-deep); }
@media (max-width: 900px) {
  .ir-newsletter-inner { grid-template-columns: 1fr; }
  .ir-editorial { grid-template-columns: 1fr; gap: 40px; }
  .ir-team-grid { grid-template-columns: 1fr 1fr; }
  .ir-portfolio-grid {
    transform: scale(0.62);
    transform-origin: top center;
    margin-bottom: -240px;
  }
  .ir-filters { gap: 6px; }
}
@media (max-width: 600px) {
  .ir-team-grid { grid-template-columns: 1fr; }
  .ir-portfolio-grid { transform: scale(0.4); margin-bottom: -400px; }
}


/* ============================================================================
   BATCH-3 SECTION PATTERNS — full contact form, financing calculator,
   portal sign-in. Added 2026-05-21.
   ============================================================================ */

/* Full lead form + 3-hex sidebar — used by /v2/contact.
   Same shell as .ir-plan-v2 but with a deeper form (6 fields). */
.ir-contact-wrap {
  background: var(--cream-light);
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  max-width: 1180px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  position: relative;
}
.ir-contact-wrap > .ir-contact-side {
  background: url('/assets/marble.png') center/cover no-repeat, var(--granite);
  position: relative;
  padding: 48px 40px 48px;
  color: var(--cream);
  overflow: hidden;
}
.ir-contact-side::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,24,28,0.68) 0%, rgba(29,24,28,0.92) 100%);
}
.ir-contact-side > * { position: relative; z-index: 1; }
.ir-contact-side .preview-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ir-contact-side .preview-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold-light);
}
.ir-contact-side h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.12;
  color: var(--cream); margin: 0 0 6px;
}
.ir-contact-side h3 em { font-style: italic; color: var(--gold-light); font-weight: 500; }
.ir-contact-side .preview-help {
  font-size: 13.5px; line-height: 1.6; color: var(--cream-deep);
  margin: 0 0 32px; max-width: 280px;
}
.ir-contact-side .preview-hexes {
  --hex-w: clamp(120px, 11vw, 150px);
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 18px;
  position: relative;
  width: calc(var(--hex-w) * 1.75 + var(--hex-gap));
  height: calc(var(--hex-h) * 2 + var(--hex-gap));
  margin-top: 16px;
}
.ir-contact-side .preview-hexes .hx {
  position: absolute;
  --hex-w: clamp(120px, 11vw, 150px);
}
.ir-contact-side .preview-hexes .hx-a { left: 0; top: 0; }
.ir-contact-side .preview-hexes .hx-b {
  left: calc(var(--hex-w) * 0.75 + var(--hex-gap));
  top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5);
}
.ir-contact-side .preview-hexes .hx-c {
  left: 0; top: calc(var(--hex-h) + var(--hex-gap));
}
.ir-contact-side .preview-step,
.ir-contact-side .preview-cap,
.ir-contact-side .preview-sub { position: absolute; white-space: nowrap; }
.ir-contact-side .preview-step { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 13px; color: var(--gold-light); }
.ir-contact-side .preview-cap { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: var(--cream); }
.ir-contact-side .preview-sub { font-size: 10.5px; color: var(--cream-deep); }
.ir-contact-side .cap-a-step { top: -2px; left: calc(var(--hex-w) + 14px); }
.ir-contact-side .cap-a-n    { top: 14px; left: calc(var(--hex-w) + 14px); }
.ir-contact-side .cap-a-s    { top: 36px; left: calc(var(--hex-w) + 14px); }
.ir-contact-side .cap-b-step { top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5 - 2px); left: calc(var(--hex-w) * 1.75 + var(--hex-gap) + 14px); }
.ir-contact-side .cap-b-n    { top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5 + 14px); left: calc(var(--hex-w) * 1.75 + var(--hex-gap) + 14px); }
.ir-contact-side .cap-b-s    { top: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5 + 36px); left: calc(var(--hex-w) * 1.75 + var(--hex-gap) + 14px); }
.ir-contact-side .cap-c-step { top: calc(var(--hex-h) + var(--hex-gap) - 2px); left: calc(var(--hex-w) + 14px); }
.ir-contact-side .cap-c-n    { top: calc(var(--hex-h) + var(--hex-gap) + 14px); left: calc(var(--hex-w) + 14px); }
.ir-contact-side .cap-c-s    { top: calc(var(--hex-h) + var(--hex-gap) + 36px); left: calc(var(--hex-w) + 14px); }
.ir-contact-side .preview-foot {
  position: relative; margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgba(160, 123, 81, 0.4);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600;
}

.ir-contact-form {
  padding: 48px 48px 44px;
}
.ir-contact-form .form-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ir-contact-form .form-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}
.ir-contact-form h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.12;
  color: var(--granite); margin: 0 0 6px;
}
.ir-contact-form h3 em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-contact-form .lead { font-size: 14px; color: var(--fg2); margin: 0 0 28px; }
.ir-contact-form .field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
  margin-bottom: 14px;
}
.ir-contact-form .field { display: block; }
.ir-contact-form .field--wide { grid-column: 1 / -1; }
.ir-contact-form .field label {
  display: block;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600; margin-bottom: 6px;
}
.ir-contact-form .field input,
.ir-contact-form .field select,
.ir-contact-form .field textarea {
  width: 100%; background: var(--cream);
  border: 1px solid var(--stone-200);
  padding: 12px 14px; border-radius: 2px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--granite); outline: none;
}
.ir-contact-form .field textarea { resize: vertical; min-height: 88px; }
.ir-contact-form .field input:focus,
.ir-contact-form .field select:focus,
.ir-contact-form .field textarea:focus { border-color: var(--granite); background: #fff; }
.ir-contact-form button {
  width: 100%; margin-top: 14px;
}
.ir-contact-form .fineprint {
  margin-top: 14px;
  font-size: 11px; color: var(--fg3); text-align: center;
}


/* Financing calculator — 3-col panel on cream-light.
   Two input columns (project amount, term) + one output column (monthly). */
.ir-calc {
  background: var(--cream);
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  max-width: 880px;
  margin: 40px auto 0;
  padding: 0;
}
.ir-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.ir-calc-cell {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--stone-200);
  position: relative;
}
.ir-calc-cell:last-child { border-right: 0; background: var(--cream-light); }
.ir-calc-cell .eb {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 12px;
  display: block;
}
.ir-calc-cell .v {
  font-family: var(--font-display); font-weight: 500;
  font-size: 36px; line-height: 1;
  color: var(--granite); margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.ir-calc-cell .v em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-calc-cell .s {
  font-size: 12px; color: var(--fg3);
  letter-spacing: 0.04em;
}
.ir-calc-cell input[type=range] { width: 100%; margin-top: 14px; accent-color: var(--sage); }
.ir-calc-cell .out-large {
  font-family: var(--font-display); font-weight: 500;
  font-size: 52px; line-height: 1;
  color: var(--gold); letter-spacing: -0.01em;
}
.ir-calc-foot {
  border-top: 1px solid var(--stone-200);
  padding: 18px 28px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600; text-align: center;
}


/* Portal sign-in / sign-up panel — granite section, cream card. */
.ir-auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 880px;
  margin: 40px auto 0;
}
.ir-auth-card {
  background: var(--cream);
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  padding: 36px 32px 32px;
}
.ir-auth-card .eb {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 10px;
}
.ir-auth-card .eb::before { content: ""; width: 18px; height: 1px; background: var(--gold); }
.ir-auth-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 24px; line-height: 1.1;
  color: var(--granite); margin: 0 0 18px;
}
.ir-auth-card h3 em { font-style: italic; color: var(--gold); font-weight: 500; }
.ir-auth-card .field { display: block; margin-bottom: 12px; }
.ir-auth-card .field label {
  display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600; margin-bottom: 6px;
}
.ir-auth-card .field input {
  width: 100%; background: var(--cream-light);
  border: 1px solid var(--stone-200);
  padding: 12px 14px; border-radius: 2px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--granite); outline: none;
}
.ir-auth-card .field input:focus { border-color: var(--granite); background: #fff; }
.ir-auth-card button.submit {
  width: 100%; margin-top: 6px;
}
.ir-auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}
.ir-auth-divider::before,
.ir-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--stone-200);
}
.ir-auth-google {
  width: 100%; padding: 12px 18px;
  background: var(--cream); border: 1px solid var(--granite); border-radius: 2px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--granite); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 180ms ease, color 180ms ease;
}
.ir-auth-google:hover { background: var(--granite); color: var(--cream); }
.ir-auth-google svg { width: 16px; height: 16px; }
.ir-auth-help {
  margin-top: 14px;
  font-size: 12px; color: var(--fg3); text-align: center;
}
.ir-auth-help a { color: var(--gold-deep); font-weight: 600; }


@media (max-width: 900px) {
  .ir-contact-wrap { grid-template-columns: 1fr; }
  .ir-contact-form { padding: 36px 28px; }
  .ir-contact-form .field-grid { grid-template-columns: 1fr; }
  .ir-calc-grid { grid-template-columns: 1fr; }
  .ir-calc-cell { border-right: 0; border-bottom: 1px solid var(--stone-200); }
  .ir-auth-wrap { grid-template-columns: 1fr; }
}


/* ============================================================================
   COMMITMENT SECTION — NEW 2026-05-24
   ----------------------------------------------------------------------------
   Home-page section: 38% granite slab (signed owner commitment) + 62% cream
   area (7-hex flower honeycomb).
   ============================================================================ */

.ir-commitment {
  display: grid;
  /* MIRROR of hero: 22.5% granite on left, 77.5% cream on right */
  grid-template-columns: 22.5% 77.5%;
  min-height: 780px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

/* --- Left: granite slab — MATCHES .ir-hero-granite VISUAL HUE.
   Uses the same marble.png base + the same radial vignette geometry as
   the hero, but with a stronger 42% edge opacity to compensate for the
   fact that the hero's marble is mostly hidden behind hex photos
   (whereas the commitment marble is fully visible, so the bright center
   would otherwise read as warmer/brighter than the hero). Net visual
   hue across the two granite columns now matches.
   Locked 2026-05-24 for cross-section quality parity. */
.ir-commitment-granite {
  position: relative;
  background: url('/assets/marble.png') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 28px;
}
.ir-commitment-granite::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(29,24,28,0.0) 0%, rgba(29,24,28,0.42) 100%);
  pointer-events: none;
}
.ir-commitment-granite > * { position: relative; z-index: 1; }

.ir-commitment-title {
  font-family: var(--font-display);
  font-weight: 500;
  /* Scaled down so the headline reads cleanly in a 22.5% column */
  font-size: clamp(26px, 2.1vw, 36px);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--gold-light);
  margin: 0 0 14px;
}
.ir-commitment-title em {
  font-style: italic;
  background: linear-gradient(135deg, #d4ad75 0%, #a07b51 55%, #8a6638 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 500;
}

.ir-commitment-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-light);
  margin: 0 0 20px;
  letter-spacing: .01em;
}
.ir-commitment-signature::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold-light);
  vertical-align: middle;
  margin-right: 12px;
}

.ir-commitment-body p {
  color: var(--cream-deep);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.ir-commitment-body p strong { color: var(--cream); font-weight: 600; }
.ir-commitment-body p em { font-style: italic; color: var(--gold-light); font-weight: 500; }

.ir-commitment-seal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid rgba(193,160,123,.30);
}
.ir-commitment-seal-mark {
  width: 42px;
  height: calc(42px * .8660254);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: linear-gradient(135deg, #d4ad75, #8a6638);
  flex-shrink: 0;
  position: relative;
}
.ir-commitment-seal-mark::after {
  content: "J";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--granite);
}
.ir-commitment-seal-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--cream);
  line-height: 1.3;
}
.ir-commitment-seal-text small {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 3px;
}

.ir-commitment-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.ir-commitment-phone {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-light);
  text-decoration: none;
}
.ir-commitment-fineprint {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--granite-faint);
  font-weight: 500;
}

/* --- Right: cream area + 7-hex flower --- */
.ir-commitment-cream {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}
.ir-commitment-cream-head {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 520px;
}
.ir-commitment-cream-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  color: var(--granite);
  margin: 10px 0 0;
}
.ir-commitment-cream-head h3 em {
  font-style: italic;
  color: var(--gold);
}

/* 7-hex flower */
.ir-honeycomb-7 {
  --hex-w: clamp(168px, 16.8vw, 240px);   /* +20% (was 140 / 14vw / 200) */
  --hex-h: calc(var(--hex-w) * 0.8660254);
  --hex-gap: 17px;                        /* +20% (was 14) */
  --nbr-d: calc(var(--hex-h) + var(--hex-gap));
  --nbr-x: calc(var(--nbr-d) * 0.8660254);
  --nbr-y-half: calc(var(--nbr-d) * 0.5);
  position: relative;
  width: calc(2 * var(--nbr-x) + var(--hex-w));
  height: calc(2 * var(--nbr-d) + var(--hex-h));
  margin: 110px auto 0;
}
.ir-honeycomb-7 .hex {
  position: absolute;
  width: var(--hex-w);
  height: var(--hex-h);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}
.ir-honeycomb-7 .hex:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
  z-index: 2;
}
.ir-honeycomb-7 .hex .hx-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-color: var(--granite-soft);
}
.ir-honeycomb-7 .hex .hx-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  color: var(--cream);
  padding: 0 14px 22%;
  background: linear-gradient(180deg, rgba(29,24,28,0) 35%, rgba(29,24,28,.65) 100%);
  pointer-events: none;
}
.ir-honeycomb-7 .hex .hx-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-light);
  margin-bottom: 2px;
  letter-spacing: .01em;
}
.ir-honeycomb-7 .hex .hx-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.1;
  color: var(--cream);
}

/* center brand-mark hex — solid black with white logo (2026-05-27) */
.ir-honeycomb-7 .hex.is-brand .hx-img.is-gold {
  background: #000;
}
.ir-honeycomb-7 .hex.is-brand .hx-label.is-brand-label {
  background: none;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.ir-honeycomb-7 .hex.is-brand .brand-logo {
  width: 62%;
  height: auto;
  max-height: 62%;
  object-fit: contain;
  display: block;
}

/* 7-hex flower positions */
.ir-honeycomb-7 .hex.h-top    { left: var(--nbr-x);             top: 0; }
.ir-honeycomb-7 .hex.h-ur     { left: calc(2 * var(--nbr-x));   top: var(--nbr-y-half); }
.ir-honeycomb-7 .hex.h-lr     { left: calc(2 * var(--nbr-x));   top: calc(var(--nbr-d) + var(--nbr-y-half)); }
.ir-honeycomb-7 .hex.h-bot    { left: var(--nbr-x);             top: calc(2 * var(--nbr-d)); }
.ir-honeycomb-7 .hex.h-ll     { left: 0;                        top: calc(var(--nbr-d) + var(--nbr-y-half)); }
.ir-honeycomb-7 .hex.h-ul     { left: 0;                        top: var(--nbr-y-half); }
.ir-honeycomb-7 .hex.h-center { left: var(--nbr-x);             top: var(--nbr-d); }

/* Responsive — stack on tablet/mobile */
/* ============================================================================
   MOBILE PASS (Claude Design return, integrated + mapped to production classes)
   v4-sections.css loads LAST, so these win the cascade over the desktop
   .ir-process/.ir-honeycomb-7 rules above.
   ============================================================================ */

/* COMMITMENT — stack the granite/cream split; refit + center the 7-hex flower.
   The flower clipped off-screen for two non-obvious reasons:
   (1) grid children kept min-width:auto and refused to shrink below the
       fixed-width flower, blowing the column past the viewport;
   (2) .ir-commitment-cream is display:flex (default ROW), so the head + flower
       sat side-by-side and pushed the flower off-screen. Fix both. */
@media (max-width: 1100px) {
  .ir-commitment, .ir-commitment-split { grid-template-columns: 1fr; }
  .ir-commitment-granite, .ir-commitment-cream { width: 100%; min-width: 0; }
  .ir-commitment-cream { flex-direction: column; }
  .ir-commitment-granite { padding: 64px 32px; }
  .ir-commitment-cream { padding: 64px 24px; }
  .ir-commitment-cream-head { position: static; transform: none; margin: 0 auto 24px; }
  .ir-honeycomb-7 { margin: 28px auto 0; }
}
@media (max-width: 768px) {
  .ir-honeycomb-7 { --hex-w: clamp(98px, 30vw, 151px); --hex-gap: 11px; }   /* +20% */
  .ir-honeycomb-7 .hex .hx-name { font-size: clamp(13px, 3.4vw, 17px); }
  .ir-honeycomb-7 .hex .hx-num  { font-size: 11px; }
}

/* PROCESS — reflow the 5-hex horizontal chain into a centered vertical column
   + blurbs as a clean bordered list. Targets the production cell class
   (.ir-proc-cell, NOT the unused .ir-proc-cell-v2). */
@media (max-width: 1100px) {
  .ir-process {
    --hex-w: clamp(168px, 60vw, 220px);
    width: 100%; max-width: 380px; height: auto;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    margin-left: auto; margin-right: auto;
  }
  .ir-process .ir-proc-cell { position: relative; left: auto; top: auto; }
  .ir-process .ir-proc-1, .ir-process .ir-proc-2, .ir-process .ir-proc-3,
  .ir-process .ir-proc-4, .ir-process .ir-proc-5 { left: auto; top: auto; }
  .ir-process .ir-proc-blurbs {
    position: static; display: flex; flex-direction: column; gap: 0;
    grid-template-columns: 1fr; width: 100%; max-width: 380px;
    margin: 6px auto 0; padding-top: 0; border-top: 0;
  }
  .ir-process .ir-proc-blurb {
    padding: 15px 6px; border-bottom: 1px solid var(--stone-200); text-align: center;
  }
  .ir-process .ir-proc-blurb:last-child { border-bottom: 0; }
}

/* SERVICES — 6-hex cluster → 2-column honeycomb (3+3, half-row offset).
   Not on the homepage, but used on service pages that have .ir-services. */
@media (max-width: 768px) {
  .ir-services {
    --hex-w: clamp(138px, 42vw, 170px);
    --hex-h: calc(var(--hex-w) * 0.8660254);
    --hex-gap: 12px;
    --m-row:  calc(var(--hex-h) + var(--hex-gap));
    --m-colx: calc(var(--hex-w) * 0.75 + var(--hex-gap));
    --m-coly: calc(var(--hex-h) * 0.5 + var(--hex-gap) * 0.5);
    position: relative;
    width: calc(var(--m-colx) + var(--hex-w));
    height: calc(var(--m-coly) + 2 * var(--m-row) + var(--hex-h));
    margin-left: auto; margin-right: auto; transform: none;
  }
  .ir-services .ir-svc { width: var(--hex-w); height: var(--hex-h); }
  .ir-services .ir-svc-1 { left: 0;             top: 0; }
  .ir-services .ir-svc-2 { left: 0;             top: var(--m-row); }
  .ir-services .ir-svc-3 { left: 0;             top: calc(2 * var(--m-row)); }
  .ir-services .ir-svc-4 { left: var(--m-colx); top: var(--m-coly); }
  .ir-services .ir-svc-5 { left: var(--m-colx); top: calc(var(--m-coly) + var(--m-row)); }
  .ir-services .ir-svc-6 { left: var(--m-colx); top: calc(var(--m-coly) + 2 * var(--m-row)); }
}


/* ============================================================================
   HERO HEX — clickable + zoom affordance (2026-05-29)
   ============================================================================ */
.ir-hex-clickable {
  cursor: pointer;
  pointer-events: auto;
  outline: none;
}
.ir-hex-clickable .ir-hex-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29,24,28,0);
  color: var(--cream);
  opacity: 0;
  transition: opacity .25s ease, background .25s ease;
  pointer-events: none;
}
.ir-hex-clickable .ir-hex-zoom svg { width: 34px; height: 34px; }
.ir-hex-clickable:hover .ir-hex-zoom,
.ir-hex-clickable:focus-visible .ir-hex-zoom {
  opacity: 1;
  background: rgba(29,24,28,0.34);
}
.ir-hex-clickable:focus-visible {
  filter: drop-shadow(0 0 0 3px var(--gold));
}

/* ============================================================================
   PROJECT LIGHTBOX — Instagram-style HD viewer (2026-05-29)
   ============================================================================ */
.ir-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Fully visible whenever shown — no opacity dependency on a transition
     that could stall. Entrance polish lives on the card animation below. */
}
.ir-lightbox[hidden] { display: none; }

.ir-lightbox-scrim {
  position: absolute; inset: 0;
  background: rgba(20,17,15,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ir-lightbox-card {
  position: relative;
  z-index: 1;
  display: grid;
  /* Media column is landscape (~1.4:1) to match the project photos
     (≈1.49:1), so object-fit:cover crops only ~7% instead of a third.
     Panel stays ~400px for comfortable copy. */
  grid-template-columns: 1.95fr 1fr;
  width: min(1180px, 94vw);
  height: min(560px, 84vh);
  background: var(--cream);
  box-shadow: 0 40px 120px rgba(0,0,0,0.5);
  overflow: hidden;
  /* Entrance animation — runs once each time the lightbox is shown.
     Even if an animation clock stalls, the start frame is 92% visible. */
  animation: irLbCardIn .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes irLbCardIn {
  from { opacity: 0.6; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1;   transform: none; }
}

.ir-lightbox-media {
  position: relative;
  background: #0a0807;
  overflow: hidden;
}
.ir-lightbox-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.ir-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,238,228,0.9);
  color: var(--granite);
  border: none;
  cursor: pointer;
  transition: background .2s ease;
}
.ir-lightbox-nav svg { width: 22px; height: 22px; }
.ir-lightbox-nav:hover { background: var(--sage); }
.ir-lightbox-prev { left: 16px; }
.ir-lightbox-next { right: 16px; }

.ir-lightbox-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,17,15,0.55);
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: background .2s ease;
}
.ir-lightbox-close svg { width: 20px; height: 20px; }
.ir-lightbox-close:hover { background: var(--granite); }

.ir-lightbox-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 40px 32px;
}
.ir-lightbox-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.ir-lightbox-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.12;
  color: var(--granite);
  margin: 0 0 16px;
}
.ir-lightbox-caption {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--granite-mute);
  margin: 0;
}
.ir-lightbox-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.ir-lightbox-dots {
  display: flex;
  gap: 8px;
}
.ir-lightbox-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--stone-300);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, width .2s ease;
}
.ir-lightbox-dot.is-active {
  background: var(--sage);
  width: 22px;
  border-radius: 4px;
}

/* Responsive — stack image over text on mobile */
@media (max-width: 760px) {
  .ir-lightbox-card {
    grid-template-columns: 1fr;
    grid-template-rows: 1.1fr auto;
    height: min(88vh, 760px);
    width: 94vw;
  }
  .ir-lightbox-panel { padding: 24px 22px 26px; }
  .ir-lightbox-title { font-size: 24px; }
  .ir-lightbox-caption { font-size: 14px; }
}


/* ============================================================
   PORTFOLIO GALLERY — left stage + right folder rail (V4)
   ============================================================ */
.ir-gallery { padding-top: 8px; }
.ir-gallery-head { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.ir-gallery-head .ir-eyebrow { justify-content: center; margin-bottom: 16px; }
.ir-gallery-head .ir-h2 { margin: 0 0 12px; }
.ir-gallery-head .ir-lead { margin: 0 auto; }

.ir-gallery-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

/* ---- Stage (left) ---- */
.ir-gal-stage {
  display: flex;
  flex-direction: column;
  background: var(--granite, #1d181c);
  box-shadow: 0 30px 80px rgba(0,0,0,0.28);
  overflow: hidden;
  min-width: 0;
}
.ir-gal-stage-media {
  position: relative;
  background: #0a0807;
  height: min(560px, 62vh);
  overflow: hidden;
}
.ir-gal-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .28s ease;
}
.ir-gal-stage:not(.is-cover) .ir-gal-img { cursor: pointer; }
.ir-gal-img.is-swapping { opacity: .25; }

.ir-gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,238,228,0.92);
  color: var(--granite, #1d181c);
  border: none; cursor: pointer;
  font-size: 26px; line-height: 1;
  transition: background .2s ease, opacity .2s ease;
  z-index: 2;
}
.ir-gal-nav:hover { background: var(--sage, #a4b576); }
.ir-gal-nav:disabled { opacity: 0; pointer-events: none; }
.ir-gal-prev { left: 16px; }
.ir-gal-next { right: 16px; }

.ir-gal-counter {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(20,17,15,0.62);
  color: var(--cream, #efe9de);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  z-index: 2;
}
.ir-gal-hint {
  position: absolute; bottom: 16px; left: 16px;
  background: var(--sage, #a4b576);
  color: var(--granite, #1d181c);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; z-index: 2;
}

.ir-gal-caption-bar {
  padding: 18px 24px 20px;
  background: var(--granite, #1d181c);
  border-top: 1px solid rgba(160,123,81,0.28);
}
.ir-gal-cap-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-light, #c1a07b);
  margin-bottom: 7px;
}
.ir-gal-cap-text {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 19px; line-height: 1.4;
  color: var(--cream, #efe9de);
  min-height: 1.4em;
}

/* ---- Rail (right) ---- */
.ir-gal-rail {
  display: flex; flex-direction: column;
  background: var(--cream, #efe9de);
  border: 1px solid var(--stone-200, #d9cfbf);
  min-width: 0;
}
.ir-gal-rail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stone-200, #d9cfbf);
  background: var(--cream, #efe9de);
  flex: 0 0 auto;
}
.ir-gal-back {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--granite-mute, #6b6258);
  background: transparent; border: 1px solid var(--stone-200, #d9cfbf);
  padding: 6px 11px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.ir-gal-back:hover { border-color: var(--gold, #a07b51); color: var(--granite, #1d181c); }
.ir-gal-crumb {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 19px; font-weight: 500;
  color: var(--granite, #1d181c);
  line-height: 1.1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.ir-gal-crumb-sep { color: var(--gold, #a07b51); margin: 0 2px; }

.ir-gal-rail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* chip list (services + jobs) */
.ir-gal-list { display: flex; flex-direction: column; }
.ir-gal-chip {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  border-bottom: 1px solid var(--stone-200, #d9cfbf);
  padding: 12px 14px; cursor: pointer;
  transition: background .15s ease;
}
.ir-gal-chip:last-child { border-bottom: none; }
.ir-gal-chip:hover { background: rgba(160,123,81,0.09); }
.ir-gal-chip-cover {
  flex: 0 0 auto;
  width: 80px; height: 60px;
  background: var(--granite, #1d181c);
  overflow: hidden;
}
.ir-gal-chip-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ir-gal-chip-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ir-gal-chip-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px; font-weight: 500; line-height: 1.15;
  color: var(--granite, #1d181c);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ir-gal-chip-sub {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.3;
  color: var(--granite-mute, #6b6258);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ir-gal-chip-meta {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold, #a07b51);
}
.ir-gal-chip-go {
  flex: 0 0 auto; font-size: 22px; line-height: 1;
  color: var(--stone-300, #c9bda9);
  transition: color .15s ease, transform .15s ease;
}
.ir-gal-chip:hover .ir-gal-chip-go { color: var(--gold, #a07b51); transform: translateX(3px); }

/* job card (photos view header) */
.ir-gal-jobcard {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--stone-200, #d9cfbf);
}
.ir-gal-jobcard-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #a07b51); margin-bottom: 8px;
}
.ir-gal-jobcard-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 24px; font-weight: 500; line-height: 1.12;
  color: var(--granite, #1d181c); margin-bottom: 8px;
}
.ir-gal-jobcard-blurb {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
  color: var(--granite-mute, #6b6258); margin: 0;
}
.ir-gal-thumbs-label {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--granite-mute, #6b6258);
  padding: 12px 16px 6px;
}
.ir-gal-thumbs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 4px 14px 14px;
}
.ir-gal-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0; border: none; cursor: pointer;
  background: var(--granite, #1d181c);
  overflow: hidden; opacity: 0.6;
  transition: opacity .15s ease, outline-color .15s ease;
}
.ir-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ir-gal-thumb:hover { opacity: 0.9; }
.ir-gal-thumb.is-active {
  opacity: 1;
  outline: 3px solid var(--sage, #a4b576);
  outline-offset: -3px;
}

/* next-project footer */
.ir-gal-nextproj {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  background: var(--granite, #1d181c); color: var(--cream, #efe9de);
  border: none; cursor: pointer;
  padding: 14px 16px; margin-top: 4px;
  transition: background .15s ease;
}
.ir-gal-nextproj:hover { background: #2a2420; }
.ir-gal-nextproj .np-eyebrow {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-light, #c1a07b);
}
.ir-gal-nextproj .np-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px; font-weight: 500;
}
.ir-gal-err { padding: 24px; color: var(--granite-mute, #6b6258); font-family: var(--font-body); }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .ir-gallery-shell { grid-template-columns: 1fr; gap: 0; }
  .ir-gal-stage-media { height: min(440px, 56vh); }
  .ir-gal-rail { border-top: none; max-height: 520px; }
}
@media (max-width: 520px) {
  .ir-gal-stage-media { height: 320px; }
  .ir-gal-chip-cover { width: 68px; height: 51px; }
  .ir-gal-thumbs { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   HOMEPAGE — FEATURED PROJECTS SLIDESHOW (replaces hex masonry)
   ============================================================ */
.ir-fslide { max-width: 1180px; margin: 0 auto; }

.ir-fslide-stage {
  position: relative;
  height: min(600px, 64vh);
  background: #0a0807;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.28);
}
.ir-fslide-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  cursor: pointer;
  transition: opacity .3s ease;
}
.ir-fslide-img.is-swapping { opacity: .25; }

.ir-fslide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 64px 44px 34px;
  background: linear-gradient(to top, rgba(20,17,15,0.84) 0%, rgba(20,17,15,0.5) 42%, rgba(20,17,15,0) 100%);
  pointer-events: none;
}
.ir-fslide-eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-light, #c1a07b); margin-bottom: 10px;
}
.ir-fslide-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 500; font-size: clamp(28px, 4vw, 46px); line-height: 1.04;
  color: var(--cream, #efe9de); margin: 0;
}

.ir-fslide-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,238,228,0.92);
  color: var(--granite, #1d181c);
  border: none; cursor: pointer;
  font-size: 28px; line-height: 1; z-index: 2;
  transition: background .2s ease;
}
.ir-fslide-nav:hover { background: var(--sage, #a4b576); }
.ir-fslide-prev { left: 18px; }
.ir-fslide-next { right: 18px; }

.ir-fslide-counter {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(20,17,15,0.6);
  color: var(--cream, #efe9de);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; padding: 6px 12px;
}

.ir-fslide-thumbs {
  display: flex; gap: 10px;
  margin-top: 14px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: thin;
}
.ir-fslide-thumb {
  position: relative; flex: 0 0 auto;
  width: 132px; height: 88px;
  background: var(--granite, #1d181c);
  border: none; padding: 0; cursor: pointer;
  overflow: hidden; opacity: 0.55;
  transition: opacity .15s ease;
}
.ir-fslide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ir-fslide-thumb:hover { opacity: 0.85; }
.ir-fslide-thumb.is-active {
  opacity: 1;
  outline: 3px solid var(--sage, #a4b576);
  outline-offset: -3px;
}

.ir-fslide-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; text-align: center;
  margin-top: 28px;
}
.ir-fslide-cta p {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--granite-mute, #6b6258); margin: 0;
}

@media (max-width: 760px) {
  .ir-fslide-stage { height: min(420px, 56vh); }
  .ir-fslide-cap { padding: 48px 22px 24px; }
  .ir-fslide-thumb { width: 104px; height: 70px; }
}