/*
Theme Name: NatMar Theme
Description: NatMar Steel Building Construction — gorpcore industrial design
Template: siteforge-theme
Version: 2.0.31
Author: BlueCrane Venture Studio
*/

/* ═══════════════════════════════════════════
   CSS VARIABLES & RESET
   ═══════════════════════════════════════════ */
:root {
  --snowfield: #FAFAFA;
  --obsidian: #1E1E1E;
  --volt: #7AEF00;
  --trail-green: #48AD17;
  --sage-wash: #BAC7BA;
  --slate-creek: #5E8A9D;
  --n900: #111111;
  --n700: #2A2A2A;
  --n600: #3D3D3D;
  --n500: #6B6B6B;
  --n400: #9A9A9A;
  --n300: #C4C4C4;
  --n200: #E0E0E0;
  --n100: #F0F0F0;
  --neo-dark-shadow: rgba(0,0,0,0.55);
  --neo-light-shadow: rgba(60,60,60,0.25);
  --neo-inset-dark: rgba(0,0,0,0.5);
  --neo-inset-light: rgba(80,80,80,0.15);
  --earth-warm: #8B7355;
  --earth-clay: #6B5B4E;
  --earth-moss: #4A5C3E;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--obsidian);
  color: var(--snowfield);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   NOISE & TEXTURE OVERLAYS
   ═══════════════════════════════════════════ */
.texture-concrete { position: relative; }
.texture-concrete::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.texture-topo { position: relative; }
.texture-topo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo' patternUnits='userSpaceOnUse' width='400' height='400'%3E%3Cpath d='M0 200 Q100 180 200 200 T400 200' fill='none' stroke='%232A2A2A' stroke-width='0.5'/%3E%3Cpath d='M0 220 Q100 195 200 220 T400 220' fill='none' stroke='%232A2A2A' stroke-width='0.4'/%3E%3Cpath d='M0 180 Q100 165 200 180 T400 180' fill='none' stroke='%232A2A2A' stroke-width='0.4'/%3E%3Cpath d='M0 240 Q100 210 200 240 T400 240' fill='none' stroke='%232A2A2A' stroke-width='0.3'/%3E%3Cpath d='M0 160 Q100 145 200 160 T400 160' fill='none' stroke='%232A2A2A' stroke-width='0.3'/%3E%3Cpath d='M0 260 Q80 230 180 260 T400 260' fill='none' stroke='%232A2A2A' stroke-width='0.3'/%3E%3Cpath d='M0 140 Q120 120 220 140 T400 140' fill='none' stroke='%232A2A2A' stroke-width='0.25'/%3E%3Cpath d='M0 100 Q140 80 250 100 T400 100' fill='none' stroke='%232A2A2A' stroke-width='0.2'/%3E%3Cpath d='M0 300 Q100 270 250 300 T400 300' fill='none' stroke='%232A2A2A' stroke-width='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23topo)' width='400' height='400'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Light-bg topo pattern — uses subtle green-grey lines */
.texture-topo-light { position: relative; }
.texture-topo-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo' patternUnits='userSpaceOnUse' width='400' height='400'%3E%3Cpath d='M0 200 Q100 180 200 200 T400 200' fill='none' stroke='%23A8ACA5' stroke-width='0.5'/%3E%3Cpath d='M0 220 Q100 195 200 220 T400 220' fill='none' stroke='%23A8ACA5' stroke-width='0.4'/%3E%3Cpath d='M0 180 Q100 165 200 180 T400 180' fill='none' stroke='%23A8ACA5' stroke-width='0.4'/%3E%3Cpath d='M0 240 Q100 210 200 240 T400 240' fill='none' stroke='%23A8ACA5' stroke-width='0.3'/%3E%3Cpath d='M0 160 Q100 145 200 160 T400 160' fill='none' stroke='%23A8ACA5' stroke-width='0.3'/%3E%3Cpath d='M0 260 Q80 230 180 260 T400 260' fill='none' stroke='%23A8ACA5' stroke-width='0.3'/%3E%3Cpath d='M0 140 Q120 120 220 140 T400 140' fill='none' stroke='%23A8ACA5' stroke-width='0.25'/%3E%3Cpath d='M0 100 Q140 80 250 100 T400 100' fill='none' stroke='%23A8ACA5' stroke-width='0.2'/%3E%3Cpath d='M0 300 Q100 270 250 300 T400 300' fill='none' stroke='%23A8ACA5' stroke-width='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23topo)' width='400' height='400'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════
   MOUNTAIN RIDGE DIVIDERS
   ═══════════════════════════════════════════ */
.ridge-divider {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 5;
  padding-top: clamp(2.5rem, 6.7vh, 5.9rem);
  background: transparent !important;
  margin-bottom: -56px !important;
}
.ridge-divider svg { width: 100%; height: 56px; display: block; }

/* ═══════════════════════════════════════════
   NEOMORPHIC UTILITIES
   ═══════════════════════════════════════════ */
.neo-raised {
  background: var(--n700);
  box-shadow: 6px 6px 14px var(--neo-dark-shadow), -4px -4px 10px var(--neo-light-shadow);
  border: 1px solid rgba(255,255,255,0.03);
}
.neo-raised-light {
  background: #FFFFFF;
  box-shadow: none;
  border: 1px solid #C4C4C4;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */
.font-display {
  font-family: 'Anybody', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
.overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--volt);
}

/* ═══════════════════════════════════════════
   NAVIGATION (legacy mockup nav)
   ═══════════════════════════════════════════ */
/* This rule used to target the bare `nav` element — too broad.
   It was clobbering every <nav> on the page including the new
   .natmar-seqnav slim bars (giving them position:fixed and blank
   content). Scoped to the legacy .site-header > nav and
   .natmar-mockup-nav classes only. */
.site-header > nav,
nav.natmar-mockup-nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  padding: 0 48px; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(17,17,17,0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-logo {
  font-family: 'Anybody', sans-serif; font-weight: 900; font-size: 1.35rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--snowfield);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.nav-logo .slash {
  display: inline-block; width: 3px; height: 22px;
  background: var(--volt); transform: skewX(-16deg);
}
.nav-links {
  display: flex; align-items: center; gap: 36px; list-style: none;
}
.nav-links a {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--n400); text-decoration: none; transition: color 0.2s; position: relative;
}
.nav-links a:hover { color: var(--snowfield); }
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--volt);
  transition: width 0.3s cubic-bezier(0,0,0.2,1);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 10px 22px; background: var(--volt); color: var(--obsidian);
  text-decoration: none; border-radius: 3px; transition: all 0.2s;
  box-shadow: 0 0 0 rgba(122,239,0,0), 3px 3px 8px rgba(0,0,0,0.4);
}
.nav-cta:hover {
  background: var(--trail-green); color: var(--snowfield);
  box-shadow: 0 0 20px rgba(122,239,0,0.2), 3px 3px 8px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 48px 0;
  position: relative;
  overflow: hidden;
  background: var(--n900);
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(122,239,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,239,0,0.03) 1px, transparent 1px);
  background-size: 80px 80px; z-index: 1;
}
.hero-gradient {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 60%;
  background: linear-gradient(to top, var(--n900), transparent); z-index: 2;
}
.hero-accent-line {
  display: none; /* Removed — was causing animated green bar artifact */
}
.hero-content {
  /* Wider container (1320px, was 1100px → +20%) so the 5-star value
     never wraps and the headline + meta stats sit further left,
     aligning with the wide section content of the rest of the page.
     The other rule lower in this file (line ~835) is also bumped to
     match — both must agree because of CSS source-order specificity. */
  position: relative;
  z-index: 10;
  max-width: 1320px;
  margin: 0 auto 40px 0;   /* left-anchored, no auto-center on the left */
  width: 100%;
}
.hero-overline {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.hero-overline .line { width: 48px; height: 1px; background: var(--volt); }

.hero h1 {
  font-size: clamp(3.2rem, 7.5vw, 7rem); margin-bottom: 28px; color: var(--snowfield);
}
.hero h1 .accent { color: var(--volt); }
.hero h1 .thin {
  font-family: 'Outfit', sans-serif; font-weight: 300; font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: 0.45em;
  display: block; color: var(--n400); line-height: 1.4; margin-top: 8px;
}

.hero-meta {
  display: flex; align-items: flex-start; gap: 40px; margin-bottom: 36px;
  max-width: 520px;
}
.hero-meta.wp-block-columns {
  gap: 32px !important;
  max-width: 520px;
  align-items: flex-start !important;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-item .value {
  font-family: 'Anybody', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--volt);
}
.hero-meta-item .label {
  font-family: 'DM Mono', monospace; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--n500);
}
.hero-meta-divider { width: 1px; height: 40px; background: var(--n600); }

.hero-actions { display: flex; gap: 16px; align-items: center; }

/* Mockup button styles — scoped to <a> tags only (not WP wrapper divs) */
a.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 16px 32px; background: var(--volt); color: var(--obsidian);
  text-decoration: none; border: none; border-radius: 4px; cursor: pointer;
  transition: all 0.25s;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -2px -2px 6px rgba(122,239,0,0.08);
}
a.btn-primary:hover {
  background: var(--trail-green); color: var(--snowfield);
  box-shadow: 4px 4px 12px rgba(0,0,0,0.5), 0 0 24px rgba(122,239,0,0.18);
  transform: translateY(-1px);
}
.btn-primary .arrow, .wp-block-button .arrow { font-size: 1.1em; transition: transform 0.2s; }
a.btn-primary:hover .arrow { transform: translateX(3px); }

a.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 16px 32px; background: transparent; color: var(--snowfield);
  text-decoration: none; border: 1px solid var(--n600); border-radius: 4px;
  cursor: pointer; transition: all 0.25s;
}
a.btn-secondary:hover { border-color: var(--snowfield); background: rgba(250,250,250,0.04); }

/* ═══════════════════════════════════════════
   TRUST BAR — pinned inside hero bottom
   ═══════════════════════════════════════════ */
.trust-bar {
  padding: 20px 48px;
  background: rgba(17,17,17,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--n700);
  display: flex; align-items: center; justify-content: center; gap: 48px;
  z-index: 10;
  margin: 0 -48px;
  width: calc(100% + 96px);
}
.trust-item { display: flex; align-items: center; gap: 11px; }
.trust-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
  box-shadow: inset 3px 3px 6px var(--neo-inset-dark), inset -2px -2px 4px var(--neo-inset-light);
  background: var(--n700);
}
.trust-text {
  font-family: 'Outfit', sans-serif; font-size: 0.76rem; font-weight: 500; color: var(--n400);
}
.trust-text strong { color: var(--snowfield); font-weight: 600; }

/* ═══════════════════════════════════════════
   SECTION SHARED
   ═══════════════════════════════════════════ */
section { position: relative; }
.section-padding {
  padding-top: var(--wp--preset--spacing--section-tight);
  padding-bottom: var(--wp--preset--spacing--section-tight);
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}
.section-header { margin-bottom: 64px; position: relative; z-index: 5; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 16px; }
/* Default section-header subtitle color uses ink-muted (#3F413B) which
   reads cleanly on the new stone/pumice backgrounds. Sections that sit
   on dark backgrounds (stats, hero) override this with snowfield/n400. */
.section-header p { max-width: 55ch; color: #3F413B; font-size: 1rem; line-height: 1.7; }
.stats-section .section-header p,
.hero .section-header p {
  color: var(--n400); /* light grey, readable on dark */
}

/* ═══════════════════════════════════════════
   BUILDING TYPES GRID
   Section bands LIGHT (stone). Cards stay DARK obsidian for contrast +
   industrial seriousness. Heading + body text overridden to carbon.
   ═══════════════════════════════════════════ */
.building-types {
  background: #EAECE8; /* stone — see also: var(--wp--preset--color--stone) */
  padding: clamp(110px, 12vw, 176px) clamp(24px, 5vw, 64px);
}
.building-types .section-header h2,
.building-types .section-header .overline + h2,
.building-types h2.wp-block-heading {
  color: #1E201D; /* carbon */
}
.building-types .section-header p {
  color: #3F413B; /* weathered as muted body text on light */
}
.building-types .section-header .overline {
  color: #48AD17; /* trail-green works on light */
}

.types-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; max-width: 1200px; position: relative; z-index: 5;
}

.type-card {
  border-radius: 8px; position: relative; overflow: hidden; cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25,0.1,0.25,1);
  display: flex; flex-direction: column; min-height: 360px;
}
.type-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(145deg, rgba(42,42,42,0.6), rgba(17,17,17,0.9));
  z-index: 1; transition: opacity 0.3s;
}
.type-card:hover::before { opacity: 0.7; }
.type-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 20px var(--neo-dark-shadow), -4px -4px 12px var(--neo-light-shadow), 0 0 30px rgba(122,239,0,0.06);
}

/* Photo placeholder (top of every card) — plain white inside the dark
   card frame. Real photos will replace .photo-placeholder later. */
.type-card .card-photo {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 200px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 0;
}
.type-card .card-photo .photo-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #FFFFFF;
  position: relative;
}
.type-card .card-photo .photo-icon {
  display: none; /* hide emoji icon, plain white box per design direction */
}
.type-card .card-photo .photo-label {
  font-family: 'DM Mono', monospace; font-size: 0.55rem;
  text-transform: uppercase; letter-spacing: 0.18em; color: #C4C4C4;
}
.type-card .card-photo .photo-placeholder::before,
.type-card .card-photo .photo-placeholder::after {
  display: none;
}

/* Card content area */
.type-card-content { position: relative; z-index: 5; padding: 16px 16px 20px; }
.type-card h3 {
  font-family: 'Anybody', sans-serif; font-weight: 800; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 8px;
  color: #FAFAFA;
}
.type-card .desc { font-size: 0.82rem; color: var(--snowfield, #FAFAFA); line-height: 1.5; opacity: 0.85; }

.type-card .card-arrow {
  position: absolute; top: 20px; right: 20px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--n700);
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.35), inset -2px -2px 4px rgba(80,80,80,0.1);
  color: var(--n500); font-size: 0.85rem; transition: all 0.3s;
}
.type-card:hover .card-arrow {
  background: var(--volt); color: var(--obsidian);
  box-shadow: 0 0 12px rgba(122,239,0,0.25);
}

/* BG patterns — cards 3-6 only (Storage, Barndo, Workshop, Custom) */
.type-card .card-bg-pattern {
  position: absolute; inset: 0; z-index: 0; opacity: 0.06;
}
.type-card:nth-child(3) .card-bg-pattern {
  background: radial-gradient(circle at 80% 20%, var(--slate-creek) 0%, transparent 50%);
  opacity: 0.1;
}
.type-card:nth-child(4) .card-bg-pattern {
  background: repeating-linear-gradient(90deg, transparent, transparent 40px, var(--volt) 40px, var(--volt) 41px);
}
.type-card:nth-child(5) .card-bg-pattern {
  background: repeating-linear-gradient(60deg, transparent, transparent 25px, var(--slate-creek) 25px, var(--slate-creek) 26px);
}
.type-card:nth-child(6) .card-bg-pattern {
  background: radial-gradient(circle at 20% 80%, var(--volt) 0%, transparent 40%);
  opacity: 0.08;
}

/* ═══════════════════════════════════════════
   PROCESS / SERVICES
   Light banding: pumice (slightly darker than building-types stone)
   creates subtle within-light alternation between adjacent sections.
   ═══════════════════════════════════════════ */
.process-section {
  background: #DCDFD9; /* pumice */
  color: #1E201D;      /* carbon */
  padding: clamp(110px, 12vw, 176px) clamp(24px, 5vw, 64px);
}

.process-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px;
}
.process-card { border-radius: 10px; padding: 40px 32px; transition: all 0.3s; }
.process-card .step-num {
  font-family: 'Anybody', sans-serif; font-weight: 900; font-size: 3.5rem;
  line-height: 1; color: var(--n200); margin-bottom: 20px; transition: color 0.3s;
}
.process-card:hover .step-num { color: var(--trail-green); }
.process-card h3 {
  font-family: 'Anybody', sans-serif; font-weight: 800; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; color: var(--obsidian);
}
.process-card p { font-size: 0.88rem; color: var(--n500); line-height: 1.65; }
.process-card .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.process-card .mini-tag {
  font-family: 'DM Mono', monospace; font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 4px 10px; border-radius: 3px; color: var(--n500);
  background: var(--n100);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.05), inset -2px -2px 3px rgba(255,255,255,0.7);
}

/* ═══════════════════════════════════════════
   STATS — mid-tone bridge section
   Weathered grey-stone background. Volt counters glow against it.
   This is one of the three "darker" beats in the page rhythm.
   ═══════════════════════════════════════════ */
.stats-section {
  background: #4F524C; /* weathered */
  padding: clamp(110px, 12vw, 176px) clamp(24px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto; position: relative; z-index: 5;
}
.stat-block {
  text-align: center; padding: 36px 20px; border-radius: 8px; background: var(--n700);
  box-shadow: 6px 6px 16px rgba(0,0,0,0.5), -4px -4px 10px rgba(60,60,60,0.15);
  border: 1px solid rgba(255,255,255,0.03);
}
.stat-value {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3rem); color: var(--volt); line-height: 1; margin-bottom: 8px;
}
.stat-label {
  font-family: 'DM Mono', monospace; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--n500);
}

/* ═══════════════════════════════════════════
   WHY STEEL — light section, dark spec cards
   Stone background lets the dark steel cards anchor the spec comparison
   while keeping the section as a whole readable for long reads.
   ═══════════════════════════════════════════ */
.why-steel {
  background: #EAECE8; /* stone */
}
.why-steel .section-header h2,
.why-steel h2.wp-block-heading {
  color: #1E201D;
}
.why-steel .section-header p {
  color: #3F413B;
}
.why-steel .section-header .overline {
  color: #48AD17;
}
.steel-comparison {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px;
}
.steel-card {
  border-radius: 8px; padding: 36px 28px; position: relative; overflow: hidden; transition: all 0.3s;
}
.steel-card .card-stripe {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%; transition: width 0.3s;
}
.steel-card:hover .card-stripe { width: 6px; }
.steel-card:nth-child(1) .card-stripe { background: var(--volt); }
.steel-card:nth-child(2) .card-stripe { background: var(--trail-green); }
.steel-card:nth-child(3) .card-stripe { background: var(--slate-creek); }

.steel-card .steel-type-label {
  font-family: 'DM Mono', monospace; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--n500); margin-bottom: 8px;
}
.steel-card h3 {
  font-family: 'Anybody', sans-serif; font-weight: 800; font-size: 1.35rem;
  text-transform: uppercase; margin-bottom: 16px;
}
.steel-card .spec-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.steel-card .spec-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; padding-bottom: 10px; border-bottom: 1px solid var(--n600);
}
.steel-card .spec-key {
  font-family: 'DM Mono', monospace; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--n500);
}
.steel-card .spec-val {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.82rem; color: var(--snowfield);
}
.steel-card .best-for {
  margin-top: 20px; padding: 14px 16px; border-radius: 6px;
  background: rgba(0,0,0,0.25);
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(60,60,60,0.08);
}
.steel-card .best-for-label {
  font-family: 'DM Mono', monospace; font-size: 0.58rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--volt); margin-bottom: 6px;
}
.steel-card .best-for p { font-size: 0.78rem; color: var(--n300); line-height: 1.5; }

/* ═══════════════════════════════════════════
   CTA — full dark close (obsidian) into the footer
   Reverted from the weathered mid-tone experiment per user request:
   keep the page closing as a single deep dark moment that flows
   straight into the dark footer.
   ═══════════════════════════════════════════ */
