/* =====================================================================
   FIRST PLEDGE — PREMIUM NAVY & GOLD THEME
   Colours follow the logo (deep navy, metallic gold, silver). Loaded after
   base/layout/components on every page: it re-tunes the shared tokens and
   adds depth to the existing components. The logo artwork itself is never
   restyled (only an outer frame shadow is added).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* palette */
  --navy-950: #081627;
  --navy-900: #0b1d33;
  --navy-800: #10284a;
  --navy-700: #163a63;
  --charcoal-blue: #18263a;
  --champagne: #d8bc82;
  --ivory: #fbf7ef;
  --pearl: #fdfcf9;
  --blue-grey: #eef2f6;

  /* existing tokens, re-tuned */
  --ink: #0e2340;
  --ink-2: #1c2f4a;
  --ink-3: #2a4060;
  --paper: #fdfcf9;
  --sand: #eef2f6;
  --stone: #e2e8ef;
  --line: #dde3ea;
  --muted: #4f5d70;
  --muted-light: rgba(243, 238, 228, 0.78);
  --gold: #b8934b;
  --gold-light: #d8bc82;
  --gold-deep: #8a6a2e;
  --radius: 8px;
  --radius-lg: 14px;

  /* depth */
  --surface: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  --surface-border: rgba(184, 147, 75, 0.26);
  --shadow-sm: 0 1px 2px rgba(11, 29, 51, 0.06), 0 4px 10px -4px rgba(11, 29, 51, 0.1);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(11, 29, 51, 0.06), 0 16px 32px -18px rgba(11, 29, 51, 0.28);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 18px -10px rgba(11, 29, 51, 0.2), 0 34px 60px -28px rgba(11, 29, 51, 0.5);
  --shadow-lg: 0 30px 60px -24px rgba(11, 29, 51, 0.45);
  --overlay-rgb: 8, 22, 39;
  --navy-depth:
    radial-gradient(900px 460px at 10% 0%, rgba(29, 78, 122, 0.55), transparent 62%),
    radial-gradient(760px 420px at 100% 100%, rgba(216, 188, 130, 0.12), transparent 60%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);
  --charcoal-depth:
    radial-gradient(900px 420px at 90% 0%, rgba(216, 188, 130, 0.1), transparent 60%),
    radial-gradient(800px 420px at 0% 100%, rgba(22, 58, 99, 0.5), transparent 62%),
    linear-gradient(170deg, #1d2c42 0%, var(--charcoal-blue) 100%);
}

/* ---------- 2. Canvas & typography ---------- */
body { background: var(--paper); color: var(--ink-2); }
h1, h2, h3, h4 { color: var(--ink); }
.eyebrow { color: var(--gold-deep); }
.section-head h2 { letter-spacing: -0.015em; }
.lead { color: var(--muted); }
::selection { background: var(--champagne); color: var(--navy-900); }

