/* =============================================================
   AEGIS Risk Solutions — Corporate Identity Stylesheet
   Palette: midnight navy · charcoal · warm white · muted gold
   ============================================================= */

:root{
  /* Core palette */
  --navy-900:#070F1C;
  --navy-800:#0A1524;
  --navy-700:#0E1E33;
  --navy-600:#12263F;
  --charcoal:#1C2027;
  --charcoal-soft:#2A2F38;

  --white:#FFFFFF;
  --paper:#FBFAF8;
  --paper-2:#F4F2ED;
  --line-light:#E4E0D8;
  --line-dark:rgba(201,162,39,.16);

  --ink:#12161C;
  --ink-soft:#4A525E;
  --ink-mute:#7A828E;

  --gold:#C9A227;
  --gold-soft:#D9BA5E;
  --gold-deep:#A8851B;

  --on-dark:#EDEAE4;
  --on-dark-soft:rgba(237,234,228,.72);
  --on-dark-mute:rgba(237,234,228,.5);

  /* Type — Arial throughout, per brand direction. The two variables are kept
     so display and UI text can be tuned independently: --display carries the
     wider tracking and tighter leading that give Arial an editorial feel at
     large sizes. CJK families are appended so Chinese falls back to a system
     face with real glyphs instead of tofu. */
  --display:Arial, "Helvetica Neue", Helvetica,
            "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans:Arial, "Helvetica Neue", Helvetica,
         "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif:var(--display); /* legacy alias */

  /* Rhythm */
  --shell:1280px;
  --gut:clamp(1.25rem, 4vw, 3.5rem);
  --sec-y:clamp(5rem, 11vw, 10.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:84px;
}

/* ---------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-.01em}
p{margin:0 0 1.1em}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:rgba(201,162,39,.24)}

/* No italics anywhere. <em> and <cite> keep their semantics for screen readers
   and their gold colour as the accent, but are set upright. */
em, i, cite, address, dfn, var{font-style:normal}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-800); color:var(--on-dark);
  padding:.9rem 1.4rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------------------------------------------- layout */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec-y); position:relative}
.section--light{background:var(--paper); color:var(--ink)}
.section--dark{background:var(--navy-800); color:var(--on-dark)}
.section--midnight{background:linear-gradient(170deg,var(--navy-900) 0%, var(--navy-700) 100%); color:var(--on-dark)}

.section--dark::before,
.section--midnight::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80rem 40rem at 85% -10%, rgba(201,162,39,.07), transparent 60%),
    radial-gradient(60rem 40rem at 0% 110%, rgba(201,162,39,.05), transparent 60%);
}
.section--dark > .shell,
.section--midnight > .shell{position:relative; z-index:1}

/* ---------------------------------------------- typography helpers */
.eyebrow{
  font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 1.5rem; display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.6; flex:none}
.section--dark .eyebrow,.section--midnight .eyebrow,.hero .eyebrow{color:var(--gold-soft)}

/* Arial has no light cut, so restraint at display sizes comes from negative
   tracking and tight leading rather than from weight. */
.section-title{
  font-family:var(--display);
  font-size:clamp(1.95rem, 1.2rem + 2.9vw, 3.6rem);
  line-height:1.08; font-weight:400; letter-spacing:-.028em;
  margin:0 0 1.6rem; max-width:22ch;
}
.section-title em{font-style:normal; color:var(--gold-deep)}
.section--dark .section-title em,.section--midnight .section-title em{color:var(--gold-soft)}
/* A headline carrying a full approved sentence rather than a short phrase needs
   more room than the 22ch that keeps ordinary section titles compact. */
.section-title--wide{max-width:30ch}

.section-lede{
  max-width:62ch; font-size:clamp(1rem,.96rem + .25vw,1.14rem); line-height:1.85;
  color:var(--ink-soft); font-weight:300;
}
.section--dark .section-lede,.section--midnight .section-lede{color:var(--on-dark-soft)}
.section-lede--tight{max-width:46ch; margin:0}

.section-head{margin-bottom:clamp(3rem,6vw,5.5rem); max-width:var(--shell)}
.section-head--row{display:flex; gap:3rem; align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.section-head--row .section-title{margin-bottom:0}

/* ---------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.05rem 2.2rem; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent; border-radius:0; cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  position:relative; overflow:hidden;
}
.btn-gold{background:var(--gold); color:var(--navy-900); border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft); border-color:var(--gold-soft)}
.btn-outline{border-color:rgba(237,234,228,.4); color:var(--on-dark); background:transparent}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-soft)}
.btn-ghost{border-color:currentColor; padding:.75rem 1.35rem; font-size:.66rem; letter-spacing:.14em}
.btn-ghost:hover{background:var(--gold); border-color:var(--gold); color:var(--navy-900)}
.btn-block{width:100%; margin-top:.6rem}
.btn:active{transform:translateY(1px)}

.link-arrow{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--gold-deep); margin-top:.4rem;
}
.section--dark .link-arrow{color:var(--gold-soft)}
.link-arrow svg{width:24px; height:12px; transition:transform .5s var(--ease-out)}
.link-arrow:hover svg,
.ins-card:hover .link-arrow svg{transform:translateX(7px)}

/* ---------------------------------------------- header */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background:rgba(10,21,36,.9);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:rgba(201,162,39,.14);
}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header{transform:translateY(0); transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease)}

.header-inner{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.header-progress{
  height:1px; background:var(--gold); width:0%; transition:width .1s linear; opacity:.85;
}

/* ---------------------------------------------- brand lockup
   The supplied logo (assets/img/logo-aegis.png, 612×408 RGBA) carries a large
   transparent margin: the artwork occupies only x150–461, y127–243. Rather
   than ship a mis-sized image, the two blocks are cropped out of the source
   with background-position and reassembled here.

       wordmark  "AEGIS"           x150 y127  312×67   #171E45
       subtitle  "Risk Solutions"  x177 y215  261×29   #6F6F6F
       gap between the two blocks                  21px

   --k is the display size of one source pixel; change it alone to resize.
   The header and footer are dark, so the navy artwork is reversed to white
   and the subtitle's grey recession is restored with opacity. If you ever
   replace the file with a tightly cropped version, reset the offsets below. */
.brand-logo{
  --k:.33px;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(21 * var(--k));
  flex:none;
}
.brand-logo span{
  display:block;
  background-image:url("/assets/img/logo-aegis.png");
  background-repeat:no-repeat;
  background-size:calc(612 * var(--k)) calc(408 * var(--k));
  filter:brightness(0) invert(1);
}
.brand-logo .bl-word{
  width:calc(312 * var(--k)); height:calc(67 * var(--k));
  background-position:calc(-150 * var(--k)) calc(-127 * var(--k));
}
.brand-logo .bl-sub{
  width:calc(261 * var(--k)); height:calc(29 * var(--k));
  background-position:calc(-177 * var(--k)) calc(-215 * var(--k));
  opacity:.62;
}
.brand:hover .bl-sub{opacity:.8}
.brand-logo span{transition:opacity .4s var(--ease)}
.brand--foot .brand-logo{--k:.4px}

.brand{display:flex; align-items:center; gap:.85rem; color:var(--on-dark)}
.brand-mark{width:30px; height:33px; color:var(--gold); flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--sans); font-weight:500; font-size:1.08rem; letter-spacing:.34em}
.brand-sub{font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute); margin-top:.42rem}

.nav{display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem)}
.nav-list{display:flex; align-items:center; gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav-link{
  position:relative; font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-soft); padding-block:.5rem; transition:color .35s var(--ease);
  /* inline-flex so anchors and the <button> dropdown triggers build the same
     box; as plain inline elements the anchors sized to font metrics instead of
     line-height and sat ~2px below the buttons. */
  display:inline-flex; align-items:center;
  /* longer locales (fr "À propos", es "Capacidades") were being shrunk by the
     flex row and wrapping to two lines */
  white-space:nowrap;
  /* pinned rather than inherited: html[lang="zh"] raises body line-height,
     which otherwise made anchors 1px taller than the dropdown buttons */
  line-height:1.75;
}
.nav-list .nav-item{flex:none}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav-link:hover,.nav-link.is-active{color:var(--on-dark)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1); transform-origin:left}
.nav-cta{color:var(--on-dark); border-color:rgba(237,234,228,.32)}

