:root {
  --bg: #f7fafb;
  --surface: rgba(255, 255, 255, 0.74);
  --surface-solid: #ffffff;
  --ink: #081b2d;
  --muted: #5e6c78;
  --line: rgba(8, 27, 45, 0.11);
  --blue: #0b4da2;
  --blue-bright: #15a5ea;
  --green: #32bd3f;
  --green-soft: #86d67f;
  --shadow: 0 30px 80px rgba(8, 27, 45, 0.10);
  --radius: 28px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(21, 165, 234, 0.08), transparent 30%),
    radial-gradient(circle at 85% 25%, rgba(50, 189, 63, 0.08), transparent 27%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(21, 165, 234, .20); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.ambient {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  opacity: .16;
  z-index: -1;
}
.ambient-a { background: var(--blue-bright); left: -180px; top: 36vh; }
.ambient-b { background: var(--green); right: -220px; top: 70vh; }

.section-shell {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 1280px);
  min-height: 72px;
  padding: 11px 13px 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: rgba(250, 253, 254, .72);
  box-shadow: 0 10px 45px rgba(8,27,45,.07);
  backdrop-filter: blur(18px) saturate(150%);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.site-header.is-scrolled {
  background: rgba(250, 253, 254, .88);
  box-shadow: 0 12px 50px rgba(8,27,45,.10);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 226px; max-width: 38vw; height: auto; display: block; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  padding: 13px 15px;
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease;
}
.nav a:hover { background: rgba(8,27,45,.055); }
.nav .nav-contact {
  color: white;
  background: var(--ink);
  padding-inline: 18px;
}
.nav .nav-contact:hover { background: #102d46; transform: translateY(-1px); }

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 170px;
  padding-bottom: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  grid-template-rows: 1fr auto;
  column-gap: 44px;
  align-items: center;
}
.hero-grid {
  position: absolute;
  inset: 104px 0 28px;
  z-index: -1;
  opacity: .35;
  border-radius: 40px;
  background-image:
    linear-gradient(to right, rgba(8,27,45,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,27,45,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 75%, transparent 100%);
}
.hero-content { max-width: 800px; }
.eyebrow, .section-kicker {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--blue);
}
.hero h1 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(52px, 6.6vw, 98px);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 720;
}
.gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, var(--blue) 8%, var(--blue-bright) 48%, var(--green) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy {
  max-width: 730px;
  margin: 34px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.65;
  letter-spacing: -.017em;
}
.hero-copy strong { color: var(--ink); font-weight: 650; }
.hero-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 15px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 750;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button-primary {
  color: white;
  background: var(--ink);
  box-shadow: 0 12px 34px rgba(8,27,45,.16);
}
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(8,27,45,.22); }
.button-primary span { font-size: 18px; }

.hero-aside {
  display: flex;
  justify-content: flex-end;
  min-height: min(390px, 30vw);
}
.orbit-card {
  --orbit-x: 0px;
  --orbit-y: 0px;
  position: relative;
  width: min(390px, 30vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 22%, rgba(255,255,255,.34) 22.2% 38%, transparent 38.2%);
  transform: translate3d(var(--orbit-x), var(--orbit-y), 0);
  transition:
    width .42s cubic-bezier(.2,.75,.2,1),
    filter .32s ease,
    opacity .32s ease,
    background .32s ease,
    box-shadow .32s ease;
  z-index: 45;
}
.orbit-card::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(8,27,45,.09);
  box-shadow: inset 0 0 60px rgba(21,165,234,.035);
}
.orbit-card.is-docked {
  position: fixed;
  top: 124px;
  right: clamp(18px, 3vw, 52px);
  width: clamp(210px, 17vw, 260px);
  padding: 0;
  transform: translate3d(0,0,0);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 22%, rgba(255,255,255,.58) 22.2% 38%, rgba(248,252,253,.28) 38.2% 100%);
  box-shadow: 0 22px 65px rgba(8,27,45,.12);
  backdrop-filter: blur(16px) saturate(140%);
}
.orbit-card.is-docked::after {
  content: "";
  position: absolute;
  inset: -7%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(12px);
}
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(8,27,45,.12);
  pointer-events: none;
}
.ring-one { inset: 18%; animation: orbit-spin 18s linear infinite; border-style: dashed; }
.ring-two { inset: 34%; border-color: rgba(50,189,63,.23); }
.orbit-logo {
  width: 22%;
  filter: drop-shadow(0 18px 26px rgba(8,27,45,.14));
  animation: float 5s ease-in-out infinite;
  pointer-events: none;
}
.orbit-label {
  position: absolute;
  appearance: none;
  border: 1px solid rgba(8,27,45,.08);
  margin: 0;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 30px rgba(8,27,45,.07);
  backdrop-filter: blur(12px);
  color: #304353;
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .035em;
  cursor: pointer;
  white-space: nowrap;
  z-index: 4;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.orbit-label:hover,
.orbit-label:focus-visible,
.orbit-label.is-active {
  border-color: rgba(11,77,162,.18);
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 38px rgba(8,27,45,.13);
  transform: translateY(-2px);
  outline: none;
  z-index: 8;
}
.label-title { display: block; }
.label-detail {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(250px, 60vw);
  padding: 14px 15px;
  border: 1px solid rgba(8,27,45,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 45px rgba(8,27,45,.12);
  color: #526271;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 560;
  letter-spacing: -.005em;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.96);
  transform-origin: top left;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.75,.2,1), visibility .2s ease;
}
.orbit-label:hover .label-detail,
.orbit-label:focus-visible .label-detail,
.orbit-label.is-active .label-detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.label-pharma { top: 10%; right: 2%; }
.label-medtech { right: -6%; bottom: 25%; }
.label-health { left: 1%; bottom: 12%; }
.label-quality { top: 22%; left: -4%; }
.label-regulatory {
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
}
.label-regulatory:hover,
.label-regulatory:focus-visible,
.label-regulatory.is-active { transform: translateX(-50%) translateY(-2px); }
.label-pharma .label-detail,
.label-medtech .label-detail {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.label-medtech .label-detail,
.label-health .label-detail,
.label-regulatory .label-detail {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom left;
}
.label-medtech .label-detail { transform-origin: bottom right; }
.label-regulatory .label-detail {
  left: 50%;
  right: auto;
  transform: translate(-50%, 8px) scale(.96);
  transform-origin: bottom center;
}
.label-regulatory:hover .label-detail,
.label-regulatory:focus-visible .label-detail,
.label-regulatory.is-active .label-detail { transform: translate(-50%, 0) scale(1); }

.sector-strip {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  color: #74818b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 42px;
}
.sector-strip i {
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--blue-bright), var(--green));
}

.statement { padding-top: 132px; padding-bottom: 116px; }
.statement-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 80px;
  align-items: end;
}
.statement h2,
.section-heading h2,
.contact-panel h2 {
  margin: 0;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1.03;
  letter-spacing: -.05em;
  font-weight: 700;
}

.statement-layout > p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -.015em;
}
.expertise { padding-top: 118px; padding-bottom: 130px; }
.section-heading {
  margin-bottom: 54px;
}
.section-heading h2 {
  max-width: none;
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.expertise-card {
  position: relative;
  min-height: 270px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 50px rgba(8,27,45,.045);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.expertise-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  right: -100px;
  top: -120px;
  background: radial-gradient(circle, rgba(21,165,234,.15), rgba(50,189,63,.06) 45%, transparent 72%);
  transition: transform .35s ease;
}
.expertise-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11,77,162,.15);
  box-shadow: 0 22px 60px rgba(8,27,45,.09);
}
.expertise-card:hover::after { transform: scale(1.2) translate(-10px, 8px); }
.card-number {
  position: absolute;
  top: 25px;
  left: 30px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  color: var(--blue);
}
.expertise-card h3 {
  max-width: 470px;
  margin: 0 0 16px;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.expertise-card p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.contact-section { padding: 86px 0 118px; }
.contact-panel {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  padding: clamp(34px, 6vw, 76px);
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow);
}
.contact-panel::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -140px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50,189,63,.35), rgba(21,165,234,.18) 45%, transparent 72%);
}
.contact-panel .section-kicker { color: #7fdc85; }
.contact-panel h2 { position: relative; max-width: 960px; }
.contact-link {
  position: relative;
  width: 100%;
  margin-top: 50px;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: white;
  background: transparent;
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-size: clamp(19px, 2vw, 29px);
  font-weight: 650;
  letter-spacing: -.02em;
  cursor: pointer;
}
.contact-arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--ink);
  transition: transform .25s ease;
}
.contact-link:hover .contact-arrow { transform: translate(4px,-4px); }

.site-footer {
  min-height: 150px;
  padding-top: 28px;
  padding-bottom: 42px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 22px;
  color: #7b8790;
  font-size: 12px;
}
.site-footer img { width: 188px; height: auto; }
.site-footer p { margin: 0; }
.site-footer p:nth-child(2) { text-align: center; }
.site-footer .copyright { text-align: right; }

