/* ============================================================
   MJK Consulting — Editorial homepage layout
   Self-contained: no framework, no reset dependency.
   Palette: Forest Green #174A3A, Muted Gold #B8954A, Off White #FAFAF7.
   The dark surface ladder is derived from Forest; nothing else is mixed in.
   ============================================================ */

:root{
  /* Approved palette */
  --forest:#174A3A;           /* primary brand */
  --gold:#B8954A;             /* accent */
  /* Off White is the page ink; see --off below. */
  /* Dark surface ladder, every step drawn off the Forest hue. The steps stay
     close together so depth reads as light falling across the page rather than
     as a stack of boxes; the lowest steps are desaturated so the large fills
     stay calm and Forest Green keeps its punch where it accents. */
  --sur-0:#07160F;   /* deepest — footer, wells, form fields */
  --sur-1:#0C2419;   /* base page */
  --sur-2:#113223;   /* raised: cards, panels, the "white" tier */
  --forest-d:#174A3A; /* Forest Green, seated for large fills */

  /* Ink. Off-white pulled to the paper tone so the greens never read cold. */
  --off:#FAFAF7;
  --white:#113223;            /* former white surfaces → raised forest */
  --charcoal:#ECEFE9;         /* body ink */
  --slate:#9BAFA3;            /* secondary ink, green-cast */
  --lgray:rgba(250,250,247,.13); /* hairlines */

  /* Type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Rhythm. The section pad is the whole page's sense of calm, so it is
     one variable rather than a number repeated per block. */
  --pad:clamp(5.5rem,10vw,9.5rem);
  --gut:clamp(1.25rem,4vw,3rem);
  --shell:1320px;
  --hdr-h:84px;
  --hdr-float:18px;    /* gap between the floating header pill and the viewport top */
  --hdr-r:14px;        /* radius of that pill */
  --r:10px;            /* shared radius: cards, tags, images */

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* Tells the UA to render form controls, scrollbars and the caret dark. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--charcoal);
  background:var(--sur-1);
  -webkit-font-smoothing:antialiased;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:1rem;top:-4rem;z-index:200;padding:.75rem 1.25rem;
  background:var(--gold);color:var(--sur-0);font-weight:600;transition:top .2s}
.skip:focus-visible{top:1rem}

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

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* ===================== TYPE SCALE ===================== */

.h-xl{
  font-family:var(--serif);
  font-weight:600;
  /* font-size:clamp(2.1rem,4.4vw,3.65rem); */
  line-height:1.07;
  letter-spacing:-.022em;
  text-wrap:balance;
  font-size: 40px;
}

.eyebrow{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  /* Forest green is now the surface family itself, so it cannot mark an
     eyebrow against it. Gold carries the accent everywhere and .eyebrow-l
     is kept as a no-op alias. */
  color:var(--gold);
  margin-bottom:1.15rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
/* The hairline is what makes the eyebrow read as editorial rather than a label. */
.eyebrow::before{content:"";width:2.25rem;height:1px;background:currentColor;flex:none}
.eyebrow-l{color:var(--gold)}

.lede{
  font-size:clamp(1.0625rem,1.35vw,1.2rem);
  line-height:1.62;
  color:var(--slate);
  max-width:46ch;
  margin-top:1.5rem;
}

.sec-sub{color:var(--slate);max-width:46ch;line-height:1.68}

/* Section heading pair: title left, standing copy right, bottom-aligned. */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.75rem,5vw,5rem);
  align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem);
}
@media (max-width:900px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* ===================== BUTTONS ===================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.6rem;
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;border-radius:999px;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}

/* Pill button carrying a circular arrow badge — the hero's primary call. */
/* Every button is a pill; .btn-pill is the variant that carries the badge. */
.btn-pill{padding:.55rem .6rem .55rem 1.6rem;gap:1rem}
.btn-pill.btn-lg{padding:.6rem .65rem .6rem 1.9rem;font-size:1rem}
.btn-ar{
  display:grid;place-items:center;flex:none;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:rgba(7,22,15,.92);color:var(--gold);
  font-size:.9rem;line-height:1;
  transition:transform .3s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn-pill:hover .btn-ar{transform:rotate(45deg)}
.btn-outline .btn-ar{background:rgba(250,250,247,.14);color:var(--off)}
.btn-outline:hover .btn-ar{background:var(--sur-0);color:var(--gold)}

.btn-lg{padding:1.05rem 2rem;font-size:1rem}
.btn-full{width:100%}
/* A full-width pill pins its badge to the right edge instead of hugging the label. */
.btn-full.btn-pill{justify-content:space-between}

.btn-gold{background:var(--gold);color:var(--sur-0)}
/* On dark ground the gold button cannot invert to the dark ink — it would
   vanish. It lifts to a lighter gold instead. */
.btn-gold:hover{background:#D3AE62;color:var(--sur-0)}

.btn-outline{border-color:rgba(250,250,247,.5);color:var(--off)}
.btn-outline:hover{background:var(--gold);border-color:var(--gold);color:var(--sur-0)}

.link-gold{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease)
}
.link-gold:hover{border-bottom-color:currentColor}
.link-gold span{transition:transform .25s var(--ease)}
.link-gold:hover span{transform:translateX(4px)}

/* ===================== HEADER ===================== */

/* The header floats as an inset pill over the hero rather than spanning the
   full bleed, so the footage reads behind and around it. */
.hdr{
  position:fixed;inset:var(--hdr-float) 0 auto;z-index:100;
  height:var(--hdr-h);
  color:var(--off);
  transition:top .35s var(--ease),height .35s var(--ease),color .35s var(--ease);
}
.hdr-in{
  position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    height: 100%;
    max-width: calc(var(--shell) + 2 * var(--gut));
    padding-inline: clamp(1rem, 2.2vw, 1.75rem);
    border-radius: var(--hdr-r);
    /* background: rgb(7 22 15 / 20%); */
    /* border: 1px solid rgb(250 250 247 / 14%); */
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(-6px) saturate(130%);
    transition: background .35s var(--ease), border-color .35s var(--ease), border-radius .35s var(--ease), box-shadow .35s var(--ease), max-width .35s var(--ease), padding .35s var(--ease);
}

/* A flyout opened over the hero keeps the pill's floating size and position:
   it only goes opaque, with its bottom corners squared so the panel hangs
   straight off it. Only the scrolled (.is-solid) state compacts the header. */
.hdr.is-open:not(.is-solid) .hdr-in{
  background:var(--sur-1);
  border-radius:var(--hdr-r) var(--hdr-r) 0 0;
}
.hdr.is-solid{top:0;height:72px}
.hdr.is-solid .hdr-in{
  background:var(--sur-1);
  border-color:transparent;
  border-bottom-color:rgba(250,250,247,.1);
  border-radius:0;
  max-width:none;
  padding-inline:var(--gut);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
}

.brand{display:inline-flex;align-items:center;gap:.7rem;flex:none}
/* Logo lockup — the supplied white MJK | CONSULTING PNG, used as-is across the
   dark editorial header, drawer and footer. The mark is a wide lockup (~3:1),
   so height drives the size and eases down on narrow viewports. */
.brand-img{
  display:block;width:auto;height:clamp(36px, 4.8vw, 46px);flex:none;
  max-width:100%;object-fit:contain;
  transition:opacity .3s var(--ease);
}
.brand:hover .brand-img{opacity:.75}

/* --- Desktop nav --- */
.nav{display:none;align-items:center;gap:.25rem;margin-left:auto}
@media (min-width:1080px){.nav{display:flex}}

.nav-i{position:static}

.nav-t{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem .9rem;
  font-size:.9375rem;font-weight:500;
  position:relative;
}
/* Gold underline grows from the left on hover and stays while open. */
.nav-t::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.3rem;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-t:hover::after,.nav-t[aria-expanded="true"]::after{transform:scaleX(1)}

.nav-c{
  width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease);
  opacity:.75;
}
.nav-t[aria-expanded="true"] .nav-c{transform:rotate(225deg) translateY(-2px)}

