:root {
  color-scheme: dark;
  --bg: #030816;
  --bg-soft: #0c1733;
  --surface: rgba(186, 220, 255, 0.1);
  --surface-2: rgba(255, 255, 255, 0.08);
  --text: #eef7ff;
  --muted: rgba(232, 244, 255, 0.72);
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.34);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(20, 40, 85, 0.22);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --gradient-accent: linear-gradient(135deg, rgba(131, 234, 255, 0.95), rgba(255, 163, 245, 0.95));
  --gradient-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(115, 155, 255, 0.08) 35%, rgba(32, 53, 103, 0.07) 100%);
  --max-width: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(99, 145, 255, 0.18), transparent 36%),
    radial-gradient(circle at 85% 10%, rgba(241, 118, 252, 0.17), transparent 28%),
    linear-gradient(180deg, #050c1d 0%, #020611 30%, #020611 100%);
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

.page-shell {
  position: relative;
  z-index: 2;
}

.page-main {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 32px 0 150px;
  display: grid;
  gap: 32px;
}

.page-main--home {
  padding-top: 24px;
}

.eyebrow,
.section-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(240, 247, 255, 0.86);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.ambient-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-scene__veil {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.9;
}

.ambient-scene__veil--one {
  width: 60vw;
  height: 60vw;
  top: -14vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(97, 143, 255, 0.28), transparent 62%);
  animation: driftA 22s ease-in-out infinite;
}

.ambient-scene__veil--two {
  width: 42vw;
  height: 42vw;
  right: -6vw;
  top: 14vh;
  background: radial-gradient(circle, rgba(233, 126, 255, 0.22), transparent 60%);
  animation: driftB 18s ease-in-out infinite;
}

.ambient-scene__veil--three {
  width: 48vw;
  height: 48vw;
  bottom: -18vw;
  left: 26vw;
  background: radial-gradient(circle, rgba(118, 239, 255, 0.18), transparent 58%);
  animation: driftC 26s ease-in-out infinite;
}

.ambient-scene__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 95%);
  opacity: 0.6;
  transform: perspective(900px) rotateX(72deg) translateY(16vh) scale(1.5);
}

.ambient-scene__ribbons span {
  position: absolute;
  display: block;
  width: 120vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(157, 228, 255, 0.9), rgba(255, 148, 242, 0.86), transparent);
  box-shadow: 0 0 18px rgba(146, 213, 255, 0.34);
}

.ambient-scene__ribbons span:nth-child(1) {
  top: 17vh;
  left: -10vw;
  animation: slideRibbon 18s linear infinite;
}

.ambient-scene__ribbons span:nth-child(2) {
  top: 48vh;
  left: -20vw;
  animation: slideRibbon 24s linear infinite reverse;
}

.ambient-scene__ribbons span:nth-child(3) {
  top: 76vh;
  left: -8vw;
  animation: slideRibbon 20s linear infinite;
}

.ambient-scene__marquee {
  position: absolute;
  inset-inline: -15vw;
  top: 23vh;
  overflow: hidden;
  opacity: 0.12;
  transform: rotate(-9deg);
}

.ambient-scene__marquee--reverse {
  top: auto;
  bottom: 18vh;
  transform: rotate(6deg);
  opacity: 0.1;
}

.ambient-scene__marquee div {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.ambient-scene__marquee--reverse div {
  animation-direction: reverse;
  animation-duration: 36s;
}

.ambient-scene__marquee span {
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82);
}

.ambient-scene__orbs i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.75), rgba(128, 205, 255, 0.28) 26%, rgba(118, 126, 255, 0.1) 52%, transparent 72%);
  box-shadow: 0 0 44px rgba(151, 221, 255, 0.14);
}

.ambient-scene__orbs i:nth-child(1) {
  width: 110px;
  height: 110px;
  top: 18%;
  right: 18%;
  animation: floatOrb 14s ease-in-out infinite;
}

.ambient-scene__orbs i:nth-child(2) {
  width: 58px;
  height: 58px;
  top: 62%;
  right: 9%;
  animation: floatOrb 10s ease-in-out infinite reverse;
}

.ambient-scene__orbs i:nth-child(3) {
  width: 72px;
  height: 72px;
  top: 74%;
  left: 12%;
  animation: floatOrb 16s ease-in-out infinite;
}

.ambient-scene__orbs i:nth-child(4) {
  width: 42px;
  height: 42px;
  top: 28%;
  left: 18%;
  animation: floatOrb 13s ease-in-out infinite reverse;
}

.liquid-filter-bank {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.liquid-glass {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(172, 206, 255, 0.06) 24%, rgba(86, 106, 157, 0.05) 55%, rgba(10, 18, 38, 0.05) 100%),
    rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow), var(--inner-light);
  isolation: isolate;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.28), transparent 26%),
    radial-gradient(circle at 78% 10%, rgba(167, 222, 255, 0.13), transparent 24%),
    radial-gradient(circle at 68% 82%, rgba(214, 142, 255, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  pointer-events: none;
  mix-blend-mode: screen;
}

.liquid-glass__border,
.liquid-glass__specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.liquid-glass__border {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.liquid-glass__specular {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04) 35%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 26%),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.32), transparent 18%);
  mix-blend-mode: screen;
  opacity: 0.78;
}

.liquid-glass__content {
  position: relative;
  z-index: 2;
  padding: 26px;
}

.liquid-glass--hero .liquid-glass__content {
  padding: 34px;
}

.liquid-glass--dock .liquid-glass__content {
  padding: 12px;
}

.badge-chip {
  width: fit-content;
}

.badge-chip .liquid-glass__content {
  padding: 10px 15px;
  font-size: 0.88rem;
  white-space: nowrap;
  color: rgba(241, 248, 255, 0.92);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.hero-card--lead {
  min-height: 720px;
}

.hero-copy {
  display: grid;
  align-content: start;
  gap: 20px;
  min-height: 100%;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7.2rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  max-width: 10ch;
  text-wrap: balance;
}

.hero-copy h1 span {
  background: linear-gradient(135deg, #b6f3ff 0%, #86c4ff 36%, #d688ff 76%, #ffb7e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.hero-cta,
.badge-row,
.contact-form__actions,
.contact-form__row,
.two-col-grid,
.project-grid,
.capability-grid,
.principle-grid,
.service-grid,
.timeline-grid,
.lab-grid,
.skill-level-grid,
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

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

.hero-button--primary {
  color: #02111e;
  background: linear-gradient(135deg, rgba(214, 247, 255, 0.96), rgba(172, 212, 255, 0.96), rgba(255, 189, 239, 0.95));
  box-shadow: 0 12px 24px rgba(152, 221, 255, 0.18);
}

.hero-button--secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.hero-side {
  display: grid;
  gap: 18px;
}

.profile-card {
  min-height: 320px;
}

.profile-card__monogram {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #f7fdff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(170, 215, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 18px;
}

.profile-card h2,
.content-card h3,
.capability-card h3,
.project-card strong,
.timeline-card h3,
.service-card h3,
.contact-card h3,
.lab-card h3 {
  margin: 0 0 10px;
}

.profile-card h2 {
  font-size: 2.4rem;
  line-height: 1;
}

.profile-card p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.6;
}

.profile-card ul,
.project-card ul,
.service-card ul,
.timeline-card ul,
.content-card ul,
.contact-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(236, 245, 255, 0.84);
  display: grid;
  gap: 10px;
}

.metric-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.metric-card {
  min-height: 170px;
}

.metric-card strong {
  display: block;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.06em;
  margin-bottom: 10px;
}

.metric-card span {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.metric-card small {
  color: var(--muted);
}

.section-shell {
  display: grid;
  gap: 18px;
}

.section-shell__head {
  max-width: 840px;
  display: grid;
  gap: 12px;
}

.section-shell__head h2,
.page-intro h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.section-shell__panel {
  width: 100%;
}

.page-intro {
  min-height: 250px;
}

.page-intro .liquid-glass__content {
  display: grid;
  gap: 16px;
  align-content: center;
  min-height: 250px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.project-grid--full {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card,
.capability-card,
.service-card,
.timeline-card,
.lab-card,
.content-card,
.contact-card,
.skill-bar-card,
.principle-card {
  height: 100%;
}

.project-card__poster {
  min-height: 164px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.18), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
}

.project-card__poster span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(239, 247, 255, 0.8);
}

.project-card__poster strong {
  font-size: 1.9rem;
  line-height: 1.05;
  max-width: 11ch;
}

.project-card__body {
  padding-top: 16px;
  display: grid;
  gap: 16px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d0edff;
  font-weight: 600;
}

.text-link::after {
  content: '↗';
}

.accent-teal .project-card__poster {
  background: linear-gradient(135deg, rgba(104, 238, 228, 0.24), rgba(35, 69, 116, 0.12));
}

.accent-violet .project-card__poster {
  background: linear-gradient(135deg, rgba(177, 132, 255, 0.26), rgba(41, 59, 113, 0.1));
}

.accent-amber .project-card__poster {
  background: linear-gradient(135deg, rgba(255, 204, 120, 0.26), rgba(82, 53, 16, 0.1));
}

.accent-pink .project-card__poster {
  background: linear-gradient(135deg, rgba(255, 163, 218, 0.26), rgba(105, 36, 100, 0.1));
}

.accent-cyan .project-card__poster {
  background: linear-gradient(135deg, rgba(120, 223, 255, 0.26), rgba(26, 51, 90, 0.1));
}

.accent-lime .project-card__poster {
  background: linear-gradient(135deg, rgba(197, 255, 146, 0.24), rgba(38, 66, 26, 0.1));
}

.capability-grid,
.service-grid,
.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.capability-card h3,
.service-card h3,
.lab-card h3,
.contact-card h3,
.content-card h3 {
  font-size: 1.25rem;
}

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-cloud span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(241, 247, 255, 0.9);
  font-size: 0.88rem;
}

.two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.principle-card {
  min-height: 150px;
  display: flex;
  align-items: center;
}

.principle-card p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(242, 247, 255, 0.9);
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.timeline-grid--page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timeline-card__year {
  display: inline-flex;
  min-width: 88px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 16px;
  font-weight: 700;
}

.skill-level-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.skill-bar-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.skill-bar-card__head span {
  font-weight: 600;
}

.skill-bar-card__head strong {
  font-size: 1.8rem;
}

.skill-bar-track {
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(159, 232, 255, 0.94), rgba(121, 177, 255, 0.94), rgba(235, 151, 255, 0.92));
  box-shadow: 0 0 18px rgba(149, 224, 255, 0.24);
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
}

.contact-list {
  list-style: none;
  padding: 0;
  gap: 18px;
}

.contact-list li {
  display: grid;
  gap: 4px;
}

.contact-list span {
  color: rgba(226, 239, 255, 0.58);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact-list a,
.contact-list strong {
  font-size: 1.08rem;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.contact-form label {
  display: grid;
  gap: 8px;
}

.contact-form span {
  font-size: 0.92rem;
  color: rgba(233, 243, 255, 0.84);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  padding: 14px 16px;
  outline: none;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(230, 239, 255, 0.44);
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-status {
  min-height: 24px;
  margin: 0;
  color: rgba(230, 243, 255, 0.82);
}

.form-status.success {
  color: #b7ffdd;
}

.form-status.error {
  color: #ffc2cf;
}

.liquid-dock-wrap {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 1020px);
  z-index: 50;
}

.liquid-dock {
  width: 100%;
}

.liquid-dock__nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.liquid-dock__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(241, 247, 255, 0.82);
  transition: transform 180ms ease, color 180ms ease;
}

.liquid-dock__link:hover {
  transform: translateY(-1px);
  color: #fff;
}

.liquid-dock__link.is-active {
  color: #01111f;
  font-weight: 700;
}

.liquid-dock__link.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(235, 248, 255, 0.92), rgba(185, 224, 255, 0.88), rgba(236, 197, 255, 0.9));
  box-shadow: 0 10px 26px rgba(188, 228, 255, 0.14);
  z-index: -1;
}

@keyframes driftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
}

@keyframes driftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vw, 6vh, 0) scale(1.1); }
}

@keyframes driftC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2vw, -6vh, 0) scale(0.96); }
}

@keyframes slideRibbon {
  from { transform: translateX(-15vw); }
  to { transform: translateX(12vw); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-45%); }
}

@keyframes floatOrb {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -18px, 0); }
}

@media (max-width: 1120px) {
  .hero-grid,
  .contact-grid,
  .two-col-grid {
    grid-template-columns: 1fr;
  }

  .project-grid,
  .project-grid--full,
  .capability-grid,
  .service-grid,
  .timeline-grid,
  .timeline-grid--page,
  .lab-grid,
  .principle-grid,
  .skill-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .page-main {
    width: min(calc(100% - 18px), var(--max-width));
    padding-bottom: 178px;
  }

  .hero-copy h1 {
    max-width: 100%;
  }

  .project-grid,
  .project-grid--full,
  .capability-grid,
  .service-grid,
  .timeline-grid,
  .timeline-grid--page,
  .lab-grid,
  .principle-grid,
  .skill-level-grid,
  .metric-stack,
  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .liquid-dock__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .liquid-dock__link {
    min-height: 46px;
    font-size: 0.92rem;
  }
}

@media (max-width: 580px) {
  .page-main {
    padding-top: 16px;
  }

  .liquid-glass__content,
  .liquid-glass--hero .liquid-glass__content {
    padding: 20px;
  }

  .hero-copy h1 {
    font-size: clamp(2.8rem, 15vw, 4.2rem);
  }

  .section-shell__head h2,
  .page-intro h1 {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  .liquid-dock-wrap {
    width: min(calc(100% - 12px), 1020px);
    bottom: 12px;
  }

  .liquid-dock__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* V6: forest-background optical liquid glass correction */
:root {
  --forest-glass-fill: rgba(238, 247, 255, 0.24);
  --forest-glass-fill-strong: rgba(246, 251, 255, 0.34);
  --forest-edge: rgba(255, 255, 255, 0.66);
  --forest-text: #f7fbff;
  --forest-muted: rgba(244, 250, 255, 0.78);
}

body {
  color: var(--forest-text);
  background: #07110c;
}

.forest-backdrop {
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(3, 8, 10, 0.06), rgba(2, 8, 12, 0.45) 58%, rgba(2, 6, 10, 0.72)),
    radial-gradient(circle at 22% 18%, rgba(255, 212, 86, 0.14), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(255, 95, 47, 0.12), transparent 24%),
    url('../images/liquid-forest-bg.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center;
  transform: scale(1.035);
  animation: forestBreath 24s ease-in-out infinite alternate;
}

.forest-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 247, 207, 0.16), transparent 22%),
    linear-gradient(90deg, rgba(33, 92, 108, 0.18), transparent 28%, rgba(130, 33, 18, 0.16) 72%, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22));
  mix-blend-mode: screen;
}

.forest-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 110px 110px;
  opacity: 0.16;
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 76%, transparent 100%);
}

.ambient-scene {
  z-index: -4;
  opacity: 1;
  mix-blend-mode: screen;
}

.ambient-scene__water-shimmer {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 48%;
  background:
    repeating-linear-gradient(176deg, rgba(255,255,255,0.00) 0 20px, rgba(166,230,255,0.13) 22px 24px, rgba(255,255,255,0.00) 28px 48px),
    radial-gradient(ellipse at 50% 70%, rgba(183, 236, 255, 0.18), transparent 64%);
  filter: blur(0.4px);
  animation: waterShimmer 9s linear infinite;
}

.ambient-scene__mist {
  position: absolute;
  width: 58vw;
  height: 28vw;
  border-radius: 999px;
  filter: blur(38px);
  opacity: 0.36;
  background: radial-gradient(circle, rgba(223, 247, 255, 0.38), transparent 66%);
}

.ambient-scene__mist--one {
  top: 12%;
  left: 5%;
  animation: mistMove 23s ease-in-out infinite;
}

.ambient-scene__mist--two {
  top: 28%;
  right: -12%;
  animation: mistMove 29s ease-in-out infinite reverse;
}

.ambient-scene__light-rays span {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 120%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,247,210,0.18), rgba(255,255,255,0));
  transform-origin: top;
  filter: blur(1px);
}

.ambient-scene__light-rays span:nth-child(1) { left: 34%; transform: rotate(16deg); }
.ambient-scene__light-rays span:nth-child(2) { left: 47%; transform: rotate(10deg); opacity: .8; }
.ambient-scene__light-rays span:nth-child(3) { left: 62%; transform: rotate(22deg); opacity: .55; }

.ambient-scene__glass-lines span {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,248,255,.45), rgba(255,255,255,.26), transparent);
  box-shadow: 0 0 12px rgba(206,244,255,.24);
}

.ambient-scene__glass-lines span:nth-child(1) { top: 22%; animation: glassLine 14s linear infinite; }
.ambient-scene__glass-lines span:nth-child(2) { top: 42%; animation: glassLine 19s linear infinite reverse; }
.ambient-scene__glass-lines span:nth-child(3) { top: 66%; animation: glassLine 17s linear infinite; }
.ambient-scene__glass-lines span:nth-child(4) { top: 82%; animation: glassLine 23s linear infinite reverse; }

.ambient-scene__floating-bubbles i {
  position: absolute;
  display: block;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.72), rgba(255,255,255,.12) 22%, rgba(155,226,255,.09) 55%, transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 10px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}

.ambient-scene__floating-bubbles i:nth-child(1) { width: 64px; height: 64px; left: 9%; top: 18%; animation: bubbleFloat 18s ease-in-out infinite; }
.ambient-scene__floating-bubbles i:nth-child(2) { width: 92px; height: 92px; right: 10%; top: 24%; animation: bubbleFloat 21s ease-in-out infinite reverse; }
.ambient-scene__floating-bubbles i:nth-child(3) { width: 46px; height: 46px; left: 72%; top: 64%; animation: bubbleFloat 16s ease-in-out infinite; }
.ambient-scene__floating-bubbles i:nth-child(4) { width: 78px; height: 78px; left: 16%; top: 72%; animation: bubbleFloat 24s ease-in-out infinite reverse; }
.ambient-scene__floating-bubbles i:nth-child(5) { width: 36px; height: 36px; right: 24%; top: 78%; animation: bubbleFloat 14s ease-in-out infinite; }

.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.46), rgba(255,255,255,0.18) 34%, rgba(186,222,239,0.12) 72%, rgba(255,255,255,0.18)),
    rgba(232, 245, 255, 0.18) !important;
  border-color: var(--forest-edge);
  box-shadow:
    0 24px 70px rgba(2, 8, 10, 0.34),
    0 8px 24px rgba(4, 20, 28, 0.18),
    inset 0 1px 1px rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.26),
    inset 1px 0 0 rgba(255,255,255,0.20);
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,0.72), transparent 16%),
    radial-gradient(circle at 88% 8%, rgba(210,244,255,0.30), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 38%, rgba(255,255,255,0.10));
  opacity: 0.82;
}

.liquid-glass__specular {
  opacity: 0.66;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.95), rgba(255,255,255,0.18) 24%, rgba(255,255,255,0.02) 42%, transparent 64%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.8), transparent 13%),
    radial-gradient(circle at 82% 6%, rgba(189,239,255,0.38), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.34), transparent 27%);
}

.liquid-glass__border {
  border-color: rgba(255,255,255,0.72);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(255,255,255,.32),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(255,255,255,.18);
}

.hero-card--lead,
.section-shell__panel,
.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14) 42%, rgba(218,242,255,0.10)),
    rgba(245,250,255,0.16) !important;
}

.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.profile-card h2,
.metric-card strong,
.project-card__poster strong,
.content-card h3,
.service-card h3,
.capability-card h3,
.timeline-card h3,
.contact-card h3,
.lab-card h3,
.skill-bar-card__head span,
.skill-bar-card__head strong {
  color: rgba(249, 253, 255, 0.96);
  text-shadow: 0 2px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.12);
}

.hero-copy h1 span {
  background: linear-gradient(135deg, #fff7c8 0%, #c6f7ff 36%, #ffd0a0 72%, #ff8f70 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small {
  color: rgba(243, 250, 255, 0.80);
  text-shadow: 0 1px 10px rgba(0,0,0,.24);
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year,
.chip-cloud span,
.badge-chip .liquid-glass__content {
  color: rgba(248,253,255,.92);
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.56);
  text-shadow: 0 1px 10px rgba(0,0,0,.2);
}

.project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.14)),
    rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.56);
}

.project-card__poster span,
.contact-form span,
.contact-list span {
  color: rgba(248,253,255,.70);
}

.project-card ul,
.service-card ul,
.timeline-card ul,
.content-card ul,
.contact-list {
  color: rgba(243, 250, 255, 0.82);
}

.hero-button--secondary,
.contact-form input,
.contact-form select,
.contact-form textarea,
.chip-cloud span {
  background: rgba(255,255,255,.22);
  color: rgba(250,253,255,.94);
  border-color: rgba(255,255,255,.58);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(248,253,255,.56);
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.20) 42%, rgba(255,255,255,.14)),
    rgba(244, 251, 255, 0.22) !important;
}

.liquid-dock__link {
  color: rgba(247,252,255,.86);
  text-shadow: 0 1px 8px rgba(0,0,0,.24);
}

.liquid-dock__link.is-active {
  color: rgba(5, 18, 20, 0.94);
  text-shadow: none;
}

.liquid-dock__link.is-active::before {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(205,241,255,.86), rgba(255,218,190,.82));
}

.skill-bar-track {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.56);
}

.skill-bar-fill {
  background: linear-gradient(90deg, rgba(255,238,171,.95), rgba(142,232,255,.95), rgba(255,153,104,.92));
}

@keyframes forestBreath {
  from { transform: scale(1.035) translate3d(0,0,0); filter: saturate(1.04) contrast(1.03) brightness(.96); }
  to { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); filter: saturate(1.12) contrast(1.05) brightness(1); }
}

@keyframes waterShimmer {
  from { transform: translateX(-5%); }
  to { transform: translateX(5%); }
}

@keyframes mistMove {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(8vw, 3vh, 0) scale(1.14); }
}

@keyframes glassLine {
  from { transform: translateX(-8%); }
  to { transform: translateX(8%); }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-22px,0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .forest-backdrop,
  .ambient-scene__water-shimmer,
  .ambient-scene__mist,
  .ambient-scene__glass-lines span,
  .ambient-scene__floating-bubbles i {
    animation: none;
  }
}


/* V7: calibrated medium liquid-glass transparency + hydration-safe visual balance */
:root {
  --glass-alpha-core: 0.18;
  --glass-alpha-panel: 0.20;
  --glass-alpha-card: 0.17;
  --glass-alpha-dock: 0.20;
  --glass-edge-bright: rgba(255,255,255,0.72);
}

/* Let the forest show through clearly, but keep content readable. */
.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.13) 36%, rgba(186,222,239,0.09) 72%, rgba(255,255,255,0.13)),
    rgba(232, 245, 255, var(--glass-alpha-core)) !important;
  border-color: var(--glass-edge-bright);
  box-shadow:
    0 28px 78px rgba(2, 8, 10, 0.28),
    0 10px 26px rgba(4, 20, 28, 0.16),
    inset 0 1px 1px rgba(255,255,255,0.76),
    inset 0 -1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.18);
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.36), rgba(255,255,255,0.13) 42%, rgba(218,242,255,0.08)),
    rgba(245,250,255,var(--glass-alpha-panel)) !important;
}

.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.32), rgba(255,255,255,0.11) 42%, rgba(218,242,255,0.08)),
    rgba(245,250,255,var(--glass-alpha-card)) !important;
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.16) 42%, rgba(255,255,255,.11)),
    rgba(244, 251, 255, var(--glass-alpha-dock)) !important;
}

.liquid-glass::before {
  opacity: 0.66;
}

.liquid-glass__specular {
  opacity: 0.55;
}

.project-card__poster,
.profile-card__monogram {
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.09)),
    rgba(255,255,255,.13) !important;
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year,
.chip-cloud span,
.badge-chip .liquid-glass__content {
  background: rgba(255,255,255,.17);
}

.hero-button--secondary,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255,255,255,.17);
}

/* Keep labels readable on photo background without making panels solid. */
.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.profile-card h2,
.metric-card strong,
.project-card__poster strong,
.content-card h3,
.service-card h3,
.capability-card h3,
.timeline-card h3,
.contact-card h3,
.lab-card h3,
.skill-bar-card__head span,
.skill-bar-card__head strong {
  text-shadow:
    0 2px 18px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.10);
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small {
  text-shadow: 0 1px 10px rgba(0,0,0,.32);
}

/* Slightly stronger refraction visibility lines behind medium glass. */
.ambient-scene__glass-lines span {
  opacity: 0.92;
}

.ambient-scene__water-shimmer {
  opacity: 0.88;
}


/* V8 design-system correction: refined color, typography, spacing, glass density */
:root {
  --font-body: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --ink: #f5fbf8;
  --ink-strong: #ffffff;
  --ink-muted: rgba(235, 249, 245, 0.78);
  --ink-soft: rgba(235, 249, 245, 0.62);
  --forest-panel: rgba(19, 36, 35, 0.30);
  --forest-card: rgba(23, 39, 38, 0.26);
  --forest-border: rgba(239, 255, 249, 0.42);
  --forest-border-strong: rgba(255, 255, 255, 0.64);
  --accent-cyan: #a9f1ff;
  --accent-mint: #cafadc;
  --accent-amber: #ffe3a1;
  --accent-coral: #ff9b75;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #07100c;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.forest-backdrop {
  filter: saturate(0.92) contrast(1.08) brightness(0.72);
}

.forest-backdrop::before {
  background:
    radial-gradient(circle at 43% 8%, rgba(255, 237, 181, 0.18), transparent 24%),
    radial-gradient(circle at 70% 22%, rgba(255, 102, 62, 0.10), transparent 22%),
    radial-gradient(circle at 22% 20%, rgba(122, 213, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(2, 9, 10, 0.20), rgba(2, 8, 10, 0.38) 42%, rgba(2, 7, 8, 0.62));
  mix-blend-mode: normal;
}

.forest-backdrop::after {
  opacity: 0.10;
}

.ambient-scene {
  opacity: 0.72;
}

.ambient-scene__mist {
  opacity: 0.22;
}

.ambient-scene__water-shimmer {
  opacity: 0.44;
  mix-blend-mode: screen;
}

.ambient-scene__glass-lines span {
  opacity: 0.48;
}

.page-main {
  padding-top: clamp(22px, 3.5vw, 48px);
  gap: clamp(28px, 4vw, 52px);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.82fr);
  gap: clamp(20px, 2.6vw, 34px);
}

.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.075) 36%, rgba(127, 205, 200, 0.075) 75%, rgba(255, 255, 255, 0.095)),
    rgba(16, 35, 34, 0.26) !important;
  border-color: var(--forest-border);
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.36),
    0 10px 28px rgba(0, 26, 28, 0.20),
    inset 0 1px 1px rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.12);
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.078) 40%, rgba(131,211,206,0.072)),
    var(--forest-panel) !important;
}

