:root {
  --ink: #050607;
  --graphite: #0c0f14;
  --night: #20252e;
  --tidal-deep: #103a56;
  --tidal: #1c5c88;
  --tidal-glow: #56a6cc;
  --brand-blue: #b8efff;
  --horizon: #78a6ff;
  --cobalt: #2c62d6;
  --pearl: #fafbf9;
  --mist: #f1f4f2;
  --paper: #ffffff;
  --text: #102735;
  --text-soft: #3f5662;
  --text-muted: #586d7a;
  --line: #d7e4e1;
  --white-line: rgba(255,255,255,.18);
  --success: #5dd6ba;
  --warning: #f3c969;
  --error: #e85d75;
  --purple: #9b8cf0;
  --radius: 8px;
  --radius-hero: 20px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-slow: cubic-bezier(.16,1,.3,1);
  --page: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box;
}

html { scroll-behavior: smooth; background: var(--ink);
}

body { margin: 0; overflow-x: hidden; background: var(--pearl); color: var(--text); font-family: var(--font-brand); font-size: 14px; line-height: 1.55;
}

body.menu-open { overflow: hidden;
}

button,
input,
textarea { font: inherit;
}

button { color: inherit;
}

a { color: inherit; text-decoration: none;
}

img,
video,
canvas { display: block; max-width: 100%;
}

::selection { background: var(--brand-blue); color: var(--ink);
}

.site-header { position: fixed; z-index: 80; inset: 0 0 auto; height: 76px; padding: 0 var(--page); display: flex; align-items: center; gap: 30px; color: white; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(5,6,7,.64); backdrop-filter: blur(20px) saturate(135%);
}

.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 600; letter-spacing: .15em;
}

.wordmark-icon { width: 26px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; letter-spacing: 0;
}

.wordmark-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(184,239,255,.2));
}

.main-nav { margin-left: auto; display: flex; gap: 28px; font-size: 11px; color: rgba(255,255,255,.68);
}

.main-nav a { position: relative; padding: 9px 0; transition: color 160ms ease;
}

.main-nav a::after { content: ""; position: absolute; inset: auto 100% 3px 0; height: 1px; background: var(--brand-blue); transition: right 240ms var(--ease);
}

.main-nav a:hover { color: white;
}

.main-nav a:hover::after { right: 0;
}

.header-cta { padding: 11px 15px; border: 1px solid rgba(255,255,255,.36); border-radius: 6px; font-size: 11px; transition: background 160ms, color 160ms, border 160ms;
}

.header-cta:hover { color: var(--ink); background: var(--brand-blue); border-color: var(--brand-blue);
}

.header-cta span,
.button span,
.ink-link span { margin-left: 12px;
}

.menu-toggle { display: none; margin-left: auto; width: 38px; height: 38px; border: 1px solid var(--white-line); background: transparent; border-radius: 6px;
}

.menu-toggle i { display: block; width: 15px; height: 1px; background: white; margin: 4px auto;
}

.scene { position: relative; overflow: hidden;
}

.scene[id] { scroll-margin-top: 75px;
}

.section-pad { padding: clamp(90px, 10vw, 150px) var(--page);
}

.scene-dark { color: white; background: var(--ink);
}

.scene-paper { background: var(--pearl); color: var(--text);
}

.scene-label { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 10px; font-weight: 500; letter-spacing: .13em;
}

.scene-label::after { content: ""; width: 55px; height: 1px; background: currentColor; opacity: .5; order: -1;
}

.scene-label span:first-child { color: var(--cobalt);
}

.scene-label-light { color: rgba(255,255,255,.6);
}

.scene-label-light span:first-child { color: var(--brand-blue);
}

h1,
h2,
h3,
p { text-wrap: balance;
}

h1,
h2,
h3 { font-weight: 300; letter-spacing: 0;
}

h1 em,
h2 em { color: var(--cobalt); font-style: normal;
}

.scene-dark h1 em { color: var(--brand-blue);
}

.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: end; margin-top: 55px;
}

.section-heading h2 { margin: 0; font-size: clamp(52px, 6.6vw, 104px); line-height: .98;
}

.section-heading > p { max-width: 420px; margin: 0 0 8px; color: var(--text-soft); font-size: 16px; line-height: 1.65;
}

.reveal { opacity: 1; filter: none; transform: none;
}

.js .reveal { opacity: var(--reveal-opacity,1); filter: blur(var(--reveal-blur,0px)); transform: translateY(var(--reveal-y,0px)) scale(var(--reveal-scale,1)); transition:none;
}

.js .hero .reveal { opacity: 1; filter: none; transform: none; will-change: auto;
}

.js .home-cover .reveal { opacity: 1; filter: none; transform: none; will-change: auto;
}

.reveal-delay { transition-delay: 160ms;
}

.reveal.is-visible { opacity:var(--reveal-opacity,1); filter:blur(var(--reveal-blur,0)); transform:translateY(var(--reveal-y,0)) scale(var(--reveal-scale,1));
}

.hero { min-height: 100svh; padding: clamp(118px, 13vh, 170px) var(--page) 72px; isolation: isolate; background: radial-gradient(circle at 80% 24%, rgba(86,166,204,.16), transparent 32%), var(--ink);
}

.signal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .58; z-index: -1;
}

.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,6,7,.96) 0%, rgba(5,6,7,.78) 43%, rgba(5,6,7,.1) 78%), linear-gradient(0deg, rgba(5,6,7,.95), transparent 35%);
}

.button { display: inline-flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 500; transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 240ms ease;
}

.button:hover { transform: translateY(-2px);
}

.president { background: linear-gradient(125deg, var(--pearl), white 55%, #edf4f7);
}

.president-photo { position: relative; margin: 0;
}

.president-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border: 1px solid rgba(44,98,214,.28); border-radius: var(--radius-hero);
}

.president-photo img { width: 100%; min-height: 610px; object-fit: cover; filter: saturate(.8) contrast(1.04); border-radius: var(--radius-hero);
}

.president-photo figcaption { position: absolute; inset: auto 18px 18px; padding: 14px 16px; display: flex; justify-content: space-between; color: white; background: rgba(12,15,20,.72); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.17); border-radius: 6px; font-size: 8px; letter-spacing: .12em;
}

.president-copy { max-width: 710px;
}

.quote-mark { color: var(--cobalt); font-size: 85px; font-weight: 200; line-height: .5;
}

.president-copy h2 { margin: 32px 0; font-size: clamp(48px, 5.3vw, 84px); line-height: 1;
}

.president-copy > p { max-width: 630px; color: var(--text-soft); font-size: 17px; line-height: 1.7;
}

.signature-lockup { display: flex; flex-direction: column; gap: 2px; margin: 32px 0;
}

.signature-lockup span { font-size: 22px; font-weight: 300;
}

.signature-lockup small { color: var(--text-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}

.ink-link { display: inline-flex; padding: 10px 0; color: var(--text); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500;
}

.services { background: white;
}

.services-heading { border-bottom: 1px solid var(--line); padding-bottom: 55px;
}

.service-board { display: grid; grid-template-columns: .44fr .56fr; gap: clamp(25px,5vw,80px); margin-top: 55px;
}

.service-nav { display: flex; flex-direction: column;
}

.service-tab { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; min-height: 77px; padding: 0 7px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text-muted); text-align: left; transition: color 160ms, padding 240ms var(--ease);
}

.service-tab span { color: var(--cobalt); font-size: 9px;
}

.service-tab strong { font-size: 22px; font-weight: 400; letter-spacing: 0;
}

.service-tab i { opacity: 0; font-style: normal; color: var(--cobalt); transform: translateX(-8px); transition: opacity 160ms, transform 240ms;
}

.service-tab:hover,
.service-tab.is-active { color: var(--text); padding-left: 15px;
}

.service-tab.is-active i { opacity: 1; transform: none;
}

.service-panel { position: relative; min-height: 540px; padding: clamp(28px,4vw,60px); overflow: hidden; color: white; background: linear-gradient(145deg, var(--graphite), #152033); border-radius: var(--radius-hero); box-shadow: 0 25px 70px rgba(16,39,53,.18);
}

.service-panel::before { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border: 1px solid rgba(184,239,255,.16); border-radius: 50%; box-shadow: inset 0 0 80px rgba(86,166,204,.08);
}

.service-panel::after { content: ""; position: absolute; right: -15%; top: -30%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(86,166,204,.16), transparent 66%);
}

.service-panel > * { position: relative; z-index: 2;
}

.service-panel-top { display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .13em;
}

.status-chip { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px;
}

.status-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--success);
}

.service-panel h3 { max-width: 690px; margin: clamp(65px,9vw,120px) 0 20px; font-size: clamp(45px,5.2vw,78px); line-height: .98;
}

.service-panel > p { max-width: 570px; color: rgba(255,255,255,.65); font-size: 16px;
}

.deliverable-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin: 35px 0; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
}

.deliverable-grid span { padding: 11px 13px; background: rgba(5,6,7,.62); color: rgba(255,255,255,.7); font-size: 10px;
}

.service-panel .ink-link { color: white; border-color: rgba(255,255,255,.2);
}

.portal { color: white; background: var(--graphite); isolation: isolate;
}

.portal::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 52px 52px;
}

.node { position: absolute; width: 92px; padding: 8px; color: var(--text); background: white; border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 6px 14px rgba(16,39,53,.08); font-size: 7px;
}

.node::before { content: ""; width: 5px; height: 5px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--cobalt);
}

.leaders { background: var(--mist);
}

.leader-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(7px,1.25vw,18px); margin-top:70px;
}

.leader-card { display: block;
}

.leader-visual { position: relative; width: 100%; height: auto; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-hero); display: grid; place-items: center; color: white; transition: transform 450ms var(--ease), box-shadow 450ms;
}

.leader-card:hover .leader-visual { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(16,39,53,.16);
}

.leader-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg,rgba(5,6,7,.52),transparent 46%); pointer-events: none;
}

.leader-visual > img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: filter 450ms;
}

.leader-card:hover .leader-visual > img { filter: saturate(1.05);
}

.leader-visual > span { position: relative; z-index: 2; font-size: 94px; font-weight: 200; letter-spacing: 0;
}

.leader-visual > small { position: absolute; z-index: 2; left: 16px; top: 14px; font-size: 7px; letter-spacing: .12em;
}

.leader-visual > i { position: absolute; z-index: 2; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; pointer-events: none;
}

.leader-visual > i::after { content: ""; position: absolute; inset: 55px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
}

.leader-danny { background: radial-gradient(circle at 70% 25%, rgba(86,166,204,.8), transparent 30%), linear-gradient(145deg,var(--tidal-deep),var(--tidal));
}

.leader-charlie { background: radial-gradient(circle at 30% 20%, rgba(120,166,255,.75), transparent 32%), linear-gradient(145deg,#0c0f14,#20252e);
}

.leader-meta { display: flex; justify-content: space-between; align-items: end; margin-top: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}

.leader-meta > div { display: flex; flex-direction: column;
}

.leader-meta span { color: var(--cobalt); font-size: 8px; letter-spacing: .1em;
}

.leader-meta h3 { margin: 4px 0 0; font-size: 33px;
}

.leader-meta b { color: var(--text-muted); font-size: 8px; font-weight: 500; letter-spacing: .09em;
}

.leader-card > p { max-width: 460px; color: var(--text-soft); font-size: 12px;
}

.why { min-height: 900px; display: grid; place-items: center; text-align: center; isolation: isolate; background: radial-gradient(circle at 50% 15%, rgba(58,70,88,.7), transparent 45%), linear-gradient(180deg,var(--graphite),#050607);
}

.why h2 { margin: 0; font-size: clamp(56px,7.8vw,120px); line-height: .96;
}

.why h2 + p { max-width: 630px; margin: 35px auto; color: rgba(255,255,255,.65); font-size: 17px; line-height: 1.7;
}

.reach { background: white;
}

.reach-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 8vw; align-items: end; margin-top: 55px;
}

.reach-heading h2 { margin: 0; font-size: clamp(58px,7vw,108px); line-height: .94;
}

.reach-heading p { max-width: 370px; margin: 0 0 8px; color: var(--text-soft); font-size: 16px;
}

.site-footer { min-height: 90px; padding: 20px var(--page); display: flex; align-items: center; justify-content: space-between; gap: 25px; color: rgba(255,255,255,.46); background: var(--ink); font-size: 9px; letter-spacing: .08em;
}

.site-footer .wordmark { color: white;
}

@media (max-width: 820px) {
  .site-header { height: 68px;
  }

  .main-nav,
  .header-cta { display: none;
  }

  .menu-toggle { display: block;
  }

  .main-nav.is-open { position: absolute; top: 68px; left: 0; right: 0; height: calc(100vh - 68px); padding: 35px 22px; display: flex; flex-direction: column; gap: 8px; color: white; background: rgba(5,6,7,.98);
  }

  .main-nav.is-open a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 20px;
  }

  .section-pad { padding-top: 95px; padding-bottom: 95px;
  }

  .hero { padding-top: 110px; min-height: auto;
  }

  .section-heading,
  .service-board,
  .reach-heading { grid-template-columns: 1fr;
  }

  .president-photo img { min-height: 480px;
  }

  .service-board { gap: 35px;
  }

  .leader-grid { grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .why { min-height: 780px;
  }
}

@media (max-width: 560px) {
  .section-heading h2,
  .why h2,
  .reach-heading h2 { font-size: clamp(48px,14vw,76px);
  }

  .president-copy h2 { font-size: 46px;
  }

  .president-photo img { min-height: 410px;
  }

  .president-photo figcaption { align-items: flex-start; flex-direction: column; gap: 4px;
  }

  .service-panel { min-height: 520px;
  }

  .deliverable-grid { grid-template-columns: 1fr;
  }

  .portal { padding-left: 10px; padding-right: 10px;
  }

  .portal > .scene-label { margin-left: 10px; margin-right: 10px;
  }

  .leader-visual { height: auto;
  }

  .site-footer { align-items: flex-start; flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
  }

  *,
  *::before,
  *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important;
  }

  .signal-canvas { display: none;
  }
}

/* --------------------------------------------------------------------------
   Depth pass: Paper warmth, heavier headline beats, cinematic media systems
   -------------------------------------------------------------------------- */

:root {
  --warm-paper: #fcf6ec;
  --warm-canvas: #f6efe6;
  --warm-deep: #ebd4b4;
  --warm-glow: #f7e3c4;
  --warm-ink: #2a1f14;
  --warm-soft: #6d5844;
}

h1 strong,
h2 strong,
h3 strong { font-weight: 800; letter-spacing: 0;
}

.scene-paper { background: var(--warm-paper);
}

.system { background: linear-gradient(145deg, var(--warm-paper), #f3e9dd);
}

.services { background: #fffaf4;
}

.leaders { background: #f3eadf;
}

.reach { background: #fffaf5;
}

/* Warm, horizontal president transmission */

.president { color: var(--warm-ink); background: radial-gradient(circle at 78% 20%, rgba(235,212,180,.75), transparent 32%), linear-gradient(145deg, #fffaf2, #f2e5d6);
}

.president-stage { position: relative; margin-top: 58px;
}

.president-photo { height: clamp(430px,48vw,690px); overflow: hidden; border-radius: var(--radius-hero); background: var(--warm-deep); box-shadow: 0 30px 75px rgba(92,65,37,.14);
}

.president-photo::before { inset: 16px; z-index: 2; border-color: rgba(247,227,196,.55); pointer-events: none;
}

.president-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 33%; border-radius: 0; filter: sepia(.15) saturate(.78) contrast(1.04); transform: scale(1.015);
}

.president-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42,31,20,.06), transparent 45%), linear-gradient(0deg, rgba(42,31,20,.62), transparent 35%); pointer-events: none;
}