.cta-section {
  padding: 100px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: #1E1E1E; /* obsidian */
}
.cta-section .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-section .cta-bg::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(122,239,0,0.06) 0%, transparent 70%); border-radius: 50%;
}
.cta-content { position: relative; z-index: 5; }
.cta-section h2 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 16px; }
.cta-section .subtitle {
  font-family: 'DM Mono', monospace; font-size: 0.85rem; color: var(--n400);
  letter-spacing: 0.04em; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto;
}
.cta-buttons { display: flex; gap: 16px; justify-content: center; }

/* ═══════════════════════════════════════════
   METAL TEXTURE ACCENT
   ═══════════════════════════════════════════ */
.metal-accent { position: relative; }
.metal-accent::after {
  content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 100%;
  background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(186,199,186,0.015) 2px, rgba(186,199,186,0.015) 3px);
  z-index: 0; pointer-events: none;
}

/* ═══════════════════════════════════════════
   PROJECT STRIP — light stone background, dark photo frames
   Each thumbnail is wrapped in a dark obsidian frame (the .project-thumb)
   that contains a white placeholder box (.thumb-inner) which will later
   hold the real building photo. The frame remains constant when photos
   are added — just swap the inner.
   ═══════════════════════════════════════════ */
.project-strip {
  background: #DCDFD9; /* pumice — matches process section */
  padding: clamp(110px, 12vw, 176px) clamp(24px, 5vw, 64px);
  color: #1E201D;      /* carbon */
  position: relative;
}
.project-strip .section-header h2 {
  color: #1E201D;
}
.project-strip .section-header p {
  color: #3F413B;
}
.project-strip .section-header .overline {
  color: #48AD17;
}

.projects-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
}

/* The dark frame — wraps the photo or placeholder.
   Constant element. Real photos will fit inside via .thumb-inner. */
.project-thumb {
  aspect-ratio: 1/1;
  background: #1E1E1E;          /* obsidian frame */
  border: 1px solid #2A2A2A;    /* n700 hairline border */
  padding: 14px;                /* breathing room around the photo */
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.project-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}

/* The inside of the frame — currently a plain white placeholder.
   When real photos arrive, swap this for an <img> with the same dimensions
   and the dark frame will continue to wrap it correctly. */
.project-thumb .thumb-inner {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #C4C4C4; /* n300 — quiet placeholder text */
  margin: 0;
}
.project-thumb { margin: 0; }

/* Caption row sits beneath the projects-row grid, mirrors the 4-column
   layout so each caption aligns under its frame. */
.projects-captions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 16px auto 0;
}
.project-caption {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #3F413B; /* weathered as muted body */
  text-align: center;
  line-height: 1.4;
}

/* Photo placeholder helper — used by the natmar-photo-frame component.
   Displays "PHOTO PLACEHOLDER" centered until the real image is added. */
.natmar-photo-frame {
  background: transparent;
  padding: 0;
  display: block;
  position: relative;
  border-left: 3px solid #7AEF00;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  transition: transform 0.3s;
}
.natmar-photo-frame:hover {
  transform: translateY(-3px);
}
.natmar-photo-frame .natmar-photo-inner {
  width: 100%;
  background: #2A2A2A;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #C4C4C4;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.natmar-photo-frame .natmar-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.natmar-photo-frame .natmar-photo-caption {
  display: block;
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #FAFAFA;
  text-align: center;
}
/* Aspect-ratio variants for different framings */
.natmar-photo-frame.is-wide .natmar-photo-inner { aspect-ratio: 16 / 9; }
.natmar-photo-frame.is-portrait .natmar-photo-inner { aspect-ratio: 3 / 4; }
.natmar-photo-frame.is-square .natmar-photo-inner { aspect-ratio: 1 / 1; }
/* .thumb-overlay removed — captions now live in a separate row beneath
   the projects-row grid (see .projects-captions) and are visible always
   instead of hover-only. */

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
/* The site-footer-wrap is the FSE template-part wrapper. The actual visible
   footer styling lives on .footer-grid and .footer-bottom which are children. */
footer.site-footer-wrap,
.wp-block-template-part footer.site-footer-wrap,
footer.wp-block-template-part {
  background: var(--obsidian);
  border-top: 1px solid var(--n700);
  padding: 80px clamp(32px, 6vw, 96px) 48px;
  width: 100%;
}

/* Override WP's flex-based wp-block-columns layout with our CSS Grid so the
   columns sit predictably at the widths we want. wp-block-columns adds
   `is-layout-flex` which would otherwise win on specificity. */
.wp-block-columns.footer-grid,
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto 56px;
  width: 100%;
}

/* Allow grid children to shrink properly — wp-block-column applies
   min-width: 0 only sometimes, so be explicit. */
.footer-grid > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand .brand-name {
  font-family: 'Anybody', sans-serif; font-weight: 900; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.footer-brand .brand-tagline {
  font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--n500); letter-spacing: 0.06em;
  margin: 0;
}
.footer-brand .brand-desc {
  font-size: 0.82rem; color: var(--n400); max-width: 320px; line-height: 1.6;
  margin: 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-col h4 {
  font-family: 'DM Mono', monospace; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--n500);
  margin: 0 0 20px 0;
  font-weight: 500;
}
/* Stacked footer column hosts two submenus (Services + Resources). The
   second h4 needs top breathing room so it visually separates from the
   list above it. */
.footer-col.footer-col-stack h4 + ul + h4,
.footer-col.footer-col-stack h4 + .wp-block-list + h4,
.footer-col.footer-col-stack h4 + .footer-nav-list + h4 {
  margin-top: 32px;
}
/* Footer link list — same visual treatment whether old <ul> or new wp:list */
.footer-col ul,
.footer-col .footer-nav-list,
.footer-col .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.footer-col ul li,
.footer-col .footer-nav-list li,
.footer-col .wp-block-list li {
  margin: 0;
  padding: 0;
  white-space: nowrap;       /* prevent mid-link wrap on labels like "Building Erection" */
  overflow: visible;
}
.footer-col a {
  font-size: 0.875rem;
  color: var(--n400);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
}
.footer-col a:hover { color: var(--volt); }

.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--n700);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom .footer-copyright {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.footer-copyright {
  font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--n600); letter-spacing: 0.06em;
}
/* Desktop: keep the full sentence on one line. Below 720px the copyright
   may wrap (acceptable on mobile). */
@media (min-width: 720px) {
  .footer-copyright {
    white-space: nowrap;
  }
}
.footer-social { display: flex; gap: 16px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--n500); background: var(--n700);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -1px -1px 3px rgba(80,80,80,0.1);
  text-decoration: none; transition: all 0.25s;
}
.footer-social a:hover {
  color: var(--volt);
  box-shadow: 0 0 10px rgba(122,239,0,0.15), inset 2px 2px 4px rgba(0,0,0,0.3), inset -1px -1px 3px rgba(80,80,80,0.1);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .types-grid, .process-grid, .steel-comparison { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-row,
  .projects-captions { grid-template-columns: repeat(2, 1fr); }
  .wp-block-columns.footer-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px;
  }
  .footer-col li,
  .footer-col .footer-nav-list li,
  .footer-col .wp-block-list li {
    white-space: normal;
  }
}
@media (max-width: 768px) {
  /* Scoped to legacy mockup nav only — must NOT match .natmar-seqnav */
  .site-header > nav,
  nav.natmar-mockup-nav { padding: 0 24px; }
  /* .nav-links is intentionally NOT hidden — WP's responsive overlay
     handles desktop→mobile transition via .wp-block-navigation. */
  /* .section-padding vertical handled by clamp() at root rule; sides are overridden in the smaller-screen media queries below. */
  .hero { padding: 0 24px 0; }
  .trust-bar { margin: 0 -24px; width: calc(100% + 48px); padding: 16px 24px; flex-wrap: wrap; gap: 16px; }
  .types-grid, .process-grid, .steel-comparison, .stats-grid { grid-template-columns: 1fr; }
  .projects-row { grid-template-columns: repeat(2, 1fr); }
  .hero-meta { flex-wrap: wrap; gap: 24px; }
  .hero-meta-divider { display: none; }
  .cta-buttons { flex-direction: column; align-items: center; }
  footer.site-footer-wrap,
  footer.wp-block-template-part {
    padding: 64px 24px 32px;
  }
  .wp-block-columns.footer-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content { animation: fadeUp 0.8s cubic-bezier(0,0,0.2,1) both; }
.hero-overline { animation: fadeUp 0.6s cubic-bezier(0,0,0.2,1) 0.1s both; }
.hero h1 { animation: fadeUp 0.8s cubic-bezier(0,0,0.2,1) 0.2s both; }
.hero-meta { animation: fadeUp 0.7s cubic-bezier(0,0,0.2,1) 0.4s both; }
.hero-actions { animation: fadeUp 0.7s cubic-bezier(0,0,0.2,1) 0.5s both; }
.trust-bar { animation: fadeUp 0.6s cubic-bezier(0,0,0.2,1) 0.65s both; }

/* Reveal animation — elements start visible, animate on scroll if JS loaded */
.reveal {
  opacity: 1;
  transform: translateY(0);
}
/* When JS adds .sf-reveal-init, start hidden for scroll animation */
.sf-reveal-init .reveal:not(.visible) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0,0,0.2,1), transform 0.6s cubic-bezier(0,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════
   WORDPRESS BLOCK THEME COMPATIBILITY
   ═══════════════════════════════════════════ */

/* Global — default site background is now STONE so any interior page
   that doesn't have a full-bleed dark hero falls back to a light stone
   surface instead of obsidian. Sections that want dark (hero, CTA,
   footer, header) declare their own background. */
.wp-site-blocks {
  background: #EAECE8; /* stone */
  color: #1E201D;      /* carbon */
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   LAYOUT SYSTEM
   Full-bleed sections + centered content container.
   Sections stretch full viewport width.
   Inner content constrained to max-width and centered.
   Responsive padding scales with viewport.
   ═══════════════════════════════════════════ */

/* HARD RESET — kill every possible source of outer margin/padding */
html, body, .wp-site-blocks, .wp-site-blocks > * {
  margin: 0 !important;
  padding: 0 !important;
}
:root {
  --wp--style--root--padding-top: 0px !important;
  --wp--style--root--padding-right: 0px !important;
  --wp--style--root--padding-bottom: 0px !important;
  --wp--style--root--padding-left: 0px !important;
}
/* Re-add body font after reset.
   Default page background is now stone — only sections that explicitly
   declare a dark background (hero, stats, cta, header, footer) override
   this. Interior pages without a hero fall back to stone. */
body {
  background: #EAECE8 !important; /* stone */
  color: #1E201D !important;      /* carbon */
  font-family: 'Outfit', sans-serif !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}

/* Full-width sections — edge to edge.
   max-width and margin are forced so the section breaks out of any
   constrained parent. Padding is intentionally NOT zeroed here —
   each pattern declares its own vertical/horizontal padding via
   inline styles or per-pattern CSS, and we must let those win. */
.wp-block-group.alignfull,
.alignfull.is-layout-flow,
.alignfull.is-layout-constrained,
.wp-block-template-part {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ═══════════════════════════════════════════
   CONTENT WIDTH SYSTEM
   All sections use .sf-content-width for inner content.
   Backgrounds bleed full width, content is centered.
   ═══════════════════════════════════════════ */

/* Section spacing — responsive vertical + horizontal padding
   Vertical: clamp(3.6rem, 9.6vh, 8.4rem) — scales with viewport height
   Horizontal: clamp(1rem, 4vw, 3rem) — scales with viewport width
   Hero excluded — it uses min-height: 100vh instead */
/* Legacy !important padding rule REMOVED.
   It was forcing every named home-page section into a fixed clamp range
   regardless of inline padding, which silently overrode every section
   banding update I made (including the new larger section token bump for
   the About page CTA). Each section now declares its own padding via the
   wp:group block's spacing.padding attribute (or via the section token
   for new patterns). Don't put this back without auditing every pattern
   that uses var:preset|spacing|section first. */
/* .section-padding consolidated into single root rule above (uses --wp--preset--spacing--section-tight for vertical, clamp(1rem,4vw,3rem) for horizontal). */
.site-footer {
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}

/* Ridge divider headroom defined in mockup CSS section above (clamp with vh) */

/* Hero keeps its own spacing — no extra top/bottom padding */
.wp-block-group.hero {
  padding-left: clamp(1rem, 4vw, 3rem) !important;
  padding-right: clamp(1rem, 4vw, 3rem) !important;
}

/* Inner content containers — centered max-width.
   .hero-content is intentionally NOT in this list — it has its own
   wider rule + left-anchored margin defined in the hero section above,
   so it can align with how the section h2s render at full-width. */
.section-header,
.types-grid,
.process-grid,
.stats-grid,
.steel-comparison,
.cta-content,
.projects-row,
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero content — wider container, left-anchored at the .hero padding edge.
   Stars never wrap. */
.hero-content {
  max-width: 1320px;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100%;
}
.hero-meta-item .value {
  white-space: nowrap;
}

/* wp:html blocks inside sections also respect content width */
.section-padding > .wp-block-html,
.alignfull > .wp-block-html {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}
/* Ridge dividers — full width, no side padding, transparent overlay */
.wp-block-html > .ridge-divider,
.ridge-divider {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero full viewport */
.wp-block-group.hero {
  min-height: 100vh;
  margin: 0;
}

/* wp:html blocks — full width */
.wp-block-html { width: 100%; }
.alignfull .wp-block-html { width: 100%; }

/* Remove WP inter-block vertical spacing */
.wp-site-blocks > * + * { margin-block-start: 0; }
body .is-layout-flow > * + * { margin-block-start: 0.5em; }
body .is-layout-flow > :first-child { margin-block-start: 0; }
.wp-block-group.alignfull + .wp-block-group.alignfull { margin-top: 0; }

/* Zero gaps between all sections and dividers — ALL pages */
.natmar-front-page.is-layout-flow > * + *,
.natmar-page.is-layout-flow > * + * {
  margin-block-start: 0 !important;
}
.natmar-front-page > .wp-block-group,
.natmar-front-page > .wp-block-html,
.natmar-page > .wp-block-group,
.natmar-page > .wp-block-html {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header */
  .wp-block-template-part:first-child > header.wp-block-group {
    padding: 10px 16px !important;
  }
  .nav-cta .wp-block-button__link {
    padding: 8px 16px !important;
    font-size: 0.7rem !important;
  }

  /* Content */
  .section-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Stack grids */
  .types-grid,
  .process-grid,
  .stats-grid,
  .steel-comparison,
  .footer-grid,
  .wp-block-columns {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Scale type */
  .hero h1, h1.wp-block-heading {
    font-size: clamp(2rem, 6vw, 3.5rem) !important;
  }
  h2.wp-block-heading, .font-display {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  /* 24.01.02.17 item 6 — home hero overline ('Steel Building Experts —
     Delta, CO') was clipping under the header bar. On mobile only, push it
     to the bottom of the hero content stack and shrink the font 25%. */
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--wp--preset--spacing--md);
  }
  .hero-content > * { margin-top: 0; margin-bottom: 0; }
  .hero-content .hero-overline {
    order: 99;
    margin-top: var(--wp--preset--spacing--md);
  }
  .hero-content .hero-overline .overline {
    font-size: 0.65625rem !important; /* 0.875rem × 0.75 */
  }
}

@media (max-width: 480px) {
  .section-padding {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hero-content {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hero-actions,
  .wp-block-buttons.is-layout-flex {
    flex-direction: column;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════
   INNER PAGE STYLES
   Standard layouts for all pages beyond the homepage.
   Uses the same design tokens and components.
   ═══════════════════════════════════════════ */

/* Inner page hero — compact dark banner */
.hero-inner,
.hero.hero-inner {
  min-height: 40vh !important;
  display: flex;
  align-items: flex-end;
  padding-top: 120px !important;
  padding-bottom: clamp(2rem, 5vh, 4rem) !important;
}
.hero-inner h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  margin-bottom: 0.5rem;
}
.hero-inner .subtitle {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--n400);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.hero-inner .hero-buttons,
.hero-inner .wp-block-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Page content sections */
.entry-content > .wp-block-group,
.wp-block-post-content > .wp-block-group {
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}
/* Interior page content (single posts, regular pages) — sits on the
   default stone background, so headings + body text are dark not light. */
.entry-content h2,
.wp-block-post-content h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #1E201D; /* carbon — readable on stone */
  margin-bottom: 1rem;
}
.entry-content h3,
.wp-block-post-content h3 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  color: #1E201D;
  margin-bottom: 0.5rem;
}
.entry-content p,
.wp-block-post-content p {
  color: #1E201D; /* darkened body text per readability ask */
  line-height: 1.7;
  max-width: 65ch;
  margin-bottom: 1rem;
}

/* Inner content max-width */
.entry-content > .wp-block-group .wp-block-group__inner-container,
.wp-block-post-content > .wp-block-group .wp-block-group__inner-container,
.constrained {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Neo cards — used across building types, services, materials */
.neo-card {
  background: var(--n700);
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 6px 6px 14px var(--neo-dark-shadow), -4px -4px 10px var(--neo-light-shadow);
  transition: transform 0.3s, box-shadow 0.3s;
}
.neo-card:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 20px var(--neo-dark-shadow), -4px -4px 12px var(--neo-light-shadow);
}
.neo-card h3 {
  color: var(--snowfield);
  margin-bottom: 0.5rem;
}
.neo-card p {
  color: var(--n400);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Cards grid — 3 columns desktop, 2 tablet, 1 mobile (inherits .types-grid) */
.cards-grid,
.neo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(12px, 2vw, 24px);
  max-width: 1200px;
  margin: 2rem auto;
}

/* Process/timeline steps */
.process-step,
.step-card {
  background: var(--n700);
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,0.03);
  position: relative;
}
.process-step .step-number,
.step-card .step-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--volt);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* FAQ sections — wp:details blocks */
.wp-block-details {
  background: var(--n700);
  border: 1px solid var(--n600);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 0;
  overflow: hidden;
}
.wp-block-details summary {
  padding: clamp(1rem, 2vw, 1.25rem);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--snowfield); /* dark FAQ card → light text inside */
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.wp-block-details summary:hover {
  background: rgba(255,255,255,0.02);
}
.wp-block-details summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--volt);
  font-weight: 700;
  transition: transform 0.2s;
}
.wp-block-details[open] summary::after {
  content: '−';
}
.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.wp-block-details > :not(summary) {
  padding: 0 clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.25rem);
  color: var(--n400);
  line-height: 1.7;
}

/* Spec/data tables */
.spec-table,
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.spec-table th, table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--n700);
  color: var(--volt);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--n600);
}
.spec-table td, table td {
  padding: 12px 16px;
  color: var(--n300);
  border-bottom: 1px solid var(--n600);
}
.spec-table tr:hover td, table tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* Photo placeholders */
.photo-placeholder,
[class*="photo-placeholder"] {
  background: var(--n700);
  border: 1px dashed var(--n600);
  border-radius: 8px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n500);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Stat highlights inline */
.stat-highlight {
  color: var(--volt);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

/* Section overlines */
.overline,
.wp-block-paragraph.overline {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--volt) !important;
  margin-bottom: 0.75rem !important;
}

/* Section subtitles */
.subtitle {
  color: var(--n400);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  max-width: 640px;
  line-height: 1.6;
}