/* Content is visible by default. JavaScript only enables the reveal-hidden
   state after the runtime itself has reached the observer setup. This prevents
   a missing/blocked script from turning the whole page into blank space. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.reveal-runtime-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
}
html.reveal-runtime-ready .reveal.is-visible { opacity: 1; transform: none; }

@keyframes float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding-top: 160px;
    min-height: auto;
  }
  .hero-content { max-width: 820px; }
  .hero-aside { justify-content: center; margin-top: 40px; min-height: min(420px, 72vw); }
  .orbit-card:not(.is-docked) { width: min(420px, 72vw); }
  .orbit-card.is-docked { width: 205px; right: 20px; top: 112px; }
  .orbit-card.is-docked .orbit-label { font-size: 9px; padding: 7px 9px; }
  .orbit-card.is-docked .label-detail { width: 210px; font-size: 11px; }
  .sector-strip { margin-top: 28px; }
  .statement-layout { grid-template-columns: 1fr; gap: 28px; }
  .statement-layout > p { max-width: 680px; }
}

@media (max-width: 720px) {
  .section-shell { width: min(calc(100% - 28px), var(--max)); }
  .site-header { top: 8px; width: calc(100% - 16px); padding: 9px 10px 9px 13px; min-height: 62px; border-radius: 18px; }
  .brand img { width: 178px; max-width: 55vw; }
  .nav a:not(.nav-contact) { display: none; }
  .nav .nav-contact { padding: 11px 13px; font-size: 13px; }
  .hero { padding-top: 132px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(48px, 15vw, 74px); }
  .hero-copy { margin-top: 28px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; justify-content: space-between; }
  .hero-aside { min-height: min(360px, 88vw); }
  .orbit-card:not(.is-docked) { width: min(360px, 88vw); }
  .orbit-card.is-docked {
    top: auto;
    right: 14px;
    bottom: 16px;
    width: 170px;
    opacity: .96;
  }
  .orbit-card.is-docked .orbit-label { font-size: 8px; padding: 6px 8px; }
  .orbit-card.is-docked .label-detail {
    width: min(200px, 74vw);
    left: auto;
    right: 0;
    font-size: 10.5px;
    padding: 11px 12px;
    transform-origin: bottom right;
  }
  .orbit-card.is-docked .label-regulatory .label-detail {
    left: 50%;
    right: auto;
    transform-origin: bottom center;
  }
  .sector-strip { gap: 12px; font-size: 10px; }
  .sector-strip i { display: none; }
  .sector-strip span { width: calc(50% - 8px); }
  .statement, .expertise { padding-top: 92px; padding-bottom: 90px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card { min-height: 240px; padding: 26px; }
  .contact-section { padding-top: 48px; padding-bottom: 82px; }
  .contact-panel { border-radius: 28px; }
  .contact-link { align-items: flex-end; word-break: break-word; }
  .contact-arrow { flex: 0 0 46px; width: 46px; height: 46px; }
  .site-footer { grid-template-columns: 1fr; min-height: auto; align-items: start; }
  .site-footer p:nth-child(2), .site-footer .copyright { text-align: left; }
}

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

/* Expertise illustrations — bespoke PackAbility line art */
.expertise-card {
  min-height: 455px;
  padding: 24px 28px 30px;
  justify-content: flex-start;
  isolation: isolate;
}
.expertise-card::after {
  width: 330px;
  height: 330px;
  right: -145px;
  top: -160px;
  opacity: .9;
}
.expertise-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .44;
  background-image:
    linear-gradient(to right, rgba(8,27,45,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,27,45,.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 66%);
}
.card-number {
  top: 26px;
  left: 29px;
  z-index: 5;
}
.expertise-visual {
  position: relative;
  width: 100%;
  height: 236px;
  margin: 20px 0 8px;
  overflow: hidden;
  border: 1px solid rgba(8,27,45,.075);
  border-radius: 22px;
  background:
    radial-gradient(circle at 76% 22%, rgba(50,189,63,.11), transparent 30%),
    radial-gradient(circle at 24% 78%, rgba(21,165,234,.12), transparent 34%),
    rgba(248,252,253,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.expertise-card:hover .expertise-visual {
  transform: translateY(-2px) scale(1.008);
  border-color: rgba(11,77,162,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 32px rgba(8,27,45,.055);
}
.expertise-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.expertise-copy {
  margin-top: auto;
  padding-top: 18px;
}
.expertise-card h3 {
  margin-bottom: 13px;
}
.expertise-card p {
  max-width: 540px;
}
.visual-tag {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 24px rgba(8,27,45,.07);
  backdrop-filter: blur(10px);
  color: #405365;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: visual-tag-float 5.2s ease-in-out infinite;
}
.visual-tag.tag-a { left: 18px; top: 20px; }
.visual-tag.tag-b { right: 20px; top: 24px; animation-delay: -1.8s; }
.visual-tag.tag-c { right: 35px; bottom: 18px; animation-delay: -3.4s; }
.expertise-visual svg path,
.expertise-visual svg rect,
.expertise-visual svg circle {
  vector-effect: non-scaling-stroke;
}
.visual-grid-lines path {
  fill: none;
  stroke: rgba(8,27,45,.055);
  stroke-width: 1;
}
.visual-route,
.growth-line,
.turnaround-flow,
.recovery-line,
.process-line {
  fill: none;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 8;
  animation: route-dash 8s linear infinite;
}
.expertise-visual--regulatory .visual-route { stroke: url(#reg-flow); }
.doc-stack rect {
  fill: rgba(255,255,255,.82);
  stroke: rgba(11,77,162,.22);
  stroke-width: 1.4;
}
.doc-stack path:not(.check) {
  fill: none;
  stroke: rgba(11,77,162,.35);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.doc-stack circle {
  fill: rgba(50,189,63,.11);
  stroke: rgba(50,189,63,.48);
  stroke-width: 1.4;
}
.doc-stack .check {
  fill: none;
  stroke: #32bd3f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.approval-seal circle {
  fill: rgba(255,255,255,.6);
  stroke: rgba(50,189,63,.25);
  stroke-width: 1.3;
}
.approval-seal circle:first-child {
  stroke-dasharray: 5 6;
  animation: seal-spin 16s linear infinite;
  transform-origin: 424px 129px;
}
.approval-seal path {
  fill: none;
  stroke: url(#reg-flow);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-nodes circle {
  fill: #fff;
  stroke: url(#reg-flow);
  stroke-width: 2;
}
.strategy-rings circle {
  fill: rgba(255,255,255,.34);
  stroke: rgba(11,77,162,.11);
  stroke-width: 1.2;
}
.strategy-rings circle:first-child { stroke-dasharray: 6 7; animation: strategy-spin 20s linear infinite; transform-origin: 193px 126px; }
.strategy-tree path {
  fill: none;
  stroke: rgba(11,77,162,.28);
  stroke-width: 1.65;
  stroke-linecap: round;
}
.strategy-tree circle {
  fill: #fff;
  stroke: url(#strat-flow);
  stroke-width: 2;
}
.strategy-tree circle:nth-last-child(-n+3) { fill: rgba(50,189,63,.08); }
.expertise-visual--strategy .growth-line { stroke: url(#strat-flow); stroke-dasharray: none; }
.growth-arrow {
  fill: none;
  stroke: #32bd3f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chaos-blocks rect {
  fill: rgba(255,255,255,.74);
  stroke: rgba(11,77,162,.22);
  stroke-width: 1.3;
}
.expertise-visual--turnaround .turnaround-flow,
.expertise-visual--turnaround .recovery-line { stroke: url(#turn-flow); }
.expertise-visual--turnaround .lower { animation-direction: reverse; }
.ordered-blocks rect {
  fill: rgba(255,255,255,.64);
  stroke: rgba(50,189,63,.34);
  stroke-width: 1.4;
}
.pulse-dot {
  fill: #fff;
  stroke: #15a5ea;
  stroke-width: 2;
  transform-origin: 351px 164px;
  animation: pulse-node 2.2s ease-out infinite;
}
.industrial-grid path {
  fill: none;
  stroke: rgba(8,27,45,.06);
  stroke-width: 1;
}
.industrial-modules rect {
  fill: rgba(255,255,255,.68);
  stroke: rgba(11,77,162,.22);
  stroke-width: 1.35;
}
.industrial-modules path {
  fill: none;
  stroke: rgba(11,77,162,.26);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.expertise-visual--industrial .process-line { stroke: url(#ind-flow); }
.process-nodes circle {
  fill: #fff;
  stroke: url(#ind-flow);
  stroke-width: 2;
}
.process-arrow {
  fill: none;
  stroke: #32bd3f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.expertise-card--regulatory .expertise-visual { background-color: rgba(246,251,255,.78); }
.expertise-card--strategy .expertise-visual { background-color: rgba(248,252,255,.78); }
.expertise-card--turnaround .expertise-visual { background-color: rgba(247,252,250,.78); }
.expertise-card--industrial .expertise-visual { background-color: rgba(247,251,252,.78); }
.expertise-card:hover .visual-tag { border-color: rgba(11,77,162,.13); }

@keyframes route-dash { to { stroke-dashoffset: -96; } }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@keyframes strategy-spin { to { transform: rotate(-360deg); } }
@keyframes pulse-node {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.9); opacity: .18; }
  100% { transform: scale(2.15); opacity: 0; }
}
@keyframes visual-tag-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 720px) {
  .expertise-card { min-height: 410px; padding: 20px 20px 26px; }
  .expertise-visual { height: 206px; margin-top: 22px; border-radius: 18px; }
  .expertise-copy { padding-top: 14px; }
  .card-number { top: 23px; left: 23px; }
  .visual-tag { font-size: 8px; padding: 5px 8px; min-height: 25px; }
  .visual-tag.tag-a { left: 12px; top: 14px; }
  .visual-tag.tag-b { right: 13px; top: 16px; }
  .visual-tag.tag-c { right: 16px; bottom: 13px; }
}

/* ========================================================================== 
   Positioning section — complexity converging into a board-level decision
   ========================================================================== */
.statement {
  padding-top: 132px;
  padding-bottom: 116px;
}

.statement > .section-kicker {
  margin-bottom: 22px;
}

.statement-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: stretch;
  min-height: 560px;
  padding: clamp(30px, 4.2vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 36px;
  background:
    radial-gradient(circle at 81% 18%, rgba(50,189,63,.10), transparent 29%),
    radial-gradient(circle at 10% 92%, rgba(21,165,234,.11), transparent 34%),
    rgba(255,255,255,.66);
  box-shadow: 0 26px 80px rgba(8,27,45,.065), inset 0 1px 0 rgba(255,255,255,.94);
  isolation: isolate;
}

.statement-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .45;
  background-image:
    linear-gradient(to right, rgba(8,27,45,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,27,45,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.72) 42%, transparent 82%);
}

.statement-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(8,27,45,.08), transparent);
  transform: translateX(-50%);
  z-index: -1;
}

.statement-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 570px;
  padding: 24px 0;
}

.statement-copy::before {
  content: attr(data-flow-label);
  display: inline-flex;
  margin-bottom: 22px;
  color: #6b7c89;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.statement-copy h2 {
  max-width: 610px;
}

.statement-copy p {
  max-width: 540px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.66;
  letter-spacing: -.016em;
}

.board-visual {
  --board-shift-x: 0px;
  --board-shift-y: 0px;
  position: relative;
  min-height: 450px;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(8,27,45,.07);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.98) 0 12%, rgba(255,255,255,.56) 28%, transparent 56%),
    linear-gradient(145deg, rgba(247,252,255,.82), rgba(249,253,250,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 20px 55px rgba(8,27,45,.05);
  transform: translate3d(var(--board-shift-x), var(--board-shift-y), 0);
  transition: transform .45s cubic-bezier(.2,.72,.2,1), border-color .3s ease, box-shadow .3s ease;
}

.statement-panel:hover .board-visual {
  border-color: rgba(11,77,162,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 25px 65px rgba(8,27,45,.075);
}

.board-grid {
  position: absolute;
  inset: 0;
  opacity: .58;
  background-image:
    linear-gradient(to right, rgba(8,27,45,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,27,45,.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 50%, #000 8%, rgba(0,0,0,.82) 52%, transparent 88%);
}

.board-visual::before,
.board-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.board-visual::before {
  width: 320px;
  height: 320px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(21,165,234,.12), rgba(50,189,63,.055) 46%, transparent 72%);
  filter: blur(12px);
  animation: board-aura 5.6s ease-in-out infinite;
}

.board-visual::after {
  width: 92px;
  height: 92px;
  right: -25px;
  bottom: 46px;
  border: 1px solid rgba(50,189,63,.15);
  box-shadow: 0 0 0 26px rgba(50,189,63,.025), 0 0 0 52px rgba(21,165,234,.02);
}

.board-visual svg {
  position: absolute;
  inset: 2% 1%;
  width: 98%;
  height: 96%;
  overflow: visible;
}

.board-halo {
  fill: none;
  stroke: rgba(11,77,162,.13);
  stroke-width: 1.2;
  stroke-dasharray: 7 9;
  transform-origin: 310px 218px;
  animation: board-spin 24s linear infinite;
}

.board-halo--inner {
  stroke: rgba(50,189,63,.18);
  stroke-dasharray: 2 7;
  animation-direction: reverse;
  animation-duration: 17s;
}

.board-glow {
  opacity: .86;
}

.board-links path {
  fill: none;
  stroke: url(#board-flow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  animation: board-flow-dash 8s linear infinite;
}

.board-links path:nth-child(even) {
  animation-direction: reverse;
}

.board-pulses circle {
  fill: #fff;
  stroke: url(#board-flow);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: board-node-pulse 2.8s ease-out infinite;
}
.board-pulses circle:nth-child(2) { animation-delay: -.45s; }
.board-pulses circle:nth-child(3) { animation-delay: -.9s; }
.board-pulses circle:nth-child(4) { animation-delay: -1.35s; }
.board-pulses circle:nth-child(5) { animation-delay: -1.8s; }
.board-pulses circle:nth-child(6) { animation-delay: -2.25s; }

.board-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 42px;
  background:
    radial-gradient(circle at 32% 20%, rgba(21,165,234,.22), transparent 38%),
    #081b2d;
  box-shadow: 0 26px 55px rgba(8,27,45,.20), 0 0 0 10px rgba(255,255,255,.54);
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
}

.board-core::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-bottom: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-bright), var(--green));
  box-shadow: 0 0 0 6px rgba(50,189,63,.08);
}

.board-core span {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.board-core strong {
  margin-top: 6px;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 700;
}

.board-node {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 13px;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(8,27,45,.07);
  backdrop-filter: blur(12px);
  color: #344a5c;
  font-size: 10px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .055em;
  white-space: nowrap;
  animation: board-label-float 5.8s ease-in-out infinite;
}

.board-node::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-bright), var(--green));
  box-shadow: 0 0 0 4px rgba(21,165,234,.06);
}

.board-node--regulatory { left: 13%; top: 12%; }
.board-node--quality { left: 2.5%; top: 48%; animation-delay: -1.1s; }
.board-node--strategy { left: 17%; bottom: 10%; animation-delay: -2.2s; }
.board-node--operations { right: 11%; top: 14%; animation-delay: -.7s; }
.board-node--industrial { right: 1.5%; top: 52%; animation-delay: -1.8s; }
.board-node--capital { right: 13%; bottom: 9%; animation-delay: -2.9s; }

/* ========================================================================== 
   Final CTA — animated challenge-to-execution system
   ========================================================================== */
.contact-section {
  padding: 86px 0 118px;
}

.contact-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  gap: clamp(24px, 4vw, 66px);
  align-items: center;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 38px;
  padding: clamp(38px, 5.3vw, 72px);
  background:
    radial-gradient(circle at 83% 30%, rgba(21,165,234,.18), transparent 31%),
    radial-gradient(circle at 73% 78%, rgba(50,189,63,.15), transparent 28%),
    linear-gradient(135deg, #071827 0%, #081b2d 42%, #0a2234 100%);
  color: white;
  box-shadow: 0 34px 90px rgba(8,27,45,.18);
  isolation: isolate;
}

.contact-panel::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 54%, #000 100%);
}

.contact-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  left: -250px;
  bottom: -340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,165,234,.19), rgba(21,165,234,.02) 48%, transparent 70%);
  pointer-events: none;
}

.contact-copy {
  position: relative;
  z-index: 5;
  align-self: center;
}

.contact-panel .section-kicker {
  color: #7fdc85;
  margin-bottom: 24px;
}

.contact-panel h2 {
  max-width: 720px;
  font-size: clamp(42px, 4.7vw, 68px);
}

.contact-subcopy {
  max-width: 620px;
  margin: 28px 0 0;
  color: rgba(235,244,249,.70);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.64;
  letter-spacing: -.012em;
}

.contact-link {
  position: relative;
  width: min(100%, 330px);
  min-height: 66px;
  margin-top: 38px;
  padding: 8px 9px 8px 22px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  color: white;
  background: rgba(255,255,255,.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 38px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.contact-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21,165,234,.16), rgba(50,189,63,.12));
  transform: translateX(-102%);
  transition: transform .38s cubic-bezier(.2,.75,.2,1);
}

.contact-link > span {
  position: relative;
  z-index: 2;
}

.contact-link:hover,
.contact-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 22px 48px rgba(0,0,0,.18);
  outline: none;
}

.contact-link:hover::before,
.contact-link:focus-visible::before {
  transform: translateX(0);
}

.contact-arrow {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #eaf7fb 100%);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  transition: transform .3s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
}

.contact-link:hover .contact-arrow,
.contact-link:focus-visible .contact-arrow {
  transform: translate(3px,-3px) rotate(4deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.project-visual {
  --project-x: 0px;
  --project-y: 0px;
  --project-tilt-x: 0deg;
  --project-tilt-y: 0deg;
  position: relative;
  z-index: 3;
  min-height: 490px;
  perspective: 900px;
  transform: translate3d(var(--project-x), var(--project-y), 0) rotateX(var(--project-tilt-x)) rotateY(var(--project-tilt-y));
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.72,.2,1);
}

.project-grid {
  position: absolute;
  inset: 2%;
  opacity: .55;
  border-radius: 50%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.74) 52%, transparent 78%);
}

.project-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, 84%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.10) 0 11%, rgba(21,165,234,.11) 25%, rgba(50,189,63,.06) 44%, transparent 68%);
  filter: blur(7px);
  transform: translate(-50%, -50%) translateZ(-10px);
  animation: project-aura-breathe 5.2s ease-in-out infinite;
}