.president-photo figcaption { z-index: 4; inset: auto 28px 28px; max-width: 430px; background: rgba(42,31,20,.62); border-color: rgba(247,227,196,.28);
}

.president-copy { position: relative; z-index: 6; width: min(1080px,88%); max-width: none; margin: -115px auto 0; padding: clamp(32px,4vw,58px); overflow: hidden; border: 1px solid rgba(109,88,68,.16); border-radius: 18px; background: linear-gradient(135deg,rgba(255,253,248,.97),rgba(255,248,239,.93)); backdrop-filter: blur(22px); box-shadow: 0 25px 70px rgba(92,65,37,.12);
}

.president-copy::after { content: "NU / 02"; position: absolute; right: 24px; top: 22px; color: rgba(44,98,214,.28); font-size: 7px; letter-spacing: .14em;
}

.president-copy h2 { max-width: 900px; margin: 14px 0 34px; font-size: clamp(40px,4.25vw,68px); line-height: 1.02;
}

.president-copy h2 strong { color: var(--cobalt);
}

.president-copy .quote-mark { color: #c68451;
}

.president-copy-footer { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: 24px;
}

.president-copy-footer .signature-lockup { margin: 0;
}

.president-copy-footer .ink-link { margin: 0;
}

/* Each service has a genuinely different visual scene. */

.service-panel { min-height: 680px; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr auto auto; gap: 0 34px;
}

.service-panel-top { grid-column: 1/-1;
}

.service-scene { position: relative; grid-row: 2/4; min-height: 410px; margin-top: 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(4,8,12,.58);
}

.service-story { align-self: end; padding-top: 35px;
}

.service-panel h3 { margin: 0 0 20px; font-size: clamp(39px,4.4vw,67px);
}

.service-panel > p { margin: 0;
}

.service-panel .deliverable-grid { grid-column: 2; margin: 25px 0;
}

.service-panel > .ink-link { grid-column: 2; justify-self: start;
}

.service-scene::after { content: "INTERACTIVE SERVICE MODEL"; position: absolute; left: 12px; bottom: 10px; color: rgba(255,255,255,.25); font-size: 5px; letter-spacing: .13em;
}

/* Why NuCulture: emotional scale + kinetic letter system. */

.why { min-height: 1450px; padding-top: 150px; padding-bottom: 150px;
}

.why h2 { font-size:clamp(55px,7.5vw,115px);
}

.why h2 strong {color:white
}

.why h2 em {font-weight:200
}

@media(max-width:900px) {
  .president-photo {height:500px
  }

  .president-copy {width:94%;margin-top:-70px;padding:28px
  }

  .president-copy h2 {font-size:clamp(38px,7vw,54px)
  }

  .service-panel {display:block;min-height:0
  }

  .service-scene {min-height:380px
  }

  .service-story {padding-top:30px
  }

  .service-panel .deliverable-grid {margin-top:25px
  }

  .why {min-height:1250px
  }
}

@media(max-width:560px) {
  .president-photo {height:340px
  }

  .president-copy {width:100%;margin-top:-25px;padding:24px 20px
  }

  .president-copy h2 {font-size:34px;line-height:1.05
  }

  .president-copy-footer {align-items:flex-start;flex-direction:column;gap:18px
  }

  .president-photo figcaption {inset:auto 12px 12px
  }

  .service-scene {min-height:300px
  }

  .service-panel h3 {font-size:39px
  }

  .why {min-height:1200px
  }
}

.president-profile-link { position: absolute; z-index: 6; left: 28px; top: 28px; padding: 9px 12px; color: white; border: 1px solid rgba(255,255,255,.28); border-radius: 5px; background: rgba(42,31,20,.48); backdrop-filter: blur(12px); font-size: 7px; letter-spacing: .11em; transition: background 160ms ease, transform 160ms ease;
}

.president-profile-link:hover { color: var(--ink); background: var(--brand-blue); transform: translateY(-2px);
}

.president-profile-link span { margin-left: 9px;
}

.signature-lockup { width: fit-content;
}

.signature-lockup:hover span { color: var(--cobalt);
}

.service-board { display: block; margin-top: 62px;
}

.service-index-track { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; margin-bottom: 12px; color: var(--text-muted); font-size: 8px; letter-spacing: .12em;
}

.service-index-track > span { color: var(--cobalt); font-weight: 700;
}

.service-index-track > i { height: 2px; overflow: hidden; background: rgba(44,98,214,.12);
}

.service-index-track > i b { display: block; width: 33.333%; height: 100%; background: var(--cobalt); transition: width 520ms var(--ease);
}

.service-nav { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: none;
}

.service-nav::-webkit-scrollbar { display: none;
}

.service-tab { min-width: 175px; min-height: 92px; padding: 15px 14px; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-content: center; border: 0; border-right: 1px solid var(--line);
}

.service-tab span { grid-column: 1/-1; margin-bottom: 7px;
}

.service-tab strong { font-size: clamp(15px,1.45vw,22px);
}

.service-tab:hover,
.service-tab.is-active { padding-left: 20px; background: rgba(255,255,255,.55); box-shadow: inset 0 -3px var(--cobalt);
}

.service-panel { min-height: 650px; margin-top: 18px; grid-template-columns: 1.12fr .88fr; grid-template-rows: auto 1fr auto auto auto; gap: 0 46px;
}

.service-panel-top { grid-column: 1/-1;
}

.service-scene { grid-column: 1; grid-row: 2/6; min-height: 500px;
}

.service-story { grid-column: 2; grid-row: 2; align-self: center;
}

.service-fit { display: grid; grid-template-columns: 112px 1fr; gap: 12px; margin: 25px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.55;
}

.service-fit span { color: var(--brand-blue); font-size: 7px; font-weight: 700; letter-spacing: .12em;
}

.deliverable-label { grid-column: 2; grid-row: 3; align-self: end; margin: 20px 0 0; color: var(--brand-blue); font-size: 7px; font-weight: 700; letter-spacing: .13em;
}

.service-panel .deliverable-grid { grid-column: 2; grid-row: 4; grid-template-columns: repeat(2,1fr); margin: 8px 0 24px;
}

.service-actions { grid-column: 2; grid-row: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}

.service-actions .ink-link { color: white; border-color: rgba(255,255,255,.22);
}

.service-scope-link { padding: 12px 14px; color: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.13); border-radius: 5px; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; transition: color 180ms,background 180ms;
}

.service-scope-link:hover { color: #071015; background: var(--brand-blue);
}

.service-panel.service-swap { animation: serviceSwap 520ms var(--ease) both;
}

.service-panel.is-coming-soon > :not(.service-coming-soon) {
  filter: grayscale(1) blur(6px);
  opacity: .4;
  pointer-events: none;
  user-select: none;
}

.service-coming-soon {
  position: absolute!important;
  z-index: 20!important;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 32px;
  color: #fff;
  background: rgba(9,10,10,.38);
  -webkit-backdrop-filter: grayscale(1) blur(7px);
  backdrop-filter: grayscale(1) blur(7px);
  text-align: center;
  isolation: isolate;
}

.service-coming-soon[hidden] { display: none;
}

.service-coming-soon span,
.service-coming-soon small {
  color: rgba(255,255,255,.62);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
}

.service-coming-soon strong {
  font-size: clamp(46px,7vw,104px);
  font-weight: 760;
  line-height: .84;
  letter-spacing: -.02em;
}

.service-coming-soon small { font-size: 7px;
}

@media (min-width: 821px) {
  .service-panel[data-layout="assets"] { grid-template-columns: .88fr 1.12fr;
  }

  .service-panel[data-layout="assets"] .service-scene { grid-column: 2;
  }

  .service-panel[data-layout="assets"] .service-story,
  .service-panel[data-layout="assets"] .deliverable-label,
  .service-panel[data-layout="assets"] .deliverable-grid,
  .service-panel[data-layout="assets"] .service-actions { grid-column: 1;
  }

  .service-panel[data-layout="events"] { min-height: 900px; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(430px,1fr) auto auto auto;
  }

  .service-panel[data-layout="events"] .service-story { grid-column: 1; grid-row: 2;
  }

  .service-panel[data-layout="events"] .service-scene { grid-column: 1; grid-row: 3; min-height: 460px;
  }

  .service-panel[data-layout="events"] .deliverable-label { grid-column: 1; grid-row: 4;
  }

  .service-panel[data-layout="events"] .deliverable-grid { grid-column: 1; grid-row: 5; grid-template-columns: repeat(4,1fr); margin-bottom: 18px;
  }

  .service-panel[data-layout="events"] .service-actions { grid-column: 1; grid-row: 6;
  }

  .service-panel[data-layout="backend"] { min-height: 1440px; grid-template-columns:1fr; grid-template-rows:auto auto minmax(1010px,1fr) auto auto auto;
  }

  .service-panel[data-layout="backend"] .service-story { grid-column:1; grid-row:2;
  }

  .service-panel[data-layout="backend"] .service-scene { grid-column:1; grid-row:3; min-height:1040px;
  }

  .service-panel[data-layout="backend"] .deliverable-label { grid-column:1; grid-row:4;
  }

  .service-panel[data-layout="backend"] .deliverable-grid { grid-column:1; grid-row:5; grid-template-columns:repeat(4,1fr); margin-bottom:18px;
  }

  .service-panel[data-layout="backend"] .service-actions { grid-column:1; grid-row:6;
  }

  .service-panel[data-layout="growth"] { min-height:1180px; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto minmax(650px,1fr) auto; column-gap:58px;
  }

  .service-panel[data-layout="growth"] .service-story { grid-column:1; grid-row:2/4; align-self:center;
  }

  .service-panel[data-layout="growth"] .service-scene { grid-column:1/-1; grid-row:4; min-height:680px; margin-top:42px;
  }

  .service-panel[data-layout="growth"] .deliverable-label { grid-column:2; grid-row:2; align-self:end;
  }

  .service-panel[data-layout="growth"] .deliverable-grid { grid-column:2; grid-row:3; grid-template-columns:repeat(2,1fr); margin:8px 0 0;
  }

  .service-panel[data-layout="growth"] .service-actions { grid-column:1/-1; grid-row:5; margin-top:20px;
  }
}

.service-panel[data-layout="events"] .service-story { width:min(780px,100%); justify-self:center; text-align:center;
}

.service-panel[data-layout="events"] .service-story h3 { max-width:760px; margin-inline:auto;
}

.service-panel[data-layout="events"] .service-story>p:not(.service-fit) { max-width:600px; margin-inline:auto;
}

.service-panel[data-layout="events"] .service-fit { display:none;
}

.service-panel[data-layout="events"] .deliverable-label { text-align:center;
}

.service-panel[data-layout="events"] .service-actions { justify-content:center;
}

.service-panel[data-layout="backend"] .service-story { width:min(850px,100%); justify-self:center; text-align:center;
}

.service-panel[data-layout="backend"] .service-story h3 { max-width:820px; margin-inline:auto;
}

.service-panel[data-layout="backend"] .service-story>p:not(.service-fit) { max-width:680px; margin-inline:auto;
}

.service-panel[data-layout="backend"] .service-fit { display:none;
}

.service-panel[data-layout="backend"] .deliverable-label { text-align:center;
}

.service-panel[data-layout="backend"] .service-actions { justify-content:center;
}

.service-panel[data-layout="growth"] .service-story { width:100%; justify-self:stretch; text-align:left;
}

.service-panel[data-layout="growth"] .service-story h3 { max-width:680px;
}

.service-panel[data-layout="growth"] .service-story>p:not(.service-fit) { max-width:650px;
}

.service-panel[data-layout="growth"] .service-fit { display:grid;
}

.service-panel[data-layout="growth"] .deliverable-label { text-align:left;
}

.service-panel[data-layout="growth"] .service-actions { justify-content:center;
}

.service-panel[data-layout="brand-content"] .deliverable-grid span:last-child { grid-column: 1 / -1;
}

.service-scene-brand-content::after { display: none;
}

/* Content Studio preview: the homepage now opens with current production work,
   the same promise, and the same operating flow as the full studio page. */

.home-studio-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  color: #f7f8f6;
  background:
    radial-gradient(circle at 83% 18%,rgba(44,98,214,.24),transparent 34%),
    linear-gradient(145deg,#050708 0%,#07111b 58%,#0b1730 100%);
}

.home-studio-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(184,239,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,239,255,.055) 1px,transparent 1px);
  background-size: 42px 42px;
}

.home-studio-preview > header,
.home-studio-preview > footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  letter-spacing: .13em;
}

.home-studio-preview > header {
  justify-content: space-between;
  padding-bottom: 10px;
  color: var(--brand-blue);
  border-bottom: 1px solid rgba(184,239,255,.16);
  font-size: 7px;
}

.home-studio-preview > header b { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.48); font-weight: 500;
}

.home-studio-preview > header i { width: 6px; height: 6px; border-radius: 50%; background: #77e2bb; box-shadow: 0 0 14px rgba(119,226,187,.74); animation: studioLive 1.8s ease-in-out infinite;
}

.home-studio-reel-grid {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(120px,.65fr);
  grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.home-studio-reel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(184,239,255,.18);
  border-radius: 7px;
  background: #0a1014;
}

.home-studio-reel.is-primary { grid-row: 1 / -1;
}

.home-studio-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(2,5,8,.74),transparent 50%);
}

.home-studio-reel video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; opacity: 1; filter: saturate(.84) contrast(1.04); transition: opacity 220ms ease,transform 900ms var(--ease),filter 400ms ease;
}

.home-studio-reel:nth-child(2) video { object-position: center 42%;
}

.home-studio-reel:nth-child(3) video { object-position: center 38%;
}

.home-studio-reel:hover video { transform: scale(1.035); filter: saturate(1) contrast(1.03);
}

.home-studio-reel.is-changing video { opacity: 0;
}

.home-studio-reel > span { position: absolute; z-index: 3; left: 11px; bottom: 9px; color: rgba(255,255,255,.72); font-size: 6px; letter-spacing: .13em;
}

.home-studio-statement {
  position: absolute;
  z-index: 4;
  left: 32px;
  bottom: 54px;
  pointer-events: none;
  text-shadow: 0 5px 28px rgba(0,0,0,.72);
}

.home-studio-statement span,
.home-studio-statement strong { display: block; line-height: .82; letter-spacing: -.015em;
}

.home-studio-statement span { font-size: clamp(22px,2.5vw,36px); font-weight: 350;
}

.home-studio-statement strong { color: var(--brand-blue); font-size: clamp(30px,3.5vw,50px);
}

.home-studio-preview > footer {
  justify-content: space-between;
  gap: 6px;
  color: rgba(255,255,255,.56);
  font-size: 6px;
}

.home-studio-preview > footer i { color: var(--brand-blue); font-size: 10px; font-style: normal;
}

@keyframes studioLive { 0%,100% { opacity: .42; } 50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-studio-preview > header i { animation: none;
  }

  .home-studio-reel video { transition: none;
  }
}