/* ---------------------------------------------- language switcher */
.lang{position:relative; flex:none}
.lang-btn{
  display:flex; align-items:center; gap:.5rem;
  background:none; border:1px solid rgba(237,234,228,.22); cursor:pointer;
  padding:.55rem .8rem; color:var(--on-dark-soft);
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lang-btn:hover{border-color:var(--gold); color:var(--gold-soft)}
.lang-globe{width:15px; height:15px; flex:none; opacity:.85}
.lang-caret{width:9px; height:6px; flex:none; transition:transform .4s var(--ease)}
.lang.is-open .lang-caret{transform:rotate(180deg)}
.lang.is-open .lang-btn{border-color:var(--gold); color:var(--gold-soft)}

.lang-menu{
  position:absolute; top:calc(100% + .55rem); right:0; z-index:20;
  min-width:11.5rem; padding:.4rem 0;
  background:rgba(10,21,36,.97); border:1px solid rgba(201,162,39,.28);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
  /* visibility flips instantly (never transition it — a stalled transition
     leaves the menu unreachable); the fade is carried by opacity alone. */
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
}
.lang.is-open .lang-menu{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:.68rem 1.1rem; color:var(--on-dark-soft); font-size:.86rem; font-weight:300;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lang-menu button:hover{background:rgba(201,162,39,.1); color:var(--on-dark)}
.lang-menu button[aria-selected="true"]{color:var(--gold-soft)}
.lang-menu button[aria-selected="true"] .lang-abbr{opacity:1}
.lang-abbr{font-size:.62rem; letter-spacing:.16em; opacity:.45}

.nav-toggle{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; padding:0 8px;
}
.nav-toggle span{display:block; height:1px; background:var(--on-dark); transition:transform .4s var(--ease), opacity .3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-scrim{position:fixed; inset:0; background:rgba(7,15,28,.6); z-index:98; backdrop-filter:blur(2px)}

/* ---------------------------------------------- hero */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  background:var(--navy-900); color:var(--on-dark); overflow:hidden;
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:9rem;
}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-layer{position:absolute; inset:0}
.hero-layer--horizon{
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(24,52,84,.95) 0%, rgba(10,21,36,0) 62%),
    radial-gradient(90% 70% at 12% 92%, rgba(201,162,39,.14) 0%, rgba(10,21,36,0) 58%),
    linear-gradient(165deg,#08111F 0%, #0B1A2E 45%, #070F1C 100%);
}
.hero-layer--grid{
  background-image:
    linear-gradient(rgba(201,162,39,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,.055) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  opacity:.85;
}
.hero-layer--vignette{
  background:
    linear-gradient(90deg, rgba(7,15,28,.94) 0%, rgba(7,15,28,.58) 40%, rgba(7,15,28,.06) 100%),
    linear-gradient(0deg, rgba(7,15,28,.92) 0%, rgba(7,15,28,0) 45%);
}
/* The map photograph is pure gold on black — `screen` drops the black out
   entirely, so the network composites onto the navy gradient below it. */
.hero-photo{
  position:absolute; top:50%; right:-6%; transform:translateY(-50%);
  height:132%; width:auto; max-width:none; object-fit:cover;
  mix-blend-mode:screen; opacity:.95;
  animation:mapDrift 38s ease-in-out infinite alternate;
}
@keyframes mapDrift{
  from{transform:translateY(-50%) translateX(0) scale(1)}
  to{transform:translateY(-52%) translateX(-22px) scale(1.03)}
}

.hero-inner{position:relative; z-index:2; width:100%}
.hero-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem, 1.1rem + 5.1vw, 5.4rem);
  line-height:1.02; letter-spacing:-.035em; margin:0 0 1.6rem; max-width:21ch;
}
.hero-title em{font-style:normal; color:var(--gold-soft)}
.hero-sub{
  max-width:56ch; font-size:clamp(1.02rem,.98rem + .35vw,1.28rem); line-height:1.75;
  color:var(--on-dark-soft); font-weight:300; margin-bottom:2.8rem;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem}

.hero-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(201,162,39,.16);
  background:linear-gradient(0deg, rgba(7,15,28,.86), rgba(7,15,28,.3));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-strip-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding-block:1.6rem}
.strip-item{display:flex; flex-direction:column; gap:.3rem; padding-right:1.5rem; position:relative}
.strip-item + .strip-item{padding-left:1.5rem}
.strip-item + .strip-item::before{content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:1px; background:rgba(201,162,39,.16)}
.strip-k{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--gold-soft)}
.strip-v{font-size:.82rem; color:var(--on-dark-mute); line-height:1.5}

.hero-scroll{
  position:absolute; left:50%; bottom:calc(1.6rem + 68px); transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(180deg, transparent, rgba(201,162,39,.5)); z-index:3;
}
.hero-scroll span{
  position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%; background:var(--gold);
  animation:scrollDot 2.6s var(--ease) infinite;
}
@keyframes scrollDot{0%{transform:translateY(0); opacity:0} 25%{opacity:1} 100%{transform:translateY(48px); opacity:0}}

/* ---------------------------------------------- full-width image band */
.band{
  position:relative; overflow:hidden; background:var(--navy-900);
  min-height:clamp(300px,40vw,520px); display:flex; align-items:center;
}
.band-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%; filter:grayscale(.4) brightness(.62) contrast(1.02);
}
.band-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,15,28,.94) 0%, rgba(7,15,28,.78) 48%, rgba(7,15,28,.5) 100%),
    linear-gradient(0deg, rgba(7,15,28,.6) 0%, rgba(7,15,28,0) 60%);
}
.band-inner{position:relative; z-index:1; padding-block:clamp(3rem,7vw,6rem)}
.band-quote{margin:0}
.band-quote p{
  font-family:var(--display); font-style:normal; font-weight:300;
  font-size:clamp(1.45rem,1.05rem + 1.9vw,2.85rem); line-height:1.32;
  color:var(--on-dark); max-width:24ch; margin:0 0 1.6rem;
}
.band-quote cite{
  font-family:var(--sans); font-style:normal; font-size:.68rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft);
  display:flex; align-items:center; gap:.9rem;
}
.band-quote cite::before{content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.6}

/* ---------------------------------------------- photographic section backgrounds */
.has-bg{position:relative; overflow:hidden}
/* Anchored to the top at a natural height and faded out downward — stretching
   a photo over a 2000px-tall section upscales it past recognition. */
.section-bg{
  position:absolute; top:0; left:0; right:0; bottom:auto;
  width:100%; height:clamp(340px,64vh,820px); object-fit:cover; object-position:center 55%;
  opacity:.38; filter:grayscale(.35) contrast(1.04); z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
}
.has-bg::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,15,28,.9) 0%, rgba(7,15,28,.74) 35%, rgba(11,26,46,.93) 100%),
    linear-gradient(90deg, rgba(7,15,28,.75) 0%, rgba(7,15,28,.2) 60%);
}
.has-bg > .shell{position:relative; z-index:2}

/* ---------------------------------------------- why grid */
.grid-6{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.why-card{background:var(--paper); padding:clamp(2rem,3.2vw,3.2rem); transition:background .5s var(--ease)}
.why-card:hover{background:var(--white)}
.why-num{
  font-family:var(--display); font-size:1.4rem; color:var(--gold); display:block; margin-bottom:1.6rem;
  letter-spacing:.06em;
}
.why-card h3{font-family:var(--display); font-size:1.55rem; font-weight:400; margin-bottom:.9rem; line-height:1.25}
.why-card p{color:var(--ink-soft); font-size:.94rem; line-height:1.8; margin:0}

.stat-band{
  margin-top:clamp(3.5rem,6vw,6rem); display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; padding-top:3rem; border-top:1px solid var(--line-light);
}
.stat{display:flex; flex-direction:column; gap:.5rem}
.stat-v{font-family:var(--display); font-size:clamp(2.2rem,1.6rem + 1.6vw,3.4rem); line-height:1; color:var(--navy-700)}
.stat-k{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-mute)}