.project-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(10px);
}

.project-ring {
  fill: none;
  stroke-width: 1.3;
  transform-origin: 280px 260px;
}

.project-ring--outer {
  stroke: rgba(255,255,255,.15);
  stroke-dasharray: 7 10;
  animation: project-spin 25s linear infinite;
}

.project-ring--mid {
  stroke: rgba(21,165,234,.24);
  stroke-dasharray: 3 8;
  animation: project-spin-reverse 18s linear infinite;
}

.project-ring--inner {
  stroke: rgba(89,210,103,.27);
}

.project-links path {
  fill: none;
  stroke: url(#project-flow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  animation: project-link-flow 7.5s linear infinite;
}

.project-links path:nth-child(even) {
  animation-direction: reverse;
}

.project-dots circle {
  fill: #0a2234;
  stroke: url(#project-flow);
  stroke-width: 2.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: project-dot-pulse 2.5s ease-out infinite;
}
.project-dots circle:nth-child(2) { animation-delay: -.6s; }
.project-dots circle:nth-child(3) { animation-delay: -1.2s; }
.project-dots circle:nth-child(4) { animation-delay: -1.8s; }

.project-sweep {
  fill: none;
  stroke: url(#project-flow);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 64 240;
  filter: drop-shadow(0 0 8px rgba(21,165,234,.35));
  animation: project-sweep 4.8s linear infinite;
}

.project-core {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 138px;
  height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 42px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 28px 60px rgba(0,0,0,.22), 0 0 0 11px rgba(255,255,255,.035);
  color: var(--ink);
  transform: translate(-50%, -50%) translateZ(34px);
  backdrop-filter: blur(14px);
}

.project-core span {
  color: #677986;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.project-core img {
  width: 68px;
  height: auto;
  filter: drop-shadow(0 11px 16px rgba(8,27,45,.15));
}

.project-node {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(8,27,45,.66);
  box-shadow: 0 15px 35px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.84);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .06em;
  animation: project-node-float 5.5s ease-in-out infinite;
  transform: translateZ(28px);
}

.project-node::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-bright), #59d267);
  box-shadow: 0 0 0 5px rgba(21,165,234,.06);
}

.project-node--strategy { left: 7%; top: 19%; }
.project-node--regulatory { right: 4%; top: 18%; animation-delay: -1.1s; }
.project-node--industrial { left: 8%; bottom: 17%; animation-delay: -2.2s; }
.project-node--execution { right: 4%; bottom: 17%; animation-delay: -3.1s; }

@keyframes board-spin { to { transform: rotate(360deg); } }
@keyframes board-flow-dash { to { stroke-dashoffset: -128; } }
@keyframes board-node-pulse {
  0% { transform: scale(1); opacity: 1; }
  68% { transform: scale(1.75); opacity: .28; }
  100% { transform: scale(1.95); opacity: .06; }
}
@keyframes board-label-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes board-aura {
  0%,100% { transform: translate(-50%, -50%) scale(.96); opacity: .72; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes project-spin { to { transform: rotate(360deg); } }
@keyframes project-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes project-link-flow { to { stroke-dashoffset: -128; } }
@keyframes project-dot-pulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.75); opacity: .22; }
  100% { transform: scale(2); opacity: .05; }
}
@keyframes project-sweep { to { stroke-dashoffset: -304; } }
@keyframes project-aura-breathe {
  0%,100% { transform: translate(-50%, -50%) translateZ(-10px) scale(.96); opacity: .72; }
  50% { transform: translate(-50%, -50%) translateZ(-10px) scale(1.05); opacity: 1; }
}
@keyframes project-node-float {
  0%,100% { margin-top: 0; }
  50% { margin-top: -5px; }
}

@media (max-width: 1080px) {
  .statement-panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .statement-panel::after { display: none; }
  .statement-copy { max-width: 760px; padding-bottom: 2px; }
  .statement-copy p { max-width: 700px; }
  .board-visual { min-height: 470px; }

  .contact-panel {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .contact-copy { max-width: 780px; }
  .project-visual { min-height: 470px; }
}

@media (max-width: 720px) {
  .statement {
    padding-top: 92px;
    padding-bottom: 88px;
  }
  .statement-panel {
    padding: 24px 18px 18px;
    border-radius: 28px;
  }
  .statement-copy {
    padding: 10px 6px 8px;
  }
  .statement-copy::before {
    margin-bottom: 16px;
    font-size: 8px;
    letter-spacing: .12em;
  }
  .statement-copy p {
    margin-top: 20px;
    font-size: 15px;
  }
  .board-visual {
    min-height: 380px;
    border-radius: 22px;
  }
  .board-core {
    width: 118px;
    height: 118px;
    border-radius: 34px;
  }
  .board-core strong { font-size: 17px; }
  .board-core span { font-size: 7px; }
  .board-node {
    min-height: 30px;
    padding: 7px 9px;
    gap: 6px;
    font-size: 8px;
  }
  .board-node::before { width: 6px; height: 6px; }
  .board-node--regulatory { left: 5%; top: 10%; }
  .board-node--quality { left: 1%; top: 48%; }
  .board-node--strategy { left: 8%; bottom: 9%; }
  .board-node--operations { right: 4%; top: 14%; }
  .board-node--industrial { right: 0; top: 52%; }
  .board-node--capital { right: 5%; bottom: 8%; }

  .contact-section {
    padding-top: 48px;
    padding-bottom: 82px;
  }
  .contact-panel {
    min-height: auto;
    gap: 16px;
    padding: 32px 20px 22px;
    border-radius: 28px;
  }
  .contact-panel h2 {
    font-size: clamp(39px, 11.5vw, 56px);
  }
  .contact-subcopy {
    margin-top: 22px;
    font-size: 15px;
  }
  .contact-link {
    width: 100%;
    margin-top: 30px;
  }
  .project-visual {
    min-height: 390px;
  }
  .project-core {
    width: 112px;
    height: 112px;
    border-radius: 34px;
    gap: 8px;
  }
  .project-core img { width: 56px; }
  .project-core span { font-size: 7px; }
  .project-node {
    min-height: 31px;
    padding: 7px 9px;
    font-size: 8px;
  }
  .project-node--strategy { left: 1%; top: 17%; }
  .project-node--regulatory { right: 0; top: 18%; }
  .project-node--industrial { left: 1%; bottom: 14%; }
  .project-node--execution { right: 0; bottom: 15%; }
}

/* The hero expertise orbit yields once the content illustrations take over. */
.orbit-card.is-shelved {
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transform: translate3d(18px, -10px, 0) scale(.88);
}

#approach, #expertise, #contact { scroll-margin-top: 112px; }
@media (max-width: 720px) {
  #approach, #expertise, #contact { scroll-margin-top: 82px; }
}

/* ========================================================================== 
   V3 refinements — lighter positioning visual, living orbit, immersive CTA
   ========================================================================== */

/* Positioning: remove the dashboard feel and keep a light, graphic convergence. */
.statement-panel {
  grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
  min-height: 510px;
  background:
    radial-gradient(circle at 78% 23%, rgba(50,189,63,.075), transparent 31%),
    radial-gradient(circle at 20% 83%, rgba(21,165,234,.085), transparent 35%),
    rgba(255,255,255,.63);
  box-shadow: 0 22px 70px rgba(8,27,45,.05), inset 0 1px 0 rgba(255,255,255,.94);
}
.statement-panel::before {
  opacity: .30;
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.48) 48%, transparent 92%);
}
.statement-panel::after { display: none; }
.statement-copy::before { display: none; content: none; }
.statement-copy { padding-block: 18px; }