/* CTA section (reusable on every page) */
.cta-section {
  text-align: center;
}
.cta-section h2 {
  color: var(--snowfield);
  margin-bottom: 0.75rem;
}
.cta-section p {
  color: var(--n400);
  max-width: 500px;
  margin: 0 auto 1.5rem;
}
.cta-section .wp-block-buttons {
  justify-content: center;
}

/* Removed: legacy alternating section backgrounds.
   Each section now declares its own background via the section-banding
   palette (.building-types, .process-section, .stats-section, .why-steel,
   .project-strip, .cta-section). Don't bring this back without auditing
   the section banding plan first — it forces every alignfull child of
   the front page into obsidian/n700, which clobbered the new stone +
   pumice + weathered scheme. */

/* Lists in content */
.entry-content ul, .entry-content ol,
.wp-block-post-content ul, .wp-block-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--n400);
}
.entry-content li, .wp-block-post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.entry-content ul li::marker {
  color: var(--volt);
}

/* Separator/divider */
.wp-block-separator {
  border-color: var(--n600) !important;
  opacity: 1;
}

/* ═══════════════════════════════════════════
   BUTTON SYSTEM
   WP renders: <div class="wp-block-button btn-primary">
                  <a class="wp-block-button__link wp-element-button">
   The wrapper div must be invisible. Only the inner <a> gets styled.
   ═══════════════════════════════════════════ */

/* Wrapper div — strip everything */
.wp-block-button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.wp-block-button.btn-primary,
.wp-block-button.btn-secondary {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Inner <a> link — this is THE button */
.wp-block-button__link,
.wp-block-button__link.wp-element-button,
.wp-element-button {
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 14px 32px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Primary: Volt bg, dark text */
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--volt) !important;
  color: var(--obsidian) !important;
  border: none !important;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -2px -2px 6px rgba(122,239,0,0.08) !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--trail-green) !important;
  color: var(--snowfield) !important;
}

/* Secondary: transparent, subtle border */
.wp-block-button.btn-secondary .wp-block-button__link {
  background: transparent !important;
  color: var(--snowfield) !important;
  border: 1px solid var(--n600) !important;
  box-shadow: none !important;
}
.wp-block-button.btn-secondary .wp-block-button__link:hover {
  border-color: var(--snowfield) !important;
  background: rgba(250,250,250,0.04) !important;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
  background: var(--obsidian) !important;
  color: var(--snowfield) !important;
  padding-top: 48px !important;
  padding-bottom: 32px !important;
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}
.site-footer .footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.site-footer .footer-links li {
  color: var(--volt);
  margin-bottom: 6px;
}
.site-footer .footer-links li a {
  color: var(--n400);
  text-decoration: none;
  background: none !important;
  transition: color 0.15s;
}
.site-footer .footer-links li a:hover {
  color: var(--volt);
}
.site-footer .footer-heading {
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════
   WP HEADING & PARAGRAPH OVERRIDES
   ═══════════════════════════════════════════ */
.wp-block-heading { font-family: 'Outfit', sans-serif; }
.wp-block-paragraph.overline {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--volt);
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */

/* Header — re-add padding after global reset.
   The OUTER header element gets obsidian explicitly via CSS (no longer
   inline in the markup, so there's a single source of truth here).
   The INNER navigation bar (.natmar-nav and its drawer at desktop) is
   transparent so the header chrome reads as one solid obsidian band
   without any nested boxes. */
.wp-block-template-part:first-child > header.wp-block-group,
header.natmar-header,
.natmar-header {
  padding: 12px 24px !important;
  /* 24.01.02.17 item 8 — DEFAULT (top-of-page) state is now transparent
     so the larger logo + nav sit over the hero with no chrome behind them.
     Dark obsidian band only appears when body.is-scrolled (sticky reveal). */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transition: transform 0.3s ease, background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, padding 220ms ease;
}
body.is-scrolled .wp-block-template-part:first-child > header.wp-block-group,
body.is-scrolled header.natmar-header,
body.is-scrolled .natmar-header {
  background: rgba(17,17,17,0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(61,61,61,0.5);
  padding: 8px 24px !important;
}
/* Hide header on scroll down, show on scroll up */
.natmar-header.header-hidden {
  transform: translateY(-100%);
}

/* Inner navigation bar — at desktop, explicitly transparent so it
   inherits the header's obsidian without being a separate visual surface.
   At ≤1024px, the .natmar-nav-drawer becomes the slide-in mobile panel
   and gets its own obsidian background from the existing @media rule. */
.natmar-header .natmar-nav {
  background: transparent;
}
@media (min-width: 1025px) {
  .natmar-header .natmar-nav-drawer {
    background: transparent;
  }
}

/* ═══════════════════════════════════════════
   HEADER NAVIGATION — custom .natmar-nav
   Desktop: inline horizontal items with hover dropdowns
   ≤1024px: branded hamburger drawer with collapsible submenus
   ═══════════════════════════════════════════ */

.natmar-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

/* Hamburger toggle — hidden by default, shown ≤1024px */
.natmar-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--n600);
  border-radius: 3px;
  padding: 8px;
  cursor: pointer;
  color: var(--snowfield);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.natmar-nav-toggle:hover {
  border-color: var(--volt);
  color: var(--volt);
  background: rgba(122,239,0,0.08);
}
.natmar-nav-toggle svg { display: block; }

/* Close button — hidden by default, shown inside open drawer */
.natmar-nav-close {
  display: none;
  background: transparent;
  border: 1px solid var(--n600);
  border-radius: 3px;
  padding: 8px;
  cursor: pointer;
  color: var(--snowfield);
  position: absolute;
  top: 24px;
  right: 24px;
  -webkit-appearance: none;
  appearance: none;
}
.natmar-nav-close:hover {
  border-color: var(--volt);
  color: var(--volt);
}
.natmar-nav-close svg { display: block; }

/* Drawer wrapper — at desktop it's just a transparent inline container */
.natmar-nav-drawer {
  display: flex;
  align-items: center;
}

/* Top-level horizontal menu */
.natmar-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.natmar-menu > li {
  position: relative;
}
.natmar-menu > li > a {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* 24.01.02.17 item 7 — default font color brighter (was --n400 muted gray) */
  color: var(--snowfield);
  text-decoration: none;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.natmar-menu > li > a:hover,
.natmar-menu > li:hover > a,
.natmar-menu > li.is-expanded > a {
  /* 24.01.02.17 item 7 — hover now matches the volt-green underline color */
  color: var(--volt);
}
.natmar-menu > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--volt);
  transition: width 0.3s cubic-bezier(0,0,0.2,1);
}
.natmar-menu > li:hover > a::after {
  width: 100%;
}
.natmar-menu .chev {
  font-size: 0.6rem;
  color: var(--volt);
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.2s;
}
.natmar-menu > li.is-expanded .chev {
  transform: rotate(180deg);
}

/* 24.01.02.18b round 5 — small inline chev next to the parent link on
   desktop. Replaces the older ▾ triangle (which was too small per user
   feedback). Same green volt color, same rotation-on-expanded behavior,
   but visually consistent with the bigger SVG chev that appears as the
   mobile toggle button. */
.natmar-menu .natmar-chev-inline {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  color: var(--volt);
  transition: transform 0.2s ease;
}
.natmar-menu > li.is-expanded .natmar-chev-inline {
  transform: rotate(180deg);
}

/* Desktop submenu dropdown */
.natmar-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 12px 0 0;
  padding: 8px 0;
  list-style: none;
  background: var(--n900);
  border: 1px solid var(--n600);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 100;
}
.natmar-submenu::before {
  content: '';
  position: absolute;
  left: 16px;
  top: -1px;
  width: 24px;
  height: 2px;
  background: var(--volt);
}
.has-submenu:hover > .natmar-submenu,
.has-submenu:focus-within > .natmar-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.natmar-submenu li {
  margin: 0;
}
.natmar-submenu a {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* 24.01.02.17 item 7 — submenu default matches the top-level brighter color */
  color: var(--snowfield);
  text-decoration: none;
  display: block;
  padding: 10px 18px;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.natmar-submenu a:hover {
  color: var(--volt);
  background: rgba(122,239,0,0.06);
}

/* Backdrop overlay for mobile drawer */
.natmar-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99998;
}
.natmar-nav.is-open .natmar-nav-backdrop {
  display: block;
}

/* ─── Mobile / tablet (≤1024px) ───────────────────────────── */
@media (max-width: 1024px) {
  .natmar-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .natmar-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 24.01.02.17 item 4 — drawer is now full-screen (was a 360px slide-in
     which was getting clipped on some Android browsers). High z-index so it
     sits above any page content / popups. Backdrop is hidden since the
     drawer now covers the whole viewport. */
  .natmar-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* dynamic viewport accounts for mobile URL bar */
    background: var(--obsidian);
    border-left: none;
    padding: 88px 24px 32px;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1);
    z-index: 100000;
    box-shadow: none;
  }
  .natmar-nav-backdrop { display: none !important; }
  .natmar-nav.is-open .natmar-nav-drawer {
    transform: translateX(0);
  }

  /* Stacked vertical menu inside drawer */
  .natmar-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .natmar-menu > li {
    border-bottom: 1px solid var(--n700);
  }
  .natmar-menu > li:last-child {
    border-bottom: none;
  }
  .natmar-menu > li > a {
    padding: 18px 4px;
    font-size: 0.85rem;
    color: var(--snowfield);
    justify-content: space-between;
    width: 100%;
  }
  .natmar-menu > li > a::after {
    display: none;
  }
  .natmar-menu .chev {
    font-size: 0.7rem;
  }

  /* Submenus collapse inline, indented */
  .natmar-submenu {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 12px 16px;
    margin: 0;
    min-width: 0;
    transform: none;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s, max-height 0.25s ease;
  }
  .natmar-submenu::before {
    display: none;
  }
  .has-submenu.is-expanded > .natmar-submenu {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
  }
  /* Disable hover-based dropdown on touch — only the click toggle works */
  .has-submenu:hover > .natmar-submenu {
    opacity: 0;
    visibility: hidden;
  }
  .has-submenu.is-expanded:hover > .natmar-submenu {
    opacity: 1;
    visibility: visible;
  }
  .natmar-submenu a {
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 10px 0;
    color: var(--n400);
    white-space: normal;
  }
}

/* CTA button in header — don't let it shrink */
.wp-block-group.is-layout-flex .wp-block-buttons {
  flex-shrink: 0;
}
.nav-cta .wp-block-button__link {
  white-space: nowrap;
  padding: 10px 20px !important;
  font-size: 0.75rem !important;
}

/* Site title — don't shrink */
.wp-block-site-title {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Legacy custom nav classes (for wp:html header fallback) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--obsidian);
  font-family: 'Outfit', sans-serif;
}
.nav-item {
  position: relative;
  display: inline-block;
}
.nav-item > a {
  display: inline-block;
  padding: 8px 0;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--n700);
  border: 1px solid var(--n600);
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: block;
}
.nav-dropdown a {
  display: block;
  padding: 8px 16px;
  color: var(--n400);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: color 0.15s, background 0.15s;
}
.nav-dropdown a:hover {
  color: var(--volt);
  background: rgba(255,255,255,0.03);
}
.nav-dropdown a::after {
  display: none;
}

/* ═══════════════════════════════════════════
   AUTHORED PAGE WRAPPER FLATTENING
   Some pages were authored in the WP admin with extra wp:group blocks
   wrapping every section, given className "constrained" (a leftover from
   an earlier theme convention). These wrappers add no visual value but
   cause deep DOM nesting + cumulative side padding. We neutralize them
   here so the alignfull sections inside read as direct children of the
   post content, without rewriting the database.

   Applied only to .wp-block-post-content > .wp-block-group.constrained
   so it doesn't affect any LEGITIMATE constrained groups elsewhere on
   the site. */
.wp-block-post-content > .wp-block-group.constrained,
.entry-content > .wp-block-group.constrained {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

/* Also strip the global padding from the post-content wrapper itself —
   it's now a transparent flow container and the inner alignfull sections
   provide their own padding. */
.wp-block-post-content.is-layout-constrained,
.entry-content.is-layout-constrained {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* ═══════════════════════════════════════════
   SECTION BANDING UTILITIES
   Reusable classes any future pattern can opt into for the section
   rhythm. The page rhythm is:
     dark hero → light → light-alt → mid → light → light → mid → dark footer
   ═══════════════════════════════════════════ */

.section-light {
  background: #EAECE8 !important;  /* stone */
  color: #1E201D;                  /* carbon */
}
.section-light-alt {
  background: #DCDFD9 !important;  /* pumice */
  color: #1E201D;
}
.section-mid {
  background: #4F524C !important;  /* weathered */
  color: #FAFAFA;                  /* snowfield */
}
.section-dark {
  background: #1E1E1E !important;  /* obsidian */
  color: #FAFAFA;
}

/* Inside any light/mid/dark section, headings and body inherit the
   section's foreground color unless overridden. This avoids needing
   to set color on every heading individually. */
.section-light h1, .section-light h2, .section-light h3, .section-light h4,
.section-light-alt h1, .section-light-alt h2, .section-light-alt h3, .section-light-alt h4 {
  color: #1E201D;
}
.section-light p,
.section-light-alt p {
  color: #3F413B;
}

.section-mid h1, .section-mid h2, .section-mid h3, .section-mid h4 {
  color: #FAFAFA;
}
.section-mid p {
  color: #DCDFD9; /* pumice — soft chalk text on weathered */
}

/* Borders/dividers inside light sections use chalk */
.section-light hr,
.section-light-alt hr {
  border-color: #A8ACA5; /* chalk */
}

/* ═══════════════════════════════════════════════════════════════════
   PILLAR PAGE PATTERNS — About + reusable building blocks
   First wave of the page layout system. Each pattern below is a
   self-contained section that any page template can compose via
   wp:pattern refs. Photo treatments use the existing
   .natmar-photo-frame component.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── page-hero-tall ──────────────────────────────────────────────── */
.natmar-page-hero-tall {
  position: relative;
  overflow: hidden;
}
.natmar-page-hero-tall-inner {
  width: 100%;
}
.natmar-hero-tall-cols {
  align-items: center;
}
.natmar-hero-tall-cols .natmar-page-title {
  font-family: 'Outfit', sans-serif;
}
.natmar-hero-tall-photo-col .natmar-photo-frame {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}
.natmar-page-hero-tall .natmar-breadcrumb a {
  color: #A8ACA5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.natmar-page-hero-tall .natmar-breadcrumb a:hover {
  color: #7AEF00;
  border-bottom-color: #7AEF00;
}

/* ─── manifesto-quote ─────────────────────────────────────────────── */
.natmar-manifesto {
  text-align: center;
}
.natmar-manifesto-inner {
  text-align: center;
}
.natmar-manifesto-rule {
  width: 64px;
  height: 3px;
  background: #7AEF00;
  margin: 0 auto var(--wp--preset--spacing--lg);
}
.natmar-manifesto-quote {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem) !important;
  text-wrap: balance;
}
.natmar-manifesto-quote::before {
  content: '"';
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 4rem;
  color: #A8ACA5;
  line-height: 0.5;
  margin-bottom: 1rem;
}
.natmar-manifesto-attr {
  text-align: center;
}

/* ─── feature-stack ───────────────────────────────────────────────── */
.natmar-feature-stack-inner > * {
  max-width: 100%;
}
.natmar-feature-bullets {
  list-style: none !important;
  padding-left: 0 !important;
  margin: var(--wp--preset--spacing--lg) 0 0 !important;
}
.natmar-feature-bullets li {
  position: relative;
  padding: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--md) 28px;
  border-bottom: 1px solid #A8ACA5;
  font-size: 1rem;
  color: #1E201D;
  line-height: 1.55;
}
.natmar-feature-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--wp--preset--spacing--md) + 0.55em);
  width: 14px;
  height: 2px;
  background: #7AEF00;
}
.natmar-feature-bullets li:last-child {
  border-bottom: none;
}
.natmar-feature-bullets li strong {
  color: #1E201D;
  font-weight: 700;
}

/* Enlarged feature rows — used on /about where the list carries the section
   (24.01.02.11 item 43). Bigger type, card-like rows, stronger key line. */
.natmar-feature-bullets.is-feature-rows li {
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) calc(clamp(20px, 3vw, 32px) + 22px);
  margin-bottom: 14px;
  border: 1px solid #C4C7C0;
  border-bottom: 1px solid #C4C7C0;
  border-radius: 10px;
  background: #FFFFFF;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  transition: border-color 200ms ease, transform 200ms ease;
}
.natmar-feature-bullets.is-feature-rows li:hover {
  border-color: #48AD17;
  transform: translateY(-2px);
}
.natmar-feature-bullets.is-feature-rows li:last-child {
  border-bottom: 1px solid #C4C7C0;
  margin-bottom: 0;
}
.natmar-feature-bullets.is-feature-rows li::before {
  left: clamp(20px, 3vw, 32px);
  top: calc(clamp(20px, 3vw, 32px) + 0.7em);
  width: 16px;
  height: 3px;
}
.natmar-feature-bullets.is-feature-rows li strong {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}