/* ---------------------------------------------- capabilities */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
.cap-card{
  background:var(--navy-800); padding:clamp(2rem,3vw,3rem);
  position:relative; transition:background .55s var(--ease), transform .55s var(--ease);
}
.cap-card::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.cap-card:hover{background:var(--navy-700)}
.cap-card:hover::after{transform:scaleX(1)}
.cap-icon{width:48px; height:48px; margin-bottom:1.8rem}
.cap-icon svg{width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.cap-icon svg .fill{fill:var(--gold); stroke:none}
.cap-card:hover .cap-icon svg{stroke:var(--gold-soft)}
.cap-card h3{font-family:var(--display); font-size:1.5rem; font-weight:400; margin-bottom:.85rem; line-height:1.25; color:var(--on-dark)}
.cap-card p{color:var(--on-dark-soft); font-size:.92rem; line-height:1.8; margin:0}

/* ---------------------------------------------- industries */
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.ind-card{
  background:var(--paper); padding:clamp(1.8rem,2.6vw,2.6rem); min-height:210px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:background .55s var(--ease), color .55s var(--ease);
}
.ind-card::before{
  content:""; position:absolute; inset:0; background:linear-gradient(160deg,var(--navy-700),var(--navy-900));
  transform:translateY(101%); transition:transform .6s var(--ease-out); z-index:0;
}
.ind-card:hover::before{transform:translateY(0)}
.ind-card > *{position:relative; z-index:1}
.ind-idx{font-size:.7rem; letter-spacing:.2em; color:var(--gold-deep); margin-bottom:auto; transition:color .5s var(--ease)}
.ind-card h3{font-family:var(--display); font-size:1.6rem; font-weight:400; margin:2.2rem 0 .5rem; transition:color .5s var(--ease)}
.ind-card p{font-size:.86rem; color:var(--ink-mute); margin:0; line-height:1.65; transition:color .5s var(--ease)}
.ind-card:hover h3{color:var(--white)}
.ind-card:hover p{color:var(--on-dark-soft)}
.ind-card:hover .ind-idx{color:var(--gold-soft)}

/* ---------------------------------------------- timeline */
.timeline{position:relative; display:grid; gap:0; counter-reset:step}
.timeline::before{
  content:""; position:absolute; left:31px; top:12px; bottom:12px; width:1px;
  background:linear-gradient(180deg, transparent, rgba(201,162,39,.45) 12%, rgba(201,162,39,.45) 88%, transparent);
}
.tl-step{display:flex; gap:clamp(1.5rem,3vw,3.5rem); padding-block:clamp(1.8rem,3vw,2.8rem); position:relative}
.tl-marker{
  flex:none; width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(201,162,39,.4); background:var(--navy-900);
  display:grid; place-items:center; position:relative; z-index:1;
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.tl-marker span{font-family:var(--display); font-size:1.15rem; color:var(--gold-soft); letter-spacing:.05em}
.tl-step:hover .tl-marker{border-color:var(--gold); background:var(--navy-700)}
.tl-body{padding-top:.4rem; max-width:66ch}
.tl-body h3{font-family:var(--display); font-size:clamp(1.7rem,1.3rem + 1vw,2.4rem); font-weight:300; margin-bottom:.7rem; color:var(--on-dark)}
.tl-body p{color:var(--on-dark-soft); font-size:.98rem; line-height:1.85; margin-bottom:1rem}
.tl-out{
  display:inline-block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--gold-soft); border:1px solid rgba(201,162,39,.28); padding:.42rem 1rem;
}

/* ---------------------------------------------- frameworks */
.fw-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.fw-card{background:var(--white); padding:clamp(2rem,3.2vw,3.2rem)}
.fw-card h3{
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-700); margin-bottom:1.1rem; padding-bottom:1.1rem;
  border-bottom:1px solid var(--line-light); position:relative;
}
.fw-card h3::after{content:""; position:absolute; left:0; bottom:-1px; width:2.4rem; height:1px; background:var(--gold)}
.fw-card p{color:var(--ink-soft); font-size:.94rem; line-height:1.85; margin:0}

.fw-note{
  margin-top:2rem; font-size:.8rem; line-height:1.8; color:var(--ink-mute);
  max-width:92ch; padding-left:1.4rem; border-left:2px solid var(--gold);
}

.fw-diagram{
  margin-top:clamp(3.5rem,6vw,6rem); background:linear-gradient(165deg,var(--navy-900),var(--navy-700));
  padding:clamp(2rem,4vw,4rem); position:relative; overflow:hidden;
}
.fw-diagram::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60rem 30rem at 50% 0%, rgba(201,162,39,.09), transparent 65%);
}
.fw-diagram > *{position:relative; z-index:1}
.fw-diagram-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.2; filter:grayscale(.5) brightness(.7); z-index:0;
}
.fw-diagram-head{margin-bottom:2.5rem; max-width:52ch}
.fw-diagram-head .eyebrow{color:var(--gold-soft)}
.fw-diagram-head h3{font-family:var(--display); font-size:clamp(1.6rem,1.2rem + 1.3vw,2.4rem); font-weight:300; color:var(--on-dark)}

.diagram{width:100%; height:auto; min-width:820px}
.diagram-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.d-dot{fill:var(--gold)}
.d-ring{fill:none; stroke:var(--gold); stroke-opacity:.35}
.d-pillar .d-ring{transform-box:fill-box; transform-origin:center; animation:ringBreathe 6s ease-in-out infinite}
.d-pillar:nth-of-type(2) .d-ring{animation-delay:.6s}
.d-pillar:nth-of-type(3) .d-ring{animation-delay:1.2s}
.d-pillar:nth-of-type(4) .d-ring{animation-delay:1.8s}
.d-pillar:nth-of-type(5) .d-ring{animation-delay:2.4s}
@keyframes ringBreathe{0%,100%{opacity:.35; transform:scale(1)} 50%{opacity:.85; transform:scale(1.16)}}
.d-idx{font-family:var(--display); font-size:20px; fill:var(--gold-soft); text-anchor:middle; letter-spacing:.08em}
.d-name{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.1em; fill:#EDEAE4; text-anchor:middle; text-transform:uppercase}
.d-desc{font-family:var(--sans); font-size:11.5px; font-weight:300; fill:rgba(237,234,228,.68); text-anchor:middle}
.d-decision{fill:rgba(201,162,39,.1); stroke:var(--gold); stroke-opacity:.5}
.d-decision-t{font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.22em; fill:var(--gold-soft); text-anchor:middle}
.d-loop-t{font-family:var(--sans); font-size:10.5px; font-weight:300; letter-spacing:.13em; fill:rgba(237,234,228,.4); text-anchor:middle}

/* ---------------------------------------------- leadership */
.lead-wrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,6vw,6rem); align-items:center}
.lead-visual{position:relative}
.lead-portrait{border:1px solid rgba(201,162,39,.2); overflow:hidden; aspect-ratio:5/6}
.lead-portrait img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) brightness(.88) contrast(1.04);
}

/* Cut-out portraits (transparent PNG, subject only). They need a backdrop to
   sit on, a bottom anchor so the shoulders meet the frame edge, and far less
   desaturation than the environmental photography — heads should read as
   people, not as texture. */
.lead-portrait.lead-portrait--person,
.person-photo.person-photo--cutout{
  background:
    radial-gradient(120% 85% at 50% 10%, rgba(201,162,39,.12), transparent 62%),
    linear-gradient(180deg, var(--navy-600) 0%, var(--navy-900) 100%);
}
/* .person-photo img is declared later in the file with equal specificity, so
   these need the extra class to win the desaturation. */
.lead-portrait.lead-portrait--person img,
.person-photo.person-photo--cutout img{
  object-fit:cover; object-position:center top;
  filter:grayscale(.15) contrast(1.02);
}

.lead-role{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--gold-soft); margin:-.6rem 0 1.8rem;
}
.lead-badge{
  position:absolute; right:-1px; bottom:-1px; background:var(--navy-900);
  border:1px solid rgba(201,162,39,.35); padding:1.1rem 1.6rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.lb-k{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute)}
