/* =========================================================
   Capital Projects Management SPC — editorial theme layer
   Heavy grotesque headlines, alternating light/dark panels,
   inset section blocks. Loaded last, overrides style.css.
   ========================================================= */
:root{
  --display:'Archivo','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --light:#F4F6F8; --light-2:#E9ECF0; --light-3:#DEE2E8;
  --ink:#0A1424; --ink-soft:#414F63; --ink-muted:#5B6A7E;
  --gold-ink:#7A5E19;
  --inset:clamp(0px,2.6vw,44px);
}

/* ---------- 1. Typography ---------- */
.display,.h2,.h4,.band__quote,.tile h3,.tabs__btn,.stat__value{
  font-family:var(--display); font-weight:700; text-transform:none; letter-spacing:-.022em }
.display{ font-size:clamp(2.4rem,6vw,5.2rem); line-height:1.02 }
.h2{ font-size:clamp(1.95rem,3.9vw,3.35rem); line-height:1.06; max-width:26ch }
.h4{ font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.12 }
.page-hero .display{ font-size:clamp(2.2rem,5.6vw,4.6rem); max-width:22ch }
.hero .display{ font-size:clamp(2.5rem,6.4vw,5.4rem) }
.global .display{ font-size:clamp(2.3rem,5.2vw,4.6rem) }
.cta .display{ font-size:clamp(2.1rem,4.6vw,4rem) }
.band__quote{ font-size:clamp(1.9rem,3.8vw,3.4rem); line-height:1.1; max-width:22ch }
.lead{ font-size:clamp(1.1rem,1.45vw,1.32rem); line-height:1.6; font-weight:400 }
.slogan{ font-family:var(--sans); font-style:normal; font-weight:500; letter-spacing:.02em }
.hero__slogan{ font-size:clamp(1.05rem,1.7vw,1.4rem) }
.mobile-nav a,.partner-types li,.partner-types--detail strong{ font-family:var(--display); font-weight:700; text-transform:none; letter-spacing:-.02em }
.statement p{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.3 }
.portrait__initials,.step__num,.card__num,.service__num,.error-code{ font-family:var(--display); font-weight:600 }
.empty p.h4{ max-width:34ch }

