/* ==========================================================================
   THE WORLD — editorial / cinematic / premium public site
   ========================================================================== */
body[data-surface="world"]{ --surface-accent: var(--red); }

/* ---------- main nav ---------- */
.world-nav{
  position:fixed; top:34px; left:0; right:0; z-index:90;
  height:88px; display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.world-nav.solid{
  height:72px; background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.world-nav:not(.on-dark) { background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); height:72px; }
.world-nav .nav-inner{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; }
.world-nav .logo-mark{ height:30px; width:auto; display:block; }
.world-nav.on-dark .logo-mark{ filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
.world-navlinks{ display:flex; align-items:center; gap:36px; list-style:none; }
.world-navlinks a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--ink); opacity:.78; transition:opacity .2s ease; }
.world-nav.on-dark .world-navlinks a{ color:#fff; }
.world-navlinks a:hover, .world-navlinks a.current{ opacity:1; }
.world-nav .menu-btn{ display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; cursor:pointer; padding:8px; }
.world-nav .menu-btn span{ display:block; height:1.5px; width:100%; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.world-nav.on-dark .menu-btn span{ background:#fff; }
.world-nav .menu-btn.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.world-nav .menu-btn.open span:nth-child(2){ opacity:0; }
.world-nav .menu-btn.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width: 900px){
  .world-navlinks{ display:none; }
  .world-nav .btn-primary{ display:none; }
  .world-nav .menu-btn{ display:flex; }
}

/* ---------- home hero, ported verbatim from mockups/14-billboard-filmstrip-combo.html
   (its own nav + hero + rail + ticker + scroll indicator, same class names,
   same CSS). Only necessary change: `header` -> `#siteHeader` so it doesn't
   also hijack every other page's <header class="page-header">, and `.hero`
   height accounts for the 34px ecosystem-bar strip fixed above it, same as
   .world-nav already does on every other page. ---------- */
#siteHeader{ position:fixed; top:34px; left:0; right:0; z-index:60; background:transparent; transition:background .4s ease, backdrop-filter .4s ease; }
#siteHeader.solid{ background:rgba(5,10,18,.86); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
#siteHeader .nav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 48px; height:88px; display:flex; align-items:center; justify-content:space-between; }
#siteHeader .logo img{ height:25px; width:auto; filter:brightness(0) invert(1); }
#siteHeader .nav-links{ display:flex; align-items:center; gap:38px; list-style:none; }
#siteHeader .nav-links a{ font-size:13px; font-weight:500; text-decoration:none; color:rgba(255,255,255,.72); transition:color .2s ease; }
#siteHeader .nav-links a:hover{ color:#fff; }
#siteHeader .nav-cta{ font-size:13px; font-weight:600; text-decoration:none; color:var(--black, #050a12); background:#fff; padding:11px 22px; border-radius:2px; transition:background .25s ease, color .25s ease; }
#siteHeader .nav-cta:hover{ background:var(--red); color:#fff; }

#siteHeader .menu-btn{ display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; cursor:pointer; padding:8px; }
#siteHeader .menu-btn span{ display:block; height:1.5px; width:100%; background:#fff; transition:transform .3s ease, opacity .3s ease; }
#siteHeader .menu-btn.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
#siteHeader .menu-btn.open span:nth-child(2){ opacity:0; }
#siteHeader .menu-btn.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-nav-scrim{
  position:fixed; inset:0; z-index:69; background:rgba(5,10,18,.45);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.mobile-nav-scrim.open{ opacity:1; pointer-events:all; }
.mobile-nav{
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 82vw); z-index:70;
  background:rgba(8,20,36,.9); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  /* the shadow only exists while the drawer is open — a permanent one leaked
     from the off-screen drawer into the right edge of every page as a dark strip */
  box-shadow:none;
  display:flex; flex-direction:column; padding:122px 28px 32px; gap:4px;
  transform:translateX(100%); pointer-events:none; visibility:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), visibility 0s linear .4s;
}
.mobile-nav.open{ transform:translateX(0); pointer-events:all; visibility:visible; box-shadow:-24px 0 60px -20px rgba(0,0,0,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease), visibility 0s; }
.mobile-nav a{ padding:18px 4px; border-bottom:1px solid rgba(255,255,255,.14); font-size:1.05rem; font-weight:500; font-family:var(--serif); text-decoration:none; color:#fff; transition:color .2s ease, padding-left .2s ease; }
.mobile-nav a:hover{ color:var(--red); padding-left:8px; }
.mobile-nav-close{ position:absolute; top:40px; right:24px; background:none; border:none; color:rgba(255,255,255,.55); font-size:28px; font-weight:200; line-height:1; cursor:pointer; padding:8px; transition:color .25s ease, transform .35s var(--ease); }
.mobile-nav-close:hover{ color:#fff; transform:rotate(90deg); }
@media (max-width:900px){ #siteHeader .nav-links{ display:none; } #siteHeader .nav-cta{ display:none; } #siteHeader .menu-btn{ display:flex; } }

.hero{ position:relative; height:calc(100vh - 34px); min-height:720px; overflow:hidden; background:#050a12; }
.hero-media{ position:absolute; inset:0; }
.hero-media video, .hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:videoIn 1.8s ease forwards; filter:saturate(1.05) brightness(.94); }
/* homepage hero: the video stays invisible while it downloads (the still picture shows),
   then fades in on top of the still once it can play through without stopping */
#heroVideo.buffering{ animation:none; opacity:0; }
#heroVideo.is-ready{ animation:none; opacity:1; transition:opacity 1s ease; z-index:1; }
@keyframes videoIn{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }

.hero{ cursor:pointer; }
.veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 780px 620px at 20% 66%, rgba(5,10,18,.7) 0%, rgba(5,10,18,.3) 46%, rgba(5,10,18,0) 74%),
    radial-gradient(ellipse 420px 560px at 97% 46%, rgba(5,10,18,.5) 0%, rgba(5,10,18,.14) 55%, rgba(5,10,18,0) 78%),
    linear-gradient(180deg, rgba(5,10,18,.4) 0%, rgba(5,10,18,0) 16%, rgba(5,10,18,0) 80%, rgba(5,10,18,.55) 100%);
}

.hero-stage{ position:relative; z-index:2; height:100%; max-width:var(--maxw); margin:0 auto; padding:0 48px; display:flex; align-items:flex-end; }
.billboard{ position:relative; max-width:580px; padding-bottom:118px; opacity:0; animation:riseIn 1s var(--ease) forwards; animation-delay:.25s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

.billboard::after{
  content:''; position:absolute; left:8%; right:calc(22% + 40px); bottom:96px; height:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent); filter:blur(5px); pointer-events:none;
}

.billboard-surface{
  position:relative; padding:36px 40px 32px;
  background:rgba(6,13,24,.36); backdrop-filter:blur(7px) saturate(130%); -webkit-backdrop-filter:blur(7px) saturate(130%);
  border:1px solid rgba(255,255,255,.15);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.billboard-surface::before{
  content:''; position:absolute; left:0; top:20px; bottom:20px; width:2px;
  background:linear-gradient(180deg, rgba(224,31,46,0), var(--red) 42%, var(--red) 58%, rgba(224,31,46,0));
  box-shadow:0 0 14px 1px rgba(224,31,46,.45);
}

.billboard .eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:16px; }
.billboard h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3.3vw,2.85rem); line-height:1.16; letter-spacing:-.01em; color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.5); }
.billboard p{ margin-top:18px; max-width:420px; font-size:.95rem; line-height:1.62; color:rgba(255,255,255,.78); }
.billboard .cta{ margin-top:26px; display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:#fff; font-size:13px; font-weight:600; padding:13px 24px; border:1px solid rgba(255,255,255,.4); border-radius:2px; transition:background .3s ease, border-color .3s ease; }
.billboard .cta svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.billboard .cta:hover{ background:var(--red); border-color:var(--red); }
.billboard .cta:hover svg{ transform:translateX(3px); }

.rail{ position:absolute; top:20%; bottom:24%; right:0; width:min(22vw,272px); z-index:2; display:flex; flex-direction:column; justify-content:space-between; }
.rail::after{ content:''; position:absolute; top:0; bottom:0; right:16px; width:1px; background:rgba(255,255,255,.09); }
.rail::before{
  content:''; position:absolute; top:-40px; bottom:-40px; left:-60px; right:-40px;
  background:radial-gradient(ellipse 100% 90% at 75% 50%, rgba(5,10,18,.6) 0%, rgba(5,10,18,.28) 55%, rgba(5,10,18,0) 85%);
  pointer-events:none; z-index:-1;
}
.sign{
  position:relative; padding:18px 34px 18px 22px; border-top:1px solid rgba(255,255,255,.14);
  opacity:0; animation:riseIn 1s var(--ease) forwards;
}
.rail .sign:first-child{ border-top:none; animation-delay:.55s; }
.rail .sign:last-child{ animation-delay:.75s; }
.sign .idx{ font-family:var(--mono, var(--serif)); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--red); text-shadow:0 0 16px rgba(224,31,46,.55), 0 2px 10px rgba(0,0,0,.7); }
.sign .tag{ margin-top:9px; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); text-shadow:0 2px 10px rgba(0,0,0,.75); }
.sign h4{ margin-top:8px; font-family:var(--serif); font-weight:500; font-size:.98rem; line-height:1.32; text-transform:uppercase; letter-spacing:.01em; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,.8); }
.sign .more{ margin-top:13px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.75); text-shadow:0 2px 10px rgba(0,0,0,.75); padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.4); transition:color .25s ease, border-color .25s ease, gap .25s ease; }
.sign .more svg{ width:10px; height:10px; }
.sign .more:hover{ color:#fff; border-color:var(--red); gap:9px; }

.ticker{ position:absolute; left:0; right:0; bottom:0; height:27px; overflow:hidden; background:rgba(5,10,18,.55); border-top:1px solid rgba(255,255,255,.06); z-index:3; }
.ticker-track{ display:flex; align-items:center; height:100%; width:max-content; white-space:nowrap; animation:tickerScroll 48s linear infinite; }
.ticker-track span{ font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.04em; color:rgba(255,255,255,.4); padding:0 20px; }
.ticker-track span.up{ color:rgba(224,31,46,.6); }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.hero-mute-btn{ position:absolute; bottom:42px; right:48px; z-index:3; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(8,20,36,.45); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); color:#fff; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.hero-mute-btn:hover{ background:rgba(8,20,36,.65); transform:scale(1.06); }
.hero-mute-btn svg{ width:19px; height:19px; }
.hero-mute-btn .icon-off{ display:none; }
.hero-mute-btn.is-muted .icon-on{ display:none; }
.hero-mute-btn.is-muted .icon-off{ display:block; }
@media (max-width:860px){ .hero-mute-btn{ bottom:16px; right:16px; width:38px; height:38px; } .hero-mute-btn svg{ width:16px; height:16px; } }

.scroll-indicator{ position:absolute; left:50%; bottom:42px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; color:rgba(255,255,255,.42); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; }
.scroll-indicator .stem{ width:1px; height:22px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.scroll-indicator .stem::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:#fff; animation:stemPulse 2.4s ease-in-out infinite; }
@keyframes stemPulse{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

@media (max-width:1200px){
  .billboard{ max-width:460px; }
  .rail{ width:min(24vw,220px); }
}

@media (max-width:860px){
  .hero{ height:auto; min-height:0; padding:104px 20px 40px; display:flex; flex-direction:column; gap:28px; }
  .hero-media{ position:absolute; inset:0; }
  .veil{ position:absolute; }
  .hero-stage{ position:relative; z-index:2; max-width:none; padding:0; height:auto; align-items:flex-start; }
  .billboard{ max-width:none; padding-bottom:0; }
  .rail{ position:relative; z-index:2; top:auto; bottom:auto; right:auto; width:auto; flex-direction:row; gap:16px; margin-top:24px; }
  .rail::after{ display:none; }
  .sign{ flex:1; border-top:none; border-left:1px solid rgba(255,255,255,.14); padding:4px 0 4px 16px; -webkit-mask-image:none; mask-image:none; }
  .sign:first-child{ padding-left:16px; }
  .ticker{ position:relative; margin-top:20px; }
  .scroll-indicator{ display:none; }
}

/* ---------- page header : contained banner, not a full-bleed stripe ---------- */
.page-header{
  position:relative; overflow:hidden; margin:126px 40px 0; border-radius:24px; padding:76px 64px;
  background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); color:#fff;
}
.page-header::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
}
.page-header::after{
  content:''; position:absolute; right:-60px; bottom:-80px; width:320px; height:320px; pointer-events:none;
  background:radial-gradient(circle, rgba(224,31,46,.3), transparent 70%);
}
.page-header .crumb, .page-header .crumb a{ position:relative; z-index:2; color:rgba(255,255,255,.6); }
.page-header .crumb a:hover{ color:#fff; }
.page-header .eyebrow{ position:relative; z-index:2; color:var(--red); }
.page-header h1{ position:relative; z-index:2; margin-top:16px; font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3.2vw,2.9rem); max-width:720px; }
.page-header p{ position:relative; z-index:2; margin-top:18px; font-size:1.02rem; line-height:1.7; color:rgba(255,255,255,.75); max-width:600px; }
@media (max-width:780px){ .page-header{ margin:118px 16px 0; padding:56px 32px; border-radius:18px; } }

/* compact variant — the Who We Are hero specifically; the base .page-header
   above still serves Journey/Business Units/Partners/Insights/Careers/Contact
   unchanged, so this is scoped rather than shrinking every page's banner */
.page-header.page-header--compact{ margin:112px 40px 0; padding:48px 64px; }
.page-header.page-header--compact h1{ max-width:640px; }
@media (max-width:780px){ .page-header.page-header--compact{ margin:100px 16px 0; padding:36px 28px; } }

/* video variant — the About page's hero specifically. The grid texture is
   suppressed (it fights with real footage); the red corner glow and the
   text/crumb/eyebrow rules above are unaffected and still apply. Given real
   room to breathe (min-height) rather than the same short block used for
   the flat-color variant, and a straight top/bottom veil for even legibility
   regardless of what the footage is doing, not a diagonal slash across it. */
.page-header.page-header--video{ background:var(--navy-deep); min-height:400px; display:flex; align-items:center; }
.page-header.page-header--video::before{ display:none; }
.page-header.page-header--video .wrap{ width:100%; }
.ph-video-wrap{ position:absolute; inset:0; z-index:0; }
.ph-video-wrap video, .ph-video-wrap img{ width:100%; height:100%; object-fit:cover; }
.ph-veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,20,36,.62) 0%, rgba(8,20,36,.4) 45%, rgba(8,20,36,.65) 100%); }
.ph-center{
  position:relative; z-index:2; text-align:center; max-width:680px; margin:20px auto 0;
  padding:36px 48px; background:rgba(8,20,36,.42); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.1); border-radius:18px;
}
@media (max-width:780px){ .ph-center{ padding:26px 24px; } }
.ph-center h1{ max-width:none; }
.ph-center p{ max-width:none; margin-left:auto; margin-right:auto; }
/* A staggered, deliberate reveal instead of the crumb/eyebrow/title/subtitle
   all appearing at once against a moving video background, which read as
   cluttered rather than composed. */