.lb-v{font-family:var(--display); font-size:1.25rem; color:var(--gold-soft)}
.lead-copy p{color:var(--on-dark-soft); font-size:1rem; line-height:1.9; max-width:60ch}
.lead-cred{
  margin:2rem 0 2.2rem; padding:1.6rem 1.8rem; border:1px solid rgba(201,162,39,.22);
  background:rgba(201,162,39,.045);
}
.lead-cred p{margin:0; font-size:.92rem; color:var(--on-dark-soft)}
.lead-cred strong{color:var(--gold-soft); font-weight:500}

/* ---------------------------------------------- homepage team roster
   Five portraits at a glance: photo, name, role. The circle is white rather
   than the navy the associate cards use, because two of the five portraits are
   cut-outs on transparency and three are shot on white - on navy the row would
   read as two floating heads next to three white discs. */
.roster{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(1.4rem,2.4vw,2.2rem);
}
.roster-card{display:flex; flex-direction:column; align-items:center; text-align:center}
.roster-photo{
  width:100%; max-width:172px; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:1px solid rgba(201,162,39,.28); background:var(--white); margin-bottom:1.1rem;
}
.roster-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(.15) contrast(1.02);
}
.roster-name{
  font-family:var(--display); font-size:1rem; font-weight:500;
  letter-spacing:-.01em; color:var(--on-dark); margin:0;
}
.roster-role{
  font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); margin:.45rem 0 0; line-height:1.6;
}
@media (max-width:1000px){
  .roster{grid-template-columns:repeat(3, minmax(0,1fr)); gap:2.2rem 1.6rem}
}
@media (max-width:560px){
  .roster{grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.8rem 1.2rem}
  .roster-photo{max-width:132px}
}

/* ---------------------------------------------- insights */
.ins-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.4vw,2.4rem)}
.ins-card{
  grid-column:span 1; display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line-light); cursor:pointer;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease);
}
.ins-card:hover{transform:translateY(-6px); box-shadow:0 26px 60px -30px rgba(10,21,36,.35); border-color:rgba(201,162,39,.4)}
.ins-card--feature{grid-column:span 3; display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch}
.ins-thumb{overflow:hidden; background:var(--navy-800); aspect-ratio:16/10}
.ins-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.28) brightness(.92);
  transition:transform 1.2s var(--ease-out), filter .8s var(--ease);
}
.ins-card:hover .ins-thumb img{transform:scale(1.06); filter:grayscale(0) brightness(1)}
.ins-card--feature .ins-thumb{aspect-ratio:auto; min-height:340px}
.ins-body{padding:clamp(1.6rem,2.6vw,2.8rem); display:flex; flex-direction:column; justify-content:center}
.ins-meta{display:flex; align-items:center; gap:1rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-mute); margin-bottom:1.1rem}
.ins-cat{color:var(--gold-deep)}
.ins-card h3{font-family:var(--display); font-size:clamp(1.45rem,1.2rem + .8vw,2.1rem); font-weight:400; line-height:1.22; margin-bottom:.9rem}
.ins-card--feature h3{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.8rem); max-width:18ch}
.ins-body p{color:var(--ink-soft); font-size:.93rem; line-height:1.8; margin-bottom:1.4rem}

/* ---------------------------------------------- contact */
.contact-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,6rem); align-items:start}
.contact-list{margin:2.5rem 0 0; display:grid; gap:1.6rem}
.contact-list li{display:flex; flex-direction:column; gap:.35rem; padding-bottom:1.4rem; border-bottom:1px solid rgba(201,162,39,.14)}
.cl-k{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute)}
.cl-v{font-size:1.02rem; color:var(--on-dark); transition:color .35s var(--ease)}
a.cl-v:hover{color:var(--gold-soft)}
.contact-note{margin-top:2rem; font-size:.8rem; color:var(--on-dark-mute); line-height:1.75; max-width:44ch}

.contact-form-wrap{background:rgba(255,255,255,.035); border:1px solid rgba(201,162,39,.18); padding:clamp(1.8rem,3.4vw,3.2rem)}
.form-title{font-family:var(--display); font-size:1.6rem; color:var(--on-dark); margin-bottom:2rem; font-weight:400}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.field{display:flex; flex-direction:column; margin-bottom:1.2rem; min-width:0}
.field label{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute); margin-bottom:.6rem}
.field label span{color:var(--gold)}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(237,234,228,.22);
  padding:.7rem 0; color:var(--on-dark); font-size:.95rem; font-weight:300; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-bottom-color:var(--gold)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--on-dark); transition:background-color 9999s}
.select-wrap{position:relative}
.select-wrap select{appearance:none; -webkit-appearance:none; cursor:pointer}
.select-wrap select option{background:var(--navy-800); color:var(--on-dark)}
.select-wrap svg{position:absolute; right:2px; top:50%; transform:translateY(-50%); width:12px; height:8px; color:var(--gold); pointer-events:none}

.err{font-size:.72rem; color:#E0A2A2; margin-top:.45rem; min-height:1em; display:block}
.err--consent{margin-top:-.4rem; margin-bottom:.8rem}
.field.has-error input,.field.has-error textarea{border-bottom-color:#B96A6A}

.check{display:flex; align-items:flex-start; gap:.85rem; margin:.6rem 0 1rem; cursor:pointer}
.check input{position:absolute; opacity:0; width:1px; height:1px}
.check .box{
  flex:none; width:18px; height:18px; border:1px solid rgba(237,234,228,.3); margin-top:.2rem;
  position:relative; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.check .box::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--navy-900); border-width:0 1.6px 1.6px 0; transform:rotate(45deg) scale(0);
  transition:transform .25s var(--ease-out);
}
.check input:checked + .box{background:var(--gold); border-color:var(--gold)}
.check input:checked + .box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible + .box{outline:2px solid var(--gold); outline-offset:3px}
.check-text{font-size:.84rem; color:var(--on-dark-soft); line-height:1.6}

.form-status{margin:1.2rem 0 0; font-size:.86rem; color:var(--gold-soft); min-height:1.2em}
.form-status.is-error{color:#E0A2A2}
.form-fine{margin:.8rem 0 0; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute)}

/* ---------------------------------------------- footer */
.site-footer{background:var(--navy-900); color:var(--on-dark); padding-block:clamp(3.5rem,6vw,5.5rem) 2.5rem; border-top:1px solid rgba(201,162,39,.14)}
.foot-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(2.5rem,5vw,5rem); padding-bottom:3.5rem; border-bottom:1px solid rgba(237,234,228,.08)}
.brand--foot .brand-mark{width:34px; height:37px}
.foot-tag{font-family:var(--display); font-size:1.35rem; font-style:normal; color:var(--gold-soft); margin:1.6rem 0 0; font-weight:300}
.foot-nav{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content; gap:2rem}
.foot-col{display:flex; flex-direction:column; gap:.85rem}
.foot-h{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold-soft); margin:0 0 .5rem}
.foot-col a,.foot-col span{font-size:.88rem; color:var(--on-dark-mute); transition:color .35s var(--ease); overflow-wrap:anywhere}
.foot-col a:hover{color:var(--on-dark)}
/* The address is a single unbreakable token to a reader: split across two lines
   it stops looking like an address. It sets its own column width (max-content
   above), and never breaks, overriding the overflow-wrap:anywhere that keeps
   the other footer links inside their columns. */
.foot-col a.foot-email{white-space:nowrap; overflow-wrap:normal}
/* Below this the column is narrower than the address at its normal size, and
   nowrap would push the page into horizontal scroll rather than wrap. One step
   down in size keeps it on a single line instead. */
@media (max-width:339px){
  .foot-col a.foot-email{font-size:.8rem}
}

/* Stack the footer earlier than the rest of the layout. Above this the brand
   block takes a share of the row, leaving the three link columns too narrow
   once the address column claims the width it needs, and the longest French
   labels start wrapping. */
@media (max-width:1180px){
  .foot-top{grid-template-columns:1fr}
}
.foot-bottom{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-top:2rem}
.foot-bottom p{margin:0; font-size:.75rem; color:rgba(237,234,228,.35)}
.foot-legal{max-width:62ch; text-align:right}

/* ============================================================
   ADVISORY PLATFORM COMPONENTS
   ============================================================ */