/* ─── photo-wall ──────────────────────────────────────────────────── */
.natmar-photo-wall-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
  width: 100%;
}
.natmar-photo-wall-grid figure {
  margin: 0;
}
.natmar-photo-wall-grid figure[data-slot="lead"] {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.natmar-photo-wall-grid figure[data-slot="tall-1"] {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.natmar-photo-wall-grid figure[data-slot="sq-1"] {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.natmar-photo-wall-grid figure[data-slot="sq-2"] {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.natmar-photo-wall-grid figure[data-slot="wide-2"] {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}
.natmar-photo-wall-grid figure[data-slot="tall-2"] {
  grid-column: 3 / 4;
  grid-row: 3 / 5;
}
/* Each frame fills its grid cell */
.natmar-photo-wall-grid .natmar-photo-frame {
  width: 100%;
  height: 100%;
}
.natmar-photo-wall-grid .natmar-photo-frame .natmar-photo-inner {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}

@media (max-width: 900px) {
  .natmar-photo-wall-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(160px, auto);
  }
  .natmar-photo-wall-grid figure[data-slot="lead"] {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .natmar-photo-wall-grid figure[data-slot="tall-1"] {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .natmar-photo-wall-grid figure[data-slot="sq-1"] {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .natmar-photo-wall-grid figure[data-slot="sq-2"] {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .natmar-photo-wall-grid figure[data-slot="wide-2"] {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  .natmar-photo-wall-grid figure[data-slot="tall-2"] {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
}

/* ─── team-grid ───────────────────────────────────────────────────── */
.natmar-team-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}
.natmar-team-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.natmar-team-card .natmar-photo-frame {
  width: 100%;
}
.natmar-team-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.natmar-team-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E201D;
  margin: 0;
}
.natmar-team-role {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #48AD17;
  margin: 0;
}
.natmar-team-bio {
  font-size: 0.95rem;
  color: #3F413B;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .natmar-team-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .natmar-team-cards {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ─── cross-link-row ──────────────────────────────────────────────── */
.natmar-cross-link-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}
.natmar-cross-link-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease;
}
.natmar-cross-link-card:hover {
  transform: translateY(-3px);
}
.natmar-cross-link-card .natmar-photo-frame {
  width: 100%;
}
.natmar-cross-link-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.natmar-cross-link-label {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1E201D;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.natmar-cross-link-label .arrow {
  color: #7AEF00;
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}
.natmar-cross-link-card:hover .natmar-cross-link-label .arrow {
  transform: translateX(4px);
}
.natmar-cross-link-caption {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #3F413B;
  margin: 0;
}

@media (max-width: 1024px) {
  .natmar-cross-link-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .natmar-cross-link-cards {
    grid-template-columns: 1fr;
  }
}

/* ─── Hero tall column collapse on mobile ────────────────────────── */
@media (max-width: 900px) {
  .natmar-hero-tall-cols .wp-block-column {
    flex-basis: 100% !important;
  }
  .natmar-hero-tall-photo-col .natmar-photo-frame {
    max-width: 100%;
    margin-left: 0;
    margin-top: var(--wp--preset--spacing--xl);
  }
}



/* ═══════════════════════════════════════════════════════════════════
   WHY STEEL PILLAR + FRAME TYPE SUB-PAGES
   Second wave of pillar page patterns: comparison-table, preview-section,
   hero-split, spec-callout, feature-with-photo. All five are reusable
   beyond Why Steel — same components will power Services and Building
   Types pillar/sub-pages later.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── comparison-table ────────────────────────────────────────────── */
.natmar-comparison-grid {
  width: 100%;
  margin-top: var(--wp--preset--spacing--lg);
  border: 1px solid #A8ACA5;
  background: #FAFAFA;
}
.natmar-comparison-header,
.natmar-comparison-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}
.natmar-comparison-header {
  border-bottom: 2px solid #1E201D;
  background: #1E1E1E;
}
.natmar-comparison-corner {
  background: transparent;
}
.natmar-comparison-col-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 20px;
  text-decoration: none;
  color: #FAFAFA;
  border-left: 1px solid #3D3D3D;
  transition: background 0.2s;
  position: relative;
}
.natmar-comparison-col-head:hover {
  background: rgba(122,239,0,0.06);
}
.natmar-comparison-col-head .frame-index {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7AEF00;
}
.natmar-comparison-col-head .frame-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 4px;
  color: #FAFAFA;
}
.natmar-comparison-col-head .frame-arrow {
  position: absolute;
  top: 24px;
  right: 16px;
  font-size: 0.85rem;
  color: #7AEF00;
  transition: transform 0.2s;
}
.natmar-comparison-col-head:hover .frame-arrow {
  transform: translateX(4px);
}
.natmar-comparison-row {
  border-bottom: 1px solid #DCDFD9;
}
.natmar-comparison-row:last-child {
  border-bottom: none;
}
.natmar-comparison-row-label {
  padding: 18px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #3F413B;
  background: #EAECE8;
  display: flex;
  align-items: center;
}
.natmar-comparison-cell {
  padding: 18px 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1E201D;
  border-left: 1px solid #DCDFD9;
  display: flex;
  align-items: center;
}
.natmar-comparison-best-for .natmar-comparison-cell {
  font-size: 0.85rem;
  font-weight: 400;
  color: #3F413B;
  line-height: 1.5;
  align-items: flex-start;
  padding-top: 20px;
}
.natmar-comparison-best-for .natmar-comparison-row-label {
  align-items: flex-start;
  padding-top: 22px;
}

@media (max-width: 900px) {
  .natmar-comparison-grid {
    border: none;
    background: transparent;
  }
  .natmar-comparison-header {
    display: none; /* hide grid header on mobile */
  }
  .natmar-comparison-row {
    grid-template-columns: 1fr;
    margin-bottom: 24px;
    border: 1px solid #A8ACA5;
    background: #FAFAFA;
  }
  .natmar-comparison-row-label {
    background: #1E1E1E;
    color: #7AEF00;
  }
  .natmar-comparison-cell {
    border-left: none;
    border-top: 1px solid #DCDFD9;
  }
  .natmar-comparison-cell::before {
    content: attr(data-frame) ' ';
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #3F413B;
    margin-right: 8px;
  }
}

/* ─── preview-section ─────────────────────────────────────────────── */
.natmar-previews {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4-xl);
}
.natmar-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: center;
}
.natmar-preview.is-photo-right {
  direction: rtl;
}
.natmar-preview.is-photo-right > * {
  direction: ltr;
}
.natmar-preview-photo {
  width: 100%;
}
.natmar-preview-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.natmar-preview-index {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #48AD17;
}
.natmar-preview-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #1E201D;
  margin: 0;
}
.natmar-preview-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  color: #3F413B;
  margin: 0;
}
.natmar-preview-short {
  font-size: 1rem;
  color: #1E201D;
  line-height: 1.65;
  margin: 0;
}
.natmar-preview-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1E201D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border-bottom: 2px solid #7AEF00;
  padding-bottom: 4px;
  width: max-content;
  transition: color 0.2s, border-color 0.2s;
}
.natmar-preview-link:hover {
  color: #48AD17;
}
.natmar-preview-link .arrow {
  color: #7AEF00;
  transition: transform 0.2s;
}
.natmar-preview-link:hover .arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .natmar-preview {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .natmar-preview.is-photo-right,
  .natmar-preview.is-photo-left {
    direction: ltr;
  }
}

/* ─── hero-split ──────────────────────────────────────────────────── */

/* Background image hero with left-to-right dark overlay */
.natmar-hero-split {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.natmar-hero-split .hero-split-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.natmar-hero-split .hero-split-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 100%);
  z-index: 1;
}
.natmar-hero-split .natmar-hero-split-inner {
  position: relative;
  z-index: 2;
}

.natmar-hero-split-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: center;
}
.natmar-hero-split-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.natmar-hero-split-text .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.natmar-hero-split-text .overline .back-link {
  color: #FAFAFA;
  text-decoration: none;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 32px;
  justify-content: center;
  border: 1px solid #3D3D3D;
  border-radius: 3px;
  transition: all 0.2s;
}
.natmar-hero-split-text .overline .back-link:hover {
  border-color: #7AEF00;
  color: #7AEF00;
}
.natmar-hero-split-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: #FAFAFA;
  margin: 0 0 24px;
}
.natmar-hero-split-intro {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.55;
  color: #A8ACA5;
  margin: 0 0 32px;
}
.natmar-hero-split .natmar-breadcrumb {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #7E827B;
  margin: 0;
}
.natmar-hero-split .natmar-breadcrumb a {
  color: #A8ACA5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.natmar-hero-split .natmar-breadcrumb a:hover {
  color: #7AEF00;
  border-bottom-color: #7AEF00;
}
/* Square photo frame hidden — replaced by background image */
.natmar-hero-split-photo {
  display: none;
}

/* Reduce top spacing on the section following the hero on sub-pages */
.natmar-hero-split + *,
.natmar-hero-split + * + .natmar-feature-photo-stack {
  padding-top: clamp(48px, 5vw, 80px) !important;
}

/* ─── spec-callout ────────────────────────────────────────────────── */
.natmar-spec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #A8ACA5;
  border: 1px solid #A8ACA5;
  width: 100%;
}
.natmar-spec-cell {
  background: #FAFAFA;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.natmar-spec-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #3F413B;
}
.natmar-spec-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1E201D;
  line-height: 1.1;
}
.natmar-spec-best-for {
  margin-top: 32px;
  padding: 24px 28px;
  background: #FAFAFA;
  border-left: 4px solid #7AEF00;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.natmar-spec-best-for-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #48AD17;
}
.natmar-spec-best-for p {
  font-size: 1rem;
  color: #1E201D;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .natmar-spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .natmar-spec-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── feature-with-photo (alternating direction) ──────────────────── */
.natmar-feature-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: center;
}
.natmar-feature-photo.is-photo-right {
  direction: rtl;
}
.natmar-feature-photo.is-photo-right > * {
  direction: ltr;
}
.natmar-feature-photo-img {
  width: 100%;
}
.natmar-feature-photo-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.natmar-feature-photo-text .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: block;
}
.natmar-feature-photo-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #1E201D;
  margin: 0;
}
.natmar-feature-photo-body {
  font-size: 1.05rem;
  color: #1E201D;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .natmar-feature-photo {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .natmar-feature-photo.is-photo-right,
  .natmar-feature-photo.is-photo-left {
    direction: ltr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SEQUENTIAL NAV — slim full-width prev/next bar
   Two variants:
     .is-hero-attached → dark, attached to bottom of hero
     .is-divider       → light, between content and footer
   No photo thumbnails — text only with arrows.
   ═══════════════════════════════════════════════════════════════════ */

/* Force the slim nav to break out of its parent's width constraint and
   span the full viewport edge-to-edge, regardless of where it sits in
   the document tree. This is the standard "viewport break-out" trick:
   width: 100vw + negative margins centered. Avoids depending on
   alignfull or wp:group full-bleed treatment.

   Vertical margin is also zeroed to override WP's default flow-layout
   margin-block-start of var(--wp--preset--spacing--md), which would
   otherwise add 16px above the slim nav bar (visible as page-bg space
   between the bar and the previous section). */
.natmar-seqnav-wrap,
:root :where(.is-layout-flow) > .natmar-seqnav-wrap,
:root :where(.is-layout-constrained) > .natmar-seqnav-wrap {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: none !important;
  position: relative;
}

/* Also kill margin-top on the block that comes RIGHT AFTER the slim nav.
   Otherwise the next section adds its own flow-layout 16px gap above. */
.natmar-seqnav-wrap + * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Hero-attached: solid dark bar with border, flush under hero */
.natmar-seqnav-wrap--hero-attached {
  background: #1E1E1E;
  border-top: 1px solid #3D3D3D;
  border-bottom: 1px solid #3D3D3D;
  margin-top: -1px;
  padding: 0 !important;
  line-height: 1;
}
.natmar-seqnav-wrap--hero-attached .natmar-seqnav {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Divider: light bar between content and CTA */
.natmar-seqnav-wrap--divider {
  background: #DCDFD9; /* pumice */
  border-top: 1px solid #A8ACA5;
  border-bottom: 1px solid #A8ACA5;
}

.natmar-seqnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px clamp(24px, 5vw, 64px);
  font-family: 'DM Mono', monospace;
}

/* ─── Prev / Next links ─── */
.natmar-seqnav-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 8px 4px;
  transition: color 0.2s;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  min-width: 0;
}
.natmar-seqnav-link.is-prev { justify-self: start; }
.natmar-seqnav-link.is-next {
  justify-self: end;
  text-align: right;
}
.natmar-seqnav-link.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.natmar-seqnav-link .arrow {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.natmar-seqnav-link .dir {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  flex-shrink: 0;
}
.natmar-seqnav-link .name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ─── Center "All <Pillar>" link ─── */
.natmar-seqnav-up {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.natmar-seqnav-up-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* ─── Hero-attached variant colors ─── */
.is-hero-attached .natmar-seqnav-link {
  color: #A8ACA5;
}
.is-hero-attached .natmar-seqnav-link .name {
  color: #FAFAFA;
}
.is-hero-attached .natmar-seqnav-link .arrow {
  color: #7AEF00;
}
.is-hero-attached .natmar-seqnav-link.is-disabled .arrow {
  color: #6B6B6B;
}
.is-hero-attached .natmar-seqnav-link:hover:not(.is-disabled) {
  color: #FAFAFA;
}
.is-hero-attached .natmar-seqnav-link:hover:not(.is-disabled) .arrow {
  color: #FAFAFA;
}
.is-hero-attached .natmar-seqnav-up {
  color: #FAFAFA;
  border-color: #3D3D3D;
}
.is-hero-attached .natmar-seqnav-up:hover {
  background: rgba(122,239,0,0.08);
  border-color: #7AEF00;
}
.is-hero-attached .natmar-seqnav-up-icon {
  color: #7AEF00;
}

/* ─── Divider variant colors ─── */
.is-divider .natmar-seqnav-link {
  color: #3F413B;
}
.is-divider .natmar-seqnav-link .name {
  color: #1E201D;
}
.is-divider .natmar-seqnav-link .arrow {
  color: #48AD17;
}
.is-divider .natmar-seqnav-link.is-disabled .arrow {
  color: #A8ACA5;
}
.is-divider .natmar-seqnav-link:hover:not(.is-disabled) .name {
  color: #48AD17;
}
.is-divider .natmar-seqnav-up {
  color: #1E201D;
  border-color: #1E201D;
}
.is-divider .natmar-seqnav-up:hover {
  background: rgba(122,239,0,0.1);
  border-color: #48AD17;
}
.is-divider .natmar-seqnav-up-icon {
  color: #48AD17;
}

/* ─── Mobile collapse ─── */
@media (max-width: 800px) {
  .natmar-seqnav {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px clamp(16px, 4vw, 32px);
  }
  .natmar-seqnav-link.is-prev,
  .natmar-seqnav-link.is-next {
    justify-self: stretch;
    text-align: left;
  }
  .natmar-seqnav-link.is-next {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .natmar-seqnav-up {
    justify-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RELATED POSTS GRID — server-rendered category posts
   Used on building type sub-pages. 3-column desktop, 2-col tablet,
   1-col mobile. Supports both real posts (with featured images)
   and placeholder cards (when category is empty).
   ═══════════════════════════════════════════════════════════════════ */

.natmar-related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
  margin-top: var(--wp--preset--spacing--lg);
}

.natmar-post-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease;
}
.natmar-post-card:not(.is-placeholder):hover {
  transform: translateY(-3px);
}
.natmar-post-card.is-placeholder {
  cursor: default;
  opacity: 0.92;
}

.natmar-post-card .natmar-photo-frame {
  width: 100%;
}
.natmar-post-card .natmar-photo-frame .natmar-photo-inner {
  aspect-ratio: 16 / 9;
  padding: 0;
  position: relative;
}
.natmar-post-card .natmar-photo-frame .natmar-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.natmar-post-card-placeholder {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C4C4C4;
}

.natmar-post-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.natmar-post-card-date {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #48AD17;
}
.natmar-post-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1E201D;
  margin: 0;
}
.natmar-post-card-excerpt {
  font-size: 0.9rem;
  color: #3F413B;
  line-height: 1.55;
  margin: 0;
}
.natmar-post-card-excerpt code {
  font-family: 'DM Mono', monospace;
  font-size: 0.85em;
  background: rgba(122,239,0,0.12);
  padding: 2px 6px;
  border-radius: 2px;
  color: #1E201D;
}
.natmar-post-card-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1E201D;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  border-bottom: 2px solid #7AEF00;
  padding-bottom: 4px;
  width: max-content;
  transition: color 0.2s;
}
.natmar-post-card-link.is-disabled {
  color: #A8ACA5;
  border-bottom-color: #A8ACA5;
}
.natmar-post-card-link .arrow {
  color: #7AEF00;
  transition: transform 0.2s;
}
.natmar-post-card-link.is-disabled .arrow {
  color: #A8ACA5;
}
.natmar-post-card:not(.is-placeholder):hover .natmar-post-card-link {
  color: #48AD17;
}
.natmar-post-card:not(.is-placeholder):hover .natmar-post-card-link .arrow {
  transform: translateX(4px);
}

.natmar-related-posts-more {
  margin-top: var(--wp--preset--spacing--2-xl);
  text-align: center;
}
.natmar-related-posts-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid #1E201D;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1E201D;
  text-decoration: none;
  transition: all 0.25s;
}
.natmar-related-posts-more-link:hover {
  background: #1E201D;
  color: #FAFAFA;
}
.natmar-related-posts-more-link .arrow {
  color: #7AEF00;
  transition: transform 0.2s;
}
.natmar-related-posts-more-link:hover .arrow {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .natmar-related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .natmar-related-posts-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE PATTERNS — card-deck, process-steps, contact-block,
   portfolio-grid, faq-accordion. Used by Resources, Contact,
   3D Designer, Financing, Portfolio, Blog landing pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── card-deck ───────────────────────────────────────────────────── */
.natmar-card-deck-header {
  max-width: 880px;
  margin-bottom: var(--wp--preset--spacing--2-xl);
}
.natmar-card-deck-header .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.natmar-card-deck-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--wp--preset--spacing--md);
}
.natmar-card-deck-intro {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}

.natmar-card-deck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

.natmar-deck-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  background: #FAFAFA;
  border: 1px solid #A8ACA5;
  padding: 32px 28px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.natmar-deck-card:hover {
  transform: translateY(-3px);
  border-color: #7AEF00;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
/* Static (non-link) cards: no lift/glow, default cursor. */
.natmar-deck-card.is-static {
  cursor: default;
}
.natmar-deck-card.is-static:hover {
  transform: none;
  border-color: #A8ACA5;
  box-shadow: none;
}
.natmar-card-deck.is-dark .natmar-deck-card.is-static:hover {
  border-color: #3D3D3D;
  background: #2A2A2A;
}

.natmar-card-deck.is-dark .natmar-deck-card {
  background: #2A2A2A;
  border-color: #3D3D3D;
}
.natmar-card-deck.is-dark .natmar-deck-card:hover {
  border-color: #7AEF00;
  background: #1E1E1E;
}

.natmar-deck-card-index {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7AEF00;
}
.natmar-deck-card-overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #48AD17;
  display: block;
}
.natmar-deck-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1E201D;
  margin: 0;
}
.natmar-card-deck.is-dark .natmar-deck-card-title {
  color: #FAFAFA;
}
.natmar-deck-card-body {
  font-size: 0.95rem;
  color: #3F413B;
  line-height: 1.6;
  margin: 0;
}
.natmar-card-deck.is-dark .natmar-deck-card-body {
  color: #A8ACA5;
}
.natmar-deck-card-cta {
  margin-top: auto;
  padding-top: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1E201D;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.natmar-card-deck.is-dark .natmar-deck-card-cta {
  color: #FAFAFA;
}
.natmar-deck-card-cta .arrow {
  color: #7AEF00;
  font-size: 1rem;
  transition: transform 0.2s;
}
.natmar-deck-card:hover .natmar-deck-card-cta .arrow {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .natmar-card-deck-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .natmar-card-deck-grid { grid-template-columns: 1fr; }
}

/* ─── process-steps ───────────────────────────────────────────────── */
.natmar-process-header {
  max-width: 880px;
  margin-bottom: var(--wp--preset--spacing--2-xl);
}
.natmar-process-header .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.natmar-process-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--wp--preset--spacing--md);
}
.natmar-process-intro {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}

.natmar-process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.natmar-process-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding-top: 24px;
}
.natmar-process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: #7AEF00;
}
.natmar-process-step-number {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #48AD17;
}
.natmar-process-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.natmar-process-step-body {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .natmar-process-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .natmar-process-steps-grid { grid-template-columns: 1fr; }
}