.board-visual {
  min-height: 410px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.statement-panel:hover .board-visual {
  border-color: transparent;
  box-shadow: none;
}
.board-visual::before {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(21,165,234,.095), rgba(50,189,63,.045) 44%, transparent 72%);
  filter: blur(18px);
  opacity: .82;
}
.board-visual::after,
.board-grid { display: none; }
.board-visual svg {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.board-soft-rings ellipse,
.board-soft-rings circle {
  fill: none;
  stroke: rgba(11,77,162,.095);
  stroke-width: 1;
  stroke-dasharray: 4 9;
  transform-box: fill-box;
  transform-origin: center;
}
.board-soft-rings ellipse:first-child { animation: board-ring-drift 22s linear infinite; }
.board-soft-rings ellipse:nth-child(2) { stroke: rgba(50,189,63,.12); animation: board-ring-drift-reverse 27s linear infinite; }
.board-soft-rings circle { stroke-dasharray: 2 11; animation: board-spin 32s linear infinite; }
.board-routes path {
  fill: none;
  stroke: url(#board-flow);
  stroke-width: 1.55;
  stroke-linecap: round;
  opacity: .64;
  stroke-dasharray: 2 8;
  animation: board-flow-dash 10s linear infinite;
}
.board-routes path:nth-child(even) { animation-direction: reverse; opacity: .50; }
.board-signals circle {
  fill: #fff;
  stroke: url(#board-flow);
  stroke-width: 1.7;
  transform-box: fill-box;
  transform-origin: center;
  animation: board-signal-pulse 3.2s ease-out infinite;
}
.board-signals circle:nth-child(2) { animation-delay: -.55s; }
.board-signals circle:nth-child(3) { animation-delay: -1.1s; }
.board-signals circle:nth-child(4) { animation-delay: -1.65s; }
.board-signals circle:nth-child(5) { animation-delay: -2.2s; }
.board-signals circle:nth-child(6) { animation-delay: -2.75s; }
.board-focus-glow { opacity: .78; }
.board-focus circle,
.board-focus path {
  fill: rgba(255,255,255,.40);
  stroke: url(#board-flow);
  stroke-width: 1.4;
}
.board-focus circle:first-child { fill: rgba(255,255,255,.20); stroke-dasharray: 5 7; animation: board-spin 18s linear infinite; transform-origin: 310px 215px; }
.board-focus circle:nth-child(2) { fill: rgba(255,255,255,.55); stroke: rgba(11,77,162,.16); }
.board-focus path { fill: rgba(255,255,255,.72); }
.board-focus .board-focus-dot { fill: #fff; stroke-width: 2; }
.board-output,
.board-output-arrow {
  fill: none;
  stroke: url(#board-flow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.board-output { stroke-dasharray: 10 9; animation: board-flow-dash 8s linear infinite; }
.board-particles circle { fill: #fff; stroke: url(#board-flow); stroke-width: 1.5; animation: board-particle 2.8s ease-in-out infinite; }
.board-particles circle:nth-child(2) { animation-delay: -.9s; }
.board-particles circle:nth-child(3) { animation-delay: -1.8s; }

@keyframes board-ring-drift { to { transform: rotate(360deg); } }
@keyframes board-ring-drift-reverse { to { transform: rotate(-360deg); } }
@keyframes board-signal-pulse {
  0%,100% { transform: scale(.86); opacity: .55; }
  48% { transform: scale(1.35); opacity: 1; }
}
@keyframes board-particle {
  0%,100% { opacity: .32; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* Orbit: logo stays fixed; labels move independently around it. */
.orbit-card.is-shelved {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translate3d(0,0,0);
}
.orbit-card .orbit-label {
  --label-x: 0px;
  --label-y: 0px;
  --label-lift: 0px;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) translate3d(var(--label-x), calc(var(--label-y) + var(--label-lift)), 0);
  will-change: transform;
}
.orbit-card .orbit-label:hover,
.orbit-card .orbit-label:focus-visible,
.orbit-card .orbit-label.is-active {
  --label-lift: -2px;
  transform: translate(-50%, -50%) translate3d(var(--label-x), calc(var(--label-y) + var(--label-lift)), 0);
}
.orbit-card .label-pharma,
.orbit-card .label-medtech,
.orbit-card .label-health,
.orbit-card .label-quality,
.orbit-card .label-regulatory,
.orbit-card .label-regulatory:hover,
.orbit-card .label-regulatory:focus-visible,
.orbit-card .label-regulatory.is-active {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) translate3d(var(--label-x), calc(var(--label-y) + var(--label-lift)), 0);
}
.orbit-card:not(.is-docked) .label-detail {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% + 9px);
  transform: translate(-50%, 7px) scale(.96);
  transform-origin: bottom center;
}
.orbit-card:not(.is-docked) .orbit-label:hover .label-detail,
.orbit-card:not(.is-docked) .orbit-label:focus-visible .label-detail,
.orbit-card:not(.is-docked) .orbit-label.is-active .label-detail {
  transform: translate(-50%, 0) scale(1);
}
.orbit-card.is-docked .label-detail,
.orbit-card.is-docked .label-regulatory .label-detail,
.orbit-card.is-docked .label-medtech .label-detail,
.orbit-card.is-docked .label-health .label-detail,
.orbit-card.is-docked .label-pharma .label-detail,
.orbit-card.is-docked .label-quality .label-detail {
  left: auto;
  right: calc(100% + 10px);
  top: 50%;
  bottom: auto;
  transform: translate(8px, -50%) scale(.96);
  transform-origin: right center;
}
.orbit-card.is-docked .orbit-label:hover .label-detail,
.orbit-card.is-docked .orbit-label:focus-visible .label-detail,
.orbit-card.is-docked .orbit-label.is-active .label-detail {
  transform: translate(0, -50%) scale(1);
}

/* Final CTA can grow beyond the content column until it becomes viewport-sized. */
.contact-section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: visible;
}
.contact-panel {
  --contact-expand: 0;
  width: min(calc(100vw - 48px), var(--max));
  margin-inline: auto;
  will-change: width, min-height, border-radius;
  transition: box-shadow .35s ease, background .35s ease;
}
.contact-panel.is-expanded {
  box-shadow: 0 40px 110px rgba(8,27,45,.22);
}

/* Footer with legal navigation. */
.site-footer {
  grid-template-columns: auto 1fr auto auto;
}
.footer-link {
  color: #667784;
  text-decoration: none;
  font-weight: 700;
  transition: color .2s ease;
}
.footer-link:hover { color: var(--ink); }
.site-footer p:nth-child(2) { text-align: center; }

/* Legal notice page. */
.legal-main {
  width: min(calc(100% - 48px), 1040px);
  margin-inline: auto;
  padding: 154px 0 104px;
}
.legal-hero {
  padding: clamp(32px, 5vw, 62px);
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 34px;
  background:
    radial-gradient(circle at 83% 18%, rgba(50,189,63,.09), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(21,165,234,.10), transparent 34%),
    rgba(255,255,255,.70);
  box-shadow: 0 24px 70px rgba(8,27,45,.055);
}
.legal-hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(46px, 6vw, 76px);
  line-height: .98;
  letter-spacing: -.055em;
}
.legal-intro {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.legal-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.legal-card {
  padding: 30px;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 44px rgba(8,27,45,.035);
}
.legal-card--wide { grid-column: 1 / -1; }
.legal-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: -.025em;
}
.legal-card p,
.legal-card li {
  color: #586a78;
  font-size: 14px;
  line-height: 1.72;
}
.legal-card p { margin: 0 0 10px; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card strong { color: var(--ink); }
.legal-card a { color: var(--blue); }
.legal-todo {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,184,0,.10);
  color: #8b6500;
  font-size: 11px;
  font-weight: 800;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

@media (max-width: 1080px) {
  .statement-panel { grid-template-columns: 1fr; }
  .board-visual { min-height: 360px; }
}

@media (max-width: 720px) {
  .statement-panel { min-height: auto; }
  .board-visual { min-height: 310px; margin-top: 6px; }
  .contact-panel { width: calc(100vw - 28px); }
  .site-footer { grid-template-columns: 1fr; gap: 16px; }
  .site-footer p:nth-child(2),
  .site-footer .copyright { text-align: left; }
  .legal-main { width: min(calc(100% - 28px), 1040px); padding-top: 126px; padding-bottom: 76px; }
  .legal-hero { padding: 28px 22px; border-radius: 28px; }
  .legal-content { grid-template-columns: 1fr; }
  .legal-card--wide { grid-column: auto; }
  .legal-card { padding: 24px 22px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .board-soft-rings *,
  .board-routes *,
  .board-signals *,
  .board-particles * { animation: none !important; }
}

/* ========================================================================== 
   V4 refinements — woven positioning visual + legal page polish
   ========================================================================== */

/* Positioning illustration: many constraints and workstreams weave together
   before resolving into the PackAbility mark. No text is embedded in the visual. */
.weave-visual {
  --board-shift-x: 0px;
  --board-shift-y: 0px;
  display: grid;
  place-items: center;
  min-height: 420px;
  transform: translate3d(var(--board-shift-x), var(--board-shift-y), 0);
  transition: transform .42s cubic-bezier(.2,.75,.2,1);
}
.weave-visual::before {
  width: 390px;
  height: 390px;
  opacity: .72;
  background: radial-gradient(circle, rgba(21,165,234,.10), rgba(50,189,63,.055) 48%, transparent 72%);
  animation: weave-aura 7s ease-in-out infinite;
}
.weave-visual svg {
  width: min(100%, 650px);
  height: auto;
  max-height: 430px;
  overflow: visible;
}
.weave-orbits ellipse,
.weave-orbits circle {
  fill: none;
  stroke: rgba(8,27,45,.075);
  stroke-width: 1;
  stroke-dasharray: 3 12;
  vector-effect: non-scaling-stroke;
  transform-origin: 320px 220px;
}
.weave-orbits ellipse:first-child { animation: weave-orbit 26s linear infinite; }
.weave-orbits ellipse:nth-child(2) { animation: weave-orbit-reverse 31s linear infinite; stroke: rgba(50,189,63,.095); }
.weave-orbits circle { animation: weave-orbit 38s linear infinite; stroke-dasharray: 1 13; }

.weave-strands path,
.weave-crossings path {
  fill: none;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 8 10;
  animation: weave-flow 8.5s linear infinite;
}
.weave-strands--blue path { stroke: url(#weave-blue); opacity: .68; }
.weave-strands--green path { stroke: url(#weave-green); opacity: .64; animation-direction: reverse; }
.weave-crossings path {
  stroke: rgba(21,165,234,.21);
  stroke-width: 1.3;
  stroke-dasharray: 3 9;
  opacity: .72;
  animation-duration: 13s;
}
.weave-crossings path:nth-child(even) {
  stroke: rgba(50,189,63,.20);
  animation-direction: reverse;
}
.weave-nodes circle {
  fill: #fff;
  stroke: url(#weave-green);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  animation: weave-node 3.4s ease-out infinite;
}
.weave-nodes circle:nth-child(2n) { animation-delay: -.85s; }
.weave-nodes circle:nth-child(3n) { animation-delay: -1.7s; }
.weave-nodes circle:nth-child(5n) { animation-delay: -2.55s; }
.weave-core-glow { opacity: .86; }
.weave-core-rings circle {
  fill: rgba(255,255,255,.30);
  stroke: rgba(11,77,162,.10);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.weave-core-rings circle:first-child {
  stroke-dasharray: 5 8;
  animation: weave-orbit 19s linear infinite;
  transform-origin: 320px 220px;
}
.weave-core-rings circle:nth-child(2) {
  fill: rgba(255,255,255,.60);
  stroke: rgba(50,189,63,.11);
}
.weave-logo {
  filter: drop-shadow(0 15px 24px rgba(8,27,45,.14));
  transform-origin: 320px 220px;
  animation: weave-logo-breathe 5.8s ease-in-out infinite;
}
@keyframes weave-flow { to { stroke-dashoffset: -144; } }
@keyframes weave-orbit { to { transform: rotate(360deg); } }
@keyframes weave-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes weave-node {
  0%,100% { opacity: .42; transform: scale(.84); }
  52% { opacity: 1; transform: scale(1.22); }
}
@keyframes weave-logo-breathe {
  0%,100% { transform: scale(.985); opacity: .96; }
  50% { transform: scale(1.025); opacity: 1; }
}
@keyframes weave-aura {
  0%,100% { transform: scale(.92); opacity: .58; }
  50% { transform: scale(1.08); opacity: .86; }
}

/* Legal page: use a real contact action instead of exposing the email address. */
.legal-card--identity { align-self: stretch; }
.legal-contact-button {
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(8,27,45,.10);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 10px 28px rgba(8,27,45,.12);
  font: inherit;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.legal-contact-button:hover {
  transform: translateY(-1px);
  background: #102d46;
  box-shadow: 0 14px 34px rgba(8,27,45,.17);
}
.legal-contact-button--compact {
  width: auto;
  min-width: 190px;
  margin: 16px 0 20px;
}

@media (max-width: 720px) {
  /* The positioning copy is critical content: do not gate it behind a reveal
     animation on small screens. This also prevents intermittent invisible text
     when mobile browsers resize their visual viewport while scrolling. */
  .statement.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .weave-visual {
    min-height: 300px;
    margin-top: 2px;
  }
  .weave-visual svg {
    width: 112%;
    max-width: 560px;
    max-height: 320px;
  }
  .weave-strands path,
  .weave-crossings path { stroke-width: 1.75; }
  .weave-logo { animation-duration: 7s; }
}

@media (prefers-reduced-motion: reduce) {
  .weave-orbits *,
  .weave-strands *,
  .weave-crossings *,
  .weave-nodes *,
  .weave-core-rings *,
  .weave-logo { animation: none !important; }
}

/* SVG transform anchoring for the woven illustration. */
.weave-nodes circle,
.weave-logo {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes weave-aura {
  0%,100% { transform: translate(-50%, -50%) scale(.92); opacity: .58; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .86; }
}


/* ==========================================================================
   V6 — austere legal-notice modal
   ========================================================================== */
.footer-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

body.legal-modal-open {
  overflow: hidden;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.legal-modal[hidden] {
  display: none;
}

.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 14, 23, .46);
}

.legal-modal__panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(84vh, 860px);
  overflow-y: auto;
  padding: 30px 32px 34px;
  border: 1px solid rgba(8, 27, 45, .16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .20);
  color: var(--ink);
}

.legal-modal__panel:focus {
  outline: none;
}

.legal-modal__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.legal-modal__header h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.02em;
}

.legal-modal__close,
.legal-modal__contact {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.legal-modal__content {
  padding-top: 4px;
}

.legal-modal__content h3 {
  margin: 26px 0 8px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

.legal-modal__content p {
  margin: 0 0 8px;
  color: #455867;
  font-size: 13.5px;
  line-height: 1.7;
}

.legal-modal__contact {
  display: inline-block;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .legal-modal { padding: 10px; }
  .legal-modal__panel {
    width: 100%;
    max-height: calc(100svh - 20px);
    padding: 22px 20px 26px;
    border-radius: 6px;
  }
  .legal-modal__header { align-items: center; gap: 14px; }
  .legal-modal__header h2 { font-size: 21px; }
  .legal-modal__content h3 { margin-top: 23px; }
}


/* V7 desktop cursor - green element from the PackAbility favicon. */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  html,
  body,
  body * {
    cursor: url("assets/cursor-green-shadow.png") 16 2, auto !important;
  }
}


/* ========================================================================== 
   V8 — pointer-responsive polish (desktop fine pointers only)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .statement h2,
  .section-heading h2,
  .contact-panel h2 {
    --heading-x: 50%;
    --heading-y: 50%;
    --heading-base: #081b2d;
    background-image: radial-gradient(
      circle 220px at var(--heading-x) var(--heading-y),
      #0b4da2 0%,
      #15a5ea 28%,
      #32bd3f 61%,
      var(--heading-base) 100%
    );
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color .18s ease, filter .22s ease;
  }

  .contact-panel h2 { --heading-base: #ffffff; }

  .statement h2:not(:hover),
  .section-heading h2:not(:hover),
  .contact-panel h2:not(:hover) {
    background-image: none;
  }

  .statement h2:hover,
  .section-heading h2:hover,
  .contact-panel h2:hover {
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: saturate(1.04);
  }

  .expertise-visual {
    --card-light-x: 50%;
    --card-light-y: 50%;
    --visual-tilt-x: 0deg;
    --visual-tilt-y: 0deg;
  }

  .expertise-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
      radial-gradient(
        circle 170px at var(--card-light-x) var(--card-light-y),
        rgba(21,165,234,.15) 0%,
        rgba(50,189,63,.075) 39%,
        rgba(255,255,255,.03) 58%,
        transparent 74%
      );
    transition: opacity .24s ease;
    mix-blend-mode: multiply;
  }

  .expertise-card:hover .expertise-visual {
    transform:
      translateY(-2px)
      scale(1.008)
      perspective(900px)
      rotateX(var(--visual-tilt-x))
      rotateY(var(--visual-tilt-y));
  }

  .expertise-card:hover .expertise-visual::after { opacity: 1; }

  .button-primary,
  .contact-link,
  .nav a,
  .legal-modal__close {
    will-change: transform;
  }

  .button-primary:active,
  .contact-link:active,
  .nav a:active,
  .legal-modal__close:active {
    transform: translateY(1px) scale(.985);
  }
}

/* ========================================================================== 
   V9 — seamless page loop
   The first hero is mirrored after the footer as a visual buffer. Once that
   mirrored hero reaches the top of the viewport, JavaScript silently maps the
   scroll position back to the real hero so the page can continue indefinitely.
   ========================================================================== */
.page-loop-buffer {
  position: relative;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow-anchor: none;
}

.page-loop-buffer .hero {
  pointer-events: none;
}

.page-loop-buffer a,
.page-loop-buffer button {
  pointer-events: none;
}

/* ==========================================================================
   V10 — interaction system, compact header and 3D expertise universe
   ========================================================================== */

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

/* Header: full lock-up at the opening, then a tighter PA mark once the page is in motion. */
.brand {
  position: relative;
  width: 226px;
  min-height: 48px;
  transition: width .45s cubic-bezier(.2,.75,.2,1);
}
.brand-lockup {
  position: relative;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.brand img { max-width: none; }
.brand-full {
  width: 226px !important;
  height: auto;
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: left center;
  transition: opacity .28s ease, transform .42s cubic-bezier(.2,.75,.2,1), filter .3s ease;
}
.brand-mark {
  position: absolute;
  left: 0;
  top: 50%;
  width: 47px !important;
  height: 47px !important;
  object-fit: contain;
  opacity: 0;
  transform: translateY(-50%) scale(.62) rotate(-7deg);
  transform-origin: center;
  filter: drop-shadow(0 7px 12px rgba(8,27,45,.10));
  transition: opacity .24s ease .04s, transform .42s cubic-bezier(.2,.75,.2,1);
}

@media (min-width: 721px) {
  .site-header {
    transition: width .45s cubic-bezier(.2,.75,.2,1), min-height .35s ease, padding .35s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .site-header.is-compact {
    width: min(calc(100% - 32px), 920px);
    min-height: 62px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .site-header.is-compact .brand { width: 52px; }
  .site-header.is-compact .brand-full {
    opacity: 0;
    transform: translate3d(-10px,0,0) scale(.88);
    pointer-events: none;
  }
  .site-header.is-compact .brand-mark {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
}

.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 7px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-bright), var(--green));
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;
  transition: opacity .22s ease, transform .34s cubic-bezier(.2,.75,.2,1);
}
.nav a.is-active-section::after {
  opacity: .88;
  transform: scaleX(1);
}
.nav .nav-contact::after { bottom: 5px; background: linear-gradient(90deg, rgba(255,255,255,.82), #7fdc85); }

/* Central orbit mark is now an explicit interaction target without changing its visual weight. */
.orbit-logo-trigger {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 34%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: inherit;
}
.orbit-logo-trigger .orbit-logo {
  width: 100%;
  height: auto;
  display: block;
  transition: filter .3s ease, transform .3s cubic-bezier(.2,.75,.2,1);
}
.orbit-logo-trigger:hover .orbit-logo,
.orbit-logo-trigger:focus-visible .orbit-logo {
  filter: drop-shadow(0 18px 30px rgba(8,27,45,.19)) saturate(1.08);
  transform: scale(1.055);
}
.orbit-logo-trigger:focus-visible {
  outline: 2px solid rgba(21,165,234,.32);
  outline-offset: 8px;
}

.orbit-card.is-resonating .ring-one,
.orbit-card.is-resonating .ring-two {
  border-color: rgba(21,165,234,.26);
  box-shadow: 0 0 0 10px rgba(21,165,234,.025), 0 0 0 22px rgba(50,189,63,.018);
}
.orbit-card.is-resonating .orbit-label {
  border-color: rgba(21,165,234,.16);
  box-shadow: 0 12px 34px rgba(8,27,45,.10), 0 0 0 1px rgba(50,189,63,.035);
}
.orbit-card.is-resonating .orbit-logo-trigger .orbit-logo {
  animation: orbit-resonance-mark 1.1s ease-in-out 2;
}
@keyframes orbit-resonance-mark {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.09) rotate(1.5deg); }
}

/* Magnetic elements use the independent CSS translate property so existing hover transforms still work. */
.is-magnetic {
  transition-property: translate, transform, background, border-color, box-shadow, color !important;
  transition-duration: .26s, .25s, .2s, .2s, .25s, .2s !important;
  transition-timing-function: cubic-bezier(.2,.75,.2,1), ease, ease, ease, ease, ease !important;
}

/* Hero key terms subtly wake up before the pointer actually reaches them. */
.hero-copy strong {
  display: inline-block;
  transition: color .22s ease, transform .24s cubic-bezier(.2,.75,.2,1), filter .22s ease;
}

/* Cards: local surface illumination, directional entrance and an inspection-like reveal lens. */
.expertise-card {
  --card-surface-x: 50%;
  --card-surface-y: 50%;
}

@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .expertise-card {
    background:
      radial-gradient(circle 270px at var(--card-surface-x) var(--card-surface-y), rgba(21,165,234,.075), rgba(50,189,63,.038) 38%, transparent 72%),
      rgba(255,255,255,.72);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .18s linear;
  }
  .expertise-card:hover {
    box-shadow: 0 24px 68px rgba(8,27,45,.095), inset 0 1px 0 rgba(255,255,255,.82);
  }

  .expertise-visual::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: var(--card-light-x);
    top: var(--card-light-y);
    width: 148px;
    height: 148px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    border: 1px solid rgba(255,255,255,.72);
    background: radial-gradient(circle, rgba(255,255,255,.11) 0 44%, rgba(21,165,234,.025) 64%, transparent 74%);
    box-shadow: 0 10px 34px rgba(8,27,45,.055), inset 0 0 30px rgba(21,165,234,.05);
    backdrop-filter: contrast(1.055) saturate(1.12);
    transition: opacity .22s ease, transform .3s cubic-bezier(.2,.75,.2,1);
  }
  .expertise-card:hover .expertise-visual::before {
    opacity: .94;
    transform: translate(-50%, -50%) scale(1);
  }

  html.reveal-runtime-ready .expertise-card.reveal:not(.is-visible):nth-child(odd) {
    transform: translate3d(-18px, 18px, 0) scale(.99);
  }
  html.reveal-runtime-ready .expertise-card.reveal:not(.is-visible):nth-child(even) {
    transform: translate3d(18px, 18px, 0) scale(.99);
  }
}

/* Tiny connective cues make the page feel like one continuous system rather than stacked blocks. */
.statement,
.expertise,
.contact-section { position: relative; }
.statement::after,
.expertise::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 1px;
  height: 76px;
  background: linear-gradient(to bottom, transparent, rgba(21,165,234,.20) 34%, rgba(50,189,63,.18) 68%, transparent);
  pointer-events: none;
}
.statement::before,
.expertise::before {
  content: "";
  position: absolute;
  left: calc(50% - 3px);
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-bright), var(--green));
  box-shadow: 0 0 0 7px rgba(21,165,234,.035);
  pointer-events: none;
}

.site-footer { position: relative; }
.site-footer::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21,165,234,.16), rgba(50,189,63,.14), transparent);
  opacity: .7;
  pointer-events: none;
}
.page-loop-buffer::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -70px;
  width: min(760px, 92vw);
  height: 150px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(21,165,234,.075), rgba(50,189,63,.03) 42%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}
.page-loop-buffer .hero { position: relative; z-index: 1; }

/* Full-screen expertise universe. */
body.orbit-universe-open { overflow: hidden; }
.orbit-universe {
  position: fixed;
  inset: 0;
  z-index: 1350;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.orbit-universe[hidden] { display: none; }
.orbit-universe__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(21,165,234,.10), transparent 34%),
    radial-gradient(circle at 62% 58%, rgba(50,189,63,.075), transparent 38%),
    rgba(3, 12, 21, .955);
  opacity: 0;
  transition: opacity .38s ease;
}
.orbit-universe.is-active .orbit-universe__backdrop { opacity: 1; }
.orbit-universe__panel {
  position: relative;
  width: 100vw;
  height: 100svh;
  border: 0;
  outline: none;
  perspective: 1200px;
  overflow: hidden;
}
.orbit-universe__space {
  --launch-x: 0px;
  --launch-y: 0px;
  --launch-scale: .35;
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translate3d(var(--launch-x), var(--launch-y), 0) scale(var(--launch-scale));
  transition: transform .62s cubic-bezier(.18,.82,.2,1), opacity .34s ease;
  will-change: transform, opacity;
}
.orbit-universe.is-active .orbit-universe__space {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
.orbit-universe__stars {
  position: absolute;
  inset: -12%;
  opacity: .52;
  background-image:
    radial-gradient(circle at 15% 26%, rgba(255,255,255,.60) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 72%, rgba(127,220,133,.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 19%, rgba(21,165,234,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 66%, rgba(255,255,255,.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 55% 38%, rgba(255,255,255,.38) 0 1px, transparent 1.5px);
  background-size: 210px 190px, 250px 240px, 280px 230px, 190px 260px, 330px 290px;
  animation: universe-stars-drift 24s linear infinite;
}

.orbit-universe__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  box-shadow: inset 0 0 48px rgba(21,165,234,.018);
}
.orbit-universe__plane--1 { width: min(46vw, 620px); height: min(18vw, 250px); transform: translate(-50%,-50%) rotate(-18deg); }
.orbit-universe__plane--2 { width: min(56vw, 760px); height: min(19vw, 260px); transform: translate(-50%,-50%) rotate(28deg); border-color: rgba(50,189,63,.085); }
.orbit-universe__plane--3 { width: min(64vw, 860px); height: min(25vw, 330px); transform: translate(-50%,-50%) rotate(8deg); }
.orbit-universe__plane--4 { width: min(51vw, 690px); height: min(20vw, 280px); transform: translate(-50%,-50%) rotate(-36deg); border-style: dashed; }
.orbit-universe__plane--5 { width: min(70vw, 940px); height: min(22vw, 300px); transform: translate(-50%,-50%) rotate(42deg); border-color: rgba(21,165,234,.075); border-style: dashed; }

.orbit-planet {
  position: absolute;
  z-index: 60;
  left: 50%;
  top: 50%;
  width: clamp(164px, 18vw, 238px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(-7deg) rotateY(10deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.42));
  animation: orbit-planet-float 7s ease-in-out infinite;
}
.orbit-planet__surface,
.orbit-planet__atmosphere,
.orbit-planet__shade,
.orbit-planet__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.orbit-planet__atmosphere {
  inset: -9%;
  background: radial-gradient(circle, rgba(21,165,234,.18), rgba(50,189,63,.08) 38%, transparent 70%);
  filter: blur(12px);
  animation: orbit-atmosphere 4.8s ease-in-out infinite;
}
.orbit-planet__surface {
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.98) 0 13%, rgba(255,255,255,.38) 30%, transparent 48%),
    linear-gradient(145deg, #f9fdff 0%, #dff4fb 35%, #e9f8eb 68%, #badfc5 100%);
  box-shadow:
    inset -28px -24px 48px rgba(8,27,45,.19),
    inset 18px 13px 30px rgba(255,255,255,.64),
    0 0 0 1px rgba(255,255,255,.42);
}
.orbit-planet__surface::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    linear-gradient(112deg, transparent 24%, rgba(21,165,234,.15) 42%, transparent 58%),
    linear-gradient(292deg, transparent 38%, rgba(50,189,63,.14) 54%, transparent 72%);
  animation: orbit-surface-roll 11s linear infinite;
}
.orbit-planet__surface img {
  position: relative;
  z-index: 2;
  width: 69%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(8,27,45,.18)) saturate(1.08);
  transform: translateZ(28px);
}
.orbit-planet__shade {
  background: radial-gradient(circle at 30% 24%, transparent 0 38%, rgba(8,27,45,.08) 65%, rgba(3,12,21,.38) 100%);
  mix-blend-mode: multiply;
}
.orbit-planet__shine {
  inset: 9% 46% 53% 13%;
  background: radial-gradient(ellipse, rgba(255,255,255,.72), rgba(255,255,255,.08) 58%, transparent 72%);
  filter: blur(2px);
  transform: rotate(-22deg) translateZ(42px);
}

.orbit-satellite {
  position: absolute;
  left: 50%;
  top: 50%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(11, 29, 44, .64);
  box-shadow: 0 13px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(130%);
  color: rgba(255,255,255,.90);
  font-size: clamp(10px, .9vw, 13px);
  line-height: 1;
  font-weight: 780;
  letter-spacing: .025em;
  white-space: nowrap;
  will-change: transform, opacity;
}
.orbit-satellite::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-bright), #73df79);
  box-shadow: 0 0 0 5px rgba(21,165,234,.06);
}

.orbit-universe__close {
  position: absolute;
  z-index: 200;
  top: 26px;
  right: 28px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.065);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
  font: inherit;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  cursor: inherit;
  transition: background .22s ease, transform .22s ease, border-color .22s ease;
}
.orbit-universe__close:hover,
.orbit-universe__close:focus-visible {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.24);
  outline: none;
  transform: rotate(5deg) scale(1.04);
}

