/* ==========================================================================
   Business Performance Consultancy — design system
   Direction: institutional editorial. Deep teal ground, brass rules, warm
   off-white paper, report-style numbering. Display: Manrope. Body: Archivo.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#12211f;
  --ink-2:#1a2f2c;
  --ink-3:#0b1615;
  --teal:#0d4b47;
  --teal-2:#12615b;
  --teal-bright:#1c8a80;
  --gold:#d9a441;
  --gold-2:#e8c477;
  --gold-deep:#a87a24;

  --paper:#f4f4f2;
  --paper-2:#eceae5;
  --paper-3:#e2e0d9;
  --white:#ffffff;

  --muted:#5c6b68;
  --muted-2:#8b9895;
  --line:rgba(18,33,31,.15);
  --line-strong:rgba(18,33,31,.28);
  --line-gold:rgba(217,164,65,.42);

  --on-dark:#f2f5f3;
  --on-dark-muted:rgba(242,245,243,.66);
  --on-dark-line:rgba(242,245,243,.17);

  /* materials — surfaces are lit from above rather than flat fills */
  --surface-paper:linear-gradient(180deg,#fbfbfa 0%,#f4f4f2 60%,#eeece8 100%);
  --surface-paper-2:linear-gradient(180deg,#efede8 0%,#eceae5 100%);
  --surface-dark:linear-gradient(180deg,#0f5852 0%,#0d4b47 52%,#0a3f3b 100%);
  --surface-dark-2:linear-gradient(180deg,#0e534d 0%,#0a423e 100%);
  --surface-footer:linear-gradient(180deg,#0b423e 0%,#08332f 100%);
  --brass:linear-gradient(135deg,#f0d391 0%,#d9a441 46%,#b8862c 100%);
  --ring-paper:inset 0 1px 0 rgba(255,255,255,.75);
  --ring-dark:inset 0 1px 0 rgba(255,255,255,.07);

  --font-display:"Manrope","Archivo",-apple-system,"Segoe UI",sans-serif;
  --font-body:"Archivo",-apple-system,"Segoe UI",sans-serif;

  --wrap:1240px;
  /* fixed header height — brand strip (34px) plus the nav row */
  --hdr:96px;

  /* the capability book. --bk-design is the width its pages were laid out for; the whole spread
     scales off that (see the .pg rules), so the design reproduces exactly at any size. --bk-reserve
     is the vertical room the book leaves for everything that shares the screen with it — the fixed
     header, the section heading above and the hint line below — and is the only thing keeping the
     whole object inside one screen. It tracks the viewport so the book fills a tall window and
     still clears the fold on a short one. */
  --bk-design:1442px;
  --bk-reserve:clamp(14rem,35vh,19rem);

  --gut:clamp(1.35rem,4.2vw,3.75rem);
  --radius:3px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow-s:0 1px 2px rgba(18,33,31,.05),0 7px 20px -12px rgba(18,33,31,.24);
  --shadow-m:0 30px 60px -34px rgba(18,33,31,.44),0 4px 12px -6px rgba(18,33,31,.12);
  --shadow-l:0 62px 110px -48px rgba(18,33,31,.56),0 6px 18px -8px rgba(18,33,31,.14);
}
@media(max-width:767px){:root{--hdr:84px}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--paper);
  background-image:linear-gradient(180deg,#fafaf8 0%,#f4f4f2 38%,#eeece8 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.7;
  font-weight:400;
  letter-spacing:-.004em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
::selection{background:var(--gold);color:var(--ink)}

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

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.06;
  letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(2.6rem,1.5rem + 5.2vw,5.1rem);letter-spacing:-.038em}
h2{font-size:clamp(2rem,1.3rem + 2.9vw,3.5rem);letter-spacing:-.034em}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.16}
h4{font-size:1.0625rem;font-family:var(--font-body);font-weight:600;letter-spacing:-.01em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.09rem,1.02rem + .42vw,1.34rem);line-height:1.62;color:var(--muted);max-width:62ch}
.dark .lead{color:var(--on-dark-muted)}
strong{font-weight:600}

.eyebrow{
  font-family:var(--font-body);font-size:.656rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:1rem;
}
.eyebrow::before{content:"";width:46px;height:1px;flex:none;
  background:linear-gradient(90deg,rgba(217,164,65,0),var(--gold))}
.dark .eyebrow{color:var(--gold-2)}
.dark .eyebrow::before{background:linear-gradient(90deg,rgba(232,196,119,0),var(--gold-2))}

.serif-accent{font-weight:700;color:var(--gold-deep)}
.dark .serif-accent{color:var(--gold-2)}

.section-num{
  font-family:var(--font-body);font-size:.688rem;font-weight:600;letter-spacing:.22em;
  color:var(--muted-2);font-variant-numeric:tabular-nums;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(5rem,3.2rem + 8.6vw,9.5rem);position:relative}
.dark{background:var(--teal);background-image:var(--surface-dark);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:var(--on-dark)}
.paper-2{background:var(--paper-2);background-image:var(--surface-paper-2)}
.rule{height:1px;background:var(--line);border:0}
.dark .rule{background:var(--on-dark-line)}

.section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;margin-bottom:clamp(2.5rem,5vw,4.25rem)}
.section-head .title-row{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:baseline;justify-content:space-between}
@media(min-width:900px){
  .section-head.split{grid-template-columns:1.15fr .85fr;align-items:end;gap:clamp(2rem,5vw,5rem)}
  .section-head.split .lead{margin-bottom:.4rem}
}

/* ---------- grain + atmosphere ---------- */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.3;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.dark.grain::after{mix-blend-mode:screen;opacity:.2}
.section > *{position:relative;z-index:2}

/* ---------- chevron motif ---------- */
.chevrons{display:inline-flex;flex-direction:column;gap:4px;width:34px}
.chevrons span{display:block;height:9px;background:var(--gold);
  clip-path:polygon(50% 0,100% 62%,100% 100%,50% 40%,0 100%,0 62%)}
.chevron-rule{display:flex;gap:5px}
.chevron-rule i{display:block;width:30px;height:2px;background:var(--gold);opacity:.85}
.chevron-rule i:nth-child(2){width:20px}
.chevron-rule i:nth-child(3){width:11px}

/* ==========================================================================
   Media — photography
   Frames from different photographers are graded into one register: pulled
   toward grey, contrast lifted, then a teal wash multiplied over the top. The
   set reads as one commissioned shoot rather than a stock library, and the
   grade stays tunable here instead of being baked into the files.
   ========================================================================== */
.media{position:relative;display:block;overflow:hidden;isolation:isolate;
  background:var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-m),0 0 0 1px var(--line-gold)}
.media img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.56) contrast(1.08) brightness(.92)}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(198deg,rgba(13,75,71,.2) 0%,rgba(8,51,47,.3) 46%,rgba(8,51,47,.62) 100%)}

.band{aspect-ratio:21/9;margin-top:clamp(2.6rem,5vw,4.4rem)}
@media(max-width:700px){.band{aspect-ratio:16/10}}

/* side panel in each service column */
.detail-aside{display:grid;gap:clamp(1.4rem,2.6vw,2rem);align-content:start}
.svc-media{aspect-ratio:3/2;max-width:440px;margin-top:.2rem}
@media(min-width:900px){.svc-media{max-width:none}}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);--bd:var(--ink);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.06rem 1.8rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.78125rem;font-weight:600;letter-spacing:.135em;text-transform:uppercase;
  border-radius:var(--radius);position:relative;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(18,33,31,.16);
  transition:color .5s var(--ease),border-color .5s var(--ease),transform .45s var(--ease),
    box-shadow .5s var(--ease)
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);
  transform:translateY(101%);transition:transform .55s var(--ease-out)}
.btn:hover{color:var(--ink);border-color:var(--gold);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 32px -18px rgba(217,164,65,.75)}
.btn:hover::before{transform:translateY(0)}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--gold{--bg:var(--brass);--fg:var(--ink);--bd:rgba(168,122,36,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(18,33,31,.18)}
.btn--gold::before{background:var(--ink)}
.btn--gold:hover{color:var(--paper);border-color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 32px -18px rgba(18,33,31,.7)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-strong);box-shadow:none}
.btn--ghost:hover{color:var(--ink);box-shadow:none}
/* .hero is on-dark but is not .dark, so ghost buttons inside it need the same tokens */
.dark .btn--ghost,.hero .btn--ghost{--fg:var(--on-dark);--bd:var(--on-dark-line)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover{color:var(--ink)}
.btn--onDark{--bg:transparent;--fg:var(--on-dark);--bd:var(--on-dark-line);box-shadow:none}

.link-arrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78125rem;
  font-weight:600;letter-spacing:.135em;text-transform:uppercase;color:var(--ink);
  padding-bottom:.35rem;border-bottom:1px solid var(--line-strong);transition:color .4s,border-color .4s}
.link-arrow svg{transition:transform .4s var(--ease)}
.link-arrow:hover{color:var(--gold-deep);border-color:var(--gold)}
.link-arrow:hover svg{transform:translateX(5px)}
.dark .link-arrow{color:var(--on-dark);border-color:var(--on-dark-line)}
.dark .link-arrow:hover{color:var(--gold-2);border-color:var(--gold-2)}

/* ==========================================================================
   Header — white two-row bar, fixed at every scroll position
   ========================================================================== */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--white);
  transition:box-shadow .5s var(--ease)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line)}
.header.is-solid{box-shadow:0 18px 40px -32px rgba(18,33,31,.5)}

/* brand statement strip pinned to the top-right of the bar, so the lockup can
   occupy the full height of the header as in the reference */
.brand-strip{position:absolute;top:0;right:var(--gut);height:28px;overflow:hidden;
  transition:height .5s var(--ease),opacity .35s var(--ease)}
.header.is-solid .brand-strip{height:0;opacity:0}
.brand-strip-inner{display:flex;justify-content:flex-end;align-items:center;height:28px;
  font-size:.5625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2)}
.brand-strip-inner span+span::before{content:"|";color:var(--gold);margin:0 .8rem;font-weight:400}
@media(max-width:767px){.brand-strip{display:none}}

.header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;height:84px;transition:height .5s var(--ease)}
.header.is-solid .header-inner{height:70px}

.brand{display:flex;align-items:center;gap:.85rem;color:var(--ink);flex:none}
/* the uploaded lockup is shown whole, exactly as supplied — no redraw, no crop */
.brand-mark{display:block;height:58px;width:auto;overflow:visible;flex:none;
  transition:height .5s var(--ease)}
.brand-mark img{display:block;height:100%;width:auto;max-width:none}
.header.is-solid .brand-mark{height:46px}
.footer .brand-mark{height:74px}
/* the lockup carries its own wordmark and .brand already has an aria-label */
.brand-text{display:none}

@media(max-width:480px){
  .brand-mark{height:48px}
  .header.is-solid .brand-mark{height:40px}
  /* the footer mark shares its line with the tagline, so it steps down with it */
  .footer .brand-mark{height:56px}
}

.nav{display:none;align-items:center;gap:.35rem}
@media(min-width:768px){.nav{display:flex}}
.nav a{position:relative;padding:.55rem .9rem;font-size:.8125rem;font-weight:600;
  letter-spacing:.01em;color:var(--ink);transition:color .3s}
.nav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.18rem;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav a:hover{color:var(--gold-deep)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* the mark is a 22px stack of hairlines, but the button itself still has to be a comfortable
   thumb target — the extra box is padding, so nothing about the drawn icon changes. */
/* align-content:center matters — without it the three rows stretch to fill the 44px box, the
   hairlines end up ~15px apart instead of 6.5px, and the open-state ±6.5px shift leaves the two
   arms of the cross stranded apart as a ">" chevron rather than meeting as an X. */
.burger{display:grid;gap:5px;min-width:44px;min-height:44px;box-sizing:border-box;place-items:center;align-content:center}
@media(min-width:768px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:99;background:var(--teal);
  background-image:var(--surface-dark);color:var(--on-dark);
  padding:7rem var(--gut) 3rem;display:flex;flex-direction:column;gap:.25rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-out);overflow-y:auto}
.mobile-nav.open{clip-path:inset(0 0 0 0)}
.mobile-nav a{font-family:var(--font-display);font-size:clamp(1.7rem,1.2rem + 2.6vw,2.6rem);
  font-weight:500;padding:.55rem 0;border-bottom:1px solid var(--on-dark-line);
  display:flex;justify-content:space-between;align-items:center;color:var(--on-dark);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-nav.open a{opacity:1;transform:none}
.mobile-nav.open a:nth-child(1){transition-delay:.12s}
.mobile-nav.open a:nth-child(2){transition-delay:.18s}
.mobile-nav.open a:nth-child(3){transition-delay:.24s}
.mobile-nav.open a:nth-child(4){transition-delay:.3s}
.mobile-nav.open a:nth-child(5){transition-delay:.36s}
.mobile-nav.open a:nth-child(6){transition-delay:.42s}
.mobile-nav a small{font-family:var(--font-body);font-size:.75rem;letter-spacing:.2em;
  color:var(--gold-2);font-weight:600}
.mobile-nav .m-foot{margin-top:auto;padding-top:2.5rem;display:grid;gap:.6rem;
  font-size:.875rem;color:var(--on-dark-muted)}
.mobile-nav .m-foot a{font-family:var(--font-body);font-size:.9rem;border:0;padding:.1rem 0;
  font-weight:400;color:var(--on-dark);display:inline}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--ink);background-image:var(--surface-dark);
  color:var(--on-dark);overflow:hidden;
  padding-top:calc(var(--hdr) + clamp(3.5rem,7vw,6.5rem));padding-bottom:clamp(4rem,8vw,7rem)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(125% 90% at 50% -10%,rgba(28,138,128,.09),transparent 48%),
    radial-gradient(150% 100% at 50% 118%,rgba(0,0,0,.52),transparent 60%)}
.hero-bg .glow{position:absolute;z-index:1;width:min(70vw,860px);aspect-ratio:1;border-radius:50%;
  right:-14%;top:-32%;
  background:radial-gradient(circle at 50% 50%,rgba(28,138,128,.4),rgba(28,138,128,0) 66%)}
.hero-bg .glow2{position:absolute;z-index:1;width:min(52vw,620px);aspect-ratio:1;border-radius:50%;
  left:-18%;bottom:-34%;
  background:radial-gradient(circle at 50% 50%,rgba(217,164,65,.2),rgba(217,164,65,0) 68%)}
.hero-bg .grid-lines{position:absolute;inset:0;opacity:.42;
  background-image:linear-gradient(90deg,var(--on-dark-line) 1px,transparent 1px),
    linear-gradient(0deg,var(--on-dark-line) 1px,transparent 1px);
  background-size:clamp(76px,9.5vw,140px) clamp(76px,9.5vw,140px);
  -webkit-mask-image:linear-gradient(105deg,transparent 32%,#000 78%);
  mask-image:linear-gradient(105deg,transparent 32%,#000 78%)}

/* full-bleed photo behind inner-page heroes. .hero-bg::before is the scrim —
   weighted to the left so the h1 and lead keep their contrast, opening up on
   the right where the composition has room. */
.hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.44) contrast(1.05) brightness(.72)}
.hero-bg.has-photo::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(94deg,rgba(8,51,47,.94) 0%,rgba(8,51,47,.86) 34%,
    rgba(8,51,47,.62) 66%,rgba(8,51,47,.34) 100%)}
/* narrow screens stack the copy across the full width, so the scrim goes flat */
@media(max-width:760px){
  .hero-bg.has-photo::before{background:linear-gradient(180deg,rgba(8,51,47,.86),rgba(8,51,47,.92))}
}

.hero-grid{position:relative;z-index:3;display:grid;gap:clamp(3rem,6vw,4.5rem);align-items:center}
@media(min-width:1040px){
  .hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(2rem,5vw,4.5rem)}
}

.pillars{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;margin-bottom:1.9rem;
  font-size:clamp(.5rem,.44rem + .08vw,.625rem);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-2)}
.pillars i{width:1px;height:11px;background:var(--on-dark-line)}
@media(max-width:600px){
  .pillars{gap:.3rem .85rem;font-size:.5625rem;letter-spacing:.14em}
  .pillars i{display:none}
}
@media(max-width:430px){
  .pillars{display:block;text-wrap:balance;word-spacing:1rem;line-height:1.95}
}

.hero h1{margin-bottom:1.6rem;position:relative}
.hero h1 .l1{display:block;color:var(--on-dark)}
.hero h1 .l2{display:block;font-style:italic;font-weight:300;color:var(--gold-2)}
.hero-copy{font-size:clamp(1.03rem,.98rem + .38vw,1.22rem);color:var(--on-dark-muted);
  max-width:54ch;margin-bottom:2.4rem}