.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.064) 42%, rgba(120,190,185,0.06)),
    var(--forest-card) !important;
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.42), transparent 15%),
    radial-gradient(circle at 86% 8%, rgba(169,241,255,0.20), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.026) 38%, rgba(255,255,255,0.055));
  opacity: 0.58;
}

.liquid-glass__specular {
  opacity: 0.44;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 24%, rgba(255,255,255,0.02) 42%, transparent 64%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.54), transparent 13%),
    radial-gradient(circle at 82% 6%, rgba(169,241,255,0.26), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 27%);
}

.liquid-glass__border {
  border-color: var(--forest-border-strong);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.66),
    inset 0 -1px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(255,255,255,.12);
}

.liquid-glass__content {
  padding: clamp(22px, 2.5vw, 34px);
}

.hero-card--lead {
  min-height: clamp(560px, 73vh, 680px);
}

.hero-copy {
  gap: clamp(16px, 2vw, 24px);
}

.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.profile-card h2,
.metric-card strong,
.project-card__poster strong {
  font-family: var(--font-display);
}

.hero-copy h1 {
  font-size: clamp(3.1rem, 6.15vw, 6.35rem);
  line-height: 0.94;
  letter-spacing: -0.072em;
  max-width: 10.8ch;
  color: var(--ink-strong);
  text-shadow: 0 10px 38px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.08);
}

.hero-copy h1 span {
  background: linear-gradient(135deg, var(--accent-mint) 0%, var(--accent-cyan) 37%, var(--accent-amber) 70%, var(--accent-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.section-shell__head h2,
.page-intro h1 {
  font-size: clamp(2.2rem, 4.4vw, 4.25rem);
  letter-spacing: -0.055em;
  color: var(--ink-strong);
}

.profile-card h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.045em;
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small {
  color: var(--ink-muted);
  font-size: clamp(0.96rem, 1.05vw, 1.06rem);
  line-height: 1.74;
  text-shadow: 0 2px 14px rgba(0,0,0,.34);
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year {
  color: rgba(246, 255, 251, 0.78);
  background: rgba(255,255,255,0.105);
  border-color: rgba(255,255,255,0.30);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.badge-chip .liquid-glass__content {
  color: rgba(247,255,251,0.86);
  padding: 9px 13px;
  font-size: 0.84rem;
}

.hero-button {
  min-height: 50px;
  padding: 0 22px;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.hero-button--primary {
  color: #081612;
  background: linear-gradient(135deg, rgba(232,255,246,0.94), rgba(169,241,255,0.90), rgba(255,224,166,0.90));
  box-shadow: 0 18px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
}

.hero-button--secondary,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255,255,255,.105);
  color: rgba(248,255,252,.92);
  border-color: rgba(255,255,255,.30);
}

.profile-card__monogram {
  width: 96px;
  height: 96px;
  border-radius: 27px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.08)),
    rgba(11, 42, 42, .18) !important;
  border-color: rgba(255,255,255,.35);
  font-family: var(--font-display);
}

.metric-stack {
  gap: 16px;
}

.metric-card {
  min-height: 155px;
}

.metric-card strong {
  font-size: clamp(2.8rem, 4vw, 4.1rem);
  letter-spacing: -0.065em;
}

.metric-card span {
  color: rgba(247, 255, 251, 0.94);
}

.project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06)),
    rgba(12, 37, 36, .16) !important;
  border-color: rgba(255,255,255,.30);
}

.project-card__poster span,
.contact-form span,
.contact-list span {
  color: rgba(238, 252, 247, 0.56);
}

.project-card ul,
.service-card ul,
.timeline-card ul,
.content-card ul,
.contact-list {
  color: rgba(244, 252, 248, 0.78);
}

.chip-cloud span {
  background: rgba(255,255,255,.095);
  border-color: rgba(255,255,255,.25);
  color: rgba(245,255,251,.86);
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.10) 42%, rgba(178,235,230,.08)),
    rgba(16, 35, 34, 0.24) !important;
  border-color: rgba(255,255,255,.42);
}

.liquid-dock__link {
  color: rgba(245,255,251,.74);
  font-weight: 720;
}

.liquid-dock__link.is-active {
  color: #061611;
}

.liquid-dock__link.is-active::before {
  background: linear-gradient(135deg, rgba(232,255,246,.92), rgba(169,241,255,.82), rgba(255,223,165,.82));
}

.skill-bar-track {
  background: rgba(255,255,255,.105);
  border-color: rgba(255,255,255,.28);
}

.skill-bar-fill {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan), var(--accent-amber));
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(245,255,251,.45);
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-card--lead {
    min-height: auto;
  }

  .hero-copy h1 {
    max-width: 12ch;
  }
}

@media (max-width: 580px) {
  .hero-copy h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
    letter-spacing: -0.06em;
  }
}


/* V9 final dark-clear liquid glass correction: remove washed-white UI, keep optical glass */
:root {
  --v9-ink: #f7fff9;
  --v9-muted: rgba(235, 250, 243, 0.74);
  --v9-soft: rgba(235, 250, 243, 0.58);
  --v9-glass: rgba(6, 18, 17, 0.34);
  --v9-glass-card: rgba(8, 24, 22, 0.30);
  --v9-glass-panel: rgba(7, 21, 20, 0.32);
  --v9-line: rgba(226, 255, 246, 0.36);
  --v9-line-strong: rgba(255, 255, 255, 0.56);
  --v9-mint: #c7ffe4;
  --v9-cyan: #9eeeff;
  --v9-amber: #ffd67d;
  --v9-coral: #ff805e;
  --v9-green-shadow: rgba(0, 40, 30, 0.42);
}

html {
  background: #050b08;
}

body {
  color: var(--v9-ink);
  background: #050b08;
}

.forest-backdrop {
  filter: saturate(1.05) contrast(1.10) brightness(0.64);
}

.forest-backdrop::before {
  background:
    radial-gradient(circle at 40% 8%, rgba(255, 226, 151, 0.14), transparent 26%),
    radial-gradient(circle at 72% 20%, rgba(255, 88, 50, 0.10), transparent 24%),
    radial-gradient(circle at 18% 24%, rgba(70, 194, 255, 0.10), transparent 26%),
    linear-gradient(180deg, rgba(1, 7, 7, 0.22), rgba(1, 8, 7, 0.46) 45%, rgba(1, 6, 6, 0.72));
  mix-blend-mode: normal;
}

.forest-backdrop::after {
  opacity: 0.075;
}

.ambient-scene {
  opacity: 0.62;
}

.ambient-scene__water-shimmer {
  opacity: 0.38;
}

.ambient-scene__mist {
  opacity: 0.16;
}

.ambient-scene__glass-lines span {
  opacity: 0.38;
}

.page-main {
  width: min(calc(100% - 40px), 1220px);
  padding-top: 34px;
  gap: 54px;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.82fr);
  gap: 28px;
}

.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.038) 38%, rgba(99, 214, 196, 0.045) 70%, rgba(255,255,255,0.050)),
    var(--v9-glass) !important;
  border: 1px solid var(--v9-line);
  box-shadow:
    0 32px 92px rgba(0, 0, 0, 0.44),
    0 10px 30px rgba(0, 35, 28, 0.26),
    inset 0 1px 1px rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    inset 1px 0 0 rgba(255,255,255,0.08);
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.125), rgba(255,255,255,0.040) 42%, rgba(84, 204, 190, 0.040)),
    var(--v9-glass-panel) !important;
}

.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035) 45%, rgba(84, 204, 190, 0.036)),
    var(--v9-glass-card) !important;
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,255,255,0.25), transparent 13%),
    radial-gradient(circle at 88% 8%, rgba(150,238,255,0.15), transparent 17%),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.025));
  opacity: 0.44;
}

.liquid-glass__specular {
  opacity: 0.32;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.44), rgba(255,255,255,0.065) 25%, rgba(255,255,255,0.01) 43%, transparent 67%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.34), transparent 13%),
    radial-gradient(circle at 82% 6%, rgba(158,238,255,0.16), transparent 18%);
}

.liquid-glass__border {
  border-color: var(--v9-line-strong);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(255,255,255,.08);
}

.liquid-glass__content {
  padding: clamp(22px, 2.2vw, 32px);
}

.hero-card--lead {
  min-height: clamp(570px, 72vh, 680px);
}

.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.profile-card h2,
.metric-card strong,
.project-card__poster strong,
.content-card h3,
.service-card h3,
.capability-card h3,
.timeline-card h3,
.contact-card h3,
.lab-card h3,
.skill-bar-card__head span,
.skill-bar-card__head strong {
  color: var(--v9-ink);
  text-shadow:
    0 10px 32px rgba(0,0,0,.52),
    0 1px 0 rgba(255,255,255,.08);
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.7vw, 5.95rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
  max-width: 11.5ch;
}

.hero-copy h1 span {
  background: linear-gradient(135deg, var(--v9-mint) 0%, var(--v9-cyan) 42%, var(--v9-amber) 72%, var(--v9-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.section-shell__head h2,
.page-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4vw, 3.8rem);
  letter-spacing: -0.052em;
}

.profile-card h2 {
  font-size: clamp(1.9rem, 2.7vw, 2.7rem);
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small {
  color: var(--v9-muted);
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year {
  color: rgba(242, 255, 249, 0.76);
  background: rgba(255,255,255,0.070);
  border-color: rgba(255,255,255,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.badge-chip .liquid-glass__content {
  color: rgba(242,255,249,0.82);
  padding: 8px 12px;
}

.hero-button--primary {
  color: #06140f;
  background: linear-gradient(135deg, rgba(206,255,229,0.90), rgba(158,238,255,0.82), rgba(255,209,126,0.82));
  box-shadow: 0 18px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.56);
}

.hero-button--secondary,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255,255,255,.070);
  color: rgba(246,255,251,.90);
  border-color: rgba(255,255,255,.22);
}

.profile-card__monogram,
.project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.115), rgba(255,255,255,.035)),
    rgba(8, 28, 25, .18) !important;
  border-color: rgba(255,255,255,.22);
}

.project-card__poster {
  min-height: 150px;
}

.project-card__poster span,
.contact-form span,
.contact-list span {
  color: rgba(229, 249, 241, 0.54);
}

.project-card ul,
.service-card ul,
.timeline-card ul,
.content-card ul,
.contact-list {
  color: rgba(235, 250, 243, 0.74);
}

.chip-cloud span {
  background: rgba(255,255,255,.064);
  border-color: rgba(255,255,255,.18);
  color: rgba(242,255,249,.80);
}

.metric-card {
  min-height: 152px;
}

.metric-card strong {
  font-size: clamp(2.7rem, 3.8vw, 3.85rem);
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.052) 43%, rgba(122,214,202,.045)),
    rgba(7, 20, 19, 0.34) !important;
  border-color: rgba(255,255,255,.32);
}

.liquid-dock__link {
  color: rgba(239,255,248,.72);
}

.liquid-dock__link.is-active {
  color: #071510;
}

.liquid-dock__link.is-active::before {
  background: linear-gradient(135deg, rgba(205,255,229,.88), rgba(158,238,255,.74), rgba(255,211,132,.72));
}

.skill-bar-track {
  background: rgba(255,255,255,.072);
  border-color: rgba(255,255,255,.18);
}

.skill-bar-fill {
  background: linear-gradient(90deg, var(--v9-mint), var(--v9-cyan), var(--v9-amber));
}

.form-status {
  color: var(--v9-muted);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(236,252,245,.42);
}

/* Remove over-bright project accent washes from earlier versions. */
.accent-teal .project-card__poster,
.accent-violet .project-card__poster,
.accent-amber .project-card__poster,
.accent-pink .project-card__poster,
.accent-cyan .project-card__poster,
.accent-lime .project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    rgba(8, 28, 25, .18) !important;
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .page-main {
    width: min(calc(100% - 20px), 1220px);
  }

  .hero-copy h1 {
    font-size: clamp(2.55rem, 13vw, 4rem);
    max-width: 100%;
  }
}


/* V10 visible forest + balanced liquid glass correction
   Goal: keep the supplied forest image visible, avoid white panels, avoid black panels,
   keep liquid-glass refraction readable and premium. */
:root {
  --v10-text: #f7fff9;
  --v10-muted: rgba(238, 250, 245, 0.78);
  --v10-soft: rgba(238, 250, 245, 0.62);
  --v10-glass: rgba(11, 30, 27, 0.18);
  --v10-glass-panel: rgba(12, 30, 27, 0.20);
  --v10-glass-card: rgba(12, 30, 27, 0.17);
  --v10-line: rgba(235, 255, 247, 0.38);
  --v10-line-strong: rgba(255, 255, 255, 0.55);
  --v10-rim: rgba(215, 255, 246, 0.44);
  --v10-mint: #ccffe4;
  --v10-cyan: #9df2ff;
  --v10-amber: #ffd67b;
  --v10-coral: #ff8764;
}

html,
body {
  background: #10180f;
  color: var(--v10-text);
}

.forest-backdrop {
  background:
    linear-gradient(180deg, rgba(2, 8, 8, 0.05), rgba(2, 8, 7, 0.20) 58%, rgba(1, 6, 5, 0.30)),
    radial-gradient(circle at 22% 18%, rgba(255, 210, 91, 0.08), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(255, 88, 47, 0.08), transparent 24%),
    url('../images/liquid-forest-bg.jpg') !important;
  background-size: cover, cover, cover, cover !important;
  background-position: center center !important;
  filter: saturate(1.10) contrast(1.03) brightness(0.92) !important;
  opacity: 1 !important;
  transform: scale(1.018);
  animation: forestBreath 30s ease-in-out infinite alternate;
}

.forest-backdrop::before {
  background:
    radial-gradient(circle at 43% 8%, rgba(255, 238, 179, 0.10), transparent 24%),
    radial-gradient(circle at 72% 20%, rgba(255, 103, 62, 0.08), transparent 25%),
    linear-gradient(180deg, rgba(1, 7, 7, 0.02), rgba(1, 8, 7, 0.10) 45%, rgba(1, 6, 6, 0.18)) !important;
  mix-blend-mode: normal !important;
}

.forest-backdrop::after {
  opacity: 0.035 !important;
}

.ambient-scene {
  opacity: 0.46 !important;
  mix-blend-mode: screen;
}

.ambient-scene__mist {
  opacity: 0.13 !important;
}

.ambient-scene__water-shimmer {
  opacity: 0.26 !important;
}

.ambient-scene__glass-lines span {
  opacity: 0.30 !important;
}

/* Real glass should tint and bend the photo, not cover it. */
.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.030) 40%, rgba(111,220,197,0.032) 72%, rgba(255,255,255,0.040)),
    var(--v10-glass) !important;
  border-color: var(--v10-line) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    0 10px 28px rgba(0, 38, 28, 0.16),
    inset 0 1px 1px rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    inset 1px 0 0 rgba(255,255,255,0.08) !important;
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.092), rgba(255,255,255,0.032) 44%, rgba(105, 218, 195, 0.030)),
    var(--v10-glass-panel) !important;
}

.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.080), rgba(255,255,255,0.028) 46%, rgba(105, 218, 195, 0.026)),
    var(--v10-glass-card) !important;
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,255,255,0.18), transparent 14%),
    radial-gradient(circle at 88% 8%, rgba(157,242,255,0.11), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.070), rgba(255,255,255,0.012) 40%, rgba(255,255,255,0.018)) !important;
  opacity: 0.38 !important;
}

.liquid-glass__specular {
  opacity: 0.28 !important;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.32), rgba(255,255,255,0.052) 25%, rgba(255,255,255,0.008) 44%, transparent 68%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.26), transparent 13%),
    radial-gradient(circle at 82% 6%, rgba(157,242,255,0.12), transparent 18%) !important;
}

.liquid-glass__border {
  border-color: var(--v10-line-strong) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.07) !important;
}

/* Better visual balance: not huge, not template-like. */
.page-main {
  width: min(calc(100% - 44px), 1230px);
  padding-top: 36px;
  gap: 54px;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.26fr) minmax(350px, 0.82fr);
  gap: 28px;
}

.hero-card--lead {
  min-height: clamp(545px, 70vh, 650px) !important;
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.85rem, 5.4vw, 5.65rem) !important;
  line-height: 0.97;
  letter-spacing: -0.070em;
  max-width: 11.7ch;
  color: var(--v10-text);
  text-shadow: 0 10px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08);
}

.hero-copy h1 span {
  background: linear-gradient(135deg, var(--v10-mint) 0%, var(--v10-cyan) 42%, var(--v10-amber) 72%, var(--v10-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.section-shell__head h2,
.page-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.55rem) !important;
  letter-spacing: -0.052em;
  color: var(--v10-text);
}

.profile-card h2 {
  font-size: clamp(1.9rem, 2.6vw, 2.62rem) !important;
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small {
  color: var(--v10-muted) !important;
  text-shadow: 0 2px 13px rgba(0,0,0,.36);
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(244,255,249,0.74) !important;
}

.badge-chip .liquid-glass__content {
  color: rgba(244,255,249,0.82) !important;
}

.hero-button--primary {
  color: #06140f;
  background: linear-gradient(135deg, rgba(207,255,231,0.88), rgba(157,242,255,0.78), rgba(255,214,123,0.76)) !important;
}

.hero-button--secondary,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255,255,255,.060) !important;
  color: rgba(246,255,251,.90) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.profile-card__monogram,
.project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.080), rgba(255,255,255,.026)),
    rgba(8, 28, 25, .09) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.project-card__poster {
  min-height: 148px;
}

.accent-teal .project-card__poster,
.accent-violet .project-card__poster,
.accent-amber .project-card__poster,
.accent-pink .project-card__poster,
.accent-cyan .project-card__poster,
.accent-lime .project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.024)),
    rgba(8, 28, 25, .09) !important;
}

.project-card ul,
.service-card ul,
.timeline-card ul,
.content-card ul,
.contact-list {
  color: rgba(235, 250, 243, 0.76) !important;
}

.chip-cloud span {
  background: rgba(255,255,255,.050) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.040) 43%, rgba(122,214,202,.032)),
    rgba(7, 20, 19, 0.26) !important;
  border-color: rgba(255,255,255,.28) !important;
}

.liquid-dock__link {
  color: rgba(239,255,248,.74) !important;
}

.liquid-dock__link.is-active {
  color: #061510 !important;
}

.liquid-dock__link.is-active::before {
  background: linear-gradient(135deg, rgba(207,255,231,.86), rgba(157,242,255,.72), rgba(255,214,123,.68)) !important;
}

/* Home top should immediately show the background image around and through surfaces. */
.hero-card--lead,
.profile-card,
.metric-card {
  backdrop-filter: inherit;
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .page-main {
    width: min(calc(100% - 20px), 1230px);
  }

  .hero-copy h1 {
    font-size: clamp(2.5rem, 12.5vw, 3.9rem) !important;
    max-width: 100%;
  }
}


/* V11 image-first premium liquid glass correction
   The uploaded forest image is the content layer.
   Liquid Glass is a floating optical layer above it — not black cards, not white cards. */
:root {
  --v11-text: #f9fff9;
  --v11-muted: rgba(239, 251, 245, 0.80);
  --v11-soft: rgba(239, 251, 245, 0.62);
  --v11-edge: rgba(242, 255, 247, 0.46);
  --v11-edge-hot: rgba(255, 255, 255, 0.68);
  --v11-glass: rgba(255, 255, 255, 0.070);
  --v11-glass-panel: rgba(255, 255, 255, 0.082);
  --v11-glass-card: rgba(255, 255, 255, 0.065);
  --v11-shade: rgba(2, 12, 10, 0.145);
  --v11-mint: #baffdd;
  --v11-cyan: #99f0ff;
  --v11-gold: #ffd97a;
  --v11-maple: #ff7d55;
}

/* Critical: the image must be in front of the document background, not behind it. */
html,
body {
  min-height: 100%;
  color: var(--v11-text);
  background: #07100c !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 8, 0.04), rgba(2, 8, 7, 0.13) 55%, rgba(1, 6, 5, 0.26)),
    radial-gradient(circle at 45% 11%, rgba(255, 236, 179, 0.11), transparent 25%),
    radial-gradient(circle at 72% 22%, rgba(255, 95, 58, 0.09), transparent 22%),
    url('../images/liquid-forest-bg.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center center;
  filter: saturate(1.12) contrast(1.04) brightness(0.94);
  transform: scale(1.012);
  animation: v11PhotoDrift 34s ease-in-out infinite alternate;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 249, 217, 0.08), transparent 26%),
    linear-gradient(90deg, rgba(12, 75, 70, 0.08), transparent 32%, rgba(109, 43, 24, 0.07) 73%, transparent),
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.12));
}

/* Keep old forest node harmless if it exists. */
.forest-backdrop {
  display: none !important;
}

.ambient-scene {
  z-index: 2 !important;
  opacity: 0.58 !important;
  mix-blend-mode: screen;
}

.page-shell {
  position: relative;
  z-index: 3 !important;
}

.liquid-dock-wrap {
  z-index: 80 !important;
}

.ambient-scene__mist {
  opacity: 0.12 !important;
}

.ambient-scene__water-shimmer {
  opacity: 0.32 !important;
}

.ambient-scene__glass-lines span {
  opacity: 0.34 !important;
}

/* Premium liquid material: transparent with optical rim, no opaque card feeling. */
.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.125), rgba(255,255,255,0.030) 37%, rgba(141, 244, 220, 0.035) 74%, rgba(255,255,255,0.045)),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(2, 12, 10, 0.045)),
    var(--v11-glass) !important;
  border: 1px solid var(--v11-edge) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,0.26),
    0 10px 32px rgba(0,35,27,0.14),
    inset 0 1px 1px rgba(255,255,255,0.48),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    inset 1px 0 0 rgba(255,255,255,0.10) !important;
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.140), rgba(255,255,255,0.035) 42%, rgba(141,244,220,0.035)),
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(1,10,8,0.050)),
    var(--v11-glass-panel) !important;
}

.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.112), rgba(255,255,255,0.030) 43%, rgba(141,244,220,0.030)),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(1,10,8,0.042)),
    var(--v11-glass-card) !important;
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,255,255,0.32), transparent 14%),
    radial-gradient(circle at 86% 8%, rgba(153,240,255,0.17), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.012) 40%, rgba(255,255,255,0.020)) !important;
  opacity: 0.52 !important;
}

.liquid-glass__specular {
  opacity: 0.38 !important;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.46), rgba(255,255,255,0.060) 24%, rgba(255,255,255,0.008) 43%, transparent 68%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.30), transparent 13%),
    radial-gradient(circle at 82% 6%, rgba(153,240,255,0.15), transparent 18%) !important;
}

.liquid-glass__border {
  border-color: var(--v11-edge-hot) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(186,255,221,.08) !important;
}

/* Layout: less template-like, more editorial/product-site. */
.page-main {
  width: min(calc(100% - 48px), 1240px);
  padding-top: clamp(30px, 4vh, 54px);
  gap: clamp(44px, 6vh, 78px);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.17fr) minmax(360px, 0.82fr);
  gap: clamp(26px, 3vw, 42px);
}

.hero-card--lead {
  min-height: clamp(545px, 68vh, 660px) !important;
}

.liquid-glass__content {
  padding: clamp(24px, 2.5vw, 38px);
}

/* Typography: premium, big, but not normal template. */
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.95rem, 5.45vw, 5.78rem) !important;
  line-height: 0.955;
  letter-spacing: -0.074em;
  max-width: 11.3ch;
  color: var(--v11-text);
  text-shadow: 0 10px 34px rgba(0,0,0,.44), 0 1px 0 rgba(255,255,255,.08);
}

.hero-copy h1 span {
  background: linear-gradient(135deg, var(--v11-mint) 0%, var(--v11-cyan) 42%, var(--v11-gold) 72%, var(--v11-maple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.section-shell__head h2,
.page-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 3.85vw, 3.65rem) !important;
  letter-spacing: -0.055em;
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small {
  color: var(--v11-muted) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.34);
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year {
  background: rgba(255,255,255,0.060) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(244,255,249,0.77) !important;
}

.badge-chip .liquid-glass__content {
  color: rgba(244,255,249,0.84) !important;
}

.hero-button--primary {
  color: #06140f;
  background: linear-gradient(135deg, rgba(207,255,231,0.90), rgba(153,240,255,0.78), rgba(255,217,122,0.78)) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5);
}

.hero-button--secondary,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255,255,255,.065) !important;
  color: rgba(246,255,251,.92) !important;
  border-color: rgba(255,255,255,.20) !important;
}

.profile-card__monogram,
.project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.090), rgba(255,255,255,.028)),
    rgba(255,255,255,.030) !important;
  border-color: rgba(255,255,255,.20) !important;
}

.project-card__poster {
  min-height: 146px;
}

.accent-teal .project-card__poster,
.accent-violet .project-card__poster,
.accent-amber .project-card__poster,
.accent-pink .project-card__poster,
.accent-cyan .project-card__poster,
.accent-lime .project-card__poster {
  background:
    linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.030)),
    rgba(255,255,255,.030) !important;
}

.chip-cloud span {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(242,255,249,.82) !important;
}

.project-card ul,
.service-card ul,
.timeline-card ul,
.content-card ul,
.contact-list {
  color: rgba(235, 250, 243, 0.78) !important;
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.125), rgba(255,255,255,.042) 43%, rgba(122,214,202,.035)),
    rgba(7, 20, 19, 0.20) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.28),
    inset 0 1px 1px rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

.liquid-dock__link {
  color: rgba(239,255,248,.76) !important;
}

.liquid-dock__link.is-active {
  color: #061510 !important;
}

.liquid-dock__link.is-active::before {
  background: linear-gradient(135deg, rgba(207,255,231,.90), rgba(153,240,255,.72), rgba(255,217,122,.70)) !important;
}

/* Make lower sections feel designed, not repeated cards. */
.project-grid,
.capability-grid,
.timeline-grid,
.service-grid {
  gap: clamp(16px, 2vw, 24px);
}

.project-card,
.capability-card,
.timeline-card,
.service-card {
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.project-card:hover,
.capability-card:hover,
.timeline-card:hover,
.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.62) !important;
  box-shadow:
    0 34px 92px rgba(0,0,0,.30),
    0 0 34px rgba(153,240,255,.08),
    inset 0 1px 1px rgba(255,255,255,.48) !important;
}

@keyframes v11PhotoDrift {
  from { transform: scale(1.012) translate3d(0,0,0); filter: saturate(1.10) contrast(1.03) brightness(.93); }
  to { transform: scale(1.042) translate3d(-0.9%, -0.55%, 0); filter: saturate(1.18) contrast(1.05) brightness(.98); }
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .page-main {
    width: min(calc(100% - 20px), 1240px);
  }

  .hero-copy h1 {
    font-size: clamp(2.48rem, 12.4vw, 3.9rem) !important;
    max-width: 100%;
  }
}