/* ─── contact-block ───────────────────────────────────────────────── */
.natmar-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: start;
}
.natmar-contact-info .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 16px;
}
.natmar-contact-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 20px;
}
.natmar-contact-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 32px;
}
.natmar-contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.natmar-contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid #A8ACA5;
  padding-bottom: 20px;
}
.natmar-contact-info-item:last-child {
  border-bottom: none;
}
.natmar-contact-info-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #48AD17;
}
.natmar-contact-info-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #1E201D;
  text-decoration: none;
  line-height: 1.4;
}
a.natmar-contact-info-value {
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
a.natmar-contact-info-value:hover {
  border-bottom-color: #7AEF00;
}

.natmar-contact-form-card {
  background: #1E1E1E;
  padding: 40px 36px;
  color: #FAFAFA;
}
.natmar-contact-form-card .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
}
.natmar-contact-form-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #FAFAFA;
}
.natmar-contact-form-sub {
  font-size: 0.95rem;
  color: #A8ACA5;
  margin: 0 0 28px;
}
.natmar-contact-form { display: flex; flex-direction: column; gap: 16px; }
.natmar-form-row { display: flex; flex-direction: column; gap: 4px; }
.natmar-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.natmar-form-row-2col > label { display: flex; flex-direction: column; gap: 4px; }
.natmar-form-row label { display: flex; flex-direction: column; gap: 4px; }
.natmar-form-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7AEF00;
}
.natmar-contact-form input,
.natmar-contact-form select,
.natmar-contact-form textarea {
  background: #2A2A2A;
  border: 1px solid #3D3D3D;
  color: #FAFAFA;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  padding: 12px 14px;
  width: 100%;
}
.natmar-contact-form input:focus,
.natmar-contact-form select:focus,
.natmar-contact-form textarea:focus {
  outline: none;
  border-color: #7AEF00;
}
.natmar-contact-form textarea { resize: vertical; }
.natmar-form-submit {
  background: #7AEF00;
  color: #1E1E1E;
  border: none;
  padding: 16px 28px;
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.2s;
  margin-top: 8px;
}
.natmar-form-submit:hover { background: #48AD17; color: #FAFAFA; }
.natmar-form-disclaimer {
  font-size: 0.7rem;
  color: #6B6B6B;
  margin: 12px 0 0;
  font-style: italic;
}

@media (max-width: 1024px) {
  .natmar-contact-grid { grid-template-columns: 1fr; }
  .natmar-form-row-2col { grid-template-columns: 1fr; }
}

/* ─── portfolio-grid ──────────────────────────────────────────────── */
.natmar-portfolio-header {
  max-width: 880px;
  margin-bottom: var(--wp--preset--spacing--xl);
}
.natmar-portfolio-header .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.natmar-portfolio-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--wp--preset--spacing--md);
}
.natmar-portfolio-intro {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}

.natmar-portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--wp--preset--spacing--xl);
}
.natmar-portfolio-filter {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1E201D;
  background: transparent;
  border: 1px solid #A8ACA5;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.2s;
}
.natmar-portfolio-filter:hover { border-color: #1E201D; }
.natmar-portfolio-filter.is-active {
  background: #1E1E1E;
  color: #FAFAFA;
  border-color: #1E1E1E;
}

.natmar-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.natmar-portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s;
}
.natmar-portfolio-card:not(.is-placeholder):hover { transform: translateY(-3px); }
.natmar-portfolio-card.is-placeholder { cursor: default; opacity: 0.92; }
.natmar-portfolio-card .natmar-photo-frame { width: 100%; }
.natmar-portfolio-card .natmar-photo-frame .natmar-photo-inner img {
  width: 100%; height: 100%; object-fit: cover;
}
.natmar-portfolio-card-body {
  display: flex; flex-direction: column; gap: 6px;
}
.natmar-portfolio-card-type {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #48AD17;
}
.natmar-portfolio-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1E201D;
  margin: 0;
}
.natmar-portfolio-card-meta {
  font-size: 0.85rem;
  color: #3F413B;
  margin: 0;
}
.natmar-portfolio-empty-note {
  margin-top: var(--wp--preset--spacing--2-xl);
  padding: 20px 24px;
  background: #FAFAFA;
  border-left: 4px solid #7AEF00;
  font-size: 0.9rem;
  color: #3F413B;
}
.natmar-portfolio-empty-note code {
  background: rgba(122,239,0,0.12);
  padding: 2px 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.85em;
}
@media (max-width: 1024px) {
  .natmar-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .natmar-portfolio-grid { grid-template-columns: 1fr; }
}

/* ─── faq-accordion ───────────────────────────────────────────────── */
.natmar-faq-inner .overline {
  font-family: 'DM Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.natmar-faq-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--wp--preset--spacing--md);
}
.natmar-faq-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 var(--wp--preset--spacing--xl);
}
.natmar-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #A8ACA5;
}
.natmar-faq-item {
  border-bottom: 1px solid #A8ACA5;
  background: transparent;
}
.natmar-faq-item summary {
  padding: 24px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  transition: color 0.2s;
}
.natmar-faq-item summary::-webkit-details-marker { display: none; }
.natmar-faq-q {
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1E201D;
  flex: 1;
}
.natmar-faq-toggle {
  font-size: 1.4rem;
  color: #7AEF00;
  font-weight: 700;
  margin-left: 16px;
  transition: transform 0.2s;
}
.natmar-faq-item[open] .natmar-faq-toggle {
  transform: rotate(45deg);
}
.natmar-faq-a {
  padding: 0 4px 24px;
  font-size: 1rem;
  color: #3F413B;
  line-height: 1.65;
}

/* ─── blog page (WP query template overrides) ────────────────────── */
.natmar-blog-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.natmar-blog-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.natmar-blog-card-date {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #48AD17 !important;
}
.natmar-blog-card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.natmar-blog-card-title a { color: #1E201D !important; text-decoration: none; }
.natmar-blog-card-title a:hover { color: #48AD17 !important; }
.natmar-blog-card-excerpt {
  font-size: 0.92rem !important;
  color: #3F413B !important;
  line-height: 1.6 !important;
}

/* ============================================================
   PAGE HEROES — Custom (Contact / Resources / Services / Buildings)
   ============================================================ */

/* Shared dark-hero text colors */
.natmar-page-hero-contact,
.natmar-page-hero-resources,
.natmar-page-hero-services,
.natmar-page-hero-buildings { color: #F5F5F2; }

.natmar-hero-contact-title,
.natmar-hero-resources-title,
.natmar-hero-services-title,
.natmar-hero-buildings-title {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0.4em 0 0.5em;
  font-weight: 700;
}

.natmar-hero-contact-sub,
.natmar-hero-resources-sub,
.natmar-hero-services-sub,
.natmar-hero-buildings-sub {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.6;
  color: #C8CCC4;
  max-width: 60ch;
  margin: 0;
}

.natmar-page-hero-contact .overline,
.natmar-page-hero-resources .overline,
.natmar-page-hero-services .overline,
.natmar-page-hero-buildings .overline {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0;
}

/* ---------- Contact hero ---------- */
.natmar-hero-contact-cols {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .natmar-hero-contact-cols { grid-template-columns: 1fr; } }

.natmar-hero-contact-text { display: flex; flex-direction: column; gap: 1.25rem; }

.natmar-hero-contact-direct {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-top: 0.5rem;
}
.natmar-hero-contact-phone,
.natmar-hero-contact-email {
  display: flex; flex-direction: column;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  text-decoration: none;
  background: rgba(255,255,255,0.03);
  transition: all 0.2s ease;
}
.natmar-hero-contact-phone:hover,
.natmar-hero-contact-email:hover { border-color: #7AEF00; background: rgba(122,239,0,0.06); }
.natmar-hero-contact-phone .dir,
.natmar-hero-contact-email .dir {
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.7rem; color: #7AEF00; font-weight: 600;
}
.natmar-hero-contact-phone .number,
.natmar-hero-contact-email .addr {
  color: #FFFFFF; font-weight: 600;
  font-size: 1.05rem; margin-top: 0.15rem;
}

.natmar-hero-contact-trust {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.82rem; color: #9AA09A;
  margin-top: 0.5rem;
}
.natmar-hero-contact-trust .sep { color: #555; }

/* Form card */
.natmar-hero-contact-form-card {
  background: #FFFFFF;
  color: #1E201D;
  border-radius: 14px;
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.natmar-hero-contact-form-heading {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  color: #1E201D;
  line-height: 1.2;
  margin: 0.3em 0 1.2em;
}
.natmar-form-row { margin-bottom: 0.9rem; }
.natmar-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.natmar-form-row label { display: block; }
.natmar-form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4F524C;
  margin-bottom: 0.3rem;
}
.natmar-contact-form input,
.natmar-contact-form select,
.natmar-contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid #DCDFD9;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #FAFBF8;
  color: #1E201D;
}
.natmar-contact-form input:focus,
.natmar-contact-form select:focus,
.natmar-contact-form textarea:focus {
  outline: none; border-color: #48AD17; background: #FFF;
}
.natmar-form-submit {
  width: 100%;
  background: #1E201D;
  color: #FFF;
  border: none;
  padding: 1rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: background 0.2s ease;
}
.natmar-form-submit:hover { background: #48AD17; }
.natmar-form-submit .arrow { display: inline-block; margin-left: 0.4em; }
.natmar-form-disclaimer {
  font-size: 0.75rem; color: #6B6E68;
  margin: 0.9rem 0 0; text-align: center;
}

/* ---------- Resources hero ---------- */
.natmar-hero-resources-text { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.natmar-hero-resources-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
  margin-bottom: clamp(36px, 4vw, 56px);
}
@media (max-width: 900px) { .natmar-hero-resources-stages { grid-template-columns: 1fr; } }

.natmar-hero-stage {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  text-decoration: none;
  color: #F5F5F2;
  transition: all 0.25s ease;
  min-height: 240px;
}
.natmar-hero-stage:hover {
  border-color: #7AEF00;
  background: rgba(122,239,0,0.05);
  transform: translateY(-3px);
}
.natmar-hero-stage.is-primary {
  background: #7AEF00;
  color: #1E201D;
  border-color: #7AEF00;
}
.natmar-hero-stage.is-primary:hover { background: #8FFF1A; }
.natmar-hero-stage .stage-index {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.55;
}
.natmar-hero-stage .stage-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7AEF00;
  margin-top: 0.3rem;
}
.natmar-hero-stage.is-primary .stage-label { color: #1E201D; }
.natmar-hero-stage .stage-title {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0.6rem 0 0.5rem;
  line-height: 1.15;
  color: inherit;
}
.natmar-hero-stage .stage-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}
.natmar-hero-stage .stage-arrow {
  margin-top: auto;
  font-size: 1.4rem;
  padding-top: 1rem;
}

.natmar-hero-resources-trust {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.82rem; color: #9AA09A;
}
.natmar-hero-resources-trust .sep { color: #555; }

/* ---------- Services hero ---------- */
.natmar-hero-services-text { max-width: 820px; margin-bottom: clamp(40px, 5vw, 64px); }
.natmar-hero-services-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 900px) { .natmar-hero-services-paths { grid-template-columns: 1fr; } }

.natmar-hero-path {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  text-decoration: none;
  color: #F5F5F2;
  transition: all 0.25s ease;
}
.natmar-hero-path:hover {
  border-color: #7AEF00;
  background: rgba(122,239,0,0.05);
  transform: translateY(-3px);
}
.natmar-hero-path.is-full {
  background: rgba(122,239,0,0.06);
  border-color: rgba(122,239,0,0.35);
}
.path-badge {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.2rem;
}
.path-num {
  font-size: 1.05rem; font-weight: 700;
  color: #7AEF00;
  letter-spacing: 0.06em;
}
.path-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  color: #C8CCC4;
}
.natmar-hero-path.is-full .path-label {
  border-color: #7AEF00;
  color: #7AEF00;
}
.path-title {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 1.1rem;
  color: #FFFFFF;
}
.path-list {
  list-style: none;
  padding: 0; margin: 0 0 1.4rem;
  display: grid;
  gap: 0.4rem;
}
.path-list li {
  font-size: 0.92rem;
  color: #C8CCC4;
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.4;
}
.path-list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: #7AEF00;
  font-weight: 700;
}
.path-tag {
  font-size: 0.85rem;
  color: #9AA09A;
  font-style: italic;
  margin: 0 0 1.2rem;
  line-height: 1.5;
}
.path-cta {
  display: inline-flex; align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7AEF00;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.path-cta .arrow { font-size: 1.1em; }

/* ---------- Services body: How We Work step list ---------- */
.natmar-how-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(28px, 3vw, 44px);
}
.natmar-how-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  padding: 0 0 clamp(32px, 4vw, 52px);
  position: relative;
}
.natmar-how-step:last-child { padding-bottom: 0; }
.natmar-how-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.natmar-how-step-num {
  font-family: 'Anybody', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: #48AD17;
  background: #FAFAFA;
  border: 2px solid #48AD17;
  border-radius: 999px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.natmar-how-step-rule {
  flex-grow: 1;
  width: 2px;
  background: linear-gradient(to bottom, #48AD17 0%, rgba(72,173,23,0.15) 100%);
  margin-top: 12px;
}
.natmar-how-step-title {
  margin: 6px 0 8px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: #1E201D;
  line-height: 1.1;
}
.natmar-how-step-lead {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #48AD17;
  line-height: 1.45;
}
.natmar-how-step-text {
  margin: 0 0 16px;
  font-size: 1rem;
  color: #3F413B;
  line-height: 1.65;
}
.natmar-how-step-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.natmar-how-step-tags li {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3F413B;
  background: rgba(72,173,23,0.1);
  border: 1px solid rgba(72,173,23,0.25);
  border-radius: 999px;
  padding: 5px 12px;
}
.natmar-how-callout {
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 28px);
  border-left: 4px solid #48AD17;
  background: rgba(72,173,23,0.06);
  border-radius: 0 8px 8px 0;
}
.natmar-how-callout p {
  margin: 0;
  font-size: 0.95rem;
  color: #1E201D;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .natmar-how-step { grid-template-columns: 56px 1fr; gap: 16px; }
  .natmar-how-step-num { width: 48px; height: 48px; font-size: 1.5rem; }
}

/* ---------- Services hero: 3 staggered Design/Supply/Build cards ---------- */
.natmar-hero-process-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: start;
}
.natmar-hero-process-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  text-decoration: none;
  color: #F5F5F2;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  min-height: 320px;
}
/* Descending staircase: card 1 highest, card 3 lowest — Design leads, Build
   trails. Reinforces process flow + signals the strategic emphasis on the
   first two steps. */
.natmar-hero-process-card.is-step-1 { transform: translateY(0); }
.natmar-hero-process-card.is-step-2 { transform: translateY(36px); }
.natmar-hero-process-card.is-step-3 { transform: translateY(72px); }
.natmar-hero-process-card.is-step-1:hover { transform: translateY(-3px); }
.natmar-hero-process-card.is-step-2:hover { transform: translateY(33px); }
.natmar-hero-process-card.is-step-3:hover { transform: translateY(69px); }
.natmar-hero-process-card:hover {
  border-color: #7AEF00;
  background: rgba(122,239,0,0.06);
}
/* Emphasis on Design (step 1) — it's the priority entry point. */
.natmar-hero-process-card.is-step-1 {
  background: rgba(122,239,0,0.06);
  border-color: rgba(122,239,0,0.4);
}
.natmar-hero-process-card-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: #7AEF00;
  margin-bottom: 14px;
}
.natmar-hero-process-card-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9AA09A;
  margin-bottom: 8px;
}
.natmar-hero-process-card-title {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 18px;
  color: #FFFFFF;
}
.natmar-hero-process-card-body {
  font-size: 1rem;
  color: #C8CCC4;
  line-height: 1.55;
  margin: 0 0 20px;
}
.natmar-hero-process-card-meta {
  font-size: 0.78rem;
  font-style: italic;
  color: #9AA09A;
  margin: 0 0 24px;
}
.natmar-hero-process-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7AEF00;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.natmar-hero-process-card-cta .arrow {
  font-size: 1.1em;
  transition: transform 0.2s ease;
}
.natmar-hero-process-card:hover .natmar-hero-process-card-cta .arrow {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .natmar-hero-process-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .natmar-hero-process-card.is-step-1,
  .natmar-hero-process-card.is-step-2,
  .natmar-hero-process-card.is-step-3 {
    transform: none;
    min-height: 0;
  }
  .natmar-hero-process-card.is-step-1:hover,
  .natmar-hero-process-card.is-step-2:hover,
  .natmar-hero-process-card.is-step-3:hover {
    transform: translateY(-3px);
  }
}

/* ---------- Buildings hero ---------- */
.natmar-hero-buildings-text { max-width: 800px; margin-bottom: clamp(40px, 5vw, 60px); }
.natmar-hero-buildings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  margin-bottom: clamp(36px, 4vw, 56px);
}
@media (max-width: 1100px) { .natmar-hero-buildings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .natmar-hero-buildings-grid { grid-template-columns: repeat(2, 1fr); } }

.natmar-hero-building-tile {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem 1.2rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  text-decoration: none;
  color: #F5F5F2;
  min-height: 130px;
  transition: all 0.22s ease;
}
.natmar-hero-building-tile:hover {
  border-color: #7AEF00;
  background: rgba(122,239,0,0.06);
  transform: translateY(-2px);
}
.natmar-hero-building-tile .tile-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7AEF00;
  letter-spacing: 0.12em;
}
.natmar-hero-building-tile .tile-name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.6rem;
  color: #FFFFFF;
}
.natmar-hero-building-tile .tile-arrow {
  position: absolute;
  bottom: 0.9rem; right: 1rem;
  font-size: 1.05rem;
  color: #7AEF00;
  opacity: 0.7;
  transition: transform 0.22s ease;
}
.natmar-hero-building-tile:hover .tile-arrow { transform: translateX(3px); opacity: 1; }

.natmar-hero-buildings-trust {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.82rem; color: #9AA09A;
}
.natmar-hero-buildings-trust .sep { color: #555; }

/* ============================================================
   WHERE WE BUILD — Contact page secondary section
   Photo-led service area + crew strip (replaces duplicate form)
   ============================================================ */
.natmar-where-we-build { color: #1E201D; }
.natmar-where-inner { display: flex; flex-direction: column; }

.natmar-where-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--container-gutter);
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.natmar-where-header .overline {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.78rem; font-weight: 600; margin: 0;
}
.natmar-where-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #1E201D;
  margin: 0.5em 0 0.5em;
  font-weight: 700;
}
.natmar-where-sub {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.65;
  color: #3F413B;
  max-width: 70ch;
  margin: 0 auto;
}

/* 24.01.02.15 item 5 — stats row merged into the light "Where We Build" section
   (replaces the dark photo overlay). Calm spacing with the counties strip
   below; minimal padding while keeping balanced whitespace. */
.natmar-where-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  max-width: 900px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  padding: 0 var(--wp--preset--spacing--container-gutter);
  text-align: center;
}
.natmar-where-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.natmar-where-stat .stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  color: #1E201D;
  letter-spacing: -0.02em;
}
.natmar-where-stat .stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #48AD17;
}
@media (max-width: 640px) {
  .natmar-where-stats { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
}

/* Full-bleed photo with floating stat overlay */
.natmar-where-photo {
  position: relative;
  width: 100%;
  height: clamp(360px, 52vh, 580px);
  overflow: hidden;
}
.natmar-where-photo-img {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, #2A2D28 0%, #4F524C 60%, #6B6E68 100%);
  /* placeholder gradient until real photo uploaded */
}
.natmar-where-photo-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.natmar-where-photo-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(32px, 5vw, 56px) var(--wp--preset--spacing--container-gutter);
  z-index: 2;
}
.natmar-where-overlay-stat {
  display: flex; flex-direction: column; align-items: center;
  color: #FFFFFF;
  text-align: center;
}
.natmar-where-overlay-stat .stat-num {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: #7AEF00;
  letter-spacing: -0.02em;
}
.natmar-where-overlay-stat .stat-label {
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #E6E8E2;
}

/* Counties strip — dark band */
.natmar-where-counties {
  background: #1E201D;
  padding: 1.4rem var(--wp--preset--spacing--container-gutter);
  border-top: 2px solid #7AEF00;
}
.natmar-where-counties-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 1rem;
}
.natmar-where-counties-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7AEF00;
}
.natmar-where-counties-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.natmar-where-counties-list li {
  font-size: 0.92rem;
  color: #E6E8E2;
  font-weight: 500;
}
.natmar-where-counties-list .dot {
  margin-left: 0.6rem;
  color: #555;
}