.hero-copy b{color:var(--on-dark);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

.hero-meta{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:3.2rem;padding-top:1.9rem;
  border-top:1px solid var(--on-dark-line)}
.hero-meta div{display:flex;flex-direction:column;gap:.25rem}
.hero-meta dt{font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.hero-meta dd{font-family:var(--font-display);font-size:1.35rem;font-weight:500;color:var(--on-dark)}

/* hero visual composition */
.hero-visual{position:relative;min-height:min(74vw,540px)}
@media(min-width:1040px){.hero-visual{min-height:600px}}
.arc{position:absolute;inset:auto 0 0 auto;width:min(94%,520px);height:auto;opacity:.82;z-index:1}
.portrait{position:absolute;right:4%;top:0;width:min(66%,340px);z-index:3;
  border:1px solid rgba(232,196,119,.38);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-l),0 0 0 1px rgba(18,33,31,.35);transform:rotate(1.6deg);
  transition:transform .9s var(--ease-out),box-shadow .9s var(--ease-out)}
.portrait:hover{transform:rotate(0deg) translateY(-7px);box-shadow:var(--shadow-l),0 0 0 1px rgba(232,196,119,.3)}
.portrait img{width:100%;aspect-ratio:1102/1427;object-fit:cover;
  filter:saturate(.6) contrast(1.06) brightness(.94)}
.portrait::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,33,31,0) 52%,rgba(18,33,31,.6));pointer-events:none}

.float-card{position:absolute;left:0;bottom:12%;z-index:4;width:min(76%,330px);
  background:var(--paper);background-image:var(--surface-paper);color:var(--ink);
  border-radius:var(--radius);padding:1.6rem 1.7rem 1.7rem;
  box-shadow:var(--shadow-l),var(--ring-paper);border-top:3px solid var(--gold)}
.float-card .fc-label{font-size:.5625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.7rem}
.float-card .fc-value{font-family:var(--font-display);font-size:2.5rem;font-weight:600;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.float-card .fc-sub{font-size:.8125rem;color:var(--muted);margin-top:.55rem;line-height:1.45}
.float-card .fc-bars{display:flex;gap:3px;margin-top:1rem;align-items:flex-end;height:26px}
.float-card .fc-bars i{flex:1;background:var(--teal);opacity:.85;border-radius:1px 1px 0 0}
.float-card .fc-bars i:nth-child(1){height:38%}
.float-card .fc-bars i:nth-child(2){height:56%}
.float-card .fc-bars i:nth-child(3){height:44%}
.float-card .fc-bars i:nth-child(4){height:78%;background:var(--gold)}
.float-card .fc-bars i:nth-child(5){height:100%;background:var(--ink)}

.seal{position:absolute;left:8%;top:6%;z-index:5;width:104px;height:104px;border-radius:50%;
  display:grid;place-content:center;text-align:center;background:rgba(18,33,31,.66);
  border:1px solid var(--line-gold);backdrop-filter:blur(8px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 34px -22px rgba(0,0,0,.7);
  font-size:.5625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);line-height:1.5;padding:.5rem}
.seal b{display:block;font-family:var(--font-display);font-size:1.65rem;font-weight:600;
  letter-spacing:-.02em;color:var(--on-dark);margin-bottom:.15rem}

/* ==========================================================================
   Marquee — regulatory frameworks
   ========================================================================== */
.marquee{background:var(--ink-2);background-image:var(--surface-dark-2);
  border-top:1px solid var(--on-dark-line);
  border-bottom:1px solid var(--on-dark-line);overflow:hidden;position:relative;padding-block:1.15rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 62s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:1.15rem;padding-inline:1.5rem;
  font-size:.71875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-muted);white-space:nowrap}
.marquee-track span::after{content:"";width:4px;height:4px;background:var(--gold);
  transform:rotate(45deg);flex:none;opacity:.8}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   Intro / statement
   ========================================================================== */
.statement{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:980px){.statement{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(3rem,6vw,6rem)}}
.statement .body p+p{margin-top:1.15rem}
.statement .body{font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);color:var(--muted)}
.statement .body .drop{color:var(--ink)}

.stat-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2.75rem;box-shadow:var(--shadow-s)}
@media(min-width:640px){.stat-inline{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat-inline div{background:var(--paper);background-image:var(--surface-paper);
  box-shadow:var(--ring-paper);padding:1.5rem 1.4rem}
.stat-inline dt{font-size:1.7rem;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.035em;color:var(--teal);font-variant-numeric:tabular-nums;line-height:1}
.stat-inline dd{font-size:.75rem;color:var(--muted);margin-top:.55rem;line-height:1.45}

/* ==========================================================================
   Sectors
   ========================================================================== */
.sectors{display:grid;gap:1px;background:var(--on-dark-line);border:1px solid var(--on-dark-line);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.sectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sector{background:var(--ink);background-image:var(--surface-dark-2);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden;
  box-shadow:var(--ring-dark);
  transition:background-image .55s var(--ease)}
.sector:hover{background-image:linear-gradient(180deg,#0e534d 0%,#0a423e 100%)}
.sector .s-num{font-size:.625rem;font-weight:600;letter-spacing:.2em;color:var(--gold-2);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:1.6rem}
.sector h3{font-family:var(--font-body);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;
  margin-bottom:.55rem;color:var(--on-dark)}
.sector p{font-size:.875rem;color:var(--on-dark-muted);line-height:1.55}
.sector .underline{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.sector:hover .underline{transform:scaleX(1)}

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-s)}
@media(min-width:760px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc{background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  padding:clamp(1.85rem,3.4vw,2.8rem);display:flex;flex-direction:column;
  gap:1.15rem;position:relative;transition:background .55s var(--ease),box-shadow .55s var(--ease)}
.svc::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.svc:hover{background:var(--white);box-shadow:var(--ring-paper),inset 0 0 0 1px rgba(217,164,65,.16)}
.svc:hover::after{transform:scaleX(1)}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.svc-icon{width:52px;height:52px;flex:none;color:var(--teal);padding:13px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(13,75,71,.05));
  box-shadow:var(--ring-paper)}
.svc-icon svg{width:100%;height:100%}
.svc:hover .svc-icon{border-color:var(--line-gold)}
.svc .svc-num{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
.svc h3{font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .55vw,1.5rem);line-height:1.14}
.svc p{font-size:.9rem;color:var(--muted);line-height:1.6}
.svc ul{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:auto;padding-top:.4rem}
.svc li{font-size:.6875rem;font-weight:500;letter-spacing:.04em;color:var(--teal);
  border:1px solid var(--line-strong);border-radius:100px;padding:.3rem .7rem;
  transition:border-color .35s,color .35s,background .35s}
.svc:hover li{border-color:var(--line-gold)}
.svc li:hover{background:var(--paper-2)}
.svc-wide{grid-column:1/-1}
.svc-wide .wide-body{display:grid;gap:1.5rem}
@media(min-width:900px){.svc-wide .wide-body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,4rem);align-items:center}}
.svc-wide ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.55rem .9rem}
.svc-wide li{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.5rem 0;
  display:flex;gap:.6rem;align-items:baseline}
.svc-wide li::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;
  transform:rotate(45deg) translateY(-1px)}

/* ==========================================================================
   KPI band
   ========================================================================== */
.kpi{display:grid;gap:1px;background:var(--on-dark-line);border-top:1px solid var(--on-dark-line);
  border-bottom:1px solid var(--on-dark-line);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi-tile{background:var(--ink);background-image:var(--surface-dark-2);
  box-shadow:var(--ring-dark);padding:clamp(1.9rem,3.6vw,3rem) clamp(1.3rem,2.6vw,2.2rem)}
.kpi-fig{font-family:var(--font-display);font-weight:600;line-height:.92;letter-spacing:-.045em;
  font-size:clamp(2.9rem,2rem + 3.6vw,4.4rem);color:var(--on-dark);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.1rem}
.kpi-fig .unit{font-size:.42em;font-weight:500;color:var(--gold-2);letter-spacing:-.01em}
.kpi-label{font-size:.8125rem;font-weight:600;color:var(--on-dark);margin-top:1rem;letter-spacing:-.005em}
.kpi-note{font-size:.75rem;color:var(--on-dark-muted);margin-top:.35rem;line-height:1.45}

/* ==========================================================================
   Why / differentiators
   ========================================================================== */
.diff{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-s)}
@media(min-width:700px){.diff{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.diff{grid-template-columns:repeat(2,minmax(0,1fr))}}
.diff-item{background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  padding:clamp(1.5rem,2.8vw,2.1rem);display:flex;gap:1.1rem;
  align-items:flex-start;transition:background .5s var(--ease)}
.diff-item:hover{background:var(--white)}
.diff-item .d-num{font-family:var(--font-body);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  color:var(--gold-deep);padding-top:.28rem;font-variant-numeric:tabular-nums;flex:none}
.diff-item h4{font-size:1rem;margin-bottom:.3rem}
.diff-item p{font-size:.84rem;color:var(--muted);line-height:1.55}

/* ==========================================================================
   Leadership
   ========================================================================== */
.leader{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){.leader{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(3rem,6vw,5.5rem)}}
.leader-card{background:var(--paper-2);background-image:var(--surface-paper-2);
  border:1px solid var(--line);box-shadow:var(--shadow-m),var(--ring-paper);
  padding:clamp(1.9rem,3.6vw,2.8rem);position:sticky;top:104px;align-self:start}
.leader-card h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);margin-bottom:.35rem}
.leader-photo{margin:0 0 1.7rem;position:relative;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-m),var(--ring-paper)}
.leader-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 24%}
.leader-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) 50%,rgba(217,164,65,0) 100%)}
.leader-card .role{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:1.6rem}
.leader-card .cred{border-top:1px solid var(--line);padding-top:1.3rem;margin-top:1.3rem;
  display:grid;gap:.55rem}
.leader-card .cred .k{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2)}
.leader-card .cred .v{font-size:.9rem;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips span{font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--teal);
  background:rgba(13,75,71,.07);border:1px solid rgba(13,75,71,.16);padding:.35rem .7rem;border-radius:100px}
/* inside the leader card the tags run the full column width, and an institution name that needs
   two lines then swells a 100px pill into a tall stadium that no longer matches the one-line ones
   above and below it. A fixed radius reads as a row whatever the name's length. */
.leader-card .chips span{border-radius:10px}

/* ---- leadership teaser (home page) ---------------------------------------
   the same leader card as the about page, set beside the copy instead of on
   its own, so the home page can point at the full profile */
.rx-lead{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){
  .rx-lead{grid-template-columns:minmax(0,22rem) minmax(0,1fr);
    gap:clamp(2.6rem,5.5vw,5rem);align-items:center}
}
.rx-lead .leader-card{position:static;margin:0}
.rx-lead .leader-photo{margin-bottom:1.4rem}
.rx-lead .chips{margin-top:.2rem}
.rx-lead-copy{display:grid;gap:1.1rem;justify-items:start}
.rx-lead-copy h2{max-width:18ch}
.rx-lead-lede{font-size:1rem;line-height:1.65;color:var(--muted);max-width:54ch}
.rx-lead-facts{list-style:none;margin:.3rem 0 0;padding:0;width:100%;max-width:36rem;
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rx-lead-facts li{background:var(--paper-2);padding:.8rem 1.1rem;font-size:.875rem;
  line-height:1.5;color:var(--muted);display:flex;gap:.55rem;align-items:baseline}
.rx-lead-facts b{color:var(--ink);font-weight:700;white-space:nowrap}

.qual-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.qual-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qual-list li:last-child:nth-child(odd){grid-column:1/-1}}
.qual-list li{background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  padding:1.15rem 1.3rem;font-size:.875rem;display:flex;
  gap:.7rem;align-items:baseline;line-height:1.45}
.qual-list li::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;
  transform:rotate(45deg) translateY(-1px)}
.subhead{font-size:.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:1.1rem}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{position:relative;background:var(--ink);background-image:var(--surface-dark);
  color:var(--on-dark);overflow:hidden}
.cta .cta-inner{border:1px solid var(--on-dark-line);
  background:linear-gradient(180deg,rgba(242,245,243,.035),rgba(242,245,243,0) 55%);
  box-shadow:var(--ring-dark),inset 0 0 80px -40px rgba(28,138,128,.5);
  padding:clamp(2.6rem,5.2vw,4.8rem);
  display:grid;gap:2.2rem;position:relative;z-index:3}
@media(min-width:900px){.cta .cta-inner{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  align-items:center;gap:clamp(2rem,5vw,4.5rem)}}
.cta h2{max-width:20ch}
.cta .cta-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.cta-glow{position:absolute;width:min(60vw,700px);aspect-ratio:1;border-radius:50%;
  right:-10%;bottom:-40%;background:radial-gradient(circle,rgba(217,164,65,.22),transparent 66%);
  pointer-events:none;z-index:1}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--ink-3);background-image:var(--surface-footer);
  color:var(--on-dark-muted);
  /* the bottom padding clears the floating chat launcher, which sits over the
     last row of the footer when the page is scrolled to the end */
  padding-block:clamp(4rem,6.5vw,6rem) clamp(5rem,6.5vw,6rem);
  position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}
.footer::after{content:"BPC";position:absolute;right:-.05em;bottom:-.36em;z-index:0;
  font-family:var(--font-display);font-weight:600;font-size:clamp(9rem,24vw,22rem);
  line-height:.68;letter-spacing:-.07em;color:rgba(242,245,243,.028);
  pointer-events:none;user-select:none}
.footer .wrap{position:relative;z-index:1}
.footer-top{display:grid;gap:clamp(1.8rem,3vw,2.6rem);padding-bottom:clamp(2.2rem,4vw,3rem);
  border-bottom:1px solid var(--on-dark-line)}
.footer .brand{display:flex}
/* lockup, tagline and social share one band: the mark sits beside the tagline
   rather than above it, so the left column has no empty pocket under the logo */
.footer-intro{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.6rem)}
@media(min-width:900px){
  .footer-top{grid-template-columns:minmax(0,1fr) auto;align-items:center;
    padding-bottom:clamp(2.2rem,3.4vw,3rem)}
}
/* the divider and the tagline sit on one line, as in the reference */
.foot-tag{display:flex;align-items:center;gap:1.4rem}
.foot-tag i{width:1px;align-self:stretch;min-height:3.2rem;background:var(--on-dark-line);flex:none}
.foot-tag p{font-family:var(--font-display);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  font-weight:500;line-height:1.26;letter-spacing:-.02em;color:var(--on-dark)}
.foot-tag b{font-weight:800;color:var(--gold-2)}
/* below this the mark and the tagline can no longer share a line without the
   tagline breaking mid-phrase, so they stack and the divider turns horizontal */
@media(max-width:400px){
  .footer-intro{flex-direction:column;align-items:flex-start;gap:1.3rem}
  .foot-tag{flex-direction:column;align-items:flex-start;gap:1rem}
  .foot-tag i{width:44px;min-height:1px;height:1px}
}

.foot-social{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.foot-social-h{font-family:var(--font-body);font-size:.6875rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.foot-social-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
@media(min-width:900px){.foot-social{border-left:1px solid var(--on-dark-line);
  padding-left:clamp(1.2rem,2vw,2.4rem)}}
.foot-social-row a{display:grid;place-items:center;width:44px;height:44px;color:var(--on-dark);
  transition:color .35s var(--ease),transform .35s var(--ease-out)}
.foot-social-row a svg{width:20px;height:20px}
.foot-social-row a:hover,.foot-social-row a:focus-visible{color:var(--gold-2);transform:translateY(-2px)}

/* sitemap columns — Company / Services / Sectors / Contact, each headed by a
   gold rule so the block reads as a table rather than a band of loose links */
.footer-cols{display:grid;gap:clamp(2.2rem,3.4vw,2.9rem);
  padding-top:clamp(2.2rem,3.6vw,3rem);padding-bottom:clamp(2.6rem,4vw,3.4rem);
  border-bottom:1px solid var(--on-dark-line)}
@media(min-width:375px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.footer-cols{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.6rem,3vw,3.4rem)}}
.foot-col-h{font-family:var(--font-body);font-size:.6875rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);
  padding-bottom:.85rem;margin-bottom:1.15rem;border-bottom:1px solid var(--line-gold)}
.foot-col ul{list-style:none;display:grid;gap:.6rem}
/* the sitemap rows are 17–20px of text on a 9.6px gap — legible, but tight under a thumb. On
   phones the columns are two-up and the footer stacks anyway, so there is vertical room to
   spend; the looser rhythm also reads as deliberate air rather than padding. */
@media(max-width:600px){.foot-col ul{gap:.85rem}}
.foot-col a{display:inline-block;font-size:.875rem;line-height:1.45;color:var(--on-dark-muted);
  transition:color .3s var(--ease),transform .3s var(--ease-out)}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--gold-2);transform:translateX(3px)}

/* contact column — the icon rows carry the same gold discs as the top band */
.foot-col-contact li{display:flex;align-items:flex-start;min-width:0}
.foot-col-contact a,.fc-static{display:flex;align-items:center;gap:.75rem;min-width:0;
  font-size:.8125rem;color:var(--on-dark);transition:color .3s var(--ease)}