.page-header--video .crumb{ opacity:0; animation:riseIn .8s var(--ease) forwards; animation-delay:.1s; }
.page-header--video .ph-center .eyebrow{ opacity:0; animation:riseIn .8s var(--ease) forwards; animation-delay:.25s; }
.page-header--video .ph-center h1{ opacity:0; animation:riseIn .8s var(--ease) forwards; animation-delay:.4s; }
.page-header--video .ph-center p{ opacity:0; animation:riseIn .8s var(--ease) forwards; animation-delay:.55s; }
@media (max-width:780px){ .page-header.page-header--video{ min-height:340px; } }

/* units variant — Business Units list hero specifically: dominant serif
   headline with more room to breathe, a quieter breadcrumb, and a touch
   more vertical padding. Base .page-header rules (crumb color, eyebrow,
   grid texture, corner glow) are unaffected and still apply. */
.page-header.page-header--units{ padding:88px 64px 80px; }
.page-header.page-header--units .crumb{ font-size:12px; letter-spacing:.04em; opacity:.85; }
.page-header.page-header--units h1{ margin-top:20px; font-size:clamp(2.3rem,4.2vw,3.4rem); line-height:1.14; max-width:780px; }
.page-header.page-header--units p{ margin-top:20px; font-size:1.06rem; }
@media (max-width:780px){ .page-header.page-header--units{ padding:60px 32px 52px; } }

/* ---------- stats strip ---------- */
.stats{ border-bottom:1px solid var(--line); background:var(--paper); }
.stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
/* direct children only: the old `.stats-grid div` also matched the .num and .lbl
   boxes inside every stat, so each stat got its padding and divider line three times
   (huge gaps between number and label, stray half-height divider lines) */
.stats-grid > div{ padding:56px 24px; text-align:center; border-right:1px solid var(--line); }
.stats-grid > div:last-child{ border-right:none; }
.stats-grid .num{ font-family:var(--serif); font-size:2.4rem; font-weight:500; color:var(--navy); line-height:1; }
.stats-grid .lbl{ margin-top:12px; font-size:13px; font-weight:500; color:var(--ink-soft); }
@media (max-width:780px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid > div{ padding:34px 14px; border-bottom:1px solid var(--line); }
  .stats-grid > div:nth-child(even){ border-right:none; }
  /* an odd stat out takes the whole last row instead of sitting half-empty */
  .stats-grid > div:last-child:nth-child(odd){ grid-column:1 / -1; border-right:none; border-bottom:none; }
}
@media (max-width:480px){ .stats-grid .num{ font-size:2rem; } .stats-grid .lbl{ margin-top:10px; line-height:1.4; } }

/* ---------- story / who we are ---------- */
.story{ padding:120px 0; background:var(--paper-off); }
/* scoped to the About page's hero->story transition — the homepage's own
   .story teaser keeps the full 120px, unaffected */
.story.story--tight{ padding:90px 0 110px; }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.story-grid.story-grid--balanced{ gap:64px; align-items:flex-start; }
.story-grid--balanced .story-media{ margin-top:6px; }
.story-media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--navy-deep); border-radius:4px; }
.story-media img{ width:100%; height:100%; object-fit:cover; }
.story-media .duotone{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,37,64,.08), rgba(14,37,64,.32)); }
.story-grid .cap{ margin-top:8px; font-size:12px; color:var(--ink-faint); }
.story-copy .tag{ color:var(--red); }
.story-copy h2{ margin-top:16px; font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,2.6vw,2.3rem); line-height:1.3; }
.story-copy p{ margin-top:20px; font-size:1rem; line-height:1.8; color:var(--ink-soft); }
.story-copy p + p{ margin-top:16px; }
.story-copy .link{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); font-size:14px; font-weight:600; }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; } }

/* ---------- story arc timeline : 1995 -> Growth -> Expansion -> Today -> Next
   a deliberate five-beat narrative, not a generic horizontal-timeline widget ---------- */
.timeline-arc{ padding:100px 0; }
.arc-row{ display:flex; align-items:flex-start; gap:0; }
.arc-step{ flex:1; min-width:0; padding:0 20px; }
.arc-step:first-child{ padding-left:0; }
.arc-step:last-child{ padding-right:0; }
.arc-step .era{ font-family:var(--serif); font-weight:500; font-size:1rem; color:var(--red); letter-spacing:.02em; }
.arc-step h3{ margin-top:10px; font-family:var(--serif); font-weight:500; font-size:1.14rem; line-height:1.32; min-height:2.6em; }
.arc-step p{ margin-top:10px; font-size:.86rem; line-height:1.6; color:var(--ink-soft); }
.arc-arrow{ flex-shrink:0; padding-top:2px; font-family:var(--serif); font-size:1.1rem; color:var(--line); }
@media (max-width:980px){
  .arc-row{ flex-direction:column; gap:32px; }
  .arc-arrow{ display:none; }
  /* first/last-child need their own override: the desktop rules above
     (.arc-step:first-child{padding-left:0}) are more specific than plain
     .arc-step, which left the first step un-indented and out of line with the rest */
  .arc-step, .arc-step:first-child, .arc-step:last-child{ padding:0 0 0 20px; border-left:2px solid var(--line); }
  .arc-step h3{ min-height:0; }
}

/* ---------- what we are : large editorial statements, not icon cards ---------- */
.pillar-grid{ display:grid; grid-template-columns:1fr 1fr; }
.pillar{ padding:36px 40px; border-top:1px solid var(--line); }
.pillar:nth-child(-n+2){ border-top:none; }
.pillar:nth-child(odd){ padding-left:0; }
.pillar:nth-child(even){ border-left:1px solid var(--line); }
.pillar h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; letter-spacing:.01em; }
.pillar p{ margin-top:12px; font-size:.98rem; line-height:1.7; color:var(--ink-soft); max-width:44ch; }
@media (max-width:780px){
  .pillar-grid{ grid-template-columns:1fr; }
  /* :nth-child(even) must be reset too — its desktop left divider was
     surviving into the single-column stack, so every second box had a stray left border */
  .pillar, .pillar:nth-child(odd), .pillar:nth-child(even){ padding:32px 0; border-left:none; }
  .pillar:nth-child(-n+2){ border-top:1px solid var(--line); }
  .pillar:first-child{ border-top:none; }
}

/* ---------- real presence : video/photography contained to one side,
   paired with copy explaining the market position — not full-bleed alone ---------- */
