/* JP2BA — home page.
   Classes extracted from the approved one-page template. Values are the
   template's own; component-level rules live in base.css. */

/* Recurring patterns */
.flex-none { flex:none; }
.card-title { font:var(--type-h3); font-size:var(--text-xl); color:var(--text-heading); text-transform:uppercase; margin:0; }
.card-text { font:var(--type-body-sm); color:var(--text-body); margin:var(--space-3) 0 0; }
.label-muted { font:var(--type-label); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--text-muted); }
.grid-stack { display:grid; gap:var(--space-4); }
.container-flush { max-width:var(--container-max); margin:0 auto; }
.card-title-lg { font:var(--type-h2); font-size:var(--text-2xl); color:var(--text-heading); text-transform:uppercase; margin:0; }
.card-text-tight { font:var(--type-body-sm); color:var(--text-body); margin-top:var(--space-3); }
.logo-img-56 { height:56px; width:auto; display:block; }
.section.section-anchor.section-clip { background:#121212; padding:var(--section-y) var(--gutter); scroll-margin-top:84px; position:relative; overflow:hidden; }
.row-between-baseline { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.label-accent { font:var(--type-label); letter-spacing:var(--tracking-label); color:var(--text-accent); }
.body-text { font:var(--type-body); color:var(--text-body); margin:0; }
.section.section-raised.section-anchor { background:var(--surface-raised); padding:var(--section-y) var(--gutter); scroll-margin-top:84px; }
.body-text-spaced { font:var(--type-body); color:var(--text-body); margin-top:var(--space-6); }
.body-link { font:var(--type-body); text-decoration:none; }

/* --- about --- */
.about-1 { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-16); align-items:center; }
.about-2 { background:#000; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); }
.about-3 { width:100%; display:block; }
.about-4 { font:var(--type-label); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--text-accent); margin-top:var(--space-8); }
.about-5 { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-6); }

/* --- benefits --- */
.benefits-1 { position:absolute; inset:0; background:url("../images/photo-live-rep-cutout.png") no-repeat center 18% / cover; mix-blend-mode:screen; opacity:.85; pointer-events:none; }
.benefits-2 { position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,18,18,.82) 0%,rgba(18,18,18,.68) 45%,rgba(18,18,18,.88) 100%); pointer-events:none; }
.benefits-3 { position:relative; max-width:var(--container-max); margin:0 auto; }
.benefits-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-6); margin-top:var(--space-12); }

/* --- contact --- */
.contact-1 { position:absolute; inset:0; background:url("../images/jp2ba-mark.png") no-repeat right -40px center / auto 110%; opacity:.05; filter:blur(6px); pointer-events:none; }
.contact-2 { position:relative; max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-16); align-items:start; }
.contact-3 { width:64px; }
.contact-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--space-4); }
.contact-5 { display:flex; flex-direction:column; gap:var(--space-2); }
.contact-6 { font:var(--type-body-sm); color:var(--text-heading); background:var(--surface-inset); border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:12px 14px; resize:vertical; }

/* --- creds --- */
.creds-1 { background:var(--surface-raised); padding:var(--space-10) var(--gutter); border-bottom:1px solid var(--border-subtle); }
.creds-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:var(--space-8); }
.creds-3 { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-top:var(--space-10); padding-top:var(--space-8); border-top:1px solid var(--border-subtle); text-align:center; }
.creds-4 { display:flex; align-items:center; justify-content:center; gap:var(--space-5); }
.creds-5 { font:var(--type-label); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--text-body); }
.creds-6 { font:var(--type-body-sm); font-size:var(--text-2xs); color:var(--text-muted); }

/* --- final --- */
.final-1 { background:var(--surface-raised); padding:var(--section-y) var(--gutter); border-top:2px solid var(--rule-copper); }
.final-2 { max-width:var(--container-narrow); margin:0 auto; text-align:center; }
.final-3 { font: var(--type-display); font-size: clamp(30px, 5vw, 48px); line-height: 1.1; color: var(--text-heading); text-transform: uppercase; margin: 0; text-wrap: pretty; line-height: 1.1; }
.final-4 { font:var(--type-body); color:var(--text-body); margin-top:var(--space-4); }
.final-5 { display:flex; gap:var(--space-3); justify-content:center; margin-top:var(--space-8); flex-wrap:wrap; }

/* --- hero --- */
.hero-1 { background:#121212; border-bottom:1px solid var(--border-subtle); }
.hero-2 { position:relative; max-width:var(--container-max); margin:0 auto; padding:var(--space-20) var(--gutter); display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-20); align-items:center; }
.hero-3 { font:var(--type-hero); font-size:clamp(32px, 5.6vw, 67px); line-height:1.02; color:var(--text-heading); text-transform:uppercase; margin:0; text-wrap:pretty; max-width:15ch; }
.hero-4 { color: var(--text-accent); }
.hero-5 { font:var(--type-body); font-size:var(--text-lg); color:var(--text-body); max-width:560px; margin-top:var(--space-6); }
.hero-6 { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); }
.hero-7 { display:flex; gap:var(--space-3); margin-top:var(--space-8); flex-wrap:wrap; }
.hero-8 { display:flex; gap:var(--space-2); margin:var(--space-4) 0 var(--space-6); }
.hero-9 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-4); }
.hero-10 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--space-4); }
.hero-11 { font:var(--type-body-sm); font-size:var(--text-2xs); color:var(--text-muted); margin:0; }

/* --- page --- */

/* --- programs --- */
.programs-1 { background:#121212; padding:var(--section-y) var(--gutter); scroll-margin-top:84px; }
.programs-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-6); margin-top:var(--space-12); }
.programs-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); margin-top:var(--space-6); }
.programs-4 { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin-top:var(--space-10); flex-wrap:wrap; }

/* --- proof --- */
.proof-1 { background:#121212; padding:var(--section-y) var(--gutter); }
.proof-2 { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-12); align-items:start; }
.proof-3 { font:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-accent); margin-bottom:var(--space-4); }
.proof-4 { font:var(--type-body-sm); color:var(--text-body); margin:var(--space-4) 0 var(--space-6); }

/* --- rgr --- */
.rgr-1 { background:var(--surface-light); padding:var(--section-y) var(--gutter); scroll-margin-top:84px; --text-accent:#A05726; border-top:2px solid var(--rule-copper); }
.rgr-2 { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-16); align-items:center; }
.rgr-3 { font:var(--type-body); color:var(--text-on-light); margin-top:var(--space-6); }
.rgr-4 { font:var(--type-body-sm); color:var(--text-on-light-muted); margin-top:var(--space-4); }
.rgr-5 { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-8); }
.rgr-6 { display:inline-flex; --text-heading:#A05726; }
.rgr-7 { background:var(--surface-page); border:1px solid var(--border-subtle); border-top:2px solid var(--rule-copper); border-radius:var(--radius-md); padding:var(--space-8); }
.rgr-8 { font:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:#C98A55; margin:0 0 var(--space-5); }
.rgr-9 { grid-column:1 / -1; display:flex; gap:var(--space-3); padding:12px; border:1px solid var(--neutral-200); border-radius:var(--radius-sm); background:var(--surface-light); }
.rgr-10 { font:var(--type-body-sm); color:var(--text-muted); margin:var(--space-6) 0 0; }

/* Hover states carried over from the template's style-hover attributes */