/* ---------------------------------------------- nav dropdowns */
.nav-item{position:relative}
/* These two nav items are <button> elements so they can own an expanded state.
   Without an explicit reset the UA paints buttonface behind them — a white
   block with the light nav text invisible on top of it. */
.nav-link--drop{
  display:inline-flex; align-items:center; gap:.45rem;
  appearance:none; -webkit-appearance:none;
  background:none; border:0; margin:0;
  padding:.5rem 0; cursor:pointer;
  font-family:inherit; font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-soft); text-align:left;
  /* match the anchors' line box so drawer rows stay evenly spaced */
  line-height:1.75;
}
.nav-link--drop > span{line-height:inherit}
.nav-link--drop svg{width:9px; height:6px; transition:transform .35s var(--ease); opacity:.7}
.nav-item.is-open .nav-link--drop svg{transform:rotate(180deg)}

.drop{
  position:absolute; top:calc(100% + 1.05rem); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:33rem; padding:1.6rem; z-index:30;
  background:rgba(10,21,36,.97); border:1px solid rgba(201,162,39,.24);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .35s var(--ease-out);
}
.nav-item.is-open .drop{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.drop::before{
  content:""; position:absolute; top:-1.05rem; left:0; right:0; height:1.05rem;
}
.drop-grid{display:grid; grid-template-columns:1fr 1fr; gap:.15rem 1.4rem}
.drop-grid a{
  display:block; padding:.6rem .7rem; font-size:.84rem; color:var(--on-dark-soft);
  border-left:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.drop-grid a:hover{color:var(--on-dark); background:rgba(201,162,39,.08); border-left-color:var(--gold)}
.drop-foot{
  margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid rgba(237,234,228,.1);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.drop-foot a{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold-soft)}
.drop-foot a:hover{color:var(--on-dark)}
.drop-note{font-size:.74rem; color:var(--on-dark-mute); margin:0}

/* ---------------------------------------------- interior page hero */
.page-hero{
  position:relative; overflow:hidden; background:var(--navy-900); color:var(--on-dark);
  padding-top:calc(var(--header-h) + clamp(3.5rem,7vw,6.5rem));
  padding-bottom:clamp(3.5rem,7vw,6.5rem);
}
.page-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.34; filter:grayscale(.4) contrast(1.03);
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,15,28,.95) 0%, rgba(7,15,28,.78) 50%, rgba(7,15,28,.5) 100%),
    linear-gradient(0deg, rgba(7,15,28,.9) 0%, rgba(7,15,28,0) 55%);
}
.page-hero > .shell{position:relative; z-index:2}
.page-hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 3.2vw, 4rem);
  line-height:1.05; letter-spacing:-.03em; max-width:24ch; margin:0 0 1.4rem;
}
.page-hero h1 em{font-style:normal; color:var(--gold-soft)}
.page-hero .page-lede{
  max-width:58ch; font-size:clamp(1rem,.96rem + .3vw,1.16rem);
  line-height:1.8; color:var(--on-dark-soft);
}

/* Two-column body copy, for an approved statement that should run the full
   width of the shell rather than sit in a left column. Side by side rather than
   full-bleed: one line across 1280px runs past 100 characters, which is past the
   point where the eye loses its place returning to the next line. */
.copy-cols{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.2rem 3.4rem;
}
.copy-cols > *{max-width:none; margin:0}
@media (max-width:900px){
  .copy-cols{grid-template-columns:1fr; gap:1.1rem}
}
.page-hero--wide h1{max-width:none}
/* This hero ends in body copy rather than a call to action, so the site's
   standard hero/section rhythm leaves an empty band between the statement and
   the first profile. Tightened on both sides of the seam. */
.page-hero--wide{padding-bottom:clamp(2.2rem,3.6vw,3.4rem)}
.page-hero--wide + .section{padding-top:clamp(2.6rem,4.6vw,4.4rem)}

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--on-dark-mute); margin-bottom:1.8rem;
}
.crumb a{color:var(--gold-soft)}
.crumb a:hover{color:var(--on-dark)}
.crumb span[aria-hidden]{opacity:.4}

/* ---------------------------------------------- credibility bar */
.credbar{
  border-top:1px solid rgba(201,162,39,.16);
  background:linear-gradient(0deg, rgba(7,15,28,.9), rgba(7,15,28,.35));
}
.credbar-inner{
  display:flex; flex-wrap:wrap; gap:0; padding-block:1.15rem;
}
.credbar-item{
  display:flex; align-items:center; gap:.7rem;
  padding:.4rem 1.5rem .4rem 0; position:relative;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--on-dark-mute); white-space:nowrap;
}
.credbar-item + .credbar-item{padding-left:1.5rem}
.credbar-item + .credbar-item::before{
  content:""; position:absolute; left:0; top:.55rem; bottom:.55rem; width:1px; background:rgba(201,162,39,.2);
}
.credbar-item b{color:var(--gold-soft); font-weight:500}

/* ---------------------------------------------- situation cards */
.sit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
.sit-card{
  background:var(--navy-800); padding:clamp(1.8rem,2.8vw,2.6rem);
  display:flex; flex-direction:column; min-height:14rem; position:relative;
  transition:background .5s var(--ease);
}
.sit-card:hover{background:var(--navy-700)}
.sit-card::after{
  content:""; position:absolute; left:0; top:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.sit-card:hover::after{transform:scaleX(1)}
.sit-num{font-size:.66rem; letter-spacing:.2em; color:var(--gold-soft); margin-bottom:1.4rem}
.sit-card h3{
  font-family:var(--display); font-size:1.12rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.35; color:var(--on-dark); margin-bottom:.85rem;
}
.sit-card p{font-size:.9rem; line-height:1.75; color:var(--on-dark-soft); margin:0 0 1.4rem}
.sit-card .link-arrow{margin-top:auto}

/* ---------------------------------------------- capability card link */
.cap-card{display:flex; flex-direction:column}
.cap-card p{margin-bottom:1.4rem}
.cap-card .link-arrow{margin-top:auto}
a.cap-card{cursor:pointer}

/* light-section variant of the capability grid */
.cap-grid--light{background:var(--line-light); border-color:var(--line-light)}
.cap-grid--light .cap-card{background:var(--paper)}
.cap-grid--light .cap-card:hover{background:var(--white)}
.cap-grid--light .cap-card h3{color:var(--ink)}
.cap-grid--light .cap-card p{color:var(--ink-soft)}
.cap-grid--light .cap-icon svg{stroke:var(--gold-deep)}
.cap-grid--light .cap-card .link-arrow{color:var(--gold-deep)}
.cap-grid--light .cap-card:hover .link-arrow svg{transform:translateX(7px)}
.cap-card h3{font-size:1.32rem; letter-spacing:-.01em; font-weight:500}

/* ---------------------------------------------- split feature */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center}
.split--flip .split-media{order:2}
.split-media{position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(201,162,39,.18)}
.split-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) brightness(.92); transition:transform 1.2s var(--ease-out)}
.split:hover .split-media img{transform:scale(1.03)}
.split-body .section-title{font-size:clamp(1.8rem,1.2rem + 2.1vw,2.9rem); margin-bottom:1.3rem}
.split-list{margin:1.8rem 0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.6rem}
.split-list li{
  position:relative; padding-left:1.1rem; font-size:.88rem; line-height:1.65;
  color:var(--ink-soft);
}
.section--dark .split-list li,.section--midnight .split-list li{color:var(--on-dark-soft)}
.split-list li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--gold)}

/* ---------------------------------------------- lifecycle */
.life-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.life-card{background:var(--white); padding:clamp(1.8rem,2.6vw,2.4rem); display:flex; flex-direction:column}
.life-stage{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold-deep);
  padding-bottom:.9rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line-light);
}
.life-card h3{font-family:var(--display); font-size:1.28rem; font-weight:500; letter-spacing:-.01em; margin-bottom:.8rem}
.life-card p{font-size:.89rem; line-height:1.75; color:var(--ink-soft); margin:0 0 1.2rem}
.life-card ul{margin-top:auto; display:grid; gap:.4rem}
.life-card li{font-size:.8rem; color:var(--ink-mute); padding-left:.9rem; position:relative; line-height:1.6}
.life-card li::before{content:""; position:absolute; left:0; top:.6em; width:4px; height:1px; background:var(--gold)}