/* ---------- 3. Section backgrounds (each section has an intentional surface) ---------- */
.section { background-color: var(--pearl); }
.bg-sand {                                   /* very light blue-grey: real estate, projects, locations */
  background:
    radial-gradient(1000px 320px at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(180deg, #f2f5f9 0%, #e9eef4 100%);
  box-shadow: inset 0 1px 0 rgba(14, 35, 64, 0.06), inset 0 -1px 0 rgba(14, 35, 64, 0.06);
}
.bg-ivory {                                  /* warm ivory: about / owner */
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
    linear-gradient(180deg, #fcf8f0 0%, #f6efe1 100%);
  box-shadow: inset 0 1px 0 rgba(184, 147, 75, 0.18), inset 0 -1px 0 rgba(184, 147, 75, 0.18);
}
.bg-ink { background: var(--navy-depth); color: var(--muted-light); }          /* deep navy */
.bg-ink.bg-charcoal { background: var(--charcoal-depth); }                     /* blue-charcoal */
.bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink .fp-statement-main, .bg-ink .fp-outcome { color: #f6f1e7; }
.bg-ink .eyebrow, .on-dark .eyebrow { color: var(--champagne); }
.bg-ink .section-head p, .bg-ink .lead { color: var(--muted-light); }
.bg-ink + .bg-ink { box-shadow: inset 0 1px 0 rgba(216, 188, 130, 0.22); }      /* gold seam between two dark sections */
/* light cards placed on dark sections keep navy text */
.bg-ink .s-card h3, .bg-ink .why-col h3, .bg-ink .why-col h4, .bg-ink .fp-mandates h4, .bg-ink .why-list strong { color: var(--ink); }
.bg-ink .s-card p, .bg-ink .why-col p, .bg-ink .why-list span { color: var(--muted); }
.bg-ink .btn-outline { --btn-bg: transparent; --btn-fg: #f6f1e7; --btn-bd: var(--champagne); box-shadow: none; }
.bg-ink .btn-outline:hover { --btn-bg: linear-gradient(180deg, #e3c98f 0%, #c9a55e 55%, #b8934b 100%); --btn-fg: var(--navy-900); --btn-bd: #a9853f; }

/* Inner-page hero: navy light over the photo + angled lower edge */
.page-hero { background: var(--navy-900); }
.page-hero::before {
  background:
    radial-gradient(700px 380px at 0% 100%, rgba(22, 58, 99, 0.6), transparent 70%),
    linear-gradient(90deg, rgba(var(--overlay-rgb), 0.88) 0%, rgba(var(--overlay-rgb), 0.58) 60%, rgba(var(--overlay-rgb), 0.32) 100%),
    linear-gradient(0deg, rgba(var(--overlay-rgb), 0.55), rgba(var(--overlay-rgb), 0) 50%);
}
@media (min-width: 768px) {
  .page-hero.compact { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); padding-bottom: calc(clamp(40px, 5vw, 64px) + 24px); }
}
/* Home hero: deep navy overlay on the existing video (video untouched) */
.hero::before {
  background:
    radial-gradient(900px 520px at 0% 100%, rgba(16, 40, 74, 0.6), transparent 70%),
    linear-gradient(90deg, rgba(var(--overlay-rgb), 0.8) 0%, rgba(var(--overlay-rgb), 0.5) 50%, rgba(var(--overlay-rgb), 0.22) 100%),
    linear-gradient(0deg, rgba(var(--overlay-rgb), 0.8) 0%, rgba(var(--overlay-rgb), 0.08) 55%);
}
/* Enquiry CTA: navy-to-blue gradient */
.cta-band { background: var(--navy-900); }
.cta-band::before {
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(216, 188, 130, 0.18), transparent 65%),
    linear-gradient(100deg, rgba(11, 29, 51, 0.95) 0%, rgba(16, 40, 74, 0.86) 55%, rgba(29, 78, 122, 0.7) 100%);
}
.cta-band .eyebrow { color: var(--champagne); }

/* ---------- 4. Elevated surfaces ---------- */
.s-card, .pj-card, .p-card, .proj-card, .info-card, .form-card, .why-col,
.fp-pillar, .fp-vertical, .leader-profile, .filters, .listing-toolbar {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.why-col, .fp-pillar, .fp-vertical { border-top: 3px solid var(--gold); }
.office-card.is-primary { border-color: var(--gold); box-shadow: inset 0 3px 0 var(--gold), var(--shadow); }
.bg-ink .s-card, .bg-ink .why-col { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -24px rgba(4, 12, 24, 0.7); border-color: rgba(216, 188, 130, 0.35); }

/* Image cards: image-first, consistent ratios, navy layered overlay, gold rule */
.x-card, .cat-tile, .loc-card, .m-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.x-card::before { background: linear-gradient(0deg, rgba(var(--overlay-rgb), 0.92) 0%, rgba(16, 40, 74, 0.55) 42%, rgba(var(--overlay-rgb), 0.05) 100%); }
.cat-tile::after, .loc-card::after { background: linear-gradient(0deg, rgba(var(--overlay-rgb), 0.88), rgba(16, 40, 74, 0.12) 62%); }
.pj-card-media, .p-card-media { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }

/* Restrained hover lift with perspective (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  .s-card, .pj-card, .p-card, .proj-card, .x-card, .cat-tile, .loc-card {
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
    transform-origin: 50% 100%;
  }
  .s-card:hover, .s-card:focus-within, .pj-card:hover, .pj-card:focus-within, .p-card:hover, .proj-card:hover,
  .x-card:hover, .x-card:focus-within, .cat-tile:hover, .loc-card:hover {
    transform: perspective(1000px) translateY(-6px) rotateX(1.5deg);
    box-shadow: var(--shadow-lift);
    border-color: rgba(184, 147, 75, 0.5);
  }
}

/* Gold icon medallions */
.s-card-icon, .feature-icon {
  background: radial-gradient(circle at 32% 26%, #fffaf0 0%, #f1e2bf 58%, #ddc185 100%);
  border: 1px solid rgba(184, 147, 75, 0.6);
  color: var(--navy-800);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(184, 147, 75, 0.28), 0 8px 16px -8px rgba(138, 106, 46, 0.6);
}
.svc-icon { background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: var(--champagne); box-shadow: 0 0 0 1px rgba(216, 188, 130, 0.4), 0 8px 18px -8px rgba(8, 22, 39, 0.8); }
.fp-num, .fp-tag, .office-label { color: var(--gold-deep) !important; }
.svc-points li::before { background: linear-gradient(180deg, var(--champagne), var(--gold)); box-shadow: 0 0 0 2px rgba(216, 188, 130, 0.22); }
.checklist .icon, .why-list .icon { color: var(--gold-deep); }

/* ---------- 5. Buttons: gold gradient, or navy with a fine gold border ---------- */
.btn {
  --btn-bg: linear-gradient(180deg, #1a3f6b 0%, var(--navy-800) 100%); --btn-fg: #f6f1e7; --btn-bd: rgba(216, 188, 130, 0.7);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -10px rgba(8, 22, 39, 0.75);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { --btn-bg: linear-gradient(180deg, #21507f 0%, #143259 100%); --btn-bd: var(--champagne); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 24px -12px rgba(8, 22, 39, 0.8); }
.btn-gold { --btn-bg: linear-gradient(180deg, #e3c98f 0%, #c9a55e 55%, #b8934b 100%); --btn-fg: var(--navy-900); --btn-bd: #a9853f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(110, 82, 28, 0.35), 0 10px 22px -12px rgba(138, 106, 46, 0.9); }
.btn-gold:hover { --btn-bg: linear-gradient(180deg, #ecd6a2 0%, #d4b06a 55%, #c29d52 100%); --btn-fg: var(--navy-900); --btn-bd: #a9853f; }
.btn-outline { --btn-bg: rgba(255, 255, 255, 0.6); --btn-fg: var(--navy-800); --btn-bd: rgba(16, 40, 74, 0.45); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(11, 29, 51, 0.35); }
.btn-outline:hover { --btn-bg: linear-gradient(180deg, #1a3f6b 0%, var(--navy-800) 100%); --btn-fg: #f6f1e7; --btn-bd: var(--champagne); }
.btn-ghost-light { --btn-bg: rgba(255, 255, 255, 0.06); --btn-bd: rgba(246, 241, 231, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.btn-ghost-light:hover { --btn-bg: #f6f1e7; --btn-fg: var(--navy-900); --btn-bd: #f6f1e7; }
.btn-light { --btn-bg: linear-gradient(180deg, #ffffff, #eef2f6); --btn-fg: var(--navy-800); --btn-bd: var(--line); }
.btn-wa { --btn-bg: var(--wa); --btn-bd: var(--wa); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px -10px rgba(15, 99, 55, 0.7); }
.btn-wa:hover { --btn-bg: var(--wa-hover); --btn-bd: var(--wa-hover); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.link-arrow { color: var(--navy-800); }
.link-arrow:hover { color: var(--gold-deep); }

/* ---------- 6. Header, dropdowns, mobile menu ---------- */
.site-header.is-solid, .header-solid .site-header {
  background: rgba(253, 252, 249, 0.92);
  box-shadow: 0 1px 0 rgba(184, 147, 75, 0.3), 0 12px 30px -20px rgba(11, 29, 51, 0.45);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-solid, .header-solid .site-header { background: rgba(253, 252, 249, 0.84); backdrop-filter: saturate(1.4) blur(14px); }
}
.is-solid .nav-link[aria-current="page"], .is-solid .nav-link.is-active,
.header-solid .nav-link[aria-current="page"], .header-solid .nav-link.is-active { color: var(--gold-deep); }
.site-header:not(.is-solid) .header-cta { --btn-bg: linear-gradient(180deg, #e3c98f 0%, #c9a55e 55%, #b8934b 100%); --btn-fg: var(--navy-900); --btn-bd: #a9853f; }
.header-solid .site-header .header-cta, .site-header.is-solid .header-cta { --btn-bg: linear-gradient(180deg, #1a3f6b 0%, var(--navy-800) 100%); --btn-fg: #f6f1e7; --btn-bd: rgba(216, 188, 130, 0.7); }
.site-header .brand-logo { box-shadow: 0 0 0 1px rgba(216, 188, 130, 0.35), 0 8px 18px -10px rgba(8, 22, 39, 0.6); }
.dd {
  border: 1px solid var(--surface-border); border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f7f9fb);
  box-shadow: 0 24px 48px -20px rgba(11, 29, 51, 0.42), 0 4px 10px -6px rgba(11, 29, 51, 0.14);
}
.dd a { border-radius: 6px; color: var(--ink-2); }
.dd a:hover, .dd a:focus-visible { background: var(--blue-grey); color: var(--navy-800); }
.dd a[aria-current="page"] { color: var(--gold-deep); }
@media (max-width: 1239px) {
  .primary-nav { background: radial-gradient(600px 300px at 100% 0%, rgba(216, 188, 130, 0.16), transparent 70%), linear-gradient(180deg, #fdfcf9, #eef2f6); box-shadow: -24px 0 60px -30px rgba(11, 29, 51, 0.6); }
  .nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active { color: var(--gold-deep); }
  .dd { border: 0; background: none; box-shadow: none; padding: 0 0 12px 12px; }
  .nav-backdrop { background: rgba(8, 22, 39, 0.6); }
}

/* ---------- 7. Forms ---------- */
.field input, .field select, .field textarea, .input { border-radius: var(--radius); background: #ffffff; border-color: #d3dbe4; box-shadow: inset 0 1px 2px rgba(11, 29, 51, 0.05); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 147, 75, 0.24); }

/* ---------- 8. Footer: deep navy, ivory text, champagne labels, gold dividers ---------- */
/* Colour tokens (--ft-*) live with the footer rules in layout.css; this adds depth only. */
.site-footer {
  background:
    radial-gradient(1000px 420px at 10% 0%, rgba(29, 78, 122, 0.45), transparent 62%),
    radial-gradient(800px 380px at 100% 100%, rgba(216, 188, 130, 0.08), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
.site-footer .brand-logo { box-shadow: 0 0 0 1px rgba(216, 188, 130, 0.4), 0 14px 28px -14px rgba(2, 8, 16, 0.75); }
.footer-offices-grid { gap: 16px; }
.footer-offices address {
  background: linear-gradient(180deg, rgba(22, 58, 99, 0.55), rgba(16, 40, 74, 0.35));
  border: 1px solid var(--ft-line); border-radius: 12px; padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 30px -18px rgba(2, 8, 16, 0.7);
}
.footer-offices address:first-child { padding-left: 20px; border-left: 1px solid var(--ft-line); box-shadow: inset 0 2px 0 var(--ft-gold), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 30px -18px rgba(2, 8, 16, 0.7); }
.footer-contact li { align-items: center; }
.footer-contact .icon {
  flex: none; width: 32px; height: 32px; padding: 7px; margin-top: 0; border-radius: 50%;
  color: var(--ft-accent); background: rgba(216, 188, 130, 0.08); border: 1px solid rgba(216, 188, 130, 0.45);
}
.social a:hover { color: var(--navy-900); }

/* ---------- 9. Back to top: navy surface, gold border, champagne arrow ---------- */
.back-to-top {
  background: linear-gradient(180deg, #163a63, var(--navy-900)); color: var(--champagne); border: 1px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px -12px rgba(8, 22, 39, 0.8);
}
.back-to-top:hover { border-color: var(--champagne); background: linear-gradient(180deg, #1d4a7c, #10284a); }

/* ---------- 10. Misc refinements ---------- */
.breadcrumb a:hover { color: var(--champagne); }
.cat-chips a { background: rgba(255, 255, 255, 0.85); color: var(--ink-2); box-shadow: inset 0 1px 0 #fff, 0 4px 10px -8px rgba(11, 29, 51, 0.4); }
.cat-chips a:hover, .cat-chips a:focus-visible { border-color: var(--gold); color: var(--navy-800); }
.x-card-badge { box-shadow: 0 6px 14px -8px rgba(8, 22, 39, 0.6); }
.fp-panel { background: var(--navy-depth); box-shadow: var(--shadow-lift); }
.fp-statement { background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.leader-photo { box-shadow: inset 0 2px 10px rgba(14, 35, 64, 0.08); }

/* Contact cards: offices first (Head Office leading), Phone + Email share the next row */
.contact-cards.fp-contact-cards, .contact-cards { display: flex; flex-wrap: wrap; }
.contact-cards > .info-card { flex: 1 1 340px; min-width: 0; }
.contact-cards > .office-card { order: -1; }

/* Contact number labels */
.contact-label { display: inline-block; margin-right: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.footer-contact .contact-label { color: var(--ft-heading); opacity: 1; }
.info-card .contact-primary { margin: 0 0 8px; }
.info-card .contact-primary a { font-size: 1.15rem; }
.info-card .contact-primary .contact-label { display: block; color: var(--gold-deep); margin: 0 0 2px; }

/* ---------- 11. Justified long-form text (paragraph blocks only) ----------
   Headings, navigation, buttons, labels, breadcrumbs, phone/email links, addresses,
   short list items, centred intros and quotes keep their existing alignment. */
.prose p, .prose li,
.split > div > p:not(.eyebrow), .split > div > .lead,
.why-list li > div, .fp-pillar-head p,
.s-card > p:not(.fp-num), .pj-card-body > p, .proj-card p,
.faq-answer p, .detail-section p, .detail-section li,
.cta-band-inner p:not(.eyebrow), .re-band p:not(.eyebrow), .form-card > p:not(.form-note):not(.form-status),
.footer-brand p, .footer-disclaimer {
  text-align: justify;
  text-align-last: start;        /* short final lines stay left-aligned */
  -webkit-hyphens: auto;
  hyphens: auto;                 /* page language is en-IN: break long words rather than open wide gaps */
  hyphenate-limit-chars: 7 3 3;
  word-spacing: normal;
}
/* Very narrow screens: large intro text and narrow card copy read better left-aligned (avoids wide word gaps) */
@media (max-width: 399px) {
  .split > div > .lead, .s-card > p:not(.fp-num) { text-align: start; }
}

/* Long-form paragraphs in the corporate layouts (same treatment; short card text, labels and centred intros excluded) */
.wwd-intro, .media-row-copy > p:not(.eyebrow), .pillar-section-copy > p:not(.eyebrow),
.friction-card p, .outcome-trace p, .deploy-item p:not(.deploy-def),
.promise-note, .difference-text, .cta-panel p:not(.eyebrow), .sector-note p {
  text-align: justify;
  text-align-last: start;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
/* Narrow phone columns: left-aligned reads better than justified (no wide word gaps) */
@media (max-width: 479px) {
  .wwd-intro, .media-row-copy > p:not(.eyebrow), .pillar-section-copy > p:not(.eyebrow),
  .sector-row-body p:not(.sector-row-label), .friction-card p, .outcome-trace p, .deploy-item p:not(.deploy-def),
  .promise-note, .difference-text, .cta-panel p:not(.eyebrow), .sector-note p, .split > div > p:not(.eyebrow),
  .form-card > p:not(.form-note):not(.form-status), .footer-brand p { text-align: start; }
}

/* Links inside light cards that sit on dark sections keep the card's navy colour (base makes dark-section links white) */
.bg-ink .s-card .link-arrow, .bg-ink .why-col .link-arrow, .bg-ink .pj-card .link-arrow,
.on-dark .s-card .link-arrow, .on-dark .why-col .link-arrow, .on-dark .pj-card .link-arrow { color: var(--navy-800); }
.bg-ink .s-card .link-arrow:hover, .bg-ink .why-col .link-arrow:hover, .bg-ink .pj-card .link-arrow:hover { color: var(--gold-deep); }

/* Footer bottom row (copyright + design credit): aligned on desktop, stacked neatly on mobile */
.footer-bottom { align-items: center; }
@media (max-width: 767px) { .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Desktop dropdowns: become visible instantly on open (so keyboard focus can enter immediately); hide after the fade on close */
@media (min-width: 1240px) {
  .primary-nav .dd { transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s; }
  .primary-nav .has-dd:hover > .dd, .primary-nav .has-dd:focus-within > .dd, .primary-nav .has-dd.is-open > .dd { transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0s; }
}
/* Comfortable tap targets on phones (>= 24px) for footer link lists and breadcrumbs */
@media (max-width: 767px) {
  .footer-col ul a { display: inline-block; padding-block: 2px; }
  .breadcrumb a, .breadcrumb [aria-current] { display: inline-block; padding-block: 2px; }
  .footer-credit a { display: inline-block; padding-block: 3px; }
}

/* ---------- 12. Homepage logo intro (once per session; markup + controller in index.html) ----------
   12 s by default (about 2.5 s with prefers-reduced-motion). The overlay also fades itself out in CSS,
   so it can never stay on screen even if the script does not run. Skip Intro / Esc leave immediately. */
.fp-intro { display: none; }
html.fp-intro-on { overflow: hidden; scrollbar-gutter: stable; }          /* no scrolling, no layout shift */
.fp-intro-on .fp-intro {
  --intro-dur: 12s;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 42%, rgba(216, 188, 130, 0.18) 0, rgba(216, 188, 130, 0.05) 26%, rgba(216, 188, 130, 0) 46%),
    radial-gradient(ellipse at 50% 115%, rgba(29, 78, 122, 0.7), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(22, 58, 99, 0.55), transparent 55%),
    #050d1a;
  color: #fff; text-align: center;
  animation: fpIntroOut 0.8s ease calc(var(--intro-dur) - 0.8s) forwards;   /* safety net: fades out on its own */
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.fp-intro-on .fp-intro.is-leaving { opacity: 0; visibility: hidden; animation: none; }
.fp-intro-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 4.2vh, 44px); max-width: 100%; }
.fp-intro-ring {
  position: relative; flex: none; width: clamp(180px, min(56vw, 40vh), 380px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Continues the logo artwork's own background gradient across the ring (fitted to the asset: angle 141.5deg,
     average error under 2/255), so the logo's rectangular edge disappears. The logo file itself is untouched. */
  background: linear-gradient(141.5deg, #346b8d 0%, #071e2f 100%);
  box-shadow: 0 0 0 1px rgba(216, 188, 130, 0.6), 0 0 44px rgba(216, 188, 130, 0.26), 0 0 140px rgba(216, 188, 130, 0.12);
  animation: fpRingIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both, fpGlow 4s ease-in-out 1.2s infinite;
}
.fp-intro-ring::before {                                    /* fine gold outline with a slowly travelling highlight */
  content: ""; position: absolute; inset: -12px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, rgba(216, 188, 130, 0.25) 0deg, #e3c88f 70deg, rgba(216, 188, 130, 0.25) 160deg, #b8934b 260deg, rgba(216, 188, 130, 0.25) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fpSpin 9s linear infinite;
}
.fp-intro-ring::after {                                     /* inner vignette ABOVE the logo, so ring and logo are shaded alike */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.35);
}
.fp-intro-ring img {                                        /* original logo, whole and undistorted */
  width: 80%; height: auto; aspect-ratio: 596 / 296; object-fit: contain;
  /* soften only the outer background margin of the artwork (logo margin is ~6% x / ~11% y) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
  animation: fpLogoIn 1.2s ease 0.4s both;
}
.fp-intro-text { margin: 0; display: grid; gap: clamp(8px, 1.4vh, 14px); max-width: 100%; }
.fp-intro-text > span { display: block; animation: fpTextIn 1s ease both; }
.fp-intro-name { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.05rem, 0.8rem + 1.3vw, 1.75rem); letter-spacing: 0.34em; padding-left: 0.34em; color: #fff; animation-delay: 1.5s !important; }
.fp-intro-line { font-family: var(--font-body); font-weight: 500; font-size: clamp(0.66rem, 0.56rem + 0.5vw, 0.95rem); letter-spacing: 0.24em; padding-left: 0.24em; color: var(--champagne); line-height: 1.6; animation-delay: 2.3s !important; }
.fp-intro-motto { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem); letter-spacing: 0.04em; color: rgba(216, 188, 130, 0.82); animation-delay: 3.1s !important; }
.fp-intro-rule { display: block; width: 56px; height: 1px; margin: 4px auto 0; background: linear-gradient(90deg, transparent, var(--champagne), transparent); animation: fpTextIn 1s ease 2.7s both; }
.fp-intro-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne);
  background: rgba(8, 22, 39, 0.6); border: 1px solid rgba(216, 188, 130, 0.55); border-radius: 999px; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fp-intro-skip:hover, .fp-intro-skip:focus-visible { background: var(--champagne); color: var(--navy-900); border-color: var(--champagne); }
.fp-intro-skip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fp-intro-skip .icon { width: 14px; height: 14px; }
.fp-intro-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-deep), var(--champagne)); animation: fpProgress var(--intro-dur) linear forwards; }
@media (max-width: 599px) { .fp-intro-skip { left: 50%; right: auto; transform: translateX(-50%); } }
@media (max-height: 520px) { .fp-intro-ring { width: clamp(120px, 34vh, 200px); } .fp-intro-stage { gap: 14px; } .fp-intro-skip { bottom: 10px; min-height: 40px; padding: 8px 16px; } }
@keyframes fpIntroOut { to { opacity: 0; visibility: hidden; } }
@keyframes fpRingIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes fpLogoIn { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fpTextIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fpGlow { 50% { box-shadow: 0 0 0 1px rgba(216, 188, 130, 0.75), 0 0 60px rgba(216, 188, 130, 0.34), 0 0 170px rgba(216, 188, 130, 0.16); } }
@keyframes fpSpin { to { transform: rotate(360deg); } }
@keyframes fpProgress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .fp-intro-on .fp-intro { --intro-dur: 2.5s; animation: fpIntroOut 0.01s linear 2.5s forwards; transition: none; }   /* short, static */
  .fp-intro-ring, .fp-intro-ring::before, .fp-intro-ring img, .fp-intro-text > span, .fp-intro-rule { animation: none; }
  .fp-intro-progress { animation: fpProgress var(--intro-dur) steps(5, end) forwards; }
}

/* ---------- 13. Mobile menu: keep the full-screen panel intact while it is open ----------
   A backdrop-filter (or background/shadow) on the solid header makes it the containing block of the fixed menu panel,
   collapsing the panel to the header's height. While the menu is open the header stays transparent and filter-free. */
@media (max-width: 1239px) {
  body.nav-open .site-header, body.nav-open .site-header.is-solid, body.nav-open.header-solid .site-header {
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.nav-open .primary-nav { height: 100vh; height: 100dvh; }
}

/* ---------- 14. Single office (Head Office only): balanced footer card + contact card grid ---------- */
.footer-offices-grid { grid-template-columns: minmax(0, 1fr); }
.contact-cards.fp-contact-cards, .contact-cards { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.contact-cards > .info-card { min-width: 0; }

/* ---------- 15. Footer after disclaimer removal: balanced single-office band ---------- */
.footer-offices { padding-block: 32px; }
@media (min-width: 1024px) {
  .footer-offices { display: flex; align-items: center; gap: clamp(28px, 3vw, 56px); }
  .footer-offices h2 { margin: 0; flex: none; }
  .footer-offices-grid { flex: 1; min-width: 0; }
  /* same three address lines, laid out across the card in one row on wide screens */
  .footer-offices address { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 28px; row-gap: 4px; padding: 20px 26px; }
  .footer-offices address strong { margin: 0; }
}

/* ---------- 17. Service pages: page-specific sections ---------- */
.related-title { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 16px; }
.container.container-narrow > .lead + p { color: var(--muted); }

/* ---------- 18. Corporate-services site: homepage hero, leadership, pillars, sectors, footer ---------- */
/* Homepage hero (still image, no video): keep the crowd visible but the copy readable */
.corp-hero .hero-media img { object-position: center 40%; }
.corp-hero .hero-content { max-width: 760px; }
.corp-hero h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5.4rem); line-height: 1.02; }
@media (max-width: 479px) { .corp-hero .btn-group .btn { flex: 1 1 100%; justify-content: center; } }

/* Large outcome statement */
.fp-outcome { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem); line-height: 1.22; margin: 0; }

/* Info-card headings (contact page) */
.info-card-title { font-family: var(--font-display); font-size: 1.5rem; }

/* Mid-width container for list sections */
.container-mid { max-width: calc(980px + var(--gutter) * 2); }

/* Leadership: monogram in place of a photograph (no stand-in image) */
.leader-profile { max-width: 760px; }
@media (min-width: 640px) { .leader-profile { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); } }
.leader-monogram { width: 100%; max-width: 200px; aspect-ratio: 1 / 1; margin-inline: auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy-depth); border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(184, 147, 75, 0.14), var(--shadow); }
.leader-monogram span { font-family: var(--font-display); font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem); letter-spacing: 0.06em; color: var(--champagne); line-height: 1; }
.leader-role { margin: 0 0 14px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.leader-text { margin: 0; color: var(--muted); }

/* About: pillar links */
.pillar-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pillar-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 22px; padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); transition: box-shadow var(--t), border-color var(--t); }
.pillar-link:hover, .pillar-link:focus-visible { box-shadow: var(--shadow); border-color: var(--gold); }
.pillar-link .fp-pillar-num { font-size: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); }
.pillar-link strong { font-family: var(--font-display); font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.8rem); font-weight: 600; }
.pillar-link-text { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-sm); }
.pillar-link > .icon { width: 20px; height: 20px; color: var(--gold-deep); transition: transform var(--t); }
.pillar-link:hover > .icon { transform: translateX(4px); }
@media (max-width: 479px) { .pillar-link { grid-template-columns: auto minmax(0, 1fr); } .pillar-link > .icon { display: none; } }

/* Promise note */
.promise-note { margin: 22px 0 18px; color: var(--muted); }
.promise-link { margin-top: 24px; }

/* Homepage sector tiles */
.sector-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: clamp(24px, 2.6vw, 34px) 18px; text-align: center; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius-lg); }
.sector-tile .s-card-icon { margin-bottom: 14px; }
.sector-tile h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); margin: 0; }

/* Footer: brand + Corporate Services + Company + Get in Touch */
@media (min-width: 1180px) { .footer-top.footer-top-4 { grid-template-columns: 1.4fr 1.1fr 0.9fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .pillar-link, .pillar-link > .icon { transition: none; } }
@media (min-width: 900px) and (max-width: 1179px) { .footer-top.footer-top-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   19. CORPORATE EXPERIENCE: hero film, page-specific layouts and a restrained
   3D finish (layered depth, fine borders, gold edge light). Works within the
   existing navy/gold/ivory palette; header, footer and logo are untouched.
   ===================================================================== */
:root {
  --depth-1: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(11, 29, 51, 0.06), 0 10px 24px -14px rgba(11, 29, 51, 0.28);
  --depth-2: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(11, 29, 51, 0.06), 0 22px 44px -22px rgba(11, 29, 51, 0.42);
  --depth-3: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 12px -6px rgba(11, 29, 51, 0.14), 0 36px 60px -30px rgba(11, 29, 51, 0.55);
  --edge-gold: linear-gradient(90deg, rgba(184, 147, 75, 0), rgba(216, 188, 130, 0.95) 50%, rgba(184, 147, 75, 0));
  --tilt: perspective(1100px) rotateX(1.2deg) translateY(-6px);
}

/* ---- Hero film ---- */
.corp-hero .hero-media .hero-poster, .corp-hero .hero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.corp-hero .hero-video { opacity: 0; transition: opacity 1.2s ease; }
.corp-hero .hero-video.is-playing { opacity: 1; }
.corp-hero::before {
  background:
    linear-gradient(90deg, rgba(6, 15, 30, 0.88) 0%, rgba(8, 22, 39, 0.6) 46%, rgba(8, 22, 39, 0.16) 100%),
    linear-gradient(0deg, rgba(6, 15, 30, 0.88) 0%, rgba(6, 15, 30, 0) 52%),
    linear-gradient(180deg, rgba(6, 15, 30, 0.55) 0%, rgba(6, 15, 30, 0) 22%);
}
.corp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--edge-gold); opacity: 0.6; }
.corp-hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.corp-hero .hero-lead { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.hero-video-toggle {
  position: absolute; right: var(--gutter); bottom: 22px; top: auto; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(8, 22, 39, 0.55); color: var(--champagne); border: 1px solid rgba(216, 188, 130, 0.45);
  font: 600 0.6875rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.hero-video-toggle:hover, .hero-video-toggle:focus-visible { background: var(--champagne); color: var(--navy-900); }
.hero-video-toggle .icon { width: 14px; height: 14px; }
@media (max-width: 599px) {
  .hero-video-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-video-toggle { padding: 8px 12px; bottom: 14px; }
}
@media (min-width: 1024px) { .corp-hero .hero-scroll { bottom: 90px; } }

/* ---- 3D finish shared by framed media ---- */
.frame-3d { position: relative; border-radius: var(--radius-lg); isolation: isolate; }
.frame-3d > img { position: relative; z-index: 1; border-radius: var(--radius-lg); box-shadow: var(--depth-3); }
.frame-3d::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: 0; border: 1px solid rgba(184, 147, 75, 0.55); border-radius: var(--radius-lg); }
.split-media.frame-3d { overflow: visible; }
.split-media.frame-3d > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .frame-3d::before { inset: 10px -8px -10px 10px; } }

/* ---- Cards: layered surfaces with a gold edge light on hover ---- */
.s-card, .wwd-card, .pillar-card, .tool-card, .friction-card, .sector-tile, .pathway-card, .deploy-item, .sector-row, .leader-profile, .home-leader {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--depth-1);
}
.s-card, .wwd-card, .pillar-card, .tool-card, .friction-card, .sector-tile, .pathway-card {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.s-card:hover, .s-card:focus-within, .wwd-card:hover, .wwd-card:focus-within, .pillar-card:hover, .pillar-card:focus-within,
.tool-card:hover, .friction-card:hover, .sector-tile:hover, .pathway-card:hover, .pathway-card:focus-visible {
  transform: var(--tilt); box-shadow: var(--depth-3); border-color: rgba(184, 147, 75, 0.55);
}

/* ---- Buttons: soft highlight + pressed state ---- */
.btn { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.btn:not(.btn-outline):not(.btn-ghost-light) { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 18px -10px rgba(8, 22, 39, 0.55); }
.btn:hover { transform: translateY(-2px); }
.btn:not(.btn-outline):not(.btn-ghost-light):hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 14px 26px -12px rgba(8, 22, 39, 0.6); }
.btn:active { transform: translateY(0); }
.btn-gold { background-image: linear-gradient(180deg, #d9bd84 0%, #b8934b 100%); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Home: What We Do ---- */
.wwd-head { display: grid; gap: 18px 56px; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 960px) { .wwd-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.wwd-head h2 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); margin: 0 0 8px; }
.wwd-sub { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); color: var(--gold-deep); }
.wwd-intro { margin: 0; color: var(--muted); font-size: var(--fs-lg); padding-left: 20px; border-left: 2px solid var(--gold); }
.wwd-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 1023px) { .wwd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wwd-grid > li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .wwd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wwd-grid > li { display: flex; min-width: 0; }
.wwd-card { position: relative; display: flex; flex-direction: column; flex: 1; border-radius: var(--radius-lg); overflow: hidden; }
.wwd-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
@media (min-width: 768px) and (max-width: 1023px) { .wwd-grid > li:last-child .wwd-card-media { aspect-ratio: 21 / 9; } }
.wwd-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wwd-card:hover .wwd-card-media img, .wwd-card:focus-within .wwd-card-media img { transform: scale(1.05); }
.wwd-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 22, 39, 0.6), rgba(8, 22, 39, 0) 60%); }
.wwd-card-num { position: absolute; left: 20px; bottom: 12px; z-index: 1; font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--champagne); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.wwd-card-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.4vw, 32px); }
.wwd-card-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--edge-gold); }
.wwd-card-body .s-card-icon { position: absolute; right: 22px; top: -28px; margin: 0; background: var(--white); box-shadow: var(--depth-2); }
.wwd-card h3 { font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.8rem); margin: 0 0 10px; padding-right: 48px; }
.wwd-card h3 a { color: inherit; text-decoration: none; }
.wwd-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.wwd-card h3 a:focus-visible { outline: none; }
.wwd-card:has(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.wwd-card p { color: var(--muted); margin: 0 0 20px; }
.wwd-card .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---- Home: gap -> approach map ---- */
.gap-map { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 1080px; }
.gap-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; padding: clamp(18px, 2.2vw, 26px); border: 1px solid var(--line-dark); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)); }
@media (min-width: 820px) { .gap-row { grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.6fr); gap: 28px; } }
.gap-problem { display: flex; align-items: center; gap: 14px; color: #fff; font-family: var(--font-display); font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.7rem); }
.gap-problem .icon { flex: none; width: 24px; height: 24px; color: var(--champagne); }
.gap-arrow { display: none; color: var(--gold); }
.gap-arrow .icon { width: 22px; height: 22px; }
@media (min-width: 820px) { .gap-arrow { display: inline-flex; } }
.gap-answer p { margin: 0 0 8px; color: var(--muted-light); }
.bg-ink .gap-answer .link-arrow { color: var(--champagne); }

/* ---- Home: pillar cards ---- */
.pillar-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pillar-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar-cards > li { display: flex; min-width: 0; }
.pillar-card { position: relative; flex: 1; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg); overflow: hidden; }
.pillar-card-num { position: absolute; right: 18px; top: -10px; font-family: var(--font-display); font-size: 7.5rem; line-height: 1; color: rgba(184, 147, 75, 0.14); pointer-events: none; }
.pillar-card-tag { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.pillar-card h3 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); margin: 0 0 12px; }
.pillar-card p:not(.pillar-card-tag) { color: var(--muted); margin: 0 0 22px; }
.pillar-card .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---- Sector tiles (home) ---- */
.sector-tile p { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ---- Home: difference + leadership ---- */
.mandate-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 22px; padding: 0; }
.mandate-chips li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(184, 147, 75, 0.5); background: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.home-leader { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 28px; align-items: center; max-width: 900px; margin-inline: auto; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--radius-lg); }
.home-leader h2 { margin: 0 0 4px; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.home-leader .leader-role { margin: 0; }
.home-leader .eyebrow { margin-bottom: 4px; }
.home-leader > .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) { .home-leader { grid-template-columns: auto minmax(0, 1fr) auto; } .home-leader > .btn { grid-column: auto; } }
.leader-monogram.small { width: 96px; max-width: 96px; }
.leader-monogram.small span { font-size: 2.2rem; }

/* ---- Contextual CTA panel ---- */
.cta-panel-wrap { padding-block: clamp(48px, 6vw, 88px); }
.cta-panel { position: relative; display: grid; gap: 26px 48px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(30px, 4.4vw, 60px); border-radius: calc(var(--radius-lg) + 4px); overflow: hidden; color: #fff; background: var(--navy-depth); box-shadow: 0 40px 70px -40px rgba(8, 22, 39, 0.8), 0 0 0 1px rgba(216, 188, 130, 0.28) inset; }
.cta-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--edge-gold); }
.cta-panel::after { content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(216, 188, 130, 0.22); box-shadow: 0 0 0 40px rgba(216, 188, 130, 0.035), 0 0 0 90px rgba(216, 188, 130, 0.025); pointer-events: none; }
@media (min-width: 960px) { .cta-panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.cta-panel h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); max-width: 22ch; }
.cta-panel p:not(.eyebrow) { color: var(--muted-light); margin: 0; max-width: 56ch; }
.cta-panel .eyebrow { color: var(--champagne); }
.cta-panel-copy { position: relative; z-index: 1; min-width: 0; }
.cta-panel-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 960px) { .cta-panel-actions { justify-content: flex-end; } }
@media (max-width: 479px) { .cta-panel-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* ---- Media rows (services overview, integrity systems) ---- */
.media-rows { display: grid; gap: clamp(56px, 7vw, 96px); padding-block: clamp(16px, 3vw, 40px); }
.media-row { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .media-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .media-row.reverse > .media-row-media { order: 2; } }
.media-row-media { aspect-ratio: 16 / 10; }
.media-row-media > img { width: 100%; height: 100%; object-fit: cover; }
.media-row-copy { min-width: 0; }
.media-row-copy h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); margin: 0 0 14px; }
.media-row-copy p:not(.eyebrow) { color: var(--muted); }
.svc-points.inline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 22px; }

/* ---- Services overview: pathway cards ---- */
.pathway-cards { max-width: 1040px; margin-inline: auto; }
.pathway-card { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); }
.pathway-card .s-card-icon { margin-bottom: 8px; }
.pathway-card-title { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 600; }
.pathway-card-text { color: var(--muted); margin-bottom: 12px; }
.pathway-card .link-arrow { margin-top: auto; }

/* ---- Manpower: deploy list, verification panel, flow steps ---- */
.deploy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.deploy-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-lg); border-left: 3px solid var(--gold); }
.deploy-item .s-card-icon { margin: 0; }
.deploy-item h3 { margin: 0 0 6px; font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.8rem); }
.deploy-def { margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.deploy-item p:not(.deploy-def) { margin: 0; color: var(--muted); }
@media (max-width: 479px) { .deploy-item { grid-template-columns: minmax(0, 1fr); } }
.check-panel { list-style: none; margin: 0; padding: clamp(24px, 3vw, 38px); display: grid; gap: 18px; border-radius: var(--radius-lg); border: 1px solid var(--line-dark); background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7); }
.check-panel li { display: flex; gap: 14px; align-items: flex-start; }
.check-panel .icon { flex: none; width: 22px; height: 22px; margin-top: 3px; padding: 3px; border-radius: 50%; background: var(--gold); color: var(--navy-900); }
.check-panel strong { display: block; color: #fff; font-size: 1.05rem; }
.check-panel span { color: var(--muted-light); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 900px) { .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } .flow-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 9px; height: 1px; background: var(--edge-gold); } }
.flow-steps li { position: relative; padding-top: 34px; }
@media (min-width: 900px) { .flow-steps li { text-align: center; } }
.flow-steps-dot { position: absolute; top: 0; left: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); box-shadow: 0 0 0 5px rgba(184, 147, 75, 0.15); }
@media (min-width: 900px) { .flow-steps-dot { left: 50%; transform: translateX(-50%); } }
.flow-steps h3 { margin: 0 0 6px; font-size: 1.55rem; }
.flow-steps p { margin: 0; color: var(--muted); }
.sector-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 22px; align-items: center; max-width: 1000px; padding: clamp(20px, 2.6vw, 30px); border: 1px dashed rgba(184, 147, 75, 0.6); border-radius: var(--radius-lg); }
.sector-note .s-card-icon { margin: 0; }
.sector-note h2 { margin: 0 0 6px; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.sector-note p { margin: 0; color: var(--muted); }
.sector-note .link-arrow { grid-column: 2; justify-self: start; }
@media (min-width: 900px) { .sector-note { grid-template-columns: auto minmax(0, 1fr) auto; } .sector-note .link-arrow { grid-column: auto; } }
@media (max-width: 479px) { .sector-note { grid-template-columns: minmax(0, 1fr); } .sector-note .link-arrow { grid-column: 1; } }
.svc-links { padding-block: 28px 8px; }
.svc-links .related-title { margin-bottom: 14px; }

/* ---- Consultancy: toolkit + friction pair ---- */
.tool-card { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.8vw, 36px); border-radius: var(--radius-lg); }
.tool-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 12px; background: var(--navy-depth); color: var(--champagne); box-shadow: 0 12px 24px -12px rgba(8, 22, 39, 0.7); transform: rotate(-4deg); }
.tool-card-icon .icon { width: 24px; height: 24px; }
.tool-card h3 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); }
.tool-card-def { color: var(--muted); margin: 0 0 18px; }
.tool-card dl { margin: auto 0 0; display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.tool-card dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.tool-card dd { margin: 2px 0 0; color: var(--ink); }
.friction-pair { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: minmax(0, 1fr); max-width: 1080px; margin-inline: auto; }
@media (min-width: 820px) { .friction-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.friction-card { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg); overflow: hidden; }
.friction-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold), rgba(184, 147, 75, 0)); }
.friction-card-icon { display: inline-flex; color: var(--gold-deep); margin-bottom: 14px; }
.friction-card-icon .icon { width: 30px; height: 30px; }
.friction-card h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2rem); }
.friction-card p { margin: 0; color: var(--muted); }