/* Crew strip */
.natmar-where-crew {
  background: #F5F5F2;
  padding: clamp(60px, 7vw, 100px) var(--wp--preset--spacing--container-gutter) clamp(80px, 9vw, 120px);
}
.natmar-where-crew-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.natmar-where-crew-intro {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.natmar-where-crew-intro .overline {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.78rem; font-weight: 600; margin: 0;
}
.natmar-where-crew-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  color: #1E201D;
  margin: 0.5em 0 0;
  letter-spacing: -0.01em;
}
.natmar-where-crew-sub {
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.65;
  color: #3F413B;
  max-width: 64ch;
  margin: 1rem auto 0;
}
.natmar-where-crew-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 900px) { .natmar-where-crew-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .natmar-where-crew-grid { grid-template-columns: 1fr; } }

.natmar-crew-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.natmar-crew-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #DCDFD9 0%, #A8ACA5 100%);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  margin-bottom: 1.1rem;
}
.natmar-crew-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1E201D;
  letter-spacing: -0.01em;
}
.natmar-crew-role {
  font-size: 0.85rem;
  color: #4F524C;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-top: 0.3rem;
}
/* ============================================================
   HOMEPAGE LAYOUT ADDITIONS — 10-card building grid + 4-card steel
   ============================================================ */

/* --- Building Types: 11-card Bento grid (3-column, per 24.01.02.5 brief) ---
   Row pattern: 2-1, 1-1-1, 1-2, 1-1-1, Custom=full (span 3). */
.types-grid-10 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--lg, 20px);
  max-width: var(--wp--style--global--wide-size, 1400px);
  margin: var(--wp--preset--spacing--2-xl, 48px) auto 0;
  padding: 0 var(--wp--preset--spacing--container-gutter, 24px);
}

/* Row 1: 2-1 — card 1 wide */
.types-grid-10 > .type-card:nth-child(1) { grid-column: span 2; }
/* Row 2: 1-1-1 — cards 3-4-5 all single (auto) */
/* Row 3: 1-2 — card 7 wide (preceded by single card 6) */
.types-grid-10 > .type-card:nth-child(7) { grid-column: span 2; }
/* Row 4: 1-1-1 — cards 8-9-10 all single (auto) */
/* Row 5: Custom full row */
.types-grid-10 > .type-card:nth-child(11) { grid-column: span 3; }

/* Taller photos on wide cards */
.types-grid-10 > .type-card:nth-child(1) .card-photo,
.types-grid-10 > .type-card:nth-child(7) .card-photo {
  height: 220px;
}
.types-grid-10 > .type-card:nth-child(11) .card-photo {
  height: 200px;
}

/* Standard cards */
.types-grid-10 > .type-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.types-grid-10 .card-photo {
  height: 160px;
  overflow: hidden;
  border-radius: 3px;
  margin: 9px 9px 0;
}
.types-grid-10 .card-photo img {
  border-radius: 3px;
}

.types-grid-10 .card-cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--volt, #7AEF00);
  letter-spacing: 0.02em;
}

/* Responsive: 2-col on tablet — wide cards collapse to span 2, custom span 2 */
@media (max-width: 768px) {
  .types-grid-10 { grid-template-columns: repeat(2, 1fr); }
  .types-grid-10 > .type-card:nth-child(1),
  .types-grid-10 > .type-card:nth-child(7),
  .types-grid-10 > .type-card:nth-child(11) { grid-column: span 2; }
}
/* 1-col on mobile */
@media (max-width: 480px) {
  .types-grid-10 { grid-template-columns: 1fr; }
  .types-grid-10 > .type-card:nth-child(1),
  .types-grid-10 > .type-card:nth-child(7),
  .types-grid-10 > .type-card:nth-child(11) { grid-column: span 1; }
}


/* --- Why Steel: 4-card grid --- */
.steel-comparison-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--xl, 24px);
  max-width: var(--wp--style--global--content-size, 1320px);
  margin: 0 auto;
}

/* Bumped 2x2 collapse breakpoint earlier (1280px) per 24.01.02.5 brief —
   subtitle text was squishing at 1100-1280px before the 2-col layout kicked in. */
@media (max-width: 1280px) {
  .steel-comparison-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .steel-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.steel-comparison-grid .steel-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.steel-comparison-grid .steel-card:hover {
  transform: translateY(-4px);
  border-color: #7AEF00 !important;
}


/* --- Process: link styling --- */
.process-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--trail-green, #48AD17);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.process-link:hover {
  text-decoration: underline;
}


/* --- Portfolio cards (homepage Recent Builds) — matches cross-link card style --- */
.natmar-portfolio-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--xl, 32px);
  max-width: var(--wp--style--global--wide-size, 1400px);
  margin: var(--wp--preset--spacing--2-xl, 48px) auto 0;
  padding: 0 var(--wp--preset--spacing--container-gutter, 24px);
}
.natmar-portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease;
}
.natmar-portfolio-card:hover {
  transform: translateY(-3px);
}
.natmar-portfolio-card .natmar-photo-frame {
  width: 100%;
}
.natmar-portfolio-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.natmar-portfolio-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1E201D;
  margin: 0;
}
.natmar-portfolio-card-caption {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: #7E827B;
  letter-spacing: 0.04em;
  margin: 0;
}
@media (max-width: 768px) {
  .natmar-portfolio-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .natmar-portfolio-cards { grid-template-columns: 1fr; }
}
/* ============================================================
   HERO VIDEO BACKGROUND
   ============================================================ */

/* Video fills hero absolutely */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ---- Hero video overlay stack ----
   z-0  video
   z-1  dark overlay (left-to-right gradient mask)
   z-2  original grid pattern (on top of dark overlay)
   z-3  bottom gradient + accent
   z-10 content + trust bar
*/

/* Kill the noise texture blend mode on the hero —
   we want a clean video + dark overlay, no blend artifacts */
.hero.texture-concrete::before {
  mix-blend-mode: normal;
  background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 100%) !important;
  z-index: 1;
}

/* Grid pattern on top of dark overlay */
.hero .hero-bg-grid {
  z-index: 2;
  opacity: 1;
}

/* Bottom gradient + accent above grid */
.hero .hero-accent-line,
.hero .hero-gradient {
  z-index: 3;
}

/* Content above everything */
.hero .hero-content {
  position: relative;
  z-index: 10;
}
.hero .trust-bar {
  position: relative;
  z-index: 10;
}


/* ============================================================
   GREEN COLOR CONSISTENCY
   Light backgrounds → Trail Green (#48AD17 / var(--trail-green))
   Dark backgrounds  → Volt (#7AEF00 / var(--volt))
   ============================================================ */

/* Process section (light bg) — overline + links */
.process-section .overline {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}
.process-section h2 span {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}
.process-link {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}

/* Project strip (light bg) — overline + heading accent */
.project-strip .overline {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}
.project-strip h2 span {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}

/* Building types section — use darker green for readability */
.building-types .card-cta {
  color: var(--wp--preset--color--trail-green, #48AD17);
}
.building-types .overline {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}
.building-types h2 span {
  color: var(--wp--preset--color--trail-green, #48AD17) !important;
}

/* Stats section (dark bg) — labels stay default (neutral) */

/* ---- Process inline stats (light background) ---- */
.process-stats-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: none;
}
.process-stat {
  text-align: center;
}
.process-stat-value {
  font-family: 'Anybody', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--wp--preset--color--trail-green, #48AD17);
  line-height: 1;
}
.process-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--weathered, #4F524C);
  margin-top: 6px;
}
@media (max-width: 600px) {
  .process-stats-row {
    flex-wrap: wrap;
    gap: 24px 32px;
  }
}

/* Why Steel section (dark bg) — all green is Volt, already correct */

/* CTA section (dark bg) — all green is Volt, already correct */


/* ============================================================
   OVERLINE LABEL HIGHLIGHTS — UNIVERSAL
   Every .overline gets a pill highlight. Background color is
   determined by parent context:
     Dark bg → volt-tinted (rgba green on dark)
     Light bg → trail-green-tinted (rgba green on light)
   ============================================================ */

/* Universal pill shape for ALL overlines */
p.overline,
.overline {
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  padding: 4px 14px;
  border-radius: 4px;
  line-height: 1.6;
}

/* Default: light background sections get trail-green highlight */
p.overline,
.overline {
  background: rgba(72, 173, 23, 0.12);
}

/* Dark background sections get volt-tinted highlight.
   These selectors match any section with dark/obsidian bg. */
.hero .overline,
.hero-overline .overline,
.natmar-hero-split .overline,
.natmar-hero-split-text .overline,
.natmar-page-hero-buildings .overline,
.natmar-page-hero-contact .overline,
.cta-section .overline,
.cta-content .overline,
.stats-section .overline,
[style*="background-color:#1E1E1E"] .overline,
[style*="background-color:#111"] .overline,
.texture-concrete .overline,
.metal-accent .overline {
  background: rgba(122, 239, 0, 0.1) !important;
  color: #7AEF00 !important;
}

/* Light bg sections: ensure trail-green text color */
.process-section .overline,
.project-strip .overline,
.natmar-feature-stack .overline,
.natmar-cross-link-row .overline,
.natmar-team-grid .overline,
.natmar-process-steps:not(.is-dark) .overline,
.building-types .overline,
.texture-topo .overline,
[style*="background-color:#DCDFD9"] .overline,
[style*="background-color:#EAECE8"] .overline {
  background: rgba(72, 173, 23, 0.12) !important;
  color: #48AD17 !important;
}

/* ---- Header logo — embedded inline as the leftmost flex child of the
   header. No fixed positioning, no scale morph; the parent .natmar-header
   already animates translateY(-100%) on scroll-down so the logo rides
   with it. ---- */
.nav-logo-img {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo {
  /* 24.01.02.17 item 8 — default (non-sticky) logo on desktop.
     24.01.02.18b #2 — bumped from 80px → 96px (+20%). */
  height: 96px;
  width: auto;
  max-height: none;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  transition: height 220ms ease;
}
/* Mobile default: +30% larger than the legacy 44px → 57px */
@media (max-width: 1024px) {
  .header-logo { height: 57px; }
}
/* Sticky reveal returns the logo to the legacy compact size. */
body.is-scrolled .header-logo { height: 44px; }
@media (max-width: 1024px) {
  body.is-scrolled .header-logo { height: 36px; }
}

/* Scroll-driven header behavior:
   - Header is fixed at top by default (see .natmar-header rules above).
   - Scrolling DOWN past threshold hides the whole header (translateY -100%),
     which carries the embedded logo with it.
   - Scrolling UP brings the header back as-is — no logo size morph. */
.site-header,
.wp-block-template-part:first-child > header.wp-block-group {
  transition: transform 280ms ease;
  will-change: transform;
}
body.is-header-hidden .site-header,
body.is-header-hidden .wp-block-template-part:first-child > header.wp-block-group,
body.is-header-hidden header.natmar-header {
  transform: translateY(-100%);
}
/* Light logo shown by default (dark header) */
.header-logo-dark {
  display: none !important;
}
.header-logo-light {
  display: block !important;
}

/* ============================================================
   BUILDINGS PILLAR — Bento Grid (24.01.02.5 brief)
   3-column layout, ordered to match nav menu.
   Pattern: Row 1 = 1-1-1 (Agriculture, Barndo, Commercial)
            Row 2 = 2-1   (Carport/Garage 2x, Hangar)
            Row 3 = 2-1   (Workshop 2x, Storage)
            Row 4 = 1-1-1 (Sheds, RV/Boat, ADUs)
            Row 5 = 3     (Custom — full row)
   ============================================================ */
.buildings-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: clamp(32px, 4vw, 56px);
}

/* Bento spans */
.buildings-bento-grid > .buildings-bento-card:nth-child(4)  { grid-column: span 2; } /* Carport/Garage */
.buildings-bento-grid > .buildings-bento-card:nth-child(6)  { grid-column: span 2; } /* Workshop */
.buildings-bento-grid > .buildings-bento-card:nth-child(11) { grid-column: span 3; } /* Custom — full row */

/* Card base */
.buildings-bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  text-decoration: none;
  color: #FAFAFA;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s;
}
.buildings-bento-card:hover {
  border-color: rgba(122, 239, 0, 0.4);
}

/* Taller wide cards */
.buildings-bento-grid > .buildings-bento-card:nth-child(4),
.buildings-bento-grid > .buildings-bento-card:nth-child(6) {
  min-height: 240px;
}
.buildings-bento-grid > .buildings-bento-card:nth-child(11) {
  min-height: 200px;
}

/* Responsive: 2-col on tablet — wide cards span 2, custom spans 2 */
@media (max-width: 900px) {
  .buildings-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .buildings-bento-grid > .buildings-bento-card:nth-child(4),
  .buildings-bento-grid > .buildings-bento-card:nth-child(6),
  .buildings-bento-grid > .buildings-bento-card:nth-child(11) { grid-column: span 2; }
}
/* 1-col on mobile */
@media (max-width: 520px) {
  .buildings-bento-grid { grid-template-columns: 1fr; }
  .buildings-bento-grid > .buildings-bento-card:nth-child(4),
  .buildings-bento-grid > .buildings-bento-card:nth-child(6),
  .buildings-bento-grid > .buildings-bento-card:nth-child(11) { grid-column: span 1; }
}

/* Photo background */
.buildings-bento-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  z-index: 0;
}
.buildings-bento-photo--placeholder {
  background: #2A2A2A;
}
.buildings-bento-card:hover .buildings-bento-photo {
  transform: scale(1.05);
}

/* Dark overlay for text readability */
.buildings-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
}

/* Content */
.buildings-bento-content {
  position: relative;
  z-index: 2;
  padding: 20px 24px;
  width: 100%;
}
.buildings-bento-index {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #7AEF00;
  display: block;
  margin-bottom: 4px;
}
.buildings-bento-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #FAFAFA;
}
.buildings-bento-tagline {
  font-size: 0.8rem;
  color: #A8ACA5;
  display: block;
  line-height: 1.4;
}
.buildings-bento-arrow {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.1rem;
  color: #7AEF00;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s, transform 0.2s;
}
.buildings-bento-card:hover .buildings-bento-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive */
@media (max-width: 1100px) {
  .buildings-bento-grid { grid-template-columns: repeat(3, 1fr); }
  .buildings-bento-grid > .buildings-bento-card:nth-child(1),
  .buildings-bento-grid > .buildings-bento-card:nth-child(6) { grid-column: span 2; }
  .buildings-bento-grid > .buildings-bento-card:nth-child(11) { grid-column: span 3; }
}
@media (max-width: 768px) {
  .buildings-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .buildings-bento-grid > .buildings-bento-card:nth-child(1),
  .buildings-bento-grid > .buildings-bento-card:nth-child(6),
  .buildings-bento-grid > .buildings-bento-card:nth-child(11) { grid-column: span 2; }
}
@media (max-width: 480px) {
  .buildings-bento-grid { grid-template-columns: 1fr; }
  .buildings-bento-grid > .buildings-bento-card:nth-child(1),
  .buildings-bento-grid > .buildings-bento-card:nth-child(6),
  .buildings-bento-grid > .buildings-bento-card:nth-child(11) { grid-column: span 1; }
}

/* ---- Secondary CTA: universal context-aware styling ----
   Light bg → dark text, grey border, green hover (matches "View the Full Portfolio")
   Dark bg  → light text, dark border, green hover (matches "Begin 3D Design")
   ============================================================ */

/* Light background secondary CTAs */
.process-section .btn-secondary .wp-block-button__link,
.project-strip .btn-secondary .wp-block-button__link,
.natmar-feature-stack .btn-secondary .wp-block-button__link,
.natmar-process-steps:not(.is-dark) .btn-secondary .wp-block-button__link,
.natmar-cross-link-row .btn-secondary .wp-block-button__link,
.natmar-team-grid .btn-secondary .wp-block-button__link,
.natmar-page-permitting .btn-secondary .wp-block-button__link,
[style*="background-color:#DCDFD9"] .btn-secondary .wp-block-button__link,
[style*="background-color:#EAECE8"] .btn-secondary .wp-block-button__link {
  color: #262825 !important;
  border-color: #CACCC7 !important;
  background: transparent !important;
}
.process-section .btn-secondary .wp-block-button__link:hover,
.project-strip .btn-secondary .wp-block-button__link:hover,
.natmar-feature-stack .btn-secondary .wp-block-button__link:hover,
.natmar-process-steps:not(.is-dark) .btn-secondary .wp-block-button__link:hover,
.natmar-cross-link-row .btn-secondary .wp-block-button__link:hover,
.natmar-team-grid .btn-secondary .wp-block-button__link:hover,
.natmar-page-permitting .btn-secondary .wp-block-button__link:hover,
[style*="background-color:#DCDFD9"] .btn-secondary .wp-block-button__link:hover,
[style*="background-color:#EAECE8"] .btn-secondary .wp-block-button__link:hover {
  border-color: #48AD17 !important;
  color: #48AD17 !important;
}

/* Dark background secondary CTAs (default for .btn-secondary) */
.hero .btn-secondary .wp-block-button__link,
.cta-section .btn-secondary .wp-block-button__link,
.natmar-hero-split .btn-secondary .wp-block-button__link,
.texture-concrete .btn-secondary .wp-block-button__link,
[style*="background-color:#1E1E1E"] .btn-secondary .wp-block-button__link,
[style*="background-color:#111"] .btn-secondary .wp-block-button__link {
  color: #FAFAFA !important;
  border-color: #3D3D3D !important;
  background: transparent !important;
}
.hero .btn-secondary .wp-block-button__link:hover,
.cta-section .btn-secondary .wp-block-button__link:hover,
.natmar-hero-split .btn-secondary .wp-block-button__link:hover,
.texture-concrete .btn-secondary .wp-block-button__link:hover,
[style*="background-color:#1E1E1E"] .btn-secondary .wp-block-button__link:hover,
[style*="background-color:#111"] .btn-secondary .wp-block-button__link:hover {
  border-color: #7AEF00 !important;
  color: #7AEF00 !important;
}

/* ---- 3D Designer Page ---- */

/* Hero split layout for 3D designer */
.natmar-3d-hero-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--wp--preset--spacing--3-xl, 64px);
  align-items: center;
}
/* Get-a-quote hero: top-align columns so left content starts at top of form */
.natmar-page-get-a-quote .natmar-3d-hero-split {
  align-items: start;
}
@media (max-width: 900px) {
  .natmar-3d-hero-split { grid-template-columns: 1fr; }
}

