/* New Orleans metro business services page. The body carries both .nuclear
   and .local: it reuses the service-page layout from nuclear.css, and this
   file re-themes it (brass accent) and adds the page's own components. */
.local {
  --bg: #0c0b09;
  --bg-card: #16130f;
  --border: #2f2a22;
  --text: #f4f0e8;
  --text-dim: #b8ae9e;
  --accent: #ecc27e;
  --accent-2: #ecc27e;
  --amber: #ecc27e;
}
.local .button-primary { color: #2b1d06; }
.local .button-primary:hover { background: #f7dcaa; }
.local .crumbs a:hover, .local .form-note a { color: var(--accent); }

/* Re-theme the shared service-page sections */
.local .nx-hero { background: radial-gradient(ellipse 60% 70% at 78% 40%, #5a3d1240, transparent 65%); }
.local .caps, .local .approach { background: #100e0b; }
.local .gid { border-color: #4a4032; }
.local .cap-card:hover { border-color: #5a4c37; }
.local .cap-card:target, .local .ai-card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 40px #ecc27e22; }
.local .cap-id { color: #857a69; }
.local .deliv li { color: #ddd5c8; }
.local .ai { background: radial-gradient(ellipse 50% 60% at 15% 0%, #5a3d1238, transparent 70%), var(--bg); }
.local .ai-principles { background: #4a3c26; border-color: #4a3c26; }
.local .ai-principles li { background: #17130d; }
.local .ai-card { background: linear-gradient(160deg, #1b1610, #120f0b); border-color: #3a3123; }
.local .ai-card:hover { border-color: #5e4e36; }
.local .ai-lead { background: radial-gradient(ellipse at 100% 0%, #ecc27e1f, transparent 60%), linear-gradient(160deg, #211a10, #120f0b); border-color: #5a4a30; }
.local .steps li::before { background: linear-gradient(90deg, #4d4232, transparent); }
.local .steps li:first-child .sn { color: #2b1d06; }
.local .consult { border-top-color: #4a3c26; background: radial-gradient(ellipse 60% 80% at 0% 100%, #5a3d1255, transparent 70%), #110e0a; }
.local .consult-form { border-color: #43382a; background: #15110c; }
.local .consult-form input:not([type="checkbox"]), .local .consult-form select, .local .consult-form textarea { border-color: #3a3226; background: #0b0906; }
.local .consult-form input:focus, .local .consult-form select:focus, .local .consult-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #ecc27e26; }
.local .consult-form label, .local .consult-form legend { color: #d8cfc1; }
.local .chips span { border-color: #3a3226; }
.local .chips label:hover span { border-color: #64543c; }
.local .chips input:checked + span { background: #ecc27e1f; }

/* ── Hero: operations board illustration ───────────── */
.ops { border: 1px solid #3a3226; border-radius: 8px; background: #0d0b08; box-shadow: 0 30px 80px #0009; overflow: hidden; font: 9.5px/1.5 ui-monospace, 'Cascadia Code', Consolas, monospace; letter-spacing: .08em; color: #a3988a; }
.ops-bar, .ops-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: #13100c; }
.ops-bar { border-bottom: 1px solid #2a241b; }
.ops-bar span:first-child { display: flex; align-items: center; gap: 8px; color: var(--text); }
.ops-live { color: var(--ok); }
.ops-foot { justify-content: flex-end; gap: 24px; border-top: 1px solid #2a241b; }
.ops-foot span:last-child { color: var(--ok); }
.ops-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1px; background: #241f17; }
.ops-body > div { background: #0d0b08; padding: 14px; }
.ops-col-label { margin-bottom: 10px; color: #857a69; }
.ops-in, .ops-out { list-style: none; display: grid; gap: 7px; }
.ops-in li, .ops-out li { padding: 8px 10px; border: 1px solid #2c261d; border-radius: 3px; background: #14110c; color: #d8cfc1; letter-spacing: .03em; line-height: 1.4; }
.ops-in small, .ops-out small { display: block; color: #857a69; font-size: 8px; letter-spacing: .08em; }
.ops-out li { position: relative; padding-left: 26px; animation: ops-done .5s ease-out both; }
.ops-out li::before { content: '✓'; position: absolute; left: 9px; top: 8px; color: var(--ok); font-weight: 700; }
.ops-out li:nth-child(1) { animation-delay: .5s; } .ops-out li:nth-child(2) { animation-delay: .9s; }
.ops-out li:nth-child(3) { animation-delay: 1.3s; } .ops-out li:nth-child(4) { animation-delay: 1.7s; }
.ops-core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 96px; text-align: center; }
.ops-core b { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(#fff4dc, #ecc27e); color: #2b1d06; font: 700 10px/1.2 'Segoe UI', sans-serif; letter-spacing: .05em; box-shadow: 0 0 0 6px #ecc27e1a, 0 0 30px #ecc27e40; animation: ops-pulse 2.4s ease-in-out infinite; }
.ops-core span { color: #857a69; font-size: 8px; line-height: 1.6; }
.ops-arrow { color: var(--accent); font-size: 14px; letter-spacing: 0; }
.local .nx-chip { background: #1a160f; border-color: #4a3e2c; }
.chip-pin, .chip-price { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #ecc27e1f; border: 1px solid #ecc27e66; color: var(--accent); }
.chip-pin svg, .chip-price svg { width: 16px; height: 16px; }
.chip-onsite { top: 0; right: -14px; transform: rotate(3deg); }
.chip-fixed { bottom: 0; left: -22px; transform: rotate(-3deg); }
.local .proof svg { color: var(--accent); }

/* ── Problems ───────────────────────────────────────── */
.problems { border-top: 1px solid var(--border); }
.problem-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Each card: the problem, small and dim; the solution, large and lit. */
.problem-grid li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); }
.problem-grid .tag { display: block; font: 9px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .14em; color: #857a69; }
.prob { padding: 22px 26px 20px; border-bottom: 1px solid var(--border); }
.prob p { margin-top: 8px; font-size: .86rem; line-height: 1.6; color: var(--text-dim); }
.sol { padding: 24px 26px 28px; background: radial-gradient(ellipse at 100% 0%, #ecc27e14, transparent 65%); }
.sol .tag { color: var(--accent); }
.local .problem-grid h3 { margin-top: 10px; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.25; }
.sol p { margin-top: 10px; font-size: .9rem; line-height: 1.7; color: #ddd5c8; }

/* ── Capabilities grid ──────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.svc-grid .gid { width: 38px; height: 38px; font-size: .95rem; margin-bottom: 18px; }
.svc-grid .text-link { margin-top: 20px; color: var(--accent); }
.local .pillars a { color: var(--accent); }

/* ── Assessment price ───────────────────────────────── */
.price { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.local .price b { font-size: 2.6rem; font-weight: 650; letter-spacing: -.04em; color: var(--accent); }
.price span { font-size: .84rem; color: var(--text-dim); }

/* ── Service area ───────────────────────────────────── */
.area { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; margin-top: 64px; padding: 40px; border: 1px solid #4a3c26; border-radius: 9px; background: radial-gradient(ellipse at 0% 0%, #ecc27e12, transparent 60%), var(--bg-card); }
.local .area h3 { font-size: 1.9rem; margin-top: 14px; letter-spacing: -.03em; }
.area > div > p:not(.eyebrow) { margin-top: 12px; color: var(--text-dim); font-size: .9rem; line-height: 1.75; }
.parishes { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }
.parishes li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: .92rem; }
.parishes li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex-shrink: 0; }
.parishes li span { margin-left: auto; font: 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: #857a69; }

/* ── Motion ─────────────────────────────────────────── */
@keyframes ops-done { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes ops-pulse { 0%, 100% { box-shadow: 0 0 0 6px #ecc27e1a, 0 0 30px #ecc27e40; } 50% { box-shadow: 0 0 0 10px #ecc27e10, 0 0 40px #ecc27e55; } }

/* ── Neon mode ──────────────────────────────────────── */
:root[data-theme="neon"] .local .ai, :root[data-theme="neon"] .local .consult-form { background: #0b0619; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .chip-onsite { right: 0; } .chip-fixed { left: 0; }
  .area { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  .ops-body { grid-template-columns: 1fr; }
  .ops-bar span:nth-child(2), .ops-foot span:first-child { display: none; }
  .ops-core { flex-direction: row; min-width: 0; padding: 12px 14px !important; }
  .ops-core b { width: 48px; height: 48px; font-size: 8px; }
  .ops-arrow { transform: rotate(90deg); }
  .problem-grid, .svc-grid, .parishes { grid-template-columns: 1fr; }
  .area { padding: 26px; margin-top: 44px; }
  .local .steps li::before { background: #3a3226; }
}