@media (max-width: 620px) {
  .service-panel[data-layout="brand-content"] .deliverable-grid span:last-child { grid-column: auto;
  }

  .home-studio-preview { gap: 8px; padding: 10px;
  }

  .home-studio-preview > header { padding-bottom: 7px; font-size: 6px;
  }

  .home-studio-preview > header b { display: none;
  }

  .home-studio-reel-grid { grid-template-columns: minmax(0,1.18fr) minmax(92px,.82fr); gap: 5px;
  }

  .home-studio-reel > span { left: 7px; bottom: 6px; font-size: 5px;
  }

  .home-studio-statement { left: 20px; bottom: 41px;
  }

  .home-studio-statement span { font-size: 18px;
  }

  .home-studio-statement strong { font-size: 27px;
  }

  .home-studio-preview > footer { font-size: 5px;
  }

  .home-studio-preview > footer i:nth-of-type(2),
  .home-studio-preview > footer i:nth-of-type(3),
  .home-studio-preview > footer span:nth-of-type(3),
  .home-studio-preview > footer span:nth-of-type(4) { display: none;
  }
}

/* Ten-case managed-brand rail ------------------------------------------------ */

.case-studies { position: relative; overflow: hidden; color: white; background: radial-gradient(circle at 78% 12%, rgba(184,239,255,.2), transparent 28%), radial-gradient(circle at 14% 42%, rgba(44,98,214,.32), transparent 34%), linear-gradient(145deg,#07111c 0%,#102f52 52%,#07131f 100%);
}

.case-studies::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(184,239,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(184,239,255,.08) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,black,transparent 72%);
}

.case-detail { position: relative; width: min(1180px,88vw); margin: 0 auto 52px; padding: 30px clamp(24px,3vw,46px) 28px; overflow: hidden; color: #111b20; border: 1px solid rgba(184,239,255,.24); border-radius: 18px; background: #fffdf8; box-shadow: 0 26px 70px rgba(2,8,15,.22); opacity: 0; transform: translateY(28px); transition: opacity 300ms var(--ease),transform 420ms var(--ease);
}

.case-detail.is-open { opacity: 1; transform: none;
}

.case-detail.is-refreshing { animation: caseDetailSwap 540ms var(--ease) both;
}

@keyframes caseDetailSwap { 0% { opacity: .15; transform: translateY(18px); } 100% { opacity: 1; transform: none; }
}

@keyframes serviceSwap { 0% { opacity: .45; transform: translateY(12px) scale(.992); } 100% { opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .case-detail { width: 92vw; padding: 28px 24px 22px;
  }

  .service-board { margin-top: 42px;
  }

  .service-panel { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto auto; gap: 0;
  }

  .service-scene { grid-column: 1; grid-row: 2; min-height: 390px;
  }

  .service-story { grid-column: 1; grid-row: 3;
  }

  .deliverable-label { grid-column: 1; grid-row: 4;
  }

  .service-panel .deliverable-grid { grid-column: 1; grid-row: 5;
  }

  .service-actions { grid-column: 1; grid-row: 6;
  }

  .service-panel[data-layout="backend"] .service-scene { min-height:920px;
  }

  .service-panel[data-layout="growth"] .service-scene { min-height:590px;
  }
}

@media (max-width: 560px) {
  .case-detail { width: calc(100% - 24px); margin-bottom: 28px; padding: 24px 18px 18px; border-radius: 13px;
  }

  .service-fit { grid-template-columns: 1fr; gap: 7px;
  }

  .president-profile-link { left: 12px; top: 12px;
  }

  .service-index-track { grid-template-columns: 55px 1fr;
  }

  .service-index-track small { display: none;
  }

  .service-tab { min-width: 165px;
  }

  .service-panel { min-height: 0; padding: 22px 16px 28px;
  }

  .service-scene { min-height: 310px;
  }

  .service-panel .deliverable-grid { display: flex; grid-template-columns: none; overflow-x: auto; background: transparent; border: 0; gap: 6px; scrollbar-width: none;
  }

  .service-panel .deliverable-grid span { flex: 0 0 145px; border: 1px solid rgba(255,255,255,.14);
  }
}

/* --------------------------------------------------------------------------
   Story pass: section transitions, combined offers, interactive ecosystem
   -------------------------------------------------------------------------- */

.scene-transition { position: absolute; z-index: 70; inset: 0; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity 680ms ease;
}

.scene-transition i,
.scene-transition span { position: absolute; display: block; transition: transform 1250ms var(--ease-slow), opacity 900ms ease;
}

.transition-signal i { top: 0; bottom: 0; width: 25.2%; background: #050607;
}

.transition-signal i:nth-child(1) {left:0
}

.transition-signal i:nth-child(2) {left:25%
}

.transition-signal i:nth-child(3) {left:50%
}

.transition-signal i:nth-child(4) {left:75%
}

.transition-signal span { inset: 49% 8%; height: 1px; background: var(--brand-blue); box-shadow: 0 0 22px rgba(184,239,255,.8); transform:scaleX(1);
}

.transition-portrait i { left:0; right:0; height:25.2%; background:#f4e7d7;
}

.transition-portrait i:nth-child(1) {top:0
}

.transition-portrait i:nth-child(2) {top:25%
}

.transition-portrait i:nth-child(3) {top:50%
}

.transition-portrait i:nth-child(4) {top:75%
}

.transition-portrait span { left:50%; top:50%; width:90px; height:90px; border:1px solid rgba(44,98,214,.3); border-radius:50%; transform:translate(-50%,-50%) scale(1);
}

.transition-wipe { background:#103a56;
}

.transition-wipe i { top:-20%; width:32%; height:140%; background:#1c5c88; transform:skewX(-13deg);
}

.transition-wipe i:nth-child(1) {left:-7%
}

.transition-wipe i:nth-child(2) {left:22%
}

.transition-wipe i:nth-child(3) {left:51%
}

.transition-wipe i:nth-child(4) {left:80%
}

.transition-wipe span {inset:0;background:linear-gradient(90deg,transparent,var(--brand-blue),transparent);opacity:.35
}

/* Section 04: a scroll-charged NuCulture lockup resolves into the existing wipe. */

.transition-services-logo {
  --service-intro-progress: 0;
  --service-intro-halo: .1;
  --service-intro-scale: .88;
  inset:0 0 auto;
  height:100svh;
  background:
    radial-gradient(circle at 50% 50%, rgba(86,166,204,.34), transparent 29%),
    linear-gradient(135deg,#0b2d43,#103a56 46%,#174f70);
  isolation:isolate;
}

.transition-services-logo::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(184,239,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,239,255,.12) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center,black,transparent 72%);
}