/* ---------------------------------------------- deliverables */
.deliver{
  border:1px solid var(--line-light); background:var(--white);
  padding:clamp(2rem,3.6vw,3.4rem);
}
.section--dark .deliver,.section--midnight .deliver{
  background:rgba(255,255,255,.03); border-color:rgba(201,162,39,.2);
}
.deliver h3{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:1.8rem;
}
.section--dark .deliver h3,.section--midnight .deliver h3{color:var(--gold-soft)}
.deliver-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem 2rem}
.deliver-grid li{
  position:relative; padding-left:1.3rem; font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
.section--dark .deliver-grid li,.section--midnight .deliver-grid li{color:var(--on-dark-soft)}
.deliver-grid li::before{
  content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  border:1px solid var(--gold); transform:rotate(45deg);
}
.deliver-note{margin:1.8rem 0 0; font-size:.78rem; color:var(--ink-mute); line-height:1.7}
.section--dark .deliver-note,.section--midnight .deliver-note{color:var(--on-dark-mute)}

/* ---------------------------------------------- proof pillars */
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.pillar{background:var(--paper); padding:clamp(1.7rem,2.6vw,2.4rem); transition:background .5s var(--ease)}
.pillar:hover{background:var(--white)}
.pillar h3{
  font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy-700); margin-bottom:.9rem; display:flex; align-items:center; gap:.8rem;
}
.pillar h3::before{content:""; width:1.4rem; height:1px; background:var(--gold); flex:none}
.pillar p{font-size:.9rem; line-height:1.75; color:var(--ink-soft); margin:0}

/* ---------------------------------------------- navigable stats */
.stat{position:relative}
a.stat{transition:transform .5s var(--ease)}
a.stat:hover{transform:translateY(-3px)}
a.stat:hover .stat-go{color:var(--gold-deep)}
a.stat:hover .stat-go svg{transform:translateX(5px)}
.stat-go{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:.5rem;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-mute);
  transition:color .4s var(--ease);
}
.stat-go svg{width:18px; height:9px; transition:transform .5s var(--ease-out)}

/* ---------------------------------------------- approach journey */
.journey{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
.jstep{
  background:var(--navy-800); padding:clamp(1.6rem,2.4vw,2.2rem);
  display:flex; flex-direction:column; position:relative; transition:background .5s var(--ease);
}
.jstep:hover{background:var(--navy-700)}
.jstep-rail{display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem}
.jstep-dot{width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none}
.jstep-line{height:1px; flex:1; background:rgba(201,162,39,.3)}
.jstep-n{font-size:.64rem; letter-spacing:.2em; color:var(--gold-soft)}
.jstep h3{
  font-family:var(--display); font-size:1.22rem; font-weight:700; letter-spacing:.01em;
  text-transform:uppercase; color:var(--on-dark); margin-bottom:.8rem;
}
.jstep p{font-size:.86rem; line-height:1.7; color:var(--on-dark-soft); margin:0 0 1.3rem}
.jstep-out{
  margin-top:auto; padding-top:1.1rem; border-top:1px solid rgba(201,162,39,.18);
  font-size:.72rem; line-height:1.55; color:var(--gold-soft);
}
.jstep-out b{display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-mute); font-weight:700; margin-bottom:.35rem}

/* ---------------------------------------------- people */
.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.6vw,2.6rem)}
.person{border:1px solid rgba(201,162,39,.2); background:rgba(255,255,255,.03); display:flex; flex-direction:column}
.person-photo{aspect-ratio:4/5; overflow:hidden; background:var(--navy-700); position:relative}
.person-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.9)}
.person-slot{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute);
  border:1px dashed rgba(201,162,39,.3); padding:1.5rem;
}
.person-body{padding:clamp(1.4rem,2.2vw,2rem); display:flex; flex-direction:column; flex:1}
.person-name{font-family:var(--display); font-size:1.35rem; font-weight:500; letter-spacing:-.01em; color:var(--on-dark)}
.person-role{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold-soft); margin:.5rem 0 1.1rem}
.person-body p{font-size:.88rem; line-height:1.75; color:var(--on-dark-soft)}
.person-tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:1.2rem}
.person-tags span{
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute);
  border:1px solid rgba(237,234,228,.16); padding:.32rem .7rem;
}

/* content the owner still has to supply */
.todo{
  border:1px dashed rgba(201,162,39,.45); background:rgba(201,162,39,.06);
  padding:1rem 1.2rem; font-size:.78rem; line-height:1.65; color:var(--on-dark-soft);
  margin:1.2rem 0 0;
}
.todo b{color:var(--gold-soft); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.66rem; display:block; margin-bottom:.35rem}
.section--light .todo{color:var(--ink-soft)}
.section--light .todo b{color:var(--gold-deep)}

/* ---------------------------------------------- CTA band */
.cta-band{
  background:linear-gradient(150deg,var(--navy-900),var(--navy-700));
  color:var(--on-dark); padding-block:clamp(4rem,8vw,7rem); position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50rem 26rem at 70% 0%, rgba(201,162,39,.12), transparent 65%);
}
.cta-band > .shell{position:relative; z-index:1}
.cta-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:3rem; flex-wrap:wrap}
.cta-inner h2{
  font-family:var(--display); font-weight:400; letter-spacing:-.028em;
  font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem); line-height:1.1; max-width:18ch; margin:0;
}
.cta-inner h2 em{font-style:normal; color:var(--gold-soft)}
.cta-side{display:flex; flex-direction:column; gap:1rem; align-items:flex-start}
.cta-side p{margin:0; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--on-dark-mute)}

/* ---------------------------------------------- selected experience */
.exp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.exp-card{background:var(--white); padding:clamp(1.8rem,2.6vw,2.4rem)}
.exp-tag{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gold-deep);
  padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line-light); display:block;
}
.exp-card p{font-size:.9rem; line-height:1.75; color:var(--ink-soft); margin:0}

/* ---------------------------------------------- misc */
.anchor-offset{scroll-margin-top:calc(var(--header-h) + 2rem)}
.lede-narrow{max-width:52ch}
/* the contact page already ends in a form — the shared CTA would be noise */
body.no-cta .cta-band{display:none}
/* interior pages start dark under a fixed header, so the header is solid at once */
.page-hero{margin-top:0}

/* ---------------------------------------------- Chinese typography
   CJK has no true italic and no case, so the Latin display tricks
   (synthesised italic, wide letter-spacing on uppercase) have to go. */
html[lang="zh"]{
  --serif:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
}
html[lang="zh"] em,
html[lang="zh"] .foot-tag,
html[lang="zh"] .band-quote p{font-style:normal}
html[lang="zh"] .hero-title,
html[lang="zh"] .section-title{line-height:1.28; letter-spacing:.01em}
html[lang="zh"] .eyebrow,
html[lang="zh"] .strip-k,
html[lang="zh"] .stat-k,
html[lang="zh"] .nav-link,
html[lang="zh"] .btn,
html[lang="zh"] .tl-out,
html[lang="zh"] .ins-meta,
html[lang="zh"] .cl-k,
html[lang="zh"] .foot-h,
html[lang="zh"] .field label,
html[lang="zh"] .link-arrow{letter-spacing:.1em}
html[lang="zh"] .brand-name{letter-spacing:.34em}
html[lang="zh"] body{line-height:1.85}
html[lang="zh"] .d-decision-t{letter-spacing:.3em; font-size:14px}
html[lang="zh"] .d-name{letter-spacing:.06em}