.foot-col-contact a:hover,.foot-col-contact a:focus-visible{color:var(--gold-2);transform:none}
.foot-col-contact svg{width:27px;height:27px;padding:5.5px;box-sizing:border-box;flex:none;
  color:var(--ink);background:var(--gold);border-radius:100px}
.foot-col-contact span{min-width:0;overflow-wrap:anywhere}
/* two columns at this width leave the contact rows ~145px of text, so the
   address would break mid-word — step the discs and type down instead */
@media(max-width:600px){
  .foot-col-contact a,.fc-static{font-size:.75rem;gap:.55rem}
  .foot-col-contact svg{width:22px;height:22px;padding:5px}
}
@media(max-width:429px){
  .foot-col-contact svg{display:none}
  .foot-col-contact a,.fc-static{gap:0}
}

.footer-bottom{display:grid;gap:1.5rem 2rem;
  padding-top:clamp(1.6rem,2.6vw,2.3rem);font-size:.8125rem}
@media(min-width:900px){.footer-bottom{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.fb-info{display:grid;gap:.8rem}
.fb-copy{color:var(--on-dark-muted)}
.fb-statement{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark)}
/* each separator belongs to the word it precedes, so a line break can never strand one at the end
   of a line the way four loose words and three loose dividers do. The glyph is the brief's own —
   a gold pipe, the same mark the header strip and the splash set the statement with. */
.fb-statement span{display:inline-flex;align-items:center;gap:.9rem}
.fb-statement span+span::before{content:"|";color:var(--gold);font-weight:400;flex:none}
/* on a phone the single row would wrap and leave "PERFORMANCE |" hanging. Two balanced lines with
   the pipes standing as column rules read as a statement rather than a spill. */
@media(max-width:600px){
  .fb-statement{display:grid;grid-template-columns:max-content max-content;
    column-gap:clamp(.9rem,3.2vw,1.7rem);row-gap:.5rem}
  .fb-statement span{gap:.55rem}
  .fb-statement span:nth-child(3)::before{content:none}
}
.fb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.7rem}
.fb-top{display:inline-flex;align-items:center;gap:.5rem;color:var(--on-dark-muted);
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s var(--ease)}
.fb-top svg{transition:transform .35s var(--ease-out)}
.fb-top:hover,.fb-top:focus-visible{color:var(--gold-2)}
.fb-top:hover svg{transform:translateY(-3px)}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem}
.footer-legal i{color:var(--muted-2);font-style:normal}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero{background:var(--ink);background-image:var(--surface-dark);
  color:var(--on-dark);position:relative;overflow:hidden;
  padding-top:calc(var(--hdr) + clamp(3rem,7vw,5.5rem));padding-bottom:clamp(3.25rem,6vw,5.5rem)}
/* the photo sits in an absolutely-positioned .hero-bg, so lift the copy above it */
.page-hero > .wrap{position:relative;z-index:3}
.page-hero .crumbs{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-muted);display:flex;gap:.6rem;align-items:center;margin-bottom:1.6rem}
.page-hero .crumbs a:hover{color:var(--gold-2)}
.page-hero .crumbs span{color:var(--gold-2)}
.page-hero h1{font-size:clamp(2.3rem,1.5rem + 3.6vw,4.1rem);max-width:20ch;margin-bottom:1.4rem}
.page-hero .lead{color:var(--on-dark-muted)}
.page-hero-grid{display:grid;gap:2.5rem;align-items:end}
@media(min-width:980px){.page-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.page-hero .aside{display:grid;gap:1px;background:var(--on-dark-line);border:1px solid var(--on-dark-line);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.page-hero .aside div{background:rgba(6,36,34,.62);box-shadow:var(--ring-dark);padding:1.2rem 1.3rem}
.page-hero .aside dt{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:.3rem}
.page-hero .aside dd{font-size:.875rem;color:var(--on-dark)}

/* long-form legal pages (Privacy, Terms) */
.legal{max-width:74ch}
.legal>*+*{margin-top:1.05rem}
.legal h2{font-size:clamp(1.3rem,1.02rem + 1vw,1.72rem);letter-spacing:-.024em;
  margin-top:2.8rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:2.2rem}
.legal h3{font-size:1.0625rem;margin-top:1.7rem}
.legal p,.legal li{font-size:.9688rem;line-height:1.74;color:var(--muted)}
.legal strong{color:var(--ink);font-weight:600}
.legal ul{display:grid;gap:.6rem;list-style:none;padding-left:0;margin-top:1.05rem}
.legal li{display:flex;gap:.8rem;align-items:baseline}
.legal li::before{content:"";width:5px;height:5px;background:var(--teal);flex:none;
  transform:rotate(45deg);margin-top:.55rem}
.legal a{color:var(--teal-2);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;transition:color .25s var(--ease)}
.legal a:hover{color:var(--gold-deep)}
.legal-meta{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);padding-bottom:1.5rem;border-bottom:1px solid var(--line);margin-bottom:0}
@media print{.legal{max-width:none}.legal a{color:var(--ink)}}

/* service detail sections */
.detail{display:grid;gap:clamp(1.5rem,3.5vw,3.5rem);padding-block:clamp(2.8rem,5.4vw,4.6rem);
  border-top:1px solid var(--line)}
@media(min-width:900px){.detail{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}}
.detail-head{display:flex;gap:1.2rem;align-items:flex-start}
.detail-head .svc-icon{width:48px;height:48px;padding:12px;flex:none}
.detail-head .d-index{font-family:var(--font-body);font-size:.6875rem;font-weight:700;
  letter-spacing:.16em;color:var(--muted-2);margin-bottom:.7rem;display:block;
  font-variant-numeric:tabular-nums}
.detail h3{font-size:clamp(1.45rem,1.25rem + 1vw,2.05rem);margin-bottom:.9rem;max-width:22ch}
.detail .d-intro{font-size:.95rem;color:var(--muted);max-width:46ch}
.detail-groups{display:grid;gap:1.6rem}
@media(min-width:620px){.detail-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.d-group .g-label{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.8rem;padding-bottom:.55rem;border-bottom:1px solid var(--line-gold)}
.d-group ul{display:grid;gap:.5rem}
.d-group li{font-size:.875rem;color:var(--ink);display:flex;gap:.65rem;align-items:baseline;line-height:1.5}
.d-group li::before{content:"";width:5px;height:5px;background:var(--teal);flex:none;
  transform:rotate(45deg) translateY(-2px);opacity:.8}

/* sectors strip on services page */
.sector-strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-s)}
@media(min-width:620px){.sector-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.sector-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1000px){.sector-strip--five{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sector-strip div:last-child:nth-child(odd){grid-column:1/-1}
.sector-strip div{background:var(--paper);background-image:var(--surface-paper);
  box-shadow:var(--ring-paper);padding:1.45rem 1.5rem;font-size:.9375rem;font-weight:500;
  display:flex;gap:.75rem;align-items:center;transition:background .45s}
.sector-strip div:hover{background:var(--white)}
.sector-strip div::before{content:"";width:7px;height:7px;background:var(--gold);flex:none;transform:rotate(45deg)}

/* per-service booking call-to-action */
.svc-book-wrap{margin-top:1.5rem}
.svc-book{width:100%;justify-content:center}
.svc-book-note{margin-top:.7rem;font-size:.7188rem;color:var(--muted-2);line-height:1.5}

/* ==========================================================================
   About page
   ========================================================================== */
.vm-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-m)}
@media(min-width:820px){.vm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vm{background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  padding:clamp(2rem,3.8vw,3.2rem);position:relative}
.vm .vm-tag{font-size:.625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:1.3rem;display:flex;align-items:center;gap:.7rem}
.vm .vm-tag::after{content:"";flex:1;height:1px;background:var(--line-gold)}
.vm p{font-family:var(--font-display);font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem);
  line-height:1.42;font-weight:400;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.vm.dark-vm{background:var(--ink);background-image:var(--surface-dark);box-shadow:var(--ring-dark)}
.vm.dark-vm p{color:var(--on-dark)}
.vm.dark-vm .vm-tag{color:var(--gold-2)}
.vm.dark-vm .vm-tag::after{background:var(--on-dark-line)}

.framework-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-s)}
@media(min-width:700px){.framework-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.framework-list div{background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  padding:1.35rem 1.5rem;font-size:.875rem;color:var(--ink);
  display:flex;gap:.7rem;align-items:baseline;line-height:1.45}
.framework-list div::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;
  transform:rotate(45deg) translateY(-1px)}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:960px){.contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(3rem,7vw,6rem)}}
.contact-card{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.contact-card a,.contact-card div{background:var(--paper);background-image:var(--surface-paper);
  box-shadow:var(--ring-paper);padding:1.5rem 1.6rem;display:flex;
  gap:1.1rem;align-items:flex-start;transition:background .45s}
.contact-card a:hover{background:var(--white)}
.contact-card .c-icon{width:38px;height:38px;flex:none;color:var(--teal)}
.contact-card .c-icon svg{width:100%;height:100%}
.contact-card .k{display:block;font-size:.625rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:.35rem}
.contact-card a>span:last-child,.contact-card div>span:last-child{min-width:0}
.contact-card .v{font-size:1.02rem;font-weight:500;color:var(--ink);overflow-wrap:anywhere}

/* numbered process list — replaces the .d-group diamond with a step badge */
.d-group.step-list{display:grid;gap:.9rem;counter-reset:step;margin-top:.2rem}
.d-group.step-list li{counter-increment:step;display:block;position:relative;padding-left:2.1rem;
  font-size:.9rem;color:var(--muted);line-height:1.55}
.d-group.step-list li::before{content:counter(step);position:absolute;left:0;top:.02rem;
  width:1.5rem;height:1.5rem;transform:none;opacity:1;background:rgba(217,164,65,.07);
  border:1px solid var(--line-gold);color:var(--gold-deep);border-radius:50%;
  display:grid;place-items:center;font-size:.6875rem;font-weight:700;letter-spacing:0}

.form-grid{display:grid;gap:1.15rem}
@media(min-width:620px){.form-grid .row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}}
.field{display:grid;gap:.5rem}
.field label{font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(18,33,31,.05);
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.field textarea{min-height:152px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--white);
  box-shadow:inset 0 1px 2px rgba(18,33,31,.03),0 0 0 3px rgba(217,164,65,.14)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.form-note{font-size:.75rem;color:var(--muted);line-height:1.5}
.form-status{margin-top:1rem;padding:1rem 1.15rem;border:1px solid var(--line-gold);
  background:rgba(217,164,65,.09);font-size:.875rem;display:none}
.form-status.show{display:block}

/* ==========================================================================
   Reveal animations
   ========================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1.05s var(--ease-out),transform 1.05s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.11s}
.js [data-reveal][data-delay="2"]{transition-delay:.22s}
.js [data-reveal][data-delay="3"]{transition-delay:.33s}
.js [data-reveal][data-delay="4"]{transition-delay:.44s}
.js [data-reveal][data-delay="5"]{transition-delay:.55s}

/* hero entrance */
.hero .pillars,.hero h1,.hero-copy,.hero-actions,.hero-meta{opacity:0;
  animation:rise 1.1s var(--ease-out) forwards}
.hero .pillars{animation-delay:.12s}
.hero h1{animation-delay:.24s}
.hero-copy{animation-delay:.4s}
.hero-actions{animation-delay:.54s}
.hero-meta{animation-delay:.68s}
.hero-visual>*{opacity:0;animation:rise 1.25s var(--ease-out) forwards}
.hero-visual .arc{animation-delay:.34s}
.hero-visual .portrait{animation-delay:.48s}
.hero-visual .seal{animation-delay:.68s}
.hero-visual .float-card{animation-delay:.82s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-visual .portrait{animation-name:riseTilt}
@keyframes riseTilt{from{opacity:0;transform:translateY(30px) rotate(4deg)}
  to{opacity:1;transform:rotate(1.6deg)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;
    transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero .pillars,.hero h1,.hero-copy,.hero-actions,.hero-meta,.hero-visual>*{opacity:1}
  .marquee-track{animation:none}
  .js .rx-svc .rx-card[data-reveal]{opacity:1;transform:none}
}

/* print */
@media print{
  .header,.mobile-nav,.marquee,.hero-bg,.cta-glow,.burger,
  .hero-photo,.band,.svc-media{display:none}
  body{background:#fff}
  .dark,.hero,.page-hero,.footer,.cta{background:#fff !important;color:#000 !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .rx-svc .rx-card[data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   Header — six nav items
   ========================================================================== */
/* The burger is a phone affordance. From tablet landscape up the full nav is
   shown and the row tightens fluidly — nav padding, type and lockup all scale
   with the viewport so the six items never collide with the search and CTA. */
.nav{gap:clamp(.15rem,.55vw,.85rem)}
.nav a{padding:.62rem clamp(.5rem,.95vw,1.1rem);
  font-size:clamp(.85rem,.72rem + .32vw,.9375rem)}
.nav a::after{left:clamp(.5rem,.95vw,1.1rem);right:clamp(.5rem,.95vw,1.1rem);bottom:.24rem}
@media(min-width:768px){
  .header-inner{height:96px;gap:clamp(.75rem,1.1vw,1.5rem)}
  /* the lockup scales with the viewport to span the bar, as in the reference */
  .brand-mark{height:clamp(46px,4.167vw + 14px,74px)}
  .header.is-solid .brand-mark{height:clamp(38px,3vw + 8px,52px)}
}

.header-actions{display:flex;align-items:center;gap:.45rem;flex:none}

.search-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;
  color:var(--ink);border:1px solid transparent;border-radius:100px;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.search-btn:hover,.search-btn[aria-expanded="true"]{color:var(--gold-deep);
  border-color:var(--line-strong);background:rgba(18,33,31,.04)}

/* ==========================================================================
   Search overlay
   ========================================================================== */
.search{position:fixed;inset:0;z-index:120;overflow-y:auto;
  padding:calc(var(--hdr) + clamp(2rem,6vh,4.5rem)) var(--gut) 2.5rem;
  background:linear-gradient(180deg,rgba(8,51,47,.975),rgba(18,33,31,.955));
  backdrop-filter:blur(18px) saturate(1.25);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s}
.search.open{opacity:1;visibility:visible}
.search-inner{max-width:min(780px,100%);margin:0 auto}
.search-field{display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid var(--on-dark-line);padding-bottom:1rem;
  transition:border-color .4s var(--ease)}
.search-field:focus-within{border-color:var(--gold)}
.search-field>svg{flex:none;color:var(--gold-2)}
.search-input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--on-dark);font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,1rem + 1.5vw,1.95rem)}
.search-input::placeholder{color:rgba(242,245,243,.3)}
/* the field is type=search for the semantic role, but WebKit then paints its own blue cancel
   glyph inside the field, right beside our close button */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search-close{display:grid;place-items:center;width:44px;height:44px;flex:none;
  color:var(--on-dark-muted);transition:color .3s var(--ease),transform .3s var(--ease)}
.search-close:hover{color:var(--gold-2);transform:rotate(90deg)}
.search-hint{margin-top:1rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-muted);display:flex;gap:1.4rem;flex-wrap:wrap}
.search-hint b{color:var(--gold-2);font-weight:600}

.search-results{margin-top:1.6rem;display:grid;gap:1px;background:var(--on-dark-line);
  border:1px solid var(--on-dark-line);max-height:54vh;overflow-y:auto}
.search-results a{display:block;background:var(--ink);padding:1.05rem 1.25rem;
  transition:background .3s var(--ease),padding-left .3s var(--ease)}
.search-results a:hover{background:var(--ink-2);padding-left:1.6rem}
/* these are spans, so they need the explicit block — otherwise the kicker, the title and the
   excerpt all run together on one line */
.search-results .r-k{display:block;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);font-weight:600}
.search-results .r-t{display:block;font-family:var(--font-display);font-size:1.0625rem;margin-top:.3rem;
  color:var(--on-dark)}
.search-results .r-d{display:block;font-size:.8125rem;color:var(--on-dark-muted);margin-top:.35rem;line-height:1.5}
.search-msg{padding:1.5rem 1.25rem;background:var(--ink);color:var(--on-dark-muted);
  font-size:.875rem;text-align:center;line-height:1.6}

/* ==========================================================================
   Service booking dialog
   ========================================================================== */
.bookd{position:fixed;inset:0;z-index:210;display:grid;place-items:start center;
  overflow-y:auto;padding:clamp(1.25rem,4vh,2.75rem) var(--gut);
  background:linear-gradient(180deg,rgba(8,51,47,.975),rgba(18,33,31,.955));
  backdrop-filter:blur(18px) saturate(1.25);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.bookd.open{opacity:1;visibility:visible}
.bookd-panel{position:relative;width:min(760px,100%);background:var(--paper);
  background-image:var(--surface-paper);box-shadow:var(--shadow-l);
  padding:clamp(1.6rem,4vw,3rem);transform:translateY(18px);
  transition:transform .5s var(--ease-out)}
.bookd.open .bookd-panel{transform:none}
.bookd-panel::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold))}
.bookd-x{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;
  width:44px;height:44px;color:var(--muted-2);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.bookd-x:hover{color:var(--gold-deep);transform:rotate(90deg)}
.bookd-kicker{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep)}
.bookd-title{margin-top:.7rem;font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);max-width:26ch}
.bookd-lead{margin-top:.75rem;font-size:.9rem;color:var(--muted);max-width:52ch}
.bookd .form-grid{margin-top:1.9rem}
.bookd .field textarea{min-height:118px}
/* below the .row-2 breakpoint the paired fields stack, so the grid must still supply the gap */
@media(max-width:619px){.bookd .row-2{display:grid;gap:1.15rem}}
@media(max-width:560px){.bookd-panel{padding:1.5rem 1.25rem}}

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