.transition-services-logo > i { z-index:1; background:linear-gradient(150deg,#1c5c88,#103a56 58%,#0a2a3e);
}

.transition-services-logo > span { z-index:2;
}

.services-transition-mark {
  position:absolute;
  z-index:5;
  left:50%;
  top:38%;
  width:clamp(210px,22vw,310px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:white;
  border-radius:50%;
  background:radial-gradient(circle,rgba(5,20,29,.92) 0 42%,rgba(5,20,29,.52) 58%,transparent 69%);
  box-shadow:0 0 90px rgba(184,239,255,var(--service-intro-halo));
  transform:translate(-50%,-50%) scale(var(--service-intro-scale));
  transition:transform 1180ms var(--ease-slow),opacity 720ms ease,box-shadow 160ms linear;
}

.services-transition-mark::before,
.services-transition-mark::after {
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
}

.services-transition-mark::before {
  padding:3px;
  background:conic-gradient(from -90deg,var(--brand-blue) calc(var(--service-intro-progress) * 1turn),rgba(184,239,255,.13) 0);
  filter:drop-shadow(0 0 10px rgba(184,239,255,.88));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.services-transition-mark::after {
  inset:8px;
  border:1px solid rgba(184,239,255,.18);
  box-shadow:inset 0 0 28px rgba(184,239,255,.08);
}

.services-transition-mark > u {
  position:absolute;
  inset:-18px;
  border-radius:50%;
  text-decoration:none;
  transform:rotate(calc(var(--service-intro-progress) * 1turn));
  transition:transform 80ms linear;
}

.services-transition-mark > u::after {
  content:"";
  position:absolute;
  left:50%;
  top:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:white;
  box-shadow:0 0 10px white,0 0 28px 8px rgba(184,239,255,.76);
  transform:translateX(-50%);
}

.services-transition-mark > b {
  position:relative;
  width:78px;
  height:95px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 13px 18px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(184,239,255,.15));
}

.services-transition-mark > b img { width:100%; height:100%; object-fit:contain;
}

.services-transition-mark > strong {
  position:relative;
  margin-top:18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.25em;
  text-indent:.25em;
}

.services-transition-mark > small {
  position:relative;
  margin-top:8px;
  color:rgba(255,255,255,.48);
  font-size:7px;
  letter-spacing:.16em;
}

.transition-iris { background:#f7efe5;
}

.transition-iris i { left:50%; top:50%; border:1px solid rgba(44,98,214,.22); border-radius:50%; transform:translate(-50%,-50%) scale(1);
}

.transition-iris i:nth-child(1) {width:18vw;height:18vw
}

.transition-iris i:nth-child(2) {width:36vw;height:36vw
}

.transition-iris i:nth-child(3) {width:58vw;height:58vw
}

.transition-iris i:nth-child(4) {width:82vw;height:82vw
}

.transition-iris span {left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:var(--cobalt);transform:translate(-50%,-50%)
}

.transition-stack i { left:0; right:0; height:25.2%; background:#fffaf4; border-bottom:1px solid rgba(44,98,214,.14);
}

.transition-stack i:nth-child(1) {top:0
}

.transition-stack i:nth-child(2) {top:25%
}

.transition-stack i:nth-child(3) {top:50%
}

.transition-stack i:nth-child(4) {top:75%
}

.transition-stack span {left:8%;right:8%;top:50%;height:3px;background:var(--cobalt);transform:scaleX(1)
}

.transition-scan { background:#050b0f;
}

.transition-scan i { top:0; bottom:0; width:1px; background:rgba(184,239,255,.28); box-shadow:0 0 35px rgba(184,239,255,.28);
}

.transition-scan i:nth-child(1) {left:20%
}

.transition-scan i:nth-child(2) {left:40%
}

.transition-scan i:nth-child(3) {left:60%
}

.transition-scan i:nth-child(4) {left:80%
}

.transition-scan span {top:0;bottom:0;left:0;width:3px;background:var(--brand-blue);box-shadow:0 0 45px var(--brand-blue)
}

.transition-orbit { background:#f6ecdf;
}

.transition-orbit i { left:50%;top:50%;border:1px solid rgba(44,98,214,.22);border-radius:50%;transform:translate(-50%,-50%) rotate(0deg) scale(1);
}

.transition-orbit i:nth-child(1) {width:22vw;height:22vw
}

.transition-orbit i:nth-child(2) {width:42vw;height:42vw
}

.transition-orbit i:nth-child(3) {width:64vw;height:64vw
}

.transition-orbit i:nth-child(4) {width:88vw;height:88vw
}

.transition-orbit span {left:50%;top:50%;width:70px;height:70px;border-radius:50%;background:var(--cobalt);transform:translate(-50%,-50%)
}

.transition-doors i { top:0; bottom:0; width:25.1%; background:#f1e5d8;
}

.transition-doors i:nth-child(1) {left:0
}

.transition-doors i:nth-child(2) {left:25%
}

.transition-doors i:nth-child(3) {right:25%
}

.transition-doors i:nth-child(4) {right:0
}

.transition-doors span {left:50%;top:0;bottom:0;width:1px;background:rgba(44,98,214,.45)
}

.transition-type { background:#080b0e;
}

.transition-type i {display:none
}

.transition-type span {inset:0;display:grid;place-items:center;color:transparent;-webkit-text-stroke:1px rgba(184,239,255,.38);font-size:clamp(100px,22vw,330px);font-weight:800;letter-spacing:0
}

.transition-type span::after {content:"WHY"
}

.transition-horizon { background:#fffaf5;
}

.transition-horizon i {left:0;right:0;height:25.1%;background:#fffaf5
}

.transition-horizon i:nth-child(1) {top:0
}

.transition-horizon i:nth-child(2) {top:25%
}

.transition-horizon i:nth-child(3) {top:50%
}

.transition-horizon i:nth-child(4) {top:75%
}

.transition-horizon span {left:0;right:0;top:50%;height:2px;background:var(--cobalt);box-shadow:0 0 30px rgba(44,98,214,.35)
}

.event-world { position:absolute; inset:0; display:grid; grid-template-columns:1fr; padding:14px; background:#050607;
}

.venue-card { position:relative; min-width:0; overflow:hidden; border:1px solid rgba(184,239,255,.16); border-radius:10px;
}

.venue-card header,
.venue-card footer { position:absolute; z-index:12; left:15px; right:15px; display:flex; align-items:center; justify-content:space-between;
}

.venue-card header { top:13px;
}

.venue-card footer { bottom:12px; justify-content:flex-start; gap:6px;
}

.venue-card header span,
.venue-card footer span { color:rgba(255,255,255,.63); font-size:6px; letter-spacing:.13em;
}

.venue-card header i { padding:5px 7px; color:#071015; border-radius:999px; background:var(--brand-blue); font-size:5px; font-style:normal; font-weight:800; letter-spacing:.12em;
}

.venue-card footer span { padding:6px 8px; border:1px solid rgba(255,255,255,.13); border-radius:999px;
}

.stage-venue { background:linear-gradient(180deg,#07111a,#020304);
}

.venue-beams i { position:absolute; top:-12%; width:22%; height:78%; background:linear-gradient(180deg,rgba(184,239,255,.34),transparent 76%); clip-path:polygon(44% 0,56% 0,100% 100%,0 100%); transform-origin:top;
}

.venue-beams i:nth-child(1) {left:5%;animation:venueBeam 3.2s ease-in-out infinite
}

.venue-beams i:nth-child(2) {left:39%;animation:venueBeam 3.2s -.8s ease-in-out infinite
}

.venue-beams i:nth-child(3) {right:5%;animation:venueBeam 3.2s -1.6s ease-in-out infinite
}

.venue-screen { position:absolute; z-index:4; left:12%; right:12%; top:16%; padding:28px 16px 32px; border:1px solid rgba(184,239,255,.28); background:rgba(4,8,12,.72); text-align:center; box-shadow:0 0 70px rgba(44,98,214,.2);
}

.venue-screen small { color:var(--brand-blue); font-size:5px; letter-spacing:.14em;
}

.venue-screen strong { display:block; margin-top:20px; font-size:clamp(46px,6vw,92px); line-height:.76; letter-spacing:0;
}

.venue-deck { position:absolute; z-index:3; left:8%; right:8%; bottom:22%; height:14%; background:linear-gradient(90deg,#102f52,#2c62d6,#102f52); clip-path:polygon(7% 0,93% 0,100% 100%,0 100%); box-shadow:0 -24px 55px rgba(120,166,255,.2);
}

@keyframes venueBeam { 0%,100%{opacity:.24;transform:rotate(-4deg)}50%{opacity:.72;transform:rotate(5deg)}
}

@media(max-width:820px) {
  .scene-transition {display:block
  }
}

@media(max-width:560px) {
  .event-world { gap:6px; padding:7px;
  }

  .venue-card { border-radius:7px;
  }

  .venue-card header { left:8px; right:8px; top:8px;
  }

  .venue-card footer { left:7px; right:7px; bottom:7px; gap:3px;
  }

  .venue-card footer span { padding:4px; font-size:4px;
  }

  .venue-screen { left:8%; right:8%; top:22%; padding:13px 5px 16px;
  }

  .venue-screen strong { margin-top:10px; font-size:22px;
  }

  .service-panel[data-layout="backend"] .service-scene { min-height:1080px;
  }

  .service-panel[data-layout="growth"] .service-scene { min-height:570px;
  }
}

@media(max-width:820px) {
  .service-panel[data-layout="growth"] .service-scene { min-height:980px;
  }
}

@media(max-width:560px) {
  .service-panel[data-layout="growth"] .service-scene { min-height:1260px;
  }

  .services-transition-mark { width:210px;
  }

  .services-transition-mark > b { width:62px; height:62px; font-size:29px;
  }
}

/* --------------------------------------------------------------------------
   Cohesion pass: continuous chapter rail, reversible reveals, soft edges
   -------------------------------------------------------------------------- */

.scene { isolation:isolate;
}

.scene-label { transition:opacity 800ms ease,transform 1000ms var(--ease-slow);
}

.scene-label::after { transform-origin:left; transition:width 900ms var(--ease-slow),opacity 700ms ease;
}

.scene.is-scene-after .scene-label { opacity:.38; transform:translateY(14px);
}

.scene.is-scene-before .scene-label { opacity:.3; transform:translateY(-12px);
}

.scene.is-scene-current .scene-label { opacity:1; transform:none;
}

.scene.is-scene-current .scene-label::after { width:78px; opacity:.8;
}

.story-rail {
  --story-progress:0;
  position:fixed;
  z-index:78;
  right:18px;
  top:50%;
  width:176px;
  padding:11px 9px;
  color:white;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(5,6,7,.66);
  box-shadow:0 18px 45px rgba(0,0,0,.14);
  backdrop-filter:blur(18px) saturate(130%);
  transform:translateY(-50%);
}

.story-step[hidden] { display: none!important;
}

.story-rail::before,
.story-rail::after {
  content:"";
  position:absolute;
  z-index:0;
  right:25px;
  top:28px;
  bottom:28px;
  width:1px;
  transform-origin:top;
}

.story-rail::before { background:rgba(255,255,255,.13);
}

.story-rail::after { background:var(--brand-blue); box-shadow:0 0 12px rgba(184,239,255,.3); transform:scaleY(var(--story-progress));
}

.story-step {
  position:relative;
  z-index:2;
  min-height:38px;
  display:grid;
  grid-template-columns:22px 1fr 32px;
  gap:7px;
  align-items:center;
  color:rgba(255,255,255,.38);
  transition:color 420ms ease,transform 520ms var(--ease-slow);
}

.story-step > span { font-size:6px; letter-spacing:.08em; transition:color 420ms ease;
}

.story-step > strong { overflow:hidden; font-size:7px; font-weight:500; letter-spacing:.08em; text-align:right; white-space:nowrap; opacity:0; transform:translateX(8px); transition:opacity 420ms ease,transform 620ms var(--ease-slow);
}

.story-step > i {
  position:relative;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:#0d1217;
  box-shadow:0 0 0 4px rgba(5,6,7,.55);
  font-size:11px;
  font-style:normal;
  transition:color 420ms ease,border-color 520ms ease,background 520ms ease,box-shadow 700ms ease,transform 620ms var(--ease-slow);
}

.story-step > i::before { content:attr(data-icon);
}

.story-step:hover,
.story-step:focus-visible,
.story-step.is-active { color:white; outline:0; transform:translateX(-3px);
}

.story-step:hover > strong,
.story-step:focus-visible > strong,
.story-step.is-active > strong { opacity:1; transform:none;
}

.story-step.is-active > span { color:var(--brand-blue);
}

.story-step.is-active > i { color:#071015; border-color:var(--brand-blue); background:var(--brand-blue); box-shadow:0 0 0 5px rgba(184,239,255,.08),0 0 24px rgba(184,239,255,.32); transform:scale(1.08);
}

@media(min-width:1021px) {
  .story-rail { width:54px; overflow:hidden; transition:width 420ms var(--ease-slow),opacity 240ms ease,transform 360ms var(--ease);
  }

  .story-step { grid-template-columns:32px; gap:0; justify-content:end;
  }

  .story-step > span,
  .story-step > strong { display:none;
  }

  .story-rail:hover,
  .story-rail:focus-within { width:176px;
  }

  .story-rail:hover .story-step,
  .story-rail:focus-within .story-step { grid-template-columns:22px 1fr 32px; gap:7px;
  }

  .story-rail:hover .story-step > span,
  .story-rail:hover .story-step > strong,
  .story-rail:focus-within .story-step > span,
  .story-rail:focus-within .story-step > strong { display:block;
  }
}

/* Every chapter transition follows scroll position—there are no threshold jumps. */

.scene-transition:not(.transition-services-logo) { opacity:var(--scene-cover-opacity,1); transition:none; will-change:opacity;
}

.scene-transition:not(.transition-services-logo) > i,
.scene-transition:not(.transition-services-logo) > span { transition:none; will-change:transform,opacity;
}

.transition-signal:not(.transition-services-logo) i:nth-child(odd) { transform:translateY(var(--scene-shift-negative,0));
}

.transition-signal:not(.transition-services-logo) i:nth-child(even) { transform:translateY(var(--scene-shift-positive,0));
}

.transition-signal:not(.transition-services-logo) span { transform:scaleX(var(--scene-collapse-scale,1));
}

.transition-portrait:not(.transition-services-logo) i:nth-child(odd),
.transition-stack:not(.transition-services-logo) i:nth-child(odd) { transform:translateX(var(--scene-shift-negative,0));
}

.transition-portrait:not(.transition-services-logo) i:nth-child(even),
.transition-stack:not(.transition-services-logo) i:nth-child(even) { transform:translateX(var(--scene-shift-positive,0));
}

.transition-portrait:not(.transition-services-logo) span { opacity:var(--scene-opacity,1); transform:translate(-50%,-50%) scale(var(--scene-portrait-scale,1));
}

.transition-stack:not(.transition-services-logo) span { transform:scaleX(var(--scene-collapse-scale,1));
}

.transition-wipe:not(.transition-services-logo) i:nth-child(odd) { transform:translateY(var(--scene-wipe-positive,0)) skewX(-13deg);
}

.transition-wipe:not(.transition-services-logo) i:nth-child(even) { transform:translateY(var(--scene-wipe-negative,0)) skewX(-13deg);
}

.transition-wipe:not(.transition-services-logo) span { transform:translateX(var(--scene-span-shift,0));
}

.transition-iris:not(.transition-services-logo) i { opacity:var(--scene-opacity,1); transform:translate(-50%,-50%) scale(var(--scene-iris-scale,1));
}

.transition-iris:not(.transition-services-logo) span { opacity:var(--scene-opacity,1); transform:translate(-50%,-50%) scale(var(--scene-collapse-scale,1));
}

.transition-scan:not(.transition-services-logo) i,
.transition-scan:not(.transition-services-logo) span { opacity:var(--scene-opacity,1); transform:translateX(var(--scene-scan-shift,0));
}

.transition-orbit:not(.transition-services-logo) i { opacity:var(--scene-opacity,1); transform:translate(-50%,-50%) rotate(var(--scene-orbit-rotate,0deg)) scale(var(--scene-orbit-scale,1));
}

.transition-orbit:not(.transition-services-logo) span { opacity:var(--scene-opacity,1); transform:translate(-50%,-50%) scale(var(--scene-collapse-scale,1));
}

.transition-doors:not(.transition-services-logo) i:nth-child(-n+2) { transform:translateX(var(--scene-shift-wide-negative,0));
}

.transition-doors:not(.transition-services-logo) i:nth-child(n+3) { transform:translateX(var(--scene-shift-wide-positive,0));
}

.transition-doors:not(.transition-services-logo) span { transform:scaleY(var(--scene-collapse-scale,1));
}

.transition-type:not(.transition-services-logo) span { opacity:var(--scene-opacity,1); transform:scale(var(--scene-type-scale,1));
}

.transition-horizon:not(.transition-services-logo) i,
.transition-horizon:not(.transition-services-logo) span { opacity:var(--scene-opacity,1); transform:translateY(var(--scene-horizon-shift,0));
}

.transition-services-logo { opacity:var(--service-open-opacity,1); transition:none; will-change:opacity;
}

.transition-services-logo > i,
.transition-services-logo > span,
.transition-services-logo .services-transition-mark { transition:none; will-change:transform,opacity;
}

.transition-services-logo > i:nth-child(odd) { transform:translateY(var(--service-open-positive,0)) skewX(-13deg);
}

.transition-services-logo > i:nth-child(even) { transform:translateY(var(--service-open-negative,0)) skewX(-13deg);
}

.transition-services-logo > span { transform:translateX(var(--service-line-shift,0));
}

.transition-services-logo .services-transition-mark { opacity:var(--service-mark-opacity,1); transform:translate(-50%,-50%) scale(var(--service-mark-render-scale,.88));
}

@media(max-width:1020px) {
  .story-rail {
    left:50%;
    right:auto;
    top:auto;
    bottom:12px;
    width:auto;
    display:flex;
    padding:8px;
    border-radius:999px;
    transform:translateX(-50%);
  }

  .story-rail::before,
  .story-rail::after { left:24px; right:24px; top:50%; bottom:auto; width:auto; height:1px; transform-origin:left;
  }

  .story-rail::after { transform:scaleX(var(--story-progress));
  }

  .story-step { width:44px; min-height:44px; display:block;
  }

  .story-step > span,
  .story-step > strong { display:none;
  }

  .story-step > i { width:42px; height:42px;
  }

  .story-step:hover,
  .story-step:focus-visible,
  .story-step.is-active { transform:none;
  }

  .site-footer { padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }

  .services-transition-mark { top:40%;
  }

  .services-transition-mark > b { width:62px; height:76px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .scene-transition {display:none
  }

  .reveal {opacity:1!important;filter:none!important;transform:none!important
  }

  .story-step,
  .story-step>* {transition:none!important
  }
}

/* --------------------------------------------------------------------------
   Editorial homepage cover: real people, clear proposition, restrained proof
   -------------------------------------------------------------------------- */

.site-header {
  height: 76px;
  gap: 32px;
  border-bottom-color: rgba(251,252,253,.17);
  background: rgba(8,10,11,.82);
  backdrop-filter: blur(18px);
}

.site-header .wordmark { font-size: 10px; font-weight: 650; letter-spacing: .16em;
}

.site-header .wordmark-icon { width: 24px; height: 30px;
}

.site-header .main-nav { gap: 30px; color: rgba(251,252,253,.64); font-size: 10px;
}

.site-header .header-cta { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 20px; border-color: rgba(251,252,253,.17); border-radius: 0; font-size: 10px;
}

.story-rail { transition: opacity 240ms ease,transform 360ms var(--ease);
}

body[data-story="01"] .story-rail { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(18px);
}

@media (max-width:820px) {
  .site-header { height: 68px;
  }

  .site-header .header-cta { display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero-led document system: neutral materials, shared typography, softer motion
   -------------------------------------------------------------------------- */

:root {
  --pearl: #f1f1ee;
  --mist: #e8e8e4;
  --paper: #f8f8f6;
  --text: #151615;
  --text-soft: #4d504d;
  --text-muted: #70736f;
  --line: rgba(21,22,21,.14);
  --cobalt: #277da2;
  --warm-paper: #f1f1ee;
  --warm-canvas: #eaeae6;
  --warm-deep: #d2d2cc;
  --warm-glow: #fafaf7;
  --warm-ink: #151615;
  --warm-soft: #5a5d59;
}

body { background: #080a0b;
}

.home-cover { min-height: clamp(820px,88svh,1080px);
}

.scene:not(.home-cover) { border-top: 0;
}

.scene-paper { color: var(--text);
}

.president {
  color: var(--text);
  background:
    linear-gradient(rgba(21,22,21,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,22,21,.035) 1px,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.7),transparent 31%),
    linear-gradient(145deg,#f7f7f4,#e7e7e2);
  background-size: 56px 56px,56px 56px,auto,auto;
}

.president-photo { background: #111211; box-shadow: 0 30px 80px rgba(0,0,0,.18);
}

.president-photo::before { border-color: rgba(255,255,255,.32);
}

.president-photo img { filter: saturate(.9) contrast(1.04);
}

.president-photo::after { background: linear-gradient(90deg,rgba(8,10,11,.16),transparent 45%),linear-gradient(0deg,rgba(8,10,11,.7),transparent 38%);
}

.president-photo figcaption,
.president-profile-link { background: rgba(8,9,8,.58); border-color: rgba(255,255,255,.2);
}

.president-copy {
  border-color: rgba(21,22,21,.14);
  background: linear-gradient(135deg,rgba(255,255,253,.97),rgba(241,241,237,.95));
  box-shadow: 0 25px 75px rgba(0,0,0,.11);
}

.president-copy .quote-mark { color: var(--cobalt);
}

.services {
  background:
    radial-gradient(circle at 82% 9%,rgba(255,255,255,.68),transparent 24%),
    linear-gradient(145deg,#f8f8f6,#e9e9e5);
}

.service-tab:hover,
.service-tab.is-active { background: rgba(21,22,21,.07);
}

.service-panel { background: radial-gradient(circle at 82% 16%,rgba(255,255,255,.07),transparent 28%),linear-gradient(145deg,#191b1a,#080908 76%); box-shadow: 0 28px 80px rgba(0,0,0,.2);
}

.leaders {
  background:
    linear-gradient(rgba(21,22,21,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,22,21,.035) 1px,transparent 1px),
    linear-gradient(145deg,#ecece8,#deded9);
  background-size: 62px 62px,62px 62px,auto;
}

.leader-visual { box-shadow: 0 24px 60px rgba(0,0,0,.11);
}

.why { background: radial-gradient(circle at 50% 15%,rgba(28,92,136,.34),transparent 43%),linear-gradient(180deg,#10171b,#080a0b);
}

.case-studies { background: radial-gradient(circle at 78% 12%,rgba(255,255,255,.07),transparent 28%),radial-gradient(circle at 14% 42%,rgba(255,255,255,.045),transparent 34%),linear-gradient(145deg,#0e0f0e 0%,#242624 52%,#0a0b0a 100%);
}

.case-studies::before { background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
}

.reach {
  background:
    radial-gradient(circle at 84% 10%,rgba(255,255,255,.7),transparent 24%),
    linear-gradient(145deg,#f7f7f4,#e7e7e2);
}

.president-copy h2,
.section-heading h2,
.why h2,
.reach-heading h2 {
  font-weight: 340;
  letter-spacing: 0;
}

.president-copy h2 strong,
.section-heading h2 strong,
.why h2 strong,
.reach-heading h2 strong { font-weight: 720;
}

.section-heading > p,
.reach-heading p { color: var(--text-soft);
}

.scene-label { font-weight: 600; letter-spacing: .15em;
}

.scene-transition:not(.transition-services-logo) { opacity: calc(var(--scene-cover-opacity,1) * .82);
}

.transition-portrait i,
.transition-stack i,
.transition-doors i,
.transition-horizon i { background: #e9e9e5; border-color: rgba(21,22,21,.1);
}

.transition-iris,
.transition-orbit,
.transition-horizon { background: #ecece8;
}

.transition-portrait span,
.transition-iris i,
.transition-orbit i { border-color: rgba(21,22,21,.2);
}

.transition-stack span,
.transition-doors span { background: var(--cobalt);
}

.transition-wipe { background: #171918;
}

.transition-wipe i { background: #292c2a;
}

@media (max-width:820px) {
  .home-cover { min-height: auto;
  }

  .president,
  .services,
  .leaders,
  .reach { background-size: auto;
  }
}

/* Section 03: a literal center-split vault reveals the business design system. */

.transition-services-logo {
  --service-door-left: 0%;
  --service-door-right: 0%;
  --service-seam-opacity: 1;
  --service-lock-rotate: 0deg;
  --service-caption-opacity: 1;
  height: 100svh;
  background: transparent;
  perspective: 1400px;
}

.transition-services-logo::before { display: none;
}

.vault-door {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 50.1%;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 38%),
    #080a0b;
  background-size: 56px 56px,56px 56px,auto,auto;
  box-shadow: inset 0 0 90px rgba(0,0,0,.3);
  will-change: transform;
}

.vault-door-left { left: 0; border-right: 1px solid rgba(255,255,255,.18); transform: translateX(var(--service-door-left));
}

.vault-door-right { right: 0; border-left: 1px solid rgba(255,255,255,.18); transform: translateX(var(--service-door-right));
}

.vault-door::before {
  content: "";
  position: absolute;
  top: var(--service-vault-center,50%);
  width: clamp(430px,48vw,760px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.018),0 0 0 72px rgba(255,255,255,.012),inset 0 0 75px rgba(0,0,0,.32);
  transform: translateY(-50%);
}

.vault-door-left::before { right: calc(clamp(430px,48vw,760px) / -2);
}

.vault-door-right::before { left: calc(clamp(430px,48vw,760px) / -2);
}

.vault-door > i {
  left: auto;
  right: auto;
  top: var(--service-vault-center,50%);
  width: clamp(210px,24vw,380px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}

.vault-door-left > i { right: calc(clamp(210px,24vw,380px) / -2);
}

.vault-door-right > i { left: calc(clamp(210px,24vw,380px) / -2);
}

.vault-door > b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg,rgba(0,0,0,.65),rgba(255,255,255,.12),rgba(0,0,0,.72));
  box-shadow: 0 0 24px rgba(0,0,0,.6);
}

.vault-door-left > b { right: 0;
}

.vault-door-right > b { left: 0;
}

.vault-seam {
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 50%;
  width: 2px;
  background: linear-gradient(transparent 8%,rgba(184,239,255,.72) 35%,white 50%,rgba(184,239,255,.72) 65%,transparent 92%);
  box-shadow: 0 0 22px rgba(184,239,255,.56);
  opacity: var(--service-seam-opacity);
  transform: translateX(-50%);
}

.vault-seam > i {
  left: 50%;
  right: auto;
  top: var(--service-vault-center,50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 8px rgba(184,239,255,.08),0 0 28px rgba(184,239,255,.72);
  transform: translate(-50%,-50%);
}

.transition-services-logo .services-transition-mark {
  z-index: 6;
  top: var(--service-vault-center,50%);
  width: clamp(210px,19vw,290px);
  border: 1px solid rgba(255,255,255,.15);
  background: radial-gradient(circle,#161917 0 42%,#0b0c0b 43% 61%,rgba(4,5,4,.92) 62% 69%,transparent 70%);
  box-shadow: 0 0 0 12px rgba(255,255,255,.025),0 0 90px rgba(184,239,255,var(--service-intro-halo));
  opacity: var(--service-mark-opacity);
  transform: translate(-50%,-50%) rotate(var(--service-lock-rotate)) scale(var(--service-mark-scale));
}

.transition-services-logo .services-transition-mark::before {
  background: repeating-conic-gradient(from -90deg,var(--brand-blue) 0 2deg,transparent 2deg 14deg);
  opacity: calc(.3 + var(--service-intro-progress) * .7);
}

.transition-services-logo .services-transition-mark::after { border-color: rgba(255,255,255,.2);
}

.transition-services-logo .services-transition-mark > b,
.transition-services-logo .services-transition-mark > strong,
.transition-services-logo .services-transition-mark > small { transform: rotate(calc(var(--service-lock-rotate) * -1));
}

.vault-caption {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: var(--service-vault-caption,84%);
  display: grid;
  gap: 8px;
  width: min(520px,calc(100% - 48px));
  color: white;
  text-align: center;
  opacity: var(--service-caption-opacity);
  transform: translateX(-50%);
}

.vault-caption > span,
.vault-caption > strong,
.vault-caption > small { position: relative;
}

.vault-caption > span { inset: auto; width: auto; height: auto; color: var(--brand-blue); background: none; font-size: 7px; letter-spacing: .22em; transform: none;
}

.vault-caption > strong { font-size: clamp(18px,2vw,28px); font-weight: 500; letter-spacing: 0;
}

.vault-caption > small { color: rgba(255,255,255,.5); font-size: 7px; letter-spacing: .18em;
}

@media (max-width:820px) {
  .transition-services-logo .services-transition-mark { width: 190px;
  }

  .vault-door { background-size: 38px 38px,38px 38px,auto,auto;
  }
}

.services { overflow: clip;
}

/* Section geometry stays real: anchor navigation and the scroll choreography
   cannot use guessed intrinsic heights. Media still loads only near view. */

/* --------------------------------------------------------------------------
   Readability scale: one editorial hierarchy across the complete homepage
   -------------------------------------------------------------------------- */

:root {
  --type-display: clamp(58px,5.15vw,82px);
  --type-section: clamp(52px,4.8vw,76px);
  --type-title: clamp(38px,3.65vw,56px);
  --type-body-lg: clamp(16px,1.12vw,18px);
  --type-body: clamp(14px,.94vw,16px);
  --type-ui: clamp(11px,.72vw,13px);
  --type-label: clamp(9px,.62vw,11px);
}

body { font-size: 16px;
}

.section-heading h2,
.leaders .section-heading h2,
.reach-heading h2 { font-size: var(--type-section); line-height: .96;
}

.president-copy h2 { font-size: clamp(46px,4vw,62px); line-height: 1.03;
}

.service-panel h3 { font-size: clamp(40px,3.65vw,56px); line-height: 1;
}

.section-heading > p,
.reach-heading > p { font-size: var(--type-body-lg); line-height: 1.62;
}

.service-story > p:not(.service-fit),
.leader-card > p { font-size: var(--type-body); line-height: 1.62;
}

.service-fit { font-size: 13px; line-height: 1.58;
}

.site-header .wordmark,
.site-header .main-nav,
.site-header .header-cta,
.ink-link,
.service-scope-link,
.site-footer { font-size: var(--type-ui);
}

.story-step > strong { font-size: 10px; line-height: 1.25;
}

.story-step > span { font-size: 9px;
}

.scene-label { font-size: var(--type-label);
}

.service-index-track,
.service-panel-top,
.service-fit span,
.deliverable-label,
.leader-meta span,
.leader-meta b { font-size: var(--type-label);
}

.signature-lockup small { font-size: 11px;
}

.president-photo figcaption,
.president-profile-link { font-size: 10px;
}

.service-tab span { font-size: 10px;
}

.service-tab strong { font-size: clamp(17px,1.3vw,20px);
}

.service-panel .deliverable-grid span { font-size: 12px; line-height: 1.35;
}

.transition-services-logo .services-transition-mark > small,
.vault-caption > span,
.vault-caption > small { font-size: 10px;
}

.leader-meta h3 { font-size: 30px; line-height: 1.15;
}

.leader-visual > small { font-size: 10px;
}

/* Make the words inside the service diagrams legible without enlarging them. */

.venue-card header span,
.venue-card footer span,
.venue-card header i,
.venue-screen small { font-size: 9px;
}

@media(max-width:820px) {
  :root {
    --type-display: clamp(49px,11.5vw,66px);
    --type-section: clamp(46px,10.5vw,62px);
    --type-title: clamp(35px,8.5vw,48px);
    --type-body-lg: 16px;
    --type-body: 15px;
    --type-ui: 12px;
    --type-label: 10px;
  }

  .president-copy h2 { font-size: clamp(38px,8.8vw,50px);
  }

  .service-panel h3 { font-size: clamp(36px,8.2vw,46px);
  }
}

@media(max-width:560px) {
  .section-heading h2,
  .leaders .section-heading h2,
  .reach-heading h2 { font-size: clamp(43px,12vw,56px);
  }

  .section-heading > p,
  .reach-heading > p { font-size: 15px;
  }

  .service-tab strong { font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   Growth & Amplification: readable command-center scale
   -------------------------------------------------------------------------- */

.service-panel[data-layout="growth"] .service-story > p:not(.service-fit) {
  max-width: 690px;
  font-size: clamp(15px,1vw,17px);
}

.service-panel[data-layout="growth"] .service-fit { font-size: 14px;
}

.service-panel[data-layout="growth"] .deliverable-grid span {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  font-size: 13px;
}

@media(min-width:821px) {
  .service-panel[data-layout="growth"] { min-height: 1320px;
  }

  .service-panel[data-layout="growth"] .service-scene { min-height: 820px;
  }
}

@media(max-width:820px) {
  .service-panel[data-layout="growth"] .service-scene { min-height: 1160px;
  }
}

@media(max-width:560px) {
  .service-panel[data-layout="growth"] .deliverable-grid span { min-height: 54px;
  }

  .service-panel[data-layout="growth"] .service-scene { min-height: 1560px;
  }
}

/* --------------------------------------------------------------------------
   President chapter: preserve the editorial scale, remove excess runway
   -------------------------------------------------------------------------- */

#message.president {
  padding-top: clamp(88px, 7vw, 110px);
  padding-bottom: clamp(88px, 7vw, 110px);
}

#message .president-stage { margin-top: clamp(36px, 3vw, 46px);
}

#message .president-photo { height: clamp(470px, 39vw, 560px);
}

#message .president-copy {
  margin-top: -104px;
  padding: clamp(34px, 3vw, 44px);
}

#message .president-copy h2 { margin-top: 6px; margin-bottom: 24px;
}

#message .president-copy-footer { padding-top: 18px;
}

@media(max-width:900px) {
  #message.president { padding-top: 78px; padding-bottom: 78px;
  }

  #message .president-stage { margin-top: 36px;
  }

  #message .president-photo { height: 450px;
  }

  #message .president-copy { margin-top: -62px; padding: 28px;
  }
}

@media(max-width:560px) {
  #message.president { padding-top: 66px; padding-bottom: 66px;
  }

  #message .president-stage { margin-top: 28px;
  }

  #message .president-photo { height: 310px;
  }

  #message .president-copy { margin-top: -20px; padding: 22px 18px;
  }

  #message .president-copy h2 { margin-bottom: 20px;
  }

  #message .president-copy-footer { padding-top: 16px;
  }
}