@keyframes orbit-planet-float {
  0%,100% { transform: translate(-50%, -50%) rotateX(-7deg) rotateY(10deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotateX(-4deg) rotateY(-8deg) translateY(-6px); }
}
@keyframes orbit-atmosphere {
  0%,100% { transform: scale(.96); opacity: .66; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes orbit-surface-roll { to { transform: translateX(22%) rotate(4deg); } }
@keyframes universe-stars-drift { to { transform: translate3d(-70px, 42px, 0); } }

@media (max-width: 720px) {
  .brand { width: 178px; min-height: 42px; }
  .brand-lockup { min-height: 42px; }
  .brand-full { width: 178px !important; }
  .brand-mark { display: none; }
  .site-header.is-compact .brand { width: 178px; }
  .site-header.is-compact .brand-full { opacity: 1; transform: none; }

  .statement::after,
  .expertise::after,
  .statement::before,
  .expertise::before { display: none; }

  .orbit-universe__close { top: 14px; right: 14px; }
  .orbit-planet { width: clamp(138px, 38vw, 180px); }
  .orbit-universe__plane--1 { width: 78vw; height: 31vw; }
  .orbit-universe__plane--2 { width: 90vw; height: 35vw; }
  .orbit-universe__plane--3 { width: 102vw; height: 42vw; }
  .orbit-universe__plane--4 { width: 84vw; height: 34vw; }
  .orbit-universe__plane--5 { width: 112vw; height: 38vw; }
  .orbit-satellite { min-height: 31px; padding: 8px 10px; font-size: 9px; }
  .orbit-satellite::before { width: 5px; height: 5px; margin-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-full,
  .brand-mark,
  .site-header,
  .orbit-universe__space,
  .orbit-universe__backdrop { transition-duration: .001ms !important; }
  .orbit-universe__stars,
  .orbit-planet,
  .orbit-planet__atmosphere,
  .orbit-planet__surface::before,
  .orbit-card.is-resonating .orbit-logo-trigger .orbit-logo { animation: none !important; }
}

@media (hover: hover) and (pointer: fine) {
  .orbit-universe__space {
    --universe-tilt-x: 0deg;
    --universe-tilt-y: 0deg;
  }
  .orbit-universe.is-active .orbit-universe__space {
    transform: translate3d(0,0,0) scale(1) rotateX(var(--universe-tilt-x)) rotateY(var(--universe-tilt-y));
  }
}

body.orbit-universe-open .orbit-card {
  opacity: 0;
  transition: opacity .16s ease;
}

/* ========================================================================== 
   V11 — refined continuity, text-only compact brand and orbit easter egg
   ========================================================================== */

/* When the header compacts, retain the PackAbility wordmark rather than the PA mark. */
.brand-wordmark {
  position: absolute;
  left: 0;
  top: 50%;
  width: 178px !important;
  height: auto;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px) scale(.94);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity .26s ease .04s, transform .42s cubic-bezier(.2,.75,.2,1);
}

@media (min-width: 721px) {
  .site-header.is-compact .brand { width: 178px; }
  .site-header.is-compact .brand-full {
    opacity: 0;
    transform: translate3d(-8px,0,0) scale(.94);
    pointer-events: none;
  }
  .site-header.is-compact .brand-wordmark {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

@media (max-width: 720px) {
  .brand-wordmark { display: none; }
}

/* The previous line-and-dot section connectors read as a separate object.
   Replace them with broad, low-contrast atmosphere so sections flow without
   introducing a visible connector. */
.statement::before,
.statement::after,
.expertise::before,
.expertise::after {
  content: none !important;
  display: none !important;
}

.expertise {
  background-image:
    radial-gradient(ellipse 72% 120px at 50% 0%, rgba(21,165,234,.042), rgba(50,189,63,.020) 42%, transparent 75%);
  background-repeat: no-repeat;
}

.contact-section {
  background-image:
    radial-gradient(ellipse 76% 145px at 50% 0%, rgba(50,189,63,.030), rgba(21,165,234,.032) 44%, transparent 76%);
  background-repeat: no-repeat;
}

/* Give the positioning headline a little more horizontal room and keep its
   cursor colour field tighter so the effect reads locally rather than across
   several lines at once. */
@media (min-width: 1081px) {
  .statement-panel {
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
  }
  .statement-copy { max-width: 650px; }
  .statement-copy h2 {
    max-width: 690px;
    font-size: clamp(38px, 4.25vw, 64px);
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .statement h2 {
    background-image: radial-gradient(
      circle 128px at var(--heading-x) var(--heading-y),
      #0b4da2 0%,
      #15a5ea 30%,
      #32bd3f 62%,
      var(--heading-base) 100%
    );
  }
}

/* Central expertise mark: a restrained glass sphere while idle. Holding the
   pointer over it for ~5 seconds makes it breathe repeatedly, then burst. */
.orbit-logo-trigger {
  isolation: isolate;
  transition: opacity .24s ease, transform .30s cubic-bezier(.2,.75,.2,1), filter .24s ease;
}

.orbit-logo-trigger::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.74);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.80) 0 11%, rgba(255,255,255,.22) 28%, transparent 46%),
    radial-gradient(circle at 58% 62%, rgba(50,189,63,.09), rgba(21,165,234,.075) 44%, rgba(255,255,255,.16) 72%);
  box-shadow:
    inset -8px -8px 18px rgba(8,27,45,.08),
    inset 6px 5px 14px rgba(255,255,255,.48),
    0 12px 28px rgba(8,27,45,.08);
  opacity: .52;
  transform: scale(.94);
  pointer-events: none;
}

.orbit-logo-trigger.is-priming::before {
  animation: orbit-sphere-prime 1s ease-in-out 5;
}

.orbit-logo-trigger.is-priming .orbit-logo {
  animation: orbit-logo-prime 1s ease-in-out 5;
}

.orbit-logo-trigger.is-exploded {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.12);
  filter: blur(2px);
  pointer-events: none;
}

.orbit-card.is-exploded .ring-two {
  border-color: rgba(50,189,63,.10);
}

.orbit-burst {
  position: absolute;
  z-index: 16;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.orbit-burst::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(21,165,234,.58);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(50,189,63,.16), 0 0 22px rgba(21,165,234,.18);
  transform: translate(-50%, -50%) scale(.25);
  opacity: .9;
  animation: orbit-burst-wave .88s cubic-bezier(.15,.8,.2,1) forwards;
}

.orbit-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--burst-size);
  height: var(--burst-size);
  border-radius: 50%;
  background: linear-gradient(135deg, #15a5ea, #59d267);
  box-shadow: 0 0 7px rgba(21,165,234,.24);
  transform: translate(-50%, -50%) scale(1);
  opacity: .95;
  animation: orbit-burst-particle .82s cubic-bezier(.12,.74,.2,1) var(--burst-delay) forwards;
}

