/* ============================================================
   CHSS — pages.css
   Additive stylesheet for the multi-page extension.
   Loaded AFTER style.v6.css. Everything here is scoped to NEW
   class names (.nav-dd*, .pg-*) so existing pages are untouched,
   plus two nav-fit rules that only matter because two new nav
   items were added.
   Uses the design tokens declared in style.v6.css.
   ============================================================ */

/* ── NAV: "What We Do" dropdown ───────────────────────────── */
.nav-links .nav-dd { position:relative }
.nav-dd-toggle {
  display:flex; align-items:center; gap:5px;
  background:none; border:0; color:rgba(255,255,255,0.75);
  font-family:inherit; font-size:0.74rem; font-weight:500; line-height:inherit;
  padding:7px 8px; white-space:nowrap; cursor:pointer;
  transition:color var(--t) var(--ease);
}
.nav-dd-toggle:hover,
.nav-dd.open .nav-dd-toggle { color:var(--white) }
.nav-dd-toggle:focus-visible,
.nav-dd-menu a:focus-visible { outline:2px solid #F5C47B; outline-offset:2px }
.nav-dd-caret { width:8px; height:5px; flex-shrink:0; transition:transform var(--t) var(--ease) }
.nav-dd.open .nav-dd-caret { transform:rotate(180deg) }
.nav-links a.is-current,
.nav-dd.is-current .nav-dd-toggle { color:var(--white) }

/* Desktop panel */
.nav-dd-menu {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:220px; padding-top:14px;           /* padding bridges the hover gap */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  z-index:5;
}
.nav-dd-menu ul {
  background:var(--navy); border-top:2px solid var(--red);
  box-shadow:0 18px 40px rgba(0,0,0,0.3); padding:6px 0;
}
.nav-links .nav-dd-menu a {
  font-size:0.78rem; padding:11px 22px 11px 20px;
  border-left:2px solid transparent;
  transition:color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-links .nav-dd-menu a:hover,
.nav-links .nav-dd-menu a.is-current {
  background:rgba(255,255,255,0.06); border-left-color:var(--red); color:var(--white);
}
@media (min-width:921px) {
  .nav-dd.open .nav-dd-menu {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition-delay:0s;
  }
}
@media (min-width:921px) and (hover:hover) {
  .nav-dd:hover .nav-dd-menu {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition-delay:0s;
  }
  .nav-dd:hover .nav-dd-toggle { color:var(--white) }
  .nav-dd:hover .nav-dd-caret { transform:rotate(180deg) }
}

/* Dismissed with Esc / second click while the pointer is still over it */
.nav-dd.is-dismissed .nav-dd-menu { opacity:0 !important; visibility:hidden !important; pointer-events:none !important }
.nav-dd.is-dismissed .nav-dd-caret { transform:none !important }

/* Two extra nav items need room: between 921px and 1180px the logo
   shows on its own (name text hidden) so the full link row still fits. */
@media (min-width:921px) and (max-width:1180px) {
  .nav-org-name { display:none }
}

/* Mobile / tablet overlay menu */
@media (max-width:920px) {
  /* The overlay now has more rows — let it scroll instead of clipping.
     Auto margins keep it vertically centred whenever it fits. */
  .nav-links { overflow-y:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch }
  .nav-links > li:first-child { margin-top:auto }
  .nav-links > li:last-child  { margin-bottom:auto }

  .nav-dd-toggle { width:100%; justify-content:center; gap:8px; font-size:1rem; padding:13px 10px }
  .nav-dd-caret  { width:10px; height:6px }
  .nav-dd-menu {
    position:static; transform:none; min-width:0; padding-top:0;
    opacity:1; visibility:visible; pointer-events:auto; transition:none;
    display:none;
  }
  .nav-dd.open .nav-dd-menu { display:block }
  .nav-dd-menu ul {
    background:transparent; border-top:0; box-shadow:none;
    max-width:280px; margin:2px auto 8px; padding:2px 0;
    border-left:2px solid rgba(255,255,255,0.14);
  }
  .nav-links .nav-dd-menu a { font-size:0.94rem; padding:10px 16px; color:rgba(255,255,255,0.62); text-align:left }
  .nav-links .nav-dd-menu a:hover,
  .nav-links .nav-dd-menu a.is-current { background:transparent; border-left-color:transparent; color:var(--white) }
}

/* ── PAGE HERO ────────────────────────────────────────────── */
.pg-hero {
  position:relative; overflow:hidden; background:var(--navy);
  padding:calc(66px + clamp(44px,8vw,92px)) 0 clamp(48px,7vw,84px);
}
.pg-hero::before {                      /* thin red accent along the base */
  content:""; position:absolute; left:0; bottom:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--red) 0,var(--red) 96px,transparent 96px);
}
.pg-hero-num {                          /* ghost numeral on programme pages */
  position:absolute; right:var(--px); bottom:-0.14em;
  font-family:var(--font-d); font-weight:900; line-height:1; letter-spacing:-0.04em;
  font-size:clamp(9rem,28vw,24rem); color:rgba(255,255,255,0.045);
  pointer-events:none; user-select:none;
}
.pg-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.22 }
.pg-hero-bg + .pg-hero-shade { position:absolute; inset:0; background:linear-gradient(100deg,var(--navy) 18%,rgba(11,31,58,0.7) 100%) }
.pg-hero .container { position:relative; z-index:1 }
.pg-crumbs { font-size:0.7rem; font-weight:500; letter-spacing:0.06em; color:rgba(255,255,255,0.45); margin-bottom:22px }
.pg-crumbs a { color:rgba(255,255,255,0.62); transition:color var(--t) var(--ease) }
.pg-crumbs a:hover { color:var(--white) }
.pg-crumbs span[aria-hidden] { margin:0 8px; opacity:0.5 }
.pg-eyebrow {
  font-size:0.68rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:18px;
}
.pg-hero h1 {
  font-family:var(--font-d); font-weight:700; color:var(--white);
  font-size:clamp(2.3rem,5.4vw,4.1rem); line-height:1.08; letter-spacing:-0.025em;
  max-width:16ch; margin-bottom:22px;
}
.pg-hero h1.wide { max-width:20ch }
.pg-hero h1 em { font-style:italic; color:#F5C47B }
.pg-hero-lead { font-size:1.02rem; line-height:1.78; color:rgba(255,255,255,0.68); max-width:620px }
.pg-reg {
  display:inline-block; margin-top:26px; padding:8px 14px;
  border:1px solid rgba(255,255,255,0.22); color:rgba(255,255,255,0.78);
  font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
}
.pg-subnav { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px }
.pg-subnav a {
  font-size:0.74rem; font-weight:500; padding:9px 16px; color:rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.24);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.pg-subnav a:hover { border-color:var(--white); background:rgba(255,255,255,0.08); color:var(--white) }

/* ── GENERIC SECTIONS ─────────────────────────────────────── */
.pg-section { padding-block:var(--py); scroll-margin-top:66px }
.pg-section--cream { background:var(--cream) }
.pg-section--navy  { background:var(--navy) }
.pg-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(32px,6vw,88px); align-items:start }
.pg-split-head { position:sticky; top:96px }
.pg-head { margin-bottom:clamp(30px,4vw,48px) }
.pg-head .section-headline { max-width:20ch }
.pg-prose p { font-size:0.95rem; line-height:1.85; color:var(--muted); margin-bottom:18px }
.pg-prose p:last-child { margin-bottom:0 }
.pg-prose .pg-lead {
  font-family:var(--font-d); font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.55;
  color:var(--navy); font-weight:400; margin-bottom:22px;
}
.pg-prose strong { color:var(--navy); font-weight:600 }
.pg-prose .pg-minilabel {
  font-size:0.64rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--red); margin:34px 0 14px; line-height:1.4;
}

