/* Floating card shortcut stays opposite the right-hand reading controls. */
.business-card-dock{position:fixed;z-index:40;left:max(18px,env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:206px;color:var(--fg);font-family:var(--font)}
.business-card-panel{position:relative;margin-bottom:10px;padding:20px 19px 10px;border:1px solid var(--gold);border-radius:22px;background:radial-gradient(ellipse at 0 0,#53caff16,transparent 65%),var(--surface-solid);box-shadow:0 15px 45px var(--shadow),inset 0 1px 0 #ffffff26;max-height:calc(100dvh - 100px);overflow:auto}
.business-card-panel[hidden]{display:none}
.business-card-kicker{font:9px var(--mono);letter-spacing:1.6px;color:var(--gold-bright)}
.business-card-panel h2{font:600 21px/1.3 var(--font);letter-spacing:-.5px;margin:8px 0 3px}
.business-card-panel p{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.business-card-close{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font:22px var(--font);cursor:pointer}
.business-card-code{display:block;background:#fff;border-radius:12px;overflow:hidden;line-height:0;border:3px solid #fff}
.business-card-code img{display:block;width:100%;height:auto;aspect-ratio:1}
.business-card-open{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:11px;color:var(--fg);text-decoration:none;gap:8px}
.business-card-open span{font-size:18px;color:var(--gold-bright)}
.business-card-toggle{display:flex;align-items:center;gap:9px;min-height:48px;width:100%;padding:10px 13px;border:1px solid var(--gold);border-radius:16px;background:var(--surface-solid);color:var(--fg);box-shadow:0 6px 24px var(--shadow),inset 0 1px 0 #ffffff20;font:500 12px var(--font);cursor:pointer}
.business-card-toggle svg{width:21px;height:21px;fill:none;stroke:var(--gold-bright);stroke-width:1.5;flex-shrink:0}
.business-card-indicator{margin-left:auto;color:var(--gold-bright);font-size:18px}
.business-card-dock :is(a,button):focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
.business-card-toggle:hover,.business-card-open:hover{color:var(--gold-bright)}
.business-card-panel,.business-card-toggle{background:linear-gradient(135deg,#ffffff20,transparent 38%,#c8a66c13 75%,#ffffff12),rgba(15,22,27,.52);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);border-color:#d9bd8380;box-shadow:inset 0 1px 1px #ffffff60,inset 0 -1px 1px #ffffff18,0 10px 32px #0003}
.business-card-toggle{border-radius:24px;text-shadow:0 1px 3px #0008;transition:background .2s,box-shadow .2s}
.business-card-toggle:hover{background:linear-gradient(135deg,#ffffff30,transparent 45%,#c8a66c26),rgba(15,22,27,.58);box-shadow:inset 0 1px 1px #ffffff70,0 8px 30px #c8a66c20}
html[data-theme="light"] .business-card-panel,html[data-theme="light"] .business-card-toggle{background:linear-gradient(135deg,#ffffff70,transparent 50%,#c8a66c20),rgba(247,245,237,.58);text-shadow:none;border-color:#84633580}
.education-outcomes{margin:18px 0 0;padding-left:19px;color:var(--body-copy,var(--fg));font-size:14px;line-height:1.75}
.education-outcomes li{margin:0 0 10px;padding-left:4px}
.education-outcomes li:last-child{margin-bottom:0}
.education-outcomes li::marker{color:var(--gold)}
@media(max-width:650px){.business-card-dock{left:max(12px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));width:190px}.business-card-toggle{width:174px;font-size:11px;gap:7px;padding:9px 10px}.business-card-panel{padding:19px 14px 8px}}
@media print{.business-card-dock{display:none}}
/* A small clear-glass launcher; only the expanded panel occupies card width. */
.business-card-dock{pointer-events:none}
.business-card-panel,.business-card-toggle{pointer-events:auto}
.business-card-dock .business-card-toggle{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;gap:0;border-radius:50%;background:linear-gradient(135deg,#ffffff0c,transparent 45%,#c8a66c06),rgba(15,22,27,.06);backdrop-filter:blur(1px) saturate(130%);-webkit-backdrop-filter:blur(1px) saturate(130%);box-shadow:inset 0 1px 1px #ffffff66,inset 0 -1px 1px #ffffff20,0 4px 18px #0002;transform-origin:center;animation:card-button-breathe 3.8s ease-in-out infinite}
.business-card-dock .business-card-indicator{margin:0;font:300 30px/1 var(--font);color:var(--gold-bright);text-shadow:0 1px 4px #0005}
.business-card-toggle::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 2px,#fffef4 0 1px,#fff2c6 1.5px,#ffd679cc 2.5px,#ffd67940 4px,transparent 7px);filter:drop-shadow(0 0 3px #ffdf8c);animation:card-border-orbit 3.6s linear infinite}
@keyframes card-border-orbit{to{transform:rotate(360deg)}}
.business-card-toggle::after{content:'';position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff55 49%,transparent 60%);transform:translateX(-100%);animation:card-button-shine 5.5s ease-in-out infinite}
.business-card-dock .business-card-toggle:hover{background:linear-gradient(135deg,#ffffff18,transparent 55%),rgba(15,22,27,.10)}
html[data-theme="light"] .business-card-dock .business-card-toggle{background:linear-gradient(135deg,#ffffff20,transparent 55%),rgba(247,245,237,.08);border-color:#84633580}
html[data-theme="light"] .business-card-indicator{text-shadow:none}
.business-card-toggle[aria-expanded="true"],.business-card-toggle:focus-visible{animation:none}
.business-card-toggle[aria-expanded="true"]::after{animation:none;opacity:0}
@keyframes card-button-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
@keyframes card-button-shine{0%,65%{transform:translateX(-100%)}90%,100%{transform:translateX(100%)}}
html[data-motion="paused"] .business-card-toggle,html[data-motion="paused"] .business-card-toggle::after,html[data-motion="paused"] .business-card-toggle::before{animation:none}
@media(prefers-reduced-motion:reduce){.business-card-dock .business-card-toggle,.business-card-toggle::after,.business-card-toggle::before{animation:none}}
/* DIPAK / SYS — graphite, optical glass and warm signal gold. */
:root {
  color-scheme:dark;
  --bg:#0c0e10;
  --fg:#e6e4df;
  --muted:#a4a7a6;
  --subtle:#73787c;
  --gold:#c8a66c;
  --gold-bright:#e3c58f;
  --line:rgba(229,226,215,.13);
  --surface:rgba(24,27,30,.69);
  --surface-solid:#191c1f;
  --shadow:rgba(0,0,0,.35);
  --font:'DM Sans','Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace
}

html[data-theme="light"] {
  color-scheme:light;
  --bg:#eeece6;
  --fg:#101411;
  --muted:#2d342f;
  --subtle:#454b43;
  --gold:#6e4d16;
  --gold-bright:#563b10;
  --line:rgba(63,54,36,.19);
  --surface:rgba(250,249,243,.76);
  --surface-solid:#f9f7f1;
  --shadow:rgba(47,39,25,.12)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:120px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

::selection {
  background:#c8a66c;
  color:#0c0e10
}

button,input,textarea {
  font:inherit
}

button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}

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

button {
  color:inherit;
  cursor:pointer
}

button,a {
  touch-action:manipulation
}

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

svg {
  display:inline-block;
  flex-shrink:0
}

h1,h2,h3,h4,h5,p {
  margin:0
}

h1,h2,h3 {
  font-weight:500;
  line-height:1.13
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}

[hidden] {
  display:none!important
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.ui-icon {
  width:21px;
  height:21px;
  vertical-align:middle
}

.gold {
  color:var(--gold)
}

.muted {
  color:var(--muted)
}

.micro-label,.eyebrow,.card-number,.contact-link small,.contact-address small {
  font:10px/1.6 var(--mono);
  letter-spacing:1.3px
}

.eyebrow {
  color:var(--gold);
  font-size:11px;
  letter-spacing:1.8px;
  display:flex;
  gap:13px;
  align-items:center
}

.eyebrow>span:not(.signal-dot) {
  color:var(--subtle)
}

.signal-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px #c8a66c44;
  display:inline-block;
  flex-shrink:0
}

.skip-link {
  position:fixed;
  z-index:200;
  left:20px;
  top:-100px;
  background:var(--gold);
  color:var(--bg);
  padding:14px 22px;
  border-radius:8px
}

.skip-link:focus {
  top:12px
}

.environment {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
  background:var(--bg)
}

#cityCanvas {
  width:100%;
  height:100%;
  display:block
}

.environment-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,transparent 75%),linear-gradient(180deg,var(--bg) 0%,transparent 28%,transparent 80%,var(--bg) 100%);
  opacity:.48
}

.environment-grain {
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' opacity='.45' d='M0 0h200v200H0z'/%3E%3C/svg%3E")
}

/* Double optical rims, curved reflection, internal shadows and pointer-local light. */
.glass {
  position:relative;
  border:1px solid var(--line);
  background:radial-gradient(ellipse at var(--mx,25%) var(--my,0%),rgba(226,207,167,.065),transparent 58%),linear-gradient(135deg,rgba(255,255,255,.075),transparent 35%,rgba(255,255,255,.015) 70%,rgba(255,255,255,.05)),var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.16),0 20px 50px -20px var(--shadow);
  backdrop-filter:blur(22px) saturate(115%);
  -webkit-backdrop-filter:blur(22px) saturate(115%)
}

.glass::before {
  content:'';
  position:absolute;
  inset:4px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none
}

.glass::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 350px 210px at var(--mx,50%) var(--my,0%),rgba(236,215,175,.085),transparent 70%);
  opacity:var(--light,0);
  transition:opacity .4s;
  pointer-events:none
}

.header {
  position:fixed;
  z-index:50;
  top:25px;
  left:4.5%;
  right:4.5%;
  max-width:1370px;
  margin:auto;
  min-height:76px;
  padding:12px 20px;
  border-radius:23px;
  display:flex;
  align-items:center;
  gap:26px;
  background-color:rgba(26,28,30,.72)
}

html[data-theme="light"] .header {
  background-color:rgba(247,245,239,.8)
}

.logo {
  display:flex;
  gap:11px;
  align-items:center;
  flex-shrink:0
}

.logo-mark {
  width:36px;
  height:36px;
  border:1px solid #c8a66c4a;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:var(--gold)
}

.logo-mark .ui-icon {
  width:24px;
  height:24px
}

.logo-text {
  font-weight:650;
  font-size:17px;
  line-height:1.3;
  letter-spacing:1.2px
}

.logo-slash {
  color:var(--gold);
  font-weight:400
}

.logo-text small {
  display:block;
  font:6px/2.2 var(--mono);
  letter-spacing:1.25px;
  color:var(--muted)
}

.navbar {
  display:flex;
  margin-left:auto;
  gap:4px;
  align-items:center
}

.navbar a {
  position:relative;
  font-size:12px;
  color:var(--muted);
  padding:9px 14px;
  border-radius:12px;
  border:1px solid transparent;
  transition:color .2s,background .2s
}

.navbar a:hover {
  color:var(--fg);
  background:rgba(255,255,255,.04)
}

.navbar a.active {
  color:var(--gold-bright);
  border-color:rgba(200,166,108,.2);
  background:linear-gradient(120deg,rgba(200,166,108,.12),rgba(200,166,108,.035));
  box-shadow:inset 0 1px 0 rgba(234,211,173,.08)
}

.header-actions {
  display:flex;
  gap:4px;
  border-left:1px solid var(--line);
  padding-left:14px
}

.icon-button {
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  background:transparent;
  border-radius:11px;
  color:var(--muted);
  transition:color .2s,border-color .2s
}

.icon-button:hover {
  color:var(--gold);
  border-color:var(--line)
}

.icon-button .ui-icon {
  width:17px;
  height:17px
}

.icon-button[aria-pressed="true"] {
  color:var(--gold);
  background:rgba(200,166,108,.09)
}

.nav-toggle {
  display:none
}

main {
  width:min(1180px,86%);
  margin:auto
}

.hero {
  position:relative;
  padding-top:170px;
  min-height:min(900px,100svh);
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:35px;
  align-items:center
}

.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:40px
}

.hero-greeting {
  font-size:18px;
  color:var(--muted);
  margin-top:35px;
  margin-bottom:9px
}

.hero h1 {
  font-size:clamp(66px,7.5vw,106px);
  line-height:.98;
  letter-spacing:-5.5px;
  font-weight:500
}

.role-line {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:23px;
  font-size:17px;
  color:var(--gold-bright);
  min-height:28px
}

.role-dash {
  width:24px;
  height:1px;
  background:var(--gold)
}

.multiple-text {
  transition:opacity .35s,transform .35s
}

.multiple-text.changing {
  opacity:0;
  transform:translateY(5px)
}

.hero-statement {
  font-size:22px;
  line-height:1.45;
  letter-spacing:-.45px;
  margin-top:24px
}

.hero-description {
  max-width:430px;
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-top:16px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:30px
}

.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid var(--line);
  padding:14px 22px;
  border-radius:12px;
  font-size:12px;
  font-weight:550;
  line-height:1.5;
  transition:transform .25s,background .25s,box-shadow .25s
}

.btn:hover {
  transform:translateY(-3px)
}

.btn .ui-icon {
  width:16px;
  height:16px
}

.btn-primary {
  background:linear-gradient(120deg,#e1c38c,#c3a06a);
  color:#201e18;
  border-color:#efd6a266;
  box-shadow:inset 0 1px 0 #fff5,0 5px 20px #b9914820
}

.btn-primary:hover {
  box-shadow:inset 0 1px 0 #fff6,0 8px 28px #b9914835
}

.btn-secondary {
  background:var(--surface);
  backdrop-filter:blur(12px)
}

.btn-secondary:hover {
  border-color:var(--gold)
}

.social-media {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:26px
}

.social-media>span {
  color:var(--subtle);
  margin-right:9px;
  text-transform:uppercase;
  font-size:8px
}

.social-media a {
  width:33px;
  height:33px;
  border-radius:9px;
  display:grid;
  place-items:center;
  color:var(--muted);
  transition:background .2s,color .2s
}

.social-media a:hover {
  color:var(--gold);
  background:rgba(200,166,108,.08)
}

.social-media .ui-icon {
  width:16px;
  height:16px
}

.portrait-stage {
  position:relative;
  width:100%;
  max-width:500px;
  justify-self:center;
  padding:10px 28px 35px 25px;
  transform:perspective(1200px) rotateY(var(--tilt,-3deg));
  transition:transform .5s ease-out
}

.portrait-frame {
  overflow:hidden;
  border-radius:120px 30px 120px 30px;
  height:510px;
  background-color:rgba(33,35,34,.26);
  box-shadow:inset 0 0 35px rgba(229,213,178,.04),inset 2px 1px 0 rgba(255,255,255,.13),0 30px 70px rgba(0,0,0,.3)
}

.portrait-frame::after {
  opacity:1;
  background:linear-gradient(180deg,transparent 62%,rgba(12,14,16,.88))
}

.portrait-frame img {
  display:block;
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center top;
  padding:0;
  filter:saturate(.65) contrast(1.04);
  mask-image:linear-gradient(#000 78%,transparent 100%)
}

.portrait-coordinate {
  position:absolute;
  z-index:2;
  top:27px;
  right:23px;
  font-size:6px;
  color:#cbc7bd;
  letter-spacing:1px
}

.portrait-caption {
  position:absolute;
  left:32px;
  bottom:26px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#f1f0ec
}

.portrait-caption>span:first-child {
  font-size:18px
}

.portrait-caption .micro-label {
  font-size:7px;
  letter-spacing:2px;
  color:#c7b18a
}

.portrait-orbit {
  position:absolute;
  inset:-18px 5px 8px;
  border:1px solid var(--line);
  border-radius:140px 42px 140px 42px;
  transform:rotate(5deg);
  opacity:.45
}

.portrait-orbit::after {
  content:'+';
  position:absolute;
  bottom:65px;
  right:-5px;
  color:var(--gold)
}

.orbit-label {
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:17px;
  padding:16px 20px;
  font-size:12px;
  backdrop-filter:blur(30px);
  background-color:rgba(39,41,40,.7)
}

.orbit-label .ui-icon {
  color:var(--gold);
  width:26px;
  height:26px
}

.orbit-label small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:2px
}

.label-cloud {
  top:78px;
  right:-8px
}

.label-cloud .signal-dot {
  margin-left:9px;
  width:4px;
  height:4px
}

.label-network {
  bottom:88px;
  left:-18px
}

.portrait-axis {
  position:absolute;
  bottom:0;
  right:32px;
  font-size:7px;
  color:var(--subtle)
}

.hero-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0 28px;
  border-bottom:1px solid var(--line);
  color:var(--subtle)
}

.hero-bottom .micro-label {
  font-size:8px
}

.hero-bottom .ui-icon {
  width:12px;
  height:12px;
  margin-right:8px
}

.scroll-cue {
  display:flex;
  align-items:center;
  gap:18px
}

.scroll-cue span {
  color:var(--gold);
  font-size:18px
}

.expertise-section,.selected-section {
  padding:90px 0 10px
}

.section-title {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end;
  margin-bottom:32px
}

.section-title h2 {
  margin-top:17px;
  font-size:clamp(29px,3vw,43px);
  letter-spacing:-1.6px
}

.section-title>p {
  font-size:12px;
  color:var(--muted);
  padding-bottom:4px
}

.expertise-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}

.capability-card {
  padding:28px 24px 32px;
  border-radius:24px 10px 24px 10px;
  transition:transform .3s,border-color .3s
}

.capability-card:hover,.project-preview:hover {
  transform:translateY(-5px);
  border-color:#c8a66c55
}

.card-number {
  position:absolute;
  right:21px;
  top:23px;
  color:var(--subtle);
  font-size:8px
}

.capability-card>.ui-icon {
  width:29px;
  height:29px;
  color:var(--gold);
  margin-bottom:33px
}

.capability-card h3 {
  font-size:16px;
  margin-bottom:12px
}

.capability-card p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}

.card-arrow {
  display:block;
  margin-top:21px;
  color:var(--subtle)
}

.card-arrow .ui-icon {
  width:15px;
  height:15px
}

.text-link {
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--gold);
  font-size:12px
}

.text-link:hover {
  color:var(--gold-bright)
}

.text-link .ui-icon {
  width:17px;
  height:17px
}

.selected-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.project-preview {
  padding:20px 24px 28px;
  border-radius:25px;
  transition:transform .3s,border-color .3s
}

.project-diagram {
  height:160px;
  position:relative;
  display:grid;
  place-items:center;
  background:linear-gradient(transparent 95%,var(--line) 95%),linear-gradient(90deg,transparent 95%,var(--line) 95%);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse,black,transparent 73%)
}

.project-diagram>.ui-icon {
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  padding:13px;
  border:1px solid #c8a66c66;
  border-radius:16px;
  background:var(--surface-solid);
  color:var(--gold);
  box-shadow:0 0 0 12px #c8a66c08,0 0 0 13px #c8a66c22
}

.project-diagram span {
  width:80%;
  height:40px;
  border:1px solid #c8a66c35;
  border-radius:10px;
  position:absolute;
  transform:skewY(-15deg)
}

.project-diagram span:nth-of-type(2) {
  transform:skewY(15deg)
}

.project-diagram span:nth-of-type(3) {
  transform:rotate(90deg);
  width:70%
}

.preview-meta {
  display:flex;
  justify-content:space-between;
  color:var(--gold);
  margin:12px 0 18px
}

.preview-meta .micro-label {
  font-size:8px
}

.preview-meta .ui-icon {
  width:15px;
  height:15px
}

.project-preview h3 {
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.5px
}

.project-preview p {
  color:var(--muted);
  font-size:11px;
  margin-top:13px
}

.connect-banner {
  margin:90px 0;
  padding:43px 48px;
  border-radius:40px 16px 40px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}

.connect-banner h2 {
  font-size:33px;
  letter-spacing:-1px;
  margin-top:13px
}

.site-footer {
  width:min(1180px,86%);
  margin:60px auto 0;
  padding:28px 0 32px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  color:var(--subtle);
  font-size:11px
}

.footer-brand {
  font-size:13px;
  letter-spacing:1px;
  color:var(--fg);
  font-weight:600
}

.site-footer .micro-label {
  font-size:8px
}

.back-to-top {
  position:fixed;
  right:23px;
  bottom:22px;
  z-index:30;
  width:42px;
  height:42px;
  color:var(--gold)
}

.page-heading {
  padding-top:170px;
  padding-bottom:52px;
  max-width:930px
}

.page-heading h1 {
  font-size:clamp(42px,5.4vw,72px);
  letter-spacing:-3px;
  margin-top:24px;
  line-height:1.05
}

.page-intro {
  color:var(--muted);
  font-size:15px;
  max-width:620px;
  margin-top:25px
}

.about-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:45px;
  align-items:start
}

.about-copy {
  padding:35px;
  border-radius:28px
}

.about-copy h2 {
  margin-top:17px;
  font-size:32px;
  letter-spacing:-1px
}

.about-copy>p:not(.eyebrow):not(.role-line) {
  color:var(--muted);
  margin-top:21px;
  font-size:14px;
  line-height:1.9
}

.about-copy .role-line {
  font-size:16px;
  margin-bottom:28px
}

.portrait-about {
  position:sticky;
  top:155px;
  margin-top:30px
}

.portrait-about img {
  object-fit:contain;
  object-position:center top
}

.Experience-content,.Education-content {
  display:grid;
  gap:25px
}

.Role {
  border-radius:30px 12px 30px 12px;
  padding:33px 40px;
  overflow:hidden;
  scroll-margin-top:130px
}

.entry-marker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--gold);
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:27px
}

.entry-marker .micro-label {
  font-size:9px
}

.entry-marker .ui-icon {
  width:24px;
  height:24px
}

.Role>h2,.Role>h3:first-of-type {
  font-size:29px;
  letter-spacing:-.8px;
  max-width:780px
}

.Role>h4 {
  font-size:16px;
  font-weight:500;
  color:var(--gold);
  margin-top:10px
}

.Role p {
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
  margin-top:15px;
  max-width:920px
}

.Role .dates,.Role h5 {
  font:11px/1.7 var(--mono);
  color:var(--gold);
  margin-top:16px
}

.Role .outcome-label {
  font:10px/1.5 var(--mono);
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin-top:25px;
  padding-top:23px;
  border-top:1px solid var(--line);
  color:var(--gold)
}

.skills-list {
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:grid;
  gap:13px
}

.skills-list li {
  position:relative;
  padding-left:24px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8
}

.skills-list .icon {
  font-size:12px;
  color:var(--gold);
  position:absolute;
  left:0;
  top:2px
}

body[data-page="education"] .Education-content {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

body[data-page="education"] .Role {
  padding:30px
}

body[data-page="education"] .Role>h3:first-of-type {
  font-size:23px
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:30px;
  align-items:start
}

.contact-details {
  display:grid;
  gap:20px;
  min-width:0
}

.contact-person {
  padding:18px 24px;
  border-radius:23px;
  display:flex;
  align-items:center;
  gap:19px
}

.contact-person img {
  width:62px;
  height:62px;
  object-fit:cover;
  object-position:top;
  border-radius:50%;
  background:#383631;
  filter:saturate(.6);
  border:1px solid var(--line)
}

.contact-person h2 {
  font-size:20px
}

.contact-person p {
  font-size:11px;
  color:var(--muted);
  margin-top:6px
}

.contact-info {
  padding:30px;
  border-radius:24px
}

.contact-link {
  display:block;
  margin-top:24px
}

.contact-link small,.contact-address small {
  color:var(--subtle);
  font-size:9px
}

.contact-link>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font-size:15px;
  overflow-wrap:anywhere
}

.contact-link .ui-icon {
  width:15px;
  height:15px;
  color:var(--gold)
}

.contact-link:hover>span {
  color:var(--gold)
}

.contact-address {
  margin-top:23px
}

.contact-address p {
  color:var(--muted);
  font-size:13px;
  margin-top:7px
}

.map-frame {
  padding:8px;
  border-radius:24px;
  overflow:hidden
}

.map-frame iframe {
  display:block;
  width:100%;
  max-width:100%;
  height:230px;
  border-radius:17px;
  filter:grayscale(1) contrast(.9)
}

.contact-form {
  padding:35px;
  border-radius:30px 12px 30px 12px
}

.contact-form h2 {
  font-size:32px;
  margin-top:16px;
  letter-spacing:-.8px
}

.contact-form>p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
  margin-top:15px
}

.contact-form label {
  display:block;
  margin:22px 0 9px;
  font-size:12px
}

.contact-form input,.contact-form textarea {
  display:block;
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(8,10,11,.28);
  color:var(--fg);
  padding:13px 15px;
  font-size:13px;
  transition:border-color .2s
}

.contact-form input::placeholder,.contact-form textarea::placeholder {
  color:var(--subtle)
}

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

.contact-form input:focus,.contact-form textarea:focus {
  border-color:var(--gold)
}

.contact-form .btn {
  margin-top:24px;
  width:100%;
  justify-content:space-between
}

.contact-form .btn:disabled {
  cursor:wait;
  opacity:.65
}

.form-status {
  min-height:18px
}

.form-status.error {
  color:#e3a496!important
}

.form-status.success {
  color:var(--gold)!important
}

.contact-resume {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:28px 8px;
  color:var(--subtle)
}

.contact-resume .micro-label {
  font-size:8px
}

html[data-theme="light"] .orbit-label {
  background-color:rgba(250,248,240,.76)
}

html[data-theme="light"] .contact-form input,html[data-theme="light"] .contact-form textarea {
  background:rgba(255,255,255,.4)
}

/* Keep the environment in the distance; optical edges stay in the foreground. */
#cityCanvas {
  opacity:.93
}

.environment-grain {
  opacity:.035
}

.label-network {
  bottom:125px
}

.glass {
  box-shadow:inset 1px 2px 2px rgba(255,255,255,.11),inset -1px -2px 3px rgba(0,0,0,.18),0 20px 50px -20px var(--shadow)
}

.header::before,.orbit-label::before {
  border-color:rgba(255,255,255,.045);
  background:linear-gradient(160deg,rgba(255,255,255,.035),transparent 35%,transparent 80%,rgba(232,214,176,.025))
}

/* Editorial project cards separate the brief from the engineering detail. */
body[data-page="projects"] .Role {
  display:grid;
  grid-template-columns:.82fr 1.4fr;
  column-gap:48px
}

body[data-page="projects"] .entry-marker {
  grid-column:1/-1
}

.project-summary h2 {
  font-size:30px;
  line-height:1.2;
  letter-spacing:-1px
}

.project-summary {
  padding-right:20px;
  border-right:1px solid var(--line)
}

.project-summary p {
  font-size:13px;
  line-height:1.9
}

.project-details .eyebrow {
  font:10px/1.5 var(--mono);
  color:var(--gold);
  letter-spacing:1.4px;
  margin-top:0
}

.project-details .skills-list {
  margin-top:20px
}

.project-details .skills-list li {
  font-size:13px
}

.Role h3.outcome-label {
  font:10px/1.5 var(--mono);
  letter-spacing:1.4px
}

body[data-page="education"] .Role>h2 {
  font-size:23px
}

@media(max-width:950px) {
  body[data-page="projects"] .Role {
    column-gap:25px
  }

  .project-summary h2 {
    font-size:25px
  }

}

@media(max-width:650px) {
  body[data-page="projects"] .Role {
    grid-template-columns:1fr;
    gap:0
  }

  .project-summary {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:0 0 24px;
    margin-bottom:24px
  }

  .project-summary h2 {
    font-size:25px
  }

}

/* Progressive optical refraction: displace only the backdrop, never text. */
@supports (backdrop-filter:url("#liquid-refraction")) {
  .orbit-label {
    backdrop-filter:blur(10px) url("#liquid-refraction") saturate(120%)
  }

}

/* Polished liquid controls: local lens light, curved meniscus and a gold rim. */
.btn,.navbar a,.icon-button {
  isolation:isolate;
  overflow:hidden;
}
.btn {
  border-radius:17px;
  font-weight:650;
  box-shadow:inset 0 2px 2px #ffffff45,inset 0 -3px 5px #00000026,0 9px 24px #00000018;
}
.btn::before,.navbar a::before,.icon-button::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:2px 4px 46%;
  border-radius:inherit;
  background:linear-gradient(180deg,#ffffff4d,#ffffff08);
  pointer-events:none;
}
.btn::after,.navbar a::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 110px 70px at var(--mx,25%) var(--my,0%),#fff9,transparent 75%);
  opacity:.3;
  transition:opacity .25s;
  pointer-events:none;
}
.btn:hover::after,.navbar a:hover::after { opacity:.65; }
.btn-primary {
  background:linear-gradient(160deg,#f3dfb0 0%,#ddba77 44%,#bc9352 52%,#e5c98f 100%);
  color:#171910;
  border-color:#eed59eb3;
  box-shadow:inset 0 2px 2px #ffffff8c,inset 0 -3px 6px #76561f55,0 0 0 1px #c8a66c22,0 8px 28px #c4994833;
}
.btn-primary:hover {
  box-shadow:inset 0 2px 3px #ffffffaa,inset 0 -2px 5px #76561f55,0 0 0 1px #dfbe814d,0 12px 34px #c4994855;
}
.btn-secondary,.navbar a.active,.icon-button {
  background:linear-gradient(150deg,#ffffff17,#ffffff03 50%,#dcc69413),var(--surface);
  border-color:var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 1px #ffffff52,inset 0 -2px 3px #00000020,0 4px 12px #00000012;
}
.navbar a.active {
  border-color:#b98e4670;
  box-shadow:inset 0 1px 2px #fff5,inset 0 -2px 3px #c8a66c20,0 0 15px #c8a66c12;
}
.header-actions { gap:6px; }
.glass { border-color:rgba(200,184,150,.24); }
html[data-theme="light"] body { font-weight:500; }
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3 { font-weight:550; }
html[data-theme="light"] .micro-label,html[data-theme="light"] .eyebrow { font-weight:500; }
html[data-theme="light"] .glass {
  border-color:rgba(103,85,49,.25);
  box-shadow:inset 1px 2px 2px #ffffffeb,inset -1px -2px 3px #76674716,0 18px 44px -22px #54472838;
}
html[data-theme="light"] .btn-secondary {
  background:linear-gradient(150deg,#ffffffd9,#f0eee680 48%,#ded9c9a6 54%,#fffaf0d9);
  color:#181e19;
}
html[data-theme="light"] .portrait-coordinate { color:#34382f; }
@media(max-width:650px){.header-actions{gap:3px}}
/* Reading instrumentation shares a single dock with the return control. */
.reading-dock {
  position:fixed;
  z-index:35;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  pointer-events:none;
}
.reading-meter {
  width:94px;
  height:94px;
  border-radius:50%;
  background-color:var(--surface-solid);
  box-shadow:inset 0 2px 3px #fff3,inset 0 -2px 5px #0004,0 8px 26px #0003,0 0 20px #c8a66c12;
}
.reading-meter>svg { width:100%; height:100%; display:block; overflow:hidden; }
.meter-bezel { fill:none; stroke:var(--gold); stroke-width:.45; stroke-dasharray:1 4; opacity:.65; }
.meter-name { font:8.2px var(--mono); letter-spacing:1.1px; fill:var(--gold-bright); }
.meter-name { transform-box:view-box; transform-origin:50% 50%; animation:name-orbit 45s linear infinite }
.reading-meter { contain:paint; overflow:hidden }
@keyframes name-orbit { to { transform:rotate(360deg) } }
.meter-track { fill:none; stroke:var(--line); stroke-width:2.2; }
.meter-fill {
  fill:none;
  stroke:var(--gold);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
  filter:drop-shadow(0 0 3px #d8af6388);
}
.meter-value {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  font:500 21px var(--mono);
  letter-spacing:-1.2px;
  color:var(--fg);
}
.meter-value>span { font-size:10px; color:var(--gold); margin-top:4px; }
.scroll-top-slot { min-height:42px; display:grid; place-items:center; }
.reading-dock .back-to-top { position:relative; inset:auto; pointer-events:auto; }
.reading-rail {
  position:fixed;
  z-index:36;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--line) 0 24px,transparent 24px 27px);
}
.reading-rail>span {
  display:block;
  height:100%;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg,#97702a,#d8b15f 55%,#ffe3a2);
  box-shadow:0 -1px 10px #d4a44288;
}
html[data-theme="light"] .reading-rail>span { background:linear-gradient(90deg,#7a5414,#b98b32 65%,#d1a140); }
/* Optical glass housings for the existing social links. */
.social-media a {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:13px;
  background:radial-gradient(ellipse at var(--mx,25%) var(--my,0%),#f8e0aa30,transparent 72%),linear-gradient(150deg,#ffffff21,#ffffff03 48%,#bea16b1a),var(--surface);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1.5px 2px #ffffff57,inset 0 -2px 3px #0003,0 5px 12px #0002;
  color:var(--gold-bright);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.social-media a::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:2px 3px 48%;
  border-radius:inherit;
  background:linear-gradient(#ffffff4d,#ffffff05);
}
.social-media a:hover {
  background:radial-gradient(ellipse at var(--mx,50%) var(--my,20%),#f6dda544,transparent 75%),var(--surface);
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:inset 0 2px 3px #fff6,inset 0 -2px 3px #0003,0 7px 20px #b18a3c33;
}
.social-media a:active { transform:translateY(0) scale(.95); }
html[data-theme="light"] .social-media a {
  background:radial-gradient(ellipse at var(--mx,25%) var(--my,0%),#fff,transparent 75%),linear-gradient(160deg,#ffffffb3,#dfd6c278);
  color:#674715;
  box-shadow:inset 0 2px 2px #fff,inset 0 -2px 3px #89744224,0 5px 13px #6b582a18;
}
@media(max-width:650px) {
  body :is(.hero-copy,.page-heading,.section-title,.lab-intro,.architecture-note,.systems-intro)::before { inset:-14px }
  .reading-dock { right:24px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); gap:9px; }
  .reading-meter { width:80px; height:80px; }
  .meter-value { font-size:18px; }
  .meter-value>span { font-size:9px; }
  .scroll-top-slot { min-height:38px; }
  .site-footer { padding-bottom:150px; }
}
/* All content remains visible without JavaScript. */
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(16px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

.hero-copy,.page-heading {
  animation:enter .8s ease both
}

.reveal-in {
  animation:enter .65s ease both
}

@supports not (backdrop-filter:blur(1px)) {
  .glass,.header {
    background:var(--surface-solid)
  }

}

@media(min-width:1450px) {
  .hero {
    min-height:850px
  }

}

@media(max-width:1120px) {
  .header {
    gap:12px;
    padding:12px 16px;
    left:3%;
    right:3%
  }

  .navbar a {
    padding:9px 10px;
    font-size:11px
  }

  .logo-text {
    font-size:15px
  }

  .header-actions {
    padding-left:8px
  }

  .hero {
    gap:22px
  }

  .hero h1 {
    font-size:85px
  }

  .portrait-frame {
    height:470px
  }

  .label-cloud {
    right:-14px
  }

  .label-network {
    left:-10px
  }

  .orbit-label {
    padding:12px 15px
  }

}

@media(max-width:950px) {
  .header {
    left:5%;
    right:5%;
    top:18px;
    min-height:68px
  }

  .navbar {
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface-solid);
    box-shadow:0 20px 40px var(--shadow)
  }

  .navbar.nav-open {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px
  }

  .navbar a {
    font-size:14px;
    padding:13px 15px
  }

  .header-actions {
    margin-left:auto
  }

  .nav-toggle {
    display:inline-flex
  }

  main {
    width:88%
  }

  .hero {
    padding-top:140px;
    gap:15px;
    min-height:auto
  }

  .hero h1 {
    font-size:74px
  }

  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.2px
  }

  .hero-description {
    font-size:11px
  }

  .hero-statement {
    font-size:20px
  }

  .hero-actions {
    gap:9px
  }

  .btn {
    padding:12px 15px;
    font-size:11px;
    gap:10px
  }

  .portrait-stage {
    padding:0 10px 35px
  }

  .portrait-frame {
    height:435px;
    border-radius:90px 24px 90px 24px
  }

  .portrait-coordinate {
    font-size:5px
  }

  .portrait-orbit {
    inset:-18px -4px 8px
  }

  .orbit-label {
    font-size:10px;
    padding:11px 13px
  }

  .orbit-label small {
    font-size:8px
  }

  .label-cloud {
    right:-15px
  }

  .label-network {
    left:-15px
  }

  .expertise-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .selected-grid {
    gap:13px
  }

  .project-preview {
    padding:16px
  }

  .project-preview h3 {
    font-size:17px
  }

  .section-title>p {
    font-size:11px;
    max-width:230px
  }

  .about-layout {
    gap:25px;
    grid-template-columns:1.2fr 1fr
  }

  .about-copy {
    padding:26px
  }

  .contact-form,.contact-info {
    padding:25px
  }

  .contact-link>span {
    font-size:13px
  }

}

@media(max-width:650px) {
  html {
    scroll-padding-top:110px
  }

  main {
    width:88%
  }

  .header {
    left:4%;
    right:4%;
    top:14px;
    min-height:64px;
    border-radius:20px;
    padding:10px 13px
  }

  .logo-mark {
    width:31px;
    height:31px
  }

  .logo {
    gap:8px
  }

  .logo-text {
    font-size:14px
  }

  .logo-text small {
    font-size:5px;
    letter-spacing:.8px
  }

  .header-actions {
    gap:0;
    padding-left:7px
  }

  .icon-button {
    width:32px;
    height:36px
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:125px;
    gap:22px
  }

  .hero-copy {
    padding-bottom:0
  }

  .hero .eyebrow {
    font-size:8px
  }

  .hero-greeting {
    font-size:16px;
    margin-top:26px
  }

  .hero h1 {
    font-size:clamp(67px,20vw,95px);
    letter-spacing:-4px
  }

  .hero-statement {
    font-size:21px;
    margin-top:20px
  }

  .role-line {
    font-size:16px;
    margin-top:21px
  }

  .hero-description {
    font-size:12px;
    max-width:340px
  }

  .hero-actions {
    margin-top:26px;
    gap:10px
  }

  .btn {
    font-size:11px;
    padding:14px 17px
  }

  .social-media {
    margin-top:21px
  }

  .portrait-stage {
    width:88%;
    max-width:360px;
    margin-top:24px;
    padding:0 8px 35px
  }

  .portrait-frame {
    height:400px
  }

  .portrait-coordinate {
    font-size:5px
  }

  .portrait-orbit {
    inset:-14px -10px 8px
  }

  .label-cloud {
    right:-23px;
    top:60px
  }

  .label-network {
    left:-22px;
    bottom:85px
  }

  .portrait-axis {
    right:10px;
    font-size:6px
  }

  .hero-bottom {
    margin-top:5px;
    padding-bottom:20px;
    gap:10px
  }

  .hero-bottom .micro-label {
    font-size:6px;
    letter-spacing:.8px
  }

  .scroll-cue {
    gap:8px
  }

  .expertise-section,.selected-section {
    padding-top:62px
  }

  .section-title {
    align-items:start;
    flex-direction:column;
    gap:18px;
    margin-bottom:24px
  }

  .section-title h2 {
    font-size:33px;
    letter-spacing:-1px
  }

  .section-title>p {
    max-width:none;
    font-size:12px
  }

  .eyebrow {
    font-size:9px;
    letter-spacing:1.4px
  }

  .expertise-grid {
    gap:11px
  }

  .capability-card {
    padding:24px 17px;
    border-radius:22px 10px 22px 10px
  }

  .capability-card h3 {
    font-size:15px;
    line-height:1.35
  }

  .capability-card p {
    font-size:11px
  }

  .capability-card>.ui-icon {
    margin-bottom:24px
  }

  .selected-grid {
    grid-template-columns:1fr;
    gap:18px
  }

  .project-preview {
    padding:20px 25px 28px
  }

  .project-preview h3 {
    font-size:22px
  }

  .project-diagram {
    height:150px
  }

  .connect-banner {
    flex-direction:column;
    align-items:start;
    padding:30px;
    margin:60px 0;
    border-radius:30px 12px 30px 12px
  }

  .connect-banner h2 {
    font-size:27px
  }

  .site-footer {
    width:88%;
    align-items:start;
    flex-direction:column;
    gap:12px;
    margin-top:50px
  }

  .page-heading {
    padding-top:132px;
    padding-bottom:35px
  }

  .page-heading h1 {
    font-size:44px;
    letter-spacing:-1.9px
  }

  .page-intro {
    font-size:13px;
    margin-top:20px
  }

  .about-layout {
    grid-template-columns:1fr;
    gap:30px
  }

  .about-copy {
    padding:27px 24px
  }

  .about-copy h2 {
    font-size:29px
  }

  .about-copy>p:not(.eyebrow):not(.role-line) {
    font-size:13px
  }

  .portrait-about {
    position:relative;
    top:auto;
    margin-top:12px
  }

  .Role {
    padding:25px 24px
  }

  .Role>h2,.Role>h3:first-of-type {
    font-size:24px
  }

  .Role p,.skills-list li {
    font-size:13px
  }

  .Role .dates,.Role h5 {
    font-size:10px
  }

  body[data-page="education"] .Education-content {
    grid-template-columns:1fr
  }

  body[data-page="education"] .Role {
    padding:25px
  }

  .contact-layout {
    grid-template-columns:1fr;
    gap:25px
  }

  .contact-form {
    padding:28px 24px
  }

  .contact-form input,.contact-form textarea {
    font-size:16px
  }

  .contact-person {
    padding:17px 20px
  }

  .contact-person h2 {
    font-size:19px
  }

  .contact-info {
    padding:26px
  }

  .contact-link>span {
    font-size:14px
  }

  .map-frame iframe {
    height:210px
  }

  .back-to-top {
    width:38px;
    height:38px;
    right:12px;
    bottom:12px
  }

}

@media(max-width:360px) {
  .logo-mark {
    display:none
  }

  .hero-actions {
    align-items:stretch
  }

  .hero-actions .btn {
    padding-inline:13px;
    font-size:10px
  }

  .expertise-grid {
    grid-template-columns:1fr
  }

}

/* Professional profile: a readable control surface, grounded in real experience. */
.hero-copy { min-width:0 }
.hero .professional-role { font-weight:600; font-size:clamp(16px,1.65vw,22px); line-height:1.4 }
.hero .hero-description { max-width:475px; font-size:13px }
.professional-status { max-width:470px; margin-top:18px; font-size:11px; line-height:1.9; color:var(--muted) }
.professional-status span { color:var(--gold); padding-inline:3px }
.hero .hero-actions { flex-wrap:wrap; margin-top:24px }
.hero .hero-actions .btn { font-size:12px }
.portrait-caption .micro-label { max-width:230px; font-size:8px }
.recruiter-view { padding-top:65px; scroll-margin-top:130px }
.recruiter-view .section-title h2 { max-width:680px }
.profile-console { border-radius:26px 10px 26px 10px; overflow:hidden }
.console-header { display:flex; justify-content:space-between; gap:15px; padding:17px 26px; border-bottom:1px solid var(--line); color:var(--gold) }
.profile-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:28px 10px }
.profile-facts>div { padding:0 24px; border-right:1px solid var(--line) }
.profile-facts>div:last-child { border:0 }
.profile-facts dt { color:var(--muted); font-size:11px; margin-bottom:8px }
.profile-facts dd { margin:0; font-size:17px; font-weight:550; line-height:1.5 }
.technology-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:16px }
.technology-card { position:relative; display:flex; flex-direction:column; gap:20px; min-height:138px; padding:23px 18px; border-radius:10px 10px 22px 10px; transition:border-color .25s,transform .25s }
.technology-card>.ui-icon { color:var(--gold); width:25px; height:25px }
.technology-card>span:not(.technology-port) { font-size:12px; font-weight:550; line-height:1.5 }
.technology-port { position:absolute; right:16px; top:23px; font:9px 'IBM Plex Mono',monospace; color:var(--subtle) }
.technology-card:hover { border-color:var(--gold); transform:translateY(-3px) }
.career-role { position:relative }
.current-role { border-left:2px solid var(--gold) }
.career-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:28px }
.career-heading>div { min-width:0 }
.career-heading h2 { max-width:660px; line-height:1.25 }
.career-heading .dates { flex-shrink:0; margin-top:9px; font-size:12px }
.Role .employer { color:var(--muted); font-size:14px; margin:10px 0 0 }
.Role .promotion-badge { display:inline-flex; align-items:center; gap:9px; color:var(--gold); font-size:11px; padding:7px 12px; margin:20px 0 0; border:1px solid var(--line); border-radius:8px; background:rgba(200,166,108,.06) }
.promotion-badge .ui-icon { width:15px; height:15px; transform:rotate(-45deg) }
.role-groups { display:grid; grid-template-columns:1.1fr 1.15fr .9fr; gap:28px; margin-top:28px; padding-top:26px; border-top:1px solid var(--line) }
.role-groups h3 { color:var(--gold); text-transform:uppercase; letter-spacing:1.5px; font:10px 'IBM Plex Mono',monospace; margin-bottom:17px }
.role-groups ul { list-style:none; padding:0; margin:0; display:grid; gap:13px }
.role-groups li { position:relative; padding-left:13px; font-size:13px; line-height:1.8; color:var(--muted) }
.role-groups li::before { content:''; position:absolute; left:0; top:10px; width:3px; height:3px; background:var(--gold); box-shadow:0 0 7px rgba(200,166,108,.25) }
.skills-library { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; margin-top:28px; align-items:start }
.skills-library .Role { padding:30px }
.skills-library .skills-list { font-size:13px }
.additional-experience { margin:70px 0 100px }
.additional-experience .section-title { margin-bottom:22px }
.additional-experience h2 { font-size:clamp(23px,3vw,32px) }
.additional-role { border-radius:20px 10px 20px 10px }
.additional-role summary { cursor:pointer; padding:25px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none }
.additional-role summary::-webkit-details-marker { display:none }
.additional-role summary strong { display:block; font-size:17px; font-weight:550 }
.additional-role summary>span>span:not(.micro-label) { display:block; font-size:12px; color:var(--muted); margin-top:5px }
.additional-role summary>.micro-label { color:var(--gold); white-space:nowrap }
.additional-body { border-top:1px solid var(--line); padding:22px 30px; font-size:13px; line-height:1.9; color:var(--muted) }
.additional-body ul { padding-left:18px; margin-top:12px }
.additional-role[open] summary>.micro-label>span { display:inline-block; transform:rotate(45deg) }
@media(max-width:1100px) {
  .technology-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .career-heading { flex-direction:column; gap:8px }
  .career-heading .dates { margin:0 }
  .profile-facts>div { padding-inline:17px }
  .profile-facts dd { font-size:15px }
}
@media(max-width:760px) {
  .profile-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 0 }
  .profile-facts>div:nth-child(2) { border:0 }
  .role-groups { grid-template-columns:1fr; gap:26px }
  .role-groups h3 { margin-bottom:12px }
  .skills-library { grid-template-columns:1fr }
  .recruiter-view { padding-top:40px }
  .recruiter-view .section-title { align-items:flex-start; gap:18px }
}
@media(max-width:450px) {
  .hero .hero-actions { flex-direction:column; align-items:stretch }
  .hero .hero-actions .btn { justify-content:center; font-size:12px }
  .technology-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .technology-card { padding:20px 15px; min-height:130px }
  .console-header { padding:16px; flex-direction:column; gap:7px }
  .profile-facts>div { padding-inline:14px }
  .profile-facts dd { font-size:14px }
  .skills-library .Role { padding:25px 22px }
  .additional-role summary { align-items:flex-start; padding:22px; gap:12px }
  .additional-role summary>.micro-label { font-size:8px }
  .additional-body { padding:20px 22px }
}

.case-nav { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px }
.case-nav .btn { font-size:12px }
.architecture-note { max-width:800px; color:var(--muted); font-size:12px; line-height:1.8; margin-bottom:40px }
.case-studies { display:grid; gap:55px }
.case-study { padding:38px; border-radius:32px 12px 32px 12px; scroll-margin-top:125px; min-width:0 }
.case-heading { padding-bottom:24px; border-bottom:1px solid var(--line) }
.case-heading .eyebrow { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:10px }
.case-heading h2 { font-size:clamp(25px,3.3vw,39px); letter-spacing:-1px; line-height:1.25; margin:18px 0 12px }
.case-heading .dates { color:var(--gold); font:11px 'IBM Plex Mono',monospace }
.case-context { display:grid; grid-template-columns:1.1fr 1fr; gap:35px; margin:25px 0 }
.case-section h3 { font-size:15px; font-weight:550; margin-bottom:12px }
.case-section h3>span { color:var(--gold); font:10px 'IBM Plex Mono',monospace; margin-right:10px }
.case-section p,.case-section li { font-size:13px; line-height:1.85; color:var(--muted) }
.case-section ul { padding-left:17px; display:grid; gap:8px }
.case-section li::marker { color:var(--gold) }
.case-body { display:grid; grid-template-columns:1fr 1fr; gap:30px 40px; padding-top:30px }
.case-body .case-section:last-child { grid-column:1/-1; border-top:1px solid var(--line); padding-top:24px }
.topology { margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(4,8,12,.42) }
.topology-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:18px 22px; border-bottom:1px solid var(--line) }
.topology-toolbar .micro-label { color:var(--gold); margin:0; font-weight:500 }
.topology-hint { font-size:11px; color:var(--muted); margin-left:auto }
.topology-reset { border:1px solid var(--line); border-radius:7px; padding:6px 10px; background:transparent; color:var(--fg); cursor:pointer; font-family:inherit; font-size:11px }
.topology-reset:hover { border-color:var(--gold) }
.topology-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:var(--gold) transparent; scrollbar-width:thin; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px }
.topology-svg { display:block; width:100%; min-width:650px; height:auto; padding:15px 0 }
.topology-paths path { fill:none; stroke:var(--subtle); stroke-width:1.5; opacity:.5; transition:stroke .2s,opacity .2s; vector-effect:non-scaling-stroke }
.topology-paths path.is-active { stroke:var(--gold-bright); stroke-width:2.5; opacity:1; filter:drop-shadow(0 0 4px rgba(227,197,143,.65)) }
.topology-node { cursor:pointer; outline:none }
.topology-node rect { fill:var(--surface-solid); stroke:var(--subtle); stroke-width:1; transition:stroke .2s,fill .2s }
.topology-node circle { fill:var(--gold) }
.topology-node text { pointer-events:none; font-family:'DM Sans',sans-serif }
.topology-node .node-title { fill:var(--fg); font-size:13px; font-weight:600 }
.topology-node .node-subtitle { fill:var(--muted); font-size:11px }
.topology-node.is-connected rect { stroke:var(--gold) }
.topology-node.is-active rect,.topology-node:focus-visible rect { stroke:var(--gold-bright); stroke-width:2.5; filter:drop-shadow(0 0 5px rgba(200,166,108,.25)) }
.topology-node:focus-visible rect { stroke-dasharray:5 3 }
.topology-inspector { padding:18px 22px; min-height:115px; border-top:1px solid var(--line); border-left:2px solid var(--gold); background:rgba(200,166,108,.04) }
.topology-inspector strong { display:block; color:var(--gold); font-size:13px; font-weight:550; margin-bottom:6px }
.topology-inspector p,.topology figcaption { font-size:12px; line-height:1.75; color:var(--muted) }
.topology figcaption { padding:14px 22px; border-top:1px solid var(--line); font-size:11px }
html[data-theme="light"] .topology { background:rgba(250,248,242,.65) }
@media(max-width:760px) {
  .case-study { padding:24px; border-radius:24px 10px 24px 10px }
  .case-context,.case-body { grid-template-columns:1fr; gap:24px }
  .case-body .case-section:last-child { grid-column:auto }
  .topology-toolbar { padding:14px; gap:10px }
  .topology-hint { width:100%; order:3; margin:0 }
  .topology-reset { margin-left:auto }
  .topology-inspector,.topology figcaption { padding:16px }
}
@media(max-width:400px) {
  .case-study { padding:20px 15px }
  .case-nav { flex-direction:column }
  .case-nav .btn { justify-content:flex-start; font-size:11px }
}

.portrait-frame .professional-portrait {
  object-fit:cover;
  object-position:var(--portrait-position,center top);
  filter:saturate(.55) contrast(1.03) brightness(1.02);
  mask-image:linear-gradient(#000 78%,transparent 100%);
}
.systems-link { margin-top:24px }
.skills-library:has(.systems-matrix) { grid-template-columns:1fr }
.systems-matrix { padding-top:30px; scroll-margin-top:130px }
.systems-matrix .section-title { margin-bottom:18px }
.systems-intro { color:var(--muted); max-width:700px; font-size:13px; line-height:1.8; margin-bottom:25px }
.systems-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.system-category { border-radius:24px 10px 24px 10px; padding:25px; min-width:0 }
.system-category:last-child { grid-column:1/-1 }
.system-category header { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line) }
.system-category header>.ui-icon { color:var(--gold); width:23px; height:23px }
.system-category h3 { font:12px var(--mono); text-transform:uppercase; letter-spacing:1.5px }
.system-category header>.micro-label { margin-left:auto; color:var(--subtle) }
.system-category ul { list-style:none; padding:0; margin:0 }
.system-category li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px }
.system-category li:last-child { border-bottom:0; padding-bottom:0 }
.system-category li>span:first-child { min-width:0 }
.system-category li small { display:block; color:var(--muted); font-size:10px; line-height:1.6; margin-top:4px }
.experience-tag { flex-shrink:0; font:9px var(--mono); color:var(--gold); padding:5px 7px; border-radius:5px; border:1px solid var(--line); background:rgba(200,166,108,.045) }
.experience-tag.is-lab { color:var(--muted); background:transparent }
.systems-detail { margin-top:20px; border-radius:14px; padding:20px 25px }
.systems-detail summary { cursor:pointer; font-size:13px; color:var(--gold) }
.systems-detail summary>span { float:right }
.systems-detail .skills-list { margin-top:22px }
.topology-paths path.topology-packet { opacity:0; pointer-events:none; stroke:var(--gold-bright); stroke-width:3; stroke-linecap:round; stroke-dasharray:5 995; filter:drop-shadow(0 0 3px rgba(227,197,143,.5)); animation:packet-transit 5s linear infinite; animation-play-state:paused }
.packets-visible .topology-paths path.topology-packet.is-running { opacity:.85; animation-play-state:running }
@keyframes packet-transit { from { stroke-dashoffset:0 } to { stroke-dashoffset:-1000 } }
html[data-motion="paused"] .packets-visible .topology-paths path.topology-packet.is-running { opacity:0 }
@media(prefers-reduced-motion:reduce) { .topology-paths path.topology-packet { display:none } }
@media(max-width:760px) {
  .systems-grid { grid-template-columns:1fr }
  .system-category:last-child { grid-column:auto }
}
@media(max-width:400px) {
  .system-category { padding:20px }
  .system-category li { align-items:flex-start; flex-direction:column; gap:7px }
  .experience-tag { font-size:9px }
}