/* Keep the leadership portraits editorial at wide-screen sizes. */

@media(min-width:821px) {
  #leaders .leader-grid {
    width: min(100%, 1380px);
    margin: 56px auto 0;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap: clamp(18px, 2vw, 30px);
  }

  #leaders .leader-visual {
    max-height: 590px;
    aspect-ratio: 4 / 4.2;
  }

  #leaders .leader-visual > img {
    object-fit: cover;
    object-position: center 20%;
  }
}

/* --------------------------------------------------------------------------
   Leadership system: operating, creative, and advisory perspectives
   -------------------------------------------------------------------------- */

#leaders.leaders {
  position: relative;
  overflow: hidden;
  color: #f7f8f6;
  background:
    radial-gradient(circle at 16% 48%, rgba(44,98,214,.24), transparent 30%),
    radial-gradient(circle at 86% 52%, rgba(214,105,57,.2), transparent 29%),
    radial-gradient(circle at 53% 82%, rgba(216,196,154,.13), transparent 26%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(145deg,#111312,#050606 78%);
  background-size: auto, auto, auto, 62px 62px, 62px 62px, auto;
}

#leaders::after {
  content: "THREE / ONE";
  position: absolute;
  right: -2vw;
  top: 45%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
  font-size: clamp(110px,15vw,250px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: 0;
  white-space: nowrap;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: right center;
  pointer-events: none;
}

#leaders > * { position: relative; z-index: 2;
}

#leaders .scene-label { color: rgba(255,255,255,.55);
}

#leaders .scene-label span:first-child { color: var(--brand-blue);
}

#leaders .section-heading h2 { color: #f7f8f6;
}

#leaders .section-heading h2 em { color: var(--brand-blue);
}

#leaders .section-heading > p { color: rgba(255,255,255,.57);
}

#leaders .leader-grid { align-items: stretch;
}

#leaders .leader-card {
  --leader-accent: #78a6ff;
  display: flex;
  flex-direction: column;
  padding: 9px 9px 22px;
  overflow: hidden;
  border: 1px solid rgba(120,166,255,.25);
  border-radius: 16px;
  background: linear-gradient(180deg,rgba(120,166,255,.12),rgba(255,255,255,.035));
  color: #f7f8f6;
  transition: transform 320ms var(--ease), border-color 320ms ease, box-shadow 320ms ease;
}

#leaders .leader-card-creative {
  --leader-accent: #ee8c57;
  border-color: rgba(238,140,87,.27);
  background: linear-gradient(180deg,rgba(238,140,87,.12),rgba(255,255,255,.035));
}

#leaders .leader-card-advisory {
  --leader-accent: #d8c49a;
  border-color: rgba(216,196,154,.28);
  background: linear-gradient(180deg,rgba(216,196,154,.12),rgba(255,255,255,.035));
}

#leaders .leader-card-design {
  --leader-accent: #a8d8ff;
  border-color: rgba(168,216,255,.28);
  background: linear-gradient(180deg,rgba(168,216,255,.12),rgba(255,255,255,.035));
}

#leaders .leader-card:hover {
  border-color: color-mix(in srgb,var(--leader-accent) 58%,transparent);
  box-shadow: 0 28px 80px rgba(0,0,0,.3);
}

#leaders .leader-card:hover .leader-visual { transform: none; box-shadow: none;
}

#leaders .leader-visual { border-radius: 10px; box-shadow: none; background: #080a0a;
}

#leaders .leader-visual::after { z-index: 2; background: linear-gradient(0deg,rgba(5,7,8,.9),transparent 48%);
}

#leaders .leader-card-tech .leader-visual::before,
#leaders .leader-card-creative .leader-visual::before,
#leaders .leader-card-advisory .leader-visual::before,
#leaders .leader-card-design .leader-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(135deg,color-mix(in srgb,var(--leader-accent) 34%,transparent),transparent 48%);
  mix-blend-mode: screen;
  pointer-events: none;
}

#leaders .leader-robert > img { object-position: center 15%;
}

#leaders .leader-joseph > img { object-position: center 28%;
}

#leaders .leader-visual > small { z-index: 4; left: 18px; top: 16px; color: rgba(255,255,255,.72);
}

#leaders .leader-visual > i { z-index: 3; width: 310px; height: 310px; border-color: color-mix(in srgb,var(--leader-accent) 40%,transparent);
}

#leaders .leader-visual > i::after { border-color: color-mix(in srgb,var(--leader-accent) 24%,transparent);
}

#leaders .leader-meta { margin: 0; padding: 20px 9px 16px; border-color: rgba(255,255,255,.14);
}

#leaders .leader-meta span { color: var(--leader-accent);
}

#leaders .leader-meta h3 { color: #f7f8f6;
}

#leaders .leader-meta b { color: rgba(255,255,255,.42);
}

#leaders .leader-card > p { margin: 16px 9px 0; color: rgba(255,255,255,.57);
}

@media(max-width:820px) {
  #leaders::after { display: none;
  }

  #leaders .leader-grid { margin-top: 28px; gap: 22px;
  }

  #leaders .leader-card { padding: 7px 7px 20px;
  }

  #leaders .leader-visual { aspect-ratio: 4 / 4.6;
  }

  #leaders .leader-visual > img { object-fit: cover; object-position: center 18%;
  }

  #leaders .leader-meta b { display: none;
  }
}

/* --------------------------------------------------------------------------
   Founder direction: one portrait, one thesis, one forward signal
   -------------------------------------------------------------------------- */

