/* pages.css — page-specific overrides only */

/* NRI: distance problem */
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .problem-grid { grid-template-columns: 1fr; } }
.problem { padding-top: var(--s-6); border-top: 2px solid var(--seal-red); }
.problem h4 { margin-bottom: var(--s-2); }
.problem p { font-size: var(--fs-sm); color: var(--text-muted); }

/* NRI: scope cards (annotated) */
.scope-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .scope-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .scope-list { grid-template-columns: 1fr; } }
.scope-item { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-6); border: 1px solid var(--line-dark); border-radius: var(--radius-card); background: var(--navy-800); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.scope-item:hover { border-color: rgba(217,176,97,.5); transform: translateY(-3px); }
.scope-item > svg { width: 22px; height: 22px; color: var(--emerald); margin-top: 2px; grid-row: 1 / span 2; }
.scope-item b { display: block; color: #fff; font-size: var(--fs-sm); }
.scope-item span { font-size: 0.8125rem; color: var(--slate-300); margin-top: 2px; display: block; }

/* NRI callback band (light, distinct from navy footer) */
.callback-band { background: linear-gradient(180deg, #E9F0F5 0%, #F4F5F7 100%); border-block: 1px solid var(--line); }
.callback-band .split { align-items: stretch; }
.callback-intro { display: flex; flex-direction: column; justify-content: center; }
.callback-form { box-shadow: var(--shadow-2); background: #fff; height: 100%; }
@media (max-width: 860px) { .callback-intro { justify-content: flex-start; } .callback-form { height: auto; } }

/* Coverage */
.coverage-list { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.coverage-list li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--fs-sm); }

/* Services families */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--s-5, 20px);
  padding: var(--s-6); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.svc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-out); }
.svc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow-2); }
.svc-card:hover::before { transform: scaleY(1); }
.svc-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); color: var(--gold-deep); }
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card__body h4 { margin-bottom: 4px; }
.svc-card__body > p { color: var(--text-muted); font-size: var(--fs-sm); }
.svc-card .card__list { margin-top: var(--s-3); }

.family + .family { margin-top: var(--section-y-sm); }
.family__head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-8); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.family__head h3 { font-size: var(--fs-h3); }
.family__head span { font-size: var(--fs-sm); color: var(--text-muted); margin-left: auto; }

/* Arsh verticals visual */
.verticals { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.verticals li { padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-btn); font-size: var(--fs-sm); font-weight: 500; color: var(--charcoal); }
.geos { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.geos li { font-family: var(--font-display); font-size: 1.0625rem; padding: var(--s-2) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-700); }

/* dark-section variants (About parent group) */
.section--dark .verticals li { background: var(--navy-800); border-color: var(--line-dark); color: #fff; }
.section--dark .geos li { border-color: rgba(217,176,97,.45); color: var(--amber); }

/* Contact split */
.contact-info { display: flex; flex-direction: column; gap: var(--s-6); }
.contact-block { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); }
.contact-block svg { width: 22px; height: 22px; color: var(--gold-deep); margin-top: 4px; }
.contact-block h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; }
.contact-block a, .contact-block address { font-style: normal; font-size: var(--fs-body); font-weight: 500; }
.map-frame { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16/10; background: var(--ink-800); min-width: 0; box-shadow: var(--shadow-2); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-info { min-width: 0; }
.contact-block { min-width: 0; }
.contact-block a, .contact-block address { overflow-wrap: anywhere; }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
.notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: 1; color: var(--gold); }

/* section intro helper */
.section-intro { max-width: 720px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-intro.center { margin-inline: auto; }

/* two-col prose */
.prose-2 { columns: 2; column-gap: clamp(32px, 5vw, 64px); }
.prose-2 p { max-width: none; break-inside: avoid; margin-bottom: var(--s-4); }
@media (max-width: 720px) { .prose-2 { columns: 1; } }

/* pull image band */
.image-band { aspect-ratio: 24/10; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-2); }
.image-band img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
@media (max-width: 720px) { .image-band { aspect-ratio: 16/11; } }