@keyframes orbit-sphere-prime {
  0%,100% { transform: scale(.94); opacity: .52; }
  48% { transform: scale(1.22); opacity: .82; box-shadow: inset -8px -8px 18px rgba(8,27,45,.07), inset 6px 5px 14px rgba(255,255,255,.54), 0 18px 38px rgba(21,165,234,.13); }
}

@keyframes orbit-logo-prime {
  0%,100% { transform: scale(1); filter: drop-shadow(0 18px 26px rgba(8,27,45,.14)); }
  48% { transform: scale(1.13); filter: drop-shadow(0 21px 31px rgba(8,27,45,.18)) saturate(1.10); }
}

@keyframes orbit-burst-wave {
  0% { transform: translate(-50%, -50%) scale(.25); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(5.3); opacity: 0; }
}

@keyframes orbit-burst-particle {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .95; }
  72% { opacity: .78; }
  100% { transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-wordmark { transition-duration: .001ms !important; }
  .orbit-logo-trigger.is-priming::before,
  .orbit-logo-trigger.is-priming .orbit-logo,
  .orbit-burst::before,
  .orbit-burst i { animation: none !important; }
}


/* ========================================================================== 
   V12 — full-sphere easter egg + single-orbit seamless loop
   ========================================================================== */

/* The visual sphere is now its own layer. This lets the entire circular body,
   rings and PA mark breathe / burst together while the satellite labels remain
   independent and continue orbiting. */