.footer-legal{font-size:.75rem}
.footer-legal a{color:var(--on-dark-muted);transition:color .3s}
.footer-legal a:hover{color:var(--gold-2)}
/* narrow screens wrap the legal links; drop the pipe rules so none is left orphaned */
@media(max-width:600px){.footer-legal{gap:.6rem 1.1rem}.footer-legal i{display:none}}

/* ==========================================================================
   Home hero — cinematic
   ========================================================================== */
.hero--cinema{min-height:min(100svh,960px);display:flex;flex-direction:column;
  justify-content:center;padding-top:calc(var(--hdr) + clamp(3rem,7vw,5.5rem));padding-bottom:0}
.hero--cinema .hero-photo{filter:saturate(.64) contrast(1.1) brightness(.66)}
.hero--cinema .hero-bg.has-photo::before{
  background:linear-gradient(96deg,rgba(8,51,47,.95) 0%,rgba(8,51,47,.88) 30%,
    rgba(5,36,34,.62) 58%,rgba(5,36,34,.28) 82%,rgba(8,51,47,.58) 100%)}
.hero--cinema .hero-bg .grid-lines{opacity:.28}

.hero-cinema-grid{position:relative;z-index:3;display:grid;gap:clamp(2.5rem,5vw,4rem);
  align-items:center;align-content:center;flex:1;padding-bottom:clamp(2.4rem,4.5vw,3.6rem)}
@media(min-width:1040px){
  .hero-cinema-grid{grid-template-columns:minmax(0,1fr) minmax(228px,262px);
    gap:clamp(3rem,6vw,6rem)}
}
.hero--cinema h1{font-size:clamp(2.35rem,1.35rem + 4.1vw,4.6rem);line-height:1.03;
  margin-bottom:1.7rem;max-width:19ch}
.hero--cinema h1 .hl{font-style:italic;font-weight:300;color:var(--gold-2)}
/* the cinema headline is set as one continuous line, so the accent word carries
   the gold rather than the whole second line */
.hero--cinema h1 .l2{color:var(--on-dark);font-style:normal;font-weight:400}
.hero--cinema .hero-copy{max-width:50ch;margin-bottom:2.3rem}
/* the shared .pillars rules add display-sized word spacing and drop the divider below
   600px, which stretches this two-part eyebrow; stack the parts instead */
@media(max-width:600px){
  .hero--cinema .pillars{display:flex;flex-direction:column;align-items:flex-start;
    gap:.45rem;line-height:1.5;word-spacing:normal}
  .hero--cinema .pillars i{display:none}
}

/* right rail — glass panel over the photograph */
.hero-rail{display:grid;gap:1px;background:rgba(242,245,243,.15);
  border:1px solid rgba(242,245,243,.15);border-radius:var(--radius);overflow:hidden;
  backdrop-filter:blur(11px) saturate(1.25);
  box-shadow:0 30px 60px -44px rgba(0,0,0,.9)}
.hero-rail>*{background:rgba(8,51,47,.52);padding:1rem 1.2rem}
.hero-rail .rail-pin{display:flex;align-items:center;gap:.6rem;font-size:.625rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.hero-rail .rail-pin i{width:7px;height:7px;border-radius:50%;background:var(--gold-2);
  flex:none;animation:pinPulse 2.8s var(--ease) infinite}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(232,196,119,.22)}
  50%{box-shadow:0 0 0 8px rgba(232,196,119,.04)}}
/* the list carries the rail's hairlines: display:contents lifts its items into
   the rail grid so each one keeps its own background and 1px separator */
.hero-rail ul{display:contents}
.hero-rail li{display:flex;align-items:baseline;gap:.85rem;
  background:rgba(8,51,47,.52);padding:1rem 1.2rem}
.hero-rail .r-num{font-size:.625rem;font-weight:600;letter-spacing:.16em;color:var(--gold-2);
  font-variant-numeric:tabular-nums;flex:none}
.hero-rail .r-t{font-family:var(--font-display);font-size:1.0625rem;font-weight:500;
  color:var(--on-dark)}
@media(max-width:1039px){
  .hero-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-rail .rail-pin{grid-column:1/-1}
}

/* full-bleed discipline strip */
.hero-strata{position:relative;z-index:3;border-top:1px solid var(--on-dark-line);
  background:rgba(8,51,47,.34);backdrop-filter:blur(9px) saturate(1.2)}
.hero-strata ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--on-dark-line)}
@media(min-width:760px){.hero-strata ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
.hero-strata li{display:flex;align-items:center;gap:.7rem;background:rgba(8,51,47,.45);
  padding:1.05rem clamp(.9rem,2vw,1.5rem);font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted);
  transition:color .4s var(--ease),background .4s var(--ease)}
.hero-strata li::before{content:"";width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);flex:none}
.hero-strata li:hover{color:var(--on-dark);background:rgba(8,51,47,.72)}
/* only the two-column layout leaves an odd item on its own row; at five columns it would
   push the fifth strip item onto a second line */
@media(max-width:759px){.hero-strata li:last-child:nth-child(odd){grid-column:1/-1}}

/* ==========================================================================
   Impact strip
   ========================================================================== */
.impact{position:relative;overflow:hidden;background:var(--ink);
  background-image:var(--surface-dark);color:var(--on-dark);
  padding-block:clamp(3.2rem,6vw,5.2rem)}
.impact::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 10% 0%,rgba(28,138,128,.15),transparent 58%),
    radial-gradient(70% 62% at 94% 100%,rgba(217,164,65,.13),transparent 62%)}
.impact .wrap{position:relative;z-index:1}
.impact-grid{display:grid;gap:1px;background:var(--on-dark-line);
  border:1px solid var(--on-dark-line);box-shadow:var(--ring-dark);
  margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:560px){.impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.impact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.impact-cell{background:var(--ink);background-image:var(--surface-dark-2);
  box-shadow:var(--ring-dark);padding:clamp(1.6rem,3vw,2.3rem);
  transition:background-image .55s var(--ease)}
.impact-cell:hover{background-image:linear-gradient(180deg,#0e534d 0%,#0a423e 100%)}
.i-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:1.5rem;
  color:var(--gold-2);border:1px solid var(--line-gold);border-radius:50%}
.i-icon svg{width:22px;height:22px}
.i-val{display:block;font-family:var(--font-display);font-weight:600;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--on-dark);
  font-size:clamp(2.6rem,2rem + 2.6vw,3.55rem)}
.i-lab{display:block;margin-top:.7rem;font-size:.8125rem;line-height:1.5;
  color:var(--on-dark-muted)}
/* the shared section head, recoloured for the dark band. Written against
   .impact rather than .dark so the strip keeps its own darker ink ground. */
.impact .rx-head{margin-bottom:0}
.impact .eyebrow{color:var(--gold-2)}
.impact .eyebrow::before{background:linear-gradient(90deg,rgba(232,196,119,0),var(--gold-2))}
.impact h2{color:var(--on-dark)}
.impact .rx-head-aside p{color:var(--on-dark-muted)}
.impact .link-arrow{color:var(--on-dark);border-color:var(--on-dark-line)}
.impact .link-arrow:hover{color:var(--gold-2);border-color:var(--gold-2)}

/* hairline progress rail, fixed over the top edge of the header */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;
  pointer-events:none;background:var(--line)}
.scroll-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal-bright),var(--gold));
  will-change:transform}
@media print{.scroll-progress{display:none}}

/* ==========================================================================
   Media cards — photographic headers for services and sectors
   ========================================================================== */
.media-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  box-shadow:var(--shadow-s)}
@media(min-width:760px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.media-grid--dark{background:var(--on-dark-line);border-color:var(--on-dark-line);
  box-shadow:var(--ring-dark)}

.mcard{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  transition:background .5s var(--ease)}
.media-grid--dark .mcard{background:var(--ink);background-image:var(--surface-dark-2);
  box-shadow:var(--ring-dark)}
.mcard::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out)}
.mcard:hover::after{transform:scaleX(1)}
.mcard--wide{grid-column:1/-1}
/* at three columns the lead card takes two, so a five-card grid fills without a hole */
@media(min-width:1120px){.media-grid .mcard--wide{grid-column:span 2}}

.mcard .media{border-radius:0;box-shadow:none;aspect-ratio:3/2}
.mcard--wide .media{aspect-ratio:21/9}
.mcard .media img{transition:transform 1.15s var(--ease-out)}
.mcard:hover .media img{transform:scale(1.045)}

.mcard-body{display:flex;flex-direction:column;gap:.8rem;flex:1;
  padding:clamp(1.5rem,2.6vw,2rem)}
.mcard .m-num{font-size:.625rem;font-weight:600;letter-spacing:.2em;
  color:var(--gold-deep);font-variant-numeric:tabular-nums}
.media-grid--dark .mcard .m-num{color:var(--gold-2)}
.mcard h3{font-family:var(--font-display);font-weight:600;line-height:1.14;
  font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);color:var(--ink)}
.media-grid--dark .mcard h3{color:var(--on-dark)}
.mcard p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.media-grid--dark .mcard p{color:var(--on-dark-muted)}
.mcard .m-link{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;
  gap:.55rem;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);transition:color .4s var(--ease)}
.mcard .m-link svg{transition:transform .45s var(--ease)}
.mcard:hover .m-link{color:var(--gold-deep)}
.mcard:hover .m-link svg{transform:translateX(5px)}
.media-grid--dark .mcard .m-link{color:var(--gold-2)}

/* ==========================================================================
   Featured portfolio (homepage)
   ========================================================================== */
.pf-feature{position:relative;overflow:hidden;color:var(--on-dark);
  background:var(--ink);background-image:var(--surface-dark);
  padding-block:clamp(3.6rem,7vw,6rem)}
.pf-feature::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 62% at 84% 14%,rgba(28,138,128,.16),transparent 60%),
    radial-gradient(60% 55% at 4% 96%,rgba(217,164,65,.12),transparent 62%)}
.pf-feature .wrap{position:relative;z-index:1}
.pf-feature-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media(min-width:980px){
  .pf-feature-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}
.pf-feature h2{max-width:20ch}
.pf-points{display:grid;gap:.75rem;margin:2rem 0 2.4rem;padding:0;list-style:none}
.pf-points li{display:flex;gap:.8rem;align-items:flex-start;font-size:.9375rem;
  color:var(--on-dark-muted);line-height:1.55}
.pf-points li::before{content:"";width:6px;height:6px;margin-top:.5rem;flex:none;
  background:var(--gold);transform:rotate(45deg)}

.pf-stack{position:relative;max-width:430px;margin-inline:auto;width:100%}
.pf-stack .media{aspect-ratio:3/4;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.95),0 0 0 1px var(--line-gold);
  transform:rotate(-1.4deg);
  transition:transform 1s var(--ease-out),box-shadow 1s var(--ease-out)}
.pf-stack:hover .media{transform:rotate(0deg) translateY(-8px);
  box-shadow:0 50px 90px -46px rgba(0,0,0,.95),0 0 0 1px rgba(232,196,119,.35)}
.pf-stack .media::before{content:"";position:absolute;inset:0 auto 0 0;width:26px;z-index:3;
  background:linear-gradient(90deg,rgba(8,51,47,.72),rgba(8,51,47,0));pointer-events:none}
.pf-badge{position:absolute;left:-14px;bottom:-18px;z-index:4;
  background:var(--paper);background-image:var(--surface-paper);color:var(--ink);
  border-top:3px solid var(--gold);border-radius:var(--radius);
  padding:1rem 1.25rem;box-shadow:var(--shadow-l),var(--ring-paper)}
.pf-badge b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  line-height:1;letter-spacing:-.03em}
.pf-badge span{display:block;margin-top:.35rem;font-size:.625rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}

/* ==========================================================================
   Sector profiles (Sectors page)
   ========================================================================== */
.sprof{display:grid;gap:clamp(1.8rem,3.6vw,3.2rem);align-items:center;
  padding-block:clamp(2.8rem,5.4vw,4.6rem);border-top:1px solid var(--line)}
@media(min-width:960px){
  .sprof{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(2.6rem,5vw,4.6rem)}
  /* alternate the photograph side down the page without reordering the markup */
  .sprof--rev .sprof-media{order:2}
}
/* the section already carries the top padding, so the first profile must not repeat it */
.sprof:first-child{padding-top:0}
.sprof-media{aspect-ratio:4/3}
.sprof-media .sprof-tag{position:absolute;left:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:.7rem;background:rgba(8,51,47,.8);
  backdrop-filter:blur(8px) saturate(1.2);padding:.75rem 1.1rem;
  font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2)}
.sprof-media .sprof-tag i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ---- sector photograph motion -------------------------------------------
   The frame wipes open toward the text column while the photograph inside
   pushes in against it, then the two settle and the image carries on a slow
   drift for as long as the page is open. Driven entirely by the `.in` class
   the existing reveal observer already writes, so nothing here depends on new
   JavaScript and a reduced-motion visitor gets the finished frame. */
.js .sprof-media picture{display:block;width:100%;height:100%}
.js .sprof-media[data-reveal] picture{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.05s var(--ease-out) .06s}
.js .sprof-media[data-reveal].in picture{clip-path:inset(0)}
.js .sprof-media[data-reveal] img{transform:scale(1.08) translate3d(-2.4%,0,0);
  transition:transform 1.5s var(--ease-out) .12s}
.js .sprof-media[data-reveal].in img{transform:scale(1) translate3d(0,0,0)}
.js .sprof-media[data-reveal].in picture{animation:sprof-pan 30s ease-in-out 2s infinite alternate}
/* the reversed profiles open from the right so the wipe always travels toward
   the copy, whichever side of the page the photograph sits on */
@media(min-width:960px){
  .js .sprof--rev .sprof-media[data-reveal] picture{clip-path:inset(0 0 0 100%)}
  .js .sprof--rev .sprof-media[data-reveal].in picture{clip-path:inset(0)}
  .js .sprof--rev .sprof-media[data-reveal] img{transform:scale(1.08) translate3d(2.4%,0,0)}
  .js .sprof--rev .sprof-media[data-reveal].in img{transform:scale(1) translate3d(0,0,0)}
}
@keyframes sprof-pan{
  from{transform:scale(1.015) translate3d(-1.3%,.8%,0)}
  to{transform:scale(1.06) translate3d(1.3%,-1%,0)}
}
@media(prefers-reduced-motion:reduce){
  .sprof-media picture,.sprof-media img{
    clip-path:none!important;transform:none!important;transition:none!important;animation:none!important}
}
.sprof-body .s-index{display:block;margin-bottom:.9rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.16em;color:var(--muted-2);font-variant-numeric:tabular-nums}
.sprof-body h2{font-size:clamp(1.65rem,1.4rem + 1.1vw,2.35rem);max-width:22ch;margin-bottom:1.1rem}
.sprof-body .s-lead{font-size:clamp(1rem,.96rem + .25vw,1.09rem);line-height:1.65;
  color:var(--muted);max-width:52ch}