/* --- Flyout panel: full-width band under the header --- */
.panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--sur-2);color:var(--charcoal);
  border-top:1px solid rgba(184,149,74,.28);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.6);
  /* The panel is a continuation of the pill, so it inherits its bottom radius. */
  border-radius:0 0 var(--hdr-r) var(--hdr-r);
  overflow:hidden;
}
.panel[hidden]{display:none}
.hdr.is-solid .panel{border-radius:0}
.panel-in{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(2.25rem,4vw,3.25rem);
}
.panel-lede{border-right:1px solid var(--lgray);padding-right:clamp(1.5rem,3vw,3rem)}
.panel-lede h3{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;
  letter-spacing:-.015em;color:var(--off);
}
.panel-lede p:last-child{margin-top:.85rem;color:var(--slate);font-size:.9375rem;max-width:34ch}

.panel-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.panel-h{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.panel-list{display:grid;gap:.1rem;align-content:start}
.panel-list a{
  display:block;padding:.5rem 0;
  font-size:.9375rem;font-weight:500;color:var(--charcoal);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),padding-left .25s var(--ease);
}
.panel-list a:hover{color:var(--gold);padding-left:.4rem}

/* Perspectives flyout: the articles themselves, not a list of sections. */
.panel-in:has(.panel-posts){grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}
.panel-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 1.5rem}
.panel-post{display:grid;gap:.45rem;color:var(--charcoal)}
.panel-post img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:calc(var(--r) - 4px);margin-bottom:.3rem;
  transition:opacity .3s var(--ease);
}
.panel-post:hover img{opacity:.8}
/* Two rows of cards must clear the fold on short laptop screens. */
@media (max-height:820px){.panel-post img{aspect-ratio:21/9}}
.panel-post-tag{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.panel-post-h{font-size:.9375rem;font-weight:500;line-height:1.35;transition:color .2s var(--ease)}
.panel-post:hover .panel-post-h{color:var(--gold)}
.panel-all{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-size:.875rem;font-weight:600;color:var(--off);
  border-bottom:1px solid var(--lgray);transition:border-color .25s var(--ease);
}
.panel-all:hover{border-bottom-color:var(--gold)}

/* --- Header actions --- */
.hdr-act{display:flex;align-items:center;gap:.6rem;margin-left:auto}
@media (min-width:1080px){.hdr-act{margin-left:0}}

.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid rgba(250,250,247,.18);border-radius:50%;
  background:rgba(250,250,247,.08);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--sur-0)}

.search{display:flex;align-items:center;gap:.5rem}
.search-f{display:none}
.search-f:not([hidden]){display:block}
.search-f input{
  width:clamp(140px,18vw,250px);
  padding:.6rem .9rem;
  background:rgba(250,250,247,.1);
  border:1px solid rgba(250,250,247,.28);border-radius:2px;
  color:var(--off);font-size:.875rem;
}
.search-f input::placeholder{color:rgba(250,250,247,.55)}
.search-f input:focus{background:rgba(250,250,247,.16);outline-offset:1px}
@media (max-width:1079px){.search-f{display:none !important}}

.hdr-cta{display:none;padding:.3rem .35rem .3rem 1.15rem;gap:.7rem}
.hdr-cta .btn-ar{width:2rem;height:2rem;font-size:.8rem}
@media (min-width:640px){.hdr-cta{display:inline-flex}}

.burger{display:grid;gap:6px;width:40px;height:40px;place-content:center;justify-items:center}
.burger span{width:22px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (min-width:1080px){.burger{display:none}}

/* ===================== MOBILE MENU ===================== */

.mob{
  position:fixed;inset:0;z-index:110;
  background:var(--sur-1);color:var(--off);
  overflow-y:auto;
}
.mob[hidden]{display:none}
.mob-in{
  max-width:var(--shell);margin-inline:auto;
  padding:1.5rem var(--gut) 4rem;
  display:grid;gap:1.75rem;align-content:start;
}
.brand-mob{margin-bottom:.5rem}

.mob-search input{
  width:100%;padding:.9rem 1rem;
  background:rgba(250,250,247,.1);
  border:1px solid rgba(250,250,247,.26);border-radius:2px;
  color:var(--off);
}
.mob-search input::placeholder{color:rgba(250,250,247,.55)}

.mob-nav{display:grid}
.mob-grp{border-top:1px solid rgba(250,250,247,.16)}
.mob-grp:last-child{border-bottom:1px solid rgba(250,250,247,.16)}
.mob-t{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1.15rem 0;
  font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;
}
.mob-t i{
  width:9px;height:9px;flex:none;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.mob-t[aria-expanded="true"] i{transform:rotate(225deg)}
.mob-grp ul{display:none;padding-bottom:1.25rem;gap:.25rem}
.mob-grp.is-open ul{display:grid}
.mob-grp ul a{
  display:block;padding:.5rem 0;
  color:rgba(250,250,247,.78);font-size:1rem;
}
.mob-grp ul a:hover{color:var(--gold)}

/* ===================== HERO ===================== */

.hero{
  position:relative;
  min-height:min(100svh,920px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--hdr-h) + var(--hdr-float) + 3rem);
  background:var(--sur-1);
  color:var(--off);
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0}
/* The still fills the hero at any ratio: cover crops rather than letterboxes.
   The shot is a wide upward view of towers against open sky, so the focal point
   sits below centre — weighting the crop toward the buildings and the lit lobby
   rather than drifting up into empty sky as the viewport narrows. */
.hero-bg-poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 62%;
  /* Same grade the footage carried, so the hero's tone is unchanged: slightly
     cool and lifted in the blacks, reading as texture behind the type. */
  filter:saturate(.72) contrast(1.06) brightness(.82);
  opacity:.92;
  pointer-events:none;
  /* Overscan absorbs the mobile-browser toolbar collapse, so the crop never
     exposes an edge as the viewport height changes. */
  transform:scale(1.06);
}
/* A tall phone viewport crops a wide landscape shot hardest. Pushing the focal
   point further down keeps the towers filling the frame, so the hero never
   reads as a pale band of sky behind the headline. */
@media (max-width:640px){
  .hero-bg-poster{
    object-position:50% 70%;
    transform:scale(1.02);
  }
}
/* Two-stop veil: dark at the base where the type sits, clearer at the top. */
.hero-veil{
  position:absolute;inset:0;
  background:
    /* A deep column of shade down the left, under the type. */
    linear-gradient(100deg,
      rgba(7,22,15,.95) 0%,
      rgba(7,22,15,.86) 26%,
      rgba(9,28,19,.56) 52%,
      rgba(9,28,19,.14) 78%,
      rgba(9,28,19,0) 100%),
    /* A floor so the marquee strip keeps its ground. */
    linear-gradient(to top,rgba(7,22,15,.92) 0%,rgba(7,22,15,.32) 26%,rgba(7,22,15,0) 55%),
    /* A light top wash so the floating header always has contrast. */
    linear-gradient(to bottom,rgba(7,22,15,.62) 0%,rgba(7,22,15,0) 22%);
}
/* A single hairline tying the hero to the grid of the page below. */
.hero-rule{
  position:absolute;left:var(--gut);right:var(--gut);bottom:5.5rem;
  height:1px;background:linear-gradient(to right,rgba(250,250,247,.2),rgba(250,250,247,0) 70%);
}

.hero-in{
  position:relative;
  padding-bottom:clamp(6.5rem,12vw,9rem);
  max-width:calc(var(--shell) + 2 * var(--gut));
}

.hero-h{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.3rem,5.9vw,4.9rem);
  line-height:1.02;letter-spacing:-.03em;
  max-width:19ch;
  /* A soft halo keeps the type off the brightest parts of the footage. */
  text-shadow:0 2px 30px rgba(7,22,15,.55);
  font-size: 60px;
}
.hero-h em{font-style:italic;font-weight:400;color:var(--gold)}

.hero-lede{
  margin-top:1.75rem;max-width:52ch;
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.68;
  color:rgba(250,250,247,.8);
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2.75rem}
@keyframes seal{to{transform:rotate(360deg)}}