/* ---------------------------------------------- reveal animation */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}
.reveal[data-delay="6"]{transition-delay:.54s}
.reveal[data-delay="7"]{transition-delay:.63s}
.reveal[data-delay="8"]{transition-delay:.72s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .grid-6{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1024px){
  :root{--header-h:74px}
  .nav-cta{display:none}
  .nav-list{gap:1.2rem}
  .nav-link{font-size:.72rem}
  .lead-wrap{grid-template-columns:1fr; gap:3rem}
  .lead-visual{max-width:420px}
  .contact-wrap{grid-template-columns:1fr}
  .ins-card--feature{grid-column:span 3; grid-template-columns:1fr}
  .ins-card--feature .ins-thumb{min-height:240px}
  .ins-grid{grid-template-columns:repeat(2,1fr)}
  .ins-card--feature{grid-column:span 2}
  .foot-top{grid-template-columns:1fr}
  .hero-photo{right:-24%; opacity:.75}
}

@media (max-width:860px){
  /* mobile navigation drawer */
  .nav-toggle{display:flex}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(88vw,380px); z-index:99;
    background:linear-gradient(200deg,var(--navy-800),var(--navy-900));
    border-left:1px solid rgba(201,162,39,.18);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:calc(var(--header-h) + 2.5rem) 2rem 2.5rem;
    transform:translateX(100%); transition:transform .55s var(--ease-out);
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .nav-list{flex-direction:column; align-items:flex-start; gap:0; width:100%}
  .nav-list li{width:100%; border-bottom:1px solid rgba(237,234,228,.08)}
  .nav-link{display:block; width:100%; padding:1.15rem 0; font-size:.9rem; letter-spacing:.14em; white-space:normal}
  .nav-link::after{display:none}
  .nav-cta{display:inline-flex; margin-top:1.2rem; width:100%}

  /* the switcher stacks with the drawer links */
  .lang{width:100%; margin-top:1.8rem}
  .lang-btn{width:100%; justify-content:space-between; padding:.9rem 1rem}
  .lang-menu{left:0; right:0; min-width:0}

  .hero{min-height:auto; padding-top:calc(var(--header-h) + 4.5rem); padding-bottom:0}
  /* the credentials strip flows after the hero copy instead of overlaying it */
  .hero-strip{position:static; margin-top:4.5rem; backdrop-filter:none; -webkit-backdrop-filter:none}
  .hero-strip-inner{grid-template-columns:repeat(2,1fr); gap:1.4rem; padding-block:1.6rem}
  .strip-item{padding-right:1rem}
  .strip-item + .strip-item{padding-left:0}
  .strip-item + .strip-item::before{display:none}
  .strip-item:nth-child(even){padding-left:1.2rem}
  .strip-item:nth-child(even)::before{display:block; content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(201,162,39,.16)}
  .hero-scroll{display:none}

  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .fw-grid{grid-template-columns:1fr}
  .stat-band{grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem}
  .section-head--row{align-items:flex-start}
  .foot-legal{text-align:left}
}

@media (max-width:680px){
  :root{--header-h:68px}
  .grid-6,.cap-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .ind-card{min-height:auto}
  .ind-card h3{margin-top:1.4rem}
  .ins-grid{grid-template-columns:1fr}
  .ins-card,.ins-card--feature{grid-column:span 1}
  .field-row{grid-template-columns:1fr; gap:0}
  .hero-actions .btn{width:100%}
  .timeline::before{left:22px}
  .tl-marker{width:44px; height:44px}
  .tl-marker span{font-size:.95rem}
  .tl-step{gap:1.2rem; padding-block:1.6rem}
  .brand-name{font-size:.95rem; letter-spacing:.28em}
  .foot-nav{grid-template-columns:1fr; gap:2.2rem}
  .hero-photo{right:-46%; opacity:.5; height:105%}
  .contact-form-wrap{padding:1.6rem 1.3rem}
}

@media (max-width:400px){
  .hero-strip-inner{grid-template-columns:1fr}
  .strip-item:nth-child(even){padding-left:0}
  .strip-item:nth-child(even)::before{display:none}
  .stat-band{grid-template-columns:1fr}
}

/* ---------------------------------------------- responsive: new components */
@media (max-width:1180px){
  .sit-grid{grid-template-columns:repeat(2,1fr)}
  .life-grid{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(3,1fr)}
  .people-grid{grid-template-columns:repeat(2,1fr)}
  .deliver-grid{grid-template-columns:repeat(2,1fr)}
  .exp-grid{grid-template-columns:1fr}
  .drop{min-width:28rem}
}

@media (max-width:1024px){
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:2.5rem}
  .split--flip .split-media{order:0}
  .split-media{aspect-ratio:16/9}
}

@media (max-width:860px){
  /* dropdowns become plain groups inside the drawer */
  .drop{
    position:static; transform:none; min-width:0; width:100%;
    opacity:1; visibility:visible; pointer-events:auto;
    background:none; border:0; box-shadow:none; padding:0 0 .8rem;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    display:none;
  }
  .nav-item.is-open .drop{display:block; transform:none}
  .drop-grid{grid-template-columns:1fr; gap:0}
  .drop-grid a{padding:.72rem 0 .72rem 1rem; font-size:.82rem; border-left:1px solid rgba(237,234,228,.12)}
  .drop-foot{display:none}
  .nav-item{width:100%}
  /* .nav-link sets display:block later in this block and would otherwise beat
     the button's inline-flex, dropping the chevron onto its own line. */
  .nav-link--drop{display:flex; align-items:center; justify-content:space-between; width:100%}

  .journey{grid-template-columns:1fr}
  .jstep-rail{margin-bottom:1rem}
  .credbar-inner{gap:.2rem 0; padding-block:1rem}
  .credbar-item{
    width:100%; padding:.32rem 0; white-space:normal; font-size:.62rem;
  }
  .credbar-item + .credbar-item{padding-left:0}
  .credbar-item + .credbar-item::before{display:none}
  .cta-inner{flex-direction:column; align-items:flex-start; gap:2rem}
}

@media (max-width:680px){
  /* Spanish and French CTA labels are ~40% longer than English; nowrap
     buttons overflow narrow phones, so let them wrap here. */
  .btn{white-space:normal; text-align:center; max-width:100%; padding-inline:1.5rem}
  .sit-grid{grid-template-columns:1fr}
  .life-grid{grid-template-columns:1fr}
  .people-grid{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:1fr}
  .deliver-grid{grid-template-columns:1fr}
  .split-list{grid-template-columns:1fr}
  .sit-card{min-height:0}
  .cta-side .btn{width:100%}
}

/* ---------------------------------------------- motion & print */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
}

@media print{
  /* the reversed lockup would disappear on white paper */
  .brand-logo span{filter:none}
  .brand-logo .bl-sub{opacity:1}
  .site-header,.hero-media,.nav,.hero-scroll,.contact-form-wrap{display:none}
  body{background:#fff; color:#000}
  .section{padding-block:2rem}
}

/* ============================================================
   CAPABILITY DETAIL PAGES  (phase 2)
   Nine pages share this system. Restraint is the point: type and
   whitespace carry the hierarchy, not extra graphic furniture.
   ============================================================ */

/* opening statement — the one sentence that has to land */
.cap-statement{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.3vw,2.05rem);
  line-height:1.3; letter-spacing:-.02em;
  color:var(--gold-soft); max-width:26ch; margin:0;
}
.section--light .cap-statement{color:var(--gold-deep)}

/* strategic explanation sits beside the callout on desktop */
.cap-body{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:start}
.cap-body p{font-size:clamp(1rem,.96rem + .25vw,1.1rem); line-height:1.85; color:var(--ink-soft); max-width:60ch}
.section--dark .cap-body p,.section--midnight .cap-body p{color:var(--on-dark-soft)}

/* "When clients call us" */
.callout{border-left:2px solid var(--gold); padding:.2rem 0 .2rem 1.6rem}
.callout h2{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:1rem;
}
.section--dark .callout h2,.section--midnight .callout h2{color:var(--gold-soft)}
.callout p{font-size:.95rem; line-height:1.8; color:var(--ink-soft); margin:0}
.section--dark .callout p,.section--midnight .callout p{color:var(--on-dark-soft)}

/* "How we help" — a plain two-column list, no cards */
.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2rem,4vw,4rem)}
.help-grid li{
  position:relative; padding:1rem 0 1rem 1.7rem;
  border-bottom:1px solid rgba(237,234,228,.1);
  font-size:.98rem; line-height:1.6; color:var(--on-dark);
}
.help-grid li::before{
  content:""; position:absolute; left:0; top:1.45rem;
  width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg);
}
.section--light .help-grid li{color:var(--ink); border-bottom-color:var(--line-light)}