.sprof-body .s-lead + .s-lead{margin-top:.9rem}
.sprof-lists{display:grid;gap:1.6rem;margin-top:1.9rem}
@media(min-width:620px){.sprof-lists{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sprof-note{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.8rem;
  padding-top:1.5rem;border-top:1px solid var(--line-gold)}
.sprof-note span{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);border:1px solid var(--line-gold);border-radius:999px;
  padding:.42rem .85rem;background:rgba(217,164,65,.06)}

/* ==========================================================================
   PORTFOLIO — the capability book
   ========================================================================== */

.book{position:relative;overflow:hidden;padding-block:clamp(1.1rem,2.2vw,2.2rem)}
/* the book section runs wider than the standard content column so the object can be oversized;
   the heading copy keeps the normal measure so the lead never stretches to a long line. */
.book > .wrap{position:relative;z-index:2;max-width:min(1760px,100vw);
  padding-inline:clamp(1rem,2vw,2rem)}
.book-head{display:grid;gap:1rem 3rem;align-items:end;margin:0 auto clamp(1rem,1.8vw,1.6rem);
  max-width:calc(var(--wrap) - 2 * var(--gut))}
.book-head h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem);max-width:16ch;margin:.7rem 0 0}
.book-head .lead{color:var(--on-dark-muted);max-width:44ch}
.book .crumbs{color:var(--on-dark-muted)}
.book .crumbs a{color:var(--on-dark-muted);transition:color .3s var(--ease)}
.book .crumbs a:hover{color:var(--gold-2)}
@media(min-width:900px){.book-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

/* ---- the object ---- */
/* the book is width-driven, but the width is capped by the *height* of the window so the whole
   object — both page edges, the discs riding them, the dock under the fore-edge, the hint line
   below it — lands inside one screen. 1.5445 is the spread's own ratio, so height = width / 1.5445
   and the cap composes to "as tall as the window can show under the header". */
.bk{--bk-dur:840ms;position:relative;margin-inline:auto;width:100%;
  max-width:min(1760px,100%,calc((100vh - var(--bk-reserve)) * 1.5445));
  outline:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  /* --bk-l/--bk-r are the visible page edges — 25%/75% while the book is shut, 0%/100% once it
     is open. Everything that must stay welded to the paper (fore-edge, discs, tabs) rides them. */
  --bk-l:0%;--bk-r:100%}
.bk[data-f="0"],.bk[data-f="7"]{--bk-l:25%;--bk-r:75%}
.bk:focus-visible{outline:2px solid var(--gold);outline-offset:14px;border-radius:2px}
/* the spread is two pages of the supplied cover's own proportion (1102 x 1427 — US Letter),
   so a single face is exactly 0.7723 and the cover artwork is never cropped or letterboxed. */
.bk-view{position:relative;aspect-ratio:2204/1427;transform-style:preserve-3d;
  perspective:2400px;perspective-origin:50% 46%}
.bk-shadow{position:absolute;left:6%;right:6%;bottom:-4%;height:11%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,0) 72%);filter:blur(16px);
  transition:left .9s var(--ease-out),right .9s var(--ease-out)}
.bk[data-f="0"] .bk-shadow,.bk[data-f="7"] .bk-shadow{left:25%;right:25%}
.bk-stage{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateX(var(--shift,0%));transition:transform 1s var(--ease-out)}
.bk[data-f="0"] .bk-stage{--shift:-25%}
.bk[data-f="7"] .bk-stage{--shift:25%}
.bk-leaves{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.bk.is-pointer .bk-leaves{transition:transform .22s var(--ease-out)}
.bk.is-settling{--bk-dur:560ms}
.bk.is-jumping .bk-stage,.bk.is-jumping .bk-leaves,.bk.is-jumping .bk-leaf{transition:none!important}

/* fore-edge page block — rides the visible page edge so a shut book still shows its page block */
.bk-edges{position:absolute;top:1.4%;bottom:1.4%;width:8px;z-index:0;pointer-events:none;
  transition:opacity .5s var(--ease),left .9s var(--ease-out),right .9s var(--ease-out);border-radius:2px}
.bk-edges--r{right:calc(100% - var(--bk-r) - 8px);
  background:repeating-linear-gradient(90deg,#ded5c0 0 1px,#b7ab90 1px 2px)}
.bk-edges--l{left:calc(var(--bk-l) - 8px);
  background:repeating-linear-gradient(270deg,#ded5c0 0 1px,#b7ab90 1px 2px)}
.bk[data-f="0"] .bk-edges--l{opacity:0;transform:translateX(-4px)}
.bk[data-f="7"] .bk-edges--r{opacity:0;transform:translateX(4px)}

/* ---- leaves ----
   the leaves share one 3D rendering context, so paint order comes from real depth
   (--z) rather than z-index, which is ignored for participants of a 3D context */
.bk-leaf{position:absolute;top:0;bottom:0;right:0;width:50%;transform-origin:left center;
  transform-style:preserve-3d;transform:translateZ(var(--z,0px)) rotateY(0deg);
  transition:transform var(--bk-dur) cubic-bezier(.42,.02,.2,1);will-change:transform}
.bk-leaf.is-flipped{transform:translateZ(var(--z,0px)) rotateY(-180deg)}
.bk.is-dragging .bk-leaf{transition:none}
.bk-arc{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.bk-leaf.is-flipping .bk-arc{animation:bkArc var(--bk-dur) cubic-bezier(.42,.02,.2,1) both}
.bk.flip-back .bk-leaf.is-flipping .bk-arc{animation-direction:reverse}
.bk.is-dragging .bk-leaf .bk-arc{animation:none}
/* the sheet becomes a plane in space: it lifts off the block, bows, and drops onto the other
   side. the bow and the slight in-plane skew are what read as paper rather than a card. */
@keyframes bkArc{
  0%{transform:translateZ(0) rotateX(0deg) rotate(0deg)}
  26%{transform:translateZ(48px) rotateX(-3.8deg) rotate(-.5deg)}
  58%{transform:translateZ(30px) rotateX(2.4deg) rotate(.32deg)}
  100%{transform:translateZ(0) rotateX(0deg) rotate(0deg)}
}
/* the front face carries an explicit (identity) 3D transform so it is promoted to its own layer
   exactly like the back face is by its rotateY. without it the browser leaves the front face in
   the parent's 3D context, where a full-bleed image can fail to rasterise at all — the cover then
   paints as a blank sheet. translateZ(0) changes nothing visually; it only makes the paint path
   identical for both faces. */
.bk-face{position:absolute;inset:0;overflow:hidden;background:var(--paper);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
/* toggled for a single frame after the cover artwork decodes, to force the first raster */
.bk.is-repaint .bk-face,.bk.is-repaint .cv-bg{will-change:transform}
/* the turning sheet catches the light and gives it back — this is the shading that sells the slip */
.bk-face::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(6,18,17,.52),rgba(6,18,17,.08) 46%,rgba(6,18,17,0))}
.bk-leaf.is-flipping .bk-face::after{
  animation:bkShade var(--bk-dur) cubic-bezier(.42,.02,.2,1) both}
.bk.flip-back .bk-leaf.is-flipping .bk-face::after{animation-direction:reverse}
@keyframes bkShade{0%{opacity:.6}44%{opacity:.2}100%{opacity:0}}
.bk-face--back{transform:rotateY(180deg)}
.bk-face:not(.is-live){pointer-events:none}
/* Chromium's backface culling is unreliable once each face is its own composited layer
   (translateZ(0) + nested preserve-3d): after the second flip a face that should be culled
   stays in the layer tree and its neighbour never re-rasters, so the spread paints blank.
   Culling explicitly by visibility makes the compositor re-raster the live faces every turn. */
.book:not(.is-flat) .bk-face:not(.is-live){visibility:hidden}
/* A layer that has never been painted stays blank in Chromium 92 even after it becomes live, so the
   turning leaf's destination face keeps showing the previous spread. A sub-perceptual outline is a
   real paint operation: gaining/losing it with .is-live re-rasters the face on every turn. */
.book:not(.is-flat) .bk-face.is-live > .pg{outline:1px solid rgba(0,0,0,.002)}

/* ---- page ----
   Every measurement on a page is an em off one size, and that size tracks the rendered width of
   the book (--bk-s is written by the book controller). The spread has a fixed 2204:1427
   proportion, so scaling the type with the width reproduces the layout the pages were designed
   at — same line breaks, same margins, nothing clipped — at whatever size the window allows. */
.pg{--pv:2.43em;--ph:2.25em;font-size:calc(1rem * var(--bk-s,1));
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  padding:calc(var(--pv) + 1.95em) var(--ph) var(--pv);
  background-image:linear-gradient(180deg,#fcfcfa 0%,#f4f4f0 100%);color:var(--ink)}
.bk-face--back .pg{background-image:linear-gradient(180deg,#fafaf8 0%,#f1f1ed 100%)}
.bk-face .pg::before{content:"";position:absolute;top:0;bottom:0;left:0;width:clamp(1em,3.6%,2.75em);
  z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,33,31,.19),rgba(18,33,31,.06) 44%,transparent 100%)}
.pg:not(.pg--cover)::after{content:"";position:absolute;top:calc(var(--pv) + 1.5em);
  left:var(--ph);right:var(--ph);height:1px;background:var(--line)}
.pg-run{position:absolute;top:var(--pv);left:var(--ph);margin:0;font-size:.625em;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.pg-index{position:absolute;top:var(--pv);right:var(--ph);font-size:.7em;font-weight:600;
  letter-spacing:.14em;color:var(--gold-deep);font-variant-numeric:tabular-nums}
/* the book section carries .dark, whose `.dark h2` rule (0,1,1) would paint these
   headings near-white on cream paper — match its specificity and set the page ink */
.bk .pg-h2{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0 0 .9em;
  font-size:1.84em;max-width:26ch;color:var(--ink)}
.pg-p{font-size:1.02em;line-height:1.6;color:var(--muted);margin:0 0 .9em}
.pg-p:last-child{margin-bottom:0}
.pg-note{margin:1em 0 0;font-size:.77em;letter-spacing:.06em;color:var(--muted-2)}
.pg-media{margin:0 0 1em;overflow:hidden;background:var(--paper-3);aspect-ratio:1.9/1;position:relative}
.pg-media--band{aspect-ratio:21/6}
.pg-media img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.62) contrast(1.06) brightness(.96);scale:1.05;
  transition:scale 1.4s var(--ease-out)}
.pg.is-shown .pg-media img{scale:1}
.pg-list{list-style:none;margin:.2em 0 0;padding:0}
.pg-list li{position:relative;padding:.42em 0 .42em 1.3em;font-size:.9em;line-height:1.38;
  border-top:1px solid var(--line);color:var(--ink)}
.pg-list li:first-child{border-top:0}
.pg-list li::before{content:"";position:absolute;left:0;top:.82em;width:.375em;height:.375em;
  background:var(--gold);transform:rotate(45deg)}
/* two-column lists carry the long practice inventories */
.pg-list--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.9em;align-content:start}
.pg-list--2 li:nth-child(2){border-top:0}
@media(max-width:720px){.pg-list--2{grid-template-columns:minmax(0,1fr)}.pg-list--2 li:nth-child(2){border-top:1px solid var(--line)}}
.pg-steps{list-style:none;margin:.1em 0 0;padding:0}
.pg-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85em;
  padding:.36em 0;border-top:1px solid var(--line)}
.pg-steps li:first-child{border-top:0;padding-top:0}
.st-n{font-size:.625em;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);
  padding-top:.2em;font-variant-numeric:tabular-nums}
.pg-steps b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05em;
  line-height:1.2;margin-bottom:.1em}
.pg-steps p{margin:0;font-size:.84em;line-height:1.42;color:var(--muted)}
.pg-sectors{list-style:none;margin:.1em 0 .85em;padding:0}
.pg-sectors li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85em;
  padding:.34em 0;border-top:1px solid var(--line)}
.pg-sectors li:first-child{border-top:0;padding-top:0}
.sc-n{font-size:.625em;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);
  padding-top:.18em;font-variant-numeric:tabular-nums}
.pg-sectors b{display:block;font-family:var(--font-display);font-weight:600;font-size:.98em;
  line-height:1.2;margin-bottom:.06em}
.pg-sectors p{margin:0;font-size:.8em;line-height:1.4;color:var(--muted)}
.pg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:.4em 0 0;
  background:var(--line);border:1px solid var(--line);box-shadow:var(--ring-paper)}
.pg-facts > div{background:var(--paper);padding:.85em .95em}
.pg-facts dt{font-size:.625em;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:.2em}
.pg-facts dd{margin:0;font-family:var(--font-display);font-size:1.4em;font-weight:600;color:var(--ink)}
.pg-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1em 1.4em;margin:.8em 0 0}
.pg-figures b{display:block;font-family:var(--font-display);font-size:1.6em;font-weight:600;
  line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.pg-figures span{display:block;margin-top:.3em;font-size:.77em;letter-spacing:.06em;color:var(--muted-2)}
.pg-foot{display:flex;flex-wrap:wrap;gap:.2em .9em;align-items:baseline;margin-top:auto;
  padding-top:1em;border-top:1px solid var(--line-gold);font-size:.84em}
.pg-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-gold)}
.pg-foot a:hover{color:var(--gold-deep)}
.pg-foot-k{font-size:.625em;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-right:.3em}
.pg-leader{display:flex;align-items:center;gap:1.2em;margin:.4em 0 1.1em}
.pg-avatar{width:4.5em;height:4.5em;border-radius:50%;overflow:hidden;flex:none;
  background:var(--paper-2);border:1px solid var(--line-gold);
  box-shadow:0 12px 24px -18px rgba(18,33,31,.7)}
.pg-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pg-leader h3{font-family:var(--font-display);font-size:1.4em;margin:0 0 .24em}
.pg-leader .role{margin:0;font-size:.7em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep)}
.pg-cred{margin-top:1em;padding-top:1em;border-top:1px solid var(--line)}
.pg-chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.6em}
.pg-chips span{font-size:.7em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;padding:.32em .78em}
.pg-contact{list-style:none;margin:.3em 0 0;padding:0}
.pg-contact li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9em;align-items:baseline;
  padding:.48em 0;border-top:1px solid var(--line);font-size:.9em}
.pg-contact li:first-child{border-top:0}
.pg-contact a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--line-gold)}
.pg-contact a:hover{color:var(--gold-deep)}
.c-k{font-size:.625em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);min-width:6.1em}
.pg-strata{display:flex;flex-wrap:wrap;gap:.35em .7em;margin:1em 0 0}
.pg-strata span{font-size:.625em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2)}
.pg-strata span + span::before{content:"·";margin-right:.7em;color:var(--gold)}
.pg-cta{margin-top:auto;align-self:flex-start}
.pg--close{justify-content:flex-start}

/* section key — a small gold rule-and-label used inside pages */
.pg-k{display:block;margin:1.1em 0 .1em;font-size:.625em;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold-deep)}
.pg-k::before{content:"";display:block;width:1.875em;height:1px;background:var(--gold);margin-bottom:.55em}

/* vision & mission */
.pg-vm{margin:.1em 0 .2em;padding:.85em 1em;border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(217,164,65,.09),rgba(217,164,65,0))}
.pg-vm + .pg-vm{margin-top:.6em}
.vm-k{display:block;margin-bottom:.35em;font-size:.625em;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep)}
.pg-vm p{margin:0;font-family:var(--font-display);font-size:.98em;line-height:1.5;color:var(--ink)}

/* contents page — a real printed table of contents */
.pg-toc{list-style:none;margin:.5em 0 0;padding:0}
.pg-toc li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.2em .8em;
  align-items:baseline;padding:.42em 0;border-bottom:1px solid var(--line)}
.tt-n{font-size:.625em;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);
  font-variant-numeric:tabular-nums}
.tt-t{font-family:var(--font-display);font-size:.9em;font-weight:600;line-height:1.25;color:var(--ink)}
.tt-p{font-size:.7em;font-weight:600;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* back cover — the dark ground must survive `.bk-face--back .pg`'s cream gradient, so the rule
   carries the same specificity and restates background-image. */
.bk-face .pg--back{padding:0;background:#08110f;background-image:none;color:var(--on-dark);
  justify-content:space-between;align-items:stretch;text-align:center}
.bk-face .pg--back::after{display:none}
.pg-cred .pg-k{margin-top:0}
.pg-cred .pg-k::before{display:none}
.bk-back-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1em;flex:1;padding:calc(var(--ph) * 1.3) var(--ph) 0}
/* the supplied logo is a dark-ground treatment — silver, teal and gold on transparency — so it is
   placed unaltered on the dark back cover rather than knocked out or recoloured. */
.bk-back-mark{display:block;width:min(66%,22.5em);height:auto}
.bk-back-stmt{margin:.4em 0 0;font-family:var(--font-display);font-size:1.3em;
  font-weight:600;letter-spacing:.02em;color:var(--gold-2)}
.bk-back-line{margin:0;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.bk-back-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:.35em 1.4em;
  padding:1.15em var(--ph);border-top:1px solid var(--on-dark-line);background:rgba(255,255,255,.03)}
.bk-back-bar a,.bk-back-bar span{font-size:.64em;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-muted);text-decoration:none}
.bk-back-bar a{transition:color .3s var(--ease)}
.bk-back-bar a:hover{color:var(--gold-2)}

/* cover — the client's supplied cover artwork, full bleed. no scrim, frame or overlaid type:
   the artwork already carries the logo, the title, the icons and the contact bar. */
.bk-face .pg--cover{padding:0;background:#0b1615;background-image:none;color:var(--on-dark);isolation:isolate}
.pg--cover picture{position:absolute;inset:0;display:block}
.cv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  scale:var(--cvS,1.03);transition:scale 1.8s var(--ease-out)}
.pg--cover.is-shown .cv-bg{--cvS:1}
/* the artwork sits still — nothing the pointer does may crop a pixel of it. the drift instead
   moves a sheen over the surface, so the cover feels alive without losing its edges. */