.presence{ padding:100px 0; }
.presence-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.presence-col{ width:100%; }
.presence-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.presence-img{ aspect-ratio:4/3; border-radius:6px; overflow:hidden; }
.presence-img img{ width:100%; height:100%; object-fit:cover; }
.presence-media{ aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--navy-deep); box-shadow:0 30px 60px -30px rgba(14,37,64,.35); }
/* contain, not cover — the video itself is usually landscape and fills the
   frame either way, but a partner-supplied poster photo isn't guaranteed to
   match this box's aspect ratio (e.g. a portrait building photo), and
   cropping that to fill would zoom in on an arbitrary sliver of it */
.presence-media video{ width:100%; height:100%; object-fit:contain; object-position:center center; }
.presence .cap{ margin-top:14px; font-size:12.5px; color:var(--ink-faint); }
.presence-copy .tag{ color:var(--red); }
.presence-copy h2{ margin-top:14px; font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.3; }
.presence-copy p{ margin-top:18px; font-size:1rem; line-height:1.78; color:var(--ink-soft); }
@media (max-width:860px){ .presence-grid{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:520px){ .presence-row{ grid-template-columns:1fr; } }

/* ---------- founder's message : the pivot moment, given real weight ---------- */
.founder-message{ padding:120px 0; background:var(--paper-off); color:var(--ink); }
.founder-inner{ max-width:720px; margin:0 auto; text-align:center; }
.founder-inner .tag.eyebrow{ color:var(--red); }
.founder-inner p{ margin-top:24px; font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.55; color:var(--ink); }
.founder-sign{ margin-top:36px; display:inline-flex; flex-direction:column; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 32px; box-shadow:0 16px 32px -22px rgba(14,37,64,.25); }
.founder-sign .sig{ height:52px; width:auto; }
.founder-name{ font-size:13px; font-weight:600; color:var(--ink-soft); }

/* ---------- our direction : vision + mission as a conclusion, not a footnote ---------- */
.direction .tag.eyebrow{ font-size:13px; letter-spacing:.18em; margin-bottom:6px; }
.direction .vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; max-width:920px; margin:0 auto; }
.vm-card h3{ margin-top:14px; font-family:var(--serif); font-weight:500; font-size:1.65rem; line-height:1.28; color:var(--navy); }
.vm-card p{ margin-top:16px; font-size:1rem; line-height:1.75; color:var(--ink-soft); }
.direction-statement{ position:relative; margin-top:56px; padding-top:40px; text-align:center; font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.8vw,2rem); line-height:1.4; color:var(--navy); max-width:680px; margin-left:auto; margin-right:auto; }
.direction-statement::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:40px; height:2px; background:var(--red); }
@media (max-width:780px){ .direction .vm-grid{ grid-template-columns:1fr; gap:36px; } .direction-statement{ margin-top:40px; } }

/* ---------- generic content section w/ head ---------- */
.section{ padding:110px 0; }
.section.alt{ background:var(--paper-off); }
.section.section-tight{ padding:72px 0; }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
.section-head-row .view-all{ text-decoration:none; font-size:14px; font-weight:600; color:var(--navy); white-space:nowrap; }
/* CTA sitting directly under a heading (not spread to the far side of a
   row) — used where the link belongs with the heading, e.g. the About
   page's Journey teaser */
.section-head > .view-all{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:14px; font-weight:600; color:var(--navy); }

/* ---------- icon badge (shared bento component) ---------- */
.icon-badge{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-badge svg{ width:23px; height:23px; }

/* ---------- bento: business units (homepage teaser) ---------- */
.bento-units{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:24px; min-height:460px; }
.bento-feature{ grid-column:1; grid-row:1/3; position:relative; border-radius:20px; overflow:hidden; color:#fff; text-decoration:none; display:block; }
.bento-feature img, .bento-feature video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bento-feature:hover img, .bento-feature:hover video{ transform:scale(1.04); }
.bento-feature .veil{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,37,64,.92) 0%, rgba(14,37,64,.5) 48%, rgba(14,37,64,.12) 75%); }
.bento-feature .content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:40px; }
.bento-feature .icon-badge{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff; }
.bento-feature .idx{ font-size:12px; font-weight:600; letter-spacing:.1em; color:rgba(255,255,255,.65); text-transform:uppercase; margin-top:24px; }
.bento-feature h3{ margin-top:12px; font-family:var(--serif); font-weight:500; font-size:1.7rem; }
.bento-feature p{ margin-top:12px; max-width:380px; color:rgba(255,255,255,.8); font-size:.95rem; line-height:1.6; }
.bento-feature .link{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#fff; }

.bento-mini{ grid-column:2; border-radius:20px; padding:30px 32px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; transition:transform .25s var(--ease); }
.bento-mini:hover{ transform:translateY(-3px); }
.bento-mini.navy{ background:var(--navy); color:#fff; }
.bento-mini.navy .icon-badge{ background:rgba(255,255,255,.12); color:#fff; }
.bento-mini.navy p{ color:rgba(255,255,255,.72); }
.bento-mini.tint{ background:var(--paper-off); color:var(--ink); border:1px solid var(--line); }
.bento-mini.tint .icon-badge{ background:rgba(224,31,46,.1); color:var(--red); }
.bento-mini.tint p{ color:var(--ink-soft); }
.bento-mini.has-video{ position:relative; overflow:hidden; color:#fff; background:var(--navy-deep); }
.bento-mini.has-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bento-mini.has-video .veil{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,20,36,.85) 0%, rgba(8,20,36,.4) 55%, rgba(8,20,36,.15) 100%); z-index:1; }
.bento-mini.has-video .icon-badge, .bento-mini.has-video > div{ position:relative; z-index:2; }
.bento-mini.has-video .icon-badge{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff; }
.bento-mini.has-video p{ color:rgba(255,255,255,.75); }
.bento-video-credit{ position:absolute; z-index:3; right:16px; bottom:14px; font-size:9.5px; font-weight:500; letter-spacing:.04em; color:rgba(255,255,255,.6); text-shadow:0 1px 4px rgba(0,0,0,.7); pointer-events:none; }
.bento-mini h3{ margin-top:20px; font-family:var(--serif); font-weight:500; font-size:1.2rem; }
.bento-mini p{ margin-top:10px; font-size:.86rem; line-height:1.6; }
.bento-mini .link{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }

@media (max-width:900px){
  .bento-units{ grid-template-columns:1fr; grid-template-rows:none; min-height:0; }
  .bento-feature{ grid-column:1; grid-row:auto; min-height:340px; }
  .bento-mini{ grid-column:1; min-height:200px; }
}

/* ---------- bento: insights (homepage teaser) ---------- */
.bento-insights{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:stretch; }
.insight-feature{ position:relative; border-radius:20px; overflow:hidden; min-height:420px; color:#fff; text-decoration:none; display:block; }
.insight-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.insight-feature:hover img{ transform:scale(1.04); }
.insight-feature .veil{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,37,64,.9) 0%, rgba(14,37,64,.45) 50%, rgba(14,37,64,.1) 78%); }
.insight-feature .content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:36px; }
.insight-feature .cat{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.insight-feature h3{ margin-top:14px; font-family:var(--serif); font-weight:500; font-size:1.6rem; line-height:1.3; max-width:460px; }
.insight-feature .date{ margin-top:14px; font-size:.82rem; color:rgba(255,255,255,.6); }

.insight-compact-stack{ display:flex; flex-direction:column; gap:0; }
.insight-compact{ display:flex; gap:18px; text-decoration:none; color:inherit; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.insight-compact:first-child{ padding-top:0; }
.insight-compact:last-child{ border-bottom:none; padding-bottom:0; }
.insight-compact .thumb{ width:92px; height:92px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.insight-compact .thumb img{ width:100%; height:100%; object-fit:cover; }
.insight-compact .cat{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.insight-compact h4{ margin-top:8px; font-size:.98rem; font-weight:600; line-height:1.4; }
.insight-compact .date{ margin-top:8px; font-size:.78rem; color:var(--ink-faint); }
@media (max-width:900px){ .bento-insights{ grid-template-columns:1fr; } .insight-feature{ min-height:320px; } }

/* ---------- leadership org chart cards ---------- */
/* leader cards deliberately have no card box (no background/border/padding)
   — in an org chart the photo + connector lines carry the structure, a gray
   rectangle around each name only fights that. (.units-grid/.discipline-card,
   the Business Units list page's own grid, live further down.) */
.unit-card.leader{ cursor:default; text-align:center; padding:0; background:none; border-top:none; border-radius:0; }
.unit-card.leader:hover{ transform:none; box-shadow:none; }
.unit-card.leader .photo{
  width:96px; height:96px; border-radius:50%; overflow:hidden; margin:0 auto 16px;
  border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line), 0 12px 24px -14px rgba(14,37,64,.3);
}
.unit-card.leader .photo img{ width:100%; height:100%; object-fit:cover; }
.unit-card.leader .photo .initials{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--navy-deep); color:#fff; font-family:var(--serif); font-weight:500; font-size:1.3rem; }
.unit-card.leader h3{ margin-top:0; font-size:1rem; }
/* fixed-height title line so a two-line title ("Commercial Director &
   Shareholder") and a one-line title ("Strategy Director") still leave every
   photo circle sitting at the same height */
.unit-card.leader p{ margin-top:4px; font-size:.82rem; line-height:1.3; color:var(--ink-soft); min-height:2.6em; display:flex; align-items:flex-start; justify-content:center; }

/* ---------- org chart : CEO clearly dominant at the top, three identical
   reports beneath, connected precisely rather than loosely ---------- */
.org-chart{ --org-w:136px; display:flex; flex-direction:column; align-items:center; }
.org-ceo{ position:relative; padding-bottom:36px; }
.org-ceo::after{ content:''; position:absolute; left:50%; bottom:0; width:1px; height:36px; background:var(--line); transform:translateX(-50%); }
.org-ceo .unit-card.leader{ width:240px; }
/* a founder on their own: no connector line hanging down to people who aren't there */
.org-ceo.org-ceo--alone{ padding-bottom:0; }
.org-ceo.org-ceo--alone::after{ display:none; }
.org-ceo .photo{ width:136px !important; height:136px !important; margin-bottom:20px !important; }
.org-ceo h3{ font-size:1.15rem; }
.org-ceo p{ margin-top:6px !important; font-size:.88rem !important; }

.org-reports{ display:flex; justify-content:center; align-items:flex-start; gap:20px; position:relative; padding-top:36px; flex-wrap:wrap; }
.org-reports::before{
  content:''; position:absolute; top:0; left:calc(var(--org-w) / 2); right:calc(var(--org-w) / 2);
  height:1px; background:var(--line);
}
.org-report{ position:relative; width:var(--org-w); flex-shrink:0; }
.org-report::before{ content:''; position:absolute; left:50%; top:-36px; width:1px; height:36px; background:var(--line); transform:translateX(-50%); }
.org-report .unit-card.leader{ width:var(--org-w); }
.org-report .unit-card.leader .photo{ width:70px; height:70px; }
@media (max-width:1100px){
  .org-chart{ --org-w:120px; }
  .org-reports{ gap:16px; }
  .org-report .unit-card.leader .photo{ width:64px; height:64px; }
}
@media (max-width:760px){
  .org-reports{ flex-direction:column; align-items:center; gap:32px; padding-top:32px; }
  .org-reports::before{ display:none; }
  .org-report::before{ display:none; }
  .org-ceo{ padding-bottom:0; }
  .org-ceo::after{ height:32px; }
  .org-report .unit-card.leader .photo{ width:96px; height:96px; }
}

/* ================================================================
   Business unit detail — rebuilt as its own small system (hero,
   overview, solutions grid, partners) rather than patched CSS. Every
   unit currently has 0 real products and no hero photo, so the two
   things that most needed rework were: the "no photo" hero (previously
   a huge empty diagonal gradient) and the category loop (previously a
   heavy "Equipment Category" block per item, each showing nothing but
   a "No products yet" sentence).
   ================================================================ */
.unit-hero{ position:relative; overflow:hidden; min-height:260px; display:flex; align-items:flex-end; background:var(--navy-deep); }
.unit-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.unit-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.unit-hero .veil{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,20,36,.92) 0%, rgba(8,20,36,.55) 55%, rgba(8,20,36,.25) 100%); }
.unit-hero.no-photo{ background:linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%); }
.unit-hero.no-photo::before{ content:''; position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:44px 44px; }
.unit-hero.no-photo::after{ content:''; position:absolute; right:-10%; top:-25%; width:560px; height:560px; background:radial-gradient(circle, rgba(224,31,46,.16), transparent 70%); pointer-events:none; }
.unit-hero.no-photo .veil{ display:none; }

