/* Archetype-specific layouts — each prospect gets a distinct structure */

body.prospect { color: var(--text); }
body.mode-light { color: var(--text); }
body.mode-light .hero p, body.mode-light .lead, body.mode-light .section-head p { color: var(--muted); }
body.mode-light .service-card, body.mode-light .review-card, body.mode-light .process-grid article {
  background: var(--surface); border-color: color-mix(in srgb, var(--text) 8%, transparent);
}
body.density-compact .section { padding: 2.5rem 0; }
body.density-spacious .section { padding: 5rem 0; }
body.density-spacious .hero { padding: 6rem 0 4rem; }

/* Nav variants */
.topbar, .legal-header, .acct-header, .therapy-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem clamp(1rem, 4vw, 2rem);
}
.top-nav { display: flex; gap: 1rem; align-items: center; }
.top-nav a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.nav-cta { padding: .5rem 1rem !important; font-size: .85rem !important; }
.topbar--minimal, .topbar--logo { justify-content: center; }
.legal-header--gold { background: linear-gradient(90deg, var(--bg), var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

/* Emergency / trade */
.emergency-banner, .urgency--top {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #111; font-weight: 700; padding: .65rem 1rem; border-radius: 10px; margin-bottom: 1.25rem;
}
.hero--emergency .hero__inner { max-width: 720px; }
.hero--split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 4rem clamp(1rem, 4vw, 2rem); }
.hero__panel .panel-card { padding: 1.5rem; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.hero--map .hero-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.hero-map-visual { padding: 2rem; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.map-pin { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.map-grid span { font-size: .85rem; padding: .5rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hero--bold { text-align: center; padding: 6rem 0; }
.hero--bold__title { font-size: clamp(2.5rem, 8vw, 4.5rem); text-transform: uppercase; letter-spacing: .02em; }
.hero--bold__sub { max-width: 50ch; margin-inline: auto; }
.hero-featured-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: start; }
.featured-card { padding: 1.5rem; border-radius: 16px; background: var(--surface); border-left: 4px solid var(--accent); }
.featured-card ul { list-style: none; padding: 0; margin: 0; }
.featured-card li { padding: .4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }

/* Plumber */
.hero--phone { text-align: center; }
.hero--phone .hero__inner { max-width: 640px; margin-inline: auto; }
.phone-cta {
  display: inline-flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: 1.25rem 2.5rem; border-radius: 20px; background: var(--accent); color: #111;
  text-decoration: none; font-weight: 800; margin-top: 1rem;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 35%, transparent);
}
.phone-cta__label { font-size: 1.35rem; }
.phone-cta__sub { font-size: .85rem; font-weight: 600; opacity: .85; }
.hero--compact { text-align: center; padding: 3rem 0; }
.hero-dual-grid { text-align: center; }
.dual-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.25rem 0; }
.dual-pills span { padding: .45rem .9rem; border-radius: 999px; background: var(--surface); font-size: .88rem; }
.hero--local { text-align: center; }
.license-badge { display: inline-block; padding: .35rem .85rem; border-radius: 999px; background: var(--surface); font-size: .8rem; color: var(--accent); margin-bottom: 1rem; }
.trust-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.25rem 0; }
.trust-chips span { padding: .4rem .75rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 15%, transparent); font-size: .85rem; }
.hero--industrial { border-bottom: 3px solid var(--accent); }
.industrial-cta { text-transform: uppercase; letter-spacing: .04em; }
.urgency { background: color-mix(in srgb, var(--accent) 18%, transparent); padding: 1rem 0; text-align: center; font-weight: 600; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1.5rem; background: var(--surface); }
.trust-strip span { font-size: .88rem; font-weight: 600; }

/* Lawyer */
.hero-legal-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; }
.hero-legal-form { padding: 1.5rem; border-radius: 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.legal-bullets { list-style: none; padding: 0; }
.legal-bullets li { padding: .35rem 0 .35rem 1.25rem; position: relative; color: var(--muted); }
.legal-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.hero--editorial { text-align: center; }
.editorial-lead { font-size: 1.15rem; font-style: italic; }
.hero--dark-gold { text-align: center; background: linear-gradient(180deg, var(--surface), var(--bg)); }
.gold-line { color: var(--accent); letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; }
.btn-gold { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #111; padding: .85rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 700; display: inline-block; }
.hero--split-trust .split-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.trust-panel { padding: 1.5rem; border-radius: 12px; background: var(--surface); border-top: 3px solid var(--accent); }
.cred-box { text-align: center; padding: 2rem; border-radius: 16px; background: var(--surface); }
.cred-license { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); }

/* Accountant */
.hero-acct-inner { text-align: center; max-width: 720px; margin-inline: auto; }
.stats-bar { background: var(--surface); padding: 1.5rem 0; border-block: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.stats-grid strong { display: block; font-size: 1.75rem; color: var(--accent); font-family: var(--font-display); }
.stats-grid span { font-size: .85rem; color: var(--muted); }
.cred-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.cred-highlight { padding: 1.5rem; border-radius: 12px; background: var(--surface); border-left: 4px solid var(--accent); }
.hero-svc-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.hero-svc-preview article { padding: 1rem; border-radius: 12px; background: var(--surface); text-align: center; }
.hero--light-warm { background: var(--surface); border-radius: 0 0 24px 24px; }
.acct-cred .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cred-card { padding: 1.25rem; border-radius: 12px; background: var(--surface); }
.contact-card { max-width: 520px; margin-inline: auto; text-align: center; }

/* Psychologist */
.bento-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 1rem; align-items: stretch; }
.bento-main { padding: 2rem; border-radius: 24px; background: var(--surface); }
.bento-side { display: flex; flex-direction: column; gap: 1rem; }
.bento-tile { flex: 1; padding: 1.25rem; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-size: .95rem; }
.therapy-badge { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); font-size: .82rem; margin-bottom: 1rem; }
.portrait-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.portrait-placeholder {
  aspect-ratio: 4/5; border-radius: 24px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent) 20%, var(--surface)));
  display: grid; place-items: center; color: var(--muted); font-style: italic;
}
.hero--forest { background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); }
.hero--pastel { text-align: center; }
.script-accent { font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 1.1rem; }
.approach-list { list-style: none; padding: 0; }
.approach-list li { padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.therapy-note { font-size: .85rem; color: var(--muted); margin-top: 1rem; text-align: center; }
.therapy-header--gentle { justify-content: center; gap: 2rem; }

/* Card style modifiers */
body.cards-sharp .service-card, body.cards-sharp .panel-card { border-radius: 4px; }
body.cards-pill .service-card { border-radius: 24px; }
body.cards-bento-round .service-card { border-radius: 20px; }
body.cards-gold-border .cred-box { border: 1px solid var(--accent); }
body.cards-elegant-soft .section { letter-spacing: .01em; }

/* Shared */
.trust-inline { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.trust-inline li { font-size: .85rem; padding: .4rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.area-box { text-align: center; padding: 2rem; border-radius: 16px; background: var(--surface); }
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.meta { list-style: none; padding: 0; color: var(--muted); }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.featured-grid article { padding: 1.25rem; border-radius: 14px; background: var(--surface); }

@media (max-width: 768px) {
  .hero--split, .hero--map .hero-map-grid, .hero-featured-grid, .hero-legal-grid,
  .hero--split-trust .split-trust-grid, .bento-grid, .portrait-grid, .cred-split-grid,
  .acct-cred .split, .contact-split, .hero-svc-preview, .stats-grid { grid-template-columns: 1fr; }
}