.pg--cover::after{content:"";position:absolute;inset:-4%;z-index:3;pointer-events:none;
  background:radial-gradient(42% 34% at 50% 44%,rgba(255,255,255,.13),rgba(255,255,255,0) 72%);
  transform:translate3d(var(--cvX,0px),var(--cvY,0px),0);transition:transform .9s var(--ease-out)}

/* staggered page reveals */
.pg:not(.pg--cover) > *{opacity:0;transform:translateY(13px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.pg.is-shown:not(.pg--cover) > *{opacity:1;transform:none}
.pg.is-shown > :nth-child(1){transition-delay:.05s}
.pg.is-shown > :nth-child(2){transition-delay:.1s}
.pg.is-shown > :nth-child(3){transition-delay:.16s}
.pg.is-shown > :nth-child(4){transition-delay:.22s}
.pg.is-shown > :nth-child(5){transition-delay:.28s}
.pg.is-shown > :nth-child(6){transition-delay:.34s}
.pg.is-shown > :nth-child(7){transition-delay:.4s}
.pg.is-shown > :nth-child(8){transition-delay:.46s}
.pg.is-shown > :nth-child(9){transition-delay:.52s}

/* ---- controls ---- */
/* ---- controls, mounted on the object ----
   the whole control set sits in one overlay that is a sibling of the 3D stage, not a child of
   it: a normal stacking context, so nothing the leaves paint can ever cover a control.
   Every control rides --bk-l/--bk-r (see .bk), so the set stays welded to the paper as the book
   opens and shuts: the discs on the page edges, the ruler on the spine's foot, the tool tabs on
   the spine's head, each sliding onto the fore-edge while the book is closed. Nothing hangs
   below the object. */
.bk-ui{position:absolute;inset:0;z-index:6;pointer-events:none}
.bk-ui > *{pointer-events:auto}

/* the gutter deepens as the book opens */
.bk-spine{position:absolute;top:.5%;bottom:.5%;left:50%;width:clamp(24px,4.2%,74px);
  transform:translateX(-50%);z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(5,16,15,0),rgba(5,16,15,.34) 50%,rgba(5,16,15,0));
  transition:opacity .7s var(--ease)}
.bk:not([data-f="0"]):not([data-f="7"]) .bk-spine{opacity:1}

.bk-nav{position:absolute;top:50%;left:var(--bk-x,0%);width:56px;height:56px;z-index:2;
  display:grid;place-items:center;border-radius:999px;cursor:pointer;
  transform:translate(-50%,-50%);
  border:1px solid rgba(217,164,65,.42);color:var(--on-dark);
  background:linear-gradient(180deg,rgba(9,44,41,.76),rgba(5,23,21,.94));
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.13);
  transition:left .9s var(--ease-out),background-color .35s var(--ease),
    border-color .35s var(--ease),color .35s var(--ease),opacity .4s var(--ease),
    box-shadow .35s var(--ease),transform .35s var(--ease),visibility .4s}
.bk-nav--prev{--bk-x:var(--bk-l)}
.bk-nav--next{--bk-x:var(--bk-r)}
.bk-nav:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--ink-3);
  box-shadow:0 18px 42px rgba(217,164,65,.34);transform:translate(-50%,-50%) scale(1.07)}
.bk-nav:active:not(:disabled){transform:translate(-50%,-50%) scale(.95)}
.bk-nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* a shut book has no page to go back to, so the disc simply isn't there — one open invitation.
   visibility (not just opacity) because the disc carries a backdrop-filter layer, which some
   compositors keep painting at opacity:0. */
.bk-nav:disabled{opacity:0;visibility:hidden;pointer-events:none}

/* counter + spread ruler — a plate resting on the spine's foot, inside the book's own bottom
   edge. A shut book shows its cover artwork clean, so the plate is simply absent until there is
   a spread to rule; it never hangs below the object. */
.bk-dock{position:absolute;left:50%;bottom:1px;z-index:2;transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.1rem);
  padding:.42rem .85rem .42rem 1.05rem;border-radius:999px;
  border:1px solid rgba(217,164,65,.24);
  background:linear-gradient(180deg,rgba(9,40,37,.88),rgba(5,22,20,.95));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 12px 26px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
  visibility:visible;
  transition:opacity .45s var(--ease),transform .45s var(--ease),bottom .45s var(--ease),visibility .45s}
/* the plate carries a backdrop-filter, which some compositors keep painting at opacity:0 — so a
   shut book (whose cover artwork must read clean underneath) hides it with visibility too. */
.bk[data-f="0"] .bk-dock,.bk[data-f="7"] .bk-dock{opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(9px)}
.bk-count{margin:0;min-width:12ch;text-align:center;font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark);
  font-variant-numeric:tabular-nums}
.bk-dock-rule{width:1px;height:16px;background:var(--on-dark-line);flex:none}
.bk-rail{display:flex;align-items:center;gap:.04rem}
.bk-rail button{position:relative;width:24px;height:30px;display:grid;place-items:center;
  padding:0;border:0;background:none;cursor:pointer}
/* the diamonds are 6px; the thumb is not. the pad is vertical only so neighbouring stops never
   fight over the same strip of the ruler. */
.bk-rail button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
.bk-rail button + button::before{content:"";position:absolute;left:calc(-50% - .02rem);top:50%;
  width:calc(100% + .04rem);height:1px;background:rgba(242,245,243,.17);
  transform:translateY(-50%);pointer-events:none}
.bk-rail button i{display:block;width:6px;height:6px;background:rgba(242,245,243,.3);
  transform:rotate(45deg);transition:background-color .35s var(--ease),transform .35s var(--ease),
    box-shadow .35s var(--ease)}
.bk-rail button:hover i{background:var(--gold-2)}
.bk-rail button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:2px}
.bk-rail button[aria-current="true"] i{background:var(--gold);transform:rotate(45deg) scale(1.75);
  box-shadow:0 0 0 3px rgba(217,164,65,.16)}

/* contents + fullscreen. open: a pair of tabs lying in the bottom margin of the right page, the one
   band every interior page keeps free (the footer sits on the left page, the page number at the top
   — nothing else reaches there). shut: the same tabs hang off the fore-edge like index tabs on a
   closed book. icon-only on the object — the labels stay in the DOM for assistive tech (and return
   visibly in stacked mode). */
.bk-corner{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  transition:left .9s var(--ease-out),right .9s var(--ease-out),top .9s var(--ease-out),
    transform .9s var(--ease-out)}
.bk:not([data-f="0"]):not([data-f="7"]) .bk-corner{left:auto;right:1.6%;top:auto;bottom:1px;
  flex-direction:row}
.bk[data-f="0"] .bk-corner,.bk[data-f="7"] .bk-corner{left:var(--bk-r);right:auto;top:50%;
  bottom:auto;flex-direction:column;transform:translate(9px,-50%)}
.bk-btn{display:inline-flex;align-items:center;gap:.45rem;width:38px;height:38px;padding:0;
  justify-content:center;border-radius:999px;cursor:pointer;font:inherit;font-size:.5938rem;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(217,164,65,.26);
  background:linear-gradient(180deg,rgba(9,40,37,.86),rgba(5,22,20,.94));color:var(--on-dark);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 12px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.bk-btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.bk-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-3)}
.bk-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bk-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2)}

/* a quiet line under the object — nothing hangs off the book any more, so it only needs a breath.
   the margin is deliberately tight: it is the last thing on the screen and must clear the fold on a
   short laptop window without stealing height from the book itself. */
.bk-hint{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center;
  margin:clamp(.9rem,1.4vw,1.5rem) 0 0;
  font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-muted)}
.bk-hint b{color:var(--gold-2);font-weight:700}
@media print{.book .bk,.book .bk-hint,.book .bk-toc{display:none!important}}

/* ---- contents overlay ---- */
.bk-toc[hidden]{display:none}
.bk-toc{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(8,51,47,.88);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease),visibility 0s linear .38s}
/* visibility flips on the leading edge when opening and on the trailing edge when
   closing, so the panel is focusable the moment it opens but stays painted while it fades */
.bk-toc.is-open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .38s var(--ease),visibility 0s}
.bk-toc-panel{width:min(780px,100%);max-height:min(88vh,880px);overflow:auto;color:var(--ink);
  background:var(--paper);background-image:var(--surface-paper);
  border:1px solid var(--line-strong);box-shadow:0 70px 130px -55px rgba(0,0,0,.9);
  padding:clamp(1.4rem,3.2vw,2.5rem);
  transform:translateY(20px) scale(.986);transition:transform .5s var(--ease-out)}
.bk-toc.is-open .bk-toc-panel{transform:none}
.bk-toc-head{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.2rem;
  padding-bottom:1.1rem;margin-bottom:.3rem;border-bottom:1px solid var(--line)}
.bk-toc-head h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,1.95rem);margin:0 auto 0 0}
.bk-toc-close{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:none;color:var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bk-toc-close:hover{background:var(--ink);color:var(--gold-2);border-color:var(--ink)}
.bk-toc-list{list-style:none;margin:0;padding:0}
.bk-toc-list button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1.1rem;
  width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;background:none;border:0;
  border-bottom:1px solid var(--line);padding:.78rem .5rem;
  transition:background-color .3s var(--ease),padding-left .3s var(--ease)}
.bk-toc-list li:last-child button{border-bottom:0}
.bk-toc-list button:hover{background:rgba(217,164,65,.1);padding-left:.9rem}
.bk-toc-list button[aria-current="true"]{background:rgba(217,164,65,.14)}
.t-num{grid-row:span 2;padding-top:.25rem;font-size:.625rem;font-weight:700;letter-spacing:.14em;
  color:var(--gold-deep);font-variant-numeric:tabular-nums}
.t-t{font-family:var(--font-display);font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);
  font-weight:600;line-height:1.25}
.t-d{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* ---- flat / stacked mode ---- */
.book.is-flat .bk{max-width:640px;touch-action:pan-y}
.book.is-flat .bk-view{aspect-ratio:auto;perspective:none;transform-style:flat;overflow:hidden}
.book.is-flat .bk-shadow,.book.is-flat .bk-edges{display:none}
.book.is-flat .bk-stage{position:static;transform:none;transition:none}
.book.is-flat .bk-leaves{position:static;display:grid;
  transform:translateX(var(--swipe,0px));transition:transform .34s var(--ease-out)}
.book.is-flat .bk.is-dragging .bk-leaves{transition:none}
.book.is-flat .bk-leaf{position:static;width:auto;grid-area:1/1;transform:none!important;
  transition:none;transform-style:flat}
.book.is-flat .bk-arc{position:static;display:grid;transform:none!important}
.book.is-flat .bk-face{grid-area:1/1;position:static;inset:auto;transform:none;
  -webkit-backface-visibility:visible;backface-visibility:visible;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.book.is-flat .bk-face.is-live{opacity:1;visibility:visible}
/* a faded-out face is still laid out, so all seven pages went on stacking in that one cell and the
   stack stayed as tall as the longest page — the cover then floated above half a screen of blank
   paper. Lifting the unread faces out of the flow sizes the stack to the page being read, and
   because they keep a box (rather than display:none) the cross-fade and the page reveal still
   animate. Negative z keeps the outgoing page behind the incoming one. */
.book.is-flat .bk-face:not(.is-live){position:absolute;top:0;left:0;right:0;bottom:auto;z-index:-1}
.book.is-flat .pg{position:static;inset:auto;min-height:0}
/* flat mode is the one case where the page stops being a fixed 1442px-wide spread the type can be
   scaled against: it becomes a single column that flows down the window, so the em metrics (which
   are design-size, right for a 721px face) would be far too large on a phone. Restore fluid clamps. */
.book.is-flat .pg{font-size:1rem;--pv:clamp(1.6rem,2.7vw,3rem);--ph:clamp(1.35rem,2.5vw,2.9rem)}
.book.is-flat .bk .pg-h2{font-size:clamp(1.3rem,1.08rem + .84vw,1.95rem)}
.book.is-flat .pg-p{font-size:clamp(.875rem,.82rem + .22vw,1.02rem)}
.book.is-flat .pg-leader h3{font-size:clamp(1.12rem,1rem + .56vw,1.4rem)}
.book.is-flat .pg::before{display:none}
/* the cover is one full-bleed image — hold it to its true page proportion in stacked mode so the
   artwork reads whole on a phone instead of being cropped at both fore-edges. */
.book.is-flat .pg--cover{position:relative;aspect-ratio:1102/1427;min-height:0;padding:0;
  background:#0b1615}
.book.is-flat .pg-media{aspect-ratio:16/9}
.book.is-flat .pg-media--band{aspect-ratio:16/9}
.book.is-flat .bk-hint span:first-child{display:none}

/* stacked mode: the overlay stops floating and becomes a control row under the page stack */
.book.is-flat .bk-ui{position:static;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:.9rem 1rem;margin-top:1.35rem}
.book.is-flat .bk-spine{display:none}
.book.is-flat .bk-nav,.book.is-flat .bk-dock,.book.is-flat .bk-corner{position:static;
  transform:none;transition:none}
.book.is-flat .bk-nav{width:46px;height:46px}
/* the counter and ruler take a row of their own and shrink to fit a phone */
.book.is-flat .bk-dock{order:0;flex-basis:100%;max-width:100%;flex-wrap:wrap;justify-content:center;
  gap:.3rem 0;padding:.5rem .35rem;opacity:1;visibility:visible;pointer-events:auto}
.book.is-flat .bk-count{flex:1 1 100%;min-width:0;font-size:.625rem;letter-spacing:.14em}
.book.is-flat .bk-dock-rule{display:none}
/* fourteen stops will not sit beside the counter at a pitch a thumb can hit, and a ruler that runs
   off the end of its own pill is worse than a short one. The counter takes its own line and the
   ruler then spans the pill edge to edge, each stop flexing to share the width instead of
   overflowing it — about 24px a stop on a 390px phone, still with the 44px pad. */
.book.is-flat .bk-rail{flex:1 1 100%;gap:0}
.book.is-flat .bk-rail button{flex:1 1 0;min-width:0;width:auto;max-width:26px;height:34px}
/* shared width still runs out below about 382px — fourteen stops at 22px are a coin toss for a
   thumb, so there the ruler keeps a fixed 26px pitch and scrolls sideways under a right-edge fade.
   touch-action has to be reopened: the book sets pan-y to reserve horizontal drags for the page
   swipe, which would otherwise stop the ruler scrolling at all. */
@media(max-width:384px){
  .book.is-flat .bk-rail{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
    touch-action:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-inline-end:20px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%)}
  .book.is-flat .bk-rail::-webkit-scrollbar{display:none}
  .book.is-flat .bk-rail button{flex:0 0 26px;width:26px;max-width:26px;scroll-snap-align:center}
}
.book.is-flat .bk-nav--prev{order:1}
.book.is-flat .bk-nav--next{order:2}
.book.is-flat .bk-corner{order:3;flex-basis:100%;flex-direction:row;justify-content:center;
  border-top:1px solid var(--on-dark-line);padding-top:1rem}
.book.is-flat .bk-btn{width:auto;height:auto;padding:.56rem .88rem}
.book.is-flat .bk-btn-label{position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip:auto;clip-path:none;white-space:normal}
/* keep both discs in the layout here — a disappearing control would shift the row */
.book.is-flat .bk-nav:disabled{opacity:.28;visibility:visible;pointer-events:none}
.book.is-flat .bk-nav:hover:not(:disabled),
.book.is-flat .bk-nav:active:not(:disabled){transform:none}

html:not(.js) .book .bk,html:not(.js) .book .bk-hint{display:none}

/* ---- fullscreen ---- */
body.is-locked{overflow:hidden}
.book.is-full{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;
  justify-content:center;overflow:auto;padding:clamp(1rem,3vw,2.4rem);background:var(--ink-3);
  animation:bkFull .5s var(--ease-out) both}
@keyframes bkFull{from{opacity:0}to{opacity:1}}
.book.is-full > .wrap{display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:none;min-height:100%}
.book.is-full .book-head,.book.is-full .bk-hint{display:none}
/* 1.5445 is the spread's own aspect ratio; all controls now sit on the object, so the only
   allowance is the viewport padding. */
.book.is-full:not(.is-flat) .bk{max-width:min(1800px,calc((100vh - 3.4rem) * 1.5445));margin-block:auto}
@media(prefers-reduced-motion:reduce){.book.is-full{animation:none}}

@media(prefers-reduced-motion:reduce){
  .bk-stage,.bk-leaves,.bk-leaf,.bk-arc,.bk-nav,.bk-corner{transition:none!important;animation:none!important}
  .bk-face::after{animation:none!important}
  .pg:not(.pg--cover) > *{opacity:1!important;transform:none!important;transition:none!important}
  .pg--cover::after{transform:none!important;transition:none!important}
  .cv-bg{--cvS:1;transition:none!important}
  .pg-media img{scale:1;transition:none!important}
}

/* ---- page index below the book ---- */
.book-index{position:relative}
.bi-grid{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);box-shadow:var(--ring-paper)}
@media(min-width:640px){.bi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.bi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bi-grid li{background:var(--paper);background-image:var(--surface-paper);box-shadow:var(--ring-paper);
  padding:1.55rem 1.45rem;transition:background-color .4s var(--ease)}
.bi-grid li:hover{background:var(--white)}
.bi-n{display:block;margin-bottom:.85rem;font-size:.625rem;font-weight:700;letter-spacing:.18em;
  color:var(--gold-deep);font-variant-numeric:tabular-nums}
.bi-grid h3{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;line-height:1.25;
  margin:0 0 .5rem}
.bi-grid p{margin:0;font-size:.8125rem;line-height:1.55;color:var(--muted)}

/* ==========================================================================
   Homepage — reference layout
   Hero split band · expertise cards · approach stages · sector cards · insights
   ========================================================================== */
.rx-sec{padding-block:clamp(4rem,2.6rem + 6.4vw,7rem)}

/* ---- shared section head: title left, supporting copy and link right ---- */
.rx-head{display:grid;gap:1.6rem;margin-bottom:clamp(2.4rem,4.6vw,3.8rem)}
@media(min-width:900px){
  .rx-head{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(1.6rem,3.2vw,2.8rem);
    align-items:end;margin-bottom:clamp(2.8rem,5vw,4.2rem)}
}
/* homepage section titles sit at a smaller scale than the interior-page h2 */
.rx-head h2,.rx-app-head h2,.rx-ins-head h2{
  font-size:clamp(1.35rem,1rem + 1vw,1.7rem);line-height:1.14;letter-spacing:-.022em}
.rx-head h2{text-wrap:pretty}
.rx-head-aside{display:grid;gap:1.5rem;justify-items:start}
@media(min-width:900px){
  .rx-head-aside{grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.4rem,3vw,2.6rem);
    align-items:end}
  .rx-head-aside p{max-width:40ch}
  .rx-head-aside .link-arrow{justify-self:end;white-space:nowrap}
}
.rx-head-aside p{font-size:clamp(.95rem,.92rem + .2vw,1.0625rem);line-height:1.65;color:var(--muted)}
.rx-head--stack{grid-template-columns:minmax(0,1fr)}
.rx-rule{display:block;width:64px;height:2px;margin-top:1.5rem;background:var(--gold)}

/* ==========================================================================
   Hero
   ========================================================================== */
.rx-hero{position:relative;display:grid;overflow:hidden;color:var(--on-dark);
  background:var(--teal);background-image:var(--surface-dark);
  padding-top:calc(var(--hdr) + clamp(2.2rem,4.6vw,4rem));
  padding-bottom:clamp(2.2rem,4.6vw,3.6rem)}
.rx-hero-grid{position:relative;z-index:3}
/* the photograph bleeds past the container to the viewport edge */
.rx-hero-media{position:relative;order:2;z-index:1;height:clamp(13rem,46vw,20rem)}
.rx-hero-media picture{display:block;height:100%}
/* the frame is wide and the people sit in its lower half, so the stacked mobile
   crop is anchored to the bottom rather than the middle */
.rx-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  filter:saturate(.86) contrast(1.06) brightness(.96);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%)}
.rx-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,75,71,.94) 0%,rgba(13,75,71,.24) 32%,
    rgba(8,51,47,.36) 100%)}