/* V12 long-page readable liquid glass correction
   Keep the good hero feeling, fix lower sections with readable colored glass and add premium long-page systems. */
:root {
  --v12-mint: #c8ffe3;
  --v12-cyan: #9eefff;
  --v12-gold: #ffdc84;
  --v12-coral: #ff815d;
  --v12-ink: #f8fff9;
  --v12-muted: rgba(240, 252, 246, .82);
  --v12-muted-2: rgba(240, 252, 246, .68);
  --v12-card-shadow: 0 32px 92px rgba(0,0,0,.30), 0 0 34px rgba(158,240,255,.055);
}

/* Make section headings readable against busy forest without making them look like boxes. */
.section-shell__head {
  position: relative;
  padding: clamp(10px, 1vw, 16px) 0;
}

.section-shell__head h2,
.page-intro h1 {
  color: var(--v12-ink) !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,.62),
    0 1px 0 rgba(255,255,255,.10);
}

.section-shell__head p,
.page-intro p {
  max-width: 780px;
  color: var(--v12-muted) !important;
  font-weight: 650;
}

/* Lower-page glass needs a stronger readability layer than the hero. */
.section-shell__panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.052) 36%, rgba(127,235,210,.048) 74%, rgba(255,255,255,.055)),
    rgba(8, 24, 21, .215) !important;
  box-shadow:
    0 36px 100px rgba(0,0,0,.32),
    inset 0 1px 1px rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(255,255,255,.14) !important;
}

/* Fix the project section: no washed white, no unreadable transparent text. */
.project-grid {
  gap: clamp(20px, 2.4vw, 30px) !important;
}

.project-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(158,239,255,.12), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.038) 44%, rgba(7, 22, 18, .16)),
    rgba(8, 25, 22, .255) !important;
  box-shadow: var(--v12-card-shadow), inset 0 1px 1px rgba(255,255,255,.42) !important;
}

.project-card__poster {
  min-height: 166px !important;
  display: grid;
  align-content: end !important;
  background:
    linear-gradient(135deg, rgba(200,255,227,.16), rgba(158,239,255,.10) 45%, rgba(255,220,132,.10)),
    rgba(3, 16, 13, .20) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.08);
}

.project-card__poster span {
  color: rgba(240,252,246,.72) !important;
  font-weight: 850;
  letter-spacing: .13em;
}

.project-card__poster strong {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.1vw, 2.35rem);
  line-height: .98;
  letter-spacing: -.052em;
  color: #fff !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.55);
}

.project-card__body {
  margin-top: 14px;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.026)),
    rgba(3, 14, 12, .18);
  border: 1px solid rgba(255,255,255,.13);
}

.project-card__body p,
.project-card li {
  color: rgba(246,255,250,.88) !important;
  font-weight: 720;
  text-shadow: 0 2px 12px rgba(0,0,0,.44);
}

.project-card li {
  margin-block: 2px;
}

.text-link {
  color: var(--v12-cyan);
  font-weight: 900;
  text-shadow: 0 0 16px rgba(158,239,255,.28);
}

/* Make all repeated card sections feel richer and more premium. */
.identity-grid,
.capability-grid,
.workflow-grid,
.work-option-grid,
.value-grid,
.chapter-grid,
.skill-orbit-grid,
.academic-grid,
.principle-grid,
.service-grid,
.timeline-grid,
.lab-grid,
.case-study-list,
.focus-table,
.engagement-road,
.fit-cloud {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.identity-grid,
.workflow-grid,
.work-option-grid,
.value-grid,
.chapter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.skill-orbit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.case-study-list,
.focus-table {
  grid-template-columns: 1fr;
}

.engagement-road,
.fit-cloud {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.identity-card,
.focus-row,
.case-study-card,
.skill-orbit-card,
.workflow-card,
.work-option-card,
.engagement-step,
.value-card,
.academic-card,
.chapter-card,
.fit-chip {
  background:
    linear-gradient(145deg, rgba(255,255,255,.118), rgba(255,255,255,.036) 43%, rgba(120,237,209,.035)),
    rgba(5, 20, 17, .23) !important;
  border-color: rgba(241,255,248,.34) !important;
  box-shadow: var(--v12-card-shadow), inset 0 1px 1px rgba(255,255,255,.36) !important;
}

.identity-card h3,
.focus-row strong,
.case-study-card h3,
.skill-orbit-card h3,
.workflow-card h3,
.work-option-card h3,
.value-card h3,
.chapter-card h3 {
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: -.035em;
  text-shadow: 0 4px 18px rgba(0,0,0,.48);
}

.identity-card p,
.focus-row p,
.case-study-card p,
.workflow-card p,
.work-option-card p,
.value-card p,
.academic-card p,
.chapter-card p,
.engagement-step p {
  color: var(--v12-muted) !important;
  font-weight: 650;
  line-height: 1.68;
}

.identity-card__stat,
.case-study-card__index,
.case-study-card__category,
.workflow-card span,
.chapter-card span {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  margin-bottom: 14px;
  border-radius: 999px;
  color: #061510;
  background: linear-gradient(135deg, rgba(200,255,227,.88), rgba(158,239,255,.78), rgba(255,220,132,.72));
  font-weight: 900;
  letter-spacing: .02em;
}

.focus-row .liquid-glass__content {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 18px;
  align-items: center;
}

.focus-row strong {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

.case-study-card .liquid-glass__content {
  display: grid;
  grid-template-columns: 72px minmax(0, .9fr) minmax(320px, 1fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}

.case-study-card__index {
  min-width: 54px;
  height: 54px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.case-study-card h3 {
  font-size: clamp(1.85rem, 3vw, 3rem);
  line-height: 1;
  margin: 0 0 12px;
}

.case-study-card__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.case-study-card__details > div {
  padding: 18px;
  border-radius: 24px;
  background: rgba(2, 14, 12, .18);
  border: 1px solid rgba(255,255,255,.12);
}

.case-study-card__details h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: #fff;
}

.case-study-card__details ul {
  margin: 0;
  padding-left: 18px;
  color: var(--v12-muted);
  font-weight: 660;
  display: grid;
  gap: 8px;
}

.skill-orbit-card .liquid-glass__content {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 16px;
}

.skill-orbit-card__ring {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(7,20,17,.70) 0 52%, transparent 53%),
    conic-gradient(var(--v12-mint) var(--value), rgba(255,255,255,.10) 0);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.30), 0 16px 32px rgba(0,0,0,.24);
}

.skill-orbit-card__ring span {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: #fff;
  font-weight: 900;
}

.work-option-card ul,
.service-card ul {
  font-weight: 680;
}

.engagement-road {
  align-items: stretch;
}

.engagement-step strong {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--v12-cyan);
}

.fit-chip .liquid-glass__content {
  min-height: 56px;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 850;
  color: rgba(246,255,250,.90);
}

/* Home and page cards hover like real interactive glass. */
.identity-card,
.case-study-card,
.skill-orbit-card,
.workflow-card,
.work-option-card,
.value-card,
.academic-card,
.chapter-card,
.engagement-step,
.focus-row {
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.identity-card:hover,
.case-study-card:hover,
.skill-orbit-card:hover,
.workflow-card:hover,
.work-option-card:hover,
.value-card:hover,
.academic-card:hover,
.chapter-card:hover,
.engagement-step:hover,
.focus-row:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.58) !important;
  box-shadow:
    0 40px 110px rgba(0,0,0,.34),
    0 0 40px rgba(158,239,255,.08),
    inset 0 1px 1px rgba(255,255,255,.46) !important;
}

/* Better readability in lower card grids on small screens. */
@media (max-width: 1120px) {
  .identity-grid,
  .workflow-grid,
  .work-option-grid,
  .value-grid,
  .chapter-grid,
  .skill-orbit-grid,
  .engagement-road,
  .fit-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-study-card .liquid-glass__content {
    grid-template-columns: 1fr;
  }

  .case-study-card__details {
    grid-template-columns: 1fr;
  }

  .focus-row .liquid-glass__content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .identity-grid,
  .workflow-grid,
  .work-option-grid,
  .value-grid,
  .chapter-grid,
  .skill-orbit-grid,
  .academic-grid,
  .engagement-road,
  .fit-cloud {
    grid-template-columns: 1fr;
  }

  .project-card__body {
    padding: 15px;
  }
}


/* V13 expansive premium liquid glass system
   Long-page expansion, stronger text visibility, more section variety, richer UI surfaces. */
:root {
  --v13-ink: #fbfff9;
  --v13-muted: rgba(244, 255, 248, .86);
  --v13-soft: rgba(244, 255, 248, .68);
  --v13-mint: #c7ffe1;
  --v13-cyan: #96f3ff;
  --v13-gold: #ffe08b;
  --v13-maple: #ff845e;
  --v13-panel: rgba(6, 19, 16, .30);
  --v13-card: rgba(5, 18, 16, .27);
  --v13-inner: rgba(0, 10, 8, .25);
  --v13-line: rgba(245, 255, 249, .44);
}

body {
  color: var(--v13-ink);
}

.page-main {
  gap: clamp(58px, 8vh, 96px) !important;
  padding-bottom: 220px;
}

/* Stronger text visibility without killing the photo. */
.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.cockpit-card h3,
.identity-card h3,
.depth-step h3,
.architecture-card h3,
.skill-zone-card h3,
.service-studio-card h3,
.narrative-card p,
.contact-channel-card span,
.question-card p {
  color: var(--v13-ink) !important;
  text-shadow:
    0 6px 26px rgba(0,0,0,.72),
    0 2px 4px rgba(0,0,0,.36);
}

.hero-copy__text,
.section-shell__head p,
.page-intro p,
.cockpit-card p,
.identity-card p,
.depth-step p,
.architecture-card p,
.skill-zone-card span,
.service-studio-card p,
.narrative-card p,
.contact-channel-card a,
.question-card p {
  color: var(--v13-muted) !important;
  font-weight: 760;
  text-shadow: 0 3px 16px rgba(0,0,0,.62);
}

.section-shell__panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.04) 38%, rgba(120,235,205,.05)),
    rgba(5, 19, 16, .23) !important;
}

/* Cinematic marquee */
.glass-marquee-section {
  position: relative;
  overflow: hidden;
  border-radius: 46px;
  border: 1px solid rgba(255,255,255,.24);
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.025), rgba(158,243,255,.06)),
    rgba(3, 16, 13, .16);
  box-shadow: 0 30px 90px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.32);
  backdrop-filter: blur(8px) saturate(1.35);
}

.glass-marquee {
  display: flex;
  width: max-content;
  gap: 44px;
  padding: 28px 0;
  animation: v13Marquee 34s linear infinite;
}

.glass-marquee span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.065em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--v13-mint), var(--v13-cyan), var(--v13-gold), var(--v13-maple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

@keyframes v13Marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Cockpit and command sections */
.cockpit-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(2, minmax(190px, .42fr));
  gap: clamp(18px, 2vw, 28px);
}

.cockpit-card {
  min-height: 200px;
  background:
    radial-gradient(circle at 80% 0%, rgba(150,243,255,.13), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    var(--v13-card) !important;
}

.cockpit-card--large {
  grid-row: span 2;
  min-height: 428px;
}

.cockpit-card h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.065em;
  margin: 0 0 18px;
}

.cockpit-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.4rem);
  letter-spacing: -.06em;
  margin: 8px 0;
  color: #fff;
}

.mini-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(245,255,249,.76);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 900;
}

.cockpit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.social-command-grid,
.architecture-grid,
.skill-zone-grid,
.service-studio-grid,
.contact-channel-grid,
.question-grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}

.social-command-grid,
.contact-channel-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.social-command-card,
.contact-channel-card {
  min-height: 180px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.032)),
    rgba(5, 20, 17, .22) !important;
}

.social-command-card span,
.contact-channel-card span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  margin-bottom: 18px;
  font-weight: 900;
}

/* Depth timeline */
.depth-timeline {
  display: grid;
  gap: 18px;
}

.depth-step .liquid-glass__content {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 24px;
  align-items: center;
}

.depth-step span,
.question-card strong {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  font-family: var(--font-display);
  font-weight: 900;
  background: linear-gradient(135deg, var(--v13-mint), var(--v13-cyan), var(--v13-gold));
  color: #061510;
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.depth-step h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  letter-spacing: -.04em;
}

/* Project architecture */
.architecture-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.architecture-card {
  min-height: 340px;
}

.architecture-card h3,
.skill-zone-card h3,
.service-studio-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.architecture-card__flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.architecture-card__flow span,
.skill-zone-card span {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(0,10,8,.22);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--v13-muted);
  font-weight: 760;
}

/* Skill showcase */
.skill-zone-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.skill-zone-card div {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.comparison-board {
  display: grid;
  gap: 16px;
}

.comparison-row .liquid-glass__content {
  display: grid;
  grid-template-columns: minmax(170px, 260px) 1fr;
  gap: 20px;
  align-items: center;
}

.comparison-row strong {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 2rem);
  color: #fff;
}

/* Service studio */
.service-studio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-studio-card {
  min-height: 250px;
}

/* Narrative/contact */
.narrative-stack {
  display: grid;
  gap: 18px;
}

.narrative-card .liquid-glass__content {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 22px;
  align-items: center;
}

.narrative-card span {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--v13-cyan);
  font-weight: 900;
}

.narrative-card p {
  margin: 0;
  font-size: clamp(1.08rem, 1.4vw, 1.35rem);
  line-height: 1.7;
}

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

.question-card .liquid-glass__content {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: center;
}

/* Global card upgrades */
.identity-card,
.focus-row,
.case-study-card,
.skill-orbit-card,
.workflow-card,
.work-option-card,
.value-card,
.academic-card,
.chapter-card,
.engagement-step,
.social-command-card,
.depth-step,
.architecture-card,
.skill-zone-card,
.service-studio-card,
.narrative-card,
.contact-channel-card,
.question-card {
  border-color: rgba(246,255,249,.36) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.120), rgba(255,255,255,.036) 42%, rgba(119,235,209,.035)),
    rgba(5, 19, 16, .235) !important;
}

.identity-card:hover,
.focus-row:hover,
.case-study-card:hover,
.skill-orbit-card:hover,
.workflow-card:hover,
.work-option-card:hover,
.value-card:hover,
.academic-card:hover,
.chapter-card:hover,
.engagement-step:hover,
.social-command-card:hover,
.depth-step:hover,
.architecture-card:hover,
.skill-zone-card:hover,
.service-studio-card:hover,
.narrative-card:hover,
.contact-channel-card:hover,
.question-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.65) !important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.36),
    0 0 42px rgba(150,243,255,.09),
    inset 0 1px 1px rgba(255,255,255,.48) !important;
}

/* More vertical size so pages feel meaningfully long. */
.home-depth-spacer {
  min-height: 40px;
}

@media (max-width: 1180px) {
  .cockpit-grid,
  .skill-zone-grid,
  .service-studio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cockpit-card--large {
    grid-row: auto;
    grid-column: span 2;
  }

  .social-command-grid,
  .contact-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .architecture-grid,
  .question-grid {
    grid-template-columns: 1fr;
  }

  .comparison-row .liquid-glass__content,
  .depth-step .liquid-glass__content,
  .narrative-card .liquid-glass__content,
  .question-card .liquid-glass__content {
    grid-template-columns: 1fr;
  }

  .architecture-card__flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cockpit-grid,
  .skill-zone-grid,
  .service-studio-grid,
  .social-command-grid,
  .contact-channel-grid {
    grid-template-columns: 1fr;
  }

  .cockpit-card--large {
    grid-column: auto;
  }

  .glass-marquee span {
    font-size: clamp(2rem, 16vw, 3.4rem);
  }
}


/* V14 frosted long-form liquid glass expansion
   User requested: less transparent, more blur, longer pages, more varied feature types, stronger font visibility. */
:root {
  --v14-ink: #ffffff;
  --v14-muted: rgba(247,255,250,.90);
  --v14-soft: rgba(247,255,250,.72);
  --v14-mint: #c9ffe3;
  --v14-cyan: #96f2ff;
  --v14-gold: #ffe193;
  --v14-coral: #ff8762;
  --v14-panel: rgba(9, 28, 24, .34);
  --v14-card: rgba(8, 27, 23, .32);
  --v14-inner: rgba(1, 12, 10, .32);
  --v14-line: rgba(247,255,250,.50);
  --v14-line-strong: rgba(255,255,255,.72);
}

/* More frosted: visible background, but no weak over-transparency. */
.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.060) 38%, rgba(126,240,211,.055) 74%, rgba(255,255,255,.065)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,10,8,.10)),
    rgba(7, 24, 20, .285) !important;
  border-color: var(--v14-line) !important;
  box-shadow:
    0 34px 96px rgba(0,0,0,.36),
    0 12px 34px rgba(0,38,30,.22),
    inset 0 1px 1px rgba(255,255,255,.56),
    inset 0 -1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.14) !important;
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.064) 42%, rgba(126,240,211,.055)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,10,8,.12)),
    var(--v14-panel) !important;
}

.profile-card,
.metric-card,
.project-card,
.capability-card,
.service-card,
.timeline-card,
.content-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card,
.identity-card,
.focus-row,
.case-study-card,
.skill-orbit-card,
.workflow-card,
.work-option-card,
.value-card,
.academic-card,
.chapter-card,
.engagement-step,
.social-command-card,
.depth-step,
.architecture-card,
.skill-zone-card,
.service-studio-card,
.narrative-card,
.contact-channel-card,
.question-card,
.signature-bento__main,
.signature-bento__tile,
.proof-wall-card,
.project-lab-table,
.experience-node,
.tech-column,
.blueprint-card,
.constellation-card,
.brief-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.165), rgba(255,255,255,.055) 44%, rgba(126,240,211,.050)),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,10,8,.105)),
    var(--v14-card) !important;
  border-color: rgba(247,255,250,.46) !important;
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,255,255,.38), transparent 15%),
    radial-gradient(circle at 86% 8%, rgba(150,242,255,.22), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.018) 42%, rgba(255,255,255,.03)) !important;
  opacity: .56 !important;
}

.liquid-glass__specular {
  opacity: .43 !important;
}

.liquid-glass__border {
  border-color: var(--v14-line-strong) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.14),
    inset -1px 0 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(201,255,227,.08) !important;
}

/* Stronger font color and readability everywhere. */
body,
.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.profile-card h2,
.metric-card strong,
.project-card__poster strong,
.content-card h3,
.service-card h3,
.capability-card h3,
.timeline-card h3,
.contact-card h3,
.lab-card h3,
.skill-bar-card__head span,
.skill-bar-card__head strong,
.cockpit-card h3,
.identity-card h3,
.depth-step h3,
.architecture-card h3,
.skill-zone-card h3,
.service-studio-card h3,
.signature-bento h3,
.signature-bento h4,
.proof-wall-card h3,
.experience-node h3,
.tech-column h3,
.blueprint-card h3,
.constellation-card h3,
.brief-card h3 {
  color: var(--v14-ink) !important;
  text-shadow:
    0 5px 20px rgba(0,0,0,.74),
    0 1px 0 rgba(255,255,255,.08) !important;
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small,
.identity-card p,
.focus-row p,
.case-study-card p,
.workflow-card p,
.work-option-card p,
.value-card p,
.academic-card p,
.chapter-card p,
.engagement-step p,
.cockpit-card p,
.depth-step p,
.architecture-card p,
.skill-zone-card span,
.service-studio-card p,
.narrative-card p,
.contact-channel-card a,
.question-card p,
.signature-bento p,
.proof-wall-card p,
.experience-node p,
.tech-column span,
.blueprint-card li,
.constellation-card p,
.brief-card p {
  color: var(--v14-muted) !important;
  font-weight: 790;
  text-shadow: 0 3px 16px rgba(0,0,0,.68) !important;
}

/* New V14 section layouts */
.signature-bento,
.proof-wall,
.tech-matrix,
.blueprint-grid,
.constellation-grid,
.brief-builder-grid,
.experience-map {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.signature-bento {
  grid-template-columns: 1.25fr repeat(2, minmax(220px, .55fr));
}

.signature-bento__main {
  grid-row: span 2;
  min-height: 440px;
}

.signature-bento__main h3 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.065em;
}

.signature-bento__tile {
  min-height: 210px;
}

.signature-bento__tile span,
.proof-wall-card span,
.constellation-card span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(201,255,227,.88), rgba(150,242,255,.76), rgba(255,225,147,.72));
  color: #061510;
  font-weight: 950;
}

.signature-bento__tile h4,
.proof-wall-card h3,
.experience-node h3,
.tech-column h3,
.blueprint-card h3,
.constellation-card h3,
.brief-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.proof-wall {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proof-wall-card {
  min-height: 230px;
}

/* Project table type */
.project-lab-table .liquid-glass__content {
  display: grid;
  gap: 10px;
}

.project-lab-table__head,
.project-lab-table__row {
  display: grid;
  grid-template-columns: 1.05fr .95fr 1.45fr 1fr;
  gap: 10px;
  align-items: center;
}

.project-lab-table__head span {
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(201,255,227,.88), rgba(150,242,255,.72), rgba(255,225,147,.70));
  color: #061510;
  font-weight: 950;
}

.project-lab-table__row span {
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0, 10, 8, .31);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--v14-muted);
  font-weight: 780;
}

/* Experience map */
.experience-map {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.experience-node {
  min-height: 260px;
}

.experience-node strong {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border-radius: 20px;
  color: #061510;
  background: linear-gradient(135deg, var(--v14-mint), var(--v14-cyan), var(--v14-gold));
  font-family: var(--font-display);
  font-size: 1.4rem;
}

/* Tech matrix */
.tech-matrix {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tech-column {
  min-height: 430px;
}

.tech-column div {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.tech-column span {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(0, 10, 8, .31);
  border: 1px solid rgba(255,255,255,.14);
}

/* Services blueprint */
.blueprint-grid,
.brief-builder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blueprint-card ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.blueprint-card li {
  line-height: 1.55;
}

/* Journey constellation */
.constellation-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.constellation-card {
  min-height: 250px;
}

/* Contact brief */
.brief-card {
  min-height: 190px;
}

/* Increase page richness with bigger section heads and more space */
.section-shell__head {
  max-width: 960px;
}

.section-shell__head h2,
.page-intro h1 {
  font-size: clamp(2.35rem, 4.4vw, 4.5rem) !important;
}

.section-shell__head p,
.page-intro p {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
}

.eyebrow,
.section-shell__eyebrow,
.timeline-card__year,
.mini-kicker {
  color: rgba(248,255,251,.88) !important;
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(255,255,255,.28) !important;
  font-weight: 950;
}

/* Better button and chip readability */
.hero-button {
  font-weight: 950;
}

.badge-chip .liquid-glass__content,
.chip-cloud span {
  color: rgba(249,255,252,.92) !important;
  font-weight: 850;
}

.liquid-dock {
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.070) 43%, rgba(122,214,202,.055)),
    rgba(7, 20, 19, 0.34) !important;
  backdrop-filter: blur(14px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.55) !important;
}

.liquid-dock__link {
  color: rgba(248,255,251,.88) !important;
  font-weight: 900;
}

/* Responsive */
@media (max-width: 1180px) {
  .signature-bento,
  .proof-wall,
  .tech-matrix,
  .experience-map,
  .constellation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signature-bento__main {
    grid-row: auto;
    grid-column: span 2;
  }

  .project-lab-table__head,
  .project-lab-table__row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .signature-bento,
  .proof-wall,
  .tech-matrix,
  .experience-map,
  .blueprint-grid,
  .constellation-grid,
  .brief-builder-grid {
    grid-template-columns: 1fr;
  }

  .signature-bento__main {
    grid-column: auto;
  }

  .project-lab-table__head {
    display: none;
  }

  .project-lab-table__row {
    grid-template-columns: 1fr;
  }
}


/* V15 balanced frosted expansion:
   More blur/frost, stronger text, smoother animations, longer and more varied pages. */
:root {
  --v15-ink: #ffffff;
  --v15-muted: rgba(249, 255, 251, .92);
  --v15-soft: rgba(249, 255, 251, .74);
  --v15-mint: #c9ffe3;
  --v15-cyan: #9cf3ff;
  --v15-gold: #ffe39c;
  --v15-coral: #ff8764;
  --v15-panel: rgba(7, 25, 21, .40);
  --v15-card: rgba(6, 23, 20, .37);
  --v15-inner: rgba(0, 10, 8, .36);
  --v15-line: rgba(249,255,251,.58);
  --v15-strong-line: rgba(255,255,255,.76);
}

/* Smooth page and component motion */
.page-shell {
  animation: v15PageIn 780ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes v15PageIn {
  from { opacity: 0; transform: translateY(18px) scale(.992); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.liquid-glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,.215), rgba(255,255,255,.080) 36%, rgba(120,235,209,.070) 74%, rgba(255,255,255,.085)),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,10,8,.135)),
    var(--v15-card) !important;
  border-color: var(--v15-line) !important;
  box-shadow:
    0 36px 108px rgba(0,0,0,.42),
    0 14px 40px rgba(0,38,30,.25),
    inset 0 1px 1px rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.16) !important;
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    box-shadow 320ms cubic-bezier(.2,.8,.2,1),
    border-color 320ms ease,
    background 320ms ease;
}

.hero-card--lead,
.section-shell__panel,
.page-intro {
  background:
    linear-gradient(145deg, rgba(255,255,255,.225), rgba(255,255,255,.086) 42%, rgba(120,235,209,.075)),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,10,8,.15)),
    var(--v15-panel) !important;
}

.liquid-glass::before {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,255,255,.46), transparent 15%),
    radial-gradient(circle at 86% 8%, rgba(156,243,255,.25), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.025) 42%, rgba(255,255,255,.038)) !important;
  opacity: .62 !important;
  animation: v15SpecularFloat 8s ease-in-out infinite alternate;
}

.liquid-glass__specular {
  opacity: .50 !important;
  animation: v15SpecularFloat 6.5s ease-in-out infinite alternate;
}

.liquid-glass__border {
  border-color: var(--v15-strong-line) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(201,255,227,.10) !important;
}

@keyframes v15SpecularFloat {
  from { transform: translate3d(-0.4%, -0.2%, 0); opacity: .44; }
  to { transform: translate3d(0.6%, 0.4%, 0); opacity: .62; }
}