#message.president {
  position: relative;
  overflow: hidden;
  color: #f7f8f6;
  background:
    radial-gradient(circle at 13% 45%,rgba(214,105,57,.2),transparent 29%),
    radial-gradient(circle at 83% 43%,rgba(44,98,214,.22),transparent 32%),
    linear-gradient(rgba(255,255,255,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.042) 1px,transparent 1px),
    linear-gradient(145deg,#111312,#050606 78%);
  background-size: auto,auto,58px 58px,58px 58px,auto;
}

#message::after {
  content: "NEXT /";
  position: absolute;
  right: -1vw;
  bottom: 8%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.065);
  font-size: clamp(120px,17vw,280px);
  font-weight: 800;
  line-height: .75;
  letter-spacing: 0;
  pointer-events: none;
}

#message > * { position: relative; z-index: 2;
}

#message .scene-label { color: rgba(255,255,255,.52);
}

#message .scene-label span:first-child { color: var(--brand-blue);
}

#message .president-stage {
  width: min(100%,1280px);
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: minmax(360px,.43fr) minmax(0,.57fr);
  align-items: stretch;
  gap: 12px;
}

#message .president-photo {
  height: auto;
  min-height: 760px;
  border: 1px solid rgba(238,140,87,.28);
  border-radius: 16px;
  background: #080909;
  box-shadow: 0 28px 80px rgba(0,0,0,.3);
}

#message .president-photo::before { inset: 9px; border-color: rgba(238,140,87,.32); border-radius: 10px;
}

#message .president-photo::after {
  z-index: 2;
  background: linear-gradient(0deg,rgba(5,7,8,.92),transparent 48%);
}

#message .president-photo img {
  object-fit: cover;
  object-position: 72% center;
  filter: saturate(1) contrast(1.03);
  transform: none;
}

#message .president-photo figcaption { z-index: 6; inset: auto 18px 18px; background: rgba(5,7,8,.68);
}

#message .president-profile-link { z-index: 6; background: rgba(5,7,8,.62);
}

#message .president-copy {
  width: 100%;
  min-height: 760px;
  margin: 0;
  padding: clamp(38px,3.2vw,52px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(120,166,255,.25);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(120,166,255,.12),rgba(255,255,255,.035));
  color: #f7f8f6;
  box-shadow: 0 28px 80px rgba(0,0,0,.3);
  backdrop-filter: blur(14px);
}

#message .president-copy::after { color: rgba(184,239,255,.38);
}

#message .president-copy .quote-mark { color: var(--brand-blue);
}

#message .president-copy h2 { margin: 8px 0 26px; color: #f7f8f6; font-size: clamp(48px,4.1vw,64px);
}

#message .president-copy h2 strong { color: var(--brand-blue);
}

#message .president-copy-footer { margin-top: auto; padding-top: 18px;
}

#message .signature-lockup span { color: #f7f8f6;
}

#message .signature-lockup small { color: rgba(255,255,255,.42);
}

#message .president-copy .ink-link { color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.2);
}

@media(min-width:901px) and (max-width:1450px) {
  #message .president-stage {
    width: calc(100% - 132px);
    margin-right: 132px;
    margin-left: 0;
  }

  #message .president-stage { grid-template-columns: minmax(330px,.42fr) minmax(0,.58fr);
  }

  #message .president-copy { padding: 36px;
  }

  #message .president-copy h2 { font-size: clamp(46px,4.2vw,58px);
  }
}

@media(max-width:900px) {
  #message .president-stage { margin-top: 12px; grid-template-columns: 1fr; gap: 0;
  }

  #message .president-photo { height: 440px; min-height: 0;
  }

  #message .president-photo img { object-position: 68% 35%;
  }

  #message .president-copy { width: calc(100% - 24px); min-height: 0; margin: -28px 12px 0; padding: 30px 28px;
  }
}

@media(max-width:560px) {
  #message .president-stage { margin-top: 10px;
  }

  #message .president-photo { height: 330px;
  }

  #message .president-copy { width: calc(100% - 12px); margin: -18px 6px 0; padding: 24px 19px;
  }

  #message .president-copy h2 { margin-bottom: 20px; font-size: clamp(38px,10.4vw,47px);
  }
}

/* Nohemi tracking correction: retain the editorial density without collisions. */

h1,
h2,
h3 {
  letter-spacing: 0;
}

h1 strong,
h2 strong,
h3 strong {
  letter-spacing: 0;
}

.section-heading h2,
.president-copy h2,
.service-panel h3,
.reach-heading h2 {
  letter-spacing: 0;
}

.service-tab strong {
  letter-spacing: 0;
}

.transition-type span,
.venue-screen strong {
  letter-spacing: 0;
}

/* Page-level guarantee: every headline renders in uppercase. */

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase !important;
}

/* 06 / Live meeting desk */

#reach-out.meeting-section {
  position: relative;
  color: #f7f8f6;
  background:
    radial-gradient(circle at 82% 20%,rgba(44,98,214,.18),transparent 30%),
    radial-gradient(circle at 12% 80%,rgba(238,140,87,.09),transparent 28%),
    linear-gradient(180deg,#050606 0,#080a0b 24%,#080a0b 100%);
}

#reach-out.meeting-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  pointer-events: none;
  opacity: .8;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom,#000,transparent);
}

#reach-out.meeting-section > * { position: relative; z-index: 1;
}

.meeting-section .scene-label { color: rgba(255,255,255,.5);
}

.meeting-section .scene-label span:first-child { color: var(--brand-blue);
}

.meeting-heading { grid-template-columns: 1fr .48fr;
}

.meeting-heading h2 { color: #f7f8f6; font-size: clamp(52px,5.4vw,78px); white-space: nowrap;
}

.meeting-heading h2 em { color: var(--brand-blue);
}

.meeting-heading p { color: rgba(255,255,255,.58);
}

.meeting-console {
  margin-top: clamp(46px,6vw,84px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(5,7,8,.84);
  box-shadow: 0 38px 100px rgba(0,0,0,.38);
}

.meeting-console-bar,
.meeting-console-foot {
  min-height: 54px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  font-size: 8px;
  letter-spacing: .12em;
}

.meeting-console-bar > div { display: flex; align-items: center; gap: 9px;
}

.meeting-console-bar i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #6ee7a4; box-shadow: 0 0 0 4px rgba(110,231,164,.1),0 0 14px rgba(110,231,164,.5);
}

.meeting-console-bar strong { color: #6ee7a4; font-weight: 600;
}

.meeting-console-bar > small { justify-self: end; color: rgba(255,255,255,.42); font-size: inherit;
}

.meeting-workspace { min-height: 600px; display: grid; grid-template-columns: minmax(220px,.72fr) minmax(390px,1.5fr) minmax(280px,.9fr);
}

.meeting-roster,
.meeting-profile { min-width: 0;
}

.meeting-roster { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.12);
}

.meeting-roster-head { min-height: 70px; padding: 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1);
}

.meeting-roster-head span,
.meeting-profile-copy > small { color: var(--brand-blue); font-size: 8px; font-weight: 650; letter-spacing: .13em;
}

.meeting-roster-head small { color: rgba(255,255,255,.3); font-size: 7px; letter-spacing: .1em;
}

.meeting-person {
  position: relative;
  min-height: 92px;
  padding: 14px 34px 14px 16px;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: rgba(255,255,255,.58);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
  transition: background 180ms,color 180ms;
}

.meeting-person:hover { color: #fff; background: rgba(255,255,255,.04);
}

.meeting-person.is-active { color: #fff; background: linear-gradient(90deg,rgba(120,166,255,.16),rgba(120,166,255,.03));
}

.meeting-person.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--brand-blue);
}

.meeting-avatar { width: 50px; height: 50px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: #15191d;
}

.meeting-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.78);
}

.meeting-person > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 5px;
}

.meeting-person strong { overflow: hidden; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap;
}

.meeting-person small { overflow: hidden; color: rgba(255,255,255,.33); font-size: 7px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap;
}

.meeting-person > i { position: absolute; right: 18px; width: 7px; height: 7px; border-radius: 50%;
}

.meeting-person > i.is-live { background: #6ee7a4; box-shadow: 0 0 10px rgba(110,231,164,.7);
}

.meeting-person > i.is-away { background: #ee8c57; box-shadow: none;
}

.meeting-profile { padding: clamp(20px,3vw,38px); border-right: 1px solid rgba(255,255,255,.12);
}

.meeting-profile-top { display: grid; grid-template-columns: 128px 1fr; gap: clamp(20px,2.5vw,34px); align-items: center;
}

.meeting-profile-photo { position: relative; height: 170px; overflow: hidden; border: 1px solid rgba(120,166,255,.38); border-radius: 8px; background: #12161c;
}

.meeting-profile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,8,10,.6),transparent 60%);
}

.meeting-profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
}

.meeting-profile-photo span { position: absolute; z-index: 2; left: 10px; bottom: 9px; color: rgba(255,255,255,.6); font-size: 7px; letter-spacing: .12em;
}

.meeting-profile-copy { min-width: 0;
}

.meeting-profile-copy > span { display: block; margin-bottom: 18px; color: #6ee7a4; font-size: 8px; font-weight: 650; letter-spacing: .13em;
}

.meeting-profile-copy > span.is-away { color: #ee8c57;
}

.meeting-profile-copy h3 { margin: 0; font-size: clamp(29px,3.1vw,48px); line-height: .92;
}

.meeting-profile-copy p { margin: 8px 0 28px; color: rgba(255,255,255,.38); font-size: 8px; letter-spacing: .11em;
}

.meeting-profile-copy > strong { margin-top: 8px; display: block; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 450; line-height: 1.55;
}

.meeting-book { width: 100%; min-height: 58px; margin-top: 10px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; color: #071015; border: 0; border-radius: 6px; background: linear-gradient(110deg,var(--brand-blue),#d8f5ff); font-size: 9px; font-weight: 650; letter-spacing: .1em;
}

.meeting-book i { font-size: 18px; font-style: normal;
}

.meeting-console-foot { min-height: 48px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 0; color: rgba(255,255,255,.28); font-size: 6px;
}

.meeting-console-foot span:nth-child(2) { justify-self: center;
}

.meeting-console-foot strong { justify-self: end; color: rgba(255,255,255,.5); font-size: 7px;
}

@media(max-width:1060px) {
  .meeting-workspace { grid-template-columns: 230px 1fr;
  }
}

@media(max-width:760px) {
  .meeting-heading { grid-template-columns: 1fr;
  }

  .meeting-heading h2 { white-space: normal;
  }

  .meeting-heading p { margin-top: 22px;
  }

  .meeting-console-bar { grid-template-columns: 1fr auto;
  }

  .meeting-console-bar > small { display: none;
  }

  .meeting-workspace { grid-template-columns: 1fr;
  }

  .meeting-roster { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .meeting-roster-head { min-height: 58px;
  }

  .meeting-person { min-height: 76px; grid-template-columns: 42px 1fr;
  }

  .meeting-avatar { width: 42px; height: 42px;
  }

  .meeting-profile { border-right: 0;
  }

  .meeting-console-foot { display: none;
  }
}

@media(max-width:480px) {
  .meeting-heading h2 { font-size: clamp(44px,13vw,62px);
  }

  .meeting-console { margin-left: -14px; margin-right: -14px; border-radius: 8px;
  }

  .meeting-console-bar { padding: 0 14px;
  }

  .meeting-profile-top { grid-template-columns: 90px 1fr; gap: 16px;
  }

  .meeting-profile-photo { height: 130px;
  }

  .meeting-profile-copy h3 { font-size: 27px;
  }

  .meeting-profile-copy > strong { font-size: 9px;
  }
}

/* Case Studies → Leaders: one continuous black transition. */

.case-studies {
  background:
    linear-gradient(to bottom,rgba(8,10,10,0) 72%,#080a0a 100%),
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.07),transparent 28%),
    radial-gradient(circle at 14% 42%,rgba(255,255,255,.045),transparent 34%),
    linear-gradient(145deg,#0e0f0e 0%,#242624 52%,#080a0a 100%);
}

#leaders.leaders::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 190px;
  pointer-events: none;
  background: linear-gradient(to bottom,#080a0a,rgba(8,10,10,0));
}

@media(min-width:821px) {
  .service-panel[data-layout="backend"] {
    min-height: 1120px;
    grid-template-rows: auto auto minmax(720px,740px) auto auto auto;
  }

  .service-panel[data-layout="backend"] .service-scene { min-height: 740px;
  }
}

@media(max-width:820px) {
  .service-panel[data-layout="backend"] .service-scene { min-height: 865px;
  }
}

@media(max-width:560px) {
  .service-panel[data-layout="backend"] .service-scene { min-height: 990px;
  }
}

/* --------------------------------------------------------------------------
   04 / CASE STUDIES — evidence files become the horizontal work archive.
   This transition is intentionally architectural and editorial, not a wipe.
   -------------------------------------------------------------------------- */

.scene-transition.transition-case-archive {
  position: absolute;
  inset: 0 0 auto;
  height: max(940px,135svh);
  opacity: 1;
  color: #f7f8f6;
  background: transparent;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.archive-transition-grid {
  position: absolute;
  inset: 0;
  opacity: var(--archive-shell-opacity,1);
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom,black 0 62%,transparent 96%);
}

.archive-transition-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,transparent 22%,rgba(255,255,255,.065) 50%,transparent 74%);
  transform: translateX(var(--archive-grid-x,-48%));
}

.archive-transition-copy {
  position: absolute;
  z-index: 8;
  left: clamp(24px,6vw,96px);
  top: clamp(46px,8svh,82px);
  width: min(42vw,620px);
  opacity: var(--archive-copy-opacity,1);
  transform: translate3d(0,var(--archive-copy-y),80px);
  will-change: transform,opacity;
}

.archive-transition-copy small,
.archive-transition-copy em,
.archive-transition-index {
  font-size: clamp(8px,.72vw,11px);
  font-style: normal;
  letter-spacing: .17em;
}

.archive-transition-copy small { display: block; color: #b8efff;
}

.archive-transition-copy strong {
  display: block;
  margin-top: 16px;
  font-size: clamp(54px,7.4vw,118px);
  font-weight: 650;
  line-height: .78;
  letter-spacing: -.025em;
}

.archive-transition-copy em { display: block; margin-top: 20px; color: rgba(255,255,255,.44);
}

.case-flight-orbit {
  position: absolute;
  z-index: 4;
  left: var(--case-flight-left,73%);
  top: clamp(250px,38svh,360px);
  width: min(52vw,760px);
  aspect-ratio: 2.25 / 1;
  transform: translate(-50%,-50%) rotate(var(--archive-orbit-rotate,-18deg)) scale(var(--archive-orbit-scale,1.08));
  transform-style: preserve-3d;
  opacity: var(--archive-shell-opacity,1);
  will-change: transform;
}

.case-flight-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184,239,255,.15);
  border-radius: 50%;
}

.case-flight-orbit i:nth-child(2) { inset: 12%; border-color: rgba(255,255,255,.09);
}

.case-flight-orbit i:nth-child(3) { inset: 25%; border-color: rgba(238,140,87,.12);
}

.archive-transition-index {
  position: absolute;
  z-index: 8;
  left: clamp(24px,6vw,96px);
  right: clamp(24px,6vw,96px);
  bottom: clamp(24px,6svh,64px);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.42);
  opacity: var(--archive-shell-opacity,1);
}

.archive-transition-index b { color: #f7f8f6; font-weight: 500;
}

.archive-transition-scan {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent,#b8efff 20% 80%,transparent);
  box-shadow: 0 0 28px 5px rgba(184,239,255,.18);
  opacity: var(--archive-shell-opacity,1);
  transform: translateX(var(--archive-scan-x,-34vw));
  will-change: transform;
}