/* ---- Integrity: framework grid ---- */
.framework-grid { margin: 0 auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 1080px; }
@media (min-width: 820px) { .framework-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.framework-grid > div { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-lg); border: 1px solid var(--line-dark); border-top: 2px solid var(--gold); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)); }
.framework-grid dt { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; }
.framework-grid dt .icon { width: 22px; height: 22px; color: var(--champagne); flex: none; }
.framework-grid dd { margin: 0; color: var(--muted-light); }

/* ---- Sector expertise rows ---- */
.sector-jump { margin-top: 26px; margin-bottom: 0; }
.sector-rows { display: grid; gap: clamp(18px, 2.4vw, 28px); max-width: calc(1120px + var(--gutter) * 2); }
.sector-row { padding: clamp(24px, 3.2vw, 44px); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + 16px); position: relative; overflow: hidden; }
.sector-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--edge-gold); }
.sector-row-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sector-row-head .s-card-icon { margin: 0; }
.sector-row-head h2 { margin: 0; font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem); min-width: 0; }
.sector-row-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold); }
.sector-row-body { display: grid; gap: 20px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .sector-row-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sector-row-body > div + div { padding-left: 40px; border-left: 1px solid var(--line); } }
.sector-row-body .sector-row-label { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.sector-row-body p:not(.sector-row-label) { color: var(--muted); margin: 0 0 12px; }

/* ---- 3 Pillars page ---- */
.pillar-index { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pillar-index a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; background: var(--white); box-shadow: var(--depth-1); }
.pillar-index a span { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); }
.pillar-index a em { color: var(--gold-deep); font-weight: 500; }
.pillar-index a:hover, .pillar-index a:focus-visible { border-color: var(--gold); }
.pillar-section { padding-block: clamp(72px, 8vw, 120px); scroll-margin-top: var(--header-h); background: var(--ivory); }
.pillar-section.alt { background: var(--blue-grey); }
.pillar-section-inner { display: grid; gap: clamp(48px, 5vw, 80px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .pillar-section-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .pillar-section.alt .pillar-section-media { order: 2; } }
.pillar-section-media { aspect-ratio: 4 / 3; }
.pillar-section-media > img { width: 100%; height: 100%; object-fit: cover; }
.pillar-section-num { position: absolute; z-index: 2; left: -6px; bottom: -30px; font-family: var(--font-display); font-size: clamp(5rem, 3.6rem + 6vw, 9rem); line-height: 1; color: var(--gold); text-shadow: 0 10px 30px rgba(8, 22, 39, 0.25); }
.pillar-section-copy { min-width: 0; }
.pillar-section-copy h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); margin: 0 0 14px; }
.pillar-section-copy .lead { margin-bottom: 12px; }
.pillar-section-copy > p:not(.eyebrow):not(.lead) { color: var(--muted); }
.pillar-section-copy .fp-dl { margin: 22px 0; }

