/* ── Page-level layouts shared by umbrella + brand pages ── */

/* Hero variant: dark with side imagery slot */
.umb-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(68px + 64px);
  padding-bottom: 96px;
  color: var(--cream);
}
.umb-hero.green { background: var(--green-deep); }
.umb-hero.gold  { background: linear-gradient(180deg, #1a1a14 0%, #0F1D17 100%); }
.umb-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 25% 40%, var(--hero-wash, rgba(42,75,60,0.45)) 0%, transparent 70%);
  pointer-events: none;
}
.umb-hero.gold { --hero-wash: rgba(181,166,66,0.18); }
.umb-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 48px;
  align-items: center;
}
@media (min-width: 1000px) {
  .umb-hero-grid { grid-template-columns: 7fr 5fr; gap: 80px; }
}
.umb-hero h1 {
  font: 400 clamp(40px,7.5vw,84px)/1.02 var(--font-display);
  margin: 0 0 26px; letter-spacing: -0.01em; color: var(--cream);
}
.umb-hero h1 em { font-style: italic; }
.umb-hero h1 sup { font-size: 0.28em; vertical-align: super; opacity: 0.55; font-style: normal; }
.umb-hero p.lede { color: rgba(250,240,230,0.72); margin: 0 0 32px; max-width: 560px; }
.umb-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Visual side card */
.umb-visual {
  background: rgba(250,240,230,0.04);
  border: 1px solid rgba(250,240,230,0.12);
  border-radius: 18px;
  padding: 28px;
  position: relative; overflow: hidden;
}
.umb-visual::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 80% 20%, var(--card-wash, rgba(42,75,60,0.18)) 0%, transparent 70%);
}
.umb-visual-inner { position: relative; }
.umb-visual h4 {
  font: 600 10px/1.4 var(--font-body);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(250,240,230,0.5); margin: 0 0 18px;
}
.umb-visual .row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(250,240,230,0.08);
}
.umb-visual .row:last-child { border-bottom: none; }
.umb-visual .row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--swatch, var(--accent));
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}
.umb-visual .row .nm {
  font: 500 13px/1.3 var(--font-body); color: var(--cream); flex: 1;
}
.umb-visual .row .ds {
  font: 300 11px/1.3 var(--font-body); color: rgba(250,240,230,0.55);
}

/* Section label tag */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(42,75,60,0.08);
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.section-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.section-label.gold { background: rgba(181,166,66,0.12); color: #8A7A1F; }
.section-label.gold .dot { background: var(--accent); }
.section-label.terra { background: rgba(42,75,60,0.10); color: var(--green); }
.section-label.terra .dot { background: var(--green); }

/* Three-up feature grid */
.tri {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin-top: 56px;
}
@media (min-width: 800px) { .tri { grid-template-columns: repeat(3, 1fr); } .tri.tri-2 { grid-template-columns: repeat(2, 1fr); } }
.tri-card {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
}
.tri-card .num {
  font: 400 13px/1 var(--font-display); font-style: italic;
  color: var(--green); margin: 0 0 24px;
}
.tri-card.gold .num { color: var(--accent); }
.tri-card h4 {
  font: 400 22px/1.25 var(--font-display); color: var(--black); margin: 0 0 12px;
}
.tri-card h4 em { font-style: italic; color: var(--green); }
.tri-card.gold h4 em { color: var(--accent); }
.tri-card p { font: 300 14px/1.7 var(--font-body); color: var(--gray); margin: 0; }

/* Big quote block */
.quote-block {
  background: var(--green-deep); color: var(--cream);
  border-radius: 18px; padding: 56px 40px;
  position: relative; overflow: hidden;
}
.quote-block::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(181,166,66,0.12) 0%, transparent 70%);
}
.quote-mark {
  position: relative; font: 400 80px/0.8 var(--font-display); color: var(--accent);
  margin: 0 0 16px;
}
.quote-text {
  position: relative; font: 400 clamp(22px,2.6vw,32px)/1.45 var(--font-display);
  color: var(--cream); margin: 0 0 24px; max-width: 880px;
}
.quote-text em { font-style: italic; }
.quote-attr {
  position: relative; font: 600 10px/1.4 var(--font-body);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(250,240,230,0.55); margin: 0;
}

/* Service rows */
.service-row {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--cream-dark);
}
@media (min-width: 800px) { .service-row { grid-template-columns: 1fr 2fr 1fr; gap: 56px; } }
.service-row:last-child { border-bottom: none; }
.service-row .num {
  font: 400 13px/1 var(--font-display); font-style: italic;
  color: var(--green); margin: 0;
}
.service-row.gold .num { color: var(--accent); }
.service-row h4 { font: 400 26px/1.2 var(--font-display); color: var(--black); margin: 0 0 12px; }
.service-row h4 em { font-style: italic; color: var(--green); }
.service-row.gold h4 em { color: var(--accent); }
.service-row p { font: 300 14px/1.75 var(--font-body); color: var(--gray); margin: 0 0 14px; max-width: 580px; }
.service-row .meta {
  font: 600 10px/1.4 var(--font-body);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gray); margin: 0;
}

/* Sticky cross-promo: visit other umbrellas */
.cross-strip {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-top: 56px;
}
@media (min-width: 800px) { .cross-strip { grid-template-columns: 1fr 1fr; } }
.cross-card {
  border-radius: 14px; padding: 28px; position: relative;
  overflow: hidden;
}
.cross-card.green { background: var(--green); color: var(--cream); }
.cross-card.gold { background: var(--accent); color: var(--black); }
.cross-card.terra { background: var(--green); color: var(--cream); }
.cross-card.cream { background: var(--cream); color: var(--black); border: 1px solid var(--cream-dark); }
.cross-card .lbl {
  font: 600 10px/1.4 var(--font-body);
  letter-spacing: 0.32em; text-transform: uppercase;
  margin: 0 0 12px; opacity: 0.7;
}
.cross-card h5 { font: 400 26px/1.2 var(--font-display); margin: 0 0 10px; letter-spacing: -0.005em; }
.cross-card h5 em { font-style: italic; }
.cross-card p { font: 300 13px/1.65 var(--font-body); margin: 0 0 18px; opacity: 0.85; }
.cross-card .arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
}
.cross-card .arrow svg { transition: transform 0.18s; }
.cross-card:hover .arrow svg { transform: translateX(3px); }