/* chips */
.pg-chips { display:flex; flex-wrap:wrap; gap:8px }
.pg-chip {
  display:inline-block; font-size:0.78rem; font-weight:500; color:var(--navy);
  background:var(--white); border:1px solid var(--warm-grey); padding:8px 14px; line-height:1.3;
}
.pg-section--cream .pg-chip { background:var(--white) }
.pg-chips--light .pg-chip { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.86) }

/* ── ABOUT: approach cards ────────────────────────────────── */
.pg-approach { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--warm-grey); border:1px solid var(--warm-grey); margin-top:26px }
.pg-approach div { background:var(--white); padding:20px 18px }
.pg-approach b { display:block; font-family:var(--font-d); font-size:1.7rem; color:var(--red); font-weight:700; line-height:1; margin-bottom:10px }
.pg-approach span { display:block; font-size:0.84rem; line-height:1.5; color:var(--navy); font-weight:500 }

/* ── ABOUT: vision & values ───────────────────────────────── */
.pg-vision { max-width:900px }
.pg-vision blockquote {
  font-family:var(--font-d); font-weight:400; font-style:italic; border:0;
  font-size:clamp(1.6rem,3.6vw,2.7rem); line-height:1.3; letter-spacing:-0.015em; color:var(--white);
}
.pg-values-intro { margin-top:clamp(30px,4vw,48px); font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5) }
.pg-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:14px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12) }
.pg-value { background:var(--navy); padding:clamp(20px,2.6vw,32px) clamp(16px,2vw,26px) }
.pg-value small { display:block; font-size:0.66rem; font-weight:600; letter-spacing:0.16em; color:rgba(255,255,255,0.4); margin-bottom:22px }
.pg-value h3 { font-family:var(--font-d); font-size:clamp(1.15rem,1.9vw,1.5rem); color:var(--white); font-weight:600; line-height:1.2 }