.case-studies > .case-detail {
  opacity: var(--case-content-opacity,1);
  clip-path: inset(0 var(--case-content-clip,0%) 0 0);
  translate: 0 var(--case-content-y,0);
  will-change: opacity,clip-path;
}

/* --------------------------------------------------------------------------
   05 / LEADERS — three signals align before three people resolve into view.
   The motion is geometric and connective, deliberately unlike the archive.
   -------------------------------------------------------------------------- */

#leaders > .scene-transition.transition-leader-signals {
  position: absolute;
  z-index: 70;
  inset: 0 0 auto;
  height: max(720px,100svh);
  overflow: hidden;
  opacity: var(--leader-transition-opacity);
  color: #f7f8f6;
  background:
    radial-gradient(circle at 50% 44%,rgba(184,239,255,.1),transparent 25%),
    linear-gradient(145deg,#0d0f0f,#050606 78%);
  pointer-events: none;
  will-change: opacity;
}

.leader-transition-grid {
  position: absolute;
  inset: 0;
  opacity: .56;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 42%,black,transparent 78%);
}

.leader-transition-stage {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(245px,38svh,360px);
  width: 1px;
  height: 1px;
  perspective: 1200px;
}

.lead-signal {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(220px,24vw,350px);
  height: clamp(180px,25vw,330px);
  padding: clamp(18px,2vw,28px);
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb,var(--signal-color) 58%,transparent);
  border-radius: 12px;
  background: linear-gradient(145deg,color-mix(in srgb,var(--signal-color) 16%,#090b0c),rgba(7,9,10,.94));
  box-shadow: 0 34px 90px rgba(0,0,0,.42),inset 0 0 42px color-mix(in srgb,var(--signal-color) 8%,transparent);
  transform: translate3d(calc(-50% + var(--signal-x)),var(--leader-signal-y),var(--signal-z)) rotateY(var(--signal-rotate));
  will-change: transform;
}

.lead-signal::before { content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 1px; background: color-mix(in srgb,var(--signal-color) 58%,transparent);
}

.lead-signal b { color: var(--signal-color); font-size: 10px; letter-spacing: .15em;
}

.lead-signal small { margin-top: auto; color: rgba(255,255,255,.46); font-size: 9px; letter-spacing: .15em;
}

.lead-signal strong { margin-top: 8px; color: #f7f8f6; font-size: clamp(31px,3.4vw,52px); line-height: .82;
}

.lead-signal-tech { --signal-color:#78a6ff; --signal-x:var(--leader-tech-x); --signal-z:-80px; --signal-rotate:8deg;
}

.lead-signal-creative { --signal-color:#ee8c57; --signal-x:var(--leader-creative-x); --signal-z:22px; --signal-rotate:0deg; z-index: 2;
}

.lead-signal-counsel { --signal-color:#d8c49a; --signal-x:var(--leader-counsel-x); --signal-z:-60px; --signal-rotate:-8deg;
}

.leader-transition-core {
  position: absolute;
  z-index: 5;
  left: 0;
  top: clamp(205px,24vw,292px);
  width: clamp(116px,11vw,160px);
  aspect-ratio: 1;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(184,239,255,.44);
  border-radius: 50%;
  background: radial-gradient(circle,#15242d,#080b0d 68%);
  box-shadow: 0 0 0 13px rgba(184,239,255,.035),0 0 62px rgba(184,239,255,.18);
  transform: translate(-50%,-50%) rotate(var(--leader-core-rotate)) scale(var(--leader-core-scale));
  will-change: transform;
}

.leader-transition-core b { color: #b8efff; font-size: clamp(25px,2.5vw,38px);
}

.leader-transition-core strong { margin-top: 8px; font-size: 9px; letter-spacing: .13em;
}

.leader-transition-core small { margin-top: 5px; color: rgba(255,255,255,.36); font-size: 6px; letter-spacing: .1em;
}

.leader-transition-status {
  position: absolute;
  z-index: 8;
  left: clamp(24px,6vw,96px);
  right: clamp(24px,6vw,96px);
  bottom: clamp(24px,6svh,64px);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.42);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: clamp(8px,.72vw,11px);
  letter-spacing: .17em;
}

.leader-transition-status b { color: #f7f8f6; font-weight: 500;
}

#leaders > .scene-label,
#leaders > .section-heading,
#leaders > .leader-grid {
  opacity: var(--leader-content-opacity,1);
  translate: 0 var(--leader-content-y,0);
  will-change: opacity,translate;
}

/* The transition uses the actual landing headline—never a visual duplicate. */

#leaders.leader-headline-active > .scene-label,
#leaders.leader-headline-active > .section-heading {
  z-index: 71;
  opacity: 1;
  translate: none;
}

#leaders.leader-headline-active > .section-heading h2 {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

#leaders.leader-headline-active > .section-heading > p {
  opacity: var(--leader-content-opacity,0);
}

#leaders .leader-card {
  opacity: var(--leader-card-opacity,1);
  transform: translate3d(var(--leader-card-x,0),var(--leader-card-y,0),0) rotate(var(--leader-card-rotate,0deg)) scale(var(--leader-card-scale,1));
  transform-origin: center bottom;
  will-change: transform,opacity;
}

#leaders .leader-card:hover {
  translate:0 -7px;
}

@media(max-width:820px) {
  .scene-transition.transition-case-archive,
  #leaders > .scene-transition.transition-leader-signals { height: max(640px,100svh);
  }

  .scene-transition.transition-case-archive { height: max(900px,140svh);
  }

  .archive-transition-copy { width: calc(100% - 48px);
  }

  .archive-transition-copy strong { font-size: clamp(48px,13vw,76px);
  }

  .case-flight-orbit { width: 108vw;
  }

  .leader-transition-stage { top: 330px;
  }

  .lead-signal { width: clamp(190px,42vw,280px); height: 220px;
  }

  .lead-signal strong { font-size: 32px;
  }
}

@media(max-width:560px) {
  .archive-transition-copy em { display: none;
  }

  .archive-transition-index,
  .leader-transition-status { left: 20px; right: 20px; bottom: 24px;
  }

  .archive-transition-index small,
  .leader-transition-status small { display: none;
  }

  .leader-transition-stage { top: 320px;
  }

  .lead-signal { width: 47vw; height: 205px; padding: 16px;
  }

  .lead-signal small { font-size: 7px;
  }

  .lead-signal strong { font-size: 27px;
  }

  .leader-transition-core { top: 190px; width: 108px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .scene-transition.transition-case-archive,
  #leaders > .scene-transition.transition-leader-signals { display: none;
  }

  #leaders .leader-card { opacity: 1 !important; transform: none !important;
  }

  .case-studies > .case-detail,
  #leaders > .scene-label,
  #leaders > .section-heading,
  #leaders > .leader-grid { opacity: 1 !important; translate: none !important;
  }

  .case-studies > .case-detail { clip-path: none !important;
  }
}

/* --------------------------------------------------------------------------
   02 / Understand NuCulture — interactive matching game
   -------------------------------------------------------------------------- */

#culture-game {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: #f7f8f6;
  background:
    radial-gradient(circle at 74% 28%,rgba(44,98,214,.2),transparent 31%),
    linear-gradient(rgba(184,239,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,239,255,.045) 1px,transparent 1px),
    #07090b;
  background-size: auto,58px 58px,58px 58px,auto;
}

#culture-game::after {
  content: "02";
  position: absolute;
  right: -1vw;
  top: 8%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184,239,255,.07);
  font-size: clamp(180px,27vw,430px);
  font-weight: 800;
  line-height: .72;
  pointer-events: none;
}

#culture-game > * { position: relative; z-index: 2;
}

/* --------------------------------------------------------------------------
   03 / President — reduced to one portrait, one thought, one action
   -------------------------------------------------------------------------- */

#message.president {
  min-height: 92svh;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    #090b0c;
  background-size: 58px 58px,58px 58px,auto;
}

#message::after { display: none;
}

#message .president-stage { width: min(100%,1180px); margin: clamp(38px,5vw,72px) auto 0; grid-template-columns: minmax(340px,.46fr) minmax(0,.54fr); gap: 14px;
}

#message .president-photo,
#message .president-copy { min-height: 560px; height: 560px;
}

#message .president-photo { border-color: rgba(255,255,255,.14); box-shadow: none;
}

#message .president-photo::before { display: none;
}

#message .president-photo::after { background: linear-gradient(0deg,rgba(5,7,8,.76),transparent 42%);
}

#message .president-photo img { object-position: 68% center; filter: saturate(.92) contrast(1.03);
}

#message .president-copy { padding: clamp(34px,4vw,56px); border-color: rgba(184,239,255,.18); background: #10151a; box-shadow: none; backdrop-filter: none;
}

#message .president-copy::after { content: "NU / 02";
}

#message .president-copy .quote-mark { font-size: 64px;
}

#message .president-copy h2 { max-width: 710px; margin: 16px 0 28px; font-size: clamp(42px,4.4vw,64px); line-height: .98;
}

.president-note { max-width: 650px; margin: 0; padding-top: 26px; color: rgba(255,255,255,.62); border-top: 1px solid rgba(255,255,255,.13); font-size: clamp(17px,1.4vw,21px); line-height: 1.55;
}

#message .president-copy-footer { margin-top: auto;
}

@media(max-width:900px) {
  #message .president-stage { grid-template-columns: 1fr; gap: 0;
  }

  #message .president-photo { height: 430px; min-height: 430px;
  }

  #message .president-copy { width: calc(100% - 24px); height: auto; min-height: 430px; margin: -24px 12px 0;
  }
}

@media(max-width:560px) {
  #message .president-stage { margin-top: 28px;
  }

  #message .president-photo { height: 320px; min-height: 320px;
  }

  #message .president-copy { min-height: 430px; padding: 26px 20px;
  }

  #message .president-copy h2 { font-size: clamp(36px,10.5vw,46px);
  }
}

/* Shooting-range revision: quiet launch, then questions and rising targets. */

#culture-game [hidden] { display: none !important;
}

/* Slim range: only the section's top and bottom edges remain framed. */

#culture-game {
  min-height: 0;
  padding-top: clamp(92px,8vw,124px);
  padding-bottom: clamp(58px,6vw,88px);
  border-top: 1px solid rgba(184,239,255,.18);
  border-bottom: 1px solid rgba(184,239,255,.18);
}

@media(max-width:560px) {
  #culture-game { padding-top: 82px; padding-bottom: 46px;
  }
}

/* Final range cleanup: no framing lines; the prompt floats dead center. */

#culture-game { border: 0;
}

/* Final President spacing pass: remove the late 760px runway. */

#message.president {
  padding-top: clamp(66px,5.5vw,84px);
  padding-bottom: clamp(44px,4vw,60px);
}

#message .president-stage { margin-top: clamp(22px,2vw,30px);
}

@media(min-width:901px) {
  #message .president-photo,
  #message .president-copy {
    height: clamp(520px,37vw,610px);
    min-height: 0;
  }

  #message .president-copy { padding: clamp(30px,2.6vw,42px);
  }

  #message .president-copy h2 { margin-bottom: 20px; font-size: clamp(42px,3.65vw,58px);
  }
}

@media(max-width:900px) {
  #message.president { padding-top: 60px; padding-bottom: 44px;
  }

  #message .president-stage { margin-top: 22px;
  }
}

@media(max-width:560px) {
  #message.president { padding-top: 50px; padding-bottom: 36px;
  }

  #message .president-stage { margin-top: 18px;
  }
}

/* Browser frame: keep every slide off the physical viewport edges. */

:root { --document-frame: clamp(10px,1.25vw,24px);
}

body {
  padding-right: var(--document-frame);
  padding-left: var(--document-frame);
  background: #030405;
}

main,
.site-footer {
  width: 100%;
  max-width: 1840px;
  margin-right: auto;
  margin-left: auto;
}

main {
  border-right: 1px solid rgba(255,255,255,.08);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 60px rgba(0,0,0,.22);
}

.site-header {
  right: auto;
  left: 50%;
  width: calc(100% - var(--document-frame) - var(--document-frame));
  max-width: 1840px;
  transform: translateX(-50%);
}

@media(min-width:1021px) {
  .story-rail { right: max(calc(var(--document-frame) + 18px),calc((100vw - 1840px)/2 + 18px));
  }
}

@media(max-width:560px) {
  :root { --document-frame: 6px;
  }
}

/* --------------------------------------------------------------------------
   Problem City v2 — accessible branded game loop
   -------------------------------------------------------------------------- */

#culture-game { scroll-margin-top: 70px;
}

/* Final Patrick spacing override: size the section to its content, not the viewport. */

#message.president { min-height: 0;
}

/* Final experience sculpt ------------------------------------------------- */

#main-content:focus { outline: 0;
}

.scene[id] { scroll-margin-top: 76px;
}

.service-board,
.service-panel,
.service-story,
.leader-grid,
.leader-card { min-width: 0;
}

.service-nav { border-top-color: rgba(7,16,21,.1); border-bottom-color: rgba(7,16,21,.1);
}

.service-tab { min-height: 72px; border-right-color: rgba(7,16,21,.1);
}

.service-tab:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--cobalt); outline-offset: -3px;
}

.service-panel.is-coming-soon { min-height: clamp(480px, 66svh, 680px) !important; grid-template-rows: 1fr !important;
}

.service-panel.is-coming-soon > :not(.service-coming-soon) {
  filter: grayscale(1) blur(10px);
  opacity: .28;
}

.service-panel.is-coming-soon .service-scene { min-height: 430px !important; grid-column: 1 / -1 !important; grid-row: 1 !important;
}

.service-coming-soon {
  gap: 16px;
  place-content: center;
  padding: clamp(24px, 5vw, 64px);
  background: rgba(8,9,9,.3);
  -webkit-backdrop-filter: grayscale(1) blur(11px);
  backdrop-filter: grayscale(1) blur(11px);
}

.service-coming-soon strong { font-size: clamp(44px, 7vw, 92px); letter-spacing: .015em;
}

.service-coming-soon small { font-size: 10px;
}

@media (min-width: 1180px) {
  .leader-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
  }

  .leader-meta { align-items: flex-start; gap: 10px;
  }

  .leader-meta b { max-width: 92px; text-align: right;
  }

  .leader-card > p { font-size: 11px;
  }
}

.leader-card { border-color: rgba(7,16,21,.1);
}

.leader-card:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 5px;
}

#reach-out.meeting-section { min-height: 0; background: radial-gradient(circle at 76% 26%,rgba(213,237,101,.07),transparent 32%),#080909;
}

.meeting-heading { grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
}

.meeting-heading h2 { font-size: clamp(46px, 6vw, 84px);
}

.service-actions a { min-height: 44px;
}

@media (max-width: 820px) {
  .service-panel.is-coming-soon { min-height: 520px !important;
  }

  .service-panel.is-coming-soon .service-scene { min-height: 430px !important;
  }

  .leader-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;
  }

  .meeting-heading { grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .service-tab { min-width: 148px; min-height: 76px;
  }

  .service-tab strong { font-size: 14px;
  }

  .service-panel.is-coming-soon { min-height: 440px !important;
  }

  .service-panel.is-coming-soon .service-scene { min-height: 360px !important;
  }

  .leader-grid { grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel.service-swap { animation: none;
  }
}

/* One-line leadership roster with a scroll-driven card deal. */

#leaders .leader-grid {
  width:min(100%,1480px);
  margin:clamp(28px,4vw,56px) auto 0;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(7px,1.25vw,18px);
  perspective:1400px;
  perspective-origin:50% 16%;
}