.unit-hero-copy{ position:relative; z-index:2; width:100%; padding:128px 0 32px; color:#fff; }
.unit-hero-copy .crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:12.5px; color:rgba(255,255,255,.55); }
.unit-hero-copy .crumb a, .unit-hero-copy .crumb span{ white-space:nowrap; }
.unit-hero-copy .crumb a{ color:rgba(255,255,255,.55); text-decoration:none; transition:color .2s ease; }
.unit-hero-copy .crumb a:hover{ color:#fff; }
.unit-hero-copy .crumb span{ opacity:.5; }
.unit-hero-top{ margin-top:18px; display:flex; align-items:center; gap:14px; }
.unit-hero-badge{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.unit-hero-badge svg{ width:20px; height:20px; }
.unit-hero .idx{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.unit-hero h1{ margin-top:14px; font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.15; max-width:820px; }
.unit-hero .tagline{ margin-top:10px; font-size:1rem; line-height:1.6; color:rgba(255,255,255,.78); max-width:640px; }
.unit-hero-meta{ margin-top:22px; display:flex; gap:32px; flex-wrap:wrap; }
.unit-hero-meta .num{ font-family:var(--serif); font-size:1.4rem; color:#fff; }
.unit-hero-meta .lbl{ margin-top:4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
@media (max-width:780px){ .unit-hero-copy{ padding:112px 0 28px; } .unit-hero h1{ max-width:none; } }

.unit-overview{ padding:72px 0 8px; }
.unit-overview .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.unit-overview .copy{ margin-top:16px; max-width:760px; }
.unit-overview .copy p{ font-size:1.04rem; line-height:1.8; color:var(--ink-soft); }

.solutions-section{ padding:64px 0 88px; }
.solutions-head{ margin-bottom:40px; }
.solutions-head .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.solutions-head h2{ margin-top:10px; font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,1.9rem); }
.solutions-head p{ margin-top:12px; color:var(--ink-soft); line-height:1.6; }
.solutions-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px; }
.solution-card{ padding:28px 24px; background:var(--paper); border:1px solid var(--line); border-radius:14px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease; }
.solution-card:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -26px rgba(14,37,64,.28); border-color:transparent; }
.solution-card .sc-icon{ width:44px; height:44px; border-radius:10px; background:var(--paper-off); display:flex; align-items:center; justify-content:center; color:var(--navy); }
.solution-card .sc-icon svg{ width:20px; height:20px; }
/* The card's own real photo stands in for the generic icon when there's
   exactly one (no rail to swap it against) — connecting the solution to
   its image directly rather than leaving it icon-only. */
.solution-card .sc-thumb{ margin:-28px -24px 18px; aspect-ratio:4/3; overflow:hidden; border-radius:14px 14px 0 0; background:var(--paper-off); }
.solution-card .sc-thumb img{ width:100%; height:100%; object-fit:contain; display:block; padding:14px; box-sizing:border-box; }
.solution-card h3{ margin-top:18px; font-family:var(--serif); font-weight:500; font-size:1.05rem; line-height:1.35; }
.solution-card p{ margin-top:8px; font-size:.86rem; line-height:1.55; color:var(--ink-soft); }
.solution-card .sc-tag{ margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--navy); }
.solution-card .sc-subtitle{ font-weight:600; color:var(--navy); }
.solution-card .sc-brand{ font-weight:400; color:var(--ink-faint); font-size:.86em; }
.solution-card .sc-more{ margin-top:8px; }
.solution-card .sc-more summary{ cursor:pointer; font-size:.82rem; font-weight:600; color:var(--red); list-style:none; }
.solution-card .sc-more summary::-webkit-details-marker{ display:none; }
.solution-card .sc-more summary::before{ content:'+ '; }
.solution-card .sc-more[open] summary::before{ content:'\2212 '; }
.solution-card .sc-more ul{ margin-top:8px; padding-left:18px; list-style:disc; }
.solution-card .sc-more li{ font-size:.86rem; line-height:1.5; color:var(--ink-soft); margin-top:4px; }
.solution-card .sc-more li.has-photo{ display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:4px 0; }
.solution-card .sc-more li.has-photo img{ width:28px; height:28px; object-fit:contain; border-radius:6px; background:var(--paper-off); padding:3px; box-sizing:border-box; flex-shrink:0; }
.solution-card .sc-more li.has-photo:hover span{ color:var(--navy); }
@media (max-width:640px){ .solutions-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } .solution-card{ padding:20px 16px; } }

.contact-reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.contact-reason-card{ display:flex; flex-direction:column; padding:32px 28px; background:var(--paper); border:1px solid var(--line); border-radius:16px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.contact-reason-card:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -26px rgba(14,37,64,.28); }
.contact-reason-card .cr-icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 60%, var(--red) 150%); }
.contact-reason-card .cr-icon svg{ width:22px; height:22px; }
.contact-reason-card h3{ margin-top:20px; font-family:var(--serif); font-weight:500; font-size:1.15rem; }
.contact-reason-card p{ margin-top:8px; flex:1; font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.contact-reason-card .btn{ margin-top:22px; width:100%; }
@media (max-width:900px){ .contact-reasons{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .contact-reasons{ grid-template-columns:1fr; } }

.solutions-empty{ padding:56px 40px; text-align:center; background:var(--paper-off); border:1px dashed var(--line); border-radius:14px; }
.solutions-empty p{ color:var(--ink-soft); font-size:1rem; max-width:480px; margin:0 auto; }

.unit-story .article-body{ padding:0; margin:0; max-width:720px; }

/* The opening paragraphs read as one centered, editorial statement with a
   large decorative mark, before the connected "wizard" below begins. */
.story-intro{ position:relative; max-width:700px; margin:0 auto 88px; text-align:center; }
.story-intro::before{
  content:'\201C'; display:block; font-family:var(--serif); font-size:5rem; line-height:1;
  color:var(--red); opacity:.2; margin-bottom:-18px;
}
.unit-story .story-intro .pull-quote{ border-left:none; padding-left:0; font-size:1.5rem; }
.story-intro p:not(.pull-quote){ text-align:left; }
/* `.unit-story .article-body{margin:0}` (above) is more specific than `.story-intro`'s
   own margin, so the gap under the intro (and its centring) was silently lost —
   restate it with enough specificity to win */
.unit-story .story-intro.article-body{ margin:0 auto 88px; }

/* A connected "wizard": a vertical list of numbered steps on one side,
   wired to a single shared photo pane on the other via the exact same
   data-photo-key hover-swap used for Solutions cards (initSolutionPhotoRail
   in world-behavior.js) — hovering a step highlights it and swaps the
   photo, the same mechanism, reused rather than reinvented. */
.story-wizard{ display:grid; grid-template-columns:1fr minmax(0,440px); gap:56px; align-items:start; }
.story-wizard.no-media{ grid-template-columns:1fr; max-width:720px; margin:0 auto; }

.story-wizard-steps{ display:flex; flex-direction:column; }
.story-wizard-step{
  position:relative; display:flex; gap:20px; padding:28px 24px 28px 0; cursor:pointer;
  border-top:1px solid var(--line); transition:padding .3s var(--ease);
}
.story-wizard-steps .story-wizard-step:first-child{ border-top:none; }
.story-wizard-step.active{ padding-left:20px; }
.story-wizard-step.active::before{
  content:''; position:absolute; left:0; top:28px; bottom:28px; width:3px; border-radius:2px; background:var(--red);
}
.sw-num{
  flex-shrink:0; width:40px; padding-top:2px; font-family:var(--serif); font-size:1.1rem; font-weight:500;
  color:var(--ink-faint); transition:color .3s ease;
}
.story-wizard-step.active .sw-num{ color:var(--red); }
.sw-body.article-body{ padding:0; margin:0; max-width:none; }
.sw-body.article-body h3{ margin-top:0; font-size:1.2rem; }
.sw-body.article-body p{ font-size:.98rem; }
.story-wizard-step:not(.active) .sw-body.article-body{ opacity:.55; }

/* object-fit:contain (never cover) so a tall real photo is always shown
   whole — letterboxed against a soft neutral backdrop rather than cropped
   to fill a box it was never shot for. Frames stack on top of each other
   and swap via opacity, same technique as .solution-photo-rail. */
.story-wizard-media{
  position:sticky; top:120px; aspect-ratio:3/4; border-radius:22px; overflow:hidden;
  background:var(--paper-off); box-shadow:0 36px 64px -30px rgba(14,37,64,.38);
}
.sw-frame{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.sw-frame.active{ opacity:1; }
.sw-frame img{ width:100%; height:100%; object-fit:contain; display:block; }
.sw-frame figcaption.glass-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:rgba(8,20,36,.52); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.92);
}
.sw-frame .media-badge{
  position:absolute; top:16px; left:16px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px; background:rgba(8,20,36,.5);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.sw-frame .media-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(224,31,46,.28); animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.story-closing{ margin-top:72px; padding-top:56px; border-top:1px solid var(--line); }
.story-closing-label{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px; text-align:center; }
.story-closing-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; max-width:640px; margin:0 auto; }
.story-closing-strip figure{ margin:0; border-radius:14px; overflow:hidden; background:var(--paper-off); border:1px solid var(--line); }
.story-closing-strip img{ width:100%; aspect-ratio:4/3; object-fit:contain; display:block; }
.story-closing-strip figcaption{ padding:12px 14px; font-size:.78rem; line-height:1.5; color:var(--ink-soft); }

@media (max-width:900px){
  .story-wizard{ grid-template-columns:1fr; gap:32px; }
  .story-wizard-media{ position:relative; top:0; aspect-ratio:4/3; order:-1; }
  .story-intro{ margin-bottom:56px; }
  .unit-story .story-intro.article-body{ margin-bottom:48px; }
}
/* phones: the number sits above each step instead of eating a 60px column, so the text uses the full width */
@media (max-width:640px){
  .story-wizard-step{ flex-direction:column; gap:8px; padding:24px 0; }
  .story-wizard-step.active{ padding-left:18px; }
  .sw-num{ width:auto; padding-top:0; }
  .story-wizard-media{ border-radius:16px; }
}

.unit-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; }
.unit-gallery-grid figure{ margin:0; border-radius:14px; overflow:hidden; background:var(--paper-off); border:1px solid var(--line); }
.unit-gallery-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.unit-gallery-grid figcaption{ padding:14px 16px; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }

/* Real, on-the-ground proof photos (equipment installed and in active use) —
   a dark, documentary-feeling band to read as evidence rather than more
   glossy catalogue photography. */
.unit-presence{ background:var(--navy); padding:88px 0; }
.unit-presence .eyebrow{ color:#fff; opacity:.6; }
.unit-presence h2{ color:#fff; }
.unit-presence-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:24px; }
.unit-presence-grid figure{ margin:0; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.unit-presence-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.unit-presence-grid figcaption{ padding:16px 18px; font-size:.86rem; line-height:1.55; color:rgba(255,255,255,.75); }
@media (max-width:640px){ .unit-presence{ padding:56px 0; } }

.unit-status-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(8,20,36,.55); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.unit-status-overlay.show{ opacity:1; pointer-events:auto; }
.unit-status-modal{
  width:100%; max-width:460px; padding:48px 44px; text-align:center;
  background:#fff; border-radius:20px; box-shadow:0 40px 80px -24px rgba(8,20,36,.5);
  transform:translateY(14px) scale(.97); transition:transform .45s var(--ease);
}
.unit-status-overlay.show .unit-status-modal{ transform:translateY(0) scale(1); }
.unit-status-modal .status-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--red); padding:7px 16px; border-radius:20px; }
.unit-status-modal p{ margin-top:22px; font-size:1.02rem; line-height:1.65; color:var(--ink-soft); }
.unit-status-actions{ margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.unit-status-actions .btn{ width:100%; }
.unit-status-actions button{ border:none; background:none; font-size:.85rem; font-weight:500; color:var(--ink-faint); cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color .2s ease; }
.unit-status-actions button:hover{ color:var(--ink); }
@media (max-width:560px){ .unit-status-modal{ padding:40px 28px; } }

.solution-card .sc-view{ margin-top:14px; }
.solution-card .sc-view summary{ cursor:pointer; font-size:.82rem; font-weight:600; color:var(--red); list-style:none; }
.solution-card .sc-view summary::-webkit-details-marker{ display:none; }
.solution-card .sc-view summary::before{ content:'\25B8 '; }
.solution-card .sc-view[open] summary::before{ content:'\25BE '; }
.solution-card .sc-view p{ margin-top:10px; font-size:.86rem; line-height:1.6; color:var(--ink-soft); }
.solution-card .sc-gallery{ margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.solution-card .sc-gallery img{ width:100%; aspect-ratio:1; object-fit:contain; background:var(--paper-off); border-radius:8px; padding:6px; box-sizing:border-box; }
.solution-card .sc-brochure{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.solution-card .sc-brochure:hover{ color:var(--red); border-color:var(--red); }

.solutions-layout{ display:block; }
.solutions-layout.has-photo-rail{ display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.solutions-layout.has-photo-rail .solutions-grid{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
.solution-photo-rail{ position:sticky; top:120px; aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:var(--paper-off); box-shadow:0 30px 60px -30px rgba(14,37,64,.25); }
.solution-photo-rail img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:28px; box-sizing:border-box; opacity:0; transition:opacity .5s ease; }
.solution-photo-rail img.active{ opacity:1; }
@media (max-width:900px){
  .solutions-layout.has-photo-rail{ grid-template-columns:1fr; }
  .solution-photo-rail{ position:relative; top:0; aspect-ratio:16/9; margin-bottom:32px; }
}

/* ---------- business units list: welcome copy + manufacturer panel ---------- */
.bu-welcome-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.bu-welcome-copy{ max-width:none; }
.bu-network-label{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px; text-align:center; }
/* El-Ahlyia's own mark heading the panel, real partner logos beneath it as
   a compact wrapping chip list — the manufacturer network sits beside the
   intro copy, not as its own separate full-width section. */
.bu-side-panel{ background:var(--paper-off); border-radius:18px; padding:36px 32px; }
.bu-side-logo{ display:block; height:34px; width:auto; margin:0 auto 30px; }
.bu-side-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.bu-side-chips a{ width:78px; height:54px; background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:10px; box-shadow:0 6px 14px -8px rgba(14,37,64,.22); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.bu-side-chips a:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(14,37,64,.3); }
.bu-side-chips img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
@media (max-width:900px){ .bu-welcome-grid{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:480px){ .bu-side-chips a{ width:64px; height:46px; } }

/* ================================================================
   Nine disciplines — a high-end editorial grid, not a generic card
   template. Exactly 9 real business units, so 3 columns x 3 rows gives a
   perfectly balanced composition at desktop with no orphaned final row.
   (If the number of units changes, revisit the column count: 8 suits 4x2.)
   ================================================================ */
.discipline-section{ background:var(--paper-off); padding:88px 0; }
.units-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.discipline-card{
  display:flex; flex-direction:column; height:100%; min-height:280px;
  padding:34px 28px; background:#fff; border:1px solid var(--line); border-radius:16px;
  text-decoration:none; color:inherit;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
}
.discipline-card:hover{ transform:translateY(-6px); box-shadow:0 32px 56px -30px rgba(14,37,64,.28); border-color:transparent; }
.dc-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.dc-idx{ font-family:var(--serif); font-size:1.6rem; font-weight:500; color:var(--red); line-height:1; }
.dc-icon{ width:38px; height:38px; border-radius:10px; background:var(--paper-off); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); opacity:.7; transition:color .25s ease, opacity .25s ease; }
.dc-icon svg{ width:17px; height:17px; }
.discipline-card:hover .dc-icon{ color:var(--navy); opacity:1; }
.discipline-card h3{ margin-top:22px; font-family:var(--serif); font-weight:500; font-size:1.28rem; line-height:1.3; }
.discipline-card p{ margin-top:12px; flex:1; font-size:.93rem; line-height:1.65; color:var(--ink-soft); }
.dc-link{ margin-top:24px; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--navy); }
.dc-arrow{ display:inline-block; color:var(--red); transition:transform .25s var(--ease); }
.discipline-card:hover .dc-arrow{ transform:translateX(4px); }
@media (max-width:1100px){ .units-grid{ grid-template-columns:repeat(2,1fr); } .units-grid .discipline-card:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (max-width:640px){ .units-grid{ grid-template-columns:1fr; gap:18px; } .units-grid .discipline-card:last-child:nth-child(odd){ grid-column:auto; } .discipline-card{ min-height:0; padding:28px 24px; } }

.unit-partners{ padding:24px 0 96px; }
/* flexbox + justify-content:center rather than a fixed-column grid — a
   unit with 2 partners and one with 10 both read as centered and
   intentional, instead of left-packed into whatever a grid row leaves */
.unit-partners-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px 28px; }
.unit-partners-grid .partner-plate{ width:150px; }
@media (max-width:480px){ .unit-partners-grid .partner-plate{ width:130px; } }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:28px; }
.product-card{ text-decoration:none; color:inherit; display:block; }
.product-card .thumb{ aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--paper-off); }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.product-card:hover .thumb img{ transform:scale(1.045); }
.product-card h4{ margin-top:16px; font-size:1.02rem; font-weight:600; }
.product-card p{ margin-top:8px; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.product-card .link{ margin-top:12px; display:inline-block; font-size:13px; font-weight:600; color:var(--navy); }

/* ---------- product detail ---------- */
.product-hero{ padding:150px 0 0; }
.product-grid-detail{ display:grid; grid-template-columns:1fr 1fr; gap:64px; padding-bottom:100px; }
.product-grid-detail.no-media{ grid-template-columns:1fr; max-width:760px; margin:0 auto; }
/* contain, not cover: a medical product photo must be shown whole — cropping it to a
   square cut off the handle/tip of long instruments (e.g. Iconix Speed) */
.product-media{ aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.product-media img{ width:100%; height:100%; object-fit:contain; }
.product-copy .cat-tag{ color:var(--red); }
.product-copy h1{ margin-top:14px; font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,2.8vw,2.4rem); }
.product-copy .lead{ margin-top:18px; font-size:1.02rem; line-height:1.75; color:var(--ink-soft); }
.spec-list{ margin-top:32px; border-top:1px solid var(--line); }
.spec-list dt{ font-size:13px; color:var(--ink-faint); }
.spec-row{ display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-size:.94rem; }
.spec-row span:first-child{ color:var(--ink-soft); }
.spec-row span:last-child{ font-weight:600; }
.product-actions{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }
.related-unit{ margin-top:36px; padding:20px 22px; background:var(--paper-off); border-radius:4px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.related-unit .lbl{ font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.1em; }
.related-unit .name{ font-weight:600; margin-top:4px; }
.related-unit a{ text-decoration:none; font-size:13px; font-weight:600; color:var(--navy); white-space:nowrap; }
/* The two-column product layout had no phone breakpoint: at 390px the photo
   column collapsed to 0px wide (photo invisible) and the copy was pushed off the
   right edge. Stack it, and give spec rows room so label and value never touch. */
.product-copy{ min-width:0; }
.spec-row{ gap:20px; }
.spec-row span:last-child{ text-align:right; min-width:0; overflow-wrap:anywhere; }
.related-unit{ flex-wrap:wrap; }
@media (max-width:860px){
  .product-grid-detail{ grid-template-columns:1fr; gap:36px; padding-bottom:64px; }
  .product-media{ width:100%; max-width:560px; }
}
@media (max-width:520px){
  .product-hero{ padding-top:128px; }
  .spec-row{ flex-direction:column; gap:4px; }
  .spec-row span:last-child{ text-align:left; }
}

/* ---------- homepage partners teaser: a gateway into the Partners World,
   not a miniature directory. Real relationship photo on the right with a
   curated logo ribbon emerging directly beneath it, copy on the left
   bottom-aligned so its CTA lands level with that ribbon. Light background,
   matching the rest of the homepage — the earlier navy/atmospheric
   treatment was dropped. ---------- */
.home-partners{ padding:150px 0; }
.hp-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:64px; align-items:center; }
.hp-copy .tag.eyebrow{ font-size:12.5px; letter-spacing:.18em; }
.hp-copy h2{ margin-top:18px; font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.1vw,2.5rem); color:var(--ink); line-height:1.22; text-wrap:balance; }
.hp-copy p{ margin-top:22px; font-size:1.08rem; line-height:1.8; color:var(--ink-soft); max-width:440px; }
.hp-cta{ margin-top:38px; display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:5px; transition:gap .25s var(--ease), border-color .25s ease; }
.hp-cta span{ color:var(--red); transition:transform .25s var(--ease); }
.hp-cta:hover{ gap:14px; border-color:var(--ink); }
.hp-cta:hover span{ transform:translateX(3px); }

.hp-scene{ position:relative; }
/* a light matted frame around the photo — otherwise it just floats on the
   white section background with nothing to visually contain it */
.hp-photo-frame{ position:relative; background:var(--paper-off); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow:0 30px 60px -30px rgba(14,37,64,.25); }
.hp-photo{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; }
.hp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* a second real moment, tucked at the corner like a photo collage rather
   than a second equal-weight image competing with the first */
.hp-photo-accent{ position:absolute; left:-28px; top:-28px; width:42%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:4px solid var(--paper); box-shadow:0 20px 40px -18px rgba(14,37,64,.35); z-index:2; }
.hp-photo-accent img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .hp-photo-accent{ left:-14px; top:-14px; width:40%; border-width:3px; } }