/* ── ABOUT: management placeholders ───────────────────────── */
.pg-mgmt { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:6px }
.pg-mgmt-card { background:var(--white); border:1px solid var(--warm-grey); padding:26px 22px; text-align:center }
.pg-mgmt-card--lead { grid-column:1 / -1; display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; text-align:left; align-items:center; padding:26px }
.pg-mgmt-photo { width:150px; height:150px; border-radius:50%; overflow:hidden; background:var(--warm-grey) }
.pg-mgmt-photo img { width:100%; height:100%; object-fit:cover; object-position:center 12% }
.pg-mgmt-card--lead .person-name { margin-bottom:2px }
.pg-mgmt-card--lead p.pg-note { font-size:0.84rem; line-height:1.75; color:var(--muted); margin:10px 0 14px }
.pg-link { display:inline-block; font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); border-bottom:1.5px solid var(--red); padding-bottom:2px; transition:color var(--t) var(--ease) }
.pg-link:hover { color:var(--red) }
.pg-mgmt-card--empty { border-style:dashed; border-color:#cfcbbf; background:transparent }
.pg-ph-avatar { width:92px; height:92px; border-radius:50%; margin:0 auto 20px; background:var(--warm-grey); display:flex; align-items:flex-end; justify-content:center; overflow:hidden }
.pg-ph-avatar svg { width:64px; height:64px; color:#bdb9ab }
.pg-ph-line { height:9px; background:var(--warm-grey); border-radius:5px; margin:0 auto 9px }
.pg-ph-line.w1 { width:62% } .pg-ph-line.w2 { width:42%; opacity:0.7 }
.pg-ph-tag { margin-top:16px; font-size:0.66rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#9b978a }

/* Board section reuses the homepage board classes; just add spacing */
.pg-board-wrap .chairman-featured { margin-bottom:12px }

/* ── ABOUT: history timeline ──────────────────────────────── */
.pg-timeline { position:relative; max-width:880px; margin-inline:auto }
.pg-timeline::before { content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:var(--warm-grey) }
.pg-tl-item { position:relative; padding:0 0 clamp(30px,4vw,46px) 70px }
.pg-tl-item:last-child { padding-bottom:0 }
.pg-tl-node {
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:700; font-size:0.9rem; box-shadow:0 0 0 6px var(--white);
}
.pg-tl-item--key .pg-tl-node { background:var(--red) }
.pg-tl-item h3 { font-family:var(--font-d); font-size:clamp(1.2rem,2.1vw,1.55rem); font-weight:700; line-height:1.25; color:var(--navy); margin:6px 0 12px; letter-spacing:-0.01em }
.pg-tl-item p { font-size:0.95rem; line-height:1.85; color:var(--muted) }
.pg-tl-item .pg-chips { margin-top:18px }
.pg-milestone { margin-top:20px; padding:22px 24px; background:var(--cream); border-left:3px solid var(--red); display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.pg-milestone img { height:64px; width:auto; max-width:140px; object-fit:contain }
.pg-milestone .pg-ms-logos { display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.pg-milestone p { flex:1 1 260px; font-size:0.84rem; line-height:1.7; color:var(--navy); font-weight:500 }

.pg-closing { margin-top:clamp(36px,5vw,64px); padding:clamp(28px,4vw,48px); background:var(--navy); text-align:center }
.pg-closing p { font-family:var(--font-d); font-size:clamp(1.15rem,2.3vw,1.7rem); line-height:1.5; color:rgba(255,255,255,0.88); max-width:44ch; margin-inline:auto }
.pg-closing p strong { color:#F5C47B; font-weight:700; font-style:italic }

/* ── PROGRAMME PAGES ──────────────────────────────────────── */
.pg-areas { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1px; background:var(--warm-grey); border:1px solid var(--warm-grey) }
.pg-area { background:var(--white); padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px) }
.pg-area small { display:block; font-size:0.66rem; font-weight:700; letter-spacing:0.16em; color:var(--red); margin-bottom:14px }
.pg-area h3 { font-family:var(--font-d); font-size:1.12rem; font-weight:600; line-height:1.28; color:var(--navy); margin-bottom:8px }
.pg-area p { font-size:0.84rem; line-height:1.72; color:var(--muted) }

.pg-grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px }
.pg-grid-3 .project-card { grid-column:auto !important }

.pg-figures { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:0 }
.pg-figure { padding:26px 26px 26px 0; border-top:1px solid rgba(255,255,255,0.14) }
.pg-figure strong { display:block; font-family:var(--font-d); font-size:clamp(2rem,4vw,3rem); font-weight:700; color:var(--white); line-height:1; margin-bottom:10px }
.pg-figure p { font-size:0.8rem; line-height:1.6; color:rgba(255,255,255,0.55); max-width:30ch }
.pg-fig-note { font-size:0.74rem; color:rgba(255,255,255,0.4); margin-top:18px }

.pg-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--cream); border-left:3px solid var(--navy); padding:22px 26px; margin-top:26px }
.pg-callout-label { display:block; font-size:0.66rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); margin-bottom:6px }
.pg-callout-title { display:block; font-family:var(--font-d); font-size:1.12rem; font-weight:600; line-height:1.3; color:var(--navy) }

.pg-cta { background:var(--navy-mid); padding:clamp(44px,6vw,72px) 0 }
.pg-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap }
.pg-cta h2 { font-family:var(--font-d); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; line-height:1.2; color:var(--white); letter-spacing:-0.015em; max-width:22ch }
.pg-cta p { font-size:0.9rem; line-height:1.7; color:rgba(255,255,255,0.6); margin-top:10px; max-width:52ch }
.pg-cta-actions { display:flex; gap:12px; flex-wrap:wrap }