/* Marquee strip pinned to the hero's base. */
.hero-marq{
  position:relative;
  border-top:1px solid rgba(250,250,247,.14);
  padding-block:1.25rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.hero-marq-t{
  display:flex;width:max-content;gap:3.5rem;
  animation:marq 42s linear infinite;
}
.hero-marq-t span{
  font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,250,247,.5);white-space:nowrap;
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===================== FILM / VIDEO ===================== */

.film{background:var(--sur-0);color:var(--off);padding-block:var(--pad)}
.film .eyebrow{color:var(--gold)}

/* ===================== WHO WE ARE ===================== */

.who{background:var(--sur-1);padding-block:var(--pad)}
.who-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
@media (max-width:980px){.who-grid{grid-template-columns:1fr}}

.who-facts{display:grid;gap:0;margin-top:2.75rem;border-top:1px solid var(--lgray)}
.who-facts > div{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1rem,3vw,2rem);
  padding:1.3rem 0;
  border-bottom:1px solid var(--lgray);
}
@media (max-width:560px){.who-facts > div{grid-template-columns:1fr;gap:.3rem}}
.who-facts dt{font-family:var(--serif);font-weight:600;font-size:1.0625rem;color:var(--off)}
.who-facts dd{color:var(--slate);font-size:.9375rem;line-height:1.6}

.who-aside{position:relative}
.who-fig{margin:0;overflow:hidden;background:var(--sur-0)}
.who-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1s var(--ease)}
.who-aside:hover .who-fig img{transform:scale(1.04)}

/* Overlapping stat card — the one deliberate break in the grid. */
.who-card{
  position:absolute;left:-1.5rem;bottom:-1.75rem;
  width:min(17rem,74%);
  padding:1.6rem 1.75rem;
  background:var(--forest);color:var(--off);
  /* A hairline of gold along the top edge catches the card against the
     darker surface behind it, where a shadow alone no longer separates them. */
  border-top:1px solid rgba(184,149,74,.5);
  box-shadow:0 28px 56px -24px rgba(0,0,0,.7);
}
@media (max-width:980px){.who-card{position:static;width:100%;margin-top:1.5rem}}
.who-card-l{
  font-size:.6875rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);
}
.who-card-v{
  font-family:var(--serif);font-weight:700;font-size:2.75rem;line-height:1.05;
  letter-spacing:-.025em;margin-top:.5rem;
}
.who-card-n{font-size:.8125rem;color:rgba(250,250,247,.76);margin-top:.5rem;line-height:1.55}

/* ===================== CAPABILITIES (dark accordion) ===================== */

.cap{background: #062e21;padding-block:var(--pad)}
.cap .sec-sub{color:rgba(250,250,247,.7)}

/* The section head stacks rather than splitting left/right, so the heading and
   its intro read as one block sitting above the full-width row list. */
.cap-head{display:block;max-width:none}
.cap-head .h-xl{margin:.35rem 0 0}
.cap-head .sec-sub{margin:1rem 0 0;max-width:46ch}
.cap-list{border-top:1px solid rgba(250,250,247,.16)}
.cap-row{border-bottom:1px solid rgba(250,250,247,.16)}
.cap-row h3{margin:0}

.cap-t{
  display:flex;align-items:center;gap:clamp(1.1rem,3vw,2.75rem);width:100%;
  padding:30px;
  font-family:var(--serif);font-weight:600;
  font-size:30px;
  line-height:1.2;letter-spacing:-.018em;
  text-align:left;
  transition:color .3s var(--ease);
}
.cap-t:hover{color:var(--gold)}
.cap-n{
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.16em;
  color:var(--gold);flex:none;
}
.cap-l{flex:1 1 auto;min-width:0}

/* Right-aligned circular arrow, drawn in type so there is no icon font and no
   SVG sprite to keep in sync. */
.cap-ar{
  flex:none;margin-left:auto;
  display:grid;place-items:center;
  width:clamp(36px,3.4vw,44px);aspect-ratio:1;
  border:1px solid rgba(250,250,247,.34);border-radius:50%;
  font-family:var(--sans);font-size:.95rem;line-height:1;
  transition:transform .35s var(--ease),border-color .3s var(--ease),
             background-color .3s var(--ease),color .3s var(--ease);
}
.cap-t:hover .cap-ar{border-color:var(--gold);color:var(--gold)}
/* Open rows turn the arrow down-right, so the control still reads as a toggle. */
.cap-row.is-open .cap-ar{
  transform:rotate(90deg);
  background:var(--gold);border-color:var(--gold);color:var(--forest-d);
}
.cap-row.is-open .cap-t{color:var(--gold)}

.cap-b{overflow:hidden}
.cap-b[hidden]{display:none}
.cap-b-in{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding:0 0 clamp(1.75rem,3vw,2.5rem) clamp(0rem,4vw,3.75rem);
}
@media (max-width:760px){.cap-b-in{grid-template-columns:1fr;padding-left:0}}
.cap-b-in p{color:rgba(250,250,247,.76);max-width:52ch}
.cap-b-in ul{display:grid;gap:.6rem;align-content:start}
.cap-b-in li{
  padding-left:1.1rem;position:relative;
  font-size:.9375rem;color:rgba(250,250,247,.9);
}
.cap-b-in li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;background:var(--gold);
}

/* ===================== INDUSTRIES ===================== */

.ind{
  background:var(--sur-0);
  padding-block:var(--pad);
  /* Premium visual placeholder: a business photograph carries the band, but it
     is never allowed to read as a photo section. The image sits in the
     background layer and ::after lays a dark gradient over it, so the band
     stays on the same dark ladder as its neighbours and every piece of ink
     above keeps its contrast. */
  background-image:url("../images/feature-core-migration.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  isolation:isolate;
}
/* ::before is already spoken for by the section-seam hairline, so the overlay
   takes ::after. z-index:-1 keeps it over the image but under the shell. */
.ind::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(7,22,15,.86) 0%,
      rgba(12,36,25,.62) 38%,
      rgba(12,36,25,.62) 62%,
      rgba(7,22,15,.86) 100%),
    linear-gradient(90deg,
      rgba(7,22,15,.55) 0%,
      rgba(7,22,15,.3) 50%,
      rgba(7,22,15,.55) 100%);
}
.ind>.shell{position:relative;z-index:1}
.ind-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1px;
  /* The grid paints the 1px seams between cards. It must stay a solid dark
     fill, not the translucent hairline token — with six cards in a four-up
     row the trailing cells expose this surface directly. */
  background:rgba(17,50,35,.8);
  border:1px solid var(--lgray);
}
.ind-c{
  position:relative; /* anchors the stretched .ind-hit link */
  /* Translucent rather than --sur-1, so the overlaid photograph still reads
     faintly through the grid instead of being masked by six opaque tiles.
     At .68 the card is still dark enough for body ink on --slate. */
  background:rgba(12,36,25,.68);
  padding:clamp(1.75rem,3vw,2.5rem);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.ind-c:hover{background:rgba(23,74,58,.9);transform:translateY(-3px)}
.ind-n{
  display:block;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;color:var(--gold);
  margin-bottom:1.5rem;
}
.ind-c h3{
  font-family:var(--serif);font-weight:600;font-size:1.3rem;
  letter-spacing:-.012em;color:var(--off);
}
.ind-c p{margin-top:.75rem;font-size:.9375rem;line-height:1.62;color:var(--slate)}

/* ===================== PROOF ===================== */

.proof{background:var(--sur-1);padding-block:var(--pad)}

/* ===================== IMPACT ===================== */

.impact{background:#062e21;color:var(--off);padding-block:var(--pad)}
.impact .h-xl{max-width:28ch}

/* ===================== PERSPECTIVES ===================== */

.ins{background:var(--sur-0);padding-block:var(--pad)}

/* --- Rail --- */
.jr{position:relative;margin-top:clamp(2.5rem,5vw,3.75rem)}
.jr-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*clamp(1rem,2vw,1.75rem))/3);
  gap:clamp(1rem,2vw,1.75rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.jr-track::-webkit-scrollbar{display:none}
@media (max-width:1100px){.jr-track{grid-auto-columns:calc((100% - clamp(1rem,2vw,1.75rem))/2)}}
@media (max-width:720px){.jr-track{grid-auto-columns:86%}}

/* --- Card --- */
.jr-card{
  position:relative;scroll-snap-align:start;overflow:hidden;
  background:var(--sur-2);
  border:1px solid var(--lgray);
  isolation:isolate;
  transition:border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.jr-card:hover,.jr-card:focus-within{
  border-color:rgba(184,149,74,.55);transform:translateY(-6px);
  box-shadow:0 28px 60px -28px rgba(0,0,0,.72);
}
/* Whole-card link sits beneath the interactive controls. */
.jr-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.jr-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}

.jr-shot{margin:0;overflow:hidden;background:var(--sur-0)}
.jr-shot img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1s var(--ease),filter .4s var(--ease);
  filter:saturate(.86) contrast(1.04);
}
.jr-card:hover .jr-shot img{transform:scale(1.06);filter:saturate(1) contrast(1.04)}