/* the logo ribbon reads as emerging from the photo, not a UI card row —
   a light paper-off tile so it's visible against the white background,
   ending in a small arrow that hints at the rest of the network beyond
   the frame */
.hp-logo-row{ position:relative; margin-top:22px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px; }
.hp-logo{ flex-shrink:0; height:52px; min-width:80px; padding:0 16px; background:var(--paper-off); border-radius:9px; display:flex; align-items:center; justify-content:center; }
.hp-logo img{ max-width:100%; max-height:60%; width:auto; height:auto; object-fit:contain; }
.hp-more{ color:var(--red); font-size:15px; font-weight:600; margin-left:2px; opacity:.85; }
@media (max-width:960px){
  .hp-grid{ grid-template-columns:1fr; gap:48px; align-items:stretch; }
  .hp-copy h2{ max-width:none; }
  .hp-copy p{ max-width:none; }
  .hp-logo-row{ justify-content:center; }
}
@media (max-width:640px){
  .hp-logo-row{ gap:10px; margin-top:18px; }
  .hp-logo{ height:44px; min-width:64px; padding:0 12px; }
}

/* ---------- partners ---------- */
.partners-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.partner-tile{ background:var(--paper); padding:44px 32px; }
.partner-tile .name{ font-family:var(--serif); font-size:1.15rem; font-weight:500; }
.partner-tile .meta{ margin-top:10px; font-size:.85rem; color:var(--ink-soft); }
@media (max-width:780px){ .partners-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- partners: full gallery page + chapter detail ---------- */
.pnw-filter-heading{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
.partner-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 56px; }
.partner-filter .chip{ font-size:12.5px; font-weight:500; padding:9px 18px; border-radius:20px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .2s ease; }
.partner-filter .chip:hover{ border-color:var(--navy); color:var(--navy); }
.partner-filter .chip[aria-pressed="true"]{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }
.partner-filter .search-input{ font-family:var(--sans); font-size:13px; color:var(--ink); background:var(--paper-off); border:1px solid var(--line); border-radius:20px; padding:9px 16px; width:200px; max-width:100%; margin-left:auto; }
.partner-filter .search-input::placeholder{ color:var(--ink-faint); }
.partner-filter .search-input:focus{ outline:none; border-color:var(--navy); background:var(--paper); }

/* a curated exhibition wall, not a spreadsheet — 4 generously-sized columns
   at desktop, capped width so it reads as a deliberate gallery rather than
   scattered across the full 1280px page container */
.partner-gallery{ display:grid; grid-template-columns:repeat(4, 1fr); gap:44px 36px; max-width:1080px; margin:0 auto 40px; }
.partner-plate{ text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:center; gap:16px; }
.partner-plate .plate-box{ width:100%; aspect-ratio:4/3; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 3px rgba(14,37,64,.05); display:flex; align-items:center; justify-content:center; padding:34px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; }
.partner-plate .plate-box img{ max-width:78%; max-height:72%; width:auto; height:auto; object-fit:contain; filter:grayscale(35%); transition:filter .3s ease; }
.partner-plate:hover .plate-box{ transform:translateY(-5px); box-shadow:0 24px 40px -22px rgba(14,37,64,.24); border-color:transparent; }
.partner-plate:hover .plate-box img{ filter:grayscale(0%); }
/* some logo files carry a lot of baked-in whitespace around a small mark —
   scale those specific ones up so they read at the same visual weight as
   logos already cropped tight to their own mark. transform:scale rather
   than a max-width override so this works the same way in every context a
   partner logo appears (gallery, connect band, homepage, unit chips),
   not just this one component. */
img.logo-zoom{ transform:scale(1.45); }
.partner-plate .p-name{ font-size:13.5px; font-weight:500; color:var(--ink-soft); text-align:center; }
.partner-plate.hidden-by-filter{ display:none; }
@media (max-width:1024px){ .partner-gallery{ grid-template-columns:repeat(3,1fr); max-width:820px; } }
@media (max-width:680px){ .partner-gallery{ grid-template-columns:repeat(2,1fr); gap:28px; max-width:none; } .partner-filter .search-input{ margin-left:0; width:100%; } }

.partner-chapter-hero{ margin-top:24px; padding:48px; background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); border-radius:18px; color:#fff; display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.partner-chapter-hero .plate-box{ width:140px; height:140px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; padding:24px; flex-shrink:0; }
.partner-chapter-hero .plate-box img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.partner-chapter-hero .eyebrow{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.partner-chapter-hero h1{ margin-top:8px; font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.2vw,2.4rem); }
.partner-chapter-hero .tagline{ margin-top:10px; font-size:1rem; color:rgba(255,255,255,.75); max-width:480px; }
.partner-chapter-hero .unit-tag{ margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:rgba(255,255,255,.8); text-decoration:none; }
.partner-chapter-hero .unit-tag:hover{ color:#fff; }
@media (max-width:680px){ .partner-chapter-hero{ flex-direction:column; text-align:center; padding:40px 28px; } .partner-chapter-hero .tagline{ margin-left:auto; margin-right:auto; } .partner-filter .search-input{ margin-left:0; width:100%; } }

/* ---------- partner detail: reusable template (About / Partnership /
   Solutions / Why Us / CTA) — same shell for every partner, only the
   content differs ---------- */
.partner-section-head{ max-width:680px; }
.partner-section-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); }
.draft-tag{ display:inline-block; margin-bottom:10px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); background:rgba(224,31,46,.08); border-radius:4px; padding:4px 10px; }
.partner-copy{ margin-top:20px; max-width:680px; }
.partner-copy p{ font-size:1.02rem; line-height:1.75; color:var(--ink-soft); }
.partner-about-grid.has-media{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
.partner-about-grid.has-media .partner-copy{ max-width:none; }
.partner-about-grid.has-media .presence-media{ margin-top:20px; }
@media (max-width:900px){ .partner-about-grid.has-media{ grid-template-columns:1fr; } }
.partner-flow{ margin-top:48px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; text-align:center; font-family:var(--serif); font-size:clamp(1rem,1.6vw,1.25rem); color:var(--ink); }
.partner-flow .self{ font-weight:600; color:var(--navy); }
.partner-flow .arrow{ color:var(--red); font-family:var(--sans); }
.partner-cta{ text-align:center; }
.partner-cta h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,2.8vw,2.1rem); max-width:600px; margin:0 auto; }
.partner-cta p{ margin-top:14px; color:var(--ink-soft); font-size:1.02rem; max-width:480px; margin-left:auto; margin-right:auto; }
.partner-cta .product-actions{ margin-top:32px; justify-content:center; }
.partner-cta .partner-attribution{ margin-top:48px; font-size:.78rem; line-height:1.6; color:var(--ink-faint); max-width:560px; }
@media (max-width:680px){ .partner-flow{ flex-direction:column; gap:12px; } .partner-flow .arrow{ transform:rotate(90deg); } }

/* ---------- partners: narrative arc (Enter -> Understand -> Connect ->
   Stories -> Explore). Only the hero and the Connect band carry any motion —
   Understand, Stories and Explore are quiet, typography-led. Backgrounds
   graduate warm -> dark -> warm -> cool so the sections read as one
   environment rather than a stack of independent blocks. ---------- */
.page-header.page-header--epic{ min-height:640px; }
/* one restrained atmospheric gesture over the video: the same faint grid
   texture + corner glow every other page-header already uses, just dialed
   down so it reads as depth rather than decoration */
.page-header.page-header--epic::before{ display:block; z-index:1; opacity:.14; }
.page-header.page-header--epic::after{ z-index:1; width:460px; height:460px; opacity:.7; }
.page-header.page-header--epic .wrap{ position:relative; z-index:2; }
@media (max-width:780px){ .page-header.page-header--epic{ min-height:500px; } }