/* ---------- 2. Breadcrumb strip ---------- */
.crumbbar{ position:absolute; top:var(--header); left:0; right:0; z-index:4;
  background:rgba(244,246,248,.1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(217,220,225,.14) }
.crumbbar .breadcrumb{ margin:0; padding-block:14px; animation:none }
.page-hero__content{ padding-top:calc(var(--header) + 120px) }
.page-hero--plain .page-hero__content{ padding-top:calc(var(--header) + 130px) }
@media (max-width:560px){ .page-hero__content{ padding-top:calc(var(--header) + 96px) } }

/* ---------- 3. Light inset panels ---------- */
.section--light{ background:var(--light); color:var(--ink-soft); margin-inline:var(--inset); position:relative }
.section--light h1,.section--light h2,.section--light h3,.section--light h4,.section--light strong{ color:var(--ink) }
.section--light .lead{ color:var(--ink-soft) }
.section--light .muted,.section--light .prose p,.section--light p{ color:var(--ink-muted) }
.section--light .label{ color:var(--gold-ink) }
.section--light .disclaimer{ border-color:rgba(10,20,36,.14); color:var(--ink-muted) }
.section--light .text-link{ color:var(--gold-ink); background-image:linear-gradient(var(--gold-ink),var(--gold-ink)) }
.section--light .btn{ color:var(--ink); border-color:var(--ink) }
.section--light .btn::after{ background:var(--ink) }
.section--light .btn:hover,.section--light .btn:focus-visible{ color:#fff }
.section--light .btn--solid{ background:var(--ink); color:#fff; border-color:var(--ink) }
.section--light .btn--solid::after{ background:var(--gold) }
.section--light .btn--solid:hover,.section--light .btn--solid:focus-visible{ color:var(--ink) }
.section--light .shimmer{ background-image:none; -webkit-background-clip:border-box; background-clip:border-box }
.section--light .principles,.section--light .values,.section--light .partner-types,
.section--light .partner-types li,.section--light .value,.section--light .service,
.section--light .contact-list,.section--light .contact-list div{ border-color:rgba(10,20,36,.13) }
.section--light .principle + .principle,.section--light .value:not(:nth-child(3n+1)){ border-left-color:rgba(10,20,36,.13) }
.section--light .statement{ border-color:rgba(10,20,36,.15); background:#fff }
.section--light .leader-strip{ border-color:rgba(10,20,36,.15); background:#fff }
.section--light .portrait{ background:linear-gradient(160deg,#fff,var(--light-2)); border-color:rgba(10,20,36,.14) }
.section--light .portrait__initials{ color:rgba(122,94,25,.5) }
.section--light .leader__role{ color:var(--gold-ink) }
.section--light .leader__bio{ border-color:rgba(10,20,36,.14); color:var(--ink-muted) }
.section--light .leader__contact a{ color:var(--ink) }
.section--light .empty{ border-color:rgba(10,20,36,.15); background:#fff }

/* ---------- 4. Benefit tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,22px) }
.tile{ position:relative; background:linear-gradient(165deg,#EFF1F4 0%,#F9FAFB 60%); padding:clamp(26px,2.8vw,44px);
  min-height:clamp(180px,17vw,250px); display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease) }
.tile::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out) }
.tile:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(10,20,36,.09) }
.tile:hover::before{ transform:scaleX(1) }
.tile h3{ font-size:clamp(1.12rem,1.7vw,1.55rem); line-height:1.15; color:var(--ink) }
.tile p{ margin:14px 0 0; font-size:.97rem; line-height:1.55; color:var(--ink-muted) }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .tiles{ grid-template-columns:1fr } .tile{ min-height:0 } }

/* ---------- 5. Services switcher ---------- */
.switch{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,72px); align-items:start }
.switch__list{ display:flex; flex-direction:column; border-top:1px solid rgba(10,20,36,.13) }
.switch__btn{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  text-align:left; padding:clamp(16px,1.8vw,22px) clamp(16px,2vw,26px); border:0; border-bottom:1px solid rgba(10,20,36,.13);
  background:transparent; color:var(--ink); font-size:clamp(1.02rem,1.5vw,1.3rem); cursor:pointer;
  transition:background-color .35s var(--ease), padding-left .35s var(--ease-out) }
.switch__btn::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold);
  transform:scaleY(0); transition:transform .4s var(--ease-out) }
.switch__btn::after{ content:""; flex:none; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); opacity:.35; transition:opacity .3s var(--ease), transform .4s var(--ease-out) }
.switch__btn:hover{ background:rgba(10,20,36,.04) }
.switch__btn[aria-selected="true"]{ background:var(--light-2) }
.switch__btn[aria-selected="true"]::before{ transform:scaleY(1) }
.switch__btn[aria-selected="true"]::after{ opacity:1; transform:rotate(-45deg) translateX(3px) }
.switch__panel{ padding-top:4px }
.switch__panel[hidden]{ display:none }
.js .switch__panel{ animation:panelIn .55s var(--ease-out) both }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.switch__panel .card__icon{ color:var(--gold-ink); margin-bottom:24px }
.switch__panel h3{ margin:0 0 18px }
.switch__panel > p{ color:var(--ink-muted); max-width:56ch; margin:0 }
.match{ margin-top:32px; background:#fff; border:1px solid rgba(10,20,36,.1); padding:clamp(24px,2.6vw,36px) }
.match__title{ font-weight:600; color:var(--ink); margin:0 0 18px; font-size:1rem }
.match ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.match li{ display:flex; gap:14px; color:var(--ink-soft); font-size:1rem; line-height:1.5 }
.match li::before{ content:""; flex:none; width:14px; height:8px; margin-top:.45em;
  border-left:1.8px solid var(--gold-ink); border-bottom:1.8px solid var(--gold-ink); transform:rotate(-45deg) }
.no-js .switch__list{ display:none }
.no-js .switch{ grid-template-columns:1fr }
.no-js .switch__panel + .switch__panel{ margin-top:56px; padding-top:56px; border-top:1px solid rgba(10,20,36,.13) }
@media (max-width:899px){ .switch{ grid-template-columns:1fr; gap:32px } }

/* ---------- 6. Dark-panel refinements ---------- */
.card{ background:rgba(255,255,255,.012) }
.card .h3,.step .h3,.principle .h3,.sector__body .h3,.tabs__btn{ letter-spacing:.06em }
.section--deep{ background:var(--navy-850) }
.hero__slogan::before{ height:2px }
.rule{ height:2px }
.label::before{ height:2px }

/* ---------- 7. Fixes and polish ---------- */
.section--light .empty__mark g{ stroke:#0A1424; stroke-opacity:.45 }
.section--light .empty p.h4{ color:var(--ink) }
.site-header .btn{ background:var(--gold); color:var(--navy-950); border-color:var(--gold) }
.site-header .btn::after{ background:var(--gold-light) }
.site-header .btn:hover,.site-header .btn:focus-visible{ color:var(--navy-950) }
.nav__link{ font-weight:600; letter-spacing:.08em }
/* no-JS: show every services panel */
.no-js .switch__panel[hidden]{ display:block }
.no-js .switch__panel{ animation:none }
/* focus ring should not frame the whole services panel on pointer use */
.switch__panel:focus{ outline:none }
.switch__panel:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:6px }

/* ---------- 8. Grouped navigation ---------- */
.nav__list{ align-items:center }
.nav__item{ position:relative; display:flex; align-items:center }
.nav__link--parent{ display:inline-flex; align-items:center; gap:7px }
.nav__link--parent svg{ width:9px; height:6px; transition:transform .3s var(--ease); opacity:.7 }
.nav__item.is-active > .nav__link::after{ transform:scaleX(1) }
.nav__toggle-sub{ display:none }
.submenu{ position:absolute; top:100%; left:-22px; min-width:268px; margin:0; padding:10px 0; list-style:none;
  background:rgba(8,18,33,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-top:2px solid var(--gold);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .35s var(--ease-out), visibility 0s linear .3s;
  box-shadow:0 26px 60px rgba(2,6,14,.5) }
.nav__item:hover > .submenu,.nav__item:focus-within > .submenu{ opacity:1; visibility:visible; transform:none; transition:opacity .28s var(--ease), transform .35s var(--ease-out) }
.nav__item:hover > .nav__link--parent svg,.nav__item:focus-within > .nav__link--parent svg{ transform:rotate(180deg) }
.submenu a{ display:block; padding:11px 24px; font-size:.92rem; font-weight:500; color:var(--platinum); text-decoration:none;
  border-left:2px solid transparent; transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease) }
.submenu a:hover,.submenu a:focus-visible{ color:#fff; background:rgba(200,164,93,.09); border-left-color:var(--gold) }
.submenu a[aria-current="page"]{ color:var(--gold-light); border-left-color:var(--gold) }

/* mobile grouped nav */
.mobile-nav__group > ul{ list-style:none; margin:0; padding:0 0 14px; border-top:0 }
.mobile-nav__label{ display:block; padding:22px 0 10px; font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold) }
.mobile-nav__group li{ border-bottom:0 }
.mobile-nav__group a{ font-size:clamp(1.12rem,4.6vw,1.4rem); padding:11px 0 11px 18px; border-left:1px solid var(--line) }
.mobile-nav__group a[aria-current="page"]{ border-left-color:var(--gold) }
.mobile-nav__group{ border-bottom:1px solid var(--line) }

/* ---------- 9. Service page blocks ---------- */
.two-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px); align-items:start }
@media (max-width:767px){ .two-col{ grid-template-columns:1fr } }
.who{ margin-top:clamp(48px,5vw,80px) }
.who .h4{ margin-bottom:22px }
.office{ margin-top:clamp(48px,5vw,80px); max-width:760px }
.office .h4{ margin-bottom:22px }
.section--light .placeholder{ color:var(--gold-ink) }
.switch__more{ margin-top:26px }
.section--light .pillar::before{ background:rgba(10,20,36,.16) }
.section--light .partner-types--detail li{ grid-template-columns:1fr }

/* ---------- 10. WhatsApp ---------- */
.wa-fab{ position:fixed; right:clamp(14px,2.2vw,28px); bottom:clamp(14px,2.2vw,28px); z-index:120;
  display:inline-flex; align-items:center; gap:0; height:58px; width:58px; padding:0; overflow:hidden;
  border-radius:999px; background:#1FA855; color:#fff; text-decoration:none;
  box-shadow:0 10px 26px rgba(3,8,16,.42), 0 0 0 1px rgba(255,255,255,.1) inset;
  transition:width .45s var(--ease-out), background-color .3s var(--ease), transform .3s var(--ease-out) }
.wa-fab svg{ width:30px; height:30px; flex:none; margin:0 14px }
.wa-fab__label{ font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; opacity:0;
  padding-right:22px; transition:opacity .3s var(--ease) }
.wa-fab:hover,.wa-fab:focus-visible{ width:186px; background:#179B4B }
.wa-fab:hover .wa-fab__label,.wa-fab:focus-visible .wa-fab__label{ opacity:1 }
.wa-fab::after{ content:""; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(31,168,85,.55); animation:waPulse 3.2s var(--ease) infinite }
@keyframes waPulse{ 0%{ box-shadow:0 0 0 0 rgba(31,168,85,.5) } 70%{ box-shadow:0 0 0 18px rgba(31,168,85,0) } 100%{ box-shadow:0 0 0 0 rgba(31,168,85,0) } }
@media print,(prefers-reduced-motion:reduce){ .wa-fab::after{ animation:none } }
@media print{ .wa-fab{ display:none } }

.btn--wa{ margin-top:26px; gap:10px; border-color:#1FA855; color:#fff }
.btn--wa svg{ width:20px; height:20px; color:#25D366 }
.btn--wa::after{ background:#1FA855 }
.btn--wa:hover,.btn--wa:focus-visible{ color:#fff }
.section--light .btn--wa{ color:var(--ink); border-color:#1FA855 }
.section--light .btn--wa:hover{ color:#fff }
.footer__wa{ display:inline-flex; align-items:center; gap:9px }
.footer__wa svg{ width:17px; height:17px; color:#25D366; flex:none }
.mobile-nav__foot .btn{ justify-content:center }

/* ---------- 11. Address ---------- */
address{ font-style:normal; line-height:1.6 }
.footer__address{ color:var(--platinum); font-size:.95rem; margin:0 0 18px }
.contact-list address{ margin-bottom:10px }
.contact-list .text-link{ font-size:.72rem }
.office address{ color:inherit }

/* ---------- 12. Location map ---------- */
.map{ position:relative; border:1px solid var(--line); background:
  radial-gradient(120% 120% at 20% 10%, rgba(200,164,93,.07), transparent 60%), var(--navy-900);
  aspect-ratio:16/7; display:grid; place-items:center; overflow:hidden }
.map__placeholder{ text-align:center; padding:clamp(20px,4vw,48px); max-width:100%; width:min(560px,100%) }
.map__pin{ width:42px; height:42px; color:var(--gold); margin:0 auto 20px }
.map__address{ margin:0 0 26px; color:var(--platinum); line-height:1.65 }
.map .btn-row{ justify-content:center }
.map__note{ margin:22px 0 0; font-size:.82rem; color:var(--subtle) }
.map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.25) contrast(1.05) }
.map.is-loaded{ aspect-ratio:16/7; background:var(--navy-900) }
.section--light .map{ border-color:rgba(10,20,36,.15); background:#fff }
.section--light .map__address{ color:var(--ink) }
.section--light .map__note{ color:var(--ink-muted) }
@media (max-width:767px){ .map{ aspect-ratio:4/3 } }

/* ---------- 13. Section background imagery ---------- */
.section--bg{ position:relative; overflow:hidden; isolation:isolate }
.section--bg > .section__bg{ position:absolute; inset:-8% -4%; z-index:-1; opacity:.5 }
.section--bg > .section__bg picture,.section--bg > .section__bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 50% }
.section--bg::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--navy-900) 8%, rgba(11,23,40,.86) 42%, rgba(11,23,40,.55) 100%),
             linear-gradient(180deg, var(--navy-900), transparent 22%, transparent 74%, var(--navy-900)) }
@media (max-width:767px){ .section--bg > .section__bg{ opacity:.35 } }

/* ---------- 14. Map-backed sections ---------- */
.section--map{ position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 80% 0%, rgba(200,164,93,.055), transparent 60%), var(--navy-950) }
.section--map > .section__map{ position:absolute; inset:-6% -10% auto 12%; z-index:-1; opacity:.26; pointer-events:none;
  -webkit-mask-image:linear-gradient(170deg,rgba(0,0,0,.45) 0%,#000 45%,transparent 88%); mask-image:linear-gradient(170deg,rgba(0,0,0,.45) 0%,#000 45%,transparent 88%) }
.section--map > .section__map img{ width:100%; height:auto }
@media (max-width:900px){ .section--map > .section__map{ inset:auto -40% -10% -10%; opacity:.12 } }

/* the page heroes were sitting under too much shade — let the photograph read */
.page-hero::before{ background:
  linear-gradient(180deg, rgba(7,17,31,.78) 0%, rgba(7,17,31,.34) 38%, rgba(7,17,31,.42) 62%, rgba(7,17,31,.95) 100%),
  linear-gradient(90deg, rgba(7,17,31,.82) 0%, rgba(7,17,31,.34) 52%, rgba(7,17,31,.08) 100%) }
.page-hero .hero__media img{ opacity:1 }

/* ---------- 15. Find us: building beside the map ---------- */
.find{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(16px,2.2vw,32px); align-items:stretch }
.find > *{ min-width:0 }
.find .frame-wrap{ animation:none }
.find .frame{ height:100%; aspect-ratio:auto; min-height:260px }
.find .map{ height:100%; aspect-ratio:auto; min-height:260px }
@media (max-width:899px){ .find{ grid-template-columns:minmax(0,1fr) }
  .find .frame{ aspect-ratio:16/10; height:auto; min-height:0 }
  .find .map{ aspect-ratio:4/3; height:auto; min-height:0 } }

/* ---------- 16. Project cards on light panels ---------- */
.section--light .project{ background:#fff; border-color:rgba(10,20,36,.14) }
.section--light .project:hover{ border-color:rgba(200,164,93,.7); box-shadow:0 22px 46px rgba(10,20,36,.1) }
.section--light .project .h4{ color:var(--ink) }
.section--light .project p{ color:var(--ink-muted) }
.section--light .project__scope{ color:var(--ink)!important; font-weight:500 }
.section--light .project__meta{ color:var(--gold-ink) }
.section--light .toolbar{ border-color:rgba(10,20,36,.14) }
.section--light .toolbar label{ color:var(--ink) }
.section--light .input{ background:#fff; border-color:rgba(10,20,36,.2); color:var(--ink) }
.section--light .input:focus{ background:#fff; border-color:var(--gold-ink); box-shadow:0 0 0 1px var(--gold-ink) }
.section--light select.input option{ background:#fff; color:var(--ink) }
.section--light .form__small{ color:var(--ink-muted) }
.project .frame{ background:var(--navy-900) }