/* --- Floating overlay panel --- */
.jr-panel{
  position:relative;z-index:2;pointer-events:none;
  margin:-4.25rem clamp(.75rem,1.4vw,1.1rem) clamp(.75rem,1.4vw,1.1rem);
  padding:clamp(1.1rem,1.8vw,1.4rem);
  background:rgba(12,36,25,.82);
  border:1px solid rgba(250,250,247,.12);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.jr-card:hover .jr-panel{background:rgba(12,36,25,.9);transform:translateY(-4px)}
.jr-panel > * + *{margin-top:.8rem}

/* The save toggle is pinned to the panel's corner so the meta line can wrap
   freely without pushing it onto a row of its own — every card's headline
   then starts at the same height regardless of tag length. */
.jr-top{
  display:flex;align-items:center;flex-wrap:wrap;gap:.42rem;
  padding-right:2.4rem;
  font-size:.75rem;color:var(--slate);
}
.jr-tag{
  padding:.3rem .58rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(184,149,74,.14);color:var(--gold);
  border:1px solid rgba(184,149,74,.34);
}
.jr-dot{width:3px;height:3px;border-radius:50%;background:var(--slate);opacity:.7}

.jr-save{
  pointer-events:auto;
  position:absolute;
  top:clamp(1.1rem,1.8vw,1.4rem);right:clamp(1.1rem,1.8vw,1.4rem);
  margin-top:-2px;margin-left:auto;display:grid;place-items:center;
  width:30px;height:30px;
  background:rgba(250,250,247,.06);border:1px solid rgba(250,250,247,.14);
  color:var(--slate);cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.jr-save svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round;transition:fill .25s var(--ease)}
.jr-save:hover{color:var(--gold);border-color:rgba(184,149,74,.45)}
.jr-save[aria-pressed="true"]{color:var(--gold);background:rgba(184,149,74,.16);
  border-color:rgba(184,149,74,.5)}
.jr-save[aria-pressed="true"] svg{fill:currentColor}

.jr-panel h3{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.2rem,1.75vw,1.5rem);line-height:1.18;letter-spacing:-.018em;
  color:var(--off);
}
.jr-panel > p{
  font-size:.9rem;line-height:1.6;color:var(--slate);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.jr-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.jr-go{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:rgba(250,250,247,.08);border:1px solid rgba(250,250,247,.16);
  color:var(--off);font-size:1rem;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.jr-card:hover .jr-go{background:var(--gold);border-color:var(--gold);color:var(--sur-0);
  transform:translateX(3px)}

/* --- Rail controls --- */
.jr-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:clamp(1.25rem,2.5vw,1.9rem)}
.jr-arrow{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:transparent;border:1px solid rgba(250,250,247,.28);
  color:var(--off);font-size:1.05rem;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),opacity .25s var(--ease);
}
.jr-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--sur-0)}
.jr-arrow:disabled{opacity:.3;cursor:default}

@media (prefers-reduced-motion:reduce){
  .jr-track{scroll-behavior:auto}
  .jr-card,.jr-panel,.jr-shot img,.jr-go{transition:none}
}

.ins-more{margin-top:clamp(2.5rem,5vw,4rem);text-align:center}

/* ===================== CAREERS ===================== */

.car{background:var(--sur-0);color:var(--off);padding-block:var(--pad)}
.car .lede{color:rgba(250,250,247,.76)}

/* ===================== CONTACT ===================== */

.cta{background:var(--sur-1);padding-block:var(--pad)}
.cta-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
@media (max-width:980px){.cta-grid{grid-template-columns:1fr}}
.cta-copy .h-xl{color:var(--off)}
.cta-copy .sec-sub{margin-top:1.5rem}

.cta-meta{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--lgray)}
.cta-meta li{
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:1rem;padding:1.1rem 0;
  border-bottom:1px solid var(--lgray);
  font-size:.9375rem;
}
@media (max-width:560px){.cta-meta li{grid-template-columns:1fr;gap:.25rem}}
.cta-meta span{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);padding-top:.35em;
}
.cta-meta a{color:var(--off);font-weight:500;border-bottom:1px solid var(--lgray);
  transition:border-color .25s var(--ease)}
.cta-meta a:hover{border-bottom-color:var(--gold)}
.cta-form-h{
  font-family:var(--serif);font-weight:600;font-size:1.4rem;letter-spacing:-.015em;
  color:var(--off);margin-bottom:.4rem;
}
/* ---------- Booking panel ----------
   One card: a dark header in the site's voice, then the Calendly inline
   scheduler flush underneath on white. The frame starts at --book-h and
   home-editorial.js updates it from Calendly's page_height messages.
   The embed is capped at 640px: wider than ~650px Calendly switches to its
   side-by-side layout, which squeezes into a narrow strip once a date is
   picked. Below that it uses the compact one-column flow everywhere. */
.cta-grid:has(.cta-book){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:980px){.cta-grid:has(.cta-book){grid-template-columns:1fr}}
/* Two columns only: hold the copy below the floating header while the taller
   scheduler scrolls past. It releases at the grid's end, and does nothing
   while the copy is the taller column. On short viewports the offset shrinks
   (--cta-copy-h is measured in home-editorial.js) so the copy's last line
   stays on screen instead of sticking off the bottom. */
@media (min-width:981px){
  .cta-grid:has(.cta-book) .cta-copy{
    position:sticky;
    top:min(calc(var(--hdr-h) + var(--hdr-float) + 2rem), calc(100vh - var(--cta-copy-h, 0px) - 1.5rem));
  }
}

.cta-book{
  background:var(--white);border:1px solid var(--lgray);border-radius:var(--r);
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
}

.book-head{
  display:grid;gap:1.1rem;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid rgba(184,149,74,.34);
}
.book-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}
.book-head .cta-form-h{margin:0}
.book-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.book-chips li{
  padding:.3rem .7rem;border:1px solid rgba(184,149,74,.4);border-radius:999px;
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.book-steps{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font-size:.8125rem;color:var(--slate)}
.book-steps li{display:flex;align-items:center;gap:.55rem}
.book-steps span{font-size:.6875rem;font-weight:600;letter-spacing:.14em;color:var(--gold)}

.book-frame{
  --book-h:296px; /* placeholder: the profile page's height */
  position:relative;overflow:hidden;background:var(--white);
  height:var(--book-h);transition:height .3s var(--ease);
}
/* Calendly sets this element's height inline to its full page height; the
   frame above clips whatever it trims. */
.book-embed{position:absolute;top:0;left:0;right:0;margin-inline:auto;max-width:640px;min-width:300px;height:100%}
.book-embed iframe{display:block;width:100%;height:100%;border:0;background:var(--white)}
/* Calendly's own spinner needs widget.css; ours covers that job. */
.book-embed .calendly-spinner{display:none}
.book-load{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;background:var(--white);color:var(--slate);font-size:.875rem;
  transition:opacity .4s var(--ease),visibility .4s;
}
.book-frame.is-ready .book-load{opacity:0;visibility:hidden}
.book-spin{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(184,149,74,.25);border-top-color:var(--gold);
  animation:book-spin .9s linear infinite;
}
@keyframes book-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.book-spin{animation:none}}

.book-foot{
  padding:.9rem 1.5rem;text-align:center;font-size:.8125rem;color:var(--slate);
  border-top:1px solid var(--lgray);
}
.book-foot a{color:var(--off);border-bottom:1px solid var(--lgray);transition:border-color .25s var(--ease)}
.book-foot a:hover{border-bottom-color:var(--gold)}

@media (max-width:640px){
  .book-foot{padding:.85rem 1rem}
}

/* ===================== FOOTER ===================== */

.ftr{background:var(--sur-0);color:rgba(250,250,247,.72);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.ftr-top{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgba(250,250,247,.14);
}
@media (max-width:1080px){.ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr}}