.orbit-card,
.orbit-card.is-docked {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.orbit-card::before,
.orbit-card.is-docked::after {
  content: none !important;
  display: none !important;
}

.orbit-sphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 22%, rgba(255,255,255,.34) 22.2% 38%, transparent 38.2%);
  transform: scale(1);
  transform-origin: center;
  filter: none;
  opacity: 1;
  cursor: inherit;
  transition:
    opacity .36s ease,
    transform .48s cubic-bezier(.18,.76,.18,1),
    filter .36s ease,
    background .32s ease,
    box-shadow .32s ease;
  will-change: transform, opacity, filter;
}

.orbit-sphere::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(8,27,45,.09);
  box-shadow: inset 0 0 60px rgba(21,165,234,.035);
  pointer-events: none;
}

.orbit-sphere::after {
  content: "";
  position: absolute;
  inset: -7%;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(12px);
  transition: opacity .28s ease;
  pointer-events: none;
}

.orbit-card.is-docked .orbit-sphere {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 22%, rgba(255,255,255,.58) 22.2% 38%, rgba(248,252,253,.28) 38.2% 100%);
  box-shadow: 0 22px 65px rgba(8,27,45,.12);
  backdrop-filter: blur(16px) saturate(140%);
}

.orbit-card.is-docked .orbit-sphere::after { opacity: 1; }

/* The old V11 mini-bubble belonged only to the favicon. The full sphere itself
   now carries that material treatment, so the inner bubble is deliberately gone. */
.orbit-logo-trigger::before { content: none !important; }

.orbit-sphere.is-priming {
  animation: orbit-whole-sphere-prime 1s ease-in-out 5;
}

.orbit-sphere.is-priming .orbit-logo {
  animation: orbit-logo-prime-v12 1s ease-in-out 5;
}

.orbit-sphere.is-exploded {
  opacity: 0;
  transform: scale(.16);
  filter: blur(9px) saturate(1.2);
  pointer-events: none;
}

/* The satellites are not part of the destructible sphere. They keep moving
   around the empty centre until the next full page cycle regenerates it. */
.orbit-card.is-exploded .orbit-label {
  opacity: 1;
  visibility: visible;
}

/* Hide the live fixed expertise system while the cloned bridge hero is in the
   viewport. This prevents the old exploded orbit from sitting on top of the
   fresh sphere that represents the next cycle. */
.orbit-card.is-loop-suppressed {
  display: none !important;
  pointer-events: none !important;
}

/* The explosion now visually matches the diameter of the sphere rather than
   looking like a small favicon pop. */
.orbit-burst::before {
  width: 52px;
  height: 52px;
  border-width: 1.5px;
  box-shadow:
    0 0 0 1px rgba(50,189,63,.20),
    0 0 34px rgba(21,165,234,.24),
    inset 0 0 18px rgba(255,255,255,.20);
  animation: orbit-burst-wave-v12 1.05s cubic-bezier(.12,.78,.16,1) forwards;
}

.orbit-burst i {
  animation: orbit-burst-particle-v12 1.05s cubic-bezier(.10,.72,.18,1) var(--burst-delay) forwards;
}

@keyframes orbit-whole-sphere-prime {
  0%,100% { transform: scale(1); filter: saturate(1); }
  48% { transform: scale(1.085); filter: saturate(1.08) drop-shadow(0 18px 32px rgba(21,165,234,.10)); }
}

@keyframes orbit-logo-prime-v12 {
  0%,100% { transform: scale(1); }
  48% { transform: scale(1.035); }
}

@keyframes orbit-burst-wave-v12 {
  0% { transform: translate(-50%, -50%) scale(.35); opacity: .96; }
  68% { opacity: .45; }
  100% { transform: translate(-50%, -50%) scale(8.4); opacity: 0; }
}

@keyframes orbit-burst-particle-v12 {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .96; }
  58% { opacity: .88; }
  100% { transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.08); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-sphere.is-priming,
  .orbit-sphere.is-priming .orbit-logo,
  .orbit-burst::before,
  .orbit-burst i { animation: none !important; }
}


/* ========================================================================== 
   V13 — persistent live orbit, full-system destruction and smooth loop rebirth
   ========================================================================== */

/* The cloned hero keeps the correct layout geometry but never renders a second
   expertise system. The visible orbit is always the original live element. */
.page-loop-buffer .loop-orbit-placeholder {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* While the next hero scrolls into view, the original orbit is temporarily
   positioned in viewport space and eased into the clone's natural slot. */
.orbit-card.is-loop-bridging {
  position: fixed !important;
  z-index: 92 !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  width: var(--loop-orbit-size) !important;
  transform: translate3d(var(--loop-orbit-left), var(--loop-orbit-top), 0) !important;
  transition: none !important;
}

/* As it reaches the new hero, gently return the sphere material to its normal
   in-hero appearance before the invisible scroll remap occurs. */
.orbit-card.is-loop-bridging.is-loop-settling .orbit-sphere {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 22%, rgba(255,255,255,.34) 22.2% 38%, transparent 38.2%);
  box-shadow: none;
  backdrop-filter: none;
}
.orbit-card.is-loop-bridging.is-loop-settling .orbit-sphere::after { opacity: 0; }

/* After the easter egg, the complete expertise system is gone for the rest of
   that cycle: sphere, rings, PA mark and every satellite label. The burst stays
   visible because it is a sibling overlay rather than part of those elements. */
.orbit-card.is-exploded .orbit-sphere {
  opacity: 0;
  transform: scale(.08);
  filter: blur(10px) saturate(1.25);
  pointer-events: none;
}

.orbit-card.is-exploded .orbit-label {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: blur(4px);
  pointer-events: none !important;
  transition:
    opacity .28s ease,
    filter .28s ease,
    visibility 0s linear .28s !important;
}

/* Rebirth happens only after the bridge has been completely remapped to the new
   hero. It is intentionally quick and quiet: a reappearance, not a second
   explosion in reverse. */
.orbit-card.is-reborn .orbit-sphere {
  animation: orbit-rebirth-sphere .82s cubic-bezier(.18,.78,.18,1) both;
}
.orbit-card.is-reborn .orbit-label {
  animation: orbit-rebirth-label .62s ease-out both;
}
.orbit-card.is-reborn .orbit-label:nth-of-type(2) { animation-delay: .04s; }
.orbit-card.is-reborn .orbit-label:nth-of-type(3) { animation-delay: .08s; }
.orbit-card.is-reborn .orbit-label:nth-of-type(4) { animation-delay: .12s; }
.orbit-card.is-reborn .orbit-label:nth-of-type(5) { animation-delay: .16s; }