/* ---- Outcome page ---- */
.outcome-hero .fp-outcome { margin-top: 10px; }
.outcome-trace { list-style: none; margin: 0 auto; padding: 0; counter-reset: o; display: grid; gap: 18px; max-width: 980px; }
.outcome-trace li { counter-increment: o; position: relative; padding: clamp(22px, 2.8vw, 34px) clamp(20px, 2.8vw, 34px) clamp(22px, 2.8vw, 34px) clamp(72px, 8vw, 104px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--depth-1); }
.outcome-trace li::before { content: "0" counter(o); position: absolute; left: clamp(18px, 2.6vw, 32px); top: clamp(18px, 2.4vw, 28px); font-family: var(--font-display); font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); line-height: 1; color: var(--gold); }
.outcome-trace h3 { margin: 0 0 8px; font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.9rem); }
.outcome-trace p { margin: 0 0 12px; color: var(--muted); }

/* ---- Reduced motion: keep the depth, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .s-card, .wwd-card, .pillar-card, .tool-card, .friction-card, .sector-tile, .pathway-card, .btn, .wwd-card-media img { transition: none; }
  .s-card:hover, .s-card:focus-within, .wwd-card:hover, .wwd-card:focus-within, .pillar-card:hover, .pillar-card:focus-within,
  .tool-card:hover, .friction-card:hover, .sector-tile:hover, .pathway-card:hover, .pathway-card:focus-visible, .btn:hover { transform: none; }
  .wwd-card:hover .wwd-card-media img, .wwd-card:focus-within .wwd-card-media img { transform: none; }
  .corp-hero .hero-video { display: none; }
}
.difference-text { color: var(--muted); margin: 16px 0 0; }
/* Small, short phones (e.g. 320x568): keep the headline and both CTAs inside the first screen */
@media (max-width: 479px) and (max-height: 700px) {
  .corp-hero { min-height: 100svh; padding-top: calc(var(--header-h) + 20px); padding-bottom: 56px; }
  .corp-hero h1 { font-size: 2.15rem; margin-bottom: 0.3em; }
  .corp-hero .hero-categories { margin-bottom: 12px; }
  .corp-hero .hero-lead { font-size: 0.95rem; line-height: 1.55; margin-bottom: 18px; }
  .corp-hero .btn-group { gap: 10px; }
  .corp-hero .btn-group .btn { min-height: 46px; }
}