.project-card,
.capability-card,
.service-card,
.timeline-card,
.identity-card,
.focus-row,
.case-study-card,
.skill-orbit-card,
.workflow-card,
.work-option-card,
.value-card,
.academic-card,
.chapter-card,
.engagement-step,
.social-command-card,
.depth-step,
.architecture-card,
.skill-zone-card,
.service-studio-card,
.narrative-card,
.contact-channel-card,
.question-card,
.signature-bento__main,
.signature-bento__tile,
.proof-wall-card,
.project-lab-table,
.experience-node,
.tech-column,
.blueprint-card,
.constellation-card,
.brief-card,
.route-panel,
.liquid-feature-tile,
.featured-system,
.gallery-wall-card,
.skill-radar__center,
.skill-radar__node,
.service-journey-step,
.deep-story-card,
.journey-river-card,
.contact-action-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.190), rgba(255,255,255,.070) 44%, rgba(120,235,209,.060)),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,10,8,.125)),
    var(--v15-card) !important;
  border-color: rgba(249,255,251,.52) !important;
}

/* Text stronger everywhere */
.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
h2,
h3,
h4,
strong {
  color: var(--v15-ink) !important;
  text-shadow:
    0 6px 24px rgba(0,0,0,.78),
    0 2px 5px rgba(0,0,0,.48),
    0 1px 0 rgba(255,255,255,.08) !important;
}

p,
li,
small,
span {
  text-shadow: 0 3px 16px rgba(0,0,0,.62);
}

.hero-copy__text,
.page-intro p,
.section-shell__head p,
.content-card p,
.service-card p,
.project-card p,
.timeline-card p,
.capability-card p,
.contact-note,
.lab-card p,
.profile-card p,
.metric-card small,
.identity-card p,
.focus-row p,
.case-study-card p,
.workflow-card p,
.work-option-card p,
.value-card p,
.academic-card p,
.chapter-card p,
.engagement-step p,
.cockpit-card p,
.depth-step p,
.architecture-card p,
.skill-zone-card span,
.service-studio-card p,
.narrative-card p,
.contact-channel-card a,
.question-card p,
.signature-bento p,
.proof-wall-card p,
.experience-node p,
.tech-column span,
.blueprint-card li,
.constellation-card p,
.brief-card p,
.route-panel p,
.liquid-feature-tile p,
.featured-system p,
.gallery-wall-card p,
.skill-radar p,
.service-journey-step p,
.deep-story-card p,
.journey-river-card p,
.contact-action-card p {
  color: var(--v15-muted) !important;
  font-weight: 820;
}

/* Motion overlay */
.liquid-motion-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.liquid-motion-overlay__lens,
.liquid-motion-overlay__beam {
  position: absolute;
  display: block;
  pointer-events: none;
}

.liquid-motion-overlay__lens {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(156,243,255,.10) 34%, transparent 70%);
  filter: blur(.2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 30px rgba(156,243,255,.10);
}

.liquid-motion-overlay__lens--one { width: 150px; height: 150px; top: 18%; left: 6%; animation: v15FloatLens 18s ease-in-out infinite; }
.liquid-motion-overlay__lens--two { width: 92px; height: 92px; top: 68%; right: 12%; animation: v15FloatLens 15s ease-in-out infinite reverse; }
.liquid-motion-overlay__lens--three { width: 56px; height: 56px; top: 46%; left: 76%; animation: v15FloatLens 21s ease-in-out infinite; }

.liquid-motion-overlay__beam {
  width: 140vw;
  height: 1px;
  left: -20vw;
  background: linear-gradient(90deg, transparent, rgba(201,255,227,.32), rgba(156,243,255,.22), transparent);
  filter: blur(.4px);
}
.liquid-motion-overlay__beam--one { top: 32%; animation: v15Beam 14s linear infinite; }
.liquid-motion-overlay__beam--two { top: 74%; animation: v15Beam 19s linear infinite reverse; }

@keyframes v15FloatLens {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(18px,-24px,0) scale(1.08); }
}

@keyframes v15Beam {
  from { transform: translateX(-7%); }
  to { transform: translateX(7%); }
}

/* New Immersive Index */
.immersive-index {
  display: grid;
  grid-template-columns: minmax(260px, .74fr) 1.26fr;
  gap: clamp(24px, 3vw, 42px);
  align-items: center;
}

.immersive-index__copy h2,
.immersive-gallery__head h2 {
  margin: 14px 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.065em;
}

.immersive-index__copy p,
.immersive-gallery__head p {
  color: var(--v15-muted);
  font-weight: 830;
  max-width: 640px;
}

.immersive-index__rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.route-panel {
  min-height: 290px;
}

.route-panel__number {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--v15-mint), var(--v15-cyan), var(--v15-gold));
  color: #061510;
  font-family: var(--font-display);
  font-weight: 950;
  text-shadow: none;
}

.route-panel small,
.route-panel h3 {
  display: block;
}

/* Feature wall varied layout */
.liquid-feature-wall {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1fr;
  grid-auto-rows: minmax(240px, auto);
  gap: 22px;
}

.liquid-feature-tile {
  min-height: 250px;
}

.liquid-feature-tile.tile-1,
.liquid-feature-tile.tile-4 {
  grid-row: span 2;
}

.liquid-feature-tile span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #061510;
  font-weight: 950;
  background: linear-gradient(135deg, var(--v15-mint), var(--v15-cyan), var(--v15-gold));
  text-shadow: none;
}

.liquid-feature-tile h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.05em;
}

/* Immersive project gallery */
.immersive-gallery {
  display: grid;
  gap: 24px;
}

.featured-system .liquid-glass__content {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: stretch;
}

.featured-system__visual {
  min-height: 340px;
  display: grid;
  align-content: end;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 20% 0%, rgba(201,255,227,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
    rgba(0,10,8,.27);
  border: 1px solid rgba(255,255,255,.18);
}

.featured-system__visual span {
  color: var(--v15-soft);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.featured-system__visual h3 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.featured-system__content {
  display: grid;
  align-content: center;
  gap: 14px;
}

.featured-system__content h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.featured-system__content ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--v15-muted);
  font-weight: 820;
}

.gallery-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.gallery-wall-card {
  min-height: 260px;
}

/* Skill radar */
.skill-radar {
  position: relative;
  min-height: 720px;
  display: grid;
  place-items: center;
}

.skill-radar::before {
  content: '';
  position: absolute;
  width: min(680px, 86vw);
  height: min(680px, 86vw);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.04) 31% 32%, transparent 33% 54%, rgba(255,255,255,.035) 55% 56%, transparent 57%),
    conic-gradient(from 0deg, rgba(201,255,227,.16), transparent, rgba(156,243,255,.12), transparent, rgba(255,227,156,.12), transparent);
  animation: v15RadarSpin 36s linear infinite;
}

@keyframes v15RadarSpin {
  to { transform: rotate(360deg); }
}

.skill-radar__center {
  position: relative;
  z-index: 2;
  width: min(320px, 75vw);
  text-align: center;
}

.skill-radar__center span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #061510;
  background: linear-gradient(135deg, var(--v15-mint), var(--v15-cyan), var(--v15-gold));
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 950;
  text-shadow: none;
}

.skill-radar__node {
  position: absolute;
  width: min(300px, 40vw);
  z-index: 3;
}

.skill-radar__node h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
}

.node-1 { top: 5%; left: 50%; transform: translateX(-50%); }
.node-2 { top: 23%; right: 2%; }
.node-3 { bottom: 23%; right: 2%; }
.node-4 { bottom: 5%; left: 50%; transform: translateX(-50%); }
.node-5 { bottom: 23%; left: 2%; }
.node-6 { top: 23%; left: 2%; }

/* Service Journey */
.service-journey,
.contact-action-hub,
.deep-story,
.journey-river {
  display: grid;
  gap: 22px;
}

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

.service-journey-step {
  min-height: 270px;
}

.service-journey-step span,
.deep-story-card span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--v15-mint), var(--v15-cyan), var(--v15-gold));
  color: #061510;
  font-weight: 950;
  text-shadow: none;
}

.service-journey-step h3,
.deep-story-card h3,
.journey-river-card h3,
.contact-action-card h3 {
  font-family: var(--font-display);
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  line-height: 1;
}

/* About/Journey/Contact additions */
.deep-story,
.contact-action-hub {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journey-river {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.journey-river-card {
  min-height: 245px;
}

.journey-river-card strong {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--v15-cyan) !important;
}

.contact-action-card {
  min-height: 220px;
}

/* Stronger dock motion */
.liquid-dock__link {
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), color 240ms ease;
}

.liquid-dock__link:hover {
  transform: translateY(-3px) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .page-shell,
  .liquid-glass,
  .liquid-glass::before,
  .liquid-glass__specular,
  .liquid-motion-overlay__lens,
  .liquid-motion-overlay__beam,
  .glass-marquee,
  .skill-radar::before {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1180px) {
  .immersive-index,
  .featured-system .liquid-glass__content {
    grid-template-columns: 1fr;
  }

  .liquid-feature-wall,
  .gallery-wall,
  .service-journey,
  .deep-story,
  .journey-river,
  .contact-action-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-radar {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-radar::before {
    display: none;
  }

  .skill-radar__center,
  .skill-radar__node {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
  }

  .skill-radar__center {
    grid-column: span 2;
    width: auto;
  }
}

@media (max-width: 720px) {
  .immersive-index__rail,
  .liquid-feature-wall,
  .gallery-wall,
  .service-journey,
  .deep-story,
  .journey-river,
  .contact-action-hub,
  .skill-radar {
    grid-template-columns: 1fr;
  }

  .skill-radar__center {
    grid-column: auto;
  }
}


/* V16 owner-image integrated creative liquid glass update
   Adds the supplied owner image, stronger text visibility, more creative typography, and bigger long-form pages. */
:root {
  --v16-ink: #ffffff;
  --v16-muted: rgba(249, 255, 251, .94);
  --v16-soft: rgba(249, 255, 251, .76);
  --v16-mint: #caffdf;
  --v16-cyan: #9bf3ff;
  --v16-gold: #ffe08a;
  --v16-coral: #ff8a66;
  --v16-rose: #ffb7d8;
  --v16-panel: rgba(9, 28, 24, .42);
  --v16-card: rgba(7, 25, 22, .38);
  --v16-inner: rgba(0, 10, 8, .36);
  --v16-line: rgba(249,255,251,.58);
  --v16-line-hot: rgba(255,255,255,.80);
}

/* Owner portrait */
.owner-portrait {
  overflow: hidden;
}

.owner-portrait .liquid-glass__content {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.owner-portrait--wide .liquid-glass__content {
  grid-template-columns: minmax(280px, .9fr) minmax(260px, .7fr);
  align-items: center;
}

.owner-portrait__frame {
  position: relative;
  min-height: 420px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.32);
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.20), transparent 24%),
    rgba(0, 10, 8, .24);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.42),
    0 26px 60px rgba(0,0,0,.28);
}

.owner-portrait--compact .owner-portrait__frame {
  min-height: 300px;
}

.owner-portrait--wide .owner-portrait__frame {
  min-height: 380px;
}

.owner-portrait__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
}

.owner-portrait__shine {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.34), transparent 28%, transparent 68%, rgba(156,243,255,.10)),
    radial-gradient(circle at 80% 12%, rgba(255,224,138,.20), transparent 22%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.owner-portrait__caption {
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    rgba(0, 10, 8, .22);
  border: 1px solid rgba(255,255,255,.18);
}

.owner-portrait__caption span,
.owner-fact-card span,
.creative-type-card h3 em,
.mega-zone-card span,
.profile-story-card span {
  color: var(--v16-cyan);
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.owner-portrait__caption strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: -.055em;
}

.owner-portrait__caption p {
  margin: 8px 0 0;
}

/* Replace old monogram-heavy feeling with real owner image hierarchy. */
.hero-side {
  gap: 20px;
}

.profile-card--owner-info {
  min-height: 260px;
}

.profile-card--owner-info .profile-card__monogram {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  font-size: 1.7rem;
}

/* Owner identity section */
.owner-identity-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, .92fr);
  gap: clamp(20px, 2.5vw, 34px);
}

.owner-identity-grid > .owner-message-card {
  grid-column: 1 / -1;
}

.owner-identity-grid__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.owner-fact-card strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1;
  color: #fff;
}

.owner-message-card h3,
.contact-owner-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.065em;
}

/* Creative typography section */
.creative-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.creative-type-card {
  min-height: 260px;
}

.creative-type-card h3 {
  margin: 0 0 18px;
  display: grid;
  gap: 0;
}

.creative-type-card h3 span {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6vw, 6.3rem);
  line-height: .82;
  letter-spacing: -.08em;
  background: linear-gradient(135deg, var(--v16-mint), var(--v16-cyan), var(--v16-gold), var(--v16-coral), var(--v16-rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none;
}

.creative-type-card h3 em {
  font-style: normal;
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
}

.creative-type-card p {
  font-size: clamp(1.08rem, 1.4vw, 1.28rem);
}

/* Mega page zones */
.mega-zone-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  grid-auto-rows: minmax(250px, auto);
  gap: clamp(18px, 2vw, 28px);
}

.mega-zone-card--1,
.mega-zone-card--4 {
  grid-row: span 2;
}

.mega-zone-card span {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #061510;
  background: linear-gradient(135deg, var(--v16-mint), var(--v16-cyan), var(--v16-gold));
  text-shadow: none;
}

.mega-zone-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.7vw, 3rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.mega-zone-card ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

/* About owner profile */
.profile-story-grid,
.contact-owner-grid {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}

.profile-story-grid__content {
  display: grid;
  gap: 16px;
}

.profile-story-card .liquid-glass__content {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: center;
}

.profile-story-card span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--v16-mint), var(--v16-cyan), var(--v16-gold));
  color: #061510;
  text-shadow: none;
}

/* Contact owner */
.contact-owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* Stronger global font visibility */
.hero-copy h1,
.section-shell__head h2,
.page-intro h1,
.owner-message-card h3,
.contact-owner-card h3,
.mega-zone-card h3 {
  text-shadow:
    0 8px 28px rgba(0,0,0,.82),
    0 3px 8px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.10) !important;
}

.owner-message-card p,
.owner-fact-card strong,
.creative-type-card p,
.mega-zone-card li,
.profile-story-card p,
.contact-owner-card p {
  color: var(--v16-muted) !important;
  font-weight: 850;
  text-shadow: 0 4px 18px rgba(0,0,0,.68) !important;
}

.owner-portrait,
.owner-fact-card,
.owner-message-card,
.creative-type-card,
.mega-zone-card,
.profile-story-card,
.contact-owner-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.082) 44%, rgba(120,235,209,.072)),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,10,8,.15)),
    rgba(7, 25, 22, .41) !important;
  border-color: rgba(249,255,251,.58) !important;
}

.owner-portrait:hover .owner-portrait__image {
  transform: scale(1.055);
}

.owner-portrait__image {
  transition: transform 460ms cubic-bezier(.2,.8,.2,1), filter 460ms ease;
}

/* More beautiful page rhythm */
.section-shell {
  scroll-margin-top: 90px;
}

.page-main {
  gap: clamp(72px, 9vh, 116px) !important;
}

@media (max-width: 1120px) {
  .owner-identity-grid,
  .profile-story-grid,
  .contact-owner-grid,
  .owner-portrait--wide .liquid-glass__content {
    grid-template-columns: 1fr;
  }

  .mega-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-zone-card--1,
  .mega-zone-card--4 {
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .owner-identity-grid__facts,
  .creative-type-grid,
  .mega-zone-grid {
    grid-template-columns: 1fr;
  }

  .profile-story-card .liquid-glass__content {
    grid-template-columns: 1fr;
  }

  .owner-portrait__frame {
    min-height: 320px;
  }
}


/* V17 blank-space correction
   Fixes the large empty owner section by filling the portrait surface with useful content,
   reducing dead space, and balancing large glass panels with internal layers. */

/* Owner portrait should never feel like a huge empty glass rectangle. */
.owner-portrait--wide .liquid-glass__content {
  grid-template-columns: minmax(280px, .78fr) minmax(300px, .72fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 20px;
  min-height: 520px;
}

.owner-portrait--wide .owner-portrait__frame {
  grid-row: 1 / span 2;
  min-height: 500px;
}

.owner-portrait--wide .owner-portrait__caption {
  align-self: start;
  min-height: 185px;
  display: grid;
  align-content: center;
}

.owner-portrait__signal-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-self: stretch;
}

.owner-portrait__signal-board div {
  min-height: 132px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 16% 0%, rgba(201,255,227,.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.034)),
    rgba(0, 10, 8, .30);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.24),
    0 14px 34px rgba(0,0,0,.16);
}

.owner-portrait__signal-board span {
  display: block;
  margin-bottom: 9px;
  color: var(--v16-cyan, #9bf3ff);
  font-size: .72rem;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.owner-portrait__signal-board strong {
  display: block;
  color: #fff !important;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-shadow:
    0 5px 18px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.08);
}

/* The owner identity section gets a more balanced editorial layout. */
.owner-identity-grid {
  align-items: stretch;
}

.owner-identity-grid > .owner-portrait {
  min-height: 100%;
}

.owner-identity-grid__facts {
  align-content: stretch;
}

.owner-fact-card .liquid-glass__content {
  min-height: 134px;
  display: grid;
  align-content: center;
}

.owner-message-card .liquid-glass__content {
  min-height: 250px;
  display: grid;
  align-content: center;
}

/* Add an inner contrast layer to big cards so transparent sections do not look empty. */
.owner-message-card,
.mega-zone-card,
.signature-bento__main,
.featured-system,
.project-lab-table,
.contact-owner-card {
  position: relative;
  overflow: hidden;
}

.owner-message-card::after,
.mega-zone-card::after,
.signature-bento__main::after,
.featured-system::after,
.project-lab-table::after,
.contact-owner-card::after {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(201,255,227,.050), transparent 32%, rgba(255,224,138,.040) 70%, transparent),
    radial-gradient(circle at 84% 18%, rgba(156,243,255,.075), transparent 24%);
  border: 1px solid rgba(255,255,255,.070);
  opacity: .95;
}

/* Reduce oversized dead space in the first viewport while keeping a premium large layout. */
.hero-card--lead {
  min-height: clamp(520px, 64vh, 620px) !important;
}

.owner-portrait--hero .liquid-glass__content {
  gap: 12px;
}

.owner-portrait--hero .owner-portrait__frame {
  min-height: 360px;
}

.owner-portrait--hero .owner-portrait__caption {
  padding: 16px;
}

/* If the portrait sits above metrics, make the side column flow tighter. */
.hero-side {
  align-content: start;
}

.metric-stack {
  margin-top: 4px;
}

/* More interesting fill for large empty-looking fact cards. */
.owner-fact-card {
  position: relative;
  overflow: hidden;
}

.owner-fact-card::after {
  content: '';
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.30), rgba(156,243,255,.13) 34%, transparent 70%);
  border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
}

/* Make the lower section headings sit safely above the dock and avoid awkward overlap impression. */
.section-shell {
  position: relative;
}

.section-shell__head {
  padding-bottom: clamp(12px, 1.5vw, 22px);
}

/* Better responsive behavior: owner portrait stacks without blank space. */
@media (max-width: 1120px) {
  .owner-portrait--wide .liquid-glass__content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }

  .owner-portrait--wide .owner-portrait__frame {
    grid-row: auto;
    min-height: 420px;
  }

  .owner-portrait__signal-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .owner-portrait__signal-board {
    grid-template-columns: 1fr;
  }

  .owner-portrait--wide .owner-portrait__frame,
  .owner-portrait--hero .owner-portrait__frame {
    min-height: 330px;
  }

  .owner-portrait__signal-board div {
    min-height: 112px;
  }
}


/* V18 owner portrait size and crop correction
   Fixes the owner image proportion, crop, width, height, and blank-space problem.
   The supplied image is 500x439, so every portrait frame now uses the same ratio. */

.owner-portrait {
  overflow: hidden;
}

.owner-portrait .liquid-glass__content {
  display: grid;
  gap: 16px;
  padding: clamp(14px, 1.5vw, 20px);
}

/* Correct image geometry: the photo is 500 x 439. */
.owner-portrait__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 439;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 22% 10%, rgba(255,255,255,.20), transparent 26%),
    rgba(0, 10, 8, .26);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.44),
    0 24px 58px rgba(0,0,0,.28);
}

.owner-portrait__image {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.001);
  filter: saturate(1.06) contrast(1.03) brightness(1.01);
}

/* Wide owner card: image and caption are balanced; no huge empty vertical rectangle. */
.owner-portrait--wide .liquid-glass__content {
  grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 1fr);
  grid-template-areas:
    "photo caption"
    "photo signals";
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  min-height: 0 !important;
}

.owner-portrait--wide .owner-portrait__frame {
  grid-area: photo;
  align-self: start;
}

.owner-portrait--wide .owner-portrait__caption {
  grid-area: caption;
  min-height: 0 !important;
  align-self: stretch;
  display: grid;
  align-content: center;
}

.owner-portrait--wide .owner-portrait__signal-board {
  grid-area: signals;
}

/* Hero and compact modes should also respect the original image ratio. */
.owner-portrait--hero .owner-portrait__frame,
.owner-portrait--compact .owner-portrait__frame {
  aspect-ratio: 500 / 439;
  min-height: 0 !important;
}

.owner-portrait--hero .liquid-glass__content {
  gap: 12px;
}

.owner-portrait--compact .liquid-glass__content {
  gap: 12px;
}

/* Caption now uses the available space cleanly instead of creating dead area. */
.owner-portrait__caption {
  padding: clamp(16px, 2vw, 24px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 12%, rgba(156,243,255,.10), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.036)),
    rgba(0, 10, 8, .28);
  border: 1px solid rgba(255,255,255,.20);
}

.owner-portrait__caption span {
  display: block;
  margin-bottom: 10px;
}

.owner-portrait__caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4.15rem);
  line-height: .96;
  letter-spacing: -.065em;
}

.owner-portrait--hero .owner-portrait__caption strong,
.owner-portrait--compact .owner-portrait__caption strong {
  font-size: clamp(1.65rem, 2.8vw, 2.6rem);
}

.owner-portrait__caption p {
  margin: 12px 0 0;
  color: rgba(249,255,251,.90) !important;
  font-weight: 780;
}

/* Signal board fits beside the image; no clipping, no bottom dead space. */
.owner-portrait__signal-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-self: stretch;
}

.owner-portrait__signal-board div {
  min-height: 112px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 12%, rgba(156,243,255,.13), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.036)),
    rgba(0, 10, 8, .30);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    0 14px 34px rgba(0,0,0,.16);
}

.owner-portrait__signal-board span {
  display: block;
  margin-bottom: 9px;
  color: var(--v16-cyan, #9bf3ff);
  font-size: .68rem;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .105em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.owner-portrait__signal-board strong {
  display: block;
  color: #fff !important;
  font-family: var(--font-display);
  font-size: clamp(.98rem, 1.2vw, 1.28rem);
  line-height: 1.09;
  letter-spacing: -.035em;
  text-shadow:
    0 5px 18px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.08);
}

/* Owner identity section: balanced grid, no empty left block. */
.owner-identity-grid {
  grid-template-columns: minmax(560px, 1.05fr) minmax(350px, .95fr);
  align-items: start;
}

.owner-identity-grid > .owner-portrait {
  align-self: start;
}

.owner-identity-grid__facts {
  align-content: start;
}

.owner-fact-card .liquid-glass__content {
  min-height: 132px;
  display: grid;
  align-content: center;
}

/* Tighten the hero owner portrait so the top area does not feel stretched. */
.hero-side > .owner-portrait {
  max-width: 100%;
}

.hero-side .owner-portrait__caption {
  display: none;
}

.hero-side .owner-portrait__frame {
  border-radius: 32px;
}

/* Make image hover premium without zoom-cropping too much. */
.owner-portrait:hover .owner-portrait__image {
  transform: scale(1.025);
}

.owner-portrait__image {
  transition: transform 460ms cubic-bezier(.2,.8,.2,1), filter 460ms ease;
}

/* Prevent dock overlap from hiding important owner/fact content by adding section spacing. */
.owner-identity-grid,
.profile-story-grid,
.contact-owner-grid {
  padding-bottom: clamp(14px, 2vh, 26px);
}

@media (max-width: 1180px) {
  .owner-identity-grid,
  .owner-portrait--wide .liquid-glass__content {
    grid-template-columns: 1fr;
  }

  .owner-portrait--wide .liquid-glass__content {
    grid-template-areas:
      "photo"
      "caption"
      "signals";
  }

  .owner-portrait__signal-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .owner-portrait__signal-board {
    grid-template-columns: 1fr;
  }

  .owner-portrait__caption strong {
    font-size: clamp(1.8rem, 11vw, 3rem);
  }

  .owner-portrait__signal-board div {
    min-height: 104px;
  }
}


/* Static conversion compatibility */
:root { --font-body: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Space Grotesk", Manrope, Inter, ui-sans-serif, system-ui, sans-serif; }
body { font-family: var(--font-body); }
img { max-width: 100%; }
.contact-form .form-status.success { color: #b8ffd9; }
.contact-form .form-status.error { color: #ffc1c1; }

/* Layout-only hero gap correction
   The hero grid has a tall right column. Stretch the left liquid-glass
   hero panel to the same grid-row height instead of adding new content. */
.hero-grid {
  align-items: stretch;
}

.hero-card--lead {
  height: 100%;
}

.hero-card--lead > .liquid-glass__content {
  min-height: 100%;
}

@media (max-width: 900px) {
  .hero-grid {
    align-items: start;
  }

  .hero-card--lead {
    height: auto;
  }
}

/* =========================================================
   Premium iOS glass dock, page transitions, and reveal motion
   This block is intentionally at the end so it upgrades the
   existing design without changing the content or color system.
   ========================================================= */
:root {
  --ios-ease: cubic-bezier(.20, .86, .25, 1);
  --ios-spring: cubic-bezier(.16, 1, .30, 1);
  --ios-soft: cubic-bezier(.22, .61, .36, 1);
  --dock-safe-bottom: max(16px, env(safe-area-inset-bottom));
  --dock-glow: rgba(154, 238, 255, .22);
  --dock-pill: linear-gradient(135deg, rgba(218, 255, 250, .98), rgba(153, 233, 255, .94) 42%, rgba(245, 216, 151, .92));
}

@view-transition {
  navigation: auto;
}

html,
body {
  overflow-x: clip;
  scroll-padding-bottom: 170px;
}

body {
  min-height: 100dvh;
}

.page-shell {
  overflow: clip;
}

main,
section,
.liquid-glass,
.liquid-glass__content,
.profile-story-grid,
.profile-story-grid__content,
.owner-identity-grid,
.owner-portrait__caption,
.owner-portrait__signal-board,
.contact-grid,
.project-grid,
.service-grid,
.skill-level-grid,
.timeline-grid,
.capability-grid {
  min-width: 0;
}

.page-main {
  width: min(calc(100% - clamp(20px, 4vw, 42px)), var(--max-width));
  padding-bottom: clamp(176px, 23vh, 250px) !important;
  view-transition-name: page-content;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
}

/* Cross-document View Transition API animation for modern browsers. */
::view-transition-old(page-content) {
  animation: premiumViewOut 360ms var(--ios-soft) both;
}

::view-transition-new(page-content) {
  animation: premiumViewIn 640ms var(--ios-spring) both;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 640ms;
}

::view-transition-old(liquid-dock),
::view-transition-new(liquid-dock) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes premiumViewOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  to { opacity: .24; transform: translate3d(0, -18px, 0) scale(.985); filter: blur(14px); }
}

@keyframes premiumViewIn {
  0% { opacity: 0; transform: translate3d(0, 54px, 0) scale(.965); filter: blur(18px); }
  56% { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

/* Fallback page motion used before normal multi-page navigation. */
body.dock-view-enter .page-main {
  animation: dockViewEnter 680ms var(--ios-spring) both;
}

body.is-view-leaving .page-main {
  animation: dockViewLeave 300ms var(--ios-soft) both;
  pointer-events: none;
}

body.is-view-leaving .liquid-dock-wrap {
  transform: translate3d(-50%, 7px, 0) scale(.985);
}

@keyframes dockViewEnter {
  0% { opacity: 0; transform: translate3d(0, 58px, 0) scale(.965); filter: blur(18px); }
  58% { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes dockViewLeave {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  to { opacity: .30; transform: translate3d(0, -16px, 0) scale(.985); filter: blur(12px); }
}

/* Fixed glass dock: kept bottom-centered, soft, translucent, and responsive. */
.liquid-dock-wrap {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--dock-safe-bottom) !important;
  width: min(calc(100% - clamp(14px, 4vw, 34px)), 1060px) !important;
  transform: translate3d(-50%, 0, 0);
  z-index: 999 !important;
  pointer-events: none;
  view-transition-name: liquid-dock;
  transition: transform 420ms var(--ios-spring), opacity 420ms var(--ios-soft), filter 420ms var(--ios-soft);
  will-change: transform;
}

.liquid-dock {
  pointer-events: auto;
  overflow: visible !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .10) 34%, rgba(63, 124, 111, .16) 100%),
    rgba(8, 22, 18, .42) !important;
  border: 1px solid rgba(248, 255, 251, .58) !important;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, .42),
    0 8px 28px rgba(111, 238, 255, .13),
    inset 0 1px 1px rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(24px) saturate(1.75) contrast(1.06) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.75) contrast(1.06) brightness(1.06) !important;
}

.liquid-dock::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, .34), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(154, 238, 255, .18), transparent 23%),
    linear-gradient(180deg, rgba(255, 255, 255, .20), transparent 45%);
  opacity: .72;
  mix-blend-mode: screen;
}