/* Iframe embed section */
.natmar-3d-embed-section {
  text-align: center;
}
.natmar-3d-iframe-wrap {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(61,61,61,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
/* 24.01.02.15 item 1 — /3d-designer page only: scale embed to 88vw so it
   reads larger on desktop while staying responsive. Other pages
   (building subpages) keep the 1320px max-width. */
.natmar-3d-iframe-wrap.is-page-3d-designer {
  width: 88vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* 24.01.02.17 item 1 — explicit viewport-centered margins on mobile so the
   88vw box sits with equal gutter on both sides regardless of the parent
   constrained group's padding. (The WP constrained layout adds inline padding
   on small viewports that can push the wrap off-axis otherwise.) */
@media (max-width: 768px) {
  .natmar-3d-iframe-wrap.is-page-3d-designer {
    margin-left: calc(50% - 44vw) !important;
    margin-right: calc(50% - 44vw) !important;
  }
}
/* Mobile-only tap-to-open overlay (hidden on >768px). Triggers the same
   fullscreen request as the desktop Full Screen button. */
.natmar-3d-mobile-overlay {
  display: none;
}
@media (max-width: 768px) {
  .natmar-3d-iframe-wrap.is-page-3d-designer .natmar-3d-mobile-overlay {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15,16,14,0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    margin: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #FAFAFA;
    font: inherit;
    cursor: pointer;
    z-index: 2;
    transition: opacity 220ms ease;
  }
  .natmar-3d-mobile-overlay-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #FAFAFA;
    text-align: center;
  }
  .natmar-3d-mobile-overlay-sub {
    font-size: 0.875rem;
    color: #C8CBC4;
    text-align: center;
    line-height: 1.45;
    max-width: 280px;
  }
  .natmar-3d-mobile-overlay.is-dismissed {
    opacity: 0;
    pointer-events: none;
  }
}
.natmar-3d-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.natmar-3d-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #A8ACA5;
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.natmar-3d-fullscreen-btn:hover {
  background: rgba(72,173,23,0.15);
  border-color: #48AD17;
  color: #48AD17;
}
/* Light background overrides for embed section */
.natmar-3d-embed-section .natmar-3d-fullscreen-btn {
  background: rgba(0,0,0,0.04);
  border-color: #A8ACA5;
  color: #4F524C;
}
.natmar-3d-embed-section .natmar-3d-fullscreen-btn:hover {
  background: rgba(72,173,23,0.1);
  border-color: #48AD17;
  color: #48AD17;
}
.natmar-3d-embed-section .natmar-3d-iframe-wrap {
  border-color: #A8ACA5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
/* Exit fullscreen floating button */
.natmar-3d-exit-fs-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: rgba(17,17,17,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #FAFAFA;
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}
.natmar-3d-exit-fs-btn:hover {
  background: rgba(17,17,17,0.95);
  border-color: #7AEF00;
  color: #7AEF00;
}

/* ---- Portfolio Square Grid ---- */
.portfolio-square-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
}
.portfolio-square-item {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.portfolio-square-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.portfolio-square-item:hover img {
  transform: scale(1.05);
}
@media (max-width: 1100px) {
  .portfolio-square-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .portfolio-square-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .portfolio-square-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Permitting page responsive grids ---- */
.natmar-page-permitting .process-grid {
  max-width: 1320px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .natmar-page-permitting div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .natmar-page-permitting div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .natmar-page-permitting div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Scroll-down arrow (3D designer + get-a-quote hero) ---- */
.natmar-scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(122,239,0,0.3);
  border-radius: 50%;
  margin-top: clamp(24px, 3vw, 40px);
  animation: natmar-bounce 2s infinite;
  transition: border-color 0.2s;
}
.natmar-scroll-arrow:hover {
  border-color: #7AEF00;
}
.natmar-scroll-arrow-lg {
  width: 64px;
  height: 64px;
  align-self: flex-start;
}
@keyframes natmar-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Why Steel feature-stack: reduce bottom padding */
.natmar-page-why-steel .natmar-feature-stack {
  padding-bottom: clamp(48px, 5vw, 80px) !important;
}

/* Force Why Steel overline + heading to trail-green */
.why-steel .overline.has-text-color {
  color: #48AD17 !important;
}
.why-steel h2 span {
  color: #48AD17 !important;
}

/* ═══════════════════════════════════════════
   REVIEW CAROUSEL — 24.01.02.1 brief
   Default: 4-up row at ~28vh widescreen.
   "See More" expands rows 2-3 into a 4x3 grid (12 max).
   ═══════════════════════════════════════════ */
.natmar-review-carousel {
  width: 100%;
  color: #FAFAFA;
}
.natmar-review-header {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.natmar-review-header .overline {
  color: #7AEF00;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.natmar-review-header h2 {
  color: #FAFAFA;
  font-weight: 700;
  line-height: 1.1;
  margin: 8px 0 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}
.natmar-review-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.natmar-review-card {
  background: #2A2A2A;
  border: 1px solid #3D3D3D;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: clamp(180px, 24vh, 240px); /* row totals ~28vh widescreen */
  transition: transform 180ms ease, border-color 180ms ease;
}
.natmar-review-card:hover {
  transform: translateY(-2px);
  border-color: #7AEF00;
}
.natmar-review-stars {
  color: #7AEF00;
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 1;
}
.natmar-review-text {
  color: #E5E5E5;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.natmar-review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  border-top: 1px solid #3D3D3D;
  padding-top: 12px;
}
.natmar-review-name {
  color: #FAFAFA;
  font-weight: 600;
  font-size: 0.9375rem;
}
.natmar-review-date {
  color: #9A9A9A;
  font-size: 0.75rem;
}
/* Reviewer profile pic — small circular thumbnail under the name (24.01.02.8 brief).
   Hotlinked from Google's lh3.googleusercontent.com CDN. */
.natmar-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-top: 6px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(0,0,0,0.08);
  background: #E5E5E5; /* fallback if image fails to load */
}

/* Default state: hide rows 2 + 3 (cards 5-12) */
.natmar-review-carousel[data-state="collapsed"] .natmar-review-card.is-extra {
  display: none;
}
/* Expanded state: show all (still in same 4-column grid → forms 4x3) */
.natmar-review-carousel[data-state="expanded"] .natmar-review-card.is-extra {
  display: flex;
}

/* Toggle button */
.natmar-review-toggle-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2.5vw, 32px);
}
.natmar-review-toggle {
  background: transparent;
  color: #FAFAFA;
  border: 1px solid #3D3D3D;
  border-radius: 6px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.natmar-review-toggle:hover {
  border-color: #7AEF00;
  background: rgba(122, 239, 0, 0.06);
}
.natmar-review-toggle .label-expanded { display: none; }
.natmar-review-carousel[data-state="expanded"] .natmar-review-toggle .label-collapsed { display: none; }
.natmar-review-carousel[data-state="expanded"] .natmar-review-toggle .label-expanded { display: inline; }

/* Responsive */
@media (max-width: 1024px) {
  .natmar-review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .natmar-review-grid { grid-template-columns: 1fr; }
  .natmar-review-card { min-height: 0; }
}

/* ═══════════════════════════════════════════
   RECENT BUILDS CAROUSEL — 24.01.02.1 brief
   Horizontal scroll-snap carousel with arrow nav + lightbox.
   ═══════════════════════════════════════════ */
.natmar-recent-builds-header {
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.natmar-recent-builds-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.natmar-recent-builds-controls {
  display: inline-flex;
  gap: 8px;
}
.natmar-recent-builds-prev,
.natmar-recent-builds-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #CACCC7;
  background: #FFFFFF;
  color: #262825;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 180ms ease, background 180ms ease;
}
.natmar-recent-builds-prev:hover,
.natmar-recent-builds-next:hover {
  border-color: #48AD17;
  background: rgba(122, 239, 0, 0.08);
}
.natmar-recent-builds-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.natmar-recent-builds-track::-webkit-scrollbar { height: 6px; }
.natmar-recent-builds-track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
.natmar-recent-builds-card {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  font-family: inherit;
}
.natmar-recent-builds-frame {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #1E201D;
}
/* Image-only variant — collapse the (now-empty) card body */
.natmar-recent-builds.is-image-only .natmar-recent-builds-card-body { display: none; }
.natmar-recent-builds-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease;
}
.natmar-recent-builds-card:hover .natmar-recent-builds-frame img {
  transform: scale(1.04);
}
.natmar-recent-builds-card-body { padding: 12px 4px 0; }
.natmar-recent-builds-title {
  margin: 0;
  color: #262825;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.natmar-recent-builds-caption {
  margin: 2px 0 0;
  color: #4F524C;
  font-size: 0.875rem;
}
.natmar-recent-builds-cta {
  margin-top: clamp(20px, 2.5vw, 32px);
  text-align: center;
}
.natmar-recent-builds-link {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #CACCC7;
  border-radius: 6px;
  color: #262825;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: border-color 180ms ease, background 180ms ease;
}
.natmar-recent-builds-link:hover {
  border-color: #48AD17;
  background: rgba(122, 239, 0, 0.08);
}

/* Lightbox */
.natmar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10,10,10,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.natmar-lightbox[hidden] { display: none; }
.natmar-lightbox-figure {
  margin: 0;
  max-width: min(1280px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.natmar-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  background: #1E201D;
}
.natmar-lightbox-caption {
  text-align: center;
  color: #FAFAFA;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.natmar-lightbox-title {
  font-weight: 700;
  font-size: 1rem;
}
.natmar-lightbox-sub {
  color: #A8ACA5;
  font-size: 0.875rem;
}
.natmar-lightbox-close,
.natmar-lightbox-prev,
.natmar-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  color: #FAFAFA;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, border-color 180ms ease;
}
.natmar-lightbox-close:hover,
.natmar-lightbox-prev:hover,
.natmar-lightbox-next:hover {
  background: rgba(122, 239, 0, 0.18);
  border-color: #7AEF00;
}
.natmar-lightbox-close { top: 16px; right: 16px; }
.natmar-lightbox-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.natmar-lightbox-next  { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
  .natmar-lightbox-prev,
  .natmar-lightbox-next { width: 40px; height: 40px; font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════
   3D DESIGNER FEATURE CTA — 24.01.02.1 refinement
   Two-column split. Left: 2 stacked frame-type cards with slideshow
   headers. Right: demo video/GIF frame + hero pitch + main CTA.
   ═══════════════════════════════════════════ */
.natmar-3d-feature-section { color: #FAFAFA; }
.natmar-3d-feature-header {
  text-align: left;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.natmar-3d-feature-header .overline {
  color: #7AEF00;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.natmar-3d-feature-header h2 {
  color: #FAFAFA;
  font-weight: 700;
  line-height: 1.1;
  margin: 8px 0 0;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
}

/* Split layout */
.natmar-3d-feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}

/* The two frame cards (Red Iron + Cold Formed) and the pitch card are now
   side-by-side as direct grid items in the 1-1-2 layout. The .cards
   wrapper uses display:contents so its children participate directly. */
.natmar-3d-feature-cards {
  display: contents;
}
.natmar-3d-card {
  background: #2A2A2A;
  border: 1px solid #3D3D3D;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 220ms ease, transform 220ms ease;
}
.natmar-3d-card:hover {
  border-color: #7AEF00;
  transform: translateY(-2px);
}

/* Card slideshow header */
.natmar-3d-card-slideshow {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1A1A1A;
}
.natmar-3d-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.natmar-3d-slide.is-active { opacity: 1; }
.natmar-3d-slide-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(122, 239, 0, 0.05) 0,
      rgba(122, 239, 0, 0.05) 12px,
      rgba(122, 239, 0, 0.10) 12px,
      rgba(122, 239, 0, 0.10) 24px
    ),
    #1A1A1A;
  color: #7AEF00;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.natmar-3d-slide-placeholder .placeholder-label {
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px dashed rgba(122,239,0,0.4);
}
.natmar-3d-slide-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.slide-dot.is-active {
  background: #7AEF00;
  transform: scale(1.15);
}

/* Card body */
.natmar-3d-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.natmar-3d-card-name {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  color: #FAFAFA;
}
.natmar-3d-card-subtitle {
  margin: 0;
  color: #7AEF00;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.natmar-3d-card-desc {
  margin: 0;
  color: #C8CBC4;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.natmar-3d-card-cta {
  align-self: flex-start;
  margin-top: 6px;
  color: #FAFAFA;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid #3D3D3D;
  padding: 0 0 4px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.natmar-3d-card-cta:hover {
  color: #7AEF00;
  border-color: #7AEF00;
}

/* RIGHT — demo video pitch */
.natmar-3d-feature-pitch {
  background: #2A2A2A;
  border: 1px solid #3D3D3D;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.natmar-3d-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #1A1A1A;
}
.natmar-3d-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 24.01.02.14 item 5 — YouTube demo iframe inside .natmar-3d-video-frame */
.natmar-3d-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.natmar-3d-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #7AEF00;
  background:
    radial-gradient(circle at center, rgba(122,239,0,0.08), transparent 60%),
    repeating-linear-gradient(
      -45deg,
      rgba(122, 239, 0, 0.04) 0,
      rgba(122, 239, 0, 0.04) 14px,
      rgba(122, 239, 0, 0.08) 14px,
      rgba(122, 239, 0, 0.08) 28px
    ),
    #1A1A1A;
}
.natmar-3d-video-placeholder .placeholder-label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px dashed rgba(122,239,0,0.4);
}
.natmar-3d-pitch-headline {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: #FAFAFA;
  letter-spacing: -0.01em;
}
.natmar-3d-pitch-sub {
  margin: 0;
  color: #C8CBC4;
  font-size: 1rem;
  line-height: 1.55;
}
.natmar-3d-pitch-cta {
  align-self: flex-start;
  background: #7AEF00;
  color: #1E1E1E;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.natmar-3d-pitch-cta:hover {
  background: #92ff1f;
  transform: translateY(-1px);
}

/* Responsive — collapse 1-1-2 → 2-col with pitch full-width below ≤1024px */
@media (max-width: 1024px) {
  .natmar-3d-feature-split { grid-template-columns: 1fr 1fr; }
  .natmar-3d-feature-pitch { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .natmar-3d-feature-split { grid-template-columns: 1fr; }
  .natmar-3d-feature-pitch { grid-column: 1 / -1; }
  .natmar-3d-card-body { padding: 16px 18px 18px; }
  .natmar-3d-feature-pitch { padding: 18px; }
}

/* ═══════════════════════════════════════════
   3D DESIGNER TEMPLATES (Building Examples) — 24.01.02.2 brief
   3-card showcase. Each card: image (with arrow overlay) + title +
   subtitle + description + "Start designing this building" CTA.
   Image is a CTA itself (links to designer).
   ═══════════════════════════════════════════ */
.natmar-3d-templates-header {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.natmar-3d-templates-header .overline {
  color: #48AD17;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.natmar-3d-templates-header h2 {
  color: #1E201D;
  font-weight: 700;
  line-height: 1.1;
  margin: 8px 0 12px;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
}
.natmar-3d-templates-intro {
  color: #3F413B;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.natmar-3d-templates-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.natmar-3d-template-card {
  background: #FAFAFA;
  border: 1px solid #CACCC7;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, border-color 220ms ease;
}
.natmar-3d-template-card:hover {
  transform: translateY(-3px);
  border-color: #48AD17;
}
.natmar-3d-template-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #1E201D;
  overflow: hidden;
  text-decoration: none;
}
.natmar-3d-template-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease;
}
.natmar-3d-template-card:hover .natmar-3d-template-image img {
  transform: scale(1.04);
}
.natmar-3d-template-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #48AD17;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(72, 173, 23, 0.06) 0,
      rgba(72, 173, 23, 0.06) 12px,
      rgba(72, 173, 23, 0.10) 12px,
      rgba(72, 173, 23, 0.10) 24px
    ),
    #2A2A2A;
}
.natmar-3d-template-image-placeholder .placeholder-label {
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px dashed rgba(72,173,23,0.5);
  color: #7AEF00;
}
/* 24.01.02.15 item 7 — arrow circle moved from image top-right to body
   bottom-right, aligned to the "Design this building" CTA. Now a <button>
   (popup trigger) rather than a decorative span. */
.natmar-3d-template-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #7AEF00;
  color: #1E1E1E;
  font-weight: 800;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 220ms ease, box-shadow 220ms ease, background 200ms ease;
  padding: 0;
  font-family: inherit;
}
.natmar-3d-template-arrow:hover {
  transform: translateX(2px);
  background: #48AD17;
  color: #FAFAFA;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.natmar-3d-template-arrow:focus-visible {
  outline: 3px solid #1E201D;
  outline-offset: 2px;
}
/* Footer row: CTA on the left, arrow circle on the right, both pinned to the
   bottom of the card body so they share a baseline across cards of varied
   description length. */
.natmar-3d-template-footer {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.natmar-3d-template-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.natmar-3d-template-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: #1E201D;
}
.natmar-3d-template-subtitle {
  margin: 0;
  color: #48AD17;
  font-size: 0.875rem;
  font-weight: 600;
}
.natmar-3d-template-desc {
  margin: 0;
  color: #3F413B;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.natmar-3d-template-cta {
  margin-top: 6px;
  align-self: flex-start;
  background: #1E201D;
  color: #FAFAFA;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.natmar-3d-template-cta:hover {
  background: #48AD17;
  color: #FAFAFA;
}

/* Responsive: 4 across → 2x2 → 1x4 */
@media (max-width: 1024px) {
  .natmar-3d-templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .natmar-3d-templates-grid { grid-template-columns: 1fr; }
}

/* ── Per-type Building Templates section (24.01.02.11 item 12, expanded 24.01.02.13) ──
   Variable card count per type (1/2/3). Reuses .natmar-3d-template-* card
   internals; image is a <button> trigger that opens the 3D Designer popup
   in-page (no new tab). Slider-ready image track for multi-photo cards. */
.natmar-building-templates-grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
}
.natmar-building-templates-grid.is-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.natmar-building-templates-grid.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin-inline: auto;
}
.natmar-building-templates-grid.is-count-1 {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin-inline: auto;
}

/* Image button (replaces the old <a>) — strip button default chrome */
.natmar-bt-card .natmar-3d-template-image {
  appearance: none;
  background: #1E201D;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.natmar-bt-card .natmar-3d-template-image:focus-visible {
  outline: 3px solid #7AEF00;
  outline-offset: 2px;
}
/* CTA button mirror — strip <button> defaults so it matches the old <a> CTA style */
.natmar-bt-card .natmar-3d-template-cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* 24.01.02.15 item 7 — slides stacked absolutely with opacity-fade transitions.
   Replaces the prior scroll-snap flex track which (a) clipped the active
   image's hover-zoom against the neighboring slide (thin seam on the right
   edge) and (b) was unreliable across Windows browsers. JS cycler in
   3d-designer-popup.js (initCycler) toggles .is-active on image click. */
.natmar-bt-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.natmar-bt-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.natmar-bt-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.natmar-bt-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.natmar-bt-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 360ms ease;
  transform-origin: center center;
}
.natmar-3d-template-card:hover .natmar-bt-slide.is-active img { transform: scale(1.04); }
/* Shared 3d-designer-templates section — image area is a non-interactive
   wrapper (no cycle needed for the single-image cards). */