.ftr-brand .brand{color:var(--off);margin-bottom:1.25rem}
.ftr-brand .brand-img{height:clamp(42px, 5.6vw, 54px)}
.ftr-brand p{font-size:.9375rem;line-height:1.65;max-width:34ch}

.ftr-col h4{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.15rem;
}
.ftr-col ul{display:grid;gap:.6rem}
.ftr-col li,.ftr-col a{font-size:.875rem}
.ftr-col a{transition:color .2s var(--ease)}
.ftr-col a:hover{color:var(--gold)}

.ftr-bot > p{margin-right:auto}
.ftr-bot{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;
  padding-top:2rem;
  font-size:.8125rem;
}
.ftr-soc{display:flex;gap:.6rem}
.ftr-soc a{
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid rgba(250,250,247,.2);border-radius:50%;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.ftr-soc svg{width:17px;height:17px}
.ftr-soc a:hover{background:var(--gold);border-color:var(--gold);color:var(--sur-0)}

/* ===================== SECTION SEAMS ===================== */

/* With every band dark, abutting sections of the same tone would merge into
   one slab. A single muted-gold hairline keeps the editorial rhythm and
   reads as a rule on a page rather than a border on a box. */
.film,.who,.cap,.ind,.proof,.impact,.ins,.car,.cta,.blog,.art,.rel{
  position:relative;
}
.film::before,.who::before,.cap::before,.ind::before,.proof::before,
.impact::before,.ins::before,.car::before,.cta::before,.blog::before,.art::before,.rel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(to right,
    transparent,
    rgba(184,149,74,.34) 18%,
    rgba(184,149,74,.34) 82%,
    transparent);
}
/* The hero already closes on its own marquee rule. */
.film::before{background:none}

/* ===================== REVEAL ===================== */

/* Elements start displaced and are released by the IntersectionObserver in
   home-editorial.js. The .js-rv guard means no-JS visitors see everything. */
.js-rv .rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-rv .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-rv .rv{opacity:1;transform:none}
  .hero-marq-t{animation:none}
}

/* ===================== SHARED RADIUS =====================
   One token across every card, tag and image so the page reads as a single
   system. The media figures already clip with overflow:hidden, so rounding
   the figure rounds the photo inside it. */

/* --- Cards & panels --- */
.who-card,.jr-card,.jr-panel{border-radius:var(--r)}

/* --- Tags & small controls --- */
.jr-tag,
.jr-save{border-radius:var(--r)}

/* --- Images & media figures --- */

.who-fig{border-radius:var(--r)}

/* The journal photo is flush with the card's top corners and its bottom edge
   sits under the overlay panel, so it rounds at the top only. */
.jr-shot{border-radius:var(--r) var(--r) 0 0}

/* ===================== BLOG: CARD LINK ===================== */

/* The visible "Read more" is the card's accessible link; the stretched
   .jr-hit behind it keeps the whole card clickable for pointer users. */
.jr-more{
  pointer-events:auto;position:relative;z-index:3;
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);
}
.jr-more:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:999px}
.jr-foot .jr-more{margin-left:auto}

/* ===================== BLOG: PAGE HEADER ===================== */

/* Sub-pages open on a quiet band instead of the hero, so the floating
   header needs room above the first line of type. */
.page-hd{
  background:var(--sur-1);
  padding-block:calc(var(--hdr-h) + var(--hdr-float) + clamp(3rem,7vw,5.5rem)) clamp(3rem,6vw,4.5rem);
}
.page-hd .h-xl{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch}
.page-hd .lede{max-width:56ch}

/* --- Page header with a photographic bed -------------------------------
   An inner-page variant of the home hero: the still sits behind the type under
   the same grade and veil, so an inner page can carry an image without taking
   on the full 100svh height of the landing hero. Only the tokens that have to
   change against a dark photographic bed are restated here; everything else is
   inherited from .page-hd. */
.page-hd-media{
  position:relative;
  overflow:hidden;
  color:var(--off);
  /* A little more room than the flat header: the image needs height to read. */
  padding-block:calc(var(--hdr-h) + var(--hdr-float) + clamp(3.5rem,8vw,6rem)) clamp(4rem,8vw,6.5rem);
}
.page-hd-in{position:relative}
/* The veil's deep column sits on the left, under the type, so the crop is
   weighted toward the figures at the table rather than the empty ceiling. */
.page-hd-media .hero-bg-poster{object-position:var(--focus,50% 46%)}
/* The hairline is anchored to the hero's marquee strip on the home page; with
   no marquee here it sits just inside the lower edge instead. */
.page-hd-media .hero-rule{bottom:clamp(1.75rem,3vw,2.5rem)}
/* Slate reads as muted grey on paper but goes murky over a dark photograph. */
.page-hd-media .crumbs{color:rgba(250,250,247,.72)}
.page-hd-media .crumbs a{color:rgba(250,250,247,.88)}
.page-hd-media .crumbs a:hover{color:var(--gold)}
.page-hd-media .lede{color:rgba(250,250,247,.86)}
.page-hd-media .btn{margin-top:clamp(1.75rem,3vw,2.25rem)}
@media (max-width:640px){
  /* The shot is wide and the faces sit mid-frame; a tall viewport crops it
     hardest, so hold the centre rather than drifting down into the table. */
  .page-hd-media .hero-bg-poster{object-position:var(--focus-sm,50% 42%);transform:scale(1.02)}
}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:.8125rem;color:var(--slate);margin-bottom:1.75rem}
.crumbs a{transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{opacity:.6}

/* ===================== BLOG: LISTING ===================== */

.blog{background:var(--sur-0);padding-block:clamp(3.5rem,7vw,6rem) var(--pad)}
.jr-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.2vw,1.9rem);
}
@media (max-width:1100px){.jr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.jr-grid{grid-template-columns:1fr}}

/* ===================== BLOG: ARTICLE ===================== */

.art-hd{padding-bottom:clamp(2rem,4vw,3rem)}
.art-hd .h-xl{max-width:24ch}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-top:1.75rem;font-size:.8125rem;color:var(--slate);
}

.art-fig{margin:0 auto;max-width:var(--shell);padding-inline:var(--gut)}
.art-fig img{
  width:100%;aspect-ratio:21/10;object-fit:cover;border-radius:var(--r);
  filter:saturate(.92) contrast(1.04);
}

.art{background:var(--sur-1);padding-block:clamp(3rem,6vw,5rem) var(--pad)}
.art-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
@media (max-width:980px){.art-grid{grid-template-columns:1fr}}

/* Long-form reading column. */
.prose{max-width:68ch;font-size:1.0625rem;line-height:1.78;color:var(--charcoal)}
.prose > * + *{margin-top:1.25em}
.prose > p:first-child{font-size:1.1875rem;line-height:1.7;color:var(--off)}
.prose h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.2;letter-spacing:-.018em;
  color:var(--off);margin-top:2.4em;
}
.prose h3{
  font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.3;
  color:var(--off);margin-top:1.9em;
}
.prose h2 + *,.prose h3 + *{margin-top:.8em}
.prose strong{color:var(--off);font-weight:600}
.prose ul,.prose ol{display:grid;gap:.6rem;padding-left:0}
.prose ul > li{position:relative;padding-left:1.5rem}
.prose ul > li::before{
  content:"";position:absolute;left:0;top:.78em;width:.6rem;height:1px;background:var(--gold);
}
.prose ol{counter-reset:n}
.prose ol > li{position:relative;padding-left:2rem;counter-increment:n}
.prose ol > li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-size:.8125rem;font-weight:600;color:var(--gold);
}

.prose .pull{
  margin:2.2em 0;padding:.25rem 0 .25rem clamp(1.25rem,3vw,2rem);
  border-left:2px solid var(--gold);
}
.prose .pull p{
  font-family:var(--serif);font-weight:600;font-style:italic;
  font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.35;letter-spacing:-.01em;
  color:var(--off);
}

.prose .callout{
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:var(--sur-2);border:1px solid var(--lgray);
  border-top:1px solid rgba(184,149,74,.5);border-radius:var(--r);
}
.prose .callout p{font-size:.975rem;line-height:1.7;color:var(--slate)}
.prose .callout > * + *{margin-top:.6rem}
.prose .callout-h{
  font-size:.75rem !important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold) !important;
}
.prose .callout ul{margin-top:.75rem}