:root { --body-copy:#d1d3d1; --reading-surface:rgba(19,23,26,.92); --reading-halo:rgba(12,14,16,.94) }
html[data-theme="light"] { --body-copy:#242c29; --reading-surface:rgba(249,248,243,.95); --reading-halo:rgba(238,236,230,.96) }
.about-copy,.case-study,.career-role,.system-category,.strength-card,.lab-study,.automation-card,.Education-content .Role,.contact-info,.contact-form,.systems-detail {
  background-color:var(--reading-surface);
  backdrop-filter:blur(26px) saturate(75%);
  -webkit-backdrop-filter:blur(26px) saturate(75%);
}
.hero-copy,.page-heading,.section-title,.lab-intro,.architecture-note,.systems-intro { position:relative; isolation:isolate }
.hero-copy::before,.page-heading::before,.section-title::before,.lab-intro::before,.architecture-note::before,.systems-intro::before {
  content:''; position:absolute; z-index:-1; inset:-22px; pointer-events:none;
  background:radial-gradient(ellipse at center,var(--reading-halo) 25%,transparent 74%);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  mask-image:radial-gradient(ellipse,#000 35%,transparent 74%);
}
main .about-copy>p:not(.eyebrow):not(.role-line),main .case-section p,main .case-section li,main .role-groups li,main .skills-list li,main .page-intro,main .systems-intro,main .architecture-note,main .additional-body,main .Education-content .Role>p:not(.dates),main .capability-card p,main .project-preview p,main .contact-intro,main .lab-intro,main .lab-study section>p,main .lab-study li,main .automation-card>p:not(.micro-label),main .strength-card p {
  font-size:16px; line-height:1.65; color:var(--body-copy); max-width:72ch;
}
.hero .hero-description { font-size:16px; line-height:1.65; color:var(--body-copy) }
.professional-status { font-size:13px }
.topology-inspector p { font-size:15px; line-height:1.65; color:var(--body-copy) }
.operational-strengths { margin-top:45px }
.strengths-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.strength-card { padding:25px; border-radius:22px 10px }
.strength-card h3 { font-size:18px; margin-bottom:12px }
.profile-information { margin-top:22px; padding:22px 25px; border-radius:14px }
.profile-information h3 { font-size:13px; color:var(--muted); margin-bottom:12px }
.profile-information dl { display:flex; flex-wrap:wrap; gap:20px 60px; margin:0 }
.profile-information dt { font-size:11px; color:var(--muted) }
.profile-information dd { margin:4px 0 0; font-size:14px }
.lab-intro { margin:0 0 28px; max-width:72ch }
.lab-nav { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 45px }
.lab-nav .btn { font-size:12px }
.lab-studies { display:grid; gap:30px }
.lab-study { padding:34px; border-radius:28px 12px; scroll-margin-top:125px; min-width:0 }
.lab-study h2 { font-size:clamp(25px,3vw,36px); margin:12px 0 }
.lab-study section { margin-top:25px }
.lab-study h3 { font-size:17px; margin-bottom:12px }
.lab-status { display:inline-block; font:10px var(--mono); color:var(--gold); border:1px solid var(--line); border-radius:7px; padding:7px 10px }
.lab-architecture { margin:0; overflow-x:auto }
.lab-architecture svg { width:100%; min-width:620px; display:block }
.lab-architecture rect { fill:var(--surface-solid); stroke:var(--gold); stroke-width:1 }
.lab-architecture text { fill:var(--fg); font:13px var(--font) }
.lab-architecture path { fill:none; stroke:var(--gold); stroke-width:1.5 }
.lab-architecture figcaption,.lab-caption { font-size:12px!important; color:var(--muted)!important; margin-top:10px }
.lab-details { margin-top:24px; border-top:1px solid var(--line); padding-top:20px }
.lab-details summary,.automation-card details summary { cursor:pointer; color:var(--gold); font-size:14px }
.lab-details summary>span { float:right }
.lab-details ol { padding-left:22px; display:grid; gap:12px }
.evidence-slot { padding:20px; border:1px dashed var(--line); border-radius:12px }
.evidence-slot strong { font-size:14px; font-weight:500 }
.evidence-slot p { font-size:14px; line-height:1.65; color:var(--muted); margin-top:8px }
.automation-section { padding-top:85px; margin-bottom:100px; scroll-margin-top:50px }
.automation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.automation-card { padding:25px; border-radius:24px 10px; min-width:0 }
.automation-card h3 { font-size:21px; line-height:1.3; margin:15px 0 }
.automation-actions { display:flex; flex-wrap:wrap; gap:15px; margin:20px 0 }
.automation-card details { border-top:1px solid var(--line); padding-top:16px }
.code-preview { margin:18px 0; padding:18px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.32); color:var(--fg); overflow:auto; font:12px/1.7 var(--mono); max-height:380px; tab-size:4 }
.code-comment { color:#9baaa0 }
.code-keyword { color:#e3c58f }
html[data-theme="light"] .code-preview { background:rgba(230,228,219,.65) }
html[data-theme="light"] .code-comment { color:#4f6357 }
html[data-theme="light"] .code-keyword { color:#70480d }
.command-trigger { display:inline-flex; align-items:center; justify-content:center; padding:0 }
.command-trigger .ui-icon { display:block; width:19px; height:19px; margin:0; flex-shrink:0 }
.command-open { overflow:hidden }
.command-dialog { width:min(620px,calc(100% - 30px)); max-height:min(720px,85dvh); margin:auto; padding:24px; border:1px solid var(--gold); border-radius:25px; color:var(--fg); background-color:var(--reading-surface); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(227,197,143,.13),0 22px 70px rgba(0,0,0,.4) }
.command-dialog[open] { display:flex; flex-direction:column }
.command-dialog .command-heading,.command-dialog input,.command-dialog .command-status { flex-shrink:0 }
.command-dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(9px) }
.command-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px }
.command-heading h2 { font-size:19px; letter-spacing:-.4px }
.command-close { padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:transparent; font-size:11px }
.command-dialog input { display:block; width:100%; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface-solid); color:var(--fg); font-size:16px }
.command-results { display:grid; grid-auto-rows:min-content; gap:4px; margin-top:14px; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; scrollbar-gutter:stable }
.command-results::-webkit-scrollbar { width:6px }
.command-results::-webkit-scrollbar-track { background:transparent; margin-block:8px }
.command-results::-webkit-scrollbar-thumb { background:var(--gold); border-radius:10px }
.command-result { text-align:left; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:13px 12px; background:transparent; color:var(--fg); border:1px solid transparent; border-radius:10px; font-size:15px }
.command-result small { color:var(--muted); font-size:11px; text-align:right }
.command-result:hover,.command-result:focus-visible { background:rgba(200,166,108,.1); border-color:var(--gold); outline:none }
.command-result:disabled { opacity:.5; cursor:not-allowed }
.command-status,.command-empty { color:var(--muted); font-size:12px; margin-top:15px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
@media(min-width:951px) and (max-width:1200px) { .header { gap:12px; padding-inline:15px } .navbar { gap:3px } .navbar a { padding-inline:9px } .logo-text small { display:none } }
@media(max-width:1000px) { .automation-grid { grid-template-columns:1fr } .strengths-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:650px) {
  .strengths-grid { grid-template-columns:1fr }
  .lab-study { padding:24px 20px }
  .command-dialog { padding:18px }
  .command-result { align-items:flex-start; flex-direction:column; gap:4px }
  .command-result small { text-align:left }
  .header-actions { gap:5px }
}
@media(max-width:400px) { .header .logo-mark { display:none } .header { padding-inline:10px; gap:5px } .header .logo-text { font-size:13px } .header-actions .icon-button { width:30px; height:34px } }

.professional-social { flex-wrap:wrap; gap:10px }
.professional-social a,.professional-social .social-unavailable { width:auto; min-height:42px; height:auto; display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:13px; font-size:11px }
.professional-social .social-unavailable { border:1px solid var(--line); background:var(--surface); color:var(--muted); opacity:.55; cursor:not-allowed }
.professional-social .ui-icon { width:17px; height:17px }
.contact-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px }
.contact-action-grid .btn { justify-content:center; min-height:48px; font-size:13px; padding:12px }
.contact-action-grid .btn:disabled { opacity:.5; cursor:not-allowed; transform:none }
.contact-action-grid small { font-size:9px }
.contact-download { grid-column:1/-1 }
.contact-email>span { font-size:clamp(15px,1.55vw,20px); overflow-wrap:anywhere }
.copy-email-status { color:var(--gold); font-size:13px; line-height:1.65; margin-top:14px; min-height:22px }
.contact-secondary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border-top:1px solid var(--line); margin-top:20px; padding-top:20px }
.contact-secondary a { font-size:14px }
.location-card { display:flex; align-items:center; gap:18px; padding:24px 28px; margin-top:22px; border-radius:18px; overflow:hidden }
.location-card>.ui-icon { width:28px; height:28px; color:var(--gold); flex-shrink:0 }
.location-card p { font-size:16px; margin-top:4px; color:var(--body-copy) }
.location-grid { position:absolute; inset:0 0 0 60%; pointer-events:none; background:linear-gradient(90deg,transparent,var(--line)); mask-image:repeating-linear-gradient(135deg,#000 0 1px,transparent 1px 14px); opacity:.4 }
@media(max-width:400px) { .contact-action-grid { grid-template-columns:1fr } .contact-download { grid-column:auto } .location-card { padding:20px; gap:12px } }

.lab-filter { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 12px }
.lab-filter button { padding:10px 16px; color:var(--body-copy); background:var(--surface-solid); border:1px solid var(--line); border-radius:9px; font-size:13px }
.lab-filter button[aria-pressed="true"] { border-color:var(--gold); color:var(--gold-bright); background:rgba(200,166,108,.1) }
#lab-filter-status { margin-bottom:24px }
.lab-pack-link { display:inline-flex; margin:15px 0 0 20px }
.lab-environment { border-left:2px solid var(--gold); padding-left:18px; margin-top:18px }
.lab-steps { margin-top:22px }
.lab-steps li { margin-bottom:22px }
.lab-steps strong { display:block; color:var(--fg); font-size:17px; margin-bottom:8px }
.lab-steps p { color:var(--body-copy); font-size:16px; line-height:1.65; max-width:72ch }
.lab-file-list { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:22px }
.lab-file-list a { font-size:12px; overflow-wrap:anywhere }
.lab-table-scroll { overflow:auto; margin-top:20px; border:1px solid var(--line); border-radius:12px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent }
.lab-table { border-collapse:collapse; width:100%; min-width:470px; text-align:left; font-size:14px }
.lab-table th { color:var(--gold); font:11px/1.5 var(--mono); padding:15px; background:rgba(200,166,108,.04) }
.lab-table td { padding:14px 15px; border-top:1px solid var(--line); color:var(--body-copy); line-height:1.6 }
.lab-evidence { margin:20px 0 0 }
.lab-evidence figcaption { color:var(--muted); font-size:12px; line-height:1.65; margin-top:12px }
.lab-checklist { margin-top:22px; padding-left:20px }
.lab-checklist li { margin-bottom:10px }
.lab-study section>ul { padding-left:20px; display:grid; gap:10px }
.lab-reference { margin-top:22px; font-size:13px }
.network-playground { border-radius:18px; padding:25px; background:var(--surface-solid) }
.network-playground>p:not(.eyebrow) { font-size:15px; line-height:1.65; color:var(--body-copy); max-width:72ch }
#network-simulator { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:24px 0 }
#network-simulator label { font-size:12px; color:var(--muted) }
#network-simulator select { display:block; width:100%; margin-top:8px; padding:11px 10px; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; font:15px var(--font) }
#network-simulator button { grid-column:1/-1; justify-self:start }
#network-result { padding:20px; border:1px solid var(--gold); border-radius:12px; background:rgba(200,166,108,.04) }
#network-result strong { color:var(--gold-bright); font:11px/1.6 var(--mono) }
#network-result p { color:var(--body-copy); font-size:15px; line-height:1.65; margin-top:12px }
#network-result.flow-denied { border-style:dashed }
.sim-route { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px }
.sim-route span { border:1px solid var(--gold); border-radius:8px; padding:8px 10px; font-size:11px; color:var(--fg) }
.sim-route span:not(:last-child)::after { content:' →'; color:var(--gold) }
.sim-route span.route-blocked { opacity:.55; border-style:dashed }
@media(max-width:760px) { #network-simulator { grid-template-columns:1fr 1fr } .lab-pack-link { margin-left:0; display:flex } }
@media(max-width:400px) { #network-simulator { grid-template-columns:1fr } .network-playground { padding:18px } .lab-status { line-height:1.7 } }

.lab-workspace { display:grid; grid-template-columns:230px minmax(0,1fr); gap:25px; align-items:start; margin-bottom:90px; scroll-margin-top:120px }
.lab-workspace [hidden] { display:none!important }
.lab-sidebar { padding:22px 16px; border-radius:22px 10px; position:sticky; top:120px; max-height:calc(100dvh - 145px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; background-color:var(--reading-surface) }
.lab-sidebar>.micro-label { color:var(--gold); margin:0 8px 20px }
.lab-project-nav { display:grid; gap:5px }
.lab-project-nav a { display:block; padding:12px; font-size:13px; line-height:1.5; color:var(--body-copy); border:1px solid transparent; border-radius:10px }
.lab-project-nav a small { display:block; font:8px/1.6 var(--mono); color:var(--muted); margin-bottom:5px; letter-spacing:1px }
.lab-project-nav a>span { float:right; color:var(--gold); font:10px var(--mono) }
.lab-project-nav a:hover,.lab-project-nav a[aria-current] { border-color:var(--gold); background:rgba(200,166,108,.065); color:var(--fg) }
.lab-sidebar-note { color:var(--muted); font-size:11px; line-height:1.7; border-top:1px solid var(--line); padding:18px 8px 0; margin-top:18px }
.lab-mobile-label,#lab-project-select { display:none }
.lab-workspace-content { min-width:0 }
.lab-overview .section-title { margin-bottom:20px }
.lab-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.lab-project-card { display:flex; flex-direction:column; padding:24px; border-radius:24px 10px; background-color:var(--reading-surface); transition:border-color .2s }
.lab-project-card:hover { border-color:var(--gold) }
.lab-project-card>.micro-label { color:var(--gold); font-size:9px }
.lab-project-card h3 { font-size:22px; letter-spacing:-.5px; line-height:1.3; margin:14px 0 }
.lab-project-card p { color:var(--body-copy); font-size:15px; line-height:1.65; margin-bottom:22px }
.lab-card-open { display:flex; justify-content:space-between; gap:15px; margin-top:auto; color:var(--gold); font-size:12px }
.lab-card-circuit { display:flex; align-items:center; margin-bottom:25px; opacity:.7 }
.lab-card-circuit span { height:18px; width:18px; border:1px solid var(--gold); border-radius:4px; box-shadow:inset 0 0 6px rgba(200,166,108,.15) }
.lab-card-circuit i { width:60px; height:1px; background:linear-gradient(90deg,var(--gold),var(--line),var(--gold)) }
.lab-evidence-note { margin-top:25px; max-width:70ch; font-size:12px; line-height:1.7; color:var(--muted) }
.lab-tablist { display:flex; gap:6px; overflow-x:auto; border-block:1px solid var(--line); padding:12px 0; margin-top:25px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent }
.lab-tablist button { flex-shrink:0; border:1px solid transparent; background:transparent; color:var(--muted); padding:9px 10px; font-size:12px; border-radius:8px }
.lab-tablist button[aria-selected="true"] { color:var(--gold-bright); background:rgba(200,166,108,.08); border-color:var(--gold) }
.lab-panel { min-width:0; padding-top:8px }
.lab-panel:focus-visible { outline:1px solid var(--gold); outline-offset:6px }
.lab-source-viewer { margin-top:18px }
.source-file-list { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 }
.source-file-list button { border:1px solid var(--line); background:var(--surface-solid); color:var(--body-copy); padding:10px; border-radius:8px; font:11px/1.6 var(--mono); overflow-wrap:anywhere; max-width:100%; text-align:left }
.source-file-list button[aria-pressed="true"] { color:var(--gold); border-color:var(--gold) }
.source-file-panel { min-width:0 }
.source-file-panel h4 { font:12px/1.7 var(--mono); overflow-wrap:anywhere; color:var(--fg); margin-bottom:10px }
.source-file-panel .text-link { font-size:12px }
.lab-workspace .lab-study { padding:28px }
.lab-workspace .lab-pack-link { font-size:12px }
.lab-workspace .automation-section { padding-top:0; margin:0 }
.lab-workspace .automation-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
.lab-workspace #network-simulator { grid-template-columns:repeat(2,minmax(0,1fr)) }
.lab-workspace .lab-status { line-height:1.7 }
@media(max-width:1050px) { .lab-workspace { grid-template-columns:200px minmax(0,1fr); gap:18px } .lab-overview-grid,.lab-workspace .automation-grid { grid-template-columns:1fr } }
@media(max-width:760px) {
  .lab-workspace { grid-template-columns:1fr; gap:20px }
  .lab-sidebar { position:static; padding:20px; max-height:none }
  .is-enhanced .lab-project-nav,.is-enhanced .lab-sidebar-note { display:none }
  .is-enhanced .lab-mobile-label { display:block; font-size:12px; color:var(--muted); margin-bottom:9px }
  .is-enhanced #lab-project-select { display:block; width:100%; min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-solid); color:var(--fg); font:16px var(--font) }
  .lab-sidebar>.micro-label { margin-left:0 }
  .lab-workspace .lab-study { padding:22px 18px }
}
@media(max-width:400px) { .lab-workspace #network-simulator { grid-template-columns:1fr } .lab-project-card { padding:22px } }

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

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

  .portrait-stage,.btn:hover,.capability-card:hover,.project-preview:hover {
    transform:none
  }

}

html[data-motion="paused"] {
  scroll-behavior:auto
}

html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after {
  animation:none!important;
  transition-duration:0s!important
}

html[data-motion="paused"] .portrait-stage {
  transform:none
}

/* Liquid navigation and an intentional, expandable card launcher. */
.business-card-dock .business-card-toggle{display:flex;justify-content:flex-start;width:48px;gap:0;border-radius:25px;animation:none;transform:none;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);background:linear-gradient(145deg,#ffffff20,transparent 50%,#d7b6781c),rgba(19,22,24,.78);transition:width .38s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.business-card-dock .business-card-indicator{flex:0 0 46px;text-align:center;line-height:46px;transition:transform .38s cubic-bezier(.22,1,.36,1)}
.business-card-label{white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .3s;font:600 12px var(--font);padding-right:16px;color:var(--fg)}
.business-card-toggle::before{inset:1px;border-radius:inherit;animation:none;filter:none;background:linear-gradient(135deg,#fff5,transparent 36%,#d5b47825 76%,#fff2);opacity:.45}
.business-card-toggle::after{animation:none;opacity:0}
.business-card-dock .business-card-toggle:focus-visible:not([aria-expanded="true"]){width:196px}
.business-card-toggle:focus-visible .business-card-label{opacity:1;transform:none}
.business-card-panel{position:absolute;bottom:58px;left:0;width:100%;margin:0;overflow:visible;background:linear-gradient(145deg,#ffffff16,transparent 45%,#c8a66c12),rgba(18,21,23,.95);border-color:#d4b16c88}
.business-card-panel::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:12px}
.business-card-panel:not([hidden]){animation:card-panel-arrive .24s ease-out}
@keyframes card-panel-arrive{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-height:480px){.business-card-panel{max-height:calc(100dvh - 94px);overflow:auto}}
html[data-theme="light"] .business-card-dock .business-card-toggle{background:linear-gradient(135deg,#fff9,transparent 60%,#c8a66c22),rgba(247,245,237,.87)}
html[data-theme="light"] .business-card-panel{background:linear-gradient(135deg,#fff9,transparent 60%),rgba(247,245,237,.97)}
.header{background:linear-gradient(175deg,#ffffff1e 0%,#ffffff05 38%,transparent 50%,#c9a76a0b 100%),rgba(18,21,24,.79);border-color:#d3ba8760;backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:inset 0 2px 2px #ffffff45,inset 0 -1px 1px #d6b98140,0 0 0 1px #0005,0 16px 44px #0004;transition:box-shadow .35s,border-color .35s}
.header::before{inset:4px;border-color:#fff2;background:linear-gradient(175deg,#ffffff0c,transparent 40%,#c8a66c08);border-radius:19px}
.header::after{background:radial-gradient(ellipse 260px 90px at var(--mx,50%) var(--my,0%),#f5d79b22,transparent 75%);opacity:var(--light,0);transition:opacity .3s}
.navbar a{color:var(--body-copy,var(--fg));border-color:#ffffff0e;background:linear-gradient(155deg,#ffffff0b,transparent 60%);transition:transform .25s,box-shadow .3s,border-color .3s,color .2s,background .3s}
.navbar a::before{inset:2px 3px 50%;background:linear-gradient(180deg,#ffffff30,#ffffff03)}
.navbar a.active{color:var(--gold-bright);border-color:#d5b16b85;background:linear-gradient(155deg,#f2d89b29,#c8a66c0a 60%,#e9c27c20);box-shadow:inset 0 1px 2px #fff6,inset 0 -2px 4px #d6b47830,0 4px 16px #0003,0 0 15px #d6b47813}
html[data-theme="light"] .header{background:linear-gradient(170deg,#ffffffe0,#ffffff50 45%,#d3b47718),rgba(244,241,231,.84);border-color:#93734655;box-shadow:inset 0 2px 2px #fff,inset 0 -1px 1px #b69b7055,0 16px 40px #66532b1c}
html[data-theme="light"] .navbar a{border-color:#84633518}
html[data-theme="light"] .navbar a.active{color:#674713;background:linear-gradient(145deg,#fff9,#d6b47835);border-color:#9b76357a}
.hover-glint{position:absolute;inset:-30% -60%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#fff4 49%,#f7dca736 51%,transparent 58%);transform:translateX(-75%) skewX(-12deg);opacity:0}
.social-media a{position:relative;overflow:hidden}
@keyframes liquid-hover-pass{0%{opacity:0;transform:translateX(-75%) skewX(-12deg)}18%{opacity:.65}100%{opacity:0;transform:translateX(75%) skewX(-12deg)}}
@media(hover:hover) and (pointer:fine){
 .business-card-dock .business-card-toggle:hover:not([aria-expanded="true"]){width:196px;border-color:#f0d59aaa;box-shadow:inset 0 1px 2px #fff7,0 8px 28px #c8a66c26}
 .business-card-toggle:hover:not([aria-expanded="true"]) .business-card-label{opacity:1;transform:none}
 .business-card-toggle:hover:not([aria-expanded="true"]) .business-card-indicator{transform:rotate(90deg)}
 .header:hover{border-color:#dabc8290;box-shadow:inset 0 2px 2px #ffffff50,inset 0 -1px 1px #d6b98155,0 16px 44px #0004,0 0 25px #c8a66c0b}
 .navbar a:hover{transform:translateY(-2px);border-color:#d8b77a80;box-shadow:inset 0 1px 2px #fff6,0 6px 16px #0003,0 0 18px #c8a66c18}
 :is(.navbar a,.social-media a,.btn):hover>.hover-glint{animation:liquid-hover-pass .7s cubic-bezier(.22,1,.36,1) both}
}
html[data-motion="paused"] :is(.business-card-toggle,.business-card-label,.business-card-indicator,.business-card-panel,.header,.navbar a){transition:none;animation:none}
html[data-motion="paused"] .hover-glint{animation:none!important;opacity:0}
html[data-motion="paused"] .navbar a:hover,html[data-motion="paused"] .business-card-indicator{transform:none!important}
@media(prefers-reduced-motion:reduce){
 :is(.business-card-toggle,.business-card-label,.business-card-indicator,.business-card-panel,.header,.navbar a){transition:none!important;animation:none!important}
 .hover-glint{animation:none!important;opacity:0!important}
 .navbar a:hover,.business-card-indicator{transform:none!important}
}

/* Expand inward so the reading meter and arrow stay anchored. */
.reading-dock .scroll-top-slot{position:relative;display:block;width:48px;height:48px;min-height:48px}
.reading-dock .back-to-top{position:absolute;inset:0 0 auto auto;width:48px;height:48px;padding:0;border-radius:25px;border:1px solid #d9bd8380;display:flex;align-items:center;justify-content:flex-start;isolation:isolate;overflow:hidden;color:var(--gold-bright);background:linear-gradient(145deg,#ffffff20,transparent 50%,#d7b6781c),rgba(19,22,24,.78);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 1px #ffffff66,inset 0 -1px 1px #ffffff20,0 4px 18px #0002;transition:width .38s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;transform:none}
.reading-dock .back-to-top[hidden]{display:none}
.top-button-arrow{position:absolute;right:0;top:0;width:46px;height:46px;display:grid;place-items:center;font:400 25px/1 var(--font);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.top-button-label{white-space:nowrap;padding:0 48px 0 17px;font:600 12px var(--font);color:var(--fg);opacity:0;transform:translateX(8px);transition:opacity .2s,transform .3s}
.reading-dock .back-to-top::before{inset:1px;border-radius:inherit;background:linear-gradient(135deg,#fff5,transparent 36%,#d5b47825 76%,#fff2);opacity:.45;pointer-events:none}
.reading-dock .back-to-top::after{pointer-events:none}
.reading-dock .back-to-top:focus-visible{width:146px;outline:2px solid var(--gold-bright);outline-offset:4px}
.back-to-top:focus-visible .top-button-label{opacity:1;transform:none}
html[data-theme="light"] .reading-dock .back-to-top{background:linear-gradient(135deg,#fff9,transparent 60%,#c8a66c22),rgba(247,245,237,.87);border-color:#84633580}
@media(hover:hover) and (pointer:fine){
 .reading-dock .back-to-top:hover{width:146px;border-color:#f0d59aaa;box-shadow:inset 0 1px 2px #fff7,0 8px 28px #c8a66c26}
 .back-to-top:hover .top-button-label{opacity:1;transform:none}
 .back-to-top:hover .top-button-arrow{transform:translateY(-2px)}
 .back-to-top:hover>.hover-glint{animation:liquid-hover-pass .7s cubic-bezier(.22,1,.36,1) both}
}
html[data-motion="paused"] :is(.back-to-top,.top-button-label,.top-button-arrow){transition:none;animation:none}
html[data-motion="paused"] .back-to-top .top-button-arrow{transform:none}
@media(prefers-reduced-motion:reduce){
 .reading-dock .back-to-top,.top-button-label,.top-button-arrow{transition:none!important;animation:none!important}
 .back-to-top .top-button-arrow{transform:none!important}
}

/* Clear lenses keep the page visible beneath the two floating controls. */
.business-card-dock .business-card-toggle,.reading-dock .back-to-top{background:linear-gradient(145deg,#ffffff0d,transparent 50%,#d7b6780c),rgba(19,22,24,.24);backdrop-filter:blur(1.5px) saturate(120%);-webkit-backdrop-filter:blur(1.5px) saturate(120%);box-shadow:inset 0 1px 1px #ffffff55,inset 0 -1px 1px #ffffff14,0 4px 14px #0002;text-shadow:0 1px 3px #000b}
.business-card-dock .business-card-toggle::before,.reading-dock .back-to-top::before{opacity:.22}
.business-card-label,.top-button-label{text-shadow:0 1px 3px #000e,0 0 5px #0007}
html[data-theme="light"] .business-card-dock .business-card-toggle,html[data-theme="light"] .reading-dock .back-to-top{background:linear-gradient(135deg,#ffffff25,transparent 60%,#c8a66c0c),rgba(247,245,237,.28);text-shadow:0 1px 2px #fffc}
html[data-theme="light"] .business-card-label,html[data-theme="light"] .top-button-label{text-shadow:0 1px 3px #fffe}
@media(hover:hover) and (pointer:fine){
 .business-card-dock .business-card-toggle:hover,.reading-dock .back-to-top:hover{background:linear-gradient(145deg,#ffffff16,transparent 55%,#d7b67814),rgba(19,22,24,.32)}
 html[data-theme="light"] .business-card-dock .business-card-toggle:hover,html[data-theme="light"] .reading-dock .back-to-top:hover{background:linear-gradient(135deg,#ffffff30,transparent 60%),rgba(247,245,237,.36)}
}

/* Clear liquid navigation: retain a readable rim while revealing the scene. */
.header{background:linear-gradient(145deg,#ffffff0d,transparent 50%,#d7b6780c),rgba(19,22,24,.24);backdrop-filter:blur(2px) saturate(120%);-webkit-backdrop-filter:blur(2px) saturate(120%);box-shadow:inset 0 1px 1px #ffffff55,inset 0 -1px 1px #ffffff14,0 6px 22px #0002;border-color:#d9bd8366}
.header::before{background:linear-gradient(155deg,#ffffff08,transparent 45%,#c8a66c08);border-color:#ffffff16}
.header .logo,.header .navbar a{text-shadow:0 1px 3px #000e,0 0 5px #0007}
.header .navbar a{background:linear-gradient(145deg,#ffffff0d,transparent 60%),rgba(19,22,24,.18)}
.header .navbar a.active{background:linear-gradient(145deg,#f2d89b20,transparent 65%,#c8a66c14),rgba(19,22,24,.24)}
html[data-theme="light"] .header{background:linear-gradient(135deg,#ffffff25,transparent 60%,#c8a66c0c),rgba(247,245,237,.28);border-color:#84633560;box-shadow:inset 0 1px 2px #fff8,0 6px 22px #66532b12}
html[data-theme="light"] .header .logo,html[data-theme="light"] .header .navbar a{text-shadow:0 1px 3px #fffe}
html[data-theme="light"] .header .navbar a{background:rgba(247,245,237,.24)}
html[data-theme="light"] .header .navbar a.active{background:linear-gradient(145deg,#fff3,#d6b47825)}
@media(hover:hover) and (pointer:fine){
 .header:hover{box-shadow:inset 0 1px 2px #ffffff66,inset 0 -1px 1px #d6b98130,0 8px 26px #0002,0 0 20px #c8a66c0b}
}

/* Sculpted liquid lenses on navigation controls only. */
.header .navbar a,.header .icon-button{border-radius:14px;border-color:#e5d1a344;background:linear-gradient(165deg,#ffffff24 0%,#ffffff08 42%,#00000012 53%,#d6b47814 100%),rgba(25,28,30,.26);box-shadow:inset 0 1.5px 1px #ffffff66,inset 1px 0 1px #ffffff22,inset 0 -2px 4px #0004,0 3px 9px #0002;backdrop-filter:blur(7px) saturate(155%);-webkit-backdrop-filter:blur(7px) saturate(155%)}
.header .navbar a::before,.header .icon-button::before{inset:2px 4px 52%;border-radius:12px 12px 45% 45%;background:linear-gradient(180deg,#ffffff4d,#ffffff05);opacity:.8}
.header .navbar a.active{border-color:#dabb7c99;background:linear-gradient(165deg,#f4dba83b,#e6c78b10 45%,#71542216 55%,#e2bb7129);box-shadow:inset 0 1.5px 2px #fff8,inset 0 -2px 3px #c8a66c35,0 3px 12px #c8a66c1c}
html[data-theme="light"] .header .navbar a,html[data-theme="light"] .header .icon-button{background:linear-gradient(165deg,#ffffff99,#ffffff22 48%,#c8a66c12),rgba(247,245,237,.25);border-color:#94774640;box-shadow:inset 0 2px 2px #fffd,inset 0 -2px 3px #94774624,0 3px 9px #66532b12}
html[data-theme="light"] .header .navbar a.active{border-color:#a8864a99;background:linear-gradient(155deg,#fff9,#e4c99235 48%,#d1b07125)}
@media(hover:hover) and (pointer:fine){
 .header .navbar a:hover,.header .icon-button:hover{border-color:#e6c88aa6;box-shadow:inset 0 2px 2px #fff9,inset 0 -2px 4px #c8a66c25,0 5px 15px #c8a66c25}
}

/* Lab filters use the same liquid lenses as the main navigation. */
.lab-filter{align-items:center}
.lab-filter button{position:relative;isolation:isolate;overflow:hidden;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font:500 13px var(--font);line-height:1.3;padding:10px 16px;border-radius:14px;border-color:#e5d1a344;color:var(--body-copy);background:linear-gradient(165deg,#ffffff24 0%,#ffffff08 42%,#00000012 53%,#d6b47814 100%),rgba(25,28,30,.26);box-shadow:inset 0 1.5px 1px #ffffff66,inset 1px 0 1px #ffffff22,inset 0 -2px 4px #0004,0 3px 9px #0002;backdrop-filter:blur(7px) saturate(155%);-webkit-backdrop-filter:blur(7px) saturate(155%);transition:transform .25s,box-shadow .3s,border-color .3s;cursor:pointer;text-shadow:0 1px 3px #0008}
.lab-filter button::before{content:'';position:absolute;inset:2px 4px 52%;z-index:-1;border-radius:12px 12px 45% 45%;background:linear-gradient(180deg,#ffffff4d,#ffffff05);opacity:.8;pointer-events:none}
.lab-filter button::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 95px 60px at var(--mx,25%) var(--my,0%),#fff5,transparent 75%);opacity:var(--light,0);transition:opacity .25s}
.lab-filter button[aria-pressed="true"]{color:var(--gold-bright);border-color:#dabb7c99;background:linear-gradient(165deg,#f4dba83b,#e6c78b10 45%,#71542216 55%,#e2bb7129);box-shadow:inset 0 1.5px 2px #fff8,inset 0 -2px 3px #c8a66c35,0 3px 12px #c8a66c1c}
.lab-filter button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
html[data-theme="light"] .lab-filter button{color:var(--fg);text-shadow:0 1px 3px #fffe;background:linear-gradient(165deg,#ffffff99,#ffffff22 48%,#c8a66c12),rgba(247,245,237,.25);border-color:#94774640;box-shadow:inset 0 2px 2px #fffd,inset 0 -2px 3px #94774624,0 3px 9px #66532b12}
html[data-theme="light"] .lab-filter button[aria-pressed="true"]{color:#674713;border-color:#a8864a99;background:linear-gradient(155deg,#fff9,#e4c99235 48%,#d1b07125)}
@media(hover:hover) and (pointer:fine){
 .lab-filter button:hover{transform:translateY(-2px);border-color:#e6c88aa6;box-shadow:inset 0 2px 2px #fff9,inset 0 -2px 4px #c8a66c25,0 5px 15px #c8a66c25}
 .lab-filter button:hover>.hover-glint{animation:liquid-hover-pass .7s cubic-bezier(.22,1,.36,1) both}
}
html[data-motion="paused"] .lab-filter button{transition:none;transform:none}
@media(prefers-reduced-motion:reduce){.lab-filter button{transition:none!important;transform:none!important}}