.rx-hero-wedge{display:none}
@media(min-width:1040px){
  .rx-hero{display:block;padding-bottom:0;min-height:clamp(27rem,54vw,37rem)}
  .rx-hero-grid{display:flex;align-items:center;min-height:clamp(27rem,54vw,37rem)}
  .rx-hero-copy{max-width:min(42rem,46vw)}
  /* starts below the fixed header — the bar is opaque at every scroll position, so
     the photo's top edge is never seen */
  .rx-hero-media{position:absolute;inset:var(--hdr) 0 0 auto;width:76%;height:auto;order:0}
  /* the sky occupies the upper half of the frame and the three executives the
     lower half; anchoring low keeps them in shot and leaves the skyline above */
  .rx-hero-media img{object-position:50% 78%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 11%,#000 31%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 11%,#000 31%)}
  /* starts transparent so the wash bleeds into the flat teal with no seam, then
     deepens across the left third where the daylight sky sits behind the
     headline, and eases off over the shaded interior on the right */
  .rx-hero-media::after{background:linear-gradient(90deg,rgba(13,75,71,.34) 0%,
    rgba(13,75,71,.52) 13%,rgba(13,75,71,.46) 26%,rgba(12,68,64,.26) 42%,
    rgba(11,60,56,.06) 58%,rgba(9,57,53,.12) 78%,rgba(8,51,47,.28) 100%)}
  .rx-hero-wedge{display:block;position:absolute;left:0;bottom:0;width:76%;height:46%;z-index:2;
    background:linear-gradient(180deg,rgba(13,75,71,0) 0%,rgba(10,63,59,.9) 86%);
    clip-path:polygon(0 58%,100% 100%,0 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 22%)}
}
.rx-hero-eyebrow{display:flex;align-items:center;gap:.85rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:1.6rem}
.rx-hero-eyebrow i{width:26px;height:1px;background:currentColor;flex:none}
.rx-hero-h1{font-size:clamp(2.1rem,3.4vw,3.6rem);line-height:1.08;
  letter-spacing:-.034em;margin-bottom:1.5rem}
.rx-hero-h1 span{display:block;color:var(--on-dark)}
.rx-hero-h1 em{display:block;font-style:normal;color:var(--gold-2)}
.rx-hero-lede{font-size:clamp(1rem,.95rem + .32vw,1.1875rem);line-height:1.62;
  color:var(--on-dark-muted);max-width:44ch}
.rx-hero-rule{display:block;width:58px;height:2px;background:var(--gold);
  margin:1.9rem 0 2rem}
.rx-hero-btn{padding:1rem 1.75rem;font-size:.75rem}

/* top-right rail + South Africa pin, both aligned to the content edge */
.rx-hero-rail{position:relative;z-index:5;display:flex;flex-direction:column;gap:.55rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);padding-left:1.05rem;
  border-left:1px solid var(--line-gold)}
.rx-hero-rail > span{font-size:.6875rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-dark);text-shadow:0 1px 14px rgba(6,38,35,.6)}
.rx-hero-pin{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.4rem;max-width:15ch}
.rx-hero-pin svg{width:18px;height:18px;flex:none;margin-top:.1rem;color:var(--gold-2)}
.rx-hero-pin span{display:block;font-size:.625rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.7;color:var(--gold-2);
  text-shadow:0 1px 14px rgba(6,38,35,.6)}
.rx-hero-pin b{display:block;color:var(--on-dark);font-weight:700}
@media(min-width:1040px){
  .rx-hero-rail{position:absolute;top:clamp(.3rem,1.8vw,1.5rem);right:var(--gut);
    margin-top:0;align-items:flex-start}
  .rx-hero-pin{position:absolute;bottom:clamp(1.3rem,2.4vw,2.1rem);right:var(--gut);
    margin-top:0}
}

/* ==========================================================================
   Expertise cards
   ========================================================================== */
.rx-svc{--rx-gap:1px;display:flex;gap:var(--rx-gap);background:var(--line);
  border:1px solid var(--line);box-shadow:var(--ring-paper);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.rx-svc::-webkit-scrollbar{display:none}
/* at five-up nothing needs to scroll — clip so the entrance sweep can't add slack */
@media(min-width:1240px){.rx-svc:not(.is-slider){overflow:hidden}}
/* Five across at desktop (the reference layout). Narrower than that the row no longer
   fits, so the same track becomes a snap slider — cards sweep right-to-left — rather
   than wrapping into stacked rows. */
.rx-card{flex:0 0 84%;min-width:0;scroll-snap-align:start}
@media(min-width:620px){.rx-card{flex:0 0 calc((100% - var(--rx-gap))/2)}}
@media(min-width:1020px){.rx-card{flex:0 0 calc((100% - var(--rx-gap)*2)/3)}}
@media(min-width:1240px){.rx-card{flex:0 0 calc((100% - var(--rx-gap)*4)/5)}}
/* in slider mode the hairline frame and 1px joins give way to real gaps and a soft
   ring per card, so the tilt has somewhere to breathe */
.rx-svc.is-slider{--rx-gap:clamp(.8rem,1.7vw,1.3rem);background:transparent;
  border-color:transparent;box-shadow:none;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;cursor:grab;
  padding:.3rem .15rem 1rem}
.rx-svc.is-slider:active{cursor:grabbing}
.rx-svc.is-slider .rx-card{outline:1px solid var(--line);outline-offset:-1px;
  box-shadow:0 20px 44px -36px rgba(18,33,31,.6);will-change:transform}
.rx-card{display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.6rem,3vw,2.1rem);
  background:var(--white);border-top:2px solid transparent;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.rx-card:hover{border-top-color:var(--gold);transform:translateY(-4px);
  box-shadow:0 22px 46px -30px rgba(18,33,31,.5);z-index:2}

/* the slider's own controls — only present while the track actually scrolls */
.rx-svc-ctl{display:flex;align-items:center;gap:1.1rem;margin-top:1.5rem}
.rx-svc-ctl[hidden]{display:none}
.rx-dots{display:flex;align-items:center;gap:.5rem;margin-right:auto}
.rx-dot{position:relative;width:26px;height:2px;padding:0;border:0;background:var(--line);cursor:pointer;
  transition:background .35s var(--ease),width .35s var(--ease)}
/* the rule is 2px tall, which is a hairline to look at and impossible to hit — the pad grows the
   target to a thumb's height without thickening the line. */
.rx-dot::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
.rx-dot[aria-current="true"]{background:var(--gold);width:44px}
.rx-nav{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
  border-radius:100px;background:var(--white);color:var(--ink);cursor:pointer;
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.rx-nav:hover:not(:disabled){border-color:var(--gold);color:var(--gold-deep)}
.rx-nav:disabled{opacity:.32;cursor:default}
.rx-nav svg{width:16px;height:16px}

/* expertise cards arrive by sweeping in from the right with a tilt, not by dropping in */
.js .rx-card[data-reveal]{opacity:0;
  transform:perspective(1100px) translate3d(52px,10px,0) rotateY(-8deg)}
.js .rx-card[data-reveal].in{opacity:1;transform:perspective(1100px) rotateY(0deg)}
/* the staggered delay is only for the entrance; tilting on scroll must track the finger */
.rx-svc.is-live .rx-card[data-reveal]{transition-delay:0s}
.rx-svc.is-slider.is-live .rx-card[data-reveal]{transition-duration:.5s}
.rx-ico{display:block;color:var(--gold);margin-bottom:.5rem}
.rx-ico svg{width:34px;height:34px}
.rx-ico--sm{margin:0 0 .1rem}
.rx-ico--sm svg{width:24px;height:24px}
.rx-card h3{font-size:1.0625rem;font-weight:700;line-height:1.24;letter-spacing:-.018em}
/* reserve the tallest heading wrap so body copy starts on one line across the row */
@media(min-width:620px){.rx-card h3{min-height:2.48em}}
@media(min-width:1240px){.rx-card h3{min-height:3.72em}}
.rx-card p{font-size:.875rem;line-height:1.6;color:var(--muted)}
.rx-more{margin-top:auto;padding-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep)}
.rx-more svg{transition:transform .4s var(--ease)}
.rx-card:hover .rx-more svg,.rx-icard:hover .rx-more svg{transform:translateX(5px)}

/* ==========================================================================
   Approach stages
   ========================================================================== */
.rx-app{display:grid;gap:clamp(2.4rem,5vw,3.4rem)}
@media(min-width:980px){
  .rx-app{grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);
    gap:clamp(2rem,4vw,3.6rem);align-items:start}
}
.rx-app-head{display:grid;justify-items:start}
.rx-app-head .eyebrow{margin-bottom:1.1rem}
.rx-app-head h2{max-width:20ch}
.rx-stages{--g:clamp(1.6rem,3.6vw,3.4rem);list-style:none;margin:0;padding:0;
  display:grid;gap:var(--g)}
@media(min-width:900px){.rx-stages{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rx-stage{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.4rem .75rem;
  align-items:center;align-content:start;justify-items:start}
.rx-stage-ico{grid-area:1/1;display:grid;place-items:center;width:54px;height:54px;
  border-radius:50%;background:var(--teal);background-image:var(--surface-dark-2);
  color:var(--on-dark)}
.rx-stage-ico svg{width:26px;height:26px}
.rx-stage-num{grid-area:1/2;font-size:.75rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold-deep);font-variant-numeric:tabular-nums}
.rx-stage h3{grid-column:1/-1;margin-top:.55rem;font-size:1.1875rem;font-weight:700;
  letter-spacing:-.02em}
.rx-stage p{grid-column:1/-1;font-size:.875rem;line-height:1.58;color:var(--muted);
  max-width:24ch}
/* gold chevron centred on the gap between stages */
@media(min-width:900px){
  .rx-stage:not(:last-child)::after{content:"";position:absolute;top:24px;
    left:calc(100% + var(--g)/2);width:9px;height:9px;transform:translateX(-50%) rotate(45deg);
    border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);opacity:.9}
}

/* ==========================================================================
   Sector cards
   ========================================================================== */