#leaders .leader-card {
  position:relative;
  isolation:isolate;
  padding:clamp(5px,.58vw,9px) clamp(5px,.58vw,9px) clamp(12px,1.4vw,21px);
  border-radius:clamp(10px,1.1vw,16px);
  opacity:var(--leader-card-opacity,1);
  filter:blur(var(--leader-card-blur,0px));
  clip-path:inset(0 0 var(--leader-card-clip,0%) 0 round clamp(10px,1.1vw,16px));
  transform:translate3d(var(--leader-card-x,0),var(--leader-card-y,0),var(--leader-card-z,0)) rotateX(var(--leader-card-rotate-x,0deg)) rotateY(var(--leader-card-rotate-y,0deg)) rotateZ(var(--leader-card-rotate-z,0deg)) scale(var(--leader-card-scale,1));
  transform-origin:center 82%;
  transform-style:preserve-3d;
  transition:border-color 280ms ease,box-shadow 280ms ease,translate 280ms var(--ease);
  will-change:transform,opacity,filter,clip-path;
}

#leaders .leader-card:hover {
  translate:0 -7px;
}

#leaders .leader-card:focus-visible { clip-path:none; filter:none;
}

#leaders .leader-card::after {
  content:"";
  position:absolute;
  z-index:8;
  top:-18%;
  bottom:-18%;
  left:-42%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  opacity:var(--leader-card-sheen-opacity,0);
  transform:translateX(var(--leader-card-sheen-x,0%)) skewX(-18deg);
  mix-blend-mode:screen;
  pointer-events:none;
}

#leaders .leader-visual > img {
  transform:translateY(var(--leader-media-y,0)) scale(var(--leader-media-scale,1));
  transform-origin:center 24%;
  will-change:transform;
}

#leaders .leader-visual { aspect-ratio:4/4.25;
}

#leaders .leader-meta { padding:clamp(10px,1.25vw,18px) clamp(3px,.55vw,8px) clamp(9px,1vw,14px);
}

#leaders .leader-meta span { font-size:clamp(6px,.56vw,8px);
}

#leaders .leader-meta h3 { font-size:clamp(16px,1.75vw,26px);
}

#leaders .leader-meta b { max-width:82px; font-size:7px; line-height:1.35; text-align:right;
}

#leaders .leader-card > p { margin:clamp(9px,1vw,15px) clamp(3px,.55vw,8px) 0; font-size:clamp(9px,.76vw,11px); line-height:1.48;
}

@media (max-width:960px) {
  #leaders.leaders { padding-right:clamp(12px,3vw,28px); padding-left:clamp(12px,3vw,28px);
  }

  #leaders .leader-grid { gap:clamp(6px,1.2vw,11px);
  }

  #leaders .leader-meta b,
  #leaders .leader-card > p { display:none;
  }
}

@media (max-width:620px) {
  #leaders .leader-card {
    padding:3px 3px 9px;
    border-radius:8px;
    filter:none;
    clip-path:none;
    transform:translate3d(0,var(--leader-card-y,0),0) scale(var(--leader-card-scale,1));
  }

  #leaders .leader-card::after { display:none;
  }

  #leaders .leader-visual > img { transform:none; will-change:auto;
  }

  #leaders .leader-visual { aspect-ratio:3/4; border-radius:6px;
  }

  #leaders .leader-visual > small,
  #leaders .leader-visual > i,
  #leaders .leader-meta span { display:none;
  }

  #leaders .leader-meta { min-height:34px; padding:7px 1px 0; border-bottom:0;
  }

  #leaders .leader-meta h3 { font-size:clamp(10px,2.75vw,15px); line-height:1.02; overflow-wrap:anywhere;
  }
}

@media (max-width:420px) {
  #leaders.leaders { padding-right:10px; padding-left:10px;
  }

  #leaders .leader-grid { gap:4px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #leaders .leader-card {
    opacity:1!important;
    filter:none!important;
    clip-path:none!important;
    translate:none!important;
    transform:none!important;
    will-change:auto;
  }

  #leaders .leader-card::after { display:none;
  }

  #leaders .leader-visual > img { transform:none!important; will-change:auto;
  }
}

/* Canonical, truthful meeting-request desk. */

#reach-out.meeting-section {
  background:
    radial-gradient(circle at 78% 18%,rgba(213,237,101,.09),transparent 28%),
    radial-gradient(circle at 10% 84%,rgba(117,157,255,.08),transparent 26%),
    #080909;
}

.booking-console {
  margin-top:clamp(38px,6vw,76px);
  background:linear-gradient(145deg,rgba(16,18,17,.96),rgba(6,8,8,.98));
  box-shadow:0 42px 110px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06);
}

.booking-console-mark {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#0b0c09;
  border-radius:50%;
  background:var(--brand-blue);
  font-size:8px;
  font-weight:800;
  letter-spacing:-.04em;
}

.booking-workspace {
  min-height:610px;
  grid-template-columns:minmax(205px,.68fr) minmax(350px,1.25fr) minmax(285px,.9fr);
}

.booking-workspace .meeting-person > b {
  position:absolute;
  right:17px;
  color:rgba(255,255,255,.25);
  font-size:8px;
  font-weight:500;
}

.booking-workspace .meeting-person.is-active {
  background:linear-gradient(90deg,rgba(213,237,101,.12),rgba(213,237,101,.025));
}

.booking-workspace .meeting-person.is-active::before { background:var(--brand-blue);
}

.booking-preferences {
  margin:38px 0 0;
  padding:26px 0 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.12);
}

.booking-preferences legend,
.booking-request header span,
.booking-request-fields label > span {
  color:var(--brand-blue);
  font-size:10px;
  font-weight:650;
  letter-spacing:.13em;
}

.booking-field-grid {
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.booking-field-grid label,
.booking-request-fields label {
  min-width:0;
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.68);
  font-size:10px;
  letter-spacing:.1em;
}

.booking-field-grid input,
.booking-request-fields input,
.booking-request-fields textarea {
  width:100%;
  min-height:48px;
  padding:0 12px;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  outline:0;
  background:rgba(255,255,255,.035);
  color-scheme:dark;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.04em;
}

.booking-field-grid input:focus,
.booking-request-fields input:focus,
.booking-request-fields textarea:focus { border-color:var(--brand-blue);
}

.booking-duration {
  margin-top:12px;
  display:grid;
  grid-template-columns:auto repeat(3,1fr);
  align-items:center;
  gap:7px;
}

.booking-duration > span {
  margin-right:5px;
  color:rgba(255,255,255,.68);
  font-size:10px;
  letter-spacing:.1em;
}

.booking-duration button {
  min-height:44px;
  color:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  background:rgba(255,255,255,.025);
  font-size:10px;
  letter-spacing:.07em;
}

.booking-duration button:hover { border-color:rgba(213,237,101,.65);
}

.booking-duration button.is-active {
  color:#0b0d09;
  border-color:var(--brand-blue);
  background:var(--brand-blue);
}

.booking-preferences > p {
  margin:15px 0 0;
  color:rgba(255,255,255,.68);
  font-size:10px;
  line-height:1.5;
  letter-spacing:.06em;
}

.booking-preferences > p span { color:rgba(255,255,255,.82);
}

.booking-request {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:0 18px 20px;
  background:rgba(255,255,255,.018);
}

.booking-request > header {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.booking-request > header small {
  color:rgba(255,255,255,.3);
  font-size:7px;
  letter-spacing:.09em;
}

.booking-request-fields {
  padding:18px 0;
  display:grid;
  gap:13px;
}

.booking-request-fields label > span {
  display:flex;
  justify-content:space-between;
}

.booking-request-fields label > span i {
  color:rgba(255,255,255,.25);
  font-style:normal;
  font-weight:400;
}

.booking-request-fields textarea {
  min-height:94px;
  padding:12px;
  resize:vertical;
}

.booking-request .meeting-book { margin-top:auto; cursor:pointer;
}

.booking-request .meeting-book:hover { background:#fff;
}

.booking-disclosure {
  margin-top:11px;
  color:rgba(255,255,255,.7);
  font-size:10px;
  line-height:1.55;
  letter-spacing:.055em;
}

.booking-status {
  min-height:16px;
  margin:10px 0 0;
  color:var(--brand-blue);
  font-size:10px;
  line-height:1.45;
  letter-spacing:.06em;
}

.booking-console button:focus-visible,
.booking-console input:focus-visible,
.booking-console textarea:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
}

.booking-console .meeting-profile-copy > span { color:var(--brand-blue);
}

.booking-console .meeting-profile-copy > strong { font-size:10px;
}

.booking-console .meeting-profile-copy p {
  color:rgba(255,255,255,.72);
  font-size:10px;
}

.booking-console .meeting-person small {
  color:rgba(255,255,255,.68);
  font-size:9px;
  line-height:1.25;
}

.booking-console .meeting-roster-head small,
.booking-request > header small { color:rgba(255,255,255,.62); font-size:9px;
}

@media (max-width:820px), (pointer:coarse) {
  .booking-field-grid input,
  .booking-request-fields input,
  .booking-request-fields textarea { font-size:16px;
  }
}

@media (max-width:1100px) {
  .booking-workspace { grid-template-columns:220px minmax(0,1fr);
  }

  .booking-request {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(230px,.55fr);
    column-gap:18px;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .booking-request > header { grid-column:1 / -1;
  }

  .booking-request-fields { grid-template-columns:1fr 1fr;
  }

  .booking-request-fields label:last-child { grid-column:1 / -1;
  }

  .booking-request .meeting-book { align-self:end; margin:18px 0 0;
  }

  .booking-disclosure,
  .booking-status { grid-column:2;
  }
}

@media (max-width:760px) {
  .booking-workspace { grid-template-columns:1fr;
  }

  .booking-workspace .meeting-roster {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .booking-workspace .meeting-roster-head { grid-column:1 / -1;
  }

  .booking-workspace .meeting-person { min-width:0; padding-right:28px;
  }

  .booking-request {
    grid-column:1;
    display:flex;
    padding:0 16px 20px;
  }

  .booking-request-fields { grid-template-columns:1fr 1fr;
  }

  .booking-request-fields label:last-child { grid-column:1 / -1;
  }

  .booking-request .meeting-book { margin-top:4px;
  }

  .booking-field-grid { grid-template-columns:1fr 1fr;
  }

  .booking-disclosure,
  .booking-status { grid-column:auto;
  }
}

@media (max-width:480px) {
  .booking-workspace .meeting-person {
    min-height:70px;
    grid-template-columns:36px 1fr;
    gap:9px;
    padding:10px 22px 10px 10px;
  }

  .booking-workspace .meeting-avatar { width:36px; height:36px;
  }

  .booking-workspace .meeting-person > b { right:8px;
  }

  .booking-field-grid,
  .booking-request-fields { grid-template-columns:1fr;
  }

  .booking-request-fields label:last-child { grid-column:1;
  }

  .booking-duration { grid-template-columns:repeat(3,1fr);
  }

  .booking-duration > span { grid-column:1 / -1;
  }

  .booking-field-grid input,
  .booking-request-fields input,
  .booking-request-fields textarea { font-size:16px;
  }
}

/* Explain the offer before asking visitors to explore an animated service. */

.nu-world-work-link { display: inline-flex; align-items: center; min-height: 44px; margin: 16px 0 0 22px; color: #c3d1df; font-size: 15px; pointer-events: auto;
}

#services .service-tab { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 7px 12px; align-content: start; text-transform: none;
}

#services .service-tab > span { grid-column: 1; grid-row: 1; margin: 0;
}

#services .service-tab > strong { grid-column: 1; grid-row: 2;
}

#services .service-tab > small { grid-column: 1; grid-row: 3; color: #52616b; font-size: 14px; line-height: 1.5; letter-spacing: 0; font-weight: 400;
}

#services .service-tab > i { grid-column: 2; grid-row: 2; opacity: 1; transform: none;
}

#services .service-tab.is-active small { color: inherit;
}

.home-next-steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,96px); background: #edf1f2; color: #152029; border-top: 1px solid #cdd6da;
}

.home-next-steps h2 { margin: 18px 0 24px; font-size: clamp(34px,4vw,60px); line-height: 1.05; letter-spacing: -.04em; font-weight: 450; text-transform: none;
}

.home-next-steps ol { list-style: none; margin: 0; padding: 0;
}

.home-next-steps li { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid #cdd6da;
}

.home-next-steps li > span { color: #456678; font-size: 13px; padding-top: 4px;
}

.home-next-steps .nu-eyebrow { color: #456678;
}

.home-next-steps h3 { margin: 0 0 8px; font-size: 21px; font-weight: 500; text-transform: none;
}

.home-next-steps p { margin: 0; color: #4f606c; font-size: 16px; line-height: 1.6; max-width: 430px;
}

@media (max-width: 800px) {
  .home-next-steps { grid-template-columns: 1fr; gap: 28px;
  }

  #services .service-tab { min-height: 110px; grid-template-columns: 24px minmax(0,1fr) 20px; grid-template-rows: auto auto; gap: 7px 10px;
  }

  #services .service-tab > span { grid-column: 1; grid-row: 1;
  }

  #services .service-tab > strong { grid-column: 2; grid-row: 1;
  }

  #services .service-tab > small { grid-column: 2; grid-row: 2;
  }

  #services .service-tab > i { grid-column: 3; grid-row: 1;
  }

  .nu-world-work-link { margin-left: 0; margin-right: 20px;
  }
}

#services .service-tab { background: #0d161f; color: #edf4f8; border: 1px solid #344450;
}

#services .service-tab > small { color: #bac9d4;
}

#services .service-tab.is-active { background: #1a2c39; border-color: #91bacd;
}

#services .service-tab.is-active > small { color: #d7e5ee;
}

@media (max-width: 800px) {
  #services .service-panel:not(.is-coming-soon) { display: flex; flex-direction: column; min-height: 0;
  }

  #services .service-panel-top { order: 1;
  }

  #services .service-story { order: 2; padding-top: 24px;
  }

  #services .service-actions { order: 3;
  }

  #services .service-scene { order: 4; margin-top: 24px;
  }

  #services .deliverable-label { order: 5;
  }

  #services .deliverable-grid { order: 6;
  }
}

/* 02A / Everything we do: a crawlable, plain-language index of every service. */
.service-index { border-top: 1px solid var(--line);
}

.service-index-heading { padding-bottom: 40px; border-bottom: 1px solid var(--line);
}

.service-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 48px;
}

.service-index-group h3 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
}

.service-index-group h3 a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
}

.service-index-group h3 a:hover, .service-index-group h3 a:focus-visible { color: var(--cobalt); border-color: var(--cobalt);
}

.service-index-group > p { margin: 10px 0 0; color: var(--text-muted); font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
}

.service-index-group ul { list-style: none; margin: 22px 0 0; padding: 0;
}

.service-index-group li { border-top: 1px solid var(--line);
}

.service-index-group li a { display: grid; gap: 6px; padding: 16px 0; color: var(--text); text-decoration: none;
}

.service-index-group li a strong { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none;
}

.service-index-group li a span { color: var(--text-soft); font-size: 14px; line-height: 1.55;
}

.service-index-group li a:hover strong, .service-index-group li a:focus-visible strong { color: var(--cobalt);
}

@media (max-width: 800px) {
  .service-index-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 32px;
  }

  .service-index-heading { padding-bottom: 28px;
  }
}
.service-index .scene-label span { color: #5a5d59; }
.service-index .scene-label span:first-child { color: #1e6482; }
.service-index-group > p { color: #5a5d59; }