.pg-other { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:12px }
.pg-other a {
  display:flex; flex-direction:column; background:var(--cream); padding:24px 22px 22px;
  border-top:3px solid transparent; transition:border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}
.pg-section--cream .pg-other a { background:var(--white) }
.pg-other a:hover { border-top-color:var(--red); background:#EFEDE5; transform:translateY(-2px) }
.pg-section--cream .pg-other a:hover { background:var(--white); box-shadow:0 10px 28px rgba(11,31,58,0.08) }
.pg-other small { font-size:0.66rem; font-weight:700; letter-spacing:0.16em; color:var(--red); margin-bottom:16px }
.pg-other h3 { font-family:var(--font-d); font-size:1.3rem; font-weight:700; line-height:1.2; color:var(--navy); margin-bottom:auto; padding-bottom:20px }
.pg-other span { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy) }
.pg-other span::after { content:" →" }
.pg-all-link { margin-top:24px }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:900px) {
  .pg-split { grid-template-columns:1fr; gap:26px }
  .pg-split-head { position:static }
  .pg-values { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pg-approach { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pg-mgmt { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .pg-hero h1, .pg-hero h1.wide { max-width:100% }
  .pg-mgmt { grid-template-columns:1fr }
  .pg-mgmt-card--lead { grid-template-columns:1fr; text-align:center; justify-items:center; gap:18px }
  .pg-mgmt-card--lead p.pg-note { text-align:left }
  .pg-timeline::before { left:15px }
  .pg-tl-item { padding-left:54px }
  .pg-tl-node { width:32px; height:32px; font-size:0.78rem; box-shadow:0 0 0 5px var(--white) }
  .pg-milestone { padding:18px }
  .pg-cta-actions .btn-primary, .pg-cta-actions .btn-ghost { width:100%; text-align:center }
  .pg-figure { padding-right:0 }
  .pg-subnav a { flex:1 1 auto; text-align:center }
}
@media (max-width:420px) {
  .pg-values { grid-template-columns:1fr 1fr }
  .pg-approach { grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce) {
  .nav-dd-menu, .nav-dd-caret, .pg-other a { transition:none }
}