.liquid-dock .liquid-glass__content,
.liquid-glass--dock .liquid-glass__content {
  padding: clamp(7px, 1vw, 11px) !important;
  overflow: visible;
}

.liquid-dock__nav {
  position: relative;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .8vw, 10px);
  min-height: clamp(58px, 7vh, 68px);
  isolation: isolate;
}

/* The JS-controlled pill glides to the selected item like an iOS dock highlight. */
.liquid-dock__indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 0;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  background: var(--dock-pill);
  box-shadow:
    0 14px 30px rgba(148, 239, 255, .20),
    0 3px 10px rgba(255, 255, 255, .18),
    inset 0 1px 1px rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(0, 30, 26, .15);
  transition:
    transform 560ms var(--ios-spring),
    width 560ms var(--ios-spring),
    opacity 260ms ease;
  will-change: transform, width;
}

.liquid-dock__indicator::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, .70), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .04));
  pointer-events: none;
  mix-blend-mode: screen;
}

.liquid-dock__link {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: clamp(72px, 8vw, 96px);
  max-width: 150px;
  min-height: clamp(46px, 5.9vh, 56px);
  padding: 0 clamp(10px, 1.1vw, 18px) !important;
  border-radius: 999px;
  color: rgba(245, 252, 255, .84) !important;
  opacity: .82;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .42);
  transform: translate3d(0, 0, 0) scale(.96);
  transition:
    flex-grow 520ms var(--ios-spring),
    transform 420ms var(--ios-spring),
    opacity 280ms ease,
    color 280ms ease,
    text-shadow 280ms ease;
  will-change: transform, flex-grow;
}

.liquid-dock__link::before {
  display: none !important;
}

.liquid-dock__link span {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  transform: translateZ(0);
  transition: transform 420ms var(--ios-spring), letter-spacing 420ms var(--ios-spring);
}

.liquid-dock__link:hover,
.liquid-dock__link:focus-visible {
  opacity: 1;
  color: #ffffff !important;
  transform: translate3d(0, -4px, 0) scale(1.035);
  outline: none;
}

.liquid-dock__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(154, 238, 255, .32);
}

.liquid-dock__link.is-active {
  flex-grow: 1.42;
  opacity: 1;
  color: #051711 !important;
  font-weight: 850;
  transform: translate3d(0, -2px, 0) scale(1.035);
  text-shadow: none;
}

.liquid-dock__link.is-active span {
  letter-spacing: -.01em;
}

.liquid-dock__link.is-pressing {
  transform: translate3d(0, 0, 0) scale(.94);
  transition-duration: 120ms;
}

/* Scroll reveal: elements rise from the dock direction, sharpen, and become clear. */
.motion-ready .reveal-item {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(.986);
  filter: blur(10px);
  transition:
    opacity 620ms var(--ios-soft) var(--reveal-delay, 0ms),
    transform 660ms var(--ios-spring) var(--reveal-delay, 0ms),
    filter 620ms var(--ios-soft) var(--reveal-delay, 0ms);
  will-change: transform, opacity, filter;
}

.motion-ready .reveal-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Image and button micro-interactions stay soft and premium. */
.hero-button,
.owner-portrait__image,
.project-card,
.service-card,
.capability-card,
.timeline-card,
.contact-card,
.lab-card,
.skill-bar-card,
.principle-card,
.metric-card {
  transition-timing-function: var(--ios-spring) !important;
}

.hero-button:hover,
.project-card:hover,
.service-card:hover,
.capability-card:hover,
.timeline-card:hover,
.contact-card:hover,
.lab-card:hover,
.skill-bar-card:hover,
.principle-card:hover,
.metric-card:hover {
  transform: translate3d(0, -4px, 0) scale(1.012);
}

/* Fix the visible clipping from the screenshots without changing content. */
.owner-portrait__caption strong,
.profile-card h2,
.section-shell__head h2,
.page-intro h1,
.hero-copy h1 {
  overflow-wrap: anywhere;
}

.owner-portrait--compact .owner-portrait__caption strong {
  font-size: clamp(1.45rem, 2.4vw, 2.25rem) !important;
}

.profile-story-grid,
.contact-owner-grid {
  grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr) !important;
}

.profile-story-card .liquid-glass__content {
  grid-template-columns: clamp(48px, 6vw, 70px) minmax(0, 1fr) !important;
}

/* Keep the first screen cleaner so the fixed dock does not hide key cards. */
.hero-card--lead {
  min-height: clamp(480px, 58vh, 600px) !important;
}

.profile-card--owner-info,
.metric-card {
  min-height: clamp(132px, 16vh, 160px) !important;
}

.metric-card strong {
  font-size: clamp(2.7rem, 4vw, 3.55rem) !important;
}

@media (max-width: 1120px) {
  .profile-story-grid,
  .contact-owner-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .page-main {
    width: min(calc(100% - 16px), var(--max-width));
    padding-bottom: clamp(190px, 30vh, 270px) !important;
  }

  .liquid-dock-wrap {
    width: min(calc(100% - 10px), 680px) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .liquid-dock {
    border-radius: 30px !important;
  }

  .liquid-dock__nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px;
    min-height: auto;
  }

  .liquid-dock__indicator {
    top: 4px;
    bottom: 4px;
  }

  .liquid-dock__link {
    flex: none;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    padding: 0 6px !important;
    font-size: clamp(.68rem, 2.7vw, .82rem);
    transform: translate3d(0, 0, 0) scale(.98);
  }

  .liquid-dock__link.is-active {
    flex-grow: 1;
    transform: translate3d(0, -1px, 0) scale(1.02);
  }
}

@media (max-width: 430px) {
  .liquid-dock__nav {
    gap: 5px;
  }

  .liquid-dock__link {
    min-height: 38px;
    font-size: .68rem;
  }

  .liquid-dock .liquid-glass__content,
  .liquid-glass--dock .liquid-glass__content {
    padding: 6px !important;
  }
}

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

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

  .page-main,
  body.dock-view-enter .page-main,
  body.is-view-leaving .page-main,
  .motion-ready .reveal-item,
  .motion-ready .reveal-item.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .liquid-dock__indicator {
    transition: none !important;
  }
}


/* =========================================================
   Final premium refinement patch
   - better typography and readability
   - filled hero empty space with a polished content strip
   - stronger liquid dock visuals
   - faster motion outside the dock
   ========================================================= */
:root {
  --font-body: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --text-strong: rgba(247, 252, 255, .97);
  --text-body: rgba(236, 245, 249, .88);
  --text-soft: rgba(221, 235, 240, .72);
  --accent-cyan: #9aefff;
  --accent-cyan-strong: #c9fbff;
  --accent-gold: #f3ddb3;
  --hero-card-surface: rgba(8, 22, 18, .22);
}

body {
  color: var(--text-body) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p, li, small, label, input, textarea, select {
  color: var(--text-body);
}

h1, h2, h3, h4, h5, h6,
.hero-copy h1,
.page-intro h1,
.section-shell__head h2,
.profile-card h2,
.owner-portrait__caption strong,
.metric-card strong {
  color: var(--text-strong) !important;
  letter-spacing: -.02em;
}

.eyebrow,
.section-shell__eyebrow,
.owner-portrait__caption span,
.profile-card__monogram,
.metric-card span,
.metric-card small {
  color: var(--accent-cyan-strong) !important;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-copy__text {
  max-width: 62ch;
  font-size: clamp(1rem, 1.08vw, 1.08rem);
  line-height: 1.8;
  color: rgba(239, 247, 251, .92) !important;
}

.badge-chip .liquid-glass__content {
  color: rgba(247, 252, 255, .92);
  font-weight: 700;
}

.hero-button {
  min-height: 52px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  box-shadow: 0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-button--primary {
  background: linear-gradient(135deg, rgba(201,251,255,.96), rgba(151,233,255,.92) 44%, rgba(243,221,179,.95)) !important;
  color: #062018 !important;
}

.hero-button--secondary {
  background: rgba(255,255,255,.08) !important;
  color: rgba(248,253,255,.94) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
}

.hero-button:hover {
  transform: translate3d(0,-3px,0) scale(1.01);
}

.hero-card--lead {
  min-height: clamp(620px, 66vh, 760px) !important;
}

.hero-card--lead > .liquid-glass__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.hero-spotlight {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 6px;
  padding: clamp(18px, 2vw, 22px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 44%, rgba(154,239,255,.09)),
    rgba(6, 18, 15, .18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 34px rgba(0,0,0,.14);
  overflow: hidden;
}

.hero-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 34%);
  opacity: .8;
}

.hero-spotlight__intro {
  display: grid;
  gap: 8px;
}

.hero-spotlight__label {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #052118;
  background: linear-gradient(135deg, rgba(201,251,255,.98), rgba(243,221,179,.92));
  box-shadow: 0 10px 24px rgba(154,239,255,.18);
}

.hero-spotlight__intro p {
  margin: 0;
  max-width: 64ch;
  color: rgba(241,248,252,.9);
}

.hero-spotlight__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.hero-spotlight__stat {
  display: grid;
  gap: 6px;
  padding: 14px 14px 13px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
}

.hero-spotlight__stat em {
  font-style: normal;
  color: var(--accent-cyan-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .08em;
}

.hero-spotlight__stat strong {
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.25;
}

.hero-spotlight__stat span {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.5;
}

.hero-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  color: rgba(248,253,255,.95) !important;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 220ms var(--ios-spring), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.hero-social:hover {
  transform: translate3d(0,-2px,0);
  background: rgba(255,255,255,.1);
  border-color: rgba(201,251,255,.34);
  box-shadow: 0 12px 24px rgba(0,0,0,.16), 0 0 0 1px rgba(201,251,255,.14) inset;
}

.hero-social img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.hero-social span {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
}

.hero-socials__note {
  margin: -4px 0 0;
  color: rgba(227,239,243,.55);
  font-size: .82rem;
}

.profile-card p,
.profile-card li,
.contact-list a,
.contact-list strong,
.metric-card small {
  color: rgba(241,248,252,.88) !important;
}

.metric-card .liquid-glass__content,
.profile-card .liquid-glass__content,
.owner-portrait .liquid-glass__content,
.section-shell__panel > .liquid-glass__content,
.page-intro > .liquid-glass__content {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 36%);
}

/* Refined liquid dock */
.liquid-dock-wrap {
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(calc(100% - clamp(14px, 3.4vw, 36px)), 980px) !important;
}

.liquid-dock {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06) 44%, rgba(124,210,194,.08) 100%),
    rgba(7, 18, 15, .42) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.35),
    0 6px 24px rgba(154,239,255,.1),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;
}

.liquid-dock .liquid-glass__content,
.liquid-glass--dock .liquid-glass__content {
  padding: 7px !important;
}

.liquid-dock__nav {
  gap: clamp(3px, .6vw, 8px);
  min-height: 60px;
}

.liquid-dock__indicator {
  top: 5px;
  bottom: 5px;
  background: linear-gradient(135deg, rgba(216,252,255,.98), rgba(154,239,255,.92) 48%, rgba(243,221,179,.88));
  box-shadow: 0 10px 22px rgba(154,239,255,.18), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform 420ms var(--ios-spring), width 420ms var(--ios-spring), opacity 200ms ease;
}

.liquid-dock__link {
  min-width: 0;
  max-width: 126px;
  min-height: 50px;
  padding: 0 clamp(8px, .8vw, 14px) !important;
  font-size: clamp(.92rem, .94vw, 1rem);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  opacity: .88;
  transform: translate3d(0,0,0) scale(.985);
  transition: flex-grow 400ms var(--ios-spring), transform 280ms var(--ios-spring), opacity 180ms ease, color 180ms ease;
}

.liquid-dock__link:hover,
.liquid-dock__link:focus-visible {
  transform: translate3d(0,-2px,0) scale(1.01);
}

.liquid-dock__link.is-active {
  flex-grow: 1.18;
  color: #07231a !important;
  transform: translate3d(0,-1px,0) scale(1.01);
}

/* Make non-dock motion feel quicker and more responsive */
::view-transition-old(page-content) {
  animation: premiumViewOutFast 220ms var(--ios-soft) both;
}

::view-transition-new(page-content) {
  animation: premiumViewInFast 460ms var(--ios-spring) both;
}

@keyframes premiumViewOutFast {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
  to { opacity: .2; transform: translate3d(0,-10px,0) scale(.99); filter: blur(8px); }
}

@keyframes premiumViewInFast {
  0% { opacity: 0; transform: translate3d(0,28px,0) scale(.982); filter: blur(12px); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}

body.dock-view-enter .page-main {
  animation: dockViewEnterFast 520ms var(--ios-spring) both !important;
}

body.is-view-leaving .page-main {
  animation: dockViewLeaveFast 200ms var(--ios-soft) both !important;
}

@keyframes dockViewEnterFast {
  0% { opacity: 0; transform: translate3d(0,32px,0) scale(.984); filter: blur(12px); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}

@keyframes dockViewLeaveFast {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
  to { opacity: .24; transform: translate3d(0,-10px,0) scale(.99); filter: blur(8px); }
}

.motion-ready .reveal-item {
  transform: translate3d(0,18px,0) scale(.992) !important;
  filter: blur(6px) !important;
  transition:
    opacity 420ms var(--ios-soft) var(--reveal-delay, 0ms),
    transform 460ms var(--ios-spring) var(--reveal-delay, 0ms),
    filter 380ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
}

.motion-ready .reveal-item.is-revealed {
  transform: translate3d(0,0,0) scale(1) !important;
  filter: blur(0) !important;
}

@media (max-width: 1100px) {
  .hero-spotlight__stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-card--lead {
    min-height: auto !important;
  }

  .hero-spotlight {
    padding: 16px;
  }

  .hero-socials {
    gap: 8px;
  }

  .hero-social {
    padding: 10px 12px;
  }

  .liquid-dock-wrap {
    width: min(calc(100% - 10px), 100%) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .liquid-dock__nav {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0;
  }

  .liquid-dock__nav::-webkit-scrollbar {
    display: none;
  }

  .liquid-dock__link {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 42px;
    padding: 0 12px !important;
    font-size: .82rem;
  }

  .liquid-dock__link.is-active {
    flex-grow: 0;
  }
}

@media (max-width: 480px) {
  .hero-copy,
  .hero-spotlight {
    gap: 14px;
  }

  .hero-social span {
    font-size: .86rem;
  }
}


/* =========================================================
   FINAL VISUAL FIX PATCH
   Fixes reported issues: nav pill sorting/color, text overlap,
   excessive glow, huge fonts, and content hidden under dock.
   ========================================================= */
:root {
  --font-body: "Urbanist", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-display: "Syne", "Urbanist", Inter, ui-sans-serif, system-ui, sans-serif !important;
  --final-glass-bg: rgba(9, 23, 20, .33);
  --final-glass-border: rgba(242, 255, 252, .30);
  --final-text: rgba(246, 252, 255, .96);
  --final-muted: rgba(230, 241, 245, .78);
  --final-soft: rgba(210, 230, 235, .64);
  --final-cyan: rgba(181, 249, 255, .92);
  --final-shadow: 0 14px 36px rgba(0,0,0,.26);
}

html, body {
  overflow-x: clip !important;
}

body {
  font-family: var(--font-body) !important;
  font-weight: 600;
  color: var(--final-text) !important;
  letter-spacing: .005em;
}

/* Make all grid children shrink correctly instead of clipping text. */
*, *::before, *::after { box-sizing: border-box; }
.hero-grid > *,
.hero-side > *,
.owner-identity-grid > *,
.owner-identity-grid__facts > *,
.cockpit-grid > *,
.project-grid > *,
.two-col-grid > *,
.profile-story-grid > *,
.contact-grid > *,
.liquid-glass,
.liquid-glass__content {
  min-width: 0 !important;
}

.liquid-glass {
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.032)), var(--final-glass-bg) !important;
  border-color: var(--final-glass-border) !important;
  box-shadow: var(--final-shadow), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.06) !important;
}

.liquid-glass__specular,
.liquid-glass::after,
.owner-portrait__shine,
.liquid-motion-overlay__lens,
.liquid-motion-overlay__beam {
  opacity: .32 !important;
}

.ambient-scene__glass-lines,
.ambient-scene__floating-bubbles {
  opacity: .42 !important;
}

.liquid-glass__border {
  opacity: .54 !important;
}

/* Stylish but controlled typography: the old scale was causing clipping. */
h1, h2, h3, h4, h5, h6,
.hero-copy h1,
.page-intro h1,
.section-shell__head h2,
.profile-card h2,
.owner-portrait__caption strong,
.metric-card strong,
.cockpit-card h3,
.cockpit-card strong,
.identity-card h3,
.owner-message-card h3,
.contact-owner-card h3,
.project-card__poster strong,
.case-study-card h3,
.liquid-feature-tile h3,
.mega-zone-card h3,
.signature-bento__main h3,
.creative-type-card h3,
.proof-wall-card h3,
.route-panel h3,
.depth-step h3,
.capability-card h3,
.service-card h3,
.timeline-card h3,
.contact-card h3,
.lab-card h3 {
  font-family: var(--font-display) !important;
  color: var(--final-text) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.40) !important;
  letter-spacing: -.038em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

p, li, small, span, a, label, input, textarea, select,
.hero-copy__text,
.page-intro p,
.section-shell__head p,
.project-card p,
.project-card li,
.cockpit-card p,
.identity-card p,
.owner-message-card p,
.contact-owner-card p,
.profile-card p,
.profile-card li,
.owner-fact-card strong,
.metric-card small {
  font-family: var(--font-body) !important;
  color: var(--final-muted) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.32) !important;
  overflow-wrap: break-word;
}

.eyebrow,
.section-shell__eyebrow,
.mini-kicker,
.owner-portrait__caption span,
.owner-fact-card span,
.metric-card span,
.badge-chip .liquid-glass__content {
  font-family: var(--font-display) !important;
  color: var(--final-cyan) !important;
  letter-spacing: .075em !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.35) !important;
}

.page-main {
  width: min(calc(100% - 46px), 1120px) !important;
  padding-bottom: clamp(150px, 18vh, 210px) !important;
}

.section-shell,
.hero-grid,
.page-intro {
  scroll-margin-bottom: 150px;
}

/* Home/hero size corrections */
.hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .82fr) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: start !important;
}

.hero-card--lead {
  min-height: auto !important;
  height: auto !important;
}

.hero-card--lead > .liquid-glass__content {
  min-height: 0 !important;
  justify-content: flex-start !important;
  gap: clamp(16px, 2vw, 22px) !important;
  padding: clamp(28px, 4vw, 46px) !important;
}

.hero-copy h1 {
  font-size: clamp(2.25rem, 5.2vw, 5.1rem) !important;
  line-height: .94 !important;
  max-width: 9.5ch;
}

.hero-copy__text {
  font-size: clamp(.98rem, 1.1vw, 1.08rem) !important;
  line-height: 1.65 !important;
  max-width: 58ch !important;
}

.badge-row { gap: 9px !important; }
.badge-chip { max-width: 100% !important; }
.badge-chip .liquid-glass__content {
  font-size: .78rem !important;
  padding: 8px 12px !important;
}

.hero-spotlight {
  margin-top: 0 !important;
  padding: 16px !important;
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), rgba(8,20,18,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 22px rgba(0,0,0,.13) !important;
}

.hero-spotlight__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.hero-spotlight__stat {
  padding: 11px !important;
  border-radius: 17px !important;
}

.hero-social {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}

/* Owner identity and profile-card clipping fix */
.owner-identity-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
}

.owner-identity-grid > .owner-message-card {
  grid-column: 1 / -1 !important;
}

.owner-identity-grid__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.owner-portrait--wide .liquid-glass__content,
.owner-portrait--hero .liquid-glass__content {
  gap: 18px !important;
}

.owner-portrait--wide .owner-portrait__frame,
.owner-portrait--hero .owner-portrait__frame,
.owner-portrait__frame {
  min-height: 0 !important;
}

.owner-portrait__caption strong {
  font-size: clamp(1.85rem, 3.4vw, 3.35rem) !important;
  line-height: .96 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

.owner-portrait__caption p {
  font-size: clamp(.92rem, 1.1vw, 1.05rem) !important;
  line-height: 1.35 !important;
}

.profile-card h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.85rem) !important;
  line-height: 1 !important;
}

.metric-card strong {
  font-size: clamp(2.2rem, 3.3vw, 3rem) !important;
  line-height: .95 !important;
}

.metric-card span {
  font-size: clamp(.9rem, 1.05vw, 1rem) !important;
}

.metric-card small {
  font-size: clamp(.82rem, .98vw, .95rem) !important;
  line-height: 1.35 !important;
}

/* Cockpit section: prevents words like API/Auth and Python/Java from clipping. */
.cockpit-grid {
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .55fr)) !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
}

.cockpit-card {
  min-height: clamp(160px, 23vh, 220px) !important;
}

.cockpit-card--large {
  min-height: clamp(330px, 50vh, 410px) !important;
}

.cockpit-card .liquid-glass__content {
  padding: clamp(22px, 3vw, 34px) !important;
  overflow: hidden !important;
}

.cockpit-card h3 {
  font-size: clamp(2.1rem, 4.5vw, 4.25rem) !important;
  line-height: .96 !important;
  max-width: 13ch;
}

.cockpit-card:not(.cockpit-card--large) h3,
.cockpit-card strong {
  font-size: clamp(2rem, 3.1vw, 3.05rem) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.cockpit-card p {
  font-size: clamp(.92rem, 1.05vw, 1.02rem) !important;
  line-height: 1.45 !important;
  max-width: 24ch;
}

.mini-kicker {
  font-size: .72rem !important;
  padding: 7px 12px !important;
  margin-bottom: 12px !important;
}

.owner-message-card h3,
.contact-owner-card h3 {
  font-size: clamp(2rem, 4.2vw, 4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.owner-message-card p,
.contact-owner-card p {
  font-size: clamp(.98rem, 1.15vw, 1.12rem) !important;
  line-height: 1.55 !important;
}

/* Project cards: reduce glow and keep content readable above the dock. */
.project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.project-card {
  min-height: 0 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.project-card .liquid-glass__content,
.project-card__body {
  padding: clamp(20px, 2.3vw, 28px) !important;
}

.project-card__poster {
  min-height: 150px !important;
  padding: clamp(18px, 2vw, 24px) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.project-card__poster strong {
  font-size: clamp(1.65rem, 2.4vw, 2.2rem) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.project-card p,
.project-card li {
  font-size: clamp(.92rem, 1.02vw, 1rem) !important;
  line-height: 1.55 !important;
}

.chip-cloud,
.project-card ul {
  gap: 8px !important;
}

/* Buttons: keep premium but not over-colorful. */
.hero-button--primary,
.hero-button--secondary,
.hero-button {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(246,252,255,.96) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.13) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

.hero-button--primary::before,
.hero-button--secondary::before,
.hero-button::before {
  opacity: .18 !important;
}

/* Sorted transparent liquid dock. */
.liquid-dock-wrap {
  width: min(calc(100% - 38px), 900px) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  filter: none !important;
}

.liquid-dock {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.035)), rgba(7,18,16,.44) !important;
  border: 1px solid rgba(244,255,252,.25) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

.liquid-dock::after {
  opacity: .28 !important;
}

.liquid-dock .liquid-glass__content,
.liquid-glass--dock .liquid-glass__content {
  padding: 6px !important;
}

.liquid-dock__nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 50px !important;
  overflow: visible !important;
}

.liquid-dock__indicator {
  top: 5px !important;
  bottom: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.075)), rgba(190, 245, 255, .12) !important;
  border: 1px solid rgba(244,255,252,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.16) !important;
  transition: transform 360ms var(--ios-spring), width 360ms var(--ios-spring), opacity 180ms ease !important;
}

.liquid-dock__indicator::after {
  opacity: .16 !important;
}

.liquid-dock__link {
  flex: 0 0 auto !important;
  min-width: 92px !important;
  max-width: 112px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  color: rgba(246,252,255,.82) !important;
  opacity: .86 !important;
  font-size: .88rem !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: -.005em !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.42) !important;
  transform: translate3d(0,0,0) scale(.99) !important;
  transition: transform 220ms var(--ios-spring), opacity 180ms ease, color 180ms ease !important;
}

.liquid-dock__link:hover,
.liquid-dock__link:focus-visible {
  color: rgba(255,255,255,.97) !important;
  opacity: 1 !important;
  transform: translate3d(0,-1px,0) scale(1.01) !important;
}

.liquid-dock__link.is-active {
  min-width: 110px !important;
  color: rgba(255,255,255,.98) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.45) !important;
  transform: translate3d(0,-1px,0) scale(1.01) !important;
}

