/* ══════════════════════════════════════════════════════════════════════
   RIJAL.CO.NZ — V16 UPGRADE
   Applied LAST in the CSS stack. Targets real layout issues.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. ROW WIDTH CONSISTENCY ────────────────────────────────────────── */
/* Every section uses the same 1180px max container */
.container,
.hero-grid, .why-grid, .expertise-grid, .testimonials-grid,
.creds-grid, .metrics, .spotlight, .timeline, .value-grid,
.partners-grid, .pc-commits-list, .companies-grid, .footer-grid,
.contact-grid, .faq-grid, .khub-grid {
  max-width: var(--max, 1180px);
  margin-left: auto;
  margin-right: auto;
}

/* ── 2. SECTION SPACING — tighter, more intentional ─────────────────── */
.section {
  padding: clamp(56px, 7vw, 96px) 0;
}
.section-head {
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 720px;
}
.section + .section {
  border-top: 1px solid rgba(255,255,255,0.04);
}
/* Companies bar is not a section — tighten it */
.companies {
  padding: 36px 0;
}

/* ── 3. PARAGRAPH CENTERING in section heads ─────────────────────────── */
.section-head {
  text-align: center;
}
.section-copy {
  text-align: center;
  margin: 0 auto;
}
/* Left-aligned areas stay left */
.contact-text p,
.about-text p,
.partners-head .partners-lead,
.profile-book-copy p {
  text-align: left;
}

/* ── 4. HEADING TYPOGRAPHY — no unwanted wrapping ────────────────────── */
h1, h2, h3 {
  text-wrap: balance;
}
.section-title {
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.4rem);
  max-width: 680px;
}

/* ── 5. ENGAGEMENT PATHWAYS — heading layout fix ─────────────────────── */
.p26-pathways-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px,4vw,52px);
}
.p26-kicker {
  margin-bottom: 14px;
  justify-content: center;
}
.p26-pathways h2,
h2#engagement-pathways-h {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  margin-bottom: 16px;
}
.p26-pathways-lead {
  font-size: clamp(0.96rem, 1.2vw, 1.05rem);
  line-height: 1.82;
  color: var(--muted);
  max-width: 640px;
  text-align: center;
}

/* ── 6. PATHWAY CARDS GRID — 5 cards on desktop ─────────────────────── */
.p26-path-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (max-width: 1200px) {
  .p26-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 880px) {
  .p26-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 540px) {
  .p26-path-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. ABOUT SECTION — two-column text under photo ─────────────────── */
/* Photo left, text right with 2-col text grid */
.about-profile-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
}
.about-profile-visual {
  /* Photo column stays fixed width */
  grid-column: 1;
}
.about-profile-copy {
  grid-column: 2;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 18px;
}
/* Two-column text layout below heading */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.about-two-col p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.78;
}
@media (max-width: 900px) {
  .about-profile-grid {
    grid-template-columns: 1fr;
  }
  .about-two-col {
    grid-template-columns: 1fr;
  }
}

/* ── 8. EXP CARDS — icon and tag on same row ─────────────────────────── */
.exp-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
.exp-card-header .exp-icon {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.exp-card-header .exp-card-tag {
  margin: 0 !important;
}
/* When inside header, hide the solo versions */
.exp-card > .exp-icon,
.exp-card > .exp-card-tag {
  display: none;
}
.exp-card:has(.exp-card-header) > .exp-icon,
.exp-card:has(.exp-card-header) > .exp-card-tag {
  display: none !important;
}

/* ── 9. FOCUSED SERVICES — all icons consistent ──────────────────────── */
.service-link {
  display: flex;
  flex-direction: column;
}
.service-link .exp-card-tag {
  order: 0;
  margin-bottom: 12px;
}
.service-link .exp-icon {
  order: 1;
  margin-bottom: 16px;
}
.service-link h3 {
  order: 2;
}

/* ── 10. METRICS — premium 3-col grid ────────────────────────────────── */
.metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.metric,
.metric.featured {
  grid-column: auto !important;
}
@media (max-width: 820px) {
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  .metrics {
    grid-template-columns: 1fr !important;
  }
}

/* ── 11. PARTNERS PAGE HERO — premium layout ─────────────────────────── */
.p-hero {
  padding-top: clamp(120px, 14vw, 172px);
  padding-bottom: clamp(52px, 7vw, 84px);
}
.p-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
  font-weight: 300;
  max-width: 820px;
  margin-bottom: 20px;
}
.p-hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal-2), #4FE5F0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.p-hero .lead {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 760px;
  margin-bottom: 14px;
}
.p-hero .hero-actions {
  margin-top: 28px;
}
.trust-strip {
  margin-top: 36px;
  padding: 20px 24px;
  background: rgba(15,163,177,0.04);
  border: 1px solid rgba(15,163,177,0.16);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}
.trust-item strong {
  color: var(--ivory);
  font-weight: 600;
}
.t-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-2);
  flex-shrink: 0;
}

