/* Site-wide photo layouts (imagery pass, 2026-11-12). Loaded globally from renderer.tsx.
   Components: .px-hero, .px-split (+ --rev), .px-band, .px-figure, .px-list, .px-steps; section tones .px-tone-*.
   Every tone sets a solid background-color (contrast audit reads background-color only). */
.px-tone-sage   { background-color: #e7efe9; }
.px-tone-sky    { background-color: #e6eef6; }
.px-tone-clay   { background-color: #f4e7dc; }
.px-tone-sand   { background-color: #f5edd8; }
.px-tone-forest { background-color: #2f5d4e; color: rgba(255,255,255,0.92); }
.px-tone-slate  { background-color: #2c3e50; color: rgba(255,255,255,0.92); }
.px-tone-rust   { background-color: #7a3e22; color: rgba(255,255,255,0.94); }
.px-tone-forest h1, .px-tone-forest h2, .px-tone-forest h3, .px-tone-forest h4, .px-tone-forest strong,
.px-tone-slate h1, .px-tone-slate h2, .px-tone-slate h3, .px-tone-slate h4, .px-tone-slate strong,
.px-tone-rust h1, .px-tone-rust h2, .px-tone-rust h3, .px-tone-rust h4, .px-tone-rust strong { color: #fff; }
.px-tone-forest p, .px-tone-forest li, .px-tone-slate p, .px-tone-slate li, .px-tone-rust p, .px-tone-rust li { color: rgba(255,255,255,0.9); }
.px-tone-forest a:not(.btn), .px-tone-slate a:not(.btn), .px-tone-rust a:not(.btn) { color: #fff; text-decoration: underline; }

.px-sec { padding: 5.5rem 0; }
.px-sec-tight { padding: 3.75rem 0; }

/* Hero with a real photo beside the headline */
.px-hero { background-color: var(--color-navy-deep); color: #fff; padding: 7rem 0 4.5rem; }
.px-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
.px-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.12; margin: 0.75rem 0 1.25rem; }
.px-hero .px-lead { font-size: 1.12rem; line-height: 1.75; color: rgba(255,255,255,0.88); max-width: 600px; }
.px-hero .px-lead strong { color: #fff; }
.px-hero .px-kicker { color: var(--color-gold-light); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.px-hero .hero-cta-group, .px-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.px-hero-photo { margin: 0; position: relative; }
.px-hero-photo img { width: 100%; height: auto; border-radius: 18px; display: block; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.px-hero-photo figcaption, .px-figure figcaption { font-size: 0.82rem; margin-top: 0.6rem; opacity: 0.75; }

/* Text + photo split */
.px-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.px-split--rev > .px-media { order: -1; }
.px-split--wide { grid-template-columns: 1.15fr 0.85fr; }
.px-media { margin: 0; }
.px-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow-md); }
.px-media.px-tall img { height: 100%; min-height: 440px; object-fit: cover; }
.px-split h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); margin: 0.4rem 0 1rem; }
.px-split p { font-size: 1.05rem; line-height: 1.75; margin-top: 0.9rem; }
.px-step { display: inline-block; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-dark); }
.px-tone-forest .px-step, .px-tone-slate .px-step, .px-tone-rust .px-step { color: var(--color-gold-light); }

/* Full-width photo band with a short line over it */
.px-band { position: relative; min-height: 360px; display: flex; align-items: flex-end; background-color: #1c2b3a; overflow: hidden; }
.px-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-band .px-band-text { position: relative; z-index: 1; width: 100%; padding: 2.5rem 0; background-color: rgba(15,30,51,0.78); color: #fff; }
.px-band .px-band-text p { color: #fff; font-size: 1.2rem; line-height: 1.6; max-width: 820px; margin: 0; }

/* Simple lists that replace repeated card grids */
.px-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.px-list li { border-left: 4px solid var(--color-gold); padding: 0.15rem 0 0.15rem 1.1rem; line-height: 1.65; }
.px-list li strong { display: block; margin-bottom: 0.15rem; }
.px-list--2 { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.px-steps { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.9rem; counter-reset: pxs; }
.px-steps li { counter-increment: pxs; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.9rem; align-items: start; line-height: 1.6; }
.px-steps li::before { content: counter(pxs); width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: var(--color-navy); color: #fff; display: grid; place-items: center; font-weight: 700; }

.px-figure { margin: 0; }
.px-figure img { width: 100%; height: auto; border-radius: 14px; display: block; }

@media (max-width: 900px) {
  .px-hero { padding: 6rem 0 3rem; }
  .px-hero-grid, .px-split, .px-split--wide { grid-template-columns: 1fr; gap: 2rem; }
  .px-split--rev > .px-media { order: 0; }
  .px-media.px-tall img { min-height: 0; height: auto; }
  .px-list--2 { grid-template-columns: 1fr; }
  .px-sec { padding: 4rem 0; }
  .px-band { min-height: 280px; }
}