/* Sticky side rail: topics and the way back to the index. */
.art-side{position:sticky;top:calc(72px + 2rem);display:grid;gap:2rem;
  padding-top:.4rem;font-size:.875rem;color:var(--slate)}
@media (max-width:980px){.art-side{position:static;border-top:1px solid var(--lgray);padding-top:2rem}}
.art-side h2{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;
}
.art-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.art-tags li{
  padding:.3rem .65rem;border:1px solid var(--lgray);border-radius:var(--r);
  font-size:.75rem;color:var(--slate);
}

/* Related articles under the body. */
.rel{background:var(--sur-0);padding-block:var(--pad)}
.rel .sec-head{margin-bottom:clamp(2rem,4vw,3rem)}

@media (max-width:720px){.art-fig img{aspect-ratio:3/2}}

/* ============================================================
   WHO WE ARE — introduction block
   Three columns: copy / image / focus rail, with the purpose card
   spanning the full width underneath. Everything sits on the base
   forest surface; depth comes from hairlines and a faint gold wash,
   never from a heavier box.
   ============================================================ */
.wwa{
  position:relative;
  background:var(--sur-1);
  padding-block:clamp(3.5rem,7vw,6rem) var(--pad);
  overflow:hidden;
}
/* A single soft gold bloom behind the rail keeps the right edge alive. */
.wwa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 36rem at 88% 8%, rgba(184,149,74,.10), transparent 62%),
    radial-gradient(48rem 32rem at 4% 70%, rgba(23,74,58,.55), transparent 65%);
}
.wwa-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(300px,.78fr);
  gap:clamp(1.75rem,3.4vw,3.25rem);
  align-items:start;
}

/* ---- Column 1: copy ---- */
.wwa-h{
  margin:.65rem 0 clamp(1.25rem,2.4vw,1.9rem);
  font-size:clamp(2.1rem,4vw,3.4rem);
  line-height:1.08;
  max-width:14ch;
}
.wwa-h span{
  background:linear-gradient(100deg,var(--off) 18%,var(--gold) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wwa-prose p{margin:0 0 1.15em;max-width:52ch;color:var(--charcoal)}
.wwa-prose p:last-child{margin-bottom:0}

/* ---- Column 2: image ---- */
.wwa-fig{
  margin:0;position:relative;border-radius:calc(var(--r) * 2.4);
  overflow:hidden;
  border:1px solid rgba(184,149,74,.28);
  box-shadow:0 28px 60px -28px rgba(0,0,0,.65);
}
.wwa-fig img{
  display:block;width:100%;height:100%;
  min-height:clamp(320px,38vw,540px);
  object-fit:cover;
}
/* Grades the still down so it reads as texture, matching the hero. */
.wwa-fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,36,25,.26),rgba(12,36,25,.52));
}

/* ---- Column 3: focus rail ---- */
.wwa-side{display:grid;gap:clamp(1.5rem,2.6vw,2.25rem);align-content:start}
.wwa-k{
  margin:0 0 1rem;
  font-family:var(--sans);
  font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.wwa-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.wwa-list a{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem .95rem;
  border:1px solid rgba(250,250,247,.12);
  border-radius:calc(var(--r) + 2px);
  background:linear-gradient(180deg,rgba(23,74,58,.42),rgba(17,50,35,.28));
  color:var(--off);text-decoration:none;
  font-size:.97rem;font-weight:500;line-height:1.3;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.wwa-list a:hover,.wwa-list a:focus-visible{
  border-color:rgba(184,149,74,.55);
  background:linear-gradient(180deg,rgba(23,74,58,.7),rgba(17,50,35,.45));
  transform:translateX(3px);
}
.wwa-ic{
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:9px;
  border:1px solid rgba(184,149,74,.35);
  background:rgba(184,149,74,.10);
  color:var(--gold);
}
.wwa-ic svg{width:18px;height:18px}
.wwa-ar{
  margin-left:auto;flex:0 0 auto;width:7px;height:7px;
  border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);
  transform:rotate(45deg);opacity:.75;
}

/* ---- Contact card ---- */
.wwa-cta{
  padding:clamp(1.15rem,2vw,1.5rem);
  border:1px solid rgba(184,149,74,.3);
  border-radius:calc(var(--r) + 4px);
  background:linear-gradient(165deg,rgba(184,149,74,.12),rgba(23,74,58,.28));
}
.wwa-cta p{margin:0;font-size:.95rem;color:var(--charcoal)}
.wwa-cta .btn{margin-top:1.1rem}

/* ---- Purpose card, spanning all three columns ---- */
.wwa-purpose{
  grid-column:1 / -1;
  margin-top:clamp(.5rem,1.6vw,1.25rem);
  display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.4rem,3vw,2.5rem);
  border:1px solid rgba(184,149,74,.26);
  border-radius:calc(var(--r) + 6px);
  background:linear-gradient(100deg,rgba(23,74,58,.45),rgba(17,50,35,.24));
}
.wwa-purpose-ic{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(58px,6vw,74px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(184,149,74,.4);
  background:rgba(184,149,74,.10);
  color:var(--gold);
}
.wwa-purpose-ic svg{width:50%;height:50%}
.wwa-purpose-txt{
  border-left:1px solid rgba(184,149,74,.28);
  padding-left:clamp(1.25rem,3vw,2.5rem);
}
.wwa-purpose-txt p:last-child{
  margin:0;max-width:72ch;
  font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.6;color:var(--off);
}

/* ---- Responsive ---- */
@media (max-width:1180px){
  .wwa-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr)}
  .wwa-fig{grid-column:1;grid-row:2}
  .wwa-side{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:860px){
  .wwa-grid{grid-template-columns:minmax(0,1fr)}
  .wwa-fig,.wwa-side{grid-column:1;grid-row:auto}
  .wwa-h{max-width:none}
  .wwa-fig img{min-height:clamp(260px,56vw,380px)}
}
@media (max-width:620px){
  .wwa-purpose{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .wwa-purpose-txt{border-left:0;border-top:1px solid rgba(184,149,74,.28);
    padding-left:0;padding-top:1.1rem}
}

/* ============================================================
   LEADERSHIP — numbered principles
   Three cards on the base page surface, so the band sits between the
   two darker sections without introducing a new colour. The numerals
   are set in the serif at display size and held at low opacity: they
   give the list its rhythm without competing with the headings.
   ============================================================ */

.ldr-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.75rem);
}
.ldr-card{
  position:relative;
  padding:clamp(1.6rem,2.6vw,2.25rem);
  background:var(--sur-2);
  border:1px solid var(--lgray);
  border-radius:calc(var(--r) * 2);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.ldr-card:hover{
  border-color:rgba(184,149,74,.42);
  transform:translateY(-4px);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.7);
}
.ldr-n{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2rem,3.4vw,2.75rem);
  font-weight:600;line-height:1;
  color:var(--gold);opacity:.5;
  margin-bottom:1.1rem;
  transition:opacity .3s var(--ease);
}
.ldr-card:hover .ldr-n{opacity:1}
.ldr-card h3{
  margin:0 0 .7rem;
  font-family:var(--serif);
  font-size:1.1875rem;font-weight:600;line-height:1.3;
  color:var(--off);
}
.ldr-card p{
  margin:0;
  font-size:.9375rem;line-height:1.68;
  color:var(--slate);
}

@media (max-width:960px){
  .ldr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .ldr-grid{grid-template-columns:minmax(0,1fr)}
  .ldr-n{margin-bottom:.8rem}
}

/* --- Leadership page header -------------------------------------------
   The leadership still is a different animal from the Who We Are shot: an
   upward view along a glazed stair, with the brightest part of the frame —
   open sky at the vanishing point — sitting dead centre rather than at the
   edges. Against the dark page that centre would glare and the white steel
   would fight the headline, so this modifier grades the image down harder
   than the shared rule and lays a second wash over the right half, where the
   base veil tapers to nothing. The crop holds slightly above centre to keep
   the stair and the sky in frame as the viewport narrows. Scoped to this
   page so the Who We Are header keeps its own tuning.
   ------------------------------------------------------------------- */
.page-hd-ldr .hero-bg-poster{
  object-position:50% 52%;
  filter:saturate(.58) contrast(1.04) brightness(.62);
  opacity:.88;
}
/* A broad wash from the right, balancing the base veil's left-hand column so
   the glazing and sky settle back behind the type instead of competing. */