/* Reduce strong glowing borders/text throughout. */
.project-card:hover,
.service-card:hover,
.capability-card:hover,
.timeline-card:hover,
.contact-card:hover,
.lab-card:hover,
.skill-bar-card:hover,
.principle-card:hover,
.metric-card:hover,
.social-command-card:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: translate3d(0,-2px,0) scale(1.004) !important;
}

@media (max-width: 1240px) {
  .page-main {
    width: min(calc(100% - 32px), 1060px) !important;
  }
  .hero-grid,
  .cockpit-grid,
  .owner-identity-grid {
    gap: 16px !important;
  }
  .cockpit-card:not(.cockpit-card--large) h3,
  .cockpit-card strong {
    font-size: clamp(1.75rem, 2.8vw, 2.45rem) !important;
  }
  .cockpit-card h3 {
    font-size: clamp(2rem, 4.1vw, 3.6rem) !important;
  }
  .project-card__poster strong {
    font-size: clamp(1.5rem, 2vw, 1.9rem) !important;
  }
}

@media (max-width: 1060px) {
  .hero-grid,
  .owner-identity-grid,
  .cockpit-grid,
  .project-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-copy h1,
  .cockpit-card h3,
  .owner-message-card h3,
  .contact-owner-card h3 {
    max-width: 100% !important;
  }
  .cockpit-card--large,
  .cockpit-card {
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  .page-main {
    width: min(calc(100% - 18px), 100%) !important;
    padding-bottom: 132px !important;
  }
  .liquid-dock-wrap {
    width: min(calc(100% - 12px), 100%) !important;
  }
  .liquid-dock {
    border-radius: 28px !important;
  }
  .liquid-dock__nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    min-height: 44px !important;
  }
  .liquid-dock__nav::-webkit-scrollbar { display: none; }
  .liquid-dock__link,
  .liquid-dock__link.is-active {
    min-width: max-content !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: .78rem !important;
  }
  .liquid-dock__indicator {
    top: 4px !important;
    bottom: 4px !important;
  }
  .hero-spotlight__stats,
  .owner-identity-grid__facts {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   CALM LIQUID GLASS FINAL PATCH v2
   Removes neon glow, fixes oversized typography, calms number
   badges, and makes the dock a transparent liquid glass control.
   ========================================================= */
:root {
  --font-body: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-display: "Outfit", "DM Sans", Inter, system-ui, sans-serif !important;
  --glass-text: rgba(234, 243, 237, .90);
  --glass-text-strong: rgba(248, 251, 248, .96);
  --glass-text-soft: rgba(213, 225, 218, .76);
  --glass-muted: rgba(175, 193, 183, .64);
  --glass-accent: rgba(187, 208, 196, .84);
  --glass-accent-soft: rgba(180, 199, 188, .12);
  --glass-border-soft: rgba(232, 242, 236, .22);
  --glass-bg-calm: rgba(13, 24, 21, .34);
  --glass-dark-underlay: rgba(5, 12, 10, .18);
}

html,
body {
  overflow-x: clip !important;
}

body {
  font-family: var(--font-body) !important;
  color: var(--glass-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Remove all previous neon / chrome glow. */
body *,
body *::before,
body *::after {
  text-shadow: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-copy h1,
.page-intro h1,
.section-shell__head h2,
.project-card h3,
.creative-type-card h3,
.experience-node h3,
.metric-card strong,
.profile-card h2,
.owner-portrait__caption strong,
.case-study-card h3,
.route-panel h3,
.feature-card h3,
.social-command-card strong {
  color: var(--glass-text-strong) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .30) !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

p,
li,
small,
label,
input,
textarea,
select,
.project-card p,
.service-card p,
.content-card p,
.section-shell__head p,
.page-intro p,
.experience-node p,
.creative-type-card p,
.profile-card p,
.metric-card small,
.contact-list a,
.contact-list strong,
.hero-copy__text {
  color: var(--glass-text-soft) !important;
  font-family: var(--font-body) !important;
  text-shadow: none !important;
}

.eyebrow,
.section-shell__eyebrow,
[class*="eyebrow"],
.owner-portrait__caption span,
.metric-card span,
.metric-card small,
.profile-card__monogram,
.contact-list span,
.hero-spotlight__label,
.project-card__eyebrow,
.route-panel__label,
.social-command-card span {
  color: var(--glass-accent) !important;
  text-shadow: none !important;
}

/* Calm, readable sizes instead of oversized futuristic clipping. */
.hero-copy h1,
.page-intro h1 {
  font-size: clamp(2.45rem, 5vw, 5.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  max-width: 12.5ch !important;
}

.hero-card--lead .hero-copy h1 {
  max-width: 13.5ch !important;
}

.section-shell__head h2 {
  font-size: clamp(2rem, 3.7vw, 4rem) !important;
  line-height: 1.05 !important;
  max-width: 15ch !important;
}

.project-card h3,
.creative-type-card h3,
.experience-node h3,
.content-card h3,
.service-card h3,
.profile-card h2,
.capability-card h3,
.timeline-card h3,
.lab-card h3,
.case-study-card h3,
.route-panel h3,
.feature-card h3 {
  font-size: clamp(1.38rem, 2.1vw, 2.25rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  max-width: 12ch !important;
}

.metric-card strong {
  font-size: clamp(2rem, 3.2vw, 2.9rem) !important;
  line-height: 1 !important;
}

.liquid-glass__content,
.project-card,
.service-card,
.content-card,
.experience-node,
.creative-type-card,
.principle-card,
.timeline-card,
.capability-card,
.contact-card,
.skill-bar-card,
.lab-card,
.case-study-card,
.route-panel,
.feature-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Mature smoky glass surfaces. */
.liquid-glass {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .024) 42%, rgba(10, 20, 17, .18)),
    rgba(11, 24, 20, .30) !important;
  border-color: var(--glass-border-soft) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(255, 255, 255, .035) !important;
  filter: none !important;
}

.liquid-glass__specular {
  opacity: .10 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.liquid-glass__border {
  opacity: .34 !important;
  filter: none !important;
}

.liquid-glass::before,
.liquid-glass::after,
.liquid-dock::after,
.liquid-dock__indicator::after,
.owner-portrait__shine,
.hero-spotlight::before {
  opacity: .08 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Reduce decorative lights/lenses that were making the page look over-glowing. */
.ambient-scene__floating-bubbles i,
.liquid-motion-overlay__lens,
.liquid-motion-overlay__beam,
.ambient-scene__light-rays,
.ambient-scene__mist,
.ambient-scene__water-shimmer,
.owner-portrait__signal-board::before,
.social-command-card::before,
.social-command-card::after {
  opacity: .08 !important;
  box-shadow: none !important;
  filter: none !important;
}

.forest-backdrop::after {
  background: rgba(0, 0, 0, .12) !important;
}

/* Number badges: understated frosted stone, not bright cyan circles. */
.principle-card .liquid-glass__content > span,
.profile-story-card .liquid-glass__content > span,
.depth-step .liquid-glass__content > span,
.timeline-card .liquid-glass__content > span,
.process-step .liquid-glass__content > span,
.experience-node .liquid-glass__content > strong,
.experience-node > strong,
.experience-node strong:first-child,
.owner-portrait__signal-board span,
.social-command-card span,
.creative-type-card .liquid-glass__content > span,
.project-card__meta span,
.project-card__tags span,
.badge-chip,
.hero-spotlight__label,
.route-panel__number,
.case-study-card__index,
.hero-spotlight__stat em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 42px !important;
  height: auto !important;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .026)) !important;
  color: rgba(225, 235, 229, .82) !important;
  border: 1px solid rgba(232, 242, 236, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  text-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.badge-chip .liquid-glass__content,
.project-card__tags span,
.project-card__meta span {
  color: rgba(224, 236, 229, .82) !important;
}

/* Buttons: soft glass. Primary is muted sage, not shiny cyan/gold. */
.hero-button {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-shadow: none !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .11) !important;
}

.hero-button--primary {
  color: rgba(12, 26, 22, .94) !important;
  background: linear-gradient(135deg, rgba(226, 235, 226, .88), rgba(183, 202, 191, .82)) !important;
}

.hero-button--secondary {
  color: rgba(236, 244, 239, .86) !important;
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(235, 244, 238, .18) !important;
}

/* Final dock: transparent liquid glass active state, no colored pill. */
.liquid-dock-wrap {
  width: min(calc(100% - 52px), 860px) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 999 !important;
}

.liquid-dock {
  background: rgba(12, 24, 20, .38) !important;
  border: 1px solid rgba(232, 242, 236, .22) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(20px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.04) !important;
}

.liquid-dock .liquid-glass__content,
.liquid-glass--dock .liquid-glass__content {
  padding: 6px !important;
}

.liquid-dock__nav {
  min-height: 46px !important;
  gap: 4px !important;
}

.liquid-dock__indicator {
  top: 5px !important;
  bottom: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .035)) !important;
  border: 1px solid rgba(236, 244, 239, .20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    0 6px 14px rgba(0, 0, 0, .12) !important;
  filter: none !important;
}

.liquid-dock__link {
  min-height: 36px !important;
  padding: 0 11px !important;
  color: rgba(224, 234, 228, .72) !important;
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
  letter-spacing: -.005em !important;
  text-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.liquid-dock__link:hover,
.liquid-dock__link:focus-visible {
  color: rgba(246, 250, 247, .94) !important;
  transform: translate3d(0, -1px, 0) !important;
}

.liquid-dock__link.is-active {
  color: rgba(248, 251, 249, .96) !important;
  font-weight: 750 !important;
  background: transparent !important;
  transform: none !important;
}

/* Prevent the dock from covering cards and final section headings. */
.page-main {
  padding-bottom: clamp(260px, 32vh, 380px) !important;
}

.section-shell:last-of-type,
.page-main > *:last-child {
  margin-bottom: clamp(160px, 22vh, 260px) !important;
}

main section {
  scroll-margin-bottom: 200px !important;
}

.section-shell__panel {
  padding-bottom: clamp(34px, 6vh, 82px) !important;
}

/* Card hover stays premium but does not glow. */
.project-card,
.service-card,
.content-card,
.experience-node,
.creative-type-card,
.principle-card,
.timeline-card,
.capability-card,
.contact-card,
.skill-bar-card,
.lab-card,
.case-study-card,
.route-panel,
.feature-card {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .19),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.project-card:hover,
.service-card:hover,
.content-card:hover,
.experience-node:hover,
.creative-type-card:hover,
.principle-card:hover,
.timeline-card:hover,
.capability-card:hover,
.contact-card:hover,
.skill-bar-card:hover,
.lab-card:hover,
.case-study-card:hover,
.route-panel:hover,
.feature-card:hover {
  transform: translate3d(0, -2px, 0) scale(1.002) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

/* Give project cards enough internal room so chips do not sit under the dock. */
.project-card .liquid-glass__content,
.case-study-card .liquid-glass__content,
.service-card .liquid-glass__content,
.creative-type-card .liquid-glass__content,
.experience-node .liquid-glass__content {
  padding-bottom: clamp(26px, 4vh, 52px) !important;
}

@media (max-width: 1180px) {
  .hero-copy h1,
  .page-intro h1 {
    font-size: clamp(2.35rem, 5.8vw, 4.7rem) !important;
    max-width: 13ch !important;
  }

  .section-shell__head h2 {
    font-size: clamp(1.95rem, 4.4vw, 3.65rem) !important;
  }
}

@media (max-width: 760px) {
  .page-main {
    padding-bottom: clamp(230px, 36vh, 330px) !important;
  }

  .liquid-dock-wrap {
    width: min(calc(100% - 14px), 100%) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .liquid-dock {
    border-radius: 26px !important;
  }

  .liquid-dock__nav {
    min-height: 42px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .liquid-dock__link {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: .75rem !important;
    flex: 0 0 auto !important;
  }

  .hero-copy h1,
  .page-intro h1 {
    font-size: clamp(2.15rem, 11vw, 3.4rem) !important;
    line-height: 1.04 !important;
    max-width: 12.5ch !important;
  }

  .section-shell__head h2 {
    font-size: clamp(1.82rem, 9vw, 3rem) !important;
    max-width: 12ch !important;
  }

  .project-card h3,
  .creative-type-card h3,
  .experience-node h3,
  .content-card h3,
  .service-card h3,
  .profile-card h2,
  .capability-card h3,
  .timeline-card h3,
  .lab-card h3,
  .case-study-card h3,
  .route-panel h3,
  .feature-card h3 {
    font-size: clamp(1.28rem, 7vw, 2rem) !important;
  }
}



/* =========================================================
   FINAL REQUEST PATCH
   User asked for:
   1) Remove the HTML/CSS/JavaScript rectangle tech chips from project boxes.
   2) Remove glowing effects completely, not just reduce them.
   3) Increase blur so the liquid glass is more frosted and readable.
   ========================================================= */

/* Remove project tech-name rectangles if any remain from cached/older HTML. */
.project-card .badge-chip,
.project-card .chip-cloud,
.project-card__tags,
.project-card__meta,
.project-card .liquid-glass--chip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Stronger blur: all glass becomes more frosted, less see-through, more readable. */
[data-liquid-glass],
.liquid-glass,
.liquid-glass--hero,
.liquid-glass--panel,
.liquid-glass--card,
.liquid-glass--dock,
.liquid-dock {
  backdrop-filter: blur(34px) saturate(1.05) contrast(1.02) brightness(.96) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.05) contrast(1.02) brightness(.96) !important;
}

.liquid-glass--hero,
.liquid-glass--panel,
.liquid-glass--card,
.project-card,
.service-card,
.content-card,
.experience-node,
.creative-type-card,
.principle-card,
.timeline-card,
.capability-card,
.contact-card,
.skill-bar-card,
.lab-card,
.case-study-card,
.route-panel,
.feature-card {
  background: rgba(12, 22, 19, .54) !important;
  border-color: rgba(232, 241, 235, .16) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.liquid-glass__content {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
}

/* Remove glow completely: no colored shadows, no text glow, no halo. */
*,
*::before,
*::after {
  text-shadow: none !important;
}

.liquid-glass__specular,
.owner-portrait__shine,
.orb,
.gradient-orb,
.hero-orb,
.blur-orb,
.glow,
.glow-ring,
.light-beam,
.lens-flare,
.shimmer,
.hero-spotlight::before,
.hero-card::before,
.project-card::before,
.service-card::before,
.content-card::before,
.experience-node::before,
.creative-type-card::before,
.principle-card::before,
.timeline-card::before,
.capability-card::before,
.contact-card::before,
.skill-bar-card::before,
.lab-card::before,
.case-study-card::before,
.route-panel::before,
.feature-card::before {
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Number pills and small badges: neutral frosted glass, no cyan/gold glow. */
.route-panel__number,
.case-study-card__index,
.hero-spotlight__stat em,
.experience-node > strong,
.experience-node strong:first-child,
.owner-portrait__signal-board span,
.social-command-card span,
.creative-type-card .liquid-glass__content > span,
.fit-chip,
.badge-chip,
.hero-spotlight__label,
.mini-kicker,
.section-shell__eyebrow,
.eyebrow {
  color: rgba(226, 234, 229, .82) !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(235, 243, 238, .14) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Hero/project buttons: no luminous cyan or gold, only calm glass. */
.hero-button,
.text-link,
.project-card a,
.contact-owner-actions a,
.contact-action-card a {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.hero-button--primary,
.hero-button--secondary {
  background: rgba(238, 246, 241, .09) !important;
  color: rgba(237, 244, 240, .88) !important;
  border: 1px solid rgba(236, 244, 239, .16) !important;
}

.hero-button--primary:hover,
.hero-button--secondary:hover,
.text-link:hover,
.project-card a:hover {
  box-shadow: none !important;
  filter: none !important;
}

/* Dock: more blur, no glow, transparent active glass pill. */
.liquid-dock-wrap {
  width: min(calc(100% - 52px), 850px) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

.liquid-dock {
  background: rgba(12, 22, 19, .48) !important;
  border: 1px solid rgba(235, 243, 238, .17) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.liquid-dock__indicator {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(236, 244, 239, .14) !important;
  box-shadow: none !important;
  filter: none !important;
}

.liquid-dock__link,
.liquid-dock__link.is-active {
  color: rgba(229, 237, 232, .78) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.liquid-dock__link.is-active {
  color: rgba(246, 250, 247, .92) !important;
}

/* Project cards after chip removal: cleaner spacing and no dock overlap. */
.project-grid,
.project-grid--full {
  gap: clamp(18px, 2vw, 28px) !important;
}

.project-card .liquid-glass__content {
  gap: 18px !important;
  padding-bottom: clamp(40px, 6vh, 80px) !important;
}

.project-card__body {
  gap: 16px !important;
}

.project-card ul {
  margin-top: 4px !important;
}

.page-main {
  padding-bottom: clamp(320px, 38vh, 460px) !important;
}

main section,
.section-shell,
.project-card {
  scroll-margin-bottom: 260px !important;
}

@media (max-width: 760px) {
  [data-liquid-glass],
  .liquid-glass,
  .liquid-dock {
    backdrop-filter: blur(28px) saturate(1.02) contrast(1.01) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.02) contrast(1.01) !important;
  }

  .liquid-dock-wrap {
    width: min(calc(100% - 14px), 100%) !important;
  }

  .page-main {
    padding-bottom: clamp(280px, 42vh, 390px) !important;
  }
}

/* =========================================================
   TARGETED HOME BALANCE PATCH
   Removes the duplicate second portrait surface and replaces it
   with a glass developer snapshot while tightening only the
   affected left/right grids. Theme, background, and dock stay unchanged.
   ========================================================= */
.hero-grid--home-balanced {
  grid-template-columns: minmax(0, 1fr) minmax(292px, .82fr) !important;
  gap: clamp(12px, 1.35vw, 20px) !important;
  align-items: start !important;
}

.hero-grid--home-balanced > *,
.owner-identity-grid--snapshot > *,
.owner-identity-grid--snapshot .owner-identity-grid__facts > * {
  min-width: 0 !important;
}

.owner-identity-grid--snapshot {
  grid-template-columns: minmax(0, 1fr) minmax(318px, .96fr) !important;
  gap: clamp(10px, 1.3vw, 18px) !important;
  align-items: stretch !important;
}

.owner-identity-grid--snapshot .owner-identity-grid__facts {
  gap: clamp(10px, 1.1vw, 13px) !important;
}

.developer-snapshot-card {
  align-self: stretch !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

.developer-snapshot-card .liquid-glass__content {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  gap: clamp(16px, 2vw, 22px) !important;
  min-height: 100% !important;
  padding: clamp(24px, 3vw, 38px) !important;
  overflow: hidden !important;
}

.developer-snapshot-card .liquid-glass__content::after {
  content: "";
  position: absolute;
  width: min(52%, 310px);
  aspect-ratio: 1;
  right: -16%;
  top: -18%;
  border-radius: 999px;
  border: 1px solid rgba(235, 243, 238, .12);
  background: radial-gradient(circle at 38% 36%, rgba(255,255,255,.11), rgba(255,255,255,.028) 46%, transparent 70%);
  pointer-events: none;
}

.developer-snapshot-card h3 {
  position: relative;
  z-index: 1;
  max-width: 13ch;
  margin: 0;
  color: rgba(247, 251, 248, .95);
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4.1vw, 4.85rem);
  line-height: .92;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}

.developer-snapshot-card p {
  position: relative;
  z-index: 1;
  max-width: 58ch;
  margin: 0;
  color: rgba(226, 234, 229, .78);
  font-size: clamp(.96rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

.snapshot-orbit,
.snapshot-signal-grid {
  position: relative;
  z-index: 1;
}

.snapshot-orbit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  max-width: 430px;
}

.snapshot-orbit span {
  display: grid;
  place-items: center;
  min-height: clamp(58px, 7vw, 82px);
  border-radius: clamp(18px, 2vw, 26px);
  color: rgba(244, 249, 246, .9);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.04em;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(235, 243, 238, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.snapshot-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}

.snapshot-signal-grid div {
  min-width: 0;
  padding: clamp(14px, 1.6vw, 18px);
  border-radius: 24px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(235, 243, 238, .13);
}

.snapshot-signal-grid span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(226, 234, 229, .82);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(235, 243, 238, .13);
}

.snapshot-signal-grid strong {
  display: block;
  color: rgba(247, 251, 248, .92);
  font-size: clamp(.96rem, 1.15vw, 1.08rem);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

@media (max-width: 1240px) {
  .hero-grid--home-balanced,
  .owner-identity-grid--snapshot {
    gap: 14px !important;
  }
}

@media (max-width: 1060px) {
  .hero-grid--home-balanced,
  .owner-identity-grid--snapshot {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .developer-snapshot-card h3 {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .developer-snapshot-card .liquid-glass__content {
    padding: 22px !important;
  }

  .snapshot-orbit,
  .snapshot-signal-grid,
  .owner-identity-grid--snapshot .owner-identity-grid__facts {
    grid-template-columns: 1fr !important;
  }

  .snapshot-orbit {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .snapshot-orbit span {
    min-height: 50px;
    border-radius: 18px;
    font-size: .88rem;
  }
}

@media (max-width: 420px) {
  .hero-grid--home-balanced,
  .owner-identity-grid--snapshot {
    gap: 12px !important;
  }

  .snapshot-orbit {
    gap: 7px;
  }

  .snapshot-signal-grid div {
    padding: 13px;
    border-radius: 20px;
  }
}

/* =========================================================
   DESKTOP GAP BALANCE PATCH v2
   Uses the available viewport width better on the home page,
   fills the post-duplicate-image section naturally, and keeps
   the liquid-glass identity, background, and dock unchanged.
   ========================================================= */
.page-main--home {
  width: min(calc(100% - clamp(16px, 3vw, 44px)), 1420px) !important;
  margin-inline: auto !important;
}

.page-main--home .section-shell,
.page-main--home .section-shell__panel {
  width: 100% !important;
  max-width: none !important;
}

.page-main--home .section-shell__head {
  max-width: min(100%, 1080px) !important;
}

.page-main--home .section-shell__panel > .liquid-glass__content {
  padding: clamp(20px, 2vw, 30px) !important;
}

.hero-grid--home-balanced {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr) !important;
  gap: clamp(12px, 1.05vw, 20px) !important;
}

.owner-identity-grid--snapshot {
  grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr) !important;
  gap: clamp(12px, 1.05vw, 18px) !important;
  width: 100% !important;
}

.owner-identity-grid--snapshot .owner-identity-grid__facts {
  gap: clamp(10px, .9vw, 14px) !important;
  align-self: stretch !important;
}

.owner-identity-grid--snapshot .owner-fact-card,
.owner-identity-grid--snapshot .owner-fact-card .liquid-glass__content {
  min-height: clamp(128px, 10vw, 158px) !important;
}

.cockpit-grid {
  grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(260px, .52fr)) !important;
  gap: clamp(12px, 1.1vw, 18px) !important;
  width: 100% !important;
}

.cockpit-card .liquid-glass__content {
  padding: clamp(22px, 2.2vw, 32px) !important;
}

.cockpit-card:not(.cockpit-card--large) h3,
.cockpit-card strong {
  max-width: 100% !important;
  font-size: clamp(2.05rem, 2.72vw, 3.15rem) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.cockpit-card p {
  max-width: 30ch !important;
}

@media (min-width: 1180px) {
  .developer-snapshot-card .liquid-glass__content {
    grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr) !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: clamp(18px, 2vw, 30px) !important;
    row-gap: clamp(14px, 1.35vw, 20px) !important;
  }

  .developer-snapshot-card .mini-kicker {
    grid-column: 1 / -1 !important;
  }

  .developer-snapshot-card h3,
  .developer-snapshot-card p {
    grid-column: 1 !important;
  }

  .developer-snapshot-card h3 {
    max-width: 12.5ch !important;
    font-size: clamp(2.25rem, 3.55vw, 4.65rem) !important;
  }

  .snapshot-orbit,
  .snapshot-signal-grid {
    grid-column: 2 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .snapshot-orbit {
    align-self: end !important;
  }

  .snapshot-signal-grid {
    align-self: start !important;
  }
}

@media (min-width: 1500px) {
  .page-main--home {
    width: min(calc(100% - 72px), 1440px) !important;
  }
}

@media (max-width: 1240px) {
  .page-main--home {
    width: min(calc(100% - 24px), 1120px) !important;
  }

  .cockpit-grid,
  .owner-identity-grid--snapshot,
  .hero-grid--home-balanced {
    gap: 14px !important;
  }
}

@media (max-width: 1060px) {
  .page-main--home {
    width: min(calc(100% - 22px), 100%) !important;
  }

  .cockpit-grid,
  .owner-identity-grid--snapshot,
  .hero-grid--home-balanced {
    grid-template-columns: 1fr !important;
  }

  .developer-snapshot-card .liquid-glass__content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .page-main--home {
    width: min(calc(100% - 18px), 100%) !important;
  }

  .page-main--home .section-shell__panel > .liquid-glass__content {
    padding: 14px !important;
  }

  .cockpit-card .liquid-glass__content,
  .developer-snapshot-card .liquid-glass__content {
    padding: 20px !important;
  }
}

@media (max-width: 420px) {
  .page-main--home {
    width: min(calc(100% - 14px), 100%) !important;
  }

  .page-main--home .section-shell__panel > .liquid-glass__content {
    padding: 12px !important;
  }
}

/* =========================================================
   FINAL GAP FILL PATCH
   Adds a purpose-built glass signal block into the remaining
   empty area after the duplicate portrait removal. The patch
   keeps the existing theme, background, and dock untouched.
   ========================================================= */
.owner-identity-grid--snapshot .owner-identity-grid__facts {
  height: 100% !important;
  align-content: stretch !important;
  grid-template-rows: repeat(3, minmax(128px, auto)) minmax(clamp(220px, 18vw, 320px), 1fr) !important;
}

.owner-gap-fill-card {
  grid-column: 1 / -1 !important;
  align-self: stretch !important;
  min-height: clamp(220px, 18vw, 320px) !important;
  overflow: hidden !important;
}

.owner-gap-fill-card .liquid-glass__content {
  position: relative !important;
  display: grid !important;
  align-content: space-between !important;
  gap: clamp(16px, 1.4vw, 22px) !important;
  min-height: 100% !important;
  padding: clamp(22px, 2.2vw, 34px) !important;
  overflow: hidden !important;
}

.owner-gap-fill-card .liquid-glass__content::before,
.owner-gap-fill-card .liquid-glass__content::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.owner-gap-fill-card .liquid-glass__content::before {
  width: min(46%, 230px);
  aspect-ratio: 1;
  right: -8%;
  top: -22%;
  border: 1px solid rgba(235, 243, 238, .13);
  background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 46%, transparent 72%);
}

.owner-gap-fill-card .liquid-glass__content::after {
  width: min(58%, 320px);
  height: 1px;
  left: 24px;
  bottom: clamp(74px, 5.8vw, 94px);
  background: linear-gradient(90deg, rgba(235, 243, 238, .28), rgba(235, 243, 238, .04), transparent);
}

.owner-gap-fill-card__intro,
.owner-gap-fill-card p,
.owner-gap-fill-card__chips {
  position: relative;
  z-index: 1;
}

.owner-gap-fill-card__intro {
  display: grid;
  gap: clamp(10px, 1vw, 14px);
}

.owner-gap-fill-card__intro > span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  color: rgba(226, 234, 229, .82);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(235, 243, 238, .15);
}

.owner-gap-fill-card__intro strong {
  display: block;
  max-width: 16ch;
  color: rgba(247, 251, 248, .95);
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 3.15vw, 3.95rem);
  line-height: .92;
  letter-spacing: -.06em;
}

.owner-gap-fill-card p {
  max-width: 58ch;
  margin: 0;
  color: rgba(226, 234, 229, .78);
  font-size: clamp(.94rem, 1.08vw, 1.04rem);
  line-height: 1.58;
}

.owner-gap-fill-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.owner-gap-fill-card__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  color: rgba(244, 249, 246, .9);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: -.01em;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(235, 243, 238, .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

@media (min-width: 1180px) {
  .owner-gap-fill-card .liquid-glass__content {
    grid-template-columns: minmax(0, .92fr) minmax(220px, .72fr) !important;
    align-items: end !important;
    column-gap: clamp(18px, 2vw, 30px) !important;
  }

  .owner-gap-fill-card__intro,
  .owner-gap-fill-card p {
    grid-column: 1 !important;
  }

  .owner-gap-fill-card__chips {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: end !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 1060px) {
  .owner-identity-grid--snapshot .owner-identity-grid__facts {
    height: auto !important;
    grid-template-rows: none !important;
  }

  .owner-gap-fill-card {
    min-height: 240px !important;
  }
}

@media (max-width: 760px) {
  .owner-gap-fill-card {
    grid-column: auto !important;
    min-height: 230px !important;
  }

  .owner-gap-fill-card .liquid-glass__content {
    padding: 20px !important;
  }

  .owner-gap-fill-card__intro strong {
    max-width: 100%;
    font-size: clamp(2rem, 11vw, 3.2rem);
  }

  .owner-gap-fill-card__chips {
    gap: 7px;
  }
}

@media (max-width: 420px) {
  .owner-gap-fill-card .liquid-glass__content {
    padding: 18px !important;
  }

  .owner-gap-fill-card__chips span {
    min-height: 32px;
    padding: 7px 10px;
  }
}

/* =========================================================
   LIQUID NUMBER BADGE REFINEMENT
   Restyles only the numbered badges/pills so 01, 02, 03,
   etc. feel like premium frosted liquid-glass elements.
   Layout, cards, background, and dock remain unchanged.
   ========================================================= */
.liquid-feature-tile .liquid-glass__content > span,
.principle-card .liquid-glass__content > span,
.profile-story-card .liquid-glass__content > span,
.depth-step .liquid-glass__content > span,
.timeline-card .liquid-glass__content > span,
.process-step .liquid-glass__content > span,
.creative-type-card .liquid-glass__content > span,
.route-panel__number,
.case-study-card__index,
.hero-spotlight__stat em {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: clamp(46px, 3.2vw, 58px) !important;
  min-height: clamp(34px, 2.45vw, 44px) !important;
  padding: 7px 15px !important;
  margin-bottom: 18px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  color: rgba(243, 255, 251, .96) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(.82rem, .88vw, .94rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-align: center !important;
  text-shadow: 0 1px 12px rgba(116, 255, 237, .18) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .56), rgba(255, 255, 255, .12) 32%, transparent 58%),
    linear-gradient(135deg, rgba(169, 255, 244, .42), rgba(151, 230, 255, .22) 46%, rgba(255, 229, 172, .18)),
    rgba(232, 255, 249, .075) !important;
  border: 1px solid rgba(229, 255, 249, .36) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .18),
    0 0 22px rgba(134, 255, 240, .10),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -12px 22px rgba(5, 24, 20, .18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.42) brightness(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.42) brightness(1.08) !important;
  transform: translateZ(0) !important;
  transition:
    transform .28s cubic-bezier(.2, .8, .2, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
}

.liquid-feature-tile .liquid-glass__content > span::before,
.principle-card .liquid-glass__content > span::before,
.profile-story-card .liquid-glass__content > span::before,
.depth-step .liquid-glass__content > span::before,
.timeline-card .liquid-glass__content > span::before,
.process-step .liquid-glass__content > span::before,
.creative-type-card .liquid-glass__content > span::before,
.route-panel__number::before,
.case-study-card__index::before,
.hero-spotlight__stat em::before {
  content: "";
  position: absolute;
  inset: 1px 2px auto 2px;
  height: 45%;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .08));
  opacity: .72;
  pointer-events: none;
}

.liquid-feature-tile .liquid-glass__content > span::after,
.principle-card .liquid-glass__content > span::after,
.profile-story-card .liquid-glass__content > span::after,
.depth-step .liquid-glass__content > span::after,
.timeline-card .liquid-glass__content > span::after,
.process-step .liquid-glass__content > span::after,
.creative-type-card .liquid-glass__content > span::after,
.route-panel__number::after,
.case-study-card__index::after,
.hero-spotlight__stat em::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  right: 8px;
  top: 7px;
  border-radius: 999px;
  z-index: -1;
  background: rgba(255, 255, 255, .38);
  filter: blur(5px);
  opacity: .78;
  pointer-events: none;
}

.liquid-feature-tile:hover .liquid-glass__content > span,
.principle-card:hover .liquid-glass__content > span,
.profile-story-card:hover .liquid-glass__content > span,
.depth-step:hover .liquid-glass__content > span,
.timeline-card:hover .liquid-glass__content > span,
.process-step:hover .liquid-glass__content > span,
.creative-type-card:hover .liquid-glass__content > span,
.route-panel:hover .route-panel__number,
.case-study-card:hover .case-study-card__index,
.hero-spotlight__stat:hover em {
  transform: translate3d(0, -1px, 0) scale(1.025) !important;
  border-color: rgba(237, 255, 251, .48) !important;
  box-shadow:
    0 15px 34px rgba(0, 0, 0, .20),
    0 0 28px rgba(134, 255, 240, .14),
    inset 0 1px 0 rgba(255, 255, 255, .50),
    inset 0 -12px 22px rgba(5, 24, 20, .16) !important;
}

@media (max-width: 760px) {
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em {
    min-width: 44px !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    margin-bottom: 14px !important;
    font-size: .8rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em {
    transition: none !important;
  }
}

/* =========================================================
   PROJECT-WIDE LAYOUT + LIQUID CHIP SYSTEM PATCH
   Balances non-home pages to match the fixed homepage rhythm
   and standardizes every small pill/tag/number/chip as one
   reusable frosted-glass language. Background, content, dock,
   and page identity remain unchanged.
   ========================================================= */
:root {
  --system-page-width: 1440px;
  --system-page-gutter: clamp(14px, 2.65vw, 48px);
  --system-panel-pad: clamp(20px, 2.25vw, 34px);
  --system-grid-gap: clamp(14px, 1.35vw, 22px);
  --system-chip-text: rgba(244, 255, 251, .96);
  --system-chip-muted: rgba(226, 244, 238, .84);
  --system-chip-border: rgba(228, 255, 249, .30);
  --system-chip-glow: rgba(134, 255, 240, .13);
  --system-chip-bg:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.42), rgba(255,255,255,.115) 32%, transparent 58%),
    linear-gradient(135deg, rgba(169,255,244,.24), rgba(128,223,255,.125) 47%, rgba(255,229,172,.105)),
    rgba(235,255,248,.055);
}

/* Wider, consistent page frame for every route, not just index.html. */
.page-main {
  width: min(calc(100% - var(--system-page-gutter)), var(--system-page-width)) !important;
  max-width: var(--system-page-width) !important;
  margin-inline: auto !important;
  gap: clamp(24px, 3vw, 42px) !important;
}

.page-main--home {
  width: min(calc(100% - var(--system-page-gutter)), var(--system-page-width)) !important;
}

.section-shell,
.section-shell__panel,
.page-intro,
.liquid-glass--hero {
  width: 100% !important;
  max-width: none !important;
}

.section-shell__head {
  width: 100% !important;
  max-width: min(100%, 1120px) !important;
}

.section-shell__head p,
.page-intro p,
.immersive-gallery__head p {
  max-width: min(100%, 920px) !important;
}

.section-shell__panel > .liquid-glass__content,
.project-lab-table > .liquid-glass__content,
.featured-system > .liquid-glass__content {
  padding: var(--system-panel-pad) !important;
}

/* Normalize major project-wide grids so columns use available width evenly. */
:is(
  .project-grid,
  .project-grid--full,
  .identity-grid,
  .capability-grid,
  .workflow-grid,
  .work-option-grid,
  .value-grid,
  .chapter-grid,
  .skill-orbit-grid,
  .academic-grid,
  .principle-grid,
  .service-grid,
  .timeline-grid,
  .lab-grid,
  .proof-wall,
  .gallery-wall,
  .architecture-grid,
  .skill-zone-grid,
  .blueprint-grid,
  .brief-builder-grid,
  .contact-channel-grid,
  .question-grid,
  .mega-zone-grid,
  .constellation-grid,
  .experience-map,
  .fit-cloud,
  .engagement-road,
  .service-studio-grid,
  .creative-type-grid
) {
  gap: var(--system-grid-gap) !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}

:is(
  .project-grid,
  .project-grid--full,
  .proof-wall,
  .gallery-wall,
  .architecture-grid,
  .service-studio-grid
) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

:is(
  .blueprint-grid,
  .brief-builder-grid,
  .academic-grid,
  .question-grid,
  .contact-channel-grid
) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

:is(
  .identity-grid,
  .capability-grid,
  .workflow-grid,
  .work-option-grid,
  .value-grid,
  .chapter-grid,
  .skill-orbit-grid,
  .skill-zone-grid,
  .creative-type-grid
) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

:is(.engagement-road, .fit-cloud, .constellation-grid, .experience-map) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.profile-story-grid,
.contact-owner-grid,
.two-col-grid,
.contact-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: var(--system-grid-gap) !important;
  width: 100% !important;
  max-width: none !important;
}

.featured-system .liquid-glass__content {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  gap: clamp(18px, 2vw, 30px) !important;
}

.case-study-card .liquid-glass__content {
  grid-template-columns: clamp(54px, 5vw, 72px) minmax(0, .88fr) minmax(360px, 1.12fr) !important;
  gap: clamp(16px, 1.65vw, 26px) !important;
}

.project-lab-table .liquid-glass__content {
  gap: clamp(8px, .9vw, 12px) !important;
}

.project-lab-table__head,
.project-lab-table__row {
  grid-template-columns: minmax(180px, 1fr) minmax(170px, .9fr) minmax(300px, 1.35fr) minmax(180px, .95fr) !important;
  gap: clamp(8px, .9vw, 12px) !important;
}

.signature-bento {
  grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(250px, .58fr)) !important;
  gap: var(--system-grid-gap) !important;
}

.contact-action-hub,
.service-journey {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--system-grid-gap) !important;
}

:is(
  .project-grid,
  .project-grid--full,
  .identity-grid,
  .capability-grid,
  .workflow-grid,
  .work-option-grid,
  .value-grid,
  .chapter-grid,
  .skill-orbit-grid,
  .academic-grid,
  .principle-grid,
  .service-grid,
  .timeline-grid,
  .lab-grid,
  .proof-wall,
  .gallery-wall,
  .architecture-grid,
  .skill-zone-grid,
  .blueprint-grid,
  .brief-builder-grid,
  .contact-channel-grid,
  .question-grid,
  .mega-zone-grid,
  .constellation-grid,
  .experience-map,
  .fit-cloud,
  .engagement-road,
  .service-studio-grid,
  .creative-type-grid,
  .profile-story-grid,
  .contact-owner-grid,
  .two-col-grid,
  .contact-grid,
  .featured-system .liquid-glass__content,
  .case-study-card .liquid-glass__content,
  .project-lab-table__head,
  .project-lab-table__row,
  .signature-bento,
  .contact-action-hub,
  .service-journey
) > * {
  min-width: 0 !important;
}

/* One reusable liquid-chip treatment across numbers, labels, tags, table heads, skill chips, and status capsules. */
:is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span
) {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: auto !important;
  min-height: clamp(34px, 2.25vw, 42px) !important;
  padding: clamp(7px, .72vw, 10px) clamp(12px, 1.05vw, 16px) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  color: var(--system-chip-text) !important;
  background: var(--system-chip-bg) !important;
  border: 1px solid var(--system-chip-border) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    0 0 22px var(--system-chip-glow),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -10px 20px rgba(4,21,17,.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.38) brightness(1.08) !important;
  backdrop-filter: blur(16px) saturate(1.38) brightness(1.08) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(.74rem, .78vw, .9rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .055em !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.24), 0 0 12px rgba(134,255,240,.13) !important;
  transform: translateZ(0) !important;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s ease, box-shadow .26s ease, background .26s ease !important;
}

:is(.eyebrow, .section-shell__eyebrow, .mini-kicker) {
  text-transform: uppercase !important;
  letter-spacing: .105em !important;
}

:is(.case-study-card__index, .route-panel__number, .timeline-card__year, .hero-spotlight__stat em, .experience-node strong) {
  min-width: clamp(46px, 3.2vw, 58px) !important;
  min-height: clamp(38px, 3vw, 52px) !important;
  padding-inline: clamp(12px, 1vw, 15px) !important;
}

:is(.experience-node strong) {
  width: fit-content !important;
  height: auto !important;
  margin-bottom: 18px !important;
  border-radius: 999px !important;
}

:is(.project-lab-table__head span) {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: flex-start !important;
  border-radius: 18px !important;
}

:is(.tech-column span) {
  width: 100% !important;
  justify-content: flex-start !important;
  letter-spacing: -.01em !important;
  color: var(--system-chip-muted) !important;
}

:is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span
)::before {
  content: "";
  position: absolute;
  inset: 1px 2px auto 2px;
  height: 48%;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.07));
  opacity: .64;
  pointer-events: none;
}

:is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span
)::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  right: 8px;
  top: 7px;
  border-radius: 999px;
  z-index: -1;
  background: rgba(255,255,255,.34);
  filter: blur(5px);
  opacity: .65;
  pointer-events: none;
}

:is(
  .liquid-glass--card:hover,
  .project-card:hover,
  .case-study-card:hover,
  .service-card:hover,
  .workflow-card:hover,
  .creative-type-card:hover,
  .timeline-card:hover,
  .proof-wall-card:hover,
  .mega-zone-card:hover,
  .gallery-wall-card:hover,
  .skill-orbit-card:hover,
  .chapter-card:hover,
  .value-card:hover,
  .identity-card:hover,
  .contact-action-card:hover,
  .contact-channel-card:hover,
  .question-card:hover
) :is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span
) {
  border-color: rgba(237,255,251,.44) !important;
  box-shadow:
    0 13px 30px rgba(0,0,0,.20),
    0 0 28px rgba(134,255,240,.15),
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -10px 20px rgba(4,21,17,.16) !important;
}

