/* Inner pages: page hero, detail blocks, careers, about, insights, contact, Monsoon feature. */

.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--mist);
  padding-top: clamp(130px, 16vw, 180px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.page-hero .c { mix-blend-mode: multiply; animation: c-in-light 1.2s var(--ease) forwards; }
@keyframes c-in-light { to { opacity: .22; } }
.page-hero .c-teal    { width: 22vw; height: 70%; left: 66%; top: -10%; }
.page-hero .c-magenta { width: 16vw; height: 55%; left: 78%; top: 25%; }
.page-hero .c-sky     { width: 12vw; height: 60%; left: 74%; top: -5%; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(40px, 5.2vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; max-width: 16ch; }
.page-hero .lede { margin-top: 20px; max-width: 58ch; }
.page-hero .hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
@media (max-width: 900px) { .page-hero .c { display: none; } }

/* Anchor sub-navigation under a page hero */
.subnav { border-bottom: 1px solid var(--rule); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); position: sticky; top: 74px; z-index: 30; }
.subnav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 16px 14px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); border-color: var(--ink); }

/* Detail blocks: one per sub-service */
.detail { scroll-margin-top: 150px; padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); }
.detail.first { border-top: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.detail h2 { font-size: clamp(28px, 3vw, 38px); }
.tag { display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: 14px; padding-left: 14px; border-left: 3px solid var(--teal); }
.tag-magenta { border-color: var(--magenta); }
.tag-sky { border-color: var(--sky); }
.tag-violet { border-color: var(--violet); }
.detail .lede { margin-top: 12px; font-size: 18px; }
.detail-body p { color: var(--muted); }
.detail-body p + p { margin-top: 16px; }
.detail-body p strong { color: var(--text); }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.checks li { position: relative; padding-left: 26px; font-weight: 500; font-size: 16px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); }
.checks-magenta li::before { background: var(--magenta); }
.checks-sky li::before { background: var(--sky); }
.checks-violet li::before { background: var(--violet); }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } .checks { grid-template-columns: 1fr; } }

/* Quote band */
.quote { background: var(--ink); color: #fff; }
.quote blockquote { margin: 0; font-size: clamp(24px, 2.8vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; }
.quote cite { display: block; margin-top: 20px; font-style: normal; font-size: 15px; color: rgba(255,255,255,.6); }

/* Monsoon feature */
.monsoon-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  background: #030712 url("assets/bg-waves.webp") center / cover no-repeat; color: #fff; border-radius: 22px;
  padding: clamp(36px, 5vw, 72px);
}
.monsoon-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(3,7,18,.55), rgba(3,7,18,.15));
}
@media (max-width: 900px) { .monsoon-card { background-image: url("assets/bg-waves-m.webp"); } }
.monsoon-kicker { font-size: 14px; font-weight: 600; color: var(--sky-2); }
.monsoon-card h2 { margin-top: 12px; font-size: clamp(30px, 3.4vw, 44px); }
.monsoon-card .lede { color: rgba(255,255,255,.75); margin-top: 16px; }
.monsoon-card .btn-light { margin-top: 28px; }
.monsoon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.monsoon-list li { padding: 16px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.04); }
.monsoon-list b { display: block; font-size: 16px; }
.monsoon-list span { font-size: 14px; color: rgba(255,255,255,.65); }
@media (max-width: 900px) { .monsoon-card { grid-template-columns: 1fr; } }

/* Careers */
.programmes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); margin-top: 48px; }
.programme { padding: 32px 32px 36px 0; border-right: 1px solid var(--rule); }
.programme + .programme { padding-left: 32px; }
.programme:last-child { border-right: 0; padding-right: 0; }
.programme h3 { font-size: 22px; }
.programme p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.programme .link { margin-top: 16px; font-size: 15px; }
@media (max-width: 900px) { .programmes { grid-template-columns: 1fr; } .programme, .programme + .programme { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--rule); } }

.vacancies { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.vacancies li { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.vacancies h3 { font-size: 19px; }
.vacancies .meta { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.vacancies p { color: var(--muted); font-size: 15px; }
.vacancies .btn-outline { padding: 11px 18px; font-size: 14px; }
@media (max-width: 900px) { .vacancies li { grid-template-columns: 1fr; gap: 10px; } }

.two-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.panel { border-radius: var(--r); padding: 32px; border: 1px solid var(--rule); background: #fff; }
.panel-dark { background: var(--purple); color: #fff; border-color: transparent; }
.panel h3 { font-size: 24px; }
.panel p { margin-top: 12px; color: var(--muted); }
.panel-dark p { color: rgba(255,255,255,.78); }
.panel ul { margin: 16px 0 0; padding: 0 0 0 18px; }
.panel li { padding: 4px 0; }
.panel .btn { margin-top: 22px; }
@media (max-width: 900px) { .two-panels { grid-template-columns: 1fr; } }

/* About */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.mission-grid p + p { margin-top: 16px; color: var(--muted); }
.big-quote { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.accred { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.accred img { height: 44px; width: auto; }
.accred .msi { background: var(--ink); padding: 6px 14px; border-radius: 10px; display: inline-flex; }
.accred .msi img { height: 40px; }
.accred-text { font-weight: 600; font-size: 15px; }
@media (max-width: 900px) { .mission-grid { grid-template-columns: 1fr; } }

/* Insights */
.post-date { font-size: 13px; color: var(--muted); margin-left: 10px; }
.post-excerpt { margin-top: 10px; color: var(--muted); font-size: 15px; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.filter button { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; color: var(--text); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.post[hidden] { display: none; }

/* Contact */
.form select { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--mist); color: var(--text); }
.form select:focus { outline: none; border-color: var(--sky); background: #fff; }
.office-grid.detailed p { max-width: 30ch; }
.footer-contact { margin-top: 18px; font-size: 14px; }
.footer-contact a { display: inline; padding: 0; color: #fff; font-weight: 600; }

/* Current page in nav */
.nav-links a[aria-current="page"] { opacity: 1; font-weight: 700; }
.nav-wrap.solid .nav-links a[aria-current="page"] { color: var(--sky); }

/* ---- Inner page hero: same dark glass-panel treatment as the homepage ---- */
.page-hero {
  background: var(--ink) url("assets/bg-hero-glass.webp") center right / cover no-repeat;
  color: #fff;
  padding-top: clamp(150px, 18vw, 200px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(16,3,56,.55), rgba(16,3,56,.15) 60%, transparent);
}
.page-hero .c { mix-blend-mode: screen; animation-name: c-in-hero; }
.page-hero .lede { color: rgba(255,255,255,.8); }
.page-hero .filter button { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.page-hero .filter button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
@media (max-width: 900px) { .page-hero { background-image: url("assets/bg-hero-glass-m.webp"); } }