/* ── 12. PARTNERS sub-section cards — "Four Shapes" ─────────────────── */
.partner-card {
  padding: 32px 28px;
}
.pc-num {
  font-size: 2.4rem;
}
.pc-title {
  font-size: 1.28rem;
}
.pc-body {
  font-size: 0.93rem;
}

/* ── 13. TRACK RECORD section ────────────────────────────────────────── */
.spotlight-desc {
  font-size: 0.97rem;
  line-height: 1.84;
}
.spotlight-desc strong {
  color: var(--ivory);
}
.spotlight-cite {
  font-size: 0.87rem;
  line-height: 1.76;
}

/* ── 14. COLOR PALETTE — consistent application ──────────────────────── */
:root {
  /* Override bg to be slightly darker for better contrast */
  --bg: #080f1c;
  --bg-2: #0b1828;
  --bg-3: #0d1d30;
  --surface: #0f2540;
  --surface-2: #132d4c;
}

/* ── 15. NAV — subtle improvement ───────────────────────────────────────── */
.nav {
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  border-bottom-color: rgba(255,255,255,0.05);
}
.nav-scroll-bar {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold-2));
  width: 0;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── 16. FOOTER BUSINESS STRIP — cleaner presentation ───────────────── */
.footer-business-strip {
  padding: 28px 0;
}
.footer-business-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── 17. CONTACT SECTION — consistent alignment ──────────────────────── */
.contact-grid {
  gap: clamp(20px, 3vw, 36px);
}

/* ── 18. CREDENTIALS — cleaner grid ──────────────────────────────────── */
.creds-grid {
  gap: 12px;
}

/* ── 19. MOBILE — global consistency ─────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .why-grid,
  .expertise-grid,
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
  .value-grid,
  .spotlight-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .p26-path-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .creds-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .section {
    padding: clamp(48px, 8vw, 72px) 0;
  }
  .container {
    padding: 0 18px;
  }
}

/* ── 20. ACCESSIBILITY — focus rings ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--teal-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── 21. PRINT ───────────────────────────────────────────────────────── */
@media print {
  .nav, .sidebar-toggle, .rsb2-toggle, .lsb-toggle,
  .ai-fab, .scroll-top, .toolkit-trigger { display: none !important; }
  .section { padding: 32px 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ── 22. REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   HERO HEADING CONSISTENCY — All pages, one rule
   Problem: case-studies was clamp(3rem,6.8vw,5.85rem),
            contracting was clamp(2.55rem,7vw,5.35rem)
            service-pages was clamp(2.5rem,5.5vw,4.6rem)
   These all exceed 2-3 lines on most screens.
   Fix: Unified heading size across every page hero.
   ══════════════════════════════════════════════════════════════════ */

/* Universal hero heading cap — applies to every page */
.hero h1,
.hero .title,
.page-hero h1,
.khub-page-hero h1,
.p-hero h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  max-width: 820px !important;
  text-wrap: balance !important;
}

/* Case studies: override its 5.85rem back to sensible */
body.case-studies-page .title {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.028em !important;
}

/* Contracting: override its 5.35rem */
body.contracting-page .hero .title {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  line-height: 1.12 !important;
}

/* index.html hero h1 — stays slightly larger as it IS the homepage */
.hero h1.rv {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  max-width: 720px !important;
  line-height: 1.06 !important;
  letter-spacing: -0.03em !important;
}

/* Eyebrow — consistent size + spacing across all pages */
.eyebrow,
.hero .eyebrow,
.p26-kicker {
  font-size: 0.63rem !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 14px !important;
}

/* Lead paragraph — consistent across service pages */
.hero .lead,
.hero-sub,
.p-hero .lead,
.page-hero .lead {
  font-size: clamp(0.98rem, 1.25vw, 1.1rem) !important;
  line-height: 1.8 !important;
  max-width: 680px !important;
}

/* Section titles — consistent across all pages */
.section-title,
.section h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.024em !important;
  text-wrap: balance !important;
}

/* Sub-headings inside sections */
.impact-card h3,
.case-card h3,
.partner-card h3,
.why-card h3,
.exp-card h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance !important;
}

/* ── Knowledge Hub hero fix ────────────────────────────────────── */
.khub-page-hero .section-title {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
}

/* ── Partners page hero fix ────────────────────────────────────── */
.p-hero h1,
.p-hero .title {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
}

/* ── Mobile heading consistency ────────────────────────────────── */
@media (max-width: 768px) {
  .hero h1,
  .hero .title,
  body.case-studies-page .title,
  body.contracting-page .hero .title {
    font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }
  .hero h1.rv {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
  }
  .section-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }
}


/* ── Prevent <br> in hero headings from forcing 3-line breaks ───── */
/* With the reduced font size, <br> is often unnecessary.
   We hide them on desktop and restore on mobile only if needed. */
.hero h1 br,
.hero .title br,
body.case-studies-page .title br,
body.contracting-page .hero .title br {
  display: none;
}
@media (max-width: 560px) {
  /* On mobile, allow breaks again for readability */
  .hero h1 br,
  .hero .title br {
    display: inline;
  }
}

/* ── Partners page — make H1 clean on one line ────────────────── */
.p-hero h1 br {
  display: none;
}