@media (min-width: 1500px) {
  .page-main {
    width: min(calc(100% - 72px), 1460px) !important;
    max-width: 1460px !important;
  }
}

@media (max-width: 1240px) {
  :root {
    --system-page-gutter: 24px;
    --system-grid-gap: 14px;
  }

  .page-main {
    max-width: 1160px !important;
  }

  :is(
    .identity-grid,
    .capability-grid,
    .workflow-grid,
    .work-option-grid,
    .value-grid,
    .chapter-grid,
    .skill-orbit-grid,
    .skill-zone-grid,
    .creative-type-grid,
    .constellation-grid,
    .experience-map,
    .engagement-road,
    .fit-cloud
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .signature-bento,
  .project-grid,
  .project-grid--full,
  .proof-wall,
  .gallery-wall,
  .architecture-grid,
  .service-studio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .signature-bento__main {
    grid-row: auto !important;
  }

  .contact-action-hub,
  .service-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1060px) {
  :root {
    --system-page-gutter: 22px;
    --system-panel-pad: 18px;
  }

  .profile-story-grid,
  .contact-owner-grid,
  .two-col-grid,
  .contact-grid,
  .featured-system .liquid-glass__content,
  .case-study-card .liquid-glass__content {
    grid-template-columns: 1fr !important;
  }

  .project-lab-table {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .project-lab-table .liquid-glass__content {
    min-width: 840px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --system-page-gutter: 18px;
    --system-panel-pad: 14px;
    --system-grid-gap: 12px;
  }

  .page-main {
    width: min(calc(100% - var(--system-page-gutter)), 100%) !important;
    padding-bottom: clamp(220px, 34vh, 340px) !important;
  }

  :is(
    .project-grid,
    .project-grid--full,
    .identity-grid,
    .capability-grid,
    .workflow-grid,
    .work-option-grid,
    .value-grid,
    .chapter-grid,
    .skill-orbit-grid,
    .academic-grid,
    .principle-grid,
    .service-grid,
    .timeline-grid,
    .lab-grid,
    .proof-wall,
    .gallery-wall,
    .architecture-grid,
    .skill-zone-grid,
    .blueprint-grid,
    .brief-builder-grid,
    .contact-channel-grid,
    .question-grid,
    .mega-zone-grid,
    .constellation-grid,
    .experience-map,
    .fit-cloud,
    .engagement-road,
    .service-studio-grid,
    .creative-type-grid,
    .signature-bento,
    .contact-action-hub,
    .service-journey
  ) {
    grid-template-columns: 1fr !important;
  }

  :is(
    .eyebrow,
    .section-shell__eyebrow,
    .mini-kicker,
    .badge-chip .liquid-glass__content,
    .chip-cloud span,
    .fit-chip .liquid-glass__content,
    .identity-card__stat,
    .case-study-card__index,
    .case-study-card__category,
    .workflow-card span,
    .chapter-card span,
    .timeline-card__year,
    .signature-bento__tile span,
    .proof-wall-card span,
    .constellation-card span,
    .project-lab-table__head span,
    .experience-node strong,
    .service-journey-step span,
    .creative-type-card .liquid-glass__content > span,
    .principle-card .liquid-glass__content > span,
    .profile-story-card .liquid-glass__content > span,
    .depth-step .liquid-glass__content > span,
    .process-step .liquid-glass__content > span,
    .liquid-feature-tile .liquid-glass__content > span,
    .route-panel__number,
    .hero-spotlight__stat em,
    .owner-fact-card span,
    .snapshot-signal-grid span,
    .owner-gap-fill-card__intro > span,
    .owner-gap-fill-card__chips span,
    .skill-radar__center span,
    .skill-radar__node h3,
    .tech-column span
  ) {
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: .76rem !important;
  }
}

@media (max-width: 420px) {
  :root {
    --system-page-gutter: 14px;
    --system-panel-pad: 12px;
  }

  .project-lab-table .liquid-glass__content {
    min-width: 760px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .eyebrow,
    .section-shell__eyebrow,
    .mini-kicker,
    .badge-chip .liquid-glass__content,
    .chip-cloud span,
    .fit-chip .liquid-glass__content,
    .identity-card__stat,
    .case-study-card__index,
    .case-study-card__category,
    .workflow-card span,
    .chapter-card span,
    .timeline-card__year,
    .signature-bento__tile span,
    .proof-wall-card span,
    .constellation-card span,
    .project-lab-table__head span,
    .experience-node strong,
    .service-journey-step span,
    .creative-type-card .liquid-glass__content > span,
    .principle-card .liquid-glass__content > span,
    .profile-story-card .liquid-glass__content > span,
    .depth-step .liquid-glass__content > span,
    .process-step .liquid-glass__content > span,
    .liquid-feature-tile .liquid-glass__content > span,
    .route-panel__number,
    .hero-spotlight__stat em,
    .owner-fact-card span,
    .snapshot-signal-grid span,
    .owner-gap-fill-card__intro > span,
    .owner-gap-fill-card__chips span,
    .skill-radar__center span,
    .skill-radar__node h3,
    .tech-column span
  ) {
    transition: none !important;
  }
}
/* =========================================================
   DARK LIQUID BADGE REFINEMENT
   Refines the global badge/chip/pill system so labels feel
   embedded in the existing dark liquid-glass cards instead
   of looking like bright aqua buttons. Layout, cards,
   background, typography, and dock remain unchanged.
   ========================================================= */
:root {
  --system-chip-text: rgba(235, 246, 241, .90);
  --system-chip-muted: rgba(215, 232, 225, .76);
  --system-chip-border: rgba(224, 255, 248, .18);
  --system-chip-glow: rgba(126, 255, 236, .045);
  --system-chip-bg:
    radial-gradient(circle at 26% 14%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .045) 34%, transparent 62%),
    linear-gradient(180deg, rgba(244, 255, 251, .072), rgba(255, 255, 255, .026) 46%, rgba(0, 0, 0, .18)),
    linear-gradient(135deg, rgba(120, 255, 235, .07), rgba(180, 230, 210, .035) 48%, rgba(255, 224, 160, .026)),
    rgba(7, 24, 20, .34);
}

:is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .timeline-card .liquid-glass__content > span,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-card__tags span
) {
  color: var(--system-chip-text) !important;
  background: var(--system-chip-bg) !important;
  border-color: var(--system-chip-border) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .18),
    0 0 12px var(--system-chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -10px 18px rgba(0, 0, 0, .18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) brightness(.98) !important;
  backdrop-filter: blur(14px) saturate(1.12) brightness(.98) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34) !important;
}

:is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .timeline-card .liquid-glass__content > span,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-card__tags span
)::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .035)) !important;
  opacity: .46 !important;
}

:is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .timeline-card .liquid-glass__content > span,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-card__tags span
)::after {
  width: 10px !important;
  height: 10px !important;
  background: rgba(238, 255, 250, .16) !important;
  filter: blur(6px) !important;
  opacity: .42 !important;
}

:is(
  .liquid-glass--card:hover,
  .project-card:hover,
  .case-study-card:hover,
  .service-card:hover,
  .workflow-card:hover,
  .creative-type-card:hover,
  .timeline-card:hover,
  .proof-wall-card:hover,
  .mega-zone-card:hover,
  .gallery-wall-card:hover,
  .skill-orbit-card:hover,
  .chapter-card:hover,
  .value-card:hover,
  .identity-card:hover,
  .contact-action-card:hover,
  .contact-channel-card:hover,
  .question-card:hover
) :is(
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .badge-chip .liquid-glass__content,
  .chip-cloud span,
  .fit-chip .liquid-glass__content,
  .identity-card__stat,
  .case-study-card__index,
  .case-study-card__category,
  .workflow-card span,
  .chapter-card span,
  .timeline-card__year,
  .timeline-card .liquid-glass__content > span,
  .signature-bento__tile span,
  .proof-wall-card span,
  .constellation-card span,
  .project-lab-table__head span,
  .experience-node strong,
  .service-journey-step span,
  .creative-type-card .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .route-panel__number,
  .hero-spotlight__stat em,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-card__tags span
) {
  border-color: rgba(232, 255, 249, .25) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .20),
    0 0 16px rgba(126, 255, 236, .06),
    inset 0 1px 0 rgba(255, 255, 255, .23),
    inset 0 -10px 18px rgba(0, 0, 0, .17) !important;
}

:is(.project-lab-table__head span) {
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 36%, transparent 62%),
    linear-gradient(180deg, rgba(244, 255, 251, .06), rgba(255, 255, 255, .022) 52%, rgba(0, 0, 0, .16)),
    rgba(7, 24, 20, .30) !important;
}

:is(.tech-column span) {
  color: var(--system-chip-muted) !important;
}
/* =========================================================
   FINAL PROJECT-WIDE GAP + SOCIAL COMMAND REFINEMENT
   Keeps the existing liquid-glass theme intact while removing
   remaining weak empty areas and making the social command
   surface feel complete with local SVG icons.
   ========================================================= */
@media (min-width: 1180px) {
  .architecture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gallery-wall,
  .skill-zone-grid,
  .capability-grid,
  .principle-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .work-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .service-grid,
  .academic-grid,
  .blueprint-grid,
  .brief-builder-grid,
  .contact-channel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

:is(
  .architecture-grid,
  .gallery-wall,
  .skill-zone-grid,
  .capability-grid,
  .principle-grid,
  .work-option-grid,
  .service-grid,
  .academic-grid,
  .blueprint-grid,
  .brief-builder-grid,
  .contact-channel-grid,
  .social-command-grid
) > * {
  min-width: 0 !important;
  align-self: stretch !important;
}

:is(
  .architecture-grid,
  .gallery-wall,
  .skill-zone-grid,
  .capability-grid,
  .principle-grid,
  .work-option-grid,
  .service-grid,
  .academic-grid,
  .blueprint-grid,
  .brief-builder-grid,
  .contact-channel-grid
) .liquid-glass__content {
  min-height: 100% !important;
}

/* Give the post-portrait signal card a more filled composition instead of a tall empty surface. */
.owner-gap-fill-card .liquid-glass__content {
  align-content: center !important;
  row-gap: clamp(14px, 1.35vw, 22px) !important;
}

@media (min-width: 1180px) {
  .owner-gap-fill-card .liquid-glass__content {
    grid-template-columns: minmax(0, .96fr) minmax(230px, .74fr) !important;
    align-items: center !important;
  }

  .owner-gap-fill-card__chips {
    align-self: center !important;
  }
}

/* Professional social command surface: local SVG icons + complete card content. */
.social-command-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.35vw, 22px) !important;
}

.social-command-card {
  min-height: clamp(230px, 16vw, 300px) !important;
  overflow: hidden !important;
}

.social-command-card .liquid-glass__content {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: start !important;
  align-content: stretch !important;
  column-gap: clamp(13px, 1.25vw, 18px) !important;
  row-gap: clamp(12px, 1.2vw, 18px) !important;
  min-height: 100% !important;
  padding: clamp(22px, 2.2vw, 32px) !important;
}

.social-command-card .liquid-glass__content::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -30%;
  width: min(64%, 260px);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(235, 243, 238, .09);
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.075), rgba(255,255,255,.018) 48%, transparent 72%);
  pointer-events: none;
}

.social-command-card__icon,
.social-command-card__body,
.social-command-card__action {
  position: relative;
  z-index: 1;
}