.page-hd-ldr .hero-veil::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(260deg,
      rgba(7,22,15,.74) 0%,
      rgba(7,22,15,.44) 30%,
      rgba(9,28,19,.12) 62%,
      rgba(9,28,19,0) 100%),
    /* Knocks the bright vanishing point back so the H1 keeps its contrast. */
    radial-gradient(46rem 30rem at 52% 44%, rgba(7,22,15,.42), transparent 68%);
}
@media (max-width:640px){
  /* A tall viewport crops this frame hardest at the sides; holding the centre
     keeps the stair's perspective readable rather than cropping to a wall. */
  .page-hd-ldr .hero-bg-poster{object-position:50% 50%;transform:scale(1.04)}
}

/* --- Digital Transformation header ---------------------------------
   The source still has a line of type set into its right-hand panel. Behind
   the headline it would read as a second, cropped message, so a wash from
   the right sinks that panel and leaves only the desk and window in view. */
.page-hd-dt .hero-veil::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(260deg,
    rgba(7,22,15,.98) 0%,
    rgba(7,22,15,.92) 34%,
    rgba(9,28,19,.3) 50%,
    rgba(9,28,19,0) 64%);
}

/* ===================== LEADERSHIP · APPROACH / VISION ===================== */
/* Two columns of equal weight: the copy is set to a comfortable measure so the
   three paragraphs read as one argument, and the still is framed in gold so it
   sits with the type rather than floating against the surface. */
.lva{background:var(--sur-1);padding-block:var(--pad)}
.lva-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.lva-copy{max-width:56ch}
.lva-copy .h-xl{
  margin:.9rem 0 1.75rem;
  font-size:clamp(2rem,4.1vw,3.35rem);
  line-height:1.08;
}
/* The highlight is carried by <em>, so the emphasis survives with styles off. */
.lva-copy .h-xl em{font-style:normal;color:var(--gold)}
/* :not(.eyebrow) keeps this body-copy rule from repainting the section
   eyebrow, which must stay gold at eyebrow size like the hero's. */
.lva-copy p:not(.eyebrow){
  color:var(--charcoal);
  font-size:clamp(1rem,1.15vw,1.0625rem);
  line-height:1.75;
  margin:0 0 1.25rem;
}
.lva-copy p:not(.eyebrow):last-child{margin-bottom:0}

/* Figure: a thin gold frame set off the image, with the image inset inside it. */
.lva-fig{
  margin:0;
  position:relative;
  padding:.6rem;
  border:1px solid rgba(184,149,74,.38);
  border-radius:calc(var(--r) + 8px);
  background:linear-gradient(140deg,rgba(184,149,74,.12),rgba(23,74,58,.04));
}
.lva-fig img{
  display:block;width:100%;
  aspect-ratio:16/11;object-fit:cover;
  border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75);
  transition:transform 1s var(--ease);
}
.lva-fig:hover img{transform:scale(1.03)}

/* Vision: one wide, quiet card closing the section. */
.lva-vision{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;
  grid-template-columns:auto 1px minmax(0,1fr);
  align-items:center;
  gap:clamp(1.25rem,3.5vw,2.75rem);
  padding:clamp(1.75rem,3.5vw,2.5rem) clamp(1.5rem,4vw,3rem);
  border:1px solid rgba(184,149,74,.26);
  border-radius:calc(var(--r) + 4px);
  background:linear-gradient(120deg,rgba(184,149,74,.07),rgba(250,250,247,.02));
}
.lva-vision::before{
  content:"";grid-column:2;grid-row:1;align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(184,149,74,.45),transparent);
}
.lva-vision-ic{
  grid-column:1;grid-row:1;
  display:grid;place-items:center;
  width:4.25rem;height:4.25rem;border-radius:50%;
  border:1px solid rgba(184,149,74,.5);
  color:var(--gold);
}
.lva-vision-ic svg{width:1.9rem;height:1.9rem}
.lva-vision-body{grid-column:3;grid-row:1;min-width:0}
.lva-vision-l{
  font-size:.6875rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .6rem;
}
.lva-vision-t{
  margin:0;color:var(--off);
  font-size:clamp(1rem,1.5vw,1.1875rem);
  line-height:1.6;max-width:62ch;
}

@media (max-width:980px){
  .lva-grid{grid-template-columns:1fr}
  .lva-copy{max-width:none;order:2}
  .lva-fig{order:1}
}
@media (max-width:620px){
  .lva-vision{grid-template-columns:auto minmax(0,1fr);gap:1.1rem;text-align:left;align-items:center}
  .lva-vision::before{display:none}
  .lva-vision-body{grid-column:2;grid-row:1}
  .lva-vision-ic{grid-column:1;grid-row:1;width:3.5rem;height:3.5rem}
  .lva-vision-ic svg{width:1.6rem;height:1.6rem}
}

/* ===================== HOME · LINKS INTO THE INNER PAGES =====================
   Each capability row and industry card leads to its own page. The industry
   link is stretched over the whole card, like .jr-hit on the journal cards. */
.cap-more{margin-top:1.1rem;font-size:.9375rem}
.ind-hit{position:absolute;inset:0;z-index:1}
.ind-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}

/* ============================================================
   CONSULTING & STRATEGY PAGE
   Page-specific layout on the shared tokens. The hero is the shared
   .page-hd-media band; the bands below it (pillar strip, prose with a
   sticky rail) are unique to this page.
   ============================================================ */
.cs-pillar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1px;
  background:rgba(17,50,35,.8);
  border-block:1px solid var(--lgray);
}
.cs-pillar{
  background:var(--sur-0);
  padding:clamp(1.75rem,3.2vw,2.6rem) clamp(1.5rem,2.6vw,2rem);
  transition:background .3s var(--ease);
}
.cs-pillar:hover{background:var(--sur-2)}
.cs-pillar-n{
  font-family:var(--serif);font-size:.875rem;font-weight:600;
  color:var(--gold);letter-spacing:.06em;
}
.cs-pillar h3{
  margin-top:.85rem;
  font-family:var(--serif);font-weight:600;
  font-size:1.1875rem;line-height:1.25;letter-spacing:-.01em;
  color:var(--off);
}
.cs-pillar p{margin-top:.6rem;font-size:.9375rem;line-height:1.68;color:var(--slate)}

/* ===================== PROSE + SIDE RAIL =====================
   The body copy runs as one measured editorial column with a sticky
   rail beside it, rather than the prose/photo pairing used elsewhere. */

.cs-body{background:var(--sur-1);padding-block:var(--pad)}
.cs-body-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.cs-prose{max-width:62ch}
/* The section heading matches the other inner pages (.lva-copy .h-xl,
   .wwa-h): the same fluid clamp instead of the flat 40px, the same
   tightened line-height, and the same small gap under the eyebrow. */
.cs-prose .h-xl{
  margin:.65rem 0 clamp(1.25rem,2.4vw,1.9rem);
  font-size:clamp(2rem,4.1vw,3.35rem);
  line-height:1.08;
  max-width:24ch;
}
/* :not(.eyebrow) keeps the body-copy rules from repainting the section
   eyebrow, which stays gold at eyebrow size like the hero's. */
/* Body copy matches .lva-copy p on the leadership page exactly — the same
   fluid size, line-height, bottom margin and charcoal. :not(.eyebrow) keeps
   these rules off the section eyebrow, which stays gold at eyebrow size. */
.cs-prose>p:not(.eyebrow){
  font-family:var(--sans);
  font-size:clamp(1rem,1.15vw,1.0625rem);
  line-height:1.75;
  color:var(--charcoal);
  margin:0 0 1.25rem;
  text-align:left;
}
/* The opening paragraph is set larger so the column has a clear entry point,
   on the same clamp the who-we-are purpose lede uses. */
.cs-prose>.h-xl+p{
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.68;
  color:var(--off);
}
.cs-prose>p:last-child{margin-bottom:0}

/* Pull-quote style plate carrying the "Our Focus" line. */
.cs-focus{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  background:var(--sur-2);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
}
.cs-focus-l{
  font-size:.75rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);
}
.cs-focus-t{
  margin-top:.85rem;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.35;letter-spacing:-.015em;
  color:var(--off);
  text-wrap:balance;
}