.rx-sec-grid{display:grid;gap:clamp(1.1rem,2.2vw,1.6rem)}
@media(min-width:520px){.rx-sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:820px){.rx-sec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1120px){.rx-sec-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.rx-scard{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--ring-paper);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.rx-scard:hover{transform:translateY(-5px);border-color:var(--line-gold);
  box-shadow:0 26px 52px -32px rgba(18,33,31,.55)}
.rx-scard-media{margin:0;aspect-ratio:3/2;overflow:hidden;isolation:isolate}
.rx-scard-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.rx-scard:hover .rx-scard-media img{transform:scale(1.055)}
.rx-scard-body{display:flex;flex-direction:column;gap:.55rem;flex:1;
  padding:clamp(1.1rem,2.2vw,1.5rem)}
.rx-scard-body h3{font-size:.9375rem;font-weight:700;line-height:1.28;letter-spacing:-.015em}
.rx-scard-body p{font-size:.8125rem;line-height:1.55;color:var(--muted)}

/* ---- sectors banner ------------------------------------------------------
   The five sector tiles sit in a row that shows three at a time (two on a
   tablet, one on a phone) and walks itself right to left without stopping, so
   it reads as a banner rather than a carousel. Trailing copies of the opening
   tiles make the row repeat seamlessly, which lets it run forever and be
   dragged either way without ever reaching an end. It stands still under a
   pointer, to a keyboard focus and in a background tab. Reduced motion stops
   the walking and hands the row back to the browser to scroll and swipe.
   --per is how many tiles the row shows. Without JS the list falls back to the
   card grid it replaced. */
.sec-slider{--per:1;--sec-gap:clamp(1.1rem,2.2vw,1.6rem);position:relative}
@media(min-width:700px){.sec-slider{--per:2}}
@media(min-width:1020px){.sec-slider{--per:3}}
.sec-viewport{overflow:hidden;touch-action:pan-y}
.sec-track{display:grid;gap:var(--sec-gap);margin:0;padding:0;list-style:none}
@media(min-width:520px){.sec-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:820px){.sec-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1120px){.sec-track{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sec-slide{min-width:0;display:flex}
.sec-slide>.rx-scard{flex:1}
.js .sec-track{display:flex;gap:var(--sec-gap);grid-template-columns:none;
  will-change:transform}
.js .sec-slide{flex:0 0 calc((100% - (var(--per) - 1) * var(--sec-gap)) / var(--per))}
.js .sec-slider.is-drag{cursor:grabbing;user-select:none}
.js .sec-slide img{-webkit-user-drag:none}
/* reduced motion: the row stops walking and becomes a swipeable strip instead */
@media(prefers-reduced-motion:reduce){
  .js .sec-viewport{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;
    scroll-snap-type:x mandatory;scrollbar-width:none}
  .js .sec-viewport::-webkit-scrollbar{display:none}
  .js .sec-slide{scroll-snap-align:start}
}

/* each sector is a portrait tile — photograph, icon, name, one line — so three
   of them sit comfortably in the row and the whole tile is a single link */
.rx-scard--slide .rx-scard-media{aspect-ratio:4/3}
.rx-scard--slide .rx-scard-body{gap:.5rem;padding:clamp(1.1rem,2vw,1.4rem)}
.rx-scard--slide .rx-scard-body h3{font-size:1.0625rem;line-height:1.25;letter-spacing:-.02em}
.rx-scard--slide .rx-scard-body p{font-size:.875rem;line-height:1.55}
.rx-scard--slide .rx-ico--sm svg{width:26px;height:26px}
.sec-more{margin-top:.55rem;align-self:flex-start;border-bottom-color:var(--line)}
.rx-scard--slide:hover .sec-more{color:var(--gold-deep);border-color:var(--gold)}
.rx-scard--slide:hover .sec-more svg{transform:translateX(5px)}

/* ==========================================================================
   Insights
   ========================================================================== */
.rx-ins-grid{display:grid;gap:clamp(2.2rem,4.4vw,3.6rem)}
@media(min-width:1020px){
  .rx-ins-grid{grid-template-columns:minmax(0,.28fr) minmax(0,1fr);
    gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
}
.rx-ins-head{display:grid;gap:1.1rem;justify-items:start}
.rx-ins-head h2{max-width:16ch}
.rx-ins-head p{font-size:1rem;line-height:1.65;color:var(--muted);max-width:36ch}
.rx-ins-head .link-arrow{margin-top:.6rem}
.rx-ins-cards{display:grid;gap:clamp(1.4rem,2.6vw,2rem)}
@media(min-width:640px){.rx-ins-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.rx-ins-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rx-icard{display:flex;flex-direction:column;gap:.7rem}
.rx-icard-media{margin:0 0 .4rem;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  background:var(--paper-2)}
.rx-icard-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.rx-icard:hover .rx-icard-media img{transform:scale(1.05)}
.rx-icard-tag{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep)}
.rx-icard h3{font-size:1.0625rem;font-weight:700;line-height:1.3;letter-spacing:-.018em}
.rx-icard p{font-size:.875rem;line-height:1.6;color:var(--muted)}
.rx-icard .rx-more{padding-top:.5rem}

/* hero entrance, gated on JS so no-JS readers see everything */
.js .rx-hero-eyebrow,.js .rx-hero-h1,.js .rx-hero-lede,.js .rx-hero-rule,.js .rx-hero-btn,
.js .rx-hero-media,.js .rx-hero-rail,.js .rx-hero-pin{opacity:0;
  animation:rise 1.1s var(--ease-out) forwards}
.js .rx-hero-eyebrow{animation-delay:.1s}
.js .rx-hero-h1{animation-delay:.22s}
.js .rx-hero-lede{animation-delay:.36s}
.js .rx-hero-rule{animation-delay:.46s}
.js .rx-hero-btn{animation-delay:.54s}
.js .rx-hero-media{animation-delay:.3s}
.js .rx-hero-rail{animation-delay:.68s}
.js .rx-hero-pin{animation-delay:.78s}
@media(prefers-reduced-motion:reduce){
  .js .rx-hero-eyebrow,.js .rx-hero-h1,.js .rx-hero-lede,.js .rx-hero-rule,.js .rx-hero-btn,
  .js .rx-hero-media,.js .rx-hero-rail,.js .rx-hero-pin{opacity:1;animation:none}
  .rx-card,.rx-scard,.rx-icard,.rx-scard-media img,.rx-icard-media img,
  .js .sec-track{transition:none!important}
  .rx-card:hover,.rx-scard:hover{transform:none}
  .rx-scard:hover .rx-scard-media img,.rx-icard:hover .rx-icard-media img{transform:none}
}
@media print{
  .rx-svc,.rx-sec-grid,.rx-ins-cards,.sec-slider{break-inside:avoid}
  /* every sector once, not just the ones the banner happens to be showing */
  .sec-slide--loop{display:none}
  .sec-viewport{overflow:visible}
  .sec-track,.js .sec-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;transform:none!important}
}

/* ==========================================================================
   Floating chat assistant
   ========================================================================== */
.cb{position:fixed;z-index:200;right:clamp(1rem,2.4vw,1.75rem);
  bottom:calc(clamp(1rem,2.4vw,1.75rem) + env(safe-area-inset-bottom,0px));
  font-family:var(--font-body)}

/* ---- launcher ---- */
.cb-launch{display:inline-flex;align-items:center;gap:.6rem;height:56px;padding:0 1.15rem;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;cursor:pointer;
  background:var(--brass);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;
  box-shadow:0 18px 38px -18px rgba(168,122,36,.9),0 4px 12px -6px rgba(18,33,31,.28);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.cb-launch:hover,.cb-launch:focus-visible{transform:translateY(-3px);
  box-shadow:0 26px 44px -18px rgba(168,122,36,.95),0 6px 16px -6px rgba(18,33,31,.3)}
.cb-launch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cb-ico{position:relative;display:grid;place-items:center;width:22px;height:22px;flex:none}
.cb-ico svg{position:absolute;inset:0;margin:auto;transition:opacity .28s var(--ease),transform .38s var(--ease-out)}
.cb-ico .i-headset{opacity:1;transform:none}
.cb-ico .i-x{opacity:0;transform:rotate(-40deg) scale(.6)}
.cb[data-open="true"] .i-headset{opacity:0;transform:rotate(40deg) scale(.6)}
.cb[data-open="true"] .i-x{opacity:1;transform:none}
.cb-launch-label{white-space:nowrap}
.cb-dot{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;
  background:var(--gold);border:2px solid #0f5852;display:none}
@media(max-width:520px){.cb-launch{padding:0;width:56px;justify-content:center}.cb-launch-label{display:none}}

/* ---- panel ---- */
.cb-panel{position:absolute;right:0;bottom:calc(100% + .85rem);
  display:flex;flex-direction:column;width:min(400px,calc(100vw - 2rem));
  height:min(640px,calc(100vh - 10.5rem));
  height:min(640px,calc(100dvh - 10.5rem));
  background:var(--surface-paper);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow-l);overflow:hidden;transform-origin:100% 100%;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);
  transition:opacity .32s var(--ease),transform .42s var(--ease-out),visibility 0s .42s}
.cb[data-open="true"] .cb-panel{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--ease),transform .5s var(--ease-out),visibility 0s}
@media(max-width:520px){
  .cb-panel{position:fixed;left:.75rem;right:.75rem;bottom:calc(5.4rem + env(safe-area-inset-bottom,0px));
    width:auto;height:min(560px,calc(100vh - 9rem));
    height:min(560px,calc(100dvh - 9rem));border-radius:16px}
}
/* on a short viewport the transcript still wins the space — the footer note is
   the first thing to go */
@media(max-height:560px){
  .cb-note{display:none}
  .cb-log{min-height:3.5rem}
}

.cb-head{display:flex;align-items:center;gap:.8rem;padding:.95rem 1rem;
  background:var(--surface-dark);color:var(--on-dark);flex:none}
.cb-head-mark{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--brass);color:var(--ink);font-family:var(--font-display);
  font-weight:800;font-size:.8125rem;letter-spacing:-.02em}
.cb-head-txt{min-width:0}
.cb-head-txt b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:.9375rem;letter-spacing:-.012em;color:var(--on-dark)}
.cb-head-txt span{display:block;font-size:.6875rem;color:var(--on-dark-muted);line-height:1.45}
.cb-close{margin-left:auto;display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:0;border-radius:8px;background:rgba(242,245,243,.09);color:var(--on-dark);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease)}
.cb-close:hover,.cb-close:focus-visible{background:rgba(242,245,243,.2);color:var(--white)}
.cb-close:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

/* ---- transcript ---- */
/* min-height keeps the conversation readable no matter how many suggestions the
   quick rail is holding */
.cb-log{flex:1;min-height:8.5rem;overflow-y:auto;overscroll-behavior:contain;
  padding:1rem 1rem .35rem;display:flex;flex-direction:column;gap:.85rem;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.cb-log::-webkit-scrollbar{width:8px}
.cb-log::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.cb-msg{max-width:86%;font-size:.875rem;line-height:1.62;border-radius:12px;
  padding:.7rem .85rem;animation:cb-in .42s var(--ease-out) both}
.cb-msg--bot{align-self:flex-start;background:var(--white);border:1px solid var(--line);
  color:var(--ink);border-bottom-left-radius:4px}
.cb-msg--me{align-self:flex-end;background:var(--teal);color:var(--on-dark);
  border-bottom-right-radius:4px}
.cb-msg p+p{margin-top:.6rem}
.cb-msg a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.cb-msg--me a{color:var(--gold-2)}
.cb-msg b{font-weight:700}
@keyframes cb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cb-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:.85rem .95rem;
  background:var(--white);border:1px solid var(--line);border-radius:12px;border-bottom-left-radius:4px}
.cb-typing i{width:5px;height:5px;border-radius:50%;background:var(--muted-2);
  animation:cb-dot 1.15s infinite ease-in-out}
.cb-typing i:nth-child(2){animation-delay:.16s}
.cb-typing i:nth-child(3){animation-delay:.32s}
@keyframes cb-dot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- quick replies ---- */
/* one scrolling rail of short chips rather than a wrapping block of full-length
   questions, so the rail can never eat the transcript */
.cb-quick{flex:none;display:flex;flex-wrap:nowrap;gap:.4rem;padding:.3rem 1rem .8rem;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cb-quick::-webkit-scrollbar{display:none}
.cb-quick button{display:inline-flex;align-items:center;gap:.4rem;flex:none;white-space:nowrap;
  padding:.5rem .8rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--white);
  color:var(--teal);font-family:var(--font-body);font-size:.8125rem;font-weight:600;
  line-height:1.3;text-align:left;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.cb-quick button::after{content:"";width:5px;height:5px;flex:none;border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
.cb-quick button:hover,.cb-quick button:focus-visible{background:var(--teal);border-color:var(--teal);
  color:var(--on-dark)}
.cb-quick button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- composer ---- */
.cb-form{flex:none;display:flex;align-items:center;gap:.5rem;
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.cb-input{flex:1;min-width:0;height:42px;padding:0 .9rem;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:.875rem}
.cb-input::placeholder{color:var(--muted-2)}
.cb-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,75,71,.16)}
.cb-send{display:grid;place-items:center;width:42px;height:42px;flex:none;border:0;border-radius:50%;
  background:var(--brass);color:var(--ink);cursor:pointer;
  transition:transform .3s var(--ease-out),filter .3s var(--ease)}
.cb-send:hover:not(:disabled),.cb-send:focus-visible:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
.cb-send:disabled{opacity:.45;cursor:not-allowed}
.cb-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cb-note{flex:none;padding:0 1rem .7rem;font-size:.6875rem;line-height:1.5;color:var(--muted-2);
  background:rgba(255,255,255,.6)}
.cb-note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

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

@media(prefers-reduced-motion:reduce){
  .cb-launch,.cb-panel,.cb-msg,.cb-ico svg,.cb-send{transition:none;animation:none}
  .cb-panel{transform:none}
  .cb-typing i{animation:none;opacity:.6}
}
/* the portfolio book locks the page in fullscreen; its own controls sit in the
   same corner, so the launcher steps aside */
body.is-locked .cb{display:none}
@media print{.cb{display:none!important}}

/* ==========================================================================
   opening splash
   The head script decides whether this page opens with the splash and marks
   <html>, so nothing flashes underneath while it plays. The lockup is four
   clipped copies of the same supplied file, so it assembles from four
   directions into exactly that logo; a gold sheen then passes over the
   assembled lockup before the panel dissolves.
   ========================================================================== */
html.splash body>*{visibility:hidden}
html.splash body>.bpc-splash{visibility:visible}

.bpc-splash{position:fixed;inset:0;z-index:240;display:grid;place-content:center;
  justify-items:center;gap:clamp(1.5rem,3.4vw,2.4rem);
  background-color:var(--ink);background-image:var(--surface-dark);
  transition:opacity .44s var(--ease)}
.bpc-splash.is-done{opacity:0}

.bpc-splash-lock{position:relative;width:clamp(196px,25vw,308px);aspect-ratio:1664/945}
.bpc-splash-p{position:absolute;inset:0;opacity:0;
  transition:transform .64s var(--ease-out),opacity .44s var(--ease-out)}
.bpc-splash-p picture,.bpc-splash-p img{display:block;width:100%;height:100%}
.bpc-splash-p[data-p="1"]{clip-path:inset(0 50% 50% 0);transform:translate(-30px,-17px) rotate(-2.5deg)}
.bpc-splash-p[data-p="2"]{clip-path:inset(0 0 50% 50%);transform:translate(30px,-17px) rotate(2.5deg)}
.bpc-splash-p[data-p="3"]{clip-path:inset(50% 50% 0 0);transform:translate(-30px,17px) rotate(2.5deg)}
.bpc-splash-p[data-p="4"]{clip-path:inset(50% 0 0 50%);transform:translate(30px,17px) rotate(-2.5deg)}
.bpc-splash.is-run .bpc-splash-p{transform:none;opacity:1}

/* the sheen is masked by the logo itself, so the light only ever falls on the
   lockup's own pixels rather than on a bar crossing the panel */
.bpc-splash-sheen{position:absolute;inset:0;overflow:hidden;opacity:0;
  -webkit-mask-image:url(img/bpc-logo-640.png);-webkit-mask-size:100% 100%;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.bpc-splash.is-run .bpc-splash-sheen{opacity:1;transition:opacity .18s linear .44s}
.bpc-splash-sheen i{position:absolute;top:-12%;bottom:-12%;left:0;width:32%;display:block;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7) 46%,rgba(232,196,119,.92) 56%,transparent);
  transform:translateX(-180%)}
.bpc-splash.is-run .bpc-splash-sheen i{animation:bpcSheen .8s var(--ease-out) .44s both}
@keyframes bpcSheen{from{transform:translateX(-180%)}to{transform:translateX(420%)}}

.bpc-splash-word{display:flex;align-items:center;margin:0;opacity:0;transform:translateY(7px);
  font-family:var(--font-body);font-size:clamp(.6rem,.82vw,.7rem);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-muted);
  transition:opacity .5s var(--ease-out) .46s,transform .5s var(--ease-out) .46s}
.bpc-splash-word span+span::before{content:"|";color:var(--gold);margin:0 .7rem;font-weight:400}
.bpc-splash.is-run .bpc-splash-word{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.bpc-splash{display:none}}
@media print{.bpc-splash{display:none!important}}

/* ==========================================================================
   Cookie notice
   The site sets no tracking or advertising cookies (privacy.html §7), so this
   is a plain acknowledgement rather than a consent gate — it carries no
   category switches it could not honestly honour. Archivo body, brass hairline,
   bottom-left so it never sits under the chat launcher at bottom-right.
   ========================================================================== */
.ck{position:fixed;z-index:190;left:clamp(1rem,2.4vw,1.75rem);
  bottom:calc(clamp(1rem,2.4vw,1.75rem) + env(safe-area-inset-bottom,0px));
  width:min(26rem,calc(100vw - 2rem));
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1rem 1.05rem;border-radius:12px;
  border:1px solid rgba(217,164,65,.28);
  background:linear-gradient(180deg,rgba(11,42,39,.96),rgba(5,22,20,.985));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 28px 56px -24px rgba(0,0,0,.78),var(--ring-dark);
  font-family:var(--font-body);color:var(--on-dark);
  opacity:0;visibility:hidden;transform:translateY(15px);
  transition:opacity .45s var(--ease),transform .6s var(--ease-out),visibility 0s .6s}
.ck.is-in{opacity:1;visibility:visible;transform:none;
  transition:opacity .4s var(--ease),transform .6s var(--ease-out),visibility 0s}

.ck-ico{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  background:rgba(217,164,65,.14);color:var(--gold-2);
  border:1px solid rgba(217,164,65,.32)}
.ck-body{min-width:0;flex:1}
.ck-kicker{margin:0 0 .25rem;font-family:var(--font-display);font-weight:700;font-size:.6875rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2)}
.ck-text{margin:0;font-size:.8125rem;line-height:1.52;color:var(--on-dark-muted)}
.ck-text a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(217,164,65,.6);transition:color .25s var(--ease)}
.ck-text a:hover,.ck-text a:focus-visible{color:var(--gold-2)}
.ck-act{margin-top:.8rem}
.ck-btn{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 1.25rem;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;cursor:pointer;
  background:var(--brass);color:var(--ink);font-family:var(--font-display);font-weight:700;
  font-size:.8125rem;letter-spacing:-.005em;
  box-shadow:0 12px 24px -14px rgba(168,122,36,.95);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.ck-btn:hover,.ck-btn:focus-visible{transform:translateY(-2px);
  box-shadow:0 18px 30px -14px rgba(168,122,36,1)}
.ck-btn:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
/* on a phone the notice spans the width and sits just above the chat launcher, so the two
   never share a corner */
@media(max-width:520px){.ck{right:clamp(1rem,2.4vw,1.75rem);width:auto;
  bottom:calc(5rem + env(safe-area-inset-bottom,0px))}}
/* the menu is a full-screen overlay but sits below the notice in the stack, so without this the
   card would float over the panel's contact row. It is a low-priority acknowledgement — while a
   menu is open it should simply get out of the way. */
body.is-nav-open .ck{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.ck,.ck.is-in{transition:none}}
@media print{.ck{display:none!important}}