/* Mehran Pakistan live brand palette: blue #003366–#00509d, yellow #ffd000. */
:root {
  --navy: #003366;
  --navy-2: #00509d;
  --ink: #172b43;
  --muted: #53677f;
  --line: #d4e0ec;
  --paper: #f8faff;
  --gold: #ffd000;
  --copper: #ffd000;
  --brand-yellow: #ffd000;
  --brand-yellow-hover: #ffe15c;
  --brand-blue: #003366;
  --brand-blue-light: #00509d;
  --brand-blue-deep: #001f3f;
  --brand-pale: #eef3fa;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--brand-yellow); color: var(--brand-blue-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: #ffd000;
}

/* Navigation and first viewport */
.topbar { background: var(--brand-yellow); color: var(--brand-blue-deep); }
.topbar .top-sep { color: var(--brand-blue); }
.site-header,
.site-header.scrolled {
  background: linear-gradient(135deg, #003366, #00509d);
  border-bottom-color: #336aab;
  box-shadow: 0 10px 34px #001f3f26;
}
.site-header:after { background: var(--brand-yellow); }
.brand-mark {
  background: var(--brand-yellow);
  color: var(--brand-blue-deep);
  box-shadow: inset 0 0 0 1px #ffeb8a, 5px 5px 0 #001f3f;
}
.brand-mark span { color: var(--brand-blue-deep); }
.brand:hover .brand-mark {
  box-shadow: inset 0 0 0 1px #fff2a0, 7px 7px 0 #001f3f;
}
.brand-words strong, .brand-words small { color: #fff; }
.primary-nav > a:not(.nav-contact), .services-toggle { color: #f5f8ff; }
.primary-nav a:hover, .services-toggle:hover,
.primary-nav [aria-current=page] { color: var(--brand-yellow) !important; }
.primary-nav > a:not(.nav-contact):after { background: var(--brand-yellow); }
.services-menu { border-color: #cddaea; box-shadow: 0 24px 60px #001f3f38; }
.services-menu a { color: var(--brand-blue-deep); }
.primary-nav .services-menu a:hover { background: #eef3fa; color: var(--brand-blue) !important; }
.nav-contact, .dark-button {
  background: var(--brand-blue);
  color: #fff;
}
.nav-contact {
  background: var(--brand-yellow);
  color: var(--brand-blue-deep);
}
.nav-contact:hover, .dark-button:hover {
  background: var(--brand-blue-light);
  color: #fff !important;
  box-shadow: 0 11px 24px #00336633;
}
.nav-contact:hover { background: var(--brand-yellow-hover); color: var(--brand-blue-deep) !important; }
.primary-nav .nav-contact:hover,
.primary-nav .nav-contact[aria-current=page] { color: var(--brand-blue-deep) !important; }
.nav-contact:before { background: var(--brand-yellow-hover); }
.hero {
  background: radial-gradient(ellipse at 12% 85%, #00509d 0%, transparent 55%),
              linear-gradient(135deg, #001f3f, #003366 78%);
}
.hero-copy:before { background: var(--brand-yellow); }
.hero-name span, .hero-foot span+span:before, .image-note span { color: var(--brand-yellow); }
.hero h1 em, .compact-hero h1 em { color: var(--brand-yellow); }
.hero h1 em {
  background-image: linear-gradient(90deg, var(--brand-yellow), #fff1a6);
}
.hero-lead, .feature-copy p, .page-hero p, .compact-hero p { color: #e3ebf8; }
.hero-foot { color: #c7d8ee; }
.hero-image { box-shadow: -16px 0 0 #00509d; }
.hero-image:after {
  background: linear-gradient(90deg, #001f3f55, transparent 38%),
              linear-gradient(0deg, #001f3f85, transparent 37%);
}
.image-note { background: #003366ed; color: #fff; border-color: #ffd00088; }
.light-button, .wa-float {
  background: var(--brand-yellow);
  color: var(--brand-blue-deep);
}
.light-button:hover, .wa-float:hover {
  background: var(--brand-yellow-hover);
  color: var(--brand-blue-deep);
}
.text-link:hover { color: var(--brand-blue-light); }
.light-link:hover { color: var(--brand-yellow); }

/* Section rhythm, cards and content */
.eyebrow, .card-index, .guide-card > span, .industry-list span,
.detail-item span, .why-grid span, .topic-index {
  color: #806300;
}
.eyebrow.light, .example-box .eyebrow { color: var(--brand-yellow); }
.eyebrow .line { background: var(--brand-yellow); }
.section h2 em { color: #9b7400; }
.proof, .industries, .documents, .related, .about-teaser,
.about-values, .topic-section, .terminal-preview,
.article-next, .scope-bottom > div { background: var(--brand-pale); }
.proof, .proof-grid > div, .industry-list, .industry-list div,
.check-list, .check-list li, .related-grid, .related-grid a,
.about-value-grid, .about-value-grid > div { border-color: #cbdbea; }
.proof-grid strong, .proof-grid strong .count, .proof-statement,
.why-grid h3 { color: var(--brand-blue-deep); }
.proof-grid strong span { color: #aa8200; }
.section-heading > p, .industries p, .service-card p,
.guide-card p, .topic-card p, .terminal-group-head p,
.scope-grid p, .scope-bottom li, .article-content section p,
.about-contact p, .about-story .body-grid > div:last-child p,
.about-teaser-grid > div:last-child p, .featured-guide-grid p,
.scope-guide p, .about-value-grid p, .article-intro,
.contact-method p, .topic-intro p, .topic-band p {
  color: var(--muted);
}
.service-card, .guide-card, .topic-card, .scope-grid article {
  background: #fff;
}
.service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-card:hover, .guide-card:hover, .topic-card:hover,
.featured-guide-grid > a:hover, .scope-grid article:hover,
.why-grid > div:hover { background: #f4f8ff; }
.service-card:before { background: var(--brand-yellow); }
.service-card h3, .topic-card h2, .topic-card h3 { color: var(--brand-blue-deep); }
.service-card:hover h3, .guide-card:hover h2 { color: var(--brand-blue-light); }
.route-bridge { background: #e2edfa; border-top: 1px solid #cbdbea; border-bottom: 1px solid #cbdbea; }
.route-bridge .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.route-bridge p { margin: 7px 0 0; color: var(--brand-blue-deep); font-weight: 700; }
.route-bridge .text-link { flex: none; color: var(--brand-blue); }
.card-more, .guide-card b, .article aside .text-link,
.topic-card a, .featured-guide-grid b, .official-sources a,
.article-next a:not(.button), .topic-intro a {
  color: var(--brand-blue-light);
}
.image-feature { background: linear-gradient(135deg, #003366, #00509d); }
.process { background: #fff; }
.steps { border-top-color: var(--brand-blue); }
.steps:before { background: linear-gradient(90deg, #00509d, #ffd000); box-shadow: 0 0 18px #ffd00066; }
.step > span { color: #a27a00; }
.step:hover, .industry-list > div:hover, .related-grid a:hover {
  background: #e2edfa;
  color: var(--brand-blue);
}
.step:after { background: var(--brand-yellow); }
.faq-item summary:hover, .faq-item[open] summary,
.contact-method a:hover { color: var(--brand-blue-light); }
.faq-item summary span, .check-list li:before, .article-checklist li:before { color: #a17a00; }
.faq-item[open] summary:after { background: var(--brand-yellow); }
.closing, .page-hero, .compact-hero {
  background: radial-gradient(circle at 85% 18%, #00509d88, transparent 40%),
              linear-gradient(130deg, #001f3f, #003366);
}
.closing-inner:before { background: var(--brand-yellow); }
.page-hero h1 span, .compact-hero h1 span { color: var(--brand-yellow); }
.page-hero-photo { box-shadow: 14px 14px 0 #ffd00055; }
.featured-guides, .about-story, .about-contact, .topic-intro,
.topic-band, .service-faq, .scope-section { background: #fff; }
.featured-guide-grid > a, .article-checklist { background: #eef3fa; border-color: #cfdeed; }
.featured-guide-grid span, .scope-grid article > span,
.about-value-grid span { color: #806300; }
.scope-grid, .topic-grid { background: #cbdbea; border-color: #cbdbea; }
.scope-guide { border-left-color: var(--brand-yellow); }
.example-box { background: var(--brand-blue); color: #f5f8ff; }
.form-grid input, .form-grid select, .form-grid textarea { background: #f8faff; border-color: #cbdbea; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  border-color: var(--brand-blue-light);
  box-shadow: 0 0 0 4px #00509d26;
}
.terminal-preview-list span { border-color: #bbd0e7; color: var(--brand-blue); }
.terminal-preview-list span:hover { background: #e2edfa; border-color: var(--brand-blue-light); }
.topic-intro a { text-decoration-color: var(--brand-yellow); }
.topic-card a { border-top-color: #d4e0ec; }

/* Footer and floating contact */
.site-footer { background: var(--brand-blue-deep); }
.footer-top h3, .footer-brand span { color: var(--brand-yellow); }
.footer-bottom { border-top-color: #315577; }
.wa-float:before { border-color: var(--brand-yellow); }

@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .menu-toggle span { background: #fff; }
  .primary-nav { background: #003366; border-bottom-color: #336aab; }
  .primary-nav > a, .services-toggle { border-bottom-color: #336aab; color: #fff; }
  .services-menu { background: #eef3fa; }
  .services-menu a { color: var(--brand-blue-deep); border-bottom-color: #d4e0ec; }
  .nav-contact { color: var(--brand-blue-deep) !important; }
  .hero-image { border-top-color: var(--brand-yellow); }
  .page-hero-photo { box-shadow: none; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
  .route-bridge .wrap { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { background-size: 100% 2px; }
}

/* Custom Mehran emblem and two-tone wordmark */
.header-inner { min-height: 92px; }
.brand { gap: 13px; }
.brand-mark {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: block;
  background: none;
  box-shadow: none;
  transition: transform .32s ease, filter .32s ease;
}
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand:hover .brand-mark {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 8px 12px #001f3f80);
  box-shadow: none;
}
.brand-words strong {
  font-size: 1.12rem;
  line-height: .96;
  letter-spacing: .025em;
}
.brand-words strong span { display: block; }
.brand-words strong span:last-child { color: var(--brand-yellow); }
.brand-words small {
  font-size: .55rem;
  letter-spacing: .13em;
  margin-top: 7px;
  white-space: nowrap;
}
.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  text-decoration: none;
}
.footer-lockup:hover { text-decoration: none !important; }
.footer-lockup img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  transition: transform .3s ease;
}
.footer-lockup:hover img { transform: translateY(-3px); }
.footer-brand {
  display: block;
  margin: 0;
  font-size: 2.1rem;
  line-height: .9;
}
.footer-brand span { color: var(--brand-yellow); }
@media (max-width: 860px) {
  .header-inner { min-height: 78px; }
  .primary-nav { top: 77px; max-height: calc(100vh - 78px); }
}
@media (max-width: 600px) {
  .brand { gap: 9px; }
  .brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .brand-words strong { font-size: .96rem; }
  .brand-words small { font-size: .46rem; letter-spacing: .1em; }
  .footer-lockup img { width: 60px; height: 60px; flex-basis: 60px; }
  .footer-brand { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .footer-lockup img { transition: none; }
  .brand:hover .brand-mark, .footer-lockup:hover img { transform: none; }
}