.social-command-card__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: clamp(52px, 4.4vw, 68px);
  height: clamp(52px, 4.4vw, 68px);
  border-radius: clamp(18px, 1.8vw, 24px);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.16), rgba(255,255,255,.035) 48%, transparent 72%),
    rgba(9, 30, 25, .36);
  border: 1px solid rgba(231, 255, 249, .17);
  box-shadow:
    0 12px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -12px 20px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
}

.social-command-card__icon img {
  width: clamp(24px, 2vw, 30px);
  height: clamp(24px, 2vw, 30px);
  object-fit: contain;
  opacity: .9;
}

.social-command-card__icon img[src*="social-github"],
.social-command-card__icon img[src*="social-x"] {
  filter: brightness(0) invert(1) saturate(.18) opacity(.92);
}

.social-command-card__body {
  grid-column: 2;
  display: grid;
  gap: clamp(8px, .8vw, 11px);
  min-width: 0;
}

.social-command-card__body > span {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(.74rem, .78vw, .88rem) !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  text-transform: none !important;
}

.social-command-card__body > strong {
  display: block;
  max-width: 11ch;
  color: rgba(247, 251, 248, .94);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.35vw, 2.85rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.social-command-card__body > p {
  max-width: 31ch;
  margin: 0;
  color: rgba(220, 232, 226, .76);
  font-size: clamp(.9rem, .98vw, 1rem);
  font-weight: 750;
  line-height: 1.5;
}

.social-command-card__action {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
  margin-top: clamp(6px, .8vw, 12px) !important;
}

@media (max-width: 1240px) {
  .social-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .social-command-grid {
    grid-template-columns: 1fr !important;
  }

  .social-command-card {
    min-height: 220px !important;
  }

  .social-command-card .liquid-glass__content {
    padding: 20px !important;
  }

  .social-command-card__body > strong {
    max-width: 100%;
  }
}

/* =========================================================
   FAST SCROLL REVEAL REFINEMENT
   Speeds up only the scroll/page reveal motion across the
   whole static site. Layout, content, cards, dock, theme, and
   background remain unchanged.
   ========================================================= */
.motion-ready .reveal-item {
  transform: translate3d(0, 12px, 0) scale(.996) !important;
  filter: blur(3.5px) !important;
  transition:
    opacity 320ms var(--ios-soft) var(--reveal-delay, 0ms),
    transform 380ms var(--ios-spring) var(--reveal-delay, 0ms),
    filter 300ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
  will-change: transform, opacity, filter;
}

.motion-ready .reveal-item.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) !important;
}

.motion-ready :is(
  .project-card,
  .service-card,
  .capability-card,
  .timeline-card,
  .contact-card,
  .lab-card,
  .skill-bar-card,
  .principle-card,
  .liquid-glass--card
).reveal-item {
  transition:
    opacity 280ms var(--ios-soft) var(--reveal-delay, 0ms),
    transform 340ms var(--ios-spring) var(--reveal-delay, 0ms),
    filter 260ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
}

body.dock-view-enter .page-main {
  animation-duration: 380ms !important;
}

::view-transition-old(page-content) {
  animation-duration: 140ms !important;
}

::view-transition-new(page-content) {
  animation-duration: 320ms !important;
}

@media (max-width: 760px) {
  .motion-ready .reveal-item {
    transform: translate3d(0, 9px, 0) scale(.998) !important;
    filter: blur(2.5px) !important;
    transition:
      opacity 260ms var(--ios-soft) var(--reveal-delay, 0ms),
      transform 310ms var(--ios-spring) var(--reveal-delay, 0ms),
      filter 240ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-item,
  .motion-ready .reveal-item.is-revealed {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* =========================================================
   PROJECT ARCHIVE CONTENT SYSTEM
   Adds recruiter-friendly project cards, JPG thumbnails,
   category maps, and full archive grids while preserving
   the existing liquid-glass theme, background, dock, and
   fast reveal behavior.
   ========================================================= */
.home-project-panel .liquid-glass__content,
.project-map-panel .liquid-glass__content,
.project-archive-intro-panel .liquid-glass__content,
.project-archive-section-panel .liquid-glass__content {
  display: grid !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
}
.home-project-command,
.project-archive-command {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
}
.home-project-command__intro,
.project-archive-command > div:first-child {
  display: grid;
  align-content: center;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}
.home-project-command__intro h3,
.project-archive-command h3 {
  max-width: 12ch;
  margin: 0;
  color: rgba(247,251,248,.96);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 6rem);
  line-height: .88;
  letter-spacing: -.07em;
}
.home-project-command__intro p,
.project-archive-command p,
.project-showcase-footer p {
  max-width: 68ch;
  margin: 0;
  color: rgba(220,232,226,.78);
  font-size: clamp(.96rem, 1.08vw, 1.08rem);
  font-weight: 760;
  line-height: 1.6;
}
.project-category-highlight,
.project-archive-summary-grid,
.project-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 14px);
  min-width: 0;
}
.project-category-pill,
.project-archive-summary-card,
.project-preview-tile {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: clamp(14px, 1.4vw, 20px);
  border-radius: 24px;
  color: rgba(234,246,240,.88);
  text-decoration: none;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.105), transparent 54%),
    rgba(7, 24, 20, .30);
  border: 1px solid rgba(231,255,249,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  overflow: hidden;
}
.project-category-pill span,
.project-archive-summary-card span,
.project-preview-tile span,
.project-showcase-card__meta span,
.project-archive-card__category,
.project-showcase-card__status,
.project-archive-card__thumb span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: rgba(235,246,241,.88);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(255,255,255,.072), rgba(0,0,0,.13)),
    rgba(8, 27, 23, .42);
  border: 1px solid rgba(231,255,249,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}
.project-category-pill strong,
.project-archive-summary-card strong,
.project-preview-tile strong {
  display: block;
  color: rgba(248,252,249,.95);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.06em;
}
.project-category-pill p,
.project-archive-summary-card p,
.project-preview-tile p {
  margin: 0;
  color: rgba(218,232,226,.72);
  font-size: .92rem;
  font-weight: 760;
  line-height: 1.42;
}
.home-project-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 22px);
}
.project-showcase-card,
.project-archive-card {
  overflow: hidden !important;
}
.project-showcase-card .liquid-glass__content,
.project-archive-card .liquid-glass__content {
  display: grid !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.project-showcase-card--large {
  grid-column: span 2;
}
.project-showcase-card__media,
.project-archive-card__thumb {
  position: relative;
  display: block;
  min-height: 190px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(8, 24, 20, .42);
}
.project-showcase-card--large .project-showcase-card__media {
  min-height: clamp(250px, 22vw, 360px);
}
.project-showcase-card__media img,
.project-archive-card__thumb img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  filter: saturate(.95) contrast(1.02) brightness(.92);
  transition: transform 420ms var(--ios-spring), filter 340ms var(--ios-soft);
}
.project-showcase-card:hover .project-showcase-card__media img,
.project-archive-card:hover .project-archive-card__thumb img {
  transform: scale(1.045);
  filter: saturate(1.03) contrast(1.04) brightness(.98);
}
.project-showcase-card__media::after,
.project-archive-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(4,15,13,.54));
  pointer-events: none;
}
.project-showcase-card__status,
.project-archive-card__thumb span {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
}
.project-showcase-card__body,
.project-archive-card__body {
  display: grid;
  align-content: start;
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(18px, 1.8vw, 26px);
}
.project-showcase-card__body h3,
.project-archive-card__body h3 {
  margin: 0;
  color: rgba(248,252,249,.96);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2vw, 2.35rem);
  line-height: .94;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.project-showcase-card--large .project-showcase-card__body h3 {
  font-size: clamp(2.1rem, 3vw, 3.7rem);
  max-width: 11ch;
}
.project-showcase-card__body p,
.project-archive-card__body p {
  margin: 0;
  color: rgba(221,234,228,.75);
  font-size: clamp(.91rem, .98vw, 1rem);
  font-weight: 740;
  line-height: 1.48;
}
.project-showcase-card__why,
.project-archive-card__why {
  padding-left: 12px;
  border-left: 1px solid rgba(231,255,249,.16);
  color: rgba(236,245,240,.82) !important;
}
.project-stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.project-stack-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(226,239,233,.80);
  font-size: .76rem;
  font-weight: 850;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(231,255,249,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.project-showcase-card__actions,
.project-showcase-footer,
.project-archive-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.project-action-link,
.project-archive-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 999px;
  color: rgba(238,248,243,.90);
  font-weight: 850;
  text-decoration: none;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(231,255,249,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.project-action-link--muted {
  color: rgba(218,230,224,.56);
}
.project-showcase-footer {
  justify-content: space-between;
  padding-top: 4px;
}
.project-map-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.project-archive-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  align-self: center;
}
.project-archive-stats span {
  display: grid;
  gap: 6px;
  min-height: 130px;
  align-content: center;
  padding: clamp(14px, 1.4vw, 20px);
  border-radius: 26px;
  color: rgba(222,234,228,.75);
  font-weight: 830;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(231,255,249,.12);
}
.project-archive-stats strong {
  color: rgba(248,252,249,.96);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.5vw, 4rem);
  line-height: .86;
  letter-spacing: -.06em;
}
.project-archive-nav {
  padding-block: 4px;
}
.project-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 22px);
}
.project-archive-card__thumb {
  min-height: 180px;
}
@media (min-width: 1480px) {
  .project-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .home-project-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .home-project-command,
  .project-archive-command { grid-template-columns: 1fr; }
  .project-category-highlight,
  .project-archive-summary-grid,
  .project-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-archive-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-project-showcase-grid,
  .project-archive-grid,
  .project-category-highlight,
  .project-archive-summary-grid,
  .project-map-grid,
  .project-archive-stats { grid-template-columns: 1fr; }
  .project-showcase-card--large { grid-column: auto; }
  .project-showcase-card__media,
  .project-showcase-card--large .project-showcase-card__media,
  .project-archive-card__thumb { min-height: 210px; }
  .home-project-command__intro h3,
  .project-archive-command h3 { max-width: 100%; font-size: clamp(2.5rem, 13vw, 4.4rem); }
  .project-showcase-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) {
  .project-showcase-card__body,
  .project-archive-card__body { padding: 16px; }
  .project-showcase-card__media,
  .project-showcase-card--large .project-showcase-card__media,
  .project-archive-card__thumb { min-height: 185px; }
}


/* =========================================================
   PERFORMANCE + LOCAL SVG UI POLISH PATCH
   Speeds reveal/page transitions, reduces liquid-filter work
   through JS caching, and styles the new local SVG icon usage.
   Theme, background, navbar, card layout, project thumbnails,
   and dark badge system remain unchanged.
   ========================================================= */
.motion-ready .reveal-item {
  transform: translate3d(0, 8px, 0) scale(.998) !important;
  filter: blur(2px) !important;
  transition:
    opacity 220ms var(--ios-soft) var(--reveal-delay, 0ms),
    transform 270ms var(--ios-spring) var(--reveal-delay, 0ms),
    filter 210ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
  will-change: transform, opacity;
}

.motion-ready .reveal-item.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) !important;
}

.motion-ready :is(
  .project-card,
  .project-showcase-card,
  .project-archive-card,
  .service-card,
  .capability-card,
  .timeline-card,
  .contact-card,
  .lab-card,
  .skill-bar-card,
  .principle-card,
  .liquid-glass--card
).reveal-item {
  transition:
    opacity 190ms var(--ios-soft) var(--reveal-delay, 0ms),
    transform 240ms var(--ios-spring) var(--reveal-delay, 0ms),
    filter 180ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
}

body.dock-view-enter .page-main {
  animation-duration: 260ms !important;
}

body.is-view-leaving .page-main {
  transform: translate3d(0, 8px, 0) scale(.998) !important;
  opacity: .82 !important;
  transition:
    opacity 90ms ease,
    transform 110ms ease !important;
}

::view-transition-old(page-content) {
  animation-duration: 70ms !important;
}

::view-transition-new(page-content) {
  animation-duration: 180ms !important;
}

.ui-action-icon,
.ui-inline-icon {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: .78;
  filter: drop-shadow(0 1px 8px rgba(170, 255, 238, .08));
}

.ui-action-icon {
  width: 16px;
  height: 16px;
}

.ui-inline-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
}

.project-action-link,
.hero-button,
.icon-list-item,
.contact-list li span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.project-action-link--muted .ui-action-icon {
  opacity: .42;
}

.hero-button .ui-action-icon {
  width: 18px;
  height: 18px;
  opacity: .82;
}

.project-showcase-card__media,
.project-archive-card__thumb {
  position: relative;
}

.project-showcase-card__media::before,
.project-archive-card__thumb::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.16), rgba(255,255,255,.035) 48%, transparent 72%),
    rgba(7, 24, 20, .44) url('../icons/it-project-icon-1.svg') center / 22px 22px no-repeat;
  border: 1px solid rgba(231, 255, 249, .16);
  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  opacity: .86;
  pointer-events: none;
}

.project-showcase-card__status,
.project-archive-card__thumb span {
  right: 16px !important;
  left: auto !important;
}

.liquid-glass--fallback {
  backdrop-filter: blur(11px) saturate(1.5) contrast(1.04) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.5) contrast(1.04) brightness(1.03) !important;
}

@media (max-width: 760px) {
  .motion-ready .reveal-item {
    transform: translate3d(0, 6px, 0) scale(.999) !important;
    filter: blur(1.5px) !important;
    transition:
      opacity 180ms var(--ios-soft) var(--reveal-delay, 0ms),
      transform 230ms var(--ios-spring) var(--reveal-delay, 0ms),
      filter 170ms var(--ios-soft) var(--reveal-delay, 0ms) !important;
  }

  .project-showcase-card__media::before,
  .project-archive-card__thumb::before {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background-size: 19px 19px;
    left: 12px;
    top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-item,
  .motion-ready .reveal-item.is-revealed,
  body.is-view-leaving .page-main {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* =========================================================
   FINAL SUBTLE NUMBER/BADGE LIQUID-GLASS FIX
   Darkens the over-bright 01/02/03 style badges and keeps all
   small pills/chips embedded in the existing dark glass cards.
   Layout, cards, background, navbar, and content are unchanged.
   ========================================================= */
:is(
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .case-study-card__category,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .tech-column span,
  .project-lab-table__head span
) {
  position: relative !important;
  isolation: isolate !important;
  color: rgba(232, 243, 238, .88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .42) !important;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, .105), rgba(255, 255, 255, .035) 34%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022) 48%, rgba(0, 0, 0, .18)),
    linear-gradient(135deg, rgba(122, 255, 236, .045), rgba(220, 255, 237, .018) 48%, rgba(255, 224, 160, .018)),
    rgba(5, 22, 18, .52) !important;
  border: 1px solid rgba(229, 255, 249, .16) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .22),
    0 0 10px rgba(126, 255, 236, .035),
    inset 0 1px 0 rgba(255, 255, 255, .145),
    inset 0 -10px 18px rgba(0, 0, 0, .22) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) brightness(.94) !important;
  backdrop-filter: blur(16px) saturate(1.05) brightness(.94) !important;
}

:is(
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em
) {
  min-width: clamp(42px, 3vw, 54px) !important;
  min-height: clamp(32px, 2.25vw, 40px) !important;
  padding: 7px 13px !important;
  margin-bottom: 16px !important;
  border-radius: 999px !important;
  font-size: clamp(.78rem, .82vw, .9rem) !important;
  font-weight: 850 !important;
  letter-spacing: .035em !important;
}

:is(
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .case-study-card__category,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .tech-column span,
  .project-lab-table__head span
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 2px auto 2px !important;
  height: 42% !important;
  border-radius: inherit !important;
  z-index: -1 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .026)) !important;
  opacity: .38 !important;
  pointer-events: none !important;
}

:is(
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .case-study-card__category,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .tech-column span,
  .project-lab-table__head span
)::after {
  content: "" !important;
  position: absolute !important;
  width: 9px !important;
  height: 9px !important;
  right: 8px !important;
  top: 7px !important;
  border-radius: 999px !important;
  z-index: -1 !important;
  background: rgba(238, 255, 250, .12) !important;
  filter: blur(6px) !important;
  opacity: .35 !important;
  pointer-events: none !important;
}

:is(
  .liquid-glass--card:hover,
  .project-card:hover,
  .project-showcase-card:hover,
  .project-archive-card:hover,
  .service-card:hover,
  .workflow-card:hover,
  .creative-type-card:hover,
  .timeline-card:hover,
  .principle-card:hover,
  .liquid-feature-tile:hover
) :is(
  .liquid-feature-tile .liquid-glass__content > span,
  .principle-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .process-step .liquid-glass__content > span,
  .creative-type-card .liquid-glass__content > span,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .case-study-card__category,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .tech-column span,
  .project-lab-table__head span
) {
  transform: none !important;
  border-color: rgba(232, 255, 249, .22) !important;
  box-shadow:
    0 9px 20px rgba(0, 0, 0, .24),
    0 0 12px rgba(126, 255, 236, .045),
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 -10px 18px rgba(0, 0, 0, .21) !important;
}

@media (max-width: 760px) {
  :is(
    .liquid-feature-tile .liquid-glass__content > span,
    .principle-card .liquid-glass__content > span,
    .profile-story-card .liquid-glass__content > span,
    .depth-step .liquid-glass__content > span,
    .timeline-card .liquid-glass__content > span,
    .process-step .liquid-glass__content > span,
    .creative-type-card .liquid-glass__content > span,
    .route-panel__number,
    .case-study-card__index,
    .hero-spotlight__stat em
  ) {
    min-width: 40px !important;
    min-height: 31px !important;
    padding: 6px 12px !important;
    margin-bottom: 13px !important;
    font-size: .76rem !important;
  }
}

/* =========================================================
   COMPREHENSIVE DARK LIQUID BADGE OVERRIDE
   Final pass after checking the full ZIP: covers the remaining
   numeric badges such as mega-zone-card 01/02/03/04/05/06 and
   every similar small label/pill/chip across all pages. This
   removes the bright aqua button look and makes each badge feel
   like subtle dark frosted glass embedded in the cards.
   ========================================================= */
:is(
  .mega-zone-card .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .proof-wall-card .liquid-glass__content > span,
  .deep-story-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .narrative-card .liquid-glass__content > span,
  .chapter-card .liquid-glass__content > span,
  .workflow-card .liquid-glass__content > span,
  .engagement-step .liquid-glass__content > span,
  .service-journey-step .liquid-glass__content > span,
  .question-card .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .constellation-card .liquid-glass__content > span,
  .metric-card .liquid-glass__content > span,
  .contact-channel-card .liquid-glass__content > span,
  .cockpit-card .liquid-glass__content > span,
  .signature-bento__tile .liquid-glass__content > span,
  .identity-card__stat,
  .route-panel__number,
  .case-study-card__index,
  .case-study-card__category,
  .hero-spotlight__stat em,
  .experience-node .liquid-glass__content > strong,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-lab-table__head span,
  .social-command-card__body > span
) {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: auto !important;
  min-height: 30px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  color: rgba(229, 240, 235, .88) !important;
  font-weight: 850 !important;
  text-align: center !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .48) !important;
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, .095), rgba(255, 255, 255, .028) 35%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018) 52%, rgba(0, 0, 0, .24)),
    linear-gradient(135deg, rgba(122, 255, 236, .035), rgba(205, 255, 229, .015) 48%, rgba(255, 224, 160, .012)),
    rgba(4, 19, 16, .64) !important;
  border: 1px solid rgba(229, 255, 248, .155) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, .24),
    0 0 9px rgba(120, 255, 235, .028),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -9px 15px rgba(0, 0, 0, .24) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.04) brightness(.94) !important;
  backdrop-filter: blur(13px) saturate(1.04) brightness(.94) !important;
  filter: none !important;
  transform: none !important;
}

:is(
  .mega-zone-card .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .proof-wall-card .liquid-glass__content > span,
  .deep-story-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .narrative-card .liquid-glass__content > span,
  .chapter-card .liquid-glass__content > span,
  .workflow-card .liquid-glass__content > span,
  .engagement-step .liquid-glass__content > span,
  .service-journey-step .liquid-glass__content > span,
  .question-card .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .constellation-card .liquid-glass__content > span,
  .metric-card .liquid-glass__content > span,
  .contact-channel-card .liquid-glass__content > span,
  .cockpit-card .liquid-glass__content > span,
  .signature-bento__tile .liquid-glass__content > span,
  .identity-card__stat,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em,
  .experience-node .liquid-glass__content > strong
) {
  min-width: 42px !important;
  min-height: 32px !important;
  padding-inline: 13px !important;
  margin-bottom: 16px !important;
  font-size: clamp(.75rem, .78vw, .86rem) !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
}

:is(
  .mega-zone-card .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .proof-wall-card .liquid-glass__content > span,
  .deep-story-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .narrative-card .liquid-glass__content > span,
  .chapter-card .liquid-glass__content > span,
  .workflow-card .liquid-glass__content > span,
  .engagement-step .liquid-glass__content > span,
  .service-journey-step .liquid-glass__content > span,
  .question-card .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .constellation-card .liquid-glass__content > span,
  .metric-card .liquid-glass__content > span,
  .contact-channel-card .liquid-glass__content > span,
  .cockpit-card .liquid-glass__content > span,
  .signature-bento__tile .liquid-glass__content > span,
  .identity-card__stat,
  .route-panel__number,
  .case-study-card__index,
  .case-study-card__category,
  .hero-spotlight__stat em,
  .experience-node .liquid-glass__content > strong,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-lab-table__head span,
  .social-command-card__body > span
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 3px auto 3px !important;
  height: 42% !important;
  border-radius: inherit !important;
  z-index: -1 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .025)) !important;
  opacity: .46 !important;
  pointer-events: none !important;
}

:is(
  .mega-zone-card .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .proof-wall-card .liquid-glass__content > span,
  .deep-story-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .narrative-card .liquid-glass__content > span,
  .chapter-card .liquid-glass__content > span,
  .workflow-card .liquid-glass__content > span,
  .engagement-step .liquid-glass__content > span,
  .service-journey-step .liquid-glass__content > span,
  .question-card .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .constellation-card .liquid-glass__content > span,
  .metric-card .liquid-glass__content > span,
  .contact-channel-card .liquid-glass__content > span,
  .cockpit-card .liquid-glass__content > span,
  .signature-bento__tile .liquid-glass__content > span,
  .identity-card__stat,
  .route-panel__number,
  .case-study-card__index,
  .case-study-card__category,
  .hero-spotlight__stat em,
  .experience-node .liquid-glass__content > strong,
  .eyebrow,
  .section-shell__eyebrow,
  .mini-kicker,
  .hero-spotlight__label,
  .project-showcase-card__status,
  .project-archive-card__thumb span,
  .project-archive-card__category,
  .project-stack-chips span,
  .chip-cloud span,
  .badge-chip .liquid-glass__content,
  .fit-chip .liquid-glass__content,
  .project-card__tags span,
  .owner-fact-card span,
  .snapshot-signal-grid span,
  .owner-gap-fill-card__intro > span,
  .owner-gap-fill-card__chips span,
  .skill-radar__center span,
  .skill-radar__node h3,
  .tech-column span,
  .project-lab-table__head span,
  .social-command-card__body > span
)::after {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  right: 8px !important;
  top: 7px !important;
  border-radius: 999px !important;
  z-index: -1 !important;
  background: rgba(236, 255, 250, .10) !important;
  filter: blur(5px) !important;
  opacity: .32 !important;
  pointer-events: none !important;
}

:is(
  .liquid-glass--card:hover,
  .mega-zone-card:hover,
  .liquid-feature-tile:hover,
  .project-card:hover,
  .project-showcase-card:hover,
  .project-archive-card:hover,
  .service-card:hover,
  .workflow-card:hover,
  .creative-type-card:hover,
  .timeline-card:hover,
  .principle-card:hover,
  .proof-wall-card:hover,
  .question-card:hover,
  .contact-channel-card:hover
) :is(
  .mega-zone-card .liquid-glass__content > span,
  .liquid-feature-tile .liquid-glass__content > span,
  .proof-wall-card .liquid-glass__content > span,
  .deep-story-card .liquid-glass__content > span,
  .profile-story-card .liquid-glass__content > span,
  .depth-step .liquid-glass__content > span,
  .narrative-card .liquid-glass__content > span,
  .chapter-card .liquid-glass__content > span,
  .workflow-card .liquid-glass__content > span,
  .engagement-step .liquid-glass__content > span,
  .service-journey-step .liquid-glass__content > span,
  .question-card .liquid-glass__content > span,
  .timeline-card .liquid-glass__content > span,
  .constellation-card .liquid-glass__content > span,
  .metric-card .liquid-glass__content > span,
  .contact-channel-card .liquid-glass__content > span,
  .cockpit-card .liquid-glass__content > span,
  .signature-bento__tile .liquid-glass__content > span,
  .identity-card__stat,
  .route-panel__number,
  .case-study-card__index,
  .hero-spotlight__stat em,
  .experience-node .liquid-glass__content > strong,
  .project-stack-chips span,
  .chip-cloud span,
  .project-card__tags span
) {
  transform: none !important;
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, .11), rgba(255, 255, 255, .032) 35%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .019) 52%, rgba(0, 0, 0, .24)),
    rgba(5, 22, 18, .66) !important;
  border-color: rgba(232, 255, 249, .20) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .26),
    0 0 10px rgba(126, 255, 236, .035),
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -9px 15px rgba(0, 0, 0, .24) !important;
}

@media (max-width: 760px) {
  :is(
    .mega-zone-card .liquid-glass__content > span,
    .liquid-feature-tile .liquid-glass__content > span,
    .proof-wall-card .liquid-glass__content > span,
    .deep-story-card .liquid-glass__content > span,
    .profile-story-card .liquid-glass__content > span,
    .depth-step .liquid-glass__content > span,
    .narrative-card .liquid-glass__content > span,
    .chapter-card .liquid-glass__content > span,
    .workflow-card .liquid-glass__content > span,
    .engagement-step .liquid-glass__content > span,
    .service-journey-step .liquid-glass__content > span,
    .question-card .liquid-glass__content > span,
    .timeline-card .liquid-glass__content > span,
    .constellation-card .liquid-glass__content > span,
    .metric-card .liquid-glass__content > span,
    .contact-channel-card .liquid-glass__content > span,
    .cockpit-card .liquid-glass__content > span,
    .signature-bento__tile .liquid-glass__content > span,
    .identity-card__stat,
    .route-panel__number,
    .case-study-card__index,
    .hero-spotlight__stat em,
    .experience-node .liquid-glass__content > strong
  ) {
    min-width: 38px !important;
    min-height: 30px !important;
    padding: 6px 11px !important;
    margin-bottom: 12px !important;
    font-size: .74rem !important;
  }
}