.cs-rail{
  position:sticky;top:calc(var(--hdr-h) + 2rem);
  display:grid;gap:1.5rem;
}
.cs-rail-card{
  padding:1.5rem;
  background:var(--sur-2);
  border:1px solid var(--lgray);
  border-radius:var(--r);
}
.cs-rail-k{
  font-family:var(--serif);font-weight:600;font-size:1.0625rem;color:var(--off);
  margin-bottom:1rem;
}
.cs-rail-list{display:grid;gap:.7rem}
.cs-rail-list li{
  display:flex;gap:.65rem;align-items:flex-start;
  font-size:.9375rem;line-height:1.5;color:var(--slate);
}
.cs-rail-list svg{width:1rem;height:1rem;flex:none;margin-top:.26rem;color:var(--gold)}
.cs-rail-card p{font-size:.9375rem;line-height:1.68;color:var(--slate);margin-bottom:1.2rem}

/* ===================== RESPONSIVE =====================
   Breakpoints mirror the base breakpoints above (1080 / 860 / 560) so the page
   changes shape at the same widths as the rest of the site. */

@media (max-width:1080px){
  .cs-body-grid{grid-template-columns:1fr}
  .cs-rail{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
}

@media (max-width:860px){
  .cs-prose{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .cs-pillar{transition:none}
}

/* ============================================================
   SHARED INNER PAGES — capabilities, industries, culture
   Reuses the global components above (.wwa-list, .wwa-cta, .lva-fig,
   .lva-vision, .ldr-card) wherever one fits, so these pages read as
   the same site as Who We Are and Leadership.
   ============================================================ */

/* ===================== BODY: PROSE + RAIL ===================== */

.ip-body{background:var(--sur-1);padding-block:var(--pad)}
.ip-body-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,21rem);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.ip-prose{max-width:62ch}
.ip-prose .eyebrow{margin-bottom:clamp(1.1rem,2vw,1.5rem)}
.ip-prose p:not(.eyebrow){
  font-size:clamp(1rem,1.15vw,1.0625rem);
  line-height:1.75;
  color:var(--charcoal);
  margin:0 0 1.25rem;
}
/* The opening paragraph is set in the serif at statement size, so a body of
   two or three paragraphs still has a clear point of entry. */
.ip-prose .ip-lead{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.25rem,2.1vw,1.6rem) !important;
  line-height:1.4 !important;letter-spacing:-.012em;
  color:var(--off) !important;
  margin-bottom:clamp(1.5rem,2.6vw,2rem) !important;
  text-wrap:pretty;
}
.ip-prose p:last-child{margin-bottom:0}

/* Numbered sub-sections (Risk & Compliance). */
.ip-sub + .ip-sub{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--lgray);
}
.ip-sub-h{
  display:flex;align-items:baseline;gap:1rem;
  margin:0 0 1.25rem;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.18;letter-spacing:-.018em;
  color:var(--off);
}
.ip-sub-h span{font-size:.55em;color:var(--gold);letter-spacing:.06em;flex:none}

.ip-rail{
  position:sticky;top:calc(var(--hdr-h) + var(--hdr-float) + 1.5rem);
  display:grid;gap:clamp(1.5rem,2.6vw,2rem);
}
/* The page being read is marked in the rail rather than dropped from it, so
   the list keeps the same five rows on every capability page. */
.wwa-list a[aria-current="page"]{
  border-color:rgba(184,149,74,.6);
  background:linear-gradient(180deg,rgba(184,149,74,.16),rgba(23,74,58,.3));
  color:var(--gold);
}

/* The focus card closes the section beneath both columns. */
.ip-body .lva-vision{margin-top:clamp(3rem,6vw,4.5rem)}

/* ===================== STEPS (Risk & Compliance) =====================
   The leadership principle cards, four across. */
.ip-steps{margin-top:clamp(1.75rem,3.5vw,2.5rem);grid-template-columns:repeat(4,minmax(0,1fr))}
.ip-steps .ldr-card{padding:clamp(1.4rem,2.2vw,1.85rem)}

/* ===================== EXPERTISE CARDS (industry pages) ===================== */

.ip-exp{background:var(--sur-1);padding-block:var(--pad)}
.ip-sec-hd{max-width:46ch;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.ip-sec-hd .h-xl{margin:.65rem 0 0;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1}
.ip-sec-hd .sec-sub{margin:1.1rem 0 0}

.ip-cards{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.ip-card{
  position:relative;
  display:flex;flex-direction:column;
  min-height:15rem;
  padding:clamp(1.5rem,2.4vw,2rem);
  background:var(--sur-2);
  border:1px solid var(--lgray);
  border-radius:calc(var(--r) * 2);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ip-card:hover,.ip-card:focus-visible{
  border-color:rgba(184,149,74,.45);
  transform:translateY(-4px);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.7);
}
.ip-card-n{
  font-family:var(--serif);font-weight:600;font-size:.875rem;
  letter-spacing:.06em;color:var(--gold);
}
.ip-card h3{
  margin:1rem 0 .6rem;
  font-family:var(--serif);font-weight:600;
  font-size:1.25rem;line-height:1.25;color:var(--off);
}
.ip-card p{font-size:.9375rem;line-height:1.6;color:var(--slate)}
.ip-card-go{
  margin-top:auto;padding-top:1.5rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:600;color:var(--gold);
}
.ip-card-go span{transition:transform .25s var(--ease)}
.ip-card:hover .ip-card-go span{transform:translateX(4px)}

/* ===================== OTHER INDUSTRIES ===================== */

/* A raised band so it never merges into the footer's --sur-0. */
.ip-more{background:var(--sur-2);padding-block:var(--pad)}
.ip-ind{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.ip-ind a{
  display:block;
  border:1px solid var(--lgray);
  border-radius:calc(var(--r) * 2);
  overflow:hidden;
  background:var(--sur-1);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.ip-ind a:hover,.ip-ind a:focus-visible{border-color:rgba(184,149,74,.5);transform:translateY(-4px)}
.ip-ind figure{margin:0;overflow:hidden;background:var(--sur-0)}
.ip-ind img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.9);
  transition:transform 1s var(--ease);
}
.ip-ind a:hover img{transform:scale(1.04)}
.ip-ind-t{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.35rem;
  font-family:var(--serif);font-weight:600;font-size:1.125rem;color:var(--off);
}
.ip-ind-t span{color:var(--gold);transition:transform .25s var(--ease)}
.ip-ind a:hover .ip-ind-t span{transform:translateX(4px)}

/* ===================== CULTURE VALUES ===================== */

.ip-vals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.ip-val{
  display:flex;align-items:center;gap:1rem;
  padding:clamp(1.25rem,2.2vw,1.6rem);
  background:var(--sur-2);
  border:1px solid var(--lgray);
  border-radius:calc(var(--r) * 2);
  font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1.3;color:var(--off);
  transition:border-color .3s var(--ease);
}
.ip-val:hover{border-color:rgba(184,149,74,.45)}
.ip-val .wwa-ic{width:44px;height:44px;border-radius:12px}
.ip-val .wwa-ic svg{width:22px;height:22px}

.ip-plate{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,4vw,3rem);
  border:1px solid rgba(184,149,74,.26);
  border-left:3px solid var(--gold);
  border-radius:calc(var(--r) + 4px);
  background:linear-gradient(120deg,rgba(184,149,74,.08),rgba(23,74,58,.25));
}
.ip-plate p{
  margin:0;max-width:64ch;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.65;color:var(--off);
}
.ip-plate-act{display:flex;flex-wrap:wrap;gap:.75rem}

/* ===================== RESPONSIVE =====================
   Breakpoints mirror the base styles (1080 / 980 / 860 / 620). */

@media (max-width:1180px){
  .ip-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .ip-body-grid{grid-template-columns:1fr}
  .ip-prose{max-width:none}
  .ip-rail{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));align-items:start}
  .ip-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .ip-ind{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-vals,.ip-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ip-plate{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ip-steps,.ip-ind,.ip-vals,.ip-cards{grid-template-columns:1fr}
  .ip-card{min-height:0}
}

@media (prefers-reduced-motion:reduce){
  .ip-card,.ip-ind a,.ip-ind img,.ip-val{transition:none}
}