.ph-cue{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:44px; color:rgba(255,255,255,.5); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; width:fit-content; margin-left:auto; margin-right:auto; transition:color .25s ease; }
.ph-cue:hover{ color:#fff; }
.ph-cue .stem{ width:1px; height:26px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.ph-cue .stem::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:#fff; animation:ph-cue-pulse 2.6s ease-in-out infinite; }
@keyframes ph-cue-pulse{ 0%{ top:-100%; } 60%,100%{ top:100%; } }
@media (prefers-reduced-motion:reduce){ .ph-cue .stem::after{ animation:none; top:0; } }

.section-head.center{ max-width:620px; margin:0 auto; text-align:center; }

/* Understand — an editorial list, not five feature cards. Numbered rows,
   hairline rules between (not around) each one, nothing boxed. */
.pnw-understand{ background:var(--paper-warm); }
.pnw-thread{ max-width:760px; margin:64px auto 0; }
.pnw-thread-step{ display:flex; gap:28px; align-items:baseline; padding:30px 0; border-top:1px solid var(--line); }
.pnw-thread-step:first-child{ border-top:none; padding-top:0; }
.pnw-thread-step .num{ flex-shrink:0; width:34px; font-family:var(--serif); font-size:.95rem; font-weight:500; color:var(--red); }
.pnw-thread-step h3{ flex-shrink:0; min-width:150px; font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--ink); }
.pnw-thread-step p{ margin:0; font-size:.96rem; line-height:1.7; color:var(--ink-soft); }
@media (max-width:680px){ .pnw-thread-step{ flex-direction:column; gap:6px; } .pnw-thread-step h3{ min-width:0; } }

/* Connect — depth through two logo bands moving at different speeds and
   opposite directions (a foreground and a background layer), not a network
   diagram. The gradient dissolves into the sections above/below instead of
   cutting hard from white to navy. */
.pnw-connect{ padding:130px 0; overflow:hidden; background:linear-gradient(180deg, var(--paper-warm) 0%, var(--navy-deep) 14%, var(--navy) 50%, var(--navy-deep) 86%, var(--paper-warm) 100%); }
.pnw-connect .section-head .tag{ color:rgba(255,255,255,.5); }
.pnw-connect .section-head h2{ color:#fff; }
.pnw-connect .section-head p{ color:rgba(255,255,255,.55); }
.pnw-connect-band{ margin-top:72px; display:flex; flex-direction:column; gap:30px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pnw-connect-row{ overflow:hidden; }
.pnw-connect-track{ display:flex; align-items:center; gap:28px; width:max-content; animation:pnw-connect-scroll 48s linear infinite; }
.pnw-connect-row.reverse .pnw-connect-track{ animation-direction:reverse; animation-duration:64s; }
.pnw-connect-band:hover .pnw-connect-track{ animation-play-state:paused; }
/* white chips with logos in their real colors — the same reliable plate
   language as the Explore gallery below. (A white-silhouette treatment via
   brightness/invert was tried here first, but several source logo files
   turn out to have an opaque background rather than true transparency, so
   the filter painted those as blank rectangles — not worth a per-file
   transparency check when the gallery's own approach already works for
   every logo regardless of format.) */
.pnw-connect-plate{ flex-shrink:0; width:132px; height:92px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; padding:16px; transition:opacity .3s ease; }
.pnw-connect-plate img{ max-width:80%; max-height:74%; width:auto; height:auto; object-fit:contain; }
.pnw-connect-row.back .pnw-connect-plate{ width:104px; height:74px; padding:12px; opacity:.65; transform:scale(.94); }
@keyframes pnw-connect-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Intentionally no prefers-reduced-motion override: the logo band must keep moving
   even on machines (e.g. Windows Server) whose OS animation setting is off. */
@media (max-width:680px){ .pnw-connect-row.back{ display:none; } }

/* Stories From the Network — same featured+stack editorial language used for
   Insights elsewhere in The World. Always present in the narrative arc; when
   no real partner story has been published yet, a quiet editorial line
   holds the space rather than a placeholder card. */
.pnw-stories{ background:var(--paper-warm); }
.pnw-story-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; margin-top:56px; align-items:stretch; }
.pnw-story-stack{ display:flex; flex-direction:column; gap:24px; }
.pnw-feature{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.pnw-feature .frame{ border-radius:10px; overflow:hidden; background:var(--paper-off); aspect-ratio:16/10; }
.pnw-feature .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.pnw-feature:hover .frame img{ transform:scale(1.03); }
.pnw-feature .cat{ margin-top:20px; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--red); }
.pnw-feature h3{ margin-top:8px; font-family:var(--serif); font-weight:500; font-size:1.35rem; line-height:1.35; }
.pnw-feature .who{ margin-top:10px; font-size:.85rem; color:var(--ink-faint); }
.pnw-compact{ text-decoration:none; color:inherit; display:flex; gap:20px; align-items:flex-start; }
.pnw-compact .frame{ width:104px; aspect-ratio:1; flex-shrink:0; border-radius:8px; overflow:hidden; background:var(--paper-off); }
.pnw-compact .frame img{ width:100%; height:100%; object-fit:cover; }
.pnw-compact .cat{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--red); }
.pnw-compact h3{ margin-top:6px; font-family:var(--serif); font-weight:500; font-size:1rem; line-height:1.35; }
.pnw-compact .who{ margin-top:8px; font-size:.8rem; color:var(--ink-faint); }
.pnw-stories-empty{ max-width:520px; margin:56px auto 0; text-align:center; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink-faint); }
@media (max-width:900px){ .pnw-story-grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .pnw-compact{ flex-direction:column; } .pnw-compact .frame{ width:100%; aspect-ratio:16/9; } }

.pnw-explore{ background:var(--paper-off); }

/* ---------- insights / articles grid ---------- */
.insights-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.insight-card{ text-decoration:none; color:inherit; display:block; }
.insight-card .thumb{ aspect-ratio:16/10; overflow:hidden; border-radius:4px; }
.insight-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.insight-card:hover .thumb img{ transform:scale(1.045); }
.insight-card .cat{ margin-top:18px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.insight-card h3{ margin-top:10px; font-family:var(--serif); font-size:1.2rem; font-weight:500; line-height:1.4; }
.insight-card .date{ margin-top:10px; font-size:.83rem; color:var(--ink-faint); }
@media (max-width:900px){ .insights-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .insights-grid{ grid-template-columns:1fr; } }

/* ---------- article detail ---------- */
.article-header{ padding:160px 0 0; }
.article-header .cat{ color:var(--red); }
.article-header h1{ margin-top:16px; font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3.4vw,2.9rem); max-width:820px; }
.article-meta{ margin-top:20px; display:flex; gap:20px; font-size:.88rem; color:var(--ink-faint); }
.article-hero-img{ margin-top:48px; aspect-ratio:21/9; overflow:hidden; }
.article-hero-img img{ width:100%; height:100%; object-fit:cover; }
.article-body{ max-width:720px; margin:0 auto; padding:64px 40px 120px; font-size:1.08rem; line-height:1.9; color:var(--ink); }
.article-body p + p{ margin-top:24px; }
.article-body h3{ margin-top:48px; font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--navy); }
.article-body h3 + p{ margin-top:18px; }
/* a short, fully-bold line (an award name, a closing line) read as a
   pull-quote rather than a plain paragraph — editorial emphasis, not a
   generic blockquote box */
.article-body .pull-quote{ margin-top:40px !important; padding-left:24px; border-left:3px solid var(--red); font-family:var(--serif); font-size:1.3rem; line-height:1.5; color:var(--navy); }
.article-figure{ margin:40px -40px; }
.article-figure img{ width:100%; height:auto; display:block; border-radius:6px; }
@media (max-width:640px){ .article-figure{ margin:32px 0; } }

/* ---------- careers ---------- */
.vacancy-list{ display:flex; flex-direction:column; }
.vacancy-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:padding-left .25s var(--ease); }
.vacancy-row:hover{ padding-left:10px; }
.vacancy-row h3{ font-size:1.1rem; font-weight:600; }
.vacancy-row .meta{ margin-top:8px; display:flex; gap:16px; font-size:.85rem; color:var(--ink-soft); flex-wrap:wrap; }
.vacancy-row .arrow{ font-size:1.3rem; color:var(--navy); flex-shrink:0; }

/* Homepage Careers: the real section is blurred and untouchable, with a
   "Coming Soon" panel centred over it. */
.careers-soon{ position:relative; min-height:420px; }
.careers-soon .careers-blur{ filter:blur(7px); opacity:.85; pointer-events:none; user-select:none; -webkit-user-select:none; }
.careers-soon-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:calc(100% - 32px); max-width:440px; padding:40px 36px; text-align:center;
  background:#fff; border-radius:20px; box-shadow:0 30px 70px -24px rgba(8,20,36,.45); border:1px solid var(--line);
}
.careers-soon-panel .status-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--red); padding:7px 16px; border-radius:20px; }
.careers-soon-panel h3{ margin-top:20px; font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.3; color:var(--ink); }
.careers-soon-panel p{ margin-top:12px; font-size:.98rem; line-height:1.65; color:var(--ink-soft); }
.careers-skeleton{ pointer-events:none; }
.careers-skeleton .sk-bar{ display:block; border-radius:6px; background:rgba(26,29,34,.14); }
.careers-skeleton .sk-title{ width:260px; max-width:60vw; height:18px; }
.careers-skeleton .sk-meta{ width:180px; max-width:45vw; height:12px; margin-top:12px; }
.careers-skeleton .sk-arrow{ width:22px; height:16px; }
@media (max-width:560px){ .careers-soon{ min-height:380px; } .careers-soon-panel{ padding:34px 26px; } }

/* ---------- vacancy detail ---------- */
.vacancy-header{ padding:160px 0 60px; background:var(--paper-off); border-bottom:1px solid var(--line); }
.vacancy-header .meta-row{ margin-top:20px; display:flex; gap:14px; flex-wrap:wrap; }
.vacancy-header .chip{ font-size:12px; font-weight:600; padding:8px 14px; border-radius:20px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); }
.vacancy-body{ max-width:720px; padding:64px 40px; }
.vacancy-body h2{ font-family:var(--serif); font-size:1.3rem; font-weight:500; margin-top:36px; }
.vacancy-body h2:first-child{ margin-top:0; }
.vacancy-body p, .vacancy-body li{ margin-top:14px; line-height:1.75; color:var(--ink-soft); }
.vacancy-body ul{ padding-left:20px; }