.natmar-3d-template-image.is-static {
  cursor: default;
}
/* Multi-photo dot indicators (passive — slider is touch/scroll-driven) */
.natmar-bt-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.natmar-bt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.natmar-bt-dot.is-active { background: #7AEF00; box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
@media (max-width: 1024px) {
  .natmar-building-templates-grid.is-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .natmar-building-templates-grid.is-count-3,
  .natmar-building-templates-grid.is-count-2 {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* ── 3D Designer Popup (24.01.02.13 Section 3) ─────────────────────────
   Opens fullscreen on card click; "Exit fullscreen" shrinks to a windowed
   modal floating above the page. Same iframe instance the whole time. */
.natmar-3d-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.natmar-3d-popup.is-open { display: flex; }
.natmar-3d-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,16,14,0.78);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.natmar-3d-popup.is-windowed .natmar-3d-popup-backdrop { opacity: 1; }
.natmar-3d-popup.is-fullscreen .natmar-3d-popup-backdrop { opacity: 1; background: #1E201D; }
.natmar-3d-popup-window {
  position: relative;
  background: #1E201D;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  overflow: hidden;
  transition: width 220ms ease, height 220ms ease, border-radius 220ms ease;
}
.natmar-3d-popup.is-fullscreen .natmar-3d-popup-window {
  width: 100vw;
  /* 24.01.02.17 item 2 — dynamic viewport units so the top bar doesn't get
     hidden under the Android Chrome URL bar / iOS safe area. */
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
}
.natmar-3d-popup.is-windowed .natmar-3d-popup-window {
  width: min(90vw, 1400px);
  height: min(85vh, 900px);
  height: min(85dvh, 900px);
  border-radius: 12px;
}
.natmar-3d-popup-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* 24.01.02.17 item 2 — title removed; actions now right-aligned. */
  justify-content: flex-end;
  gap: 12px;
  /* Pad top by safe-area inset so the bar isn't clipped by mobile browser
     chrome (Chrome Android URL bar, iOS notch). */
  padding: max(12px, env(safe-area-inset-top, 0px)) 18px 12px;
  background: #111312;
  border-bottom: 1px solid #2A2A2A;
  color: #FAFAFA;
}
.natmar-3d-popup-title {
  /* Kept for back-compat — hidden visually but populated for SR via JS. */
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.natmar-3d-popup-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.natmar-3d-popup-actions button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid #3D3D3D;
  border-radius: 6px;
  color: #C8CBC4;
  font: 600 0.8125rem/1 inherit;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.natmar-3d-popup-actions button:hover {
  background: #2A2A2A;
  border-color: #7AEF00;
  color: #FAFAFA;
}
/* 24.01.02.17 item 2 — close button is now wider with the EXIT label
   next to the X icon. Volt-green border for visual priority over the
   two square icon buttons. */
.natmar-3d-popup-actions .natmar-3d-popup-close {
  padding: 7px 14px;
  border-color: #7AEF00;
  color: #FAFAFA;
}
.natmar-3d-popup-actions .natmar-3d-popup-close:hover {
  background: #7AEF00;
  color: #1E1E1E;
}
.natmar-3d-popup-close-label {
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* Show exit-fs only in fullscreen, enter-fs only in windowed */
.natmar-3d-popup-exit-fs, .natmar-3d-popup-enter-fs { display: none; }
.natmar-3d-popup.is-fullscreen .natmar-3d-popup-exit-fs { display: inline-flex; }
.natmar-3d-popup.is-windowed .natmar-3d-popup-enter-fs { display: inline-flex; }
.natmar-3d-popup-iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #FFFFFF;
}
@media (max-width: 600px) {
  .natmar-3d-popup.is-windowed .natmar-3d-popup-window {
    width: 96vw;
    height: 92vh;
    height: 92dvh;
    border-radius: 8px;
  }
  /* Keep the EXIT label even on small screens (it's the primary affordance) —
     hide only the labels of the fullscreen toggle icons. */
}

/* ═══════════════════════════════════════════
   SOCIAL PROOF BENTO — 24.01.02.2 brief
   Bento grid replacing legacy "The People" team-grid on About page.
   ═══════════════════════════════════════════ */
.natmar-social-proof-header {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.natmar-social-proof-header .overline {
  color: #48AD17;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.natmar-social-proof-header h2 {
  color: #1E201D;
  font-weight: 700;
  line-height: 1.1;
  margin: 8px 0 0;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
}

.natmar-social-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
}

.natmar-social-proof-card {
  position: relative;
  background: #FAFAFA;
  border: 1px solid #CACCC7;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease, border-color 220ms ease;
}
a.natmar-social-proof-card:hover {
  transform: translateY(-3px);
  border-color: #48AD17;
}

/* Bento spans */
.natmar-social-proof-card.is-wide    { grid-column: span 2; }
.natmar-social-proof-card.is-tall    { grid-row: span 2; }
.natmar-social-proof-card.is-feature { grid-column: span 2; grid-row: span 2; }

/* Media area (image / video variants) */
.natmar-social-proof-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #1E201D;
  overflow: hidden;
}
.natmar-social-proof-card.is-feature .natmar-social-proof-media { aspect-ratio: 16 / 9; }
.natmar-social-proof-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Inline YouTube iframe in a video-variant card (24.01.02.6 brief) */
.natmar-social-proof-youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
/* MetalCon hotlinked image is taller than the default 16/10 frame — let it
   contain so the full banner reads. */
.natmar-social-proof-card.variant-image .natmar-social-proof-media img {
  object-fit: contain;
  background: #FFFFFF;
}
.natmar-social-proof-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #48AD17;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(72, 173, 23, 0.06) 0,
      rgba(72, 173, 23, 0.06) 12px,
      rgba(72, 173, 23, 0.10) 12px,
      rgba(72, 173, 23, 0.10) 24px
    ),
    #2A2A2A;
}
.natmar-social-proof-placeholder .placeholder-label {
  background: rgba(0,0,0,0.55);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px dashed rgba(72,173,23,0.5);
  color: #7AEF00;
}
.natmar-social-proof-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #FAFAFA;
  background: rgba(0,0,0,0.25);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Badge variant (icon-only cards) */
.natmar-social-proof-card.variant-badge { padding: 18px 20px; }
.natmar-social-proof-badge-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
}

/* Body */
.natmar-social-proof-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.natmar-social-proof-card.variant-badge .natmar-social-proof-body { padding: 0; }
.natmar-social-proof-headline {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: #1E201D;
}
.natmar-social-proof-card.is-feature .natmar-social-proof-headline { font-size: 1.25rem; }
.natmar-social-proof-caption {
  margin: 0;
  color: #3F413B;
  font-size: 0.875rem;
  line-height: 1.5;
}
.natmar-social-proof-arrow {
  margin-top: auto;
  align-self: flex-start;
  font-size: 1rem;
  color: #48AD17;
  transition: transform 200ms ease;
  padding-top: 4px;
}
a.natmar-social-proof-card:hover .natmar-social-proof-arrow { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1024px) {
  .natmar-social-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .natmar-social-proof-card.is-feature,
  .natmar-social-proof-card.is-wide { grid-column: span 2; }
  .natmar-social-proof-card.is-tall { grid-row: auto; }
}
@media (max-width: 600px) {
  .natmar-social-proof-grid {
    grid-template-columns: 1fr;
  }
  .natmar-social-proof-card.is-feature,
  .natmar-social-proof-card.is-wide { grid-column: span 1; }
}

/* Recent Builds section — now uses dark bg per 24.01.02.5 brief. Overline gets
   volt (#7AEF00) which is the canonical overline color on dark backgrounds; the
   global .overline { color: var(--volt) !important } already provides this, no
   override needed. */
/* Other patterns still on light bg need the trail-green override. */
.natmar-3d-templates-section .natmar-3d-templates-header .overline,
.natmar-social-proof-bento-section .natmar-social-proof-header .overline,
.natmar-review-carousel-section .natmar-review-header .overline {
  color: var(--trail-green, #48AD17) !important;
}

/* Reviews section is now mid-tone bg (24.01.02.6 brief). Recolor headers,
   cards, stars, body text, and toggle button so it reads on light bg. */
.natmar-review-carousel-section .natmar-review-header h2 {
  color: #1E201D;
}
.natmar-review-carousel-section .natmar-review-card {
  background: #FAFAFA;
  border-color: #CACCC7;
}
.natmar-review-carousel-section .natmar-review-card:hover {
  border-color: #48AD17;
}
.natmar-review-carousel-section .natmar-review-stars {
  color: #48AD17;
}
.natmar-review-carousel-section .natmar-review-text {
  color: #3F413B;
}
.natmar-review-carousel-section .natmar-review-meta {
  border-top-color: #CACCC7;
}
.natmar-review-carousel-section .natmar-review-name {
  color: #1E201D;
}
.natmar-review-carousel-section .natmar-review-date {
  color: #6B6E68;
}
.natmar-review-carousel-section .natmar-review-toggle {
  color: #1E201D;
  border-color: #CACCC7;
}
.natmar-review-carousel-section .natmar-review-toggle:hover {
  border-color: #48AD17;
  background: rgba(72, 173, 23, 0.08);
}

/* Recent Builds dark-section refinements — arrow controls + portfolio link
   need to read on dark bg now. */
.natmar-recent-builds-section .natmar-recent-builds-prev,
.natmar-recent-builds-section .natmar-recent-builds-next {
  background: transparent;
  color: #FAFAFA;
  border-color: rgba(255,255,255,0.25);
}
.natmar-recent-builds-section .natmar-recent-builds-prev:hover,
.natmar-recent-builds-section .natmar-recent-builds-next:hover {
  border-color: #7AEF00;
  background: rgba(122, 239, 0, 0.08);
}
.natmar-recent-builds-section .natmar-recent-builds-link {
  color: #FAFAFA;
  border-color: rgba(255,255,255,0.25);
}
.natmar-recent-builds-section .natmar-recent-builds-link:hover {
  border-color: #7AEF00;
  background: rgba(122, 239, 0, 0.08);
}
.natmar-recent-builds-section .natmar-recent-builds-frame {
  background: #0F0F0F;
}
/* Track scrollbar on dark bg */
.natmar-recent-builds-section .natmar-recent-builds-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
}

/* ═══════════════════════════════════════════
   Review carousel → CTA bridge.
   Reviews section is now mid-tone (#DCDFD9, 24.01.02.6 brief), so the
   divider below it gets mid-tone bg to match the section above. The CTA
   below remains dark — that transition reads clean visually.
   ═══════════════════════════════════════════ */
.natmar-review-carousel-section + .wp-block-html,
.natmar-review-carousel-section + .wp-block-group {
  background: #DCDFD9;
}
.natmar-review-carousel-section + .wp-block-html .ridge-divider,
.natmar-review-carousel-section + .wp-block-group .ridge-divider {
  background: #DCDFD9 !important;
}
.natmar-review-carousel-section + .ridge-divider,
.natmar-review-carousel-section ~ .ridge-divider:first-of-type {
  background: #DCDFD9 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Belt-and-suspenders: any ridge-divider that immediately precedes the
   final cta-section also gets the dark backdrop, in case templates render
   the divider deeper inside a wrapper. */
.ridge-divider:has(+ .cta-section),
.ridge-divider:has(+ .wp-block-group.cta-section),
.ridge-divider:has(+ div .cta-section) {
  background: #1E1E1E !important;
  padding-top: 0 !important;
}

/* Recent Builds → next-section bridge.
   The ridge-divider directly after Recent Builds (dark) was originally painted
   #1E1E1E to bridge into a then-dark Review section (24.01.02.5). With the
   Review section now mid-tone (#DCDFD9, 24.01.02.6), that dark fill became a
   visible "black bar" at the top of the mid-tone testimonial section
   (reported via 24.01.02.8 follow-up). Repaint the divider mid-tone so it
   matches the section BELOW it instead. The mountain-ridge SVG (green stroke)
   reads cleanly against either color. */
.natmar-recent-builds-section + .ridge-divider,
.natmar-recent-builds-section + .wp-block-html .ridge-divider,
.natmar-recent-builds-section + .wp-block-group .ridge-divider {
  background: #DCDFD9 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.natmar-recent-builds-section + .wp-block-html,
.natmar-recent-builds-section + .wp-block-group {
  background: #DCDFD9;
}

/* ═══════════════════════════════════════════
   Spec callout BENTO grid — 24.01.02 refinement.
   3-col base grid with mixed 1/2/3 spans per cell (data-span attribute)
   creating an aesthetic info-chart bento. Applies to all 4 frame-type
   subpages (cold-formed-steel, red-iron, framecad, tubular).
   ═══════════════════════════════════════════ */
.natmar-spec-grid.is-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #A8ACA5;
  border: 1px solid #A8ACA5;
  width: 100%;
}
.natmar-spec-grid.is-bento .natmar-spec-cell {
  background: #FAFAFA;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  justify-content: center;
}
.natmar-spec-grid.is-bento .natmar-spec-cell[data-span="1"] { grid-column: span 1; }
.natmar-spec-grid.is-bento .natmar-spec-cell[data-span="2"] { grid-column: span 2; }
.natmar-spec-grid.is-bento .natmar-spec-cell[data-span="3"] { grid-column: span 3; }
/* Wider cells get a slightly more generous label/value typographic scale */
.natmar-spec-grid.is-bento .natmar-spec-cell[data-span="3"] .natmar-spec-value { font-size: 1.55rem; }
.natmar-spec-grid.is-bento .natmar-spec-cell[data-span="2"] .natmar-spec-value { font-size: 1.45rem; }
.natmar-spec-grid.is-bento .natmar-spec-cell[data-span="1"] .natmar-spec-value { font-size: 1.35rem; }

/* Responsive: collapse to 2-col then 1-col, all spans become full row */
@media (max-width: 900px) {
  .natmar-spec-grid.is-bento { grid-template-columns: repeat(2, 1fr); }
  .natmar-spec-grid.is-bento .natmar-spec-cell[data-span] { grid-column: span 2; }
}
@media (max-width: 500px) {
  .natmar-spec-grid.is-bento { grid-template-columns: 1fr; }
  .natmar-spec-grid.is-bento .natmar-spec-cell[data-span] { grid-column: span 1; }
}

/* ═══════════════════════════════════════════
   24.01.02.18 Item F — Hero overlay top-edge fix
   Audit reported a thin strip at viewport top above the nav on
   /why-steel, /3d-designer, /financing, /permit-guide, and
   /contractor-vetting where the hero background image was visible
   without the dark overlay. Belt-and-suspenders fix:
     1. Extend overlay inset by -2px so any sub-pixel render gap is
        covered without changing apparent dimensions.
     2. Add a ::before gradient cap on .natmar-hero-split that paints
        an extra dark band on the top 96px, behind the transparent
        fixed header. This guarantees the area under the nav reads
        dark even if the main overlay misses by a pixel or two.
   ═══════════════════════════════════════════ */
.natmar-hero-split .hero-split-bg,
.natmar-hero-split .hero-split-overlay {
  inset: -2px;
}
.natmar-hero-split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 100%);
  z-index: 1; /* above bg image (z-0), beside overlay (z-1), below content (z-2) */
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   24.01.02.18b #3a — Homepage hero on portrait mobile
   Audit: fixed header was overlapping the hero title text. Fix:
     1. Push hero-content below the fixed header with padding-top
        sized to the mobile header (~88px including +20% logo).
     2. Tighten the title→subtitle gap so the dense above-fold content
        fits inside the portrait viewport.
     3. Shrink the stat-row gap from 24px → 12px so 3 stat columns
        actually fit on narrow screens without wrapping awkwardly.
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The .hero parent uses justify-content:flex-end and min-height:100vh,
     which pushes content to the bottom. On portrait the content overflows
     UP into the fixed header area. Add a safety pad so content starts
     below header even when it overflows. */
  .hero {
    padding-top: 88px;
  }
  .hero h1 {
    /* was margin-bottom: 28px on desktop; tighten on mobile */
    margin-bottom: 14px;
  }
  .hero-content > .hero-thin {
    /* WP block .hero-thin gets default margin from the layout's blockGap
       (var:preset|spacing|lg). Override on mobile to pull stats closer. */
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  .hero-meta,
  .hero-meta.wp-block-columns {
    /* 24.01.02.18b #1 follow-up — distinct column vs row gap. When the
       three stats fit horizontally (≥520px-ish viewport), 12px between
       them. When they wrap to a vertical stack (narrow portrait), 28px
       between rows so each value↔label pair reads as a unit instead of
       label running into the next value. */
    column-gap: 12px !important;
    row-gap: 28px !important;
    margin-bottom: 24px;
  }
  .hero-meta .hero-meta-item {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px !important; /* tight pair: value sits close to its own label */
  }
  /* Kill default WP paragraph margins inside each stat so the explicit
     hero-meta-item gap above is the only spacer between value and label. */
  .hero-meta .hero-meta-item p {
    margin: 0 !important;
  }
  /* Also reduce blockGap on the hero-content WP layout itself so the
     section-block-gap doesn't add extra space between h1, subtitle, stats,
     and CTAs that we've just tightened individually. */
  .hero-content.wp-block-group {
    row-gap: 12px;
  }
}

/* ═══════════════════════════════════════════
   24.01.02.18b #4 — Split hamburger parent-link tap zones
   The .natmar-menu-toggle button sits to the RIGHT of each
   .has-submenu's parent anchor. Tapping the anchor (left side, where
   the text is) navigates to the parent page; tapping the button
   (right side, large green chev) toggles the submenu.
   ═══════════════════════════════════════════ */

/* Toggle button is mobile-only — desktop uses hover-driven submenu. */
.natmar-menu-toggle {
  display: none;
}

@media (max-width: 1024px) {
  /* Toggle is absolutely positioned over the right edge of each row,
     exactly where the original inline ▾ chev sat. This avoids fighting
     the existing .natmar-menu > li > a { width: 100% } rule that was
     pushing the toggle below the text in the previous flex layout. */
  .has-submenu {
    position: relative;
  }
  /* Right padding on the anchor keeps the text from running under the
     toggle's tap zone. */
  .natmar-menu > .has-submenu > a {
    padding-right: 48px;
  }

  .natmar-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;       /* full row height — generous tap zone */
    width: 48px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: var(--volt);
    cursor: pointer;
    /* 24.01.02.18b round 5 — removed the -webkit-tap-highlight-color
       and :active green tint. User feedback: "I do not like the new
       one's highlight effect in the background when tapped". The
       rotation animation now lives on the SVG only so it can't be
       perceived as the BUTTON spinning with a green background. */
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
  }
  .natmar-menu-toggle svg {
    display: block;
    /* Override the SVG's intrinsic width=32/height=32 from the markup —
     the user-reported "too big" complaint was the 32px chev. 22px reads
     as a discoverable affordance without dominating the row. */
    width: 22px;
    height: 22px;
    transition: transform 0.2s ease;
  }
  .has-submenu.is-expanded > .natmar-menu-toggle svg {
    transform: rotate(180deg);
  }

  /* Hide the inline desktop chev inside the parent anchor on mobile.
     Specificity 0,2,0 ties with `.natmar-menu .chev` so source-order wins —
     placing this AFTER the desktop rules guarantees mobile display:none. */
  .natmar-menu .natmar-chev-inline {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   24.01.02.18b — Mobile floating Get-a-Quote CTA
   Replaces the header-embedded CTA on mobile (≤1024px). Tracks the
   existing body.is-header-hidden scroll-direction class so it shows /
   hides in sync with the sticky header. Always hidden on desktop.
   ═══════════════════════════════════════════ */

/* Hide the header CTA on mobile — the floating button below takes over. */
@media (max-width: 1024px) {
  .nav-cta-wrap {
    display: none !important;
  }
}

/* Default (desktop): floating button is fully hidden. */
.natmar-floating-cta {
  display: none;
}

@media (max-width: 1024px) {
  .natmar-floating-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 9000;

    background: var(--volt);
    color: var(--obsidian);
    text-decoration: none;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 22px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    -webkit-tap-highlight-color: rgba(122, 239, 0, 0.18);

    /* 24.01.02.18b round 6 — DEFAULT state is hidden. The hero CTA on the
       home page (and inner-page heroes) needs to "own" the bottom-of-screen
       at first load with no competition from the floating button. Shown
       only when both `body.is-past-hero` AND not `body.is-header-hidden`. */
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    will-change: opacity, transform;
  }
  .natmar-floating-cta:active {
    background: var(--trail-green);
    color: var(--snowfield);
  }
  .natmar-floating-cta-label {
    white-space: nowrap;
  }
  /* Show only when the viewport has scrolled past the hero AND the sticky
     header is currently revealed (scrolling up or at top after scroll). */
  body.is-past-hero:not(.is-header-hidden) .natmar-floating-cta {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}