@keyframes orbit-rebirth-sphere {
  0% { opacity: 0; transform: scale(.72); filter: blur(8px) saturate(1.15); }
  58% { opacity: 1; transform: scale(1.035); filter: blur(0) saturate(1.04); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes orbit-rebirth-label {
  0% { opacity: 0; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0); }
}

/* V12 suppressed the original orbit while the clone was visible. V13 no longer
   uses that strategy; keeping this override guards against stale class states. */
.orbit-card.is-loop-suppressed {
  display: block !important;
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-card.is-reborn .orbit-sphere,
  .orbit-card.is-reborn .orbit-label { animation: none !important; }
}

/* ========================================================================== 
   V14 — invisible loop remap + hero glyph breathing room
   ========================================================================== */

/* The infinite-loop recentering must never inherit the site's smooth-scroll
   rule. The content is visually frozen for two paint frames while the native
   scroll position is moved to its equivalent point at the start of the page. */
html.is-loop-remapping {
  scroll-behavior: auto !important;
}

.loop-seam-shield {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
  contain: paint;
}

.loop-seam-shield__hero {
  position: absolute !important;
  top: var(--loop-seam-top) !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

.loop-seam-shield__hero .loop-orbit-placeholder {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* The final glyph of "executable" has a slight right-side overhang in the
   current typeface. Give the painted gradient a few extra pixels without
   changing the measured line length or triggering a new wrap. */
.gradient-text {
  padding-right: .075em;
  margin-right: -.075em;
  overflow: visible;
}


/* ========================================================================== 
   V15 — multilingual controls, LinkedIn access and language shatter transition
   ========================================================================== */

/* Header utility controls */
.nav {
  position: relative;
}

.nav a.nav-icon {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.64);
  color: #0b4da2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(12px);
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.nav .nav-icon::after { display: none; }
.nav .nav-icon svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.nav .nav-icon:hover,
.nav .nav-icon:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.96);
  border-color: rgba(11,77,162,.18);
  box-shadow: 0 10px 28px rgba(8,27,45,.09), inset 0 1px 0 rgba(255,255,255,.95);
  outline: none;
}

.language-switcher {
  position: relative;
  flex: 0 0 auto;
  z-index: 12;
}

.language-toggle {
  min-width: 58px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px 0 12px;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(12px);
  color: #304353;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .09em;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-switcher.is-open .language-toggle {
  transform: translateY(-1px);
  background: rgba(255,255,255,.97);
  border-color: rgba(11,77,162,.17);
  box-shadow: 0 10px 28px rgba(8,27,45,.09), inset 0 1px 0 rgba(255,255,255,.96);
  outline: none;
}

.language-code {
  min-width: 20px;
  text-align: center;
  background: linear-gradient(105deg, var(--blue), var(--blue-bright) 54%, var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.language-chevron {
  width: 9px;
  height: 6px;
  overflow: visible;
  transition: transform .22s cubic-bezier(.2,.75,.2,1);
}
.language-chevron path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.language-switcher.is-open .language-chevron { transform: rotate(180deg); }

.language-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 214px;
  padding: 7px;
  border: 1px solid rgba(8,27,45,.09);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 12%, rgba(50,189,63,.09), transparent 34%),
    radial-gradient(circle at 8% 94%, rgba(21,165,234,.09), transparent 38%),
    rgba(251,253,254,.96);
  box-shadow: 0 20px 55px rgba(8,27,45,.16), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(150%);
  transform-origin: top right;
  animation: language-menu-in .22s cubic-bezier(.18,.82,.2,1) both;
}
.language-menu[hidden] { display: none; }

.language-menu a {
  width: 100%;
  min-height: 39px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #415564;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.language-menu a:hover,
.language-menu a:focus-visible {
  background: rgba(11,77,162,.055);
  color: #0b4da2;
  outline: none;
  transform: translateX(2px);
}
.language-menu a.is-active {
  background: linear-gradient(90deg, rgba(21,165,234,.08), rgba(50,189,63,.07));
  color: #0a315b;
}
.language-option__code {
  width: 32px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8,27,45,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  color: #0b4da2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.language-menu a.is-active .language-option__code {
  border-color: rgba(50,189,63,.22);
  box-shadow: 0 0 0 4px rgba(50,189,63,.045);
}

@keyframes language-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.965); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Whole-page shatter / rebuild layer. */
.language-shard-layer {
  position: fixed;
  inset: 0;
  z-index: 1800;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: normal;
}
.language-shard-layer i {
  position: absolute;
  display: block;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(21,165,234,.18);
  will-change: transform, opacity;
}

html.is-language-transitioning .ambient {
  opacity: .29;
  filter: blur(78px) saturate(1.34);
  transform: scale(1.08);
  transition: opacity .22s ease, filter .22s ease, transform .42s cubic-bezier(.18,.82,.2,1);
}
html.is-language-transitioning .page-noise { opacity: .055; }
html.is-language-transitioning body { pointer-events: none; }
html.is-language-transitioning .language-shard-layer { pointer-events: none; }

@media (max-width: 720px) {
  .nav { gap: 5px; }
  .nav a:not(.nav-contact):not(.nav-linkedin) { display: none; }
  .nav .nav-linkedin { display: grid; width: 38px; height: 38px; border-radius: 12px; }
  .nav .nav-linkedin svg { width: 17px; height: 17px; }
  .language-toggle { min-width: 50px; height: 38px; padding: 0 8px 0 9px; gap: 5px; border-radius: 12px; }
  .language-menu { width: 198px; right: 0; top: calc(100% + 9px); }
  .language-menu a { min-height: 37px; }
}

@media (max-width: 520px) {
  .site-header { gap: 8px; }
  .brand,
  .site-header.is-compact .brand { width: 142px; min-height: 38px; }
  .brand-lockup { min-height: 38px; }
  .brand-full { width: 142px !important; }
  .nav .nav-contact { padding: 10px 10px; font-size: 12px; }
  .nav .nav-linkedin { width: 36px; height: 36px; }
  .language-toggle { min-width: 46px; height: 36px; padding-inline: 7px; }
  .language-chevron { width: 8px; }
}

@media (max-width: 365px) {
  .brand,
  .site-header.is-compact .brand { width: 120px; }
  .brand-full { width: 120px !important; }
  .nav { gap: 4px; }
  .nav .nav-contact { padding-inline: 8px; }
  .nav .nav-linkedin { width: 34px; height: 34px; }
  .language-toggle { min-width: 43px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .language-menu { animation: none !important; }
  .language-shard-layer { display: none !important; }
  html.is-language-transitioning .ambient { transform: none !important; }
}


/* ========================================================================== 
   V16 — multilingual SEO architecture & heading glyph safety
   ========================================================================== */

/* Tight display leading can clip descenders (g, j, p, q, y) once the text is
   background-clipped. Keep the visual rhythm tight but leave actual paint room. */
.hero h1 {
  line-height: 1.015;
  padding-bottom: .11em;
  margin-bottom: -.11em;
  overflow: visible;
}
.gradient-text {
  line-height: 1.08;
  padding-top: .025em;
  padding-bottom: .16em;
  margin-top: -.025em;
  margin-bottom: -.16em;
  overflow: visible;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.statement h2,
.section-heading h2,
.contact-panel h2 {
  line-height: 1.075;
  padding-bottom: .10em;
  margin-bottom: -.10em;
  overflow: visible;
}

/* Prevent a flash of the new language before the rebuild animation starts. */
html.language-arrival-pending body { opacity: 0; }

.language-menu a { text-decoration: none; }

@media (max-width: 720px) {
  .hero h1 { line-height: 1.03; }
  .statement h2, .section-heading h2, .contact-panel h2 { line-height: 1.09; }
}

/* ========================================================================== 
   V16.2 — mobile viewport containment + touch-safe language menu
   ========================================================================== */

/* On mobile browsers, wide animated/decorative descendants must never enlarge
   the layout viewport. Apply containment at the root, not only on body. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

main,
.site-footer,
.page-loop-buffer {
  max-width: 100%;
}

.language-toggle,
.language-menu a {
  touch-action: manipulation;
}

/* The menu is portalled to <body> on small screens. This keeps it outside the
   header's backdrop-filter/stacking context and makes touch opening reliable. */
.language-menu.is-mobile-portal {
  position: fixed;
  z-index: 2500;
  top: var(--mobile-language-menu-top, 78px);
  right: var(--mobile-language-menu-right, 8px);
  width: min(220px, calc(100dvw - 16px));
  max-height: calc(100dvh - var(--mobile-language-menu-top, 78px) - 10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform-origin: top right;
}

@media (max-width: 720px) {
  /* Use physical viewport edges instead of centring with translateX(-50%).
     This avoids sub-pixel/visual-viewport overhang on Android browsers. */
  .site-header,
  .site-header.is-scrolled,
  .site-header.is-compact {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    transform: none;
    gap: 7px;
  }

  .brand,
  .site-header.is-compact .brand {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 142px;
  }

  .brand-lockup {
    width: 100%;
    min-width: 0;
  }

  .brand-full,
  .site-header.is-compact .brand-full {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  .nav {
    flex: 0 0 auto;
    min-width: 0;
    gap: 4px;
  }

  .nav .nav-contact {
    flex: 0 0 auto;
    padding-inline: 9px;
    white-space: nowrap;
  }

  .nav .nav-linkedin,
  .language-switcher,
  .language-toggle {
    flex: 0 0 auto;
  }

  /* Long localized display copy must wrap inside the viewport even when a
     language contains longer compounds than English. */
  .hero h1,
  .statement h2,
  .section-heading h2,
  .contact-panel h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media (max-width: 390px) {
  .site-header,
  .site-header.is-scrolled,
  .site-header.is-compact {
    left: 6px;
    right: 6px;
    padding-left: 10px;
    padding-right: 8px;
    gap: 5px;
  }

  .brand,
  .site-header.is-compact .brand {
    max-width: 118px;
  }

  .nav .nav-contact {
    padding-inline: 7px;
    font-size: 11.5px;
  }

  .nav .nav-linkedin {
    width: 34px;
    height: 34px;
  }

  .language-toggle {
    min-width: 42px;
    height: 34px;
    padding-inline: 6px;
  }
}


/* ========================================================================== 
   V16.3 — reliable in-page navigation + editorial line wrapping
   ========================================================================== */

/* Native fragment navigation remains a useful no-JavaScript fallback. Keep the
   destination clear of the fixed header when #approach / #expertise is opened
   directly or when a browser performs its own fragment jump. */
#approach,
#expertise,
#contact {
  scroll-margin-top: clamp(96px, 10vw, 126px);
}

/* Editorial typography: headings are balanced, while body copy uses the
   browser's higher-quality wrapping algorithm to avoid very short final lines
   (runts). widows/orphans also protects the same copy in print/fragmented
   contexts. The page's lang attribute lets the browser use language-aware line
   breaking for EN/FR/DE/IT/ES. */
:where(
  h1, h2, h3,
  .eyebrow,
  .section-kicker,
  .label-title,
  .project-node,
  .button,
  .contact-link
) {
  text-wrap: balance;
}

:where(
  p,
  li,
  .hero-copy,
  .statement-copy p,
  .expertise-copy p,
  .contact-subcopy,
  .label-detail,
  .legal-modal__content p
) {
  text-wrap: pretty;
  orphans: 3;
  widows: 3;
}

@media (max-width: 720px) {
  #approach,
  #expertise,
  #contact {
    scroll-margin-top: 88px;
  }
}

/* ========================================================================== 
   V16.4 — mobile orbit stays inside the hero
   ========================================================================== */

/* On phones the expertise sphere is part of the hero only: it must not dock to
   the viewport or travel with the scroll. These rules are a defensive fallback
   in case an old/delayed script frame still leaves is-docked on the element. */
@media (max-width: 720px) {
  .orbit-card.is-docked {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(360px, 88vw) !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  /* Desktop uses the original live sphere as a moving bridge into the cloned
     loop hero. Mobile instead shows the clone in its natural hero position, so
     no sphere crosses the screen during scrolling or at the loop seam. */
  .page-loop-buffer .loop-orbit-placeholder,
  .loop-seam-shield__hero .loop-orbit-placeholder {
    visibility: visible !important;
    opacity: 1 !important;
  }
}



/* ========================================================================== 
   V16.6 — footer lock-up, responsive compact brand, mobile centring, no H1/H2 hyphenation + runtime fail-safe
   ========================================================================== */

/* Footer: centred PackAbility wordmark + slogan, without the PA favicon. */
.site-footer {
  min-height: 190px;
  padding-top: 38px;
  padding-bottom: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.site-footer .footer-logo {
  display: block;
  width: min(410px, 78vw);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.site-footer .footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-footer .footer-link,
.site-footer .copyright {
  text-align: center !important;
  margin: 0;
}

/* Desktop/tablet compact state: keep the PackAbility wordmark only. */
@media (min-width: 721px) {
  .brand-mark { display: none !important; }
  .site-header.is-compact .brand-wordmark {
    display: block;
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* Mobile compact state: switch from the full lock-up to the PA favicon only. */
@media (max-width: 720px) {
  .brand-mark {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
  }

  .site-header.is-compact .brand {
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    min-height: 44px;
  }
  .site-header.is-compact .brand-lockup {
    width: 44px;
    min-height: 44px;
  }
  .site-header.is-compact .brand-full {
    opacity: 0;
    transform: translate3d(-7px,0,0) scale(.88);
    pointer-events: none;
  }
  .site-header.is-compact .brand-wordmark {
    display: none !important;
    opacity: 0;
  }
  .site-header.is-compact .brand-mark {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }

  /* Positioning illustration: keep the graphic geometrically centred on phones. */
  .statement-panel .weave-visual {
    width: 100%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    transform: none !important;
  }
  .statement-panel .weave-visual svg {
    display: block;
    width: min(100%, 560px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* H1/H2 may wrap, but browsers must never insert discretionary hyphens. */
h1,
h2 {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
}
@media (max-width: 720px) {
  .hero h1,
  .statement h2,
  .section-heading h2,
  .contact-panel h2,
  .legal-modal__header h2 {
    -webkit-hyphens: none !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: break-word;
  }
}