/* "Typical outputs" — elegant tags, deliberately compact on mobile */
.tagset{display:flex; flex-wrap:wrap; gap:.6rem}
.tagset li{
  font-size:.8rem; letter-spacing:.02em; line-height:1.4;
  color:var(--ink-soft); background:var(--white);
  border:1px solid var(--line-light); padding:.6rem 1.05rem;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.tagset li:hover{border-color:var(--gold); color:var(--ink)}
.section--dark .tagset li,.section--midnight .tagset li{
  color:var(--on-dark-soft); background:rgba(255,255,255,.03); border-color:rgba(201,162,39,.22);
}
.section--dark .tagset li:hover,.section--midnight .tagset li:hover{border-color:var(--gold); color:var(--on-dark)}

/* related capabilities */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light)}
.rel-card{
  background:var(--paper); padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex; flex-direction:column; transition:background .5s var(--ease);
}
.rel-card:hover{background:var(--white)}
.rel-card h3{
  font-family:var(--display); font-size:1.14rem; font-weight:500;
  letter-spacing:-.01em; line-height:1.3; margin-bottom:.6rem; color:var(--ink);
}
.rel-card p{font-size:.86rem; line-height:1.65; color:var(--ink-mute); margin:0 0 1.2rem}
.rel-card .link-arrow{margin-top:auto}

/* contextual CTA line above the standing confidential CTA */
.cta-context{
  display:inline-flex; align-items:center; gap:.85rem;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem); font-family:var(--display);
  font-weight:500; letter-spacing:-.01em; color:var(--gold-soft); margin:0 0 1.8rem;
}
.cta-context svg{width:26px; height:13px; flex:none; transition:transform .5s var(--ease-out)}
a.cta-context:hover svg{transform:translateX(7px)}

@media (max-width:1024px){
  .cap-body{grid-template-columns:1fr; gap:2.5rem}
  .related-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .help-grid{grid-template-columns:1fr}
  .tagset li{font-size:.76rem; padding:.5rem .85rem}
  .callout{padding-left:1.2rem}
}

/* contextual CTA sits on paper, immediately above the standing dark band
   that the shared footer supplies — one confidential CTA per page, not two */
.cta-context-band{padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem); border-top:1px solid var(--line-light)}
.section--light .cta-context{color:var(--gold-deep)}
.section--light .cta-context:hover{color:var(--ink)}

/* ---------------------------------------------- solo / wide leadership card
   With one published principal a three-up grid looks like two people are
   missing. The wide card puts the portrait beside the biography instead. */
.people-grid--stacked{grid-template-columns:1fr; max-width:62rem}
.person--wide{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr)}
.person--wide .person-photo{aspect-ratio:auto; min-height:100%}
.person-sub{
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); margin:1.8rem 0 .8rem;
}
.person-tags{margin-top:0; padding-top:0}
.person--wide .person-tags{margin-top:0}
.person-tags--cred span{
  border-color:rgba(201,162,39,.35); color:var(--gold-soft); letter-spacing:.14em;
}
@media (max-width:820px){
  .person--wide{grid-template-columns:1fr}
  .person--wide .person-photo{aspect-ratio:4/5; max-height:26rem}
}
.related-grid--wide{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.related-grid--wide{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.related-grid--wide{grid-template-columns:1fr}}

/* two published principals: the home block shows both side by side */
.people-grid--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.people-grid--two{grid-template-columns:1fr}}

/* ---------------------------------------------- portrait sizing
   The portraits were running to 563x704 on the home and 344x716 on the
   leadership page — the photo dominated the copy instead of supporting it.
   Both are now capped, and the wide card's photo no longer stretches to match
   whatever the biography happens to be, so two cards of different lengths
   still show portraits of the same size. */
.lead-visual{max-width:22rem}
.lead-portrait{aspect-ratio:4/5}

.person--wide{grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr)}
.person--wide .person-photo{
  aspect-ratio:4/5; min-height:0; max-height:24rem; align-self:start;
}
@media (max-width:1024px){
  .lead-visual{max-width:18rem}
}
@media (max-width:820px){
  /* re-assert the stacked layout: the sizing rule above sits outside a media
     query and would otherwise keep squeezing the photo into a narrow column */
  .person--wide{grid-template-columns:1fr}
  .person--wide .person-photo{max-height:22rem; aspect-ratio:4/5}
  .lead-visual{max-width:15rem}
}

/* ---------------------------------------------- two principals, side by side
   Stacked full-width cards put the second person 1,700px down the page, which
   read as "he is not there". Two per row on a wide screen shows both at once,
   and a fixed narrow photo column keeps the portraits modest. */
@media (min-width:1100px){
  .people-grid--stacked{grid-template-columns:repeat(2,1fr); max-width:none; gap:clamp(1.5rem,2.4vw,2.4rem)}
  .person--wide{grid-template-columns:clamp(140px,32%,190px) minmax(0,1fr)}
  .person--wide .person-photo{max-height:15rem}
  .person--wide .person-body{padding:clamp(1.2rem,1.8vw,1.6rem)}
  .person--wide .person-body p{font-size:.84rem; line-height:1.7}
  .person--wide .person-sub{margin:1.2rem 0 .6rem}
}

/* ---------------------------------------------- ASIS certification badges
   The three marks arrived as one 348x348 clipart sheet with a checkerboard
   baked into the background, so they are cropped out of that single file the
   same way the AEGIS wordmark is. Measured ink bounds:

       CPP  x50  y10   248x70
       PSP  x76  y124  196x96
       PCI  x79  y244  190x98

   They sit on their own white tile: these are official certification marks
   and must not be recoloured or knocked out to fit the dark palette. */
.certs{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.1rem}
.cert{
  --ch:34px;                       /* rendered height of the tallest mark */
  display:block; background:#fff; border-radius:2px;
  padding:6px 8px; flex:none;
  background-repeat:no-repeat;
  background-image:url("/assets/img/asis-certifications.png");
}
.cert--cpp{
  --k:calc(var(--ch) / 70);
  width:calc(248 * var(--k)); height:calc(70 * var(--k));
  background-size:calc(348 * var(--k)) calc(348 * var(--k));
  background-position:calc(-50 * var(--k)) calc(-10 * var(--k));
}
.cert--psp{
  --k:calc(var(--ch) / 96);
  width:calc(196 * var(--k)); height:calc(96 * var(--k));
  background-size:calc(348 * var(--k)) calc(348 * var(--k));
  background-position:calc(-76 * var(--k)) calc(-124 * var(--k));
}
.cert--pci{
  --k:calc(var(--ch) / 98);
  width:calc(190 * var(--k)); height:calc(98 * var(--k));
  background-size:calc(348 * var(--k)) calc(348 * var(--k));
  background-position:calc(-79 * var(--k)) calc(-244 * var(--k));
}
.certs--sm .cert{--ch:26px}

/* ---------------------------------------------- associate consultants */
.assoc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
.assoc{background:var(--navy-800); padding:clamp(1.5rem,2.4vw,2.2rem); display:flex; flex-direction:column; transition:background .5s var(--ease)}
.assoc:hover{background:var(--navy-700)}
.assoc-photo{
  width:96px; height:96px; border-radius:50%; overflow:hidden; flex:none;
  border:1px solid rgba(201,162,39,.28); margin-bottom:1.3rem;
  background:linear-gradient(180deg,var(--navy-600),var(--navy-900));
}
.assoc-photo img{width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(.15) contrast(1.02)}
.assoc-name{font-family:var(--display); font-size:1.18rem; font-weight:500; letter-spacing:-.01em; color:var(--on-dark)}
.assoc-role{font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin:.45rem 0 1rem}
.assoc p{font-size:.86rem; line-height:1.75; color:var(--on-dark-soft); margin:0 0 .9rem}
.assoc .person-tags{margin-top:auto; padding-top:1.1rem}
/* With an "Areas of experience" heading above them, the auto margin that pins
   the tags to the bottom of the card has to move up to the heading - left on
   the tags it would strand the heading in the middle of the card. */
.assoc .person-sub{margin-top:auto; margin-bottom:.7rem; padding-top:1.1rem}
.assoc .person-sub + .person-tags{margin-top:0; padding-top:0}

@media (max-width:1024px){.assoc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.assoc-grid{grid-template-columns:1fr}}