.apply-panel{ margin-top:48px; padding:36px; background:var(--paper-off); border-radius:6px; }
.apply-panel h3{ font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.apply-panel p{ margin-top:8px; color:var(--ink-soft); font-size:.94rem; }
.apply-form{ margin-top:24px; display:grid; gap:16px; }
.apply-form input, .apply-form textarea{ width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:3px; font-family:inherit; font-size:.94rem; background:#fff; }
.apply-form textarea{ resize:vertical; min-height:90px; }
.apply-success{ display:none; text-align:center; padding:24px; }
.apply-success.on{ display:block; }
.apply-success .check{ width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:1.4rem; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contact-grid > *{ min-width:0; } /* grid tracks default to a content-based minimum, which lets wide <input>s force the whole row past the viewport unless explicitly told they're allowed to shrink */
.contact-info h2{ font-family:var(--serif); font-weight:500; font-size:1.8rem; }
.contact-info p{ margin-top:16px; color:var(--ink-soft); line-height:1.7; }
.contact-detail{ margin-top:28px; }
.contact-detail .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.contact-detail .val{ margin-top:4px; font-weight:600; }
.contact-detail + .contact-detail{ margin-top:22px; }
.contact-form{ display:grid; gap:16px; }
.contact-form input, .contact-form textarea{ width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:3px; font-family:inherit; font-size:.95rem; }
.contact-form textarea{ min-height:120px; resize:vertical; }
/* Optional file attachment (e.g. a CV): the real <input type=file> is visually
   hidden but stays focusable, and the label is the styled drop-box. */
.contact-form .file-field{ display:block; }
.contact-form .file-field input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; padding:0; border:0; }
.contact-form .file-box{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px dashed rgba(26,29,34,.28); border-radius:3px; background:var(--paper-off); cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.contact-form .file-box:hover, .contact-form .file-field input:focus-visible + .file-box{ border-color:var(--navy); background:#fff; }
.contact-form .file-box svg{ flex-shrink:0; width:22px; height:22px; color:var(--navy); }
.contact-form .file-text{ min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.92rem; color:var(--ink); }
.contact-form .file-text small{ font-size:.78rem; color:var(--ink-faint); }
.contact-form .file-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.contact-form .file-clear{ margin-left:auto; flex-shrink:0; background:none; border:0; padding:4px 8px; font:inherit; font-size:.82rem; color:var(--red); cursor:pointer; display:none; }
.contact-form .file-field.has-file .file-clear{ display:block; }
.contact-form .file-field.has-file .file-box{ border-style:solid; border-color:var(--navy); background:#fff; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- footer partner marquee ---------- */
.partner-marquee{ overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1); background:var(--navy-deep); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partner-marquee-track{ display:flex; align-items:center; gap:48px; width:max-content; padding:28px 24px; animation:marquee-scroll 26s linear infinite; }
.partner-marquee:hover .partner-marquee-track{ animation-play-state:paused; }
.partner-logo-chip{ flex-shrink:0; height:60px; padding:12px 26px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(0,0,0,.4); }
.partner-logo-chip img{ max-height:28px; max-width:130px; width:auto; height:auto; object-fit:contain; display:block; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* No prefers-reduced-motion override here either — see .pnw-connect-track above. */

/* ---------- footer ---------- */
.world-footer{ background:var(--navy-deep); color:rgba(255,255,255,.72); padding-bottom:32px; }
.world-footer .wrap{ padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-grid .logo-mark{ height:26px; filter:brightness(0) invert(1); opacity:.9; }
.footer-grid p{ margin-top:18px; font-size:.88rem; line-height:1.6; max-width:260px; color:rgba(255,255,255,.55); }
.footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); margin-bottom:18px; }
.footer-col a{ display:block; text-decoration:none; color:rgba(255,255,255,.72); font-size:.9rem; margin-bottom:12px; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ padding-top:28px; display:flex; justify-content:space-between; font-size:.82rem; color:rgba(255,255,255,.4); flex-wrap:wrap; gap:12px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   Announcement pop-up (homepage) - a collage with the handshake as the main picture
   ========================================================================== */
html.announce-lock, html.announce-lock body{ overflow:hidden; }
.announce{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; }
.announce[hidden]{ display:none; }
.announce-scrim{ position:absolute; inset:0; background:rgba(8,20,36,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; transition:opacity .45s ease; }
.announce-card{
  position:relative; width:min(1040px,100%); max-height:calc(100vh - 40px); overflow:auto; outline:none;
  display:grid; grid-template-columns:1.12fr 1fr; background:#fff; border-radius:22px;
  box-shadow:0 50px 120px -30px rgba(8,20,36,.75);
  opacity:0; transform:translateY(26px) scale(.97); transition:opacity .5s ease, transform .65s var(--ease);
}
.announce.is-open .announce-scrim{ opacity:1; }
.announce.is-open .announce-card{ opacity:1; transform:none; }
.announce-close{
  position:absolute; top:14px; right:14px; z-index:6; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background:rgba(8,20,36,.74); color:#fff; font-size:28px; line-height:1; cursor:pointer; padding:0 0 3px;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, transform .35s var(--ease);
}
.announce-close:hover, .announce-close:focus-visible{ background:var(--red); transform:rotate(90deg); outline:none; }
/* the collage: handshake large, the other two as white-framed prints laid over its lower corners */
.announce-collage{ position:relative; min-height:540px; background:linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%); }
.announce-collage figure{ position:absolute; margin:0; overflow:hidden; background:#fff; }
.announce-collage img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s ease; }
.announce-collage img[src]{ opacity:1; }
.ac-main{ left:6%; right:6%; top:6%; height:63%; border-radius:16px; box-shadow:0 28px 54px -22px rgba(0,0,0,.7); }
.ac-main img{ object-position:50% 38%; }
.ac-a, .ac-b{ width:47%; height:29%; border:5px solid #fff; border-radius:12px; box-shadow:0 22px 44px -16px rgba(0,0,0,.65); }
.ac-a{ left:4%; bottom:5%; transform:rotate(-2.6deg); }
.ac-b{ right:4%; bottom:7%; transform:rotate(2.1deg); }
.ac-a img{ object-position:50% 42%; }
.ac-b img{ object-position:50% 55%; }
/* "safe center": centred when there is room, but never pushed out of reach above the top edge on a short screen */
.announce-copy{ display:flex; flex-direction:column; justify-content:center; justify-content:safe center; padding:54px 48px 48px 44px; }
.announce-eyebrow{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--red); padding:7px 15px; border-radius:20px; }
.announce-copy h2{ margin:18px 0 14px; font-family:var(--serif); font-weight:600; font-size:clamp(1.45rem,2.3vw,1.95rem); line-height:1.25; color:var(--navy-deep); }
.announce-copy p{ margin:0 0 12px; font-size:.98rem; line-height:1.7; color:var(--ink-soft); }
.announce-copy p strong{ color:var(--ink); font-weight:600; }
.announce-actions{ margin-top:20px; }
.announce-actions .btn{ display:inline-flex; align-items:center; gap:8px; }
@media (max-width:860px){
  .announce{ padding:12px; }
  .announce-card{ grid-template-columns:1fr; grid-auto-rows:max-content; max-height:calc(100vh - 24px); border-radius:18px; }
  .announce-collage{ min-height:0; aspect-ratio:1 / .88; }
  .announce-copy{ justify-content:flex-start; padding:24px 22px 26px; }
  .announce-copy h2{ margin:14px 0 10px; }
  .announce-close{ top:10px; right:10px; width:42px; height:42px; }
  /* on a phone the button stays pinned to the bottom of the card while the text scrolls under it */
  .announce-actions{ position:sticky; bottom:0; margin:14px -22px -26px; padding:16px 22px 20px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%); }
  .announce-actions .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .announce-scrim, .announce-card, .announce-collage img{ transition:none; } }

/* ==========================================================================
   Full insight laid out like a Word newsletter: a white sheet on a grey desk
   ========================================================================== */
.nl-desk{ background:#e8eaee; padding:140px 0 96px; }
.nl-tools, .nl-paper{ max-width:860px; margin-left:auto; margin-right:auto; }
.nl-tools{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; }
.nl-back{ color:var(--navy); text-decoration:none; font-weight:600; font-size:.9rem; }
.nl-back:hover{ color:var(--red); }
.nl-print{ font:inherit; font-size:.85rem; font-weight:600; color:var(--navy); background:#fff; border:1px solid rgba(14,37,64,.25); border-radius:6px; padding:9px 16px; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.nl-print:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.nl-paper{
  background:#fff; padding:56px 72px 40px; border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 2px 6px rgba(14,37,64,.08), 0 40px 80px -40px rgba(14,37,64,.42);
}
.nl-letterhead{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-bottom:18px; border-bottom:2px solid var(--navy-deep); }
.nl-letterhead::after{ content:""; position:absolute; left:0; bottom:-2px; width:96px; height:2px; background:var(--red); }
.nl-logo{ --h:40px; height:var(--h); width:auto; margin-left:calc(var(--h) * -1.39); }   /* the logo file has blank space on its left; pull it flush with the text margin */
.nl-masthead{ min-width:0; text-align:right; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.nl-masthead strong{ display:block; margin-top:5px; color:var(--red); letter-spacing:.2em; }
.nl-title{ margin:36px 0 12px; font-family:var(--serif); font-weight:700; font-size:clamp(1.55rem,3.2vw,2.15rem); line-height:1.22; color:var(--navy-deep); }
.nl-subtitle{ margin:0; font-family:var(--serif); font-style:italic; font-size:1.18rem; line-height:1.55; color:var(--navy); }
.nl-rule{ border:0; border-top:1px solid var(--line); margin:26px 0; }
.nl-body{ font-family:var(--serif); font-size:1.04rem; line-height:1.85; color:#22262c; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.nl-body p{ margin:0 0 1.1em; }
.nl-body strong{ color:var(--navy-deep); }
.nl-first{ font-size:1.12rem; line-height:1.8; }   /* lead paragraph: a larger opening, no drop cap (a drop cap would split "El Ahlyia") */
.nl-photo{ margin:1.7em 0; padding:8px; background:#fff; border:1px solid #d9dde3; box-shadow:0 10px 22px -16px rgba(14,37,64,.5); break-inside:avoid; }
.nl-photo img{ display:block; width:100%; height:auto; }
.nl-photo figcaption{ padding-top:8px; text-align:center; font-family:var(--sans); font-size:.78rem; font-style:italic; color:var(--ink-soft); }
.nl-photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:1.7em 0; }
.nl-photo-row .nl-photo{ margin:0; }
.nl-photo-row img{ aspect-ratio:4 / 3; object-fit:cover; }
.nl-closing{ margin:1.9em 0 .4em; padding:18px 22px; border-left:4px solid var(--red); background:#faf8f5; font-weight:700; font-style:italic; color:var(--navy-deep); font-size:1.08rem; line-height:1.6; text-align:left; }
.nl-footer{ margin-top:34px; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; font-family:var(--sans); font-size:.76rem; color:var(--ink-faint); }
@media (max-width:760px){
  .nl-desk{ padding:118px 0 64px; }
  .nl-paper{ padding:30px 20px 26px; }
  .nl-logo{ --h:30px; }
  .nl-masthead{ font-size:10px; letter-spacing:.12em; }
  .nl-masthead strong{ letter-spacing:.14em; }
  .nl-body{ text-align:left; hyphens:none; -webkit-hyphens:none; font-size:1rem; line-height:1.78; }
  .nl-photo-row{ grid-template-columns:1fr; }
  .nl-footer{ flex-direction:column; }
}
@media print{
  @page{ size:A4; margin:14mm; }
  .ecosystem-bar, #siteHeader, .world-nav, .mobile-nav, .mobile-nav-scrim, .world-footer, .nl-tools, .announce, #page-veil{ display:none !important; }
  body{ background:#fff; }
  .nl-desk{ background:#fff; padding:0; }
  .nl-paper{ box-shadow:none; padding:0; max-width:none; }
  .nl-body{ font-size:10.5pt; line-height:1.6; }
  .nl-photo, .nl-closing{ break-inside:avoid; }
}
/* consent statement above the Send button of the contact forms */
.contact-form .consent{ display:flex; align-items:flex-start; gap:12px; margin:2px 0 4px; font-size:.84rem; line-height:1.6; color:var(--ink-soft); cursor:pointer; }
.contact-form .consent input[type=checkbox]{ flex:0 0 auto; width:20px; height:20px; padding:0; margin:2px 0 0; accent-color:var(--red); cursor:pointer; }
.contact-form .consent a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.contact-form .consent:focus-within{ color:var(--ink); }
/* Send Message is locked until the consent box is ticked */
.contact-form button[type=submit]:disabled{ opacity:.42; cursor:not-allowed; filter:grayscale(.35); transform:none; box-shadow:none; pointer-events:auto; }
.contact-form button[type=submit]:disabled:hover{ opacity:.42; background:inherit; transform:none; }
.contact-form .consent-hint{ margin:-6px 0 0; font-size:.78rem; color:var(--ink-faint); }
.contact-form .consent:has(input:checked) ~ .consent-hint{ display:none; }